@flozy/editor 1.4.9 → 1.5.2

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { Grid, IconButton, InputAdornment, TextField } from "@mui/material";
+import { Grid, IconButton, InputAdornment, 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 ElementSize = props => {
   const {
     value,
@@ -29,19 +30,25 @@ const ElementSize = props => {
       }
     });
   };
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    padding: 3,
-    spacing: 2,
-    className: "input-adorn",
-    children: [/*#__PURE__*/_jsx(Grid, {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      md: 6,
-      children: /*#__PURE__*/_jsx(TextField, {
+      style: {
+        marginBottom: "12px"
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: {
+          fontSize: "14px",
+          fontWeight: "500",
+          marginBottom: "5px"
+        },
+        children: "Width"
+      }), /*#__PURE__*/_jsx(TextField, {
         fullWidth: true,
         name: wkey,
-        label: "Width",
         size: "small",
         value: value ? value[wkey] : "100",
         placeholder: "Width",
@@ -57,7 +64,10 @@ const ElementSize = props => {
                 widthInPercent: null,
                 width: isNaN(value?.width) ? 100 : value?.width || 100
               }),
-              children: "PX"
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                children: "PX"
+              })
             }), /*#__PURE__*/_jsx(IconButton, {
               className: widthType === "%" ? "active" : "",
               size: "small",
@@ -65,20 +75,33 @@ const ElementSize = props => {
                 widthType: "%",
                 widthInPercent: value?.widthInPercent || 100
               }),
-              children: "%"
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                children: "%"
+              })
             })]
           })
         }
-      })
-    }), /*#__PURE__*/_jsx(Grid, {
+      })]
+    }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      md: 6,
-      children: /*#__PURE__*/_jsx(TextField, {
+      sx: {
+        paddingTop: "12px"
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: {
+          fontSize: "14px",
+          fontWeight: "500",
+          marginBottom: "5px"
+        },
+        children: "Height"
+      }), /*#__PURE__*/_jsx(TextField, {
         fullWidth: true,
         name: "height",
         size: "small",
-        label: "Height",
         value: value?.height,
         placeholder: "Height",
         helperText: "Leave it to auto if width is in % ",
@@ -92,18 +115,24 @@ const ElementSize = props => {
               onClick: onSizeType({
                 height: value?.height || ""
               }),
-              children: "PX"
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                children: "PX"
+              })
             }), /*#__PURE__*/_jsx(IconButton, {
               className: value?.height === "" ? "active" : "",
               size: "small",
               onClick: onSizeType({
                 height: ""
               }),
-              children: "auto"
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body2",
+                children: "auto"
+              })
             })]
           })
         }
-      })
+      })]
     })]
   });
 };

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

@@ -60,12 +60,14 @@ const Icons = props => {
         container: true,
         style: {
           display: "flex",
-          alignItems: "center",
-          padding: "12px"
+          alignItems: "center"
         },
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
-          xs: 10,
+          xs: SelectedIcon ? 10 : 12,
+          style: {
+            paddingRight: "5px"
+          },
           children: /*#__PURE__*/_jsx(TextField, {
             fullWidth: true,
             size: "small",
@@ -73,9 +75,10 @@ const Icons = props => {
             value: val,
             onChange: handleChange
           })
-        }), /*#__PURE__*/_jsx(Grid, {
+        }), SelectedIcon && /*#__PURE__*/_jsx(Grid, {
           item: true,
           xs: 2,
+          className: "selctedBtnIcon",
           style: {
             paddingLeft: "8px"
           },
@@ -88,7 +91,8 @@ const Icons = props => {
       textAlign: "center",
       style: {
         maxHeight: "200px",
-        overflowY: "auto"
+        overflowY: "auto",
+        paddingTop: "5px"
       },
       children: list.map(m => {
         const Ico = fIcons[m];

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

@@ -43,13 +43,13 @@ const MenusArray = props => {
     });
   };
   const handleVariant = e => {
+    console.log(e.target.name);
     onChange({
       [e.target.name]: e.target.value
     });
   };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    padding: 1,
     spacing: 2,
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -59,9 +59,10 @@ const MenusArray = props => {
           id: "demo-radio-buttons-group-label",
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "body1",
-            color: "textSecondary",
+            color: "primary",
             sx: {
-              fontSize: "14px"
+              fontSize: "14px",
+              fontWeight: "500"
             },
             children: "Menu Variant"
           })
@@ -76,12 +77,26 @@ const MenusArray = props => {
             value: "stacked",
             checked: menuStyle === "stacked",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Stacked"
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              color: "primary",
+              sx: {
+                fontSize: "14px"
+              },
+              children: "Stacked"
+            })
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "drawer",
             checked: menuStyle === "drawer",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Drawer"
+            label: /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              color: "primary",
+              sx: {
+                fontSize: "14px"
+              },
+              children: "Drawer"
+            })
           })]
         })]
       })
@@ -123,6 +138,9 @@ const MenusArray = props => {
       xs: 12,
       children: /*#__PURE__*/_jsx(Button, {
         onClick: onAddMenu,
+        sx: {
+          fontWeight: 700
+        },
         children: "+ Add"
       })
     })]

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

@@ -0,0 +1,52 @@
+export const radiusStyle = {
+  topLeft: {
+    position: "absolute",
+    left: "-25px",
+    top: "-28px",
+    width: "30px",
+    height: "30px",
+    margin: "auto",
+    borderTop: `1px solid #64748B`,
+    borderLeft: `1px solid #64748B`,
+    borderRight: `none`,
+    borderBottom: `none`,
+    fontSize: "14px",
+    textAlign: "center"
+  },
+  topRight: {
+    position: "absolute",
+    top: "-28px",
+    right: "-25px",
+    width: "30px",
+    height: "30px",
+    borderTop: `1px solid #64748B`,
+    borderRight: `1px solid #64748B`,
+    borderBottom: `none`,
+    borderLeft: `none`,
+    fontSize: "14px"
+  },
+  bottomLeft: {
+    position: "absolute",
+    left: "-25px",
+    bottom: "-28px",
+    width: "30px",
+    height: "30px",
+    borderBottom: `1px solid #64748B`,
+    borderLeft: `1px solid #64748B`,
+    borderRight: `none`,
+    borderTop: `none`,
+    fontSize: "14px"
+  },
+  bottomRight: {
+    position: "absolute",
+    bottom: "-28px",
+    right: "-25px",
+    width: "30px",
+    height: "30px",
+    borderBottom: `1px solid #64748B`,
+    borderRight: `1px solid #64748B`,
+    borderTop: "none",
+    borderLeft: "none",
+    fontSize: "14px"
+  }
+};

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

@@ -75,14 +75,15 @@ const SaveAsTemplate = props => {
     container: true,
     spacing: 2,
     children: [/*#__PURE__*/_jsx(Grid, {
-      itemx: true,
+      item: true,
       xs: 12,
       children: /*#__PURE__*/_jsx(TextField, {
         name: "title",
         value: template?.title,
         onChange: onChange,
         placeholder: "Template Title",
-        fullWidth: true
+        fullWidth: true,
+        size: "small"
       })
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -92,15 +93,37 @@ const SaveAsTemplate = props => {
         value: template?.type,
         name: "type",
         onChange: onChange,
+        size: "small",
         children: [/*#__PURE__*/_jsx(MenuItem, {
           value: "Element",
-          children: "Element"
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            sx: {
+              fontSize: "14px"
+            },
+            children: "Element"
+          })
         }), /*#__PURE__*/_jsx(MenuItem, {
           value: "Section",
-          children: "Section"
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            sx: {
+              fontSize: "14px"
+            },
+            children: "Section"
+          })
         }), /*#__PURE__*/_jsx(MenuItem, {
           value: "Templates",
-          children: "Templates"
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            color: "primary",
+            sx: {
+              fontSize: "14px"
+            },
+            children: "Templates"
+          })
         })]
       })
     }), /*#__PURE__*/_jsx(Grid, {
@@ -110,7 +133,8 @@ const SaveAsTemplate = props => {
         fullWidth: true,
         name: "category",
         value: template?.category,
-        onChange: onChange
+        onChange: onChange,
+        size: "small"
       })
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
@@ -166,6 +190,9 @@ const SaveAsTemplate = props => {
       },
       children: /*#__PURE__*/_jsx(Button, {
         onClick: handleSave,
+        sx: {
+          fontWeight: 700
+        },
         children: "Save As Template"
       })
     })]

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

@@ -17,23 +17,22 @@ const SelectBox = props => {
       [key]: e.target.checked
     });
   };
-  return /*#__PURE__*/_jsx(Grid, {
-    container: true,
-    padding: 1,
-    children: /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsx(FormControlLabel, {
-        control: /*#__PURE__*/_jsx(Checkbox, {
-          value: value,
-          checked: value,
-          onChange: handleChange
-        }),
-        label: placeholder
-      }), /*#__PURE__*/_jsx(FormHelperText, {
-        children: data?.helperText
-      })]
-    })
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    style: {
+      marginBottom: "12px"
+    },
+    children: [/*#__PURE__*/_jsx(FormControlLabel, {
+      control: /*#__PURE__*/_jsx(Checkbox, {
+        value: value,
+        checked: value,
+        onChange: handleChange
+      }),
+      label: placeholder
+    }), /*#__PURE__*/_jsx(FormHelperText, {
+      children: data?.helperText
+    })]
   });
 };
 export default SelectBox;

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

@@ -1,6 +1,7 @@
 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 {
@@ -17,9 +18,7 @@ const Text = props => {
       [key]: e.target.value
     });
   };
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    padding: 1,
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
@@ -28,15 +27,19 @@ const Text = props => {
       },
       children: /*#__PURE__*/_jsx(Typography, {
         variant: "body1",
-        color: "textSecondary",
+        color: "primary",
         sx: {
-          fontSize: "14px"
+          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 || "",

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
+import { TextCenterAlign, TextLeftAlign, TextRightAlign } from "../../iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TextAlign = props => {
@@ -18,9 +19,6 @@ const TextAlign = props => {
   };
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
-    style: {
-      paddingTop: "12px"
-    },
     spacing: 1,
     children: /*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -31,6 +29,10 @@ const TextAlign = props => {
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "body1",
             color: "primary",
+            style: {
+              fontWeight: 500,
+              fontSize: "14px"
+            },
             children: "Text Alignment"
           })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
@@ -39,18 +41,22 @@ const TextAlign = props => {
           name: "textAlign",
           value: value || "left",
           onChange: handleChange,
+          className: "iconRadioButton",
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "left",
+            className: `${value === "left" && "active"}`,
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Left"
+            label: /*#__PURE__*/_jsx(TextLeftAlign, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "center",
+            className: `${value === "center" && "active"}`,
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Center"
+            label: /*#__PURE__*/_jsx(TextCenterAlign, {})
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "right",
+            className: `${value === "right" && "active"}`,
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Right"
+            label: /*#__PURE__*/_jsx(TextRightAlign, {})
           })]
         })]
       })

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { Grid, MenuItem, Select } from "@mui/material";
+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";
 const TextOptions = props => {
   const {
@@ -18,34 +19,38 @@ const TextOptions = props => {
       [key]: e.target.value
     });
   };
-  return /*#__PURE__*/_jsx(Grid, {
-    container: true,
-    children: /*#__PURE__*/_jsxs(Grid, {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
       style: {
-        padding: "10px"
+        marginBottom: "5px"
       },
-      children: [/*#__PURE__*/_jsx("label", {
-        style: {
-          marginBottom: "8px",
-          display: "flex"
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "primary",
+        sx: {
+          fontSize: "14px",
+          fontWeight: "500"
         },
         children: data?.label
-      }), /*#__PURE__*/_jsx(Select, {
-        onChange: handleChange,
-        value: value || options[0]?.value,
-        placeholder: data?.label,
-        fullWidth: true,
-        size: "small",
-        children: options.map(m => {
-          return /*#__PURE__*/_jsx(MenuItem, {
-            value: m.value,
-            children: renderOption ? renderOption(m) : 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) : m.label || m.text
+        }, `${key}_${m.value}`);
+      })
+    })]
   });
 };
 export default TextOptions;

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

@@ -7,12 +7,6 @@ const gridStyle = [{
     key: "id",
     type: "text",
     placeholder: "Id should be unique for the page..."
-  }, {
-    label: "Copy Grid",
-    key: "copyGrid",
-    type: "selectBox",
-    placeholder: "Copy Grid",
-    helperText: "This Grid will get copied when creating a new page from this page."
   }]
 }, {
   tab: "Padding",