@elementor/editor-controls 0.20.0 → 0.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +294 -260
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +225 -191
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/components/control-form-label.tsx +6 -0
- package/src/components/control-label.tsx +12 -3
- package/src/components/repeater.tsx +9 -2
- package/src/controls/background-control/background-control.tsx +2 -2
- package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx +2 -2
- package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx +2 -2
- package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx +2 -2
- package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx +2 -2
- package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +18 -4
- package/src/controls/color-control.tsx +1 -1
- package/src/controls/equal-unequal-sizes-control.tsx +2 -1
- package/src/controls/gap-control.tsx +3 -2
- package/src/controls/image-control.tsx +3 -3
- package/src/controls/link-control.tsx +4 -4
- package/src/controls/linked-dimensions-control.tsx +7 -6
- package/src/controls/stroke-control.tsx +2 -2
- package/src/controls/svg-media-control.tsx +2 -2
- package/src/index.ts +2 -1
- package/src/control-adornments/control-label-with-adornments.tsx +0 -15
package/dist/index.js
CHANGED
|
@@ -36,7 +36,7 @@ __export(index_exports, {
|
|
|
36
36
|
ControlActionsProvider: () => ControlActionsProvider,
|
|
37
37
|
ControlAdornments: () => ControlAdornments,
|
|
38
38
|
ControlAdornmentsProvider: () => ControlAdornmentsProvider,
|
|
39
|
-
|
|
39
|
+
ControlFormLabel: () => ControlFormLabel,
|
|
40
40
|
ControlReplacementProvider: () => ControlReplacementProvider,
|
|
41
41
|
ControlToggleButtonGroup: () => ControlToggleButtonGroup,
|
|
42
42
|
EqualUnequalSizesControl: () => EqualUnequalSizesControl,
|
|
@@ -218,10 +218,10 @@ var resolveUnionPropType = (propType, key) => {
|
|
|
218
218
|
return resolvedPropType;
|
|
219
219
|
};
|
|
220
220
|
|
|
221
|
-
// src/components/control-label.tsx
|
|
221
|
+
// src/components/control-form-label.tsx
|
|
222
222
|
var React3 = __toESM(require("react"));
|
|
223
223
|
var import_ui = require("@elementor/ui");
|
|
224
|
-
var
|
|
224
|
+
var ControlFormLabel = ({ children }) => {
|
|
225
225
|
return /* @__PURE__ */ React3.createElement(import_ui.FormLabel, { size: "tiny" }, children);
|
|
226
226
|
};
|
|
227
227
|
|
|
@@ -428,7 +428,7 @@ var ImageControl = createControl(
|
|
|
428
428
|
const propContext = useBoundProp(import_editor_props3.imagePropTypeUtil);
|
|
429
429
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
430
430
|
const mediaTypes = allowSvgUpload ? ["image", "svg"] : ["image"];
|
|
431
|
-
return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(
|
|
431
|
+
return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, " ", (0, import_i18n2.__)("Image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes })), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }))))));
|
|
432
432
|
}
|
|
433
433
|
);
|
|
434
434
|
|
|
@@ -672,7 +672,7 @@ var import_ui12 = require("@elementor/ui");
|
|
|
672
672
|
var ColorControl = createControl(({ propTypeUtil = import_editor_props7.colorPropTypeUtil, ...props }) => {
|
|
673
673
|
const { value, setValue } = useBoundProp(propTypeUtil);
|
|
674
674
|
const handleChange = (selectedColor) => {
|
|
675
|
-
setValue(selectedColor);
|
|
675
|
+
setValue(selectedColor || null);
|
|
676
676
|
};
|
|
677
677
|
return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(import_ui12.UnstableColorField, { size: "tiny", ...props, value: value ?? "", onChange: handleChange, fullWidth: true }));
|
|
678
678
|
});
|
|
@@ -683,10 +683,10 @@ var StrokeControl = createControl(() => {
|
|
|
683
683
|
const propContext = useBoundProp(import_editor_props8.strokePropTypeUtil);
|
|
684
684
|
return /* @__PURE__ */ React17.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React17.createElement(SectionContent, null, /* @__PURE__ */ React17.createElement(Control, { bind: "width", label: (0, import_i18n3.__)("Stroke width", "elementor") }, /* @__PURE__ */ React17.createElement(SizeControl, { units })), /* @__PURE__ */ React17.createElement(Control, { bind: "color", label: (0, import_i18n3.__)("Stroke color", "elementor") }, /* @__PURE__ */ React17.createElement(ColorControl, null))));
|
|
685
685
|
});
|
|
686
|
-
var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(
|
|
686
|
+
var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, children)));
|
|
687
687
|
|
|
688
688
|
// src/controls/box-shadow-repeater-control.tsx
|
|
689
|
-
var
|
|
689
|
+
var React24 = __toESM(require("react"));
|
|
690
690
|
var import_editor_props9 = require("@elementor/editor-props");
|
|
691
691
|
var import_ui18 = require("@elementor/ui");
|
|
692
692
|
var import_i18n5 = require("@wordpress/i18n");
|
|
@@ -707,21 +707,43 @@ var PopoverGridContainer = ({
|
|
|
707
707
|
}) => /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap, alignItems, flexWrap }, children);
|
|
708
708
|
|
|
709
709
|
// src/components/repeater.tsx
|
|
710
|
-
var
|
|
711
|
-
var
|
|
710
|
+
var React23 = __toESM(require("react"));
|
|
711
|
+
var import_react8 = require("react");
|
|
712
712
|
var import_icons3 = require("@elementor/icons");
|
|
713
713
|
var import_ui17 = require("@elementor/ui");
|
|
714
714
|
var import_i18n4 = require("@wordpress/i18n");
|
|
715
715
|
|
|
716
|
-
// src/
|
|
716
|
+
// src/control-adornments/control-adornments.tsx
|
|
717
|
+
var React21 = __toESM(require("react"));
|
|
718
|
+
|
|
719
|
+
// src/control-adornments/control-adornments-context.tsx
|
|
717
720
|
var React20 = __toESM(require("react"));
|
|
721
|
+
var import_react7 = require("react");
|
|
722
|
+
var Context2 = (0, import_react7.createContext)(null);
|
|
723
|
+
var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React20.createElement(Context2.Provider, { value: { items } }, children);
|
|
724
|
+
var useControlAdornments = () => {
|
|
725
|
+
const context = (0, import_react7.useContext)(Context2);
|
|
726
|
+
return context?.items ?? [];
|
|
727
|
+
};
|
|
728
|
+
|
|
729
|
+
// src/control-adornments/control-adornments.tsx
|
|
730
|
+
function ControlAdornments() {
|
|
731
|
+
const items = useControlAdornments();
|
|
732
|
+
if (items?.length === 0) {
|
|
733
|
+
return null;
|
|
734
|
+
}
|
|
735
|
+
return /* @__PURE__ */ React21.createElement(React21.Fragment, null, items.map(({ Adornment, id }) => /* @__PURE__ */ React21.createElement(Adornment, { key: id })));
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
// src/components/sortable.tsx
|
|
739
|
+
var React22 = __toESM(require("react"));
|
|
718
740
|
var import_icons2 = require("@elementor/icons");
|
|
719
741
|
var import_ui16 = require("@elementor/ui");
|
|
720
742
|
var SortableProvider = (props) => {
|
|
721
|
-
return /* @__PURE__ */
|
|
743
|
+
return /* @__PURE__ */ React22.createElement(import_ui16.List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React22.createElement(import_ui16.UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
|
|
722
744
|
};
|
|
723
745
|
var SortableItem = ({ id, children }) => {
|
|
724
|
-
return /* @__PURE__ */
|
|
746
|
+
return /* @__PURE__ */ React22.createElement(
|
|
725
747
|
import_ui16.UnstableSortableItem,
|
|
726
748
|
{
|
|
727
749
|
id,
|
|
@@ -734,16 +756,16 @@ var SortableItem = ({ id, children }) => {
|
|
|
734
756
|
showDropIndication,
|
|
735
757
|
dropIndicationStyle
|
|
736
758
|
}) => {
|
|
737
|
-
return /* @__PURE__ */
|
|
759
|
+
return /* @__PURE__ */ React22.createElement(
|
|
738
760
|
StyledListItem,
|
|
739
761
|
{
|
|
740
762
|
...itemProps,
|
|
741
763
|
style: itemStyle,
|
|
742
764
|
sx: { backgroundColor: isDragOverlay ? "background.paper" : void 0 }
|
|
743
765
|
},
|
|
744
|
-
/* @__PURE__ */
|
|
766
|
+
/* @__PURE__ */ React22.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }),
|
|
745
767
|
children,
|
|
746
|
-
showDropIndication && /* @__PURE__ */
|
|
768
|
+
showDropIndication && /* @__PURE__ */ React22.createElement(StyledDivider, { style: dropIndicationStyle })
|
|
747
769
|
);
|
|
748
770
|
}
|
|
749
771
|
}
|
|
@@ -773,7 +795,7 @@ var StyledListItem = (0, import_ui16.styled)(import_ui16.ListItem)`
|
|
|
773
795
|
}
|
|
774
796
|
}
|
|
775
797
|
`;
|
|
776
|
-
var SortableTrigger = (props) => /* @__PURE__ */
|
|
798
|
+
var SortableTrigger = (props) => /* @__PURE__ */ React22.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React22.createElement(import_icons2.GripVerticalIcon, { fontSize: "tiny" }));
|
|
777
799
|
var StyledDivider = (0, import_ui16.styled)(import_ui16.Divider)`
|
|
778
800
|
height: 0px;
|
|
779
801
|
border: none;
|
|
@@ -801,14 +823,14 @@ var Repeater = ({
|
|
|
801
823
|
values: repeaterValues = [],
|
|
802
824
|
setValues: setRepeaterValues
|
|
803
825
|
}) => {
|
|
804
|
-
const [openItem, setOpenItem] = (0,
|
|
826
|
+
const [openItem, setOpenItem] = (0, import_react8.useState)(-1);
|
|
805
827
|
const [items, setItems] = useSyncExternalState({
|
|
806
828
|
external: repeaterValues,
|
|
807
829
|
// @ts-expect-error - as long as persistWhen => true, value will never be null
|
|
808
830
|
setExternal: setRepeaterValues,
|
|
809
831
|
persistWhen: () => true
|
|
810
832
|
});
|
|
811
|
-
const [uniqueKeys, setUniqueKeys] = (0,
|
|
833
|
+
const [uniqueKeys, setUniqueKeys] = (0, import_react8.useState)(items.map((_, index) => index));
|
|
812
834
|
const generateNextKey = (source) => {
|
|
813
835
|
return 1 + Math.max(0, ...source);
|
|
814
836
|
};
|
|
@@ -865,24 +887,33 @@ var Repeater = ({
|
|
|
865
887
|
});
|
|
866
888
|
});
|
|
867
889
|
};
|
|
868
|
-
return /* @__PURE__ */
|
|
890
|
+
return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(import_ui17.Stack, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(import_ui17.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React23.createElement(ControlAdornments, null), /* @__PURE__ */ React23.createElement(
|
|
891
|
+
import_ui17.IconButton,
|
|
892
|
+
{
|
|
893
|
+
sx: { ml: "auto" },
|
|
894
|
+
size: SIZE,
|
|
895
|
+
onClick: addRepeaterItem,
|
|
896
|
+
"aria-label": (0, import_i18n4.__)("Add item", "elementor")
|
|
897
|
+
},
|
|
898
|
+
/* @__PURE__ */ React23.createElement(import_icons3.PlusIcon, { fontSize: SIZE })
|
|
899
|
+
)), 0 < uniqueKeys.length && /* @__PURE__ */ React23.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
|
|
869
900
|
const value = items[index];
|
|
870
901
|
if (!value) {
|
|
871
902
|
return null;
|
|
872
903
|
}
|
|
873
|
-
return /* @__PURE__ */
|
|
904
|
+
return /* @__PURE__ */ React23.createElement(SortableItem, { id: key, key: `sortable-${key}` }, /* @__PURE__ */ React23.createElement(
|
|
874
905
|
RepeaterItem,
|
|
875
906
|
{
|
|
876
907
|
bind: String(index),
|
|
877
908
|
disabled: value?.disabled,
|
|
878
|
-
label: /* @__PURE__ */
|
|
879
|
-
startIcon: /* @__PURE__ */
|
|
909
|
+
label: /* @__PURE__ */ React23.createElement(itemSettings.Label, { value }),
|
|
910
|
+
startIcon: /* @__PURE__ */ React23.createElement(itemSettings.Icon, { value }),
|
|
880
911
|
removeItem: () => removeRepeaterItem(index),
|
|
881
912
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
882
913
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
883
914
|
openOnMount: openOnAdd && openItem === key
|
|
884
915
|
},
|
|
885
|
-
(props) => /* @__PURE__ */
|
|
916
|
+
(props) => /* @__PURE__ */ React23.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
|
|
886
917
|
));
|
|
887
918
|
})));
|
|
888
919
|
};
|
|
@@ -896,12 +927,12 @@ var RepeaterItem = ({
|
|
|
896
927
|
toggleDisableItem,
|
|
897
928
|
openOnMount
|
|
898
929
|
}) => {
|
|
899
|
-
const [anchorEl, setAnchorEl] = (0,
|
|
930
|
+
const [anchorEl, setAnchorEl] = (0, import_react8.useState)(null);
|
|
900
931
|
const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount);
|
|
901
932
|
const duplicateLabel = (0, import_i18n4.__)("Duplicate", "elementor");
|
|
902
933
|
const toggleLabel = disabled ? (0, import_i18n4.__)("Show", "elementor") : (0, import_i18n4.__)("Hide", "elementor");
|
|
903
934
|
const removeLabel = (0, import_i18n4.__)("Remove", "elementor");
|
|
904
|
-
return /* @__PURE__ */
|
|
935
|
+
return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
|
|
905
936
|
import_ui17.UnstableTag,
|
|
906
937
|
{
|
|
907
938
|
label,
|
|
@@ -912,10 +943,10 @@ var RepeaterItem = ({
|
|
|
912
943
|
"aria-label": (0, import_i18n4.__)("Open item", "elementor"),
|
|
913
944
|
...(0, import_ui17.bindTrigger)(popoverState),
|
|
914
945
|
startIcon,
|
|
915
|
-
actions: /* @__PURE__ */
|
|
946
|
+
actions: /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React23.createElement(import_icons3.CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React23.createElement(import_icons3.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React23.createElement(import_icons3.EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React23.createElement(import_icons3.XIcon, { fontSize: SIZE })))),
|
|
916
947
|
sx: { backgroundColor: "background.paper" }
|
|
917
948
|
}
|
|
918
|
-
), /* @__PURE__ */
|
|
949
|
+
), /* @__PURE__ */ React23.createElement(
|
|
919
950
|
import_ui17.Popover,
|
|
920
951
|
{
|
|
921
952
|
disablePortal: true,
|
|
@@ -929,14 +960,14 @@ var RepeaterItem = ({
|
|
|
929
960
|
...popoverProps,
|
|
930
961
|
anchorEl: ref
|
|
931
962
|
},
|
|
932
|
-
/* @__PURE__ */
|
|
963
|
+
/* @__PURE__ */ React23.createElement(import_ui17.Box, null, children({ anchorEl }))
|
|
933
964
|
));
|
|
934
965
|
};
|
|
935
966
|
var usePopover = (openOnMount) => {
|
|
936
|
-
const [ref, setRef] = (0,
|
|
967
|
+
const [ref, setRef] = (0, import_react8.useState)(null);
|
|
937
968
|
const popoverState = (0, import_ui17.usePopupState)({ variant: "popover" });
|
|
938
969
|
const popoverProps = (0, import_ui17.bindPopover)(popoverState);
|
|
939
|
-
(0,
|
|
970
|
+
(0, import_react8.useEffect)(() => {
|
|
940
971
|
if (openOnMount && ref) {
|
|
941
972
|
popoverState.open(ref);
|
|
942
973
|
}
|
|
@@ -952,7 +983,7 @@ var usePopover = (openOnMount) => {
|
|
|
952
983
|
// src/controls/box-shadow-repeater-control.tsx
|
|
953
984
|
var BoxShadowRepeaterControl = createControl(() => {
|
|
954
985
|
const { propType, value, setValue } = useBoundProp(import_editor_props9.boxShadowPropTypeUtil);
|
|
955
|
-
return /* @__PURE__ */
|
|
986
|
+
return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(
|
|
956
987
|
Repeater,
|
|
957
988
|
{
|
|
958
989
|
openOnAdd: true,
|
|
@@ -968,13 +999,13 @@ var BoxShadowRepeaterControl = createControl(() => {
|
|
|
968
999
|
}
|
|
969
1000
|
));
|
|
970
1001
|
});
|
|
971
|
-
var ItemIcon = ({ value }) => /* @__PURE__ */
|
|
1002
|
+
var ItemIcon = ({ value }) => /* @__PURE__ */ React24.createElement(import_ui18.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
|
|
972
1003
|
var ItemContent = ({ anchorEl, bind }) => {
|
|
973
|
-
return /* @__PURE__ */
|
|
1004
|
+
return /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(Content, { anchorEl }));
|
|
974
1005
|
};
|
|
975
1006
|
var Content = ({ anchorEl }) => {
|
|
976
1007
|
const { propType, value, setValue } = useBoundProp(import_editor_props9.shadowPropTypeUtil);
|
|
977
|
-
return /* @__PURE__ */
|
|
1008
|
+
return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React24.createElement(
|
|
978
1009
|
ColorControl,
|
|
979
1010
|
{
|
|
980
1011
|
slotProps: {
|
|
@@ -991,7 +1022,7 @@ var Content = ({ anchorEl }) => {
|
|
|
991
1022
|
}
|
|
992
1023
|
}
|
|
993
1024
|
}
|
|
994
|
-
)), /* @__PURE__ */
|
|
1025
|
+
)), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
|
|
995
1026
|
SelectControl,
|
|
996
1027
|
{
|
|
997
1028
|
options: [
|
|
@@ -999,14 +1030,14 @@ var Content = ({ anchorEl }) => {
|
|
|
999
1030
|
{ label: (0, import_i18n5.__)("Outset", "elementor"), value: null }
|
|
1000
1031
|
]
|
|
1001
1032
|
}
|
|
1002
|
-
))), /* @__PURE__ */
|
|
1033
|
+
))), /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "hOffset", label: (0, import_i18n5.__)("Horizontal", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)), /* @__PURE__ */ React24.createElement(Control2, { bind: "vOffset", label: (0, import_i18n5.__)("Vertical", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null))), /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "blur", label: (0, import_i18n5.__)("Blur", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)), /* @__PURE__ */ React24.createElement(Control2, { bind: "spread", label: (0, import_i18n5.__)("Spread", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)))));
|
|
1003
1034
|
};
|
|
1004
1035
|
var Control2 = ({
|
|
1005
1036
|
label,
|
|
1006
1037
|
bind,
|
|
1007
1038
|
children,
|
|
1008
1039
|
sx
|
|
1009
|
-
}) => /* @__PURE__ */
|
|
1040
|
+
}) => /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(import_ui18.Grid, { item: true, xs: 6, sx }, /* @__PURE__ */ React24.createElement(import_ui18.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(import_ui18.FormLabel, { size: "tiny" }, label)), /* @__PURE__ */ React24.createElement(import_ui18.Grid, { item: true, xs: 12 }, children))));
|
|
1010
1041
|
var ItemLabel = ({ value }) => {
|
|
1011
1042
|
const { position, hOffset, vOffset, blur, spread } = value.value;
|
|
1012
1043
|
const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
|
|
@@ -1020,7 +1051,7 @@ var ItemLabel = ({ value }) => {
|
|
|
1020
1051
|
blurSize + blurUnit,
|
|
1021
1052
|
spreadSize + spreadUnit
|
|
1022
1053
|
].join(" ");
|
|
1023
|
-
return /* @__PURE__ */
|
|
1054
|
+
return /* @__PURE__ */ React24.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
|
|
1024
1055
|
};
|
|
1025
1056
|
var initialShadow = {
|
|
1026
1057
|
$$type: "shadow",
|
|
@@ -1050,11 +1081,11 @@ var initialShadow = {
|
|
|
1050
1081
|
};
|
|
1051
1082
|
|
|
1052
1083
|
// src/controls/toggle-control.tsx
|
|
1053
|
-
var
|
|
1084
|
+
var React26 = __toESM(require("react"));
|
|
1054
1085
|
var import_editor_props10 = require("@elementor/editor-props");
|
|
1055
1086
|
|
|
1056
1087
|
// src/components/control-toggle-button-group.tsx
|
|
1057
|
-
var
|
|
1088
|
+
var React25 = __toESM(require("react"));
|
|
1058
1089
|
var import_ui19 = require("@elementor/ui");
|
|
1059
1090
|
var StyledToggleButtonGroup = (0, import_ui19.styled)(import_ui19.ToggleButtonGroup)`
|
|
1060
1091
|
${({ justify }) => `justify-content: ${justify};`}
|
|
@@ -1072,7 +1103,7 @@ var ControlToggleButtonGroup = ({
|
|
|
1072
1103
|
const handleChange = (_, newValue) => {
|
|
1073
1104
|
onChange(newValue);
|
|
1074
1105
|
};
|
|
1075
|
-
return /* @__PURE__ */
|
|
1106
|
+
return /* @__PURE__ */ React25.createElement(
|
|
1076
1107
|
StyledToggleButtonGroup,
|
|
1077
1108
|
{
|
|
1078
1109
|
justify,
|
|
@@ -1087,7 +1118,7 @@ var ControlToggleButtonGroup = ({
|
|
|
1087
1118
|
}
|
|
1088
1119
|
},
|
|
1089
1120
|
items.map(
|
|
1090
|
-
({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */
|
|
1121
|
+
({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */ React25.createElement(import_ui19.Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui19.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React25.createElement(Content3, { size }))) : /* @__PURE__ */ React25.createElement(
|
|
1091
1122
|
import_ui19.ToggleButton,
|
|
1092
1123
|
{
|
|
1093
1124
|
key: buttonValue,
|
|
@@ -1096,7 +1127,7 @@ var ControlToggleButtonGroup = ({
|
|
|
1096
1127
|
size,
|
|
1097
1128
|
fullWidth
|
|
1098
1129
|
},
|
|
1099
|
-
/* @__PURE__ */
|
|
1130
|
+
/* @__PURE__ */ React25.createElement(Content3, { size })
|
|
1100
1131
|
)
|
|
1101
1132
|
)
|
|
1102
1133
|
);
|
|
@@ -1123,7 +1154,7 @@ var ToggleControl = createControl(
|
|
|
1123
1154
|
fullWidth,
|
|
1124
1155
|
size
|
|
1125
1156
|
};
|
|
1126
|
-
return exclusive ? /* @__PURE__ */
|
|
1157
|
+
return exclusive ? /* @__PURE__ */ React26.createElement(
|
|
1127
1158
|
ControlToggleButtonGroup,
|
|
1128
1159
|
{
|
|
1129
1160
|
...toggleButtonGroupProps,
|
|
@@ -1131,7 +1162,7 @@ var ToggleControl = createControl(
|
|
|
1131
1162
|
onChange: setValue,
|
|
1132
1163
|
exclusive: true
|
|
1133
1164
|
}
|
|
1134
|
-
) : /* @__PURE__ */
|
|
1165
|
+
) : /* @__PURE__ */ React26.createElement(
|
|
1135
1166
|
ControlToggleButtonGroup,
|
|
1136
1167
|
{
|
|
1137
1168
|
...toggleButtonGroupProps,
|
|
@@ -1144,7 +1175,7 @@ var ToggleControl = createControl(
|
|
|
1144
1175
|
);
|
|
1145
1176
|
|
|
1146
1177
|
// src/controls/number-control.tsx
|
|
1147
|
-
var
|
|
1178
|
+
var React27 = __toESM(require("react"));
|
|
1148
1179
|
var import_editor_props11 = require("@elementor/editor-props");
|
|
1149
1180
|
var import_ui20 = require("@elementor/ui");
|
|
1150
1181
|
var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
|
|
@@ -1166,7 +1197,7 @@ var NumberControl = createControl(
|
|
|
1166
1197
|
const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
|
|
1167
1198
|
setValue(Math.min(Math.max(formattedValue, min), max));
|
|
1168
1199
|
};
|
|
1169
|
-
return /* @__PURE__ */
|
|
1200
|
+
return /* @__PURE__ */ React27.createElement(ControlActions, null, /* @__PURE__ */ React27.createElement(
|
|
1170
1201
|
import_ui20.TextField,
|
|
1171
1202
|
{
|
|
1172
1203
|
size: "tiny",
|
|
@@ -1182,11 +1213,20 @@ var NumberControl = createControl(
|
|
|
1182
1213
|
);
|
|
1183
1214
|
|
|
1184
1215
|
// src/controls/equal-unequal-sizes-control.tsx
|
|
1185
|
-
var
|
|
1186
|
-
var
|
|
1216
|
+
var React29 = __toESM(require("react"));
|
|
1217
|
+
var import_react9 = require("react");
|
|
1187
1218
|
var import_editor_props12 = require("@elementor/editor-props");
|
|
1188
|
-
var
|
|
1219
|
+
var import_ui22 = require("@elementor/ui");
|
|
1189
1220
|
var import_i18n6 = require("@wordpress/i18n");
|
|
1221
|
+
|
|
1222
|
+
// src/components/control-label.tsx
|
|
1223
|
+
var React28 = __toESM(require("react"));
|
|
1224
|
+
var import_ui21 = require("@elementor/ui");
|
|
1225
|
+
var ControlLabel = ({ children }) => {
|
|
1226
|
+
return /* @__PURE__ */ React28.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 1 }, /* @__PURE__ */ React28.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React28.createElement(ControlAdornments, null));
|
|
1227
|
+
};
|
|
1228
|
+
|
|
1229
|
+
// src/controls/equal-unequal-sizes-control.tsx
|
|
1190
1230
|
var isEqualSizes = (propValue, items) => {
|
|
1191
1231
|
const values = Object.values(propValue);
|
|
1192
1232
|
if (values.length !== items.length) {
|
|
@@ -1204,9 +1244,9 @@ function EqualUnequalSizesControl({
|
|
|
1204
1244
|
items,
|
|
1205
1245
|
multiSizePropTypeUtil
|
|
1206
1246
|
}) {
|
|
1207
|
-
const popupId = (0,
|
|
1208
|
-
const controlRef = (0,
|
|
1209
|
-
const popupState = (0,
|
|
1247
|
+
const popupId = (0, import_react9.useId)();
|
|
1248
|
+
const controlRef = (0, import_react9.useRef)(null);
|
|
1249
|
+
const popupState = (0, import_ui22.usePopupState)({ variant: "popover", popupId });
|
|
1210
1250
|
const {
|
|
1211
1251
|
propType: multiSizePropType,
|
|
1212
1252
|
value: multiSizeValue,
|
|
@@ -1240,19 +1280,19 @@ function EqualUnequalSizesControl({
|
|
|
1240
1280
|
return splitEqualValue() ?? null;
|
|
1241
1281
|
};
|
|
1242
1282
|
const isMixed = !!multiSizeValue;
|
|
1243
|
-
return /* @__PURE__ */
|
|
1244
|
-
|
|
1283
|
+
return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(ControlLabel, null, label)), /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React29.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React29.createElement(import_ui22.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React29.createElement(
|
|
1284
|
+
import_ui22.ToggleButton,
|
|
1245
1285
|
{
|
|
1246
1286
|
size: "tiny",
|
|
1247
1287
|
value: "check",
|
|
1248
1288
|
sx: { marginLeft: "auto" },
|
|
1249
|
-
...(0,
|
|
1289
|
+
...(0, import_ui22.bindToggle)(popupState),
|
|
1250
1290
|
selected: popupState.isOpen,
|
|
1251
1291
|
"aria-label": tooltipLabel
|
|
1252
1292
|
},
|
|
1253
1293
|
icon
|
|
1254
|
-
))))), /* @__PURE__ */
|
|
1255
|
-
|
|
1294
|
+
))))), /* @__PURE__ */ React29.createElement(
|
|
1295
|
+
import_ui22.Popover,
|
|
1256
1296
|
{
|
|
1257
1297
|
disablePortal: true,
|
|
1258
1298
|
disableScrollLock: true,
|
|
@@ -1264,22 +1304,22 @@ function EqualUnequalSizesControl({
|
|
|
1264
1304
|
vertical: "top",
|
|
1265
1305
|
horizontal: "right"
|
|
1266
1306
|
},
|
|
1267
|
-
...(0,
|
|
1307
|
+
...(0, import_ui22.bindPopover)(popupState),
|
|
1268
1308
|
slotProps: {
|
|
1269
1309
|
// eslint-disable-next-line react-compiler/react-compiler
|
|
1270
1310
|
paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } }
|
|
1271
1311
|
}
|
|
1272
1312
|
},
|
|
1273
|
-
/* @__PURE__ */
|
|
1313
|
+
/* @__PURE__ */ React29.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__PURE__ */ React29.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React29.createElement(PopoverGridContainer, null, /* @__PURE__ */ React29.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React29.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React29.createElement(PopoverGridContainer, null, /* @__PURE__ */ React29.createElement(MultiSizeValueControl, { item: items[2] }), /* @__PURE__ */ React29.createElement(MultiSizeValueControl, { item: items[3] }))))
|
|
1274
1314
|
));
|
|
1275
1315
|
}
|
|
1276
|
-
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */
|
|
1316
|
+
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(SizeControl, { startIcon: item.icon })))));
|
|
1277
1317
|
|
|
1278
1318
|
// src/controls/linked-dimensions-control.tsx
|
|
1279
|
-
var
|
|
1319
|
+
var React30 = __toESM(require("react"));
|
|
1280
1320
|
var import_editor_props13 = require("@elementor/editor-props");
|
|
1281
1321
|
var import_icons4 = require("@elementor/icons");
|
|
1282
|
-
var
|
|
1322
|
+
var import_ui23 = require("@elementor/ui");
|
|
1283
1323
|
var import_i18n7 = require("@wordpress/i18n");
|
|
1284
1324
|
var LinkedDimensionsControl = createControl(
|
|
1285
1325
|
({
|
|
@@ -1311,8 +1351,8 @@ var LinkedDimensionsControl = createControl(
|
|
|
1311
1351
|
const LinkedIcon = isLinked ? import_icons4.LinkIcon : import_icons4.DetachIcon;
|
|
1312
1352
|
const linkedLabel = (0, import_i18n7.__)("Link %s", "elementor").replace("%s", tooltipLabel);
|
|
1313
1353
|
const unlinkedLabel = (0, import_i18n7.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
|
|
1314
|
-
return /* @__PURE__ */
|
|
1315
|
-
|
|
1354
|
+
return /* @__PURE__ */ React30.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React30.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(ControlLabel, null, label), /* @__PURE__ */ React30.createElement(import_ui23.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
|
|
1355
|
+
import_ui23.ToggleButton,
|
|
1316
1356
|
{
|
|
1317
1357
|
"aria-label": isLinked ? unlinkedLabel : linkedLabel,
|
|
1318
1358
|
size: "tiny",
|
|
@@ -1321,36 +1361,36 @@ var LinkedDimensionsControl = createControl(
|
|
|
1321
1361
|
sx: { marginLeft: "auto" },
|
|
1322
1362
|
onChange: onLinkToggle
|
|
1323
1363
|
},
|
|
1324
|
-
/* @__PURE__ */
|
|
1325
|
-
))), /* @__PURE__ */
|
|
1364
|
+
/* @__PURE__ */ React30.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1365
|
+
))), /* @__PURE__ */ React30.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
|
|
1326
1366
|
Control3,
|
|
1327
1367
|
{
|
|
1328
1368
|
bind: "block-start",
|
|
1329
|
-
startIcon: /* @__PURE__ */
|
|
1369
|
+
startIcon: /* @__PURE__ */ React30.createElement(import_icons4.SideTopIcon, { fontSize: "tiny" }),
|
|
1330
1370
|
isLinked,
|
|
1331
1371
|
extendedValues
|
|
1332
1372
|
}
|
|
1333
|
-
))), /* @__PURE__ */
|
|
1373
|
+
))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
|
|
1334
1374
|
Control3,
|
|
1335
1375
|
{
|
|
1336
1376
|
bind: "inline-end",
|
|
1337
|
-
startIcon: isSiteRtl ? /* @__PURE__ */
|
|
1377
|
+
startIcon: isSiteRtl ? /* @__PURE__ */ React30.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React30.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }),
|
|
1338
1378
|
isLinked,
|
|
1339
1379
|
extendedValues
|
|
1340
1380
|
}
|
|
1341
|
-
)))), /* @__PURE__ */
|
|
1381
|
+
)))), /* @__PURE__ */ React30.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
|
|
1342
1382
|
Control3,
|
|
1343
1383
|
{
|
|
1344
1384
|
bind: "block-end",
|
|
1345
|
-
startIcon: /* @__PURE__ */
|
|
1385
|
+
startIcon: /* @__PURE__ */ React30.createElement(import_icons4.SideBottomIcon, { fontSize: "tiny" }),
|
|
1346
1386
|
isLinked,
|
|
1347
1387
|
extendedValues
|
|
1348
1388
|
}
|
|
1349
|
-
))), /* @__PURE__ */
|
|
1389
|
+
))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
|
|
1350
1390
|
Control3,
|
|
1351
1391
|
{
|
|
1352
1392
|
bind: "inline-start",
|
|
1353
|
-
startIcon: isSiteRtl ? /* @__PURE__ */
|
|
1393
|
+
startIcon: isSiteRtl ? /* @__PURE__ */ React30.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React30.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }),
|
|
1354
1394
|
isLinked,
|
|
1355
1395
|
extendedValues
|
|
1356
1396
|
}
|
|
@@ -1364,17 +1404,17 @@ var Control3 = ({
|
|
|
1364
1404
|
extendedValues
|
|
1365
1405
|
}) => {
|
|
1366
1406
|
if (isLinked) {
|
|
1367
|
-
return /* @__PURE__ */
|
|
1407
|
+
return /* @__PURE__ */ React30.createElement(SizeControl, { startIcon, extendedValues });
|
|
1368
1408
|
}
|
|
1369
|
-
return /* @__PURE__ */
|
|
1409
|
+
return /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(SizeControl, { startIcon, extendedValues }));
|
|
1370
1410
|
};
|
|
1371
1411
|
|
|
1372
1412
|
// src/controls/font-family-control/font-family-control.tsx
|
|
1373
|
-
var
|
|
1374
|
-
var
|
|
1413
|
+
var React31 = __toESM(require("react"));
|
|
1414
|
+
var import_react10 = require("react");
|
|
1375
1415
|
var import_editor_props14 = require("@elementor/editor-props");
|
|
1376
1416
|
var import_icons5 = require("@elementor/icons");
|
|
1377
|
-
var
|
|
1417
|
+
var import_ui24 = require("@elementor/ui");
|
|
1378
1418
|
var import_utils2 = require("@elementor/utils");
|
|
1379
1419
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
1380
1420
|
var import_i18n8 = require("@wordpress/i18n");
|
|
@@ -1404,9 +1444,9 @@ var enqueueFont = (fontFamily, context = "editor") => {
|
|
|
1404
1444
|
// src/controls/font-family-control/font-family-control.tsx
|
|
1405
1445
|
var SIZE2 = "tiny";
|
|
1406
1446
|
var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
1407
|
-
const [searchValue, setSearchValue] = (0,
|
|
1447
|
+
const [searchValue, setSearchValue] = (0, import_react10.useState)("");
|
|
1408
1448
|
const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props14.stringPropTypeUtil);
|
|
1409
|
-
const popoverState = (0,
|
|
1449
|
+
const popoverState = (0, import_ui24.usePopupState)({ variant: "popover" });
|
|
1410
1450
|
const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
|
|
1411
1451
|
const handleSearch = (event) => {
|
|
1412
1452
|
setSearchValue(event.target.value);
|
|
@@ -1415,26 +1455,26 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1415
1455
|
setSearchValue("");
|
|
1416
1456
|
popoverState.close();
|
|
1417
1457
|
};
|
|
1418
|
-
return /* @__PURE__ */
|
|
1419
|
-
|
|
1458
|
+
return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(
|
|
1459
|
+
import_ui24.UnstableTag,
|
|
1420
1460
|
{
|
|
1421
1461
|
variant: "outlined",
|
|
1422
1462
|
label: fontFamily,
|
|
1423
|
-
endIcon: /* @__PURE__ */
|
|
1424
|
-
...(0,
|
|
1463
|
+
endIcon: /* @__PURE__ */ React31.createElement(import_icons5.ChevronDownIcon, { fontSize: "tiny" }),
|
|
1464
|
+
...(0, import_ui24.bindTrigger)(popoverState),
|
|
1425
1465
|
fullWidth: true
|
|
1426
1466
|
}
|
|
1427
|
-
), /* @__PURE__ */
|
|
1428
|
-
|
|
1467
|
+
), /* @__PURE__ */ React31.createElement(
|
|
1468
|
+
import_ui24.Popover,
|
|
1429
1469
|
{
|
|
1430
1470
|
disablePortal: true,
|
|
1431
1471
|
disableScrollLock: true,
|
|
1432
1472
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
1433
|
-
...(0,
|
|
1473
|
+
...(0, import_ui24.bindPopover)(popoverState),
|
|
1434
1474
|
onClose: handleClose
|
|
1435
1475
|
},
|
|
1436
|
-
/* @__PURE__ */
|
|
1437
|
-
|
|
1476
|
+
/* @__PURE__ */ React31.createElement(import_ui24.Stack, null, /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React31.createElement(import_icons5.TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React31.createElement(import_ui24.Typography, { variant: "subtitle2" }, (0, import_i18n8.__)("Font Family", "elementor")), /* @__PURE__ */ React31.createElement(import_ui24.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React31.createElement(import_icons5.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React31.createElement(import_ui24.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React31.createElement(
|
|
1477
|
+
import_ui24.TextField,
|
|
1438
1478
|
{
|
|
1439
1479
|
fullWidth: true,
|
|
1440
1480
|
size: SIZE2,
|
|
@@ -1442,10 +1482,10 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1442
1482
|
placeholder: (0, import_i18n8.__)("Search", "elementor"),
|
|
1443
1483
|
onChange: handleSearch,
|
|
1444
1484
|
InputProps: {
|
|
1445
|
-
startAdornment: /* @__PURE__ */
|
|
1485
|
+
startAdornment: /* @__PURE__ */ React31.createElement(import_ui24.InputAdornment, { position: "start" }, /* @__PURE__ */ React31.createElement(import_icons5.SearchIcon, { fontSize: SIZE2 }))
|
|
1446
1486
|
}
|
|
1447
1487
|
}
|
|
1448
|
-
)), /* @__PURE__ */
|
|
1488
|
+
)), /* @__PURE__ */ React31.createElement(import_ui24.Divider, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React31.createElement(
|
|
1449
1489
|
FontList,
|
|
1450
1490
|
{
|
|
1451
1491
|
fontListItems: filteredFontFamilies,
|
|
@@ -1453,8 +1493,8 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1453
1493
|
handleClose,
|
|
1454
1494
|
fontFamily
|
|
1455
1495
|
}
|
|
1456
|
-
) : /* @__PURE__ */
|
|
1457
|
-
|
|
1496
|
+
) : /* @__PURE__ */ React31.createElement(import_ui24.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React31.createElement(import_ui24.Stack, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React31.createElement(import_icons5.TextIcon, { fontSize: "large" }), /* @__PURE__ */ React31.createElement(import_ui24.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React31.createElement(import_ui24.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React31.createElement(
|
|
1497
|
+
import_ui24.Typography,
|
|
1458
1498
|
{
|
|
1459
1499
|
variant: "subtitle2",
|
|
1460
1500
|
color: "text.secondary",
|
|
@@ -1464,17 +1504,17 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1464
1504
|
justifyContent: "center"
|
|
1465
1505
|
}
|
|
1466
1506
|
},
|
|
1467
|
-
/* @__PURE__ */
|
|
1468
|
-
/* @__PURE__ */
|
|
1507
|
+
/* @__PURE__ */ React31.createElement("span", null, "\u201C"),
|
|
1508
|
+
/* @__PURE__ */ React31.createElement(
|
|
1469
1509
|
"span",
|
|
1470
1510
|
{
|
|
1471
1511
|
style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
|
|
1472
1512
|
},
|
|
1473
1513
|
searchValue
|
|
1474
1514
|
),
|
|
1475
|
-
/* @__PURE__ */
|
|
1476
|
-
)), /* @__PURE__ */
|
|
1477
|
-
|
|
1515
|
+
/* @__PURE__ */ React31.createElement("span", null, "\u201D.")
|
|
1516
|
+
)), /* @__PURE__ */ React31.createElement(import_ui24.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React31.createElement(
|
|
1517
|
+
import_ui24.Link,
|
|
1478
1518
|
{
|
|
1479
1519
|
color: "secondary",
|
|
1480
1520
|
variant: "caption",
|
|
@@ -1488,7 +1528,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1488
1528
|
var LIST_ITEM_HEIGHT = 36;
|
|
1489
1529
|
var LIST_ITEMS_BUFFER = 6;
|
|
1490
1530
|
var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
|
|
1491
|
-
const containerRef = (0,
|
|
1531
|
+
const containerRef = (0, import_react10.useRef)(null);
|
|
1492
1532
|
const selectedItem = fontListItems.find((item) => item.value === fontFamily);
|
|
1493
1533
|
const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
|
|
1494
1534
|
getVirtualIndexes().forEach((index) => {
|
|
@@ -1505,7 +1545,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
|
|
|
1505
1545
|
overscan: LIST_ITEMS_BUFFER,
|
|
1506
1546
|
onChange: debouncedVirtualizeChange
|
|
1507
1547
|
});
|
|
1508
|
-
(0,
|
|
1548
|
+
(0, import_react10.useEffect)(
|
|
1509
1549
|
() => {
|
|
1510
1550
|
virtualizer.scrollToIndex(fontListItems.findIndex((item) => item.value === fontFamily));
|
|
1511
1551
|
},
|
|
@@ -1513,8 +1553,8 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
|
|
|
1513
1553
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1514
1554
|
[fontFamily]
|
|
1515
1555
|
);
|
|
1516
|
-
return /* @__PURE__ */
|
|
1517
|
-
|
|
1556
|
+
return /* @__PURE__ */ React31.createElement(
|
|
1557
|
+
import_ui24.Box,
|
|
1518
1558
|
{
|
|
1519
1559
|
ref: containerRef,
|
|
1520
1560
|
sx: {
|
|
@@ -1523,7 +1563,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
|
|
|
1523
1563
|
width: 220
|
|
1524
1564
|
}
|
|
1525
1565
|
},
|
|
1526
|
-
/* @__PURE__ */
|
|
1566
|
+
/* @__PURE__ */ React31.createElement(
|
|
1527
1567
|
StyledMenuList,
|
|
1528
1568
|
{
|
|
1529
1569
|
role: "listbox",
|
|
@@ -1539,8 +1579,8 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
|
|
|
1539
1579
|
const isSelected = selectedItem?.value === item.value;
|
|
1540
1580
|
const tabIndexFallback = !selectedItem ? 0 : -1;
|
|
1541
1581
|
if (item.type === "category") {
|
|
1542
|
-
return /* @__PURE__ */
|
|
1543
|
-
|
|
1582
|
+
return /* @__PURE__ */ React31.createElement(
|
|
1583
|
+
import_ui24.MenuSubheader,
|
|
1544
1584
|
{
|
|
1545
1585
|
key: virtualRow.key,
|
|
1546
1586
|
style: {
|
|
@@ -1550,7 +1590,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
|
|
|
1550
1590
|
item.value
|
|
1551
1591
|
);
|
|
1552
1592
|
}
|
|
1553
|
-
return /* @__PURE__ */
|
|
1593
|
+
return /* @__PURE__ */ React31.createElement(
|
|
1554
1594
|
"li",
|
|
1555
1595
|
{
|
|
1556
1596
|
key: virtualRow.key,
|
|
@@ -1586,7 +1626,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
|
|
|
1586
1626
|
)
|
|
1587
1627
|
);
|
|
1588
1628
|
};
|
|
1589
|
-
var StyledMenuList = (0,
|
|
1629
|
+
var StyledMenuList = (0, import_ui24.styled)(import_ui24.MenuList)(({ theme }) => ({
|
|
1590
1630
|
"& > li": {
|
|
1591
1631
|
height: LIST_ITEM_HEIGHT,
|
|
1592
1632
|
position: "absolute",
|
|
@@ -1611,20 +1651,20 @@ var StyledMenuList = (0, import_ui23.styled)(import_ui23.MenuList)(({ theme }) =
|
|
|
1611
1651
|
position: "relative"
|
|
1612
1652
|
}));
|
|
1613
1653
|
var useDebounce = (fn, delay) => {
|
|
1614
|
-
const [debouncedFn] = (0,
|
|
1615
|
-
(0,
|
|
1654
|
+
const [debouncedFn] = (0, import_react10.useState)(() => (0, import_utils2.debounce)(fn, delay));
|
|
1655
|
+
(0, import_react10.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
|
|
1616
1656
|
return debouncedFn;
|
|
1617
1657
|
};
|
|
1618
1658
|
|
|
1619
1659
|
// src/controls/url-control.tsx
|
|
1620
|
-
var
|
|
1660
|
+
var React32 = __toESM(require("react"));
|
|
1621
1661
|
var import_editor_props15 = require("@elementor/editor-props");
|
|
1622
|
-
var
|
|
1662
|
+
var import_ui25 = require("@elementor/ui");
|
|
1623
1663
|
var UrlControl = createControl(({ placeholder }) => {
|
|
1624
1664
|
const { value, setValue } = useBoundProp(import_editor_props15.urlPropTypeUtil);
|
|
1625
1665
|
const handleChange = (event) => setValue(event.target.value);
|
|
1626
|
-
return /* @__PURE__ */
|
|
1627
|
-
|
|
1666
|
+
return /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(
|
|
1667
|
+
import_ui25.TextField,
|
|
1628
1668
|
{
|
|
1629
1669
|
size: "tiny",
|
|
1630
1670
|
fullWidth: true,
|
|
@@ -1636,23 +1676,23 @@ var UrlControl = createControl(({ placeholder }) => {
|
|
|
1636
1676
|
});
|
|
1637
1677
|
|
|
1638
1678
|
// src/controls/link-control.tsx
|
|
1639
|
-
var
|
|
1640
|
-
var
|
|
1679
|
+
var React34 = __toESM(require("react"));
|
|
1680
|
+
var import_react12 = require("react");
|
|
1641
1681
|
var import_editor_elements = require("@elementor/editor-elements");
|
|
1642
1682
|
var import_editor_props16 = require("@elementor/editor-props");
|
|
1643
1683
|
var import_http2 = require("@elementor/http");
|
|
1644
1684
|
var import_icons7 = require("@elementor/icons");
|
|
1645
1685
|
var import_session = require("@elementor/session");
|
|
1646
|
-
var
|
|
1686
|
+
var import_ui27 = require("@elementor/ui");
|
|
1647
1687
|
var import_utils3 = require("@elementor/utils");
|
|
1648
1688
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1649
1689
|
|
|
1650
1690
|
// src/components/autocomplete.tsx
|
|
1651
|
-
var
|
|
1652
|
-
var
|
|
1691
|
+
var React33 = __toESM(require("react"));
|
|
1692
|
+
var import_react11 = require("react");
|
|
1653
1693
|
var import_icons6 = require("@elementor/icons");
|
|
1654
|
-
var
|
|
1655
|
-
var Autocomplete = (0,
|
|
1694
|
+
var import_ui26 = require("@elementor/ui");
|
|
1695
|
+
var Autocomplete = (0, import_react11.forwardRef)((props, ref) => {
|
|
1656
1696
|
const {
|
|
1657
1697
|
options,
|
|
1658
1698
|
onOptionChange,
|
|
@@ -1668,8 +1708,8 @@ var Autocomplete = (0, import_react10.forwardRef)((props, ref) => {
|
|
|
1668
1708
|
const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
|
|
1669
1709
|
const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
|
|
1670
1710
|
const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
|
|
1671
|
-
return /* @__PURE__ */
|
|
1672
|
-
|
|
1711
|
+
return /* @__PURE__ */ React33.createElement(
|
|
1712
|
+
import_ui26.Autocomplete,
|
|
1673
1713
|
{
|
|
1674
1714
|
...restProps,
|
|
1675
1715
|
ref,
|
|
@@ -1686,8 +1726,8 @@ var Autocomplete = (0, import_react10.forwardRef)((props, ref) => {
|
|
|
1686
1726
|
groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
|
|
1687
1727
|
isOptionEqualToValue,
|
|
1688
1728
|
filterOptions: () => optionKeys,
|
|
1689
|
-
renderOption: (optionProps, optionId) => /* @__PURE__ */
|
|
1690
|
-
renderInput: (params) => /* @__PURE__ */
|
|
1729
|
+
renderOption: (optionProps, optionId) => /* @__PURE__ */ React33.createElement(import_ui26.Box, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
|
|
1730
|
+
renderInput: (params) => /* @__PURE__ */ React33.createElement(
|
|
1691
1731
|
TextInput,
|
|
1692
1732
|
{
|
|
1693
1733
|
params,
|
|
@@ -1710,8 +1750,8 @@ var TextInput = ({
|
|
|
1710
1750
|
const onChange = (event) => {
|
|
1711
1751
|
handleChange(event.target.value);
|
|
1712
1752
|
};
|
|
1713
|
-
return /* @__PURE__ */
|
|
1714
|
-
|
|
1753
|
+
return /* @__PURE__ */ React33.createElement(
|
|
1754
|
+
import_ui26.TextField,
|
|
1715
1755
|
{
|
|
1716
1756
|
...params,
|
|
1717
1757
|
placeholder,
|
|
@@ -1723,7 +1763,7 @@ var TextInput = ({
|
|
|
1723
1763
|
},
|
|
1724
1764
|
InputProps: {
|
|
1725
1765
|
...params.InputProps,
|
|
1726
|
-
endAdornment: /* @__PURE__ */
|
|
1766
|
+
endAdornment: /* @__PURE__ */ React33.createElement(ClearButton, { params, allowClear, handleChange })
|
|
1727
1767
|
}
|
|
1728
1768
|
}
|
|
1729
1769
|
);
|
|
@@ -1732,7 +1772,7 @@ var ClearButton = ({
|
|
|
1732
1772
|
allowClear,
|
|
1733
1773
|
handleChange,
|
|
1734
1774
|
params
|
|
1735
|
-
}) => /* @__PURE__ */
|
|
1775
|
+
}) => /* @__PURE__ */ React33.createElement(import_ui26.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React33.createElement(import_ui26.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React33.createElement(import_icons6.XIcon, { fontSize: params.size })));
|
|
1736
1776
|
function findMatchingOption(options, optionId = null) {
|
|
1737
1777
|
const formattedOption = (optionId || "").toString();
|
|
1738
1778
|
return options.find(({ id }) => formattedOption === id.toString());
|
|
@@ -1758,7 +1798,7 @@ var SIZE3 = "tiny";
|
|
|
1758
1798
|
var LinkControl = createControl((props) => {
|
|
1759
1799
|
const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props16.linkPropTypeUtil);
|
|
1760
1800
|
const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
|
|
1761
|
-
const [isEnabled, setIsEnabled] = (0,
|
|
1801
|
+
const [isEnabled, setIsEnabled] = (0, import_react12.useState)(!!value);
|
|
1762
1802
|
const {
|
|
1763
1803
|
allowCustomValues,
|
|
1764
1804
|
queryOptions: { endpoint = "", requestParams = {} },
|
|
@@ -1766,7 +1806,7 @@ var LinkControl = createControl((props) => {
|
|
|
1766
1806
|
minInputLength = 2,
|
|
1767
1807
|
context: { elementId }
|
|
1768
1808
|
} = props || {};
|
|
1769
|
-
const [options, setOptions] = (0,
|
|
1809
|
+
const [options, setOptions] = (0, import_react12.useState)(
|
|
1770
1810
|
generateFirstLoadedOption(value)
|
|
1771
1811
|
);
|
|
1772
1812
|
const onEnabledChange = () => {
|
|
@@ -1807,7 +1847,7 @@ var LinkControl = createControl((props) => {
|
|
|
1807
1847
|
}
|
|
1808
1848
|
debounceFetch({ ...requestParams, term: newValue });
|
|
1809
1849
|
};
|
|
1810
|
-
const debounceFetch = (0,
|
|
1850
|
+
const debounceFetch = (0, import_react12.useMemo)(
|
|
1811
1851
|
() => (0, import_utils3.debounce)(
|
|
1812
1852
|
(params) => fetchOptions(endpoint, params).then((newOptions) => {
|
|
1813
1853
|
setOptions(formatOptions(newOptions));
|
|
@@ -1816,8 +1856,8 @@ var LinkControl = createControl((props) => {
|
|
|
1816
1856
|
),
|
|
1817
1857
|
[endpoint]
|
|
1818
1858
|
);
|
|
1819
|
-
return /* @__PURE__ */
|
|
1820
|
-
|
|
1859
|
+
return /* @__PURE__ */ React34.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React34.createElement(import_ui27.Stack, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(import_ui27.Divider, null), /* @__PURE__ */ React34.createElement(
|
|
1860
|
+
import_ui27.Stack,
|
|
1821
1861
|
{
|
|
1822
1862
|
direction: "row",
|
|
1823
1863
|
sx: {
|
|
@@ -1825,8 +1865,8 @@ var LinkControl = createControl((props) => {
|
|
|
1825
1865
|
alignItems: "center"
|
|
1826
1866
|
}
|
|
1827
1867
|
},
|
|
1828
|
-
/* @__PURE__ */
|
|
1829
|
-
/* @__PURE__ */
|
|
1868
|
+
/* @__PURE__ */ React34.createElement(ControlFormLabel, null, (0, import_i18n9.__)("Link", "elementor")),
|
|
1869
|
+
/* @__PURE__ */ React34.createElement(
|
|
1830
1870
|
ToggleIconControl,
|
|
1831
1871
|
{
|
|
1832
1872
|
enabled: isEnabled,
|
|
@@ -1834,28 +1874,28 @@ var LinkControl = createControl((props) => {
|
|
|
1834
1874
|
label: (0, import_i18n9.__)("Toggle link", "elementor")
|
|
1835
1875
|
}
|
|
1836
1876
|
)
|
|
1837
|
-
), /* @__PURE__ */
|
|
1877
|
+
), /* @__PURE__ */ React34.createElement(import_ui27.Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React34.createElement(import_ui27.Stack, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
|
|
1838
1878
|
Autocomplete,
|
|
1839
1879
|
{
|
|
1840
1880
|
options,
|
|
1841
1881
|
allowCustomValues,
|
|
1842
1882
|
placeholder,
|
|
1843
|
-
value: value?.destination?.value,
|
|
1883
|
+
value: value?.destination?.value?.settings?.label || value?.destination?.value,
|
|
1844
1884
|
onOptionChange,
|
|
1845
1885
|
onTextChange,
|
|
1846
1886
|
minInputLength
|
|
1847
1887
|
}
|
|
1848
|
-
))), /* @__PURE__ */
|
|
1888
|
+
))), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React34.createElement(SwitchControl, null))))));
|
|
1849
1889
|
});
|
|
1850
1890
|
var ToggleIconControl = ({ enabled, onIconClick, label }) => {
|
|
1851
|
-
return /* @__PURE__ */
|
|
1891
|
+
return /* @__PURE__ */ React34.createElement(import_ui27.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label }, enabled ? /* @__PURE__ */ React34.createElement(import_icons7.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React34.createElement(import_icons7.PlusIcon, { fontSize: SIZE3 }));
|
|
1852
1892
|
};
|
|
1853
1893
|
var SwitchControl = () => {
|
|
1854
1894
|
const { value = false, setValue } = useBoundProp(import_editor_props16.booleanPropTypeUtil);
|
|
1855
1895
|
const onClick = () => {
|
|
1856
1896
|
setValue(!value);
|
|
1857
1897
|
};
|
|
1858
|
-
return /* @__PURE__ */
|
|
1898
|
+
return /* @__PURE__ */ React34.createElement(import_ui27.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React34.createElement(import_ui27.Grid, { item: true }, /* @__PURE__ */ React34.createElement(ControlFormLabel, null, (0, import_i18n9.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui27.Grid, { item: true }, /* @__PURE__ */ React34.createElement(import_ui27.Switch, { checked: value, onClick })));
|
|
1859
1899
|
};
|
|
1860
1900
|
async function fetchOptions(ajaxUrl, params) {
|
|
1861
1901
|
if (!params || !ajaxUrl) {
|
|
@@ -1887,10 +1927,10 @@ function generateFirstLoadedOption(unionValue) {
|
|
|
1887
1927
|
}
|
|
1888
1928
|
|
|
1889
1929
|
// src/controls/gap-control.tsx
|
|
1890
|
-
var
|
|
1930
|
+
var React35 = __toESM(require("react"));
|
|
1891
1931
|
var import_editor_props17 = require("@elementor/editor-props");
|
|
1892
1932
|
var import_icons8 = require("@elementor/icons");
|
|
1893
|
-
var
|
|
1933
|
+
var import_ui28 = require("@elementor/ui");
|
|
1894
1934
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1895
1935
|
var GapControl = createControl(({ label }) => {
|
|
1896
1936
|
const {
|
|
@@ -1915,8 +1955,8 @@ var GapControl = createControl(({ label }) => {
|
|
|
1915
1955
|
const LinkedIcon = isLinked ? import_icons8.LinkIcon : import_icons8.DetachIcon;
|
|
1916
1956
|
const linkedLabel = (0, import_i18n10.__)("Link %s", "elementor").replace("%s", tooltipLabel);
|
|
1917
1957
|
const unlinkedLabel = (0, import_i18n10.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
|
|
1918
|
-
return /* @__PURE__ */
|
|
1919
|
-
|
|
1958
|
+
return /* @__PURE__ */ React35.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React35.createElement(import_ui28.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(ControlLabel, null, label), /* @__PURE__ */ React35.createElement(import_ui28.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React35.createElement(
|
|
1959
|
+
import_ui28.ToggleButton,
|
|
1920
1960
|
{
|
|
1921
1961
|
"aria-label": isLinked ? unlinkedLabel : linkedLabel,
|
|
1922
1962
|
size: "tiny",
|
|
@@ -1925,30 +1965,30 @@ var GapControl = createControl(({ label }) => {
|
|
|
1925
1965
|
sx: { marginLeft: "auto" },
|
|
1926
1966
|
onChange: onLinkToggle
|
|
1927
1967
|
},
|
|
1928
|
-
/* @__PURE__ */
|
|
1929
|
-
))), /* @__PURE__ */
|
|
1968
|
+
/* @__PURE__ */ React35.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1969
|
+
))), /* @__PURE__ */ React35.createElement(import_ui28.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Column", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React35.createElement(import_ui28.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Row", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(Control4, { bind: "row", isLinked })))));
|
|
1930
1970
|
});
|
|
1931
1971
|
var Control4 = ({ bind, isLinked }) => {
|
|
1932
1972
|
if (isLinked) {
|
|
1933
|
-
return /* @__PURE__ */
|
|
1973
|
+
return /* @__PURE__ */ React35.createElement(SizeControl, null);
|
|
1934
1974
|
}
|
|
1935
|
-
return /* @__PURE__ */
|
|
1975
|
+
return /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React35.createElement(SizeControl, null));
|
|
1936
1976
|
};
|
|
1937
1977
|
|
|
1938
1978
|
// src/controls/svg-media-control.tsx
|
|
1939
|
-
var
|
|
1940
|
-
var
|
|
1979
|
+
var React37 = __toESM(require("react"));
|
|
1980
|
+
var import_react14 = require("react");
|
|
1941
1981
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
1942
1982
|
var import_icons9 = require("@elementor/icons");
|
|
1943
|
-
var
|
|
1983
|
+
var import_ui30 = require("@elementor/ui");
|
|
1944
1984
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
1945
1985
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1946
1986
|
|
|
1947
1987
|
// src/components/enable-unfiltered-modal.tsx
|
|
1948
|
-
var
|
|
1949
|
-
var
|
|
1988
|
+
var React36 = __toESM(require("react"));
|
|
1989
|
+
var import_react13 = require("react");
|
|
1950
1990
|
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
1951
|
-
var
|
|
1991
|
+
var import_ui29 = require("@elementor/ui");
|
|
1952
1992
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1953
1993
|
var ADMIN_TITLE_TEXT = (0, import_i18n11.__)("Enable Unfiltered Uploads", "elementor");
|
|
1954
1994
|
var ADMIN_CONTENT_TEXT = (0, import_i18n11.__)(
|
|
@@ -1969,7 +2009,7 @@ var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
|
|
|
1969
2009
|
var EnableUnfilteredModal = (props) => {
|
|
1970
2010
|
const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
|
|
1971
2011
|
const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
|
|
1972
|
-
const [isError, setIsError] = (0,
|
|
2012
|
+
const [isError, setIsError] = (0, import_react13.useState)(false);
|
|
1973
2013
|
const canManageOptions = canUser("manage_options");
|
|
1974
2014
|
const onClose = (enabled) => {
|
|
1975
2015
|
props.onClose(enabled);
|
|
@@ -1988,10 +2028,10 @@ var EnableUnfilteredModal = (props) => {
|
|
|
1988
2028
|
}
|
|
1989
2029
|
};
|
|
1990
2030
|
const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
|
|
1991
|
-
return canManageOptions ? /* @__PURE__ */
|
|
2031
|
+
return canManageOptions ? /* @__PURE__ */ React36.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React36.createElement(NonAdminDialog, { ...dialogProps });
|
|
1992
2032
|
};
|
|
1993
|
-
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */
|
|
1994
|
-
|
|
2033
|
+
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React36.createElement(import_ui29.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React36.createElement(import_ui29.DialogHeader, { logo: false }, /* @__PURE__ */ React36.createElement(import_ui29.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React36.createElement(import_ui29.Divider, null), /* @__PURE__ */ React36.createElement(import_ui29.DialogContent, null, /* @__PURE__ */ React36.createElement(import_ui29.DialogContentText, null, isError ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React36.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React36.createElement(import_ui29.DialogActions, null, /* @__PURE__ */ React36.createElement(import_ui29.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n11.__)("Cancel", "elementor")), /* @__PURE__ */ React36.createElement(
|
|
2034
|
+
import_ui29.Button,
|
|
1995
2035
|
{
|
|
1996
2036
|
size: "medium",
|
|
1997
2037
|
onClick: () => handleEnable(),
|
|
@@ -1999,16 +2039,16 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
1999
2039
|
color: "primary",
|
|
2000
2040
|
disabled: isPending
|
|
2001
2041
|
},
|
|
2002
|
-
isPending ? /* @__PURE__ */
|
|
2042
|
+
isPending ? /* @__PURE__ */ React36.createElement(import_ui29.CircularProgress, { size: 24 }) : (0, import_i18n11.__)("Enable", "elementor")
|
|
2003
2043
|
)));
|
|
2004
|
-
var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */
|
|
2044
|
+
var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React36.createElement(import_ui29.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React36.createElement(import_ui29.DialogHeader, { logo: false }, /* @__PURE__ */ React36.createElement(import_ui29.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React36.createElement(import_ui29.Divider, null), /* @__PURE__ */ React36.createElement(import_ui29.DialogContent, null, /* @__PURE__ */ React36.createElement(import_ui29.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React36.createElement(import_ui29.DialogActions, null, /* @__PURE__ */ React36.createElement(import_ui29.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n11.__)("Got it", "elementor"))));
|
|
2005
2045
|
|
|
2006
2046
|
// src/controls/svg-media-control.tsx
|
|
2007
2047
|
var TILE_SIZE = 8;
|
|
2008
2048
|
var TILE_WHITE = "transparent";
|
|
2009
2049
|
var TILE_BLACK = "#c1c1c1";
|
|
2010
2050
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
2011
|
-
var StyledCard = (0,
|
|
2051
|
+
var StyledCard = (0, import_ui30.styled)(import_ui30.Card)`
|
|
2012
2052
|
background-color: white;
|
|
2013
2053
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
2014
2054
|
background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
|
|
@@ -2017,7 +2057,7 @@ var StyledCard = (0, import_ui29.styled)(import_ui29.Card)`
|
|
|
2017
2057
|
${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
|
|
2018
2058
|
border: none;
|
|
2019
2059
|
`;
|
|
2020
|
-
var StyledCardMediaContainer = (0,
|
|
2060
|
+
var StyledCardMediaContainer = (0, import_ui30.styled)(import_ui30.Stack)`
|
|
2021
2061
|
position: relative;
|
|
2022
2062
|
height: 140px;
|
|
2023
2063
|
object-fit: contain;
|
|
@@ -2034,7 +2074,7 @@ var SvgMediaControl = createControl(() => {
|
|
|
2034
2074
|
const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
|
|
2035
2075
|
const src = attachment?.url ?? url?.value ?? null;
|
|
2036
2076
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
2037
|
-
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0,
|
|
2077
|
+
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react14.useState)(false);
|
|
2038
2078
|
const { open } = (0, import_wp_media2.useWpMediaFrame)({
|
|
2039
2079
|
mediaTypes: ["svg"],
|
|
2040
2080
|
multiple: false,
|
|
@@ -2062,16 +2102,16 @@ var SvgMediaControl = createControl(() => {
|
|
|
2062
2102
|
open(openOptions);
|
|
2063
2103
|
}
|
|
2064
2104
|
};
|
|
2065
|
-
return /* @__PURE__ */
|
|
2066
|
-
|
|
2105
|
+
return /* @__PURE__ */ React37.createElement(import_ui30.Stack, { gap: 1 }, /* @__PURE__ */ React37.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React37.createElement(ControlFormLabel, null, " ", (0, import_i18n12.__)("SVG", "elementor"), " "), /* @__PURE__ */ React37.createElement(ControlActions, null, /* @__PURE__ */ React37.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React37.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React37.createElement(import_ui30.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React37.createElement(
|
|
2106
|
+
import_ui30.CardMedia,
|
|
2067
2107
|
{
|
|
2068
2108
|
component: "img",
|
|
2069
2109
|
image: src,
|
|
2070
2110
|
alt: (0, import_i18n12.__)("Preview SVG", "elementor"),
|
|
2071
2111
|
sx: { maxHeight: "140px", width: "50px" }
|
|
2072
2112
|
}
|
|
2073
|
-
)), /* @__PURE__ */
|
|
2074
|
-
|
|
2113
|
+
)), /* @__PURE__ */ React37.createElement(
|
|
2114
|
+
import_ui30.CardOverlay,
|
|
2075
2115
|
{
|
|
2076
2116
|
sx: {
|
|
2077
2117
|
"&:hover": {
|
|
@@ -2079,8 +2119,8 @@ var SvgMediaControl = createControl(() => {
|
|
|
2079
2119
|
}
|
|
2080
2120
|
}
|
|
2081
2121
|
},
|
|
2082
|
-
/* @__PURE__ */
|
|
2083
|
-
|
|
2122
|
+
/* @__PURE__ */ React37.createElement(import_ui30.Stack, { gap: 1 }, /* @__PURE__ */ React37.createElement(
|
|
2123
|
+
import_ui30.Button,
|
|
2084
2124
|
{
|
|
2085
2125
|
size: "tiny",
|
|
2086
2126
|
color: "inherit",
|
|
@@ -2088,13 +2128,13 @@ var SvgMediaControl = createControl(() => {
|
|
|
2088
2128
|
onClick: () => handleClick(MODE_BROWSE)
|
|
2089
2129
|
},
|
|
2090
2130
|
(0, import_i18n12.__)("Select SVG", "elementor")
|
|
2091
|
-
), /* @__PURE__ */
|
|
2092
|
-
|
|
2131
|
+
), /* @__PURE__ */ React37.createElement(
|
|
2132
|
+
import_ui30.Button,
|
|
2093
2133
|
{
|
|
2094
2134
|
size: "tiny",
|
|
2095
2135
|
variant: "text",
|
|
2096
2136
|
color: "inherit",
|
|
2097
|
-
startIcon: /* @__PURE__ */
|
|
2137
|
+
startIcon: /* @__PURE__ */ React37.createElement(import_icons9.UploadIcon, null),
|
|
2098
2138
|
onClick: () => handleClick(MODE_UPLOAD)
|
|
2099
2139
|
},
|
|
2100
2140
|
(0, import_i18n12.__)("Upload", "elementor")
|
|
@@ -2103,15 +2143,15 @@ var SvgMediaControl = createControl(() => {
|
|
|
2103
2143
|
});
|
|
2104
2144
|
|
|
2105
2145
|
// src/controls/background-control/background-control.tsx
|
|
2106
|
-
var
|
|
2146
|
+
var React44 = __toESM(require("react"));
|
|
2107
2147
|
var import_editor_props24 = require("@elementor/editor-props");
|
|
2108
|
-
var
|
|
2148
|
+
var import_ui38 = require("@elementor/ui");
|
|
2109
2149
|
var import_i18n18 = require("@wordpress/i18n");
|
|
2110
2150
|
|
|
2111
2151
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
2112
|
-
var
|
|
2152
|
+
var React43 = __toESM(require("react"));
|
|
2113
2153
|
var import_editor_props23 = require("@elementor/editor-props");
|
|
2114
|
-
var
|
|
2154
|
+
var import_ui37 = require("@elementor/ui");
|
|
2115
2155
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
2116
2156
|
var import_i18n17 = require("@wordpress/i18n");
|
|
2117
2157
|
|
|
@@ -2120,9 +2160,9 @@ var import_env = require("@elementor/env");
|
|
|
2120
2160
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
2121
2161
|
|
|
2122
2162
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
2123
|
-
var
|
|
2163
|
+
var React38 = __toESM(require("react"));
|
|
2124
2164
|
var import_editor_props19 = require("@elementor/editor-props");
|
|
2125
|
-
var
|
|
2165
|
+
var import_ui31 = require("@elementor/ui");
|
|
2126
2166
|
var BackgroundGradientColorControl = createControl(() => {
|
|
2127
2167
|
const { value, setValue } = useBoundProp(import_editor_props19.backgroundGradientOverlayPropTypeUtil);
|
|
2128
2168
|
const handleChange = (newValue) => {
|
|
@@ -2160,8 +2200,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
2160
2200
|
positions: positions?.value.split(" ")
|
|
2161
2201
|
};
|
|
2162
2202
|
};
|
|
2163
|
-
return /* @__PURE__ */
|
|
2164
|
-
|
|
2203
|
+
return /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(
|
|
2204
|
+
import_ui31.UnstableGradientBox,
|
|
2165
2205
|
{
|
|
2166
2206
|
sx: { width: "auto", padding: 1.5 },
|
|
2167
2207
|
value: normalizeValue(),
|
|
@@ -2185,34 +2225,34 @@ var initialBackgroundGradientOverlay = import_editor_props19.backgroundGradientO
|
|
|
2185
2225
|
});
|
|
2186
2226
|
|
|
2187
2227
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
2188
|
-
var
|
|
2228
|
+
var React39 = __toESM(require("react"));
|
|
2189
2229
|
var import_icons10 = require("@elementor/icons");
|
|
2190
|
-
var
|
|
2230
|
+
var import_ui32 = require("@elementor/ui");
|
|
2191
2231
|
var import_i18n13 = require("@wordpress/i18n");
|
|
2192
2232
|
var attachmentControlOptions = [
|
|
2193
2233
|
{
|
|
2194
2234
|
value: "fixed",
|
|
2195
2235
|
label: (0, import_i18n13.__)("Fixed", "elementor"),
|
|
2196
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2236
|
+
renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(import_icons10.PinIcon, { fontSize: size }),
|
|
2197
2237
|
showTooltip: true
|
|
2198
2238
|
},
|
|
2199
2239
|
{
|
|
2200
2240
|
value: "scroll",
|
|
2201
2241
|
label: (0, import_i18n13.__)("Scroll", "elementor"),
|
|
2202
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2242
|
+
renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(import_icons10.PinnedOffIcon, { fontSize: size }),
|
|
2203
2243
|
showTooltip: true
|
|
2204
2244
|
}
|
|
2205
2245
|
];
|
|
2206
2246
|
var BackgroundImageOverlayAttachment = () => {
|
|
2207
|
-
return /* @__PURE__ */
|
|
2247
|
+
return /* @__PURE__ */ React39.createElement(PopoverGridContainer, null, /* @__PURE__ */ React39.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlFormLabel, null, (0, import_i18n13.__)("Attachment", "elementor"))), /* @__PURE__ */ React39.createElement(import_ui32.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React39.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
2208
2248
|
};
|
|
2209
2249
|
|
|
2210
2250
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
2211
|
-
var
|
|
2251
|
+
var React40 = __toESM(require("react"));
|
|
2212
2252
|
var import_editor_props20 = require("@elementor/editor-props");
|
|
2213
2253
|
var import_editor_ui3 = require("@elementor/editor-ui");
|
|
2214
2254
|
var import_icons11 = require("@elementor/icons");
|
|
2215
|
-
var
|
|
2255
|
+
var import_ui33 = require("@elementor/ui");
|
|
2216
2256
|
var import_i18n14 = require("@wordpress/i18n");
|
|
2217
2257
|
var backgroundPositionOptions = [
|
|
2218
2258
|
{ label: (0, import_i18n14.__)("Center center", "elementor"), value: "center center" },
|
|
@@ -2238,82 +2278,82 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
2238
2278
|
stringPropContext.setValue(value);
|
|
2239
2279
|
}
|
|
2240
2280
|
};
|
|
2241
|
-
return /* @__PURE__ */
|
|
2242
|
-
|
|
2281
|
+
return /* @__PURE__ */ React40.createElement(import_ui33.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(PopoverGridContainer, null, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlFormLabel, null, (0, import_i18n14.__)("Position", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(
|
|
2282
|
+
import_ui33.Select,
|
|
2243
2283
|
{
|
|
2244
2284
|
size: "tiny",
|
|
2245
2285
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? "",
|
|
2246
2286
|
onChange: handlePositionChange,
|
|
2247
2287
|
fullWidth: true
|
|
2248
2288
|
},
|
|
2249
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
2250
|
-
)))), isCustom ? /* @__PURE__ */
|
|
2289
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React40.createElement(import_editor_ui3.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
2290
|
+
)))), isCustom ? /* @__PURE__ */ React40.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React40.createElement(SizeControl, { startIcon: /* @__PURE__ */ React40.createElement(import_icons11.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React40.createElement(SizeControl, { startIcon: /* @__PURE__ */ React40.createElement(import_icons11.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
|
|
2251
2291
|
};
|
|
2252
2292
|
|
|
2253
2293
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
2254
|
-
var
|
|
2294
|
+
var React41 = __toESM(require("react"));
|
|
2255
2295
|
var import_icons12 = require("@elementor/icons");
|
|
2256
|
-
var
|
|
2296
|
+
var import_ui34 = require("@elementor/ui");
|
|
2257
2297
|
var import_i18n15 = require("@wordpress/i18n");
|
|
2258
2298
|
var repeatControlOptions = [
|
|
2259
2299
|
{
|
|
2260
2300
|
value: "repeat",
|
|
2261
2301
|
label: (0, import_i18n15.__)("Repeat", "elementor"),
|
|
2262
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2302
|
+
renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons12.GridDotsIcon, { fontSize: size }),
|
|
2263
2303
|
showTooltip: true
|
|
2264
2304
|
},
|
|
2265
2305
|
{
|
|
2266
2306
|
value: "repeat-x",
|
|
2267
2307
|
label: (0, import_i18n15.__)("Repeat-x", "elementor"),
|
|
2268
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2308
|
+
renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons12.DotsHorizontalIcon, { fontSize: size }),
|
|
2269
2309
|
showTooltip: true
|
|
2270
2310
|
},
|
|
2271
2311
|
{
|
|
2272
2312
|
value: "repeat-y",
|
|
2273
2313
|
label: (0, import_i18n15.__)("Repeat-y", "elementor"),
|
|
2274
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2314
|
+
renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons12.DotsVerticalIcon, { fontSize: size }),
|
|
2275
2315
|
showTooltip: true
|
|
2276
2316
|
},
|
|
2277
2317
|
{
|
|
2278
2318
|
value: "no-repeat",
|
|
2279
2319
|
label: (0, import_i18n15.__)("No-repeat", "elementor"),
|
|
2280
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2320
|
+
renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons12.XIcon, { fontSize: size }),
|
|
2281
2321
|
showTooltip: true
|
|
2282
2322
|
}
|
|
2283
2323
|
];
|
|
2284
2324
|
var BackgroundImageOverlayRepeat = () => {
|
|
2285
|
-
return /* @__PURE__ */
|
|
2325
|
+
return /* @__PURE__ */ React41.createElement(PopoverGridContainer, null, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Repeat", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
2286
2326
|
};
|
|
2287
2327
|
|
|
2288
2328
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
2289
|
-
var
|
|
2329
|
+
var React42 = __toESM(require("react"));
|
|
2290
2330
|
var import_editor_props21 = require("@elementor/editor-props");
|
|
2291
2331
|
var import_icons13 = require("@elementor/icons");
|
|
2292
|
-
var
|
|
2332
|
+
var import_ui35 = require("@elementor/ui");
|
|
2293
2333
|
var import_i18n16 = require("@wordpress/i18n");
|
|
2294
2334
|
var sizeControlOptions = [
|
|
2295
2335
|
{
|
|
2296
2336
|
value: "auto",
|
|
2297
2337
|
label: (0, import_i18n16.__)("Auto", "elementor"),
|
|
2298
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2338
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.LetterAIcon, { fontSize: size }),
|
|
2299
2339
|
showTooltip: true
|
|
2300
2340
|
},
|
|
2301
2341
|
{
|
|
2302
2342
|
value: "cover",
|
|
2303
2343
|
label: (0, import_i18n16.__)("Cover", "elementor"),
|
|
2304
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2344
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.ArrowsMaximizeIcon, { fontSize: size }),
|
|
2305
2345
|
showTooltip: true
|
|
2306
2346
|
},
|
|
2307
2347
|
{
|
|
2308
2348
|
value: "contain",
|
|
2309
2349
|
label: (0, import_i18n16.__)("Contain", "elementor"),
|
|
2310
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2350
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.ArrowBarBothIcon, { fontSize: size }),
|
|
2311
2351
|
showTooltip: true
|
|
2312
2352
|
},
|
|
2313
2353
|
{
|
|
2314
2354
|
value: "custom",
|
|
2315
2355
|
label: (0, import_i18n16.__)("Custom", "elementor"),
|
|
2316
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2356
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.PencilIcon, { fontSize: size }),
|
|
2317
2357
|
showTooltip: true
|
|
2318
2358
|
}
|
|
2319
2359
|
];
|
|
@@ -2328,7 +2368,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2328
2368
|
stringPropContext.setValue(size);
|
|
2329
2369
|
}
|
|
2330
2370
|
};
|
|
2331
|
-
return /* @__PURE__ */
|
|
2371
|
+
return /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, (0, import_i18n16.__)("Size", "elementor"))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React42.createElement(
|
|
2332
2372
|
ControlToggleButtonGroup,
|
|
2333
2373
|
{
|
|
2334
2374
|
exclusive: true,
|
|
@@ -2336,25 +2376,25 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2336
2376
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
|
|
2337
2377
|
onChange: handleSizeChange
|
|
2338
2378
|
}
|
|
2339
|
-
)))), isCustom ? /* @__PURE__ */
|
|
2379
|
+
)))), isCustom ? /* @__PURE__ */ React42.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React42.createElement(
|
|
2340
2380
|
SizeControl,
|
|
2341
2381
|
{
|
|
2342
|
-
startIcon: /* @__PURE__ */
|
|
2382
|
+
startIcon: /* @__PURE__ */ React42.createElement(import_icons13.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
2343
2383
|
extendedValues: ["auto"]
|
|
2344
2384
|
}
|
|
2345
|
-
))), /* @__PURE__ */
|
|
2385
|
+
))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React42.createElement(
|
|
2346
2386
|
SizeControl,
|
|
2347
2387
|
{
|
|
2348
|
-
startIcon: /* @__PURE__ */
|
|
2388
|
+
startIcon: /* @__PURE__ */ React42.createElement(import_icons13.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
2349
2389
|
extendedValues: ["auto"]
|
|
2350
2390
|
}
|
|
2351
2391
|
)))))) : null);
|
|
2352
2392
|
};
|
|
2353
2393
|
|
|
2354
2394
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
2355
|
-
var
|
|
2395
|
+
var import_react15 = require("react");
|
|
2356
2396
|
var import_editor_props22 = require("@elementor/editor-props");
|
|
2357
|
-
var
|
|
2397
|
+
var import_ui36 = require("@elementor/ui");
|
|
2358
2398
|
var useBackgroundTabsHistory = ({
|
|
2359
2399
|
color: initialBackgroundColorOverlay2,
|
|
2360
2400
|
image: initialBackgroundImageOverlay,
|
|
@@ -2372,8 +2412,8 @@ var useBackgroundTabsHistory = ({
|
|
|
2372
2412
|
}
|
|
2373
2413
|
return "image";
|
|
2374
2414
|
};
|
|
2375
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
2376
|
-
const valuesHistory = (0,
|
|
2415
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui36.useTabs)(getCurrentOverlayType());
|
|
2416
|
+
const valuesHistory = (0, import_react15.useRef)({
|
|
2377
2417
|
image: initialBackgroundImageOverlay,
|
|
2378
2418
|
color: initialBackgroundColorOverlay2,
|
|
2379
2419
|
gradient: initialBackgroundGradientOverlay2
|
|
@@ -2448,7 +2488,7 @@ var backgroundResolutionOptions = [
|
|
|
2448
2488
|
];
|
|
2449
2489
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
2450
2490
|
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props23.backgroundOverlayPropTypeUtil);
|
|
2451
|
-
return /* @__PURE__ */
|
|
2491
|
+
return /* @__PURE__ */ React43.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React43.createElement(
|
|
2452
2492
|
Repeater,
|
|
2453
2493
|
{
|
|
2454
2494
|
openOnAdd: true,
|
|
@@ -2465,7 +2505,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
2465
2505
|
));
|
|
2466
2506
|
});
|
|
2467
2507
|
var ItemContent2 = ({ bind }) => {
|
|
2468
|
-
return /* @__PURE__ */
|
|
2508
|
+
return /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React43.createElement(Content2, null));
|
|
2469
2509
|
};
|
|
2470
2510
|
var Content2 = () => {
|
|
2471
2511
|
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
@@ -2473,27 +2513,27 @@ var Content2 = () => {
|
|
|
2473
2513
|
color: initialBackgroundColorOverlay.value,
|
|
2474
2514
|
gradient: initialBackgroundGradientOverlay.value
|
|
2475
2515
|
});
|
|
2476
|
-
return /* @__PURE__ */
|
|
2477
|
-
|
|
2516
|
+
return /* @__PURE__ */ React43.createElement(import_ui37.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React43.createElement(import_ui37.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React43.createElement(
|
|
2517
|
+
import_ui37.Tabs,
|
|
2478
2518
|
{
|
|
2479
2519
|
size: "small",
|
|
2480
2520
|
variant: "fullWidth",
|
|
2481
2521
|
...getTabsProps(),
|
|
2482
2522
|
"aria-label": (0, import_i18n17.__)("Background Overlay", "elementor")
|
|
2483
2523
|
},
|
|
2484
|
-
/* @__PURE__ */
|
|
2485
|
-
/* @__PURE__ */
|
|
2486
|
-
/* @__PURE__ */
|
|
2487
|
-
)), /* @__PURE__ */
|
|
2524
|
+
/* @__PURE__ */ React43.createElement(import_ui37.Tab, { label: (0, import_i18n17.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
2525
|
+
/* @__PURE__ */ React43.createElement(import_ui37.Tab, { label: (0, import_i18n17.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
2526
|
+
/* @__PURE__ */ React43.createElement(import_ui37.Tab, { label: (0, import_i18n17.__)("Color", "elementor"), ...getTabProps("color") })
|
|
2527
|
+
)), /* @__PURE__ */ React43.createElement(import_ui37.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React43.createElement(PopoverContent, null, /* @__PURE__ */ React43.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React43.createElement(import_ui37.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React43.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React43.createElement(import_ui37.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React43.createElement(PopoverContent, null, /* @__PURE__ */ React43.createElement(ColorOverlayContent, null))));
|
|
2488
2528
|
};
|
|
2489
2529
|
var ItemIcon2 = ({ value }) => {
|
|
2490
2530
|
switch (value.$$type) {
|
|
2491
2531
|
case "background-image-overlay":
|
|
2492
|
-
return /* @__PURE__ */
|
|
2532
|
+
return /* @__PURE__ */ React43.createElement(ItemIconImage, { value });
|
|
2493
2533
|
case "background-color-overlay":
|
|
2494
|
-
return /* @__PURE__ */
|
|
2534
|
+
return /* @__PURE__ */ React43.createElement(ItemIconColor, { value });
|
|
2495
2535
|
case "background-gradient-overlay":
|
|
2496
|
-
return /* @__PURE__ */
|
|
2536
|
+
return /* @__PURE__ */ React43.createElement(ItemIconGradient, { value });
|
|
2497
2537
|
default:
|
|
2498
2538
|
return null;
|
|
2499
2539
|
}
|
|
@@ -2506,56 +2546,70 @@ var extractColorFrom = (prop) => {
|
|
|
2506
2546
|
};
|
|
2507
2547
|
var ItemIconColor = ({ value: prop }) => {
|
|
2508
2548
|
const color = extractColorFrom(prop);
|
|
2509
|
-
return /* @__PURE__ */
|
|
2549
|
+
return /* @__PURE__ */ React43.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
|
|
2510
2550
|
};
|
|
2511
2551
|
var ItemIconImage = ({ value }) => {
|
|
2512
2552
|
const { imageUrl } = useImage(value);
|
|
2513
|
-
return /* @__PURE__ */
|
|
2553
|
+
return /* @__PURE__ */ React43.createElement(
|
|
2554
|
+
import_ui37.CardMedia,
|
|
2555
|
+
{
|
|
2556
|
+
image: imageUrl,
|
|
2557
|
+
sx: (theme) => ({
|
|
2558
|
+
height: "1em",
|
|
2559
|
+
width: "1em",
|
|
2560
|
+
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
2561
|
+
outline: `1px solid ${theme.palette.action.disabled}`
|
|
2562
|
+
})
|
|
2563
|
+
}
|
|
2564
|
+
);
|
|
2514
2565
|
};
|
|
2515
2566
|
var ItemIconGradient = ({ value }) => {
|
|
2516
2567
|
const gradient = getGradientValue(value);
|
|
2517
|
-
return /* @__PURE__ */
|
|
2568
|
+
return /* @__PURE__ */ React43.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
2518
2569
|
};
|
|
2519
2570
|
var ItemLabel2 = ({ value }) => {
|
|
2520
2571
|
switch (value.$$type) {
|
|
2521
2572
|
case "background-image-overlay":
|
|
2522
|
-
return /* @__PURE__ */
|
|
2573
|
+
return /* @__PURE__ */ React43.createElement(ItemLabelImage, { value });
|
|
2523
2574
|
case "background-color-overlay":
|
|
2524
|
-
return /* @__PURE__ */
|
|
2575
|
+
return /* @__PURE__ */ React43.createElement(ItemLabelColor, { value });
|
|
2525
2576
|
case "background-gradient-overlay":
|
|
2526
|
-
return /* @__PURE__ */
|
|
2577
|
+
return /* @__PURE__ */ React43.createElement(ItemLabelGradient, { value });
|
|
2527
2578
|
default:
|
|
2528
2579
|
return null;
|
|
2529
2580
|
}
|
|
2530
2581
|
};
|
|
2531
2582
|
var ItemLabelColor = ({ value: prop }) => {
|
|
2532
2583
|
const color = extractColorFrom(prop);
|
|
2533
|
-
return /* @__PURE__ */
|
|
2584
|
+
return /* @__PURE__ */ React43.createElement("span", null, color);
|
|
2534
2585
|
};
|
|
2535
2586
|
var ItemLabelImage = ({ value }) => {
|
|
2536
2587
|
const { imageTitle } = useImage(value);
|
|
2537
|
-
return /* @__PURE__ */
|
|
2588
|
+
return /* @__PURE__ */ React43.createElement("span", null, imageTitle);
|
|
2538
2589
|
};
|
|
2539
2590
|
var ItemLabelGradient = ({ value }) => {
|
|
2540
2591
|
if (value.value.type.value === "linear") {
|
|
2541
|
-
return /* @__PURE__ */
|
|
2592
|
+
return /* @__PURE__ */ React43.createElement("span", null, (0, import_i18n17.__)("Linear Gradient", "elementor"));
|
|
2542
2593
|
}
|
|
2543
|
-
return /* @__PURE__ */
|
|
2594
|
+
return /* @__PURE__ */ React43.createElement("span", null, (0, import_i18n17.__)("Radial Gradient", "elementor"));
|
|
2544
2595
|
};
|
|
2545
2596
|
var ColorOverlayContent = () => {
|
|
2546
2597
|
const propContext = useBoundProp(import_editor_props23.backgroundColorOverlayPropTypeUtil);
|
|
2547
|
-
return /* @__PURE__ */
|
|
2598
|
+
return /* @__PURE__ */ React43.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React43.createElement(ColorControl, null)));
|
|
2548
2599
|
};
|
|
2549
2600
|
var ImageOverlayContent = () => {
|
|
2550
2601
|
const propContext = useBoundProp(import_editor_props23.backgroundImageOverlayPropTypeUtil);
|
|
2551
|
-
return /* @__PURE__ */
|
|
2602
|
+
return /* @__PURE__ */ React43.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React43.createElement(import_ui37.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React43.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(
|
|
2552
2603
|
ImageControl,
|
|
2553
2604
|
{
|
|
2554
2605
|
resolutionLabel: (0, import_i18n17.__)("Resolution", "elementor"),
|
|
2555
2606
|
sizes: backgroundResolutionOptions
|
|
2556
2607
|
}
|
|
2557
|
-
)))), /* @__PURE__ */
|
|
2608
|
+
)))), /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React43.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React43.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React43.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React43.createElement(BackgroundImageOverlayAttachment, null)));
|
|
2558
2609
|
};
|
|
2610
|
+
var StyledUnstableColorIndicator = (0, import_ui37.styled)(import_ui37.UnstableColorIndicator)(({ theme }) => ({
|
|
2611
|
+
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
2612
|
+
}));
|
|
2559
2613
|
var useImage = (image) => {
|
|
2560
2614
|
let imageTitle, imageUrl = null;
|
|
2561
2615
|
const imageSrc = image?.value.image.value?.src.value;
|
|
@@ -2582,28 +2636,8 @@ var getGradientValue = (value) => {
|
|
|
2582
2636
|
// src/controls/background-control/background-control.tsx
|
|
2583
2637
|
var BackgroundControl = createControl(() => {
|
|
2584
2638
|
const propContext = useBoundProp(import_editor_props24.backgroundPropTypeUtil);
|
|
2585
|
-
return /* @__PURE__ */
|
|
2639
|
+
return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React44.createElement(SectionContent, null, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React44.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React44.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, (0, import_i18n18.__)("Color", "elementor"))), /* @__PURE__ */ React44.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ColorControl, null))))));
|
|
2586
2640
|
});
|
|
2587
|
-
|
|
2588
|
-
// src/control-adornments/control-adornments-context.tsx
|
|
2589
|
-
var React42 = __toESM(require("react"));
|
|
2590
|
-
var import_react15 = require("react");
|
|
2591
|
-
var Context2 = (0, import_react15.createContext)(null);
|
|
2592
|
-
var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React42.createElement(Context2.Provider, { value: { items } }, children);
|
|
2593
|
-
var useControlAdornments = () => {
|
|
2594
|
-
const context = (0, import_react15.useContext)(Context2);
|
|
2595
|
-
return context?.items ?? [];
|
|
2596
|
-
};
|
|
2597
|
-
|
|
2598
|
-
// src/control-adornments/control-adornments.tsx
|
|
2599
|
-
var React43 = __toESM(require("react"));
|
|
2600
|
-
function ControlAdornments() {
|
|
2601
|
-
const items = useControlAdornments();
|
|
2602
|
-
if (items?.length === 0) {
|
|
2603
|
-
return null;
|
|
2604
|
-
}
|
|
2605
|
-
return /* @__PURE__ */ React43.createElement(React43.Fragment, null, items.map(({ Adornment, id }) => /* @__PURE__ */ React43.createElement(Adornment, { key: id })));
|
|
2606
|
-
}
|
|
2607
2641
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2608
2642
|
0 && (module.exports = {
|
|
2609
2643
|
BackgroundControl,
|
|
@@ -2612,7 +2646,7 @@ function ControlAdornments() {
|
|
|
2612
2646
|
ControlActionsProvider,
|
|
2613
2647
|
ControlAdornments,
|
|
2614
2648
|
ControlAdornmentsProvider,
|
|
2615
|
-
|
|
2649
|
+
ControlFormLabel,
|
|
2616
2650
|
ControlReplacementProvider,
|
|
2617
2651
|
ControlToggleButtonGroup,
|
|
2618
2652
|
EqualUnequalSizesControl,
|