@juspay/svelte-ui-components 1.2.0 → 1.3.0

package/dist/Img/Img.svelte

@@ -0,0 +1,33 @@
+<script>export let src;
+export let alt;
+export let fallback = null;
+function handleFallback() {
+  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>

package/dist/Img/Img.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        src: string;
+        alt: string;
+        fallback?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImgProps = typeof __propDef.props;
+export type ImgEvents = typeof __propDef.events;
+export type ImgSlots = typeof __propDef.slots;
+export default class Img extends SvelteComponent<ImgProps, ImgEvents, ImgSlots> {
+}
+export {};

package/dist/Input/Input.svelte

@@ -175,6 +175,7 @@ $: {
     resize: none;
     visibility: var(--input-visibility, visible);
     text-align: var(--input-text-align, left);
+    color: var(--input-text-color);
   }
 
   textarea:focus,

package/dist/ListItem/ListItem.svelte

@@ -1,5 +1,6 @@
 <script>import Accordion from "../Accordion/Accordion.svelte";
 import Loader from "../Loader/Loader.svelte";
+import Img from "../Img/Img.svelte";
 import { defaultListItemProperties } from "./properties";
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
@@ -55,7 +56,11 @@ function handleTopSectionClick() {
               role="button"
               tabindex="0"
             >
-              <img class="left-img" src={properties.leftImageUrl} alt="" />
+              <Img
+                src={properties.leftImageUrl}
+                alt=""
+                fallback={properties.leftImageFallbackUrl}
+              />
             </div>
           {/if}
           {#if $$slots.leftContent}
@@ -171,12 +176,39 @@ function handleTopSectionClick() {
 
   .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 {
     display: flex;
     flex-direction: column;
+    justify-content: var(--list-item-center-text-justify-content, flex-start);
     padding: var(--list-item-center-text-padding, 0px 20px);
+    color: var(--list-item-center-text-color, #2f3841);
+    font-size: var(--list-item-center-text-font-size, 12px);
+    font-weight: var(--list-item-center-text-font-weight, 300);
+    align-items: var(--list-item-center-text-vertical-align);
+    margin: var(--list-item-center-text-margin);
+    border: var(--list-item-center-text-border);
+    cursor: var(--list-item-center-text-cursor, pointer);
+    font-family: var(--list-item-center-text-font-family);
   }
 
   .center-content {
@@ -194,23 +226,6 @@ function handleTopSectionClick() {
     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);
@@ -224,7 +239,10 @@ function handleTopSectionClick() {
   }
 
   .right-img:hover {
-    background: var(--list-item-right-image-hover-background, var(--list-item-right-image-background));
+    background: var(
+      --list-item-right-image-hover-background,
+      var(--list-item-right-image-background)
+    );
     border: var(--list-item-right-image-hover-border, var(--list-item-right-image-border));
   }
 

package/dist/ListItem/properties.d.ts

@@ -1,5 +1,6 @@
 export type ListItemProperties = {
     leftImageUrl: string | null;
+    leftImageFallbackUrl: string | null;
     rightImageUrl: string | null;
     label: string | null;
     useAccordion: boolean;

package/dist/ListItem/properties.js

@@ -1,5 +1,6 @@
 export const defaultListItemProperties = {
     leftImageUrl: null,
+    leftImageFallbackUrl: null,
     rightImageUrl: null,
     label: null,
     useAccordion: false,

package/dist/Modal/Modal.svelte

@@ -175,14 +175,15 @@ onDestroy(() => {
   .header {
     display: flex;
     background-color: var(--modal-header-background-color, #f6f7f9);
-    padding: 18px 20px;
+    padding: var(--modal-header-padding, 18px 20px);
+    border-radius: var(--modal-header-border-radius, 0px);
   }
 
   .header-text {
     display: flex;
     align-items: center;
     flex: 1;
-    font-size: 16px;
+    font-size: var(--header-text-size, 16px);
   }
 
   .header-left-img,
@@ -192,7 +193,7 @@ onDestroy(() => {
   }
 
   .header-left-img {
-    margin-right: 18px;
+    margin: var(--header-left-image-margin, 0px 18px 0px 0px);
     width: var(--header-left-image-width, 25px);
     height: var(--header-left-image-height, 25px);
   }

package/dist/Toolbar/Toolbar.svelte

@@ -74,10 +74,15 @@ function handleBackClick() {
   }
 
   .back {
-    height: 20px;
-    width: 20px;
-    padding: 20px 14px;
-    cursor: pointer;
+    height: var(--toolbar-back-button-height, 20px);
+    width: var(--toolbar-back-button-width, 20px);
+    padding: var(--toolbar-back-button-padding, 20px 14px);
+    cursor: var(--toolbar-back-button-cursor, pointer);
+  }
+
+  .back img {
+    height: var(--toolbar-back-image-height, 16px);
+    width: var(--toolbar-back-image-width, 16px);
   }
 
   .center-content {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",