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