[player] Add styles for checkbox and radio button on error

* Adapts their appearance to mat-form-fields
* Fix coloring of background for checkboxes

projects/common/element-components/checkbox.component.ts

@@ -6,12 +6,12 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-checkbox',
   template: `
-    <div class="mat-form-field">
+    <div class="mat-form-field"
+         [style.width.%]="100"
+         [style.height.%]="100"
+         [style.background-color]="elementModel.backgroundColor">
       <mat-checkbox #checkbox class="example-margin"
                     [formControl]="elementFormControl"
-                    [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"
@@ -21,6 +21,9 @@ import { FormElementComponent } from '../form-element-component.directive';
         <div [innerHTML]="elementModel.label"></div>
       </mat-checkbox>
       <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
+                 [style.margin-top.px]="5"
+                 [style.position]="'absolute'"
+                 [style.display]="'block'"
                  [style.font-size.%]="75">
         {{elementFormControl.errors | errorTransform: elementModel}}
       </mat-error>

projects/common/element-components/radio-button-group.component.ts

@@ -5,7 +5,7 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-radio-button-group',
   template: `
-    <div class="mat-form-field"
+    <div class="mmatd"
          [style.width.%]="100"
          [style.height.%]="100"
          [style.background-color]="elementModel.backgroundColor"
@@ -17,14 +17,16 @@ import { FormElementComponent } from '../form-element-component.directive';
          [style.text-decoration]="elementModel.underline ? 'underline' : ''">
       <label [innerHTML]="elementModel.label" id="radio-group-label"></label>
       <mat-radio-group aria-labelledby="radio-group-label"
-                       [style.margin-bottom.px]="20"
+                       [style.margin-bottom.px]="25"
                        [fxLayout]="elementModel.alignment"
                        [formControl]="elementFormControl">
         <mat-radio-button *ngFor="let option of elementModel.options" [value]="option">
           {{option}}
         </mat-radio-button>
         <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
-                   [style.font-size.%]="75">
+                   [style.font-size.%]="75"
+                   [style.margin-top.px]="25"
+                   [style.position]="'absolute'">
           {{elementFormControl.errors | errorTransform: elementModel}}
         </mat-error>
       </mat-radio-group>

projects/editor/src/app/UnitFactory.ts

@@ -176,7 +176,7 @@ export function createRadioButtonGroupElement(): RadioButtonGroupElement {
     ...createInputUIElement('Beschriftung Optionsfeld', undefined),
     ...createTextUIElement(),
     ...createSurfaceUIElement(),
-    height: 75,
+    height: 85,
     backgroundColor: 'transparent'
   };
 }