Fix background color of input fields

Since the material elements don't give a way of applying the background 
color, a hack is needed to get the internal elements and apply the 
style.

Directive to be able to do it for text field and text area.

projects/common/app.module.ts

@@ -33,6 +33,7 @@ import { VideoComponent } from './element-components/video.component';
 import { AudioComponent } from './element-components/audio.component';
 import { CorrectionComponent } from './element-components/compound-components/correction.component';
 import { SafeResourceUrlPipe } from './pipes/safe-resource-url.pipe';
+import { InputBackgroundColorDirective } from './element-components/directives/input-background-color.directive';
 
 @NgModule({
   imports: [
@@ -61,7 +62,8 @@ import { SafeResourceUrlPipe } from './pipes/safe-resource-url.pipe';
     CheckboxComponent,
     DropdownComponent,
     CorrectionComponent,
-    SafeResourceUrlPipe
+    SafeResourceUrlPipe,
+    InputBackgroundColorDirective
   ],
   exports: [
     CommonModule,

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

+import {
+  Directive, ElementRef, Input, OnChanges
+} from '@angular/core';
+
+@Directive({
+  selector: '[appInputBackgroundColor]'
+})
+export class InputBackgroundColorDirective implements OnChanges {
+  @Input() backgroundColor!: string;
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngAfterViewInit(): void {
+    this.setBackgroundColor();
+  }
+
+  ngOnChanges(): void {
+    this.setBackgroundColor();
+  }
+
+  private setBackgroundColor(): void {
+    const targetElements = this.elementRef.nativeElement.querySelector('div.mat-form-field-outline')?.children;
+    // This fails, when component is not set up yet, therefore the extra check
+    if (targetElements) {
+      for (const child of targetElements) {
+        child.style.setProperty('background-color', this.backgroundColor);
+      }
+    }
+  }
+}

projects/common/element-components/text-area.component.ts

@@ -7,7 +7,7 @@ import { FormElementComponent } from '../form-element-component.directive';
   template: `
     <mat-form-field [style.width.%]="100"
                     [style.min-height.%]="100"
-                    [style.background-color]="elementModel.backgroundColor"
+                    appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
                     [style.color]="elementModel.fontColor"
                     [style.font-family]="elementModel.font"
                     [style.font-size.px]="elementModel.fontSize"

projects/common/element-components/text-field.component.ts

@@ -7,13 +7,13 @@ import { FormElementComponent } from '../form-element-component.directive';
   template: `
     <mat-form-field [style.width.%]="100"
                     [style.height.%]="100"
-                    [style.background-color]="elementModel.backgroundColor"
                     [style.color]="elementModel.fontColor"
                     [style.font-family]="elementModel.font"
                     [style.font-size.px]="elementModel.fontSize"
                     [style.font-weight]="elementModel.bold ? 'bold' : ''"
                     [style.font-style]="elementModel.italic ? 'italic' : ''"
                     [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+                    appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
                     [appearance]="$any(elementModel.appearance)">
       <input matInput type="text" [pattern]="elementModel.pattern" #input
              (focus)="onFocus.emit(input)"