@flozy/editor 1.7.5 → 1.7.7

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Slider } from "@mui/material";
+import { Grid, Slider, Typography } from "@mui/material";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridSize = props => {
@@ -16,26 +16,30 @@ const GridSize = props => {
       [key]: e.target.value
     });
   };
-  return /*#__PURE__*/_jsx(Grid, {
-    container: true,
-    children: /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsxs("label", {
-        style: {
-          marginBottom: "12px",
-          fontWeight: "bold"
-        },
-        children: ["Grid Size: ", value || 12, " "]
-      }), /*#__PURE__*/_jsx(Slider, {
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsxs(Typography, {
+      variant: "body1",
+      color: "primary",
+      sx: {
+        fontSize: "14px",
+        fontWeight: 500,
+        marginBottom: "5px"
+      },
+      children: ["Grid Size: ", value || 12]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "sld-wrpr",
+      children: /*#__PURE__*/_jsx(Slider, {
         defaultValue: 12,
         value: value || 12,
+        className: "spacingSlider",
         step: 1,
         min: 1,
         max: 12,
         onChange: handleChange
-      })]
-    })
+      })
+    })]
   });
 };
 export default GridSize;

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

@@ -3,6 +3,7 @@ import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
 import * as fIcons 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";
 const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
   if (b.indexOf("Outlined") > -1) {
     a.outlined.push(b);
@@ -56,8 +57,7 @@ const Icons = props => {
     });
   };
   const SelectedIcon = value ? fIcons[value] : null;
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,

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

@@ -48,8 +48,8 @@ const MenusArray = props => {
     });
   };
   return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    spacing: 2,
+    item: true,
+    xs: 12,
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,

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

@@ -6,8 +6,8 @@ export const radiusStyle = {
     width: "30px",
     height: "30px",
     margin: "auto",
-    borderTop: `1px solid #64748B`,
-    borderLeft: `1px solid #64748B`,
+    borderTop: `2px solid #2563eb`,
+    borderLeft: `2px solid #2563eb`,
     borderRight: `none`,
     borderBottom: `none`,
     fontSize: "14px",
@@ -19,8 +19,8 @@ export const radiusStyle = {
     right: "-25px",
     width: "30px",
     height: "30px",
-    borderTop: `1px solid #64748B`,
-    borderRight: `1px solid #64748B`,
+    borderTop: `2px solid #2563eb`,
+    borderRight: `2px solid #2563eb`,
     borderBottom: `none`,
     borderLeft: `none`,
     fontSize: "14px"
@@ -31,8 +31,8 @@ export const radiusStyle = {
     bottom: "-28px",
     width: "30px",
     height: "30px",
-    borderBottom: `1px solid #64748B`,
-    borderLeft: `1px solid #64748B`,
+    borderBottom: `2px solid #2563eb`,
+    borderLeft: `2px solid #2563eb`,
     borderRight: `none`,
     borderTop: `none`,
     fontSize: "14px"
@@ -43,10 +43,69 @@ export const radiusStyle = {
     right: "-25px",
     width: "30px",
     height: "30px",
-    borderBottom: `1px solid #64748B`,
-    borderRight: `1px solid #64748B`,
+    borderBottom: `2px solid #2563eb`,
+    borderRight: `2px solid #2563eb`,
     borderTop: "none",
     borderLeft: "none",
     fontSize: "14px"
   }
+};
+export const squreStyle = {
+  topLeft: {
+    position: "absolute",
+    left: "-35px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "30px",
+    height: "30px",
+    margin: "auto",
+    // borderTop: `2px solid #2563eb`,
+    // borderLeft: `2px solid #2563eb`,
+    border: `none`,
+    // borderBottom: `none`,
+    fontSize: "14px",
+    textAlign: "center"
+  },
+  topRight: {
+    position: "absolute",
+    // top: "-28px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    top: "-35px",
+    width: "30px",
+    height: "30px",
+    // borderTop: `2px solid #2563eb`,
+    // borderRight: `2px solid #2563eb`,
+    border: `none`,
+    borderLeft: `none`,
+    fontSize: "14px"
+  },
+  bottomLeft: {
+    position: "absolute",
+    // left: "-25px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    right: "-35px",
+    width: "30px",
+    height: "30px",
+    // borderBottom: `2px solid #2563eb`,
+    // borderLeft: `2px solid #2563eb`,
+    border: `none`,
+    borderTop: `none`,
+    fontSize: "14px"
+  },
+  bottomRight: {
+    position: "absolute",
+    bottom: "-35px",
+    // right: "-25px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: "30px",
+    height: "30px",
+    // borderBottom: `2px solid #2563eb`,
+    // borderRight: `2px solid #2563eb`,
+    border: "none",
+    borderLeft: "none",
+    fontSize: "14px"
+  }
 };

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

@@ -5,6 +5,7 @@ import { convertBase64 } from "../../../utils/helper";
 import { uploadFile } from "../../../service/fileupload";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const SaveAsTemplate = props => {
   const {
     value,
@@ -71,9 +72,7 @@ const SaveAsTemplate = props => {
     onSaveTemplate(formData, params);
     handleClose();
   };
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    spacing: 2,
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { Grid, TextField, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Text = props => {
   const {
@@ -11,44 +10,34 @@ const Text = props => {
   } = props;
   const {
     key,
-    placeholder
+    placeholder,
+    width
   } = data;
   const handleChange = e => {
     onChange({
       [key]: e.target.value
     });
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      style: {
-        marginBottom: "5px"
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: width || 12,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
+      sx: {
+        fontSize: "14px",
+        fontWeight: "500",
+        marginBottom: "8px"
       },
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: {
-          fontSize: "14px",
-          fontWeight: "500"
-        },
-        children: data?.label
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      style: {
-        marginBottom: "16px"
-      },
-      children: /*#__PURE__*/_jsx(TextField, {
-        name: key,
-        placeholder: placeholder || "",
-        type: "text",
-        value: value,
-        onChange: handleChange,
-        size: "small",
-        fullWidth: true
-      })
+      children: data?.label
+    }), /*#__PURE__*/_jsx(TextField, {
+      name: key,
+      placeholder: placeholder || "",
+      type: "text",
+      value: value,
+      onChange: handleChange,
+      size: "small",
+      fullWidth: true
     })]
   });
 };

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

@@ -18,48 +18,44 @@ const TextAlign = props => {
     });
   };
   return /*#__PURE__*/_jsx(Grid, {
-    container: true,
-    spacing: 1,
-    children: /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        children: [/*#__PURE__*/_jsx(FormLabel, {
-          id: "demo-row-radio-buttons-group-label",
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "body1",
-            color: "primary",
-            style: {
-              fontWeight: 500,
-              fontSize: "14px"
-            },
-            children: "Text Alignment"
-          })
-        }), /*#__PURE__*/_jsxs(RadioGroup, {
-          row: true,
-          "aria-labelledby": "demo-row-radio-buttons-group-label",
-          name: "textAlign",
-          value: value || "left",
-          onChange: handleChange,
-          className: "iconRadioButton",
-          children: [/*#__PURE__*/_jsx(FormControlLabel, {
-            value: "left",
-            className: `${value === "left" && "active"}`,
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(TextLeftAlign, {})
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "center",
-            className: `${value === "center" && "active"}`,
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(TextCenterAlign, {})
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "right",
-            className: `${value === "right" && "active"}`,
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(TextRightAlign, {})
-          })]
+    item: true,
+    xs: 12,
+    children: /*#__PURE__*/_jsxs(FormControl, {
+      children: [/*#__PURE__*/_jsx(FormLabel, {
+        id: "demo-row-radio-buttons-group-label",
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          style: {
+            fontWeight: 500,
+            fontSize: "14px"
+          },
+          children: "Text Alignment"
+        })
+      }), /*#__PURE__*/_jsxs(RadioGroup, {
+        row: true,
+        "aria-labelledby": "demo-row-radio-buttons-group-label",
+        name: "textAlign",
+        value: value || "left",
+        onChange: handleChange,
+        className: "iconRadioButton",
+        children: [/*#__PURE__*/_jsx(FormControlLabel, {
+          value: "left",
+          className: `${value === "left" && "active"}`,
+          control: /*#__PURE__*/_jsx(Radio, {}),
+          label: /*#__PURE__*/_jsx(TextLeftAlign, {})
+        }), /*#__PURE__*/_jsx(FormControlLabel, {
+          value: "center",
+          className: `${value === "center" && "active"}`,
+          control: /*#__PURE__*/_jsx(Radio, {}),
+          label: /*#__PURE__*/_jsx(TextCenterAlign, {})
+        }), /*#__PURE__*/_jsx(FormControlLabel, {
+          value: "right",
+          className: `${value === "right" && "active"}`,
+          control: /*#__PURE__*/_jsx(Radio, {}),
+          label: /*#__PURE__*/_jsx(TextRightAlign, {})
         })]
-      })
+      })]
     })
   });
 };

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { Grid, MenuItem, Select, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const TextOptions = props => {
   const {
     value,
@@ -13,45 +13,47 @@ const TextOptions = props => {
   const {
     key,
     options,
-    renderOption
+    renderOption,
+    width
   } = data;
   const handleChange = e => {
     onChange({
       [key]: e.target.value
     });
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Grid, {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
-      xs: 12,
+      xs: width || 12,
       style: {
         marginBottom: "5px"
       },
-      children: /*#__PURE__*/_jsx(Typography, {
+      children: [/*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
         sx: {
           fontSize: "14px",
-          fontWeight: "500"
+          fontWeight: "500",
+          marginBottom: "4px"
         },
         children: data?.label
-      })
-    }), /*#__PURE__*/_jsx(Select, {
-      onChange: handleChange,
-      value: value || options[0]?.value,
-      placeholder: data?.label,
-      fullWidth: true,
-      size: "small",
-      style: {
-        marginBottom: "16px"
-      },
-      children: options.map(m => {
-        return /*#__PURE__*/_jsx(MenuItem, {
-          value: m.value,
-          children: renderOption ? renderOption(m, elementProps) : m.label || m.text
-        }, `${key}_${m.value}`);
-      })
-    })]
+      }), /*#__PURE__*/_jsx(Select, {
+        onChange: handleChange,
+        value: value || options[0]?.value,
+        placeholder: data?.label,
+        fullWidth: true,
+        size: "small",
+        style: {
+          marginBottom: "16px"
+        },
+        children: options.map(m => {
+          return /*#__PURE__*/_jsx(MenuItem, {
+            value: m.value,
+            children: renderOption ? renderOption(m, elementProps) : m.label || m.text
+          }, `${key}_${m.value}`);
+        })
+      })]
+    })
   });
 };
 export default TextOptions;

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

@@ -37,9 +37,6 @@ const formStyle = [{
     options: fontOptions,
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
         children: option.text
       });
     }
@@ -85,9 +82,6 @@ const formStyle = [{
     }],
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
         children: option.text
       });
     }

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

@@ -3,11 +3,6 @@ const gridItemStyle = [{
   tab: "Colors",
   value: "colors",
   fields: [{
-    label: "Text Color",
-    key: "textColor",
-    type: "color",
-    needPreview: false
-  }, {
     label: "Background Color",
     key: "bgColor",
     type: "color"
@@ -16,47 +11,6 @@ const gridItemStyle = [{
     key: "borderColor",
     type: "color"
   }]
-}, {
-  tab: "Hover Colors",
-  value: "hoverColors",
-  fields: [{
-    label: "Hover Background Color",
-    key: "bgColorHover",
-    type: "color"
-  }, {
-    label: "Hover Border Color",
-    key: "borderColorHover",
-    type: "color"
-  }]
-}, {
-  tab: "Animation",
-  value: "animation",
-  fields: [{
-    label: "Choose Animation",
-    key: "animation",
-    type: "textOptions",
-    options: [{
-      text: "No Animation",
-      value: "No Animation"
-    }, {
-      text: "Fade In",
-      value: "animate__animated animate__fadeIn"
-    }, {
-      text: "Zoom In",
-      value: "animate__animated animate__zoomIn"
-    }, {
-      text: "Bounce In Left",
-      value: "animate__animated animate__bounceInLeft"
-    }],
-    renderOption: option => {
-      return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
-        children: option.text
-      });
-    }
-  }]
 }, {
   tab: "Position",
   value: "position",
@@ -77,7 +31,7 @@ const gridItemStyle = [{
   tab: "Padding",
   value: "bannerSpacing",
   fields: [{
-    label: "Padding",
+    label: "Banner Spacing",
     key: "bannerSpacing",
     type: "bannerSpacing"
   }]
@@ -109,9 +63,6 @@ const gridItemStyle = [{
     }],
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {
-        style: {
-          fontFamily: option.value
-        },
         children: option.text
       });
     }
@@ -123,11 +74,44 @@ const gridItemStyle = [{
     label: "Grid Size",
     key: "grid",
     type: "gridSize"
+  }]
+}, {
+  tab: "Animation",
+  value: "animation",
+  fields: [{
+    label: "Animation",
+    key: "animation",
+    type: "textOptions",
+    options: [{
+      text: "No Animation",
+      value: "No Animation"
+    }, {
+      text: "Fade In",
+      value: "animate__animated animate__fadeIn"
+    }, {
+      text: "Zoom In",
+      value: "animate__animated animate__zoomIn"
+    }, {
+      text: "Bounce In Left",
+      value: "animate__animated animate__bounceInLeft"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        children: option.text
+      });
+    }
+  }]
+}, {
+  tab: "Hover Colors",
+  value: "hoverColors",
+  fields: [{
+    label: "Hover Background Color",
+    key: "bgColorHover",
+    type: "color"
   }, {
-    label: "Grid Height",
-    key: "gridHeight",
-    type: "text",
-    placeholder: "100px"
+    label: "Hover Border Color",
+    key: "borderColorHover",
+    type: "color"
   }]
 }];
 export default gridItemStyle;