@erpsquad/common 1.8.6 → 1.8.8

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

@@ -0,0 +1,3 @@
+
+export declare function CheckboxEditForm(props: any): import("react/jsx-runtime").JSX.Element;
+export default CheckboxEditForm;

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

@@ -0,0 +1,92 @@
+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";
+function 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 = 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 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\nimport React, { useEffect, useState } from 'react';\n\n// Material UI imports\nimport { Box, IconButton, TextField, InputAdornment } from '@mui/material';\nimport { Add, Remove } from '@mui/icons-material';\n\nexport default function ColumnWidth({onChange}) {\n  const [value, setValue] = useState(6);\n\n  const handleIncrement = () => {\n    setValue(prev => prev + 1);\n  };\n\n  const handleDecrement = () => {\n    setValue(prev => Math.max(0, prev - 1)); // Prevent negative values\n  };\n\n  const handleInputChange = (event) => {\n    const newValue = parseInt(event.target.value) || 0;\n    setValue(Math.max(0, newValue));\n  };\n\n  useEffect(() => {\n    onChange(value);\n  }, [value]);\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, p: 4 }}>\n      <TextField\n        value={value}\n        onChange={handleInputChange}\n        name='custom_width'\n        size=\"small\"\n        sx={{\n          width: '120px',\n          '& .MuiOutlinedInput-root': {\n            paddingLeft: 0,\n            paddingRight: 0,\n            '& input': {\n              textAlign: 'center',\n              padding: '8px 4px',\n            }\n          }\n        }}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <IconButton\n                onClick={handleDecrement}\n                size=\"small\"\n                sx={{\n                  marginLeft: '-4px',\n                  borderRadius: '4px 0 0 4px',\n                  border: 'none',\n                  '&:hover': {\n                    backgroundColor: 'rgba(0, 0, 0, 0.04)'\n                  }\n                }}\n              >\n                <Remove fontSize=\"small\" />\n              </IconButton>\n            </InputAdornment>\n          ),\n          endAdornment: (\n            <InputAdornment position=\"end\">\n              <IconButton\n                onClick={handleIncrement}\n                size=\"small\"\n                sx={{\n                  marginRight: '-4px',\n                  borderRadius: '0 4px 4px 0',\n                  border: 'none',\n                  '&:hover': {\n                    backgroundColor: 'rgba(0, 0, 0, 0.04)'\n                  }\n                }}\n              >\n                <Add fontSize=\"small\" />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n        inputProps={{\n          type: 'number',\n          min: 0,\n        }}\n      />\n      \n      <Box sx={{ ml: 2, color: 'text.secondary' }}>\n        Current value: {value}\n      </Box>\n    </Box>\n  );\n}"],"names":[],"mappings":";;;;;;;;AAOA,SAAwB,YAAY,EAAC,YAAW;AAC9C,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,UAAU;AACnC,UAAM,WAAW,SAAS,MAAM,OAAO,KAAK,KAAK;AACjD,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"),n=require("react"),t=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");exports.default=function({onChange:a}){const[u,l]=n.useState(6);return n.useEffect(()=>{a(u)},[u]),/* @__PURE__ */e.jsxs(t.default,{sx:{display:"flex",alignItems:"center",gap:2,p:4},children:[
+/* @__PURE__ */e.jsx(r.default,{value:u,onChange:e=>{const n=parseInt(e.target.value)||0;l(Math.max(0,n))},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(t.default,{sx:{ml:2,color:"text.secondary"},children:["Current value: ",u]})]})};
+//# 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\nimport React, { useEffect, useState } from 'react';\n\n// Material UI imports\nimport { Box, IconButton, TextField, InputAdornment } from '@mui/material';\nimport { Add, Remove } from '@mui/icons-material';\n\nexport default function ColumnWidth({onChange}) {\n  const [value, setValue] = useState(6);\n\n  const handleIncrement = () => {\n    setValue(prev => prev + 1);\n  };\n\n  const handleDecrement = () => {\n    setValue(prev => Math.max(0, prev - 1)); // Prevent negative values\n  };\n\n  const handleInputChange = (event) => {\n    const newValue = parseInt(event.target.value) || 0;\n    setValue(Math.max(0, newValue));\n  };\n\n  useEffect(() => {\n    onChange(value);\n  }, [value]);\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, p: 4 }}>\n      <TextField\n        value={value}\n        onChange={handleInputChange}\n        name='custom_width'\n        size=\"small\"\n        sx={{\n          width: '120px',\n          '& .MuiOutlinedInput-root': {\n            paddingLeft: 0,\n            paddingRight: 0,\n            '& input': {\n              textAlign: 'center',\n              padding: '8px 4px',\n            }\n          }\n        }}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <IconButton\n                onClick={handleDecrement}\n                size=\"small\"\n                sx={{\n                  marginLeft: '-4px',\n                  borderRadius: '4px 0 0 4px',\n                  border: 'none',\n                  '&:hover': {\n                    backgroundColor: 'rgba(0, 0, 0, 0.04)'\n                  }\n                }}\n              >\n                <Remove fontSize=\"small\" />\n              </IconButton>\n            </InputAdornment>\n          ),\n          endAdornment: (\n            <InputAdornment position=\"end\">\n              <IconButton\n                onClick={handleIncrement}\n                size=\"small\"\n                sx={{\n                  marginRight: '-4px',\n                  borderRadius: '0 4px 4px 0',\n                  border: 'none',\n                  '&:hover': {\n                    backgroundColor: 'rgba(0, 0, 0, 0.04)'\n                  }\n                }}\n              >\n                <Add fontSize=\"small\" />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n        inputProps={{\n          type: 'number',\n          min: 0,\n        }}\n      />\n      \n      <Box sx={{ ml: 2, color: 'text.secondary' }}>\n        Current value: {value}\n      </Box>\n    </Box>\n  );\n}"],"names":["onChange","value","setValue","useState","useEffect","jsxs","Box","sx","display","alignItems","gap","p","children","jsx","TextField","event","newValue","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":"umBAOA,UAAoCA,SAACA,IACnC,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,SAASF,EAAMG,OAAOjB,QAAU,EACjDC,EAASiB,KAAKC,IAAI,EAAGJ,KAYjBK,KAAK,eACLC,KAAK,QACLf,GAAI,CACFgB,MAAO,QACP,2BAA4B,CAC1BC,YAAa,EACbC,aAAc,EACd,UAAW,CACTC,UAAW,SACXC,QAAS,aAIfC,WAAY,CACVC,gCACEhB,IAACiB,EAAAA,QAAA,CAAeC,SAAS,QACvBnB,wBAAAC,EAAAA,IAACmB,EAAAA,QAAA,CACCC,QAnCU,KACtB/B,KAAiBiB,KAAKC,IAAI,EAAGc,EAAO,KAmCxBZ,KAAK,QACLf,GAAI,CACF4B,WAAY,OACZC,aAAc,cACdC,OAAQ,OACR,UAAW,CACTC,gBAAiB,wBAIrB1B,0BAAAC,IAAC0B,EAAAA,QAAA,CAAOC,SAAS,cAIvBC,8BACE5B,IAACiB,EAAAA,QAAA,CAAeC,SAAS,MACvBnB,wBAAAC,EAAAA,IAACmB,EAAAA,QAAA,CACCC,QAzDU,KACtB/B,EAASgC,GAAQA,EAAO,IAyDZZ,KAAK,QACLf,GAAI,CACFmC,YAAa,OACbN,aAAc,cACdC,OAAQ,OACR,UAAW,CACTC,gBAAiB,wBAIrB1B,0BAAAC,IAAC8B,EAAAA,QAAA,CAAIH,SAAS,eAKtBI,WAAY,CACVC,KAAM,SACNC,IAAK;eAITzC,OAACC,EAAAA,SAAIC,GAAI,CAAEwC,GAAI,EAAGC,MAAO,kBAAoBpC,SAAA,CAAA,kBAC3BX,OAIxB"}

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

@@ -0,0 +1,3 @@
+export default function ColumnWidth({ onChange }: {
+    onChange: any;
+}): import("react/jsx-runtime").JSX.Element;