Add styling interface to math field element

projects/common/components/input-elements/math-field.component.ts

@@ -9,16 +9,25 @@ import { MathFieldElement } from 'common/models/elements/input-elements/math-fie
 @Component({
   selector: 'aspect-math-field',
   template: `
-    <label>{{elementModel.label}}</label><br>
-    <aspect-mathlive-math-field [value]="$any(elementModel.value) | getValue: elementFormControl.value : parentForm"
-                                [enableModeSwitch]="elementModel.enableModeSwitch"
-                                (input)="elementFormControl.setValue($any($event.target).value)"
-                                (focusout)="elementFormControl.markAsTouched()">
-    </aspect-mathlive-math-field>
-    <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
-               class="error-message">
-      {{elementFormControl.errors | errorTransform: elementModel}}
-    </mat-error>
+  <div [style.line-height.%]="elementModel.styling.lineHeight"
+       [style.color]="elementModel.styling.fontColor"
+       [style.font-family]="elementModel.styling.font"
+       [style.font-size.px]="elementModel.styling.fontSize"
+       [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
+       [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
+       [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
+       [style.backgroundColor]="elementModel.styling.backgroundColor">
+      <label>{{elementModel.label}}</label><br>
+      <aspect-mathlive-math-field [value]="$any(elementModel.value) | getValue: elementFormControl.value : parentForm"
+                                  [enableModeSwitch]="elementModel.enableModeSwitch"
+                                  (input)="elementFormControl.setValue($any($event.target).value)"
+                                  (focusout)="elementFormControl.markAsTouched()">
+      </aspect-mathlive-math-field>
+      <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
+                 class="error-message">
+        {{elementFormControl.errors | errorTransform: elementModel}}
+      </mat-error>
+  </div>
   `,
   styles: ['.error-message {font-size: 75%; margin-top: 15px; margin-left: 10px;}']
 })

projects/common/models/elements/input-elements/math-field.ts

 import {
-  AnswerScheme, InputElement, PositionProperties, UIElement
+  AnswerScheme, BasicStyles, InputElement, PositionProperties, UIElement
 } from 'common/models/elements/element';
 import { Type } from '@angular/core';
 import { ElementComponent } from 'common/directives/element-component.directive';
@@ -8,11 +8,21 @@ import { MathFieldComponent } from 'common/components/input-elements/math-field.
 export class MathFieldElement extends InputElement {
   enableModeSwitch: boolean = false;
   position: PositionProperties | undefined;
+  styling: BasicStyles & {
+    lineHeight: number;
+  };
 
   constructor(element: Partial<MathFieldElement>) {
     super(element);
     if (element.enableModeSwitch !== undefined) this.enableModeSwitch = element.enableModeSwitch;
     this.position = element.position ? UIElement.initPositionProps(element.position) : undefined;
+    this.styling = {
+      ...UIElement.initStylingProps({
+        backgroundColor: 'transparent',
+        lineHeight: 135,
+        ...element.styling
+      })
+    };
   }
 
   hasAnswerScheme(): boolean {