From 59626352d178e4a63502914715c1ec0b300d2517 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 2 Nov 2021 11:39:32 +0100
Subject: [PATCH] [editor] Fix number inputs

- Use ngModel so it returns number
---
 projects/editor/src/app/dialog.service.ts     | 19 +++++++++++--------
 .../element-style-properties.component.ts     | 16 +++++++++++-----
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/projects/editor/src/app/dialog.service.ts b/projects/editor/src/app/dialog.service.ts
index d95936524..ab988a1a5 100644
--- a/projects/editor/src/app/dialog.service.ts
+++ b/projects/editor/src/app/dialog.service.ts
@@ -196,11 +196,12 @@ export class RichTextEditDialog {
               <input matInput type="text" [value]="newPlayerConfig.hintLabel || data.player.hintLabel"
                      (input)="newPlayerConfig.hintLabel = $any($event.target).value">
             </mat-form-field>
-            <mat-form-field *ngIf="newPlayerConfig.hintLabel !== ''" appearance="fill">
+            <mat-form-field *ngIf="newPlayerConfig.hintLabel || data.player.hintLabel"
+                            appearance="fill">
               <mat-label>{{ 'player.hintLabelDelay' | translate }}</mat-label>
-              <input matInput type="number" step="1000"
-                     [value]="newPlayerConfig.hintLabelDelay"
-                     (input)="newPlayerConfig.hintLabelDelay = $any($event.target).value">
+              <input matInput type="number" step="1000" min="0"
+                     [ngModel]="newPlayerConfig.hintLabelDelay || data.player.hintLabelDelay"
+                     (ngModelChange)="newPlayerConfig.hintLabelDelay = $event">
             </mat-form-field>
           </div>
         </mat-tab>
@@ -235,13 +236,15 @@ export class RichTextEditDialog {
             </mat-form-field>
             <mat-form-field appearance="fill">
               <mat-label>{{ 'player.minRuns' | translate }}</mat-label>
-              <input matInput type="number" [value]="newPlayerConfig.minRuns || data.player.minRuns"
-                     (input)="newPlayerConfig.minRuns = $any($event.target).value">
+              <input matInput type="number" min="0"
+                     [ngModel]="newPlayerConfig.minRuns || data.player.minRuns"
+                     (ngModelChange)="newPlayerConfig.minRuns = $event">
             </mat-form-field>
             <mat-form-field appearance="fill">
               <mat-label>{{ 'player.maxRuns' | translate }}</mat-label>
-              <input matInput type="number" [value]="newPlayerConfig.maxRuns || data.player.maxRuns"
-                     (input)="newPlayerConfig.maxRuns = $any($event.target).value">
+              <input matInput type="number" min="0"
+                     [ngModel]="newPlayerConfig.maxRuns || data.player.maxRuns"
+                     (ngModelChange)="newPlayerConfig.maxRuns = $event">
             </mat-form-field>
           </div>
         </mat-tab>
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-style-properties.component.ts b/projects/editor/src/app/unit-view/page-view/properties-panel/element-style-properties.component.ts
index a936e1faf..28791f651 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-style-properties.component.ts
+++ b/projects/editor/src/app/unit-view/page-view/properties-panel/element-style-properties.component.ts
@@ -34,14 +34,20 @@ import { UIElement } from '../../../../../../common/models/uI-element';
       <mat-form-field *ngIf="combinedProperties.fontSize != null"
                       appearance="fill" class="mdInput textsingleline">
         <mat-label>Schriftgröße</mat-label>
-        <input matInput type="number" [value]="combinedProperties.fontSize"
-               (input)="updateModel.emit({ property: 'fontSize', value: $any($event.target).value })">
+        <input matInput type="number" #fontSize="ngModel" min="0"
+               [ngModel]="combinedProperties.fontSize"
+               (ngModelChange)="updateModel.emit({ property: 'fontSize',
+                                                   value: $event,
+                                                   isInputValid: fontSize.valid && $event !== null})">
       </mat-form-field>
       <mat-form-field *ngIf="combinedProperties.lineHeight != null"
                       appearance="fill" class="mdInput textsingleline">
         <mat-label>Zeilenhöhe</mat-label>
-        <input matInput type="number" [value]="combinedProperties.lineHeight"
-               (input)="updateModel.emit({ property: 'lineHeight', value: $any($event.target).value })">
+        <input matInput type="number" #lineHeight="ngModel" min="0"
+               [ngModel]="combinedProperties.lineHeight"
+               (ngModelChange)="updateModel.emit({ property: 'lineHeight',
+                                                   value: $event,
+                                                   isInputValid: lineHeight.valid && $event !== null })">
       </mat-form-field>
 
       <mat-checkbox *ngIf="combinedProperties.bold != null"
@@ -64,5 +70,5 @@ import { UIElement } from '../../../../../../common/models/uI-element';
 })
 export class ElementStylePropertiesComponent {
   @Input() combinedProperties: UIElement = {} as UIElement;
-  @Output() updateModel = new EventEmitter<{ property: string; value: string | boolean }>();
+  @Output() updateModel = new EventEmitter<{ property: string; value: string | boolean, isInputValid?: boolean | null }>();
 }
-- 
GitLab