@flozy/editor 10.2.5 → 10.2.6

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 (183) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +131 -16
  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 +30 -7
  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 +181 -170
  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 +36 -31
  33. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  34. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  35. package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
  36. package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
  37. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  38. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  39. package/dist/Editor/Elements/List/CheckList.js +3 -2
  40. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  41. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  42. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  43. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  44. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  45. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  46. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  47. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  48. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  49. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  50. package/dist/Editor/Elements/Table/Styles.js +7 -0
  51. package/dist/Editor/Elements/Table/Table.js +3 -3
  52. package/dist/Editor/Elements/Table/TableCell.js +31 -8
  53. package/dist/Editor/Elements/Title/title.js +6 -6
  54. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  55. package/dist/Editor/MiniEditor.js +2 -1
  56. package/dist/Editor/Styles/EditorStyles.js +5 -5
  57. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  58. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  59. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  60. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  61. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  64. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  65. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  66. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  67. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  68. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  69. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  70. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  71. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  72. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  73. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  74. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  75. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  76. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  77. package/dist/Editor/common/Checkbox/index.js +46 -0
  78. package/dist/Editor/common/Checkbox/styles.js +45 -0
  79. package/dist/Editor/common/ColorPickerButton.js +41 -16
  80. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  81. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  82. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  83. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  84. package/dist/Editor/common/CustomSelect.js +43 -0
  85. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  86. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  87. package/dist/Editor/common/Icon.js +31 -1
  88. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  89. package/dist/Editor/common/LinkSettings/NavComponents.js +61 -55
  90. package/dist/Editor/common/LinkSettings/index.js +82 -79
  91. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  92. package/dist/Editor/common/LinkSettings/style.js +209 -74
  93. package/dist/Editor/common/RadioGroup/index.js +48 -0
  94. package/dist/Editor/common/RadioGroup/styles.js +29 -0
  95. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
  96. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  97. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  98. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  99. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  100. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  101. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  102. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  103. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  104. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  105. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  106. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  107. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  108. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  109. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  110. package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
  111. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  112. package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
  113. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  114. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  115. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  116. package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
  117. package/dist/Editor/common/RnD/Utils/index.js +3 -1
  118. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +48 -54
  119. package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
  120. package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
  121. package/dist/Editor/common/RnD/index.js +6 -11
  122. package/dist/Editor/common/Select/index.js +44 -5
  123. package/dist/Editor/common/Select/styles.js +30 -2
  124. package/dist/Editor/common/Shorthands/elements.js +65 -11
  125. package/dist/Editor/common/SnackBar/index.js +43 -0
  126. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  127. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
  128. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  129. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  130. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  131. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  132. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  133. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  134. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  135. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  136. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  137. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  138. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  139. package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
  140. package/dist/Editor/common/Uploader.js +8 -0
  141. package/dist/Editor/common/iconListV2.js +177 -6
  142. package/dist/Editor/common/iconslist.js +24 -0
  143. package/dist/Editor/commonStyle.js +186 -62
  144. package/dist/Editor/helper/index.js +4 -0
  145. package/dist/Editor/helper/textIndeces.js +58 -0
  146. package/dist/Editor/helper/theme.js +203 -2
  147. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  148. package/dist/Editor/hooks/useMouseMove.js +8 -5
  149. package/dist/Editor/hooks/useTable.js +5 -4
  150. package/dist/Editor/hooks/useThemeValues.js +63 -0
  151. package/dist/Editor/plugins/withEmbeds.js +1 -1
  152. package/dist/Editor/plugins/withHTML.js +3 -1
  153. package/dist/Editor/plugins/withTable.js +1 -1
  154. package/dist/Editor/theme/ThemeList.js +50 -173
  155. package/dist/Editor/theme/index.js +149 -0
  156. package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
  157. package/dist/Editor/themeSettings/buttons/index.js +300 -0
  158. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  159. package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
  160. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  161. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  162. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  163. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  164. package/dist/Editor/themeSettings/icons.js +60 -0
  165. package/dist/Editor/themeSettings/index.js +369 -0
  166. package/dist/Editor/themeSettings/style.js +299 -0
  167. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  168. package/dist/Editor/themeSettingsAI/index.js +355 -0
  169. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  170. package/dist/Editor/themeSettingsAI/style.js +332 -0
  171. package/dist/Editor/utils/SlateUtilityFunctions.js +169 -45
  172. package/dist/Editor/utils/accordion.js +14 -4
  173. package/dist/Editor/utils/button.js +1 -17
  174. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  175. package/dist/Editor/utils/draftToSlate.js +3 -2
  176. package/dist/Editor/utils/events.js +50 -6
  177. package/dist/Editor/utils/font.js +40 -37
  178. package/dist/Editor/utils/form.js +4 -4
  179. package/dist/Editor/utils/formfield.js +8 -2
  180. package/dist/Editor/utils/helper.js +134 -26
  181. package/dist/Editor/utils/insertAppHeader.js +1 -1
  182. package/dist/Editor/utils/signature.js +2 -9
  183. package/package.json +4 -4
@@ -0,0 +1,369 @@
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
+ const currThemeName = currentSelectedTheme?.name;
75
+ if (currThemeName && currThemeName !== name) {
76
+ // for theme templates created by design team
77
+ updateTheme({
78
+ name: currThemeName
79
+ });
80
+ }
81
+ setThemes(result?.data || []);
82
+ } catch (err) {
83
+ console.log(err);
84
+ }
85
+ setLoading(false);
86
+ };
87
+ useEffect(() => {
88
+ getThemesList(themeTabType);
89
+ }, []);
90
+ const handleThemeChange = theme => {
91
+ updateTheme(theme, {
92
+ action: "THEME_CHANGE"
93
+ });
94
+ };
95
+ const onColorChange = (color, colorIndex) => {
96
+ updateTheme({
97
+ [`color${colorIndex}`]: color
98
+ }, {
99
+ action: "CSS_VAR_CHANGE",
100
+ fieldName: "colors"
101
+ });
102
+ };
103
+ const handleTabChange = (event, newValue) => {
104
+ setThemeTabType(newValue);
105
+ getThemesList(newValue);
106
+ };
107
+ const isUpdateTheme = Number(userSelectedTheme?.type) === 2;
108
+ const onSaveTheme = async (formData = {}, addNewTheme) => {
109
+ setSavingTheme(true);
110
+ try {
111
+ let type = isUpdateTheme && !addNewTheme ? "update" : "create";
112
+ const result = await services("saveTheme", {
113
+ type,
114
+ id,
115
+ template_tag,
116
+ ...formData,
117
+ theme: userSelectedTheme?.theme
118
+ });
119
+ const update = {
120
+ ...userSelectedTheme,
121
+ ...formData,
122
+ type: "2"
123
+ };
124
+ const createdId = result?.data?.id;
125
+ if (createdId) {
126
+ update.id = createdId;
127
+ }
128
+ updateTheme(update);
129
+ getThemesList(themeTabType);
130
+ } catch (err) {
131
+ console.log(err);
132
+ }
133
+ setSavingTheme(false);
134
+ };
135
+
136
+ // themeCard
137
+ const ThemeCard = ({
138
+ theme
139
+ }) => {
140
+ const {
141
+ name,
142
+ mood_name = ""
143
+ } = theme;
144
+ const {
145
+ colors = {}
146
+ } = theme?.theme?.cssVars || {};
147
+ const {
148
+ primaryColors,
149
+ otherColors
150
+ } = getColors(colors);
151
+ const isSelected = theme.id === userSelectedTheme?.id;
152
+ return /*#__PURE__*/_jsxs(Grid, {
153
+ className: `themeCardWrapper ${isSelected ? "activeWrapper" : ""}`,
154
+ onClick: () => handleThemeChange(theme),
155
+ children: [isSelected ? /*#__PURE__*/_jsx(TickIcon, {}) : null, /*#__PURE__*/_jsxs(Grid, {
156
+ container: true,
157
+ justifyContent: "space-between",
158
+ className: "themeCard",
159
+ gap: 2,
160
+ children: [/*#__PURE__*/_jsxs(Grid, {
161
+ style: {
162
+ width: "90px"
163
+ },
164
+ children: [/*#__PURE__*/_jsx(Typography, {
165
+ variant: "body1",
166
+ className: "title",
167
+ style: {
168
+ whiteSpace: "nowrap",
169
+ textOverflow: "ellipsis",
170
+ overflow: "hidden",
171
+ fontWeight: "500"
172
+ },
173
+ children: name
174
+ }), /*#__PURE__*/_jsx(Typography, {
175
+ variant: "body2",
176
+ className: "fs-12 textSecondary moodName",
177
+ children: mood_name
178
+ })]
179
+ }), /*#__PURE__*/_jsxs(Grid, {
180
+ className: "flexAlign",
181
+ sx: {
182
+ gap: "5px"
183
+ },
184
+ children: [primaryColors?.map((color, i) => {
185
+ return /*#__PURE__*/_jsx(Grid, {
186
+ className: "primaryCard",
187
+ style: {
188
+ backgroundColor: color
189
+ }
190
+ }, i);
191
+ }), /*#__PURE__*/_jsx(Grid, {
192
+ className: "otherColors",
193
+ sx: {
194
+ gap: "5px"
195
+ },
196
+ children: otherColors.map((color, i) => {
197
+ return /*#__PURE__*/_jsx(Grid, {
198
+ className: "smallCard",
199
+ style: {
200
+ backgroundColor: color
201
+ }
202
+ }, i);
203
+ })
204
+ })]
205
+ })]
206
+ })]
207
+ });
208
+ };
209
+ const showThemeSettings = id && !themeMoodboard;
210
+ return /*#__PURE__*/_jsx(Grid, {
211
+ className: className,
212
+ children: /*#__PURE__*/_jsxs(Drawer, {
213
+ className: className,
214
+ open: open,
215
+ onClose: onClose,
216
+ anchor: "right",
217
+ children: [/*#__PURE__*/_jsxs(Grid, {
218
+ className: "settingsContainer",
219
+ children: [/*#__PURE__*/_jsxs(Grid, {
220
+ container: true,
221
+ justifyContent: "space-between",
222
+ wrap: "nowrap",
223
+ className: "header"
224
+ // sx={{ px: 2 }}
225
+ ,
226
+ children: [/*#__PURE__*/_jsxs(Grid, {
227
+ children: [/*#__PURE__*/_jsx(Typography, {
228
+ variant: "body1",
229
+ className: "title",
230
+ children: "Theme/Brand Setting"
231
+ }), /*#__PURE__*/_jsxs(Typography, {
232
+ variant: "body1",
233
+ className: "fs-12 textSecondary",
234
+ sx: {
235
+ mt: 0.5
236
+ },
237
+ children: ["Change the entire style of your website with a single click.", " "]
238
+ })]
239
+ }), /*#__PURE__*/_jsx(IconButton, {
240
+ className: "closeBtn",
241
+ onClick: onClose,
242
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
243
+ })]
244
+ }), /*#__PURE__*/_jsx(Grid, {
245
+ className: "activeTheme",
246
+ children: !themeMoodboard ? /*#__PURE__*/_jsx(ActiveTheme, {
247
+ onExplore: () => setThemeMoodboard(true)
248
+ }) : /*#__PURE__*/_jsxs(Grid, {
249
+ className: "sectionDetail",
250
+ children: [/*#__PURE__*/_jsxs(Typography, {
251
+ variant: "body1",
252
+ className: "sectionTitle flexAlign",
253
+ children: [/*#__PURE__*/_jsx(IconButton, {
254
+ onClick: () => setThemeMoodboard(false),
255
+ className: "backBtn",
256
+ children: /*#__PURE__*/_jsx(BackIcon, {})
257
+ }), "Theme Moodboard"]
258
+ }), /*#__PURE__*/_jsx(Box, {
259
+ sx: {
260
+ borderBottom: 1,
261
+ borderColor: "divider"
262
+ },
263
+ className: "tabWrapper",
264
+ children: /*#__PURE__*/_jsxs(Tabs, {
265
+ value: themeTabType,
266
+ onChange: handleTabChange,
267
+ variant: "fullWidth",
268
+ scrollButtons: false,
269
+ "aria-label": "scrollable prevent tabs example",
270
+ children: [/*#__PURE__*/_jsx(Tab, {
271
+ label: /*#__PURE__*/_jsx(Typography, {
272
+ variant: "body1",
273
+ className: "fs-14 fw-500 transformNone",
274
+ children: "Key themes"
275
+ })
276
+ }), /*#__PURE__*/_jsx(Tab, {
277
+ label: /*#__PURE__*/_jsx(Typography, {
278
+ variant: "body1",
279
+ className: "fs-14 fw-500 transformNone",
280
+ children: "Saved themes"
281
+ })
282
+ })]
283
+ })
284
+ }), loading ? /*#__PURE__*/_jsx("div", {
285
+ style: {
286
+ display: "flex",
287
+ justifyContent: "center",
288
+ alignItems: "center",
289
+ margin: 0,
290
+ padding: 0,
291
+ height: "50px",
292
+ overflow: "hidden"
293
+ },
294
+ children: /*#__PURE__*/_jsx(CircularProgress, {})
295
+ }) : null, themes.map((theme, i) => {
296
+ return /*#__PURE__*/_jsx(ThemeCard, {
297
+ theme: theme
298
+ }, i);
299
+ })]
300
+ })
301
+ }), showThemeSettings ? /*#__PURE__*/_jsxs(_Fragment, {
302
+ children: [/*#__PURE__*/_jsx(Grid, {
303
+ sx: {
304
+ px: 1,
305
+ mt: 1
306
+ },
307
+ children: /*#__PURE__*/_jsx(ColorTheme, {
308
+ colors: getColors(colors),
309
+ onColorChange: onColorChange,
310
+ openDefault: open === "editThemeColor",
311
+ appTheme: appTheme,
312
+ openSettings: openSettings,
313
+ onSettingsChange: onSettingsChange,
314
+ type: "colors"
315
+ })
316
+ }), /*#__PURE__*/_jsx(Grid, {
317
+ sx: {
318
+ px: 1,
319
+ mt: 1
320
+ },
321
+ children: /*#__PURE__*/_jsx(Fonts, {
322
+ appTheme: appTheme,
323
+ customProps: customProps,
324
+ openSettings: openSettings,
325
+ onSettingsChange: onSettingsChange,
326
+ type: "fonts"
327
+ })
328
+ }), /*#__PURE__*/_jsx(Grid, {
329
+ sx: {
330
+ px: 1,
331
+ mt: 1
332
+ },
333
+ children: /*#__PURE__*/_jsx(Buttons, {
334
+ appTheme: appTheme,
335
+ customProps: customProps,
336
+ openSettings: openSettings,
337
+ onSettingsChange: onSettingsChange,
338
+ type: "buttons"
339
+ })
340
+ })]
341
+ }) : null]
342
+ }), showThemeSettings ? /*#__PURE__*/_jsxs(Box, {
343
+ className: "saveThemeBtnsWrapper",
344
+ component: "div",
345
+ children: [isUpdateTheme ? /*#__PURE__*/_jsx(SaveTheme, {
346
+ saveBtnLabel: "Add new theme",
347
+ loading: savingTheme,
348
+ onSave: onSaveTheme,
349
+ defaultFormData: {
350
+ name,
351
+ mood_name
352
+ },
353
+ addNewTheme: true,
354
+ appTheme: appTheme
355
+ }) : null, /*#__PURE__*/_jsx(SaveTheme, {
356
+ saveBtnLabel: isUpdateTheme ? "Update theme" : "Save to my theme",
357
+ loading: savingTheme,
358
+ onSave: onSaveTheme,
359
+ defaultFormData: {
360
+ name,
361
+ mood_name
362
+ },
363
+ appTheme: appTheme
364
+ })]
365
+ }) : null]
366
+ })
367
+ });
368
+ };
369
+ 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;