UNPKG

ng2-smart-table-custom

Version:

Angular Smart Table with inline-validations support

1,098 lines (1,081 loc) 166 kB
/** * @license ng2-smart-table v1.2.1 * Copyright (c) 2017 Akveo. https://akveo.github.io/ng2-smart-table/ * License: MIT */ (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/Subject'), require('lodash'), require('rxjs/add/operator/debounceTime'), require('rxjs/add/operator/distinctUntilChanged'), require('rxjs/add/operator/skip'), require('@angular/http'), require('rxjs/add/operator/toPromise')) : typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'ng2-completer', 'rxjs/Subject', 'lodash', 'rxjs/add/operator/debounceTime', 'rxjs/add/operator/distinctUntilChanged', 'rxjs/add/operator/skip', '@angular/http', 'rxjs/add/operator/toPromise'], factory) : (factory((global['ng2-smart-table'] = global['ng2-smart-table'] || {}),global.ng.core,global.ng.common,global.ng.forms,global.ng2completer,global.Rx,global.lodash,global.Rx.Observable.prototype,global.Rx.Observable.prototype,global.Rx.Observable.prototype,global.ng.http)); }(this, (function (exports,_angular_core,_angular_common,_angular_forms,ng2Completer,rxjs_Subject,lodash,rxjs_add_operator_debounceTime,rxjs_add_operator_distinctUntilChanged,rxjs_add_operator_skip,_angular_http) { 'use strict'; /** * Extending object that entered in first argument. * * Returns extended object or false if have no target object or incorrect type. * * If you wish to clone source object (without modify it), just use empty new * object as first argument, like this: * deepExtend({}, yourObj_1, [yourObj_N]); */ function deepExtend() { var objects = []; for (var _i = 0; _i < arguments.length; _i++) { objects[_i] = arguments[_i]; } if (arguments.length < 1 || typeof arguments[0] !== 'object') { return false; } if (arguments.length < 2) { return arguments[0]; } var target = arguments[0]; // convert arguments to array and cut off target object var args = Array.prototype.slice.call(arguments, 1); var val, src; args.forEach(function (obj) { // skip argument if it is array or isn't object if (typeof obj !== 'object' || Array.isArray(obj)) { return; } Object.keys(obj).forEach(function (key) { src = target[key]; // source value val = obj[key]; // new value // recursion prevention if (val === target) { return; /** * if new value isn't object then just overwrite by new value * instead of extending. */ } else if (typeof val !== 'object' || val === null) { target[key] = val; return; // just clone arrays (and recursive clone objects inside) } else if (Array.isArray(val)) { target[key] = lodash.cloneDeep(val); return; // overwrite by new value if source isn't object or array } else if (typeof src !== 'object' || src === null || Array.isArray(src)) { target[key] = deepExtend({}, val); return; // source value and new value is objects both, extending... } else { target[key] = deepExtend(src, val); return; } }); }); return target; } var Deferred = (function () { function Deferred() { var _this = this; this.promise = new Promise(function (resolve, reject) { _this.resolve = resolve; _this.reject = reject; }); } return Deferred; }()); // getDeepFromObject({result: {data: 1}}, 'result.data', 2); // returns 1 function getDeepFromObject(object, name, defaultValue) { if (object === void 0) { object = {}; } var keys = name.split('.'); // clone the object var level = deepExtend({}, object); keys.forEach(function (k) { if (level && typeof level[k] !== 'undefined') { level = level[k]; } }); return typeof level === 'undefined' ? defaultValue : level; } var Cell = (function () { function Cell(value, row, column, dataSet) { this.value = value; this.row = row; this.column = column; this.dataSet = dataSet; this.newValue = ''; this.newValue = value; } Cell.prototype.getColumn = function () { return this.column; }; Cell.prototype.getValidator = function () { return this.dataSet.getRowValidator(this.getRow().index).controls[this.getId()]; }; Cell.prototype.getRow = function () { return this.row; }; Cell.prototype.getValue = function () { var valid = this.column.getValuePrepareFunction() instanceof Function; var prepare = valid ? this.column.getValuePrepareFunction() : Cell.PREPARE; return prepare.call(null, this.value, this.row.getData()); }; Cell.prototype.setValue = function (value) { this.newValue = value; }; Cell.prototype.getId = function () { return this.getColumn().id; }; Cell.prototype.getTitle = function () { return this.getColumn().title; }; Cell.prototype.isEditable = function () { if (this.getRow().index === -1) { return this.getColumn().isAddable; } else { return this.getColumn().isEditable; } }; return Cell; }()); Cell.PREPARE = function (value) { return value; }; var Row = (function () { function Row(index, data, _dataSet) { this.index = index; this.data = data; this._dataSet = _dataSet; this.isSelected = false; this.isInEditing = false; this.cells = []; this.process(); } Row.prototype.getCell = function (column) { return this.cells.find(function (el) { return el.getColumn() === column; }); }; Row.prototype.getCells = function () { return this.cells; }; Row.prototype.getData = function () { return this.data; }; Row.prototype.getIsSelected = function () { return this.isSelected; }; Row.prototype.getNewData = function () { var values = Object.assign({}, this.data); this.getCells().forEach(function (cell) { return values[cell.getColumn().id] = cell.newValue; }); return values; }; Row.prototype.setData = function (data) { this.data = data; this.process(); }; Row.prototype.process = function () { var _this = this; this.cells = []; this._dataSet.getColumns().forEach(function (column) { var cell = _this.createCell(column); _this.cells.push(cell); }); }; Row.prototype.createCell = function (column) { var defValue = column.settings.defaultValue ? column.settings.defaultValue : ''; var value = typeof this.data[column.id] === 'undefined' ? defValue : this.data[column.id]; return new Cell(value, this, column, this._dataSet); }; return Row; }()); var Column = (function () { function Column(id, settings, dataSet) { this.id = id; this.settings = settings; this.dataSet = dataSet; this.title = ''; this.type = ''; this.class = ''; this.width = ''; this.isSortable = false; this.isEditable = true; this.isAddable = true; this.isFilterable = false; this.sortDirection = ''; this.defaultSortDirection = ''; this.editor = { type: '', config: {}, component: null }; this.filter = { type: '', config: {} }; this.renderComponent = null; this.process(); } Column.prototype.getOnComponentInitFunction = function () { return this.onComponentInitFunction; }; Column.prototype.getCompareFunction = function () { return this.compareFunction; }; Column.prototype.getValuePrepareFunction = function () { return this.valuePrepareFunction; }; Column.prototype.getFilterFunction = function () { return this.filterFunction; }; Column.prototype.getConfig = function () { return this.editor && this.editor.config; }; Column.prototype.getFilterType = function () { return this.filter && this.filter.type; }; Column.prototype.getFilterConfig = function () { return this.filter && this.filter.config; }; Column.prototype.process = function () { this.title = this.settings['title']; this.class = this.settings['class']; this.width = this.settings['width']; this.type = this.prepareType(); this.editor = this.settings['editor']; this.filter = this.settings['filter']; this.renderComponent = this.settings['renderComponent']; this.isFilterable = typeof this.settings['filter'] === 'undefined' ? true : !!this.settings['filter']; this.defaultSortDirection = ['asc', 'desc'] .indexOf(this.settings['sortDirection']) !== -1 ? this.settings['sortDirection'] : ''; this.isSortable = typeof this.settings['sort'] === 'undefined' ? true : !!this.settings['sort']; this.isEditable = typeof this.settings['editable'] === 'undefined' ? true : !!this.settings['editable']; this.isAddable = typeof this.settings['addable'] === 'undefined' ? true : !!this.settings['addable']; this.sortDirection = this.prepareSortDirection(); this.compareFunction = this.settings['compareFunction']; this.valuePrepareFunction = this.settings['valuePrepareFunction']; this.filterFunction = this.settings['filterFunction']; this.onComponentInitFunction = this.settings['onComponentInitFunction']; }; Column.prototype.prepareType = function () { return this.settings['type'] || this.determineType(); }; Column.prototype.prepareSortDirection = function () { return this.settings['sort'] === 'desc' ? 'desc' : 'asc'; }; Column.prototype.determineType = function () { // TODO: determine type by data return 'text'; }; return Column; }()); var DataSet = (function () { function DataSet(data, columnSettings, validator) { if (data === void 0) { data = []; } this.columnSettings = columnSettings; this.validator = validator; this.data = []; this.columns = []; this.rows = []; this.willSelect = 'first'; this.createColumns(columnSettings); this.setData(data); this.createNewRowValidator(); this.createNewRow(); } DataSet.prototype.addDefaultsToFormGroup = function (formGroup) { if (this.columnSettings) for (var id in this.columnSettings) if (!formGroup.controls[id] && this.columnSettings.hasOwnProperty(id)) formGroup.controls[id] = new _angular_forms.FormControl(); return formGroup; }; DataSet.prototype.createNewRowValidator = function () { this.newRowValidator = this.addDefaultsToFormGroup(this.validator.getFormGroup()); }; DataSet.prototype.createEditRowValidators = function () { var _this = this; this.editRowValidators = new Array(); this.data.forEach(function () { _this.editRowValidators.push(_this.addDefaultsToFormGroup(_this.validator.getFormGroup())); }); }; DataSet.prototype.setData = function (data) { this.data = data; this.createRows(); this.createEditRowValidators(); }; DataSet.prototype.getColumns = function () { return this.columns; }; DataSet.prototype.getRows = function () { return this.rows; }; DataSet.prototype.getFirstRow = function () { return this.rows[0]; }; DataSet.prototype.getLastRow = function () { return this.rows[this.rows.length - 1]; }; DataSet.prototype.getRowValidator = function (index) { if (index === -1) return this.newRowValidator; else return this.editRowValidators[index]; }; DataSet.prototype.findRowByData = function (data) { return this.rows.find(function (row) { return row.getData() === data; }); }; DataSet.prototype.deselectAll = function () { this.rows.forEach(function (row) { row.isSelected = false; }); }; DataSet.prototype.selectRow = function (row) { var previousIsSelected = row.isSelected; this.deselectAll(); row.isSelected = !previousIsSelected; this.selectedRow = row; return this.selectedRow; }; DataSet.prototype.multipleSelectRow = function (row) { row.isSelected = !row.isSelected; this.selectedRow = row; return this.selectedRow; }; DataSet.prototype.selectPreviousRow = function () { if (this.rows.length > 0) { var index = this.selectedRow ? this.selectedRow.index : 0; if (index > this.rows.length - 1) { index = this.rows.length - 1; } this.selectRow(this.rows[index]); return this.selectedRow; } }; DataSet.prototype.selectFirstRow = function () { if (this.rows.length > 0) { this.selectRow(this.rows[0]); return this.selectedRow; } }; DataSet.prototype.selectLastRow = function () { if (this.rows.length > 0) { this.selectRow(this.rows[this.rows.length - 1]); return this.selectedRow; } }; DataSet.prototype.willSelectFirstRow = function () { this.willSelect = 'first'; }; DataSet.prototype.willSelectLastRow = function () { this.willSelect = 'last'; }; DataSet.prototype.select = function () { if (this.getRows().length === 0) { return; } if (this.willSelect) { if (this.willSelect === 'first') { this.selectFirstRow(); } if (this.willSelect === 'last') { this.selectLastRow(); } this.willSelect = ''; } else { this.selectFirstRow(); } return this.selectedRow; }; DataSet.prototype.addInsertedRowValidator = function () { this.newRowValidator.reset(); this.editRowValidators = [this.addDefaultsToFormGroup(this.validator.getFormGroup())].concat(this.editRowValidators); }; DataSet.prototype.createNewRow = function () { this.newRow = new Row(-1, {}, this); this.newRow.isInEditing = true; }; /** * Create columns by mapping from the settings * @param settings * @private */ DataSet.prototype.createColumns = function (settings) { for (var id in settings) { if (settings.hasOwnProperty(id)) { this.columns.push(new Column(id, settings[id], this)); } } }; /** * Create rows based on current data prepared in data source * @private */ DataSet.prototype.createRows = function () { var _this = this; this.rows = []; this.data.forEach(function (el, index) { _this.rows.push(new Row(index, el, _this)); }); }; return DataSet; }()); var Grid = (function () { function Grid(source, settings, validator) { this.createFormShown = false; this.onSelectRowSource = new rxjs_Subject.Subject(); this.setSettings(settings, validator); this.setSource(source); } Grid.prototype.showActionColumn = function (position) { return this.isCurrentActionsPosition(position) && this.isActionsVisible(); }; Grid.prototype.isCurrentActionsPosition = function (position) { return position == this.getSetting('actions.position'); }; Grid.prototype.isActionsVisible = function () { return this.getSetting('actions.add') || this.getSetting('actions.edit') || this.getSetting('actions.delete') || this.getSetting('actions.custom').length; }; Grid.prototype.isMultiSelectVisible = function () { return this.getSetting('selectMode') === 'multi'; }; Grid.prototype.getNewRow = function () { return this.dataSet.newRow; }; Grid.prototype.setSettings = function (settings, validator) { this.settings = settings; this.createFormShown = this.getSetting('add.createFormShownAlways') || this.getSetting('add.createFormShownInitial'); this.dataSet = new DataSet([], this.getSetting('columns'), validator); if (this.source) { this.source.refresh(); } }; Grid.prototype.getDataSet = function () { return this.dataSet; }; Grid.prototype.setSource = function (source) { var _this = this; this.source = this.prepareSource(source); this.source.onChanged().subscribe(function (changes) { return _this.processDataChange(changes); }); this.source.onUpdated().subscribe(function (data) { var changedRow = _this.dataSet.findRowByData(data); changedRow.setData(data); }); }; Grid.prototype.getSetting = function (name, defaultValue) { return getDeepFromObject(this.settings, name, defaultValue); }; Grid.prototype.getColumns = function () { return this.dataSet.getColumns(); }; Grid.prototype.getRows = function () { return this.dataSet.getRows(); }; Grid.prototype.selectRow = function (row) { this.dataSet.selectRow(row); }; Grid.prototype.multipleSelectRow = function (row) { this.dataSet.multipleSelectRow(row); }; Grid.prototype.onSelectRow = function () { return this.onSelectRowSource.asObservable(); }; Grid.prototype.edit = function (row) { row.isInEditing = true; }; Grid.prototype.create = function (row, confirmEmitter) { var _this = this; var deferred = new Deferred(); deferred.promise.then(function (newData) { newData = newData ? newData : row.getNewData(); if (deferred.resolve.skipAdd) { if (!_this.getSetting('add.createFormShownAlways')) _this.createFormShown = false; } else { _this.insert(newData); } }).catch(function (err) { // doing nothing }); if (this.getSetting('add.confirmCreate')) { confirmEmitter.emit({ newData: row.getNewData(), source: this.source, confirm: deferred, validator: this.dataSet.newRowValidator, }); } else { if (this.dataSet.newRowValidator.invalid) deferred.reject(); else deferred.resolve(); } }; Grid.prototype.insert = function (newData) { var _this = this; this.source[this.getSetting('add.insertMethod')](newData).then(function () { if (!_this.getSetting('add.createFormShownAlways')) _this.createFormShown = false; _this.dataSet.addInsertedRowValidator(); _this.dataSet.createNewRow(); }); }; Grid.prototype.save = function (row, confirmEmitter) { var _this = this; var deferred = new Deferred(); deferred.promise.then(function (newData) { newData = newData ? newData : row.getNewData(); if (deferred.resolve.skipEdit) { row.isInEditing = false; } else { _this.source.update(row.getData(), newData).then(function () { row.isInEditing = false; _this.dataSet.newRowValidator.reset(); }); } }).catch(function (err) { // doing nothing }); if (this.getSetting('edit.confirmSave')) { confirmEmitter.emit({ data: row.getData(), newData: row.getNewData(), source: this.source, confirm: deferred, validator: this.dataSet.getRowValidator(row.index), }); } else { if (this.dataSet.getRowValidator(row.index).invalid) deferred.reject(); else deferred.resolve(); } }; Grid.prototype.delete = function (row, confirmEmitter) { var _this = this; var deferred = new Deferred(); deferred.promise.then(function () { _this.source.remove(row.getData()); _this.dataSet.editRowValidators = _this.dataSet.editRowValidators.splice(row.index, 1); }).catch(function (err) { // doing nothing }); if (this.getSetting('delete.confirmDelete')) { confirmEmitter.emit({ data: row.getData(), source: this.source, confirm: deferred, }); } else { deferred.resolve(); } }; Grid.prototype.processDataChange = function (changes) { if (this.shouldProcessChange(changes)) { this.dataSet.setData(changes['elements']); if (this.getSetting('selectMode') !== 'multi') { var row = this.determineRowToSelect(changes); if (row) { this.onSelectRowSource.next(row); } } } }; Grid.prototype.shouldProcessChange = function (changes) { if (['filter', 'sort', 'page', 'remove', 'refresh', 'load', 'paging'].indexOf(changes['action']) !== -1) { return true; } else if (['prepend', 'append'].indexOf(changes['action']) !== -1 && !this.getSetting('pager.display')) { return true; } return false; }; // TODO: move to selectable? Separate directive Grid.prototype.determineRowToSelect = function (changes) { if (['load', 'page', 'filter', 'sort', 'refresh'].indexOf(changes['action']) !== -1) { return this.dataSet.select(); } if (changes['action'] === 'remove') { if (changes['elements'].length === 0) { // we have to store which one to select as the data will be reloaded this.dataSet.willSelectLastRow(); } else { return this.dataSet.selectPreviousRow(); } } if (changes['action'] === 'append') { // we have to store which one to select as the data will be reloaded this.dataSet.willSelectLastRow(); } if (changes['action'] === 'add') { return this.dataSet.selectFirstRow(); } if (changes['action'] === 'update') { return this.dataSet.selectFirstRow(); } if (changes['action'] === 'prepend') { // we have to store which one to select as the data will be reloaded this.dataSet.willSelectFirstRow(); } return null; }; Grid.prototype.prepareSource = function (source) { var initialSource = this.getInitialSort(); if (initialSource && initialSource['field'] && initialSource['direction']) { source.setSort([initialSource], false); } if (this.getSetting('pager.display') === true) { source.setPaging(1, this.getSetting('pager.perPage'), false); } source.refresh(); return source; }; Grid.prototype.getInitialSort = function () { var sortConf = {}; this.getColumns().forEach(function (column) { if (column.isSortable && column.defaultSortDirection) { sortConf['field'] = column.id; sortConf['direction'] = column.defaultSortDirection; sortConf['compare'] = column.getCompareFunction(); } }); return sortConf; }; Grid.prototype.getSelectedRows = function () { return this.dataSet.getRows() .filter(function (r) { return r.isSelected; }); }; Grid.prototype.selectAllRows = function (status) { this.dataSet.getRows() .forEach(function (r) { return r.isSelected = status; }); }; Grid.prototype.getFirstRow = function () { return this.dataSet.getFirstRow(); }; Grid.prototype.getLastRow = function () { return this.dataSet.getLastRow(); }; return Grid; }()); var __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var CellComponent = (function () { function CellComponent() { this.inputClass = ''; this.mode = 'inline'; this.isInEditing = false; this.edited = new _angular_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; }()); __decorate$2([ _angular_core.Input(), __metadata("design:type", Grid) ], CellComponent.prototype, "grid", void 0); __decorate$2([ _angular_core.Input(), __metadata("design:type", Row) ], CellComponent.prototype, "row", void 0); __decorate$2([ _angular_core.Input(), __metadata("design:type", _angular_core.EventEmitter) ], CellComponent.prototype, "editConfirm", void 0); __decorate$2([ _angular_core.Input(), __metadata("design:type", _angular_core.EventEmitter) ], CellComponent.prototype, "createConfirm", void 0); __decorate$2([ _angular_core.Input(), __metadata("design:type", Boolean) ], CellComponent.prototype, "isNew", void 0); __decorate$2([ _angular_core.Input(), __metadata("design:type", Cell) ], CellComponent.prototype, "cell", void 0); __decorate$2([ _angular_core.Input(), __metadata("design:type", String) ], CellComponent.prototype, "inputClass", void 0); __decorate$2([ _angular_core.Input(), __metadata("design:type", String) ], CellComponent.prototype, "mode", void 0); __decorate$2([ _angular_core.Input(), __metadata("design:type", Boolean) ], CellComponent.prototype, "isInEditing", void 0); __decorate$2([ _angular_core.Output(), __metadata("design:type", Object) ], CellComponent.prototype, "edited", void 0); CellComponent = __decorate$2([ _angular_core.Component({ 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); var __decorate$4 = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata$2 = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var EditCellDefault = (function () { function EditCellDefault() { this.inputClass = ''; this.edited = new _angular_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; }()); __decorate$4([ _angular_core.Input(), __metadata$2("design:type", Cell) ], EditCellDefault.prototype, "cell", void 0); __decorate$4([ _angular_core.Input(), __metadata$2("design:type", String) ], EditCellDefault.prototype, "inputClass", void 0); __decorate$4([ _angular_core.Output(), __metadata$2("design:type", Object) ], EditCellDefault.prototype, "edited", void 0); var __extends = (this && this.__extends) || (function () { var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); var __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata$1 = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var CustomEditComponent = (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)); __decorate$3([ _angular_core.ViewChild('dynamicTarget', { read: _angular_core.ViewContainerRef }), __metadata$1("design:type", Object) ], CustomEditComponent.prototype, "dynamicTarget", void 0); CustomEditComponent = __decorate$3([ _angular_core.Component({ selector: 'table-cell-custom-editor', template: "\n <ng-template #dynamicTarget></ng-template>\n ", }), __metadata$1("design:paramtypes", [_angular_core.ComponentFactoryResolver]) ], CustomEditComponent); var __extends$1 = (this && this.__extends) || (function () { var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); var __decorate$5 = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata$3 = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var DefaultEditComponent = (function (_super) { __extends$1(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 = __decorate$5([ _angular_core.Component({ selector: 'table-cell-default-editor', template: "<div [ngSwitch]=\"getEditorType()\"><select-editor *ngSwitchCase=\"'list'\" [cell]=\"cell\" [inputClass]=\"inputClass\" (onClick)=\"onClick($event)\" (onEdited)=\"onEdited($event)\" (onStopEditing)=\"onStopEditing()\"></select-editor><textarea-editor *ngSwitchCase=\"'textarea'\" [cell]=\"cell\" [inputClass]=\"inputClass\" (onClick)=\"onClick($event)\" (onEdited)=\"onEdited($event)\" (onStopEditing)=\"onStopEditing()\"></textarea-editor><checkbox-editor *ngSwitchCase=\"'checkbox'\" [cell]=\"cell\" [inputClass]=\"inputClass\" (onClick)=\"onClick($event)\"></checkbox-editor><completer-editor *ngSwitchCase=\"'completer'\" [cell]=\"cell\"></completer-editor><input-editor *ngSwitchDefault [cell]=\"cell\" [inputClass]=\"inputClass\" (onClick)=\"onClick($event)\" (onEdited)=\"onEdited($event)\" (onStopEditing)=\"onStopEditing()\"></input-editor></div>", }), __metadata$3("design:paramtypes", []) ], DefaultEditComponent); var __decorate$6 = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata$4 = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var EditCellComponent = (function () { function EditCellComponent() { this.inputClass = ''; this.edited = new _angular_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; }()); __decorate$6([ _angular_core.Input(), __metadata$4("design:type", Cell) ], EditCellComponent.prototype, "cell", void 0); __decorate$6([ _angular_core.Input(), __metadata$4("design:type", String) ], EditCellComponent.prototype, "inputClass", void 0); __decorate$6([ _angular_core.Output(), __metadata$4("design:type", Object) ], EditCellComponent.prototype, "edited", void 0); EditCellComponent = __decorate$6([ _angular_core.Component({ 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); var __decorate$8 = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata$6 = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var DefaultEditor = (function () { function DefaultEditor() { this.onStopEditing = new _angular_core.EventEmitter(); this.onEdited = new _angular_core.EventEmitter(); this.onClick = new _angular_core.EventEmitter(); } return DefaultEditor; }()); __decorate$8([ _angular_core.Input(), __metadata$6("design:type", Cell) ], DefaultEditor.prototype, "cell", void 0); __decorate$8([ _angular_core.Input(), __metadata$6("design:type", String) ], DefaultEditor.prototype, "inputClass", void 0); __decorate$8([ _angular_core.Output(), __metadata$6("design:type", Object) ], DefaultEditor.prototype, "onStopEditing", void 0); __decorate$8([ _angular_core.Output(), __metadata$6("design:type", Object) ], DefaultEditor.prototype, "onEdited", void 0); __decorate$8([ _angular_core.Output(), __metadata$6("design:type", Object) ], DefaultEditor.prototype, "onClick", void 0); var __extends$2 = (this && this.__extends) || (function () { var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); var __decorate$7 = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata$5 = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var CheckboxEditorComponent = (function (_super) { __extends$2(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 = __decorate$7([ _angular_core.Component({ selector: 'checkbox-editor', styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em} /*# sourceMappingURL=editor.component.css.map */ "], template: "\n <input [ngClass]=\"inputClass\"\n type=\"checkbox\"\n class=\"form-control\"\n [formControl]=\"cell.getValidator()\"\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 ", }), __metadata$5("design:paramtypes", []) ], CheckboxEditorComponent); var __extends$3 = (this && this.__extends) || (function () { var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); var __decorate$9 = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata$7 = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var CompleterEditorComponent = (function (_super) { __extends$3(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 = __decorate$9([ _angular_core.Component({ selector: 'completer-editor', template: "\n <ng2-completer [(ngModel)]=\"completerStr\"\n [formControl]=\"cell.getValidator()\"\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 ", }), __metadata$7("design:paramtypes", [ng2Completer.CompleterService]) ], CompleterEditorComponent); var __extends$4 = (this && this.__extends) || (function () { var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); var __decorate$10 = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata$8 = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var InputEditorComponent = (function (_super) { __extends$4(InputEditorComponent, _super); function InputEditorComponent() { return _super.call(this) || this; } return InputEditorComponent; }(DefaultEditor)); InputEditorComponent = __decorate$10([ _angular_core.Component({ selector: 'input-editor', styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em} /*# sourceMappingURL=editor.component.css.map */ "], template: "\n <input [ngClass]=\"inputClass\"\n class=\"form-control\"\n [formControl]=\"cell.getValidator()\"\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 ", }), __metadata$8("design:paramtypes", []) ], InputEditorComponent); var __extends$5 = (this && this.__extends) || (function () { var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); var __decorate$11 = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata$9 = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var SelectEditorComponent = (function (_super) { __extends$5(SelectEditorComponent, _super); function SelectEditorComponent() { return _super.call(this) || this; } return SelectEditorCom