ngx-xml-message
Version:
This form is used to design Angular Reactive Form using any given XML. The primary use of this Readonly UI library is to design ISO 20022 XML messages in forms dynamically.
179 lines (173 loc) • 20.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i3 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i4 from '@angular/material/expansion';
import { MatExpansionModule } from '@angular/material/expansion';
import * as i5 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i6 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i7 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i8 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
class NgxXmlMessageComponent {
constructor() {
this.namespace = {};
}
ngOnChanges(changes) {
if (changes['xmlMessage'] && changes['xmlMessage'].currentValue) {
this.namespace = {};
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(this.xmlMessage, 'text/xml');
const document = this.parseXML(xmlDoc.childNodes[0]);
if (document) {
this.jsonMessage = document;
}
else {
this.jsonMessage = [];
}
}
}
isArray(myKey) {
if (myKey instanceof Array) {
return true;
}
return false;
}
isObject(object) {
if (!(object instanceof Array) && object instanceof Object) {
return true;
}
return false;
}
getKeys(object) {
if (object) {
return Object.keys(object);
}
return [];
}
getKeyName(object) {
if (object) {
return Object.keys(object)[0];
}
return '';
}
copyToClipboard(value) {
navigator.clipboard.writeText(value);
}
parseXML(node) {
if (node.nodeType === Node.ELEMENT_NODE) {
const obj = {};
obj[node.nodeName] = {};
if (node.hasChildNodes()) {
for (let childNode of Array.from(node.childNodes)) {
const childObj = this.parseXML(childNode);
if (typeof childObj === 'object' && childNode.nodeType !== Node.TEXT_NODE && Object.keys(childObj).length > 0) {
if (obj[node.nodeName][childNode.nodeName]) {
obj[node.nodeName][childNode.nodeName] = [structuredClone(obj[node.nodeName][childNode.nodeName])];
obj[node.nodeName][childNode.nodeName].push(childObj[childNode.nodeName]);
}
else {
obj[node.nodeName][childNode.nodeName] = {};
obj[node.nodeName][childNode.nodeName] = childObj[childNode.nodeName];
}
}
else if (childObj && node.attributes && node.attributes.length) {
obj[node.nodeName] = { value: childObj };
}
else if (childObj && Object.keys(childObj).length > 0) {
obj[node.nodeName] = childObj;
}
}
}
if (node.attributes && node.attributes.length > 0) {
for (const attribute of Array.from(node.attributes)) {
if (attribute.nodeName === 'xmlns') {
this.namespace[node.nodeName] = attribute.nodeValue;
}
else {
if (![node.nodeName]['_attributes']) {
obj[node.nodeName]['_attributes'] = {};
}
obj[node.nodeName]['_attributes'][attribute.nodeName] = attribute.nodeValue;
}
}
}
return obj;
}
else if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.CDATA_SECTION_NODE) {
return node.nodeValue.trim();
}
return {};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxXmlMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgxXmlMessageComponent, isStandalone: false, selector: "ngx-xml-message", inputs: { xmlMessage: "xmlMessage", config: "config" }, usesOnChanges: true, ngImport: i0, template: "<form *ngIf=\"jsonMessage\">\r\n <div class=\"form-group\">\r\n <ng-template #nodeTemplateRef let-node=\"node\" let-index=\"index\" let-key=\"key\">\r\n <ng-container *ngIf=\"isArray(node) then arr else obj\"></ng-container>\r\n <ng-template #arr>\r\n <ng-template *ngFor=\"let model of node;let i = index\" [ngTemplateOutlet]=\"nodeTemplateRef\"\r\n [ngTemplateOutletContext]=\"{\r\n node: model,\r\n key: key,\r\n }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #obj>\r\n <ng-container *ngIf=\"isObject(node)\">\r\n <mat-accordion>\r\n <mat-expansion-panel multi [expanded]=\"true\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{namespace[key] && config.showNamespace ? key + ' - ' + namespace[key] : key | translate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <ng-container>\r\n <div *ngIf=\"node._attributes === undefined\">\r\n <ng-template *ngFor=\"let key of getKeys(node);let i = index\"\r\n [ngTemplateOutlet]=\"nodeTemplateRef\" [ngTemplateOutletContext]=\"{\r\n node: node[key],\r\n key: key\r\n }\">\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"node._attributes !== undefined\">\r\n <mat-form-field class=\"form-control form-control-s\"\r\n *ngFor=\"let attr of getKeys(node._attributes)\">\r\n <mat-label>{{ attr | translate }}</mat-label>\r\n <input matInput [readonly]=\"true\" value=\"{{node._attributes[attr]}}\">\r\n <button *ngIf=\"config.showCopy\" mat-icon-button matSuffix (click)=\"copyToClipboard(node._attributes[attr])\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n <mat-form-field class=\"form-control form-control-m\">\r\n <mat-label>{{ node.value | translate }}</mat-label>\r\n <input matInput [readonly]=\"true\" value=\"{{node.value}}\">\r\n <button *ngIf=\"config.showCopy\" mat-icon-button matSuffix (click)=\"copyToClipboard(node.value)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isObject(node)\">\r\n <mat-form-field *ngIf=\"node && node.length <= 70\" class=\"form-control {{node && node.length > 70 ? 'form-control-l': 'form-control-m'}}\">\r\n <mat-label>{{ key | translate }}</mat-label>\r\n <input matInput [readonly]=\"true\" value=\"{{node}}\">\r\n <button *ngIf=\"config.showCopy\" mat-icon-button matSuffix (click)=\"copyToClipboard(node)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"node && node.length > 70\" class=\"form-control form-control-full\">\r\n <mat-label>{{ key | translate }}</mat-label>\r\n <textarea matInput [readonly]=\"true\">{{node}}</textarea>\r\n <button *ngIf=\"config.showCopy\" mat-icon-button matSuffix (click)=\"copyToClipboard(node)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-template>\r\n </ng-template>\r\n\r\n <ng-container>\r\n <ng-template *ngFor=\"let key of getKeys(jsonMessage);\"\r\n [ngTemplateOutlet]=\"nodeTemplateRef\" [ngTemplateOutletContext]=\"{\r\n node: jsonMessage[key],\r\n key: key\r\n }\">\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n</form>", styles: [":host .mat-expansion-panel-header-description{justify-content:space-between;align-items:center}:host .mat-expansion-panel{width:100%;margin:5px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxXmlMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-xml-message', standalone: false, template: "<form *ngIf=\"jsonMessage\">\r\n <div class=\"form-group\">\r\n <ng-template #nodeTemplateRef let-node=\"node\" let-index=\"index\" let-key=\"key\">\r\n <ng-container *ngIf=\"isArray(node) then arr else obj\"></ng-container>\r\n <ng-template #arr>\r\n <ng-template *ngFor=\"let model of node;let i = index\" [ngTemplateOutlet]=\"nodeTemplateRef\"\r\n [ngTemplateOutletContext]=\"{\r\n node: model,\r\n key: key,\r\n }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #obj>\r\n <ng-container *ngIf=\"isObject(node)\">\r\n <mat-accordion>\r\n <mat-expansion-panel multi [expanded]=\"true\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{namespace[key] && config.showNamespace ? key + ' - ' + namespace[key] : key | translate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <ng-container>\r\n <div *ngIf=\"node._attributes === undefined\">\r\n <ng-template *ngFor=\"let key of getKeys(node);let i = index\"\r\n [ngTemplateOutlet]=\"nodeTemplateRef\" [ngTemplateOutletContext]=\"{\r\n node: node[key],\r\n key: key\r\n }\">\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"node._attributes !== undefined\">\r\n <mat-form-field class=\"form-control form-control-s\"\r\n *ngFor=\"let attr of getKeys(node._attributes)\">\r\n <mat-label>{{ attr | translate }}</mat-label>\r\n <input matInput [readonly]=\"true\" value=\"{{node._attributes[attr]}}\">\r\n <button *ngIf=\"config.showCopy\" mat-icon-button matSuffix (click)=\"copyToClipboard(node._attributes[attr])\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n <mat-form-field class=\"form-control form-control-m\">\r\n <mat-label>{{ node.value | translate }}</mat-label>\r\n <input matInput [readonly]=\"true\" value=\"{{node.value}}\">\r\n <button *ngIf=\"config.showCopy\" mat-icon-button matSuffix (click)=\"copyToClipboard(node.value)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n </ng-container>\r\n\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isObject(node)\">\r\n <mat-form-field *ngIf=\"node && node.length <= 70\" class=\"form-control {{node && node.length > 70 ? 'form-control-l': 'form-control-m'}}\">\r\n <mat-label>{{ key | translate }}</mat-label>\r\n <input matInput [readonly]=\"true\" value=\"{{node}}\">\r\n <button *ngIf=\"config.showCopy\" mat-icon-button matSuffix (click)=\"copyToClipboard(node)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"node && node.length > 70\" class=\"form-control form-control-full\">\r\n <mat-label>{{ key | translate }}</mat-label>\r\n <textarea matInput [readonly]=\"true\">{{node}}</textarea>\r\n <button *ngIf=\"config.showCopy\" mat-icon-button matSuffix (click)=\"copyToClipboard(node)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-template>\r\n </ng-template>\r\n\r\n <ng-container>\r\n <ng-template *ngFor=\"let key of getKeys(jsonMessage);\"\r\n [ngTemplateOutlet]=\"nodeTemplateRef\" [ngTemplateOutletContext]=\"{\r\n node: jsonMessage[key],\r\n key: key\r\n }\">\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n</form>", styles: [":host .mat-expansion-panel-header-description{justify-content:space-between;align-items:center}:host .mat-expansion-panel{width:100%;margin:5px 0}\n"] }]
}], ctorParameters: () => [], propDecorators: { xmlMessage: [{
type: Input,
args: [{ required: true }]
}], config: [{
type: Input
}] } });
class NgxXmlMessageModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxXmlMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxXmlMessageModule, declarations: [NgxXmlMessageComponent], imports: [BrowserModule,
BrowserAnimationsModule,
MatIconModule,
TranslateModule,
FormsModule,
ReactiveFormsModule,
MatExpansionModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule], exports: [NgxXmlMessageComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxXmlMessageModule, imports: [BrowserModule,
BrowserAnimationsModule,
MatIconModule,
TranslateModule,
FormsModule,
ReactiveFormsModule,
MatExpansionModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxXmlMessageModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxXmlMessageComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatIconModule,
TranslateModule,
FormsModule,
ReactiveFormsModule,
MatExpansionModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule
],
exports: [NgxXmlMessageComponent]
}]
}] });
/*
* Public API Surface of ngx-xml-message
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxXmlMessageComponent, NgxXmlMessageModule };
//# sourceMappingURL=ngx-xml-message.mjs.map