@elementor/editor-variables 4.1.0-788 → 4.1.0-789

package/dist/index.mjs

@@ -4187,6 +4187,8 @@ function convertToCssVariables(variables) {
 import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from "@elementor/editor-controls";
 import {
   backgroundColorOverlayPropTypeUtil,
+  cssFilterFunctionPropUtil as cssFilterFunctionPropUtil2,
+  dropShadowFilterPropTypeUtil as dropShadowFilterPropTypeUtil2,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2,
   shadowPropTypeUtil as shadowPropTypeUtil2
 } from "@elementor/editor-props";
@@ -4194,9 +4196,13 @@ import {
 // src/components/variables-repeater-item-slot.tsx
 import * as React39 from "react";
 import {
+  cssFilterFunctionPropUtil,
+  dropShadowFilterPropTypeUtil,
   selectionSizePropTypeUtil,
   shadowPropTypeUtil
 } from "@elementor/editor-props";
+import { Box as Box9 } from "@elementor/ui";
+import { __ as __27 } from "@wordpress/i18n";
 
 // src/utils/size-value.ts
 import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
@@ -4238,23 +4244,51 @@ var BackgroundRepeaterColorIndicator = ({ value }) => {
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React39.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React39.createElement(Box9, { component: "span" }, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
   return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
 };
+var FilterDropShadowIconIndicator = ({ value }) => {
+  const { args } = cssFilterFunctionPropUtil.extract(value) || {};
+  const { color } = dropShadowFilterPropTypeUtil.extract(args) || {};
+  const colorVariable = getVariable(color?.value || "");
+  return /* @__PURE__ */ React39.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
+};
+var FilterSingleSizeRepeaterLabel = ({ value }) => {
+  const cssFilterFunction = cssFilterFunctionPropUtil.extract(value);
+  if (dropShadowFilterPropTypeUtil.isValid(cssFilterFunction?.args)) {
+    return null;
+  }
+  const args = cssFilterFunction?.args;
+  const func = cssFilterFunction?.func?.value ?? "";
+  const rendered = sizeValue(args?.value?.size);
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(Box9, { component: "span", style: { textTransform: "capitalize" } }, `${func}: `), /* @__PURE__ */ React39.createElement(Box9, { component: "span" }, rendered));
+};
+var FilterDropShadowRepeaterLabel = ({ value }) => {
+  const { args } = cssFilterFunctionPropUtil.extract(value) || {};
+  const { xAxis, yAxis, blur } = dropShadowFilterPropTypeUtil.extract(args) || {};
+  const labels = [];
+  for (const val of [xAxis, yAxis, blur]) {
+    const rendered = sizeValue(val);
+    if (rendered) {
+      labels.push(rendered);
+    }
+  }
+  return /* @__PURE__ */ React39.createElement(Box9, { component: "span" }, __27("Drop shadow:", "elementor"), " ", labels.join(" "));
+};
 var BoxShadowRepeaterLabel = ({ value }) => {
-  const shadowPropValue = shadowPropTypeUtil.extract(value) || {};
+  const { position, hOffset, vOffset, blur, spread } = shadowPropTypeUtil.extract(value) || {};
   const labels = [];
-  for (const key of ["hOffset", "vOffset", "blur", "spread"]) {
-    const rendered = sizeValue(shadowPropValue[key]);
+  for (const val of [hOffset, vOffset, blur, spread]) {
+    const rendered = sizeValue(val);
     if (rendered) {
       labels.push(rendered);
     }
   }
-  const positionLabel = shadowPropValue.position?.value || "outset";
-  return /* @__PURE__ */ React39.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", labels.join(" "));
+  const positionLabel = position?.value || "outset";
+  return /* @__PURE__ */ React39.createElement(Box9, { component: "span", style: { textTransform: "capitalize" } }, positionLabel, ": ", labels.join(" "));
 };
 var TransitionsSizeVariableLabel = ({ value: prop }) => {
   let label = "";
@@ -4267,7 +4301,7 @@ var TransitionsSizeVariableLabel = ({ value: prop }) => {
     }
     label += variable?.value;
   }
-  return /* @__PURE__ */ React39.createElement("span", null, label);
+  return /* @__PURE__ */ React39.createElement(Box9, { component: "span" }, label);
 };
 
 // src/repeater-injections.ts
@@ -4275,26 +4309,27 @@ function registerRepeaterInjections() {
   backgroundOverlayRepeaterInjections();
   boxShadowRepeaterInjections();
   transitionsRepeaterInjections();
+  filterRepeaterInjections();
 }
-var backgroundOverlayRepeaterInjections = () => {
+function backgroundOverlayRepeaterInjections() {
   injectIntoRepeaterItemIcon({
-    id: "color-variables-background-icon",
+    id: "background-color-variables-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: ({ value }) => {
       return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(value)?.color);
     }
   });
   injectIntoRepeaterItemLabel({
-    id: "color-variables-label",
+    id: "background-color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: ({ value }) => {
       return hasAssignedColorVariable(backgroundColorOverlayPropTypeUtil.extract(value)?.color);
     }
   });
-};
-var boxShadowRepeaterInjections = () => {
+}
+function boxShadowRepeaterInjections() {
   injectIntoRepeaterItemIcon({
-    id: "color-variables-box-shadow-icon",
+    id: "box-shadow-color-variables-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value }) => {
       const { color } = shadowPropTypeUtil2.extract(value) || {};
@@ -4309,8 +4344,8 @@ var boxShadowRepeaterInjections = () => {
       return hasAssignedSizeVariable(hOffset) || hasAssignedSizeVariable(vOffset) || hasAssignedSizeVariable(blur) || hasAssignedSizeVariable(spread);
     }
   });
-};
-var transitionsRepeaterInjections = () => {
+}
+function transitionsRepeaterInjections() {
   injectIntoRepeaterItemLabel({
     id: "transition-size-variables-label",
     component: TransitionsSizeVariableLabel,
@@ -4318,8 +4353,50 @@ var transitionsRepeaterInjections = () => {
       return hasAssignedSizeVariable(selectionSizePropTypeUtil2.extract(value)?.size);
     }
   });
-};
-var hasAssignedSizeVariable = (value) => {
+}
+function filterRepeaterInjections() {
+  injectIntoRepeaterItemIcon({
+    id: "filters-color-variables-icon",
+    component: FilterDropShadowIconIndicator,
+    condition: ({ value }) => {
+      if (!cssFilterFunctionPropUtil2.isValid(value)) {
+        return false;
+      }
+      const args = cssFilterFunctionPropUtil2.extract(value)?.args;
+      if (dropShadowFilterPropTypeUtil2.isValid(args)) {
+        return hasAssignedColorVariable(dropShadowFilterPropTypeUtil2.extract(args)?.color);
+      }
+      return false;
+    }
+  });
+  injectIntoRepeaterItemLabel({
+    id: "filters-drop-shadow-size-variables-label",
+    component: FilterDropShadowRepeaterLabel,
+    condition: ({ value }) => {
+      if (!cssFilterFunctionPropUtil2.isValid(value)) {
+        return false;
+      }
+      const args = cssFilterFunctionPropUtil2.extract(value)?.args;
+      if (dropShadowFilterPropTypeUtil2.isValid(args)) {
+        const { xAxis, yAxis, blur } = dropShadowFilterPropTypeUtil2.extract(args) || {};
+        return hasAssignedSizeVariable(xAxis) || hasAssignedSizeVariable(yAxis) || hasAssignedSizeVariable(blur);
+      }
+      return false;
+    }
+  });
+  injectIntoRepeaterItemLabel({
+    id: "filters-size-variables-label",
+    component: FilterSingleSizeRepeaterLabel,
+    condition: ({ value }) => {
+      if (!cssFilterFunctionPropUtil2.isValid(value)) {
+        return false;
+      }
+      const args = cssFilterFunctionPropUtil2.extract(value)?.args;
+      return hasAssignedSizeVariable(args?.value?.size);
+    }
+  });
+}
+function hasAssignedSizeVariable(value) {
   if (sizeVariablePropTypeUtil.isValid(value)) {
     return true;
   }
@@ -4327,10 +4404,10 @@ var hasAssignedSizeVariable = (value) => {
     return true;
   }
   return false;
-};
-var hasAssignedColorVariable = (value) => {
+}
+function hasAssignedColorVariable(value) {
   return !!colorVariablePropTypeUtil.isValid(value);
-};
+}
 
 // src/init.ts
 var { registerPopoverAction } = controlActionsMenu;