Refactor likert layout and add first column ratio prop

- Images now scale up and down depending on the available space.
- The new property controls the first (column) size parameter for the 
grid. The others are fixed at 1. Decimal values are allowed for 
fine-tuned control.
This prop is passed on to the child likert-row component. It uses the 
same grid and needs this info for proper alignment with the column 
headers.
- Remove unnecessary div in likert

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

@@ -9,7 +9,8 @@ import { LikertElementRow } from '../../models/compound-elements/likert-element-
     <mat-radio-group [style.display]="'grid'"
                      [formControl]="elementFormControl"
                      [value]="elementModel.value"
-                     [style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.columnCount)">
+                     [style.grid-template-columns]="firstColumnSizeRatio + 'fr ' +
+                                                    '1fr '.repeat(elementModel.columnCount)">
       <div [style.grid-column-start]="1"
            [style.grid-column-end]="2"
            [style.grid-row-start]="1"
@@ -31,4 +32,5 @@ import { LikertElementRow } from '../../models/compound-elements/likert-element-
 export class LikertRadioButtonGroupComponent extends FormElementComponent {
   @Input() elementModel!: LikertElementRow;
   @Input() parentForm!: FormGroup;
+  @Input() firstColumnSizeRatio!: number;
 }

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

@@ -12,7 +12,9 @@ import { CompoundElementComponent } from './compound-element.directive';
   selector: 'app-likert',
   template: `
     <div class="mat-typography"
-         [style.display]="'grid'" [style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.columns.length)"
+         [style.display]="'grid'"
+         [style.grid-template-columns]="elementModel.firstColumnSizeRatio + 'fr ' +
+                                        '1fr '.repeat(elementModel.columns.length)"
          [style.background-color]="elementModel.backgroundColor"
          [style.color]="elementModel.fontColor"
          [style.font-family]="elementModel.font"
@@ -21,12 +23,6 @@ import { CompoundElementComponent } from './compound-element.directive';
          [style.font-weight]="elementModel.bold ? 'bold' : ''"
          [style.font-style]="elementModel.italic ? 'italic' : ''"
          [style.text-decoration]="elementModel.underline ? 'underline' : ''">
-      <div class="headings" [style.display]="'grid'"
-           [style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.columns.length)"
-           [style.grid-column-start]="1"
-           [style.grid-column-end]="elementModel.columns.length + 2"
-           [style.grid-row-start]="1"
-           [style.grid-row-end]="2">
         <div *ngFor="let column of elementModel.columns; let i = index" class="columns"
              fxLayout="column"
              [style.grid-column-start]="2 + i"
@@ -39,18 +35,17 @@ import { CompoundElementComponent } from './compound-element.directive';
           <img *ngIf="column.imgSrc && column.position === 'below'"
                [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder">
         </div>
-      </div>
 
       <ng-container *ngFor="let row of elementModel.rows; let i = index">
         <app-likert-radio-button-group
             [style.background-color]="elementModel.lineColoring && i % 2 === 0 ? elementModel.lineColoringColor : ''"
-            [style.display]="'grid'"
             [style.grid-column-start]="1"
             [style.grid-column-end]="elementModel.columns.length + 2"
             [style.grid-row-start]="2 + i"
             [style.grid-row-end]="3 + i"
             [style.padding.px]="3"
             [elementModel]="row"
+            [firstColumnSizeRatio]="elementModel.firstColumnSizeRatio"
             [parentForm]="parentForm"
             (elementValueChanged)="elementValueChanged.emit($event)">
         </app-likert-radio-button-group>
@@ -58,8 +53,7 @@ import { CompoundElementComponent } from './compound-element.directive';
     </div>
   `,
   styles: [
-    '.headings {padding-bottom: 10px}',
-    '.headings img {object-fit: none}',
+    'img {object-fit: contain; max-height: 100%; max-width: 100%; margin: 10px}',
     '.columns {text-align: center;}',
     '::ng-deep app-likert mat-radio-button span.mat-radio-container {left: calc(50% - 10px)}'
   ]

projects/common/models/compound-elements/likert-element-row.ts

@@ -4,6 +4,7 @@ import { LikertRow } from '../../interfaces/UIElementInterfaces';
 export class LikertElementRow extends InputElement implements LikertRow {
   text: string = '';
   columnCount: number = 0;
+  firstColumnSizeRatio: number = 5;
 
   constructor(serializedElement: UIElement) {
     super(serializedElement);

projects/common/models/compound-elements/likert-element.ts

@@ -6,6 +6,7 @@ import { initFontElement, initSurfaceElement } from '../../util/unit-interface-i
 export class LikertElement extends UIElement implements FontElement, SurfaceUIElement {
   rows: LikertElementRow[] = [];
   columns: LikertColumn[] = [];
+  firstColumnSizeRatio: number = 5;
   lineColoring: boolean = true;
   lineColoringColor: string = '#D0F6E7';
   readOnly: boolean = false;

projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties-component.component.ts

@@ -489,6 +489,13 @@ import { FileService } from '../../../../../../../common/file.service';
                    property: 'highlightReceivingDropListColor',
                    value: $any($event.target).value })">
       </mat-form-field>
+      <mat-form-field *ngIf="combinedProperties.firstColumnSizeRatio != null"
+                      matTooltip="{{'propertiesPanel.firstColumnSizeRatioExplanation' | translate }}"
+                      appearance="fill" class="mdInput textsingleline">
+        <mat-label>{{'propertiesPanel.firstColumnSizeRatio' | translate }}</mat-label>
+        <input matInput type="number" [value]="combinedProperties.firstColumnSizeRatio"
+               (input)="updateModel.emit({ property: 'firstColumnSizeRatio', value: $any($event.target).value })">
+      </mat-form-field>
     </div>
     `,
   styleUrls: ['./element-model-properties.component.css']

projects/editor/src/assets/i18n/de.json

@@ -114,6 +114,8 @@
     "itemBackgroundColor": "Hintergrundfarbe der Elemente",
     "highlightReceivingDropList": "Potentielle Ablagen hervorheben",
     "highlightReceivingDropListColor": "Farbe der Hervorhebung",
+    "firstColumnSizeRatio": "Anteil der ersten Spalte",
+    "firstColumnSizeRatioExplanation": "Größenverhältnis der ersten Spalte zu allen anderen",
     "duplicateElement": "Element duplizieren",
     "deleteElement": "Element löschen",
     "noElementSelected": "Kein Element ausgewählt"