Change TextImagePanel to work with DropList items

projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts

@@ -22,7 +22,8 @@ import { LikertRowElement } from 'common/models/elements/compound-elements/liker
                                          elementModel.rowLabel.imgPosition === 'right'"
            [class.fx-column-start-stretch]="elementModel.rowLabel.imgPosition === 'above' ||
                                             elementModel.rowLabel.imgPosition === 'below'">
-        <aspect-text-image-panel [label]="elementModel.rowLabel"></aspect-text-image-panel>
+        <aspect-text-image-panel [label]="elementModel.rowLabel"
+                                 [style.justify-content]="'center'"></aspect-text-image-panel>
       </div>
 
       <mat-radio-button *ngFor="let column of [].constructor(elementModel.columnCount); let j = index"

projects/common/components/compound-elements/likert/likert.component.ts

@@ -69,6 +69,7 @@ import { BasicStyles } from 'common/models/elements/property-group-interfaces';
   styles: [`
     .likert-column-label {
       text-align: center;
+      justify-content: center;
     }
     .wrapper {
       width: 100%;

projects/common/components/input-elements/radio-group-images.component.ts

@@ -35,6 +35,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
   styles: [`
     .radio-button-label {
       cursor: pointer;
+      justify-content: center;
     }
     mat-radio-group {
       display: grid;

projects/common/components/text-image-panel.component.ts

 import {
   Component, Input
 } from '@angular/core';
-import { TextImageLabel } from 'common/models/elements/label-interfaces';
+import { DragNDropValueObject, TextImageLabel } from 'common/models/elements/label-interfaces';
 
 @Component({
   selector: 'aspect-text-image-panel',
   template: `
-    <div class="wrapper" [ngClass]="{'column': label.imgPosition === 'above',
-                                   'column-reverse': label.imgPosition === 'below',
-                                   'row': label.imgPosition === 'left',
-                                   'row-reverse': label.imgPosition === 'right'}">
+    <div *ngIf="$any(label).audioSrc"
+         class="audio-button"
+         (click)="player.play()">
+      <audio #player
+             [src]="$any(label).audioSrc | safeResourceUrl">
+      </audio>
+      <mat-icon data-draggable-audio="true">play_arrow</mat-icon>
+    </div>
+    <div class="image-wrapper" [ngClass]="{'column': label.imgPosition === 'above',
+                                     'column-reverse': label.imgPosition === 'below',
+                                     'row': label.imgPosition === 'left',
+                                     'row-reverse': label.imgPosition === 'right'}">
       <img *ngIf="label.imgSrc"
            [style.object-fit]="'scale-down'"
            [style.max-width.%]="100"
            [src]="label.imgSrc | safeResourceUrl" alt="Image Placeholder">
-      <div class="text" [innerHTML]="label.text | safeResourceHTML"></div>
+      <div *ngIf="label.text !== ''" class="text" [innerHTML]="label.text | safeResourceHTML"></div>
     </div>
   `,
   styles: [`
-    :host {align-self: center;}
-    .wrapper {
+    :host {
+      align-self: center;
+      justify-content: inherit;
+      display: flex;
+      max-height: 100%;
+    }
+    .image-wrapper {
       display: flex;
+      justify-content: inherit;
+      max-height: 100%;
     }
     .column {flex-direction: column;}
     .column-reverse {flex-direction: column-reverse;}
@@ -29,7 +44,6 @@ import { TextImageLabel } from 'common/models/elements/label-interfaces';
     .text {
       display: flex;
       align-items: center;
-      justify-content: center;
       color: inherit;
       font-family: inherit;
       font-size: inherit;
@@ -37,9 +51,27 @@ import { TextImageLabel } from 'common/models/elements/label-interfaces';
       font-style: inherit;
       text-decoration: inherit;
       background-color: inherit;
+      margin: 10px;
+    }
+    .column .text, .column-reverse .text {
+      justify-content: center;
+    }
+    .audio-button {
+      cursor: pointer;
+      align-self: center;
+      padding: 0 5px;
+      display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
+    }
+    .audio-button:hover {color: #006064;
+    }
+    .column img, .column-reverse img {
+      height: 100%;
+    }
+    .row img, .row-reverse img {
+      width: 100%;
     }
   `]
 })
 export class TextImagePanelComponent {
-  @Input() label!: TextImageLabel;
+  @Input() label!: TextImageLabel | DragNDropValueObject;
 }

projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts

@@ -26,7 +26,7 @@ import { TextImageLabel } from 'common/models/elements/label-interfaces';
             </mat-select>
           </mat-form-field>
         </div>
-        <aspect-text-image-panel [label]="newLabel"></aspect-text-image-panel>
+        <aspect-text-image-panel [label]="newLabel" [style.justify-content]="'center'"></aspect-text-image-panel>
       </div>
 
     </mat-dialog-content>

projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts

@@ -63,7 +63,8 @@ import { TextLabel } from 'common/models/elements/label-interfaces';
               </mat-select>
             </mat-form-field>
           </div>
-          <aspect-text-image-panel [label]="newLikertRow.rowLabel"></aspect-text-image-panel>
+          <aspect-text-image-panel [label]="newLikertRow.rowLabel"
+                                   [style.justify-content]="'center'"></aspect-text-image-panel>
         </div>
       </div>
     </mat-dialog-content>