Remove text field and area appearance variants and fix remaining

The other  variants are basically the same as filled. The only
difference is the background color, which we are manilupating anyway.
So there is no reason to keep them.

Also for the background color directive different target elements are
needed for the different appearance variants. This is now possible.
As stylings of the old appearance are kept when changing the appearance
the styles need to be removed first.
In the moment the appearance value is changed the component is not
actually changed yet and there we need to wait for another Angular
change detection cycle, via timeout.

projects/common/directives/input-background-color.directive.ts

 import {
-  AfterViewInit,
-  Directive, ElementRef, Input, OnChanges
+  Directive, ElementRef, Input, OnChanges, SimpleChanges
 } from '@angular/core';
 
 @Directive({
   selector: '[appInputBackgroundColor]'
 })
-export class InputBackgroundColorDirective implements AfterViewInit, OnChanges {
+export class InputBackgroundColorDirective implements OnChanges {
   @Input() backgroundColor!: string;
-  private targetElements!: HTMLElement[];
+  @Input() appearance!: string;
 
   constructor(private elementRef: ElementRef) { }
 
-  ngAfterViewInit(): void {
-    this.targetElements = this.elementRef.nativeElement.querySelector('div.mat-form-field-outline')?.children;
-    this.setBackgroundColor();
-  }
-
-  ngOnChanges(): void {
-    this.setBackgroundColor();
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.appearance && !changes.appearance.firstChange) {
+      this.clearFilledBackgroundColor();
+    }
+    setTimeout(() => { // wait for Angular to set up the component before manipulating it
+      this.setBackgroundColor();
+    });
   }
 
   private setBackgroundColor(): void {
+    let targetElements: HTMLElement[] = [];
+    if (this.appearance === 'outline') {
+      targetElements = this.elementRef.nativeElement.querySelector('div.mat-form-field-outline')?.children;
+    } else {
+      targetElements = [this.elementRef.nativeElement.querySelector('div.mat-form-field-flex')];
+    }
     // This fails, when component is not set up yet, therefore the extra check
-    if (this.targetElements) {
-      for (const element of this.targetElements) {
+    if (targetElements) {
+      Array.from(targetElements).forEach((element: HTMLElement) => {
         element.style.setProperty('background-color', this.backgroundColor);
-      }
+      });
     }
   }
+
+  /* Clear styling of old appearance before switching */
+  private clearFilledBackgroundColor(): void {
+    const targetElement: HTMLElement = this.elementRef.nativeElement.querySelector('div.mat-form-field-flex');
+    targetElement?.style.removeProperty('background-color');
+  }
 }

projects/common/ui-elements/text-area/text-area-element.ts

@@ -10,7 +10,7 @@ import {
 import { initFontElement, initPositionedElement, initSurfaceElement } from '../../util/unit-interface-initializer';
 
 export class TextAreaElement extends InputElement implements PositionedElement, FontElement, SurfaceElement {
-  appearance: 'standard' | 'legacy' | 'fill' | 'outline' = 'outline';
+  appearance: 'fill' | 'outline' = 'outline';
   resizeEnabled: boolean = false;
   rowCount: number = 3;
   inputAssistancePreset: 'none' | 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' = 'none';

projects/common/ui-elements/text-field/text-field-element.ts

@@ -10,7 +10,7 @@ import {
 import { initFontElement, initPositionedElement, initSurfaceElement } from '../../util/unit-interface-initializer';
 
 export class TextFieldElement extends InputElement implements PositionedElement, FontElement, SurfaceElement {
-  appearance: 'standard' | 'legacy' | 'fill' | 'outline' = 'outline';
+  appearance: 'fill' | 'outline' = 'outline';
   minLength: number = 0;
   minLengthWarnMessage: string = 'Eingabe zu kurz';
   maxLength: number = 0;

projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html

@@ -275,10 +275,8 @@
     <mat-label>{{'propertiesPanel.appearance' | translate }}</mat-label>
     <mat-select [value]="combinedProperties.appearance"
                 (selectionChange)="updateModel.emit({ property: 'appearance', value: $event.value })">
-      <mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
-                                                 {displayValue: 'legacy', value: 'legacy'},
-                                                 {displayValue: 'fill', value: 'fill'},
-                                                 {displayValue: 'outline', value: 'outline'}]"
+      <mat-option *ngFor="let option of [{displayValue: 'fill', value: 'fill'},
+                                         {displayValue: 'outline', value: 'outline'}]"
                   [value]="option.value">
         {{option.displayValue}}
       </mat-option>