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

package/dist/index.mjs

@@ -4182,10 +4182,17 @@ function convertToCssVariables(variables) {
 
 // src/repeater-injections.ts
 import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elementor/editor-controls";
-import { backgroundColorOverlayPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
+import {
+  backgroundColorOverlayPropTypeUtil,
+  selectionSizePropTypeUtil as selectionSizePropTypeUtil2,
+  shadowPropTypeUtil
+} from "@elementor/editor-props";
 
 // src/components/variables-repeater-item-slot.tsx
 import * as React39 from "react";
+import {
+  selectionSizePropTypeUtil
+} from "@elementor/editor-props";
 var useColorVariable = (value) => {
   const variableId = value?.value?.color?.value;
   return useVariable(variableId || "");
@@ -4202,33 +4209,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 && 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
+import { createPropUtils as createPropUtils4 } from "@elementor/editor-props";
+import { z as z5 } from "@elementor/schema";
+var customSizeVariablePropTypeUtil = createPropUtils4("global-custom-size-variable", z5.string());
 
 // src/repeater-injections.ts
 function registerRepeaterInjections() {
+  backgroundOverlayRepeaterInjections();
+  boxShadowRepeaterInjections();
+  transitionsRepeaterInjections();
+}
+var backgroundOverlayRepeaterInjections = () => {
   injectIntoRepeaterItemIcon({
     id: "color-variables-background-icon",
     component: BackgroundRepeaterColorIndicator,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+    condition: ({ value }) => {
+      return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(value)?.color);
     }
   });
+  injectIntoRepeaterItemLabel({
+    id: "color-variables-label",
+    component: BackgroundRepeaterLabel,
+    condition: ({ value }) => {
+      return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(value)?.color);
+    }
+  });
+};
+var boxShadowRepeaterInjections = () => {
   injectIntoRepeaterItemIcon({
-    id: "color-variables-icon",
+    id: "color-variables-box-shadow-icon",
     component: BoxShadowRepeaterColorIndicator,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(shadowPropTypeUtil.extract(prop)?.color);
+    condition: ({ value }) => {
+      return hasAssignedColorVariable(shadowPropTypeUtil.extract(value)?.color);
     }
   });
+};
+var transitionsRepeaterInjections = () => {
   injectIntoRepeaterItemLabel({
-    id: "color-variables-label",
-    component: BackgroundRepeaterLabel,
-    condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+    id: "transition-size-variables-label",
+    component: TransitionsSizeVariableLabel,
+    condition: ({ value }) => {
+      return hasAssignedSizeVariable(selectionSizePropTypeUtil2.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