Implement strikethrough for selected ToggleButton value

Also refactor properties panel and ToggleButton class logic for striking 
values. This now relies more on CSS classes provided by Material instead 
of doing finetuned logic my ourselves. This also allows showing the 
correct preview in the editor.

#287

projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts

 import { Component, Input } from '@angular/core';
-import { FormElementComponent } from '../../../../directives/form-element-component.directive';
+import { FormElementComponent } from 'common/directives/form-element-component.directive';
 import { ToggleButtonElement } from 'common/models/elements/compound-elements/cloze/cloze-child-elements/toggle-button';
 
 @Component({
@@ -11,9 +11,8 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
                              [style.width]="elementModel.dynamicWidth ? 'unset' : '100%'">
       <mat-button-toggle *ngFor="let option of elementModel.richTextOptions; let i = index"
                          [value]="i"
-                         [ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
-                                                 elementFormControl.value !== null &&
-                                                 elementFormControl.value !== i }"
+                         [ngClass]="{ 'strike-other-options' : elementModel.strikeOtherOptions,
+                                      'strike-selected-option' : elementModel.strikeSelectedOption }"
                          [style.color]="elementModel.styling.fontColor"
                          [style.font-size.px]="elementModel.styling.fontSize"
                          [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
@@ -33,7 +32,10 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
     'mat-button-toggle-group {display: inline-flex; min-width: 70px; min-height: 20px; max-width: 100%;}',
     'mat-button-toggle-group {justify-content: center;}',
     ':host ::ng-deep .mat-button-toggle-label-content {line-height: unset}',
-    ':host ::ng-deep .strike .mat-button-toggle-label-content {text-decoration: line-through}',
+    ':host ::ng-deep .strike-selected-option.mat-button-toggle-checked .mat-button-toggle-label-content' +
+    '{text-decoration: line-through}',
+    ':host ::ng-deep .strike-other-options:not(.mat-button-toggle-checked) .mat-button-toggle-label-content' +
+    '{text-decoration: line-through}'
   ]
 })
 export class ToggleButtonComponent extends FormElementComponent {

projects/common/models/elements/compound-elements/cloze/cloze-child-elements/toggle-button.ts

@@ -9,6 +9,7 @@ import {
 export class ToggleButtonElement extends InputElement {
   richTextOptions: string[] = [];
   strikeOtherOptions: boolean = false;
+  strikeSelectedOption: boolean = false;
   verticalOrientation: boolean = false;
   dynamicWidth: boolean = true;
   styling: BasicStyles & {
@@ -20,6 +21,7 @@ export class ToggleButtonElement extends InputElement {
     super({ height: 25, ...element }, ...args);
     if (element.richTextOptions) this.richTextOptions = element.richTextOptions;
     if (element.strikeOtherOptions) this.strikeOtherOptions = element.strikeOtherOptions;
+    if (element.strikeSelectedOption) this.strikeSelectedOption = element.strikeSelectedOption;
     if (element.verticalOrientation) this.verticalOrientation = element.verticalOrientation;
     if (element.dynamicWidth !== undefined) this.dynamicWidth = element.dynamicWidth;
     this.styling = {

projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css

@@ -23,3 +23,15 @@
 button {
   margin-bottom: 15px;
 }
+
+:host ::ng-deep .mat-form-field {
+  margin-bottom: -10px;
+}
+
+:host ::ng-deep fieldset {
+  margin-bottom: 15px;
+}
+
+:host ::ng-deep .mat-checkbox {
+  margin-bottom: 8px;
+}

projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/select-properties.component.ts

 import {
   Component, EventEmitter, Input, Output
 } from '@angular/core';
+import { CombinedProperties } from 'editor/src/app/components/properties-panel/element-properties-panel.component';
 
 @Component({
   selector: 'aspect-select-properties',
@@ -25,8 +26,10 @@ import {
   ]
 })
 export class SelectPropertiesComponent {
-  @Input() combinedProperties!: any;
+  @Input() combinedProperties!: CombinedProperties;
   @Output() updateModel =
-    new EventEmitter<{ property: string; value: string | number | boolean | string[], isInputValid?: boolean | null }>();
-
+    new EventEmitter<{
+      property: string,
+      value: string | number | boolean | string[]
+    }>();
 }

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

@@ -100,7 +100,8 @@
     "true": "wahr",
     "false": "falsch",
     "appearance": "Aussehen",
-    "strikeOtherOptions": "Andere Optionen durchstreichen",
+    "strikeOtherOptions": "Nicht gewählte Optionen durchstreichen",
+    "strikeSelectedOption": "Gewählte Option durchstreichen",
     "minLength": "Minimallänge",
     "minValue": "Minimalwert",
     "minLengthWarnMessage": "Minimalwert Warnmeldung",