@juspay/svelte-ui-components 1.34.0 → 1.34.2

package/dist/Stepper/Stepper.svelte.d.ts

@@ -1,21 +1,4 @@
-import { SvelteComponent } from "svelte";
 import type { StepperProperties } from './properties';
-declare const __propDef: {
-    props: {
-        properties: StepperProperties;
-    };
-    events: {
-        handleStepClick: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type StepperProps = typeof __propDef.props;
-export type StepperEvents = typeof __propDef.events;
-export type StepperSlots = typeof __propDef.slots;
-export default class Stepper extends SvelteComponent<StepperProps, StepperEvents, StepperSlots> {
-}
-export {};
+declare const Stepper: import("svelte").Component<StepperProperties, {}, "">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;

package/dist/Stepper/properties.d.ts

@@ -1,8 +1,20 @@
 export type StepperProperties = {
     steps: Array<Step>;
     currentStepIndex: number;
+    onhandleStepClick?: (event: {
+        selectedIndex: number;
+    }) => void;
 };
 export type Step = {
     label: string;
     icon?: string;
 };
+export type StepProperties = {
+    stepIndex: number;
+    label: string;
+    icon?: string;
+    onclick?: (event: {
+        selectedIndex: number;
+    }) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+};

package/dist/Table/Table.svelte

@@ -1,69 +1,95 @@
-<script>import { onMount } from "svelte";
-export let properties = {
-  tableTitle: "",
-  tableHeaders: [],
-  tableData: [],
-  isTableScrollable: false,
-  isContentScrollable: false
-};
-let sortOrders = {};
-let sortedTableData = [...properties.tableData];
-function sortTableData(column) {
-  if (!sortOrders[column]) {
-    sortOrders[column] = "asc";
-  } else {
-    sortOrders[column] = sortOrders[column] === "asc" ? "desc" : "asc";
-  }
-  sortedTableData = [...properties.tableData].sort((a, b) => {
-    const colIndex = properties.tableHeaders.indexOf(column);
-    const valueA = a[colIndex];
-    const valueB = b[colIndex];
-    if (typeof valueA === "number" && typeof valueB === "number") {
-      return sortOrders[column] === "asc" ? valueA - valueB : valueB - valueA;
-    } else if (typeof valueA === "string" && typeof valueB === "string") {
-      return sortOrders[column] === "asc" ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
-    } else if (typeof valueA === "boolean" && typeof valueB === "boolean") {
-      return sortOrders[column] === "asc" ? valueA === valueB ? 0 : valueA ? -1 : 1 : valueA === valueB ? 0 : valueA ? 1 : -1;
-    } else {
-      return 0;
+<script lang="ts">
+  import type { TableProperties } from './properties';
+
+  let {
+    tableTitle = '',
+    tableHeaders = [],
+    tableData = [],
+    isTableScrollable = false,
+    isContentScrollable = false
+  }: TableProperties = $props();
+
+  let sortOrders = $state<{ [key: string]: 'asc' | 'desc' }>({});
+
+  let sortedTableData = $derived.by(() => {
+    const columns = Object.keys(sortOrders);
+    if (columns.length === 0) {
+      return [...tableData];
     }
+
+    // Sort by the last clicked column
+    const column = columns[columns.length - 1];
+    const order = sortOrders[column];
+
+    return [...tableData].sort((a, b) => {
+      const colIndex = tableHeaders.indexOf(column);
+      const valueA = a[colIndex];
+      const valueB = b[colIndex];
+
+      if (typeof valueA === 'number' && typeof valueB === 'number') {
+        return order === 'asc' ? valueA - valueB : valueB - valueA;
+      } else if (typeof valueA === 'string' && typeof valueB === 'string') {
+        return order === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
+      } else if (typeof valueA === 'boolean' && typeof valueB === 'boolean') {
+        return order === 'asc'
+          ? valueA === valueB
+            ? 0
+            : valueA
+              ? -1
+              : 1
+          : valueA === valueB
+            ? 0
+            : valueA
+              ? 1
+              : -1;
+      } else {
+        return 0;
+      }
+    });
   });
-  return 0;
-}
-onMount(() => {
-  sortedTableData = [...properties.tableData];
-});
+
+  function sortTableData(column: string) {
+    if (!sortOrders[column]) {
+      sortOrders[column] = 'asc';
+    } else {
+      sortOrders[column] = sortOrders[column] === 'asc' ? 'desc' : 'asc';
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent, header: string) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      sortTableData(header);
+    }
+  }
 </script>
 
-{#if properties && properties.tableTitle}
+{#if tableTitle}
   <div class="table-title">
-    {properties.tableTitle}
+    {tableTitle}
   </div>
 {/if}
-{#if properties.tableHeaders.length !== 0 || properties.tableData.length !== 0}
-  <div
-    class="table-container {properties.isTableScrollable ? 'scrollable-table' : ' '}"
-    role="grid"
-  >
+{#if tableHeaders.length !== 0 || tableData.length !== 0}
+  <div class="table-container {isTableScrollable ? 'scrollable-table' : ' '}" role="grid">
     <table>
       <thead>
         <tr>
-          {#each properties.tableHeaders as header}
-            <th class="table-header {properties.isTableScrollable ? 'table-header-sticky' : ' '}">
+          {#each tableHeaders as header}
+            <th class="table-header {isTableScrollable ? 'table-header-sticky' : ' '}">
               {header}
               {#if sortOrders[header] === 'asc'}
                 <span
                   class="sort-arrow"
-                  on:click={() => sortTableData(header)}
-                  on:keydown
+                  onclick={() => sortTableData(header)}
+                  onkeydown={(e) => handleKeydown(e, header)}
                   role="button"
                   tabindex="0">▼</span
                 >
               {:else}
                 <span
                   class="sort-arrow"
-                  on:click={() => sortTableData(header)}
-                  on:keydown
+                  onclick={() => sortTableData(header)}
+                  onkeydown={(e) => handleKeydown(e, header)}
                   role="button"
                   tabindex="0">▲</span
                 >
@@ -77,7 +103,7 @@ onMount(() => {
           <tr>
             {#each row as cell}
               <td class="table-content">
-                <div class={properties.isContentScrollable ? 'scrollable-content' : ' '}>
+                <div class={isContentScrollable ? 'scrollable-content' : ' '}>
                   {cell}
                 </div>
               </td>

package/dist/Table/Table.svelte.d.ts

@@ -1,21 +1,4 @@
-import { SvelteComponent } from "svelte";
 import type { TableProperties } from './properties';
-declare const __propDef: {
-    props: {
-        properties?: TableProperties;
-    };
-    events: {
-        keydown: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
-}
-export {};
+declare const Table: import("svelte").Component<TableProperties, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/Table/properties.d.ts

@@ -1,8 +1,8 @@
 import type { JSONValue } from 'type-decoder';
 export type TableProperties = {
-    tableTitle: string | null;
-    tableHeaders: string[];
-    tableData: Array<JSONValue[]>;
-    isTableScrollable: boolean;
-    isContentScrollable: boolean;
+    tableTitle?: string | null;
+    tableHeaders?: string[];
+    tableData?: Array<JSONValue[]>;
+    isTableScrollable?: boolean;
+    isContentScrollable?: boolean;
 };

package/dist/Toast/Toast.svelte

@@ -1,96 +1,171 @@
-<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
-import { fly } from "svelte/transition";
-import { defaultToastProperties } from "./properties";
-export let properties = defaultToastProperties;
-const dispatch = createEventDispatcher();
-const animationConfig = getAnimationConfig(
-  properties.direction,
-  properties.overlapPage ?? true
-);
-let showToast = false;
-let timeoutId = null;
-function hideToast() {
-  showToast = false;
-}
-function handleAnimationEnd() {
-  dispatch("onToastHide");
-}
-function getAnimationConfig(toastDirection = null, overlapPage) {
-  let inX = 0;
-  let inY = 0;
-  let outX = 0;
-  let outY = 0;
-  switch (toastDirection) {
-    case "left-to-right":
-      inX = -1 * (properties.inAnimationOffset ?? 500);
-      outX = -1 * (properties.outAnimationOffset ?? 500);
-      break;
-    case "right-to-left":
-      inX = properties.inAnimationOffset ?? 500;
-      outX = properties.outAnimationOffset ?? 500;
-      break;
-    case "bottom-to-top":
-      inY = properties.inAnimationOffset ?? (overlapPage ? 500 : 20);
-      outY = properties.outAnimationOffset ?? (overlapPage ? 500 : 20);
-      break;
-    case "top-to-bottom":
-    default:
-      inY = -1 * (properties.inAnimationOffset ?? (overlapPage ? 500 : 20));
-      outY = -1 * (properties.outAnimationOffset ?? (overlapPage ? 100 : 20));
-      break;
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+  import type { ToastDirection } from './properties';
+  import type { FlyAnimationConfig } from '../types';
+
+  let {
+    duration = 2000,
+    leftIcon,
+    message = '',
+    subtext,
+    rightIcon,
+    type,
+    direction,
+    overlapPage = true,
+    inAnimationOffset,
+    inAnimationDuration,
+    outAnimationOffset,
+    outAnimationDuration,
+    testId,
+    messageTestId,
+    subTextTestId,
+    closeIconTestId,
+    onToastHide,
+    bottomContent
+  }: {
+    duration?: number | null;
+    leftIcon?: string | null;
+    message?: string | null;
+    subtext?: string | null;
+    rightIcon?: string | null;
+    type?: 'success' | 'error' | 'info' | 'warn' | null;
+    direction: ToastDirection;
+    overlapPage?: boolean;
+    inAnimationOffset?: number | null;
+    inAnimationDuration?: number | null;
+    outAnimationOffset?: number | null;
+    outAnimationDuration?: number | null;
+    testId?: string | null;
+    messageTestId?: string | null;
+    subTextTestId?: string | null;
+    closeIconTestId?: string | null;
+    onToastHide?: () => void;
+    bottomContent?: Snippet;
+  } = $props();
+
+  const animationConfig: FlyAnimationConfig = getAnimationConfig(direction, overlapPage);
+
+  let showToast = $state(false);
+  let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
+
+  function hideToast() {
+    showToast = false;
+  }
+
+  function handleAnimationEnd() {
+    onToastHide?.();
   }
-  return {
-    in: {
-      x: inX,
-      y: inY,
-      duration: properties.inAnimationDuration ?? 400
-    },
-    out: {
-      x: outX,
-      y: outY,
-      duration: properties.outAnimationDuration ?? 800
+
+  /**
+   * Function to generate animation configuration for toast animations.
+   * @param {ToastDirection | null} toastDirection - Direction of the toast animation.
+   * @param {boolean} overlapPage - Flag indicating whether toast should overlap page content.
+   * @returns {FlyAnimationConfig} Animation configuration object.
+   */
+  function getAnimationConfig(
+    toastDirection: ToastDirection | undefined = undefined,
+    overlapPage: boolean
+  ): FlyAnimationConfig {
+    // Initializing variables to store animation offsets
+    let inX: number = 0;
+    let inY: number = 0;
+    let outX: number = 0;
+    let outY: number = 0;
+
+    // Determining animation offsets based on toast direction
+    // Multiplying by -1 effectively flips the direction of movement along the specified axis, ensuring that the toast animation moves in the intended direction based on the chosen toast direction.
+    switch (toastDirection) {
+      case 'left-to-right':
+        // Calculating horizontal offsets for left-to-right animation
+        inX = -1 * (inAnimationOffset ?? 500);
+        outX = -1 * (outAnimationOffset ?? 500);
+        break;
+      case 'right-to-left':
+        // Calculating horizontal offsets for right-to-left animation
+        inX = inAnimationOffset ?? 500;
+        outX = outAnimationOffset ?? 500;
+        break;
+      case 'bottom-to-top':
+        // Calculating vertical offsets for bottom-to-top animation
+        inY = inAnimationOffset ?? (overlapPage ? 500 : 20);
+        outY = outAnimationOffset ?? (overlapPage ? 500 : 20);
+        break;
+      case 'top-to-bottom':
+      default:
+        // Calculating vertical offsets for top-to-bottom animation
+        inY = -1 * (inAnimationOffset ?? (overlapPage ? 500 : 20));
+        outY = -1 * (outAnimationOffset ?? (overlapPage ? 100 : 20));
+        break;
     }
-  };
-}
-onMount(() => {
-  showToast = true;
-  timeoutId = setTimeout(hideToast, properties.duration);
-});
-onDestroy(() => {
-  if (timeoutId !== null) {
-    clearTimeout(timeoutId);
+    // Returning animation configuration object
+    return {
+      in: {
+        x: inX,
+        y: inY,
+        duration: inAnimationDuration ?? 400
+      },
+      out: {
+        x: outX,
+        y: outY,
+        duration: outAnimationDuration ?? 800
+      }
+    };
   }
-});
+
+  $effect(() => {
+    showToast = true;
+    timeoutId = setTimeout(hideToast, 200);
+
+    return () => {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+      }
+    };
+  });
 </script>
 
 {#if showToast}
   <div
-    class="toast {properties.type ?? ''}"
-    class:no-page-overlap={!(properties?.overlapPage ?? true)}
+    class="toast {type ?? ''}"
+    class:no-page-overlap={!overlapPage}
     in:fly={animationConfig.in}
     out:fly={animationConfig.out}
-    on:outroend={handleAnimationEnd}
+    onoutroend={handleAnimationEnd}
+    data-pw={testId}
   >
-    {#if properties.leftIcon}
+    {#if leftIcon}
       <div class="toast-icon-wrapper">
-        <img class="toast-icon" src={properties.leftIcon} alt="toast-icon" />
+        <img class="toast-icon" src={leftIcon} alt="toast-icon" />
       </div>
     {/if}
 
-    <div class="toast-message" data-pw={properties.messageTestId}>
-      {properties.message}
-      {#if properties.subtext}
-        <div class="toast-subtext" data-pw={properties.subTextTestId}>{properties.subtext}</div>
+    <div class="toast-message" data-pw={messageTestId}>
+      {message}
+      {#if subtext}
+        <div class="toast-subtext" data-pw={subTextTestId}>{subtext}</div>
       {/if}
 
-      {#if $$slots.bottomContent}
-        <slot name="bottomContent" />
+      {#if bottomContent}
+        {@render bottomContent()}
       {/if}
     </div>
 
-    {#if properties.rightIcon}
-      <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" />
+    {#if rightIcon}
+      <div
+        class="close-button"
+        tabindex="0"
+        role="button"
+        onclick={hideToast}
+        onkeypress={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            hideToast();
+          }
+        }}
+        data-pw={closeIconTestId}
+      >
+        <img class="toast-icon" src={rightIcon} alt="close-icon" />
       </div>
     {/if}
   </div>

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

@@ -1,24 +1,25 @@
-import { SvelteComponent } from "svelte";
-import { type ToastProperties } from './properties';
-declare const __propDef: {
-    props: {
-        properties?: ToastProperties;
-    };
-    events: {
-        keypress: KeyboardEvent;
-        onToastHide: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        bottomContent: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Snippet } from 'svelte';
+import type { ToastDirection } from './properties';
+type $$ComponentProps = {
+    duration?: number | null;
+    leftIcon?: string | null;
+    message?: string | null;
+    subtext?: string | null;
+    rightIcon?: string | null;
+    type?: 'success' | 'error' | 'info' | 'warn' | null;
+    direction: ToastDirection;
+    overlapPage?: boolean;
+    inAnimationOffset?: number | null;
+    inAnimationDuration?: number | null;
+    outAnimationOffset?: number | null;
+    outAnimationDuration?: number | null;
+    testId?: string | null;
+    messageTestId?: string | null;
+    subTextTestId?: string | null;
+    closeIconTestId?: string | null;
+    onToastHide?: () => void;
+    bottomContent?: Snippet;
 };
-export type ToastProps = typeof __propDef.props;
-export type ToastEvents = typeof __propDef.events;
-export type ToastSlots = typeof __propDef.slots;
-export default class Toast extends SvelteComponent<ToastProps, ToastEvents, ToastSlots> {
-}
-export {};
+declare const Toast: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/Toast/properties.d.ts

@@ -2,20 +2,19 @@ export type ToastType = 'success' | 'error' | 'info' | 'warn';
 export type ToastDirection = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
 export type ToastProperties = {
     duration: number;
-    leftIcon?: string;
+    leftIcon?: string | null;
     message: string;
-    subtext?: string;
-    rightIcon?: string;
-    type?: ToastType;
-    direction?: ToastDirection;
+    subtext?: string | null;
+    rightIcon?: string | null;
+    type?: ToastType | null;
+    direction?: ToastDirection | null;
     overlapPage?: boolean;
-    inAnimationOffset?: number;
-    inAnimationDuration?: number;
-    outAnimationOffset?: number;
-    outAnimationDuration?: number;
-    testId?: string;
+    inAnimationOffset?: number | null;
+    inAnimationDuration?: number | null;
+    outAnimationOffset?: number | null;
+    outAnimationDuration?: number | null;
+    testId?: string | null;
     messageTestId?: string;
     subTextTestId?: string;
     closeIconTestId?: string;
 };
-export declare const defaultToastProperties: ToastProperties;

package/dist/Toast/properties.js

@@ -1,4 +1 @@
-export const defaultToastProperties = {
-    duration: 2000,
-    message: ''
-};
+export {};

package/dist/Toggle/Toggle.svelte

@@ -1,20 +1,21 @@
-<script>import { createEventDispatcher } from "svelte";
-export let checked = false;
-export let text = "";
-const dispatch = createEventDispatcher();
-function handleCheckboxClick(e) {
-  if (e.target instanceof HTMLInputElement && typeof e.target.checked === "boolean") {
-    checked = e.target.checked;
+<script lang="ts">
+  import type { ToggleProperties } from './properties';
+
+  let { checked = false, text = '', onclick }: ToggleProperties = $props();
+
+  function handleCheckboxClick(e: MouseEvent): void {
+    if (e.target instanceof HTMLInputElement && typeof e.target.checked === 'boolean') {
+      checked = e.target.checked;
+    }
+    onclick?.(checked);
   }
-  dispatch("click", checked);
-}
 </script>
 
 <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} />
-    <span class="slider round" />
+    <input class="input-checkbox" type="checkbox" {checked} onclick={handleCheckboxClick} />
+    <span class="slider round"></span>
   </label>
 </div>
 

package/dist/Toggle/Toggle.svelte.d.ts

@@ -1,21 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        checked?: boolean;
-        text?: string;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ToggleProps = typeof __propDef.props;
-export type ToggleEvents = typeof __propDef.events;
-export type ToggleSlots = typeof __propDef.slots;
-export default class Toggle extends SvelteComponent<ToggleProps, ToggleEvents, ToggleSlots> {
-}
-export {};
+import type { ToggleProperties } from './properties';
+declare const Toggle: import("svelte").Component<ToggleProperties, {}, "">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/Toggle/properties.d.ts

@@ -0,0 +1,5 @@
+export type ToggleProperties = {
+    checked?: boolean;
+    text: string;
+    onclick?: (checked: boolean) => void;
+};

package/dist/Toggle/properties.js

@@ -0,0 +1 @@
+export {};