-
+
-
`,
- styles: [`
- legend {
+ styles: [
+ `
+ legend {
font-weight: 400;
margin: 5px;
font-size: 1.3em;
- }
+ }
- .description {
+ .description {
padding: 0 10px 10px 15px;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.7);
display: flex;
justify-content: space-between;
- }
+ }
- .row {
+ .row {
display: flex;
padding-top: 5px;
- }
+ }
- .rhs {
+ .rhs {
margin: 5px auto 5px 0;
- }
+ }
- .close-button {
+ .close-button {
cursor: pointer;
top: 6px;
right: 6px;
fill: orange;
z-index: 500;
- }
+ }
- .add-button {
+ .add-button {
margin: 5px 0 5px 0;
- }
+ }
- .column {
+ .column {
display: block;
width: 16px;
- }
+ }
- .move-arrow {
+ .move-arrow {
width: 14px;
height: 14px;
font-size: 18px;
cursor: pointer;
- }
+ }
- .greyed-out {
+ .greyed-out {
width: 14px;
height: 14px;
font-size: 18px;
color: #707070;
cursor: default;
- }
+ }
- .blank-icon {
+ .blank-icon {
width: 14px;
height: 14px;
opacity: 0;
cursor: default;
- }
+ }
- .close-button:hover { background: rgba(255,255,255,0.2); }
- .array-item:hover > .close-button { visibility: visible }
- .array-item {
+ .close-button:hover {
+ background: rgba(255, 255, 255, 0.2);
+ }
+ .array-item:hover > .close-button {
+ visibility: visible;
+ }
+ .array-item {
flex: 9;
position: relative;
transition: all 0.2s ease-in-out;
- }
- `],
+ }
+ `,
+ ],
})
export class ArrayTypeComponent extends FieldArrayType {
- public showRemoveButton = true;
+ public showRemoveButton = true;
- moveUp (index: number) {
- if (index > 0) {
- this.reorder(index, index - 1);
- }
+ moveUp(index: number) {
+ if (index > 0) {
+ this.reorder(index, index - 1);
}
+ }
- moveDown (index: number) {
- if (index < this.field.fieldGroup.length - 1) {
- this.reorder(index, index + 1);
- }
+ moveDown(index: number) {
+ if (index < this.field.fieldGroup.length - 1) {
+ this.reorder(index, index + 1);
}
+ }
- reorder (oldIndex: number, newIndex: number) {
- const temp = this.model[oldIndex];
- this.remove(oldIndex);
- this.add(newIndex, temp);
- }
+ reorder(oldIndex: number, newIndex: number) {
+ const temp = this.model[oldIndex];
+ this.remove(oldIndex);
+ this.add(newIndex, temp);
+ }
}
diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/expansion-panel-wrapper.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/expansion-panel-wrapper.component.ts
index c30308620..a3027fd0d 100644
--- a/config-editor/config-editor-ui/src/app/ngx-formly/expansion-panel-wrapper.component.ts
+++ b/config-editor/config-editor-ui/src/app/ngx-formly/expansion-panel-wrapper.component.ts
@@ -1,4 +1,3 @@
-
import { Component } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';
@@ -9,15 +8,14 @@ import { FieldWrapper } from '@ngx-formly/core';
- {{ to.label }}
+ {{ to.label }}
- {{ to.description }}
+ {{ to.description }}
-
+
`,
})
-export class ExpansionPanelWrapperComponent extends FieldWrapper {
-}
+export class ExpansionPanelWrapperComponent extends FieldWrapper {}
diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/help-link.wrapper.ts b/config-editor/config-editor-ui/src/app/ngx-formly/help-link.wrapper.ts
index 43054ec33..a39e47673 100644
--- a/config-editor/config-editor-ui/src/app/ngx-formly/help-link.wrapper.ts
+++ b/config-editor/config-editor-ui/src/app/ngx-formly/help-link.wrapper.ts
@@ -1,56 +1,57 @@
-import { Component, ViewChild, ViewContainerRef, TemplateRef, AfterViewInit } from '@angular/core';
-import { FieldWrapper } from '@ngx-formly/core';
-import { copyTextToClipboard } from '@app/commons';
-import { PopupService } from '@app/services/popup.service';
-
-
-@Component({
- selector: 'formly-help-link-wrapper',
- template: `
-
-
-
-
- `,
- styles: [`
- ::ng-deep .link-tooltip {
- max-width: 100px !important;
- }
- `]
-})
-export class HelpLinkWrapperComponent extends FieldWrapper implements AfterViewInit {
- suffixIcon: string;
- @ViewChild('fieldComponent', { read: ViewContainerRef }) fieldComponent: ViewContainerRef;
- @ViewChild('matSuffix') matSuffix: TemplateRef
;
-
- constructor(private snackbar: PopupService) {
- super();
- }
-
- ngAfterViewInit() {
- if (this.matSuffix ) {
- this.to.suffix = this.matSuffix;
- }
- this.suffixIcon = this.to.suffixIcon ? this.to.suffixIcon : "help_outline";
- }
-
- onClick() {
- window.open(this.to.link, "_blank");
- }
-
- onRightClick() {
- this.snackbar.openNotification(
- copyTextToClipboard(this.to.link)
- ? 'URL copied to clipboard!'
- : 'Error copying to clipboard'
- );
- return false;
- }
-}
+import { Component, ViewChild, ViewContainerRef, TemplateRef, AfterViewInit } from '@angular/core';
+import { FieldWrapper } from '@ngx-formly/core';
+import { copyTextToClipboard } from '@app/commons';
+import { PopupService } from '@app/services/popup.service';
+
+@Component({
+ selector: 'formly-help-link-wrapper',
+ template: `
+
+
+
+
+ `,
+ styles: [
+ `
+ ::ng-deep .link-tooltip {
+ max-width: 100px !important;
+ }
+ `,
+ ],
+})
+export class HelpLinkWrapperComponent extends FieldWrapper implements AfterViewInit {
+ @ViewChild('fieldComponent', { read: ViewContainerRef }) fieldComponent: ViewContainerRef;
+ @ViewChild('matSuffix') matSuffix: TemplateRef;
+ suffixIcon: string;
+
+ constructor(private snackbar: PopupService) {
+ super();
+ }
+
+ ngAfterViewInit() {
+ if (this.matSuffix) {
+ this.to.suffix = this.matSuffix;
+ }
+ this.suffixIcon = this.to.suffixIcon ? this.to.suffixIcon : 'help_outline';
+ }
+
+ onClick() {
+ window.open(this.to.link, '_blank');
+ }
+
+ onRightClick() {
+ this.snackbar.openNotification(
+ copyTextToClipboard(this.to.link) ? 'URL copied to clipboard!' : 'Error copying to clipboard'
+ );
+ return false;
+ }
+}
diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/input.type.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/input.type.component.ts
index 078df3c0e..b9c4af20d 100644
--- a/config-editor/config-editor-ui/src/app/ngx-formly/input.type.component.ts
+++ b/config-editor/config-editor-ui/src/app/ngx-formly/input.type.component.ts
@@ -1,40 +1,43 @@
-import { Component, ViewChild } from '@angular/core';
-import { MatInput } from '@angular/material/input';
-import { FieldType } from '@ngx-formly/material/form-field';
-
-@Component({
- // tslint:disable-next-line:component-selector
- selector: 'formly-field-mat-input',
- template: `
-
- `,
- styles: [`
- .hide-text {
- -webkit-text-fill-color: transparent;
- }
-
- .highlighted-overlay {
- position: absolute;
- top: 6px;
- }
- `]
-})
-export class InputTypeComponent extends FieldType {
- @ViewChild(MatInput, { static: true }) formFieldControl!: MatInput;
-
- get type() {
- return this.to.type || 'text';
- }
-}
\ No newline at end of file
+import { Component, ViewChild } from '@angular/core';
+import { MatInput } from '@angular/material/input';
+import { FieldType } from '@ngx-formly/material/form-field';
+
+@Component({
+ // tslint:disable-next-line:component-selector
+ selector: 'formly-field-mat-input',
+ template: `
+
+ `,
+ styles: [
+ `
+ .hide-text {
+ -webkit-text-fill-color: transparent;
+ }
+
+ .highlighted-overlay {
+ position: absolute;
+ top: 6px;
+ }
+ `,
+ ],
+})
+export class InputTypeComponent extends FieldType {
+ @ViewChild(MatInput, { static: true }) formFieldControl!: MatInput;
+
+ get type() {
+ return this.to.type || 'text';
+ }
+}
diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/json-object.type.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/json-object.type.component.ts
index f94710c53..648e217d3 100644
--- a/config-editor/config-editor-ui/src/app/ngx-formly/json-object.type.component.ts
+++ b/config-editor/config-editor-ui/src/app/ngx-formly/json-object.type.component.ts
@@ -1,5 +1,5 @@
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-import { ChangeDetectorRef, Component, NgZone, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, NgZone, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { FieldType } from '@ngx-formly/material/form-field';
import { Subject } from 'rxjs';
import { debounceTime, take, takeUntil } from 'rxjs/operators';
@@ -8,127 +8,131 @@ import { FormControl } from '@angular/forms';
@Component({
// tslint:disable-next-line:component-selector
- selector: 'json-object-type',
- template: `
+ selector: 'formly-json-object-type',
+ template: `
-
+
{{ to.label }}
*
-
-
-
-
-
-
- cancel json is invalid
-
-
-
-
+
+
+
+
-
-
+ cancel json is invalid
+
+
+
+
+
- `,
- styles: [`
- mat-card:last-child {
+ `,
+ styles: [
+ `
+ mat-card:last-child {
display: none;
- }
+ }
- textarea {
+ textarea {
width: 70%;
padding: 5px;
font-family: monospace;
box-sizing: content-box;
- }
+ }
- re-json-tree {
+ re-json-tree {
padding-left: 20px;
max-width: 500px;
- }
+ }
- .row {
+ .row {
display: flex;
- }
- `],
+ }
+ `,
+ ],
})
-export class JsonObjectTypeComponent extends FieldType implements OnInit {
- defaultOptions = {
- defaultValue: {},
- };
- valid = true;
- val: string;
- _val: string;
- jsonChange$: Subject = new Subject();
- tree: object = {};
- @ViewChild('autosize', {static: false}) autosize: CdkTextareaAutosize;
- @ViewChild(MatInput, {static: false}) formFieldControl!: MatInput;
- @ViewChild('formfield', {static: true}) formfield: FormControl;
+export class JsonObjectTypeComponent extends FieldType implements OnInit, OnDestroy {
+ @ViewChild('autosize', { static: false }) autosize: CdkTextareaAutosize;
+ @ViewChild(MatInput, { static: false }) formFieldControl!: MatInput;
+ @ViewChild('formfield', { static: true }) formfield: FormControl;
+ defaultOptions = {
+ defaultValue: {},
+ };
+ valid = true;
+ val: string;
+ _val: string;
+ jsonChange$: Subject = new Subject();
+ tree = {};
- private ngUnsubscribe: Subject = new Subject();
+ private ngUnsubscribe: Subject = new Subject();
- constructor(private changeDetector: ChangeDetectorRef, private ngZone: NgZone) {
- super();
- }
+ constructor(private changeDetector: ChangeDetectorRef, private ngZone: NgZone) {
+ super();
+ }
- ngOnInit() {
- const key = Array.isArray(this.field.key) ? this.field.key[0] : this.field.key
- let conf = this.field.parent.model[key];
- this.val = JSON.stringify(conf, null, 2);
- this.tree = conf;
- this.formControl.setValidators = a => {
- try {
- JSON.parse(this._val);
+ ngOnInit() {
+ const key = Array.isArray(this.field.key) ? this.field.key[0] : this.field.key;
+ const conf = this.field.parent.model[key];
+ this.val = JSON.stringify(conf, null, 2);
+ this.tree = conf;
+ this.formControl.setValidators = () => {
+ try {
+ JSON.parse(this._val);
- return null;
- } catch (e) {
- return {invalidJson: true}
- }
- };
+ return null;
+ } catch (e) {
+ return { invalidJson: true };
+ }
+ };
+ this.changeDetector.markForCheck();
+ this.jsonChange$.pipe(debounceTime(500), takeUntil(this.ngUnsubscribe)).subscribe(s => {
+ this._val = s;
+ try {
+ const parsed = JSON.parse(s);
+ if (parsed) {
+ this.formControl.setErrors(null);
+ this.valid = true;
+ this.tree = parsed;
+ const path = this.getFieldPath(key);
+ this.options.formState['rawObjects'][path] = parsed;
+ this.changeDetector.markForCheck();
+ }
+ } catch (ex) {
+ this.valid = false;
+ this.tree = {};
+ this.formControl.setErrors({ invalid: true });
this.changeDetector.markForCheck();
- this.jsonChange$.pipe(debounceTime(500), takeUntil(this.ngUnsubscribe)).subscribe(s => {
- this._val = s;
- try {
- const parsed = JSON.parse(s);
- if (parsed) {
- this.formControl.setErrors(null);
- this.valid = true;
- this.tree = parsed;
- let path = this.getFieldPath(key);
- this.options.formState['rawObjects'][path] = parsed;
- this.changeDetector.markForCheck();
- }
- } catch (ex) {
- this.valid = false;
- this.tree = {};
- this.formControl.setErrors({invalid: true});
- this.changeDetector.markForCheck();
- }
- })
- }
+ }
+ });
+ }
- triggerResize() {
- this.ngZone.onStable.pipe(take(1)).subscribe(() => this.autosize.resizeToFitContent(true));
- }
-
- private getFieldPath(key: string | number): string {
- let field = this.field;
- let keys = [];
- keys.push(key);
- while (field.parent.key) {
- keys.push(field.parent.key);
- field = field.parent;
- }
- return keys.reverse().join(".");
- }
+ triggerResize() {
+ this.ngZone.onStable.pipe(take(1)).subscribe(() => this.autosize.resizeToFitContent(true));
+ }
+ ngOnDestroy() {
+ this.ngUnsubscribe.next();
+ this.ngUnsubscribe.complete();
+ }
- ngOnDestroy() {
- this.ngUnsubscribe.next();
- this.ngUnsubscribe.complete();
+ private getFieldPath(key: string | number): string {
+ let field = this.field;
+ const keys = [];
+ keys.push(key);
+ while (field.parent.key) {
+ keys.push(field.parent.key);
+ field = field.parent;
}
+ return keys.reverse().join('.');
+ }
}
diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/null.type.ts b/config-editor/config-editor-ui/src/app/ngx-formly/null.type.ts
index 6fd2c11bc..030fc40a1 100644
--- a/config-editor/config-editor-ui/src/app/ngx-formly/null.type.ts
+++ b/config-editor/config-editor-ui/src/app/ngx-formly/null.type.ts
@@ -1,4 +1,3 @@
-
import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';
diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/object.type.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/object.type.component.ts
index 82ff207a3..1e1373d86 100644
--- a/config-editor/config-editor-ui/src/app/ngx-formly/object.type.component.ts
+++ b/config-editor/config-editor-ui/src/app/ngx-formly/object.type.component.ts
@@ -10,14 +10,16 @@ import { FieldType } from '@ngx-formly/core';
`,
- styles: [`
- mat-card:last-child {
+ styles: [
+ `
+ mat-card:last-child {
display: none;
- }
- `],
+ }
+ `,
+ ],
})
export class ObjectTypeComponent extends FieldType {
- defaultOptions = {
- defaultValue: {},
- };
+ defaultOptions = {
+ defaultValue: {},
+ };
}
diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/panel-wrapper.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/panel-wrapper.component.ts
index 0d960e958..9994ea76e 100644
--- a/config-editor/config-editor-ui/src/app/ngx-formly/panel-wrapper.component.ts
+++ b/config-editor/config-editor-ui/src/app/ngx-formly/panel-wrapper.component.ts
@@ -1,4 +1,3 @@
-
import { Component } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';
@@ -7,24 +6,25 @@ import { FieldWrapper } from '@ngx-formly/core';
selector: 'formly-wrapper-panel',
template: `