@juspay/svelte-ui-components 2.2.3 → 2.2.4

package/dist/Banner/properties.d.ts

@@ -1,9 +1,14 @@
 import type { Snippet } from 'svelte';
-export type BannerProperties = {
-    icon?: string | null;
+export type BannerProperties = MandatoryBannerProperties & OptionalBannerProperties & BannerEventProperties;
+export type MandatoryBannerProperties = {
     text: string;
+};
+export type OptionalBannerProperties = {
+    icon?: string | null;
     linkText?: string | null;
     rightContent?: Snippet;
+};
+export type BannerEventProperties = {
     onclick?: (event: MouseEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/Button/properties.d.ts

@@ -1,14 +1,19 @@
 import type { Snippet } from 'svelte';
 export type LoaderType = 'Circular' | 'ProgressBar';
-export type ButtonProperties = {
+export type ButtonProperties = OptionalButtonProperties & ButtonEventProperties & MandatoryButtonProperties;
+export type MandatoryButtonProperties = {
     text: string;
+};
+export type OptionalButtonProperties = {
     enable?: boolean;
     showProgressBar?: boolean;
     showLoader?: boolean;
     loaderType?: LoaderType;
     type?: 'submit' | 'reset' | 'button';
     testId?: string;
+    icon?: Snippet;
+};
+export type ButtonEventProperties = {
     onclick?: (event: MouseEvent) => void;
     onkeyup?: (event: KeyboardEvent) => void;
-    icon?: Snippet;
 };

package/dist/Carousel/properties.d.ts

@@ -3,11 +3,16 @@ export type CarouselView = {
     properties?: Record<string, unknown>;
     component: Component<Record<string, unknown>>;
 };
-export type CarouselProperties = {
+export type CarouselProperties = CarouselEventProperties & OptionalCarouselProperties & MandatoryCarouselProperties;
+export type MandatoryCarouselProperties = {
     views: CarouselView[];
+};
+export type OptionalCarouselProperties = {
     autoplay?: boolean;
     autoplayInterval?: number;
     showDots?: boolean;
     isScrollableLast?: boolean;
+};
+export type CarouselEventProperties = {
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/CheckListItem/properties.d.ts

@@ -1,7 +1,12 @@
 import type { Snippet } from 'svelte';
-export type CheckListItemProperties = {
+export type CheckListItemProperties = OptionalCheckListItemProperties & CheckListItemEventProperties & MandatoryCheckListItemProperties;
+export type MandatoryCheckListItemProperties = {
     text: string;
+};
+export type OptionalCheckListItemProperties = {
     checked?: boolean;
     checkboxLabel?: Snippet;
+};
+export type CheckListItemEventProperties = {
     onclick?: (checked: boolean) => void;
 };

package/dist/GridItem/properties.d.ts

@@ -1,8 +1,13 @@
-export type GridItemProperties = {
+export type GridItemProperties = OptionalGridItemProperties & GridItemEventProperties & MandatoryGridItemProperties;
+export type MandatoryGridItemProperties = {
     icon: string;
     text: string;
+};
+export type OptionalGridItemProperties = {
     headerIcon?: string | null;
     showLoader?: boolean;
+};
+export type GridItemEventProperties = {
     onclick?: (event: MouseEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/Icon/properties.d.ts

@@ -1,6 +1,11 @@
-export type IconProperties = {
+export type IconProperties = OptionalIconProperties & IconEventProperties & MandatoryIconProperties;
+export type MandatoryIconProperties = {
     icon: string;
+};
+export type OptionalIconProperties = {
     text?: string | null;
+};
+export type IconEventProperties = {
     onclick?: (event: MouseEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/Img/properties.d.ts

@@ -1,5 +1,8 @@
-export type ImgProperties = {
+export type ImgProperties = OptionalImgProperties & MandatoryImgProperties;
+export type MandatoryImgProperties = {
     src: string;
     alt: string;
+};
+export type OptionalImgProperties = {
     fallback?: string | null;
 };

package/dist/Input/Input.svelte

@@ -239,8 +239,14 @@
   }
 
   .input-error {
-    --input-focus-border: var(--input-error-border, 1px solid var(--input-error-msg-text-color, #fa1405)) !important;
-    --input-border: var(--input-error-border, 1px solid var(--input-error-msg-text-color, #fa1405)) !important;
+    --input-focus-border: var(
+      --input-error-border,
+      1px solid var(--input-error-msg-text-color, #fa1405)
+    ) !important;
+    --input-border: var(
+      --input-error-border,
+      1px solid var(--input-error-msg-text-color, #fa1405)
+    ) !important;
   }
 
   .action-input {

package/dist/Input/properties.d.ts

@@ -1,8 +1,9 @@
 import type { AutoCompleteType, CustomValidator, InputDataType, TextTransformer, ValidationState } from '../types';
-export type InputProperties = OptionalInputProps & {
+export type InputProperties = OptionalInputProperties & InputEventProperties & MandatoryInputProperties;
+export type MandatoryInputProperties = {
     value: string;
 };
-export type OptionalInputProps = {
+export type OptionalInputProperties = {
     placeholder?: string | null;
     dataType?: InputDataType;
     label?: string | null;
@@ -21,6 +22,8 @@ export type OptionalInputProps = {
     name?: string;
     textTransformers?: TextTransformer[];
     testId?: string;
+};
+export type InputEventProperties = {
     onInput?: (value: string, event: Event) => void;
     onFocusout?: (event: FocusEvent) => void;
     onPaste?: (event: ClipboardEvent) => void;

package/dist/InputButton/InputButton.svelte

@@ -11,6 +11,10 @@
     rightButtonProperties,
     leftButtonProperties,
     bottomButtonProperties,
+    inputEventProperties,
+    rightButtonEventProperties,
+    leftButtonEventProperties,
+    bottomButtonEventProperties,
     leftIcon
   }: InputButtonProperties = $props();
 
@@ -23,25 +27,25 @@
 
   function rightButtonClick(event: MouseEvent): void {
     if (validationState === 'Valid') {
-      rightButtonProperties?.onclick?.(event);
+      rightButtonEventProperties?.onclick?.(event);
     }
   }
 
   function bottomButtonClick(event: MouseEvent): void {
     if (validationState === 'Valid') {
-      bottomButtonProperties?.onclick?.(event);
+      bottomButtonEventProperties?.onclick?.(event);
     }
   }
 
   function triggerRightClickIfValid(event: KeyboardEvent): void {
     if (event?.key === 'Enter' && validationState === 'Valid') {
-      rightButtonProperties?.onkeyup?.(event);
+      rightButtonEventProperties?.onkeyup?.(event);
     }
   }
 
   function handleStateChange(state: ValidationState): void {
     validationState = state;
-    inputProperties.onStateChange?.(state);
+    inputEventProperties?.onStateChange?.(state);
   }
 
   export function focus() {
@@ -49,59 +53,57 @@
   }
 </script>
 
-
 <div class="container">
-{#if inputProperties.label && inputProperties.label !== ''}
-  <label class="label" for={inputProperties.name}>
-    {inputProperties.label}
-  </label>
-{/if}
-
-<div class="input-button-container">
-  <div class="input-button {validationState === 'Invalid' ? 'invalid' : 'valid'}">
-    {#if leftButtonProperties != null}
-      <div class="left-button">
-        <Button {...leftButtonProperties} icon={leftIcon} />
+  {#if inputProperties.label && inputProperties.label !== ''}
+    <label class="label" for={inputProperties.name}>
+      {inputProperties.label}
+    </label>
+  {/if}
+
+  <div class="input-button-container">
+    <div class="input-button {validationState === 'Invalid' ? 'invalid' : 'valid'}">
+      {#if leftButtonProperties != null}
+        <div class="left-button">
+          <Button {...leftButtonProperties} {...leftButtonEventProperties} icon={leftIcon} />
+        </div>
+      {/if}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="input" onkeyup={triggerRightClickIfValid}>
+        <Input
+          {...inputProperties}
+          bind:value
+          bind:this={inputRef}
+          onStateChange={handleStateChange}
+          actionInput={true}
+        />
       </div>
-    {/if}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="input" onkeyup={triggerRightClickIfValid}>
-      <Input
-        {...inputProperties}
-        bind:value
-        bind:this={inputRef}
-        onStateChange={handleStateChange}
-        actionInput={true}
-      />
+      {#if rightButtonProperties != null}
+        <div class="right-button">
+          <Button
+            {...rightButtonProperties}
+            enable={isRightButtonEnabled}
+            onclick={rightButtonClick}
+          />
+        </div>
+      {/if}
     </div>
-    {#if rightButtonProperties != null}
-      <div class="right-button">
-        <Button
-          {...rightButtonProperties}
-          enable={isRightButtonEnabled}
-          onclick={rightButtonClick}
-        />
+    {#if bottomButtonProperties != null}
+      <div class="bottom-button">
+        <Button {...bottomButtonProperties} onclick={bottomButtonClick} />
       </div>
     {/if}
   </div>
-  {#if bottomButtonProperties != null}
-    <div class="bottom-button">
-      <Button {...bottomButtonProperties} onclick={bottomButtonClick} />
+  {#if inputProperties.onErrorMessage !== '' && validationState === 'Invalid'}
+    <div class="error-message">
+      {inputProperties.onErrorMessage}
+    </div>
+  {/if}
+  {#if inputProperties.infoMessage !== ''}
+    <div class="info-message">
+      {inputProperties.infoMessage}
     </div>
   {/if}
 </div>
-{#if inputProperties.onErrorMessage !== '' && validationState === 'Invalid'}
-  <div class="error-message">
-    {inputProperties.onErrorMessage}
-  </div>
-{/if}
-{#if inputProperties.infoMessage !== ''}
-  <div class="info-message">
-    {inputProperties.infoMessage}
-  </div>
-{/if}
-</div>
-
 
 <style>
   .container {

package/dist/InputButton/properties.d.ts

@@ -1,13 +1,21 @@
-import type { ButtonProperties } from '../Button/properties';
-import type { InputProperties } from '../Input/properties';
+import type { ButtonEventProperties, MandatoryButtonProperties, OptionalButtonProperties } from '../Button/properties';
+import type { InputEventProperties, OptionalInputProperties } from '../Input/properties';
 import type { Snippet } from 'svelte';
-export type InputButtonProperties = OptionalInputButtonProperties & {
+export type InputButtonProperties = OptionalInputButtonProperties & InputButtonEventProperties & {
     value: string;
 };
+type _ButtonProperties = OptionalButtonProperties & MandatoryButtonProperties;
 export type OptionalInputButtonProperties = {
-    inputProperties: Omit<InputProperties, 'value'>;
-    rightButtonProperties?: ButtonProperties | null;
-    leftButtonProperties?: ButtonProperties | null;
-    bottomButtonProperties?: ButtonProperties | null;
+    inputProperties: OptionalInputProperties;
+    rightButtonProperties?: _ButtonProperties | null;
+    leftButtonProperties?: _ButtonProperties | null;
+    bottomButtonProperties?: _ButtonProperties | null;
     leftIcon?: Snippet;
 };
+export type InputButtonEventProperties = {
+    inputEventProperties?: InputEventProperties;
+    rightButtonEventProperties?: ButtonEventProperties | null;
+    leftButtonEventProperties?: ButtonEventProperties | null;
+    bottomButtonEventProperties?: ButtonEventProperties | null;
+};
+export {};

package/dist/ListItem/properties.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-export type ListItemProperties = {
+export type ListItemProperties = ListItemEventProperties & {
     leftImageUrl?: string | null;
     leftImageFallbackUrl?: string | null;
     rightImageUrl?: string | null;
@@ -19,6 +19,8 @@ export type ListItemProperties = {
     centerContent?: Snippet;
     rightContent?: Snippet;
     bottomContent?: Snippet;
+};
+export type ListItemEventProperties = {
     onleftImageClick?: (event: MouseEvent) => void;
     onrightImageClick?: (event: MouseEvent) => void;
     oncenterTextClick?: (event: MouseEvent) => void;

package/dist/Modal/properties.d.ts

@@ -3,7 +3,7 @@ import type { ModalTransition } from '../types';
 import type { Snippet } from 'svelte';
 export type ModalSize = 'large' | 'medium' | 'small' | 'fit-content';
 export type ModalAlign = 'top' | 'center' | 'bottom';
-export type ModalProperties = {
+export type ModalProperties = ModalEventProperties & {
     size?: ModalSize;
     align?: ModalAlign;
     showOverlay?: boolean;
@@ -26,6 +26,8 @@ export type ModalProperties = {
     testId?: string;
     content?: Snippet;
     footerSnippet?: Snippet;
+};
+export type ModalEventProperties = {
     onclose?: () => void;
     onheaderRightImageClick?: (event: MouseEvent) => void;
     onheaderLeftImageClick?: (event: MouseEvent) => void;

package/dist/Select/properties.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ImgProperties } from '../Img/properties';
-export type SelectProperties = {
+export type SelectProperties = SelectEventProperties & {
     dropDownIconAlt?: string;
     placeholder?: string | null;
     label?: string | null;
@@ -20,6 +20,8 @@ export type SelectProperties = {
     itemTestId?: string;
     leftContent?: Snippet;
     bottomContent?: Snippet;
+};
+export type SelectEventProperties = {
     onselect?: (event: {
         selectedItems: string | string[];
     }) => void;

package/dist/Status/properties.d.ts

@@ -1,8 +1,10 @@
 import type { ButtonProperties } from '../Button/properties';
-export type StatusProperties = {
+export type StatusProperties = StatusEventProperties & {
     statusIcon: string;
     statusText: string;
     statusDescription: string;
     buttonProperties?: ButtonProperties;
+};
+export type StatusEventProperties = {
     onbuttonClick?: () => void;
 };

package/dist/Stepper/properties.d.ts

@@ -9,10 +9,14 @@ export type Step = {
     label: string;
     icon?: string;
 };
-export type StepProperties = {
+export type StepProperties = OptionalStepProperties & StepEventProperties & {
     stepIndex: number;
     label: string;
+};
+export type OptionalStepProperties = {
     icon?: string;
+};
+export type StepEventProperties = {
     onclick?: (event: {
         selectedIndex: number;
     }) => void;

package/dist/Toast/Toast.svelte

@@ -46,7 +46,7 @@
    */
   function getAnimationConfig(
     overlapPage: boolean,
-    toastDirection?: ToastDirection,
+    toastDirection?: ToastDirection
   ): FlyAnimationConfig {
     // Initializing variables to store animation offsets
     let inX: number = 0;

package/dist/Toast/properties.d.ts

@@ -1,7 +1,7 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 export type ToastType = 'success' | 'error' | 'info' | 'warn';
 export type ToastDirection = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
-export type ToastProperties = {
+export type ToastProperties = ToastEventProperties & {
     duration?: number;
     leftIcon?: string | null;
     message: string;
@@ -19,5 +19,7 @@ export type ToastProperties = {
     subTextTestId?: string;
     closeIconTestId?: string;
     bottomContent?: Snippet;
+};
+export type ToastEventProperties = {
     onToastHide?: () => void;
 };

package/dist/Toggle/properties.d.ts

@@ -1,5 +1,7 @@
-export type ToggleProperties = {
+export type ToggleProperties = ToggleEventProperties & {
     checked?: boolean;
     text: string;
+};
+export type ToggleEventProperties = {
     onclick?: (checked: boolean) => void;
 };

package/dist/Toolbar/properties.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-export type ToolbarProperties = {
+export type ToolbarProperties = ToolbarEventProperties & {
     showBackButton?: boolean;
     text?: string | null;
     backIcon?: string | null;
@@ -7,6 +7,8 @@ export type ToolbarProperties = {
     centerContent?: Snippet;
     rightContent?: Snippet;
     additionalContent?: Snippet;
+};
+export type ToolbarEventProperties = {
     onbackClick?: () => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/index.d.ts

@@ -23,26 +23,22 @@ export { default as Step } from './Stepper/Step.svelte';
 export { default as Toast } from './Toast/Toast.svelte';
 export { default as GridItem } from './GridItem/GridItem.svelte';
 export { default as IconStack } from './IconStack/IconStack.svelte';
-export type { ButtonProperties } from './Button/properties';
-export type { ModalProperties, ModalAlign, ModalSize } from './Modal/properties';
-export type { InputProperties, OptionalInputProps } from './Input/properties';
-export type { InputButtonProperties, OptionalInputButtonProperties } from './InputButton/properties';
-export type { ListItemProperties } from './ListItem/properties';
-export type { InputDataType } from './types';
-export type { AutoCompleteType } from './types';
-export type { CustomValidator } from './types';
-export type { ValidationState } from './types';
-export type { FlyAnimationConfig } from './types';
-export type { IconProperties } from './Icon/properties';
-export type { BrandLoaderProperties } from './BrandLoader/properties';
-export type { StatusProperties } from './Status/properties';
-export type { SelectProperties } from './Select/properties';
-export type { ToolbarProperties } from './Toolbar/properties';
-export type { CarouselProperties } from './Carousel/properties';
-export type { BadgeProperties } from './Badge/properties';
-export type { BannerProperties } from './Banner/properties';
-export type { TableProperties } from './Table/properties';
-export type { StepperProperties } from './Stepper/properties';
-export type { ToastProperties } from './Toast/properties';
-export type { IconStackProperties } from './IconStack/properties';
+export type * from './Button/properties';
+export type * from './Modal/properties';
+export type * from './Input/properties';
+export type * from './InputButton/properties';
+export type * from './ListItem/properties';
+export type * from './types';
+export type * from './Icon/properties';
+export type * from './BrandLoader/properties';
+export type * from './Status/properties';
+export type * from './Select/properties';
+export type * from './Toolbar/properties';
+export type * from './Carousel/properties';
+export type * from './Badge/properties';
+export type * from './Banner/properties';
+export type * from './Table/properties';
+export type * from './Stepper/properties';
+export type * from './Toast/properties';
+export type * from './IconStack/properties';
 export { validateInput } from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "scripts": {
     "dev": "vite dev --host",
     "build": "vite build && npm run package",