@flozy/editor 1.7.0 → 1.7.1

package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js

@@ -155,6 +155,11 @@ const FormWorkflow = props => {
           "& textarea": {
             fontSize: '16px',
             fontWeight: 500
+          },
+          "& textarea:focus-visible": {
+            outline: "none",
+            borderRadius: "none",
+            border: "none"
           }
         }
       })]

package/dist/Editor/Elements/Form/Workflow/MoreOptions.js

@@ -3,8 +3,8 @@ import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
 import { MoreHorizontal } from "../../../common/iconslist";
 import Icon from "../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function MoreOptions(props) {
   const {
     classes,
@@ -27,15 +27,12 @@ function MoreOptions(props) {
     children: [/*#__PURE__*/_jsx(Tooltip, {
       arrow: true,
       title: "More Options",
-      children: /*#__PURE__*/_jsxs(IconButton, {
+      children: /*#__PURE__*/_jsx(IconButton, {
         sx: classes.moreOption,
         onClick: handleClick,
-        children: [/*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: "moreHorizantal"
-        }), /*#__PURE__*/_jsx(MoreHorizontal, {
-          width: "24px",
-          height: "24px"
-        })]
+        })
       })
     }), /*#__PURE__*/_jsx(Menu, {
       id: "basic-menu",

package/dist/Editor/Elements/Form/Workflow/Styles.js

@@ -1,147 +1,154 @@
 const FormStyles = () => ({
   addButton: {
-    display: 'flex',
-    justifyContent: 'flex-end'
+    display: "flex",
+    justifyContent: "flex-end"
   },
   infoText: {
-    fontSize: '12px',
-    fontWeight: '400',
-    color: '#94A3B8'
+    fontSize: "12px",
+    fontWeight: "400",
+    color: "#94A3B8"
   },
   bodyTextArea: {
-    '& textarea': {
-      border: 'none',
-      width: '96%',
-      maxWidth: '96%',
-      outline: 'none'
+    "& textarea": {
+      border: "none",
+      width: "100%",
+      maxWidth: "100%",
+      outline: "none"
     },
-    '& textarea: focus-visible': {
-      outline: 'none',
-      border: 'none'
+    "& textarea:focus-visible": {
+      outline: "none",
+      border: "none"
     }
   },
   formHeadings: {
-    fontSize: '14px',
+    fontSize: "14px",
     fontWeight: 500,
-    paddingBottom: '10px',
-    paddingTop: '10px'
+    paddingBottom: "10px",
+    paddingTop: "10px"
   },
   flowListCard: {
-    border: '1px solid #6F6F6F33',
-    borderRadius: '8px',
-    padding: '10px'
+    border: "1px solid #6F6F6F33",
+    borderRadius: "8px",
+    padding: "10px"
   },
   listHeading: {
-    fontSize: '14px',
+    fontSize: "14px",
     fontWeight: 700
   },
   listSubHeading: {
-    fontSize: '12px',
+    fontSize: "12px",
     fontWeight: 500,
-    color: '#64748B',
-    maxWidth: '380px',
-    textTransform: 'capitalize',
+    color: "#64748B",
+    maxWidth: "380px",
+    textTransform: "capitalize",
     whiteSpace: "nowrap",
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
+    overflow: "hidden",
+    textOverflow: "ellipsis"
   },
   addBtnTypo: {
-    color: '#94A3B8',
+    color: "#94A3B8",
     fontWeight: 500,
-    fontSize: '12px'
+    fontSize: "12px"
   },
   emptyList: {
-    justifyContent: 'center',
-    display: 'flex',
-    border: '1px solid #6F6F6F33',
-    borderRadius: '8px',
-    padding: '10px',
-    color: '#94A3B8'
+    justifyContent: "center",
+    display: "flex",
+    border: "1px solid #6F6F6F33",
+    borderRadius: "8px",
+    padding: "10px",
+    color: "#94A3B8"
   },
   popupTitle: {
     fontWeight: 600,
-    fontSize: '16px',
-    display: 'flex',
-    alignItems: 'center'
+    fontSize: "16px",
+    display: "flex",
+    alignItems: "center"
   },
   subHeadings: {
     fontWeight: 500,
-    fontSize: '14px'
+    fontSize: "14px"
   },
   radioBtn: {
-    '& .MuiFormControlLabel-label': {
-      fontSize: '14px',
-      color: '#64748B'
+    "& .MuiFormControlLabel-label": {
+      fontSize: "14px",
+      color: "#64748B"
     }
   },
   dialogTitle: {
-    '& MuiDialogTitle-root': {
-      padding: '16px 12px'
+    "& MuiDialogTitle-root": {
+      padding: "16px 12px"
     }
   },
   closeBtn: {
-    background: '#F4F6F9',
-    color: '#64748B',
-    fontSize: '14px',
+    background: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 22px',
-    textTransform: 'none',
-    border: '1px solid #D8DDE1',
-    '&:hover': {
-      border: '1px solid #64748B'
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "&:hover": {
+      border: "1px solid #64748B"
     }
   },
   variableBtn: {
-    background: '#F4F6F9',
-    color: '#64748B',
-    fontSize: '14px',
+    background: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 22px',
-    textTransform: 'none',
-    border: '1px solid #D8DDE1',
-    '& svg': {
-      '& path': {
-        stroke: '#64748B'
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "& svg": {
+      "& path": {
+        stroke: "#64748B"
       }
     },
-    '&:hover': {
-      border: '1px solid #64748B'
+    "&:hover": {
+      border: "1px solid #64748B"
     }
   },
   saveBtn: {
-    background: '#2563EB',
-    fontSize: '14px',
+    background: "#2563EB",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 24px',
-    textTransform: 'none'
+    padding: "4px 24px",
+    textTransform: "none",
+    "& .MuiButton-containedSizeSmall": {
+      borderRadius: "5px"
+    },
+    "& .MuiButton-containedPrimary": {
+      background: "#2563EB",
+      borderRadius: "5px"
+    }
   },
   select: {
-    minWidth: '110px',
-    '& .MuiOutlinedInput-notchedOutline': {
-      borderRadius: '8px',
-      border: '1px solid #6F6F6F33',
-      boxShadow: '0px 4px 16px 0px #0000000D'
+    minWidth: "110px",
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderRadius: "8px",
+      border: "1px solid #6F6F6F33",
+      boxShadow: "0px 4px 16px 0px #0000000D"
     },
-    '&:hover .MuiOutlinedInput-notchedOutline': {
-      borderRadius: '8px',
-      border: '1px solid #6F6F6F33',
-      boxShadow: '0px 4px 16px 0px #0000000D'
+    "&:hover .MuiOutlinedInput-notchedOutline": {
+      borderRadius: "8px",
+      border: "1px solid #6F6F6F33",
+      boxShadow: "0px 4px 16px 0px #0000000D"
     },
-    '& .MuiSelect-select': {
-      color: '#94A3B8',
-      fontSize: '14px'
+    "& .MuiSelect-select": {
+      color: "#94A3B8",
+      fontSize: "14px"
     }
   },
   selectList: {
-    color: '#94A3B8',
-    fontSize: '14px'
+    color: "#94A3B8",
+    fontSize: "14px"
   },
   toolbarContainer: {
-    border: '1px solid #6F6F6F33',
-    borderRadius: '10px'
+    border: "1px solid #6F6F6F33",
+    borderRadius: "10px"
   },
   toolBar: {
-    padding: '5px'
+    padding: "5px"
   },
   colorButtons: {
     "& .buttonsWrpr": {
@@ -191,17 +198,17 @@ const FormStyles = () => ({
     }
   },
   moreOption: {
-    background: '#F4F4F4',
-    borderRadius: '8px'
+    background: "#F4F4F4",
+    borderRadius: "8px"
   },
   dialogFooter: {
-    '&.MuiDialogActions-root': {
-      padding: '8px 24px'
+    "&.MuiDialogActions-root": {
+      padding: "8px 24px"
     }
   },
   toolButtons: {
-    width: '36px',
-    height: '36px'
+    width: "36px",
+    height: "36px"
   }
 });
 export default FormStyles;

package/dist/Editor/Elements/Form/Workflow/UserInputs.js

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import FormStyles from "./Styles";
 import Icon from "../../../common/Icon";
 import { PlusIcon, RestRight } from "../../../common/iconslist";
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { AllColors } from "../../Color Picker/ColorButtons";
 import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,7 +20,7 @@ const UserInputs = props => {
   const variables = element?.children;
   const classes = FormStyles();
   const popupClasses = PopupToolStyle();
-  const [activeColor, setActiveColor] = useState(['#000000']);
+  const [activeColor, setActiveColor] = useState(["#000000"]);
   //state
   const [anchorEl, setAnchorEl] = useState(null);
   const [colorAnchorEl, setColorAnchorEl] = useState(null);
@@ -115,7 +115,7 @@ const UserInputs = props => {
                 title: "Current Color",
                 children: /*#__PURE__*/_jsx(IconButton, {
                   style: {
-                    borderRadius: '50px',
+                    borderRadius: "50px",
                     background: activeColor
                   }
                 })
@@ -140,6 +140,7 @@ const UserInputs = props => {
           item: true,
           children: /*#__PURE__*/_jsxs(Grid, {
             container: true,
+            alignItems: "center",
             children: [/*#__PURE__*/_jsx(Grid, {
               item: true,
               children: /*#__PURE__*/_jsx(Tooltip, {
@@ -166,12 +167,12 @@ const UserInputs = props => {
                 anchorEl: anchorEl,
                 onClose: handleClose,
                 anchorOrigin: {
-                  vertical: 'bottom',
-                  horizontal: 'right'
+                  vertical: "bottom",
+                  horizontal: "right"
                 },
                 transformOrigin: {
-                  vertical: 'top',
-                  horizontal: 'right'
+                  vertical: "top",
+                  horizontal: "right"
                 },
                 children: variables?.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
                   sx: {
@@ -188,18 +189,12 @@ const UserInputs = props => {
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
+      sx: classes.bodyTextArea,
       children: type === 2 && /*#__PURE__*/_jsx(TextareaAutosize, {
         margin: "none",
         minRows: 6,
         value: subject,
-        onChange: handleField,
-        className: classes.bodyTextArea,
-        style: {
-          border: 'none',
-          width: "96%",
-          padding: '10px',
-          outline: "none"
-        }
+        onChange: handleField
       })
     })]
   });

package/dist/Editor/Elements/Form/Workflow/index.js

@@ -127,7 +127,8 @@ const Workflow = props => {
         variant: "outlined",
         sx: {
           textTransform: 'none',
-          background: '#EBF1F9'
+          background: '#EBF1F9',
+          padding: '7px 15px'
         },
         onClick: handleAddFormWorkflow,
         size: "small",

package/dist/Editor/Elements/Grid/Grid.js

@@ -46,6 +46,7 @@ const Grid = props => {
     sectionBgColor,
     sectionBackgroundImage,
     sectionBannerSpacing,
+    sectionBorderRadius,
     gridSize
   } = element;
   const {
@@ -71,6 +72,12 @@ const Grid = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
+  const {
+    topLeft: ssTopLeft,
+    topRight: ssTopRight,
+    bottomLeft: ssBottomLeft,
+    bottomRight: ssBottomRight
+  } = sectionBorderRadius || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -289,7 +296,8 @@ const Grid = props => {
       paddingLeft: `${ssleft}px`,
       paddingRight: `${ssright}px`,
       paddingTop: `${sstop}px`,
-      paddingBottom: `${ssbottom}px`
+      paddingBottom: `${ssbottom}px`,
+      borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`
     },
     "data-path": path.join(","),
     children: /*#__PURE__*/_jsxs(GridContainer, {

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

@@ -26,5 +26,13 @@ const gridStyle = [{
     key: "sectionBannerSpacing",
     type: "bannerSpacing"
   }]
+}, {
+  tab: "Border",
+  value: "sectionBorderRadius",
+  fields: [{
+    label: "Border",
+    key: "sectionBorderRadius",
+    type: "borderRadius"
+  }]
 }];
 export default gridStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"