ngx-json-viewer - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

bundles/ngx-json-viewer.umd.js

@@ -29,2 +29,5 @@ (function (global, factory) {
         }
+        else {
+            this.segments.push(this.parseKeyValue("(" + typeof this.json + ")", this.json));
+        }
     };
@@ -110,3 +113,3 @@ /**
                 selector: 'ngx-json-viewer',
-                template: "\n    <section class=\"ngx-json-viewer\">\n      <section\n        *ngFor=\"let segment of segments\"\n        [ngClass]=\"['segment', 'segment-type-' + segment.type]\">\n        <section\n          (click)=\"toggle(segment)\"\n          [ngClass]=\"{\n            'segment-main': true,\n            'expandable': isExpandable(segment),\n            'expanded': segment.expanded\n          }\">\n          <div *ngIf=\"isExpandable(segment)\" class=\"toggler\"></div>\n          <span class=\"segment-key\">{{ segment.key }}</span>\n          <span class=\"segment-separator\">:</span>\n          <span *ngIf=\"!segment.expanded || !isExpandable(segment)\" class=\"segment-value\">{{ segment.description }}</span>\n        </section>\n        <section *ngIf=\"segment.expanded && isExpandable(segment)\" class=\"children\">\n          <ngx-json-viewer [json]=\"segment.value\" [expanded]=\"expanded\"></ngx-json-viewer>\n        </section>\n      </section>\n    </section>\n  ",
+                template: "\n    <section class=\"ngx-json-viewer\">\n      <section\n        *ngFor=\"let segment of segments\"\n        [ngClass]=\"['segment', 'segment-type-' + segment.type]\">\n        <section\n          (click)=\"toggle(segment)\"\n          [ngClass]=\"{\n            'segment-main': true,\n            'expandable': isExpandable(segment),\n            'expanded': segment.expanded\n          }\">\n          <div *ngIf=\"isExpandable(segment)\" class=\"toggler\"></div>\n          <span class=\"segment-key\">{{ segment.key }}</span>\n          <span class=\"segment-separator\">: </span>\n          <span *ngIf=\"!segment.expanded || !isExpandable(segment)\" class=\"segment-value\">{{ segment.description }}</span>\n        </section>\n        <section *ngIf=\"segment.expanded && isExpandable(segment)\" class=\"children\">\n          <ngx-json-viewer [json]=\"segment.value\" [expanded]=\"expanded\"></ngx-json-viewer>\n        </section>\n      </section>\n    </section>\n  ",
                 styles: ["\n    @charset \"UTF-8\";\n    .ngx-json-viewer {\n      font-family: monospace;\n      font-size: 1em;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      position: relative; }\n      .ngx-json-viewer .segment {\n        padding: 2px;\n        margin: 1px 1px 1px 12px; }\n        .ngx-json-viewer .segment .segment-main {\n          word-wrap: break-word; }\n          .ngx-json-viewer .segment .segment-main .toggler {\n            position: absolute;\n            margin-left: -14px;\n            margin-top: 3px;\n            font-size: .8em;\n            line-height: 1.2em;\n            vertical-align: middle;\n            color: #787878; }\n            .ngx-json-viewer .segment .segment-main .toggler::after {\n              display: inline-block;\n              content: \"\u25BA\";\n              -webkit-transition: -webkit-transform 0.1s ease-in;\n              transition: -webkit-transform 0.1s ease-in;\n              transition: transform 0.1s ease-in;\n              transition: transform 0.1s ease-in, -webkit-transform 0.1s ease-in; }\n          .ngx-json-viewer .segment .segment-main .segment-key {\n            color: #4E187C; }\n          .ngx-json-viewer .segment .segment-main .segment-separator {\n            color: #999; }\n          .ngx-json-viewer .segment .segment-main .segment-value {\n            color: #000; }\n        .ngx-json-viewer .segment .children {\n          margin-left: 12px; }\n      .ngx-json-viewer .segment-type-string > .segment-main > .segment-value {\n        color: #FF6B6B; }\n      .ngx-json-viewer .segment-type-number > .segment-main > .segment-value {\n        color: #009688; }\n      .ngx-json-viewer .segment-type-boolean > .segment-main > .segment-value {\n        color: #b938a4; }\n      .ngx-json-viewer .segment-type-date > .segment-main > .segment-value {\n        color: #05668D; }\n      .ngx-json-viewer .segment-type-array > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-function > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        background-color: red; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-key {\n        color: #999; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        background-color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main,\n      .ngx-json-viewer .segment-type-array > .segment-main {\n        white-space: nowrap; }\n      .ngx-json-viewer .expanded > .toggler::after {\n        -webkit-transform: rotate(90deg);\n                transform: rotate(90deg); }\n      .ngx-json-viewer .expandable,\n      .ngx-json-viewer .expandable > .toggler {\n        cursor: pointer; }\n  "]
@@ -113,0 +116,0 @@ },] },

bundles/ngx-json-viewer.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],n):n(e["ngx-json-viewer"]={},e.ng.core,e.ng.common)}(this,function(e,n,t){"use strict";var s=function(){function e(){this.expanded=!0,this.cleanOnChange=!0,this.segments=[]}return e.prototype.ngOnChanges=function(){var e=this;this.cleanOnChange&&(this.segments=[]),"object"==typeof this.json&&Object.keys(this.json).forEach(function(n){e.segments.push(e.parseKeyValue(n,e.json[n]))})},e.prototype.isExpandable=function(e){return"object"===e.type||"array"===e.type},e.prototype.toggle=function(e){this.isExpandable(e)&&(e.expanded=!e.expanded)},e.prototype.parseKeyValue=function(e,n){var t={key:e,value:n,type:undefined,description:""+n,expanded:this.expanded};switch(typeof t.value){case"number":t.type="number";break;case"boolean":t.type="boolean";break;case"function":t.type="function";break;case"string":t.type="string",t.description='"'+t.value+'"';break;case"undefined":t.type="undefined",t.description="undefined";break;case"object":null===t.value?(t.type="null",t.description="null"):Array.isArray(t.value)?(t.type="array",t.description="Array["+t.value.length+"] "+JSON.stringify(t.value)):t.value instanceof Date?t.type="date":(t.type="object",t.description="Object "+JSON.stringify(t.value))}return t},e}();s.decorators=[{type:n.Component,args:[{selector:"ngx-json-viewer",template:'\n    <section class="ngx-json-viewer">\n      <section\n        *ngFor="let segment of segments"\n        [ngClass]="[\'segment\', \'segment-type-\' + segment.type]">\n        <section\n          (click)="toggle(segment)"\n          [ngClass]="{\n            \'segment-main\': true,\n            \'expandable\': isExpandable(segment),\n            \'expanded\': segment.expanded\n          }">\n          <div *ngIf="isExpandable(segment)" class="toggler"></div>\n          <span class="segment-key">{{ segment.key }}</span>\n          <span class="segment-separator">:</span>\n          <span *ngIf="!segment.expanded || !isExpandable(segment)" class="segment-value">{{ segment.description }}</span>\n        </section>\n        <section *ngIf="segment.expanded && isExpandable(segment)" class="children">\n          <ngx-json-viewer [json]="segment.value" [expanded]="expanded"></ngx-json-viewer>\n        </section>\n      </section>\n    </section>\n  ',styles:['\n    @charset "UTF-8";\n    .ngx-json-viewer {\n      font-family: monospace;\n      font-size: 1em;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      position: relative; }\n      .ngx-json-viewer .segment {\n        padding: 2px;\n        margin: 1px 1px 1px 12px; }\n        .ngx-json-viewer .segment .segment-main {\n          word-wrap: break-word; }\n          .ngx-json-viewer .segment .segment-main .toggler {\n            position: absolute;\n            margin-left: -14px;\n            margin-top: 3px;\n            font-size: .8em;\n            line-height: 1.2em;\n            vertical-align: middle;\n            color: #787878; }\n            .ngx-json-viewer .segment .segment-main .toggler::after {\n              display: inline-block;\n              content: "►";\n              -webkit-transition: -webkit-transform 0.1s ease-in;\n              transition: -webkit-transform 0.1s ease-in;\n              transition: transform 0.1s ease-in;\n              transition: transform 0.1s ease-in, -webkit-transform 0.1s ease-in; }\n          .ngx-json-viewer .segment .segment-main .segment-key {\n            color: #4E187C; }\n          .ngx-json-viewer .segment .segment-main .segment-separator {\n            color: #999; }\n          .ngx-json-viewer .segment .segment-main .segment-value {\n            color: #000; }\n        .ngx-json-viewer .segment .children {\n          margin-left: 12px; }\n      .ngx-json-viewer .segment-type-string > .segment-main > .segment-value {\n        color: #FF6B6B; }\n      .ngx-json-viewer .segment-type-number > .segment-main > .segment-value {\n        color: #009688; }\n      .ngx-json-viewer .segment-type-boolean > .segment-main > .segment-value {\n        color: #b938a4; }\n      .ngx-json-viewer .segment-type-date > .segment-main > .segment-value {\n        color: #05668D; }\n      .ngx-json-viewer .segment-type-array > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-function > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        background-color: red; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-key {\n        color: #999; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        background-color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main,\n      .ngx-json-viewer .segment-type-array > .segment-main {\n        white-space: nowrap; }\n      .ngx-json-viewer .expanded > .toggler::after {\n        -webkit-transform: rotate(90deg);\n                transform: rotate(90deg); }\n      .ngx-json-viewer .expandable,\n      .ngx-json-viewer .expandable > .toggler {\n        cursor: pointer; }\n  ']}]}],s.ctorParameters=function(){return[]},s.propDecorators={json:[{type:n.Input}],expanded:[{type:n.Input}],cleanOnChange:[{type:n.Input}]};var o=function(){return function(){}}();o.decorators=[{type:n.NgModule,args:[{imports:[t.CommonModule],declarations:[s],exports:[s]}]}],o.ctorParameters=function(){return[]},e.NgxJsonViewerModule=o,e.NgxJsonViewerComponent=s,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],n):n(e["ngx-json-viewer"]={},e.ng.core,e.ng.common)}(this,function(e,n,t){"use strict";var s=function(){function e(){this.expanded=!0,this.cleanOnChange=!0,this.segments=[]}return e.prototype.ngOnChanges=function(){var e=this;this.cleanOnChange&&(this.segments=[]),"object"==typeof this.json?Object.keys(this.json).forEach(function(n){e.segments.push(e.parseKeyValue(n,e.json[n]))}):this.segments.push(this.parseKeyValue("("+typeof this.json+")",this.json))},e.prototype.isExpandable=function(e){return"object"===e.type||"array"===e.type},e.prototype.toggle=function(e){this.isExpandable(e)&&(e.expanded=!e.expanded)},e.prototype.parseKeyValue=function(e,n){var t={key:e,value:n,type:undefined,description:""+n,expanded:this.expanded};switch(typeof t.value){case"number":t.type="number";break;case"boolean":t.type="boolean";break;case"function":t.type="function";break;case"string":t.type="string",t.description='"'+t.value+'"';break;case"undefined":t.type="undefined",t.description="undefined";break;case"object":null===t.value?(t.type="null",t.description="null"):Array.isArray(t.value)?(t.type="array",t.description="Array["+t.value.length+"] "+JSON.stringify(t.value)):t.value instanceof Date?t.type="date":(t.type="object",t.description="Object "+JSON.stringify(t.value))}return t},e}();s.decorators=[{type:n.Component,args:[{selector:"ngx-json-viewer",template:'\n    <section class="ngx-json-viewer">\n      <section\n        *ngFor="let segment of segments"\n        [ngClass]="[\'segment\', \'segment-type-\' + segment.type]">\n        <section\n          (click)="toggle(segment)"\n          [ngClass]="{\n            \'segment-main\': true,\n            \'expandable\': isExpandable(segment),\n            \'expanded\': segment.expanded\n          }">\n          <div *ngIf="isExpandable(segment)" class="toggler"></div>\n          <span class="segment-key">{{ segment.key }}</span>\n          <span class="segment-separator">: </span>\n          <span *ngIf="!segment.expanded || !isExpandable(segment)" class="segment-value">{{ segment.description }}</span>\n        </section>\n        <section *ngIf="segment.expanded && isExpandable(segment)" class="children">\n          <ngx-json-viewer [json]="segment.value" [expanded]="expanded"></ngx-json-viewer>\n        </section>\n      </section>\n    </section>\n  ',styles:['\n    @charset "UTF-8";\n    .ngx-json-viewer {\n      font-family: monospace;\n      font-size: 1em;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      position: relative; }\n      .ngx-json-viewer .segment {\n        padding: 2px;\n        margin: 1px 1px 1px 12px; }\n        .ngx-json-viewer .segment .segment-main {\n          word-wrap: break-word; }\n          .ngx-json-viewer .segment .segment-main .toggler {\n            position: absolute;\n            margin-left: -14px;\n            margin-top: 3px;\n            font-size: .8em;\n            line-height: 1.2em;\n            vertical-align: middle;\n            color: #787878; }\n            .ngx-json-viewer .segment .segment-main .toggler::after {\n              display: inline-block;\n              content: "►";\n              -webkit-transition: -webkit-transform 0.1s ease-in;\n              transition: -webkit-transform 0.1s ease-in;\n              transition: transform 0.1s ease-in;\n              transition: transform 0.1s ease-in, -webkit-transform 0.1s ease-in; }\n          .ngx-json-viewer .segment .segment-main .segment-key {\n            color: #4E187C; }\n          .ngx-json-viewer .segment .segment-main .segment-separator {\n            color: #999; }\n          .ngx-json-viewer .segment .segment-main .segment-value {\n            color: #000; }\n        .ngx-json-viewer .segment .children {\n          margin-left: 12px; }\n      .ngx-json-viewer .segment-type-string > .segment-main > .segment-value {\n        color: #FF6B6B; }\n      .ngx-json-viewer .segment-type-number > .segment-main > .segment-value {\n        color: #009688; }\n      .ngx-json-viewer .segment-type-boolean > .segment-main > .segment-value {\n        color: #b938a4; }\n      .ngx-json-viewer .segment-type-date > .segment-main > .segment-value {\n        color: #05668D; }\n      .ngx-json-viewer .segment-type-array > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-function > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        background-color: red; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-key {\n        color: #999; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        background-color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main,\n      .ngx-json-viewer .segment-type-array > .segment-main {\n        white-space: nowrap; }\n      .ngx-json-viewer .expanded > .toggler::after {\n        -webkit-transform: rotate(90deg);\n                transform: rotate(90deg); }\n      .ngx-json-viewer .expandable,\n      .ngx-json-viewer .expandable > .toggler {\n        cursor: pointer; }\n  ']}]}],s.ctorParameters=function(){return[]},s.propDecorators={json:[{type:n.Input}],expanded:[{type:n.Input}],cleanOnChange:[{type:n.Input}]};var o=function(){return function(){}}();o.decorators=[{type:n.NgModule,args:[{imports:[t.CommonModule],declarations:[s],exports:[s]}]}],o.ctorParameters=function(){return[]},e.NgxJsonViewerModule=o,e.NgxJsonViewerComponent=s,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ngx-json-viewer.umd.min.js.map

ngx-json-viewer.es5.js

@@ -25,2 +25,5 @@ import { Component, Input, NgModule } from '@angular/core';
         }
+        else {
+            this.segments.push(this.parseKeyValue("(" + typeof this.json + ")", this.json));
+        }
     };
@@ -106,3 +109,3 @@ /**
                 selector: 'ngx-json-viewer',
-                template: "\n    <section class=\"ngx-json-viewer\">\n      <section\n        *ngFor=\"let segment of segments\"\n        [ngClass]=\"['segment', 'segment-type-' + segment.type]\">\n        <section\n          (click)=\"toggle(segment)\"\n          [ngClass]=\"{\n            'segment-main': true,\n            'expandable': isExpandable(segment),\n            'expanded': segment.expanded\n          }\">\n          <div *ngIf=\"isExpandable(segment)\" class=\"toggler\"></div>\n          <span class=\"segment-key\">{{ segment.key }}</span>\n          <span class=\"segment-separator\">:</span>\n          <span *ngIf=\"!segment.expanded || !isExpandable(segment)\" class=\"segment-value\">{{ segment.description }}</span>\n        </section>\n        <section *ngIf=\"segment.expanded && isExpandable(segment)\" class=\"children\">\n          <ngx-json-viewer [json]=\"segment.value\" [expanded]=\"expanded\"></ngx-json-viewer>\n        </section>\n      </section>\n    </section>\n  ",
+                template: "\n    <section class=\"ngx-json-viewer\">\n      <section\n        *ngFor=\"let segment of segments\"\n        [ngClass]=\"['segment', 'segment-type-' + segment.type]\">\n        <section\n          (click)=\"toggle(segment)\"\n          [ngClass]=\"{\n            'segment-main': true,\n            'expandable': isExpandable(segment),\n            'expanded': segment.expanded\n          }\">\n          <div *ngIf=\"isExpandable(segment)\" class=\"toggler\"></div>\n          <span class=\"segment-key\">{{ segment.key }}</span>\n          <span class=\"segment-separator\">: </span>\n          <span *ngIf=\"!segment.expanded || !isExpandable(segment)\" class=\"segment-value\">{{ segment.description }}</span>\n        </section>\n        <section *ngIf=\"segment.expanded && isExpandable(segment)\" class=\"children\">\n          <ngx-json-viewer [json]=\"segment.value\" [expanded]=\"expanded\"></ngx-json-viewer>\n        </section>\n      </section>\n    </section>\n  ",
                 styles: ["\n    @charset \"UTF-8\";\n    .ngx-json-viewer {\n      font-family: monospace;\n      font-size: 1em;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      position: relative; }\n      .ngx-json-viewer .segment {\n        padding: 2px;\n        margin: 1px 1px 1px 12px; }\n        .ngx-json-viewer .segment .segment-main {\n          word-wrap: break-word; }\n          .ngx-json-viewer .segment .segment-main .toggler {\n            position: absolute;\n            margin-left: -14px;\n            margin-top: 3px;\n            font-size: .8em;\n            line-height: 1.2em;\n            vertical-align: middle;\n            color: #787878; }\n            .ngx-json-viewer .segment .segment-main .toggler::after {\n              display: inline-block;\n              content: \"\u25BA\";\n              -webkit-transition: -webkit-transform 0.1s ease-in;\n              transition: -webkit-transform 0.1s ease-in;\n              transition: transform 0.1s ease-in;\n              transition: transform 0.1s ease-in, -webkit-transform 0.1s ease-in; }\n          .ngx-json-viewer .segment .segment-main .segment-key {\n            color: #4E187C; }\n          .ngx-json-viewer .segment .segment-main .segment-separator {\n            color: #999; }\n          .ngx-json-viewer .segment .segment-main .segment-value {\n            color: #000; }\n        .ngx-json-viewer .segment .children {\n          margin-left: 12px; }\n      .ngx-json-viewer .segment-type-string > .segment-main > .segment-value {\n        color: #FF6B6B; }\n      .ngx-json-viewer .segment-type-number > .segment-main > .segment-value {\n        color: #009688; }\n      .ngx-json-viewer .segment-type-boolean > .segment-main > .segment-value {\n        color: #b938a4; }\n      .ngx-json-viewer .segment-type-date > .segment-main > .segment-value {\n        color: #05668D; }\n      .ngx-json-viewer .segment-type-array > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-function > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        background-color: red; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-key {\n        color: #999; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        background-color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main,\n      .ngx-json-viewer .segment-type-array > .segment-main {\n        white-space: nowrap; }\n      .ngx-json-viewer .expanded > .toggler::after {\n        -webkit-transform: rotate(90deg);\n                transform: rotate(90deg); }\n      .ngx-json-viewer .expandable,\n      .ngx-json-viewer .expandable > .toggler {\n        cursor: pointer; }\n  "]
@@ -109,0 +112,0 @@ },] },

ngx-json-viewer.js

@@ -25,2 +25,5 @@ import { Component, Input, NgModule } from '@angular/core';
         }
+        else {
+            this.segments.push(this.parseKeyValue(`(${typeof this.json})`, this.json));
+        }
     }
@@ -119,3 +122,3 @@ /**
           <span class="segment-key">{{ segment.key }}</span>
-          <span class="segment-separator">:</span>
+          <span class="segment-separator">: </span>
           <span *ngIf="!segment.expanded || !isExpandable(segment)" class="segment-value">{{ segment.description }}</span>
@@ -122,0 +125,0 @@ </section>

ngx-json-viewer.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"NgxJsonViewerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"NgxJsonViewerComponent"}],"exports":[{"__symbolic":"reference","name":"NgxJsonViewerComponent"}]}]}],"members":{}},"NgxJsonViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-json-viewer","template":"\n    <section class=\"ngx-json-viewer\">\n      <section\n        *ngFor=\"let segment of segments\"\n        [ngClass]=\"['segment', 'segment-type-' + segment.type]\">\n        <section\n          (click)=\"toggle(segment)\"\n          [ngClass]=\"{\n            'segment-main': true,\n            'expandable': isExpandable(segment),\n            'expanded': segment.expanded\n          }\">\n          <div *ngIf=\"isExpandable(segment)\" class=\"toggler\"></div>\n          <span class=\"segment-key\">{{ segment.key }}</span>\n          <span class=\"segment-separator\">:</span>\n          <span *ngIf=\"!segment.expanded || !isExpandable(segment)\" class=\"segment-value\">{{ segment.description }}</span>\n        </section>\n        <section *ngIf=\"segment.expanded && isExpandable(segment)\" class=\"children\">\n          <ngx-json-viewer [json]=\"segment.value\" [expanded]=\"expanded\"></ngx-json-viewer>\n        </section>\n      </section>\n    </section>\n  ","styles":["\n    @charset \"UTF-8\";\n    .ngx-json-viewer {\n      font-family: monospace;\n      font-size: 1em;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      position: relative; }\n      .ngx-json-viewer .segment {\n        padding: 2px;\n        margin: 1px 1px 1px 12px; }\n        .ngx-json-viewer .segment .segment-main {\n          word-wrap: break-word; }\n          .ngx-json-viewer .segment .segment-main .toggler {\n            position: absolute;\n            margin-left: -14px;\n            margin-top: 3px;\n            font-size: .8em;\n            line-height: 1.2em;\n            vertical-align: middle;\n            color: #787878; }\n            .ngx-json-viewer .segment .segment-main .toggler::after {\n              display: inline-block;\n              content: \"►\";\n              -webkit-transition: -webkit-transform 0.1s ease-in;\n              transition: -webkit-transform 0.1s ease-in;\n              transition: transform 0.1s ease-in;\n              transition: transform 0.1s ease-in, -webkit-transform 0.1s ease-in; }\n          .ngx-json-viewer .segment .segment-main .segment-key {\n            color: #4E187C; }\n          .ngx-json-viewer .segment .segment-main .segment-separator {\n            color: #999; }\n          .ngx-json-viewer .segment .segment-main .segment-value {\n            color: #000; }\n        .ngx-json-viewer .segment .children {\n          margin-left: 12px; }\n      .ngx-json-viewer .segment-type-string > .segment-main > .segment-value {\n        color: #FF6B6B; }\n      .ngx-json-viewer .segment-type-number > .segment-main > .segment-value {\n        color: #009688; }\n      .ngx-json-viewer .segment-type-boolean > .segment-main > .segment-value {\n        color: #b938a4; }\n      .ngx-json-viewer .segment-type-date > .segment-main > .segment-value {\n        color: #05668D; }\n      .ngx-json-viewer .segment-type-array > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-function > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        background-color: red; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-key {\n        color: #999; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        background-color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main,\n      .ngx-json-viewer .segment-type-array > .segment-main {\n        white-space: nowrap; }\n      .ngx-json-viewer .expanded > .toggler::after {\n        -webkit-transform: rotate(90deg);\n                transform: rotate(90deg); }\n      .ngx-json-viewer .expandable,\n      .ngx-json-viewer .expandable > .toggler {\n        cursor: pointer; }\n  "]}]}],"members":{"json":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cleanOnChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnChanges":[{"__symbolic":"method"}],"isExpandable":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"parseKeyValue":[{"__symbolic":"method"}]}}},"origins":{"NgxJsonViewerModule":"./src/ngx-json-viewer.module","NgxJsonViewerComponent":"./src/ngx-json-viewer/ngx-json-viewer.component"},"importAs":"ngx-json-viewer"}
+{"__symbolic":"module","version":3,"metadata":{"NgxJsonViewerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"NgxJsonViewerComponent"}],"exports":[{"__symbolic":"reference","name":"NgxJsonViewerComponent"}]}]}],"members":{}},"NgxJsonViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-json-viewer","template":"\n    <section class=\"ngx-json-viewer\">\n      <section\n        *ngFor=\"let segment of segments\"\n        [ngClass]=\"['segment', 'segment-type-' + segment.type]\">\n        <section\n          (click)=\"toggle(segment)\"\n          [ngClass]=\"{\n            'segment-main': true,\n            'expandable': isExpandable(segment),\n            'expanded': segment.expanded\n          }\">\n          <div *ngIf=\"isExpandable(segment)\" class=\"toggler\"></div>\n          <span class=\"segment-key\">{{ segment.key }}</span>\n          <span class=\"segment-separator\">: </span>\n          <span *ngIf=\"!segment.expanded || !isExpandable(segment)\" class=\"segment-value\">{{ segment.description }}</span>\n        </section>\n        <section *ngIf=\"segment.expanded && isExpandable(segment)\" class=\"children\">\n          <ngx-json-viewer [json]=\"segment.value\" [expanded]=\"expanded\"></ngx-json-viewer>\n        </section>\n      </section>\n    </section>\n  ","styles":["\n    @charset \"UTF-8\";\n    .ngx-json-viewer {\n      font-family: monospace;\n      font-size: 1em;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      position: relative; }\n      .ngx-json-viewer .segment {\n        padding: 2px;\n        margin: 1px 1px 1px 12px; }\n        .ngx-json-viewer .segment .segment-main {\n          word-wrap: break-word; }\n          .ngx-json-viewer .segment .segment-main .toggler {\n            position: absolute;\n            margin-left: -14px;\n            margin-top: 3px;\n            font-size: .8em;\n            line-height: 1.2em;\n            vertical-align: middle;\n            color: #787878; }\n            .ngx-json-viewer .segment .segment-main .toggler::after {\n              display: inline-block;\n              content: \"►\";\n              -webkit-transition: -webkit-transform 0.1s ease-in;\n              transition: -webkit-transform 0.1s ease-in;\n              transition: transform 0.1s ease-in;\n              transition: transform 0.1s ease-in, -webkit-transform 0.1s ease-in; }\n          .ngx-json-viewer .segment .segment-main .segment-key {\n            color: #4E187C; }\n          .ngx-json-viewer .segment .segment-main .segment-separator {\n            color: #999; }\n          .ngx-json-viewer .segment .segment-main .segment-value {\n            color: #000; }\n        .ngx-json-viewer .segment .children {\n          margin-left: 12px; }\n      .ngx-json-viewer .segment-type-string > .segment-main > .segment-value {\n        color: #FF6B6B; }\n      .ngx-json-viewer .segment-type-number > .segment-main > .segment-value {\n        color: #009688; }\n      .ngx-json-viewer .segment-type-boolean > .segment-main > .segment-value {\n        color: #b938a4; }\n      .ngx-json-viewer .segment-type-date > .segment-main > .segment-value {\n        color: #05668D; }\n      .ngx-json-viewer .segment-type-array > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-function > .segment-main > .segment-value {\n        color: #999; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        color: #fff; }\n      .ngx-json-viewer .segment-type-null > .segment-main > .segment-value {\n        background-color: red; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-key {\n        color: #999; }\n      .ngx-json-viewer .segment-type-undefined > .segment-main > .segment-value {\n        background-color: #999; }\n      .ngx-json-viewer .segment-type-object > .segment-main,\n      .ngx-json-viewer .segment-type-array > .segment-main {\n        white-space: nowrap; }\n      .ngx-json-viewer .expanded > .toggler::after {\n        -webkit-transform: rotate(90deg);\n                transform: rotate(90deg); }\n      .ngx-json-viewer .expandable,\n      .ngx-json-viewer .expandable > .toggler {\n        cursor: pointer; }\n  "]}]}],"members":{"json":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cleanOnChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnChanges":[{"__symbolic":"method"}],"isExpandable":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"parseKeyValue":[{"__symbolic":"method"}]}}},"origins":{"NgxJsonViewerModule":"./src/ngx-json-viewer.module","NgxJsonViewerComponent":"./src/ngx-json-viewer/ngx-json-viewer.component"},"importAs":"ngx-json-viewer"}

package.json

@@ -1,1 +0,1 @@
-{"name":"ngx-json-viewer","version":"2.3.1","description":"JSON formatter / viewer for Angular 2/4/5/6+","keywords":["angular","json"],"author":"Vivo Xu <[e-mail]>","license":"MIT","repository":{"type":"git","url":"git+https://github.com/hivivo/ngx-json-viewer.git"},"bugs":{"url":"https://github.com/hivivo/ngx-json-viewer/issues"},"homepage":"https://github.com/hivivo/ngx-json-viewer#readme","main":"bundles/ngx-json-viewer.umd.js","$schema":"./node_modules/ng-packagr/package.schema.json","scripts":{"build":"ng-packagr -p package.json","pack:lib":"npm run build && npm pack ./dist","publish:lib":"npm run build && npm publish ./dist"},"dependencies":{},"peerDependencies":{"@angular/core":">=5.0.0","@angular/common":">=5.0.0","rxjs":">=5.5.2"},"devDependencies":{"@angular/common":"^5.2.2","@angular/compiler":"^5.2.2","@angular/compiler-cli":"^5.2.2","@angular/core":"^5.2.2","ng-packagr":"^1.6.0","rxjs":"^5.5.6","typescript":"^2.6.2","zone.js":"^0.8.20"},"module":"ngx-json-viewer.es5.js","es2015":"ngx-json-viewer.js","typings":"ngx-json-viewer.d.ts","metadata":"ngx-json-viewer.metadata.json"}
+{"name":"ngx-json-viewer","version":"2.4.0","description":"JSON formatter / viewer for Angular 2/4/5/6/7+","keywords":["angular","json"],"author":"Vivo Xu <[e-mail]>","license":"MIT","repository":{"type":"git","url":"git+https://github.com/hivivo/ngx-json-viewer.git"},"bugs":{"url":"https://github.com/hivivo/ngx-json-viewer/issues"},"homepage":"https://github.com/hivivo/ngx-json-viewer#readme","main":"bundles/ngx-json-viewer.umd.js","$schema":"./node_modules/ng-packagr/package.schema.json","scripts":{"build":"ng-packagr -p package.json","pack:lib":"npm run build && npm pack ./dist","publish:lib":"npm run build && npm publish ./dist"},"dependencies":{},"peerDependencies":{"@angular/core":">=5.0.0","@angular/common":">=5.0.0","rxjs":">=5.5.2"},"devDependencies":{"@angular/common":"^5.2.2","@angular/compiler":"^5.2.2","@angular/compiler-cli":"^5.2.2","@angular/core":"^5.2.2","ng-packagr":"^1.6.0","rxjs":"^5.5.6","typescript":"^2.6.2","zone.js":"^0.8.20"},"module":"ngx-json-viewer.es5.js","es2015":"ngx-json-viewer.js","typings":"ngx-json-viewer.d.ts","metadata":"ngx-json-viewer.metadata.json"}

README.md

 # ngx-json-viewer
 
-JSON formatter and viewer for Angular 2/4/5/6+
+JSON formatter and viewer for Angular 2/4/5/6/7+
 
@@ -9,3 +9,3 @@ Live demo: https://stackblitz.com/edit/ngx-json-viewer
 ```bash
-# For Angular 4/5/6:
+# For Angular 4/5/6/7:
 npm install ngx-json-viewer
@@ -12,0 +12,0 @@

No alert changes

Improved metrics

Total package byte prevSize

88973

increased by1.53%

Lines of code

605

increased by1.51%

No dependency changes