@elementor/editor-interactions 4.0.0-621 → 4.0.0-manual

package/dist/index.mjs

@@ -198,16 +198,16 @@ var createConfig = ({
   replay,
   easing = "easeIn",
   relativeTo = "",
-  offsetTop = 0,
-  offsetBottom = 85
+  start = 85,
+  end = 15
 }) => ({
   $$type: "config",
   value: {
     replay: createBoolean(replay),
     easing: createString(easing),
     relativeTo: createString(relativeTo),
-    offsetTop: createSize(offsetTop, "%"),
-    offsetBottom: createSize(offsetBottom, "%")
+    start: createSize(start, "%"),
+    end: createSize(end, "%")
   }
 });
 var createSize = (value, defaultUnit, defaultValue) => {
@@ -241,8 +241,8 @@ var createAnimationPreset = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
-  offsetTop,
-  offsetBottom,
+  start,
+  end,
   customEffects
 }) => ({
   $$type: "animation-preset-props",
@@ -256,8 +256,8 @@ var createAnimationPreset = ({
       replay,
       easing,
       relativeTo,
-      offsetTop,
-      offsetBottom
+      start,
+      end
     })
   }
 });
@@ -272,8 +272,8 @@ var createInteractionItem = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
-  offsetTop,
-  offsetBottom,
+  start,
+  end,
   excludedBreakpoints,
   customEffects
 }) => ({
@@ -290,8 +290,8 @@ var createInteractionItem = ({
       replay,
       easing,
       relativeTo,
-      offsetTop,
-      offsetBottom,
+      start,
+      end,
       customEffects
     }),
     ...excludedBreakpoints && excludedBreakpoints.length > 0 && {
@@ -457,8 +457,8 @@ var DEFAULT_VALUES = {
   replay: false,
   easing: "easeIn",
   relativeTo: "viewport",
-  offsetTop: 15,
-  offsetBottom: 85
+  start: 85,
+  end: 15
 };
 var TRIGGERS_WITHOUT_REPLAY = ["load", "scrollOn", "hover", "click"];
 var controlVisibilityConfig = {
@@ -467,8 +467,8 @@ var controlVisibilityConfig = {
   effectType: (values) => values.effect !== "custom",
   direction: (values) => values.effect !== "custom",
   relativeTo: (values) => values.trigger === "scrollOn",
-  offsetTop: (values) => values.trigger === "scrollOn",
-  offsetBottom: (values) => values.trigger === "scrollOn",
+  start: (values) => values.trigger === "scrollOn",
+  end: (values) => values.trigger === "scrollOn",
   duration: (values) => {
     const isRelativeToVisible = values.trigger === "scrollOn";
     return !isRelativeToVisible;
@@ -497,11 +497,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   const replay = extractBoolean(interaction.animation.value.config?.value.replay, DEFAULT_VALUES.replay);
   const easing = extractString(interaction.animation.value.config?.value.easing, DEFAULT_VALUES.easing);
   const relativeTo = extractString(interaction.animation.value.config?.value.relativeTo, DEFAULT_VALUES.relativeTo);
-  const offsetTop = extractSize(interaction.animation.value.config?.value.offsetTop, DEFAULT_VALUES.offsetTop);
-  const offsetBottom = extractSize(
-    interaction.animation.value.config?.value.offsetBottom,
-    DEFAULT_VALUES.offsetBottom
-  );
+  const start = extractSize(interaction.animation.value.config?.value.start, DEFAULT_VALUES.start);
+  const end = extractSize(interaction.animation.value.config?.value.end, DEFAULT_VALUES.end);
   const interactionValues = {
     trigger,
     effect,
@@ -512,8 +509,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     easing,
     replay,
     relativeTo,
-    offsetTop,
-    offsetBottom,
+    start,
+    end,
     customEffects
   };
   const TriggerControl = useControlComponent("trigger", true);
@@ -523,11 +520,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     "relativeTo",
     controlVisibilityConfig.relativeTo(interactionValues)
   );
-  const OffsetTopControl = useControlComponent("offsetTop", controlVisibilityConfig.offsetTop(interactionValues));
-  const OffsetBottomControl = useControlComponent(
-    "offsetBottom",
-    controlVisibilityConfig.offsetBottom(interactionValues)
-  );
+  const StartControl = useControlComponent("start", controlVisibilityConfig.start(interactionValues));
+  const EndControl = useControlComponent("end", controlVisibilityConfig.end(interactionValues));
   const CustomEffectControl = useControlComponent(
     "customEffects",
     controlVisibilityConfig.custom(interactionValues)
@@ -560,8 +554,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         replay: updates.replay ?? replay,
         easing: updates.easing ?? easing,
         relativeTo: updates.relativeTo ?? relativeTo,
-        offsetTop: updates.offsetTop ?? offsetTop,
-        offsetBottom: updates.offsetBottom ?? offsetBottom,
+        start: updates.start ?? start,
+        end: updates.end ?? end,
         customEffects: updates.customEffects ?? customEffects
       })
     };
@@ -612,23 +606,23 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onChange: (v) => updateInteraction({ delay: v }),
       defaultValue: DEFAULT_VALUES.delay
     }
-  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, /* @__PURE__ */ React7.createElement(Field, { label: __2("Relative To", "elementor") }, /* @__PURE__ */ React7.createElement(
-    RelativeToControl,
+  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, StartControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Start", "elementor") }, /* @__PURE__ */ React7.createElement(
+    StartControl,
     {
-      value: relativeTo,
-      onChange: (v) => updateInteraction({ relativeTo: v })
+      value: parseSizeValue(start, ["%"]).size?.toString() ?? "",
+      onChange: (v) => updateInteraction({ start: v })
     }
-  )), OffsetTopControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Offset Top", "elementor") }, /* @__PURE__ */ React7.createElement(
-    OffsetTopControl,
+  )), EndControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("End", "elementor") }, /* @__PURE__ */ React7.createElement(
+    EndControl,
     {
-      value: String(parseSizeValue(offsetTop, ["%"]).size),
-      onChange: (v) => updateInteraction({ offsetTop: v })
+      value: parseSizeValue(end, ["%"]).size?.toString() ?? "",
+      onChange: (v) => updateInteraction({ end: v })
     }
-  )), OffsetBottomControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Offset Bottom", "elementor") }, /* @__PURE__ */ React7.createElement(
-    OffsetBottomControl,
+  )), /* @__PURE__ */ React7.createElement(Field, { label: __2("Relative To", "elementor") }, /* @__PURE__ */ React7.createElement(
+    RelativeToControl,
     {
-      value: String(parseSizeValue(offsetBottom, ["%"]).size),
-      onChange: (v) => updateInteraction({ offsetBottom: v })
+      value: relativeTo,
+      onChange: (v) => updateInteraction({ relativeTo: v })
     }
   ))), /* @__PURE__ */ React7.createElement(Divider, null)), EasingControl && /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, /* @__PURE__ */ React7.createElement(Field, { label: __2("Easing", "elementor") }, /* @__PURE__ */ React7.createElement(
     EasingControl,