dynamic-mat-table
Version:
dynamic-mat-table is an Angular component for presenting large and complex data with a lightning fast performance (at least 10x faster) and excellent level of control over the presentation.
3,561 lines • 214 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/material/table'), require('@angular/cdk/scrolling'), require('@angular/cdk/drag-drop'), require('@angular/cdk/collections'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/animations'), require('@angular/material/menu'), require('@angular/material/dialog'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/form-field'), require('@angular/material/progress-bar'), require('@angular/material/divider'), require('@angular/forms'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/platform-browser-dynamic'), require('@angular/material/tooltip'), require('@angular/material/core')) :
typeof define === 'function' && define.amd ? define('dynamic-mat-table', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/material/table', '@angular/cdk/scrolling', '@angular/cdk/drag-drop', '@angular/cdk/collections', '@angular/material/sort', '@angular/material/paginator', '@angular/animations', '@angular/material/menu', '@angular/material/dialog', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/common', '@angular/material/icon', '@angular/material/input', '@angular/material/button', '@angular/material/checkbox', '@angular/material/form-field', '@angular/material/progress-bar', '@angular/material/divider', '@angular/forms', '@angular/material/radio', '@angular/material/select', '@angular/platform-browser-dynamic', '@angular/material/tooltip', '@angular/material/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["dynamic-mat-table"] = {}, global.ng.core, global.rxjs, global.rxjs.operators, global.ng.material.table, global.ng.cdk.scrolling, global.ng.cdk.dragDrop, global.ng.cdk.collections, global.ng.material.sort, global.ng.material.paginator, global.ng.animations, global.ng.material.menu, global.ng.material.dialog, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.common, global.ng.material.icon, global.ng.material.input, global.ng.material.button, global.ng.material.checkbox, global.ng.material.formField, global.ng.material.progressBar, global.ng.material.divider, global.ng.forms, global.ng.material.radio, global.ng.material.select, global.ng.platformBrowserDynamic, global.ng.material.tooltip, global.ng.material.core));
})(this, (function (exports, i0, rxjs, operators, table, scrolling, dragDrop, collections, sort, paginator, animations, menu, dialog, overlay, portal, common, icon, input, button, checkbox, formField, progressBar, divider, forms, radio, select, platformBrowserDynamic, tooltip, core) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
// |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// |||||||||||||||||||||||||||||||||||||| Utils ||||||||||||||||||||||||||||||||||||||||||||||||||
/**
* check object is null or undefined
*/
function isNullorUndefined(value) {
if (value === null || value === undefined) {
return true;
}
else {
return false;
}
}
/**
* clone object but reference variable not change
*/
function clone(obj) {
if (obj === null || obj === undefined) {
return obj;
}
else if (Array.isArray(obj)) {
var array_1 = [];
obj.forEach(function (item) { return array_1.push(Object.assign({}, item)); });
return array_1;
}
else {
return Object.assign({}, obj);
}
}
/**
* clone object and all reference variable but may be there is a circle loop.
*/
function deepClone(obj) {
if (obj === null || obj === undefined) {
return obj;
}
else if (Array.isArray(obj)) {
var array_2 = [];
obj.forEach(function (item) { return array_2.push(deepClone(item)); });
return array_2;
}
else {
var c_1 = Object.assign({}, obj);
var fields = Object.getOwnPropertyNames(obj);
fields.forEach(function (f) {
var field = obj[f];
if (field !== null && typeof field === 'object') {
c_1[f] = deepClone(field);
}
});
return c_1;
}
}
function getObjectProp(fieldName, defaultValue) {
var variable = [];
for (var _i = 2; _i < arguments.length; _i++) {
variable[_i - 2] = arguments[_i];
}
for (var v in variable) {
if (variable[v] && !isNullorUndefined(variable[v][fieldName])) {
return variable[v][fieldName];
}
}
return defaultValue;
}
function copy(from, to, forced, nullSkip, undefinedSkip) {
if (forced === void 0) { forced = false; }
if (nullSkip === void 0) { nullSkip = true; }
if (undefinedSkip === void 0) { undefinedSkip = true; }
if (from === null || from === undefined) {
return;
}
if (to === null || to === undefined) {
to = {};
}
var f = Object.keys(from);
var t = Object.keys(to);
f.forEach(function (fi) {
if (forced === true || t.includes(fi) === true) {
if (!(from[fi] === null && nullSkip === true) && !(from[fi] === undefined && undefinedSkip === true)) {
to[fi] = from[fi];
}
}
});
}
/******************************************************************************
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;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function () { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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, pack) {
if (pack || arguments.length === 2)
for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar)
ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
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, state, kind, f) {
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
}
function __classPrivateFieldSet(receiver, state, value, kind, f) {
if (kind === "m")
throw new TypeError("Private method is not writable");
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
}
function __classPrivateFieldIn(state, receiver) {
if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
throw new TypeError("Cannot use 'in' operator on non-object");
return typeof state === "function" ? receiver === state : state.has(receiver);
}
/**
* Simplifies a string (trims and lowerCases)
*/
function simplify(s) {
return ("" + s).trim().toLowerCase();
}
/**
* Transforms a camelCase string into a readable text format
* @example textify('helloWorld!')
* // Hello world!
*/
function textify(text) {
return text
.replace(/([A-Z])/g, function (char) { return " " + char.toLowerCase(); })
.replace(/^([a-z])/, function (char) { return char.toUpperCase(); });
}
/**
* Transforms a text string into a title case text format
* @example titleCase('hello world!')
* // Hello World!
*/
function titleCase(value) {
var sentence = value.toLowerCase().split(' ');
for (var i = 0; i < sentence.length; i++) {
sentence[i] = sentence[i][0].toUpperCase() + sentence[i].slice(1);
}
return sentence.join(' ');
}
var TableVirtualScrollDataSource = /** @class */ (function (_super) {
__extends(TableVirtualScrollDataSource, _super);
function TableVirtualScrollDataSource() {
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
_this.filterMap = {};
_this.columns = [];
return _this;
}
Object.defineProperty(TableVirtualScrollDataSource.prototype, "allData", {
get: function () {
return this.data;
},
enumerable: false,
configurable: true
});
TableVirtualScrollDataSource.prototype.toTranslate = function () {
var e_1, _b, e_2, _c;
var tranList = [];
var keys = Object.keys(this.filterMap);
try {
for (var keys_1 = __values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
var k = keys_1_1.value;
var fieldTotalTran = '';
try {
for (var _d = (e_2 = void 0, __values(this.filterMap[k])), _e = _d.next(); !_e.done; _e = _d.next()) {
var f = _e.value;
fieldTotalTran += f.toPrint();
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
}
finally { if (e_2) throw e_2.error; }
}
if (fieldTotalTran !== '') {
tranList.push({ key: titleCase(k), value: fieldTotalTran });
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (keys_1_1 && !keys_1_1.done && (_b = keys_1.return)) _b.call(keys_1);
}
finally { if (e_1) throw e_1.error; }
}
return tranList;
};
TableVirtualScrollDataSource.prototype.getFilter = function (fieldName) {
return this.filterMap[fieldName];
};
TableVirtualScrollDataSource.prototype.setFilter = function (fieldName, filters) {
var _this = this;
this.filterMap[fieldName] = filters;
return new rxjs.Observable(function (subscriber) {
setTimeout(function () {
_this.refreshFilterPredicate();
subscriber.next();
subscriber.complete();
}, 200); // for show progress
});
};
TableVirtualScrollDataSource.prototype.clearFilter = function (fieldName) {
if (fieldName === void 0) { fieldName = null; }
if (fieldName != null) {
delete this.filterMap[fieldName];
}
else {
this.filterMap = {};
}
this.refreshFilterPredicate();
};
TableVirtualScrollDataSource.prototype.clearData = function () {
this.data = [];
};
TableVirtualScrollDataSource.prototype.refreshFilterPredicate = function () {
var _this = this;
var conditionsString = '';
Object.keys(this.filterMap).forEach(function (key) {
var fieldCondition = '';
_this.filterMap[key].forEach(function (fieldFilter, row, array) {
if (row < array.length - 1) {
fieldCondition += fieldFilter.toString(key) + (fieldFilter.type === 'and' ? ' && ' : ' || ');
}
else {
fieldCondition += fieldFilter.toString(key);
}
});
if (fieldCondition !== '') {
conditionsString += " " + (conditionsString === '' ? '' : ' && ') + " ( " + fieldCondition + " )";
}
});
if (conditionsString !== '') {
var filterFunction_1 = new Function('_a$', 'return ' + conditionsString);
this.filterPredicate = function (data, filter) { return filterFunction_1(data); };
}
else {
this.filterPredicate = function (data, filter) { return true; };
}
this.filter = conditionsString;
};
// When client paging active use for retrieve paging data
TableVirtualScrollDataSource.prototype.pagingData = function (data) {
var p = this._paginator;
if (p && p !== null) {
var end = (p.pageIndex + 1) * p.pageSize;
var start = p.pageIndex * p.pageSize;
return data.slice(start, end);
}
return data;
};
TableVirtualScrollDataSource.prototype._updateChangeSubscription = function () {
var _this = this;
var _a;
this.initStreams();
var sort = this._sort;
var paginator = this._paginator;
var internalPageChanges = this._internalPageChanges;
var filter = this._filter;
var renderData = this._renderData;
var dataStream = this._data;
var sortChange = sort ?
rxjs.merge(sort.sortChange, sort.initialized) : rxjs.of(null);
var pageChange = paginator ?
rxjs.merge(paginator.page, internalPageChanges, paginator.initialized) : rxjs.of(null);
// First Filter
var filteredData = rxjs.combineLatest([dataStream, filter]).pipe(operators.map(function (_b) {
var _c = __read(_b, 1), data = _c[0];
return _this._filterData(data);
}));
// Second Order
var orderedData = rxjs.combineLatest([filteredData, sortChange]).pipe(operators.map(function (_b) {
var _c = __read(_b, 2), data = _c[0], sortColumn = _c[1];
var sc = sortColumn;
if (!sc) {
return data;
}
else if (sc.active !== '') {
var column = _this.columns.filter(function (c) { return c.name == sc.active; })[0];
if (column.sort === 'server-side') {
return data;
}
else if (column.sort === 'client-side') {
return _this._orderData(data);
}
}
}));
// Last Paging
var paginatedData = rxjs.combineLatest([orderedData, pageChange]).pipe(operators.map(function (_b) {
var _c = __read(_b, 1), data = _c[0];
return _this.pagingData(data);
}));
(_a = this._renderChangesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
this._renderChangesSubscription = new rxjs.Subscription();
this._renderChangesSubscription.add(paginatedData.subscribe(function (data) { return _this.dataToRender$.next(data); }));
this._renderChangesSubscription.add(this.dataOfRange$.subscribe(function (data) { return renderData.next(data); }));
};
TableVirtualScrollDataSource.prototype.initStreams = function () {
if (!this.streamsReady) {
this.dataToRender$ = new rxjs.ReplaySubject(1);
this.dataOfRange$ = new rxjs.ReplaySubject(1);
this.streamsReady = true;
}
};
return TableVirtualScrollDataSource;
}(table.MatTableDataSource));
var TableService = /** @class */ (function () {
function TableService() {
}
/************************************* Local Export *****************************************/
TableService.getFormattedTime = function () {
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth() + 1;
var d = today.getDate();
var h = today.getHours();
var mi = today.getMinutes();
var s = today.getSeconds();
return y + "-" + m + "-" + d + "-" + h + "-" + mi + "-" + s;
};
// private downloadBlob(blob: any, filename: string) {
// if (navigator.msSaveBlob) { // IE 10+
// navigator.msSaveBlob(blob, filename);
// } else {
// const link = document.createElement('a');
// if (link.download !== undefined) {
// // Browsers that support HTML5 download attribute
// const link = window.document.createElement('a');
// const date = new Date();
// link.className = 'download' + date.getUTCFullYear() + date.getUTCMonth() + date.getUTCSeconds();
// link.setAttribute('href', blob);
// link.setAttribute('download', filename);
// link.style.visibility = 'hidden';
// link.click();
// // setTimeout(() => {
// // const g = document.body.getElementsByClassName(link.className);
// // document.body.removeChild(link);
// // });
// }
// }
// }
TableService.prototype.downloadBlob = function (blob, filename) {
if (navigator.msSaveBlob) {
// IE 10+
navigator.msSaveBlob(blob, filename);
}
else {
var link = document.createElement("a");
if (link.download !== undefined) {
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = "hidden";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};
TableService.prototype.exportToCsv = function (columns, rows, selectionModel, filename) {
if (filename === void 0) { filename = ""; }
filename = filename === "" ? this.tableName + TableService.getFormattedTime() + ".csv" : filename;
if (!rows || !rows.length) {
return;
}
var fields = columns.filter(function (c) { return c.exportable !== false && c.display !== 'hidden'; });
var separator = ",";
var CR_LF = "\n"; //'\u0D0A';
var keys = fields.map(function (f) { return f.name; });
var headers = fields.map(function (f) { return f.header; });
var csvContent = headers.join(separator) + CR_LF +
rows
.map(function (row) {
return fields.map(function (f) {
var cell = f.toExport(row, "csv") || "";
cell = cell instanceof Date ? cell.toLocaleString() : cell.toString().replace(/"/g, '""');
if (cell.search(/("|,|\n)/g) >= 0) {
cell = "\"" + cell + "\"";
}
return cell;
}).join(separator);
}).join(CR_LF);
var blob = new Blob([
new Uint8Array([0xEF, 0xBB, 0xBF]),
csvContent
], { type: 'text/csv;charset=utf-8' });
this.downloadBlob(blob, filename);
};
TableService.prototype.exportToJson = function (rows, filename) {
if (filename === void 0) { filename = ""; }
filename =
filename === ""
? this.tableName + TableService.getFormattedTime() + ".json"
: filename;
var blob = new Blob([JSON.stringify(rows)], {
type: "text/csv;charset=utf-8;",
});
this.downloadBlob(blob, filename);
};
/************************************* Save Setting into storage *****************************************/
TableService.prototype.loadSavedColumnInfo = function (columnInfo, saveName) {
// Only load if a save name is passed in
if (saveName) {
if (!localStorage) {
return;
}
var loadedInfo = localStorage.getItem(saveName + "-columns");
if (loadedInfo) {
return JSON.parse(loadedInfo);
}
this.saveColumnInfo(columnInfo);
return columnInfo;
}
};
TableService.prototype.saveColumnInfo = function (columnInfo, saveName) {
if (saveName === void 0) { saveName = this.tableName; }
if (saveName) {
if (!localStorage) {
return;
}
localStorage.setItem(saveName + "-columns", JSON.stringify(columnInfo));
}
};
return TableService;
}());
/** @nocollapse */ TableService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function TableService_Factory() { return new TableService(); }, token: TableService, providedIn: "root" });
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
TableService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: "root",
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
TableService.ctorParameters = function () { return []; };
var TableSetting = /** @class */ (function () {
function TableSetting() {
this.direction = 'ltr';
this.visibleActionMenu = null;
}
return TableSetting;
}());
var TableCoreDirective = /** @class */ (function () {
function TableCoreDirective(tableService, cdr, config) {
this.tableService = tableService;
this.cdr = cdr;
this.config = config;
this.backgroundColor = null;
this.contextMenuItems = [];
this.expandColumn = [];
this.defaultWidth = null;
this.minWidth = 120;
/*************************************** I/O parameters *********************************/
this.printConfig = {};
this.rowHeight = 48;
this.headerHeight = 56;
this.footerHeight = 48;
this.headerEnable = true;
this.footerEnable = false;
// tslint:disable-next-line: no-output-on-prefix
this.onTableEvent = new i0.EventEmitter();
this.onRowEvent = new i0.EventEmitter();
this.settingChange = new i0.EventEmitter();
this.paginationChange = new i0.EventEmitter();
this.noData = true;
// Variables //
this.progressColumn = [];
this.displayedColumns = [];
this.displayedFooter = [];
this.tvsDataSource = new TableVirtualScrollDataSource([]);
this._rowSelectionModel = new collections.SelectionModel(true, []);
this._tablePagination = {
pageIndex: 0,
pageSize: 10,
pageSizeOptions: [5, 10, 100, 1000, 10000]
};
this.tablePagingMode = "none";
this.viewportClass = "viewport-with-pagination";
this.showProgress = true;
this.tableSetting = {
direction: "ltr",
columnSetting: null,
visibleActionMenu: null,
};
if (this.config) {
this.tableSetting = Object.assign(Object.assign({}, this.tableSetting), this.config);
}
}
Object.defineProperty(TableCoreDirective.prototype, "direction", {
get: function () {
var _a;
return (_a = this.tableSetting) === null || _a === void 0 ? void 0 : _a.direction;
},
set: function (value) {
this.tableSetting.direction = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableCoreDirective.prototype, "ScrollStrategyType", {
get: function () {
return this.tableSetting.scrollStrategy;
},
set: function (value) {
this.viewport["_scrollStrategy"].scrollStrategyMode = value;
this.tableSetting.scrollStrategy = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableCoreDirective.prototype, "pagingMode", {
get: function () {
return this.tablePagingMode;
},
set: function (value) {
this.tablePagingMode = value;
this.updatePagination();
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableCoreDirective.prototype, "pagination", {
get: function () {
return this._tablePagination;
},
set: function (value) {
if (value && value !== null) {
this._tablePagination = value;
if (isNullorUndefined(this._tablePagination.pageSizeOptions)) {
this._tablePagination.pageSizeOptions = [5, 10, 25, 100];
}
if (isNullorUndefined(this._tablePagination.pageSize)) {
this._tablePagination.pageSize =
this._tablePagination.pageSizeOptions[0];
}
this.updatePagination();
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableCoreDirective.prototype, "rowSelectionModel", {
get: function () {
return this._rowSelectionModel;
},
set: function (value) {
if (!isNullorUndefined(value)) {
if (this._rowSelectionMode &&
value &&
this._rowSelectionMode !== "none") {
this._rowSelectionMode =
value.isMultipleSelection() === true ? "multi" : "single";
}
this._rowSelectionModel = value;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableCoreDirective.prototype, "rowSelectionMode", {
get: function () {
return this._rowSelectionMode;
},
set: function (selection) {
var _a, _b;
selection = selection || "none";
var isSelectionColumn = selection === "single" || selection === "multi";
if (this._rowSelectionModel === null ||
(this._rowSelectionModel.isMultipleSelection() === true &&
selection === "single") ||
(this._rowSelectionModel.isMultipleSelection() === false &&
selection === "multi")) {
this._rowSelectionModel = new collections.SelectionModel(selection === "multi", []);
}
if (((_a = this.displayedColumns) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
!isSelectionColumn &&
this.displayedColumns[0] === "row-checkbox") {
this.displayedColumns.shift();
}
else if (((_b = this.displayedColumns) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
isSelectionColumn &&
this.displayedColumns[0] !== "row-checkbox") {
this.displayedColumns.unshift("row-checkbox");
}
this._rowSelectionMode = selection;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableCoreDirective.prototype, "tableName", {
get: function () {
return this.tableService.tableName;
},
set: function (value) {
this.tableService.tableName = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableCoreDirective.prototype, "showProgress", {
get: function () {
return this.progressColumn.length > 0;
},
set: function (value) {
this.progressColumn = [];
if (value === true) {
this.progressColumn.push("progress");
}
},
enumerable: false,
configurable: true
});
TableCoreDirective.prototype.initSystemField = function (data) {
if (data) {
data = data.map(function (item, index) {
item.id = index;
item.option = item.option || {};
return item;
});
}
};
Object.defineProperty(TableCoreDirective.prototype, "expandComponent", {
get: function () {
return this._expandComponent;
},
set: function (value) {
this._expandComponent = value;
if (this._expandComponent !== null && this._expandComponent !== undefined) {
this.expandColumn = ["expandedDetail"];
}
else {
this.expandColumn = [];
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableCoreDirective.prototype, "columns", {
get: function () {
return this.tableColumns;
},
set: function (fields) {
var _this = this;
(fields || []).forEach(function (f, i) {
// key name error //
if (f.name.toLowerCase() === "id") {
throw 'Field name is reserved.["id"]';
}
var settingFields = (_this.tableSetting.columnSetting || []).filter(function (s) { return s.name === f.name; });
var settingField = settingFields.length > 0 ? settingFields[0] : null;
/* default value for fields */
f.printable = f.printable || true;
f.exportable = f.exportable || true;
f.toExport =
f.toExport ||
(function (row, type) { return (typeof row === "object" ? row[f.name] : ""); });
f.toPrint = function (row) { return (typeof row === "object" ? row[f.name] : ""); };
f.enableContextMenu = f.enableContextMenu || true;
f.header = f.header || titleCase(f.name);
f.display = getObjectProp("display", "visible", settingField, f);
f.filter = getObjectProp("filter", "client-side", settingField, f);
f.sort = getObjectProp("sort", "client-side", settingField, f);
f.sticky = getObjectProp("sticky", "none", settingField, f);
f.width = getObjectProp("width", _this.defaultWidth, settingField, f);
var unit = f.widthUnit || "px";
var style = unit === "px" ? f.width + "px" : "calc( " + f.widthPercentage + "% )";
if (f.width) {
f.style = Object.assign(Object.assign({}, f.style), { "max-width": style, "min-width": style });
}
});
this.tableColumns = fields;
this.updateColumn();
},
enumerable: false,
configurable: true
});
TableCoreDirective.prototype.updateColumn = function () {
if (this.tableColumns) {
// isNullorUndefined(this.tableSetting.columnSetting)
this.tableSetting.columnSetting = clone(this.tableColumns);
}
this.setDisplayedColumns();
};
/**************************************** Methods **********************************************/
TableCoreDirective.prototype.updatePagination = function () {
if (isNullorUndefined(this.tvsDataSource)) {
return;
}
if (this.tablePagingMode === "client-side" ||
this.tablePagingMode === "server-side") {
this.viewportClass = "viewport-with-pagination";
if (!isNullorUndefined(this.tvsDataSource.paginator)) {
var dataLen = this.tvsDataSource.paginator.length;
if (!isNullorUndefined(this._tablePagination.length) &&
this._tablePagination.length > dataLen) {
dataLen = this._tablePagination.length;
}
this.tvsDataSource.paginator.length = dataLen;
}
}
else {
this.viewportClass = "viewport";
if (this.tvsDataSource._paginator !== undefined) {
delete this.tvsDataSource._paginator;
}
}
this.tvsDataSource.refreshFilterPredicate();
};
TableCoreDirective.prototype.clearSelection = function () {
if (this._rowSelectionModel) {
this._rowSelectionModel.clear();
}
};
TableCoreDirective.prototype.clear = function () {
if (!isNullorUndefined(this.tvsDataSource)) {
if (this.viewport) {
this.viewport.scrollTo({ top: 0, behavior: "auto" });
}
this.tvsDataSource.clearData();
this.expandedElement = null;
}
this.clearSelection();
this.cdr.detectChanges();
};
TableCoreDirective.prototype.setDisplayedColumns = function () {
var _this = this;
if (this.columns) {
this.displayedColumns.splice(0, this.displayedColumns.length);
this.columns.forEach(function (column, index) {
column.index = index;
if (column.display === undefined ||
column.display === "visible" ||
column.display === "prevent-hidden") {
_this.displayedColumns.push(column.name);
}
});
if ((this._rowSelectionMode === "multi" ||
this._rowSelectionMode === "single") &&
this.displayedColumns.indexOf("row-checkbox") === -1) {
this.displayedColumns.unshift("row-checkbox");
}
this.displayedFooter = this.columns
.filter(function (item) { return item.footer !== null && item.footer !== undefined; })
.map(function (item) { return item.name; });
if (this.tableSetting.visibleTableMenu !== false) {
this.displayedColumns.push("table-menu");
}
}
};
/************************************ Drag & Drop Column *******************************************/
TableCoreDirective.prototype.refreshGrid = function () {
this.cdr.detectChanges();
this.refreshColumn(this.tableColumns);
this.table.renderRows();
this.viewport.checkViewportSize();
};
TableCoreDirective.prototype.moveRow = function (from, to) {
if (from >= 0 &&
from < this.tvsDataSource.data.length &&
to >= 0 &&
to < this.tvsDataSource.data.length) {
this.tvsDataSource.data[from].id = to;
this.tvsDataSource.data[to].id = from;
dragDrop.moveItemInArray(this.tvsDataSource.data, from, to);
this.tvsDataSource.data = Object.assign([], this.tvsDataSource.data);
}
};
TableCoreDirective.prototype.moveColumn = function (from, to) {
var _this = this;
setTimeout(function () {
dragDrop.moveItemInArray(_this.columns, from, to);
_this.refreshColumn(_this.columns);
});
};
TableCoreDirective.prototype.refreshColumn = function (columns) {
var _this = this;
if (this.viewport) {
var currentOffset_1 = this.viewport.measureScrollOffset();
this.columns = columns;
// this.setDisplayedColumns();
setTimeout(function () { return _this.viewport.scrollTo({ top: currentOffset_1, behavior: "auto" }); }, 0);
}
};
/************************************ Selection Table Row *******************************************/
/** Whether the number of selected elements matches the total number of rows. */
TableCoreDirective.prototype.isAllSelected = function () {
var numSelected = this._rowSelectionModel.selected.length;
var numRows = this.tvsDataSource.filteredData.length;
return numSelected === numRows;
};
/** Selects all rows if they are not all selected; otherwise clear selection. */
TableCoreDirective.prototype.masterToggle = function () {
var _this = this;
var isAllSelected = this.isAllSelected();
if (isAllSelected === false) {
this.tvsDataSource.filteredData.forEach(function (row) { return _this._rowSelectionModel.select(row); });
}
else {
this._rowSelectionModel.clear();
}
this.onRowEvent.emit({
event: "MasterSelectionChange",
sender: { selectionModel: this._rowSelectionModel },
});
};
TableCoreDirective.prototype.onRowSelectionChange = function (e, row) {
if (e) {
this._rowSelectionModel.toggle(row);
this.onRowEvent.emit({
event: "RowSelectionChange",
sender: {
selectionModel: this._rowSelectionModel,
row: row
},
});
}
};
return TableCoreDirective;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
TableCoreDirective.decorators = [
{ type: i0.Directive, args: [{
// tslint:disable-next-line:directive-selector
selector: "[core]",
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
TableCoreDirective.ctorParameters = function () { return [
{ type: TableService },
{ type: i0.ChangeDetectorRef },
{ type: TableSetting }
]; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
TableCoreDirective.propDecorators = {
sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }],
paginator: [{ type: i0.ViewChild, args: [paginator.MatPaginator, { static: true },] }],
dataSource: [{ type: i0.Input }],
backgroundColor: [{ type: i0.Input }],
direction: [{ type: i0.Input }, { type: i0.HostBinding, args: ["style.direction",] }],
contextMenuItems: [{ type: i0.Input }],
ScrollStrategyType: [{ type: i0.Input }],
pagingMode: [{ type: i0.Input }],
pagination: [{ type: i0.Input }],
rowSelectionModel: [{ type: i0.Input }],
rowSelectionMode: [{ type: i0.Input }],
tableName: [{ type: i0.Input }],
showProgress: [{ type: i0.Input }],
expandComponent: [{ type: i0.Input }],
rowContextMenuItems: [{ type: i0.Input }],
defaultWidth: [{ type: i0.Input }],
minWidth: [{ type: i0.Input }],
columns: [{ type: i0.Input }],
printConfig: [{ type: i0.Input }],
sticky: [{ type: i0.Input }],
pending: [{ type: i0.Input }],
rowHeight: [{ type: i0.Input }],
headerHeight: [{ type: i0.Input }],
footerHeight: [{ type: i0.Input }],
headerEnable: [{ type: i0.Input }],
footerEnable: [{ type: i0.Input }],
showNoData: [{ type: i0.Input }],
showReload: [{ type: i0.Input }],
onTableEvent: [{ type: i0.Output }],
onRowEvent: [{ type: i0.Output }],
settingChange: [{ type: i0.Output }],
paginationChange: [{ type: i0.Output }],
table: [{ type: i0.ViewChild, args: [table.MatTable, { static: true },] }],
viewport: [{ type: i0.ViewChild, args: [scrolling.CdkVirtualScrollViewport, { static: true },] }]
};
var AbstractFilter = /** @class */ (function () {
function AbstractFilter() {
}
AbstractFilter.prototype.hasValue = function () {
if (this.parameters !== null) {
return this.parameters.filter(function (p) { return p.value != null && p.value !== undefined && p.value.toString() !== ''; }).length > 0;
}
};
return AbstractFilter;
}());
var contains = 'a.toString().includes(b)';
var equals$1 = 'a.toString() === b.toString()';
var startsWith = 'a.toString().startsWith(b)';
var endsWith = 'a.toString().endsWith(b.toString())';
var empty$1 = '!a';
var notEmpty$1 = '!!a';
var operations$1 = [contains, equals$1, startsWith, endsWith, empty$1, notEmpty$1];
var TextFilter = /** @class */ (function (_super) {
__extends(TextFilter, _super);
function TextFilter(languagePack) {
var _this = _super.call(this) || this;
_this.languagePack = languagePack;
// tslint:disable-next-line:variable-name
_this._selectedIndex = null;
_this._selectedIndex = 0;
if (TextFilter.operationList.length === 0) { // init for first time
operations$1.forEach(function (fn) {
TextFilter.operationList.push({ predicate: fn, text: null });
});
}
TextFilter.operationList[0].text = languagePack.filterLabels.TextContains; // contains //
TextFilter.operationList[1].text = languagePack.filterLabels.TextEquals; // equals //
TextFilter.operationList[2].text = languagePack.filterLabels.TextStartsWith; // startsWith //
TextFilter.operationList[3].text = languagePack.filterLabels.TextEndsWith; // endsWith //
TextFilter.operationList[4].text = languagePack.filterLabels.TextEmpty; // empty //
TextFilter.operationList[5].text = languagePack.filterLabels.TextNotEmpty; // notEmpty //
return _this;
}
Object.defineProperty(TextFilter.prototype, "selectedIndex", {
get: function () {
return this._selectedIndex;
},
set: function (value) {
this._selectedIndex = value;
// init filter parameters
if (value === 0 || value === 1 || value === 2 || value === 3) { // contains equals startsWith endsWith
this.parameters = [{ value: '', text: this.languagePack.filterLabels.Text }];
}
else { // empty notEmpty
this.parameters = null;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(TextFilter.prototype, "selectedValue", {
get: function () {
if (this._selectedIndex !== null) {
return TextFilter.operationList[this._selectedIndex];
}
else {
return null;
}
},
enumerable: false,
configurable: true
});
TextFilter.prototype.getOperations = function () {
return TextFilter.operationList;
};
TextFilter.prototype.toString = function (dynamicVariable) {
var a = '_a$';
var b = '_b$';
var predicate = this.selectedValue.predicate.replace('a', a).replace('b', b);
var statement = predicate.replace(a, a + "['" + dynamicVariable + "']?.toString()?.toLowerCase()");
// one static parameters equals notEquals greaterThan lessThan //
if (this._selectedIndex === 0 ||
this._selectedIndex === 1 ||
this._selectedIndex === 2 ||
this._selectedIndex === 3) {
var value = '\'' + (this.parameters[0].value !== null ? this.parameters[0].value.toLowerCase() : ' null ') + '\'';
return statement.replace('_b$', value);
}
else { // without static parameters
return statement;
}
};
TextFilter.prototype.toPrint = function () {
return TextFilter.operationList[this._selectedIndex].text + ' ' + this.parameters[0].value + ' ' + (this.type || '') + ' ';
};
TextFilter.prototype.toSql = function () {
return TextFilter.sql[this._selectedIndex].replace('[*]', (this.parameters[0].value || '')) + (this.type || '') + ' ';
};
return TextFilter;
}(AbstractFilter));
TextFilter.sql = ['LIKE "%[*]%"', '= "[*]"', 'LIKE "%[*]"', 'LIKE "[*]%"', 'IS NULL', 'IS NOT NULL'];
TextFilter.operationList = [];
var equals = 'a === b';
var notEquals = 'a !== b';
var greaterThan = 'a > b';
var lessThan = 'a < b';
var empty = '!a';
var notEmpty = '!!a';
var operations = [equals, notEquals, greaterThan, lessThan, empty, notEmpty];
var NumberFilter = /** @class */ (function (_super) {
__extends(NumberFilter, _super);
// private languageText: LanguagePack;
function NumberFilter(languagePack) {
var _this = _super.call(this) || this;
_this.languagePack = languagePack;
// tslint:disable-next-line:variable-name
_this._selectedIndex = null;
if (NumberFilter.operationList.length === 0) {
operations.forEach(function (fn) {
NumberFilter.operationList.push({ predicate: fn, text: null });
});
}
NumberFilter.operationList[0].text = languagePack.filterLabels.NumberEquals; // equals //
NumberFilter.operationList[1].text = languagePack.filterLabels.NumberNotEquals; // notEquals //
NumberFilter.operationList[2].text = languagePack.filterLabels.NumberGreaterThan; // greaterThan //
NumberFilter.operationList[3].text = languagePack.filterLabels.NumberLessThan; // lessThan //
NumberFilter.operationList[4].text = languagePack.filterLabels.NumberEmpty; // empty //
NumberFilter.operationList[5].text = languagePack.filterLabels.NumberNotEmpty; // notEmpty //
return _this;
}
Object.defineProperty(NumberFilter.prototype, "selectedIndex", {
get: function () {
return this._selectedIndex;
},
set: function (value) {
this._selectedIndex = value;
// init filter parameters
if (value === 0 || value === 1 || value === 2 || value === 3) { // equals notEquals greaterThan lessThan
this.parameters = [{ value: null, text: this.languagePack.filterLabels.Number }];
}
else { // empty notEmpty
this.parameters = null;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(NumberFilter.prototype, "selectedValue", {
get: function () {
if (this._selectedIndex !== null) {
return NumberFilter.operationList[this._selectedIndex];
}
else {
return null;
}
},
enumerable: false,
configurable: true
});
NumberFilter.prototype.getOperations = function () {
return NumberFilter.operationList;
};
NumberFilter.prototype.toString = function (dynamicVariable) {
var a = '_a$';
var b = '_b$';
var predicate = this.selectedValue.predicate.replace('a', a).replace('b', b);
var statement = predicate.replace(a, a + "['" + dynamicVariable + "']");
// one static variable (equals, notEquals,greaterThan,lessThan)
if (this._selectedIndex === 0 ||
this._selectedIndex === 1 ||
this._selectedIndex === 2 ||
this._selectedIndex === 3) {
var value = this.parameters[0].value ? this.parameters[0].value.toString() : ' null ';
return statement.replace(b, value);
}
else { // none static variable (empty, notEmpty)
return statement;
}
};
NumberFilter.prototype.toPrint = function () {
return NumberFilter.operationList[this._selectedIndex].text + ' ' + this.parameters[0].value + ' ' + (this.type || '') + ' ';
};
NumberFilter.prototype.toSql = function () {
return NumberFilter.sql[this._selectedIndex] + ' ' + (this.parameters[0].value || '') + ' ' + (this.type || '') + ' ';
};
return NumberFilter;
}(AbstractFilter));
NumberFilter.sql = ['=', '<>', '>', '<', 'IS NULL', 'IS NOT NULL'];
NumberFilter.operationList = [];
var TableIntl = /** @class */ (function () {
function TableIntl() {
this.menuLabels = {
saveData: 'Save Data',
newSetting: 'New Setting',
defaultSetting: 'Default Setting',
noSetting: 'No Setting',
fullScreen: 'Full Screen',
columnSetting: 'Column Setting',
saveTableSetting: 'Save Table Setting',
clearFilter: 'Clear Filter',
jsonFile: 'Json File',
csvFile: 'CSV File',
printTable: 'Print Table',
filterMode: 'Filter Mode:',
filterLocalMode: 'Local',
filterServerMode: 'Server',
sortMode: 'Sort Mode:',
sortLocalMode: 'Local',
sortServerMode: 'Server',
printMode: 'Print Mode',
printYesMode: 'Yes',
printNoMode: 'No',
pinMode: 'Pin Mode:',
pinNoneMode: 'None',
pinStartMode: 'Start',
pinEndMode: 'End',
thereIsNoColumn: 'There is no column.'
};
this.paginatorLabels = {
changes: new rxjs.Subject(),
itemsPerPageLabel: 'Items per page:',
nextPageLabel: 'Next Page:',
previousPageLabel: 'Previous Page:',
firstPageLabel: 'First Page:',
lastPageLabel: 'Last Page:',
getRangeLabel: function (page, pageSize, length) {
if (length === 0 || pageSize === 0) {
return "0 of " + length;
}
length = Math.max(length, 0);
var startIndex = page * pageSize;
var endIndex = startIndex < length ?
Math.min(startIndex + pageSize, length) :
startIndex + pageSize;
return startIndex + 1 + " - " + endIndex + " of " + length;
}
};
this.tableLabels = {
NoData: 'No records found.'
};
this.filterLabels = {
Clear: 'Clear',
Search: 'Search',
And: 'And',
Or: 'Or',
/* Text Compare */
Text: 'Text',
TextContains: 'Contains',
TextEmpty: 'Empty',
TextStartsWith: 'Starts With',
TextEndsWith: 'Ends With',
TextEquals: 'Equals',
TextNotEmpty: 'Not Empty',
/* Number Compare */
Number: 'Number',
NumberEquals: 'Equals',
NumberNotEquals: 'Not Equals',
NumberGreaterThan: 'Greater Than',
NumberLessThan: 'Less Than',
NumberEmpty: 'Empty',
NumberNotEmpty: 'Not Empty',
/* Category List Compare */
CategoryContains: 'Contains',
CategoryNotContains: 'Not Contains',
/* Boolean Compare */
/* Date Compare */
};
}
return TableIntl;
}());
/** @nocollapse */ TableIntl.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function TableIntl_Factory() { return new TableIntl(); }, token: TableIntl, providedIn: "root" });
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
TableIntl.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
var listAnimation = animations.trigger('listAnimation', [
animations.transition('* <=> *', [
animations.query(':enter', [animations.style({ opacity: 0 }), animations.stagger('10ms', animations.animate('400ms ease-out', animations.style({ opacity: 1 })))], { optional: true }),
])
]);
var HeaderFilterComponent = /** @class */ (function () {
function HeaderFilterComponent(languagePack, service, cdr) {
this.languagePack = languagePack;
this.service = service;
this.cdr = cdr;
this.filterChanged = new i0.EventEmitter();
this.filterList = [];
}
Object.defineProperty(HeaderFilterComponent.prototype, "filters", {
get: function () {
if (isNullorUndefined(this.filterList) === true || this.filterList.length === 0) {
this.filterList = [];
this.addNewFilter(this.field.type || 'text');
}
return this.filterList;
},
set: function (values) {
this.filterList = values;
},
enumerable: false,
configurable: true
});
Object.defineProperty(HeaderFilterComponent.prototype, "hasValue", {
get: function () {
return this.filterList && this.filterList.filter(function (f) { return f.hasValue() === true; }).length > 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(HeaderFilterComponent.prototype, "showTrigger", {
get: function () {
if (this.menu === undefined) {
return false;
}
else {
return this.menu.menuOpen || this.hasValue;
}
},
enumerable: false,
configurable: true
});
HeaderFilterComponent.prototype.ngOnDestroy = function () {
if (this.eventsSubscription) {
this.eventsSubscription.unsubscribe();
}
};
HeaderFilterComponent.prototype.ngOnInit = function () {
if (isNullorUndefined(this.filters)) {
this.filters = [];
this.addNewFilter(this.field.type);
}
};
HeaderFilterComponent.prototype.addNewFilter = function (type) {
if (type === void 0) { type = 'text'; }
switch (type || 'text') {
case 'text': {
this.filterList.push(new TextFilter(this.languagePack));
break;
}
case 'number': {
this.filterList.push(new NumberFilter(this.languagePack));
break;
}
case 'date': {
// this.compare = new DateCompare(service);
break;
}
case 'boolean': {
// this.compare = new BooleanCompare(service);
break;
}
default: this.filterList.push(new TextFilter(this.languagePack));
}
this.filters[this.filters.length - 1].selectedIndex = 0;
return this.filters[this.filters.length - 1];
};
HeaderFilterComponent.prototype.ngAfterViewInit = function () {
var _this = this;
if (this.menu) {
this.eventsSubscription = this.menu.menuOpened.subscribe(function () { return _this.focusToLastInput(); });
}
};
HeaderFilterComponent.prototype.focusToLastInput = function () {
var _this = this;
setTimeout(function () {
if (_this.filterInputList.length > 0) {
_this.filterInputList.last.focus();
}
});
};
HeaderFilterComponent.prototype.filterAction_OnClick = function (index, action) {
var _this = this;
if (action === 0 || action === 1) { // and or
this.filters[index].type = action === 0 ? 'and' : 'or';
if (this.filters.length === index + 1) {
this.addNewFilter(this.field.type);
this.focusToLastInput();
}
}
else if (action === 2 && this.filters.length > 1) { // delete
setTimeout(function () {
_this.filters.splice(index, 1);
_this.cdr.detectChanges();
_this.focusToLastInput();
}); // bug for delete filter item(unwanted reaction close menu)
}
};
HeaderFilterComponent.prototype.clearColumn_OnClick = function () {
this.filterList = [];
this.filterChanged.emit(this.filterList);
};
HeaderFilterComponent.prototype.applyFilter_OnClick = function () {
this.filterChanged.emit(this.filterList);
};
return HeaderFilterComponent;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
HeaderFilterComponent.decorators = [
{ type: i0.Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'header-filter',
template: "<ng-content></ng-content>\r\n\r\n<mat-menu filter-event #filterMenu=\"matMenu\" class=\"menu\">\r\n <ng-template matMenuContent>\r\n\r\n <div filter-event class=\"menu-title\">\r\n {{field?.header}}\r\n </div>\r\n <div [@listAnimation]=\"filters.length\" filter-event *ngFor=\"let filter of filters; let index = index\"\r\n class=\"filter-panel\">\r\n\r\n <mat-form-field>\r\n <mat-select [value]=\"filter.selectedIndex\" [panelClass]=\"'mat-elevation-z10'\"\r\n (selectionChange)=\"filter.selectedIndex = $event.value;\" placeholder='Conditions'\r\n (keyup.enter)=\"applyFilter_OnClick()\">\r\n <mat-option *ngFor=\"let op of filter.getOperations(); let selectedIndex=index\" [value]=\"selectedIndex\">\r\n {{ op.text }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <div *ngFor=\"let ctrl of filter?.parameters\">\r\n <mat-form-field class=\"input-field\">\r\n <mat-label>{{ctrl.text}}</mat-label>\r\n <input matInput #filterInput=\"matInput\" [(ngModel)]=\"ctrl.value\" [placeholder]=\"\"\r\n (keyup.enter)=\"applyFilter_OnClick()\" autocomplete=\"off\" />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"or-and\">\r\n <span *ngIf=\"filters?.length !== index+1\" class=\"selected-filter-type\">{{ filter?.type === 'and' ?\r\n languagePack.filterLabels.And : languagePack.filterLabels.Or}}</span>\r\n <span class=\"svg\">\r\n <mat-icon (click)=\"filterAction_OnClick(index,0)\">add</mat-icon>\r\n </span>\r\n <span class=\"svg\">\r\n <mat-icon (click)=\"filterAction_OnClick(index,1)\" style=\"transform: rotate(90deg);\">drag_handle</mat-icon>\r\n </span>\r\n <span class=\"svg\">\r\n <mat-icon (click)=\"filterAction_OnClick(index,2)\">clear</mat-icon>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div filter-event class=\"menu-action\">\r\n <button mat-raised-button type=\"button\" (click)=\"clearColumn_OnClick()\">{{ languagePack.filterLabels.Clear\r\n }}</button>\r\n <button mat-raised-button type=\"button\" color=\"primary\" (click)=\"applyFilter_OnClick()\">{{\r\n languagePack.filterLabels.Search}}</button>\r\n </div>\r\n </ng-template>\r\n</mat-menu>\r\n\r\n<span class=\"trigger\" [matMenuTriggerFor]=\"filterMenu\" *ngIf=\"field.filter !== 'none'\">\r\n <mat-icon>filter_list</mat-icon>\r\n</span>\r\n",
changeDetection: i0.ChangeDetectionStrategy.OnPush,
animations: [listAnimation],
styles: ["@media print{.print-preview{background-color:#fff;position:fixed;width:100%;height:auto;z-index:99999999;margin:0;padding:0;top:0;left:0;overflow:visible;display:block}}.disable-backdrop-click .cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{pointer-events:none}:host{display:flex;align-items:center;width:100%;align-self:stretch}.trigger{color:#0000004d;display:flex;opacity:0;transform:translateY(-5px);cursor:pointer;transition-duration:.4s;transition-property:opacity,transform;position:sticky;right:0px;z-index:1;padding-left:0 8px}:host.has-value .trigger{opacity:1;color:#0000008a}:host:hover .trigger,:host.show-trigger .trigger{opacity:1;transform:translateY(-1px)}::ng-deep .mat-menu-content:not(:empty){padding:0!important}.mat-menu-item-highlighted:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item:hover:not([disabled]){background-color:inherit}.input-field{margin-top:-15px}.menu-title{font-weight:bolder;top:-8px;position:sticky;background-color:#fff;z-index:1}.menu-action{position:sticky;bottom:-8px;padding-top:10px;padding-bottom:0;background-color:#fff}.menu-action button{width:calc(50% - 10px);margin:5px;border-radius:10px}.filter-panel{border-radius:5px;background-color:#fdfbfb;border:solid 1px #efefef;transition:all .5s;padding:5px;overflow:hidden;font-size:14px;margin-top:10px;display:flex;flex-direction:column}.filter-panel:nth-child(2){margin-top:0!important}.filter-panel:hover{border:solid 1px #d1d1d1}.filter-panel:hover .svg{opacity:1;transform:translateY(-1px)}.or-and{display:inherit!important;text-align:right;margin:-12px 0;height:35px;cursor:inherit;font-size:12px}.svg{color:#0000004d;display:flex;opacity:0;transform:translateY(-5px);transition-duration:.4s;transition-property:opacity,transform;margin-left:5px;padding:2px;border-radius:5px;color:#4c4c4c;cursor:pointer;display:inline-block!important;height:24px}.svg mat-icon{margin:0;vertical-align:top;border-radius:5px}.svg mat-icon:hover{color:#fff;background-color:#89898a}.svg:hover{background-color:#f8f8f8}.selected-filter-type{float:left;color:#fff;background-color:#89898a;border-radius:5px;padding:0 4px;line-height:24px}::ng-deep .menu{padding:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}\n"]
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
HeaderFilterComponent.ctorParameters = function () { return [
{ type: TableIntl },
{ type: TableService },
{ type: i0.ChangeDetectorRef }
]; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
HeaderFilterComponent.propDecorators = {
field: [{ type: i0.Input }],
filterChanged: [{ type: i0.Output }],
filterInputList: [{ type: i0.ContentChildren, args: ['filterInput',] }],
menu: [{ type: i0.ViewChild, args: [menu.MatMenuTrigger, { static: true },] }],
filters: [{ type: i0.Input }],
hasValue: [{ type: i0.HostBinding, args: ['class.has-value',] }],
showTrigger: [{ type: i0.HostBinding, args: ['class.show-trigger',] }]
};
var ResizeColumn = /** @class */ (function () {
function ResizeColumn() {
this.resizeHandler = null;
this.widthUpdate = new rxjs.Subject();
}
return ResizeColumn;
}());
// import { ElementRef } from "@angular/core";
// export function requestFullscreen(element: ElementRef) {
// if (element.nativeElement.requestFullscreen) {
// element.nativeElement.requestFullscreen();
// } else if (element.nativeElement.webkitRequestFullscreen) { /* Safari */
// element.nativeElement.webkitRequestFullscreen();
// } else if (element.nativeElement.msRequestFullscreen) { /* IE11 */
// element.nativeElement.msRequestFullscreen();
// }
// }
function toggleFullscreen(element) {
if (isFullscreen()) {
exitFullscreen();
}
else {
requestFullscreen(element);
}
}
function requestFullscreen(element) {
if (element.nativeElement.requestFullscreen) {
element.nativeElement.requestFullscreen();
}
else if (element.nativeElement.webkitRequestFullscreen) { /* Safari */
element.nativeElement.webkitRequestFullscreen();
}
else if (element.nativeElement.msRequestFullscreen) { /* IE11 */
element.nativeElement.msRequestFullscreen();
}
}
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
function isFullscreen() {
return !!(document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement);
}
var TooltipComponent = /** @class */ (function () {
function TooltipComponent(content) {
this.content = content;
this.class = 'cell-tooltip';
}
TooltipComponent.prototype.ngOnInit = function () {
};
TooltipComponent.prototype.ngOnDestroy = function () {
};
return TooltipComponent;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
TooltipComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'app-tooltip',
template: "<div>\r\n\t<ng-template [templateOrString]=\"content\">\r\n\t\t{{ content }}\r\n\t</ng-template>\r\n</div>\r\n",
changeDetection: i0.ChangeDetectionStrategy.OnPush,
animations: [
animations.trigger('tooltip', [
animations.transition(':enter', [
animations.style({ opacity: 0 }),
animations.animate(300, animations.style({ opacity: 1 })),
]),
animations.transition(':leave', [
animations.animate(300, animations.style({ opacity: 0 })),
])
])
]
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
TooltipComponent.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: i0.Inject, args: ['tooltipConfig',] }] }
]; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
TooltipComponent.propDecorators = {
class: [{ type: i0.HostBinding, args: ['class',] }]
};
var tableAnimation = animations.trigger("tableAnimation", [
animations.transition("void => *", [
animations.query(":enter", animations.style({ transform: "translateX(-50%)", opacity: 0 }), {
//limit: 5,
optional: true,
}),
animations.query(":enter", animations.stagger("0.01s", [
animations.animate("0.5s ease", animations.style({ transform: "translateX(0%)", opacity: 1 })),
]), {
//limit: 5,
optional: true,
}),
]),
]);
var expandAnimation = animations.trigger("detailExpand", [
animations.state("collapsed", animations.style({ height: "0px", minHeight: "0" })),
animations.state("expanded", animations.style({ height: "*" })),
animations.transition("expanded <=> collapsed", animations.animate("100ms cubic-bezier(0.4, 0.0, 0.2, 1)")),
]);
var DynamicMatTableComponent = /** @class */ (function (_super) {
__extends(DynamicMatTableComponent, _super);
function DynamicMatTableComponent(dialog, renderer, languagePack, tableService, cdr, overlay, overlayContainer, overlayPositionBuilder, config) {
var _this = _super.call(this, tableService, cdr, config) || this;
_this.dialog = dialog;
_this.renderer = renderer;
_this.languagePack = languagePack;
_this.tableService = tableService;
_this.cdr = cdr;
_this.overlay = overlay;
_this.overlayContainer = overlayContainer;
_this.overlayPositionBuilder = overlayPositionBuilder;
_this.config = config;
_this.init = false;
_this.height = null;
_this.contextMenuPosition = { x: "0px", y: "0px" };
_this.dragDropData = { dragColumnIndex: -1, dropColumnIndex: -1 };
_this.printing = true;
_this.printTemplate = null;
_this.resizeColumn = new ResizeColumn();
/* Tooltip */
_this.overlayRef = null;
_this.indexTrackFn = function (index) {
return index;
};
_this.currentContextMenuSender = {};
_this.overlayContainer
.getContainerElement()
.addEventListener("contextmenu", function (e) {
e.preventDefault();
return false;
});
_this.eventsSubscription = _this.resizeColumn.widthUpdate
.pipe(operators.delay(150), operators.filter(function (data) { return data.e.columnIndex >= 0; }) /* Checkbox Column */)
.subscribe(function (data) {
var _a;
var i = data.e.columnIndex;
if (data.e.resizeHandler === "left") {
var visibleColumns = _this.columns.filter(function (c) { return c.display !== "hidden" && c.index < data.e.columnIndex; });
i = visibleColumns[visibleColumns.length - 1].index;
}
// this.columns[i].width = data.w;
var unit = _this.columns[i].widthUnit || "px";
var style = "";
if (_this.columns[i].minWidth) {
data.w = Math.min(_this.columns[i].minWidth, data.w);
}
if (unit === "px") {
style = data.w + "px";
}
else if (unit === "%") {
var widthChanges = ((_a = _this.tableSetting.columnSetting[i].width) !== null && _a !== void 0 ? _a : 0) - data.w;
console.log(_this.tableSetting.columnSetting[i].width, data.w, widthChanges);
style = "calc( " + _this.columns[i].widthPercentage + "% + " + widthChanges + "px)";
}
_this.columns[i].style = Object.assign(Object.assign({}, _this.columns[i].style), { "max-width": style, "min-width": style });
/* store latest width in setting if exists */
if (_this.tableSetting.columnSetting[i]) {
_this.tableSetting.columnSetting[i].width = data.w;
}
_this.refreshGrid();
});
return _this;
}
Object.defineProperty(DynamicMatTableComponent.prototype, "setting", {
get: function () {
return this.tableSetting;
},
set: function (value) {
var _this = this;
var _a;
if (!isNullorUndefined(value)) {
value.alternativeRowStyle =
value.alternativeRowStyle || this.tableSetting.alternativeRowStyle;
value.columnSetting =
value.columnSetting || this.tableSetting.columnSetting;
value.direction = value.direction || this.tableSetting.direction;
value.normalRowStyle =
value.normalRowStyle || this.tableSetting.normalRowStyle;
value.visibleActionMenu =
value.visibleActionMenu || this.tableSetting.visibleActionMenu;
value.visibleTableMenu =
value.visibleTableMenu || this.tableSetting.visibleTableMenu;
value.autoHeight = value.autoHeight || this.tableSetting.autoHeight;
value.saveSettingMode =
value.saveSettingMode || this.tableSetting.saveSettingMode || "simple";
this.pagination.pageSize = value.pageSize || this.tableSetting.pageSize || this.pagination.pageSize;
/* Dynamic Cell must update when setting change */
(_a = value === null || value === void 0 ? void 0 : value.columnSetting) === null || _a === void 0 ? void 0 : _a.forEach(function (column) {
var _a;
var originalColumn = (_a = _this.columns) === null || _a === void 0 ? void 0 : _a.find(function (c) { return c.name === column.name; });
if (originalColumn) {
column = Object.assign(Object.assign({}, originalColumn), column);
}
});
this.tableSetting = value;
this.setDisplayedColumns();
}
},
enumerable: false,
configurable: true
});
DynamicMatTableComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.tvsDataSource.paginator = this.paginator;
this.tvsDataSource.sort = this.sort;
this.dataSource.subscribe(function (x) {
x = x || [];
_this.rowSelectionModel.clear();
_this.tvsDataSource.data = [];
_this.initSystemField(x);
_this.tvsDataSource.data = x;
// this.cdr.detectChanges();
_this.refreshUI();
// window.requestAnimationFrame(() => {
// });
});
this.tvsDataSource.sort.sortChange.subscribe(function (sort) {
_this.pagination.pageIndex = 0;
_this.onTableEvent.emit({ event: "SortChanged", sender: sort });
});
};
DynamicMatTableComponent.prototype.tooltip_onChanged = function (column, row, elementRef, show) {
if (column.cellTooltipEnable === true) {
if (show === true && row[column.name]) {
if (this.overlayRef !== null) {
this.closeTooltip();
}
var positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(elementRef)
.withPositions([
{
originX: "center",
originY: "top",
overlayX: "center",
overlayY: "bottom",
offsetY: -8,
},
]);
this.overlayRef = this.overlay.create({ positionStrategy: positionStrategy });
var option = {
providers: [{
provide: "tooltipConfig",
useValue: row[column.name],
}],
};
var injector = i0.Injector.create(option);
var tooltipRef_1 = this.overlayRef.attach(new portal.ComponentPortal(TooltipComponent, null, injector));
setTimeout(function () {
tooltipRef_1.destroy();
}, 5000);
}
else if (show === false && this.overlayRef !== null) {
this.closeTooltip();
}
}
};
DynamicMatTableComponent.prototype.closeTooltip = function () {
var _a;
(_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
this.overlayRef = null;
};
DynamicMatTableComponent.prototype.ellipsis = function (column, cell) {
if (cell === void 0) { cell = true; }
if (cell === true && column.cellEllipsisRow > 0) {
return {
display: "-webkit-box",
"-webkit-line-clamp": column === null || column === void 0 ? void 0 : column.cellEllipsisRow,
"-webkit-box-orient": "vertical",
overflow: "hidden",
"white-space": "pre-wrap",
};
}
else if (cell === true && column.headerEllipsisRow > 0) {
return {
display: "-webkit-box",
"-webkit-line-clamp": column === null || column === void 0 ? void 0 : column.headerEllipsisRow,
"-webkit-box-orient": "vertical",
overflow: "hidden",
"white-space": "pre-wrap",
};
}
};
DynamicMatTableComponent.prototype.trackColumn = function (index, item) {
return "" + item.index;
};
DynamicMatTableComponent.prototype.ngOnDestroy = function () {
if (this.eventsSubscription) {
this.eventsSubscription.unsubscribe();
}
};
DynamicMatTableComponent.prototype.refreshUI = function () {
var _a, _b;
if (this.tableSetting.autoHeight === true) {
this.height = this.autoHeight();
}
else {
this.height = null;
}
this.refreshColumn(this.tableColumns);
this.tvsDataSource.columns = this.columns;
var scrollStrategy = this.viewport["_scrollStrategy"];
(_a = scrollStrategy === null || scrollStrategy === void 0 ? void 0 : scrollStrategy.viewport) === null || _a === void 0 ? void 0 : _a.checkViewportSize();
(_b = scrollStrategy === null || scrollStrategy === void 0 ? void 0 : scrollStrategy.viewport) === null || _b === void 0 ? void 0 : _b.scrollToOffset(0);
this.cdr.detectChanges();
};
DynamicMatTableComponent.prototype.ngOnInit = function () {
var _this = this;
setTimeout(function () {
_this.init = true;
}, 1000);
var scrollStrategy = this.viewport["_scrollStrategy"];
scrollStrategy.offsetChange.subscribe(function (offset) { });
this.viewport.renderedRangeStream.subscribe(function (t) {
// in expanding row scrolling make not good appearance therefor close it.
if (_this.expandedElement &&
_this.expandedElement.option &&
_this.expandedElement.option.expand) {
// this.expandedElement.option.expand = false;
// this.expandedElement = null;
}
});
};
Object.defineProperty(DynamicMatTableComponent.prototype, "inverseOfTranslation", {
get: function () {
if (!this.viewport || !this.viewport["_renderedContentOffset"]) {
return -0;
}
var offset = this.viewport["_renderedContentOffset"];
return -offset;
},
enumerable: false,
configurable: true
});
DynamicMatTableComponent.prototype.headerClass = function (column) {
return column === null || column === void 0 ? void 0 : column.classNames;
};
DynamicMatTableComponent.prototype.rowStyle = function (row) {
var _a;
var style = ((_a = row === null || row === void 0 ? void 0 : row.option) === null || _a === void 0 ? void 0 : _a.style) || {};
if (this.setting.alternativeRowStyle && row.id % 2 === 0) {
// style is high priority
style = Object.assign(Object.assign({}, this.setting.alternativeRowStyle), style);
}
if (this.setting.rowStyle) {
style = Object.assign(Object.assign({}, this.setting.rowStyle), style);
}
return style;
};
DynamicMatTableComponent.prototype.cellClass = function (option, column) {
var className = null;
if (option && column.name) {
className = option[column.name] ? option[column.name].style : null;
}
if (className === null) {
return column.cellClass;
}
else {
return Object.assign(Object.assign({}, className), column.cellClass);
}
};
DynamicMatTableComponent.prototype.cellStyle = function (option, column) {
var style = null;
if (option && column.name) {
style = option[column.name] ? option[column.name].style : null;
}
/* consider to column width resize */
if (style === null) {
return Object.assign(Object.assign({}, column.cellStyle), column.style);
}
else {
return Object.assign(Object.assign(Object.assign({}, style), column.cellStyle), column === null || column === void 0 ? void 0 : column.style);
}
};
DynamicMatTableComponent.prototype.cellIcon = function (option, cellName) {
if (option && cellName) {
return option[cellName] ? option[cellName].icon : null;
}
else {
return null;
}
};
DynamicMatTableComponent.prototype.filter_onChanged = function (column, filter) {
var _this = this;
this.pending = true;
this.tvsDataSource.setFilter(column.name, filter).subscribe(function () {
_this.clearSelection();
_this.pending = false;
});
};
DynamicMatTableComponent.prototype.onContextMenu = function (event, column, row) {
var _a, _b;
if (((_a = this.currentContextMenuSender) === null || _a === void 0 ? void 0 : _a.time) &&
new Date().getTime() - this.currentContextMenuSender.time < 500) {
return;
}
this.contextMenu.closeMenu();
if (((_b = this.contextMenuItems) === null || _b === void 0 ? void 0 : _b.length) === 0) {
return;
}
event.preventDefault();
this.contextMenuPosition.x = event.clientX + "px";
this.contextMenuPosition.y = event.clientY + "px";
this.currentContextMenuSender = {
column: column,
row: row,
time: new Date().getTime(),
};
this.contextMenu.menuData = this.currentContextMenuSender;
this.contextMenu.menu.focusFirstItem("mouse");
this.onRowEvent.emit({
event: "BeforeContextMenuOpen",
sender: { row: row, column: column, contextMenu: this.contextMenuItems },
});
this.contextMenu.openMenu();
};
DynamicMatTableComponent.prototype.onContextMenuItemClick = function (data) {
this.contextMenu.menuData.item = data;
this.onRowEvent.emit({
event: "ContextMenuClick",
sender: this.contextMenu.menuData,
});
};
DynamicMatTableComponent.prototype.tableMenuActionChange = function (e) {
var _this = this;
var _a;
if (e.type === "TableSetting") {
this.settingChange.emit({ type: 'apply', setting: this.tableSetting });
this.refreshColumn(this.tableSetting.columnSetting);
}
else if (e.type === "DefaultSetting") {
(this.setting.settingList || []).forEach(function (setting) {
if (setting.settingName === e.data) {
setting.isDefaultSetting = true;
}
else {
setting.isDefaultSetting = false;
}
});
this.settingChange.emit({ type: 'default', setting: this.tableSetting });
}
else if (e.type === "SaveSetting") {
var newSetting = Object.assign({}, this.setting);
delete newSetting.settingList;
newSetting.settingName = e.data;
var settingIndex = (this.setting.settingList || []).findIndex(function (f) { return f.settingName === e.data; });
if (settingIndex === -1) {
this.setting.settingList.push(JSON.parse(JSON.stringify(newSetting)));
this.settingChange.emit({ type: 'create', setting: this.tableSetting });
}
else {
this.setting.settingList[settingIndex] = JSON.parse(JSON.stringify(newSetting));
this.settingChange.emit({ type: 'save', setting: this.tableSetting });
}
}
else if (e.type === "DeleteSetting") {
this.setting.settingList = this.setting.settingList.filter(function (s) { return s.settingName !== e.data.settingName; });
this.setting.columnSetting.filter(function (f) { return f.display === 'hidden'; }).forEach(function (f) { return f.display = 'visible'; });
this.refreshColumn(this.setting.columnSetting);
this.settingChange.emit({ type: 'delete', setting: this.tableSetting });
}
else if (e.type === "SelectSetting") {
if (e.data != null) {
var setting_1 = null;
this.setting.settingList.forEach(function (s) {
if (s.settingName === e.data) {
s.isCurrentSetting = true;
setting_1 = Object.assign({}, _this.setting.settingList.find(function (s) { return s.settingName === e.data; }));
}
else {
s.isCurrentSetting = false;
}
});
setting_1.settingList = this.setting.settingList;
delete setting_1.isCurrentSetting;
delete setting_1.isDefaultSetting;
if (this.pagingMode !== 'none' && this.pagination.pageSize != (setting_1 === null || setting_1 === void 0 ? void 0 : setting_1.pageSize)) {
this.pagination.pageSize =
(setting_1 === null || setting_1 === void 0 ? void 0 : setting_1.pageSize) || this.pagination.pageSize;
this.paginationChange.emit(this.pagination);
}
/* Dynamic Cell must update when setting change */
(_a = setting_1.columnSetting) === null || _a === void 0 ? void 0 : _a.forEach(function (column) {
var originalColumn = _this.columns.find(function (c) { return c.name === column.name; });
column = Object.assign(Object.assign({}, originalColumn), column);
});
this.tableSetting = setting_1;
this.refreshColumn(this.setting.columnSetting);
this.settingChange.emit({ type: 'select', setting: this.tableSetting });
}
else {
var columns_1 = [];
this.columns.forEach(function (c) {
columns_1.push(Object.assign({}, c));
});
this.refreshColumn(columns_1);
this.refreshUI();
}
}
else if (e.type === "FullScreenMode") {
toggleFullscreen(this.tbl.elementRef);
}
else if (e.type === "Download") {
this.onTableEvent.emit({
event: 'ExportData',
sender: { type: e.data, columns: this.columns, data: this.tvsDataSource.filteredData, dataSelection: this.rowSelectionModel }
});
// if (e.data === "CSV")
// {
// this.tableService.exportToCsv<T>(
// this.columns,
// this.tvsDataSource.filteredData,
// this.rowSelectionModel
// );
// } else if (e.data === "JSON")
// {
// this.tableService.exportToJson(this.tvsDataSource.filteredData);
// }
}
else if (e.type === "FilterClear") {
this.tvsDataSource.clearFilter();
this.headerFilterList.forEach(function (hf) { return hf.clearColumn_OnClick(); });
}
else if (e.type === "Print") {
this.onTableEvent.emit({
event: 'ExportData',
sender: { type: 'Print', columns: this.columns, data: this.tvsDataSource.filteredData, dataSelection: this.rowSelectionModel }
});
// this.printConfig.title = this.printConfig.title || this.tableName;
// this.printConfig.direction = this.tableSetting.direction || "ltr";
// debugger
// this.printConfig.columns = this.tableColumns.filter(t => t.display !== 'hidden' && t.printable !== false);
// this.printConfig.displayedFields = this.printConfig.columns.map((o) => o.name);
// this.printConfig.data = this.tvsDataSource.filteredData;
// const params = this.tvsDataSource.toTranslate();
// this.printConfig.tablePrintParameters = [];
// params.forEach((item) =>
// {
// this.printConfig.tablePrintParameters.push(item);
// });
// this.dialog.open(PrintTableDialogComponent, {
// width: "90vw",
// data: this.printConfig,
// });
}
};
DynamicMatTableComponent.prototype.rowMenuActionChange = function (contextMenuItem, row) {
this.onRowEvent.emit({
event: "RowActionMenu",
sender: { row: row, action: contextMenuItem },
});
// this.rowActionMenuChange.emit({actionItem: contextMenuItem, rowItem: row });
};
DynamicMatTableComponent.prototype.pagination_onChange = function (e) {
if (this.pagingMode !== "none") {
this.pending = true;
this.tvsDataSource.refreshFilterPredicate();
this.pagination.length = e.length;
this.pagination.pageIndex = e.pageIndex;
this.pagination.pageSize = e.pageSize;
this.setting.pageSize =
e.pageSize; /* Save Page Size when need in setting config */
this.paginationChange.emit(this.pagination);
}
};
DynamicMatTableComponent.prototype.autoHeight = function () {
var minHeight = this.headerHeight +
(this.rowHeight + 1) * this.dataSource.value.length +
this.footerHeight * 0;
return minHeight.toString();
};
DynamicMatTableComponent.prototype.reload_onClick = function () {
this.onTableEvent.emit({ sender: null, event: "ReloadData" });
};
/////////////////////////////////////////////////////////////////
DynamicMatTableComponent.prototype.onResizeColumn = function (event, index, type) {
this.resizeColumn.resizeHandler = type;
this.resizeColumn.startX = event.pageX;
if (this.resizeColumn.resizeHandler === "right") {
this.resizeColumn.startWidth = event.target.parentElement.clientWidth;
this.resizeColumn.columnIndex = index;
}
else {
if (event.target.parentElement.previousElementSibling === null) {
/* for first column not resize */
return;
}
else {
this.resizeColumn.startWidth = event.target.parentElement.previousElementSibling.clientWidth;
this.resizeColumn.columnIndex = index;
}
}
event.preventDefault();
this.mouseMove(index);
};
DynamicMatTableComponent.prototype.mouseMove = function (index) {
var _this = this;
this.resizableMousemove = this.renderer.listen("document", "mousemove", function (event) {
if (_this.resizeColumn.resizeHandler !== null && event.buttons) {
var rtl = _this.direction === "rtl" ? -1 : 1;
var width = 0;
if (_this.resizeColumn.resizeHandler === "right") {
var dx = event.pageX - _this.resizeColumn.startX;
width = _this.resizeColumn.startWidth + rtl * dx;
}
else {
var dx = _this.resizeColumn.startX - event.pageX;
width = _this.resizeColumn.startWidth - rtl * dx;
}
if (_this.resizeColumn.columnIndex === index &&
width > _this.minWidth) {
// this.resizeColumn.columnIndex = index;
_this.resizeColumn.widthUpdate.next({
e: _this.resizeColumn,
w: width,
});
}
}
});
this.resizableMouseup = this.renderer.listen("document", "mouseup", function (event) {
if (_this.resizeColumn.resizeHandler !== null) {
_this.resizeColumn.resizeHandler = null;
_this.resizeColumn.columnIndex = -1;
/* fix issue sticky column */
_this.table.updateStickyColumnStyles();
/* Remove Event Listen */
_this.resizableMousemove();
}
});
};
DynamicMatTableComponent.prototype.expandRow = function (rowIndex, mode) {
if (mode === void 0) { mode = true; }
if (rowIndex === null || rowIndex === undefined) {
throw "Row index is not defined.";
}
if (this.expandedElement === this.tvsDataSource.allData[rowIndex]) {
this.expandedElement.option.expand = mode;
this.expandedElement =
this.expandedElement === this.tvsDataSource.allData[rowIndex]
? null
: this.tvsDataSource.allData[rowIndex];
}
else {
if (this.expandedElement &&
this.expandedElement !== this.tvsDataSource.allData[rowIndex]) {
this.expandedElement.option.expand = false;
}
this.expandedElement = null;
if (mode === true) {
this.expandedElement =
this.expandedElement === this.tvsDataSource.allData[rowIndex]
? null
: this.tvsDataSource.allData[rowIndex];
if (this.expandedElement.option === undefined ||
this.expandedElement.option === null) {
this.expandedElement.option = { expand: false };
}
this.expandedElement.option.expand = true;
}
}
};
DynamicMatTableComponent.prototype.onRowSelection = function (e, row, column) {
if (this.rowSelectionMode &&
this.rowSelectionMode !== "none" &&
column.rowSelectable !== false) {
this.onRowSelectionChange(e, row);
}
};
DynamicMatTableComponent.prototype.onCellClick = function (e, row, column) {
if (column.cellTooltipEnable === true) {
this.closeTooltip(); /* Fixed BUG: Open Overlay when redirect to other route */
}
this.onRowSelection(e, row, column);
if (column.clickable !== false &&
(column.clickType === null || column.clickType === "cell")) {
this.onRowEvent.emit({
event: "CellClick",
sender: { row: row, column: column },
});
}
};
DynamicMatTableComponent.prototype.onLabelClick = function (e, row, column) {
if (column.clickable !== false && column.clickType === "label") {
this.onRowEvent.emit({
event: "LabelClick",
sender: { row: row, column: column, e: e },
});
}
};
DynamicMatTableComponent.prototype.onRowDblClick = function (e, row) {
this.onRowEvent.emit({ event: "DoubleClick", sender: { row: row, e: e } });
};
DynamicMatTableComponent.prototype.onRowClick = function (e, row) {
this.onRowEvent.emit({ event: "RowClick", sender: { row: row, e: e } });
};
/************************************ Drag & Drop Column *******************************************/
DynamicMatTableComponent.prototype.dragStarted = function (event) {
// this.dragDropData.dragColumnIndex = event.source.;
};
DynamicMatTableComponent.prototype.dropListDropped = function (event) {
if (event) {
this.dragDropData.dropColumnIndex = event.currentIndex;
this.moveColumn(event.previousIndex, event.currentIndex);
}
};
DynamicMatTableComponent.prototype.drop = function (event) {
dragDrop.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
// updates moved data and table, but not dynamic if more dropzones
// this.dataSource.data = clonedeep(this.dataSource.data);
};
/************************************ *******************************************/
DynamicMatTableComponent.prototype.copyProperty = function (from, to) {
var keys = Object.keys(from);
keys.forEach(function (key) {
if (from[key] !== undefined && from[key] === null) {
to[key] = Array.isArray(from[key])
? Object.assign([], from[key])
: Object.assign({}, from[key]);
}
});
};
return DynamicMatTableComponent;
}(TableCoreDirective));
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
DynamicMatTableComponent.decorators = [
{ type: i0.Component, args: [{
selector: "dynamic-mat-table",
template: "<cdk-virtual-scroll-viewport #tbl [ngClass]=\"viewportClass\" [tvsItemSize]=\"rowHeight || 48\"\r\n [headerHeight]=\"headerHeight || 56\" [footerHeight]=\"headerHeight || 56\" [headerEnabled]=\"headerEnable || true\"\r\n [footerEnabled]=\"footerEnable || false\" [ngStyle]=\"{'background-color': backgroundColor || 'white'}\"\r\n [class.print-preview]=\"printing\">\r\n\r\n <mat-table matSort class=\"dynamic-table\" multiTemplateDataRows [cdkDropListDisabled]=\"false\" cdkDropList\r\n cdkDropListOrientation=\"horizontal\" (cdkDragStarted)=\"dragStarted($event)\"\r\n (cdkDropListDropped)=\"dropListDropped($event)\" [trackBy]=\"indexTrackFn\" [dataSource]=\"tvsDataSource\">\r\n <!-- Select Checkbox Column -->\r\n <ng-container matColumnDef=\"row-checkbox\">\r\n <!-- HEADER -->\r\n <mat-header-cell *matHeaderCellDef class=\"row-checkbox\" style=\"z-index: 2;\">\r\n <mat-checkbox style=\"z-index: 10;\" (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"rowSelectionModel.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"rowSelectionModel.hasValue() && !isAllSelected()\" *ngIf=\"rowSelectionMode === 'multi'\">\r\n </mat-checkbox>\r\n <!-- <mat-icon *ngIf=\"rowSelectionMode === 'single'\">indeterminate_check_box</mat-icon> -->\r\n </mat-header-cell>\r\n <!-- DATA -->\r\n <mat-cell *matCellDef=\"let row\" class=\"row-checkbox\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"onRowSelectionChange($event, row)\"\r\n [checked]=\"rowSelectionModel?.isSelected(row)\">\r\n </mat-checkbox>\r\n </mat-cell>\r\n <!-- FOOTER -->\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Table Columns -->\r\n <ng-container *ngFor=\"let column of columns; let i = index; trackBy: trackColumn\" [matColumnDef]=\"column.name\"\r\n [sticky]=\"column.sticky === 'start' ? true : false\" [stickyEnd]=\"column.sticky === 'end' ? true : false\">\r\n <!-- HEADER -->\r\n <mat-header-cell *matHeaderCellDef cdkDrag [cdkDragDisabled]=\"column?.draggable === false\"\r\n cdkDragBoundary=\"mat-header-row\" cdkDropListLockAxis=\"x\" [ngClass]=\"headerClass(column)\"\r\n [cdkDragData]=\"{name: column.name, columIndex: i}\" [ngStyle]=\"column.style\"\r\n [class.active-resize]=\"resizeColumn.columnIndex == i\" cdkDragBoundary=\"mat-header-row\">\r\n <!-- class=\"left-resize-handler\" -->\r\n <div class=\"resize-handler\"\r\n [ngClass]=\"{'left-resize-handler': tableSetting.direction === 'ltr', 'right-resize-handler': tableSetting.direction === 'rtl'}\"\r\n (mousedown)=\"onResizeColumn($event, i, 'left')\"></div>\r\n <header-filter [field]=\"column\" (filterChanged)=\"filter_onChanged(column, $event)\"\r\n [filters]=\"tvsDataSource.getFilter(column.name)\">\r\n <mat-icon class=\"column-icon\" [ngStyle]=\"{ 'color': column?.iconColor }\">{{column?.icon}}</mat-icon>\r\n <mat-icon *ngIf=\"column?.draggable != false\" class=\"drag-indicator\" cdkDragHandle>drag_indicator</mat-icon>\r\n <div mat-sort-header [matTooltip]=\"column.header\" matTooltipClass=\"cell-tooltip\"\r\n [disabled]=\"column.sort === 'none'\" class=\"header-caption\">{{ column.header }}</div>\r\n </header-filter>\r\n <!-- class=\"right-resize-handler\" -->\r\n <div class=\"resize-handler\"\r\n [ngClass]=\"{'right-resize-handler': tableSetting.direction === 'ltr', 'left-resize-handler': tableSetting.direction === 'rtl'}\"\r\n (mousedown)=\"onResizeColumn($event, i, 'right')\"></div>\r\n </mat-header-cell>\r\n <!-- DATA -->\r\n <mat-cell *matCellDef=\"let row;\" #cell (mouseenter)=\"tooltip_onChanged(column, row, cell,true)\"\r\n (mouseleave)=\"tooltip_onChanged(column, row, cell,false)\" [class]=\"row[column.cellClass]\"\r\n (click)=\"onCellClick($event, row, column)\" [ngClass]=\"cellClass(row?.option, column)\"\r\n [ngStyle]=\"cellStyle(row?.option, column)\" (contextmenu)=\"onContextMenu($event, column, row)\">\r\n <label *ngIf=\"!column.dynamicCellComponent\" (click)=\"onLabelClick($event, row, column)\"\r\n [class.rtl-cell]=\"direction === 'rtl'\" [class.ltr-cell]=\"direction === 'ltr'\" [ngStyle]=\"ellipsis(column)\"\r\n class=\"label-cell\">{{row[column.name]}}</label>\r\n <ng-container *ngIf=\"column.dynamicCellComponent\" dynamicCell [component]=\"column.dynamicCellComponent\"\r\n [column]=\"column\" [row]=\"row\" [onRowEvent]=\"onRowEvent\">\r\n </ng-container>\r\n </mat-cell>\r\n <!-- FOOTER -->\r\n <mat-footer-cell *matFooterCellDef [ngStyle]=\"column.style\">\r\n <div *ngFor=\"let footer of column?.footer\" class=\"footer-column\">\r\n <div [style.height.px]=\"footerHeight\" class=\"footer-row\">\r\n <span> {{footer.aggregateText}}</span>\r\n </div>\r\n </div>\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"progress\">\r\n <mat-header-cell *matHeaderCellDef [attr.colspan]=\"displayedColumns.length\">\r\n <mat-progress-bar mode=\"indeterminate\" [class.show]=\"pending\">\r\n </mat-progress-bar>\r\n </mat-header-cell>\r\n </ng-container>\r\n\r\n <!-- Expanded Content Column - The detail row is made up of Dynamic Cell -->\r\n <ng-container *ngIf=\"expandColumn.length > 0\" matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"displayedColumns.length\" class=\"expanded-detail-cell\">\r\n <div class=\"expanded-detail\" [@detailExpand]=\"row == expandedElement ? 'expanded' : 'collapsed'\">\r\n <ng-container dynamicCell [component]=\"expandComponent\" [row]=\"row\" [onRowEvent]=\"onRowEvent\">\r\n </ng-container>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Table Menu[ Sort, Visible, Export] -->\r\n <ng-container matColumnDef=\"table-menu\" [stickyEnd]=\"true\" *ngIf=\"setting?.visibleTableMenu !== false\">\r\n <mat-header-cell *matHeaderCellDef class=\"table-menu\">\r\n <table-menu [(tableSetting)]=\"tableSetting\" (menuActionChange)=\"tableMenuActionChange($event)\"></table-menu>\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let row\" class=\"table-menu\">\r\n <row-menu *ngIf=\"rowContextMenuItems && rowContextMenuItems.length > 0\" [rowActionMenu]=\"row?.actionMenu\"\r\n [actionMenus]=\"rowContextMenuItems\" [tableSetting]=\"tableSetting\"\r\n (rowActionChange)=\"rowMenuActionChange($event, row)\"></row-menu>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <!-- Row Table[Header, Data, Footer] -->\r\n <mat-row *matRowDef=\"let row; columns: displayedColumns;\" (dblclick)=\"onRowDblClick($event, row)\"\r\n (click)=\"onRowClick($event, row)\" [style.height.px]=\"rowHeight\" class=\"table-row\" [ngClass]=\"row?.option?.class\"\r\n [ngStyle]=\"rowStyle(row)\" [class.expanded-row]=\"expandedElement === row\"\r\n [class.row-selection]=\"rowSelectionModel ? rowSelectionModel.isSelected(row) : false\"\r\n (contextmenu)=\"onContextMenu($event, null, row)\">\r\n </mat-row>\r\n\r\n <ng-container *ngIf=\"expandColumn.length > 0\">\r\n <tr mat-row *matRowDef=\"let expandRow; columns: expandColumn\" class=\"detail-row\"></tr>\r\n </ng-container>\r\n\r\n <mat-header-row class=\"header\" [@tableAnimation] *matHeaderRowDef=\"displayedColumns; sticky: sticky\"\r\n [style.top.px]=\"inverseOfTranslation\"></mat-header-row>\r\n <ng-container *ngIf=\"displayedFooter.length > 0\">\r\n <mat-footer-row class=\"footer\" [@tableAnimation] *matFooterRowDef=\"displayedFooter;\"></mat-footer-row>\r\n </ng-container>\r\n <mat-header-row class=\"progress\" *matHeaderRowDef=\"progressColumn; sticky: sticky\"\r\n [style.top.px]=\"inverseOfTranslation + headerHeight - 5\"></mat-header-row>\r\n </mat-table>\r\n</cdk-virtual-scroll-viewport>\r\n<pagination\r\n *ngIf=\"pagingMode !== 'none'\"\r\n [dir]=\"'ltr'\"\r\n [pageIndex]=\"pagination?.pageIndex\"\r\n [pageSize]=\"pagination?.pageSize\"\r\n [pageSizeOptions]=\"pagination?.pageSizeOptions\"\r\n [length]=\"pagination?.length\"\r\n (page)=\"pagination_onChange($event)\">\r\n</pagination>\r\n<!-- <ng-content></ng-content> -->\r\n<ng-container *ngIf=\"showNoData && init === true\">\r\n <div class=\"no-records\" *ngIf=\"tvsDataSource.data.length == 0\">\r\n {{ languagePack?.tableLabels?.NoData }}\r\n <br>\r\n <button mat-icon-button type=\"button\" *ngIf=\"showReload === true\" color=\"primary\" (click)=\"reload_onClick()\">\r\n <mat-icon>autorenew</mat-icon>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- Context Menu -->\r\n<div style=\"visibility: hidden; position: fixed\" [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\" [matMenuTriggerFor]=\"contextMenu\">\r\n</div>\r\n<mat-menu #contextMenu=\"matMenu\">\r\n <ng-template matMenuContent let-item=\"item\">\r\n <ng-container *ngFor=\"let menu of contextMenuItems\">\r\n <button mat-button type=\"button\" [class.ltr-menu]=\"tableSetting.direction === 'rtl'\" [color]=\"menu.color\"\r\n class=\"button-menu\" [disabled]=\"menu.disabled\" (click)=\"onContextMenuItemClick(menu)\">\r\n <mat-icon>{{menu.icon}}</mat-icon>\r\n <span [class.text-align-right]=\"tableSetting.direction === 'rtl'\" class=\"text-align-left\">{{menu.text}}</span>\r\n </button>\r\n <mat-divider *ngIf=\"menu.divider === true\"></mat-divider>\r\n </ng-container>\r\n </ng-template>\r\n</mat-menu>\r\n",
animations: [tableAnimation, expandAnimation],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
styles: ["@media print{.print-preview{background-color:#fff;position:fixed;width:100%;height:auto;z-index:99999999;margin:0;padding:0;top:0;left:0;overflow:visible;display:block}}.disable-backdrop-click .cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{pointer-events:none}:host{display:flex;flex-direction:column;table-layout:fixed;min-height:200px;position:relative;overflow:auto;transition:.3s cubic-bezier(.46,-.72,.46,1.54);background-color:#f3f3f3;border:2px #009688}::ng-deep .cdk-virtual-scroll-content-wrapper{left:auto!important}::ng-deep .mat-menu-panel{min-height:48px}.label-cell{width:100%}mat-cell:first-of-type,mat-header-cell:first-of-type:not(.row-checkbox),mat-footer-cell:first-of-type{padding-left:0!important}.rtl-cell{padding-right:20px}.ltr-cell{padding-left:20px}.viewport{height:calc(100% - 0px)}.viewport-with-pagination{height:calc(100% - 48px)}.table-paginator{position:sticky;bottom:0;display:flex;flex-wrap:wrap;max-height:48px;align-items:center;overflow:hidden;direction:ltr}mat-footer-row,mat-row{min-height:auto!important}mat-row,tr.mat-header-row,mat-footer-row{display:flex;border-width:0;border-bottom-width:1px;border-bottom-color:#d2d2d2;border-style:solid;align-items:center;box-sizing:border-box}mat-cell,mat-footer-cell,mat-header-cell{align-self:stretch;color:inherit;background-color:inherit}.mat-table .row-selection{background-color:#f7f5f5}.mat-table .mat-row:hover{background-color:#fafafa}.mat-table mat-cell{box-sizing:border-box}.mat-header-row.progress{border:none;max-height:4px;min-height:4px;height:0;margin-top:-4px;background-color:transparent!important;border-top:transparent!important;background:transparent!important}.mat-header-row.progress .mat-header-cell{border:0;padding:0}.mat-header-row.progress mat-progress-bar{transition:height .3s,opacity .25s linear}.mat-header-row.progress mat-progress-bar:not(.show){height:0;opacity:0}.no-records{display:flex;align-items:center;top:50%;left:50%;margin:-42px 0 0 -25px;line-height:42px;position:absolute;z-index:1;pointer-events:none}.no-records button{pointer-events:initial}::ng-deep .dmf{min-width:100%}::ng-deep dynamic-mat-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .mat-table mat-row .mat-cell mat-form-field{max-width:100%}::ng-deep dynamic-mat-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .mat-table mat-row .mat-cell mat-form-field .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep dynamic-mat-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .mat-table mat-row .mat-cell mat-form-field ::ng-deep .mat-form-field-underline{bottom:0!important}mat-header-cell:hover .left-resize-handler{height:100%;transition:height .4s ease-out}mat-header-cell:hover .right-resize-handler{height:100%;transition:height .4s ease-out}.resize-handler{display:inline-block;min-width:1px;height:0;position:sticky;cursor:col-resize;border-width:0;z-index:10}.left-resize-handler{left:0;padding-right:10px;margin-right:-10px;border-left:solid 2px #8b8b8b}.right-resize-handler{right:0px;padding-left:10px;margin-left:-10px;border-right:solid 2px #8b8b8b}.active-resize{background-color:#f5f5f566}.ltr-menu span{float:left}.button-menu{width:100%;line-height:48px}.button-menu::ng-deep .mat-button-wrapper{display:flex}.button-menu::ng-deep .mat-button-wrapper span{display:inline-block;width:100%;text-align:left}.button-menu::ng-deep .mat-button-wrapper mat-icon{line-height:48px;height:48px;margin:0 5px}mat-button-wrapper .button-menu{display:inline-block!important}.text-align-left{text-align:left!important}.text-align-right{text-align:right!important}.mat-menu-panel{min-height:unset!important}.mat-sort-header-arrow{margin:0 6px!important}cdk-virtual-scroll-viewport{min-height:100px;height:inherit;overflow:auto}.header-caption{font-weight:bolder;font-size:14px;width:100%}.header{-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#fff}.footer{-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#fff}.row-checkbox{padding-left:0!important;padding-right:0!important;max-width:46px;min-width:46px}.row-checkbox mat-checkbox{padding:10px}.row-checkbox mat-icon{padding:11px!important}.table-menu{max-width:42px;min-width:0;min-width:initial;padding:0!important;background-color:inherit}:host .mat-header-row>.mat-header-cell:hover .column-icon{opacity:0;transform:translateY(5px);transition:all .2s}.drag-indicator{position:absolute;color:#0000004d;display:flex;opacity:0;transform:translateY(-5px);cursor:pointer;transition-duration:.4s;transition-property:opacity,transform;cursor:move}:host .mat-header-row>.mat-header-cell:hover .drag-indicator{opacity:1;pointer-events:fill;transform:translateY(0)}.drag-indicator:hover{color:#bfc0c0!important}.cdk-drag-preview{color:#000;min-height:55px;border:solid 1px #d4d4d4;background-color:#f5f5f5;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{border:dotted 1px #9c9c9c;background-color:#d3d3d3;content:none}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging{transition:transform .25s cubic-bezier(0,0,.2,1)}.detail-row{height:0px;display:inline!important;width:100%}.table-row:not(.expanded-row):hover{background:whitesmoke}.table-row:not(.expanded-row):active{background:#efefef}.table-row mat-cell{border-bottom-width:0}.expanded-detail{overflow:hidden;display:flex;background-color:#fafafa}.expanded-detail-cell{display:block;border-width:0;padding:0!important;width:100%;z-index:2}::ng-deep .cell-tooltip{padding:8px;font-size:12px;min-width:100px;text-align:center;margin-right:-20px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted black}.tooltip .tooltiptext{visibility:hidden;min-width:120px;background-color:#e91e63;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1;left:0;top:43px;margin-left:-86%}.tooltip:hover .tooltiptext{visibility:visible;white-space:pre}::ng-deep .mat-footer-cell{flex-direction:column!important}.footer-column{display:flex;flex-direction:column}.footer-column .footer-row{display:flex;flex-direction:row}.footer-column .footer-row span{display:inherit;align-items:center}\n"]
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
DynamicMatTableComponent.ctorParameters = function () { return [
{ type: dialog.MatDialog },
{ type: i0.Renderer2 },
{ type: TableIntl },
{ type: TableService },
{ type: i0.ChangeDetectorRef },
{ type: overlay.Overlay },
{ type: overlay.OverlayContainer },
{ type: overlay.OverlayPositionBuilder },
{ type: TableSetting }
]; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
DynamicMatTableComponent.propDecorators = {
tbl: [{ type: i0.ViewChild, args: ["tbl", { static: true },] }],
setting: [{ type: i0.Input }],
height: [{ type: i0.HostBinding, args: ["style.height.px",] }],
tooltipRef: [{ type: i0.ViewChild, args: ["tooltip",] }],
contextMenu: [{ type: i0.ViewChild, args: [menu.MatMenuTrigger,] }],
printRef: [{ type: i0.ViewChild, args: ["printRef", { static: true },] }],
printContentRef: [{ type: i0.ViewChild, args: ["printContentRef", { static: true },] }],
headerFilterList: [{ type: i0.ContentChildren, args: [HeaderFilterComponent,] }]
};
var DynamicCellDirective = /** @class */ (function () {
function DynamicCellDirective(compiler, cfr, vc, parent) {
this.compiler = compiler;
this.cfr = cfr;
this.vc = vc;
this.parent = parent;
this.componentRef = null;
}
DynamicCellDirective.prototype.ngOnChanges = function (changes) {
if (this.componentRef === null || this.componentRef === undefined) {
this.initComponent();
}
// pass input parameters
if (changes.column && changes.column.currentValue) {
this.componentRef.instance.column = this.column;
}
if (changes.row && changes.row.currentValue) {
this.componentRef.instance.row = this.row;
}
if (changes.onRowEvent && changes.onRowEvent.currentValue) {
this.componentRef.instance.onRowEvent = this.onRowEvent;
}
};
DynamicCellDirective.prototype.ngOnInit = function () { };
DynamicCellDirective.prototype.ngOnDestroy = function () {
if (this.componentRef) {
this.componentRef.destroy();
}
};
DynamicCellDirective.prototype.initComponent = function () {
try {
var componentFactory = this.cfr.resolveComponentFactory(this.component);
this.componentRef = this.vc.createComponent(componentFactory);
this.updateInput();
}
catch (e) {
console.warn(e);
}
};
DynamicCellDirective.prototype.updateInput = function () {
if (this.parent) {
this.componentRef.instance.parent = this.parent;
}
if (this.column) {
this.componentRef.instance.column = this.column;
}
if (this.row) {
this.componentRef.instance.row = this.row;
}
if (this.onRowEvent) {
this.componentRef.instance.onRowEvent = this.onRowEvent;
}
};
return DynamicCellDirective;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
DynamicCellDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[dynamicCell]'
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
DynamicCellDirective.ctorParameters = function () { return [
{ type: i0.Compiler },
{ type: i0.ComponentFactoryResolver },
{ type: i0.ViewContainerRef },
{ type: DynamicMatTableComponent }
]; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
DynamicCellDirective.propDecorators = {
component: [{ type: i0.Input }],
column: [{ type: i0.Input }],
row: [{ type: i0.Input }],
onRowEvent: [{ type: i0.Input }]
};
var RowMenuComponent = /** @class */ (function () {
function RowMenuComponent() {
this.rowActionChange = new i0.EventEmitter();
this.actionMenus = [];
this.visibleActionMenus = [];
}
RowMenuComponent.prototype.menuOnClick = function (e) {
var _this = this;
e.stopPropagation();
e.preventDefault();
this.visibleActionMenus = [];
this.actionMenus.forEach(function (menu) {
var am = isNullorUndefined(_this.rowActionMenu) || isNullorUndefined(_this.rowActionMenu[menu.name]) ? menu : _this.rowActionMenu[menu.name];
if (isNullorUndefined(am.visible) || am.visible) {
_this.visibleActionMenus.push({
name: menu.name,
text: am.text || menu.text,
disabled: am.disabled || menu.disabled,
icon: am.icon || menu.icon,
color: am.color || menu.color
});
}
});
};
RowMenuComponent.prototype.menuButton_OnClick = function (menu) {
var _this = this;
setTimeout(function () {
_this.rowActionChange.emit(menu);
});
};
return RowMenuComponent;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
RowMenuComponent.decorators = [
{ type: i0.Component, args: [{
// tslint:disable-next-line: component-selector
selector: 'row-menu',
template: "<button class=\"clear\" type=\"button\" mat-icon-button #menuTrigger=\"matMenuTrigger\" (click)=\"menuOnClick($event)\"\r\n [matMenuTriggerFor]=\"menu\" [dir]=\"tableSetting.direction === 'rtl' ? 'ltr' : 'rtl'\">\r\n <mat-icon>more_horiz</mat-icon>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" [overlapTrigger]=\"false\" [dir]=\"tableSetting.direction === 'rtl' ? 'ltr' : 'rtl'\">\r\n <ng-template matMenuContent>\r\n <button mat-button type=\"button\" [class.ltr-menu]=\"tableSetting.direction === 'rtl'\" [color]=\"menu.color\"\r\n class=\"button-menu\" *ngFor=\"let menu of visibleActionMenus\" [disabled]=\"menu.disabled\"\r\n (click)=\"menuButton_OnClick(menu)\">\r\n <mat-icon>{{menu.icon}}</mat-icon>\r\n <span [class.text-align-right]=\"tableSetting.direction === 'rtl'\" class=\"text-align-left\">{{menu.text}}</span>\r\n </button>\r\n </ng-template>\r\n</mat-menu>\r\n",
changeDetection: i0.ChangeDetectionStrategy.OnPush,
styles: ["@media print{.print-preview{background-color:#fff;position:fixed;width:100%;height:auto;z-index:99999999;margin:0;padding:0;top:0;left:0;overflow:visible;display:block}}.disable-backdrop-click .cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{pointer-events:none}.ltr-menu span{float:left}.button-menu{width:100%;line-height:48px}.button-menu::ng-deep .mat-button-wrapper{display:flex}.button-menu::ng-deep .mat-button-wrapper span{display:inline-block;width:100%;text-align:left}.button-menu::ng-deep .mat-button-wrapper mat-icon{line-height:48px;height:48px;margin:0 5px}mat-button-wrapper .button-menu{display:inline-block!important}.text-align-left{text-align:left!important}.text-align-right{text-align:right!important}.mat-menu-panel{min-height:unset!important}:host{display:flex;align-items:center;justify-content:space-between}\n"]
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
RowMenuComponent.ctorParameters = function () { return []; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
RowMenuComponent.propDecorators = {
rowActionChange: [{ type: i0.Output }],
actionMenus: [{ type: i0.Input }],
tableSetting: [{ type: i0.Input }],
rowActionMenu: [{ type: i0.Input }]
};
var components$2 = [RowMenuComponent];
var RowMenuModule = /** @class */ (function () {
function RowMenuModule() {
}
return RowMenuModule;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
RowMenuModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [components$2],
exports: components$2,
imports: [
common.CommonModule,
forms.FormsModule,
button.MatButtonModule,
icon.MatIconModule,
menu.MatMenuModule
],
},] }
];
var TableMenuComponent = /** @class */ (function () {
function TableMenuComponent(languagePack, tableService) {
this.languagePack = languagePack;
this.tableService = tableService;
this.menuActionChange = new i0.EventEmitter();
this.tableSettingChange = new i0.EventEmitter();
this.newSettingName = '';
this.showNewSetting = false;
this.currentColumn = null;
this.reverseDirection = null;
}
Object.defineProperty(TableMenuComponent.prototype, "tableSetting", {
get: function () {
return this.currentTableSetting;
},
set: function (value) {
value.settingList =
value.settingList === undefined ? [] : value.settingList;
this.originalTableSetting = value;
this.reverseDirection = value.direction === 'rtl' ? 'ltr' : 'rtl';
this.currentTableSetting = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableMenuComponent.prototype, "isSaveDataActive", {
get: function () {
var _a;
if (!((_a = this.tableSetting) === null || _a === void 0 ? void 0 : _a.visibleActionMenu)) {
return false;
}
else {
return (this.tableSetting.visibleActionMenu.csv !== false)
|| (this.tableSetting.visibleActionMenu.json !== false)
|| (this.tableSetting.visibleActionMenu.print !== false);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(TableMenuComponent.prototype, "isFullscreen", {
get: function () {
return !!(document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement);
},
enumerable: false,
configurable: true
});
TableMenuComponent.prototype.screenMode_onClick = function () {
this.menuActionChange.emit({
type: 'FullScreenMode',
data: this.currentTableSetting,
});
};
/***** Column Setting ******/
TableMenuComponent.prototype.columnMenuDropped = function (event) {
dragDrop.moveItemInArray(this.currentTableSetting.columnSetting, event.item.data.columnIndex, event.currentIndex);
};
TableMenuComponent.prototype.toggleSelectedColumn = function (column) {
// const colFound = this.currentTableSetting.columnSetting.find(c => c === column);
column.display = column.display === 'visible' ? 'hidden' : 'visible';
};
TableMenuComponent.prototype.apply_onClick = function (e) {
e.stopPropagation();
e.preventDefault();
this.menuActionChange.emit({
type: 'TableSetting',
data: this.currentTableSetting,
});
this.tableService.saveColumnInfo(this.currentTableSetting.columnSetting);
// setTimeout(() => {
// this.menuActionChange.emit({
// type: 'TableSetting',
// data: this.currentTableSetting,
// });
// this.tableService.saveColumnInfo(this.currentTableSetting.columnSetting);
// });
};
TableMenuComponent.prototype.setting_onClick = function (i) {
this.currentColumn = i;
};
TableMenuComponent.prototype.cancel_onClick = function () {
this.currentTableSetting = deepClone(this.originalTableSetting);
};
TableMenuComponent.prototype.isVisible = function (visible) {
return isNullorUndefined(visible) ? true : visible;
};
/***** Save ********/
TableMenuComponent.prototype.saveSetting_onClick = function (e, setting) {
e.stopPropagation();
this.menuActionChange.emit({
type: 'SaveSetting',
data: setting.settingName,
});
};
TableMenuComponent.prototype.newSetting_onClick = function (e) {
var _this = this;
this.showNewSetting = true;
this.newSettingName = '';
window.requestAnimationFrame(function () {
_this.newSettingElement.nativeElement.focus();
});
e.stopPropagation();
};
TableMenuComponent.prototype.selectSetting_onClick = function (e, setting) {
e.stopPropagation();
this.menuActionChange.emit({
type: 'SelectSetting',
data: setting.settingName,
});
};
TableMenuComponent.prototype.resetDefault_onClick = function (e) {
e.stopPropagation();
this.menuActionChange.emit({
type: 'SelectSetting',
data: null,
});
};
TableMenuComponent.prototype.default_onClick = function (e, setting) {
e.stopPropagation();
this.menuActionChange.emit({
type: 'DefaultSetting',
data: setting.settingName,
});
};
TableMenuComponent.prototype.applySaveSetting_onClick = function (e) {
e.stopPropagation();
this.menuActionChange.emit({
type: 'SaveSetting',
data: this.newSettingName,
});
this.showNewSetting = false;
};
TableMenuComponent.prototype.cancelSaveSetting_onClick = function (e) {
e.stopPropagation();
this.newSettingName = '';
this.showNewSetting = false;
};
TableMenuComponent.prototype.deleteSetting_onClick = function (e, setting) {
e.stopPropagation();
this.menuActionChange.emit({ type: 'DeleteSetting', data: setting });
this.newSettingName = '';
this.showNewSetting = false;
};
/***** Filter ********/
TableMenuComponent.prototype.clearFilter_onClick = function () {
var _this = this;
setTimeout(function () {
_this.menuActionChange.emit({ type: 'FilterClear' });
});
};
/******* Save File (JSON, CSV, Print)***********/
TableMenuComponent.prototype.download_onClick = function (type) {
var _this = this;
setTimeout(function () {
_this.menuActionChange.emit({ type: 'Download', data: type });
});
};
TableMenuComponent.prototype.print_onClick = function (menu) {
var _this = this;
menu._overlayRef._host.parentElement.click();
setTimeout(function () {
_this.menuActionChange.emit({ type: 'Print', data: null });
});
};
return TableMenuComponent;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
TableMenuComponent.decorators = [
{ type: i0.Component, args: [{
// tslint:disable-next-line: component-selector
selector: 'table-menu',
template: "<button class=\"clear\" type=\"button\" mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" [dir]=\"reverseDirection\">\r\n <mat-icon class=\"main-menu\">more_vert</mat-icon>\r\n</button>\r\n\r\n<mat-menu #menu=\"matMenu\" [overlapTrigger]=\"false\" [dir]=\"reverseDirection\">\r\n <button mat-menu-item type=\"button\" *ngIf=\"tableSetting?.visibleActionMenu?.fullscreen!= false\" (click)=\"screenMode_onClick()\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <mat-icon>{{isFullscreen ? 'fullscreen_exit' : 'fullscreen'}}</mat-icon>\r\n <span>{{ languagePack.menuLabels.fullScreen }}</span>\r\n </button>\r\n <button mat-menu-item type=\"button\" color=\"primary\" [matMenuTriggerFor]=\"convertMenu\" *ngIf=\"isSaveDataActive\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <mat-icon>save</mat-icon>\r\n <span>{{ languagePack.menuLabels.saveData }}</span>\r\n </button>\r\n <button mat-menu-item type=\"button\" color=\"primary\" [matMenuTriggerFor]=\"columnMenu\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <mat-icon>view_column</mat-icon>\r\n <span>{{ languagePack.menuLabels.columnSetting }}</span>\r\n </button>\r\n\r\n <button mat-menu-item type=\"button\" *ngIf=\"currentTableSetting?.saveSettingMode === 'simple'\" (click)=\"saveSetting_onClick($event, null)\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <mat-icon>grading</mat-icon>\r\n <span>{{ languagePack.menuLabels.saveTableSetting }}</span>\r\n </button>\r\n <button mat-menu-item *ngIf=\"currentTableSetting?.saveSettingMode === 'multi'\" [matMenuTriggerFor]=\"saveTableSetting\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <mat-icon>grading</mat-icon>\r\n <span>{{ languagePack.menuLabels.saveTableSetting }}</span>\r\n </button>\r\n <button mat-menu-item type=\"button\" (click)=\"clearFilter_onClick()\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <mat-icon>clear</mat-icon>\r\n <span>{{ languagePack.menuLabels.clearFilter }}</span>\r\n </button>\r\n</mat-menu>\r\n\r\n<!-- Save Table Config Menu -->\r\n\r\n<mat-menu #saveTableSetting=\"matMenu\">\r\n <button mat-menu-item type=\"button\" (click)=\"newSetting_onClick($event)\" *ngIf=\"showNewSetting === false\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <mat-icon>tune</mat-icon>\r\n <span>{{languagePack.menuLabels.newSetting }}</span>\r\n </button>\r\n <section *ngIf=\"showNewSetting === true\" class=\"new-setting\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"input-container\">\r\n <input matInput type=\"text\" #newSetting [placeholder]=\"languagePack.menuLabels.newSetting\" [(ngModel)]=\"newSettingName\" (keydown.enter)=\"applySaveSetting_onClick($event)\">\r\n </div>\r\n <div class=\"save-table-setting\">\r\n <mat-icon (click)=\"cancelSaveSetting_onClick($event)\">close</mat-icon>\r\n <mat-icon (click)=\"applySaveSetting_onClick($event)\">done</mat-icon>\r\n </div>\r\n </section>\r\n <mat-divider></mat-divider>\r\n\r\n <button mat-menu-item type=\"button\" (click)=\"resetDefault_onClick($event)\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <mat-icon>settings_backup_restore</mat-icon>\r\n {{ languagePack.menuLabels.defaultSetting }}\r\n </button>\r\n\r\n <section *ngFor=\"let setting of tableSetting?.settingList\" class=\"setting-item\" [class.setting-item-active]=\"setting?.isCurrentSetting == true\"\r\n [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <button mat-icon-button type=\"button\" (click)=\"default_onClick($event, setting)\">\r\n <mat-icon style=\"color: #dcc48f;\">{{ (setting?.isDefaultSetting == true) ? 'star' : 'star_outline'}} </mat-icon>\r\n </button>\r\n <span (click)=\"selectSetting_onClick($event, setting)\">{{setting.settingName}}</span>\r\n <mat-icon (click)=\"saveSetting_onClick($event, setting)\">save</mat-icon>\r\n <mat-icon style=\"color: #ff4081;\" (click)=\"deleteSetting_onClick($event, setting)\">delete</mat-icon>\r\n </section>\r\n <section *ngIf=\"tableSetting?.settingList?.length === 0\" mat-menu-item (click)=\"$event.stopPropagation()\">\r\n <mat-icon style=\"color: #dcc48f;\">lightbulb</mat-icon>\r\n {{languagePack.menuLabels.noSetting}}\r\n </section>\r\n</mat-menu>\r\n\r\n<!-- Convert Sub Menu -->\r\n\r\n<mat-menu #convertMenu=\"matMenu\">\r\n <button mat-menu-item type=\"button\" *ngIf=\"tableSetting?.visibleActionMenu?.json != false\" (click)=\"download_onClick('JSON')\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <span>{{ languagePack.menuLabels.jsonFile }}</span>\r\n </button>\r\n <button mat-menu-item type=\"button\" *ngIf=\"tableSetting?.visibleActionMenu?.csv != false\" (click)=\"download_onClick('CSV')\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <span>{{ languagePack.menuLabels.csvFile }}</span>\r\n </button>\r\n <button mat-menu-item type=\"button\" *ngIf=\"tableSetting?.visibleActionMenu?.print != false\" (click)=\"print_onClick(menuTrigger)\" [class.ltr-menu]=\"currentTableSetting.direction !== 'rtl'\">\r\n <span>{{ languagePack.menuLabels.printTable }}</span>\r\n </button>\r\n</mat-menu>\r\n\r\n<!-- Column Setting Sub Menu -->\r\n\r\n<mat-menu #columnMenu=\"matMenu\">\r\n <ng-container *ngIf=\"currentTableSetting?.columnSetting?.length > 0; else noColumns\">\r\n <div class=\"va-mat-table-dragable-container\" cdkDropList dkDropListLockAxis=\"y\" cdkDropListOrientation=\"vertical\" dir=\"ltr\">\r\n <div *ngFor=\"let column of currentTableSetting?.columnSetting; let i = index\" (click)=\"$event.stopPropagation(); $event.preventDefault()\" class=\"dragable-row\" cdkDrag\r\n [cdkDragData]=\"{ columnIndex: i, columnTitle: column.header }\" (cdkDragDropped)=\"columnMenuDropped($event)\">\r\n <mat-icon cdkDragHandle>drag_indicator</mat-icon>\r\n <mat-checkbox class=\"column-config\" [disabled]=\"column?.display === 'prevent-hidden'\" [checked]=\"column?.display === 'visible' || column?.display === 'prevent-hidden'\"\r\n (click)=\"$event.stopPropagation()\" (change)=\"toggleSelectedColumn(column)\">\r\n {{ column.header }}\r\n </mat-checkbox>\r\n <mat-icon class=\"column-setting-button\" (click)=\"setting_onClick(i)\" #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"columnSettingMenu\">settings</mat-icon>\r\n <div class=\"va-mat-table-drag-preview\" *cdkDragPreview>\r\n <mat-icon>drag_indicator</mat-icon>\r\n <mat-checkbox [checked]=\"column?.display === 'visible'\">\r\n {{ column.header }}\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"column-config-apply\">\r\n <button mat-menu-item type=\"button\" color=\"primary\" class=\"done-setting\" (click)=\"apply_onClick($event)\">\r\n <mat-icon color=\"primary\">done</mat-icon>\r\n </button>\r\n <button mat-menu-item type=\"button\" color=\"primary\" class=\"done-setting\" (click)=\"cancel_onClick()\">\r\n <mat-icon color=\"primary\">clear</mat-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #noColumns>\r\n <div mat-menu-item>\r\n {{ languagePack.menuLabels.thereIsNoColumn }}\r\n </div>\r\n </ng-template>\r\n</mat-menu>\r\n\r\n<mat-menu #columnSettingMenu=\"matMenu\" [overlapTrigger]=\"false\" style=\"padding: 10px !important\">\r\n <div *ngIf=\"currentColumn !== null\" (click)=\"$event.stopPropagation(); $event.preventDefault()\" class=\"column-setting\">\r\n <ng-container *ngIf=\"isVisible(currentTableSetting?.visibleActionMenu?.columnSettingFilter)\">\r\n <div class=\"column-setting-header column-setting-header-first\">\r\n <mat-icon color=\"primary\">filter_alt</mat-icon>{{ languagePack.menuLabels.filterMode }}\r\n </div>\r\n <mat-radio-group class=\"radio\" [(ngModel)]=\"currentTableSetting.columnSetting[currentColumn].filter\">\r\n <mat-radio-button value='client-side' (click)=\"$event.stopPropagation()\">{{\r\n languagePack.menuLabels.filterLocalMode }}</mat-radio-button>\r\n <mat-radio-button value='server-side' (click)=\"$event.stopPropagation()\">{{\r\n languagePack.menuLabels.filterServerMode }}</mat-radio-button>\r\n </mat-radio-group>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isVisible(currentTableSetting?.visibleActionMenu?.columnSettingSort)\">\r\n <div class=\"column-setting-header\">\r\n <mat-icon color=\"primary\">sort</mat-icon>{{ languagePack.menuLabels.sortMode }}\r\n </div>\r\n <mat-radio-group class=\"radio\" [(ngModel)]=\"currentTableSetting.columnSetting[currentColumn].sort\">\r\n <mat-radio-button value='client-side' (click)=\"$event.stopPropagation()\">{{\r\n languagePack.menuLabels.sortLocalMode }}</mat-radio-button>\r\n <mat-radio-button value='server-side' (click)=\"$event.stopPropagation()\">{{\r\n languagePack.menuLabels.sortServerMode }}</mat-radio-button>\r\n </mat-radio-group>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isVisible(currentTableSetting?.visibleActionMenu?.columnSettingFilter)\">\r\n <div class=\"column-setting-header\">\r\n <mat-icon color=\"primary\">print</mat-icon>{{ languagePack.menuLabels.printMode }}\r\n </div>\r\n <mat-radio-group class=\"radio\" [(ngModel)]=\"currentTableSetting.columnSetting[currentColumn].printable\">\r\n <mat-radio-button [value]=\"true\" (click)=\"$event.stopPropagation()\">{{ languagePack.menuLabels.printYesMode }}\r\n </mat-radio-button>\r\n <mat-radio-button [value]=\"false\" (click)=\"$event.stopPropagation()\">{{ languagePack.menuLabels.printNoMode }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isVisible(currentTableSetting?.visibleActionMenu?.columnSettingPin)\">\r\n <div class=\"column-setting-header\">\r\n <mat-icon color=\"primary\">push_pin</mat-icon>{{ languagePack.menuLabels.pinMode }}\r\n </div>\r\n <mat-radio-group class=\"radio\" [(ngModel)]=\"currentTableSetting.columnSetting[currentColumn].sticky\">\r\n <mat-radio-button value='none' (click)=\"$event.stopPropagation()\">{{ languagePack.menuLabels.pinNoneMode }}\r\n </mat-radio-button>\r\n <mat-radio-button value='start' (click)=\"$event.stopPropagation()\">{{ languagePack.menuLabels.pinStartMode }}\r\n </mat-radio-button>\r\n <mat-radio-button value='end' (click)=\"$event.stopPropagation()\">{{ languagePack.menuLabels.pinEndMode }}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </ng-container>\r\n </div>\r\n</mat-menu>",
changeDetection: i0.ChangeDetectionStrategy.OnPush,
styles: [":host{display:flex;align-items:center;justify-content:space-between}.ltr-menu span{float:left}.main-menu{width:38px!important;line-height:24px!important}.va-mat-button-no-input{border:none;background-color:transparent;outline:none}.va-mat-table-dragable-container{min-width:200px;padding:8px 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.va-mat-table-dragable-container:dir(rtl){background-color:green!important}.dragable-row mat-checkbox{width:calc(100% - 54px);line-height:28px;display:inline-flex}.va-mat-table-dragable-container .dragable-row{background-color:#fff;display:flex;width:100%;height:30px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-setting-button{cursor:pointer!important;font-size:24px;margin-right:5px}.new-setting{text-align:center;margin-left:0;margin-top:0;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;border:none;line-height:48px;height:48px;display:flex;flex-wrap:nowrap;width:100%;padding:0 16px;box-sizing:border-box}.new-setting .input-container{overflow:hidden}.new-setting input{line-height:33px;background-color:#fff;border:none;padding-left:5px;border-radius:4px;outline:none;text-align:center;direction:ltr}.setting-item{line-height:48px;display:inline-flex;flex-direction:row;align-items:center;width:100%;font-size:14px}.setting-item mat-icon{width:38px;height:38px;line-height:38px;color:#0000008a;cursor:pointer;text-align:center;border-radius:50%}.setting-item mat-icon:hover{background-color:#dbdbdb}.setting-item span{cursor:pointer;width:154px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:list-item}.setting-item-active{background-color:#fdd78a}::ng-deep .mat-menu-panel{min-height:auto!important}.save-table-setting{display:flex;min-width:70px}.save-table-setting mat-icon{width:32px;height:32px;line-height:32px;cursor:pointer}.delete-table-setting{position:absolute;cursor:pointer;line-height:38px!important;height:38px;width:38px;border-radius:100%;text-align:center;pointer-events:none;margin-top:5px}.delete-table-setting:hover{color:#fff;background-color:#afafaf}.va-mat-table-dragable-container .dragable-row mat-icon{line-height:30px;opacity:.15;transition:opacity .5s;color:#616161;cursor:grab;background-color:#fff}.va-mat-table-dragable-container .dragable-row:hover mat-icon{opacity:1}.va-mat-table-drag-preview{direction:ltr;background-color:#ececec;padding:4px 8px 4px 4px!important;cursor:grabbing!important;margin-top:-4px;margin-left:-4px;font-size:14px;border-radius:5px}.va-mat-table-drag-preview mat-icon,.va-mat-table-drag-preview mat-checkbox{vertical-align:top}.va-mat-table-drag-preview mat-icon{padding-left:4px;color:#616161}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.done-setting{width:50%!important;display:inline-flex;text-align:center;height:42px}.done-setting mat-icon{line-height:38px!important;opacity:.6;transition:opacity .5s;color:#616161;width:100%;text-align:center;margin:0}.done-setting mat-icon:hover{opacity:1}.column-setting{font-family:Roboto,\"Helvetica Neue\",sans-serif;padding:10px}.column-setting .radio{width:100%;display:flex;font-size:12px;margin-top:-2px}.column-setting .radio mat-radio-button{padding:5px;width:50%}.column-setting .radio mat-radio-button:last-child{margin-right:10px}.column-setting .column-setting-header{line-height:30px;padding:5px 5px 0;font-size:14px;border-top:1px solid #f3f3f3;margin-top:5px}.column-setting .column-setting-header mat-icon{opacity:.7;font-size:22px;line-height:30px;float:right;color:#616161}.column-setting-header:first-child{border-top:none!important;padding:0 5px!important;margin-top:-5px!important}.first-menu-item{width:100px;display:inline-block;text-align:left}::ng-deep [dir=rtl] .mat-checkbox-inner-container{margin-left:auto!important;margin-right:5px!important}.mat-menu-item{display:inline-flex;width:100%;box-sizing:border-box}.mat-menu-item span{width:100%}.mat-menu-item mat-icon{line-height:48px!important;height:48px}::ng-deep .column-config .mat-checkbox-layout{width:100%}::ng-deep .column-config .mat-checkbox-layout .mat-checkbox-label{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.column-config-apply{border-top:1px solid #e7e7e7;position:sticky;bottom:0px;z-index:2147483647;background-color:#fff}\n"]
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
TableMenuComponent.ctorParameters = function () { return [
{ type: TableIntl },
{ type: TableService }
]; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
TableMenuComponent.propDecorators = {
menuActionChange: [{ type: i0.Output }],
tableSetting: [{ type: i0.Input }],
tableSettingChange: [{ type: i0.Output }],
newSettingElement: [{ type: i0.ViewChild, args: ['newSetting', { static: false },] }]
};
var components$1 = [TableMenuComponent];
var TableMenuModule = /** @class */ (function () {
function TableMenuModule() {
}
return TableMenuModule;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
TableMenuModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [components$1],
exports: components$1,
imports: [
common.CommonModule,
forms.FormsModule,
button.MatButtonModule,
checkbox.MatCheckboxModule,
icon.MatIconModule,
dragDrop.DragDropModule,
menu.MatMenuModule,
radio.MatRadioModule,
divider.MatDividerModule
],
},] }
];
var FilterEventDirective = /** @class */ (function () {
function FilterEventDirective() {
}
FilterEventDirective.prototype.onClick = function (e) {
e.stopPropagation();
e.preventDefault();
return false;
};
return FilterEventDirective;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
FilterEventDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[filter-event]'
},] }
];
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
FilterEventDirective.propDecorators = {
onClick: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
};
var components = [HeaderFilterComponent, FilterEventDirective];
var HeaderFilterModule = /** @class */ (function () {
function HeaderFilterModule() {
}
return HeaderFilterModule;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
HeaderFilterModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: components,
exports: components,
imports: [
common.CommonModule,
formField.MatFormFieldModule,
icon.MatIconModule,
input.MatInputModule,
menu.MatMenuModule,
select.MatSelectModule,
forms.ReactiveFormsModule,
button.MatButtonModule,
forms.FormsModule
],
},] }
];
var FixedSizeTableVirtualScrollStrategy = /** @class */ (function () {
function FixedSizeTableVirtualScrollStrategy() {
this.length = 0;
this.indexChange = new rxjs.Subject();
this.stickyChange = new rxjs.Subject();
this.scrollStrategyMode = 'fixed-size';
this.renderedRangeStream = new rxjs.BehaviorSubject({ start: 0, end: 0 });
this.offsetChange = new rxjs.BehaviorSubject(0);
this.scrolledIndexChange = this.indexChange.pipe(operators.distinctUntilChanged());
}
Object.defineProperty(FixedSizeTableVirtualScrollStrategy.prototype, "dataLength", {
get: function () {
return this.length;
},
set: function (value) {
this.length = value;
this.onDataLengthChanged();
},
enumerable: false,
configurable: true
});
FixedSizeTableVirtualScrollStrategy.prototype.ngOnDestroy = function () {
this.eventsSubscription.unsubscribe();
};
FixedSizeTableVirtualScrollStrategy.prototype.attach = function (viewport) {
this.viewport = viewport;
this.eventsSubscription = this.viewport.renderedRangeStream.subscribe(this.renderedRangeStream);
this.onDataLengthChanged();
};
FixedSizeTableVirtualScrollStrategy.prototype.detach = function () {
this.indexChange.complete();
this.stickyChange.complete();
this.renderedRangeStream.complete();
};
FixedSizeTableVirtualScrollStrategy.prototype.onContentScrolled = function () {
this.updateContent();
};
FixedSizeTableVirtualScrollStrategy.prototype.onDataLengthChanged = function () {
if (this.viewport) {
this.viewport.setTotalContentSize(this.dataLength * this.rowHeight + this.headerHeight + this.footerHeight);
}
this.updateContent();
};
FixedSizeTableVirtualScrollStrategy.prototype.onContentRendered = function () {
// no-op
};
FixedSizeTableVirtualScrollStrategy.prototype.onRenderedOffsetChanged = function () {
// no-op
};
FixedSizeTableVirtualScrollStrategy.prototype.scrollToIndex = function (index, behavior) {
// if (this.viewport) {
// this.viewport.scrollToOffset( this.rowHeight * index , behavior);
// }
if (!this.viewport || !this.rowHeight) {
return;
}
this.viewport.scrollToOffset((index - 1) * this.rowHeight + this.headerHeight);
};
FixedSizeTableVirtualScrollStrategy.prototype.setConfig = function (configs) {
var rowHeight = configs.rowHeight, headerHeight = configs.headerHeight, footerHeight = configs.footerHeight, bufferMultiplier = configs.bufferMultiplier;
if (this.rowHeight === rowHeight
&& this.headerHeight === headerHeight
&& this.footerHeight === footerHeight
&& this.bufferMultiplier === bufferMultiplier) {
return;
}
this.rowHeight = rowHeight;
this.headerHeight = headerHeight;
this.footerHeight = footerHeight;
this.bufferMultiplier = bufferMultiplier;
this.onDataLengthChanged();
};
// bug fixed some time viewport is zero height (i dont know why!)
FixedSizeTableVirtualScrollStrategy.prototype.getViewportSize = function () {
if (this.viewport.getViewportSize() === 0) {
return this.viewport.elementRef.nativeElement.clientHeight + 52;
}
else {
return this.viewport.getViewportSize();
}
};
FixedSizeTableVirtualScrollStrategy.prototype.updateContent = function () {
if (!this.viewport || !this.rowHeight) {
return;
}
var start = 0;
var end = this.dataLength;
if (this.scrollStrategyMode === 'none' && this.viewport.getRenderedRange().start === start && this.viewport.getRenderedRange().end === end) {
return;
}
var scrollOffset = this.viewport.measureScrollOffset();
var amount = Math.ceil(this.getViewportSize() / this.rowHeight);
var offset = Math.max(scrollOffset - this.headerHeight, 0);
var buffer = Math.ceil(amount * this.bufferMultiplier);
var skip = Math.round(offset / this.rowHeight);
var index = Math.max(0, skip);
if (this.scrollStrategyMode === 'fixed-size') {
start = Math.max(0, index - buffer);
end = Math.min(this.dataLength, index + amount + buffer);
}
var renderedOffset = start * this.rowHeight;
this.viewport.setRenderedContentOffset(renderedOffset);
this.viewport.setRenderedRange({ start: start, end: end });
this.indexChange.next(index);
this.stickyChange.next(renderedOffset);
this.offsetChange.next(offset);
};
return FixedSizeTableVirtualScrollStrategy;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
FixedSizeTableVirtualScrollStrategy.decorators = [
{ type: i0.Injectable }
];
function _tableVirtualScrollDirectiveStrategyFactory(tableDir) {
return tableDir.scrollStrategy;
}
var stickyHeaderSelector = '.mat-header-row .mat-table-sticky';
var stickyFooterSelector = '.mat-footer-row .mat-table-sticky';
var defaults = {
rowHeight: 48,
headerHeight: 56,
headerEnabled: true,
footerHeight: 48,
footerEnabled: false,
bufferMultiplier: 0.7
};
var TableItemSizeDirective = /** @class */ (function () {
function TableItemSizeDirective(zone) {
this.zone = zone;
this.alive = true;
// tslint:disable-next-line:no-input-rename
this.rowHeight = defaults.rowHeight;
this.headerEnabled = defaults.headerEnabled;
this.headerHeight = defaults.headerHeight;
this.footerEnabled = defaults.footerEnabled;
this.footerHeight = defaults.footerHeight;
this.bufferMultiplier = defaults.bufferMultiplier;
// @Output() requestRendering: EventEmitter<any> = new EventEmitter();
this.scrollStrategy = new FixedSizeTableVirtualScrollStrategy();
this.dataSourceChanges = new rxjs.Subject();
}
TableItemSizeDirective.prototype.ngOnDestroy = function () {
this.alive = false;
this.dataSourceChanges.complete();
};
TableItemSizeDirective.prototype.isAlive = function () {
var _this = this;
return function () { return _this.alive; };
};
TableItemSizeDirective.prototype.isStickyEnabled = function () {
return !!this.scrollStrategy.viewport && this.table._headerRowDefs
.map(function (def) { return def.sticky; })
.reduce(function (prevState, state) { return prevState && state; }, true);
};
TableItemSizeDirective.prototype.ngAfterContentInit = function () {
var _this = this;
var switchDataSourceOrigin = this.table._switchDataSource;
this.table._switchDataSource = function (dataSource) {
switchDataSourceOrigin.call(_this.table, dataSource);
_this.connectDataSource(dataSource);
};
this.connectDataSource(this.table.dataSource);
this.scrollStrategy.stickyChange
.pipe(operators.filter(function () { return _this.isStickyEnabled(); }), operators.tap(function () {
if (!_this.stickyPositions) {
_this.initStickyPositions();
}
}), operators.takeWhile(this.isAlive()))
.subscribe(function (stickyOffset) {
_this.setSticky(stickyOffset);
});
};
TableItemSizeDirective.prototype.connectDataSource = function (dataSource) {
var _this = this;
this.dataSourceChanges.next();
if (dataSource instanceof TableVirtualScrollDataSource) {
dataSource
.dataToRender$
.pipe(operators.distinctUntilChanged(), operators.takeUntil(this.dataSourceChanges), operators.takeWhile(this.isAlive()), operators.tap(function (data) { return _this.scrollStrategy.dataLength = data === null || data === void 0 ? void 0 : data.length; }), operators.switchMap(function (data) { return _this.scrollStrategy
.renderedRangeStream
.pipe(operators.map(function (_a) {
var start = _a.start, end = _a.end;
// this.requestRendering.emit({from: start, to: end});
return typeof start !== 'number' || typeof end !== 'number' ? data : data.slice(start, end);
})); }))
.subscribe(function (data) {
_this.zone.run(function () {
dataSource.dataOfRange$.next(data);
});
});
}
else {
throw new Error('[tvsItemSize] requires TableVirtualScrollDataSource be set as [dataSource] of [mat-table]');
}
};
TableItemSizeDirective.prototype.ngOnChanges = function () {
var config = {
rowHeight: +this.rowHeight || defaults.rowHeight,
headerHeight: this.headerEnabled ? +this.headerHeight || defaults.headerHeight : 0,
footerHeight: this.footerEnabled ? +this.footerHeight || defaults.footerHeight : 0,
bufferMultiplier: +this.bufferMultiplier || defaults.bufferMultiplier
};
this.scrollStrategy.setConfig(config);
};
TableItemSizeDirective.prototype.setSticky = function (offset) {
var _this = this;
this.scrollStrategy.viewport.elementRef.nativeElement.querySelectorAll(stickyHeaderSelector)
.forEach(function (el) {
var parent = el.parentElement;
var baseOffset = 0;
if (_this.stickyPositions.has(parent)) {
baseOffset = _this.stickyPositions.get(parent);
}
el.style.top = baseOffset - offset + "px";
});
this.scrollStrategy.viewport.elementRef.nativeElement.querySelectorAll(stickyFooterSelector)
.forEach(function (el) {
var parent = el.parentElement;
var baseOffset = 0;
if (_this.stickyPositions.has(parent)) {
baseOffset = _this.stickyPositions.get(parent);
}
el.style.bottom = -baseOffset + offset + "px";
});
};
TableItemSizeDirective.prototype.initStickyPositions = function () {
var _this = this;
this.stickyPositions = new Map();
this.scrollStrategy.viewport.elementRef.nativeElement.querySelectorAll(stickyHeaderSelector)
.forEach(function (el) {
var parent = el.parentElement;
if (!_this.stickyPositions.has(parent)) {
_this.stickyPositions.set(parent, parent.offsetTop);
}
});
};
return TableItemSizeDirective;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
TableItemSizeDirective.decorators = [
{ type: i0.Directive, args: [{
// tslint:disable-next-line:directive-selector
selector: 'cdk-virtual-scroll-viewport[tvsItemSize]',
providers: [{
provide: scrolling.VIRTUAL_SCROLL_STRATEGY,
useFactory: _tableVirtualScrollDirectiveStrategyFactory,
deps: [i0.forwardRef(function () { return TableItemSizeDirective; })]
}]
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
TableItemSizeDirective.ctorParameters = function () { return [
{ type: i0.NgZone }
]; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
TableItemSizeDirective.propDecorators = {
rowHeight: [{ type: i0.Input, args: ['tvsItemSize',] }],
headerEnabled: [{ type: i0.Input }],
headerHeight: [{ type: i0.Input }],
footerEnabled: [{ type: i0.Input }],
footerHeight: [{ type: i0.Input }],
bufferMultiplier: [{ type: i0.Input }],
table: [{ type: i0.ContentChild, args: [table.MatTable, { static: true },] }]
};
var TableVirtualScrollModule = /** @class */ (function () {
function TableVirtualScrollModule() {
}
return TableVirtualScrollModule;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
TableVirtualScrollModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [
TableItemSizeDirective
],
imports: [],
exports: [TableItemSizeDirective]
},] }
];
// tslint:disable-next-line:max-line-length
var styles = 'body{margin:15px;}table{width:100%;border-collapse:collapse;}h2{text-align:center;}th.mat-header-cell{text-align:center;}div{text-align:center;margin:30px }tr{border-bottom:1px solid }td,th{padding:10px; text-align: center }.param-list{text-align: left;border:solid gray;border-width: 0px 0px 2px 0;margin-bottom: 10px;padding-bottom: 10px;}.param {display: inline-block;margin: 10px;}';
var PrintTableDialogComponent = /** @class */ (function () {
function PrintTableDialogComponent(dialogRef, printTable) {
this.dialogRef = dialogRef;
this.printTable = printTable;
}
PrintTableDialogComponent.prototype.ngOnInit = function () {
};
PrintTableDialogComponent.prototype.print = function () {
var _this = this;
setTimeout(function () {
var dialogConfig = 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no';
var printDoc = "\n <html>\n <head>\n <style> " + styles + " </style>\n </head>\n <body onload=\"window.print();\" onafterprint=\"window.close()\">\n " + _this.printContentRef.nativeElement.innerHTML + "\n </body>\n </html>\n ";
var popupWinindow = window.open('', '_blank', dialogConfig);
popupWinindow.document.write(printDoc);
popupWinindow.document.close();
});
};
return PrintTableDialogComponent;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
PrintTableDialogComponent.decorators = [
{ type: i0.Component, args: [{
// tslint:disable-next-line: component-selector
selector: 'print-dialog',
template: "<mat-dialog-content>\r\n <div dir='{{ printTable.direction }}' #printContentRef>\r\n <h2>\r\n {{ printTable?.title }}\r\n </h2>\r\n <div class=\"param-list\">\r\n <div class=\"param\" *ngFor='let param of printTable?.userPrintParameters'>\r\n <b>{{ param.key }} </b> : {{ param.value }}\r\n </div>\r\n <div class=\"param\" *ngFor='let param of printTable?.tablePrintParameters'>\r\n <b>{{ param.key }} </b> : {{ param.value }}\r\n </div>\r\n </div>\r\n <table class=\"print-table\" mat-table [dataSource]=\"printTable.data\">\r\n <ng-container *ngFor=\"let column of printTable.columns\" matColumnDef=\"{{ column.name }}\">\r\n <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>\r\n <td mat-cell *matCellDef=\"let row\"> {{ row[column.name] }} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"printTable.displayedFields\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: printTable.displayedFields;\"></tr>\r\n </table>\r\n </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions align=\"end\">\r\n <button mat-button type=\"button\" mat-dialog-close>Cancel</button>\r\n <button mat-button type=\"button\" [mat-dialog-close]=\"true\" cdkFocusInitial (click)=\"print()\">Print</button>\r\n</mat-dialog-actions>\r\n",
styles: ["#print-section{text-align:center;margin:30px}h2{text-align:center}.param-list{width:100%;display:inline-block;border:solid gray;border-width:0px 0px 2px 0;margin-bottom:10px;padding-bottom:10px}.param{display:inline-block;margin:10px}.print-table{width:100%}.print-table th.mat-header-cell{font-size:medium;font-size:initial}\n"]
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
PrintTableDialogComponent.ctorParameters = function () { return [
{ type: dialog.MatDialogRef },
{ type: undefined, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
]; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
PrintTableDialogComponent.propDecorators = {
printContentRef: [{ type: i0.ViewChild, args: ['printContentRef', { static: true },] }]
};
var TooltipDirective = /** @class */ (function () {
function TooltipDirective(overlay, overlayPositionBuilder, elementRef) {
this.overlay = overlay;
this.overlayPositionBuilder = overlayPositionBuilder;
this.elementRef = elementRef;
}
TooltipDirective.prototype.ngOnDestroy = function () {
this.hide();
};
TooltipDirective.prototype.ngOnInit = function () {
var positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef)
.withPositions([{
originX: 'center',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom',
offsetY: -8,
}]);
this.overlayRef = this.overlay.create({ positionStrategy: positionStrategy });
};
TooltipDirective.prototype.show = function () {
var injector = i0.Injector.create({
providers: [{ provide: 'tooltipConfig', useValue: this.content }]
});
var tooptipRef = this.overlayRef.attach(new portal.ComponentPortal(TooltipComponent, null, injector));
// tooptipRef.onDestroy((x) => {});
};
TooltipDirective.prototype.hide = function () {
this.overlayRef.detach();
};
return TooltipDirective;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
TooltipDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[appTooltip]:not([click-to-open])'
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
TooltipDirective.ctorParameters = function () { return [
{ type: overlay.Overlay },
{ type: overlay.OverlayPositionBuilder },
{ type: i0.ElementRef }
]; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
TooltipDirective.propDecorators = {
content: [{ type: i0.Input, args: ['appTooltip',] }],
show: [{ type: i0.HostListener, args: ['mouseenter',] }],
hide: [{ type: i0.HostListener, args: ['mouseleave',] }]
};
var TemplateOrStringDirective = /** @class */ (function () {
function TemplateOrStringDirective(defaultTpl, vcr) {
this.defaultTpl = defaultTpl;
this.vcr = vcr;
}
Object.defineProperty(TemplateOrStringDirective.prototype, "templateOrString", {
set: function (content) {
var template = content instanceof i0.TemplateRef ? content : this.defaultTpl;
this.vcr.clear();
this.vcr.createEmbeddedView(template);
},
enumerable: false,
configurable: true
});
return TemplateOrStringDirective;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
TemplateOrStringDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[templateOrString]'
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
TemplateOrStringDirective.ctorParameters = function () { return [
{ type: i0.TemplateRef },
{ type: i0.ViewContainerRef }
]; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
TemplateOrStringDirective.propDecorators = {
templateOrString: [{ type: i0.Input }]
};
var PaginationComponent = /** @class */ (function () {
function PaginationComponent() {
this.pageChange = new i0.EventEmitter();
this.id = new Date().getTime();
this.pageIndex = 1;
this.previousPageIndex = null;
this.dir = 'rtl';
this.pageSize = 10;
this.previousLabel = 'Previous';
this.nextLabel = 'Next';
this.firstLabel = 'Go first';
this.lastLabel = 'Go Last';
this.length = 0;
this.pageSizeOptions = [5, 10, 50, 100];
}
PaginationComponent.prototype.ngOnChanges = function (changes) {
if (changes.pageIndex) {
this.pageIndex = changes.pageIndex.currentValue + 1;
}
if (changes.pageSizeOptions && !changes.pageSizeOptions.currentValue.includes(this.pageSize) && changes.pageSizeOptions.currentValue.length > 0) {
this.pageSize = changes.pageSizeOptions.currentValue[0];
}
if (changes.pageIndex && this.pageCount < changes.pageIndex.currentValue) {
this.pageIndex = this.pageCount;
}
};
Object.defineProperty(PaginationComponent.prototype, "pageCount", {
get: function () {
var _a;
if (this.pageSize === 0) {
return 1;
}
return Math.ceil(((_a = this.length) !== null && _a !== void 0 ? _a : 1) / this.pageSize);
},
enumerable: false,
configurable: true
});
PaginationComponent.prototype.ngOnInit = function () {
};
PaginationComponent.prototype.goFirst = function () {
this.pageIndex = 1;
this.emit();
};
PaginationComponent.prototype.goLast = function () {
this.pageIndex = this.pageCount;
this.emit();
};
PaginationComponent.prototype.next = function () {
if (this.pageIndex < this.pageCount) {
this.pageIndex++;
this.emit();
}
};
PaginationComponent.prototype.previous = function () {
if (this.pageIndex > 1) {
this.pageIndex--;
this.emit();
}
};
PaginationComponent.prototype.goToPage = function (event) {
if (event.target.value > 0 && event.target.value <= this.pageCount) {
this.pageIndex = event.target.value;
}
else if (event.target.value > this.pageCount) {
this.pageIndex = this.pageCount;
}
else if (event.target.value < 1) {
this.pageIndex = 1;
}
this.emit();
};
PaginationComponent.prototype.reset = function (event) {
this.pageIndex = 1;
this.emit();
};
PaginationComponent.prototype.emit = function () {
var data = new paginator.PageEvent();
data.pageIndex = (+this.pageIndex) - 1;
data.length = +this.length;
data.pageSize = +this.pageSize;
data.previousPageIndex = +this.previousPageIndex;
this.pageChange.emit(data);
};
return PaginationComponent;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
PaginationComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'pagination',
template: "<div [dir]=\"dir\" class=\"paginator-root\">\r\n <div class=\"total-items\">\r\n <div class=\"total-items-box\">\r\n Total items: \r\n <span>\r\n {{length??0}}\r\n </span>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"paginator-root-arrowBox\">\r\n <div [matTooltip]=\"firstLabel\">\r\n <button (click)=\"goFirst()\" [class.disable]=\"pageIndex<=1\" [dir]=\"dir\"\r\n [disabled]=\"pageIndex===1\"\r\n class=\"paginator-root-goFirst\">\r\n </button>\r\n </div>\r\n\r\n <div [matTooltip]=\"previousLabel\">\r\n <button (click)=\"previous()\" [class.disable]=\"pageIndex<=1\" [dir]=\"dir\" [disabled]=\"pageIndex===1\"\r\n class=\"paginator-root-previous\">\r\n </button>\r\n </div>\r\n\r\n <div class=\"paginator-root-activePage\">\r\n <input (change)=\"goToPage($event)\" [max]=\"pageCount\" [ngModel]=\"pageIndex\" min=\"1\" type=\"number\">\r\n <span>/</span> \r\n <span>{{pageCount}}</span>\r\n </div>\r\n <div [matTooltip]=\"nextLabel\">\r\n <button (click)=\"next()\" [class.disable]=\"pageIndex>=pageCount\" [dir]=\"dir\" [disabled]=\"pageIndex===pageCount\"\r\n class=\"paginator-root-next\">\r\n </button>\r\n </div>\r\n <div [matTooltip]=\"lastLabel\">\r\n <button (click)=\"goLast()\" [class.disable]=\"pageIndex>=pageCount\" [dir]=\"dir\" [disabled]=\"pageIndex===pageCount\"\r\n class=\"paginator-root-goLast\">\r\n </button>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"pageSizeOptions.length>0\" [dir]=\"dir\" class=\"paginator-root-pageSize\">\r\n <select [(ngModel)]=\"pageSize\" (ngModelChange)=\"reset($event)\">\r\n <ng-container *ngFor=\"let item of pageSizeOptions\">\r\n <option [value]=\"item\">{{item}}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n</div>\r\n",
styles: [".paginator-root{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 10px}.paginator-root-arrowBox{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap}@media only screen and (max-width: 500px){.paginator-root-arrowBox{width:100%}}@media only screen and (max-width: 300px){.paginator-root-arrowBox{flex-wrap:wrap}}.paginator-root-goFirst{cursor:pointer;background:transparent;border-color:transparent;display:flex;flex-direction:row;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;padding:.2rem}@media only screen and (max-width: 300px){.paginator-root-goFirst{order:2}}.paginator-root-goFirst[dir=rtl]{transform:rotate(180deg)}.paginator-root-goFirst:after{content:\"\";position:absolute;border-bottom:.2rem solid rgba(0,0,0,.54);border-left:.2rem solid rgba(0,0,0,.54);width:8px;height:8px;transform:rotate(225deg);border-radius:.2rem;margin-right:14px;transform:rotate(45deg)}.paginator-root-goFirst:after:hover:before{border-color:#1890ff}.paginator-root-goFirst:after:hover:after{border-color:#1890ff}.paginator-root-goFirst:before{content:\"\";position:absolute;border-bottom:.2rem solid rgba(0,0,0,.54);border-left:.2rem solid rgba(0,0,0,.54);width:8px;height:8px;transform:rotate(225deg);border-radius:.2rem;transform:rotate(45deg)}.paginator-root-goFirst:before:hover:before{border-color:#1890ff}.paginator-root-goFirst:before:hover:after{border-color:#1890ff}.paginator-root-goFirst:hover:before{border-color:#1890ff}.paginator-root-goFirst:hover:after{border-color:#1890ff}.paginator-root-previous{cursor:pointer;background:transparent;border-color:transparent;display:flex;flex-direction:row;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;padding:.2rem;margin-left:.5rem}@media only screen and (max-width: 300px){.paginator-root-previous{order:2}}.paginator-root-previous:after{content:\"\";position:absolute;border-bottom:.2rem solid rgba(0,0,0,.54);border-left:.2rem solid rgba(0,0,0,.54);width:8px;height:8px;transform:rotate(225deg);border-radius:.2rem;transform:rotate(45deg)}.paginator-root-previous:after:hover:before{border-color:#1890ff}.paginator-root-previous:after:hover:after{border-color:#1890ff}.paginator-root-previous:hover:after{border-color:#1890ff}.paginator-root-previous[dir=rtl]{transform:rotate(180deg)}.paginator-root-activePage{display:flex;flex-direction:row;align-items:center;justify-content:center;height:2rem;margin-left:1.5rem;margin-right:1.5rem;outline:1px solid transparent}.paginator-root-activePage input::-webkit-outer-spin-button,.paginator-root-activePage input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.paginator-root-activePage input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-align:center;height:26px;padding:0!important;box-sizing:border-box}.paginator-root-activePage input[type=number]:hover{border-color:#1890ff;border-radius:.2rem}.paginator-root-activePage input[type=number]:focus{outline:1px solid #1890ff;border-color:#1890ff;border-radius:.2rem}@media only screen and (max-width: 300px){.paginator-root-activePage{order:1;width:100%;margin:0}}.paginator-root-next{cursor:pointer;background:transparent;border-color:transparent;display:flex;flex-direction:row;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;padding:.2rem;margin-right:.5rem}@media only screen and (max-width: 300px){.paginator-root-next{order:2}}.paginator-root-next:after{content:\"\";position:absolute;border-bottom:.2rem solid rgba(0,0,0,.54);border-left:.2rem solid rgba(0,0,0,.54);width:8px;height:8px;transform:rotate(225deg);border-radius:.2rem}.paginator-root-next:after:hover:before{border-color:#1890ff}.paginator-root-next:after:hover:after{border-color:#1890ff}.paginator-root-next:hover:after{border-color:#1890ff}.paginator-root-next[dir=rtl]{transform:rotate(180deg)}.paginator-root-goLast{cursor:pointer;background:transparent;border-color:transparent;display:flex;flex-direction:row;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;padding:.2rem}.paginator-root-goLast:after{content:\"\";position:absolute;border-bottom:.2rem solid rgba(0,0,0,.54);border-left:.2rem solid rgba(0,0,0,.54);width:8px;height:8px;transform:rotate(225deg);border-radius:.2rem;margin-right:14px}.paginator-root-goLast:after:hover:before{border-color:#1890ff}.paginator-root-goLast:after:hover:after{border-color:#1890ff}.paginator-root-goLast:before{content:\"\";position:absolute;border-bottom:.2rem solid rgba(0,0,0,.54);border-left:.2rem solid rgba(0,0,0,.54);width:8px;height:8px;transform:rotate(225deg);border-radius:.2rem}.paginator-root-goLast:before:hover:before{border-color:#1890ff}.paginator-root-goLast:before:hover:after{border-color:#1890ff}@media only screen and (max-width: 300px){.paginator-root-goLast{order:2}}.paginator-root-goLast[dir=rtl]{transform:rotate(180deg)}.paginator-root-goLast:hover:before{border-color:#1890ff}.paginator-root-goLast:hover:after{border-color:#1890ff}.paginator-root-pageSize{display:flex;align-items:center;height:2rem}.paginator-root-pageSize[dir=rtl]{margin-right:1.5rem}@media only screen and (max-width: 500px){.paginator-root-pageSize[dir=rtl]{margin-right:0}}.paginator-root-pageSize[dir=ltr]{margin-left:1.5rem}@media only screen and (max-width: 500px){.paginator-root-pageSize[dir=ltr]{margin-left:0}}.paginator-root-pageSize select{padding-right:10px;padding-left:10px;border-radius:.2rem;height:26px}.paginator-root-pageSize select:hover{outline:1px solid #1890ff;border:1px solid #1890ff;border-radius:.2rem}.paginator-root-pageSize select:focus{outline:1px solid #1890ff;border:1px solid #1890ff;border-radius:.2rem}@media only screen and (max-width: 500px){.paginator-root-pageSize{margin-top:10px;order:3}.paginator-root-pageSize select{padding-right:2.4rem;padding-left:2.4rem}}@media only screen and (max-width: 300px){.paginator-root-pageSize select{width:100%}}.total-items{display:flex;justify-content:center;align-items:center;font-size:14px}@media only screen and (max-width: 900px){.total-items{width:100%;margin-top:10px}}.total-items-box{background:white;border:1px solid #767676FF;border-radius:2px;padding:2px 5px}.total-items-box span{font-weight:450}.disable{cursor:not-allowed}.disable *{border-color:#0000008a!important}\n"]
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
PaginationComponent.ctorParameters = function () { return []; };
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
PaginationComponent.propDecorators = {
pageChange: [{ type: i0.Output, args: ['page',] }],
pageIndex: [{ type: i0.Input }],
previousPageIndex: [{ type: i0.Input }],
dir: [{ type: i0.Input }],
pageSize: [{ type: i0.Input }],
previousLabel: [{ type: i0.Input }],
nextLabel: [{ type: i0.Input }],
firstLabel: [{ type: i0.Input }],
lastLabel: [{ type: i0.Input }],
length: [{ type: i0.Input }],
pageSizeOptions: [{ type: i0.Input }]
};
var PaginationModule = /** @class */ (function () {
function PaginationModule() {
}
return PaginationModule;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
PaginationModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [
PaginationComponent,
],
imports: [
common.CommonModule,
forms.FormsModule,
tooltip.MatTooltipModule,
],
exports: [PaginationComponent]
},] }
];
function createCompiler(compilerFactory) {
return compilerFactory.createCompiler();
}
function paginatorLabels(tableIntl) {
var _a, _b, _c, _d, _e, _f;
var paginatorIntl = new paginator.MatPaginatorIntl();
paginatorIntl.firstPageLabel = (_a = tableIntl === null || tableIntl === void 0 ? void 0 : tableIntl.paginatorLabels) === null || _a === void 0 ? void 0 : _a.firstPageLabel;
paginatorIntl.getRangeLabel = (_b = tableIntl === null || tableIntl === void 0 ? void 0 : tableIntl.paginatorLabels) === null || _b === void 0 ? void 0 : _b.getRangeLabel;
paginatorIntl.itemsPerPageLabel = (_c = tableIntl === null || tableIntl === void 0 ? void 0 : tableIntl.paginatorLabels) === null || _c === void 0 ? void 0 : _c.itemsPerPageLabel;
paginatorIntl.lastPageLabel = (_d = tableIntl === null || tableIntl === void 0 ? void 0 : tableIntl.paginatorLabels) === null || _d === void 0 ? void 0 : _d.lastPageLabel;
paginatorIntl.nextPageLabel = (_e = tableIntl === null || tableIntl === void 0 ? void 0 : tableIntl.paginatorLabels) === null || _e === void 0 ? void 0 : _e.nextPageLabel;
paginatorIntl.previousPageLabel = (_f = tableIntl === null || tableIntl === void 0 ? void 0 : tableIntl.paginatorLabels) === null || _f === void 0 ? void 0 : _f.previousPageLabel;
return paginatorIntl || null;
}
var ExtensionsModule = [HeaderFilterModule, RowMenuModule];
var ɵ0 = {};
var DynamicMatTableModule = /** @class */ (function () {
function DynamicMatTableModule() {
}
DynamicMatTableModule.forRoot = function (config) {
return {
ngModule: DynamicMatTableModule,
providers: [
{
provide: TableSetting,
useValue: config,
},
],
};
};
return DynamicMatTableModule;
}());
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
DynamicMatTableModule.decorators = [
{ type: i0.NgModule, args: [{
imports: [
common.CommonModule,
forms.FormsModule,
table.MatTableModule,
scrolling.ScrollingModule,
TableVirtualScrollModule,
checkbox.MatCheckboxModule,
formField.MatFormFieldModule,
input.MatInputModule,
sort.MatSortModule,
progressBar.MatProgressBarModule,
icon.MatIconModule,
dragDrop.DragDropModule,
TableMenuModule,
paginator.MatPaginatorModule,
dialog.MatDialogModule,
button.MatButtonModule,
menu.MatMenuModule,
divider.MatDividerModule,
tooltip.MatTooltipModule,
core.MatRippleModule,
overlay.OverlayModule,
ExtensionsModule,
PaginationModule,
// NoopAnimationsModule
],
exports: [DynamicMatTableComponent],
providers: [
// bugfixes in library compiler not load and must create library
{ provide: i0.COMPILER_OPTIONS, useValue: ɵ0, multi: true },
{ provide: i0.CompilerFactory, useClass: platformBrowserDynamic.JitCompilerFactory, deps: [i0.COMPILER_OPTIONS] },
{ provide: i0.Compiler, useFactory: createCompiler, deps: [i0.CompilerFactory] },
TableIntl,
{
provide: paginator.MatPaginatorIntl,
useFactory: paginatorLabels,
deps: [TableIntl],
},
{ provide: overlay.OverlayContainer, useClass: overlay.FullscreenOverlayContainer }
],
declarations: [
DynamicMatTableComponent,
PrintTableDialogComponent,
TableCoreDirective,
DynamicCellDirective,
TooltipComponent,
TooltipDirective,
TemplateOrStringDirective
],
entryComponents: [PrintTableDialogComponent, TooltipComponent],
},] }
];
/*
* Public API Surface of dynamic-mat-table
*/
/**
* Generated bundle index. Do not edit.
*/
exports.DynamicCellDirective = DynamicCellDirective;
exports.DynamicMatTableComponent = DynamicMatTableComponent;
exports.DynamicMatTableModule = DynamicMatTableModule;
exports.TableIntl = TableIntl;
exports.TableService = TableService;
exports.TableSetting = TableSetting;
exports.TableVirtualScrollDataSource = TableVirtualScrollDataSource;
exports.clone = clone;
exports.copy = copy;
exports.createCompiler = createCompiler;
exports.deepClone = deepClone;
exports.exitFullscreen = exitFullscreen;
exports.expandAnimation = expandAnimation;
exports.getObjectProp = getObjectProp;
exports.isFullscreen = isFullscreen;
exports.isNullorUndefined = isNullorUndefined;
exports.paginatorLabels = paginatorLabels;
exports.requestFullscreen = requestFullscreen;
exports.tableAnimation = tableAnimation;
exports.toggleFullscreen = toggleFullscreen;
exports["ɵ0"] = ɵ0;
exports["ɵa"] = TableCoreDirective;
exports["ɵb"] = HeaderFilterComponent;
exports["ɵc"] = TableVirtualScrollModule;
exports["ɵd"] = _tableVirtualScrollDirectiveStrategyFactory;
exports["ɵe"] = TableItemSizeDirective;
exports["ɵf"] = TableMenuModule;
exports["ɵg"] = TableMenuComponent;
exports["ɵh"] = HeaderFilterModule;
exports["ɵi"] = FilterEventDirective;
exports["ɵj"] = RowMenuModule;
exports["ɵk"] = RowMenuComponent;
exports["ɵl"] = PaginationModule;
exports["ɵm"] = PaginationComponent;
exports["ɵn"] = PrintTableDialogComponent;
exports["ɵo"] = TooltipComponent;
exports["ɵp"] = TooltipDirective;
exports["ɵq"] = TemplateOrStringDirective;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=dynamic-mat-table.umd.js.map