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

package/dist/index.js

@@ -4183,6 +4183,8 @@ var import_editor_props9 = require("@elementor/editor-props");
 // src/components/variables-repeater-item-slot.tsx
 var React39 = __toESM(require("react"));
 var import_editor_props8 = require("@elementor/editor-props");
+var import_ui36 = require("@elementor/ui");
+var import_i18n27 = require("@wordpress/i18n");
 
 // src/utils/size-value.ts
 var import_editor_props7 = require("@elementor/editor-props");
@@ -4224,23 +4226,51 @@ var BackgroundRepeaterColorIndicator = ({ value }) => {
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React39.createElement("span", null, colorVariable?.label);
+  return /* @__PURE__ */ React39.createElement(import_ui36.Box, { 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 } = import_editor_props8.cssFilterFunctionPropUtil.extract(value) || {};
+  const { color } = import_editor_props8.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 = import_editor_props8.cssFilterFunctionPropUtil.extract(value);
+  if (import_editor_props8.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(import_ui36.Box, { component: "span", style: { textTransform: "capitalize" } }, `${func}: `), /* @__PURE__ */ React39.createElement(import_ui36.Box, { component: "span" }, rendered));
+};
+var FilterDropShadowRepeaterLabel = ({ value }) => {
+  const { args } = import_editor_props8.cssFilterFunctionPropUtil.extract(value) || {};
+  const { xAxis, yAxis, blur } = import_editor_props8.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(import_ui36.Box, { component: "span" }, (0, import_i18n27.__)("Drop shadow:", "elementor"), " ", labels.join(" "));
+};
 var BoxShadowRepeaterLabel = ({ value }) => {
-  const shadowPropValue = import_editor_props8.shadowPropTypeUtil.extract(value) || {};
+  const { position, hOffset, vOffset, blur, spread } = import_editor_props8.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(import_ui36.Box, { component: "span", style: { textTransform: "capitalize" } }, positionLabel, ": ", labels.join(" "));
 };
 var TransitionsSizeVariableLabel = ({ value: prop }) => {
   let label = "";
@@ -4253,7 +4283,7 @@ var TransitionsSizeVariableLabel = ({ value: prop }) => {
     }
     label += variable?.value;
   }
-  return /* @__PURE__ */ React39.createElement("span", null, label);
+  return /* @__PURE__ */ React39.createElement(import_ui36.Box, { component: "span" }, label);
 };
 
 // src/repeater-injections.ts
@@ -4261,26 +4291,27 @@ function registerRepeaterInjections() {
   backgroundOverlayRepeaterInjections();
   boxShadowRepeaterInjections();
   transitionsRepeaterInjections();
+  filterRepeaterInjections();
 }
-var backgroundOverlayRepeaterInjections = () => {
+function backgroundOverlayRepeaterInjections() {
   (0, import_editor_controls17.injectIntoRepeaterItemIcon)({
-    id: "color-variables-background-icon",
+    id: "background-color-variables-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: ({ value }) => {
       return hasAssignedColorVariable(import_editor_props9.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
     }
   });
   (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
-    id: "color-variables-label",
+    id: "background-color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: ({ value }) => {
       return hasAssignedColorVariable(import_editor_props9.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
     }
   });
-};
-var boxShadowRepeaterInjections = () => {
+}
+function boxShadowRepeaterInjections() {
   (0, import_editor_controls17.injectIntoRepeaterItemIcon)({
-    id: "color-variables-box-shadow-icon",
+    id: "box-shadow-color-variables-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value }) => {
       const { color } = import_editor_props9.shadowPropTypeUtil.extract(value) || {};
@@ -4295,8 +4326,8 @@ var boxShadowRepeaterInjections = () => {
       return hasAssignedSizeVariable(hOffset) || hasAssignedSizeVariable(vOffset) || hasAssignedSizeVariable(blur) || hasAssignedSizeVariable(spread);
     }
   });
-};
-var transitionsRepeaterInjections = () => {
+}
+function transitionsRepeaterInjections() {
   (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
     id: "transition-size-variables-label",
     component: TransitionsSizeVariableLabel,
@@ -4304,8 +4335,50 @@ var transitionsRepeaterInjections = () => {
       return hasAssignedSizeVariable(import_editor_props9.selectionSizePropTypeUtil.extract(value)?.size);
     }
   });
-};
-var hasAssignedSizeVariable = (value) => {
+}
+function filterRepeaterInjections() {
+  (0, import_editor_controls17.injectIntoRepeaterItemIcon)({
+    id: "filters-color-variables-icon",
+    component: FilterDropShadowIconIndicator,
+    condition: ({ value }) => {
+      if (!import_editor_props9.cssFilterFunctionPropUtil.isValid(value)) {
+        return false;
+      }
+      const args = import_editor_props9.cssFilterFunctionPropUtil.extract(value)?.args;
+      if (import_editor_props9.dropShadowFilterPropTypeUtil.isValid(args)) {
+        return hasAssignedColorVariable(import_editor_props9.dropShadowFilterPropTypeUtil.extract(args)?.color);
+      }
+      return false;
+    }
+  });
+  (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
+    id: "filters-drop-shadow-size-variables-label",
+    component: FilterDropShadowRepeaterLabel,
+    condition: ({ value }) => {
+      if (!import_editor_props9.cssFilterFunctionPropUtil.isValid(value)) {
+        return false;
+      }
+      const args = import_editor_props9.cssFilterFunctionPropUtil.extract(value)?.args;
+      if (import_editor_props9.dropShadowFilterPropTypeUtil.isValid(args)) {
+        const { xAxis, yAxis, blur } = import_editor_props9.dropShadowFilterPropTypeUtil.extract(args) || {};
+        return hasAssignedSizeVariable(xAxis) || hasAssignedSizeVariable(yAxis) || hasAssignedSizeVariable(blur);
+      }
+      return false;
+    }
+  });
+  (0, import_editor_controls17.injectIntoRepeaterItemLabel)({
+    id: "filters-size-variables-label",
+    component: FilterSingleSizeRepeaterLabel,
+    condition: ({ value }) => {
+      if (!import_editor_props9.cssFilterFunctionPropUtil.isValid(value)) {
+        return false;
+      }
+      const args = import_editor_props9.cssFilterFunctionPropUtil.extract(value)?.args;
+      return hasAssignedSizeVariable(args?.value?.size);
+    }
+  });
+}
+function hasAssignedSizeVariable(value) {
   if (sizeVariablePropTypeUtil.isValid(value)) {
     return true;
   }
@@ -4313,10 +4386,10 @@ var hasAssignedSizeVariable = (value) => {
     return true;
   }
   return false;
-};
-var hasAssignedColorVariable = (value) => {
+}
+function hasAssignedColorVariable(value) {
   return !!colorVariablePropTypeUtil.isValid(value);
-};
+}
 
 // src/init.ts
 var { registerPopoverAction } = import_menus.controlActionsMenu;