@covalent/core
Version:
Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.
378 lines (372 loc) • 19.8 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
import { Dir } from '@angular/cdk/bidi';
import { trigger, state, transition, style, AUTO_STYLE, group, query, animate, animateChild } from '@angular/animations';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
import { MatTooltip } from '@angular/material/tooltip';
/**
* 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' } }),
]);
function TdJsonFormatterComponent_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "mat-icon", 9);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", ctx_r0.open ? "keyboard_arrow_down" : ctx_r0.isRTL ? "keyboard_arrow_left" : "keyboard_arrow_right", " ");
} }
function TdJsonFormatterComponent_span_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 10);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1("", ctx_r0.key, ":");
} }
function TdJsonFormatterComponent_span_5_span_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 14);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1("[", ctx_r0.data["length"], "]");
} }
function TdJsonFormatterComponent_span_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 11)(1, "span", 12);
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
i0.ɵɵtemplate(3, TdJsonFormatterComponent_span_5_span_3_Template, 2, 1, "span", 13);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵclassProp("td-empty", !ctx_r0.hasChildren());
i0.ɵɵproperty("matTooltip", ctx_r0.getPreview());
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx_r0.getObjectName());
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r0.isArray());
} }
function TdJsonFormatterComponent_span_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵclassMap(ctx_r0.getType(ctx_r0.data));
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r0.getValue(ctx_r0.data));
} }
function TdJsonFormatterComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "td-json-formatter", 15);
} if (rf & 2) {
const key_r2 = ctx.$implicit;
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵproperty("key", key_r2)("data", ctx_r0.data[key_r2])("levelsOpen", ctx_r0.levelsOpen - 1);
} }
class TdJsonFormatterComponent {
_changeDetectorRef = inject(ChangeDetectorRef);
_dir = inject(Dir, { optional: true });
/**
* 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;
}
/**
* 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 = function TdJsonFormatterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdJsonFormatterComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdJsonFormatterComponent, selectors: [["td-json-formatter"]], inputs: { levelsOpen: "levelsOpen", key: "key", data: "data" }, decls: 9, vars: 11, consts: [[1, "td-json-formatter-wrapper"], [1, "td-key", 3, "keydown.enter", "click", "tabIndex"], ["class", "td-node-icon", 4, "ngIf"], ["class", "key", 4, "ngIf"], [1, "value"], ["matTooltipPosition", "after", 3, "td-empty", "matTooltip", 4, "ngIf"], [3, "class", 4, "ngIf"], [1, "td-object-children"], ["ngFor", "", 3, "ngForOf"], [1, "td-node-icon"], [1, "key"], ["matTooltipPosition", "after", 3, "matTooltip"], [1, "td-object-name"], ["class", "td-array-length", 4, "ngIf"], [1, "td-array-length"], [3, "key", "data", "levelsOpen"]], template: function TdJsonFormatterComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 0)(1, "a", 1);
i0.ɵɵlistener("keydown.enter", function TdJsonFormatterComponent_Template_a_keydown_enter_1_listener() { return ctx.toggle(); })("click", function TdJsonFormatterComponent_Template_a_click_1_listener() { return ctx.toggle(); });
i0.ɵɵtemplate(2, TdJsonFormatterComponent_mat_icon_2_Template, 2, 1, "mat-icon", 2)(3, TdJsonFormatterComponent_span_3_Template, 2, 1, "span", 3);
i0.ɵɵelementStart(4, "span", 4);
i0.ɵɵtemplate(5, TdJsonFormatterComponent_span_5_Template, 4, 5, "span", 5)(6, TdJsonFormatterComponent_span_6_Template, 2, 3, "span", 6);
i0.ɵɵelementEnd()();
i0.ɵɵelementStart(7, "div", 7);
i0.ɵɵtemplate(8, TdJsonFormatterComponent_ng_template_8_Template, 1, 3, "ng-template", 8);
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵclassProp("td-key-node", ctx.hasChildren())("td-key-leaf", !ctx.hasChildren());
i0.ɵɵproperty("tabIndex", ctx.isObject() ? 0 : -1);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.hasChildren());
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.key);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx.isObject());
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx.isObject());
i0.ɵɵadvance();
i0.ɵɵproperty("@tdCollapse", !(ctx.hasChildren() && ctx.open));
i0.ɵɵadvance();
i0.ɵɵproperty("ngForOf", ctx.children);
} }, dependencies: [TdJsonFormatterComponent, CommonModule, i1.NgForOf, i1.NgIf, MatIcon, MatTooltip], styles: ["[_nghost-%COMP%]{display:block}.td-json-formatter-wrapper[_ngcontent-%COMP%]{padding-top:2px;padding-bottom:2px}.td-json-formatter-wrapper[_ngcontent-%COMP%] .td-key[_ngcontent-%COMP%]{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[_ngcontent-%COMP%] .td-key.td-key-node[_ngcontent-%COMP%]:hover{cursor:pointer}.td-json-formatter-wrapper[_ngcontent-%COMP%] .td-object-children.ng-animating[_ngcontent-%COMP%]{overflow:hidden}.td-json-formatter-wrapper[_ngcontent-%COMP%] .td-object-children[_ngcontent-%COMP%] .td-key[_ngcontent-%COMP%], .td-json-formatter-wrapper[_ngcontent-%COMP%] .td-object-children[_ngcontent-%COMP%] .td-object-children[_ngcontent-%COMP%]{padding-left:24px} [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-key, [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-object-children{padding-right:24px;padding-left:0}.td-json-formatter-wrapper[_ngcontent-%COMP%] .td-object-children[_ngcontent-%COMP%] .td-key.td-key-leaf[_ngcontent-%COMP%], .td-json-formatter-wrapper[_ngcontent-%COMP%] .td-object-children[_ngcontent-%COMP%] .td-object-children.td-key-leaf[_ngcontent-%COMP%]{padding-left:48px} [dir=rtl] .td-json-formatter-wrapper .td-object-children .td-key.td-key-leaf, [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[_ngcontent-%COMP%] .value[_ngcontent-%COMP%]{margin-left:5px} [dir=rtl] .td-json-formatter-wrapper .value{padding-right:5px;padding-left:0}.td-json-formatter-wrapper[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] .td-empty[_ngcontent-%COMP%]{opacity:.5;text-decoration:line-through}.td-json-formatter-wrapper[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] .string[_ngcontent-%COMP%], .td-json-formatter-wrapper[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] .date[_ngcontent-%COMP%]{word-break:break-word}"], data: { animation: [tdCollapseAnimation] }, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdJsonFormatterComponent, [{
type: Component,
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'td-json-formatter', imports: [CommonModule, MatIcon, MatTooltip], 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"] }]
}], null, { levelsOpen: [{
type: Input
}], key: [{
type: Input
}], data: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdJsonFormatterComponent, { className: "TdJsonFormatterComponent", filePath: "json-formatter.component.ts", lineNumber: 22 }); })();
/**
* @deprecated This module is deprecated and will be removed in future versions.
* Please migrate to using standalone components as soon as possible.
*/
class CovalentJsonFormatterModule {
static ɵfac = function CovalentJsonFormatterModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentJsonFormatterModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CovalentJsonFormatterModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [TdJsonFormatterComponent] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentJsonFormatterModule, [{
type: NgModule,
args: [{
imports: [TdJsonFormatterComponent],
exports: [TdJsonFormatterComponent],
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentJsonFormatterModule, { imports: [TdJsonFormatterComponent], exports: [TdJsonFormatterComponent] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { CovalentJsonFormatterModule, TdJsonFormatterComponent };
//# sourceMappingURL=covalent-core-json-formatter.mjs.map