@elementor/editor-controls 0.2.0 → 0.3.1

package/dist/index.mjs

@@ -176,9 +176,10 @@ var ImageMediaControl = createControl(() => {
 import * as React8 from "react";
 import { stringPropTypeUtil } from "@elementor/editor-props";
 import { MenuItem, Select } from "@elementor/ui";
-var SelectControl = createControl(({ options }) => {
+var SelectControl = createControl(({ options, onChange }) => {
   const { value, setValue } = useBoundProp(stringPropTypeUtil);
   const handleChange = (event) => {
+    onChange?.(event.target.value, value);
     setValue(event.target.value);
   };
   return /* @__PURE__ */ React8.createElement(ControlActions, null, /* @__PURE__ */ React8.createElement(Select, { displayEmpty: true, size: "tiny", value: value ?? "", onChange: handleChange, fullWidth: true }, options.map(({ label, ...props }) => /* @__PURE__ */ React8.createElement(MenuItem, { key: props.value, ...props }, label))));
@@ -1368,6 +1369,63 @@ var LinkControl = createControl(() => {
 var SwitchControl = ({ value, onSwitch }) => {
   return /* @__PURE__ */ React26.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React26.createElement(Grid7, { item: true }, /* @__PURE__ */ React26.createElement(ControlLabel, null, __11("Open in new tab", "elementor"))), /* @__PURE__ */ React26.createElement(Grid7, { item: true }, /* @__PURE__ */ React26.createElement(Switch, { checked: value, onChange: onSwitch })));
 };
+
+// src/controls/gap-control.tsx
+import * as React27 from "react";
+import { gapPropTypeUtil } from "@elementor/editor-props";
+import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
+import { Grid as Grid8, Stack as Stack11, ToggleButton as ToggleButton4 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
+var GapControl = createControl(({ label }) => {
+  const { value, setValue } = useBoundProp(gapPropTypeUtil);
+  const { column, row, isLinked = true } = value || {};
+  const setLinkedValue = (gap, newValue) => {
+    const updatedValue = {
+      isLinked,
+      column: isLinked ? newValue : column,
+      row: isLinked ? newValue : row,
+      [gap]: newValue
+    };
+    setValue(updatedValue);
+  };
+  const toggleLinked = () => {
+    const updatedValue = {
+      isLinked: !isLinked,
+      column,
+      row: !isLinked ? column : row
+    };
+    setValue(updatedValue);
+  };
+  const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(
+    ToggleButton4,
+    {
+      "aria-label": __12("Link Inputs", "elementor"),
+      size: "tiny",
+      value: "check",
+      selected: isLinked,
+      sx: { marginLeft: "auto" },
+      onChange: toggleLinked
+    },
+    /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React27.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __12("Column", "elementor"))), /* @__PURE__ */ React27.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    BoundPropProvider,
+    {
+      setValue: (newValue) => setLinkedValue("column", newValue),
+      value: column,
+      bind: "column"
+    },
+    /* @__PURE__ */ React27.createElement(SizeControl, null)
+  ))), /* @__PURE__ */ React27.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __12("Row", "elementor"))), /* @__PURE__ */ React27.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    BoundPropProvider,
+    {
+      setValue: (newValue) => setLinkedValue("row", newValue),
+      value: row,
+      bind: "row"
+    },
+    /* @__PURE__ */ React27.createElement(SizeControl, null)
+  )))));
+});
 export {
   BackgroundOverlayRepeaterControl,
   BoundPropProvider,
@@ -1379,6 +1437,7 @@ export {
   ControlToggleButtonGroup,
   EqualUnequalSizesControl,
   FontFamilyControl,
+  GapControl,
   ImageControl,
   LinkControl,
   LinkedDimensionsControl,