Add appearance property to input elements

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

@@ -13,7 +13,8 @@ import { FormElementComponent } from '../form-element-component.directive';
                     [style.font-size.px]="elementModel.fontSize"
                     [style.font-weight]="elementModel.bold ? 'bold' : ''"
                     [style.font-style]="elementModel.italic ? 'italic' : ''"
-                    [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+                    [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+                    [appearance]="$any(elementModel.appearance)">
     <textarea matInput [formControl]="elementFormControl" #input
               (focus)="onFocus.emit(input)"
               (blur)="onBlur.emit(input)"

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

@@ -13,7 +13,8 @@ import { FormElementComponent } from '../form-element-component.directive';
                     [style.font-size.px]="elementModel.fontSize"
                     [style.font-weight]="elementModel.bold ? 'bold' : ''"
                     [style.font-style]="elementModel.italic ? 'italic' : ''"
-                    [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+                    [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+                    [appearance]="$any(elementModel.appearance)">
       <input matInput type="text" [pattern]="elementModel.pattern" #input
              (focus)="onFocus.emit(input)"
              (blur)="onBlur.emit(input)"

projects/common/unit.ts

@@ -82,6 +82,7 @@ export interface ButtonElement extends TextUIElement, SurfaceUIElement {
 
 export interface TextFieldElement extends InputUIElement, TextUIElement, SurfaceUIElement {
   value: string;
+  appearance: 'standard' | 'legacy' | 'fill' | 'outline';
   minLength: number | undefined;
   minLengthWarnMessage: string;
   maxLength: number | undefined;
@@ -92,6 +93,7 @@ export interface TextFieldElement extends InputUIElement, TextUIElement, Surface
 
 export interface TextAreaElement extends InputUIElement, TextUIElement, SurfaceUIElement {
   value: string;
+  appearance: 'standard' | 'legacy' | 'fill' | 'outline';
   resizeEnabled: boolean;
 }
 

projects/editor/src/app/UnitFactory.ts

@@ -112,6 +112,7 @@ export function createButtonElement(): ButtonElement {
 
 export function createTextfieldElement(): TextFieldElement {
   return <TextFieldElement>{
+    appearance: 'outline',
     minLength: undefined,
     minLengthWarnMessage: 'Eingabe zu kurz',
     maxLength: undefined,
@@ -129,6 +130,7 @@ export function createTextfieldElement(): TextFieldElement {
 export function createTextareaElement(): TextAreaElement {
   return <TextAreaElement>{
     resizeEnabled: false,
+    appearance: 'outline',
     ...createUnitUIElement('text-area'),
     ...createInputUIElement('Beispiel Beschriftung', ''),
     ...createTextUIElement(),

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

@@ -23,6 +23,22 @@
              (click)="unitService.showDefaultEditDialog(selectedElements[0])">
         </div>
 
+
+        <mat-form-field *ngIf="combinedProperties.hasOwnProperty('appearance')" appearance="fill">
+          <mat-label>Aussehen</mat-label>
+          <mat-select [value]="combinedProperties.appearance"
+                      (selectionChange)="updateModel('appearance', $event.value)">
+            <mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
+                                               {displayValue: 'legacy', value: 'legacy'},
+                                               {displayValue: 'fill', value: 'fill'},
+                                               {displayValue: 'outline', value: 'outline'}]"
+                        [value]="option.value">
+              {{option.displayValue}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+
         <mat-checkbox *ngIf="combinedProperties.hasOwnProperty('highlightable')"
                       [checked]="$any(combinedProperties.highlightable)"
                       (change)="updateModel('highlightable', $event.checked)">