ngx-mat-dynamic-table
Version:
Dynamic material table table.
1,121 lines • 67.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/cdk/collections'), require('@angular/common'), require('@angular/forms'), require('file-saver'), require('xlsx'), require('lodash'), require('rxjs'), require('rxjs/operators'), require('@angular/flex-layout'), require('@angular/material/snack-bar'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/checkbox'), require('@angular/material/progress-bar'), require('@angular/material/tooltip'), require('@angular/material/select'), require('@angular/material/input'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/cdk/keycodes'), require('@angular/cdk/drag-drop'), require('@angular/material/chips'), require('@angular/material/button-toggle')) :
typeof define === 'function' && define.amd ? define('ngx-mat-dynamic-table', ['exports', '@angular/core', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/cdk/collections', '@angular/common', '@angular/forms', 'file-saver', 'xlsx', 'lodash', 'rxjs', 'rxjs/operators', '@angular/flex-layout', '@angular/material/snack-bar', '@angular/material/button', '@angular/material/form-field', '@angular/material/icon', '@angular/material/checkbox', '@angular/material/progress-bar', '@angular/material/tooltip', '@angular/material/select', '@angular/material/input', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/cdk/keycodes', '@angular/cdk/drag-drop', '@angular/material/chips', '@angular/material/button-toggle'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-mat-dynamic-table'] = {}, global.ng.core, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.cdk.collections, global.ng.common, global.ng.forms, global['file-saver'], global.xlsx, global.lodash, global.rxjs, global.rxjs.operators, global.ng.flexLayout, global.ng.material.snackBar, global.ng.material.button, global.ng.material.formField, global.ng.material.icon, global.ng.material.checkbox, global.ng.material.progressBar, global.ng.material.tooltip, global.ng.material.select, global.ng.material.input, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.cdk.keycodes, global.ng.cdk.dragDrop, global.ng.material.chips, global.ng.material.buttonToggle));
}(this, (function (exports, i0, table, sort, paginator, collections, common, forms, FileSaver, XLSX, lodash, rxjs, operators, flexLayout, snackBar, button, formField, icon, checkbox, progressBar, tooltip, select, input, menu, progressSpinner, keycodes, dragDrop, chips, buttonToggle) { 'use strict';
var NgxMatDynamicTableService = /** @class */ (function () {
function NgxMatDynamicTableService() {
}
return NgxMatDynamicTableService;
}());
NgxMatDynamicTableService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NgxMatDynamicTableService_Factory() { return new NgxMatDynamicTableService(); }, token: NgxMatDynamicTableService, providedIn: "root" });
NgxMatDynamicTableService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
NgxMatDynamicTableService.ctorParameters = function () { return []; };
var NgxMatDynamicTableComponent = /** @class */ (function () {
function NgxMatDynamicTableComponent() {
}
NgxMatDynamicTableComponent.prototype.ngOnInit = function () {
};
return NgxMatDynamicTableComponent;
}());
NgxMatDynamicTableComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-mat-ngx-mat-dynamic-table',
template: "\n <p>\n ngx-mat-dynamic-table works!\n </p>\n "
},] }
];
NgxMatDynamicTableComponent.ctorParameters = function () { return []; };
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(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;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
/** @deprecated */
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
function __spreadArray(to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
}
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var XlsxExportService = /** @class */ (function () {
function XlsxExportService() {
this.fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
this.fileExtension = '.xlsx';
}
XlsxExportService.prototype.exportExcel = function (jsonData, headers, fileName) {
var columnHeaders = lodash.values(headers);
var ws = XLSX.utils.json_to_sheet(lodash.map(this.renameKeys(jsonData, headers), lodash.partialRight(lodash.pick, columnHeaders)), { header: columnHeaders });
var wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };
var excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
this.saveExcelFile(excelBuffer, fileName);
};
XlsxExportService.prototype.saveExcelFile = function (buffer, fileName) {
var data = new Blob([buffer], { type: this.fileType });
FileSaver.saveAs(data, fileName + this.fileExtension);
};
XlsxExportService.prototype.renameKeys = function (jsonData, headers) {
return jsonData.map(function (j) {
var renamed = {};
// Get all the keys of the headers
Object.keys(headers).forEach(function (key) {
// make the header value the new key of the renamed object.
// use the key of the header with lodash get function to get nested objects.
renamed[headers[key]] = lodash.get(j, key);
});
return renamed;
});
};
return XlsxExportService;
}());
XlsxExportService.decorators = [
{ type: i0.Injectable }
];
XlsxExportService.ctorParameters = function () { return []; };
var ColumnStorageService = /** @class */ (function () {
function ColumnStorageService() {
var _this = this;
this.dbName = 'ngx-mat-dynamic-table';
this.storeName = 'columns';
this.version = 1; //versions start at 1
var request = indexedDB.open(this.dbName, this.version);
request.onerror = function (event) {
console.warn('IndexedDB not enabled.');
};
request.onupgradeneeded = function (event) {
_this.db = request.result;
_this.objectStore = _this.db.createObjectStore(_this.storeName, { keyPath: 'tableId' });
console.debug('ngx-mat-dynamic-table: create object store 👍');
};
request.onsuccess = function (event) {
_this.db = request.result;
console.debug('ngx-mat-dynamic-table: db opened 👍' + _this.db);
};
}
ColumnStorageService.prototype.isDbOpen = function () {
return !!this.db;
};
ColumnStorageService.prototype.save = function (doc) {
// Dont try to save if there is no db
if (!this.db)
return;
var request = this.db.transaction([this.storeName], 'readwrite')
.objectStore(this.storeName)
.put(doc);
request.onsuccess = function (event) {
// console.debug('Saved columns...');
};
};
ColumnStorageService.prototype.read = function (tableId) {
var _this = this;
return new rxjs.Observable(function (observer) {
var transaction = _this.db.transaction([_this.storeName]);
if (!transaction) {
observer.next(null);
observer.complete();
return;
}
var objectStore = transaction.objectStore(_this.storeName);
var request = objectStore.get(tableId);
request.onerror = function (event) {
observer.error(new Error);
observer.complete();
};
request.onsuccess = function (event) {
if (request.result) {
observer.next(request.result);
observer.complete();
}
else {
// observer.error((e) => console.log(e));
observer.next(null);
observer.complete();
}
};
});
};
return ColumnStorageService;
}());
ColumnStorageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ColumnStorageService_Factory() { return new ColumnStorageService(); }, token: ColumnStorageService, providedIn: "root" });
ColumnStorageService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
ColumnStorageService.ctorParameters = function () { return []; };
var DynamicTableComponent = /** @class */ (function () {
function DynamicTableComponent(locale, xlsxExportService, columnStorageService) {
this.locale = locale;
this.xlsxExportService = xlsxExportService;
this.columnStorageService = columnStorageService;
this.export = false; // Enable export for this table
this.filter = false; // Enable filter for this table
this.multiple = false; // Allow multiple select for this table
this.optionalColumns = false; // Show or hide columns
this.emitFilteredData = false; // Show or hide columns
this.rowClicked = new i0.EventEmitter();
this.cellClicked = new i0.EventEmitter();
this.selectedRows = new i0.EventEmitter();
this.filterResult = new i0.EventEmitter();
this.selection = new collections.SelectionModel(true, []);
this.displayedColumns = [];
this.dataSource = new table.MatTableDataSource();
this.totalsRowVisible = false;
// The hidden columns filtered out
this.columnsToShow = new forms.FormControl();
this.filterKeyUp = new rxjs.BehaviorSubject('');
this.columnSearch$ = new rxjs.Subject();
}
DynamicTableComponent.prototype.ngOnChanges = function (changes) {
// Add headers to of data to display in table
if (changes.columns && changes.columns.currentValue) {
this.setColumns();
}
if (changes.tableData.currentValue) {
// TODO: Test this default sort change
// if (this.sortActive) {
// this.dataSource.data = this.tableData.sort((a, b) => (_get(a, this.sortActive) > _get(b, this.sortActive)) ? this.sortDirection === 'asc' ? 1 : -1 : ((_get(b, this.sortActive) > _get(a, this.sortActive)) ? this.sortDirection === 'asc' ? -1 : 1 : 0));
// } else {
// this.dataSource.data = this.tableData;
// }
// Clear selection if new data is comming in
this.selection.clear();
this.dataSource.data = this.tableData;
this.updateColumnTotals();
}
};
DynamicTableComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.filterKeyUp.pipe(operators.debounce(function () { return rxjs.interval(2000); })).subscribe(function (filterValue) {
_this.searchLoading = false;
// apply the filter after 2 seconds
_this.dataSource.filter = filterValue;
if (_this.dataSource.paginator) {
_this.dataSource.paginator.firstPage();
}
// update totals
_this.updateColumnTotals();
// If the flag is set, emit the filtered data
if (_this.emitFilteredData) {
_this.getFilteredData();
}
});
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
};
DynamicTableComponent.prototype.ngOnInit = function () {
var _this = this;
this.dataSource.sortingDataAccessor = function (data, attribute) { return lodash.get(data, attribute); };
// Changed this sort function from the source to compare alpha numerics https://stackoverflow.com/a/66157044/6044269
// https://github.com/angular/components/blob/master/src/material/table/table-data-source.ts#L165
this.dataSource.sortData = function (data, sort) {
var active = sort.active;
var direction = sort.direction;
if (!active || direction == '') {
return data;
}
return data.sort(function (a, b) {
var valueA = _this.dataSource.sortingDataAccessor(a, active);
var valueB = _this.dataSource.sortingDataAccessor(b, active);
var valueAType = typeof valueA;
var valueBType = typeof valueB;
if (valueAType !== valueBType) {
if (valueAType === 'number') {
valueA += '';
}
if (valueBType === 'number') {
valueB += '';
}
}
var comparatorResult = 0;
if (valueA != null && valueB != null) {
// ! This is the If that I changed https://stackoverflow.com/a/66157044/6044269
if (valueAType === 'string' && valueBType === 'string') {
comparatorResult = valueA.localeCompare(valueB, 'en', { numeric: true });
}
else if (valueA > valueB) {
comparatorResult = 1;
}
else if (valueA < valueB) {
comparatorResult = -1;
}
}
else if (valueA != null) {
comparatorResult = 1;
}
else if (valueB != null) {
comparatorResult = -1;
}
return comparatorResult * (direction == 'asc' ? 1 : -1);
});
};
// Search for nested objects
this.dataSource.filterPredicate = function (data, filter) {
var validRow = true;
if (!filter)
return validRow;
// type|searchString:column#searchType,type|searchString:column#searchType...
var terms = filter.split(','); // Split multiple search
terms.some(function (term) {
var _a;
var _b = __read(term.split('|'), 2), type = _b[0], criteria = _b[1]; // Split global / column search
var dataString = '';
var searchType; // type of search in a column
// let criteria;
if (type === 'global') {
// Search All
_this.columns.filter(function (c) { return c.search; }).map(function (c) { return c.columnDef; }).forEach(function (column) {
var cellData = lodash.get(data, column);
if (cellData)
dataString += cellData;
});
// String contains/equals in all columns
if (!dataString || dataString.toString().toLowerCase().indexOf(criteria.toLowerCase()) === -1) {
validRow = false;
return true;
}
}
else {
var _c = __read(criteria.split(':'), 2), searchString = _c[0], columnAndType = _c[1]; // Split search string and criteria
var column = void 0;
_a = __read(columnAndType.split('#'), 2), column = _a[0], searchType = _a[1]; // Split column and type of search
criteria = searchString;
dataString = lodash.get(data, column); // get the data
if (searchType === '!=') {
// String contains/equals in all columns
if (!dataString || dataString.toString().toLowerCase().indexOf(criteria.toLowerCase()) !== -1) {
validRow = false;
return true;
}
}
else if (searchType === 'empty') {
if (dataString) {
validRow = false;
return true;
}
}
else {
// String contains/equals in all columns
if (!dataString || dataString.toString().toLowerCase().indexOf(criteria.toLowerCase()) === -1) {
validRow = false;
return true;
}
}
}
});
return validRow;
};
};
DynamicTableComponent.prototype.updateXLSXHeaders = function () {
var _this = this;
this.xlsxHeaders = {};
this.columnsToShow.value.forEach(function (c) {
_this.xlsxHeaders[c.columnDef] = c.columnTitle;
});
};
DynamicTableComponent.prototype.updateColumnTotals = function () {
var _this = this;
if (!this.dataSource) {
return;
}
this.columns.map(function (col) {
if ((col.total || col.average)) {
_this.totalsRowVisible = true;
if (_this.dataSource.filteredData.length > 0) {
col.totalValue = _this.dataSource.filteredData.map(function (t) { return lodash.get(t, col.columnDef); }).reduce(function (acc, value) { return acc + (value ? value : 0); }, 0);
if (isNaN(col.totalValue)) {
col.totalValue = 0;
col.averageValue = 0;
}
else {
col.averageValue = col.totalValue / _this.dataSource.filteredData.length;
}
}
else {
col.totalValue = 0;
col.averageValue = 0;
}
}
return col;
});
};
DynamicTableComponent.prototype.applyFilter = function (searchTerms) {
this.searchLoading = true;
var filterString;
searchTerms.forEach(function (term) {
// type: Global or in a column
// |searchString: the text/number searching for
// :column: when type is column, this field is set
// #searchType = != >= <= empty
// type|searchString:column#searchType,type|searchString:column#searchType...
var newTerm = term.type + "|" + term.search + (term.type === 'column' ? ':' + term.column + '#' + term.searchType : '');
if (filterString)
filterString += "," + newTerm;
else
filterString = newTerm;
});
this.filterKeyUp.next(filterString);
};
DynamicTableComponent.prototype.applyColumnFilter = function (element, column, columnTitle, searchType) {
//
if (searchType && searchType !== 'empty' && !element.value)
return;
this.searchLoading = true;
// Send data to table-search-input and add a chip
this.columnSearch$.next({ type: 'column', column: column, columnTitle: columnTitle, inputReference: element, search: element.value, searchType: searchType });
};
DynamicTableComponent.prototype._rowClicked = function (row) {
if (!this.rowClick)
return;
this.rowClicked.emit(row);
};
DynamicTableComponent.prototype.onMatCellClick = function (row, column) {
if (!this.cellClick)
return;
this.cellClicked.emit({ row: row, column: column.columnDef, data: lodash.get(row, column.columnDef) });
};
/** Whether the number of selected elements matches the total number of rows. */
DynamicTableComponent.prototype.isAllSelected = function () {
var numSelected = this.selection.selected.length;
var numRows = this.dataSource.data.length;
return numSelected === numRows;
};
/** Selects all rows if they are not all selected; otherwise clear selection. */
DynamicTableComponent.prototype.masterToggle = function () {
var _this = this;
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.filteredData.forEach(function (row) { return _this.selection.select(row); });
this.emitSelected();
};
DynamicTableComponent.prototype.toggle = function (event, row) {
if (event)
this.selection.toggle(row);
this.emitSelected();
};
DynamicTableComponent.prototype.emitSelected = function () {
this.selectedRows.emit(this.selection.selected);
};
DynamicTableComponent.prototype.setColumns = function () {
var _this = this;
this.setDefaultSorting();
// Check for saved columns in indexedDB
if (this.tableId) {
this.savedColumnsLoading = true;
// TODO: wait here for the db
if (this.columnStorageService.isDbOpen()) {
this.columnStorageService.read(this.tableId).subscribe(function (res) {
_this.setSavedColumnSelection(res);
});
}
else {
// Wait for the DB to wake up and then query
setTimeout(function () {
_this.columnStorageService.read(_this.tableId).subscribe(function (res) {
_this.setSavedColumnSelection(res);
});
}, 500);
}
}
else {
this.setStaticColumns();
}
};
DynamicTableComponent.prototype.setStaticColumns = function () {
// List of all columns to show in the view
this.displayedColumns = [];
// Totals row starts as false untill inspection of column definitions
this.totalsRowVisible = false;
// add the rest of non hidden columns to the list
this.displayedColumns = this.columns.filter(function (c) { return !c.hidden; }).map(function (c) { return c.columnDef; });
// If multiple select is enabled, add select to the from of the array
if (this.multiple)
this.displayedColumns.unshift('select');
// set visible columns as checked in the selector
this.columnsToShow.setValue(this.columns.filter(function (c) { return !c.hidden; }));
this.updateColumnTotals();
};
DynamicTableComponent.prototype.displayColumnsChanged = function (event) {
this.displayedColumns = event.value.map(function (c) { return c.columnDef; });
if (this.multiple)
this.displayedColumns.unshift('select');
// save the current visible columns
this.saveCurrentColumnSelection(this.displayedColumns);
};
DynamicTableComponent.prototype.eportToExcell = function () {
this.updateXLSXHeaders();
this.formatExportData();
this.xlsxExportService.exportExcel(this.exportData, this.xlsxHeaders, this.fileName ? this.fileName : 'Export');
};
DynamicTableComponent.prototype.getFilteredData = function () {
this.cloneData();
this.filterResult.emit(this.exportData);
};
DynamicTableComponent.prototype.cloneData = function () {
// Format dates for exporting, temp
if (this.selection.hasValue()) {
// Export selected data
this.exportData = this.selection.selected.map(function (a) { return lodash.cloneDeep(a); });
}
else {
// Export filtered data and sorted
this.exportData = this.dataSource.sortData(this.dataSource.filteredData, this.dataSource.sort).map(function (a) { return lodash.cloneDeep(a); });
}
};
DynamicTableComponent.prototype.formatExportData = function () {
var _this = this;
this.cloneData();
// If the columns contain a date
var dateColumns = this.columnsToShow.value.filter(function (e) { return e.type === 'date'; });
if (dateColumns && dateColumns.length > 0) {
this.exportData = this.exportData.map(function (td) {
dateColumns.forEach(function (col) {
if (lodash.get(td, col.columnDef))
lodash.set(td, col.columnDef, common.formatDate(lodash.get(td, col.columnDef), col.dateFormat ? col.dateFormat : 'dd/MM/yyyy, HH:mm', _this.locale));
});
return td;
});
}
};
DynamicTableComponent.prototype.nestedFilterCheck = function (search, data, key) {
if (typeof data[key] === 'object') {
for (var k in data[key]) {
if (data[key][k] !== null) {
search = this.nestedFilterCheck(search, data[key], k);
}
}
}
else {
search += data[key];
}
return search;
};
DynamicTableComponent.prototype.setDefaultSorting = function () {
var _this = this;
this.columns.some(function (col) {
if (col.sort) {
_this.sortActive = col.columnDef;
_this.sortDirection = col.sort;
return true;
}
});
};
DynamicTableComponent.prototype.setSavedColumnSelection = function (saved) {
this.savedColumnsLoading = false;
if (!saved || saved.visibleColumns.length === 0) {
this.setStaticColumns();
return;
}
// set the column selector with the values stored in the indexeddb
this.columnsToShow.setValue(this.columns.filter(function (c) { return saved.visibleColumns.some(function (item) { return item === c.columnDef; }); }));
// If multiple is enabled but was not saved in the saved array, add it
if (this.multiple && saved.visibleColumns[0] !== 'select')
saved.visibleColumns.unshift('select');
this.displayedColumns = saved.visibleColumns;
};
DynamicTableComponent.prototype.saveCurrentColumnSelection = function (displayedColumns) {
if (!this.tableId)
return;
var toSave = this.displayedColumns.slice();
// Do not save the selection column
if (this.multiple && toSave[0] === 'select')
toSave.shift();
this.columnStorageService.save({
tableId: this.tableId,
visibleColumns: toSave
});
};
return DynamicTableComponent;
}());
DynamicTableComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-mat-dynamic-table',
template: "<div fxLayout=\"row wrap\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\r\n <!-- Search input with chips -->\r\n <ngx-mat-table-search-input [columnSearch$]=\"columnSearch$\" (searchChange)=\"applyFilter($event)\">\r\n </ngx-mat-table-search-input>\r\n <mat-spinner *ngIf=\"searchLoading\" [diameter]=\"20\"></mat-spinner>\r\n <span fxFlex.gt-xs></span>\r\n <!-- Select enabled columns -->\r\n <mat-spinner *ngIf=\"savedColumnsLoading\" [diameter]=\"20\"></mat-spinner>\r\n <mat-form-field *ngIf=\"optionalColumns\" appearance=\"outline\">\r\n <mat-label>Columns</mat-label>\r\n <mat-select [formControl]=\"columnsToShow\" multiple (selectionChange)=\"displayColumnsChanged($event)\">\r\n <mat-option *ngFor=\"let column of columns\" [value]=\"column\">{{column.columnTitle}}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <!-- Export selected or filtered data to excel -->\r\n <button *ngIf=\"export\" mat-stroked-button color=\"primary\" (click)=\"eportToExcell()\">\r\n <mat-icon>import_export</mat-icon> Export\r\n </button>\r\n <!-- Indicate number of selected items -->\r\n <span *ngIf=\"selection.selected.length > 0\" class=\"mat-caption\">{{selection.selected.length}} values selected</span>\r\n</div>\r\n<!-- Table wrapping container -->\r\n<div class=\"table-container\">\r\n <table mat-table #table [dataSource]=\"dataSource\" matSort [matSortActive]=\"sortActive\"\r\n [matSortDirection]=\"sortDirection\" style=\"width: 100%;\">\r\n <!-- Checkbox Column -->\r\n <ng-container *ngIf=\"multiple\" matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n </mat-checkbox>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"toggle($event, row)\"\r\n [checked]=\"selection.isSelected(row)\">\r\n </mat-checkbox>\r\n </td>\r\n <ng-container *ngIf=\"totalsRowVisible\">\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Table columns -->\r\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky\"\r\n [stickyEnd]=\"column.stickyEnd\">\r\n <!-- Table header -->\r\n <th mat-header-cell *matHeaderCellDef>\r\n <!-- Header and search icon -->\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <span mat-sort-header>\r\n {{ column.columnTitle }}\r\n </span>\r\n <button *ngIf=\"column.search\" class=\"search-button\" mat-icon-button [matMenuTriggerFor]=\"menu\"\r\n (menuOpened)=\"searchInput.focus()\">\r\n <mat-icon [ngClass]=\"{'search-active': searchInput.value}\">search</mat-icon>\r\n </button>\r\n </div>\r\n <!-- Search Menu -->\r\n <mat-menu #menu=\"matMenu\">\r\n <div (click)=\"$event.stopPropagation()\" fxLayout=\"column\"\r\n style=\"padding-right: 8px; padding-left: 8px;\">\r\n <!-- Search input -->\r\n <mat-form-field>\r\n <input matInput #searchInput\r\n (keyup)=\"applyColumnFilter($event.target, column.columnDef, column.columnTitle, searchType.value);\"\r\n [placeholder]=\"column.columnTitle\" [disabled]=\"searchType.value === 'empty'\">\r\n <mat-hint>Search</mat-hint>\r\n <button mat-button *ngIf=\"searchInput.value\" matSuffix mat-icon-button aria-label=\"Clear\"\r\n (click)=\"searchInput.value=''; applyColumnFilter(searchInput, column.columnDef, column.columnTitle, searchType.value)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n <!-- Search options -->\r\n <div fxLayout=\"row\" fxLayoutAlign=\"end end\">\r\n <mat-button-toggle-group name=\"search type\" aria-label=\"Search Type\"\r\n #searchType=\"matButtonToggleGroup\" value=\"=\"\r\n (change)=\"applyColumnFilter(searchInput, column.columnDef, column.columnTitle, searchType.value)\">\r\n <mat-button-toggle value=\"=\" matTooltip=\"Equals\">=</mat-button-toggle>\r\n <mat-button-toggle value=\"!=\" matTooltip=\"Not Equals\">\u2260</mat-button-toggle>\r\n <!-- <mat-button-toggle value=\">=\">>=</mat-button-toggle>\r\n <mat-button-toggle value=\"<=\"><=</mat-button-toggle> -->\r\n <mat-button-toggle value=\"empty\" matTooltip=\"Empty Cell\">\" \"</mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </th>\r\n <!-- Table Cell -->\r\n <td mat-cell *matCellDef=\"let row\" [class]=\"row[column.cellClassKey]\"\r\n [attr.data-label]=\"column.columnTitle\" (click)=\"onMatCellClick(row, column);\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <!-- Number type columns -->\r\n <span *ngSwitchCase=\"'number'\"\r\n [ngClass]=\"column.unit?.position === 'before' ? 'unit-before' : 'unit-after'\"\r\n [attr.data-unit]=\"row | lodashGet: column.unit?.key\">\r\n {{ row | lodashGet: column.columnDef | number }}\r\n </span>\r\n <!-- Date Type columns -->\r\n <span *ngSwitchCase=\"'date'\">\r\n {{ row | lodashGet: column.columnDef | date: column.dateFormat ? column.dateFormat :\r\n 'dd/MM/yyyy, HH:mm' }}\r\n </span>\r\n <!-- Icon Columns -->\r\n <span *ngSwitchCase=\"'icon'\">\r\n <ng-container *ngFor=\"let icon of column.icons\">\r\n <mat-icon *ngIf=\"icon.value === (row | lodashGet: column.columnDef)\"\r\n [style.color]=\"icon.color\" [matTooltip]=\"icon.matTooltip\">{{icon.matIcon}}\r\n </mat-icon>\r\n </ng-container>\r\n </span>\r\n <!-- Text Columns -->\r\n <span *ngSwitchDefault>\r\n {{ row | lodashGet: column.columnDef }}\r\n </span>\r\n </ng-container>\r\n </td>\r\n\r\n <ng-container *ngIf=\"totalsRowVisible\">\r\n <td mat-footer-cell *matFooterCellDef [attr.data-label]=\"column.columnTitle\">\r\n <ng-container *ngIf=\"column.total\">\r\n {{column.totalValue | number}}\r\n </ng-container>\r\n <ng-container *ngIf=\"column.total && column.average\">\r\n | \r\n </ng-container>\r\n <ng-container *ngIf=\"column.average\">\r\n μ {{column.averageValue | number}}\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true;\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"_rowClicked(row)\"\r\n [ngClass]=\"{'row-click': rowClick}\"></tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" [attr.colspan]=\"displayedColumns.length\">No data</td>\r\n </tr>\r\n\r\n <ng-container *ngIf=\"totalsRowVisible\">\r\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true;\"></tr>\r\n </ng-container>\r\n\r\n </table>\r\n</div>\r\n<mat-paginator class=\"mat-paginator-sticky\" [pageSizeOptions]=\"pageSizeOptions ? pageSizeOptions: [50, 100, 200]\">\r\n</mat-paginator>",
changeDetection: i0.ChangeDetectionStrategy.OnPush,
styles: [".row-click{cursor:pointer}.search-button{height:24px!important;line-height:24px!important;width:24px!important}.search-button .mat-icon{height:18px!important;line-height:18px!important;width:18px!important}.search-button .material-icons{font-size:18px!important}.search-active{color:#00f}.unit-after:after,.unit-before:before{content:attr(data-unit)}.mat-cell{padding-left:5px;padding-right:5px}.mat-cell,.mat-header-row{text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:550px){.table-container{max-height:calc(100vh - 150px);overflow:auto}}@media screen and (max-width:550px){.mat-table .mat-row{border-bottom:5px solid #ddd;padding-bottom:5px}.mat-table .mat-header-row{display:flex;flex-wrap:wrap;height:auto;margin-bottom:4%;position:-webkit-sticky;position:sticky;top:0;z-index:2}.mat-table .mat-header-row th.mat-header-cell{align-items:center;display:flex;flex:1;justify-content:space-around;padding:1rem .5rem}.mat-table .mat-header-row th.mat-header-cell>.mat-sort-header-container{padding-left:15px}.mat-table .mat-cell{display:block;font-size:1em;font-weight:700;height:30px;margin-bottom:4%;padding-left:8px;padding-right:8px;text-align:right}.mat-table .mat-cell:before{content:attr(data-label);float:left;font-size:.85em;font-weight:400;text-transform:uppercase}.mat-table .mat-footer-cell{display:block;font-size:1em;font-weight:700;height:30px;margin-bottom:4%;padding-left:8px;padding-right:8px;text-align:right}.mat-table .mat-footer-cell:before{content:attr(data-label);float:left;font-size:.85em;font-weight:400;text-transform:uppercase}.mat-table .mat-cell:last-child{border-bottom:5px solid #ddd}}.mat-button-toggle-label-content{line-height:32px!important}"]
},] }
];
DynamicTableComponent.ctorParameters = function () { return [
{ type: String, decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
{ type: XlsxExportService },
{ type: ColumnStorageService }
]; };
DynamicTableComponent.propDecorators = {
tableId: [{ type: i0.Input }],
tableData: [{ type: i0.Input }],
rowClick: [{ type: i0.Input }],
cellClick: [{ type: i0.Input }],
fileName: [{ type: i0.Input }],
columns: [{ type: i0.Input }],
pageSizeOptions: [{ type: i0.Input }],
export: [{ type: i0.Input }],
filter: [{ type: i0.Input }],
multiple: [{ type: i0.Input }],
optionalColumns: [{ type: i0.Input }],
emitFilteredData: [{ type: i0.Input }],
rowClicked: [{ type: i0.Output }],
cellClicked: [{ type: i0.Output }],
selectedRows: [{ type: i0.Output }],
filterResult: [{ type: i0.Output }],
sort: [{ type: i0.ViewChild, args: [sort.MatSort,] }],
paginator: [{ type: i0.ViewChild, args: [paginator.MatPaginator,] }]
};
var DynamicTableContainerComponent = /** @class */ (function () {
function DynamicTableContainerComponent() {
this.export = false; // Enable export for this table
this.filter = false; // Enable filter for this table
this.multiple = false; // Allow multiple select for this table
this.optionalColumns = false; // Show or hide columns
this.emitFilteredData = false; // Show or hide columns
this.rowClicked = new i0.EventEmitter();
this.cellClicked = new i0.EventEmitter();
this.selectedRows = new i0.EventEmitter();
this.filterResult = new i0.EventEmitter();
}
DynamicTableContainerComponent.prototype.ngOnInit = function () {
};
return DynamicTableContainerComponent;
}());
DynamicTableContainerComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-mat-dynamic-table-container',
template: "<ng-container *ngIf=\"tableData$\">\n <div *ngIf=\"(tableData$ | async) as tableData; else loading\">\n <ngx-mat-dynamic-table [tableId]=\"tableId\" [columns]=\"columns\" [tableData]=\"tableData\" [rowClick]=\"rowClick\"\n (rowClicked)=\"rowClicked.emit($event)\" [cellClick]=\"cellClick\" (cellClicked)=\"cellClicked.emit($event)\"\n [fileName]=\"fileName\" [export]=\"export\" [filter]=\"filter\" [multiple]=\"multiple\"\n (selectedRows)=\"selectedRows.emit($event)\" [optionalColumns]=\"optionalColumns\"\n [pageSizeOptions]=\"pageSizeOptions\" [emitFilteredData]=\"emitFilteredData\"\n (filterResult)=\"filterResult.emit($event)\">\n </ngx-mat-dynamic-table>\n </div>\n <ng-template #loading>\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </ng-template>\n</ng-container>",
changeDetection: i0.ChangeDetectionStrategy.OnPush,
styles: [""]
},] }
];
DynamicTableContainerComponent.ctorParameters = function () { return []; };
DynamicTableContainerComponent.propDecorators = {
tableId: [{ type: i0.Input }],
tableData$: [{ type: i0.Input }],
columns: [{ type: i0.Input }],
rowClick: [{ type: i0.Input }],
cellClick: [{ type: i0.Input }],
fileName: [{ type: i0.Input }],
export: [{ type: i0.Input }],
filter: [{ type: i0.Input }],
multiple: [{ type: i0.Input }],
optionalColumns: [{ type: i0.Input }],
pageSizeOptions: [{ type: i0.Input }],
emitFilteredData: [{ type: i0.Input }],
rowClicked: [{ type: i0.Output }],
cellClicked: [{ type: i0.Output }],
selectedRows: [{ type: i0.Output }],
filterResult: [{ type: i0.Output }]
};
var XlsxTableExportComponent = /** @class */ (function () {
function XlsxTableExportComponent(xlsxExportService, matSnackBar) {
this.xlsxExportService = xlsxExportService;
this.matSnackBar = matSnackBar;
}
XlsxTableExportComponent.prototype.ngOnInit = function () {
};
XlsxTableExportComponent.prototype.eportToExcell = function () {
if (!this.data || !this.headers) {
this.matSnackBar.open('Provide data and headers.', 'Ok', { duration: 4000 });
return;
}
this.xlsxExportService.exportExcel(this.data, this.headers, this.fileName ? this.fileName : 'Export');
};
return XlsxTableExportComponent;
}());
XlsxTableExportComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-mat-xlsx-table-export',
template: "<button mat-stroked-button color=\"primary\" (click)=\"eportToExcell()\"><mat-icon>import_export</mat-icon> Export</button>",
styles: [""]
},] }
];
XlsxTableExportComponent.ctorParameters = function () { return [
{ type: XlsxExportService },
{ type: snackBar.MatSnackBar }
]; };
XlsxTableExportComponent.propDecorators = {
data: [{ type: i0.Input }],
fileName: [{ type: i0.Input }],
headers: [{ type: i0.Input }]
};
var LodashGetPipe = /** @class */ (function () {
function LodashGetPipe() {
}
LodashGetPipe.prototype.transform = function (value, key) {
if (!key)
return '';
return lodash.get(value, key);
};
return LodashGetPipe;
}());
LodashGetPipe.decorators = [
{ type: i0.Pipe, args: [{
name: 'lodashGet'
},] }
];
var TableSearchInputComponent = /** @class */ (function () {
function TableSearchInputComponent() {
this.visible = true;
this.selectable = true;
this.separatorKeysCodes = [keycodes.ENTER, keycodes.COMMA];
this.searchCtrl = new forms.FormControl();
this.searchTerms = [];
this.searchChange = new i0.EventEmitter();
}
TableSearchInputComponent.prototype.ngOnInit = function () {
var _this = this;
this.columnSearchSubscription = this.columnSearch$.subscribe(function (searchTerm) {
if ((searchTerm.search || '').trim() || searchTerm.searchType === 'empty') {
// See if there are existing global search
var columnSearch = _this.searchTerms.find(function (st) { return st.column === searchTerm.column; });
// If there are, update
if (columnSearch) {
columnSearch.search = searchTerm.search.trim();
columnSearch.searchType = searchTerm.searchType;
}
else // Else add
_this.searchTerms.push(searchTerm);
_this.emitNewSearch();
}
else {
_this.remove(searchTerm);
}
});
};
TableSearchInputComponent.prototype.add = function (event) {
var value = event.target.value;
// See if there are existing global search
var globalSearch = this.searchTerms.find(function (st) { return st.type === 'global'; });
// Add global search term
if ((value || '').trim()) {
// If there are, update
if (globalSearch)
globalSearch.search = value.trim();
else // Else add
this.searchTerms.push({ type: 'global', search: value.trim() });
this.emitNewSearch();
}
else {
this.remove(globalSearch);
}
};
TableSearchInputComponent.prototype.remove = function (searchTerm) {
var index;
// if column is cleared
if (searchTerm.type === 'column') {
index = this.searchTerms.findIndex(function (i) { return i.column === searchTerm.column; });
}
else {
index = this.searchTerms.findIndex(function (i) { return i.search === searchTerm.search && i.type === searchTerm.type; });
if (index >= 0)
this.searchInput.nativeElement.value = null;
}
if (searchTerm.inputReference)
searchTerm.inputReference.value = '';
if (index >= 0) {
this.searchTerms.splice(index, 1);
this.emitNewSearch();
}
};
TableSearchInputComponent.prototype.orderChanged = function (event) {
dragDrop.moveItemInArray(this.searchTerms, event.previousIndex, event.currentIndex);
this.emitNewSearch();
};
TableSearchInputComponent.prototype.emitNewSearch = function () {
this.searchChange.emit(this.searchTerms);
};
TableSearchInputComponent.prototype.ngOnDestroy = function () {
this.columnSearchSubscription.unsubscribe();
};
return TableSearchInputComponent;
}());
TableSearchInputComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-mat-table-search-input',
template: "<div fxLayout=\"column\" fxLayout.gt-xs=\"row wrap\" fxLayoutAlign=\"start start\" fxLayoutGap.gt-xs=\"15px\">\n <mat-form-field appearance=\"outline\">\n <mat-label>Search</mat-label>\n <input matInput placeholder=\"All Columns\" #searchInput (keyup)=\"add($event)\">\n </mat-form-field>\n <div fxLayout=\"column\">\n <span *ngIf=\"searchTerms.length > 0\" class=\"mat-caption\">Filters</span>\n <mat-chip-list cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"orderChanged($event)\">\n <mat-chip class=\"example-box\" cdkDrag *ngFor=\"let term of searchTerms\"\n [color]=\"term.type === 'global' ? 'primary' : 'accent'\" selected\n [matTooltip]=\"term.type === 'global' ? 'All':term.columnTitle\">\n <span *ngIf=\"term.searchType === 'empty'; else not_empty\">\n {{term.columnTitle}} (empty)\n </span>\n <ng-template #not_empty>\n {{term.search}} {{term.searchType && term.searchType === '!=' ?\n '(\u2260)' : ''}}\n </ng-template>\n <mat-icon (click)=\"remove(term)\" matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-list>\n </div>\n</div>",
styles: [""]
},] }
];
TableSearchInputComponent.ctorParameters = function () { return []; };
TableSearchInputComponent.propDecorators = {
columnSearch$: [{ type: i0.Input }],
searchInput: [{ type: i0.ViewChild, args: ['searchInput',] }],
searchChange: [{ type: i0.Output }]
};
var NgxMatDynamicTableModule = /** @class */ (function () {
function NgxMatDynamicTableModule() {
}
return NgxMatDynamicTableModule;
}());
NgxMatDynamicTableModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [
NgxMatDynamicTableComponent,
DynamicTableComponent,
DynamicTableContainerComponent,
XlsxTableExportComponent,
LodashGetPipe,
TableSearchInputComponent
],
imports: [
common.CommonModule,
forms.FormsModule,
forms.ReactiveFormsModule,
flexLayout.FlexLayoutModule,
table.MatTableModule,
button.MatButtonModule,
formField.MatFormFieldModule,
input.MatInputModule,
icon.MatIconModule,
checkbox.MatCheckboxModule,
paginator.MatPaginatorModule,
sort.MatSortModule,
progressBar.MatProgressBarModule,
tooltip.MatTooltipModule,
select.MatSelectModule,
menu.MatMenuModule,
progressSpinner.MatProgressSpinnerModule,
chips.MatChipsModule,
dragDrop.DragDropModule,
buttonToggle.MatButtonToggleModule
],
providers: [XlsxExportService],
exports: [
DynamicTableComponent,
DynamicTableContainerComponent,
XlsxTableExportComponent
]
},] }
];
/*
* Public API Surface of ngx-mat-dynamic-table
*/
/**
* Generated bundle index. Do not edit.
*/
exports.DynamicTableComponent = DynamicTableComponent;
exports.DynamicTableContainerComponent = DynamicTableContainerComponent;
exports.NgxMatDynamicTableComponent = NgxMatDynamicTableComponent;
exports.NgxMatDynamicTableModule = NgxMatDynamicTableModule;
exports.NgxMatDynamicTableService = NgxMatDynamicTableService;
exports.XlsxTableExportComponent = XlsxTableExportComponent;
exports.ɵa = XlsxExportService;
exports.ɵb = ColumnStorageService;
exports.ɵc = LodashGetPipe;
exports.ɵd = TableSearchInputComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-mat-dynamic-table.umd.js.map