[player] Refactor styles for elements and overlays

* Remove unnecessary styles
* Refactor case distinctions
* Improve styles of some elements

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

@@ -5,11 +5,14 @@ import { ElementComponent } from '../element-component.directive';
 @Component({
   selector: 'app-image',
   template: `
+    <div [style.height.%]="100"
+         [style.width.%]="100">
       <img [src]="elementModel.src | safeResourceUrl"
            alt="Image Placeholder"
            [style.object-fit]="'contain'"
            [style.height.%]="100"
            [style.width.%]="100">
+    </div>
   `
 })
 export class ImageComponent extends ElementComponent {

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

@@ -5,25 +5,25 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-radio-button-group',
   template: `
-      <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' : ''">
-          <label [innerHTML]="elementModel.label" id="radio-group-label"></label>
-          <mat-radio-group aria-labelledby="radio-group-label"
-                           [style.margin-bottom.px]="10"
-                           fxLayout="{{elementModel.alignment}}"
-                           [formControl]="elementFormControl">
-              <mat-radio-button *ngFor="let option of elementModel.options" [value]="option">
-                  {{option}}
-              </mat-radio-button>
-          </mat-radio-group>
-      </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' : ''">
+      <label [innerHTML]="elementModel.label" id="radio-group-label"></label>
+      <mat-radio-group aria-labelledby="radio-group-label"
+                       [style.margin-bottom.px]="20"
+                       [fxLayout]="elementModel.alignment"
+                       [formControl]="elementFormControl">
+        <mat-radio-button *ngFor="let option of elementModel.options" [value]="option">
+          {{option}}
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
   `
 })
 export class RadioButtonGroupComponent extends FormElementComponent {

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

@@ -5,11 +5,14 @@ import { ElementComponent } from '../element-component.directive';
 @Component({
   selector: 'app-video',
   template: `
+    <div [style.height.%]="100"
+         [style.width.%]="100">
       <video controls [src]="elementModel.src | safeResourceUrl"
              [style.object-fit]="'contain'"
              [style.height.%]="100"
              [style.width.%]="100">
       </video>
+    </div>
   `
 })
 export class VideoComponent extends ElementComponent {

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

@@ -36,11 +36,7 @@ export class ElementOverlayComponent implements OnInit {
     const elementComponentFactory =
       ComponentUtils.getComponentFactory(this.elementModel.type, this.componentFactoryResolver);
 
-    const elementComponentRef = this.elementComponentContainer.createComponent(elementComponentFactory);
-    elementComponentRef.location.nativeElement.style.display = 'block';
-    elementComponentRef.location.nativeElement.style.height = '100%';
-
-    const elementComponent = elementComponentRef.instance;
+    const elementComponent = this.elementComponentContainer.createComponent(elementComponentFactory).instance;
     elementComponent.elementModel = this.elementModel;
 
     if (this.isInputElement) {

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

 <app-element-overlay
-    [style.overflow]="'auto'"
-    [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"
     [parentArrayIndex]="parentArrayIndex"

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

@@ -3,10 +3,12 @@
 <ng-template #staticElements>
   <ng-container *ngFor="let element of section.elements; let i = index">
     <app-element
+        [style.overflow]="'auto'"
+        [style.width.px]="element.width"
+        [style.height.px]="element.height"
         [style.position]="'absolute'"
         [style.left.px]="element.xPosition"
         [style.top.px]="element.yPosition"
-        [style.display]="'block'"
         [elementModel]="element"
         [parentForm]="sectionForm"
         [parentArrayIndex]="i">
@@ -30,7 +32,6 @@
           [style.grid-column-end]="element.gridColumnEnd"
           [style.grid-row-start]="element.gridRowStart"
           [style.grid-row-end]="element.gridRowEnd"
-          [style.display]="element.dynamicPositioning ? (element.type === 'radio') ? 'contents' : 'inline' : 'block'"
           [elementModel]="element"
           [parentForm]="sectionForm"
           [parentArrayIndex]="i">