@flozy/editor 5.3.9 → 5.4.0

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

@@ -1,6 +1,7 @@
 import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import Icon from "../../Icon";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -15,7 +16,10 @@ const RenderCard = ({
   return /*#__PURE__*/_jsx(Card, {
     sx: {
       position: 'relative',
-      padding: "10px"
+      padding: "10px",
+      '& .MuiCheckbox-root svg': {
+        fill: 'unset !important'
+      }
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
@@ -81,6 +85,9 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
+  const {
+    theme
+  } = useEditorContext();
   const activeCard = value === selectedCard;
   const handleChange = e => {
     if (selectedCard === data?.value) {
@@ -99,7 +106,8 @@ const CardsMapping = props => {
     sx: {
       marginBottom: "12px",
       "& .MuiPaper-root": {
-        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
+        background: theme?.palette?.editor?.miniToolBarBackground,
+        border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
         borderRadius: "8px",
         boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
       }

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

@@ -16,6 +16,7 @@ const Color = props => {
     hideGradient
   } = data;
   const [recentColors, setRecentColors] = useState({});
+  const getLable = label === 'Text' ? 'Select text color' : label === 'Background' ? 'Select background color' : label;
   useEffect(() => {
     const storedColors = JSON.parse(localStorage.getItem("recentColors"));
     if (storedColors) {
@@ -73,7 +74,7 @@ const Color = props => {
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
       value: value,
-      placeholder: `${label} color code`,
+      placeholder: getLable || `${label} color code`,
       InputLabelProps: {
         shrink: true
       },

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

@@ -73,7 +73,7 @@ const FontSize = props => {
         size: "small",
         inputProps: {
           style: {
-            textAlign: "center",
+            // textAlign: "center", 
             padding: "11px"
           }
         },

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

@@ -91,12 +91,14 @@ const Icons = props => {
         overflowY: "auto",
         paddingTop: "5px"
       },
+      className: "muiIconsListParent",
       children: list.map(m => {
         return /*#__PURE__*/_jsx(Tooltip, {
           title: m,
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onSelectIcon(m),
+            className: "muiIconsList",
             children: /*#__PURE__*/_jsx(MUIIcon, {
               iconName: m,
               props: customProps

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

@@ -18,6 +18,7 @@ import FontSize from "./fontSize";
 import SelectSwitch from "./selectSwitch";
 import CardsMapping from "./card";
 import MetaDataMapping from "./metaDataMapping";
+import LineSpacing from "./lineSpacing";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -38,6 +39,7 @@ const FieldMap = {
   fontSize: FontSize,
   selectSwitch: SelectSwitch,
   card: CardsMapping,
-  metadatamapping: MetaDataMapping
+  metadatamapping: MetaDataMapping,
+  lineSpacing: LineSpacing
 };
 export default FieldMap;

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

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { Grid, Slider, Typography, Box } from "@mui/material";
+import { getBreakPointsValue } from "../../../helper/theme";
+import useWindowResize from "../../../hooks/useWindowResize";
+import { useEditorContext } from "../../../hooks/useMouseMove";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const LineSpacing = props => {
+  const {
+    value: val,
+    data,
+    onChange
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const {
+    key
+  } = data;
+  const [size] = useWindowResize();
+  const pro_value = getBreakPointsValue(val, size?.device);
+  const [value, setValue] = useState(pro_value);
+  let breakpointValue = getBreakPointsValue(val, null);
+  breakpointValue = typeof breakpointValue['lg'] === 'object' ? breakpointValue['lg'] : breakpointValue;
+  useState(() => {
+    setValue(pro_value);
+  }, [pro_value]);
+  const handleChange = e => {
+    onChange({
+      [key]: {
+        ...breakpointValue,
+        [size?.device]: e.target.value
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
+      style: {
+        fontSize: "14px",
+        fontWeight: 500
+      },
+      children: data?.label
+    }), /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      wrap: "nowrap",
+      className: "sld-wrpr",
+      children: [/*#__PURE__*/_jsx(Slider, {
+        className: "spacingSlider",
+        defaultValue: value || 1.43,
+        "aria-label": "Default",
+        valueLabelDisplay: "auto",
+        min: 0.5,
+        max: 3.0,
+        step: 0.1,
+        name: "lineHeight",
+        onChange: handleChange
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "input",
+        sx: {
+          background: theme?.palette?.editor?.background,
+          color: theme?.palette?.editor?.textColor
+        },
+        name: "lineHeight",
+        value: pro_value,
+        className: "sliderInput",
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0",
+        disabled: true,
+        defaultValue: pro_value || 1.43
+      })]
+    })]
+  });
+};
+export default LineSpacing;

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

@@ -53,7 +53,7 @@ export const radiusStyle = {
 export const squreStyle = {
   topLeft: {
     position: "absolute",
-    left: "-35px",
+    left: "-37px",
     top: "50%",
     transform: "translateY(-50%)",
     width: "30px",
@@ -61,7 +61,7 @@ export const squreStyle = {
     margin: "auto",
     // borderTop: `2px solid #2563eb`,
     // borderLeft: `2px solid #2563eb`,
-    border: `none`,
+    // border: `1px solid transparent`,
     // borderBottom: `none`,
     fontSize: "14px",
     textAlign: "center"
@@ -71,13 +71,13 @@ export const squreStyle = {
     // top: "-28px",
     left: "50%",
     transform: "translateX(-50%)",
-    top: "-35px",
+    top: "-37px",
     width: "30px",
     height: "30px",
     // borderTop: `2px solid #2563eb`,
     // borderRight: `2px solid #2563eb`,
-    border: `none`,
-    borderLeft: `none`,
+    // border: `none`,
+    // borderLeft: `none`,
     fontSize: "14px"
   },
   bottomLeft: {
@@ -85,18 +85,18 @@ export const squreStyle = {
     // left: "-25px",
     top: "50%",
     transform: "translateY(-50%)",
-    right: "-35px",
+    right: "-37px",
     width: "30px",
     height: "30px",
     // borderBottom: `2px solid #2563eb`,
     // borderLeft: `2px solid #2563eb`,
-    border: `none`,
-    borderTop: `none`,
+    // border: `none`,
+    // borderTop: `none`,
     fontSize: "14px"
   },
   bottomRight: {
     position: "absolute",
-    bottom: "-35px",
+    bottom: "-37px",
     // right: "-25px",
     left: "50%",
     transform: "translateX(-50%)",
@@ -104,8 +104,8 @@ export const squreStyle = {
     height: "30px",
     // borderBottom: `2px solid #2563eb`,
     // borderRight: `2px solid #2563eb`,
-    border: "none",
-    borderLeft: "none",
+    // border: "none",
+    // borderLeft: "none",
     fontSize: "14px"
   }
 };

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,15 @@ const Text = props => {
       value: value,
       onChange: handleChange,
       size: "small",
-      fullWidth: true
+      fullWidth: true,
+      required: required,
+      error: error,
+      helperText: error ? 'This field is required' : '',
+      sx: {
+        '& .MuiFormHelperText-root': {
+          color: '#d32f2f !important'
+        }
+      }
     })]
   });
 };

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

@@ -5,6 +5,9 @@ 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";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -26,7 +29,8 @@ const TextOptions = props => {
     options,
     renderOption,
     width,
-    webFont = false
+    webFont = false,
+    hideMetaDataOptions = false
   } = data;
   const {
     fontFamilies
@@ -35,7 +39,7 @@ const TextOptions = props => {
   const [size] = useWindowResize();
   const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
   const metaDataMappingOptions = metaMappings?.boards || [];
-  const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
+  const updatedOption = !hideMetaDataOptions && elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : webFont ? fontFamilies?.options : options;
   const handleChange = (e, d) => {
     if (isBreakpoint) {
       onChange({
@@ -87,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