Ajoute modale d'explication du droit attendu 2024

src/lib/components/variables/InflationLawInfoModal.svelte

+<script lang="ts">
+  import type { ScaleParameter, ValueParameter } from "@openfisca/json-model"
+  import {
+    Dialog,
+    DialogDescription,
+    DialogOverlay,
+    DialogTitle,
+    Transition,
+    TransitionChild,
+  } from "@rgossiaux/svelte-headlessui"
+
+  export let isOpen = false
+  export let parameter: ValueParameter | ScaleParameter
+  function closeModal() {
+    isOpen = false
+  }
+</script>
+
+<Transition appear show={isOpen}>
+  <Dialog
+    as="div"
+    class="fixed inset-0 z-40 overflow-y-auto"
+    on:close={closeModal}
+  >
+    <div class="min-h-screen px-4 text-center">
+      <TransitionChild
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <DialogOverlay
+          class="fixed inset-0 bg-gray-500 opacity-50 transition-opacity"
+        />
+      </TransitionChild>
+
+      <!-- This element is to trick the browser into centering the modal contents. -->
+      <span class="inline-block h-[13vh]" aria-hidden="true"> &#8203; </span>
+
+      <TransitionChild
+        enter="ease-out duration-300"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <div
+          class="my-8 inline-block w-full max-w-4xl transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all"
+        >
+          <div
+            class="flex items-center justify-between text-le-gris-dispositif-dark"
+          >
+            <DialogTitle as="h3" class="mb-5 text-2xl font-bold tracking-wider">
+              Droit attendu 2024 pour le barème de l'impôt sur le revenu
+            </DialogTitle>
+
+            <button
+              class="text-gray-400 hover:text-black"
+              on:click={closeModal}
+              type="button"
+            >
+              <iconify-icon
+                class="ml-1 align-[-0.2rem] text-4xl"
+                icon="ri-close-line"
+              /></button
+            >
+          </div>
+          <DialogDescription as="div" class="mt-2">
+            <div class="flex gap-4">
+              <p class="mb-4 flex-1 font-serif text-lg">
+                Le droit attendu en 2024 proposé dans le simulateur concernant
+                le barème de l'impôt sur le revenu est une <strong
+                  >revalorisation des seuils de 2023 de X% d'inflation</strong
+                >.
+                <br />
+                <br />
+                Cette indexation sur le taux d’inflation des prix hors tabac a eu
+                lieu chaque année depuis 1969, sauf en 2012 et en 2013. Ceci afin
+                de neutraliser les effets de l’inflation sur le niveau d’imposition
+                à l’IR des ménages.<br /> Par usage, le taux d'inflation appliqué
+                est l'estimation Insee du taux d'inflation des prix hors tabac à
+                l'été N du PLF N+1. Le simulateur applique donc un taux d'inflation
+                de X%, estimation retenue au XXX 2023.
+              </p>
+              <div class="min-h-0 flex-1">
+                <div
+                  class="rounded-md bg-le-gris-dispositif-ultralight p-4 text-le-gris-dispositif-dark"
+                >
+                  <p class="mb-2 text-lg font-bold">
+                    Qu'est-ce que le droit attendu pour 2024&nbsp;?
+                  </p>
+                  <p class="text-base leading-6">
+                    En période budgétaire, avec l'arrivée des projets de loi de
+                    finances (PLF) et de financement de la sécurité sociale
+                    (PLFSS) visant l'année à venir, le simulateur LexImpact
+                    s'adapte et propose lui aussi de se projeter en 2024.<br
+                    /><br /> C'est pourquoi, le simulateur vous indique à la fois
+                    le droit en vigueur 2023 et le droit attendu en 2024, c'est ce
+                    dernier droit qui devient la base de comparaison. L'estimation
+                    des impacts se fait uniquement sur cette base 2024, pour comparer
+                    des montants de la même année.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <p class="mb-2 border-t pt-2 text-base font-bold">Sources :</p>
+            <ul class="text-base leading-6">
+              <li>
+                <a
+                  href="todo"
+                  class="cursor-pointer underline hover:text-le-bleu"
+                  >Source 1</a
+                >
+              </li>
+            </ul>
+          </DialogDescription>
+        </div>
+      </TransitionChild>
+    </div>
+  </Dialog>
+</Transition>

src/lib/components/variables/VariableReferredScaleParameter.svelte

@@ -29,6 +29,7 @@
     budgetEditableParametersNameByVariableName,
     budgetVariablesName,
   } from "$lib/variables"
+  import InflationLawInfoModal from "./InflationLawInfoModal.svelte"
 
   export let billParameter: ScaleParameter
   export let budget: boolean | undefined
@@ -38,6 +39,8 @@
   export let lawParameter: ScaleParameter | undefined
   export let name: string | undefined = undefined
 
+  let isInflationLawInfoModalOpen = false
+
   const dateFormatter = new Intl.DateTimeFormat("fr-FR", { dateStyle: "full" })
     .format
   let openReferenceUrl: string | undefined | null = null
@@ -158,7 +161,7 @@
 
   <div class="mt-1 flex flex-col rounded-t bg-gray-100 pl-1 pt-2">
     <!--Légende-->
-    <div class="ml-8 flex pt-2 font-serif text-xs">
+    <div class="ml-8 flex pt-2 text-xs">
       <p class="w-20 text-center">
         Droit 2023<br /><span class="font-bold underline decoration-dotted"
           >Droit attendu 2024</span
@@ -190,7 +193,32 @@
     />
   </div>
 
-  <div class="flex justify-end bg-gray-100 pb-2 pr-4">
+  <div class="flex justify-between bg-gray-100 pb-2 pl-2 pr-4">
+    <div
+      class="rounded-md bg-white text-sm text-le-gris-dispositif-dark shadow-md hover:text-le-bleu"
+    >
+      <button
+        class="w-full px-2 py-1 pr-4"
+        on:click={() => (isInflationLawInfoModalOpen = true)}
+      >
+        <div class="flex items-center">
+          <iconify-icon
+            class="mr-2 align-[-0.2rem] text-2xl"
+            icon="ri-question-line"
+          />
+
+          <div>
+            <p class="text-left font-bold tracking-wider">
+              Droit attendu pour 2024 <span class="font-normal"
+                ><br />Indexation du barème de l'IR sur l'inflation à X%
+              </span>
+            </p>
+          </div>
+        </div>
+      </button>
+
+      <InflationLawInfoModal bind:isOpen={isInflationLawInfoModalOpen} />
+    </div>
     <a
       class="link2 ml-2 flex items-center text-sm tracking-wide text-gray-600"
       href="/parameters/{billParameter.name}"