@flozy/editor 10.1.1 → 10.1.3

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

@@ -4,8 +4,8 @@ import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import IconButton from "@mui/material/IconButton";
-import CloseIcon from "@mui/icons-material/Close";
-import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography } from "@mui/material";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography, useMediaQuery } from "@mui/material";
 import { useState } from "react";
 import LinkSettingsStyles from "./style";
 import { getNavOptions } from "./navOptions";
@@ -43,10 +43,10 @@ export default function LinkSettings(props) {
     allowTrigger
   } = props;
   const {
-    isMobile,
     tagName,
     translation
   } = customProps;
+  const isMobile = useMediaQuery('(max-width: 899px)');
   const navOptions = getNavOptions(customProps.hideTools, tagName, allowTrigger);
   const classes = LinkSettingsStyles(theme);
   const [nav, setNav] = useState(getNav(navType, navOptions));
@@ -64,66 +64,70 @@ export default function LinkSettings(props) {
     });
   };
   if (isMobile) {
-    return /*#__PURE__*/_jsxs(SwipeableDrawer, {
+    return /*#__PURE__*/_jsx(SwipeableDrawer, {
       open: true,
       onClose: handleClose,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        gutterBottom: true,
-        sx: {
-          fontWeight: 600
-        },
-        children: translation("dialogueTitle")
-      }), /*#__PURE__*/_jsx(Select, {
-        size: "small",
-        fullWidth: true,
-        value: nav?.value,
-        onChange: e => {
-          const {
-            value
-          } = e.target;
-          const selected = getNav(value, navOptions);
-          setNav(selected);
-          setNavValue("");
-        },
-        displayEmpty: true,
-        MenuProps: {
-          sx: classes.customSelect
-        },
-        children: navOptions.map((navOption, i) => {
-          return /*#__PURE__*/_jsx(MenuItem, {
-            value: navOption.value,
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "body2",
-              children: translation(navOption.label)
-            })
-          }, i);
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        sx: {
-          paddingTop: "14px"
-        },
-        children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
-          placeholder: translation(nav?.placeholder),
-          nav: nav,
-          onChange: onChange,
-          value: navValue,
-          openInNewTab: openInNewTab,
-          onNewTabChange: () => setOpenInNewTab(prev => !prev),
-          services: customProps.services,
-          classes: classes,
-          translation: translation
-        })
-      }), /*#__PURE__*/_jsx(Box, {
-        component: "div",
-        sx: classes.mobileActionBtns,
-        children: /*#__PURE__*/_jsx(ActionsButtons, {
-          classes: classes,
-          onCancel: handleClose,
-          onSave: onSubmit,
-          translation: translation
-        })
-      })]
+      children: /*#__PURE__*/_jsxs(Grid, {
+        sx: classes.drawerContainer,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "subtitle1",
+          gutterBottom: true,
+          sx: {
+            fontWeight: 600
+          },
+          className: "link-settings-title",
+          children: translation("dialogueTitle")
+        }), /*#__PURE__*/_jsx(Select, {
+          size: "small",
+          fullWidth: true,
+          value: nav?.value,
+          onChange: e => {
+            const {
+              value
+            } = e.target;
+            const selected = getNav(value, navOptions);
+            setNav(selected);
+            setNavValue("");
+          },
+          displayEmpty: true,
+          MenuProps: {
+            sx: classes.customSelect
+          },
+          children: navOptions.map((navOption, i) => {
+            return /*#__PURE__*/_jsx(MenuItem, {
+              value: navOption.value,
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                children: translation(navOption.label)
+              })
+            }, i);
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            paddingTop: "14px"
+          },
+          children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
+            placeholder: translation(nav?.placeholder),
+            nav: nav,
+            onChange: onChange,
+            value: navValue,
+            openInNewTab: openInNewTab,
+            onNewTabChange: () => setOpenInNewTab(prev => !prev),
+            services: customProps.services,
+            classes: classes,
+            translation: translation
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "div",
+          sx: classes.mobileActionBtns,
+          children: /*#__PURE__*/_jsx(ActionsButtons, {
+            classes: classes,
+            onCancel: handleClose,
+            onSave: onSubmit,
+            translation: translation
+          })
+        })]
+      })
     });
   } else {
     return /*#__PURE__*/_jsxs(Dialog, {
@@ -132,15 +136,25 @@ export default function LinkSettings(props) {
       sx: classes.dialogContainer,
       fullWidth: true,
       maxWidth: "sm",
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: translation("dialogueTitle")
-      }), /*#__PURE__*/_jsx(IconButton, {
-        "aria-label": "close",
-        onClick: handleClose,
-        sx: classes.closeIcon,
-        children: /*#__PURE__*/_jsx(CloseIcon, {})
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        direction: "row",
+        sx: {
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        className: "dialog-title",
+        children: [/*#__PURE__*/_jsx(DialogTitle, {
+          children: translation("dialogueTitle")
+        }), /*#__PURE__*/_jsx(IconButton, {
+          "aria-label": "close",
+          onClick: handleClose,
+          sx: classes.closeIcon,
+          children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
+        })]
       }), /*#__PURE__*/_jsx(DialogContent, {
         dividers: true,
+        className: "link-settings-content",
         children: /*#__PURE__*/_jsxs(Grid, {
           container: true,
           spacing: 2,
@@ -148,7 +162,9 @@ export default function LinkSettings(props) {
             item: true,
             xs: 6,
             sx: classes.gridDivider,
+            className: "radioBtnGrp",
             children: /*#__PURE__*/_jsx(FormControl, {
+              sx: classes.customRadioBtn,
               children: /*#__PURE__*/_jsx(RadioGroup, {
                 value: nav?.value,
                 children: navOptions?.map((navOption, i) => {

package/dist/Editor/common/LinkSettings/style.js

@@ -1,7 +1,7 @@
 const ButtonNavSettingsStyles = theme => ({
   dialogContainer: {
     "& .MuiDialogContent-root": {
-      padding: "0px 20px"
+      padding: "0px 16px"
     },
     "& .MuiDialogActions-root": {
       padding: "10px"
@@ -18,62 +18,187 @@ const ButtonNavSettingsStyles = theme => ({
       padding: "14px"
     },
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+      padding: "10px !important",
+      borderRadius: "20px !important",
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
       "& .MuiTypography-root": {
         color: theme?.palette?.editor?.textColor
       },
-      "& .MuiInputBase-root": {
-        border: `1px solid ${theme?.palette?.editor?.textColor}`,
-        color: theme?.palette?.editor?.textColor
-      },
       "& .MuiSvgIcon-root": {
         color: theme?.palette?.editor?.textColor
       },
       "& .MuiFormLabel-root": {
         color: theme?.palette?.editor?.textColor,
-        backgroundColor: theme?.palette?.editor?.background
+        backgroundColor: "transparent"
+      }
+    },
+    "& .dialog-title": {
+      "& .MuiTypography-root": {
+        fontSize: "18px",
+        padding: "12px",
+        fontWeight: 600
+      }
+    },
+    "& .link-settings-content": {
+      margin: "0px 10px",
+      borderTop: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      borderBottom: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      overflow: "hidden !important",
+      "& .MuiInputBase-root, fieldset": {
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "8px",
+        border: "unset",
+        "& fieldset": {
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+          background: "transparent",
+          borderRadius: "8px"
+        },
+        "& input": {
+          border: `1px solid transparent`,
+          background: theme?.palette?.editor?.inputFieldBgColor,
+          borderRadius: "8px",
+          color: theme?.palette?.editor?.textColor
+        }
+      },
+      "& .radioBtnGrp": {
+        paddingRight: "0px",
+        paddingLeft: "0px"
+      }
+    },
+    "& .MuiFormControlLabel-root": {
+      "& .MuiCheckbox-root": {
+        "& svg": {
+          color: `${theme?.palette?.editor?.radioBtnBorder}`
+        }
+      }
+    },
+    "& .ccheckbox-primary": {
+      padding: "0px",
+      "& .MuiCheckbox-root": {
+        padding: "8px 8px 8px 10px",
+        "&:hover": {
+          background: "unset !important"
+        }
+      },
+      "& button": {
+        width: "18px !important",
+        height: "18px !important",
+        borderRadius: "3px",
+        border: `1px solid ${theme?.palette?.editor?.buttonBorder3}`,
+        "& svg": {
+          width: "14px",
+          height: "14px"
+        }
+      },
+      "& .checkedIcon": {
+        background: "#2563EB",
+        borderColor: "#2563EB",
+        padding: "0px"
+      },
+      "& .unCheckedIcon": {
+        background: theme?.palette?.editor?.checkedIconBg
+      },
+      "& p": {
+        margin: "0px !important"
+      }
+    },
+    "& .trigger-text": {
+      fontSize: "14px !important",
+      fontWeight: 400,
+      fontFamily: "'Inter',sans-serif",
+      color: theme?.palette?.editor?.textColor
+    }
+  },
+  customRadioBtn: {
+    "& .Mui-checked": {
+      "& span": {
+        "& .MuiSvgIcon-root": {
+          color: `#2563EB !important`
+        }
+      }
+    },
+    "& .MuiRadio-root": {
+      "& span": {
+        "& .MuiSvgIcon-root": {
+          color: `${theme?.palette?.editor?.radioBtnBorder}`
+        }
       }
     }
   },
   customSelect: {
     zIndex: "1302 !important",
     "& .MuiPopover-paper": {
-      background: theme?.palette?.editor?.miniToolBarBackground,
-      color: theme?.palette?.editor?.textColor
+      background: theme?.palette?.editor?.textWeightPopUpBackground,
+      color: theme?.palette?.editor?.textColor,
+      borderRadius: "8px",
+      marginTop: "2px",
+      "& li": {
+        padding: "6px 16px",
+        margin: "5px !important",
+        borderRadius: "4px !important"
+      },
+      "& .MuiList-root": {
+        padding: "0px"
+      },
+      "& .MuiTypography-root": {
+        fontSize: "12px !important",
+        fontWeight: 500,
+        fontFamily: "'Inter',sans-serif"
+      },
+      "& .Mui-selected": {
+        background: theme?.palette?.editor?.menuOptionSelectedOption,
+        color: theme?.palette?.editor?.textColor
+      }
     }
   },
   saveBtn: {
-    color: "#fff",
-    background: "#2563EB",
-    fontSize: "14px",
-    fontWeight: 500,
-    padding: "4px 24px",
-    textTransform: "none",
+    color: "#fff !important",
+    background: "#2563EB !important",
+    fontSize: "14px !important",
+    fontWeight: "700 !important",
+    padding: "8px 24px !important",
+    textTransform: "none !important",
+    borderRadius: "8px !important",
+    fontFamily: "'Inter',sans-serif !important",
     "&:hover": {
-      color: "#fff",
-      background: "#2563EB"
+      color: "#fff !important",
+      background: "#2563EB !important"
     }
   },
   closeBtn: {
-    backgroundColor: "#F4F6F9",
-    color: "#64748B",
-    fontSize: "14px",
-    fontWeight: 500,
-    padding: "4px 22px",
-    textTransform: "none",
-    border: "1px solid #D8DDE1",
+    backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+    color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`,
+    fontSize: "14px !important",
+    fontWeight: "700 !important",
+    padding: "8px 22px !important",
+    textTransform: "none !important",
+    border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
+    borderRadius: "8px !important",
+    fontFamily: "'Inter',sans-serif !important",
     "&:hover": {
-      border: "1px solid #64748B"
+      border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
+      backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+      color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`
     }
   },
   closeIcon: {
-    position: "absolute",
-    right: 8,
-    top: 8,
-    color: theme?.palette?.grey[500]
+    background: theme?.palette?.editor?.closeButtonBackground,
+    borderRadius: "8px",
+    padding: "2px",
+    marginRight: "8px",
+    "& svg": {
+      fill: theme?.palette?.editor?.closeButtonSvgStroke
+    }
   },
   gridDivider: {
-    borderRight: "1px solid rgba(0, 0, 0, 0.12)"
+    borderRight: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+    "& .MuiTypography-root": {
+      color: "#64748B !important",
+      fontFamily: "'Inter',sans-serif",
+      fontWeight: 500,
+      fontSize: "16px"
+    }
   },
   mobileActionBtns: {
     display: "flex",
@@ -82,6 +207,96 @@ const ButtonNavSettingsStyles = theme => ({
     paddingTop: "14px",
     marginTop: "14px",
     borderTop: `1px solid ${theme?.palette?.grey[300]}`
+  },
+  customAutoComplete: {
+    "& .MuiAutocomplete-listbox": {
+      padding: "0px",
+      "& li": {
+        margin: "5px",
+        borderRadius: "8px",
+        color: theme?.palette?.editor?.menuOptionTextColor,
+        fontSize: "14px",
+        padding: "8px 12px",
+        '&[aria-selected="true"]': {
+          backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
+        }
+      },
+      "& .Mui-selected": {
+        background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
+      }
+    },
+    "& .MuiPaper-root": {
+      borderRadius: "8px",
+      background: theme?.palette?.editor?.textWeightPopUpBackground
+    }
+  },
+  drawerContainer: {
+    "& .link-settings-title": {
+      fontSize: "18px",
+      padding: "12px 0px",
+      fontWeight: 600,
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiInputBase-root, fieldset": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderRadius: "8px",
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
+      "& fieldset": {
+        // border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        background: "transparent",
+        borderRadius: "8px"
+      },
+      "& input": {
+        border: `1px solid transparent`,
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "8px",
+        color: theme?.palette?.editor?.textColor
+      }
+    },
+    "& .MuiFormLabel-root": {
+      color: theme?.palette?.editor?.textColor,
+      backgroundColor: "transparent !important"
+    },
+    "& .MuiTypography-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiFormControlLabel-root": {
+      "& .MuiCheckbox-root": {
+        "& svg": {
+          color: `${theme?.palette?.editor?.radioBtnBorder}`
+        }
+      }
+    },
+    "& .ccheckbox-primary": {
+      padding: "0px",
+      "& .MuiCheckbox-root": {
+        padding: "8px 8px 8px 10px",
+        "&:hover": {
+          background: "unset !important"
+        }
+      },
+      "& button": {
+        width: "18px !important",
+        height: "18px !important",
+        borderRadius: "3px",
+        border: `1px solid ${theme?.palette?.editor?.buttonBorder3}`,
+        "& svg": {
+          width: "14px",
+          height: "14px"
+        }
+      },
+      "& .checkedIcon": {
+        background: "#2563EB",
+        borderColor: "#2563EB",
+        padding: "0px"
+      },
+      "& .unCheckedIcon": {
+        background: theme?.palette?.editor?.checkedIconBg
+      },
+      "& p": {
+        margin: "0px !important"
+      }
+    }
   }
 });
 export default ButtonNavSettingsStyles;

package/dist/Editor/common/RnD/ElementOptions/Actions.js

@@ -1,19 +1,18 @@
 import { Button, IconButton } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
-import SettingsIcon from "@mui/icons-material/Settings";
-import EditIcon from "@mui/icons-material/Edit";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-import AddIcon from "@mui/icons-material/Add";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
+import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
 import SaveIcon from "@mui/icons-material/Save";
 import LinkIcon from "./Icons/LinkIcon";
-import CodeIcon from "@mui/icons-material/Code";
 import FilterFramesIcon from "@mui/icons-material/FilterFrames";
 import { GridAddSectionIcon, SignatureIcon, WorkflowIcon } from "../../iconslist";
 import Delete from "@mui/icons-material/Delete";
+import SettingsIcon from "../../../assets/svg/SettingsIcon";
+import { CodeElementIcon, PenIcon, SaveTemplIcon } from "../../iconListV2";
 const Actions = {
   ai: {
     type: "ai",
@@ -30,7 +29,7 @@ const Actions = {
   addElementInSection: {
     type: "addElement",
     Button: IconButton,
-    Icon: AddIcon,
+    Icon: AddRoundedIcon,
     title: "Add Element"
   },
   settings: {
@@ -74,25 +73,25 @@ const Actions = {
   edit: {
     type: 2,
     Button: IconButton,
-    Icon: EditIcon,
+    Icon: PenIcon,
     title: "Edit"
   },
   close: {
     type: 3,
     Button: IconButton,
-    Icon: CloseIcon,
+    Icon: CloseRoundedIcon,
     title: "close"
   },
   moveUp: {
     type: "moveUp",
     Button: IconButton,
-    Icon: ArrowUpwardIcon,
+    Icon: ArrowUpwardRoundedIcon,
     title: "Move Up"
   },
   moveDown: {
     type: "moveDown",
     Button: IconButton,
-    Icon: ArrowDownwardIcon,
+    Icon: ArrowDownwardRoundedIcon,
     title: "Move Down"
   },
   addFormField: {
@@ -110,13 +109,13 @@ const Actions = {
   embedScript: {
     type: "addEmbedScript",
     Button: IconButton,
-    Icon: CodeIcon,
+    Icon: CodeElementIcon,
     title: "Embed Code"
   },
   saveAsTemplate: {
     type: "saveAsTemplate",
     Button: IconButton,
-    Icon: SaveIcon,
+    Icon: SaveTemplIcon,
     title: "Save As Template"
   },
   imageFrame: {

package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js

@@ -8,6 +8,7 @@ const LinkIcon = () => {
     height: "18",
     viewBox: "0 0 18 18",
     fill: "none",
+    className: "settingsIcon",
     children: [/*#__PURE__*/_jsx("path", {
       d: "M10.1582 7.84185C9.54389 7.22778 8.71084 6.88281 7.84222 6.88281C6.97361 6.88281 6.14055 7.22778 5.52622 7.84185L3.20947 10.1578C2.59513 10.7722 2.25 11.6054 2.25 12.4742C2.25 13.343 2.59513 14.1763 3.20947 14.7906C3.82381 15.4049 4.65704 15.7501 5.52585 15.7501C6.39466 15.7501 7.22788 15.4049 7.84222 14.7906L9.00022 13.6326",
       stroke: "#000000",

package/dist/Editor/common/RnD/ElementOptions/index.js

@@ -65,7 +65,7 @@ const ElementOptions = props => {
       arrow: true,
       children: /*#__PURE__*/_jsx(Button, {
         onClick: handleOptionClick(type),
-        className: enable === type || selectedAction === type ? "active" : "",
+        className: `${enable === type || selectedAction === type || Actions[action]?.type === menu?.type ? "active" : ""} elementOption`,
         children: Icon ? /*#__PURE__*/_jsx(Icon, {}) : title
       })
     }, `actions_fgele_${type}_${index}`) : null;
@@ -83,7 +83,7 @@ const ElementOptions = props => {
       contentEditable: false,
       disablePortal: false,
       children: /*#__PURE__*/_jsx(Paper, {
-        className: "papper-root",
+        className: "papper-root popUpOptions",
         children: actions.map(renderAction)
       })
     }), open && MenuComp ? /*#__PURE__*/_jsx(OptionsPopup, {

package/dist/Editor/common/RnD/ElementOptions/styles.js

@@ -38,7 +38,7 @@ const useElementOptionsStyle = ({
         color: "#2563EB",
         background: theme?.palette?.editor?.background,
         border: "1px solid #2563EB",
-        boxShadow: "1px 1px 3px #2563EB",
+        boxShadow: theme?.palette?.type === "light" && "1px 1px 3px #2563EB",
         "& .strokePath": {
           stroke: "#2563EB"
         }
@@ -48,6 +48,33 @@ const useElementOptionsStyle = ({
           fill: theme?.palette?.editor?.textColor
         }
       }
+    },
+    "& .popUpOptions": {
+      "& .elementOption": {
+        background: theme?.palette?.editor?.signatureFontBtnBg,
+        border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+        height: "28px",
+        width: "28px",
+        "& svg": {
+          color: theme?.palette?.editor?.closeButtonSvgStroke,
+          width: "20px",
+          height: "20px"
+        },
+        "& .addIconCircle path, & .settingsIcon path, & .commonSvgStyle path": {
+          stroke: theme?.palette?.editor?.closeButtonSvgStroke
+        }
+      },
+      "& .active": {
+        border: "1px solid #2563EB",
+        "& svg": {
+          color: "#2563EB"
+        },
+        "& .settingsIcon": {
+          "& path": {
+            stroke: "#2563EB"
+          }
+        }
+      }
     }
   }
 });