@flozy/editor 1.4.5 → 1.4.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. package/dist/Editor/CommonEditor.js +4 -0
  2. package/dist/Editor/Elements/Button/EditorButton.js +9 -5
  3. package/dist/Editor/Elements/ChipText/ChipText.js +79 -9
  4. package/dist/Editor/Elements/ChipText/ChipTextButton.js +11 -50
  5. package/dist/Editor/Elements/Color Picker/ColorPicker.js +25 -85
  6. package/dist/Editor/Elements/Embed/Embed.css +53 -5
  7. package/dist/Editor/Elements/Embed/link.js +58 -0
  8. package/dist/Editor/Elements/Form/Form.js +87 -37
  9. package/dist/Editor/Elements/Form/FormElements/FormText.js +13 -4
  10. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +13 -5
  11. package/dist/Editor/Elements/Grid/GridItem.js +9 -3
  12. package/dist/Editor/Elements/InlineIcon/InlineIcon.js +54 -0
  13. package/dist/Editor/Elements/InlineIcon/InlineIconButton.js +69 -0
  14. package/dist/Editor/Elements/InlineIcon/InlineIconPopup.js +24 -0
  15. package/dist/Editor/Elements/Link/Link.js +24 -0
  16. package/dist/Editor/Toolbar/Toolbar.js +6 -0
  17. package/dist/Editor/Toolbar/toolbarGroups.js +7 -1
  18. package/dist/Editor/common/ColorPickerButton.js +12 -2
  19. package/dist/Editor/common/StyleBuilder/buttonStyle.js +29 -2
  20. package/dist/Editor/common/StyleBuilder/chipTextStyle.js +24 -0
  21. package/dist/Editor/common/StyleBuilder/fieldStyle.js +30 -2
  22. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +1 -1
  23. package/dist/Editor/common/StyleBuilder/formButtonStyle.js +5 -0
  24. package/dist/Editor/common/StyleBuilder/formStyle.js +62 -2
  25. package/dist/Editor/hooks/withCommon.js +2 -0
  26. package/dist/Editor/plugins/withLinks.js +1 -1
  27. package/dist/Editor/utils/SlateUtilityFunctions.js +18 -0
  28. package/dist/Editor/utils/embed.js +22 -2
  29. package/dist/Editor/utils/insertChipText.js +1 -1
  30. package/dist/Editor/utils/insertIconText.js +50 -0
  31. package/package.json +2 -1
@@ -27,8 +27,30 @@ const Form = props => {
27
27
  const {
28
28
  buttonProps,
29
29
  textColor,
30
- formName
30
+ formName,
31
+ borderWidth,
32
+ borderColor,
33
+ borderStyle,
34
+ borderRadius,
35
+ bannerSpacing,
36
+ bgColor,
37
+ formTitle,
38
+ textSize,
39
+ fontFamily,
40
+ textAlign
31
41
  } = element;
42
+ const {
43
+ left,
44
+ top,
45
+ right,
46
+ bottom
47
+ } = bannerSpacing || {};
48
+ const {
49
+ topLeft,
50
+ topRight,
51
+ bottomLeft,
52
+ bottomRight
53
+ } = borderRadius || {};
32
54
  const btnR = buttonProps?.borderRadius || {};
33
55
  const btnSpacing = buttonProps?.bannerSpacing || {};
34
56
  const btnAlign = buttonProps?.alignment || {};
@@ -152,6 +174,10 @@ const Form = props => {
152
174
  return /*#__PURE__*/_jsxs("div", {
153
175
  className: "",
154
176
  contentEditable: false,
177
+ style: {
178
+ backgroundColor: "#ccc",
179
+ width: "fit-content"
180
+ },
155
181
  children: [/*#__PURE__*/_jsx(Tooltip, {
156
182
  title: "Form Settings",
157
183
  arrow: true,
@@ -187,47 +213,71 @@ const Form = props => {
187
213
  id: `${formName}`,
188
214
  onSubmit: handleSubmit,
189
215
  style: {
190
- color: textColor || "#FFF"
216
+ color: textColor || "#FFF",
217
+ borderColor: borderColor || "transparent",
218
+ borderWidth: borderWidth || "1px",
219
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
220
+ borderStyle: borderStyle || "solid",
221
+ background: bgColor || "transparent",
222
+ paddingLeft: `${left}px`,
223
+ paddingRight: `${right}px`,
224
+ paddingTop: `${top}px`,
225
+ paddingBottom: `${bottom}px`
191
226
  },
192
227
  ref: formEle,
193
- children: [/*#__PURE__*/_jsxs(Grid, {
194
- container: true,
228
+ children: [/*#__PURE__*/_jsx(Grid, {
229
+ className: "form-grid",
230
+ item: true,
231
+ xs: 12,
195
232
  spacing: 2,
196
- children: [children, /*#__PURE__*/_jsx(Grid, {
197
- item: true,
198
- xs: buttonProps?.grid || 6,
199
- className: "form-btn-wrpr",
200
- contentEditable: false,
201
- style: {
202
- display: "flex",
203
- justifyContent: btnAlign?.horizantal || "start",
204
- alignItems: btnAlign?.vertical || "start"
205
- },
206
- children: /*#__PURE__*/_jsx("button", {
207
- onClick: onSubmitClick,
208
- disabled: loading,
233
+ children: /*#__PURE__*/_jsxs(Grid, {
234
+ container: true,
235
+ spacing: 2,
236
+ children: [/*#__PURE__*/_jsx("legend", {
209
237
  style: {
210
- background: buttonProps?.bgColor || "rgb(30, 75, 122)",
211
- borderWidth: "1px",
212
- borderBlockStyle: "solid",
213
- ...btnBorderStyle,
214
- borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
215
- paddingLeft: `${btnSpacing?.left || 8}px`,
216
- paddingRight: `${btnSpacing?.right || 8}px`,
217
- paddingTop: `${btnSpacing?.top || 8}px`,
218
- paddingBottom: `${btnSpacing?.bottom || 8}px`,
219
- marginLeft: `${btnM?.left || 0}px`,
220
- marginRight: `${btnM?.right || 0}px`,
221
- marginTop: `${btnM?.top || 0}px`,
222
- marginBottom: `${btnM?.bottom || 0}px`,
223
- color: `${buttonProps?.textColor || "#FFFFFF"}`,
224
- fontSize: buttonProps?.textSize || "inherit",
225
- height: "fit-content",
226
- fontFamily: buttonProps?.fontFamily || "PoppinsRegular"
238
+ fontSize: textSize || "inherit",
239
+ fontFamily: fontFamily || "PoppinsRegular",
240
+ textAlign: textAlign || "left",
241
+ width: "100%"
227
242
  },
228
- children: buttonProps?.label || "Submit"
229
- })
230
- })]
243
+ children: formTitle
244
+ }), children, /*#__PURE__*/_jsx(Grid, {
245
+ item: true,
246
+ xs: buttonProps?.grid || 6,
247
+ className: "form-btn-wrpr",
248
+ contentEditable: false,
249
+ style: {
250
+ display: "flex",
251
+ justifyContent: btnAlign?.horizantal || "start",
252
+ alignItems: btnAlign?.vertical || "start"
253
+ },
254
+ children: /*#__PURE__*/_jsx("button", {
255
+ onClick: onSubmitClick,
256
+ disabled: loading,
257
+ style: {
258
+ background: buttonProps?.bgColor || "rgb(30, 75, 122)",
259
+ borderWidth: "1px",
260
+ borderBlockStyle: "solid",
261
+ ...btnBorderStyle,
262
+ borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
263
+ paddingLeft: `${btnSpacing?.left || 8}px`,
264
+ paddingRight: `${btnSpacing?.right || 8}px`,
265
+ paddingTop: `${btnSpacing?.top || 8}px`,
266
+ paddingBottom: `${btnSpacing?.bottom || 8}px`,
267
+ marginLeft: `${btnM?.left || 0}px`,
268
+ marginRight: `${btnM?.right || 0}px`,
269
+ marginTop: `${btnM?.top || 0}px`,
270
+ marginBottom: `${btnM?.bottom || 0}px`,
271
+ color: `${buttonProps?.textColor || "#FFFFFF"}`,
272
+ fontSize: buttonProps?.textSize || "inherit",
273
+ height: "fit-content",
274
+ fontFamily: buttonProps?.fontFamily || "PoppinsRegular",
275
+ width: buttonProps?.fullWidth ? "100%" : "auto"
276
+ },
277
+ children: buttonProps?.label || "Submit"
278
+ })
279
+ })]
280
+ })
231
281
  }), loading && /*#__PURE__*/_jsx("div", {
232
282
  style: {
233
283
  position: "absolute",
@@ -5,10 +5,14 @@ const FormText = props => {
5
5
  fieldProps
6
6
  } = props;
7
7
  const {
8
- borderColor,
9
8
  bannerSpacing,
9
+ height,
10
10
  borderRadius,
11
- height
11
+ borderStyle,
12
+ borderWidth,
13
+ borderColor,
14
+ textColor,
15
+ bgColor
12
16
  } = fieldProps;
13
17
  const {
14
18
  left,
@@ -37,12 +41,17 @@ const FormText = props => {
37
41
  style: {
38
42
  width: "100%",
39
43
  border: `1px solid ${borderColor || "#FFF"}`,
40
- borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
41
44
  paddingLeft: `${left || 8}px`,
42
45
  paddingRight: `${right || 8}px`,
43
46
  paddingTop: `${top || 8}px`,
44
47
  paddingBottom: `${bottom || 8}px`,
45
- height: height || "auto"
48
+ height: height || "auto",
49
+ borderColor: borderColor || "transparent",
50
+ borderWidth: borderWidth || "1px",
51
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
52
+ borderStyle: borderStyle || "solid",
53
+ color: textColor || "#000",
54
+ background: bgColor || "transparent"
46
55
  }
47
56
  })
48
57
  });
@@ -5,10 +5,14 @@ const FormTextArea = props => {
5
5
  fieldProps
6
6
  } = props;
7
7
  const {
8
- borderColor,
9
8
  bannerSpacing,
9
+ height,
10
10
  borderRadius,
11
- height
11
+ borderStyle,
12
+ borderWidth,
13
+ borderColor,
14
+ textColor,
15
+ bgColor
12
16
  } = fieldProps;
13
17
  const {
14
18
  left,
@@ -22,7 +26,6 @@ const FormTextArea = props => {
22
26
  bottomLeft,
23
27
  bottomRight
24
28
  } = borderRadius || {};
25
- console.log(fieldProps);
26
29
  const onChange = e => {
27
30
  e.preventDefault();
28
31
  };
@@ -38,12 +41,17 @@ const FormTextArea = props => {
38
41
  style: {
39
42
  width: "100%",
40
43
  border: `1px solid ${borderColor || "#FFF"}`,
41
- borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
42
44
  paddingLeft: `${left || 8}px`,
43
45
  paddingRight: `${right || 8}px`,
44
46
  paddingTop: `${top || 8}px`,
45
47
  paddingBottom: `${bottom || 8}px`,
46
- height: height || "150px"
48
+ height: height || "150px",
49
+ borderColor: borderColor || "transparent",
50
+ borderWidth: borderWidth || "1px",
51
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
52
+ borderStyle: borderStyle || "solid",
53
+ color: textColor || "#000",
54
+ background: bgColor || "transparent"
47
55
  }
48
56
  })
49
57
  });
@@ -2,7 +2,7 @@ import React, { useState } from "react";
2
2
  import { Transforms } from "slate";
3
3
  import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
4
4
  import GridItemPopup from "./GridItemPopup";
5
- import { IconButton, Tooltip, Box, Grid as GridContainer } from "@mui/material";
5
+ import { IconButton, Tooltip, Box } from "@mui/material";
6
6
  import SettingsIcon from "@mui/icons-material/Settings";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -43,6 +43,12 @@ const GridItem = props => {
43
43
  horizantal,
44
44
  flexDirection
45
45
  } = alignment || {};
46
+ const {
47
+ topLeft,
48
+ topRight,
49
+ bottomLeft,
50
+ bottomRight
51
+ } = borderRadius || {};
46
52
  const editor = useSlateStatic();
47
53
  const selected = useSelected();
48
54
  const itemWidth = (grid || 6) / 12 * 100;
@@ -98,7 +104,7 @@ const GridItem = props => {
98
104
  sx: {
99
105
  display: "flex",
100
106
  flexDirection: flexDirection || "column",
101
- backgroundColor: bgColor || "transparent",
107
+ background: bgColor || "transparent",
102
108
  alignItems: horizantal,
103
109
  justifyContent: vertical,
104
110
  width: `${itemWidth}%`,
@@ -129,7 +135,7 @@ const GridItem = props => {
129
135
  height: gridHeight || "auto",
130
136
  borderColor: borderColor || "transparent",
131
137
  borderWidth: borderWidth || "1px",
132
- borderRadius: borderRadius || "0px",
138
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
133
139
  borderStyle: borderStyle || "solid",
134
140
  color: textColor || "#000",
135
141
  "&:hover": {
@@ -0,0 +1,54 @@
1
+ import React from "react";
2
+ import * as fIcons from "@mui/icons-material";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ const InlineIcon = props => {
6
+ const {
7
+ attributes,
8
+ children,
9
+ element
10
+ } = props;
11
+ const {
12
+ bgColor,
13
+ textColor,
14
+ bannerSpacing,
15
+ borderRadius,
16
+ borderColor,
17
+ icon
18
+ } = element;
19
+ const {
20
+ left,
21
+ top,
22
+ right,
23
+ bottom
24
+ } = bannerSpacing || {};
25
+ const {
26
+ topLeft,
27
+ topRight,
28
+ bottomLeft,
29
+ bottomRight
30
+ } = borderRadius || {};
31
+ const BtnIcon = fIcons["Check"];
32
+ console.log(icon);
33
+ return /*#__PURE__*/_jsxs("button", {
34
+ ...attributes,
35
+ className: "editor-icon-text",
36
+ contentEditable: false,
37
+ style: {
38
+ display: "inline",
39
+ paddingLeft: `${left}px`,
40
+ paddingRight: `${right}px`,
41
+ paddingTop: `${top}px`,
42
+ paddingBottom: `${bottom}px`,
43
+ border: borderColor ? `1px solid ${borderColor}` : "none",
44
+ borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
45
+ background: bgColor || "#CCC",
46
+ color: textColor
47
+ },
48
+ children: [/*#__PURE__*/_jsx(BtnIcon, {}), /*#__PURE__*/_jsx("div", {
49
+ contentEditable: true,
50
+ children: children
51
+ })]
52
+ });
53
+ };
54
+ export default InlineIcon;
@@ -0,0 +1,69 @@
1
+ import React, { useState } from "react";
2
+ import { Editor, Transforms } from "slate";
3
+ import { IconButton } from "@mui/material";
4
+ import SmartButtonIcon from "@mui/icons-material/SmartButton";
5
+ import { removeChipText } from "../../utils/insertChipText";
6
+ import { insertIconText } from "../../utils/insertIconText";
7
+ import ChipTextPopup from "./InlineIconPopup";
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ import { Fragment as _Fragment } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ const InlineIconButton = props => {
12
+ const {
13
+ editor,
14
+ customProps
15
+ } = props;
16
+ const [openSetttings, setOpenSettings] = useState(false);
17
+ const handleClick = () => {
18
+ const [parent, parentPath] = Editor.parent(editor, editor.selection.focus.path);
19
+ if (parent && parent?.type === "chip-text") {
20
+ setOpenSettings({
21
+ element: parent,
22
+ path: parentPath
23
+ });
24
+ // removeChipText(editor, parentPath);
25
+ } else {
26
+ insertIconText(editor, {
27
+ url: "",
28
+ showInNewTab: false
29
+ });
30
+ }
31
+ };
32
+ const onSave = data => {
33
+ const updateData = {
34
+ ...data
35
+ };
36
+ delete updateData.children;
37
+ Transforms.setNodes(editor, {
38
+ ...updateData
39
+ }, {
40
+ at: openSetttings?.path
41
+ });
42
+ onClose();
43
+ };
44
+ const onClose = () => {
45
+ setOpenSettings(false);
46
+ };
47
+ const onDelete = () => {
48
+ removeChipText(editor, openSetttings?.path);
49
+ onClose();
50
+ };
51
+ return /*#__PURE__*/_jsxs(_Fragment, {
52
+ children: [/*#__PURE__*/_jsx(IconButton, {
53
+ title: "Icon",
54
+ onClick: handleClick,
55
+ children: /*#__PURE__*/_jsx(SmartButtonIcon, {
56
+ sx: {
57
+ fill: "#64748B"
58
+ }
59
+ })
60
+ }), openSetttings !== false ? /*#__PURE__*/_jsx(ChipTextPopup, {
61
+ element: openSetttings?.element || {},
62
+ onSave: onSave,
63
+ onClose: onClose,
64
+ onDelete: onDelete,
65
+ customProps: customProps
66
+ }) : null]
67
+ });
68
+ };
69
+ export default InlineIconButton;
@@ -0,0 +1,24 @@
1
+ import React from "react";
2
+ import StyleBuilder from "../../common/StyleBuilder";
3
+ import chipTextStyle from "../../common/StyleBuilder/chipTextStyle";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const InlineIconPopup = props => {
6
+ const {
7
+ element,
8
+ onSave,
9
+ onClose,
10
+ onDelete,
11
+ customProps
12
+ } = props;
13
+ return /*#__PURE__*/_jsx(StyleBuilder, {
14
+ title: "Chip Text",
15
+ type: "ChipTextPopup",
16
+ element: element,
17
+ onSave: onSave,
18
+ onClose: onClose,
19
+ onDelete: onDelete,
20
+ renderTabs: chipTextStyle,
21
+ customProps: customProps
22
+ });
23
+ };
24
+ export default InlineIconPopup;
@@ -3,6 +3,9 @@ import { useFocused, useSelected, useSlateStatic } from "slate-react";
3
3
  import { removeLink } from "../../utils/link";
4
4
  import unlink from "../../Toolbar/toolbarIcons/unlink.svg";
5
5
  import "./styles.css";
6
+ import { GrDocumentUpload } from 'react-icons/gr';
7
+ import { insertEmbed } from "../../utils/embed";
8
+ import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
6
9
  import { jsx as _jsx } from "react/jsx-runtime";
7
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
8
11
  const Link = ({
@@ -13,6 +16,24 @@ const Link = ({
13
16
  const editor = useSlateStatic();
14
17
  const selected = useSelected();
15
18
  const focused = useFocused();
19
+ let refUrl = element.href ? element.href : element.url;
20
+ refUrl = refUrl ? refUrl.includes('http') ? refUrl : `//${refUrl}` : 'Link';
21
+ let embedUrl = refUrl;
22
+
23
+ // const urlMatch = embedUrl.match(regex);
24
+ // embedUrl = urlMatch && urlMatch.length > 0 ? urlMatch[0] : '';
25
+ if (embedUrl.includes('youtube')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/\/watch\?v=/g, '/embed/')
26
+ if (embedUrl.includes('youtu.be')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/youtu.be\//, 'youtube.com/embed/')
27
+ // Others
28
+ if (embedUrl.includes('loom')) embedUrl = embedUrl.replace(/\/share\//, '/embed/');
29
+ if (embedUrl.includes('vimeo')) embedUrl = embedUrl.replace(/\/vimeo.com\//, '/player.vimeo.com/video/');
30
+ if (embedUrl.includes('dailymotion') && embedUrl.includes('video')) embedUrl = embedUrl.replace(/www.dailymotion.com\//, 'www.dailymotion.com/embed/');
31
+ if (embedUrl.includes('dai.ly')) embedUrl = embedUrl.replace(/dai.ly\//, 'www.dailymotion.com/embed/video/');
32
+ const embedDoc = () => {
33
+ insertEmbed(editor, {
34
+ url: embedUrl
35
+ }, 'embed');
36
+ };
16
37
  return /*#__PURE__*/_jsxs("div", {
17
38
  className: "link",
18
39
  children: [/*#__PURE__*/_jsx("a", {
@@ -28,6 +49,9 @@ const Link = ({
28
49
  href: element.href,
29
50
  target: element.target,
30
51
  children: element.href
52
+ }), /*#__PURE__*/_jsx("button", {
53
+ onClick: () => embedDoc(editor),
54
+ children: /*#__PURE__*/_jsx(GrDocumentUpload, {})
31
55
  }), /*#__PURE__*/_jsx("button", {
32
56
  onClick: () => removeLink(editor),
33
57
  children: /*#__PURE__*/_jsx("img", {
@@ -23,6 +23,7 @@ import AppHeaderButton from "../Elements/AppHeader/AppHeaderButton";
23
23
  import FormButton from "../Elements/Form/FormButton.js";
24
24
  import Text from "./FormatTools/Text";
25
25
  import ChipTextButton from "../Elements/ChipText/ChipTextButton";
26
+ import InlineIconButton from "../Elements/InlineIcon/InlineIconButton";
26
27
  import "./styles.css";
27
28
  import { jsx as _jsx } from "react/jsx-runtime";
28
29
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -162,6 +163,11 @@ const Toolbar = props => {
162
163
  editor: editor,
163
164
  customProps: customProps
164
165
  }, element.id);
166
+ case "icon-text":
167
+ return /*#__PURE__*/_jsx(InlineIconButton, {
168
+ editor: editor,
169
+ customProps: customProps
170
+ }, element.id);
165
171
  default:
166
172
  return null;
167
173
  }
@@ -154,5 +154,11 @@ const toolbarGroups = [[{
154
154
  }, {
155
155
  id: 38,
156
156
  type: "form"
157
- }]];
157
+ }
158
+ // {
159
+ // id: 39,
160
+ // type: "icon-text",
161
+ // },
162
+ ]];
163
+
158
164
  export default toolbarGroups;
@@ -1,6 +1,7 @@
1
1
  import React, { useState } from "react";
2
2
  import { Grid, Button, Popover } from "@mui/material";
3
- import ColorPicker from "react-best-gradient-color-picker";
3
+ // import ColorPicker from "react-best-gradient-color-picker";
4
+ import ColorPickerTool from "react-gcolor-picker";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
7
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -35,6 +36,14 @@ const ColorPickerButton = props => {
35
36
  }), /*#__PURE__*/_jsx(Popover, {
36
37
  open: open,
37
38
  anchorEl: anchorEl,
39
+ anchorOrigin: {
40
+ vertical: "center",
41
+ horizontal: "center"
42
+ },
43
+ transformOrigin: {
44
+ vertical: "center",
45
+ horizontal: "center"
46
+ },
38
47
  onClose: handleClose,
39
48
  sx: {
40
49
  "& .MuiPaper-root": {
@@ -47,7 +56,8 @@ const ColorPickerButton = props => {
47
56
  children: /*#__PURE__*/_jsxs(Grid, {
48
57
  item: true,
49
58
  xs: 12,
50
- children: [/*#__PURE__*/_jsx(ColorPicker, {
59
+ children: [/*#__PURE__*/_jsx(ColorPickerTool, {
60
+ gradient: true,
51
61
  value: color,
52
62
  onChange: setColor
53
63
  }), /*#__PURE__*/_jsxs("div", {
@@ -83,12 +83,39 @@ const buttonStyle = [{
83
83
  type: "bannerSpacing"
84
84
  }]
85
85
  }, {
86
- tab: "Border Radius",
87
- value: "borderRadius",
86
+ tab: "Border",
87
+ value: "border",
88
88
  fields: [{
89
89
  label: "Border Radius",
90
90
  key: "borderRadius",
91
91
  type: "borderRadius"
92
+ }, {
93
+ label: "Border Width",
94
+ key: "borderWidth",
95
+ type: "text",
96
+ placeholder: "1px"
97
+ }, {
98
+ label: "Border Style",
99
+ key: "borderStyle",
100
+ type: "textOptions",
101
+ options: [{
102
+ text: "Solid",
103
+ value: "solid"
104
+ }, {
105
+ text: "Dotted",
106
+ value: "dotted"
107
+ }, {
108
+ text: "Dashed",
109
+ value: "dashed"
110
+ }],
111
+ renderOption: option => {
112
+ return /*#__PURE__*/_jsx("span", {
113
+ style: {
114
+ fontFamily: option.value
115
+ },
116
+ children: option.text
117
+ });
118
+ }
92
119
  }]
93
120
  }, {
94
121
  tab: "Colors",
@@ -1,4 +1,28 @@
1
1
  const chipTextStyle = [{
2
+ tab: "Icon",
3
+ value: "icon",
4
+ fields: [{
5
+ label: "Font Size",
6
+ key: "textSize",
7
+ type: "text",
8
+ placeholder: "16px or 1em"
9
+ }, {
10
+ label: "Icon Position",
11
+ key: "iconPosition",
12
+ type: "textOptions",
13
+ options: [{
14
+ value: "start",
15
+ label: "Start"
16
+ }, {
17
+ value: "end",
18
+ label: "End"
19
+ }]
20
+ }, {
21
+ label: "Button Icons",
22
+ key: "buttonIcon",
23
+ type: "icons"
24
+ }]
25
+ }, {
2
26
  tab: "Banner Spacing",
3
27
  value: "bannerSpacing",
4
28
  fields: [{
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  const fieldStyle = [{
2
3
  tab: "General",
3
4
  value: "general",
@@ -30,12 +31,39 @@ const fieldStyle = [{
30
31
  type: "bannerSpacing"
31
32
  }]
32
33
  }, {
33
- tab: "Border Radius",
34
- value: "borderRadius",
34
+ tab: "Border",
35
+ value: "border",
35
36
  fields: [{
36
37
  label: "Border Radius",
37
38
  key: "borderRadius",
38
39
  type: "borderRadius"
40
+ }, {
41
+ label: "Border Width",
42
+ key: "borderWidth",
43
+ type: "text",
44
+ placeholder: "1px"
45
+ }, {
46
+ label: "Border Style",
47
+ key: "borderStyle",
48
+ type: "textOptions",
49
+ options: [{
50
+ text: "Solid",
51
+ value: "solid"
52
+ }, {
53
+ text: "Dotted",
54
+ value: "dotted"
55
+ }, {
56
+ text: "Dashed",
57
+ value: "dashed"
58
+ }],
59
+ renderOption: option => {
60
+ return /*#__PURE__*/_jsx("span", {
61
+ style: {
62
+ fontFamily: option.value
63
+ },
64
+ children: option.text
65
+ });
66
+ }
39
67
  }]
40
68
  }, {
41
69
  tab: "Colors",
@@ -72,7 +72,7 @@ const Color = props => {
72
72
  color: "textSecondary",
73
73
  sx: {
74
74
  fontSize: "14px",
75
- marginBottom: '5px'
75
+ marginBottom: "5px"
76
76
  },
77
77
  children: label
78
78
  }), /*#__PURE__*/_jsx(TextField, {
@@ -30,6 +30,11 @@ const formButtonStyle = [{
30
30
  key: "textAlign",
31
31
  type: "textAlign",
32
32
  placeholder: "16px or 1em"
33
+ }, {
34
+ label: "Full Width",
35
+ key: "fullWidth",
36
+ type: "selectBox",
37
+ placeholder: "Set Button Width to full"
33
38
  }]
34
39
  }, {
35
40
  tab: "Position",