nexus-shared 1.1.21 → 3.0.0

package/src/components/documents/icon-box.tsx

@@ -1,93 +0,0 @@
-import React, { JSX } from "react";
-import { SetElementStyles } from "../../helpers/element-helpers";
-import { DEFAULT_ICON_ELEMENT_NAME, EIcons, EIconTypes } from "../../interfaces/icon-interfaces";
-import { EBadgeTypes, EOpacity, ESizes } from "../../interfaces/layout-interfaces";
-import { EBackgrounds } from "../../interfaces/theme-interfaces";
-import { ClickHandler, UN } from "../../interfaces/type-interfaces";
-import { NEXUS_CONFIG } from "../../nexus.environments";
-
-interface IIconBoxProps {
-  icon: EIcons;
-  children?: React.ReactNode | UN;
-  id?: string | UN;
-  iconType?: EIconTypes | UN;
-  iconSize?: ESizes | UN;
-  boxSize?: ESizes | UN;
-  background?: EBackgrounds | UN;
-  defaultClass?: string | UN;
-  iconDefaultClass?: string | UN;
-  badgeType?: EBadgeTypes | UN;
-  badgeCount?: number | UN;
-  iconOpacity?: EOpacity;
-  title?: string | UN;
-  dataKeys?: { key: string; val: string }[] | UN;
-  makeRound?: boolean | UN;
-  boxStyle?: React.CSSProperties | UN;
-  onClicked?: ClickHandler | UN;
-  onMouseEnter?: ClickHandler | UN;
-  disabledHoverEffect?: boolean | UN;
-}
-interface IIconProps {
-  icon: EIcons;
-  type?: EIconTypes | UN;
-  size?: ESizes | UN;
-  defaultClass?: string | UN;
-  opacity?: EOpacity | UN;
-  style?: React.CSSProperties | UN;
-}
-
-const _getIconClass = (size?: ESizes | UN, defaultClass?: string | UN, opacity?: EOpacity | UN) => `icon ${size ?? ESizes.Normal} ${defaultClass ?? ""} ${opacity ?? EOpacity.O08}`;
-
-export const Icon = ({ icon, type, size, style, defaultClass, opacity }: IIconProps): JSX.Element => {
-  const c = _getIconClass(size, defaultClass, opacity ?? EOpacity.O06);
-  return React.createElement(DEFAULT_ICON_ELEMENT_NAME, {
-    name: `${icon ?? EIcons.HOME}${type ?? EIconTypes.OUTLINED}`,
-    style: style ?? undefined,
-    className: c,
-  });
-};
-export const CreateIcon = (icon: EIcons, parent?: HTMLElement | UN, type?: EIconTypes | UN, size?: ESizes | UN, defaultClass?: string | UN, opacity?: EOpacity | UN, style?: React.CSSProperties | UN) => {
-  const iconElement = document.createElement(DEFAULT_ICON_ELEMENT_NAME);
-  (iconElement as any).name = `${icon ?? EIcons.HOME}${type ?? EIconTypes.OUTLINED}` as string;
-  SetElementStyles(iconElement, style);
-  (iconElement as any).className = _getIconClass(size, defaultClass, opacity) as string;
-  if (parent) parent.appendChild(iconElement);
-  return iconElement;
-};
-
-const _getBoxClass = (background?: EBackgrounds | UN, makeRound?: boolean | UN, defaultClass?: string | UN, boxSize?: ESizes | UN, isNeedHover?: boolean | UN) => `ib ${background} ${makeRound !== false ? "r" : ""} r item ${defaultClass ?? ""} ${boxSize ?? ESizes.Normal} ${isNeedHover ? "h" : ""}`;
-
-export const Iconbox = ({ children, id, icon, iconType, iconSize, boxSize, background, defaultClass, iconDefaultClass, badgeType, badgeCount, iconOpacity, title, dataKeys, makeRound, boxStyle, onClicked, onMouseEnter, disabledHoverEffect }: Readonly<IIconBoxProps>): JSX.Element => {
-  background = background ?? EBackgrounds.Background1;
-  const isNeedHover = disabledHoverEffect !== false;
-  const c = _getBoxClass(background, makeRound, defaultClass, boxSize, isNeedHover);
-  const dataAttributes = (dataKeys ?? []).reduce((acc, { key, val }) => {
-    (acc as any)[`data-${key}`] = val;
-    return acc;
-  }, {});
-
-  return (
-    <div {...dataAttributes} id={id ?? undefined} style={boxStyle ?? undefined} className={c} onClick={onClicked ?? undefined} onMouseEnter={onMouseEnter ?? undefined}>
-      {title && <span className="title nw">{title}</span>}
-      <Icon icon={icon} opacity={iconOpacity} type={iconType} size={iconSize} defaultClass={iconDefaultClass} />
-      {children}
-    </div>
-  );
-};
-export const CreateIconBox = (icon: EIcons, parent?: HTMLElement | UN, children?: HTMLElement | UN, id?: string | UN, iconType?: EIconTypes | UN, background?: EBackgrounds | UN, boxSize?: ESizes | UN, iconSize?: ESizes | UN, defaultClass?: string | UN, iconDefaultClass?: string | UN, badgeType?: EBadgeTypes | UN, badgeCount?: number | UN, iconOpacity?: EOpacity | UN, title?: string | UN, dataKeys?: { key: string; val: string }[] | UN, makeRound?: boolean | UN, boxStyle?: React.CSSProperties | UN, onClicked?: ClickHandler | UN, onMouseEnter?: ClickHandler | UN, disabledHoverEffect?: boolean | UN): HTMLElement => {
-  background = background ?? EBackgrounds.Background1;
-  const isNeedHover = disabledHoverEffect !== false;
-  const iconBox = document.createElement("div");
-  iconBox.className = _getBoxClass(background, makeRound, defaultClass, boxSize, isNeedHover);
-  SetElementStyles(iconBox, boxStyle);
-
-  if (onClicked) iconBox.onclick = onClicked;
-  if (onMouseEnter) iconBox.onmouseenter = onMouseEnter;
-  if (parent) parent.appendChild(iconBox);
-
-  CreateIcon(icon, iconBox, iconType, iconSize, iconDefaultClass, iconOpacity);
-  if (children) iconBox.appendChild(children as HTMLElement);
-  return iconBox;
-};
-
-export const CreateToggleButton = (parentElement?: HTMLElement | null, children?: HTMLElement | UN, id?: string | UN, boxSize?: ESizes | null, iconSize?: ESizes | null, opacity?: EOpacity | UN, iconType?: EIconTypes | null, boxBackground?: EBackgrounds) => CreateIconBox(EIcons.ELLIPSIS_HORIZONTAL, parentElement, children, id, iconType, boxBackground, boxSize, iconSize, `h ${boxBackground ?? NEXUS_CONFIG.DEFAULT_BACKGROUND} ml5`, "r90");

package/src/components/documents/page-title.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-export const GLOBAL_PAGE_TITLE_CLASS = (defaultClass?: string, borderBottom?: number, marginBottom?: number, paddingBottom?: number) => `fs-12 o09 fw600 ${defaultClass ?? ""} bb${borderBottom ?? 0} mb${marginBottom ?? 0} pb${paddingBottom ?? 0}`;
-
-export const PageTitle = ({ title, defaultClass, borderBottom, marginBottom }: { title: string; defaultClass?: string; borderBottom?: number; marginBottom?: number }) => {
-  return <h6 className={GLOBAL_PAGE_TITLE_CLASS(defaultClass, borderBottom, marginBottom, borderBottom ? 2 : 0)}>{title}</h6>;
-};

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

@@ -1,172 +0,0 @@
-"use client";
-
-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 { NEXUS_CONFIG } from "../../nexus.environments";
-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 = () => {
-    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.OUTLINED;
-          btn.defaultClass = "btn active jc r";
-        } else btn.defaultClass = `jc r ${NEXUS_CONFIG.DEFAULT_BACKGROUND}`;
-      }
-
-      for (const btn of hiddenItems) btn.defaultClass = NEXUS_CONFIG.DEFAULT_BACKGROUND;
-
-      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.OUTLINED} 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/documents/tag.tsx

@@ -1,30 +0,0 @@
-import { CSSProperties } from "react";
-import { EBackgrounds, EOpacity, EUserRoles, UN } from "../../interface";
-
-export const GlobalTag = ({ value, background, isSmall, defaultClass, fontOpacity }: { value: string; background?: EBackgrounds; isSmall?: boolean; defaultClass?: string; fontOpacity?: EOpacity }) => {
-  isSmall = isSmall ?? true;
-  const style = { width: "fit-content" } as CSSProperties;
-  if (isSmall) style.minHeight = "1.2rem";
-  return (
-    <small style={style} className={`pr3 pl3 r pr item nw ${fontOpacity ?? EOpacity.O08} ${isSmall ? "fs-07" : "p1"} ${defaultClass ?? ""} df ac jc ${background ?? EBackgrounds.ThemeColor600}`}>
-      {value}
-    </small>
-  );
-};
-export function GetUserRoleTag(role: string | EUserRoles | UN, isShort?: boolean, defaultClass?: string): React.JSX.Element {
-  const status = role?.toString();
-
-  switch (status) {
-    case "3":
-    case "SuperAdmin":
-      return <GlobalTag isSmall={true} value={isShort ? "SA" : "Super"} defaultClass={defaultClass} />;
-    case "2":
-    case "Admin":
-      return <GlobalTag isSmall={true} value={isShort ? "A" : "Admin"} defaultClass={defaultClass} />;
-    case "1":
-    case "User":
-      return <GlobalTag isSmall={true} value={isShort ? "U" : "User"} defaultClass={defaultClass} />;
-    default:
-      return <GlobalTag isSmall={true} value={isShort ? "G" : "Guest"} defaultClass={defaultClass} />;
-  }
-}

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

@@ -1,66 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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";
-import { CreateIconBox } from "../documents/icon-box";
-
-export const CreateInputBox = (param: IInputRootParameters<any>, child: HTMLElement | null, parent: HTMLElement | null, isTabular: boolean) => {
-  const bg = param.background ?? NEXUS_CONFIG.DEFAULT_BACKGROUND;
-
-  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 style="color: var(--B13)" class="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;
-    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);
-  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

@@ -1,65 +0,0 @@
-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.OUTLINED, 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

@@ -1,164 +0,0 @@
-"use client";
-
-import React, { useEffect } from "react";
-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 => {
-  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, 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);
-
-  rowElement.className = `row g${rowGap ?? DEFAULT_ROW_GAP} sb fg`;
-  rowElement.style.paddingTop = "var(--IEM)";
-
-  const inputResults = CreateInputs(inputs, onChanged, index, isTabularForm, rowElement, defaultValue);
-
-  onFormRendered?.(inputResults);
-
-  return {
-    inputResults: inputResults,
-    formElement: rowElement,
-    dispose: (invokeOnChanged?: boolean) => {
-      DisposeInputs(inputResults, invokeOnChanged);
-      rowElement.remove();
-    },
-    forceChangeDefaultValue: (newDefaultValue: any) => forceChangeDefaultValue(inputResults, newDefaultValue),
-  } as IFormCreateResults;
-};
-
-export const Form = ({ param, parentIdentifier, rowGap, onFormRendered }: { param: IForm; parentIdentifier: HTMLElement | string | UN; rowGap?: number; onFormRendered?: VoidCallbackHandler }): React.ReactNode => {
-  useEffect(() => {
-    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.OUTLINED, 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.OUTLINED, 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>;
-};