data-table-kit
Version:
A simple datatable/datagrid for Angular projects
1,180 lines (1,174 loc) • 51.4 kB
JavaScript
import { Directive, TemplateRef, ViewContainerRef, Input, Component, ChangeDetectionStrategy, Inject, ViewChild, ContentChildren, Output, EventEmitter, NgModule } from '@angular/core';
import { __values } from 'tslib';
import { DOCUMENT, CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DataTableColumnDirective = /** @class */ (function () {
function DataTableColumnDirective(_columnTemplate, _viewContainerRef) {
this._columnTemplate = _columnTemplate;
this._viewContainerRef = _viewContainerRef;
this.align = "left";
this.verticalAlign = "top";
this.groupColumns = 0;
}
Object.defineProperty(DataTableColumnDirective.prototype, "header", {
get: /**
* @return {?}
*/
function () {
return this._header;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (Array.isArray(value)) {
this._header = value;
}
else {
this._header = [value];
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableColumnDirective.prototype, "sort", {
get: /**
* @return {?}
*/
function () {
return this._sortfields;
},
set: /**
* @param {?} values
* @return {?}
*/
function (values) {
if (Array.isArray(values)) {
this._sortfields = values;
}
else {
this._sortfields = [values];
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableColumnDirective.prototype, "dtcStyle", {
get: /**
* @return {?}
*/
function () {
/** @type {?} */
var columnStyle = {
"text-align": this.align,
"vertical-align": this.verticalAlign
};
if (this.columnWidth != null && this.columnWidth.length > 0) {
columnStyle["width"] = this.columnWidth;
}
return columnStyle;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTableColumnDirective.prototype, "ColumnTemplate", {
get: /**
* @return {?}
*/
function () {
return this._columnTemplate;
},
enumerable: true,
configurable: true
});
DataTableColumnDirective.decorators = [
{ type: Directive, args: [{
selector: "[data-table-column]"
},] }
];
/** @nocollapse */
DataTableColumnDirective.ctorParameters = function () { return [
{ type: TemplateRef },
{ type: ViewContainerRef }
]; };
DataTableColumnDirective.propDecorators = {
align: [{ type: Input, args: ["data-table-columnAlign",] }],
verticalAlign: [{ type: Input, args: ["data-table-columnVerticalAlign",] }],
header: [{ type: Input, args: ["data-table-columnHeader",] }],
sort: [{ type: Input, args: ["data-table-columnSort",] }],
groupColumns: [{ type: Input, args: ["data-table-columnGroupColumns",] }],
groupHeader: [{ type: Input, args: ["data-table-columnGroupHeader",] }],
sortFieldName: [{ type: Input, args: ["data-table-columnSortFieldName",] }],
columnWidth: [{ type: Input, args: ["data-table-columnWidth",] }]
};
return DataTableColumnDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DataTableChildDirective = /** @class */ (function () {
function DataTableChildDirective(_childTemplate, _viewContainerRef) {
this._childTemplate = _childTemplate;
this._viewContainerRef = _viewContainerRef;
}
Object.defineProperty(DataTableChildDirective.prototype, "ChildTemplate", {
get: /**
* @return {?}
*/
function () {
return this._childTemplate;
},
enumerable: true,
configurable: true
});
DataTableChildDirective.decorators = [
{ type: Directive, args: [{
selector: "[data-table-child]"
},] }
];
/** @nocollapse */
DataTableChildDirective.ctorParameters = function () { return [
{ type: TemplateRef },
{ type: ViewContainerRef }
]; };
return DataTableChildDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DataTableKitComponent = /** @class */ (function () {
function DataTableKitComponent(doc) {
this.doc = doc;
this.datacount = 0;
this.allowResize = true;
this.pagesize = 0;
this.collapseChildren = null;
this.multiSelect = false;
this.bufferedPageNoChanged = new EventEmitter();
this.sortOrderChanged = new EventEmitter();
this.selectionChanged = new EventEmitter();
this.editStarted = new EventEmitter();
this.editCompleted = new EventEmitter();
this.editCancelled = new EventEmitter();
this.pageno = 0;
this.columnCount = 0;
this.resizeInfo = null;
this.haschildren = false;
this.sortInfo = [];
this.gridid = "g" + this.uuidv4();
this.selectedRows = [];
this.editingRow = -1;
this.gridStyle = {
thSep: {
padding: "0px",
"border-top": "1px solid lightgray",
"border-bottom": "1px solid lightgray",
"border-right": "1px solid lightgray",
width: "4px"
},
thSepGroup: {
padding: "0px",
"border-top": "1px solid lightgray",
"border-bottom": "0px solid lightgray",
"border-right": "1px solid lightgray",
width: "4px"
},
tdSep: {
width: "1px",
padding: "0px"
},
th: {
"vertical-align": "bottom",
"border-top": "1px solid lightgray",
"border-bottom": "1px solid lightgray"
},
thGroup: {
"text-align": "center",
"vertical-align": "bottom",
"border-top": "1px solid lightgray",
"border-bottom": "0px solid lightgray"
},
thGroupLabel: {
"text-align": "center",
"vertical-align": "bottom",
"border-top": "1px solid lightgray",
"border-bottom": "1px solid lightgray"
},
td: {}
};
this.gridClass = {
thSep: "",
tdSep: "",
th: "data-table-col-header",
td: "data-table-col-data"
};
}
/**
* @return {?}
*/
DataTableKitComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this.haschildren = this.Children != null && this.Children.length > 0;
this.columnCount = this.Columns == null ? 0 : this.Columns.length * 2 - 1;
this.setupColumns();
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
// following code is to fix columns from resizing on page change and edit
if (this.TableHeader != null && this.TableHeader.nativeElement != null && this.TableHeader.nativeElement.children != null) {
/** @type {?} */
var children = this.TableHeader.nativeElement.children;
for (var i = 0; i < (children.length - 1); i++) {
if (children[i] != null) {
children[i].style.width = children[i].clientWidth + "px";
}
}
}
};
/**
* @param {?} changes
* @return {?}
*/
DataTableKitComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes["allowResize"]) {
if (this.allowResize) {
this.gridStyle.thSep["cursor"] = "col-resize";
}
else {
delete this.gridStyle.thSep["cursor"];
}
}
if (changes["tabledata"] || changes["pagesize"] || changes["datacount"]) {
this.analyzeTableData();
this.updatePageData();
}
if (changes["tabledata"]) {
if (this._viewContainerRef != null) {
this._viewContainerRef.createEmbeddedView(this._columnTemplate);
}
}
};
/**
* @param {?} gcColumn
* @return {?}
*/
DataTableKitComponent.prototype.headers = /**
* @param {?} gcColumn
* @return {?}
*/
function (gcColumn) {
return gcColumn.headers;
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.setupColumns = /**
* @return {?}
*/
function () {
/** @type {?} */
var groupHeaders = [];
/** @type {?} */
var found = false;
if (this.Columns != null) {
/** @type {?} */
var columns = this.Columns.toArray();
/** @type {?} */
var noWidthColumns = columns.filter((/**
* @param {?} p
* @return {?}
*/
function (p) { return p.columnWidth == null || p.columnWidth == ""; }));
if (noWidthColumns.length > 1) {
/** @type {?} */
var equalWidth = Math.round(100 / noWidthColumns.length) + "px";
noWidthColumns.splice(noWidthColumns.length - 1, 1);
//noWidthColumns.forEach(p=>p.columnWidth=equalWidth);
}
//update group header to empty for columns where it is not specified
/** @type {?} */
var i = 0;
while (i < columns.length) {
/** @type {?} */
var group = {};
group["colStyle"] = this.gridStyle.thGroup;
if (columns[i] != null) {
if (columns[i].groupHeader != null) {
found = true;
group["headers"] = columns[i].groupHeader;
if (!Array.isArray(group["headers"])) {
group["headers"] = [group["headers"]];
}
}
if (columns[i].groupColumns != null && columns[i].groupColumns > 1) {
found = true;
group["colspan"] = columns[i].groupColumns * 2 - 1;
i = i + columns[i].groupColumns - 1;
}
if (found) {
group["colStyle"] = this.gridStyle.thGroupLabel;
}
}
groupHeaders.push(group);
i = i + 1;
}
}
if (found) {
this.groups = groupHeaders;
this.gridStyle.th["border-top"] = "0px solid lightgray";
this.gridStyle.thSep["border-top"] = "0px solid lightgray";
}
else {
this.groups = null;
}
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.analyzeTableData = /**
* @return {?}
*/
function () {
/** @type {?} */
var datalength = 0;
if (this.datacount != 0) {
datalength = this.datacount;
}
else if (this.tabledata != null) {
datalength = this.tabledata.length;
}
this.fadein = null;
this.totalpages = [];
if (this.pagesize != 0 && datalength > this.pagesize) {
/** @type {?} */
var pagecount = Math.ceil(datalength / this.pagesize);
this.totalpages = [];
for (var i = 0; i < pagecount; i++) {
this.totalpages.push(i + 1);
}
}
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.updatePageData = /**
* @return {?}
*/
function () {
if (this.pagesize == 0 ||
this.tabledata == null ||
this.tabledata.length <= this.pagesize) {
this.pagedata = this.tabledata;
this.fadein = null;
}
else {
/** @type {?} */
var start = this.pageno * this.pagesize;
/** @type {?} */
var end = start + this.pagesize * 1;
if (this.bufferedpageno != null && this.bufferedpagecount != null) {
/** @type {?} */
var currentFrom = this.bufferedpageno * this.bufferedpagecount * this.pagesize;
/** @type {?} */
var currentTo = currentFrom + this.tabledata.length - 1;
if (start < currentFrom || start > currentTo) {
/** @type {?} */
var refreshPage = Math.floor(start / (this.bufferedpagecount * this.pagesize));
this.bufferedPageNoChanged.emit({
newPageNo: refreshPage,
currentPageNo: this.bufferedpageno
});
return;
}
else {
start -= currentFrom;
end -= currentFrom;
}
}
this.pagedata = this.tabledata.slice(start, end);
if (this.pageno > 0) {
this.fadein = "data-table-fade-in";
}
}
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.setFirstPage = /**
* @return {?}
*/
function () {
if (this.pageno > 0) {
/** @type {?} */
var page = 0;
this.setPage(page);
}
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.setPrevPage = /**
* @return {?}
*/
function () {
if (this.pageno > 0) {
/** @type {?} */
var page = this.pageno - 1;
this.setPage(page);
}
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.setNextPage = /**
* @return {?}
*/
function () {
if (this.pageno < this.totalpages.length - 1) {
/** @type {?} */
var page = this.pageno + 1;
this.setPage(page);
}
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.setLastPage = /**
* @return {?}
*/
function () {
if (this.pageno < this.totalpages.length - 1) {
/** @type {?} */
var page = this.totalpages.length - 1;
this.setPage(page);
}
};
/**
* @param {?} pageNo
* @return {?}
*/
DataTableKitComponent.prototype.gotoPage = /**
* @param {?} pageNo
* @return {?}
*/
function (pageNo) {
if (pageNo !== "") {
/** @type {?} */
var page = parseInt(pageNo);
if (page > 0 && page <= this.totalpages.length) {
page--;
this.setPage(page);
}
}
};
/**
* @param {?} page
* @return {?}
*/
DataTableKitComponent.prototype.setPage = /**
* @param {?} page
* @return {?}
*/
function (page) {
if (this.pageno != page) {
this.pageno = page;
this.updatePageData();
}
};
/**
* @param {?} e
* @return {?}
*/
DataTableKitComponent.prototype.resizeColumn = /**
* @param {?} e
* @return {?}
*/
function (e) {
if (!this.allowResize) {
return;
}
if (this.resizeInfo != null && e != null) {
if (e.buttons == 0) {
this.resizeInfo = null;
}
else {
/** @type {?} */
var diff = this.resizeInfo.startX - e.pageX;
/** @type {?} */
var width = this.resizeInfo.element.clientWidth;
/** @type {?} */
var newWidth = width - (diff + 2);
if (newWidth > 0) {
if (this.resizeInfo.fixColumns > 0) {
for (var i = 0; i < this.resizeInfo.fixColumns; i++) {
if (i % 2 == 0 && this.resizeInfo.children.length > i) {
this.resizeInfo.children[i].style.width =
this.resizeInfo.children[i].clientWidth + "px";
}
}
this.resizeInfo.fixColumns = 0;
}
this.resizeInfo.startX = e.pageX;
this.resizeInfo.element.style.width = newWidth + "px";
}
}
}
};
/**
* @param {?} e
* @return {?}
*/
DataTableKitComponent.prototype.resizeColumnEnd = /**
* @param {?} e
* @return {?}
*/
function (e) {
if (!this.allowResize) {
return;
}
this.resizeInfo = null;
};
/**
* @param {?} e
* @return {?}
*/
DataTableKitComponent.prototype.resizeColumnStart = /**
* @param {?} e
* @return {?}
*/
function (e) {
if (!this.allowResize) {
return;
}
if (e != null && e.target != null) {
/** @type {?} */
var target = e.target;
/** @type {?} */
var parent_1 = target.parentElement;
if (parent_1 != null) {
/** @type {?} */
var children = parent_1.children;
if (children != null && children.length > 0) {
/** @type {?} */
var columnIndex = -1;
for (var i = 0; i < children.length; i++) {
if (children[i] == target) {
columnIndex = i;
break;
}
}
if (columnIndex > 0) {
this.resizeInfo = {
children: children,
startX: e.pageX,
element: children[columnIndex - 1],
fixColumns: columnIndex - 2
};
}
}
}
}
};
/**
* @param {?} event
* @param {?} rowidx
* @return {?}
*/
DataTableKitComponent.prototype.toggleChildren = /**
* @param {?} event
* @param {?} rowidx
* @return {?}
*/
function (event, rowidx) {
if (this.doc != null) {
/** @type {?} */
var id = this.gridid + "_" + rowidx + "_inner";
/** @type {?} */
var target = event.target;
/** @type {?} */
var childTablesElement = this.doc.querySelector("#" + id);
if (childTablesElement != null) {
/** @type {?} */
var datatoggle = target.getAttribute("data-toggle");
/** @type {?} */
var collapse = "-" == datatoggle;
this.dataTableCollapseChild(target, childTablesElement, collapse);
}
}
};
/**
* @param {?} toggler
* @param {?} child
* @param {?} collapse
* @return {?}
*/
DataTableKitComponent.prototype.dataTableCollapseChild = /**
* @param {?} toggler
* @param {?} child
* @param {?} collapse
* @return {?}
*/
function (toggler, child, collapse) {
if (collapse) {
if (child != null) {
child.classList.add("data-table-collapse");
}
if (toggler != null) {
toggler.setAttribute("data-toggle", "+");
toggler.classList.remove("data-table-minus");
toggler.classList.add("data-table-plus");
}
}
else {
if (child != null) {
child.classList.remove("data-table-collapse");
}
if (toggler != null) {
toggler.classList.remove("data-table-plus");
toggler.classList.add("data-table-minus");
toggler.setAttribute("data-toggle", "-");
}
}
};
/**
* @param {?} event
* @param {?} collapse
* @return {?}
*/
DataTableKitComponent.prototype.dataTableCollapseChildren = /**
* @param {?} event
* @param {?} collapse
* @return {?}
*/
function (event, collapse) {
if (this.doc != null) {
/** @type {?} */
var toggler = this.doc.querySelectorAll(".data-table-toggler-" + this.gridid);
/** @type {?} */
var children = this.doc.querySelectorAll(".data-table-children-" + this.gridid);
/** @type {?} */
var count = Math.min(toggler.length, children.length);
for (var i = 0; i < count; i++) {
this.dataTableCollapseChild(toggler[i], children[i], collapse);
}
this.collapseChildren = collapse;
}
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.uuidv4 = /**
* @return {?}
*/
function () {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (/**
* @param {?} c
* @return {?}
*/
function (c) {
/** @type {?} */
var r = (Math.random() * 16) | 0;
/** @type {?} */
var v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
}));
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.clearSort = /**
* @return {?}
*/
function () {
for (var i = 0; i < this.sortInfo.length; i++) {
/** @type {?} */
var sort = this.sortInfo[i];
if (sort != null) {
sort.sortButton.classList.remove("sorted");
}
}
this.sortInfo = [];
};
/**
* @param {?} event
* @param {?} colSort
* @param {?} aord
* @return {?}
*/
DataTableKitComponent.prototype.sortColumn = /**
* @param {?} event
* @param {?} colSort
* @param {?} aord
* @return {?}
*/
function (event, colSort, aord) {
if (colSort == null || colSort.length == 0) {
return;
}
/** @type {?} */
var target = event.target;
if (!event.ctrlKey) {
this.clearSort();
}
for (var i = 0; i < colSort.length; i++) {
/** @type {?} */
var idx = -1;
/** @type {?} */
var skip = false;
for (var j = 0; j < this.sortInfo.length; j++) {
/** @type {?} */
var sort = this.sortInfo[j];
if (sort != null && sort.field == colSort[i]) {
sort.sortButton.classList.remove("sorted");
idx = j;
if (sort.aord == aord) {
skip = true;
}
break;
}
}
if (idx != -1) {
this.sortInfo.splice(idx, 1);
}
if (!skip) {
this.sortInfo.push({
field: colSort[i],
sortButton: event.target,
aord: aord
});
event.target.classList.add("sorted");
}
}
if (this.sortOrderChanged.observers == null ||
this.sortOrderChanged.observers.length == 0) {
/** @type {?} */
var sortColumns_1 = [];
this.sortInfo.forEach((/**
* @param {?} sort
* @return {?}
*/
function (sort) {
if (sort != null) {
sortColumns_1.push(sort.field + ":" + sort.aord);
}
}));
/** @type {?} */
var sortText = sortColumns_1.join(",");
this.tabledata = this.quickSort(this.tabledata, sortText);
this.analyzeTableData();
this.updatePageData();
}
else {
/** @type {?} */
var sortOrder = this.sortInfo.map((/**
* @param {?} p
* @return {?}
*/
function (p) {
return {
field: p.field,
mode: p.aord
};
}));
this.sortOrderChanged.emit(sortOrder);
}
};
/**
* @param {?} data
* @param {?} orderBy
* @return {?}
*/
DataTableKitComponent.prototype.quickSort = /**
* @param {?} data
* @param {?} orderBy
* @return {?}
*/
function (data, orderBy) {
var _this = this;
if (data == null || orderBy == null || orderBy.length == 0) {
return data;
}
/** @type {?} */
var sortFields = orderBy
.split(",")
.map((/**
* @param {?} f
* @return {?}
*/
function (f) { return f.trim().split(":"); }))
.map((/**
* @param {?} f
* @return {?}
*/
function (f) {
if (f == null || f.length == 0) {
return null;
}
/** @type {?} */
var field = f[0];
/** @type {?} */
var mode = f.length > 1 ? f[1] : "a";
if (mode != "a" && mode != "A" && mode != "d" && mode != "D") {
mode = "a";
}
return {
field: field,
mode: mode.toLowerCase()
};
}))
.filter((/**
* @param {?} f
* @return {?}
*/
function (f) { return f != null; }));
return data.sort((/**
* @param {?} rowA
* @param {?} rowB
* @return {?}
*/
function (rowA, rowB) {
var e_1, _a;
if (rowB == null || rowA == null) {
return 1;
}
try {
for (var sortFields_1 = __values(sortFields), sortFields_1_1 = sortFields_1.next(); !sortFields_1_1.done; sortFields_1_1 = sortFields_1.next()) {
var sortField = sortFields_1_1.value;
/** @type {?} */
var factor = sortField.mode == "d" ? -1 : 1;
/** @type {?} */
var valueA = _this.propertyValue(rowA, sortField.field);
/** @type {?} */
var valueB = _this.propertyValue(rowB, sortField.field);
if (valueA < valueB) {
return -1 * factor;
}
if (valueA > valueB) {
return 1 * factor;
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (sortFields_1_1 && !sortFields_1_1.done && (_a = sortFields_1.return)) _a.call(sortFields_1);
}
finally { if (e_1) throw e_1.error; }
}
return 0;
}));
};
/**
* @param {?} obj
* @param {?} propertyPath
* @return {?}
*/
DataTableKitComponent.prototype.propertyValue = /**
* @param {?} obj
* @param {?} propertyPath
* @return {?}
*/
function (obj, propertyPath) {
while (Array.isArray(obj)) {
if (obj.length > 0) {
obj = obj[0];
}
else {
obj = null;
}
}
if (obj == null) {
return null;
}
propertyPath = propertyPath
.split(".")
.map((/**
* @param {?} name
* @return {?}
*/
function (name) { return name.trim(); }))
.filter((/**
* @param {?} name
* @return {?}
*/
function (name) { return name.length > 0; }))
.join(".");
/** @type {?} */
var propertyName = propertyPath;
/** @type {?} */
var rightPath = null;
/** @type {?} */
var dotIndex = propertyPath.indexOf(".");
if (dotIndex == 0) {
propertyName = propertyPath.substr(1);
}
else if (dotIndex > 0) {
propertyName = propertyPath.substr(0, dotIndex);
rightPath = propertyPath.substr(dotIndex + 1);
}
/** @type {?} */
var value = obj[propertyName];
if (rightPath != null) {
return this.propertyValue(value, rightPath);
}
return value;
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.clearSelections = /**
* @return {?}
*/
function () {
this.selectedRows = [];
/** @type {?} */
var rowSelector = "#grid_" + this.gridid + ">tbody>tr";
/** @type {?} */
var allRows = this.doc.querySelectorAll(rowSelector);
allRows.forEach((/**
* @param {?} p
* @return {?}
*/
function (p) {
if (p != null && p.classList != null) {
p.classList.remove("data-table-selected");
}
}));
};
/**
* @param {?} event
* @param {?} rowIdx
* @return {?}
*/
DataTableKitComponent.prototype.clickRow = /**
* @param {?} event
* @param {?} rowIdx
* @return {?}
*/
function (event, rowIdx) {
/** @type {?} */
var adjustedRowIdx = rowIdx + this.pageno * this.pagesize;
if (this.editingRow != adjustedRowIdx) {
this.clearEdits();
}
/** @type {?} */
var clear = true;
if (this.multiSelect) {
if (event != null && event.ctrlKey) {
clear = false;
}
}
if (clear) {
this.clearSelections();
}
/** @type {?} */
var idx = this.selectedRows.indexOf(adjustedRowIdx);
if (idx != -1) {
this.selectedRows.splice(idx, 1);
}
else {
this.selectedRows.push(adjustedRowIdx);
}
/** @type {?} */
var cllickInfo = {
event: event,
rowIdx: adjustedRowIdx,
selectedRows: this.selectedRows.map((/**
* @param {?} p
* @return {?}
*/
function (p) { return p; })),
bufferOffset: this.bufferedpageno * this.bufferedpagecount * this.pagesize
};
/** @type {?} */
var trElement = event.currentTarget;
if (trElement != null) {
trElement.classList.toggle("data-table-selected");
}
this.selectionChanged.emit(cllickInfo);
};
/**
* @return {?}
*/
DataTableKitComponent.prototype.clearEdits = /**
* @return {?}
*/
function () {
this.editingRow = -1;
};
/**
* @param {?} event
* @param {?} rowIdx
* @return {?}
*/
DataTableKitComponent.prototype.dblclickRow = /**
* @param {?} event
* @param {?} rowIdx
* @return {?}
*/
function (event, rowIdx) {
this.editingRow = rowIdx;
};
DataTableKitComponent.decorators = [
{ type: Component, args: [{
selector: "data-table",
template: "<ng-template #columnTemplate>\r\n <tr>\r\n <ng-container #rowColumns></ng-container>\r\n </tr>\r\n</ng-template>\r\n<table [ngClass]=\"'data-table '+datatableClass\" style=\"width: 100%;\" [id]=\"'grid_'+gridid\">\r\n <thead>\r\n <tr *ngIf=\"groups!=null&&groups.length>0\" class=\"header\">\r\n <th *ngIf=\"haschildren&&collapseChildren!=null\" [className]=\"gridClass.th\" [ngStyle]=\"gridStyle.thGroup\">\r\n </th>\r\n <ng-template ngFor let-colIndex=\"index\" let-group [ngForOf]=\"groups\">\r\n <th *ngIf=\"colIndex>0\" [className]=\"gridClass.thSep\" [ngStyle]=\"gridStyle.thSepGroup\"></th>\r\n <th [className]=\"gridClass.th\" [ngStyle]=\"group.colStyle\" [attr.colspan]=\"group.colspan\">\r\n <ng-template ngFor let-line [ngForOf]=\"group.headers\">\r\n <div>{{line}}</div>\r\n </ng-template>\r\n </th>\r\n </ng-template>\r\n </tr>\r\n <tr #tableHeader class=\"header\" (mousemove)=\"allowResize?resizeColumn($event):null\">\r\n <th *ngIf=\"haschildren&&collapseChildren!=null\" [className]=\"gridClass.th\" [ngStyle]=\"gridStyle.th\">\r\n <div class=\"data-table-plus\" style=\"font-size: smaller;\" (click)=\"dataTableCollapseChildren($event, false)\"> </div>\r\n <div class=\"data-table-minus\" style=\"font-size: smaller;\" (click)=\"dataTableCollapseChildren($event, true)\"> </div>\r\n </th>\r\n <ng-template ngFor let-colIndex=\"index\" let-col [ngForOf]=\"Columns\">\r\n <th *ngIf=\"colIndex>0\" [className]=\"gridClass.thSep\" [ngStyle]=\"gridStyle.thSep\" (mousedown)=\"(allowResize)?resizeColumnStart($event):null\"\r\n (mouseup)=\"(allowResize)?resizeColumnEnd($event):null\"></th>\r\n <th [className]=\"gridClass.th\" [ngStyle]=\"gridStyle.th\">\r\n <div class=\"data-table-col-header-text\">\r\n <div class=\"data-table-col-header-middle\">\r\n <ng-template ngFor let-line [ngForOf]=\"col.header\">\r\n <div>{{line}}</div>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"col.sort!=null && col.sort.length>0\" class=\"data-table-col-header-middle\" style=\"margin-left:5px;\">\r\n <div class=\"data-table-up\" (click)=\"sortColumn($event, col.sort,'a')\"> </div>\r\n <div class=\"data-table-down\" (click)=\"sortColumn($event, col.sort,'d')\"> </div>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-template>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container #gridBody></ng-container>\r\n <ng-container *ngFor=\"let row of pagedata; let rowidx=index;\">\r\n <tr class=\"data\" (click)=\"clickRow($event, rowidx)\" (dblclick)=\"dblclickRow($event, rowidx)\">\r\n <td *ngIf=\"haschildren&&collapseChildren!=null\">\r\n <div [attr.data-toggle]=\"collapseChildren?'+':'-'\" (click)=\"toggleChildren($event, rowidx)\" [ngClass]=\"'data-table-toggler-'+gridid+' data-table-'+(collapseChildren?'plus':'minus')\"> </div>\r\n </td>\r\n <ng-template ngFor let-colIndex=\"index\" let-col [ngForOf]=\"Columns\">\r\n <td *ngIf=\"colIndex>0\" [className]=\"gridClass.tdSep\" [ngStyle]=\"gridStyle.tdSep\"></td>\r\n <td [className]=\"gridClass.td\" [ngStyle]=\"col.dtcStyle\">\r\n <data-table-cell [data]=\"row\" [column]=\"col\" [fadein]=\"fadein\" [editing]=\"rowidx==editingRow\" [rowIndex]=\"rowidx + (pageno * pagesize)\"></data-table-cell>\r\n </td>\r\n </ng-template>\r\n </tr>\r\n <tr *ngIf=\"haschildren\">\r\n <td *ngIf=\"collapseChildren!=null\" style=\"border: 0px;padding:0px;\"></td>\r\n <td [attr.colspan]=\"columnCount\" style=\"border: 0px; padding: 0px;\">\r\n <div [id]=\"gridid+'_'+rowidx+'_inner'\" [ngClass]=\"'data-table-children-'+gridid+(collapseChildren=='true'||collapseChildren==true?' data-table-collapse':' ')\">\r\n <div *ngFor=\"let child of Children\">\r\n <data-table-cell [data]=\"row\" [child]=\"child\" [rowIndex]=\"rowidx + (pageno * pagesize)\"></data-table-cell>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n</table>\r\n<div *ngIf=\"totalpages!=null&&totalpages.length>0\">\r\n <div>\r\n <ul class=\"data-table-pages\">\r\n <li [ngClass]=\"(pageno==0?'disabled':'')+' data-table-hand'\"><a (click)=\"setFirstPage()\">First</a></li>\r\n <li [ngClass]=\"(pageno==0?'disabled':'')+' data-table-hand'\"><a (click)=\"setPrevPage()\"><span aria-hidden=\"true\">«</span> Previous</a></li>\r\n <li><a><input type=\"number\" class=\"data-table-input-pageno\" min=\"1\" [max]=\"totalpages.length\" [value]=\"pageno+1\"\r\n (keyup.enter)=\"gotoPage(pagegoto.value)\" #pagegoto> / {{totalpages.length}}</a></li>\r\n <li [ngClass]=\"(pageno < totalpages.length - 1?'':'disabled')+' data-table-hand'\"><a (click)=\"setNextPage()\">Next <span aria-hidden=\"true\">»</span></a></li>\r\n <li [ngClass]=\"(pageno < totalpages.length - 1?'':'disabled')+' data-table-hand'\"><a (click)=\"setLastPage()\">Last</a></li>\r\n </ul>\r\n </div>\r\n</div>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".data-table{border:0;border-spacing:0}.data-table th{padding-top:10px;padding-bottom:10px}.data-table>tbody>tr:hover{background-color:#f5f5f5}.data-table-collapse{display:none}.data-table-collapse.in{display:block}.data-table .header{color:#000;font-size:smaller;font-weight:700}.data-table .data{color:#000;font-size:smaller;font-weight:400}.data-table .disabled{color:#777;opacity:.8}.data-table-hand{cursor:pointer}.data-table-col-header{display:table-cell;padding:\"3px\";text-align:center;font-size:14px;line-height:normal}.data-table-col-header-text:before{content:\"\";display:inline-block;vertical-align:middle}.data-table-col-header-middle{display:inline-block;vertical-align:middle}.data-table-col-data{display:table-cell;padding:\"3px\"}.data-table-input-pageno{background-color:transparent;border:0!important;border-top:0!important;border-bottom:0!important;border-left:0!important;border-right:0!important;width:auto!important;height:auto!important;text-align:right;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0}.data-table-input-pageno:focus{outline:0!important;border-bottom:0!important}.data-table-input-pageno::-webkit-inner-spin-button,.data-table-input-pageno::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.data-table-minus{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAABnRSTlMA/wD/AP83WBt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAH0lEQVQokWP8//8/A+mAiQw9o9qoqI2+gHE0lQxJbQDl0gYZ+lGHlgAAAABJRU5ErkJggg==);background-origin:content-box;background-position:center;background-repeat:no-repeat;background-size:contain;cursor:pointer;margin-right:5px;padding:2px;width:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.data-table-plus{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAABnRSTlMA/wD/AP83WBt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAKUlEQVQokWP8//8/AzbAyMjIwMCAS5YJqyhBMKqNWtroCxhHU8mQ1AYA6OYMGQghg24AAAAASUVORK5CYII=);background-origin:content-box;background-position:center;background-repeat:no-repeat;background-size:contain;cursor:pointer;margin-right:5px;padding:2px;width:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.data-table-up{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAIAAACtuNvgAAAABnRSTlMA/wD/AP83WBt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAWUlEQVQokZ2SUQ7AIAhDV+L9r9z9LQTbxsmX0D40CEg+/2PJKoDvLPtWZvZUY9K0FyvLTionZLIOmWlzH0AySPqSDughZcaRM3cPm5PsvrBow4a7nRTLdRIvsT4qGLm5+W8AAAAASUVORK5CYII=);background-origin:content-box;background-position:center;background-repeat:no-repeat;background-size:contain;cursor:pointer;font-size:6px;margin:0;padding:0;width:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.data-table-down{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAIAAACtuNvgAAAABnRSTlMA/wD/AP83WBt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAYklEQVQokZ2S2w7AMAhCwez/f5k9dFkWvDRr3xSPkhRKwv8XBwyACwDJVcyXv2M0rSNf5inzRCaNqTEjMzO5kjRIXFq9sjcS883OWuTWloF990Ca5CkpydwswmVD5SKeRfkGMzBE5GopGhMAAAAASUVORK5CYII=);background-origin:content-box;background-position:center;background-repeat:no-repeat;background-size:contain;cursor:pointer;font-size:6px;margin:0;padding:0;width:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.data-table-up.sorted{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAIAAACtuNvgAAAABnRSTlMA/wD/AP83WBt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAZ0lEQVQokZ2SUQ6AMAhDB/EKetVdYV6VS9QPE2PWQqZ8QduXsAUD0L7XJtXTjqfvCA54zfCoMRli0Ws7szwzatIXmSnmGdMR8g/vsI22S0buNi+ZMTxqTIZY9LckGbY6wv7dpHjbSl0wcCvzYSLAvwAAAABJRU5ErkJggg==)!important}.data-table-down.sorted{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAIAAACtuNvgAAAABnRSTlMA/wD/AP83WBt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAb0lEQVQokZ2S0Q2AMAhED+IKumpX0FW7BH6QNASPquUP7h6FUDEz/A9dYABsAC45PGnWJ9ZokxN71CpyMHzIJFdFslsy0UZKpxpWyjTr4gegMg1/RmPykUHc7ZWMBq2ECZOxinwWyQGSiTaSta98A6LMNe+ezG6VAAAAAElFTkSuQmCC)!important}.data-table-pages{display:inline-block;height:40px;margin:20px 0;padding:0;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-before:0;padding-block-start:0}.data-table-pages ul{display:inline-block;margin-left:0;margin-bottom:0;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1)}.data-table-pages li{display:inline}.data-table-pages a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border:1px solid #ddd;border-left-width:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.data-table-pages a:hover{background-color:#f5f5f5}.data-table-pages .active a{background-color:#f5f5f5;color:#999;cursor:default}.data-table-pages .disabled a,.data-table-pages .disabled a:hover,.data-table-pages .disabled span{color:#999;background-color:transparent;cursor:default}.data-table-pages li:first-child a{border-left-width:1px;border-radius:3px 0 0 3px}.data-table-pages li:last-child a{border-radius:0 3px 3px 0}.data-table-fade-in{-webkit-animation:1s linear forwards fadein;animation:1s linear forwards fadein}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.data-table-selected{background-color:#add8e6!important}"]
}] }
];
/** @nocollapse */
DataTableKitComponent.ctorParameters = function () { return [
{ type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
]; };
DataTableKitComponent.propDecorators = {
_viewContainerRef: [{ type: ViewChild, args: ["gridBody", { read: ViewContainerRef, static: false },] }],
_columnTemplate: [{ type: ViewChild, args: ["columnTemplate", { static: false },] }],
TableHeader: [{ type: ViewChild, args: ["tableHeader", { static: false },] }],
Columns: [{ type: ContentChildren, args: [DataTableColumnDirective,] }],
Children: [{ type: ContentChildren, args: [DataTableChildDirective,] }],
datatableClass: [{ type: Input, args: ["data-table-class",] }],
tabledata: [{ type: Input }],
datacount: [{ type: Input }],
bufferedpageno: [{ type: Input, args: ["buffered-page-no",] }],
bufferedpagecount: [{ type: Input, args: ["buffered-page-count",] }],
allowResize: [{ type: Input }],
pagesize: [{ type: Input }],
collapseChildren: [{ type: Input, args: ["collapse-children",] }],
multiSelect: [{ type: Input, args: ["allow-multiselect",] }],
bufferedPageNoChanged: [{ type: Output }],
sortOrderChanged: [{ type: Output }],
selectionChanged: [{ type: Output }],
editStarted: [{ type: Output }],
editCompleted: [{ type: Output }],
editCancelled: [{ type: Output }]
};
return DataTableKitComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CellDataContext = /** @class */ (function () {
function CellDataContext(data, editing, rowIndex) {
this.data = data;
this.editing = editing;
this.rowIndex = rowIndex;
}
/**
* @param {?} edit
* @return {?}
*/
CellDataContext.prototype.update = /**
* @param {?} edit
* @return {?}
*/
function (edit) {
this.editing = edit;
};
return CellDataContext;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DataTableCellComponent = /** @class */ (function () {
function DataTableCellComponent() {
this.editing = false;
this.rowIndex = -1;
this.viewColumn = null;
}
/**
* @param {?} changes
* @return {?}
*/
DataTableCellComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes["data"] || changes["column"] || changes["child"]) {
if (this.data != null) {
if (this.column != null) {
this.viewColumn = this._cellContainerRef.createEmbeddedView(this.column.ColumnTemplate, new CellDataContext(this.data, this.editing, this.rowIndex));
}
if (this.child != null) {
/** @type {?} */
var viewChild = this._cellContainerRef.createEmbeddedView(this.child.ChildTemplate, new CellDataContext(this.data, false, this.rowIndex));
}
}
}
else if (changes["editing"] && this.viewColumn != null) {
this.viewColumn.context.update(this.editing);
}
};
DataTableCellComponent.decorators = [
{ type: Component, args: [{
selector: "data-table-cell",
template: "<div [ngClass]=\"fadein\">\n <ng-container #gridCell></ng-container>\n</div>\n",
styles: [""]
}] }
];
DataTableCellComponent.propDecorators = {
data: [{ type: Input }],
fadein: [{ type: Input }],
editing: [{ type: Input }],
rowIndex: [{ type: Input }],
column: [{ type: Input }],
child: [{ type: Input }],
_cellContainerRef: [{ type: ViewChild, args: ["gridCell", { read: ViewContainerRef, static: true },] }]
};
return DataTableCellComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DataTableFloatComponent = /** @class */ (function () {
function DataTableFloatComponent() {
this.floatWidth = 0;
}
/**
* @param {?} changes
* @return {?}
*/
DataTableFloatComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes["floatWidth"]) {
this.styleOuter = {
"margin-right": "-" + Math.abs(this.floatWidth) + "px",
"text-align": "left"
};
this.styleInner = {
width: Math.abs(this.floatWidth) + "px"
};
}
};
DataTableFloatComponent.decorators = [
{ type: Component, args: [{
selector: "data-table-float",
template: "<div *ngIf=\"floatWidth!=0\" [ngStyle]=\"styleOuter\">\n <div [ngStyle]=\"styleInner\">\n <ng-content></ng-content>\n </div>\n</div>\n",
styles: [""]
}] }
];
Dat