@elementor/editor-variables 4.1.0-772 → 4.1.0-774

package/dist/index.js

@@ -47,7 +47,7 @@ var import_editor = require("@elementor/editor");
 var import_editor_controls18 = require("@elementor/editor-controls");
 var import_editor_mcp = require("@elementor/editor-mcp");
 var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_props7 = require("@elementor/editor-props");
+var import_editor_props9 = require("@elementor/editor-props");
 var import_menus = require("@elementor/menus");
 
 // src/components/global-styles-import-listener.tsx
@@ -4175,10 +4175,11 @@ function convertToCssVariables(variables) {
 
 // src/repeater-injections.ts
 var import_editor_controls17 = require("@elementor/editor-controls");
-var import_editor_props6 = require("@elementor/editor-props");
+var import_editor_props8 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
 var React39 = __toESM(require("react"));
+var import_editor_props6 = require("@elementor/editor-props");
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
@@ -4195,33 +4196,76 @@ var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
   return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
+var TransitionsSizeVariableLabel = ({ value: prop }) => {
+  let label = "";
+  const variableId = prop?.value?.size?.value || "";
+  const variable = useVariable(variableId);
+  if (variable && import_editor_props6.selectionSizePropTypeUtil.isValid(prop)) {
+    const selection = prop.value?.selection?.value?.key?.value;
+    if (selection) {
+      label += `${selection}: `;
+    }
+    label += variable?.value;
+  }
+  return /* @__PURE__ */ React39.createElement("span", null, label);
+};
+
+// src/prop-types/custom-size-variable-prop-type.ts
+var import_editor_props7 = require("@elementor/editor-props");
+var import_schema5 = require("@elementor/schema");
+var customSizeVariablePropTypeUtil = (0, import_editor_props7.createPropUtils)("global-custom-size-variable", import_schema5.z.string());
 
 // src/repeater-injections.ts
 function registerRepeaterInjections() {
+  backgroundOverlayRepeaterInjections();
+  boxShadowRepeaterInjections();
+  transitionsRepeaterInjections();
+}
+var backgroundOverlayRepeaterInjections = () => {
   (0, import_editor_controls17.injectIntoRepeaterItemIcon)({
     id: "color-variables-background-icon",
     component: BackgroundRepeaterColorIndicator,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props6.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+    condition: ({ value }) => {
+      return hasAssignedColorVariable(import_editor_props8.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
     }
   });
+  (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
+    id: "color-variables-label",
+    component: BackgroundRepeaterLabel,
+    condition: ({ value }) => {
+      return hasAssignedColorVariable(import_editor_props8.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
+    }
+  });
+};
+var boxShadowRepeaterInjections = () => {
   (0, import_editor_controls17.injectIntoRepeaterItemIcon)({
-    id: "color-variables-icon",
+    id: "color-variables-box-shadow-icon",
     component: BoxShadowRepeaterColorIndicator,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props6.shadowPropTypeUtil.extract(prop)?.color);
+    condition: ({ value }) => {
+      return hasAssignedColorVariable(import_editor_props8.shadowPropTypeUtil.extract(value)?.color);
     }
   });
+};
+var transitionsRepeaterInjections = () => {
   (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
-    id: "color-variables-label",
-    component: BackgroundRepeaterLabel,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props6.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+    id: "transition-size-variables-label",
+    component: TransitionsSizeVariableLabel,
+    condition: ({ value }) => {
+      return hasAssignedSizeVariable(import_editor_props8.selectionSizePropTypeUtil.extract(value)?.size);
     }
   });
-}
-var hasAssignedColorVariable = (propValue) => {
-  return !!colorVariablePropTypeUtil.isValid(propValue);
+};
+var hasAssignedSizeVariable = (value) => {
+  if (sizeVariablePropTypeUtil.isValid(value)) {
+    return true;
+  }
+  if (customSizeVariablePropTypeUtil.isValid(value)) {
+    return true;
+  }
+  return false;
+};
+var hasAssignedColorVariable = (value) => {
+  return !!colorVariablePropTypeUtil.isValid(value);
 };
 
 // src/init.ts
@@ -4268,7 +4312,7 @@ function init() {
   (0, import_editor_panels2.__registerPanel)(panel);
 }
 function hasVariableAssigned(value) {
-  if ((0, import_editor_props7.isTransformable)(value)) {
+  if ((0, import_editor_props9.isTransformable)(value)) {
     return hasVariableType(value.$$type);
   }
   return false;