@flozy/editor 10.1.4 → 10.1.5

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 (168) hide show
  1. package/dist/Editor/ChatEditor.js +17 -16
  2. package/dist/Editor/CommonEditor.js +120 -16
  3. package/dist/Editor/DialogWrapper.js +31 -25
  4. package/dist/Editor/Editor.css +42 -8
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
  6. package/dist/Editor/Elements/Accordion/Accordion.js +6 -2
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  8. package/dist/Editor/Elements/Button/EditorButton.js +25 -9
  9. package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
  13. package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
  14. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -1
  18. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
  19. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
  20. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
  21. package/dist/Editor/Elements/Embed/Image.js +3 -2
  22. package/dist/Editor/Elements/Embed/Video.js +1 -1
  23. package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
  24. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
  25. package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
  26. package/dist/Editor/Elements/Form/Form.js +181 -168
  27. package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
  28. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
  29. package/dist/Editor/Elements/Form/FormField.js +13 -6
  30. package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
  31. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +6 -24
  32. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
  33. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  34. package/dist/Editor/Elements/FreeGrid/styles.js +67 -7
  35. package/dist/Editor/Elements/Grid/Grid.js +14 -2
  36. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  37. package/dist/Editor/Elements/List/CheckList.js +4 -1
  38. package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
  39. package/dist/Editor/Elements/Search/SearchButton.js +9 -8
  40. package/dist/Editor/Elements/Search/SearchList.js +9 -7
  41. package/dist/Editor/Elements/Signature/Signature.css +2 -1
  42. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
  43. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
  44. package/dist/Editor/Elements/SimpleText/index.js +6 -1
  45. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  46. package/dist/Editor/Elements/Table/DragButton.js +0 -1
  47. package/dist/Editor/Elements/Table/Draggable.js +6 -2
  48. package/dist/Editor/Elements/Table/Styles.js +7 -0
  49. package/dist/Editor/Elements/Table/Table.js +3 -3
  50. package/dist/Editor/Elements/Table/TableCell.js +24 -5
  51. package/dist/Editor/Elements/Title/title.js +6 -6
  52. package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
  53. package/dist/Editor/MiniEditor.js +2 -1
  54. package/dist/Editor/Styles/EditorStyles.js +5 -5
  55. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
  56. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
  57. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  58. package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
  59. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
  60. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
  64. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
  65. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
  66. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
  67. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
  68. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  69. package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
  70. package/dist/Editor/assets/svg/BackIcon.js +18 -0
  71. package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
  72. package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
  73. package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
  74. package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
  75. package/dist/Editor/common/ColorPickerButton.js +39 -17
  76. package/dist/Editor/common/CustomColorPicker/index.js +130 -0
  77. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  78. package/dist/Editor/common/CustomDialog2/index.js +94 -0
  79. package/dist/Editor/common/CustomDialog2/style.js +67 -0
  80. package/dist/Editor/common/CustomSelect.js +43 -0
  81. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  82. package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
  83. package/dist/Editor/common/Icon.js +31 -1
  84. package/dist/Editor/common/ImageSelector/Styles.js +3 -9
  85. package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
  86. package/dist/Editor/common/LinkSettings/index.js +84 -68
  87. package/dist/Editor/common/LinkSettings/style.js +245 -30
  88. package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
  89. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
  90. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  91. package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
  92. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
  93. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
  95. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
  96. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
  97. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
  98. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
  99. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
  100. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
  101. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
  102. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
  103. package/dist/Editor/common/RnD/ElementSettings/styles.js +147 -12
  104. package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
  105. package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
  106. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
  107. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
  108. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
  109. package/dist/Editor/common/RnD/Utils/gridDropItem.js +1 -2
  110. package/dist/Editor/common/RnD/VirtualElement/helper.js +3 -2
  111. package/dist/Editor/common/RnD/index.js +5 -6
  112. package/dist/Editor/common/Select/index.js +2 -0
  113. package/dist/Editor/common/Shorthands/elements.js +54 -0
  114. package/dist/Editor/common/SnackBar/index.js +43 -0
  115. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
  123. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
  124. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
  125. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
  126. package/dist/Editor/common/Uploader.js +8 -0
  127. package/dist/Editor/common/iconListV2.js +156 -6
  128. package/dist/Editor/common/iconslist.js +24 -0
  129. package/dist/Editor/commonStyle.js +168 -62
  130. package/dist/Editor/helper/index.js +4 -0
  131. package/dist/Editor/helper/textIndeces.js +58 -0
  132. package/dist/Editor/helper/theme.js +203 -2
  133. package/dist/Editor/hooks/useEditorTheme.js +153 -0
  134. package/dist/Editor/hooks/useMouseMove.js +8 -5
  135. package/dist/Editor/hooks/useTable.js +5 -4
  136. package/dist/Editor/hooks/useThemeValues.js +63 -0
  137. package/dist/Editor/plugins/withEmbeds.js +1 -1
  138. package/dist/Editor/plugins/withHTML.js +3 -1
  139. package/dist/Editor/plugins/withTable.js +1 -1
  140. package/dist/Editor/theme/ThemeList.js +50 -173
  141. package/dist/Editor/theme/index.js +149 -0
  142. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  143. package/dist/Editor/themeSettings/buttons/index.js +292 -0
  144. package/dist/Editor/themeSettings/buttons/style.js +23 -0
  145. package/dist/Editor/themeSettings/colorTheme/index.js +309 -0
  146. package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
  147. package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
  148. package/dist/Editor/themeSettings/fonts/index.js +240 -0
  149. package/dist/Editor/themeSettings/fonts/style.js +62 -0
  150. package/dist/Editor/themeSettings/icons.js +60 -0
  151. package/dist/Editor/themeSettings/index.js +361 -0
  152. package/dist/Editor/themeSettings/style.js +292 -0
  153. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  154. package/dist/Editor/themeSettingsAI/index.js +355 -0
  155. package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
  156. package/dist/Editor/themeSettingsAI/style.js +324 -0
  157. package/dist/Editor/utils/SlateUtilityFunctions.js +166 -43
  158. package/dist/Editor/utils/accordion.js +14 -4
  159. package/dist/Editor/utils/button.js +1 -17
  160. package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
  161. package/dist/Editor/utils/draftToSlate.js +3 -2
  162. package/dist/Editor/utils/events.js +50 -6
  163. package/dist/Editor/utils/font.js +40 -37
  164. package/dist/Editor/utils/form.js +4 -4
  165. package/dist/Editor/utils/formfield.js +8 -2
  166. package/dist/Editor/utils/helper.js +109 -19
  167. package/dist/Editor/utils/signature.js +2 -9
  168. package/package.json +4 -4
@@ -0,0 +1,72 @@
1
+ import { Grid, Link, Typography } from "@mui/material";
2
+ import { useEditorTheme } from "../hooks/useEditorTheme";
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ import { Fragment as _Fragment } from "react/jsx-runtime";
6
+ function ActiveTheme(props) {
7
+ const {
8
+ onExplore
9
+ } = props;
10
+ const {
11
+ theme
12
+ } = useEditorTheme();
13
+ const {
14
+ colors = {}
15
+ } = theme?.theme?.cssVars || {};
16
+ const {
17
+ id,
18
+ name,
19
+ mood_name = ""
20
+ } = theme || {};
21
+ const themeColors = Object.values(colors || {});
22
+ return /*#__PURE__*/_jsxs(Grid, {
23
+ className: "activeThemeInnner",
24
+ children: [/*#__PURE__*/_jsx(Typography, {
25
+ variant: "body1",
26
+ className: "title activeThemeTitle",
27
+ children: id ? "Active Theme" : "No theme activated"
28
+ }), /*#__PURE__*/_jsxs(Grid, {
29
+ className: "flexAlign",
30
+ children: [/*#__PURE__*/_jsx(Typography, {
31
+ variant: "body1",
32
+ className: "fs-14",
33
+ children: name
34
+ }), /*#__PURE__*/_jsxs(Typography, {
35
+ variant: "body2",
36
+ className: "fs-12 textSecondary",
37
+ style: {
38
+ marginLeft: id ? "4px" : "0px"
39
+ },
40
+ children: [id ? ` - ` : null, id ? mood_name : "Select 'Explore More' to activate a theme and customize your design."]
41
+ })]
42
+ }), /*#__PURE__*/_jsxs(Grid, {
43
+ container: true,
44
+ justifyContent: "space-between",
45
+ alignItems: "end",
46
+ sx: {
47
+ mt: 1
48
+ },
49
+ children: [/*#__PURE__*/_jsx(Grid, {
50
+ className: "flexAlign",
51
+ sx: {
52
+ gap: "10px"
53
+ },
54
+ children: id ? /*#__PURE__*/_jsx(_Fragment, {
55
+ children: themeColors?.map((color, i) => {
56
+ return /*#__PURE__*/_jsx(Grid, {
57
+ className: "activeColorBox",
58
+ style: {
59
+ background: color
60
+ }
61
+ }, i);
62
+ })
63
+ }) : null
64
+ }), onExplore && /*#__PURE__*/_jsx(Link, {
65
+ className: "pointer fs-12 fw-500 exploreBtn",
66
+ onClick: onExplore,
67
+ children: "Explore More"
68
+ })]
69
+ })]
70
+ });
71
+ }
72
+ export default ActiveTheme;
@@ -0,0 +1,292 @@
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
+ const btnSp = groupByBreakpoint({
91
+ borderRadius: {
92
+ ...getBreakPointsValue(newStyle?.borderRadius || {}, null, "overrideBorderRadius", true)
93
+ },
94
+ padding: {
95
+ ...getTRBLBreakPoints(newStyle?.bannerSpacing)
96
+ }
97
+ }, theme);
98
+ newStyle = {
99
+ ...newStyle,
100
+ ...btnSp
101
+ };
102
+ delete newStyle?.bannerSpacing;
103
+ if (newStyle?.hover) {
104
+ newStyle["&:hover"] = newStyle.hover;
105
+ delete newStyle.hover;
106
+ }
107
+ return newStyle;
108
+ }
109
+ const MAP_HOVER_KEYS = {
110
+ color: "textColorHover",
111
+ background: "bgColorHover"
112
+ };
113
+ const MAP_THEME_TO_ELEMENT_KEYS = {
114
+ color: "textColor",
115
+ background: "bgColor",
116
+ fontFamily: (value, prev, buttonEl) => {
117
+ if (!buttonEl?.current) {
118
+ return prev;
119
+ }
120
+ const val = getElementProperty(buttonEl?.current, "font-family");
121
+ return {
122
+ ...prev,
123
+ fontFamily: val
124
+ };
125
+ },
126
+ fontSize: "textSize",
127
+ borderRadius: "borderRadius",
128
+ bannerSpacing: "bannerSpacing",
129
+ lockRadius: "lockRadius",
130
+ lockbannerSpacing: "lockbannerSpacing",
131
+ // fontWeight
132
+
133
+ hover: (value = {}, prev = {}) => {
134
+ const props = getProps(value, MAP_HOVER_KEYS);
135
+ return {
136
+ ...prev,
137
+ ...props
138
+ };
139
+ }
140
+ };
141
+ const MAP_ELEMENT_TO_THEME_KEYS = {
142
+ textSize: "fontSize",
143
+ textColor: "color",
144
+ bgColor: "background",
145
+ bannerSpacing: "bannerSpacing",
146
+ borderRadius: "borderRadius",
147
+ lockRadius: "lockRadius",
148
+ lockbannerSpacing: "lockbannerSpacing",
149
+ textColorHover: (value, prev) => {
150
+ const hover = {
151
+ ...(prev?.hover || {})
152
+ };
153
+ hover.color = value;
154
+ return {
155
+ ...prev,
156
+ hover
157
+ };
158
+ },
159
+ bgColorHover: (value, prev) => {
160
+ const hover = {
161
+ ...(prev?.hover || {})
162
+ };
163
+ hover.background = value;
164
+ return {
165
+ ...prev,
166
+ hover
167
+ };
168
+ },
169
+ fontFamily: "fontFamily"
170
+ };
171
+ function getProps(buttonStyle, MAP_KEYS, buttonEl) {
172
+ let props = {};
173
+ Object.entries(buttonStyle).forEach(([key, value]) => {
174
+ const elementKey = MAP_KEYS[key];
175
+ if (elementKey) {
176
+ if (typeof elementKey === "string") {
177
+ props[elementKey] = value;
178
+ } else {
179
+ props = elementKey(value, props, buttonEl);
180
+ }
181
+ }
182
+ });
183
+ return props;
184
+ }
185
+ function convertThemeToElementProps(button = {}, buttonEl) {
186
+ const props = getProps(button, MAP_THEME_TO_ELEMENT_KEYS, buttonEl);
187
+ return props;
188
+ }
189
+
190
+ // icons
191
+
192
+ const Buttons = props => {
193
+ const {
194
+ className,
195
+ customProps,
196
+ openSettings,
197
+ onSettingsChange,
198
+ type
199
+ } = props;
200
+ const [anchorEl, setAnchorEl] = useState();
201
+ const theme = useTheme();
202
+ const {
203
+ selectedTheme,
204
+ updateTheme
205
+ } = useEditorTheme();
206
+ const {
207
+ button
208
+ } = selectedTheme?.elementProps || {};
209
+ console.log("getBtnSxProps(button, theme)", getBtnSxProps(button, theme));
210
+ const buttonEl = useRef();
211
+ const elementProps = convertThemeToElementProps(button, buttonEl);
212
+
213
+ // State
214
+ return /*#__PURE__*/_jsxs(Grid, {
215
+ className: className,
216
+ children: [/*#__PURE__*/_jsxs(Accordion, {
217
+ className: "settingAccordion",
218
+ onChange: () => onSettingsChange(type),
219
+ expanded: openSettings === type,
220
+ children: [/*#__PURE__*/_jsx(AccordionSummary, {
221
+ expandIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRounded, {}),
222
+ "aria-controls": "panel1-content",
223
+ id: "panel1-header",
224
+ children: "Buttons"
225
+ }), /*#__PURE__*/_jsx(AccordionDetails, {
226
+ children: /*#__PURE__*/_jsxs(Grid, {
227
+ container: true,
228
+ className: "buttonTypeItem",
229
+ justifyContent: "space-between",
230
+ alignItems: "center",
231
+ wrap: "nowrap",
232
+ onClick: e => setAnchorEl(e.currentTarget),
233
+ children: [/*#__PURE__*/_jsxs(Grid, {
234
+ item: true,
235
+ size: 12,
236
+ children: [/*#__PURE__*/_jsx(Typography, {
237
+ variant: "body1",
238
+ className: "fw-600 fs-14",
239
+ children: "Theme Button"
240
+ }), /*#__PURE__*/_jsx(Button, {
241
+ sx: getBtnSxProps(button, theme),
242
+ ref: buttonEl,
243
+ children: "Button"
244
+ })]
245
+ }), /*#__PURE__*/_jsx(IconButton, {
246
+ className: "editIcon",
247
+ children: /*#__PURE__*/_jsx(PenIcon, {})
248
+ })]
249
+ })
250
+ })]
251
+ }), /*#__PURE__*/_jsx(Popper, {
252
+ open: Boolean(anchorEl),
253
+ anchorEl: anchorEl,
254
+ transition: true,
255
+ sx: {
256
+ zIndex: "100000",
257
+ background: "white"
258
+ },
259
+ placement: "left-start",
260
+ children: ({
261
+ TransitionProps
262
+ }) => /*#__PURE__*/_jsx(Fade, {
263
+ ...TransitionProps,
264
+ timeout: 350,
265
+ children: /*#__PURE__*/_jsx("div", {
266
+ children: /*#__PURE__*/_jsx(StyleBuilder, {
267
+ title: "Button",
268
+ type: "buttonStyle",
269
+ element: elementProps,
270
+ onSave: data => {
271
+ const props = getProps(data, MAP_ELEMENT_TO_THEME_KEYS);
272
+ updateTheme(props, {
273
+ action: "ELEMENT_PROPS_CHANGE",
274
+ fieldName: "button"
275
+ });
276
+ setAnchorEl(null);
277
+ },
278
+ onClose: () => {
279
+ setAnchorEl(null);
280
+ },
281
+ renderTabs: buttonStyle,
282
+ customProps: {
283
+ disableEditTheme: true,
284
+ translation: customProps?.translation || (() => {})
285
+ }
286
+ })
287
+ })
288
+ })
289
+ })]
290
+ });
291
+ };
292
+ 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,309 @@
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
+ children: color
139
+ })]
140
+ })
141
+ })
142
+ }, i);
143
+ })
144
+ }), /*#__PURE__*/_jsx(Typography, {
145
+ variant: "body2",
146
+ sx: {
147
+ pb: 1
148
+ },
149
+ className: "fs-12 fw-600",
150
+ children: "Secondary Colors"
151
+ }), /*#__PURE__*/_jsx(Grid, {
152
+ container: true,
153
+ className: "secondaryColorBoxes",
154
+ wrap: "nowrap",
155
+ sx: {
156
+ mb: 1
157
+ },
158
+ children: otherColors?.slice(0, 4)?.map((color, i) => {
159
+ const noOfPrimaryColors = 2;
160
+ const colorIndex = noOfPrimaryColors + i;
161
+ const textColor = getContrastColor(color);
162
+ return /*#__PURE__*/_jsx(Grid, {
163
+ item: true,
164
+ xs: 6,
165
+ children: /*#__PURE__*/_jsx(ColorPickerButton, {
166
+ onSave: selectedColor => {
167
+ if (selectedColor) {
168
+ onColorChange(selectedColor, colorIndex);
169
+ }
170
+ },
171
+ hideThemeColors: true
172
+ // hideGradient={true}
173
+ ,
174
+ classes: classes,
175
+ value: color,
176
+ children: /*#__PURE__*/_jsxs(Grid, {
177
+ className: "sdBox",
178
+ style: {
179
+ background: color
180
+ },
181
+ children: [/*#__PURE__*/_jsx(IconButton, {
182
+ className: "editBtn",
183
+ children: /*#__PURE__*/_jsx(EditIcon, {})
184
+ }), /*#__PURE__*/_jsx(Typography, {
185
+ variant: "body2",
186
+ className: "fs-10 valyeText",
187
+ style: {
188
+ color: textColor
189
+ },
190
+ children: color
191
+ })]
192
+ })
193
+ })
194
+ }, i);
195
+ })
196
+ })]
197
+ })]
198
+ }) : /*#__PURE__*/_jsxs(Grid, {
199
+ className: "sectionDetail",
200
+ children: [/*#__PURE__*/_jsxs(Typography, {
201
+ variant: "body1",
202
+ className: "sectionTitle flexAlign",
203
+ children: [/*#__PURE__*/_jsx(IconButton, {
204
+ onClick: () => setCustomizeTheme(false),
205
+ children: /*#__PURE__*/_jsx(ChevronLeft, {})
206
+ }), "Customize Theme settings"]
207
+ }), customTheme.map((item, index) => /*#__PURE__*/_jsxs(Grid, {
208
+ className: "settingsSection",
209
+ children: [/*#__PURE__*/_jsx(Typography, {
210
+ variant: "body1",
211
+ className: "sectionTitle",
212
+ sx: {
213
+ pb: 1
214
+ },
215
+ children: item.title
216
+ }), item.data.map((childitem, childIndex) => /*#__PURE__*/_jsxs(Grid, {
217
+ container: true,
218
+ justifyContent: "space-between",
219
+ sx: {
220
+ pt: 2
221
+ },
222
+ children: [/*#__PURE__*/_jsx(Typography, {
223
+ variant: "body1",
224
+ className: "fs-14",
225
+ children: childitem.title
226
+ }), /*#__PURE__*/_jsx(Grid, {
227
+ className: "xsColorBox",
228
+ sx: {
229
+ background: childitem.color
230
+ }
231
+ })]
232
+ }, childIndex))]
233
+ }, index)), /*#__PURE__*/_jsxs(Grid, {
234
+ className: "settingsSection",
235
+ children: [/*#__PURE__*/_jsx(Typography, {
236
+ variant: "body1",
237
+ className: "sectionTitle",
238
+ sx: {
239
+ pb: 1
240
+ },
241
+ children: "Button Colors"
242
+ }), /*#__PURE__*/_jsxs(ToggleButtonGroup, {
243
+ sx: {
244
+ mt: 2
245
+ },
246
+ className: "toggleType",
247
+ value: buttonType,
248
+ exclusive: true,
249
+ onChange: handleButtonType,
250
+ children: [/*#__PURE__*/_jsx(ToggleButton, {
251
+ value: "regular",
252
+ "aria-label": "regulard",
253
+ children: "Regular"
254
+ }), /*#__PURE__*/_jsx(ToggleButton, {
255
+ value: "hover",
256
+ "aria-label": "hover",
257
+ children: "Hover"
258
+ })]
259
+ }), /*#__PURE__*/_jsx(Divider, {
260
+ sx: {
261
+ mt: 2,
262
+ mb: 1
263
+ }
264
+ }), /*#__PURE__*/_jsxs(RadioGroup, {
265
+ sx: {
266
+ mt: 1
267
+ },
268
+ "aria-labelledby": "demo-radio-buttons-group-label",
269
+ defaultValue: "primary",
270
+ name: "radio-buttons-group",
271
+ children: [/*#__PURE__*/_jsx(FormControlLabel, {
272
+ value: "primary",
273
+ control: /*#__PURE__*/_jsx(Radio, {}),
274
+ label: /*#__PURE__*/_jsx(Typography, {
275
+ variant: "body1",
276
+ className: "fs-14",
277
+ children: "Primary button"
278
+ })
279
+ }), /*#__PURE__*/_jsx(FormControlLabel, {
280
+ value: "secondary",
281
+ control: /*#__PURE__*/_jsx(Radio, {}),
282
+ label: /*#__PURE__*/_jsx(Typography, {
283
+ variant: "body1",
284
+ className: "fs-14",
285
+ children: "Secondary button"
286
+ })
287
+ })]
288
+ }), buttonData.map((item, Index) => /*#__PURE__*/_jsxs(Grid, {
289
+ container: true,
290
+ justifyContent: "space-between",
291
+ sx: {
292
+ pt: 2
293
+ },
294
+ children: [/*#__PURE__*/_jsx(Typography, {
295
+ variant: "body1",
296
+ className: "fs-14",
297
+ children: item.title
298
+ }), /*#__PURE__*/_jsx(Grid, {
299
+ className: "xsColorBox",
300
+ sx: {
301
+ background: item.color
302
+ }
303
+ })]
304
+ }, Index))]
305
+ })]
306
+ })
307
+ });
308
+ };
309
+ export default styled(ColorTheme)(Style);