BZ-11848: feat: added support for fallback image in list item left icon

- create Img component with support for handling fallback images
- integrated Img component in ListItemComponent for leftIcon
- added support for leftIconfallback to list item

src/lib/Img/Img.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  export let src: string;
+  export let alt: string;
+  export let fallback: string | null = null;
+
+  function handleFallback(): void {
+    if (fallback !== null) {
+      src = fallback;
+    }
+  }
+</script>
+
+{#if typeof src === 'string' && typeof alt === 'string'}
+  <img {src} {alt} on:error|once={handleFallback} />
+{/if}
+
+<style>
+  img {
+    object-fit: var(--image-object-fit);
+    height: var(--image-height, 24px);
+    width: var(--image-width, 24px);
+    padding: var(--image-padding, 0px);
+    border-radius: var(--image-border-radius, 0px);
+    margin: var(--image-margin, 0px);
+    filter: var(--image-filter, none);
+    background: var(--image-background);
+    border: var(--image-border);
+    transition: var(--image-transition);
+  }
+
+  img:hover {
+    background: var(--image-hover-background, var(--image-background));
+    border: var(--image-hover-border, var(--image-border));
+  }
+</style>

src/lib/ListItem/ListItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Accordion from '$lib/Accordion/Accordion.svelte';
   import Loader from '$lib/Loader/Loader.svelte';
+  import Img from '$lib/Img/Img.svelte';
   import { defaultListItemProperties, type ListItemProperties } from './properties';
   import { createEventDispatcher } from 'svelte';
 
@@ -63,7 +64,7 @@
               role="button"
               tabindex="0"
             >
-              <img class="left-img" src={properties.leftImageUrl} alt="" />
+              <Img src={properties.leftImageUrl} alt="" fallback={properties.leftImageFallback} />
             </div>
           {/if}
           {#if $$slots.leftContent}
@@ -179,6 +180,24 @@
 
   .left-content {
     display: flex;
+    --image-height: var(--list-item-left-image-height, 24px);
+    --image-width: var(--list-item-left-image-width, 24px);
+    --image-padding: var(--list-item-left-image-padding, 0px);
+    --image-border-radius: var(--list-item-left-image-border-radius, 0px);
+    --image-margin: var(--list-item-left-image-margin, 0px);
+    --image-filter: var(--list-item-left-image-filter, none);
+    --image-background: var(--list-item-left-image-background);
+    --image-border: var(--list-item-left-image-border);
+    --image-transition: var(--list-item-transition);
+    --image-object-fit: var(--list-item-left-image-object-fit);
+    --image-hover-background: var(
+      --list-item-left-image-hover-background,
+      var(--list-item-left-image-background)
+    );
+    --image-hover-border: var(
+      --list-item-left-image-hover-border,
+      var(--list-item-left-image-border)
+    );
   }
 
   .center-text {
@@ -211,26 +230,6 @@
     margin-top: 0;
   }
 
-  .left-img {
-    height: var(--list-item-left-image-height, 24px);
-    width: var(--list-item-left-image-width, 24px);
-    padding: var(--list-item-left-image-padding, 0px);
-    border-radius: var(--list-item-left-image-border-radius, 0px);
-    margin: var(--list-item-left-image-margin, 0px);
-    filter: var(--list-item-left-image-filter, none);
-    background: var(--list-item-left-image-background);
-    border: var(--list-item-left-image-border);
-    transition: var(--list-item-transition);
-  }
-
-  .left-img:hover {
-    background: var(
-      --list-item-left-image-hover-background,
-      var(--list-item-left-image-background)
-    );
-    border: var(--list-item-left-image-hover-border, var(--list-item-left-image-border));
-  }
-
   .right-img {
     height: var(--list-item-right-image-height, 18px);
     width: var(--list-item-right-image-width, 18px);

src/lib/ListItem/properties.ts

@@ -1,5 +1,6 @@
 export type ListItemProperties = {
   leftImageUrl: string | null;
+  leftImageFallback: string | null;
   rightImageUrl: string | null;
   label: string | null;
   useAccordion: boolean;
@@ -8,6 +9,7 @@ export type ListItemProperties = {
 
 export const defaultListItemProperties: ListItemProperties = {
   leftImageUrl: null,
+  leftImageFallback: null,
   rightImageUrl: null,
   label: null,
   useAccordion: false,

src/lib/Toolbar/Toolbar.svelte

@@ -85,7 +85,7 @@
     cursor: var(--toolbar-back-button-cursor, pointer);
   }
 
-  .back img{
+  .back img {
     height: var(--toolbar-back-image-height, 16px);
     width: var(--toolbar-back-image-width, 16px);
   }