@erpsquad/common 1.8.46 → 1.8.48

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

@@ -0,0 +1,318 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useState, useEffect, useMemo, useCallback } from "react";
+import { enqueueSnackbar } from "../../../../node_modules/notistack/notistack.esm/index.esm.js";
+import { Checkbox } from "../../../../components/checkbox/checkbox/index.esm.js";
+import { Select } from "../../../../components/select/select/index.esm.js";
+import { TextField } from "../../../../components/text-field/text-field/index.esm.js";
+import { Typography } from "../../../../components/typography/typography/index.esm.js";
+import { Button } from "../../../../components/button/button/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 MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+import FormControl from "../../../../node_modules/@mui/material/FormControl/FormControl/index.esm.js";
+import Slider from "../../../../node_modules/@mui/material/Slider/Slider/index.esm.js";
+import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import { Trash } from "../../../../components/icons/trash/index.esm.js";
+import Add from "../../../../node_modules/@mui/icons-material/esm/Add/index.esm.js";
+import FormControlLabel from "../../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.esm.js";
+const COLUMN_PER_ROW_OPTIONS = [1, 2, 3, 4, 5, 6];
+const SelectEditForm = React__default.memo(({
+  element,
+  handlePropertyValueUpdate,
+  handleSelectOptionValueUpdate,
+  handleColumnSelect,
+  handleWidthChange
+}) => {
+  const [selectOptions, setSelectOptions] = useState(element.options || []);
+  const [newOption, setNewOption] = useState({ label: "", value: "" });
+  const [isAddingOption, setIsAddingOption] = useState(false);
+  useEffect(() => {
+    if (JSON.stringify(selectOptions) !== JSON.stringify(element.options || [])) {
+      setSelectOptions(element.options || []);
+    }
+  }, [element.options, selectOptions]);
+  const isFieldDisabled = useMemo(
+    () => element.type === "system" || !element.is_new,
+    [element.type, element.is_new]
+  );
+  const selectedOptionLabel = useMemo(() => {
+    const selectedOption = selectOptions.find((option) => option.value === element.default_value);
+    return (selectedOption == null ? void 0 : selectedOption.label) || "Select Default";
+  }, [selectOptions, element.default_value]);
+  const handleFieldUpdate = useCallback((e) => {
+    handlePropertyValueUpdate(null, null, null, e.target.value);
+  }, [handlePropertyValueUpdate]);
+  const handleSelectUpdate = useCallback((e) => {
+    handlePropertyValueUpdate(null, null, e.target.value);
+  }, [handlePropertyValueUpdate]);
+  const handleMultiSelect = useCallback((e) => {
+    const isChecked = e.target.checked;
+    const syntheticEvent = {
+      target: {
+        name: "is_multiselect",
+        checked: isChecked,
+        value: isChecked
+      }
+    };
+    handlePropertyValueUpdate(syntheticEvent);
+    if (isChecked && element.default_value) {
+      handlePropertyValueUpdate(null, "default_value", null);
+    }
+  }, [handlePropertyValueUpdate, element.default_value]);
+  const handleNewOptionChange = useCallback((e) => {
+    const { name, value } = e.target;
+    setNewOption((prev) => ({ ...prev, [name]: value }));
+  }, []);
+  const handleAddOption = useCallback(() => {
+    if (!newOption.label.trim() || !newOption.value.trim()) {
+      return;
+    }
+    const isDuplicate = selectOptions.some(
+      (option) => option.value === newOption.value || option.label === newOption.label
+    );
+    if (isDuplicate) {
+      enqueueSnackbar("Option with this value or label already exists.", { variant: "error" });
+      return;
+    }
+    const updatedOptions = [...selectOptions, { ...newOption }];
+    setSelectOptions(updatedOptions);
+    handleSelectOptionValueUpdate(updatedOptions);
+    setNewOption({ label: "", value: "" });
+    setIsAddingOption(false);
+  }, [newOption, selectOptions, handleSelectOptionValueUpdate]);
+  const handleRemoveOption = useCallback((indexToRemove) => {
+    const updatedOptions = selectOptions.filter((_, index) => index !== indexToRemove);
+    setSelectOptions(updatedOptions);
+    handleSelectOptionValueUpdate(updatedOptions);
+    const removedOption = selectOptions[indexToRemove];
+    if (element.default_value === (removedOption == null ? void 0 : removedOption.value)) {
+      handlePropertyValueUpdate(null, "default_value", null);
+    }
+  }, [selectOptions, handleSelectOptionValueUpdate, element.default_value, handlePropertyValueUpdate]);
+  const handleWidthChangeCallback = useCallback((_, newValue) => {
+    handleWidthChange(newValue);
+  }, [handleWidthChange]);
+  return /* @__PURE__ */ jsxs(Box, { className: "formSection--FieldContainer", children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      FieldSelect,
+      {
+        variant: "outlined",
+        onChange: handleFieldUpdate,
+        defaultValue: element.field_type,
+        label: "Field Type",
+        disabled: isFieldDisabled
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        label: "Label",
+        is_required: true,
+        name: "label",
+        type: "text",
+        onChange: handlePropertyValueUpdate,
+        defaultValue: element.label
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        label: "Placeholder",
+        is_required: true,
+        name: "placeholder",
+        type: "text",
+        onChange: handlePropertyValueUpdate,
+        defaultValue: element.placeholder
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        fullWidth: true,
+        placeholder: "Select Default",
+        size: "small",
+        name: "default_value",
+        onChange: handleSelectUpdate,
+        value: element.default_value || "",
+        label: "Default",
+        variant: "outlined",
+        disabled: element.is_multiselect,
+        renderValue: () => selectedOptionLabel,
+        children: selectOptions.map((option, index) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, children: option.label }, `${option.value}-${index}`))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        fullWidth: true,
+        placeholder: "Select Column Per Row",
+        size: "small",
+        onChange: handleColumnSelect,
+        label: "Select Column Per Row",
+        name: "columnPerRow",
+        variant: "outlined",
+        children: COLUMN_PER_ROW_OPTIONS.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option, children: option }, option))
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { color: "black", mb: 1 }, children: "Adjust Width:" }),
+      /* @__PURE__ */ jsx(Box, { pr: 2, children: /* @__PURE__ */ jsx(
+        Slider,
+        {
+          value: element.custom_width || 6,
+          min: 1,
+          max: 12,
+          step: 1,
+          onChange: handleWidthChangeCallback,
+          "aria-labelledby": "width-slider",
+          sx: { color: "#4AC08C" },
+          marks: true,
+          valueLabelDisplay: "auto"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { className: "formSection--SelectOption", children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          type: "s5",
+          weight: "medium",
+          color: "theme.secondary.800",
+          sx: { mb: 0.5 },
+          children: "Options"
+        }
+      ),
+      selectOptions.map((option, index) => /* @__PURE__ */ jsxs(Box, { sx: { mb: 1, display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            value: `${option.label} (${option.value})`,
+            InputProps: { readOnly: true }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            color: "error",
+            size: "small",
+            onClick: () => handleRemoveOption(index),
+            children: /* @__PURE__ */ jsx(Trash, {})
+          }
+        )
+      ] }, `option-${index}`)),
+      isAddingOption && /* @__PURE__ */ jsxs(Box, { className: "formSection--SelectOption", sx: { mt: 0.5, p: 2, border: "1px solid #ddd", borderRadius: 1 }, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            label: "Option Label",
+            is_required: true,
+            name: "label",
+            type: "text",
+            placeholder: "Enter option label",
+            value: newOption.label,
+            onChange: handleNewOptionChange
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            label: "Option Value",
+            placeholder: "Enter option value",
+            is_required: true,
+            name: "value",
+            type: "text",
+            value: newOption.value,
+            onChange: handleNewOptionChange
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleAddOption,
+              startIcon: /* @__PURE__ */ jsx(Add, {}),
+              disabled: !newOption.label.trim() || !newOption.value.trim(),
+              children: "Add Option"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: () => {
+                setIsAddingOption(false);
+                setNewOption({ label: "", value: "" });
+              },
+              variant: "outlined",
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] }),
+      !isAddingOption && /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setIsAddingOption(true),
+          variant: "outlined",
+          className: "formSection--Button",
+          startIcon: /* @__PURE__ */ jsx(Add, {}),
+          sx: { mt: 1 },
+          children: "Add Option"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          name: "is_multiselect",
+          control: /* @__PURE__ */ jsx(Checkbox, {}),
+          onChange: handleMultiSelect,
+          checked: element.is_multiselect,
+          label: "Enable Multi Select"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          name: "is_required",
+          control: /* @__PURE__ */ jsx(Checkbox, {}),
+          onChange: handlePropertyValueUpdate,
+          checked: element.is_required,
+          label: "This field is required"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          name: "is_unique",
+          control: /* @__PURE__ */ jsx(Checkbox, {}),
+          onChange: handlePropertyValueUpdate,
+          checked: element.is_unique,
+          label: "Is Unique"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          name: "is_fullwidth",
+          control: /* @__PURE__ */ jsx(Checkbox, {}),
+          onChange: handlePropertyValueUpdate,
+          checked: element.is_fullwidth,
+          label: "Full Width"
+        }
+      )
+    ] })
+  ] });
+});
+SelectEditForm.displayName = "SelectEditForm";
+export {
+  SelectEditForm,
+  SelectEditForm as default
+};
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/form-builder/element-edit-forms/select.tsx"],"sourcesContent":["// React imports\r\nimport React, { useEffect, useState, useCallback, useMemo } from \"react\";\r\n\r\n// Material UI imports\r\nimport { \r\n  MenuItem, \r\n  Box, \r\n  FormControlLabel, \r\n  Slider, \r\n  FormControl, \r\n  IconButton\r\n} from \"@mui/material\";\r\nimport { Add } from \"@mui/icons-material\";\r\n\r\n// Third-party imports\r\nimport { enqueueSnackbar } from \"notistack\";\r\n\r\n// ERP Common imports\r\nimport Checkbox from \"@/components/checkbox/checkbox\";\r\nimport Select from \"@/components/select/select\";\r\nimport TextField from \"@/components/text-field/text-field\";\r\nimport Typography from \"@/components/typography/typography\";\r\nimport Button from \"@/components/button/button\";\r\nimport { Trash } from \"@/components/icons\";\r\n\r\n// Local imports\r\nimport FieldSelect from \"./field-select\";\r\nimport \"../custom-form.scss\";\r\n\r\ninterface Option {\r\n  label: string;\r\n  value: string;\r\n  [key: string]: string;\r\n}\r\n\r\ninterface ElementJSON {\r\n  id: string;\r\n  field_type: string;\r\n  label: string;\r\n  placeholder: string;\r\n  default_value: string | null;\r\n  is_multiselect: boolean;\r\n  is_required: boolean;\r\n  is_unique: boolean;\r\n  is_fullwidth: boolean;\r\n  custom_width: number;\r\n  type?: string;\r\n  is_new?: boolean;\r\n  options: Option[];\r\n}\r\n\r\ninterface SelectEditFormProps {\r\n  element: ElementJSON;\r\n  handlePropertyValueUpdate: (\r\n    event: React.ChangeEvent<HTMLInputElement> | null,\r\n    name?: string | null,\r\n    value?: any,\r\n    fieldType?: string\r\n  ) => void;\r\n  handleSelectOptionValueUpdate: (options: Option[]) => void;\r\n  handleColumnSelect: (event: React.ChangeEvent<{ value: unknown }>) => void;\r\n  handleWidthChange: (value: number | number[]) => void;\r\n}\r\n\r\nconst COLUMN_PER_ROW_OPTIONS = [1, 2, 3, 4, 5, 6] as const;\r\n\r\nexport const SelectEditForm: React.FC<SelectEditFormProps> = React.memo(({\r\n  element,\r\n  handlePropertyValueUpdate,\r\n  handleSelectOptionValueUpdate,\r\n  handleColumnSelect,\r\n  handleWidthChange\r\n}) => {\r\n  // Local state management\r\n  const [selectOptions, setSelectOptions] = useState<Option[]>(element.options || []);\r\n  const [newOption, setNewOption] = useState<Option>({ label: \"\", value: \"\" });\r\n  const [isAddingOption, setIsAddingOption] = useState(false);\r\n\r\n  // Sync options with parent element when element changes\r\n  useEffect(() => {\r\n    if (JSON.stringify(selectOptions) !== JSON.stringify(element.options || [])) {\r\n      setSelectOptions(element.options || []);\r\n    }\r\n  }, [element.options, selectOptions]);\r\n\r\n  // Memoized computed values\r\n  const isFieldDisabled = useMemo(() => \r\n    element.type === \"system\" || !element.is_new, \r\n    [element.type, element.is_new]\r\n  );\r\n\r\n  const selectedOptionLabel = useMemo(() => {\r\n    const selectedOption = selectOptions.find(option => option.value === element.default_value);\r\n    return selectedOption?.label || \"Select Default\";\r\n  }, [selectOptions, element.default_value]);\r\n\r\n  // Optimized event handlers with useCallback\r\n  const handleFieldUpdate = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    handlePropertyValueUpdate(null, null, null, e.target.value);\r\n  }, [handlePropertyValueUpdate]);\r\n\r\n  const handleSelectUpdate = useCallback((e: React.ChangeEvent<{ value: unknown }>) => {\r\n    handlePropertyValueUpdate(null, null, e.target.value);\r\n  }, [handlePropertyValueUpdate]);\r\n\r\n  const handleMultiSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const isChecked = e.target.checked;\r\n    // Reset default value when enabling multiselect\r\n    const defaultValue = isChecked ? null : element.default_value;\r\n    \r\n    // Create a synthetic event for the property update\r\n    const syntheticEvent = {\r\n      target: {\r\n        name: 'is_multiselect',\r\n        checked: isChecked,\r\n        value: isChecked\r\n      }\r\n    } as React.ChangeEvent<HTMLInputElement>;\r\n    \r\n    handlePropertyValueUpdate(syntheticEvent);\r\n    \r\n    // If enabling multiselect, also clear the default value\r\n    if (isChecked && element.default_value) {\r\n      handlePropertyValueUpdate(null, 'default_value', null);\r\n    }\r\n  }, [handlePropertyValueUpdate, element.default_value]);\r\n\r\n  const handleNewOptionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const { name, value } = e.target;\r\n    setNewOption(prev => ({ ...prev, [name]: value }));\r\n  }, []);\r\n\r\n  const handleAddOption = useCallback(() => {\r\n    if (!newOption.label.trim() || !newOption.value.trim()) {\r\n      return; // Don't add empty options\r\n    }\r\n\r\n    // Check for duplicate values\r\n    const isDuplicate = selectOptions.some(option => \r\n      option.value === newOption.value || option.label === newOption.label\r\n    );\r\n    \r\n    if (isDuplicate) {\r\n      // Could show an error message here\r\n      enqueueSnackbar(\"Option with this value or label already exists.\", { variant: \"error\" });\r\n      return;\r\n    }\r\n\r\n    const updatedOptions = [...selectOptions, { ...newOption }];\r\n    setSelectOptions(updatedOptions);\r\n    handleSelectOptionValueUpdate(updatedOptions);\r\n    \r\n    // Reset form\r\n    setNewOption({ label: \"\", value: \"\" });\r\n    setIsAddingOption(false);\r\n  }, [newOption, selectOptions, handleSelectOptionValueUpdate]);\r\n\r\n  const handleRemoveOption = useCallback((indexToRemove: number) => {\r\n    const updatedOptions = selectOptions.filter((_, index) => index !== indexToRemove);\r\n    setSelectOptions(updatedOptions);\r\n    handleSelectOptionValueUpdate(updatedOptions);\r\n    \r\n    // Clear default value if the removed option was selected\r\n    const removedOption = selectOptions[indexToRemove];\r\n    if (element.default_value === removedOption?.value) {\r\n      handlePropertyValueUpdate(null, 'default_value', null);\r\n    }\r\n  }, [selectOptions, handleSelectOptionValueUpdate, element.default_value, handlePropertyValueUpdate]);\r\n\r\n  const handleWidthChangeCallback = useCallback((\r\n    _: Event, \r\n    newValue: number | number[]\r\n  ) => {\r\n    handleWidthChange(newValue);\r\n  }, [handleWidthChange]);\r\n\r\n  return (\r\n    <Box className=\"formSection--FieldContainer\">\r\n      {/* Field Type Selection */}\r\n      <Box>\r\n        <FieldSelect\r\n          variant=\"outlined\"\r\n          onChange={handleFieldUpdate}\r\n          defaultValue={element.field_type}\r\n          label=\"Field Type\"\r\n          disabled={isFieldDisabled}\r\n        />\r\n      </Box>\r\n\r\n      {/* Label Field */}\r\n      <Box>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Label\"\r\n          is_required\r\n          name=\"label\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={element.label}\r\n        />\r\n      </Box>\r\n\r\n      {/* Placeholder Field */}\r\n      <Box>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Placeholder\"\r\n          is_required\r\n          name=\"placeholder\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={element.placeholder}\r\n        />\r\n      </Box>\r\n\r\n      {/* Default Value Selection */}\r\n      <Box>\r\n        <Select\r\n          fullWidth\r\n          placeholder=\"Select Default\"\r\n          size=\"small\"\r\n          name=\"default_value\"\r\n          onChange={handleSelectUpdate}\r\n          value={element.default_value || \"\"}\r\n          label=\"Default\"\r\n          variant=\"outlined\"\r\n          disabled={element.is_multiselect}\r\n          renderValue={() => selectedOptionLabel}\r\n        >\r\n          {selectOptions.map((option, index) => (\r\n            <MenuItem key={`${option.value}-${index}`} value={option.value}>\r\n              {option.label}\r\n            </MenuItem>\r\n          ))}\r\n        </Select>\r\n      </Box>\r\n\r\n      {/* Column Per Row Selection */}\r\n      <Box>\r\n        <FormControl fullWidth>\r\n          <Select\r\n            fullWidth\r\n            placeholder=\"Select Column Per Row\"\r\n            size=\"small\"\r\n            onChange={handleColumnSelect}\r\n            label=\"Select Column Per Row\"\r\n            name=\"columnPerRow\"\r\n            variant=\"outlined\"\r\n          >\r\n            {COLUMN_PER_ROW_OPTIONS.map((option) => (\r\n              <MenuItem key={option} value={option}>\r\n                {option}\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n\r\n      {/* Width Slider */}\r\n      <Box>\r\n        <Typography sx={{ color: 'black', mb: 1 }}>\r\n          Adjust Width:\r\n        </Typography>\r\n        <Box pr={2}>\r\n          <Slider\r\n            value={element.custom_width || 6}\r\n            min={1}\r\n            max={12}\r\n            step={1}\r\n            onChange={handleWidthChangeCallback}\r\n            aria-labelledby=\"width-slider\"\r\n            sx={{ color: \"#4AC08C\" }}\r\n            marks\r\n            valueLabelDisplay=\"auto\"\r\n          />\r\n        </Box>\r\n      </Box>\r\n\r\n      {/* Options Management */}\r\n      <Box className=\"formSection--SelectOption\">\r\n        <Typography \r\n          type=\"s5\" \r\n          weight=\"medium\" \r\n          color=\"theme.secondary.800\"\r\n          sx={{ mb: 0.5 }}\r\n        >\r\n          Options\r\n        </Typography>\r\n        \r\n        {/* Existing Options */}\r\n        {selectOptions.map((option, index) => (\r\n          <Box key={`option-${index}`} sx={{ mb: 1, display: 'flex', gap: 1 }}>\r\n            <TextField\r\n              fullWidth\r\n              value={`${option.label} (${option.value})`}\r\n              InputProps={{ readOnly: true }}\r\n            />\r\n            <IconButton\r\n              color=\"error\"\r\n              size=\"small\"\r\n              onClick={() => handleRemoveOption(index)}\r\n            >\r\n              <Trash />\r\n            </IconButton>\r\n          </Box>\r\n        ))}\r\n\r\n        {/* Add New Option Form */}\r\n        {isAddingOption && (\r\n          <Box className=\"formSection--SelectOption\" sx={{ mt:0.5, p: 2, border: '1px solid #ddd', borderRadius: 1 }}>\r\n            <Box sx={{ mb: 2 }}>\r\n              <TextField\r\n                fullWidth\r\n                label=\"Option Label\"\r\n                is_required\r\n                name=\"label\"\r\n                type=\"text\"\r\n                placeholder=\"Enter option label\"\r\n                value={newOption.label}\r\n                onChange={handleNewOptionChange}\r\n              />\r\n            </Box>\r\n            <Box sx={{ mb: 2 }}>\r\n              <TextField\r\n                fullWidth\r\n                label=\"Option Value\"\r\n                placeholder=\"Enter option value\"\r\n                is_required\r\n                name=\"value\"\r\n                type=\"text\"\r\n                value={newOption.value}\r\n                onChange={handleNewOptionChange}\r\n              />\r\n            </Box>\r\n            <Box sx={{ display: 'flex', gap: 1 }}>\r\n              <Button\r\n                onClick={handleAddOption}\r\n                // className=\"formSection--Button\"\r\n                startIcon={<Add />}\r\n                disabled={!newOption.label.trim() || !newOption.value.trim()}\r\n              >\r\n                Add Option\r\n              </Button>\r\n              <Button\r\n                onClick={() => {\r\n                  setIsAddingOption(false);\r\n                  setNewOption({ label: \"\", value: \"\" });\r\n                }}\r\n                variant=\"outlined\"\r\n              >\r\n                Cancel\r\n              </Button>\r\n            </Box>\r\n          </Box>\r\n        )}\r\n\r\n        {/* Add Option Button */}\r\n        {!isAddingOption && (\r\n          <Button\r\n            onClick={() => setIsAddingOption(true)}\r\n            variant=\"outlined\"\r\n            className=\"formSection--Button\"\r\n            startIcon={<Add />}\r\n            sx={{ mt: 1 }}\r\n          >\r\n            Add Option\r\n          </Button>\r\n        )}\r\n      </Box>\r\n\r\n      {/* Form Controls */}\r\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\r\n        <FormControlLabel\r\n          name=\"is_multiselect\"\r\n          control={<Checkbox />}\r\n          onChange={handleMultiSelect}\r\n          checked={element.is_multiselect}\r\n          label=\"Enable Multi Select\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_required\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_required}\r\n          label=\"This field is required\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_unique\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_unique}\r\n          label=\"Is Unique\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_fullwidth\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_fullwidth}\r\n          label=\"Full Width\"\r\n        />\r\n      </Box>\r\n    </Box>\r\n  );\r\n});\r\n\r\nSelectEditForm.displayName = 'SelectEditForm';\r\n\r\nexport default SelectEditForm;"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;AAgEA,MAAM,yBAAyB,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzC,MAAM,iBAAgDA,eAAM,KAAK,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEJ,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAmB,QAAQ,WAAW,EAAE;AAClF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,EAAE,OAAO,IAAI,OAAO,IAAI;AAC3E,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAG1D,YAAU,MAAM;AACd,QAAI,KAAK,UAAU,aAAa,MAAM,KAAK,UAAU,QAAQ,WAAW,CAAA,CAAE,GAAG;AAC3E,uBAAiB,QAAQ,WAAW,EAAE;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,aAAa,CAAC;AAGnC,QAAM,kBAAkB;AAAA,IAAQ,MAC9B,QAAQ,SAAS,YAAY,CAAC,QAAQ;AAAA,IACtC,CAAC,QAAQ,MAAM,QAAQ,MAAM;AAAA,EAAA;AAG/B,QAAM,sBAAsB,QAAQ,MAAM;AACxC,UAAM,iBAAiB,cAAc,KAAK,YAAU,OAAO,UAAU,QAAQ,aAAa;AAC1F,YAAO,iDAAgB,UAAS;AAAA,EAClC,GAAG,CAAC,eAAe,QAAQ,aAAa,CAAC;AAGzC,QAAM,oBAAoB,YAAY,CAAC,MAA2C;AAChF,8BAA0B,MAAM,MAAM,MAAM,EAAE,OAAO,KAAK;AAAA,EAC5D,GAAG,CAAC,yBAAyB,CAAC;AAE9B,QAAM,qBAAqB,YAAY,CAAC,MAA6C;AACnF,8BAA0B,MAAM,MAAM,EAAE,OAAO,KAAK;AAAA,EACtD,GAAG,CAAC,yBAAyB,CAAC;AAE9B,QAAM,oBAAoB,YAAY,CAAC,MAA2C;AAChF,UAAM,YAAY,EAAE,OAAO;AAK3B,UAAM,iBAAiB;AAAA,MACrB,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAGF,8BAA0B,cAAc;AAGxC,QAAI,aAAa,QAAQ,eAAe;AACtC,gCAA0B,MAAM,iBAAiB,IAAI;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,2BAA2B,QAAQ,aAAa,CAAC;AAErD,QAAM,wBAAwB,YAAY,CAAC,MAA2C;AACpF,UAAM,EAAE,MAAM,MAAA,IAAU,EAAE;AAC1B,iBAAa,CAAA,UAAS,EAAE,GAAG,MAAM,CAAC,IAAI,GAAG,QAAQ;AAAA,EACnD,GAAG,CAAA,CAAE;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,CAAC,UAAU,MAAM,KAAA,KAAU,CAAC,UAAU,MAAM,QAAQ;AACtD;AAAA,IACF;AAGA,UAAM,cAAc,cAAc;AAAA,MAAK,YACrC,OAAO,UAAU,UAAU,SAAS,OAAO,UAAU,UAAU;AAAA,IAAA;AAGjE,QAAI,aAAa;AAEf,sBAAgB,mDAAmD,EAAE,SAAS,QAAA,CAAS;AACvF;AAAA,IACF;AAEA,UAAM,iBAAiB,CAAC,GAAG,eAAe,EAAE,GAAG,WAAW;AAC1D,qBAAiB,cAAc;AAC/B,kCAA8B,cAAc;AAG5C,iBAAa,EAAE,OAAO,IAAI,OAAO,IAAI;AACrC,sBAAkB,KAAK;AAAA,EACzB,GAAG,CAAC,WAAW,eAAe,6BAA6B,CAAC;AAE5D,QAAM,qBAAqB,YAAY,CAAC,kBAA0B;AAChE,UAAM,iBAAiB,cAAc,OAAO,CAAC,GAAG,UAAU,UAAU,aAAa;AACjF,qBAAiB,cAAc;AAC/B,kCAA8B,cAAc;AAG5C,UAAM,gBAAgB,cAAc,aAAa;AACjD,QAAI,QAAQ,mBAAkB,+CAAe,QAAO;AAClD,gCAA0B,MAAM,iBAAiB,IAAI;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,eAAe,+BAA+B,QAAQ,eAAe,yBAAyB,CAAC;AAEnG,QAAM,4BAA4B,YAAY,CAC5C,GACA,aACG;AACH,sBAAkB,QAAQ;AAAA,EAC5B,GAAG,CAAC,iBAAiB,CAAC;AAEtB,SACE,qBAAC,KAAA,EAAI,WAAU,+BAEb,UAAA;AAAA,IAAA,oBAAC,KAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,UAAU;AAAA,QACV,cAAc,QAAQ;AAAA,QACtB,OAAM;AAAA,QACN,UAAU;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,wBAGC,KAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT,OAAM;AAAA,QACN,aAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAc,QAAQ;AAAA,MAAA;AAAA,IAAA,GAE1B;AAAA,wBAGC,KAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT,OAAM;AAAA,QACN,aAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAc,QAAQ;AAAA,MAAA;AAAA,IAAA,GAE1B;AAAA,wBAGC,KAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT,aAAY;AAAA,QACZ,MAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,QAAQ,iBAAiB;AAAA,QAChC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,UAAU,QAAQ;AAAA,QAClB,aAAa,MAAM;AAAA,QAElB,wBAAc,IAAI,CAAC,QAAQ,UAC1B,oBAAC,YAA0C,OAAO,OAAO,OACtD,UAAA,OAAO,SADK,GAAG,OAAO,KAAK,IAAI,KAAK,EAEvC,CACD;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IAGA,oBAAC,KAAA,EACC,UAAA,oBAAC,aAAA,EAAY,WAAS,MACpB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT,aAAY;AAAA,QACZ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAM;AAAA,QACN,MAAK;AAAA,QACL,SAAQ;AAAA,QAEP,UAAA,uBAAuB,IAAI,CAAC,WAC3B,oBAAC,YAAsB,OAAO,QAC3B,UAAA,OAAA,GADY,MAEf,CACD;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,yBAGC,KAAA,EACC,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,IAAI,EAAE,OAAO,SAAS,IAAI,EAAA,GAAK,UAAA,gBAAA,CAE3C;AAAA,MACA,oBAAC,KAAA,EAAI,IAAI,GACP,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,QAAQ,gBAAgB;AAAA,UAC/B,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,UAAU;AAAA,UACV,mBAAgB;AAAA,UAChB,IAAI,EAAE,OAAO,UAAA;AAAA,UACb,OAAK;AAAA,UACL,mBAAkB;AAAA,QAAA;AAAA,MAAA,EACpB,CACF;AAAA,IAAA,GACF;AAAA,IAGA,qBAAC,KAAA,EAAI,WAAU,6BACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,OAAM;AAAA,UACN,IAAI,EAAE,IAAI,IAAA;AAAA,UACX,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAKA,cAAc,IAAI,CAAC,QAAQ,UAC1B,qBAAC,KAAA,EAA4B,IAAI,EAAE,IAAI,GAAG,SAAS,QAAQ,KAAK,KAC9D,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAS;AAAA,YACT,OAAO,GAAG,OAAO,KAAK,KAAK,OAAO,KAAK;AAAA,YACvC,YAAY,EAAE,UAAU,KAAA;AAAA,UAAK;AAAA,QAAA;AAAA,QAE/B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,MAAK;AAAA,YACL,SAAS,MAAM,mBAAmB,KAAK;AAAA,YAEvC,8BAAC,OAAA,CAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACT,EAAA,GAZQ,UAAU,KAAK,EAazB,CACD;AAAA,MAGA,kBACC,qBAAC,KAAA,EAAI,WAAU,6BAA4B,IAAI,EAAE,IAAG,KAAK,GAAG,GAAG,QAAQ,kBAAkB,cAAc,KACrG,UAAA;AAAA,QAAA,oBAAC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAS;AAAA,YACT,OAAM;AAAA,YACN,aAAW;AAAA,YACX,MAAK;AAAA,YACL,MAAK;AAAA,YACL,aAAY;AAAA,YACZ,OAAO,UAAU;AAAA,YACjB,UAAU;AAAA,UAAA;AAAA,QAAA,GAEd;AAAA,4BACC,KAAA,EAAI,IAAI,EAAE,IAAI,KACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAS;AAAA,YACT,OAAM;AAAA,YACN,aAAY;AAAA,YACZ,aAAW;AAAA,YACX,MAAK;AAAA,YACL,MAAK;AAAA,YACL,OAAO,UAAU;AAAA,YACjB,UAAU;AAAA,UAAA;AAAA,QAAA,GAEd;AAAA,QACA,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,KAAK,KAC/B,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cAET,+BAAY,KAAA,EAAI;AAAA,cAChB,UAAU,CAAC,UAAU,MAAM,UAAU,CAAC,UAAU,MAAM,KAAA;AAAA,cACvD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS,MAAM;AACb,kCAAkB,KAAK;AACvB,6BAAa,EAAE,OAAO,IAAI,OAAO,IAAI;AAAA,cACvC;AAAA,cACA,SAAQ;AAAA,cACT,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED,EAAA,CACF;AAAA,MAAA,GACF;AAAA,MAID,CAAC,kBACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,MAAM,kBAAkB,IAAI;AAAA,UACrC,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,+BAAY,KAAA,EAAI;AAAA,UAChB,IAAI,EAAE,IAAI,EAAA;AAAA,UACX,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,GAEJ;AAAA,IAGA,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,EAAA,GACxD,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,6BAAU,UAAA,EAAS;AAAA,UACnB,UAAU;AAAA,UACV,SAAS,QAAQ;AAAA,UACjB,OAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGR;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,6BAAU,UAAA,EAAS;AAAA,UACnB,UAAU;AAAA,UACV,SAAS,QAAQ;AAAA,UACjB,OAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGR;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,6BAAU,UAAA,EAAS;AAAA,UACnB,UAAU;AAAA,UACV,SAAS,QAAQ;AAAA,UACjB,OAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGR;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,6BAAU,UAAA,EAAS;AAAA,UACnB,UAAU;AAAA,UACV,SAAS,QAAQ;AAAA,UACjB,OAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACR,EAAA,CACF;AAAA,EAAA,GACF;AAEJ,CAAC;AAED,eAAe,cAAc;"}

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

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),a=,/* empty css                                                      */t=,/* empty css                                              */n=,/* empty css                                          */i=,/* empty css                                                  */u=,/* empty css                                                  */s=,/* empty css                                          */d=;/* empty css                     */;/* empty css                            */var r=,/* empty css                                                    */o=,/* empty css                                                              */c=,/* empty css                                                                    */m=,/* empty css                                                          */x=,/* empty css                                                                  */h=,/* empty css                                        */f=,/* empty css                                                          */p=;/* empty css                                                                              */function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=[1,2,3,4,5,6],v=/* @__PURE__ */b(l).default.memo(({element:b,handlePropertyValueUpdate:v,handleSelectOptionValueUpdate:C,handleColumnSelect:_,handleWidthChange:y})=>{const[q,g]=l.useState(b.options||[]),[k,S]=l.useState({label:"",value:""}),[F,O]=l.useState(!1);l.useEffect(()=>{JSON.stringify(q)!==JSON.stringify(b.options||[])&&g(b.options||[])},[b.options,q]);const w=l.useMemo(()=>"system"===b.type||!b.is_new,[b.type,b.is_new]),W=l.useMemo(()=>{const e=q.find(e=>e.value===b.default_value);return(null==e?void 0:e.label)||"Select Default"},[q,b.default_value]),T=l.useCallback(e=>{v(null,null,null,e.target.value)},[v]),B=l.useCallback(e=>{v(null,null,e.target.value)},[v]),I=l.useCallback(e=>{const l=e.target.checked;v({target:{name:"is_multiselect",checked:l,value:l}}),l&&b.default_value&&v(null,"default_value",null)},[v,b.default_value]),N=l.useCallback(e=>{const{name:l,value:a}=e.target;S(e=>({...e,[l]:a}))},[]),P=l.useCallback(()=>{if(!k.label.trim()||!k.value.trim())return;if(q.some(e=>e.value===k.value||e.label===k.label))return void a.enqueueSnackbar("Option with this value or label already exists.",{variant:"error"});const e=[...q,{...k}];g(e),C(e),S({label:"",value:""}),O(!1)},[k,q,C]),V=l.useCallback(e=>{const l=q.filter((l,a)=>a!==e);g(l),C(l);const a=q[e];b.default_value===(null==a?void 0:a.value)&&v(null,"default_value",null)},[q,C,b.default_value,v]),E=l.useCallback((e,l)=>{y(l)},[y]);/* @__PURE__ */
+return e.jsxs(r.default,{className:"formSection--FieldContainer",children:[
+/* @__PURE__ */e.jsx(r.default,{children:/* @__PURE__ */e.jsx(d.default,{variant:"outlined",onChange:T,defaultValue:b.field_type,label:"Field Type",disabled:w})}),
+/* @__PURE__ */e.jsx(r.default,{children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:"Label",is_required:!0,name:"label",type:"text",onChange:v,defaultValue:b.label})}),
+/* @__PURE__ */e.jsx(r.default,{children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:"Placeholder",is_required:!0,name:"placeholder",type:"text",onChange:v,defaultValue:b.placeholder})}),
+/* @__PURE__ */e.jsx(r.default,{children:/* @__PURE__ */e.jsx(n.Select,{fullWidth:!0,placeholder:"Select Default",size:"small",name:"default_value",onChange:B,value:b.default_value||"",label:"Default",variant:"outlined",disabled:b.is_multiselect,renderValue:()=>W,children:q.map((l,a)=>/* @__PURE__ */e.jsx(o.default,{value:l.value,children:l.label},`${l.value}-${a}`))})}),
+/* @__PURE__ */e.jsx(r.default,{children:/* @__PURE__ */e.jsx(c.default,{fullWidth:!0,children:/* @__PURE__ */e.jsx(n.Select,{fullWidth:!0,placeholder:"Select Column Per Row",size:"small",onChange:_,label:"Select Column Per Row",name:"columnPerRow",variant:"outlined",children:j.map(l=>/* @__PURE__ */e.jsx(o.default,{value:l,children:l},l))})})}),
+/* @__PURE__ */e.jsxs(r.default,{children:[
+/* @__PURE__ */e.jsx(u.Typography,{sx:{color:"black",mb:1},children:"Adjust Width:"}),
+/* @__PURE__ */e.jsx(r.default,{pr:2,children:/* @__PURE__ */e.jsx(m.default,{value:b.custom_width||6,min:1,max:12,step:1,onChange:E,"aria-labelledby":"width-slider",sx:{color:"#4AC08C"},marks:!0,valueLabelDisplay:"auto"})})]}),
+/* @__PURE__ */e.jsxs(r.default,{className:"formSection--SelectOption",children:[
+/* @__PURE__ */e.jsx(u.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",sx:{mb:.5},children:"Options"}),q.map((l,a)=>/* @__PURE__ */e.jsxs(r.default,{sx:{mb:1,display:"flex",gap:1},children:[
+/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,value:`${l.label} (${l.value})`,InputProps:{readOnly:!0}}),
+/* @__PURE__ */e.jsx(x.default,{color:"error",size:"small",onClick:()=>V(a),children:/* @__PURE__ */e.jsx(h.Trash,{})})]},`option-${a}`)),F&&/* @__PURE__ */e.jsxs(r.default,{className:"formSection--SelectOption",sx:{mt:.5,p:2,border:"1px solid #ddd",borderRadius:1},children:[
+/* @__PURE__ */e.jsx(r.default,{sx:{mb:2},children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:"Option Label",is_required:!0,name:"label",type:"text",placeholder:"Enter option label",value:k.label,onChange:N})}),
+/* @__PURE__ */e.jsx(r.default,{sx:{mb:2},children:/* @__PURE__ */e.jsx(i.TextField,{fullWidth:!0,label:"Option Value",placeholder:"Enter option value",is_required:!0,name:"value",type:"text",value:k.value,onChange:N})}),
+/* @__PURE__ */e.jsxs(r.default,{sx:{display:"flex",gap:1},children:[
+/* @__PURE__ */e.jsx(s.Button,{onClick:P,startIcon:/* @__PURE__ */e.jsx(f.default,{}),disabled:!k.label.trim()||!k.value.trim(),children:"Add Option"}),
+/* @__PURE__ */e.jsx(s.Button,{onClick:()=>{O(!1),S({label:"",value:""})},variant:"outlined",children:"Cancel"})]})]}),!F&&/* @__PURE__ */e.jsx(s.Button,{onClick:()=>O(!0),variant:"outlined",className:"formSection--Button",startIcon:/* @__PURE__ */e.jsx(f.default,{}),sx:{mt:1},children:"Add Option"})]}),
+/* @__PURE__ */e.jsxs(r.default,{sx:{display:"flex",flexDirection:"column",gap:1},children:[
+/* @__PURE__ */e.jsx(p.default,{name:"is_multiselect",control:/* @__PURE__ */e.jsx(t.Checkbox,{}),onChange:I,checked:b.is_multiselect,label:"Enable Multi Select"}),
+/* @__PURE__ */e.jsx(p.default,{name:"is_required",control:/* @__PURE__ */e.jsx(t.Checkbox,{}),onChange:v,checked:b.is_required,label:"This field is required"}),
+/* @__PURE__ */e.jsx(p.default,{name:"is_unique",control:/* @__PURE__ */e.jsx(t.Checkbox,{}),onChange:v,checked:b.is_unique,label:"Is Unique"}),
+/* @__PURE__ */e.jsx(p.default,{name:"is_fullwidth",control:/* @__PURE__ */e.jsx(t.Checkbox,{}),onChange:v,checked:b.is_fullwidth,label:"Full Width"})]})]})});v.displayName="SelectEditForm",exports.SelectEditForm=v,exports.default=v;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/views/form-builder/element-edit-forms/select.tsx"],"sourcesContent":["// React imports\r\nimport React, { useEffect, useState, useCallback, useMemo } from \"react\";\r\n\r\n// Material UI imports\r\nimport { \r\n  MenuItem, \r\n  Box, \r\n  FormControlLabel, \r\n  Slider, \r\n  FormControl, \r\n  IconButton\r\n} from \"@mui/material\";\r\nimport { Add } from \"@mui/icons-material\";\r\n\r\n// Third-party imports\r\nimport { enqueueSnackbar } from \"notistack\";\r\n\r\n// ERP Common imports\r\nimport Checkbox from \"@/components/checkbox/checkbox\";\r\nimport Select from \"@/components/select/select\";\r\nimport TextField from \"@/components/text-field/text-field\";\r\nimport Typography from \"@/components/typography/typography\";\r\nimport Button from \"@/components/button/button\";\r\nimport { Trash } from \"@/components/icons\";\r\n\r\n// Local imports\r\nimport FieldSelect from \"./field-select\";\r\nimport \"../custom-form.scss\";\r\n\r\ninterface Option {\r\n  label: string;\r\n  value: string;\r\n  [key: string]: string;\r\n}\r\n\r\ninterface ElementJSON {\r\n  id: string;\r\n  field_type: string;\r\n  label: string;\r\n  placeholder: string;\r\n  default_value: string | null;\r\n  is_multiselect: boolean;\r\n  is_required: boolean;\r\n  is_unique: boolean;\r\n  is_fullwidth: boolean;\r\n  custom_width: number;\r\n  type?: string;\r\n  is_new?: boolean;\r\n  options: Option[];\r\n}\r\n\r\ninterface SelectEditFormProps {\r\n  element: ElementJSON;\r\n  handlePropertyValueUpdate: (\r\n    event: React.ChangeEvent<HTMLInputElement> | null,\r\n    name?: string | null,\r\n    value?: any,\r\n    fieldType?: string\r\n  ) => void;\r\n  handleSelectOptionValueUpdate: (options: Option[]) => void;\r\n  handleColumnSelect: (event: React.ChangeEvent<{ value: unknown }>) => void;\r\n  handleWidthChange: (value: number | number[]) => void;\r\n}\r\n\r\nconst COLUMN_PER_ROW_OPTIONS = [1, 2, 3, 4, 5, 6] as const;\r\n\r\nexport const SelectEditForm: React.FC<SelectEditFormProps> = React.memo(({\r\n  element,\r\n  handlePropertyValueUpdate,\r\n  handleSelectOptionValueUpdate,\r\n  handleColumnSelect,\r\n  handleWidthChange\r\n}) => {\r\n  // Local state management\r\n  const [selectOptions, setSelectOptions] = useState<Option[]>(element.options || []);\r\n  const [newOption, setNewOption] = useState<Option>({ label: \"\", value: \"\" });\r\n  const [isAddingOption, setIsAddingOption] = useState(false);\r\n\r\n  // Sync options with parent element when element changes\r\n  useEffect(() => {\r\n    if (JSON.stringify(selectOptions) !== JSON.stringify(element.options || [])) {\r\n      setSelectOptions(element.options || []);\r\n    }\r\n  }, [element.options, selectOptions]);\r\n\r\n  // Memoized computed values\r\n  const isFieldDisabled = useMemo(() => \r\n    element.type === \"system\" || !element.is_new, \r\n    [element.type, element.is_new]\r\n  );\r\n\r\n  const selectedOptionLabel = useMemo(() => {\r\n    const selectedOption = selectOptions.find(option => option.value === element.default_value);\r\n    return selectedOption?.label || \"Select Default\";\r\n  }, [selectOptions, element.default_value]);\r\n\r\n  // Optimized event handlers with useCallback\r\n  const handleFieldUpdate = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    handlePropertyValueUpdate(null, null, null, e.target.value);\r\n  }, [handlePropertyValueUpdate]);\r\n\r\n  const handleSelectUpdate = useCallback((e: React.ChangeEvent<{ value: unknown }>) => {\r\n    handlePropertyValueUpdate(null, null, e.target.value);\r\n  }, [handlePropertyValueUpdate]);\r\n\r\n  const handleMultiSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const isChecked = e.target.checked;\r\n    // Reset default value when enabling multiselect\r\n    const defaultValue = isChecked ? null : element.default_value;\r\n    \r\n    // Create a synthetic event for the property update\r\n    const syntheticEvent = {\r\n      target: {\r\n        name: 'is_multiselect',\r\n        checked: isChecked,\r\n        value: isChecked\r\n      }\r\n    } as React.ChangeEvent<HTMLInputElement>;\r\n    \r\n    handlePropertyValueUpdate(syntheticEvent);\r\n    \r\n    // If enabling multiselect, also clear the default value\r\n    if (isChecked && element.default_value) {\r\n      handlePropertyValueUpdate(null, 'default_value', null);\r\n    }\r\n  }, [handlePropertyValueUpdate, element.default_value]);\r\n\r\n  const handleNewOptionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const { name, value } = e.target;\r\n    setNewOption(prev => ({ ...prev, [name]: value }));\r\n  }, []);\r\n\r\n  const handleAddOption = useCallback(() => {\r\n    if (!newOption.label.trim() || !newOption.value.trim()) {\r\n      return; // Don't add empty options\r\n    }\r\n\r\n    // Check for duplicate values\r\n    const isDuplicate = selectOptions.some(option => \r\n      option.value === newOption.value || option.label === newOption.label\r\n    );\r\n    \r\n    if (isDuplicate) {\r\n      // Could show an error message here\r\n      enqueueSnackbar(\"Option with this value or label already exists.\", { variant: \"error\" });\r\n      return;\r\n    }\r\n\r\n    const updatedOptions = [...selectOptions, { ...newOption }];\r\n    setSelectOptions(updatedOptions);\r\n    handleSelectOptionValueUpdate(updatedOptions);\r\n    \r\n    // Reset form\r\n    setNewOption({ label: \"\", value: \"\" });\r\n    setIsAddingOption(false);\r\n  }, [newOption, selectOptions, handleSelectOptionValueUpdate]);\r\n\r\n  const handleRemoveOption = useCallback((indexToRemove: number) => {\r\n    const updatedOptions = selectOptions.filter((_, index) => index !== indexToRemove);\r\n    setSelectOptions(updatedOptions);\r\n    handleSelectOptionValueUpdate(updatedOptions);\r\n    \r\n    // Clear default value if the removed option was selected\r\n    const removedOption = selectOptions[indexToRemove];\r\n    if (element.default_value === removedOption?.value) {\r\n      handlePropertyValueUpdate(null, 'default_value', null);\r\n    }\r\n  }, [selectOptions, handleSelectOptionValueUpdate, element.default_value, handlePropertyValueUpdate]);\r\n\r\n  const handleWidthChangeCallback = useCallback((\r\n    _: Event, \r\n    newValue: number | number[]\r\n  ) => {\r\n    handleWidthChange(newValue);\r\n  }, [handleWidthChange]);\r\n\r\n  return (\r\n    <Box className=\"formSection--FieldContainer\">\r\n      {/* Field Type Selection */}\r\n      <Box>\r\n        <FieldSelect\r\n          variant=\"outlined\"\r\n          onChange={handleFieldUpdate}\r\n          defaultValue={element.field_type}\r\n          label=\"Field Type\"\r\n          disabled={isFieldDisabled}\r\n        />\r\n      </Box>\r\n\r\n      {/* Label Field */}\r\n      <Box>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Label\"\r\n          is_required\r\n          name=\"label\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={element.label}\r\n        />\r\n      </Box>\r\n\r\n      {/* Placeholder Field */}\r\n      <Box>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Placeholder\"\r\n          is_required\r\n          name=\"placeholder\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={element.placeholder}\r\n        />\r\n      </Box>\r\n\r\n      {/* Default Value Selection */}\r\n      <Box>\r\n        <Select\r\n          fullWidth\r\n          placeholder=\"Select Default\"\r\n          size=\"small\"\r\n          name=\"default_value\"\r\n          onChange={handleSelectUpdate}\r\n          value={element.default_value || \"\"}\r\n          label=\"Default\"\r\n          variant=\"outlined\"\r\n          disabled={element.is_multiselect}\r\n          renderValue={() => selectedOptionLabel}\r\n        >\r\n          {selectOptions.map((option, index) => (\r\n            <MenuItem key={`${option.value}-${index}`} value={option.value}>\r\n              {option.label}\r\n            </MenuItem>\r\n          ))}\r\n        </Select>\r\n      </Box>\r\n\r\n      {/* Column Per Row Selection */}\r\n      <Box>\r\n        <FormControl fullWidth>\r\n          <Select\r\n            fullWidth\r\n            placeholder=\"Select Column Per Row\"\r\n            size=\"small\"\r\n            onChange={handleColumnSelect}\r\n            label=\"Select Column Per Row\"\r\n            name=\"columnPerRow\"\r\n            variant=\"outlined\"\r\n          >\r\n            {COLUMN_PER_ROW_OPTIONS.map((option) => (\r\n              <MenuItem key={option} value={option}>\r\n                {option}\r\n              </MenuItem>\r\n            ))}\r\n          </Select>\r\n        </FormControl>\r\n      </Box>\r\n\r\n      {/* Width Slider */}\r\n      <Box>\r\n        <Typography sx={{ color: 'black', mb: 1 }}>\r\n          Adjust Width:\r\n        </Typography>\r\n        <Box pr={2}>\r\n          <Slider\r\n            value={element.custom_width || 6}\r\n            min={1}\r\n            max={12}\r\n            step={1}\r\n            onChange={handleWidthChangeCallback}\r\n            aria-labelledby=\"width-slider\"\r\n            sx={{ color: \"#4AC08C\" }}\r\n            marks\r\n            valueLabelDisplay=\"auto\"\r\n          />\r\n        </Box>\r\n      </Box>\r\n\r\n      {/* Options Management */}\r\n      <Box className=\"formSection--SelectOption\">\r\n        <Typography \r\n          type=\"s5\" \r\n          weight=\"medium\" \r\n          color=\"theme.secondary.800\"\r\n          sx={{ mb: 0.5 }}\r\n        >\r\n          Options\r\n        </Typography>\r\n        \r\n        {/* Existing Options */}\r\n        {selectOptions.map((option, index) => (\r\n          <Box key={`option-${index}`} sx={{ mb: 1, display: 'flex', gap: 1 }}>\r\n            <TextField\r\n              fullWidth\r\n              value={`${option.label} (${option.value})`}\r\n              InputProps={{ readOnly: true }}\r\n            />\r\n            <IconButton\r\n              color=\"error\"\r\n              size=\"small\"\r\n              onClick={() => handleRemoveOption(index)}\r\n            >\r\n              <Trash />\r\n            </IconButton>\r\n          </Box>\r\n        ))}\r\n\r\n        {/* Add New Option Form */}\r\n        {isAddingOption && (\r\n          <Box className=\"formSection--SelectOption\" sx={{ mt:0.5, p: 2, border: '1px solid #ddd', borderRadius: 1 }}>\r\n            <Box sx={{ mb: 2 }}>\r\n              <TextField\r\n                fullWidth\r\n                label=\"Option Label\"\r\n                is_required\r\n                name=\"label\"\r\n                type=\"text\"\r\n                placeholder=\"Enter option label\"\r\n                value={newOption.label}\r\n                onChange={handleNewOptionChange}\r\n              />\r\n            </Box>\r\n            <Box sx={{ mb: 2 }}>\r\n              <TextField\r\n                fullWidth\r\n                label=\"Option Value\"\r\n                placeholder=\"Enter option value\"\r\n                is_required\r\n                name=\"value\"\r\n                type=\"text\"\r\n                value={newOption.value}\r\n                onChange={handleNewOptionChange}\r\n              />\r\n            </Box>\r\n            <Box sx={{ display: 'flex', gap: 1 }}>\r\n              <Button\r\n                onClick={handleAddOption}\r\n                // className=\"formSection--Button\"\r\n                startIcon={<Add />}\r\n                disabled={!newOption.label.trim() || !newOption.value.trim()}\r\n              >\r\n                Add Option\r\n              </Button>\r\n              <Button\r\n                onClick={() => {\r\n                  setIsAddingOption(false);\r\n                  setNewOption({ label: \"\", value: \"\" });\r\n                }}\r\n                variant=\"outlined\"\r\n              >\r\n                Cancel\r\n              </Button>\r\n            </Box>\r\n          </Box>\r\n        )}\r\n\r\n        {/* Add Option Button */}\r\n        {!isAddingOption && (\r\n          <Button\r\n            onClick={() => setIsAddingOption(true)}\r\n            variant=\"outlined\"\r\n            className=\"formSection--Button\"\r\n            startIcon={<Add />}\r\n            sx={{ mt: 1 }}\r\n          >\r\n            Add Option\r\n          </Button>\r\n        )}\r\n      </Box>\r\n\r\n      {/* Form Controls */}\r\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\r\n        <FormControlLabel\r\n          name=\"is_multiselect\"\r\n          control={<Checkbox />}\r\n          onChange={handleMultiSelect}\r\n          checked={element.is_multiselect}\r\n          label=\"Enable Multi Select\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_required\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_required}\r\n          label=\"This field is required\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_unique\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_unique}\r\n          label=\"Is Unique\"\r\n        />\r\n\r\n        <FormControlLabel\r\n          name=\"is_fullwidth\"\r\n          control={<Checkbox />}\r\n          onChange={handlePropertyValueUpdate}\r\n          checked={element.is_fullwidth}\r\n          label=\"Full Width\"\r\n        />\r\n      </Box>\r\n    </Box>\r\n  );\r\n});\r\n\r\nSelectEditForm.displayName = 'SelectEditForm';\r\n\r\nexport default SelectEditForm;"],"names":["COLUMN_PER_ROW_OPTIONS","SelectEditForm","React","memo","element","handlePropertyValueUpdate","handleSelectOptionValueUpdate","handleColumnSelect","handleWidthChange","selectOptions","setSelectOptions","useState","options","newOption","setNewOption","label","value","isAddingOption","setIsAddingOption","useEffect","JSON","stringify","isFieldDisabled","useMemo","type","is_new","selectedOptionLabel","selectedOption","find","option","default_value","handleFieldUpdate","useCallback","e","target","handleSelectUpdate","handleMultiSelect","isChecked","checked","name","handleNewOptionChange","prev","handleAddOption","trim","some","enqueueSnackbar","variant","updatedOptions","handleRemoveOption","indexToRemove","filter","_","index","removedOption","handleWidthChangeCallback","newValue","jsxs","Box","className","children","jsx","FieldSelect","onChange","defaultValue","field_type","disabled","TextField","fullWidth","is_required","placeholder","Select","size","is_multiselect","renderValue","map","MenuItem","FormControl","Typography","sx","color","mb","pr","Slider","custom_width","min","max","step","marks","valueLabelDisplay","weight","display","gap","InputProps","readOnly","IconButton","onClick","Trash","mt","p","border","borderRadius","Button","startIcon","Add","flexDirection","FormControlLabel","control","Checkbox","is_unique","is_fullwidth","displayName"],"mappings":"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"}

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

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Select } from "../../../../components/select/select/index.esm.js";
+import { TextField } from "../../../../components/text-field/text-field/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 MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
+const TableEditForm = ({
+  handlePropertyValueUpdate,
+  element,
+  handleColumnsUpdate,
+  fields
+}) => {
+  const [elementJSON, setElementJSON] = useState(element);
+  const [tables, setTables] = useState([]);
+  const handleFieldUpdate = (event) => {
+    if (elementJSON) {
+      elementJSON.field_type = event.target.value;
+      handlePropertyValueUpdate(null, null, null, event.target.value);
+    }
+  };
+  const handleTableSelect = (event) => {
+    handlePropertyValueUpdate(event);
+  };
+  useEffect(() => {
+    setElementJSON(element);
+  }, [element]);
+  useEffect(() => {
+    if (elementJSON && elementJSON.table && fields) {
+      const fieldsArr = fields[elementJSON.table];
+      let columns = [];
+      if (fieldsArr && (fieldsArr == null ? void 0 : fieldsArr.length)) {
+        columns = fieldsArr.map((field, index) => ({
+          header: formatText(field.field),
+          accessorKey: field.field,
+          visible: index > 3 ? false : true,
+          type: field.type
+        }));
+      } else {
+        columns = [
+          { header: "Column 1", accessorKey: "column_1", visible: true },
+          { header: "Column 2", accessorKey: "column_1", visible: true }
+        ];
+      }
+      columns && handleColumnsUpdate(columns);
+    }
+  }, [elementJSON == null ? void 0 : elementJSON.table]);
+  useEffect(() => {
+    if (fields) {
+      const options = Object.keys(fields).map((key) => ({
+        label: formatText(key),
+        value: key
+      }));
+      setTables(options);
+    }
+  }, [fields]);
+  if (!elementJSON) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Box, { className: "formSection--FieldContainer", children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      FieldSelect,
+      {
+        variant: "outlined",
+        onChange: handleFieldUpdate,
+        defaultValue: elementJSON.field_type,
+        disabled: elementJSON.type === "system" || !elementJSON.is_new
+      },
+      elementJSON.id
+    ) }, elementJSON.id),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        label: "Label",
+        is_required: true,
+        name: "label",
+        type: "text",
+        onChange: handlePropertyValueUpdate,
+        defaultValue: elementJSON.label
+      },
+      elementJSON.id
+    ) }, elementJSON.id),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        variant: "outlined",
+        label: "Table",
+        fullWidth: true,
+        placeholder: "Select Table",
+        size: "small",
+        name: "table",
+        defaultValue: elementJSON.table,
+        disabled: elementJSON.type === "system",
+        onChange: handleTableSelect,
+        renderValue: (value) => {
+          var _a;
+          return (_a = tables.find((option) => option.value === value)) == null ? void 0 : _a.label;
+        },
+        children: tables == null ? void 0 : tables.map((item) => /* @__PURE__ */ jsx(MenuItem, { value: item.value, children: item.label }))
+      },
+      elementJSON.id
+    ) }, elementJSON.id)
+  ] }, elementJSON.id);
+};
+export {
+  TableEditForm as default
+};
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/form-builder/element-edit-forms/table-form.tsx"],"sourcesContent":["// React imports\r\nimport React, { useEffect, useState } from 'react';\r\n\r\n// Material UI imports\r\nimport { MenuItem, Box, SelectChangeEvent } from '@mui/material';\r\n\r\n// Third-party imports\r\nimport { MRT_ColumnDef, MRT_RowData } from 'material-react-table';\r\n\r\n// ERP Common imports\r\nimport Select from '@/components/select/select';\r\nimport TextField from '@/components/text-field/text-field';\r\nimport formatText from '@/utils/format-text';\r\n\r\n// Local imports\r\nimport { IElementJson } from '../custom-form';\r\nimport { ApiFormFields } from '../../Redux/state';\r\nimport FieldSelect from './field-select';\r\nimport '../custom-form.scss';\r\n\r\ninterface ITableEditForm {\r\n\thandlePropertyValueUpdate: (\r\n\t\tevent?: any,\r\n\t\tnumberValue?: any,\r\n\t\tval?: any,\r\n\t\tfieldType?: any\r\n\t) => void;\r\n\thandleColumnsUpdate: (columns: MRT_ColumnDef<MRT_RowData>[]) => void;\r\n\telement: IElementJson | null;\r\n\tfields: ApiFormFields | null;\r\n}\r\n\r\ninterface TableOption {\r\n\tlabel: string;\r\n\tvalue: string;\r\n}\r\n\r\nconst TableEditForm: React.FC<ITableEditForm> = ({\r\n\thandlePropertyValueUpdate,\r\n\telement,\r\n\thandleColumnsUpdate,\r\n\tfields\r\n}) => {\r\n\t/* Local States */\r\n\tconst [elementJSON, setElementJSON] = useState<IElementJson | null>(element);\r\n\tconst [tables, setTables] = useState<TableOption[]>([]);\r\n\r\n\t/* Local Functions */\r\n\tconst handleFieldUpdate = (event: SelectChangeEvent<unknown>) => {\r\n\t\tif (elementJSON) {\r\n\t\t\telementJSON.field_type = event.target.value as string;\r\n\t\t\thandlePropertyValueUpdate(null, null, null, event.target.value as string);\r\n\t\t}\r\n\t};\r\n\tconst handleTableSelect = (event: SelectChangeEvent<unknown>) => {\r\n\t\thandlePropertyValueUpdate(event);\r\n\t};\r\n\r\n\t/* Use Effects */\r\n\tuseEffect(() => {\r\n\t\tsetElementJSON(element);\r\n\t}, [element]);\r\n\tuseEffect(() => {\r\n\t\tif (elementJSON && elementJSON.table && fields) {\r\n\t\t\tconst fieldsArr = fields[elementJSON.table];\r\n\t\t\tlet columns: any[] = [];\r\n\t\t\tif (fieldsArr && fieldsArr?.length) {\r\n\t\t\t\tcolumns = fieldsArr.map((field, index) => ({\r\n\t\t\t\t\theader: formatText(field.field),\r\n\t\t\t\t\taccessorKey: field.field,\r\n\t\t\t\t\tvisible: index > 3 ? false : true,\r\n\t\t\t\t\ttype: field.type\r\n\t\t\t\t}));\r\n\t\t\t} else {\r\n\t\t\t\tcolumns = [\r\n\t\t\t\t\t{ header: 'Column 1', accessorKey: 'column_1', visible: true },\r\n\t\t\t\t\t{ header: 'Column 2', accessorKey: 'column_1', visible: true }\r\n\t\t\t\t];\r\n\t\t\t}\r\n\t\t\tcolumns && handleColumnsUpdate(columns);\r\n\t\t}\r\n\t}, [elementJSON?.table]);\r\n\tuseEffect(() => {\r\n\t\tif (fields) {\r\n\t\t\tconst options = Object.keys(fields).map((key) => ({\r\n\t\t\t\tlabel: formatText(key),\r\n\t\t\t\tvalue: key\r\n\t\t\t}));\r\n\t\t\tsetTables(options);\r\n\t\t}\r\n\t}, [fields]);\r\n\r\n\tif (!elementJSON) {\r\n\t\treturn null;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Box className='formSection--FieldContainer' key={elementJSON.id}>\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<FieldSelect\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tvariant='outlined'\r\n\t\t\t\t\tonChange={handleFieldUpdate}\r\n\t\t\t\t\tdefaultValue={elementJSON.field_type}\r\n\t\t\t\t\tdisabled={elementJSON.type === 'system' || !elementJSON.is_new}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<TextField\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tlabel='Label'\r\n\t\t\t\t\tis_required\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tname='label'\r\n\t\t\t\t\ttype='text'\r\n\t\t\t\t\tonChange={handlePropertyValueUpdate}\r\n\t\t\t\t\tdefaultValue={elementJSON.label}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<Select\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tvariant='outlined'\r\n\t\t\t\t\tlabel='Table'\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tplaceholder='Select Table'\r\n\t\t\t\t\tsize='small'\r\n\t\t\t\t\tname='table'\r\n\t\t\t\t\tdefaultValue={elementJSON.table}\r\n\t\t\t\t\tdisabled={elementJSON.type === 'system'}\r\n\t\t\t\t\tonChange={handleTableSelect}\r\n\t\t\t\t\trenderValue={(value: string) =>\r\n\t\t\t\t\t\ttables.find((option) => option.value === value)?.label\r\n\t\t\t\t\t}>\r\n\t\t\t\t\t{tables?.map((item) => (\r\n\t\t\t\t\t\t<MenuItem value={item.value}>{item.label}</MenuItem>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</Select>\r\n\t\t\t</div>\r\n\t\t</Box>\r\n\t);\r\n};\r\n\r\nexport default TableEditForm;\r\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=,/* empty css                                          */a=,/* empty css                                                  */i=,/* empty css                                   */d=;/* empty css                     */;/* empty css                            */var s=,/* empty css                                                    */r=;/* empty css                                                              */exports.default=({handlePropertyValueUpdate:u,element:n,handleColumnsUpdate:o,fields:c})=>{const[f,m]=l.useState(n),[x,b]=l.useState([]);return l.useEffect(()=>{m(n)},[n]),l.useEffect(()=>{if(f&&f.table&&c){const e=c[f.table];let l=[];l=e&&(null==e?void 0:e.length)?e.map((e,l)=>({header:i.formatText(e.field),accessorKey:e.field,visible:!(l>3),type:e.type})):[{header:"Column 1",accessorKey:"column_1",visible:!0},{header:"Column 2",accessorKey:"column_1",visible:!0}],l&&o(l)}},[null==f?void 0:f.table]),l.useEffect(()=>{if(c){const e=Object.keys(c).map(e=>({label:i.formatText(e),value:e}));b(e)}},[c]),f?/* @__PURE__ */e.jsxs(s.default,{className:"formSection--FieldContainer",children:[
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(d.default,{variant:"outlined",onChange:e=>{f&&(f.field_type=e.target.value,u(null,null,null,e.target.value))},defaultValue:f.field_type,disabled:"system"===f.type||!f.is_new},f.id)},f.id),
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(a.TextField,{fullWidth:!0,label:"Label",is_required:!0,name:"label",type:"text",onChange:u,defaultValue:f.label},f.id)},f.id),
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(t.Select,{variant:"outlined",label:"Table",fullWidth:!0,placeholder:"Select Table",size:"small",name:"table",defaultValue:f.table,disabled:"system"===f.type,onChange:e=>{u(e)},renderValue:e=>{var l;return null==(l=x.find(l=>l.value===e))?void 0:l.label},children:null==x?void 0:x.map(l=>/* @__PURE__ */e.jsx(r.default,{value:l.value,children:l.label}))},f.id)},f.id)]},f.id):null};
+//# sourceMappingURL=index.js.map

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\r\nimport React, { useEffect, useState } from 'react';\r\n\r\n// Material UI imports\r\nimport { MenuItem, Box, SelectChangeEvent } from '@mui/material';\r\n\r\n// Third-party imports\r\nimport { MRT_ColumnDef, MRT_RowData } from 'material-react-table';\r\n\r\n// ERP Common imports\r\nimport Select from '@/components/select/select';\r\nimport TextField from '@/components/text-field/text-field';\r\nimport formatText from '@/utils/format-text';\r\n\r\n// Local imports\r\nimport { IElementJson } from '../custom-form';\r\nimport { ApiFormFields } from '../../Redux/state';\r\nimport FieldSelect from './field-select';\r\nimport '../custom-form.scss';\r\n\r\ninterface ITableEditForm {\r\n\thandlePropertyValueUpdate: (\r\n\t\tevent?: any,\r\n\t\tnumberValue?: any,\r\n\t\tval?: any,\r\n\t\tfieldType?: any\r\n\t) => void;\r\n\thandleColumnsUpdate: (columns: MRT_ColumnDef<MRT_RowData>[]) => void;\r\n\telement: IElementJson | null;\r\n\tfields: ApiFormFields | null;\r\n}\r\n\r\ninterface TableOption {\r\n\tlabel: string;\r\n\tvalue: string;\r\n}\r\n\r\nconst TableEditForm: React.FC<ITableEditForm> = ({\r\n\thandlePropertyValueUpdate,\r\n\telement,\r\n\thandleColumnsUpdate,\r\n\tfields\r\n}) => {\r\n\t/* Local States */\r\n\tconst [elementJSON, setElementJSON] = useState<IElementJson | null>(element);\r\n\tconst [tables, setTables] = useState<TableOption[]>([]);\r\n\r\n\t/* Local Functions */\r\n\tconst handleFieldUpdate = (event: SelectChangeEvent<unknown>) => {\r\n\t\tif (elementJSON) {\r\n\t\t\telementJSON.field_type = event.target.value as string;\r\n\t\t\thandlePropertyValueUpdate(null, null, null, event.target.value as string);\r\n\t\t}\r\n\t};\r\n\tconst handleTableSelect = (event: SelectChangeEvent<unknown>) => {\r\n\t\thandlePropertyValueUpdate(event);\r\n\t};\r\n\r\n\t/* Use Effects */\r\n\tuseEffect(() => {\r\n\t\tsetElementJSON(element);\r\n\t}, [element]);\r\n\tuseEffect(() => {\r\n\t\tif (elementJSON && elementJSON.table && fields) {\r\n\t\t\tconst fieldsArr = fields[elementJSON.table];\r\n\t\t\tlet columns: any[] = [];\r\n\t\t\tif (fieldsArr && fieldsArr?.length) {\r\n\t\t\t\tcolumns = fieldsArr.map((field, index) => ({\r\n\t\t\t\t\theader: formatText(field.field),\r\n\t\t\t\t\taccessorKey: field.field,\r\n\t\t\t\t\tvisible: index > 3 ? false : true,\r\n\t\t\t\t\ttype: field.type\r\n\t\t\t\t}));\r\n\t\t\t} else {\r\n\t\t\t\tcolumns = [\r\n\t\t\t\t\t{ header: 'Column 1', accessorKey: 'column_1', visible: true },\r\n\t\t\t\t\t{ header: 'Column 2', accessorKey: 'column_1', visible: true }\r\n\t\t\t\t];\r\n\t\t\t}\r\n\t\t\tcolumns && handleColumnsUpdate(columns);\r\n\t\t}\r\n\t}, [elementJSON?.table]);\r\n\tuseEffect(() => {\r\n\t\tif (fields) {\r\n\t\t\tconst options = Object.keys(fields).map((key) => ({\r\n\t\t\t\tlabel: formatText(key),\r\n\t\t\t\tvalue: key\r\n\t\t\t}));\r\n\t\t\tsetTables(options);\r\n\t\t}\r\n\t}, [fields]);\r\n\r\n\tif (!elementJSON) {\r\n\t\treturn null;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<Box className='formSection--FieldContainer' key={elementJSON.id}>\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<FieldSelect\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tvariant='outlined'\r\n\t\t\t\t\tonChange={handleFieldUpdate}\r\n\t\t\t\t\tdefaultValue={elementJSON.field_type}\r\n\t\t\t\t\tdisabled={elementJSON.type === 'system' || !elementJSON.is_new}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<TextField\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tlabel='Label'\r\n\t\t\t\t\tis_required\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tname='label'\r\n\t\t\t\t\ttype='text'\r\n\t\t\t\t\tonChange={handlePropertyValueUpdate}\r\n\t\t\t\t\tdefaultValue={elementJSON.label}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div key={elementJSON.id}>\r\n\t\t\t\t<Select\r\n\t\t\t\t\tkey={elementJSON.id}\r\n\t\t\t\t\tvariant='outlined'\r\n\t\t\t\t\tlabel='Table'\r\n\t\t\t\t\tfullWidth\r\n\t\t\t\t\tplaceholder='Select Table'\r\n\t\t\t\t\tsize='small'\r\n\t\t\t\t\tname='table'\r\n\t\t\t\t\tdefaultValue={elementJSON.table}\r\n\t\t\t\t\tdisabled={elementJSON.type === 'system'}\r\n\t\t\t\t\tonChange={handleTableSelect}\r\n\t\t\t\t\trenderValue={(value: string) =>\r\n\t\t\t\t\t\ttables.find((option) => option.value === value)?.label\r\n\t\t\t\t\t}>\r\n\t\t\t\t\t{tables?.map((item) => (\r\n\t\t\t\t\t\t<MenuItem value={item.value}>{item.label}</MenuItem>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</Select>\r\n\t\t\t</div>\r\n\t\t</Box>\r\n\t);\r\n};\r\n\r\nexport default TableEditForm;\r\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,WAAWH,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,WAAWO,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,UAAA,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,OAAA,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"}