@flozy/editor 10.3.8 → 10.4.0

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 (189) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +18 -134
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +9 -46
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
  9. package/dist/Editor/Elements/Button/EditorButton.js +9 -27
  10. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  11. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  13. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  14. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  15. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  16. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +8 -23
  17. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +2 -5
  18. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  19. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  20. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  21. package/dist/Editor/Elements/Embed/Image.js +2 -3
  22. package/dist/Editor/Elements/Embed/Video.js +1 -1
  23. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  24. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  25. package/dist/Editor/Elements/Form/Form.js +171 -184
  26. package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
  27. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
  28. package/dist/Editor/Elements/Form/FormField.js +6 -13
  29. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  30. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +32 -40
  31. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  32. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
  33. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  34. package/dist/Editor/Elements/FreeGrid/styles.js +7 -75
  35. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  36. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  37. package/dist/Editor/Elements/List/CheckList.js +2 -3
  38. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  39. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  40. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  41. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  42. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  43. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  44. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  45. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  46. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  47. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  48. package/dist/Editor/Elements/Table/Styles.js +0 -7
  49. package/dist/Editor/Elements/Table/Table.js +3 -3
  50. package/dist/Editor/Elements/Table/TableCell.js +8 -31
  51. package/dist/Editor/Elements/Title/title.js +6 -6
  52. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  53. package/dist/Editor/MiniEditor.js +1 -2
  54. package/dist/Editor/Styles/EditorStyles.js +5 -5
  55. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  56. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  57. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  58. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  59. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  60. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  62. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  63. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  64. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  65. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  66. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  67. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  68. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  69. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  70. package/dist/Editor/common/ColorPickerButton.js +16 -41
  71. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  72. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  73. package/dist/Editor/common/Icon.js +1 -31
  74. package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
  75. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  76. package/dist/Editor/common/LinkSettings/NavComponents.js +56 -61
  77. package/dist/Editor/common/LinkSettings/index.js +81 -82
  78. package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
  79. package/dist/Editor/common/LinkSettings/style.js +74 -209
  80. package/dist/Editor/common/RnD/ElementOptions/Actions.js +15 -13
  81. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  82. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  83. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  84. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  85. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  91. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  92. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  93. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  94. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  95. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -146
  96. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  97. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -120
  98. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  99. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  100. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  101. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  102. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
  103. package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
  104. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  105. package/dist/Editor/common/RnD/index.js +39 -68
  106. package/dist/Editor/common/Select/index.js +5 -44
  107. package/dist/Editor/common/Select/styles.js +2 -30
  108. package/dist/Editor/common/Shorthands/elements.js +11 -65
  109. package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
  110. package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
  111. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  112. package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  114. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  115. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  116. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  117. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  118. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  119. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
  120. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  121. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  122. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  123. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  124. package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
  125. package/dist/Editor/common/Uploader.js +0 -16
  126. package/dist/Editor/common/iconListV2.js +6 -177
  127. package/dist/Editor/common/iconslist.js +0 -24
  128. package/dist/Editor/commonStyle.js +62 -186
  129. package/dist/Editor/helper/index.js +1 -5
  130. package/dist/Editor/helper/theme.js +2 -203
  131. package/dist/Editor/hooks/useMouseMove.js +5 -8
  132. package/dist/Editor/hooks/useTable.js +4 -5
  133. package/dist/Editor/plugins/withEmbeds.js +1 -1
  134. package/dist/Editor/plugins/withHTML.js +1 -3
  135. package/dist/Editor/plugins/withTable.js +1 -1
  136. package/dist/Editor/theme/ThemeList.js +173 -50
  137. package/dist/Editor/utils/SlateUtilityFunctions.js +46 -172
  138. package/dist/Editor/utils/accordion.js +4 -14
  139. package/dist/Editor/utils/button.js +17 -1
  140. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  141. package/dist/Editor/utils/draftToSlate.js +2 -3
  142. package/dist/Editor/utils/events.js +6 -50
  143. package/dist/Editor/utils/font.js +37 -40
  144. package/dist/Editor/utils/form.js +4 -4
  145. package/dist/Editor/utils/formfield.js +2 -9
  146. package/dist/Editor/utils/helper.js +26 -188
  147. package/dist/Editor/utils/insertAppHeader.js +1 -1
  148. package/dist/Editor/utils/signature.js +9 -2
  149. package/package.json +4 -4
  150. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  151. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  152. package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
  153. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  154. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  155. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  156. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  157. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  158. package/dist/Editor/common/Checkbox/index.js +0 -46
  159. package/dist/Editor/common/Checkbox/styles.js +0 -45
  160. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  161. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  162. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  163. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  164. package/dist/Editor/common/CustomSelect.js +0 -43
  165. package/dist/Editor/common/RadioGroup/index.js +0 -48
  166. package/dist/Editor/common/RadioGroup/styles.js +0 -29
  167. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  168. package/dist/Editor/common/SnackBar/index.js +0 -43
  169. package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
  170. package/dist/Editor/helper/textIndeces.js +0 -58
  171. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  172. package/dist/Editor/hooks/useThemeValues.js +0 -63
  173. package/dist/Editor/theme/index.js +0 -149
  174. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  175. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  176. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  177. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  178. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  179. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  180. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  181. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  182. package/dist/Editor/themeSettings/icons.js +0 -60
  183. package/dist/Editor/themeSettings/index.js +0 -380
  184. package/dist/Editor/themeSettings/style.js +0 -299
  185. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  186. package/dist/Editor/themeSettingsAI/index.js +0 -355
  187. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  188. package/dist/Editor/themeSettingsAI/style.js +0 -332
  189. package/dist/Editor/utils/updateFormName.js +0 -22
@@ -1,454 +0,0 @@
1
- import React, { useCallback, useEffect, useMemo, useState } from "react";
2
- import Autocomplete from "@mui/material/Autocomplete";
3
- import Box from "@mui/material/Box";
4
- import Chip from "@mui/material/Chip";
5
- import Divider from "@mui/material/Divider";
6
- import Popover from "@mui/material/Popover";
7
- import TextField from "@mui/material/TextField";
8
- import Typography from "@mui/material/Typography";
9
- import List from "@mui/material/List";
10
- import ListItem from "@mui/material/ListItem";
11
- import ListItemButton from "@mui/material/ListItemButton";
12
- import IconButton from "@mui/material/IconButton";
13
- import SwipeableDrawer from "@mui/material/SwipeableDrawer";
14
- import Tooltip from "@mui/material/Tooltip";
15
- import { CloseIcon } from "../../../../../common/iconslist";
16
- import { useEditorContext } from "../../../../../hooks/useMouseMove";
17
- import Icon from "../../../../../common/Icon";
18
- import { colors } from "../../../../Color Picker/defaultColors";
19
- import PropertySettings from "../../Options";
20
- import SnackbarAlert from "../../../../../common/SnackBar";
21
- import { jsx as _jsx } from "react/jsx-runtime";
22
- import { jsxs as _jsxs } from "react/jsx-runtime";
23
- const EXCLUDED_COLORS = new Set(["#000000", "#0F172A", "#2563EB", "#FFFFFF", "#64748B"]);
24
- const DEFAULT_COLORS = colors?.filter(f => !f?.includes("linear") && !EXCLUDED_COLORS?.has(f));
25
- const generateRandomColor = () => {
26
- const randomIndex = Math.floor(Math.random() * DEFAULT_COLORS?.length);
27
- return DEFAULT_COLORS[randomIndex];
28
- };
29
- const MultiSelectWithPopover = props => {
30
- const {
31
- options = [],
32
- value,
33
- onChange,
34
- onUpdate,
35
- property,
36
- wrapColumn = false,
37
- translation
38
- } = props;
39
- const [anchorEl, setAnchorEl] = useState(null);
40
- const [anchorElOption, setAnchorElOption] = useState(null);
41
- const [currentIndex, setCurrentIndex] = useState(null);
42
- const [selectedOptions, setSelectedOptions] = useState(value);
43
- const [availableOptions, setAvailableOptions] = useState(options);
44
- const [showSnackBar, setShowSnackBar] = useState(false);
45
- const [chipColor, setChipColor] = useState(generateRandomColor());
46
- const [inputValue, setInputValue] = useState("");
47
- const {
48
- theme
49
- } = useEditorContext();
50
- const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
51
- const PopoverComponent = isMobile ? SwipeableDrawer : Popover;
52
- const mode = useMemo(() => ({
53
- type: "editOptionMulti",
54
- edit: {
55
- label: "Multi Select",
56
- visible: true,
57
- key: property,
58
- type: "multi-select",
59
- options: options || [],
60
- optionIndex: currentIndex,
61
- hideBackButton: true
62
- }
63
- }), [options, property, currentIndex]);
64
- const customScrollStyles = {
65
- scrollbarWidth: "thin",
66
- scrollbarColor: `${theme?.palette?.editor?.brainPopupScroll} transparent`,
67
- "&::-webkit-scrollbar": {
68
- width: "6px"
69
- },
70
- "&::-webkit-scrollbar-thumb": {
71
- backgroundColor: theme?.palette?.editor?.brainPopupScroll,
72
- borderRadius: "3px"
73
- },
74
- "&::-webkit-scrollbar-track": {
75
- display: "none"
76
- }
77
- };
78
- useEffect(() => {
79
- if (inputValue?.trim() && !chipColor) {
80
- setChipColor(generateRandomColor());
81
- }
82
- }, [inputValue, chipColor]);
83
- useEffect(() => {
84
- if (JSON.stringify(options) !== JSON.stringify(availableOptions)) {
85
- setAvailableOptions(options);
86
- }
87
- }, [options, availableOptions]);
88
- const handleOpenPopover = useCallback(event => {
89
- setAnchorEl(event.currentTarget);
90
- }, []);
91
- const handleClosePopover = useCallback(e => {
92
- e?.stopPropagation();
93
- setAnchorEl(null);
94
- }, []);
95
- const handleAddOption = newValue => {
96
- const trimmedValue = newValue?.trim();
97
- if (!trimmedValue) return;
98
- const newOption = {
99
- value: trimmedValue,
100
- color: chipColor
101
- };
102
- if (!availableOptions?.some(opt => opt?.value === trimmedValue)) {
103
- setAvailableOptions(prev => [...prev, newOption]);
104
- setSelectedOptions(prev => [...prev, newOption]);
105
- onUpdate([newOption, ...availableOptions]);
106
- }
107
- setInputValue("");
108
- setChipColor("");
109
- };
110
- const onClose = () => {
111
- setAnchorEl(anchorElOption);
112
- setAnchorElOption(null);
113
- };
114
- const onEditOption = (type, data) => {
115
- const updateData = data?.edit ? data?.edit?.options : data?.options;
116
- onUpdate(updateData);
117
- if (data?.edit?.options) {
118
- const updatedSelectedOptions = selectedOptions?.filter(selOption => updateData?.some(availOption => availOption?.value === selOption?.value && availOption?.color === selOption?.color));
119
- setSelectedOptions(updatedSelectedOptions);
120
- onClose();
121
- }
122
- };
123
- const handleEditOption = (e, index) => {
124
- e.stopPropagation();
125
- setCurrentIndex(index);
126
- setAnchorElOption(anchorEl);
127
- setAnchorEl(null);
128
- };
129
- const handleSelectOption = option => {
130
- if (!selectedOptions?.some(opt => opt?.value === option?.value)) {
131
- const updatedOptions = [...selectedOptions, option];
132
- setSelectedOptions(updatedOptions);
133
- onChange(updatedOptions);
134
- } else {
135
- setShowSnackBar(true);
136
- }
137
- };
138
- const handleClearSelection = () => {
139
- setSelectedOptions([]);
140
- };
141
- const handleDeleteChip = (event, option) => {
142
- event.stopPropagation();
143
- setSelectedOptions(prev => {
144
- const updatedOptions = prev.filter(selected => selected?.value !== option?.value);
145
- onChange(updatedOptions);
146
- return updatedOptions;
147
- });
148
- };
149
- const filteredOptions = availableOptions?.filter(option => option?.value?.toLowerCase()?.includes(inputValue?.toLowerCase()));
150
- const isExactMatch = availableOptions?.some(opt => opt?.value?.toLowerCase() === inputValue?.toLowerCase());
151
- const open = Boolean(anchorEl);
152
- const openEditOption = Boolean(anchorElOption);
153
- const id = open ? "autocomplete-popover" : undefined;
154
- return /*#__PURE__*/_jsxs("div", {
155
- children: [/*#__PURE__*/_jsx(Box, {
156
- sx: {
157
- display: "flex",
158
- flexWrap: wrapColumn ? "wrap" : "nowrap",
159
- overflowX: wrapColumn ? "hidden" : "auto",
160
- gap: 0.5,
161
- padding: "8px",
162
- cursor: "pointer"
163
- },
164
- onClick: handleOpenPopover,
165
- children: selectedOptions?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
166
- label: option?.value,
167
- onDelete: event => {
168
- handleDeleteChip(event, option);
169
- },
170
- deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
171
- variant: "filled",
172
- sx: {
173
- backgroundColor: option?.color,
174
- color: "#0F172A",
175
- "& .MuiChip-deleteIcon": {
176
- flexShrink: 0,
177
- "& path": {
178
- stroke: "#0F172A !important"
179
- }
180
- },
181
- "&:hover": {
182
- opacity: 0.8
183
- }
184
- }
185
- }, index))
186
- }), /*#__PURE__*/_jsx(PopoverComponent, {
187
- id: id,
188
- open: open,
189
- anchorEl: anchorEl,
190
- anchor: "bottom",
191
- onClose: e => handleClosePopover(e),
192
- anchorOrigin: {
193
- vertical: "top",
194
- horizontal: "left"
195
- },
196
- transformOrigin: {
197
- vertical: "top",
198
- horizontal: "left"
199
- },
200
- sx: {
201
- "& .MuiPaper-root": {
202
- borderRadius: "20px",
203
- background: theme?.palette?.editor?.textFormatBgColor,
204
- border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
205
- boxShadow: "0px 4px 10px 0px #00000029"
206
- }
207
- },
208
- disableAutoFocus: true,
209
- disableEnforceFocus: true,
210
- disableRestoreFocus: true,
211
- children: /*#__PURE__*/_jsxs(Box, {
212
- sx: {
213
- width: isMobile ? "100%" : 300
214
- },
215
- children: [/*#__PURE__*/_jsx(Autocomplete, {
216
- multiple: true,
217
- freeSolo: true,
218
- disablePortal: true,
219
- PopperComponent: () => null,
220
- sx: {
221
- "& .MuiFormControl-root": {
222
- maxHeight: "250px",
223
- overflowY: "auto",
224
- overflowX: "hidden",
225
- pr: "12px",
226
- pl: "12px",
227
- marginTop: "12px",
228
- ...customScrollStyles
229
- }
230
- },
231
- disableClearable: true,
232
- options: [],
233
- getOptionLabel: option => options?.value || "",
234
- value: selectedOptions,
235
- onChange: (event, newValues) => {
236
- const addedOptions = newValues?.filter(value => typeof value === "object" || typeof value === "string" && value?.trim() !== "")?.map(value => typeof value === "string" ? {
237
- value,
238
- color: chipColor
239
- } : value);
240
- const isDuplicate = addedOptions?.some(newOpt => (selectedOptions || [])?.some(opt => opt.value === newOpt.value));
241
- if (!isDuplicate) {
242
- setSelectedOptions([...selectedOptions, ...addedOptions]);
243
- }
244
- },
245
- inputValue: inputValue,
246
- onInputChange: (event, newInputValue) => setInputValue(newInputValue),
247
- onKeyDown: event => {
248
- if (event.key === "Enter" && inputValue.trim()) {
249
- event.preventDefault();
250
- handleAddOption(inputValue);
251
- }
252
- },
253
- filterOptions: (options, params) => options?.filter(option => option?.value?.toLowerCase()?.includes(params?.inputValue?.toLowerCase())),
254
- renderInput: params => /*#__PURE__*/_jsx(TextField, {
255
- ...params,
256
- variant: "standard",
257
- InputProps: {
258
- ...params.InputProps,
259
- disableUnderline: true,
260
- sx: {
261
- display: "flex",
262
- flexWrap: "wrap",
263
- fontFamily: "Inter",
264
- fontWeight: 400,
265
- fontSize: "12px",
266
- color: theme?.palette?.editor?.secondaryTextColor,
267
- "&::placeholder": {
268
- color: theme?.palette?.editor?.secondaryTextColor
269
- },
270
- "& .MuiAutocomplete-input": {
271
- minWidth: "100px !important"
272
- }
273
- },
274
- endAdornment: /*#__PURE__*/_jsx(Tooltip, {
275
- arrow: true,
276
- title: "Clear Selected",
277
- children: /*#__PURE__*/_jsx(IconButton, {
278
- onClick: handleClearSelection,
279
- sx: {
280
- padding: 0,
281
- minWidth: "unset",
282
- "& .MuiSvgIcon-root": {
283
- fontSize: 20
284
- },
285
- "& rect": {
286
- fill: theme?.palette?.editor?.closeButtonSvgStroke
287
- },
288
- "&:hover": {
289
- backgroundColor: "transparent"
290
- }
291
- },
292
- children: /*#__PURE__*/_jsx(Icon, {
293
- icon: "resetIconNew"
294
- })
295
- })
296
- })
297
- },
298
- sx: {
299
- backgroundColor: "transparent",
300
- fontFamily: "Inter",
301
- fontWeight: 400,
302
- fontSize: "12px"
303
- },
304
- placeholder: "Create new one..."
305
- }),
306
- renderTags: (tagValues, getTagProps) => tagValues.map((option, index) => /*#__PURE__*/_jsx(Chip, {
307
- variant: "filled",
308
- label: option?.value,
309
- ...getTagProps({
310
- index
311
- }),
312
- onDelete: event => {
313
- handleDeleteChip(event, option);
314
- },
315
- deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
316
- sx: {
317
- backgroundColor: option?.color,
318
- color: "#0F172A",
319
- "& .MuiChip-deleteIcon": {
320
- flexShrink: 0,
321
- "& path": {
322
- stroke: "#0F172A !important"
323
- }
324
- },
325
- "&:hover": {
326
- opacity: 0.8
327
- }
328
- }
329
- }, index))
330
- }), /*#__PURE__*/_jsx(Divider, {
331
- sx: {
332
- mt: "12px",
333
- borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
334
- boxShadow: theme?.palette?.editor?.dividerDropShadow
335
- }
336
- }), /*#__PURE__*/_jsx(Box, {
337
- sx: {
338
- pl: "4px"
339
- },
340
- children: /*#__PURE__*/_jsxs(List, {
341
- sx: {
342
- maxHeight: "250px",
343
- overflowY: "auto",
344
- ...customScrollStyles
345
- },
346
- children: [/*#__PURE__*/_jsx(Typography, {
347
- sx: {
348
- mb: 1,
349
- pl: "8px",
350
- color: theme?.palette?.editor?.secondaryTextColor,
351
- fontFamily: "Inter",
352
- fontWeight: 400,
353
- fontSize: "12px"
354
- },
355
- children: "Choose an option or create one"
356
- }), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
357
- sx: {
358
- padding: 0
359
- },
360
- disablePadding: true,
361
- children: /*#__PURE__*/_jsxs(ListItemButton, {
362
- onClick: () => handleSelectOption(option),
363
- sx: {
364
- paddingTop: "4px",
365
- paddingBottom: "4px",
366
- justifyContent: "space-between",
367
- "&:hover": {
368
- "& path": {
369
- stroke: theme?.palette?.editor?.activeColor
370
- },
371
- borderRadius: "12px"
372
- }
373
- },
374
- children: [/*#__PURE__*/_jsx(Chip, {
375
- label: option?.value,
376
- sx: {
377
- backgroundColor: option?.color,
378
- color: "#0F172A",
379
- fontWeight: 500,
380
- fontSize: "12px",
381
- fontFamily: "Inter",
382
- padding: "4px 12px",
383
- borderRadius: "16px",
384
- maxWidth: "180px",
385
- whiteSpace: "nowrap",
386
- overflow: "hidden",
387
- textOverflow: "ellipsis"
388
- }
389
- }), /*#__PURE__*/_jsx(IconButton, {
390
- size: "small",
391
- sx: {
392
- "& path": {
393
- stroke: theme?.palette?.editor?.closeButtonSvgStroke
394
- },
395
- "&:hover": {
396
- backgroundColor: "transparent"
397
- }
398
- },
399
- onClick: e => handleEditOption(e, index),
400
- children: /*#__PURE__*/_jsx(Icon, {
401
- icon: "rightArrow"
402
- })
403
- })]
404
- })
405
- }, index)), inputValue?.trim() && !isExactMatch && /*#__PURE__*/_jsx(ListItem, {
406
- disablePadding: true,
407
- children: /*#__PURE__*/_jsxs(ListItemButton, {
408
- onClick: () => handleAddOption(inputValue),
409
- sx: {
410
- display: "flex",
411
- alignItems: "center"
412
- },
413
- children: [/*#__PURE__*/_jsx(Typography, {
414
- sx: {
415
- color: theme?.palette?.editor?.secondaryTextColor,
416
- marginRight: "6px",
417
- fontSize: "14px",
418
- fontFamily: "Inter"
419
- },
420
- children: "Create"
421
- }), /*#__PURE__*/_jsx(Chip, {
422
- label: `${inputValue}`,
423
- sx: {
424
- backgroundColor: chipColor,
425
- color: "#0F172A",
426
- fontWeight: 500,
427
- fontSize: "12px",
428
- fontFamily: "Inter",
429
- borderRadius: "16px",
430
- maxWidth: "180px",
431
- whiteSpace: "nowrap",
432
- overflow: "hidden",
433
- textOverflow: "ellipsis"
434
- }
435
- })]
436
- })
437
- })]
438
- })
439
- })]
440
- })
441
- }), openEditOption ? /*#__PURE__*/_jsx(PropertySettings, {
442
- open: openEditOption,
443
- anchorEl: anchorElOption,
444
- mode: mode,
445
- onClose: onClose,
446
- onEvent: onEditOption,
447
- translation: translation
448
- }) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
449
- message: "Option already selected!",
450
- setShowSnackBar: setShowSnackBar
451
- }) : null]
452
- });
453
- };
454
- export default MultiSelectWithPopover;
@@ -1,89 +0,0 @@
1
- const Styles = theme => ({
2
- root: {
3
- "& .MuiPaper-root": {
4
- borderRadius: "12px",
5
- backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
6
- border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
7
- overflow: "hidden"
8
- },
9
- "& textarea": {
10
- backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
11
- border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
12
- borderRadius: "12px",
13
- padding: "10px !important",
14
- color: theme?.palette?.editor?.textColor,
15
- boxShadow: "0px 4px 18px 0px #00000014",
16
- "&:focus": {
17
- border: `1px solid #2563EB`,
18
- boxShadow: "0px 4px 18px 0px #2563EB1F",
19
- outline: "none"
20
- },
21
- "&:focus-visible": {
22
- border: `1px solid #2563EB`,
23
- boxShadow: "0px 4px 18px 0px #2563EB1F",
24
- outline: "none"
25
- }
26
- },
27
- "& .MuiDialogTitle-root": {
28
- padding: "20px 24px 16px 24px"
29
- },
30
- "& .title": {
31
- color: theme?.palette?.editor?.textColor,
32
- fontWeight: 600,
33
- fontSize: "20px",
34
- fontFamily: "Inter, sans-serif"
35
- },
36
- "& .close-popupbtn": {
37
- background: theme?.palette?.editor?.closeButtonBgColor,
38
- color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
39
- "& svg": {
40
- color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
41
- }
42
- },
43
- "& .divider": {
44
- margin: "0px 24px",
45
- background: theme?.palette?.editor?.deviderBgColor
46
- },
47
- "& .save-btn": {
48
- backgroundColor: "#2563EB",
49
- color: "#ffffff",
50
- fontWeight: 600,
51
- fontSize: "14px",
52
- opacity: 1,
53
- borderRadius: "8px",
54
- textTransform: "math-auto",
55
- height: "36px",
56
- padding: "0px 12px",
57
- minWidth: "90px",
58
- "&:hover": {
59
- backgroundColor: "#2563EB"
60
- },
61
- "@media only screen and (max-width: 899px)": {
62
- width: "50%"
63
- }
64
- },
65
- "& .clear-btn": {
66
- padding: "8px 12px",
67
- color: theme?.palette?.editor?.customDialogueCloseBtnColor,
68
- fontWeight: 600,
69
- fontSize: "14px",
70
- opacity: 1,
71
- borderRadius: "8px",
72
- textTransform: "math-auto",
73
- height: "36px",
74
- minWidth: "90px",
75
- backgroundColor: theme?.palette?.editor?.closeButtonBackground,
76
- border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`,
77
- "&:hover": {
78
- backgroundColor: theme?.palette?.editor?.closeButtonBackground
79
- },
80
- "@media only screen and (max-width: 899px)": {
81
- width: "50%"
82
- }
83
- },
84
- "& .MuiDialogActions-root": {
85
- padding: "0px 22px 16px 0px"
86
- }
87
- }
88
- });
89
- export default Styles;
@@ -1,115 +0,0 @@
1
- import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
2
- import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
3
- import { RND_ITEMS } from "../../helper";
4
- export const ELEMENT_CASE = {
5
- ADD_TEXT: "addText",
6
- ADD_BUTTON: "addButton",
7
- ADD_SIGNATURE: "addSignature",
8
- ADD_IMAGE: "addImage",
9
- ADD_VIDEO: "addVideo",
10
- ADD_TABLE: "addTable",
11
- ADD_CODE: "addCode",
12
- ADD_BOX: "addBox",
13
- ADD_FORM: "addForm",
14
- ADD_APP_HEADER: "addAppHeader",
15
- ADD_DIVIDER: "addDivider"
16
- };
17
- const commonXsValues = {
18
- top_xs: 0,
19
- marginTop_xs: 12,
20
- left_xs: 24,
21
- width_xs: 272,
22
- xs_updatedOn: new Date().getTime()
23
- };
24
- const elementXsValues = {
25
- [ELEMENT_CASE.ADD_TEXT]: {
26
- ...commonXsValues,
27
- height_xs: 50
28
- },
29
- [ELEMENT_CASE.ADD_BUTTON]: {
30
- ...commonXsValues,
31
- height_xs: 50
32
- },
33
- [ELEMENT_CASE.ADD_SIGNATURE]: {
34
- ...commonXsValues,
35
- height_xs: 173
36
- },
37
- [ELEMENT_CASE.ADD_IMAGE]: {
38
- ...commonXsValues,
39
- height_xs: 80
40
- },
41
- [ELEMENT_CASE.ADD_VIDEO]: {
42
- ...commonXsValues,
43
- height_xs: 300
44
- },
45
- [ELEMENT_CASE.ADD_TABLE]: {
46
- ...commonXsValues,
47
- height_xs: 165
48
- },
49
- [ELEMENT_CASE.ADD_CODE]: {
50
- ...commonXsValues,
51
- height: 300
52
- },
53
- [ELEMENT_CASE.ADD_BOX]: {
54
- ...commonXsValues,
55
- height_xs: 300
56
- },
57
- [ELEMENT_CASE.ADD_FORM]: {
58
- ...commonXsValues,
59
- height_xs: 80
60
- },
61
- [ELEMENT_CASE.ADD_APP_HEADER]: {
62
- ...commonXsValues,
63
- height_xs: 80
64
- },
65
- [ELEMENT_CASE.ADD_DIVIDER]: {
66
- ...commonXsValues,
67
- height_xs: 24
68
- }
69
- };
70
- export const findMaxYValue = (sectionItems, breakpoint) => {
71
- let maxY = 0;
72
- sectionItems.forEach(item => {
73
- const isHidden = breakpoint === "xs" && item.children.some(c => c.xsHidden);
74
- if (item?.type && RND_ITEMS.includes(item.type) && !isHidden) {
75
- const {
76
- bottom
77
- } = getElementOffset(item, breakpoint === "lg" ? "lg" : "xs");
78
- maxY = Math.max(maxY, bottom);
79
- }
80
- });
81
- return maxY;
82
- };
83
- export const convertToGridArea = y => {
84
- // Calculate grid position
85
- const row = Math.floor(y / ROW_HEIGHT) + 1;
86
-
87
- // to calculate difference inside the grid
88
- const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
89
-
90
- // Update grid area
91
- const gridArea = `${row} / 1 / ${row + 1} / 2`;
92
- return {
93
- gridArea,
94
- marginTop
95
- };
96
- };
97
- export const getNewElementXsValues = (type, sectionItems) => {
98
- const values = elementXsValues[type] || {};
99
- const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
100
- const {
101
- gridArea,
102
- marginTop
103
- } = convertToGridArea(y);
104
- const BUFFER_MARGIN_TOP = 12;
105
- const xsVal = {
106
- ...values,
107
- gridArea_xs: gridArea,
108
- marginTop_xs: marginTop + BUFFER_MARGIN_TOP
109
- };
110
- const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
111
- return {
112
- xsVal,
113
- sectionHeightXs
114
- };
115
- };