@elementor/editor-global-classes 0.9.1 → 0.11.0

package/dist/index.js

@@ -27,19 +27,21 @@ var import_editor = require("@elementor/editor");
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_store16 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
-var React7 = __toESM(require("react"));
-var import_icons6 = require("@elementor/icons");
+var React8 = __toESM(require("react"));
+var import_editor_documents = require("@elementor/editor-documents");
 var import_ui7 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/class-manager/class-manager-panel.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
+var import_react4 = require("react");
 var import_editor_panels = require("@elementor/editor-panels");
-var import_icons5 = require("@elementor/icons");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_icons6 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
 
@@ -84,8 +86,8 @@ var slice = (0, import_store.__createSlice)({
       state.isDirty = true;
     },
     delete(state, { payload }) {
-      state.items = Object.fromEntries(Object.entries(state.items).filter(([id]) => id !== payload));
-      state.order = state.order.filter((id) => id !== payload);
+      state.items = Object.fromEntries(Object.entries(state.items).filter(([id2]) => id2 !== payload));
+      state.order = state.order.filter((id2) => id2 !== payload);
       state.isDirty = true;
     },
     setOrder(state, { payload }) {
@@ -126,9 +128,9 @@ var selectGlobalClasses = (state) => state[SLICE_NAME].items;
 var selectOrderedClasses = (0, import_store.__createSelector)(
   selectGlobalClasses,
   selectOrder,
-  (items, order) => order.map((id) => items[id])
+  (items, order) => order.map((id2) => items[id2])
 );
-var selectClass = (state, id) => state[SLICE_NAME].items[id] ?? null;
+var selectClass = (state, id2) => state[SLICE_NAME].items[id2] ?? null;
 var selectIsDirty = (state) => state.globalClasses.isDirty;
 
 // src/hooks/use-dirty-state.ts
@@ -170,7 +172,7 @@ var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
-var MESSAGE_KEY = "global-class-manager-4";
+var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
   const [shouldShowIntroduction, setShouldShowIntroduction] = (0, import_react.useState)(!isMessageSuppressed);
@@ -199,11 +201,16 @@ var IntroductionContent = () => {
   ))));
 };
 
+// src/components/class-manager/flipped-color-swatch-icon.tsx
+var React2 = __toESM(require("react"));
+var import_icons = require("@elementor/icons");
+var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.createElement(import_icons.ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
+
 // src/components/class-manager/global-classes-list.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_icons3 = require("@elementor/icons");
+var import_icons4 = require("@elementor/icons");
 var import_ui4 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 
@@ -216,7 +223,7 @@ var globalClassesStylesProvider = {
   priority: 30,
   actions: {
     get: () => selectOrderedClasses((0, import_store6.__getState)()),
-    getById: (id) => selectClass((0, import_store6.__getState)(), id),
+    getById: (id2) => selectClass((0, import_store6.__getState)(), id2),
     create: (label) => {
       const classes = selectGlobalClasses((0, import_store6.__getState)());
       const existingLabels = Object.values(classes).map((style) => style.label);
@@ -224,16 +231,16 @@ var globalClassesStylesProvider = {
         throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
       }
       const existingIds = Object.keys(classes);
-      const id = (0, import_editor_styles2.generateId)("g-", existingIds);
+      const id2 = (0, import_editor_styles2.generateId)("g-", existingIds);
       (0, import_store6.__dispatch)(
         slice.actions.add({
-          id,
+          id: id2,
           type: "class",
           label,
           variants: []
         })
       );
-      return id;
+      return id2;
     },
     update: (payload) => {
       (0, import_store6.__dispatch)(
@@ -242,8 +249,8 @@ var globalClassesStylesProvider = {
         })
       );
     },
-    delete: (id) => {
-      (0, import_store6.__dispatch)(slice.actions.delete(id));
+    delete: (id2) => {
+      (0, import_store6.__dispatch)(slice.actions.delete(id2));
     },
     setOrder: (order) => {
       (0, import_store6.__dispatch)(slice.actions.setOrder(order));
@@ -261,7 +268,7 @@ var globalClassesStylesProvider = {
   subscribe: (cb) => (0, import_store6.__subscribeWithSelector)((state) => state.globalClasses, cb),
   labels: {
     singular: (0, import_i18n2.__)("Global class", "elementor"),
-    plural: (0, import_i18n2.__)("Global CSS Classes", "elementor")
+    plural: (0, import_i18n2.__)("Global CSS classes", "elementor")
   }
 };
 
@@ -278,9 +285,9 @@ var useOrderedClasses = () => {
 };
 
 // src/components/class-manager/delete-confirmation-dialog.tsx
-var React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_react2 = require("react");
-var import_icons = require("@elementor/icons");
+var import_icons2 = require("@elementor/icons");
 var import_ui2 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
 var context = (0, import_react2.createContext)(null);
@@ -292,19 +299,19 @@ var DeleteConfirmationProvider = ({ children }) => {
   const closeDialog = () => {
     setDialogProps(null);
   };
-  return /* @__PURE__ */ React2.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React2.createElement(DeleteConfirmationDialog, { ...dialogProps }));
+  return /* @__PURE__ */ React3.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React3.createElement(DeleteConfirmationDialog, { ...dialogProps }));
 };
 var TITLE_ID = "delete-class-dialog";
-var DeleteConfirmationDialog = ({ label, id }) => {
+var DeleteConfirmationDialog = ({ label, id: id2 }) => {
   const { closeDialog } = useDeleteConfirmation();
   const onConfirm = () => {
-    globalClassesStylesProvider.actions.delete(id);
+    globalClassesStylesProvider.actions.delete(id2);
     closeDialog();
   };
-  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.__)(
+  return /* @__PURE__ */ React3.createElement(import_ui2.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(import_ui2.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n3.__)("Delete global class", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.DialogContent, null, /* @__PURE__ */ React3.createElement(import_ui2.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n3.__)("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n3.__)(
     "will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
-  ))), /* @__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"))));
+  ))), /* @__PURE__ */ React3.createElement(import_ui2.DialogActions, null, /* @__PURE__ */ React3.createElement(import_ui2.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n3.__)("Cancel", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n3.__)("Delete", "elementor"))));
 };
 var useDeleteConfirmation = () => {
   const contextValue = (0, import_react2.useContext)(context);
@@ -315,16 +322,17 @@ var useDeleteConfirmation = () => {
 };
 
 // src/components/class-manager/sortable.tsx
-var React3 = __toESM(require("react"));
-var import_icons2 = require("@elementor/icons");
+var React4 = __toESM(require("react"));
+var import_icons3 = require("@elementor/icons");
 var import_ui3 = require("@elementor/ui");
-var SortableProvider = (props) => /* @__PURE__ */ React3.createElement(import_ui3.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = (props) => /* @__PURE__ */ React3.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React3.createElement(import_icons2.GripVerticalIcon, { fontSize: "tiny" }));
-var SortableItem = ({ children, id }) => {
-  return /* @__PURE__ */ React3.createElement(
+var SortableProvider = (props) => /* @__PURE__ */ React4.createElement(import_ui3.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = (props) => /* @__PURE__ */ React4.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React4.createElement(import_icons3.GripVerticalIcon, { fontSize: "tiny" }));
+var SortableItem = ({ children, id: id2, ...props }) => {
+  return /* @__PURE__ */ React4.createElement(
     import_ui3.UnstableSortableItem,
     {
-      id,
+      ...props,
+      id: id2,
       render: ({
         itemProps,
         isDragged,
@@ -332,22 +340,35 @@ var SortableItem = ({ children, id }) => {
         itemStyle,
         triggerStyle,
         dropIndicationStyle,
-        showDropIndication
+        showDropIndication,
+        isDragOverlay,
+        isDragPlaceholder
       }) => {
-        return /* @__PURE__ */ React3.createElement(StyledSortableItem, { ...itemProps, elevation: 0, sx: itemStyle, role: "listitem" }, /* @__PURE__ */ React3.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children({
-          itemProps,
-          isDragged,
-          triggerProps,
-          itemStyle,
-          triggerStyle,
-          dropIndicationStyle,
-          showDropIndication
-        }));
+        return /* @__PURE__ */ React4.createElement(
+          StyledSortableItem,
+          {
+            ...itemProps,
+            sx: itemStyle,
+            role: "listitem",
+            ...isDragOverlay ? { component: import_ui3.Paper, elevation: 0 } : {}
+          },
+          /* @__PURE__ */ React4.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }),
+          children({
+            itemProps,
+            isDragged,
+            triggerProps,
+            itemStyle,
+            triggerStyle,
+            dropIndicationStyle,
+            showDropIndication,
+            isDragPlaceholder
+          })
+        );
       }
     }
   );
 };
-var StyledSortableItem = (0, import_ui3.styled)(import_ui3.Paper)`
+var StyledSortableItem = (0, import_ui3.styled)(import_ui3.Box)`
 	position: relative;
 
 	&:hover {
@@ -376,21 +397,22 @@ var GlobalClassesList = () => {
   const cssClasses = useOrderedClasses();
   const [classesOrder, reorderClasses] = useReorder();
   if (!cssClasses?.length) {
-    return /* @__PURE__ */ React4.createElement(EmptyState, null);
+    return /* @__PURE__ */ React5.createElement(EmptyState, null);
   }
-  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 }) => {
+  return /* @__PURE__ */ React5.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React5.createElement(import_ui4.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, cssClasses?.map(({ id: id2, label }) => {
     const renameClass = (newLabel) => {
-      globalClassesStylesProvider.actions.update({ label: newLabel, id });
+      globalClassesStylesProvider.actions.update({ label: newLabel, id: id2 });
     };
-    return /* @__PURE__ */ React4.createElement(SortableItem, { key: id, id }, ({ isDragged, showDropIndication, dropIndicationStyle }) => /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React5.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, showDropIndication, dropIndicationStyle, isDragPlaceholder }) => /* @__PURE__ */ React5.createElement(
       ClassItem,
       {
-        id,
+        id: id2,
         label,
         renameClass,
-        selected: isDragged
+        selected: isDragged,
+        disabled: isDragPlaceholder
       },
-      showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+      showDropIndication && /* @__PURE__ */ React5.createElement(SortableItemIndicator, { style: dropIndicationStyle })
     ));
   }))));
 };
@@ -402,11 +424,12 @@ var useReorder = () => {
   return [order, reorder];
 };
 var ClassItem = ({
-  id,
+  id: id2,
   label,
   renameClass,
   selected,
-  children
+  children,
+  disabled
 }) => {
   const {
     ref: editableRef,
@@ -424,23 +447,23 @@ var ClassItem = ({
     variant: "popover",
     disableAutoFocus: true
   });
-  return /* @__PURE__ */ React4.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", gap: 1, flexGrow: 1, flexShrink: 0 }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", gap: 1, flexGrow: 1, flexShrink: 0 }, /* @__PURE__ */ React5.createElement(
     StyledListItem,
     {
       component: "div",
       disablePadding: true,
       disableGutters: true,
-      secondaryAction: /* @__PURE__ */ React4.createElement(
+      secondaryAction: /* @__PURE__ */ React5.createElement(
         import_ui4.Tooltip,
         {
           placement: "top",
           className: "class-item-more-actions",
           title: (0, import_i18n4.__)("More actions", "elementor")
         },
-        /* @__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" }))
+        /* @__PURE__ */ React5.createElement(import_ui4.IconButton, { size: "tiny", ...(0, import_ui4.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" }))
       )
     },
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       import_ui4.ListItemButton,
       {
         dense: true,
@@ -448,6 +471,7 @@ var ClassItem = ({
         shape: "rounded",
         onDoubleClick: openEditMode,
         selected: selected || popupState.isOpen,
+        disabled,
         focusVisibleClassName: "visible-class-item",
         sx: {
           minHeight: "36px",
@@ -457,7 +481,7 @@ var ClassItem = ({
           }
         }
       },
-      /* @__PURE__ */ React4.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ React5.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React5.createElement(
         import_editor_ui2.EditableField,
         {
           ref: editableRef,
@@ -466,10 +490,10 @@ var ClassItem = ({
           variant: "caption",
           ...getEditableProps()
         }
-      ) : /* @__PURE__ */ React4.createElement(import_editor_ui2.EllipsisWithTooltip, { title: label, as: import_ui4.Typography, variant: "caption" }))
+      ) : /* @__PURE__ */ React5.createElement(import_editor_ui2.EllipsisWithTooltip, { title: label, as: import_ui4.Typography, variant: "caption" }))
     ),
     children,
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       import_ui4.Menu,
       {
         ...(0, import_ui4.bindMenu)(popupState),
@@ -482,7 +506,7 @@ var ClassItem = ({
           horizontal: "right"
         }
       },
-      /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ React5.createElement(
         import_ui4.MenuItem,
         {
           sx: { minWidth: "160px" },
@@ -491,17 +515,17 @@ var ClassItem = ({
             openEditMode();
           }
         },
-        /* @__PURE__ */ React4.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Rename", "elementor") })
+        /* @__PURE__ */ React5.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Rename", "elementor") })
       ),
-      /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ React5.createElement(
         import_ui4.MenuItem,
         {
           onClick: () => {
             popupState.close();
-            openDialog({ id, label });
+            openDialog({ id: id2, label });
           }
         },
-        /* @__PURE__ */ React4.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Delete", "elementor"), sx: { color: "error.light" } })
+        /* @__PURE__ */ React5.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Delete", "elementor"), sx: { color: "error.light" } })
       )
     )
   ));
@@ -516,7 +540,7 @@ var StyledListItem = (0, import_ui4.styled)(import_ui4.ListItem)`
 		}
 	}
 `;
-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.__)(
+var EmptyState = () => /* @__PURE__ */ React5.createElement(import_ui4.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React5.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React5.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n4.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n4.__)(
   "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.",
   "elementor"
 )));
@@ -555,22 +579,30 @@ var validateLabel = (newLabel) => {
   return null;
 };
 
-// src/components/class-manager/unsaved-changes-dialog.tsx
-var React5 = __toESM(require("react"));
+// src/components/class-manager/save-changes-dialog.tsx
+var React6 = __toESM(require("react"));
 var import_react3 = require("react");
-var import_icons4 = require("@elementor/icons");
+var import_icons5 = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
-var TITLE_ID2 = "unsaved-changes-dialog";
-var UnsavedChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React5.createElement(import_ui5.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var UnsavedChangesDialogTitle = ({ children }) => /* @__PURE__ */ React5.createElement(import_ui5.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React5.createElement(import_icons4.AlertTriangleFilledIcon, { color: "secondary" }), children);
-var UnsavedChangesDialogContent = ({ children }) => /* @__PURE__ */ React5.createElement(import_ui5.DialogContent, null, /* @__PURE__ */ React5.createElement(import_ui5.DialogContentText, { variant: "body2", color: "textPrimary" }, children));
-var UnsavedChangesDialogActions = ({ actions }) => {
+var TITLE_ID2 = "save-changes-dialog";
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React6.createElement(import_ui5.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React6.createElement(import_ui5.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React6.createElement(import_icons5.AlertTriangleFilledIcon, { color: "secondary" }), children);
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React6.createElement(import_ui5.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React6.createElement(import_ui5.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogActions = ({ actions }) => {
+  const [isConfirming, setIsConfirming] = (0, import_react3.useState)(false);
   const { cancel, confirm } = actions;
-  return /* @__PURE__ */ React5.createElement(import_ui5.DialogActions, null, /* @__PURE__ */ React5.createElement(import_ui5.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), /* @__PURE__ */ React5.createElement(import_ui5.Button, { variant: "contained", color: "secondary", onClick: confirm.action }, confirm.label));
+  const onConfirm = async () => {
+    setIsConfirming(true);
+    await confirm.action();
+    setIsConfirming(false);
+  };
+  return /* @__PURE__ */ React6.createElement(import_ui5.DialogActions, null, /* @__PURE__ */ React6.createElement(import_ui5.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), /* @__PURE__ */ React6.createElement(import_ui5.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
-UnsavedChangesDialog.Title = UnsavedChangesDialogTitle;
-UnsavedChangesDialog.Content = UnsavedChangesDialogContent;
-UnsavedChangesDialog.Actions = UnsavedChangesDialogActions;
+SaveChangesDialog.Title = SaveChangesDialogTitle;
+SaveChangesDialog.Content = SaveChangesDialogContent;
+SaveChangesDialog.ContentText = SaveChangesDialogContentText;
+SaveChangesDialog.Actions = SaveChangesDialogActions;
 var useDialog = () => {
   const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
   const open = () => setIsOpen(true);
@@ -579,31 +611,32 @@ var useDialog = () => {
 };
 
 // src/components/class-manager/class-manager-panel.tsx
+var id = "global-classes-manager";
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
-  id: "class-manager-panel",
-  component: ClassManagerPanel
+  id,
+  component: ClassManagerPanel,
+  onOpen: () => (0, import_editor_v1_adapters.changeEditMode)(id),
+  onClose: () => (0, import_editor_v1_adapters.changeEditMode)("edit"),
+  allowedEditModes: ["edit", id]
 });
 function ClassManagerPanel() {
   const isDirty3 = useDirtyState();
   const { close: closePanel } = usePanelActions();
-  const {
-    open: openUnsavedChangesDialog,
-    close: closeUnsavedChangesDialog,
-    isOpen: isUnsavedChangesDialogOpen
-  } = useDialog();
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React6.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React6.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React6.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React6.createElement(import_icons5.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n5.__)("CSS Class manager", "elementor")), /* @__PURE__ */ React6.createElement(
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  usePreventUnload();
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("CSS Class manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
       onClose: () => {
         if (isDirty3) {
-          openUnsavedChangesDialog();
+          openSaveChangesDialog();
           return;
         }
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React6.createElement(GlobalClassesList, null)), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React6.createElement(
+  ))), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React7.createElement(GlobalClassesList, null)), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React7.createElement(
     import_ui6.Button,
     {
       fullWidth: true,
@@ -614,19 +647,19 @@ function ClassManagerPanel() {
       onClick: publishGlobalClasses
     },
     (0, import_i18n5.__)("Save changes", "elementor")
-  )))), /* @__PURE__ */ React6.createElement(ClassManagerIntroduction, null), isUnsavedChangesDialogOpen && /* @__PURE__ */ React6.createElement(UnsavedChangesDialog, null, /* @__PURE__ */ React6.createElement(UnsavedChangesDialog.Title, null, (0, import_i18n5.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React6.createElement(UnsavedChangesDialog.Content, null, (0, import_i18n5.__)("You have unsaved changes in the Class Manager.", "elementor"), /* @__PURE__ */ React6.createElement("br", null), (0, import_i18n5.__)("To avoid losing your updates, save your changes before leaving.", "elementor")), /* @__PURE__ */ React6.createElement(
-    UnsavedChangesDialog.Actions,
+  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, (0, import_i18n5.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n5.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n5.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
+    SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
           label: (0, import_i18n5.__)("Cancel", "elementor"),
-          action: closeUnsavedChangesDialog
+          action: closeSaveChangesDialog
         },
         confirm: {
           label: (0, import_i18n5.__)("Save & Continue", "elementor"),
-          action: () => {
-            publishGlobalClasses();
-            closeUnsavedChangesDialog();
+          action: async () => {
+            await publishGlobalClasses();
+            closeSaveChangesDialog();
             closePanel();
           }
         }
@@ -634,21 +667,66 @@ function ClassManagerPanel() {
     }
   )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React6.createElement(import_icons5.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React6.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React6.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React6.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(import_ui6.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(import_icons6.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
+var usePreventUnload = () => {
+  const isDirty3 = useDirtyState();
+  (0, import_react4.useEffect)(() => {
+    const handleBeforeUnload = (event) => {
+      if (isDirty3) {
+        event.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [isDirty3]);
+};
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
-  const { open } = usePanelActions();
-  return /* @__PURE__ */ React7.createElement(import_ui7.Tooltip, { title: (0, import_i18n6.__)("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(import_ui7.IconButton, { onClick: open }, /* @__PURE__ */ React7.createElement(import_icons6.ColorSwatchIcon, { fontSize: "tiny" })));
+  const document = (0, import_editor_documents.__useActiveDocument)();
+  const { open: openPanel } = usePanelActions();
+  const { save: saveDocument } = (0, import_editor_documents.__useActiveDocumentActions)();
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const handleOpenPanel = () => {
+    if (document?.isDirty) {
+      openSaveChangesDialog();
+      return;
+    }
+    openPanel();
+  };
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui7.Tooltip, { title: (0, import_i18n6.__)("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(import_ui7.IconButton, { onClick: handleOpenPanel }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, (0, import_i18n6.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n6.__)(
+    "Save your changes before moving to the class manager to ensure all updates are applied and saved.",
+    "elementor"
+  )), /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n6.__)("If you leave without saving, all changes will be discarded.", "elementor"))), /* @__PURE__ */ React8.createElement(
+    SaveChangesDialog.Actions,
+    {
+      actions: {
+        cancel: {
+          label: (0, import_i18n6.__)("Keep editing", "elementor"),
+          action: closeSaveChangesDialog
+        },
+        confirm: {
+          label: (0, import_i18n6.__)("Save & Continue", "elementor"),
+          action: async () => {
+            await saveDocument();
+            closeSaveChangesDialog();
+            openPanel();
+          }
+        }
+      }
+    }
+  )));
 };
 
 // src/components/populate-store.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_store12 = require("@elementor/store");
 function PopulateStore() {
   const dispatch3 = (0, import_store12.__useDispatch)();
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     apiClient.all().then((res) => {
       const { data, meta } = res.data;
       dispatch3(slice.actions.init({ items: data, order: meta.order }));
@@ -658,7 +736,7 @@ function PopulateStore() {
 }
 
 // src/sync-with-document-save.ts
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_store14 = require("@elementor/store");
 function syncWithDocumentSave() {
   const unsubscribe = syncDirtyState();
@@ -670,11 +748,11 @@ function syncDirtyState() {
     if (!isDirty2()) {
       return;
     }
-    (0, import_editor_v1_adapters.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
+    (0, import_editor_v1_adapters2.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
   });
 }
 function bindSaveAction() {
-  (0, import_editor_v1_adapters.registerDataHook)("after", "document/save/save", publishGlobalClasses);
+  (0, import_editor_v1_adapters2.registerDataHook)("after", "document/save/save", publishGlobalClasses);
 }
 function isDirty2() {
   return selectIsDirty((0, import_store14.__getState)());
@@ -693,7 +771,7 @@ function init() {
     id: "global-classes-manager-button",
     component: ClassManagerButton
   });
-  (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.v1ReadyEvent)(), () => {
     syncWithDocumentSave();
   });
 }