angular2-data-table
Version:
angular2-data-table is a Angular2 component for presenting large and complex data.
1,188 lines (1,155 loc) • 204 kB
JavaScript
/**
* angular2-data-table v"3.0.0" (https://github.com/swimlane/angular2-data-table)
* Copyright 2016
* Licensed under MIT
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("@angular/core"), require("rxjs/Rx"), require("@angular/common"));
else if(typeof define === 'function' && define.amd)
define("angular2-data-table", ["@angular/core", "rxjs/Rx", "@angular/common"], factory);
else if(typeof exports === 'object')
exports["angular2-data-table"] = factory(require("@angular/core"), require("rxjs/Rx"), require("@angular/common"));
else
root["angular2-data-table"] = factory(root["@angular/core"], root["rxjs/Rx"], root["@angular/common"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.ts");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./src/components/body/body-cell.component.ts":
/***/ function(module, exports, __webpack_require__) {
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = __webpack_require__(0);
var utils_1 = __webpack_require__("./src/utils/index.ts");
var types_1 = __webpack_require__("./src/types/index.ts");
var DataTableBodyCellComponent = (function () {
function DataTableBodyCellComponent(element) {
this.activate = new core_1.EventEmitter();
this.isFocused = false;
this.element = element.nativeElement;
}
Object.defineProperty(DataTableBodyCellComponent.prototype, "sorts", {
get: function () {
return this._sorts;
},
set: function (val) {
this._sorts = val;
this.calcSortDir = this.calcSortDir(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyCellComponent.prototype, "isSortActive", {
get: function () {
return !this.sortDir;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyCellComponent.prototype, "isSortAscending", {
get: function () {
return this.sortDir === types_1.SortDirection.asc;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyCellComponent.prototype, "isSortDescending", {
get: function () {
return this.sortDir === types_1.SortDirection.desc;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyCellComponent.prototype, "width", {
get: function () {
return this.column.width;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyCellComponent.prototype, "height", {
get: function () {
var height = this.rowHeight;
if (isNaN(height))
return height;
return height + 'px';
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyCellComponent.prototype, "value", {
get: function () {
if (!this.row || !this.column || !this.column.prop)
return '';
var val = utils_1.deepValueGetter(this.row, this.column.prop);
var userPipe = this.column.pipe;
if (userPipe)
return userPipe.transform(val);
if (val !== undefined)
return val;
return '';
},
enumerable: true,
configurable: true
});
DataTableBodyCellComponent.prototype.onFocus = function () {
this.isFocused = true;
};
DataTableBodyCellComponent.prototype.onBlur = function () {
this.isFocused = false;
};
DataTableBodyCellComponent.prototype.onClick = function (event) {
this.activate.emit({
type: 'click',
event: event,
row: this.row,
column: this.column,
value: this.value,
cellElement: this.element
});
};
DataTableBodyCellComponent.prototype.onDblClick = function (event) {
this.activate.emit({
type: 'dblclick',
event: event,
row: this.row,
column: this.column,
value: this.value,
cellElement: this.element
});
};
DataTableBodyCellComponent.prototype.onKeyDown = function (event) {
var keyCode = event.keyCode;
var isTargetCell = event.target === this.element;
var isAction = keyCode === utils_1.Keys.return ||
keyCode === utils_1.Keys.down ||
keyCode === utils_1.Keys.up ||
keyCode === utils_1.Keys.left ||
keyCode === utils_1.Keys.right;
if (isAction && isTargetCell) {
event.preventDefault();
event.stopPropagation();
this.activate.emit({
type: 'keydown',
event: event,
row: this.row,
column: this.column,
value: this.value,
cellElement: this.element
});
}
};
DataTableBodyCellComponent.prototype.onCheckboxChange = function (event) {
this.activate.emit({
type: 'checkbox',
event: event,
row: this.row,
column: this.column,
value: this.value,
cellElement: this.element
});
};
DataTableBodyCellComponent.prototype.calcSortDir = function (sorts) {
var _this = this;
if (!sorts)
return;
var sort = sorts.find(function (s) {
return s.prop === _this.column.prop;
});
if (sort)
return sort.dir;
};
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], DataTableBodyCellComponent.prototype, "row", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], DataTableBodyCellComponent.prototype, "column", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], DataTableBodyCellComponent.prototype, "rowHeight", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], DataTableBodyCellComponent.prototype, "isSelected", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Array),
__metadata('design:paramtypes', [Array])
], DataTableBodyCellComponent.prototype, "sorts", null);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], DataTableBodyCellComponent.prototype, "activate", void 0);
__decorate([
core_1.HostBinding('class.active'),
__metadata('design:type', Boolean)
], DataTableBodyCellComponent.prototype, "isFocused", void 0);
__decorate([
core_1.HostBinding('class.sort-active'),
__metadata('design:type', Boolean)
], DataTableBodyCellComponent.prototype, "isSortActive", null);
__decorate([
core_1.HostBinding('class.sort-asc'),
__metadata('design:type', Boolean)
], DataTableBodyCellComponent.prototype, "isSortAscending", null);
__decorate([
core_1.HostBinding('class.sort-desc'),
__metadata('design:type', Boolean)
], DataTableBodyCellComponent.prototype, "isSortDescending", null);
__decorate([
core_1.HostBinding('style.width.px'),
__metadata('design:type', Number)
], DataTableBodyCellComponent.prototype, "width", null);
__decorate([
core_1.HostBinding('style.height'),
__metadata('design:type', Object)
], DataTableBodyCellComponent.prototype, "height", null);
__decorate([
core_1.HostListener('focus'),
__metadata('design:type', Function),
__metadata('design:paramtypes', []),
__metadata('design:returntype', void 0)
], DataTableBodyCellComponent.prototype, "onFocus", null);
__decorate([
core_1.HostListener('blur'),
__metadata('design:type', Function),
__metadata('design:paramtypes', []),
__metadata('design:returntype', void 0)
], DataTableBodyCellComponent.prototype, "onBlur", null);
__decorate([
core_1.HostListener('click', ['$event']),
__metadata('design:type', Function),
__metadata('design:paramtypes', [MouseEvent]),
__metadata('design:returntype', void 0)
], DataTableBodyCellComponent.prototype, "onClick", null);
__decorate([
core_1.HostListener('dblclick', ['$event']),
__metadata('design:type', Function),
__metadata('design:paramtypes', [MouseEvent]),
__metadata('design:returntype', void 0)
], DataTableBodyCellComponent.prototype, "onDblClick", null);
__decorate([
core_1.HostListener('keydown', ['$event']),
__metadata('design:type', Function),
__metadata('design:paramtypes', [KeyboardEvent]),
__metadata('design:returntype', void 0)
], DataTableBodyCellComponent.prototype, "onKeyDown", null);
DataTableBodyCellComponent = __decorate([
core_1.Component({
selector: 'datatable-body-cell',
template: "\n <div class=\"datatable-body-cell-label\">\n <label\n *ngIf=\"column.checkboxable\" \n class=\"datatable-checkbox\">\n <input \n type=\"checkbox\"\n [checked]=\"isSelected\"\n (click)=\"onCheckboxChange($event)\" \n />\n </label>\n <span\n *ngIf=\"!column.cellTemplate\"\n [innerHTML]=\"value\">\n </span>\n <template\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngOutletContext]=\"{ value: value, row: row, column: column }\">\n </template>\n </div>\n ",
host: {
class: 'datatable-body-cell'
}
}),
__metadata('design:paramtypes', [core_1.ElementRef])
], DataTableBodyCellComponent);
return DataTableBodyCellComponent;
}());
exports.DataTableBodyCellComponent = DataTableBodyCellComponent;
/***/ },
/***/ "./src/components/body/body-row-wrapper.component.ts":
/***/ function(module, exports, __webpack_require__) {
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = __webpack_require__(0);
var DataTableRowWrapperComponent = (function () {
function DataTableRowWrapperComponent() {
this.expanded = false;
this.rowContextmenu = new core_1.EventEmitter(false);
}
DataTableRowWrapperComponent.prototype.onContextmenu = function ($event) {
this.rowContextmenu.emit({ event: $event, row: this.row });
};
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], DataTableRowWrapperComponent.prototype, "rowDetailTemplate", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], DataTableRowWrapperComponent.prototype, "detailRowHeight", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], DataTableRowWrapperComponent.prototype, "expanded", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], DataTableRowWrapperComponent.prototype, "row", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', Object)
], DataTableRowWrapperComponent.prototype, "rowContextmenu", void 0);
__decorate([
core_1.HostListener('contextmenu', ['$event']),
__metadata('design:type', Function),
__metadata('design:paramtypes', [MouseEvent]),
__metadata('design:returntype', void 0)
], DataTableRowWrapperComponent.prototype, "onContextmenu", null);
DataTableRowWrapperComponent = __decorate([
core_1.Component({
selector: 'datatable-row-wrapper',
template: "\n <ng-content></ng-content>\n <div \n *ngIf=\"expanded\"\n [style.height.px]=\"detailRowHeight\" \n class=\"datatable-row-detail\">\n <template\n *ngIf=\"rowDetailTemplate\"\n [ngTemplateOutlet]=\"rowDetailTemplate\"\n [ngOutletContext]=\"{ row: row }\">\n </template>\n </div>\n ",
host: {
class: 'datatable-row-wrapper'
}
}),
__metadata('design:paramtypes', [])
], DataTableRowWrapperComponent);
return DataTableRowWrapperComponent;
}());
exports.DataTableRowWrapperComponent = DataTableRowWrapperComponent;
/***/ },
/***/ "./src/components/body/body-row.component.ts":
/***/ function(module, exports, __webpack_require__) {
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = __webpack_require__(0);
var utils_1 = __webpack_require__("./src/utils/index.ts");
var DataTableBodyRowComponent = (function () {
function DataTableBodyRowComponent(element) {
this.activate = new core_1.EventEmitter();
this.element = element.nativeElement;
}
Object.defineProperty(DataTableBodyRowComponent.prototype, "columns", {
get: function () {
return this._columns;
},
set: function (val) {
this._columns = val;
this.recalculateColumns(val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyRowComponent.prototype, "innerWidth", {
get: function () {
return this._innerWidth;
},
set: function (val) {
this._innerWidth = val;
this.recalculateColumns();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyRowComponent.prototype, "isEvenRow", {
get: function () {
return this.row.$$index % 2 === 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyRowComponent.prototype, "isOddRow", {
get: function () {
return this.row.$$index % 2 !== 0;
},
enumerable: true,
configurable: true
});
DataTableBodyRowComponent.prototype.trackByGroups = function (index, colGroup) {
return colGroup.type;
};
DataTableBodyRowComponent.prototype.stylesByGroup = function (group) {
var widths = this.columnGroupWidths;
var offsetX = this.offsetX;
var styles = {
width: widths[group] + "px"
};
if (group === 'left') {
utils_1.translateXY(styles, offsetX, 0);
}
else if (group === 'right') {
var bodyWidth = parseInt(this.innerWidth + '', 0);
var totalDiff = widths.total - bodyWidth;
var offsetDiff = totalDiff - offsetX;
var offset = (offsetDiff + utils_1.scrollbarWidth) * -1;
utils_1.translateXY(styles, offset, 0);
}
return styles;
};
DataTableBodyRowComponent.prototype.onActivate = function (event, index) {
event.cellIndex = index;
event.rowElement = this.element;
this.activate.emit(event);
};
DataTableBodyRowComponent.prototype.onKeyDown = function (event) {
var keyCode = event.keyCode;
var isTargetRow = event.target === this.element;
var isAction = keyCode === utils_1.Keys.return ||
keyCode === utils_1.Keys.down ||
keyCode === utils_1.Keys.up ||
keyCode === utils_1.Keys.left ||
keyCode === utils_1.Keys.right;
if (isAction && isTargetRow) {
event.preventDefault();
event.stopPropagation();
this.activate.emit({
type: 'keydown',
event: event,
row: this.row,
rowElement: this.element
});
}
};
DataTableBodyRowComponent.prototype.recalculateColumns = function (val) {
if (val === void 0) { val = this.columns; }
var colsByPin = utils_1.columnsByPin(val);
this.columnsByPin = utils_1.columnsByPinArr(val);
this.columnGroupWidths = utils_1.columnGroupWidths(colsByPin, val);
};
__decorate([
core_1.Input(),
__metadata('design:type', Array),
__metadata('design:paramtypes', [Array])
], DataTableBodyRowComponent.prototype, "columns", null);
__decorate([
core_1.Input(),
__metadata('design:type', Number),
__metadata('design:paramtypes', [Number])
], DataTableBodyRowComponent.prototype, "innerWidth", null);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], DataTableBodyRowComponent.prototype, "row", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], DataTableBodyRowComponent.prototype, "offsetX", void 0);
__decorate([
core_1.HostBinding('style.height.px'),
core_1.Input(),
__metadata('design:type', Number)
], DataTableBodyRowComponent.prototype, "rowHeight", void 0);
__decorate([
core_1.HostBinding('class.active'),
core_1.Input(),
__metadata('design:type', Boolean)
], DataTableBodyRowComponent.prototype, "isSelected", void 0);
__decorate([
core_1.HostBinding('class.datatable-row-even'),
__metadata('design:type', Boolean)
], DataTableBodyRowComponent.prototype, "isEvenRow", null);
__decorate([
core_1.HostBinding('class.datatable-row-odd'),
__metadata('design:type', Boolean)
], DataTableBodyRowComponent.prototype, "isOddRow", null);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], DataTableBodyRowComponent.prototype, "activate", void 0);
__decorate([
core_1.HostListener('keydown', ['$event']),
__metadata('design:type', Function),
__metadata('design:paramtypes', [KeyboardEvent]),
__metadata('design:returntype', void 0)
], DataTableBodyRowComponent.prototype, "onKeyDown", null);
DataTableBodyRowComponent = __decorate([
core_1.Component({
selector: 'datatable-body-row',
template: "\n <div\n *ngFor=\"let colGroup of columnsByPin; let i = index; trackBy: trackByGroups\"\n class=\"datatable-row-{{colGroup.type}} datatable-row-group\"\n [ngStyle]=\"stylesByGroup(colGroup.type)\">\n <datatable-body-cell\n *ngFor=\"let column of colGroup.columns; let ii = index; trackBy: column?.$$id\"\n tabindex=\"-1\"\n [row]=\"row\"\n [isSelected]=\"isSelected\"\n [column]=\"column\"\n [rowHeight]=\"rowHeight\"\n (activate)=\"onActivate($event, ii)\">\n </datatable-body-cell>\n </div>\n ",
host: {
class: 'datatable-body-row'
}
}),
__metadata('design:paramtypes', [core_1.ElementRef])
], DataTableBodyRowComponent);
return DataTableBodyRowComponent;
}());
exports.DataTableBodyRowComponent = DataTableBodyRowComponent;
/***/ },
/***/ "./src/components/body/body.component.ts":
/***/ function(module, exports, __webpack_require__) {
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = __webpack_require__(0);
var utils_1 = __webpack_require__("./src/utils/index.ts");
var types_1 = __webpack_require__("./src/types/index.ts");
var scroller_component_1 = __webpack_require__("./src/components/body/scroller.component.ts");
var DataTableBodyComponent = (function () {
function DataTableBodyComponent() {
this.selected = [];
this.scroll = new core_1.EventEmitter();
this.page = new core_1.EventEmitter();
this.activate = new core_1.EventEmitter();
this.select = new core_1.EventEmitter();
this.detailToggle = new core_1.EventEmitter();
this.rowContextmenu = new core_1.EventEmitter(false);
this.rowHeightsCache = new utils_1.RowHeightCache();
this.temp = [];
this.offsetY = 0;
this.indexes = {};
// declare fn here so we can get access to the `this` property
this.rowTrackingFn = function (index, row) {
if (this.trackByProp) {
return row.$$index + "-" + this.trackByProp;
}
else {
return row.$$index;
}
}.bind(this);
}
Object.defineProperty(DataTableBodyComponent.prototype, "pageSize", {
get: function () {
return this._pageSize;
},
set: function (val) {
this._pageSize = val;
this.recalcLayout();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyComponent.prototype, "rows", {
get: function () {
return this._rows;
},
set: function (val) {
this._rows = val;
this.recalcLayout();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyComponent.prototype, "columns", {
get: function () {
return this._columns;
},
set: function (val) {
this._columns = val;
var colsByPin = utils_1.columnsByPin(val);
this.columnGroupWidths = utils_1.columnGroupWidths(colsByPin, val);
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyComponent.prototype, "offset", {
get: function () {
return this._offset;
},
set: function (val) {
this._offset = val;
this.recalcLayout();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyComponent.prototype, "rowCount", {
get: function () {
return this._rowCount;
},
set: function (val) {
this._rowCount = val;
this.recalcLayout();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyComponent.prototype, "bodyWidth", {
get: function () {
if (this.scrollbarH) {
return this.innerWidth + 'px';
}
else {
return '100%';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyComponent.prototype, "bodyHeight", {
get: function () {
return this._bodyHeight;
},
set: function (val) {
if (this.scrollbarV) {
this._bodyHeight = val + 'px';
}
else {
this._bodyHeight = 'auto';
}
this.recalcLayout();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyComponent.prototype, "selectEnabled", {
/**
* Returns if selection is enabled.
*
* @readonly
* @type {boolean}
* @memberOf DataTableBodyComponent
*/
get: function () {
return !!this.selectionType;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableBodyComponent.prototype, "scrollHeight", {
/**
* Property that would calculate the height of scroll bar
* based on the row heights cache for virtual scroll. Other scenarios
* calculate scroll height automatically (as height will be undefined).
*
* @readonly
* @type {number}
* @memberOf DataTableBodyComponent
*/
get: function () {
if (this.scrollbarV) {
return this.rowHeightsCache.query(this.rowCount - 1);
}
},
enumerable: true,
configurable: true
});
/**
* Updates the Y offset given a new offset.
*
* @param {number} [offset]
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.updateOffsetY = function (offset) {
if (this.scrollbarV && offset) {
// First get the row Index that we need to move to.
var rowIndex = this.pageSize * offset;
offset = this.rowHeightsCache.query(rowIndex - 1);
}
this.scroller.setOffset(offset || 0);
};
/**
* Body was scrolled, this is mainly useful for
* when a user is server-side pagination via virtual scroll.
*
* @param {*} event
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.onBodyScroll = function (event) {
var scrollYPos = event.scrollYPos;
var scrollXPos = event.scrollXPos;
// if scroll change, trigger update
// this is mainly used for header cell positions
if (this.offsetY !== scrollYPos || this.offsetX !== scrollXPos) {
this.scroll.emit({
offsetY: scrollYPos,
offsetX: scrollXPos
});
}
this.offsetY = scrollYPos;
this.offsetX = scrollXPos;
this.updateIndexes();
this.updatePage(event.direction);
this.updateRows();
};
/**
* Updates the page given a direction.
*
* @param {string} direction
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.updatePage = function (direction) {
var offset = this.indexes.first / this.pageSize;
if (direction === 'up') {
offset = Math.floor(offset);
}
else if (direction === 'down') {
offset = Math.ceil(offset);
}
if (direction !== undefined && !isNaN(offset)) {
this.page.emit({ offset: offset });
}
};
/**
* Updates the rows in the view port
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.updateRows = function () {
var _a = this.indexes, first = _a.first, last = _a.last;
var rowIndex = first;
var idx = 0;
var temp = [];
while (rowIndex < last && rowIndex < this.rowCount) {
var row = this.rows[rowIndex];
if (row) {
row.$$index = rowIndex;
temp[idx] = row;
}
idx++;
rowIndex++;
}
this.temp = temp;
};
/**
* Calculate row height based on the expanded state of the row.
*
* @param {*} row the row for which the height need to be calculated.
* @returns {number} height of the row.
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.getRowHeight = function (row) {
// Adding detail row height if its expanded.
return this.rowHeight +
(row.$$expanded === 1 ? this.detailRowHeight : 0);
};
/**
* Calculates the styles for the row so that the rows can be moved in 2D space
* during virtual scroll inside the DOM. In the below case the Y position is
* manipulated. As an example, if the height of row 0 is 30 px and row 1 is
* 100 px then following styles are generated:
*
* transform: translate3d(0px, 0px, 0px); -> row0
* transform: translate3d(0px, 30px, 0px); -> row1
* transform: translate3d(0px, 130px, 0px); -> row2
*
* Row heights have to be calculated based on the row heights cache as we wont
* be able to determine which row is of what height before hand. In the above
* case the positionY of the translate3d for row2 would be the sum of all the
* heights of the rows before it (i.e. row0 and row1).
*
* @param {*} row The row that needs to be placed in the 2D space.
* @returns {*} Returns the CSS3 style to be applied
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.getRowsStyles = function (row) {
var rowHeight = this.getRowHeight(row);
var styles = {
height: rowHeight + 'px'
};
if (this.scrollbarV) {
var idx = row ? row.$$index : 0;
// const pos = idx * rowHeight;
// The position of this row would be the sum of all row heights
// until the previous row position.
var pos = this.rowHeightsCache.query(idx - 1);
utils_1.translateXY(styles, 0, pos);
}
return styles;
};
/**
* Hides the loading indicator
*
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.hideIndicator = function () {
var _this = this;
setTimeout(function () { return _this.loadingIndicator = false; }, 500);
};
/**
* Updates the index of the rows in the viewport
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.updateIndexes = function () {
var first = 0;
var last = 0;
if (this.scrollbarV) {
// Calculation of the first and last indexes will be based on where the
// scrollY position would be at. The last index would be the one
// that shows up inside the view port the last.
var height = parseInt(this.bodyHeight, 0);
first = this.rowHeightsCache.getRowIndex(this.offsetY);
last = this.rowHeightsCache.getRowIndex(height + this.offsetY) + 1;
}
else {
first = Math.max(this.offset * this.pageSize, 0);
last = Math.min((first + this.pageSize), this.rowCount);
}
this.indexes = { first: first, last: last };
};
/**
* Refreshes the full Row Height cache. Should be used
* when the entire row array state has changed.
*
* @returns {void}
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.refreshRowHeightCache = function () {
if (!this.scrollbarV)
return;
// clear the previous row height cache if already present.
// this is useful during sorts, filters where the state of the
// rows array is changed.
this.rowHeightsCache.clearCache();
// Initialize the tree only if there are rows inside the tree.
if (this.rows && this.rows.length) {
this.rowHeightsCache.initCache(this.rows, this.rowHeight, this.detailRowHeight);
}
};
/**
* Gets the index for the view port
*
* @returns {number}
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.getAdjustedViewPortIndex = function () {
// Capture the row index of the first row that is visible on the viewport.
// If the scroll bar is just below the row which is highlighted then make that as the
// first index.
var viewPortFirstRowIndex = this.indexes.first;
if (this.scrollbarV) {
var offsetScroll = this.rowHeightsCache.query(viewPortFirstRowIndex - 1);
return offsetScroll <= this.offsetY ? viewPortFirstRowIndex - 1 : viewPortFirstRowIndex;
}
return viewPortFirstRowIndex;
};
/**
* Toggle the Expansion of the row i.e. if the row is expanded then it will
* collapse and vice versa. Note that the expanded status is stored as
* a part of the row object itself as we have to preserve the expanded row
* status in case of sorting and filtering of the row set.
*
* @param {*} row The row for which the expansion needs to be toggled.
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.toggleRowExpansion = function (row) {
// Capture the row index of the first row that is visible on the viewport.
var viewPortFirstRowIndex = this.getAdjustedViewPortIndex();
// If the detailRowHeight is auto --> only in case of non-virtualized scroll
if (this.scrollbarV) {
var detailRowHeight = this.detailRowHeight * (row.$$expanded ? -1 : 1);
this.rowHeightsCache.update(row.$$index, detailRowHeight);
}
// Update the toggled row and update the heights in the cache.
row.$$expanded ^= 1;
this.detailToggle.emit({
rows: [row],
currentIndex: viewPortFirstRowIndex
});
};
/**
* Expand/Collapse all the rows no matter what their state is.
*
* @param {boolean} expanded When true, all rows are expanded and when false, all rows will be collapsed.
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.toggleAllRows = function (expanded) {
var rowExpanded = expanded ? 1 : 0;
// Capture the row index of the first row that is visible on the viewport.
var viewPortFirstRowIndex = this.getAdjustedViewPortIndex();
for (var _i = 0, _a = this.rows; _i < _a.length; _i++) {
var row = _a[_i];
row.$$expanded = rowExpanded;
}
if (this.scrollbarV) {
// Refresh the full row heights cache since every row was affected.
this.refreshRowHeightCache();
}
// Emit all rows that have been expanded.
this.detailToggle.emit({
rows: this.rows,
currentIndex: viewPortFirstRowIndex
});
};
/**
* Recalculates the table
*
* @memberOf DataTableBodyComponent
*/
DataTableBodyComponent.prototype.recalcLayout = function () {
this.refreshRowHeightCache();
this.updateIndexes();
this.updateRows();
};
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], DataTableBodyComponent.prototype, "scrollbarV", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], DataTableBodyComponent.prototype, "scrollbarH", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], DataTableBodyComponent.prototype, "loadingIndicator", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], DataTableBodyComponent.prototype, "rowHeight", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], DataTableBodyComponent.prototype, "offsetX", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], DataTableBodyComponent.prototype, "detailRowHeight", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', String)
], DataTableBodyComponent.prototype, "emptyMessage", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], DataTableBodyComponent.prototype, "selectionType", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Array)
], DataTableBodyComponent.prototype, "selected", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], DataTableBodyComponent.prototype, "rowIdentity", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], DataTableBodyComponent.prototype, "rowDetailTemplate", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], DataTableBodyComponent.prototype, "selectCheck", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', String)
], DataTableBodyComponent.prototype, "trackByProp", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number),
__metadata('design:paramtypes', [Number])
], DataTableBodyComponent.prototype, "pageSize", null);
__decorate([
core_1.Input(),
__metadata('design:type', Array),
__metadata('design:paramtypes', [Array])
], DataTableBodyComponent.prototype, "rows", null);
__decorate([
core_1.Input(),
__metadata('design:type', Array),
__metadata('design:paramtypes', [Array])
], DataTableBodyComponent.prototype, "columns", null);
__decorate([
core_1.Input(),
__metadata('design:type', Number),
__metadata('design:paramtypes', [Number])
], DataTableBodyComponent.prototype, "offset", null);
__decorate([
core_1.Input(),
__metadata('design:type', Number),
__metadata('design:paramtypes', [Number])
], DataTableBodyComponent.prototype, "rowCount", null);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], DataTableBodyComponent.prototype, "innerWidth", void 0);
__decorate([
core_1.HostBinding('style.width'),
__metadata('design:type', String)
], DataTableBodyComponent.prototype, "bodyWidth", null);
__decorate([
core_1.Input(),
core_1.HostBinding('style.height'),
__metadata('design:type', Object),
__metadata('design:paramtypes', [Object])
], DataTableBodyComponent.prototype, "bodyHeight", null);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], DataTableBodyComponent.prototype, "scroll", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], DataTableBodyComponent.prototype, "page", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], DataTableBodyComponent.prototype, "activate", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], DataTableBodyComponent.prototype, "select", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], DataTableBodyComponent.prototype, "detailToggle", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', Object)
], DataTableBodyComponent.prototype, "rowContextmenu", void 0);
__decorate([
core_1.ViewChild(scroller_component_1.ScrollerComponent),
__metadata('design:type', scroller_component_1.ScrollerComponent)
], DataTableBodyComponent.prototype, "scroller", void 0);
DataTableBodyComponent = __decorate([
core_1.Component({
selector: 'datatable-body',
template: "\n <datatable-selection\n #selector\n [selected]=\"selected\"\n [rows]=\"temp\"\n [selectCheck]=\"selectCheck\"\n [selectEnabled]=\"selectEnabled\"\n [selectionType]=\"selectionType\"\n [rowIdentity]=\"rowIdentity\"\n (select)=\"select.emit($event)\"\n (activate)=\"activate.emit($event)\">\n <datatable-progress\n *ngIf=\"loadingIndicator\">\n </datatable-progress>\n <datatable-scroller\n *ngIf=\"rows?.length\"\n [scrollbarV]=\"scrollbarV\"\n [scrollbarH]=\"scrollbarH\"\n [scrollHeight]=\"scrollHeight\"\n [scrollWidth]=\"columnGroupWidths.total\"\n (scroll)=\"onBodyScroll($event)\">\n <datatable-row-wrapper\n *ngFor=\"let row of temp; let i = index; trackBy: rowTrackingFn;\"\n [ngStyle]=\"getRowsStyles(row)\"\n [rowDetailTemplate]=\"rowDetailTemplate\"\n [detailRowHeight]=\"detailRowHeight\"\n [row]=\"row\"\n [expanded]=\"row.$$expanded === 1\"\n (rowContextmenu)=\"rowContextmenu.emit($event)\">\n <datatable-body-row\n tabindex=\"-1\"\n [isSelected]=\"selector.getRowSelected(row)\"\n [innerWidth]=\"innerWidth\"\n [offsetX]=\"offsetX\"\n [columns]=\"columns\"\n [rowHeight]=\"rowHeight\"\n [row]=\"row\"\n (activate)=\"selector.onActivate($event, i)\">\n </datatable-body-row>\n </datatable-row-wrapper>\n </datatable-scroller>\n <div\n class=\"empty-row\"\n *ngIf=\"!rows?.length\"\n [innerHTML]=\"emptyMessage\">\n </div>\n </datatable-selection>\n ",
host: {
class: 'datatable-body'
}
}),
__metadata('design:paramtypes', [])
], DataTableBodyComponent);
return DataTableBodyComponent;
}());
exports.DataTableBodyComponent = DataTableBodyComponent;
/***/ },
/***/ "./src/components/body/index.ts":
/***/ function(module, exports, __webpack_require__) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(__webpack_require__("./src/components/body/body.component.ts"));
__export(__webpack_require__("./src/components/body/body-cell.component.ts"));
__export(__webpack_require__("./src/components/body/body-row.component.ts"));
__export(__webpack_require__("./src/components/body/progress-bar.component.ts"));
__export(__webpack_require__("./src/components/body/scroller.component.ts"));
__export(__webpack_require__("./src/components/body/body-row-wrapper.component.ts"));
__export(__webpack_require__("./src/components/body/selection.component.ts"));
/***/ },
/***/ "./src/components/body/progress-bar.component.ts":
/***/ function(module, exports, __webpack_require__) {
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = __webpack_require__(0);
var ProgressBarComponent = (function () {
function ProgressBarComponent() {
}
ProgressBarComponent = __decorate([
core_1.Component({
selector: 'datatable-progress',
template: "\n <div class=\"progress-linear\" role=\"progressbar\">\n <div class=\"container\">\n <div class=\"bar\"></div>\n </div>\n </div>\n ",
changeDetection: core_1.ChangeDetectionStrategy.OnPush
}),
__metadata('design:paramtypes', [])
], ProgressBarComponent);
return ProgressBarComponent;
}());
exports.ProgressBarComponent = ProgressBarComponent;
/***/ },
/***/ "./src/components/body/scroller.component.ts":
/***/ function(module, exports, __webpack_require__) {
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof