@erpsquad/common 1.8.46 → 1.8.48

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

@@ -0,0 +1,327 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import default_1 from "../../../../node_modules/@mui/icons-material/Close/index.esm.js";
+import { Checkbox } from "../../../../components/checkbox/checkbox/index.esm.js";
+import { Radio } from "../../../../components/radio/radio/index.esm.js";
+import { TextField } from "../../../../components/text-field/text-field/index.esm.js";
+import { Typography } from "../../../../components/typography/typography/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 Select from "../../../../node_modules/@mui/material/Select/Select/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 Button from "../../../../node_modules/@mui/material/Button/Button/index.esm.js";
+import Add from "../../../../node_modules/@mui/icons-material/esm/Add/index.esm.js";
+import RadioGroup from "../../../../node_modules/@mui/material/RadioGroup/RadioGroup/index.esm.js";
+import FormControlLabel from "../../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.esm.js";
+function CheckboxEditForm(props) {
+  const [isAddSelectOption, setAddSelectOption] = useState(false);
+  const { handlePropertyValueUpdate, handleSelectOptionValueUpdate, handleColumnSelect, handleWidthChange } = props;
+  const columnPerRowOptions = [1, 2, 3, 4, 5, 6];
+  const [selectOptions, setSelectOptions] = useState(
+    props.element.options || []
+  );
+  const [elementJSON, setElementJSON] = useState(props.element);
+  const allowLabelPositionModification = elementJSON.field_type !== "radioButton";
+  const [newOptions, setNewOptions] = useState({
+    label: "",
+    value: "",
+    is_checked: false
+  });
+  const handleAddNewOption = (e) => {
+    const label = e.target.name;
+    const value = e.target.value;
+    const option = { ...newOptions };
+    option[label] = value;
+    setNewOptions(option);
+  };
+  const handleFieldUpdate = (e) => {
+    elementJSON.field_type = e.target.value;
+    handlePropertyValueUpdate(null, null, null, e.target.value);
+  };
+  const handleSelectUpdate = (e) => {
+    elementJSON.default_value = e.target.value;
+    handlePropertyValueUpdate(null, null, e.target.value);
+  };
+  useEffect(() => {
+    setElementJSON(props.element);
+    setSelectOptions(props.element.options || []);
+  }, [props.element]);
+  useEffect(() => {
+    setNewOptions({ label: "", value: "", is_checked: false });
+    setAddSelectOption(false);
+    handleSelectOptionValueUpdate(selectOptions);
+  }, [selectOptions]);
+  return /* @__PURE__ */ jsxs(Box, { className: "formSection--FieldContainer", children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      FieldSelect,
+      {
+        variant: "outlined",
+        onChange: handleFieldUpdate,
+        defaultValue: elementJSON.field_type,
+        label: "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",
+        fullWidth: true,
+        placeholder: "Select Default",
+        size: "small",
+        name: "options",
+        onChange: () => handleSelectUpdate,
+        defaultValue: elementJSON.default_value,
+        label: "Default",
+        disabled: !selectOptions.length,
+        children: selectOptions == null ? void 0 : selectOptions.map((option, index) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, children: option.label }, index))
+      },
+      elementJSON.id
+    ) }, elementJSON.id),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        fullWidth: true,
+        placeholder: "Select Column Per Row",
+        size: "small",
+        onChange: handleColumnSelect,
+        label: "Select Column Per Row",
+        name: "option",
+        variant: "outlined",
+        children: columnPerRowOptions == null ? void 0 : columnPerRowOptions.map((option, index) => /* @__PURE__ */ jsx(MenuItem, { value: option, children: option }, index))
+      },
+      elementJSON.id
+    ) }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { color: "black" }, children: "Adjust Width:" }),
+      /* @__PURE__ */ jsx(
+        Slider,
+        {
+          value: elementJSON == null ? void 0 : elementJSON.custom_width,
+          name: "custom_width",
+          min: 1,
+          max: 12,
+          step: 1,
+          onChange: (_, newValue) => handleWidthChange(newValue),
+          "aria-labelledby": "width-slider",
+          sx: { color: "#4AC08C" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "formSection--SelectOption", children: [
+      /* @__PURE__ */ jsx(Typography, { type: "s5", weight: "medium", color: "theme.secondary.800", children: "Options" }),
+      selectOptions.map((option, index) => /* @__PURE__ */ jsxs("div", { className: "formSection--MultiOptions", children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            value: `${option.label} (${option.value})`,
+            InputProps: {
+              readOnly: true
+            }
+          },
+          index
+        ),
+        /* @__PURE__ */ jsx(
+          default_1,
+          {
+            style: { fontSize: "1rem", color: "#656669" },
+            onClick: () => {
+              setSelectOptions([
+                ...selectOptions.filter(
+                  (_, filterIndex) => filterIndex !== index
+                )
+              ]);
+            }
+          }
+        )
+      ] }))
+    ] }),
+    isAddSelectOption ? /* @__PURE__ */ jsxs("div", { className: "formSection--SelectOption", children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          label: "Label",
+          is_required: true,
+          name: "label",
+          type: "text",
+          placeholder: "Label",
+          defaultValue: newOptions.label,
+          onChange: handleAddNewOption
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          label: "Value",
+          placeholder: "Value",
+          is_required: true,
+          name: "value",
+          type: "text",
+          defaultValue: newOptions.value,
+          onChange: handleAddNewOption
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setSelectOptions([...selectOptions, { ...newOptions }]),
+          disabled: !!selectOptions.find(
+            (ele) => ele.value === newOptions.value
+          ),
+          variant: "text",
+          className: "formSection--Button",
+          startIcon: /* @__PURE__ */ jsx(Add, {}),
+          children: "Add"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => setAddSelectOption(true),
+        variant: "text",
+        className: "formSection--Button",
+        startIcon: /* @__PURE__ */ jsx(Add, {}),
+        children: "Add Option"
+      }
+    ),
+    /* @__PURE__ */ jsxs(FormControl, { children: [
+      /* @__PURE__ */ jsx(Typography, { type: "s4", color: "theme.secondary.800", children: "Display style" }),
+      /* @__PURE__ */ jsxs(
+        RadioGroup,
+        {
+          row: true,
+          "aria-labelledby": "demo-radio-buttons-group-label",
+          name: "display",
+          onChange: handlePropertyValueUpdate,
+          defaultValue: elementJSON.display,
+          children: [
+            /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                value: "row",
+                control: /* @__PURE__ */ jsx(Radio, { size: "small" }),
+                label: "Row",
+                slotProps: { typography: { variant: "body2" } }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                value: "column",
+                control: /* @__PURE__ */ jsx(Radio, { size: "small" }),
+                label: "Column",
+                slotProps: { typography: { variant: "body2" } }
+              }
+            )
+          ]
+        },
+        elementJSON.id
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        label: "Title",
+        is_required: true,
+        name: "title",
+        type: "text",
+        onChange: handlePropertyValueUpdate,
+        defaultValue: elementJSON.title
+      },
+      elementJSON.id
+    ) }, elementJSON.id),
+    /* @__PURE__ */ jsxs(FormControl, { disabled: !allowLabelPositionModification, children: [
+      /* @__PURE__ */ jsx(Typography, { type: "s4", color: "theme.secondary.800", children: "Title Position" }),
+      /* @__PURE__ */ jsxs(
+        RadioGroup,
+        {
+          row: true,
+          "aria-labelledby": "demo-radio-buttons-group-label",
+          name: "title_position",
+          onChange: handlePropertyValueUpdate,
+          defaultValue: allowLabelPositionModification ? "end" : "",
+          children: [
+            /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                value: "start",
+                control: /* @__PURE__ */ jsx(Radio, { size: "small" }),
+                label: "Start",
+                slotProps: { typography: { variant: "body2" } }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                value: "end",
+                control: /* @__PURE__ */ jsx(Radio, { size: "small" }),
+                label: "End",
+                slotProps: { typography: { variant: "body2" } }
+              }
+            )
+          ]
+        },
+        elementJSON.id
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        name: "is_required",
+        control: /* @__PURE__ */ jsx(Checkbox, {}),
+        onChange: handlePropertyValueUpdate,
+        checked: elementJSON.is_required,
+        label: "This field is required"
+      },
+      elementJSON.id
+    ),
+    /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        name: "is_unique",
+        control: /* @__PURE__ */ jsx(Checkbox, {}),
+        onChange: handlePropertyValueUpdate,
+        checked: elementJSON.is_unique,
+        label: "Is Unique"
+      },
+      elementJSON.id
+    ),
+    /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        name: "is_fullwidth",
+        control: /* @__PURE__ */ jsx(Checkbox, {}),
+        onChange: handlePropertyValueUpdate,
+        checked: elementJSON == null ? void 0 : elementJSON.is_fullwidth,
+        label: "Full Width "
+      },
+      elementJSON.id
+    )
+  ] }, elementJSON.id);
+}
+export {
+  CheckboxEditForm,
+  CheckboxEditForm as default
+};
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/form-builder/element-edit-forms/checkbox.tsx"],"sourcesContent":["// React imports\r\nimport { useEffect, useState } from \"react\";\r\n\r\n// Material UI imports\r\nimport {\r\n  MenuItem,\r\n  Box,\r\n  FormControlLabel,\r\n  FormControl,\r\n  RadioGroup,\r\n  Button,\r\n  Select,\r\n  InputLabel,\r\n  Slider,\r\n} from \"@mui/material\";\r\nimport { Add } from \"@mui/icons-material\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\n\r\n// ERP Common imports\r\nimport Checkbox from \"@/components/checkbox/checkbox\";\r\nimport Radio from \"@/components/radio/radio\";\r\nimport TextField from \"@/components/text-field/text-field\";\r\nimport Typography from \"@/components/typography/typography\";\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  is_checked: boolean;\r\n  [key: string]: string | boolean; // Index signature to allow any string property\r\n}\r\n\r\nexport function CheckboxEditForm(props: any) {\r\n  const [isAddSelectOption, setAddSelectOption] = useState(false);\r\n  const { handlePropertyValueUpdate, handleSelectOptionValueUpdate , handleColumnSelect ,  handleWidthChange  } = props;\r\n  const columnPerRowOptions = [1, 2, 3, 4, 5, 6];\r\n  const [selectOptions, setSelectOptions] = useState(\r\n    props.element.options || [],\r\n  );\r\n  const [elementJSON, setElementJSON] = useState(props.element);\r\n\r\n  const allowLabelPositionModification =\r\n    elementJSON.field_type !== \"radioButton\";\r\n\r\n  const [newOptions, setNewOptions] = useState<Option>({\r\n    label: \"\",\r\n    value: \"\",\r\n    is_checked: false,\r\n  });\r\n\r\n\r\n\r\n  const handleAddNewOption = (e: any) => {\r\n    const label: string = e.target.name;\r\n    const value: string = e.target.value;\r\n    const option: Option = { ...newOptions };\r\n    option[label] = value;\r\n    setNewOptions(option);\r\n  };\r\n\r\n  const handleFieldUpdate = (e: any) => {\r\n    elementJSON.field_type = e.target.value;\r\n    handlePropertyValueUpdate(null, null, null, e.target.value);\r\n  };\r\n\r\n  const handleSelectUpdate = (e: any) => {\r\n    elementJSON.default_value = e.target.value;\r\n    handlePropertyValueUpdate(null, null, e.target.value);\r\n  };\r\n\r\n  useEffect(() => {\r\n    setElementJSON(props.element);\r\n    setSelectOptions(props.element.options || []);\r\n  }, [props.element]);\r\n\r\n  useEffect(() => {\r\n    setNewOptions({ label: \"\", value: \"\", is_checked: false });\r\n    setAddSelectOption(false);\r\n    handleSelectOptionValueUpdate(selectOptions);\r\n    // eslint-disable-next-line\r\n  }, [selectOptions]);\r\n\r\n  return (\r\n    <Box className=\"formSection--FieldContainer\" key={elementJSON.id}>\r\n      <div key={elementJSON.id}>\r\n        <FieldSelect\r\n          key={elementJSON.id}\r\n          variant=\"outlined\"\r\n          onChange={handleFieldUpdate}\r\n          defaultValue={elementJSON.field_type}\r\n          label=\"Field Type\"\r\n          disabled={elementJSON.type === \"system\" || !elementJSON.is_new}\r\n        />\r\n      </div>\r\n      <div key={elementJSON.id}>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Label\"\r\n          is_required\r\n          key={elementJSON.id}\r\n          name=\"label\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={elementJSON.label}\r\n        />\r\n      </div>\r\n\r\n      <div key={elementJSON.id}>\r\n        <Select\r\n          variant=\"outlined\"\r\n          key={elementJSON.id}\r\n          fullWidth\r\n          placeholder=\"Select Default\"\r\n          size=\"small\"\r\n          name=\"options\"\r\n          onChange={() => handleSelectUpdate}\r\n          defaultValue={elementJSON.default_value}\r\n          label=\"Default\"\r\n          disabled={!selectOptions.length}\r\n        >\r\n          {selectOptions?.map((option: any, index: number) => (\r\n            <MenuItem key={index} value={option.value}>\r\n              {option.label}\r\n            </MenuItem>\r\n          ))}\r\n        </Select>\r\n      </div>\r\n      <FormControl>\r\n        <Select\r\n          key={elementJSON.id}\r\n          fullWidth\r\n          placeholder=\"Select Column Per Row\"\r\n          size=\"small\"\r\n          onChange={handleColumnSelect} // need to change\r\n          // defaultValue= {} // need to change\r\n          label=\"Select Column Per Row\"\r\n          name=\"option\"\r\n          variant=\"outlined\"\r\n        >\r\n          {columnPerRowOptions?.map((option: any, index: number) => (\r\n            <MenuItem key={index} value={option}>\r\n              {option}\r\n            </MenuItem>\r\n          ))}\r\n        </Select>\r\n      </FormControl>\r\n      <Box>\r\n        <Typography sx={{ color: 'black' }}>Adjust Width:</Typography>\r\n        <Slider\r\n          value = {elementJSON?.custom_width}\r\n          name = \"custom_width\"\r\n          min={1}\r\n          max={12}\r\n          step={1}\r\n          onChange={(_, newValue) => handleWidthChange(newValue)}\r\n          aria-labelledby=\"width-slider\"\r\n          sx = {{color : \"#4AC08C\"}}\r\n        />\r\n      </Box>\r\n    \r\n\r\n      <div className=\"formSection--SelectOption\">\r\n        <Typography type=\"s5\" weight={\"medium\"} color={\"theme.secondary.800\"}>\r\n          Options\r\n        </Typography>\r\n        {selectOptions.map((option: any, index: number) => (\r\n          <div className=\"formSection--MultiOptions\">\r\n            <TextField\r\n              fullWidth\r\n              key={index}\r\n              value={`${option.label} (${option.value})`}\r\n              InputProps={{\r\n                readOnly: true,\r\n              }}\r\n            />\r\n            <CloseIcon\r\n              style={{ fontSize: \"1rem\", color: \"#656669\" }}\r\n              onClick={() => {\r\n                setSelectOptions([\r\n                  ...selectOptions.filter(\r\n                    (_: any, filterIndex: number) => filterIndex !== index,\r\n                  ),\r\n                ]);\r\n              }}\r\n            />\r\n          </div>\r\n        ))}\r\n      </div>\r\n      {isAddSelectOption ? (\r\n        <div className=\"formSection--SelectOption\">\r\n          <div>\r\n            <TextField\r\n              fullWidth\r\n              label=\"Label\"\r\n              is_required\r\n              name=\"label\"\r\n              type=\"text\"\r\n              placeholder=\"Label\"\r\n              defaultValue={newOptions.label}\r\n              onChange={handleAddNewOption}\r\n            />\r\n          </div>\r\n          <div>\r\n            <TextField\r\n              fullWidth\r\n              label=\"Value\"\r\n              placeholder=\"Value\"\r\n              is_required\r\n              name=\"value\"\r\n              type=\"text\"\r\n              defaultValue={newOptions.value}\r\n              onChange={handleAddNewOption}\r\n            />\r\n          </div>\r\n          <Button\r\n            onClick={() =>\r\n              setSelectOptions([...selectOptions, { ...newOptions }])\r\n            }\r\n            disabled={\r\n              !!selectOptions.find(\r\n                (ele: Option) => ele.value === newOptions.value,\r\n              )\r\n            }\r\n            variant=\"text\"\r\n            className=\"formSection--Button\"\r\n            startIcon={<Add />}\r\n          >\r\n            Add\r\n          </Button>\r\n        </div>\r\n      ) : (\r\n        <Button\r\n          onClick={() => setAddSelectOption(true)}\r\n          variant=\"text\"\r\n          className=\"formSection--Button\"\r\n          startIcon={<Add />}\r\n        >\r\n          Add Option\r\n        </Button>\r\n      )}\r\n\r\n      <FormControl>\r\n        <Typography type=\"s4\" color=\"theme.secondary.800\">\r\n          Display style\r\n        </Typography>\r\n        <RadioGroup\r\n          key={elementJSON.id}\r\n          row\r\n          aria-labelledby=\"demo-radio-buttons-group-label\"\r\n          name=\"display\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={elementJSON.display}\r\n        >\r\n          <FormControlLabel\r\n            value=\"row\"\r\n            control={<Radio size=\"small\" />}\r\n            label=\"Row\"\r\n            slotProps={{ typography: { variant: \"body2\" } }}\r\n          />\r\n          <FormControlLabel\r\n            value=\"column\"\r\n            control={<Radio size=\"small\" />}\r\n            label=\"Column\"\r\n            slotProps={{ typography: { variant: \"body2\" } }}\r\n          />\r\n        </RadioGroup>\r\n      </FormControl>\r\n\r\n      <div key={elementJSON.id}>\r\n        <TextField\r\n          key={elementJSON.id}\r\n          fullWidth\r\n          label=\"Title\"\r\n          is_required\r\n          name=\"title\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={elementJSON.title}\r\n        />\r\n      </div>\r\n\r\n      <FormControl disabled={!allowLabelPositionModification}>\r\n        <Typography type=\"s4\" color=\"theme.secondary.800\">\r\n          Title Position\r\n        </Typography>\r\n        <RadioGroup\r\n          key={elementJSON.id}\r\n          row\r\n          aria-labelledby=\"demo-radio-buttons-group-label\"\r\n          name=\"title_position\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={allowLabelPositionModification ? \"end\" : \"\"}\r\n        >\r\n          <FormControlLabel\r\n            value=\"start\"\r\n            control={<Radio size=\"small\" />}\r\n            label=\"Start\"\r\n            slotProps={{ typography: { variant: \"body2\" } }}\r\n          />\r\n          <FormControlLabel\r\n            value=\"end\"\r\n            control={<Radio size=\"small\" />}\r\n            label=\"End\"\r\n            slotProps={{ typography: { variant: \"body2\" } }}\r\n          />\r\n        </RadioGroup>\r\n      </FormControl>\r\n\r\n      <FormControlLabel\r\n        key={elementJSON.id}\r\n        name=\"is_required\"\r\n        control={<Checkbox />}\r\n        onChange={handlePropertyValueUpdate}\r\n        checked={elementJSON.is_required}\r\n        label=\"This field is required\"\r\n      />\r\n      <FormControlLabel\r\n        key={elementJSON.id}\r\n        name=\"is_unique\"\r\n        control={<Checkbox />}\r\n        onChange={handlePropertyValueUpdate}\r\n        checked={elementJSON.is_unique}\r\n        label=\"Is Unique\"\r\n      />\r\n\r\n      <FormControlLabel\r\n        key={elementJSON.id}\r\n        name=\"is_fullwidth\"\r\n        control={<Checkbox />}\r\n        onChange={handlePropertyValueUpdate} // need to change this\r\n        checked={elementJSON?.is_fullwidth}// need to change \r\n        label=\"Full Width \"\r\n      />\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default CheckboxEditForm;\r\n"],"names":["CloseIcon"],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),a=,/* empty css                                                        */t=,/* empty css                                              */i=,/* empty css                                        */d=,/* empty css                                                  */o=,/* empty css                                                  */n=;/* empty css                     */;/* empty css                            */var s=,/* empty css                                                    */r=,/* empty css                                                          */u=,/* empty css                                                              */c=,/* empty css                                                                    */m=,/* empty css                                                          */x=,/* empty css                                                          */h=,/* empty css                                                          */p=,/* empty css                                                                  */f=;/* empty css                                                                              */function j(j){const[b,y]=l.useState(!1),{handlePropertyValueUpdate:v,handleSelectOptionValueUpdate:g,handleColumnSelect:C,handleWidthChange:_}=j,q=[1,2,3,4,5,6],[S,k]=l.useState(j.element.options||[]),[w,F]=l.useState(j.element),T="radioButton"!==w.field_type,[V,P]=l.useState({label:"",value:"",is_checked:!1}),W=e=>{const l=e.target.name,a=e.target.value,t={...V};t[l]=a,P(t)},R=e=>{w.default_value=e.target.value,v(null,null,e.target.value)};return l.useEffect(()=>{F(j.element),k(j.element.options||[])},[j.element]),l.useEffect(()=>{P({label:"",value:"",is_checked:!1}),y(!1),g(S)},[S]),/* @__PURE__ */e.jsxs(s.default,{className:"formSection--FieldContainer",children:[
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(n.default,{variant:"outlined",onChange:e=>{w.field_type=e.target.value,v(null,null,null,e.target.value)},defaultValue:w.field_type,label:"Field Type",disabled:"system"===w.type||!w.is_new},w.id)},w.id),
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(d.TextField,{fullWidth:!0,label:"Label",is_required:!0,name:"label",type:"text",onChange:v,defaultValue:w.label},w.id)},w.id),
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(r.default,{variant:"outlined",fullWidth:!0,placeholder:"Select Default",size:"small",name:"options",onChange:()=>R,defaultValue:w.default_value,label:"Default",disabled:!S.length,children:null==S?void 0:S.map((l,a)=>/* @__PURE__ */e.jsx(u.default,{value:l.value,children:l.label},a))},w.id)},w.id),
+/* @__PURE__ */e.jsx(c.default,{children:/* @__PURE__ */e.jsx(r.default,{fullWidth:!0,placeholder:"Select Column Per Row",size:"small",onChange:C,label:"Select Column Per Row",name:"option",variant:"outlined",children:null==q?void 0:q.map((l,a)=>/* @__PURE__ */e.jsx(u.default,{value:l,children:l},a))},w.id)}),
+/* @__PURE__ */e.jsxs(s.default,{children:[
+/* @__PURE__ */e.jsx(o.Typography,{sx:{color:"black"},children:"Adjust Width:"}),
+/* @__PURE__ */e.jsx(m.default,{value:null==w?void 0:w.custom_width,name:"custom_width",min:1,max:12,step:1,onChange:(e,l)=>_(l),"aria-labelledby":"width-slider",sx:{color:"#4AC08C"}})]}),
+/* @__PURE__ */e.jsxs("div",{className:"formSection--SelectOption",children:[
+/* @__PURE__ */e.jsx(o.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",children:"Options"}),S.map((l,t)=>/* @__PURE__ */e.jsxs("div",{className:"formSection--MultiOptions",children:[
+/* @__PURE__ */e.jsx(d.TextField,{fullWidth:!0,value:`${l.label} (${l.value})`,InputProps:{readOnly:!0}},t),
+/* @__PURE__ */e.jsx(a.default,{style:{fontSize:"1rem",color:"#656669"},onClick:()=>{k([...S.filter((e,l)=>l!==t)])}})]}))]}),b?/* @__PURE__ */e.jsxs("div",{className:"formSection--SelectOption",children:[
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(d.TextField,{fullWidth:!0,label:"Label",is_required:!0,name:"label",type:"text",placeholder:"Label",defaultValue:V.label,onChange:W})}),
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(d.TextField,{fullWidth:!0,label:"Value",placeholder:"Value",is_required:!0,name:"value",type:"text",defaultValue:V.value,onChange:W})}),
+/* @__PURE__ */e.jsx(x.default,{onClick:()=>k([...S,{...V}]),disabled:!!S.find(e=>e.value===V.value),variant:"text",className:"formSection--Button",startIcon:/* @__PURE__ */e.jsx(h.default,{}),children:"Add"})]}):/* @__PURE__ */e.jsx(x.default,{onClick:()=>y(!0),variant:"text",className:"formSection--Button",startIcon:/* @__PURE__ */e.jsx(h.default,{}),children:"Add Option"}),
+/* @__PURE__ */e.jsxs(c.default,{children:[
+/* @__PURE__ */e.jsx(o.Typography,{type:"s4",color:"theme.secondary.800",children:"Display style"}),
+/* @__PURE__ */e.jsxs(p.default,{row:!0,"aria-labelledby":"demo-radio-buttons-group-label",name:"display",onChange:v,defaultValue:w.display,children:[
+/* @__PURE__ */e.jsx(f.default,{value:"row",control:/* @__PURE__ */e.jsx(i.Radio,{size:"small"}),label:"Row",slotProps:{typography:{variant:"body2"}}}),
+/* @__PURE__ */e.jsx(f.default,{value:"column",control:/* @__PURE__ */e.jsx(i.Radio,{size:"small"}),label:"Column",slotProps:{typography:{variant:"body2"}}})]},w.id)]}),
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx(d.TextField,{fullWidth:!0,label:"Title",is_required:!0,name:"title",type:"text",onChange:v,defaultValue:w.title},w.id)},w.id),
+/* @__PURE__ */e.jsxs(c.default,{disabled:!T,children:[
+/* @__PURE__ */e.jsx(o.Typography,{type:"s4",color:"theme.secondary.800",children:"Title Position"}),
+/* @__PURE__ */e.jsxs(p.default,{row:!0,"aria-labelledby":"demo-radio-buttons-group-label",name:"title_position",onChange:v,defaultValue:T?"end":"",children:[
+/* @__PURE__ */e.jsx(f.default,{value:"start",control:/* @__PURE__ */e.jsx(i.Radio,{size:"small"}),label:"Start",slotProps:{typography:{variant:"body2"}}}),
+/* @__PURE__ */e.jsx(f.default,{value:"end",control:/* @__PURE__ */e.jsx(i.Radio,{size:"small"}),label:"End",slotProps:{typography:{variant:"body2"}}})]},w.id)]}),
+/* @__PURE__ */e.jsx(f.default,{name:"is_required",control:/* @__PURE__ */e.jsx(t.Checkbox,{}),onChange:v,checked:w.is_required,label:"This field is required"},w.id),
+/* @__PURE__ */e.jsx(f.default,{name:"is_unique",control:/* @__PURE__ */e.jsx(t.Checkbox,{}),onChange:v,checked:w.is_unique,label:"Is Unique"},w.id),
+/* @__PURE__ */e.jsx(f.default,{name:"is_fullwidth",control:/* @__PURE__ */e.jsx(t.Checkbox,{}),onChange:v,checked:null==w?void 0:w.is_fullwidth,label:"Full Width "},w.id)]},w.id)}exports.CheckboxEditForm=j,exports.default=j;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/views/form-builder/element-edit-forms/checkbox.tsx"],"sourcesContent":["// React imports\r\nimport { useEffect, useState } from \"react\";\r\n\r\n// Material UI imports\r\nimport {\r\n  MenuItem,\r\n  Box,\r\n  FormControlLabel,\r\n  FormControl,\r\n  RadioGroup,\r\n  Button,\r\n  Select,\r\n  InputLabel,\r\n  Slider,\r\n} from \"@mui/material\";\r\nimport { Add } from \"@mui/icons-material\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\n\r\n// ERP Common imports\r\nimport Checkbox from \"@/components/checkbox/checkbox\";\r\nimport Radio from \"@/components/radio/radio\";\r\nimport TextField from \"@/components/text-field/text-field\";\r\nimport Typography from \"@/components/typography/typography\";\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  is_checked: boolean;\r\n  [key: string]: string | boolean; // Index signature to allow any string property\r\n}\r\n\r\nexport function CheckboxEditForm(props: any) {\r\n  const [isAddSelectOption, setAddSelectOption] = useState(false);\r\n  const { handlePropertyValueUpdate, handleSelectOptionValueUpdate , handleColumnSelect ,  handleWidthChange  } = props;\r\n  const columnPerRowOptions = [1, 2, 3, 4, 5, 6];\r\n  const [selectOptions, setSelectOptions] = useState(\r\n    props.element.options || [],\r\n  );\r\n  const [elementJSON, setElementJSON] = useState(props.element);\r\n\r\n  const allowLabelPositionModification =\r\n    elementJSON.field_type !== \"radioButton\";\r\n\r\n  const [newOptions, setNewOptions] = useState<Option>({\r\n    label: \"\",\r\n    value: \"\",\r\n    is_checked: false,\r\n  });\r\n\r\n\r\n\r\n  const handleAddNewOption = (e: any) => {\r\n    const label: string = e.target.name;\r\n    const value: string = e.target.value;\r\n    const option: Option = { ...newOptions };\r\n    option[label] = value;\r\n    setNewOptions(option);\r\n  };\r\n\r\n  const handleFieldUpdate = (e: any) => {\r\n    elementJSON.field_type = e.target.value;\r\n    handlePropertyValueUpdate(null, null, null, e.target.value);\r\n  };\r\n\r\n  const handleSelectUpdate = (e: any) => {\r\n    elementJSON.default_value = e.target.value;\r\n    handlePropertyValueUpdate(null, null, e.target.value);\r\n  };\r\n\r\n  useEffect(() => {\r\n    setElementJSON(props.element);\r\n    setSelectOptions(props.element.options || []);\r\n  }, [props.element]);\r\n\r\n  useEffect(() => {\r\n    setNewOptions({ label: \"\", value: \"\", is_checked: false });\r\n    setAddSelectOption(false);\r\n    handleSelectOptionValueUpdate(selectOptions);\r\n    // eslint-disable-next-line\r\n  }, [selectOptions]);\r\n\r\n  return (\r\n    <Box className=\"formSection--FieldContainer\" key={elementJSON.id}>\r\n      <div key={elementJSON.id}>\r\n        <FieldSelect\r\n          key={elementJSON.id}\r\n          variant=\"outlined\"\r\n          onChange={handleFieldUpdate}\r\n          defaultValue={elementJSON.field_type}\r\n          label=\"Field Type\"\r\n          disabled={elementJSON.type === \"system\" || !elementJSON.is_new}\r\n        />\r\n      </div>\r\n      <div key={elementJSON.id}>\r\n        <TextField\r\n          fullWidth\r\n          label=\"Label\"\r\n          is_required\r\n          key={elementJSON.id}\r\n          name=\"label\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={elementJSON.label}\r\n        />\r\n      </div>\r\n\r\n      <div key={elementJSON.id}>\r\n        <Select\r\n          variant=\"outlined\"\r\n          key={elementJSON.id}\r\n          fullWidth\r\n          placeholder=\"Select Default\"\r\n          size=\"small\"\r\n          name=\"options\"\r\n          onChange={() => handleSelectUpdate}\r\n          defaultValue={elementJSON.default_value}\r\n          label=\"Default\"\r\n          disabled={!selectOptions.length}\r\n        >\r\n          {selectOptions?.map((option: any, index: number) => (\r\n            <MenuItem key={index} value={option.value}>\r\n              {option.label}\r\n            </MenuItem>\r\n          ))}\r\n        </Select>\r\n      </div>\r\n      <FormControl>\r\n        <Select\r\n          key={elementJSON.id}\r\n          fullWidth\r\n          placeholder=\"Select Column Per Row\"\r\n          size=\"small\"\r\n          onChange={handleColumnSelect} // need to change\r\n          // defaultValue= {} // need to change\r\n          label=\"Select Column Per Row\"\r\n          name=\"option\"\r\n          variant=\"outlined\"\r\n        >\r\n          {columnPerRowOptions?.map((option: any, index: number) => (\r\n            <MenuItem key={index} value={option}>\r\n              {option}\r\n            </MenuItem>\r\n          ))}\r\n        </Select>\r\n      </FormControl>\r\n      <Box>\r\n        <Typography sx={{ color: 'black' }}>Adjust Width:</Typography>\r\n        <Slider\r\n          value = {elementJSON?.custom_width}\r\n          name = \"custom_width\"\r\n          min={1}\r\n          max={12}\r\n          step={1}\r\n          onChange={(_, newValue) => handleWidthChange(newValue)}\r\n          aria-labelledby=\"width-slider\"\r\n          sx = {{color : \"#4AC08C\"}}\r\n        />\r\n      </Box>\r\n    \r\n\r\n      <div className=\"formSection--SelectOption\">\r\n        <Typography type=\"s5\" weight={\"medium\"} color={\"theme.secondary.800\"}>\r\n          Options\r\n        </Typography>\r\n        {selectOptions.map((option: any, index: number) => (\r\n          <div className=\"formSection--MultiOptions\">\r\n            <TextField\r\n              fullWidth\r\n              key={index}\r\n              value={`${option.label} (${option.value})`}\r\n              InputProps={{\r\n                readOnly: true,\r\n              }}\r\n            />\r\n            <CloseIcon\r\n              style={{ fontSize: \"1rem\", color: \"#656669\" }}\r\n              onClick={() => {\r\n                setSelectOptions([\r\n                  ...selectOptions.filter(\r\n                    (_: any, filterIndex: number) => filterIndex !== index,\r\n                  ),\r\n                ]);\r\n              }}\r\n            />\r\n          </div>\r\n        ))}\r\n      </div>\r\n      {isAddSelectOption ? (\r\n        <div className=\"formSection--SelectOption\">\r\n          <div>\r\n            <TextField\r\n              fullWidth\r\n              label=\"Label\"\r\n              is_required\r\n              name=\"label\"\r\n              type=\"text\"\r\n              placeholder=\"Label\"\r\n              defaultValue={newOptions.label}\r\n              onChange={handleAddNewOption}\r\n            />\r\n          </div>\r\n          <div>\r\n            <TextField\r\n              fullWidth\r\n              label=\"Value\"\r\n              placeholder=\"Value\"\r\n              is_required\r\n              name=\"value\"\r\n              type=\"text\"\r\n              defaultValue={newOptions.value}\r\n              onChange={handleAddNewOption}\r\n            />\r\n          </div>\r\n          <Button\r\n            onClick={() =>\r\n              setSelectOptions([...selectOptions, { ...newOptions }])\r\n            }\r\n            disabled={\r\n              !!selectOptions.find(\r\n                (ele: Option) => ele.value === newOptions.value,\r\n              )\r\n            }\r\n            variant=\"text\"\r\n            className=\"formSection--Button\"\r\n            startIcon={<Add />}\r\n          >\r\n            Add\r\n          </Button>\r\n        </div>\r\n      ) : (\r\n        <Button\r\n          onClick={() => setAddSelectOption(true)}\r\n          variant=\"text\"\r\n          className=\"formSection--Button\"\r\n          startIcon={<Add />}\r\n        >\r\n          Add Option\r\n        </Button>\r\n      )}\r\n\r\n      <FormControl>\r\n        <Typography type=\"s4\" color=\"theme.secondary.800\">\r\n          Display style\r\n        </Typography>\r\n        <RadioGroup\r\n          key={elementJSON.id}\r\n          row\r\n          aria-labelledby=\"demo-radio-buttons-group-label\"\r\n          name=\"display\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={elementJSON.display}\r\n        >\r\n          <FormControlLabel\r\n            value=\"row\"\r\n            control={<Radio size=\"small\" />}\r\n            label=\"Row\"\r\n            slotProps={{ typography: { variant: \"body2\" } }}\r\n          />\r\n          <FormControlLabel\r\n            value=\"column\"\r\n            control={<Radio size=\"small\" />}\r\n            label=\"Column\"\r\n            slotProps={{ typography: { variant: \"body2\" } }}\r\n          />\r\n        </RadioGroup>\r\n      </FormControl>\r\n\r\n      <div key={elementJSON.id}>\r\n        <TextField\r\n          key={elementJSON.id}\r\n          fullWidth\r\n          label=\"Title\"\r\n          is_required\r\n          name=\"title\"\r\n          type=\"text\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={elementJSON.title}\r\n        />\r\n      </div>\r\n\r\n      <FormControl disabled={!allowLabelPositionModification}>\r\n        <Typography type=\"s4\" color=\"theme.secondary.800\">\r\n          Title Position\r\n        </Typography>\r\n        <RadioGroup\r\n          key={elementJSON.id}\r\n          row\r\n          aria-labelledby=\"demo-radio-buttons-group-label\"\r\n          name=\"title_position\"\r\n          onChange={handlePropertyValueUpdate}\r\n          defaultValue={allowLabelPositionModification ? \"end\" : \"\"}\r\n        >\r\n          <FormControlLabel\r\n            value=\"start\"\r\n            control={<Radio size=\"small\" />}\r\n            label=\"Start\"\r\n            slotProps={{ typography: { variant: \"body2\" } }}\r\n          />\r\n          <FormControlLabel\r\n            value=\"end\"\r\n            control={<Radio size=\"small\" />}\r\n            label=\"End\"\r\n            slotProps={{ typography: { variant: \"body2\" } }}\r\n          />\r\n        </RadioGroup>\r\n      </FormControl>\r\n\r\n      <FormControlLabel\r\n        key={elementJSON.id}\r\n        name=\"is_required\"\r\n        control={<Checkbox />}\r\n        onChange={handlePropertyValueUpdate}\r\n        checked={elementJSON.is_required}\r\n        label=\"This field is required\"\r\n      />\r\n      <FormControlLabel\r\n        key={elementJSON.id}\r\n        name=\"is_unique\"\r\n        control={<Checkbox />}\r\n        onChange={handlePropertyValueUpdate}\r\n        checked={elementJSON.is_unique}\r\n        label=\"Is Unique\"\r\n      />\r\n\r\n      <FormControlLabel\r\n        key={elementJSON.id}\r\n        name=\"is_fullwidth\"\r\n        control={<Checkbox />}\r\n        onChange={handlePropertyValueUpdate} // need to change this\r\n        checked={elementJSON?.is_fullwidth}// need to change \r\n        label=\"Full Width \"\r\n      />\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default CheckboxEditForm;\r\n"],"names":["CheckboxEditForm","props","isAddSelectOption","setAddSelectOption","useState","handlePropertyValueUpdate","handleSelectOptionValueUpdate","handleColumnSelect","handleWidthChange","columnPerRowOptions","selectOptions","setSelectOptions","element","options","elementJSON","setElementJSON","allowLabelPositionModification","field_type","newOptions","setNewOptions","label","value","is_checked","handleAddNewOption","e","target","name","option","handleSelectUpdate","default_value","useEffect","jsxs","Box","className","children","jsx","FieldSelect","variant","onChange","defaultValue","disabled","type","is_new","id","TextField","fullWidth","is_required","Select","placeholder","size","length","map","index","MenuItem","FormControl","Typography","sx","color","Slider","custom_width","min","max","step","_","newValue","weight","InputProps","readOnly","CloseIcon","style","fontSize","onClick","filter","filterIndex","Button","find","ele","startIcon","Add","RadioGroup","row","display","FormControlLabel","control","Radio","slotProps","typography","title","Checkbox","checked","is_unique","is_fullwidth"],"mappings":"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"}

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

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import TextField from "../../../../node_modules/@mui/material/TextField/TextField/index.esm.js";
+import InputAdornment from "../../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.esm.js";
+import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import Add from "../../../../node_modules/@mui/icons-material/esm/Add/index.esm.js";
+import Remove from "../../../../node_modules/@mui/icons-material/esm/Remove/index.esm.js";
+const ColumnWidth = ({ onChange }) => {
+  const [value, setValue] = useState(6);
+  const handleIncrement = () => {
+    setValue((prev) => prev + 1);
+  };
+  const handleDecrement = () => {
+    setValue((prev) => Math.max(0, prev - 1));
+  };
+  const handleInputChange = (event) => {
+    const newValue = Number.parseInt(event.target.value) || 0;
+    setValue(Math.max(0, newValue));
+  };
+  useEffect(() => {
+    onChange(value);
+  }, [value]);
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, p: 4 }, children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        value,
+        onChange: handleInputChange,
+        name: "custom_width",
+        size: "small",
+        sx: {
+          width: "120px",
+          "& .MuiOutlinedInput-root": {
+            paddingLeft: 0,
+            paddingRight: 0,
+            "& input": {
+              textAlign: "center",
+              padding: "8px 4px"
+            }
+          }
+        },
+        InputProps: {
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: handleDecrement,
+              size: "small",
+              sx: {
+                marginLeft: "-4px",
+                borderRadius: "4px 0 0 4px",
+                border: "none",
+                "&:hover": {
+                  backgroundColor: "rgba(0, 0, 0, 0.04)"
+                }
+              },
+              children: /* @__PURE__ */ jsx(Remove, { fontSize: "small" })
+            }
+          ) }),
+          endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: handleIncrement,
+              size: "small",
+              sx: {
+                marginRight: "-4px",
+                borderRadius: "0 4px 4px 0",
+                border: "none",
+                "&:hover": {
+                  backgroundColor: "rgba(0, 0, 0, 0.04)"
+                }
+              },
+              children: /* @__PURE__ */ jsx(Add, { fontSize: "small" })
+            }
+          ) })
+        },
+        inputProps: {
+          type: "number",
+          min: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { ml: 2, color: "text.secondary" }, children: [
+      "Current value: ",
+      value
+    ] })
+  ] });
+};
+export {
+  ColumnWidth,
+  ColumnWidth as default
+};
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/views/form-builder/element-edit-forms/column-width.tsx"],"sourcesContent":["// React imports\r\nimport React, { useEffect, useState } from 'react';\r\n\r\n// Material UI imports\r\nimport { Box, IconButton, TextField, InputAdornment } from '@mui/material';\r\nimport { Add, Remove } from '@mui/icons-material';\r\n\r\nexport interface IColumnWidthProps {\r\n  onChange: (value: number) => void;\r\n}\r\n\r\nexport const ColumnWidth = ({onChange}: IColumnWidthProps) => {\r\n  const [value, setValue] = useState(6);\r\n\r\n  const handleIncrement = () => {\r\n    setValue(prev => prev + 1);\r\n  };\r\n\r\n  const handleDecrement = () => {\r\n    setValue(prev => Math.max(0, prev - 1)); // Prevent negative values\r\n  };\r\n\r\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const newValue = Number.parseInt(event.target.value) || 0;\r\n    setValue(Math.max(0, newValue));\r\n  };\r\n\r\n  useEffect(() => {\r\n    onChange(value);\r\n  }, [value]);\r\n\r\n  return (\r\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, p: 4 }}>\r\n      <TextField\r\n        value={value}\r\n        onChange={handleInputChange}\r\n        name='custom_width'\r\n        size=\"small\"\r\n        sx={{\r\n          width: '120px',\r\n          '& .MuiOutlinedInput-root': {\r\n            paddingLeft: 0,\r\n            paddingRight: 0,\r\n            '& input': {\r\n              textAlign: 'center',\r\n              padding: '8px 4px',\r\n            }\r\n          }\r\n        }}\r\n        InputProps={{\r\n          startAdornment: (\r\n            <InputAdornment position=\"start\">\r\n              <IconButton\r\n                onClick={handleDecrement}\r\n                size=\"small\"\r\n                sx={{\r\n                  marginLeft: '-4px',\r\n                  borderRadius: '4px 0 0 4px',\r\n                  border: 'none',\r\n                  '&:hover': {\r\n                    backgroundColor: 'rgba(0, 0, 0, 0.04)'\r\n                  }\r\n                }}\r\n              >\r\n                <Remove fontSize=\"small\" />\r\n              </IconButton>\r\n            </InputAdornment>\r\n          ),\r\n          endAdornment: (\r\n            <InputAdornment position=\"end\">\r\n              <IconButton\r\n                onClick={handleIncrement}\r\n                size=\"small\"\r\n                sx={{\r\n                  marginRight: '-4px',\r\n                  borderRadius: '0 4px 4px 0',\r\n                  border: 'none',\r\n                  '&:hover': {\r\n                    backgroundColor: 'rgba(0, 0, 0, 0.04)'\r\n                  }\r\n                }}\r\n              >\r\n                <Add fontSize=\"small\" />\r\n              </IconButton>\r\n            </InputAdornment>\r\n          ),\r\n        }}\r\n        inputProps={{\r\n          type: 'number',\r\n          min: 0,\r\n        }}\r\n      />\r\n      \r\n      <Box sx={{ ml: 2, color: 'text.secondary' }}>\r\n        Current value: {value}\r\n      </Box>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default ColumnWidth;"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,cAAc,CAAC,EAAC,eAAiC;AAC5D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAEpC,QAAM,kBAAkB,MAAM;AAC5B,aAAS,CAAA,SAAQ,OAAO,CAAC;AAAA,EAC3B;AAEA,QAAM,kBAAkB,MAAM;AAC5B,aAAS,UAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AAAA,EACxC;AAEA,QAAM,oBAAoB,CAAC,UAA+C;AACxE,UAAM,WAAW,OAAO,SAAS,MAAM,OAAO,KAAK,KAAK;AACxD,aAAS,KAAK,IAAI,GAAG,QAAQ,CAAC;AAAA,EAChC;AAEA,YAAU,MAAM;AACd,aAAS,KAAK;AAAA,EAChB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,GAAG,GAAG,EAAA,GAC3D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,MAAK;AAAA,QACL,MAAK;AAAA,QACL,IAAI;AAAA,UACF,OAAO;AAAA,UACP,4BAA4B;AAAA,YAC1B,aAAa;AAAA,YACb,cAAc;AAAA,YACd,WAAW;AAAA,cACT,WAAW;AAAA,cACX,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,QAEF,YAAY;AAAA,UACV,gBACE,oBAAC,gBAAA,EAAe,UAAS,SACvB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,MAAK;AAAA,cACL,IAAI;AAAA,gBACF,YAAY;AAAA,gBACZ,cAAc;AAAA,gBACd,QAAQ;AAAA,gBACR,WAAW;AAAA,kBACT,iBAAiB;AAAA,gBAAA;AAAA,cACnB;AAAA,cAGF,UAAA,oBAAC,QAAA,EAAO,UAAS,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA,GAE7B;AAAA,UAEF,cACE,oBAAC,gBAAA,EAAe,UAAS,OACvB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,MAAK;AAAA,cACL,IAAI;AAAA,gBACF,aAAa;AAAA,gBACb,cAAc;AAAA,gBACd,QAAQ;AAAA,gBACR,WAAW;AAAA,kBACT,iBAAiB;AAAA,gBAAA;AAAA,cACnB;AAAA,cAGF,UAAA,oBAAC,KAAA,EAAI,UAAS,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA,EACxB,CACF;AAAA,QAAA;AAAA,QAGJ,YAAY;AAAA,UACV,MAAM;AAAA,UACN,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,IAGF,qBAAC,OAAI,IAAI,EAAE,IAAI,GAAG,OAAO,oBAAoB,UAAA;AAAA,MAAA;AAAA,MAC3B;AAAA,IAAA,EAAA,CAClB;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../../node_modules/@mui/material/Box/Box/index.js"),r=require("../../../../node_modules/@mui/material/TextField/TextField/index.js"),i=require("../../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.js"),d=require("../../../../node_modules/@mui/material/IconButton/IconButton/index.js"),o=require("../../../../node_modules/@mui/icons-material/esm/Add/index.js"),s=require("../../../../node_modules/@mui/icons-material/esm/Remove/index.js");const a=({onChange:a})=>{const[u,l]=t.useState(6);return t.useEffect(()=>{a(u)},[u]),/* @__PURE__ */e.jsxs(n.default,{sx:{display:"flex",alignItems:"center",gap:2,p:4},children:[
+/* @__PURE__ */e.jsx(r.default,{value:u,onChange:e=>{const t=Number.parseInt(e.target.value)||0;l(Math.max(0,t))},name:"custom_width",size:"small",sx:{width:"120px","& .MuiOutlinedInput-root":{paddingLeft:0,paddingRight:0,"& input":{textAlign:"center",padding:"8px 4px"}}},InputProps:{startAdornment:/* @__PURE__ */e.jsx(i.default,{position:"start",children:/* @__PURE__ */e.jsx(d.default,{onClick:()=>{l(e=>Math.max(0,e-1))},size:"small",sx:{marginLeft:"-4px",borderRadius:"4px 0 0 4px",border:"none","&:hover":{backgroundColor:"rgba(0, 0, 0, 0.04)"}},children:/* @__PURE__ */e.jsx(s.default,{fontSize:"small"})})}),endAdornment:/* @__PURE__ */e.jsx(i.default,{position:"end",children:/* @__PURE__ */e.jsx(d.default,{onClick:()=>{l(e=>e+1)},size:"small",sx:{marginRight:"-4px",borderRadius:"0 4px 4px 0",border:"none","&:hover":{backgroundColor:"rgba(0, 0, 0, 0.04)"}},children:/* @__PURE__ */e.jsx(o.default,{fontSize:"small"})})})},inputProps:{type:"number",min:0}}),
+/* @__PURE__ */e.jsxs(n.default,{sx:{ml:2,color:"text.secondary"},children:["Current value: ",u]})]})};exports.ColumnWidth=a,exports.default=a;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/views/form-builder/element-edit-forms/column-width.tsx"],"sourcesContent":["// React imports\r\nimport React, { useEffect, useState } from 'react';\r\n\r\n// Material UI imports\r\nimport { Box, IconButton, TextField, InputAdornment } from '@mui/material';\r\nimport { Add, Remove } from '@mui/icons-material';\r\n\r\nexport interface IColumnWidthProps {\r\n  onChange: (value: number) => void;\r\n}\r\n\r\nexport const ColumnWidth = ({onChange}: IColumnWidthProps) => {\r\n  const [value, setValue] = useState(6);\r\n\r\n  const handleIncrement = () => {\r\n    setValue(prev => prev + 1);\r\n  };\r\n\r\n  const handleDecrement = () => {\r\n    setValue(prev => Math.max(0, prev - 1)); // Prevent negative values\r\n  };\r\n\r\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    const newValue = Number.parseInt(event.target.value) || 0;\r\n    setValue(Math.max(0, newValue));\r\n  };\r\n\r\n  useEffect(() => {\r\n    onChange(value);\r\n  }, [value]);\r\n\r\n  return (\r\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, p: 4 }}>\r\n      <TextField\r\n        value={value}\r\n        onChange={handleInputChange}\r\n        name='custom_width'\r\n        size=\"small\"\r\n        sx={{\r\n          width: '120px',\r\n          '& .MuiOutlinedInput-root': {\r\n            paddingLeft: 0,\r\n            paddingRight: 0,\r\n            '& input': {\r\n              textAlign: 'center',\r\n              padding: '8px 4px',\r\n            }\r\n          }\r\n        }}\r\n        InputProps={{\r\n          startAdornment: (\r\n            <InputAdornment position=\"start\">\r\n              <IconButton\r\n                onClick={handleDecrement}\r\n                size=\"small\"\r\n                sx={{\r\n                  marginLeft: '-4px',\r\n                  borderRadius: '4px 0 0 4px',\r\n                  border: 'none',\r\n                  '&:hover': {\r\n                    backgroundColor: 'rgba(0, 0, 0, 0.04)'\r\n                  }\r\n                }}\r\n              >\r\n                <Remove fontSize=\"small\" />\r\n              </IconButton>\r\n            </InputAdornment>\r\n          ),\r\n          endAdornment: (\r\n            <InputAdornment position=\"end\">\r\n              <IconButton\r\n                onClick={handleIncrement}\r\n                size=\"small\"\r\n                sx={{\r\n                  marginRight: '-4px',\r\n                  borderRadius: '0 4px 4px 0',\r\n                  border: 'none',\r\n                  '&:hover': {\r\n                    backgroundColor: 'rgba(0, 0, 0, 0.04)'\r\n                  }\r\n                }}\r\n              >\r\n                <Add fontSize=\"small\" />\r\n              </IconButton>\r\n            </InputAdornment>\r\n          ),\r\n        }}\r\n        inputProps={{\r\n          type: 'number',\r\n          min: 0,\r\n        }}\r\n      />\r\n      \r\n      <Box sx={{ ml: 2, color: 'text.secondary' }}>\r\n        Current value: {value}\r\n      </Box>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default ColumnWidth;"],"names":["ColumnWidth","onChange","value","setValue","useState","useEffect","jsxs","Box","sx","display","alignItems","gap","p","children","jsx","TextField","event","newValue","Number","parseInt","target","Math","max","name","size","width","paddingLeft","paddingRight","textAlign","padding","InputProps","startAdornment","InputAdornment","position","IconButton","onClick","prev","marginLeft","borderRadius","border","backgroundColor","Remove","fontSize","endAdornment","marginRight","Add","inputProps","type","min","ml","color"],"mappings":"ulBAWO,MAAMA,EAAc,EAAEC,eAC3B,MAAOC,EAAOC,GAAYC,EAAAA,SAAS,GAmBnC,OAJAC,EAAAA,UAAU,KACRJ,EAASC,IACR,CAACA,qBAGFI,KAACC,EAAAA,QAAA,CAAIC,GAAI,CAAEC,QAAS,OAAQC,WAAY,SAAUC,IAAK,EAAGC,EAAG,GAC3DC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,QAAA,CACCb,QACAD,SAbqBe,IACzB,MAAMC,EAAWC,OAAOC,SAASH,EAAMI,OAAOlB,QAAU,EACxDC,EAASkB,KAAKC,IAAI,EAAGL,KAYjBM,KAAK,eACLC,KAAK,QACLhB,GAAI,CACFiB,MAAO,QACP,2BAA4B,CAC1BC,YAAa,EACbC,aAAc,EACd,UAAW,CACTC,UAAW,SACXC,QAAS,aAIfC,WAAY,CACVC,gCACEjB,IAACkB,EAAAA,QAAA,CAAeC,SAAS,QACvBpB,wBAAAC,EAAAA,IAACoB,EAAAA,QAAA,CACCC,QAnCU,KACtBhC,KAAiBkB,KAAKC,IAAI,EAAGc,EAAO,KAmCxBZ,KAAK,QACLhB,GAAI,CACF6B,WAAY,OACZC,aAAc,cACdC,OAAQ,OACR,UAAW,CACTC,gBAAiB,wBAIrB3B,0BAAAC,IAAC2B,EAAAA,QAAA,CAAOC,SAAS,cAIvBC,8BACE7B,IAACkB,EAAAA,QAAA,CAAeC,SAAS,MACvBpB,wBAAAC,EAAAA,IAACoB,EAAAA,QAAA,CACCC,QAzDU,KACtBhC,EAASiC,GAAQA,EAAO,IAyDZZ,KAAK,QACLhB,GAAI,CACFoC,YAAa,OACbN,aAAc,cACdC,OAAQ,OACR,UAAW,CACTC,gBAAiB,wBAIrB3B,0BAAAC,IAAC+B,EAAAA,QAAA,CAAIH,SAAS,eAKtBI,WAAY,CACVC,KAAM,SACNC,IAAK;eAIT1C,OAACC,EAAAA,SAAIC,GAAI,CAAEyC,GAAI,EAAGC,MAAO,kBAAoBrC,SAAA,CAAA,kBAC3BX"}

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

@@ -1,3 +1,5 @@
-export default function ColumnWidth({ onChange }: {
-    onChange: any;
-}): import("react/jsx-runtime").JSX.Element;
+export interface IColumnWidthProps {
+    onChange: (value: number) => void;
+}
+export declare const ColumnWidth: ({ onChange }: IColumnWidthProps) => import("react/jsx-runtime").JSX.Element;
+export default ColumnWidth;