angular-4-data-table-bootstrap-4/dist/bundles/datatable.min.js

An Angular 4 data table, with pagination, sorting, expandable rows etc. Bootstrap 4 version.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/forms"],e):e((t.ng=t.ng||{},t.ng.datatable={}),t.ng.core,t.common,t.forms)}(this,function(t,e,n,o){"use strict";function i(t,e){function n(t){var e=t.pageX-l,n=t.pageY-s;l=t.pageX,s=t.pageY,(e||n)&&(r=!0),i(t,e,n,l,s),t.preventDefault()}function o(t){l=t.pageX,s=t.pageY,document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o),a&&a(t,l,s,r)}var i=e.move,a=e.up,l=t.pageX,s=t.pageY,r=!1;document.addEventListener("mousemove",n),document.addEventListener("mouseup",o)}function a(t){return void 0===t||null===t}var l=function(){function t(){this.sortable=!1,this.resizable=!1,this.visible=!0,this.styleClassObject={}}return t.prototype.getCellColor=function(t,e){if(void 0!==this.cellColors)return this.cellColors(t.item,t,this,e)},t.prototype.ngOnInit=function(){this._initCellClass()},t.prototype._initCellClass=function(){!this.styleClass&&this.property&&(/^[a-zA-Z0-9_]+$/.test(this.property)?this.styleClass="column-"+this.property:this.styleClass="column-"+this.property.replace(/[^a-zA-Z0-9_]/g,"")),null!=this.styleClass&&(this.styleClassObject=(t={},t[this.styleClass]=!0,t));var t},t.decorators=[{type:e.Directive,args:[{selector:"data-table-column"}]}],t.ctorParameters=function(){return[]},t.propDecorators={header:[{type:e.Input}],sortable:[{type:e.Input}],resizable:[{type:e.Input}],property:[{type:e.Input}],styleClass:[{type:e.Input}],cellColors:[{type:e.Input}],width:[{type:e.Input}],visible:[{type:e.Input}],cellTemplate:[{type:e.ContentChild,args:["dataTableCell"]}],headerTemplate:[{type:e.ContentChild,args:["dataTableHeader"]}]},t}(),s=function(){function t(t){this.dataTable=t,this.selectedChange=new e.EventEmitter,this._this=this}return Object.defineProperty(t.prototype,"selected",{get:function(){return this._selected},set:function(t){this._selected=t,this.selectedChange.emit(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"displayIndex",{get:function(){return this.dataTable.pagination?this.dataTable.displayParams.offset+this.index+1:this.index+1},enumerable:!0,configurable:!0}),t.prototype.getTooltip=function(){return this.dataTable.rowTooltip?this.dataTable.rowTooltip(this.item,this,this.index):""},t.prototype.ngOnDestroy=function(){this.selected=!1},t.decorators=[{type:e.Component,args:[{selector:"[dataTableRow]",template:'\n<tr\tclass="data-table-row"\n    [title]="getTooltip()"\n    [style.background-color]="dataTable.getRowColor(item, index, _this)"\n    [class.row-odd]="index % 2 === 0"\n    [class.row-even]="index % 2 === 1"\n    [class.selected]="selected"\n    [class.clickable]="dataTable.selectOnRowClick"\n    (dblclick)="dataTable.rowDoubleClicked(_this, $event)"\n    (click)="dataTable.rowClicked(_this, $event)"\n    >\n    <td [hide]="!dataTable.expandColumnVisible" (click)="expanded = !expanded; $event.stopPropagation()" class="row-expand-button">\n        <span class="fa fa-arrow-circle-o-right" [hide]="expanded"></span>\n        <span class="fa fa-arrow-circle-o-down" [hide]="!expanded"></span>\n    </td>\n    <td [hide]="!dataTable.indexColumnVisible" class="index-column" [textContent]="displayIndex"></td>\n    <td [hide]="!dataTable.selectColumnVisible" class="select-column">\n        <input type="checkbox" [(ngModel)]="selected"/>\n    </td>\n    <td *ngFor="let column of dataTable.columns" [hide]="!column.visible" [ngClass]="column.styleClassObject" class="data-column"\n        [style.background-color]="column.getCellColor(_this, index)">\n        <div *ngIf="!column.cellTemplate" [textContent]="item[column.property]"></div>\n        <div *ngIf="column.cellTemplate" [ngTemplateOutlet]="column.cellTemplate" [ngOutletContext]="{column: column, row: _this, item: item}"></div>\n    </td>\n</tr>\n<tr *ngIf="dataTable.expandableRows" [hide]="!expanded" class="row-expansion">\n    <td [attr.colspan]="dataTable.columnCount">\n        <div [ngTemplateOutlet]="dataTable.expandTemplate" [ngOutletContext]="{row: _this, item: item}"></div>\n    </td>\n</tr>\n',styles:["\n.select-column {\n    text-align: center;\n}\n\n.row-expand-button {\n    cursor: pointer;\n    text-align: center;\n}\n\n.clickable {\n    cursor: pointer;\n}\n"]}]}],t.ctorParameters=function(){return[{type:c,decorators:[{type:e.Inject,args:[e.forwardRef(function(){return c})]}]}]},t.propDecorators={item:[{type:e.Input}],index:[{type:e.Input}],selectedChange:[{type:e.Output}]},t}(),r={indexColumn:"index",selectColumn:"select",expandColumn:"expand",paginationLimit:"Limit",paginationRange:"Results"},c=function(){function t(){this._items=[],this.header=!0,this.pagination=!0,this.indexColumn=!0,this.indexColumnHeader="",this.selectColumn=!1,this.multiSelect=!0,this.substituteRows=!0,this.expandableRows=!1,this.translations=r,this.selectOnRowClick=!1,this.autoReload=!0,this.showReloading=!1,this._sortAsc=!0,this._offset=0,this._limit=10,this._reloading=!1,this.reload=new e.EventEmitter,this._displayParams={},this._scheduledReload=null,this.rowClick=new e.EventEmitter,this.rowDoubleClick=new e.EventEmitter,this.headerClick=new e.EventEmitter,this.cellClick=new e.EventEmitter,this.selectedRows=[],this._selectAllCheckbox=!1,this._resizeInProgress=!1,this.resizeLimit=30}return Object.defineProperty(t.prototype,"items",{get:function(){return this._items},set:function(t){this._items=t,this._onReloadFinished()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"sortBy",{get:function(){return this._sortBy},set:function(t){this._sortBy=t,this._triggerReload()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"sortAsc",{get:function(){return this._sortAsc},set:function(t){this._sortAsc=t,this._triggerReload()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"offset",{get:function(){return this._offset},set:function(t){this._offset=t,this._triggerReload()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"limit",{get:function(){return this._limit},set:function(t){this._limit=t,this._triggerReload()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"page",{get:function(){return Math.floor(this.offset/this.limit)+1},set:function(t){this.offset=(t-1)*this.limit},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"lastPage",{get:function(){return Math.ceil(this.itemCount/this.limit)},enumerable:!0,configurable:!0}),t.prototype.sort=function(t,e){this.sortBy=t,this.sortAsc=e},t.prototype.ngOnInit=function(){this._initDefaultValues(),this._initDefaultClickEvents(),this._updateDisplayParams(),this.autoReload&&null==this._scheduledReload&&this.reloadItems()},t.prototype._initDefaultValues=function(){this.indexColumnVisible=this.indexColumn,this.selectColumnVisible=this.selectColumn,this.expandColumnVisible=this.expandableRows},t.prototype._initDefaultClickEvents=function(){var t=this;this.headerClick.subscribe(function(e){return t.sortColumn(e.column)}),this.selectOnRowClick&&this.rowClick.subscribe(function(t){return t.row.selected=!t.row.selected})},Object.defineProperty(t.prototype,"reloading",{get:function(){return this._reloading},enumerable:!0,configurable:!0}),t.prototype.reloadItems=function(){this._reloading=!0,this.reload.emit(this._getRemoteParameters())},t.prototype._onReloadFinished=function(){this._updateDisplayParams(),this._selectAllCheckbox=!1,this._reloading=!1},Object.defineProperty(t.prototype,"displayParams",{get:function(){return this._displayParams},enumerable:!0,configurable:!0}),t.prototype._updateDisplayParams=function(){this._displayParams={sortBy:this.sortBy,sortAsc:this.sortAsc,offset:this.offset,limit:this.limit}},t.prototype._triggerReload=function(){var t=this;this._scheduledReload&&clearTimeout(this._scheduledReload),this._scheduledReload=setTimeout(function(){t.reloadItems()})},t.prototype.rowClicked=function(t,e){this.rowClick.emit({row:t,event:e})},t.prototype.rowDoubleClicked=function(t,e){this.rowDoubleClick.emit({row:t,event:e})},t.prototype.headerClicked=function(t,e){this._resizeInProgress?this._resizeInProgress=!1:this.headerClick.emit({column:t,event:e})},t.prototype.cellClicked=function(t,e,n){this.cellClick.emit({row:e,column:t,event:n})},t.prototype._getRemoteParameters=function(){var t={};return this.sortBy&&(t.sortBy=this.sortBy,t.sortAsc=this.sortAsc),this.pagination&&(t.offset=this.offset,t.limit=this.limit),t},t.prototype.sortColumn=function(t){if(t.sortable){var e=this.sortBy!==t.property||!this.sortAsc;this.sort(t.property,e)}},Object.defineProperty(t.prototype,"columnCount",{get:function(){var t=0;return t+=this.indexColumnVisible?1:0,t+=this.selectColumnVisible?1:0,t+=this.expandColumnVisible?1:0,this.columns.toArray().forEach(function(e){t+=e.visible?1:0}),t},enumerable:!0,configurable:!0}),t.prototype.getRowColor=function(t,e,n){if(void 0!==this.rowColors)return this.rowColors(t,n,e)},Object.defineProperty(t.prototype,"selectAllCheckbox",{get:function(){return this._selectAllCheckbox},set:function(t){this._selectAllCheckbox=t,this._onSelectAllChanged(t)},enumerable:!0,configurable:!0}),t.prototype._onSelectAllChanged=function(t){this.rows.toArray().forEach(function(e){return e.selected=t})},t.prototype.onRowSelectChanged=function(t){if(this.multiSelect){var e=this.selectedRows.indexOf(t);t.selected&&e<0?this.selectedRows.push(t):!t.selected&&e>=0&&this.selectedRows.splice(e,1)}else t.selected?this.selectedRow=t:this.selectedRow===t&&(this.selectedRow=void 0);t.selected&&!this.multiSelect&&this.rows.toArray().filter(function(t){return t.selected}).forEach(function(e){e!==t&&(e.selected=!1)})},Object.defineProperty(t.prototype,"substituteItems",{get:function(){return Array.from({length:this.displayParams.limit-this.items.length})},enumerable:!0,configurable:!0}),t.prototype.resizeColumnStart=function(t,e,n){var o=this;this._resizeInProgress=!0,i(t,{move:function(t,i){o._isResizeInLimit(n,i)&&(e.width=n.offsetWidth+i)}})},t.prototype._isResizeInLimit=function(t,e){return!(e<0&&t.offsetWidth+e<=this.resizeLimit||!t.nextElementSibling||e>=0&&t.nextElementSibling.offsetWidth+e<=this.resizeLimit)},t.decorators=[{type:e.Component,args:[{selector:"data-table",template:'\n<div class="data-table-wrapper">\n    <data-table-header *ngIf="header"></data-table-header>\n\n    <div class="data-table-box">\n        <table class="table table-condensed data-table">\n            <thead>\n                <tr>\n                    <th [hide]="!expandColumnVisible" class="expand-column-header">\n                    <th [hide]="!indexColumnVisible" class="index-column-header">\n                        <span [textContent]="indexColumnHeader"></span>\n                    </th>\n                    <th [hide]="!selectColumnVisible" class="select-column-header">\n                        <input [hide]="!multiSelect" type="checkbox" [(ngModel)]="selectAllCheckbox"/>\n                    </th>\n                    <th *ngFor="let column of columns" #th [hide]="!column.visible" (click)="headerClicked(column, $event)"\n                        [class.sortable]="column.sortable" [class.resizable]="column.resizable"\n                        [ngClass]="column.styleClassObject" class="column-header" [style.width]="column.width | px">\n                        <span *ngIf="!column.headerTemplate" [textContent]="column.header"></span>\n                        <span *ngIf="column.headerTemplate" [ngTemplateOutlet]="column.headerTemplate" [ngOutletContext]="{column: column}"></span>\n                        <span class="column-sort-icon" *ngIf="column.sortable">\n                           <i class="fa fa-sort column-sortable-icon" [hide]="column.property === sortBy"></i>\n                            <span [hide]="column.property !== sortBy">\n                                <i class="fa fa-sort-asc"  [hide]="sortAsc"></i>\n\t\t\t\t\t\t\t\t<i class="fa fa-sort-desc"  [hide]="!sortAsc"></i>\n                            </span>\n                        </span>\n                        <span *ngIf="column.resizable" class="column-resize-handle" (mousedown)="resizeColumnStart($event, column, th)"></span>\n                    </th>\n                </tr>\n            </thead>\n            <tbody *ngFor="let item of items; let index=index" class="data-table-row-wrapper"\n                   dataTableRow #row [item]="item" [index]="index" (selectedChange)="onRowSelectChanged(row)">\n            </tbody>\n            <tbody class="substitute-rows" *ngIf="pagination && substituteRows">\n                <tr *ngFor="let item of substituteItems, let index = index"\n                    [class.row-odd]="(index + items.length) % 2 === 0"\n                    [class.row-even]="(index + items.length) % 2 === 1"\n                    >\n                    <td [hide]="!expandColumnVisible"></td>\n                    <td [hide]="!indexColumnVisible">&nbsp;</td>\n                    <td [hide]="!selectColumnVisible"></td>\n                    <td *ngFor="let column of columns" [hide]="!column.visible">\n                </tr>\n            </tbody>\n        </table>\n        <div class="loading-cover" *ngIf="showReloading && reloading"></div>\n    </div>\n\n    <data-table-pagination *ngIf="pagination"></data-table-pagination>\n</div>\n',styles:["\n/* bootstrap override: */\n\n:host /deep/ .data-table.table > tbody+tbody {\n    border-top: none;\n}\n:host /deep/ .data-table.table td {\n    vertical-align: middle;\n}\n\n:host /deep/ .data-table > thead > tr > th,\n:host /deep/ .data-table > tbody > tr > td {\n\toverflow: hidden;\n}\n\n/* I can't use the bootstrap striped table, because of the expandable rows */\n:host /deep/ .row-odd {\n    background-color: #F6F6F6;\n}\n:host /deep/ .row-even {\n}\n\n.data-table .substitute-rows > tr:hover,\n:host /deep/ .data-table .data-table-row:hover {\n    background-color: #ECECEC;\n}\n/* table itself: */\n\n.data-table {\n    box-shadow: 0 0 15px rgb(236, 236, 236);\n    table-layout: fixed;\n}\n\n/* header cells: */\n\n.column-header {\n    position: relative;\n}\n.expand-column-header {\n\twidth: 50px;\n}\n.select-column-header {\n\twidth: 50px;\n\ttext-align: center;\n}\n.index-column-header {\n\twidth: 40px;\n}\n.column-header.sortable {\n    cursor: pointer;\n}\n.column-header .column-sort-icon {\n\tfloat: right;\n}\n.column-header.resizable .column-sort-icon {\n    margin-right: 8px;\n}\n.column-header .column-sort-icon .column-sortable-icon {\n    color: lightgray;\n}\n.column-header .column-resize-handle {\n    position: absolute;\n    top: 0;\n    right: 0;\n    margin: 0;\n    padding: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n}\n\n/* cover: */\n\n.data-table-box {\n    position: relative;\n}\n\n.loading-cover {\n   position: absolute;\n   width: 100%;\n   height: 100%;\n   background-color: rgba(255, 255, 255, 0.3);\n   top: 0;\n}\n"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={items:[{type:e.Input}],itemCount:[{type:e.Input}],columns:[{type:e.ContentChildren,args:[l]}],rows:[{type:e.ViewChildren,args:[s]}],expandTemplate:[{type:e.ContentChild,args:["dataTableExpand"]}],headerTitle:[{type:e.Input}],header:[{type:e.Input}],pagination:[{type:e.Input}],indexColumn:[{type:e.Input}],indexColumnHeader:[{type:e.Input}],rowColors:[{type:e.Input}],rowTooltip:[{type:e.Input}],selectColumn:[{type:e.Input}],multiSelect:[{type:e.Input}],substituteRows:[{type:e.Input}],expandableRows:[{type:e.Input}],translations:[{type:e.Input}],selectOnRowClick:[{type:e.Input}],autoReload:[{type:e.Input}],showReloading:[{type:e.Input}],sortBy:[{type:e.Input}],sortAsc:[{type:e.Input}],offset:[{type:e.Input}],limit:[{type:e.Input}],page:[{type:e.Input}],reload:[{type:e.Output}],rowClick:[{type:e.Output}],rowDoubleClick:[{type:e.Output}],headerClick:[{type:e.Output}],cellClick:[{type:e.Output}]},t}(),p=function(){function t(t){this.dataTable=t}return t.prototype.pageBack=function(){this.dataTable.offset-=Math.min(this.dataTable.limit,this.dataTable.offset)},t.prototype.pageForward=function(){this.dataTable.offset+=this.dataTable.limit},t.prototype.pageFirst=function(){this.dataTable.offset=0},t.prototype.pageLast=function(){this.dataTable.offset=(this.maxPage-1)*this.dataTable.limit},Object.defineProperty(t.prototype,"maxPage",{get:function(){return Math.ceil(this.dataTable.itemCount/this.dataTable.limit)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"limit",{get:function(){return this.dataTable.limit},set:function(t){this.dataTable.limit=Number(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"page",{get:function(){return this.dataTable.page},set:function(t){this.dataTable.page=Number(t)},enumerable:!0,configurable:!0}),t.decorators=[{type:e.Component,args:[{selector:"data-table-pagination",template:'\n<div class="pagination-box">\n    <div class="pagination-range">\n        {{dataTable.translations.paginationRange}}:\n        <span [textContent]="dataTable.offset + 1"></span>\n        -\n        <span [textContent]="[dataTable.offset + dataTable.limit , dataTable.itemCount] | min"></span>\n        /\n        <span [textContent]="dataTable.itemCount"></span>\n    </div>\n    <div class="pagination-controllers">\n        <div class="pagination-limit">\n            <div class="input-group">\n                <span class="input-group-addon">{{dataTable.translations.paginationLimit}}:</span>\n                <input #limitInput type="number" class="form-control" min="1" step="1"\n                       [ngModel]="limit" (blur)="limit = limitInput.value"\n                       (keyup.enter)="limit = limitInput.value" (keyup.esc)="limitInput.value = limit"/>\n            </div>\n        </div>\n        <div class=" pagination-pages">\n            <button [disabled]="dataTable.offset <= 0" (click)="pageFirst()" class="btn btn-default pagination-firstpage">&laquo;</button>\n            <button [disabled]="dataTable.offset <= 0" (click)="pageBack()" class="btn btn-default pagination-prevpage">&lsaquo;</button>\n            <div class="pagination-page">\n                <div class="input-group">\n                    <input #pageInput type="number" class="form-control" min="1" step="1" max="{{maxPage}}"\n                           [ngModel]="page" (blur)="page = pageInput.value"\n                           (keyup.enter)="page = pageInput.value" (keyup.esc)="pageInput.value = page"/>\n                    <div class="input-group-addon">\n                        <span>/</span>\n                        <span [textContent]="dataTable.lastPage"></span>\n                    </div>\n                </div>\n            </div>\n            <button [disabled]="(dataTable.offset + dataTable.limit) >= dataTable.itemCount" (click)="pageForward()" class="btn btn-default pagination-nextpage">&rsaquo;</button>\n            <button [disabled]="(dataTable.offset + dataTable.limit) >= dataTable.itemCount" (click)="pageLast()" class="btn btn-default pagination-lastpage">&raquo;</button>\n        </div>\n    </div>\n</div>\n',styles:["\n.pagination-box {\n    position: relative;\n    margin-top: -10px;\n}\n.pagination-range {\n    margin-top: 7px;\n    margin-left: 3px;\n    display: inline-block;\n}\n.pagination-controllers {\n    float: right;\n}\n.pagination-controllers input {\n    min-width: 60px;\n    /*padding: 1px 0px 0px 5px;*/\n    text-align: right;\n}\n\n.pagination-limit {\n    margin-right: 25px;\n    display: inline-table;\n    width: 150px;\n}\n.pagination-pages {\n    display: inline-block;\n}\n.pagination-page {\n    width: 110px;\n    display: inline-table;\n}\n.pagination-page .input-group-addon {\n    display: inline;\n}\n.pagination-box button {\n    outline: none !important;\n}\n.pagination-prevpage,\n.pagination-nextpage,\n.pagination-firstpage,\n.pagination-lastpage {\n    vertical-align: top;\n}\n.pagination-reload {\n    color: gray;\n    font-size: 12px;\n}\n"]}]}],t.ctorParameters=function(){return[{type:c,decorators:[{type:e.Inject,args:[e.forwardRef(function(){return c})]}]}]},t}(),u=function(){function t(t){this.dataTable=t,this.columnSelectorOpen=!1}return t.prototype._closeSelector=function(){this.columnSelectorOpen=!1},t.decorators=[{type:e.Component,args:[{selector:"data-table-header",template:'\n<div class="data-table-header">\n    <h4 class="title" [textContent]="dataTable.headerTitle"></h4>\n    <div class="button-panel">\n        <button type="button" class="btn btn-default btn-sm refresh-button"\n            (click)="dataTable.reloadItems()">\n             <i class="fa fa-refresh"></i>\n        </button>\n        <button type="button" class="btn btn-default btn-sm column-selector-button" [class.active]="columnSelectorOpen"\n            (click)="columnSelectorOpen = !columnSelectorOpen; $event.stopPropagation()" >\n            <i class="fa fa-list"></i>\n        </button>\n        <div class="column-selector-wrapper" (click)="$event.stopPropagation()">\n            <div *ngIf="columnSelectorOpen" class="column-selector-box card">\n                <div *ngIf="dataTable.expandableRows" class="column-selector-fixed-column checkbox">\n                    <label>\n                        <input type="checkbox" [(ngModel)]="dataTable.expandColumnVisible"/>\n                        <span>{{dataTable.translations.expandColumn}}</span>\n                    </label>\n                </div>\n                <div *ngIf="dataTable.indexColumn" class="column-selector-fixed-column checkbox">\n                    <label>\n                        <input type="checkbox" [(ngModel)]="dataTable.indexColumnVisible"/>\n                        <span>{{dataTable.translations.indexColumn}}</span>\n                    </label>\n                </div>\n                <div *ngIf="dataTable.selectColumn" class="column-selector-fixed-column checkbox">\n                    <label>\n                        <input type="checkbox" [(ngModel)]="dataTable.selectColumnVisible"/>\n                        <span>{{dataTable.translations.selectColumn}}</span>\n                    </label>\n                </div>\n                <div *ngFor="let column of dataTable.columns" class="column-selector-column checkbox">\n                    <label>\n                        <input type="checkbox" [(ngModel)]="column.visible"/>\n                        <span [textContent]="column.header"></span>\n                    </label>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n',styles:["\n.data-table-header {\n    min-height: 25px;\n    margin-bottom: 10px;\n}\n.title {\n    display: inline-block;\n    margin: 5px 0 0 5px;\n}\n.button-panel {\n    float: right;\n}\n.button-panel button {\n    outline: none !important;\n}\n\n.column-selector-wrapper {\n    position: relative;\n}\n.column-selector-box {\n    box-shadow: 0 0 10px lightgray;\n    width: 150px;\n    padding: 10px;\n    position: absolute;\n    right: 0;\n    top: 1px;\n    z-index: 1060;\n}\n.column-selector-box .checkbox {\n    margin-bottom: 4px;\n}\n.column-selector-fixed-column {\n    font-style: italic;\n}\n"],host:{"(document:click)":"_closeSelector()"}}]}],t.ctorParameters=function(){return[{type:c,decorators:[{type:e.Inject,args:[e.forwardRef(function(){return c})]}]}]},t}(),d=function(){function t(){}return t.prototype.transform=function(t,e){if(void 0!==t)return"string"==typeof t?t:"number"==typeof t?t+"px":void 0},t.decorators=[{type:e.Pipe,args:[{name:"px"}]}],t.ctorParameters=function(){return[]},t}(),h=function(){function t(t,e){this._elementRef=t,this._renderer=e,this._prevCondition=null}return Object.defineProperty(t.prototype,"hide",{set:function(t){this.initDisplayStyle(),!t||!a(this._prevCondition)&&this._prevCondition?t||!a(this._prevCondition)&&!this._prevCondition||(this._prevCondition=!1,this._renderer.setElementStyle(this._elementRef.nativeElement,"display",this._displayStyle)):(this._prevCondition=!0,this._renderer.setElementStyle(this._elementRef.nativeElement,"display","none"))},enumerable:!0,configurable:!0}),t.prototype.initDisplayStyle=function(){if(void 0===this._displayStyle){var t=this._elementRef.nativeElement.style.display;t&&"none"!==t&&(this._displayStyle=t)}},t.decorators=[{type:e.Directive,args:[{selector:"[hide]",inputs:["hide"]}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.Renderer}]},t}(),m=function(){function t(){}return t.prototype.transform=function(t,e){return Math.min.apply(null,t)},t.decorators=[{type:e.Pipe,args:[{name:"min"}]}],t.ctorParameters=function(){return[]},t}(),b=function(){function t(t){this.items=t}return t.prototype.query=function(t,e){var n=[];return n=e?this.items.filter(e):this.items.slice(),t.sortBy&&(n.sort(function(e,n){return"string"==typeof e[t.sortBy]?e[t.sortBy].localeCompare(n[t.sortBy]):e[t.sortBy]-n[t.sortBy]}),!1===t.sortAsc&&n.reverse()),void 0!==t.offset&&(n=void 0===t.limit?n.slice(t.offset,n.length):n.slice(t.offset,t.offset+t.limit)),new Promise(function(t,e){setTimeout(function(){return t(n)})})},t.prototype.count=function(){var t=this;return new Promise(function(e,n){setTimeout(function(){return e(t.items.length)})})},t}(),f=[c,l],g=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,o.FormsModule],declarations:[c,l,s,p,u,d,h,m],exports:[c,l]}]}],t.ctorParameters=function(){return[]},t}();t.DataTable=c,t.DataTableColumn=l,t.DataTableRow=s,t.DataTablePagination=p,t.DataTableHeader=u,t.DATA_TABLE_DIRECTIVES=f,t.DataTableModule=g,t.defaultTranslations=r,t.DataTableResource=b,Object.defineProperty(t,"__esModule",{value:!0})});