BZ-42256: feat: Add support for asynchronous validator in input

- Add support for asynchronous input validator.
- Change return type of custom validator for input component.

Author: rs-prasad

src/lib/Input/Input.svelte

@@ -9,11 +9,14 @@
   export let properties: InputProperties = defaultInputProperties;
   let inputElement: HTMLInputElement | HTMLTextAreaElement;
 
-  $: state = getValidationState(properties) as ValidationState;
+  let state: ValidationState = 'InProgress';
+
+  $: validateState(properties);
+
 
   // For making this function reactive, prop was passed as param
-  function getValidationState(prop: InputProperties): ValidationState {
-    const valueValidation: ValidationState = validateInput(
+  async function validateState(prop: InputProperties): Promise<void> {
+    const valueValidation: ValidationState = await validateInput(
       prop.value,
       prop.dataType,
       prop.validationPattern,
@@ -26,9 +29,9 @@
       inputElement &&
       inputElement !== document.activeElement
     ) {
-      return 'Invalid';
+      state = 'Invalid';
     } else {
-      return valueValidation;
+      state = valueValidation;
     }
   }
 

src/lib/types.ts

@@ -26,7 +26,7 @@ export type AutoCompleteType =
 export type CustomValidator = (
   inputValue: string,
   currentValidationState: ValidationState
-) => ValidationState;
+) => ValidationState | Promise<ValidationState>;
 
 export type TextTransformer = (text: string) => string;
 

src/lib/utils.ts

@@ -10,13 +10,13 @@ import type { CustomValidator, InputDataType, ValidationState } from '$lib/types
  * @returns ValidationState : InProgress | Valid | Invalid
  */
 
-export function validateInput(
+export async function validateInput(
   inputValue: string,
   dataType: InputDataType,
   validPattern: RegExp | null,
   inProgressPattern: RegExp | null,
   customValidators: CustomValidator[]
-): ValidationState {
+): Promise<ValidationState> {
   let validationResult: ValidationState = 'Valid';
 
   switch (dataType) {
@@ -40,17 +40,19 @@ export function validateInput(
       break;
   }
 
-  customValidators.forEach((validator: CustomValidator) => {
-    const currentResult = validator(inputValue, validationResult);
+  for (const validator of customValidators) {
+    const currentResult = await Promise.resolve(validator(inputValue, validationResult));
     if (currentResult === 'Invalid') {
       validationResult = 'Invalid';
+      break;
     } else if (currentResult === 'InProgress') {
       validationResult = 'InProgress';
+      break;
     } else {
       validationResult =
         validationResult === 'Valid' && currentResult === 'Valid' ? 'Valid' : validationResult;
     }
-  });
+  }
 
   return validationResult;
 }