@juspay/svelte-ui-components 1.24.0 → 1.26.0

package/dist/Accordion/Accordion.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        expand?: boolean | undefined;
+        expand?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -9,6 +9,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type AccordionProps = typeof __propDef.props;
 export type AccordionEvents = typeof __propDef.events;

package/dist/Animations/ModalAnimation.svelte.d.ts

@@ -3,9 +3,9 @@ import type { ModalAlign } from '../Modal/properties';
 import type { ModalTransition } from '../types';
 declare const __propDef: {
     props: {
-        enable?: boolean | undefined;
-        align?: ModalAlign | undefined;
-        transitionType?: ModalTransition | undefined;
+        enable?: boolean;
+        align?: ModalAlign;
+        transitionType?: ModalTransition;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,6 +13,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ModalAnimationProps = typeof __propDef.props;
 export type ModalAnimationEvents = typeof __propDef.events;

package/dist/Animations/OverlayAnimation.svelte.d.ts

@@ -23,5 +23,7 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/Badge/Badge.svelte.d.ts

@@ -2,12 +2,14 @@ import { SvelteComponent } from "svelte";
 import type { BadgeProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: BadgeProperties | null | undefined;
+        properties?: BadgeProperties | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BadgeProps = typeof __propDef.props;
 export type BadgeEvents = typeof __propDef.events;

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { BannerProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: BannerProperties | null | undefined;
+        properties?: BannerProperties | null;
     };
     events: {
         click: MouseEvent;
@@ -11,6 +11,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BannerProps = typeof __propDef.props;
 export type BannerEvents = typeof __propDef.events;

package/dist/BrandLoader/BrandLoader.svelte.d.ts

@@ -3,12 +3,14 @@ export declare const prerender = true;
 import type { BrandLoaderProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: BrandLoaderProperties | undefined;
+        properties?: BrandLoaderProperties;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BrandLoaderProps = typeof __propDef.props;
 export type BrandLoaderEvents = typeof __propDef.events;

package/dist/Button/Button.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        properties?: import("./properties").ButtonProperties | undefined;
-        showProgressBar?: boolean | undefined;
+        properties?: import("./properties").ButtonProperties;
+        showProgressBar?: boolean;
     };
     events: {
         click: CustomEvent<any>;
@@ -12,6 +12,8 @@ declare const __propDef: {
     slots: {
         icon: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;

package/dist/Carousel/Carousel.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { CarouselProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: CarouselProperties | undefined;
+        properties?: CarouselProperties;
     };
     events: {
         keydown: KeyboardEvent;
@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CarouselProps = typeof __propDef.props;
 export type CarouselEvents = typeof __propDef.events;

package/dist/CheckListItem/CheckListItem.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
     slots: {
         checkboxLabel: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CheckListItemProps = typeof __propDef.props;
 export type CheckListItemEvents = typeof __propDef.events;

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

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        icon?: string | undefined;
-        text?: string | undefined;
-        headerIcon?: string | undefined;
-        showLoader?: boolean | undefined;
+        icon?: string;
+        text?: string;
+        headerIcon?: string;
+        showLoader?: boolean;
     };
     events: {
         keydown: KeyboardEvent;
@@ -13,6 +13,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type GridItemProps = typeof __propDef.props;
 export type GridItemEvents = typeof __propDef.events;

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { IconProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: IconProperties | undefined;
+        properties?: IconProperties;
     };
     events: {
         click: MouseEvent;
@@ -11,6 +11,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type IconProps = typeof __propDef.props;
 export type IconEvents = typeof __propDef.events;

package/dist/IconStack/IconStack.svelte

@@ -0,0 +1,53 @@
+<script>import {} from "./properties";
+export let icons;
+</script>
+
+<div class="stack-container">
+  {#each icons as icon, i}
+    <div class="stack-icon" style="z-index: {icons.length - i}">
+      {#if icon.type === 'image'}
+        <img src={icon.content} alt="icon" />
+      {:else}
+        <div class="text-container">
+          <span>{icon.content}</span>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .stack-container {
+    display: flex;
+    margin: var(--stack-container-margin, 0px);
+  }
+  .stack-icon {
+    display: flex;
+    width: var(--stack-icon-width, 36px);
+    height: var(--stack-icon-height, 36px);
+    background: var(--stack-icon-bg, white);
+    border-radius: var(--stack-icon-radius, 50%);
+    margin: var(--stack-icon-margin, 0px 0px 0px -14px);
+    align-items: var(--stack-icon-align-items, center);
+    border: var(--stack-icon-border, 1px solid #ffffff40);
+    justify-content: var(--stack-icon-justify-content, center);
+    box-shadow: var(--stack-icon-shadow, 0 2px 4px #00000026);
+  }
+  .stack-icon img {
+    width: var(--stack-img-width, 36px);
+    height: var(--stack-img-height, 36px);
+  }
+  .text-container {
+    display: flex;
+    width: var(--text-conatiner-width, 36px);
+    height: var(--text-conatiner-height, 36px);
+    align-items: var(--text-container-align-items, center);
+    justify-content: var(--text-container-justify-content, center);
+  }
+  .text-container span {
+    color: var(--text-color, #666);
+    font-size: var(--text-size, 13px);
+    font-weight: var(--text-weight, 500);
+    text-align: var(--text-align, center);
+  }
+</style>

package/dist/IconStack/IconStack.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type IconProperties } from './properties';
+declare const __propDef: {
+    props: {
+        icons: IconProperties[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type IconStackProps = typeof __propDef.props;
+export type IconStackEvents = typeof __propDef.events;
+export type IconStackSlots = typeof __propDef.slots;
+export default class IconStack extends SvelteComponent<IconStackProps, IconStackEvents, IconStackSlots> {
+}
+export {};

package/dist/IconStack/properties.d.ts

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

package/dist/IconStack/properties.js

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

package/dist/Img/Img.svelte.d.ts

@@ -3,12 +3,14 @@ declare const __propDef: {
     props: {
         src: string;
         alt: string;
-        fallback?: string | null | undefined;
+        fallback?: string | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ImgProps = typeof __propDef.props;
 export type ImgEvents = typeof __propDef.events;

package/dist/Input/Input.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponent } from "svelte";
 import { type InputProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: InputProperties | undefined;
-        focus?: (() => void) | undefined;
+        properties?: InputProperties;
+        focus?: () => void;
     };
     events: {
         keydown: KeyboardEvent;
@@ -20,6 +20,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;

package/dist/InputButton/InputButton.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponent } from "svelte";
 import { type InputButtonProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: InputButtonProperties | undefined;
-        focus?: (() => void) | undefined;
+        properties?: InputButtonProperties;
+        focus?: () => void;
     };
     events: {
         valueChange: CustomEvent<any>;
@@ -23,6 +23,8 @@ declare const __propDef: {
             slot: string;
         };
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type InputButtonProps = typeof __propDef.props;
 export type InputButtonEvents = typeof __propDef.events;

package/dist/ListItem/ListItem.svelte

@@ -38,6 +38,7 @@ function handleTopSectionClick() {
       on:keydown
       role="button"
       tabindex="0"
+      data-pw={properties.testId}
     >
       <div
         class="top-section"
@@ -46,6 +47,7 @@ function handleTopSectionClick() {
         on:keydown
         role="button"
         tabindex="0"
+        data-pw={properties.topSectionTestId}
       >
         <div class="left-content">
           {#if properties.leftImageUrl}
@@ -55,6 +57,7 @@ function handleTopSectionClick() {
               on:keydown
               role="button"
               tabindex="0"
+              data-pw={properties.leftImageTestId}
             >
               <Img
                 src={properties.leftImageUrl}
@@ -76,6 +79,7 @@ function handleTopSectionClick() {
               on:keydown
               role="button"
               tabindex="0"
+              data-pw={properties.centerTextTestId}
             >
               <!-- eslint-disable-next-line -->
               {@html properties.label}
@@ -96,6 +100,7 @@ function handleTopSectionClick() {
               on:keydown
               role="button"
               tabindex="0"
+              data-pw={properties.rightImageTestId}
             >
               <img class="right-img" src={properties.rightImageUrl} alt="" />
             </div>

package/dist/ListItem/ListItem.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponent } from "svelte";
 import { type ListItemProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: ListItemProperties | undefined;
-        showLoader?: boolean | undefined;
-        showRightContentLoader?: boolean | undefined;
-        expand?: boolean | undefined;
-        preventFocus?: boolean | undefined;
+        properties?: ListItemProperties;
+        showLoader?: boolean;
+        showRightContentLoader?: boolean;
+        expand?: boolean;
+        preventFocus?: boolean;
     };
     events: {
         keydown: KeyboardEvent;
@@ -24,6 +24,8 @@ declare const __propDef: {
         rightContent: {};
         bottomContent: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ListItemProps = typeof __propDef.props;
 export type ListItemEvents = typeof __propDef.events;

package/dist/ListItem/properties.d.ts

@@ -5,5 +5,10 @@ export type ListItemProperties = {
     label: string | null;
     useAccordion: boolean;
     rightContentText: string | null;
+    testId?: string;
+    topSectionTestId?: string;
+    rightImageTestId?: string;
+    leftImageTestId?: string;
+    centerTextTestId?: string;
 };
 export declare const defaultListItemProperties: ListItemProperties;

package/dist/Loader/Loader.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type LoaderProps = typeof __propDef.props;
 export type LoaderEvents = typeof __propDef.events;

package/dist/Modal/Modal.svelte

@@ -71,6 +71,7 @@ onDestroy(() => {
       on:keydown
       role="button"
       tabindex="0"
+      data-pw={properties.testId}
     >
       <ModalAnimation
         enable={properties.enableTransition}
@@ -81,7 +82,13 @@ onDestroy(() => {
           {#if properties.header.leftImage !== null || properties.header.text !== null || properties.header.rightImage !== null}
             <div class="header">
               {#if properties.header.leftImage}
-                <div on:click={handleLeftImageClick} on:keydown role="button" tabindex="0">
+                <div
+                  on:click={handleLeftImageClick}
+                  on:keydown
+                  role="button"
+                  tabindex="0"
+                  data-pw={properties.leftImageTestId}
+                >
                   <img class="header-left-img" src={properties.header.leftImage} alt="" />
                 </div>
               {/if}
@@ -91,7 +98,13 @@ onDestroy(() => {
                 </div>
               {/if}
               {#if properties.header.rightImage}
-                <div role="button" tabindex="0" on:click={handleRightImageClick} on:keydown>
+                <div
+                  role="button"
+                  tabindex="0"
+                  on:click={handleRightImageClick}
+                  on:keydown
+                  data-pw={properties.rightImageTestId}
+                >
                   <img class="header-right-img" src={properties.header.rightImage} alt="" />
                 </div>
               {/if}

package/dist/Modal/Modal.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { ModalProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: ModalProperties | undefined;
+        properties?: ModalProperties;
     };
     events: {
         keydown: KeyboardEvent;
@@ -19,6 +19,8 @@ declare const __propDef: {
         content: {};
         footer: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ModalProps = typeof __propDef.props;
 export type ModalEvents = typeof __propDef.events;

package/dist/Modal/properties.d.ts

@@ -19,5 +19,8 @@ export type ModalProperties = {
         secondaryButton?: ButtonProperties;
     };
     debounceTime: number;
+    leftImageTestId?: string;
+    rightImageTestId?: string;
+    testId?: string;
 };
 export declare const defaultModalProperties: ModalProperties;

package/dist/Select/Select.svelte.d.ts

@@ -2,8 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { SelectProperties } from './properties';
 declare const __propDef: {
     props: {
-        dropDownIconAlt?: string | undefined;
-        properties?: SelectProperties | undefined;
+        dropDownIconAlt?: string;
+        properties?: SelectProperties;
     };
     events: {
         keydown: KeyboardEvent;
@@ -16,6 +16,8 @@ declare const __propDef: {
         leftContent: {};
         bottomContent: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;

package/dist/Status/Status.svelte.d.ts

@@ -3,7 +3,7 @@ export declare const prerender = true;
 import type { StatusProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: StatusProperties | undefined;
+        properties?: StatusProperties;
     };
     events: {
         buttonClick: CustomEvent<any>;
@@ -11,6 +11,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type StatusProps = typeof __propDef.props;
 export type StatusEvents = typeof __propDef.events;

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

@@ -12,6 +12,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type StepProps = typeof __propDef.props;
 export type StepEvents = typeof __propDef.events;

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

@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type StepperProps = typeof __propDef.props;
 export type StepperEvents = typeof __propDef.events;

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { TableProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: TableProperties | undefined;
+        properties?: TableProperties;
     };
     events: {
         keydown: KeyboardEvent;
@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TableProps = typeof __propDef.props;
 export type TableEvents = typeof __propDef.events;

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import { type ToastProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: ToastProperties | undefined;
+        properties?: ToastProperties;
     };
     events: {
         keypress: KeyboardEvent;
@@ -13,6 +13,8 @@ declare const __propDef: {
     slots: {
         bottomContent: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ToastProps = typeof __propDef.props;
 export type ToastEvents = typeof __propDef.events;

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

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        checked?: boolean | undefined;
-        text?: string | undefined;
+        checked?: boolean;
+        text?: string;
     };
     events: {
         click: CustomEvent<any>;
@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ToggleProps = typeof __propDef.props;
 export type ToggleEvents = typeof __propDef.events;

package/dist/Toolbar/Toolbar.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { ToolbarProperties } from './properties';
 declare const __propDef: {
     props: {
-        properties?: ToolbarProperties | undefined;
+        properties?: ToolbarProperties;
     };
     events: {
         keydown: KeyboardEvent;
@@ -16,6 +16,8 @@ declare const __propDef: {
         rightContent: {};
         additionalContent: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ToolbarProps = typeof __propDef.props;
 export type ToolbarEvents = typeof __propDef.events;

package/dist/types.d.ts

@@ -3,7 +3,7 @@ import type { FlyParams } from 'svelte/transition';
  * @name InputDataType
  * @description Different types of input data which can be passed to the Input Component
  */
-export type InputDataType = 'text' | 'tel' | 'password' | 'email';
+export type InputDataType = 'text' | 'tel' | 'password' | 'email' | 'number';
 export type ModalTransition = 'IN' | 'ALL';
 export type AutoCompleteType = 'tel' | 'name' | 'email' | 'one-time-code' | 'postal-code' | 'street-address' | 'on' | 'address-level1';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "1.24.0",
+  "version": "1.26.0",
   "scripts": {
     "dev": "vite dev --host",
     "build": "vite build && npm run package",
@@ -54,7 +54,7 @@
     "svelte-check": "^3.6.0",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.5.3",
+    "vite": "^4.5.5",
     "vitest": "^0.34.6",
     "type-decoder": "^1.2.0"
   },