Rebase to new add-feature-slider branch

projects/common/id.service.ts

@@ -17,6 +17,7 @@ export class IdService {
     likert: 0,
     likert_row: 0,
     slider: 0,
+    'spell-correct': 0,
     'radio-group-images': 0,
     'drop-list': 0
   };

projects/common/models/uI-element.ts

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

projects/common/shared.module.ts

@@ -45,6 +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";
 
 @NgModule({
   imports: [
@@ -73,6 +74,7 @@ import { DropListComponent } from './element-components/compound-elements/drop-l
     AudioComponent,
     VideoComponent,
     SliderComponent,
+    SpellCorrectComponent,
     RadioButtonGroupComponent,
     CheckboxComponent,
     DropdownComponent,
@@ -113,13 +115,13 @@ import { DropListComponent } from './element-components/compound-elements/drop-l
     AudioComponent,
     VideoComponent,
     SliderComponent,
+    SpellCorrectComponent,
     RadioButtonGroupComponent,
     CheckboxComponent,
     DropdownComponent,
     MatSnackBarModule,
     MatTooltipModule,
     MatDialogModule,
-    TranslateModule,
     SafeResourceHTMLPipe
   ],
   providers:

projects/common/util/element.factory.ts

@@ -28,6 +28,8 @@ import { DropListComponent } from '../element-components/compound-elements/drop-
 import { DropListElement } from '../models/compound-elements/drop-list';
 import { SliderElement } from '../models/slider-element';
 import { SliderComponent } from '../element-components/slider.component';
+import { SpellCorrectElement } from '../models/spell-correct-element';
+import { SpellCorrectComponent } from '../element-components/spell-correct.component';
 
 export function createElement(elementModel: UIElement): UIElement {
   let newElement: UIElement;
@@ -74,6 +76,9 @@ export function createElement(elementModel: UIElement): UIElement {
     case 'slider':
       newElement = new SliderElement(elementModel);
       break;
+    case 'spell-correct':
+      newElement = new SpellCorrectElement(elementModel);
+      break;
     default:
       throw new Error(`ElementType ${elementModel.type} not found!`);
   }
@@ -114,6 +119,8 @@ export function getComponentFactory(
       return componentFactoryResolver.resolveComponentFactory(DropListComponent);
     case 'slider':
       return componentFactoryResolver.resolveComponentFactory(SliderComponent);
+    case 'spell-correct':
+      return componentFactoryResolver.resolveComponentFactory(SpellCorrectComponent);
     default:
       throw new Error('unknown element');
   }

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

@@ -80,5 +80,10 @@
       <mat-icon>linear_scale</mat-icon>
       Schieberegler
     </button>
+    <button mat-raised-button (click)="addUIElement('spell-correct')"
+            draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','spell-correct')">
+      <mat-icon>format_strikethrough</mat-icon>
+      Wort korrigieren
+    </button>
   </mat-tab>
 </mat-tab-group>

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

@@ -18,6 +18,12 @@
                  (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,7 +115,8 @@
     "onlyOneItem": "Nur ein erlaubtes Element",
     "duplicateElement": "Element duplizieren",
     "deleteElement": "Element löschen",
-    "noElementSelected": "Kein Element ausgewählt"
+    "noElementSelected": "Kein Element ausgewählt",
+    "spellCorrectButtonLabel": "Wort zum Korrigieren"
   },
   "player": {
     "autoStart": "Autostart",