@juspay/svelte-ui-components 1.10.0 → 1.12.0

package/dist/Button/Button.svelte

@@ -27,13 +27,15 @@ function handleButtonClick() {
     disabled={!(properties.enable && !properties.showLoader)}
     type={properties.type}
   >
-      {#if properties.showLoader && properties.loaderType === 'Circular'}
-        <div class="button-loader"><Loader /></div>
-      {/if}
-      {#if $$slots.icon}
+    {#if properties.showLoader && properties.loaderType === 'Circular'}
+      <div class="button-loader"><Loader /></div>
+    {/if}
+    {#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>
 
@@ -61,7 +63,7 @@ function handleButtonClick() {
     display: flex;
     justify-content: var(--button-justify-content, center);
     align-items: center;
-    flex-direction: var(--button-content-flex-direction, row);;
+    flex-direction: var(--button-content-flex-direction, row);
     gap: var(--button-content-gap, 16px);
     visibility: var(--button-visibility, visible);
   }

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/Input/Input.svelte

@@ -133,6 +133,7 @@ $: {
       on:focusout={onFocusOut}
       on:input={onInput}
       on:paste={onPaste}
+      data-pw={properties.dataPw}
       class="
       {properties.actionInput ? 'action-input' : ''}
     "

package/dist/Input/properties.d.ts

@@ -21,5 +21,6 @@ export type InputProperties = {
     autoComplete: AutoCompleteType;
     name: string;
     textTransformers: TextTransformer[];
+    dataPw?: string;
 };
 export declare const defaultInputProperties: InputProperties;

package/dist/InputButton/InputButton.svelte

@@ -178,7 +178,7 @@ function onFocusOut(event) {
     --button-content-gap: var(--left-button-content-gap);
     --button-content-flex-direction: var(--left-button-content-flex-direction, row);
   }
-  
+
   .right-button {
     flex: var(--right-button-flex, 1);
     display: flex;

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

@@ -111,7 +111,7 @@ onDestroy(() => {
 });
 </script>
 
-{#if properties.label !== null}
+{#if properties.label !== null && properties.label !== ''}
   <label class="label-container" for={properties.label}>
     {properties.label}
   </label>
@@ -136,7 +136,7 @@ onDestroy(() => {
         {#if properties.selectMultipleItems && Array.isArray(properties.selectedItemLabel) && Array.isArray(properties.selectedItem)}
           {#if properties.selectedItem.length === 0}
             {properties.placeholder}
-          {:else if properties.selectedItemLabel?.length === 0 || properties.showSelectedItemInDropdown && properties.showSelectedItem !== false}
+          {:else if properties.selectedItemLabel?.length === 0 || (properties.showSelectedItemInDropdown && properties.showSelectedItem !== false)}
             {properties.selectedItem.join(', ')}
           {:else if properties.showSelectedItem !== false}
             {properties.selectedItemLabel.join(', ')}
@@ -145,7 +145,7 @@ onDestroy(() => {
           {/if}
         {:else if properties.selectedItem === ''}
           {properties.placeholder}
-        {:else if properties.selectedItemLabel === null || properties.selectedItemLabel === '' && properties.showSelectedItem !== false}
+        {:else if properties.selectedItemLabel === null || (properties.selectedItemLabel === '' && properties.showSelectedItem !== false)}
           {properties.selectedItem}
         {:else if properties.showSelectedItem !== false}
           {properties.selectedItemLabel}
@@ -231,8 +231,6 @@ onDestroy(() => {
     height: var(--dropdown-arrow-icon-height, 16px);
     width: var(--dropdown-arrow-icon-width, 16px);
     transition: transform 0.1s;
-    position: absolute;
-    right: 10px;
   }
 
   .active {
@@ -265,7 +263,8 @@ onDestroy(() => {
     white-space: var(--selected-item-white-space, nowrap);
     overflow: var(--selected-item-overflow, hidden);
     text-overflow: var(--selected-item-text-overflow, ellipsis);
-    max-width: var(--selected-item-max-widhh, 100%);
+    max-width: var(--selected-item-max-width, 100%);
+    padding: var(--selected-item-padding, var(--item-padding, 8px 16px));
   }
 
   .selected-content {
@@ -334,21 +333,6 @@ onDestroy(() => {
     --button-width: var(--multipleSelect-btn-width, 100%);
   }
 
-  .icon-container {
-    width: var(--select-icon-container-width, fit-content);
-    height: var(--select-icon-container-height, fit-content);
-    border-radius: var(--select-icon-container-border-radius);
-    opacity: var(--select-icon-container-opacity);
-    background: var(--select-icon-container-background);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: var(--select-icon-container-margin, 0px 8px 0px 0px);
-    padding: var(--select-icon-container-padding);
-    --image-height: var(--select-icon-height);
-    --image-width: var(--select-icon-height);
-  }
-
   .apply-btn-container {
     padding: var(--apply-btn-container-padding, 5px);
     border-top: var(--apply-btn-container-border-top, 1px solid #ddd);

package/dist/Toast/Toast.svelte

@@ -79,6 +79,13 @@ onDestroy(() => {
 
     <div class="toast-message">
       {properties.message}
+      {#if properties.subtext}
+        <div class="toast-subtext">{properties.subtext}</div>
+      {/if}
+
+      {#if $$slots.bottomContent}
+        <slot name="bottomContent" />
+      {/if}
     </div>
 
     {#if properties.rightIcon}
@@ -93,14 +100,18 @@ onDestroy(() => {
   .toast {
     padding: var(--toast-padding, 10px);
     font-size: var(--toast-font-size, 14px);
+    font-family: var(--toast-font-family);
+    font-weight: var(--toast-font-weight);
     height: var(--toast-height, auto);
     border-radius: var(--toast-border-radius, 0px);
+    border: var(--toast-border, none);
+    border-style: var(--toast-border-style);
     width: var(--toast-width, auto);
     align-items: var(--toast-align-items, center);
     margin: var(--toast-margin, 0px 10px 10px 10px);
     justify-content: var(--toast-justify-content, space-between);
     z-index: var(--toast-z-index, 1000);
-    display: var(--taost-dispay, flex);
+    display: var(--toast-display, flex);
     position: var(--toast-position, absolute);
     top: var(--toast-top, 10px);
     left: var(--toast-left, 0);
@@ -115,7 +126,7 @@ onDestroy(() => {
   .toast-icon-wrapper {
     width: var(--toast-icon-wrapper-width, 20px);
     height: var(--toast-icon-wrapper-height, 20px);
-    margin: var(--toast-icon-margin, 0 6px 0 0);
+    margin: var(--toast-icon-margin, 0px 6px 0px 0px);
     padding: var(--toast-icon-wrapper-padding, 1px);
   }
 
@@ -126,8 +137,16 @@ onDestroy(() => {
 
   .toast-message {
     display: var(--toast-message-display, flex);
-    flex: var(--taost-message-flex, 1);
+    flex: var(--toast-message-flex, 1);
     padding: var(--toast-message-padding, 1px);
+    flex-direction: column;
+  }
+
+  .toast-subtext {
+    color: var(--toast-subtext-color, #c7c7c7);
+    font-size: var(--toast-subtext-font-size, 10px);
+    font-weight: var(--toast-subtext-font-weight, 400);
+    margin: var(--toast-subtext-margin, 10px 0px 0px 0px);
   }
 
   .close-button {
@@ -135,7 +154,7 @@ onDestroy(() => {
     height: var(--toast-close-button-height, 20px);
     cursor: var(--toast-close-button-cursor, pointer);
     gap: var(--toast-close-button-gap, 6px);
-    margin: var(--toast-close-button-margin, 0 0 0 10px);
+    margin: var(--toast-close-button-margin, 0px 0px 0px 10px);
     display: var(--toast-close-button-display, flex);
     align-items: var(--toast-close-button-align-items, center);
     justify-content: var(--toast-close-button-justify-content, center);
@@ -145,20 +164,24 @@ onDestroy(() => {
   .success {
     color: var(--toast-success-text, #fff);
     background-color: var(--toast-background-color, #24aa5a);
+    --toast-border: var(--toast-success-border);
   }
 
   .info {
     color: var(--toast-info-text, #fff);
     background-color: var(--toast-background-color, #87ceeb);
+    --toast-border: var(--toast-info-border);
   }
 
   .warn {
     color: var(--toast-warn-text, #fff);
     background-color: var(--toast-background-color, #f3a42d);
+    --toast-border: var(--toast-warn-border);
   }
 
   .error {
     color: var(--toast-error-text, #fff);
     background-color: var(--toast-background-color, #f04438);
+    --toast-border: var(--toast-error-border);
   }
 </style>

package/dist/Toast/Toast.svelte.d.ts

@@ -10,7 +10,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        bottomContent: {};
+    };
 };
 export type ToastProps = typeof __propDef.props;
 export type ToastEvents = typeof __propDef.events;

package/dist/Toast/properties.d.ts

@@ -4,6 +4,7 @@ export type ToastProperties = {
     duration: number;
     leftIcon?: string;
     message: string;
+    subtext?: string;
     rightIcon?: string;
     type?: ToastType;
     direction?: ToastDirection;

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,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",