@juspay/svelte-ui-components 1.34.1 → 1.34.2

package/dist/Img/Img.svelte.d.ts

@@ -1,20 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        src: string;
-        alt: string;
-        fallback?: string | null;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ImgProps = typeof __propDef.props;
-export type ImgEvents = typeof __propDef.events;
-export type ImgSlots = typeof __propDef.slots;
-export default class Img extends SvelteComponent<ImgProps, ImgEvents, ImgSlots> {
-}
-export {};
+import type { ImgProperties } from './properties';
+declare const Img: import("svelte").Component<ImgProperties, {}, "">;
+type Img = ReturnType<typeof Img>;
+export default Img;

package/dist/Img/properties.d.ts

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

package/dist/Input/Input.svelte

@@ -1,171 +1,203 @@
-<script>import { validateInput } from "../utils";
-import { createEventDispatcher, onMount } from "svelte";
-import { defaultInputProperties } from "./properties";
-const dispatch = createEventDispatcher();
-export let properties = defaultInputProperties;
-let inputElement;
-$:
-  state = getValidationState(properties);
-function getValidationState(prop) {
-  const valueValidation = validateInput(
-    prop.value,
-    prop.dataType,
-    prop.validationPattern,
-    prop.inProgressPattern,
-    prop.validators
-  );
-  if (valueValidation === "InProgress" && prop.value.length > 0 && inputElement && inputElement !== document.activeElement) {
-    return "Invalid";
-  } else {
-    return valueValidation;
-  }
-}
-export function focus() {
-  try {
-    inputElement?.focus();
-    inputElement?.scrollIntoView({ behavior: "smooth", block: "center" });
-  } catch (error) {
-    console.error("Error focusing or scrolling inputElement:", error);
+<script lang="ts">
+  import { validateInput } from '../utils';
+  import type { InputProperties } from './properties';
+  import type { ValidationState } from '../types';
+
+  let {
+    value = $bindable(''),
+    placeholder = '',
+    dataType = 'text',
+    label = '',
+    onErrorMessage = '',
+    infoMessage = '',
+    validators = [],
+    disable = false,
+    validationPattern = null,
+    inProgressPattern = null,
+    addFocusColor = false,
+    maxLength = 1000,
+    minLength = 0,
+    actionInput = false,
+    useTextArea = false,
+    autoComplete = 'on',
+    name = '',
+    testId = '',
+    textTransformers = [],
+    onFocusout = () => {},
+    onInput = () => {},
+    onPaste = () => {},
+    onStateChange = () => {},
+    onClick = () => {}
+  }: InputProperties = $props();
+
+  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) {
-  let currentValue = inputElement.value;
-  if (properties.dataType === "tel" && currentValue.length > 0) {
-    currentValue = properties.textTransformers.reduce((prevValue, currIndexFunction) => {
-      let newValue = currIndexFunction(prevValue);
-      return newValue;
-    }, currentValue);
-    currentValue = currentValue.replace(/\D+|\D/gm, "");
-    const numberLength = currentValue.length;
-    if (numberLength === 0) {
-      inputElement.value = properties.value;
-      return;
+
+  let inputElement: HTMLInputElement | HTMLTextAreaElement | null = $state(null);
+
+  let validationState = $derived.by(() => {
+    const valueValidation: ValidationState = validateInput(
+      value,
+      dataType,
+      validationPattern,
+      inProgressPattern,
+      validators
+    );
+    if (
+      valueValidation === 'InProgress' &&
+      value.length > 0 &&
+      inputElement &&
+      inputElement !== document.activeElement
+    ) {
+      return 'Invalid';
     }
-    if (numberLength > properties.maxLength) {
-      const existingInput = properties.value;
-      if (existingInput.length == properties.maxLength) {
-        inputElement.value = properties.value;
-        return;
-      }
-      currentValue = currentValue.substring(numberLength - properties.maxLength);
+    return valueValidation;
+  });
+
+  let showErrorMessage = $derived(validationState === 'Invalid');
+
+  function handleOnInput(event: Event) {
+    if (inputElement === null) {
+      return;
     }
-    inputElement.value = currentValue;
-  }
-  properties.value = currentValue;
-  properties = properties;
-  dispatch("valueChange", { value: currentValue });
-  dispatch("input", event);
-}
-function onPaste(event) {
-  if (event.clipboardData) {
-    if (properties.dataType === "tel") {
-      let unfilteredNumber = event.clipboardData.getData("text");
-      unfilteredNumber = properties.textTransformers.reduce((prevValue, currIndexFunction) => {
+
+    let currentValue = inputElement.value;
+    if (dataType === 'tel' && currentValue.length > 0) {
+      currentValue = textTransformers.reduce((prevValue, currIndexFunction) => {
         let newValue = currIndexFunction(prevValue);
         return newValue;
-      }, unfilteredNumber);
-      const filteredNumber = unfilteredNumber.replace(/\D+|\D/gm, "");
-      const filteredNumberLength = filteredNumber.length;
-      if (filteredNumber.length === 0) {
-        properties = properties;
-        event.preventDefault();
+      }, currentValue);
+      currentValue = currentValue.replace(/\D+|\D/gm, '');
+      const numberLength = currentValue.length;
+      if (numberLength === 0) {
+        inputElement.value = value;
+        return;
       }
-      if (filteredNumber.length > properties.maxLength) {
-        const finalValue = filteredNumber.substring(filteredNumberLength - properties.maxLength);
-        properties.value = finalValue;
-        properties = properties;
-        dispatch("paste", event);
-        event.preventDefault();
+      if (numberLength > maxLength) {
+        const existingInput = value;
+        if (existingInput.length == maxLength) {
+          inputElement.value = value;
+          return;
+        }
+        currentValue = currentValue.substring(numberLength - maxLength);
       }
+      inputElement.value = currentValue;
     }
+    value = inputElement.value;
+    onInput(inputElement.value, event);
   }
-}
-function onFocusOut(event) {
-  if (state === "InProgress" && properties.value.length > 0) {
-    state = "Invalid";
-  }
-  dispatch("focusout", event);
-}
-function onClick(event) {
-  dispatch("click", event);
-}
-onMount(() => {
-  if (properties.focus) {
-    inputElement.focus();
+
+  /**
+   *
+   * @param event
+   * ENABLED ONLY FOR 'dataType = tel'
+   */
+  function handleOnPaste(event: ClipboardEvent) {
+    if (inputElement === null) {
+      return;
+    }
+
+    if (event.clipboardData) {
+      if (dataType === 'tel') {
+        let unfilteredNumber = event.clipboardData.getData('text');
+        unfilteredNumber = textTransformers.reduce((prevValue, currIndexFunction) => {
+          let newValue = currIndexFunction(prevValue);
+          return newValue;
+        }, unfilteredNumber);
+        /**
+         * removes everything except numbers
+         */
+        const filteredNumber = unfilteredNumber.replace(/\D+|\D/gm, '');
+        const filteredNumberLength = filteredNumber.length;
+        /**
+         * pasted text is non numeric
+         */
+        if (filteredNumber.length === 0) {
+          event.preventDefault();
+        }
+        /**
+         * user pasted 10+ digit number , overrides all cases
+         */
+        if (filteredNumber.length > maxLength) {
+          /**
+           * choose last max length number of digits if length is bigger than max length passed in props
+           */
+          const finalValue = filteredNumber.substring(filteredNumberLength - maxLength);
+          // Adding reactivity
+          value = finalValue;
+          onPaste(event);
+          event.preventDefault(); // prevent bubble and let finalValue be entered
+        }
+        /**
+         * if numeric pasted text has length less than max length, bubble to onInput.
+         */
+      }
+    }
   }
-  dispatch("stateChange", { state });
-});
-$: {
-  dispatch("stateChange", { state });
-}
+
+  $effect(() => {
+    onStateChange(validationState);
+  });
 </script>
 
 <div class="input-container">
-  {#if properties.label && properties.label !== '' && !properties.actionInput}
-    <label class="label" for={properties.name}>
-      {properties.label}
+  {#if typeof label === 'string' && label !== '' && !actionInput}
+    <label class="label" for={name}>
+      {label}
     </label>
   {/if}
 
-  {#if properties.useTextArea}
+  {#if useTextArea}
+    <!-- svelte-ignore element_invalid_self_closing_tag -->
     <textarea
-      value={properties.value}
-      placeholder={properties.placeholder}
-      autocomplete={properties.autoComplete}
-      name={properties.name}
-      on:keydown
-      on:keyup
-      on:keypress
-      on:focus
-      on:focusout={onFocusOut}
-      on:input={onInput}
-      on:paste={onPaste}
-      on:click={onClick}
-      class="
-        {properties.actionInput ? 'action-input' : ''}
-      "
-      style="--focus-border: {properties.addFocusColor ? 1 : 0}px;"
-      disabled={properties.disable}
+      {value}
+      {placeholder}
+      autocomplete={autoComplete}
+      {name}
+      onfocusout={onFocusout}
+      oninput={handleOnInput}
+      onpaste={handleOnPaste}
+      onclick={onClick}
+      class:action-input={actionInput}
+      style="--focus-border: {addFocusColor ? 1 : 0}px;"
+      disabled={disable}
       bind:this={inputElement}
-      maxlength={properties.dataType === 'tel' ? undefined : properties.maxLength}
-      minlength={properties.minLength}
+      maxlength={dataType === 'tel' ? undefined : maxLength}
+      minlength={minLength}
     />
   {:else}
     <input
-      type={properties.dataType}
-      value={properties.value}
-      placeholder={properties.placeholder}
-      autocomplete={properties.autoComplete}
-      name={properties.name}
-      on:keydown
-      on:keyup
-      on:keypress
-      on:focus
-      on:focusout={onFocusOut}
-      on:input={onInput}
-      on:paste={onPaste}
-      on:click={onClick}
-      data-pw={properties.testId}
-      class="
-      {properties.actionInput ? 'action-input' : ''}
-    "
-      disabled={properties.disable}
+      type={dataType}
+      {value}
+      {placeholder}
+      autocomplete={autoComplete}
+      {name}
+      onfocusout={onFocusout}
+      oninput={handleOnInput}
+      onpaste={onPaste}
+      data-pw={testId}
+      class:action-input={actionInput}
+      disabled={disable}
       bind:this={inputElement}
-      maxlength={properties.dataType === 'tel' ? undefined : properties.maxLength}
-      minlength={properties.minLength}
+      maxlength={dataType === 'tel' ? undefined : maxLength}
+      minlength={minLength}
     />
   {/if}
 
-  {#if properties.message.onError !== '' && showErrorMessage && !properties.actionInput}
+  {#if onErrorMessage !== '' && showErrorMessage && !actionInput}
     <div class="error-message">
-      {properties.message.onError}
+      {onErrorMessage}
     </div>
   {/if}
-  {#if properties.message.info !== '' && !properties.actionInput}
+  {#if infoMessage !== '' && !actionInput}
     <div class="info-message">
-      {properties.message.info}
+      {infoMessage}
     </div>
   {/if}
 </div>
@@ -184,6 +216,7 @@ $: {
     font-weight: var(--input-font-weight, 500);
     width: var(--input-width, fit-content);
     margin: var(--input-margin, 0px 0px 12px 0px);
+    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);

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

@@ -1,32 +1,6 @@
-import { SvelteComponent } from "svelte";
-import { type InputProperties } from './properties';
-declare const __propDef: {
-    props: {
-        properties?: InputProperties;
-        focus?: () => void;
-    };
-    events: {
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        keypress: KeyboardEvent;
-        focus: FocusEvent;
-        valueChange: CustomEvent<any>;
-        input: CustomEvent<any>;
-        paste: CustomEvent<any>;
-        focusout: CustomEvent<any>;
-        click: CustomEvent<any>;
-        stateChange: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-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 {};
+import type { InputProperties } from './properties';
+declare const Input: import("svelte").Component<InputProperties, {
+    focus: () => void;
+}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/Input/properties.d.ts

@@ -1,26 +1,27 @@
-import type { AutoCompleteType, CustomValidator, InputDataType, TextTransformer } from '../types';
+import type { AutoCompleteType, CustomValidator, InputDataType, TextTransformer, ValidationState } from '../types';
 export type InputProperties = {
     value: string;
-    placeholder: string;
-    dataType: InputDataType;
-    label: string | null;
-    message: {
-        onError: string;
-        info: string;
-    };
-    validators: CustomValidator[];
-    focus: boolean;
-    disable: boolean;
-    validationPattern: RegExp | null;
-    inProgressPattern: RegExp | null;
-    addFocusColor: boolean;
-    maxLength: number;
-    minLength: number;
-    actionInput: boolean;
-    useTextArea: boolean;
-    autoComplete: AutoCompleteType;
-    name: string;
-    textTransformers: TextTransformer[];
+    placeholder?: string | null;
+    dataType?: InputDataType;
+    label?: string | null;
+    onErrorMessage?: string | null;
+    infoMessage?: string | null;
+    validators?: CustomValidator[];
+    disable?: boolean;
+    validationPattern?: RegExp | null;
+    inProgressPattern?: RegExp | null;
+    addFocusColor?: boolean;
+    maxLength?: number;
+    minLength?: number;
+    actionInput?: boolean;
+    useTextArea?: boolean;
+    autoComplete?: AutoCompleteType;
+    name?: string;
+    textTransformers?: TextTransformer[];
     testId?: string;
+    onInput?: (value: string, event: Event) => void;
+    onFocusout?: (event: FocusEvent) => void;
+    onPaste?: (event: ClipboardEvent) => void;
+    onClick?: (event: MouseEvent) => void;
+    onStateChange?: (state: ValidationState) => void;
 };
-export declare const defaultInputProperties: InputProperties;

package/dist/Input/properties.js

@@ -1,23 +1 @@
-export const defaultInputProperties = {
-    value: '',
-    placeholder: '',
-    dataType: 'text',
-    label: '',
-    message: {
-        onError: 'error',
-        info: ''
-    },
-    validators: [],
-    focus: true,
-    disable: false,
-    validationPattern: null,
-    inProgressPattern: null,
-    addFocusColor: false,
-    maxLength: 1000,
-    minLength: 0,
-    actionInput: false,
-    useTextArea: false,
-    autoComplete: 'on',
-    name: '',
-    textTransformers: []
-};
+export {};