@flozy/editor 10.2.4 → 10.2.6

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

@@ -1,36 +1,71 @@
-const ButtonNavSettingsStyles = theme => ({
-  dialogContainer: {
-    "& .MuiDialogContent-root": {
-      padding: "0px 16px"
-    },
-    "& .MuiDialogActions-root": {
-      padding: "10px"
+const ButtonNavSettingsStyles = theme => {
+  const {
+    editor,
+    grey
+  } = theme?.palette || {};
+  const {
+    borderColor,
+    background,
+    textColor,
+    activeColor,
+    miniToolBarBackground
+  } = editor || {};
+  const commonContainerStyle = {
+    backgroundColor: miniToolBarBackground,
+    "& .MuiTypography-root": {
+      color: textColor
     },
-    "& .MuiTypography-h6": {
+    "& .link-settings-title": {
+      fontSize: "18px",
+      padding: "12px 0px",
       fontWeight: 600,
-      fontSize: "16px",
-      paddingRight: "20px"
-    },
-    "& .MuiGrid-container": {
-      marginTop: "0px"
-    },
-    "& .MuiGrid-item": {
-      padding: "14px"
-    },
-    "& .MuiPaper-root": {
-      padding: "10px !important",
-      borderRadius: "20px !important",
-      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
-      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      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": {
-        color: theme?.palette?.editor?.textColor
+        fontSize: "12px !important",
+        fontWeight: 500,
+        fontFamily: "'Inter',sans-serif"
       },
-      "& .MuiSvgIcon-root": {
+      "& .Mui-selected": {
+        background: theme?.palette?.editor?.menuOptionSelectedOption,
         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"
       },
-      "& .MuiFormLabel-root": {
-        color: theme?.palette?.editor?.textColor,
-        backgroundColor: "transparent"
+      "& input": {
+        border: `1px solid transparent`,
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "8px",
+        color: theme?.palette?.editor?.textColor
+      }
+    },
+    "& .MuiSvgIcon-root": {
+      color: textColor
+    },
+    "& .MuiFormLabel-root": {
+      color: textColor,
+      backgroundColor: background
+    },
+    "& .Mui-checked": {
+      "& .MuiSvgIcon-root": {
+        color: `${activeColor} !important`
       }
     },
     "& .dialog-title": {
@@ -60,47 +95,6 @@ const ButtonNavSettingsStyles = theme => ({
           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": {
@@ -109,194 +103,120 @@ const ButtonNavSettingsStyles = theme => ({
       fontFamily: "'Inter',sans-serif",
       color: theme?.palette?.editor?.textColor
     }
-  },
-  customRadioBtn: {
-    "& .Mui-checked": {
-      "& span": {
-        "& .MuiSvgIcon-root": {
-          color: `#2563EB !important`
-        }
+  };
+  return {
+    dialogContainer: {
+      "& .MuiDialogContent-root": {
+        margin: "0px 20px",
+        padding: "0px 4px",
+        borderTop: `1px solid ${borderColor}`,
+        borderBottom: `1px solid ${borderColor}`
+      },
+      "& .MuiDialogActions-root": {
+        padding: "10px"
+      },
+      "& .MuiTypography-h6": {
+        fontWeight: 600,
+        fontSize: "20px",
+        paddingRight: "20px"
+      },
+      "& .MuiGrid-container": {
+        marginTop: "0px"
+      },
+      "& .MuiGrid-item": {
+        padding: "14px"
+      },
+      "& .MuiPaper-root": {
+        padding: "10px !important",
+        borderRadius: "20px !important",
+        backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+        border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+        ...commonContainerStyle
       }
     },
-    "& .MuiRadio-root": {
-      "& span": {
-        "& .MuiSvgIcon-root": {
-          color: `${theme?.palette?.editor?.radioBtnBorder}`
+    swipeableDrawerContainer: commonContainerStyle,
+    customSelect: {
+      zIndex: "1302 !important",
+      "& .MuiPopover-paper": {
+        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
         }
       }
-    }
-  },
-  customSelect: {
-    zIndex: "1302 !important",
-    "& .MuiPopover-paper": {
-      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 !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": {
+    },
+    saveBtn: {
       color: "#fff !important",
-      background: "#2563EB !important"
-    }
-  },
-  closeBtn: {
-    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 ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
-      backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
-      color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`
-    }
-  },
-  closeIcon: {
-    background: theme?.palette?.editor?.closeButtonBackground,
-    borderRadius: "8px",
-    padding: "2px",
-    marginRight: "8px",
-    "& svg": {
-      fill: theme?.palette?.editor?.closeButtonSvgStroke
-    }
-  },
-  gridDivider: {
-    borderRight: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
-    "& .MuiTypography-root": {
-      color: "#64748B !important",
-      fontFamily: "'Inter',sans-serif",
-      fontWeight: 500,
-      fontSize: "16px"
-    }
-  },
-  mobileActionBtns: {
-    display: "flex",
-    justifyContent: "flex-end",
-    gap: "8px",
-    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`
+      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 !important",
+        background: "#2563EB !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
+    closeBtn: {
+      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 ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
+        backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+        color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`
+      }
     },
-    "& .MuiInputBase-root, fieldset": {
-      background: theme?.palette?.editor?.inputFieldBgColor,
+    closeIcon: {
+      background: theme?.palette?.editor?.closeButtonBackground,
       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
+      padding: "2px",
+      marginRight: "8px",
+      "& svg": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
       }
     },
-    "& .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}`
-        }
+    gridDivider: {
+      borderRight: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      "& .MuiTypography-root": {
+        color: "#64748B !important",
+        fontFamily: "'Inter',sans-serif",
+        fontWeight: 500,
+        fontSize: "16px"
       }
     },
-    "& .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"
-      }
+    mobileActionBtns: {
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: "8px",
+      paddingTop: "14px",
+      marginTop: "14px",
+      borderTop: `1px solid ${grey[300]}`
     }
-  }
-});
+  };
+};
 export default ButtonNavSettingsStyles;

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

@@ -0,0 +1,48 @@
+import { RadioGroup as Core, Radio, FormControl, FormControlLabel, IconButton, Typography } from "@mui/material";
+import RadioGroupStyles from "./styles";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { CheckedRadioIcon } from "../iconListV2";
+import { jsx as _jsx } from "react/jsx-runtime";
+function RadioGroup(props) {
+  const {
+    value,
+    options,
+    onChange,
+    label,
+    labelProps,
+    radioProps,
+    translation,
+    ...rest
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = RadioGroupStyles(theme);
+  return /*#__PURE__*/_jsx(FormControl, {
+    children: /*#__PURE__*/_jsx(Core, {
+      value: value,
+      sx: classes.customRadioGroup,
+      ...rest,
+      children: options?.map((option, i) => {
+        return /*#__PURE__*/_jsx(FormControlLabel, {
+          value: option.value,
+          control: /*#__PURE__*/_jsx(Radio, {
+            checkedIcon: /*#__PURE__*/_jsx(CheckedRadioIcon, {}),
+            icon: /*#__PURE__*/_jsx(IconButton, {
+              className: "unCheckedIcon"
+            }),
+            ...(radioProps || {})
+          }),
+          label: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            sx: classes.label,
+            ...(labelProps || {}),
+            children: translation(option.label)
+          }),
+          onChange: () => onChange(option)
+        }, i);
+      })
+    })
+  });
+}
+export default RadioGroup;

package/dist/Editor/common/RadioGroup/styles.js

@@ -0,0 +1,29 @@
+const SelectStyles = (theme = {}) => {
+  const {
+    buttonBorder3,
+    checkedIconBg,
+    tv_text,
+    inputFieldBgColor
+  } = theme?.palette?.editor || {};
+  return {
+    customRadioGroup: {
+      gap: "4px",
+      "& button": {
+        border: `1px solid ${buttonBorder3}`
+      },
+      "& .unCheckedIcon": {
+        background: checkedIconBg,
+        width: "17px",
+        height: "17px",
+        padding: "0px"
+      },
+      "& .radio-icon-path": {
+        fill: inputFieldBgColor
+      }
+    },
+    label: {
+      color: `${tv_text} !important`
+    }
+  };
+};
+export default SelectStyles;

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

@@ -1,12 +1,11 @@
 import { Button, IconButton } from "@mui/material";
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-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 AddRoundedIcon from "@mui/icons-material/AddRounded";
+import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
+import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
 import LinkIcon from "./Icons/LinkIcon";
 import FilterFramesIcon from "@mui/icons-material/FilterFrames";
 import { GridAddSectionIcon, SignatureIcon, WorkflowIcon } from "../../iconslist";

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

@@ -140,7 +140,6 @@ const useElementSettingsStyle = theme => ({
         }
       },
       "& .popUpHeader": {
-        fontSize: "16px",
         fontFamily: "'Inter',sans-serif",
         fontWeight: "700",
         fontSize: "16px",

package/dist/Editor/common/RnD/OptionsPopup/style.js

@@ -15,7 +15,6 @@ const useOptionsPopupStyle = ({
       background: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .sectionOptionTitle": {
-      fontSize: "16px",
       fontFamily: "'Inter',sans-serif",
       fontWeight: "700",
       fontSize: "16px",

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

@@ -1,22 +1,59 @@
-import { Select as Core } from "@mui/material";
+import { Select as Core, MenuItem, Typography } from "@mui/material";
 import SelectStyles from "./styles";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function Select(props) {
   const {
     children,
+    value,
+    onChange,
+    options,
+    label,
+    labelProps,
+    showDefault,
+    translation,
     ...rest
   } = props;
   const {
     theme
   } = useEditorContext();
   const classes = SelectStyles(theme);
-  return /*#__PURE__*/_jsx(Core, {
-    MenuProps: classes.MenuProps,
-    IconComponent: KeyboardArrowDownRoundedIcon,
-    ...rest,
-    children: children
+  const menuOptions = showDefault ? [{
+    label: "None",
+    value: ""
+  }, ...(options || [])] : options;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [label ? /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      sx: {
+        paddingBottom: "4px"
+      },
+      ...(labelProps || {}),
+      children: label
+    }) : null, /*#__PURE__*/_jsx(Core, {
+      size: "small",
+      fullWidth: true,
+      defaultValue: "",
+      value: value || "",
+      onChange: onChange,
+      sx: classes.select,
+      MenuProps: classes.MenuProps,
+      IconComponent: KeyboardArrowDownRoundedIcon,
+      displayEmpty: true,
+      ...rest,
+      children: menuOptions?.map((option, i) => {
+        return /*#__PURE__*/_jsx(MenuItem, {
+          value: option.value,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            children: translation(option.label)
+          })
+        }, i);
+      })
+    })]
   });
 }
 export default Select;

package/dist/Editor/common/Select/styles.js

@@ -1,16 +1,44 @@
 const SelectStyles = (theme = {}) => {
   const {
     textColor,
-    background
+    textWeightPopUpBackground,
+    menuOptionSelectedOption
   } = theme?.palette?.editor || {};
   return {
     MenuProps: {
+      sx: {
+        zIndex: "1302 !important"
+      },
       PaperProps: {
         sx: {
+          background: textWeightPopUpBackground,
           color: textColor,
-          background
+          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: menuOptionSelectedOption,
+            color: textColor
+          }
         }
       }
+    },
+    select: {
+      "& .MuiSelect-icon": {
+        color: "#64748B !important"
+      }
     }
   };
 };