@juspay/svelte-ui-components 2.9.0 → 2.11.0

package/dist/Snippet/Snippet.svelte.d.ts

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

package/dist/Snippet/properties.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export type SnippetProperties = MandatorySnippetProperties & OptionalSnippetProperties & SnippetEventProperties;
+export type MandatorySnippetProperties = {
+    text: string;
+};
+export type OptionalSnippetProperties = {
+    prompt?: string;
+    showCopyButton?: boolean;
+    testId?: string;
+    copyIcon?: Snippet;
+    classes?: string;
+};
+export type SnippetEventProperties = {
+    oncopy?: () => void;
+};

package/dist/Snippet/properties.js

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

package/dist/SplitButton/SplitButton.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { SplitButtonProperties } from './properties';
+  import type { MenuItem } from '../Menu/properties';
+  import Button from '../Button/Button.svelte';
+  import Menu from '../Menu/Menu.svelte';
+  import chevronDownSmSvg from '../assets/chevron-down-sm.svg?raw';
+
+  let {
+    text,
+    items,
+    disabled = false,
+    testId,
+    dropdownIcon,
+    classes,
+    onclick,
+    onselect
+  }: SplitButtonProperties = $props();
+
+  let menuOpen = $state(false);
+
+  function handlePrimaryClick(event: MouseEvent): void {
+    if (disabled) {
+      return;
+    }
+    onclick?.(event);
+  }
+
+  function handleMenuSelect(item: MenuItem): void {
+    onselect?.(item);
+  }
+</script>
+
+<div
+  class="split-button {classes ?? ''}"
+  class:disabled
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  <div class="split-button-primary">
+    <Button {text} onclick={handlePrimaryClick} {disabled} />
+  </div>
+  <div class="split-button-trigger">
+    <Menu {items} bind:open={menuOpen} onselect={handleMenuSelect}>
+      {#snippet trigger()}
+        <span class="split-button-arrow">
+          {#if typeof dropdownIcon === 'function'}
+            {@render dropdownIcon()}
+          {:else}
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html chevronDownSmSvg}
+          {/if}
+        </span>
+      {/snippet}
+    </Menu>
+  </div>
+</div>
+
+<style>
+  .split-button {
+    display: inline-flex;
+    position: relative;
+    gap: var(--split-button-gap, 0px);
+  }
+
+  .split-button.disabled .split-button-trigger {
+    pointer-events: none;
+  }
+
+  .split-button-primary {
+    --button-color: var(--split-button-primary-background, #3a4550);
+    --button-text-color: var(--split-button-primary-color, white);
+    --button-padding: var(--split-button-primary-padding, 8px 16px);
+    --button-font-size: var(--split-button-primary-font-size, 14px);
+    --button-font-weight: var(--split-button-primary-font-weight, 500);
+    --button-font-family: var(--split-button-primary-font-family);
+    --button-border: var(--split-button-primary-border, none);
+    --button-border-radius: var(--split-button-primary-border-radius, 4px 0 0 4px);
+    --button-hover-color: var(
+      --split-button-primary-hover-background,
+      var(--split-button-primary-background, #3a4550)
+    );
+    --button-hover-text-color: var(
+      --split-button-primary-hover-color,
+      var(--split-button-primary-color, white)
+    );
+    --disabled-opacity: var(--split-button-disabled-opacity, 0.4);
+    --disabled-cursor: var(--split-button-disabled-cursor, not-allowed);
+    display: flex;
+  }
+
+  .split-button-trigger {
+    --menu-container-position: static;
+    --menu-container-display: flex;
+    --menu-trigger-focus-outline: none;
+    --menu-dropdown-left: 0;
+    --menu-min-width: 100%;
+    border-left: var(--split-button-trigger-separator, 1px solid rgba(255, 255, 255, 0.3));
+    display: flex;
+    align-items: stretch;
+    background-color: var(--split-button-trigger-background, #3a4550);
+    border-radius: var(--split-button-trigger-border-radius, 0 4px 4px 0);
+    color: var(--split-button-trigger-color, white);
+    cursor: pointer;
+  }
+
+  .split-button.disabled .split-button-trigger {
+    opacity: var(--split-button-disabled-opacity, 0.4);
+    cursor: var(--split-button-disabled-cursor, not-allowed);
+  }
+
+  .split-button-trigger:hover {
+    background-color: var(
+      --split-button-trigger-hover-background,
+      var(--split-button-trigger-background, #3a4550)
+    );
+    color: var(--split-button-trigger-hover-color, var(--split-button-trigger-color, white));
+  }
+
+  .split-button-trigger :global(.menu-trigger) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--split-button-trigger-padding, 8px);
+  }
+
+  .split-button-arrow {
+    display: inline-flex;
+    width: var(--split-button-arrow-width, 10px);
+    height: var(--split-button-arrow-height, 6px);
+  }
+
+  .split-button-arrow :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/dist/SplitButton/SplitButton.svelte.d.ts

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

package/dist/SplitButton/properties.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { MenuItem } from '../Menu/properties';
+export type SplitButtonProperties = MandatorySplitButtonProperties & OptionalSplitButtonProperties & SplitButtonEventProperties;
+export type MandatorySplitButtonProperties = {
+    text: string;
+    items: MenuItem[];
+};
+export type OptionalSplitButtonProperties = {
+    disabled?: boolean;
+    testId?: string;
+    dropdownIcon?: Snippet;
+    classes?: string;
+};
+export type SplitButtonEventProperties = {
+    onclick?: (event: MouseEvent) => void;
+    onselect?: (item: MenuItem) => void;
+};

package/dist/SplitButton/properties.js

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

package/dist/Status/Status.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
   import type { StatusProperties } from './properties';
   import Button from '../Button/Button.svelte';
+  import Img from '../Img/Img.svelte';
 
   let {
     statusIcon = 'icons/order-success-icon.svg',
     statusText = '',
     statusDescription = '',
     buttonProperties,
+    classes,
     onbuttonClick
   }: StatusProperties = $props();
 </script>
 
-<div class="background">
+<div class="background {classes ?? ''}">
   <div class="order-status">
-    <div class="status-image"><img src={statusIcon} alt="status" /></div>
+    <div class="status-image"><Img src={statusIcon} alt="status" /></div>
     <div class="status-text">{statusText}</div>
     <div class="status-description">
       <!-- eslint-disable-next-line -->
       {@html statusDescription}
     </div>
-    {#if buttonProperties}
+    {#if typeof buttonProperties === 'object'}
       <Button {...buttonProperties} onclick={onbuttonClick} />
     {/if}
   </div>

package/dist/Status/properties.d.ts

@@ -4,6 +4,7 @@ export type StatusProperties = StatusEventProperties & {
     statusText: string;
     statusDescription: string;
     buttonProperties?: ButtonProperties;
+    classes?: string;
 };
 export type StatusEventProperties = {
     onbuttonClick?: () => void;

package/dist/Stepper/Step.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import type { StepProperties } from './properties';
 
-  let { stepIndex, label, icon, onclick, onkeydown }: StepProperties = $props();
+  let { stepIndex, label, icon, classes, onclick, onkeydown }: StepProperties = $props();
 
   function handleStepClick() {
     onclick?.({ selectedIndex: stepIndex });
   }
 </script>
 
-<div class="step" onclick={handleStepClick} {onkeydown} role="button" tabindex="0">
-  {#if icon}
+<div class="step {classes ?? ''}" onclick={handleStepClick} {onkeydown} role="button" tabindex="0">
+  {#if typeof icon === 'string' && icon.length > 0}
     <div class="step-icon-container">
       <img class="step-icon" src={icon} alt="" />
     </div>

package/dist/Stepper/Stepper.svelte

@@ -2,11 +2,11 @@
   import type { StepperProperties } from './properties';
   import Step from './Step.svelte';
 
-  let { steps, currentStepIndex, onhandleStepClick }: StepperProperties = $props();
+  let { steps, currentStepIndex, classes, onhandleStepClick }: StepperProperties = $props();
 </script>
 
-<div class="container">
-  {#each steps as currentStep, stepIndex}
+<div class="container {classes ?? ''}">
+  {#each steps as currentStep, stepIndex (stepIndex)}
     <div
       class:active-step={currentStepIndex === stepIndex}
       class:completed-step={currentStepIndex > stepIndex}

package/dist/Stepper/properties.d.ts

@@ -1,6 +1,7 @@
 export type StepperProperties = {
     steps: Array<Step>;
     currentStepIndex: number;
+    classes?: string;
     onhandleStepClick?: (event: {
         selectedIndex: number;
     }) => void;
@@ -15,6 +16,7 @@ export type StepProperties = OptionalStepProperties & StepEventProperties & {
 };
 export type OptionalStepProperties = {
     icon?: string;
+    classes?: string;
 };
 export type StepEventProperties = {
     onclick?: (event: {

package/dist/Table/Table.svelte

@@ -6,7 +6,8 @@
     tableHeaders = [],
     tableData = [],
     isTableScrollable = false,
-    isContentScrollable = false
+    isContentScrollable = false,
+    classes
   }: TableProperties = $props();
 
   let sortOrders = $state<{ [key: string]: 'asc' | 'desc' }>({});
@@ -18,7 +19,10 @@
     }
 
     // Sort by the last clicked column
-    const column = columns[columns.length - 1];
+    const column = columns.at(-1);
+    if (!column) {
+      return [...tableData];
+    }
     const order = sortOrders[column];
 
     return [...tableData].sort((a, b) => {
@@ -49,7 +53,7 @@
   });
 
   function sortTableData(column: string) {
-    if (!sortOrders[column]) {
+    if (typeof sortOrders[column] === 'undefined') {
       sortOrders[column] = 'asc';
     } else {
       sortOrders[column] = sortOrders[column] === 'asc' ? 'desc' : 'asc';
@@ -64,17 +68,20 @@
   }
 </script>
 
-{#if tableTitle}
+{#if typeof tableTitle === 'string' && tableTitle.length > 0}
   <div class="table-title">
     {tableTitle}
   </div>
 {/if}
 {#if tableHeaders.length !== 0 || tableData.length !== 0}
-  <div class="table-container {isTableScrollable ? 'scrollable-table' : ' '}" role="grid">
+  <div
+    class="table-container {isTableScrollable ? 'scrollable-table' : ' '} {classes ?? ''}"
+    role="grid"
+  >
     <table>
       <thead>
         <tr>
-          {#each tableHeaders as header}
+          {#each tableHeaders as header (header)}
             <th class="table-header {isTableScrollable ? 'table-header-sticky' : ' '}">
               {header}
               {#if sortOrders[header] === 'asc'}
@@ -99,9 +106,9 @@
         </tr>
       </thead>
       <tbody>
-        {#each sortedTableData as row}
+        {#each sortedTableData as row, rowIndex (rowIndex)}
           <tr>
-            {#each row as cell}
+            {#each row as cell, cellIndex (cellIndex)}
               <td class="table-content">
                 <div class={isContentScrollable ? 'scrollable-content' : ' '}>
                   {cell}

package/dist/Table/properties.d.ts

@@ -5,4 +5,5 @@ export type TableProperties = {
     tableData?: Array<JSONValue[]>;
     isTableScrollable?: boolean;
     isContentScrollable?: boolean;
+    classes?: string;
 };

package/dist/Tabs/Tabs.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import type { TabsProperties } from './properties';
+  import chevronLeftSvg from '../assets/chevron-left.svg?raw';
+  import chevronRightSvg from '../assets/chevron-right.svg?raw';
+
+  let {
+    items,
+    activeIndex = 0,
+    disabled = false,
+    testId,
+    scrollLeftIcon,
+    scrollRightIcon,
+    classes,
+    onchange
+  }: TabsProperties = $props();
+
+  let scrollContainer: HTMLDivElement | null = null;
+  let canScrollLeft = $state(false);
+  let canScrollRight = $state(false);
+
+  function updateOverflow(): void {
+    if (scrollContainer === null) {
+      return;
+    }
+    const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
+    canScrollLeft = scrollLeft > 1;
+    canScrollRight = scrollLeft + clientWidth < scrollWidth - 1;
+  }
+
+  function scroll(direction: 'left' | 'right'): void {
+    if (scrollContainer === null) {
+      return;
+    }
+    const amount = scrollContainer.clientWidth * 0.6;
+    scrollContainer.scrollBy({
+      left: direction === 'left' ? -amount : amount,
+      behavior: 'smooth'
+    });
+  }
+
+  function handleTabClick(index: number): void {
+    if (disabled || index === activeIndex) {
+      return;
+    }
+    activeIndex = index;
+    onchange?.(index, items[index]);
+  }
+
+  function initOverflow(node: HTMLDivElement): { destroy: () => void } {
+    scrollContainer = node;
+    updateOverflow();
+    const observer = new MutationObserver(updateOverflow);
+    observer.observe(node, { childList: true, subtree: true });
+    return {
+      destroy() {
+        observer.disconnect();
+      }
+    };
+  }
+</script>
+
+<div class="tabs-wrapper {classes ?? ''}" class:disabled data-pw={testId}>
+  {#if canScrollLeft}
+    <button
+      class="tabs-arrow tabs-arrow-left"
+      aria-label="Scroll tabs left"
+      onclick={() => scroll('left')}
+    >
+      {#if typeof scrollLeftIcon === 'function'}
+        {@render scrollLeftIcon()}
+      {:else}
+        <!-- eslint-disable svelte/no-at-html-tags -->
+        {@html chevronLeftSvg}
+      {/if}
+    </button>
+  {/if}
+  <div
+    class="tabs-bar"
+    class:fade-left={canScrollLeft}
+    class:fade-right={canScrollRight}
+    role="tablist"
+    use:initOverflow
+    onscroll={updateOverflow}
+  >
+    {#each items as label, index (index)}
+      <button
+        class="tabs-item"
+        class:active={index === activeIndex}
+        role="tab"
+        aria-selected={index === activeIndex}
+        tabindex={index === activeIndex ? 0 : -1}
+        {disabled}
+        onclick={() => handleTabClick(index)}
+      >
+        {label}
+        {#if index === activeIndex}
+          <span class="tabs-indicator"></span>
+        {/if}
+      </button>
+    {/each}
+  </div>
+  {#if canScrollRight}
+    <button
+      class="tabs-arrow tabs-arrow-right"
+      aria-label="Scroll tabs right"
+      onclick={() => scroll('right')}
+    >
+      {#if typeof scrollRightIcon === 'function'}
+        {@render scrollRightIcon()}
+      {:else}
+        <!-- eslint-disable svelte/no-at-html-tags -->
+        {@html chevronRightSvg}
+      {/if}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .tabs-wrapper {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    max-width: 100%;
+    background: var(--tabs-bar-background, #ffffff);
+    border-bottom: var(--tabs-bar-border-bottom, 1px solid #e0e0e0);
+    border-radius: var(--tabs-bar-border-radius, 0);
+  }
+
+  .tabs-wrapper.disabled {
+    opacity: var(--tabs-disabled-opacity, 0.5);
+    pointer-events: none;
+  }
+
+  .tabs-bar {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    padding: var(--tabs-bar-padding, 0px);
+    gap: var(--tabs-bar-gap, 0px);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .tabs-bar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tabs-bar.fade-left {
+    mask-image: linear-gradient(to right, transparent, black var(--tabs-fade-size, 32px));
+    -webkit-mask-image: linear-gradient(to right, transparent, black var(--tabs-fade-size, 32px));
+  }
+
+  .tabs-bar.fade-right {
+    mask-image: linear-gradient(to left, transparent, black var(--tabs-fade-size, 32px));
+    -webkit-mask-image: linear-gradient(to left, transparent, black var(--tabs-fade-size, 32px));
+  }
+
+  .tabs-bar.fade-left.fade-right {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--tabs-fade-size, 32px),
+      black calc(100% - var(--tabs-fade-size, 32px)),
+      transparent
+    );
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--tabs-fade-size, 32px),
+      black calc(100% - var(--tabs-fade-size, 32px)),
+      transparent
+    );
+  }
+
+  .tabs-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--tabs-arrow-size, 28px);
+    padding: var(--tabs-arrow-padding, 0);
+    border: var(--tabs-arrow-border, none);
+    background: var(--tabs-arrow-background, var(--tabs-bar-background, #ffffff));
+    color: var(--tabs-arrow-color, var(--tabs-item-color, #666666));
+    cursor: pointer;
+    z-index: 1;
+    transition: var(--tabs-arrow-transition, color 0.2s ease);
+    font-family: inherit;
+  }
+
+  .tabs-arrow:hover {
+    color: var(--tabs-arrow-hover-color, var(--tabs-active-color, #1a73e8));
+    background: var(
+      --tabs-arrow-hover-background,
+      var(--tabs-arrow-background, var(--tabs-bar-background, #ffffff))
+    );
+  }
+
+  .tabs-item {
+    position: relative;
+    padding: var(--tabs-item-padding, 12px 16px);
+    font-size: var(--tabs-item-font-size, 14px);
+    font-weight: var(--tabs-item-font-weight, 400);
+    font-family: var(--tabs-item-font-family, inherit);
+    color: var(--tabs-item-color, #666666);
+    cursor: var(--tabs-item-cursor, pointer);
+    background: var(--tabs-item-background, transparent);
+    border: none;
+    border-radius: var(--tabs-item-border-radius, 0);
+    outline: none;
+    white-space: nowrap;
+    flex-shrink: 0;
+    transition: var(--tabs-transition, color 0.2s ease, background 0.2s ease);
+  }
+
+  .tabs-item:hover:not(.active):not(:disabled) {
+    color: var(--tabs-hover-color, #333333);
+    background: var(--tabs-hover-background, #f5f5f5);
+  }
+
+  .tabs-item.active {
+    color: var(--tabs-active-color, #1a73e8);
+    font-weight: var(--tabs-active-font-weight, 600);
+    background: var(--tabs-active-background, transparent);
+  }
+
+  .tabs-item:disabled {
+    cursor: var(--tabs-disabled-cursor, not-allowed);
+  }
+
+  .tabs-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--tabs-indicator-height, 2px);
+    background-color: var(--tabs-indicator-color, #1a73e8);
+    border-radius: var(--tabs-indicator-border-radius, 2px 2px 0 0);
+  }
+</style>

package/dist/Tabs/Tabs.svelte.d.ts

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

package/dist/Tabs/properties.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export type TabsProperties = MandatoryTabsProperties & OptionalTabsProperties & TabsEventProperties;
+export type MandatoryTabsProperties = {
+    items: string[];
+};
+export type OptionalTabsProperties = {
+    activeIndex?: number;
+    disabled?: boolean;
+    testId?: string;
+    scrollLeftIcon?: Snippet;
+    scrollRightIcon?: Snippet;
+    classes?: string;
+};
+export type TabsEventProperties = {
+    onchange?: (index: number, label: string) => void;
+};

package/dist/Tabs/properties.js

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