@elementor/editor-editing-panel 1.11.0 → 1.11.1

package/dist/index.mjs

@@ -1022,7 +1022,7 @@ var BackgroundSection = () => {
 };
 
 // src/components/style-sections/border-section/border-section.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import { Divider as Divider3, Stack as Stack6 } from "@elementor/ui";
 
 // src/components/style-sections/border-section/border-field.tsx
@@ -1153,7 +1153,7 @@ var BorderField = () => {
 };
 
 // src/components/style-sections/border-section/border-radius-field.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 import { EqualUnequalSizesControl as EqualUnequalSizesControl2 } from "@elementor/editor-controls";
 import { borderRadiusPropTypeUtil } from "@elementor/editor-props";
 import {
@@ -1163,50 +1163,103 @@ import {
   RadiusTopLeftIcon,
   RadiusTopRightIcon
 } from "@elementor/icons";
+import { withDirection } from "@elementor/ui";
 import { __ as __9 } from "@wordpress/i18n";
-var corners = [
+
+// src/hooks/use-direction.ts
+import { useTheme } from "@elementor/ui";
+function useDirection() {
+  const theme = useTheme(), extendedWindow = window;
+  const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
+  return { isSiteRtl, isUiRtl };
+}
+
+// src/components/style-sections/layout-section/utils/rotated-icon.tsx
+import * as React23 from "react";
+import { useRef } from "react";
+import { useTheme as useTheme2 } from "@elementor/ui";
+var CLOCKWISE_ANGLES = {
+  row: 0,
+  column: 90,
+  "row-reverse": 180,
+  "column-reverse": 270
+};
+var COUNTER_CLOCKWISE_ANGLES = {
+  row: 0,
+  column: -90,
+  "row-reverse": -180,
+  "column-reverse": -270
+};
+var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
+  const rotate = useRef(useGetTargetAngle(isClockwise, offset));
+  rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
+  return /* @__PURE__ */ React23.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
+};
+var useGetTargetAngle = (isClockwise, offset, existingRef) => {
+  const [direction] = useStylesField("flex-direction");
+  const isRtl = "rtl" === useTheme2().direction;
+  const rotationMultiplier = isRtl ? -1 : 1;
+  const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
+  const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
+  const targetAngle = angleMap[direction?.value || "row"] + offset;
+  const diffToTargetAngle = (targetAngle - currentAngle + 360) % 360;
+  const formattedDiff = (diffToTargetAngle + 180) % 360 - 180;
+  return (currentAngle + formattedDiff) * rotationMultiplier;
+};
+
+// src/components/style-sections/border-section/border-radius-field.tsx
+var StartStartIcon = withDirection(RadiusTopLeftIcon);
+var StartEndIcon = withDirection(RadiusTopRightIcon);
+var EndStartIcon = withDirection(RadiusBottomLeftIcon);
+var EndEndIcon = withDirection(RadiusBottomRightIcon);
+var getStartStartLabel = (isSiteRtl) => isSiteRtl ? __9("Top Right", "elementor") : __9("Top Left", "elementor");
+var getStartEndLabel = (isSiteRtl) => isSiteRtl ? __9("Top Left", "elementor") : __9("Top Right", "elementor");
+var getEndStartLabel = (isSiteRtl) => isSiteRtl ? __9("Bottom Right", "elementor") : __9("Bottom Left", "elementor");
+var getEndEndLabel = (isSiteRtl) => isSiteRtl ? __9("Bottom Left", "elementor") : __9("Bottom Right", "elementor");
+var getCorners = (isSiteRtl) => [
   {
-    label: __9("Top Left", "elementor"),
-    icon: /* @__PURE__ */ React23.createElement(RadiusTopLeftIcon, { fontSize: "tiny" }),
-    bind: "top-left"
+    label: getStartStartLabel(isSiteRtl),
+    icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: StartStartIcon, size: "tiny" }),
+    bind: "start-start"
   },
   {
-    label: __9("Top Right", "elementor"),
-    icon: /* @__PURE__ */ React23.createElement(RadiusTopRightIcon, { fontSize: "tiny" }),
-    bind: "top-right"
+    label: getStartEndLabel(isSiteRtl),
+    icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: StartEndIcon, size: "tiny" }),
+    bind: "start-end"
   },
   {
-    label: __9("Bottom Right", "elementor"),
-    icon: /* @__PURE__ */ React23.createElement(RadiusBottomRightIcon, { fontSize: "tiny" }),
-    bind: "bottom-right"
+    label: getEndEndLabel(isSiteRtl),
+    icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: EndEndIcon, size: "tiny" }),
+    bind: "end-end"
   },
   {
-    label: __9("Bottom Left", "elementor"),
-    icon: /* @__PURE__ */ React23.createElement(RadiusBottomLeftIcon, { fontSize: "tiny" }),
-    bind: "bottom-left"
+    label: getEndStartLabel(isSiteRtl),
+    icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: EndStartIcon, size: "tiny" }),
+    bind: "end-start"
   }
 ];
 var BorderRadiusField = () => {
-  return /* @__PURE__ */ React23.createElement(StylesField, { bind: "border-radius" }, /* @__PURE__ */ React23.createElement(
+  const { isSiteRtl } = useDirection();
+  return /* @__PURE__ */ React24.createElement(StylesField, { bind: "border-radius" }, /* @__PURE__ */ React24.createElement(
     EqualUnequalSizesControl2,
     {
-      items: corners,
+      items: getCorners(isSiteRtl),
       label: __9("Border Radius", "elementor"),
-      icon: /* @__PURE__ */ React23.createElement(BorderCornersIcon, { fontSize: "tiny" }),
+      icon: /* @__PURE__ */ React24.createElement(BorderCornersIcon, { fontSize: "tiny" }),
       multiSizePropTypeUtil: borderRadiusPropTypeUtil
     }
   ));
 };
 
 // src/components/style-sections/border-section/border-section.tsx
-var BorderSection = () => /* @__PURE__ */ React24.createElement(Stack6, { gap: 1.5 }, /* @__PURE__ */ React24.createElement(BorderRadiusField, null), /* @__PURE__ */ React24.createElement(Divider3, null), /* @__PURE__ */ React24.createElement(BorderField, null));
+var BorderSection = () => /* @__PURE__ */ React25.createElement(Stack6, { gap: 1.5 }, /* @__PURE__ */ React25.createElement(BorderRadiusField, null), /* @__PURE__ */ React25.createElement(Divider3, null), /* @__PURE__ */ React25.createElement(BorderField, null));
 
 // src/components/style-sections/effects-section/effects-section.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import { BoxShadowRepeaterControl } from "@elementor/editor-controls";
 import { Stack as Stack7 } from "@elementor/ui";
 var EffectsSection = () => {
-  return /* @__PURE__ */ React25.createElement(Stack7, { gap: 1.5 }, /* @__PURE__ */ React25.createElement(StylesField, { bind: "box-shadow" }, /* @__PURE__ */ React25.createElement(BoxShadowRepeaterControl, null)));
+  return /* @__PURE__ */ React26.createElement(Stack7, { gap: 1.5 }, /* @__PURE__ */ React26.createElement(StylesField, { bind: "box-shadow" }, /* @__PURE__ */ React26.createElement(BoxShadowRepeaterControl, null)));
 };
 
 // src/components/style-sections/layout-section/layout-section.tsx
@@ -1250,53 +1303,10 @@ import {
   LayoutAlignRightIcon,
   LayoutDistributeVerticalIcon as JustifyIcon
 } from "@elementor/icons";
-import { DirectionProvider, Grid as Grid3, ThemeProvider, withDirection } from "@elementor/ui";
+import { DirectionProvider, Grid as Grid3, ThemeProvider, withDirection as withDirection2 } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
-
-// src/hooks/use-direction.ts
-import { useTheme } from "@elementor/ui";
-function useDirection() {
-  const theme = useTheme(), extendedWindow = window;
-  const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
-  return { isSiteRtl, isUiRtl };
-}
-
-// src/components/style-sections/layout-section/utils/rotated-icon.tsx
-import * as React26 from "react";
-import { useRef } from "react";
-import { useTheme as useTheme2 } from "@elementor/ui";
-var CLOCKWISE_ANGLES = {
-  row: 0,
-  column: 90,
-  "row-reverse": 180,
-  "column-reverse": 270
-};
-var COUNTER_CLOCKWISE_ANGLES = {
-  row: 0,
-  column: -90,
-  "row-reverse": -180,
-  "column-reverse": -270
-};
-var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
-  const rotate = useRef(useGetTargetAngle(isClockwise, offset));
-  rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
-  return /* @__PURE__ */ React26.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
-};
-var useGetTargetAngle = (isClockwise, offset, existingRef) => {
-  const [direction] = useStylesField("flex-direction");
-  const isRtl = "rtl" === useTheme2().direction;
-  const rotationMultiplier = isRtl ? -1 : 1;
-  const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
-  const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
-  const targetAngle = angleMap[direction?.value || "row"] + offset;
-  const diffToTargetAngle = (targetAngle - currentAngle + 360) % 360;
-  const formattedDiff = (diffToTargetAngle + 180) % 360 - 180;
-  return (currentAngle + formattedDiff) * rotationMultiplier;
-};
-
-// src/components/style-sections/layout-section/align-items-field.tsx
-var StartIcon = withDirection(LayoutAlignLeftIcon);
-var EndIcon = withDirection(LayoutAlignRightIcon);
+var StartIcon = withDirection2(LayoutAlignLeftIcon);
+var EndIcon = withDirection2(LayoutAlignRightIcon);
 var iconProps = {
   isClockwise: false,
   offset: 90
@@ -1341,10 +1351,10 @@ import {
   LayoutAlignRightIcon as LayoutAlignRightIcon2,
   LayoutDistributeVerticalIcon as JustifyIcon2
 } from "@elementor/icons";
-import { DirectionProvider as DirectionProvider2, Grid as Grid4, ThemeProvider as ThemeProvider2, withDirection as withDirection2 } from "@elementor/ui";
+import { DirectionProvider as DirectionProvider2, Grid as Grid4, ThemeProvider as ThemeProvider2, withDirection as withDirection3 } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
-var StartIcon2 = withDirection2(LayoutAlignLeftIcon2);
-var EndIcon2 = withDirection2(LayoutAlignRightIcon2);
+var StartIcon2 = withDirection3(LayoutAlignLeftIcon2);
+var EndIcon2 = withDirection3(LayoutAlignRightIcon2);
 var iconProps2 = {
   isClockwise: false,
   offset: 90
@@ -1413,14 +1423,14 @@ var DisplayField = () => {
 import * as React30 from "react";
 import { ControlLabel as ControlLabel8, ToggleControl as ToggleControl4 } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
-import { DirectionProvider as DirectionProvider3, Grid as Grid5, ThemeProvider as ThemeProvider3, withDirection as withDirection3 } from "@elementor/ui";
+import { DirectionProvider as DirectionProvider3, Grid as Grid5, ThemeProvider as ThemeProvider3, withDirection as withDirection4 } from "@elementor/ui";
 import { __ as __13 } from "@wordpress/i18n";
 var options3 = [
   {
     value: "row",
     label: __13("Row", "elementor"),
     renderContent: ({ size }) => {
-      const StartIcon5 = withDirection3(ArrowRightIcon);
+      const StartIcon5 = withDirection4(ArrowRightIcon);
       return /* @__PURE__ */ React30.createElement(StartIcon5, { fontSize: size });
     },
     showTooltip: true
@@ -1435,7 +1445,7 @@ var options3 = [
     value: "row-reverse",
     label: __13("Reversed row", "elementor"),
     renderContent: ({ size }) => {
-      const EndIcon5 = withDirection3(ArrowLeftIcon);
+      const EndIcon5 = withDirection4(ArrowLeftIcon);
       return /* @__PURE__ */ React30.createElement(EndIcon5, { fontSize: size });
     },
     showTooltip: true
@@ -1634,10 +1644,10 @@ import {
   JustifySpaceBetweenVerticalIcon as BetweenIcon,
   JustifyTopIcon
 } from "@elementor/icons";
-import { DirectionProvider as DirectionProvider6, Stack as Stack12, ThemeProvider as ThemeProvider6, withDirection as withDirection4 } from "@elementor/ui";
+import { DirectionProvider as DirectionProvider6, Stack as Stack12, ThemeProvider as ThemeProvider6, withDirection as withDirection5 } from "@elementor/ui";
 import { __ as __17 } from "@wordpress/i18n";
-var StartIcon3 = withDirection4(JustifyTopIcon);
-var EndIcon3 = withDirection4(JustifyBottomIcon);
+var StartIcon3 = withDirection5(JustifyTopIcon);
+var EndIcon3 = withDirection5(JustifyBottomIcon);
 var iconProps3 = {
   isClockwise: true,
   offset: -90
@@ -1975,10 +1985,10 @@ var LineHeightField = () => {
 import * as React50 from "react";
 import { ControlLabel as ControlLabel24, ToggleControl as ToggleControl8 } from "@elementor/editor-controls";
 import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from "@elementor/icons";
-import { Grid as Grid19, withDirection as withDirection5 } from "@elementor/ui";
+import { Grid as Grid19, withDirection as withDirection6 } from "@elementor/ui";
 import { __ as __32 } from "@wordpress/i18n";
-var StartIcon4 = withDirection5(AlignLeftIcon);
-var EndIcon4 = withDirection5(AlignRightIcon);
+var StartIcon4 = withDirection6(AlignLeftIcon);
+var EndIcon4 = withDirection6(AlignRightIcon);
 var options7 = [
   {
     value: "start",
@@ -2061,7 +2071,7 @@ var initTextStroke = {
   }
 };
 var TextStrokeField = () => {
-  const [textStroke, setTextStroke] = useStylesField("-webkit-text-stroke");
+  const [textStroke, setTextStroke] = useStylesField("stroke");
   const addTextStroke = () => {
     setTextStroke(initTextStroke);
   };
@@ -2077,7 +2087,7 @@ var TextStrokeField = () => {
       onAdd: addTextStroke,
       onRemove: removeTextStroke
     },
-    /* @__PURE__ */ React53.createElement(StylesField, { bind: "-webkit-text-stroke" }, /* @__PURE__ */ React53.createElement(StrokeControl, null))
+    /* @__PURE__ */ React53.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React53.createElement(StrokeControl, null))
   );
 };