Replace buttonLabel by label

projects/common/element-components/spell-correct.component.ts

+import { Component, ViewChild } from '@angular/core';
+import { MatInput } from '@angular/material/input';
+import { FormElementComponent } from '../form-element-component.directive';
+import { SpellCorrectElement } from '../models/spell-correct-element';
+
+@Component({
+  selector: 'app-spell-correct',
+  template: `
+    <div fxFlex
+         fxLayout="column"
+         [style.width.%]="100"
+         appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
+         [style.height.%]="100">
+      <mat-form-field class="small-input">
+        <input matInput type="text"
+               [style.text-align]="'center'"
+               autocomplete="off"
+               [formControl]="elementFormControl">
+      </mat-form-field>
+      <button mat-button
+              [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.width.%]="100"
+              [style.margin-top]="'-20px'"
+              [style.text-decoration-line]="strikethrough() ? 'line-through' : ''"
+              (click)="onClick($event)">
+        &nbsp;{{elementModel.label}}&nbsp;
+      </button>
+    </div>
+  `,
+  styles: [
+    '::ng-deep app-spell-correct .small-input div.mat-form-field-infix {border-top: none; padding: 0.75em 0 0.25em 0;}'
+  ]
+})
+export class SpellCorrectComponent extends FormElementComponent {
+  elementModel!: SpellCorrectElement;
+  @ViewChild(MatInput) inputElement!: MatInput;
+
+  strikethrough(): boolean {
+    if (this.inputElement) {
+      const value = this.inputElement.value;
+      if (value === null) return false;
+      if (value === undefined) return false;
+      return value.length > 0;
+    }
+    return false;
+  }
+
+  onClick(event: MouseEvent) : void {
+    if (this.strikethrough()) {
+      this.elementFormControl.setValue('');
+    } else {
+      this.elementFormControl.setValue(this.elementModel.label);
+      this.inputElement.focus();
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}

projects/common/models/spell-correct-element.ts

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

projects/common/shared.module.ts

@@ -45,7 +45,7 @@ import { LikertRadioButtonGroupComponent }
 import { Magnifier } from './element-components/magnifier.component';
 import { RadioGroupImagesComponent } from './element-components/compound-elements/radio-group-images.component';
 import { DropListComponent } from './element-components/compound-elements/drop-list.component';
-import { SpellCorrectComponent } from "./element-components/spell-correct.component";
+import { SpellCorrectComponent } from './element-components/spell-correct.component';
 
 @NgModule({
   imports: [

projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html

@@ -18,12 +18,6 @@
                  (input)="updateModel('label', $any($event.target).value)">
         </mat-form-field>
 
-        <mat-form-field *ngIf="combinedProperties.buttonLabel !== undefined" appearance="fill">
-          <mat-label>{{'propertiesPanel.spellCorrectButtonLabel' | translate }}</mat-label>
-          <input matInput type="text" [value]="combinedProperties.buttonLabel"
-                 (input)="updateModel('buttonLabel', $any($event.target).value)">
-        </mat-form-field>
-
         <ng-container *ngIf="combinedProperties.text">
           {{'propertiesPanel.text' | translate }}
           <div class="text-text" [innerHTML]="$any(combinedProperties.text) | safeResourceHTML"

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

@@ -115,8 +115,7 @@
     "onlyOneItem": "Nur ein erlaubtes Element",
     "duplicateElement": "Element duplizieren",
     "deleteElement": "Element löschen",
-    "noElementSelected": "Kein Element ausgewählt",
-    "spellCorrectButtonLabel": "Wort zum Korrigieren"
+    "noElementSelected": "Kein Element ausgewählt"
   },
   "player": {
     "autoStart": "Autostart",