Make textfield and textarea different Elements

projects/common/app.module.ts

@@ -19,16 +19,17 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
+import { TextComponent } from './element-components/text.component';
 import { ButtonComponent } from './element-components/button.component';
-import { CorrectionComponent } from './element-components/compound-components/correction.component';
-import { RadioButtonGroupComponent } from './element-components/radio-button-group.component';
-import { CheckboxComponent } from './element-components/checkbox.component';
 import { TextFieldComponent } from './element-components/text-field.component';
+import { TextAreaComponent } from './element-components/text-area.component';
+import { CheckboxComponent } from './element-components/checkbox.component';
+import { DropdownComponent } from './element-components/dropdown.component';
+import { RadioButtonGroupComponent } from './element-components/radio-button-group.component';
 import { ImageComponent } from './element-components/image.component';
 import { VideoComponent } from './element-components/video.component';
 import { AudioComponent } from './element-components/audio.component';
-import { TextComponent } from './element-components/text.component';
-import { DropdownComponent } from './element-components/dropdown.component';
+import { CorrectionComponent } from './element-components/compound-components/correction.component';
 
 @NgModule({
   imports: [
@@ -47,6 +48,7 @@ import { DropdownComponent } from './element-components/dropdown.component';
     ButtonComponent,
     TextComponent,
     TextFieldComponent,
+    TextAreaComponent,
     ImageComponent,
     AudioComponent,
     VideoComponent,

projects/common/component-utils.ts

@@ -2,6 +2,7 @@ import { ComponentFactory, ComponentFactoryResolver } from '@angular/core';
 import { TextComponent } from './element-components/text.component';
 import { ButtonComponent } from './element-components/button.component';
 import { TextFieldComponent } from './element-components/text-field.component';
+import { TextAreaComponent } from './element-components/text-area.component';
 import { CheckboxComponent } from './element-components/checkbox.component';
 import { DropdownComponent } from './element-components/dropdown.component';
 import { RadioButtonGroupComponent } from './element-components/radio-button-group.component';
@@ -21,6 +22,8 @@ export function getComponentFactory(
       return componentFactoryResolver.resolveComponentFactory(ButtonComponent);
     case 'text-field':
       return componentFactoryResolver.resolveComponentFactory(TextFieldComponent);
+    case 'text-area':
+      return componentFactoryResolver.resolveComponentFactory(TextAreaComponent);
     case 'checkbox':
       return componentFactoryResolver.resolveComponentFactory(CheckboxComponent);
     case 'dropdown':

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

+import { Component } from '@angular/core';
+import { TextAreaElement } from '../unit';
+import { FormElementComponent } from '../form-element-component.directive';
+
+@Component({
+  selector: 'app-text-area',
+  template: `
+    <mat-form-field [style.width.px]="elementModel.width"
+                    [style.height.px]="elementModel.height"
+                    [style.background-color]="elementModel.backgroundColor"
+                    [style.color]="elementModel.fontColor"
+                    [style.font-family]="elementModel.font"
+                    [style.font-size.px]="elementModel.fontSize"
+                    [style.font-weight]="elementModel.bold ? 'bold' : ''"
+                    [style.font-style]="elementModel.italic ? 'italic' : ''"
+                    [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+      <textarea matInput [formControl]="formElementControl"
+                placeholder="{{elementModel.label}}"
+                [(ngModel)]="elementModel.text"
+                [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
+        </textarea>
+    </mat-form-field>
+  `
+})
+export class TextAreaComponent extends FormElementComponent {
+  elementModel!: TextAreaElement;
+}

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

@@ -5,24 +5,19 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-text-field',
   template: `
-      <mat-form-field>
-        <input *ngIf="elementModel.multiline === false" matInput
-               placeholder="{{elementModel.placeholder}}"
-               [formControl]="formElementControl">
-        <textarea *ngIf="elementModel.multiline === true" matInput
-                  placeholder="{{elementModel.placeholder}}"
-                  [formControl]="formElementControl"
-                  [style.width.px]="elementModel.width"
-                  [style.height.px]="elementModel.height"
-                  [style.background-color]="elementModel.backgroundColor"
-                  [style.color]="elementModel.fontColor"
-                  [style.font-family]="elementModel.font"
-                  [style.font-size.px]="elementModel.fontSize"
-                  [style.font-weight]="elementModel.bold ? 'bold' : ''"
-                  [style.font-style]="elementModel.italic ? 'italic' : ''"
-                  [style.text-decoration]="elementModel.underline ? 'underline' : ''">
-        </textarea>
-      </mat-form-field>
+    <mat-form-field [style.width.px]="elementModel.width"
+                    [style.height.px]="elementModel.height"
+                    [style.background-color]="elementModel.backgroundColor"
+                    [style.color]="elementModel.fontColor"
+                    [style.font-family]="elementModel.font"
+                    [style.font-size.px]="elementModel.fontSize"
+                    [style.font-weight]="elementModel.bold ? 'bold' : ''"
+                    [style.font-style]="elementModel.italic ? 'italic' : ''"
+                    [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+      <input matInput [formControl]="formElementControl"
+             placeholder="{{elementModel.label}}"
+             [(ngModel)]="elementModel.text">
+    </mat-form-field>
   `
 })
 export class TextFieldComponent extends FormElementComponent {

projects/common/unit.ts

@@ -55,8 +55,14 @@ export interface ButtonElement extends TextUIElement, SurfaceUIElement {
 }
 
 export interface TextFieldElement extends TextUIElement, SurfaceUIElement {
-  placeholder: string;
-  multiline: boolean;
+  label: string;
+  text: string;
+}
+
+export interface TextAreaElement extends TextUIElement, SurfaceUIElement {
+  label: string;
+  text: string;
+  resizeEnabled: boolean;
 }
 
 export interface CheckboxElement extends TextUIElement, SurfaceUIElement {

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

@@ -13,8 +13,12 @@
         Button
       </button>
       <button mat-raised-button (click)="addUIElement('text-field')">
+        <mat-icon>text_fields</mat-icon>
+        Eingabefeld
+      </button>
+      <button mat-raised-button (click)="addUIElement('text-area')">
         <mat-icon>notes</mat-icon>
-        Textfeld
+        Eingabefeld (mehrzeilig)
       </button>
       <button mat-raised-button (click)="addUIElement('checkbox')">
         <mat-icon>check_box</mat-icon>

projects/editor/src/app/id.service.ts

@@ -12,6 +12,7 @@ export class IdService {
     text: 0,
     button: 0,
     'text-field': 0,
+    'text-area': 0,
     checkbox: 0,
     dropdown: 0,
     radio: 0,

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

@@ -80,13 +80,23 @@ export function createButtonElement(): ButtonElement {
 
 export function createTextfieldElement(): TextFieldElement {
   return {
-    placeholder: 'DUMMY',
-    multiline: true,
+    label: 'Example Label',
+    text: '',
     ...createTextUIElement('text-field'),
     ...createSurfaceUIElement('text-field')
   };
 }
 
+export function createTextareaElement(): TextFieldElement {
+  return {
+    label: 'Example Label',
+    text: '',
+    ...createTextUIElement('text-area'),
+    ...createSurfaceUIElement('text-area'),
+    height: 100
+  };
+}
+
 export function createCheckboxElement(): CheckboxElement {
   return {
     label: 'Label Checkbox',

projects/editor/src/app/unit.service.ts

@@ -134,6 +134,9 @@ export class UnitService {
       case 'text-field':
         newElement = UnitFactory.createTextfieldElement();
         break;
+      case 'text-area':
+        newElement = UnitFactory.createTextareaElement();
+        break;
       case 'checkbox':
         newElement = UnitFactory.createCheckboxElement();
         break;