@juspay/svelte-ui-components 2.9.0 → 2.11.0

package/dist/Menu/Menu.svelte

@@ -0,0 +1,349 @@
+<script lang="ts">
+  import { tick, onMount } from 'svelte';
+  import { SvelteMap } from 'svelte/reactivity';
+  import Img from '../Img/Img.svelte';
+  import type { MenuProperties, MenuItem } from './properties';
+
+  let {
+    items,
+    open = $bindable(false),
+    testId,
+    trigger,
+    onselect,
+    onopen,
+    onclose,
+    classes
+  }: MenuProperties = $props();
+
+  let menuContainerEl: HTMLDivElement | null = $state(null);
+  let menuListEl: HTMLDivElement | null = $state(null);
+  let triggerEl: HTMLDivElement | null = $state(null);
+  let focusedIndex: number = $state(-1);
+  let typeaheadQuery: string = $state('');
+  let typeaheadTimer: ReturnType<typeof setTimeout> | null = $state(null);
+
+  let selectableItems: MenuItem[] = $derived(
+    items.filter((item) => item.separator !== true && item.disabled !== true)
+  );
+
+  let selectableIndexMap: SvelteMap<MenuItem, number> = $derived(
+    new SvelteMap(selectableItems.map((item, i) => [item, i]))
+  );
+
+  function toggle() {
+    if (open) {
+      close();
+    } else {
+      openMenu();
+    }
+  }
+
+  function openMenu(startIndex: number = 0) {
+    open = true;
+    focusedIndex = startIndex;
+    onopen?.();
+    tick().then(() => {
+      focusItem(startIndex);
+    });
+  }
+
+  function close() {
+    open = false;
+    focusedIndex = -1;
+    typeaheadQuery = '';
+    onclose?.();
+    if (triggerEl !== null) {
+      triggerEl.focus({ preventScroll: true });
+    }
+  }
+
+  function selectItem(item: MenuItem) {
+    if (item.disabled === true) {
+      return;
+    }
+    onselect?.(item);
+    close();
+  }
+
+  function focusItem(index: number) {
+    if (menuListEl === null) {
+      return;
+    }
+    const focusableItems = menuListEl.querySelectorAll(
+      '[role="menuitem"]:not([aria-disabled="true"])'
+    );
+    const item = focusableItems.item(index);
+    if (index >= 0 && index < focusableItems.length && item instanceof HTMLElement) {
+      item.focus();
+    }
+  }
+
+  function getSelectableIndex(item: MenuItem): number {
+    return selectableIndexMap.get(item) ?? -1;
+  }
+
+  function handleTriggerKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      openMenu();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      openMenu(selectableItems.length - 1);
+    }
+  }
+
+  function handleMenuKeydown(event: KeyboardEvent) {
+    switch (event.key) {
+      case 'ArrowDown': {
+        event.preventDefault();
+        const next = focusedIndex + 1;
+        focusedIndex = next >= selectableItems.length ? 0 : next;
+        focusItem(focusedIndex);
+        break;
+      }
+      case 'ArrowUp': {
+        event.preventDefault();
+        const prev = focusedIndex - 1;
+        focusedIndex = prev < 0 ? selectableItems.length - 1 : prev;
+        focusItem(focusedIndex);
+        break;
+      }
+      case 'Home': {
+        event.preventDefault();
+        focusedIndex = 0;
+        focusItem(focusedIndex);
+        break;
+      }
+      case 'End': {
+        event.preventDefault();
+        focusedIndex = selectableItems.length - 1;
+        focusItem(focusedIndex);
+        break;
+      }
+      case 'Enter':
+      case ' ': {
+        event.preventDefault();
+        const selected = selectableItems.at(focusedIndex);
+        if (focusedIndex >= 0 && typeof selected !== 'undefined') {
+          selectItem(selected);
+        }
+        break;
+      }
+      case 'Escape': {
+        event.preventDefault();
+        close();
+        break;
+      }
+      case 'Tab': {
+        close();
+        break;
+      }
+      default: {
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+          event.preventDefault();
+          handleTypeahead(event.key);
+        }
+        break;
+      }
+    }
+  }
+
+  function handleTypeahead(char: string) {
+    if (typeaheadTimer !== null) {
+      clearTimeout(typeaheadTimer);
+    }
+    typeaheadQuery += char.toLowerCase();
+    typeaheadTimer = setTimeout(() => {
+      typeaheadQuery = '';
+    }, 500);
+
+    const matchIndex = selectableItems.findIndex((item) =>
+      item.label.toLowerCase().startsWith(typeaheadQuery)
+    );
+    if (matchIndex >= 0) {
+      focusedIndex = matchIndex;
+      focusItem(focusedIndex);
+    }
+  }
+
+  function handleClickOutside(event: Event) {
+    if (
+      open &&
+      event.target instanceof Node &&
+      menuContainerEl !== null &&
+      !menuContainerEl.contains(event.target)
+    ) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      if (typeaheadTimer !== null) {
+        clearTimeout(typeaheadTimer);
+      }
+    };
+  });
+</script>
+
+<div
+  class="menu-container {classes ?? ''}"
+  bind:this={menuContainerEl}
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  <div
+    class="menu-trigger"
+    bind:this={triggerEl}
+    onclick={toggle}
+    onkeydown={handleTriggerKeydown}
+    role="button"
+    tabindex="0"
+    aria-haspopup="menu"
+    aria-expanded={open}
+  >
+    {#if typeof trigger === 'function'}
+      {@render trigger()}
+    {/if}
+  </div>
+
+  {#if open}
+    <div
+      class="menu-dropdown"
+      bind:this={menuListEl}
+      role="menu"
+      tabindex="-1"
+      onkeydown={handleMenuKeydown}
+    >
+      {#each items as item (item.value)}
+        {#if item.separator === true}
+          <div class="menu-separator" role="separator"></div>
+        {:else}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <div
+            class="menu-item"
+            class:menu-item-danger={item.danger === true}
+            class:menu-item-disabled={item.disabled === true}
+            role="menuitem"
+            tabindex={item.disabled === true ? -1 : 0}
+            aria-disabled={item.disabled === true ? 'true' : null}
+            onclick={() => selectItem(item)}
+            onfocus={() => {
+              if (item.disabled !== true) {
+                focusedIndex = getSelectableIndex(item);
+              }
+            }}
+            data-pw={typeof testId === 'string' ? `${testId}-item-${item.value}` : null}
+          >
+            {#if typeof item.icon === 'string'}
+              <span class="menu-item-icon">
+                <Img src={item.icon} alt="" />
+              </span>
+            {/if}
+            <span class="menu-item-label">{item.label}</span>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .menu-container {
+    position: var(--menu-container-position, relative);
+    display: var(--menu-container-display, inline-block);
+    font-family: var(--menu-font-family, inherit);
+    font-size: var(--menu-font-size, 14px);
+  }
+
+  .menu-trigger {
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .menu-trigger:focus {
+    outline: var(--menu-trigger-focus-outline, none);
+  }
+
+  .menu-dropdown {
+    position: absolute;
+    z-index: var(--menu-z-index, 10);
+    top: var(--menu-dropdown-top, 100%);
+    left: var(--menu-dropdown-left, 0);
+    background-color: var(--menu-background-color, #ffffff);
+    border: var(--menu-border, 1px solid #e0e0e0);
+    border-radius: var(--menu-border-radius, 6px);
+    box-shadow: var(--menu-box-shadow, 0px 4px 16px rgba(0, 0, 0, 0.12));
+    min-width: var(--menu-min-width, 160px);
+    max-height: var(--menu-max-height, 240px);
+    overflow-y: auto;
+    padding: var(--menu-padding, 4px 0);
+    margin: var(--menu-margin, 4px 0);
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    padding: var(--menu-item-padding, 8px 12px);
+    cursor: pointer;
+    color: var(--menu-item-color, #333333);
+    background-color: var(--menu-item-background-color, transparent);
+    gap: var(--menu-item-gap, 8px);
+    white-space: var(--menu-item-white-space, nowrap);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .menu-item:hover {
+    background-color: var(--menu-item-hover-background-color, #f5f5f5);
+    color: var(--menu-item-hover-color, var(--menu-item-color, #333333));
+  }
+
+  .menu-item:focus {
+    background-color: var(--menu-item-focus-background-color, #f0f0f0);
+    outline: var(--menu-item-focus-outline, none);
+  }
+
+  .menu-item-danger {
+    color: var(--menu-item-danger-color, #dc3545);
+  }
+
+  .menu-item-danger:hover {
+    background-color: var(--menu-item-danger-hover-background-color, #fff0f0);
+    color: var(--menu-item-danger-hover-color, var(--menu-item-danger-color, #dc3545));
+  }
+
+  .menu-item-danger:focus {
+    background-color: var(--menu-item-danger-focus-background-color, #fff0f0);
+  }
+
+  .menu-item-disabled {
+    opacity: var(--menu-item-disabled-opacity, 0.4);
+    cursor: var(--menu-item-disabled-cursor, not-allowed);
+    pointer-events: none;
+  }
+
+  .menu-separator {
+    height: var(--menu-separator-height, 1px);
+    background-color: var(--menu-separator-color, #e0e0e0);
+    margin: var(--menu-separator-margin, 4px 0);
+  }
+
+  .menu-item-icon {
+    display: inline-flex;
+    height: var(--menu-item-icon-height, 16px);
+    width: var(--menu-item-icon-width, 16px);
+    flex-shrink: 0;
+  }
+
+  .menu-item-icon :global(img) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .menu-item-label {
+    flex: 1;
+    font-weight: var(--menu-item-font-weight, 400);
+    line-height: var(--menu-item-line-height, 1.4);
+  }
+</style>

package/dist/Menu/Menu.svelte.d.ts

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

package/dist/Menu/properties.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+export type MenuItem = {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+};
+export type MenuProperties = MandatoryMenuProperties & OptionalMenuProperties & MenuEventProperties;
+export type MandatoryMenuProperties = {
+    items: MenuItem[];
+};
+export type OptionalMenuProperties = {
+    open?: boolean;
+    testId?: string;
+    trigger?: Snippet;
+    classes?: string;
+};
+export type MenuEventProperties = {
+    onselect?: (item: MenuItem) => void;
+    onopen?: () => void;
+    onclose?: () => void;
+};

package/dist/Menu/properties.js

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

package/dist/Modal/Modal.svelte

@@ -6,7 +6,7 @@
   import { createDebouncer } from '../utils';
   import Button from '../Button/Button.svelte';
 
-  let overlayDiv: HTMLDivElement | undefined = $state();
+  let overlayDiv: HTMLDivElement | null = $state(null);
   let backPressed = false;
 
   let {
@@ -16,7 +16,7 @@
     supportHardwareBackPress = false,
     enableTransition = true,
     transitionType = 'ALL',
-    header = { leftImage: undefined, rightImage: undefined, text: undefined },
+    header = {},
     footer,
     debounceTime = 700,
     leftImageTestId,
@@ -29,7 +29,8 @@
     onprimaryButtonClick,
     onsecondaryButtonClick,
     onoverlayClick,
-    onkeydown
+    onkeydown,
+    classes
   }: ModalProperties = $props();
 
   const debounce = createDebouncer(debounceTime);
@@ -94,11 +95,11 @@
 
 <svelte:window onkeydown={handleKeyDown} />
 
-{#if content}
+{#if typeof content === 'function'}
   <OverlayAnimation>
     <div
       bind:this={overlayDiv}
-      class="modal {align} {showOverlay ? 'overlay-active' : 'overlay-inactive'}"
+      class="modal {align} {showOverlay ? 'overlay-active' : 'overlay-inactive'} {classes ?? ''}"
       onclick={handleOverlayClick}
       {onkeydown}
       role="button"
@@ -107,7 +108,7 @@
     >
       <ModalAnimation enable={enableTransition} {align} {transitionType}>
         <div class="modal-content {size}">
-          {#if header?.leftImage || header?.text || header?.rightImage}
+          {#if (typeof header?.leftImage === 'string' && header.leftImage.length > 0) || (typeof header?.text === 'string' && header.text.length > 0) || (typeof header?.rightImage === 'string' && header.rightImage.length > 0)}
             <div class="header">
               {#if header.leftImage}
                 <div
@@ -141,11 +142,11 @@
           <div class="slot-content">
             {@render content?.()}
           </div>
-          {#if footerSnippet}
+          {#if typeof footerSnippet === 'function'}
             <div class="footer-content">
               {@render footerSnippet?.()}
             </div>
-          {:else if footer?.primaryButton || footer?.secondaryButton}
+          {:else if typeof footer?.primaryButton === 'object' || typeof footer?.secondaryButton === 'object'}
             <div class="footer-content">
               <div class="footer-action-buttons">
                 {#if footer.secondaryButton}
@@ -268,7 +269,7 @@
   .footer-action-buttons {
     display: flex;
     gap: var(--modal-footer-gap, 0px);
-    width: var(--modal-footer-action-buttons-width, auto);
+    width: var(--modal-footer-action-buttons-width, fit-content);
   }
 
   .footer-secondary-button {

package/dist/Modal/properties.d.ts

@@ -26,6 +26,7 @@ export type ModalProperties = ModalEventProperties & {
     testId?: string;
     content?: Snippet;
     footerSnippet?: Snippet;
+    classes?: string;
 };
 export type ModalEventProperties = {
     onclose?: () => void;

package/dist/Pagination/Pagination.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import type { PaginationProperties } from './properties';
+
+  let {
+    totalPages,
+    currentPage = $bindable(1),
+    siblingCount = 1,
+    disabled = false,
+    testId,
+    onchange,
+    classes
+  }: PaginationProperties = $props();
+
+  function generatePages(total: number, current: number, siblings: number): (number | '...')[] {
+    const pages: (number | '...')[] = [];
+    pages.push(1);
+
+    const leftSibling = Math.max(2, current - siblings);
+    const rightSibling = Math.min(total - 1, current + siblings);
+
+    if (leftSibling > 2) {
+      pages.push('...');
+    }
+
+    for (let i = leftSibling; i <= rightSibling; i++) {
+      pages.push(i);
+    }
+
+    if (rightSibling < total - 1) {
+      pages.push('...');
+    }
+
+    if (total > 1) {
+      pages.push(total);
+    }
+
+    return pages;
+  }
+
+  let pages = $derived(generatePages(totalPages, currentPage, siblingCount));
+
+  function goToPage(page: number): void {
+    if (disabled || page < 1 || page > totalPages || page === currentPage) {
+      return;
+    }
+    currentPage = page;
+    onchange?.(page);
+  }
+</script>
+
+<nav
+  class="pagination {classes ?? ''}"
+  class:disabled
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  <button
+    class="page-button prev-button"
+    disabled={disabled || currentPage <= 1}
+    onclick={() => goToPage(currentPage - 1)}
+    aria-label="Previous page"
+  >
+    &#8249;
+  </button>
+
+  {#each pages as page, i (i)}
+    {#if page === '...'}
+      <span class="ellipsis">&#8230;</span>
+    {:else}
+      <button
+        class="page-button"
+        class:active={page === currentPage}
+        {disabled}
+        onclick={() => goToPage(page)}
+        aria-label="Page {page}"
+        aria-current={page === currentPage ? 'page' : null}
+      >
+        {page}
+      </button>
+    {/if}
+  {/each}
+
+  <button
+    class="page-button next-button"
+    disabled={disabled || currentPage >= totalPages}
+    onclick={() => goToPage(currentPage + 1)}
+    aria-label="Next page"
+  >
+    &#8250;
+  </button>
+</nav>
+
+<style>
+  .pagination {
+    display: var(--pagination-display, flex);
+    gap: var(--pagination-gap, 4px);
+    align-items: var(--pagination-align-items, center);
+  }
+
+  .pagination.disabled {
+    opacity: var(--pagination-disabled-opacity, 0.5);
+    cursor: var(--pagination-disabled-cursor, not-allowed);
+  }
+
+  .page-button {
+    padding: var(--pagination-button-padding, 6px 10px);
+    font-size: var(--pagination-button-font-size, 14px);
+    font-weight: var(--pagination-button-font-weight, 400);
+    font-family: var(--pagination-button-font-family, inherit);
+    color: var(--pagination-button-color, #3a4550);
+    background: var(--pagination-button-background, transparent);
+    border: var(--pagination-button-border, 1px solid #d1d5db);
+    border-radius: var(--pagination-button-border-radius, 4px);
+    cursor: var(--pagination-button-cursor, pointer);
+    min-width: var(--pagination-button-min-width, 36px);
+    height: var(--pagination-button-height, 36px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--pagination-transition, background 0.15s ease, color 0.15s ease);
+  }
+
+  .page-button:hover:not(:disabled):not(.active) {
+    color: var(--pagination-button-hover-color, #111827);
+    background: var(--pagination-button-hover-background, #f3f4f6);
+  }
+
+  .page-button.active {
+    color: var(--pagination-active-color, #ffffff);
+    background: var(--pagination-active-background, #3a4550);
+    border: var(--pagination-active-border, 1px solid #3a4550);
+    font-weight: var(--pagination-active-font-weight, 600);
+  }
+
+  .page-button:disabled {
+    opacity: var(--pagination-disabled-opacity, 0.5);
+    cursor: var(--pagination-disabled-cursor, not-allowed);
+  }
+
+  .pagination.disabled .page-button {
+    opacity: 1;
+  }
+
+  .ellipsis {
+    color: var(--pagination-ellipsis-color, #6b7280);
+    font-size: var(--pagination-ellipsis-font-size, 14px);
+    min-width: var(--pagination-button-min-width, 36px);
+    height: var(--pagination-button-height, 36px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

package/dist/Pagination/Pagination.svelte.d.ts

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

package/dist/Pagination/properties.d.ts

@@ -0,0 +1,14 @@
+export type PaginationProperties = MandatoryPaginationProperties & OptionalPaginationProperties & PaginationEventProperties;
+export type MandatoryPaginationProperties = {
+    totalPages: number;
+};
+export type OptionalPaginationProperties = {
+    currentPage?: number;
+    siblingCount?: number;
+    disabled?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type PaginationEventProperties = {
+    onchange?: (page: number) => void;
+};

package/dist/Pagination/properties.js

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