nexus-shared 1.1.17 → 1.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexus-shared",
-  "version": "1.1.17",
+  "version": "1.1.19",
   "description": "Nexus shared React components for Next.js",
   "type": "module",
   "sideEffects": [

package/src/api-services/system-service.tsx

@@ -1,6 +1,5 @@
 import { EIcons } from "../interfaces/icon-interfaces";
-import { EMenuTargets, EMenuVisibility, IClientMenu, IPanelMenu, IUtilityMenu } from "../interfaces/menu-interfaces";
-import { ENexusModules } from "../interfaces/system-interfaces";
+import { EMenuVisibility, IClientMenu, IPanelMenu, IUtilityMenu } from "../interfaces/menu-interfaces";
 
 export const GetClientMenus = async (): Promise<IClientMenu[]> => {
   return [

package/src/client.ts

@@ -21,11 +21,12 @@ export * from "./components/inputs/input";
 export * from "./components/inputs/input-box";
 export * from "./components/inputs/input-element";
 export * from "./helpers/browser-helpers";
+export * from "./services/http-client-services";
 export * from "./services/loader-service";
 export * from "./services/localstorage-service";
+export * from "./services/message-services";
 export * from "./services/theme-service";
-
 // Core
 export * from "./nexus-client";
+export * from "./proxy-api-client";
 export * from "./sso-client";
-

package/src/components/documents/button.tsx

@@ -42,11 +42,15 @@ export const CreateButton = (param: IButton, parent?: HTMLElement | UN, styles?:
 
   SetElementStyles(button, styles);
 
-  button.className = DEFAULT_BUTTON_CLASS(param.columnSize, undefined, param.borderSize, param.background ?? NEXUS_CONFIG.DEFAULT_BACKGROUND, undefined, needColumnSize);
+  button.className = DEFAULT_BUTTON_CLASS(param.columnSize ?? 0, 0, param.borderSize, param.background ?? NEXUS_CONFIG.DEFAULT_BACKGROUND, param.defaultClass, needColumnSize);
   const span = document.createElement("span");
   span.textContent = param.label instanceof Function ? (param.label(param.data) ?? null) : (param.label ?? null);
   button.appendChild(span);
   button.onclick = (e) => param.onClick?.(e, button, param.data, param.displayOrder);
+  button.style.height = "var(--IH)";
+
+  button.classList.add("df", "ac", "pl5", "pr5");
+
   if (param.url) {
     (button as HTMLAnchorElement).href = param.url;
     (button as HTMLAnchorElement).target = param.target ?? ETargets.Blank;

package/src/components/inputs/input-box.tsx

@@ -1,3 +1,4 @@
+import { INPUT_ICON_BOX_CLASS } from "../../helpers/input-helpers";
 import { DEFAULT_INPUT_BORDER_SIZE, IInputRootParameters, REQUIRED_TEXT1 } from "../../interfaces/input-interfaces";
 import { EBackgrounds } from "../../interfaces/theme-interfaces";
 import { NEXUS_CONFIG } from "../../nexus.environments";
@@ -16,7 +17,7 @@ export const CreateInputBox = (param: IInputRootParameters<any>, child: HTMLElem
   if (param.label && !isTabular) {
     const label = document.createElement("label");
     label.className = "pa t50 ty50 left ilb en anim ml2";
-    label.innerHTML = param.label + ((param as any).isRequired ? `<span class="tx21 fs-08 ml1">${REQUIRED_TEXT1}</span>` : "");
+    label.innerHTML = param.label + ((param as any).isRequired ? `<span style="color: var(--B13)" class="fs-08 ml1">${REQUIRED_TEXT1}</span>` : "");
     label.htmlFor = param.id;
     box.appendChild(label);
   }
@@ -24,7 +25,8 @@ export const CreateInputBox = (param: IInputRootParameters<any>, child: HTMLElem
   if (param.icon) {
     box.classList.add("df", "ac");
     const I = param.icon;
-    CreateIconBox(I.icon, box, null, null, I.type, I.background ?? param.background ?? EBackgrounds.None, I.boxSize, I.iconSize, null, null, null, null, I.opacity, null, null, null, null, I.onClicked, I.onMouseEnter, (I.onClicked || I.onMouseEnter) !== undefined);
+    const iconBox = CreateIconBox(I.icon, box, null, null, I.type, I.background ?? param.background ?? EBackgrounds.None, I.boxSize, I.iconSize, null, null, null, null, I.opacity, null, null, null, null, I.onClicked, I.onMouseEnter, (I.onClicked || I.onMouseEnter) !== undefined);
+    iconBox.classList.add(INPUT_ICON_BOX_CLASS);
   }
 
   if (parent) parent.appendChild(box);

package/src/components/inputs/input-form.tsx

@@ -1,8 +1,13 @@
-'use client';
+"use client";
 
 import React, { useEffect } from "react";
-import { GetInputId } from "../../helpers/input-helpers";
-import { IForm, IFormCreateResults, IInputCreateResults } from "../../interfaces/input-interfaces";
+import { HideLoader, ShowLoader, SubmitApi, WarningMessage } from "../../client";
+import { GetInputId, SetResponseErrorMessage } from "../../helpers/input-helpers";
+import { IsValidInputs } from "../../helpers/validation-helpers";
+import { EActions, EAnimationClasses, EBackgrounds, EButtonTypes, EFlexPositions, EIcons, EIconTypes, ESizes, GetApiInformations, GetButton, UN, VoidCallbackHandler } from "../../interface";
+import { DEFAULT_ROW_GAP, EInputTypes, GetForms, IApiForm, IForm, IFormCreateResults, IInputCreateResults, ISubmitForm, ISubmitFormCreateResults, OnFormChangeHandler, OnFormSubmitHandler } from "../../interfaces/input-interfaces";
+import { GetFormButtonPosition } from "../../services/localstorage-service";
+import { CreateButton } from "../documents/button";
 import { CreateInputs, DisposeInputs } from "./input";
 
 const forceChangeDefaultValue = (inputResults: IInputCreateResults[], newDefaultValue: any): boolean => {
@@ -16,37 +21,144 @@ const forceChangeDefaultValue = (inputResults: IInputCreateResults[], newDefault
   }
   return isChanged;
 };
-export const CreateForm = (param: IForm, rowGap?: number): IFormCreateResults | null => {
-  const { inputs, onChanged, index, isTabularForm, parentIdentifier } = param;
+export const CreateForm = (param: IForm, parentIdentifier: HTMLElement | string | UN, rowGap?: number, onFormRendered?: VoidCallbackHandler): IFormCreateResults | null => {
+  const { inputs, onChanged, index, isTabularForm, defaultValue } = param;
   const parentElement = typeof parentIdentifier === "string" ? document.getElementById(parentIdentifier) : parentIdentifier;
 
   if (!parentElement || inputs.length === 0 || !onChanged) {
     //TODO: WarningMessage("Invalid Inputs", "Please provide valid inputs, onChanged function and parent element.");
     return null;
   }
+  const rowElement = document.createElement("div");
+  if (parentElement) parentElement.appendChild(rowElement);
 
-  const parent = document.createElement("div");
-  parent.className = `row g${rowGap ?? 3} sb fg`;
-  parent.style.paddingTop = "var(--IEM)";
-  if (parentElement) parentElement.appendChild(parent);
+  rowElement.className = `row g${rowGap ?? DEFAULT_ROW_GAP} sb fg`;
+  rowElement.style.paddingTop = "var(--IEM)";
 
-  const inputResults = CreateInputs(inputs, onChanged, index, isTabularForm, parent, param.defaultValue);
+  const inputResults = CreateInputs(inputs, onChanged, index, isTabularForm, rowElement, defaultValue);
+
+  onFormRendered?.(inputResults);
 
   return {
     inputResults: inputResults,
-    formElement: parent,
+    formElement: rowElement,
     dispose: (invokeOnChanged?: boolean) => {
       DisposeInputs(inputResults, invokeOnChanged);
-      parent.remove();
+      rowElement.remove();
     },
     forceChangeDefaultValue: (newDefaultValue: any) => forceChangeDefaultValue(inputResults, newDefaultValue),
   } as IFormCreateResults;
 };
 
-export const Form = ({ param, rowGap }: { param: IForm; rowGap?: number }): React.ReactNode => {
+export const Form = ({ param, parentIdentifier, rowGap, onFormRendered }: { param: IForm; parentIdentifier: HTMLElement | string | UN; rowGap?: number; onFormRendered?: VoidCallbackHandler }): React.ReactNode => {
   useEffect(() => {
-    const formResults = CreateForm(param, rowGap);
+    const formResults = CreateForm(param, parentIdentifier, rowGap, onFormRendered);
     return () => formResults?.dispose();
   }, [param, rowGap]);
   return <React.Fragment></React.Fragment>;
 };
+
+export const CreateSubmitForm = (param: ISubmitForm, parentIdentifier: HTMLElement | string | UN, rowGap?: number, buttonPosition?: EFlexPositions, formAction?: EActions | UN, onFormRendered?: VoidCallbackHandler): ISubmitFormCreateResults | null => {
+  const parentElement = typeof parentIdentifier === "string" ? document.getElementById(parentIdentifier) : parentIdentifier;
+  buttonPosition = buttonPosition ?? GetFormButtonPosition();
+
+  if (!parentElement || !param.inputs || param.inputs.length === 0 || !param.onSubmit) return null;
+
+  let formValue: any | UN;
+  let defaultValue: any | UN = GetApiInformations.IS_API(param.defaultValue) ? null : param.defaultValue;
+  const onChangedHandler: OnFormChangeHandler = (currentValue, isInitilizing, isForcedChanged, isDisposed, currentKey, index, type, dataSource) => {
+    formValue = currentValue;
+    if (param.onChanged) param.onChanged(currentValue, isInitilizing, isForcedChanged, isDisposed, currentKey, index, type, dataSource);
+  };
+  const onFormSubmit = async (event: Event) => {
+    event.preventDefault();
+    const isValidForm = IsValidInputs(formResults?.inputResults, formValue, true, true);
+    const isValid = param.overrideValidation ? await param.overrideValidation(formValue, isValidForm, formResults, formAction) : isValidForm;
+
+    param.onSubmit({ ...formValue }, isValidForm, event, formResults!, defaultValue);
+    if (!isValid) WarningMessage("Invalid Inputs", "Please fill all required fields correctly.");
+  };
+  const formParameters = GetForms.FORM(param.inputs, onChangedHandler, defaultValue);
+  const formElement = document.createElement("form");
+  parentElement.appendChild(formElement);
+  const formResults = CreateForm(formParameters, formElement, rowGap, onFormRendered);
+  if (!formResults) return null;
+  formResults.formElement.classList.add("h100", "fg");
+
+  const submitButton = param.inputs.find((input) => input.inputType === EInputTypes.SubmitButton);
+  if (!submitButton) {
+    const buttonStyle: React.CSSProperties = {
+      width: "fit-content",
+    };
+    const DEFAULT_BUTTON_CLASS = "col- jc r";
+    rowGap = rowGap ?? DEFAULT_ROW_GAP;
+    const PADDING = rowGap * 2;
+
+    const buttonParam = GetButton("Submit", null, null, EIcons.SAVE, null, null, EBackgrounds.PrimaryColor, DEFAULT_BUTTON_CLASS, null, EIconTypes.FILLED, null, 0, null, EButtonTypes.SUBMIT);
+    const buttonContainer = document.createElement("div");
+    buttonContainer.className = `df ac pt1 pb5 ${buttonPosition} bb pr${PADDING} pl${PADDING}`;
+    buttonContainer.style.minHeight = "calc(var(--IH) * 1.5)";
+
+    formElement.appendChild(buttonContainer);
+    CreateButton(buttonParam, buttonContainer, buttonStyle, false);
+
+    if (param.onCancelClick) {
+      const buttonParam = GetButton("Cancel", null, null, EIcons.CLOSE, param.onCancelClick, null, EBackgrounds.ErrorColor, DEFAULT_BUTTON_CLASS + ` ml${PADDING}`, null, EIconTypes.FILLED, null, 0, null, EButtonTypes.BUTTON);
+      CreateButton(buttonParam, buttonContainer, buttonStyle, false);
+    }
+  }
+
+  formElement.className = `df ddc w100 h100 oh fg pr`;
+  formElement.addEventListener("submit", onFormSubmit);
+
+  const onDispose = () => {
+    formResults?.dispose();
+    formElement.remove();
+  };
+
+  return {
+    formElement: formElement,
+    dispose: () => onDispose(),
+    formObject: formResults,
+  };
+};
+
+export const SubmitForm = ({ param, parentIdentifier, rowGap, buttonPosition, formAction, onFormRendered }: { param: ISubmitForm; parentIdentifier: HTMLElement | string | UN; rowGap?: number; buttonPosition?: EFlexPositions; formAction?: EActions | UN; onFormRendered?: VoidCallbackHandler }): React.ReactNode => {
+  useEffect(() => {
+    const submitForm = CreateSubmitForm(param, parentIdentifier, rowGap, buttonPosition, formAction, onFormRendered);
+    return () => submitForm?.dispose();
+  }, [param, parentIdentifier, rowGap, buttonPosition, formAction]);
+  return <React.Fragment></React.Fragment>;
+};
+
+export const CreateApiForm = (param: IApiForm, parentIdentifier: HTMLElement | string | UN, rowGap?: number, buttonPosition?: EFlexPositions, formAction?: EActions | UN, overrideLoaderParend?: HTMLElement | string | UN, successMessage?: boolean | UN, errorMessage?: boolean | UN, onFormRendered?: VoidCallbackHandler): ISubmitFormCreateResults | null => {
+  let isLoading = false;
+  const onFormSubmit: OnFormSubmitHandler = async (currentValue, isValidForm, event, form, defaultValue) => {
+    if (isLoading) return;
+    isLoading = true;
+
+    if (param.onSubmit) param.onSubmit(currentValue, isValidForm, event, form, defaultValue);
+    if (!isValidForm) return;
+
+    const loaderParent = overrideLoaderParend ?? submitForm?.formElement ?? parentIdentifier;
+    ShowLoader(loaderParent, EAnimationClasses.SPIN, true, ESizes.Normal, null, null, null, "r");
+    const apiResponse = await SubmitApi(param.api, currentValue, successMessage, errorMessage);
+    if (!apiResponse.isSuccess) SetResponseErrorMessage(apiResponse, submitForm?.formObject.inputResults);
+    HideLoader(loaderParent);
+    param.onApiSubmit(currentValue, apiResponse, submitForm!, defaultValue);
+    isLoading = false;
+  };
+  const submitFormParam = GetForms.SUBMITFORM(param?.inputs, onFormSubmit, param?.defaultValue, param?.overrideValidation, param?.onChanged, param?.onCancelClick);
+  const submitForm = CreateSubmitForm(submitFormParam, parentIdentifier, rowGap, buttonPosition, formAction, onFormRendered);
+  if (!submitForm) return null;
+
+  return submitForm;
+};
+
+export const ApiForm = ({ param, parentIdentifier, rowGap, buttonPosition, formAction, overrideLoaderParend, successMessage, errorMessage, onFormRendered }: { param: IApiForm; parentIdentifier: HTMLElement | string | UN; rowGap?: number; buttonPosition?: EFlexPositions; formAction?: EActions | UN; overrideLoaderParend?: HTMLElement | string | UN; successMessage?: boolean | UN; errorMessage?: boolean | UN; onFormRendered?: VoidCallbackHandler }): React.ReactNode => {
+  useEffect(() => {
+    const apiForm = CreateApiForm(param, parentIdentifier, rowGap, buttonPosition, formAction, overrideLoaderParend, successMessage, errorMessage, onFormRendered);
+    return () => apiForm?.dispose();
+  }, [param, parentIdentifier, rowGap, buttonPosition, formAction, overrideLoaderParend, successMessage, errorMessage]);
+  return <React.Fragment></React.Fragment>;
+};

package/src/components/layouts/global-layout.tsx

@@ -39,11 +39,13 @@ export const GlobalLayout = async ({ children, globalLayout }: Readonly<{ childr
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
-            backgroundColor: "rgb(40, 40, 40)",
+            backgroundColor: "rgb(60, 60, 60)",
           }}
           id={ROOT_LOADER_IDENTITY}
         >
-          <img src={FILES.LOGO.ICON} alt={"logo"} style={{ minHeight: "3rem", minWidth: "3rem", width: "3rem", height: "3rem" }} />
+          <a href={"/"} className="p5  h r bg52" style={{ marginTop: "8rem" }} title="Visit Home Page">
+            <img src={FILES.LOGO.ICON} alt={"logo"} style={{ minHeight: "3rem", minWidth: "3rem", width: "3rem", height: "3rem" }} />
+          </a>
         </div>
         {children}
         <Script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" strategy="lazyOnload"></Script>

package/src/components/layouts/layout-helpers.tsx

@@ -1,23 +1,23 @@
-'use client';
-
-import { useEffect } from "react";
-import { RemoveElement } from "../../helpers/browser-helpers";
-import { IGlobalLayout, ROOT_LOADER_IDENTITY } from "../../interfaces/layout-interfaces";
-import { DEFAULT_THEME_INFORMATIONS } from "../../interfaces/theme-interfaces";
-import { O } from "../../nexus-client";
-import { InitializeStyles } from "../../services/theme-service";
-
-export const LayoutHelpers = ({ globalLayout }: Readonly<{ globalLayout: IGlobalLayout }>) => {
-  useEffect(() => {
-    globalLayout.systemThemes = DEFAULT_THEME_INFORMATIONS;
-    O.systemThemes = DEFAULT_THEME_INFORMATIONS;
-
-    const timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      RemoveElement(ROOT_LOADER_IDENTITY, 500);
-      InitializeStyles();
-    }, 50);
-  }, []);
-
-  return <div className="nexus-popup-container"></div>;
-};
+"use client";
+
+import { useEffect } from "react";
+import { RemoveElement } from "../../helpers/browser-helpers";
+import { IGlobalLayout, ROOT_LOADER_IDENTITY } from "../../interfaces/layout-interfaces";
+import { DEFAULT_THEME_INFORMATIONS } from "../../interfaces/theme-interfaces";
+import { O } from "../../nexus-client";
+import { InitializeStyles } from "../../services/theme-service";
+
+export const LayoutHelpers = ({ globalLayout }: Readonly<{ globalLayout: IGlobalLayout }>) => {
+  useEffect(() => {
+    globalLayout.systemThemes = DEFAULT_THEME_INFORMATIONS;
+    O.systemThemes = DEFAULT_THEME_INFORMATIONS;
+
+    const timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      RemoveElement(ROOT_LOADER_IDENTITY, 500);
+      InitializeStyles();
+    }, 50);
+  }, [globalLayout]);
+
+  return <div className="nexus-popup-container"></div>;
+};

package/src/helpers/browser-helpers.tsx

@@ -1,3 +1,4 @@
+import { UN } from "../interface";
 import { EAnimationClasses } from "../interfaces/layout-interfaces";
 import { NEXUS_INFO } from "../nexus.environments";
 import { EKeyModifier, EKeys } from "./../interfaces/browser-interfaces";
@@ -6,7 +7,7 @@ import { Debounce } from "./utility-helpers";
 
 export const IsBrowser = (): boolean => typeof window !== "undefined" && typeof document !== "undefined";
 
-export const RemoveElement = async (elementIdentity: string | HTMLElement, timeout?: number, animation?: EAnimationClasses): Promise<boolean> => {
+export const RemoveElement = async (elementIdentity: string | HTMLElement, timeout?: number | UN, animation?: EAnimationClasses | UN): Promise<boolean> => {
   return new Promise(async (resolve) => {
     if (!IsBrowser() || !elementIdentity) return resolve(false);
     else if (typeof elementIdentity === "string") {
@@ -69,3 +70,42 @@ export const FindChildElements = (parent: HTMLElement, childSelector: string, sh
     return children.length > 0 ? [children[0]] : [];
   }
 };
+export const PxToRem = (px: number): number => {
+  const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+  return Math.round((px / fontSize) * 1000) / 1000;
+};
+
+export const ConvertColorToRGBA = (color: string, alpha: number = 0.1): string => {
+  if (!color) return "rgba(0, 0, 0, 0.1)";
+
+  let finalColor = color.trim();
+  if (finalColor.startsWith("var(")) finalColor = finalColor.replace(/^var\(\s*/, "").replace(/\s*\)$/, "");
+  // CSS Variable Support
+  if (finalColor.startsWith("--")) finalColor = getComputedStyle(document.documentElement).getPropertyValue(finalColor).trim();
+
+  // Create temporary element for browser auto parsing
+  const temp = document.createElement("div");
+  temp.style.color = finalColor;
+
+  document.body.appendChild(temp);
+
+  const computed = getComputedStyle(temp).color;
+
+  document.body.removeChild(temp);
+
+  // computed => rgb(...) or rgba(...)
+  const match = computed.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:[,\s\/]+([\d.]+))?\s*\)/i);
+
+  if (!match) return "rgba(0, 0, 0, 1)";
+
+  const r = parseInt(match[1], 10);
+  const g = parseInt(match[2], 10);
+  const b = parseInt(match[3], 10);
+
+  let a = match[4] !== undefined ? parseFloat(match[4]) : 1;
+
+  // Override alpha if provided
+  if (alpha) a = alpha;
+
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+};

package/src/helpers/input-helpers.tsx

@@ -1,8 +1,10 @@
-import { DEFAULT_ICON_ELEMENT_NAME } from "../interface";
+import { DEFAULT_ICON_ELEMENT_NAME, IErrorRespose } from "../interface";
 import { EValueChangeTypes, IInputCreateResults, IInputRootParameters } from "../interfaces/input-interfaces";
 import { ESizes } from "../interfaces/layout-interfaces";
 import { UN } from "../interfaces/type-interfaces";
+import { AddRemoveErrorFromInput } from "./validation-helpers";
 
+export const INPUT_ICON_BOX_CLASS = "input-icon-box";
 export const GetParentKey = (parentKey?: string | null) => {
   if (parentKey) return parentKey.split("|")[0];
   return undefined;
@@ -23,22 +25,50 @@ export const ForceSetValue = (input?: IInputCreateResults | null, value?: any |
     clearTimeout(timeoutValue);
   }, timeout ?? 0);
 };
+
+export const ApplyPasswordInputs = (inputResults: IInputCreateResults[] | UN, selectors: string[] | UN) => {
+  if (!inputResults || inputResults.length === 0 || !selectors || selectors.length === 0) return;
+  for (const selector of selectors) {
+    const input = inputResults.find((x) => x.input.id === selector);
+    if (input) ApplyPasswordInput(input.rootElement.querySelector(`div.ib.${INPUT_ICON_BOX_CLASS}`), input.inputElement);
+  }
+};
+
 export const ApplyPasswordInput = (iconbox: HTMLElement | null, inputElement: HTMLElement | null) => {
   const input = inputElement as HTMLInputElement | undefined;
   if (!input || !iconbox) return;
+
+  if (!iconbox.classList.contains("h")) iconbox.classList.add("h");
+
   const icon = iconbox.querySelector(DEFAULT_ICON_ELEMENT_NAME) as HTMLElement | null;
-  if (icon) icon.setAttribute("name", "eye");
+  if (!icon) return;
   const onMouseLeave = () => {
     iconbox.removeEventListener("mouseleave", onMouseLeave);
     iconbox.removeEventListener("click", onClicked);
     input.type = "password";
     if (icon) icon.setAttribute("name", "key");
   };
+  const onMouseEnter = () => {
+    icon.setAttribute("name", "eye");
+    iconbox.addEventListener("mouseleave", onMouseLeave);
+    iconbox.addEventListener("click", onClicked);
+  };
   const onClicked = () => {
     const isPassword = input.type === "password";
     input.type = isPassword ? "text" : "password";
     if (icon) icon.setAttribute("name", isPassword ? "eye-off" : "eye");
   };
-  iconbox.addEventListener("mouseleave", onMouseLeave);
-  iconbox.addEventListener("click", onClicked);
+  iconbox.addEventListener("mouseenter", onMouseEnter);
+};
+
+export const SetResponseErrorMessage = (apiResponse: IErrorRespose, inputResults: IInputCreateResults[] | UN) => {
+  if (!apiResponse || !inputResults || inputResults.length === 0 || !apiResponse.inputName) return;
+
+  const inputKeys = apiResponse.inputName.toLowerCase().split("|");
+  let isFirstElement = true;
+  for (const inputKey of inputKeys) {
+    const input = inputResults.find((x) => GetInputId(x.input).toLowerCase() === inputKey);
+    if (input) AddRemoveErrorFromInput(input.input, input.inputElement, true, apiResponse.message, isFirstElement);
+    isFirstElement = false;
+  }
 };

package/src/helpers/utility-helpers.tsx

@@ -42,3 +42,4 @@ export function Debounce<T extends (...args: any[]) => void>(func: T, delay?: nu
 
   return debounced;
 }
+export const Delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));