From 695d9f35d88c08774e476e6357988c2729177ff9 Mon Sep 17 00:00:00 2001 From: Celie Valentiny Date: Fri, 23 Apr 2021 14:19:06 +0100 Subject: [PATCH] =?UTF-8?q?Config-editor-ui:=20Adding=20in=20middle=20of?= =?UTF-8?q?=20tab-array=20+=20fix=20overflow=20bug=20in=20textarea=20+=20s?= =?UTF-8?q?mall=20=E2=80=A6=20(#250)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Adding in middle of tab-array + fix overflow bug in textarea + small lint config change --- config-editor/config-editor-ui/.eslintrc.json | 1 + .../config-editor-ui/eslint-common.json | 8 +- config-editor/config-editor-ui/package.json | 2 +- .../ngx-formly/admin-tabs.type.component.ts | 66 +++--- .../src/app/ngx-formly/array.type.ts | 139 ++++++------ .../expansion-panel-wrapper.component.ts | 10 +- .../src/app/ngx-formly/help-link.wrapper.ts | 113 +++++----- .../app/ngx-formly/input.type.component.ts | 83 ++++---- .../ngx-formly/json-object.type.component.ts | 198 +++++++++--------- .../src/app/ngx-formly/null.type.ts | 1 - .../app/ngx-formly/object.type.component.ts | 16 +- .../app/ngx-formly/panel-wrapper.component.ts | 24 +-- .../ngx-formly/tab-array.type.component.ts | 111 ++++++---- .../app/ngx-formly/tabs-wrapper.component.ts | 10 +- .../app/ngx-formly/tabset.type.component.ts | 26 +-- .../app/ngx-formly/textarea.type.component.ts | 84 ++++---- .../app/ngx-formly/union.type.component.ts | 2 +- 17 files changed, 475 insertions(+), 419 deletions(-) diff --git a/config-editor/config-editor-ui/.eslintrc.json b/config-editor/config-editor-ui/.eslintrc.json index bc1d45e2d..9429506ad 100644 --- a/config-editor/config-editor-ui/.eslintrc.json +++ b/config-editor/config-editor-ui/.eslintrc.json @@ -3,6 +3,7 @@ "env": { "jasmine": true }, + "ignorePatterns": ["src/testing/*"], "overrides": [ { "files": ["*.ts"], diff --git a/config-editor/config-editor-ui/eslint-common.json b/config-editor/config-editor-ui/eslint-common.json index e31a108e6..2ca49255e 100644 --- a/config-editor/config-editor-ui/eslint-common.json +++ b/config-editor/config-editor-ui/eslint-common.json @@ -6,16 +6,12 @@ "eslint:recommended", "plugin:prettier/recommended" ], - "plugins": [ - "sort-keys-fix" - ], "rules": { "@angular-eslint/component-selector": [ "error", - { "type": "element", "prefix": "re", "style": "kebab-case" } + { "type": "element", "prefix": ["re", "formly"], "style": "kebab-case" } ], "no-prototype-builtins": "off", - "sort-keys-fix/sort-keys-fix": "warn", "arrow-parens": [ "error", "as-needed" @@ -50,9 +46,7 @@ "no-return-await": "error", "no-shadow": "off", "no-underscore-dangle": "off", - "no-useless-constructor": "off", "prefer-arrow/prefer-arrow-functions": "off", - "sort-keys": "error", "@angular-eslint/prefer-output-readonly": "error", "@angular-eslint/use-component-view-encapsulation": "error", "@typescript-eslint/array-type": [ diff --git a/config-editor/config-editor-ui/package.json b/config-editor/config-editor-ui/package.json index 6dd5457a7..87e6157cb 100644 --- a/config-editor/config-editor-ui/package.json +++ b/config-editor/config-editor-ui/package.json @@ -1,6 +1,6 @@ { "name": "rule-editor.ui", - "version": "2.0.24", + "version": "2.0.25", "license": "MIT", "scripts": { "ng": "ng", diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/admin-tabs.type.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/admin-tabs.type.component.ts index bba6d950e..83e0ae31c 100644 --- a/config-editor/config-editor-ui/src/app/ngx-formly/admin-tabs.type.component.ts +++ b/config-editor/config-editor-ui/src/app/ngx-formly/admin-tabs.type.component.ts @@ -1,29 +1,37 @@ -import { Component } from '@angular/core'; -import { FieldType } from '@ngx-formly/core'; - -@Component({ - // tslint:disable-next-line:component-selector - selector: 'formly-admintab-type', - template: ` - - - - - - - - - - - - - `, - styles: [` - ::ng-deep .admin-tabs .mat-tab-body-wrapper { - top: 8px !important; - } - `] -}) -export class AdminTabTypeComponent extends FieldType { - tabTypes = ['array', 'object', 'rawobject']; -} +import { Component } from '@angular/core'; +import { FieldType } from '@ngx-formly/core'; + +@Component({ + // tslint:disable-next-line:component-selector + selector: 'formly-admintab-type', + template: ` + + + + + + + + + + + + + `, + styles: [ + ` + ::ng-deep .admin-tabs .mat-tab-body-wrapper { + top: 8px !important; + } + `, + ], +}) +export class AdminTabTypeComponent extends FieldType { + tabTypes = ['array', 'object', 'rawobject']; +} diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/array.type.ts b/config-editor/config-editor-ui/src/app/ngx-formly/array.type.ts index 83101094f..0e392a561 100644 --- a/config-editor/config-editor-ui/src/app/ngx-formly/array.type.ts +++ b/config-editor/config-editor-ui/src/app/ngx-formly/array.type.ts @@ -1,4 +1,3 @@ - import { Component } from '@angular/core'; import { FieldArrayType } from '@ngx-formly/core'; @@ -7,128 +6,142 @@ import { FieldArrayType } from '@ngx-formly/core'; selector: 'formly-array-type', template: ` {{ to.label }} -

{{ to.description }} - - - +

+ {{ to.description }} + + +

-
+
-
- - arrow_drop_up - - - arrow_drop_down - -
- - - +
+ + arrow_drop_up + + + arrow_drop_down + +
+ + +
- +
-
+
+
`, - 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: ` - - + - + `, - styles: [` - .description { + styles: [ + ` + .description { padding: 0 10px 10px 15px; font-size: 0.9em; color: rgba(255, 255, 255, 0.7); - } + } - .mat-card:nth-child(3) { + .mat-card:nth-child(3) { display: none; - } - `], + } + `, + ], }) -export class PanelWrapperComponent extends FieldWrapper { -} +export class PanelWrapperComponent extends FieldWrapper {} diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/tab-array.type.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/tab-array.type.component.ts index c0d1bced2..a76ef7039 100644 --- a/config-editor/config-editor-ui/src/app/ngx-formly/tab-array.type.component.ts +++ b/config-editor/config-editor-ui/src/app/ngx-formly/tab-array.type.component.ts @@ -1,73 +1,110 @@ import { Component } from '@angular/core'; import { FieldArrayType } from '@ngx-formly/core'; - @Component({ selector: 'formly-tab-array', template: `
- - - - - - - - - - - -
- -
+ + + + + + + + + + +
+ +
`, - styles: [` - .close-button { + styles: [ + ` + .close-button { cursor: pointer; top: 6px; right: 6px; fill: orange; z-index: 500; - } + } - .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; - } + } - .align-right { + .align-right { margin-left: auto; margin-right: 0; display: table; padding-top: 5px; - } - `], + } + `, + ], }) export class TabArrayTypeComponent extends FieldArrayType { - public selectedIndex = 0; + public selectedIndex = 0; + + getUnionType(model): string { + const keys = Object.keys(model); + return keys[keys.length - 1]; + } - getEvaluatorType(model) { - const keys = Object.keys(model) - return keys[keys.length-1] + add(i: number) { + super.add(this.model.length); + this.selectedIndex = i; + for (let j = this.model.length - 1; j >= i; j--) { + this.moveDown(j); } + } - add(i: number) { - super.add(i); - this.selectedIndex = i; + moveDown(i: number) { + if (i === this.model.length - 1) { + return; } -} \ No newline at end of file + + this.reorder(i, i + 1); + } + + private reorder(oldI: number, newI: number) { + this.reorderFields(this.field.fieldGroup, oldI, newI); + this.reorderItems(this.model, oldI, newI); + this.reorderItems(this.formControl.controls, oldI, newI); + } + + private reorderItems(obj: any[], oldI: number, newI: number) { + const old = obj[oldI]; + obj[oldI] = obj[newI]; + obj[newI] = old; + } + + private reorderFields(obj: any[], oldI: number, newI: number) { + const old = obj[oldI]; + obj[oldI] = obj[newI]; + obj[oldI].key = `${oldI}`; + + obj[newI] = old; + obj[newI].key = `${newI}`; + } +} diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/tabs-wrapper.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/tabs-wrapper.component.ts index 384d1e424..83c05a180 100644 --- a/config-editor/config-editor-ui/src/app/ngx-formly/tabs-wrapper.component.ts +++ b/config-editor/config-editor-ui/src/app/ngx-formly/tabs-wrapper.component.ts @@ -4,14 +4,12 @@ import { FieldWrapper } from '@ngx-formly/core'; @Component({ // tslint:disable-next-line:component-selector selector: 'formly-wrapper-tabs', - template: - ` + template: ` - + - - `, + `, }) export class TabsWrapperComponent extends FieldWrapper { - @ViewChild('fieldComponent', { read: ViewContainerRef, static: true }) fieldComponent: ViewContainerRef; + @ViewChild('fieldComponent', { read: ViewContainerRef, static: true }) fieldComponent: ViewContainerRef; } diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/tabset.type.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/tabset.type.component.ts index ebc091f49..31d8d9345 100644 --- a/config-editor/config-editor-ui/src/app/ngx-formly/tabset.type.component.ts +++ b/config-editor/config-editor-ui/src/app/ngx-formly/tabset.type.component.ts @@ -5,20 +5,22 @@ import { FieldType } from '@ngx-formly/core'; // tslint:disable-next-line:component-selector selector: 'formly-tabset-type', template: ` - - + + - - + + `, - styles: [` - ::ng-deep .tabset .mat-tab-body-wrapper { - top: 8px !important; - } - `] + styles: [ + ` + ::ng-deep .tabset .mat-tab-body-wrapper { + top: 8px !important; + } + `, + ], }) export class TabsetTypeComponent extends FieldType { - defaultOptions = { - defaultValue: {}, - }; + defaultOptions = { + defaultValue: {}, + }; } diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/textarea.type.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/textarea.type.component.ts index 5f736e037..4d56ce58c 100644 --- a/config-editor/config-editor-ui/src/app/ngx-formly/textarea.type.component.ts +++ b/config-editor/config-editor-ui/src/app/ngx-formly/textarea.type.component.ts @@ -7,73 +7,69 @@ import { take } from 'rxjs/operators'; // tslint:disable-next-line:component-selector selector: 'formly-field-mat-textarea', template: ` - -
-
+ +
`, - styles: [` - .text-area { + styles: [ + ` + .text-area { resize: none; line-height: normal; overflow: hidden; margin: 0; - } + width: 100%; + } - .hide-text { + .hide-text { -webkit-text-fill-color: transparent; - } - - .show-overlay { - display: block; - width: 100%; - overflow-wrap: break-word; - white-space: pre-wrap; - } + } - .highlighted-overlay { + .highlighted-overlay { position: absolute; line-height: normal; - top: 5.5px; + top: 8.5px; left: 0; - z-index: 10; - } + z-index: 10; + width: 100%; + overflow-wrap: break-word; + white-space: pre-wrap; + } - ::ng-deep .mat-input-element { + ::ng-deep .mat-input-element { position: relative; z-index: 20; - } - `], + } + `, + ], }) -export class TextAreaTypeComponent extends FieldType implements AfterViewInit { +export class TextAreaTypeComponent extends FieldType implements AfterViewInit { @ViewChild('autosize') autosize: CdkTextareaAutosize; constructor(private ngZone: NgZone) { super(); - } + } ngAfterViewInit() { this.triggerResize(); } - + triggerResize() { this.ngZone.onStable.pipe(take(1)).subscribe(() => this.autosize.resizeToFitContent(true)); } diff --git a/config-editor/config-editor-ui/src/app/ngx-formly/union.type.component.ts b/config-editor/config-editor-ui/src/app/ngx-formly/union.type.component.ts index 87ca0ab32..3f662428b 100644 --- a/config-editor/config-editor-ui/src/app/ngx-formly/union.type.component.ts +++ b/config-editor/config-editor-ui/src/app/ngx-formly/union.type.component.ts @@ -16,4 +16,4 @@ import { FieldType } from '@ngx-formly/core';
`, }) -export class UnionTypeComponent extends FieldType {} \ No newline at end of file +export class UnionTypeComponent extends FieldType {}