@flozy/editor 10.2.3 → 10.2.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 (172) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +24 -128
  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 +2 -6
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  8. package/dist/Editor/Elements/Button/EditorButton.js +9 -25
  9. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  13. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  14. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +6 -21
  16. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +2 -5
  17. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  18. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  20. package/dist/Editor/Elements/Embed/Image.js +2 -3
  21. package/dist/Editor/Elements/Embed/Video.js +1 -1
  22. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  23. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  24. package/dist/Editor/Elements/Form/Form.js +168 -181
  25. package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
  26. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -3
  27. package/dist/Editor/Elements/Form/FormField.js +6 -13
  28. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  29. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +31 -36
  30. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  31. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  32. package/dist/Editor/Elements/FreeGrid/styles.js +7 -75
  33. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  34. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  35. package/dist/Editor/Elements/List/CheckList.js +2 -3
  36. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  37. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  38. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  39. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  40. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  41. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  42. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  43. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  44. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  45. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  46. package/dist/Editor/Elements/Table/Styles.js +0 -7
  47. package/dist/Editor/Elements/Table/Table.js +3 -3
  48. package/dist/Editor/Elements/Table/TableCell.js +5 -24
  49. package/dist/Editor/Elements/Title/title.js +6 -6
  50. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  51. package/dist/Editor/MiniEditor.js +1 -2
  52. package/dist/Editor/Styles/EditorStyles.js +5 -5
  53. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  54. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  55. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  56. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  57. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  58. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  59. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  60. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  62. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  63. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  64. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  65. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  66. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  67. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  68. package/dist/Editor/common/ColorPickerButton.js +16 -38
  69. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  70. package/dist/Editor/common/FontLoader/FontLoader.js +15 -31
  71. package/dist/Editor/common/Icon.js +1 -31
  72. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  73. package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
  74. package/dist/Editor/common/LinkSettings/index.js +68 -84
  75. package/dist/Editor/common/LinkSettings/style.js +30 -245
  76. package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
  77. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  78. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  79. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  80. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  81. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  82. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  83. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  91. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -147
  92. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  93. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
  94. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  95. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  96. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  97. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  98. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +54 -48
  99. package/dist/Editor/common/RnD/VirtualElement/helper.js +131 -143
  100. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  101. package/dist/Editor/common/RnD/index.js +11 -6
  102. package/dist/Editor/common/Select/index.js +0 -2
  103. package/dist/Editor/common/Shorthands/elements.js +11 -65
  104. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  105. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  106. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  107. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  108. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  109. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  110. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  111. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  112. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  114. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  115. package/dist/Editor/common/Uploader.js +0 -8
  116. package/dist/Editor/common/iconListV2.js +6 -156
  117. package/dist/Editor/common/iconslist.js +0 -24
  118. package/dist/Editor/commonStyle.js +62 -168
  119. package/dist/Editor/helper/index.js +0 -4
  120. package/dist/Editor/helper/theme.js +2 -203
  121. package/dist/Editor/hooks/useMouseMove.js +5 -8
  122. package/dist/Editor/hooks/useTable.js +4 -5
  123. package/dist/Editor/plugins/withEmbeds.js +1 -1
  124. package/dist/Editor/plugins/withHTML.js +1 -3
  125. package/dist/Editor/plugins/withTable.js +1 -1
  126. package/dist/Editor/theme/ThemeList.js +173 -50
  127. package/dist/Editor/utils/SlateUtilityFunctions.js +45 -169
  128. package/dist/Editor/utils/accordion.js +4 -14
  129. package/dist/Editor/utils/button.js +17 -1
  130. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  131. package/dist/Editor/utils/draftToSlate.js +2 -3
  132. package/dist/Editor/utils/events.js +6 -50
  133. package/dist/Editor/utils/font.js +37 -40
  134. package/dist/Editor/utils/form.js +4 -4
  135. package/dist/Editor/utils/formfield.js +2 -8
  136. package/dist/Editor/utils/helper.js +19 -109
  137. package/dist/Editor/utils/signature.js +9 -2
  138. package/package.json +4 -4
  139. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  140. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  141. package/dist/Editor/Elements/FreeGrid/helper.js +0 -113
  142. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  143. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  144. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  145. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  146. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  147. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  148. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  149. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  150. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  151. package/dist/Editor/common/CustomSelect.js +0 -43
  152. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  153. package/dist/Editor/common/SnackBar/index.js +0 -43
  154. package/dist/Editor/helper/textIndeces.js +0 -58
  155. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  156. package/dist/Editor/hooks/useThemeValues.js +0 -63
  157. package/dist/Editor/theme/index.js +0 -149
  158. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  159. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  160. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  161. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  162. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  163. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  164. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  165. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  166. package/dist/Editor/themeSettings/icons.js +0 -60
  167. package/dist/Editor/themeSettings/index.js +0 -361
  168. package/dist/Editor/themeSettings/style.js +0 -299
  169. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  170. package/dist/Editor/themeSettingsAI/index.js +0 -355
  171. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  172. package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -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,113 +0,0 @@
1
- import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
2
- import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
3
- export const ELEMENT_CASE = {
4
- ADD_TEXT: "addText",
5
- ADD_BUTTON: "addButton",
6
- ADD_SIGNATURE: "addSignature",
7
- ADD_IMAGE: "addImage",
8
- ADD_VIDEO: "addVideo",
9
- ADD_TABLE: "addTable",
10
- ADD_CODE: "addCode",
11
- ADD_BOX: "addBox",
12
- ADD_FORM: "addForm",
13
- ADD_APP_HEADER: "addAppHeader",
14
- ADD_DIVIDER: "addDivider"
15
- };
16
- const commonXsValues = {
17
- top_xs: 0,
18
- marginTop_xs: 12,
19
- left_xs: 24,
20
- width_xs: 272,
21
- xs_updatedOn: new Date().getTime()
22
- };
23
- const elementXsValues = {
24
- [ELEMENT_CASE.ADD_TEXT]: {
25
- ...commonXsValues,
26
- height_xs: 50
27
- },
28
- [ELEMENT_CASE.ADD_BUTTON]: {
29
- ...commonXsValues,
30
- height_xs: 50
31
- },
32
- [ELEMENT_CASE.ADD_SIGNATURE]: {
33
- ...commonXsValues,
34
- height_xs: 173
35
- },
36
- [ELEMENT_CASE.ADD_IMAGE]: {
37
- ...commonXsValues,
38
- height_xs: 80
39
- },
40
- [ELEMENT_CASE.ADD_VIDEO]: {
41
- ...commonXsValues,
42
- height_xs: 300
43
- },
44
- [ELEMENT_CASE.ADD_TABLE]: {
45
- ...commonXsValues,
46
- height_xs: 165
47
- },
48
- [ELEMENT_CASE.ADD_CODE]: {
49
- ...commonXsValues,
50
- height: 300
51
- },
52
- [ELEMENT_CASE.ADD_BOX]: {
53
- ...commonXsValues,
54
- height_xs: 300
55
- },
56
- [ELEMENT_CASE.ADD_FORM]: {
57
- ...commonXsValues,
58
- height_xs: 80
59
- },
60
- [ELEMENT_CASE.ADD_APP_HEADER]: {
61
- ...commonXsValues,
62
- height_xs: 80
63
- },
64
- [ELEMENT_CASE.ADD_DIVIDER]: {
65
- ...commonXsValues,
66
- height_xs: 24
67
- }
68
- };
69
- export const findMaxYValue = sectionItems => {
70
- let maxY = 0;
71
- sectionItems.forEach(item => {
72
- if (item?.type && item?.type !== "paragraph") {
73
- const {
74
- bottom
75
- } = getElementOffset(item);
76
- maxY = Math.max(maxY, bottom);
77
- }
78
- });
79
- return maxY;
80
- };
81
- export const convertToGridArea = y => {
82
- // Calculate grid position
83
- const row = Math.floor(y / ROW_HEIGHT) + 1;
84
-
85
- // to calculate difference inside the grid
86
- const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
87
-
88
- // Update grid area
89
- const gridArea = `${row} / 1 / ${row + 1} / 2`;
90
- return {
91
- gridArea,
92
- marginTop
93
- };
94
- };
95
- export const getNewElementXsValues = (type, sectionItems) => {
96
- const values = elementXsValues[type] || {};
97
- const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
98
- const {
99
- gridArea,
100
- marginTop
101
- } = convertToGridArea(y);
102
- const BUFFER_MARGIN_TOP = 12;
103
- const xsVal = {
104
- ...values,
105
- gridArea_xs: gridArea,
106
- marginTop_xs: marginTop + BUFFER_MARGIN_TOP
107
- };
108
- const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
109
- return {
110
- xsVal,
111
- sectionHeightXs
112
- };
113
- };