Add alternative radio button group with images

This works similarly to the standard radio group, but has a fixed 
horizontal layout with images above the options.

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

+import { Component } from '@angular/core';
+import { RadioGroupImagesElement } from '../../models/compound-elements/radio-group-images';
+import { FormElementComponent } from '../../form-element-component.directive';
+
+@Component({
+  selector: 'app-radio-group-images',
+  template: `
+    <div class="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' : ''">
+      <label id="radio-group-label" class="white-space-break"
+             [innerHTML]="elementModel.label">
+      </label>
+      <mat-radio-group aria-labelledby="radio-group-label" [formControl]="elementFormControl"
+                       class="grid-layout" [style.display]="'grid'"
+                       [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)">
+        <div *ngFor="let option of elementModel.columns; let i = index" class="columns"
+             fxLayout="column"
+             [style.grid-column-start]="1 + i"
+             [style.grid-column-end]="2 + i"
+             [style.grid-row-start]="1"
+             [style.grid-row-end]="2">
+          <img *ngIf="option.imgSrc && option.position === 'above'"
+               [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
+          <div>{{option.text}}</div>
+          <img *ngIf="option.imgSrc && option.position === 'below'"
+               [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
+        </div>
+        <mat-radio-button *ngFor="let option of elementModel.columns; let i = index"
+                          [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
+                          [value]="i"
+                          [style.grid-column-start]="1 + i"
+                          [style.grid-column-end]="2 + i"
+                          [style.grid-row-start]="2"
+                          [style.grid-row-end]="3">
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
+  `,
+  styles: [
+    '.grid-layout .columns {text-align: center;}',
+    '.grid-layout .columns img {height: 100%; object-fit: none;}',
+    '::ng-deep app-radio-group-images .grid-layout mat-radio-button span.mat-radio-container {left: calc(50% - 10px)}',
+    'mat-radio-group {margin-top: 10px}',
+    '.grid-layout mat-radio-button {margin-top: 15px}'
+  ]
+})
+export class RadioGroupImagesComponent extends FormElementComponent {
+  elementModel!: RadioGroupImagesElement;
+}

projects/common/id.service.ts

@@ -15,7 +15,8 @@ export class IdService {
     audio: 0,
     video: 0,
     likert: 0,
-    likert_row: 0
+    likert_row: 0,
+    'radio-group-images': 0
   };
 
   static getInstance(): IdService {

projects/common/models/compound-elements/radio-group-images.ts

+import { InputElement, UIElement } from '../uI-element';
+import { LikertColumn, FontElement, SurfaceUIElement } from '../../interfaces/UIElementInterfaces';
+import { initFontElement, initSurfaceElement } from '../../util/unit-interface-initializer';
+
+export class RadioGroupImagesElement extends InputElement implements FontElement, SurfaceUIElement {
+  columns: LikertColumn[] = [];
+
+  fontColor: string = 'black';
+  font: string = 'Roboto';
+  fontSize: number = 18;
+  lineHeight: number = 120;
+  bold: boolean = false;
+  italic: boolean = false;
+  underline: boolean = false;
+
+  backgroundColor: string = 'transparent';
+
+  constructor(serializedElement: UIElement) {
+    super(serializedElement);
+    Object.assign(this, serializedElement);
+    Object.assign(this, initFontElement(serializedElement));
+    Object.assign(this, initSurfaceElement(serializedElement));
+
+    this.height = serializedElement.height || 100;
+    this.backgroundColor = serializedElement.backgroundColor as string || 'transparent';
+  }
+}

projects/common/models/uI-element.ts

@@ -3,7 +3,7 @@ import { IdService } from '../id.service';
 import { LikertColumn, LikertRow } from '../interfaces/UIElementInterfaces';
 
 export type UIElementType = 'text' | 'button' | 'text-field' | 'text-area' | 'checkbox'
-| 'dropdown' | 'radio' | 'image' | 'audio' | 'video' | 'likert' | 'likert_row';
+| 'dropdown' | 'radio' | 'image' | 'audio' | 'video' | 'likert' | 'likert_row' | 'radio-group-images';
 export type InputElementValue = string | number | boolean | null;
 
 export interface ValueChangeElement {

projects/common/shared.module.ts

@@ -41,6 +41,7 @@ import { PlayerTimeFormatPipe } from './element-components/control-bar/player-ti
 import { LikertComponent } from './element-components/compound-elements/likert.component';
 import { LikertRadioButtonGroupComponent } from './element-components/compound-elements/likert-radio-button-group.component';
 import { Magnifier } from './element-components/magnifier.component';
+import { RadioGroupImagesComponent } from './element-components/compound-elements/radio-group-images.component';
 
 @NgModule({
   imports: [
@@ -79,7 +80,8 @@ import { Magnifier } from './element-components/magnifier.component';
     PlayerTimeFormatPipe,
     LikertComponent,
     LikertRadioButtonGroupComponent,
-    Magnifier
+    Magnifier,
+    RadioGroupImagesComponent
   ],
   exports: [
     CommonModule,

projects/common/util/element.factory.ts

@@ -23,6 +23,8 @@ import { AudioComponent } from '../element-components/audio.component';
 import { VideoComponent } from '../element-components/video.component';
 import { LikertElement } from '../models/compound-elements/likert-element';
 import { LikertComponent } from '../element-components/compound-elements/likert.component';
+import { RadioGroupImagesComponent } from '../element-components/compound-elements/radio-group-images.component';
+import { RadioGroupImagesElement } from '../models/compound-elements/radio-group-images';
 
 export function createElement(elementModel: UIElement): UIElement {
   let newElement: UIElement;
@@ -60,6 +62,9 @@ export function createElement(elementModel: UIElement): UIElement {
     case 'likert':
       newElement = new LikertElement(elementModel);
       break;
+    case 'radio-group-images':
+      newElement = new RadioGroupImagesElement(elementModel);
+      break;
     default:
       throw new Error(`ElementType ${elementModel.type} not found!`);
   }
@@ -94,6 +99,8 @@ export function getComponentFactory(
       return componentFactoryResolver.resolveComponentFactory(VideoComponent);
     case 'likert':
       return componentFactoryResolver.resolveComponentFactory(LikertComponent);
+    case 'radio-group-images':
+      return componentFactoryResolver.resolveComponentFactory(RadioGroupImagesComponent);
     default:
       throw new Error('unknown element');
   }

projects/editor/src/app/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.html

@@ -60,6 +60,11 @@
     <ng-template mat-tab-label>
       <mat-icon class="example-tab-icon">widgets</mat-icon>
     </ng-template>
+    <button mat-raised-button (click)="addUIElement('radio-group-images')"
+            draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','radio-group-images')">
+      <mat-icon>radio_button_checked</mat-icon>
+      Optionsfelder (Bild)
+    </button>
     <button mat-raised-button (click)="addUIElement('likert')"
             draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','likert')">
       <mat-icon>toc</mat-icon>

projects/editor/src/app/unit-view/unit-view.component.ts

@@ -12,7 +12,7 @@ import { Unit } from '../../../../common/models/unit';
   selector: 'app-unit-view',
   templateUrl: './unit-view.component.html',
   styles: [
-    '.toolbox_drawer {width: 230px}',
+    '.toolbox_drawer {width: 248px}',
     '.properties_drawer {width: 320px}',
     '.drawer-button {font-size: large;background-color: lightgray; min-width: 0; width: 2%;}',
     '.drawer-button {border: none; cursor: pointer}',