@den4ik92/ng2-smart-table 2.0.6 → 2.1.2

package/{fesm2020 → fesm2022}/den4ik92-ng2-smart-table.mjs

@@ -7,6 +7,95 @@ import { FormsModule, UntypedFormControl, NgControl, ReactiveFormsModule } from
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';
 
+function prepareValue(value) { return value; }
+class Cell {
+    static { this.PREPARE = prepareValue; }
+    constructor(value, row, column, dataSet) {
+        this.value = value;
+        this.row = row;
+        this.column = column;
+        this.dataSet = dataSet;
+        this.newValue = '';
+        this.newValue = value;
+    }
+    getColumn() {
+        return this.column;
+    }
+    getColumnClass() {
+        return this.column.class;
+    }
+    getRow() {
+        return this.row;
+    }
+    getValue() {
+        const prepare = this.column.getValuePrepareFunction() || Cell.PREPARE;
+        return prepare.call(null, this.value, this.row.getData(), this);
+    }
+    setValue(value) {
+        this.newValue = value;
+    }
+    getId() {
+        return this.getColumn().id;
+    }
+    getTitle() {
+        return this.getColumn().title;
+    }
+    isEditable() {
+        if (this.getRow().index === -1) {
+            return this.getColumn().isAddable;
+        }
+        else {
+            return this.getColumn().isEditable;
+        }
+    }
+}
+
+class Row {
+    constructor(index, data, _dataSet) {
+        this.index = index;
+        this.data = data;
+        this._dataSet = _dataSet;
+        this.pending = false;
+        this.isSelected = false;
+        this.isInEditing = false;
+        this.cells = [];
+        this.process();
+    }
+    getCell(column) {
+        return this.cells.find(el => el.getColumn() === column);
+    }
+    getCells() {
+        return this.cells;
+    }
+    getData() {
+        return this.data;
+    }
+    getIsSelected() {
+        return this.isSelected;
+    }
+    getNewData() {
+        const values = Object.assign({}, this.data);
+        this.getCells().forEach((cell) => values[cell.getColumn().id] = cell.newValue);
+        return values;
+    }
+    setData(data) {
+        this.data = data;
+        this.process();
+    }
+    process() {
+        this.cells = [];
+        this._dataSet.getColumns().forEach((column) => {
+            const cell = this.createCell(column);
+            this.cells.push(cell);
+        });
+    }
+    createCell(column) {
+        const defValue = column.settings.defaultValue ? column.settings.defaultValue : '';
+        const value = typeof this.data[column.id] === 'undefined' ? defValue : this.data[column.id];
+        return new Cell(value, this, column, this._dataSet);
+    }
+}
+
 /**
  * Extending object that entered in first argument.
  *
@@ -91,92 +180,6 @@ function getPageForRowIndex(index, perPage) {
     return Math.floor(index / perPage) + 1;
 }
 
-function prepareValue(value) { return value; }
-class Cell {
-    constructor(value, row, column, dataSet) {
-        this.value = value;
-        this.row = row;
-        this.column = column;
-        this.dataSet = dataSet;
-        this.newValue = '';
-        this.newValue = value;
-    }
-    getColumn() {
-        return this.column;
-    }
-    getRow() {
-        return this.row;
-    }
-    getValue() {
-        const valid = this.column.getValuePrepareFunction() instanceof Function;
-        const prepare = valid ? this.column.getValuePrepareFunction() : Cell.PREPARE;
-        return prepare.call(null, this.value, this.row.getData(), this);
-    }
-    setValue(value) {
-        this.newValue = value;
-    }
-    getId() {
-        return this.getColumn().id;
-    }
-    getTitle() {
-        return this.getColumn().title;
-    }
-    isEditable() {
-        if (this.getRow().index === -1) {
-            return this.getColumn().isAddable;
-        }
-        else {
-            return this.getColumn().isEditable;
-        }
-    }
-}
-Cell.PREPARE = prepareValue;
-
-class Row {
-    constructor(index, data, _dataSet) {
-        this.index = index;
-        this.data = data;
-        this._dataSet = _dataSet;
-        this.isSelected = false;
-        this.isInEditing = false;
-        this.cells = [];
-        this.process();
-    }
-    getCell(column) {
-        return this.cells.find(el => el.getColumn() === column);
-    }
-    getCells() {
-        return this.cells;
-    }
-    getData() {
-        return this.data;
-    }
-    getIsSelected() {
-        return this.isSelected;
-    }
-    getNewData() {
-        const values = Object.assign({}, this.data);
-        this.getCells().forEach((cell) => values[cell.getColumn().id] = cell.newValue);
-        return values;
-    }
-    setData(data) {
-        this.data = data;
-        this.process();
-    }
-    process() {
-        this.cells = [];
-        this._dataSet.getColumns().forEach((column) => {
-            const cell = this.createCell(column);
-            this.cells.push(cell);
-        });
-    }
-    createCell(column) {
-        const defValue = column.settings.defaultValue ? column.settings.defaultValue : '';
-        const value = typeof this.data[column.id] === 'undefined' ? defValue : this.data[column.id];
-        return new Cell(value, this, column, this._dataSet);
-    }
-}
-
 class Column {
     constructor(id, settings, dataSet) {
         this.id = id;
@@ -195,7 +198,7 @@ class Column {
         this.defaultSortDirection = false;
         this.editor = false;
         this.filter = false;
-        this.process();
+        this.process(this.settings);
     }
     getCompareFunction() {
         return this.compareFunction;
@@ -221,30 +224,30 @@ class Column {
         }
         return false;
     }
-    process() {
-        this.title = this.settings.title;
-        this.class = this.settings.class || '';
-        this.width = this.settings.width || '';
-        this.hide = !!this.settings.hide;
-        this.type = this.settings.type;
-        if (this.settings?.editor) {
-            this.editor = this.settings.editor;
-        }
-        if (this.settings?.filter) {
-            this.filter = this.settings.filter;
-        }
-        if (this.settings.type === 'custom' && this.settings.renderComponent) {
-            this.renderComponent = this.settings.renderComponent;
-        }
-        this.isFilterable = typeof this.settings.filter === 'undefined' ? true : !!this.settings['filter'];
-        this.defaultSortDirection = this.settings?.sortDirection || false;
-        this.isSortable = typeof this.settings.sort === 'undefined' ? true : this.settings.sort;
-        this.isEditable = typeof this.settings.editable === 'undefined' ? true : this.settings.editable;
-        this.isAddable = typeof this.settings.addable === 'undefined' ? true : this.settings.addable;
+    process(settings) {
+        this.title = settings.title;
+        this.class = settings.class || '';
+        this.width = settings.width || '';
+        this.hide = !!settings.hide;
+        this.type = settings.type;
+        if (settings?.editor) {
+            this.editor = settings.editor;
+        }
+        if (settings?.filter) {
+            this.filter = settings.filter;
+        }
+        if (settings.type === 'custom' && settings.renderComponent) {
+            this.renderComponent = settings.renderComponent;
+        }
+        this.isFilterable = typeof settings.filter === 'undefined' ? true : !!settings['filter'];
+        this.defaultSortDirection = settings?.sortDirection || false;
+        this.isSortable = typeof settings.sort === 'undefined' ? true : settings.sort;
+        this.isEditable = typeof settings.editable === 'undefined' ? true : settings.editable;
+        this.isAddable = typeof settings.addable === 'undefined' ? true : settings.addable;
         this.sortDirection = this.prepareSortDirection();
-        this.compareFunction = this.settings.compareFunction;
-        this.valuePrepareFunction = this.settings.valuePrepareFunction;
-        this.filterFunction = this.settings.filterFunction;
+        this.compareFunction = settings.compareFunction;
+        this.valuePrepareFunction = settings.valuePrepareFunction;
+        this.filterFunction = settings.filterFunction;
     }
     prepareSortDirection() {
         return this.defaultSortDirection === 'desc' ? 'desc' : 'asc';
@@ -429,9 +432,11 @@ class Grid {
         row.isInEditing = true;
     }
     create(row, confirmEmitter) {
+        row.pending = true;
         const deferred = new Deferred();
         deferred.promise
             .then((newData) => {
+            row.pending = false;
             newData = newData ? newData : row.getNewData();
             this.source.prepend(newData).then(() => {
                 this.createFormShown = false;
@@ -439,7 +444,7 @@ class Grid {
             });
         })
             .catch((err) => {
-            // doing nothing
+            row.pending = false;
         });
         if (this.getSetting("add.confirmCreate")) {
             confirmEmitter.emit({
@@ -449,20 +454,22 @@ class Grid {
             });
         }
         else {
-            deferred.resolve();
+            deferred.resolve(false);
         }
     }
     save(row, confirmEmitter) {
+        row.pending = true;
         const deferred = new Deferred();
         deferred.promise
             .then((newData) => {
+            row.pending = false;
             newData = newData ? newData : row.getNewData();
             this.source.update(row.getData(), newData).then(() => {
                 row.isInEditing = false;
             });
         })
             .catch((err) => {
-            // doing nothing
+            row.pending = false;
         });
         if (this.getSetting("edit.confirmSave")) {
             confirmEmitter.emit({
@@ -473,16 +480,19 @@ class Grid {
             });
         }
         else {
-            deferred.resolve();
+            deferred.resolve(false);
         }
     }
     delete(row, confirmEmitter) {
+        row.pending = true;
         const deferred = new Deferred();
         deferred.promise
             .then(() => {
+            row.pending = false;
             this.source.remove(row.getData());
         })
             .catch((err) => {
+            row.pending = false;
             // doing nothing
         });
         if (this.getSetting("delete.confirmDelete")) {
@@ -493,7 +503,7 @@ class Grid {
             });
         }
         else {
-            deferred.resolve();
+            deferred.resolve(false);
         }
         if (row.isSelected) {
             this.dataSet.selectRow(row, false);
@@ -569,10 +579,10 @@ class EditCellDefault {
     onClick(event) {
         event.stopPropagation();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCellDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditCellDefault, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: '', isInline: true }); }
 }
-EditCellDefault.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EditCellDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditCellDefault.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: EditCellDefault, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EditCellDefault, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCellDefault, decorators: [{
             type: Component,
             args: [{
                     template: ''
@@ -608,12 +618,12 @@ class CustomEditComponent extends EditCellDefault {
             this.customComponent.destroy();
         }
     }
-}
-CustomEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomEditComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-CustomEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CustomEditComponent, selector: "table-cell-custom-editor", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomEditComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomEditComponent, selector: "table-cell-custom-editor", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #dynamicTarget></ng-template>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomEditComponent, decorators: [{
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'table-cell-custom-editor',
@@ -633,10 +643,10 @@ class DefaultEditor {
         this.onEdited = new EventEmitter();
         this.onClick = new EventEmitter();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultEditor, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { onStopEditing: "onStopEditing", onEdited: "onEdited", onClick: "onClick" }, ngImport: i0, template: '', isInline: true }); }
 }
-DefaultEditor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DefaultEditor.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefaultEditor, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { onStopEditing: "onStopEditing", onEdited: "onEdited", onClick: "onClick" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultEditor, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -663,9 +673,8 @@ class CheckboxEditorComponent extends DefaultEditor {
         const falseVal = (config && config?.false) || false;
         this.cell.newValue = event.target.checked ? trueVal : falseVal;
     }
-}
-CheckboxEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxEditorComponent, selector: "checkbox-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxEditorComponent, selector: "checkbox-editor", usesInheritance: true, ngImport: i0, template: `
     <input [ngClass]="inputClass"
            type="checkbox"
            class="form-control"
@@ -674,8 +683,9 @@ CheckboxEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
            [checked]="cell.getValue() === (cell.getColumn().getConfig()?.true || true)"
            (click)="onClick.emit($event)"
            (change)="onChange($event)">
-    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
+    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'checkbox-editor', template: `
     <input [ngClass]="inputClass"
@@ -693,9 +703,8 @@ class InputEditorComponent extends DefaultEditor {
     constructor() {
         super();
     }
-}
-InputEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: InputEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: InputEditorComponent, selector: "input-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputEditorComponent, selector: "input-editor", usesInheritance: true, ngImport: i0, template: `
     <input [ngClass]="inputClass"
            class="form-control"
            [(ngModel)]="cell.newValue"
@@ -705,8 +714,9 @@ InputEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
            (click)="onClick.emit($event)"
            (keydown.enter)="onEdited.emit($event)"
            (keydown.esc)="onStopEditing.emit()">
-    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: InputEditorComponent, decorators: [{
+    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input-editor', template: `
     <input [ngClass]="inputClass"
@@ -725,9 +735,8 @@ class SelectEditorComponent extends DefaultEditor {
     constructor() {
         super();
     }
-}
-SelectEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectEditorComponent, selector: "select-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectEditorComponent, selector: "select-editor", usesInheritance: true, ngImport: i0, template: `
     <select [ngClass]="inputClass"
             class="form-control"
             [(ngModel)]="cell.newValue"
@@ -741,8 +750,9 @@ SelectEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [selected]="option.value === cell.getValue()">{{ option.title }}
         </option>
     </select>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectEditorComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'select-editor',
@@ -768,9 +778,8 @@ class TextareaEditorComponent extends DefaultEditor {
     constructor() {
         super();
     }
-}
-TextareaEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextareaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextareaEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextareaEditorComponent, selector: "textarea-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextareaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextareaEditorComponent, selector: "textarea-editor", usesInheritance: true, ngImport: i0, template: `
     <textarea [ngClass]="inputClass"
               class="form-control"
               [(ngModel)]="cell.newValue"
@@ -781,8 +790,9 @@ TextareaEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
               (keydown.enter)="onEdited.emit($event)"
               (keydown.esc)="onStopEditing.emit()">
     </textarea>
-    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextareaEditorComponent, decorators: [{
+    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextareaEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'textarea-editor', template: `
     <textarea [ngClass]="inputClass"
@@ -809,10 +819,10 @@ class DefaultEditComponent extends EditCellDefault {
         }
         return 'text';
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultEditComponent, selector: "table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div [ngSwitch]=\"getEditorType()\">\n    <select-editor *ngSwitchCase=\"'list'\"\n                   [cell]=\"cell\"\n                   [inputClass]=\"inputClass\"\n                   (onClick)=\"onClick($event)\"\n                   (onEdited)=\"onEdited($event)\"\n                   (onStopEditing)=\"onStopEditing()\">\n    </select-editor>\n\n    <textarea-editor *ngSwitchCase=\"'textarea'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\"\n                     (onEdited)=\"onEdited($event)\"\n                     (onStopEditing)=\"onStopEditing()\">\n    </textarea-editor>\n\n    <checkbox-editor *ngSwitchCase=\"'checkbox'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\">\n    </checkbox-editor>\n\n    <input-editor *ngSwitchDefault\n                  [cell]=\"cell\"\n                  [inputClass]=\"inputClass\"\n                  (onClick)=\"onClick($event)\"\n                  (onEdited)=\"onEdited($event)\"\n                  (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n</div>", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }, { kind: "component", type: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }] }); }
 }
-DefaultEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DefaultEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefaultEditComponent, selector: "table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div [ngSwitch]=\"getEditorType()\">\n    <select-editor *ngSwitchCase=\"'list'\"\n                   [cell]=\"cell\"\n                   [inputClass]=\"inputClass\"\n                   (onClick)=\"onClick($event)\"\n                   (onEdited)=\"onEdited($event)\"\n                   (onStopEditing)=\"onStopEditing()\">\n    </select-editor>\n\n    <textarea-editor *ngSwitchCase=\"'textarea'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\"\n                     (onEdited)=\"onEdited($event)\"\n                     (onStopEditing)=\"onStopEditing()\">\n    </textarea-editor>\n\n    <checkbox-editor *ngSwitchCase=\"'checkbox'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\">\n    </checkbox-editor>\n\n    <input-editor *ngSwitchDefault\n                  [cell]=\"cell\"\n                  [inputClass]=\"inputClass\"\n                  (onClick)=\"onClick($event)\"\n                  (onEdited)=\"onEdited($event)\"\n                  (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n</div>", dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }, { kind: "component", type: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-cell-default-editor', template: "<div [ngSwitch]=\"getEditorType()\">\n    <select-editor *ngSwitchCase=\"'list'\"\n                   [cell]=\"cell\"\n                   [inputClass]=\"inputClass\"\n                   (onClick)=\"onClick($event)\"\n                   (onEdited)=\"onEdited($event)\"\n                   (onStopEditing)=\"onStopEditing()\">\n    </select-editor>\n\n    <textarea-editor *ngSwitchCase=\"'textarea'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\"\n                     (onEdited)=\"onEdited($event)\"\n                     (onStopEditing)=\"onStopEditing()\">\n    </textarea-editor>\n\n    <checkbox-editor *ngSwitchCase=\"'checkbox'\"\n                     [cell]=\"cell\"\n                     [inputClass]=\"inputClass\"\n                     (onClick)=\"onClick($event)\">\n    </checkbox-editor>\n\n    <input-editor *ngSwitchDefault\n                  [cell]=\"cell\"\n                  [inputClass]=\"inputClass\"\n                  (onClick)=\"onClick($event)\"\n                  (onEdited)=\"onEdited($event)\"\n                  (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n</div>" }]
         }], ctorParameters: function () { return []; } });
@@ -833,9 +843,8 @@ class EditCellComponent {
         }
         return 'text';
     }
-}
-EditCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: `
       <div [ngSwitch]="getEditorType()">
         <table-cell-custom-editor *ngSwitchCase="'custom'"
                                   [cell]="cell"
@@ -848,8 +857,9 @@ EditCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                                   (edited)="onEdited($event)">
         </table-cell-default-editor>
       </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CustomEditComponent, selector: "table-cell-custom-editor" }, { kind: "component", type: DefaultEditComponent, selector: "table-cell-default-editor" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: EditCellComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CustomEditComponent, selector: "table-cell-custom-editor" }, { kind: "component", type: DefaultEditComponent, selector: "table-cell-default-editor" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'table-cell-edit-mode',
@@ -904,12 +914,12 @@ class CustomViewComponent {
             rowData: this.cell.getRow().getData()
         };
     }
-}
-CustomViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomViewComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-CustomViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CustomViewComponent, selector: "custom-view-component", inputs: { cell: "cell" }, viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomViewComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomViewComponent, selector: "custom-view-component", inputs: { cell: "cell" }, viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
     <ng-template #dynamicTarget></ng-template>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomViewComponent, decorators: [{
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'custom-view-component',
@@ -925,16 +935,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class ViewCellComponent {
-}
-ViewCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ViewCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: { cell: "cell" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: { cell: "cell" }, ngImport: i0, template: `
     <div [ngSwitch]="cell.getColumn().type">
         <custom-view-component *ngSwitchCase="'custom'" [cell]="cell"></custom-view-component>
         <div *ngSwitchCase="'html'" [innerHTML]="cell.getValue()"></div>
         <div *ngSwitchDefault>{{ cell.getValue() }}</div>
     </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CustomViewComponent, selector: "custom-view-component", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewCellComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CustomViewComponent, selector: "custom-view-component", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'table-cell-view-mode',
@@ -966,16 +976,16 @@ class CellComponent {
             this.grid.save(this.row, this.editConfirm);
         }
     }
-}
-CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CellComponent, selector: "ng2-smart-table-cell", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", createConfirm: "createConfirm", isNew: "isNew", cell: "cell", inputClass: "inputClass", mode: "mode", isInEditing: "isInEditing" }, outputs: { edited: "edited" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CellComponent, selector: "ng2-smart-table-cell", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", createConfirm: "createConfirm", isNew: "isNew", cell: "cell", inputClass: "inputClass", mode: "mode", isInEditing: "isInEditing" }, outputs: { edited: "edited" }, ngImport: i0, template: `
     <table-cell-view-mode *ngIf="!isInEditing" [cell]="cell"></table-cell-view-mode>
     <table-cell-edit-mode *ngIf="isInEditing" [cell]="cell"
                           [inputClass]="inputClass"
                           (edited)="onEdited($event)">
     </table-cell-edit-mode>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: ["cell", "inputClass"], outputs: ["edited"] }, { kind: "component", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: ["cell"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CellComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: ["cell", "inputClass"], outputs: ["edited"] }, { kind: "component", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: ["cell"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-smart-table-cell',
@@ -1024,35 +1034,35 @@ const CELL_COMPONENTS = [
     ViewCellComponent,
 ];
 class CellModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: CellModule, declarations: [CellComponent,
+            EditCellDefault,
+            DefaultEditor,
+            CustomEditComponent,
+            DefaultEditComponent,
+            EditCellComponent,
+            CheckboxEditorComponent,
+            InputEditorComponent,
+            SelectEditorComponent,
+            TextareaEditorComponent,
+            CustomViewComponent,
+            ViewCellComponent], imports: [CommonModule,
+            FormsModule], exports: [CellComponent,
+            EditCellDefault,
+            DefaultEditor,
+            CustomEditComponent,
+            DefaultEditComponent,
+            EditCellComponent,
+            CheckboxEditorComponent,
+            InputEditorComponent,
+            SelectEditorComponent,
+            TextareaEditorComponent,
+            CustomViewComponent,
+            ViewCellComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellModule, imports: [CommonModule,
+            FormsModule] }); }
 }
-CellModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CellModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CellModule, declarations: [CellComponent,
-        EditCellDefault,
-        DefaultEditor,
-        CustomEditComponent,
-        DefaultEditComponent,
-        EditCellComponent,
-        CheckboxEditorComponent,
-        InputEditorComponent,
-        SelectEditorComponent,
-        TextareaEditorComponent,
-        CustomViewComponent,
-        ViewCellComponent], imports: [CommonModule,
-        FormsModule], exports: [CellComponent,
-        EditCellDefault,
-        DefaultEditor,
-        CustomEditComponent,
-        DefaultEditComponent,
-        EditCellComponent,
-        CheckboxEditorComponent,
-        InputEditorComponent,
-        SelectEditorComponent,
-        TextareaEditorComponent,
-        CustomViewComponent,
-        ViewCellComponent] });
-CellModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CellModule, imports: [CommonModule,
-        FormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CellModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1483,10 +1493,10 @@ class FilterDefault {
             filter: this.column.getFilterFunction(),
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterDefault, selector: "ng-component", inputs: { column: "column", source: "source", inputClass: "inputClass", query: "query" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
 }
-FilterDefault.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterDefault.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FilterDefault, selector: "ng-component", inputs: { column: "column", source: "source", inputClass: "inputClass", query: "query" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterDefault, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterDefault, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -1518,10 +1528,10 @@ class DefaultFilter {
     setFilter() {
         this.filter.emit(this.query);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultFilter, selector: "ng-component", inputs: { query: "query", inputClass: "inputClass", column: "column" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
 }
-DefaultFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DefaultFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefaultFilter, selector: "ng-component", inputs: { query: "query", inputClass: "inputClass", column: "column" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultFilter, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -1560,14 +1570,14 @@ class CheckboxFilterComponent extends DefaultFilter {
         this.filterActive = false;
         this.setFilter();
     }
-}
-CheckboxFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxFilterComponent, selector: "checkbox-filter", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxFilterComponent, selector: "checkbox-filter", usesInheritance: true, ngImport: i0, template: `
     <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
     <a href="#" *ngIf="filterActive"
                 (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'checkbox-filter',
@@ -1600,17 +1610,17 @@ class InputFilterComponent extends DefaultFilter {
             this.inputControl.setValue(this.query);
         }
     }
-}
-InputFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: InputFilterComponent, selector: "input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputFilterComponent, selector: "input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <input
       [ngClass]="inputClass"
       [formControl]="inputControl"
       class="form-control"
       type="text"
       placeholder="{{ column.title }}"/>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: InputFilterComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'input-filter',
@@ -1636,9 +1646,8 @@ class SelectFilterComponent extends DefaultFilter {
                 .subscribe((value) => this.setFilter());
         }
     }
-}
-SelectFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectFilterComponent, selector: "select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectFilterComponent, selector: "select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
     <select [ngClass]="inputClass"
             class="form-control"
             #inputControl
@@ -1649,8 +1658,9 @@ SelectFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
           {{ option.title }}
         </option>
     </select>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectFilterComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'select-filter',
@@ -1673,9 +1683,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class DefaultFilterComponent extends FilterDefault {
-}
-DefaultFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DefaultFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefaultFilterComponent, selector: "default-table-filter", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultFilterComponent, selector: "default-table-filter", usesInheritance: true, ngImport: i0, template: `
     <ng-container [ngSwitch]="column.getFilterType()">
       <select-filter *ngSwitchCase="'list'"
                      [query]="query"
@@ -1696,8 +1705,9 @@ DefaultFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                     (filter)="onFilter($event)">
       </input-filter>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CheckboxFilterComponent, selector: "checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "input-filter" }, { kind: "component", type: SelectFilterComponent, selector: "select-filter" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefaultFilterComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CheckboxFilterComponent, selector: "checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "input-filter" }, { kind: "component", type: SelectFilterComponent, selector: "select-filter" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'default-table-filter',
@@ -1752,10 +1762,10 @@ class CustomFilterComponent extends FilterDefault {
             this.customComponent.destroy();
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomFilterComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomFilterComponent, selector: "custom-table-filter", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true }); }
 }
-CustomFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomFilterComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-CustomFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CustomFilterComponent, selector: "custom-table-filter", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'custom-table-filter',
@@ -1789,9 +1799,8 @@ class FilterComponent extends FilterDefault {
             });
         }
     }
-}
-FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FilterComponent, selector: "ng2-smart-table-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterComponent, selector: "ng2-smart-table-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
       <div class="ng2-smart-filter" *ngIf="column.isFilterable" [ngSwitch]="column.getFilterType()">
         <custom-table-filter *ngSwitchCase="'custom'"
                              [query]="query"
@@ -1808,8 +1817,9 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                               (filter)="onFilter($event)">
         </default-table-filter>
       </div>
-    `, isInline: true, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: DefaultFilterComponent, selector: "default-table-filter" }, { kind: "component", type: CustomFilterComponent, selector: "custom-table-filter" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterComponent, decorators: [{
+    `, isInline: true, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: DefaultFilterComponent, selector: "default-table-filter" }, { kind: "component", type: CustomFilterComponent, selector: "custom-table-filter" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table-filter', template: `
       <div class="ng2-smart-filter" *ngIf="column.isFilterable" [ngSwitch]="column.getFilterType()">
@@ -1842,29 +1852,29 @@ const FILTER_COMPONENTS = [
     SelectFilterComponent,
 ];
 class FilterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FilterModule, declarations: [FilterDefault,
+            DefaultFilter,
+            FilterComponent,
+            DefaultFilterComponent,
+            CustomFilterComponent,
+            CheckboxFilterComponent,
+            InputFilterComponent,
+            SelectFilterComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule], exports: [FilterDefault,
+            DefaultFilter,
+            FilterComponent,
+            DefaultFilterComponent,
+            CustomFilterComponent,
+            CheckboxFilterComponent,
+            InputFilterComponent,
+            SelectFilterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule] }); }
 }
-FilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, declarations: [FilterDefault,
-        DefaultFilter,
-        FilterComponent,
-        DefaultFilterComponent,
-        CustomFilterComponent,
-        CheckboxFilterComponent,
-        InputFilterComponent,
-        SelectFilterComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule], exports: [FilterDefault,
-        DefaultFilter,
-        FilterComponent,
-        DefaultFilterComponent,
-        CustomFilterComponent,
-        CheckboxFilterComponent,
-        InputFilterComponent,
-        SelectFilterComponent] });
-FilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1977,9 +1987,8 @@ class PagerComponent {
         this.source.refresh();
         this.initPages();
     }
-}
-PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: { source: "source", perPageSelect: "perPageSelect" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: { source: "source", perPageSelect: "perPageSelect" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
     <nav *ngIf="shouldShow()" class="ng2-smart-pagination-nav">
       <ul class="ng2-smart-pagination pagination">
         <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
@@ -2032,8 +2041,9 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
         <option *ngFor="let item of perPageSelect" [value]="item">{{ item }}</option>
       </select>
     </nav>
-  `, isInline: true, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerComponent, decorators: [{
+  `, isInline: true, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table-pager', template: `
     <nav *ngIf="shouldShow()" class="ng2-smart-pagination-nav">
@@ -2098,13 +2108,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class PagerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, declarations: [PagerComponent], imports: [CommonModule,
+            FormsModule], exports: [PagerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, imports: [CommonModule,
+            FormsModule] }); }
 }
-PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, declarations: [PagerComponent], imports: [CommonModule,
-        FormsModule], exports: [PagerComponent] });
-PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, imports: [CommonModule,
-        FormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2122,8 +2132,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class TbodyCreateCancelComponent {
     constructor() {
-        this.cancelButtonContent = '';
-        this.saveButtonContent = '';
+        this.cancelButtonContent = "";
+        this.saveButtonContent = "";
     }
     onSave(event) {
         event.preventDefault();
@@ -2137,26 +2147,170 @@ class TbodyCreateCancelComponent {
         this.row.isInEditing = false;
     }
     ngOnChanges() {
-        this.saveButtonContent = this.grid.getSetting('edit.saveButtonContent', 'save');
-        this.cancelButtonContent = this.grid.getSetting('edit.cancelButtonContent', 'cancel');
-    }
+        this.saveButtonContent = this.grid.getSetting("edit.saveButtonContent", "save");
+        this.cancelButtonContent = this.grid.getSetting("edit.cancelButtonContent", "cancel");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", editCancel: "editCancel" }, usesOnChanges: true, ngImport: i0, template: `
+    <ng-container *ngIf="!row.pending; else loader">
+      <a
+        href="#"
+        [id]="'row-' + row.index + '_editing-confirm-button'"
+        class="ng2-smart-action ng2-smart-action-edit-save"
+        [innerHTML]="saveButtonContent"
+        (click)="onSave($event)"
+      ></a>
+      <a
+        href="#"
+        [id]="'row-' + row.index + '_editing-cancel-button'"
+        class="ng2-smart-action ng2-smart-action-edit-cancel"
+        [innerHTML]="cancelButtonContent"
+        (click)="onCancelEdit($event)"
+      ></a>
+    </ng-container>
+    <ng-template #loader>
+      <div style="display: flex;">
+        <svg
+          (click)="$event.stopPropagation()"
+          style="height: 2rem; width: 2rem;"
+          version="1.1"
+          id="L9"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 100 100"
+          enable-background="new 0 0 0 0"
+          xml:space="preserve"
+        >
+          <path
+            fill="#e9e9e9"
+            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+          >
+            <animateTransform
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              dur="1s"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </path>
+        </svg>
+        <svg
+          (click)="$event.stopPropagation()"
+          style="height: 2rem; width: 2rem; "
+          version="1.1"
+          id="L9"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 100 100"
+          enable-background="new 0 0 0 0"
+          xml:space="preserve"
+        >
+          <path
+            fill="#e9e9e9"
+            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+          >
+            <animateTransform
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              dur="1s"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </path>
+        </svg>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-TbodyCreateCancelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TbodyCreateCancelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", editCancel: "editCancel" }, usesOnChanges: true, ngImport: i0, template: `
-    <a href="#" class="ng2-smart-action ng2-smart-action-edit-save"
-        [innerHTML]="saveButtonContent" (click)="onSave($event)"></a>
-    <a href="#" class="ng2-smart-action ng2-smart-action-edit-cancel"
-        [innerHTML]="cancelButtonContent" (click)="onCancelEdit($event)"></a>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-st-tbody-create-cancel',
+                    selector: "ng2-st-tbody-create-cancel",
                     template: `
-    <a href="#" class="ng2-smart-action ng2-smart-action-edit-save"
-        [innerHTML]="saveButtonContent" (click)="onSave($event)"></a>
-    <a href="#" class="ng2-smart-action ng2-smart-action-edit-cancel"
-        [innerHTML]="cancelButtonContent" (click)="onCancelEdit($event)"></a>
+    <ng-container *ngIf="!row.pending; else loader">
+      <a
+        href="#"
+        [id]="'row-' + row.index + '_editing-confirm-button'"
+        class="ng2-smart-action ng2-smart-action-edit-save"
+        [innerHTML]="saveButtonContent"
+        (click)="onSave($event)"
+      ></a>
+      <a
+        href="#"
+        [id]="'row-' + row.index + '_editing-cancel-button'"
+        class="ng2-smart-action ng2-smart-action-edit-cancel"
+        [innerHTML]="cancelButtonContent"
+        (click)="onCancelEdit($event)"
+      ></a>
+    </ng-container>
+    <ng-template #loader>
+      <div style="display: flex;">
+        <svg
+          (click)="$event.stopPropagation()"
+          style="height: 2rem; width: 2rem;"
+          version="1.1"
+          id="L9"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 100 100"
+          enable-background="new 0 0 0 0"
+          xml:space="preserve"
+        >
+          <path
+            fill="#e9e9e9"
+            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+          >
+            <animateTransform
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              dur="1s"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </path>
+        </svg>
+        <svg
+          (click)="$event.stopPropagation()"
+          style="height: 2rem; width: 2rem; "
+          version="1.1"
+          id="L9"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 100 100"
+          enable-background="new 0 0 0 0"
+          xml:space="preserve"
+        >
+          <path
+            fill="#e9e9e9"
+            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+          >
+            <animateTransform
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              dur="1s"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </path>
+        </svg>
+      </div>
+    </ng-template>
   `,
                 }]
         }], propDecorators: { grid: [{
@@ -2176,8 +2330,8 @@ class TbodyEditDeleteComponent {
         this.editRowSelect = new EventEmitter();
         this.isActionEdit = false;
         this.isActionDelete = false;
-        this.editRowButtonContent = '';
-        this.deleteRowButtonContent = '';
+        this.editRowButtonContent = "";
+        this.deleteRowButtonContent = "";
     }
     onEdit(event) {
         event.preventDefault();
@@ -2187,14 +2341,14 @@ class TbodyEditDeleteComponent {
             data: this.row.getData(),
             source: this.source,
         });
-        if (this.grid.getSetting('mode') !== 'external') {
+        if (this.grid.getSetting("mode") !== "external") {
             this.grid.edit(this.row);
         }
     }
     onDelete(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (this.grid.getSetting('mode') === 'external') {
+        if (this.grid.getSetting("mode") === "external") {
             this.delete.emit({
                 data: this.row.getData(),
                 source: this.source,
@@ -2205,29 +2359,180 @@ class TbodyEditDeleteComponent {
         }
     }
     ngOnChanges() {
-        this.isActionEdit = this.grid.getSetting('actions.edit');
-        this.isActionDelete = this.grid.getSetting('actions.delete');
-        this.editRowButtonContent = this.grid.getSetting('edit.editButtonContent');
-        this.deleteRowButtonContent = this.grid.getSetting('delete.deleteButtonContent');
-    }
+        this.isActionEdit = this.grid.getSetting("actions.edit");
+        this.isActionDelete = this.grid.getSetting("actions.delete");
+        this.editRowButtonContent = this.grid.getSetting("edit.editButtonContent");
+        this.deleteRowButtonContent = this.grid.getSetting("delete.deleteButtonContent");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TbodyEditDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: { grid: "grid", row: "row", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm" }, outputs: { edit: "edit", delete: "delete", editRowSelect: "editRowSelect" }, usesOnChanges: true, ngImport: i0, template: `
+    <ng-container *ngIf="!row.pending; else loader">
+      <a
+        href="#"
+        *ngIf="isActionEdit"
+        [id]="'row-' + row.index + '_action-edit-button'"
+        class="ng2-smart-action ng2-smart-action-edit-edit"
+        [innerHTML]="editRowButtonContent"
+        (click)="onEdit($event)"
+      ></a>
+      <a
+        href="#"
+        *ngIf="isActionDelete"
+        [id]="'row-' + row.index + '_action-delete-button'"
+        class="ng2-smart-action ng2-smart-action-delete-delete"
+        [innerHTML]="deleteRowButtonContent"
+        (click)="onDelete($event)"
+      ></a>
+    </ng-container>
+    <ng-template #loader>
+      <div style="display: flex;">
+        <svg
+          *ngIf="isActionEdit"
+          (click)="$event.stopPropagation()"
+          style="height: 2rem; width: 2rem;"
+          version="1.1"
+          id="L9"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 100 100"
+          enable-background="new 0 0 0 0"
+          xml:space="preserve"
+        >
+          <path
+            fill="#e9e9e9"
+            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+          >
+            <animateTransform
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              dur="1s"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </path>
+        </svg>
+        <svg
+          *ngIf="isActionDelete"
+          (click)="$event.stopPropagation()"
+          style="height: 2rem; width: 2rem;"
+          version="1.1"
+          id="L9"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 100 100"
+          enable-background="new 0 0 0 0"
+          xml:space="preserve"
+        >
+          <path
+            fill="#e9e9e9"
+            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+          >
+            <animateTransform
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              dur="1s"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </path>
+        </svg>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-TbodyEditDeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyEditDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TbodyEditDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: { grid: "grid", row: "row", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm" }, outputs: { edit: "edit", delete: "delete", editRowSelect: "editRowSelect" }, usesOnChanges: true, ngImport: i0, template: `
-    <a href="#" *ngIf="isActionEdit" class="ng2-smart-action ng2-smart-action-edit-edit"
-        [innerHTML]="editRowButtonContent" (click)="onEdit($event)"></a>
-    <a href="#" *ngIf="isActionDelete" class="ng2-smart-action ng2-smart-action-delete-delete"
-        [innerHTML]="deleteRowButtonContent" (click)="onDelete($event)"></a>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-st-tbody-edit-delete',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: "ng2-st-tbody-edit-delete",
                     template: `
-    <a href="#" *ngIf="isActionEdit" class="ng2-smart-action ng2-smart-action-edit-edit"
-        [innerHTML]="editRowButtonContent" (click)="onEdit($event)"></a>
-    <a href="#" *ngIf="isActionDelete" class="ng2-smart-action ng2-smart-action-delete-delete"
-        [innerHTML]="deleteRowButtonContent" (click)="onDelete($event)"></a>
+    <ng-container *ngIf="!row.pending; else loader">
+      <a
+        href="#"
+        *ngIf="isActionEdit"
+        [id]="'row-' + row.index + '_action-edit-button'"
+        class="ng2-smart-action ng2-smart-action-edit-edit"
+        [innerHTML]="editRowButtonContent"
+        (click)="onEdit($event)"
+      ></a>
+      <a
+        href="#"
+        *ngIf="isActionDelete"
+        [id]="'row-' + row.index + '_action-delete-button'"
+        class="ng2-smart-action ng2-smart-action-delete-delete"
+        [innerHTML]="deleteRowButtonContent"
+        (click)="onDelete($event)"
+      ></a>
+    </ng-container>
+    <ng-template #loader>
+      <div style="display: flex;">
+        <svg
+          *ngIf="isActionEdit"
+          (click)="$event.stopPropagation()"
+          style="height: 2rem; width: 2rem;"
+          version="1.1"
+          id="L9"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 100 100"
+          enable-background="new 0 0 0 0"
+          xml:space="preserve"
+        >
+          <path
+            fill="#e9e9e9"
+            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+          >
+            <animateTransform
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              dur="1s"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </path>
+        </svg>
+        <svg
+          *ngIf="isActionDelete"
+          (click)="$event.stopPropagation()"
+          style="height: 2rem; width: 2rem;"
+          version="1.1"
+          id="L9"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 100 100"
+          enable-background="new 0 0 0 0"
+          xml:space="preserve"
+        >
+          <path
+            fill="#e9e9e9"
+            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+          >
+            <animateTransform
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              dur="1s"
+              from="0 50 50"
+              to="360 50 50"
+              repeatCount="indefinite"
+            />
+          </path>
+        </svg>
+      </div>
+    </ng-template>
   `,
                 }]
         }], propDecorators: { grid: [{
@@ -2252,34 +2557,43 @@ class TbodyCustomComponent {
     constructor() {
         this.custom = new EventEmitter();
     }
-    onCustom(action, event) {
-        event.preventDefault();
-        event.stopPropagation();
+    onCustom(action) {
         this.custom.emit({
             action: action.name,
             data: this.row.getData(),
-            source: this.source
+            source: this.source,
         });
     }
+    customActions() {
+        return this.grid.getSetting("actions.custom");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
+    <a
+      *ngFor="let action of customActions()"
+      [id]="'row-' + row.index + '_action-' + action.name + '-button'"
+      href="#"
+      class="ng2-smart-action ng2-smart-action-custom-custom"
+      [innerHTML]="action.title"
+      (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"
+    ></a>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-TbodyCustomComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TbodyCustomComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
-      <a *ngFor="let action of grid.getSetting('actions.custom')" href="#"
-         class="ng2-smart-action ng2-smart-action-custom-custom" 
-         [innerHTML]="action.title"
-         (click)="onCustom(action, $event)"></a>
-        `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TbodyCustomComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TbodyCustomComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-st-tbody-custom',
+                    selector: "ng2-st-tbody-custom",
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-      <a *ngFor="let action of grid.getSetting('actions.custom')" href="#"
-         class="ng2-smart-action ng2-smart-action-custom-custom" 
-         [innerHTML]="action.title"
-         (click)="onCustom(action, $event)"></a>
-        `
+    <a
+      *ngFor="let action of customActions()"
+      [id]="'row-' + row.index + '_action-' + action.name + '-button'"
+      href="#"
+      class="ng2-smart-action ng2-smart-action-custom-custom"
+      [innerHTML]="action.title"
+      (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"
+    ></a>
+  `,
                 }]
         }], propDecorators: { grid: [{
                 type: Input
@@ -2336,12 +2650,12 @@ class Ng2SmartTableTbodyComponent {
     trackByIdOrIndex(index, item) {
         return item?.id || index;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.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: "<ng-container *ngIf=\"grid.getRows()?.length; noRows\">\n  <tr\n    *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\"\n    (click)=\"userClickedRow.emit(row)\"\n    class=\"ng2-smart-row\"\n    [className]=\"rowClassFunction(row)\"\n    [ngClass]=\"{ selected: row.isSelected }\"\n  >\n    <td\n      *ngIf=\"isMultiSelectVisible\"\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    <td\n      *ngIf=\"!row.isInEditing && showActionColumnLeft\"\n      class=\"ng2-smart-actions\"\n      (click)=\"$event.stopPropagation()\"\n    >\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\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    <td\n      *ngIf=\"row.isInEditing && showActionColumnLeft\"\n      class=\"ng2-smart-actions\"\n    >\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    <td\n      *ngFor=\"let cell of getVisibleCells(row.cells)\"\n      [ngClass]=\"cell.getColumnClass()\"\n    >\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\n    <td\n      *ngIf=\"row.isInEditing && showActionColumnRight\"\n      class=\"ng2-smart-actions\"\n    >\n      <ng2-st-tbody-create-cancel\n        [grid]=\"grid\"\n        [row]=\"row\"\n        [editConfirm]=\"editConfirm\"\n      ></ng2-st-tbody-create-cancel>\n    </td>\n\n    <td\n      *ngIf=\"!row.isInEditing && showActionColumnRight\"\n      class=\"ng2-smart-actions\"\n    >\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\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  </tr>\n</ng-container>\n\n<ng-template #noRows>\n  <tr>\n    <td [attr.colspan]=\"tableColumnsCount\">\n      {{ noDataMessage }}\n    </td>\n  </tr>\n</ng-template>\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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
 }
-Ng2SmartTableTbodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Ng2SmartTableTbodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "<tr\n  *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\"\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  <td\n    *ngIf=\"isMultiSelectVisible\"\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"multipleSelectRow.emit(row); $event.stopPropagation()\"\n  >\n    <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\" />\n  </td>\n  <td\n    *ngIf=\"!row.isInEditing && showActionColumnLeft\"\n    class=\"ng2-smart-actions\"\n    (click)=\"$event.stopPropagation()\"\n  >\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\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  <td *ngIf=\"row.isInEditing && showActionColumnLeft\" 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  <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\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\n  <td\n    *ngIf=\"row.isInEditing && showActionColumnRight\"\n    class=\"ng2-smart-actions\"\n  >\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n\n  <td\n    *ngIf=\"!row.isInEditing && showActionColumnRight\"\n    class=\"ng2-smart-actions\"\n  >\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\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</tr>\n\n<tr *ngIf=\"grid.getRows().length == 0\">\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n", styles: [":host .ng2-smart-row.selected{background:rgba(0,0,0,.05)}: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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "15.2.9", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng2-st-tbody]', template: "<tr\n  *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\"\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  <td\n    *ngIf=\"isMultiSelectVisible\"\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"multipleSelectRow.emit(row); $event.stopPropagation()\"\n  >\n    <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\" />\n  </td>\n  <td\n    *ngIf=\"!row.isInEditing && showActionColumnLeft\"\n    class=\"ng2-smart-actions\"\n    (click)=\"$event.stopPropagation()\"\n  >\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\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  <td *ngIf=\"row.isInEditing && showActionColumnLeft\" 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  <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\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\n  <td\n    *ngIf=\"row.isInEditing && showActionColumnRight\"\n    class=\"ng2-smart-actions\"\n  >\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n\n  <td\n    *ngIf=\"!row.isInEditing && showActionColumnRight\"\n    class=\"ng2-smart-actions\"\n  >\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\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</tr>\n\n<tr *ngIf=\"grid.getRows().length == 0\">\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n", styles: [":host .ng2-smart-row.selected{background:rgba(0,0,0,.05)}: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: "<ng-container *ngIf=\"grid.getRows()?.length; noRows\">\n  <tr\n    *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\"\n    (click)=\"userClickedRow.emit(row)\"\n    class=\"ng2-smart-row\"\n    [className]=\"rowClassFunction(row)\"\n    [ngClass]=\"{ selected: row.isSelected }\"\n  >\n    <td\n      *ngIf=\"isMultiSelectVisible\"\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    <td\n      *ngIf=\"!row.isInEditing && showActionColumnLeft\"\n      class=\"ng2-smart-actions\"\n      (click)=\"$event.stopPropagation()\"\n    >\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\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    <td\n      *ngIf=\"row.isInEditing && showActionColumnLeft\"\n      class=\"ng2-smart-actions\"\n    >\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    <td\n      *ngFor=\"let cell of getVisibleCells(row.cells)\"\n      [ngClass]=\"cell.getColumnClass()\"\n    >\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\n    <td\n      *ngIf=\"row.isInEditing && showActionColumnRight\"\n      class=\"ng2-smart-actions\"\n    >\n      <ng2-st-tbody-create-cancel\n        [grid]=\"grid\"\n        [row]=\"row\"\n        [editConfirm]=\"editConfirm\"\n      ></ng2-st-tbody-create-cancel>\n    </td>\n\n    <td\n      *ngIf=\"!row.isInEditing && showActionColumnRight\"\n      class=\"ng2-smart-actions\"\n    >\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\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  </tr>\n</ng-container>\n\n<ng-template #noRows>\n  <tr>\n    <td [attr.colspan]=\"tableColumnsCount\">\n      {{ noDataMessage }}\n    </td>\n  </tr>\n</ng-template>\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: [{
@@ -2383,21 +2697,21 @@ const TBODY_COMPONENTS = [
     Ng2SmartTableTbodyComponent
 ];
 class TBodyModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TBodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TBodyModule, declarations: [TbodyCreateCancelComponent,
+            TbodyEditDeleteComponent,
+            TbodyCustomComponent,
+            Ng2SmartTableTbodyComponent], imports: [CommonModule,
+            FormsModule,
+            CellModule], exports: [TbodyCreateCancelComponent,
+            TbodyEditDeleteComponent,
+            TbodyCustomComponent,
+            Ng2SmartTableTbodyComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TBodyModule, imports: [CommonModule,
+            FormsModule,
+            CellModule] }); }
 }
-TBodyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TBodyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, declarations: [TbodyCreateCancelComponent,
-        TbodyEditDeleteComponent,
-        TbodyCustomComponent,
-        Ng2SmartTableTbodyComponent], imports: [CommonModule,
-        FormsModule,
-        CellModule], exports: [TbodyCreateCancelComponent,
-        TbodyEditDeleteComponent,
-        TbodyCustomComponent,
-        Ng2SmartTableTbodyComponent] });
-TBodyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, imports: [CommonModule,
-        FormsModule,
-        CellModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TBodyModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2440,13 +2754,13 @@ class AddButtonComponent {
             this.grid.createFormShown = true;
         }
     }
-}
-AddButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AddButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AddButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
     <a *ngIf="isActionAdd" href="#" class="ng2-smart-action ng2-smart-action-add-add"
         [innerHTML]="addNewButtonContent" (click)="onAdd($event)"></a>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AddButtonComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-add-button]',
@@ -2481,9 +2795,8 @@ class TheadFitlersRowComponent {
     getVisibleColumns(columns) {
         return (columns || []).filter((column) => !column.hide);
     }
-}
-TheadFitlersRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFitlersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheadFitlersRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheadFitlersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: `
     <th *ngIf="isMultiSelectVisible"></th>
     <th ng2-st-add-button *ngIf="showActionColumnLeft"
                           [grid]="grid"
@@ -2501,8 +2814,9 @@ TheadFitlersRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
                           [source]="source"
                           (create)="create.emit($event)">
     </th>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "15.2.9", ngImport: i0, type: TheadFitlersRowComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "16.2.12", ngImport: i0, type: TheadFitlersRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-thead-filters-row]',
@@ -2546,17 +2860,17 @@ class ActionsComponent {
         this.createButtonContent = this.grid.getSetting('add.createButtonContent');
         this.cancelButtonContent = this.grid.getSetting('add.cancelButtonContent');
     }
-}
-ActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ActionsComponent, selector: "ng2-st-actions", inputs: { grid: "grid" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionsComponent, selector: "ng2-st-actions", inputs: { grid: "grid" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
     <a href="#" class="ng2-smart-action ng2-smart-action-add-create"
         [innerHTML]="createButtonContent"
         (click)="$event.preventDefault();create.emit($event)"></a>
     <a href="#" class="ng2-smart-action ng2-smart-action-add-cancel"
         [innerHTML]="cancelButtonContent"
         (click)="$event.preventDefault();grid.createFormShown = false;"></a>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsComponent, decorators: [{
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-st-actions',
@@ -2596,9 +2910,8 @@ class TheadFormRowComponent {
     getVisibleCells(cells) {
         return (cells || []).filter((cell) => !cell.getColumn().hide);
     }
-}
-TheadFormRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheadFormRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: { grid: "grid", row: "row", createConfirm: "createConfirm" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheadFormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: { grid: "grid", row: "row", createConfirm: "createConfirm" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
       <td *ngIf="grid.isMultiSelectVisible"></td>
       <td  *ngIf="showActionColumnLeft"  class="ng2-smart-actions">
         <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
@@ -2616,8 +2929,9 @@ TheadFormRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
       <td  *ngIf="showActionColumnRight"  class="ng2-smart-actions">
         <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
       </td>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadFormRowComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheadFormRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-thead-form-row]',
@@ -2662,12 +2976,12 @@ class ActionsTitleComponent {
     ngOnChanges() {
         this.actionsColumnTitle = this.grid.getSetting('actions.columnTitle');
     }
-}
-ActionsTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsTitleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ActionsTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: { grid: "grid" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionsTitleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: { grid: "grid" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsTitleComponent, decorators: [{
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionsTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-actions-title]',
@@ -2680,12 +2994,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class CheckboxSelectAllComponent {
-}
-CheckboxSelectAllComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxSelectAllComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: "grid", source: "source" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: "grid", source: "source" }, ngImport: i0, template: `
     <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected">
-  `, isInline: true, dependencies: [{ 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
+  `, isInline: true, dependencies: [{ 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-checkbox-select-all]',
@@ -2743,9 +3057,8 @@ class TitleComponent {
         }
         return this.currentDirection;
     }
-}
-TitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TitleComponent, selector: "ng2-smart-table-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TitleComponent, selector: "ng2-smart-table-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, usesOnChanges: true, ngImport: i0, template: `
     <a href="#" *ngIf="column.isSortable"
                 (click)="_sort($event)"
                 class="ng2-smart-sort-link sort"
@@ -2753,8 +3066,9 @@ TitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
       {{ column.title }}
     </a>
     <span class="ng2-smart-sort" *ngIf="!column.isSortable">{{ column.title }}</span>
-  `, isInline: true, styles: ["a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{transform:rotate(-180deg);margin-bottom:-2px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TitleComponent, decorators: [{
+  `, isInline: true, styles: ["a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{transform:rotate(-180deg);margin-bottom:-2px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table-title', template: `
     <a href="#" *ngIf="column.isSortable"
@@ -2777,14 +3091,14 @@ class ColumnTitleComponent {
     constructor() {
         this.sort = new EventEmitter();
     }
-}
-ColumnTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, ngImport: i0, template: `
     <div class="ng2-smart-title">
       <ng2-smart-table-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-smart-table-title>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["column", "source"], outputs: ["sort"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ColumnTitleComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["column", "source"], outputs: ["sort"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-st-column-title',
@@ -2818,9 +3132,8 @@ class TheadTitlesRowComponent {
     getVisibleColumns(columns) {
         return (columns || []).filter((column) => !column.hide);
     }
-}
-TheadTitlesRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheadTitlesRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: { grid: "grid", source: "source" }, outputs: { sort: "sort", selectAllRows: "selectAllRows" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: { grid: "grid", source: "source" }, outputs: { sort: "sort", selectAllRows: "selectAllRows" }, usesOnChanges: true, ngImport: i0, template: `
     <th ng2-st-checkbox-select-all *ngIf="isMultiSelectVisible"
                                    [grid]="grid"
                                    [source]="source"
@@ -2834,8 +3147,9 @@ TheadTitlesRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
       <ng2-st-column-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-st-column-title>
     </th>
     <th ng2-st-actions-title *ngIf="showActionColumnRight" [grid]="grid"></th>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid", "source"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["column", "source"], outputs: ["sort"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid", "source"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["column", "source"], outputs: ["sort"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-thead-titles-row]',
@@ -2878,10 +3192,10 @@ class Ng2SmartTableTheadComponent {
         this.isHideHeader = this.grid.getSetting('hideHeader', false);
         this.isHideSubHeader = this.grid.getSetting('hideSubHeader', false);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: { grid: "grid", source: "source", createConfirm: "createConfirm" }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<tr ng2-st-thead-titles-row *ngIf=\"!isHideHeader\"\n                            class=\"ng2-smart-titles\"\n                            [grid]=\"grid\"\n                            [source]=\"source\"\n                            (sort)=\"sort.emit($event)\"\n                            (selectAllRows)=\"selectAllRows.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-filters-row *ngIf=\"!isHideSubHeader\"\n                              class=\"ng2-smart-filters\"\n                              [grid]=\"grid\"\n                              [source]=\"source\"\n                              (create)=\"create.emit($event)\"\n                              (filter)=\"filter.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-form-row *ngIf=\"grid.createFormShown\"\n                          [grid]=\"grid\"\n                          [createConfirm]=\"createConfirm\">\n</tr>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create", "filter"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "row", "createConfirm"], outputs: ["create"] }, { kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }] }); }
 }
-Ng2SmartTableTheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Ng2SmartTableTheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: { grid: "grid", source: "source", createConfirm: "createConfirm" }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "<tr ng2-st-thead-titles-row *ngIf=\"!isHideHeader\"\n                            class=\"ng2-smart-titles\"\n                            [grid]=\"grid\"\n                            [source]=\"source\"\n                            (sort)=\"sort.emit($event)\"\n                            (selectAllRows)=\"selectAllRows.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-filters-row *ngIf=\"!isHideSubHeader\"\n                              class=\"ng2-smart-filters\"\n                              [grid]=\"grid\"\n                              [source]=\"source\"\n                              (create)=\"create.emit($event)\"\n                              (filter)=\"filter.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-form-row *ngIf=\"grid.createFormShown\"\n                          [grid]=\"grid\"\n                          [createConfirm]=\"createConfirm\">\n</tr>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create", "filter"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "row", "createConfirm"], outputs: ["create"] }, { kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ng2-st-thead]', template: "<tr ng2-st-thead-titles-row *ngIf=\"!isHideHeader\"\n                            class=\"ng2-smart-titles\"\n                            [grid]=\"grid\"\n                            [source]=\"source\"\n                            (sort)=\"sort.emit($event)\"\n                            (selectAllRows)=\"selectAllRows.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-filters-row *ngIf=\"!isHideSubHeader\"\n                              class=\"ng2-smart-filters\"\n                              [grid]=\"grid\"\n                              [source]=\"source\"\n                              (create)=\"create.emit($event)\"\n                              (filter)=\"filter.emit($event)\">\n</tr>\n\n<tr ng2-st-thead-form-row *ngIf=\"grid.createFormShown\"\n                          [grid]=\"grid\"\n                          [createConfirm]=\"createConfirm\">\n</tr>\n" }]
         }], propDecorators: { grid: [{
@@ -2913,35 +3227,35 @@ const THEAD_COMPONENTS = [
     Ng2SmartTableTheadComponent,
 ];
 class THeadModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: THeadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: THeadModule, declarations: [ActionsComponent,
+            ActionsTitleComponent,
+            AddButtonComponent,
+            CheckboxSelectAllComponent,
+            ColumnTitleComponent,
+            TitleComponent,
+            TheadFitlersRowComponent,
+            TheadFormRowComponent,
+            TheadTitlesRowComponent,
+            Ng2SmartTableTheadComponent], imports: [CommonModule,
+            FormsModule,
+            FilterModule,
+            CellModule], exports: [ActionsComponent,
+            ActionsTitleComponent,
+            AddButtonComponent,
+            CheckboxSelectAllComponent,
+            ColumnTitleComponent,
+            TitleComponent,
+            TheadFitlersRowComponent,
+            TheadFormRowComponent,
+            TheadTitlesRowComponent,
+            Ng2SmartTableTheadComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: THeadModule, imports: [CommonModule,
+            FormsModule,
+            FilterModule,
+            CellModule] }); }
 }
-THeadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-THeadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, declarations: [ActionsComponent,
-        ActionsTitleComponent,
-        AddButtonComponent,
-        CheckboxSelectAllComponent,
-        ColumnTitleComponent,
-        TitleComponent,
-        TheadFitlersRowComponent,
-        TheadFormRowComponent,
-        TheadTitlesRowComponent,
-        Ng2SmartTableTheadComponent], imports: [CommonModule,
-        FormsModule,
-        FilterModule,
-        CellModule], exports: [ActionsComponent,
-        ActionsTitleComponent,
-        AddButtonComponent,
-        CheckboxSelectAllComponent,
-        ColumnTitleComponent,
-        TitleComponent,
-        TheadFitlersRowComponent,
-        TheadFormRowComponent,
-        TheadTitlesRowComponent,
-        Ng2SmartTableTheadComponent] });
-THeadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, imports: [CommonModule,
-        FormsModule,
-        FilterModule,
-        CellModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: THeadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3085,10 +3399,10 @@ class Ng2SmartTableComponent {
             selected: this.grid.dataSet.getSelectedRowsData(),
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Ng2SmartTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: Ng2SmartTableComponent, selector: "ng2-smart-table", inputs: { source: "source", settings: "settings" }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm", rowHover: "rowHover" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId\" [ngClass]=\"tableClass\">\n\n  <thead ng2-st-thead *ngIf=\"!isHideHeader || !isHideSubHeader\"\n                      [grid]=\"grid\"\n                      [source]=\"source\"\n                      [createConfirm]=\"createConfirm\"\n                      (create)=\"create.emit($event)\"\n                      (selectAllRows)=\"onSelectAllRows()\">\n  </thead>\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n                      [source]=\"source\"\n                      [deleteConfirm]=\"deleteConfirm\"\n                      [editConfirm]=\"editConfirm\"\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\n</table>\n\n<ng2-smart-table-pager *ngIf=\"isPagerDisplay\"\n                        [source]=\"source\"\n                        [perPageSelect]=\"perPageSelect\">\n</ng2-smart-table-pager>\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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "cancel", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "editRowSelect", "multipleSelectRow"] }, { kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }] }); }
 }
-Ng2SmartTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Ng2SmartTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Ng2SmartTableComponent, selector: "ng2-smart-table", inputs: { source: "source", settings: "settings" }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm", rowHover: "rowHover" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId\" [ngClass]=\"tableClass\">\n\n  <thead ng2-st-thead *ngIf=\"!isHideHeader || !isHideSubHeader\"\n                      [grid]=\"grid\"\n                      [source]=\"source\"\n                      [createConfirm]=\"createConfirm\"\n                      (create)=\"create.emit($event)\"\n                      (selectAllRows)=\"onSelectAllRows()\">\n  </thead>\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n                      [source]=\"source\"\n                      [deleteConfirm]=\"deleteConfirm\"\n                      [editConfirm]=\"editConfirm\"\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\n</table>\n\n<ng2-smart-table-pager *ngIf=\"isPagerDisplay\"\n                        [source]=\"source\"\n                        [perPageSelect]=\"perPageSelect\">\n</ng2-smart-table-pager>\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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "cancel", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "editRowSelect", "multipleSelectRow"] }, { kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table', template: "<table [id]=\"tableId\" [ngClass]=\"tableClass\">\n\n  <thead ng2-st-thead *ngIf=\"!isHideHeader || !isHideSubHeader\"\n                      [grid]=\"grid\"\n                      [source]=\"source\"\n                      [createConfirm]=\"createConfirm\"\n                      (create)=\"create.emit($event)\"\n                      (selectAllRows)=\"onSelectAllRows()\">\n  </thead>\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n                      [source]=\"source\"\n                      [deleteConfirm]=\"deleteConfirm\"\n                      [editConfirm]=\"editConfirm\"\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\n</table>\n\n<ng2-smart-table-pager *ngIf=\"isPagerDisplay\"\n                        [source]=\"source\"\n                        [perPageSelect]=\"perPageSelect\">\n</ng2-smart-table-pager>\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"] }]
         }], propDecorators: { source: [{
@@ -3120,25 +3434,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class Ng2SmartTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Ng2SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: Ng2SmartTableModule, declarations: [Ng2SmartTableComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            CellModule,
+            FilterModule,
+            PagerModule,
+            TBodyModule,
+            THeadModule], exports: [Ng2SmartTableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Ng2SmartTableModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            CellModule,
+            FilterModule,
+            PagerModule,
+            TBodyModule,
+            THeadModule] }); }
 }
-Ng2SmartTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-Ng2SmartTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableModule, declarations: [Ng2SmartTableComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        CellModule,
-        FilterModule,
-        PagerModule,
-        TBodyModule,
-        THeadModule], exports: [Ng2SmartTableComponent] });
-Ng2SmartTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        CellModule,
-        FilterModule,
-        PagerModule,
-        TBodyModule,
-        THeadModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Ng2SmartTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [