@juspay/svelte-ui-components 2.9.0 → 2.11.0

package/dist/KeyboardInput/KeyboardInput.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { KeyboardInputProperties } from './properties';
+
+  let { keys, separator = '+', testId, onclick, classes }: KeyboardInputProperties = $props();
+
+  const KEY_SYMBOLS: Record<string, string> = {
+    cmd: '\u2318',
+    command: '\u2318',
+    ctrl: '\u2303',
+    control: '\u2303',
+    alt: '\u2325',
+    option: '\u2325',
+    shift: '\u21E7',
+    enter: '\u21B5',
+    backspace: '\u232B',
+    delete: '\u2326',
+    tab: '\u21E5',
+    escape: 'Esc',
+    esc: 'Esc',
+    up: '\u2191',
+    down: '\u2193',
+    left: '\u2190',
+    right: '\u2192',
+    space: '\u2423'
+  };
+
+  let keyList = $derived(Array.isArray(keys) ? keys : keys.split(separator).map((k) => k.trim()));
+  let interactive = $derived(typeof onclick === 'function');
+
+  function getSymbol(key: string): string {
+    return KEY_SYMBOLS[key.toLowerCase()] ?? key;
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onclick?.(new MouseEvent('click'));
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<span
+  class="keyboard-input {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  onclick={interactive ? onclick : null}
+  onkeydown={interactive ? handleKeydown : null}
+  role={interactive ? 'button' : null}
+  tabindex={interactive ? 0 : null}
+>
+  {#each keyList as key, i (i)}
+    {#if i > 0}
+      <span class="separator">{separator}</span>
+    {/if}
+    <kbd class="key">{getSymbol(key)}</kbd>
+  {/each}
+</span>
+
+<style>
+  .keyboard-input {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--keyboard-input-gap, 4px);
+    font-family: var(--keyboard-input-font-family, inherit);
+    font-size: var(--keyboard-input-font-size, 13px);
+    vertical-align: baseline;
+    cursor: var(--keyboard-input-cursor, default);
+  }
+
+  .separator {
+    color: var(--keyboard-input-separator-color, #888888);
+    font-size: var(--keyboard-input-separator-font-size, 0.85em);
+    user-select: none;
+  }
+
+  .key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--keyboard-input-key-font-family, inherit);
+    font-weight: var(--keyboard-input-key-font-weight, 500);
+    color: var(--keyboard-input-key-color, #333333);
+    background-color: var(--keyboard-input-key-background, #f5f5f5);
+    border: var(--keyboard-input-key-border, 1px solid #d1d1d1);
+    border-radius: var(--keyboard-input-key-border-radius, 4px);
+    box-shadow: var(--keyboard-input-key-box-shadow, 0 1px 0 #c4c4c4);
+    min-width: var(--keyboard-input-key-min-width, 1.6em);
+    padding: var(--keyboard-input-key-padding, 2px 6px);
+    text-align: center;
+    white-space: nowrap;
+    line-height: 1;
+  }
+</style>

package/dist/KeyboardInput/KeyboardInput.svelte.d.ts

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

package/dist/KeyboardInput/properties.d.ts

@@ -0,0 +1,12 @@
+export type KeyboardInputProperties = MandatoryKeyboardInputProperties & OptionalKeyboardInputProperties & KeyboardInputEventProperties;
+export type MandatoryKeyboardInputProperties = {
+    keys: string[] | string;
+};
+export type OptionalKeyboardInputProperties = {
+    separator?: string;
+    testId?: string;
+    classes?: string;
+};
+export type KeyboardInputEventProperties = {
+    onclick?: (event: MouseEvent) => void;
+};

package/dist/KeyboardInput/properties.js

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

package/dist/ListItem/ListItem.svelte

@@ -29,7 +29,8 @@
     oncenterTextClick,
     onitemClick,
     ontopSectionClick,
-    onkeydown
+    onkeydown,
+    classes
   }: ListItemProperties = $props();
 
   function handleLeftImageClick(event: MouseEvent): void {
@@ -53,8 +54,8 @@
   }
 </script>
 
-{#if leftImageUrl || rightImageUrl || label || leftContent || centerContent || rightContent || bottomContent}
-  <div class="item-container">
+{#if (typeof leftImageUrl === 'string' && leftImageUrl.length > 0) || (typeof rightImageUrl === 'string' && rightImageUrl.length > 0) || (typeof label === 'string' && label.length > 0) || typeof leftContent === 'function' || typeof centerContent === 'function' || typeof rightContent === 'function' || typeof bottomContent === 'function'}
+  <div class="item-container {classes ?? ''}">
     {#if showLoader}
       <div class="item-loader"></div>
     {/if}
@@ -77,7 +78,7 @@
         data-pw={topSectionTestId}
       >
         <div class="left-content">
-          {#if leftImageUrl}
+          {#if typeof leftImageUrl === 'string' && leftImageUrl.length > 0}
             <div
               class:prevent-focus={preventFocus}
               onclick={handleLeftImageClick}
@@ -89,12 +90,12 @@
               <Img src={leftImageUrl} alt="" fallback={leftImageFallbackUrl} />
             </div>
           {/if}
-          {#if leftContent}
+          {#if typeof leftContent === 'function'}
             {@render leftContent?.()}
           {/if}
         </div>
         <div class="center-content">
-          {#if label}
+          {#if typeof label === 'string' && label.length > 0}
             <div
               class="center-text"
               class:prevent-focus={preventFocus}
@@ -108,15 +109,15 @@
               {@html label}
             </div>
           {/if}
-          {#if centerContent}
+          {#if typeof centerContent === 'function'}
             {@render centerContent?.()}
           {/if}
         </div>
         <div class="right-content">
-          {#if rightContent}
+          {#if typeof rightContent === 'function'}
             {@render rightContent?.()}
           {/if}
-          {#if rightImageUrl}
+          {#if typeof rightImageUrl === 'string' && rightImageUrl.length > 0}
             <div
               class:prevent-focus={preventFocus}
               onclick={handleRightImageClick}
@@ -125,7 +126,9 @@
               tabindex="0"
               data-pw={rightImageTestId}
             >
-              <img class="right-img" src={rightImageUrl} alt="" />
+              <div class="right-img-wrapper">
+                <Img src={rightImageUrl} alt="" />
+              </div>
             </div>
           {/if}
           {#if showRightContentLoader}
@@ -133,15 +136,15 @@
               <Loader />
             </div>
           {/if}
-          {#if rightContentText && rightContentText !== ''}
+          {#if typeof rightContentText === 'string' && rightContentText.length > 0}
             <span class="right-content-text">{rightContentText}</span>
           {/if}
         </div>
       </div>
       <div class="bottom-section">
-        {#if bottomContent && useAccordion}
+        {#if typeof bottomContent === 'function' && useAccordion}
           <Accordion {expand}>
-            {@render bottomContent?.()}
+            {@render bottomContent()}
           </Accordion>
         {/if}
       </div>
@@ -260,24 +263,24 @@
     margin-top: 0;
   }
 
-  .right-img {
-    height: var(--list-item-right-image-height, 18px);
-    width: var(--list-item-right-image-width, 18px);
-    padding: var(--list-item-right-image-padding, 0px);
-    border-radius: var(--list-item-right-image-border-radius, 0px);
-    margin: var(--list-item-right-image-margin, 0px);
-    filter: var(--list-item-right-image-filter);
-    background: var(--list-item-right-image-background);
-    border: var(--list-item-right-image-border);
-    transition: var(--list-item-transition);
-  }
-
-  .right-img:hover {
-    background: var(
+  .right-img-wrapper {
+    --image-height: var(--list-item-right-image-height, 18px);
+    --image-width: var(--list-item-right-image-width, 18px);
+    --image-padding: var(--list-item-right-image-padding, 0px);
+    --image-border-radius: var(--list-item-right-image-border-radius, 0px);
+    --image-margin: var(--list-item-right-image-margin, 0px);
+    --image-filter: var(--list-item-right-image-filter);
+    --image-background: var(--list-item-right-image-background);
+    --image-border: var(--list-item-right-image-border);
+    --image-transition: var(--list-item-transition);
+    --image-hover-background: var(
       --list-item-right-image-hover-background,
       var(--list-item-right-image-background)
     );
-    border: var(--list-item-right-image-hover-border, var(--list-item-right-image-border));
+    --image-hover-border: var(
+      --list-item-right-image-hover-border,
+      var(--list-item-right-image-border)
+    );
   }
 
   .right-content-text {

package/dist/ListItem/properties.d.ts

@@ -19,6 +19,7 @@ export type ListItemProperties = ListItemEventProperties & {
     centerContent?: Snippet;
     rightContent?: Snippet;
     bottomContent?: Snippet;
+    classes?: string;
 };
 export type ListItemEventProperties = {
     onleftImageClick?: (event: MouseEvent) => void;

package/dist/Loader/Loader.svelte

@@ -1,4 +1,10 @@
-<div class="loader"></div>
+<script lang="ts">
+  import type { LoaderProperties } from './properties';
+
+  let { classes }: LoaderProperties = $props();
+</script>
+
+<div class="loader {classes ?? ''}"></div>
 
 <style>
   .loader {
@@ -56,12 +62,10 @@
     height: var(--loader-after-height, 15px);
     border-radius: var(--loader-after-border-radius, 50%);
     content: '';
-    margin: var(--loader-after-margin, auto);
     position: var(--loader-after-position, absolute);
-    top: var(--loader-after-top, 0);
-    left: var(--loader-after-left, 0);
-    bottom: var(--loader-after-bottom, 0);
-    right: var(--loader-after-right, 0);
+    top: var(--loader-after-top, 50%);
+    left: var(--loader-after-left, 50%);
+    transform: translate(-50%, -50%);
   }
   @-webkit-keyframes load3 {
     0% {

package/dist/Loader/Loader.svelte.d.ts

@@ -1,26 +1,4 @@
+import type { LoaderProperties } from './properties';
+declare const Loader: import("svelte").Component<LoaderProperties, {}, "">;
+type Loader = ReturnType<typeof Loader>;
 export default Loader;
-type Loader = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Loader: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/Loader/properties.d.ts

@@ -0,0 +1,3 @@
+export type LoaderProperties = {
+    classes?: string;
+};

package/dist/Loader/properties.js

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

package/dist/LoadingDots/LoadingDots.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { LoadingDotsProperties } from './properties';
+
+  let { dots = 3, animation = 'bounce', testId, classes }: LoadingDotsProperties = $props();
+
+  let count = $derived(Math.max(1, Math.round(dots)));
+</script>
+
+<span
+  class="loading-dots {classes ?? ''}"
+  role="status"
+  aria-label="Loading"
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  {#each { length: count } as _, i (i)}
+    <span class="dot" class:pulse={animation === 'pulse'} style="--i: {i}"></span>
+  {/each}
+</span>
+
+<style>
+  .loading-dots {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--loading-dots-gap, 3px);
+    vertical-align: middle;
+    line-height: 1;
+  }
+
+  .dot {
+    display: block;
+    width: var(--loading-dots-size, 6px);
+    height: var(--loading-dots-size, 6px);
+    border-radius: var(--loading-dots-border-radius, 50%);
+    background-color: var(--loading-dots-color, currentColor);
+    animation: loading-dots-bounce var(--loading-dots-duration, 1.4s) ease-in-out infinite;
+    animation-delay: calc(var(--i) * var(--loading-dots-stagger, 0.16s));
+  }
+
+  .dot.pulse {
+    animation-name: loading-dots-pulse;
+  }
+
+  @keyframes loading-dots-bounce {
+    0%,
+    80%,
+    100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(var(--loading-dots-bounce-height, -6px));
+    }
+  }
+
+  @keyframes loading-dots-pulse {
+    0%,
+    80%,
+    100% {
+      opacity: var(--loading-dots-pulse-min-opacity, 0.2);
+    }
+    40% {
+      opacity: 1;
+    }
+  }
+</style>

package/dist/LoadingDots/LoadingDots.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const LoadingDots: import("svelte").Component<import("./properties").OptionalLoadingDotsProperties, {}, "">;
+type LoadingDots = ReturnType<typeof LoadingDots>;
+export default LoadingDots;

package/dist/LoadingDots/properties.d.ts

@@ -0,0 +1,8 @@
+export type LoadingDotsAnimation = 'bounce' | 'pulse';
+export type LoadingDotsProperties = OptionalLoadingDotsProperties;
+export type OptionalLoadingDotsProperties = {
+    dots?: number;
+    animation?: LoadingDotsAnimation;
+    testId?: string;
+    classes?: string;
+};

package/dist/LoadingDots/properties.js

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