@flozy/editor 1.6.5 → 1.6.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. package/dist/Editor/CommonEditor.js +55 -100
  2. package/dist/Editor/DialogWrapper.js +3 -0
  3. package/dist/Editor/Editor.css +3 -7
  4. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -3
  5. package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +12 -9
  6. package/dist/Editor/Elements/Carousel/Carousel.js +1 -1
  7. package/dist/Editor/Elements/Color Picker/ColorButtons.js +29 -13
  8. package/dist/Editor/Elements/Color Picker/Styles.js +4 -4
  9. package/dist/Editor/Elements/Form/Form.js +23 -1
  10. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +178 -0
  11. package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +139 -0
  12. package/dist/Editor/Elements/Form/Workflow/MoreOptions.js +64 -0
  13. package/dist/Editor/Elements/Form/Workflow/Styles.js +207 -0
  14. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +207 -0
  15. package/dist/Editor/Elements/Form/Workflow/constant.js +3 -0
  16. package/dist/Editor/Elements/Form/Workflow/index.js +179 -0
  17. package/dist/Editor/Elements/Grid/GridItem.js +8 -6
  18. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +1 -2
  19. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +1 -1
  20. package/dist/Editor/Elements/Signature/Signed.js +13 -2
  21. package/dist/Editor/Elements/SimpleText.js +7 -5
  22. package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -2
  23. package/dist/Editor/Elements/TopBanner/TopBannerButton.js +0 -1
  24. package/dist/Editor/Styles/EditorStyles.js +16 -5
  25. package/dist/Editor/Toolbar/Mini/Styles.js +4 -2
  26. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +2 -2
  27. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +4 -14
  28. package/dist/Editor/Toolbar/Toolbar.js +2 -1
  29. package/dist/Editor/Toolbar/toolbarGroups.js +2 -1
  30. package/dist/Editor/common/Icon.js +5 -3
  31. package/dist/Editor/common/ImageSelector/ImageSelector.js +1 -1
  32. package/dist/Editor/common/MentionsPopup/Styles.js +6 -3
  33. package/dist/Editor/common/StyleBuilder/gridItemStyle.js +29 -0
  34. package/dist/Editor/common/iconslist.js +67 -1
  35. package/dist/Editor/hooks/useMentions.js +0 -26
  36. package/dist/Editor/utils/embed.js +14 -10
  37. package/dist/Editor/utils/emoji.js +0 -1
  38. package/dist/Editor/utils/form.js +1 -0
  39. package/dist/Editor/utils/insertAppHeader.js +66 -12
  40. package/package.json +3 -2
@@ -0,0 +1,179 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from "@mui/material";
3
+ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
4
+ import FormStyles from "./Styles";
5
+ import FormWorkflow from "./FormWorkflow";
6
+
7
+ //Constants
8
+ import { minutes, hours, days } from './constant';
9
+ import ListWorkflow from "./ListWorkflow";
10
+ import { PlusIcon } from "../../../common/iconslist";
11
+ import { jsx as _jsx } from "react/jsx-runtime";
12
+ import { jsxs as _jsxs } from "react/jsx-runtime";
13
+ const Workflow = props => {
14
+ const {
15
+ openWorkflow,
16
+ element,
17
+ closeWorkflow,
18
+ onSave
19
+ } = props;
20
+ const {
21
+ workflow
22
+ } = element;
23
+ const classes = FormStyles();
24
+ const [workflowList, setWorkflowList] = useState([]);
25
+ const [formData, setFormData] = useState(false);
26
+ const [schedule, setSchedule] = useState('immediately');
27
+ const [scheduleEvery, setScheduleEvery] = useState('min');
28
+ const currentInstant = scheduleEvery === 'min' ? minutes : scheduleEvery === 'hr' ? hours : scheduleEvery === 'day' ? days : [];
29
+ const [scheduleOn, setScheduleOn] = useState(currentInstant[0]);
30
+ const [subject, setSubject] = useState('');
31
+ const [bodyData, setBodyData] = useState('');
32
+ const [flowEdited, setFlowEdited] = useState({
33
+ isEdited: false,
34
+ listIndex: null
35
+ });
36
+ useEffect(() => {
37
+ setWorkflowList(workflow || []);
38
+ }, [workflow]);
39
+ useEffect(() => {
40
+ setScheduleOn(currentInstant[0]);
41
+ }, [currentInstant]);
42
+ const handleAddFormWorkflow = () => {
43
+ setFormData(true);
44
+ };
45
+ const onFormBack = () => {
46
+ setFormData(false);
47
+ setBodyData('');
48
+ setSubject('');
49
+ setSchedule('immediately');
50
+ };
51
+ const saveFormWorkflow = () => {
52
+ let workflowData = [...workflowList];
53
+ let data = {
54
+ schedule_type: schedule,
55
+ schedule_every: schedule === 'after' ? scheduleEvery : 0,
56
+ schedule_on: schedule === 'after' ? scheduleOn : 0,
57
+ subject_data: subject,
58
+ body_data: bodyData
59
+ };
60
+ if (flowEdited.isEdited) {
61
+ workflowData[flowEdited.listIndex] = data;
62
+ } else {
63
+ workflowData.push(data);
64
+ }
65
+ let saveData = {
66
+ workflow: workflowData
67
+ };
68
+ onSave(saveData);
69
+ setFormData(false);
70
+ setBodyData('');
71
+ setSubject('');
72
+ setSchedule('immediately');
73
+ setFlowEdited({
74
+ isEdited: false,
75
+ listIndex: null
76
+ });
77
+ };
78
+ const handleEditFormWorkflow = index => {
79
+ const result = workflowList.find((flow, indx) => indx === index);
80
+ setBodyData(result.body_data);
81
+ setSubject(result.subject_data);
82
+ setSchedule(result.schedule_type);
83
+ setFormData(true);
84
+ setFlowEdited({
85
+ isEdited: true,
86
+ listIndex: index
87
+ });
88
+ };
89
+ const handleDeleteFormWorkflow = index => {
90
+ const result = workflowList.filter((flow, indx) => indx !== index);
91
+ let saveData = {
92
+ workflow: result
93
+ };
94
+ onSave(saveData);
95
+ setWorkflowList(result);
96
+ };
97
+ const handleSelectedVariables = (data, type) => () => {
98
+ if (type === 1) {
99
+ let newString = subject.concat(` %${data.name}%`);
100
+ setSubject(newString);
101
+ } else if (type === 2) {
102
+ let newString = bodyData.concat(` %${data.name}%`);
103
+ setBodyData(newString);
104
+ }
105
+ };
106
+ const handleInputReset = type => () => {
107
+ if (type === 1) {
108
+ setSubject("");
109
+ } else if (type === 2) {
110
+ setBodyData("");
111
+ }
112
+ };
113
+ return /*#__PURE__*/_jsxs(Dialog, {
114
+ open: openWorkflow,
115
+ onClose: closeWorkflow,
116
+ fullWidth: true,
117
+ children: [/*#__PURE__*/_jsxs(DialogTitle, {
118
+ sx: classes.popupTitle,
119
+ style: {
120
+ padding: formData ? '16px 12px' : '16px 24px',
121
+ justifyContent: !formData ? "space-between" : ""
122
+ },
123
+ children: [formData && /*#__PURE__*/_jsx(IconButton, {
124
+ onClick: onFormBack,
125
+ children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
126
+ }), "Follow-Up Email", !formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(Button, {
127
+ variant: "outlined",
128
+ sx: {
129
+ textTransform: 'none',
130
+ background: '#EBF1F9'
131
+ },
132
+ onClick: handleAddFormWorkflow,
133
+ size: "small",
134
+ startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
135
+ children: " New Email"
136
+ })]
137
+ }), /*#__PURE__*/_jsxs(DialogContent, {
138
+ dividers: true,
139
+ children: [!formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(ListWorkflow, {
140
+ workflow: workflowList,
141
+ handleEditFormWorkflow: handleEditFormWorkflow,
142
+ handleDeleteFormWorkflow: handleDeleteFormWorkflow
143
+ }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(FormWorkflow, {
144
+ subject: subject,
145
+ schedule: schedule,
146
+ bodyData: bodyData,
147
+ element: element,
148
+ currentInstant: currentInstant,
149
+ scheduleEvery: scheduleEvery,
150
+ scheduleOn: scheduleOn,
151
+ onFormBack: onFormBack,
152
+ setSubject: setSubject,
153
+ setBodyData: setBodyData,
154
+ setSchedule: setSchedule,
155
+ setScheduleEvery: setScheduleEvery,
156
+ setScheduleOn: setScheduleOn,
157
+ handleSelectedVariables: handleSelectedVariables,
158
+ handleInputReset: handleInputReset
159
+ })]
160
+ }), /*#__PURE__*/_jsxs(DialogActions, {
161
+ sx: classes.dialogFooter,
162
+ children: [/*#__PURE__*/_jsx(Button, {
163
+ color: "primary",
164
+ sx: classes.closeBtn,
165
+ variant: "outlined",
166
+ onClick: closeWorkflow,
167
+ size: "small",
168
+ children: "Close"
169
+ }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(Button, {
170
+ sx: classes.saveBtn,
171
+ variant: "contained",
172
+ onClick: saveFormWorkflow,
173
+ size: "small",
174
+ children: "Save"
175
+ })]
176
+ })]
177
+ });
178
+ };
179
+ export default Workflow;
@@ -32,7 +32,8 @@ const GridItem = props => {
32
32
  margin,
33
33
  bgColorHover,
34
34
  borderColorHover,
35
- textColor
35
+ textColor,
36
+ animation
36
37
  } = element;
37
38
  const {
38
39
  left,
@@ -126,6 +127,10 @@ const GridItem = props => {
126
127
  display: "flex",
127
128
  flexDirection: flexDirection || "column",
128
129
  background: bgColor || "transparent",
130
+ borderColor: borderColor || "transparent",
131
+ borderWidth: borderWidth || "1px",
132
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
133
+ borderStyle: borderStyle || "solid",
129
134
  alignItems: horizantal,
130
135
  justifyContent: vertical,
131
136
  width: `${itemWidth}%`,
@@ -159,7 +164,7 @@ const GridItem = props => {
159
164
  children: " "
160
165
  }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
161
166
  }), /*#__PURE__*/_jsx(Box, {
162
- className: "gi-inner-cw",
167
+ className: `gi-inner-cw ${animation || ""}`,
163
168
  component: "div",
164
169
  "data-path": path.join(","),
165
170
  sx: {
@@ -171,10 +176,7 @@ const GridItem = props => {
171
176
  paddingBottom: `${bottom}px`,
172
177
  justifyContent: vertical,
173
178
  height: gridHeight || "100%",
174
- borderColor: borderColor || "transparent",
175
- borderWidth: borderWidth || "1px",
176
- borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
177
- borderStyle: borderStyle || "solid",
179
+ width: "100%",
178
180
  color: textColor || "#000",
179
181
  "&:hover": {
180
182
  borderColor: borderColorHover || borderColor || "transparent"
@@ -13,8 +13,7 @@ const InlineIcon = props => {
13
13
  textColor,
14
14
  bannerSpacing,
15
15
  borderRadius,
16
- borderColor,
17
- icon
16
+ borderColor
18
17
  } = element;
19
18
  const {
20
19
  left,
@@ -14,7 +14,7 @@ const DrawSignature = props => {
14
14
  } = props;
15
15
  const [uploading, setUploading] = useState(false);
16
16
  const onSigned = async () => {
17
- const strImage = canvasRef.toDataURL();
17
+ const strImage = canvasRef.getTrimmedCanvas().toDataURL();
18
18
  setUploading(true);
19
19
  const result = await services("uploadFile", {
20
20
  image: strImage
@@ -37,8 +37,9 @@ const Signed = props => {
37
37
  src: signature,
38
38
  alt: "signature",
39
39
  style: {
40
- width: "150px",
41
- height: "auto"
40
+ width: "200px",
41
+ height: "auto",
42
+ marginBottom: "4px"
42
43
  }
43
44
  });
44
45
  } else if (signedText) {
@@ -65,12 +66,22 @@ const Signed = props => {
65
66
  }) : null, /*#__PURE__*/_jsxs("button", {
66
67
  className: "signed-btn",
67
68
  onClick: onSelect,
69
+ style: {
70
+ background: "transparent",
71
+ border: "none",
72
+ textAlign: "left"
73
+ },
68
74
  children: [renderSign(), /*#__PURE__*/_jsx("div", {
69
75
  style: {
70
76
  fontWeight: "bold"
71
77
  },
72
78
  children: signedBy || ""
73
79
  }), /*#__PURE__*/_jsx("div", {
80
+ style: {
81
+ fontSize: "10px",
82
+ color: "#ccc",
83
+ marginTop: "4px"
84
+ },
74
85
  children: formatDate(signedOn, "MM/DD/YYYY")
75
86
  })]
76
87
  })]
@@ -32,14 +32,16 @@ const SimpleText = props => {
32
32
  const {
33
33
  element,
34
34
  attributes,
35
- children
35
+ children,
36
+ customProps
36
37
  } = props;
38
+ const {
39
+ readOnly
40
+ } = customProps;
37
41
  const classes = SimpleTextStyle();
38
42
  const editor = useSlateStatic();
39
43
  const selected = useSelected();
40
44
  const path = ReactEditor.findPath(editor, element);
41
- // const parentPath = Path.parent(path);
42
- // const parentNode = Node.get(editor, parentPath);
43
45
  const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
44
46
  const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
45
47
  return /*#__PURE__*/_jsxs(Box, {
@@ -47,13 +49,13 @@ const SimpleText = props => {
47
49
  ...attributes,
48
50
  className: `simple-text`,
49
51
  sx: classes.root,
50
- children: [children, selected && noContent ? /*#__PURE__*/_jsxs("span", {
52
+ children: [children, selected && noContent && !readOnly ? /*#__PURE__*/_jsxs("span", {
51
53
  className: "placeholder-simple-text",
52
54
  children: ["Type ", /*#__PURE__*/_jsx("span", {
53
55
  className: "bg-pad-sl",
54
56
  children: "/"
55
57
  }), " for browse elements"]
56
- }) : null, emptyEditor ? /*#__PURE__*/_jsx("span", {
58
+ }) : null, emptyEditor && !readOnly ? /*#__PURE__*/_jsx("span", {
57
59
  className: "placeholder-simple-text",
58
60
  children: "Write Something..."
59
61
  }) : null]
@@ -82,10 +82,10 @@ const TopBanner = props => {
82
82
  src: url,
83
83
  alt: "Top Banner",
84
84
  style: {
85
- width: "90%",
85
+ width: "100%",
86
86
  height: "320px",
87
87
  objectFit: "cover",
88
- borderRadius: "12px",
88
+ borderRadius: "0px",
89
89
  margin: "0px 0px"
90
90
  }
91
91
  }), !readOnly ? /*#__PURE__*/_jsx(TopBannerToolbar, {
@@ -14,7 +14,6 @@ const TopBannerButton = props => {
14
14
  } = props;
15
15
  const [open, setOpen] = useState(false);
16
16
  const onSelectImage = url => {
17
- console.log(url);
18
17
  if (url) {
19
18
  insertTopBanner(editor, {
20
19
  url
@@ -3,23 +3,34 @@ const editorStyles = ({
3
3
  }) => ({
4
4
  root: {
5
5
  display: "flex",
6
- flexDirection: "column",
7
6
  position: "relative",
8
- padding: "0 8px"
7
+ padding: "0px",
8
+ alignItems: "center",
9
+ justifyContent: "center"
9
10
  },
10
11
  slateWrapper: {
12
+ paddingTop: "0px",
11
13
  height: `${window.innerHeight - padHeight}px`,
12
- overflow: "auto",
14
+ width: "100%",
15
+ overflowY: "auto",
16
+ overflowX: "hidden",
13
17
  display: "flex",
14
18
  flexDirection: "column",
19
+ alignItems: "center",
20
+ "& .max-content": {
21
+ width: "100%",
22
+ display: "flex",
23
+ flex: 1,
24
+ flexDirection: "column",
25
+ paddingBottom: "18px"
26
+ },
15
27
  "& .scroll-area": {
16
28
  display: "flex",
17
29
  justifyContent: "center",
18
- // minHeight: "100vh",
19
30
  flex: 1
20
31
  },
21
32
  "& .editor-wrapper": {
22
- maxWidth: "90%",
33
+ maxWidth: "1440px",
23
34
  height: "100%",
24
35
  backgroundColor: "#FFF",
25
36
  overflow: "visible"
@@ -5,16 +5,18 @@ const miniToolbarStyles = () => ({
5
5
  justifyContent: "center",
6
6
  alignItems: "center",
7
7
  position: "absolute",
8
- bottom: "-12px",
8
+ bottom: "-15px",
9
9
  left: 0,
10
10
  right: 0,
11
11
  margin: "auto",
12
12
  border: "1px solid #D8DDE1",
13
13
  borderRadius: "22px",
14
- width: "200px",
14
+ width: "fit-content",
15
15
  height: "37px",
16
16
  zIndex: 1000,
17
17
  background: "#FFF",
18
+ boxShadow: "1px 2px 15px rgba(37, 99, 235, 0.25)",
19
+ padding: "0px 8px",
18
20
  "& button": {
19
21
  "& svg": {
20
22
  stroke: "#64748B"
@@ -205,8 +205,8 @@ const usePopupStyle = () => ({
205
205
  "&:before": {
206
206
  content: '" "',
207
207
  position: "absolute",
208
- top: "-5px",
209
- left: "-5px",
208
+ top: "-2px",
209
+ left: "-2px",
210
210
  width: "calc(100% + 4px)",
211
211
  height: "calc(100% + 4px)",
212
212
  border: "3px solid blue",
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Button, ButtonGroup, Grid, Popover, Typography } from "@mui/material";
2
+ import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
3
3
  import WidthFullIcon from "@mui/icons-material/WidthFull";
4
4
  import WidthNormalIcon from "@mui/icons-material/WidthNormal";
5
5
  import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
@@ -327,22 +327,12 @@ const TextFormat = props => {
327
327
  },
328
328
  children: "Full width"
329
329
  })]
330
- }), /*#__PURE__*/_jsx(Popover, {
330
+ }), /*#__PURE__*/_jsx(AllColors, {
331
331
  open: open,
332
332
  anchorEl: anchorEl,
333
- anchorOrigin: {
334
- vertical: "bottom",
335
- horizontal: "center"
336
- },
337
- transformOrigin: {
338
- vertical: "top",
339
- horizontal: "center"
340
- },
341
333
  onClose: onClosePicker,
342
- children: /*#__PURE__*/_jsx(AllColors, {
343
- classes: classes,
344
- onSelect: onSelectColor
345
- })
334
+ classes: classes,
335
+ onSelect: onSelectColor
346
336
  })]
347
337
  });
348
338
  };
@@ -167,7 +167,8 @@ export const RenderToolbarIcon = props => {
167
167
  case "app-header":
168
168
  return /*#__PURE__*/_jsx(AppHeaderButton, {
169
169
  editor: editor,
170
- customProps: customProps
170
+ customProps: customProps,
171
+ icoBtnType: icoBtnType
171
172
  }, element.id);
172
173
  case "form":
173
174
  return /*#__PURE__*/_jsx(FormButton, {
@@ -210,7 +210,8 @@ export const toolbarGroups = [[{
210
210
  }, {
211
211
  id: 37,
212
212
  format: "appHeader",
213
- type: "app-header"
213
+ type: "app-header",
214
+ group: "elements"
214
215
  }, {
215
216
  id: 38,
216
217
  format: "form",
@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
7
7
  import { SiLatex } from "react-icons/si";
8
8
  import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
9
9
  import { IoIosImage, IoIosLink, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
10
- import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon } from "./iconslist";
10
+ import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal } from "./iconslist";
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  const iconList = {
13
13
  fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
@@ -77,7 +77,7 @@ const iconList = {
77
77
  fill: "#64748B"
78
78
  }),
79
79
  // link: <MdInsertLink size={20} />,
80
- link: /*#__PURE__*/_jsx(IoIosLink, {
80
+ link: /*#__PURE__*/_jsx(LinkIcon, {
81
81
  size: 20
82
82
  }),
83
83
  // image: <MdImage size={20} />,
@@ -181,7 +181,9 @@ const iconList = {
181
181
  }),
182
182
  accordionArrowDown: /*#__PURE__*/_jsx(IoMdArrowDropdownCircle, {
183
183
  size: 20
184
- })
184
+ }),
185
+ appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
186
+ moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {})
185
187
  };
186
188
  const Icon = props => {
187
189
  const {
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState } from "react";
1
+ import React, { useState } from "react";
2
2
  import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography } from "@mui/material";
3
3
  import Upload from "./Options/Upload";
4
4
  import ChooseAssets from "./Options/ChooseAssets";
@@ -3,9 +3,10 @@ const usePopupStyles = () => ({
3
3
  position: "absolute",
4
4
  zIndex: 1000,
5
5
  background: "white",
6
- borderRadius: "0px",
6
+ borderRadius: "10px",
7
7
  padding: "0px",
8
- boxShadow: "0 4px 10px rgba(0,0,0,.2)"
8
+ boxShadow: "0 4px 10px rgba(0,0,0,.2)",
9
+ overflow: "hidden"
9
10
  },
10
11
  papper: {
11
12
  boxShadow: "none",
@@ -13,7 +14,8 @@ const usePopupStyles = () => ({
13
14
  height: "300px",
14
15
  overflow: "auto",
15
16
  padding: "8px",
16
- margin: "0px"
17
+ margin: "0px",
18
+ borderRadius: "10px"
17
19
  },
18
20
  groupHeader: {
19
21
  padding: "10px 8px",
@@ -26,6 +28,7 @@ const usePopupStyles = () => ({
26
28
  padding: "4px",
27
29
  cursor: "pointer",
28
30
  background: "transparent",
31
+ borderRadius: "10px",
29
32
  "&.active": {
30
33
  background: "rgba(55, 53, 47, 0.08)"
31
34
  },
@@ -28,6 +28,35 @@ const gridItemStyle = [{
28
28
  key: "borderColorHover",
29
29
  type: "color"
30
30
  }]
31
+ }, {
32
+ tab: "Animation",
33
+ value: "animation",
34
+ fields: [{
35
+ label: "Choose Animation",
36
+ key: "animation",
37
+ type: "textOptions",
38
+ options: [{
39
+ text: "No Animation",
40
+ value: "No Animation"
41
+ }, {
42
+ text: "Fade In",
43
+ value: "animate__animated animate__fadeIn"
44
+ }, {
45
+ text: "Zoom In",
46
+ value: "animate__animated animate__zoomIn"
47
+ }, {
48
+ text: "Bounce In Left",
49
+ value: "animate__animated animate__bounceInLeft"
50
+ }],
51
+ renderOption: option => {
52
+ return /*#__PURE__*/_jsx("span", {
53
+ style: {
54
+ fontFamily: option.value
55
+ },
56
+ children: option.text
57
+ });
58
+ }
59
+ }]
31
60
  }, {
32
61
  tab: "Position",
33
62
  value: "position",
@@ -1451,4 +1451,70 @@ export const FileUploadIcon = () => {
1451
1451
  strokeLinejoin: "round"
1452
1452
  })]
1453
1453
  });
1454
- };
1454
+ };
1455
+ export const RestRight = () => /*#__PURE__*/_jsxs("svg", {
1456
+ width: "20",
1457
+ height: "16",
1458
+ viewBox: "0 0 22 23",
1459
+ fill: "none",
1460
+ xmlns: "http://www.w3.org/2000/svg",
1461
+ children: [/*#__PURE__*/_jsx("path", {
1462
+ d: "M13.6474 5.31C12.8499 5.07167 11.9699 4.91583 10.9983 4.91583C6.60745 4.91583 3.05078 8.4725 3.05078 12.8633C3.05078 17.2633 6.60745 20.82 10.9983 20.82C15.3891 20.82 18.9458 17.2633 18.9458 12.8725C18.9458 11.2408 18.4508 9.71917 17.6074 8.45417",
1463
+ stroke: "#64748B",
1464
+ strokeWidth: "1.5",
1465
+ strokeLinecap: "round",
1466
+ strokeLinejoin: "round"
1467
+ }), /*#__PURE__*/_jsx("path", {
1468
+ d: "M14.7859 5.53L12.1367 2.48666",
1469
+ stroke: "#64748B",
1470
+ strokeWidth: "1.5",
1471
+ strokeLinecap: "round",
1472
+ strokeLinejoin: "round"
1473
+ }), /*#__PURE__*/_jsx("path", {
1474
+ d: "M14.7845 5.53L11.6953 7.785",
1475
+ stroke: "#64748B",
1476
+ strokeWidth: "1.5",
1477
+ strokeLinecap: "round",
1478
+ strokeLinejoin: "round"
1479
+ })]
1480
+ });
1481
+ export const MoreHorizontal = ({
1482
+ width = "22",
1483
+ height = "22"
1484
+ }) => /*#__PURE__*/_jsxs("svg", {
1485
+ xmlns: "http://www.w3.org/2000/svg",
1486
+ width: width,
1487
+ height: height,
1488
+ viewBox: "0 0 22 22",
1489
+ fill: "none",
1490
+ children: [/*#__PURE__*/_jsx("path", {
1491
+ d: "M4.58333 9.16797C3.575 9.16797 2.75 9.99297 2.75 11.0013C2.75 12.0096 3.575 12.8346 4.58333 12.8346C5.59167 12.8346 6.41667 12.0096 6.41667 11.0013C6.41667 9.99297 5.59167 9.16797 4.58333 9.16797Z",
1492
+ fill: "#64748B"
1493
+ }), /*#__PURE__*/_jsx("path", {
1494
+ d: "M17.4168 9.16797C16.4085 9.16797 15.5835 9.99297 15.5835 11.0013C15.5835 12.0096 16.4085 12.8346 17.4168 12.8346C18.4252 12.8346 19.2502 12.0096 19.2502 11.0013C19.2502 9.99297 18.4252 9.16797 17.4168 9.16797Z",
1495
+ fill: "#64748B"
1496
+ }), /*#__PURE__*/_jsx("path", {
1497
+ d: "M10.9998 9.16797C9.9915 9.16797 9.1665 9.99297 9.1665 11.0013C9.1665 12.0096 9.9915 12.8346 10.9998 12.8346C12.0082 12.8346 12.8332 12.0096 12.8332 11.0013C12.8332 9.99297 12.0082 9.16797 10.9998 9.16797Z",
1498
+ fill: "#64748B"
1499
+ })]
1500
+ });
1501
+ export const PlusIcon = props => /*#__PURE__*/_jsxs("svg", {
1502
+ width: "12",
1503
+ height: "12",
1504
+ viewBox: "0 0 12 12",
1505
+ fill: "none",
1506
+ xmlns: "http://www.w3.org/2000/svg",
1507
+ children: [/*#__PURE__*/_jsx("path", {
1508
+ d: "M6 1.33331V10.6666",
1509
+ stroke: "#2563EB",
1510
+ strokeWidth: "1.4",
1511
+ strokeLinecap: "round",
1512
+ strokeLinejoin: "round"
1513
+ }), /*#__PURE__*/_jsx("path", {
1514
+ d: "M1.33203 6H10.6654",
1515
+ stroke: "#2563EB",
1516
+ strokeWidth: "1.4",
1517
+ strokeLinecap: "round",
1518
+ strokeLinejoin: "round"
1519
+ })]
1520
+ });