@juspay/svelte-ui-components 2.10.0 → 2.11.0

package/dist/Badge/Badge.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import type { BadgeProperties } from './properties';
 
-  let { image, value }: BadgeProperties = $props();
+  let { image, value, classes }: BadgeProperties = $props();
 </script>
 
-<div class="badge-icon">
+<div class="badge-icon {classes ?? ''}">
   <div class="badge-wrap">
     <img class="icon-img" src={image} alt="" />
     <div class="badge">{value}</div>

package/dist/Badge/properties.d.ts

@@ -1,4 +1,5 @@
 export type BadgeProperties = {
     image: string;
     value: string;
+    classes?: string;
 };

package/dist/Banner/Banner.svelte

@@ -1,74 +1,158 @@
 <script lang="ts">
   import type { BannerProperties } from './properties';
+  import { slide } from 'svelte/transition';
+  import Button from '../Button/Button.svelte';
+  import closeSvg from '../assets/close.svg?raw';
 
-  let { icon, text, linkText, rightContent, onclick, onkeydown }: BannerProperties = $props();
+  let {
+    text,
+    icon,
+    linkText,
+    dismissible = false,
+    visible = $bindable(true),
+    testId,
+    rightContent,
+    dismissIcon,
+    onclick,
+    ondismiss,
+    classes
+  }: BannerProperties = $props();
+
+  let interactive = $derived(typeof onclick === 'function');
+
+  function handleClick(event: MouseEvent): void {
+    onclick?.(event);
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (event.currentTarget instanceof HTMLElement) {
+        event.currentTarget.click();
+      }
+    }
+  }
+
+  function handleDismiss(event: MouseEvent): void {
+    event.stopPropagation();
+    visible = false;
+    ondismiss?.();
+  }
 </script>
 
-<div class="banner" {onclick} {onkeydown} role="button" tabindex="0">
-  {#if icon}
-    <div class="banner-image">
-      <img src={icon} alt="" />
+{#if visible}
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    class="banner {classes ?? ''}"
+    onclick={interactive ? handleClick : null}
+    onkeydown={interactive ? handleKeydown : null}
+    role={interactive ? 'button' : null}
+    tabindex={interactive ? 0 : null}
+    data-pw={typeof testId === 'string' ? testId : null}
+    transition:slide={{ duration: 300 }}
+  >
+    {#if typeof icon === 'function'}
+      <div class="banner-icon">
+        {@render icon()}
+      </div>
+    {/if}
+    <div class="banner-text">
+      {text}
+      {#if typeof linkText === 'string' && linkText.length > 0}
+        <span class="banner-link-text">{linkText}</span>
+      {/if}
     </div>
-  {/if}
-  <div class="banner-text">
-    {#if linkText}
-      <div>{text}<span class="link-text">{linkText}</span></div>
-    {:else}
-      <div>{text}</div>
+    {#if typeof rightContent === 'function'}
+      <div class="banner-right">
+        {@render rightContent()}
+      </div>
+    {/if}
+    {#if dismissible}
+      <div class="banner-dismiss">
+        <Button
+          onclick={handleDismiss}
+          ariaLabel="Dismiss"
+          {...typeof testId === 'string' ? { testId: `${testId}-dismiss` } : {}}
+        >
+          {#if typeof dismissIcon === 'function'}
+            {@render dismissIcon()}
+          {:else}
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html closeSvg}
+          {/if}
+        </Button>
+      </div>
     {/if}
   </div>
-  {#if rightContent}
-    <div class="right-content">
-      {@render rightContent()}
-    </div>
-  {/if}
-</div>
+{/if}
 
 <style>
   .banner {
-    position: var(--banner-position, sticky);
-    top: var(--banner-top, 0px);
-    display: var(--banner-display, flex);
-    align-items: var(--banner-align-items, center);
-    background-color: var(--banner-bg-color, #637c9529);
+    display: flex;
+    align-items: center;
     width: var(--banner-width, 100%);
-    height: var(--banner-height, 37px);
-    padding: var(--banner-padding, 10px 12px, 10px, 12px);
+    height: var(--banner-height);
+    padding: var(--banner-padding, 10px 12px);
     gap: var(--banner-gap, 8px);
     justify-content: var(--banner-justify-content, center);
+    background-color: var(--banner-background, #f0f4f8);
+    color: var(--banner-color, #637c95);
+    font-family: var(--banner-font-family);
+    font-size: var(--banner-font-size, 14px);
+    font-weight: var(--banner-font-weight, 500);
+    line-height: var(--banner-line-height, 1.3);
+    border-bottom: var(--banner-border-bottom, none);
     cursor: var(--banner-cursor, pointer);
+    position: var(--banner-position, sticky);
+    top: var(--banner-top, 0);
+    z-index: var(--banner-z-index, 100);
+    box-sizing: border-box;
   }
 
-  .banner-image {
-    color: var(--banner-img-color, #637c95);
-    width: var(--banner-img-width, 18px);
-    height: var(--banner-img-height, 11.69px);
-    margin-bottom: var(--banner-img-margin-bottom, 6px);
-    align-items: var(--banner-image-align-items, center);
+  .banner-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--banner-icon-color, currentColor);
+  }
+
+  .banner-icon :global(svg) {
+    width: var(--banner-icon-size, 18px);
+    height: var(--banner-icon-size, 18px);
   }
 
   .banner-text {
-    flex: var(--banner-text-flex);
-    order: var(--banner-text-order);
-    size: var(--banner-text-size, 14px);
-    font-family: var(--banner-font-family, Euclid Circular A);
-    font-style: var(--banner-font-style, normal);
-    color: var(--banner-text-color, #637c95);
-    font-size: var(--banner-font-size, 14px);
-    line-height: var(--banner-line-height, 17.75px);
-    font-weight: var(--banner-font-weight, 500);
-    overflow: var(--banner-overflow, hidden);
-    text-overflow: var(--banner-text-overflow, ellipsis);
-    white-space: var(--banner-text-white-space, nowrap);
-    align-items: var(--banner-text-align-items, center);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .banner-link-text {
+    color: var(--banner-link-color, #0099ff);
+    margin-left: var(--banner-link-gap, 4px);
+  }
+
+  .banner-right {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
   }
 
-  .link-text {
-    color: var(--banner-linktext-color, #0099ff);
+  .banner-dismiss {
+    --button-color: transparent;
+    --button-border: none;
+    --button-padding: 2px;
+    --button-border-radius: var(--banner-dismiss-border-radius, 4px);
+    --button-text-color: var(--banner-dismiss-color, currentColor);
+    --button-hover-color: var(--banner-dismiss-hover-background, rgba(0, 0, 0, 0.1));
+    --cursor: inherit;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
   }
 
-  .right-content {
-    order: var(--banner-right-content-order);
-    display: var(--banner-right-content-display, flex);
+  .banner-dismiss :global(svg) {
+    width: var(--banner-dismiss-size, 14px);
+    height: var(--banner-dismiss-size, 14px);
   }
 </style>

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

@@ -1,4 +1,4 @@
 import type { BannerProperties } from './properties';
-declare const Banner: import("svelte").Component<BannerProperties, {}, "">;
+declare const Banner: import("svelte").Component<BannerProperties, {}, "visible">;
 type Banner = ReturnType<typeof Banner>;
 export default Banner;

package/dist/Banner/properties.d.ts

@@ -4,11 +4,16 @@ export type MandatoryBannerProperties = {
     text: string;
 };
 export type OptionalBannerProperties = {
-    icon?: string | null;
-    linkText?: string | null;
+    icon?: Snippet;
+    linkText?: string;
+    dismissible?: boolean;
+    visible?: boolean;
+    testId?: string;
     rightContent?: Snippet;
+    dismissIcon?: Snippet;
+    classes?: string;
 };
 export type BannerEventProperties = {
     onclick?: (event: MouseEvent) => void;
-    onkeydown?: (event: KeyboardEvent) => void;
+    ondismiss?: () => void;
 };

package/dist/Book/Book.svelte

@@ -0,0 +1,281 @@
+<script lang="ts">
+  import type { BookProperties } from './properties';
+  import chevronLeftLgSvg from '../assets/chevron-left-lg.svg?raw';
+  import chevronRightLgSvg from '../assets/chevron-right-lg.svg?raw';
+  import Button from '../Button/Button.svelte';
+
+  let {
+    pages,
+    currentPage = $bindable(0),
+    transition = 'slide',
+    showNavigation = true,
+    showPageIndicator = true,
+    enableSwipe = false,
+    testId,
+    previousIcon,
+    nextIcon,
+    onpagechange,
+    classes
+  }: BookProperties = $props();
+
+  let startX = 0;
+  let isDragging = false;
+
+  function goToPage(page: number): void {
+    if (page < 0 || page >= pages.length || page === currentPage) {
+      return;
+    }
+    currentPage = page;
+    onpagechange?.(currentPage);
+  }
+
+  function previousPage(): void {
+    goToPage(currentPage - 1);
+  }
+
+  function nextPage(): void {
+    goToPage(currentPage + 1);
+  }
+
+  function handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      previousPage();
+    } else if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      nextPage();
+    }
+  }
+
+  function handleTouchStart(event: TouchEvent): void {
+    if (!enableSwipe) {
+      return;
+    }
+    const touch = event.touches.item(0);
+    if (touch !== null) {
+      startX = touch.clientX;
+      isDragging = true;
+    }
+  }
+
+  function handleTouchEnd(event: TouchEvent): void {
+    if (!enableSwipe || !isDragging) {
+      return;
+    }
+    isDragging = false;
+    const changedTouch = event.changedTouches.item(0);
+    if (changedTouch !== null) {
+      const diff = startX - changedTouch.clientX;
+      if (diff > 20) {
+        nextPage();
+      } else if (diff < -20) {
+        previousPage();
+      }
+    }
+  }
+
+  function handleMouseDown(event: MouseEvent): void {
+    if (!enableSwipe) {
+      return;
+    }
+    startX = event.clientX;
+    isDragging = true;
+  }
+
+  function handleMouseUp(event: MouseEvent): void {
+    if (!enableSwipe || !isDragging) {
+      return;
+    }
+    isDragging = false;
+    const diff = startX - event.clientX;
+    if (diff > 20) {
+      nextPage();
+    } else if (diff < -20) {
+      previousPage();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  class="book {classes ?? ''}"
+  data-pw={testId}
+  onkeydown={handleKeyDown}
+  ontouchstart={handleTouchStart}
+  ontouchend={handleTouchEnd}
+  onmousedown={handleMouseDown}
+  onmouseup={handleMouseUp}
+  role="region"
+  tabindex="0"
+>
+  <div class="book-viewport">
+    {#if showNavigation}
+      <div class="nav-button nav-prev" class:nav-disabled={currentPage === 0}>
+        <Button onclick={previousPage} disabled={currentPage === 0} ariaLabel="Previous page">
+          {#if typeof previousIcon === 'function'}
+            {@render previousIcon()}
+          {:else}
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html chevronLeftLgSvg}
+          {/if}
+        </Button>
+      </div>
+    {/if}
+
+    <div class="pages-container">
+      {#each pages as page, index (index)}
+        {#if transition === 'none'}
+          {#if index === currentPage}
+            <div class="page">
+              {@render page.content()}
+            </div>
+          {/if}
+        {:else if transition === 'fade'}
+          <div class="page page-fade" class:page-active={index === currentPage}>
+            {@render page.content()}
+          </div>
+        {:else}
+          <div class="page page-slide" style:transform="translateX({(index - currentPage) * 100}%)">
+            {@render page.content()}
+          </div>
+        {/if}
+      {/each}
+    </div>
+
+    {#if showNavigation}
+      <div class="nav-button nav-next" class:nav-disabled={currentPage === pages.length - 1}>
+        <Button
+          onclick={nextPage}
+          disabled={currentPage === pages.length - 1}
+          ariaLabel="Next page"
+        >
+          {#if typeof nextIcon === 'function'}
+            {@render nextIcon()}
+          {:else}
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html chevronRightLgSvg}
+          {/if}
+        </Button>
+      </div>
+    {/if}
+  </div>
+
+  {#if showPageIndicator}
+    <div class="page-indicator">
+      {#each pages as _, index (index)}
+        <button
+          class="dot"
+          class:dot-active={index === currentPage}
+          onclick={() => goToPage(index)}
+          aria-label="Go to page {index + 1}"
+        ></button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .book {
+    width: var(--book-width, 100%);
+    background-color: var(--book-background, #ffffff);
+    border-radius: var(--book-border-radius, 8px);
+    border: var(--book-border, 1px solid #e0e0e0);
+    outline: none;
+  }
+
+  .book-viewport {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .pages-container {
+    position: relative;
+    width: 100%;
+    height: var(--book-height, 400px);
+    overflow: var(--book-overflow, hidden);
+  }
+
+  .page {
+    width: 100%;
+    height: 100%;
+  }
+
+  .page-slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: transform var(--book-transition-duration, 0.3s) ease;
+  }
+
+  .page-fade {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity var(--book-transition-duration, 0.3s) ease;
+    pointer-events: none;
+  }
+
+  .page-fade.page-active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .nav-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    --button-width: var(--book-nav-size, 36px);
+    --button-height: var(--book-nav-size, 36px);
+    --button-min-width: var(--book-nav-size, 36px);
+    --button-background: var(--book-nav-background, rgba(0, 0, 0, 0.05));
+    --button-border: none;
+    --button-border-radius: var(--book-nav-border-radius, 50%);
+    --button-padding: 0;
+    --button-color: var(--book-nav-color, #333333);
+    --button-hover-background: var(--book-nav-hover-background, rgba(0, 0, 0, 0.1));
+  }
+
+  .nav-disabled {
+    opacity: var(--book-nav-disabled-opacity, 0.3);
+  }
+
+  .nav-button :global(svg) {
+    width: 18px;
+    height: 18px;
+  }
+
+  .nav-prev {
+    margin-right: 4px;
+  }
+
+  .nav-next {
+    margin-left: 4px;
+  }
+
+  .page-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--book-dot-gap, 8px);
+    padding: var(--book-indicator-padding, 12px 0);
+  }
+
+  .dot {
+    width: var(--book-dot-size, 8px);
+    height: var(--book-dot-size, 8px);
+    border-radius: var(--book-dot-border-radius, 50%);
+    background-color: var(--book-dot-color, #cccccc);
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .dot-active {
+    background-color: var(--book-dot-active-color, #333333);
+  }
+</style>

package/dist/Book/Book.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BookProperties } from './properties';
+declare const Book: import("svelte").Component<BookProperties, {}, "currentPage">;
+type Book = ReturnType<typeof Book>;
+export default Book;

package/dist/Book/properties.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+export type BookPage = {
+    content: Snippet;
+    title?: string;
+};
+export type BookTransition = 'slide' | 'fade' | 'none';
+export type BookProperties = MandatoryBookProperties & OptionalBookProperties & BookEventProperties;
+export type MandatoryBookProperties = {
+    pages: BookPage[];
+};
+export type OptionalBookProperties = {
+    currentPage?: number;
+    transition?: BookTransition;
+    showNavigation?: boolean;
+    showPageIndicator?: boolean;
+    enableSwipe?: boolean;
+    testId?: string;
+    previousIcon?: Snippet;
+    nextIcon?: Snippet;
+    classes?: string;
+};
+export type BookEventProperties = {
+    onpagechange?: (page: number) => void;
+};

package/dist/Book/properties.js

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

package/dist/BrandLoader/BrandLoader.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import type { BrandLoaderProperties } from './properties';
 
-  let { brandLogoURL, brandText, subText }: BrandLoaderProperties = $props();
+  let { brandLogoURL, brandText, subText, classes }: BrandLoaderProperties = $props();
 </script>
 
-<div class="background">
+<div class="background {classes ?? ''}">
   <div class="loader">
     <img src={brandLogoURL} alt="" />
     <div class="text">{brandText}</div>
-    {#if subText}
+    {#if typeof subText === 'string' && subText.length > 0}
       <div class="sub-text">{subText}</div>
     {/if}
     <div class="lds-ellipsis">

package/dist/BrandLoader/properties.d.ts

@@ -2,4 +2,5 @@ export type BrandLoaderProperties = {
     brandLogoURL: string;
     brandText: string;
     subText?: string | null;
+    classes?: string;
 };