@juspay/svelte-ui-components 1.1.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}
@@ -152,6 +157,15 @@ function handleTopSectionClick() {
     box-shadow: var(--list-item-box-shadow, none);
     width: var(--list-item-box-width);
     border-radius: var(--list-item-border-radius, 0px);
+    margin: var(--list-item-margin);
+    padding: var(--list-item-padding);
+    border: var(--list-item-border);
+    transition: var(--list-item-transition);
+  }
+
+  .item:hover {
+    background-color: var(--list-item-hover-background-color, var(--list-item-background-color));
+    border: var(--list-item-hover-border, var(--list-item-border));
   }
 
   .top-section {
@@ -162,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 {
@@ -185,21 +226,24 @@ 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);
-  }
-
   .right-img {
     height: var(--list-item-right-image-height, 18px);
     width: var(--list-item-right-image-width, 18px);
     padding: var(--list-item-right-image-padding, 0px);
     border-radius: var(--list-item-right-image-border-radius, 0px);
     margin: var(--list-item-right-image-margin, 0px);
+    filter: var(--list-item-right-image-filter);
+    background: var(--list-item-right-image-background);
+    border: var(--list-item-right-image-border);
+    transition: var(--list-item-transition);
+  }
+
+  .right-img:hover {
+    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));
   }
 
   .right-content-text {

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/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as Banner } from './Banner/Banner.svelte';
 export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
+export { default as Table } from './Table/Table.svelte';
 export type { ButtonProperties } from './Button/properties';
 export type { ModalProperties, ModalAlign, ModalSize } from './Modal/properties';
 export type { InputProperties } from './Input/properties';
@@ -34,6 +35,7 @@ export type { ToolbarProperties } from './Toolbar/properties';
 export type { CarouselProperties } from './Carousel/properties';
 export type { BadgeProperties } from './Badge/properties';
 export type { BannerProperties } from './Banner/properties';
+export type { TableProperties } from './Table/properties';
 export { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';

package/dist/index.js

@@ -17,6 +17,7 @@ export { default as Banner } from './Banner/Banner.svelte';
 export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
 export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
+export { default as Table } from './Table/Table.svelte';
 export { defaultIconProperties } from './Icon/properties';
 export { defaultButtonProperties } from './Button/properties';
 export { defaultModalProperties } from './Modal/properties';

package/package.json

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