@flozy/editor 1.5.1 → 1.5.3

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

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import { Grid, Button, Typography } from "@mui/material";
-import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+// import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { convertBase64 } from "../../../utils/helper";
 import { uploadFile } from "../../../service/fileupload";
+import { UploadBtnIcon } from "../../iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BackgroundImage = props => {
@@ -43,52 +44,65 @@ const BackgroundImage = props => {
   };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    children: [/*#__PURE__*/_jsxs(Grid, {
+    children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
-      style: {
-        display: "flex"
+      children: uploading ? "Uploading..." : ""
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
+      sx: {
+        fontSize: "14px",
+        fontWeight: "500",
+        marginBottom: "5px"
       },
-      justifyContent: "space-between",
-      alignItems: "center",
-      children: [/*#__PURE__*/_jsxs(Button, {
-        component: "label",
-        variant: "contained",
-        startIcon: /*#__PURE__*/_jsx(CloudUploadIcon, {}),
-        children: ["Upload file", /*#__PURE__*/_jsx("input", {
-          type: "file",
-          style: {
-            opacity: 0,
-            width: "0px"
-          },
-          onChange: handleChange
-        })]
-      }), /*#__PURE__*/_jsxs(Grid, {
-        className: "dflex",
-        children: [/*#__PURE__*/_jsx("input", {
-          type: "checkbox",
-          value: "none",
-          checked: value === "none",
-          onChange: onRemoveBG
-        }), " ", /*#__PURE__*/_jsx(Typography, {
-          variant: "body1",
-          color: "primary",
-          children: "Remove"
-        })]
-      })]
-    }), uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
+      children: "Upload Image"
+    }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
       style: {
+        position: "relative",
         marginTop: "12px",
+        marginBottom: "12px",
         width: "100%",
         backgroundImage: base64 ? `url(${base64})` : "none",
-        height: "100px",
+        height: "200px",
+        borderRadius: "10px",
         backgroundPosition: "center",
         backgroundSize: "contain",
         backgroundRepeat: "no-repeat",
         backgroundColor: "rgba(0,0,0,0.5)"
-      }
+      },
+      children: /*#__PURE__*/_jsx(Grid, {
+        className: "uploadImageSection",
+        children: base64 ? /*#__PURE__*/_jsx(Grid, {
+          className: "removeImageText",
+          onClick: onRemoveBG,
+          children: "REMOVE"
+        }) : /*#__PURE__*/_jsx(Grid, {
+          className: "uploadImageText",
+          children: /*#__PURE__*/_jsxs(Button, {
+            component: "label",
+            variant: "contained",
+            style: {
+              background: "none"
+            },
+            children: [/*#__PURE__*/_jsx("input", {
+              type: "file",
+              style: {
+                opacity: 0,
+                width: "0px"
+              },
+              onChange: handleChange
+            }), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+              style: {
+                paddingLeft: "8px"
+              },
+              children: "UPLOAD"
+            })]
+          })
+        })
+      })
     })]
   });
 };

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { Grid } from "@mui/material";
+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 { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
@@ -38,125 +39,99 @@ const BannerSpacing = props => {
       lockSpacing: !lockSpacing
     });
   };
-  return /*#__PURE__*/_jsx(Grid, {
-    container: true,
-    padding: 4,
-    children: /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      sx: {
-        pb: 2,
-        display: "flex",
-        justifyContent: "center",
-        flexDirection: "column",
-        alignItems: "center"
+  const maxCap = val => {
+    return val > 100 ? 32 : val;
+  };
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
+      style: {
+        fontSize: "14px",
+        fontWeight: 500
       },
-      children: [/*#__PURE__*/_jsx("label", {
-        style: {
-          fontSize: "12px"
-        },
-        children: data?.label
-      }), /*#__PURE__*/_jsxs("div", {
-        style: {
-          width: "100px",
-          height: "100px",
-          border: "1px solid #495efc",
-          backgroundColor: "transparent",
-          position: "relative",
+      children: data?.label
+    }), /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      padding: 4,
+      children: /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: {
+          pb: 2,
           display: "flex",
-          padding: `${value?.top}px ${value?.right}px ${value?.bottom}px ${value?.left}px`
+          justifyContent: "center",
+          flexDirection: "column",
+          alignItems: "center"
         },
-        children: [/*#__PURE__*/_jsx("div", {
-          style: {
-            border: "1px solid #495efc",
-            width: "100%"
-          }
-        }), /*#__PURE__*/_jsx("input", {
-          type: "text",
-          name: "left",
-          value: value?.left,
-          style: {
-            position: "absolute",
-            left: "-60px",
-            top: 0,
-            bottom: 0,
-            width: "35px",
-            height: "16px",
-            margin: "auto",
-            textAlign: "center",
-            border: "1px solid #cccccc",
-            fontSize: "12px",
-            borderRadius: "4px"
-          },
-          onChange: handleChange
-        }), /*#__PURE__*/_jsx("input", {
-          type: "text",
-          name: "top",
-          value: value?.top,
-          style: {
-            position: "absolute",
-            right: 0,
-            left: 0,
-            top: "-36px",
-            width: "35px",
-            height: "16px",
-            margin: "auto",
-            textAlign: "center",
-            border: "1px solid #cccccc",
-            fontSize: "12px",
-            borderRadius: "4px"
-          },
-          onChange: handleChange
-        }), /*#__PURE__*/_jsx("input", {
-          type: "text",
-          name: "right",
-          value: value?.right,
-          style: {
-            position: "absolute",
-            right: "-60px",
-            top: 0,
-            bottom: 0,
-            width: "35px",
-            height: "16px",
-            margin: "auto",
-            textAlign: "center",
-            border: "1px solid #cccccc",
-            fontSize: "12px",
-            borderRadius: "4px"
-          },
-          onChange: handleChange
-        }), /*#__PURE__*/_jsx("input", {
-          type: "text",
-          name: "bottom",
-          value: value?.bottom,
-          style: {
-            position: "absolute",
-            right: 0,
-            left: 0,
-            bottom: "-36px",
-            width: "35px",
-            height: "16px",
-            margin: "auto",
-            textAlign: "center",
-            border: "1px solid #cccccc",
-            fontSize: "12px",
-            borderRadius: "4px"
-          },
-          onChange: handleChange
-        }), /*#__PURE__*/_jsx("button", {
+        children: /*#__PURE__*/_jsxs("div", {
           style: {
-            position: "absolute",
-            right: 0,
-            left: 0,
-            top: 0,
-            bottom: 0,
-            background: "none"
+            width: "100px",
+            height: "100px",
+            // border: "1px solid #495efc",
+            backgroundColor: "transparent",
+            position: "relative",
+            display: "flex",
+            padding: `${maxCap(value?.top)}px ${maxCap(value?.right)}px ${maxCap(value?.bottom)}px ${maxCap(value?.left)}px`
           },
-          onClick: onLockSpacing,
-          children: !lockSpacing ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
-        })]
-      })]
-    })
+          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, {})
+          })]
+        })
+      })
+    })]
   });
 };
 export default BannerSpacing;

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { Grid } from "@mui/material";
+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 { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -39,113 +40,104 @@ const BorderRadius = props => {
       lockRadius: !lockRadius
     });
   };
-  return /*#__PURE__*/_jsx(Grid, {
-    container: true,
-    padding: 4,
-    children: /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body1",
+      color: "primary",
       style: {
-        display: "flex",
-        flexDirection: "column"
+        fontSize: "14px",
+        fontWeight: 500
       },
-      justifyContent: "center",
-      alignContent: "center",
-      alignItems: "center",
-      children: [/*#__PURE__*/_jsx("label", {
+      children: data?.label
+    }), /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      children: /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
         style: {
-          fontSize: "12px"
-        },
-        children: data?.label
-      }), /*#__PURE__*/_jsxs("div", {
-        style: {
-          width: "100px",
-          height: "100px",
-          border: "1px solid blue",
-          position: "relative",
           display: "flex",
-          borderColor: `${borderColor}`,
-          borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
+          flexDirection: "column",
+          marginBottom: "48px",
+          marginTop: "42px"
         },
-        children: [/*#__PURE__*/_jsx("input", {
-          type: "text",
-          name: "topLeft",
-          value: value?.topLeft,
-          style: {
-            position: "absolute",
-            left: "-25px",
-            top: "-28px",
-            width: "20px",
-            height: "16px",
-            margin: "auto",
-            border: "1px solid #cccccc",
-            fontSize: "12px",
-            borderRadius: "4px",
-            textAlign: "center"
-          },
-          onChange: handleChange
-        }), /*#__PURE__*/_jsx("input", {
-          type: "text",
-          name: "topRight",
-          value: value?.topRight,
-          style: {
-            position: "absolute",
-            top: "-28px",
-            right: "-25px",
-            width: "20px",
-            height: "16px",
-            border: "1px solid #cccccc",
-            fontSize: "12px",
-            borderRadius: "4px",
-            textAlign: "center"
-          },
-          onChange: handleChange
-        }), /*#__PURE__*/_jsx("input", {
-          type: "text",
-          name: "bottomLeft",
-          value: value?.bottomLeft,
-          style: {
-            position: "absolute",
-            left: "-25px",
-            bottom: "-28px",
-            width: "20px",
-            height: "16px",
-            border: "1px solid #cccccc",
-            fontSize: "12px",
-            borderRadius: "4px",
-            textAlign: "center"
-          },
-          onChange: handleChange
-        }), /*#__PURE__*/_jsx("input", {
-          type: "text",
-          name: "bottomRight",
-          value: value?.bottomRight,
-          style: {
-            position: "absolute",
-            bottom: "-28px",
-            right: "-25px",
-            width: "20px",
-            height: "16px",
-            border: "1px solid #cccccc",
-            fontSize: "12px",
-            borderRadius: "4px",
-            textAlign: "center"
-          },
-          onChange: handleChange
-        }), /*#__PURE__*/_jsx("button", {
+        justifyContent: "center",
+        alignContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/_jsxs("div", {
           style: {
-            position: "absolute",
-            right: 0,
-            left: 0,
-            top: 0,
-            bottom: 0,
-            background: "none"
+            width: "100px",
+            height: "50px",
+            border: "none",
+            position: "relative",
+            display: "flex",
+            borderColor: `${borderColor}`,
+            borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
           },
-          onClick: onLockRadius,
-          children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
-        })]
-      })]
-    })
+          children: [/*#__PURE__*/_jsx("input", {
+            type: "text",
+            name: "topLeft",
+            value: value?.topLeft,
+            className: "borderInput",
+            placeholder: "0",
+            style: {
+              ...radiusStyle.topLeft,
+              borderTopLeftRadius: `${value?.topLeft}px`
+            },
+            onChange: handleChange
+          }), /*#__PURE__*/_jsx("input", {
+            type: "text",
+            name: "topRight",
+            value: value?.topRight,
+            className: "borderInput",
+            placeholder: "0",
+            style: {
+              ...radiusStyle.topRight,
+              borderTopRightRadius: `${value?.topRight}px`,
+              textAlign: "center"
+            },
+            onChange: handleChange
+          }), /*#__PURE__*/_jsx("input", {
+            type: "text",
+            name: "bottomLeft",
+            value: value?.bottomLeft,
+            className: "borderInput",
+            placeholder: "0",
+            style: {
+              ...radiusStyle.bottomLeft,
+              borderBottomLeftRadius: `${value?.bottomLeft}px`,
+              textAlign: "center"
+            },
+            onChange: handleChange
+          }), /*#__PURE__*/_jsx("input", {
+            type: "text",
+            name: "bottomRight",
+            value: value?.bottomRight,
+            className: "borderInput",
+            placeholder: "0",
+            style: {
+              ...radiusStyle.bottomRight,
+              borderBottomRightRadius: `${value?.bottomRight}px`,
+              textAlign: "center"
+            },
+            onChange: handleChange
+          }), /*#__PURE__*/_jsx("button", {
+            style: {
+              border: "none",
+              position: "absolute",
+              right: 0,
+              left: 0,
+              top: 0,
+              bottom: 0,
+              background: "none"
+            },
+            onClick: onLockRadius,
+            children: !lockRadius ? /*#__PURE__*/_jsx(LockOpenIcon, {}) : /*#__PURE__*/_jsx(LockIcon, {})
+          })]
+        })
+      })
+    })]
   });
 };
 export default BorderRadius;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormControl, FormLabel, RadioGroup, FormControlLabel, Grid, Radio, TextField, Select, MenuItem } from "@mui/material";
+import { FormControl, RadioGroup, FormControlLabel, Grid, Radio, TextField, Select, MenuItem, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ButtonLink = props => {
@@ -81,13 +81,18 @@ const ButtonLink = props => {
   };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    padding: 4,
     spacing: 1,
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
       children: /*#__PURE__*/_jsxs(FormControl, {
-        children: [/*#__PURE__*/_jsx(FormLabel, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          color: "primary",
+          style: {
+            fontSize: "14px",
+            fontWeight: 500
+          },
           id: "demo-radio-buttons-group-label",
           children: "Where do you want to Link?"
         }), /*#__PURE__*/_jsxs(RadioGroup, {
@@ -99,11 +104,25 @@ const ButtonLink = props => {
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "actionTrigger",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Action Trigger"
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              color: "primary",
+              style: {
+                fontSize: "14px"
+              },
+              children: "Action Trigger"
+            })
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "webAddress",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Web Address"
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              color: "primary",
+              style: {
+                fontSize: "14px"
+              },
+              children: "Web Address"
+            })
           })]
         })]
       })

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

@@ -39,10 +39,11 @@ const Color = props => {
         children: /*#__PURE__*/_jsx(Grid, {
           item: true,
           style: {
-            padding: "8px",
             color: textColor,
             background: bgColor,
-            border: `1px solid ${borderColor}`
+            border: `1px solid ${borderColor}`,
+            fontSize: "14px",
+            fontWeight: 500
           },
           children: "Button Preview"
         })
@@ -69,9 +70,10 @@ const Color = props => {
         className: "btnColorPicker",
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "body1",
-          color: "textSecondary",
+          color: "primary",
           sx: {
             fontSize: "14px",
+            fontWeight: 500,
             marginBottom: "5px"
           },
           children: label
@@ -85,8 +87,8 @@ const Color = props => {
             shrink: true
           },
           InputProps: {
-            endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-              position: "end",
+            startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+              position: "start",
               children: /*#__PURE__*/_jsx(ColorPickerButton, {
                 value: value,
                 onSave: onSave