@elementor/editor-controls 3.32.0-44 → 3.32.0-46

package/dist/index.js

@@ -1787,7 +1787,12 @@ var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
     }
   ));
 });
-var ItemIcon2 = () => /* @__PURE__ */ React30.createElement(React30.Fragment, null);
+var StyledUnstableColorIndicator = (0, import_ui23.styled)(import_ui23.UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`
+}));
+var ItemIcon2 = ({ value }) => {
+  return isSingleSize(value.value.func.value ?? "") ? /* @__PURE__ */ React30.createElement(React30.Fragment, null) : /* @__PURE__ */ React30.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.args.value.color.value });
+};
 var ItemLabel2 = ({ value }) => {
   return isSingleSize(value.value.func.value ?? "") ? /* @__PURE__ */ React30.createElement(SingleSizeItemLabel, { value }) : /* @__PURE__ */ React30.createElement(DropShadowItemLabel, { value });
 };
@@ -1887,7 +1892,7 @@ var StyledToggleButton = (0, import_ui25.styled)(import_ui25.ToggleButton, {
 	${({ theme, isPlaceholder }) => isPlaceholder && `
 		color: ${theme.palette.text.tertiary};
 		background-color: ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.02)"};
-		
+
 		&:hover {
 			background-color: ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.04)"};
 		}
@@ -2305,15 +2310,23 @@ var LinkedDimensionsControl = createControl(
     isSiteRtl = false,
     extendedOptions
   }) => {
-    const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props17.sizePropTypeUtil);
+    const {
+      value: sizeValue,
+      setValue: setSizeValue,
+      disabled: sizeDisabled,
+      placeholder: sizePlaceholder
+    } = useBoundProp(import_editor_props17.sizePropTypeUtil);
     const gridRowRefs = [(0, import_react22.useRef)(null), (0, import_react22.useRef)(null)];
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
       propType,
+      placeholder: dimensionsPlaceholder,
       disabled: dimensionsDisabled
     } = useBoundProp(import_editor_props17.dimensionsPropTypeUtil);
-    const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
+    const hasUserValues = !!(dimensionsValue || sizeValue);
+    const hasPlaceholders = !!(sizePlaceholder || dimensionsPlaceholder);
+    const isLinked = !hasUserValues && !hasPlaceholders || (hasPlaceholders ? !!sizePlaceholder : !!sizeValue);
     const onLinkToggle = () => {
       if (!isLinked) {
         setSizeValue(dimensionsValue["block-start"]?.value ?? null);
@@ -2338,10 +2351,11 @@ var LinkedDimensionsControl = createControl(
         propType,
         value: dimensionsValue,
         setValue: setDimensionsValue,
+        placeholder: dimensionsPlaceholder,
         isDisabled: () => disabled
       },
       /* @__PURE__ */ React37.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React37.createElement(import_ui29.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
-        import_ui29.ToggleButton,
+        StyledToggleButton,
         {
           "aria-label": isLinked ? unlinkedLabel : linkedLabel,
           size: "tiny",
@@ -2349,7 +2363,8 @@ var LinkedDimensionsControl = createControl(
           selected: isLinked,
           sx: { marginLeft: "auto" },
           onChange: onLinkToggle,
-          disabled
+          disabled,
+          isPlaceholder: hasPlaceholders
         },
         /* @__PURE__ */ React37.createElement(LinkedIcon, { fontSize: "tiny" })
       ))),
@@ -4210,7 +4225,7 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React67.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React67.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
@@ -4229,7 +4244,7 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React67.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React67.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel3 = ({ value }) => {
   switch (value.$$type) {
@@ -4265,7 +4280,7 @@ var ImageOverlayContent = () => {
   const propContext = useBoundProp(import_editor_props31.backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React67.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React67.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var StyledUnstableColorIndicator = (0, import_ui58.styled)(import_ui58.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator2 = (0, import_ui58.styled)(import_ui58.UnstableColorIndicator)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`
 }));
 var useImage = (image) => {