Add new element TextFieldSimple

This is a native input element which is used in cloze elements. Here 
(sub)elements need to be positioned inline, which is hard to do with 
material components.

Also add a method to all form elements to set their form value, which is 
now only used by the simple text field but may be useful for other 
elements, which don't integrate in material form fields.

projects/common/element-components/compound-elements/cloze.component.ts

@@ -53,13 +53,13 @@ import { FormElementComponent } from '../../form-element-component.directive';
                         [elementModel]="$any(part.value)"
                         (elementValueChanged)="elementValueChanged.emit($event)">
           </app-dropdown>
-          <app-text-field *ngIf="part.type === 'text-field'" #textfieldComponent
+          <app-text-field-simple *ngIf="part.type === 'text-field'" #textfieldComponent
                           [parentForm]="parentForm"
                           [style.display]="'inline-block'"
                           [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
                           [elementModel]="$any(part.value)"
                           (elementValueChanged)="elementValueChanged.emit($event)">
-          </app-text-field>
+          </app-text-field-simple>
           <div *ngIf="part.type === 'drop-list'"
                [style.display]="'inline-block'"
                [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"

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

+import { Component, Input } from '@angular/core';
+import { FormElementComponent } from '../form-element-component.directive';
+import { TextFieldSimpleElement } from '../models/text-field-simple-element';
+
+@Component({
+  selector: 'app-text-field-simple',
+  template: `
+    <input type="text" form="parentForm"
+           [style.width.px]="elementModel.width"
+           [style.height.px]="elementModel.height"
+           value="{{elementModel.value}}"
+           (input)="setFormValue($any($event.target).value)">
+  `
+})
+export class TextFieldSimpleComponent extends FormElementComponent {
+  @Input() elementModel!: TextFieldSimpleElement;
+}

projects/common/form-element-component.directive.ts

@@ -48,6 +48,10 @@ export abstract class FormElementComponent extends ElementComponent implements O
       new FormControl({});
   }
 
+  setFormValue(value: InputElementValue): void {
+    this.elementFormControl.setValue(value);
+  }
+
   ngOnDestroy(): void {
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();

projects/common/models/compound-elements/cloze-element.ts

@@ -10,6 +10,7 @@ import { CheckboxElement } from '../checkbox-element';
 import { DropdownElement } from '../dropdown-element';
 import { DropListElement } from './drop-list';
 import { initFontElement } from '../../util/unit-interface-initializer';
+import { TextFieldSimpleElement } from '../text-field-simple-element';
 
 // TODO styles like em dont continue after inserted components
 
@@ -115,7 +116,7 @@ export class ClozeElement extends CompoundElement implements FontElement {
     let newElement: InputElement;
     switch (elementModel.type) {
       case 'text-field':
-        newElement = new TextFieldElement(elementModel);
+        newElement = new TextFieldSimpleElement(elementModel);
         (newElement as TextFieldElement).label = '';
         break;
       case 'text-area':

projects/common/models/text-field-simple-element.ts

+import { InputElement, UIElement } from './uI-element';
+
+export class TextFieldSimpleElement extends InputElement {
+  constructor(serializedElement: UIElement) {
+    super(serializedElement);
+    Object.assign(this, serializedElement);
+  }
+}

projects/common/shared.module.ts

@@ -44,6 +44,7 @@ import { Magnifier } from './element-components/magnifier.component';
 import { RadioGroupImagesComponent } from './element-components/compound-elements/radio-group-images.component';
 import { DropListComponent } from './element-components/compound-elements/drop-list.component';
 import { ClozeComponent } from './element-components/compound-elements/cloze.component';
+import { TextFieldSimpleComponent } from './element-components/text-field-simple.component';
 
 @NgModule({
   imports: [
@@ -85,7 +86,8 @@ import { ClozeComponent } from './element-components/compound-elements/cloze.com
     Magnifier,
     RadioGroupImagesComponent,
     DropListComponent,
-    ClozeComponent
+    ClozeComponent,
+    TextFieldSimpleComponent
   ],
   exports: [
     CommonModule,