@juspay/svelte-ui-components 1.33.0 → 1.34.1

package/dist/Banner/Banner.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         properties?: BannerProperties | null;
     };
     events: {
-        click: MouseEvent;
+        click: PointerEvent;
         keydown: KeyboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/BrandLoader/BrandLoader.svelte

@@ -33,26 +33,26 @@ export let properties = defaultBrandLoaderProperties;
     width: var(--loader-width, 100vw);
     border-radius: var(--loader-background-border-radius, 0px);
     display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+    justify-content: var(--loader-justify-content, center);
+    align-items: var(--loader-align-items, center);
+    flex-direction: var(--loader-flex-direction, column);
   }
 
   .loader img {
-    height: 40px;
-    width: 71px;
+    height: var(--loader-img-height, 40px);
+    width: var(--loader-img-width, 71px);
   }
 
   .text {
-    font-size: 22px;
-    padding: 16px 0px;
+    font-size: var(--loader-text-font-size, 22px);
+    padding: var(--loader-text-padding, 16px 0px);
     color: var(--loader-text-color, white);
     font-family: var(--loader-text-font, Euclid Circular A);
   }
 
   .sub-text {
-    font-size: 12px;
-    margin-bottom: 16px;
+    font-size: var(--loader-sub-text-font-size, 12px);
+    margin: var(--loader-sub-text-margin, 16px);
   }
 
   @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
@@ -63,26 +63,26 @@ export let properties = defaultBrandLoaderProperties;
 
     .loader {
       background-color: var(--loader-background-color, #ffffff33);
-      -webkit-backdrop-filter: blur(50px);
-      backdrop-filter: blur(50px);
+      -webkit-backdrop-filter: blur(var(--loader-webkit-backdrop-filter, 50px));
+      backdrop-filter: blur(var(--loader-backdrop-blur, 50px));
     }
   }
 
   .lds-ellipsis {
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
+    display: var(--loader-ellipsis-display, inline-block);
+    position: var(--loader-ellipsis-position, relative);
+    width: var(--loader-ellipsis-width, 80px);
+    height: var(--loader-ellipsis-height, 80px);
   }
   .lds-ellipsis div {
-    display: inherit;
-    position: absolute;
-    top: 5px;
-    width: 13px;
-    height: 13px;
-    border-radius: 50%;
+    display: var(--loader-ellipsis-div-display, inherit);
+    position: var(--loader-ellipsis-div-position, absolute);
+    top: var(--loader-ellipsis-div-top, 5px);
+    width: var(--loader-ellipsis-div-width, 13px);
+    height: var(--loader-ellipsis-div-height, 13px);
+    border-radius: var(--loader-ellipsis-div-border-radius, 50%);
     background: var(--loader-dot-color, #3a4550);
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    animation-timing-function: var(--loader-ellipsis-animation-timing, cubic-bezier(0, 1, 1, 0));
   }
   .lds-ellipsis div:nth-child(1) {
     left: 8px;

package/dist/CheckListItem/CheckListItem.svelte

@@ -15,7 +15,7 @@ function handleCheckboxClick(e) {
   {#if $$slots.checkboxLabel}
     <slot name="checkboxLabel" />
   {:else}
-    <span class="text" class:checked={checked}>
+    <span class="text" class:checked>
       <!-- eslint-disable-next-line -->
       {@html text}
     </span>

package/dist/Icon/Icon.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         properties?: IconProperties;
     };
     events: {
-        click: MouseEvent;
+        click: PointerEvent;
         keydown: KeyboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/IconStack/properties.d.ts

@@ -1,4 +1,4 @@
 export type IconStackProperties = {
-    type: "image" | "text";
+    type: 'image' | 'text';
     content: string;
 };

package/dist/Modal/Modal.svelte

@@ -98,7 +98,13 @@ onDestroy(() => {
                 </div>
               {/if}
               {#if properties.header.rightImage}
-                <div role="button" tabindex="0" on:click={handleRightImageClick} on:keydown data-pw={properties.header.buttonTestId}>
+                <div
+                  role="button"
+                  tabindex="0"
+                  on:click={handleRightImageClick}
+                  on:keydown
+                  data-pw={properties.header.buttonTestId}
+                >
                   <img class="header-right-img" src={properties.header.rightImage} alt="" />
                 </div>
               {/if}
@@ -172,6 +178,7 @@ onDestroy(() => {
     flex-direction: column;
     border-radius: var(--modal-border-radius, 0px);
     overflow: var(--modal-content-overflow, auto);
+    border-top: var(--modal-content-border-top);
   }
 
   .slot-content {
@@ -300,6 +307,9 @@ onDestroy(() => {
     align-items: center;
     flex: 1;
     font-size: var(--header-text-size, 16px);
+    font-weight: var(--modal-header-text-weight);
+    line-height: var(--modal-header-text-line-height);
+    letter-spacing: var(--modal-header-text-letter-spacing);
   }
 
   .header-left-img,

package/dist/Toast/Toast.svelte

@@ -89,7 +89,14 @@ onDestroy(() => {
     </div>
 
     {#if properties.rightIcon}
-      <div class="close-button" tabindex="0" role="button" on:click={hideToast} on:keypress data-pw={properties.closeIconTestId}>
+      <div
+        class="close-button"
+        tabindex="0"
+        role="button"
+        on:click={hideToast}
+        on:keypress
+        data-pw={properties.closeIconTestId}
+      >
         <img class="toast-icon" src={properties.rightIcon} alt="close-icon" />
       </div>
     {/if}

package/dist/Toggle/Toggle.svelte

@@ -13,7 +13,7 @@ function handleCheckboxClick(e) {
 <div class="container">
   <div class="text" hidden={text.length === 0}>{text}</div>
   <label class="switch">
-    <input class="input-checkbox" type="checkbox" bind:checked={checked} on:click={handleCheckboxClick} />
+    <input class="input-checkbox" type="checkbox" bind:checked on:click={handleCheckboxClick} />
     <span class="slider round" />
   </label>
 </div>

package/dist/utils.d.ts

@@ -14,4 +14,4 @@ export declare function validateInput(inputValue: string, dataType: InputDataTyp
  * @param delay The delay period in milliseconds before invoking the callback.
  * @returns A debouncer function that accepts a callback and delays its invocation based on the specified delay.
  */
-export declare function createDebouncer(delay: number): (callback: Function, ...args: any[]) => void;
+export declare function createDebouncer(delay: number): <T extends unknown[]>(callback: (...args: T) => void, ...args: T) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.33.0",
+  "version": "1.34.1",
   "scripts": {
     "dev": "vite dev --host",
     "build": "vite build && npm run package",
@@ -36,8 +36,9 @@
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@playwright/test": "^1.39.0",
     "@sveltejs/adapter-auto": "^2.1.1",
-    "@sveltejs/kit": "^2.20.6",
+    "@sveltejs/kit": "^1.30.4",
     "@sveltejs/package": "^2.2.2",
+    "@sveltejs/vite-plugin-svelte": "^2.5.0",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
     "commitizen": "^4.3.0",
@@ -54,7 +55,7 @@
     "svelte-check": "^3.6.0",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.5.13",
+    "vite": "^4.5.14",
     "vitest": "^0.34.6",
     "type-decoder": "^1.2.0"
   },