@flozy/editor 10.0.9 → 10.1.1

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 (144) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +20 -120
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -16
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  7. package/dist/Editor/Elements/Button/EditorButton.js +9 -25
  8. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  11. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  12. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +6 -21
  14. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -5
  15. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  16. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  17. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  18. package/dist/Editor/Elements/Embed/Video.js +1 -1
  19. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  20. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  21. package/dist/Editor/Elements/Form/Form.js +168 -179
  22. package/dist/Editor/Elements/Form/FormField.js +4 -10
  23. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  24. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +24 -6
  25. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  26. package/dist/Editor/Elements/FreeGrid/styles.js +7 -64
  27. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  28. package/dist/Editor/Elements/List/CheckList.js +1 -4
  29. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  30. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  31. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  32. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  33. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  34. package/dist/Editor/Elements/Table/Table.js +3 -3
  35. package/dist/Editor/Elements/Title/title.js +6 -6
  36. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  37. package/dist/Editor/MiniEditor.js +1 -2
  38. package/dist/Editor/Styles/EditorStyles.js +5 -5
  39. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  40. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  41. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  42. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  43. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  44. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  45. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  46. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  47. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  48. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  49. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  50. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  51. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  52. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  53. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  54. package/dist/Editor/common/ColorPickerButton.js +16 -38
  55. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  56. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  57. package/dist/Editor/common/Icon.js +1 -31
  58. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  59. package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
  60. package/dist/Editor/common/LinkSettings/index.js +68 -84
  61. package/dist/Editor/common/LinkSettings/style.js +30 -245
  62. package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
  63. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  64. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  65. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  66. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  67. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  68. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  69. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  70. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  76. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -147
  77. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  78. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
  79. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  80. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  81. package/dist/Editor/common/RnD/Utils/gridDropItem.js +2 -1
  82. package/dist/Editor/common/RnD/index.js +7 -6
  83. package/dist/Editor/common/Select/index.js +0 -2
  84. package/dist/Editor/common/Shorthands/elements.js +0 -54
  85. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  86. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  87. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  88. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  89. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  95. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  96. package/dist/Editor/common/Uploader.js +0 -8
  97. package/dist/Editor/common/iconListV2.js +6 -101
  98. package/dist/Editor/common/iconslist.js +0 -24
  99. package/dist/Editor/commonStyle.js +61 -174
  100. package/dist/Editor/helper/theme.js +2 -203
  101. package/dist/Editor/hooks/useMouseMove.js +5 -8
  102. package/dist/Editor/plugins/withEmbeds.js +1 -1
  103. package/dist/Editor/plugins/withHTML.js +1 -3
  104. package/dist/Editor/plugins/withTable.js +1 -1
  105. package/dist/Editor/theme/ThemeList.js +173 -50
  106. package/dist/Editor/utils/SlateUtilityFunctions.js +43 -166
  107. package/dist/Editor/utils/button.js +17 -1
  108. package/dist/Editor/utils/draftToSlate.js +2 -3
  109. package/dist/Editor/utils/font.js +37 -40
  110. package/dist/Editor/utils/helper.js +19 -90
  111. package/package.json +4 -4
  112. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  113. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  114. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  115. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  116. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  117. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  118. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  119. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  120. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  121. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  122. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  123. package/dist/Editor/common/CustomSelect.js +0 -43
  124. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  125. package/dist/Editor/common/SnackBar/index.js +0 -43
  126. package/dist/Editor/helper/textIndeces.js +0 -58
  127. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  128. package/dist/Editor/hooks/useThemeValues.js +0 -63
  129. package/dist/Editor/theme/index.js +0 -149
  130. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  131. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  132. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  133. package/dist/Editor/themeSettings/colorTheme/index.js +0 -309
  134. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  135. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  136. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  137. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  138. package/dist/Editor/themeSettings/icons.js +0 -60
  139. package/dist/Editor/themeSettings/index.js +0 -361
  140. package/dist/Editor/themeSettings/style.js +0 -292
  141. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  142. package/dist/Editor/themeSettingsAI/index.js +0 -355
  143. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  144. package/dist/Editor/themeSettingsAI/style.js +0 -324
@@ -1,290 +0,0 @@
1
- import React, { useRef, useState } from "react";
2
- import { Accordion, AccordionDetails, AccordionSummary, Button, Fade, Grid, IconButton, Popper, Typography, styled } 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 } 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 = {}) {
84
- const newStyle = {
85
- ...buttonStyle
86
- };
87
- if (newStyle?.bannerSpacing) {
88
- newStyle.padding = newStyle?.bannerSpacing;
89
- }
90
- newStyle.borderRadius = {
91
- ...getBreakPointsValue(newStyle?.borderRadius || {}, null, "overrideBorderRadius", true)
92
- };
93
- newStyle.padding = {
94
- ...getTRBLBreakPoints(newStyle?.bannerSpacing || {})
95
- };
96
- delete newStyle?.bannerSpacing;
97
- if (newStyle?.hover) {
98
- newStyle["&:hover"] = newStyle.hover;
99
- delete newStyle.hover;
100
- }
101
- return newStyle;
102
- }
103
- const MAP_HOVER_KEYS = {
104
- color: "textColorHover",
105
- background: "bgColorHover"
106
- };
107
- const MAP_THEME_TO_ELEMENT_KEYS = {
108
- color: "textColor",
109
- background: "bgColor",
110
- fontFamily: (value, prev, buttonEl) => {
111
- if (!buttonEl?.current) {
112
- return prev;
113
- }
114
- const val = getElementProperty(buttonEl?.current, "font-family");
115
- return {
116
- ...prev,
117
- fontFamily: val
118
- };
119
- },
120
- fontSize: "textSize",
121
- borderRadius: "borderRadius",
122
- bannerSpacing: "bannerSpacing",
123
- lockRadius: "lockRadius",
124
- lockbannerSpacing: "lockbannerSpacing",
125
- // fontWeight
126
-
127
- hover: (value = {}, prev = {}) => {
128
- const props = getProps(value, MAP_HOVER_KEYS);
129
- return {
130
- ...prev,
131
- ...props
132
- };
133
- }
134
- };
135
- const MAP_ELEMENT_TO_THEME_KEYS = {
136
- textSize: "fontSize",
137
- textColor: "color",
138
- bgColor: "background",
139
- bannerSpacing: "bannerSpacing",
140
- borderRadius: "borderRadius",
141
- lockRadius: "lockRadius",
142
- lockbannerSpacing: "lockbannerSpacing",
143
- textColorHover: (value, prev) => {
144
- const hover = {
145
- ...(prev?.hover || {})
146
- };
147
- hover.color = value;
148
- return {
149
- ...prev,
150
- hover
151
- };
152
- },
153
- bgColorHover: (value, prev) => {
154
- const hover = {
155
- ...(prev?.hover || {})
156
- };
157
- hover.background = value;
158
- return {
159
- ...prev,
160
- hover
161
- };
162
- },
163
- fontFamily: "fontFamily"
164
- };
165
- function getProps(buttonStyle, MAP_KEYS, buttonEl) {
166
- let props = {};
167
- Object.entries(buttonStyle).forEach(([key, value]) => {
168
- const elementKey = MAP_KEYS[key];
169
- if (elementKey) {
170
- if (typeof elementKey === "string") {
171
- props[elementKey] = value;
172
- } else {
173
- props = elementKey(value, props, buttonEl);
174
- }
175
- }
176
- });
177
- return props;
178
- }
179
- function convertThemeToElementProps(button = {}, buttonEl) {
180
- const props = getProps(button, MAP_THEME_TO_ELEMENT_KEYS, buttonEl);
181
- return props;
182
- }
183
-
184
- // icons
185
-
186
- const Buttons = props => {
187
- const {
188
- className,
189
- customProps,
190
- openSettings,
191
- onSettingsChange,
192
- type
193
- } = props;
194
- const [anchorEl, setAnchorEl] = useState();
195
- const {
196
- selectedTheme,
197
- updateTheme
198
- } = useEditorTheme();
199
- const {
200
- button
201
- } = selectedTheme?.elementProps || {};
202
- const buttonEl = useRef();
203
- const elementProps = convertThemeToElementProps(button, buttonEl);
204
-
205
- // State
206
- return /*#__PURE__*/_jsxs(Grid, {
207
- className: className,
208
- children: [/*#__PURE__*/_jsxs(Accordion, {
209
- className: "settingAccordion",
210
- onChange: () => onSettingsChange(type),
211
- expanded: openSettings === type,
212
- children: [/*#__PURE__*/_jsx(AccordionSummary, {
213
- expandIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRounded, {}),
214
- "aria-controls": "panel1-content",
215
- id: "panel1-header",
216
- children: "Buttons"
217
- }), /*#__PURE__*/_jsx(AccordionDetails, {
218
- children: /*#__PURE__*/_jsxs(Grid, {
219
- container: true,
220
- className: "buttonTypeItem",
221
- justifyContent: "space-between",
222
- alignItems: "center",
223
- wrap: "nowrap",
224
- onClick: e => setAnchorEl(e.currentTarget),
225
- children: [/*#__PURE__*/_jsxs(Grid, {
226
- item: true,
227
- style: {
228
- maxWidth: "calc(100% - 50px)",
229
- overflowX: "auto"
230
- },
231
- children: [/*#__PURE__*/_jsx(Typography, {
232
- variant: "body1",
233
- className: "fw-600 fs-14",
234
- style: {
235
- marginBottom: "10px"
236
- },
237
- children: "Theme Button"
238
- }), /*#__PURE__*/_jsx(Button, {
239
- sx: getBtnSxProps(button),
240
- ref: buttonEl,
241
- children: "Button"
242
- })]
243
- }), /*#__PURE__*/_jsx(IconButton, {
244
- className: "editIcon",
245
- children: /*#__PURE__*/_jsx(PenIcon, {})
246
- })]
247
- })
248
- })]
249
- }), /*#__PURE__*/_jsx(Popper, {
250
- open: Boolean(anchorEl),
251
- anchorEl: anchorEl,
252
- transition: true,
253
- sx: {
254
- zIndex: "100000",
255
- background: "white"
256
- },
257
- placement: "left-start",
258
- children: ({
259
- TransitionProps
260
- }) => /*#__PURE__*/_jsx(Fade, {
261
- ...TransitionProps,
262
- timeout: 350,
263
- children: /*#__PURE__*/_jsx("div", {
264
- children: /*#__PURE__*/_jsx(StyleBuilder, {
265
- title: "Button",
266
- type: "buttonStyle",
267
- element: elementProps,
268
- onSave: data => {
269
- const props = getProps(data, MAP_ELEMENT_TO_THEME_KEYS);
270
- updateTheme(props, {
271
- action: "ELEMENT_PROPS_CHANGE",
272
- fieldName: "button"
273
- });
274
- setAnchorEl(null);
275
- },
276
- onClose: () => {
277
- setAnchorEl(null);
278
- },
279
- renderTabs: buttonStyle,
280
- customProps: {
281
- disableEditTheme: true,
282
- translation: customProps?.translation || (() => {})
283
- }
284
- })
285
- })
286
- })
287
- })]
288
- });
289
- };
290
- export default styled(Buttons)(Style);
@@ -1,23 +0,0 @@
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;
@@ -1,309 +0,0 @@
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);
@@ -1,81 +0,0 @@
1
- const Style = () => ({
2
- ".primaryColorBoxes": {
3
- ".pmBox": {
4
- border: "1px solid #D1D1D1",
5
- height: "65px",
6
- borderRadius: "4px",
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: "1px solid #D1D1D1",
21
- height: "60px",
22
- borderRadius: "4px",
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;