@flozy/editor 1.7.5 → 1.7.7

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

@@ -3,6 +3,7 @@ import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typo
 import { JustifyStartIcon, JustifyCenterIcon, JustifyEndIcon, AlignEndIcon, AlignCenterIcon, AlignStartIcon, DirectionRowIcon, DirectionColumIcon, DirectionReverseIcon } from "../../iconslist";
 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 Alignment = props => {
   const {
     value,
@@ -21,12 +22,7 @@ const Alignment = props => {
     });
   };
   const flexDirection = value?.flexDirection || "row";
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    style: {
-      paddingTop: "12px"
-    },
-    spacing: 1,
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
@@ -40,64 +36,58 @@ const Alignment = props => {
               fontSize: "14px",
               fontWeight: 500
             },
-            children: "Align Items"
+            children: "Alignment"
           })
-        }), /*#__PURE__*/_jsxs(RadioGroup, {
-          row: true,
-          "aria-labelledby": "pos-align-tems",
-          name: "horizantal",
-          value: value?.horizantal || "start",
-          onChange: handleChange,
-          className: "iconRadioButton",
-          children: [/*#__PURE__*/_jsx(FormControlLabel, {
-            value: "start",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(AlignStartIcon, {})
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "center",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(AlignCenterIcon, {})
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "end",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(AlignEndIcon, {})
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        children: [/*#__PURE__*/_jsx(FormLabel, {
-          id: "pos-jc",
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "body1",
-            color: "primary",
+        }), /*#__PURE__*/_jsxs("div", {
+          style: {
+            display: "flex"
+          },
+          children: [/*#__PURE__*/_jsxs(RadioGroup, {
+            row: true,
+            "aria-labelledby": "pos-align-tems",
+            name: "horizantal",
+            value: value?.horizantal || "start",
+            onChange: handleChange,
+            className: "iconRadioButton",
             style: {
-              fontSize: "14px",
-              fontWeight: 500
+              display: "flex"
             },
-            children: "Justify Content"
-          })
-        }), /*#__PURE__*/_jsxs(RadioGroup, {
-          row: true,
-          "aria-labelledby": "pos-jc",
-          name: "vertical",
-          value: value?.vertical || "start",
-          onChange: handleChange,
-          className: "iconRadioButton",
-          children: [/*#__PURE__*/_jsx(FormControlLabel, {
-            value: "start",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(JustifyStartIcon, {})
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "center",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(JustifyCenterIcon, {})
-          }), /*#__PURE__*/_jsx(FormControlLabel, {
-            value: "end",
-            control: /*#__PURE__*/_jsx(Radio, {}),
-            label: /*#__PURE__*/_jsx(JustifyEndIcon, {})
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+              value: "start",
+              control: /*#__PURE__*/_jsx(Radio, {}),
+              label: /*#__PURE__*/_jsx(AlignStartIcon, {})
+            }), /*#__PURE__*/_jsx(FormControlLabel, {
+              value: "center",
+              control: /*#__PURE__*/_jsx(Radio, {}),
+              label: /*#__PURE__*/_jsx(AlignCenterIcon, {})
+            }), /*#__PURE__*/_jsx(FormControlLabel, {
+              value: "end",
+              control: /*#__PURE__*/_jsx(Radio, {}),
+              label: /*#__PURE__*/_jsx(AlignEndIcon, {})
+            })]
+          }), /*#__PURE__*/_jsxs(RadioGroup, {
+            row: true,
+            "aria-labelledby": "pos-jc",
+            name: "vertical",
+            value: value?.vertical || "start",
+            onChange: handleChange,
+            className: "iconRadioButton",
+            style: {
+              display: "flex"
+            },
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+              value: "start",
+              control: /*#__PURE__*/_jsx(Radio, {}),
+              label: /*#__PURE__*/_jsx(JustifyStartIcon, {})
+            }), /*#__PURE__*/_jsx(FormControlLabel, {
+              value: "center",
+              control: /*#__PURE__*/_jsx(Radio, {}),
+              label: /*#__PURE__*/_jsx(JustifyCenterIcon, {})
+            }), /*#__PURE__*/_jsx(FormControlLabel, {
+              value: "end",
+              control: /*#__PURE__*/_jsx(Radio, {}),
+              label: /*#__PURE__*/_jsx(JustifyEndIcon, {})
+            })]
           })]
         })]
       })
@@ -114,7 +104,7 @@ const Alignment = props => {
               fontSize: "14px",
               fontWeight: 500
             },
-            children: "Flex Direction"
+            children: "Direction"
           })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,

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

@@ -39,13 +39,14 @@ const BackgroundImage = props => {
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
+    xs: 12,
     children: [/*#__PURE__*/_jsx(Typography, {
       variant: "body1",
       color: "primary",
       sx: {
         fontSize: "14px",
         fontWeight: "500",
-        marginBottom: "5px"
+        marginBottom: "8px"
       },
       children: "Upload Image"
     }), /*#__PURE__*/_jsx(Grid, {

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

@@ -1,8 +1,6 @@
 import React from "react";
-import { Grid, Typography } from "@mui/material";
-import LockIcon from "@mui/icons-material/Lock";
-import LockOpenIcon from "@mui/icons-material/LockOpen";
-import { radiusStyle } from "./radiusStyle";
+import { Checkbox, FormControlLabel, Grid, Slider, Typography } from "@mui/material";
+import { squreStyle } from "./radiusStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
@@ -13,15 +11,14 @@ const BannerSpacing = props => {
     onChange,
     elementProps
   } = props;
-  let {
-    lockSpacing
-  } = elementProps || {};
-  if (lockSpacing === undefined) {
-    lockSpacing = true;
-  }
   const {
     key
   } = data;
+  const lockKeyVal = `lock${key}`;
+  let lockSpacing = elementProps[lockKeyVal];
+  if (lockSpacing === undefined) {
+    lockSpacing = true;
+  }
   const handleChange = e => {
     let changeAll = {};
     if (lockSpacing) {
@@ -39,12 +36,9 @@ const BannerSpacing = props => {
   };
   const onLockSpacing = () => {
     onChange({
-      lockSpacing: !lockSpacing
+      [lockKeyVal]: !lockSpacing
     });
   };
-  const maxCap = val => {
-    return val > 24 ? 24 : val;
-  };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
     xs: 12,
@@ -56,7 +50,42 @@ const BannerSpacing = props => {
         fontWeight: 500
       },
       children: data?.label
-    }), /*#__PURE__*/_jsx(Grid, {
+    }), /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      wrap: "nowrap",
+      className: "sld-wrpr",
+      children: [/*#__PURE__*/_jsx(Slider, {
+        sx: {
+          opacity: !lockSpacing && 0.5
+        },
+        disabled: !lockSpacing,
+        className: "spacingSlider",
+        defaultValue: value?.top || 0,
+        "aria-label": "Default",
+        valueLabelDisplay: "auto",
+        max: 100,
+        onChange: handleChange
+      }), /*#__PURE__*/_jsx("input", {
+        value: !lockSpacing ? "" : value?.top || 0,
+        className: "sliderInput",
+        disabled: !lockSpacing,
+        onChange: handleChange
+      })]
+    }), /*#__PURE__*/_jsx(FormControlLabel, {
+      className: "ccheckbox-primary",
+      control: /*#__PURE__*/_jsx(Checkbox, {
+        value: !lockSpacing,
+        checked: !lockSpacing,
+        onChange: onLockSpacing
+      }),
+      label: /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        sx: {
+          fontSize: "14px"
+        },
+        children: "Customize"
+      })
+    }), !lockSpacing ? /*#__PURE__*/_jsx(Grid, {
       container: true,
       padding: 4,
       children: /*#__PURE__*/_jsx(Grid, {
@@ -69,72 +98,69 @@ const BannerSpacing = props => {
           flexDirection: "column",
           alignItems: "center"
         },
-        children: /*#__PURE__*/_jsxs("div", {
+        children: /*#__PURE__*/_jsx("div", {
           style: {
             width: "100px",
-            height: "50px",
-            // border: "1px solid #495efc",
+            height: "100px",
             backgroundColor: "transparent",
             position: "relative",
-            display: "flex",
-            padding: `${maxCap(value?.top)}px ${maxCap(value?.right)}px ${maxCap(value?.bottom)}px ${maxCap(value?.left)}px`
+            display: "flex"
           },
-          children: [/*#__PURE__*/_jsx("div", {
-            style: {
-              border: "1px solid #495efc",
-              width: "100%"
-            }
-          }), /*#__PURE__*/_jsx("input", {
-            type: "text",
-            name: "left",
-            className: "borderInput",
-            value: value?.left,
-            style: {
-              ...radiusStyle.topLeft
-            },
-            onChange: handleChange
-          }), /*#__PURE__*/_jsx("input", {
-            type: "text",
-            name: "top",
-            value: value?.top,
-            className: "borderInput",
-            style: {
-              ...radiusStyle.topRight
-            },
-            onChange: handleChange
-          }), /*#__PURE__*/_jsx("input", {
-            type: "text",
-            name: "right",
-            value: value?.right,
-            className: "borderInput",
-            style: {
-              ...radiusStyle.bottomLeft
-            },
-            onChange: handleChange
-          }), /*#__PURE__*/_jsx("input", {
-            type: "text",
-            name: "bottom",
-            value: value?.bottom,
-            className: "borderInput",
-            style: {
-              ...radiusStyle.bottomRight
-            },
-            onChange: handleChange
-          }), /*#__PURE__*/_jsx("button", {
-            style: {
-              position: "absolute",
-              right: 0,
-              left: 0,
-              top: 0,
-              bottom: 0,
-              background: "none"
-            },
-            onClick: onLockSpacing,
-            children: !lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
-          })]
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "bannerSpaceBox",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "bannerSpaceBoxTop",
+              children: /*#__PURE__*/_jsx("input", {
+                type: "text",
+                name: "top",
+                value: value?.top,
+                className: "borderInput",
+                style: {
+                  ...squreStyle.topRight
+                },
+                onChange: handleChange
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              className: "bannerSpaceBoxRight",
+              children: /*#__PURE__*/_jsx("input", {
+                type: "text",
+                name: "right",
+                value: value?.right,
+                className: "borderInput",
+                style: {
+                  ...squreStyle.bottomLeft
+                },
+                onChange: handleChange
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              className: "bannerSpaceBoxBottom",
+              children: /*#__PURE__*/_jsx("input", {
+                type: "text",
+                name: "bottom",
+                value: value?.bottom,
+                className: "borderInput",
+                style: {
+                  ...squreStyle.bottomRight
+                },
+                onChange: handleChange
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              className: "bannerSpaceBoxLeft",
+              children: /*#__PURE__*/_jsx("input", {
+                type: "text",
+                name: "left",
+                className: "borderInput",
+                value: value?.left,
+                style: {
+                  ...squreStyle.topLeft
+                },
+                onChange: handleChange
+              })
+            })]
+          })
         })
       })
-    })]
+    }) : null]
   });
 };
 export default BannerSpacing;

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

@@ -1,7 +1,5 @@
 import React from "react";
-import { Grid, Typography } from "@mui/material";
-import LockIcon from "@mui/icons-material/Lock";
-import LockOpenIcon from "@mui/icons-material/LockOpen";
+import { Grid, Typography, Slider, FormControlLabel, Checkbox } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -14,8 +12,7 @@ const BorderRadius = props => {
     elementProps
   } = props;
   let {
-    lockRadius,
-    borderColor
+    lockRadius
   } = elementProps;
   if (lockRadius === undefined) {
     lockRadius = true;
@@ -54,7 +51,42 @@ const BorderRadius = props => {
         fontWeight: 500
       },
       children: data?.label
-    }), /*#__PURE__*/_jsx(Grid, {
+    }), /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      wrap: "nowrap",
+      className: "sld-wrpr",
+      children: [/*#__PURE__*/_jsx(Slider, {
+        sx: {
+          opacity: !lockRadius && 0.5
+        },
+        disabled: !lockRadius,
+        className: "spacingSlider",
+        defaultValue: value?.topLeft || 0,
+        "aria-label": "Default",
+        valueLabelDisplay: "auto",
+        max: 100,
+        onChange: handleChange
+      }), /*#__PURE__*/_jsx("input", {
+        value: !lockRadius ? "" : value?.topLeft || 0,
+        className: "sliderInput",
+        disabled: !lockRadius,
+        onChange: handleChange
+      })]
+    }), /*#__PURE__*/_jsx(FormControlLabel, {
+      className: "ccheckbox-primary",
+      control: /*#__PURE__*/_jsx(Checkbox, {
+        value: !lockRadius,
+        checked: !lockRadius,
+        onChange: onLockRadius
+      }),
+      label: /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        sx: {
+          fontSize: "14px"
+        },
+        children: "Customize"
+      })
+    }), !lockRadius ? /*#__PURE__*/_jsx(Grid, {
       container: true,
       children: /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -75,7 +107,7 @@ const BorderRadius = props => {
             border: "none",
             position: "relative",
             display: "flex",
-            borderColor: `${borderColor}`,
+            borderColor: `#2563eb`,
             borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
           },
           children: [/*#__PURE__*/_jsx("input", {
@@ -135,12 +167,11 @@ const BorderRadius = props => {
               bottom: 0,
               background: "none"
             },
-            onClick: onLockRadius,
-            children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
+            onClick: onLockRadius
           })]
         })
       })
-    })]
+    }) : null]
   });
 };
 export default BorderRadius;

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

@@ -2,6 +2,7 @@ import React from "react";
 import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField, Typography } from "@mui/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 ButtonLink = props => {
   const {
     value,
@@ -62,9 +63,7 @@ const ButtonLink = props => {
       return null;
     }
   };
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    spacing: 1,
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
@@ -83,6 +82,7 @@ const ButtonLink = props => {
           "aria-labelledby": "demo-radio-buttons-group-label",
           value: value?.linkType || "",
           name: "linkType",
+          className: "cradio-primary",
           onChange: handleChange,
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "actionTrigger",

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

@@ -7,96 +7,46 @@ const Color = props => {
   const {
     value,
     data,
-    onChange,
-    elementProps
+    onChange
   } = props;
   const {
     key,
-    label,
-    needPreview
+    label
   } = data;
-  const {
-    textColor,
-    bgColor,
-    borderColor
-  } = elementProps;
   const onSave = color => {
     onChange({
       [key]: color
     });
   };
   return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    children: [needPreview && /*#__PURE__*/_jsxs(Grid, {
-      container: true,
+    item: true,
+    xs: 12,
+    className: "btnColorPicker",
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
       sx: {
-        pt: 1,
-        pb: 2
+        fontSize: "14px",
+        fontWeight: 500,
+        marginBottom: "5px"
       },
-      children: [/*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        children: /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          style: {
-            color: textColor,
-            background: bgColor,
-            border: `1px solid ${borderColor}`,
-            fontSize: "14px",
-            fontWeight: 500
-          },
-          children: "Button Preview"
-        })
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "textSecondary",
-        sx: {
-          fontSize: "13px"
-        },
-        children: "*Enter or Select color"
-      })]
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      style: {
-        marginBottom: "12px",
-        display: "flex",
-        alignItems: "cente",
-        justifyContent: "space-between"
+      children: label
+    }), /*#__PURE__*/_jsx(TextField, {
+      fullWidth: true,
+      value: value,
+      placeholder: `${label} color code`,
+      InputLabelProps: {
+        shrink: true
       },
-      children: /*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 12,
-        className: "btnColorPicker",
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          color: "primary",
-          sx: {
-            fontSize: "14px",
-            fontWeight: 500,
-            marginBottom: "5px"
-          },
-          children: label
-        }), /*#__PURE__*/_jsx(TextField, {
-          fullWidth: true,
-          value: value
-          // label={label}
-          ,
-          placeholder: `${label} color code`,
-          InputLabelProps: {
-            shrink: true
-          },
-          InputProps: {
-            startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-              position: "start",
-              children: /*#__PURE__*/_jsx(ColorPickerButton, {
-                value: value,
-                onSave: onSave
-              })
-            })
-          }
-        })]
-      })
+      InputProps: {
+        startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+          position: "start",
+          children: /*#__PURE__*/_jsx(ColorPickerButton, {
+            value: value,
+            onSave: onSave
+          })
+        })
+      }
     })]
   });
 };

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

@@ -4,7 +4,6 @@ import { sizeMap } from "../../../utils/font.js";
 import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
 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 FontSize = props => {
   const {
     value,
@@ -12,7 +11,8 @@ const FontSize = props => {
     onChange
   } = props;
   const {
-    key
+    key,
+    width
   } = data;
   const handleChange = e => {
     let inc = parseInt(e.target.value) || 16;
@@ -42,7 +42,9 @@ const FontSize = props => {
       [key]: combinedOldVal - 1 || 0
     });
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: width || 12,
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
@@ -70,8 +72,8 @@ const FontSize = props => {
         size: "small",
         inputProps: {
           style: {
-            width: "30px",
-            textAlign: "center"
+            textAlign: "center",
+            padding: "11px"
           }
         },
         InputProps: {