Set all elements width and heigth to 100%

This is in preparation for dynamic layouting.
The actual dimensions are set by the overlay component which differs but 
is existent for both editor and player.

projects/common/element-components/button.component.ts

@@ -6,8 +6,8 @@ import { ButtonElement } from '../unit';
   selector: 'app-button',
   template: `
     <button mat-button
-            [style.width.px]="elementModel.width"
-            [style.height.px]="elementModel.height"
+            [style.width.%]="100"
+            [style.height.%]="100"
             [style.background-color]="elementModel.backgroundColor"
             [style.color]="elementModel.fontColor"
             [style.font-family]="elementModel.font"

projects/common/element-components/checkbox.component.ts

@@ -7,8 +7,8 @@ import { FormElementComponent } from '../form-element-component.directive';
   template: `
     <mat-checkbox #checkbox class="example-margin"
                   [formControl]="elementFormControl"
-                  [style.width.px]="elementModel.width"
-                  [style.height.px]="elementModel.height"
+                  [style.width.%]="100"
+                  [style.height.%]="100"
                   [style.background-color]="elementModel.backgroundColor"
                   [style.color]="elementModel.fontColor"
                   [style.font-family]="elementModel.font"

projects/common/element-components/dropdown.component.ts

@@ -6,8 +6,8 @@ import { FormElementComponent } from '../form-element-component.directive';
   selector: 'app-dropdown',
   template: `
       <mat-form-field appearance="fill"
-                      [style.width.px]="elementModel.width"
-                      [style.height.px]="elementModel.height"
+                      [style.width.%]="100"
+                      [style.height.%]="100"
                       [style.background-color]="elementModel.backgroundColor">
           <mat-label [style.color]="elementModel.fontColor"
                      [style.font-family]="elementModel.font"

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

@@ -5,8 +5,8 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-number-field',
   template: `
-    <mat-form-field [style.width.px]="elementModel.width"
-                    [style.height.px]="elementModel.height"
+    <mat-form-field [style.width.%]="100"
+                    [style.height.%]="100"
                     [style.background-color]="elementModel.backgroundColor"
                     [style.color]="elementModel.fontColor"
                     [style.font-family]="elementModel.font"

projects/common/element-components/radio-button-group.component.ts

@@ -5,8 +5,8 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-radio-button-group',
   template: `
-      <div [style.width.px]="elementModel.width"
-           [style.height.px]="elementModel.height"
+      <div [style.width.%]="100"
+           [style.height.%]="100"
            [style.background-color]="elementModel.backgroundColor"
            [style.color]="elementModel.fontColor"
            [style.font-family]="elementModel.font"

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

@@ -5,20 +5,20 @@ 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]="elementFormControl"
-                placeholder="{{elementModel.label}}"
-                [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
-        </textarea>
-      </mat-form-field>
+    <mat-form-field [style.width.%]="100"
+                    [style.height.%]="100"
+                    [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]="elementFormControl"
+              placeholder="{{elementModel.label}}"
+              [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
+      </textarea>
+    </mat-form-field>
   `
 })
 export class TextAreaComponent extends FormElementComponent {

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

@@ -5,8 +5,8 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-text-field',
   template: `
-    <mat-form-field [style.width.px]="elementModel.width"
-                    [style.height.px]="elementModel.height"
+    <mat-form-field [style.width.%]="100"
+                    [style.height.%]="100"
                     [style.background-color]="elementModel.backgroundColor"
                     [style.color]="elementModel.fontColor"
                     [style.font-family]="elementModel.font"

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

@@ -5,18 +5,18 @@ import { ElementComponent } from '../element-component.directive';
 @Component({
   selector: 'app-text',
   template: `
-      <div [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' : ''"
-           [style.white-space]="'pre-wrap'">
-          {{elementModel.text}}
-      </div>
+    <div [style.width.%]="100"
+         [style.height.%]="100"
+         [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' : ''"
+         [style.white-space]="'pre-wrap'">
+        {{elementModel.text}}
+    </div>
   `
 })
 export class TextComponent extends ElementComponent {