ng2-smart-table
Version:
Angular Smart Table
994 lines (966 loc) • 155 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ng2-completer'), require('rxjs/operators'), require('rxjs'), require('lodash'), require('@angular/common/http')) :
typeof define === 'function' && define.amd ? define('ng2-smart-table', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'ng2-completer', 'rxjs/operators', 'rxjs', 'lodash', '@angular/common/http'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ng2-smart-table'] = {}, global.ng.core, global.ng.common, global.ng.forms, global.ng2Completer, global.rxjs.operators, global.rxjs, global.lodash, global.ng.common.http));
}(this, (function (exports, core, common, forms, ng2Completer, operators, rxjs, lodash, http) { 'use strict';
/*! *****************************************************************************
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) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
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 __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var CellComponent = /** @class */ (function () {
function CellComponent() {
this.inputClass = '';
this.mode = 'inline';
this.isInEditing = false;
this.edited = new core.EventEmitter();
}
CellComponent.prototype.onEdited = function (event) {
if (this.isNew) {
this.grid.create(this.grid.getNewRow(), this.createConfirm);
}
else {
this.grid.save(this.row, this.editConfirm);
}
};
return CellComponent;
}());
CellComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng2-smart-table-cell',
template: "\n <table-cell-view-mode *ngIf=\"!isInEditing\" [cell]=\"cell\"></table-cell-view-mode>\n <table-cell-edit-mode *ngIf=\"isInEditing\" [cell]=\"cell\"\n [inputClass]=\"inputClass\"\n (edited)=\"onEdited($event)\">\n </table-cell-edit-mode>\n "
},] }
];
CellComponent.propDecorators = {
grid: [{ type: core.Input }],
row: [{ type: core.Input }],
editConfirm: [{ type: core.Input }],
createConfirm: [{ type: core.Input }],
isNew: [{ type: core.Input }],
cell: [{ type: core.Input }],
inputClass: [{ type: core.Input }],
mode: [{ type: core.Input }],
isInEditing: [{ type: core.Input }],
edited: [{ type: core.Output }]
};
var EditCellDefault = /** @class */ (function () {
function EditCellDefault() {
this.inputClass = '';
this.edited = new core.EventEmitter();
}
EditCellDefault.prototype.onEdited = function (event) {
this.edited.next(event);
return false;
};
EditCellDefault.prototype.onStopEditing = function () {
this.cell.getRow().isInEditing = false;
return false;
};
EditCellDefault.prototype.onClick = function (event) {
event.stopPropagation();
};
return EditCellDefault;
}());
EditCellDefault.decorators = [
{ type: core.Component, args: [{
template: ''
},] }
];
EditCellDefault.propDecorators = {
cell: [{ type: core.Input }],
inputClass: [{ type: core.Input }],
edited: [{ type: core.Output }]
};
var CustomEditComponent = /** @class */ (function (_super) {
__extends(CustomEditComponent, _super);
function CustomEditComponent(resolver) {
var _this = _super.call(this) || this;
_this.resolver = resolver;
return _this;
}
CustomEditComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (this.cell && !this.customComponent) {
var componentFactory = this.resolver.resolveComponentFactory(this.cell.getColumn().editor.component);
this.customComponent = this.dynamicTarget.createComponent(componentFactory);
// set @Inputs and @Outputs of custom component
this.customComponent.instance.cell = this.cell;
this.customComponent.instance.inputClass = this.inputClass;
this.customComponent.instance.onStopEditing.subscribe(function () { return _this.onStopEditing(); });
this.customComponent.instance.onEdited.subscribe(function (event) { return _this.onEdited(event); });
this.customComponent.instance.onClick.subscribe(function (event) { return _this.onClick(event); });
}
};
CustomEditComponent.prototype.ngOnDestroy = function () {
if (this.customComponent) {
this.customComponent.destroy();
}
};
return CustomEditComponent;
}(EditCellDefault));
CustomEditComponent.decorators = [
{ type: core.Component, args: [{
selector: 'table-cell-custom-editor',
template: "\n <ng-template #dynamicTarget></ng-template>\n "
},] }
];
CustomEditComponent.ctorParameters = function () { return [
{ type: core.ComponentFactoryResolver }
]; };
CustomEditComponent.propDecorators = {
dynamicTarget: [{ type: core.ViewChild, args: ['dynamicTarget', { read: core.ViewContainerRef, static: true },] }]
};
var DefaultEditComponent = /** @class */ (function (_super) {
__extends(DefaultEditComponent, _super);
function DefaultEditComponent() {
return _super.call(this) || this;
}
DefaultEditComponent.prototype.getEditorType = function () {
return this.cell.getColumn().editor && this.cell.getColumn().editor.type;
};
return DefaultEditComponent;
}(EditCellDefault));
DefaultEditComponent.decorators = [
{ type: core.Component, args: [{
selector: 'table-cell-default-editor',
template: "<div [ngSwitch]=\"getEditorType()\">\n <select-editor *ngSwitchCase=\"'list'\"\n [cell]=\"cell\"\n [inputClass]=\"inputClass\"\n (onClick)=\"onClick($event)\"\n (onEdited)=\"onEdited($event)\"\n (onStopEditing)=\"onStopEditing()\">\n </select-editor>\n\n <textarea-editor *ngSwitchCase=\"'textarea'\"\n [cell]=\"cell\"\n [inputClass]=\"inputClass\"\n (onClick)=\"onClick($event)\"\n (onEdited)=\"onEdited($event)\"\n (onStopEditing)=\"onStopEditing()\">\n </textarea-editor>\n\n <checkbox-editor *ngSwitchCase=\"'checkbox'\"\n [cell]=\"cell\"\n [inputClass]=\"inputClass\"\n (onClick)=\"onClick($event)\">\n </checkbox-editor>\n\n <completer-editor *ngSwitchCase=\"'completer'\"\n [cell]=\"cell\">\n </completer-editor>\n\n <input-editor *ngSwitchDefault\n [cell]=\"cell\"\n [inputClass]=\"inputClass\"\n (onClick)=\"onClick($event)\"\n (onEdited)=\"onEdited($event)\"\n (onStopEditing)=\"onStopEditing()\">\n </input-editor>\n</div>"
},] }
];
DefaultEditComponent.ctorParameters = function () { return []; };
var EditCellComponent = /** @class */ (function () {
function EditCellComponent() {
this.inputClass = '';
this.edited = new core.EventEmitter();
}
EditCellComponent.prototype.onEdited = function (event) {
this.edited.next(event);
return false;
};
EditCellComponent.prototype.getEditorType = function () {
return this.cell.getColumn().editor && this.cell.getColumn().editor.type;
};
return EditCellComponent;
}());
EditCellComponent.decorators = [
{ type: core.Component, args: [{
selector: 'table-cell-edit-mode',
template: "\n <div [ngSwitch]=\"getEditorType()\">\n <table-cell-custom-editor *ngSwitchCase=\"'custom'\"\n [cell]=\"cell\"\n [inputClass]=\"inputClass\"\n (edited)=\"onEdited($event)\">\n </table-cell-custom-editor>\n <table-cell-default-editor *ngSwitchDefault\n [cell]=\"cell\"\n [inputClass]=\"inputClass\"\n (edited)=\"onEdited($event)\">\n </table-cell-default-editor>\n </div>\n "
},] }
];
EditCellComponent.propDecorators = {
cell: [{ type: core.Input }],
inputClass: [{ type: core.Input }],
edited: [{ type: core.Output }]
};
var DefaultEditor = /** @class */ (function () {
function DefaultEditor() {
this.onStopEditing = new core.EventEmitter();
this.onEdited = new core.EventEmitter();
this.onClick = new core.EventEmitter();
}
return DefaultEditor;
}());
DefaultEditor.decorators = [
{ type: core.Component, args: [{
template: ''
},] }
];
DefaultEditor.propDecorators = {
cell: [{ type: core.Input }],
inputClass: [{ type: core.Input }],
onStopEditing: [{ type: core.Output }],
onEdited: [{ type: core.Output }],
onClick: [{ type: core.Output }]
};
var CheckboxEditorComponent = /** @class */ (function (_super) {
__extends(CheckboxEditorComponent, _super);
function CheckboxEditorComponent() {
return _super.call(this) || this;
}
CheckboxEditorComponent.prototype.onChange = function (event) {
var trueVal = (this.cell.getColumn().getConfig() && this.cell.getColumn().getConfig().true) || true;
var falseVal = (this.cell.getColumn().getConfig() && this.cell.getColumn().getConfig().false) || false;
this.cell.newValue = event.target.checked ? trueVal : falseVal;
};
return CheckboxEditorComponent;
}(DefaultEditor));
CheckboxEditorComponent.decorators = [
{ type: core.Component, args: [{
selector: 'checkbox-editor',
template: "\n <input [ngClass]=\"inputClass\"\n type=\"checkbox\"\n class=\"form-control\"\n [name]=\"cell.getId()\"\n [disabled]=\"!cell.isEditable()\"\n [checked]=\"cell.getValue() == (cell.getColumn().getConfig()?.true || true)\"\n (click)=\"onClick.emit($event)\"\n (change)=\"onChange($event)\">\n ",
styles: [":host input,:host textarea{line-height:normal;padding:.375em .75em;width:100%}"]
},] }
];
CheckboxEditorComponent.ctorParameters = function () { return []; };
var CompleterEditorComponent = /** @class */ (function (_super) {
__extends(CompleterEditorComponent, _super);
function CompleterEditorComponent(completerService) {
var _this = _super.call(this) || this;
_this.completerService = completerService;
_this.completerStr = '';
return _this;
}
CompleterEditorComponent.prototype.ngOnInit = function () {
if (this.cell.getColumn().editor && this.cell.getColumn().editor.type === 'completer') {
var config = this.cell.getColumn().getConfig().completer;
config.dataService = this.completerService.local(config.data, config.searchFields, config.titleField);
config.dataService.descriptionField(config.descriptionField);
}
};
CompleterEditorComponent.prototype.onEditedCompleter = function (event) {
this.cell.newValue = event.title;
return false;
};
return CompleterEditorComponent;
}(DefaultEditor));
CompleterEditorComponent.decorators = [
{ type: core.Component, args: [{
selector: 'completer-editor',
template: "\n <ng2-completer [(ngModel)]=\"completerStr\"\n [dataService]=\"cell.getColumn().getConfig().completer.dataService\"\n [minSearchLength]=\"cell.getColumn().getConfig().completer.minSearchLength || 0\"\n [pause]=\"cell.getColumn().getConfig().completer.pause || 0\"\n [placeholder]=\"cell.getColumn().getConfig().completer.placeholder || 'Start typing...'\"\n (selected)=\"onEditedCompleter($event)\">\n </ng2-completer>\n "
},] }
];
CompleterEditorComponent.ctorParameters = function () { return [
{ type: ng2Completer.CompleterService }
]; };
var InputEditorComponent = /** @class */ (function (_super) {
__extends(InputEditorComponent, _super);
function InputEditorComponent() {
return _super.call(this) || this;
}
return InputEditorComponent;
}(DefaultEditor));
InputEditorComponent.decorators = [
{ type: core.Component, args: [{
selector: 'input-editor',
template: "\n <input [ngClass]=\"inputClass\"\n class=\"form-control\"\n [(ngModel)]=\"cell.newValue\"\n [name]=\"cell.getId()\"\n [placeholder]=\"cell.getTitle()\"\n [disabled]=\"!cell.isEditable()\"\n (click)=\"onClick.emit($event)\"\n (keydown.enter)=\"onEdited.emit($event)\"\n (keydown.esc)=\"onStopEditing.emit()\">\n ",
styles: [":host input,:host textarea{line-height:normal;padding:.375em .75em;width:100%}"]
},] }
];
InputEditorComponent.ctorParameters = function () { return []; };
var SelectEditorComponent = /** @class */ (function (_super) {
__extends(SelectEditorComponent, _super);
function SelectEditorComponent() {
return _super.call(this) || this;
}
return SelectEditorComponent;
}(DefaultEditor));
SelectEditorComponent.decorators = [
{ type: core.Component, args: [{
selector: 'select-editor',
template: "\n <select [ngClass]=\"inputClass\"\n class=\"form-control\"\n [(ngModel)]=\"cell.newValue\"\n [name]=\"cell.getId()\"\n [disabled]=\"!cell.isEditable()\"\n (click)=\"onClick.emit($event)\"\n (keydown.enter)=\"onEdited.emit($event)\"\n (keydown.esc)=\"onStopEditing.emit()\">\n\n <option *ngFor=\"let option of cell.getColumn().getConfig()?.list\" [value]=\"option.value\"\n [selected]=\"option.value === cell.getValue()\">{{ option.title }}\n </option>\n </select>\n "
},] }
];
SelectEditorComponent.ctorParameters = function () { return []; };
var TextareaEditorComponent = /** @class */ (function (_super) {
__extends(TextareaEditorComponent, _super);
function TextareaEditorComponent() {
return _super.call(this) || this;
}
return TextareaEditorComponent;
}(DefaultEditor));
TextareaEditorComponent.decorators = [
{ type: core.Component, args: [{
selector: 'textarea-editor',
template: "\n <textarea [ngClass]=\"inputClass\"\n class=\"form-control\"\n [(ngModel)]=\"cell.newValue\"\n [name]=\"cell.getId()\"\n [disabled]=\"!cell.isEditable()\"\n [placeholder]=\"cell.getTitle()\"\n (click)=\"onClick.emit($event)\"\n (keydown.enter)=\"onEdited.emit($event)\"\n (keydown.esc)=\"onStopEditing.emit()\">\n </textarea>\n ",
styles: [":host input,:host textarea{line-height:normal;padding:.375em .75em;width:100%}"]
},] }
];
TextareaEditorComponent.ctorParameters = function () { return []; };
var CustomViewComponent = /** @class */ (function () {
function CustomViewComponent(resolver) {
this.resolver = resolver;
}
CustomViewComponent.prototype.ngOnInit = function () {
if (this.cell && !this.customComponent) {
this.createCustomComponent();
this.callOnComponentInit();
this.patchInstance();
}
};
CustomViewComponent.prototype.ngOnDestroy = function () {
if (this.customComponent) {
this.customComponent.destroy();
}
};
CustomViewComponent.prototype.createCustomComponent = function () {
var componentFactory = this.resolver.resolveComponentFactory(this.cell.getColumn().renderComponent);
this.customComponent = this.dynamicTarget.createComponent(componentFactory);
};
CustomViewComponent.prototype.callOnComponentInit = function () {
var onComponentInitFunction = this.cell.getColumn().getOnComponentInitFunction();
onComponentInitFunction && onComponentInitFunction(this.customComponent.instance);
};
CustomViewComponent.prototype.patchInstance = function () {
Object.assign(this.customComponent.instance, this.getPatch());
};
CustomViewComponent.prototype.getPatch = function () {
return {
value: this.cell.getValue(),
rowData: this.cell.getRow().getData()
};
};
return CustomViewComponent;
}());
CustomViewComponent.decorators = [
{ type: core.Component, args: [{
selector: 'custom-view-component',
template: "\n <ng-template #dynamicTarget></ng-template>\n "
},] }
];
CustomViewComponent.ctorParameters = function () { return [
{ type: core.ComponentFactoryResolver }
]; };
CustomViewComponent.propDecorators = {
cell: [{ type: core.Input }],
dynamicTarget: [{ type: core.ViewChild, args: ['dynamicTarget', { read: core.ViewContainerRef, static: true },] }]
};
var ViewCellComponent = /** @class */ (function () {
function ViewCellComponent() {
}
return ViewCellComponent;
}());
ViewCellComponent.decorators = [
{ type: core.Component, args: [{
selector: 'table-cell-view-mode',
changeDetection: core.ChangeDetectionStrategy.OnPush,
template: "\n <div [ngSwitch]=\"cell.getColumn().type\">\n <custom-view-component *ngSwitchCase=\"'custom'\" [cell]=\"cell\"></custom-view-component>\n <div *ngSwitchCase=\"'html'\" [innerHTML]=\"cell.getValue()\"></div>\n <div *ngSwitchDefault>{{ cell.getValue() }}</div>\n </div>\n "
},] }
];
ViewCellComponent.propDecorators = {
cell: [{ type: core.Input }]
};
var CELL_COMPONENTS = [
CellComponent,
EditCellDefault,
DefaultEditor,
CustomEditComponent,
DefaultEditComponent,
EditCellComponent,
CheckboxEditorComponent,
CompleterEditorComponent,
InputEditorComponent,
SelectEditorComponent,
TextareaEditorComponent,
CustomViewComponent,
ViewCellComponent,
];
var CellModule = /** @class */ (function () {
function CellModule() {
}
return CellModule;
}());
CellModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
forms.FormsModule,
ng2Completer.Ng2CompleterModule,
],
declarations: __spread(CELL_COMPONENTS),
exports: __spread(CELL_COMPONENTS),
},] }
];
var FilterDefault = /** @class */ (function () {
function FilterDefault() {
this.inputClass = '';
this.filter = new core.EventEmitter();
this.query = '';
}
FilterDefault.prototype.onFilter = function (query) {
this.source.addFilter({
field: this.column.id,
search: query,
filter: this.column.getFilterFunction(),
});
};
return FilterDefault;
}());
FilterDefault.decorators = [
{ type: core.Component, args: [{
template: ''
},] }
];
FilterDefault.propDecorators = {
column: [{ type: core.Input }],
source: [{ type: core.Input }],
inputClass: [{ type: core.Input }],
filter: [{ type: core.Output }]
};
var FilterComponent = /** @class */ (function (_super) {
__extends(FilterComponent, _super);
function FilterComponent() {
var _this = _super.apply(this, __spread(arguments)) || this;
_this.query = '';
return _this;
}
FilterComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (changes.source) {
if (!changes.source.firstChange) {
this.dataChangedSub.unsubscribe();
}
this.dataChangedSub = this.source.onChanged().subscribe(function (dataChanges) {
var filterConf = _this.source.getFilter();
if (filterConf && filterConf.filters && filterConf.filters.length === 0) {
_this.query = '';
// add a check for existing filters an set the query if one exists for this column
// this covers instances where the filter is set by user code while maintaining existing functionality
}
else if (filterConf && filterConf.filters && filterConf.filters.length > 0) {
filterConf.filters.forEach(function (k, v) {
if (k.field == _this.column.id) {
_this.query = k.search;
}
});
}
});
}
};
return FilterComponent;
}(FilterDefault));
FilterComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng2-smart-table-filter',
template: "\n <div class=\"ng2-smart-filter\" *ngIf=\"column.isFilterable\" [ngSwitch]=\"column.getFilterType()\">\n <custom-table-filter *ngSwitchCase=\"'custom'\"\n [query]=\"query\"\n [column]=\"column\"\n [source]=\"source\"\n [inputClass]=\"inputClass\"\n (filter)=\"onFilter($event)\">\n </custom-table-filter>\n <default-table-filter *ngSwitchDefault\n [query]=\"query\"\n [column]=\"column\"\n [source]=\"source\"\n [inputClass]=\"inputClass\"\n (filter)=\"onFilter($event)\">\n </default-table-filter>\n </div>\n ",
styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{font-weight:400;line-height:normal;padding:.375em .75em;width:100%}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder,:host .ng2-smart-filter ::ng-deep a{font-weight:400}"]
},] }
];
var DefaultFilterComponent = /** @class */ (function (_super) {
__extends(DefaultFilterComponent, _super);
function DefaultFilterComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
return DefaultFilterComponent;
}(FilterDefault));
DefaultFilterComponent.decorators = [
{ type: core.Component, args: [{
selector: 'default-table-filter',
template: "\n <ng-container [ngSwitch]=\"column.getFilterType()\">\n <select-filter *ngSwitchCase=\"'list'\"\n [query]=\"query\"\n [ngClass]=\"inputClass\"\n [column]=\"column\"\n (filter)=\"onFilter($event)\">\n </select-filter>\n <checkbox-filter *ngSwitchCase=\"'checkbox'\"\n [query]=\"query\"\n [ngClass]=\"inputClass\"\n [column]=\"column\"\n (filter)=\"onFilter($event)\">\n </checkbox-filter>\n <completer-filter *ngSwitchCase=\"'completer'\"\n [query]=\"query\"\n [ngClass]=\"inputClass\"\n [column]=\"column\"\n (filter)=\"onFilter($event)\">\n </completer-filter>\n <input-filter *ngSwitchDefault\n [query]=\"query\"\n [ngClass]=\"inputClass\"\n [column]=\"column\"\n (filter)=\"onFilter($event)\">\n </input-filter>\n </ng-container>\n "
},] }
];
DefaultFilterComponent.propDecorators = {
query: [{ type: core.Input }]
};
var CustomFilterComponent = /** @class */ (function (_super) {
__extends(CustomFilterComponent, _super);
function CustomFilterComponent(resolver) {
var _this = _super.call(this) || this;
_this.resolver = resolver;
return _this;
}
CustomFilterComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (this.column && !this.customComponent) {
var componentFactory = this.resolver.resolveComponentFactory(this.column.filter.component);
this.customComponent = this.dynamicTarget.createComponent(componentFactory);
// set @Inputs and @Outputs of custom component
this.customComponent.instance.query = this.query;
this.customComponent.instance.column = this.column;
this.customComponent.instance.source = this.source;
this.customComponent.instance.inputClass = this.inputClass;
this.customComponent.instance.filter.subscribe(function (event) { return _this.onFilter(event); });
}
if (this.customComponent) {
this.customComponent.instance.ngOnChanges(changes);
}
};
CustomFilterComponent.prototype.ngOnDestroy = function () {
if (this.customComponent) {
this.customComponent.destroy();
}
};
return CustomFilterComponent;
}(FilterDefault));
CustomFilterComponent.decorators = [
{ type: core.Component, args: [{
selector: 'custom-table-filter',
template: "<ng-template #dynamicTarget></ng-template>"
},] }
];
CustomFilterComponent.ctorParameters = function () { return [
{ type: core.ComponentFactoryResolver }
]; };
CustomFilterComponent.propDecorators = {
query: [{ type: core.Input }],
dynamicTarget: [{ type: core.ViewChild, args: ['dynamicTarget', { read: core.ViewContainerRef, static: true },] }]
};
var DefaultFilter = /** @class */ (function () {
function DefaultFilter() {
this.delay = 300;
this.filter = new core.EventEmitter();
}
DefaultFilter.prototype.ngOnDestroy = function () {
if (this.changesSubscription) {
this.changesSubscription.unsubscribe();
}
};
DefaultFilter.prototype.setFilter = function () {
this.filter.emit(this.query);
};
return DefaultFilter;
}());
DefaultFilter.decorators = [
{ type: core.Component, args: [{
template: ''
},] }
];
DefaultFilter.propDecorators = {
query: [{ type: core.Input }],
inputClass: [{ type: core.Input }],
column: [{ type: core.Input }],
filter: [{ type: core.Output }]
};
var CheckboxFilterComponent = /** @class */ (function (_super) {
__extends(CheckboxFilterComponent, _super);
function CheckboxFilterComponent() {
var _this = _super.call(this) || this;
_this.filterActive = false;
_this.inputControl = new forms.FormControl();
return _this;
}
CheckboxFilterComponent.prototype.ngOnInit = function () {
var _this = this;
this.changesSubscription = this.inputControl.valueChanges
.pipe(operators.debounceTime(this.delay))
.subscribe(function (checked) {
_this.filterActive = true;
var trueVal = (_this.column.getFilterConfig() && _this.column.getFilterConfig().true) || true;
var falseVal = (_this.column.getFilterConfig() && _this.column.getFilterConfig().false) || false;
_this.query = checked ? trueVal : falseVal;
_this.setFilter();
});
};
CheckboxFilterComponent.prototype.resetFilter = function (event) {
event.preventDefault();
this.query = '';
this.inputControl.setValue(false, { emitEvent: false });
this.filterActive = false;
this.setFilter();
};
return CheckboxFilterComponent;
}(DefaultFilter));
CheckboxFilterComponent.decorators = [
{ type: core.Component, args: [{
selector: 'checkbox-filter',
template: "\n <input type=\"checkbox\" [formControl]=\"inputControl\" [ngClass]=\"inputClass\" class=\"form-control\">\n <a href=\"#\" *ngIf=\"filterActive\"\n (click)=\"resetFilter($event)\">{{column.getFilterConfig()?.resetText || 'reset'}}</a>\n "
},] }
];
CheckboxFilterComponent.ctorParameters = function () { return []; };
var CompleterFilterComponent = /** @class */ (function (_super) {
__extends(CompleterFilterComponent, _super);
function CompleterFilterComponent(completerService) {
var _this = _super.call(this) || this;
_this.completerService = completerService;
_this.completerContent = new rxjs.Subject();
return _this;
}
CompleterFilterComponent.prototype.ngOnInit = function () {
var _this = this;
var config = this.column.getFilterConfig().completer;
config.dataService = this.completerService.local(config.data, config.searchFields, config.titleField);
config.dataService.descriptionField(config.descriptionField);
this.changesSubscription = this.completerContent
.pipe(operators.map(function (ev) { return (ev && ev.title) || ev || ''; }), operators.distinctUntilChanged(), operators.debounceTime(this.delay))
.subscribe(function (search) {
_this.query = search;
_this.setFilter();
});
};
CompleterFilterComponent.prototype.inputTextChanged = function (event) {
// workaround to trigger the search event when the home/end buttons are clicked
// when this happens the [(ngModel)]="query" is set to "" but the (selected) method is not called
// so here it gets called manually
if (event === '') {
this.completerContent.next(event);
}
};
return CompleterFilterComponent;
}(DefaultFilter));
CompleterFilterComponent.decorators = [
{ type: core.Component, args: [{
selector: 'completer-filter',
template: "\n <ng2-completer [(ngModel)]=\"query\"\n (ngModelChange)=\"inputTextChanged($event)\"\n [dataService]=\"column.getFilterConfig().completer.dataService\"\n [minSearchLength]=\"column.getFilterConfig().completer.minSearchLength || 0\"\n [pause]=\"column.getFilterConfig().completer.pause || 0\"\n [placeholder]=\"column.getFilterConfig().completer.placeholder || 'Start typing...'\"\n (selected)=\"completerContent.next($event)\">\n </ng2-completer>\n "
},] }
];
CompleterFilterComponent.ctorParameters = function () { return [
{ type: ng2Completer.CompleterService }
]; };
var InputFilterComponent = /** @class */ (function (_super) {
__extends(InputFilterComponent, _super);
function InputFilterComponent() {
var _this = _super.call(this) || this;
_this.inputControl = new forms.FormControl();
return _this;
}
InputFilterComponent.prototype.ngOnInit = function () {
var _this = this;
if (this.query) {
this.inputControl.setValue(this.query);
}
this.inputControl.valueChanges
.pipe(operators.distinctUntilChanged(), operators.debounceTime(this.delay))
.subscribe(function (value) {
_this.query = _this.inputControl.value;
_this.setFilter();
});
};
InputFilterComponent.prototype.ngOnChanges = function (changes) {
if (changes.query) {
this.inputControl.setValue(this.query);
}
};
return InputFilterComponent;
}(DefaultFilter));
InputFilterComponent.decorators = [
{ type: core.Component, args: [{
selector: 'input-filter',
template: "\n <input\n [ngClass]=\"inputClass\"\n [formControl]=\"inputControl\"\n class=\"form-control\"\n type=\"text\"\n placeholder=\"{{ column.title }}\"/>\n "
},] }
];
InputFilterComponent.ctorParameters = function () { return []; };
var SelectFilterComponent = /** @class */ (function (_super) {
__extends(SelectFilterComponent, _super);
function SelectFilterComponent() {
return _super.call(this) || this;
}
SelectFilterComponent.prototype.ngOnInit = function () {
var _this = this;
this.inputControl.valueChanges
.pipe(operators.skip(1), operators.distinctUntilChanged(), operators.debounceTime(this.delay))
.subscribe(function (value) { return _this.setFilter(); });
};
return SelectFilterComponent;
}(DefaultFilter));
SelectFilterComponent.decorators = [
{ type: core.Component, args: [{
selector: 'select-filter',
template: "\n <select [ngClass]=\"inputClass\"\n class=\"form-control\"\n #inputControl\n [(ngModel)]=\"query\">\n\n <option value=\"\">{{ column.getFilterConfig().selectText }}</option>\n <option *ngFor=\"let option of column.getFilterConfig().list\" [value]=\"option.value\">\n {{ option.title }}\n </option>\n </select>\n "
},] }
];
SelectFilterComponent.ctorParameters = function () { return []; };
SelectFilterComponent.propDecorators = {
inputControl: [{ type: core.ViewChild, args: ['inputControl', { read: forms.NgControl, static: true },] }]
};
var FILTER_COMPONENTS = [
FilterDefault,
DefaultFilter,
FilterComponent,
DefaultFilterComponent,
CustomFilterComponent,
CheckboxFilterComponent,
CompleterFilterComponent,
InputFilterComponent,
SelectFilterComponent,
];
var FilterModule = /** @class */ (function () {
function FilterModule() {
}
return FilterModule;
}());
FilterModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
forms.FormsModule,
forms.ReactiveFormsModule,
ng2Completer.Ng2CompleterModule,
],
declarations: __spread(FILTER_COMPONENTS),
exports: __spread(FILTER_COMPONENTS),
},] }
];
var PagerComponent = /** @class */ (function () {
function PagerComponent()