@flozy/editor 4.0.1 → 4.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (135) hide show
  1. package/dist/Editor/ChatEditor.js +3 -19
  2. package/dist/Editor/CommonEditor.js +181 -109
  3. package/dist/Editor/Editor.css +31 -3
  4. package/dist/Editor/Elements/AI/AIInput.js +31 -33
  5. package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
  6. package/dist/Editor/Elements/AI/PopoverAIInput.js +73 -97
  7. package/dist/Editor/Elements/AI/Styles.js +2 -2
  8. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  9. package/dist/Editor/Elements/AI/VoiceToText/index.js +184 -0
  10. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  11. package/dist/Editor/Elements/AI/helper.js +5 -3
  12. package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
  13. package/dist/Editor/Elements/Accordion/AccordionSummary.js +5 -10
  14. package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
  15. package/dist/Editor/Elements/Button/EditorButton.js +28 -16
  16. package/dist/Editor/Elements/Carousel/CarouselButton.js +2 -1
  17. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -15
  18. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  19. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  20. package/dist/Editor/Elements/Color Picker/Styles.js +3 -1
  21. package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
  22. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  23. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  24. package/dist/Editor/Elements/Grid/Grid.js +27 -3
  25. package/dist/Editor/Elements/Grid/GridItem.js +3 -1
  26. package/dist/Editor/Elements/Link/Link.js +6 -1
  27. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  28. package/dist/Editor/Elements/Link/LinkPopup.js +73 -14
  29. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  30. package/dist/Editor/Elements/List/CheckList.js +1 -2
  31. package/dist/Editor/Elements/NewLine/NewLineButton.js +2 -1
  32. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
  33. package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
  34. package/dist/Editor/Elements/Signature/Signature.css +13 -6
  35. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +2 -1
  36. package/dist/Editor/Elements/Signature/SignaturePopup.js +185 -30
  37. package/dist/Editor/Elements/SimpleText/index.js +11 -1
  38. package/dist/Editor/Elements/SimpleText/style.js +1 -1
  39. package/dist/Editor/Elements/Table/Styles.js +23 -1
  40. package/dist/Editor/Elements/Table/Table.js +2 -1
  41. package/dist/Editor/Elements/Table/TableCell.js +69 -7
  42. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
  43. package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
  44. package/dist/Editor/MiniEditor.js +3 -1
  45. package/dist/Editor/Styles/EditorStyles.js +1 -1
  46. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  47. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  48. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  49. package/dist/Editor/Toolbar/FormatTools/TextSize.js +31 -20
  50. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +36 -5
  51. package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
  52. package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
  53. package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +12 -13
  54. package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +12 -13
  55. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +3 -0
  56. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  57. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +59 -0
  58. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  59. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -2
  60. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +123 -44
  61. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +106 -44
  62. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  63. package/dist/Editor/Toolbar/PopupTool/index.js +7 -6
  64. package/dist/Editor/Toolbar/toolbarGroups.js +53 -11
  65. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  66. package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
  67. package/dist/Editor/assets/svg/RedoIcon.js +27 -0
  68. package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
  69. package/dist/Editor/assets/svg/TextIcon.js +8 -5
  70. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  71. package/dist/Editor/assets/svg/UndoIcon.js +27 -0
  72. package/dist/Editor/common/ColorPickerButton.js +26 -18
  73. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  74. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  75. package/dist/Editor/common/CustomDialog/index.js +94 -0
  76. package/dist/Editor/common/CustomDialog/style.js +67 -0
  77. package/dist/Editor/common/CustomSelect.js +33 -0
  78. package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
  79. package/dist/Editor/common/EditorIcons.js +7 -7
  80. package/dist/Editor/common/Icon.js +64 -25
  81. package/dist/Editor/common/ImageList.js +16 -3
  82. package/dist/Editor/common/ImageSelector/ImageSelector.js +30 -9
  83. package/dist/Editor/common/ImageSelector/Styles.js +2 -1
  84. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
  85. package/dist/Editor/common/LinkSettings/index.js +4 -2
  86. package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
  87. package/dist/Editor/common/LinkSettings/style.js +11 -8
  88. package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
  89. package/dist/Editor/common/Section/index.js +57 -7
  90. package/dist/Editor/common/Section/styles.js +11 -0
  91. package/dist/Editor/common/Shorthands/elements.js +63 -9
  92. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +1 -2
  93. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
  95. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  96. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  97. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +29 -7
  98. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  99. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  100. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  101. package/dist/Editor/common/iconListV2.js +843 -0
  102. package/dist/Editor/common/iconslist.js +0 -31
  103. package/dist/Editor/commonStyle.js +6 -0
  104. package/dist/Editor/helper/index.js +0 -22
  105. package/dist/Editor/helper/theme.js +189 -3
  106. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  107. package/dist/Editor/hooks/useMouseMove.js +4 -1
  108. package/dist/Editor/hooks/useWindowMessage.js +10 -7
  109. package/dist/Editor/plugins/withEmbeds.js +1 -1
  110. package/dist/Editor/plugins/withHTML.js +1 -1
  111. package/dist/Editor/plugins/withTable.js +1 -1
  112. package/dist/Editor/theme/ThemeList.js +50 -173
  113. package/dist/Editor/theme/index.js +144 -0
  114. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  115. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  116. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  117. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  118. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  119. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  120. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  121. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  122. package/dist/Editor/themeSettings/icons.js +60 -0
  123. package/dist/Editor/themeSettings/index.js +320 -0
  124. package/dist/Editor/themeSettings/style.js +152 -0
  125. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  126. package/dist/Editor/themeSettingsAI/index.js +356 -0
  127. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  128. package/dist/Editor/themeSettingsAI/style.js +247 -0
  129. package/dist/Editor/utils/SlateUtilityFunctions.js +169 -27
  130. package/dist/Editor/utils/button.js +1 -17
  131. package/dist/Editor/utils/events.js +54 -2
  132. package/dist/Editor/utils/font.js +40 -37
  133. package/dist/Editor/utils/helper.js +31 -2
  134. package/dist/Editor/utils/table.js +51 -43
  135. package/package.json +4 -3
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
- import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox } from "@mui/material";
2
+ import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Divider } from "@mui/material";
3
3
  import CloseIcon from "@mui/icons-material/Close";
4
+ import LinkPopupStyles from "./LinkPopupStyles";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
6
7
  const LinkPopup = props => {
@@ -9,13 +10,19 @@ const LinkPopup = props => {
9
10
  handleClose,
10
11
  linkData,
11
12
  handleInputChange,
12
- handleInsertLink
13
+ handleInsertLink,
14
+ theme
13
15
  } = props;
16
+ const themeType = localStorage.getItem("themeType");
17
+ const classes = LinkPopupStyles(themeType);
14
18
  return /*#__PURE__*/_jsxs(Dialog, {
15
19
  fullWidth: true,
16
20
  open: open,
17
21
  className: `dialogComp`,
18
22
  children: [/*#__PURE__*/_jsx(DialogTitle, {
23
+ sx: {
24
+ padding: "13px 19px 9px 19px"
25
+ },
19
26
  children: /*#__PURE__*/_jsxs("div", {
20
27
  style: {
21
28
  display: "flex",
@@ -24,8 +31,10 @@ const LinkPopup = props => {
24
31
  children: [/*#__PURE__*/_jsx(Typography, {
25
32
  variant: "h6",
26
33
  className: "popupTitle",
27
- color: "primary",
28
- children: "LINK"
34
+ sx: {
35
+ textTransform: "none"
36
+ },
37
+ children: "Link"
29
38
  }), /*#__PURE__*/_jsx("div", {
30
39
  style: {
31
40
  display: "flex"
@@ -37,35 +46,84 @@ const LinkPopup = props => {
37
46
  })
38
47
  })]
39
48
  })
49
+ }), /*#__PURE__*/_jsx(Divider, {
50
+ sx: {
51
+ width: "auto",
52
+ // Or set a fixed width like "90%"
53
+ margin: "0px 20px" // Horizontal margin
54
+ }
40
55
  }), /*#__PURE__*/_jsxs(DialogContent, {
41
- children: [/*#__PURE__*/_jsx(Grid, {
56
+ sx: {
57
+ padding: "5px 19px 0px 19px"
58
+ },
59
+ children: [/*#__PURE__*/_jsxs(Grid, {
42
60
  item: true,
43
61
  xs: 12,
44
62
  style: {
45
63
  paddingTop: "12px"
46
64
  },
47
- children: /*#__PURE__*/_jsx(TextField, {
65
+ children: [/*#__PURE__*/_jsx(Typography, {
66
+ sx: {
67
+ fontFamily: 'Inter, sans-serif',
68
+ fontSize: "14px",
69
+ marginBottom: "6px"
70
+ },
71
+ children: "Title"
72
+ }), /*#__PURE__*/_jsx(TextField, {
48
73
  size: "small",
49
74
  fullWidth: true,
50
75
  value: linkData?.name,
51
76
  name: "name",
52
77
  placeholder: "Link Title",
53
- onChange: handleInputChange
54
- })
55
- }), /*#__PURE__*/_jsx(Grid, {
78
+ onChange: handleInputChange,
79
+ sx: {
80
+ '& .MuiOutlinedInput-root': {
81
+ borderRadius: '8px'
82
+ },
83
+ '& .MuiInputBase-input': {
84
+ color: themeType === "dark" ? "#FFFFFF" : '#000'
85
+ },
86
+ '& .MuiInputBase-input::placeholder': {
87
+ color: '#94A3B8',
88
+ fontFamily: '"Inter", sans-serif'
89
+ }
90
+ }
91
+ // sx={classes.addLinkField}
92
+ })]
93
+ }), /*#__PURE__*/_jsxs(Grid, {
56
94
  item: true,
57
95
  xs: 12,
58
96
  style: {
59
97
  paddingTop: "12px"
60
98
  },
61
- children: /*#__PURE__*/_jsx(TextField, {
99
+ children: [/*#__PURE__*/_jsx(Typography, {
100
+ sx: {
101
+ fontFamily: 'Inter, sans-serif',
102
+ fontSize: "14px",
103
+ marginBottom: "6px"
104
+ },
105
+ children: "URL"
106
+ }), /*#__PURE__*/_jsx(TextField, {
62
107
  size: "small",
63
108
  fullWidth: true,
64
109
  name: "url",
65
110
  value: linkData?.url,
66
111
  placeholder: "https://google.com",
67
- onChange: handleInputChange
68
- })
112
+ onChange: handleInputChange,
113
+ sx: {
114
+ '& .MuiOutlinedInput-root': {
115
+ borderRadius: '8px'
116
+ },
117
+ '& .MuiInputBase-input': {
118
+ color: themeType === "dark" ? "#FFFFFF" : '#000'
119
+ },
120
+ '& .MuiInputBase-input::placeholder': {
121
+ color: '#94A3B8',
122
+ fontFamily: '"Inter", sans-serif'
123
+ }
124
+ }
125
+ // sx={classes.addLinkField}
126
+ })]
69
127
  }), /*#__PURE__*/_jsx(Grid, {
70
128
  item: true,
71
129
  xs: 12,
@@ -81,9 +139,10 @@ const LinkPopup = props => {
81
139
  }),
82
140
  label: /*#__PURE__*/_jsx(Typography, {
83
141
  variant: "body1",
84
- color: "primary",
85
142
  sx: {
86
- pl: 1
143
+ paddingLeft: "0px",
144
+ fontSize: "14px",
145
+ fontFamily: '"Inter", sans-serif'
87
146
  },
88
147
  children: "Open in new tab"
89
148
  })
@@ -0,0 +1,28 @@
1
+ const LinkPopupStyles = themeType => ({
2
+ addLinkField: {
3
+ "& .MuiOutlinedInput-input": {
4
+ fontSize: "12px",
5
+ fontWeight: 500,
6
+ color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
7
+ },
8
+ "& .MuiFormHelperText-root": {
9
+ color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
10
+ },
11
+ "& .MuiOutlinedInput-root": {
12
+ boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
13
+ color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important",
14
+ borderRadius: "7px",
15
+ "& fieldset": {
16
+ borderColor: "#D8DDE1"
17
+ },
18
+ "&:hover fieldset": {
19
+ borderColor: "#64748B"
20
+ },
21
+ "&.Mui-focused fieldset": {
22
+ borderColor: "#2563EB"
23
+ },
24
+ "& .MuiFormLabel-root": {}
25
+ }
26
+ }
27
+ });
28
+ export default LinkPopupStyles;
@@ -68,8 +68,7 @@ const CheckList = ({
68
68
  style: {
69
69
  flex: 1,
70
70
  opacity: checked ? 1 : 1,
71
- textDecoration: !checked ? "none" : "none",
72
- width: '90%'
71
+ textDecoration: !checked ? "none" : "none"
73
72
  },
74
73
  className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
75
74
  placeholder: nestedCheckList ? "" : "Todo List",
@@ -3,6 +3,7 @@ import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
3
3
  import { Transforms } from "slate";
4
4
  import { ReactEditor, useSlateStatic } from "slate-react";
5
5
  import ToolbarIcon from "../../common/ToolbarIcon";
6
+ import { NewLineElementIcon } from "../../common/iconListV2";
6
7
  import { jsx as _jsx } from "react/jsx-runtime";
7
8
  const NewLineButton = ({
8
9
  icoBtnType
@@ -23,7 +24,7 @@ const NewLineButton = ({
23
24
  return /*#__PURE__*/_jsx(ToolbarIcon, {
24
25
  title: "New Line",
25
26
  onClick: onAddNewLine,
26
- icon: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
27
+ icon: /*#__PURE__*/_jsx(NewLineElementIcon, {
27
28
  sx: {
28
29
  fill: "#64748B",
29
30
  width: "18px",
@@ -1,9 +1,9 @@
1
1
  import React, { useState } from "react";
2
2
  import { useSlateStatic } from "slate-react";
3
3
  import PageSettingsPopup from "./PageSettingsPopup";
4
- import { PageSettings } from "../../common/iconslist";
5
4
  import ToolbarIcon from "../../common/ToolbarIcon";
6
5
  import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
6
+ import SettingsIcon from "../../assets/svg/SettingsIcon";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { Fragment as _Fragment } from "react/jsx-runtime";
9
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,13 +45,13 @@ const PageSettingsButton = props => {
45
45
  setOpenSettings(false);
46
46
  };
47
47
  return /*#__PURE__*/_jsxs(_Fragment, {
48
- children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(PageSettings, {
48
+ children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(SettingsIcon, {
49
49
  onClick: onSettings,
50
50
  className: "removeDefaultSvgCls"
51
51
  }) : /*#__PURE__*/_jsx(ToolbarIcon, {
52
52
  title: "Page Settings",
53
53
  onClick: onSettings,
54
- icon: /*#__PURE__*/_jsx(PageSettings, {}),
54
+ icon: /*#__PURE__*/_jsx(SettingsIcon, {}),
55
55
  icoBtnType: icoBtnType
56
56
  }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
57
57
  element: openSetttings?.element || {},
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { useSlateStatic } from "slate-react";
3
+ import RedoIcon from "../../assets/svg/RedoIcon";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const RedoButton = () => {
6
+ const editor = useSlateStatic();
7
+ const onRedo = () => {
8
+ editor?.redo();
9
+ };
10
+ return /*#__PURE__*/_jsx(RedoIcon, {
11
+ onClick: onRedo
12
+ });
13
+ };
14
+ export default RedoButton;
@@ -1,6 +1,6 @@
1
1
  .af-signature-popup .MuiTab-root {
2
2
  background: #ffffff;
3
- border: 1px solid #d3d3d3 !important;
3
+ border: 1px solid #D3D3D3 !important;
4
4
  border-radius: 7px;
5
5
  height: 37px;
6
6
  min-height: 37px;
@@ -15,10 +15,10 @@
15
15
  }
16
16
  .af-signature-popup .MuiTab-root.Mui-selected {
17
17
  background: #ffffff;
18
- border: 1px solid #2563eb !important;
18
+ border: 1.5px solid #2563EB !important;
19
19
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
20
20
  border-radius: 7px;
21
- color: #0f172a !important;
21
+ color: #000000 !important;
22
22
  }
23
23
  .af-signature-popup .MuiTabs-indicator {
24
24
  display: none;
@@ -60,16 +60,23 @@
60
60
  cursor: pointer;
61
61
  }
62
62
  .upload-wrapper-ui {
63
- border: 1px solid #2563eb !important;
64
- box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important;
63
+ border: 1px dashed #92B1F5 !important;
64
+ /* box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important; */
65
65
  border-radius: 7px;
66
66
  display: flex;
67
67
  align-items: center;
68
68
  justify-content: center;
69
69
  position: absolute;
70
70
  width: 100%;
71
- height: 100px;
71
+ height: 187px;
72
72
  top: 0px;
73
73
  left: 0px;
74
74
  cursor: pointer;
75
+ background-color: #F8F9FF;
76
+ }
77
+
78
+ .upload-wrapper-ui-text {
79
+ font-size: 16px !important;
80
+ font-weight: 600 !important;
81
+ font-family: 'Wavehaus';
75
82
  }
@@ -28,7 +28,7 @@ const UploadSignature = props => {
28
28
  });
29
29
  };
30
30
  return /*#__PURE__*/_jsxs("div", {
31
- className: "signature-tab",
31
+ className: "signature-tab2",
32
32
  children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsx("div", {
33
33
  className: "upload-sign-img-wrapper",
34
34
  children: /*#__PURE__*/_jsx("img", {
@@ -48,6 +48,7 @@ const UploadSignature = props => {
48
48
  justifyContent: "center",
49
49
  alignItems: "center",
50
50
  children: [/*#__PURE__*/_jsx(CloudUpload, {}), /*#__PURE__*/_jsx(Typography, {
51
+ className: "upload-wrapper-ui-text",
51
52
  variant: "h6",
52
53
  color: "textSecondary",
53
54
  sx: {
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab } from "@mui/material";
2
+ import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment } from "@mui/material";
3
3
  import CloseIcon from "@mui/icons-material/Close";
4
4
  import DatePicker from "react-datepicker";
5
5
  import "react-datepicker/dist/react-datepicker.css";
@@ -9,6 +9,7 @@ import { DrawSignature, PencilIcon, TypeSignature, UploadSignature } from "../..
9
9
  import useCommonStyle from "../../commonStyle";
10
10
  import { useEditorContext } from "../../hooks/useMouseMove";
11
11
  import { validationMethods } from "../Form/FormElements/validations";
12
+ import { CalenderDownIconSignature, CalenderIconSignature } from "../../common/iconListV2";
12
13
  import { jsx as _jsx } from "react/jsx-runtime";
13
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
15
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -32,12 +33,14 @@ const SignaturePopup = props => {
32
33
  const [open, setOpen] = useState(false);
33
34
  const [tab, setTab] = useState(0);
34
35
  const SeletectedTab = SignatureOptions[tab];
36
+ const defaultName = metadata?.signatureDetails?.name;
37
+ const defaultEmail = metadata?.signatureDetails?.email;
35
38
  const [signedData, setSignedData] = useState({
36
39
  signedOn: new Date(),
37
40
  signature: "",
38
41
  signedText: "",
39
- signedBy: "",
40
- signedByEmail: ""
42
+ signedBy: defaultName || "",
43
+ signedByEmail: defaultEmail || ""
41
44
  });
42
45
  const [brush, setBrush] = useState({
43
46
  size: 1,
@@ -133,7 +136,15 @@ const SignaturePopup = props => {
133
136
  open: open,
134
137
  onClose: handleClose,
135
138
  fullWidth: true,
136
- sx: classes.signaturePopup,
139
+ PaperProps: {
140
+ sx: {
141
+ borderRadius: '8px',
142
+ boxShadow: "0px 4px 10px 0px #00000029",
143
+ overflowY: tab === 0 ? "hidden" : "auto",
144
+ maxWidth: "560px",
145
+ ...classes.signaturePopup
146
+ }
147
+ },
137
148
  children: /*#__PURE__*/_jsx(Grid, {
138
149
  container: true,
139
150
  children: /*#__PURE__*/_jsxs(Grid, {
@@ -154,9 +165,13 @@ const SignaturePopup = props => {
154
165
  item: true,
155
166
  children: /*#__PURE__*/_jsx(Typography, {
156
167
  variant: "h6",
157
- className: "popupTitle",
168
+ className: `${classes.popupTitle2}`,
158
169
  color: "primary",
159
- children: "SIGNATURE"
170
+ sx: {
171
+ fontWeight: 600,
172
+ color: "#000000"
173
+ },
174
+ children: "Signature"
160
175
  })
161
176
  }), /*#__PURE__*/_jsx(Grid, {
162
177
  item: true,
@@ -196,24 +211,39 @@ const SignaturePopup = props => {
196
211
  children: [/*#__PURE__*/_jsx(Tab, {
197
212
  label: /*#__PURE__*/_jsxs(Grid, {
198
213
  className: "dflex alignCenter",
199
- children: [/*#__PURE__*/_jsx(DrawSignature, {}), /*#__PURE__*/_jsx("span", {
214
+ children: [/*#__PURE__*/_jsx(DrawSignature, {
215
+ fill: tab === 0 ? "#2563EB" : "#A2B0B9"
216
+ }), /*#__PURE__*/_jsx("span", {
200
217
  className: "ml-1",
218
+ style: {
219
+ textTransform: "none"
220
+ },
201
221
  children: "Draw Signature"
202
222
  })]
203
223
  })
204
224
  }), /*#__PURE__*/_jsx(Tab, {
205
225
  label: /*#__PURE__*/_jsxs(Grid, {
206
226
  className: "dflex alignCenter",
207
- children: [/*#__PURE__*/_jsx(TypeSignature, {}), /*#__PURE__*/_jsx("span", {
227
+ children: [/*#__PURE__*/_jsx(TypeSignature, {
228
+ fill: tab === 1 ? "#2563EB" : "#A2B0B9"
229
+ }), /*#__PURE__*/_jsx("span", {
208
230
  className: "ml-1",
231
+ style: {
232
+ textTransform: "none"
233
+ },
209
234
  children: "Type Signature"
210
235
  })]
211
236
  })
212
237
  }), /*#__PURE__*/_jsx(Tab, {
213
238
  label: /*#__PURE__*/_jsxs(Grid, {
214
239
  className: "dflex alignCenter",
215
- children: [/*#__PURE__*/_jsx(UploadSignature, {}), /*#__PURE__*/_jsx("span", {
240
+ children: [/*#__PURE__*/_jsx(UploadSignature, {
241
+ fill: tab === 2 ? "#2563EB" : "#A2B0B9"
242
+ }), /*#__PURE__*/_jsx("span", {
216
243
  className: "ml-1",
244
+ style: {
245
+ textTransform: "none"
246
+ },
217
247
  children: "Upload Signature"
218
248
  })]
219
249
  })
@@ -244,7 +274,9 @@ const SignaturePopup = props => {
244
274
  xs: 6,
245
275
  style: {
246
276
  display: "flex",
247
- alignItems: "center"
277
+ alignItems: "center",
278
+ fontSize: "14px",
279
+ fontFamily: '"Inter", sans-serif"'
248
280
  },
249
281
  children: [/*#__PURE__*/_jsx(Grid, {
250
282
  style: {
@@ -252,6 +284,11 @@ const SignaturePopup = props => {
252
284
  },
253
285
  children: /*#__PURE__*/_jsx("label", {
254
286
  htmlFor: "signedBy",
287
+ style: {
288
+ fontFamily: '"Inter", sans-serif',
289
+ fontWeight: 500,
290
+ fontSize: "14px"
291
+ },
255
292
  children: "Name:"
256
293
  })
257
294
  }), /*#__PURE__*/_jsx(Grid, {
@@ -262,8 +299,28 @@ const SignaturePopup = props => {
262
299
  id: "signedBy",
263
300
  name: "signedBy",
264
301
  placeholder: "Enter Name",
302
+ defaultValue: defaultName || "",
265
303
  size: "small",
266
- onChange: onChange
304
+ onChange: onChange,
305
+ sx: {
306
+ '& .MuiOutlinedInput-root': {
307
+ borderRadius: '10px',
308
+ '& fieldset': {
309
+ borderColor: "1px solid #D8DDE1"
310
+ }
311
+ // '&:hover fieldset': {
312
+ // borderColor: 'yourHoverColor',
313
+ // },
314
+ // '&.Mui-focused fieldset': {
315
+ // borderColor: 'yourFocusedColor',
316
+ // },
317
+ },
318
+
319
+ '& .MuiInputBase-input::placeholder': {
320
+ fontFamily: '"Inter", sans-serif"',
321
+ fontSize: "14px"
322
+ }
323
+ }
267
324
  })
268
325
  })]
269
326
  }), /*#__PURE__*/_jsxs(Grid, {
@@ -277,8 +334,14 @@ const SignaturePopup = props => {
277
334
  style: {
278
335
  marginRight: "8px"
279
336
  },
337
+ xs: 2,
280
338
  children: /*#__PURE__*/_jsx("label", {
281
339
  htmlFor: "signedOn",
340
+ style: {
341
+ fontFamily: '"Inter", sans-serif',
342
+ fontWeight: 500,
343
+ fontSize: "14px"
344
+ },
282
345
  children: "Date:"
283
346
  })
284
347
  }), /*#__PURE__*/_jsx(Grid, {
@@ -288,23 +351,72 @@ const SignaturePopup = props => {
288
351
  },
289
352
  xs: 12,
290
353
  children: /*#__PURE__*/_jsx(DatePicker, {
291
- showIcon: true,
292
- id: "signedOn",
293
- name: "signedOn",
294
- selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
295
- value: signedData?.signedOn || "",
296
- dateFormat: "MM/dd/yyyy",
354
+ selected: signedData.signedOn,
297
355
  onChange: date => {
298
356
  setSignedData({
299
357
  ...signedData,
300
- signedOn: date ? new Date(date).toISOString().split("T")[0] : ""
358
+ signedOn: date
301
359
  });
302
- }
360
+ },
361
+ dateFormat: "yyyy/MM/dd",
362
+ customInput: /*#__PURE__*/_jsx(TextField, {
363
+ fullWidth: true,
364
+ name: "signedOn",
365
+ placeholder: "Select Date",
366
+ size: "small",
367
+ InputProps: {
368
+ startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
369
+ position: "start",
370
+ sx: {
371
+ padding: 0,
372
+ // Remove padding around the InputAdornment
373
+ margin: 0 // Remove any margins
374
+ },
375
+ children: /*#__PURE__*/_jsx(IconButton, {
376
+ children: /*#__PURE__*/_jsx(CalenderIconSignature, {})
377
+ })
378
+ }),
379
+ endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
380
+ position: "end",
381
+ children: /*#__PURE__*/_jsx(IconButton, {
382
+ children: /*#__PURE__*/_jsx(CalenderDownIconSignature, {})
383
+ })
384
+ }),
385
+ sx: {
386
+ "& .MuiOutlinedInput-notchedOutline": {
387
+ borderColor: "transparent" // Remove the internal border
388
+ },
389
+
390
+ "& .MuiInputBase-input": {
391
+ border: "none",
392
+ // Ensure no border inside the input field
393
+ padding: "4px 0",
394
+ // Adjust padding for consistency
395
+ boxShadow: "none !important",
396
+ color: "#778599 !important"
397
+ }
398
+ }
399
+ },
400
+ sx: {
401
+ "& .MuiOutlinedInput-root": {
402
+ borderRadius: "10px",
403
+ backgroundColor: "#fff",
404
+ padding: "0px !important",
405
+ "&:hover fieldset": {
406
+ borderColor: "#D8DDE1" // Keeps the border on hover only around the outer field
407
+ },
408
+
409
+ "& fieldset": {
410
+ borderColor: "#D8DDE1" // Keeps the outer border light
411
+ }
412
+ }
413
+ }
414
+ })
303
415
  })
304
416
  })]
305
417
  }), /*#__PURE__*/_jsxs(Grid, {
306
418
  item: true,
307
- xs: 6,
419
+ xs: 12,
308
420
  style: {
309
421
  display: "flex",
310
422
  alignItems: "center"
@@ -313,20 +425,47 @@ const SignaturePopup = props => {
313
425
  style: {
314
426
  marginRight: "8px"
315
427
  },
428
+ xs: 1,
316
429
  children: /*#__PURE__*/_jsx("label", {
317
430
  htmlFor: "signedByEmail",
431
+ style: {
432
+ fontFamily: '"Inter", sans-serif',
433
+ fontWeight: 500,
434
+ fontSize: "14px"
435
+ },
318
436
  children: "Email:"
319
437
  })
320
438
  }), /*#__PURE__*/_jsx(Grid, {
439
+ container: true,
321
440
  item: true,
322
- xs: 12,
441
+ xs: 11,
323
442
  children: /*#__PURE__*/_jsx(TextField, {
324
443
  fullWidth: true,
325
444
  id: "signedByEmail",
326
445
  name: "signedByEmail",
327
446
  placeholder: "Enter Email",
328
447
  size: "small",
329
- onChange: onChange
448
+ onChange: onChange,
449
+ sx: {
450
+ '& .MuiOutlinedInput-root': {
451
+ borderRadius: '10px',
452
+ '& fieldset': {
453
+ borderColor: "1px solid #D8DDE1"
454
+ }
455
+ // '&:hover fieldset': {
456
+ // borderColor: 'yourHoverColor',
457
+ // },
458
+ // '&.Mui-focused fieldset': {
459
+ // borderColor: 'yourFocusedColor',
460
+ // },
461
+ },
462
+
463
+ '& .MuiInputBase-input::placeholder': {
464
+ fontFamily: '"Inter", sans-serif"',
465
+ fontSize: "14px"
466
+ }
467
+ },
468
+ defaultValue: defaultEmail || ""
330
469
  })
331
470
  })]
332
471
  })]
@@ -343,14 +482,30 @@ const SignaturePopup = props => {
343
482
  children: [/*#__PURE__*/_jsx(Grid, {
344
483
  item: true,
345
484
  sx: {
346
- mr: 4
485
+ mr: 3
347
486
  },
348
- children: /*#__PURE__*/_jsx("input", {
349
- type: "color",
350
- className: "brushcolorpic signColorPicker",
351
- onChange: onBrushColor,
352
- size: "4",
353
- value: brush?.color
487
+ children: /*#__PURE__*/_jsxs(Grid, {
488
+ container: true,
489
+ alignItems: "center",
490
+ sx: {
491
+ display: 'flex'
492
+ },
493
+ children: [/*#__PURE__*/_jsx("input", {
494
+ type: "color",
495
+ className: "brushcolorpic signColorPicker",
496
+ onChange: onBrushColor,
497
+ size: "4",
498
+ value: brush?.color
499
+ }), /*#__PURE__*/_jsx("span", {
500
+ style: {
501
+ marginLeft: "10px",
502
+ fontFamily: '"Inter", sans-serif',
503
+ fontSize: "14px",
504
+ fontWeight: 500,
505
+ color: "#333"
506
+ },
507
+ children: brush.color
508
+ })]
354
509
  })
355
510
  }), /*#__PURE__*/_jsx(Grid, {
356
511
  item: true,
@@ -381,7 +536,7 @@ const SignaturePopup = props => {
381
536
  children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
382
537
  onClick: handleClear,
383
538
  className: "secondaryBtn",
384
- children: "Delete"
539
+ children: "Clear"
385
540
  }) : null, /*#__PURE__*/_jsx(Button, {
386
541
  onClick: handleSave,
387
542
  className: `primaryBtn ${isEmpty ? "disabled" : ""}`,