added number conversion in HTML value retrieval

Changes:
- number input fields now return numbers
- range elements removed since they are untested

Additions:
- added min and step specifiers to input fields associated to
  item number properties
- added a color hint for invalidity of
  item number input fields in actor sheet

src/module/actor/actor-sheet.ts

@@ -131,7 +131,7 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
      * The value is parsed to:
      * - Checkbox: boolean
      * - Text input: string
-     * - Number, range input: trimmed string
+     * - Number: number
      * @param el the input element to collect the value of
      */
     private getValue(el: HTMLFormElement): boolean | string | number {
@@ -148,12 +148,18 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
             return value;
         }
 
-        // Numbers and ranges:
-        else if (["number", "range"].includes(el.type)) {
-            const value: string = el.value.trim();
+        // Numbers:
+        else if (el.type === "number") {
+            const value = Number(el.value.trim());
             return value;
         }
 
+        // // Ranges:
+        // else if (el.type === "range") {
+        //     const value: string = el.value.trim();
+        //     return value;
+        // }
+
         // // Radio Checkboxes (untested, cf. FormDataExtended.process)
         // else if (el.type === "radio") {
         //     const chosen: HTMLFormElement = el.find((r: HTMLFormElement) => r["checked"]);

src/scss/components/_items.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .items-list {
     list-style: none;
     margin: 7px 0;
@@ -52,6 +54,9 @@
         width: 2.5em;
         padding: 0;
     }
+    .item-num-val:invalid {
+        background-color: color.mix(lightcoral, $c-light-grey, 25%);
+    }
 
     .item-description {
         font-size: 75%;

src/templates/actor/partials/items-overview.hbs

@@ -84,7 +84,7 @@
             <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
         </div>
         {{!-- amount --}}
-        <input class="flex05 item-num-val item-change" type="number" value="{{item.data.data.quantity}}" data-dtype="Number"
+        <input class="flex05 item-num-val item-change" type="number" min="0" step="1" value="{{item.data.data.quantity}}" data-dtype="Number"
             data-property="data.quantity" title="{{localize 'DS4.Quantity'}}">
         {{!-- name --}}
         <input class="flex3 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"

src/templates/item/partials/description.hbs

@@ -13,7 +13,7 @@
         </div>
         <div class="side-property">
             <label for="data.quantity">{{localize 'DS4.Quantity'}}</label>
-            <input type="number" data-dtype="Number" name="data.quantity" value="{{data.quantity}}" />
+            <input type="number" min="0" step="1" data-dtype="Number" name="data.quantity" value="{{data.quantity}}" />
         </div>
         <div class="side-property">
             <label for="data.storageLocation">{{localize 'DS4.StorageLocation'}}</label>

src/templates/item/partials/details.hbs

@@ -4,7 +4,7 @@
     <div class="side-properties">
         <div class="side-property">
                 <label for="data.price">{{localize "DS4.PriceGold"}}</label>
-                <input type="number" data-dtype="Number" name="data.price" value="{{data.price}}" />
+                <input type="number" min="0" data-dtype="Number" name="data.price" value="{{data.price}}" />
             </div>
             <div class="side-property">
                 <label for="data.availability">{{localize "DS4.ItemAvailability"}}</label>