@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,300 @@
1
+ import React, { useRef, useState } from "react";
2
+ import { Accordion, AccordionDetails, AccordionSummary, Button, Fade, Grid, IconButton, Popper, Typography, styled, useTheme } from "@mui/material";
3
+
4
+ // Style
5
+ import Style from "./style";
6
+ import { PenIcon } from "../icons";
7
+ import StyleBuilder from "../../common/StyleBuilder";
8
+ import { fontOptions } from "../../utils/font";
9
+ import { useEditorTheme } from "../../hooks/useEditorTheme";
10
+ import { getBreakPointsValue, getElementProperty, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
11
+ import { KeyboardArrowDownRounded } from "@mui/icons-material";
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { jsxs as _jsxs } from "react/jsx-runtime";
14
+ const buttonStyle = [{
15
+ tab: "General",
16
+ value: "size",
17
+ fields: [{
18
+ label: "Font Family",
19
+ key: "fontFamily",
20
+ type: "textOptions",
21
+ options: fontOptions,
22
+ webFont: true,
23
+ width: 7,
24
+ renderOption: option => {
25
+ return /*#__PURE__*/_jsx("span", {
26
+ style: {
27
+ fontFamily: option.value
28
+ },
29
+ children: option.text
30
+ });
31
+ }
32
+ }, {
33
+ label: "Font Size",
34
+ key: "textSize",
35
+ type: "fontSize",
36
+ width: 5,
37
+ placeholder: "16px or 1em"
38
+ }]
39
+ }, {
40
+ tab: "Colors",
41
+ value: "colors",
42
+ fields: [{
43
+ label: "Text Color",
44
+ key: "textColor",
45
+ type: "color",
46
+ needPreview: true
47
+ }, {
48
+ label: "Button Color",
49
+ key: "bgColor",
50
+ type: "color",
51
+ themeEnabled: true
52
+ }]
53
+ }, {
54
+ tab: "Banner Spacing",
55
+ value: "bannerSpacing",
56
+ fields: [{
57
+ label: "Banner Spacing",
58
+ key: "bannerSpacing",
59
+ type: "bannerSpacing"
60
+ }]
61
+ }, {
62
+ tab: "Border",
63
+ value: "border",
64
+ fields: [{
65
+ label: "Border Radius",
66
+ key: "borderRadius",
67
+ type: "borderRadius"
68
+ }]
69
+ }, {
70
+ tab: "Hover Colors",
71
+ value: "hoverColors",
72
+ fields: [{
73
+ label: "Hover Text Color",
74
+ key: "textColorHover",
75
+ type: "color",
76
+ needPreview: true
77
+ }, {
78
+ label: "Hover Button Color",
79
+ key: "bgColorHover",
80
+ type: "color"
81
+ }]
82
+ }];
83
+ function getBtnSxProps(buttonStyle = {}, theme) {
84
+ let newStyle = {
85
+ ...buttonStyle
86
+ };
87
+ // if (newStyle?.bannerSpacing) {
88
+ // newStyle.padding = newStyle?.bannerSpacing;
89
+ // }
90
+
91
+ const btnSp = groupByBreakpoint({
92
+ borderRadius: {
93
+ ...getBreakPointsValue(newStyle?.borderRadius || {}, null, "overrideBorderRadius", true)
94
+ }
95
+ // padding: {
96
+ // ...getTRBLBreakPoints(newStyle?.bannerSpacing),
97
+ // },
98
+ }, theme);
99
+ newStyle = {
100
+ ...newStyle,
101
+ ...btnSp
102
+ };
103
+ delete newStyle?.bannerSpacing;
104
+ if (newStyle?.hover) {
105
+ newStyle["&:hover"] = newStyle.hover;
106
+ delete newStyle.hover;
107
+ }
108
+ return newStyle;
109
+ }
110
+ const MAP_HOVER_KEYS = {
111
+ color: "textColorHover",
112
+ background: "bgColorHover"
113
+ };
114
+ const MAP_THEME_TO_ELEMENT_KEYS = {
115
+ color: "textColor",
116
+ background: "bgColor",
117
+ fontFamily: (value, prev, buttonEl) => {
118
+ if (!buttonEl?.current) {
119
+ return prev;
120
+ }
121
+ const val = getElementProperty(buttonEl?.current, "font-family");
122
+ return {
123
+ ...prev,
124
+ fontFamily: val
125
+ };
126
+ },
127
+ fontSize: "textSize",
128
+ borderRadius: "borderRadius",
129
+ bannerSpacing: "bannerSpacing",
130
+ lockRadius: "lockRadius",
131
+ lockbannerSpacing: "lockbannerSpacing",
132
+ // fontWeight
133
+
134
+ hover: (value = {}, prev = {}) => {
135
+ const props = getProps(value, MAP_HOVER_KEYS);
136
+ return {
137
+ ...prev,
138
+ ...props
139
+ };
140
+ }
141
+ };
142
+ const MAP_ELEMENT_TO_THEME_KEYS = {
143
+ textSize: "fontSize",
144
+ textColor: "color",
145
+ bgColor: "background",
146
+ bannerSpacing: "bannerSpacing",
147
+ borderRadius: "borderRadius",
148
+ lockRadius: "lockRadius",
149
+ lockbannerSpacing: "lockbannerSpacing",
150
+ textColorHover: (value, prev) => {
151
+ const hover = {
152
+ ...(prev?.hover || {})
153
+ };
154
+ hover.color = value;
155
+ return {
156
+ ...prev,
157
+ hover
158
+ };
159
+ },
160
+ bgColorHover: (value, prev) => {
161
+ const hover = {
162
+ ...(prev?.hover || {})
163
+ };
164
+ hover.background = value;
165
+ return {
166
+ ...prev,
167
+ hover
168
+ };
169
+ },
170
+ fontFamily: "fontFamily"
171
+ };
172
+ function getProps(buttonStyle, MAP_KEYS, buttonEl) {
173
+ let props = {};
174
+ Object.entries(buttonStyle).forEach(([key, value]) => {
175
+ const elementKey = MAP_KEYS[key];
176
+ if (elementKey) {
177
+ if (typeof elementKey === "string") {
178
+ props[elementKey] = value;
179
+ } else {
180
+ props = elementKey(value, props, buttonEl);
181
+ }
182
+ }
183
+ });
184
+ return props;
185
+ }
186
+ function convertThemeToElementProps(button = {}, buttonEl) {
187
+ const props = getProps(button, MAP_THEME_TO_ELEMENT_KEYS, buttonEl);
188
+ return props;
189
+ }
190
+
191
+ // icons
192
+
193
+ const Buttons = props => {
194
+ const {
195
+ className,
196
+ customProps,
197
+ openSettings,
198
+ onSettingsChange,
199
+ type
200
+ } = props;
201
+ const [anchorEl, setAnchorEl] = useState();
202
+ const theme = useTheme();
203
+ const {
204
+ selectedTheme,
205
+ updateTheme
206
+ } = useEditorTheme();
207
+ const {
208
+ button
209
+ } = selectedTheme?.elementProps || {};
210
+ console.log("getBtnSxProps(button, theme)", getBtnSxProps(button, theme));
211
+ const buttonEl = useRef();
212
+ const elementProps = convertThemeToElementProps(button, buttonEl);
213
+
214
+ // State
215
+ return /*#__PURE__*/_jsxs(Grid, {
216
+ className: className,
217
+ children: [/*#__PURE__*/_jsxs(Accordion, {
218
+ className: "settingAccordion",
219
+ onChange: () => onSettingsChange(type),
220
+ expanded: openSettings === type,
221
+ children: [/*#__PURE__*/_jsx(AccordionSummary, {
222
+ expandIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRounded, {}),
223
+ "aria-controls": "panel1-content",
224
+ id: "panel1-header",
225
+ children: "Buttons"
226
+ }), /*#__PURE__*/_jsx(AccordionDetails, {
227
+ children: /*#__PURE__*/_jsxs(Grid, {
228
+ container: true,
229
+ className: "buttonTypeItem",
230
+ justifyContent: "space-between",
231
+ alignItems: "center",
232
+ wrap: "nowrap",
233
+ onClick: e => setAnchorEl(e.currentTarget),
234
+ children: [/*#__PURE__*/_jsxs(Grid, {
235
+ item: true,
236
+ size: 8,
237
+ children: [/*#__PURE__*/_jsx(Typography, {
238
+ variant: "body1",
239
+ className: "fw-600 fs-14",
240
+ style: {
241
+ marginBottom: "10px"
242
+ },
243
+ children: "Theme Button"
244
+ }), /*#__PURE__*/_jsx(Button, {
245
+ sx: getBtnSxProps(button, theme),
246
+ ref: buttonEl,
247
+ children: "Button"
248
+ })]
249
+ }), /*#__PURE__*/_jsx(Grid, {
250
+ item: true,
251
+ size: 4,
252
+ children: /*#__PURE__*/_jsx(IconButton, {
253
+ className: "editIcon",
254
+ children: /*#__PURE__*/_jsx(PenIcon, {})
255
+ })
256
+ })]
257
+ })
258
+ })]
259
+ }), /*#__PURE__*/_jsx(Popper, {
260
+ open: Boolean(anchorEl),
261
+ anchorEl: anchorEl,
262
+ transition: true,
263
+ sx: {
264
+ zIndex: "100000",
265
+ background: "white"
266
+ },
267
+ placement: "left-start",
268
+ children: ({
269
+ TransitionProps
270
+ }) => /*#__PURE__*/_jsx(Fade, {
271
+ ...TransitionProps,
272
+ timeout: 350,
273
+ children: /*#__PURE__*/_jsx("div", {
274
+ children: /*#__PURE__*/_jsx(StyleBuilder, {
275
+ title: "Button",
276
+ type: "buttonStyle",
277
+ element: elementProps,
278
+ onSave: data => {
279
+ const props = getProps(data, MAP_ELEMENT_TO_THEME_KEYS);
280
+ updateTheme(props, {
281
+ action: "ELEMENT_PROPS_CHANGE",
282
+ fieldName: "button"
283
+ });
284
+ setAnchorEl(null);
285
+ },
286
+ onClose: () => {
287
+ setAnchorEl(null);
288
+ },
289
+ renderTabs: buttonStyle,
290
+ customProps: {
291
+ disableEditTheme: true,
292
+ translation: customProps?.translation || (() => {})
293
+ }
294
+ })
295
+ })
296
+ })
297
+ })]
298
+ });
299
+ };
300
+ export default styled(Buttons)(Style);
@@ -0,0 +1,23 @@
1
+ const Style = ({
2
+ appTheme
3
+ }) => ({
4
+ ".buttonTypeItem": {
5
+ padding: "8px 10px",
6
+ width: "calc(100% + 20px)",
7
+ margin: "0 -10px",
8
+ "&:hover": {
9
+ background: appTheme?.palette?.editor?.tv_hover_bg,
10
+ ".editIcon": {
11
+ opacity: "1",
12
+ visibility: "visible"
13
+ }
14
+ },
15
+ ".editIcon": {
16
+ opacity: "0",
17
+ visibility: "hidden",
18
+ width: "30px",
19
+ height: "30px"
20
+ }
21
+ }
22
+ });
23
+ export default Style;
@@ -0,0 +1,310 @@
1
+ import React from "react";
2
+ import { Accordion, AccordionDetails, AccordionSummary, Divider, FormControlLabel, Grid, IconButton, Radio, RadioGroup, ToggleButton, ToggleButtonGroup, Typography, styled } from "@mui/material";
3
+
4
+ // Style
5
+ import Style from "./style";
6
+
7
+ // icons
8
+ import { ChevronLeft, KeyboardArrowDownRounded } from "@mui/icons-material";
9
+ import { EditIcon } from "../icons";
10
+ import ColorPickerButton from "../../common/ColorPickerButton";
11
+ import { getContrastColor } from "../../utils/helper";
12
+ import useCommonStyle from "../../commonStyle";
13
+ import { jsx as _jsx } from "react/jsx-runtime";
14
+ import { jsxs as _jsxs } from "react/jsx-runtime";
15
+ const ColorTheme = props => {
16
+ const {
17
+ className,
18
+ colors,
19
+ onColorChange,
20
+ openDefault,
21
+ appTheme,
22
+ openSettings,
23
+ onSettingsChange,
24
+ type
25
+ } = props;
26
+ const classes = useCommonStyle(appTheme);
27
+ const {
28
+ primaryColors,
29
+ otherColors = []
30
+ } = colors || {};
31
+
32
+ // State
33
+ const [customizeTheme, setCustomizeTheme] = React.useState(false);
34
+ const [buttonType, setButtonType] = React.useState("regular");
35
+ const customTheme = [{
36
+ title: "Text & Line Colors",
37
+ data: [{
38
+ title: "Headings",
39
+ color: "#ccc"
40
+ }, {
41
+ title: "Subheading text",
42
+ color: "#ccc"
43
+ }, {
44
+ title: "Body text",
45
+ color: "#ccc"
46
+ }, {
47
+ title: "Subtext",
48
+ color: "#ccc"
49
+ }, {
50
+ title: "Lines & dividers",
51
+ color: "#ccc"
52
+ }]
53
+ }, {
54
+ title: "Background Colors",
55
+ data: [{
56
+ title: "Primary background color",
57
+ color: "#ccc"
58
+ }, {
59
+ title: "Secondary background color",
60
+ color: "#ccc"
61
+ }]
62
+ }];
63
+ const buttonData = [{
64
+ title: "Button background",
65
+ color: "#ccc"
66
+ }, {
67
+ title: "Button text",
68
+ color: "#ccc"
69
+ }, {
70
+ title: "Button border",
71
+ color: "#ccc"
72
+ }];
73
+
74
+ //button
75
+ const handleButtonType = (event, buttonType) => {
76
+ if (buttonType !== null) {
77
+ setButtonType(buttonType);
78
+ }
79
+ };
80
+ return /*#__PURE__*/_jsx(Grid, {
81
+ className: className,
82
+ children: !customizeTheme ? /*#__PURE__*/_jsxs(Accordion, {
83
+ className: "settingAccordion",
84
+ defaultExpanded: openDefault,
85
+ onChange: () => onSettingsChange(type),
86
+ expanded: openSettings === type,
87
+ children: [/*#__PURE__*/_jsx(AccordionSummary, {
88
+ expandIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRounded, {}),
89
+ "aria-controls": "panel1-content",
90
+ id: "panel1-header",
91
+ children: "Color Theme"
92
+ }), /*#__PURE__*/_jsxs(AccordionDetails, {
93
+ children: [/*#__PURE__*/_jsx(Typography, {
94
+ variant: "body2",
95
+ sx: {
96
+ pb: 1
97
+ },
98
+ className: "fs-12 fw-600",
99
+ children: "Primary Color"
100
+ }), /*#__PURE__*/_jsx(Grid, {
101
+ container: true,
102
+ spacing: 1,
103
+ sx: {
104
+ pb: 2
105
+ },
106
+ className: "primaryColorBoxes",
107
+ wrap: "nowrap",
108
+ children: primaryColors?.map((color, i) => {
109
+ const textColor = getContrastColor(color);
110
+ return /*#__PURE__*/_jsx(Grid, {
111
+ item: true,
112
+ xs: 6,
113
+ children: /*#__PURE__*/_jsx(ColorPickerButton, {
114
+ onSave: selectedColor => {
115
+ if (selectedColor) {
116
+ onColorChange(selectedColor, i);
117
+ }
118
+ },
119
+ hideThemeColors: true
120
+ // hideGradient={true}
121
+ ,
122
+ classes: classes,
123
+ value: color,
124
+ children: /*#__PURE__*/_jsxs(Grid, {
125
+ className: "pmBox",
126
+ style: {
127
+ background: color
128
+ },
129
+ children: [/*#__PURE__*/_jsx(IconButton, {
130
+ className: "editBtn",
131
+ children: /*#__PURE__*/_jsx(EditIcon, {})
132
+ }), /*#__PURE__*/_jsx(Typography, {
133
+ variant: "body2",
134
+ className: "fs-12 valyeText",
135
+ style: {
136
+ color: textColor
137
+ },
138
+ title: color,
139
+ children: color
140
+ })]
141
+ })
142
+ })
143
+ }, i);
144
+ })
145
+ }), /*#__PURE__*/_jsx(Typography, {
146
+ variant: "body2",
147
+ sx: {
148
+ pb: 1
149
+ },
150
+ className: "fs-12 fw-600",
151
+ children: "Secondary Colors"
152
+ }), /*#__PURE__*/_jsx(Grid, {
153
+ container: true,
154
+ className: "secondaryColorBoxes",
155
+ wrap: "nowrap",
156
+ sx: {
157
+ mb: 1
158
+ },
159
+ children: otherColors?.slice(0, 4)?.map((color, i) => {
160
+ const noOfPrimaryColors = 2;
161
+ const colorIndex = noOfPrimaryColors + i;
162
+ const textColor = getContrastColor(color);
163
+ return /*#__PURE__*/_jsx(Grid, {
164
+ item: true,
165
+ xs: 6,
166
+ children: /*#__PURE__*/_jsx(ColorPickerButton, {
167
+ onSave: selectedColor => {
168
+ if (selectedColor) {
169
+ onColorChange(selectedColor, colorIndex);
170
+ }
171
+ },
172
+ hideThemeColors: true
173
+ // hideGradient={true}
174
+ ,
175
+ classes: classes,
176
+ value: color,
177
+ children: /*#__PURE__*/_jsxs(Grid, {
178
+ className: "sdBox",
179
+ style: {
180
+ background: color
181
+ },
182
+ children: [/*#__PURE__*/_jsx(IconButton, {
183
+ className: "editBtn",
184
+ children: /*#__PURE__*/_jsx(EditIcon, {})
185
+ }), /*#__PURE__*/_jsx(Typography, {
186
+ variant: "body2",
187
+ className: "fs-10 valyeText",
188
+ style: {
189
+ color: textColor
190
+ },
191
+ children: color
192
+ })]
193
+ })
194
+ })
195
+ }, i);
196
+ })
197
+ })]
198
+ })]
199
+ }) : /*#__PURE__*/_jsxs(Grid, {
200
+ className: "sectionDetail",
201
+ children: [/*#__PURE__*/_jsxs(Typography, {
202
+ variant: "body1",
203
+ className: "sectionTitle flexAlign",
204
+ children: [/*#__PURE__*/_jsx(IconButton, {
205
+ onClick: () => setCustomizeTheme(false),
206
+ children: /*#__PURE__*/_jsx(ChevronLeft, {})
207
+ }), "Customize Theme settings"]
208
+ }), customTheme.map((item, index) => /*#__PURE__*/_jsxs(Grid, {
209
+ className: "settingsSection",
210
+ children: [/*#__PURE__*/_jsx(Typography, {
211
+ variant: "body1",
212
+ className: "sectionTitle",
213
+ sx: {
214
+ pb: 1
215
+ },
216
+ children: item.title
217
+ }), item.data.map((childitem, childIndex) => /*#__PURE__*/_jsxs(Grid, {
218
+ container: true,
219
+ justifyContent: "space-between",
220
+ sx: {
221
+ pt: 2
222
+ },
223
+ children: [/*#__PURE__*/_jsx(Typography, {
224
+ variant: "body1",
225
+ className: "fs-14",
226
+ children: childitem.title
227
+ }), /*#__PURE__*/_jsx(Grid, {
228
+ className: "xsColorBox",
229
+ sx: {
230
+ background: childitem.color
231
+ }
232
+ })]
233
+ }, childIndex))]
234
+ }, index)), /*#__PURE__*/_jsxs(Grid, {
235
+ className: "settingsSection",
236
+ children: [/*#__PURE__*/_jsx(Typography, {
237
+ variant: "body1",
238
+ className: "sectionTitle",
239
+ sx: {
240
+ pb: 1
241
+ },
242
+ children: "Button Colors"
243
+ }), /*#__PURE__*/_jsxs(ToggleButtonGroup, {
244
+ sx: {
245
+ mt: 2
246
+ },
247
+ className: "toggleType",
248
+ value: buttonType,
249
+ exclusive: true,
250
+ onChange: handleButtonType,
251
+ children: [/*#__PURE__*/_jsx(ToggleButton, {
252
+ value: "regular",
253
+ "aria-label": "regulard",
254
+ children: "Regular"
255
+ }), /*#__PURE__*/_jsx(ToggleButton, {
256
+ value: "hover",
257
+ "aria-label": "hover",
258
+ children: "Hover"
259
+ })]
260
+ }), /*#__PURE__*/_jsx(Divider, {
261
+ sx: {
262
+ mt: 2,
263
+ mb: 1
264
+ }
265
+ }), /*#__PURE__*/_jsxs(RadioGroup, {
266
+ sx: {
267
+ mt: 1
268
+ },
269
+ "aria-labelledby": "demo-radio-buttons-group-label",
270
+ defaultValue: "primary",
271
+ name: "radio-buttons-group",
272
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
273
+ value: "primary",
274
+ control: /*#__PURE__*/_jsx(Radio, {}),
275
+ label: /*#__PURE__*/_jsx(Typography, {
276
+ variant: "body1",
277
+ className: "fs-14",
278
+ children: "Primary button"
279
+ })
280
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
281
+ value: "secondary",
282
+ control: /*#__PURE__*/_jsx(Radio, {}),
283
+ label: /*#__PURE__*/_jsx(Typography, {
284
+ variant: "body1",
285
+ className: "fs-14",
286
+ children: "Secondary button"
287
+ })
288
+ })]
289
+ }), buttonData.map((item, Index) => /*#__PURE__*/_jsxs(Grid, {
290
+ container: true,
291
+ justifyContent: "space-between",
292
+ sx: {
293
+ pt: 2
294
+ },
295
+ children: [/*#__PURE__*/_jsx(Typography, {
296
+ variant: "body1",
297
+ className: "fs-14",
298
+ children: item.title
299
+ }), /*#__PURE__*/_jsx(Grid, {
300
+ className: "xsColorBox",
301
+ sx: {
302
+ background: item.color
303
+ }
304
+ })]
305
+ }, Index))]
306
+ })]
307
+ })
308
+ });
309
+ };
310
+ export default styled(ColorTheme)(Style);
@@ -0,0 +1,81 @@
1
+ const Style = () => ({
2
+ ".primaryColorBoxes": {
3
+ ".pmBox": {
4
+ border: "1.5px solid #D1D1D1",
5
+ height: "65px",
6
+ borderRadius: "6px",
7
+ position: "relative",
8
+ flexShrink: 0,
9
+ "&:hover": {
10
+ ".editBtn": {
11
+ opacity: "1",
12
+ visibility: "visible"
13
+ }
14
+ }
15
+ }
16
+ },
17
+ ".secondaryColorBoxes": {
18
+ gap: "10px",
19
+ ".sdBox": {
20
+ border: "1.5px solid #D1D1D1",
21
+ height: "60px",
22
+ borderRadius: "6px",
23
+ width: "100%",
24
+ flexShrink: 0,
25
+ position: "relative",
26
+ "&:hover": {
27
+ ".editBtn": {
28
+ opacity: "1",
29
+ visibility: "visible"
30
+ }
31
+ }
32
+ }
33
+ },
34
+ ".valyeText": {
35
+ position: "absolute",
36
+ right: "5px",
37
+ bottom: "5px",
38
+ whiteSpace: "nowrap",
39
+ overflow: "hidden",
40
+ textOverflow: "ellipsis",
41
+ maxWidth: "calc(100% - 10px)"
42
+ },
43
+ ".editBtn": {
44
+ position: "absolute",
45
+ right: "2px",
46
+ top: "2px",
47
+ padding: "2px",
48
+ opacity: "0",
49
+ visibility: "hidden"
50
+ },
51
+ ".settingsSection": {
52
+ background: "#FFFFFF",
53
+ border: "1px solid #E4E6E9",
54
+ padding: "12px",
55
+ marginTop: "10px",
56
+ borderRadius: "7px"
57
+ },
58
+ ".toggleType": {
59
+ width: "100%",
60
+ border: "1px solid #2563EB",
61
+ background: "#F5F6F9",
62
+ borderRadius: "8px",
63
+ padding: "3px",
64
+ height: "40px",
65
+ ".MuiToggleButton-root": {
66
+ padding: "10px",
67
+ width: "50%",
68
+ border: "none",
69
+ textTransform: "unset",
70
+ fontSize: "14px",
71
+ color: "#64748B",
72
+ "&.Mui-selected": {
73
+ borderRadius: "8px",
74
+ background: "#2563EB",
75
+ color: "#fff",
76
+ fontWeight: "700"
77
+ }
78
+ }
79
+ }
80
+ });
81
+ export default Style;