[player] Refactor validation messages

* Fix scrollbar bug
* Remove using of timeout method
* Add Material fonts

projects/player/src/app/components/element/element.component.html

-<app-element-overlay
-    [elementModel]="elementModel"
-    [parentForm]="elementForm"
-    [parentArrayIndex]="parentArrayIndex"
-    [isInputElement]="isInputElement">
-</app-element-overlay>
-<app-validation-message *ngIf="isInputElement && elementForm"
+<ng-container *ngTemplateOutlet="elementModel.dynamicPositioning ? dynamicElement : staticElement"></ng-container>
+
+<ng-template #staticElement>
+  <app-element-overlay
+      [style.display]="'block'"
+      [style.overflow]="'auto'"
+      [style.width.px]="elementModel.width"
+      [style.height.px]="elementModel.height"
+      [elementModel]="elementModel"
+      [parentForm]="elementForm"
+      [parentArrayIndex]="parentArrayIndex"
+      [isInputElement]="isInputElement">
+  </app-element-overlay>
+</ng-template>
+
+<ng-template #dynamicElement>
+  <app-element-overlay
+      [elementModel]="elementModel"
+      [parentForm]="elementForm"
+      [parentArrayIndex]="parentArrayIndex"
+      [isInputElement]="isInputElement">
+  </app-element-overlay>
+</ng-template>
+
+<app-validation-message *ngIf="isInputElement"
                         [ngClass]="{'dynamic-validation-messages' : elementModel.dynamicPositioning}"
                         [parentForm]="elementForm"
                         [elementModel]="elementModel">

projects/player/src/app/components/section/section.component.html

@@ -3,9 +3,6 @@
 <ng-template #staticElements>
   <ng-container *ngFor="let element of section.elements; let i = index">
     <app-element
-        [style.overflow]="'auto'"
-        [style.width.px]="element.width"
-        [style.height.px]="element.height"
         [style.position]="'absolute'"
         [style.left.px]="element.xPosition"
         [style.top.px]="element.yPosition"

projects/player/src/app/components/validation-message/validation-message.component.html

-<ng-container *ngIf="formElementControl && formElementControl.touched">
+<div *ngIf="formElementControl?.touched" class="mat-typography">
   <mat-error *ngIf="formElementControl.errors?.required && elementModel.type !== 'checkbox'"
              [ngClass]="{'dynamic-validation-message' : elementModel.dynamicPositioning}" >
     {{requiredMessage}}
@@ -19,4 +19,4 @@
              [ngClass]="{'dynamic-validation-message' : elementModel.dynamicPositioning}" >
     {{patternMessage}}
   </mat-error>
-</ng-container>
+</div>

projects/player/src/app/components/validation-message/validation-message.component.ts

 import {
-  AfterViewInit, Component, Input, OnInit
+  Component, Input, OnInit
 } from '@angular/core';
 import {
   FormControl, FormGroup, ValidatorFn, Validators
@@ -17,7 +17,7 @@ import { FormService } from '../../../../../common/form.service';
   styleUrls: ['./validation-message.component.css']
 })
 
-export class ValidationMessageComponent implements OnInit, AfterViewInit {
+export class ValidationMessageComponent implements OnInit {
   @Input() elementModel!: UnitUIElement;
   @Input() parentForm!: FormGroup;
   formElementControl!: FormControl;
@@ -32,6 +32,12 @@ export class ValidationMessageComponent implements OnInit, AfterViewInit {
 
   ngOnInit(): void {
     this.setErrorMessages();
+    this.formElementControl = this.parentForm.controls[this.elementModel.id] as FormControl;
+    this.formService.setValidators({
+      id: this.elementModel.id,
+      validators: this.validators,
+      formGroup: this.parentForm
+    });
   }
 
   private get validators(): ValidatorFn[] {
@@ -71,16 +77,4 @@ export class ValidationMessageComponent implements OnInit, AfterViewInit {
     this.patternMessage = (this.elementModel as TextFieldElement).patternWarnMessage ||
       this.translateService.instant('validators.wrongPattern');
   }
-
-  ngAfterViewInit(): void {
-    // TODO: Remove timeout
-    setTimeout(() => {
-      this.formElementControl = this.parentForm.controls[this.elementModel.id] as FormControl;
-      this.formService.setValidators({
-        id: this.elementModel.id,
-        validators: this.validators,
-        formGroup: this.parentForm
-      });
-    });
-  }
 }