@covalent/core/fesm2022/covalent-core-json-formatter.mjs

import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Optional, Input, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i4 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i1 from '@angular/cdk/bidi';
import { trigger, state, style, AUTO_STYLE, transition, group, query, animateChild, animate } from '@angular/animations';

/**
 * const tdCollapseAnimation
 *
 * Parameter Options:
 * * duration: Duration the animation will run in milliseconds. Defaults to 150 ms.
 * * delay: Delay before the animation will run in milliseconds. Defaults to 0 ms.
 * * easeOnClose: Animation accelerates and decelerates when closing. Defaults to ease-in.
 * * easeOnOpen: Animation accelerates and decelerates when opening. Defaults to ease-out.
 *
 * Returns an [AnimationTriggerMetadata] object with boolean states for a collapse/expand animation.
 *
 * usage: [@tdCollapse]="{ value: true | false, params: { duration: 500 }}"
 */
const tdCollapseAnimation = trigger('tdCollapse', [
    state('1', style({
        height: '0',
        overflow: 'hidden',
    })),
    state('0', style({
        height: AUTO_STYLE,
        overflow: AUTO_STYLE,
    })),
    transition('0 => 1', [
        style({
            overflow: 'hidden',
            height: AUTO_STYLE,
        }),
        group([
            query('@*', animateChild(), { optional: true }),
            animate('{{ duration }}ms {{ delay }}ms {{ ease }}', style({
                height: '0',
                overflow: 'hidden',
            })),
        ]),
    ], { params: { duration: 150, delay: '0', ease: 'ease-in' } }),
    transition('1 => 0', [
        style({
            height: '0',
            overflow: 'hidden',
        }),
        group([
            query('@*', animateChild(), { optional: true }),
            animate('{{ duration }}ms {{ delay }}ms {{ ease }}', style({
                overflow: 'hidden',
                height: AUTO_STYLE,
            })),
        ]),
    ], { params: { duration: 150, delay: '0', ease: 'ease-out' } }),
]);

class TdJsonFormatterComponent {
    _changeDetectorRef;
    _dir;
    /**
     * Max length for property names. Any names bigger than this get trunctated.
     */
    static KEY_MAX_LENGTH = 30;
    /**
     * Max length for preview string. Any names bigger than this get trunctated.
     */
    static PREVIEW_STRING_MAX_LENGTH = 80;
    /**
     * Max tooltip preview elements.
     */
    static PREVIEW_LIMIT = 5;
    _key;
    _data;
    _children;
    _open = false;
    _levelsOpen = 0;
    /**
     * levelsOpen?: number
     * Levels opened by default when JS object is formatted and rendered.
     */
    set levelsOpen(levelsOpen) {
        if (!Number.isInteger(levelsOpen)) {
            throw new Error('[levelsOpen] needs to be an integer.');
        }
        this._levelsOpen = levelsOpen;
        this._open = levelsOpen > 0;
    }
    get levelsOpen() {
        return this._levelsOpen;
    }
    get open() {
        return this._open;
    }
    /**
     * key?: string
     * Tag to be displayed next to formatted object.
     */
    set key(key) {
        this._key = key;
    }
    get key() {
        const elipsis = this._key && this._key.length > TdJsonFormatterComponent.KEY_MAX_LENGTH
            ? '…'
            : '';
        return this._key
            ? this._key.substring(0, TdJsonFormatterComponent.KEY_MAX_LENGTH) +
                elipsis
            : this._key ?? '';
    }
    /**
     * data: any
     * JS object to be formatted.
     */
    set data(data) {
        this._data = data;
        this.parseChildren();
    }
    get data() {
        return this._data;
    }
    get children() {
        return this._children ?? [];
    }
    get isRTL() {
        if (this._dir) {
            return this._dir.dir === 'rtl';
        }
        return false;
    }
    constructor(_changeDetectorRef, _dir) {
        this._changeDetectorRef = _changeDetectorRef;
        this._dir = _dir;
    }
    /**
     * Refreshes json-formatter and rerenders [data]
     */
    refresh() {
        this._changeDetectorRef.markForCheck();
    }
    /**
     * Toggles collapse/expanded state of component.
     */
    toggle() {
        this._open = !this._open;
    }
    isObject() {
        return this.getType(this._data) === 'object';
    }
    isArray() {
        return Array.isArray(this._data);
    }
    hasChildren() {
        return (this._children && this._children.length > 0) ?? false;
    }
    /**
     * Gets parsed value depending on value type.
     */
    getValue(value) {
        const type = this.getType(value);
        if (type === 'undefined' || type === 'null') {
            return type;
        }
        else if (type === 'date') {
            value = new Date(value).toString();
        }
        else if (type === 'string') {
            value = '"' + value + '"';
        }
        else if (type === 'function') {
            // Remove content of the function
            return (value
                .toString()
                .replace(/[\r\n]/g, '')
                .replace(/\{.*\}/, '') + '{…}');
        }
        else if (Array.isArray(value)) {
            return this.getObjectName() + ' [' + value.length + ']';
        }
        return value;
    }
    /**
     * Gets type of object.
     * returns 'null' if object is null and 'date' if value is object and can be parsed to a date.
     */
    getType(object) {
        if (typeof object === 'object') {
            if (!object) {
                return 'null';
            }
            if (Array.isArray(object)) {
                return 'object';
            }
            const date = new Date(object);
            if (Object.prototype.toString.call(date) === '[object Date]' &&
                !Number.isNaN(date.getTime())) {
                return 'date';
            }
        }
        return typeof object;
    }
    /**
     * Generates string representation depending if its an object or function.
     * see: http://stackoverflow.com/a/332429
     */
    getObjectName() {
        const object = this._data;
        if (this.isObject() && !object.constructor) {
            return 'Object';
        }
        const funcNameRegex = /function (.{1,})\(/;
        const results = funcNameRegex.exec(object.constructor.toString());
        if (results && results.length > 1) {
            return results[1];
        }
        else {
            return '';
        }
    }
    /**
     * Creates preview of nodes children to render in tooltip depending if its an array or an object.
     */
    getPreview() {
        let previewData;
        let startChar = '{ ';
        let endChar = ' }';
        if (this.isArray()) {
            const previewArray = Object.entries(this._data).slice(0, TdJsonFormatterComponent.PREVIEW_LIMIT) ?? [];
            previewData = previewArray.map((obj) => {
                return this.getValue(obj);
            });
            startChar = '[';
            endChar = ']';
        }
        else {
            const previewKeys = this._children?.slice(0, TdJsonFormatterComponent.PREVIEW_LIMIT) ?? [];
            previewData = previewKeys.map((key) => {
                return key + ': ' + this.getValue(this._data[key] ?? undefined);
            });
        }
        const previewString = previewData.join(', ');
        const ellipsis = previewData.length >= TdJsonFormatterComponent.PREVIEW_LIMIT ||
            previewString.length > TdJsonFormatterComponent.PREVIEW_STRING_MAX_LENGTH
            ? '…'
            : '';
        return (startChar +
            previewString.substring(0, TdJsonFormatterComponent.PREVIEW_STRING_MAX_LENGTH) +
            ellipsis +
            endChar);
    }
    parseChildren() {
        if (this.isObject()) {
            this._children = Object.keys(this._data ?? {});
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdJsonFormatterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Dir, optional: true }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdJsonFormatterComponent, selector: "td-json-formatter", inputs: { levelsOpen: "levelsOpen", key: "key", data: "data" }, ngImport: i0, template: "<div class=\"td-json-formatter-wrapper\">\n  <a\n    class=\"td-key\"\n    [class.td-key-node]=\"hasChildren()\"\n    [class.td-key-leaf]=\"!hasChildren()\"\n    [tabIndex]=\"isObject() ? 0 : -1\"\n    (keydown.enter)=\"toggle()\"\n    (click)=\"toggle()\"\n  >\n    <mat-icon class=\"td-node-icon\" *ngIf=\"hasChildren()\">\n      {{\n        open\n          ? 'keyboard_arrow_down'\n          : isRTL\n          ? 'keyboard_arrow_left'\n          : 'keyboard_arrow_right'\n      }}\n    </mat-icon>\n    <span *ngIf=\"key\" class=\"key\">{{ key }}:</span>\n    <span class=\"value\">\n      <span\n        [class.td-empty]=\"!hasChildren()\"\n        *ngIf=\"isObject()\"\n        [matTooltip]=\"getPreview()\"\n        matTooltipPosition=\"after\"\n      >\n        <span class=\"td-object-name\">{{ getObjectName() }}</span>\n        <span class=\"td-array-length\" *ngIf=\"isArray()\"\n          >[{{ data['length'] }}]</span\n        >\n      </span>\n      <span *ngIf=\"!isObject()\" [class]=\"getType(data)\">{{\n        getValue(data)\n      }}</span>\n    </span>\n  </a>\n  <div class=\"td-object-children\" [@tdCollapse]=\"!(hasChildren() && open)\">\n    <ng-template let-key ngFor [ngForOf]=\"children\">\n      <td-json-formatter\n        [key]=\"key\"\n        [data]=\"data[key]\"\n        [levelsOpen]=\"levelsOpen - 1\"\n      ></td-json-formatter>\n    </ng-template>\n  </div>\n</div>\n", styles: [":host{display:block}.td-json-formatter-wrapper{padding-top:2px;padding-bottom:2px}.td-json-formatter-wrapper .td-key{box-sizing:border-box;display:flex;flex-direction:row;align-items:flex-start;align-content:center;max-width:100%;justify-content:flex-start}.td-json-formatter-wrapper .td-key.td-key-node:hover{cursor:pointer}.td-json-formatter-wrapper .td-object-children.ng-animating{overflow:hidden}.td-json-formatter-wrapper .td-object-children .td-key,.td-json-formatter-wrapper .td-object-children .td-object-children{padding-left:24px}::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-key,::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-object-children{padding-right:24px;padding-left:0}.td-json-formatter-wrapper .td-object-children .td-key.td-key-leaf,.td-json-formatter-wrapper .td-object-children .td-object-children.td-key-leaf{padding-left:48px}::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-key.td-key-leaf,::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-object-children.td-key-leaf{padding-right:48px;padding-left:0}.td-json-formatter-wrapper .value{margin-left:5px}::ng-deep [dir=rtl] .td-json-formatter-wrapper .value{padding-right:5px;padding-left:0}.td-json-formatter-wrapper .value .td-empty{opacity:.5;text-decoration:line-through}.td-json-formatter-wrapper .value .string,.td-json-formatter-wrapper .value .date{word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TdJsonFormatterComponent, selector: "td-json-formatter", inputs: ["levelsOpen", "key", "data"] }], animations: [tdCollapseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdJsonFormatterComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'td-json-formatter', animations: [tdCollapseAnimation], template: "<div class=\"td-json-formatter-wrapper\">\n  <a\n    class=\"td-key\"\n    [class.td-key-node]=\"hasChildren()\"\n    [class.td-key-leaf]=\"!hasChildren()\"\n    [tabIndex]=\"isObject() ? 0 : -1\"\n    (keydown.enter)=\"toggle()\"\n    (click)=\"toggle()\"\n  >\n    <mat-icon class=\"td-node-icon\" *ngIf=\"hasChildren()\">\n      {{\n        open\n          ? 'keyboard_arrow_down'\n          : isRTL\n          ? 'keyboard_arrow_left'\n          : 'keyboard_arrow_right'\n      }}\n    </mat-icon>\n    <span *ngIf=\"key\" class=\"key\">{{ key }}:</span>\n    <span class=\"value\">\n      <span\n        [class.td-empty]=\"!hasChildren()\"\n        *ngIf=\"isObject()\"\n        [matTooltip]=\"getPreview()\"\n        matTooltipPosition=\"after\"\n      >\n        <span class=\"td-object-name\">{{ getObjectName() }}</span>\n        <span class=\"td-array-length\" *ngIf=\"isArray()\"\n          >[{{ data['length'] }}]</span\n        >\n      </span>\n      <span *ngIf=\"!isObject()\" [class]=\"getType(data)\">{{\n        getValue(data)\n      }}</span>\n    </span>\n  </a>\n  <div class=\"td-object-children\" [@tdCollapse]=\"!(hasChildren() && open)\">\n    <ng-template let-key ngFor [ngForOf]=\"children\">\n      <td-json-formatter\n        [key]=\"key\"\n        [data]=\"data[key]\"\n        [levelsOpen]=\"levelsOpen - 1\"\n      ></td-json-formatter>\n    </ng-template>\n  </div>\n</div>\n", styles: [":host{display:block}.td-json-formatter-wrapper{padding-top:2px;padding-bottom:2px}.td-json-formatter-wrapper .td-key{box-sizing:border-box;display:flex;flex-direction:row;align-items:flex-start;align-content:center;max-width:100%;justify-content:flex-start}.td-json-formatter-wrapper .td-key.td-key-node:hover{cursor:pointer}.td-json-formatter-wrapper .td-object-children.ng-animating{overflow:hidden}.td-json-formatter-wrapper .td-object-children .td-key,.td-json-formatter-wrapper .td-object-children .td-object-children{padding-left:24px}::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-key,::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-object-children{padding-right:24px;padding-left:0}.td-json-formatter-wrapper .td-object-children .td-key.td-key-leaf,.td-json-formatter-wrapper .td-object-children .td-object-children.td-key-leaf{padding-left:48px}::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-key.td-key-leaf,::ng-deep [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-object-children.td-key-leaf{padding-right:48px;padding-left:0}.td-json-formatter-wrapper .value{margin-left:5px}::ng-deep [dir=rtl] .td-json-formatter-wrapper .value{padding-right:5px;padding-left:0}.td-json-formatter-wrapper .value .td-empty{opacity:.5;text-decoration:line-through}.td-json-formatter-wrapper .value .string,.td-json-formatter-wrapper .value .date{word-break:break-word}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Dir, decorators: [{
                    type: Optional
                }] }], propDecorators: { levelsOpen: [{
                type: Input
            }], key: [{
                type: Input
            }], data: [{
                type: Input
            }] } });

class CovalentJsonFormatterModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentJsonFormatterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: CovalentJsonFormatterModule, declarations: [TdJsonFormatterComponent], imports: [CommonModule, MatTooltipModule, MatIconModule], exports: [TdJsonFormatterComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentJsonFormatterModule, imports: [CommonModule, MatTooltipModule, MatIconModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentJsonFormatterModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, MatTooltipModule, MatIconModule],
                    declarations: [TdJsonFormatterComponent],
                    exports: [TdJsonFormatterComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { CovalentJsonFormatterModule, TdJsonFormatterComponent };
//# sourceMappingURL=covalent-core-json-formatter.mjs.map