@den4ik92/ng2-smart-table 3.0.2 → 3.1.0

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

@@ -2136,7 +2136,7 @@ class TbodyCustomComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
-    @for (action of customActions(); track action) {
+    @for (action of customActions(); track $index) {
       <a
         [id]="'row-' + row.index + '_action-' + action.name + '-button'"
         href="#"
@@ -2153,7 +2153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: "ng2-st-tbody-custom",
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @for (action of customActions(); track action) {
+    @for (action of customActions(); track $index) {
       <a
         [id]="'row-' + row.index + '_action-' + action.name + '-button'"
         href="#"
@@ -2220,11 +2220,11 @@ class Ng2SmartTableTbodyComponent {
         return item?.id || index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: { grid: "grid", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", rowClassFunction: "rowClassFunction" }, outputs: { save: "save", cancel: "cancel", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", editRowSelect: "editRowSelect", multipleSelectRow: "multipleSelectRow" }, usesOnChanges: true, ngImport: i0, template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  @if (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 (!row.isInEditing && showActionColumnLeft) {\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      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\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  } @for (cell of getVisibleCells(row.cells); track cell) {\n  <td [ngClass]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\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      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm", "editConfirm"], outputs: ["edit", "delete", "editRowSelect"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: { grid: "grid", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", rowClassFunction: "rowClassFunction" }, outputs: { save: "save", cancel: "cancel", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", editRowSelect: "editRowSelect", multipleSelectRow: "multipleSelectRow" }, usesOnChanges: true, ngImport: i0, template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  @if (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 (!row.isInEditing && showActionColumnLeft) {\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      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\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  } @for (cell of getVisibleCells(row.cells); track cell.getId()) {\n  <td [ngClass]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\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      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm", "editConfirm"], outputs: ["edit", "delete", "editRowSelect"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng2-st-tbody]', template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  @if (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 (!row.isInEditing && showActionColumnLeft) {\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      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\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  } @for (cell of getVisibleCells(row.cells); track cell) {\n  <td [ngClass]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\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      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\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"] }]
+            args: [{ selector: '[ng2-st-tbody]', template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  @if (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 (!row.isInEditing && showActionColumnLeft) {\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      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\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  } @for (cell of getVisibleCells(row.cells); track cell.getId()) {\n  <td [ngClass]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\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      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\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"] }]
         }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
@@ -2683,13 +2683,13 @@ class TheadFitlersRowComponent {
         this.isMultiSelectVisible = false;
         this.showActionColumnLeft = false;
         this.showActionColumnRight = false;
-        this.filterInputClass = '';
+        this.filterInputClass = "";
     }
     ngOnChanges() {
         this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
-        this.showActionColumnLeft = this.grid.showActionColumn('left');
-        this.showActionColumnRight = this.grid.showActionColumn('right');
-        this.filterInputClass = this.grid.getSetting('filter.inputClass', '');
+        this.showActionColumnLeft = this.grid.showActionColumn("left");
+        this.showActionColumnRight = this.grid.showActionColumn("right");
+        this.filterInputClass = this.grid.getSetting("filter.inputClass", "");
     }
     getVisibleColumns(columns) {
         return (columns || []).filter((column) => !column.hide);
@@ -2697,63 +2697,57 @@ class TheadFitlersRowComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TheadFitlersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: `
     @if (isMultiSelectVisible) {
-      <th></th>
-    }
-    @if (showActionColumnLeft) {
-      <th ng2-st-add-button
-        [grid]="grid"
-        (create)="create.emit($event)">
-      </th>
-    }
-    @for (column of getVisibleColumns(grid.getColumns()); track column) {
-      <th class="ng2-smart-th {{ column.id }}">
-        <ng2-smart-table-filter [source]="source"
-          [column]="column"
-          [inputClass]="filterInputClass"
-          (filter)="filter.emit($event)">
-        </ng2-smart-table-filter>
-      </th>
-    }
-    @if (showActionColumnRight) {
-      <th ng2-st-add-button
-        [grid]="grid"
+    <th></th>
+    } @if (showActionColumnLeft) {
+    <th ng2-st-add-button [grid]="grid" (create)="create.emit($event)"></th>
+    } @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
+    <th class="ng2-smart-th {{ column.id }}">
+      <ng2-smart-table-filter
         [source]="source"
-        (create)="create.emit($event)">
-      </th>
-    }
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter" }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }] }); }
+        [column]="column"
+        [inputClass]="filterInputClass"
+        (filter)="filter.emit($event)"
+      >
+      </ng2-smart-table-filter>
+    </th>
+    } @if (showActionColumnRight) {
+    <th
+      ng2-st-add-button
+      [grid]="grid"
+      [source]="source"
+      (create)="create.emit($event)"
+    ></th>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter" }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TheadFitlersRowComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: '[ng2-st-thead-filters-row]',
+                    selector: "[ng2-st-thead-filters-row]",
                     template: `
     @if (isMultiSelectVisible) {
-      <th></th>
-    }
-    @if (showActionColumnLeft) {
-      <th ng2-st-add-button
-        [grid]="grid"
-        (create)="create.emit($event)">
-      </th>
-    }
-    @for (column of getVisibleColumns(grid.getColumns()); track column) {
-      <th class="ng2-smart-th {{ column.id }}">
-        <ng2-smart-table-filter [source]="source"
-          [column]="column"
-          [inputClass]="filterInputClass"
-          (filter)="filter.emit($event)">
-        </ng2-smart-table-filter>
-      </th>
-    }
-    @if (showActionColumnRight) {
-      <th ng2-st-add-button
-        [grid]="grid"
+    <th></th>
+    } @if (showActionColumnLeft) {
+    <th ng2-st-add-button [grid]="grid" (create)="create.emit($event)"></th>
+    } @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
+    <th class="ng2-smart-th {{ column.id }}">
+      <ng2-smart-table-filter
         [source]="source"
-        (create)="create.emit($event)">
-      </th>
+        [column]="column"
+        [inputClass]="filterInputClass"
+        (filter)="filter.emit($event)"
+      >
+      </ng2-smart-table-filter>
+    </th>
+    } @if (showActionColumnRight) {
+    <th
+      ng2-st-add-button
+      [grid]="grid"
+      [source]="source"
+      (create)="create.emit($event)"
+    ></th>
     }
-    `,
+  `,
                 }]
         }], propDecorators: { grid: [{
                 type: Input
@@ -2836,7 +2830,7 @@ class TheadFormRowComponent {
         (create)="onCreate($event)"
       ></ng2-st-actions>
     </td>
-    } @for (cell of getVisibleCells(grid.getNewRow().getCells()); track cell) {
+    } @for (cell of getVisibleCells(grid.getNewRow().getCells()); track cell.getId()) {
     <td>
       <ng2-smart-table-cell
         [cell]="cell"
@@ -2873,7 +2867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         (create)="onCreate($event)"
       ></ng2-st-actions>
     </td>
-    } @for (cell of getVisibleCells(grid.getNewRow().getCells()); track cell) {
+    } @for (cell of getVisibleCells(grid.getNewRow().getCells()); track cell.getId()) {
     <td>
       <ng2-smart-table-cell
         [cell]="cell"
@@ -3093,7 +3087,7 @@ class TheadTitlesRowComponent {
     @if (showActionColumnLeft) {
       <th ng2-st-actions-title [grid]="grid"></th>
     }
-    @for (column of getVisibleColumns(grid.getColumns()); track column) {
+    @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
       <th
         class="ng2-smart-th {{ column.id }}"
         [ngClass]="column.class"
@@ -3121,7 +3115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     @if (showActionColumnLeft) {
       <th ng2-st-actions-title [grid]="grid"></th>
     }
-    @for (column of getVisibleColumns(grid.getColumns()); track column) {
+    @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
       <th
         class="ng2-smart-th {{ column.id }}"
         [ngClass]="column.class"
@@ -3613,5 +3607,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Cell, Column, DataSource, DefaultEditor, DefaultFilter, LocalDataSource, Ng2SmartTableComponent, Ng2SmartTableModule, Row, SmartTableOnChangedEventName };
+export { Cell, Column, DataSource, DefaultEditor, DefaultFilter, Deferred, LocalDataSource, Ng2SmartTableComponent, Ng2SmartTableModule, Row, SmartTableOnChangedEventName };
 //# sourceMappingURL=den4ik92-ng2-smart-table.mjs.map