Ajoute un bouton de suppression de carte dont l'effet reste à faire

src/lib/components/common/accordion/AccordionItem.svelte

@@ -98,9 +98,9 @@
             <!-- en cas de manque d'espace horizontal, renvoie à la ligne au subTitle -->
             <span class="whitespace-nowrap">{title}</span>
             {#if subTitle}
-              <span class="whitespace-nowrap text-sm font-light"
-                >&nbsp;| {subTitle}</span
-              >
+              <span class="whitespace-nowrap text-sm font-light">
+                &nbsp;| {subTitle}
+              </span>
             {/if}
           </span>
         {:else}

src/lib/components/impact/Card.svelte

@@ -14,6 +14,7 @@
     iconAltDescription = "",
     accordion = false,
     showDeleteButton = false,
+    onDeleteButtonClick,
     headerBackgroundColor = "bg-white",
     children,
   }: {
@@ -24,13 +25,31 @@
     iconAltDescription?: string
     accordion?: boolean
     showDeleteButton?: boolean
+    onDeleteButtonClick?: () => void
     headerBackgroundColor?: string
     children(): any
   } = $props()
+
   //contentComponent: typeof Table | typeof Summary | undefined
   $inspect(title, subTitle)
 </script>
 
+{#snippet deleteButton()}
+  <button
+    class="text-gray-400 hover:text-le-bleu focus:outline-none"
+    aria-label="Supprimer la carte"
+    onclick={() =>
+      onDeleteButtonClick
+        ? onDeleteButtonClick()
+        : console.error(
+            "Erreur inattendue. Aucune fonction n'est rattachée au bouton de suppression de la carte.",
+          )}
+  >
+    <iconify-icon icon="ri-close-line" class="max-h-40 align-[-0.2rem] text-xl"
+    ></iconify-icon>
+  </button>
+{/snippet}
+
 <div
   class="max-w-6xl self-start overflow-auto rounded-lg shadow-md {headerBackgroundColor}"
 >
@@ -49,6 +68,9 @@
         </div>
       </AccordionItem>
     </Accordion>
+    {#if showDeleteButton}
+      {@render deleteButton()}
+    {/if}
   {:else}
     <div>
       <span class="flex items-center">
@@ -65,12 +87,18 @@
             <iconify-icon
               class="max-h-30 -mr-4 ml-6 align-[-0.2rem] text-xl"
               {icon}
-            >
-            </iconify-icon>
+            ></iconify-icon>
           {/if}
         {/if}
-        <div class="m-6 flex flex-col items-start">
-          <span class="text-xl font-bold text-gray-600">{title}</span>
+        <div class="m-6 flex w-full flex-col items-start">
+          <span
+            class="flex w-full justify-between text-xl font-bold text-gray-600"
+          >
+            {title}
+            {#if showDeleteButton}
+              {@render deleteButton()}
+            {/if}
+          </span>
           {#if subTitle}
             <span class="text-sm text-gray-600">{subTitle}</span>
           {/if}

src/lib/components/impact/CardsBoard.svelte

@@ -130,6 +130,10 @@
   function keepOneDecimal(value: number) {
     return Math.round(value * 10) / 10
   }
+
+  function onDeleteButtonClick() {
+    alert("fermer")
+  }
 </script>
 
 <div class="flex w-full justify-center">
@@ -140,6 +144,7 @@
     icon="./picto-impact-strates.png"
     iconType="path"
     iconAltDescription="Icône des impacts par strate"
+    showDeleteButton={false}
     accordion={true}
   >
     <Table
@@ -166,6 +171,8 @@
     icon="./picto-communes-eligibles.png"
     iconType="path"
     iconAltDescription="Icône du nombre total de communes éligibles"
+    showDeleteButton={false}
+    accordion={false}
   >
     <!-- TODO resumesParDotation automatiquement adapté à l'année -->
     <Summary totalParDotation={getBaseTotal()} />
@@ -183,6 +190,8 @@
     icon="ri-search-line"
     iconType="name"
     iconAltDescription={undefined}
+    showDeleteButton={false}
+    accordion={false}
   >
     <div class="mb-8 mt-1 flex flex-col">
       <Search
@@ -217,6 +226,9 @@
         : ""}
       icon={undefined}
       iconAltDescription={undefined}
+      showDeleteButton={true}
+      {onDeleteButtonClick}
+      accordion={false}
       headerBackgroundColor="bg-le-gris-commune"
     >
       <!-- TODO Transformer le code département en nom de département -->