@elementor/editor-global-classes 0.5.0 → 0.7.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.
- package/CHANGELOG.md +42 -0
- package/dist/index.js +108 -71
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +92 -55
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -6
- package/src/components/class-manager/class-manager-button.tsx +1 -1
- package/src/components/class-manager/class-manager-introduction.tsx +51 -0
- package/src/components/class-manager/class-manager-panel.tsx +20 -16
- package/src/components/class-manager/global-classes-list.tsx +2 -0
- package/src/store.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,47 @@
|
|
|
1
1
|
# @elementor/editor-global-classes
|
|
2
2
|
|
|
3
|
+
## 0.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- b001371: Prevent editable field validation for initial value.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 811950c: Fix translation text domain
|
|
12
|
+
- Updated dependencies [728ffb5]
|
|
13
|
+
- Updated dependencies [f949dce]
|
|
14
|
+
- Updated dependencies [35092ea]
|
|
15
|
+
- Updated dependencies [9de89b0]
|
|
16
|
+
- Updated dependencies [b001371]
|
|
17
|
+
- Updated dependencies [1597a71]
|
|
18
|
+
- Updated dependencies [2da724c]
|
|
19
|
+
- Updated dependencies [cf83fe4]
|
|
20
|
+
- @elementor/editor-props@0.9.2
|
|
21
|
+
- @elementor/editor-editing-panel@1.12.0
|
|
22
|
+
- @elementor/editor-ui@0.4.0
|
|
23
|
+
- @elementor/editor-styles-repository@0.7.2
|
|
24
|
+
- @elementor/editor-styles@0.5.7
|
|
25
|
+
|
|
26
|
+
## 0.6.0
|
|
27
|
+
|
|
28
|
+
### Minor Changes
|
|
29
|
+
|
|
30
|
+
- dd8654a: Add introduction modal to class manager panel
|
|
31
|
+
- 6fb8a9b: Fix created global class priority.
|
|
32
|
+
|
|
33
|
+
### Patch Changes
|
|
34
|
+
|
|
35
|
+
- Updated dependencies [dd8654a]
|
|
36
|
+
- Updated dependencies [6b064c5]
|
|
37
|
+
- Updated dependencies [158d092]
|
|
38
|
+
- @elementor/editor-current-user@0.2.0
|
|
39
|
+
- @elementor/editor-ui@0.3.0
|
|
40
|
+
- @elementor/editor-editing-panel@1.11.1
|
|
41
|
+
- @elementor/editor-props@0.9.1
|
|
42
|
+
- @elementor/editor-styles-repository@0.7.1
|
|
43
|
+
- @elementor/editor-styles@0.5.6
|
|
44
|
+
|
|
3
45
|
## 0.5.0
|
|
4
46
|
|
|
5
47
|
### Minor Changes
|
package/dist/index.js
CHANGED
|
@@ -31,30 +31,66 @@ var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
|
31
31
|
var import_store9 = require("@elementor/store");
|
|
32
32
|
|
|
33
33
|
// src/components/class-manager/class-manager-button.tsx
|
|
34
|
-
var
|
|
34
|
+
var React6 = __toESM(require("react"));
|
|
35
35
|
var import_icons5 = require("@elementor/icons");
|
|
36
|
-
var
|
|
37
|
-
var
|
|
36
|
+
var import_ui6 = require("@elementor/ui");
|
|
37
|
+
var import_i18n6 = require("@wordpress/i18n");
|
|
38
38
|
|
|
39
39
|
// src/components/class-manager/class-manager-panel.tsx
|
|
40
|
-
var
|
|
40
|
+
var React5 = __toESM(require("react"));
|
|
41
41
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
42
42
|
var import_icons4 = require("@elementor/icons");
|
|
43
|
-
var
|
|
44
|
-
var
|
|
43
|
+
var import_ui5 = require("@elementor/ui");
|
|
44
|
+
var import_i18n5 = require("@wordpress/i18n");
|
|
45
|
+
|
|
46
|
+
// src/components/class-manager/class-manager-introduction.tsx
|
|
47
|
+
var React = __toESM(require("react"));
|
|
48
|
+
var import_react = require("react");
|
|
49
|
+
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
50
|
+
var import_editor_ui = require("@elementor/editor-ui");
|
|
51
|
+
var import_ui = require("@elementor/ui");
|
|
52
|
+
var import_i18n = require("@wordpress/i18n");
|
|
53
|
+
var MESSAGE_KEY = "global-class-manager-4";
|
|
54
|
+
var ClassManagerIntroduction = () => {
|
|
55
|
+
const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
|
|
56
|
+
const [shouldShowIntroduction, setShouldShowIntroduction] = (0, import_react.useState)(!isMessageSuppressed);
|
|
57
|
+
return /* @__PURE__ */ React.createElement(
|
|
58
|
+
import_editor_ui.IntroductionModal,
|
|
59
|
+
{
|
|
60
|
+
open: shouldShowIntroduction,
|
|
61
|
+
title: (0, import_i18n.__)("CSS Class manager", "elementor"),
|
|
62
|
+
content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
|
|
63
|
+
handleClose: (shouldShowAgain) => {
|
|
64
|
+
if (!shouldShowAgain) {
|
|
65
|
+
suppressMessage();
|
|
66
|
+
}
|
|
67
|
+
setShouldShowIntroduction(false);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
};
|
|
72
|
+
var IntroductionContent = () => {
|
|
73
|
+
return /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 1.5, padding: 3 }, /* @__PURE__ */ React.createElement(import_ui.Image, { sx: { width: "100%", height: "312px" }, src: "", alt: "Introduction" }), /* @__PURE__ */ React.createElement(import_ui.Box, null, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
|
|
74
|
+
"The CSS Class Manager allows you to manage and organize your site's CSS classes efficiently. You can reorder classes to adjust their priority, rename them to maintain clarity in your design system, and delete unused classes to keep your CSS structured.",
|
|
75
|
+
"elementor"
|
|
76
|
+
)), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
|
|
77
|
+
"Changes apply globally\u2014any modifications will affect all elements using the class, impacting the class order and priority across your site.",
|
|
78
|
+
"elementor"
|
|
79
|
+
))));
|
|
80
|
+
};
|
|
45
81
|
|
|
46
82
|
// src/components/class-manager/global-classes-list.tsx
|
|
47
|
-
var
|
|
83
|
+
var React4 = __toESM(require("react"));
|
|
48
84
|
var import_editor_styles_repository = require("@elementor/editor-styles-repository");
|
|
49
|
-
var
|
|
85
|
+
var import_editor_ui2 = require("@elementor/editor-ui");
|
|
50
86
|
var import_icons3 = require("@elementor/icons");
|
|
51
|
-
var
|
|
52
|
-
var
|
|
87
|
+
var import_ui4 = require("@elementor/ui");
|
|
88
|
+
var import_i18n4 = require("@wordpress/i18n");
|
|
53
89
|
|
|
54
90
|
// src/global-classes-styles-provider.ts
|
|
55
91
|
var import_editor_styles2 = require("@elementor/editor-styles");
|
|
56
92
|
var import_store2 = require("@elementor/store");
|
|
57
|
-
var
|
|
93
|
+
var import_i18n2 = require("@wordpress/i18n");
|
|
58
94
|
|
|
59
95
|
// src/errors.ts
|
|
60
96
|
var import_utils = require("@elementor/utils");
|
|
@@ -88,7 +124,7 @@ var slice = (0, import_store.__createSlice)({
|
|
|
88
124
|
},
|
|
89
125
|
add(state, { payload }) {
|
|
90
126
|
state.items[payload.id] = payload;
|
|
91
|
-
state.order.
|
|
127
|
+
state.order.unshift(payload.id);
|
|
92
128
|
state.isDirty = true;
|
|
93
129
|
},
|
|
94
130
|
delete(state, { payload }) {
|
|
@@ -193,27 +229,27 @@ var globalClassesStylesProvider = {
|
|
|
193
229
|
},
|
|
194
230
|
subscribe: (cb) => (0, import_store2.__subscribeWithSelector)((state) => state.globalClasses, cb),
|
|
195
231
|
labels: {
|
|
196
|
-
singular: (0,
|
|
197
|
-
plural: (0,
|
|
232
|
+
singular: (0, import_i18n2.__)("Global class", "elementor"),
|
|
233
|
+
plural: (0, import_i18n2.__)("Global CSS Classes", "elementor")
|
|
198
234
|
}
|
|
199
235
|
};
|
|
200
236
|
|
|
201
237
|
// src/components/class-manager/delete-confirmation-dialog.tsx
|
|
202
|
-
var
|
|
203
|
-
var
|
|
238
|
+
var React2 = __toESM(require("react"));
|
|
239
|
+
var import_react2 = require("react");
|
|
204
240
|
var import_icons = require("@elementor/icons");
|
|
205
|
-
var
|
|
206
|
-
var
|
|
207
|
-
var context = (0,
|
|
241
|
+
var import_ui2 = require("@elementor/ui");
|
|
242
|
+
var import_i18n3 = require("@wordpress/i18n");
|
|
243
|
+
var context = (0, import_react2.createContext)(null);
|
|
208
244
|
var DeleteConfirmationProvider = ({ children }) => {
|
|
209
|
-
const [dialogProps, setDialogProps] = (0,
|
|
245
|
+
const [dialogProps, setDialogProps] = (0, import_react2.useState)(null);
|
|
210
246
|
const openDialog = (props) => {
|
|
211
247
|
setDialogProps(props);
|
|
212
248
|
};
|
|
213
249
|
const closeDialog = () => {
|
|
214
250
|
setDialogProps(null);
|
|
215
251
|
};
|
|
216
|
-
return /* @__PURE__ */
|
|
252
|
+
return /* @__PURE__ */ React2.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React2.createElement(DeleteConfirmationDialog, { ...dialogProps }));
|
|
217
253
|
};
|
|
218
254
|
var TITLE_ID = "delete-class-dialog";
|
|
219
255
|
var DeleteConfirmationDialog = ({ label, id }) => {
|
|
@@ -222,13 +258,13 @@ var DeleteConfirmationDialog = ({ label, id }) => {
|
|
|
222
258
|
globalClassesStylesProvider.actions.delete(id);
|
|
223
259
|
closeDialog();
|
|
224
260
|
};
|
|
225
|
-
return /* @__PURE__ */
|
|
261
|
+
return /* @__PURE__ */ React2.createElement(import_ui2.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React2.createElement(import_ui2.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React2.createElement(import_icons.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n3.__)("Delete global class", "elementor")), /* @__PURE__ */ React2.createElement(import_ui2.DialogContent, null, /* @__PURE__ */ React2.createElement(import_ui2.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n3.__)("Deleting", "elementor"), /* @__PURE__ */ React2.createElement(import_ui2.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n3.__)(
|
|
226
262
|
"will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
|
|
227
263
|
"elementor"
|
|
228
|
-
))), /* @__PURE__ */
|
|
264
|
+
))), /* @__PURE__ */ React2.createElement(import_ui2.DialogActions, null, /* @__PURE__ */ React2.createElement(import_ui2.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n3.__)("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(import_ui2.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n3.__)("Delete", "elementor"))));
|
|
229
265
|
};
|
|
230
266
|
var useDeleteConfirmation = () => {
|
|
231
|
-
const contextValue = (0,
|
|
267
|
+
const contextValue = (0, import_react2.useContext)(context);
|
|
232
268
|
if (!contextValue) {
|
|
233
269
|
throw new Error("useDeleteConfirmation must be used within a DeleteConfirmationProvider");
|
|
234
270
|
}
|
|
@@ -236,14 +272,14 @@ var useDeleteConfirmation = () => {
|
|
|
236
272
|
};
|
|
237
273
|
|
|
238
274
|
// src/components/class-manager/sortable.tsx
|
|
239
|
-
var
|
|
275
|
+
var React3 = __toESM(require("react"));
|
|
240
276
|
var import_icons2 = require("@elementor/icons");
|
|
241
|
-
var
|
|
242
|
-
var SortableProvider = (props) => /* @__PURE__ */
|
|
243
|
-
var SortableTrigger = (props) => /* @__PURE__ */
|
|
277
|
+
var import_ui3 = require("@elementor/ui");
|
|
278
|
+
var SortableProvider = (props) => /* @__PURE__ */ React3.createElement(import_ui3.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
|
|
279
|
+
var SortableTrigger = (props) => /* @__PURE__ */ React3.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React3.createElement(import_icons2.GripVerticalIcon, { fontSize: "tiny" }));
|
|
244
280
|
var SortableItem = ({ children, id }) => {
|
|
245
|
-
return /* @__PURE__ */
|
|
246
|
-
|
|
281
|
+
return /* @__PURE__ */ React3.createElement(
|
|
282
|
+
import_ui3.UnstableSortableItem,
|
|
247
283
|
{
|
|
248
284
|
id,
|
|
249
285
|
render: ({
|
|
@@ -255,7 +291,7 @@ var SortableItem = ({ children, id }) => {
|
|
|
255
291
|
dropIndicationStyle,
|
|
256
292
|
showDropIndication
|
|
257
293
|
}) => {
|
|
258
|
-
return /* @__PURE__ */
|
|
294
|
+
return /* @__PURE__ */ React3.createElement(StyledSortableItem, { ...itemProps, elevation: 0, sx: itemStyle, role: "listitem" }, /* @__PURE__ */ React3.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children({
|
|
259
295
|
itemProps,
|
|
260
296
|
isDragged,
|
|
261
297
|
triggerProps,
|
|
@@ -268,7 +304,7 @@ var SortableItem = ({ children, id }) => {
|
|
|
268
304
|
}
|
|
269
305
|
);
|
|
270
306
|
};
|
|
271
|
-
var StyledSortableItem = (0,
|
|
307
|
+
var StyledSortableItem = (0, import_ui3.styled)(import_ui3.Paper)`
|
|
272
308
|
position: relative;
|
|
273
309
|
|
|
274
310
|
&:hover {
|
|
@@ -285,7 +321,7 @@ var StyledSortableItem = (0, import_ui2.styled)(import_ui2.Paper)`
|
|
|
285
321
|
transform: translate( -75%, -50% );
|
|
286
322
|
}
|
|
287
323
|
`;
|
|
288
|
-
var SortableItemIndicator = (0,
|
|
324
|
+
var SortableItemIndicator = (0, import_ui3.styled)(import_ui3.Box)`
|
|
289
325
|
width: 100%;
|
|
290
326
|
height: 3px;
|
|
291
327
|
border-radius: ${({ theme }) => theme.spacing(0.5)};
|
|
@@ -297,13 +333,13 @@ var GlobalClassesList = () => {
|
|
|
297
333
|
const cssClasses = useOrderedGlobalClasses();
|
|
298
334
|
const [classesOrder, reorderClasses] = useClassesOrder();
|
|
299
335
|
if (!cssClasses?.length) {
|
|
300
|
-
return /* @__PURE__ */
|
|
336
|
+
return /* @__PURE__ */ React4.createElement(EmptyState, null);
|
|
301
337
|
}
|
|
302
|
-
return /* @__PURE__ */
|
|
338
|
+
return /* @__PURE__ */ React4.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React4.createElement(import_ui4.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React4.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, cssClasses?.map(({ id, label }) => {
|
|
303
339
|
const renameClass = (newLabel) => {
|
|
304
340
|
globalClassesStylesProvider.actions.update({ label: newLabel, id });
|
|
305
341
|
};
|
|
306
|
-
return /* @__PURE__ */
|
|
342
|
+
return /* @__PURE__ */ React4.createElement(SortableItem, { key: id, id }, ({ isDragged, showDropIndication, dropIndicationStyle }) => /* @__PURE__ */ React4.createElement(
|
|
307
343
|
ClassItem,
|
|
308
344
|
{
|
|
309
345
|
id,
|
|
@@ -311,7 +347,7 @@ var GlobalClassesList = () => {
|
|
|
311
347
|
renameClass,
|
|
312
348
|
selected: isDragged
|
|
313
349
|
},
|
|
314
|
-
showDropIndication && /* @__PURE__ */
|
|
350
|
+
showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
|
|
315
351
|
));
|
|
316
352
|
}))));
|
|
317
353
|
};
|
|
@@ -335,34 +371,34 @@ var ClassItem = ({
|
|
|
335
371
|
isEditing,
|
|
336
372
|
error,
|
|
337
373
|
getProps: getEditableProps
|
|
338
|
-
} = (0,
|
|
374
|
+
} = (0, import_editor_ui2.useEditable)({
|
|
339
375
|
value: label,
|
|
340
376
|
onSubmit: renameClass,
|
|
341
377
|
validation: validateLabel
|
|
342
378
|
});
|
|
343
379
|
const { openDialog } = useDeleteConfirmation();
|
|
344
|
-
const popupState = (0,
|
|
380
|
+
const popupState = (0, import_ui4.usePopupState)({
|
|
345
381
|
variant: "popover",
|
|
346
382
|
disableAutoFocus: true
|
|
347
383
|
});
|
|
348
|
-
return /* @__PURE__ */
|
|
384
|
+
return /* @__PURE__ */ React4.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", gap: 1, flexGrow: 1, flexShrink: 0 }, /* @__PURE__ */ React4.createElement(
|
|
349
385
|
StyledListItem,
|
|
350
386
|
{
|
|
351
387
|
component: "div",
|
|
352
388
|
disablePadding: true,
|
|
353
389
|
disableGutters: true,
|
|
354
|
-
secondaryAction: /* @__PURE__ */
|
|
355
|
-
|
|
390
|
+
secondaryAction: /* @__PURE__ */ React4.createElement(
|
|
391
|
+
import_ui4.Tooltip,
|
|
356
392
|
{
|
|
357
393
|
placement: "top",
|
|
358
394
|
className: "class-item-more-actions",
|
|
359
|
-
title: (0,
|
|
395
|
+
title: (0, import_i18n4.__)("More actions", "elementor")
|
|
360
396
|
},
|
|
361
|
-
/* @__PURE__ */
|
|
397
|
+
/* @__PURE__ */ React4.createElement(import_ui4.IconButton, { size: "tiny", ...(0, import_ui4.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React4.createElement(import_icons3.DotsVerticalIcon, { fontSize: "tiny" }))
|
|
362
398
|
)
|
|
363
399
|
},
|
|
364
|
-
/* @__PURE__ */
|
|
365
|
-
|
|
400
|
+
/* @__PURE__ */ React4.createElement(
|
|
401
|
+
import_ui4.ListItemButton,
|
|
366
402
|
{
|
|
367
403
|
dense: true,
|
|
368
404
|
disableGutters: true,
|
|
@@ -378,22 +414,22 @@ var ClassItem = ({
|
|
|
378
414
|
}
|
|
379
415
|
}
|
|
380
416
|
},
|
|
381
|
-
/* @__PURE__ */
|
|
382
|
-
|
|
417
|
+
/* @__PURE__ */ React4.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React4.createElement(
|
|
418
|
+
import_editor_ui2.EditableField,
|
|
383
419
|
{
|
|
384
420
|
ref: editableRef,
|
|
385
421
|
error,
|
|
386
|
-
as:
|
|
422
|
+
as: import_ui4.Typography,
|
|
387
423
|
variant: "caption",
|
|
388
424
|
...getEditableProps()
|
|
389
425
|
}
|
|
390
|
-
) : /* @__PURE__ */
|
|
426
|
+
) : /* @__PURE__ */ React4.createElement(import_editor_ui2.EllipsisWithTooltip, { title: label, as: import_ui4.Typography, variant: "caption" }))
|
|
391
427
|
),
|
|
392
428
|
children,
|
|
393
|
-
/* @__PURE__ */
|
|
394
|
-
|
|
429
|
+
/* @__PURE__ */ React4.createElement(
|
|
430
|
+
import_ui4.Menu,
|
|
395
431
|
{
|
|
396
|
-
...(0,
|
|
432
|
+
...(0, import_ui4.bindMenu)(popupState),
|
|
397
433
|
anchorOrigin: {
|
|
398
434
|
vertical: "bottom",
|
|
399
435
|
horizontal: "right"
|
|
@@ -403,8 +439,8 @@ var ClassItem = ({
|
|
|
403
439
|
horizontal: "right"
|
|
404
440
|
}
|
|
405
441
|
},
|
|
406
|
-
/* @__PURE__ */
|
|
407
|
-
|
|
442
|
+
/* @__PURE__ */ React4.createElement(
|
|
443
|
+
import_ui4.MenuItem,
|
|
408
444
|
{
|
|
409
445
|
sx: { minWidth: "160px" },
|
|
410
446
|
onClick: () => {
|
|
@@ -412,22 +448,22 @@ var ClassItem = ({
|
|
|
412
448
|
openEditMode();
|
|
413
449
|
}
|
|
414
450
|
},
|
|
415
|
-
/* @__PURE__ */
|
|
451
|
+
/* @__PURE__ */ React4.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Rename", "elementor") })
|
|
416
452
|
),
|
|
417
|
-
/* @__PURE__ */
|
|
418
|
-
|
|
453
|
+
/* @__PURE__ */ React4.createElement(
|
|
454
|
+
import_ui4.MenuItem,
|
|
419
455
|
{
|
|
420
456
|
onClick: () => {
|
|
421
457
|
popupState.close();
|
|
422
458
|
openDialog({ id, label });
|
|
423
459
|
}
|
|
424
460
|
},
|
|
425
|
-
/* @__PURE__ */
|
|
461
|
+
/* @__PURE__ */ React4.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Delete", "elementor"), sx: { color: "error.light" } })
|
|
426
462
|
)
|
|
427
463
|
)
|
|
428
464
|
));
|
|
429
465
|
};
|
|
430
|
-
var StyledListItem = (0,
|
|
466
|
+
var StyledListItem = (0, import_ui4.styled)(import_ui4.ListItem)`
|
|
431
467
|
.class-item-more-actions {
|
|
432
468
|
visibility: hidden;
|
|
433
469
|
}
|
|
@@ -437,16 +473,16 @@ var StyledListItem = (0, import_ui3.styled)(import_ui3.ListItem)`
|
|
|
437
473
|
}
|
|
438
474
|
}
|
|
439
475
|
`;
|
|
440
|
-
var EmptyState = () => /* @__PURE__ */
|
|
476
|
+
var EmptyState = () => /* @__PURE__ */ React4.createElement(import_ui4.Stack, { alignItems: "center", gap: 3, pt: 4, px: 0.5 }, /* @__PURE__ */ React4.createElement(import_icons3.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React4.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n4.__)("No CSS classes created yet", "elementor")), /* @__PURE__ */ React4.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n4.__)(
|
|
441
477
|
"CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.",
|
|
442
478
|
"elementor"
|
|
443
479
|
)));
|
|
444
|
-
var StyledHeader = (0,
|
|
480
|
+
var StyledHeader = (0, import_ui4.styled)(import_ui4.Typography)(({ theme, variant }) => ({
|
|
445
481
|
"&.MuiTypography-root": {
|
|
446
482
|
...theme.typography[variant]
|
|
447
483
|
}
|
|
448
484
|
}));
|
|
449
|
-
var Indicator = (0,
|
|
485
|
+
var Indicator = (0, import_ui4.styled)(import_ui4.Box, {
|
|
450
486
|
shouldForwardProp: (prop) => !["isActive", "isError"].includes(prop)
|
|
451
487
|
})(({ theme, isActive, isError }) => ({
|
|
452
488
|
display: "flex",
|
|
@@ -468,11 +504,12 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
|
|
|
468
504
|
};
|
|
469
505
|
var validateLabel = (newLabel) => {
|
|
470
506
|
if (!import_editor_styles_repository.stylesRepository.isLabelValid(newLabel)) {
|
|
471
|
-
return (0,
|
|
507
|
+
return (0, import_i18n4.__)("Format is not valid", "elementor");
|
|
472
508
|
}
|
|
473
509
|
if (import_editor_styles_repository.stylesRepository.isLabelExist(newLabel)) {
|
|
474
|
-
return (0,
|
|
510
|
+
return (0, import_i18n4.__)("Existing name", "elementor");
|
|
475
511
|
}
|
|
512
|
+
return null;
|
|
476
513
|
};
|
|
477
514
|
|
|
478
515
|
// src/components/class-manager/class-manager-panel.tsx
|
|
@@ -481,22 +518,22 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
|
|
|
481
518
|
component: ClassManagerPanel
|
|
482
519
|
});
|
|
483
520
|
function ClassManagerPanel() {
|
|
484
|
-
return /* @__PURE__ */
|
|
521
|
+
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui5.ErrorBoundary, { fallback: /* @__PURE__ */ React5.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React5.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React5.createElement(import_ui5.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(import_icons4.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n5.__)("CSS Class manager", "elementor")), /* @__PURE__ */ React5.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React5.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React5.createElement(GlobalClassesList, null)))), /* @__PURE__ */ React5.createElement(ClassManagerIntroduction, null));
|
|
485
522
|
}
|
|
486
523
|
var CloseButton = (props) => {
|
|
487
524
|
const { close } = usePanelActions();
|
|
488
|
-
return /* @__PURE__ */
|
|
525
|
+
return /* @__PURE__ */ React5.createElement(import_ui5.IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React5.createElement(import_icons4.XIcon, { fontSize: "small" }));
|
|
489
526
|
};
|
|
490
|
-
var ErrorBoundaryFallback = () => /* @__PURE__ */
|
|
527
|
+
var ErrorBoundaryFallback = () => /* @__PURE__ */ React5.createElement(import_ui5.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React5.createElement(import_ui5.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React5.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
|
|
491
528
|
|
|
492
529
|
// src/components/class-manager/class-manager-button.tsx
|
|
493
530
|
var ClassManagerButton = () => {
|
|
494
531
|
const { open } = usePanelActions();
|
|
495
|
-
return /* @__PURE__ */
|
|
532
|
+
return /* @__PURE__ */ React6.createElement(import_ui6.Tooltip, { title: (0, import_i18n6.__)("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { onClick: open }, /* @__PURE__ */ React6.createElement(import_icons5.ColorSwatchIcon, { fontSize: "tiny" })));
|
|
496
533
|
};
|
|
497
534
|
|
|
498
535
|
// src/components/populate-store.tsx
|
|
499
|
-
var
|
|
536
|
+
var import_react3 = require("react");
|
|
500
537
|
var import_store5 = require("@elementor/store");
|
|
501
538
|
|
|
502
539
|
// src/api.ts
|
|
@@ -510,7 +547,7 @@ var apiClient = {
|
|
|
510
547
|
// src/components/populate-store.tsx
|
|
511
548
|
function PopulateStore() {
|
|
512
549
|
const dispatch2 = (0, import_store5.__useDispatch)();
|
|
513
|
-
(0,
|
|
550
|
+
(0, import_react3.useEffect)(() => {
|
|
514
551
|
apiClient.all().then((res) => {
|
|
515
552
|
const { data, meta } = res.data;
|
|
516
553
|
dispatch2(slice.actions.init({ items: data, order: meta.order }));
|