@juspay/svelte-ui-components 2.2.4 → 2.8.0

package/dist/Button/Button.svelte

@@ -31,8 +31,7 @@
     <div class="button-progress-bar"></div>
   {/if}
   <button
-    style:--opacity={enable ? 1 : 0.4}
-    style:--cursor={enable ? 'pointer' : 'not-allowed'}
+    class:disabled={!enable}
     onclick={handleButtonClick}
     {onkeyup}
     disabled={!(enable && !showLoader)}
@@ -46,7 +45,7 @@
       <div class="button-icon">{@render icon()}</div>
     {/if}
     {#if text}
-      <div class="button-text">{text}</div>
+      <div class="button-text">{@html text}</div>
     {/if}
   </button>
 </div>
@@ -81,6 +80,11 @@
     box-shadow: var(--button-box-shadow, none);
   }
 
+  .disabled {
+    cursor: var(--disabled-cursor, not-allowed);
+    opacity: var(--disabled-opacity, 0.4);
+  }
+
   .button-loader {
     order: var(--button-loader-order, 1);
   }

package/dist/Input/Input.svelte

@@ -23,6 +23,8 @@
     name = '',
     testId = '',
     textTransformers = [],
+    textViewPresentation = [],
+    onFocus = () => {},
     onFocusout = () => {},
     onInput = () => {},
     onPaste = () => {},
@@ -60,7 +62,7 @@
     return valueValidation;
   });
 
-  let showErrorMessage = $derived(validationState === 'Invalid');
+  const showErrorMessage = $derived(validationState === 'Invalid');
 
   function handleOnInput(event: Event) {
     if (inputElement === null) {
@@ -81,12 +83,16 @@
       }
       if (numberLength > maxLength) {
         const existingInput = value;
-        if (existingInput.length == maxLength) {
-          inputElement.value = value;
+        if (existingInput.length === maxLength) {
+          inputElement.value = applyTextPresentation(value);
           return;
         }
+        /**
+         * choose last max length number of digits if length is bigger than max length passed in props
+         */
         currentValue = currentValue.substring(numberLength - maxLength);
       }
+      currentValue = applyTextPresentation(currentValue);
       inputElement.value = currentValue;
     }
     value = inputElement.value;
@@ -128,7 +134,9 @@
           /**
            * choose last max length number of digits if length is bigger than max length passed in props
            */
-          const finalValue = filteredNumber.substring(filteredNumberLength - maxLength);
+          const finalValue = applyTextPresentation(
+            filteredNumber.substring(filteredNumberLength - maxLength)
+          );
           // Adding reactivity
           value = finalValue;
           onPaste(event);
@@ -141,6 +149,13 @@
     }
   }
 
+  function applyTextPresentation(currentValue: string): string {
+    return textViewPresentation.reduce((prevValue, currIndexFunction) => {
+      let newValue = currIndexFunction(prevValue);
+      return newValue;
+    }, currentValue);
+  }
+
   function _onFocusOut(event: FocusEvent) {
     if (validationState === 'InProgress' && value.length > 0) {
       validationState = 'Invalid';
@@ -167,6 +182,7 @@
       {placeholder}
       autocomplete={autoComplete}
       {name}
+      onfocus={onFocus}
       onfocusout={_onFocusOut}
       oninput={handleOnInput}
       onpaste={handleOnPaste}
@@ -185,9 +201,11 @@
       {placeholder}
       autocomplete={autoComplete}
       {name}
+      onfocus={onFocus}
       onfocusout={_onFocusOut}
       oninput={handleOnInput}
-      onpaste={onPaste}
+      onpaste={handleOnPaste}
+      onclick={onClick}
       data-pw={testId}
       class:action-input={actionInput}
       disabled={disable}
@@ -251,7 +269,7 @@
 
   .action-input {
     border-radius: var(--input-radius, 4px 0px 0px 4px);
-    box-shadow: 0px 0px 0px #ffffff;
+    box-shadow: var(--input-box-shadow, 0px 0px 0px #ffffff);
     margin-bottom: 0;
   }
 

package/dist/Input/properties.d.ts

@@ -21,10 +21,12 @@ export type OptionalInputProperties = {
     autoComplete?: AutoCompleteType;
     name?: string;
     textTransformers?: TextTransformer[];
+    textViewPresentation?: TextTransformer[];
     testId?: string;
 };
 export type InputEventProperties = {
     onInput?: (value: string, event: Event) => void;
+    onFocus?: (event: FocusEvent) => void;
     onFocusout?: (event: FocusEvent) => void;
     onPaste?: (event: ClipboardEvent) => void;
     onClick?: (event: MouseEvent) => void;

package/dist/InputButton/InputButton.svelte

@@ -15,7 +15,8 @@
     rightButtonEventProperties,
     leftButtonEventProperties,
     bottomButtonEventProperties,
-    leftIcon
+    leftIcon,
+    rightIcon
   }: InputButtonProperties = $props();
 
   let validationState = $state<ValidationState>('InProgress');
@@ -23,7 +24,7 @@
   let inputRef: SvelteComponent | null = $state(null);
 
   // Derive enable state for right button
-  let isRightButtonEnabled = $derived(validationState === 'Valid');
+  const isRightButtonEnabled = $derived(validationState === 'Valid');
 
   function rightButtonClick(event: MouseEvent): void {
     if (validationState === 'Valid') {
@@ -71,6 +72,7 @@
       <div class="input" onkeyup={triggerRightClickIfValid}>
         <Input
           {...inputProperties}
+          {...inputEventProperties}
           bind:value
           bind:this={inputRef}
           onStateChange={handleStateChange}
@@ -83,6 +85,7 @@
             {...rightButtonProperties}
             enable={isRightButtonEnabled}
             onclick={rightButtonClick}
+            icon={rightIcon}
           />
         </div>
       {/if}
@@ -163,7 +166,7 @@
     font-size: var(--input-label-msg-text-size, 12px);
     color: var(--input-label-msg-text-color, #637c95);
     line-height: var(--input-label-msg-text-line-height);
-    margin-bottom: 6px;
+    margin: var(--input-label-msg-text-margin, 0px 0px 6px 0px);
   }
 
   .invalid {
@@ -203,6 +206,11 @@
     flex-direction: row;
     --button-content-gap: var(--left-button-content-gap);
     --button-content-flex-direction: var(--left-button-content-flex-direction, row);
+    --button-icon-order: var(--left-button-icon-order);
+    --button-icon-display: var(--left-button-icon-display);
+    --button-text-order: var(--left-button-text-order);
+    --disabled-cursor: var(--left-button-disabled-cursor);
+    --disabled-opacity: var(--left-button-disabled-opacity);
   }
 
   .right-button {
@@ -227,5 +235,10 @@
     --button-content-gap: var(--right-button-content-gap);
     --button-visibility: var(--right-button-visibility, visible);
     --button-content-flex-direction: var(--right-button-content-flex-direction, row);
+    --button-icon-order: var(--right-button-icon-order);
+    --button-icon-display: var(--right-button-icon-display);
+    --button-text-order: var(--right-button-text-order);
+    --disabled-cursor: var(--right-button-disabled-cursor);
+    --disabled-opacity: var(--right-button-disabled-opacity);
   }
 </style>

package/dist/InputButton/properties.d.ts

@@ -11,6 +11,7 @@ export type OptionalInputButtonProperties = {
     leftButtonProperties?: _ButtonProperties | null;
     bottomButtonProperties?: _ButtonProperties | null;
     leftIcon?: Snippet;
+    rightIcon?: Snippet;
 };
 export type InputButtonEventProperties = {
     inputEventProperties?: InputEventProperties;

package/dist/Toast/Toast.svelte

@@ -172,7 +172,9 @@
     top: var(--toast-top, 10px);
     left: var(--toast-left, 0);
     right: var(--toast-right, 0);
-    background-color: var(--default-background-color, #87ceeb);
+    background-color: var(--toast-background-color, #87ceeb);
+    opacity: var(--toast-opacity, 1);
+    box-sizing: var(--toast-box-sizing);
   }
 
   .no-page-overlap {
@@ -180,14 +182,17 @@
   }
 
   .toast-icon-wrapper {
+    display: flex;
     width: var(--toast-icon-wrapper-width, 20px);
     height: var(--toast-icon-wrapper-height, 20px);
     margin: var(--toast-icon-margin, 0px 6px 0px 0px);
     padding: var(--toast-icon-wrapper-padding, 1px);
+    align-items: center;
   }
 
   .toast-icon {
     height: var(--toast-icon-height, 100%);
+    filter: var(--toast-icon-filter);
     border-radius: var(--toast-icon-border-radius, 50%);
   }
 
@@ -219,25 +224,25 @@
 
   .success {
     color: var(--toast-success-text, #fff);
-    background-color: var(--toast-background-color, #24aa5a);
+    background-color: var(--toast-success-background-color, var(--toast-background-color, #24aa5a));
     --toast-border: var(--toast-success-border);
   }
 
   .info {
     color: var(--toast-info-text, #fff);
-    background-color: var(--toast-background-color, #87ceeb);
+    background-color: var(--toast-info-background-color, var(--toast-background-color, #87ceeb));
     --toast-border: var(--toast-info-border);
   }
 
   .warn {
     color: var(--toast-warn-text, #fff);
-    background-color: var(--toast-background-color, #f3a42d);
+    background-color: var(--toast-warn-background-color, var(--toast-background-color, #f3a42d));
     --toast-border: var(--toast-warn-border);
   }
 
   .error {
     color: var(--toast-error-text, #fff);
-    background-color: var(--toast-background-color, #f04438);
+    background-color: var(--toast-error-background-color, var(--toast-background-color, #f04438));
     --toast-border: var(--toast-error-border);
   }
 </style>

package/dist/index.d.ts

@@ -23,6 +23,7 @@ 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 { default as Img } from './Img/Img.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -41,4 +42,5 @@ export type * from './Table/properties';
 export type * from './Stepper/properties';
 export type * from './Toast/properties';
 export type * from './IconStack/properties';
+export type * from './Img/properties';
 export { validateInput } from './utils';

package/dist/index.js

@@ -23,4 +23,5 @@ 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 { default as Img } from './Img/Img.svelte';
 export { validateInput } from './utils';

package/package.json

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