ng2-json-editor
Version:
Angular2 component for editing large json documents
48 lines • 2.61 kB
JavaScript
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { DomUtilService, EmptyValueService, JsonStoreService, PathUtilService, KeysStoreService } from '../shared/services';
var AddNewElementButtonComponent = (function () {
function AddNewElementButtonComponent(domUtilService, emptyValueService, jsonStoreService, pathUtilService, keyStoreService) {
this.domUtilService = domUtilService;
this.emptyValueService = emptyValueService;
this.jsonStoreService = jsonStoreService;
this.pathUtilService = pathUtilService;
this.keyStoreService = keyStoreService;
}
AddNewElementButtonComponent.prototype.addNewElement = function () {
var _this = this;
var itemSchema = this.schema.items;
var emptyValue = this.emptyValueService.generateEmptyValue(itemSchema);
var values = this.jsonStoreService.getIn(this.path);
var insertIndex = values ? values.size : 0;
var insertPath = this.path.concat(insertIndex);
this.jsonStoreService.addIn(insertPath, emptyValue);
// focus on the new added element
var insertPathString = this.pathUtilService.toPathString(insertPath);
setTimeout(function () {
_this.domUtilService.focusAndSelectFirstEditableChildById(insertPathString);
});
};
return AddNewElementButtonComponent;
}());
export { AddNewElementButtonComponent };
AddNewElementButtonComponent.decorators = [
{ type: Component, args: [{
selector: 'add-new-element-button',
styles: ["div.button-container { display: inline-block; width: 100%; } .btn-new-field { font-size: 13px; font-weight: bold; text-shadow: 0 1px 0 #fff; opacity: 0.5; background: transparent; border: 0; bottom: -5px; left: -5px; padding: 0px; } .btn-new-field:hover { color: green !important; opacity: 0.6; } "],
template: "<div [class.disabled]=\"schema.disabled\" class=\"button-container\"> <button type=\"button\" class=\"btn-new-field\" (click)=\"addNewElement()\">Add new</button> </div>",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
AddNewElementButtonComponent.ctorParameters = function () { return [
{ type: DomUtilService, },
{ type: EmptyValueService, },
{ type: JsonStoreService, },
{ type: PathUtilService, },
{ type: KeysStoreService, },
]; };
AddNewElementButtonComponent.propDecorators = {
'path': [{ type: Input },],
'schema': [{ type: Input },],
};
//# sourceMappingURL=add-new-element-button.component.js.map