nexus-shared 1.1.18 → 1.1.19

package/package.json

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

package/src/client.ts

@@ -24,8 +24,9 @@ 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/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/validation-helpers.tsx

@@ -0,0 +1,302 @@
+import { EInputTypes, ICheckbox, IDate, IInputCreateResults, IInputParameters, IInputRootParameters, INumber, ISelection, ITablularForm, ITextbox, RegexTypes, UN } from "../interface";
+import { BitwiseToList } from "./bitwise-helpers";
+import { GetInputId } from "./input-helpers";
+import { IsNullOrEmpty, MakeFirstLetterUpperCase } from "./string-helpers";
+
+export const MAX_INPUT_TYPE = 1900;
+export const MAX_HINT_LENGTH = 5;
+
+export const IsValidInputs = (inputObjects: IInputCreateResults[] | UN, inputFormValues: any, isAutoError: boolean, isAutoFocus: boolean): boolean => {
+  let isValid = true;
+  if (!inputObjects || inputObjects.length === 0) return true;
+  const sortedObjects = [...inputObjects].sort((a, b) => b.input.displayOrder - a.input.displayOrder);
+  for (const obj of sortedObjects) {
+    // Skip unsupported input types
+    if (obj.input.inputType >= MAX_INPUT_TYPE) continue;
+
+    const inputId = GetInputId(obj.input);
+    const inputValue = inputFormValues?.[inputId] ?? null;
+    const isValidInput = IsValidInput(obj, inputValue, isAutoError, isAutoFocus);
+    if (isValid) isValid = isValidInput;
+  }
+  return isValid;
+};
+
+export const IsValidInput = (inputObject: IInputCreateResults, inputValue: any, isAutoError: boolean, isAutoFocus: boolean): boolean => {
+  const input = inputObject.inputElement;
+  const inputParameters = inputObject.input;
+  const value = inputValue;
+
+  switch (inputParameters.inputType) {
+    //---------------------
+    case EInputTypes.Textbox:
+    case EInputTypes.Textarea:
+    case EInputTypes.Texteditor:
+      return IsValidTextbox(inputParameters as ITextbox, value, isAutoFocus, isAutoError, input);
+    //---------------------
+    case EInputTypes.Checkbox:
+      return IsValidCheck(inputParameters as ICheckbox, value as boolean, isAutoFocus, isAutoError, input);
+    //---------------------
+    case EInputTypes.MultiSelection:
+    case EInputTypes.SingleSelection:
+      return IsValidSelectionbox(inputParameters as ISelection, value, isAutoFocus, isAutoError, input);
+    //---------------------
+    case EInputTypes.Datepicker:
+      return IsValidDate(inputParameters as IDate, value as Date | UN, isAutoFocus, isAutoError, input);
+    //---------------------
+    case EInputTypes.Number:
+      return IsValidNumber(inputParameters as INumber, value as number | UN, isAutoFocus, isAutoError, input);
+    //---------------------
+    case EInputTypes.TabularForm:
+      return IsValidTabularform(inputParameters as ITablularForm, value as any[], isAutoFocus, isAutoError, input);
+    //---------------------
+    case EInputTypes.Radiobox:
+      return true;
+
+    default:
+      return false;
+  }
+};
+
+// ------------- Start Textbox Validation -------------
+function IsValidTextbox<T>(inputParameters: ITextbox, value: T | UN, isNeedFocus: boolean, isAutoError: boolean, input: HTMLElement | UN): boolean {
+  if (!inputParameters) return false;
+  return IsValidInputValueWithRegex(inputParameters, input, inputParameters.validatorKey, value as string | UN, inputParameters.minLength ?? 0, inputParameters.maxLength ?? 0, isAutoError, isNeedFocus, inputParameters.regexKey).isValid;
+}
+export function IsValidInputValueWithRegex(inputParameters: ITextbox, input: HTMLElement | UN, key: string | UN, value: string | UN, min: number, max: number, isAutoError: boolean = true, isNeedFocus: boolean, regularExpression: RegexTypes | UN): IValidationMessage {
+  const valid = IsValidInputValueWithLength(inputParameters, input, key, value, min, max, false, isNeedFocus);
+  if (Array.isArray(regularExpression)) {
+    if (IsNullOrEmpty(value)) return { isValid: false, message: InvalidValueMessage(key) };
+
+    const isMatch = regularExpression.includes(value as string);
+    const msg = !isMatch ? `${InvalidValueMessage(key)}\nOnly allowed values are: ${MakeFirstLetterUpperCase(regularExpression.slice(0, MAX_HINT_LENGTH).join(", "))}${regularExpression.length > MAX_HINT_LENGTH ? `...` : "."}` : null;
+    if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, !isMatch, msg, isNeedFocus);
+
+    return { isValid: isMatch, message: msg };
+  } else if (typeof regularExpression === "string") {
+    const isMatch = IsMatchRejex(value, regularExpression);
+    if (!isMatch) {
+      const msg = InvalidValueMessage(key ?? "Input-Value");
+      if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, true, msg, isNeedFocus);
+      return { isValid: isMatch, message: msg };
+    }
+  }
+
+  if (!valid.isValid) {
+    AddRemoveErrorFromInput(inputParameters, input, isAutoError, valid.message, isNeedFocus);
+    return valid;
+  }
+
+  if (regularExpression && (regularExpression as string) !== "") {
+    const isMatch = IsMatchRejex(value, regularExpression);
+    if (!isMatch) {
+      const msg = InvalidValueMessage(key ?? "Input-Value");
+      if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, true, msg, isNeedFocus);
+      return { isValid: isMatch, message: msg };
+    }
+  }
+  if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, false);
+  return { isValid: true, message: "Valid" };
+}
+export function IsValidInputValueWithLength(inputParameters: IInputParameters<any>, input: HTMLElement | UN, key: string | UN, value: string | UN, min: number, max: number, isAutoError: boolean = true, isNeedFocus: boolean): IValidationMessage {
+  if (IsNullOrEmpty(value) && min > 0) {
+    const mes = RequiredMessage(key);
+    if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, true, mes, isNeedFocus);
+    return { isValid: false, message: mes };
+  }
+  value = value ?? "";
+  if (min > 0 && value.length < min) {
+    const mes = MinLengthNotValidMessage(key ?? "Input-Value", min, false);
+    if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, true, mes, isNeedFocus);
+    return { isValid: false, message: mes };
+  } else if (max > 0 && value.length > max) {
+    const mes = MaxLengthNotValidMessage(key ?? "Input-Value", max, false);
+    if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, true, mes, isNeedFocus);
+    return { isValid: false, message: mes };
+  }
+  if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, false);
+  return { isValid: true, message: "Valid" };
+}
+// ------------- End Textbox Validation -------------
+
+// ------------- Start Checkbox Validation -------------
+function IsValidCheck(inputParameters: ICheckbox, value: boolean, isNeedFocus: boolean, isAutoError: boolean, input: HTMLElement | UN): boolean {
+  if (!inputParameters) return false;
+  if (!value) {
+    if (inputParameters.isRequired) {
+      const requiredMessage = RequiredMessage(inputParameters.validatorKey);
+      if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, true, requiredMessage, isNeedFocus);
+      return false;
+    } else {
+      if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, false, undefined, isNeedFocus);
+      return true;
+    }
+  }
+
+  if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, false, undefined, isNeedFocus);
+  return true;
+}
+// ------------- End Checkbox Validation -------------
+
+// ------------- Start Selectionbox Validation -------------
+function IsValidSelectionbox(inputParameters: ISelection, value: any | UN, isNeedFocus: boolean, isAutoError: boolean, input: HTMLElement | UN): boolean {
+  let isValid = true;
+  const isMulti = inputParameters.inputType === EInputTypes.MultiSelection;
+  if (!inputParameters) isValid = false;
+  else if (!inputParameters.isRequired) isValid = true;
+  else isValid = isMulti ? value?.length > 0 : value !== null;
+
+  if (!isValid && isMulti && inputParameters.bitwiseEnum !== undefined && inputParameters.bitwiseEnum !== null) isValid = BitwiseToList(inputParameters.bitwiseEnum, value).length > 0;
+
+  if (isValid) {
+    AddRemoveErrorFromInput(inputParameters, input, false);
+    return isValid;
+  }
+
+  const msg = RequiredMessage(inputParameters.validatorKey ?? "Input-Value");
+  if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, true, msg, isNeedFocus);
+  return isValid;
+}
+// ------------- End Selectionbox Validation -------------
+
+// ------------- Start Date Validation -------------
+function IsValidDate(inputParameters: IDate, value: Date | UN, isNeedFocus: boolean, isAutoError: boolean, input: HTMLElement | UN): boolean {
+  if (!inputParameters) return false;
+  return false;
+}
+// ------------- End Date Validation -------------
+
+// ------------- Start Number Validation -------------
+function IsValidNumber(inputParameters: INumber, value: number | UN, isNeedFocus: boolean, isAutoError: boolean, input: HTMLElement | UN): boolean {
+  if (!inputParameters) return false;
+  if (value === null || value === undefined) {
+    if (inputParameters.isRequired) {
+      const requiredMessage = RequiredMessage(inputParameters.validatorKey);
+      if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, true, requiredMessage, isNeedFocus);
+      return false;
+    } else {
+      if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, false, undefined, isNeedFocus);
+      return true;
+    }
+  }
+
+  if (inputParameters.minLength !== undefined && inputParameters.minLength !== null && value < inputParameters.minLength) {
+    const msg = MinLengthNotValidMessage(inputParameters.validatorKey ?? "Input", inputParameters.minLength, false);
+    if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, true, msg, isNeedFocus);
+    return false;
+  } else if (inputParameters.maxLength !== undefined && inputParameters.maxLength !== null && value > inputParameters.maxLength) {
+    const msg = MaxLengthNotValidMessage(inputParameters.validatorKey ?? "Input", inputParameters.maxLength, false);
+    if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, true, msg, isNeedFocus);
+    return false;
+  }
+
+  if (isAutoError) AddRemoveErrorFromInput(inputParameters, input, false, undefined, isNeedFocus);
+  return true;
+}
+// ------------- End Number Validation -------------
+
+// ------------- Start Tabularform Validation -------------
+function IsValidTabularform(inputParameters: ITablularForm, value: any[], isNeedFocus: boolean, isAutoError: boolean, input: HTMLElement | UN) {
+  return false;
+}
+// ------------- End Tabularform Validation -------------
+
+// ------------- Starting Input Error Handling -------------
+export const AddRemoveErrorFromInput = (inputParameters: IInputRootParameters<any>, input: HTMLElement | UN, isShowError: boolean, errorMessage?: string | UN, isNeedFocus?: boolean) => {
+  if (!input) return;
+  const formGroup = input.parentElement;
+  if (!formGroup) return;
+
+  const errorMessageTitle_Class = "input-error-message-popup";
+  if ((formGroup as any).cleanup) (formGroup as any).cleanup();
+  const formWrapper = formGroup.parentElement;
+  if (isShowError) {
+    formGroup.classList.add("error");
+    const errorMessageTitle = GetValidationMessage(inputParameters);
+    //const errorMessageBox = CreateTitle(errorMessageTitle, formGroup);
+    //errorMessageBox.titleElement.classList.add(errorMessageTitle_Class);
+    if (formWrapper && formWrapper.classList.contains("ipt-wp")) ShowError(input, formWrapper, errorMessage, isNeedFocus);
+    else if (formGroup.classList.contains("ipt-wp")) ShowError(input, formGroup, errorMessage, isNeedFocus);
+  } else {
+    formGroup.classList.remove("error");
+    if (formWrapper && formWrapper.classList.contains("ipt-wp")) formWrapper.querySelector(".msg")?.remove();
+    else if (formGroup.classList.contains("ipt-wp")) formGroup.querySelector(".msg")?.remove();
+  }
+};
+const ShowError = (input: HTMLElement, formWrapper: HTMLElement, errorMessage?: string | UN, isNeedFocus?: boolean) => {
+  formWrapper.querySelector(".msg")?.remove();
+  const p = document.createElement("p") as HTMLParagraphElement;
+  p.classList.add("msg", "fw500", "fs-08");
+  p.style.color = "var(--B13)";
+  errorMessage = errorMessage ?? "Input is not valid";
+  p.innerHTML = errorMessage;
+  p.setAttribute("nlt", errorMessage ?? "");
+  formWrapper.querySelector(".smb")?.appendChild(p);
+  if (isNeedFocus) input.focus();
+};
+// ------------- End Input Error Handling -------------
+interface IValidationMessage {
+  message: string | UN;
+  isValid: boolean;
+}
+
+export const IsMatchRejex = (value?: string | UN, reg?: string | UN): boolean => {
+  if (!reg) return true;
+  const regex = new RegExp(reg);
+  return regex.test(value ?? "");
+};
+export function RequiredMessage(key?: string | UN) {
+  return IsNullOrEmpty(key) ? "Invalid Request, Required validation error." : `Invalid Request, ${MakeFirstLetterUpperCase(key ?? "")} is Required.`;
+}
+export function GetValidationMessage(inputParams: IInputRootParameters<any>): string {
+  const messages: string[] = [];
+  const param = inputParams as IInputParameters<any>;
+
+  if (param.isRequired) {
+    messages.push("This field is required.");
+  }
+
+  if (param.minLength && param.maxLength) messages.push(`Must be between ${param.minLength} and ${param.maxLength} characters.`);
+  else if (param.minLength) messages.push(`Minimum length is ${param.minLength} characters.`);
+  else if (param.maxLength) messages.push(`Maximum length is ${param.maxLength} characters.`);
+
+  if ((param as any).regexKey) {
+    const pattern = (param as any).regexKey;
+
+    if (pattern === "^[a-zA-Z0-9_]+$") messages.push("Only letters, numbers, and underscores are allowed.");
+    else if (pattern === "^[0-9]+$") messages.push("Only numbers are allowed.");
+    else if (pattern === "^[a-zA-Z]+$") messages.push("Only letters are allowed.");
+    else if (pattern === "^[a-zA-Z0-9]+$") messages.push("Only letters and numbers are allowed.");
+    else messages.push("Please follow the required format.");
+  }
+
+  return messages.join("<br>");
+}
+export function MinLengthNotValidMessage(key: string, min: number, isArrayOrList: boolean = false): string {
+  return !isArrayOrList ? `Invalid Request, ${MakeFirstLetterUpperCase(key)} must be at least ${min} characters long.` : `Invalid Request, Please provide at least ${min} ${MakeFirstLetterUpperCase(key)}.`;
+}
+export function MinDateNotValidMessage(key: string, min: Date): string {
+  //const formattedDate = EasyDateFormater(min, false);
+  const formattedDate = min;
+  return `Invalid Request, ${MakeFirstLetterUpperCase(key)} must be on or after ${formattedDate}.`;
+}
+
+export function MaxLengthNotValidMessage(key: string, max: number, isArrayOrList: boolean = false, isSelected?: boolean): string {
+  const formattedKey = MakeFirstLetterUpperCase(key);
+
+  if (isArrayOrList) return `You can provide a maximum of ${max} ${formattedKey}.`;
+  if (isSelected) return `You cannot select more than ${max} ${formattedKey}.`;
+  return `Invalid request: ${formattedKey} cannot exceed ${max} characters.`;
+}
+
+export function MaxDateNotValidMessage(key: string, max: Date): string {
+  //const formattedDate = EasyDateFormater(max, false);
+  const formattedDate = max;
+  return `Invalid Request, ${MakeFirstLetterUpperCase(key)} cannot be after ${formattedDate}.`;
+}
+export function InvalidValueMessage(key: string | UN): string {
+  return IsNullOrEmpty(key) ? "Invalid Request, Given value is not valid." : `Invalid Request, ${MakeFirstLetterUpperCase(key ?? "")} is not valid.`;
+}
+export function UnauthorizedMessage(key?: string) {
+  return IsNullOrEmpty(key) ? "Invalid Request, You haven't permission to access this." : `Invalid Request, You haven't permission to access ${MakeFirstLetterUpperCase(key)}.`;
+}