Change style of edited parameter (in edit page).

src/lib/components/parameters/ValueAtInstantEdit.svelte

@@ -19,6 +19,7 @@
   import { auditEditedAttribute } from "$lib/errors"
   import { metadata } from "$lib/metadata"
   import { labelFromUnit } from "$lib/parameters"
+  import type { MaybeBooleanValue } from "@openfisca/json-model/build/parameters"
 
   let globalErrors: { [key: string]: unknown }
   export { globalErrors as errors }
@@ -32,6 +33,7 @@
 
   function asMaybeNumberValue(
     value:
+      | MaybeBooleanValue
       | MaybeNumberValue
       | MaybeStringArrayValue
       | MaybeStringByStringValue
@@ -69,22 +71,48 @@
     )
     dispatch("change", valueAtInstant)
   }
+
+  function valueHasChanged(
+    parameter: ValueParameter,
+    oldValueAtInstant: ValueAtInstant,
+    valueAtInstant: ValueAtInstant,
+  ): boolean {
+    switch (parameter.type) {
+      case ValueType.Number:
+        return (
+          (valueAtInstant === "expected"
+            ? null
+            : asMaybeNumberValue(valueAtInstant).value ?? null) !==
+          (oldValueAtInstant === "expected"
+            ? null
+            : asMaybeNumberValue(oldValueAtInstant).value ?? null)
+        )
+      default:
+        console.log(`TODO: Handle parameter of type ${parameter.type}.`)
+    }
+  }
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="text-sm mb-4 mt-1">
   {#if parameter.type === ValueType.Number}
-    {#if (valueAtInstant === "expected" ? null : asMaybeNumberValue(valueAtInstant).value ?? null) !== (oldValueAtInstant === "expected" ? null : asMaybeNumberValue(oldValueAtInstant).value ?? null)}
+    {#if valueHasChanged(parameter, oldValueAtInstant, valueAtInstant)}
       {#if oldValueAtInstant === "expected"}
         <s>absent</s>
       {:else}
-        <s class="font-serif text-base text-black bg-le-gris-dispositif-light"
+        <s class="font-serif text-base text-black"
           >{asMaybeNumberValue(oldValueAtInstant).value ?? "absent"}</s
         >
       {/if}
     {/if}
     <input
-      class=" text-black hover:bg-le-gris-dispositif-light font-serif text-lg border-b border-t-0 border-l-0 border-r-0  px-2 py-0 mt-1 w-24"
+      class=" text-black font-serif text-lg border-b border-t-0 border-l-0 border-r-0 px-2 py-0 mt-1 w-24 {valueHasChanged(
+        parameter,
+        oldValueAtInstant,
+        valueAtInstant,
+      )
+        ? 'bg-le-gris-dispositif-light hover:text-le-gris-dispositif-dark'
+        : 'hover:text-le-gris-dispositif-dark'}"
       step="any"
       type="number"
       on:change={changeValue}