@erpsquad/common 1.8.6 → 1.8.7

package/dist/views/form-builder/element-edit-forms/table-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/views/form-builder/element-edit-forms/table-form.tsx"],"sourcesContent":["// React imports\nimport React, { useEffect, useState } from 'react';\n\n// Material UI imports\nimport { MenuItem, Box, SelectChangeEvent } from '@mui/material';\n\n// Third-party imports\nimport { MRT_ColumnDef, MRT_RowData } from 'material-react-table';\n\n// ERP Common imports\nimport Select from '@/components/select/select';\nimport TextField from '@/components/text-field/text-field';\nimport formatText from '@/utils/format-text';\n\n// Local imports\nimport { IElementJson } from '../custom-form';\nimport { ApiFormFields } from '../../Redux/state';\nimport FieldSelect from './field-select';\nimport '../custom-form.scss';\n\ninterface ITableEditForm {\n\thandlePropertyValueUpdate: (\n\t\tevent?: any,\n\t\tnumberValue?: any,\n\t\tval?: any,\n\t\tfieldType?: any\n\t) => void;\n\thandleColumnsUpdate: (columns: MRT_ColumnDef<MRT_RowData>[]) => void;\n\telement: IElementJson | null;\n\tfields: ApiFormFields | null;\n}\n\ninterface TableOption {\n\tlabel: string;\n\tvalue: string;\n}\n\nconst TableEditForm: React.FC<ITableEditForm> = ({\n\thandlePropertyValueUpdate,\n\telement,\n\thandleColumnsUpdate,\n\tfields\n}) => {\n\t/* Local States */\n\tconst [elementJSON, setElementJSON] = useState<IElementJson | null>(element);\n\tconst [tables, setTables] = useState<TableOption[]>([]);\n\n\t/* Local Functions */\n\tconst handleFieldUpdate = (event: SelectChangeEvent<unknown>) => {\n\t\tif (elementJSON) {\n\t\t\telementJSON.field_type = event.target.value as string;\n\t\t\thandlePropertyValueUpdate(null, null, null, event.target.value as string);\n\t\t}\n\t};\n\tconst handleTableSelect = (event: SelectChangeEvent<unknown>) => {\n\t\thandlePropertyValueUpdate(event);\n\t};\n\n\t/* Use Effects */\n\tuseEffect(() => {\n\t\tsetElementJSON(element);\n\t}, [element]);\n\tuseEffect(() => {\n\t\tif (elementJSON && elementJSON.table && fields) {\n\t\t\tconst fieldsArr = fields[elementJSON.table];\n\t\t\tlet columns: any[] = [];\n\t\t\tif (fieldsArr && fieldsArr?.length) {\n\t\t\t\tcolumns = fieldsArr.map((field, index) => ({\n\t\t\t\t\theader: formatText(field.field),\n\t\t\t\t\taccessorKey: field.field,\n\t\t\t\t\tvisible: index > 3 ? false : true,\n\t\t\t\t\ttype: field.type\n\t\t\t\t}));\n\t\t\t} else {\n\t\t\t\tcolumns = [\n\t\t\t\t\t{ header: 'Column 1', accessorKey: 'column_1', visible: true },\n\t\t\t\t\t{ header: 'Column 2', accessorKey: 'column_1', visible: true }\n\t\t\t\t];\n\t\t\t}\n\t\t\tcolumns && handleColumnsUpdate(columns);\n\t\t}\n\t}, [elementJSON?.table]);\n\tuseEffect(() => {\n\t\tif (fields) {\n\t\t\tconst options = Object.keys(fields).map((key) => ({\n\t\t\t\tlabel: formatText(key),\n\t\t\t\tvalue: key\n\t\t\t}));\n\t\t\tsetTables(options);\n\t\t}\n\t}, [fields]);\n\n\tif (!elementJSON) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Box className='formSection--FieldContainer' key={elementJSON.id}>\n\t\t\t<div key={elementJSON.id}>\n\t\t\t\t<FieldSelect\n\t\t\t\t\tkey={elementJSON.id}\n\t\t\t\t\tvariant='outlined'\n\t\t\t\t\tonChange={handleFieldUpdate}\n\t\t\t\t\tdefaultValue={elementJSON.field_type}\n\t\t\t\t\tdisabled={elementJSON.type === 'system' || !elementJSON.is_new}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div key={elementJSON.id}>\n\t\t\t\t<TextField\n\t\t\t\t\tfullWidth\n\t\t\t\t\tlabel='Label'\n\t\t\t\t\tis_required\n\t\t\t\t\tkey={elementJSON.id}\n\t\t\t\t\tname='label'\n\t\t\t\t\ttype='text'\n\t\t\t\t\tonChange={handlePropertyValueUpdate}\n\t\t\t\t\tdefaultValue={elementJSON.label}\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t<div key={elementJSON.id}>\n\t\t\t\t<Select\n\t\t\t\t\tkey={elementJSON.id}\n\t\t\t\t\tvariant='outlined'\n\t\t\t\t\tlabel='Table'\n\t\t\t\t\tfullWidth\n\t\t\t\t\tplaceholder='Select Table'\n\t\t\t\t\tsize='small'\n\t\t\t\t\tname='table'\n\t\t\t\t\tdefaultValue={elementJSON.table}\n\t\t\t\t\tdisabled={elementJSON.type === 'system'}\n\t\t\t\t\tonChange={handleTableSelect}\n\t\t\t\t\trenderValue={(value: string) =>\n\t\t\t\t\t\ttables.find((option) => option.value === value)?.label\n\t\t\t\t\t}>\n\t\t\t\t\t{tables?.map((item) => (\n\t\t\t\t\t\t<MenuItem value={item.value}>{item.label}</MenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</Select>\n\t\t\t</div>\n\t\t</Box>\n\t);\n};\n\nexport default TableEditForm;\n"],"names":["handlePropertyValueUpdate","element","handleColumnsUpdate","fields","elementJSON","setElementJSON","useState","tables","setTables","useEffect","table","fieldsArr","columns","length","map","field","index","header","formatText","accessorKey","visible","type","options","Object","keys","key","label","value","jsxs","Box","className","children","jsx","FieldSelect","variant","onChange","event","field_type","target","defaultValue","disabled","is_new","id","TextField","fullWidth","is_required","name","Select","placeholder","size","renderValue","_a","find","option","item","MenuItem"],"mappings":"qiBAqCgD,EAC/CA,4BACAC,UACAC,sBACAC,aAGA,MAAOC,EAAaC,GAAkBC,EAAAA,SAA8BL,IAC7DM,EAAQC,GAAaF,EAAAA,SAAwB,IA+CpD,OAjCAG,EAAAA,UAAU,KACTJ,EAAeJ,IACb,CAACA,IACJQ,EAAAA,UAAU,KACT,GAAIL,GAAeA,EAAYM,OAASP,EAAQ,CAC/C,MAAMQ,EAAYR,EAAOC,EAAYM,OACrC,IAAIE,EAAiB,GAEpBA,EADGD,UAAaA,WAAWE,QACjBF,EAAUG,IAAI,CAACC,EAAOC,KAAA,CAC/BC,OAAQC,EAAAA,QAAWH,EAAMA,OACzBI,YAAaJ,EAAMA,MACnBK,UAASJ,EAAQ,GACjBK,KAAMN,EAAMM,QAGH,CACT,CAAEJ,OAAQ,WAAYE,YAAa,WAAYC,SAAS,GACxD,CAAEH,OAAQ,WAAYE,YAAa,WAAYC,SAAS,IAG1DR,GAAWV,EAAoBU,EAChC,GACE,CAAC,MAAAR,OAAA,EAAAA,EAAaM,QACjBD,EAAAA,UAAU,KACT,GAAIN,EAAQ,CACX,MAAMmB,EAAUC,OAAOC,KAAKrB,GAAQW,IAAKW,IAAA,CACxCC,MAAOR,EAAAA,QAAWO,GAClBE,MAAOF,KAERjB,EAAUc,EACX,GACE,CAACnB,IAECC,mBAKJwB,KAACC,EAAAA,QAAA,CAAIC,UAAU,8BACdC,SAAA;eAAAC,MAAC,MAAA,CACAD,wBAAAC,EAAAA,IAACC,EAAAA,QAAA,CAEAC,QAAQ,WACRC,SAtDuBC,IACtBhC,IACHA,EAAYiC,WAAaD,EAAME,OAAOX,MACtC3B,EAA0B,KAAM,KAAM,KAAMoC,EAAME,OAAOX,SAoDvDY,aAAcnC,EAAYiC,WAC1BG,SAA+B,WAArBpC,EAAYiB,OAAsBjB,EAAYqC,QAJnDrC,EAAYsC,KAFTtC,EAAYsC;qBASrB,MAAA,CACAX,wBAAAC,EAAAA,IAACW,EAAAA,QAAA,CACAC,WAAS,EACTlB,MAAM,QACNmB,aAAW,EAEXC,KAAK,QACLzB,KAAK,OACLc,SAAUnC,EACVuC,aAAcnC,EAAYsB,OAJrBtB,EAAYsC,KALTtC,EAAYsC;qBAarB,MAAA,CACAX,wBAAAC,EAAAA,IAACe,EAAAA,QAAA,CAEAb,QAAQ,WACRR,MAAM,QACNkB,WAAS,EACTI,YAAY,eACZC,KAAK,QACLH,KAAK,QACLP,aAAcnC,EAAYM,MAC1B8B,SAA+B,WAArBpC,EAAYiB,KACtBc,SA7EuBC,IAC1BpC,EAA0BoC,IA6EvBc,YAAcvB,UACb,OAAA,OAAAwB,EAAA5C,EAAO6C,KAAMC,GAAWA,EAAO1B,QAAUA,SAAzC,EAAAwB,EAAiDzB,OAEjDK,SAAA,MAAAxB,OAAA,EAAAA,EAAQO,IAAKwC,oBACbtB,IAACuB,EAAAA,QAAA,CAAS5B,MAAO2B,EAAK3B,MAAQI,SAAAuB,EAAK5B,UAd/BtB,EAAYsC,KAFTtC,EAAYsC,MAvB2BtC,EAAYsC,IAJvD"}

package/dist/views/form-builder/element-edit-forms/table-form.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { MRT_ColumnDef, MRT_RowData } from 'material-react-table';
+import { IElementJson } from '../custom-form';
+import { ApiFormFields } from '../../Redux/state';
+
+interface ITableEditForm {
+    handlePropertyValueUpdate: (event?: any, numberValue?: any, val?: any, fieldType?: any) => void;
+    handleColumnsUpdate: (columns: MRT_ColumnDef<MRT_RowData>[]) => void;
+    element: IElementJson | null;
+    fields: ApiFormFields | null;
+}
+declare const TableEditForm: React.FC<ITableEditForm>;
+export default TableEditForm;

package/dist/views/form-builder/element-edit-forms/text/index.esm.js

@@ -0,0 +1,559 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useCallback, useEffect } from "react";
+import Button from "../../../../components/button/button/index.esm.js";
+import Modal from "../../../../components/modal/modal/index.esm.js";
+import { Typography } from "../../../../components/typography/typography/index.esm.js";
+import TextField from "../../../../components/text-field/text-field/index.esm.js";
+import Select from "../../../../components/select/select/index.esm.js";
+import Checkbox from "../../../../components/checkbox/checkbox/index.esm.js";
+import formatText from "../../../../utils/format-text/index.esm.js";
+import FieldSelect from "../field-select/index.esm.js";
+/* empty css                               */
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import FormControl from "../../../../node_modules/@mui/material/FormControl/FormControl/index.esm.js";
+import MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+import Slider from "../../../../node_modules/@mui/material/Slider/Slider/index.esm.js";
+import FormControlLabel from "../../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.esm.js";
+import Add from "../../../../node_modules/@mui/icons-material/esm/Add/index.esm.js";
+import DialogTitle from "../../../../node_modules/@mui/material/DialogTitle/DialogTitle/index.esm.js";
+import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import Close from "../../../../node_modules/@mui/icons-material/esm/Close/index.esm.js";
+import DialogContent from "../../../../node_modules/@mui/material/DialogContent/DialogContent/index.esm.js";
+import DialogActions from "../../../../node_modules/@mui/material/DialogActions/DialogActions/index.esm.js";
+const COLUMN_PER_ROW_OPTIONS = [1, 2, 3, 4, 5, 6];
+const SELECT_OPTIONS = [
+  { text: "12 Hour", value: "12hr" },
+  { text: "24 Hour", value: "24hr" }
+];
+const CURRENCY_OPTIONS = [
+  { text: "INR (India)", value: "inr" },
+  { text: "USD (US)", value: "usd" }
+];
+const FIELDS_WITHOUT_PLACEHOLDER = /* @__PURE__ */ new Set([
+  "time",
+  "file",
+  "geoLocation",
+  "image",
+  "info",
+  "relation"
+]);
+const FIELDS_WITH_MIN_MAX = /* @__PURE__ */ new Set(["text", "number"]);
+const MemoizedMenuItem = ({ option, index, prefix }) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, children: option.text || option.label }, `${prefix}-${index}`);
+const MemoizedRelationMenuItem = ({ option, index, prefix }) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, children: /* @__PURE__ */ jsx(Typography, { type: "s3", color: "theme.secondary.1000", children: option.label }) }, `${prefix}-${index}`);
+function TextEditForm(props) {
+  const {
+    handlePropertyValueUpdate,
+    handleColumnSelect,
+    handleWidthChange,
+    fields,
+    element
+  } = props;
+  const [elementJSON, setElementJSON] = useState(element);
+  const [openModal, setOpenModal] = useState(false);
+  const [relationFields, setRelationFields] = useState([]);
+  const [functionValue, setFunctionValue] = useState("");
+  const prevElementRef = useRef(element);
+  const prevFieldsRef = useRef(fields);
+  const relationModulesOptions = useMemo(() => {
+    if (!fields || fields === prevFieldsRef.current) {
+      if (prevFieldsRef.current && fields) return prevFieldsRef.current;
+    }
+    prevFieldsRef.current = fields;
+    if (!fields) return [];
+    return Object.keys(fields).map((key) => ({
+      label: formatText(key),
+      value: key
+    }));
+  }, [fields]);
+  const setRelationFieldsOptions = useCallback(
+    (moduleValue) => {
+      if (!fields || !moduleValue) {
+        setRelationFields((prev) => prev.length > 0 ? [] : prev);
+        return;
+      }
+      const fieldsArr = fields[moduleValue];
+      if (fieldsArr == null ? void 0 : fieldsArr.length) {
+        const options = fieldsArr.map((field) => ({
+          label: field.field,
+          value: field.field
+        }));
+        setRelationFields((prev) => {
+          if (prev.length !== options.length) return options;
+          const isDifferent = prev.some(
+            (item, idx) => {
+              var _a, _b;
+              return item.value !== ((_a = options[idx]) == null ? void 0 : _a.value) || item.label !== ((_b = options[idx]) == null ? void 0 : _b.label);
+            }
+          );
+          return isDifferent ? options : prev;
+        });
+      } else {
+        setRelationFields((prev) => prev.length > 0 ? [] : prev);
+      }
+    },
+    [fields]
+  );
+  const handleSave = useCallback((value) => {
+    if (!elementJSON) return;
+    if (elementJSON.default_value !== value) {
+      const updatedElement = { ...elementJSON, default_value: value };
+      setElementJSON(updatedElement);
+      handlePropertyValueUpdate(null, null, value);
+    }
+    if (value) {
+      setFunctionValue("");
+      setOpenModal(false);
+    }
+  }, [elementJSON, handlePropertyValueUpdate]);
+  const handleFieldUpdate = useCallback((e) => {
+    if (!elementJSON) return;
+    const fieldType = e.target.value;
+    if (elementJSON.field_type !== fieldType) {
+      const updatedElement = { ...elementJSON, field_type: fieldType };
+      setElementJSON(updatedElement);
+      handlePropertyValueUpdate(null, null, null, e.target.value);
+    }
+  }, [elementJSON, handlePropertyValueUpdate]);
+  const handleSelectUpdate = useCallback((e) => {
+    if (!elementJSON) return;
+    const option = e.target.value;
+    if (elementJSON.option !== option) {
+      const updatedElement = { ...elementJSON, option };
+      setElementJSON(updatedElement);
+      handlePropertyValueUpdate(null, null, option);
+    }
+  }, [elementJSON, handlePropertyValueUpdate]);
+  const handleModuleSelect = useCallback((e) => {
+    const moduleValue = e.target.value;
+    if ((elementJSON == null ? void 0 : elementJSON.module) !== moduleValue) {
+      setRelationFieldsOptions(moduleValue);
+      handlePropertyValueUpdate(e);
+    }
+  }, [elementJSON == null ? void 0 : elementJSON.module, setRelationFieldsOptions, handlePropertyValueUpdate]);
+  const handleWidthSliderChange = useCallback((_, value) => {
+    if (!elementJSON) return;
+    const widthValue = Array.isArray(value) ? value[0] : value;
+    if (elementJSON.custom_width !== widthValue) {
+      const updatedElement = { ...elementJSON, custom_width: widthValue };
+      setElementJSON(updatedElement);
+      handleWidthChange(widthValue);
+    }
+  }, [elementJSON, handleWidthChange]);
+  const handleFullWidthChange = useCallback((e) => {
+    if (!elementJSON) return;
+    const isFullWidth = e.target.checked;
+    if (elementJSON.is_fullwidth !== isFullWidth) {
+      const updatedElement = { ...elementJSON, is_fullwidth: isFullWidth };
+      setElementJSON(updatedElement);
+      handlePropertyValueUpdate(e);
+    }
+  }, [elementJSON, handlePropertyValueUpdate]);
+  const handleColumnSelectChange = useCallback((e) => {
+    const columnValue = Number(e.target.value);
+    handleColumnSelect(columnValue);
+  }, [handleColumnSelect]);
+  const getDefaultValue = useCallback((elementJSON2) => {
+    var _a;
+    if (["number", "currency", "geoLocation"].includes(elementJSON2.field_type)) {
+      return ((_a = elementJSON2.default_value) == null ? void 0 : _a.toString().replace(/[^0-9]/g, "")) || "";
+    }
+    return elementJSON2.default_value || "";
+  }, []);
+  const getMinMaxLabels = useCallback((fieldType) => {
+    return fieldType === "text" ? { min: "Min character count (with spaces)", max: "Max character count (with spaces)" } : { min: "Min number", max: "Max number" };
+  }, []);
+  const handleOpenModal = useCallback(() => setOpenModal(true), []);
+  const handleCloseModal = useCallback(() => {
+    setOpenModal(false);
+    setFunctionValue("");
+  }, []);
+  const handleFunctionValueChange = useCallback((e) => {
+    setFunctionValue(e.target.value);
+  }, []);
+  useEffect(() => {
+    if (element !== prevElementRef.current) {
+      setElementJSON(element);
+      prevElementRef.current = element;
+      if (element == null ? void 0 : element.module) {
+        setRelationFieldsOptions(element.module);
+      }
+    }
+  }, [element, setRelationFieldsOptions]);
+  const currencySelectSection = useMemo(() => {
+    if ((elementJSON == null ? void 0 : elementJSON.field_type) !== "currency") return null;
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        fullWidth: true,
+        placeholder: "Select Currency",
+        size: "small",
+        onChange: handleSelectUpdate,
+        defaultValue: elementJSON.option,
+        label: "Currency",
+        name: "option",
+        variant: "outlined",
+        children: CURRENCY_OPTIONS.map((option, index) => /* @__PURE__ */ jsx(
+          MemoizedMenuItem,
+          {
+            option,
+            index,
+            prefix: "currency"
+          },
+          `currency-${index}`
+        ))
+      }
+    ) }) });
+  }, [elementJSON == null ? void 0 : elementJSON.field_type, elementJSON == null ? void 0 : elementJSON.option, handleSelectUpdate]);
+  const timeSelectSection = useMemo(() => {
+    if ((elementJSON == null ? void 0 : elementJSON.field_type) !== "time") return null;
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        fullWidth: true,
+        placeholder: "Select Time Format",
+        size: "small",
+        onChange: handleSelectUpdate,
+        defaultValue: elementJSON.option,
+        label: "Time Format",
+        name: "option",
+        variant: "outlined",
+        children: SELECT_OPTIONS.map((option, index) => /* @__PURE__ */ jsx(
+          MemoizedMenuItem,
+          {
+            option,
+            index,
+            prefix: "time"
+          },
+          `time-${index}`
+        ))
+      }
+    ) }) });
+  }, [elementJSON == null ? void 0 : elementJSON.field_type, elementJSON == null ? void 0 : elementJSON.option, handleSelectUpdate]);
+  const relationSelectSection = useMemo(() => {
+    if ((elementJSON == null ? void 0 : elementJSON.field_type) !== "relation") return null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          fullWidth: true,
+          placeholder: relationModulesOptions.length ? "Select Relation Module" : "No data available",
+          size: "small",
+          onChange: handleModuleSelect,
+          value: elementJSON.module || "",
+          label: "Relation Module",
+          name: "module",
+          children: relationModulesOptions.length ? relationModulesOptions.map((option, index) => /* @__PURE__ */ jsx(
+            MemoizedRelationMenuItem,
+            {
+              option,
+              index,
+              prefix: "module"
+            },
+            `module-${index}`
+          )) : /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(Typography, { type: "s3", color: "theme.secondary.1000", children: /* @__PURE__ */ jsx("em", { children: "No data available" }) }) })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          fullWidth: true,
+          placeholder: !elementJSON.module ? "Select Module First" : relationFields.length ? "Select Relation Field" : "No data available",
+          size: "small",
+          onChange: handlePropertyValueUpdate,
+          value: elementJSON.field || "",
+          label: "Relation Field",
+          disabled: !elementJSON.module,
+          name: "field",
+          children: relationFields.length ? relationFields.map((option, index) => /* @__PURE__ */ jsx(
+            MemoizedRelationMenuItem,
+            {
+              option,
+              index,
+              prefix: "field"
+            },
+            `field-${index}`
+          )) : /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(Typography, { type: "s3", color: "theme.secondary.1000", children: /* @__PURE__ */ jsx("em", { children: "No data available" }) }) })
+        }
+      ) }) })
+    ] });
+  }, [
+    elementJSON == null ? void 0 : elementJSON.field_type,
+    elementJSON == null ? void 0 : elementJSON.module,
+    elementJSON == null ? void 0 : elementJSON.field,
+    relationModulesOptions,
+    relationFields,
+    handleModuleSelect,
+    handlePropertyValueUpdate
+  ]);
+  if (!elementJSON) {
+    return null;
+  }
+  const { field_type } = elementJSON;
+  const minMaxLabels = getMinMaxLabels(field_type);
+  return /* @__PURE__ */ jsxs(Box, { className: "formSection--FieldContainer", children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      FieldSelect,
+      {
+        variant: "outlined",
+        onChange: handleFieldUpdate,
+        defaultValue: field_type,
+        label: "Field Type",
+        disabled: elementJSON.type === "system" || !elementJSON.is_new
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        label: "Label",
+        is_required: true,
+        name: "label",
+        type: "text",
+        onChange: handlePropertyValueUpdate,
+        defaultValue: elementJSON.label
+      }
+    ) }),
+    (field_type === "file" || field_type === "image") && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        label: "Max File Size (in MB)",
+        name: "max_size",
+        type: "number",
+        onChange: handlePropertyValueUpdate,
+        defaultValue: elementJSON.max_size
+      }
+    ) }),
+    currencySelectSection,
+    !FIELDS_WITHOUT_PLACEHOLDER.has(field_type) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          label: "Placeholder",
+          name: "placeholder",
+          type: "text",
+          onChange: handlePropertyValueUpdate,
+          defaultValue: elementJSON.placeholder
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          label: "Default Value",
+          placeholder: "Default Value",
+          name: "default_value",
+          type: field_type === "phone" ? "tel" : field_type === "number" ? "number" : "text",
+          onChange: handlePropertyValueUpdate,
+          defaultValue: getDefaultValue(elementJSON)
+        }
+      ) })
+    ] }),
+    timeSelectSection,
+    relationSelectSection,
+    FIELDS_WITH_MIN_MAX.has(field_type) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          label: minMaxLabels.min,
+          name: "min_length",
+          type: "number",
+          onChange: (e) => handlePropertyValueUpdate(e, Number(e.target.value)),
+          defaultValue: elementJSON.min_length || elementJSON.min || 1
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          label: minMaxLabels.max,
+          name: "max_length",
+          type: "number",
+          onChange: (e) => handlePropertyValueUpdate(e, Number(e.target.value)),
+          defaultValue: elementJSON.max_length || elementJSON.max || (field_type === "number" ? 1e4 : 255)
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        fullWidth: true,
+        placeholder: "Select Column Per Row",
+        size: "small",
+        onChange: handleColumnSelectChange,
+        value: elementJSON.columns_per_row || 1,
+        label: "Select Column Per Row",
+        name: "columns_per_row",
+        variant: "outlined",
+        children: COLUMN_PER_ROW_OPTIONS.map((option, index) => /* @__PURE__ */ jsx(MenuItem, { value: option, children: option }, `column-${index}`))
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { color: "black", mb: 1 }, children: "Adjust Width:" }),
+      /* @__PURE__ */ jsx(
+        Slider,
+        {
+          value: elementJSON.custom_width || 12,
+          name: "custom_width",
+          min: 1,
+          max: 12,
+          step: 1,
+          onChange: handleWidthSliderChange,
+          "aria-labelledby": "width-slider",
+          sx: { color: "#4AC08C" },
+          disabled: elementJSON.is_fullwidth,
+          marks: true,
+          valueLabelDisplay: "auto"
+        }
+      )
+    ] }),
+    field_type === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          label: "Float Step",
+          name: "float_step",
+          type: "number",
+          step: "0.01",
+          onChange: handlePropertyValueUpdate,
+          defaultValue: elementJSON.float_step
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          name: "is_negative",
+          control: /* @__PURE__ */ jsx(Checkbox, {}),
+          onChange: handlePropertyValueUpdate,
+          checked: elementJSON.is_negative || false,
+          label: "Allow Negative Numbers"
+        }
+      ) })
+    ] }),
+    field_type === "date" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          name: "is_future_dates_allowed",
+          control: /* @__PURE__ */ jsx(Checkbox, {}),
+          onChange: handlePropertyValueUpdate,
+          checked: elementJSON.is_future_dates_allowed || false,
+          label: "Allow Future Dates"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          name: "is_past_dates_allowed",
+          control: /* @__PURE__ */ jsx(Checkbox, {}),
+          onChange: handlePropertyValueUpdate,
+          checked: elementJSON.is_past_dates_allowed || false,
+          label: "Allow Past Dates"
+        }
+      ) })
+    ] }),
+    field_type !== "info" && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        name: "is_required",
+        control: /* @__PURE__ */ jsx(Checkbox, {}),
+        onChange: handlePropertyValueUpdate,
+        checked: elementJSON.is_required || false,
+        label: "This field is required"
+      }
+    ) }),
+    field_type === "email" && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        name: "is_unique",
+        control: /* @__PURE__ */ jsx(Checkbox, {}),
+        onChange: handlePropertyValueUpdate,
+        checked: elementJSON.is_unique || false,
+        label: "Is Unique"
+      }
+    ) }),
+    field_type === "text" && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        name: "is_multiline",
+        control: /* @__PURE__ */ jsx(Checkbox, {}),
+        onChange: handlePropertyValueUpdate,
+        checked: elementJSON.is_multiline || false,
+        label: "Is Multiline"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        name: "is_fullwidth",
+        control: /* @__PURE__ */ jsx(Checkbox, {}),
+        onChange: handleFullWidthChange,
+        checked: elementJSON.is_fullwidth || false,
+        label: "Full Width"
+      }
+    ) }),
+    field_type === "info" && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        startIcon: /* @__PURE__ */ jsx(Add, {}),
+        onClick: handleOpenModal,
+        className: "formSection--PreviewButton",
+        children: "Add Function"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Modal, { fullWidth: true, onClose: handleCloseModal, open: openModal, children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { children: [
+        /* @__PURE__ */ jsx(Typography, { type: "s3", weight: "medium", color: "theme.secondary.1000", children: "Add Function" }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            edge: "end",
+            onClick: handleCloseModal,
+            size: "small",
+            children: /* @__PURE__ */ jsx(Close, { fontSize: "inherit" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(DialogContent, { dividers: true, children: [
+        /* @__PURE__ */ jsxs(Typography, { weight: "medium", type: "s3", color: "theme.secondary.700", sx: { mb: 2 }, children: [
+          "Label: ",
+          /* @__PURE__ */ jsx("span", { style: { color: "#1F2125" }, children: elementJSON.label })
+        ] }),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            name: "default_value",
+            fullWidth: true,
+            placeholder: "Add a function",
+            multiline: true,
+            minRows: 4,
+            defaultValue: elementJSON.default_value,
+            onChange: handleFunctionValueChange,
+            value: functionValue
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(DialogActions, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            onClick: handleCloseModal,
+            style: { color: "black" },
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { onClick: () => handleSave(functionValue), children: "Save" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  TextEditForm,
+  TextEditForm as default
+};
+//# sourceMappingURL=index.esm.js.map