@flozy/editor 10.4.0 → 10.4.2

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 (190) 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 +27 -9
  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 +454 -0
  17. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
  18. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  20. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  21. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  22. package/dist/Editor/Elements/Embed/Image.js +3 -2
  23. package/dist/Editor/Elements/Embed/Video.js +1 -1
  24. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  25. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  26. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  27. package/dist/Editor/Elements/Form/Form.js +184 -171
  28. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  29. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  30. package/dist/Editor/Elements/Form/FormField.js +13 -6
  31. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  32. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
  33. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  34. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
  35. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  36. package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
  37. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  38. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  39. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  40. package/dist/Editor/Elements/List/CheckList.js +3 -2
  41. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  42. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  43. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  44. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  45. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  46. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  47. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  48. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  49. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  50. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  51. package/dist/Editor/Elements/Table/Styles.js +7 -0
  52. package/dist/Editor/Elements/Table/Table.js +3 -3
  53. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  54. package/dist/Editor/Elements/Title/title.js +6 -6
  55. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  56. package/dist/Editor/MiniEditor.js +2 -1
  57. package/dist/Editor/Styles/EditorStyles.js +5 -5
  58. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  59. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  60. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  61. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  62. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  66. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  67. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  68. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  69. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  70. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  71. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  72. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  73. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  74. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  75. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  76. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  77. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  78. package/dist/Editor/common/Checkbox/index.js +46 -0
  79. package/dist/Editor/common/Checkbox/styles.js +45 -0
  80. package/dist/Editor/common/ColorPickerButton.js +41 -16
  81. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  82. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  83. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  84. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  85. package/dist/Editor/common/CustomSelect.js +43 -0
  86. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  87. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  88. package/dist/Editor/common/Icon.js +31 -1
  89. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  90. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  91. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
  92. package/dist/Editor/common/LinkSettings/index.js +82 -81
  93. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  94. package/dist/Editor/common/LinkSettings/style.js +209 -74
  95. package/dist/Editor/common/MentionsPopup/index.js +4 -1
  96. package/dist/Editor/common/RadioGroup/index.js +48 -0
  97. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  98. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  99. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  100. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  101. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  102. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  103. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  104. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  105. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  111. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  112. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  113. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  114. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  115. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  116. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  117. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  118. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  119. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  120. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  121. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
  122. package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
  123. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  124. package/dist/Editor/common/RnD/index.js +68 -39
  125. package/dist/Editor/common/Select/index.js +44 -5
  126. package/dist/Editor/common/Select/styles.js +30 -2
  127. package/dist/Editor/common/Shorthands/elements.js +65 -11
  128. package/dist/Editor/common/SnackBar/index.js +43 -0
  129. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  130. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  131. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  132. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
  133. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  134. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  138. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
  139. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  140. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
  141. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  142. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  143. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  144. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  145. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  146. package/dist/Editor/common/Uploader.js +16 -0
  147. package/dist/Editor/common/iconListV2.js +177 -6
  148. package/dist/Editor/common/iconslist.js +24 -0
  149. package/dist/Editor/commonStyle.js +186 -62
  150. package/dist/Editor/helper/index.js +5 -1
  151. package/dist/Editor/helper/textIndeces.js +58 -0
  152. package/dist/Editor/helper/theme.js +203 -2
  153. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  154. package/dist/Editor/hooks/useMouseMove.js +8 -5
  155. package/dist/Editor/hooks/useTable.js +5 -4
  156. package/dist/Editor/hooks/useThemeValues.js +63 -0
  157. package/dist/Editor/plugins/withEmbeds.js +1 -1
  158. package/dist/Editor/plugins/withHTML.js +3 -1
  159. package/dist/Editor/plugins/withTable.js +1 -1
  160. package/dist/Editor/theme/ThemeList.js +50 -173
  161. package/dist/Editor/theme/index.js +149 -0
  162. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  163. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  164. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  165. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  166. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  167. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  168. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  169. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  170. package/dist/Editor/themeSettings/icons.js +60 -0
  171. package/dist/Editor/themeSettings/index.js +380 -0
  172. package/dist/Editor/themeSettings/style.js +299 -0
  173. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  174. package/dist/Editor/themeSettingsAI/index.js +355 -0
  175. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  176. package/dist/Editor/themeSettingsAI/style.js +332 -0
  177. package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
  178. package/dist/Editor/utils/accordion.js +14 -4
  179. package/dist/Editor/utils/button.js +1 -17
  180. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  181. package/dist/Editor/utils/draftToSlate.js +3 -2
  182. package/dist/Editor/utils/events.js +50 -6
  183. package/dist/Editor/utils/font.js +40 -37
  184. package/dist/Editor/utils/form.js +4 -4
  185. package/dist/Editor/utils/formfield.js +9 -2
  186. package/dist/Editor/utils/helper.js +210 -26
  187. package/dist/Editor/utils/insertAppHeader.js +1 -1
  188. package/dist/Editor/utils/signature.js +2 -9
  189. package/dist/Editor/utils/updateFormName.js +22 -0
  190. package/package.json +4 -4
@@ -0,0 +1,380 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import { Box, CircularProgress, Drawer, Grid, IconButton, Tab, Tabs, Typography, styled } from "@mui/material";
3
+
4
+ // Style
5
+ import Style from "./style";
6
+
7
+ // icons
8
+ import { CloseIcon2 as CloseIcon } from "../common/iconslist";
9
+ import { TickIcon } from "./icons";
10
+ import ColorTheme from "./colorTheme";
11
+ import Buttons from "./buttons";
12
+ import Fonts from "./fonts";
13
+ import { useEditorTheme } from "../hooks/useEditorTheme";
14
+ import ActiveTheme from "./ActiveTheme";
15
+ import SaveTheme from "../themeSettingsAI/saveTheme";
16
+ import BackIcon from "../assets/svg/BackIcon";
17
+ import { jsx as _jsx } from "react/jsx-runtime";
18
+ import { jsxs as _jsxs } from "react/jsx-runtime";
19
+ import { Fragment as _Fragment } from "react/jsx-runtime";
20
+ function getColors(themeColors) {
21
+ const colors = Object.values(themeColors || {});
22
+ const primaryColors = colors.slice(0, 2);
23
+ const otherColors = colors.slice(2);
24
+ return {
25
+ primaryColors,
26
+ otherColors
27
+ };
28
+ }
29
+ const ThemeSettings = props => {
30
+ const {
31
+ className,
32
+ open,
33
+ setOpen,
34
+ services,
35
+ appTheme,
36
+ customProps
37
+ } = props;
38
+
39
+ // State
40
+ // const [themeDrawer, setThemeDrawer] = useState(true);
41
+ const [themeTabType, setThemeTabType] = React.useState(0);
42
+ const [themeMoodboard, setThemeMoodboard] = React.useState(false);
43
+ const [openSettings, setOpenSettings] = useState("");
44
+ const onSettingsChange = type => {
45
+ setOpenSettings(prev => prev === type ? "" : type);
46
+ };
47
+ const [themes, setThemes] = useState([]);
48
+ const [loading, setLoading] = useState(false);
49
+ const [savingTheme, setSavingTheme] = useState(false);
50
+ const {
51
+ theme: userSelectedTheme,
52
+ updateTheme
53
+ } = useEditorTheme();
54
+ const {
55
+ colors = {}
56
+ } = userSelectedTheme?.theme?.cssVars || {};
57
+ const {
58
+ id,
59
+ name,
60
+ mood_name,
61
+ template_tag
62
+ } = userSelectedTheme || {};
63
+ const onClose = () => setOpen(false);
64
+ const getThemesList = async themeTabType => {
65
+ setLoading(true);
66
+ setThemes([]);
67
+ try {
68
+ const themeType = themeTabType === 0 ? "default" : "";
69
+ const result = await services("getThemes", {
70
+ type: themeType,
71
+ template_tag
72
+ });
73
+ const currentSelectedTheme = result?.data?.find(d => d.id === id);
74
+ let themesList = result?.data || [];
75
+ if (currentSelectedTheme) {
76
+ const currThemeName = currentSelectedTheme?.name;
77
+ const currThemeTag = currentSelectedTheme?.template_tag;
78
+ const isHavingName = currThemeName && currThemeName !== name;
79
+ const isHavingTag = !template_tag && currThemeTag;
80
+ let update = {};
81
+ if (isHavingTag) {
82
+ update.template_tag = currThemeTag;
83
+ themesList = themesList.filter(t => t.template_tag === currThemeTag);
84
+ }
85
+ if (isHavingName) {
86
+ update.name = currThemeName;
87
+ }
88
+
89
+ // for theme templates created by design team
90
+ updateTheme(update);
91
+ }
92
+ setThemes(themesList);
93
+ } catch (err) {
94
+ console.log(err);
95
+ }
96
+ setLoading(false);
97
+ };
98
+ useEffect(() => {
99
+ getThemesList(themeTabType);
100
+ }, []);
101
+ const handleThemeChange = theme => {
102
+ updateTheme(theme, {
103
+ action: "THEME_CHANGE"
104
+ });
105
+ };
106
+ const onColorChange = (color, colorIndex) => {
107
+ updateTheme({
108
+ [`color${colorIndex}`]: color
109
+ }, {
110
+ action: "CSS_VAR_CHANGE",
111
+ fieldName: "colors"
112
+ });
113
+ };
114
+ const handleTabChange = (event, newValue) => {
115
+ setThemeTabType(newValue);
116
+ getThemesList(newValue);
117
+ };
118
+ const isUpdateTheme = Number(userSelectedTheme?.type) === 2;
119
+ const onSaveTheme = async (formData = {}, addNewTheme) => {
120
+ setSavingTheme(true);
121
+ try {
122
+ let type = isUpdateTheme && !addNewTheme ? "update" : "create";
123
+ const result = await services("saveTheme", {
124
+ type,
125
+ id,
126
+ template_tag,
127
+ ...formData,
128
+ theme: userSelectedTheme?.theme
129
+ });
130
+ const update = {
131
+ ...userSelectedTheme,
132
+ ...formData,
133
+ type: "2"
134
+ };
135
+ const createdId = result?.data?.id;
136
+ if (createdId) {
137
+ update.id = createdId;
138
+ }
139
+ updateTheme(update);
140
+ getThemesList(themeTabType);
141
+ } catch (err) {
142
+ console.log(err);
143
+ }
144
+ setSavingTheme(false);
145
+ };
146
+
147
+ // themeCard
148
+ const ThemeCard = ({
149
+ theme
150
+ }) => {
151
+ const {
152
+ name,
153
+ mood_name = ""
154
+ } = theme;
155
+ const {
156
+ colors = {}
157
+ } = theme?.theme?.cssVars || {};
158
+ const {
159
+ primaryColors,
160
+ otherColors
161
+ } = getColors(colors);
162
+ const isSelected = theme.id === userSelectedTheme?.id;
163
+ return /*#__PURE__*/_jsxs(Grid, {
164
+ className: `themeCardWrapper ${isSelected ? "activeWrapper" : ""}`,
165
+ onClick: () => handleThemeChange(theme),
166
+ children: [isSelected ? /*#__PURE__*/_jsx(TickIcon, {}) : null, /*#__PURE__*/_jsxs(Grid, {
167
+ container: true,
168
+ justifyContent: "space-between",
169
+ className: "themeCard",
170
+ gap: 2,
171
+ children: [/*#__PURE__*/_jsxs(Grid, {
172
+ style: {
173
+ width: "90px"
174
+ },
175
+ children: [/*#__PURE__*/_jsx(Typography, {
176
+ variant: "body1",
177
+ className: "title",
178
+ style: {
179
+ whiteSpace: "nowrap",
180
+ textOverflow: "ellipsis",
181
+ overflow: "hidden",
182
+ fontWeight: "500"
183
+ },
184
+ children: name
185
+ }), /*#__PURE__*/_jsx(Typography, {
186
+ variant: "body2",
187
+ className: "fs-12 textSecondary moodName",
188
+ children: mood_name
189
+ })]
190
+ }), /*#__PURE__*/_jsxs(Grid, {
191
+ className: "flexAlign",
192
+ sx: {
193
+ gap: "5px"
194
+ },
195
+ children: [primaryColors?.map((color, i) => {
196
+ return /*#__PURE__*/_jsx(Grid, {
197
+ className: "primaryCard",
198
+ style: {
199
+ backgroundColor: color
200
+ }
201
+ }, i);
202
+ }), /*#__PURE__*/_jsx(Grid, {
203
+ className: "otherColors",
204
+ sx: {
205
+ gap: "5px"
206
+ },
207
+ children: otherColors.map((color, i) => {
208
+ return /*#__PURE__*/_jsx(Grid, {
209
+ className: "smallCard",
210
+ style: {
211
+ backgroundColor: color
212
+ }
213
+ }, i);
214
+ })
215
+ })]
216
+ })]
217
+ })]
218
+ });
219
+ };
220
+ const showThemeSettings = id && !themeMoodboard;
221
+ return /*#__PURE__*/_jsx(Grid, {
222
+ className: className,
223
+ children: /*#__PURE__*/_jsxs(Drawer, {
224
+ className: className,
225
+ open: open,
226
+ onClose: onClose,
227
+ anchor: "right",
228
+ children: [/*#__PURE__*/_jsxs(Grid, {
229
+ className: "settingsContainer",
230
+ children: [/*#__PURE__*/_jsxs(Grid, {
231
+ container: true,
232
+ justifyContent: "space-between",
233
+ wrap: "nowrap",
234
+ className: "header"
235
+ // sx={{ px: 2 }}
236
+ ,
237
+ children: [/*#__PURE__*/_jsxs(Grid, {
238
+ children: [/*#__PURE__*/_jsx(Typography, {
239
+ variant: "body1",
240
+ className: "title",
241
+ children: "Theme/Brand Setting"
242
+ }), /*#__PURE__*/_jsxs(Typography, {
243
+ variant: "body1",
244
+ className: "fs-12 textSecondary",
245
+ sx: {
246
+ mt: 0.5
247
+ },
248
+ children: ["Change the entire style of your website with a single click.", " "]
249
+ })]
250
+ }), /*#__PURE__*/_jsx(IconButton, {
251
+ className: "closeBtn",
252
+ onClick: onClose,
253
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
254
+ })]
255
+ }), /*#__PURE__*/_jsx(Grid, {
256
+ className: "activeTheme",
257
+ children: !themeMoodboard ? /*#__PURE__*/_jsx(ActiveTheme, {
258
+ onExplore: () => setThemeMoodboard(true)
259
+ }) : /*#__PURE__*/_jsxs(Grid, {
260
+ className: "sectionDetail",
261
+ children: [/*#__PURE__*/_jsxs(Typography, {
262
+ variant: "body1",
263
+ className: "sectionTitle flexAlign",
264
+ children: [/*#__PURE__*/_jsx(IconButton, {
265
+ onClick: () => setThemeMoodboard(false),
266
+ className: "backBtn",
267
+ children: /*#__PURE__*/_jsx(BackIcon, {})
268
+ }), "Theme Moodboard"]
269
+ }), /*#__PURE__*/_jsx(Box, {
270
+ sx: {
271
+ borderBottom: 1,
272
+ borderColor: "divider"
273
+ },
274
+ className: "tabWrapper",
275
+ children: /*#__PURE__*/_jsxs(Tabs, {
276
+ value: themeTabType,
277
+ onChange: handleTabChange,
278
+ variant: "fullWidth",
279
+ scrollButtons: false,
280
+ "aria-label": "scrollable prevent tabs example",
281
+ children: [/*#__PURE__*/_jsx(Tab, {
282
+ label: /*#__PURE__*/_jsx(Typography, {
283
+ variant: "body1",
284
+ className: "fs-14 fw-500 transformNone",
285
+ children: "Key themes"
286
+ })
287
+ }), /*#__PURE__*/_jsx(Tab, {
288
+ label: /*#__PURE__*/_jsx(Typography, {
289
+ variant: "body1",
290
+ className: "fs-14 fw-500 transformNone",
291
+ children: "Saved themes"
292
+ })
293
+ })]
294
+ })
295
+ }), loading ? /*#__PURE__*/_jsx("div", {
296
+ style: {
297
+ display: "flex",
298
+ justifyContent: "center",
299
+ alignItems: "center",
300
+ margin: 0,
301
+ padding: 0,
302
+ height: "50px",
303
+ overflow: "hidden"
304
+ },
305
+ children: /*#__PURE__*/_jsx(CircularProgress, {})
306
+ }) : null, themes.map((theme, i) => {
307
+ return /*#__PURE__*/_jsx(ThemeCard, {
308
+ theme: theme
309
+ }, i);
310
+ })]
311
+ })
312
+ }), showThemeSettings ? /*#__PURE__*/_jsxs(_Fragment, {
313
+ children: [/*#__PURE__*/_jsx(Grid, {
314
+ sx: {
315
+ px: 1,
316
+ mt: 1
317
+ },
318
+ children: /*#__PURE__*/_jsx(ColorTheme, {
319
+ colors: getColors(colors),
320
+ onColorChange: onColorChange,
321
+ openDefault: open === "editThemeColor",
322
+ appTheme: appTheme,
323
+ openSettings: openSettings,
324
+ onSettingsChange: onSettingsChange,
325
+ type: "colors"
326
+ })
327
+ }), /*#__PURE__*/_jsx(Grid, {
328
+ sx: {
329
+ px: 1,
330
+ mt: 1
331
+ },
332
+ children: /*#__PURE__*/_jsx(Fonts, {
333
+ appTheme: appTheme,
334
+ customProps: customProps,
335
+ openSettings: openSettings,
336
+ onSettingsChange: onSettingsChange,
337
+ type: "fonts"
338
+ })
339
+ }), /*#__PURE__*/_jsx(Grid, {
340
+ sx: {
341
+ px: 1,
342
+ mt: 1
343
+ },
344
+ children: /*#__PURE__*/_jsx(Buttons, {
345
+ appTheme: appTheme,
346
+ customProps: customProps,
347
+ openSettings: openSettings,
348
+ onSettingsChange: onSettingsChange,
349
+ type: "buttons"
350
+ })
351
+ })]
352
+ }) : null]
353
+ }), showThemeSettings ? /*#__PURE__*/_jsxs(Box, {
354
+ className: "saveThemeBtnsWrapper",
355
+ component: "div",
356
+ children: [isUpdateTheme ? /*#__PURE__*/_jsx(SaveTheme, {
357
+ saveBtnLabel: "Add new theme",
358
+ loading: savingTheme,
359
+ onSave: onSaveTheme,
360
+ defaultFormData: {
361
+ name,
362
+ mood_name
363
+ },
364
+ addNewTheme: true,
365
+ appTheme: appTheme
366
+ }) : null, /*#__PURE__*/_jsx(SaveTheme, {
367
+ saveBtnLabel: isUpdateTheme ? "Update theme" : "Save to my theme",
368
+ loading: savingTheme,
369
+ onSave: onSaveTheme,
370
+ defaultFormData: {
371
+ name,
372
+ mood_name
373
+ },
374
+ appTheme: appTheme
375
+ })]
376
+ }) : null]
377
+ })
378
+ });
379
+ };
380
+ export default styled(ThemeSettings)(Style);
@@ -0,0 +1,299 @@
1
+ const Style = ({
2
+ appTheme
3
+ }) => {
4
+ const {
5
+ textColor,
6
+ tv_text,
7
+ uploadFileBg,
8
+ closeButtonBgColor,
9
+ closeButtonSvgStroke,
10
+ deviderBgColor,
11
+ activeColor,
12
+ cardOutsetBg,
13
+ cardBorder,
14
+ cardBg,
15
+ selectedCardOutsetBg,
16
+ cardBorder2,
17
+ cardShadow,
18
+ sidebarBorder,
19
+ cardBg2,
20
+ miniToolBarBackground,
21
+ closeButtonBackground,
22
+ customDialogueCloseBtnColor,
23
+ customDialogueCloseBtnBorder
24
+ } = appTheme?.palette?.editor || {};
25
+ return {
26
+ ".fs-12": {
27
+ fontSize: "12px"
28
+ },
29
+ ".fs-14": {
30
+ fontSize: "14px"
31
+ },
32
+ ".fs-10": {
33
+ fontSize: "10px"
34
+ },
35
+ ".fw-500": {
36
+ fontWeight: "500"
37
+ },
38
+ ".fw-600": {
39
+ fontWeight: "600"
40
+ },
41
+ ".pointer": {
42
+ cursor: "pointer"
43
+ },
44
+ ".transformNone": {
45
+ textTransform: "none"
46
+ },
47
+ "& .MuiDrawer-paper": {
48
+ background: cardBg,
49
+ color: textColor,
50
+ border: `1px solid ${sidebarBorder}`,
51
+ display: "flex",
52
+ flexDirection: "column",
53
+ fontFamily: '"Inter", sans-serif'
54
+ },
55
+ "& .MuiTypography-root": {
56
+ fontFamily: '"Inter", sans-serif'
57
+ },
58
+ "& .textSecondary": {
59
+ color: tv_text
60
+ },
61
+ ".settingsContainer": {
62
+ width: "340px",
63
+ padding: "16px 5px",
64
+ position: "relative",
65
+ overflowY: "auto",
66
+ flexGrow: 1,
67
+ ".header": {
68
+ borderBottom: `1px solid ${deviderBgColor}`,
69
+ width: "calc(100% - 32px)",
70
+ margin: "auto",
71
+ marginBottom: "16px",
72
+ paddingBottom: "16px"
73
+ }
74
+ },
75
+ ".title": {
76
+ fontWeight: "600",
77
+ fontSize: "14px"
78
+ },
79
+ ".moodName": {
80
+ whiteSpace: "nowrap",
81
+ overflow: "hidden",
82
+ textOverflow: "ellipsis"
83
+ },
84
+ ".closeBtn, .backBtn": {
85
+ width: "20px",
86
+ height: "20px",
87
+ BorderRadius: "4px",
88
+ flexShrik: "0",
89
+ padding: "1px",
90
+ borderRadius: "4px",
91
+ background: closeButtonBgColor,
92
+ color: `${closeButtonSvgStroke} !important`,
93
+ "& svg": {
94
+ color: `${closeButtonSvgStroke} !important`
95
+ }
96
+ },
97
+ ".activeTheme": {
98
+ background: cardOutsetBg,
99
+ padding: "14px 10px",
100
+ borderRadius: "4px"
101
+ },
102
+ ".activeThemeInnner": {
103
+ borderRadius: "7px",
104
+ padding: "16px",
105
+ boxShadow: "1px 2px 5px 0px #00000014",
106
+ background: cardBg,
107
+ border: `1px solid ${cardBorder}`
108
+ },
109
+ "& .activeThemeTitle": {
110
+ paddingBottom: "6px"
111
+ },
112
+ "& .exploreBtn": {
113
+ color: "#2563EB",
114
+ textDecorationColor: "#2563EB"
115
+ },
116
+ ".flexAlign": {
117
+ display: "flex",
118
+ alignItems: "center"
119
+ },
120
+ ".flexItem": {
121
+ maxWidth: "50%",
122
+ whiteSpace: "nowrap",
123
+ overflow: "hidden",
124
+ textOverflow: "ellipsis"
125
+ },
126
+ ".activeColorBox, .xsColorBox": {
127
+ width: "24px",
128
+ height: "24px",
129
+ borderRadius: "5px",
130
+ border: `1px solid #929292`
131
+ },
132
+ ".themeCard": {
133
+ borderRadius: "7px",
134
+ padding: "16px",
135
+ border: `1px solid ${uploadFileBg}`,
136
+ boxShadow: "1px 2px 5px 0px #00000014",
137
+ background: cardBg2,
138
+ flexWrap: "nowrap",
139
+ display: "flex",
140
+ justifyContent: "space-between",
141
+ alignItems: "center"
142
+ },
143
+ ".themeCardWrapper": {
144
+ padding: "6px 14px",
145
+ cursor: "pointer",
146
+ "&.active": {
147
+ background: "#ECF2FF"
148
+ }
149
+ },
150
+ ".primaryCard, .secondaryCard": {
151
+ width: "44px",
152
+ height: "44px",
153
+ borderRadius: "5px",
154
+ border: `1px solid #929292`
155
+ },
156
+ ".otherColors": {
157
+ display: "flex",
158
+ flexWrap: "wrap",
159
+ width: "48px",
160
+ ".smallCard": {
161
+ width: "20px",
162
+ height: "20px",
163
+ borderRadius: "5px",
164
+ border: `1px solid #929292`
165
+ }
166
+ },
167
+ ".sectionDetail": {
168
+ borderRadius: "4px",
169
+ background: cardBg
170
+ },
171
+ ".sectionTitle": {
172
+ borderBottom: `1px solid ${deviderBgColor}`,
173
+ fontWeight: "600",
174
+ fontSize: "14px",
175
+ padding: "14px 0px",
176
+ width: "calc(100% - 30px)",
177
+ margin: "auto",
178
+ gap: "8px"
179
+ },
180
+ // ".activeThemeInnner": {
181
+ // borderRadius: "7px",
182
+ // padding: "16px",
183
+ // boxShadow: "1px 2px 5px 0px #00000014",
184
+ // background: "#fff",
185
+ // },
186
+ ".activeWrapper": {
187
+ background: selectedCardOutsetBg,
188
+ padding: "14px 10px",
189
+ position: "relative",
190
+ ".tickIcon": {
191
+ position: "absolute",
192
+ right: "5px",
193
+ top: "8px",
194
+ rect: {
195
+ stroke: cardBorder2
196
+ }
197
+ }
198
+ },
199
+ ".MuiDivider-root": {
200
+ border: `0.5px solid ${deviderBgColor}`
201
+ },
202
+ ".settingAccordion": {
203
+ background: cardBg2,
204
+ color: textColor,
205
+ boxShadow: `1px 2px 8px 0px ${cardShadow}`,
206
+ border: `1px solid ${uploadFileBg}`,
207
+ borderRadius: "8px !important",
208
+ marginTop: "10px",
209
+ marginBottom: "10px",
210
+ padding: "0px 12px",
211
+ "&&.Mui-expanded": {
212
+ border: `1.5px solid #2563EB`,
213
+ boxShadow: "1px 2px 14px 0px #2563EB47",
214
+ "& .MuiAccordionSummary-expandIconWrapper": {
215
+ color: "#2563EB !important"
216
+ }
217
+ },
218
+ "&:before": {
219
+ background: "transparent"
220
+ },
221
+ ".MuiAccordionSummary-expandIconWrapper": {
222
+ color: textColor
223
+ },
224
+ ".MuiAccordionSummary-root ": {
225
+ // minHeight: "20px",
226
+ padding: "0px",
227
+ minHeight: "42px !important",
228
+ "&.Mui-expanded": {
229
+ // minHeight: "48px !important",
230
+ borderBottom: `1px solid ${deviderBgColor}`
231
+ }
232
+ },
233
+ ".MuiAccordionSummary-content ": {
234
+ // padding: "12px 0px !important",
235
+ margin: "0px !important",
236
+ // minHeight: "45px",
237
+ fontSize: "14px",
238
+ fontWeight: "600"
239
+ },
240
+ ".MuiAccordionDetails-root ": {
241
+ padding: "12px 0px !important"
242
+ }
243
+ },
244
+ ".MuiTab-root": {
245
+ color: textColor
246
+ },
247
+ ".saveThemeBtnsWrapper": {
248
+ position: "sticky",
249
+ bottom: "0px",
250
+ right: "0px",
251
+ boxShadow: `0px -3px 12px 0px ${cardShadow}`,
252
+ padding: "10px",
253
+ borderRadius: "8px",
254
+ display: "flex",
255
+ justifyContent: "end",
256
+ alignItems: "center",
257
+ gap: "6px",
258
+ background: cardBg,
259
+ "& .outlineBtn": {
260
+ background: miniToolBarBackground
261
+ },
262
+ "& button": {
263
+ fontWeight: 600,
264
+ fontSize: "14px",
265
+ opacity: 1,
266
+ borderRadius: "8px",
267
+ textTransform: "math-auto",
268
+ padding: "4px 20px",
269
+ height: "fit-content",
270
+ minWidth: "90px",
271
+ lineHeight: "1.75 !important",
272
+ "@media only screen and (max-width: 899px)": {
273
+ width: "50%"
274
+ },
275
+ "&.confirmBtn": {
276
+ backgroundColor: "#2563EB",
277
+ color: "#ffffff",
278
+ border: `1px solid #2563EB`
279
+ },
280
+ "&.cancelBtn": {
281
+ backgroundColor: closeButtonBackground,
282
+ color: customDialogueCloseBtnColor,
283
+ border: `1px solid ${customDialogueCloseBtnBorder}`
284
+ }
285
+ }
286
+ },
287
+ ".tabWrapper": {
288
+ borderBottom: `1px solid ${deviderBgColor}`,
289
+ marginBottom: "6px",
290
+ "& .Mui-selected": {
291
+ color: activeColor
292
+ },
293
+ "& .MuiTabs-indicator": {
294
+ backgroundColor: activeColor
295
+ }
296
+ }
297
+ };
298
+ };
299
+ export default Style;