@elementor/editor-controls 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -397,28 +397,12 @@ var ColorControl = createControl(
 );
 
 // src/controls/stroke-control.tsx
-var defaultStrokeControlValue = {
-  $$type: "stroke",
-  value: {
-    color: {
-      $$type: "color",
-      value: "#000000"
-    },
-    width: {
-      $$type: "size",
-      value: {
-        unit: "px",
-        size: NaN
-      }
-    }
-  }
-};
 var units = ["px", "em", "rem"];
 var StrokeControl = createControl(() => {
-  const { value, setValue } = useBoundProp(defaultStrokeControlValue);
+  const { value, setValue } = useBoundProp();
   const setStrokeWidth = (newValue) => {
     const updatedValue = {
-      ...value?.value ?? defaultStrokeControlValue.value,
+      ...value?.value,
       width: newValue
     };
     setValue({
@@ -428,7 +412,7 @@ var StrokeControl = createControl(() => {
   };
   const setStrokeColor = (newValue) => {
     const updatedValue = {
-      ...value?.value ?? defaultStrokeControlValue.value,
+      ...value?.value,
       color: newValue
     };
     setValue({
@@ -441,7 +425,7 @@ var StrokeControl = createControl(() => {
     {
       bind: "width",
       label: __3("Stroke Width", "elementor"),
-      value: value?.value.width ?? defaultStrokeControlValue.value.width,
+      value: value?.value.width,
       setValue: setStrokeWidth
     },
     /* @__PURE__ */ React15.createElement(SizeControl, { units })
@@ -450,19 +434,13 @@ var StrokeControl = createControl(() => {
     {
       bind: "color",
       label: __3("Stroke Color", "elementor"),
-      value: value?.value.color ?? defaultStrokeControlValue.value.color,
+      value: value?.value.color,
       setValue: setStrokeColor
     },
     /* @__PURE__ */ React15.createElement(ColorControl, null)
   ));
 });
-var Control = ({
-  bind,
-  value,
-  setValue,
-  label,
-  children
-}) => /* @__PURE__ */ React15.createElement(BoundPropProvider, { bind, value, setValue }, /* @__PURE__ */ React15.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React15.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React15.createElement(ControlLabel, null, label)), /* @__PURE__ */ React15.createElement(Grid2, { item: true, xs: 6 }, children)));
+var Control = ({ bind, value, setValue, label, children }) => /* @__PURE__ */ React15.createElement(BoundPropProvider, { bind, value, setValue }, /* @__PURE__ */ React15.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React15.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React15.createElement(ControlLabel, null, label)), /* @__PURE__ */ React15.createElement(Grid2, { item: true, xs: 6 }, children)));
 
 // src/controls/box-shadow-repeater-control.tsx
 import * as React17 from "react";
@@ -853,7 +831,8 @@ import {
   styled as styled2,
   ToggleButton,
   ToggleButtonGroup,
-  Tooltip
+  Tooltip,
+  useTheme
 } from "@elementor/ui";
 var StyledToggleButtonGroup = styled2(ToggleButtonGroup)`
 	${({ justify }) => `justify-content: ${justify};`}
@@ -867,22 +846,35 @@ var ControlToggleButtonGroup = ({
   exclusive = false,
   fullWidth = false
 }) => {
+  const isRtl = "rtl" === useTheme().direction;
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  return /* @__PURE__ */ React19.createElement(StyledToggleButtonGroup, { justify, value, onChange: handleChange, exclusive }, items.map(
-    ({ label, value: buttonValue, renderContent: Content, showTooltip }) => showTooltip ? /* @__PURE__ */ React19.createElement(Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React19.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React19.createElement(Content, { size }))) : /* @__PURE__ */ React19.createElement(
-      ToggleButton,
-      {
-        key: buttonValue,
-        value: buttonValue,
-        "aria-label": label,
-        size,
-        fullWidth
-      },
-      /* @__PURE__ */ React19.createElement(Content, { size })
+  return /* @__PURE__ */ React19.createElement(
+    StyledToggleButtonGroup,
+    {
+      justify,
+      value,
+      onChange: handleChange,
+      exclusive,
+      sx: {
+        direction: isRtl ? "rtl /* @noflip */" : "ltr /* @noflip */"
+      }
+    },
+    items.map(
+      ({ label, value: buttonValue, renderContent: Content, showTooltip }) => showTooltip ? /* @__PURE__ */ React19.createElement(Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React19.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React19.createElement(Content, { size }))) : /* @__PURE__ */ React19.createElement(
+        ToggleButton,
+        {
+          key: buttonValue,
+          value: buttonValue,
+          "aria-label": label,
+          size,
+          fullWidth
+        },
+        /* @__PURE__ */ React19.createElement(Content, { size })
+      )
     )
-  ));
+  );
 };
 
 // src/controls/toggle-control.tsx
@@ -910,24 +902,38 @@ var ToggleControl = createControl(
 import * as React21 from "react";
 import { TextField as TextField4 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === void 0 || value === "" || Number.isNaN(Number(value));
-var NumberControl = createControl(({ placeholder }) => {
-  const { value, setValue } = useBoundProp();
-  const handleChange = (event) => {
-    const eventValue = event.target.value;
-    setValue(isEmptyOrNaN(eventValue) ? void 0 : Number(eventValue));
-  };
-  return /* @__PURE__ */ React21.createElement(ControlActions, null, /* @__PURE__ */ React21.createElement(
-    TextField4,
-    {
-      size: "tiny",
-      type: "number",
-      fullWidth: true,
-      value: isEmptyOrNaN(value) ? "" : value,
-      onChange: handleChange,
-      placeholder
-    }
-  ));
-});
+var NumberControl = createControl(
+  ({
+    placeholder,
+    max = Number.MAX_VALUE,
+    min = -Number.MAX_VALUE,
+    step = 1,
+    shouldForceInt = false
+  }) => {
+    const { value, setValue } = useBoundProp();
+    const handleChange = (event) => {
+      const eventValue = event.target.value;
+      if (isEmptyOrNaN(eventValue)) {
+        setValue(void 0);
+        return;
+      }
+      const formattedValue = shouldForceInt ? +parseFloat(eventValue) : Number(eventValue);
+      setValue(Math.min(Math.max(formattedValue, min), max));
+    };
+    return /* @__PURE__ */ React21.createElement(ControlActions, null, /* @__PURE__ */ React21.createElement(
+      TextField4,
+      {
+        size: "tiny",
+        type: "number",
+        fullWidth: true,
+        value: isEmptyOrNaN(value) ? "" : value,
+        onChange: handleChange,
+        placeholder,
+        inputProps: { step }
+      }
+    ));
+  }
+);
 
 // src/controls/equal-unequal-sizes-control.tsx
 import * as React22 from "react";
@@ -1301,6 +1307,7 @@ export {
   ControlActionsProvider,
   ControlLabel,
   ControlReplacementProvider,
+  ControlToggleButtonGroup,
   EqualUnequalSizesControl,
   FontFamilyControl,
   ImageControl,