@flozy/editor 10.4.5 → 10.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (192) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +134 -18
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +46 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
  9. package/dist/Editor/Elements/Button/EditorButton.js +26 -10
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  14. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +482 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SelectV1.js +513 -0
  18. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +27 -11
  19. package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +29 -9
  20. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +17 -6
  21. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +4 -3
  22. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  23. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  24. package/dist/Editor/Elements/Embed/Image.js +3 -2
  25. package/dist/Editor/Elements/Embed/Video.js +1 -1
  26. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  27. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  28. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  29. package/dist/Editor/Elements/Form/Form.js +184 -171
  30. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  31. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  32. package/dist/Editor/Elements/Form/FormField.js +13 -6
  33. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  34. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
  35. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  36. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  37. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  38. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  39. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  40. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  41. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  42. package/dist/Editor/Elements/List/CheckList.js +3 -2
  43. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  44. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  45. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  46. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  47. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  48. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  49. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  50. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  51. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  52. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  53. package/dist/Editor/Elements/Table/Styles.js +7 -0
  54. package/dist/Editor/Elements/Table/Table.js +3 -3
  55. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  56. package/dist/Editor/Elements/Title/title.js +6 -6
  57. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  58. package/dist/Editor/MiniEditor.js +2 -1
  59. package/dist/Editor/Styles/EditorStyles.js +5 -5
  60. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  61. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  62. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  63. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  64. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  66. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  67. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  68. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  69. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  70. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  71. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  72. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  73. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  74. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  75. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  76. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  77. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  78. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  79. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  80. package/dist/Editor/common/Checkbox/index.js +46 -0
  81. package/dist/Editor/common/Checkbox/styles.js +45 -0
  82. package/dist/Editor/common/ColorPickerButton.js +41 -16
  83. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  84. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  85. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  86. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  87. package/dist/Editor/common/CustomSelect.js +43 -0
  88. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  89. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  90. package/dist/Editor/common/Icon.js +31 -1
  91. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  92. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  93. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -55
  94. package/dist/Editor/common/LinkSettings/index.js +82 -80
  95. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  96. package/dist/Editor/common/LinkSettings/style.js +209 -74
  97. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  98. package/dist/Editor/common/RadioGroup/index.js +48 -0
  99. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  100. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  101. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  102. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  103. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  104. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  105. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  111. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  112. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  113. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  114. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  115. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  116. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  117. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  118. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  119. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  120. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  121. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  122. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  123. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  124. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  125. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  126. package/dist/Editor/common/RnD/index.js +67 -38
  127. package/dist/Editor/common/Select/index.js +44 -5
  128. package/dist/Editor/common/Select/styles.js +30 -2
  129. package/dist/Editor/common/Shorthands/elements.js +65 -11
  130. package/dist/Editor/common/SnackBar/index.js +43 -0
  131. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  132. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  133. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  134. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  142. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  144. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  145. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  146. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  147. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  148. package/dist/Editor/common/Uploader.js +16 -0
  149. package/dist/Editor/common/iconListV2.js +177 -6
  150. package/dist/Editor/common/iconslist.js +24 -0
  151. package/dist/Editor/commonStyle.js +186 -62
  152. package/dist/Editor/helper/index.js +5 -1
  153. package/dist/Editor/helper/textIndeces.js +58 -0
  154. package/dist/Editor/helper/theme.js +203 -2
  155. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  156. package/dist/Editor/hooks/useMouseMove.js +8 -5
  157. package/dist/Editor/hooks/useTable.js +5 -4
  158. package/dist/Editor/hooks/useThemeValues.js +63 -0
  159. package/dist/Editor/plugins/withEmbeds.js +1 -1
  160. package/dist/Editor/plugins/withHTML.js +3 -1
  161. package/dist/Editor/plugins/withTable.js +1 -1
  162. package/dist/Editor/theme/ThemeList.js +50 -173
  163. package/dist/Editor/theme/index.js +149 -0
  164. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  165. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  166. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  167. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  168. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  169. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  170. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  171. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  172. package/dist/Editor/themeSettings/icons.js +60 -0
  173. package/dist/Editor/themeSettings/index.js +380 -0
  174. package/dist/Editor/themeSettings/style.js +299 -0
  175. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  176. package/dist/Editor/themeSettingsAI/index.js +355 -0
  177. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  178. package/dist/Editor/themeSettingsAI/style.js +332 -0
  179. package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
  180. package/dist/Editor/utils/accordion.js +14 -4
  181. package/dist/Editor/utils/button.js +1 -17
  182. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  183. package/dist/Editor/utils/draftToSlate.js +3 -2
  184. package/dist/Editor/utils/events.js +50 -6
  185. package/dist/Editor/utils/font.js +40 -37
  186. package/dist/Editor/utils/form.js +4 -4
  187. package/dist/Editor/utils/formfield.js +9 -2
  188. package/dist/Editor/utils/helper.js +210 -26
  189. package/dist/Editor/utils/insertAppHeader.js +1 -1
  190. package/dist/Editor/utils/signature.js +2 -9
  191. package/dist/Editor/utils/updateFormName.js +22 -0
  192. package/package.json +4 -4
@@ -4,7 +4,6 @@ import { Node } from "slate";
4
4
  import { useSlateStatic, ReactEditor } from "slate-react";
5
5
  import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
6
6
  import DeleteIcon from "@mui/icons-material/Delete";
7
- import BackupIcon from "@mui/icons-material/Backup";
8
7
  import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
9
8
  import FormPopup from "./FormPopup";
10
9
  import ButtonPopup from "../Button/ButtonPopup";
@@ -15,6 +14,9 @@ import Workflow from "./Workflow";
15
14
  import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
16
15
  import { validation } from "./FormElements/validations";
17
16
  import Icon from "../../common/Icon";
17
+ import useCommonStyle from "../../commonStyle";
18
+ import { useEditorContext } from "../../hooks/useMouseMove";
19
+ import { UploadIconCloud } from "../../common/iconListV2";
18
20
  import { jsx as _jsx } from "react/jsx-runtime";
19
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
20
22
  const Form = props => {
@@ -76,6 +78,10 @@ const Form = props => {
76
78
  const [formHeight, setFormHeight] = useState();
77
79
  const [formWidth, setFormWidth] = useState();
78
80
  const path = ReactEditor.findPath(editor, element);
81
+ const {
82
+ theme: appTheme
83
+ } = useEditorContext();
84
+ const classes = useCommonStyle(appTheme);
79
85
  useEffect(() => {
80
86
  setFormHeight(formEle?.current?.clientHeight);
81
87
  setFormWidth(formEle?.current?.clientWidth);
@@ -153,7 +159,8 @@ const Form = props => {
153
159
  [pair[0]]: pair[1],
154
160
  placeholder: placeholder,
155
161
  form_name: formName,
156
- tagName: tagName
162
+ tagName: tagName,
163
+ uid: fieldData?.uid
157
164
  });
158
165
  }
159
166
  let params = {
@@ -200,7 +207,7 @@ const Form = props => {
200
207
  }, {
201
208
  at: path
202
209
  });
203
- // adding form field style to the current form node
210
+ // adding form field style to the current form node
204
211
  const currentNode = Node.get(editor, path);
205
212
  if (currentNode) {
206
213
  currentNode.children.forEach((item, index) => {
@@ -381,188 +388,194 @@ const Form = props => {
381
388
  }
382
389
  }, theme)
383
390
  };
384
- return /*#__PURE__*/_jsxs("div", {
385
- ...attributes,
386
- className: "form-wrapper element-root",
387
- style: {
388
- border: !readOnly ? "none" : "none",
389
- padding: "10px",
390
- width: "100%"
391
- },
392
- onMouseOver: onMouseOver,
393
- onMouseLeave: onMouseLeave,
394
- children: [/*#__PURE__*/_jsxs(Box, {
395
- component: "form",
396
- id: `${formName}`,
397
- onSubmit: handleSubmit,
398
- sx: {
399
- color: textColor || "#FFF",
400
- borderColor: borderColor || "transparent",
401
- borderWidth: borderWidth || "1px",
402
- display: submittedSuccessfully ? "none" : "block",
403
- borderStyle: borderStyle || "solid",
404
- background: bgColor || "transparent",
405
- position: "relative",
406
- lineHeight: 1.43,
407
- ...formSX
391
+ return /*#__PURE__*/_jsx(Grid, {
392
+ sx: classes?.formStyles,
393
+ children: /*#__PURE__*/_jsxs("div", {
394
+ ...attributes,
395
+ className: "form-wrapper element-root",
396
+ style: {
397
+ border: !readOnly ? "none" : "none",
398
+ padding: "10px",
399
+ width: "100%"
408
400
  },
409
- ref: formEle,
410
- children: [/*#__PURE__*/_jsx(Grid, {
411
- className: "form-grid",
412
- item: true,
413
- xs: 12,
414
- children: /*#__PURE__*/_jsxs(Grid, {
415
- container: true,
416
- spacing: 2,
417
- sx: {
418
- justifyContent: alignment?.horizantal || "start"
419
- },
420
- children: [/*#__PURE__*/_jsx("legend", {
421
- style: {
422
- fontSize: `${textSize}px` || "inherit",
423
- fontFamily: fontFamily || "PoppinsRegular",
424
- textAlign: textAlign || "left",
425
- width: "100%"
426
- },
427
- children: formTitle
428
- }), children, /*#__PURE__*/_jsx(Grid, {
429
- item: true,
430
- ...buttonProps?.grid,
431
- className: "form-btn-wrpr",
432
- contentEditable: false,
433
- style: {
434
- display: "flex",
435
- justifyContent: btnAlign?.horizantal || "start",
436
- alignItems: btnAlign?.vertical || "start"
437
- },
438
- children: /*#__PURE__*/_jsx(Box, {
439
- component: "button",
440
- onClick: onSubmitClick,
441
- disabled: loading,
442
- sx: {
443
- background: buttonProps?.bgColor || "rgb(30, 75, 122)",
444
- borderWidth: "1px",
445
- borderBlockStyle: "solid",
446
- ...btnBorderStyle,
447
- ...buttonSX,
448
- color: `${buttonProps?.textColor || "#FFFFFF"}`,
449
- fontSize: buttonProps?.textSize || "inherit",
450
- height: "fit-content",
451
- fontFamily: buttonProps?.fontFamily || "PoppinsRegular",
452
- width: buttonProps?.fullWidth ? "100%" : "auto"
453
- },
454
- children: buttonProps?.label || "Submit"
455
- })
456
- })]
457
- })
458
- }), !readOnly && showOptions && /*#__PURE__*/_jsx(FormToolbar, {}), loading && /*#__PURE__*/_jsx("div", {
459
- style: {
460
- position: "absolute",
461
- top: 0,
462
- left: 0,
463
- width: "100%",
464
- height: "100%",
465
- background: "rgba(255,255,255,0.5)"
401
+ onMouseOver: onMouseOver,
402
+ onMouseLeave: onMouseLeave,
403
+ children: [/*#__PURE__*/_jsxs(Box, {
404
+ component: "form",
405
+ id: `${formName}`,
406
+ onSubmit: handleSubmit,
407
+ sx: {
408
+ color: textColor || "#FFF",
409
+ borderColor: borderColor || "transparent",
410
+ borderWidth: borderWidth || "1px",
411
+ display: submittedSuccessfully ? "none" : "block",
412
+ borderStyle: borderStyle || "solid",
413
+ background: bgColor || "transparent",
414
+ position: "relative",
415
+ lineHeight: 1.43,
416
+ ...formSX
466
417
  },
467
- children: /*#__PURE__*/_jsx(CircularProgress, {
468
- style: {
469
- position: "absolute",
470
- left: 0,
471
- right: 0,
472
- top: 0,
473
- bottom: 0,
474
- margin: "auto"
475
- }
476
- })
477
- })]
478
- }), /*#__PURE__*/_jsx(Grid, {
479
- item: true,
480
- sx: {
481
- display: submittedSuccessfully ? "flex" : "none"
482
- },
483
- contentEditable: false,
484
- children: /*#__PURE__*/_jsx(Grid, {
485
- container: true,
486
- alignItems: "center",
487
- justifyContent: "center",
488
- spacing: 2,
489
- children: /*#__PURE__*/_jsx(Grid, {
418
+ ref: formEle,
419
+ children: [/*#__PURE__*/_jsx(Grid, {
420
+ className: "form-grid",
490
421
  item: true,
491
- children: /*#__PURE__*/_jsxs(Typography, {
422
+ xs: 12,
423
+ children: /*#__PURE__*/_jsxs(Grid, {
424
+ container: true,
425
+ spacing: 2,
492
426
  sx: {
493
- color: textColor || "#A2A9B4",
494
- borderColor: borderColor || "transparent",
495
- borderWidth: borderWidth || "1px",
496
- borderStyle: borderStyle || "solid",
497
- background: bgColor || "transparent",
498
- minHeight: `${formHeight}px`,
499
- minWidth: `${formWidth}px`,
500
- display: "flex",
501
- alignItems: "center",
502
- justifyContent: "center",
503
- textAlign: "center",
504
- position: "relative",
505
- ...formTypoSX
427
+ justifyContent: alignment?.horizantal || "start"
506
428
  },
507
- children: ["Form Submitted Successfully...!", /*#__PURE__*/_jsx("span", {
429
+ children: [/*#__PURE__*/_jsx("legend", {
508
430
  style: {
509
- paddingLeft: "10px"
431
+ fontSize: `${textSize}px` || "inherit",
432
+ fontFamily: fontFamily || "PoppinsRegular",
433
+ textAlign: textAlign || "left",
434
+ width: "100%"
510
435
  },
511
- children: /*#__PURE__*/_jsx(IconButton, {
512
- onClick: handleCloseMessage,
513
- children: /*#__PURE__*/_jsx(Icon, {
514
- icon: "closeIcon"
515
- })
436
+ children: formTitle
437
+ }), children, /*#__PURE__*/_jsx(Grid, {
438
+ item: true,
439
+ ...buttonProps?.grid,
440
+ className: "form-btn-wrpr",
441
+ contentEditable: false,
442
+ style: {
443
+ display: "flex",
444
+ justifyContent: btnAlign?.horizantal || "start",
445
+ alignItems: btnAlign?.vertical || "start"
446
+ },
447
+ children: /*#__PURE__*/_jsx(Box, {
448
+ component: "button",
449
+ onClick: onSubmitClick,
450
+ disabled: loading,
451
+ sx: {
452
+ background: buttonProps?.bgColor || "#2563EB",
453
+ borderWidth: "1px",
454
+ borderBlockStyle: "solid",
455
+ borderRadius: `${buttonProps?.borderRadius || "8px"}`,
456
+ ...btnBorderStyle,
457
+ ...buttonSX,
458
+ color: `${buttonProps?.textColor || "#FFFFFF"}`,
459
+ fontSize: buttonProps?.textSize || "inherit",
460
+ height: "fit-content",
461
+ fontFamily: buttonProps?.fontFamily || "Inter, sans-serif",
462
+ width: buttonProps?.fullWidth ? "100%" : "auto",
463
+ borderColor: `${buttonProps?.borderColor || "transparent"}`
464
+ },
465
+ children: buttonProps?.label || "Submit"
516
466
  })
517
467
  })]
518
468
  })
519
- })
520
- })
521
- }), openSetttings ? /*#__PURE__*/_jsx(FormPopup, {
522
- element: element,
523
- onSave: onSave,
524
- onClose: onClose,
525
- customProps: customProps,
526
- translation: translation
527
- }) : null, /*#__PURE__*/_jsx(Workflow, {
528
- openWorkflow: openWorkflow,
529
- element: element,
530
- closeWorkflow: closeWorkflow,
531
- onSave: onSave,
532
- customProps: customProps
533
- }), !readOnly && !isIframe ? /*#__PURE__*/_jsxs(Menu, {
534
- className: "editor-btn-options",
535
- open: anchorEl !== null,
536
- anchorEl: anchorEl,
537
- onClose: handleClose,
538
- contentEditable: false,
539
- children: [/*#__PURE__*/_jsx(MenuItem, {
540
- onClick: onMenuClick("edit"),
541
- children: /*#__PURE__*/_jsx(Tooltip, {
542
- title: translation("Button Settings"),
543
- arrow: true,
544
- children: /*#__PURE__*/_jsx(IconButton, {
545
- children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
469
+ }), !readOnly && showOptions && /*#__PURE__*/_jsx(FormToolbar, {}), loading && /*#__PURE__*/_jsx("div", {
470
+ style: {
471
+ position: "absolute",
472
+ top: 0,
473
+ left: 0,
474
+ width: "100%",
475
+ height: "100%",
476
+ background: "rgba(255,255,255,0.5)"
477
+ },
478
+ children: /*#__PURE__*/_jsx(CircularProgress, {
479
+ style: {
480
+ position: "absolute",
481
+ left: 0,
482
+ right: 0,
483
+ top: 0,
484
+ bottom: 0,
485
+ margin: "auto"
486
+ }
546
487
  })
547
- })
548
- }), /*#__PURE__*/_jsx(MenuItem, {
549
- onClick: onMenuClick("test"),
550
- children: /*#__PURE__*/_jsx(Tooltip, {
551
- title: translation("Test Submit"),
552
- arrow: true,
553
- children: /*#__PURE__*/_jsx(IconButton, {
554
- children: /*#__PURE__*/_jsx(BackupIcon, {})
488
+ })]
489
+ }), /*#__PURE__*/_jsx(Grid, {
490
+ item: true,
491
+ sx: {
492
+ display: submittedSuccessfully ? "flex" : "none"
493
+ },
494
+ contentEditable: false,
495
+ children: /*#__PURE__*/_jsx(Grid, {
496
+ container: true,
497
+ alignItems: "center",
498
+ justifyContent: "center",
499
+ spacing: 2,
500
+ children: /*#__PURE__*/_jsx(Grid, {
501
+ item: true,
502
+ children: /*#__PURE__*/_jsxs(Typography, {
503
+ sx: {
504
+ color: textColor || "#A2A9B4",
505
+ borderColor: borderColor || "transparent",
506
+ borderWidth: borderWidth || "1px",
507
+ borderStyle: borderStyle || "solid",
508
+ background: bgColor || "transparent",
509
+ minHeight: `${formHeight}px`,
510
+ minWidth: `${formWidth}px`,
511
+ display: "flex",
512
+ alignItems: "center",
513
+ justifyContent: "center",
514
+ textAlign: "center",
515
+ position: "relative",
516
+ ...formTypoSX
517
+ },
518
+ children: ["Form Submitted Successfully...!", /*#__PURE__*/_jsx("span", {
519
+ style: {
520
+ paddingLeft: "10px"
521
+ },
522
+ children: /*#__PURE__*/_jsx(IconButton, {
523
+ onClick: handleCloseMessage,
524
+ children: /*#__PURE__*/_jsx(Icon, {
525
+ icon: "closeIcon"
526
+ })
527
+ })
528
+ })]
529
+ })
555
530
  })
556
531
  })
532
+ }), openSetttings ? /*#__PURE__*/_jsx(FormPopup, {
533
+ element: element,
534
+ onSave: onSave,
535
+ onClose: onClose,
536
+ customProps: customProps,
537
+ translation: translation
538
+ }) : null, /*#__PURE__*/_jsx(Workflow, {
539
+ openWorkflow: openWorkflow,
540
+ element: element,
541
+ closeWorkflow: closeWorkflow,
542
+ onSave: onSave,
543
+ customProps: customProps
544
+ }), !readOnly && !isIframe ? /*#__PURE__*/_jsxs(Menu, {
545
+ className: "editor-btn-options",
546
+ open: anchorEl !== null,
547
+ anchorEl: anchorEl,
548
+ onClose: handleClose,
549
+ contentEditable: false,
550
+ sx: classes?.formMenuStyle,
551
+ children: [/*#__PURE__*/_jsx(MenuItem, {
552
+ onClick: onMenuClick("edit"),
553
+ children: /*#__PURE__*/_jsx(Tooltip, {
554
+ title: translation("Button Settings"),
555
+ arrow: true,
556
+ children: /*#__PURE__*/_jsx(IconButton, {
557
+ children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
558
+ })
559
+ })
560
+ }), /*#__PURE__*/_jsx(MenuItem, {
561
+ onClick: onMenuClick("test"),
562
+ children: /*#__PURE__*/_jsx(Tooltip, {
563
+ title: translation("Test Submit"),
564
+ arrow: true,
565
+ children: /*#__PURE__*/_jsx(IconButton, {
566
+ children: /*#__PURE__*/_jsx(UploadIconCloud, {})
567
+ })
568
+ })
569
+ })]
570
+ }) : null, editButton && /*#__PURE__*/_jsx(ButtonPopup, {
571
+ element: buttonProps || {},
572
+ onSave: onSaveButtonSettings,
573
+ onClose: onCloseButtonSettings,
574
+ customProps: customProps,
575
+ style: formButtonStyle,
576
+ styleName: "formButtonStyle"
557
577
  })]
558
- }) : null, editButton && /*#__PURE__*/_jsx(ButtonPopup, {
559
- element: buttonProps || {},
560
- onSave: onSaveButtonSettings,
561
- onClose: onCloseButtonSettings,
562
- customProps: customProps,
563
- style: formButtonStyle,
564
- styleName: "formButtonStyle"
565
- })]
578
+ })
566
579
  });
567
580
  };
568
581
  export default Form;
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import { Box } from "@mui/material";
3
- import { getTRBLBreakPoints, getBreakPointsValue } from "../../../helper/theme";
3
+ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../../helper/theme";
4
+ import { useTheme } from "@emotion/react";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  const FormText = props => {
6
7
  const {
@@ -19,11 +20,26 @@ const FormText = props => {
19
20
  textSize,
20
21
  fontFamily,
21
22
  fontWeight,
23
+ marginSpacing,
22
24
  ...rest
23
25
  } = fieldProps;
24
26
  const onChange = e => {
25
27
  e.preventDefault();
26
28
  };
29
+ const theme = useTheme();
30
+ const buttonSX = {
31
+ ...groupByBreakpoint({
32
+ borderRadius: {
33
+ ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
34
+ },
35
+ padding: {
36
+ ...getTRBLBreakPoints(bannerSpacing)
37
+ },
38
+ margin: {
39
+ ...getTRBLBreakPoints(marginSpacing)
40
+ }
41
+ }, theme)
42
+ };
27
43
  return /*#__PURE__*/_jsx("div", {
28
44
  style: {
29
45
  width: "100%",
@@ -40,16 +56,17 @@ const FormText = props => {
40
56
  padding: {
41
57
  ...getTRBLBreakPoints(bannerSpacing)
42
58
  },
43
- height: height || "auto",
44
- borderColor: borderColor || "transparent",
59
+ height: height && `${height} !important`,
60
+ borderColor: borderColor && `${borderColor} !important`,
45
61
  borderWidth: borderWidth || "1px",
46
62
  borderRadius: {
47
63
  ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
48
64
  },
65
+ ...buttonSX,
49
66
  borderStyle: borderStyle || "solid",
50
- color: textColor || "#000",
51
- background: bgColor || "transparent",
52
- fontSize: textSize || "inherit",
67
+ color: textColor && `${textColor} !important`,
68
+ background: bgColor && `${bgColor} !important`,
69
+ fontSize: textSize && `${textSize} !important`,
53
70
  fontFamily: fontFamily || "PoppinsRegular",
54
71
  fontWeight: `${fontWeight} !important` || "400 !important"
55
72
  }
@@ -35,12 +35,12 @@ const FormTextArea = props => {
35
35
  onChange: onChange,
36
36
  sx: {
37
37
  width: "100%",
38
- border: `1px solid ${borderColor || "#FFF"}`,
38
+ borderBlockStyle: "solid",
39
39
  padding: {
40
40
  ...getTRBLBreakPoints(bannerSpacing)
41
41
  },
42
42
  height: height || "150px",
43
- borderColor: `${borderColor || "transparent"} !important`,
43
+ borderColor: borderColor && `${borderColor} !important`,
44
44
  borderWidth: borderWidth || "1px",
45
45
  borderRadius: {
46
46
  ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
@@ -1,12 +1,15 @@
1
1
  import React, { useState } from "react";
2
- import { Transforms, Node } from "slate";
2
+ import { Transforms } from "slate";
3
3
  import { useSlateStatic, ReactEditor } from "slate-react";
4
4
  import { IconButton, Tooltip, Grid, useTheme } from "@mui/material";
5
- import DeleteIcon from "@mui/icons-material/Delete";
6
- import SettingsIcon from "@mui/icons-material/Settings";
7
5
  import FormElements from "./FormElements";
8
6
  import FieldPopup from "./FieldPopup";
9
7
  import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
8
+ import { DeleteIcon } from "../../assets/svg/AIIcons";
9
+ import { SettingsIcon } from "../../assets/svg/TableIcons";
10
+ import { useEditorContext } from "../../hooks/useMouseMove";
11
+ import useCommonStyle from "../../commonStyle";
12
+ import { getNode } from "../../utils/helper";
10
13
  import { jsx as _jsx } from "react/jsx-runtime";
11
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
12
15
  const FormField = props => {
@@ -33,11 +36,15 @@ const FormField = props => {
33
36
  const formPath = path.slice(0, path.length - 1);
34
37
  const {
35
38
  metadatamapping
36
- } = Node?.get(editor, formPath) || {};
39
+ } = getNode(editor, formPath) || {};
37
40
  const updatedElement = {
38
41
  ...element,
39
42
  metadatamapping
40
43
  };
44
+ const {
45
+ theme: appTheme
46
+ } = useEditorContext();
47
+ const classes = useCommonStyle(appTheme);
41
48
  const [openSetttings, setOpenSettings] = useState(false);
42
49
  const onSettings = () => {
43
50
  setOpenSettings(true);
@@ -77,7 +84,6 @@ const FormField = props => {
77
84
  top: "24px",
78
85
  bottom: 0,
79
86
  margin: "auto",
80
- height: "42px",
81
87
  zIndex: 101
82
88
  },
83
89
  children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -110,7 +116,8 @@ const FormField = props => {
110
116
  className: "form-field",
111
117
  sx: {
112
118
  position: "relative",
113
- ...fieldSX
119
+ ...fieldSX,
120
+ ...classes?.fieldBtnSettings
114
121
  },
115
122
  children: [!readOnly && /*#__PURE__*/_jsx(FieldToolbar, {}), /*#__PURE__*/_jsx(FormElement, {
116
123
  fieldProps: elementProps
@@ -9,20 +9,20 @@ const FormStyles = theme => ({
9
9
  color: "#94A3B8"
10
10
  },
11
11
  bodyTextArea: {
12
- '& .mini-editor-cls': {
13
- padding: '12px',
14
- '&:focus-visible': {
15
- outline: 'none',
16
- border: 'none'
12
+ "& .mini-editor-cls": {
13
+ padding: "12px",
14
+ "&:focus-visible": {
15
+ outline: "none",
16
+ border: "none"
17
17
  }
18
18
  },
19
19
  "& .editorWorkflow": {
20
- minHeight: '130px',
21
- padding: '12px',
20
+ minHeight: "130px",
21
+ padding: "12px",
22
22
  paddingBottom: 0,
23
- '&:focus-visible': {
24
- outline: 'none',
25
- border: 'none'
23
+ "&:focus-visible": {
24
+ outline: "none",
25
+ border: "none"
26
26
  }
27
27
  }
28
28
  },
@@ -105,7 +105,7 @@ const FormStyles = theme => ({
105
105
  padding: "4px 22px",
106
106
  textTransform: "none",
107
107
  border: "1px solid #D8DDE1",
108
- minWidth: '126px',
108
+ minWidth: "126px",
109
109
  "& svg": {
110
110
  "& path": {
111
111
  stroke: "#64748B"
@@ -169,17 +169,19 @@ const FormStyles = theme => ({
169
169
  }
170
170
  },
171
171
  colorButtonSingle: {
172
+ border: "1.5px solid #DCE4EC !important",
172
173
  "&.active": {
173
- "&:before": {
174
- content: '" "',
175
- position: "absolute",
176
- top: "-5px",
177
- left: "-5px",
178
- width: "calc(100% + 4px)",
179
- height: "calc(100% + 4px)",
180
- border: "3px solid blue",
181
- borderRadius: "50%"
182
- }
174
+ // "&:before": {
175
+ // content: '" "',
176
+ // position: "absolute",
177
+ // top: "-5px",
178
+ // left: "-5px",
179
+ // width: "calc(100% + 4px)",
180
+ // height: "calc(100% + 4px)",
181
+ // border: "3px solid blue",
182
+ // borderRadius: "50%",
183
+ // },
184
+ outline: "2px solid #2563EB"
183
185
  }
184
186
  },
185
187
  colorButtonsInner: {
@@ -249,7 +251,7 @@ const FormStyles = theme => ({
249
251
  }
250
252
  },
251
253
  root: {
252
- padding: '10px'
254
+ padding: "10px"
253
255
  }
254
256
  });
255
257
  export default FormStyles;