@juspay/svelte-ui-components 2.0.0 → 2.1.0

package/dist/Input/Input.svelte

@@ -141,12 +141,19 @@
     }
   }
 
+  function _onFocusOut(event: FocusEvent) {
+    if (validationState === 'InProgress' && value.length > 0) {
+      validationState = 'Invalid';
+    }
+    onFocusout(event);
+  }
+
   $effect(() => {
     onStateChange(validationState);
   });
 </script>
 
-<div class="input-container">
+<div class="input-container" class:input-error={validationState === 'Invalid' && !actionInput}>
   {#if typeof label === 'string' && label !== '' && !actionInput}
     <label class="label" for={name}>
       {label}
@@ -160,7 +167,7 @@
       {placeholder}
       autocomplete={autoComplete}
       {name}
-      onfocusout={onFocusout}
+      onfocusout={_onFocusOut}
       oninput={handleOnInput}
       onpaste={handleOnPaste}
       onclick={onClick}
@@ -178,7 +185,7 @@
       {placeholder}
       autocomplete={autoComplete}
       {name}
-      onfocusout={onFocusout}
+      onfocusout={_onFocusOut}
       oninput={handleOnInput}
       onpaste={onPaste}
       data-pw={testId}
@@ -219,7 +226,7 @@
     appearance: none !important;
     -webkit-appearance: none !important; /* For Safari MWeb */
     box-shadow: var(--input-box-shadow, 0px 1px 8px #2f537733);
-    border: var(--input-border, none);
+    border: var(--input-border, 1px solid transparent);
     resize: none;
     visibility: var(--input-visibility, visible);
     text-align: var(--input-text-align, left);
@@ -228,7 +235,12 @@
 
   textarea:focus,
   input:focus {
-    border: var(--input-focus-border);
+    border: var(--input-focus-border, 1px solid transparent);
+  }
+
+  .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;
   }
 
   .action-input {

package/dist/Input/properties.d.ts

@@ -1,6 +1,8 @@
 import type { AutoCompleteType, CustomValidator, InputDataType, TextTransformer, ValidationState } from '../types';
-export type InputProperties = {
+export type InputProperties = OptionalInputProps & {
     value: string;
+};
+export type OptionalInputProps = {
     placeholder?: string | null;
     dataType?: InputDataType;
     label?: string | null;

package/dist/InputButton/InputButton.svelte

@@ -49,6 +49,8 @@
   }
 </script>
 
+
+<div class="container">
 {#if inputProperties.label && inputProperties.label !== ''}
   <label class="label" for={inputProperties.name}>
     {inputProperties.label}
@@ -69,7 +71,7 @@
         bind:value
         bind:this={inputRef}
         onStateChange={handleStateChange}
-        --input-width="auto"
+        actionInput={true}
       />
     </div>
     {#if rightButtonProperties != null}
@@ -93,17 +95,27 @@
     {inputProperties.onErrorMessage}
   </div>
 {/if}
-{#if typeof inputProperties.infoMessage === 'string' && inputProperties.infoMessage !== ''}
+{#if inputProperties.infoMessage !== ''}
   <div class="info-message">
     {inputProperties.infoMessage}
   </div>
 {/if}
+</div>
+
 
 <style>
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+
   .input-button-container {
     --button-width: 100%;
     --input-border: none;
     --input-focus-border: none;
+    --input-box-shadow: none;
+    --input-margin: none;
+    --input-width: auto;
     height: var(--input-height, fit-content);
     font-size: var(--input-font-size, 16px) !important;
     font-weight: 500;
@@ -205,7 +217,7 @@
     --button-font-size: var(--right-button-font-size);
     --button-height: var(--right-button-height, 54px);
     --button-padding: var(--right-button-padding);
-    --button-border-radius: var(--right-button-border-radius);
+    --button-border-radius: var(--right-button-border-radius, 0px 4px 4px 0px);
     --button-width: var(--right-button-width, 100%);
     --cursor: var(--right-button-cursor);
     --opacity: var(--right-button-opacity);

package/dist/index.d.ts

@@ -25,7 +25,7 @@ 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 } from './Input/properties';
+export type { InputProperties, OptionalInputProps } from './Input/properties';
 export type { InputButtonProperties } from './InputButton/properties';
 export type { ListItemProperties } from './ListItem/properties';
 export type { InputDataType } from './types';

package/package.json

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