@juspay/svelte-ui-components 1.34.1 → 1.34.2

package/dist/InputButton/InputButton.svelte

@@ -1,116 +1,114 @@
-<script>import Button from "../Button/Button.svelte";
-import Input from "../Input/Input.svelte";
-import { createEventDispatcher } from "svelte";
-import { defaultInputButtonProperties } from "./properties";
-const dispatch = createEventDispatcher();
-export let properties = defaultInputButtonProperties;
-let inputRef;
-$:
-  state = "InProgress";
-$: {
-  if (properties.rightButtonProperties != null) {
-    properties.rightButtonProperties.enable = state === "Valid";
-    properties = properties;
-  }
-}
-function rightButtonClick() {
-  if (state === "Valid") {
-    dispatch("rightButtonClick", { value: properties.inputProperties.value });
-  }
-}
-function leftButtonClick(event) {
-  event.preventDefault();
-  dispatch("leftButtonClick");
-}
-function bottomButtonClick() {
-  if (state === "Valid") {
-    dispatch("bottomButtonClick", { value: properties.inputProperties.value });
-  }
-}
-function triggerRightClickIfValid(event) {
-  if (event?.key === "Enter") {
-    rightButtonClick();
-  }
-}
-function handleState(event) {
-  if (event && event?.detail?.state) {
-    state = event.detail.state;
-  }
-  dispatch("stateChange", event);
-}
-function onFocusOut(event) {
-  dispatch("focusout", event);
-}
-function onInputClick(event) {
-  dispatch("inputClick", event);
-}
-export function focus() {
-  inputRef?.focus();
-}
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import Input from '../Input/Input.svelte';
+  import type { InputButtonProperties } from './properties';
+  import type { ValidationState } from '../types';
+  import type { SvelteComponent } from 'svelte';
+
+  let {
+    value = $bindable(''),
+    inputProperties,
+    rightButtonProperties,
+    leftButtonProperties,
+    bottomButtonProperties,
+    leftIcon
+  }: InputButtonProperties = $props();
+
+  let validationState = $state<ValidationState>('InProgress');
+
+  let inputRef: SvelteComponent | null = $state(null);
+
+  // Derive enable state for right button
+  let isRightButtonEnabled = $derived(validationState === 'Valid');
+
+  function rightButtonClick(event: MouseEvent): void {
+    if (validationState === 'Valid') {
+      rightButtonProperties?.onclick?.(event);
+    }
+  }
+
+  function bottomButtonClick(event: MouseEvent): void {
+    if (validationState === 'Valid') {
+      bottomButtonProperties?.onclick?.(event);
+    }
+  }
+
+  function triggerRightClickIfValid(event: KeyboardEvent): void {
+    if (event?.key === 'Enter' && validationState === 'Valid') {
+      rightButtonProperties?.onkeyup?.(event);
+    }
+  }
+
+  function handleStateChange(state: ValidationState): void {
+    validationState = state;
+    inputProperties.onStateChange?.(state);
+  }
+
+  export function focus() {
+    inputRef?.focus();
+  }
 </script>
 
-{#if properties.inputProperties.label && properties.inputProperties.label !== ''}
-  <label class="label" for={properties.inputProperties.name}>
-    {properties.inputProperties.label}
+{#if inputProperties.label && inputProperties.label !== ''}
+  <label class="label" for={inputProperties.name}>
+    {inputProperties.label}
   </label>
 {/if}
 
 <div class="input-button-container">
-  <div class="input-button {state === 'Invalid' ? 'invalid' : 'valid'}">
-    {#if properties.leftButtonProperties != null}
+  <div class="input-button {validationState === 'Invalid' ? 'invalid' : 'valid'}">
+    {#if leftButtonProperties != null}
       <div class="left-button">
-        <Button properties={properties.leftButtonProperties} on:click={leftButtonClick}>
-          <slot name="left-icon" slot="icon" />
-        </Button>
+        <Button {...leftButtonProperties} icon={leftIcon} />
       </div>
     {/if}
-    <div class="input">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="input" onkeyup={triggerRightClickIfValid}>
       <Input
-        properties={properties.inputProperties}
-        on:keyup={triggerRightClickIfValid}
-        on:stateChange={handleState}
-        on:input={(event) => dispatch('input', event)}
-        on:focusout={onFocusOut}
-        on:valueChange
-        on:focus
-        on:click={onInputClick}
-        --input-width="auto"
+        {...inputProperties}
+        bind:value
         bind:this={inputRef}
+        onStateChange={handleStateChange}
+        --input-width="auto"
       />
     </div>
-    {#if properties.rightButtonProperties != null}
+    {#if rightButtonProperties != null}
       <div class="right-button">
-        <Button properties={properties.rightButtonProperties} on:click={rightButtonClick} />
+        <Button
+          {...rightButtonProperties}
+          enable={isRightButtonEnabled}
+          onclick={rightButtonClick}
+        />
       </div>
     {/if}
   </div>
-  {#if properties.bottomButtonProperties != null}
+  {#if bottomButtonProperties != null}
     <div class="bottom-button">
-      <Button properties={properties.bottomButtonProperties} on:click={bottomButtonClick} />
+      <Button {...bottomButtonProperties} onclick={bottomButtonClick} />
     </div>
   {/if}
 </div>
-{#if properties.inputProperties.message.onError !== '' && state === 'Invalid'}
+{#if inputProperties.onErrorMessage !== '' && validationState === 'Invalid'}
   <div class="error-message">
-    {properties.inputProperties.message.onError}
+    {inputProperties.onErrorMessage}
   </div>
 {/if}
-{#if typeof properties.inputProperties.message.info === 'string' && properties.inputProperties.message.info !== ''}
+{#if typeof inputProperties.infoMessage === 'string' && inputProperties.infoMessage !== ''}
   <div class="info-message">
-    {properties.inputProperties.message.info}
+    {inputProperties.infoMessage}
   </div>
 {/if}
 
 <style>
   .input-button-container {
+    --button-width: 100%;
+    --input-border: none;
+    --input-focus-border: none;
     height: var(--input-height, fit-content);
     font-size: var(--input-font-size, 16px) !important;
     font-weight: 500;
     margin: var(--input-button-margin);
     border-radius: var(--input-button-radius, 4px);
-    --button-width: 100%;
-    --input-border: none;
-    --input-focus-border: none;
     border: var(--input-button-container-border);
     background: var(--input-button-container-background);
     padding: var(--input-button-container-padding);

package/dist/InputButton/InputButton.svelte.d.ts

@@ -1,35 +1,6 @@
-import { SvelteComponent } from "svelte";
-import { type InputButtonProperties } from './properties';
-declare const __propDef: {
-    props: {
-        properties?: InputButtonProperties;
-        focus?: () => void;
-    };
-    events: {
-        valueChange: CustomEvent<any>;
-        focus: FocusEvent;
-        input: CustomEvent<any>;
-        rightButtonClick: CustomEvent<any>;
-        leftButtonClick: CustomEvent<any>;
-        bottomButtonClick: CustomEvent<any>;
-        stateChange: CustomEvent<any>;
-        focusout: CustomEvent<any>;
-        inputClick: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'left-icon': {
-            slot: string;
-        };
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type InputButtonProps = typeof __propDef.props;
-export type InputButtonEvents = typeof __propDef.events;
-export type InputButtonSlots = typeof __propDef.slots;
-export default class InputButton extends SvelteComponent<InputButtonProps, InputButtonEvents, InputButtonSlots> {
-    get focus(): () => void;
-}
-export {};
+import type { InputButtonProperties } from './properties';
+declare const InputButton: import("svelte").Component<InputButtonProperties, {
+    focus: () => void;
+}, "value">;
+type InputButton = ReturnType<typeof InputButton>;
+export default InputButton;

package/dist/InputButton/properties.d.ts

@@ -1,9 +1,11 @@
 import type { ButtonProperties } from '../Button/properties';
 import type { InputProperties } from '../Input/properties';
+import type { Snippet } from 'svelte';
 export type InputButtonProperties = {
-    inputProperties: InputProperties;
-    rightButtonProperties: ButtonProperties | null;
-    leftButtonProperties: ButtonProperties | null;
+    value: string;
+    inputProperties: Omit<InputProperties, 'value'>;
+    rightButtonProperties?: ButtonProperties | null;
+    leftButtonProperties?: ButtonProperties | null;
     bottomButtonProperties?: ButtonProperties | null;
+    leftIcon?: Snippet;
 };
-export declare const defaultInputButtonProperties: InputButtonProperties;

package/dist/InputButton/properties.js

@@ -1,18 +1 @@
-import { defaultInputProperties } from '../Input/properties';
-const inputProperties = {
-    ...defaultInputProperties,
-    actionInput: true
-};
-const rightButtonProperties = {
-    text: 'click',
-    enable: false,
-    showLoader: false,
-    loaderType: null,
-    type: 'submit'
-};
-export const defaultInputButtonProperties = {
-    inputProperties,
-    rightButtonProperties,
-    leftButtonProperties: null,
-    bottomButtonProperties: null
-};
+export {};

package/dist/ListItem/ListItem.svelte

@@ -1,108 +1,131 @@
-<script>import Accordion from "../Accordion/Accordion.svelte";
-import Loader from "../Loader/Loader.svelte";
-import Img from "../Img/Img.svelte";
-import { defaultListItemProperties } from "./properties";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let properties = defaultListItemProperties;
-export let showLoader = false;
-export let showRightContentLoader = false;
-export let expand = false;
-export let preventFocus = false;
-function handleLeftImageClick() {
-  dispatch("leftImageClick");
-}
-function handleRightImageClick() {
-  dispatch("rightImageClick");
-}
-function handleCenterTextClick() {
-  dispatch("centerTextClick");
-}
-function handleItemClick() {
-  dispatch("itemClick");
-}
-function handleTopSectionClick() {
-  dispatch("topSectionClick");
-}
+<script lang="ts">
+  import Accordion from '../Accordion/Accordion.svelte';
+  import Loader from '../Loader/Loader.svelte';
+  import Img from '../Img/Img.svelte';
+  import type { ListItemProperties } from './properties';
+
+  let {
+    leftImageUrl,
+    leftImageFallbackUrl,
+    rightImageUrl,
+    label,
+    useAccordion = false,
+    rightContentText,
+    testId,
+    topSectionTestId,
+    rightImageTestId,
+    leftImageTestId,
+    centerTextTestId,
+    showLoader = false,
+    showRightContentLoader = false,
+    expand = $bindable(false),
+    preventFocus = false,
+    leftContent,
+    centerContent,
+    rightContent,
+    bottomContent,
+    onleftImageClick,
+    onrightImageClick,
+    oncenterTextClick,
+    onitemClick,
+    ontopSectionClick,
+    onkeydown
+  }: ListItemProperties = $props();
+
+  function handleLeftImageClick(event: MouseEvent): void {
+    onleftImageClick?.(event);
+  }
+
+  function handleRightImageClick(event: MouseEvent): void {
+    onrightImageClick?.(event);
+  }
+
+  function handleCenterTextClick(event: MouseEvent): void {
+    oncenterTextClick?.(event);
+  }
+
+  function handleItemClick(event: MouseEvent): void {
+    onitemClick?.(event);
+  }
+
+  function handleTopSectionClick(event: MouseEvent): void {
+    ontopSectionClick?.(event);
+  }
 </script>
 
-{#if properties.leftImageUrl || properties.rightImageUrl || properties.label || $$slots.leftContent || $$slots.centerContent || $$slots.rightContent || $$slots.bottomContent}
+{#if leftImageUrl || rightImageUrl || label || leftContent || centerContent || rightContent || bottomContent}
   <div class="item-container">
     {#if showLoader}
-      <div class="item-loader" />
+      <div class="item-loader"></div>
     {/if}
     <div
       class="item"
       class:prevent-focus={preventFocus}
-      on:click={handleItemClick}
-      on:keydown
+      onclick={handleItemClick}
+      {onkeydown}
       role="button"
       tabindex="0"
-      data-pw={properties.testId}
+      data-pw={testId}
     >
       <div
         class="top-section"
         class:prevent-focus={preventFocus}
-        on:click={handleTopSectionClick}
-        on:keydown
+        onclick={handleTopSectionClick}
+        {onkeydown}
         role="button"
         tabindex="0"
-        data-pw={properties.topSectionTestId}
+        data-pw={topSectionTestId}
       >
         <div class="left-content">
-          {#if properties.leftImageUrl}
+          {#if leftImageUrl}
             <div
               class:prevent-focus={preventFocus}
-              on:click={handleLeftImageClick}
-              on:keydown
+              onclick={handleLeftImageClick}
+              {onkeydown}
               role="button"
               tabindex="0"
-              data-pw={properties.leftImageTestId}
+              data-pw={leftImageTestId}
             >
-              <Img
-                src={properties.leftImageUrl}
-                alt=""
-                fallback={properties.leftImageFallbackUrl}
-              />
+              <Img src={leftImageUrl} alt="" fallback={leftImageFallbackUrl} />
             </div>
           {/if}
-          {#if $$slots.leftContent}
-            <slot name="leftContent" />
+          {#if leftContent}
+            {@render leftContent?.()}
           {/if}
         </div>
         <div class="center-content">
-          {#if properties.label}
+          {#if label}
             <div
               class="center-text"
               class:prevent-focus={preventFocus}
-              on:click={handleCenterTextClick}
-              on:keydown
+              onclick={handleCenterTextClick}
+              {onkeydown}
               role="button"
               tabindex="0"
-              data-pw={properties.centerTextTestId}
+              data-pw={centerTextTestId}
             >
               <!-- eslint-disable-next-line -->
-              {@html properties.label}
+              {@html label}
             </div>
           {/if}
-          {#if $$slots.centerContent}
-            <slot name="centerContent" />
+          {#if centerContent}
+            {@render centerContent?.()}
           {/if}
         </div>
         <div class="right-content">
-          {#if $$slots.rightContent}
-            <slot name="rightContent" />
+          {#if rightContent}
+            {@render rightContent?.()}
           {/if}
-          {#if properties.rightImageUrl}
+          {#if rightImageUrl}
             <div
               class:prevent-focus={preventFocus}
-              on:click={handleRightImageClick}
-              on:keydown
+              onclick={handleRightImageClick}
+              {onkeydown}
               role="button"
               tabindex="0"
-              data-pw={properties.rightImageTestId}
+              data-pw={rightImageTestId}
             >
-              <img class="right-img" src={properties.rightImageUrl} alt="" />
+              <img class="right-img" src={rightImageUrl} alt="" />
             </div>
           {/if}
           {#if showRightContentLoader}
@@ -110,15 +133,15 @@ function handleTopSectionClick() {
               <Loader />
             </div>
           {/if}
-          {#if properties.rightContentText && properties.rightContentText !== ''}
-            <span class="right-content-text">{properties.rightContentText}</span>
+          {#if rightContentText && rightContentText !== ''}
+            <span class="right-content-text">{rightContentText}</span>
           {/if}
         </div>
       </div>
       <div class="bottom-section">
-        {#if $$slots.bottomContent && properties.useAccordion}
-          <Accordion bind:expand>
-            <slot name="bottomContent" />
+        {#if bottomContent && useAccordion}
+          <Accordion {expand}>
+            {@render bottomContent?.()}
           </Accordion>
         {/if}
       </div>

package/dist/ListItem/ListItem.svelte.d.ts

@@ -1,35 +1,4 @@
-import { SvelteComponent } from "svelte";
-import { type ListItemProperties } from './properties';
-declare const __propDef: {
-    props: {
-        properties?: ListItemProperties;
-        showLoader?: boolean;
-        showRightContentLoader?: boolean;
-        expand?: boolean;
-        preventFocus?: boolean;
-    };
-    events: {
-        keydown: KeyboardEvent;
-        leftImageClick: CustomEvent<any>;
-        rightImageClick: CustomEvent<any>;
-        centerTextClick: CustomEvent<any>;
-        itemClick: CustomEvent<any>;
-        topSectionClick: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        leftContent: {};
-        centerContent: {};
-        rightContent: {};
-        bottomContent: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ListItemProps = typeof __propDef.props;
-export type ListItemEvents = typeof __propDef.events;
-export type ListItemSlots = typeof __propDef.slots;
-export default class ListItem extends SvelteComponent<ListItemProps, ListItemEvents, ListItemSlots> {
-}
-export {};
+import type { ListItemProperties } from './properties';
+declare const ListItem: import("svelte").Component<ListItemProperties, {}, "expand">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/ListItem/properties.d.ts

@@ -1,14 +1,28 @@
+import type { Snippet } from 'svelte';
 export type ListItemProperties = {
-    leftImageUrl: string | null;
-    leftImageFallbackUrl: string | null;
-    rightImageUrl: string | null;
-    label: string | null;
-    useAccordion: boolean;
-    rightContentText: string | null;
+    leftImageUrl?: string | null;
+    leftImageFallbackUrl?: string | null;
+    rightImageUrl?: string | null;
+    label?: string | null;
+    useAccordion?: boolean;
+    rightContentText?: string | null;
     testId?: string;
     topSectionTestId?: string;
     rightImageTestId?: string;
     leftImageTestId?: string;
     centerTextTestId?: string;
+    showLoader?: boolean;
+    showRightContentLoader?: boolean;
+    expand?: boolean;
+    preventFocus?: boolean;
+    leftContent?: Snippet;
+    centerContent?: Snippet;
+    rightContent?: Snippet;
+    bottomContent?: Snippet;
+    onleftImageClick?: (event: MouseEvent) => void;
+    onrightImageClick?: (event: MouseEvent) => void;
+    oncenterTextClick?: (event: MouseEvent) => void;
+    onitemClick?: (event: MouseEvent) => void;
+    ontopSectionClick?: (event: MouseEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
 };
-export declare const defaultListItemProperties: ListItemProperties;

package/dist/ListItem/properties.js

@@ -1,8 +1 @@
-export const defaultListItemProperties = {
-    leftImageUrl: null,
-    leftImageFallbackUrl: null,
-    rightImageUrl: null,
-    label: null,
-    useAccordion: false,
-    rightContentText: null
-};
+export {};

package/dist/Loader/Loader.svelte

@@ -1,7 +1,4 @@
-<script context="module">export const prerender = true;
-</script>
-
-<div class="loader" />
+<div class="loader"></div>
 
 <style>
   .loader {

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

@@ -1,17 +1,26 @@
-import { SvelteComponent } from "svelte";
-export declare const prerender = true;
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+export default Loader;
+type Loader = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export type LoaderProps = typeof __propDef.props;
-export type LoaderEvents = typeof __propDef.events;
-export type LoaderSlots = typeof __propDef.slots;
-export default class Loader extends SvelteComponent<LoaderProps, LoaderEvents, LoaderSlots> {
+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;
 }
-export {};