@juspay/svelte-ui-components 2.9.0 → 2.11.0

package/dist/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,308 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import type { ContextMenuProperties, ContextMenuItem } from './properties';
+
+  let {
+    items,
+    open = $bindable(false),
+    maxHeight = '240px',
+    testId,
+    children,
+    onselect,
+    onopen,
+    onclose,
+    classes
+  }: ContextMenuProperties = $props();
+
+  let menuEl: HTMLDivElement | null = $state(null);
+  let containerEl: HTMLDivElement | null = $state(null);
+  let focusedIndex: number = $state(-1);
+  let posX: number = $state(0);
+  let posY: number = $state(0);
+
+  let selectableItems: ContextMenuItem[] = $derived(
+    items.filter((item) => !item.separator && !item.disabled)
+  );
+
+  function openMenu(x: number, y: number) {
+    posX = x;
+    posY = y;
+    open = true;
+    focusedIndex = 0;
+    onopen?.();
+    requestAnimationFrame(() => {
+      adjustPosition();
+      focusItem(0);
+    });
+  }
+
+  function close() {
+    open = false;
+    focusedIndex = -1;
+    onclose?.();
+  }
+
+  function selectMenuItem(item: ContextMenuItem) {
+    if (item.disabled) {
+      return;
+    }
+    onselect?.(item);
+    close();
+  }
+
+  function adjustPosition() {
+    if (menuEl === null) {
+      return;
+    }
+    const rect = menuEl.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    if (posX + rect.width > viewportWidth) {
+      posX = viewportWidth - rect.width - 4;
+    }
+    if (posY + rect.height > viewportHeight) {
+      posY = viewportHeight - rect.height - 4;
+    }
+    if (posX < 0) {
+      posX = 4;
+    }
+    if (posY < 0) {
+      posY = 4;
+    }
+  }
+
+  function focusItem(index: number) {
+    if (menuEl === null) {
+      return;
+    }
+    const focusableItems = menuEl.querySelectorAll<HTMLElement>(
+      '[role="menuitem"]:not([aria-disabled="true"])'
+    );
+    if (index >= 0 && index < focusableItems.length) {
+      focusableItems[index].focus();
+    }
+  }
+
+  function getSelectableIndex(item: ContextMenuItem): number {
+    return selectableItems.indexOf(item);
+  }
+
+  function handleContextMenu(event: MouseEvent) {
+    event.preventDefault();
+    openMenu(event.clientX, event.clientY);
+  }
+
+  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();
+        if (focusedIndex >= 0 && focusedIndex < selectableItems.length) {
+          selectMenuItem(selectableItems[focusedIndex]);
+        }
+        break;
+      }
+      case 'Escape': {
+        event.preventDefault();
+        close();
+        break;
+      }
+      case 'Tab': {
+        close();
+        break;
+      }
+    }
+  }
+
+  function handleClickOutside(event: Event) {
+    if (event.target instanceof Node && menuEl && !menuEl.contains(event.target)) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener('click', handleClickOutside);
+  });
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      document.removeEventListener('click', handleClickOutside);
+    }
+  });
+</script>
+
+<div
+  class="context-menu-container {classes ?? ''}"
+  bind:this={containerEl}
+  oncontextmenu={handleContextMenu}
+  role="application"
+  data-pw={testId}
+>
+  {#if typeof children === 'function'}
+    {@render children()}
+  {/if}
+</div>
+
+{#if open}
+  <div
+    class="context-menu-dropdown"
+    style="left: {posX}px; top: {posY}px; --context-menu-max-height: {maxHeight};"
+    bind:this={menuEl}
+    role="menu"
+    tabindex="-1"
+    onkeydown={handleMenuKeydown}
+  >
+    {#each items as item (item.value)}
+      {#if item.separator}
+        <div class="context-menu-separator" role="separator"></div>
+      {:else}
+        <div
+          class="context-menu-item"
+          class:context-menu-item-danger={item.danger}
+          class:context-menu-item-disabled={item.disabled}
+          role="menuitem"
+          tabindex={item.disabled ? -1 : 0}
+          aria-disabled={item.disabled ? 'true' : null}
+          onclick={() => selectMenuItem(item)}
+          onkeydown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              selectMenuItem(item);
+            }
+          }}
+          onfocus={() => {
+            if (!item.disabled) {
+              focusedIndex = getSelectableIndex(item);
+            }
+          }}
+          data-pw={testId ? `${testId}-item-${item.value}` : null}
+        >
+          {#if item.icon}
+            <img class="context-menu-item-icon" src={item.icon} alt="" />
+          {/if}
+          <span class="context-menu-item-label">{item.label}</span>
+          {#if item.shortcut}
+            <span class="context-menu-item-shortcut">{item.shortcut}</span>
+          {/if}
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .context-menu-container {
+    display: var(--context-menu-container-display, contents);
+  }
+
+  .context-menu-dropdown {
+    position: fixed;
+    z-index: var(--context-menu-z-index, 1000);
+    background-color: var(--context-menu-background-color, #ffffff);
+    border: var(--context-menu-border, 1px solid #e0e0e0);
+    border-radius: var(--context-menu-border-radius, 6px);
+    box-shadow: var(--context-menu-box-shadow, 0px 4px 16px rgba(0, 0, 0, 0.12));
+    min-width: var(--context-menu-min-width, 160px);
+    max-height: var(--context-menu-max-height, 240px);
+    overflow-y: auto;
+    padding: var(--context-menu-padding, 4px 0);
+    font-family: var(--context-menu-font-family, inherit);
+    font-size: var(--context-menu-font-size, 14px);
+  }
+
+  .context-menu-item {
+    display: flex;
+    align-items: center;
+    padding: var(--context-menu-item-padding, 8px 12px);
+    cursor: pointer;
+    color: var(--context-menu-item-color, #333333);
+    background-color: var(--context-menu-item-background-color, transparent);
+    gap: var(--context-menu-item-gap, 8px);
+    white-space: var(--context-menu-item-white-space, nowrap);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .context-menu-item:hover {
+    background-color: var(--context-menu-item-hover-background-color, #f5f5f5);
+    color: var(--context-menu-item-hover-color, var(--context-menu-item-color, #333333));
+  }
+
+  .context-menu-item:focus {
+    background-color: var(--context-menu-item-focus-background-color, #f0f0f0);
+    outline: var(--context-menu-item-focus-outline, none);
+  }
+
+  .context-menu-item-danger {
+    color: var(--context-menu-item-danger-color, #dc3545);
+  }
+
+  .context-menu-item-danger:hover {
+    background-color: var(--context-menu-item-danger-hover-background-color, #fff0f0);
+    color: var(
+      --context-menu-item-danger-hover-color,
+      var(--context-menu-item-danger-color, #dc3545)
+    );
+  }
+
+  .context-menu-item-danger:focus {
+    background-color: var(--context-menu-item-danger-focus-background-color, #fff0f0);
+  }
+
+  .context-menu-item-disabled {
+    opacity: var(--context-menu-item-disabled-opacity, 0.4);
+    cursor: var(--context-menu-item-disabled-cursor, not-allowed);
+    pointer-events: none;
+  }
+
+  .context-menu-separator {
+    height: var(--context-menu-separator-height, 1px);
+    background-color: var(--context-menu-separator-color, #e0e0e0);
+    margin: var(--context-menu-separator-margin, 4px 0);
+  }
+
+  .context-menu-item-icon {
+    height: var(--context-menu-item-icon-height, 16px);
+    width: var(--context-menu-item-icon-width, 16px);
+    flex-shrink: 0;
+  }
+
+  .context-menu-item-label {
+    flex: 1;
+    font-weight: var(--context-menu-item-font-weight, 400);
+    line-height: var(--context-menu-item-line-height, 1.4);
+  }
+
+  .context-menu-item-shortcut {
+    color: var(--context-menu-item-shortcut-color, #999999);
+    font-size: var(--context-menu-item-shortcut-font-size, 12px);
+    font-weight: var(--context-menu-item-shortcut-font-weight, 400);
+    margin-left: var(--context-menu-item-shortcut-margin-left, 16px);
+  }
+</style>

package/dist/ContextMenu/ContextMenu.svelte.d.ts

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

package/dist/ContextMenu/properties.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+export type ContextMenuItem = {
+    label: string;
+    value: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+};
+export type ContextMenuProperties = MandatoryContextMenuProperties & OptionalContextMenuProperties & ContextMenuEventProperties;
+export type MandatoryContextMenuProperties = {
+    items: ContextMenuItem[];
+};
+export type OptionalContextMenuProperties = {
+    open?: boolean;
+    maxHeight?: string;
+    testId?: string;
+    children?: Snippet;
+    classes?: string;
+};
+export type ContextMenuEventProperties = {
+    onselect?: (item: ContextMenuItem) => void;
+    onopen?: () => void;
+    onclose?: () => void;
+};

package/dist/ContextMenu/properties.js

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

package/dist/Gauge/Gauge.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { GaugeProperties } from './properties';
+
+  let { value, showLabel = true, testId, classes }: GaugeProperties = $props();
+
+  const VIEW_BOX = 100;
+  const CENTER = VIEW_BOX / 2;
+  const STROKE = 8;
+  const RADIUS = (VIEW_BOX - STROKE) / 2;
+  const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+  let clamped = $derived(Math.min(100, Math.max(0, value)));
+  let offset = $derived(CIRCUMFERENCE - (clamped / 100) * CIRCUMFERENCE);
+</script>
+
+<div class="gauge {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+  <svg viewBox="0 0 {VIEW_BOX} {VIEW_BOX}">
+    <circle class="track" cx={CENTER} cy={CENTER} r={RADIUS} fill="none" />
+    <circle
+      class="bar"
+      cx={CENTER}
+      cy={CENTER}
+      r={RADIUS}
+      fill="none"
+      stroke-dasharray={CIRCUMFERENCE}
+      stroke-dashoffset={offset}
+      stroke-linecap="round"
+      transform="rotate(-90 {CENTER} {CENTER})"
+    />
+  </svg>
+  {#if showLabel}
+    <div class="label">{Math.round(clamped)}%</div>
+  {/if}
+</div>
+
+<style>
+  .gauge {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--gauge-size, 120px);
+    height: var(--gauge-size, 120px);
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .track {
+    stroke: var(--gauge-track-color, #e0e0e0);
+    stroke-width: var(--gauge-stroke-width, 8);
+  }
+
+  .bar {
+    stroke: var(--gauge-bar-color, #2196f3);
+    stroke-width: var(--gauge-stroke-width, 8);
+    transition: stroke-dashoffset var(--gauge-transition-duration, 0.3s) ease;
+  }
+
+  .label {
+    position: absolute;
+    font-size: var(--gauge-label-font-size, 24px);
+    font-weight: var(--gauge-label-font-weight, 600);
+    font-family: var(--gauge-label-font-family, inherit);
+    color: var(--gauge-label-color, #333);
+  }
+</style>

package/dist/Gauge/Gauge.svelte.d.ts

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

package/dist/Gauge/properties.d.ts

@@ -0,0 +1,9 @@
+export type GaugeProperties = MandatoryGaugeProperties & OptionalGaugeProperties;
+export type MandatoryGaugeProperties = {
+    value: number;
+};
+export type OptionalGaugeProperties = {
+    showLabel?: boolean;
+    testId?: string;
+    classes?: string;
+};

package/dist/Gauge/properties.js

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

package/dist/GridItem/GridItem.svelte

@@ -7,7 +7,8 @@
     headerIcon = '',
     showLoader = $bindable(false),
     onclick,
-    onkeydown
+    onkeydown,
+    classes
   }: GridItemProperties = $props();
 
   function handleClick(event: MouseEvent) {
@@ -16,7 +17,7 @@
   }
 </script>
 
-<div class="container" onclick={handleClick} {onkeydown} role="button" tabindex="0">
+<div class="container {classes ?? ''}" onclick={handleClick} {onkeydown} role="button" tabindex="0">
   <div class="grid-header">
     <img src={headerIcon} alt="" class="grid-item-header-icon" />
   </div>
@@ -54,7 +55,7 @@
 
   .grid-item-header-icon {
     height: var(--grid-item-header-icon-height, 16px);
-    width: var(--grid-item-header-icon-width, auto);
+    width: var(--grid-item-header-icon-width, fit-content);
     object-fit: var(--grid-item-header-icon-object-fit, contain);
     z-index: var(--grid-item-header-icon-z-index, 2);
   }
@@ -73,7 +74,7 @@
 
   .grid-item-icon {
     height: var(--grid-item-icon-height, 32px);
-    width: var(--grid-item-icon-width, auto);
+    width: var(--grid-item-icon-width, fit-content);
     object-fit: var(--grid-item-icon-object-fit, contain);
     z-index: var(--grid-item-icon-z-index, 100);
   }

package/dist/GridItem/properties.d.ts

@@ -6,6 +6,7 @@ export type MandatoryGridItemProperties = {
 export type OptionalGridItemProperties = {
     headerIcon?: string | null;
     showLoader?: boolean;
+    classes?: string;
 };
 export type GridItemEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist/Icon/Icon.svelte

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

package/dist/Icon/properties.d.ts

@@ -4,6 +4,7 @@ export type MandatoryIconProperties = {
 };
 export type OptionalIconProperties = {
     text?: string | null;
+    classes?: string;
 };
 export type IconEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist/IconStack/IconStack.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import type { IconStackProperties } from './properties';
 
-  let { icons }: IconStackProperties = $props();
+  let { icons, classes }: IconStackProperties = $props();
 </script>
 
-<div class="stack-container">
-  {#each icons as icon, i}
+<div class="stack-container {classes ?? ''}">
+  {#each icons as icon, i (i)}
     <div class="stack-icon" style:z-index={icons.length - i}>
       {#if icon.type === 'image'}
         <img src={icon.content} alt="icon" />

package/dist/IconStack/properties.d.ts

@@ -4,4 +4,5 @@ export type IconStackItem = {
 };
 export type IconStackProperties = {
     icons: IconStackItem[];
+    classes?: string;
 };

package/dist/Img/Img.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
   import type { ImgProperties } from './properties';
 
-  let { src, alt, fallback }: ImgProperties = $props();
+  let { src, alt, fallback, onerror, classes }: ImgProperties = $props();
 
   let currentSrc = $derived(src);
 
   function handleFallback(): void {
-    if (fallback && currentSrc !== fallback) {
+    if (typeof fallback === 'string' && fallback.length > 0 && currentSrc !== fallback) {
       currentSrc = fallback;
+    } else {
+      onerror?.();
     }
   }
 </script>
 
-<img src={currentSrc} {alt} onerror={handleFallback} />
+<img class={classes ?? ''} src={currentSrc} {alt} onerror={handleFallback} />
 
 <style>
   img {

package/dist/Img/properties.d.ts

@@ -1,8 +1,12 @@
-export type ImgProperties = OptionalImgProperties & MandatoryImgProperties;
+export type ImgProperties = MandatoryImgProperties & OptionalImgProperties & ImgEventProperties;
 export type MandatoryImgProperties = {
     src: string;
     alt: string;
 };
 export type OptionalImgProperties = {
     fallback?: string | null;
+    classes?: string;
+};
+export type ImgEventProperties = {
+    onerror?: () => void;
 };

package/dist/Input/Input.svelte

@@ -30,7 +30,8 @@
     onPaste = () => {},
     onStateChange = () => {},
     onClick = () => {},
-    onKeyDown = () => {}
+    onKeyDown = () => {},
+    classes
   }: InputProperties = $props();
 
   export function focus() {
@@ -164,12 +165,17 @@
     onFocusout(event);
   }
 
-  $effect(() => {
-    onStateChange(validationState);
+  let _validationStateForCallback = $derived.by(() => {
+    const state = validationState;
+    onStateChange(state);
+    return state;
   });
 </script>
 
-<div class="input-container" class:input-error={validationState === 'Invalid' && !actionInput}>
+<div
+  class="input-container {classes ?? ''}"
+  class:input-error={validationState === 'Invalid' && !actionInput}
+>
   {#if typeof label === 'string' && label !== '' && !actionInput}
     <label class="label" for={name}>
       {label}
@@ -193,7 +199,7 @@
       style="--focus-border: {addFocusColor ? 1 : 0}px;"
       disabled={disable}
       bind:this={inputElement}
-      maxlength={dataType === 'tel' ? undefined : maxLength}
+      maxlength={dataType === 'tel' ? null : maxLength}
       minlength={minLength}
     />
   {:else}
@@ -213,7 +219,7 @@
       class:action-input={actionInput}
       disabled={disable}
       bind:this={inputElement}
-      maxlength={dataType === 'tel' ? undefined : maxLength}
+      maxlength={dataType === 'tel' ? null : maxLength}
       minlength={minLength}
     />
   {/if}

package/dist/Input/properties.d.ts

@@ -23,6 +23,7 @@ export type OptionalInputProperties = {
     textTransformers?: TextTransformer[];
     textViewPresentation?: TextTransformer[];
     testId?: string;
+    classes?: string;
 };
 export type InputEventProperties = {
     onInput?: (value: string, event: Event) => void;

package/dist/InputButton/InputButton.svelte

@@ -16,7 +16,8 @@
     leftButtonEventProperties,
     bottomButtonEventProperties,
     leftIcon,
-    rightIcon
+    rightIcon,
+    classes
   }: InputButtonProperties = $props();
 
   let validationState = $state<ValidationState>('InProgress');
@@ -54,7 +55,7 @@
   }
 </script>
 
-<div class="container">
+<div class="container {classes ?? ''}">
   {#if inputProperties.label && inputProperties.label !== ''}
     <label class="label" for={inputProperties.name}>
       {inputProperties.label}
@@ -121,7 +122,7 @@
     --input-focus-border: none;
     --input-box-shadow: none;
     --input-margin: none;
-    --input-width: auto;
+    --input-width: fit-content;
     height: var(--input-height, fit-content);
     font-size: var(--input-font-size, 16px) !important;
     font-weight: 500;

package/dist/InputButton/properties.d.ts

@@ -1,17 +1,17 @@
-import type { ButtonEventProperties, MandatoryButtonProperties, OptionalButtonProperties } from '../Button/properties';
+import type { ButtonEventProperties, OptionalButtonProperties } from '../Button/properties';
 import type { InputEventProperties, OptionalInputProperties } from '../Input/properties';
 import type { Snippet } from 'svelte';
 export type InputButtonProperties = OptionalInputButtonProperties & InputButtonEventProperties & {
     value: string;
 };
-type _ButtonProperties = OptionalButtonProperties & MandatoryButtonProperties;
 export type OptionalInputButtonProperties = {
     inputProperties: OptionalInputProperties;
-    rightButtonProperties?: _ButtonProperties | null;
-    leftButtonProperties?: _ButtonProperties | null;
-    bottomButtonProperties?: _ButtonProperties | null;
+    rightButtonProperties?: OptionalButtonProperties | null;
+    leftButtonProperties?: OptionalButtonProperties | null;
+    bottomButtonProperties?: OptionalButtonProperties | null;
     leftIcon?: Snippet;
     rightIcon?: Snippet;
+    classes?: string;
 };
 export type InputButtonEventProperties = {
     inputEventProperties?: InputEventProperties;
@@ -19,4 +19,3 @@ export type InputButtonEventProperties = {
     leftButtonEventProperties?: ButtonEventProperties | null;
     bottomButtonEventProperties?: ButtonEventProperties | null;
 };
-export {};