@elementor/editor-controls 4.0.0-609 → 4.0.0-621
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/dist/index.d.mts +17 -4
- package/dist/index.d.ts +17 -4
- package/dist/index.js +905 -761
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +684 -542
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -15
- package/src/components/size-control/size-input.tsx +20 -13
- package/src/components/text-field-popover.tsx +7 -0
- package/src/controls/aspect-ratio-control.tsx +12 -1
- package/src/controls/number-control.tsx +10 -2
- package/src/controls/svg-media-control.tsx +1 -1
- package/src/controls/transform-control/transform-repeater-control.tsx +19 -19
- package/src/controls/transition-control/data.ts +2 -4
- package/src/controls/video-media-control.tsx +102 -0
- package/src/hooks/use-typing-buffer.ts +52 -0
- package/src/index.ts +10 -2
- package/src/hooks/use-element-can-have-children.ts +0 -17
package/dist/index.js
CHANGED
|
@@ -85,6 +85,7 @@ __export(index_exports, {
|
|
|
85
85
|
TransitionRepeaterControl: () => TransitionRepeaterControl,
|
|
86
86
|
UnstableSizeField: () => UnstableSizeField,
|
|
87
87
|
UrlControl: () => UrlControl,
|
|
88
|
+
VideoMediaControl: () => VideoMediaControl,
|
|
88
89
|
createControl: () => createControl,
|
|
89
90
|
createControlReplacementsRegistry: () => createControlReplacementsRegistry,
|
|
90
91
|
enqueueFont: () => enqueueFont,
|
|
@@ -92,15 +93,16 @@ __export(index_exports, {
|
|
|
92
93
|
injectIntoRepeaterItemActions: () => injectIntoRepeaterItemActions,
|
|
93
94
|
injectIntoRepeaterItemIcon: () => injectIntoRepeaterItemIcon,
|
|
94
95
|
injectIntoRepeaterItemLabel: () => injectIntoRepeaterItemLabel,
|
|
96
|
+
isUnitExtendedOption: () => isUnitExtendedOption,
|
|
95
97
|
registerControlReplacement: () => registerControlReplacement,
|
|
96
98
|
transitionProperties: () => transitionProperties,
|
|
97
99
|
transitionsItemsList: () => transitionsItemsList,
|
|
98
100
|
useBoundProp: () => useBoundProp,
|
|
99
101
|
useControlActions: () => useControlActions,
|
|
100
102
|
useControlReplacement: () => useControlReplacement,
|
|
101
|
-
useElementCanHaveChildren: () => useElementCanHaveChildren,
|
|
102
103
|
useFontFamilies: () => useFontFamilies,
|
|
103
|
-
useSyncExternalState: () => useSyncExternalState
|
|
104
|
+
useSyncExternalState: () => useSyncExternalState,
|
|
105
|
+
useTypingBuffer: () => useTypingBuffer
|
|
104
106
|
});
|
|
105
107
|
module.exports = __toCommonJS(index_exports);
|
|
106
108
|
|
|
@@ -644,10 +646,48 @@ var import_ui13 = require("@elementor/ui");
|
|
|
644
646
|
|
|
645
647
|
// src/components/size-control/size-input.tsx
|
|
646
648
|
var React18 = __toESM(require("react"));
|
|
647
|
-
var import_react9 = require("react");
|
|
648
649
|
var import_icons2 = require("@elementor/icons");
|
|
649
650
|
var import_ui11 = require("@elementor/ui");
|
|
650
651
|
|
|
652
|
+
// src/hooks/use-typing-buffer.ts
|
|
653
|
+
var import_react7 = require("react");
|
|
654
|
+
function useTypingBuffer(options = {}) {
|
|
655
|
+
const { limit = 3, timeout = 600 } = options;
|
|
656
|
+
const inputBufferRef = (0, import_react7.useRef)("");
|
|
657
|
+
const timeoutRef = (0, import_react7.useRef)(null);
|
|
658
|
+
const appendKey = (key) => {
|
|
659
|
+
inputBufferRef.current = (inputBufferRef.current + key).slice(-limit);
|
|
660
|
+
if (timeoutRef.current) {
|
|
661
|
+
clearTimeout(timeoutRef.current);
|
|
662
|
+
}
|
|
663
|
+
timeoutRef.current = setTimeout(() => {
|
|
664
|
+
inputBufferRef.current = "";
|
|
665
|
+
timeoutRef.current = null;
|
|
666
|
+
}, timeout);
|
|
667
|
+
return inputBufferRef.current;
|
|
668
|
+
};
|
|
669
|
+
const startsWith = (haystack, needle) => {
|
|
670
|
+
if (3 < haystack.length && 2 > needle.length) {
|
|
671
|
+
return false;
|
|
672
|
+
}
|
|
673
|
+
return haystack.startsWith(needle);
|
|
674
|
+
};
|
|
675
|
+
(0, import_react7.useEffect)(() => {
|
|
676
|
+
return () => {
|
|
677
|
+
inputBufferRef.current = "";
|
|
678
|
+
if (timeoutRef.current) {
|
|
679
|
+
clearTimeout(timeoutRef.current);
|
|
680
|
+
timeoutRef.current = null;
|
|
681
|
+
}
|
|
682
|
+
};
|
|
683
|
+
}, []);
|
|
684
|
+
return {
|
|
685
|
+
buffer: inputBufferRef.current,
|
|
686
|
+
appendKey,
|
|
687
|
+
startsWith
|
|
688
|
+
};
|
|
689
|
+
}
|
|
690
|
+
|
|
651
691
|
// src/utils/size-control.ts
|
|
652
692
|
var lengthUnits = ["px", "%", "em", "rem", "vw", "vh", "ch"];
|
|
653
693
|
var angleUnits = ["deg", "rad", "grad", "turn"];
|
|
@@ -661,18 +701,18 @@ function isUnitExtendedOption(unit) {
|
|
|
661
701
|
|
|
662
702
|
// src/components/size-control/text-field-inner-selection.tsx
|
|
663
703
|
var React17 = __toESM(require("react"));
|
|
664
|
-
var
|
|
704
|
+
var import_react9 = require("react");
|
|
665
705
|
var import_editor_props6 = require("@elementor/editor-props");
|
|
666
706
|
var import_editor_ui3 = require("@elementor/editor-ui");
|
|
667
707
|
var import_ui10 = require("@elementor/ui");
|
|
668
708
|
|
|
669
709
|
// src/components/number-input.tsx
|
|
670
710
|
var React16 = __toESM(require("react"));
|
|
671
|
-
var
|
|
711
|
+
var import_react8 = require("react");
|
|
672
712
|
var import_ui9 = require("@elementor/ui");
|
|
673
713
|
var RESTRICTED_INPUT_KEYS = ["e", "E", "+"];
|
|
674
|
-
var NumberInput = (0,
|
|
675
|
-
const [key, setKey] = (0,
|
|
714
|
+
var NumberInput = (0, import_react8.forwardRef)((props, ref) => {
|
|
715
|
+
const [key, setKey] = (0, import_react8.useState)(0);
|
|
676
716
|
const handleKeyDown = (event) => {
|
|
677
717
|
blockRestrictedKeys(event, props.inputProps?.min);
|
|
678
718
|
props.onKeyDown?.(event);
|
|
@@ -697,7 +737,7 @@ function blockRestrictedKeys(event, min) {
|
|
|
697
737
|
}
|
|
698
738
|
|
|
699
739
|
// src/components/size-control/text-field-inner-selection.tsx
|
|
700
|
-
var TextFieldInnerSelection = (0,
|
|
740
|
+
var TextFieldInnerSelection = (0, import_react9.forwardRef)(
|
|
701
741
|
({
|
|
702
742
|
placeholder,
|
|
703
743
|
type,
|
|
@@ -749,7 +789,7 @@ var SelectionEndAdornment = ({
|
|
|
749
789
|
}) => {
|
|
750
790
|
const popupState = (0, import_ui10.usePopupState)({
|
|
751
791
|
variant: "popover",
|
|
752
|
-
popupId: (0,
|
|
792
|
+
popupId: (0, import_react9.useId)()
|
|
753
793
|
});
|
|
754
794
|
const handleMenuItemClick = (index) => {
|
|
755
795
|
onClick(options[index]);
|
|
@@ -820,7 +860,6 @@ var StyledButton = (0, import_ui10.styled)(import_ui10.Button, {
|
|
|
820
860
|
}));
|
|
821
861
|
|
|
822
862
|
// src/components/size-control/size-input.tsx
|
|
823
|
-
var RESTRICTED_KEYBOARD_SHORTCUT_UNITS = ["auto"];
|
|
824
863
|
var SizeInput = ({
|
|
825
864
|
units: units2,
|
|
826
865
|
handleUnitChange,
|
|
@@ -838,19 +877,28 @@ var SizeInput = ({
|
|
|
838
877
|
id,
|
|
839
878
|
ariaLabel
|
|
840
879
|
}) => {
|
|
841
|
-
const
|
|
880
|
+
const { appendKey, startsWith } = useTypingBuffer();
|
|
842
881
|
const inputType = isUnitExtendedOption(unit) ? "text" : "number";
|
|
843
882
|
const inputValue = !isUnitExtendedOption(unit) && Number.isNaN(size) ? "" : size ?? "";
|
|
844
|
-
const
|
|
845
|
-
const { key } = event;
|
|
883
|
+
const handleKeyDown = (event) => {
|
|
884
|
+
const { key, altKey, ctrlKey, metaKey } = event;
|
|
885
|
+
if (altKey || ctrlKey || metaKey) {
|
|
886
|
+
return;
|
|
887
|
+
}
|
|
888
|
+
if (isUnitExtendedOption(unit) && !isNaN(Number(key))) {
|
|
889
|
+
const defaultUnit = units2?.[0];
|
|
890
|
+
if (defaultUnit) {
|
|
891
|
+
handleUnitChange(defaultUnit);
|
|
892
|
+
}
|
|
893
|
+
return;
|
|
894
|
+
}
|
|
846
895
|
if (!/^[a-zA-Z%]$/.test(key)) {
|
|
847
896
|
return;
|
|
848
897
|
}
|
|
849
898
|
event.preventDefault();
|
|
850
899
|
const newChar = key.toLowerCase();
|
|
851
|
-
const updatedBuffer = (
|
|
852
|
-
|
|
853
|
-
const matchedUnit = units2.find((u) => !RESTRICTED_KEYBOARD_SHORTCUT_UNITS.includes(u) && u.includes(updatedBuffer)) || units2.find((u) => !RESTRICTED_KEYBOARD_SHORTCUT_UNITS.includes(u) && u.startsWith(newChar)) || units2.find((u) => !RESTRICTED_KEYBOARD_SHORTCUT_UNITS.includes(u) && u.includes(newChar));
|
|
900
|
+
const updatedBuffer = appendKey(newChar);
|
|
901
|
+
const matchedUnit = units2.find((u) => startsWith(u, updatedBuffer));
|
|
854
902
|
if (matchedUnit) {
|
|
855
903
|
handleUnitChange(matchedUnit);
|
|
856
904
|
}
|
|
@@ -892,7 +940,7 @@ var SizeInput = ({
|
|
|
892
940
|
type: inputType,
|
|
893
941
|
value: inputValue,
|
|
894
942
|
onChange: handleSizeChange,
|
|
895
|
-
|
|
943
|
+
onKeyDown: handleKeyDown,
|
|
896
944
|
onBlur,
|
|
897
945
|
InputProps,
|
|
898
946
|
inputProps: { min, step: "any", "aria-label": ariaLabel },
|
|
@@ -922,6 +970,11 @@ var TextFieldPopover = (props) => {
|
|
|
922
970
|
});
|
|
923
971
|
}
|
|
924
972
|
}, [popupState.isOpen]);
|
|
973
|
+
const handleKeyPress = (event) => {
|
|
974
|
+
if (event.key.toLowerCase() === "enter") {
|
|
975
|
+
handleClose();
|
|
976
|
+
}
|
|
977
|
+
};
|
|
925
978
|
const handleClose = () => {
|
|
926
979
|
restoreValue();
|
|
927
980
|
popupState.close();
|
|
@@ -956,6 +1009,7 @@ var TextFieldPopover = (props) => {
|
|
|
956
1009
|
{
|
|
957
1010
|
value,
|
|
958
1011
|
onChange,
|
|
1012
|
+
onKeyPress: handleKeyPress,
|
|
959
1013
|
size: "tiny",
|
|
960
1014
|
type: "text",
|
|
961
1015
|
fullWidth: true,
|
|
@@ -2622,6 +2676,12 @@ var React55 = __toESM(require("react"));
|
|
|
2622
2676
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
2623
2677
|
var import_ui40 = require("@elementor/ui");
|
|
2624
2678
|
var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
|
|
2679
|
+
var renderSuffix = (propType) => {
|
|
2680
|
+
if (propType.meta?.suffix) {
|
|
2681
|
+
return /* @__PURE__ */ React55.createElement(import_ui40.InputAdornment, { position: "end" }, propType.meta.suffix);
|
|
2682
|
+
}
|
|
2683
|
+
return /* @__PURE__ */ React55.createElement(React55.Fragment, null);
|
|
2684
|
+
};
|
|
2625
2685
|
var NumberControl = createControl(
|
|
2626
2686
|
({
|
|
2627
2687
|
placeholder: labelPlaceholder,
|
|
@@ -2631,7 +2691,7 @@ var NumberControl = createControl(
|
|
|
2631
2691
|
shouldForceInt = false,
|
|
2632
2692
|
startIcon
|
|
2633
2693
|
}) => {
|
|
2634
|
-
const { value, setValue, placeholder, disabled, restoreValue } = useBoundProp(import_editor_props18.numberPropTypeUtil);
|
|
2694
|
+
const { value, setValue, placeholder, disabled, restoreValue, propType } = useBoundProp(import_editor_props18.numberPropTypeUtil);
|
|
2635
2695
|
const handleChange = (event) => {
|
|
2636
2696
|
const {
|
|
2637
2697
|
value: eventValue,
|
|
@@ -2662,7 +2722,8 @@ var NumberControl = createControl(
|
|
|
2662
2722
|
placeholder: labelPlaceholder ?? (isEmptyOrNaN(placeholder) ? "" : String(placeholder)),
|
|
2663
2723
|
inputProps: { step, min },
|
|
2664
2724
|
InputProps: {
|
|
2665
|
-
startAdornment: startIcon ? /* @__PURE__ */ React55.createElement(import_ui40.InputAdornment, { position: "start", disabled }, startIcon) : void 0
|
|
2725
|
+
startAdornment: startIcon ? /* @__PURE__ */ React55.createElement(import_ui40.InputAdornment, { position: "start", disabled }, startIcon) : void 0,
|
|
2726
|
+
endAdornment: renderSuffix(propType)
|
|
2666
2727
|
}
|
|
2667
2728
|
}
|
|
2668
2729
|
));
|
|
@@ -3883,7 +3944,13 @@ var RATIO_OPTIONS = [
|
|
|
3883
3944
|
];
|
|
3884
3945
|
var CUSTOM_RATIO = "custom";
|
|
3885
3946
|
var AspectRatioControl = createControl(({ label }) => {
|
|
3886
|
-
const {
|
|
3947
|
+
const {
|
|
3948
|
+
value: currentPropValue,
|
|
3949
|
+
setValue: setAspectRatioValue,
|
|
3950
|
+
disabled,
|
|
3951
|
+
placeholder: externalPlaceholder
|
|
3952
|
+
} = useBoundProp(import_editor_props27.stringPropTypeUtil);
|
|
3953
|
+
const aspectRatioValue = currentPropValue ?? externalPlaceholder;
|
|
3887
3954
|
const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
|
|
3888
3955
|
const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
|
|
3889
3956
|
const [isCustom, setIsCustom] = (0, import_react34.useState)(isCustomSelected);
|
|
@@ -3931,6 +3998,8 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
3931
3998
|
setAspectRatioValue(`${customWidth}/${newHeight}`);
|
|
3932
3999
|
}
|
|
3933
4000
|
};
|
|
4001
|
+
const lookup = currentPropValue ?? externalPlaceholder;
|
|
4002
|
+
const selectedOption = RATIO_OPTIONS.find((option) => option.value === lookup);
|
|
3934
4003
|
return /* @__PURE__ */ React69.createElement(ControlActions, null, /* @__PURE__ */ React69.createElement(import_ui54.Stack, { direction: "column", gap: 2 }, /* @__PURE__ */ React69.createElement(import_ui54.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React69.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ControlLabel, null, label)), /* @__PURE__ */ React69.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(
|
|
3935
4004
|
import_ui54.Select,
|
|
3936
4005
|
{
|
|
@@ -3940,6 +4009,7 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
3940
4009
|
disabled,
|
|
3941
4010
|
value: selectedValue,
|
|
3942
4011
|
onChange: handleSelectChange,
|
|
4012
|
+
renderValue: isCustomSelected ? void 0 : () => selectedOption?.label,
|
|
3943
4013
|
fullWidth: true
|
|
3944
4014
|
},
|
|
3945
4015
|
[...RATIO_OPTIONS, { label: (0, import_i18n26.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
|
|
@@ -4142,45 +4212,132 @@ var SvgMediaControl = createControl(() => {
|
|
|
4142
4212
|
))));
|
|
4143
4213
|
});
|
|
4144
4214
|
|
|
4215
|
+
// src/controls/video-media-control.tsx
|
|
4216
|
+
var React72 = __toESM(require("react"));
|
|
4217
|
+
var import_editor_props29 = require("@elementor/editor-props");
|
|
4218
|
+
var import_icons19 = require("@elementor/icons");
|
|
4219
|
+
var import_ui57 = require("@elementor/ui");
|
|
4220
|
+
var import_wp_media3 = require("@elementor/wp-media");
|
|
4221
|
+
var import_i18n29 = require("@wordpress/i18n");
|
|
4222
|
+
var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
|
|
4223
|
+
var VideoMediaControl = createControl(() => {
|
|
4224
|
+
const { value, setValue } = useBoundProp(import_editor_props29.videoSrcPropTypeUtil);
|
|
4225
|
+
const { id, url } = value ?? {};
|
|
4226
|
+
const { data: attachment, isFetching } = (0, import_wp_media3.useWpMediaAttachment)(id?.value || null);
|
|
4227
|
+
const videoUrl = attachment?.url ?? url?.value ?? null;
|
|
4228
|
+
const { open } = (0, import_wp_media3.useWpMediaFrame)({
|
|
4229
|
+
mediaTypes: ["video"],
|
|
4230
|
+
multiple: false,
|
|
4231
|
+
selected: id?.value || null,
|
|
4232
|
+
onSelect: (selectedAttachment) => {
|
|
4233
|
+
setValue({
|
|
4234
|
+
id: {
|
|
4235
|
+
$$type: "video-attachment-id",
|
|
4236
|
+
value: selectedAttachment.id
|
|
4237
|
+
},
|
|
4238
|
+
url: null
|
|
4239
|
+
});
|
|
4240
|
+
}
|
|
4241
|
+
});
|
|
4242
|
+
return /* @__PURE__ */ React72.createElement(ControlActions, null, /* @__PURE__ */ React72.createElement(import_ui57.Card, { variant: "outlined" }, /* @__PURE__ */ React72.createElement(
|
|
4243
|
+
import_ui57.CardMedia,
|
|
4244
|
+
{
|
|
4245
|
+
sx: {
|
|
4246
|
+
height: 140,
|
|
4247
|
+
backgroundColor: "white",
|
|
4248
|
+
backgroundSize: "8px 8px",
|
|
4249
|
+
backgroundPosition: "0 0, 4px 4px",
|
|
4250
|
+
backgroundRepeat: "repeat",
|
|
4251
|
+
backgroundImage: `${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA}`,
|
|
4252
|
+
display: "flex",
|
|
4253
|
+
justifyContent: "center",
|
|
4254
|
+
alignItems: "center"
|
|
4255
|
+
}
|
|
4256
|
+
},
|
|
4257
|
+
/* @__PURE__ */ React72.createElement(VideoPreview, { isFetching, videoUrl })
|
|
4258
|
+
), /* @__PURE__ */ React72.createElement(import_ui57.CardOverlay, null, /* @__PURE__ */ React72.createElement(import_ui57.Stack, { gap: 1 }, /* @__PURE__ */ React72.createElement(
|
|
4259
|
+
import_ui57.Button,
|
|
4260
|
+
{
|
|
4261
|
+
size: "tiny",
|
|
4262
|
+
color: "inherit",
|
|
4263
|
+
variant: "outlined",
|
|
4264
|
+
onClick: () => open({ mode: "browse" })
|
|
4265
|
+
},
|
|
4266
|
+
(0, import_i18n29.__)("Select video", "elementor")
|
|
4267
|
+
), /* @__PURE__ */ React72.createElement(
|
|
4268
|
+
import_ui57.Button,
|
|
4269
|
+
{
|
|
4270
|
+
size: "tiny",
|
|
4271
|
+
variant: "text",
|
|
4272
|
+
color: "inherit",
|
|
4273
|
+
startIcon: /* @__PURE__ */ React72.createElement(import_icons19.UploadIcon, null),
|
|
4274
|
+
onClick: () => open({ mode: "upload" })
|
|
4275
|
+
},
|
|
4276
|
+
(0, import_i18n29.__)("Upload", "elementor")
|
|
4277
|
+
)))));
|
|
4278
|
+
});
|
|
4279
|
+
var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
4280
|
+
if (isFetching) {
|
|
4281
|
+
return /* @__PURE__ */ React72.createElement(import_ui57.CircularProgress, null);
|
|
4282
|
+
}
|
|
4283
|
+
if (videoUrl) {
|
|
4284
|
+
return /* @__PURE__ */ React72.createElement(
|
|
4285
|
+
"video",
|
|
4286
|
+
{
|
|
4287
|
+
src: videoUrl,
|
|
4288
|
+
muted: true,
|
|
4289
|
+
preload: "metadata",
|
|
4290
|
+
style: {
|
|
4291
|
+
width: "100%",
|
|
4292
|
+
height: "100%",
|
|
4293
|
+
objectFit: "cover",
|
|
4294
|
+
pointerEvents: "none"
|
|
4295
|
+
}
|
|
4296
|
+
}
|
|
4297
|
+
);
|
|
4298
|
+
}
|
|
4299
|
+
return /* @__PURE__ */ React72.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
|
|
4300
|
+
};
|
|
4301
|
+
|
|
4145
4302
|
// src/controls/background-control/background-control.tsx
|
|
4303
|
+
var React79 = __toESM(require("react"));
|
|
4304
|
+
var import_editor_props35 = require("@elementor/editor-props");
|
|
4305
|
+
var import_ui65 = require("@elementor/ui");
|
|
4306
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
4307
|
+
|
|
4308
|
+
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
4146
4309
|
var React78 = __toESM(require("react"));
|
|
4147
4310
|
var import_editor_props34 = require("@elementor/editor-props");
|
|
4148
4311
|
var import_ui64 = require("@elementor/ui");
|
|
4312
|
+
var import_wp_media4 = require("@elementor/wp-media");
|
|
4149
4313
|
var import_i18n34 = require("@wordpress/i18n");
|
|
4150
4314
|
|
|
4151
|
-
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
4152
|
-
var React77 = __toESM(require("react"));
|
|
4153
|
-
var import_editor_props33 = require("@elementor/editor-props");
|
|
4154
|
-
var import_ui63 = require("@elementor/ui");
|
|
4155
|
-
var import_wp_media3 = require("@elementor/wp-media");
|
|
4156
|
-
var import_i18n33 = require("@wordpress/i18n");
|
|
4157
|
-
|
|
4158
4315
|
// src/env.ts
|
|
4159
4316
|
var import_env = require("@elementor/env");
|
|
4160
4317
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
4161
4318
|
|
|
4162
4319
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
4163
|
-
var
|
|
4164
|
-
var
|
|
4165
|
-
var
|
|
4320
|
+
var React73 = __toESM(require("react"));
|
|
4321
|
+
var import_editor_props30 = require("@elementor/editor-props");
|
|
4322
|
+
var import_ui58 = require("@elementor/ui");
|
|
4166
4323
|
var BackgroundGradientColorControl = createControl(() => {
|
|
4167
|
-
const { value, setValue } = useBoundProp(
|
|
4324
|
+
const { value, setValue } = useBoundProp(import_editor_props30.backgroundGradientOverlayPropTypeUtil);
|
|
4168
4325
|
const handleChange = (newValue) => {
|
|
4169
4326
|
const transformedValue = createTransformableValue(newValue);
|
|
4170
4327
|
if (transformedValue.positions) {
|
|
4171
|
-
transformedValue.positions =
|
|
4328
|
+
transformedValue.positions = import_editor_props30.stringPropTypeUtil.create(newValue.positions.join(" "));
|
|
4172
4329
|
}
|
|
4173
4330
|
setValue(transformedValue);
|
|
4174
4331
|
};
|
|
4175
4332
|
const createTransformableValue = (newValue) => ({
|
|
4176
4333
|
...newValue,
|
|
4177
|
-
type:
|
|
4178
|
-
angle:
|
|
4179
|
-
stops:
|
|
4334
|
+
type: import_editor_props30.stringPropTypeUtil.create(newValue.type),
|
|
4335
|
+
angle: import_editor_props30.numberPropTypeUtil.create(newValue.angle),
|
|
4336
|
+
stops: import_editor_props30.gradientColorStopPropTypeUtil.create(
|
|
4180
4337
|
newValue.stops.map(
|
|
4181
|
-
({ color, offset }) =>
|
|
4182
|
-
color:
|
|
4183
|
-
offset:
|
|
4338
|
+
({ color, offset }) => import_editor_props30.colorStopPropTypeUtil.create({
|
|
4339
|
+
color: import_editor_props30.colorPropTypeUtil.create(color),
|
|
4340
|
+
offset: import_editor_props30.numberPropTypeUtil.create(offset)
|
|
4184
4341
|
})
|
|
4185
4342
|
)
|
|
4186
4343
|
)
|
|
@@ -4200,8 +4357,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
4200
4357
|
positions: positions?.value.split(" ")
|
|
4201
4358
|
};
|
|
4202
4359
|
};
|
|
4203
|
-
return /* @__PURE__ */
|
|
4204
|
-
|
|
4360
|
+
return /* @__PURE__ */ React73.createElement(
|
|
4361
|
+
import_ui58.UnstableGradientBox,
|
|
4205
4362
|
{
|
|
4206
4363
|
sx: { width: "auto", padding: 1.5 },
|
|
4207
4364
|
value: normalizeValue(),
|
|
@@ -4209,67 +4366,67 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
4209
4366
|
}
|
|
4210
4367
|
);
|
|
4211
4368
|
});
|
|
4212
|
-
var initialBackgroundGradientOverlay =
|
|
4213
|
-
type:
|
|
4214
|
-
angle:
|
|
4215
|
-
stops:
|
|
4216
|
-
|
|
4217
|
-
color:
|
|
4218
|
-
offset:
|
|
4369
|
+
var initialBackgroundGradientOverlay = import_editor_props30.backgroundGradientOverlayPropTypeUtil.create({
|
|
4370
|
+
type: import_editor_props30.stringPropTypeUtil.create("linear"),
|
|
4371
|
+
angle: import_editor_props30.numberPropTypeUtil.create(180),
|
|
4372
|
+
stops: import_editor_props30.gradientColorStopPropTypeUtil.create([
|
|
4373
|
+
import_editor_props30.colorStopPropTypeUtil.create({
|
|
4374
|
+
color: import_editor_props30.colorPropTypeUtil.create("rgb(0,0,0)"),
|
|
4375
|
+
offset: import_editor_props30.numberPropTypeUtil.create(0)
|
|
4219
4376
|
}),
|
|
4220
|
-
|
|
4221
|
-
color:
|
|
4222
|
-
offset:
|
|
4377
|
+
import_editor_props30.colorStopPropTypeUtil.create({
|
|
4378
|
+
color: import_editor_props30.colorPropTypeUtil.create("rgb(255,255,255)"),
|
|
4379
|
+
offset: import_editor_props30.numberPropTypeUtil.create(100)
|
|
4223
4380
|
})
|
|
4224
4381
|
])
|
|
4225
4382
|
});
|
|
4226
4383
|
|
|
4227
4384
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
4228
|
-
var
|
|
4229
|
-
var
|
|
4230
|
-
var
|
|
4231
|
-
var
|
|
4385
|
+
var React74 = __toESM(require("react"));
|
|
4386
|
+
var import_icons20 = require("@elementor/icons");
|
|
4387
|
+
var import_ui59 = require("@elementor/ui");
|
|
4388
|
+
var import_i18n30 = require("@wordpress/i18n");
|
|
4232
4389
|
var attachmentControlOptions = [
|
|
4233
4390
|
{
|
|
4234
4391
|
value: "fixed",
|
|
4235
|
-
label: (0,
|
|
4236
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4392
|
+
label: (0, import_i18n30.__)("Fixed", "elementor"),
|
|
4393
|
+
renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(import_icons20.PinIcon, { fontSize: size }),
|
|
4237
4394
|
showTooltip: true
|
|
4238
4395
|
},
|
|
4239
4396
|
{
|
|
4240
4397
|
value: "scroll",
|
|
4241
|
-
label: (0,
|
|
4242
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4398
|
+
label: (0, import_i18n30.__)("Scroll", "elementor"),
|
|
4399
|
+
renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(import_icons20.PinnedOffIcon, { fontSize: size }),
|
|
4243
4400
|
showTooltip: true
|
|
4244
4401
|
}
|
|
4245
4402
|
];
|
|
4246
4403
|
var BackgroundImageOverlayAttachment = () => {
|
|
4247
|
-
return /* @__PURE__ */
|
|
4404
|
+
return /* @__PURE__ */ React74.createElement(PopoverGridContainer, null, /* @__PURE__ */ React74.createElement(import_ui59.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React74.createElement(ControlFormLabel, null, (0, import_i18n30.__)("Attachment", "elementor"))), /* @__PURE__ */ React74.createElement(import_ui59.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React74.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
4248
4405
|
};
|
|
4249
4406
|
|
|
4250
4407
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
4251
|
-
var
|
|
4408
|
+
var React75 = __toESM(require("react"));
|
|
4252
4409
|
var import_react37 = require("react");
|
|
4253
|
-
var
|
|
4410
|
+
var import_editor_props31 = require("@elementor/editor-props");
|
|
4254
4411
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
4255
|
-
var
|
|
4256
|
-
var
|
|
4257
|
-
var
|
|
4412
|
+
var import_icons21 = require("@elementor/icons");
|
|
4413
|
+
var import_ui60 = require("@elementor/ui");
|
|
4414
|
+
var import_i18n31 = require("@wordpress/i18n");
|
|
4258
4415
|
var backgroundPositionOptions = [
|
|
4259
|
-
{ label: (0,
|
|
4260
|
-
{ label: (0,
|
|
4261
|
-
{ label: (0,
|
|
4262
|
-
{ label: (0,
|
|
4263
|
-
{ label: (0,
|
|
4264
|
-
{ label: (0,
|
|
4265
|
-
{ label: (0,
|
|
4266
|
-
{ label: (0,
|
|
4267
|
-
{ label: (0,
|
|
4268
|
-
{ label: (0,
|
|
4416
|
+
{ label: (0, import_i18n31.__)("Center center", "elementor"), value: "center center" },
|
|
4417
|
+
{ label: (0, import_i18n31.__)("Center left", "elementor"), value: "center left" },
|
|
4418
|
+
{ label: (0, import_i18n31.__)("Center right", "elementor"), value: "center right" },
|
|
4419
|
+
{ label: (0, import_i18n31.__)("Top center", "elementor"), value: "top center" },
|
|
4420
|
+
{ label: (0, import_i18n31.__)("Top left", "elementor"), value: "top left" },
|
|
4421
|
+
{ label: (0, import_i18n31.__)("Top right", "elementor"), value: "top right" },
|
|
4422
|
+
{ label: (0, import_i18n31.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
4423
|
+
{ label: (0, import_i18n31.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
4424
|
+
{ label: (0, import_i18n31.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
4425
|
+
{ label: (0, import_i18n31.__)("Custom", "elementor"), value: "custom" }
|
|
4269
4426
|
];
|
|
4270
4427
|
var BackgroundImageOverlayPosition = () => {
|
|
4271
|
-
const backgroundImageOffsetContext = useBoundProp(
|
|
4272
|
-
const stringPropContext = useBoundProp(
|
|
4428
|
+
const backgroundImageOffsetContext = useBoundProp(import_editor_props31.backgroundImagePositionOffsetPropTypeUtil);
|
|
4429
|
+
const stringPropContext = useBoundProp(import_editor_props31.stringPropTypeUtil);
|
|
4273
4430
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
4274
4431
|
const rowRef = (0, import_react37.useRef)(null);
|
|
4275
4432
|
const handlePositionChange = (event) => {
|
|
@@ -4280,8 +4437,8 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
4280
4437
|
stringPropContext.setValue(value);
|
|
4281
4438
|
}
|
|
4282
4439
|
};
|
|
4283
|
-
return /* @__PURE__ */
|
|
4284
|
-
|
|
4440
|
+
return /* @__PURE__ */ React75.createElement(import_ui60.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React75.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(PopoverGridContainer, null, /* @__PURE__ */ React75.createElement(import_ui60.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlFormLabel, null, (0, import_i18n31.__)("Position", "elementor"))), /* @__PURE__ */ React75.createElement(import_ui60.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React75.createElement(ControlActions, null, /* @__PURE__ */ React75.createElement(
|
|
4441
|
+
import_ui60.Select,
|
|
4285
4442
|
{
|
|
4286
4443
|
fullWidth: true,
|
|
4287
4444
|
size: "tiny",
|
|
@@ -4289,18 +4446,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
4289
4446
|
disabled: stringPropContext.disabled,
|
|
4290
4447
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
4291
4448
|
},
|
|
4292
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
4293
|
-
))))), isCustom ? /* @__PURE__ */
|
|
4449
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React75.createElement(import_editor_ui9.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
4450
|
+
))))), isCustom ? /* @__PURE__ */ React75.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React75.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(import_ui60.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React75.createElement(import_ui60.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React75.createElement(
|
|
4294
4451
|
SizeControl,
|
|
4295
4452
|
{
|
|
4296
|
-
startIcon: /* @__PURE__ */
|
|
4453
|
+
startIcon: /* @__PURE__ */ React75.createElement(import_icons21.LetterXIcon, { fontSize: "tiny" }),
|
|
4297
4454
|
anchorRef: rowRef,
|
|
4298
4455
|
min: -Number.MAX_SAFE_INTEGER
|
|
4299
4456
|
}
|
|
4300
|
-
))), /* @__PURE__ */
|
|
4457
|
+
))), /* @__PURE__ */ React75.createElement(import_ui60.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React75.createElement(
|
|
4301
4458
|
SizeControl,
|
|
4302
4459
|
{
|
|
4303
|
-
startIcon: /* @__PURE__ */
|
|
4460
|
+
startIcon: /* @__PURE__ */ React75.createElement(import_icons21.LetterYIcon, { fontSize: "tiny" }),
|
|
4304
4461
|
anchorRef: rowRef,
|
|
4305
4462
|
min: -Number.MAX_SAFE_INTEGER
|
|
4306
4463
|
}
|
|
@@ -4308,76 +4465,76 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
4308
4465
|
};
|
|
4309
4466
|
|
|
4310
4467
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
4311
|
-
var
|
|
4312
|
-
var
|
|
4313
|
-
var
|
|
4314
|
-
var
|
|
4468
|
+
var React76 = __toESM(require("react"));
|
|
4469
|
+
var import_icons22 = require("@elementor/icons");
|
|
4470
|
+
var import_ui61 = require("@elementor/ui");
|
|
4471
|
+
var import_i18n32 = require("@wordpress/i18n");
|
|
4315
4472
|
var repeatControlOptions = [
|
|
4316
4473
|
{
|
|
4317
4474
|
value: "repeat",
|
|
4318
|
-
label: (0,
|
|
4319
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4475
|
+
label: (0, import_i18n32.__)("Repeat", "elementor"),
|
|
4476
|
+
renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(import_icons22.GridDotsIcon, { fontSize: size }),
|
|
4320
4477
|
showTooltip: true
|
|
4321
4478
|
},
|
|
4322
4479
|
{
|
|
4323
4480
|
value: "repeat-x",
|
|
4324
|
-
label: (0,
|
|
4325
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4481
|
+
label: (0, import_i18n32.__)("Repeat-x", "elementor"),
|
|
4482
|
+
renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(import_icons22.DotsHorizontalIcon, { fontSize: size }),
|
|
4326
4483
|
showTooltip: true
|
|
4327
4484
|
},
|
|
4328
4485
|
{
|
|
4329
4486
|
value: "repeat-y",
|
|
4330
|
-
label: (0,
|
|
4331
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4487
|
+
label: (0, import_i18n32.__)("Repeat-y", "elementor"),
|
|
4488
|
+
renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(import_icons22.DotsVerticalIcon, { fontSize: size }),
|
|
4332
4489
|
showTooltip: true
|
|
4333
4490
|
},
|
|
4334
4491
|
{
|
|
4335
4492
|
value: "no-repeat",
|
|
4336
|
-
label: (0,
|
|
4337
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4493
|
+
label: (0, import_i18n32.__)("No-repeat", "elementor"),
|
|
4494
|
+
renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(import_icons22.XIcon, { fontSize: size }),
|
|
4338
4495
|
showTooltip: true
|
|
4339
4496
|
}
|
|
4340
4497
|
];
|
|
4341
4498
|
var BackgroundImageOverlayRepeat = () => {
|
|
4342
|
-
return /* @__PURE__ */
|
|
4499
|
+
return /* @__PURE__ */ React76.createElement(PopoverGridContainer, null, /* @__PURE__ */ React76.createElement(import_ui61.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(ControlFormLabel, null, (0, import_i18n32.__)("Repeat", "elementor"))), /* @__PURE__ */ React76.createElement(import_ui61.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React76.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
4343
4500
|
};
|
|
4344
4501
|
|
|
4345
4502
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
4346
|
-
var
|
|
4503
|
+
var React77 = __toESM(require("react"));
|
|
4347
4504
|
var import_react38 = require("react");
|
|
4348
|
-
var
|
|
4349
|
-
var
|
|
4350
|
-
var
|
|
4351
|
-
var
|
|
4505
|
+
var import_editor_props32 = require("@elementor/editor-props");
|
|
4506
|
+
var import_icons23 = require("@elementor/icons");
|
|
4507
|
+
var import_ui62 = require("@elementor/ui");
|
|
4508
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
4352
4509
|
var sizeControlOptions = [
|
|
4353
4510
|
{
|
|
4354
4511
|
value: "auto",
|
|
4355
|
-
label: (0,
|
|
4356
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4512
|
+
label: (0, import_i18n33.__)("Auto", "elementor"),
|
|
4513
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons23.LetterAIcon, { fontSize: size }),
|
|
4357
4514
|
showTooltip: true
|
|
4358
4515
|
},
|
|
4359
4516
|
{
|
|
4360
4517
|
value: "cover",
|
|
4361
|
-
label: (0,
|
|
4362
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4518
|
+
label: (0, import_i18n33.__)("Cover", "elementor"),
|
|
4519
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons23.ArrowsMaximizeIcon, { fontSize: size }),
|
|
4363
4520
|
showTooltip: true
|
|
4364
4521
|
},
|
|
4365
4522
|
{
|
|
4366
4523
|
value: "contain",
|
|
4367
|
-
label: (0,
|
|
4368
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4524
|
+
label: (0, import_i18n33.__)("Contain", "elementor"),
|
|
4525
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons23.ArrowBarBothIcon, { fontSize: size }),
|
|
4369
4526
|
showTooltip: true
|
|
4370
4527
|
},
|
|
4371
4528
|
{
|
|
4372
4529
|
value: "custom",
|
|
4373
|
-
label: (0,
|
|
4374
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4530
|
+
label: (0, import_i18n33.__)("Custom", "elementor"),
|
|
4531
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons23.PencilIcon, { fontSize: size }),
|
|
4375
4532
|
showTooltip: true
|
|
4376
4533
|
}
|
|
4377
4534
|
];
|
|
4378
4535
|
var BackgroundImageOverlaySize = () => {
|
|
4379
|
-
const backgroundImageScaleContext = useBoundProp(
|
|
4380
|
-
const stringPropContext = useBoundProp(
|
|
4536
|
+
const backgroundImageScaleContext = useBoundProp(import_editor_props32.backgroundImageSizeScalePropTypeUtil);
|
|
4537
|
+
const stringPropContext = useBoundProp(import_editor_props32.stringPropTypeUtil);
|
|
4381
4538
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
4382
4539
|
const rowRef = (0, import_react38.useRef)(null);
|
|
4383
4540
|
const handleSizeChange = (size) => {
|
|
@@ -4387,7 +4544,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
4387
4544
|
stringPropContext.setValue(size);
|
|
4388
4545
|
}
|
|
4389
4546
|
};
|
|
4390
|
-
return /* @__PURE__ */
|
|
4547
|
+
return /* @__PURE__ */ React77.createElement(import_ui62.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React77.createElement(import_ui62.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, null, /* @__PURE__ */ React77.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, (0, import_i18n33.__)("Size", "elementor"))), /* @__PURE__ */ React77.createElement(import_ui62.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React77.createElement(
|
|
4391
4548
|
ControlToggleButtonGroup,
|
|
4392
4549
|
{
|
|
4393
4550
|
exclusive: true,
|
|
@@ -4396,17 +4553,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
4396
4553
|
disabled: stringPropContext.disabled,
|
|
4397
4554
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
4398
4555
|
}
|
|
4399
|
-
)))), isCustom ? /* @__PURE__ */
|
|
4556
|
+
)))), isCustom ? /* @__PURE__ */ React77.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React77.createElement(import_ui62.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, null, /* @__PURE__ */ React77.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React77.createElement(
|
|
4400
4557
|
SizeControl,
|
|
4401
4558
|
{
|
|
4402
|
-
startIcon: /* @__PURE__ */
|
|
4559
|
+
startIcon: /* @__PURE__ */ React77.createElement(import_icons23.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
4403
4560
|
extendedOptions: ["auto"],
|
|
4404
4561
|
anchorRef: rowRef
|
|
4405
4562
|
}
|
|
4406
|
-
))), /* @__PURE__ */
|
|
4563
|
+
))), /* @__PURE__ */ React77.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React77.createElement(
|
|
4407
4564
|
SizeControl,
|
|
4408
4565
|
{
|
|
4409
|
-
startIcon: /* @__PURE__ */
|
|
4566
|
+
startIcon: /* @__PURE__ */ React77.createElement(import_icons23.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
4410
4567
|
extendedOptions: ["auto"],
|
|
4411
4568
|
anchorRef: rowRef
|
|
4412
4569
|
}
|
|
@@ -4415,16 +4572,16 @@ var BackgroundImageOverlaySize = () => {
|
|
|
4415
4572
|
|
|
4416
4573
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
4417
4574
|
var import_react39 = require("react");
|
|
4418
|
-
var
|
|
4419
|
-
var
|
|
4575
|
+
var import_editor_props33 = require("@elementor/editor-props");
|
|
4576
|
+
var import_ui63 = require("@elementor/ui");
|
|
4420
4577
|
var useBackgroundTabsHistory = ({
|
|
4421
4578
|
color: initialBackgroundColorOverlay2,
|
|
4422
4579
|
image: initialBackgroundImageOverlay,
|
|
4423
4580
|
gradient: initialBackgroundGradientOverlay2
|
|
4424
4581
|
}) => {
|
|
4425
|
-
const { value: imageValue, setValue: setImageValue } = useBoundProp(
|
|
4426
|
-
const { value: colorValue, setValue: setColorValue } = useBoundProp(
|
|
4427
|
-
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(
|
|
4582
|
+
const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props33.backgroundImageOverlayPropTypeUtil);
|
|
4583
|
+
const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props33.backgroundColorOverlayPropTypeUtil);
|
|
4584
|
+
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props33.backgroundGradientOverlayPropTypeUtil);
|
|
4428
4585
|
const getCurrentOverlayType = () => {
|
|
4429
4586
|
if (colorValue) {
|
|
4430
4587
|
return "color";
|
|
@@ -4434,7 +4591,7 @@ var useBackgroundTabsHistory = ({
|
|
|
4434
4591
|
}
|
|
4435
4592
|
return "image";
|
|
4436
4593
|
};
|
|
4437
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
4594
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui63.useTabs)(getCurrentOverlayType());
|
|
4438
4595
|
const valuesHistory = (0, import_react39.useRef)({
|
|
4439
4596
|
image: initialBackgroundImageOverlay,
|
|
4440
4597
|
color: initialBackgroundColorOverlay2,
|
|
@@ -4473,9 +4630,9 @@ var useBackgroundTabsHistory = ({
|
|
|
4473
4630
|
|
|
4474
4631
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
4475
4632
|
var DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = "#00000033";
|
|
4476
|
-
var initialBackgroundColorOverlay =
|
|
4633
|
+
var initialBackgroundColorOverlay = import_editor_props34.backgroundColorOverlayPropTypeUtil.create(
|
|
4477
4634
|
{
|
|
4478
|
-
color:
|
|
4635
|
+
color: import_editor_props34.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
|
|
4479
4636
|
}
|
|
4480
4637
|
);
|
|
4481
4638
|
var getInitialBackgroundOverlay = () => ({
|
|
@@ -4503,29 +4660,29 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
4503
4660
|
}
|
|
4504
4661
|
});
|
|
4505
4662
|
var backgroundResolutionOptions = [
|
|
4506
|
-
{ label: (0,
|
|
4507
|
-
{ label: (0,
|
|
4508
|
-
{ label: (0,
|
|
4509
|
-
{ label: (0,
|
|
4663
|
+
{ label: (0, import_i18n34.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
4664
|
+
{ label: (0, import_i18n34.__)("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
4665
|
+
{ label: (0, import_i18n34.__)("Large 1024 x 1024", "elementor"), value: "large" },
|
|
4666
|
+
{ label: (0, import_i18n34.__)("Full", "elementor"), value: "full" }
|
|
4510
4667
|
];
|
|
4511
4668
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
4512
|
-
const { propType, value: overlayValues, setValue } = useBoundProp(
|
|
4513
|
-
return /* @__PURE__ */
|
|
4669
|
+
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props34.backgroundOverlayPropTypeUtil);
|
|
4670
|
+
return /* @__PURE__ */ React78.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React78.createElement(
|
|
4514
4671
|
ControlRepeater,
|
|
4515
4672
|
{
|
|
4516
4673
|
initial: getInitialBackgroundOverlay(),
|
|
4517
|
-
propTypeUtil:
|
|
4674
|
+
propTypeUtil: import_editor_props34.backgroundOverlayPropTypeUtil
|
|
4518
4675
|
},
|
|
4519
|
-
/* @__PURE__ */
|
|
4520
|
-
/* @__PURE__ */
|
|
4676
|
+
/* @__PURE__ */ React78.createElement(RepeaterHeader, { label: (0, import_i18n34.__)("Overlay", "elementor") }, /* @__PURE__ */ React78.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
4677
|
+
/* @__PURE__ */ React78.createElement(ItemsContainer, null, /* @__PURE__ */ React78.createElement(
|
|
4521
4678
|
Item,
|
|
4522
4679
|
{
|
|
4523
4680
|
Icon: ItemIcon2,
|
|
4524
4681
|
Label: ItemLabel2,
|
|
4525
|
-
actions: /* @__PURE__ */
|
|
4682
|
+
actions: /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement(DuplicateItemAction, null), /* @__PURE__ */ React78.createElement(DisableItemAction, null), /* @__PURE__ */ React78.createElement(RemoveItemAction, null))
|
|
4526
4683
|
}
|
|
4527
4684
|
)),
|
|
4528
|
-
/* @__PURE__ */
|
|
4685
|
+
/* @__PURE__ */ React78.createElement(EditItemPopover, null, /* @__PURE__ */ React78.createElement(ItemContent, null))
|
|
4529
4686
|
));
|
|
4530
4687
|
});
|
|
4531
4688
|
var ItemContent = () => {
|
|
@@ -4535,27 +4692,27 @@ var ItemContent = () => {
|
|
|
4535
4692
|
gradient: initialBackgroundGradientOverlay.value
|
|
4536
4693
|
});
|
|
4537
4694
|
const { rowRef } = useRepeaterContext();
|
|
4538
|
-
return /* @__PURE__ */
|
|
4539
|
-
|
|
4695
|
+
return /* @__PURE__ */ React78.createElement(import_ui64.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React78.createElement(import_ui64.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React78.createElement(
|
|
4696
|
+
import_ui64.Tabs,
|
|
4540
4697
|
{
|
|
4541
4698
|
size: "small",
|
|
4542
4699
|
variant: "fullWidth",
|
|
4543
4700
|
...getTabsProps(),
|
|
4544
|
-
"aria-label": (0,
|
|
4701
|
+
"aria-label": (0, import_i18n34.__)("Background Overlay", "elementor")
|
|
4545
4702
|
},
|
|
4546
|
-
/* @__PURE__ */
|
|
4547
|
-
/* @__PURE__ */
|
|
4548
|
-
/* @__PURE__ */
|
|
4549
|
-
)), /* @__PURE__ */
|
|
4703
|
+
/* @__PURE__ */ React78.createElement(import_ui64.Tab, { label: (0, import_i18n34.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
4704
|
+
/* @__PURE__ */ React78.createElement(import_ui64.Tab, { label: (0, import_i18n34.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
4705
|
+
/* @__PURE__ */ React78.createElement(import_ui64.Tab, { label: (0, import_i18n34.__)("Color", "elementor"), ...getTabProps("color") })
|
|
4706
|
+
)), /* @__PURE__ */ React78.createElement(import_ui64.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React78.createElement(PopoverContent, null, /* @__PURE__ */ React78.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React78.createElement(import_ui64.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React78.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React78.createElement(import_ui64.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React78.createElement(PopoverContent, null, /* @__PURE__ */ React78.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
4550
4707
|
};
|
|
4551
4708
|
var ItemIcon2 = ({ value }) => {
|
|
4552
4709
|
switch (value.$$type) {
|
|
4553
4710
|
case "background-image-overlay":
|
|
4554
|
-
return /* @__PURE__ */
|
|
4711
|
+
return /* @__PURE__ */ React78.createElement(ItemIconImage, { value });
|
|
4555
4712
|
case "background-color-overlay":
|
|
4556
|
-
return /* @__PURE__ */
|
|
4713
|
+
return /* @__PURE__ */ React78.createElement(ItemIconColor, { value });
|
|
4557
4714
|
case "background-gradient-overlay":
|
|
4558
|
-
return /* @__PURE__ */
|
|
4715
|
+
return /* @__PURE__ */ React78.createElement(ItemIconGradient, { value });
|
|
4559
4716
|
default:
|
|
4560
4717
|
return null;
|
|
4561
4718
|
}
|
|
@@ -4568,12 +4725,12 @@ var extractColorFrom = (prop) => {
|
|
|
4568
4725
|
};
|
|
4569
4726
|
var ItemIconColor = ({ value: prop }) => {
|
|
4570
4727
|
const color = extractColorFrom(prop);
|
|
4571
|
-
return /* @__PURE__ */
|
|
4728
|
+
return /* @__PURE__ */ React78.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
4572
4729
|
};
|
|
4573
4730
|
var ItemIconImage = ({ value }) => {
|
|
4574
4731
|
const { imageUrl } = useImage(value);
|
|
4575
|
-
return /* @__PURE__ */
|
|
4576
|
-
|
|
4732
|
+
return /* @__PURE__ */ React78.createElement(
|
|
4733
|
+
import_ui64.CardMedia,
|
|
4577
4734
|
{
|
|
4578
4735
|
image: imageUrl,
|
|
4579
4736
|
sx: (theme) => ({
|
|
@@ -4587,43 +4744,43 @@ var ItemIconImage = ({ value }) => {
|
|
|
4587
4744
|
};
|
|
4588
4745
|
var ItemIconGradient = ({ value }) => {
|
|
4589
4746
|
const gradient = getGradientValue(value);
|
|
4590
|
-
return /* @__PURE__ */
|
|
4747
|
+
return /* @__PURE__ */ React78.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
4591
4748
|
};
|
|
4592
4749
|
var ItemLabel2 = ({ value }) => {
|
|
4593
4750
|
switch (value.$$type) {
|
|
4594
4751
|
case "background-image-overlay":
|
|
4595
|
-
return /* @__PURE__ */
|
|
4752
|
+
return /* @__PURE__ */ React78.createElement(ItemLabelImage, { value });
|
|
4596
4753
|
case "background-color-overlay":
|
|
4597
|
-
return /* @__PURE__ */
|
|
4754
|
+
return /* @__PURE__ */ React78.createElement(ItemLabelColor, { value });
|
|
4598
4755
|
case "background-gradient-overlay":
|
|
4599
|
-
return /* @__PURE__ */
|
|
4756
|
+
return /* @__PURE__ */ React78.createElement(ItemLabelGradient, { value });
|
|
4600
4757
|
default:
|
|
4601
4758
|
return null;
|
|
4602
4759
|
}
|
|
4603
4760
|
};
|
|
4604
4761
|
var ItemLabelColor = ({ value: prop }) => {
|
|
4605
4762
|
const color = extractColorFrom(prop);
|
|
4606
|
-
return /* @__PURE__ */
|
|
4763
|
+
return /* @__PURE__ */ React78.createElement("span", null, color);
|
|
4607
4764
|
};
|
|
4608
4765
|
var ItemLabelImage = ({ value }) => {
|
|
4609
4766
|
const { imageTitle } = useImage(value);
|
|
4610
|
-
return /* @__PURE__ */
|
|
4767
|
+
return /* @__PURE__ */ React78.createElement("span", null, imageTitle);
|
|
4611
4768
|
};
|
|
4612
4769
|
var ItemLabelGradient = ({ value }) => {
|
|
4613
4770
|
if (value.value.type.value === "linear") {
|
|
4614
|
-
return /* @__PURE__ */
|
|
4771
|
+
return /* @__PURE__ */ React78.createElement("span", null, (0, import_i18n34.__)("Linear Gradient", "elementor"));
|
|
4615
4772
|
}
|
|
4616
|
-
return /* @__PURE__ */
|
|
4773
|
+
return /* @__PURE__ */ React78.createElement("span", null, (0, import_i18n34.__)("Radial Gradient", "elementor"));
|
|
4617
4774
|
};
|
|
4618
4775
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
4619
|
-
const propContext = useBoundProp(
|
|
4620
|
-
return /* @__PURE__ */
|
|
4776
|
+
const propContext = useBoundProp(import_editor_props34.backgroundColorOverlayPropTypeUtil);
|
|
4777
|
+
return /* @__PURE__ */ React78.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React78.createElement(ColorControl, { anchorEl })));
|
|
4621
4778
|
};
|
|
4622
4779
|
var ImageOverlayContent = () => {
|
|
4623
|
-
const propContext = useBoundProp(
|
|
4624
|
-
return /* @__PURE__ */
|
|
4780
|
+
const propContext = useBoundProp(import_editor_props34.backgroundImageOverlayPropTypeUtil);
|
|
4781
|
+
return /* @__PURE__ */ React78.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React78.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React78.createElement(BackgroundImageOverlayAttachment, null)));
|
|
4625
4782
|
};
|
|
4626
|
-
var StyledUnstableColorIndicator3 = (0,
|
|
4783
|
+
var StyledUnstableColorIndicator3 = (0, import_ui64.styled)(import_ui64.UnstableColorIndicator)(({ theme }) => ({
|
|
4627
4784
|
height: "1rem",
|
|
4628
4785
|
width: "1rem",
|
|
4629
4786
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
@@ -4631,7 +4788,7 @@ var StyledUnstableColorIndicator3 = (0, import_ui63.styled)(import_ui63.Unstable
|
|
|
4631
4788
|
var useImage = (image) => {
|
|
4632
4789
|
let imageTitle, imageUrl = null;
|
|
4633
4790
|
const imageSrc = image?.value.image.value?.src.value;
|
|
4634
|
-
const { data: attachment } = (0,
|
|
4791
|
+
const { data: attachment } = (0, import_wp_media4.useWpMediaAttachment)(imageSrc.id?.value || null);
|
|
4635
4792
|
if (imageSrc.id) {
|
|
4636
4793
|
const imageFileTypeExtension = getFileExtensionFromFilename(attachment?.filename);
|
|
4637
4794
|
imageTitle = `${attachment?.title}${imageFileTypeExtension}` || null;
|
|
@@ -4660,29 +4817,29 @@ var getGradientValue = (value) => {
|
|
|
4660
4817
|
|
|
4661
4818
|
// src/controls/background-control/background-control.tsx
|
|
4662
4819
|
var clipOptions = [
|
|
4663
|
-
{ label: (0,
|
|
4664
|
-
{ label: (0,
|
|
4665
|
-
{ label: (0,
|
|
4666
|
-
{ label: (0,
|
|
4820
|
+
{ label: (0, import_i18n35.__)("Full element", "elementor"), value: "border-box" },
|
|
4821
|
+
{ label: (0, import_i18n35.__)("Padding edges", "elementor"), value: "padding-box" },
|
|
4822
|
+
{ label: (0, import_i18n35.__)("Content edges", "elementor"), value: "content-box" },
|
|
4823
|
+
{ label: (0, import_i18n35.__)("Text", "elementor"), value: "text" }
|
|
4667
4824
|
];
|
|
4668
|
-
var colorLabel = (0,
|
|
4669
|
-
var clipLabel = (0,
|
|
4825
|
+
var colorLabel = (0, import_i18n35.__)("Color", "elementor");
|
|
4826
|
+
var clipLabel = (0, import_i18n35.__)("Clipping", "elementor");
|
|
4670
4827
|
var BackgroundControl = createControl(() => {
|
|
4671
|
-
const propContext = useBoundProp(
|
|
4672
|
-
return /* @__PURE__ */
|
|
4828
|
+
const propContext = useBoundProp(import_editor_props35.backgroundPropTypeUtil);
|
|
4829
|
+
return /* @__PURE__ */ React79.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React79.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React79.createElement(BackgroundColorField, null), /* @__PURE__ */ React79.createElement(BackgroundClipField, null));
|
|
4673
4830
|
});
|
|
4674
4831
|
var BackgroundColorField = () => {
|
|
4675
|
-
return /* @__PURE__ */
|
|
4832
|
+
return /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React79.createElement(import_ui65.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React79.createElement(import_ui65.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React79.createElement(import_ui65.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ColorControl, null))));
|
|
4676
4833
|
};
|
|
4677
4834
|
var BackgroundClipField = () => {
|
|
4678
|
-
return /* @__PURE__ */
|
|
4835
|
+
return /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React79.createElement(import_ui65.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React79.createElement(import_ui65.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React79.createElement(import_ui65.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(SelectControl, { options: clipOptions }))));
|
|
4679
4836
|
};
|
|
4680
4837
|
|
|
4681
4838
|
// src/controls/repeatable-control.tsx
|
|
4682
|
-
var
|
|
4839
|
+
var React80 = __toESM(require("react"));
|
|
4683
4840
|
var import_react40 = require("react");
|
|
4684
|
-
var
|
|
4685
|
-
var
|
|
4841
|
+
var import_editor_props36 = require("@elementor/editor-props");
|
|
4842
|
+
var import_ui66 = require("@elementor/ui");
|
|
4686
4843
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
4687
4844
|
var RepeatableControl = createControl(
|
|
4688
4845
|
({
|
|
@@ -4701,7 +4858,7 @@ var RepeatableControl = createControl(
|
|
|
4701
4858
|
return null;
|
|
4702
4859
|
}
|
|
4703
4860
|
const childArrayPropTypeUtil2 = (0, import_react40.useMemo)(
|
|
4704
|
-
() => (0,
|
|
4861
|
+
() => (0, import_editor_props36.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
4705
4862
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
4706
4863
|
);
|
|
4707
4864
|
const contextValue = (0, import_react40.useMemo)(
|
|
@@ -4713,14 +4870,14 @@ var RepeatableControl = createControl(
|
|
|
4713
4870
|
[childControlConfig, placeholder, patternLabel]
|
|
4714
4871
|
);
|
|
4715
4872
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
|
|
4716
|
-
return /* @__PURE__ */
|
|
4873
|
+
return /* @__PURE__ */ React80.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React80.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React80.createElement(
|
|
4717
4874
|
ControlRepeater,
|
|
4718
4875
|
{
|
|
4719
4876
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
4720
4877
|
propTypeUtil: childArrayPropTypeUtil2,
|
|
4721
4878
|
isItemDisabled: isItemDisabled2
|
|
4722
4879
|
},
|
|
4723
|
-
/* @__PURE__ */
|
|
4880
|
+
/* @__PURE__ */ React80.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React80.createElement(
|
|
4724
4881
|
TooltipAddItemAction,
|
|
4725
4882
|
{
|
|
4726
4883
|
...addItemTooltipProps,
|
|
@@ -4728,22 +4885,22 @@ var RepeatableControl = createControl(
|
|
|
4728
4885
|
ariaLabel: repeaterLabel
|
|
4729
4886
|
}
|
|
4730
4887
|
)),
|
|
4731
|
-
/* @__PURE__ */
|
|
4888
|
+
/* @__PURE__ */ React80.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React80.createElement(
|
|
4732
4889
|
Item,
|
|
4733
4890
|
{
|
|
4734
4891
|
Icon: ItemIcon3,
|
|
4735
4892
|
Label: ItemLabel3,
|
|
4736
|
-
actions: /* @__PURE__ */
|
|
4893
|
+
actions: /* @__PURE__ */ React80.createElement(React80.Fragment, null, showDuplicate && /* @__PURE__ */ React80.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React80.createElement(DisableItemAction, null), /* @__PURE__ */ React80.createElement(RemoveItemAction, null))
|
|
4737
4894
|
}
|
|
4738
4895
|
)),
|
|
4739
|
-
/* @__PURE__ */
|
|
4896
|
+
/* @__PURE__ */ React80.createElement(EditItemPopover, null, /* @__PURE__ */ React80.createElement(Content2, null))
|
|
4740
4897
|
)));
|
|
4741
4898
|
}
|
|
4742
4899
|
);
|
|
4743
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
4900
|
+
var ItemIcon3 = () => /* @__PURE__ */ React80.createElement(React80.Fragment, null);
|
|
4744
4901
|
var Content2 = () => {
|
|
4745
4902
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
4746
|
-
return /* @__PURE__ */
|
|
4903
|
+
return /* @__PURE__ */ React80.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React80.createElement(PopoverGridContainer, null, /* @__PURE__ */ React80.createElement(ChildControl, { ...props })));
|
|
4747
4904
|
};
|
|
4748
4905
|
var interpolate = (template, data) => {
|
|
4749
4906
|
if (!data) {
|
|
@@ -4826,7 +4983,7 @@ var ItemLabel3 = ({ value }) => {
|
|
|
4826
4983
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
4827
4984
|
const isReadOnly = !!childProps?.readOnly;
|
|
4828
4985
|
const color = getTextColor(isReadOnly, showPlaceholder);
|
|
4829
|
-
return /* @__PURE__ */
|
|
4986
|
+
return /* @__PURE__ */ React80.createElement(import_ui66.Box, { component: "span", color }, label);
|
|
4830
4987
|
};
|
|
4831
4988
|
var getAllProperties = (pattern) => {
|
|
4832
4989
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -4834,11 +4991,11 @@ var getAllProperties = (pattern) => {
|
|
|
4834
4991
|
};
|
|
4835
4992
|
|
|
4836
4993
|
// src/controls/key-value-control.tsx
|
|
4837
|
-
var
|
|
4994
|
+
var React81 = __toESM(require("react"));
|
|
4838
4995
|
var import_react41 = require("react");
|
|
4839
|
-
var
|
|
4840
|
-
var
|
|
4841
|
-
var
|
|
4996
|
+
var import_editor_props37 = require("@elementor/editor-props");
|
|
4997
|
+
var import_ui67 = require("@elementor/ui");
|
|
4998
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
4842
4999
|
|
|
4843
5000
|
// src/utils/escape-html-attr.ts
|
|
4844
5001
|
var escapeHtmlAttr = (value) => {
|
|
@@ -4861,15 +5018,15 @@ var getInitialFieldValue = (fieldValue) => {
|
|
|
4861
5018
|
return transformableValue.value || "";
|
|
4862
5019
|
};
|
|
4863
5020
|
var KeyValueControl = createControl((props = {}) => {
|
|
4864
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
5021
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props37.keyValuePropTypeUtil);
|
|
4865
5022
|
const [keyError, setKeyError] = (0, import_react41.useState)("");
|
|
4866
5023
|
const [valueError, setValueError] = (0, import_react41.useState)("");
|
|
4867
5024
|
const [sessionState, setSessionState] = (0, import_react41.useState)({
|
|
4868
5025
|
key: getInitialFieldValue(value?.key),
|
|
4869
5026
|
value: getInitialFieldValue(value?.value)
|
|
4870
5027
|
});
|
|
4871
|
-
const keyLabel = props.keyName || (0,
|
|
4872
|
-
const valueLabel = props.valueName || (0,
|
|
5028
|
+
const keyLabel = props.keyName || (0, import_i18n36.__)("Key", "elementor");
|
|
5029
|
+
const valueLabel = props.valueName || (0, import_i18n36.__)("Value", "elementor");
|
|
4873
5030
|
const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
|
|
4874
5031
|
keyHelper: void 0,
|
|
4875
5032
|
valueHelper: void 0
|
|
@@ -4878,7 +5035,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4878
5035
|
() => [
|
|
4879
5036
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
4880
5037
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
4881
|
-
props.validationErrorMessage || (0,
|
|
5038
|
+
props.validationErrorMessage || (0, import_i18n36.__)("Invalid Format", "elementor")
|
|
4882
5039
|
],
|
|
4883
5040
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
4884
5041
|
);
|
|
@@ -4900,14 +5057,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4900
5057
|
return;
|
|
4901
5058
|
}
|
|
4902
5059
|
const newChangedValue = newValue[fieldType];
|
|
4903
|
-
if ((0,
|
|
5060
|
+
if ((0, import_editor_props37.isTransformable)(newChangedValue) && newChangedValue.$$type === "dynamic") {
|
|
4904
5061
|
setValue({
|
|
4905
5062
|
...value,
|
|
4906
5063
|
[fieldType]: newChangedValue
|
|
4907
5064
|
});
|
|
4908
5065
|
return;
|
|
4909
5066
|
}
|
|
4910
|
-
const extractedValue =
|
|
5067
|
+
const extractedValue = import_editor_props37.stringPropTypeUtil.extract(newChangedValue);
|
|
4911
5068
|
setSessionState((prev) => ({
|
|
4912
5069
|
...prev,
|
|
4913
5070
|
[fieldType]: extractedValue
|
|
@@ -4927,14 +5084,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4927
5084
|
});
|
|
4928
5085
|
}
|
|
4929
5086
|
};
|
|
4930
|
-
return /* @__PURE__ */
|
|
5087
|
+
return /* @__PURE__ */ React81.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React81.createElement(import_ui67.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React81.createElement(import_ui67.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React81.createElement(import_ui67.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React81.createElement(
|
|
4931
5088
|
TextControl,
|
|
4932
5089
|
{
|
|
4933
5090
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
4934
5091
|
error: !!keyError,
|
|
4935
5092
|
helperText: keyHelper
|
|
4936
5093
|
}
|
|
4937
|
-
)), !!keyError && /* @__PURE__ */
|
|
5094
|
+
)), !!keyError && /* @__PURE__ */ React81.createElement(import_ui67.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React81.createElement(import_ui67.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React81.createElement(import_ui67.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React81.createElement(
|
|
4938
5095
|
TextControl,
|
|
4939
5096
|
{
|
|
4940
5097
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -4942,31 +5099,31 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4942
5099
|
inputDisabled: !!keyError,
|
|
4943
5100
|
helperText: valueHelper
|
|
4944
5101
|
}
|
|
4945
|
-
)), !!valueError && /* @__PURE__ */
|
|
5102
|
+
)), !!valueError && /* @__PURE__ */ React81.createElement(import_ui67.FormHelperText, { error: true }, valueError))));
|
|
4946
5103
|
});
|
|
4947
5104
|
|
|
4948
5105
|
// src/controls/position-control.tsx
|
|
4949
|
-
var
|
|
4950
|
-
var
|
|
5106
|
+
var React82 = __toESM(require("react"));
|
|
5107
|
+
var import_editor_props38 = require("@elementor/editor-props");
|
|
4951
5108
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
4952
|
-
var
|
|
4953
|
-
var
|
|
4954
|
-
var
|
|
5109
|
+
var import_icons24 = require("@elementor/icons");
|
|
5110
|
+
var import_ui68 = require("@elementor/ui");
|
|
5111
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
4955
5112
|
var positionOptions = [
|
|
4956
|
-
{ label: (0,
|
|
4957
|
-
{ label: (0,
|
|
4958
|
-
{ label: (0,
|
|
4959
|
-
{ label: (0,
|
|
4960
|
-
{ label: (0,
|
|
4961
|
-
{ label: (0,
|
|
4962
|
-
{ label: (0,
|
|
4963
|
-
{ label: (0,
|
|
4964
|
-
{ label: (0,
|
|
4965
|
-
{ label: (0,
|
|
5113
|
+
{ label: (0, import_i18n37.__)("Center center", "elementor"), value: "center center" },
|
|
5114
|
+
{ label: (0, import_i18n37.__)("Center left", "elementor"), value: "center left" },
|
|
5115
|
+
{ label: (0, import_i18n37.__)("Center right", "elementor"), value: "center right" },
|
|
5116
|
+
{ label: (0, import_i18n37.__)("Top center", "elementor"), value: "top center" },
|
|
5117
|
+
{ label: (0, import_i18n37.__)("Top left", "elementor"), value: "top left" },
|
|
5118
|
+
{ label: (0, import_i18n37.__)("Top right", "elementor"), value: "top right" },
|
|
5119
|
+
{ label: (0, import_i18n37.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
5120
|
+
{ label: (0, import_i18n37.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
5121
|
+
{ label: (0, import_i18n37.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
5122
|
+
{ label: (0, import_i18n37.__)("Custom", "elementor"), value: "custom" }
|
|
4966
5123
|
];
|
|
4967
5124
|
var PositionControl = () => {
|
|
4968
|
-
const positionContext = useBoundProp(
|
|
4969
|
-
const stringPropContext = useBoundProp(
|
|
5125
|
+
const positionContext = useBoundProp(import_editor_props38.positionPropTypeUtil);
|
|
5126
|
+
const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
|
|
4970
5127
|
const isCustom = !!positionContext.value;
|
|
4971
5128
|
const handlePositionChange = (event) => {
|
|
4972
5129
|
const value = event.target.value || null;
|
|
@@ -4976,8 +5133,8 @@ var PositionControl = () => {
|
|
|
4976
5133
|
stringPropContext.setValue(value);
|
|
4977
5134
|
}
|
|
4978
5135
|
};
|
|
4979
|
-
return /* @__PURE__ */
|
|
4980
|
-
|
|
5136
|
+
return /* @__PURE__ */ React82.createElement(import_ui68.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React82.createElement(import_ui68.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(import_ui68.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React82.createElement(import_ui68.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, (0, import_i18n37.__)("Object position", "elementor"))), /* @__PURE__ */ React82.createElement(import_ui68.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React82.createElement(
|
|
5137
|
+
import_ui68.Select,
|
|
4981
5138
|
{
|
|
4982
5139
|
size: "tiny",
|
|
4983
5140
|
disabled: stringPropContext.disabled,
|
|
@@ -4985,47 +5142,32 @@ var PositionControl = () => {
|
|
|
4985
5142
|
onChange: handlePositionChange,
|
|
4986
5143
|
fullWidth: true
|
|
4987
5144
|
},
|
|
4988
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
4989
|
-
)))), isCustom && /* @__PURE__ */
|
|
5145
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React82.createElement(import_editor_ui10.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
5146
|
+
)))), isCustom && /* @__PURE__ */ React82.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React82.createElement(import_ui68.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(import_ui68.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React82.createElement(import_ui68.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React82.createElement(
|
|
4990
5147
|
SizeControl,
|
|
4991
5148
|
{
|
|
4992
|
-
startIcon: /* @__PURE__ */
|
|
5149
|
+
startIcon: /* @__PURE__ */ React82.createElement(import_icons24.LetterXIcon, { fontSize: "tiny" }),
|
|
4993
5150
|
min: -Number.MAX_SAFE_INTEGER
|
|
4994
5151
|
}
|
|
4995
|
-
))), /* @__PURE__ */
|
|
5152
|
+
))), /* @__PURE__ */ React82.createElement(import_ui68.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React82.createElement(
|
|
4996
5153
|
SizeControl,
|
|
4997
5154
|
{
|
|
4998
|
-
startIcon: /* @__PURE__ */
|
|
5155
|
+
startIcon: /* @__PURE__ */ React82.createElement(import_icons24.LetterYIcon, { fontSize: "tiny" }),
|
|
4999
5156
|
min: -Number.MAX_SAFE_INTEGER
|
|
5000
5157
|
}
|
|
5001
5158
|
)))))));
|
|
5002
5159
|
};
|
|
5003
5160
|
|
|
5004
5161
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
5005
|
-
var
|
|
5006
|
-
var
|
|
5007
|
-
var
|
|
5008
|
-
var
|
|
5009
|
-
var
|
|
5010
|
-
var
|
|
5011
|
-
|
|
5012
|
-
// src/hooks/use-element-can-have-children.ts
|
|
5013
|
-
var import_react42 = require("react");
|
|
5014
|
-
var import_editor_elements4 = require("@elementor/editor-elements");
|
|
5015
|
-
var useElementCanHaveChildren = () => {
|
|
5016
|
-
const { element } = (0, import_editor_elements4.useSelectedElement)();
|
|
5017
|
-
const elementId = element?.id || "";
|
|
5018
|
-
return (0, import_react42.useMemo)(() => {
|
|
5019
|
-
const container = (0, import_editor_elements4.getContainer)(elementId);
|
|
5020
|
-
if (!container) {
|
|
5021
|
-
return false;
|
|
5022
|
-
}
|
|
5023
|
-
return container.model.get("elType") !== "widget";
|
|
5024
|
-
}, [elementId]);
|
|
5025
|
-
};
|
|
5162
|
+
var React95 = __toESM(require("react"));
|
|
5163
|
+
var import_react47 = require("react");
|
|
5164
|
+
var import_editor_props47 = require("@elementor/editor-props");
|
|
5165
|
+
var import_icons31 = require("@elementor/icons");
|
|
5166
|
+
var import_ui81 = require("@elementor/ui");
|
|
5167
|
+
var import_i18n47 = require("@wordpress/i18n");
|
|
5026
5168
|
|
|
5027
5169
|
// src/controls/transform-control/initial-values.ts
|
|
5028
|
-
var
|
|
5170
|
+
var import_editor_props39 = require("@elementor/editor-props");
|
|
5029
5171
|
var TransformFunctionKeys = {
|
|
5030
5172
|
move: "transform-move",
|
|
5031
5173
|
scale: "transform-scale",
|
|
@@ -5055,40 +5197,40 @@ var initialTransformValue = {
|
|
|
5055
5197
|
z: { $$type: "size", value: { size: defaultValues.move.size, unit: defaultValues.move.unit } }
|
|
5056
5198
|
}
|
|
5057
5199
|
};
|
|
5058
|
-
var initialScaleValue =
|
|
5059
|
-
x:
|
|
5060
|
-
y:
|
|
5061
|
-
z:
|
|
5200
|
+
var initialScaleValue = import_editor_props39.scaleTransformPropTypeUtil.create({
|
|
5201
|
+
x: import_editor_props39.numberPropTypeUtil.create(defaultValues.scale),
|
|
5202
|
+
y: import_editor_props39.numberPropTypeUtil.create(defaultValues.scale),
|
|
5203
|
+
z: import_editor_props39.numberPropTypeUtil.create(defaultValues.scale)
|
|
5062
5204
|
});
|
|
5063
|
-
var initialRotateValue =
|
|
5205
|
+
var initialRotateValue = import_editor_props39.rotateTransformPropTypeUtil.create({
|
|
5064
5206
|
x: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
5065
5207
|
y: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
5066
5208
|
z: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } }
|
|
5067
5209
|
});
|
|
5068
|
-
var initialSkewValue =
|
|
5210
|
+
var initialSkewValue = import_editor_props39.skewTransformPropTypeUtil.create({
|
|
5069
5211
|
x: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } },
|
|
5070
5212
|
y: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } }
|
|
5071
5213
|
});
|
|
5072
5214
|
|
|
5073
5215
|
// src/controls/transform-control/transform-content.tsx
|
|
5074
|
-
var
|
|
5075
|
-
var
|
|
5076
|
-
var
|
|
5216
|
+
var React89 = __toESM(require("react"));
|
|
5217
|
+
var import_ui76 = require("@elementor/ui");
|
|
5218
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
5077
5219
|
|
|
5078
5220
|
// src/controls/transform-control/functions/move.tsx
|
|
5079
|
-
var
|
|
5080
|
-
var
|
|
5081
|
-
var
|
|
5082
|
-
var
|
|
5083
|
-
var
|
|
5084
|
-
var
|
|
5221
|
+
var React84 = __toESM(require("react"));
|
|
5222
|
+
var import_react42 = require("react");
|
|
5223
|
+
var import_editor_props40 = require("@elementor/editor-props");
|
|
5224
|
+
var import_icons25 = require("@elementor/icons");
|
|
5225
|
+
var import_ui70 = require("@elementor/ui");
|
|
5226
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
5085
5227
|
|
|
5086
5228
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
5087
|
-
var
|
|
5088
|
-
var
|
|
5229
|
+
var React83 = __toESM(require("react"));
|
|
5230
|
+
var import_ui69 = require("@elementor/ui");
|
|
5089
5231
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
5090
5232
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
5091
|
-
return /* @__PURE__ */
|
|
5233
|
+
return /* @__PURE__ */ React83.createElement(import_ui69.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React83.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React83.createElement(import_ui69.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React83.createElement(import_ui69.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React83.createElement(
|
|
5092
5234
|
SizeControl,
|
|
5093
5235
|
{
|
|
5094
5236
|
anchorRef,
|
|
@@ -5104,28 +5246,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
|
|
|
5104
5246
|
// src/controls/transform-control/functions/move.tsx
|
|
5105
5247
|
var moveAxisControls = [
|
|
5106
5248
|
{
|
|
5107
|
-
label: (0,
|
|
5249
|
+
label: (0, import_i18n38.__)("Move X", "elementor"),
|
|
5108
5250
|
bind: "x",
|
|
5109
|
-
startIcon: /* @__PURE__ */
|
|
5251
|
+
startIcon: /* @__PURE__ */ React84.createElement(import_icons25.ArrowRightIcon, { fontSize: "tiny" }),
|
|
5110
5252
|
units: ["px", "%", "em", "rem", "vw"]
|
|
5111
5253
|
},
|
|
5112
5254
|
{
|
|
5113
|
-
label: (0,
|
|
5255
|
+
label: (0, import_i18n38.__)("Move Y", "elementor"),
|
|
5114
5256
|
bind: "y",
|
|
5115
|
-
startIcon: /* @__PURE__ */
|
|
5257
|
+
startIcon: /* @__PURE__ */ React84.createElement(import_icons25.ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
5116
5258
|
units: ["px", "%", "em", "rem", "vh"]
|
|
5117
5259
|
},
|
|
5118
5260
|
{
|
|
5119
|
-
label: (0,
|
|
5261
|
+
label: (0, import_i18n38.__)("Move Z", "elementor"),
|
|
5120
5262
|
bind: "z",
|
|
5121
|
-
startIcon: /* @__PURE__ */
|
|
5263
|
+
startIcon: /* @__PURE__ */ React84.createElement(import_icons25.ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
5122
5264
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
5123
5265
|
}
|
|
5124
5266
|
];
|
|
5125
5267
|
var Move = () => {
|
|
5126
|
-
const context = useBoundProp(
|
|
5127
|
-
const rowRefs = [(0,
|
|
5128
|
-
return /* @__PURE__ */
|
|
5268
|
+
const context = useBoundProp(import_editor_props40.moveTransformPropTypeUtil);
|
|
5269
|
+
const rowRefs = [(0, import_react42.useRef)(null), (0, import_react42.useRef)(null), (0, import_react42.useRef)(null)];
|
|
5270
|
+
return /* @__PURE__ */ React84.createElement(import_ui70.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React84.createElement(PropProvider, { ...context }, /* @__PURE__ */ React84.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React84.createElement(
|
|
5129
5271
|
AxisRow,
|
|
5130
5272
|
{
|
|
5131
5273
|
key: control.bind,
|
|
@@ -5138,34 +5280,34 @@ var Move = () => {
|
|
|
5138
5280
|
};
|
|
5139
5281
|
|
|
5140
5282
|
// src/controls/transform-control/functions/rotate.tsx
|
|
5141
|
-
var
|
|
5142
|
-
var
|
|
5143
|
-
var
|
|
5144
|
-
var
|
|
5145
|
-
var
|
|
5146
|
-
var
|
|
5283
|
+
var React85 = __toESM(require("react"));
|
|
5284
|
+
var import_react43 = require("react");
|
|
5285
|
+
var import_editor_props41 = require("@elementor/editor-props");
|
|
5286
|
+
var import_icons26 = require("@elementor/icons");
|
|
5287
|
+
var import_ui71 = require("@elementor/ui");
|
|
5288
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
5147
5289
|
var rotateAxisControls = [
|
|
5148
5290
|
{
|
|
5149
|
-
label: (0,
|
|
5291
|
+
label: (0, import_i18n39.__)("Rotate X", "elementor"),
|
|
5150
5292
|
bind: "x",
|
|
5151
|
-
startIcon: /* @__PURE__ */
|
|
5293
|
+
startIcon: /* @__PURE__ */ React85.createElement(import_icons26.Arrow360Icon, { fontSize: "tiny" })
|
|
5152
5294
|
},
|
|
5153
5295
|
{
|
|
5154
|
-
label: (0,
|
|
5296
|
+
label: (0, import_i18n39.__)("Rotate Y", "elementor"),
|
|
5155
5297
|
bind: "y",
|
|
5156
|
-
startIcon: /* @__PURE__ */
|
|
5298
|
+
startIcon: /* @__PURE__ */ React85.createElement(import_icons26.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
5157
5299
|
},
|
|
5158
5300
|
{
|
|
5159
|
-
label: (0,
|
|
5301
|
+
label: (0, import_i18n39.__)("Rotate Z", "elementor"),
|
|
5160
5302
|
bind: "z",
|
|
5161
|
-
startIcon: /* @__PURE__ */
|
|
5303
|
+
startIcon: /* @__PURE__ */ React85.createElement(import_icons26.RotateClockwiseIcon, { fontSize: "tiny" })
|
|
5162
5304
|
}
|
|
5163
5305
|
];
|
|
5164
5306
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
5165
5307
|
var Rotate = () => {
|
|
5166
|
-
const context = useBoundProp(
|
|
5167
|
-
const rowRefs = [(0,
|
|
5168
|
-
return /* @__PURE__ */
|
|
5308
|
+
const context = useBoundProp(import_editor_props41.rotateTransformPropTypeUtil);
|
|
5309
|
+
const rowRefs = [(0, import_react43.useRef)(null), (0, import_react43.useRef)(null), (0, import_react43.useRef)(null)];
|
|
5310
|
+
return /* @__PURE__ */ React85.createElement(import_ui71.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React85.createElement(PropProvider, { ...context }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React85.createElement(
|
|
5169
5311
|
AxisRow,
|
|
5170
5312
|
{
|
|
5171
5313
|
key: control.bind,
|
|
@@ -5177,68 +5319,68 @@ var Rotate = () => {
|
|
|
5177
5319
|
};
|
|
5178
5320
|
|
|
5179
5321
|
// src/controls/transform-control/functions/scale.tsx
|
|
5180
|
-
var
|
|
5181
|
-
var
|
|
5182
|
-
var
|
|
5183
|
-
var
|
|
5184
|
-
var
|
|
5185
|
-
var
|
|
5322
|
+
var React87 = __toESM(require("react"));
|
|
5323
|
+
var import_react44 = require("react");
|
|
5324
|
+
var import_editor_props42 = require("@elementor/editor-props");
|
|
5325
|
+
var import_icons27 = require("@elementor/icons");
|
|
5326
|
+
var import_ui73 = require("@elementor/ui");
|
|
5327
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
5186
5328
|
|
|
5187
5329
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
5188
|
-
var
|
|
5189
|
-
var
|
|
5330
|
+
var React86 = __toESM(require("react"));
|
|
5331
|
+
var import_ui72 = require("@elementor/ui");
|
|
5190
5332
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
5191
|
-
return /* @__PURE__ */
|
|
5333
|
+
return /* @__PURE__ */ React86.createElement(import_ui72.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React86.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React86.createElement(import_ui72.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React86.createElement(ControlLabel, null, label)), /* @__PURE__ */ React86.createElement(import_ui72.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React86.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React86.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
5192
5334
|
};
|
|
5193
5335
|
|
|
5194
5336
|
// src/controls/transform-control/functions/scale.tsx
|
|
5195
5337
|
var scaleAxisControls = [
|
|
5196
5338
|
{
|
|
5197
|
-
label: (0,
|
|
5339
|
+
label: (0, import_i18n40.__)("Scale X", "elementor"),
|
|
5198
5340
|
bind: "x",
|
|
5199
|
-
startIcon: /* @__PURE__ */
|
|
5341
|
+
startIcon: /* @__PURE__ */ React87.createElement(import_icons27.ArrowRightIcon, { fontSize: "tiny" })
|
|
5200
5342
|
},
|
|
5201
5343
|
{
|
|
5202
|
-
label: (0,
|
|
5344
|
+
label: (0, import_i18n40.__)("Scale Y", "elementor"),
|
|
5203
5345
|
bind: "y",
|
|
5204
|
-
startIcon: /* @__PURE__ */
|
|
5346
|
+
startIcon: /* @__PURE__ */ React87.createElement(import_icons27.ArrowDownSmallIcon, { fontSize: "tiny" })
|
|
5205
5347
|
},
|
|
5206
5348
|
{
|
|
5207
|
-
label: (0,
|
|
5349
|
+
label: (0, import_i18n40.__)("Scale Z", "elementor"),
|
|
5208
5350
|
bind: "z",
|
|
5209
|
-
startIcon: /* @__PURE__ */
|
|
5351
|
+
startIcon: /* @__PURE__ */ React87.createElement(import_icons27.ArrowDownLeftIcon, { fontSize: "tiny" })
|
|
5210
5352
|
}
|
|
5211
5353
|
];
|
|
5212
5354
|
var Scale = () => {
|
|
5213
|
-
const context = useBoundProp(
|
|
5214
|
-
const rowRefs = [(0,
|
|
5215
|
-
return /* @__PURE__ */
|
|
5355
|
+
const context = useBoundProp(import_editor_props42.scaleTransformPropTypeUtil);
|
|
5356
|
+
const rowRefs = [(0, import_react44.useRef)(null), (0, import_react44.useRef)(null), (0, import_react44.useRef)(null)];
|
|
5357
|
+
return /* @__PURE__ */ React87.createElement(import_ui73.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(PropProvider, { ...context }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React87.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
|
|
5216
5358
|
};
|
|
5217
5359
|
|
|
5218
5360
|
// src/controls/transform-control/functions/skew.tsx
|
|
5219
|
-
var
|
|
5220
|
-
var
|
|
5221
|
-
var
|
|
5222
|
-
var
|
|
5223
|
-
var
|
|
5224
|
-
var
|
|
5361
|
+
var React88 = __toESM(require("react"));
|
|
5362
|
+
var import_react45 = require("react");
|
|
5363
|
+
var import_editor_props43 = require("@elementor/editor-props");
|
|
5364
|
+
var import_icons28 = require("@elementor/icons");
|
|
5365
|
+
var import_ui74 = require("@elementor/ui");
|
|
5366
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
5225
5367
|
var skewAxisControls = [
|
|
5226
5368
|
{
|
|
5227
|
-
label: (0,
|
|
5369
|
+
label: (0, import_i18n41.__)("Skew X", "elementor"),
|
|
5228
5370
|
bind: "x",
|
|
5229
|
-
startIcon: /* @__PURE__ */
|
|
5371
|
+
startIcon: /* @__PURE__ */ React88.createElement(import_icons28.ArrowRightIcon, { fontSize: "tiny" })
|
|
5230
5372
|
},
|
|
5231
5373
|
{
|
|
5232
|
-
label: (0,
|
|
5374
|
+
label: (0, import_i18n41.__)("Skew Y", "elementor"),
|
|
5233
5375
|
bind: "y",
|
|
5234
|
-
startIcon: /* @__PURE__ */
|
|
5376
|
+
startIcon: /* @__PURE__ */ React88.createElement(import_icons28.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
5235
5377
|
}
|
|
5236
5378
|
];
|
|
5237
5379
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
5238
5380
|
var Skew = () => {
|
|
5239
|
-
const context = useBoundProp(
|
|
5240
|
-
const rowRefs = [(0,
|
|
5241
|
-
return /* @__PURE__ */
|
|
5381
|
+
const context = useBoundProp(import_editor_props43.skewTransformPropTypeUtil);
|
|
5382
|
+
const rowRefs = [(0, import_react45.useRef)(null), (0, import_react45.useRef)(null), (0, import_react45.useRef)(null)];
|
|
5383
|
+
return /* @__PURE__ */ React88.createElement(import_ui74.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React88.createElement(PropProvider, { ...context }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React88.createElement(
|
|
5242
5384
|
AxisRow,
|
|
5243
5385
|
{
|
|
5244
5386
|
key: control.bind,
|
|
@@ -5250,19 +5392,19 @@ var Skew = () => {
|
|
|
5250
5392
|
};
|
|
5251
5393
|
|
|
5252
5394
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
5253
|
-
var
|
|
5254
|
-
var
|
|
5255
|
-
var
|
|
5395
|
+
var import_react46 = require("react");
|
|
5396
|
+
var import_editor_props44 = require("@elementor/editor-props");
|
|
5397
|
+
var import_ui75 = require("@elementor/ui");
|
|
5256
5398
|
var useTransformTabsHistory = ({
|
|
5257
5399
|
move: initialMove,
|
|
5258
5400
|
scale: initialScale,
|
|
5259
5401
|
rotate: initialRotate,
|
|
5260
5402
|
skew: initialSkew
|
|
5261
5403
|
}) => {
|
|
5262
|
-
const { value: moveValue, setValue: setMoveValue } = useBoundProp(
|
|
5263
|
-
const { value: scaleValue, setValue: setScaleValue } = useBoundProp(
|
|
5264
|
-
const { value: rotateValue, setValue: setRotateValue } = useBoundProp(
|
|
5265
|
-
const { value: skewValue, setValue: setSkewValue } = useBoundProp(
|
|
5404
|
+
const { value: moveValue, setValue: setMoveValue } = useBoundProp(import_editor_props44.moveTransformPropTypeUtil);
|
|
5405
|
+
const { value: scaleValue, setValue: setScaleValue } = useBoundProp(import_editor_props44.scaleTransformPropTypeUtil);
|
|
5406
|
+
const { value: rotateValue, setValue: setRotateValue } = useBoundProp(import_editor_props44.rotateTransformPropTypeUtil);
|
|
5407
|
+
const { value: skewValue, setValue: setSkewValue } = useBoundProp(import_editor_props44.skewTransformPropTypeUtil);
|
|
5266
5408
|
const { openItemIndex, items: items2 } = useRepeaterContext();
|
|
5267
5409
|
const getCurrentTransformType = () => {
|
|
5268
5410
|
switch (true) {
|
|
@@ -5276,8 +5418,8 @@ var useTransformTabsHistory = ({
|
|
|
5276
5418
|
return TransformFunctionKeys.move;
|
|
5277
5419
|
}
|
|
5278
5420
|
};
|
|
5279
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
5280
|
-
const valuesHistory = (0,
|
|
5421
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui75.useTabs)(getCurrentTransformType());
|
|
5422
|
+
const valuesHistory = (0, import_react46.useRef)({
|
|
5281
5423
|
move: initialMove,
|
|
5282
5424
|
scale: initialScale,
|
|
5283
5425
|
rotate: initialRotate,
|
|
@@ -5338,8 +5480,8 @@ var TransformContent = () => {
|
|
|
5338
5480
|
rotate: initialRotateValue.value,
|
|
5339
5481
|
skew: initialSkewValue.value
|
|
5340
5482
|
});
|
|
5341
|
-
return /* @__PURE__ */
|
|
5342
|
-
|
|
5483
|
+
return /* @__PURE__ */ React89.createElement(PopoverContent, null, /* @__PURE__ */ React89.createElement(import_ui76.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React89.createElement(import_ui76.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React89.createElement(
|
|
5484
|
+
import_ui76.Tabs,
|
|
5343
5485
|
{
|
|
5344
5486
|
size: "small",
|
|
5345
5487
|
variant: "fullWidth",
|
|
@@ -5349,37 +5491,37 @@ var TransformContent = () => {
|
|
|
5349
5491
|
}
|
|
5350
5492
|
},
|
|
5351
5493
|
...getTabsProps(),
|
|
5352
|
-
"aria-label": (0,
|
|
5494
|
+
"aria-label": (0, import_i18n42.__)("Transform", "elementor")
|
|
5353
5495
|
},
|
|
5354
|
-
/* @__PURE__ */
|
|
5355
|
-
/* @__PURE__ */
|
|
5356
|
-
/* @__PURE__ */
|
|
5357
|
-
/* @__PURE__ */
|
|
5358
|
-
)), /* @__PURE__ */
|
|
5496
|
+
/* @__PURE__ */ React89.createElement(import_ui76.Tab, { label: (0, import_i18n42.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
5497
|
+
/* @__PURE__ */ React89.createElement(import_ui76.Tab, { label: (0, import_i18n42.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
5498
|
+
/* @__PURE__ */ React89.createElement(import_ui76.Tab, { label: (0, import_i18n42.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
5499
|
+
/* @__PURE__ */ React89.createElement(import_ui76.Tab, { label: (0, import_i18n42.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
5500
|
+
)), /* @__PURE__ */ React89.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React89.createElement(Move, null)), /* @__PURE__ */ React89.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React89.createElement(Scale, null)), /* @__PURE__ */ React89.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React89.createElement(Rotate, null)), /* @__PURE__ */ React89.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React89.createElement(Skew, null))));
|
|
5359
5501
|
};
|
|
5360
5502
|
|
|
5361
5503
|
// src/controls/transform-control/transform-icon.tsx
|
|
5362
|
-
var
|
|
5363
|
-
var
|
|
5504
|
+
var React90 = __toESM(require("react"));
|
|
5505
|
+
var import_icons29 = require("@elementor/icons");
|
|
5364
5506
|
var TransformIcon = ({ value }) => {
|
|
5365
5507
|
switch (value.$$type) {
|
|
5366
5508
|
case TransformFunctionKeys.move:
|
|
5367
|
-
return /* @__PURE__ */
|
|
5509
|
+
return /* @__PURE__ */ React90.createElement(import_icons29.ArrowsMaximizeIcon, { fontSize: "tiny" });
|
|
5368
5510
|
case TransformFunctionKeys.scale:
|
|
5369
|
-
return /* @__PURE__ */
|
|
5511
|
+
return /* @__PURE__ */ React90.createElement(import_icons29.ArrowAutofitHeightIcon, { fontSize: "tiny" });
|
|
5370
5512
|
case TransformFunctionKeys.rotate:
|
|
5371
|
-
return /* @__PURE__ */
|
|
5513
|
+
return /* @__PURE__ */ React90.createElement(import_icons29.RotateClockwise2Icon, { fontSize: "tiny" });
|
|
5372
5514
|
case TransformFunctionKeys.skew:
|
|
5373
|
-
return /* @__PURE__ */
|
|
5515
|
+
return /* @__PURE__ */ React90.createElement(import_icons29.SkewXIcon, { fontSize: "tiny" });
|
|
5374
5516
|
default:
|
|
5375
5517
|
return null;
|
|
5376
5518
|
}
|
|
5377
5519
|
};
|
|
5378
5520
|
|
|
5379
5521
|
// src/controls/transform-control/transform-label.tsx
|
|
5380
|
-
var
|
|
5381
|
-
var
|
|
5382
|
-
var
|
|
5522
|
+
var React91 = __toESM(require("react"));
|
|
5523
|
+
var import_ui77 = require("@elementor/ui");
|
|
5524
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
5383
5525
|
var orderedAxis = ["x", "y", "z"];
|
|
5384
5526
|
var formatLabel = (value, functionType) => {
|
|
5385
5527
|
return orderedAxis.map((axisKey) => {
|
|
@@ -5397,96 +5539,96 @@ var TransformLabel = (props) => {
|
|
|
5397
5539
|
const { $$type, value } = props.value;
|
|
5398
5540
|
switch ($$type) {
|
|
5399
5541
|
case TransformFunctionKeys.move:
|
|
5400
|
-
return /* @__PURE__ */
|
|
5542
|
+
return /* @__PURE__ */ React91.createElement(Label2, { label: (0, import_i18n43.__)("Move", "elementor"), value: formatLabel(value, "move") });
|
|
5401
5543
|
case TransformFunctionKeys.scale:
|
|
5402
|
-
return /* @__PURE__ */
|
|
5544
|
+
return /* @__PURE__ */ React91.createElement(Label2, { label: (0, import_i18n43.__)("Scale", "elementor"), value: formatLabel(value, "scale") });
|
|
5403
5545
|
case TransformFunctionKeys.rotate:
|
|
5404
|
-
return /* @__PURE__ */
|
|
5546
|
+
return /* @__PURE__ */ React91.createElement(Label2, { label: (0, import_i18n43.__)("Rotate", "elementor"), value: formatLabel(value, "rotate") });
|
|
5405
5547
|
case TransformFunctionKeys.skew:
|
|
5406
|
-
return /* @__PURE__ */
|
|
5548
|
+
return /* @__PURE__ */ React91.createElement(Label2, { label: (0, import_i18n43.__)("Skew", "elementor"), value: formatLabel(value, "skew") });
|
|
5407
5549
|
default:
|
|
5408
5550
|
return "";
|
|
5409
5551
|
}
|
|
5410
5552
|
};
|
|
5411
5553
|
var Label2 = ({ label, value }) => {
|
|
5412
|
-
return /* @__PURE__ */
|
|
5554
|
+
return /* @__PURE__ */ React91.createElement(import_ui77.Box, { component: "span" }, label, ": ", value);
|
|
5413
5555
|
};
|
|
5414
5556
|
|
|
5415
5557
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
5416
|
-
var
|
|
5558
|
+
var React94 = __toESM(require("react"));
|
|
5417
5559
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
5418
|
-
var
|
|
5419
|
-
var
|
|
5420
|
-
var
|
|
5560
|
+
var import_icons30 = require("@elementor/icons");
|
|
5561
|
+
var import_ui80 = require("@elementor/ui");
|
|
5562
|
+
var import_i18n46 = require("@wordpress/i18n");
|
|
5421
5563
|
|
|
5422
5564
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
5423
|
-
var
|
|
5424
|
-
var
|
|
5425
|
-
var
|
|
5426
|
-
var
|
|
5565
|
+
var React92 = __toESM(require("react"));
|
|
5566
|
+
var import_editor_props45 = require("@elementor/editor-props");
|
|
5567
|
+
var import_ui78 = require("@elementor/ui");
|
|
5568
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
5427
5569
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
5428
5570
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
5429
|
-
label: (0,
|
|
5571
|
+
label: (0, import_i18n44.__)("Perspective", "elementor"),
|
|
5430
5572
|
bind: "perspective",
|
|
5431
5573
|
units: ["px", "em", "rem", "vw", "vh"]
|
|
5432
5574
|
};
|
|
5433
5575
|
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
5434
5576
|
{
|
|
5435
|
-
label: (0,
|
|
5577
|
+
label: (0, import_i18n44.__)("Origin X", "elementor"),
|
|
5436
5578
|
bind: "x",
|
|
5437
5579
|
units: ORIGIN_UNITS
|
|
5438
5580
|
},
|
|
5439
5581
|
{
|
|
5440
|
-
label: (0,
|
|
5582
|
+
label: (0, import_i18n44.__)("Origin Y", "elementor"),
|
|
5441
5583
|
bind: "y",
|
|
5442
5584
|
units: ORIGIN_UNITS
|
|
5443
5585
|
}
|
|
5444
5586
|
];
|
|
5445
5587
|
var ChildrenPerspectiveControl = () => {
|
|
5446
|
-
return /* @__PURE__ */
|
|
5588
|
+
return /* @__PURE__ */ React92.createElement(import_ui78.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n44.__)("Children perspective", "elementor")), /* @__PURE__ */ React92.createElement(PerspectiveControl, null), /* @__PURE__ */ React92.createElement(PerspectiveOriginControl, null));
|
|
5447
5589
|
};
|
|
5448
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
5449
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
5590
|
+
var PerspectiveControl = () => /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React92.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
5591
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React92.createElement(PerspectiveOriginControlProvider, null));
|
|
5450
5592
|
var PerspectiveOriginControlProvider = () => {
|
|
5451
|
-
const context = useBoundProp(
|
|
5452
|
-
return /* @__PURE__ */
|
|
5593
|
+
const context = useBoundProp(import_editor_props45.perspectiveOriginPropTypeUtil);
|
|
5594
|
+
return /* @__PURE__ */ React92.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React92.createElement(ControlFields, { control }))));
|
|
5453
5595
|
};
|
|
5454
5596
|
var ControlFields = ({ control }) => {
|
|
5455
|
-
const rowRef =
|
|
5456
|
-
return /* @__PURE__ */
|
|
5597
|
+
const rowRef = React92.useRef(null);
|
|
5598
|
+
return /* @__PURE__ */ React92.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React92.createElement(import_ui78.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React92.createElement(import_ui78.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
5457
5599
|
};
|
|
5458
5600
|
|
|
5459
5601
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
5460
|
-
var
|
|
5461
|
-
var
|
|
5462
|
-
var
|
|
5463
|
-
var
|
|
5602
|
+
var React93 = __toESM(require("react"));
|
|
5603
|
+
var import_editor_props46 = require("@elementor/editor-props");
|
|
5604
|
+
var import_ui79 = require("@elementor/ui");
|
|
5605
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
5464
5606
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
5465
5607
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
5466
5608
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
5467
5609
|
{
|
|
5468
|
-
label: (0,
|
|
5610
|
+
label: (0, import_i18n45.__)("Origin X", "elementor"),
|
|
5469
5611
|
bind: "x",
|
|
5470
5612
|
units: TRANSFORM_ORIGIN_UNITS
|
|
5471
5613
|
},
|
|
5472
5614
|
{
|
|
5473
|
-
label: (0,
|
|
5615
|
+
label: (0, import_i18n45.__)("Origin Y", "elementor"),
|
|
5474
5616
|
bind: "y",
|
|
5475
5617
|
units: TRANSFORM_ORIGIN_UNITS
|
|
5476
5618
|
},
|
|
5477
5619
|
{
|
|
5478
|
-
label: (0,
|
|
5620
|
+
label: (0, import_i18n45.__)("Origin Z", "elementor"),
|
|
5479
5621
|
bind: "z",
|
|
5480
5622
|
units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
|
|
5481
5623
|
}
|
|
5482
5624
|
];
|
|
5483
5625
|
var TransformOriginControl = () => {
|
|
5484
|
-
return /* @__PURE__ */
|
|
5626
|
+
return /* @__PURE__ */ React93.createElement(import_ui79.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, (0, import_i18n45.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React93.createElement(ControlFields2, { control, key: control.bind })));
|
|
5485
5627
|
};
|
|
5486
5628
|
var ControlFields2 = ({ control }) => {
|
|
5487
|
-
const context = useBoundProp(
|
|
5488
|
-
const rowRef =
|
|
5489
|
-
return /* @__PURE__ */
|
|
5629
|
+
const context = useBoundProp(import_editor_props46.transformOriginPropTypeUtil);
|
|
5630
|
+
const rowRef = React93.useRef(null);
|
|
5631
|
+
return /* @__PURE__ */ React93.createElement(PropProvider, { ...context }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React93.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React93.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React93.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
|
|
5490
5632
|
};
|
|
5491
5633
|
|
|
5492
5634
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
@@ -5496,12 +5638,12 @@ var TransformSettingsControl = ({
|
|
|
5496
5638
|
anchorRef,
|
|
5497
5639
|
showChildrenPerspective
|
|
5498
5640
|
}) => {
|
|
5499
|
-
const popupProps = (0,
|
|
5641
|
+
const popupProps = (0, import_ui80.bindPopover)({
|
|
5500
5642
|
...popupState,
|
|
5501
5643
|
anchorEl: anchorRef.current ?? void 0
|
|
5502
5644
|
});
|
|
5503
|
-
return /* @__PURE__ */
|
|
5504
|
-
|
|
5645
|
+
return /* @__PURE__ */ React94.createElement(
|
|
5646
|
+
import_ui80.Popover,
|
|
5505
5647
|
{
|
|
5506
5648
|
disablePortal: true,
|
|
5507
5649
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
@@ -5515,72 +5657,73 @@ var TransformSettingsControl = ({
|
|
|
5515
5657
|
},
|
|
5516
5658
|
...popupProps
|
|
5517
5659
|
},
|
|
5518
|
-
/* @__PURE__ */
|
|
5660
|
+
/* @__PURE__ */ React94.createElement(
|
|
5519
5661
|
import_editor_ui11.PopoverHeader,
|
|
5520
5662
|
{
|
|
5521
|
-
title: (0,
|
|
5663
|
+
title: (0, import_i18n46.__)("Transform settings", "elementor"),
|
|
5522
5664
|
onClose: popupState.close,
|
|
5523
|
-
icon: /* @__PURE__ */
|
|
5665
|
+
icon: /* @__PURE__ */ React94.createElement(import_icons30.AdjustmentsIcon, { fontSize: SIZE8 })
|
|
5524
5666
|
}
|
|
5525
5667
|
),
|
|
5526
|
-
/* @__PURE__ */
|
|
5527
|
-
/* @__PURE__ */
|
|
5668
|
+
/* @__PURE__ */ React94.createElement(import_ui80.Divider, null),
|
|
5669
|
+
/* @__PURE__ */ React94.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React94.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(import_ui80.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React94.createElement(import_ui80.Divider, null)), /* @__PURE__ */ React94.createElement(ChildrenPerspectiveControl, null)))
|
|
5528
5670
|
);
|
|
5529
5671
|
};
|
|
5530
5672
|
|
|
5531
5673
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
5532
5674
|
var SIZE9 = "tiny";
|
|
5533
|
-
var TransformRepeaterControl = createControl(
|
|
5534
|
-
|
|
5535
|
-
|
|
5536
|
-
|
|
5537
|
-
|
|
5538
|
-
|
|
5539
|
-
|
|
5540
|
-
|
|
5541
|
-
|
|
5542
|
-
|
|
5543
|
-
|
|
5544
|
-
|
|
5545
|
-
|
|
5546
|
-
}
|
|
5547
|
-
|
|
5548
|
-
|
|
5675
|
+
var TransformRepeaterControl = createControl(
|
|
5676
|
+
({ showChildrenPerspective }) => {
|
|
5677
|
+
const context = useBoundProp(import_editor_props47.transformPropTypeUtil);
|
|
5678
|
+
const headerRef = (0, import_react47.useRef)(null);
|
|
5679
|
+
const popupState = (0, import_ui81.usePopupState)({ variant: "popover" });
|
|
5680
|
+
return /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(
|
|
5681
|
+
TransformSettingsControl,
|
|
5682
|
+
{
|
|
5683
|
+
popupState,
|
|
5684
|
+
anchorRef: headerRef,
|
|
5685
|
+
showChildrenPerspective
|
|
5686
|
+
}
|
|
5687
|
+
), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React95.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
5688
|
+
}
|
|
5689
|
+
);
|
|
5690
|
+
var ToolTip = /* @__PURE__ */ React95.createElement(
|
|
5691
|
+
import_ui81.Box,
|
|
5549
5692
|
{
|
|
5550
5693
|
component: "span",
|
|
5551
5694
|
"aria-label": void 0,
|
|
5552
5695
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
5553
5696
|
},
|
|
5554
|
-
/* @__PURE__ */
|
|
5555
|
-
/* @__PURE__ */
|
|
5697
|
+
/* @__PURE__ */ React95.createElement(import_icons31.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
|
|
5698
|
+
/* @__PURE__ */ React95.createElement(import_ui81.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n47.__)("You can use each kind of transform only once per element.", "elementor"))
|
|
5556
5699
|
);
|
|
5557
5700
|
var Repeater2 = ({
|
|
5558
5701
|
headerRef,
|
|
5559
5702
|
propType,
|
|
5560
5703
|
popupState
|
|
5561
5704
|
}) => {
|
|
5562
|
-
const transformFunctionsContext = useBoundProp(
|
|
5705
|
+
const transformFunctionsContext = useBoundProp(import_editor_props47.transformFunctionsPropTypeUtil);
|
|
5563
5706
|
const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
|
|
5564
5707
|
const { value: transformValues, bind } = transformFunctionsContext;
|
|
5565
5708
|
const getInitialValue2 = () => {
|
|
5566
5709
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
5567
5710
|
};
|
|
5568
5711
|
const shouldDisableAddItem = !getInitialValue2();
|
|
5569
|
-
return /* @__PURE__ */
|
|
5712
|
+
return /* @__PURE__ */ React95.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React95.createElement(
|
|
5570
5713
|
ControlRepeater,
|
|
5571
5714
|
{
|
|
5572
5715
|
initial: getInitialValue2() ?? initialTransformValue,
|
|
5573
|
-
propTypeUtil:
|
|
5716
|
+
propTypeUtil: import_editor_props47.transformFunctionsPropTypeUtil
|
|
5574
5717
|
},
|
|
5575
|
-
/* @__PURE__ */
|
|
5718
|
+
/* @__PURE__ */ React95.createElement(
|
|
5576
5719
|
RepeaterHeader,
|
|
5577
5720
|
{
|
|
5578
|
-
label: (0,
|
|
5579
|
-
adornment: () => /* @__PURE__ */
|
|
5721
|
+
label: (0, import_i18n47.__)("Transform", "elementor"),
|
|
5722
|
+
adornment: () => /* @__PURE__ */ React95.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
5580
5723
|
ref: headerRef
|
|
5581
5724
|
},
|
|
5582
|
-
/* @__PURE__ */
|
|
5583
|
-
/* @__PURE__ */
|
|
5725
|
+
/* @__PURE__ */ React95.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
5726
|
+
/* @__PURE__ */ React95.createElement(
|
|
5584
5727
|
TooltipAddItemAction,
|
|
5585
5728
|
{
|
|
5586
5729
|
disabled: shouldDisableAddItem,
|
|
@@ -5590,15 +5733,15 @@ var Repeater2 = ({
|
|
|
5590
5733
|
}
|
|
5591
5734
|
)
|
|
5592
5735
|
),
|
|
5593
|
-
/* @__PURE__ */
|
|
5736
|
+
/* @__PURE__ */ React95.createElement(ItemsContainer, null, /* @__PURE__ */ React95.createElement(
|
|
5594
5737
|
Item,
|
|
5595
5738
|
{
|
|
5596
5739
|
Icon: TransformIcon,
|
|
5597
5740
|
Label: TransformLabel,
|
|
5598
|
-
actions: /* @__PURE__ */
|
|
5741
|
+
actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(DisableItemAction, null), /* @__PURE__ */ React95.createElement(RemoveItemAction, null))
|
|
5599
5742
|
}
|
|
5600
5743
|
)),
|
|
5601
|
-
/* @__PURE__ */
|
|
5744
|
+
/* @__PURE__ */ React95.createElement(EditItemPopover, null, /* @__PURE__ */ React95.createElement(TransformContent, null))
|
|
5602
5745
|
));
|
|
5603
5746
|
};
|
|
5604
5747
|
var TransformBasePopoverTrigger = ({
|
|
@@ -5606,29 +5749,29 @@ var TransformBasePopoverTrigger = ({
|
|
|
5606
5749
|
repeaterBindKey
|
|
5607
5750
|
}) => {
|
|
5608
5751
|
const { bind } = useBoundProp();
|
|
5609
|
-
const titleLabel = (0,
|
|
5610
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
5752
|
+
const titleLabel = (0, import_i18n47.__)("Transform settings", "elementor");
|
|
5753
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React95.createElement(import_ui81.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React95.createElement(import_ui81.IconButton, { size: SIZE9, "aria-label": titleLabel, ...(0, import_ui81.bindTrigger)(popupState) }, /* @__PURE__ */ React95.createElement(import_icons31.AdjustmentsIcon, { fontSize: SIZE9 })));
|
|
5611
5754
|
};
|
|
5612
5755
|
|
|
5613
5756
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
5614
|
-
var
|
|
5615
|
-
var
|
|
5616
|
-
var
|
|
5617
|
-
var
|
|
5618
|
-
var
|
|
5619
|
-
var
|
|
5757
|
+
var React98 = __toESM(require("react"));
|
|
5758
|
+
var import_react50 = require("react");
|
|
5759
|
+
var import_editor_props50 = require("@elementor/editor-props");
|
|
5760
|
+
var import_icons33 = require("@elementor/icons");
|
|
5761
|
+
var import_ui84 = require("@elementor/ui");
|
|
5762
|
+
var import_i18n50 = require("@wordpress/i18n");
|
|
5620
5763
|
|
|
5621
5764
|
// src/controls/selection-size-control.tsx
|
|
5622
|
-
var
|
|
5623
|
-
var
|
|
5624
|
-
var
|
|
5625
|
-
var
|
|
5765
|
+
var React96 = __toESM(require("react"));
|
|
5766
|
+
var import_react48 = require("react");
|
|
5767
|
+
var import_editor_props48 = require("@elementor/editor-props");
|
|
5768
|
+
var import_ui82 = require("@elementor/ui");
|
|
5626
5769
|
var SelectionSizeControl = createControl(
|
|
5627
5770
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
5628
|
-
const { value, setValue, propType } = useBoundProp(
|
|
5629
|
-
const rowRef = (0,
|
|
5771
|
+
const { value, setValue, propType } = useBoundProp(import_editor_props48.selectionSizePropTypeUtil);
|
|
5772
|
+
const rowRef = (0, import_react48.useRef)(null);
|
|
5630
5773
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
5631
|
-
const currentSizeConfig = (0,
|
|
5774
|
+
const currentSizeConfig = (0, import_react48.useMemo)(() => {
|
|
5632
5775
|
switch (value.selection.$$type) {
|
|
5633
5776
|
case "key-value":
|
|
5634
5777
|
return sizeConfigMap[value?.selection?.value.value.value || ""];
|
|
@@ -5639,7 +5782,7 @@ var SelectionSizeControl = createControl(
|
|
|
5639
5782
|
}
|
|
5640
5783
|
}, [value, sizeConfigMap]);
|
|
5641
5784
|
const SelectionComponent = selectionConfig.component;
|
|
5642
|
-
return /* @__PURE__ */
|
|
5785
|
+
return /* @__PURE__ */ React96.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React96.createElement(import_ui82.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React96.createElement(import_ui82.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React96.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React96.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React96.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(import_ui82.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React96.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React96.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React96.createElement(
|
|
5643
5786
|
SizeControl,
|
|
5644
5787
|
{
|
|
5645
5788
|
anchorRef: rowRef,
|
|
@@ -5654,12 +5797,12 @@ var SelectionSizeControl = createControl(
|
|
|
5654
5797
|
|
|
5655
5798
|
// src/controls/transition-control/data.ts
|
|
5656
5799
|
var import_utils6 = require("@elementor/utils");
|
|
5657
|
-
var
|
|
5800
|
+
var import_i18n48 = require("@wordpress/i18n");
|
|
5658
5801
|
var initialTransitionValue = {
|
|
5659
5802
|
selection: {
|
|
5660
5803
|
$$type: "key-value",
|
|
5661
5804
|
value: {
|
|
5662
|
-
key: { value: (0,
|
|
5805
|
+
key: { value: (0, import_i18n48.__)("All properties", "elementor"), $$type: "string" },
|
|
5663
5806
|
value: { value: "all", $$type: "string" }
|
|
5664
5807
|
}
|
|
5665
5808
|
},
|
|
@@ -5670,8 +5813,7 @@ var getIsSiteRtl = () => {
|
|
|
5670
5813
|
return !!window.elementorFrontend?.config?.is_rtl;
|
|
5671
5814
|
};
|
|
5672
5815
|
var shouldExtendTransitionProperties = () => {
|
|
5673
|
-
|
|
5674
|
-
if (!hasProInstalled) {
|
|
5816
|
+
if (!(0, import_utils6.hasProInstalled)()) {
|
|
5675
5817
|
return false;
|
|
5676
5818
|
}
|
|
5677
5819
|
const proVersion = window.elementorPro?.config?.version;
|
|
@@ -5684,128 +5826,128 @@ var createTransitionPropertiesList = () => {
|
|
|
5684
5826
|
const isSiteRtl = getIsSiteRtl();
|
|
5685
5827
|
const baseProperties = [
|
|
5686
5828
|
{
|
|
5687
|
-
label: (0,
|
|
5829
|
+
label: (0, import_i18n48.__)("Default", "elementor"),
|
|
5688
5830
|
type: "category",
|
|
5689
|
-
properties: [{ label: (0,
|
|
5831
|
+
properties: [{ label: (0, import_i18n48.__)("All properties", "elementor"), value: "all" }]
|
|
5690
5832
|
},
|
|
5691
5833
|
{
|
|
5692
|
-
label: (0,
|
|
5834
|
+
label: (0, import_i18n48.__)("Margin", "elementor"),
|
|
5693
5835
|
type: "category",
|
|
5694
5836
|
properties: [
|
|
5695
|
-
{ label: (0,
|
|
5696
|
-
{ label: (0,
|
|
5837
|
+
{ label: (0, import_i18n48.__)("Margin (all)", "elementor"), value: "margin", isDisabled: true },
|
|
5838
|
+
{ label: (0, import_i18n48.__)("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
|
|
5697
5839
|
{
|
|
5698
|
-
label: isSiteRtl ? (0,
|
|
5840
|
+
label: isSiteRtl ? (0, import_i18n48.__)("Margin right", "elementor") : (0, import_i18n48.__)("Margin left", "elementor"),
|
|
5699
5841
|
value: "margin-inline-start",
|
|
5700
5842
|
isDisabled: true
|
|
5701
5843
|
},
|
|
5702
5844
|
{
|
|
5703
|
-
label: isSiteRtl ? (0,
|
|
5845
|
+
label: isSiteRtl ? (0, import_i18n48.__)("Margin left", "elementor") : (0, import_i18n48.__)("Margin right", "elementor"),
|
|
5704
5846
|
value: "margin-inline-end",
|
|
5705
5847
|
isDisabled: true
|
|
5706
5848
|
},
|
|
5707
|
-
{ label: (0,
|
|
5849
|
+
{ label: (0, import_i18n48.__)("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
|
|
5708
5850
|
]
|
|
5709
5851
|
},
|
|
5710
5852
|
{
|
|
5711
|
-
label: (0,
|
|
5853
|
+
label: (0, import_i18n48.__)("Padding", "elementor"),
|
|
5712
5854
|
type: "category",
|
|
5713
5855
|
properties: [
|
|
5714
|
-
{ label: (0,
|
|
5715
|
-
{ label: (0,
|
|
5856
|
+
{ label: (0, import_i18n48.__)("Padding (all)", "elementor"), value: "padding", isDisabled: true },
|
|
5857
|
+
{ label: (0, import_i18n48.__)("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
|
|
5716
5858
|
{
|
|
5717
|
-
label: isSiteRtl ? (0,
|
|
5859
|
+
label: isSiteRtl ? (0, import_i18n48.__)("Padding right", "elementor") : (0, import_i18n48.__)("Padding left", "elementor"),
|
|
5718
5860
|
value: "padding-inline-start",
|
|
5719
5861
|
isDisabled: true
|
|
5720
5862
|
},
|
|
5721
5863
|
{
|
|
5722
|
-
label: isSiteRtl ? (0,
|
|
5864
|
+
label: isSiteRtl ? (0, import_i18n48.__)("Padding left", "elementor") : (0, import_i18n48.__)("Padding right", "elementor"),
|
|
5723
5865
|
value: "padding-inline-end",
|
|
5724
5866
|
isDisabled: true
|
|
5725
5867
|
},
|
|
5726
|
-
{ label: (0,
|
|
5868
|
+
{ label: (0, import_i18n48.__)("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
|
|
5727
5869
|
]
|
|
5728
5870
|
},
|
|
5729
5871
|
{
|
|
5730
|
-
label: (0,
|
|
5872
|
+
label: (0, import_i18n48.__)("Flex", "elementor"),
|
|
5731
5873
|
type: "category",
|
|
5732
5874
|
properties: [
|
|
5733
|
-
{ label: (0,
|
|
5734
|
-
{ label: (0,
|
|
5735
|
-
{ label: (0,
|
|
5736
|
-
{ label: (0,
|
|
5875
|
+
{ label: (0, import_i18n48.__)("Flex (all)", "elementor"), value: "flex", isDisabled: true },
|
|
5876
|
+
{ label: (0, import_i18n48.__)("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
|
|
5877
|
+
{ label: (0, import_i18n48.__)("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
|
|
5878
|
+
{ label: (0, import_i18n48.__)("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
|
|
5737
5879
|
]
|
|
5738
5880
|
},
|
|
5739
5881
|
{
|
|
5740
|
-
label: (0,
|
|
5882
|
+
label: (0, import_i18n48.__)("Size", "elementor"),
|
|
5741
5883
|
type: "category",
|
|
5742
5884
|
properties: [
|
|
5743
|
-
{ label: (0,
|
|
5744
|
-
{ label: (0,
|
|
5745
|
-
{ label: (0,
|
|
5746
|
-
{ label: (0,
|
|
5747
|
-
{ label: (0,
|
|
5748
|
-
{ label: (0,
|
|
5885
|
+
{ label: (0, import_i18n48.__)("Width", "elementor"), value: "width", isDisabled: true },
|
|
5886
|
+
{ label: (0, import_i18n48.__)("Height", "elementor"), value: "height", isDisabled: true },
|
|
5887
|
+
{ label: (0, import_i18n48.__)("Max height", "elementor"), value: "max-height", isDisabled: true },
|
|
5888
|
+
{ label: (0, import_i18n48.__)("Max width", "elementor"), value: "max-width", isDisabled: true },
|
|
5889
|
+
{ label: (0, import_i18n48.__)("Min height", "elementor"), value: "min-height", isDisabled: true },
|
|
5890
|
+
{ label: (0, import_i18n48.__)("Min width", "elementor"), value: "min-width", isDisabled: true }
|
|
5749
5891
|
]
|
|
5750
5892
|
},
|
|
5751
5893
|
{
|
|
5752
|
-
label: (0,
|
|
5894
|
+
label: (0, import_i18n48.__)("Position", "elementor"),
|
|
5753
5895
|
type: "category",
|
|
5754
5896
|
properties: [
|
|
5755
|
-
{ label: (0,
|
|
5897
|
+
{ label: (0, import_i18n48.__)("Top", "elementor"), value: "inset-block-start", isDisabled: true },
|
|
5756
5898
|
{
|
|
5757
|
-
label: isSiteRtl ? (0,
|
|
5899
|
+
label: isSiteRtl ? (0, import_i18n48.__)("Right", "elementor") : (0, import_i18n48.__)("Left", "elementor"),
|
|
5758
5900
|
value: "inset-inline-start",
|
|
5759
5901
|
isDisabled: true
|
|
5760
5902
|
},
|
|
5761
5903
|
{
|
|
5762
|
-
label: isSiteRtl ? (0,
|
|
5904
|
+
label: isSiteRtl ? (0, import_i18n48.__)("Left", "elementor") : (0, import_i18n48.__)("Right", "elementor"),
|
|
5763
5905
|
value: "inset-inline-end",
|
|
5764
5906
|
isDisabled: true
|
|
5765
5907
|
},
|
|
5766
|
-
{ label: (0,
|
|
5767
|
-
{ label: (0,
|
|
5908
|
+
{ label: (0, import_i18n48.__)("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
|
|
5909
|
+
{ label: (0, import_i18n48.__)("Z-index", "elementor"), value: "z-index", isDisabled: true }
|
|
5768
5910
|
]
|
|
5769
5911
|
},
|
|
5770
5912
|
{
|
|
5771
|
-
label: (0,
|
|
5913
|
+
label: (0, import_i18n48.__)("Typography", "elementor"),
|
|
5772
5914
|
type: "category",
|
|
5773
5915
|
properties: [
|
|
5774
|
-
{ label: (0,
|
|
5775
|
-
{ label: (0,
|
|
5776
|
-
{ label: (0,
|
|
5777
|
-
{ label: (0,
|
|
5778
|
-
{ label: (0,
|
|
5779
|
-
{ label: (0,
|
|
5780
|
-
{ label: (0,
|
|
5916
|
+
{ label: (0, import_i18n48.__)("Font color", "elementor"), value: "color", isDisabled: true },
|
|
5917
|
+
{ label: (0, import_i18n48.__)("Font size", "elementor"), value: "font-size", isDisabled: true },
|
|
5918
|
+
{ label: (0, import_i18n48.__)("Line height", "elementor"), value: "line-height", isDisabled: true },
|
|
5919
|
+
{ label: (0, import_i18n48.__)("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
|
|
5920
|
+
{ label: (0, import_i18n48.__)("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
|
|
5921
|
+
{ label: (0, import_i18n48.__)("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
|
|
5922
|
+
{ label: (0, import_i18n48.__)("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
|
|
5781
5923
|
]
|
|
5782
5924
|
},
|
|
5783
5925
|
{
|
|
5784
|
-
label: (0,
|
|
5926
|
+
label: (0, import_i18n48.__)("Background", "elementor"),
|
|
5785
5927
|
type: "category",
|
|
5786
5928
|
properties: [
|
|
5787
|
-
{ label: (0,
|
|
5788
|
-
{ label: (0,
|
|
5789
|
-
{ label: (0,
|
|
5929
|
+
{ label: (0, import_i18n48.__)("Background color", "elementor"), value: "background-color", isDisabled: true },
|
|
5930
|
+
{ label: (0, import_i18n48.__)("Background position", "elementor"), value: "background-position", isDisabled: true },
|
|
5931
|
+
{ label: (0, import_i18n48.__)("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
|
|
5790
5932
|
]
|
|
5791
5933
|
},
|
|
5792
5934
|
{
|
|
5793
|
-
label: (0,
|
|
5935
|
+
label: (0, import_i18n48.__)("Border", "elementor"),
|
|
5794
5936
|
type: "category",
|
|
5795
5937
|
properties: [
|
|
5796
|
-
{ label: (0,
|
|
5797
|
-
{ label: (0,
|
|
5798
|
-
{ label: (0,
|
|
5799
|
-
{ label: (0,
|
|
5938
|
+
{ label: (0, import_i18n48.__)("Border (all)", "elementor"), value: "border", isDisabled: true },
|
|
5939
|
+
{ label: (0, import_i18n48.__)("Border radius", "elementor"), value: "border-radius", isDisabled: true },
|
|
5940
|
+
{ label: (0, import_i18n48.__)("Border color", "elementor"), value: "border-color", isDisabled: true },
|
|
5941
|
+
{ label: (0, import_i18n48.__)("Border width", "elementor"), value: "border-width", isDisabled: true }
|
|
5800
5942
|
]
|
|
5801
5943
|
},
|
|
5802
5944
|
{
|
|
5803
|
-
label: (0,
|
|
5945
|
+
label: (0, import_i18n48.__)("Effects", "elementor"),
|
|
5804
5946
|
type: "category",
|
|
5805
5947
|
properties: [
|
|
5806
|
-
{ label: (0,
|
|
5807
|
-
{ label: (0,
|
|
5808
|
-
{ label: (0,
|
|
5948
|
+
{ label: (0, import_i18n48.__)("Opacity", "elementor"), value: "opacity", isDisabled: true },
|
|
5949
|
+
{ label: (0, import_i18n48.__)("Transform (all)", "elementor"), value: "transform", isDisabled: true },
|
|
5950
|
+
{ label: (0, import_i18n48.__)("Filter (all)", "elementor"), value: "filter", isDisabled: true }
|
|
5809
5951
|
]
|
|
5810
5952
|
}
|
|
5811
5953
|
];
|
|
@@ -5818,7 +5960,7 @@ var transitionsItemsList = transitionProperties.map((category) => ({
|
|
|
5818
5960
|
}));
|
|
5819
5961
|
|
|
5820
5962
|
// src/controls/transition-control/trainsition-events.ts
|
|
5821
|
-
var
|
|
5963
|
+
var import_editor_elements4 = require("@elementor/editor-elements");
|
|
5822
5964
|
var import_events = require("@elementor/events");
|
|
5823
5965
|
var transitionRepeaterMixpanelEvent = {
|
|
5824
5966
|
eventName: "click_added_transition",
|
|
@@ -5830,7 +5972,7 @@ function subscribeToTransitionEvent() {
|
|
|
5830
5972
|
eventBus.subscribe("transition-item-added", (data) => {
|
|
5831
5973
|
const payload = data;
|
|
5832
5974
|
const value = payload?.itemValue?.selection?.value?.value?.value;
|
|
5833
|
-
const selectedElements = (0,
|
|
5975
|
+
const selectedElements = (0, import_editor_elements4.getSelectedElements)();
|
|
5834
5976
|
const widgetType = selectedElements[0]?.type ?? null;
|
|
5835
5977
|
(0, import_events.trackEvent)({
|
|
5836
5978
|
transition_type: value ?? "unknown",
|
|
@@ -5841,13 +5983,13 @@ function subscribeToTransitionEvent() {
|
|
|
5841
5983
|
}
|
|
5842
5984
|
|
|
5843
5985
|
// src/controls/transition-control/transition-selector.tsx
|
|
5844
|
-
var
|
|
5845
|
-
var
|
|
5846
|
-
var
|
|
5986
|
+
var React97 = __toESM(require("react"));
|
|
5987
|
+
var import_react49 = require("react");
|
|
5988
|
+
var import_editor_props49 = require("@elementor/editor-props");
|
|
5847
5989
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
5848
|
-
var
|
|
5849
|
-
var
|
|
5850
|
-
var
|
|
5990
|
+
var import_icons32 = require("@elementor/icons");
|
|
5991
|
+
var import_ui83 = require("@elementor/ui");
|
|
5992
|
+
var import_i18n49 = require("@wordpress/i18n");
|
|
5851
5993
|
var toTransitionSelectorValue = (label) => {
|
|
5852
5994
|
for (const category of transitionProperties) {
|
|
5853
5995
|
const property = category.properties.find((prop) => prop.label === label);
|
|
@@ -5884,13 +6026,13 @@ var TransitionSelector = ({
|
|
|
5884
6026
|
disabledItems = [],
|
|
5885
6027
|
showPromotion = false
|
|
5886
6028
|
}) => {
|
|
5887
|
-
const { value, setValue } = useBoundProp(
|
|
6029
|
+
const { value, setValue } = useBoundProp(import_editor_props49.keyValuePropTypeUtil);
|
|
5888
6030
|
const {
|
|
5889
6031
|
key: { value: transitionLabel }
|
|
5890
6032
|
} = value;
|
|
5891
|
-
const defaultRef = (0,
|
|
5892
|
-
const popoverState = (0,
|
|
5893
|
-
const disabledCategories = (0,
|
|
6033
|
+
const defaultRef = (0, import_react49.useRef)(null);
|
|
6034
|
+
const popoverState = (0, import_ui83.usePopupState)({ variant: "popover" });
|
|
6035
|
+
const disabledCategories = (0, import_react49.useMemo)(() => {
|
|
5894
6036
|
return new Set(
|
|
5895
6037
|
transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
|
|
5896
6038
|
);
|
|
@@ -5910,7 +6052,7 @@ var TransitionSelector = ({
|
|
|
5910
6052
|
return [
|
|
5911
6053
|
first,
|
|
5912
6054
|
{
|
|
5913
|
-
label: (0,
|
|
6055
|
+
label: (0, import_i18n49.__)("Recently Used", "elementor"),
|
|
5914
6056
|
items: recentItems
|
|
5915
6057
|
},
|
|
5916
6058
|
...rest
|
|
@@ -5934,27 +6076,27 @@ var TransitionSelector = ({
|
|
|
5934
6076
|
left: rect.right + 36
|
|
5935
6077
|
};
|
|
5936
6078
|
};
|
|
5937
|
-
return /* @__PURE__ */
|
|
5938
|
-
|
|
6079
|
+
return /* @__PURE__ */ React97.createElement(import_ui83.Box, { ref: defaultRef }, /* @__PURE__ */ React97.createElement(ControlActions, null, /* @__PURE__ */ React97.createElement(
|
|
6080
|
+
import_ui83.UnstableTag,
|
|
5939
6081
|
{
|
|
5940
6082
|
variant: "outlined",
|
|
5941
6083
|
label: transitionLabel,
|
|
5942
|
-
endIcon: /* @__PURE__ */
|
|
5943
|
-
...(0,
|
|
6084
|
+
endIcon: /* @__PURE__ */ React97.createElement(import_icons32.ChevronDownIcon, { fontSize: "tiny" }),
|
|
6085
|
+
...(0, import_ui83.bindTrigger)(popoverState),
|
|
5944
6086
|
fullWidth: true
|
|
5945
6087
|
}
|
|
5946
|
-
)), /* @__PURE__ */
|
|
5947
|
-
|
|
6088
|
+
)), /* @__PURE__ */ React97.createElement(
|
|
6089
|
+
import_ui83.Popover,
|
|
5948
6090
|
{
|
|
5949
6091
|
disablePortal: true,
|
|
5950
6092
|
disableScrollLock: true,
|
|
5951
|
-
...(0,
|
|
6093
|
+
...(0, import_ui83.bindPopover)(popoverState),
|
|
5952
6094
|
anchorReference: "anchorPosition",
|
|
5953
6095
|
anchorPosition: getAnchorPosition(),
|
|
5954
6096
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
5955
6097
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
5956
6098
|
},
|
|
5957
|
-
/* @__PURE__ */
|
|
6099
|
+
/* @__PURE__ */ React97.createElement(
|
|
5958
6100
|
ItemSelector,
|
|
5959
6101
|
{
|
|
5960
6102
|
itemsList: getItemList(),
|
|
@@ -5962,11 +6104,11 @@ var TransitionSelector = ({
|
|
|
5962
6104
|
onItemChange: handleTransitionPropertyChange,
|
|
5963
6105
|
onClose: popoverState.close,
|
|
5964
6106
|
sectionWidth: 268,
|
|
5965
|
-
title: (0,
|
|
5966
|
-
icon:
|
|
6107
|
+
title: (0, import_i18n49.__)("Transition Property", "elementor"),
|
|
6108
|
+
icon: import_icons32.VariationsIcon,
|
|
5967
6109
|
disabledItems: includeCurrentValueInOptions(value, disabledItems),
|
|
5968
|
-
categoryItemContentTemplate: (item) => /* @__PURE__ */
|
|
5969
|
-
|
|
6110
|
+
categoryItemContentTemplate: (item) => /* @__PURE__ */ React97.createElement(
|
|
6111
|
+
import_ui83.Box,
|
|
5970
6112
|
{
|
|
5971
6113
|
sx: {
|
|
5972
6114
|
display: "flex",
|
|
@@ -5975,13 +6117,13 @@ var TransitionSelector = ({
|
|
|
5975
6117
|
width: "100%"
|
|
5976
6118
|
}
|
|
5977
6119
|
},
|
|
5978
|
-
/* @__PURE__ */
|
|
5979
|
-
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */
|
|
6120
|
+
/* @__PURE__ */ React97.createElement("span", null, item.value),
|
|
6121
|
+
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React97.createElement(import_editor_ui12.PromotionChip, null)
|
|
5980
6122
|
),
|
|
5981
|
-
footer: showPromotion ? /* @__PURE__ */
|
|
6123
|
+
footer: showPromotion ? /* @__PURE__ */ React97.createElement(
|
|
5982
6124
|
import_editor_ui12.PromotionAlert,
|
|
5983
6125
|
{
|
|
5984
|
-
message: (0,
|
|
6126
|
+
message: (0, import_i18n49.__)(
|
|
5985
6127
|
"Upgrade to customize transition properties and control effects.",
|
|
5986
6128
|
"elementor"
|
|
5987
6129
|
),
|
|
@@ -5999,9 +6141,9 @@ var DURATION_CONFIG = {
|
|
|
5999
6141
|
units: ["s", "ms"],
|
|
6000
6142
|
defaultUnit: "ms"
|
|
6001
6143
|
};
|
|
6002
|
-
var childArrayPropTypeUtil = (0,
|
|
6003
|
-
|
|
6004
|
-
|
|
6144
|
+
var childArrayPropTypeUtil = (0, import_editor_props50.createArrayPropUtils)(
|
|
6145
|
+
import_editor_props50.selectionSizePropTypeUtil.key,
|
|
6146
|
+
import_editor_props50.selectionSizePropTypeUtil.schema,
|
|
6005
6147
|
"transition"
|
|
6006
6148
|
);
|
|
6007
6149
|
subscribeToTransitionEvent();
|
|
@@ -6016,8 +6158,8 @@ var areAllPropertiesUsed = (value = []) => {
|
|
|
6016
6158
|
};
|
|
6017
6159
|
var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
6018
6160
|
return {
|
|
6019
|
-
selectionLabel: (0,
|
|
6020
|
-
sizeLabel: (0,
|
|
6161
|
+
selectionLabel: (0, import_i18n50.__)("Type", "elementor"),
|
|
6162
|
+
sizeLabel: (0, import_i18n50.__)("Duration", "elementor"),
|
|
6021
6163
|
selectionConfig: {
|
|
6022
6164
|
component: TransitionSelector,
|
|
6023
6165
|
props: {
|
|
@@ -6045,7 +6187,7 @@ var isItemDisabled = (item) => {
|
|
|
6045
6187
|
};
|
|
6046
6188
|
var getChildControlConfig = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
6047
6189
|
return {
|
|
6048
|
-
propTypeUtil:
|
|
6190
|
+
propTypeUtil: import_editor_props50.selectionSizePropTypeUtil,
|
|
6049
6191
|
component: SelectionSizeControl,
|
|
6050
6192
|
props: getSelectionSizeProps(recentlyUsedList, disabledItems, showPromotion),
|
|
6051
6193
|
isItemDisabled
|
|
@@ -6093,18 +6235,18 @@ var getInitialValue = (values = []) => {
|
|
|
6093
6235
|
}
|
|
6094
6236
|
return initialTransitionValue;
|
|
6095
6237
|
};
|
|
6096
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
6097
|
-
|
|
6238
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React98.createElement(
|
|
6239
|
+
import_ui84.Alert,
|
|
6098
6240
|
{
|
|
6099
6241
|
sx: {
|
|
6100
6242
|
width: 280,
|
|
6101
6243
|
gap: 0.5
|
|
6102
6244
|
},
|
|
6103
6245
|
color: "secondary",
|
|
6104
|
-
icon: /* @__PURE__ */
|
|
6246
|
+
icon: /* @__PURE__ */ React98.createElement(import_icons33.InfoCircleFilledIcon, null)
|
|
6105
6247
|
},
|
|
6106
|
-
/* @__PURE__ */
|
|
6107
|
-
/* @__PURE__ */
|
|
6248
|
+
/* @__PURE__ */ React98.createElement(import_ui84.AlertTitle, null, (0, import_i18n50.__)("Transitions", "elementor")),
|
|
6249
|
+
/* @__PURE__ */ React98.createElement(import_ui84.Box, { component: "span" }, /* @__PURE__ */ React98.createElement(import_ui84.Typography, { variant: "body2" }, (0, import_i18n50.__)("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
6108
6250
|
);
|
|
6109
6251
|
var TransitionRepeaterControl = createControl(
|
|
6110
6252
|
({
|
|
@@ -6112,20 +6254,20 @@ var TransitionRepeaterControl = createControl(
|
|
|
6112
6254
|
currentStyleState
|
|
6113
6255
|
}) => {
|
|
6114
6256
|
const currentStyleIsNormal = currentStyleState === null;
|
|
6115
|
-
const [recentlyUsedList, setRecentlyUsedList] = (0,
|
|
6257
|
+
const [recentlyUsedList, setRecentlyUsedList] = (0, import_react50.useState)([]);
|
|
6116
6258
|
const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
6117
|
-
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0,
|
|
6259
|
+
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react50.useMemo)(
|
|
6118
6260
|
() => getDisabledItemLabels(value),
|
|
6119
6261
|
[value]
|
|
6120
6262
|
);
|
|
6121
|
-
const allowedTransitionSet = (0,
|
|
6263
|
+
const allowedTransitionSet = (0, import_react50.useMemo)(() => {
|
|
6122
6264
|
const set = /* @__PURE__ */ new Set();
|
|
6123
6265
|
transitionProperties.forEach((category) => {
|
|
6124
6266
|
category.properties.forEach((prop) => set.add(prop.value));
|
|
6125
6267
|
});
|
|
6126
6268
|
return set;
|
|
6127
6269
|
}, []);
|
|
6128
|
-
(0,
|
|
6270
|
+
(0, import_react50.useEffect)(() => {
|
|
6129
6271
|
if (!value || value.length === 0) {
|
|
6130
6272
|
return;
|
|
6131
6273
|
}
|
|
@@ -6137,18 +6279,18 @@ var TransitionRepeaterControl = createControl(
|
|
|
6137
6279
|
setValue(sanitized);
|
|
6138
6280
|
}
|
|
6139
6281
|
}, [allowedTransitionSet]);
|
|
6140
|
-
(0,
|
|
6282
|
+
(0, import_react50.useEffect)(() => {
|
|
6141
6283
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
6142
6284
|
}, [recentlyUsedListGetter]);
|
|
6143
|
-
const allPropertiesUsed = (0,
|
|
6285
|
+
const allPropertiesUsed = (0, import_react50.useMemo)(() => areAllPropertiesUsed(value), [value]);
|
|
6144
6286
|
const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
|
|
6145
|
-
return /* @__PURE__ */
|
|
6287
|
+
return /* @__PURE__ */ React98.createElement(
|
|
6146
6288
|
RepeatableControl,
|
|
6147
6289
|
{
|
|
6148
|
-
label: (0,
|
|
6149
|
-
repeaterLabel: (0,
|
|
6290
|
+
label: (0, import_i18n50.__)("Transitions", "elementor"),
|
|
6291
|
+
repeaterLabel: (0, import_i18n50.__)("Transitions", "elementor"),
|
|
6150
6292
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
6151
|
-
placeholder: (0,
|
|
6293
|
+
placeholder: (0, import_i18n50.__)("Empty Transition", "elementor"),
|
|
6152
6294
|
showDuplicate: false,
|
|
6153
6295
|
showToggle: true,
|
|
6154
6296
|
initialValues: getInitialValue(value),
|
|
@@ -6169,19 +6311,19 @@ var TransitionRepeaterControl = createControl(
|
|
|
6169
6311
|
);
|
|
6170
6312
|
|
|
6171
6313
|
// src/controls/date-time-control.tsx
|
|
6172
|
-
var
|
|
6314
|
+
var React99 = __toESM(require("react"));
|
|
6173
6315
|
var dayjs = __toESM(require("dayjs"));
|
|
6174
|
-
var import_editor_props50 = require("@elementor/editor-props");
|
|
6175
6316
|
var import_editor_props51 = require("@elementor/editor-props");
|
|
6176
|
-
var
|
|
6317
|
+
var import_editor_props52 = require("@elementor/editor-props");
|
|
6318
|
+
var import_ui85 = require("@elementor/ui");
|
|
6177
6319
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
6178
6320
|
var TIME_FORMAT = "HH:mm";
|
|
6179
6321
|
var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
6180
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
6322
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props52.DateTimePropTypeUtil);
|
|
6181
6323
|
const handleChange = (newValue, meta) => {
|
|
6182
6324
|
const field = meta.bind;
|
|
6183
6325
|
const fieldValue = newValue[field];
|
|
6184
|
-
if ((0,
|
|
6326
|
+
if ((0, import_editor_props51.isTransformable)(fieldValue)) {
|
|
6185
6327
|
return setValue({ ...value, [field]: fieldValue });
|
|
6186
6328
|
}
|
|
6187
6329
|
let formattedValue = "";
|
|
@@ -6217,10 +6359,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
6217
6359
|
const base = dayjs.default();
|
|
6218
6360
|
return base.hour(h).minute(m).second(0).millisecond(0);
|
|
6219
6361
|
};
|
|
6220
|
-
return /* @__PURE__ */
|
|
6221
|
-
|
|
6362
|
+
return /* @__PURE__ */ React99.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React99.createElement(ControlActions, null, /* @__PURE__ */ React99.createElement(import_ui85.LocalizationProvider, null, /* @__PURE__ */ React99.createElement(import_ui85.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React99.createElement(
|
|
6363
|
+
import_ui85.DatePicker,
|
|
6222
6364
|
{
|
|
6223
|
-
value: parseDateValue(
|
|
6365
|
+
value: parseDateValue(import_editor_props51.stringPropTypeUtil.extract(value?.date)),
|
|
6224
6366
|
onChange: (v) => handleChange({ date: v }, { bind: "date" }),
|
|
6225
6367
|
disabled: inputDisabled,
|
|
6226
6368
|
slotProps: {
|
|
@@ -6229,10 +6371,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
6229
6371
|
openPickerIcon: { fontSize: "tiny" }
|
|
6230
6372
|
}
|
|
6231
6373
|
}
|
|
6232
|
-
)), /* @__PURE__ */
|
|
6233
|
-
|
|
6374
|
+
)), /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React99.createElement(
|
|
6375
|
+
import_ui85.TimePicker,
|
|
6234
6376
|
{
|
|
6235
|
-
value: parseTimeValue(
|
|
6377
|
+
value: parseTimeValue(import_editor_props51.stringPropTypeUtil.extract(value?.time)),
|
|
6236
6378
|
onChange: (v) => handleChange({ time: v }, { bind: "time" }),
|
|
6237
6379
|
disabled: inputDisabled,
|
|
6238
6380
|
slotProps: {
|
|
@@ -6245,16 +6387,16 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
6245
6387
|
});
|
|
6246
6388
|
|
|
6247
6389
|
// src/controls/inline-editing-control.tsx
|
|
6248
|
-
var
|
|
6249
|
-
var
|
|
6250
|
-
var
|
|
6251
|
-
var
|
|
6390
|
+
var React101 = __toESM(require("react"));
|
|
6391
|
+
var import_react53 = require("react");
|
|
6392
|
+
var import_editor_props53 = require("@elementor/editor-props");
|
|
6393
|
+
var import_ui87 = require("@elementor/ui");
|
|
6252
6394
|
var import_utils7 = require("@elementor/utils");
|
|
6253
6395
|
|
|
6254
6396
|
// src/components/inline-editor.tsx
|
|
6255
|
-
var
|
|
6256
|
-
var
|
|
6257
|
-
var
|
|
6397
|
+
var React100 = __toESM(require("react"));
|
|
6398
|
+
var import_react51 = require("react");
|
|
6399
|
+
var import_ui86 = require("@elementor/ui");
|
|
6258
6400
|
var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
|
|
6259
6401
|
var import_extension_document = __toESM(require("@tiptap/extension-document"));
|
|
6260
6402
|
var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
|
|
@@ -6267,7 +6409,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
|
|
|
6267
6409
|
var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
|
|
6268
6410
|
var import_extension_text = __toESM(require("@tiptap/extension-text"));
|
|
6269
6411
|
var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
|
|
6270
|
-
var
|
|
6412
|
+
var import_react52 = require("@tiptap/react");
|
|
6271
6413
|
|
|
6272
6414
|
// src/utils/inline-editing.ts
|
|
6273
6415
|
function isEmpty(value = "") {
|
|
@@ -6283,7 +6425,7 @@ function isEmpty(value = "") {
|
|
|
6283
6425
|
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
6284
6426
|
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
6285
6427
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
6286
|
-
var InlineEditor =
|
|
6428
|
+
var InlineEditor = React100.forwardRef((props, ref) => {
|
|
6287
6429
|
const {
|
|
6288
6430
|
value,
|
|
6289
6431
|
setValue,
|
|
@@ -6297,7 +6439,7 @@ var InlineEditor = React99.forwardRef((props, ref) => {
|
|
|
6297
6439
|
wrapperClassName,
|
|
6298
6440
|
onSelectionEnd
|
|
6299
6441
|
} = props;
|
|
6300
|
-
const containerRef = (0,
|
|
6442
|
+
const containerRef = (0, import_react51.useRef)(null);
|
|
6301
6443
|
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
6302
6444
|
const onUpdate = ({ editor: updatedEditor }) => {
|
|
6303
6445
|
const newValue = updatedEditor.getHTML();
|
|
@@ -6318,7 +6460,7 @@ var InlineEditor = React99.forwardRef((props, ref) => {
|
|
|
6318
6460
|
...HTMLAttributes,
|
|
6319
6461
|
class: elementClasses
|
|
6320
6462
|
});
|
|
6321
|
-
const editor = (0,
|
|
6463
|
+
const editor = (0, import_react52.useEditor)({
|
|
6322
6464
|
extensions: [
|
|
6323
6465
|
import_extension_document.default.extend({
|
|
6324
6466
|
content: documentContentSettings
|
|
@@ -6383,7 +6525,7 @@ var InlineEditor = React99.forwardRef((props, ref) => {
|
|
|
6383
6525
|
editor.commands.setContent(value, { emitUpdate: false });
|
|
6384
6526
|
}
|
|
6385
6527
|
}, [editor, value]);
|
|
6386
|
-
return /* @__PURE__ */
|
|
6528
|
+
return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
|
|
6387
6529
|
Wrapper,
|
|
6388
6530
|
{
|
|
6389
6531
|
containerRef,
|
|
@@ -6392,13 +6534,13 @@ var InlineEditor = React99.forwardRef((props, ref) => {
|
|
|
6392
6534
|
onBlur,
|
|
6393
6535
|
className: wrapperClassName
|
|
6394
6536
|
},
|
|
6395
|
-
/* @__PURE__ */
|
|
6537
|
+
/* @__PURE__ */ React100.createElement(import_react52.EditorContent, { ref, editor })
|
|
6396
6538
|
));
|
|
6397
6539
|
});
|
|
6398
6540
|
var Wrapper = ({ children, containerRef, editor, sx, onBlur, className }) => {
|
|
6399
|
-
const wrappedChildren = /* @__PURE__ */
|
|
6400
|
-
return onBlur ? /* @__PURE__ */
|
|
6401
|
-
|
|
6541
|
+
const wrappedChildren = /* @__PURE__ */ React100.createElement(import_ui86.Box, { ref: containerRef, ...sx, className }, children);
|
|
6542
|
+
return onBlur ? /* @__PURE__ */ React100.createElement(
|
|
6543
|
+
import_ui86.ClickAwayListener,
|
|
6402
6544
|
{
|
|
6403
6545
|
onClickAway: (event) => {
|
|
6404
6546
|
if (containerRef.current?.contains(event.target) || editor.view.dom.contains(event.target)) {
|
|
@@ -6408,11 +6550,11 @@ var Wrapper = ({ children, containerRef, editor, sx, onBlur, className }) => {
|
|
|
6408
6550
|
}
|
|
6409
6551
|
},
|
|
6410
6552
|
wrappedChildren
|
|
6411
|
-
) : /* @__PURE__ */
|
|
6553
|
+
) : /* @__PURE__ */ React100.createElement(React100.Fragment, null, wrappedChildren);
|
|
6412
6554
|
};
|
|
6413
6555
|
var useOnUpdate = (callback, dependencies) => {
|
|
6414
|
-
const hasMounted = (0,
|
|
6415
|
-
(0,
|
|
6556
|
+
const hasMounted = (0, import_react51.useRef)(false);
|
|
6557
|
+
(0, import_react51.useEffect)(() => {
|
|
6416
6558
|
if (hasMounted.current) {
|
|
6417
6559
|
callback();
|
|
6418
6560
|
} else {
|
|
@@ -6429,32 +6571,32 @@ var InlineEditingControl = createControl(
|
|
|
6429
6571
|
attributes,
|
|
6430
6572
|
props
|
|
6431
6573
|
}) => {
|
|
6432
|
-
const { value, setValue } = useBoundProp(
|
|
6433
|
-
const content =
|
|
6434
|
-
const debouncedParse = (0,
|
|
6574
|
+
const { value, setValue } = useBoundProp(import_editor_props53.htmlV3PropTypeUtil);
|
|
6575
|
+
const content = import_editor_props53.stringPropTypeUtil.extract(value?.content ?? null) ?? "";
|
|
6576
|
+
const debouncedParse = (0, import_react53.useMemo)(
|
|
6435
6577
|
() => (0, import_utils7.debounce)((html) => {
|
|
6436
|
-
const parsed = (0,
|
|
6578
|
+
const parsed = (0, import_editor_props53.parseHtmlChildren)(html);
|
|
6437
6579
|
setValue({
|
|
6438
|
-
content: parsed.content ?
|
|
6580
|
+
content: parsed.content ? import_editor_props53.stringPropTypeUtil.create(parsed.content) : null,
|
|
6439
6581
|
children: parsed.children
|
|
6440
6582
|
});
|
|
6441
6583
|
}, CHILDREN_PARSE_DEBOUNCE_MS),
|
|
6442
6584
|
[setValue]
|
|
6443
6585
|
);
|
|
6444
|
-
const handleChange = (0,
|
|
6586
|
+
const handleChange = (0, import_react53.useCallback)(
|
|
6445
6587
|
(newValue) => {
|
|
6446
6588
|
const html = newValue ?? "";
|
|
6447
6589
|
setValue({
|
|
6448
|
-
content: html ?
|
|
6590
|
+
content: html ? import_editor_props53.stringPropTypeUtil.create(html) : null,
|
|
6449
6591
|
children: value?.children ?? []
|
|
6450
6592
|
});
|
|
6451
6593
|
debouncedParse(html);
|
|
6452
6594
|
},
|
|
6453
6595
|
[setValue, value?.children, debouncedParse]
|
|
6454
6596
|
);
|
|
6455
|
-
(0,
|
|
6456
|
-
return /* @__PURE__ */
|
|
6457
|
-
|
|
6597
|
+
(0, import_react53.useEffect)(() => () => debouncedParse.cancel(), [debouncedParse]);
|
|
6598
|
+
return /* @__PURE__ */ React101.createElement(ControlActions, null, /* @__PURE__ */ React101.createElement(
|
|
6599
|
+
import_ui87.Box,
|
|
6458
6600
|
{
|
|
6459
6601
|
sx: {
|
|
6460
6602
|
p: 0.8,
|
|
@@ -6491,111 +6633,111 @@ var InlineEditingControl = createControl(
|
|
|
6491
6633
|
...attributes,
|
|
6492
6634
|
...props
|
|
6493
6635
|
},
|
|
6494
|
-
/* @__PURE__ */
|
|
6636
|
+
/* @__PURE__ */ React101.createElement(InlineEditor, { value: content, setValue: handleChange })
|
|
6495
6637
|
));
|
|
6496
6638
|
}
|
|
6497
6639
|
);
|
|
6498
6640
|
|
|
6499
6641
|
// src/controls/email-form-action-control.tsx
|
|
6500
|
-
var
|
|
6501
|
-
var
|
|
6642
|
+
var React102 = __toESM(require("react"));
|
|
6643
|
+
var import_editor_props54 = require("@elementor/editor-props");
|
|
6502
6644
|
var import_editor_ui13 = require("@elementor/editor-ui");
|
|
6503
|
-
var
|
|
6504
|
-
var
|
|
6505
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
6506
|
-
var SendToField = () => /* @__PURE__ */
|
|
6645
|
+
var import_ui88 = require("@elementor/ui");
|
|
6646
|
+
var import_i18n51 = require("@wordpress/i18n");
|
|
6647
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React102.createElement(import_ui88.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React102.createElement(import_ui88.Grid, { item: true }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React102.createElement(import_ui88.Grid, { item: true }, /* @__PURE__ */ React102.createElement(TextControl, { placeholder }))));
|
|
6648
|
+
var SendToField = () => /* @__PURE__ */ React102.createElement(
|
|
6507
6649
|
EmailField,
|
|
6508
6650
|
{
|
|
6509
6651
|
bind: "to",
|
|
6510
|
-
label: (0,
|
|
6511
|
-
placeholder: (0,
|
|
6652
|
+
label: (0, import_i18n51.__)("Send To", "elementor"),
|
|
6653
|
+
placeholder: (0, import_i18n51.__)("Where should we send new submissions?", "elementor")
|
|
6512
6654
|
}
|
|
6513
6655
|
);
|
|
6514
|
-
var SubjectField = () => /* @__PURE__ */
|
|
6656
|
+
var SubjectField = () => /* @__PURE__ */ React102.createElement(
|
|
6515
6657
|
EmailField,
|
|
6516
6658
|
{
|
|
6517
6659
|
bind: "subject",
|
|
6518
|
-
label: (0,
|
|
6519
|
-
placeholder: (0,
|
|
6660
|
+
label: (0, import_i18n51.__)("Email Subject", "elementor"),
|
|
6661
|
+
placeholder: (0, import_i18n51.__)("New form submission", "elementor")
|
|
6520
6662
|
}
|
|
6521
6663
|
);
|
|
6522
|
-
var MessageField = () => /* @__PURE__ */
|
|
6664
|
+
var MessageField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React102.createElement(import_ui88.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React102.createElement(import_ui88.Grid, { item: true }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, (0, import_i18n51.__)("Message", "elementor"))), /* @__PURE__ */ React102.createElement(import_ui88.Grid, { item: true }, /* @__PURE__ */ React102.createElement(
|
|
6523
6665
|
TextAreaControl,
|
|
6524
6666
|
{
|
|
6525
|
-
placeholder: (0,
|
|
6667
|
+
placeholder: (0, import_i18n51.__)(
|
|
6526
6668
|
"By default, all form fields are sent via [all-fields] shortcode.",
|
|
6527
6669
|
"elementor"
|
|
6528
6670
|
)
|
|
6529
6671
|
}
|
|
6530
6672
|
))));
|
|
6531
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
6673
|
+
var FromEmailField = () => /* @__PURE__ */ React102.createElement(
|
|
6532
6674
|
EmailField,
|
|
6533
6675
|
{
|
|
6534
6676
|
bind: "from",
|
|
6535
|
-
label: (0,
|
|
6536
|
-
placeholder: (0,
|
|
6677
|
+
label: (0, import_i18n51.__)("From email", "elementor"),
|
|
6678
|
+
placeholder: (0, import_i18n51.__)("What email address should appear as the sender?", "elementor")
|
|
6537
6679
|
}
|
|
6538
6680
|
);
|
|
6539
|
-
var FromNameField = () => /* @__PURE__ */
|
|
6681
|
+
var FromNameField = () => /* @__PURE__ */ React102.createElement(
|
|
6540
6682
|
EmailField,
|
|
6541
6683
|
{
|
|
6542
6684
|
bind: "from-name",
|
|
6543
|
-
label: (0,
|
|
6544
|
-
placeholder: (0,
|
|
6685
|
+
label: (0, import_i18n51.__)("From name", "elementor"),
|
|
6686
|
+
placeholder: (0, import_i18n51.__)("What name should appear as the sender?", "elementor")
|
|
6545
6687
|
}
|
|
6546
6688
|
);
|
|
6547
|
-
var ReplyToField = () => /* @__PURE__ */
|
|
6548
|
-
var CcField = () => /* @__PURE__ */
|
|
6549
|
-
var BccField = () => /* @__PURE__ */
|
|
6550
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
6689
|
+
var ReplyToField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "reply-to", label: (0, import_i18n51.__)("Reply-to", "elementor") });
|
|
6690
|
+
var CcField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "cc", label: (0, import_i18n51.__)("Cc", "elementor") });
|
|
6691
|
+
var BccField = () => /* @__PURE__ */ React102.createElement(EmailField, { bind: "bcc", label: (0, import_i18n51.__)("Bcc", "elementor") });
|
|
6692
|
+
var MetaDataField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React102.createElement(import_ui88.Stack, { gap: 0.5 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, (0, import_i18n51.__)("Meta data", "elementor")), /* @__PURE__ */ React102.createElement(
|
|
6551
6693
|
ChipsControl,
|
|
6552
6694
|
{
|
|
6553
6695
|
options: [
|
|
6554
|
-
{ label: (0,
|
|
6555
|
-
{ label: (0,
|
|
6556
|
-
{ label: (0,
|
|
6557
|
-
{ label: (0,
|
|
6558
|
-
{ label: (0,
|
|
6696
|
+
{ label: (0, import_i18n51.__)("Date", "elementor"), value: "date" },
|
|
6697
|
+
{ label: (0, import_i18n51.__)("Time", "elementor"), value: "time" },
|
|
6698
|
+
{ label: (0, import_i18n51.__)("Page URL", "elementor"), value: "page-url" },
|
|
6699
|
+
{ label: (0, import_i18n51.__)("User agent", "elementor"), value: "user-agent" },
|
|
6700
|
+
{ label: (0, import_i18n51.__)("Credit", "elementor"), value: "credit" }
|
|
6559
6701
|
]
|
|
6560
6702
|
}
|
|
6561
6703
|
)));
|
|
6562
|
-
var SendAsField = () => /* @__PURE__ */
|
|
6704
|
+
var SendAsField = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React102.createElement(import_ui88.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React102.createElement(import_ui88.Grid, { item: true }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, (0, import_i18n51.__)("Send as", "elementor"))), /* @__PURE__ */ React102.createElement(import_ui88.Grid, { item: true }, /* @__PURE__ */ React102.createElement(
|
|
6563
6705
|
SelectControl,
|
|
6564
6706
|
{
|
|
6565
6707
|
options: [
|
|
6566
|
-
{ label: (0,
|
|
6567
|
-
{ label: (0,
|
|
6708
|
+
{ label: (0, import_i18n51.__)("HTML", "elementor"), value: "html" },
|
|
6709
|
+
{ label: (0, import_i18n51.__)("Plain Text", "elementor"), value: "plain" }
|
|
6568
6710
|
]
|
|
6569
6711
|
}
|
|
6570
6712
|
))));
|
|
6571
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
6713
|
+
var AdvancedSettings = () => /* @__PURE__ */ React102.createElement(import_editor_ui13.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React102.createElement(import_ui88.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React102.createElement(import_ui88.Stack, { gap: 2 }, /* @__PURE__ */ React102.createElement(FromNameField, null), /* @__PURE__ */ React102.createElement(ReplyToField, null), /* @__PURE__ */ React102.createElement(CcField, null), /* @__PURE__ */ React102.createElement(BccField, null), /* @__PURE__ */ React102.createElement(import_ui88.Divider, null), /* @__PURE__ */ React102.createElement(MetaDataField, null), /* @__PURE__ */ React102.createElement(SendAsField, null))));
|
|
6572
6714
|
var EmailFormActionControl = createControl(() => {
|
|
6573
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
6574
|
-
return /* @__PURE__ */
|
|
6715
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props54.emailPropTypeUtil);
|
|
6716
|
+
return /* @__PURE__ */ React102.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React102.createElement(import_ui88.Stack, { gap: 2 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, (0, import_i18n51.__)("Email settings", "elementor")), /* @__PURE__ */ React102.createElement(SendToField, null), /* @__PURE__ */ React102.createElement(SubjectField, null), /* @__PURE__ */ React102.createElement(MessageField, null), /* @__PURE__ */ React102.createElement(FromEmailField, null), /* @__PURE__ */ React102.createElement(AdvancedSettings, null)));
|
|
6575
6717
|
});
|
|
6576
6718
|
|
|
6577
6719
|
// src/components/promotions/display-conditions-control.tsx
|
|
6578
|
-
var
|
|
6579
|
-
var
|
|
6580
|
-
var
|
|
6581
|
-
var
|
|
6582
|
-
var
|
|
6720
|
+
var React104 = __toESM(require("react"));
|
|
6721
|
+
var import_react55 = require("react");
|
|
6722
|
+
var import_icons34 = require("@elementor/icons");
|
|
6723
|
+
var import_ui90 = require("@elementor/ui");
|
|
6724
|
+
var import_i18n52 = require("@wordpress/i18n");
|
|
6583
6725
|
|
|
6584
6726
|
// src/components/promotions/promotion-trigger.tsx
|
|
6585
|
-
var
|
|
6586
|
-
var
|
|
6727
|
+
var React103 = __toESM(require("react"));
|
|
6728
|
+
var import_react54 = require("react");
|
|
6587
6729
|
var import_editor_ui14 = require("@elementor/editor-ui");
|
|
6588
|
-
var
|
|
6730
|
+
var import_ui89 = require("@elementor/ui");
|
|
6589
6731
|
function getV4Promotion(key) {
|
|
6590
6732
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
6591
6733
|
}
|
|
6592
|
-
var PromotionTrigger = (0,
|
|
6734
|
+
var PromotionTrigger = (0, import_react54.forwardRef)(
|
|
6593
6735
|
({ promotionKey, children }, ref) => {
|
|
6594
|
-
const [isOpen, setIsOpen] = (0,
|
|
6736
|
+
const [isOpen, setIsOpen] = (0, import_react54.useState)(false);
|
|
6595
6737
|
const promotion = getV4Promotion(promotionKey);
|
|
6596
6738
|
const toggle = () => setIsOpen((prev) => !prev);
|
|
6597
|
-
(0,
|
|
6598
|
-
return /* @__PURE__ */
|
|
6739
|
+
(0, import_react54.useImperativeHandle)(ref, () => ({ toggle }), []);
|
|
6740
|
+
return /* @__PURE__ */ React103.createElement(React103.Fragment, null, promotion && /* @__PURE__ */ React103.createElement(
|
|
6599
6741
|
import_editor_ui14.PromotionInfotip,
|
|
6600
6742
|
{
|
|
6601
6743
|
title: promotion.title,
|
|
@@ -6608,8 +6750,8 @@ var PromotionTrigger = (0, import_react55.forwardRef)(
|
|
|
6608
6750
|
setIsOpen(false);
|
|
6609
6751
|
}
|
|
6610
6752
|
},
|
|
6611
|
-
/* @__PURE__ */
|
|
6612
|
-
|
|
6753
|
+
/* @__PURE__ */ React103.createElement(
|
|
6754
|
+
import_ui89.Box,
|
|
6613
6755
|
{
|
|
6614
6756
|
onClick: (e) => {
|
|
6615
6757
|
e.stopPropagation();
|
|
@@ -6617,18 +6759,18 @@ var PromotionTrigger = (0, import_react55.forwardRef)(
|
|
|
6617
6759
|
},
|
|
6618
6760
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
6619
6761
|
},
|
|
6620
|
-
children ?? /* @__PURE__ */
|
|
6762
|
+
children ?? /* @__PURE__ */ React103.createElement(import_editor_ui14.PromotionChip, null)
|
|
6621
6763
|
)
|
|
6622
6764
|
));
|
|
6623
6765
|
}
|
|
6624
6766
|
);
|
|
6625
6767
|
|
|
6626
6768
|
// src/components/promotions/display-conditions-control.tsx
|
|
6627
|
-
var ARIA_LABEL = (0,
|
|
6769
|
+
var ARIA_LABEL = (0, import_i18n52.__)("Display Conditions", "elementor");
|
|
6628
6770
|
var DisplayConditionsControl = createControl(() => {
|
|
6629
|
-
const triggerRef = (0,
|
|
6630
|
-
return /* @__PURE__ */
|
|
6631
|
-
|
|
6771
|
+
const triggerRef = (0, import_react55.useRef)(null);
|
|
6772
|
+
return /* @__PURE__ */ React104.createElement(
|
|
6773
|
+
import_ui90.Stack,
|
|
6632
6774
|
{
|
|
6633
6775
|
direction: "row",
|
|
6634
6776
|
spacing: 2,
|
|
@@ -6637,9 +6779,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
6637
6779
|
alignItems: "center"
|
|
6638
6780
|
}
|
|
6639
6781
|
},
|
|
6640
|
-
/* @__PURE__ */
|
|
6641
|
-
/* @__PURE__ */
|
|
6642
|
-
|
|
6782
|
+
/* @__PURE__ */ React104.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions" }),
|
|
6783
|
+
/* @__PURE__ */ React104.createElement(import_ui90.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React104.createElement(
|
|
6784
|
+
import_ui90.IconButton,
|
|
6643
6785
|
{
|
|
6644
6786
|
size: "tiny",
|
|
6645
6787
|
"aria-label": ARIA_LABEL,
|
|
@@ -6651,22 +6793,22 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
6651
6793
|
borderRadius: 1
|
|
6652
6794
|
}
|
|
6653
6795
|
},
|
|
6654
|
-
/* @__PURE__ */
|
|
6796
|
+
/* @__PURE__ */ React104.createElement(import_icons34.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
6655
6797
|
))
|
|
6656
6798
|
);
|
|
6657
6799
|
});
|
|
6658
6800
|
|
|
6659
6801
|
// src/components/promotions/attributes-control.tsx
|
|
6660
|
-
var
|
|
6661
|
-
var
|
|
6662
|
-
var
|
|
6663
|
-
var
|
|
6664
|
-
var
|
|
6665
|
-
var ARIA_LABEL2 = (0,
|
|
6802
|
+
var React105 = __toESM(require("react"));
|
|
6803
|
+
var import_react56 = require("react");
|
|
6804
|
+
var import_icons35 = require("@elementor/icons");
|
|
6805
|
+
var import_ui91 = require("@elementor/ui");
|
|
6806
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
6807
|
+
var ARIA_LABEL2 = (0, import_i18n53.__)("Attributes", "elementor");
|
|
6666
6808
|
var AttributesControl = createControl(() => {
|
|
6667
|
-
const triggerRef = (0,
|
|
6668
|
-
return /* @__PURE__ */
|
|
6669
|
-
|
|
6809
|
+
const triggerRef = (0, import_react56.useRef)(null);
|
|
6810
|
+
return /* @__PURE__ */ React105.createElement(
|
|
6811
|
+
import_ui91.Stack,
|
|
6670
6812
|
{
|
|
6671
6813
|
direction: "row",
|
|
6672
6814
|
spacing: 2,
|
|
@@ -6675,9 +6817,9 @@ var AttributesControl = createControl(() => {
|
|
|
6675
6817
|
alignItems: "center"
|
|
6676
6818
|
}
|
|
6677
6819
|
},
|
|
6678
|
-
/* @__PURE__ */
|
|
6679
|
-
/* @__PURE__ */
|
|
6680
|
-
|
|
6820
|
+
/* @__PURE__ */ React105.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes" }),
|
|
6821
|
+
/* @__PURE__ */ React105.createElement(import_ui91.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React105.createElement(
|
|
6822
|
+
import_icons35.PlusIcon,
|
|
6681
6823
|
{
|
|
6682
6824
|
"aria-label": ARIA_LABEL2,
|
|
6683
6825
|
fontSize: "tiny",
|
|
@@ -6690,21 +6832,21 @@ var AttributesControl = createControl(() => {
|
|
|
6690
6832
|
});
|
|
6691
6833
|
|
|
6692
6834
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
6693
|
-
var
|
|
6694
|
-
var
|
|
6695
|
-
var
|
|
6696
|
-
var CustomIconButton = (0,
|
|
6835
|
+
var React106 = __toESM(require("react"));
|
|
6836
|
+
var import_icons36 = require("@elementor/icons");
|
|
6837
|
+
var import_ui92 = require("@elementor/ui");
|
|
6838
|
+
var CustomIconButton = (0, import_ui92.styled)(import_ui92.IconButton)(({ theme }) => ({
|
|
6697
6839
|
width: theme.spacing(2.5),
|
|
6698
6840
|
height: theme.spacing(2.5)
|
|
6699
6841
|
}));
|
|
6700
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
6842
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React106.createElement(import_ui92.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React106.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React106.createElement(import_icons36.BrushBigIcon, { fontSize: size })));
|
|
6701
6843
|
|
|
6702
6844
|
// src/components/repeater/repeater.tsx
|
|
6703
|
-
var
|
|
6704
|
-
var
|
|
6705
|
-
var
|
|
6706
|
-
var
|
|
6707
|
-
var
|
|
6845
|
+
var React107 = __toESM(require("react"));
|
|
6846
|
+
var import_react57 = require("react");
|
|
6847
|
+
var import_icons37 = require("@elementor/icons");
|
|
6848
|
+
var import_ui93 = require("@elementor/ui");
|
|
6849
|
+
var import_i18n54 = require("@wordpress/i18n");
|
|
6708
6850
|
var SIZE10 = "tiny";
|
|
6709
6851
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
6710
6852
|
var Repeater3 = ({
|
|
@@ -6722,7 +6864,7 @@ var Repeater3 = ({
|
|
|
6722
6864
|
openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
|
|
6723
6865
|
isSortable = true
|
|
6724
6866
|
}) => {
|
|
6725
|
-
const [openItem, setOpenItem] = (0,
|
|
6867
|
+
const [openItem, setOpenItem] = (0, import_react57.useState)(initialOpenItem);
|
|
6726
6868
|
const uniqueKeys = items2.map(
|
|
6727
6869
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
6728
6870
|
);
|
|
@@ -6785,8 +6927,8 @@ var Repeater3 = ({
|
|
|
6785
6927
|
};
|
|
6786
6928
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
6787
6929
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
6788
|
-
const addButton = /* @__PURE__ */
|
|
6789
|
-
|
|
6930
|
+
const addButton = /* @__PURE__ */ React107.createElement(
|
|
6931
|
+
import_ui93.IconButton,
|
|
6790
6932
|
{
|
|
6791
6933
|
size: SIZE10,
|
|
6792
6934
|
sx: {
|
|
@@ -6794,32 +6936,32 @@ var Repeater3 = ({
|
|
|
6794
6936
|
},
|
|
6795
6937
|
disabled: isButtonDisabled,
|
|
6796
6938
|
onClick: addRepeaterItem,
|
|
6797
|
-
"aria-label": (0,
|
|
6939
|
+
"aria-label": (0, import_i18n54.__)("Add item", "elementor")
|
|
6798
6940
|
},
|
|
6799
|
-
/* @__PURE__ */
|
|
6941
|
+
/* @__PURE__ */ React107.createElement(import_icons37.PlusIcon, { fontSize: SIZE10 })
|
|
6800
6942
|
);
|
|
6801
|
-
return /* @__PURE__ */
|
|
6802
|
-
|
|
6943
|
+
return /* @__PURE__ */ React107.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React107.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React107.createElement(
|
|
6944
|
+
import_ui93.Infotip,
|
|
6803
6945
|
{
|
|
6804
6946
|
placement: "right",
|
|
6805
6947
|
content: addButtonInfotipContent,
|
|
6806
6948
|
color: "secondary",
|
|
6807
6949
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
6808
6950
|
},
|
|
6809
|
-
/* @__PURE__ */
|
|
6810
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
6951
|
+
/* @__PURE__ */ React107.createElement(import_ui93.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
6952
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React107.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
6811
6953
|
const index = uniqueKeys.indexOf(key);
|
|
6812
6954
|
const value = items2[index];
|
|
6813
6955
|
if (!value) {
|
|
6814
6956
|
return null;
|
|
6815
6957
|
}
|
|
6816
|
-
return /* @__PURE__ */
|
|
6958
|
+
return /* @__PURE__ */ React107.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React107.createElement(
|
|
6817
6959
|
RepeaterItem,
|
|
6818
6960
|
{
|
|
6819
6961
|
disabled,
|
|
6820
6962
|
propDisabled: value?.disabled,
|
|
6821
|
-
label: /* @__PURE__ */
|
|
6822
|
-
startIcon: /* @__PURE__ */
|
|
6963
|
+
label: /* @__PURE__ */ React107.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React107.createElement(itemSettings.Label, { value, index })),
|
|
6964
|
+
startIcon: /* @__PURE__ */ React107.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React107.createElement(itemSettings.Icon, { value })),
|
|
6823
6965
|
removeItem: () => removeRepeaterItem(index),
|
|
6824
6966
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
6825
6967
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -6831,7 +6973,7 @@ var Repeater3 = ({
|
|
|
6831
6973
|
actions: itemSettings.actions,
|
|
6832
6974
|
value
|
|
6833
6975
|
},
|
|
6834
|
-
(props) => /* @__PURE__ */
|
|
6976
|
+
(props) => /* @__PURE__ */ React107.createElement(
|
|
6835
6977
|
itemSettings.Content,
|
|
6836
6978
|
{
|
|
6837
6979
|
...props,
|
|
@@ -6861,27 +7003,27 @@ var RepeaterItem = ({
|
|
|
6861
7003
|
value
|
|
6862
7004
|
}) => {
|
|
6863
7005
|
const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
|
|
6864
|
-
const duplicateLabel = (0,
|
|
6865
|
-
const toggleLabel = propDisabled ? (0,
|
|
6866
|
-
const removeLabel = (0,
|
|
6867
|
-
return /* @__PURE__ */
|
|
7006
|
+
const duplicateLabel = (0, import_i18n54.__)("Duplicate", "elementor");
|
|
7007
|
+
const toggleLabel = propDisabled ? (0, import_i18n54.__)("Show", "elementor") : (0, import_i18n54.__)("Hide", "elementor");
|
|
7008
|
+
const removeLabel = (0, import_i18n54.__)("Remove", "elementor");
|
|
7009
|
+
return /* @__PURE__ */ React107.createElement(React107.Fragment, null, /* @__PURE__ */ React107.createElement(
|
|
6868
7010
|
RepeaterTag,
|
|
6869
7011
|
{
|
|
6870
7012
|
disabled,
|
|
6871
7013
|
label,
|
|
6872
7014
|
ref: setRef,
|
|
6873
|
-
"aria-label": (0,
|
|
6874
|
-
...(0,
|
|
7015
|
+
"aria-label": (0, import_i18n54.__)("Open item", "elementor"),
|
|
7016
|
+
...(0, import_ui93.bindTrigger)(popoverState),
|
|
6875
7017
|
startIcon,
|
|
6876
|
-
actions: /* @__PURE__ */
|
|
7018
|
+
actions: /* @__PURE__ */ React107.createElement(React107.Fragment, null, showDuplicate && /* @__PURE__ */ React107.createElement(import_ui93.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(import_ui93.IconButton, { size: SIZE10, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React107.createElement(import_icons37.CopyIcon, { fontSize: SIZE10 }))), showToggle && /* @__PURE__ */ React107.createElement(import_ui93.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(import_ui93.IconButton, { size: SIZE10, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React107.createElement(import_icons37.EyeOffIcon, { fontSize: SIZE10 }) : /* @__PURE__ */ React107.createElement(import_icons37.EyeIcon, { fontSize: SIZE10 }))), actions?.(value), showRemove && /* @__PURE__ */ React107.createElement(import_ui93.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React107.createElement(import_ui93.IconButton, { size: SIZE10, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React107.createElement(import_icons37.XIcon, { fontSize: SIZE10 }))))
|
|
6877
7019
|
}
|
|
6878
|
-
), /* @__PURE__ */
|
|
7020
|
+
), /* @__PURE__ */ React107.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React107.createElement(import_ui93.Box, null, children({ anchorEl: ref }))));
|
|
6879
7021
|
};
|
|
6880
7022
|
var usePopover = (openOnMount, onOpen) => {
|
|
6881
|
-
const [ref, setRef] = (0,
|
|
6882
|
-
const popoverState = (0,
|
|
6883
|
-
const popoverProps = (0,
|
|
6884
|
-
(0,
|
|
7023
|
+
const [ref, setRef] = (0, import_react57.useState)(null);
|
|
7024
|
+
const popoverState = (0, import_ui93.usePopupState)({ variant: "popover" });
|
|
7025
|
+
const popoverProps = (0, import_ui93.bindPopover)(popoverState);
|
|
7026
|
+
(0, import_react57.useEffect)(() => {
|
|
6885
7027
|
if (openOnMount && ref) {
|
|
6886
7028
|
popoverState.open(ref);
|
|
6887
7029
|
onOpen?.();
|
|
@@ -6896,20 +7038,20 @@ var usePopover = (openOnMount, onOpen) => {
|
|
|
6896
7038
|
};
|
|
6897
7039
|
|
|
6898
7040
|
// src/components/inline-editor-toolbar.tsx
|
|
7041
|
+
var React109 = __toESM(require("react"));
|
|
7042
|
+
var import_react59 = require("react");
|
|
7043
|
+
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
7044
|
+
var import_icons39 = require("@elementor/icons");
|
|
7045
|
+
var import_ui95 = require("@elementor/ui");
|
|
7046
|
+
var import_react60 = require("@tiptap/react");
|
|
7047
|
+
var import_i18n56 = require("@wordpress/i18n");
|
|
7048
|
+
|
|
7049
|
+
// src/components/url-popover.tsx
|
|
6899
7050
|
var React108 = __toESM(require("react"));
|
|
6900
|
-
var
|
|
6901
|
-
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
7051
|
+
var import_react58 = require("react");
|
|
6902
7052
|
var import_icons38 = require("@elementor/icons");
|
|
6903
7053
|
var import_ui94 = require("@elementor/ui");
|
|
6904
|
-
var import_react61 = require("@tiptap/react");
|
|
6905
7054
|
var import_i18n55 = require("@wordpress/i18n");
|
|
6906
|
-
|
|
6907
|
-
// src/components/url-popover.tsx
|
|
6908
|
-
var React107 = __toESM(require("react"));
|
|
6909
|
-
var import_react59 = require("react");
|
|
6910
|
-
var import_icons37 = require("@elementor/icons");
|
|
6911
|
-
var import_ui93 = require("@elementor/ui");
|
|
6912
|
-
var import_i18n54 = require("@wordpress/i18n");
|
|
6913
7055
|
var UrlPopover = ({
|
|
6914
7056
|
popupState,
|
|
6915
7057
|
restoreValue,
|
|
@@ -6919,8 +7061,8 @@ var UrlPopover = ({
|
|
|
6919
7061
|
openInNewTab,
|
|
6920
7062
|
onToggleNewTab
|
|
6921
7063
|
}) => {
|
|
6922
|
-
const inputRef = (0,
|
|
6923
|
-
(0,
|
|
7064
|
+
const inputRef = (0, import_react58.useRef)(null);
|
|
7065
|
+
(0, import_react58.useEffect)(() => {
|
|
6924
7066
|
if (popupState.isOpen) {
|
|
6925
7067
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
6926
7068
|
}
|
|
@@ -6929,57 +7071,57 @@ var UrlPopover = ({
|
|
|
6929
7071
|
restoreValue();
|
|
6930
7072
|
popupState.close();
|
|
6931
7073
|
};
|
|
6932
|
-
return /* @__PURE__ */
|
|
6933
|
-
|
|
7074
|
+
return /* @__PURE__ */ React108.createElement(
|
|
7075
|
+
import_ui94.Popover,
|
|
6934
7076
|
{
|
|
6935
7077
|
slotProps: {
|
|
6936
7078
|
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
6937
7079
|
},
|
|
6938
|
-
...(0,
|
|
7080
|
+
...(0, import_ui94.bindPopover)(popupState),
|
|
6939
7081
|
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
6940
7082
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
6941
7083
|
onClose: handleClose
|
|
6942
7084
|
},
|
|
6943
|
-
/* @__PURE__ */
|
|
6944
|
-
|
|
7085
|
+
/* @__PURE__ */ React108.createElement(import_ui94.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React108.createElement(
|
|
7086
|
+
import_ui94.TextField,
|
|
6945
7087
|
{
|
|
6946
7088
|
value,
|
|
6947
7089
|
onChange,
|
|
6948
7090
|
size: "tiny",
|
|
6949
7091
|
fullWidth: true,
|
|
6950
|
-
placeholder: (0,
|
|
7092
|
+
placeholder: (0, import_i18n55.__)("Type a URL", "elementor"),
|
|
6951
7093
|
inputProps: { ref: inputRef },
|
|
6952
7094
|
color: "secondary",
|
|
6953
7095
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
6954
7096
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
6955
7097
|
}
|
|
6956
|
-
), /* @__PURE__ */
|
|
6957
|
-
|
|
7098
|
+
), /* @__PURE__ */ React108.createElement(import_ui94.Tooltip, { title: (0, import_i18n55.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React108.createElement(
|
|
7099
|
+
import_ui94.ToggleButton,
|
|
6958
7100
|
{
|
|
6959
7101
|
size: "tiny",
|
|
6960
7102
|
value: "newTab",
|
|
6961
7103
|
selected: openInNewTab,
|
|
6962
7104
|
onClick: onToggleNewTab,
|
|
6963
|
-
"aria-label": (0,
|
|
7105
|
+
"aria-label": (0, import_i18n55.__)("Open in a new tab", "elementor"),
|
|
6964
7106
|
sx: { borderRadius: "8px" }
|
|
6965
7107
|
},
|
|
6966
|
-
/* @__PURE__ */
|
|
7108
|
+
/* @__PURE__ */ React108.createElement(import_icons38.ExternalLinkIcon, { fontSize: "tiny" })
|
|
6967
7109
|
)))
|
|
6968
7110
|
);
|
|
6969
7111
|
};
|
|
6970
7112
|
|
|
6971
7113
|
// src/components/inline-editor-toolbar.tsx
|
|
6972
7114
|
var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
6973
|
-
const [urlValue, setUrlValue] = (0,
|
|
6974
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
6975
|
-
const toolbarRef = (0,
|
|
6976
|
-
const linkPopupState = (0,
|
|
7115
|
+
const [urlValue, setUrlValue] = (0, import_react59.useState)("");
|
|
7116
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react59.useState)(false);
|
|
7117
|
+
const toolbarRef = (0, import_react59.useRef)(null);
|
|
7118
|
+
const linkPopupState = (0, import_ui95.usePopupState)({ variant: "popover" });
|
|
6977
7119
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
6978
|
-
const editorState = (0,
|
|
7120
|
+
const editorState = (0, import_react60.useEditorState)({
|
|
6979
7121
|
editor,
|
|
6980
7122
|
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
6981
7123
|
});
|
|
6982
|
-
const formatButtonsList = (0,
|
|
7124
|
+
const formatButtonsList = (0, import_react59.useMemo)(() => {
|
|
6983
7125
|
const buttons = Object.values(formatButtons);
|
|
6984
7126
|
if (isElementClickable) {
|
|
6985
7127
|
return buttons.filter((button) => button.action !== "link");
|
|
@@ -7016,11 +7158,11 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
7016
7158
|
}
|
|
7017
7159
|
linkPopupState.close();
|
|
7018
7160
|
};
|
|
7019
|
-
|
|
7161
|
+
React109.useEffect(() => {
|
|
7020
7162
|
editor?.commands?.focus();
|
|
7021
7163
|
}, [editor]);
|
|
7022
|
-
return /* @__PURE__ */
|
|
7023
|
-
|
|
7164
|
+
return /* @__PURE__ */ React109.createElement(
|
|
7165
|
+
import_ui95.Box,
|
|
7024
7166
|
{
|
|
7025
7167
|
ref: toolbarRef,
|
|
7026
7168
|
sx: {
|
|
@@ -7036,9 +7178,9 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
7036
7178
|
...sx
|
|
7037
7179
|
}
|
|
7038
7180
|
},
|
|
7039
|
-
/* @__PURE__ */
|
|
7040
|
-
/* @__PURE__ */
|
|
7041
|
-
|
|
7181
|
+
/* @__PURE__ */ React109.createElement(import_ui95.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React109.createElement(import_ui95.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
7182
|
+
/* @__PURE__ */ React109.createElement(
|
|
7183
|
+
import_ui95.ToggleButtonGroup,
|
|
7042
7184
|
{
|
|
7043
7185
|
value: editorState,
|
|
7044
7186
|
size: "tiny",
|
|
@@ -7046,7 +7188,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
7046
7188
|
display: "flex",
|
|
7047
7189
|
gap: 0.5,
|
|
7048
7190
|
border: "none",
|
|
7049
|
-
[`& .${
|
|
7191
|
+
[`& .${import_ui95.toggleButtonGroupClasses.firstButton}, & .${import_ui95.toggleButtonGroupClasses.middleButton}, & .${import_ui95.toggleButtonGroupClasses.lastButton}`]: {
|
|
7050
7192
|
borderRadius: "8px",
|
|
7051
7193
|
border: "none",
|
|
7052
7194
|
marginLeft: 0,
|
|
@@ -7059,8 +7201,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
7059
7201
|
}
|
|
7060
7202
|
}
|
|
7061
7203
|
},
|
|
7062
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
7063
|
-
|
|
7204
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React109.createElement(import_ui95.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React109.createElement(
|
|
7205
|
+
import_ui95.ToggleButton,
|
|
7064
7206
|
{
|
|
7065
7207
|
value: button.action,
|
|
7066
7208
|
"aria-label": button.label,
|
|
@@ -7077,7 +7219,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
7077
7219
|
button.icon
|
|
7078
7220
|
)))
|
|
7079
7221
|
),
|
|
7080
|
-
/* @__PURE__ */
|
|
7222
|
+
/* @__PURE__ */ React109.createElement(
|
|
7081
7223
|
UrlPopover,
|
|
7082
7224
|
{
|
|
7083
7225
|
popupState: linkPopupState,
|
|
@@ -7092,72 +7234,72 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
7092
7234
|
);
|
|
7093
7235
|
};
|
|
7094
7236
|
var checkIfElementIsClickable = (elementId) => {
|
|
7095
|
-
const container = (0,
|
|
7237
|
+
const container = (0, import_editor_elements5.getContainer)(elementId);
|
|
7096
7238
|
const type = container?.model.get("widgetType");
|
|
7097
7239
|
const isButton = type === "e-button";
|
|
7098
|
-
const hasLink = !!(0,
|
|
7240
|
+
const hasLink = !!(0, import_editor_elements5.getElementSetting)(elementId, "link")?.value?.destination;
|
|
7099
7241
|
return isButton || hasLink;
|
|
7100
7242
|
};
|
|
7101
7243
|
var toolbarButtons = {
|
|
7102
7244
|
clear: {
|
|
7103
|
-
label: (0,
|
|
7104
|
-
icon: /* @__PURE__ */
|
|
7245
|
+
label: (0, import_i18n56.__)("Clear", "elementor"),
|
|
7246
|
+
icon: /* @__PURE__ */ React109.createElement(import_icons39.MinusIcon, { fontSize: "tiny" }),
|
|
7105
7247
|
action: "clear",
|
|
7106
7248
|
method: (editor) => {
|
|
7107
7249
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
7108
7250
|
}
|
|
7109
7251
|
},
|
|
7110
7252
|
bold: {
|
|
7111
|
-
label: (0,
|
|
7112
|
-
icon: /* @__PURE__ */
|
|
7253
|
+
label: (0, import_i18n56.__)("Bold", "elementor"),
|
|
7254
|
+
icon: /* @__PURE__ */ React109.createElement(import_icons39.BoldIcon, { fontSize: "tiny" }),
|
|
7113
7255
|
action: "bold",
|
|
7114
7256
|
method: (editor) => {
|
|
7115
7257
|
editor.chain().focus().toggleBold().run();
|
|
7116
7258
|
}
|
|
7117
7259
|
},
|
|
7118
7260
|
italic: {
|
|
7119
|
-
label: (0,
|
|
7120
|
-
icon: /* @__PURE__ */
|
|
7261
|
+
label: (0, import_i18n56.__)("Italic", "elementor"),
|
|
7262
|
+
icon: /* @__PURE__ */ React109.createElement(import_icons39.ItalicIcon, { fontSize: "tiny" }),
|
|
7121
7263
|
action: "italic",
|
|
7122
7264
|
method: (editor) => {
|
|
7123
7265
|
editor.chain().focus().toggleItalic().run();
|
|
7124
7266
|
}
|
|
7125
7267
|
},
|
|
7126
7268
|
underline: {
|
|
7127
|
-
label: (0,
|
|
7128
|
-
icon: /* @__PURE__ */
|
|
7269
|
+
label: (0, import_i18n56.__)("Underline", "elementor"),
|
|
7270
|
+
icon: /* @__PURE__ */ React109.createElement(import_icons39.UnderlineIcon, { fontSize: "tiny" }),
|
|
7129
7271
|
action: "underline",
|
|
7130
7272
|
method: (editor) => {
|
|
7131
7273
|
editor.chain().focus().toggleUnderline().run();
|
|
7132
7274
|
}
|
|
7133
7275
|
},
|
|
7134
7276
|
strike: {
|
|
7135
|
-
label: (0,
|
|
7136
|
-
icon: /* @__PURE__ */
|
|
7277
|
+
label: (0, import_i18n56.__)("Strikethrough", "elementor"),
|
|
7278
|
+
icon: /* @__PURE__ */ React109.createElement(import_icons39.StrikethroughIcon, { fontSize: "tiny" }),
|
|
7137
7279
|
action: "strike",
|
|
7138
7280
|
method: (editor) => {
|
|
7139
7281
|
editor.chain().focus().toggleStrike().run();
|
|
7140
7282
|
}
|
|
7141
7283
|
},
|
|
7142
7284
|
superscript: {
|
|
7143
|
-
label: (0,
|
|
7144
|
-
icon: /* @__PURE__ */
|
|
7285
|
+
label: (0, import_i18n56.__)("Superscript", "elementor"),
|
|
7286
|
+
icon: /* @__PURE__ */ React109.createElement(import_icons39.SuperscriptIcon, { fontSize: "tiny" }),
|
|
7145
7287
|
action: "superscript",
|
|
7146
7288
|
method: (editor) => {
|
|
7147
7289
|
editor.chain().focus().toggleSuperscript().run();
|
|
7148
7290
|
}
|
|
7149
7291
|
},
|
|
7150
7292
|
subscript: {
|
|
7151
|
-
label: (0,
|
|
7152
|
-
icon: /* @__PURE__ */
|
|
7293
|
+
label: (0, import_i18n56.__)("Subscript", "elementor"),
|
|
7294
|
+
icon: /* @__PURE__ */ React109.createElement(import_icons39.SubscriptIcon, { fontSize: "tiny" }),
|
|
7153
7295
|
action: "subscript",
|
|
7154
7296
|
method: (editor) => {
|
|
7155
7297
|
editor.chain().focus().toggleSubscript().run();
|
|
7156
7298
|
}
|
|
7157
7299
|
},
|
|
7158
7300
|
link: {
|
|
7159
|
-
label: (0,
|
|
7160
|
-
icon: /* @__PURE__ */
|
|
7301
|
+
label: (0, import_i18n56.__)("Link", "elementor"),
|
|
7302
|
+
icon: /* @__PURE__ */ React109.createElement(import_icons39.LinkIcon, { fontSize: "tiny" }),
|
|
7161
7303
|
action: "link",
|
|
7162
7304
|
method: null
|
|
7163
7305
|
}
|
|
@@ -7166,8 +7308,8 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
|
7166
7308
|
var possibleFormats = Object.keys(formatButtons);
|
|
7167
7309
|
|
|
7168
7310
|
// src/components/size/unstable-size-field.tsx
|
|
7169
|
-
var
|
|
7170
|
-
var
|
|
7311
|
+
var React112 = __toESM(require("react"));
|
|
7312
|
+
var import_ui97 = require("@elementor/ui");
|
|
7171
7313
|
|
|
7172
7314
|
// src/hooks/use-size-value.ts
|
|
7173
7315
|
var DEFAULT_UNIT2 = "px";
|
|
@@ -7209,25 +7351,25 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
7209
7351
|
};
|
|
7210
7352
|
|
|
7211
7353
|
// src/components/size/unit-select.tsx
|
|
7212
|
-
var
|
|
7213
|
-
var
|
|
7354
|
+
var React110 = __toESM(require("react"));
|
|
7355
|
+
var import_react61 = require("react");
|
|
7214
7356
|
var import_editor_ui15 = require("@elementor/editor-ui");
|
|
7215
|
-
var
|
|
7357
|
+
var import_ui96 = require("@elementor/ui");
|
|
7216
7358
|
var menuItemContentStyles = {
|
|
7217
7359
|
display: "flex",
|
|
7218
7360
|
flexDirection: "column",
|
|
7219
7361
|
justifyContent: "center"
|
|
7220
7362
|
};
|
|
7221
7363
|
var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
7222
|
-
const popupState = (0,
|
|
7364
|
+
const popupState = (0, import_ui96.usePopupState)({
|
|
7223
7365
|
variant: "popover",
|
|
7224
|
-
popupId: (0,
|
|
7366
|
+
popupId: (0, import_react61.useId)()
|
|
7225
7367
|
});
|
|
7226
7368
|
const handleMenuItemClick = (index) => {
|
|
7227
7369
|
onClick(options[index]);
|
|
7228
7370
|
popupState.close();
|
|
7229
7371
|
};
|
|
7230
|
-
return /* @__PURE__ */
|
|
7372
|
+
return /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement(StyledButton2, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui96.bindTrigger)(popupState) }, value), /* @__PURE__ */ React110.createElement(import_ui96.Menu, { MenuListProps: { dense: true }, ...(0, import_ui96.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React110.createElement(
|
|
7231
7373
|
import_editor_ui15.MenuListItem,
|
|
7232
7374
|
{
|
|
7233
7375
|
key: option,
|
|
@@ -7246,7 +7388,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
7246
7388
|
option.toUpperCase()
|
|
7247
7389
|
))));
|
|
7248
7390
|
};
|
|
7249
|
-
var StyledButton2 = (0,
|
|
7391
|
+
var StyledButton2 = (0, import_ui96.styled)(import_ui96.Button, {
|
|
7250
7392
|
shouldForwardProp: (prop) => prop !== "isPrimaryColor"
|
|
7251
7393
|
})(({ isPrimaryColor, theme }) => ({
|
|
7252
7394
|
color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
|
|
@@ -7256,11 +7398,11 @@ var StyledButton2 = (0, import_ui95.styled)(import_ui95.Button, {
|
|
|
7256
7398
|
}));
|
|
7257
7399
|
|
|
7258
7400
|
// src/components/size/unstable-size-input.tsx
|
|
7259
|
-
var
|
|
7260
|
-
var
|
|
7261
|
-
var UnstableSizeInput = (0,
|
|
7401
|
+
var React111 = __toESM(require("react"));
|
|
7402
|
+
var import_react62 = require("react");
|
|
7403
|
+
var UnstableSizeInput = (0, import_react62.forwardRef)(
|
|
7262
7404
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
7263
|
-
return /* @__PURE__ */
|
|
7405
|
+
return /* @__PURE__ */ React111.createElement(
|
|
7264
7406
|
NumberInput,
|
|
7265
7407
|
{
|
|
7266
7408
|
ref,
|
|
@@ -7298,7 +7440,7 @@ var UnstableSizeField = ({
|
|
|
7298
7440
|
const shouldHighlightUnit = () => {
|
|
7299
7441
|
return hasValue(size);
|
|
7300
7442
|
};
|
|
7301
|
-
return /* @__PURE__ */
|
|
7443
|
+
return /* @__PURE__ */ React112.createElement(
|
|
7302
7444
|
UnstableSizeInput,
|
|
7303
7445
|
{
|
|
7304
7446
|
type: "number",
|
|
@@ -7307,8 +7449,8 @@ var UnstableSizeField = ({
|
|
|
7307
7449
|
onChange: (event) => setSize(event.target.value),
|
|
7308
7450
|
InputProps: {
|
|
7309
7451
|
...InputProps,
|
|
7310
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
7311
|
-
endAdornment: /* @__PURE__ */
|
|
7452
|
+
startAdornment: startIcon && /* @__PURE__ */ React112.createElement(import_ui97.InputAdornment, { position: "start" }, startIcon),
|
|
7453
|
+
endAdornment: /* @__PURE__ */ React112.createElement(import_ui97.InputAdornment, { position: "end" }, /* @__PURE__ */ React112.createElement(
|
|
7312
7454
|
UnitSelect,
|
|
7313
7455
|
{
|
|
7314
7456
|
options: units2,
|
|
@@ -7326,13 +7468,13 @@ var hasValue = (value) => {
|
|
|
7326
7468
|
};
|
|
7327
7469
|
|
|
7328
7470
|
// src/hooks/use-font-families.ts
|
|
7329
|
-
var
|
|
7471
|
+
var import_react63 = require("react");
|
|
7330
7472
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
7331
|
-
var
|
|
7473
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
7332
7474
|
var supportedCategories = {
|
|
7333
|
-
system: (0,
|
|
7334
|
-
custom: (0,
|
|
7335
|
-
googlefonts: (0,
|
|
7475
|
+
system: (0, import_i18n57.__)("System", "elementor"),
|
|
7476
|
+
custom: (0, import_i18n57.__)("Custom Fonts", "elementor"),
|
|
7477
|
+
googlefonts: (0, import_i18n57.__)("Google Fonts", "elementor")
|
|
7336
7478
|
};
|
|
7337
7479
|
var getFontFamilies = () => {
|
|
7338
7480
|
const { controls } = (0, import_editor_v1_adapters.getElementorConfig)();
|
|
@@ -7344,7 +7486,7 @@ var getFontFamilies = () => {
|
|
|
7344
7486
|
};
|
|
7345
7487
|
var useFontFamilies = () => {
|
|
7346
7488
|
const fontFamilies = getFontFamilies();
|
|
7347
|
-
return (0,
|
|
7489
|
+
return (0, import_react63.useMemo)(() => {
|
|
7348
7490
|
const categoriesOrder = ["system", "custom", "googlefonts"];
|
|
7349
7491
|
return Object.entries(fontFamilies || {}).reduce((acc, [font, category]) => {
|
|
7350
7492
|
if (!supportedCategories[category]) {
|
|
@@ -7419,6 +7561,7 @@ var useFontFamilies = () => {
|
|
|
7419
7561
|
TransitionRepeaterControl,
|
|
7420
7562
|
UnstableSizeField,
|
|
7421
7563
|
UrlControl,
|
|
7564
|
+
VideoMediaControl,
|
|
7422
7565
|
createControl,
|
|
7423
7566
|
createControlReplacementsRegistry,
|
|
7424
7567
|
enqueueFont,
|
|
@@ -7426,14 +7569,15 @@ var useFontFamilies = () => {
|
|
|
7426
7569
|
injectIntoRepeaterItemActions,
|
|
7427
7570
|
injectIntoRepeaterItemIcon,
|
|
7428
7571
|
injectIntoRepeaterItemLabel,
|
|
7572
|
+
isUnitExtendedOption,
|
|
7429
7573
|
registerControlReplacement,
|
|
7430
7574
|
transitionProperties,
|
|
7431
7575
|
transitionsItemsList,
|
|
7432
7576
|
useBoundProp,
|
|
7433
7577
|
useControlActions,
|
|
7434
7578
|
useControlReplacement,
|
|
7435
|
-
useElementCanHaveChildren,
|
|
7436
7579
|
useFontFamilies,
|
|
7437
|
-
useSyncExternalState
|
|
7580
|
+
useSyncExternalState,
|
|
7581
|
+
useTypingBuffer
|
|
7438
7582
|
});
|
|
7439
7583
|
//# sourceMappingURL=index.js.map
|