@den4ik92/ng2-smart-table 1.0.6 → 1.0.7

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

@@ -25,25 +25,21 @@ class EditCellDefault {
         event.stopPropagation();
     }
 }
-EditCellDefault.ɵfac = function EditCellDefault_Factory(t) { return new (t || EditCellDefault)(); };
-EditCellDefault.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EditCellDefault, selectors: [["ng-component"]], inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, decls: 0, vars: 0, template: function EditCellDefault_Template(rf, ctx) { }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditCellDefault, [{
+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: [{
             type: Component,
             args: [{
                     template: ''
                 }]
-        }], null, { cell: [{
+        }], propDecorators: { cell: [{
                 type: Input
             }], inputClass: [{
                 type: Input
             }], edited: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-const _c0$c = ["dynamicTarget"];
-function CustomEditComponent_ng_template_0_Template(rf, ctx) { }
 class CustomEditComponent extends EditCellDefault {
     constructor(resolver) {
         super();
@@ -67,22 +63,11 @@ class CustomEditComponent extends EditCellDefault {
         }
     }
 }
-CustomEditComponent.ɵfac = function CustomEditComponent_Factory(t) { return new (t || CustomEditComponent)(i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
-CustomEditComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CustomEditComponent, selectors: [["table-cell-custom-editor"]], viewQuery: function CustomEditComponent_Query(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$c, 7, ViewContainerRef);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dynamicTarget = _t.first);
-        }
-    }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 2, vars: 0, consts: [["dynamicTarget", ""]], template: function CustomEditComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, CustomEditComponent_ng_template_0_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-        }
-    }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomEditComponent, [{
+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: `
+    <ng-template #dynamicTarget></ng-template>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'table-cell-custom-editor',
@@ -90,11 +75,10 @@ CustomEditComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CustomE
     <ng-template #dynamicTarget></ng-template>
   `,
                 }]
-        }], function () { return [{ type: i0.ComponentFactoryResolver }]; }, { dynamicTarget: [{
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; }, propDecorators: { dynamicTarget: [{
                 type: ViewChild,
                 args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
-            }] });
-})();
+            }] } });
 
 class DefaultEditor {
     constructor() {
@@ -103,15 +87,14 @@ class DefaultEditor {
         this.onClick = new EventEmitter();
     }
 }
-DefaultEditor.ɵfac = function DefaultEditor_Factory(t) { return new (t || DefaultEditor)(); };
-DefaultEditor.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DefaultEditor, selectors: [["ng-component"]], inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { onStopEditing: "onStopEditing", onEdited: "onEdited", onClick: "onClick" }, decls: 0, vars: 0, template: function DefaultEditor_Template(rf, ctx) { }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DefaultEditor, [{
+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: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }], null, { cell: [{
+        }], propDecorators: { cell: [{
                 type: Input
             }], inputClass: [{
                 type: Input
@@ -121,8 +104,7 @@ DefaultEditor.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DefaultEditor
                 type: Output
             }], onClick: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
 class CheckboxEditorComponent extends DefaultEditor {
     constructor() {
@@ -134,20 +116,18 @@ class CheckboxEditorComponent extends DefaultEditor {
         this.cell.newValue = event.target.checked ? trueVal : falseVal;
     }
 }
-CheckboxEditorComponent.ɵfac = function CheckboxEditorComponent_Factory(t) { return new (t || CheckboxEditorComponent)(); };
-CheckboxEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxEditorComponent, selectors: [["checkbox-editor"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 4, consts: [["type", "checkbox", 1, "form-control", 3, "ngClass", "name", "disabled", "checked", "click", "change"]], template: function CheckboxEditorComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "input", 0);
-            i0.ɵɵlistener("click", function CheckboxEditorComponent_Template_input_click_0_listener($event) { return ctx.onClick.emit($event); })("change", function CheckboxEditorComponent_Template_input_change_0_listener($event) { return ctx.onChange($event); });
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            let tmp_3_0;
-            i0.ɵɵproperty("ngClass", ctx.inputClass)("name", ctx.cell.getId())("disabled", !ctx.cell.isEditable())("checked", ctx.cell.getValue() == (((tmp_3_0 = ctx.cell.getColumn().getConfig()) == null ? null : tmp_3_0.true) || true));
-        }
-    }, dependencies: [i1.NgClass], styles: ["[_nghost-%COMP%]   input[_ngcontent-%COMP%], [_nghost-%COMP%]   textarea[_ngcontent-%COMP%]{width:100%;line-height:normal;padding:.375em .75em}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxEditorComponent, [{
+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: `
+    <input [ngClass]="inputClass"
+           type="checkbox"
+           class="form-control"
+           [name]="cell.getId()"
+           [disabled]="!cell.isEditable()"
+           [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: [{
             type: Component,
             args: [{ selector: 'checkbox-editor', template: `
     <input [ngClass]="inputClass"
@@ -159,8 +139,7 @@ CheckboxEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Che
            (click)="onClick.emit($event)"
            (change)="onChange($event)">
     `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
-        }], function () { return []; }, null);
-})();
+        }], ctorParameters: function () { return []; } });
 
 class CompleterEditorComponent extends DefaultEditor {
     constructor() {
@@ -179,10 +158,17 @@ class CompleterEditorComponent extends DefaultEditor {
         return false;
     }
 }
-CompleterEditorComponent.ɵfac = function CompleterEditorComponent_Factory(t) { return new (t || CompleterEditorComponent)(); };
-CompleterEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CompleterEditorComponent, selectors: [["completer-editor"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function CompleterEditorComponent_Template(rf, ctx) { }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompleterEditorComponent, [{
+CompleterEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CompleterEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CompleterEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CompleterEditorComponent, selector: "completer-editor", usesInheritance: true, ngImport: i0, template: `
+    <!-- <ng2-completer [(ngModel)]="completerStr"
+                   [dataService]="cell.getColumn().getConfig().completer.dataService"
+                   [minSearchLength]="cell.getColumn().getConfig().completer.minSearchLength || 0"
+                   [pause]="cell.getColumn().getConfig().completer.pause || 0"
+                   [placeholder]="cell.getColumn().getConfig().completer.placeholder || 'Start typing...'"
+                   (selected)="onEditedCompleter($event)">
+    </ng2-completer> -->
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CompleterEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'completer-editor',
@@ -196,27 +182,26 @@ CompleterEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Co
     </ng2-completer> -->
     `,
                 }]
-        }], function () { return []; }, null);
-})();
+        }], ctorParameters: function () { return []; } });
 
 class InputEditorComponent extends DefaultEditor {
     constructor() {
         super();
     }
 }
-InputEditorComponent.ɵfac = function InputEditorComponent_Factory(t) { return new (t || InputEditorComponent)(); };
-InputEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputEditorComponent, selectors: [["input-editor"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 5, consts: [[1, "form-control", 3, "ngClass", "ngModel", "name", "placeholder", "disabled", "ngModelChange", "click", "keydown.enter", "keydown.esc"]], template: function InputEditorComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "input", 0);
-            i0.ɵɵlistener("ngModelChange", function InputEditorComponent_Template_input_ngModelChange_0_listener($event) { return ctx.cell.newValue = $event; })("click", function InputEditorComponent_Template_input_click_0_listener($event) { return ctx.onClick.emit($event); })("keydown.enter", function InputEditorComponent_Template_input_keydown_enter_0_listener($event) { return ctx.onEdited.emit($event); })("keydown.esc", function InputEditorComponent_Template_input_keydown_esc_0_listener() { return ctx.onStopEditing.emit(); });
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngClass", ctx.inputClass)("ngModel", ctx.cell.newValue)("name", ctx.cell.getId())("placeholder", ctx.cell.getTitle())("disabled", !ctx.cell.isEditable());
-        }
-    }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%]   input[_ngcontent-%COMP%], [_nghost-%COMP%]   textarea[_ngcontent-%COMP%]{width:100%;line-height:normal;padding:.375em .75em}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputEditorComponent, [{
+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: `
+    <input [ngClass]="inputClass"
+           class="form-control"
+           [(ngModel)]="cell.newValue"
+           [name]="cell.getId()"
+           [placeholder]="cell.getTitle()"
+           [disabled]="!cell.isEditable()"
+           (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: [{
             type: Component,
             args: [{ selector: 'input-editor', template: `
     <input [ngClass]="inputClass"
@@ -229,45 +214,30 @@ InputEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputE
            (keydown.enter)="onEdited.emit($event)"
            (keydown.esc)="onStopEditing.emit()">
     `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
-        }], function () { return []; }, null);
-})();
+        }], ctorParameters: function () { return []; } });
 
-function SelectEditorComponent_option_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "option", 2);
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const option_r1 = ctx.$implicit;
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("value", option_r1.value)("selected", option_r1.value === ctx_r0.cell.getValue());
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1("", option_r1.title, " ");
-    }
-}
 class SelectEditorComponent extends DefaultEditor {
     constructor() {
         super();
     }
 }
-SelectEditorComponent.ɵfac = function SelectEditorComponent_Factory(t) { return new (t || SelectEditorComponent)(); };
-SelectEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectEditorComponent, selectors: [["select-editor"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 5, consts: [[1, "form-control", 3, "ngClass", "ngModel", "name", "disabled", "ngModelChange", "click", "keydown.enter", "keydown.esc"], [3, "value", "selected", 4, "ngFor", "ngForOf"], [3, "value", "selected"]], template: function SelectEditorComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "select", 0);
-            i0.ɵɵlistener("ngModelChange", function SelectEditorComponent_Template_select_ngModelChange_0_listener($event) { return ctx.cell.newValue = $event; })("click", function SelectEditorComponent_Template_select_click_0_listener($event) { return ctx.onClick.emit($event); })("keydown.enter", function SelectEditorComponent_Template_select_keydown_enter_0_listener($event) { return ctx.onEdited.emit($event); })("keydown.esc", function SelectEditorComponent_Template_select_keydown_esc_0_listener() { return ctx.onStopEditing.emit(); });
-            i0.ɵɵtemplate(1, SelectEditorComponent_option_1_Template, 2, 3, "option", 1);
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            let tmp_4_0;
-            i0.ɵɵproperty("ngClass", ctx.inputClass)("ngModel", ctx.cell.newValue)("name", ctx.cell.getId())("disabled", !ctx.cell.isEditable());
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", (tmp_4_0 = ctx.cell.getColumn().getConfig()) == null ? null : tmp_4_0.list);
-        }
-    }, dependencies: [i1.NgClass, i1.NgForOf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectEditorComponent, [{
+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: `
+    <select [ngClass]="inputClass"
+            class="form-control"
+            [(ngModel)]="cell.newValue"
+            [name]="cell.getId()"
+            [disabled]="!cell.isEditable()"
+            (click)="onClick.emit($event)"
+            (keydown.enter)="onEdited.emit($event)"
+            (keydown.esc)="onStopEditing.emit()">
+
+        <option *ngFor="let option of cell.getColumn().getConfig()?.list" [value]="option.value"
+                [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: [{
             type: Component,
             args: [{
                     selector: 'select-editor',
@@ -287,28 +257,27 @@ SelectEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Selec
     </select>
     `,
                 }]
-        }], function () { return []; }, null);
-})();
+        }], ctorParameters: function () { return []; } });
 
 class TextareaEditorComponent extends DefaultEditor {
     constructor() {
         super();
     }
 }
-TextareaEditorComponent.ɵfac = function TextareaEditorComponent_Factory(t) { return new (t || TextareaEditorComponent)(); };
-TextareaEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextareaEditorComponent, selectors: [["textarea-editor"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 5, consts: [[1, "form-control", 3, "ngClass", "ngModel", "name", "disabled", "placeholder", "ngModelChange", "click", "keydown.enter", "keydown.esc"]], template: function TextareaEditorComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "textarea", 0);
-            i0.ɵɵlistener("ngModelChange", function TextareaEditorComponent_Template_textarea_ngModelChange_0_listener($event) { return ctx.cell.newValue = $event; })("click", function TextareaEditorComponent_Template_textarea_click_0_listener($event) { return ctx.onClick.emit($event); })("keydown.enter", function TextareaEditorComponent_Template_textarea_keydown_enter_0_listener($event) { return ctx.onEdited.emit($event); })("keydown.esc", function TextareaEditorComponent_Template_textarea_keydown_esc_0_listener() { return ctx.onStopEditing.emit(); });
-            i0.ɵɵtext(1, "    ");
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngClass", ctx.inputClass)("ngModel", ctx.cell.newValue)("name", ctx.cell.getId())("disabled", !ctx.cell.isEditable())("placeholder", ctx.cell.getTitle());
-        }
-    }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%]   input[_ngcontent-%COMP%], [_nghost-%COMP%]   textarea[_ngcontent-%COMP%]{width:100%;line-height:normal;padding:.375em .75em}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextareaEditorComponent, [{
+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: `
+    <textarea [ngClass]="inputClass"
+              class="form-control"
+              [(ngModel)]="cell.newValue"
+              [name]="cell.getId()"
+              [disabled]="!cell.isEditable()"
+              [placeholder]="cell.getTitle()"
+              (click)="onClick.emit($event)"
+              (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: [{
             type: Component,
             args: [{ selector: 'textarea-editor', template: `
     <textarea [ngClass]="inputClass"
@@ -322,66 +291,8 @@ TextareaEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tex
               (keydown.esc)="onStopEditing.emit()">
     </textarea>
     `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
-        }], function () { return []; }, null);
-})();
+        }], ctorParameters: function () { return []; } });
 
-function DefaultEditComponent_select_editor_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r6 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "select-editor", 5);
-        i0.ɵɵlistener("onClick", function DefaultEditComponent_select_editor_1_Template_select_editor_onClick_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.onClick($event)); })("onEdited", function DefaultEditComponent_select_editor_1_Template_select_editor_onEdited_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.onEdited($event)); })("onStopEditing", function DefaultEditComponent_select_editor_1_Template_select_editor_onStopEditing_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onStopEditing()); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("cell", ctx_r0.cell)("inputClass", ctx_r0.inputClass);
-    }
-}
-function DefaultEditComponent_textarea_editor_2_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r10 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "textarea-editor", 5);
-        i0.ɵɵlistener("onClick", function DefaultEditComponent_textarea_editor_2_Template_textarea_editor_onClick_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.onClick($event)); })("onEdited", function DefaultEditComponent_textarea_editor_2_Template_textarea_editor_onEdited_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.onEdited($event)); })("onStopEditing", function DefaultEditComponent_textarea_editor_2_Template_textarea_editor_onStopEditing_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.onStopEditing()); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("cell", ctx_r1.cell)("inputClass", ctx_r1.inputClass);
-    }
-}
-function DefaultEditComponent_checkbox_editor_3_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r14 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "checkbox-editor", 6);
-        i0.ɵɵlistener("onClick", function DefaultEditComponent_checkbox_editor_3_Template_checkbox_editor_onClick_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.onClick($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r2 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("cell", ctx_r2.cell)("inputClass", ctx_r2.inputClass);
-    }
-}
-function DefaultEditComponent_completer_editor_4_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "completer-editor", 7);
-    }
-    if (rf & 2) {
-        const ctx_r3 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("cell", ctx_r3.cell);
-    }
-}
-function DefaultEditComponent_input_editor_5_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r16 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "input-editor", 5);
-        i0.ɵɵlistener("onClick", function DefaultEditComponent_input_editor_5_Template_input_editor_onClick_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.onClick($event)); })("onEdited", function DefaultEditComponent_input_editor_5_Template_input_editor_onEdited_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.onEdited($event)); })("onStopEditing", function DefaultEditComponent_input_editor_5_Template_input_editor_onStopEditing_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.onStopEditing()); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r4 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("cell", ctx_r4.cell)("inputClass", ctx_r4.inputClass);
-    }
-}
 class DefaultEditComponent extends EditCellDefault {
     constructor() {
         super();
@@ -390,60 +301,13 @@ class DefaultEditComponent extends EditCellDefault {
         return this.cell.getColumn().editor && this.cell.getColumn().editor.type;
     }
 }
-DefaultEditComponent.ɵfac = function DefaultEditComponent_Factory(t) { return new (t || DefaultEditComponent)(); };
-DefaultEditComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DefaultEditComponent, selectors: [["table-cell-default-editor"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 5, consts: [[3, "ngSwitch"], [3, "cell", "inputClass", "onClick", "onEdited", "onStopEditing", 4, "ngSwitchCase"], [3, "cell", "inputClass", "onClick", 4, "ngSwitchCase"], [3, "cell", 4, "ngSwitchCase"], [3, "cell", "inputClass", "onClick", "onEdited", "onStopEditing", 4, "ngSwitchDefault"], [3, "cell", "inputClass", "onClick", "onEdited", "onStopEditing"], [3, "cell", "inputClass", "onClick"], [3, "cell"]], template: function DefaultEditComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, DefaultEditComponent_select_editor_1_Template, 1, 2, "select-editor", 1);
-            i0.ɵɵtemplate(2, DefaultEditComponent_textarea_editor_2_Template, 1, 2, "textarea-editor", 1);
-            i0.ɵɵtemplate(3, DefaultEditComponent_checkbox_editor_3_Template, 1, 2, "checkbox-editor", 2);
-            i0.ɵɵtemplate(4, DefaultEditComponent_completer_editor_4_Template, 1, 1, "completer-editor", 3);
-            i0.ɵɵtemplate(5, DefaultEditComponent_input_editor_5_Template, 1, 2, "input-editor", 4);
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngSwitch", ctx.getEditorType());
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngSwitchCase", "list");
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngSwitchCase", "textarea");
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngSwitchCase", "checkbox");
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngSwitchCase", "completer");
-        }
-    }, dependencies: [i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, CheckboxEditorComponent, CompleterEditorComponent, InputEditorComponent, SelectEditorComponent, TextareaEditorComponent], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DefaultEditComponent, [{
+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    <completer-editor *ngSwitchCase=\"'completer'\"\n                      [cell]=\"cell\">\n    </completer-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: CompleterEditorComponent, selector: "completer-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: [{
             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    <completer-editor *ngSwitchCase=\"'completer'\"\n                      [cell]=\"cell\">\n    </completer-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>" }]
-        }], function () { return []; }, null);
-})();
+        }], ctorParameters: function () { return []; } });
 
-function EditCellComponent_table_cell_custom_editor_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r3 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "table-cell-custom-editor", 3);
-        i0.ɵɵlistener("edited", function EditCellComponent_table_cell_custom_editor_1_Template_table_cell_custom_editor_edited_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onEdited($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("cell", ctx_r0.cell)("inputClass", ctx_r0.inputClass);
-    }
-}
-function EditCellComponent_table_cell_default_editor_2_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r5 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "table-cell-default-editor", 3);
-        i0.ɵɵlistener("edited", function EditCellComponent_table_cell_default_editor_2_Template_table_cell_default_editor_edited_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onEdited($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("cell", ctx_r1.cell)("inputClass", ctx_r1.inputClass);
-    }
-}
 class EditCellComponent {
     constructor() {
         this.inputClass = '';
@@ -457,22 +321,22 @@ class EditCellComponent {
         return this.cell.getColumn().editor && this.cell.getColumn().editor.type;
     }
 }
-EditCellComponent.ɵfac = function EditCellComponent_Factory(t) { return new (t || EditCellComponent)(); };
-EditCellComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EditCellComponent, selectors: [["table-cell-edit-mode"]], inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, decls: 3, vars: 2, consts: [[3, "ngSwitch"], [3, "cell", "inputClass", "edited", 4, "ngSwitchCase"], [3, "cell", "inputClass", "edited", 4, "ngSwitchDefault"], [3, "cell", "inputClass", "edited"]], template: function EditCellComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, EditCellComponent_table_cell_custom_editor_1_Template, 1, 2, "table-cell-custom-editor", 1);
-            i0.ɵɵtemplate(2, EditCellComponent_table_cell_default_editor_2_Template, 1, 2, "table-cell-default-editor", 2);
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngSwitch", ctx.getEditorType());
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngSwitchCase", "custom");
-        }
-    }, dependencies: [i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, CustomEditComponent, DefaultEditComponent], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EditCellComponent, [{
+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: `
+      <div [ngSwitch]="getEditorType()">
+        <table-cell-custom-editor *ngSwitchCase="'custom'"
+                                  [cell]="cell"
+                                  [inputClass]="inputClass"
+                                  (edited)="onEdited($event)">
+        </table-cell-custom-editor>
+        <table-cell-default-editor *ngSwitchDefault
+                                  [cell]="cell"
+                                  [inputClass]="inputClass"
+                                  (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: [{
             type: Component,
             args: [{
                     selector: 'table-cell-edit-mode',
@@ -491,17 +355,14 @@ EditCellComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EditCellC
       </div>
     `,
                 }]
-        }], null, { cell: [{
+        }], propDecorators: { cell: [{
                 type: Input
             }], inputClass: [{
                 type: Input
             }], edited: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-const _c0$b = ["dynamicTarget"];
-function CustomViewComponent_ng_template_0_Template(rf, ctx) { }
 class CustomViewComponent {
     constructor(resolver) {
         this.resolver = resolver;
@@ -536,22 +397,11 @@ class CustomViewComponent {
         };
     }
 }
-CustomViewComponent.ɵfac = function CustomViewComponent_Factory(t) { return new (t || CustomViewComponent)(i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
-CustomViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CustomViewComponent, selectors: [["custom-view-component"]], viewQuery: function CustomViewComponent_Query(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$b, 7, ViewContainerRef);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dynamicTarget = _t.first);
-        }
-    }, inputs: { cell: "cell" }, decls: 2, vars: 0, consts: [["dynamicTarget", ""]], template: function CustomViewComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, CustomViewComponent_ng_template_0_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-        }
-    }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomViewComponent, [{
+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: `
+    <ng-template #dynamicTarget></ng-template>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CustomViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'custom-view-component',
@@ -559,65 +409,24 @@ CustomViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CustomV
     <ng-template #dynamicTarget></ng-template>
   `,
                 }]
-        }], function () { return [{ type: i0.ComponentFactoryResolver }]; }, { cell: [{
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; }, propDecorators: { cell: [{
                 type: Input
             }], dynamicTarget: [{
                 type: ViewChild,
                 args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
-            }] });
-})();
+            }] } });
 
-function ViewCellComponent_custom_view_component_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "custom-view-component", 4);
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("cell", ctx_r0.cell);
-    }
-}
-function ViewCellComponent_div_2_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "div", 5);
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("innerHTML", ctx_r1.cell.getValue(), i0.ɵɵsanitizeHtml);
-    }
-}
-function ViewCellComponent_div_3_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "div");
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r2 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(ctx_r2.cell.getValue());
-    }
-}
 class ViewCellComponent {
 }
-ViewCellComponent.ɵfac = function ViewCellComponent_Factory(t) { return new (t || ViewCellComponent)(); };
-ViewCellComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewCellComponent, selectors: [["table-cell-view-mode"]], inputs: { cell: "cell" }, decls: 4, vars: 3, consts: [[3, "ngSwitch"], [3, "cell", 4, "ngSwitchCase"], [3, "innerHTML", 4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "cell"], [3, "innerHTML"]], template: function ViewCellComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, ViewCellComponent_custom_view_component_1_Template, 1, 1, "custom-view-component", 1);
-            i0.ɵɵtemplate(2, ViewCellComponent_div_2_Template, 1, 1, "div", 2);
-            i0.ɵɵtemplate(3, ViewCellComponent_div_3_Template, 2, 1, "div", 3);
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngSwitch", ctx.cell.getColumn().type);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngSwitchCase", "custom");
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngSwitchCase", "html");
-        }
-    }, dependencies: [i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, CustomViewComponent], encapsulation: 2, changeDetection: 0 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(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: `
+    <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: [{
             type: Component,
             args: [{
                     selector: 'table-cell-view-mode',
@@ -630,32 +439,10 @@ ViewCellComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewCellC
     </div>
     `,
                 }]
-        }], null, { cell: [{
+        }], propDecorators: { cell: [{
                 type: Input
-            }] });
-})();
+            }] } });
 
-function CellComponent_table_cell_view_mode_0_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "table-cell-view-mode", 2);
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("cell", ctx_r0.cell);
-    }
-}
-function CellComponent_table_cell_edit_mode_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r3 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "table-cell-edit-mode", 3);
-        i0.ɵɵlistener("edited", function CellComponent_table_cell_edit_mode_1_Template_table_cell_edit_mode_edited_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onEdited($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("cell", ctx_r1.cell)("inputClass", ctx_r1.inputClass);
-    }
-}
 class CellComponent {
     constructor() {
         this.inputClass = '';
@@ -672,20 +459,15 @@ class CellComponent {
         }
     }
 }
-CellComponent.ɵfac = function CellComponent_Factory(t) { return new (t || CellComponent)(); };
-CellComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CellComponent, selectors: [["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" }, decls: 2, vars: 2, consts: [[3, "cell", 4, "ngIf"], [3, "cell", "inputClass", "edited", 4, "ngIf"], [3, "cell"], [3, "cell", "inputClass", "edited"]], template: function CellComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, CellComponent_table_cell_view_mode_0_Template, 1, 1, "table-cell-view-mode", 0);
-            i0.ɵɵtemplate(1, CellComponent_table_cell_edit_mode_1_Template, 1, 2, "table-cell-edit-mode", 1);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngIf", !ctx.isInEditing);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.isInEditing);
-        }
-    }, dependencies: [i1.NgIf, EditCellComponent, ViewCellComponent], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CellComponent, [{
+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: `
+    <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: [{
             type: Component,
             args: [{
                     selector: 'ng2-smart-table-cell',
@@ -697,7 +479,7 @@ CellComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CellComponent
     </table-cell-edit-mode>
   `,
                 }]
-        }], null, { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], row: [{
                 type: Input
@@ -717,8 +499,7 @@ CellComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CellComponent
                 type: Input
             }], edited: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
 const CELL_COMPONENTS = [
     CellComponent,
@@ -737,12 +518,36 @@ const CELL_COMPONENTS = [
 ];
 class CellModule {
 }
-CellModule.ɵfac = function CellModule_Factory(t) { return new (t || CellModule)(); };
-CellModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CellModule });
-CellModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+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,
+        CompleterEditorComponent,
+        InputEditorComponent,
+        SelectEditorComponent,
+        TextareaEditorComponent,
+        CustomViewComponent,
+        ViewCellComponent], imports: [CommonModule,
+        FormsModule], exports: [CellComponent,
+        EditCellDefault,
+        DefaultEditor,
+        CustomEditComponent,
+        DefaultEditComponent,
+        EditCellComponent,
+        CheckboxEditorComponent,
+        CompleterEditorComponent,
+        InputEditorComponent,
+        SelectEditorComponent,
+        TextareaEditorComponent,
+        CustomViewComponent,
+        ViewCellComponent] });
+CellModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CellModule, imports: [CommonModule,
         FormsModule] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CellModule, [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CellModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -756,36 +561,7 @@ CellModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
                         ...CELL_COMPONENTS,
                     ],
                 }]
-        }], null, null);
-})();
-(function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CellModule, { declarations: [CellComponent,
-            EditCellDefault,
-            DefaultEditor,
-            CustomEditComponent,
-            DefaultEditComponent,
-            EditCellComponent,
-            CheckboxEditorComponent,
-            CompleterEditorComponent,
-            InputEditorComponent,
-            SelectEditorComponent,
-            TextareaEditorComponent,
-            CustomViewComponent,
-            ViewCellComponent], imports: [CommonModule,
-            FormsModule], exports: [CellComponent,
-            EditCellDefault,
-            DefaultEditor,
-            CustomEditComponent,
-            DefaultEditComponent,
-            EditCellComponent,
-            CheckboxEditorComponent,
-            CompleterEditorComponent,
-            InputEditorComponent,
-            SelectEditorComponent,
-            TextareaEditorComponent,
-            CustomViewComponent,
-            ViewCellComponent] });
-})();
+        }] });
 
 class FilterDefault {
     constructor() {
@@ -801,15 +577,14 @@ class FilterDefault {
         });
     }
 }
-FilterDefault.ɵfac = function FilterDefault_Factory(t) { return new (t || FilterDefault)(); };
-FilterDefault.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilterDefault, selectors: [["ng-component"]], inputs: { column: "column", source: "source", inputClass: "inputClass" }, outputs: { filter: "filter" }, decls: 0, vars: 0, template: function FilterDefault_Template(rf, ctx) { }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterDefault, [{
+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" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterDefault, decorators: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }], null, { column: [{
+        }], propDecorators: { column: [{
                 type: Input
             }], source: [{
                 type: Input
@@ -817,8 +592,7 @@ FilterDefault.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilterDefault
                 type: Input
             }], filter: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
 class DefaultFilter {
     constructor() {
@@ -834,15 +608,14 @@ class DefaultFilter {
         this.filter.emit(this.query);
     }
 }
-DefaultFilter.ɵfac = function DefaultFilter_Factory(t) { return new (t || DefaultFilter)(); };
-DefaultFilter.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DefaultFilter, selectors: [["ng-component"]], inputs: { query: "query", inputClass: "inputClass", column: "column" }, outputs: { filter: "filter" }, decls: 0, vars: 0, template: function DefaultFilter_Template(rf, ctx) { }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DefaultFilter, [{
+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: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }], null, { query: [{
+        }], propDecorators: { query: [{
                 type: Input
             }], inputClass: [{
                 type: Input
@@ -850,24 +623,8 @@ DefaultFilter.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DefaultFilter
                 type: Input
             }], filter: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-function CheckboxFilterComponent_a_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r2 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "a", 2);
-        i0.ɵɵlistener("click", function CheckboxFilterComponent_a_1_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.resetFilter($event)); });
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        let tmp_0_0;
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(((tmp_0_0 = ctx_r0.column.getFilterConfig()) == null ? null : tmp_0_0.resetText) || "reset");
-    }
-}
 class CheckboxFilterComponent extends DefaultFilter {
     constructor() {
         super();
@@ -893,20 +650,13 @@ class CheckboxFilterComponent extends DefaultFilter {
         this.setFilter();
     }
 }
-CheckboxFilterComponent.ɵfac = function CheckboxFilterComponent_Factory(t) { return new (t || CheckboxFilterComponent)(); };
-CheckboxFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxFilterComponent, selectors: [["checkbox-filter"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 3, consts: [["type", "checkbox", 1, "form-control", 3, "formControl", "ngClass"], ["href", "#", 3, "click", 4, "ngIf"], ["href", "#", 3, "click"]], template: function CheckboxFilterComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelement(0, "input", 0);
-            i0.ɵɵtemplate(1, CheckboxFilterComponent_a_1_Template, 2, 1, "a", 1);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("formControl", ctx.inputControl)("ngClass", ctx.inputClass);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.filterActive);
-        }
-    }, dependencies: [i1.NgClass, i1.NgIf, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.FormControlDirective], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxFilterComponent, [{
+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: `
+    <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: [{
             type: Component,
             args: [{
                     selector: 'checkbox-filter',
@@ -916,8 +666,7 @@ CheckboxFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Che
                 (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
   `,
                 }]
-        }], function () { return []; }, null);
-})();
+        }], ctorParameters: function () { return []; } });
 
 class CompleterFilterComponent extends DefaultFilter {
     constructor() {
@@ -948,10 +697,18 @@ class CompleterFilterComponent extends DefaultFilter {
         }
     }
 }
-CompleterFilterComponent.ɵfac = function CompleterFilterComponent_Factory(t) { return new (t || CompleterFilterComponent)(); };
-CompleterFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CompleterFilterComponent, selectors: [["completer-filter"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function CompleterFilterComponent_Template(rf, ctx) { }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompleterFilterComponent, [{
+CompleterFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CompleterFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CompleterFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CompleterFilterComponent, selector: "completer-filter", usesInheritance: true, ngImport: i0, template: `
+    <!-- <ng2-completer [(ngModel)]="query"
+                   (ngModelChange)="inputTextChanged($event)"
+                   [dataService]="column.getFilterConfig().completer.dataService"
+                   [minSearchLength]="column.getFilterConfig().completer.minSearchLength || 0"
+                   [pause]="column.getFilterConfig().completer.pause || 0"
+                   [placeholder]="column.getFilterConfig().completer.placeholder || 'Start typing...'"
+                   (selected)="completerContent.next($event)">
+    </ng2-completer> -->
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CompleterFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'completer-filter',
@@ -966,8 +723,7 @@ CompleterFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Co
     </ng2-completer> -->
   `,
                 }]
-        }], function () { return []; }, null);
-})();
+        }], ctorParameters: function () { return []; } });
 
 class InputFilterComponent extends DefaultFilter {
     constructor() {
@@ -991,18 +747,16 @@ class InputFilterComponent extends DefaultFilter {
         }
     }
 }
-InputFilterComponent.ɵfac = function InputFilterComponent_Factory(t) { return new (t || InputFilterComponent)(); };
-InputFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputFilterComponent, selectors: [["input-filter"]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 3, consts: [["type", "text", 1, "form-control", 3, "ngClass", "formControl", "placeholder"]], template: function InputFilterComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelement(0, "input", 0);
-        }
-        if (rf & 2) {
-            i0.ɵɵpropertyInterpolate("placeholder", ctx.column.title);
-            i0.ɵɵproperty("ngClass", ctx.inputClass)("formControl", ctx.inputControl);
-        }
-    }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.FormControlDirective], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputFilterComponent, [{
+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: `
+    <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: [{
             type: Component,
             args: [{
                     selector: 'input-filter',
@@ -1015,23 +769,8 @@ InputFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputF
       placeholder="{{ column.title }}"/>
   `,
                 }]
-        }], function () { return []; }, null);
-})();
+        }], ctorParameters: function () { return []; } });
 
-const _c0$a = ["inputControl"];
-function SelectFilterComponent_option_4_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "option", 4);
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const option_r2 = ctx.$implicit;
-        i0.ɵɵproperty("value", option_r2.value);
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", option_r2.title, " ");
-    }
-}
 class SelectFilterComponent extends DefaultFilter {
     constructor() {
         super();
@@ -1042,35 +781,20 @@ class SelectFilterComponent extends DefaultFilter {
             .subscribe((value) => this.setFilter());
     }
 }
-SelectFilterComponent.ɵfac = function SelectFilterComponent_Factory(t) { return new (t || SelectFilterComponent)(); };
-SelectFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectFilterComponent, selectors: [["select-filter"]], viewQuery: function SelectFilterComponent_Query(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$a, 7, NgControl);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputControl = _t.first);
-        }
-    }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 4, consts: [[1, "form-control", 3, "ngClass", "ngModel", "ngModelChange"], ["inputControl", ""], ["value", ""], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"]], template: function SelectFilterComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "select", 0, 1);
-            i0.ɵɵlistener("ngModelChange", function SelectFilterComponent_Template_select_ngModelChange_0_listener($event) { return ctx.query = $event; });
-            i0.ɵɵelementStart(2, "option", 2);
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, SelectFilterComponent_option_4_Template, 2, 2, "option", 3);
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngClass", ctx.inputClass)("ngModel", ctx.query);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.column.getFilterConfig().selectText);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx.column.getFilterConfig().list);
-        }
-    }, dependencies: [i1.NgClass, i1.NgForOf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectFilterComponent, [{
+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: `
+    <select [ngClass]="inputClass"
+            class="form-control"
+            #inputControl
+            [(ngModel)]="query">
+
+        <option value="">{{ column.getFilterConfig().selectText }}</option>
+        <option *ngFor="let option of column.getFilterConfig().list" [value]="option.value">
+          {{ 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: [{
             type: Component,
             args: [{
                     selector: 'select-filter',
@@ -1087,84 +811,43 @@ SelectFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Selec
     </select>
   `,
                 }]
-        }], function () { return []; }, { inputControl: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { inputControl: [{
                 type: ViewChild,
                 args: ['inputControl', { read: NgControl, static: true }]
-            }] });
-})();
+            }] } });
 
-function DefaultFilterComponent_select_filter_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r5 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "select-filter", 3);
-        i0.ɵɵlistener("filter", function DefaultFilterComponent_select_filter_1_Template_select_filter_filter_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onFilter($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("query", ctx_r0.query)("ngClass", ctx_r0.inputClass)("column", ctx_r0.column);
-    }
-}
-function DefaultFilterComponent_checkbox_filter_2_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r7 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "checkbox-filter", 3);
-        i0.ɵɵlistener("filter", function DefaultFilterComponent_checkbox_filter_2_Template_checkbox_filter_filter_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.onFilter($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("query", ctx_r1.query)("ngClass", ctx_r1.inputClass)("column", ctx_r1.column);
-    }
-}
-function DefaultFilterComponent_completer_filter_3_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r9 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "completer-filter", 3);
-        i0.ɵɵlistener("filter", function DefaultFilterComponent_completer_filter_3_Template_completer_filter_filter_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onFilter($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r2 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("query", ctx_r2.query)("ngClass", ctx_r2.inputClass)("column", ctx_r2.column);
-    }
-}
-function DefaultFilterComponent_input_filter_4_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r11 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "input-filter", 3);
-        i0.ɵɵlistener("filter", function DefaultFilterComponent_input_filter_4_Template_input_filter_filter_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.onFilter($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r3 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("query", ctx_r3.query)("ngClass", ctx_r3.inputClass)("column", ctx_r3.column);
-    }
-}
 class DefaultFilterComponent extends FilterDefault {
 }
-DefaultFilterComponent.ɵfac = /*@__PURE__*/ function () { let ɵDefaultFilterComponent_BaseFactory; return function DefaultFilterComponent_Factory(t) { return (ɵDefaultFilterComponent_BaseFactory || (ɵDefaultFilterComponent_BaseFactory = i0.ɵɵgetInheritedFactory(DefaultFilterComponent)))(t || DefaultFilterComponent); }; }();
-DefaultFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DefaultFilterComponent, selectors: [["default-table-filter"]], inputs: { query: "query" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 4, consts: [[3, "ngSwitch"], [3, "query", "ngClass", "column", "filter", 4, "ngSwitchCase"], [3, "query", "ngClass", "column", "filter", 4, "ngSwitchDefault"], [3, "query", "ngClass", "column", "filter"]], template: function DefaultFilterComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementContainerStart(0, 0);
-            i0.ɵɵtemplate(1, DefaultFilterComponent_select_filter_1_Template, 1, 3, "select-filter", 1);
-            i0.ɵɵtemplate(2, DefaultFilterComponent_checkbox_filter_2_Template, 1, 3, "checkbox-filter", 1);
-            i0.ɵɵtemplate(3, DefaultFilterComponent_completer_filter_3_Template, 1, 3, "completer-filter", 1);
-            i0.ɵɵtemplate(4, DefaultFilterComponent_input_filter_4_Template, 1, 3, "input-filter", 2);
-            i0.ɵɵelementContainerEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngSwitch", ctx.column.getFilterType());
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngSwitchCase", "list");
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngSwitchCase", "checkbox");
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngSwitchCase", "completer");
-        }
-    }, dependencies: [i1.NgClass, i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, CheckboxFilterComponent, CompleterFilterComponent, InputFilterComponent, SelectFilterComponent], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DefaultFilterComponent, [{
+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", inputs: { query: "query" }, usesInheritance: true, ngImport: i0, template: `
+    <ng-container [ngSwitch]="column.getFilterType()">
+      <select-filter *ngSwitchCase="'list'"
+                     [query]="query"
+                     [ngClass]="inputClass"
+                     [column]="column"
+                     (filter)="onFilter($event)">
+      </select-filter>
+      <checkbox-filter *ngSwitchCase="'checkbox'"
+                       [query]="query"
+                       [ngClass]="inputClass"
+                       [column]="column"
+                       (filter)="onFilter($event)">
+      </checkbox-filter>
+      <completer-filter *ngSwitchCase="'completer'"
+                        [query]="query"
+                        [ngClass]="inputClass"
+                        [column]="column"
+                        (filter)="onFilter($event)">
+      </completer-filter>
+      <input-filter *ngSwitchDefault
+                    [query]="query"
+                    [ngClass]="inputClass"
+                    [column]="column"
+                    (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: CompleterFilterComponent, selector: "completer-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: [{
             type: Component,
             args: [{
                     selector: 'default-table-filter',
@@ -1197,13 +880,10 @@ DefaultFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Defa
     </ng-container>
   `,
                 }]
-        }], null, { query: [{
+        }], propDecorators: { query: [{
                 type: Input
-            }] });
-})();
+            }] } });
 
-const _c0$9 = ["dynamicTarget"];
-function CustomFilterComponent_ng_template_0_Template(rf, ctx) { }
 class CustomFilterComponent extends FilterDefault {
     constructor(resolver) {
         super();
@@ -1230,73 +910,21 @@ class CustomFilterComponent extends FilterDefault {
         }
     }
 }
-CustomFilterComponent.ɵfac = function CustomFilterComponent_Factory(t) { return new (t || CustomFilterComponent)(i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver)); };
-CustomFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CustomFilterComponent, selectors: [["custom-table-filter"]], viewQuery: function CustomFilterComponent_Query(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$9, 7, ViewContainerRef);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dynamicTarget = _t.first);
-        }
-    }, inputs: { query: "query" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 2, vars: 0, consts: [["dynamicTarget", ""]], template: function CustomFilterComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, CustomFilterComponent_ng_template_0_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-        }
-    }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomFilterComponent, [{
+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", inputs: { query: "query" }, 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: [{
             type: Component,
             args: [{
                     selector: 'custom-table-filter',
                     template: `<ng-template #dynamicTarget></ng-template>`,
                 }]
-        }], function () { return [{ type: i0.ComponentFactoryResolver }]; }, { query: [{
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; }, propDecorators: { query: [{
                 type: Input
             }], dynamicTarget: [{
                 type: ViewChild,
                 args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
-            }] });
-})();
+            }] } });
 
-function FilterComponent_div_0_custom_table_filter_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r4 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "custom-table-filter", 4);
-        i0.ɵɵlistener("filter", function FilterComponent_div_0_custom_table_filter_1_Template_custom_table_filter_filter_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onFilter($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext(2);
-        i0.ɵɵproperty("query", ctx_r1.query)("column", ctx_r1.column)("source", ctx_r1.source)("inputClass", ctx_r1.inputClass);
-    }
-}
-function FilterComponent_div_0_default_table_filter_2_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r6 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "default-table-filter", 4);
-        i0.ɵɵlistener("filter", function FilterComponent_div_0_default_table_filter_2_Template_default_table_filter_filter_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r5.onFilter($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r2 = i0.ɵɵnextContext(2);
-        i0.ɵɵproperty("query", ctx_r2.query)("column", ctx_r2.column)("source", ctx_r2.source)("inputClass", ctx_r2.inputClass);
-    }
-}
-function FilterComponent_div_0_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 1);
-        i0.ɵɵtemplate(1, FilterComponent_div_0_custom_table_filter_1_Template, 1, 4, "custom-table-filter", 2);
-        i0.ɵɵtemplate(2, FilterComponent_div_0_default_table_filter_2_Template, 1, 4, "default-table-filter", 3);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("ngSwitch", ctx_r0.column.getFilterType());
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngSwitchCase", "custom");
-    }
-}
 class FilterComponent extends FilterDefault {
     constructor() {
         super(...arguments);
@@ -1325,17 +953,26 @@ class FilterComponent extends FilterDefault {
         }
     }
 }
-FilterComponent.ɵfac = /*@__PURE__*/ function () { let ɵFilterComponent_BaseFactory; return function FilterComponent_Factory(t) { return (ɵFilterComponent_BaseFactory || (ɵFilterComponent_BaseFactory = i0.ɵɵgetInheritedFactory(FilterComponent)))(t || FilterComponent); }; }();
-FilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilterComponent, selectors: [["ng2-smart-table-filter"]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["class", "ng2-smart-filter", 3, "ngSwitch", 4, "ngIf"], [1, "ng2-smart-filter", 3, "ngSwitch"], [3, "query", "column", "source", "inputClass", "filter", 4, "ngSwitchCase"], [3, "query", "column", "source", "inputClass", "filter", 4, "ngSwitchDefault"], [3, "query", "column", "source", "inputClass", "filter"]], template: function FilterComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, FilterComponent_div_0_Template, 3, 2, "div", 0);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.column.isFilterable);
-        }
-    }, dependencies: [i1.NgIf, i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, DefaultFilterComponent, CustomFilterComponent], styles: ["[_nghost-%COMP%]   .ng2-smart-filter[_ngcontent-%COMP%]     input, [_nghost-%COMP%]   .ng2-smart-filter[_ngcontent-%COMP%]     select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}[_nghost-%COMP%]   .ng2-smart-filter[_ngcontent-%COMP%]     input[type=search]{box-sizing:inherit}[_nghost-%COMP%]   .ng2-smart-filter[_ngcontent-%COMP%]     .completer-dropdown-holder{font-weight:400}[_nghost-%COMP%]   .ng2-smart-filter[_ngcontent-%COMP%]     a{font-weight:400}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterComponent, [{
+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: `
+      <div class="ng2-smart-filter" *ngIf="column.isFilterable" [ngSwitch]="column.getFilterType()">
+        <custom-table-filter *ngSwitchCase="'custom'"
+                             [query]="query"
+                             [column]="column"
+                             [source]="source"
+                             [inputClass]="inputClass"
+                             (filter)="onFilter($event)">
+        </custom-table-filter>
+        <default-table-filter *ngSwitchDefault
+                              [query]="query"
+                              [column]="column"
+                              [source]="source"
+                              [inputClass]="inputClass"
+                              (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", inputs: ["query"] }, { kind: "component", type: CustomFilterComponent, selector: "custom-table-filter", inputs: ["query"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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()">
@@ -1355,8 +992,7 @@ FilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilterCompo
         </default-table-filter>
       </div>
     `, 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"] }]
-        }], null, null);
-})();
+        }] });
 
 const FILTER_COMPONENTS = [
     FilterDefault,
@@ -1371,13 +1007,30 @@ const FILTER_COMPONENTS = [
 ];
 class FilterModule {
 }
-FilterModule.ɵfac = function FilterModule_Factory(t) { return new (t || FilterModule)(); };
-FilterModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: FilterModule });
-FilterModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+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,
+        CompleterFilterComponent,
+        InputFilterComponent,
+        SelectFilterComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule], exports: [FilterDefault,
+        DefaultFilter,
+        FilterComponent,
+        DefaultFilterComponent,
+        CustomFilterComponent,
+        CheckboxFilterComponent,
+        CompleterFilterComponent,
+        InputFilterComponent,
+        SelectFilterComponent] });
+FilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterModule, [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1392,160 +1045,8 @@ FilterModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModul
                         ...FILTER_COMPONENTS,
                     ],
                 }]
-        }], null, null);
-})();
-(function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(FilterModule, { declarations: [FilterDefault,
-            DefaultFilter,
-            FilterComponent,
-            DefaultFilterComponent,
-            CustomFilterComponent,
-            CheckboxFilterComponent,
-            CompleterFilterComponent,
-            InputFilterComponent,
-            SelectFilterComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule], exports: [FilterDefault,
-            DefaultFilter,
-            FilterComponent,
-            DefaultFilterComponent,
-            CustomFilterComponent,
-            CheckboxFilterComponent,
-            CompleterFilterComponent,
-            InputFilterComponent,
-            SelectFilterComponent] });
-})();
+        }] });
 
-function PagerComponent_nav_0_li_14_span_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "span", 14);
-        i0.ɵɵtext(1);
-        i0.ɵɵelementStart(2, "span", 7);
-        i0.ɵɵtext(3, "(current)");
-        i0.ɵɵelementEnd()();
-    }
-    if (rf & 2) {
-        const page_r3 = i0.ɵɵnextContext().$implicit;
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1("", page_r3, " ");
-    }
-}
-function PagerComponent_nav_0_li_14_a_2_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r9 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "a", 15);
-        i0.ɵɵlistener("click", function PagerComponent_nav_0_li_14_a_2_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r9); const page_r3 = i0.ɵɵnextContext().$implicit; const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.paginate(page_r3)); });
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const page_r3 = i0.ɵɵnextContext().$implicit;
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(page_r3);
-    }
-}
-const _c0$8 = function (a0) { return { active: a0 }; };
-function PagerComponent_nav_0_li_14_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "li", 4);
-        i0.ɵɵtemplate(1, PagerComponent_nav_0_li_14_span_1_Template, 4, 1, "span", 12);
-        i0.ɵɵtemplate(2, PagerComponent_nav_0_li_14_a_2_Template, 2, 1, "a", 13);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const page_r3 = ctx.$implicit;
-        const ctx_r2 = i0.ɵɵnextContext(2);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0$8, ctx_r2.getPage() == page_r3));
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r2.getPage() == page_r3);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r2.getPage() != page_r3);
-    }
-}
-const _c1$1 = function (a0) { return { disabled: a0 }; };
-function PagerComponent_nav_0_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r12 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "nav", 2)(1, "ul", 3)(2, "li", 4)(3, "a", 5);
-        i0.ɵɵlistener("click", function PagerComponent_nav_0_Template_a_click_3_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.getPage() == 1 ? false : ctx_r11.paginate(1)); });
-        i0.ɵɵelementStart(4, "span", 6);
-        i0.ɵɵtext(5, "\u00AB");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(6, "span", 7);
-        i0.ɵɵtext(7, "First");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(8, "li", 4)(9, "a", 8);
-        i0.ɵɵlistener("click", function PagerComponent_nav_0_Template_a_click_9_listener() { i0.ɵɵrestoreView(_r12); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.getPage() == 1 ? false : ctx_r13.prev()); });
-        i0.ɵɵelementStart(10, "span", 6);
-        i0.ɵɵtext(11, "<");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(12, "span", 7);
-        i0.ɵɵtext(13, "Prev");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵtemplate(14, PagerComponent_nav_0_li_14_Template, 3, 5, "li", 9);
-        i0.ɵɵelementStart(15, "li", 4)(16, "a", 10);
-        i0.ɵɵlistener("click", function PagerComponent_nav_0_Template_a_click_16_listener() { i0.ɵɵrestoreView(_r12); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.getPage() == ctx_r14.getLast() ? false : ctx_r14.next()); });
-        i0.ɵɵelementStart(17, "span", 6);
-        i0.ɵɵtext(18, ">");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(19, "span", 7);
-        i0.ɵɵtext(20, "Next");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(21, "li", 4)(22, "a", 11);
-        i0.ɵɵlistener("click", function PagerComponent_nav_0_Template_a_click_22_listener() { i0.ɵɵrestoreView(_r12); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.getPage() == ctx_r15.getLast() ? false : ctx_r15.paginate(ctx_r15.getLast())); });
-        i0.ɵɵelementStart(23, "span", 6);
-        i0.ɵɵtext(24, "\u00BB");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(25, "span", 7);
-        i0.ɵɵtext(26, "Last");
-        i0.ɵɵelementEnd()()()()();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c1$1, ctx_r0.getPage() == 1));
-        i0.ɵɵadvance(6);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1$1, ctx_r0.getPage() == 1));
-        i0.ɵɵadvance(6);
-        i0.ɵɵproperty("ngForOf", ctx_r0.getPages());
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$1, ctx_r0.getPage() == ctx_r0.getLast()));
-        i0.ɵɵadvance(6);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c1$1, ctx_r0.getPage() == ctx_r0.getLast()));
-    }
-}
-function PagerComponent_nav_1_option_4_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "option", 20);
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const item_r17 = ctx.$implicit;
-        i0.ɵɵproperty("value", item_r17);
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(item_r17);
-    }
-}
-function PagerComponent_nav_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r19 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "nav", 16)(1, "label", 17);
-        i0.ɵɵtext(2, " Per Page: ");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "select", 18);
-        i0.ɵɵlistener("change", function PagerComponent_nav_1_Template_select_change_3_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.onChangePerPage($event)); })("ngModelChange", function PagerComponent_nav_1_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.currentPerPage = $event); });
-        i0.ɵɵtemplate(4, PagerComponent_nav_1_option_4_Template, 2, 2, "option", 19);
-        i0.ɵɵelementEnd()();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("ngModel", ctx_r1.currentPerPage);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx_r1.perPageSelect);
-    }
-}
 class PagerComponent {
     constructor() {
         this.perPageSelect = [];
@@ -1640,20 +1141,62 @@ class PagerComponent {
         }
     }
 }
-PagerComponent.ɵfac = function PagerComponent_Factory(t) { return new (t || PagerComponent)(); };
-PagerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PagerComponent, selectors: [["ng2-smart-table-pager"]], inputs: { source: "source", perPageSelect: "perPageSelect" }, outputs: { changePage: "changePage" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["class", "ng2-smart-pagination-nav", 4, "ngIf"], ["class", "ng2-smart-pagination-per-page", 4, "ngIf"], [1, "ng2-smart-pagination-nav"], [1, "ng2-smart-pagination", "pagination"], [1, "ng2-smart-page-item", "page-item", 3, "ngClass"], ["href", "#", "aria-label", "First", 1, "ng2-smart-page-link", "page-link", 3, "click"], ["aria-hidden", "true"], [1, "sr-only"], ["href", "#", "aria-label", "Prev", 1, "ng2-smart-page-link", "page-link", "page-link-prev", 3, "click"], ["class", "ng2-smart-page-item page-item", 3, "ngClass", 4, "ngFor", "ngForOf"], ["href", "#", "aria-label", "Next", 1, "ng2-smart-page-link", "page-link", "page-link-next", 3, "click"], ["href", "#", "aria-label", "Last", 1, "ng2-smart-page-link", "page-link", 3, "click"], ["class", "ng2-smart-page-link page-link", 4, "ngIf"], ["class", "ng2-smart-page-link page-link", "href", "#", 3, "click", 4, "ngIf"], [1, "ng2-smart-page-link", "page-link"], ["href", "#", 1, "ng2-smart-page-link", "page-link", 3, "click"], [1, "ng2-smart-pagination-per-page"], ["for", "per-page"], ["id", "per-page", 3, "ngModel", "change", "ngModelChange"], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"]], template: function PagerComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, PagerComponent_nav_0_Template, 27, 13, "nav", 0);
-            i0.ɵɵtemplate(1, PagerComponent_nav_1_Template, 5, 2, "nav", 1);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.shouldShow());
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.perPageSelect && ctx.perPageSelect.length > 0);
-        }
-    }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel], styles: [".ng2-smart-pagination[_ngcontent-%COMP%]{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination[_ngcontent-%COMP%]   .sr-only[_ngcontent-%COMP%]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination[_ngcontent-%COMP%]   .ng2-smart-page-item[_ngcontent-%COMP%]{display:inline}.ng2-smart-pagination[_ngcontent-%COMP%]   .page-link-next[_ngcontent-%COMP%], .ng2-smart-pagination[_ngcontent-%COMP%]   .page-link-prev[_ngcontent-%COMP%]{font-size:10px}[_nghost-%COMP%]{display:flex;justify-content:space-between}[_nghost-%COMP%]   select[_ngcontent-%COMP%]{margin:1rem 0 1rem 1rem}[_nghost-%COMP%]   label[_ngcontent-%COMP%]{margin:1rem 0 1rem 1rem;line-height:2.5rem}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PagerComponent, [{
+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: `
+    <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}">
+          <a class="ng2-smart-page-link page-link" href="#"
+          (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
+            <span aria-hidden="true">&laquo;</span>
+            <span class="sr-only">First</span>
+          </a>
+        </li>
+        <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
+          <a class="ng2-smart-page-link page-link page-link-prev" href="#"
+             (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
+            <span aria-hidden="true">&lt;</span>
+            <span class="sr-only">Prev</span>
+          </a>
+        </li>
+        <li class="ng2-smart-page-item page-item"
+        [ngClass]="{active: getPage() == page}" *ngFor="let page of getPages()">
+          <span class="ng2-smart-page-link page-link"
+          *ngIf="getPage() == page">{{ page }} <span class="sr-only">(current)</span></span>
+          <a class="ng2-smart-page-link page-link" href="#"
+          (click)="paginate(page)" *ngIf="getPage() != page">{{ page }}</a>
+        </li>
+
+        <li class="ng2-smart-page-item page-item"
+            [ngClass]="{disabled: getPage() == getLast()}">
+          <a class="ng2-smart-page-link page-link page-link-next" href="#"
+             (click)="getPage() == getLast() ? false : next()" aria-label="Next">
+            <span aria-hidden="true">&gt;</span>
+            <span class="sr-only">Next</span>
+          </a>
+        </li>
+        
+        <li class="ng2-smart-page-item page-item"
+        [ngClass]="{disabled: getPage() == getLast()}">
+          <a class="ng2-smart-page-link page-link" href="#"
+          (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
+            <span aria-hidden="true">&raquo;</span>
+            <span class="sr-only">Last</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    
+    <nav *ngIf="perPageSelect && perPageSelect.length > 0" class="ng2-smart-pagination-per-page">
+      <label for="per-page">
+        Per Page:
+      </label>
+      <select (change)="onChangePerPage($event)" [(ngModel)]="currentPerPage" id="per-page">
+        <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: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table-pager', template: `
     <nav *ngIf="shouldShow()" class="ng2-smart-pagination-nav">
@@ -1709,23 +1252,22 @@ PagerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PagerCompone
       </select>
     </nav>
   `, 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"] }]
-        }], null, { source: [{
+        }], propDecorators: { source: [{
                 type: Input
             }], perPageSelect: [{
                 type: Input
             }], changePage: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
 class PagerModule {
 }
-PagerModule.ɵfac = function PagerModule_Factory(t) { return new (t || PagerModule)(); };
-PagerModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PagerModule });
-PagerModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+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] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PagerModule, [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PagerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1739,12 +1281,7 @@ PagerModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule
                         PagerComponent,
                     ],
                 }]
-        }], null, null);
-})();
-(function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PagerModule, { declarations: [PagerComponent], imports: [CommonModule,
-            FormsModule], exports: [PagerComponent] });
-})();
+        }] });
 
 class TbodyCreateCancelComponent {
     onSave(event) {
@@ -1763,24 +1300,14 @@ class TbodyCreateCancelComponent {
         this.cancelButtonContent = this.grid.getSetting('edit.cancelButtonContent');
     }
 }
-TbodyCreateCancelComponent.ɵfac = function TbodyCreateCancelComponent_Factory(t) { return new (t || TbodyCreateCancelComponent)(); };
-TbodyCreateCancelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TbodyCreateCancelComponent, selectors: [["ng2-st-tbody-create-cancel"]], inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", editCancel: "editCancel" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["href", "#", 1, "ng2-smart-action", "ng2-smart-action-edit-save", 3, "innerHTML", "click"], ["href", "#", 1, "ng2-smart-action", "ng2-smart-action-edit-cancel", 3, "innerHTML", "click"]], template: function TbodyCreateCancelComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "a", 0);
-            i0.ɵɵlistener("click", function TbodyCreateCancelComponent_Template_a_click_0_listener($event) { return ctx.onSave($event); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(1, "a", 1);
-            i0.ɵɵlistener("click", function TbodyCreateCancelComponent_Template_a_click_1_listener($event) { return ctx.onCancelEdit($event); });
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("innerHTML", ctx.saveButtonContent, i0.ɵɵsanitizeHtml);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("innerHTML", ctx.cancelButtonContent, i0.ɵɵsanitizeHtml);
-        }
-    }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TbodyCreateCancelComponent, [{
+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: [{
             type: Component,
             args: [{
                     selector: 'ng2-st-tbody-create-cancel',
@@ -1791,7 +1318,7 @@ TbodyCreateCancelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         [innerHTML]="cancelButtonContent" (click)="onCancelEdit($event)"></a>
   `,
                 }]
-        }], null, { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], row: [{
                 type: Input
@@ -1799,33 +1326,8 @@ TbodyCreateCancelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
                 type: Input
             }], editCancel: [{
                 type: Input
-            }] });
-})();
+            }] } });
 
-function TbodyEditDeleteComponent_a_0_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r3 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "a", 2);
-        i0.ɵɵlistener("click", function TbodyEditDeleteComponent_a_0_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onEdit($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("innerHTML", ctx_r0.editRowButtonContent, i0.ɵɵsanitizeHtml);
-    }
-}
-function TbodyEditDeleteComponent_a_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r5 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "a", 3);
-        i0.ɵɵlistener("click", function TbodyEditDeleteComponent_a_1_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onDelete($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("innerHTML", ctx_r1.deleteRowButtonContent, i0.ɵɵsanitizeHtml);
-    }
-}
 class TbodyEditDeleteComponent {
     constructor() {
         this.edit = new EventEmitter();
@@ -1864,20 +1366,14 @@ class TbodyEditDeleteComponent {
         this.deleteRowButtonContent = this.grid.getSetting('delete.deleteButtonContent');
     }
 }
-TbodyEditDeleteComponent.ɵfac = function TbodyEditDeleteComponent_Factory(t) { return new (t || TbodyEditDeleteComponent)(); };
-TbodyEditDeleteComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TbodyEditDeleteComponent, selectors: [["ng2-st-tbody-edit-delete"]], inputs: { grid: "grid", row: "row", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm" }, outputs: { edit: "edit", delete: "delete", editRowSelect: "editRowSelect" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["href", "#", "class", "ng2-smart-action ng2-smart-action-edit-edit", 3, "innerHTML", "click", 4, "ngIf"], ["href", "#", "class", "ng2-smart-action ng2-smart-action-delete-delete", 3, "innerHTML", "click", 4, "ngIf"], ["href", "#", 1, "ng2-smart-action", "ng2-smart-action-edit-edit", 3, "innerHTML", "click"], ["href", "#", 1, "ng2-smart-action", "ng2-smart-action-delete-delete", 3, "innerHTML", "click"]], template: function TbodyEditDeleteComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, TbodyEditDeleteComponent_a_0_Template, 1, 1, "a", 0);
-            i0.ɵɵtemplate(1, TbodyEditDeleteComponent_a_1_Template, 1, 1, "a", 1);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.isActionEdit);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.isActionDelete);
-        }
-    }, dependencies: [i1.NgIf], encapsulation: 2, changeDetection: 0 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TbodyEditDeleteComponent, [{
+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: [{
             type: Component,
             args: [{
                     selector: 'ng2-st-tbody-edit-delete',
@@ -1889,7 +1385,7 @@ TbodyEditDeleteComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tb
         [innerHTML]="deleteRowButtonContent" (click)="onDelete($event)"></a>
   `,
                 }]
-        }], null, { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], row: [{
                 type: Input
@@ -1905,21 +1401,8 @@ TbodyEditDeleteComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tb
                 type: Output
             }], editRowSelect: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-function TbodyCustomComponent_a_0_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r3 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "a", 1);
-        i0.ɵɵlistener("click", function TbodyCustomComponent_a_0_Template_a_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r3); const action_r1 = restoredCtx.$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCustom(action_r1, $event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const action_r1 = ctx.$implicit;
-        i0.ɵɵproperty("innerHTML", action_r1.title, i0.ɵɵsanitizeHtml);
-    }
-}
 class TbodyCustomComponent {
     constructor() {
         this.custom = new EventEmitter();
@@ -1934,17 +1417,14 @@ class TbodyCustomComponent {
         });
     }
 }
-TbodyCustomComponent.ɵfac = function TbodyCustomComponent_Factory(t) { return new (t || TbodyCustomComponent)(); };
-TbodyCustomComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TbodyCustomComponent, selectors: [["ng2-st-tbody-custom"]], inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, decls: 1, vars: 1, consts: [["href", "#", "class", "ng2-smart-action ng2-smart-action-custom-custom", 3, "innerHTML", "click", 4, "ngFor", "ngForOf"], ["href", "#", 1, "ng2-smart-action", "ng2-smart-action-custom-custom", 3, "innerHTML", "click"]], template: function TbodyCustomComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, TbodyCustomComponent_a_0_Template, 1, 1, "a", 0);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngForOf", ctx.grid.getSetting("actions.custom"));
-        }
-    }, dependencies: [i1.NgForOf], encapsulation: 2, changeDetection: 0 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TbodyCustomComponent, [{
+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: [{
             type: Component,
             args: [{
                     selector: 'ng2-st-tbody-custom',
@@ -1956,7 +1436,7 @@ TbodyCustomComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TbodyC
          (click)="onCustom(action, $event)"></a>
         `
                 }]
-        }], null, { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], row: [{
                 type: Input
@@ -1964,150 +1444,8 @@ TbodyCustomComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TbodyC
                 type: Input
             }], custom: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-const _c0$7 = ["ng2-st-tbody", ""];
-function Ng2SmartTableTbodyComponent_tr_0_td_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r11 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 7);
-        i0.ɵɵlistener("click", function Ng2SmartTableTbodyComponent_tr_0_td_1_Template_td_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r9 = i0.ɵɵnextContext(); ctx_r9.multipleSelectRow.emit(row_r2); return i0.ɵɵresetView($event.stopPropagation()); });
-        i0.ɵɵelement(1, "input", 8);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const row_r2 = i0.ɵɵnextContext().$implicit;
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngModel", row_r2.isSelected);
-    }
-}
-function Ng2SmartTableTbodyComponent_tr_0_td_2_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r15 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 9);
-        i0.ɵɵlistener("click", function Ng2SmartTableTbodyComponent_tr_0_td_2_Template_td_click_0_listener($event) { return $event.stopPropagation(); });
-        i0.ɵɵelementStart(1, "ng2-st-tbody-custom", 10);
-        i0.ɵɵlistener("custom", function Ng2SmartTableTbodyComponent_tr_0_td_2_Template_ng2_st_tbody_custom_custom_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r14 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r14.custom.emit($event)); });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(2, "ng2-st-tbody-edit-delete", 11);
-        i0.ɵɵlistener("edit", function Ng2SmartTableTbodyComponent_tr_0_td_2_Template_ng2_st_tbody_edit_delete_edit_2_listener() { i0.ɵɵrestoreView(_r15); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.edit.emit(row_r2)); })("delete", function Ng2SmartTableTbodyComponent_tr_0_td_2_Template_ng2_st_tbody_edit_delete_delete_2_listener() { i0.ɵɵrestoreView(_r15); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.delete.emit(row_r2)); })("editRowSelect", function Ng2SmartTableTbodyComponent_tr_0_td_2_Template_ng2_st_tbody_edit_delete_editRowSelect_2_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r20 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r20.editRowSelect.emit($event)); });
-        i0.ɵɵelementEnd()();
-    }
-    if (rf & 2) {
-        const row_r2 = i0.ɵɵnextContext().$implicit;
-        const ctx_r4 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("grid", ctx_r4.grid)("row", row_r2)("source", ctx_r4.source);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("grid", ctx_r4.grid)("deleteConfirm", ctx_r4.deleteConfirm)("editConfirm", ctx_r4.editConfirm)("row", row_r2)("source", ctx_r4.source);
-    }
-}
-function Ng2SmartTableTbodyComponent_tr_0_td_3_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "td", 12);
-        i0.ɵɵelement(1, "ng2-st-tbody-create-cancel", 13);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const row_r2 = i0.ɵɵnextContext().$implicit;
-        const ctx_r5 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("grid", ctx_r5.grid)("row", row_r2)("editConfirm", ctx_r5.editConfirm)("editCancel", ctx_r5.editCancel);
-    }
-}
-function Ng2SmartTableTbodyComponent_tr_0_td_4_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "td");
-        i0.ɵɵelement(1, "ng2-smart-table-cell", 14);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const cell_r23 = ctx.$implicit;
-        const row_r2 = i0.ɵɵnextContext().$implicit;
-        const ctx_r6 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("cell", cell_r23)("grid", ctx_r6.grid)("row", row_r2)("isNew", false)("mode", ctx_r6.mode)("editConfirm", ctx_r6.editConfirm)("inputClass", ctx_r6.editInputClass)("isInEditing", row_r2.isInEditing);
-    }
-}
-function Ng2SmartTableTbodyComponent_tr_0_td_5_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "td", 12);
-        i0.ɵɵelement(1, "ng2-st-tbody-create-cancel", 15);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const row_r2 = i0.ɵɵnextContext().$implicit;
-        const ctx_r7 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("grid", ctx_r7.grid)("row", row_r2)("editConfirm", ctx_r7.editConfirm);
-    }
-}
-function Ng2SmartTableTbodyComponent_tr_0_td_6_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r27 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 12)(1, "ng2-st-tbody-custom", 10);
-        i0.ɵɵlistener("custom", function Ng2SmartTableTbodyComponent_tr_0_td_6_Template_ng2_st_tbody_custom_custom_1_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r26 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r26.custom.emit($event)); });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(2, "ng2-st-tbody-edit-delete", 11);
-        i0.ɵɵlistener("edit", function Ng2SmartTableTbodyComponent_tr_0_td_6_Template_ng2_st_tbody_edit_delete_edit_2_listener() { i0.ɵɵrestoreView(_r27); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r28 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r28.edit.emit(row_r2)); })("delete", function Ng2SmartTableTbodyComponent_tr_0_td_6_Template_ng2_st_tbody_edit_delete_delete_2_listener() { i0.ɵɵrestoreView(_r27); const row_r2 = i0.ɵɵnextContext().$implicit; const ctx_r30 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r30.delete.emit(row_r2)); })("editRowSelect", function Ng2SmartTableTbodyComponent_tr_0_td_6_Template_ng2_st_tbody_edit_delete_editRowSelect_2_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r32 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r32.editRowSelect.emit($event)); });
-        i0.ɵɵelementEnd()();
-    }
-    if (rf & 2) {
-        const row_r2 = i0.ɵɵnextContext().$implicit;
-        const ctx_r8 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("grid", ctx_r8.grid)("row", row_r2)("source", ctx_r8.source);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("grid", ctx_r8.grid)("deleteConfirm", ctx_r8.deleteConfirm)("editConfirm", ctx_r8.editConfirm)("row", row_r2)("source", ctx_r8.source);
-    }
-}
-const _c1 = function (a0) { return { selected: a0 }; };
-function Ng2SmartTableTbodyComponent_tr_0_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r35 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "tr", 2);
-        i0.ɵɵlistener("click", function Ng2SmartTableTbodyComponent_tr_0_Template_tr_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r35); const row_r2 = restoredCtx.$implicit; const ctx_r34 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r34.userClickedRow.emit(row_r2)); })("mouseover", function Ng2SmartTableTbodyComponent_tr_0_Template_tr_mouseover_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r35); const row_r2 = restoredCtx.$implicit; const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.rowHover.emit(row_r2)); });
-        i0.ɵɵtemplate(1, Ng2SmartTableTbodyComponent_tr_0_td_1_Template, 2, 1, "td", 3);
-        i0.ɵɵtemplate(2, Ng2SmartTableTbodyComponent_tr_0_td_2_Template, 3, 8, "td", 4);
-        i0.ɵɵtemplate(3, Ng2SmartTableTbodyComponent_tr_0_td_3_Template, 2, 4, "td", 5);
-        i0.ɵɵtemplate(4, Ng2SmartTableTbodyComponent_tr_0_td_4_Template, 2, 8, "td", 6);
-        i0.ɵɵtemplate(5, Ng2SmartTableTbodyComponent_tr_0_td_5_Template, 2, 3, "td", 5);
-        i0.ɵɵtemplate(6, Ng2SmartTableTbodyComponent_tr_0_td_6_Template, 3, 8, "td", 5);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const row_r2 = ctx.$implicit;
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("className", ctx_r0.rowClassFunction(row_r2))("ngClass", i0.ɵɵpureFunction1(8, _c1, row_r2.isSelected));
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r0.isMultiSelectVisible);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !row_r2.isInEditing && ctx_r0.showActionColumnLeft);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", row_r2.isInEditing && ctx_r0.showActionColumnLeft);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx_r0.getVisibleCells(row_r2.cells));
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", row_r2.isInEditing && ctx_r0.showActionColumnRight);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !row_r2.isInEditing && ctx_r0.showActionColumnRight);
-    }
-}
-function Ng2SmartTableTbodyComponent_tr_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "tr")(1, "td");
-        i0.ɵɵtext(2);
-        i0.ɵɵelementEnd()();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵattribute("colspan", ctx_r1.tableColumnsCount);
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", ctx_r1.noDataMessage, " ");
-    }
-}
 class Ng2SmartTableTbodyComponent {
     constructor() {
         this.save = new EventEmitter();
@@ -2121,7 +1459,6 @@ class Ng2SmartTableTbodyComponent {
         this.userClickedRow = new EventEmitter();
         this.editRowSelect = new EventEmitter();
         this.multipleSelectRow = new EventEmitter();
-        this.rowHover = new EventEmitter();
     }
     get tableColumnsCount() {
         const actionColumns = this.isActionAdd || this.isActionEdit || this.isActionDelete ? 1 : 0;
@@ -2141,24 +1478,16 @@ class Ng2SmartTableTbodyComponent {
     getVisibleCells(cells) {
         return (cells || []).filter((cell) => !cell.getColumn().hide);
     }
+    trackByIdOrIndex(index, item) {
+        return (item === null || item === void 0 ? void 0 : item.id) || index;
+    }
 }
-Ng2SmartTableTbodyComponent.ɵfac = function Ng2SmartTableTbodyComponent_Factory(t) { return new (t || Ng2SmartTableTbodyComponent)(); };
-Ng2SmartTableTbodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ng2SmartTableTbodyComponent, selectors: [["", "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", rowHover: "rowHover" }, features: [i0.ɵɵNgOnChangesFeature], attrs: _c0$7, decls: 2, vars: 2, consts: [["class", "ng2-smart-row", 3, "className", "ngClass", "click", "mouseover", 4, "ngFor", "ngForOf"], [4, "ngIf"], [1, "ng2-smart-row", 3, "className", "ngClass", "click", "mouseover"], ["class", "ng2-smart-actions ng2-smart-action-multiple-select", 3, "click", 4, "ngIf"], ["class", "ng2-smart-actions", 3, "click", 4, "ngIf"], ["class", "ng2-smart-actions", 4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "ng2-smart-actions", "ng2-smart-action-multiple-select", 3, "click"], ["type", "checkbox", 1, "form-control", 3, "ngModel"], [1, "ng2-smart-actions", 3, "click"], [3, "grid", "row", "source", "custom"], [3, "grid", "deleteConfirm", "editConfirm", "row", "source", "edit", "delete", "editRowSelect"], [1, "ng2-smart-actions"], [3, "grid", "row", "editConfirm", "editCancel"], [3, "cell", "grid", "row", "isNew", "mode", "editConfirm", "inputClass", "isInEditing"], [3, "grid", "row", "editConfirm"]], template: function Ng2SmartTableTbodyComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, Ng2SmartTableTbodyComponent_tr_0_Template, 7, 10, "tr", 0);
-            i0.ɵɵtemplate(1, Ng2SmartTableTbodyComponent_tr_1_Template, 3, 2, "tr", 1);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngForOf", ctx.grid.getRows());
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.grid.getRows().length == 0);
-        }
-    }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, CellComponent, TbodyCreateCancelComponent, TbodyEditDeleteComponent, TbodyCustomComponent], styles: ["[_nghost-%COMP%]   .ng2-smart-row.selected[_ngcontent-%COMP%]{background:rgba(0,0,0,.05)}[_nghost-%COMP%]   .ng2-smart-row[_ngcontent-%COMP%]   .ng2-smart-actions.ng2-smart-action-multiple-select[_ngcontent-%COMP%]{text-align:center}[_nghost-%COMP%]     ng2-st-tbody-edit-delete a:first-child, [_nghost-%COMP%]     ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Ng2SmartTableTbodyComponent, [{
+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 *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\" (click)=\"userClickedRow.emit(row)\" class=\"ng2-smart-row\" [className]=\"rowClassFunction(row)\" [ngClass]=\"{selected: row.isSelected}\">\n  <td *ngIf=\"isMultiSelectVisible\" class=\"ng2-smart-actions ng2-smart-action-multiple-select\" (click)=\"multipleSelectRow.emit(row); $event.stopPropagation();\">\n    <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\">\n  </td>\n  <td *ngIf=\"!row.isInEditing && showActionColumnLeft\" class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [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    </ng2-st-tbody-edit-delete>\n  </td>\n   <td *ngIf=\"row.isInEditing && showActionColumnLeft\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\" [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\n    <ng2-smart-table-cell [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    </ng2-smart-table-cell>\n  </td>\n\n  <td *ngIf=\"row.isInEditing && showActionColumnRight\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\"></ng2-st-tbody-create-cancel>\n  </td>\n\n  <td *ngIf=\"!row.isInEditing && showActionColumnRight\" class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [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    </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: [{
             type: Component,
-            args: [{ selector: '[ng2-st-tbody]', template: "<tr *ngFor=\"let row of grid.getRows()\" (click)=\"userClickedRow.emit(row)\" (mouseover)=\"rowHover.emit(row)\" class=\"ng2-smart-row\" [className]=\"rowClassFunction(row)\" [ngClass]=\"{selected: row.isSelected}\">\n  <td *ngIf=\"isMultiSelectVisible\" class=\"ng2-smart-actions ng2-smart-action-multiple-select\" (click)=\"multipleSelectRow.emit(row); $event.stopPropagation();\">\n    <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\">\n  </td>\n  <td *ngIf=\"!row.isInEditing && showActionColumnLeft\" class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [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    </ng2-st-tbody-edit-delete>\n  </td>\n   <td *ngIf=\"row.isInEditing && showActionColumnLeft\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\" [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\n    <ng2-smart-table-cell [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    </ng2-smart-table-cell>\n  </td>\n\n  <td *ngIf=\"row.isInEditing && showActionColumnRight\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\"></ng2-st-tbody-create-cancel>\n  </td>\n\n  <td *ngIf=\"!row.isInEditing && showActionColumnRight\" class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [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    </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"] }]
-        }], null, { grid: [{
+            args: [{ selector: '[ng2-st-tbody]', template: "<tr *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\" (click)=\"userClickedRow.emit(row)\" class=\"ng2-smart-row\" [className]=\"rowClassFunction(row)\" [ngClass]=\"{selected: row.isSelected}\">\n  <td *ngIf=\"isMultiSelectVisible\" class=\"ng2-smart-actions ng2-smart-action-multiple-select\" (click)=\"multipleSelectRow.emit(row); $event.stopPropagation();\">\n    <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\">\n  </td>\n  <td *ngIf=\"!row.isInEditing && showActionColumnLeft\" class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [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    </ng2-st-tbody-edit-delete>\n  </td>\n   <td *ngIf=\"row.isInEditing && showActionColumnLeft\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\" [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\n    <ng2-smart-table-cell [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    </ng2-smart-table-cell>\n  </td>\n\n  <td *ngIf=\"row.isInEditing && showActionColumnRight\"  class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel [grid]=\"grid\" [row]=\"row\" [editConfirm]=\"editConfirm\"></ng2-st-tbody-create-cancel>\n  </td>\n\n  <td *ngIf=\"!row.isInEditing && showActionColumnRight\" class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom [grid]=\"grid\" (custom)=\"custom.emit($event)\" [row]=\"row\" [source]=\"source\"></ng2-st-tbody-custom>\n\n    <ng2-st-tbody-edit-delete [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    </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"] }]
+        }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
@@ -2190,10 +1519,7 @@ Ng2SmartTableTbodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
                 type: Output
             }], multipleSelectRow: [{
                 type: Output
-            }], rowHover: [{
-                type: Output
-            }] });
-})();
+            }] } });
 
 const TBODY_COMPONENTS = [
     TbodyCreateCancelComponent,
@@ -2203,13 +1529,20 @@ const TBODY_COMPONENTS = [
 ];
 class TBodyModule {
 }
-TBodyModule.ɵfac = function TBodyModule_Factory(t) { return new (t || TBodyModule)(); };
-TBodyModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: TBodyModule });
-TBodyModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+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] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TBodyModule, [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TBodyModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2224,33 +1557,8 @@ TBodyModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule
                         ...TBODY_COMPONENTS,
                     ],
                 }]
-        }], null, null);
-})();
-(function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(TBodyModule, { declarations: [TbodyCreateCancelComponent,
-            TbodyEditDeleteComponent,
-            TbodyCustomComponent,
-            Ng2SmartTableTbodyComponent], imports: [CommonModule,
-            FormsModule,
-            CellModule], exports: [TbodyCreateCancelComponent,
-            TbodyEditDeleteComponent,
-            TbodyCustomComponent,
-            Ng2SmartTableTbodyComponent] });
-})();
+        }] });
 
-const _c0$6 = ["ng2-st-add-button", ""];
-function AddButtonComponent_a_0_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r2 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "a", 1);
-        i0.ɵɵlistener("click", function AddButtonComponent_a_0_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAdd($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("innerHTML", ctx_r0.addNewButtonContent, i0.ɵɵsanitizeHtml);
-    }
-}
 class AddButtonComponent {
     constructor(ref) {
         this.ref = ref;
@@ -2276,17 +1584,12 @@ class AddButtonComponent {
         }
     }
 }
-AddButtonComponent.ɵfac = function AddButtonComponent_Factory(t) { return new (t || AddButtonComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
-AddButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddButtonComponent, selectors: [["", "ng2-st-add-button", ""]], inputs: { grid: "grid", source: "source" }, outputs: { create: "create" }, features: [i0.ɵɵNgOnChangesFeature], attrs: _c0$6, decls: 1, vars: 1, consts: [["href", "#", "class", "ng2-smart-action ng2-smart-action-add-add", 3, "innerHTML", "click", 4, "ngIf"], ["href", "#", 1, "ng2-smart-action", "ng2-smart-action-add-add", 3, "innerHTML", "click"]], template: function AddButtonComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, AddButtonComponent_a_0_Template, 1, 1, "a", 0);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.isActionAdd);
-        }
-    }, dependencies: [i1.NgIf], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddButtonComponent, [{
+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: `
+    <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: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-add-button]',
@@ -2295,60 +1598,14 @@ AddButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddButto
         [innerHTML]="addNewButtonContent" (click)="onAdd($event)"></a>
   `,
                 }]
-        }], function () { return [{ type: i0.ElementRef }]; }, { grid: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
             }], create: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-const _c0$5 = ["ng2-st-thead-filters-row", ""];
-function TheadFitlersRowComponent_th_0_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "th");
-    }
-}
-function TheadFitlersRowComponent_th_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r5 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "th", 4);
-        i0.ɵɵlistener("create", function TheadFitlersRowComponent_th_1_Template_th_create_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.create.emit($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("grid", ctx_r1.grid);
-    }
-}
-function TheadFitlersRowComponent_th_2_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r8 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "th")(1, "ng2-smart-table-filter", 5);
-        i0.ɵɵlistener("filter", function TheadFitlersRowComponent_th_2_Template_ng2_smart_table_filter_filter_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.filter.emit($event)); });
-        i0.ɵɵelementEnd()();
-    }
-    if (rf & 2) {
-        const column_r6 = ctx.$implicit;
-        const ctx_r2 = i0.ɵɵnextContext();
-        i0.ɵɵclassMapInterpolate1("ng2-smart-th ", column_r6.id, "");
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("source", ctx_r2.source)("column", column_r6)("inputClass", ctx_r2.filterInputClass);
-    }
-}
-function TheadFitlersRowComponent_th_3_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r10 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "th", 6);
-        i0.ɵɵlistener("create", function TheadFitlersRowComponent_th_3_Template_th_create_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.create.emit($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r3 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("grid", ctx_r3.grid)("source", ctx_r3.source);
-    }
-}
 class TheadFitlersRowComponent {
     constructor() {
         this.create = new EventEmitter();
@@ -2364,26 +1621,27 @@ class TheadFitlersRowComponent {
         return (columns || []).filter((column) => !column.hide);
     }
 }
-TheadFitlersRowComponent.ɵfac = function TheadFitlersRowComponent_Factory(t) { return new (t || TheadFitlersRowComponent)(); };
-TheadFitlersRowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TheadFitlersRowComponent, selectors: [["", "ng2-st-thead-filters-row", ""]], inputs: { grid: "grid", source: "source" }, outputs: { create: "create", filter: "filter" }, features: [i0.ɵɵNgOnChangesFeature], attrs: _c0$5, decls: 4, vars: 4, consts: [[4, "ngIf"], ["ng2-st-add-button", "", 3, "grid", "create", 4, "ngIf"], [3, "class", 4, "ngFor", "ngForOf"], ["ng2-st-add-button", "", 3, "grid", "source", "create", 4, "ngIf"], ["ng2-st-add-button", "", 3, "grid", "create"], [3, "source", "column", "inputClass", "filter"], ["ng2-st-add-button", "", 3, "grid", "source", "create"]], template: function TheadFitlersRowComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, TheadFitlersRowComponent_th_0_Template, 1, 0, "th", 0);
-            i0.ɵɵtemplate(1, TheadFitlersRowComponent_th_1_Template, 1, 1, "th", 1);
-            i0.ɵɵtemplate(2, TheadFitlersRowComponent_th_2_Template, 2, 6, "th", 2);
-            i0.ɵɵtemplate(3, TheadFitlersRowComponent_th_3_Template, 1, 2, "th", 3);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.isMultiSelectVisible);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.showActionColumnLeft);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx.getVisibleColumns(ctx.grid.getColumns()));
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.showActionColumnRight);
-        }
-    }, dependencies: [i1.NgForOf, i1.NgIf, FilterComponent, AddButtonComponent], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TheadFitlersRowComponent, [{
+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: `
+    <th *ngIf="isMultiSelectVisible"></th>
+    <th ng2-st-add-button *ngIf="showActionColumnLeft"
+                          [grid]="grid"
+                          (create)="create.emit($event)">
+    </th>
+    <th *ngFor="let column of getVisibleColumns(grid.getColumns())" class="ng2-smart-th {{ column.id }}">
+      <ng2-smart-table-filter [source]="source"
+                              [column]="column"
+                              [inputClass]="filterInputClass"
+                              (filter)="filter.emit($event)">
+      </ng2-smart-table-filter>
+    </th>
+    <th ng2-st-add-button *ngIf="showActionColumnRight"
+                          [grid]="grid"
+                          [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: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-thead-filters-row]',
@@ -2407,7 +1665,7 @@ TheadFitlersRowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Th
     </th>
   `,
                 }]
-        }], null, { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
@@ -2415,8 +1673,7 @@ TheadFitlersRowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Th
                 type: Output
             }], filter: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
 class ActionsComponent {
     constructor() {
@@ -2427,24 +1684,16 @@ class ActionsComponent {
         this.cancelButtonContent = this.grid.getSetting('add.cancelButtonContent');
     }
 }
-ActionsComponent.ɵfac = function ActionsComponent_Factory(t) { return new (t || ActionsComponent)(); };
-ActionsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsComponent, selectors: [["ng2-st-actions"]], inputs: { grid: "grid" }, outputs: { create: "create" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["href", "#", 1, "ng2-smart-action", "ng2-smart-action-add-create", 3, "innerHTML", "click"], ["href", "#", 1, "ng2-smart-action", "ng2-smart-action-add-cancel", 3, "innerHTML", "click"]], template: function ActionsComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "a", 0);
-            i0.ɵɵlistener("click", function ActionsComponent_Template_a_click_0_listener($event) { $event.preventDefault(); return ctx.create.emit($event); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(1, "a", 1);
-            i0.ɵɵlistener("click", function ActionsComponent_Template_a_click_1_listener($event) { $event.preventDefault(); return ctx.grid.createFormShown = false; });
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("innerHTML", ctx.createButtonContent, i0.ɵɵsanitizeHtml);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("innerHTML", ctx.cancelButtonContent, i0.ɵɵsanitizeHtml);
-        }
-    }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsComponent, [{
+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: `
+    <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: [{
             type: Component,
             args: [{
                     selector: 'ng2-st-actions',
@@ -2457,59 +1706,12 @@ ActionsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsCom
         (click)="$event.preventDefault();grid.createFormShown = false;"></a>
   `,
                 }]
-        }], null, { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], create: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-const _c0$4 = ["ng2-st-thead-form-row", ""];
-function TheadFormRowComponent_td_0_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "td");
-    }
-}
-function TheadFormRowComponent_td_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r5 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 3)(1, "ng2-st-actions", 4);
-        i0.ɵɵlistener("create", function TheadFormRowComponent_td_1_Template_ng2_st_actions_create_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onCreate($event)); });
-        i0.ɵɵelementEnd()();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("grid", ctx_r1.grid);
-    }
-}
-function TheadFormRowComponent_td_2_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r8 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td")(1, "ng2-smart-table-cell", 5);
-        i0.ɵɵlistener("edited", function TheadFormRowComponent_td_2_Template_ng2_smart_table_cell_edited_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.onCreate($event)); });
-        i0.ɵɵelementEnd()();
-    }
-    if (rf & 2) {
-        const cell_r6 = ctx.$implicit;
-        const ctx_r2 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("cell", cell_r6)("grid", ctx_r2.grid)("isNew", true)("createConfirm", ctx_r2.createConfirm)("inputClass", ctx_r2.addInputClass)("isInEditing", ctx_r2.grid.getNewRow().isInEditing);
-    }
-}
-function TheadFormRowComponent_td_3_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r10 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 3)(1, "ng2-st-actions", 4);
-        i0.ɵɵlistener("create", function TheadFormRowComponent_td_3_Template_ng2_st_actions_create_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.onCreate($event)); });
-        i0.ɵɵelementEnd()();
-    }
-    if (rf & 2) {
-        const ctx_r3 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("grid", ctx_r3.grid);
-    }
-}
 class TheadFormRowComponent {
     constructor() {
         this.create = new EventEmitter();
@@ -2528,30 +1730,32 @@ class TheadFormRowComponent {
         return (cells || []).filter((cell) => !cell.getColumn().hide);
     }
 }
-TheadFormRowComponent.ɵfac = function TheadFormRowComponent_Factory(t) { return new (t || TheadFormRowComponent)(); };
-TheadFormRowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TheadFormRowComponent, selectors: [["", "ng2-st-thead-form-row", ""]], inputs: { grid: "grid", row: "row", createConfirm: "createConfirm" }, outputs: { create: "create" }, features: [i0.ɵɵNgOnChangesFeature], attrs: _c0$4, decls: 4, vars: 3, consts: [[4, "ngIf"], ["class", "ng2-smart-actions", 4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "ng2-smart-actions"], [3, "grid", "create"], [3, "cell", "grid", "isNew", "createConfirm", "inputClass", "isInEditing", "edited"]], template: function TheadFormRowComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, TheadFormRowComponent_td_0_Template, 1, 0, "td", 0);
-            i0.ɵɵtemplate(1, TheadFormRowComponent_td_1_Template, 2, 1, "td", 1);
-            i0.ɵɵtemplate(2, TheadFormRowComponent_td_2_Template, 2, 6, "td", 2);
-            i0.ɵɵtemplate(3, TheadFormRowComponent_td_3_Template, 2, 1, "td", 1);
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.showActionColumnLeft);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx.getVisibleCells(ctx.grid.getNewRow().getCells()));
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.showActionColumnRight);
-        }
-    }, dependencies: [i1.NgForOf, i1.NgIf, CellComponent, ActionsComponent], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TheadFormRowComponent, [{
+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: `
+      <td *ngIf="grid.isMultiSelectVisible"></td>
+      <td  *ngIf="showActionColumnLeft"  class="ng2-smart-actions">
+        <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
+      </td>
+      <td *ngFor="let cell of getVisibleCells(grid.getNewRow().getCells())">
+        <ng2-smart-table-cell [cell]="cell"
+                              [grid]="grid"
+                              [isNew]="true"
+                              [createConfirm]="createConfirm"
+                              [inputClass]="addInputClass"
+                              [isInEditing]="grid.getNewRow().isInEditing"
+                              (edited)="onCreate($event)">
+        </ng2-smart-table-cell>
+      </td>
+      <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: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-thead-form-row]',
                     template: `
-      <td *ngIf=""></td>
+      <td *ngIf="grid.isMultiSelectVisible"></td>
       <td  *ngIf="showActionColumnLeft"  class="ng2-smart-actions">
         <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
       </td>
@@ -2570,7 +1774,7 @@ TheadFormRowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Thead
       </td>
   `,
                 }]
-        }], null, { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], row: [{
                 type: Input
@@ -2578,10 +1782,8 @@ TheadFormRowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Thead
                 type: Input
             }], create: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-const _c0$3 = ["ng2-st-actions-title", ""];
 class ActionsTitleComponent {
     constructor(ref) {
         this.ref = ref;
@@ -2593,20 +1795,11 @@ class ActionsTitleComponent {
         this.actionsColumnTitle = this.grid.getSetting('actions.columnTitle');
     }
 }
-ActionsTitleComponent.ɵfac = function ActionsTitleComponent_Factory(t) { return new (t || ActionsTitleComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
-ActionsTitleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsTitleComponent, selectors: [["", "ng2-st-actions-title", ""]], inputs: { grid: "grid" }, features: [i0.ɵɵNgOnChangesFeature], attrs: _c0$3, decls: 2, vars: 1, consts: [[1, "ng2-smart-title"]], template: function ActionsTitleComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtext(1);
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(ctx.actionsColumnTitle);
-        }
-    }, encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsTitleComponent, [{
+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: `
+    <div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ActionsTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-actions-title]',
@@ -2614,25 +1807,17 @@ ActionsTitleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Actio
     <div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
   `,
                 }]
-        }], function () { return [{ type: i0.ElementRef }]; }, { grid: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { grid: [{
                 type: Input
-            }] });
-})();
+            }] } });
 
-const _c0$2 = ["ng2-st-checkbox-select-all", ""];
 class CheckboxSelectAllComponent {
 }
-CheckboxSelectAllComponent.ɵfac = function CheckboxSelectAllComponent_Factory(t) { return new (t || CheckboxSelectAllComponent)(); };
-CheckboxSelectAllComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckboxSelectAllComponent, selectors: [["", "ng2-st-checkbox-select-all", ""]], inputs: { grid: "grid", source: "source" }, attrs: _c0$2, decls: 1, vars: 1, consts: [["type", "checkbox", 3, "ngModel"]], template: function CheckboxSelectAllComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelement(0, "input", 0);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngModel", ctx.grid.dataSet.isAllSelected);
-        }
-    }, dependencies: [i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(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: `
+    <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: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-checkbox-select-all]',
@@ -2640,40 +1825,12 @@ CheckboxSelectAllComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected">
   `,
                 }]
-        }], null, { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
-            }] });
-})();
+            }] } });
 
-function TitleComponent_a_0_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r3 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "a", 2);
-        i0.ɵɵlistener("click", function TitleComponent_a_0_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2._sort($event)); });
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("ngClass", ctx_r0.currentDirection);
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate1(" ", ctx_r0.column.title, " ");
-    }
-}
-function TitleComponent_span_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelementStart(0, "span", 3);
-        i0.ɵɵtext(1);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(ctx_r1.column.title);
-    }
-}
 class TitleComponent {
     constructor() {
         this.currentDirection = '';
@@ -2720,20 +1877,17 @@ class TitleComponent {
         return this.currentDirection;
     }
 }
-TitleComponent.ɵfac = function TitleComponent_Factory(t) { return new (t || TitleComponent)(); };
-TitleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TitleComponent, selectors: [["ng2-smart-table-title"]], inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["href", "#", "class", "ng2-smart-sort-link sort", 3, "ngClass", "click", 4, "ngIf"], ["class", "ng2-smart-sort", 4, "ngIf"], ["href", "#", 1, "ng2-smart-sort-link", "sort", 3, "ngClass", "click"], [1, "ng2-smart-sort"]], template: function TitleComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, TitleComponent_a_0_Template, 2, 2, "a", 0);
-            i0.ɵɵtemplate(1, TitleComponent_span_1_Template, 2, 1, "span", 1);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.column.isSortable);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", !ctx.column.isSortable);
-        }
-    }, dependencies: [i1.NgClass, i1.NgIf], styles: ["a.sort.asc[_ngcontent-%COMP%], a.sort.desc[_ngcontent-%COMP%]{font-weight:700}a.sort.asc[_ngcontent-%COMP%]:after, a.sort.desc[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]:after{transform:rotate(-180deg);margin-bottom:-2px}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TitleComponent, [{
+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: `
+    <a href="#" *ngIf="column.isSortable"
+                (click)="_sort($event)"
+                class="ng2-smart-sort-link sort"
+                [ngClass]="currentDirection">
+      {{ 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: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table-title', template: `
     <a href="#" *ngIf="column.isSortable"
@@ -2744,34 +1898,26 @@ TitleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TitleCompone
     </a>
     <span class="ng2-smart-sort" *ngIf="!column.isSortable">{{ column.title }}</span>
   `, 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"] }]
-        }], null, { column: [{
+        }], propDecorators: { column: [{
                 type: Input
             }], source: [{
                 type: Input
             }], sort: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
 class ColumnTitleComponent {
     constructor() {
         this.sort = new EventEmitter();
     }
 }
-ColumnTitleComponent.ɵfac = function ColumnTitleComponent_Factory(t) { return new (t || ColumnTitleComponent)(); };
-ColumnTitleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ColumnTitleComponent, selectors: [["ng2-st-column-title"]], inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, decls: 2, vars: 2, consts: [[1, "ng2-smart-title"], [3, "source", "column", "sort"]], template: function ColumnTitleComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "ng2-smart-table-title", 1);
-            i0.ɵɵlistener("sort", function ColumnTitleComponent_Template_ng2_smart_table_title_sort_1_listener($event) { return ctx.sort.emit($event); });
-            i0.ɵɵelementEnd()();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("source", ctx.source)("column", ctx.column);
-        }
-    }, dependencies: [TitleComponent], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ColumnTitleComponent, [{
+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: `
+    <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: [{
             type: Component,
             args: [{
                     selector: 'ng2-st-column-title',
@@ -2781,63 +1927,14 @@ ColumnTitleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Column
     </div>
   `,
                 }]
-        }], null, { column: [{
+        }], propDecorators: { column: [{
                 type: Input
             }], source: [{
                 type: Input
             }], sort: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-const _c0$1 = ["ng2-st-thead-titles-row", ""];
-function TheadTitlesRowComponent_th_0_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r5 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "th", 3);
-        i0.ɵɵlistener("click", function TheadTitlesRowComponent_th_0_Template_th_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.selectAllRows.emit($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("grid", ctx_r0.grid)("source", ctx_r0.source);
-    }
-}
-function TheadTitlesRowComponent_th_1_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "th", 4);
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("grid", ctx_r1.grid);
-    }
-}
-function TheadTitlesRowComponent_th_2_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r8 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "th", 5)(1, "ng2-st-column-title", 6);
-        i0.ɵɵlistener("sort", function TheadTitlesRowComponent_th_2_Template_ng2_st_column_title_sort_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.sort.emit($event)); });
-        i0.ɵɵelementEnd()();
-    }
-    if (rf & 2) {
-        const column_r6 = ctx.$implicit;
-        const ctx_r2 = i0.ɵɵnextContext();
-        i0.ɵɵclassMapInterpolate1("ng2-smart-th ", column_r6.id, "");
-        i0.ɵɵstyleProp("width", column_r6.width);
-        i0.ɵɵproperty("ngClass", column_r6.class);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("source", ctx_r2.source)("column", column_r6);
-    }
-}
-function TheadTitlesRowComponent_th_3_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "th", 4);
-    }
-    if (rf & 2) {
-        const ctx_r3 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("grid", ctx_r3.grid);
-    }
-}
 class TheadTitlesRowComponent {
     constructor() {
         this.sort = new EventEmitter();
@@ -2852,26 +1949,23 @@ class TheadTitlesRowComponent {
         return (columns || []).filter((column) => !column.hide);
     }
 }
-TheadTitlesRowComponent.ɵfac = function TheadTitlesRowComponent_Factory(t) { return new (t || TheadTitlesRowComponent)(); };
-TheadTitlesRowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TheadTitlesRowComponent, selectors: [["", "ng2-st-thead-titles-row", ""]], inputs: { grid: "grid", source: "source" }, outputs: { sort: "sort", selectAllRows: "selectAllRows" }, features: [i0.ɵɵNgOnChangesFeature], attrs: _c0$1, decls: 4, vars: 4, consts: [["ng2-st-checkbox-select-all", "", 3, "grid", "source", "click", 4, "ngIf"], ["ng2-st-actions-title", "", 3, "grid", 4, "ngIf"], [3, "class", "ngClass", "width", 4, "ngFor", "ngForOf"], ["ng2-st-checkbox-select-all", "", 3, "grid", "source", "click"], ["ng2-st-actions-title", "", 3, "grid"], [3, "ngClass"], [3, "source", "column", "sort"]], template: function TheadTitlesRowComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, TheadTitlesRowComponent_th_0_Template, 1, 2, "th", 0);
-            i0.ɵɵtemplate(1, TheadTitlesRowComponent_th_1_Template, 1, 1, "th", 1);
-            i0.ɵɵtemplate(2, TheadTitlesRowComponent_th_2_Template, 2, 8, "th", 2);
-            i0.ɵɵtemplate(3, TheadTitlesRowComponent_th_3_Template, 1, 1, "th", 1);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.isMultiSelectVisible);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.showActionColumnLeft);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx.getVisibleColumns(ctx.grid.getColumns()));
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.showActionColumnRight);
-        }
-    }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, ActionsTitleComponent, CheckboxSelectAllComponent, ColumnTitleComponent], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TheadTitlesRowComponent, [{
+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: `
+    <th ng2-st-checkbox-select-all *ngIf="isMultiSelectVisible"
+                                   [grid]="grid"
+                                   [source]="source"
+                                   (click)="selectAllRows.emit($event)">
+    </th>
+    <th ng2-st-actions-title *ngIf="showActionColumnLeft" [grid]="grid"></th>
+    <th *ngFor="let column of getVisibleColumns(grid.getColumns())"
+        class="ng2-smart-th {{ column.id }}"
+        [ngClass]="column.class"
+        [style.width]="column.width">
+      <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: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-thead-titles-row]',
@@ -2891,7 +1985,7 @@ TheadTitlesRowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: The
     <th ng2-st-actions-title *ngIf="showActionColumnRight" [grid]="grid"></th>
   `,
                 }]
-        }], null, { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
@@ -2899,43 +1993,8 @@ TheadTitlesRowComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: The
                 type: Output
             }], selectAllRows: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-const _c0 = ["ng2-st-thead", ""];
-function Ng2SmartTableTheadComponent_tr_0_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r4 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "tr", 3);
-        i0.ɵɵlistener("sort", function Ng2SmartTableTheadComponent_tr_0_Template_tr_sort_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.sort.emit($event)); })("selectAllRows", function Ng2SmartTableTheadComponent_tr_0_Template_tr_selectAllRows_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.selectAllRows.emit($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("grid", ctx_r0.grid)("source", ctx_r0.source);
-    }
-}
-function Ng2SmartTableTheadComponent_tr_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r7 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "tr", 4);
-        i0.ɵɵlistener("create", function Ng2SmartTableTheadComponent_tr_1_Template_tr_create_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.create.emit($event)); })("filter", function Ng2SmartTableTheadComponent_tr_1_Template_tr_filter_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.filter.emit($event)); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("grid", ctx_r1.grid)("source", ctx_r1.source);
-    }
-}
-function Ng2SmartTableTheadComponent_tr_2_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "tr", 5);
-    }
-    if (rf & 2) {
-        const ctx_r2 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("grid", ctx_r2.grid)("createConfirm", ctx_r2.createConfirm);
-    }
-}
 class Ng2SmartTableTheadComponent {
     constructor() {
         this.sort = new EventEmitter();
@@ -2948,26 +2007,12 @@ class Ng2SmartTableTheadComponent {
         this.isHideSubHeader = this.grid.getSetting('hideSubHeader');
     }
 }
-Ng2SmartTableTheadComponent.ɵfac = function Ng2SmartTableTheadComponent_Factory(t) { return new (t || Ng2SmartTableTheadComponent)(); };
-Ng2SmartTableTheadComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ng2SmartTableTheadComponent, selectors: [["", "ng2-st-thead", ""]], inputs: { grid: "grid", source: "source", createConfirm: "createConfirm" }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, features: [i0.ɵɵNgOnChangesFeature], attrs: _c0, decls: 3, vars: 3, consts: [["ng2-st-thead-titles-row", "", "class", "ng2-smart-titles", 3, "grid", "source", "sort", "selectAllRows", 4, "ngIf"], ["ng2-st-thead-filters-row", "", "class", "ng2-smart-filters", 3, "grid", "source", "create", "filter", 4, "ngIf"], ["ng2-st-thead-form-row", "", 3, "grid", "createConfirm", 4, "ngIf"], ["ng2-st-thead-titles-row", "", 1, "ng2-smart-titles", 3, "grid", "source", "sort", "selectAllRows"], ["ng2-st-thead-filters-row", "", 1, "ng2-smart-filters", 3, "grid", "source", "create", "filter"], ["ng2-st-thead-form-row", "", 3, "grid", "createConfirm"]], template: function Ng2SmartTableTheadComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵtemplate(0, Ng2SmartTableTheadComponent_tr_0_Template, 1, 2, "tr", 0);
-            i0.ɵɵtemplate(1, Ng2SmartTableTheadComponent_tr_1_Template, 1, 2, "tr", 1);
-            i0.ɵɵtemplate(2, Ng2SmartTableTheadComponent_tr_2_Template, 1, 2, "tr", 2);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngIf", !ctx.isHideHeader);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", !ctx.isHideSubHeader);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.grid.createFormShown);
-        }
-    }, dependencies: [i1.NgIf, TheadFitlersRowComponent, TheadFormRowComponent, TheadTitlesRowComponent], encapsulation: 2 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Ng2SmartTableTheadComponent, [{
+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: [{
             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" }]
-        }], null, { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
@@ -2981,8 +2026,7 @@ Ng2SmartTableTheadComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
                 type: Output
             }], filter: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
 const THEAD_COMPONENTS = [
     ActionsComponent,
@@ -2998,14 +2042,34 @@ const THEAD_COMPONENTS = [
 ];
 class THeadModule {
 }
-THeadModule.ɵfac = function THeadModule_Factory(t) { return new (t || THeadModule)(); };
-THeadModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: THeadModule });
-THeadModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+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] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(THeadModule, [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: THeadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3021,32 +2085,7 @@ THeadModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule
                         ...THEAD_COMPONENTS,
                     ],
                 }]
-        }], null, null);
-})();
-(function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(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] });
-})();
+        }] });
 
 /**
  * Extending object that entered in first argument.
@@ -3606,6 +2645,22 @@ class Grid {
     }
 }
 
+var SmartTableOnChangedEventName;
+(function (SmartTableOnChangedEventName) {
+    SmartTableOnChangedEventName["load"] = "load";
+    SmartTableOnChangedEventName["paging"] = "paging";
+    SmartTableOnChangedEventName["update"] = "update";
+    SmartTableOnChangedEventName["page"] = "page";
+    SmartTableOnChangedEventName["filter"] = "filter";
+    SmartTableOnChangedEventName["empty"] = "empty";
+    SmartTableOnChangedEventName["sort"] = "sort";
+    SmartTableOnChangedEventName["add"] = "add";
+    SmartTableOnChangedEventName["remove"] = "remove";
+    SmartTableOnChangedEventName["append"] = "append";
+    SmartTableOnChangedEventName["prepend"] = "prepend";
+    SmartTableOnChangedEventName["refresh"] = "refresh";
+})(SmartTableOnChangedEventName || (SmartTableOnChangedEventName = {}));
+
 class DataSource {
     constructor() {
         this.onChangedSource = new Subject();
@@ -3614,11 +2669,11 @@ class DataSource {
         this.onRemovedSource = new Subject();
     }
     refresh() {
-        this.emitOnChanged('refresh');
+        this.emitOnChanged(SmartTableOnChangedEventName.refresh);
     }
     load(data) {
-        this.emitOnChanged('load');
-        return Promise.resolve();
+        this.emitOnChanged(SmartTableOnChangedEventName.load);
+        return Promise.resolve(true);
     }
     onChanged() {
         return this.onChangedSource.asObservable();
@@ -3634,56 +2689,56 @@ class DataSource {
     }
     prepend(element) {
         this.emitOnAdded(element);
-        this.emitOnChanged('prepend');
-        return Promise.resolve();
+        this.emitOnChanged(SmartTableOnChangedEventName.prepend);
+        return Promise.resolve(true);
     }
     append(element) {
         this.emitOnAdded(element);
-        this.emitOnChanged('append');
-        return Promise.resolve();
+        this.emitOnChanged(SmartTableOnChangedEventName.append);
+        return Promise.resolve(true);
     }
     add(element) {
         this.emitOnAdded(element);
-        this.emitOnChanged('add');
-        return Promise.resolve();
+        this.emitOnChanged(SmartTableOnChangedEventName.add);
+        return Promise.resolve(true);
     }
     remove(element) {
         this.emitOnRemoved(element);
-        this.emitOnChanged('remove');
-        return Promise.resolve();
+        this.emitOnChanged(SmartTableOnChangedEventName.remove);
+        return Promise.resolve(true);
     }
     update(element, values) {
         this.emitOnUpdated(element);
-        this.emitOnChanged('update');
-        return Promise.resolve();
+        this.emitOnChanged(SmartTableOnChangedEventName.update);
+        return Promise.resolve(true);
     }
     empty() {
-        this.emitOnChanged('empty');
-        return Promise.resolve();
+        this.emitOnChanged(SmartTableOnChangedEventName.empty);
+        return Promise.resolve(true);
     }
     setSort(conf, doEmit) {
         if (doEmit) {
-            this.emitOnChanged('sort');
+            this.emitOnChanged(SmartTableOnChangedEventName.sort);
         }
     }
     setFilter(conf, andOperator, doEmit) {
         if (doEmit) {
-            this.emitOnChanged('filter');
+            this.emitOnChanged(SmartTableOnChangedEventName.filter);
         }
     }
     addFilter(fieldConf, andOperator, doEmit) {
         if (doEmit) {
-            this.emitOnChanged('filter');
+            this.emitOnChanged(SmartTableOnChangedEventName.filter);
         }
     }
     setPaging(page, perPage, doEmit) {
         if (doEmit) {
-            this.emitOnChanged('paging');
+            this.emitOnChanged(SmartTableOnChangedEventName.paging);
         }
     }
     setPage(page, doEmit) {
         if (doEmit) {
-            this.emitOnChanged('page');
+            this.emitOnChanged(SmartTableOnChangedEventName.page);
         }
     }
     emitOnRemoved(element) {
@@ -3754,7 +2809,10 @@ class LocalDataSource extends DataSource {
             filters: [],
             andOperator: true,
         };
-        this.pagingConf = {};
+        this.pagingConf = {
+            page: 1,
+            perPage: 1,
+        };
         this.data = data;
     }
     load(data) {
@@ -3814,7 +2872,7 @@ class LocalDataSource extends DataSource {
                 andOperator: true,
             };
             this.sortConf = [];
-            this.pagingConf['page'] = 1;
+            this.pagingConf.page = 1;
         }
         else {
             this.setFilter([], true, false);
@@ -3842,7 +2900,7 @@ class LocalDataSource extends DataSource {
     setSort(conf, doEmit = true) {
         if (conf !== null) {
             conf.forEach((fieldConf) => {
-                if (!fieldConf['field'] || typeof fieldConf['direction'] === 'undefined') {
+                if (!fieldConf.field || typeof fieldConf.direction === 'undefined') {
                     throw new Error('Sort configuration object is not valid');
                 }
             });
@@ -3875,17 +2933,17 @@ class LocalDataSource extends DataSource {
             };
         }
         this.filterConf.andOperator = andOperator;
-        this.pagingConf['page'] = 1;
+        this.pagingConf.page = 1;
         super.setFilter(conf, andOperator, doEmit);
         return this;
     }
     addFilter(fieldConf, andOperator = true, doEmit = true) {
-        if (!fieldConf['field'] || typeof fieldConf['search'] === 'undefined') {
+        if (!fieldConf.field || typeof fieldConf.search === 'undefined') {
             throw new Error('Filter configuration object is not valid');
         }
         let found = false;
         this.filterConf.filters.forEach((currentFieldConf, index) => {
-            if (currentFieldConf['field'] === fieldConf['field']) {
+            if (currentFieldConf.field === fieldConf.field) {
                 this.filterConf.filters[index] = fieldConf;
                 found = true;
             }
@@ -3898,13 +2956,13 @@ class LocalDataSource extends DataSource {
         return this;
     }
     setPaging(page, perPage, doEmit = true) {
-        this.pagingConf['page'] = page;
-        this.pagingConf['perPage'] = perPage;
+        this.pagingConf.page = page;
+        this.pagingConf.perPage = perPage;
         super.setPaging(page, perPage, doEmit);
         return this;
     }
     setPage(page, doEmit = true) {
-        this.pagingConf['page'] = page;
+        this.pagingConf.page = page;
         super.setPage(page, doEmit);
         return this;
     }
@@ -3927,7 +2985,7 @@ class LocalDataSource extends DataSource {
         if (this.sortConf) {
             this.sortConf.forEach((fieldConf) => {
                 data = LocalSorter
-                    .sort(data, fieldConf['field'], fieldConf['direction'], fieldConf['compare']);
+                    .sort(data, fieldConf.field, fieldConf.direction, fieldConf.compare);
             });
         }
         return data;
@@ -3938,9 +2996,9 @@ class LocalDataSource extends DataSource {
             if (this.filterConf.andOperator) {
                 this.filterConf.filters.forEach((fieldConf) => {
                     var _a;
-                    if (((_a = fieldConf['search']) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    if (((_a = fieldConf.search) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                         data = LocalFilter
-                            .filter(data, fieldConf['field'], fieldConf['search'], fieldConf['filter']);
+                            .filter(data, fieldConf.field, fieldConf.search, fieldConf.filter);
                     }
                 });
             }
@@ -3948,9 +3006,9 @@ class LocalDataSource extends DataSource {
                 let mergedData = [];
                 this.filterConf.filters.forEach((fieldConf) => {
                     var _a;
-                    if (((_a = fieldConf['search']) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    if (((_a = fieldConf.search) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                         mergedData = mergedData.concat(LocalFilter
-                            .filter(data, fieldConf['field'], fieldConf['search'], fieldConf['filter']));
+                            .filter(data, fieldConf.field, fieldConf.search, fieldConf.filter));
                     }
                 });
                 // remove non unique items
@@ -3962,34 +3020,13 @@ class LocalDataSource extends DataSource {
         return data;
     }
     paginate(data) {
-        if (this.pagingConf && this.pagingConf['page'] && this.pagingConf['perPage']) {
-            data = LocalPager.paginate(data, this.pagingConf['page'], this.pagingConf['perPage']);
+        if (this.pagingConf && this.pagingConf.page && this.pagingConf.perPage) {
+            data = LocalPager.paginate(data, this.pagingConf.page, this.pagingConf.perPage);
         }
         return data;
     }
 }
 
-function Ng2SmartTableComponent_thead_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r3 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "thead", 4);
-        i0.ɵɵlistener("create", function Ng2SmartTableComponent_thead_1_Template_thead_create_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.create.emit($event)); })("selectAllRows", function Ng2SmartTableComponent_thead_1_Template_thead_selectAllRows_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onSelectAllRows()); });
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("grid", ctx_r0.grid)("source", ctx_r0.source)("createConfirm", ctx_r0.createConfirm);
-    }
-}
-function Ng2SmartTableComponent_ng2_smart_table_pager_3_Template(rf, ctx) {
-    if (rf & 1) {
-        i0.ɵɵelement(0, "ng2-smart-table-pager", 5);
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("source", ctx_r1.source)("perPageSelect", ctx_r1.perPageSelect);
-    }
-}
 class Ng2SmartTableComponent {
     constructor() {
         this.multiRowSelect = new EventEmitter();
@@ -4080,9 +3117,6 @@ class Ng2SmartTableComponent {
         this.perPageSelect = this.grid.getSetting('pager.perPageSelect');
         this.rowClassFunction = this.grid.getSetting('rowClassFunction');
     }
-    onRowHover(row) {
-        this.rowHover.emit(row);
-    }
     multipleSelectRow(row) {
         this.grid.multipleSelectRow(row);
         this.emitUserSelectRow(row);
@@ -4123,31 +3157,12 @@ class Ng2SmartTableComponent {
         });
     }
 }
-Ng2SmartTableComponent.ɵfac = function Ng2SmartTableComponent_Factory(t) { return new (t || Ng2SmartTableComponent)(); };
-Ng2SmartTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ng2SmartTableComponent, selectors: [["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" }, features: [i0.ɵɵNgOnChangesFeature], decls: 4, vars: 9, consts: [[3, "id", "ngClass"], ["ng2-st-thead", "", 3, "grid", "source", "createConfirm", "create", "selectAllRows", 4, "ngIf"], ["ng2-st-tbody", "", 3, "grid", "source", "deleteConfirm", "editConfirm", "rowClassFunction", "edit", "editCancel", "delete", "custom", "userClickedRow", "multipleSelectRow", "rowHover"], [3, "source", "perPageSelect", 4, "ngIf"], ["ng2-st-thead", "", 3, "grid", "source", "createConfirm", "create", "selectAllRows"], [3, "source", "perPageSelect"]], template: function Ng2SmartTableComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "table", 0);
-            i0.ɵɵtemplate(1, Ng2SmartTableComponent_thead_1_Template, 1, 3, "thead", 1);
-            i0.ɵɵelementStart(2, "tbody", 2);
-            i0.ɵɵlistener("edit", function Ng2SmartTableComponent_Template_tbody_edit_2_listener($event) { return ctx.edit.emit($event); })("editCancel", function Ng2SmartTableComponent_Template_tbody_editCancel_2_listener($event) { return ctx.editCancel.emit($event); })("delete", function Ng2SmartTableComponent_Template_tbody_delete_2_listener($event) { return ctx.delete.emit($event); })("custom", function Ng2SmartTableComponent_Template_tbody_custom_2_listener($event) { return ctx.custom.emit($event); })("userClickedRow", function Ng2SmartTableComponent_Template_tbody_userClickedRow_2_listener($event) { return ctx.emitUserRowClicked($event); })("multipleSelectRow", function Ng2SmartTableComponent_Template_tbody_multipleSelectRow_2_listener($event) { return ctx.multipleSelectRow($event); })("rowHover", function Ng2SmartTableComponent_Template_tbody_rowHover_2_listener($event) { return ctx.onRowHover($event); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(3, Ng2SmartTableComponent_ng2_smart_table_pager_3_Template, 1, 2, "ng2-smart-table-pager", 3);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("id", ctx.tableId)("ngClass", ctx.tableClass);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", !ctx.isHideHeader || !ctx.isHideSubHeader);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("grid", ctx.grid)("source", ctx.source)("deleteConfirm", ctx.deleteConfirm)("editConfirm", ctx.editConfirm)("rowClassFunction", ctx.rowClassFunction);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.isPagerDisplay);
-        }
-    }, dependencies: [i1.NgClass, i1.NgIf, PagerComponent, Ng2SmartTableTbodyComponent, Ng2SmartTableTheadComponent], styles: ["[_nghost-%COMP%]{font-size:1rem}[_nghost-%COMP%]     *{box-sizing:border-box}[_nghost-%COMP%]     button, [_nghost-%COMP%]     input, [_nghost-%COMP%]     optgroup, [_nghost-%COMP%]     select, [_nghost-%COMP%]     textarea{color:inherit;font:inherit;margin:0}[_nghost-%COMP%]     table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;overflow:auto;word-break:normal;word-break:keep-all}[_nghost-%COMP%]     table tr th{font-weight:700}[_nghost-%COMP%]     table tr section{font-size:.75em;font-weight:700}[_nghost-%COMP%]     table tr td, [_nghost-%COMP%]     table tr th{font-size:.875em;margin:0;padding:.5em 1em}[_nghost-%COMP%]     a{color:#1e6bb8;text-decoration:none}[_nghost-%COMP%]     a:hover{text-decoration:underline}"] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Ng2SmartTableComponent, [{
+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%;overflow:auto;word-break:normal;word-break:keep-all}: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: [{
             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                      (rowHover)=\"onRowHover($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%;overflow:auto;word-break:normal;word-break:keep-all}: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"] }]
-        }], null, { source: [{
+            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%;overflow:auto;word-break:normal;word-break:keep-all}: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: [{
                 type: Input
             }], settings: [{
                 type: Input
@@ -4173,14 +3188,20 @@ Ng2SmartTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ng2S
                 type: Output
             }], rowHover: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
 class Ng2SmartTableModule {
 }
-Ng2SmartTableModule.ɵfac = function Ng2SmartTableModule_Factory(t) { return new (t || Ng2SmartTableModule)(); };
-Ng2SmartTableModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: Ng2SmartTableModule });
-Ng2SmartTableModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+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,
@@ -4188,8 +3209,7 @@ Ng2SmartTableModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Comm
         PagerModule,
         TBodyModule,
         THeadModule] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Ng2SmartTableModule, [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4209,18 +3229,7 @@ Ng2SmartTableModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Comm
                         Ng2SmartTableComponent,
                     ],
                 }]
-        }], null, null);
-})();
-(function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(Ng2SmartTableModule, { declarations: [Ng2SmartTableComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            CellModule,
-            FilterModule,
-            PagerModule,
-            TBodyModule,
-            THeadModule], exports: [Ng2SmartTableComponent] });
-})();
+        }] });
 
 class ServerSourceConf {
     constructor({ endPoint = '', sortFieldKey = '', sortDirKey = '', pagerPageKey = '', pagerLimitKey = '', filterFieldKey = '', totalKey = '', dataKey = '' } = {}) {