@juspay/svelte-ui-components 1.11.0 → 1.13.0

package/dist/Button/Button.svelte

@@ -33,7 +33,9 @@ function handleButtonClick() {
     {#if $$slots.icon}
       <div class="button-icon"><slot name="icon" /></div>
     {/if}
-    <div class="button-text">{properties.text}</div>
+    {#if properties.text !== null && properties.text.length > 0}
+      <div class="button-text">{properties.text}</div>
+    {/if}
   </button>
 </div>
 

package/dist/CheckListItem/CheckListItem.svelte

@@ -6,7 +6,7 @@ function handleCheckboxClick(e) {
   if (e.target instanceof HTMLInputElement && typeof e.target.checked === "boolean") {
     checked = e.target.checked;
   }
-  dispatch("click");
+  dispatch("click", checked);
 }
 </script>
 
@@ -15,7 +15,7 @@ function handleCheckboxClick(e) {
   {#if $$slots.checkboxLabel}
     <slot name="checkboxLabel" />
   {:else}
-    <span class="text">
+    <span class="text" class:checked={checked}>
       <!-- eslint-disable-next-line -->
       {@html text}
     </span>
@@ -35,6 +35,11 @@ function handleCheckboxClick(e) {
     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;

package/dist/GridItem/GridItem.svelte

@@ -0,0 +1,113 @@
+<script>import { createEventDispatcher } from "svelte";
+export let icon = "";
+export let text = "";
+export let headerIcon = "";
+export let showLoader = false;
+const dispatch = createEventDispatcher();
+function onClick() {
+  showLoader = !showLoader;
+  dispatch("onClick");
+}
+</script>
+
+<div class="container" on:click={onClick} on:keydown role="button" tabindex="0">
+  <div class="grid-header">
+    <img src={headerIcon} alt="" class="grid-item-header-icon" />
+  </div>
+  <div class:grid-body-loader={showLoader}>
+    <div class="grid-item-body">
+      <img src={icon} alt="" class="grid-item-icon" />
+    </div>
+  </div>
+  <div class="grid-item-footer">{text}</div>
+</div>
+
+<style>
+  .container {
+    box-sizing: border-box;
+    height: var(--grid-item-height, fit-content);
+    width: var(--grid-item-width, fit-content);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    /** Remove button tap effect */
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .grid-header {
+    display: flex;
+    width: var(--grid-header-width, 100%);
+    justify-content: var(--grid-header-justify-content, end);
+    position: var(--grid-header-position, absolute);
+    top: var(--grid-header-top, 5px);
+    z-index: var(--grid-header-z-index, 100);
+  }
+
+  .grid-item-header-icon {
+    height: var(--grid-item-header-icon-height, 16px);
+    width: var(--grid-item-header-icon-width, auto);
+    object-fit: var(--grid-item-header-icon-object-fit, contain);
+    z-index: var(--grid-item-header-icon-z-index, 2);
+  }
+
+  .grid-item-body {
+    height: var(--grid-item-height, 64px);
+    width: var(--grid-item-width, 64px);
+    background-color: var(--grid-item-background-color, #faf9f9);
+    border: var(--grid-item-border, 1px solid #eaeaea);
+    border-radius: var(--grid-item-border-radius, 4px);
+    margin: var(--grid-item-margin, 8px 0 0 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .grid-item-icon {
+    height: var(--grid-item-icon-height, 32px);
+    width: var(--grid-item-icon-width, auto);
+    object-fit: var(--grid-item-icon-object-fit, contain);
+    z-index: var(--grid-item-icon-z-index, 100);
+  }
+
+  .grid-item-footer {
+    margin: var(--grid-item-footer-margin, 8px 0 0 0);
+    font-size: var(--grid-item-font-size, 14px);
+    color: var(--grid-item-color, #333);
+  }
+
+  .grid-body-loader {
+    position: relative;
+  }
+
+  .grid-body-loader::before {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    margin: var(--grid-item-margin, 8px 0 0 0);
+    border-radius: var(--grid-item-border-radius, 4px);
+    border: var(--animation-version, 32px solid #cbcccf66);
+    animation: clipperAnimation var(--loader-animation-duration) infinite linear;
+  }
+
+  @keyframes clipperAnimation {
+    0% {
+      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+    }
+    25% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+    }
+    50% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+    }
+    75% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+    }
+    100% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+    }
+  }
+</style>

package/dist/GridItem/GridItem.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        icon?: string | undefined;
+        text?: string | undefined;
+        headerIcon?: string | undefined;
+        showLoader?: boolean | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        onClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridItemProps = typeof __propDef.props;
+export type GridItemEvents = typeof __propDef.events;
+export type GridItemSlots = typeof __propDef.slots;
+export default class GridItem extends SvelteComponent<GridItemProps, GridItemEvents, GridItemSlots> {
+}
+export {};

package/dist/ListItem/ListItem.svelte

@@ -101,7 +101,9 @@ function handleTopSectionClick() {
             </div>
           {/if}
           {#if showRightContentLoader}
-            <Loader />
+            <div class="right-content-loader">
+              <Loader />
+            </div>
           {/if}
           {#if properties.rightContentText && properties.rightContentText !== ''}
             <span class="right-content-text">{properties.rightContentText}</span>
@@ -221,6 +223,10 @@ function handleTopSectionClick() {
     display: var(--list-item-right-content-display, flex);
   }
 
+  .right-content-loader {
+    margin: var(--list-item-right-content-loader-margin);
+  }
+
   .bottom-section {
     flex-direction: row;
     margin-top: 0;

package/dist/Modal/Modal.svelte

@@ -2,10 +2,12 @@
 import ModalAnimation from "../Animations/ModalAnimation.svelte";
 import OverlayAnimation from "../Animations/OverlayAnimation.svelte";
 import { defaultModalProperties } from "./properties";
+import { createDebouncer } from "../utils";
 const dispatch = createEventDispatcher();
 let overlayDiv;
 let backPressed = false;
 export let properties = defaultModalProperties;
+const debounce = createDebouncer(properties.debounceTime);
 function handlePopstate() {
   backPressed = true;
   dispatch("close");
@@ -18,7 +20,9 @@ function handleLeftImageClick() {
 }
 function handleOverlayClick(event) {
   if (event.target && event.target === overlayDiv) {
-    dispatch("overlayClick");
+    debounce(() => {
+      dispatch("overlayClick");
+    });
   }
 }
 function handleKeyDown(event) {
@@ -130,9 +134,9 @@ onDestroy(() => {
   }
 
   .slot-content {
-    display: flex;
-    overflow-y: scroll;
-    scrollbar-width: none;
+    display: var(--modal-display, flex);
+    overflow-y: var(--modal-overflow-y, scroll);
+    scrollbar-width: var(--modal-scrollbar-width, none);
   }
 
   .slot-content::-webkit-scrollbar {

package/dist/Modal/properties.d.ts

@@ -13,5 +13,6 @@ export type ModalProperties = {
         rightImage: string | null;
         text: string | null;
     };
+    debounceTime: number;
 };
 export declare const defaultModalProperties: ModalProperties;

package/dist/Modal/properties.js

@@ -9,5 +9,6 @@ export const defaultModalProperties = {
         text: null
     },
     enableTransition: true,
-    transitionType: 'ALL'
+    transitionType: 'ALL',
+    debounceTime: 700,
 };

package/dist/Select/Select.svelte

@@ -333,7 +333,6 @@ onDestroy(() => {
     --button-width: var(--multipleSelect-btn-width, 100%);
   }
 
-
   .apply-btn-container {
     padding: var(--apply-btn-container-padding, 5px);
     border-top: var(--apply-btn-container-border-top, 1px solid #ddd);

package/dist/utils.d.ts

@@ -9,3 +9,9 @@ import type { CustomValidator, InputDataType, ValidationState } from './types';
  * @returns ValidationState : InProgress | Valid | Invalid
  */
 export declare function validateInput(inputValue: string, dataType: InputDataType, validPattern: RegExp | null, inProgressPattern: RegExp | null, customValidators: CustomValidator[]): ValidationState;
+/**
+ * @description Creates a debouncer function that delays invoking the provided callback until a specified delay period has elapsed since the last invocation.
+ * @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;

package/dist/utils.js

@@ -145,3 +145,18 @@ function validatePhoneNumber(phoneNumber) {
     }
     return phoneNumber.length === 10 ? 'Valid' : phoneNumber.length > 10 ? 'InProgress' : 'Invalid';
 }
+/**
+ * @description Creates a debouncer function that delays invoking the provided callback until a specified delay period has elapsed since the last invocation.
+ * @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 function createDebouncer(delay) {
+    let lastCallTime = 0;
+    return function (callback, ...args) {
+        const now = Date.now();
+        if (now - lastCallTime > delay) {
+            lastCallTime = now;
+            callback(...args);
+        }
+    };
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "vite dev --host",
     "build": "vite build && npm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",