From 01ee955f95c04dda1a60d8f912d76de154301ae4 Mon Sep 17 00:00:00 2001
From: "anjali.deswal" <anjali.deswal@juspay.in>
Date: Fri, 26 Jul 2024 11:24:42 +0530
Subject: [PATCH] BZ-29493-checklistitem

- added css to change the color and font weight of selected check list item
- updated click dispatch event to dispatch the checkbox text and select status
---
 src/lib/CheckListItem/CheckListItem.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/CheckListItem/CheckListItem.svelte b/src/lib/CheckListItem/CheckListItem.svelte
index 087d9f4..5301f7b 100644
--- a/src/lib/CheckListItem/CheckListItem.svelte
+++ b/src/lib/CheckListItem/CheckListItem.svelte
@@ -10,7 +10,7 @@
     if (e.target instanceof HTMLInputElement && typeof e.target.checked === 'boolean') {
       checked = e.target.checked;
     }
-    dispatch('click');
+    dispatch('click', { text, checked });
   }
 </script>
 
@@ -19,7 +19,7 @@
   {#if $$slots.checkboxLabel}
     <slot name="checkboxLabel" />
   {:else}
-    <span class="text">
+    <span class="text {checked ? 'checked' : ''}">
       <!-- eslint-disable-next-line -->
       {@html text}
     </span>
@@ -39,6 +39,11 @@
     color: var(--check-list-item-text-color);
   }
 
+  .text.checked {
+    color: var(--check-list-item-checked-text-color);
+    font-weight: var(--check-list-item-checked-font-weight);
+  }
+
   input.checkbox {
     accent-color: var(--checkbox-accent-color, #000);
     border: 5px solid red;