[player] Add optional backspace key to keypad with custom preset

projects/common/models/elements/element.ts

@@ -55,6 +55,7 @@ export abstract class UIElement {
     (this.player as PlayerProperties)[property] = value;
   }
 
+  // eslint-disable-next-line class-methods-use-this
   getChildElements(): UIElement[] {
     return [];
   }
@@ -140,6 +141,7 @@ export abstract class TextInputElement extends InputElement {
   inputAssistanceFloatingStartPosition: 'startBottom' | 'endCenter' = 'startBottom';
   restrictedToInputAssistanceChars: boolean = true;
   hasArrowKeys: boolean = false;
+  hasBackspaceKey: boolean = false;
   showSoftwareKeyboard: boolean = false;
   softwareKeyboardShowFrench: boolean = false;
   protected constructor(element: Partial<TextInputElement>) {
@@ -156,6 +158,7 @@ export abstract class TextInputElement extends InputElement {
       this.restrictedToInputAssistanceChars = element.restrictedToInputAssistanceChars;
     }
     if (element.hasArrowKeys) this.hasArrowKeys = element.hasArrowKeys;
+    if (element.hasBackspaceKey) this.hasBackspaceKey = element.hasBackspaceKey;
     if (element.showSoftwareKeyboard) this.showSoftwareKeyboard = element.showSoftwareKeyboard;
     if (element.softwareKeyboardShowFrench) this.softwareKeyboardShowFrench = element.softwareKeyboardShowFrench;
   }

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

@@ -165,6 +165,12 @@ import { CombinedProperties } from 'editor/src/app/components/properties-panel/e
       {{'propertiesPanel.hasArrowKeys' | translate }}
     </mat-checkbox>
 
+    <mat-checkbox *ngIf="combinedProperties.inputAssistancePreset === 'custom'"
+                  [checked]="$any(combinedProperties.hasBackspaceKey)"
+                  (change)="updateModel.emit({ property: 'hasBackspaceKey', value: $event.checked })">
+      {{'propertiesPanel.hasBackspaceKey' | translate }}
+    </mat-checkbox>
+
     <mat-checkbox *ngIf="combinedProperties.type === 'text-area' && combinedProperties.inputAssistancePreset !== null &&
                        combinedProperties.hasReturnKey !== undefined"
                   [checked]="$any(combinedProperties.hasReturnKey)"

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

@@ -125,6 +125,7 @@
     "inputAssistance": "Eingabehilfe",
     "restrictedToInputAssistanceChars": "Bearbeitung anderer Zeichen verhindern",
     "hasReturnKey": "Eingabetaste hinzufügen",
+    "hasBackspaceKey": "Löschtaste hinzufügen",
     "hasArrowKeys": "Pfeiltasten hinzufügen",
     "none": "keine",
     "french": "Französische Sonderzeichen",

projects/player/modules/key-input/components/keypad/keypad.component.ts

@@ -17,6 +17,7 @@ export class KeypadComponent implements OnInit {
   @Input() restrictToAllowedKeys!: boolean;
   @Input() hasArrowKeys!: boolean;
   @Input() hasReturnKey!: boolean;
+  @Input() hasBackspaceKey!: boolean;
 
   @Output() backSpaceClicked = new EventEmitter();
   @Output() keyClicked = new EventEmitter<string>();
@@ -25,7 +26,7 @@ export class KeypadComponent implements OnInit {
   layout: KeyInputLayout = { default: [], shift: [], additional: [] };
 
   ngOnInit(): void {
-    this.layout = KeyLayout.get(this.preset, this.customKeys);
+    this.layout = KeyLayout.get(this.preset, this.customKeys, this.hasBackspaceKey);
   }
 
   evaluateClickedKeyValue(key: string): void {

projects/player/modules/key-input/configs/key-layout.ts

@@ -7,7 +7,11 @@ export interface KeyInputLayout {
 }
 
 export class KeyLayout {
-  static get = (preset: InputAssistancePreset | 'keyboard', customKeys: string = ''): KeyInputLayout => {
+  static get = (
+    preset: InputAssistancePreset | 'keyboard',
+    customKeys: string = '',
+    hasBackspaceKey: boolean = false
+  ): KeyInputLayout => {
     switch (preset) {
       case 'french': {
         return {
@@ -134,9 +138,10 @@ export class KeyLayout {
         };
       }
       default: { // custom
+        const keys = hasBackspaceKey ? customKeys.split('').concat('Backspace') : customKeys.split('');
         return {
           default: [
-            customKeys.split('')
+            keys
           ],
           shift: [[]],
           additional: [[]]

projects/player/src/app/components/floating-keypad/floating-keypad.component.html

@@ -15,6 +15,7 @@
       [customKeys]="keypadService.elementComponent.elementModel.inputAssistanceCustomKeys"
       [restrictToAllowedKeys]="keypadService.elementComponent.elementModel.restrictedToInputAssistanceChars"
       [hasArrowKeys]="keypadService.elementComponent.elementModel.hasArrowKeys"
+      [hasBackspaceKey]="keypadService.elementComponent.elementModel.hasBackspaceKey"
       [hasReturnKey]="keypadService.elementComponent.elementModel | hasReturnKey"
       (backSpaceClicked)="keypadService.deleteCharacters(true)"
       (keyClicked)="keypadService.enterKey($event)">

projects/player/src/app/components/layouts/player-layout/player-layout.component.html

@@ -14,7 +14,8 @@
         [customKeys]="keypadService.elementComponent.elementModel.inputAssistanceCustomKeys"
         [restrictToAllowedKeys]="keypadService.elementComponent.elementModel.restrictedToInputAssistanceChars"
         [hasArrowKeys]="keypadService.elementComponent.elementModel.hasArrowKeys"
-        [hasReturnKey]="!!keypadService.elementComponent.elementModel.hasReturnKey"
+        [hasBackspaceKey]="keypadService.elementComponent.elementModel.hasBackspaceKey"
+        [hasReturnKey]="keypadService.elementComponent.elementModel | hasReturnKey"
         (backSpaceClicked)="keypadService.deleteCharacters(true)"
         (keyClicked)="keypadService.enterKey($event)">
     </aspect-keypad>