nexus-shared 1.1.5 → 1.1.6

package/src/components/documents/tab-button.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect, useState } from "react";
+import { CreateClone, DynamicSorting, GetVisibleAndHiddenItems } from "../../helpers/datasource-helpers";
+import { RenderChildren } from "../../helpers/element-helpers";
+import { IButton } from "../../interfaces/button-interfaces";
+import { IDialogboxResults } from "../../interfaces/dialogbox-interfaces";
+import { DEFAULT_ICON_ELEMENT_NAME, EIcons, EIconTypes } from "../../interfaces/icon-interfaces";
+import { EPositions } from "../../interfaces/layout-interfaces";
+import { ClickHandler, UN } from "../../interfaces/type-interfaces";
+import { GlobalDialogbox, InitializeDialogbox } from "./../layouts/global-dialogbox";
+import { Button, Buttons, CreateButton, CreateButtons, SET_BUTTON_ACTIVE_CLASS } from "./button";
+import { CreateToggleButton, Iconbox } from "./icon-box";
+
+export const THEME_MENU_ELIPSE_BTN_ID = "theme-menu-ellipse-btn";
+
+const GetMaxVisibleButtons = (parentWidth: number) => (parentWidth > 1400 ? 8 : parentWidth > 1200 ? 7 : parentWidth > 1000 ? 6 : parentWidth > 950 ? 5 : parentWidth > 750 ? 4 : parentWidth > 600 ? 3 : 2);
+
+export function CreateTabButtons<T>(buttons: IButton[], parent: HTMLElement | null, activeButton?: IButton | null, onClicked?: ClickHandler): HTMLElement | null {
+  if (!buttons || buttons.length === 0) return null;
+  const elementList: HTMLElement[] = [];
+  const toggleButton = CreateToggleButton();
+  const themeContainer = document.createElement("div");
+  const visibleItems: IButton[] = [];
+  const hiddenItems: IButton[] = [];
+  const dataKey = "code";
+  const dataAttributeKey = "data-menu-code";
+  let dialogBoxObject: IDialogboxResults | null = null;
+  let maxVisible = 6;
+  let activeItem = activeButton ?? buttons[0];
+  let linkButtons: HTMLElement | undefined = undefined;
+
+  toggleButton.appendChild(themeContainer);
+
+  const buttonContainer = document.createElement("div");
+  buttonContainer.className = "df ac jc r";
+  if (parent) parent.appendChild(buttonContainer);
+
+  const onButtonClicked: ClickHandler = (event, element, button, index) => {
+    if (button === activeItem) return;
+    activeItem = button;
+    if (onClicked) onClicked(event, element, button, index);
+
+    const isHiddenItemClicked = hiddenItems.some((item) => item === button);
+    GetVisibleAndHiddenItems(buttons, visibleItems, hiddenItems, activeItem, maxVisible);
+    RenderChildren(buttonContainer, elementList, toggleButton, activeItem, visibleItems, hiddenItems, createButton, refreshElementClass, false, isHiddenItemClicked, dataKey, dataAttributeKey);
+  };
+  for (const button of buttons) button.onClick = (event, element, data, index) => onButtonClicked(event as Event, element, button);
+
+  const createButton = (button: IButton) => {
+    const btn = CreateButton(button, buttonContainer, null, false);
+    if (button.id) {
+      btn.setAttribute(dataAttributeKey, `btn-code-${button.id}`);
+      btn.id = button.id;
+    }
+
+    btn.classList.add("jc");
+    btn.style.height = "var(--IW)";
+
+    refreshElementClass(btn, activeItem);
+    return btn;
+  };
+
+  const refreshElementClass = (element: HTMLElement, activeItem: IButton | UN) => {
+    const menuCode = element?.getAttribute(dataAttributeKey);
+    const isActive = activeItem?.id && `btn-code-${activeItem?.id}` === menuCode;
+    SET_BUTTON_ACTIVE_CLASS(isActive as boolean, element);
+    const icon = element.querySelector(DEFAULT_ICON_ELEMENT_NAME);
+    if (isActive) {
+      element.classList.add("active");
+      if (document.activeElement) (document.activeElement as HTMLElement).blur();
+      if (icon) icon.setAttribute("name", activeItem.icon ?? "");
+    } else {
+      element.classList.remove("active");
+      if (activeItem)
+        if (icon) {
+          let iconName = icon.getAttribute("name");
+          if (iconName && !iconName.endsWith("-outline")) iconName += "-outline";
+          icon.setAttribute("name", iconName ?? "");
+        }
+    }
+  };
+  const onVisibility = (isVisible: boolean) => {
+    if (linkButtons) linkButtons.remove();
+    linkButtons = CreateButtons(hiddenItems, themeContainer, null, 6, 0);
+  };
+  const parentBound = parent?.getBoundingClientRect();
+  const parentWidth = parentBound ? parentBound.width : 1000;
+  maxVisible = GetMaxVisibleButtons(parentWidth);
+  GetVisibleAndHiddenItems(buttons, visibleItems, hiddenItems, activeItem, maxVisible);
+  RenderChildren(buttonContainer, elementList, toggleButton, activeItem, visibleItems, hiddenItems, createButton, refreshElementClass, true, false, dataKey, dataAttributeKey);
+
+  if (hiddenItems.length > 0) {
+    linkButtons = CreateButtons(hiddenItems, themeContainer, null, 6, 0);
+    dialogBoxObject = InitializeDialogbox(toggleButton, themeContainer, true, undefined, undefined, 40, undefined, onVisibility, undefined, false, EPositions.Right, undefined, undefined, undefined, true);
+    dialogBoxObject?.visibility(false, true);
+  }
+
+  return buttonContainer;
+}
+export const TabButtons = ({ buttons, activeButton, onClicked }: { buttons: IButton[]; activeButton?: string | null | Function; onClicked?: ClickHandler }) => {
+  const [tabButtons, setTabButtons] = useState<ITab>({ visibleButtons: null, hiddenButtons: null });
+  const [activeItem, setActiveItem] = useState<string | null>(null);
+  const tabContainerRef = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      clearTimeout(timeout);
+
+      const tabContainer = tabContainerRef.current;
+      if (!tabContainer || !buttons || buttons.length === 0) return;
+
+      const sortingButtons = DynamicSorting<IButton>(buttons, "displayOrder", true);
+      const newButtons = CreateClone(sortingButtons) as IButton[];
+      const parentBound = tabContainer.getBoundingClientRect();
+      const parentWidth = parentBound.width;
+      const maxVisible = GetMaxVisibleButtons(parentWidth);
+      const visibleItems: IButton[] = [];
+      const hiddenItems: IButton[] = [];
+      const active = typeof activeButton === "function" ? (newButtons.find((btn) => btn.id === activeButton()) ?? newButtons[0]) : (newButtons.find((btn) => btn.id === (activeItem ?? activeButton)) ?? newButtons[0]);
+      GetVisibleAndHiddenItems(newButtons, visibleItems, hiddenItems, active, maxVisible);
+
+      for (const btn of visibleItems) {
+        if (active && active.id && btn.id === active.id) {
+          btn.iconType = EIconTypes.FILLED;
+          btn.defaultClass = "btn active jc r";
+        } else btn.defaultClass = "bg1 jc r";
+      }
+
+      for (const btn of hiddenItems) btn.defaultClass = "bg1";
+
+      for (const btn of newButtons) {
+        btn.onClick = (event, element, data, index) => {
+          if (btn.id === activeItem) return;
+          if (onClicked) onClicked(event, element, btn, index);
+          setActiveItem(btn.id ?? null);
+        };
+      }
+
+      setTabButtons({ visibleButtons: visibleItems, hiddenButtons: hiddenItems.length > 0 ? hiddenItems : null });
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [buttons, activeItem, onClicked]);
+
+  /* ---------------- render ---------------- */
+  return (
+    <div ref={tabContainerRef} className="df ac jc r">
+      {tabButtons.visibleButtons?.map((btn) => (
+        <Button
+          styles={{
+            height: "var(--IW)",
+          }}
+          key={btn.id}
+          button={btn}
+        />
+      ))}
+
+      {tabButtons.hiddenButtons && (
+        <Iconbox defaultClass="ml5" icon={EIcons.ELLIPSIS_HORIZONTAL} iconType={EIconTypes.FILLED} iconDefaultClass="r90" id={THEME_MENU_ELIPSE_BTN_ID}>
+          <GlobalDialogbox defaultPadding={0} iggnoreChildClick={false} buttonIdentity={THEME_MENU_ELIPSE_BTN_ID} position={EPositions.Right}>
+            <Buttons buttons={tabButtons.hiddenButtons} />
+          </GlobalDialogbox>
+        </Iconbox>
+      )}
+    </div>
+  );
+};
+interface ITab {
+  visibleButtons: IButton[] | null;
+  hiddenButtons: IButton[] | null;
+}

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

@@ -0,0 +1,66 @@
+import { GetInputId, SetHaveValueClass } from "../../helpers/input-helpers";
+import { EValueChangeTypes, ICheckbox, IInputCreateResults } from "../../interfaces/input-interfaces";
+import { CreateInput } from "./input";
+import { CreateInputBox, CreateInputWrapper } from "./input-box";
+import { CreateRadiobox } from "./radiobox-input";
+
+export const CreateCheckbox = (param: ICheckbox, parentElement: HTMLElement | null, isTabular: boolean) => {
+  if (param.groupId) return CreateRadiobox(param, parentElement, isTabular, true);
+
+  const input = CreateInput(param) as HTMLInputElement;
+  const ELEMENT_ID = GetInputId(param);
+
+  input.classList.add("pr");
+  input.classList.remove("ipt");
+  input.defaultChecked = param.defaultValue ?? false;
+
+  const box = CreateInputBox(param, input, null, isTabular);
+  const label = box.querySelector("label") as HTMLLabelElement;
+  if (label) label.className = "p2 ilb hc o08";
+  const wrapper = isTabular ? box : CreateInputWrapper(param, box, parentElement);
+
+  box.classList.add("df", "ac", "pl3", "ipt-bxh");
+  box.classList.remove("ipt-bx");
+
+  function notifyChanged(val: boolean, isInit: boolean, isForced: boolean, isDisposed: boolean) {
+    if (!param.checkedValue) param.onChanged?.(val, isInit, isForced, isDisposed, ELEMENT_ID, undefined);
+    else param.onChanged?.(val ? param.checkedValue : null, isInit, isForced, isDisposed, ELEMENT_ID, undefined);
+  }
+
+  function handleChanged(val: boolean, isInit: boolean, isForced: boolean, isDisposed: boolean, type?: EValueChangeTypes, invokeOnChanged?: boolean) {
+    SetHaveValueClass(input, val);
+    if (invokeOnChanged === false) return;
+    // Group members share one form key; only the checked member should report on init.
+    if (isInit && param.groupId && !val) return;
+    notifyChanged(val, isInit, isForced, isDisposed);
+  }
+
+  function forceChangeDefaultValue(defaultValue: boolean, type?: EValueChangeTypes, invokeOnChanged?: boolean): boolean {
+    input.checked = defaultValue;
+    handleChanged(defaultValue, false, true, false, type, invokeOnChanged);
+    return true;
+  }
+
+  function onInputChanged() {
+    handleChanged(input.checked, false, false, false);
+  }
+
+  input.addEventListener("input", onInputChanged);
+
+  input.checked = param.defaultValue ?? false;
+  handleChanged(input.checked, true, false, false);
+
+  return {
+    input: param,
+    inputElement: input,
+    rootElement: wrapper,
+    forceChangeDefaultValue: forceChangeDefaultValue,
+    dispose: function (invokeOnChanged?: boolean) {
+      if (invokeOnChanged !== false) handleChanged(param.defaultValue ?? false, false, true, true);
+      input.removeEventListener("input", onInputChanged);
+      input.remove();
+      box.remove();
+      wrapper.remove();
+    },
+  } as IInputCreateResults;
+};

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

@@ -0,0 +1,45 @@
+import { DEFAULT_INPUT_BORDER_SIZE, IInputRootParameters, REQUIRED_TEXT1 } from "../../interfaces/input-interfaces";
+import { EBackgrounds } from "../../interfaces/theme-interfaces";
+import { CreateIconBox } from "../documents/icon-box";
+
+export const CreateInputBox = (param: IInputRootParameters<any>, child: HTMLElement | null, parent: HTMLElement | null, isTabular: boolean) => {
+  const bg = param.background ?? "bg1";
+
+  const BORDER_SIZE = param.borderSize ?? DEFAULT_INPUT_BORDER_SIZE;
+
+  const border = BORDER_SIZE > 0 ? `b${BORDER_SIZE}` : "bat1";
+  const box = document.createElement("div");
+  box.className = `ipt-bx ${param.inputSize ?? ""} db bb anim ${border} pr r ${bg}`;
+  if (child) box.appendChild(child);
+
+  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.htmlFor = param.id;
+    box.appendChild(label);
+  }
+
+  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);
+  }
+
+  if (parent) parent.appendChild(box);
+  return box;
+};
+export const CreateInputWrapper = (param: IInputRootParameters<any>, child: HTMLElement | null, parent: HTMLElement | null) => {
+  const col = document.createElement("div");
+  const wp = document.createElement("div");
+  const smb = document.createElement("div");
+  col.className = !param.columnSize || param.columnSize === 12 ? "col-12" : `col-${param.columnSize}`;
+  if (param.autoAdjustColumn !== false) col.classList.add("col-sm-12");
+  wp.className = "ipt-wp";
+  smb.className = "smb";
+  if (child) wp.appendChild(child);
+  wp.appendChild(smb);
+  col.appendChild(wp);
+  if (parent) parent.appendChild(col);
+  return wp;
+};

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

@@ -0,0 +1,65 @@
+import { GetInputId } from "../../helpers/input-helpers";
+import { EButtonTypes } from "../../interfaces/button-interfaces";
+import { EIconTypes } from "../../interfaces/icon-interfaces";
+import { IElement, IInputCreateResults, ILinkbutton, ISubmitbutton } from "../../interfaces/input-interfaces";
+import { EBackgrounds } from "../../interfaces/theme-interfaces";
+import { CreateLinkButton } from "../documents/button";
+import { CreateIconBox } from "../documents/icon-box";
+import { CreateInputBox, CreateInputWrapper } from "./input-box";
+
+export const CreateElement = (param: IElement, parentElement: HTMLElement | null, isTabular: boolean): IInputCreateResults => {
+  const ELEMENT_ID = GetInputId(param);
+  const box = CreateInputBox(param, null, null, isTabular);
+  const label = box.querySelector("label") as HTMLLabelElement;
+  if (label) label.remove();
+  const wrapper = isTabular ? box : CreateInputWrapper(param, box, parentElement);
+
+  return {
+    input: param,
+    inputElement: box as HTMLInputElement,
+    rootElement: wrapper,
+    forceChangeDefaultValue: null,
+    dispose: function (invokeOnChanged?: boolean) {
+      if (invokeOnChanged !== false) param.onLoad?.(null, null, false, false, true, ELEMENT_ID, 0);
+      box.remove();
+      wrapper.remove();
+    },
+  } as IInputCreateResults;
+};
+
+export const CreateInputLink = (param: ILinkbutton, parentElement: HTMLElement | null, isTabular: boolean): IInputCreateResults => {
+  const elementObject = CreateElement(param, parentElement, isTabular);
+  const box = elementObject.inputElement as HTMLDivElement;
+  box.classList.add("bat1", "df", "ac", "ipt-bxh");
+  box.classList.remove("ipt-bx");
+  const link = CreateLinkButton(box, param.href, param.label ?? "Nexus Link", param.onClicked, param.defaultClass, null, param.borderBottom, param.background, param.target, param.position);
+
+  link.classList.add("w100");
+
+  box.appendChild(link);
+  return elementObject;
+};
+export const CreateInputButton = (param: ISubmitbutton, parentElement: HTMLElement | null, isTabular: boolean): IInputCreateResults => {
+  const iconParam = param.icon;
+  const button = document.createElement("button");
+  param.icon = undefined;
+  const elementObject = CreateElement(param, parentElement, isTabular);
+  const box = elementObject.inputElement as HTMLDivElement;
+  box.appendChild(button);
+  box.classList.add("h");
+  button.type = param.type ?? EButtonTypes.SUBMIT;
+
+  button.classList.add("h", "df", "ac", "jc", "ipt", "h100", "sn", "w100", "r", param.background ?? EBackgrounds.PrimaryColor);
+  const value = param.placeholder ?? param.label ?? "Submit";
+
+  if (iconParam) {
+    const span = document.createElement("span");
+    span.textContent = value;
+    span.classList.add("nw", "toh", "fs-10", "fw-600");
+    const icon = CreateIconBox(iconParam.icon, button, null, null, iconParam.type ?? EIconTypes.FILLED, iconParam.background ?? param.background ?? EBackgrounds.None, iconParam.boxSize, iconParam.iconSize, null, null, null, null, iconParam.opacity, null, null, null, null, iconParam.onClicked, iconParam.onMouseEnter);
+    icon.classList.add("mr3");
+    button.appendChild(span);
+  } else button.innerText = value;
+
+  return elementObject;
+};

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

@@ -0,0 +1,50 @@
+import React, { useEffect } from "react";
+import { GetInputId } from "../../helpers/input-helpers";
+import { IForm, IFormCreateResults, IInputCreateResults } from "../../interfaces/input-interfaces";
+import { CreateInputs, DisposeInputs } from "./input";
+
+const forceChangeDefaultValue = (inputResults: IInputCreateResults[], newDefaultValue: any): boolean => {
+  let isChanged = true;
+  for (const inputResult of inputResults) {
+    if (inputResult.forceChangeDefaultValue) {
+      const value = newDefaultValue ? (newDefaultValue[GetInputId(inputResult.input)] ?? null) : undefined;
+      const success = inputResult.forceChangeDefaultValue(value);
+      if (isChanged) isChanged = success;
+    }
+  }
+  return isChanged;
+};
+export const CreateForm = (param: IForm, rowGap?: number): IFormCreateResults | null => {
+  const { inputs, onChanged, index, isTabularForm, parentIdentifier } = 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 parent = document.createElement("div");
+  parent.className = `row g${rowGap ?? 3} sb fg`;
+  parent.style.paddingTop = "var(--IEM)";
+  if (parentElement) parentElement.appendChild(parent);
+
+  const inputResults = CreateInputs(inputs, onChanged, index, isTabularForm, parent, param.defaultValue);
+
+  return {
+    inputResults: inputResults,
+    formElement: parent,
+    dispose: (invokeOnChanged?: boolean) => {
+      DisposeInputs(inputResults, invokeOnChanged);
+      parent.remove();
+    },
+    forceChangeDefaultValue: (newDefaultValue: any) => forceChangeDefaultValue(inputResults, newDefaultValue),
+  } as IFormCreateResults;
+};
+
+export const Form = ({ param, rowGap }: { param: IForm; rowGap?: number }): React.ReactNode => {
+  useEffect(() => {
+    const formResults = CreateForm(param, rowGap);
+    return () => formResults?.dispose();
+  }, [param, rowGap]);
+  return <React.Fragment></React.Fragment>;
+};

package/src/components/inputs/input.tsx

@@ -0,0 +1,181 @@
+import { CreateClone } from "../../helpers/datasource-helpers";
+import { GetInputClasses, GetInputId, GetParentKey } from "../../helpers/input-helpers";
+import { IsNullOrEmpty } from "../../helpers/string-helpers";
+import { Debounce } from "../../helpers/utility-helpers";
+import { DEFAULT_TEXTAREA_ROWS, EInputTypes, ICheckbox, IElement, IInputCreateResults, IInputRootParameters, ILinkbutton, INumber, IRadiobox, ISlider, ISubmitbutton, ITextarea, ITextbox, MAX_INPUT_TYPE, OnFormChangeHandler, REQUIRED_TEXT1 } from "../../interfaces/input-interfaces";
+import { UN } from "../../interfaces/type-interfaces";
+import { CreateCheckbox } from "./checkbox-input";
+import { CreateElement, CreateInputButton, CreateInputLink } from "./input-element";
+import { CreateNumber } from "./number-input";
+import { CreateRadiobox } from "./radiobox-input";
+import { CreateTextarea } from "./textarea-input";
+import { CreateTextbox } from "./textbox-input";
+
+const _getInputType = (inputType: EInputTypes) => {
+  switch (inputType) {
+    case EInputTypes.Checkbox:
+      return "checkbox";
+    case EInputTypes.Textarea:
+      return "textarea";
+    case EInputTypes.Number:
+      return "number";
+    case EInputTypes.Slider:
+    case EInputTypes.Range:
+      return "range";
+    default:
+      return "text";
+  }
+};
+
+export function CreateInput(param: ITextbox | ISlider | ICheckbox | ITextarea | INumber) {
+  const isTextarea = param.inputType === EInputTypes.Textarea;
+  const isNumber = param.inputType === EInputTypes.Number;
+  const isSlider = param.inputType === EInputTypes.Slider || param.inputType === EInputTypes.Range;
+  const isCheckbox = param.inputType === EInputTypes.Checkbox;
+  const isRadiobox = param.inputType === EInputTypes.Radiobox;
+
+  const inputType = _getInputType(param.inputType);
+  const input = document.createElement(isTextarea ? "textarea" : "input");
+  if (!isTextarea) (input as HTMLInputElement).type = inputType;
+  if (isCheckbox || isRadiobox) {
+    if ((param as ICheckbox).groupId) (input as HTMLInputElement).name = (param as ICheckbox).groupId!;
+    else if (isRadiobox) (input as HTMLInputElement).name = GetInputId(param as IRadiobox);
+
+    // No need to set type
+  } else if (isTextarea) (input as HTMLTextAreaElement).rows = (param as ITextarea).rows ?? DEFAULT_TEXTAREA_ROWS;
+  else if (isNumber) {
+    const numberParam = param as INumber;
+    const numberInput = input as HTMLInputElement;
+    const decimalPlaces = numberParam.floatingPoint ?? 0;
+    numberInput.type = "number";
+
+    if (numberParam.step) numberInput.step = numberParam.step.toString();
+    else numberInput.step = decimalPlaces > 0 ? (1 / Math.pow(10, decimalPlaces)).toString() : "1";
+
+    if (numberParam.minLength !== undefined && numberParam.minLength !== null) numberInput.min = numberParam.minLength.toString();
+    if (numberParam.maxLength !== undefined && numberParam.maxLength !== null) numberInput.max = numberParam.maxLength.toString();
+  } else if (isSlider) {
+    (input as HTMLInputElement).type = "range";
+    (input as HTMLInputElement).step = (param as ISlider).step?.toString() ?? "1";
+    (input as HTMLInputElement).min = (param as ISlider).minLength?.toString() ?? "0";
+    (input as HTMLInputElement).max = (param as ISlider).maxLength?.toString() ?? "100";
+  } else (input as HTMLInputElement).type = (param as ITextbox).isPassword ? "password" : "text";
+  if (!isSlider && !isNumber) {
+    if ((param as ITextbox).minLength) (input as HTMLInputElement).minLength = (param as ITextbox).minLength ?? 0;
+    if ((param as ITextbox).maxLength) (input as HTMLInputElement).maxLength = (param as ITextbox).maxLength ?? 0;
+  }
+
+  input.className = `${GetInputClasses(param.inputSize, param.defaultClass)}${isTextarea ? " sb" : ""}`;
+  input.autocomplete = param.autoComplete ?? "on";
+  input.required = !!param.isRequired;
+  input.readOnly = !!param.isReadonly;
+  input.disabled = !!param.isReadonly;
+  input.id = param.id;
+  input.placeholder = param.placeholder ?? "";
+  input.value = param.defaultValue?.toString() ?? "";
+
+  return input;
+}
+export const CreateInputs = (inputs: IInputRootParameters<any>[], onChanged: OnFormChangeHandler, index: number, isTabularForm: boolean, parentElement: HTMLElement | null, defaultValue?: any): IInputCreateResults[] => {
+  if (inputs.length === 0 || !onChanged) {
+    //TODO: WarningMessage("Invalid Inputs", "Please provide valid inputs, onChanged function and parent element.");
+    return [];
+  }
+  const inputValues: any = {};
+  const onChangedDebounced = Debounce(onChanged, 10);
+
+  const results: IInputCreateResults[] = [];
+  const pushResult = (result: IInputCreateResults) => results.push(result);
+  const handleInputChange = (currentValue: any, isInitilizing: boolean, isForcedChanged: boolean, isDisposed: boolean, currentKey: string, dataSource?: any[]) => {
+    if (inputValues[currentKey] === currentValue && !isForcedChanged && !isDisposed) return;
+
+    inputValues[currentKey] = currentValue;
+    (isInitilizing && !isTabularForm ? onChangedDebounced : onChanged)(inputValues, isInitilizing, isForcedChanged, isDisposed, currentKey, index, undefined, dataSource);
+    const result = results.find((x) => GetInputId(x.input) === currentKey);
+    if (result) {
+      const timeout = setTimeout(() => {
+        clearTimeout(timeout);
+        const children = results.filter((x) => GetParentKey(x.input.parentKey) === currentKey);
+        for (const child of children) {
+          child.input.defaultValue = inputValues[child.input.id];
+          child.onParentChanged?.(currentValue, isInitilizing, isForcedChanged, isDisposed, currentKey, index, undefined, dataSource);
+        }
+      }, 1);
+    }
+  };
+  const udpatedInputs = (CreateClone(inputs) as IInputRootParameters<any>[]).sort((a, b) => a.displayOrder - b.displayOrder);
+  for (const ipt of udpatedInputs) {
+    const ELEMENT_ID = GetInputId(ipt);
+    ipt.defaultValue = defaultValue?.[ELEMENT_ID] ?? ipt.defaultValue;
+    if (ipt.inputType < MAX_INPUT_TYPE) {
+      ipt.onChanged = (currentValue: any, isInitilizing: boolean, isForcedChanged: boolean, isDisposed: boolean, currentKey: string, dataSource?: any | any[]) => handleInputChange(currentValue, isInitilizing, isForcedChanged, isDisposed, currentKey, dataSource);
+      if ((ipt as any).isRequired && !IsNullOrEmpty(ipt.placeholder)) ipt.placeholder += ` ${REQUIRED_TEXT1}`;
+    }
+
+    switch (ipt.inputType) {
+      case EInputTypes.Textbox: {
+        pushResult(CreateTextbox(ipt as ITextbox, parentElement, isTabularForm));
+        break;
+      }
+      case EInputTypes.Number: {
+        pushResult(CreateNumber(ipt as INumber, parentElement, isTabularForm));
+        break;
+      }
+      case EInputTypes.Textarea: {
+        pushResult(CreateTextarea(ipt as ITextarea, parentElement, isTabularForm));
+        break;
+      }
+      case EInputTypes.Checkbox: {
+        pushResult(CreateCheckbox(ipt as ICheckbox, parentElement, isTabularForm));
+        break;
+      }
+      case EInputTypes.Radiobox: {
+        pushResult(CreateRadiobox(ipt as IRadiobox, parentElement, isTabularForm));
+        break;
+      }
+      case EInputTypes.LinkButton: {
+        pushResult(CreateInputLink(ipt as ILinkbutton, parentElement, isTabularForm));
+        break;
+      }
+      case EInputTypes.HtmlElement: {
+        pushResult(CreateElement(ipt as IElement, parentElement, isTabularForm));
+        break;
+      }
+      case EInputTypes.SubmitButton: {
+        pushResult(CreateInputButton(ipt as ISubmitbutton, parentElement, isTabularForm));
+        break;
+      }
+      /*
+      case EInputTypes.MultiSelection:
+      case EInputTypes.SingleSelection: {
+        pushResult(CreateSelection(ipt as ISelection, parentElement, isTabularForm));
+        break;
+      }
+
+      case EInputTypes.TabularForm: {
+        pushResult(CreateTabular(ipt as ITablularForm, parentElement));
+        break;
+      }
+
+      case EInputTypes.Datepicker: {
+        pushResult(CreateDatepicker(ipt as IDate, parentElement, isTabularForm));
+        break;
+      }
+      case EInputTypes.Slider:
+      case EInputTypes.Range: {
+        pushResult(CreateSlider(ipt as ISlider, parentElement, isTabularForm));
+        break;
+      }
+     
+
+        */
+      default:
+        break;
+    }
+  }
+  return results;
+};
+export const DisposeInputs = (inputs: IInputCreateResults[] | UN, invokeOnChanged?: boolean) => {
+  if (!inputs || inputs.length === 0) return;
+  for (const input of inputs) input.dispose(invokeOnChanged);
+};