diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts
index f7121802cc7617dc5fcef79c7e4aa1b57d02e7ae..7cb261088e86308b5515f87d0daa9e0febd2e686 100644
--- a/projects/common/app.module.ts
+++ b/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,
diff --git a/projects/common/component-utils.ts b/projects/common/component-utils.ts
index 535f412b02d06a9bc7a7ad361dffa947c0363059..c257cdc6cf7b576cb2f184e298bf89e74ca8c8a6 100644
--- a/projects/common/component-utils.ts
+++ b/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':
diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..99c030b62e33686b3a4a7f91d70396d41d7d8e31
--- /dev/null
+++ b/projects/common/element-components/text-area.component.ts
@@ -0,0 +1,27 @@
+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;
+}
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 1ea51cd9d577f7dbd1e2c51e0d95db1b47829567..dafcb4456b90a358d037a39c6e5ac2551d3cb71b 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/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 {
diff --git a/projects/common/unit.ts b/projects/common/unit.ts
index 09e5320818590da93cfdff4bfa9c415f38d3ded4..8795ee35183115c70084c293ca631bbd4f32fb80 100644
--- a/projects/common/unit.ts
+++ b/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 {
diff --git a/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html b/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html
index 79f51689364ca5473e02c4f0fb0e4f0aad9573db..646d1bc48c6795dba91f0022b5c49efa0d64cc38 100644
--- a/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html
+++ b/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>
diff --git a/projects/editor/src/app/id.service.ts b/projects/editor/src/app/id.service.ts
index 58c63e365b2844e4095af24fc9971d0093ded24b..b04ac6f606053abe70f2c5e4a438409f5763921a 100644
--- a/projects/editor/src/app/id.service.ts
+++ b/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,
diff --git a/projects/editor/src/app/model/UnitFactory.ts b/projects/editor/src/app/model/UnitFactory.ts
index 0643051ecace56d21bf6253fa55353b5b8d76c10..b017239151fcb4c6dc943c7cf94bbc8f67beba66 100644
--- a/projects/editor/src/app/model/UnitFactory.ts
+++ b/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',
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 0431bce5c8e8d8926ea7d266c2ade9fad0228e7f..76697ed92a4deb596ff91e2962388d7ec35447f9 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/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;