ngx-json-builder
Version:
## About this repository This is a fork of mariohmol's [ang-jsoneditor](https://github.com/mariohmol/ang-jsoneditor) with support for Angular 16. This repository will probably become stale, when the original will be actively maintained again.
260 lines (253 loc) • 8.73 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, ChangeDetectionStrategy, ViewChild, Input, Output, NgModule } from '@angular/core';
import JSONEditor from 'jsoneditor';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class JsonEditorOptions {
constructor() {
this.enableSort = true;
this.enableTransform = true;
this.escapeUnicode = false;
this.expandAll = false;
this.sortObjectKeys = false;
this.history = true;
this.mode = 'tree';
this.search = true;
this.indentation = 2;
}
}
class JsonEditorComponent {
constructor() {
this.id = 'angjsoneditor' + Math.floor(Math.random() * 1000000);
this.disabled = false;
this.isFocused = false;
this.optionsChanged = false;
this._data = {};
this.options = new JsonEditorOptions();
this.debug = false;
this.change = new EventEmitter();
this.jsonChange = new EventEmitter();
// Implemented as part of ControlValueAccessor.
this.onTouched = () => { };
// Implemented as part of ControlValueAccessor.
this.onChangeModel = (e) => { };
}
set data(value) {
this._data = value;
if (this.editor) {
this.editor.destroy();
this.ngOnInit();
}
}
ngOnInit() {
let optionsBefore = this.options;
if (!this.optionsChanged && this.editor) {
optionsBefore = this.editor.options;
}
if (!this.options.onChangeJSON && this.jsonChange) {
this.options.onChangeJSON = this.onChangeJSON.bind(this);
}
if (!this.options.onChange && this.change) {
this.options.onChange = this.onChange.bind(this);
}
const optionsCopy = Object.assign({}, optionsBefore);
// expandAll is an option only supported by ngx-json-builder and not by the the original jsoneditor.
delete optionsCopy.expandAll;
if (this.debug) {
console.log(optionsCopy, this._data);
}
if (!this.jsonEditorContainer.nativeElement) {
console.error(`Can't find the ElementRef reference for jsoneditor)`);
}
if (optionsCopy.mode === 'text' || optionsCopy.mode === 'code') {
optionsCopy.onChangeJSON = null;
}
this.editor = new JSONEditor(this.jsonEditorContainer.nativeElement, optionsCopy, this._data);
if (this.options.expandAll) {
this.editor.expandAll();
}
}
ngOnDestroy() {
this.destroy();
}
/**
* ngModel
* ControlValueAccessor
*/
// ControlValueAccessor implementation
writeValue(value) {
this.data = value;
}
// Implemented as part of ControlValueAccessor
registerOnChange(fn) {
this.onChangeModel = fn;
}
// Implemented as part of ControlValueAccessor.
registerOnTouched(fn) {
this.onTouched = fn;
}
// Implemented as part of ControlValueAccessor.
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
onChange(e) {
if (this.editor) {
try {
const json = this.editor.get();
this.onChangeModel(json);
this.change.emit(json);
}
catch (e) {
if (this.debug) {
console.log(e);
}
}
}
}
onChangeJSON(e) {
if (this.editor) {
try {
this.jsonChange.emit(this.editor.get());
}
catch (e) {
if (this.debug) {
console.log(e);
}
}
}
}
/**
* JSON EDITOR FUNCTIONS
*/
collapseAll() {
this.editor.collapseAll();
}
expandAll() {
this.editor.expandAll();
}
focus() {
this.editor.focus();
}
get() {
return this.editor.get();
}
getMode() {
return this.editor.getMode();
}
getName() {
return this.editor.getName();
}
getText() {
return this.editor.getText();
}
set(json) {
this.editor.set(json);
}
setMode(mode) {
this.editor.setMode(mode);
}
setName(name) {
this.editor.setName(name);
}
setSelection(start, end) {
this.editor.setSelection(start, end);
}
getSelection() {
return this.editor.getSelection();
}
getValidateSchema() {
return this.editor.validateSchema;
}
setSchema(schema, schemaRefs) {
this.editor.setSchema(schema, schemaRefs);
}
search(query) {
this.editor.search(query);
}
setOptions(newOptions) {
if (this.editor) {
this.editor.destroy();
}
this.optionsChanged = true;
this.options = newOptions;
this.ngOnInit();
}
update(json) {
this.editor.update(json);
}
destroy() {
var _a;
(_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
}
getEditor() {
return this.editor;
}
isValidJson() {
try {
JSON.parse(this.getText());
return true;
}
catch (e) {
return false;
}
}
}
JsonEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: JsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
JsonEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: JsonEditorComponent, selector: "json-editor", inputs: { options: "options", data: "data", debug: "debug" }, outputs: { change: "change", jsonChange: "jsonChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => JsonEditorComponent),
multi: true
}
], viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true, static: true }], ngImport: i0, template: `<div [id]="id" #jsonEditorContainer></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: JsonEditorComponent, decorators: [{
type: Component,
args: [{
// tslint:disable-next-line:component-selector
selector: 'json-editor',
template: `<div [id]="id" #jsonEditorContainer></div>`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => JsonEditorComponent),
multi: true
}
],
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return []; }, propDecorators: { jsonEditorContainer: [{
type: ViewChild,
args: ['jsonEditorContainer', { static: true }]
}], options: [{
type: Input
}], data: [{
type: Input,
args: ['data']
}], debug: [{
type: Input
}], change: [{
type: Output
}], jsonChange: [{
type: Output
}] } });
class NgxJsonBuilderModule {
}
NgxJsonBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxJsonBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxJsonBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: NgxJsonBuilderModule, declarations: [JsonEditorComponent], exports: [JsonEditorComponent] });
NgxJsonBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxJsonBuilderModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxJsonBuilderModule, decorators: [{
type: NgModule,
args: [{
declarations: [JsonEditorComponent],
imports: [],
exports: [JsonEditorComponent],
}]
}] });
/*
* Public API Surface of ngx-json-builder
*/
/**
* Generated bundle index. Do not edit.
*/
export { JsonEditorComponent, JsonEditorOptions, NgxJsonBuilderModule };
//# sourceMappingURL=ngx-json-builder.mjs.map