UNPKG

ng-json-view

Version:

A JSON View component for Angular 10+

2 lines 4.14 kB
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-json-view",["exports","@angular/core","@angular/common"],n):n((e=e||self)["ng-json-view"]={},e.ng.core,e.ng.common)}(this,(function(e,n,t){"use strict";function s(e){return null!==e&&"object"==typeof e}var l=function(){function e(){this.level=0,this.isOpen=!1,this.hasChildren=!1,this.isObject=!1,this.isArray=!1,this.isInit=!1,this._levelLabels={}}return Object.defineProperty(e.prototype,"data",{get:function(){return this._data},set:function(e){this._data=e,this.isInit&&this.init()},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.init(),this.isInit=!0},e.prototype.init=function(){this.levelLabelHandle(),this.levelOpenHandle(),this.childrenKeysHandle(),this.dataHandle()},e.prototype.levelLabelHandle=function(){void 0!==this.levelLabels&&(this._levelLabels=this.levelLabels[this.level]||{})},e.prototype.levelOpenHandle=function(){void 0!==this.levelOpen&&this.level<=this.levelOpen&&(this.isOpen=!0)},e.prototype.childrenKeysHandle=function(){s(this.data)&&(this.childrenKeys=Object.keys(this.data),this.childrenKeys&&this.childrenKeys.length&&(this.hasChildren=!0))},e.prototype.dataHandle=function(){var e;s(this.data)?(this.isObject=!0,this.dataType="Object",e=this.data,Array.isArray(e)&&(this.isArray=!0,this.dataType="Array"),this._levelLabels[this.key]&&(this.dataType=this._levelLabels[this.key])):(this.value=this.data,!function(e){return"string"==typeof e}(this.data)?!function(e){return"number"==typeof e}(this.data)?!function(e){return"boolean"==typeof e}(this.data)?null===this.data&&(this.valueType="null",this.value="null"):this.valueType="boolean":this.valueType="number":this.valueType="string")},e.prototype.toggle=function(){this.childrenKeys&&this.childrenKeys.length&&(this.isOpen=!this.isOpen)},e}();l.decorators=[{type:n.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}']}]}],l.propDecorators={data:[{type:n.Input}],key:[{type:n.Input}],level:[{type:n.Input}],levelOpen:[{type:n.Input}],levelLabels:[{type:n.Input}]};var i=function(){this.level=0};i.decorators=[{type:n.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 '}]}],i.propDecorators={data:[{type:n.Input}],levelOpen:[{type:n.Input}],levelLabels:[{type:n.Input}]};var a=function(){};a.decorators=[{type:n.NgModule,args:[{imports:[t.CommonModule],exports:[i],declarations:[l,i]}]}],e.JsonViewComponent=l,e.NgxJsonViewComponent=i,e.NgxJsonViewModule=a,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=ng-json-view.umd.min.js.map