@juspay/svelte-ui-components 1.20.0 → 1.22.0

package/dist/Input/Input.svelte

@@ -20,6 +20,14 @@ function getValidationState(prop) {
     return valueValidation;
   }
 }
+export function focus() {
+  try {
+    inputElement?.focus();
+    inputElement?.scrollIntoView({ behavior: "smooth", block: "center" });
+  } catch (error) {
+    console.error("Error focusing or scrolling inputElement:", error);
+  }
+}
 $:
   showErrorMessage = state === "Invalid";
 function onInput(event) {
@@ -79,6 +87,9 @@ function onFocusOut(event) {
   }
   dispatch("focusout", event);
 }
+function onClick(event) {
+  dispatch("click", event);
+}
 onMount(() => {
   if (properties.focus) {
     inputElement.focus();
@@ -110,6 +121,7 @@ $: {
       on:focusout={onFocusOut}
       on:input={onInput}
       on:paste={onPaste}
+      on:click={onClick}
       class="
         {properties.actionInput ? 'action-input' : ''}
       "
@@ -133,6 +145,7 @@ $: {
       on:focusout={onFocusOut}
       on:input={onInput}
       on:paste={onPaste}
+      on:click={onClick}
       data-pw={properties.dataPw}
       class="
       {properties.actionInput ? 'action-input' : ''}
@@ -194,25 +207,31 @@ $: {
     display: flex;
     flex-direction: column;
     margin: var(--input-container-margin);
+    padding: var(--input-container-padding);
   }
 
   .label {
     font-weight: var(--input-label-msg-text-weight, 400);
     font-size: var(--input-label-msg-text-size, 12px);
     color: var(--input-label-msg-text-color, #637c95);
-    margin-bottom: 6px;
+    margin: var(--input-label-msg-margin, 0px 0px 6px 0px);
+    padding: var(--input-label-msg-padding);
   }
 
   .error-message {
     font-weight: var(--input-error-msg-text-weight, 400);
     font-size: var(--input-error-msg-text-size, 12px);
     color: var(--input-error-msg-text-color, #fa1405);
+    margin: var(--input-error-msg-margin);
+    padding: var(--input-error-msg-padding);
   }
 
   .info-message {
     font-weight: var(--input-info-msg-text-weight, 400);
     font-size: var(--input-info-msg-text-size, 12px);
     color: var(--input-info-msg-text-color, #fa1405);
+    margin: var(--input-info-msg-margin);
+    padding: var(--input-info-msg-padding);
   }
 
   ::placeholder {

package/dist/Input/Input.svelte.d.ts

@@ -3,6 +3,7 @@ import { type InputProperties } from './properties';
 declare const __propDef: {
     props: {
         properties?: InputProperties | undefined;
+        focus?: (() => void) | undefined;
     };
     events: {
         keydown: KeyboardEvent;
@@ -12,6 +13,7 @@ declare const __propDef: {
         input: CustomEvent<any>;
         paste: CustomEvent<any>;
         focusout: CustomEvent<any>;
+        click: CustomEvent<any>;
         stateChange: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
@@ -22,5 +24,6 @@ export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
 export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+    get focus(): () => void;
 }
 export {};

package/dist/InputButton/InputButton.svelte

@@ -4,6 +4,7 @@ import { createEventDispatcher } from "svelte";
 import { defaultInputButtonProperties } from "./properties";
 const dispatch = createEventDispatcher();
 export let properties = defaultInputButtonProperties;
+let inputRef;
 $:
   state = "InProgress";
 $: {
@@ -40,6 +41,12 @@ function handleState(event) {
 function onFocusOut(event) {
   dispatch("focusout", event);
 }
+function onInputClick(event) {
+  dispatch("inputClick", event);
+}
+export function focus() {
+  inputRef?.focus();
+}
 </script>
 
 {#if properties.inputProperties.label && properties.inputProperties.label !== ''}
@@ -65,7 +72,9 @@ function onFocusOut(event) {
         on:input={(event) => dispatch('input', event)}
         on:focusout={onFocusOut}
         on:focus
+        on:click={onInputClick}
         --input-width="auto"
+        bind:this={inputRef}
       />
     </div>
     {#if properties.rightButtonProperties != null}
@@ -102,6 +111,8 @@ function onFocusOut(event) {
     --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);
   }
 
   .input-button {
@@ -110,6 +121,7 @@ function onFocusOut(event) {
     border-radius: var(--input-button-radius, 4px);
     border: var(--input-button-border);
     box-shadow: var(--input-button-box-shadow, 0px 1px 8px #2f537733);
+    background: var(--input-button-background);
   }
   .input-button-container:focus-within {
     border: var(--input-button-focus-border);
@@ -146,16 +158,16 @@ function onFocusOut(event) {
 
   .error-message {
     font-weight: var(--input-error-msg-text-weight, 400);
-    font-size: var(--input-error-msg-text-size, 14px);
+    font-size: var(--input-error-msg-text-size, 12px);
     color: var(--input-error-msg-text-color, #fa1405);
-    margin-top: 12px;
+    margin: var(--input-btn-error-msg-margin, 12px 0px 0px 0px);
   }
 
   .info-message {
     font-weight: var(--input-info-msg-text-weight, 400);
     font-size: var(--input-info-msg-text-size, 12px);
     color: var(--input-info-msg-text-color, #fa1405);
-    margin-top: 12px;
+    margin: var(--input-btn-info-msg-margin, 12px 0px 0px 0px);
   }
 
   .left-button {

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

@@ -3,6 +3,7 @@ import { type InputButtonProperties } from './properties';
 declare const __propDef: {
     props: {
         properties?: InputButtonProperties | undefined;
+        focus?: (() => void) | undefined;
     };
     events: {
         focus: FocusEvent;
@@ -12,6 +13,7 @@ declare const __propDef: {
         bottomButtonClick: CustomEvent<any>;
         stateChange: CustomEvent<any>;
         focusout: CustomEvent<any>;
+        inputClick: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -25,5 +27,6 @@ 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 {};

package/package.json

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