ng-json-view
Version:
A JSON View component for Angular 10+
173 lines (164 loc) • 7.49 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-json-view', ['exports', '@angular/core', '@angular/common'], factory) :
(global = global || self, factory(global['ng-json-view'] = {}, global.ng.core, global.ng.common));
}(this, (function (exports, core, common) { 'use strict';
function isObject(value) {
return value !== null && typeof value === 'object';
}
function isArray(value) {
return Array.isArray(value);
}
function isUndefined(value) {
return typeof value === 'undefined';
}
function isString(value) {
return typeof value === 'string';
}
function isNumber(value) {
return typeof value === 'number';
}
function isBoolean(value) {
return typeof value === 'boolean';
}
var JsonViewComponent = /** @class */ (function () {
function JsonViewComponent() {
this.level = 0;
this.isOpen = false;
this.hasChildren = false;
this.isObject = false;
this.isArray = false;
this.isInit = false;
this._levelLabels = {};
}
Object.defineProperty(JsonViewComponent.prototype, "data", {
get: function () { return this._data; },
set: function (data) {
this._data = data;
this.isInit && this.init();
},
enumerable: false,
configurable: true
});
JsonViewComponent.prototype.ngOnInit = function () {
this.init();
this.isInit = true;
};
JsonViewComponent.prototype.init = function () {
this.levelLabelHandle();
this.levelOpenHandle();
this.childrenKeysHandle();
this.dataHandle();
};
JsonViewComponent.prototype.levelLabelHandle = function () {
if (this.levelLabels !== undefined) {
this._levelLabels = this.levelLabels[this.level] || {};
}
};
JsonViewComponent.prototype.levelOpenHandle = function () {
if (!isUndefined(this.levelOpen)) {
(this.level <= this.levelOpen) && (this.isOpen = true);
}
};
JsonViewComponent.prototype.childrenKeysHandle = function () {
if (isObject(this.data)) {
this.childrenKeys = Object.keys(this.data);
this.childrenKeys && this.childrenKeys.length && (this.hasChildren = true);
}
};
JsonViewComponent.prototype.dataHandle = function () {
if (isObject(this.data)) {
this.isObject = true;
this.dataType = "Object";
if (isArray(this.data)) {
this.isArray = true;
this.dataType = "Array";
}
if (this._levelLabels[this.key]) {
this.dataType = this._levelLabels[this.key];
}
}
else {
this.value = this.data;
if (isString(this.data)) {
this.valueType = "string";
}
else if (isNumber(this.data)) {
this.valueType = "number";
}
else if (isBoolean(this.data)) {
this.valueType = "boolean";
}
else if (null === this.data) {
this.valueType = "null";
this.value = "null";
}
}
};
JsonViewComponent.prototype.toggle = function () {
if (!(this.childrenKeys && this.childrenKeys.length)) {
return;
}
this.isOpen = !this.isOpen;
};
return JsonViewComponent;
}());
JsonViewComponent.decorators = [
{ type: core.Component, args: [{
selector: 'json-view',
template: "<div class=\"json-view\">\n <a (click)=\"toggle()\">\n <span class=\"toggler\" [ngClass]=\"{'collapse': isOpen, 'expand': !isOpen}\" [style.visibility]=\"hasChildren?'visible':'hidden'\"></span>\n <span class=\"key\" *ngIf=\"key\">\n <span>{{key}}</span>\n <span>: </span>\n </span>\n <span class=\"value\">\n <span *ngIf=\"isObject\">\n {{ dataType }}\n <span *ngIf=\"isArray\">[ {{ $any(data)?.length }} ]</span>\n </span>\n <span *ngIf=\"!isObject\" [ngClass]=\"valueType\">{{ value }}</span>\n </span>\n </a>\n <div class=\"children\" *ngIf=\"hasChildren && isOpen\">\n <json-view *ngFor=\"let _key of childrenKeys\" [data]=\"data[_key]\" [key]=\"_key\" [level]=\"level+1\" [levelOpen]=\"levelOpen\" [levelLabels]=\"levelLabels\"></json-view>\n </div>\n</div>",
styles: [".json-view a{cursor:pointer;text-decoration:none}.json-view .toggler{display:block;float:left;padding:0;text-align:center;width:1em}.json-view .collapse:before{content:\"-\"}.json-view .expand:before{content:\"+\"}.json-view .key{color:#92278f}.json-view .value{color:#000}.json-view .value .string{color:#3ab54a}.json-view .value .number{color:#25aae2}.json-view .value .boolean{color:#aa0d91}.json-view .value .null{color:#f1592a}.json-view .children{margin-left:1em}"]
},] }
];
JsonViewComponent.propDecorators = {
data: [{ type: core.Input }],
key: [{ type: core.Input }],
level: [{ type: core.Input }],
levelOpen: [{ type: core.Input }],
levelLabels: [{ type: core.Input }]
};
var NgxJsonViewComponent = /** @class */ (function () {
function NgxJsonViewComponent() {
this.level = 0;
}
return NgxJsonViewComponent;
}());
NgxJsonViewComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-json-view',
template: "\n <div class=\"ngx-json-view\">\n <json-view [data]=\"data\" [level]=\"level\" [levelOpen]=\"levelOpen\" [levelLabels]=\"levelLabels\" class=\"json-view\"></json-view>\n </div>\n "
},] }
];
NgxJsonViewComponent.propDecorators = {
data: [{ type: core.Input }],
levelOpen: [{ type: core.Input }],
levelLabels: [{ type: core.Input }]
};
var NgxJsonViewModule = /** @class */ (function () {
function NgxJsonViewModule() {
}
return NgxJsonViewModule;
}());
NgxJsonViewModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule
],
exports: [
NgxJsonViewComponent
],
declarations: [
JsonViewComponent,
NgxJsonViewComponent
]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
exports.JsonViewComponent = JsonViewComponent;
exports.NgxJsonViewComponent = NgxJsonViewComponent;
exports.NgxJsonViewModule = NgxJsonViewModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-json-view.umd.js.map