@juspay/svelte-ui-components 1.34.1 → 1.34.2

package/dist/Accordion/Accordion.svelte

@@ -1,39 +1,26 @@
-<script>import { afterUpdate, onMount } from "svelte";
-export let expand = false;
-let maxHeight = 0;
-let accordionRef;
-function updateMaxHeight() {
-  try {
-    if (expand) {
-      accordionRef.style.maxHeight = `${maxHeight}px`;
-    } else {
-      accordionRef.style.maxHeight = "0";
-    }
-  } catch (e) {
-    console.error("Error while updating style of accordian", e);
-  }
-}
-afterUpdate(updateMaxHeight);
-onMount(() => {
-  accordionRef.style.transition = "max-height 0.2s ease-out";
-  updateMaxHeight();
-});
-$: {
-  if (accordionRef) {
-    maxHeight = accordionRef.scrollHeight;
-    updateMaxHeight();
-  }
-}
+<script lang="ts">
+  let { expand = false, children } = $props();
 </script>
 
-<div class="accordion" bind:this={accordionRef}>
-  <slot />
+<div class="accordion" class:expanded={expand}>
+  <div class="accordion-content">
+    {@render children?.()}
+  </div>
 </div>
 
 <style>
   .accordion {
-    max-height: 0;
+    display: grid;
+    grid-template-rows: 0fr;
     overflow: hidden;
-    transition: max-height 0s ease-in;
+    transition: grid-template-rows 0.2s ease-out;
+  }
+
+  .accordion.expanded {
+    grid-template-rows: 1fr;
+  }
+
+  .accordion-content {
+    min-height: 0;
   }
 </style>

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

@@ -1,20 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        expand?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type AccordionProps = typeof __propDef.props;
-export type AccordionEvents = typeof __propDef.events;
-export type AccordionSlots = typeof __propDef.slots;
-export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
-}
-export {};
+declare const Accordion: import("svelte").Component<{
+    expand?: boolean;
+    children: any;
+}, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/Animations/ModalAnimation.svelte

@@ -1,39 +1,53 @@
-<script>import { fly, fade } from "svelte/transition";
-export let enable = true;
-export let align = "bottom";
-export let transitionType = "ALL";
-let flyAnimationProperties = { x: 0, y: 0, duration: 380 };
-let fadeAnimationProperties = { duration: 300 };
-switch (align) {
-  case "top":
-    flyAnimationProperties = { ...flyAnimationProperties, y: -30 };
-    break;
-  case "bottom":
-    flyAnimationProperties = { ...flyAnimationProperties, y: 300 };
-    break;
-}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { fly, fade } from 'svelte/transition';
+  import type { ModalAlign } from '../Modal/properties';
+  import type { ModalTransition } from '../types';
+
+  type Props = {
+    enable?: boolean;
+    align?: ModalAlign;
+    transitionType?: ModalTransition;
+    children?: Snippet;
+  };
+
+  let { enable = true, align = 'bottom', transitionType = 'ALL', children }: Props = $props();
+
+  let flyAnimationProperties = $derived.by(() => {
+    const base = { x: 0, y: 0, duration: 380 };
+
+    switch (align) {
+      case 'top':
+        return { ...base, y: -30 };
+      case 'bottom':
+        return { ...base, y: 300 };
+      default:
+        return base;
+    }
+  });
+
+  let fadeAnimationProperties = { duration: 300 };
+
+  let useFlyAnimation = $derived(align === 'top' || align === 'bottom');
+  let useOutTransition = $derived(transitionType === 'ALL');
 </script>
 
 {#if enable}
-  {#if align === 'top' || align === 'bottom'}
-    {#if transitionType === 'IN'}
-      <div in:fly|global={flyAnimationProperties}>
-        <slot />
-      </div>
-    {:else}
-      <div in:fly|global={flyAnimationProperties} out:fly|global={flyAnimationProperties}>
-        <slot />
-      </div>
-    {/if}
-  {:else if transitionType === 'IN'}
-    <div in:fade|global={fadeAnimationProperties}>
-      <slot />
+  {#if useFlyAnimation}
+    <div
+      in:fly|global={flyAnimationProperties}
+      out:fly|global={useOutTransition ? flyAnimationProperties : undefined}
+    >
+      {@render children?.()}
     </div>
   {:else}
-    <div in:fade|global={fadeAnimationProperties} out:fade|global={fadeAnimationProperties}>
-      <slot />
+    <div
+      in:fade|global={fadeAnimationProperties}
+      out:fade|global={useOutTransition ? fadeAnimationProperties : undefined}
+    >
+      {@render children?.()}
     </div>
   {/if}
 {:else}
-  <slot />
+  {@render children?.()}
 {/if}

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

@@ -1,24 +1,12 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { ModalAlign } from '../Modal/properties';
 import type { ModalTransition } from '../types';
-declare const __propDef: {
-    props: {
-        enable?: boolean;
-        align?: ModalAlign;
-        transitionType?: ModalTransition;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type Props = {
+    enable?: boolean;
+    align?: ModalAlign;
+    transitionType?: ModalTransition;
+    children?: Snippet;
 };
-export type ModalAnimationProps = typeof __propDef.props;
-export type ModalAnimationEvents = typeof __propDef.events;
-export type ModalAnimationSlots = typeof __propDef.slots;
-export default class ModalAnimation extends SvelteComponent<ModalAnimationProps, ModalAnimationEvents, ModalAnimationSlots> {
-}
-export {};
+declare const ModalAnimation: import("svelte").Component<Props, {}, "">;
+type ModalAnimation = ReturnType<typeof ModalAnimation>;
+export default ModalAnimation;

package/dist/Animations/OverlayAnimation.svelte

@@ -1,7 +1,14 @@
-<script>
+<script lang="ts">
   import { fade } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children?: Snippet;
+  };
+
+  let { children }: Props = $props();
 </script>
 
 <div out:fade={{ duration: 350 }}>
-  <slot />
+  {@render children?.()}
 </div>

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

@@ -1,29 +1,7 @@
-/** @typedef {typeof __propDef.props}  OverlayAnimationProps */
-/** @typedef {typeof __propDef.events}  OverlayAnimationEvents */
-/** @typedef {typeof __propDef.slots}  OverlayAnimationSlots */
-export default class OverlayAnimation extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type OverlayAnimationProps = typeof __propDef.props;
-export type OverlayAnimationEvents = typeof __propDef.events;
-export type OverlayAnimationSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
+import type { Snippet } from 'svelte';
+type Props = {
+    children?: Snippet;
 };
-export {};
+declare const OverlayAnimation: import("svelte").Component<Props, {}, "">;
+type OverlayAnimation = ReturnType<typeof OverlayAnimation>;
+export default OverlayAnimation;

package/dist/Badge/Badge.svelte

@@ -1,14 +1,15 @@
-<script>export let properties = null;
+<script lang="ts">
+  import type { BadgeProperties } from './properties';
+
+  let { image, value }: BadgeProperties = $props();
 </script>
 
-{#if properties !== null}
-  <div class="badge-icon">
-    <div class="badge-wrap">
-      <img class="icon-img" src={properties.image} alt="" />
-      <div class="badge">{properties.value}</div>
-    </div>
+<div class="badge-icon">
+  <div class="badge-wrap">
+    <img class="icon-img" src={image} alt="" />
+    <div class="badge">{value}</div>
   </div>
-{/if}
+</div>
 
 <style>
   .badge-wrap {

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

@@ -1,19 +1,4 @@
-import { SvelteComponent } from "svelte";
 import type { BadgeProperties } from './properties';
-declare const __propDef: {
-    props: {
-        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;
-export type BadgeSlots = typeof __propDef.slots;
-export default class Badge extends SvelteComponent<BadgeProps, BadgeEvents, BadgeSlots> {
-}
-export {};
+declare const Badge: import("svelte").Component<BadgeProperties, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/Banner/Banner.svelte

@@ -1,27 +1,28 @@
-<script>export let properties = null;
+<script lang="ts">
+  import type { BannerProperties } from './properties';
+
+  let { icon, text, linkText, rightContent, onclick, onkeydown }: BannerProperties = $props();
 </script>
 
-{#if properties !== null}
-  <div class="banner" on:click on:keydown role="button" tabindex="0">
-    {#if properties.icon !== null}
-      <div class="banner-image">
-        <img src={properties.icon} alt="" />
-      </div>
-    {/if}
-    <div class="banner-text">
-      {#if properties.linkText !== null}
-        <div>{properties.text}<span class="link-text">{properties.linkText}</span></div>
-      {:else}
-        <div>{properties.text}</div>
-      {/if}
+<div class="banner" {onclick} {onkeydown} role="button" tabindex="0">
+  {#if icon}
+    <div class="banner-image">
+      <img src={icon} alt="" />
     </div>
-    {#if $$slots.rightContent}
-      <div class="right-content">
-        <slot name="rightContent" />
-      </div>
+  {/if}
+  <div class="banner-text">
+    {#if linkText}
+      <div>{text}<span class="link-text">{linkText}</span></div>
+    {:else}
+      <div>{text}</div>
     {/if}
   </div>
-{/if}
+  {#if rightContent}
+    <div class="right-content">
+      {@render rightContent()}
+    </div>
+  {/if}
+</div>
 
 <style>
   .banner {

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

@@ -1,24 +1,4 @@
-import { SvelteComponent } from "svelte";
 import type { BannerProperties } from './properties';
-declare const __propDef: {
-    props: {
-        properties?: BannerProperties | null;
-    };
-    events: {
-        click: PointerEvent;
-        keydown: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        rightContent: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BannerProps = typeof __propDef.props;
-export type BannerEvents = typeof __propDef.events;
-export type BannerSlots = typeof __propDef.slots;
-export default class Banner extends SvelteComponent<BannerProps, BannerEvents, BannerSlots> {
-}
-export {};
+declare const Banner: import("svelte").Component<BannerProperties, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/Banner/properties.d.ts

@@ -1,5 +1,9 @@
+import type { Snippet } from 'svelte';
 export type BannerProperties = {
-    icon: string | null;
+    icon?: string | null;
     text: string;
-    linkText: string | null;
+    linkText?: string | null;
+    rightContent?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/BrandLoader/BrandLoader.svelte

@@ -1,22 +1,21 @@
-<script context="module">export const prerender = true;
-</script>
+<script lang="ts">
+  import type { BrandLoaderProperties } from './properties';
 
-<script>import { defaultBrandLoaderProperties } from "./properties";
-export let properties = defaultBrandLoaderProperties;
+  let { brandLogoURL, brandText, subText }: BrandLoaderProperties = $props();
 </script>
 
 <div class="background">
   <div class="loader">
-    <img src={properties.brandLogoURL} alt="" />
-    <div class="text">{properties.brandText}</div>
-    {#if properties.subText}
-      <div class="sub-text">{properties.subText}</div>
+    <img src={brandLogoURL} alt="" />
+    <div class="text">{brandText}</div>
+    {#if subText}
+      <div class="sub-text">{subText}</div>
     {/if}
     <div class="lds-ellipsis">
-      <div />
-      <div />
-      <div />
-      <div />
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
     </div>
   </div>
 </div>

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

@@ -1,20 +1,4 @@
-import { SvelteComponent } from "svelte";
-export declare const prerender = true;
 import type { BrandLoaderProperties } from './properties';
-declare const __propDef: {
-    props: {
-        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;
-export type BrandLoaderSlots = typeof __propDef.slots;
-export default class BrandLoader extends SvelteComponent<BrandLoaderProps, BrandLoaderEvents, BrandLoaderSlots> {
-}
-export {};
+declare const BrandLoader: import("svelte").Component<BrandLoaderProperties, {}, "">;
+type BrandLoader = ReturnType<typeof BrandLoader>;
+export default BrandLoader;

package/dist/BrandLoader/properties.d.ts

@@ -1,8 +1,5 @@
 export type BrandLoaderProperties = {
-    fullScreen: boolean;
-    subText: string | null;
     brandLogoURL: string;
     brandText: string;
-    loaderBackgroundImage: string;
+    subText?: string | null;
 };
-export declare const defaultBrandLoaderProperties: BrandLoaderProperties;

package/dist/BrandLoader/properties.js

@@ -1,7 +1 @@
-export const defaultBrandLoaderProperties = {
-    fullScreen: true,
-    subText: null,
-    brandLogoURL: 'https://sdk.breeze.in/gallery/icons/logo.svg',
-    brandText: 'breeze',
-    loaderBackgroundImage: '/images/loader-background.svg'
-};
+export {};

package/dist/Button/Button.svelte

@@ -1,41 +1,52 @@
-<script>import { createEventDispatcher } from "svelte";
-import Loader from "../Loader/Loader.svelte";
-import { defaultButtonProperties } from "./properties";
-export let properties = defaultButtonProperties;
-export let showProgressBar = false;
-const dispatch = createEventDispatcher();
-function handleButtonClick() {
-  if (showProgressBar) {
-    return;
-  }
-  dispatch("click");
-  if (properties.showLoader && properties.loaderType === "ProgressBar") {
-    showProgressBar = true;
+<script lang="ts">
+  import Loader from '../Loader/Loader.svelte';
+  import type { ButtonProperties } from './properties';
+
+  let {
+    text,
+    enable = true,
+    showLoader = false,
+    loaderType,
+    type = 'submit',
+    testId,
+    onclick,
+    onkeyup = () => {},
+    showProgressBar = $bindable(false),
+    icon
+  }: ButtonProperties = $props();
+
+  function handleButtonClick(event: MouseEvent): void {
+    if (showProgressBar) {
+      return;
+    }
+    onclick?.(event);
+    if (showLoader && loaderType === 'ProgressBar') {
+      showProgressBar = true;
+    }
   }
-}
 </script>
 
 <div class="button-container">
   {#if showProgressBar}
-    <div class="button-progress-bar" />
+    <div class="button-progress-bar"></div>
   {/if}
   <button
-    style="
-      --opacity: {properties.enable ? 1 : 0.4};
-      --cursor: {properties.enable ? 'pointer' : 'not-allowed'};"
-    on:click={handleButtonClick}
-    disabled={!(properties.enable && !properties.showLoader)}
-    type={properties.type}
-    data-pw={properties.testId}
+    style:--opacity={enable ? 1 : 0.4}
+    style:--cursor={enable ? 'pointer' : 'not-allowed'}
+    onclick={handleButtonClick}
+    {onkeyup}
+    disabled={!(enable && !showLoader)}
+    {type}
+    data-pw={testId}
   >
-    {#if properties.showLoader && properties.loaderType === 'Circular'}
+    {#if showLoader && loaderType === 'Circular'}
       <div class="button-loader"><Loader /></div>
     {/if}
-    {#if $$slots.icon}
-      <div class="button-icon"><slot name="icon" /></div>
+    {#if icon}
+      <div class="button-icon">{@render icon()}</div>
     {/if}
-    {#if properties.text !== null && properties.text.length > 0}
-      <div class="button-text">{properties.text}</div>
+    {#if text}
+      <div class="button-text">{text}</div>
     {/if}
   </button>
 </div>

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

@@ -1,23 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        properties?: import("./properties").ButtonProperties;
-        showProgressBar?: boolean;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};
+import type { ButtonProperties } from './properties';
+declare const Button: import("svelte").Component<ButtonProperties, {}, "showProgressBar">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Button/properties.d.ts

@@ -1,10 +1,14 @@
+import type { Snippet } from 'svelte';
 export type LoaderType = 'Circular' | 'ProgressBar';
 export type ButtonProperties = {
     text: string;
-    enable: boolean;
-    showLoader: boolean;
-    loaderType: LoaderType | null;
-    type: 'submit' | 'reset' | 'button';
+    enable?: boolean;
+    showProgressBar?: boolean;
+    showLoader?: boolean;
+    loaderType?: LoaderType;
+    type?: 'submit' | 'reset' | 'button';
     testId?: string;
+    onclick?: (event: MouseEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+    icon?: Snippet;
 };
-export declare const defaultButtonProperties: ButtonProperties;

package/dist/Button/properties.js

@@ -1,7 +1 @@
-export const defaultButtonProperties = {
-    text: 'click',
-    enable: true,
-    showLoader: false,
-    loaderType: null,
-    type: 'submit'
-};
+export {};