[player] Make textarea resizeable

Refactor styles for elements and element overlays to achieve stretching
of dynamic sections when text areas are resized

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

@@ -6,7 +6,7 @@ import { FormElementComponent } from '../form-element-component.directive';
   selector: 'app-text-area',
   template: `
     <mat-form-field [style.width.%]="100"
-                    [style.height.%]="100"
+                    [style.min-height.%]="100"
                     [style.background-color]="elementModel.backgroundColor"
                     [style.color]="elementModel.fontColor"
                     [style.font-family]="elementModel.font"
@@ -19,8 +19,9 @@ import { FormElementComponent } from '../form-element-component.directive';
               (focus)="onFocus.emit(input)"
               (blur)="onBlur.emit(input)"
               placeholder="{{elementModel.label}}"
+              [style.min-width.%]="100"
               [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
-      </textarea>
+    </textarea>
     </mat-form-field>
   `
 })

projects/player/src/app/components/element-overlay/element-overlay.component.ts

@@ -38,7 +38,7 @@ export class ElementOverlayComponent implements OnInit {
 
     const elementComponentRef = this.elementComponentContainer.createComponent(elementComponentFactory);
     elementComponentRef.location.nativeElement.style.display = 'block';
-    elementComponentRef.location.nativeElement.style.height = this.elementModel.type === 'text' ? 'auto' : '100%';
+    elementComponentRef.location.nativeElement.style.height = '100%';
 
     const elementComponent = elementComponentRef.instance;
     elementComponent.elementModel = this.elementModel;

projects/player/src/app/components/element/element.component.html

 <app-element-overlay
     [style.overflow]="'auto'"
-    [style.display]="'block'"
-    [style.width]="elementModel.dynamicPositioning ? '100%': elementModel.width + 'px'"
+    [style.display]="elementModel.dynamicPositioning ?'contents' : 'block'"
+    [style.width]="elementModel.dynamicPositioning  ? '100%': elementModel.width + 'px'"
     [style.height]="elementModel.dynamicPositioning ? '100%' : elementModel.height + 'px'"
     [elementModel]="elementModel"
     [parentForm]="elementForm"

projects/player/src/app/components/page/page.component.html

@@ -8,7 +8,7 @@
                [section]="section"
                [ngStyle]="{
                   position: 'relative',
-                  display: 'block',
+                  display: section.dynamicPositioning ? 'contents' : 'block',
                   overflow: 'auto',
                   width: '100%',
                   'background-color': section.backgroundColor,

projects/player/src/app/components/section/section.component.html

@@ -30,8 +30,7 @@
           [style.grid-column-end]="element.gridColumnEnd"
           [style.grid-row-start]="element.gridRowStart"
           [style.grid-row-end]="element.gridRowEnd"
-          [style.display]=" element.type === 'radio' ? 'inherit' : 'block'"
-          [style.height.%]="100"
+          [style.display]="element.dynamicPositioning ? (element.type === 'radio') ? 'contents' : 'inline' : 'block'"
           [elementModel]="element"
           [parentForm]="sectionForm"
           [parentArrayIndex]="i">