Add InputUIElement interface with required setting and warning message

Those have a required setting and warn message.
- Also refactor SurfaceElement to no longer inherit from UIElement as 
this is not needed since we can have multiple inheritance for 
interfaces.

projects/common/unit.ts

@@ -37,7 +37,12 @@ export interface TextUIElement extends UnitUIElement {
   underline: boolean;
 }
 
-export interface SurfaceUIElement extends UnitUIElement {
+export interface InputUIElement {
+  required: boolean;
+  validationWarnMessage: string;
+}
+
+export interface SurfaceUIElement {
   backgroundColor: string;
 }
 
@@ -54,7 +59,7 @@ export interface ButtonElement extends TextUIElement, SurfaceUIElement {
   label: string;
 }
 
-export interface TextFieldElement extends TextUIElement, SurfaceUIElement {
+export interface TextFieldElement extends TextUIElement, SurfaceUIElement, InputUIElement {
   label: string;
   value: string;
 }

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

@@ -52,6 +52,18 @@
           </mat-select>
         </mat-form-field>
 
+        <mat-checkbox *ngIf="combinedProperties.hasOwnProperty('required')"
+                      [checked]="$any(combinedProperties.required)"
+                      (change)="updateModel('required', $event.checked)">
+          Pflichtfeld
+        </mat-checkbox>
+
+        <mat-form-field *ngIf="combinedProperties.hasOwnProperty('validationWarnMessage')">
+          <mat-label>Warnmeldung</mat-label>
+          <input matInput type="text" [value]="combinedProperties.validationWarnMessage"
+                 (input)="updateModel('validationWarnMessage', $any($event.target).value)">
+        </mat-form-field>
+
         <mat-form-field disabled="true" *ngIf="combinedProperties.hasOwnProperty('options')">
           <div *ngIf="combinedProperties.options !== undefined">
             <mat-label>Optionen</mat-label>

projects/editor/src/app/model/UnitFactory.ts

@@ -3,7 +3,7 @@ import {
   CheckboxElement, CompoundElementCorrection, DropdownElement,
   ImageElement, TextElement, RadioButtonGroupElement, SurfaceUIElement,
   TextFieldElement, TextUIElement, Unit, UnitPage, UnitPageSection, UnitUIElement,
-  VideoElement
+  VideoElement, InputUIElement
 } from '../../../../common/unit';
 
 export function createUnit(): Unit {
@@ -55,10 +55,16 @@ export function createTextUIElement(type: string): TextUIElement {
   };
 }
 
-export function createSurfaceUIElement(type: string): SurfaceUIElement {
+export function createInputUIElement(): InputUIElement {
   return {
-    backgroundColor: 'lightgrey',
-    ...createUnitUIElement(type)
+    required: false,
+    validationWarnMessage: ''
+  };
+}
+
+export function createSurfaceUIElement(): SurfaceUIElement {
+  return {
+    backgroundColor: 'lightgrey'
   };
 }
 
@@ -66,7 +72,7 @@ export function createTextElement(): TextElement {
   return {
     text: 'Example Text',
     ...createTextUIElement('text'),
-    ...createSurfaceUIElement('text')
+    ...createSurfaceUIElement()
   };
 }
 
@@ -74,7 +80,7 @@ export function createButtonElement(): ButtonElement {
   return {
     label: 'Button Text',
     ...createTextUIElement('button'),
-    ...createSurfaceUIElement('button')
+    ...createSurfaceUIElement()
   };
 }
 
@@ -83,7 +89,8 @@ export function createTextfieldElement(): TextFieldElement {
     label: 'Example Label',
     value: '',
     ...createTextUIElement('text-field'),
-    ...createSurfaceUIElement('text-field')
+    ...createSurfaceUIElement(),
+    ...createInputUIElement()
   };
 }
 
@@ -93,7 +100,8 @@ export function createTextareaElement(): TextFieldElement {
     value: '',
     resizeEnabled: false,
     ...createTextUIElement('text-area'),
-    ...createSurfaceUIElement('text-area'),
+    ...createSurfaceUIElement(),
+    ...createInputUIElement(),
     height: 100
   };
 }
@@ -103,7 +111,8 @@ export function createCheckboxElement(): CheckboxElement {
     label: 'Label Checkbox',
     value: undefined,
     ...createTextUIElement('checkbox'),
-    ...createSurfaceUIElement('checkbox')
+    ...createSurfaceUIElement(),
+    ...createInputUIElement()
   };
 }
 
@@ -113,7 +122,8 @@ export function createDropdownElement(): DropdownElement {
     options: [],
     value: undefined,
     ...createTextUIElement('dropdown'),
-    ...createSurfaceUIElement('dropdown')
+    ...createSurfaceUIElement(),
+    ...createInputUIElement()
   };
 }
 
@@ -124,7 +134,8 @@ export function createRadioButtonGroupElement(): RadioButtonGroupElement {
     alignment: 'row',
     value: undefined,
     ...createTextUIElement('radio'),
-    ...createSurfaceUIElement('radio'),
+    ...createSurfaceUIElement(),
+    ...createInputUIElement(),
     height: 75
   };
 }