@swimlane/ngx-datatable 17.0.0 → 20.0.0

package/fesm2015/swimlane-ngx-datatable.js

@@ -1,14 +1,14 @@
-import { __decorate, __param } from 'tslib';
-import { Inject, Injectable, TemplateRef, Directive, EventEmitter, ElementRef, NgZone, HostBinding, Output, Input, Renderer2, HostListener, KeyValueDiffers, ContentChildren, Component, ChangeDetectionStrategy, ContentChild, ChangeDetectorRef, ViewChild, SkipSelf, Optional, ViewEncapsulation, ViewContainerRef, NgModule } from '@angular/core';
+import { Injectable, Inject, Directive, TemplateRef, EventEmitter, ElementRef, NgZone, HostBinding, Output, Input, Renderer2, HostListener, KeyValueDiffers, ContentChildren, Component, ChangeDetectionStrategy, ContentChild, ChangeDetectorRef, ViewChild, ViewEncapsulation, SkipSelf, Optional, ViewContainerRef, NgModule } from '@angular/core';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { Subject, fromEvent, BehaviorSubject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { __decorate } from 'tslib';
 
 /**
  * Gets the width of the scrollbar.  Nesc for windows
  * http://stackoverflow.com/a/13382873/888165
  */
-let ScrollbarHelper = class ScrollbarHelper {
+class ScrollbarHelper {
     constructor(document) {
         this.document = document;
         this.width = this.getWidth();
@@ -28,33 +28,32 @@ let ScrollbarHelper = class ScrollbarHelper {
         outer.parentNode.removeChild(outer);
         return widthNoScroll - widthWithScroll;
     }
-};
+}
+ScrollbarHelper.decorators = [
+    { type: Injectable }
+];
 ScrollbarHelper.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
 ];
-ScrollbarHelper = __decorate([
-    Injectable(),
-    __param(0, Inject(DOCUMENT))
-], ScrollbarHelper);
 
 /**
  * Gets the width of the scrollbar.  Nesc for windows
  * http://stackoverflow.com/a/13382873/888165
  */
-let DimensionsHelper = class DimensionsHelper {
+class DimensionsHelper {
     getDimensions(element) {
         return element.getBoundingClientRect();
     }
-};
-DimensionsHelper = __decorate([
-    Injectable()
-], DimensionsHelper);
+}
+DimensionsHelper.decorators = [
+    { type: Injectable }
+];
 
 /**
  * service to make DatatableComponent aware of changes to
  * input bindings of DataTableColumnDirective
  */
-let ColumnChangesService = class ColumnChangesService {
+class ColumnChangesService {
     constructor() {
         this.columnInputChanges = new Subject();
     }
@@ -64,22 +63,22 @@ let ColumnChangesService = class ColumnChangesService {
     onInputChange() {
         this.columnInputChanges.next();
     }
-};
-ColumnChangesService = __decorate([
-    Injectable()
-], ColumnChangesService);
+}
+ColumnChangesService.decorators = [
+    { type: Injectable }
+];
 
-let DataTableFooterTemplateDirective = class DataTableFooterTemplateDirective {
+class DataTableFooterTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-};
+}
+DataTableFooterTemplateDirective.decorators = [
+    { type: Directive, args: [{ selector: '[ngx-datatable-footer-template]' },] }
+];
 DataTableFooterTemplateDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
-DataTableFooterTemplateDirective = __decorate([
-    Directive({ selector: '[ngx-datatable-footer-template]' })
-], DataTableFooterTemplateDirective);
 
 /**
  * Visibility Observer Directive
@@ -92,7 +91,7 @@ DataTableFooterTemplateDirective = __decorate([
  * 		</div>
  *
  */
-let VisibilityDirective = class VisibilityDirective {
+class VisibilityDirective {
     constructor(element, zone) {
         this.element = element;
         this.zone = zone;
@@ -129,20 +128,18 @@ let VisibilityDirective = class VisibilityDirective {
         };
         this.timeout = setTimeout(() => check());
     }
-};
+}
+VisibilityDirective.decorators = [
+    { type: Directive, args: [{ selector: '[visibilityObserver]' },] }
+];
 VisibilityDirective.ctorParameters = () => [
     { type: ElementRef },
     { type: NgZone }
 ];
-__decorate([
-    HostBinding('class.visible')
-], VisibilityDirective.prototype, "isVisible", void 0);
-__decorate([
-    Output()
-], VisibilityDirective.prototype, "visible", void 0);
-VisibilityDirective = __decorate([
-    Directive({ selector: '[visibilityObserver]' })
-], VisibilityDirective);
+VisibilityDirective.propDecorators = {
+    isVisible: [{ type: HostBinding, args: ['class.visible',] }],
+    visible: [{ type: Output }]
+};
 
 /**
  * Draggable Directive for Angular2
@@ -152,7 +149,7 @@ VisibilityDirective = __decorate([
  *   http://stackoverflow.com/questions/35662530/how-to-implement-drag-and-drop-in-angular2
  *
  */
-let DraggableDirective = class DraggableDirective {
+class DraggableDirective {
     constructor(element) {
         this.dragX = true;
         this.dragY = true;
@@ -226,36 +223,24 @@ let DraggableDirective = class DraggableDirective {
             this.subscription = undefined;
         }
     }
-};
+}
+DraggableDirective.decorators = [
+    { type: Directive, args: [{ selector: '[draggable]' },] }
+];
 DraggableDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
-__decorate([
-    Input()
-], DraggableDirective.prototype, "dragEventTarget", void 0);
-__decorate([
-    Input()
-], DraggableDirective.prototype, "dragModel", void 0);
-__decorate([
-    Input()
-], DraggableDirective.prototype, "dragX", void 0);
-__decorate([
-    Input()
-], DraggableDirective.prototype, "dragY", void 0);
-__decorate([
-    Output()
-], DraggableDirective.prototype, "dragStart", void 0);
-__decorate([
-    Output()
-], DraggableDirective.prototype, "dragging", void 0);
-__decorate([
-    Output()
-], DraggableDirective.prototype, "dragEnd", void 0);
-DraggableDirective = __decorate([
-    Directive({ selector: '[draggable]' })
-], DraggableDirective);
+DraggableDirective.propDecorators = {
+    dragEventTarget: [{ type: Input }],
+    dragModel: [{ type: Input }],
+    dragX: [{ type: Input }],
+    dragY: [{ type: Input }],
+    dragStart: [{ type: Output }],
+    dragging: [{ type: Output }],
+    dragEnd: [{ type: Output }]
+};
 
-let ResizeableDirective = class ResizeableDirective {
+class ResizeableDirective {
     constructor(element, renderer) {
         this.renderer = renderer;
         this.resizeEnabled = true;
@@ -320,36 +305,28 @@ let ResizeableDirective = class ResizeableDirective {
             this.subscription = undefined;
         }
     }
-};
+}
+ResizeableDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[resizeable]',
+                host: {
+                    '[class.resizeable]': 'resizeEnabled'
+                }
+            },] }
+];
 ResizeableDirective.ctorParameters = () => [
     { type: ElementRef },
     { type: Renderer2 }
 ];
-__decorate([
-    Input()
-], ResizeableDirective.prototype, "resizeEnabled", void 0);
-__decorate([
-    Input()
-], ResizeableDirective.prototype, "minWidth", void 0);
-__decorate([
-    Input()
-], ResizeableDirective.prototype, "maxWidth", void 0);
-__decorate([
-    Output()
-], ResizeableDirective.prototype, "resize", void 0);
-__decorate([
-    HostListener('mousedown', ['$event'])
-], ResizeableDirective.prototype, "onMousedown", null);
-ResizeableDirective = __decorate([
-    Directive({
-        selector: '[resizeable]',
-        host: {
-            '[class.resizeable]': 'resizeEnabled'
-        }
-    })
-], ResizeableDirective);
+ResizeableDirective.propDecorators = {
+    resizeEnabled: [{ type: Input }],
+    minWidth: [{ type: Input }],
+    maxWidth: [{ type: Input }],
+    resize: [{ type: Output }],
+    onMousedown: [{ type: HostListener, args: ['mousedown', ['$event'],] }]
+};
 
-let OrderableDirective = class OrderableDirective {
+class OrderableDirective {
     constructor(differs, document) {
         this.document = document;
         this.reorder = new EventEmitter();
@@ -463,26 +440,21 @@ let OrderableDirective = class OrderableDirective {
             return acc;
         }, {});
     }
-};
+}
+OrderableDirective.decorators = [
+    { type: Directive, args: [{ selector: '[orderable]' },] }
+];
 OrderableDirective.ctorParameters = () => [
     { type: KeyValueDiffers },
     { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
 ];
-__decorate([
-    Output()
-], OrderableDirective.prototype, "reorder", void 0);
-__decorate([
-    Output()
-], OrderableDirective.prototype, "targetChanged", void 0);
-__decorate([
-    ContentChildren(DraggableDirective, { descendants: true })
-], OrderableDirective.prototype, "draggables", void 0);
-OrderableDirective = __decorate([
-    Directive({ selector: '[orderable]' }),
-    __param(1, Inject(DOCUMENT))
-], OrderableDirective);
+OrderableDirective.propDecorators = {
+    reorder: [{ type: Output }],
+    targetChanged: [{ type: Output }],
+    draggables: [{ type: ContentChildren, args: [DraggableDirective, { descendants: true },] }]
+};
 
-let LongPressDirective = class LongPressDirective {
+class LongPressDirective {
     constructor() {
         this.pressEnabled = true;
         this.duration = 500;
@@ -566,39 +538,23 @@ let LongPressDirective = class LongPressDirective {
             this.subscription = undefined;
         }
     }
+}
+LongPressDirective.decorators = [
+    { type: Directive, args: [{ selector: '[long-press]' },] }
+];
+LongPressDirective.propDecorators = {
+    pressEnabled: [{ type: Input }],
+    pressModel: [{ type: Input }],
+    duration: [{ type: Input }],
+    longPressStart: [{ type: Output }],
+    longPressing: [{ type: Output }],
+    longPressEnd: [{ type: Output }],
+    press: [{ type: HostBinding, args: ['class.press',] }],
+    isLongPress: [{ type: HostBinding, args: ['class.longpress',] }],
+    onMouseDown: [{ type: HostListener, args: ['mousedown', ['$event'],] }]
 };
-__decorate([
-    Input()
-], LongPressDirective.prototype, "pressEnabled", void 0);
-__decorate([
-    Input()
-], LongPressDirective.prototype, "pressModel", void 0);
-__decorate([
-    Input()
-], LongPressDirective.prototype, "duration", void 0);
-__decorate([
-    Output()
-], LongPressDirective.prototype, "longPressStart", void 0);
-__decorate([
-    Output()
-], LongPressDirective.prototype, "longPressing", void 0);
-__decorate([
-    Output()
-], LongPressDirective.prototype, "longPressEnd", void 0);
-__decorate([
-    HostBinding('class.press')
-], LongPressDirective.prototype, "press", null);
-__decorate([
-    HostBinding('class.longpress')
-], LongPressDirective.prototype, "isLongPress", null);
-__decorate([
-    HostListener('mousedown', ['$event'])
-], LongPressDirective.prototype, "onMouseDown", null);
-LongPressDirective = __decorate([
-    Directive({ selector: '[long-press]' })
-], LongPressDirective);
 
-let ScrollerComponent = class ScrollerComponent {
+class ScrollerComponent {
     constructor(ngZone, element, renderer) {
         this.ngZone = ngZone;
         this.renderer = renderer;
@@ -656,55 +612,45 @@ let ScrollerComponent = class ScrollerComponent {
         this.prevScrollYPos = this.scrollYPos;
         this.prevScrollXPos = this.scrollXPos;
     }
-};
+}
+ScrollerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-scroller',
+                template: ` <ng-content></ng-content> `,
+                host: {
+                    class: 'datatable-scroll'
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
 ScrollerComponent.ctorParameters = () => [
     { type: NgZone },
     { type: ElementRef },
     { type: Renderer2 }
 ];
-__decorate([
-    Input()
-], ScrollerComponent.prototype, "scrollbarV", void 0);
-__decorate([
-    Input()
-], ScrollerComponent.prototype, "scrollbarH", void 0);
-__decorate([
-    HostBinding('style.height.px'),
-    Input()
-], ScrollerComponent.prototype, "scrollHeight", void 0);
-__decorate([
-    HostBinding('style.width.px'),
-    Input()
-], ScrollerComponent.prototype, "scrollWidth", void 0);
-__decorate([
-    Output()
-], ScrollerComponent.prototype, "scroll", void 0);
-ScrollerComponent = __decorate([
-    Component({
-        selector: 'datatable-scroller',
-        template: ` <ng-content></ng-content> `,
-        host: {
-            class: 'datatable-scroll'
-        },
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], ScrollerComponent);
+ScrollerComponent.propDecorators = {
+    scrollbarV: [{ type: Input }],
+    scrollbarH: [{ type: Input }],
+    scrollHeight: [{ type: HostBinding, args: ['style.height.px',] }, { type: Input }],
+    scrollWidth: [{ type: HostBinding, args: ['style.width.px',] }, { type: Input }],
+    scroll: [{ type: Output }]
+};
 
-let DatatableGroupHeaderTemplateDirective = class DatatableGroupHeaderTemplateDirective {
+class DatatableGroupHeaderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-};
+}
+DatatableGroupHeaderTemplateDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[ngx-datatable-group-header-template]'
+            },] }
+];
 DatatableGroupHeaderTemplateDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
-DatatableGroupHeaderTemplateDirective = __decorate([
-    Directive({
-        selector: '[ngx-datatable-group-header-template]'
-    })
-], DatatableGroupHeaderTemplateDirective);
 
-let DatatableGroupHeaderDirective = class DatatableGroupHeaderDirective {
+class DatatableGroupHeaderDirective {
     constructor() {
         /**
          * Row height is required when virtual scroll is enabled.
@@ -745,22 +691,16 @@ let DatatableGroupHeaderDirective = class DatatableGroupHeaderDirective {
             value: false
         });
     }
+}
+DatatableGroupHeaderDirective.decorators = [
+    { type: Directive, args: [{ selector: 'ngx-datatable-group-header' },] }
+];
+DatatableGroupHeaderDirective.propDecorators = {
+    rowHeight: [{ type: Input }],
+    _templateInput: [{ type: Input, args: ['template',] }],
+    _templateQuery: [{ type: ContentChild, args: [DatatableGroupHeaderTemplateDirective, { read: TemplateRef, static: true },] }],
+    toggle: [{ type: Output }]
 };
-__decorate([
-    Input()
-], DatatableGroupHeaderDirective.prototype, "rowHeight", void 0);
-__decorate([
-    Input('template')
-], DatatableGroupHeaderDirective.prototype, "_templateInput", void 0);
-__decorate([
-    ContentChild(DatatableGroupHeaderTemplateDirective, { read: TemplateRef, static: true })
-], DatatableGroupHeaderDirective.prototype, "_templateQuery", void 0);
-__decorate([
-    Output()
-], DatatableGroupHeaderDirective.prototype, "toggle", void 0);
-DatatableGroupHeaderDirective = __decorate([
-    Directive({ selector: 'ngx-datatable-group-header' })
-], DatatableGroupHeaderDirective);
 
 /**
  * Always returns the empty string ''
@@ -1116,43 +1056,43 @@ var ContextmenuType;
     ContextmenuType["body"] = "body";
 })(ContextmenuType || (ContextmenuType = {}));
 
-let DataTableColumnHeaderDirective = class DataTableColumnHeaderDirective {
+class DataTableColumnHeaderDirective {
     constructor(template) {
         this.template = template;
     }
-};
+}
+DataTableColumnHeaderDirective.decorators = [
+    { type: Directive, args: [{ selector: '[ngx-datatable-header-template]' },] }
+];
 DataTableColumnHeaderDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
-DataTableColumnHeaderDirective = __decorate([
-    Directive({ selector: '[ngx-datatable-header-template]' })
-], DataTableColumnHeaderDirective);
 
-let DataTableColumnCellDirective = class DataTableColumnCellDirective {
+class DataTableColumnCellDirective {
     constructor(template) {
         this.template = template;
     }
-};
+}
+DataTableColumnCellDirective.decorators = [
+    { type: Directive, args: [{ selector: '[ngx-datatable-cell-template]' },] }
+];
 DataTableColumnCellDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
-DataTableColumnCellDirective = __decorate([
-    Directive({ selector: '[ngx-datatable-cell-template]' })
-], DataTableColumnCellDirective);
 
-let DataTableColumnCellTreeToggle = class DataTableColumnCellTreeToggle {
+class DataTableColumnCellTreeToggle {
     constructor(template) {
         this.template = template;
     }
-};
+}
+DataTableColumnCellTreeToggle.decorators = [
+    { type: Directive, args: [{ selector: '[ngx-datatable-tree-toggle]' },] }
+];
 DataTableColumnCellTreeToggle.ctorParameters = () => [
     { type: TemplateRef }
 ];
-DataTableColumnCellTreeToggle = __decorate([
-    Directive({ selector: '[ngx-datatable-tree-toggle]' })
-], DataTableColumnCellTreeToggle);
 
-let DataTableColumnDirective = class DataTableColumnDirective {
+class DataTableColumnDirective {
     constructor(columnChangesService) {
         this.columnChangesService = columnChangesService;
         this.isFirstChange = true;
@@ -1174,113 +1114,59 @@ let DataTableColumnDirective = class DataTableColumnDirective {
             this.columnChangesService.onInputChange();
         }
     }
-};
+}
+DataTableColumnDirective.decorators = [
+    { type: Directive, args: [{ selector: 'ngx-datatable-column' },] }
+];
 DataTableColumnDirective.ctorParameters = () => [
     { type: ColumnChangesService }
 ];
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "name", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "prop", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "frozenLeft", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "frozenRight", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "flexGrow", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "resizeable", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "comparator", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "pipe", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "sortable", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "draggable", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "canAutoResize", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "minWidth", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "width", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "maxWidth", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "checkboxable", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "headerCheckboxable", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "headerClass", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "cellClass", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "isTreeColumn", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "treeLevelIndent", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "summaryFunc", void 0);
-__decorate([
-    Input()
-], DataTableColumnDirective.prototype, "summaryTemplate", void 0);
-__decorate([
-    Input('cellTemplate')
-], DataTableColumnDirective.prototype, "_cellTemplateInput", void 0);
-__decorate([
-    ContentChild(DataTableColumnCellDirective, { read: TemplateRef, static: true })
-], DataTableColumnDirective.prototype, "_cellTemplateQuery", void 0);
-__decorate([
-    Input('headerTemplate')
-], DataTableColumnDirective.prototype, "_headerTemplateInput", void 0);
-__decorate([
-    ContentChild(DataTableColumnHeaderDirective, { read: TemplateRef, static: true })
-], DataTableColumnDirective.prototype, "_headerTemplateQuery", void 0);
-__decorate([
-    Input('treeToggleTemplate')
-], DataTableColumnDirective.prototype, "_treeToggleTemplateInput", void 0);
-__decorate([
-    ContentChild(DataTableColumnCellTreeToggle, { read: TemplateRef, static: true })
-], DataTableColumnDirective.prototype, "_treeToggleTemplateQuery", void 0);
-DataTableColumnDirective = __decorate([
-    Directive({ selector: 'ngx-datatable-column' })
-], DataTableColumnDirective);
+DataTableColumnDirective.propDecorators = {
+    name: [{ type: Input }],
+    prop: [{ type: Input }],
+    frozenLeft: [{ type: Input }],
+    frozenRight: [{ type: Input }],
+    flexGrow: [{ type: Input }],
+    resizeable: [{ type: Input }],
+    comparator: [{ type: Input }],
+    pipe: [{ type: Input }],
+    sortable: [{ type: Input }],
+    draggable: [{ type: Input }],
+    canAutoResize: [{ type: Input }],
+    minWidth: [{ type: Input }],
+    width: [{ type: Input }],
+    maxWidth: [{ type: Input }],
+    checkboxable: [{ type: Input }],
+    headerCheckboxable: [{ type: Input }],
+    headerClass: [{ type: Input }],
+    cellClass: [{ type: Input }],
+    isTreeColumn: [{ type: Input }],
+    treeLevelIndent: [{ type: Input }],
+    summaryFunc: [{ type: Input }],
+    summaryTemplate: [{ type: Input }],
+    _cellTemplateInput: [{ type: Input, args: ['cellTemplate',] }],
+    _cellTemplateQuery: [{ type: ContentChild, args: [DataTableColumnCellDirective, { read: TemplateRef, static: true },] }],
+    _headerTemplateInput: [{ type: Input, args: ['headerTemplate',] }],
+    _headerTemplateQuery: [{ type: ContentChild, args: [DataTableColumnHeaderDirective, { read: TemplateRef, static: true },] }],
+    _treeToggleTemplateInput: [{ type: Input, args: ['treeToggleTemplate',] }],
+    _treeToggleTemplateQuery: [{ type: ContentChild, args: [DataTableColumnCellTreeToggle, { read: TemplateRef, static: true },] }]
+};
 
-let DatatableRowDetailTemplateDirective = class DatatableRowDetailTemplateDirective {
+class DatatableRowDetailTemplateDirective {
     constructor(template) {
         this.template = template;
     }
-};
+}
+DatatableRowDetailTemplateDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[ngx-datatable-row-detail-template]'
+            },] }
+];
 DatatableRowDetailTemplateDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
-DatatableRowDetailTemplateDirective = __decorate([
-    Directive({
-        selector: '[ngx-datatable-row-detail-template]'
-    })
-], DatatableRowDetailTemplateDirective);
 
-let DatatableRowDetailDirective = class DatatableRowDetailDirective {
+class DatatableRowDetailDirective {
     constructor() {
         /**
          * The detail row height is required especially
@@ -1322,58 +1208,36 @@ let DatatableRowDetailDirective = class DatatableRowDetailDirective {
             value: false
         });
     }
+}
+DatatableRowDetailDirective.decorators = [
+    { type: Directive, args: [{ selector: 'ngx-datatable-row-detail' },] }
+];
+DatatableRowDetailDirective.propDecorators = {
+    rowHeight: [{ type: Input }],
+    _templateInput: [{ type: Input, args: ['template',] }],
+    _templateQuery: [{ type: ContentChild, args: [DatatableRowDetailTemplateDirective, { read: TemplateRef, static: true },] }],
+    toggle: [{ type: Output }]
 };
-__decorate([
-    Input()
-], DatatableRowDetailDirective.prototype, "rowHeight", void 0);
-__decorate([
-    Input('template')
-], DatatableRowDetailDirective.prototype, "_templateInput", void 0);
-__decorate([
-    ContentChild(DatatableRowDetailTemplateDirective, { read: TemplateRef, static: true })
-], DatatableRowDetailDirective.prototype, "_templateQuery", void 0);
-__decorate([
-    Output()
-], DatatableRowDetailDirective.prototype, "toggle", void 0);
-DatatableRowDetailDirective = __decorate([
-    Directive({ selector: 'ngx-datatable-row-detail' })
-], DatatableRowDetailDirective);
 
-let DatatableFooterDirective = class DatatableFooterDirective {
+class DatatableFooterDirective {
     get template() {
         return this._templateInput || this._templateQuery;
     }
+}
+DatatableFooterDirective.decorators = [
+    { type: Directive, args: [{ selector: 'ngx-datatable-footer' },] }
+];
+DatatableFooterDirective.propDecorators = {
+    footerHeight: [{ type: Input }],
+    totalMessage: [{ type: Input }],
+    selectedMessage: [{ type: Input }],
+    pagerLeftArrowIcon: [{ type: Input }],
+    pagerRightArrowIcon: [{ type: Input }],
+    pagerPreviousIcon: [{ type: Input }],
+    pagerNextIcon: [{ type: Input }],
+    _templateInput: [{ type: Input, args: ['template',] }],
+    _templateQuery: [{ type: ContentChild, args: [DataTableFooterTemplateDirective, { read: TemplateRef },] }]
 };
-__decorate([
-    Input()
-], DatatableFooterDirective.prototype, "footerHeight", void 0);
-__decorate([
-    Input()
-], DatatableFooterDirective.prototype, "totalMessage", void 0);
-__decorate([
-    Input()
-], DatatableFooterDirective.prototype, "selectedMessage", void 0);
-__decorate([
-    Input()
-], DatatableFooterDirective.prototype, "pagerLeftArrowIcon", void 0);
-__decorate([
-    Input()
-], DatatableFooterDirective.prototype, "pagerRightArrowIcon", void 0);
-__decorate([
-    Input()
-], DatatableFooterDirective.prototype, "pagerPreviousIcon", void 0);
-__decorate([
-    Input()
-], DatatableFooterDirective.prototype, "pagerNextIcon", void 0);
-__decorate([
-    Input('template')
-], DatatableFooterDirective.prototype, "_templateInput", void 0);
-__decorate([
-    ContentChild(DataTableFooterTemplateDirective, { read: TemplateRef })
-], DatatableFooterDirective.prototype, "_templateQuery", void 0);
-DatatableFooterDirective = __decorate([
-    Directive({ selector: 'ngx-datatable-footer' })
-], DatatableFooterDirective);
 
 /**
  * Returns the columns by pin.
@@ -1643,7 +1507,7 @@ function translateXY(styles, x, y) {
     }
 }
 
-let DataTableBodyComponent = class DataTableBodyComponent {
+class DataTableBodyComponent {
     /**
      * Creates an instance of DataTableBodyComponent.
      */
@@ -2201,132 +2065,11 @@ let DataTableBodyComponent = class DataTableBodyComponent {
     onTreeAction(row) {
         this.treeAction.emit({ row });
     }
-};
-DataTableBodyComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "scrollbarV", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "scrollbarH", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "loadingIndicator", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "externalPaging", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "rowHeight", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "offsetX", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "emptyMessage", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "selectionType", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "selected", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "rowIdentity", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "rowDetail", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "groupHeader", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "selectCheck", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "displayCheck", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "trackByProp", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "rowClass", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "groupedRows", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "groupExpansionDefault", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "innerWidth", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "groupRowsBy", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "virtualization", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "summaryRow", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "summaryPosition", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "summaryHeight", void 0);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "pageSize", null);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "rows", null);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "columns", null);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "offset", null);
-__decorate([
-    Input()
-], DataTableBodyComponent.prototype, "rowCount", null);
-__decorate([
-    HostBinding('style.width')
-], DataTableBodyComponent.prototype, "bodyWidth", null);
-__decorate([
-    Input(),
-    HostBinding('style.height')
-], DataTableBodyComponent.prototype, "bodyHeight", null);
-__decorate([
-    Output()
-], DataTableBodyComponent.prototype, "scroll", void 0);
-__decorate([
-    Output()
-], DataTableBodyComponent.prototype, "page", void 0);
-__decorate([
-    Output()
-], DataTableBodyComponent.prototype, "activate", void 0);
-__decorate([
-    Output()
-], DataTableBodyComponent.prototype, "select", void 0);
-__decorate([
-    Output()
-], DataTableBodyComponent.prototype, "detailToggle", void 0);
-__decorate([
-    Output()
-], DataTableBodyComponent.prototype, "rowContextmenu", void 0);
-__decorate([
-    Output()
-], DataTableBodyComponent.prototype, "treeAction", void 0);
-__decorate([
-    ViewChild(ScrollerComponent)
-], DataTableBodyComponent.prototype, "scroller", void 0);
-DataTableBodyComponent = __decorate([
-    Component({
-        selector: 'datatable-body',
-        template: `
+}
+DataTableBodyComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-body',
+                template: `
     <datatable-progress *ngIf="loadingIndicator"> </datatable-progress>
     <datatable-selection
       #selector
@@ -2371,6 +2114,7 @@ DataTableBodyComponent = __decorate([
           (rowContextmenu)="rowContextmenu.emit($event)"
         >
           <datatable-body-row
+            role="row"
             *ngIf="!groupedRows; else groupedRowsTemplate"
             tabindex="-1"
             [isSelected]="selector.getRowSelected(group)"
@@ -2390,6 +2134,7 @@ DataTableBodyComponent = __decorate([
           </datatable-body-row>
           <ng-template #groupedRowsTemplate>
             <datatable-body-row
+              role="row"
               *ngFor="let row of group.value; let i = index; trackBy: rowTrackingFn"
               tabindex="-1"
               [isSelected]="selector.getRowSelected(row)"
@@ -2408,6 +2153,7 @@ DataTableBodyComponent = __decorate([
           </ng-template>
         </datatable-row-wrapper>
         <datatable-summary-row
+          role="row"
           *ngIf="summaryRow && summaryPosition === 'bottom'"
           [ngStyle]="getBottomSummaryRowStyles()"
           [rowHeight]="summaryHeight"
@@ -2421,14 +2167,58 @@ DataTableBodyComponent = __decorate([
       <div class="empty-row" *ngIf="!rows?.length && !loadingIndicator" [innerHTML]="emptyMessage"></div>
     </datatable-selection>
   `,
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        host: {
-            class: 'datatable-body'
-        }
-    })
-], DataTableBodyComponent);
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                host: {
+                    class: 'datatable-body'
+                }
+            },] }
+];
+DataTableBodyComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+DataTableBodyComponent.propDecorators = {
+    scrollbarV: [{ type: Input }],
+    scrollbarH: [{ type: Input }],
+    loadingIndicator: [{ type: Input }],
+    externalPaging: [{ type: Input }],
+    rowHeight: [{ type: Input }],
+    offsetX: [{ type: Input }],
+    emptyMessage: [{ type: Input }],
+    selectionType: [{ type: Input }],
+    selected: [{ type: Input }],
+    rowIdentity: [{ type: Input }],
+    rowDetail: [{ type: Input }],
+    groupHeader: [{ type: Input }],
+    selectCheck: [{ type: Input }],
+    displayCheck: [{ type: Input }],
+    trackByProp: [{ type: Input }],
+    rowClass: [{ type: Input }],
+    groupedRows: [{ type: Input }],
+    groupExpansionDefault: [{ type: Input }],
+    innerWidth: [{ type: Input }],
+    groupRowsBy: [{ type: Input }],
+    virtualization: [{ type: Input }],
+    summaryRow: [{ type: Input }],
+    summaryPosition: [{ type: Input }],
+    summaryHeight: [{ type: Input }],
+    pageSize: [{ type: Input }],
+    rows: [{ type: Input }],
+    columns: [{ type: Input }],
+    offset: [{ type: Input }],
+    rowCount: [{ type: Input }],
+    bodyWidth: [{ type: HostBinding, args: ['style.width',] }],
+    bodyHeight: [{ type: Input }, { type: HostBinding, args: ['style.height',] }],
+    scroll: [{ type: Output }],
+    page: [{ type: Output }],
+    activate: [{ type: Output }],
+    select: [{ type: Output }],
+    detailToggle: [{ type: Output }],
+    rowContextmenu: [{ type: Output }],
+    treeAction: [{ type: Output }],
+    scroller: [{ type: ViewChild, args: [ScrollerComponent,] }]
+};
 
-let DataTableHeaderComponent = class DataTableHeaderComponent {
+class DataTableHeaderComponent {
     constructor(cd) {
         this.cd = cd;
         this.sort = new EventEmitter();
@@ -2634,76 +2424,13 @@ let DataTableHeaderComponent = class DataTableHeaderComponent {
         }
         return styles;
     }
-};
-DataTableHeaderComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "sortAscendingIcon", void 0);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "sortDescendingIcon", void 0);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "scrollbarH", void 0);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "dealsWithGroup", void 0);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "targetMarkerTemplate", void 0);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "innerWidth", null);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "sorts", void 0);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "sortType", void 0);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "allRowsSelected", void 0);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "selectionType", void 0);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "reorderable", void 0);
-__decorate([
-    HostBinding('style.height'),
-    Input()
-], DataTableHeaderComponent.prototype, "headerHeight", null);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "columns", null);
-__decorate([
-    Input()
-], DataTableHeaderComponent.prototype, "offsetX", null);
-__decorate([
-    Output()
-], DataTableHeaderComponent.prototype, "sort", void 0);
-__decorate([
-    Output()
-], DataTableHeaderComponent.prototype, "reorder", void 0);
-__decorate([
-    Output()
-], DataTableHeaderComponent.prototype, "resize", void 0);
-__decorate([
-    Output()
-], DataTableHeaderComponent.prototype, "select", void 0);
-__decorate([
-    Output()
-], DataTableHeaderComponent.prototype, "columnContextmenu", void 0);
-__decorate([
-    HostBinding('style.width')
-], DataTableHeaderComponent.prototype, "headerWidth", null);
-DataTableHeaderComponent = __decorate([
-    Component({
-        selector: 'datatable-header',
-        template: `
+}
+DataTableHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-header',
+                template: `
     <div
+      role="row"
       orderable
       (reorder)="onColumnReordered($event)"
       (targetChanged)="onTargetChanged($event)"
@@ -2716,6 +2443,7 @@ DataTableHeaderComponent = __decorate([
         [ngStyle]="_styleByGroup[colGroup.type]"
       >
         <datatable-header-cell
+          role="columnheader"
           *ngFor="let column of colGroup.columns; trackBy: columnTrackingFn"
           resizeable
           [resizeEnabled]="column.resizeable"
@@ -2740,6 +2468,7 @@ DataTableHeaderComponent = __decorate([
           [selectionType]="selectionType"
           [sortAscendingIcon]="sortAscendingIcon"
           [sortDescendingIcon]="sortDescendingIcon"
+          [sortUnsetIcon]="sortUnsetIcon"
           [allRowsSelected]="allRowsSelected"
           (sort)="onSort($event)"
           (select)="select.emit($event)"
@@ -2749,12 +2478,38 @@ DataTableHeaderComponent = __decorate([
       </div>
     </div>
   `,
-        host: {
-            class: 'datatable-header'
-        },
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], DataTableHeaderComponent);
+                host: {
+                    class: 'datatable-header'
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+DataTableHeaderComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+DataTableHeaderComponent.propDecorators = {
+    sortAscendingIcon: [{ type: Input }],
+    sortDescendingIcon: [{ type: Input }],
+    sortUnsetIcon: [{ type: Input }],
+    scrollbarH: [{ type: Input }],
+    dealsWithGroup: [{ type: Input }],
+    targetMarkerTemplate: [{ type: Input }],
+    innerWidth: [{ type: Input }],
+    sorts: [{ type: Input }],
+    sortType: [{ type: Input }],
+    allRowsSelected: [{ type: Input }],
+    selectionType: [{ type: Input }],
+    reorderable: [{ type: Input }],
+    headerHeight: [{ type: HostBinding, args: ['style.height',] }, { type: Input }],
+    columns: [{ type: Input }],
+    offsetX: [{ type: Input }],
+    sort: [{ type: Output }],
+    reorder: [{ type: Output }],
+    resize: [{ type: Output }],
+    select: [{ type: Output }],
+    columnContextmenu: [{ type: Output }],
+    headerWidth: [{ type: HostBinding, args: ['style.width',] }]
+};
 
 /**
  * Throttle a function
@@ -3091,7 +2846,7 @@ function sortRows(rows, columns, dirs) {
     });
 }
 
-let DatatableComponent = class DatatableComponent {
+class DatatableComponent {
     constructor(scrollbarHelper, dimensionsHelper, cd, element, differs, columnChangesService, configuration) {
         this.scrollbarHelper = scrollbarHelper;
         this.dimensionsHelper = dimensionsHelper;
@@ -3172,6 +2927,7 @@ let DatatableComponent = class DatatableComponent {
         this.cssClasses = {
             sortAscending: 'datatable-icon-up',
             sortDescending: 'datatable-icon-down',
+            sortUnset: 'datatable-icon-sort-unset',
             pagerLeftArrow: 'datatable-icon-left',
             pagerRightArrow: 'datatable-icon-right',
             pagerPrevious: 'datatable-icon-prev',
@@ -3901,7 +3657,19 @@ let DatatableComponent = class DatatableComponent {
     sortInternalRows() {
         this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
     }
-};
+}
+DatatableComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ngx-datatable',
+                template: "<div role=\"table\" visibilityObserver (visible)=\"recalculate()\">\n  <datatable-header\n    role=\"rowgroup\"\n    *ngIf=\"headerHeight\"\n    [sorts]=\"sorts\"\n    [sortType]=\"sortType\"\n    [scrollbarH]=\"scrollbarH\"\n    [innerWidth]=\"_innerWidth\"\n    [offsetX]=\"_offsetX | async\"\n    [dealsWithGroup]=\"groupedRows !== undefined\"\n    [columns]=\"_internalColumns\"\n    [headerHeight]=\"headerHeight\"\n    [reorderable]=\"reorderable\"\n    [targetMarkerTemplate]=\"targetMarkerTemplate\"\n    [sortAscendingIcon]=\"cssClasses.sortAscending\"\n    [sortDescendingIcon]=\"cssClasses.sortDescending\"\n    [sortUnsetIcon]=\"cssClasses.sortUnset\"\n    [allRowsSelected]=\"allRowsSelected\"\n    [selectionType]=\"selectionType\"\n    (sort)=\"onColumnSort($event)\"\n    (resize)=\"onColumnResize($event)\"\n    (reorder)=\"onColumnReorder($event)\"\n    (select)=\"onHeaderSelect($event)\"\n    (columnContextmenu)=\"onColumnContextmenu($event)\"\n  >\n  </datatable-header>\n  <datatable-body\n    role=\"rowgroup\"\n    [groupRowsBy]=\"groupRowsBy\"\n    [groupedRows]=\"groupedRows\"\n    [rows]=\"_internalRows\"\n    [groupExpansionDefault]=\"groupExpansionDefault\"\n    [scrollbarV]=\"scrollbarV\"\n    [scrollbarH]=\"scrollbarH\"\n    [virtualization]=\"virtualization\"\n    [loadingIndicator]=\"loadingIndicator\"\n    [externalPaging]=\"externalPaging\"\n    [rowHeight]=\"rowHeight\"\n    [rowCount]=\"rowCount\"\n    [offset]=\"offset\"\n    [trackByProp]=\"trackByProp\"\n    [columns]=\"_internalColumns\"\n    [pageSize]=\"pageSize\"\n    [offsetX]=\"_offsetX | async\"\n    [rowDetail]=\"rowDetail\"\n    [groupHeader]=\"groupHeader\"\n    [selected]=\"selected\"\n    [innerWidth]=\"_innerWidth\"\n    [bodyHeight]=\"bodyHeight\"\n    [selectionType]=\"selectionType\"\n    [emptyMessage]=\"messages.emptyMessage\"\n    [rowIdentity]=\"rowIdentity\"\n    [rowClass]=\"rowClass\"\n    [selectCheck]=\"selectCheck\"\n    [displayCheck]=\"displayCheck\"\n    [summaryRow]=\"summaryRow\"\n    [summaryHeight]=\"summaryHeight\"\n    [summaryPosition]=\"summaryPosition\"\n    (page)=\"onBodyPage($event)\"\n    (activate)=\"activate.emit($event)\"\n    (rowContextmenu)=\"onRowContextmenu($event)\"\n    (select)=\"onBodySelect($event)\"\n    (scroll)=\"onBodyScroll($event)\"\n    (treeAction)=\"onTreeAction($event)\"\n  >\n  </datatable-body>\n  <datatable-footer\n    *ngIf=\"footerHeight\"\n    [rowCount]=\"rowCount\"\n    [pageSize]=\"pageSize\"\n    [offset]=\"offset\"\n    [footerHeight]=\"footerHeight\"\n    [footerTemplate]=\"footer\"\n    [totalMessage]=\"messages.totalMessage\"\n    [pagerLeftArrowIcon]=\"cssClasses.pagerLeftArrow\"\n    [pagerRightArrowIcon]=\"cssClasses.pagerRightArrow\"\n    [pagerPreviousIcon]=\"cssClasses.pagerPrevious\"\n    [selectedCount]=\"selected.length\"\n    [selectedMessage]=\"!!selectionType && messages.selectedMessage\"\n    [pagerNextIcon]=\"cssClasses.pagerNext\"\n    (page)=\"onFooterPage($event)\"\n  >\n  </datatable-footer>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                host: {
+                    class: 'ngx-datatable'
+                },
+                styles: [".ngx-datatable{display:block;overflow:hidden;justify-content:center;position:relative;transform:translateZ(0)}.ngx-datatable [hidden]{display:none!important}.ngx-datatable *,.ngx-datatable :after,.ngx-datatable :before{box-sizing:border-box}.ngx-datatable.scroll-vertical .datatable-body{overflow-y:auto}.ngx-datatable.scroll-vertical.virtualized .datatable-body .datatable-row-wrapper{position:absolute}.ngx-datatable.scroll-horz .datatable-body{overflow-x:auto;-webkit-overflow-scrolling:touch}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner{white-space:nowrap}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-datatable.fixed-row .datatable-scroll,.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row{white-space:nowrap}.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-cell,.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-group-cell{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ngx-datatable .datatable-body-row,.ngx-datatable .datatable-header-inner,.ngx-datatable .datatable-row-center{display:flex;flex-direction:row;-o-flex-flow:row;flex-flow:row}.ngx-datatable .datatable-body-cell,.ngx-datatable .datatable-header-cell{overflow-x:hidden;vertical-align:top;display:inline-block;line-height:1.625}.ngx-datatable .datatable-body-cell:focus,.ngx-datatable .datatable-header-cell:focus{outline:none}.ngx-datatable .datatable-row-left,.ngx-datatable .datatable-row-right{z-index:9}.ngx-datatable .datatable-row-center,.ngx-datatable .datatable-row-group,.ngx-datatable .datatable-row-left,.ngx-datatable .datatable-row-right{position:relative}.ngx-datatable .datatable-header{display:block;overflow:hidden}.ngx-datatable .datatable-header .datatable-header-inner{align-items:stretch;-webkit-align-items:stretch}.ngx-datatable .datatable-header .datatable-header-cell{position:relative;display:inline-block}.ngx-datatable .datatable-header .datatable-header-cell.sortable .datatable-header-cell-wrapper{cursor:pointer}.ngx-datatable .datatable-header .datatable-header-cell.longpress .datatable-header-cell-wrapper{cursor:move}.ngx-datatable .datatable-header .datatable-header-cell .sort-btn{line-height:100%;vertical-align:middle;display:inline-block;cursor:pointer}.ngx-datatable .datatable-header .datatable-header-cell .resize-handle,.ngx-datatable .datatable-header .datatable-header-cell .resize-handle--not-resizable{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;padding:0 4px;visibility:hidden}.ngx-datatable .datatable-header .datatable-header-cell .resize-handle{cursor:ew-resize}.ngx-datatable .datatable-header .datatable-header-cell.resizeable:hover .resize-handle,.ngx-datatable .datatable-header .datatable-header-cell:hover .resize-handle--not-resizable{visibility:visible}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker{position:absolute;top:0;bottom:0}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromLeft{right:0}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromRight{left:0}.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap{height:inherit}.ngx-datatable .datatable-body{position:relative;z-index:10;display:block}.ngx-datatable .datatable-body .datatable-scroll{display:inline-block}.ngx-datatable .datatable-body .datatable-row-detail{overflow-y:hidden}.ngx-datatable .datatable-body .datatable-row-wrapper{display:flex;flex-direction:column}.ngx-datatable .datatable-body .datatable-body-row{outline:none}.ngx-datatable .datatable-body .datatable-body-row>div{display:flex}.ngx-datatable .datatable-footer{display:block;width:100%;overflow:auto}.ngx-datatable .datatable-footer .datatable-footer-inner{display:flex;align-items:center;width:100%}.ngx-datatable .datatable-footer .selected-count .page-count{flex:1 1 40%}.ngx-datatable .datatable-footer .selected-count .datatable-pager{flex:1 1 60%}.ngx-datatable .datatable-footer .page-count{flex:1 1 20%}.ngx-datatable .datatable-footer .datatable-pager{flex:1 1 80%;text-align:right}.ngx-datatable .datatable-footer .datatable-pager .pager,.ngx-datatable .datatable-footer .datatable-pager .pager li{padding:0;margin:0;display:inline-block;list-style:none}.ngx-datatable .datatable-footer .datatable-pager .pager li,.ngx-datatable .datatable-footer .datatable-pager .pager li a{outline:none}.ngx-datatable .datatable-footer .datatable-pager .pager li a{cursor:pointer;display:inline-block}.ngx-datatable .datatable-footer .datatable-pager .pager li.disabled a{cursor:not-allowed}"]
+            },] }
+];
 DatatableComponent.ctorParameters = () => [
     { type: ScrollbarHelper, decorators: [{ type: SkipSelf }] },
     { type: DimensionsHelper, decorators: [{ type: SkipSelf }] },
@@ -3911,219 +3679,78 @@ DatatableComponent.ctorParameters = () => [
     { type: ColumnChangesService },
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: ['configuration',] }] }
 ];
+DatatableComponent.propDecorators = {
+    targetMarkerTemplate: [{ type: Input }],
+    rows: [{ type: Input }],
+    groupRowsBy: [{ type: Input }],
+    groupedRows: [{ type: Input }],
+    columns: [{ type: Input }],
+    selected: [{ type: Input }],
+    scrollbarV: [{ type: Input }],
+    scrollbarH: [{ type: Input }],
+    rowHeight: [{ type: Input }],
+    columnMode: [{ type: Input }],
+    headerHeight: [{ type: Input }],
+    footerHeight: [{ type: Input }],
+    externalPaging: [{ type: Input }],
+    externalSorting: [{ type: Input }],
+    limit: [{ type: Input }],
+    count: [{ type: Input }],
+    offset: [{ type: Input }],
+    loadingIndicator: [{ type: Input }],
+    selectionType: [{ type: Input }],
+    reorderable: [{ type: Input }],
+    swapColumns: [{ type: Input }],
+    sortType: [{ type: Input }],
+    sorts: [{ type: Input }],
+    cssClasses: [{ type: Input }],
+    messages: [{ type: Input }],
+    rowClass: [{ type: Input }],
+    selectCheck: [{ type: Input }],
+    displayCheck: [{ type: Input }],
+    groupExpansionDefault: [{ type: Input }],
+    trackByProp: [{ type: Input }],
+    selectAllRowsOnPage: [{ type: Input }],
+    virtualization: [{ type: Input }],
+    treeFromRelation: [{ type: Input }],
+    treeToRelation: [{ type: Input }],
+    summaryRow: [{ type: Input }],
+    summaryHeight: [{ type: Input }],
+    summaryPosition: [{ type: Input }],
+    scroll: [{ type: Output }],
+    activate: [{ type: Output }],
+    select: [{ type: Output }],
+    sort: [{ type: Output }],
+    page: [{ type: Output }],
+    reorder: [{ type: Output }],
+    resize: [{ type: Output }],
+    tableContextmenu: [{ type: Output }],
+    treeAction: [{ type: Output }],
+    isFixedHeader: [{ type: HostBinding, args: ['class.fixed-header',] }],
+    isFixedRow: [{ type: HostBinding, args: ['class.fixed-row',] }],
+    isVertScroll: [{ type: HostBinding, args: ['class.scroll-vertical',] }],
+    isVirtualized: [{ type: HostBinding, args: ['class.virtualized',] }],
+    isHorScroll: [{ type: HostBinding, args: ['class.scroll-horz',] }],
+    isSelectable: [{ type: HostBinding, args: ['class.selectable',] }],
+    isCheckboxSelection: [{ type: HostBinding, args: ['class.checkbox-selection',] }],
+    isCellSelection: [{ type: HostBinding, args: ['class.cell-selection',] }],
+    isSingleSelection: [{ type: HostBinding, args: ['class.single-selection',] }],
+    isMultiSelection: [{ type: HostBinding, args: ['class.multi-selection',] }],
+    isMultiClickSelection: [{ type: HostBinding, args: ['class.multi-click-selection',] }],
+    columnTemplates: [{ type: ContentChildren, args: [DataTableColumnDirective,] }],
+    rowDetail: [{ type: ContentChild, args: [DatatableRowDetailDirective,] }],
+    groupHeader: [{ type: ContentChild, args: [DatatableGroupHeaderDirective,] }],
+    footer: [{ type: ContentChild, args: [DatatableFooterDirective,] }],
+    bodyComponent: [{ type: ViewChild, args: [DataTableBodyComponent,] }],
+    headerComponent: [{ type: ViewChild, args: [DataTableHeaderComponent,] }],
+    rowIdentity: [{ type: Input }],
+    onWindowResize: [{ type: HostListener, args: ['window:resize',] }]
+};
 __decorate([
-    Input()
-], DatatableComponent.prototype, "targetMarkerTemplate", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "rows", null);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "groupRowsBy", null);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "groupedRows", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "columns", null);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "selected", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "scrollbarV", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "scrollbarH", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "rowHeight", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "columnMode", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "headerHeight", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "footerHeight", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "externalPaging", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "externalSorting", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "limit", null);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "count", null);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "offset", null);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "loadingIndicator", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "selectionType", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "reorderable", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "swapColumns", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "sortType", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "sorts", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "cssClasses", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "messages", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "rowClass", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "selectCheck", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "displayCheck", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "groupExpansionDefault", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "trackByProp", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "selectAllRowsOnPage", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "virtualization", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "treeFromRelation", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "treeToRelation", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "summaryRow", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "summaryHeight", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "summaryPosition", void 0);
-__decorate([
-    Output()
-], DatatableComponent.prototype, "scroll", void 0);
-__decorate([
-    Output()
-], DatatableComponent.prototype, "activate", void 0);
-__decorate([
-    Output()
-], DatatableComponent.prototype, "select", void 0);
-__decorate([
-    Output()
-], DatatableComponent.prototype, "sort", void 0);
-__decorate([
-    Output()
-], DatatableComponent.prototype, "page", void 0);
-__decorate([
-    Output()
-], DatatableComponent.prototype, "reorder", void 0);
-__decorate([
-    Output()
-], DatatableComponent.prototype, "resize", void 0);
-__decorate([
-    Output()
-], DatatableComponent.prototype, "tableContextmenu", void 0);
-__decorate([
-    Output()
-], DatatableComponent.prototype, "treeAction", void 0);
-__decorate([
-    HostBinding('class.fixed-header')
-], DatatableComponent.prototype, "isFixedHeader", null);
-__decorate([
-    HostBinding('class.fixed-row')
-], DatatableComponent.prototype, "isFixedRow", null);
-__decorate([
-    HostBinding('class.scroll-vertical')
-], DatatableComponent.prototype, "isVertScroll", null);
-__decorate([
-    HostBinding('class.virtualized')
-], DatatableComponent.prototype, "isVirtualized", null);
-__decorate([
-    HostBinding('class.scroll-horz')
-], DatatableComponent.prototype, "isHorScroll", null);
-__decorate([
-    HostBinding('class.selectable')
-], DatatableComponent.prototype, "isSelectable", null);
-__decorate([
-    HostBinding('class.checkbox-selection')
-], DatatableComponent.prototype, "isCheckboxSelection", null);
-__decorate([
-    HostBinding('class.cell-selection')
-], DatatableComponent.prototype, "isCellSelection", null);
-__decorate([
-    HostBinding('class.single-selection')
-], DatatableComponent.prototype, "isSingleSelection", null);
-__decorate([
-    HostBinding('class.multi-selection')
-], DatatableComponent.prototype, "isMultiSelection", null);
-__decorate([
-    HostBinding('class.multi-click-selection')
-], DatatableComponent.prototype, "isMultiClickSelection", null);
-__decorate([
-    ContentChildren(DataTableColumnDirective)
-], DatatableComponent.prototype, "columnTemplates", null);
-__decorate([
-    ContentChild(DatatableRowDetailDirective)
-], DatatableComponent.prototype, "rowDetail", void 0);
-__decorate([
-    ContentChild(DatatableGroupHeaderDirective)
-], DatatableComponent.prototype, "groupHeader", void 0);
-__decorate([
-    ContentChild(DatatableFooterDirective)
-], DatatableComponent.prototype, "footer", void 0);
-__decorate([
-    ViewChild(DataTableBodyComponent)
-], DatatableComponent.prototype, "bodyComponent", void 0);
-__decorate([
-    ViewChild(DataTableHeaderComponent)
-], DatatableComponent.prototype, "headerComponent", void 0);
-__decorate([
-    Input()
-], DatatableComponent.prototype, "rowIdentity", void 0);
-__decorate([
-    HostListener('window:resize'),
     throttleable(5)
 ], DatatableComponent.prototype, "onWindowResize", null);
-DatatableComponent = __decorate([
-    Component({
-        selector: 'ngx-datatable',
-        template: "<div visibilityObserver (visible)=\"recalculate()\">\n  <datatable-header\n    *ngIf=\"headerHeight\"\n    [sorts]=\"sorts\"\n    [sortType]=\"sortType\"\n    [scrollbarH]=\"scrollbarH\"\n    [innerWidth]=\"_innerWidth\"\n    [offsetX]=\"_offsetX | async\"\n    [dealsWithGroup]=\"groupedRows !== undefined\"\n    [columns]=\"_internalColumns\"\n    [headerHeight]=\"headerHeight\"\n    [reorderable]=\"reorderable\"\n    [targetMarkerTemplate]=\"targetMarkerTemplate\"\n    [sortAscendingIcon]=\"cssClasses.sortAscending\"\n    [sortDescendingIcon]=\"cssClasses.sortDescending\"\n    [allRowsSelected]=\"allRowsSelected\"\n    [selectionType]=\"selectionType\"\n    (sort)=\"onColumnSort($event)\"\n    (resize)=\"onColumnResize($event)\"\n    (reorder)=\"onColumnReorder($event)\"\n    (select)=\"onHeaderSelect($event)\"\n    (columnContextmenu)=\"onColumnContextmenu($event)\"\n  >\n  </datatable-header>\n  <datatable-body\n    [groupRowsBy]=\"groupRowsBy\"\n    [groupedRows]=\"groupedRows\"\n    [rows]=\"_internalRows\"\n    [groupExpansionDefault]=\"groupExpansionDefault\"\n    [scrollbarV]=\"scrollbarV\"\n    [scrollbarH]=\"scrollbarH\"\n    [virtualization]=\"virtualization\"\n    [loadingIndicator]=\"loadingIndicator\"\n    [externalPaging]=\"externalPaging\"\n    [rowHeight]=\"rowHeight\"\n    [rowCount]=\"rowCount\"\n    [offset]=\"offset\"\n    [trackByProp]=\"trackByProp\"\n    [columns]=\"_internalColumns\"\n    [pageSize]=\"pageSize\"\n    [offsetX]=\"_offsetX | async\"\n    [rowDetail]=\"rowDetail\"\n    [groupHeader]=\"groupHeader\"\n    [selected]=\"selected\"\n    [innerWidth]=\"_innerWidth\"\n    [bodyHeight]=\"bodyHeight\"\n    [selectionType]=\"selectionType\"\n    [emptyMessage]=\"messages.emptyMessage\"\n    [rowIdentity]=\"rowIdentity\"\n    [rowClass]=\"rowClass\"\n    [selectCheck]=\"selectCheck\"\n    [displayCheck]=\"displayCheck\"\n    [summaryRow]=\"summaryRow\"\n    [summaryHeight]=\"summaryHeight\"\n    [summaryPosition]=\"summaryPosition\"\n    (page)=\"onBodyPage($event)\"\n    (activate)=\"activate.emit($event)\"\n    (rowContextmenu)=\"onRowContextmenu($event)\"\n    (select)=\"onBodySelect($event)\"\n    (scroll)=\"onBodyScroll($event)\"\n    (treeAction)=\"onTreeAction($event)\"\n  >\n  </datatable-body>\n  <datatable-footer\n    *ngIf=\"footerHeight\"\n    [rowCount]=\"rowCount\"\n    [pageSize]=\"pageSize\"\n    [offset]=\"offset\"\n    [footerHeight]=\"footerHeight\"\n    [footerTemplate]=\"footer\"\n    [totalMessage]=\"messages.totalMessage\"\n    [pagerLeftArrowIcon]=\"cssClasses.pagerLeftArrow\"\n    [pagerRightArrowIcon]=\"cssClasses.pagerRightArrow\"\n    [pagerPreviousIcon]=\"cssClasses.pagerPrevious\"\n    [selectedCount]=\"selected.length\"\n    [selectedMessage]=\"!!selectionType && messages.selectedMessage\"\n    [pagerNextIcon]=\"cssClasses.pagerNext\"\n    (page)=\"onFooterPage($event)\"\n  >\n  </datatable-footer>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        encapsulation: ViewEncapsulation.None,
-        host: {
-            class: 'ngx-datatable'
-        },
-        styles: [".ngx-datatable{display:block;overflow:hidden;justify-content:center;position:relative;transform:translate3d(0,0,0)}.ngx-datatable [hidden]{display:none!important}.ngx-datatable *,.ngx-datatable :after,.ngx-datatable :before{box-sizing:border-box}.ngx-datatable.scroll-vertical .datatable-body{overflow-y:auto}.ngx-datatable.scroll-vertical.virtualized .datatable-body .datatable-row-wrapper{position:absolute}.ngx-datatable.scroll-horz .datatable-body{overflow-x:auto;-webkit-overflow-scrolling:touch}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner{white-space:nowrap}.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-datatable.fixed-row .datatable-scroll,.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row{white-space:nowrap}.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-cell,.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-group-cell{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ngx-datatable .datatable-body-row,.ngx-datatable .datatable-header-inner,.ngx-datatable .datatable-row-center{display:flex;flex-direction:row;-o-flex-flow:row;flex-flow:row}.ngx-datatable .datatable-body-cell,.ngx-datatable .datatable-header-cell{overflow-x:hidden;vertical-align:top;display:inline-block;line-height:1.625}.ngx-datatable .datatable-body-cell:focus,.ngx-datatable .datatable-header-cell:focus{outline:0}.ngx-datatable .datatable-row-left,.ngx-datatable .datatable-row-right{z-index:9}.ngx-datatable .datatable-row-center,.ngx-datatable .datatable-row-group,.ngx-datatable .datatable-row-left,.ngx-datatable .datatable-row-right{position:relative}.ngx-datatable .datatable-header{display:block;overflow:hidden}.ngx-datatable .datatable-header .datatable-header-inner{align-items:stretch;-webkit-align-items:stretch}.ngx-datatable .datatable-header .datatable-header-cell{position:relative;display:inline-block}.ngx-datatable .datatable-header .datatable-header-cell.sortable .datatable-header-cell-wrapper{cursor:pointer}.ngx-datatable .datatable-header .datatable-header-cell.longpress .datatable-header-cell-wrapper{cursor:move}.ngx-datatable .datatable-header .datatable-header-cell .sort-btn{line-height:100%;vertical-align:middle;display:inline-block;cursor:pointer}.ngx-datatable .datatable-header .datatable-header-cell .resize-handle,.ngx-datatable .datatable-header .datatable-header-cell .resize-handle--not-resizable{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;padding:0 4px;visibility:hidden}.ngx-datatable .datatable-header .datatable-header-cell .resize-handle{cursor:ew-resize}.ngx-datatable .datatable-header .datatable-header-cell.resizeable:hover .resize-handle,.ngx-datatable .datatable-header .datatable-header-cell:hover .resize-handle--not-resizable{visibility:visible}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker{position:absolute;top:0;bottom:0}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromLeft{right:0}.ngx-datatable .datatable-header .datatable-header-cell .targetMarker.dragFromRight{left:0}.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap{height:inherit}.ngx-datatable .datatable-body{position:relative;z-index:10;display:block}.ngx-datatable .datatable-body .datatable-scroll{display:inline-block}.ngx-datatable .datatable-body .datatable-row-detail{overflow-y:hidden}.ngx-datatable .datatable-body .datatable-row-wrapper{display:flex;flex-direction:column}.ngx-datatable .datatable-body .datatable-body-row{outline:0}.ngx-datatable .datatable-body .datatable-body-row>div{display:flex}.ngx-datatable .datatable-footer{display:block;width:100%;overflow:auto}.ngx-datatable .datatable-footer .datatable-footer-inner{display:flex;align-items:center;width:100%}.ngx-datatable .datatable-footer .selected-count .page-count{flex:1 1 40%}.ngx-datatable .datatable-footer .selected-count .datatable-pager{flex:1 1 60%}.ngx-datatable .datatable-footer .page-count{flex:1 1 20%}.ngx-datatable .datatable-footer .datatable-pager{flex:1 1 80%;text-align:right}.ngx-datatable .datatable-footer .datatable-pager .pager,.ngx-datatable .datatable-footer .datatable-pager .pager li{padding:0;margin:0;display:inline-block;list-style:none}.ngx-datatable .datatable-footer .datatable-pager .pager li,.ngx-datatable .datatable-footer .datatable-pager .pager li a{outline:0}.ngx-datatable .datatable-footer .datatable-pager .pager li a{cursor:pointer;display:inline-block}.ngx-datatable .datatable-footer .datatable-pager .pager li.disabled a{cursor:not-allowed}"]
-    }),
-    __param(0, SkipSelf()),
-    __param(1, SkipSelf()),
-    __param(6, Optional()), __param(6, Inject('configuration'))
-], DatatableComponent);
 
-let DataTableHeaderCellComponent = class DataTableHeaderCellComponent {
+class DataTableHeaderCellComponent {
     constructor(cd) {
         this.cd = cd;
         this.sort = new EventEmitter();
@@ -4215,6 +3842,9 @@ let DataTableHeaderCellComponent = class DataTableHeaderCellComponent {
     onContextmenu($event) {
         this.columnContextmenu.emit({ event: $event, column: this.column });
     }
+    ngOnInit() {
+        this.sortClass = this.calcSortClass(this.sortDir);
+    }
     calcSortDir(sorts) {
         if (sorts && this.column) {
             const sort = sorts.find((s) => {
@@ -4235,6 +3865,8 @@ let DataTableHeaderCellComponent = class DataTableHeaderCellComponent {
         });
     }
     calcSortClass(sortDir) {
+        if (!this.cellContext.column.sortable)
+            return;
         if (sortDir === SortDirection.asc) {
             return `sort-btn sort-asc ${this.sortAscendingIcon}`;
         }
@@ -4242,78 +3874,14 @@ let DataTableHeaderCellComponent = class DataTableHeaderCellComponent {
             return `sort-btn sort-desc ${this.sortDescendingIcon}`;
         }
         else {
-            return `sort-btn`;
+            return `sort-btn ${this.sortUnsetIcon}`;
         }
     }
-};
-DataTableHeaderCellComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input()
-], DataTableHeaderCellComponent.prototype, "sortType", void 0);
-__decorate([
-    Input()
-], DataTableHeaderCellComponent.prototype, "sortAscendingIcon", void 0);
-__decorate([
-    Input()
-], DataTableHeaderCellComponent.prototype, "sortDescendingIcon", void 0);
-__decorate([
-    Input()
-], DataTableHeaderCellComponent.prototype, "isTarget", void 0);
-__decorate([
-    Input()
-], DataTableHeaderCellComponent.prototype, "targetMarkerTemplate", void 0);
-__decorate([
-    Input()
-], DataTableHeaderCellComponent.prototype, "targetMarkerContext", void 0);
-__decorate([
-    Input()
-], DataTableHeaderCellComponent.prototype, "allRowsSelected", null);
-__decorate([
-    Input()
-], DataTableHeaderCellComponent.prototype, "selectionType", void 0);
-__decorate([
-    Input()
-], DataTableHeaderCellComponent.prototype, "column", null);
-__decorate([
-    HostBinding('style.height.px'),
-    Input()
-], DataTableHeaderCellComponent.prototype, "headerHeight", void 0);
-__decorate([
-    Input()
-], DataTableHeaderCellComponent.prototype, "sorts", null);
-__decorate([
-    Output()
-], DataTableHeaderCellComponent.prototype, "sort", void 0);
-__decorate([
-    Output()
-], DataTableHeaderCellComponent.prototype, "select", void 0);
-__decorate([
-    Output()
-], DataTableHeaderCellComponent.prototype, "columnContextmenu", void 0);
-__decorate([
-    HostBinding('class')
-], DataTableHeaderCellComponent.prototype, "columnCssClasses", null);
-__decorate([
-    HostBinding('attr.title')
-], DataTableHeaderCellComponent.prototype, "name", null);
-__decorate([
-    HostBinding('style.minWidth.px')
-], DataTableHeaderCellComponent.prototype, "minWidth", null);
-__decorate([
-    HostBinding('style.maxWidth.px')
-], DataTableHeaderCellComponent.prototype, "maxWidth", null);
-__decorate([
-    HostBinding('style.width.px')
-], DataTableHeaderCellComponent.prototype, "width", null);
-__decorate([
-    HostListener('contextmenu', ['$event'])
-], DataTableHeaderCellComponent.prototype, "onContextmenu", null);
-DataTableHeaderCellComponent = __decorate([
-    Component({
-        selector: 'datatable-header-cell',
-        template: `
+}
+DataTableHeaderCellComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-header-cell',
+                template: `
     <div class="datatable-header-cell-template-wrap">
       <ng-template
         *ngIf="isTarget"
@@ -4336,14 +3904,40 @@ DataTableHeaderCellComponent = __decorate([
       <span (click)="onSort()" [class]="sortClass"> </span>
     </div>
   `,
-        host: {
-            class: 'datatable-header-cell'
-        },
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], DataTableHeaderCellComponent);
+                host: {
+                    class: 'datatable-header-cell'
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+DataTableHeaderCellComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+DataTableHeaderCellComponent.propDecorators = {
+    sortType: [{ type: Input }],
+    sortAscendingIcon: [{ type: Input }],
+    sortDescendingIcon: [{ type: Input }],
+    sortUnsetIcon: [{ type: Input }],
+    isTarget: [{ type: Input }],
+    targetMarkerTemplate: [{ type: Input }],
+    targetMarkerContext: [{ type: Input }],
+    allRowsSelected: [{ type: Input }],
+    selectionType: [{ type: Input }],
+    column: [{ type: Input }],
+    headerHeight: [{ type: HostBinding, args: ['style.height.px',] }, { type: Input }],
+    sorts: [{ type: Input }],
+    sort: [{ type: Output }],
+    select: [{ type: Output }],
+    columnContextmenu: [{ type: Output }],
+    columnCssClasses: [{ type: HostBinding, args: ['class',] }],
+    name: [{ type: HostBinding, args: ['attr.title',] }],
+    minWidth: [{ type: HostBinding, args: ['style.minWidth.px',] }],
+    maxWidth: [{ type: HostBinding, args: ['style.maxWidth.px',] }],
+    width: [{ type: HostBinding, args: ['style.width.px',] }],
+    onContextmenu: [{ type: HostListener, args: ['contextmenu', ['$event'],] }]
+};
 
-let DataTableFooterComponent = class DataTableFooterComponent {
+class DataTableFooterComponent {
     constructor() {
         this.selectedCount = 0;
         this.page = new EventEmitter();
@@ -4354,50 +3948,11 @@ let DataTableFooterComponent = class DataTableFooterComponent {
     get curPage() {
         return this.offset + 1;
     }
-};
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "footerHeight", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "rowCount", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "pageSize", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "offset", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "pagerLeftArrowIcon", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "pagerRightArrowIcon", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "pagerPreviousIcon", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "pagerNextIcon", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "totalMessage", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "footerTemplate", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "selectedCount", void 0);
-__decorate([
-    Input()
-], DataTableFooterComponent.prototype, "selectedMessage", void 0);
-__decorate([
-    Output()
-], DataTableFooterComponent.prototype, "page", void 0);
-DataTableFooterComponent = __decorate([
-    Component({
-        selector: 'datatable-footer',
-        template: `
+}
+DataTableFooterComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-footer',
+                template: `
     <div
       class="datatable-footer-inner"
       [ngClass]="{ 'selected-count': selectedMessage }"
@@ -4434,14 +3989,29 @@ DataTableFooterComponent = __decorate([
       </datatable-pager>
     </div>
   `,
-        host: {
-            class: 'datatable-footer'
-        },
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], DataTableFooterComponent);
+                host: {
+                    class: 'datatable-footer'
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+DataTableFooterComponent.propDecorators = {
+    footerHeight: [{ type: Input }],
+    rowCount: [{ type: Input }],
+    pageSize: [{ type: Input }],
+    offset: [{ type: Input }],
+    pagerLeftArrowIcon: [{ type: Input }],
+    pagerRightArrowIcon: [{ type: Input }],
+    pagerPreviousIcon: [{ type: Input }],
+    pagerNextIcon: [{ type: Input }],
+    totalMessage: [{ type: Input }],
+    footerTemplate: [{ type: Input }],
+    selectedCount: [{ type: Input }],
+    selectedMessage: [{ type: Input }],
+    page: [{ type: Output }]
+};
 
-let DataTablePagerComponent = class DataTablePagerComponent {
+class DataTablePagerComponent {
     constructor() {
         this.change = new EventEmitter();
         this._count = 0;
@@ -4520,35 +4090,11 @@ let DataTablePagerComponent = class DataTablePagerComponent {
         }
         return pages;
     }
-};
-__decorate([
-    Input()
-], DataTablePagerComponent.prototype, "pagerLeftArrowIcon", void 0);
-__decorate([
-    Input()
-], DataTablePagerComponent.prototype, "pagerRightArrowIcon", void 0);
-__decorate([
-    Input()
-], DataTablePagerComponent.prototype, "pagerPreviousIcon", void 0);
-__decorate([
-    Input()
-], DataTablePagerComponent.prototype, "pagerNextIcon", void 0);
-__decorate([
-    Input()
-], DataTablePagerComponent.prototype, "size", null);
-__decorate([
-    Input()
-], DataTablePagerComponent.prototype, "count", null);
-__decorate([
-    Input()
-], DataTablePagerComponent.prototype, "page", null);
-__decorate([
-    Output()
-], DataTablePagerComponent.prototype, "change", void 0);
-DataTablePagerComponent = __decorate([
-    Component({
-        selector: 'datatable-pager',
-        template: `
+}
+DataTablePagerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-pager',
+                template: `
     <ul class="pager">
       <li [class.disabled]="!canPrevious()">
         <a role="button" aria-label="go to first page" href="javascript:void(0)" (click)="selectPage(1)">
@@ -4583,28 +4129,38 @@ DataTablePagerComponent = __decorate([
       </li>
     </ul>
   `,
-        host: {
-            class: 'datatable-pager'
-        },
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], DataTablePagerComponent);
-
-let ProgressBarComponent = class ProgressBarComponent {
+                host: {
+                    class: 'datatable-pager'
+                },
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+DataTablePagerComponent.propDecorators = {
+    pagerLeftArrowIcon: [{ type: Input }],
+    pagerRightArrowIcon: [{ type: Input }],
+    pagerPreviousIcon: [{ type: Input }],
+    pagerNextIcon: [{ type: Input }],
+    size: [{ type: Input }],
+    count: [{ type: Input }],
+    page: [{ type: Input }],
+    change: [{ type: Output }]
 };
-ProgressBarComponent = __decorate([
-    Component({
-        selector: 'datatable-progress',
-        template: `
+
+class ProgressBarComponent {
+}
+ProgressBarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-progress',
+                template: `
     <div class="progress-linear" role="progressbar">
       <div class="container">
         <div class="bar"></div>
       </div>
     </div>
   `,
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], ProgressBarComponent);
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
 
 var Keys;
 (function (Keys) {
@@ -4616,7 +4172,7 @@ var Keys;
     Keys[Keys["right"] = 39] = "right";
 })(Keys || (Keys = {}));
 
-let DataTableBodyRowComponent = class DataTableBodyRowComponent {
+class DataTableBodyRowComponent {
     constructor(differs, scrollbarHelper, cd, element) {
         this.differs = differs;
         this.scrollbarHelper = scrollbarHelper;
@@ -4765,79 +4321,19 @@ let DataTableBodyRowComponent = class DataTableBodyRowComponent {
     onTreeAction() {
         this.treeAction.emit();
     }
-};
-DataTableBodyRowComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ScrollbarHelper, decorators: [{ type: SkipSelf }] },
-    { type: ChangeDetectorRef },
-    { type: ElementRef }
-];
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "columns", null);
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "innerWidth", null);
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "expanded", void 0);
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "rowClass", void 0);
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "row", void 0);
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "group", void 0);
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "isSelected", void 0);
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "rowIndex", void 0);
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "displayCheck", void 0);
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "treeStatus", void 0);
-__decorate([
-    Input()
-], DataTableBodyRowComponent.prototype, "offsetX", null);
-__decorate([
-    HostBinding('class')
-], DataTableBodyRowComponent.prototype, "cssClass", null);
-__decorate([
-    HostBinding('style.height.px'),
-    Input()
-], DataTableBodyRowComponent.prototype, "rowHeight", void 0);
-__decorate([
-    HostBinding('style.width.px')
-], DataTableBodyRowComponent.prototype, "columnsTotalWidths", null);
-__decorate([
-    Output()
-], DataTableBodyRowComponent.prototype, "activate", void 0);
-__decorate([
-    Output()
-], DataTableBodyRowComponent.prototype, "treeAction", void 0);
-__decorate([
-    HostListener('keydown', ['$event'])
-], DataTableBodyRowComponent.prototype, "onKeyDown", null);
-__decorate([
-    HostListener('mouseenter', ['$event'])
-], DataTableBodyRowComponent.prototype, "onMouseenter", null);
-DataTableBodyRowComponent = __decorate([
-    Component({
-        selector: 'datatable-body-row',
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        template: `
+}
+DataTableBodyRowComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-body-row',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
     <div
       *ngFor="let colGroup of _columnsByPin; let i = index; trackBy: trackByGroups"
       class="datatable-row-{{ colGroup.type }} datatable-row-group"
       [ngStyle]="_groupStyles[colGroup.type]"
     >
       <datatable-body-cell
+        role="cell"
         *ngFor="let column of colGroup.columns; let ii = index; trackBy: columnTrackingFn"
         tabindex="-1"
         [row]="row"
@@ -4855,15 +4351,41 @@ DataTableBodyRowComponent = __decorate([
       </datatable-body-cell>
     </div>
   `
-    }),
-    __param(1, SkipSelf())
-], DataTableBodyRowComponent);
+            },] }
+];
+DataTableBodyRowComponent.ctorParameters = () => [
+    { type: KeyValueDiffers },
+    { type: ScrollbarHelper, decorators: [{ type: SkipSelf }] },
+    { type: ChangeDetectorRef },
+    { type: ElementRef }
+];
+DataTableBodyRowComponent.propDecorators = {
+    columns: [{ type: Input }],
+    innerWidth: [{ type: Input }],
+    expanded: [{ type: Input }],
+    rowClass: [{ type: Input }],
+    row: [{ type: Input }],
+    group: [{ type: Input }],
+    isSelected: [{ type: Input }],
+    rowIndex: [{ type: Input }],
+    displayCheck: [{ type: Input }],
+    treeStatus: [{ type: Input }],
+    offsetX: [{ type: Input }],
+    cssClass: [{ type: HostBinding, args: ['class',] }],
+    rowHeight: [{ type: HostBinding, args: ['style.height.px',] }, { type: Input }],
+    columnsTotalWidths: [{ type: HostBinding, args: ['style.width.px',] }],
+    activate: [{ type: Output }],
+    treeAction: [{ type: Output }],
+    onKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }],
+    onMouseenter: [{ type: HostListener, args: ['mouseenter', ['$event'],] }]
+};
 
-let DataTableRowWrapperComponent = class DataTableRowWrapperComponent {
+class DataTableRowWrapperComponent {
     constructor(cd, differs) {
         this.cd = cd;
         this.differs = differs;
         this.rowContextmenu = new EventEmitter(false);
+        this._expanded = false;
         this.groupContext = {
             group: this.row,
             expanded: this.expanded,
@@ -4874,7 +4396,6 @@ let DataTableRowWrapperComponent = class DataTableRowWrapperComponent {
             expanded: this.expanded,
             rowIndex: this.rowIndex
         };
-        this._expanded = false;
         this.rowDiffer = differs.find({}).create();
     }
     set rowIndex(val) {
@@ -4912,49 +4433,12 @@ let DataTableRowWrapperComponent = class DataTableRowWrapperComponent {
         styles['width'] = this.innerWidth;
         return styles;
     }
-};
-DataTableRowWrapperComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: KeyValueDiffers }
-];
-__decorate([
-    Input()
-], DataTableRowWrapperComponent.prototype, "innerWidth", void 0);
-__decorate([
-    Input()
-], DataTableRowWrapperComponent.prototype, "rowDetail", void 0);
-__decorate([
-    Input()
-], DataTableRowWrapperComponent.prototype, "groupHeader", void 0);
-__decorate([
-    Input()
-], DataTableRowWrapperComponent.prototype, "offsetX", void 0);
-__decorate([
-    Input()
-], DataTableRowWrapperComponent.prototype, "detailRowHeight", void 0);
-__decorate([
-    Input()
-], DataTableRowWrapperComponent.prototype, "row", void 0);
-__decorate([
-    Input()
-], DataTableRowWrapperComponent.prototype, "groupedRows", void 0);
-__decorate([
-    Output()
-], DataTableRowWrapperComponent.prototype, "rowContextmenu", void 0);
-__decorate([
-    Input()
-], DataTableRowWrapperComponent.prototype, "rowIndex", null);
-__decorate([
-    Input()
-], DataTableRowWrapperComponent.prototype, "expanded", null);
-__decorate([
-    HostListener('contextmenu', ['$event'])
-], DataTableRowWrapperComponent.prototype, "onContextmenu", null);
-DataTableRowWrapperComponent = __decorate([
-    Component({
-        selector: 'datatable-row-wrapper',
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        template: `
+}
+DataTableRowWrapperComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-row-wrapper',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
     <div *ngIf="groupHeader && groupHeader.template" class="datatable-group-header" [ngStyle]="getGroupHeaderStyle()">
       <ng-template
         *ngIf="groupHeader && groupHeader.template"
@@ -4978,13 +4462,30 @@ DataTableRowWrapperComponent = __decorate([
       </ng-template>
     </div>
   `,
-        host: {
-            class: 'datatable-row-wrapper'
-        }
-    })
-], DataTableRowWrapperComponent);
+                host: {
+                    class: 'datatable-row-wrapper'
+                }
+            },] }
+];
+DataTableRowWrapperComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: KeyValueDiffers }
+];
+DataTableRowWrapperComponent.propDecorators = {
+    innerWidth: [{ type: Input }],
+    rowDetail: [{ type: Input }],
+    groupHeader: [{ type: Input }],
+    offsetX: [{ type: Input }],
+    detailRowHeight: [{ type: Input }],
+    row: [{ type: Input }],
+    groupedRows: [{ type: Input }],
+    rowContextmenu: [{ type: Output }],
+    rowIndex: [{ type: Input }],
+    expanded: [{ type: Input }],
+    onContextmenu: [{ type: HostListener, args: ['contextmenu', ['$event'],] }]
+};
 
-let DataTableBodyCellComponent = class DataTableBodyCellComponent {
+class DataTableBodyCellComponent {
     constructor(element, cd) {
         this.cd = cd;
         this.activate = new EventEmitter();
@@ -5266,85 +4767,12 @@ let DataTableBodyCellComponent = class DataTableBodyCellComponent {
         const levelIndent = column.treeLevelIndent != null ? column.treeLevelIndent : 50;
         return column.isTreeColumn ? row.level * levelIndent : 0;
     }
-};
-DataTableBodyCellComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input()
-], DataTableBodyCellComponent.prototype, "displayCheck", void 0);
-__decorate([
-    Input()
-], DataTableBodyCellComponent.prototype, "group", null);
-__decorate([
-    Input()
-], DataTableBodyCellComponent.prototype, "rowHeight", null);
-__decorate([
-    Input()
-], DataTableBodyCellComponent.prototype, "isSelected", null);
-__decorate([
-    Input()
-], DataTableBodyCellComponent.prototype, "expanded", null);
-__decorate([
-    Input()
-], DataTableBodyCellComponent.prototype, "rowIndex", null);
-__decorate([
-    Input()
-], DataTableBodyCellComponent.prototype, "column", null);
-__decorate([
-    Input()
-], DataTableBodyCellComponent.prototype, "row", null);
-__decorate([
-    Input()
-], DataTableBodyCellComponent.prototype, "sorts", null);
-__decorate([
-    Input()
-], DataTableBodyCellComponent.prototype, "treeStatus", null);
-__decorate([
-    Output()
-], DataTableBodyCellComponent.prototype, "activate", void 0);
-__decorate([
-    Output()
-], DataTableBodyCellComponent.prototype, "treeAction", void 0);
-__decorate([
-    ViewChild('cellTemplate', { read: ViewContainerRef, static: true })
-], DataTableBodyCellComponent.prototype, "cellTemplate", void 0);
-__decorate([
-    HostBinding('class')
-], DataTableBodyCellComponent.prototype, "columnCssClasses", null);
-__decorate([
-    HostBinding('style.width.px')
-], DataTableBodyCellComponent.prototype, "width", null);
-__decorate([
-    HostBinding('style.minWidth.px')
-], DataTableBodyCellComponent.prototype, "minWidth", null);
-__decorate([
-    HostBinding('style.maxWidth.px')
-], DataTableBodyCellComponent.prototype, "maxWidth", null);
-__decorate([
-    HostBinding('style.height')
-], DataTableBodyCellComponent.prototype, "height", null);
-__decorate([
-    HostListener('focus')
-], DataTableBodyCellComponent.prototype, "onFocus", null);
-__decorate([
-    HostListener('blur')
-], DataTableBodyCellComponent.prototype, "onBlur", null);
-__decorate([
-    HostListener('click', ['$event'])
-], DataTableBodyCellComponent.prototype, "onClick", null);
-__decorate([
-    HostListener('dblclick', ['$event'])
-], DataTableBodyCellComponent.prototype, "onDblClick", null);
-__decorate([
-    HostListener('keydown', ['$event'])
-], DataTableBodyCellComponent.prototype, "onKeyDown", null);
-DataTableBodyCellComponent = __decorate([
-    Component({
-        selector: 'datatable-body-cell',
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        template: `
+}
+DataTableBodyCellComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-body-cell',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
     <div class="datatable-body-cell-label" [style.margin-left.px]="calcLeftMargin(column, row)">
       <label
         *ngIf="column.checkboxable && (!displayCheck || displayCheck(row, column, value))"
@@ -5383,8 +4811,37 @@ DataTableBodyCellComponent = __decorate([
       </ng-template>
     </div>
   `
-    })
-], DataTableBodyCellComponent);
+            },] }
+];
+DataTableBodyCellComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
+DataTableBodyCellComponent.propDecorators = {
+    displayCheck: [{ type: Input }],
+    group: [{ type: Input }],
+    rowHeight: [{ type: Input }],
+    isSelected: [{ type: Input }],
+    expanded: [{ type: Input }],
+    rowIndex: [{ type: Input }],
+    column: [{ type: Input }],
+    row: [{ type: Input }],
+    sorts: [{ type: Input }],
+    treeStatus: [{ type: Input }],
+    activate: [{ type: Output }],
+    treeAction: [{ type: Output }],
+    cellTemplate: [{ type: ViewChild, args: ['cellTemplate', { read: ViewContainerRef, static: true },] }],
+    columnCssClasses: [{ type: HostBinding, args: ['class',] }],
+    width: [{ type: HostBinding, args: ['style.width.px',] }],
+    minWidth: [{ type: HostBinding, args: ['style.minWidth.px',] }],
+    maxWidth: [{ type: HostBinding, args: ['style.maxWidth.px',] }],
+    height: [{ type: HostBinding, args: ['style.height',] }],
+    onFocus: [{ type: HostListener, args: ['focus',] }],
+    onBlur: [{ type: HostListener, args: ['blur',] }],
+    onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
+    onDblClick: [{ type: HostListener, args: ['dblclick', ['$event'],] }],
+    onKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
+};
 
 function selectRows(selected, row, comparefn) {
     const selectedIndex = comparefn(row, selected);
@@ -5426,7 +4883,7 @@ function selectRowsBetween(selected, rows, index, prevIndex, comparefn) {
     return selected;
 }
 
-let DataTableSelectionComponent = class DataTableSelectionComponent {
+class DataTableSelectionComponent {
     constructor() {
         this.activate = new EventEmitter();
         this.select = new EventEmitter();
@@ -5543,38 +5000,24 @@ let DataTableSelectionComponent = class DataTableSelectionComponent {
             return id === rowId;
         });
     }
+}
+DataTableSelectionComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-selection',
+                template: ` <ng-content></ng-content> `,
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+DataTableSelectionComponent.propDecorators = {
+    rows: [{ type: Input }],
+    selected: [{ type: Input }],
+    selectEnabled: [{ type: Input }],
+    selectionType: [{ type: Input }],
+    rowIdentity: [{ type: Input }],
+    selectCheck: [{ type: Input }],
+    activate: [{ type: Output }],
+    select: [{ type: Output }]
 };
-__decorate([
-    Input()
-], DataTableSelectionComponent.prototype, "rows", void 0);
-__decorate([
-    Input()
-], DataTableSelectionComponent.prototype, "selected", void 0);
-__decorate([
-    Input()
-], DataTableSelectionComponent.prototype, "selectEnabled", void 0);
-__decorate([
-    Input()
-], DataTableSelectionComponent.prototype, "selectionType", void 0);
-__decorate([
-    Input()
-], DataTableSelectionComponent.prototype, "rowIdentity", void 0);
-__decorate([
-    Input()
-], DataTableSelectionComponent.prototype, "selectCheck", void 0);
-__decorate([
-    Output()
-], DataTableSelectionComponent.prototype, "activate", void 0);
-__decorate([
-    Output()
-], DataTableSelectionComponent.prototype, "select", void 0);
-DataTableSelectionComponent = __decorate([
-    Component({
-        selector: 'datatable-selection',
-        template: ` <ng-content></ng-content> `,
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], DataTableSelectionComponent);
 
 function defaultSumFunc(cells) {
     const cellsWithValues = cells.filter(cell => !!cell);
@@ -5589,7 +5032,7 @@ function defaultSumFunc(cells) {
 function noopSumFunc(cells) {
     return null;
 }
-let DataTableSummaryRowComponent = class DataTableSummaryRowComponent {
+class DataTableSummaryRowComponent {
     constructor() {
         this.summaryRow = {};
     }
@@ -5626,26 +5069,11 @@ let DataTableSummaryRowComponent = class DataTableSummaryRowComponent {
             return column.summaryFunc;
         }
     }
-};
-__decorate([
-    Input()
-], DataTableSummaryRowComponent.prototype, "rows", void 0);
-__decorate([
-    Input()
-], DataTableSummaryRowComponent.prototype, "columns", void 0);
-__decorate([
-    Input()
-], DataTableSummaryRowComponent.prototype, "rowHeight", void 0);
-__decorate([
-    Input()
-], DataTableSummaryRowComponent.prototype, "offsetX", void 0);
-__decorate([
-    Input()
-], DataTableSummaryRowComponent.prototype, "innerWidth", void 0);
-DataTableSummaryRowComponent = __decorate([
-    Component({
-        selector: 'datatable-summary-row',
-        template: `
+}
+DataTableSummaryRowComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'datatable-summary-row',
+                template: `
     <datatable-body-row
       *ngIf="summaryRow && _internalColumns"
       tabindex="-1"
@@ -5658,75 +5086,81 @@ DataTableSummaryRowComponent = __decorate([
     >
     </datatable-body-row>
   `,
-        host: {
-            class: 'datatable-summary-row'
-        }
-    })
-], DataTableSummaryRowComponent);
+                host: {
+                    class: 'datatable-summary-row'
+                }
+            },] }
+];
+DataTableSummaryRowComponent.propDecorators = {
+    rows: [{ type: Input }],
+    columns: [{ type: Input }],
+    rowHeight: [{ type: Input }],
+    offsetX: [{ type: Input }],
+    innerWidth: [{ type: Input }]
+};
 
-var NgxDatatableModule_1;
-let NgxDatatableModule = NgxDatatableModule_1 = class NgxDatatableModule {
+class NgxDatatableModule {
     /**
      * Configure global configuration via INgxDatatableConfig
      * @param configuration
      */
     static forRoot(configuration) {
         return {
-            ngModule: NgxDatatableModule_1,
+            ngModule: NgxDatatableModule,
             providers: [{ provide: 'configuration', useValue: configuration }]
         };
     }
-};
-NgxDatatableModule = NgxDatatableModule_1 = __decorate([
-    NgModule({
-        imports: [CommonModule],
-        providers: [ScrollbarHelper, DimensionsHelper, ColumnChangesService],
-        declarations: [
-            DataTableFooterTemplateDirective,
-            VisibilityDirective,
-            DraggableDirective,
-            ResizeableDirective,
-            OrderableDirective,
-            LongPressDirective,
-            ScrollerComponent,
-            DatatableComponent,
-            DataTableColumnDirective,
-            DataTableHeaderComponent,
-            DataTableHeaderCellComponent,
-            DataTableBodyComponent,
-            DataTableFooterComponent,
-            DataTablePagerComponent,
-            ProgressBarComponent,
-            DataTableBodyRowComponent,
-            DataTableRowWrapperComponent,
-            DatatableRowDetailDirective,
-            DatatableGroupHeaderDirective,
-            DatatableRowDetailTemplateDirective,
-            DataTableBodyCellComponent,
-            DataTableSelectionComponent,
-            DataTableColumnHeaderDirective,
-            DataTableColumnCellDirective,
-            DataTableColumnCellTreeToggle,
-            DatatableFooterDirective,
-            DatatableGroupHeaderTemplateDirective,
-            DataTableSummaryRowComponent
-        ],
-        exports: [
-            DatatableComponent,
-            DatatableRowDetailDirective,
-            DatatableGroupHeaderDirective,
-            DatatableRowDetailTemplateDirective,
-            DataTableColumnDirective,
-            DataTableColumnHeaderDirective,
-            DataTableColumnCellDirective,
-            DataTableColumnCellTreeToggle,
-            DataTableFooterTemplateDirective,
-            DatatableFooterDirective,
-            DataTablePagerComponent,
-            DatatableGroupHeaderTemplateDirective
-        ]
-    })
-], NgxDatatableModule);
+}
+NgxDatatableModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                providers: [ScrollbarHelper, DimensionsHelper, ColumnChangesService],
+                declarations: [
+                    DataTableFooterTemplateDirective,
+                    VisibilityDirective,
+                    DraggableDirective,
+                    ResizeableDirective,
+                    OrderableDirective,
+                    LongPressDirective,
+                    ScrollerComponent,
+                    DatatableComponent,
+                    DataTableColumnDirective,
+                    DataTableHeaderComponent,
+                    DataTableHeaderCellComponent,
+                    DataTableBodyComponent,
+                    DataTableFooterComponent,
+                    DataTablePagerComponent,
+                    ProgressBarComponent,
+                    DataTableBodyRowComponent,
+                    DataTableRowWrapperComponent,
+                    DatatableRowDetailDirective,
+                    DatatableGroupHeaderDirective,
+                    DatatableRowDetailTemplateDirective,
+                    DataTableBodyCellComponent,
+                    DataTableSelectionComponent,
+                    DataTableColumnHeaderDirective,
+                    DataTableColumnCellDirective,
+                    DataTableColumnCellTreeToggle,
+                    DatatableFooterDirective,
+                    DatatableGroupHeaderTemplateDirective,
+                    DataTableSummaryRowComponent
+                ],
+                exports: [
+                    DatatableComponent,
+                    DatatableRowDetailDirective,
+                    DatatableGroupHeaderDirective,
+                    DatatableRowDetailTemplateDirective,
+                    DataTableColumnDirective,
+                    DataTableColumnHeaderDirective,
+                    DataTableColumnCellDirective,
+                    DataTableColumnCellTreeToggle,
+                    DataTableFooterTemplateDirective,
+                    DatatableFooterDirective,
+                    DataTablePagerComponent,
+                    DatatableGroupHeaderTemplateDirective
+                ]
+            },] }
+];
 
 var ClickType;
 (function (ClickType) {