@elementor/editor-canvas 0.26.0 → 0.28.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-canvas@0.26.0 build
+> @elementor/editor-canvas@0.28.0 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-CJS dist/index.js     48.17 KB
-CJS dist/index.js.map 95.71 KB
-CJS ⚡️ Build success in 292ms
-ESM dist/index.mjs     44.83 KB
-ESM dist/index.mjs.map 95.49 KB
-ESM ⚡️ Build success in 293ms
+ESM dist/index.mjs     45.29 KB
+ESM dist/index.mjs.map 96.40 KB
+ESM ⚡️ Build success in 296ms
+CJS dist/index.js     48.63 KB
+CJS dist/index.js.map 96.63 KB
+CJS ⚡️ Build success in 302ms
 DTS Build start
-DTS ⚡️ Build success in 15187ms
+DTS ⚡️ Build success in 18542ms
 DTS dist/index.d.mts 2.42 KB
 DTS dist/index.d.ts  2.42 KB

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @elementor/editor-canvas
 
+## 0.28.0
+
+### Minor Changes
+
+- 64b3e09: Adds support for the backdrop-filter css property to atomic widgets.
+- 3904505: Adds hue rotate css filter
+- cdbd491: Add Drop Shadow filter
+
+### Patch Changes
+
+- Updated dependencies [64b3e09]
+- Updated dependencies [3904505]
+- Updated dependencies [cdbd491]
+  - @elementor/editor-props@0.18.0
+  - @elementor/editor-styles-repository@0.10.7
+  - @elementor/editor-elements@0.9.2
+  - @elementor/editor-styles@0.6.14
+  - @elementor/editor@0.21.1
+  - @elementor/editor-notifications@1.4.1
+
+## 0.27.0
+
+### Minor Changes
+
+- 068f659: Adds contrast, gray-scale, invert, sepia and saturate css filters
+
+### Patch Changes
+
+- Updated dependencies [068f659]
+- Updated dependencies [e7cca0a]
+- Updated dependencies [07ca7e9]
+  - @elementor/editor-props@0.17.0
+  - @elementor/editor-styles-repository@0.10.6
+  - @elementor/editor-elements@0.9.1
+  - @elementor/editor-styles@0.6.13
+
 ## 0.26.0
 
 ### Minor Changes

package/dist/index.js

@@ -782,16 +782,24 @@ var filterTransformer = createTransformer((filterValues) => {
   if (filterValues?.length < 1) {
     return null;
   }
-  return filterValues.map(mapToFilterFunctionString).join(" ");
+  return filterValues.filter(Boolean).map(mapToFilterFunctionString).join(" ");
 });
 var mapToFilterFunctionString = (value) => {
   if ("radius" in value) {
-    return `blur(${value.radius})`;
+    return value.radius ? `blur(${value.radius})` : "";
   }
   if ("amount" in value) {
-    return `brightness(${value.amount})`;
+    return value.amount ? `brightness(${value.amount})` : "";
   }
-  return "";
+  if ("xAxis" in value && "yAxis" in value && "blur" in value && "color" in value) {
+    const { xAxis, yAxis, blur, color } = value;
+    return `drop-shadow(${xAxis || "0px"} ${yAxis || "0px"} ${blur || "10px"} ${color || "transparent"})`;
+  }
+  const keys = Object.keys(value);
+  if (!keys[0]) {
+    return "";
+  }
+  return value[keys[0]] ? `${keys[0]}(${value[keys[0]]})` : "";
 };
 
 // src/transformers/styles/position-transformer.ts
@@ -838,7 +846,7 @@ function initStyleTransformers() {
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ propKey, key }) => `${propKey}-${key}`
     )
-  ).register("filter", filterTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", backgroundOverlayTransformer).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", positionTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register("object-position", positionTransformer).register("transform-move", transformMoveTransformer).register("transform", transformTransformer).register(
+  ).register("filter", filterTransformer).register("backdrop-filter", filterTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", backgroundOverlayTransformer).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", positionTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register("object-position", positionTransformer).register("transform-move", transformMoveTransformer).register("transform", transformTransformer).register(
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).register(