@flozy/editor 5.3.3 → 5.3.5

package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js

@@ -3,6 +3,8 @@ import { Grid, Button, Typography, Select, MenuItem, TextField } from "@mui/mate
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { convertBase64 } from "../../../utils/helper";
 import { uploadFile } from "../../../service/fileupload";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+import useCommonStyle from "../../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -30,6 +32,10 @@ const SaveAsTemplate = props => {
   });
   const [base64, setBase64] = useState(value);
   const [uploading, setUploading] = useState(false);
+  const {
+    theme
+  } = useEditorContext();
+  const classes = useCommonStyle(theme);
   const handleChange = async e => {
     const file = e.target.files[0];
     const strImage = await convertBase64(file);
@@ -76,6 +82,9 @@ const SaveAsTemplate = props => {
     onSaveTemplate(formData, params);
     handleClose();
   };
+  if (!onSaveTemplate) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -149,9 +158,14 @@ const SaveAsTemplate = props => {
       justifyContent: "space-between",
       alignItems: "center",
       children: [/*#__PURE__*/_jsxs(Button, {
-        component: "label",
-        variant: "contained",
+        component: "label"
+        // variant="contained"
+        ,
+        className: "gradientFillBtn",
         startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
+        sx: {
+          ...classes.gradientFillBtn
+        },
         children: ["Upload file", /*#__PURE__*/_jsx("input", {
           type: "file",
           style: {
@@ -194,12 +208,14 @@ const SaveAsTemplate = props => {
       },
       className: "action-btn-wrpr",
       children: [/*#__PURE__*/_jsx(Button, {
-        className: "savebtn",
+        className: "savebtn gradientFillBtn",
         onClick: handleSave,
         sx: {
-          fontWeight: 700
-        },
-        variant: "contained",
+          fontWeight: 700,
+          ...classes.gradientFillBtn
+        }
+        // variant="contained"
+        ,
         children: saveText
       }), closeText ? /*#__PURE__*/_jsx(Button, {
         className: "closebtn",

package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js

@@ -1,5 +1,8 @@
 import React, { useEffect, useState, useRef } from "react";
-import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
+import { Grid, Checkbox, FormControlLabel, FormHelperText, IconButton } from "@mui/material";
+import useCommonStyle from "../../../commonStyle";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+import { CheckedBoxCheckIcon } from "../../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SelectBox = props => {
@@ -15,6 +18,10 @@ const SelectBox = props => {
   } = data;
   const [checkedValue, setCheckedValue] = useState(false);
   const isFirstRender = useRef(true);
+  const {
+    theme
+  } = useEditorContext();
+  const classes = useCommonStyle(theme);
   useEffect(() => {
     if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
       setCheckedValue(true);
@@ -35,10 +42,22 @@ const SelectBox = props => {
       marginBottom: "12px"
     },
     children: [/*#__PURE__*/_jsx(FormControlLabel, {
+      className: "ccheckbox-primary",
+      sx: {
+        ...classes.customCheckBox
+      },
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: value,
         checked: checkedValue,
-        onChange: handleChange
+        onChange: handleChange,
+        className: "checkBox",
+        checkedIcon: /*#__PURE__*/_jsx(IconButton, {
+          className: "checkedIcon",
+          children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
+        }),
+        icon: /*#__PURE__*/_jsx(IconButton, {
+          className: "unCheckedIcon"
+        })
       }),
       label: placeholder
     }), /*#__PURE__*/_jsx(FormHelperText, {

package/dist/Editor/common/StyleBuilder/fieldTypes/text.js

@@ -11,13 +11,21 @@ const Text = props => {
   const {
     key,
     placeholder,
-    width
+    width,
+    required = false
   } = data;
   const [value, setValue] = useState(pro_value);
+  const [error, setError] = useState(false);
   const handleChange = e => {
-    setValue(e.target.value);
+    const newValue = e.target.value;
+    setValue(newValue);
+    if (required && !newValue.trim()) {
+      setError(true);
+    } else {
+      setError(false);
+    }
     onChange({
-      [key]: e.target.value
+      [key]: newValue
     });
   };
   return /*#__PURE__*/_jsxs(Grid, {
@@ -39,7 +47,10 @@ const Text = props => {
       value: value,
       onChange: handleChange,
       size: "small",
-      fullWidth: true
+      fullWidth: true,
+      required: required,
+      error: error,
+      helperText: error ? 'This field is required' : ''
     })]
   });
 };

package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js

@@ -5,6 +5,7 @@ import useWindowResize from "../../../hooks/useWindowResize";
 import { useEditorContext } from "../../../hooks/useMouseMove";
 import FontFamilyAutocomplete from "../../../Toolbar/FormatTools/FontFamilyAutocomplete";
 import { useSlate } from "slate-react";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 
 // hideMetaDataOptions -- pass true to hide metadata option in select field 
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -90,6 +91,12 @@ const TextOptions = props => {
             marginBottom: "16px"
           },
           sx: classes.textOptions,
+          IconComponent: KeyboardArrowDownRoundedIcon,
+          MenuProps: {
+            sx: {
+              ...classes.textOptionsList
+            }
+          },
           children: updatedOption?.map((m, i) => {
             return m?.value === "listSubHeader" ? /*#__PURE__*/_jsx(ListSubheader, {
               children: m?.label

package/dist/Editor/common/StyleBuilder/index.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { DialogTitle, DialogContent, DialogActions, Button, Grid, IconButton, Typography, Drawer, SwipeableDrawer, Accordion, AccordionSummary, AccordionDetails, createTheme } from "@mui/material";
 import FieldMap from "./fieldTypes";
-import CloseIcon from "@mui/icons-material/Close";
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { ThemeProvider } from "@mui/material/styles";
-import { ExpandMoreOutlined, ExpandMoreSharp } from "@mui/icons-material";
+import { ExpandMoreSharp } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -69,6 +69,7 @@ const StyleBuilder = props => {
   const isMobile = customProps?.isMobile || false;
   const [elementProps, setElementProps] = useState(element);
   const [tab] = useState(renderTabs[0]?.value);
+  const [saveDisable, setSaveDisable] = useState(false);
   const tabVal = renderTabs?.find(f => f.value === tab);
   const {
     needActions = true
@@ -123,12 +124,17 @@ const StyleBuilder = props => {
       field_type: data?.element
     });
     if (data?.hasOwnProperty("name")) {
-      setElementProps({
-        ...elementProps,
-        ...data,
-        key: data?.name,
-        label: data?.name
-      });
+      if (data?.name === '') {
+        setSaveDisable(true);
+      } else {
+        setSaveDisable(false);
+        setElementProps({
+          ...elementProps,
+          ...data,
+          key: data?.name,
+          label: data?.name
+        });
+      }
     }
   };
   const handleSave = () => {
@@ -143,7 +149,8 @@ const StyleBuilder = props => {
       xs: 12,
       sx: {
         p: 2,
-        width: isMobile ? "100%" : "350px"
+        width: isMobile ? "100%" : "312px",
+        ...classes.pageSettingPopUpRoot
       },
       children: [/*#__PURE__*/_jsx(DialogTitle, {
         sx: {
@@ -166,7 +173,7 @@ const StyleBuilder = props => {
             children: /*#__PURE__*/_jsx(IconButton, {
               onClick: onClose,
               className: "close-popupbtn",
-              children: /*#__PURE__*/_jsx(CloseIcon, {})
+              children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
             })
           })]
         })
@@ -238,6 +245,7 @@ const StyleBuilder = props => {
           children: "Delete"
         }) : null, /*#__PURE__*/_jsx(Button, {
           onClick: handleSave,
+          disabled: saveDisable,
           className: "primaryBtn",
           children: "Save"
         })]

package/dist/Editor/common/ToolbarIcon.js

@@ -11,6 +11,7 @@ const ToolbarIcon = props => {
     style,
     icoBtnType
   } = props;
+  console.log("Props:", props);
   const renderIconText = () => {
     if (icoBtnType === "mini") {
       return /*#__PURE__*/_jsx("span", {
@@ -39,7 +40,7 @@ const ToolbarIcon = props => {
     title: title,
     arrow: true,
     children: /*#__PURE__*/_jsxs(IconButton, {
-      className: `${className} ${icoBtnType}`,
+      className: `${className} ${icoBtnType} accordionIcon`,
       onClick: onClick,
       style: style,
       children: [icon, renderIconText()]

package/dist/Editor/common/Uploader.js

@@ -83,55 +83,57 @@ const Uploader = props => {
         });
     }
   };
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    sx: classes.uploadContainer,
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
       children: uploading ? "Uploading..." : ""
     }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      className: "btn--wrpr",
-      style: {
-        ...getBackground()
-      },
-      sx: classes.uploadField,
-      children: !uploading ? /*#__PURE__*/_jsx(Grid, {
-        className: "uploadImageSection",
-        children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
-          className: "uploadImageText",
-          sx: {
-            background: `${theme?.palette?.editor?.inputFieldBgColor}`,
-            border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
-          },
-          children: /*#__PURE__*/_jsxs(Button, {
-            component: "label",
-            variant: "text",
-            style: {
-              background: "none",
-              width: "100%"
+      container: true,
+      sx: classes.uploadContainer,
+      children: /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        className: "btn--wrpr",
+        style: {
+          ...getBackground()
+        },
+        sx: classes.uploadField,
+        children: !uploading ? /*#__PURE__*/_jsx(Grid, {
+          className: "uploadImageSection",
+          children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
+            className: "uploadImageText",
+            sx: {
+              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
             },
-            sx: classes.uploadIcon,
-            children: [/*#__PURE__*/_jsx("input", {
-              type: "file",
-              style: {
-                opacity: 0,
-                width: "0px"
-              },
-              onChange: handleChange
-            }), /*#__PURE__*/_jsx(Icon, {
-              icon: "fileUpload"
-            }), /*#__PURE__*/_jsxs("span", {
+            children: /*#__PURE__*/_jsxs(Button, {
+              component: "label",
+              variant: "text",
               style: {
-                paddingLeft: "8px"
+                background: "none",
+                width: "100%"
               },
-              children: ["upload ", title || "image"]
-            })]
+              sx: classes.uploadIcon,
+              children: [/*#__PURE__*/_jsx("input", {
+                type: "file",
+                style: {
+                  opacity: 0,
+                  width: "0px"
+                },
+                onChange: handleChange
+              }), /*#__PURE__*/_jsx(Icon, {
+                icon: "fileUpload"
+              }), /*#__PURE__*/_jsxs("span", {
+                style: {
+                  paddingLeft: "8px"
+                },
+                children: ["upload ", title || "image"]
+              })]
+            })
           })
-        })
-      }) : null
+        }) : null
+      })
     })]
   });
 };