@covalent/data-table
Version:
Teradata UI Platform Data Table Module
822 lines (805 loc) • 39.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/forms', '@angular/material', '@angular/common'], factory) :
(factory((global.td = global.td || {}, global.td.dataTable = global.td.dataTable || {}),global.ng.core,global.ng.forms,global.ng.material,global.ng.common));
}(this, (function (exports,_angular_core,_angular_forms,_angular_material,_angular_common) { 'use strict';
var __extends = (window && window.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate$1 = (window && window.__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$1 = (window && window.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var TdDataTableTemplateDirective = (function (_super) {
__extends(TdDataTableTemplateDirective, _super);
function TdDataTableTemplateDirective(templateRef, viewContainerRef) {
_super.call(this, templateRef, viewContainerRef);
}
__decorate$1([
_angular_core.Input(),
__metadata$1('design:type', String)
], TdDataTableTemplateDirective.prototype, "tdDataTableTemplate", void 0);
TdDataTableTemplateDirective = __decorate$1([
_angular_core.Directive({ selector: '[tdDataTableTemplate]template' }),
__metadata$1('design:paramtypes', [_angular_core.TemplateRef, _angular_core.ViewContainerRef])
], TdDataTableTemplateDirective);
return TdDataTableTemplateDirective;
}(_angular_material.TemplatePortalDirective));
var __decorate = (window && window.__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 = (window && window.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var noop = function () {
// empty method
};
var TD_DATA_TABLE_CONTROL_VALUE_ACCESSOR = {
provide: _angular_forms.NG_VALUE_ACCESSOR,
useExisting: _angular_core.forwardRef(function () { return TdDataTableComponent; }),
multi: true,
};
(function (TdDataTableSortingOrder) {
TdDataTableSortingOrder[TdDataTableSortingOrder["Ascending"] = 'ASC'] = "Ascending";
TdDataTableSortingOrder[TdDataTableSortingOrder["Descending"] = 'DESC'] = "Descending";
})(exports.TdDataTableSortingOrder || (exports.TdDataTableSortingOrder = {}));
var TdDataTableComponent = (function () {
function TdDataTableComponent() {
/**
* Implemented as part of ControlValueAccessor.
*/
this._value = [];
/** Callback registered via registerOnChange (ControlValueAccessor) */
this._onChangeCallback = noop;
this._selectable = false;
this._multiple = true;
/** sorting */
this._sortable = false;
this._sortOrder = exports.TdDataTableSortingOrder.Ascending;
/** template fetching support */
this._templateMap = new Map();
/**
* sortChange?: function
* Event emitted when the column headers are clicked. [sortable] needs to be enabled.
* Emits an [ITdDataTableSortChangeEvent] implemented object.
*/
this.onSortChange = new _angular_core.EventEmitter();
/**
* rowSelect?: function
* Event emitted when a row is selected/deselected. [selectable] needs to be enabled.
* Emits an [ITdDataTableSelectEvent] implemented object.
*/
this.onRowSelect = new _angular_core.EventEmitter();
this.onChange = function (_) { return noop; };
this.onTouched = function () { return noop; };
}
Object.defineProperty(TdDataTableComponent.prototype, "value", {
get: function () { return this._value; },
/**
* Implemented as part of ControlValueAccessor.
*/
set: function (v) {
if (v !== this._value) {
this._value = v;
this._onChangeCallback(v);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableComponent.prototype, "data", {
/**
* data?: {[key: string]: any}[]
* Sets the data to be rendered as rows.
*/
set: function (data) {
this._data = data;
this.refresh();
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableComponent.prototype, "columns", {
get: function () {
var _this = this;
if (this._columns) {
return this._columns;
}
if (!this._data) {
return [];
}
this._columns = [];
// if columns is undefined, use key in [data] rows as name and label for column headers.
if (this._data.length > 0) {
var row = this._data[0];
Object.keys(row).forEach(function (k) {
if (!_this._columns.find(function (c) { return c.name === k; })) {
_this._columns.push({ name: k, label: k });
}
});
}
return this._columns;
},
/**
* columns?: ITdDataTableColumn[]
* Sets additional column configuration. [ITdDataTableColumn.name] has to exist in [data] as key.
* Defaults to [data] keys.
*/
set: function (cols) {
this._columns = cols;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableComponent.prototype, "selectable", {
/**
* selectable?: boolean
* Enables row selection events, hover and selected row states.
* Defaults to 'false'
*/
set: function (_selectable) {
this._selectable = _selectable !== '' ? (_selectable === 'true' || _selectable === true) : true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableComponent.prototype, "multiple", {
/**
* multiple?: boolean
* Enables multiple row selection. [selectable] needs to be enabled.
* Defaults to 'false'
*/
set: function (multiple) {
this._multiple = multiple !== '' ? (multiple === 'true' || multiple === true) : true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableComponent.prototype, "sortable", {
/**
* sortable?: boolean
* Enables sorting events, sort icons and active column states.
* Defaults to 'false'
*/
set: function (sortable) {
this._sortable = sortable !== '' ? (sortable === 'true' || sortable === true) : true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableComponent.prototype, "sortBy", {
/**
* sortBy?: string
* Sets the active sort column. [sortable] needs to be enabled.
*/
set: function (columnName) {
if (!columnName) {
return;
}
var column = this.columns.find(function (c) { return c.name === columnName; });
if (!column) {
throw '[sortBy] must be a valid column name';
}
this._sortBy = column;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableComponent.prototype, "sortOrder", {
/**
* sortOrder?: ['ASC' | 'DESC'] or TdDataTableSortingOrder
* Sets the sort order of the [sortBy] column. [sortable] needs to be enabled.
* Defaults to 'ASC' or TdDataTableSortingOrder.Ascending
*/
set: function (order) {
var sortOrder = order ? order.toUpperCase() : 'ASC';
if (sortOrder !== 'DESC' && sortOrder !== 'ASC') {
throw '[sortOrder] must be empty, ASC or DESC';
}
this._sortOrder = sortOrder === 'ASC' ?
exports.TdDataTableSortingOrder.Ascending : exports.TdDataTableSortingOrder.Descending;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableComponent.prototype, "hasData", {
get: function () {
return this._data.length > 0;
},
enumerable: true,
configurable: true
});
/**
* Loads templates and sets them in a map for faster access.
*/
TdDataTableComponent.prototype.ngAfterContentInit = function () {
for (var i = 0; i < this._templates.toArray().length; i++) {
this._templateMap.set(this._templates.toArray()[i].tdDataTableTemplate, this._templates.toArray()[i].templateRef);
}
};
/**
* Getter method for template references
*/
TdDataTableComponent.prototype.getTemplateRef = function (name) {
return this._templateMap.get(name);
};
/**
* Clears model (ngModel) of component by removing all values in array.
*/
TdDataTableComponent.prototype.clearModel = function () {
this._value.splice(0, this._value.length);
};
/**
* Refreshes data table and rerenders [data] and [columns]
*/
TdDataTableComponent.prototype.refresh = function () {
this.clearModel();
this._preprocessData();
};
/**
* Checks if all visible rows are selected.
*/
TdDataTableComponent.prototype.areAllSelected = function () {
var _this = this;
var match = this._data.find(function (d) { return !_this.isRowSelected(d); });
return typeof match === 'undefined';
};
/**
* Selects or clears all rows depending on 'checked' value.
*/
TdDataTableComponent.prototype.selectAll = function (checked) {
var _this = this;
if (checked) {
this._data.forEach(function (row) {
// skiping already selected rows
if (!_this.isRowSelected(row)) {
_this._value.push(row);
}
});
}
else {
this.clearModel();
}
};
/**
* Checks if row is selected
*/
TdDataTableComponent.prototype.isRowSelected = function (row) {
var _this = this;
// if selection is done by a [uniqueId] it uses it to compare, else it compares by reference.
if (this.uniqueId) {
return this._value ? this._value.filter(function (val) {
return val[_this.uniqueId] === row[_this.uniqueId];
}).length > 0 : false;
}
return this._value ? this._value.indexOf(row) > -1 : false;
};
/**
* Selects or clears a row depending on 'checked' value
*/
TdDataTableComponent.prototype.select = function (row, checked, event) {
var _this = this;
event.preventDefault();
// clears all the fields for the dataset
if (!this._multiple) {
this.clearModel();
}
if (checked) {
this._value.push(row);
}
else {
// if selection is done by a [uniqueId] it uses it to compare, else it compares by reference.
if (this.uniqueId) {
row = this._value.filter(function (val) {
return val[_this.uniqueId] === row[_this.uniqueId];
})[0];
}
var index = this._value.indexOf(row);
if (index > -1) {
this._value.splice(index, 1);
}
}
this.onRowSelect.emit({ row: row, selected: checked });
this.onChange(this._value);
};
/**
* Method handle for sort click event in column headers.
*/
TdDataTableComponent.prototype.handleSort = function (column) {
if (this._sortBy === column) {
this._sortOrder = this._sortOrder === exports.TdDataTableSortingOrder.Ascending ?
exports.TdDataTableSortingOrder.Descending : exports.TdDataTableSortingOrder.Ascending;
}
else {
this._sortBy = column;
this._sortOrder = exports.TdDataTableSortingOrder.Ascending;
}
this.onSortChange.next({ name: this._sortBy.name, order: this._sortOrder });
};
/**
* Implemented as part of ControlValueAccessor.
*/
TdDataTableComponent.prototype.writeValue = function (value) {
this.value = value;
};
TdDataTableComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
TdDataTableComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
TdDataTableComponent.prototype._preprocessData = function () {
var _this = this;
var data = JSON.parse(JSON.stringify(this._data));
this._data = data.map(function (row) {
_this.columns.filter(function (c) { return c.format; }).forEach(function (c) {
row[c.name] = c.format(row[c.name]);
});
return row;
});
};
__decorate([
_angular_core.ContentChildren(TdDataTableTemplateDirective),
__metadata('design:type', _angular_core.QueryList)
], TdDataTableComponent.prototype, "_templates", void 0);
__decorate([
_angular_core.Input(),
__metadata('design:type', Object),
__metadata('design:paramtypes', [Object])
], TdDataTableComponent.prototype, "value", null);
__decorate([
_angular_core.Input('uniqueId'),
__metadata('design:type', String)
], TdDataTableComponent.prototype, "uniqueId", void 0);
__decorate([
_angular_core.Input('data'),
__metadata('design:type', Array),
__metadata('design:paramtypes', [Array])
], TdDataTableComponent.prototype, "data", null);
__decorate([
_angular_core.Input('columns'),
__metadata('design:type', Array),
__metadata('design:paramtypes', [Array])
], TdDataTableComponent.prototype, "columns", null);
__decorate([
_angular_core.Input('selectable'),
__metadata('design:type', Object),
__metadata('design:paramtypes', [Object])
], TdDataTableComponent.prototype, "selectable", null);
__decorate([
_angular_core.Input('multiple'),
__metadata('design:type', Object),
__metadata('design:paramtypes', [Object])
], TdDataTableComponent.prototype, "multiple", null);
__decorate([
_angular_core.Input('sortable'),
__metadata('design:type', Object),
__metadata('design:paramtypes', [Object])
], TdDataTableComponent.prototype, "sortable", null);
__decorate([
_angular_core.Input('sortBy'),
__metadata('design:type', String),
__metadata('design:paramtypes', [String])
], TdDataTableComponent.prototype, "sortBy", null);
__decorate([
_angular_core.Input('sortOrder'),
__metadata('design:type', Object),
__metadata('design:paramtypes', [Object])
], TdDataTableComponent.prototype, "sortOrder", null);
__decorate([
_angular_core.Output('sortChange'),
__metadata('design:type', _angular_core.EventEmitter)
], TdDataTableComponent.prototype, "onSortChange", void 0);
__decorate([
_angular_core.Output('rowSelect'),
__metadata('design:type', _angular_core.EventEmitter)
], TdDataTableComponent.prototype, "onRowSelect", void 0);
TdDataTableComponent = __decorate([
_angular_core.Component({
providers: [TD_DATA_TABLE_CONTROL_VALUE_ACCESSOR],
selector: 'td-data-table',
styles: [".md-table-container { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table.td-data-table.md-selectable tbody > tr.td-data-table-row { transition: background-color 0.2s; } table.td-data-table.md-selectable td.td-data-table-cell:first-child, table.td-data-table.md-selectable th.td-data-table-column:first-child { width: 20px; padding: 0 24px; } table.td-data-table.md-selectable td.td-data-table-cell:nth-child(2), table.td-data-table.md-selectable th.td-data-table-column:nth-child(2) { padding-left: 0px; } table.td-data-table td.md-checkbox-cell, table.td-data-table th.md-checkbox-column { width: 18px; font-size: 0 !important; } table.td-data-table td.md-checkbox-cell md-checkbox /deep/ .md-checkbox-inner-container, table.td-data-table th.md-checkbox-column md-checkbox /deep/ .md-checkbox-inner-container { width: 18px; height: 18px; margin: 0; } "],
template: "<div class=\"md-table-container\" *ngIf=\"hasData\" title> <table td-data-table [class.md-selectable]=\"_selectable\"> <th td-data-table-column class=\"md-checkbox-column\" *ngIf=\"_selectable\"> <md-checkbox #checkBoxAll *ngIf=\"_multiple\" [checked]=\"areAllSelected()\" (click)=\"selectAll(!checkBoxAll.checked)\"> </md-checkbox> </th> <th td-data-table-column *ngFor=\"let column of columns\" [name]=\"column.name\" [numeric]=\"column.numeric\" [active]=\"_sortable && column === _sortBy\" [sortable]=\"_sortable\" [sortOrder]=\"_sortOrder\" (sortChange)=\"handleSort(column)\"> <span *ngIf=\"column.tooltip\" [md-tooltip]=\"column.tooltip\">{{column.label}}</span> <span *ngIf=\"!column.tooltip\">{{column.label}}</span> </th> <tr td-data-table-row [class.md-selected]=\"_selectable && isRowSelected(row)\" *ngFor=\"let row of _data\" (click)=\"_selectable && select(row, !isRowSelected(row), $event)\"> <td td-data-table-cell class=\"md-checkbox-cell\" *ngIf=\"_selectable\"> <md-checkbox [checked]=\"isRowSelected(row)\"> </md-checkbox> </td> <td td-data-table-cell [numeric]=\"column.numeric\" *ngFor=\"let column of columns\"> <span class=\"md-body-1\" *ngIf=\"!getTemplateRef(column.name)\">{{row[column.name]}}</span> <template *ngIf=\"getTemplateRef(column.name)\" [ngTemplateOutlet]=\"getTemplateRef(column.name)\" [ngOutletContext]=\"{ value: row[column.name], row: row, column: column.name }\"> </template> </td> </tr> </table> </div> <div class=\"md-padding\" *ngIf=\"!hasData\" layout=\"row\" layout-align=\"center center\"> <h3>No results</h3> </div> ",
}),
__metadata('design:paramtypes', [])
], TdDataTableComponent);
return TdDataTableComponent;
}());
var __decorate$2 = (window && window.__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$2 = (window && window.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var TdDataTableService = (function () {
function TdDataTableService() {
}
/**
* params:
* - data: any[]
* - searchTerm: string
* - ignoreCase: boolean = false
*
* Searches [data] parameter for [searchTerm] matches and returns a new array with them.
*/
TdDataTableService.prototype.filterData = function (data, searchTerm, ignoreCase) {
if (ignoreCase === void 0) { ignoreCase = false; }
var filter = searchTerm ? (ignoreCase ? searchTerm.toLowerCase() : searchTerm) : '';
if (filter) {
data = data.filter(function (item) {
var res = Object.keys(item).find(function (key) {
var preItemValue = ('' + item[key]);
var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
return itemValue.indexOf(filter) > -1;
});
return !(typeof res === 'undefined');
});
}
return data;
};
/**
* params:
* - data: any[]
* - sortBy: string
* - sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending
*
* Sorts [data] parameter by [sortBy] and [sortOrder] and returns the sorted data.
*/
TdDataTableService.prototype.sortData = function (data, sortBy, sortOrder) {
if (sortOrder === void 0) { sortOrder = exports.TdDataTableSortingOrder.Ascending; }
if (sortBy) {
data.sort(function (a, b) {
var compA = a[sortBy];
var compB = b[sortBy];
var direction = 0;
if (!Number.isNaN(Number.parseFloat(compA)) && !Number.isNaN(Number.parseFloat(compB))) {
direction = Number.parseFloat(compA) - Number.parseFloat(compB);
}
else {
if (compA < compB) {
direction = -1;
}
else if (compA > compB) {
direction = 1;
}
}
return direction * (sortOrder === exports.TdDataTableSortingOrder.Descending ? -1 : 1);
});
}
return data;
};
/**
* params:
* - data: any[]
* - fromRow: number
* - toRow: : number
*
* Returns a section of the [data] parameter starting from [fromRow] and ending in [toRow].
*/
TdDataTableService.prototype.pageData = function (data, fromRow, toRow) {
if (fromRow >= 1) {
data = data.slice(fromRow - 1, toRow);
}
return data;
};
TdDataTableService = __decorate$2([
_angular_core.Injectable(),
__metadata$2('design:paramtypes', [])
], TdDataTableService);
return TdDataTableService;
}());
var __decorate$3 = (window && window.__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$3 = (window && window.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var TdDataTableColumnComponent = (function () {
function TdDataTableColumnComponent(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._sortOrder = exports.TdDataTableSortingOrder.Ascending;
/**
* name?: string
* Sets unique column [name] for [sortable] events.
*/
this.name = '';
/**
* sortable?: boolean
* Enables sorting events, sort icons and active column states.
* Defaults to 'false'
*/
this.sortable = false;
/**
* active?: boolean
* Sets column to active state when 'true'.
* Defaults to 'false'
*/
this.active = false;
/**
* numeric?: boolean
* Makes column follow the numeric data-table specs and sort icon.
* Defaults to 'false'
*/
this.numeric = false;
/**
* sortChange?: function
* Event emitted when the column headers are clicked. [sortable] needs to be enabled.
* Emits an [ITdDataTableSortChangeEvent] implemented object.
*/
this.onSortChange = new _angular_core.EventEmitter();
this._renderer.setElementClass(this._elementRef.nativeElement, 'td-data-table-column', true);
}
Object.defineProperty(TdDataTableColumnComponent.prototype, "sortOrder", {
/**
* sortOrder?: ['ASC' | 'DESC'] or TdDataTableSortingOrder
* Sets the sort order of column.
* Defaults to 'ASC' or TdDataTableSortingOrder.Ascending
*/
set: function (order) {
var sortOrder = order ? order.toUpperCase() : 'ASC';
if (sortOrder !== 'DESC' && sortOrder !== 'ASC') {
throw '[sortOrder] must be empty, ASC or DESC';
}
this._sortOrder = sortOrder === 'ASC' ?
exports.TdDataTableSortingOrder.Ascending : exports.TdDataTableSortingOrder.Descending;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableColumnComponent.prototype, "bindClickable", {
get: function () {
return this.sortable;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableColumnComponent.prototype, "bingSortable", {
get: function () {
return this.sortable;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableColumnComponent.prototype, "bindActive", {
get: function () {
return this.active;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdDataTableColumnComponent.prototype, "bindNumeric", {
get: function () {
return this.numeric;
},
enumerable: true,
configurable: true
});
TdDataTableColumnComponent.prototype.handleSortBy = function () {
this.onSortChange.emit({ name: name, order: this._sortOrder });
};
TdDataTableColumnComponent.prototype.isAscending = function () {
return this._sortOrder === exports.TdDataTableSortingOrder.Ascending;
};
TdDataTableColumnComponent.prototype.isDescending = function () {
return this._sortOrder === exports.TdDataTableSortingOrder.Descending;
};
__decorate$3([
_angular_core.Input('name'),
__metadata$3('design:type', String)
], TdDataTableColumnComponent.prototype, "name", void 0);
__decorate$3([
_angular_core.Input('sortable'),
__metadata$3('design:type', Boolean)
], TdDataTableColumnComponent.prototype, "sortable", void 0);
__decorate$3([
_angular_core.Input('active'),
__metadata$3('design:type', Boolean)
], TdDataTableColumnComponent.prototype, "active", void 0);
__decorate$3([
_angular_core.Input('numeric'),
__metadata$3('design:type', Boolean)
], TdDataTableColumnComponent.prototype, "numeric", void 0);
__decorate$3([
_angular_core.Input('sortOrder'),
__metadata$3('design:type', Object),
__metadata$3('design:paramtypes', [Object])
], TdDataTableColumnComponent.prototype, "sortOrder", null);
__decorate$3([
_angular_core.Output('sortChange'),
__metadata$3('design:type', _angular_core.EventEmitter)
], TdDataTableColumnComponent.prototype, "onSortChange", void 0);
__decorate$3([
_angular_core.HostBinding('class.md-clickable'),
__metadata$3('design:type', Boolean)
], TdDataTableColumnComponent.prototype, "bindClickable", null);
__decorate$3([
_angular_core.HostBinding('class.md-sortable'),
__metadata$3('design:type', Boolean)
], TdDataTableColumnComponent.prototype, "bingSortable", null);
__decorate$3([
_angular_core.HostBinding('class.md-active'),
__metadata$3('design:type', Boolean)
], TdDataTableColumnComponent.prototype, "bindActive", null);
__decorate$3([
_angular_core.HostBinding('class.md-numeric'),
__metadata$3('design:type', Boolean)
], TdDataTableColumnComponent.prototype, "bindNumeric", null);
TdDataTableColumnComponent = __decorate$3([
_angular_core.Component({
/* tslint:disable-next-line */
selector: 'th[td-data-table-column]',
styles: [":host { font-size: 12px; font-weight: bold; white-space: nowrap; padding: 0 28px 0 28px; position: relative; vertical-align: middle; text-align: left; } :host:first-child { padding-left: 24px; } :host:last-child { padding-right: 24px; } :host md-icon { height: 16px; width: 16px; font-size: 16px !important; line-height: 16px !important; } :host md-icon.td-data-table-sort-icon { opacity: 0; transition: transform 0.25s, opacity 0.25s; } :host md-icon.td-data-table-sort-icon.md-asc { transform: rotate(0deg); } :host md-icon.td-data-table-sort-icon.md-desc { transform: rotate(180deg); } :host:hover.md-sortable md-icon.td-data-table-sort-icon, :host.md-active.md-sortable md-icon.td-data-table-sort-icon { opacity: 1; } :host > * { vertical-align: middle; } :host.md-clickable { cursor: pointer; } :host.md-clickable:focus { outline: none; } :host md-icon.td-data-table-sort-icon { position: absolute; } :host.md-numeric { text-align: right; } :host.md-numeric md-icon.td-data-table-sort-icon { margin-left: -22px; } :host:not(.md-numeric) md-icon.td-data-table-sort-icon { margin-left: 6px; } "],
template: "<md-icon class=\"td-data-table-sort-icon\" *ngIf=\"sortable && numeric\" [class.md-asc]=\"(!(active) || isAscending())\" [class.md-desc]=\"(active && isDescending())\" (click)=\"sortable && handleSortBy()\"> arrow_upward </md-icon> <span class=\"md-caption\" (click)=\"sortable && handleSortBy()\"> <ng-content></ng-content> </span> <md-icon class=\"td-data-table-sort-icon\" *ngIf=\"sortable && !numeric\" [class.md-asc]=\"(!(active) || isAscending())\" [class.md-desc]=\"(active && isDescending())\" (click)=\"sortable && handleSortBy()\"> arrow_upward </md-icon>",
}),
__metadata$3('design:paramtypes', [_angular_core.ElementRef, _angular_core.Renderer])
], TdDataTableColumnComponent);
return TdDataTableColumnComponent;
}());
var __decorate$4 = (window && window.__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$4 = (window && window.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var TdDataTableCellComponent = (function () {
function TdDataTableCellComponent(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
/**
* numeric?: boolean
* Makes cell follow the numeric data-table specs.
* Defaults to 'false'
*/
this.numeric = false;
this._renderer.setElementClass(this._elementRef.nativeElement, 'td-data-table-cell', true);
}
Object.defineProperty(TdDataTableCellComponent.prototype, "bindNumeric", {
get: function () {
return this.numeric;
},
enumerable: true,
configurable: true
});
__decorate$4([
_angular_core.Input('numeric'),
__metadata$4('design:type', Boolean)
], TdDataTableCellComponent.prototype, "numeric", void 0);
__decorate$4([
_angular_core.HostBinding('class.md-numeric'),
__metadata$4('design:type', Boolean)
], TdDataTableCellComponent.prototype, "bindNumeric", null);
TdDataTableCellComponent = __decorate$4([
_angular_core.Component({
/* tslint:disable-next-line */
selector: 'td[td-data-table-cell]',
styles: [":host { font-size: 13px; vertical-align: middle; text-align: left; padding: 0 28px 0 28px; } :host:first-child { padding-left: 24px; } :host:last-child { padding-right: 24px; } :host > * { vertical-align: middle; } :host.md-clickable { cursor: pointer; } :host.md-clickable:focus { outline: none; } :host.md-numeric { text-align: right; } "],
template: "<ng-content></ng-content>",
}),
__metadata$4('design:paramtypes', [_angular_core.ElementRef, _angular_core.Renderer])
], TdDataTableCellComponent);
return TdDataTableCellComponent;
}());
var __decorate$5 = (window && window.__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$5 = (window && window.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var TdDataTableRowComponent = (function () {
function TdDataTableRowComponent(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._renderer.setElementClass(this._elementRef.nativeElement, 'td-data-table-row', true);
}
TdDataTableRowComponent = __decorate$5([
_angular_core.Component({
/* tslint:disable-next-line */
selector: 'tr[td-data-table-row]',
styles: [":host { border-bottom-style: solid; border-bottom-width: 1px; } tbody > :host { height: 48px; } thead > :host { height: 56px; } "],
template: "<ng-content></ng-content>",
}),
__metadata$5('design:paramtypes', [_angular_core.ElementRef, _angular_core.Renderer])
], TdDataTableRowComponent);
return TdDataTableRowComponent;
}());
var __decorate$6 = (window && window.__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$6 = (window && window.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var TdDataTableTableComponent = (function () {
function TdDataTableTableComponent(_elementRef, _renderer) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._renderer.setElementClass(this._elementRef.nativeElement, 'td-data-table', true);
}
TdDataTableTableComponent = __decorate$6([
_angular_core.Component({
/* tslint:disable-next-line */
selector: 'table[td-data-table]',
styles: [":host { width: 100%; border-spacing: 0; overflow: hidden; border-collapse: collapse; } "],
template: "<thead> <tr td-data-table-row> <ng-content select=th[td-data-table-column]></ng-content> </tr> </thead> <ng-content></ng-content>",
}),
__metadata$6('design:paramtypes', [_angular_core.ElementRef, _angular_core.Renderer])
], TdDataTableTableComponent);
return TdDataTableTableComponent;
}());
var __decorate$7 = (window && window.__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$7 = (window && window.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var TD_DATA_TABLE_DIRECTIVES = [
TdDataTableComponent,
TdDataTableTemplateDirective,
TdDataTableColumnComponent,
TdDataTableCellComponent,
TdDataTableRowComponent,
TdDataTableTableComponent,
];
var CovalentDataTableModule = (function () {
function CovalentDataTableModule() {
}
CovalentDataTableModule.forRoot = function () {
return {
ngModule: CovalentDataTableModule,
providers: [TdDataTableService],
};
};
CovalentDataTableModule = __decorate$7([
_angular_core.NgModule({
imports: [
_angular_material.MaterialModule.forRoot(),
_angular_common.CommonModule,
],
declarations: [
TD_DATA_TABLE_DIRECTIVES,
],
exports: [
TD_DATA_TABLE_DIRECTIVES,
],
}),
__metadata$7('design:paramtypes', [])
], CovalentDataTableModule);
return CovalentDataTableModule;
}());
exports.TdDataTableComponent = TdDataTableComponent;
exports.TdDataTableService = TdDataTableService;
exports.TdDataTableColumnComponent = TdDataTableColumnComponent;
exports.TdDataTableCellComponent = TdDataTableCellComponent;
exports.TdDataTableRowComponent = TdDataTableRowComponent;
exports.TdDataTableTableComponent = TdDataTableTableComponent;
exports.CovalentDataTableModule = CovalentDataTableModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));