Add coloring options to taoggle-button

Now correctly sets the chosen background color and additionally sets 
another (configurable) color to the selected value.

projects/common/ui-elements/toggle-button/toggle-button.component.ts

@@ -7,20 +7,23 @@ import { FormElementComponent } from '../../directives/form-element-component.di
   template: `
     <div class="mat-form-field">
       <mat-button-toggle-group [formControl]="elementFormControl"
-                               [style.height.px]="elementModel.height"
-                               [style.background-color]="elementModel.surfaceProps.backgroundColor"
-                               [style.color]="elementModel.fontProps.fontColor"
-                               [style.font-family]="elementModel.fontProps.font"
-                               [style.font-size.px]="elementModel.fontProps.fontSize"
-                               [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-                               [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-                               [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
-                               [style.line-height.%]="elementModel.fontProps.lineHeight">
+                               [style.height.px]="elementModel.height">
         <mat-button-toggle *ngFor="let option of elementModel.options; let i = index"
                            [value]="i"
                            [ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
                                                    elementFormControl.value !== null &&
-                                                   elementFormControl.value !== i }">
+                                                   elementFormControl.value !== i }"
+                           [style.color]="elementModel.fontProps.fontColor"
+                           [style.font-size.px]="elementModel.fontProps.fontSize"
+                           [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+                           [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                           [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+                           [style.font-family]="elementModel.fontProps.font"
+                           [style.background-color]="elementFormControl.value !== null &&
+                                                   elementFormControl.value === i ?
+                                                   elementModel.selectionColor :
+                                                   elementModel.surfaceProps.backgroundColor"
+                           [style.line-height.%]="elementModel.fontProps.lineHeight">
           {{option}}
         </mat-button-toggle>
       </mat-button-toggle-group>
@@ -30,7 +33,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
     'mat-button-toggle-group {min-width: 70px; min-height: 20px}',
     ':host ::ng-deep .mat-button-toggle-button {height: 100%}',
     ':host ::ng-deep .mat-button-toggle-label-content {height: 100%; line-height: unset}',
-    ':host ::ng-deep .strike .mat-button-toggle-label-content {text-decoration: line-through}',
+    ':host ::ng-deep .strike .mat-button-toggle-label-content {text-decoration: line-through}'
   ]
 })
 export class ToggleButtonComponent extends FormElementComponent {

projects/common/ui-elements/toggle-button/toggle-button.ts

@@ -10,6 +10,7 @@ import { initFontElement, initSurfaceElement } from '../../util/unit-interface-i
 export class ToggleButtonElement extends InputElement implements FontElement, SurfaceElement {
   options: string[] = ['abc', 'def'];
   strikeOtherOptions: boolean = false;
+  selectionColor: string = 'lightgreen';
 
   fontProps: FontProperties;
   surfaceProps: SurfaceProperties;
@@ -21,5 +22,8 @@ export class ToggleButtonElement extends InputElement implements FontElement, Su
     this.surfaceProps = initSurfaceElement(serializedElement);
 
     this.height = serializedElement.height as number || 25;
+    this.surfaceProps.backgroundColor =
+      serializedElement.surfaceProps?.backgroundColor as string ||
+      'transparent';
   }
 }

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

@@ -7,6 +7,18 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
   selector: 'app-element-style-properties',
   template: `
     <div fxLayout="column">
+      <mat-form-field *ngIf="combinedProperties.selectionColor !== undefined"
+                      appearance="fill" class="mdInput textsingleline">
+        <mat-label>{{'propertiesPanel.selectionColor' | translate }}</mat-label>
+        <input matInput type="color" [value]="combinedProperties.selectionColor"
+               (input)="updateModel.emit({ property: 'selectionColor', value: $any($event.target).value })">
+      </mat-form-field>
+      <mat-form-field *ngIf="combinedProperties.selectionColor !== undefined" appearance="fill">
+        <mat-label>{{'propertiesPanel.selectionColor' | translate }}</mat-label>
+        <input matInput type="text" [value]="combinedProperties.selectionColor"
+               (input)="updateModel.emit({ property: 'selectionColor', value: $any($event.target).value })">
+      </mat-form-field>
+
       <mat-form-field *ngIf="combinedProperties.borderRadius !== undefined" appearance="fill">
         <mat-label>{{'propertiesPanel.borderRadius' | translate }}</mat-label>
         <input matInput type="number" [value]="combinedProperties.borderRadius"

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

@@ -131,7 +131,8 @@
     "spellCorrectButtonLabel": "Wort zum Korrigieren",
     "borderColor": "Randfarbe",
     "borderWidth": "Randstärke",
-    "borderStyle": "Linienstil"
+    "borderStyle": "Linienstil",
+    "selectionColor": "Auswahlfarbe"
   },
   "player": {
     "autoStart": "Autostart",