Add clearable property to textfields

This makes a small (suffix) button appear which clears all the input of 
that field.

projects/common/classes/textFieldElement.ts

@@ -14,6 +14,8 @@ export class TextFieldElement extends InputElement implements FontElement, Surfa
   inputAssistance: boolean = false;
   inputAssistancePreset: 'french' | 'numbers' | 'numbersAndOperators' | null = null;
 
+  clearable: boolean = false;
+
   fontColor: string = 'black';
   font: string = 'Roboto';
   fontSize: number = 18;

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

@@ -23,6 +23,10 @@ import { TextFieldElement } from '../classes/textFieldElement';
              autocomplete="off"
              [formControl]="elementFormControl"
              placeholder="{{elementModel.label}}">
+      <button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear"
+              (click)="elementFormControl.setValue('')">
+        <mat-icon>close</mat-icon>
+      </button>
       <mat-error *ngIf="elementFormControl.errors">
         {{elementFormControl.errors | errorTransform: elementModel}}
       </mat-error>

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

@@ -206,6 +206,12 @@
                  (input)="updateModel('patternWarnMessage', $any($event.target).value)">
         </mat-form-field>
 
+        <mat-checkbox *ngIf="combinedProperties.clearable !== undefined"
+                      [checked]="$any(combinedProperties.clearable)"
+                      (change)="updateModel('clearable', $event.checked)">
+          Knopf zum Leeren anzeigen
+        </mat-checkbox>
+
         <mat-checkbox *ngIf="combinedProperties.inputAssistance !== undefined"
                       [checked]="$any(combinedProperties.inputAssistance)"
                       (change)="updateModel('inputAssistance', $event.checked)">