nxt-json-view
Version:
Angular component for interactive json view.
244 lines (236 loc) • 13.7 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, Input, ViewEncapsulation, Component, ChangeDetectorRef, NgModule } from '@angular/core';
/** @internal */
function isObject(value) {
return value !== null && typeof value === 'object';
}
/** @internal */
function isArray(value) {
return Array.isArray(value);
}
/** @internal */
function isUndefined(value) {
return typeof value === 'undefined';
}
/** @internal */
function isString(value) {
return typeof value === 'string';
}
/** @internal */
function isNumber(value) {
return typeof value === 'number';
}
/** @internal */
function isBoolean(value) {
return typeof value === 'boolean';
}
class ExpanderService {
constructor() {
this.items = new Set();
}
addItem(item) {
this.items.add(item);
}
removeItem(item) {
this.items.delete(item);
}
expandTo(level) {
this.items.forEach(i => {
if (i.level <= level && !i.isOpen) {
i.levelOpen = level;
i.toggle();
}
});
}
collapseTo(level) {
this.items.forEach(i => {
if (i.level > level && i.isOpen)
i.toggle();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ExpanderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ExpanderService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ExpanderService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
/** @internal */
class JsonViewItemComponent {
constructor() {
this.level = 0;
this.isOpen = false;
this.hasChildren = false;
this.isObject = false;
this.isArray = false;
this.isInit = false;
this._levelLabels = {};
this.expanderService = inject(ExpanderService);
}
set data(data) {
this._data = data;
if (this.isInit) {
this.init();
}
}
get data() {
return this._data;
}
ngOnInit() {
this.init();
this.isInit = true;
this.expanderService.addItem(this);
}
ngOnDestroy() {
this.expanderService.removeItem(this);
}
init() {
this.levelLabelHandle();
this.levelOpenHandle();
this.childrenKeysHandle();
this.dataHandle();
}
levelLabelHandle() {
if (this.levelLabels !== undefined) {
this._levelLabels = this.levelLabels[this.level] || {};
}
}
levelOpenHandle() {
if (!isUndefined(this.levelOpen) && (this.level <= this.levelOpen)) {
this.isOpen = true;
}
}
childrenKeysHandle() {
if (isObject(this.data)) {
this.childrenKeys = Object.keys(this.data);
if (this.childrenKeys && this.childrenKeys.length) {
this.hasChildren = true;
}
}
}
dataHandle() {
if (isObject(this.data)) {
this.isObject = true;
this.dataType = 'Object';
if (isArray(this.data)) {
this.isArray = true;
this.dataType = 'Array';
}
if (this.key && 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';
}
}
}
toggle() {
if (!(this.childrenKeys && this.childrenKeys.length)) {
return;
}
this.isOpen = !this.isOpen;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: JsonViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: JsonViewItemComponent, isStandalone: false, selector: "nxt-json-view-item", inputs: { data: "data", key: "key", level: "level", levelOpen: "levelOpen", levelLabels: "levelLabels" }, ngImport: i0, template: "<div class=\"json-view\">\r\n <a (click)=\"toggle()\"\r\n tabindex=\"0\"\r\n (keydown.space)=\"toggle()\">\r\n <span class=\"toggler\"\r\n [ngClass]=\"{'collapse': isOpen, 'expand': !isOpen}\"\r\n [style.visibility]=\"hasChildren?'visible':'hidden'\"></span>\r\n <span class=\"key\"\r\n *ngIf=\"key\">\r\n <span>{{key}}</span>\r\n <span>: </span>\r\n </span>\r\n <span class=\"value\">\r\n <span *ngIf=\"isObject\">\r\n {{ dataType }}\r\n <span *ngIf=\"isArray\">[ {{ $any(data)?.length }} ]</span>\r\n </span>\r\n <span *ngIf=\"!isObject && valueType\"\r\n [ngClass]=\"valueType\">{{ value }}</span>\r\n </span>\r\n </a>\r\n <div class=\"children\"\r\n *ngIf=\"hasChildren && isOpen\">\r\n <nxt-json-view-item *ngFor=\"let _key of childrenKeys\"\r\n [data]=\"data[_key]\"\r\n [key]=\"_key\"\r\n [level]=\"level+1\"\r\n [levelOpen]=\"levelOpen\"\r\n [levelLabels]=\"levelLabels\"></nxt-json-view-item>\r\n </div>\r\n</div>\r\n", styles: [".json-view a{cursor:pointer;text-decoration:none}.json-view .toggler{width:1em;padding:0;display:block;text-align:center;float:left}.json-view .collapse:before{content:\"-\"}.json-view .expand:before{content:\"+\"}.json-view .key{color:var(--nxt-json-view-color-key, #92278f)}.json-view .value{color:var(--nxt-json-view-color-value, #000000)}.json-view .value .string{color:var(--nxt-json-view-color-string, #3ab54a)}.json-view .value .number{color:var(--nxt-json-view-color-number, #25aae2)}.json-view .value .boolean{color:var(--nxt-json-view-color-boolean, #aa0d91)}.json-view .value .null{color:var(--nxt-json-view-color-null, #f1592a)}.json-view .children{margin-left:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonViewItemComponent, selector: "nxt-json-view-item", inputs: ["data", "key", "level", "levelOpen", "levelLabels"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: JsonViewItemComponent, decorators: [{
type: Component,
args: [{ selector: 'nxt-json-view-item', encapsulation: ViewEncapsulation.Emulated, standalone: false, template: "<div class=\"json-view\">\r\n <a (click)=\"toggle()\"\r\n tabindex=\"0\"\r\n (keydown.space)=\"toggle()\">\r\n <span class=\"toggler\"\r\n [ngClass]=\"{'collapse': isOpen, 'expand': !isOpen}\"\r\n [style.visibility]=\"hasChildren?'visible':'hidden'\"></span>\r\n <span class=\"key\"\r\n *ngIf=\"key\">\r\n <span>{{key}}</span>\r\n <span>: </span>\r\n </span>\r\n <span class=\"value\">\r\n <span *ngIf=\"isObject\">\r\n {{ dataType }}\r\n <span *ngIf=\"isArray\">[ {{ $any(data)?.length }} ]</span>\r\n </span>\r\n <span *ngIf=\"!isObject && valueType\"\r\n [ngClass]=\"valueType\">{{ value }}</span>\r\n </span>\r\n </a>\r\n <div class=\"children\"\r\n *ngIf=\"hasChildren && isOpen\">\r\n <nxt-json-view-item *ngFor=\"let _key of childrenKeys\"\r\n [data]=\"data[_key]\"\r\n [key]=\"_key\"\r\n [level]=\"level+1\"\r\n [levelOpen]=\"levelOpen\"\r\n [levelLabels]=\"levelLabels\"></nxt-json-view-item>\r\n </div>\r\n</div>\r\n", styles: [".json-view a{cursor:pointer;text-decoration:none}.json-view .toggler{width:1em;padding:0;display:block;text-align:center;float:left}.json-view .collapse:before{content:\"-\"}.json-view .expand:before{content:\"+\"}.json-view .key{color:var(--nxt-json-view-color-key, #92278f)}.json-view .value{color:var(--nxt-json-view-color-value, #000000)}.json-view .value .string{color:var(--nxt-json-view-color-string, #3ab54a)}.json-view .value .number{color:var(--nxt-json-view-color-number, #25aae2)}.json-view .value .boolean{color:var(--nxt-json-view-color-boolean, #aa0d91)}.json-view .value .null{color:var(--nxt-json-view-color-null, #f1592a)}.json-view .children{margin-left:1em}\n"] }]
}], propDecorators: { data: [{
type: Input
}], key: [{
type: Input
}], level: [{
type: Input
}], levelOpen: [{
type: Input
}], levelLabels: [{
type: Input
}] } });
class JsonViewComponent {
constructor() {
this.expanderService = inject(ExpanderService);
this.cdRef = inject(ChangeDetectorRef);
}
ngAfterViewChecked() {
if (this.levelOpen != undefined) {
// Reset levelOpen to keep nested items collapsed when toggling
this.levelOpen = undefined;
this.cdRef.detectChanges();
}
}
/** Expand all items up to the given level */
expandTo(level) {
this.levelOpen = level;
this.expanderService.expandTo(level);
}
/** Collapse any open items above the given level */
collapseTo(level) {
this.expanderService.collapseTo(level);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: JsonViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: JsonViewComponent, isStandalone: false, selector: "nxt-json-view", inputs: { data: "data", levelOpen: "levelOpen", levelLabels: "levelLabels" }, providers: [
{
provide: ExpanderService,
useClass: ExpanderService
}
], ngImport: i0, template: "<div class=\"nxt-json-view\">\r\n <nxt-json-view-item [data]=\"data\"\r\n [level]=\"0\"\r\n [levelOpen]=\"levelOpen\"\r\n [levelLabels]=\"levelLabels\"\r\n class=\"json-view\"></nxt-json-view-item>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: JsonViewItemComponent, selector: "nxt-json-view-item", inputs: ["data", "key", "level", "levelOpen", "levelLabels"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: JsonViewComponent, decorators: [{
type: Component,
args: [{ selector: 'nxt-json-view', encapsulation: ViewEncapsulation.Emulated, standalone: false, providers: [
{
provide: ExpanderService,
useClass: ExpanderService
}
], template: "<div class=\"nxt-json-view\">\r\n <nxt-json-view-item [data]=\"data\"\r\n [level]=\"0\"\r\n [levelOpen]=\"levelOpen\"\r\n [levelLabels]=\"levelLabels\"\r\n class=\"json-view\"></nxt-json-view-item>\r\n</div>\r\n" }]
}], propDecorators: { data: [{
type: Input
}], levelOpen: [{
type: Input
}], levelLabels: [{
type: Input
}] } });
class JsonViewModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: JsonViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: JsonViewModule, declarations: [JsonViewItemComponent,
JsonViewComponent], imports: [CommonModule], exports: [JsonViewComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: JsonViewModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: JsonViewModule, decorators: [{
type: NgModule,
args: [{
declarations: [
JsonViewItemComponent,
JsonViewComponent
],
imports: [
CommonModule
],
exports: [
JsonViewComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { JsonViewComponent, JsonViewModule };
//# sourceMappingURL=nxt-json-view.mjs.map