@elementor/editor-controls 4.2.0-856 → 4.2.0-857
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 +10 -2
- package/dist/index.d.ts +10 -2
- package/dist/index.js +1001 -872
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +775 -643
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -15
- package/src/controls/query-filter-repeater-control.tsx +243 -0
- package/src/index.ts +1 -0
package/dist/index.mjs
CHANGED
|
@@ -4831,19 +4831,150 @@ function extractChips(value) {
|
|
|
4831
4831
|
return value.map((item) => extractFlatOptionFromQueryValue(item?.value)).filter((chip) => chip !== null);
|
|
4832
4832
|
}
|
|
4833
4833
|
|
|
4834
|
-
// src/controls/
|
|
4834
|
+
// src/controls/query-filter-repeater-control.tsx
|
|
4835
4835
|
import * as React77 from "react";
|
|
4836
|
-
import {
|
|
4836
|
+
import { useMemo as useMemo12, useRef as useRef13 } from "react";
|
|
4837
|
+
import {
|
|
4838
|
+
queryFilterArrayPropTypeUtil,
|
|
4839
|
+
queryFilterPropTypeUtil,
|
|
4840
|
+
stringPropTypeUtil as stringPropTypeUtil13
|
|
4841
|
+
} from "@elementor/editor-props";
|
|
4842
|
+
import { PlusIcon as PlusIcon3 } from "@elementor/icons";
|
|
4843
|
+
import { Box as Box14, Grid as Grid11, IconButton as IconButton7 } from "@elementor/ui";
|
|
4844
|
+
import { __ as __28, sprintf as sprintf3 } from "@wordpress/i18n";
|
|
4845
|
+
var QueryFilterRepeaterControl = createControl(
|
|
4846
|
+
({
|
|
4847
|
+
allowedKeys,
|
|
4848
|
+
keyConfig,
|
|
4849
|
+
label = __28("Filter", "elementor"),
|
|
4850
|
+
chipsPlaceholder
|
|
4851
|
+
}) => {
|
|
4852
|
+
const { propType, value, setValue } = useBoundProp(queryFilterArrayPropTypeUtil);
|
|
4853
|
+
const usedKeys = useMemo12(() => getUsedKeys(value ?? []), [value]);
|
|
4854
|
+
const nextAvailableKey = useMemo12(
|
|
4855
|
+
() => allowedKeys.find((key) => !usedKeys.has(key)) ?? null,
|
|
4856
|
+
[allowedKeys, usedKeys]
|
|
4857
|
+
);
|
|
4858
|
+
const getKeySelectOptions = useMemo12(
|
|
4859
|
+
() => (currentKey) => allowedKeys.map((itemKey) => ({
|
|
4860
|
+
value: itemKey,
|
|
4861
|
+
label: keyConfig[itemKey]?.label ?? itemKey,
|
|
4862
|
+
disabled: itemKey !== currentKey && usedKeys.has(itemKey)
|
|
4863
|
+
})),
|
|
4864
|
+
[allowedKeys, keyConfig, usedKeys]
|
|
4865
|
+
);
|
|
4866
|
+
const initialFallback = useMemo12(() => createItemForKey(allowedKeys[0] ?? ""), [allowedKeys]);
|
|
4867
|
+
return /* @__PURE__ */ React77.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React77.createElement(ControlRepeater, { initial: initialFallback, propTypeUtil: queryFilterArrayPropTypeUtil }, /* @__PURE__ */ React77.createElement(RepeaterHeader, { label }, /* @__PURE__ */ React77.createElement(AddFilterItemAction, { nextAvailableKey, ariaLabel: label })), /* @__PURE__ */ React77.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React77.createElement(
|
|
4868
|
+
Item,
|
|
4869
|
+
{
|
|
4870
|
+
Icon: EmptyIcon,
|
|
4871
|
+
actions: /* @__PURE__ */ React77.createElement(RemoveItemAction, null),
|
|
4872
|
+
Label: ({ value: itemValue }) => /* @__PURE__ */ React77.createElement(ItemLabel2, { value: itemValue, keyConfig })
|
|
4873
|
+
}
|
|
4874
|
+
)), /* @__PURE__ */ React77.createElement(EditItemPopover, null, /* @__PURE__ */ React77.createElement(
|
|
4875
|
+
ItemContent,
|
|
4876
|
+
{
|
|
4877
|
+
keyConfig,
|
|
4878
|
+
getKeySelectOptions,
|
|
4879
|
+
chipsPlaceholder
|
|
4880
|
+
}
|
|
4881
|
+
))));
|
|
4882
|
+
}
|
|
4883
|
+
);
|
|
4884
|
+
var AddFilterItemAction = ({
|
|
4885
|
+
nextAvailableKey,
|
|
4886
|
+
ariaLabel
|
|
4887
|
+
}) => {
|
|
4888
|
+
const { addItem } = useRepeaterContext();
|
|
4889
|
+
const disabled = nextAvailableKey === null;
|
|
4890
|
+
const onClick = (ev) => {
|
|
4891
|
+
if (!nextAvailableKey) {
|
|
4892
|
+
return;
|
|
4893
|
+
}
|
|
4894
|
+
addItem(ev, { item: createItemForKey(nextAvailableKey), index: 0 });
|
|
4895
|
+
};
|
|
4896
|
+
return /* @__PURE__ */ React77.createElement(Box14, { component: "span", sx: { cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React77.createElement(
|
|
4897
|
+
IconButton7,
|
|
4898
|
+
{
|
|
4899
|
+
size: "tiny",
|
|
4900
|
+
disabled,
|
|
4901
|
+
onClick,
|
|
4902
|
+
"aria-label": sprintf3(__28("Add %s item", "elementor"), ariaLabel.toLowerCase())
|
|
4903
|
+
},
|
|
4904
|
+
/* @__PURE__ */ React77.createElement(PlusIcon3, { fontSize: "tiny" })
|
|
4905
|
+
));
|
|
4906
|
+
};
|
|
4907
|
+
var EmptyIcon = () => null;
|
|
4908
|
+
var ItemLabel2 = ({ value, keyConfig }) => {
|
|
4909
|
+
const itemKey = stringPropTypeUtil13.extract(value?.value?.key);
|
|
4910
|
+
const label = itemKey && keyConfig[itemKey]?.label || __28("Item", "elementor");
|
|
4911
|
+
const chipLabels = extractChipLabels(value?.value?.values);
|
|
4912
|
+
const suffix = chipLabels.length > 0 ? `: ${chipLabels.join(", ")}` : "";
|
|
4913
|
+
return /* @__PURE__ */ React77.createElement(Box14, { component: "span" }, label, suffix);
|
|
4914
|
+
};
|
|
4915
|
+
function extractChipLabels(chipsProp) {
|
|
4916
|
+
const chips = chipsProp?.value ?? [];
|
|
4917
|
+
return chips.map((chip) => stringPropTypeUtil13.extract(chip?.value?.label)).filter((label) => !!label);
|
|
4918
|
+
}
|
|
4919
|
+
var ItemContent = ({
|
|
4920
|
+
keyConfig,
|
|
4921
|
+
getKeySelectOptions,
|
|
4922
|
+
chipsPlaceholder
|
|
4923
|
+
}) => {
|
|
4924
|
+
const propContext = useBoundProp(queryFilterPropTypeUtil);
|
|
4925
|
+
const valuesByKeyRef = useRef13({});
|
|
4926
|
+
const handleValueChange = (nextValue, options, meta) => {
|
|
4927
|
+
if (meta?.bind !== "key") {
|
|
4928
|
+
propContext.setValue(nextValue, options, meta);
|
|
4929
|
+
return;
|
|
4930
|
+
}
|
|
4931
|
+
const previousKey = stringPropTypeUtil13.extract(propContext.value?.key);
|
|
4932
|
+
const newKey = stringPropTypeUtil13.extract(nextValue?.key);
|
|
4933
|
+
if (previousKey) {
|
|
4934
|
+
valuesByKeyRef.current[previousKey] = propContext.value?.values ?? null;
|
|
4935
|
+
}
|
|
4936
|
+
const restoredValues = newKey ? valuesByKeyRef.current[newKey] ?? null : null;
|
|
4937
|
+
propContext.setValue({ ...nextValue, values: restoredValues }, options, meta);
|
|
4938
|
+
};
|
|
4939
|
+
const currentKey = stringPropTypeUtil13.extract(propContext.value?.key);
|
|
4940
|
+
const currentKeyConfig = currentKey ? keyConfig[currentKey] : void 0;
|
|
4941
|
+
const hasValuesField = !!currentKeyConfig?.queryEndpoint;
|
|
4942
|
+
const keySelectOptions = useMemo12(() => getKeySelectOptions(currentKey), [getKeySelectOptions, currentKey]);
|
|
4943
|
+
return /* @__PURE__ */ React77.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, __28("Type", "elementor"))), /* @__PURE__ */ React77.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React77.createElement(SelectControl, { options: keySelectOptions })))), hasValuesField && currentKeyConfig?.queryEndpoint && /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, currentKeyConfig.label)), /* @__PURE__ */ React77.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "values" }, /* @__PURE__ */ React77.createElement(
|
|
4944
|
+
QueryChipsControl,
|
|
4945
|
+
{
|
|
4946
|
+
queryOptions: {
|
|
4947
|
+
url: currentKeyConfig.queryEndpoint.url,
|
|
4948
|
+
params: currentKeyConfig.queryEndpoint.params ?? {}
|
|
4949
|
+
},
|
|
4950
|
+
placeholder: currentKeyConfig.chipsPlaceholder ?? chipsPlaceholder
|
|
4951
|
+
}
|
|
4952
|
+
))))));
|
|
4953
|
+
};
|
|
4954
|
+
function createItemForKey(key) {
|
|
4955
|
+
return queryFilterPropTypeUtil.create({
|
|
4956
|
+
key: stringPropTypeUtil13.create(key),
|
|
4957
|
+
values: null
|
|
4958
|
+
});
|
|
4959
|
+
}
|
|
4960
|
+
function getUsedKeys(items2) {
|
|
4961
|
+
const keys = items2.map((item) => stringPropTypeUtil13.extract(item?.value?.key)).filter((key) => !!key);
|
|
4962
|
+
return new Set(keys);
|
|
4963
|
+
}
|
|
4964
|
+
|
|
4965
|
+
// src/controls/gap-control.tsx
|
|
4966
|
+
import * as React78 from "react";
|
|
4967
|
+
import { useLayoutEffect as useLayoutEffect2, useRef as useRef14, useState as useState13 } from "react";
|
|
4837
4968
|
import {
|
|
4838
4969
|
layoutDirectionPropTypeUtil,
|
|
4839
4970
|
sizePropTypeUtil as sizePropTypeUtil6
|
|
4840
4971
|
} from "@elementor/editor-props";
|
|
4841
4972
|
import { useActiveBreakpoint as useActiveBreakpoint5 } from "@elementor/editor-responsive";
|
|
4842
4973
|
import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
|
|
4843
|
-
import { Grid as
|
|
4844
|
-
import { __ as
|
|
4974
|
+
import { Grid as Grid12, Stack as Stack11, Tooltip as Tooltip7 } from "@elementor/ui";
|
|
4975
|
+
import { __ as __29 } from "@wordpress/i18n";
|
|
4845
4976
|
var GapControl = ({ label }) => {
|
|
4846
|
-
const stackRef =
|
|
4977
|
+
const stackRef = useRef14(null);
|
|
4847
4978
|
const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil6);
|
|
4848
4979
|
const {
|
|
4849
4980
|
value: directionValue,
|
|
@@ -4889,8 +5020,8 @@ var GapControl = ({ label }) => {
|
|
|
4889
5020
|
};
|
|
4890
5021
|
const tooltipLabel = label.toLowerCase();
|
|
4891
5022
|
const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
|
|
4892
|
-
const linkedLabel =
|
|
4893
|
-
const unlinkedLabel =
|
|
5023
|
+
const linkedLabel = __29("Link %s", "elementor").replace("%s", tooltipLabel);
|
|
5024
|
+
const unlinkedLabel = __29("Unlink %s", "elementor").replace("%s", tooltipLabel);
|
|
4894
5025
|
const disabled = sizeDisabled || directionDisabled;
|
|
4895
5026
|
const propProviderProps = {
|
|
4896
5027
|
propType,
|
|
@@ -4910,7 +5041,7 @@ var GapControl = ({ label }) => {
|
|
|
4910
5041
|
}
|
|
4911
5042
|
return sizePropTypeUtil6.extract(directionPlaceholder?.[bind]);
|
|
4912
5043
|
};
|
|
4913
|
-
return /* @__PURE__ */
|
|
5044
|
+
return /* @__PURE__ */ React78.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React78.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React78.createElement(ControlLabel, null, label), /* @__PURE__ */ React78.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React78.createElement(
|
|
4914
5045
|
StyledToggleButton,
|
|
4915
5046
|
{
|
|
4916
5047
|
"aria-label": isLinked ? unlinkedLabel : linkedLabel,
|
|
@@ -4922,21 +5053,21 @@ var GapControl = ({ label }) => {
|
|
|
4922
5053
|
disabled,
|
|
4923
5054
|
isPlaceholder: hasPlaceholders
|
|
4924
5055
|
},
|
|
4925
|
-
/* @__PURE__ */
|
|
4926
|
-
))), /* @__PURE__ */
|
|
5056
|
+
/* @__PURE__ */ React78.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
5057
|
+
))), /* @__PURE__ */ React78.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React78.createElement(Grid12, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React78.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(ControlFormLabel, null, __29("Column", "elementor"))), /* @__PURE__ */ React78.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(
|
|
4927
5058
|
Control4,
|
|
4928
5059
|
{
|
|
4929
5060
|
bind: "column",
|
|
4930
|
-
ariaLabel:
|
|
5061
|
+
ariaLabel: __29("Column gap", "elementor"),
|
|
4931
5062
|
isLinked,
|
|
4932
5063
|
anchorRef: stackRef,
|
|
4933
5064
|
placeholder: getEffectivePlaceholder("column") ?? void 0
|
|
4934
5065
|
}
|
|
4935
|
-
))), /* @__PURE__ */
|
|
5066
|
+
))), /* @__PURE__ */ React78.createElement(Grid12, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React78.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(ControlFormLabel, null, __29("Row", "elementor"))), /* @__PURE__ */ React78.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(
|
|
4936
5067
|
Control4,
|
|
4937
5068
|
{
|
|
4938
5069
|
bind: "row",
|
|
4939
|
-
ariaLabel:
|
|
5070
|
+
ariaLabel: __29("Row gap", "elementor"),
|
|
4940
5071
|
isLinked,
|
|
4941
5072
|
anchorRef: stackRef,
|
|
4942
5073
|
placeholder: getEffectivePlaceholder("row") ?? void 0
|
|
@@ -4951,21 +5082,21 @@ var Control4 = ({
|
|
|
4951
5082
|
placeholder
|
|
4952
5083
|
}) => {
|
|
4953
5084
|
if (isLinked) {
|
|
4954
|
-
return /* @__PURE__ */
|
|
5085
|
+
return /* @__PURE__ */ React78.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel });
|
|
4955
5086
|
}
|
|
4956
|
-
return /* @__PURE__ */
|
|
5087
|
+
return /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React78.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel }));
|
|
4957
5088
|
};
|
|
4958
5089
|
|
|
4959
5090
|
// src/controls/aspect-ratio-control.tsx
|
|
4960
|
-
import * as
|
|
5091
|
+
import * as React79 from "react";
|
|
4961
5092
|
import { useEffect as useEffect14, useState as useState14 } from "react";
|
|
4962
|
-
import { stringPropTypeUtil as
|
|
5093
|
+
import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
|
|
4963
5094
|
import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
|
|
4964
5095
|
import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
|
|
4965
|
-
import { Grid as
|
|
4966
|
-
import { __ as
|
|
5096
|
+
import { Grid as Grid13, Select as Select3, Stack as Stack12, TextField as TextField10 } from "@elementor/ui";
|
|
5097
|
+
import { __ as __30 } from "@wordpress/i18n";
|
|
4967
5098
|
var RATIO_OPTIONS = [
|
|
4968
|
-
{ label:
|
|
5099
|
+
{ label: __30("Auto", "elementor"), value: "auto" },
|
|
4969
5100
|
{ label: "1/1", value: "1/1" },
|
|
4970
5101
|
{ label: "4/3", value: "4/3" },
|
|
4971
5102
|
{ label: "3/4", value: "3/4" },
|
|
@@ -4981,7 +5112,7 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
4981
5112
|
setValue: setAspectRatioValue,
|
|
4982
5113
|
disabled,
|
|
4983
5114
|
placeholder: externalPlaceholder
|
|
4984
|
-
} = useBoundProp(
|
|
5115
|
+
} = useBoundProp(stringPropTypeUtil14);
|
|
4985
5116
|
const aspectRatioValue = currentPropValue ?? externalPlaceholder;
|
|
4986
5117
|
const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
|
|
4987
5118
|
const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
|
|
@@ -5032,7 +5163,7 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5032
5163
|
};
|
|
5033
5164
|
const lookup = currentPropValue ?? externalPlaceholder;
|
|
5034
5165
|
const selectedOption = RATIO_OPTIONS.find((option) => option.value === lookup);
|
|
5035
|
-
return /* @__PURE__ */
|
|
5166
|
+
return /* @__PURE__ */ React79.createElement(ControlActions, null, /* @__PURE__ */ React79.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React79.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React79.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ControlLabel, null, label)), /* @__PURE__ */ React79.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(
|
|
5036
5167
|
Select3,
|
|
5037
5168
|
{
|
|
5038
5169
|
size: "tiny",
|
|
@@ -5044,10 +5175,10 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5044
5175
|
renderValue: isCustomSelected ? void 0 : () => selectedOption?.label,
|
|
5045
5176
|
fullWidth: true
|
|
5046
5177
|
},
|
|
5047
|
-
[...RATIO_OPTIONS, { label:
|
|
5048
|
-
({ label: optionLabel, ...props }) => /* @__PURE__ */
|
|
5178
|
+
[...RATIO_OPTIONS, { label: __30("Custom", "elementor"), value: CUSTOM_RATIO }].map(
|
|
5179
|
+
({ label: optionLabel, ...props }) => /* @__PURE__ */ React79.createElement(MenuListItem5, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
|
|
5049
5180
|
)
|
|
5050
|
-
))), isCustom && /* @__PURE__ */
|
|
5181
|
+
))), isCustom && /* @__PURE__ */ React79.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React79.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(
|
|
5051
5182
|
TextField10,
|
|
5052
5183
|
{
|
|
5053
5184
|
size: "tiny",
|
|
@@ -5057,10 +5188,10 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5057
5188
|
value: customWidth,
|
|
5058
5189
|
onChange: handleCustomWidthChange,
|
|
5059
5190
|
InputProps: {
|
|
5060
|
-
startAdornment: /* @__PURE__ */
|
|
5191
|
+
startAdornment: /* @__PURE__ */ React79.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
|
|
5061
5192
|
}
|
|
5062
5193
|
}
|
|
5063
|
-
)), /* @__PURE__ */
|
|
5194
|
+
)), /* @__PURE__ */ React79.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(
|
|
5064
5195
|
TextField10,
|
|
5065
5196
|
{
|
|
5066
5197
|
size: "tiny",
|
|
@@ -5070,24 +5201,24 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5070
5201
|
value: customHeight,
|
|
5071
5202
|
onChange: handleCustomHeightChange,
|
|
5072
5203
|
InputProps: {
|
|
5073
|
-
startAdornment: /* @__PURE__ */
|
|
5204
|
+
startAdornment: /* @__PURE__ */ React79.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
|
|
5074
5205
|
}
|
|
5075
5206
|
}
|
|
5076
5207
|
)))));
|
|
5077
5208
|
});
|
|
5078
5209
|
|
|
5079
5210
|
// src/controls/svg-media-control.tsx
|
|
5080
|
-
import * as
|
|
5211
|
+
import * as React81 from "react";
|
|
5081
5212
|
import { useState as useState16 } from "react";
|
|
5082
5213
|
import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
|
|
5083
5214
|
import { svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
|
|
5084
5215
|
import { UploadIcon as UploadIcon2 } from "@elementor/icons";
|
|
5085
5216
|
import { Button as Button5, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled9, ThemeProvider } from "@elementor/ui";
|
|
5086
5217
|
import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
|
|
5087
|
-
import { __ as
|
|
5218
|
+
import { __ as __32 } from "@wordpress/i18n";
|
|
5088
5219
|
|
|
5089
5220
|
// src/components/enable-unfiltered-modal.tsx
|
|
5090
|
-
import * as
|
|
5221
|
+
import * as React80 from "react";
|
|
5091
5222
|
import { useState as useState15 } from "react";
|
|
5092
5223
|
import {
|
|
5093
5224
|
Button as Button4,
|
|
@@ -5100,14 +5231,14 @@ import {
|
|
|
5100
5231
|
DialogTitle,
|
|
5101
5232
|
Divider as Divider3
|
|
5102
5233
|
} from "@elementor/ui";
|
|
5103
|
-
import { __ as
|
|
5104
|
-
var ADMIN_TITLE_TEXT =
|
|
5105
|
-
var ADMIN_CONTENT_TEXT =
|
|
5234
|
+
import { __ as __31 } from "@wordpress/i18n";
|
|
5235
|
+
var ADMIN_TITLE_TEXT = __31("Enable Unfiltered Uploads", "elementor");
|
|
5236
|
+
var ADMIN_CONTENT_TEXT = __31(
|
|
5106
5237
|
"Before you enable unfiltered files upload, note that such files include a security risk. Elementor does run a process to remove possible malicious code, but there is still risk involved when using such files.",
|
|
5107
5238
|
"elementor"
|
|
5108
5239
|
);
|
|
5109
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT1 =
|
|
5110
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT2 =
|
|
5240
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT1 = __31("Failed to enable unfiltered files upload.", "elementor");
|
|
5241
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT2 = __31(
|
|
5111
5242
|
"You can try again, if the problem persists, please contact support.",
|
|
5112
5243
|
"elementor"
|
|
5113
5244
|
);
|
|
@@ -5132,9 +5263,9 @@ var EnableUnfilteredModal = (props) => {
|
|
|
5132
5263
|
}
|
|
5133
5264
|
};
|
|
5134
5265
|
const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
|
|
5135
|
-
return /* @__PURE__ */
|
|
5266
|
+
return /* @__PURE__ */ React80.createElement(AdminDialog, { ...dialogProps });
|
|
5136
5267
|
};
|
|
5137
|
-
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */
|
|
5268
|
+
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React80.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React80.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React80.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React80.createElement(Divider3, null), /* @__PURE__ */ React80.createElement(DialogContent, null, /* @__PURE__ */ React80.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React80.createElement(React80.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React80.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React80.createElement(DialogActions, null, /* @__PURE__ */ React80.createElement(Button4, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __31("Cancel", "elementor")), /* @__PURE__ */ React80.createElement(
|
|
5138
5269
|
Button4,
|
|
5139
5270
|
{
|
|
5140
5271
|
size: "medium",
|
|
@@ -5143,7 +5274,7 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
5143
5274
|
color: "primary",
|
|
5144
5275
|
disabled: isPending
|
|
5145
5276
|
},
|
|
5146
|
-
isPending ? /* @__PURE__ */
|
|
5277
|
+
isPending ? /* @__PURE__ */ React80.createElement(CircularProgress2, { size: 24 }) : __31("Enable", "elementor")
|
|
5147
5278
|
)));
|
|
5148
5279
|
|
|
5149
5280
|
// src/controls/svg-media-control.tsx
|
|
@@ -5208,19 +5339,19 @@ var SvgMediaControl = createControl(() => {
|
|
|
5208
5339
|
}
|
|
5209
5340
|
};
|
|
5210
5341
|
const infotipProps = {
|
|
5211
|
-
title:
|
|
5212
|
-
description: /* @__PURE__ */
|
|
5342
|
+
title: __32("Sorry, you can't upload that file yet.", "elementor"),
|
|
5343
|
+
description: /* @__PURE__ */ React81.createElement(React81.Fragment, null, __32("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React81.createElement("br", null), __32("file uploads.", "elementor")),
|
|
5213
5344
|
isEnabled: !isAdmin
|
|
5214
5345
|
};
|
|
5215
|
-
return /* @__PURE__ */
|
|
5346
|
+
return /* @__PURE__ */ React81.createElement(Stack13, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React81.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React81.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React81.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React81.createElement(
|
|
5216
5347
|
CardMedia2,
|
|
5217
5348
|
{
|
|
5218
5349
|
component: "img",
|
|
5219
5350
|
image: src,
|
|
5220
|
-
alt:
|
|
5351
|
+
alt: __32("Preview SVG", "elementor"),
|
|
5221
5352
|
sx: { maxHeight: "140px", width: "50px" }
|
|
5222
5353
|
}
|
|
5223
|
-
)), /* @__PURE__ */
|
|
5354
|
+
)), /* @__PURE__ */ React81.createElement(
|
|
5224
5355
|
CardOverlay2,
|
|
5225
5356
|
{
|
|
5226
5357
|
sx: {
|
|
@@ -5229,7 +5360,7 @@ var SvgMediaControl = createControl(() => {
|
|
|
5229
5360
|
}
|
|
5230
5361
|
}
|
|
5231
5362
|
},
|
|
5232
|
-
/* @__PURE__ */
|
|
5363
|
+
/* @__PURE__ */ React81.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React81.createElement(
|
|
5233
5364
|
Button5,
|
|
5234
5365
|
{
|
|
5235
5366
|
size: "tiny",
|
|
@@ -5238,30 +5369,30 @@ var SvgMediaControl = createControl(() => {
|
|
|
5238
5369
|
onClick: () => handleClick(MODE_BROWSE),
|
|
5239
5370
|
"aria-label": "Select SVG"
|
|
5240
5371
|
},
|
|
5241
|
-
|
|
5242
|
-
), /* @__PURE__ */
|
|
5372
|
+
__32("Select SVG", "elementor")
|
|
5373
|
+
), /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
|
|
5243
5374
|
Button5,
|
|
5244
5375
|
{
|
|
5245
5376
|
size: "tiny",
|
|
5246
5377
|
variant: "text",
|
|
5247
5378
|
color: "inherit",
|
|
5248
|
-
startIcon: /* @__PURE__ */
|
|
5379
|
+
startIcon: /* @__PURE__ */ React81.createElement(UploadIcon2, null),
|
|
5249
5380
|
disabled: !isAdmin,
|
|
5250
5381
|
onClick: () => isAdmin && handleClick(MODE_UPLOAD),
|
|
5251
5382
|
"aria-label": "Upload SVG"
|
|
5252
5383
|
},
|
|
5253
|
-
|
|
5384
|
+
__32("Upload", "elementor")
|
|
5254
5385
|
)))))
|
|
5255
5386
|
))));
|
|
5256
5387
|
});
|
|
5257
5388
|
|
|
5258
5389
|
// src/controls/video-media-control.tsx
|
|
5259
|
-
import * as
|
|
5390
|
+
import * as React82 from "react";
|
|
5260
5391
|
import { videoSrcPropTypeUtil } from "@elementor/editor-props";
|
|
5261
5392
|
import { UploadIcon as UploadIcon3 } from "@elementor/icons";
|
|
5262
5393
|
import { Button as Button6, Card as Card3, CardMedia as CardMedia3, CardOverlay as CardOverlay3, CircularProgress as CircularProgress4, Stack as Stack14 } from "@elementor/ui";
|
|
5263
5394
|
import { useWpMediaAttachment as useWpMediaAttachment3, useWpMediaFrame as useWpMediaFrame3 } from "@elementor/wp-media";
|
|
5264
|
-
import { __ as
|
|
5395
|
+
import { __ as __33 } from "@wordpress/i18n";
|
|
5265
5396
|
var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
|
|
5266
5397
|
var VideoMediaControl = createControl(() => {
|
|
5267
5398
|
const { value, setValue } = useBoundProp(videoSrcPropTypeUtil);
|
|
@@ -5282,7 +5413,7 @@ var VideoMediaControl = createControl(() => {
|
|
|
5282
5413
|
});
|
|
5283
5414
|
}
|
|
5284
5415
|
});
|
|
5285
|
-
return /* @__PURE__ */
|
|
5416
|
+
return /* @__PURE__ */ React82.createElement(ControlActions, null, /* @__PURE__ */ React82.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React82.createElement(
|
|
5286
5417
|
CardMedia3,
|
|
5287
5418
|
{
|
|
5288
5419
|
sx: {
|
|
@@ -5297,8 +5428,8 @@ var VideoMediaControl = createControl(() => {
|
|
|
5297
5428
|
alignItems: "center"
|
|
5298
5429
|
}
|
|
5299
5430
|
},
|
|
5300
|
-
/* @__PURE__ */
|
|
5301
|
-
), /* @__PURE__ */
|
|
5431
|
+
/* @__PURE__ */ React82.createElement(VideoPreview, { isFetching, videoUrl })
|
|
5432
|
+
), /* @__PURE__ */ React82.createElement(CardOverlay3, null, /* @__PURE__ */ React82.createElement(Stack14, { gap: 1 }, /* @__PURE__ */ React82.createElement(
|
|
5302
5433
|
Button6,
|
|
5303
5434
|
{
|
|
5304
5435
|
size: "tiny",
|
|
@@ -5306,25 +5437,25 @@ var VideoMediaControl = createControl(() => {
|
|
|
5306
5437
|
variant: "outlined",
|
|
5307
5438
|
onClick: () => open({ mode: "browse" })
|
|
5308
5439
|
},
|
|
5309
|
-
|
|
5310
|
-
), /* @__PURE__ */
|
|
5440
|
+
__33("Select video", "elementor")
|
|
5441
|
+
), /* @__PURE__ */ React82.createElement(
|
|
5311
5442
|
Button6,
|
|
5312
5443
|
{
|
|
5313
5444
|
size: "tiny",
|
|
5314
5445
|
variant: "text",
|
|
5315
5446
|
color: "inherit",
|
|
5316
|
-
startIcon: /* @__PURE__ */
|
|
5447
|
+
startIcon: /* @__PURE__ */ React82.createElement(UploadIcon3, null),
|
|
5317
5448
|
onClick: () => open({ mode: "upload" })
|
|
5318
5449
|
},
|
|
5319
|
-
|
|
5450
|
+
__33("Upload", "elementor")
|
|
5320
5451
|
)))));
|
|
5321
5452
|
});
|
|
5322
5453
|
var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
5323
5454
|
if (isFetching) {
|
|
5324
|
-
return /* @__PURE__ */
|
|
5455
|
+
return /* @__PURE__ */ React82.createElement(CircularProgress4, null);
|
|
5325
5456
|
}
|
|
5326
5457
|
if (videoUrl) {
|
|
5327
|
-
return /* @__PURE__ */
|
|
5458
|
+
return /* @__PURE__ */ React82.createElement(
|
|
5328
5459
|
"video",
|
|
5329
5460
|
{
|
|
5330
5461
|
src: videoUrl,
|
|
@@ -5339,40 +5470,40 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
|
5339
5470
|
}
|
|
5340
5471
|
);
|
|
5341
5472
|
}
|
|
5342
|
-
return /* @__PURE__ */
|
|
5473
|
+
return /* @__PURE__ */ React82.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
|
|
5343
5474
|
};
|
|
5344
5475
|
|
|
5345
5476
|
// src/controls/background-control/background-control.tsx
|
|
5346
|
-
import * as
|
|
5477
|
+
import * as React89 from "react";
|
|
5347
5478
|
import { backgroundPropTypeUtil } from "@elementor/editor-props";
|
|
5348
|
-
import { Grid as
|
|
5349
|
-
import { __ as
|
|
5479
|
+
import { Grid as Grid18 } from "@elementor/ui";
|
|
5480
|
+
import { __ as __39 } from "@wordpress/i18n";
|
|
5350
5481
|
|
|
5351
5482
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
5352
|
-
import * as
|
|
5483
|
+
import * as React88 from "react";
|
|
5353
5484
|
import {
|
|
5354
5485
|
backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
|
|
5355
5486
|
backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
|
|
5356
5487
|
backgroundOverlayPropTypeUtil,
|
|
5357
5488
|
colorPropTypeUtil as colorPropTypeUtil3
|
|
5358
5489
|
} from "@elementor/editor-props";
|
|
5359
|
-
import { Box as
|
|
5490
|
+
import { Box as Box15, CardMedia as CardMedia4, styled as styled10, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
|
|
5360
5491
|
import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
|
|
5361
|
-
import { __ as
|
|
5492
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
5362
5493
|
|
|
5363
5494
|
// src/env.ts
|
|
5364
5495
|
import { parseEnv } from "@elementor/env";
|
|
5365
5496
|
var { env } = parseEnv("@elementor/editor-controls");
|
|
5366
5497
|
|
|
5367
5498
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
5368
|
-
import * as
|
|
5499
|
+
import * as React83 from "react";
|
|
5369
5500
|
import {
|
|
5370
5501
|
backgroundGradientOverlayPropTypeUtil,
|
|
5371
5502
|
colorPropTypeUtil as colorPropTypeUtil2,
|
|
5372
5503
|
colorStopPropTypeUtil,
|
|
5373
5504
|
gradientColorStopPropTypeUtil,
|
|
5374
5505
|
numberPropTypeUtil as numberPropTypeUtil5,
|
|
5375
|
-
stringPropTypeUtil as
|
|
5506
|
+
stringPropTypeUtil as stringPropTypeUtil15
|
|
5376
5507
|
} from "@elementor/editor-props";
|
|
5377
5508
|
import { UnstableGradientBox } from "@elementor/ui";
|
|
5378
5509
|
var BackgroundGradientColorControl = createControl(() => {
|
|
@@ -5380,13 +5511,13 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
5380
5511
|
const handleChange = (newValue) => {
|
|
5381
5512
|
const transformedValue = createTransformableValue(newValue);
|
|
5382
5513
|
if (transformedValue.positions) {
|
|
5383
|
-
transformedValue.positions =
|
|
5514
|
+
transformedValue.positions = stringPropTypeUtil15.create(newValue.positions.join(" "));
|
|
5384
5515
|
}
|
|
5385
5516
|
setValue(transformedValue);
|
|
5386
5517
|
};
|
|
5387
5518
|
const createTransformableValue = (newValue) => ({
|
|
5388
5519
|
...newValue,
|
|
5389
|
-
type:
|
|
5520
|
+
type: stringPropTypeUtil15.create(newValue.type),
|
|
5390
5521
|
angle: numberPropTypeUtil5.create(newValue.angle),
|
|
5391
5522
|
stops: gradientColorStopPropTypeUtil.create(
|
|
5392
5523
|
newValue.stops.map(
|
|
@@ -5412,7 +5543,7 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
5412
5543
|
positions: positions?.value.split(" ")
|
|
5413
5544
|
};
|
|
5414
5545
|
};
|
|
5415
|
-
return /* @__PURE__ */
|
|
5546
|
+
return /* @__PURE__ */ React83.createElement(
|
|
5416
5547
|
UnstableGradientBox,
|
|
5417
5548
|
{
|
|
5418
5549
|
sx: { width: "auto", padding: 1.5 },
|
|
@@ -5422,7 +5553,7 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
5422
5553
|
);
|
|
5423
5554
|
});
|
|
5424
5555
|
var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
|
|
5425
|
-
type:
|
|
5556
|
+
type: stringPropTypeUtil15.create("linear"),
|
|
5426
5557
|
angle: numberPropTypeUtil5.create(180),
|
|
5427
5558
|
stops: gradientColorStopPropTypeUtil.create([
|
|
5428
5559
|
colorStopPropTypeUtil.create({
|
|
@@ -5437,53 +5568,53 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
|
|
|
5437
5568
|
});
|
|
5438
5569
|
|
|
5439
5570
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
5440
|
-
import * as
|
|
5571
|
+
import * as React84 from "react";
|
|
5441
5572
|
import { PinIcon, PinnedOffIcon } from "@elementor/icons";
|
|
5442
|
-
import { Grid as
|
|
5443
|
-
import { __ as
|
|
5573
|
+
import { Grid as Grid14 } from "@elementor/ui";
|
|
5574
|
+
import { __ as __34 } from "@wordpress/i18n";
|
|
5444
5575
|
var attachmentControlOptions = [
|
|
5445
5576
|
{
|
|
5446
5577
|
value: "fixed",
|
|
5447
|
-
label:
|
|
5448
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5578
|
+
label: __34("Fixed", "elementor"),
|
|
5579
|
+
renderContent: ({ size }) => /* @__PURE__ */ React84.createElement(PinIcon, { fontSize: size }),
|
|
5449
5580
|
showTooltip: true
|
|
5450
5581
|
},
|
|
5451
5582
|
{
|
|
5452
5583
|
value: "scroll",
|
|
5453
|
-
label:
|
|
5454
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5584
|
+
label: __34("Scroll", "elementor"),
|
|
5585
|
+
renderContent: ({ size }) => /* @__PURE__ */ React84.createElement(PinnedOffIcon, { fontSize: size }),
|
|
5455
5586
|
showTooltip: true
|
|
5456
5587
|
}
|
|
5457
5588
|
];
|
|
5458
5589
|
var BackgroundImageOverlayAttachment = () => {
|
|
5459
|
-
return /* @__PURE__ */
|
|
5590
|
+
return /* @__PURE__ */ React84.createElement(PopoverGridContainer, null, /* @__PURE__ */ React84.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React84.createElement(ControlFormLabel, null, __34("Attachment", "elementor"))), /* @__PURE__ */ React84.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React84.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
5460
5591
|
};
|
|
5461
5592
|
|
|
5462
5593
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
5463
|
-
import * as
|
|
5464
|
-
import { useRef as
|
|
5465
|
-
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as
|
|
5594
|
+
import * as React85 from "react";
|
|
5595
|
+
import { useRef as useRef15 } from "react";
|
|
5596
|
+
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
|
|
5466
5597
|
import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
|
|
5467
5598
|
import { LetterXIcon, LetterYIcon } from "@elementor/icons";
|
|
5468
|
-
import { Grid as
|
|
5469
|
-
import { __ as
|
|
5599
|
+
import { Grid as Grid15, Select as Select4 } from "@elementor/ui";
|
|
5600
|
+
import { __ as __35 } from "@wordpress/i18n";
|
|
5470
5601
|
var backgroundPositionOptions = [
|
|
5471
|
-
{ label:
|
|
5472
|
-
{ label:
|
|
5473
|
-
{ label:
|
|
5474
|
-
{ label:
|
|
5475
|
-
{ label:
|
|
5476
|
-
{ label:
|
|
5477
|
-
{ label:
|
|
5478
|
-
{ label:
|
|
5479
|
-
{ label:
|
|
5480
|
-
{ label:
|
|
5602
|
+
{ label: __35("Center center", "elementor"), value: "center center" },
|
|
5603
|
+
{ label: __35("Center left", "elementor"), value: "center left" },
|
|
5604
|
+
{ label: __35("Center right", "elementor"), value: "center right" },
|
|
5605
|
+
{ label: __35("Top center", "elementor"), value: "top center" },
|
|
5606
|
+
{ label: __35("Top left", "elementor"), value: "top left" },
|
|
5607
|
+
{ label: __35("Top right", "elementor"), value: "top right" },
|
|
5608
|
+
{ label: __35("Bottom center", "elementor"), value: "bottom center" },
|
|
5609
|
+
{ label: __35("Bottom left", "elementor"), value: "bottom left" },
|
|
5610
|
+
{ label: __35("Bottom right", "elementor"), value: "bottom right" },
|
|
5611
|
+
{ label: __35("Custom", "elementor"), value: "custom" }
|
|
5481
5612
|
];
|
|
5482
5613
|
var BackgroundImageOverlayPosition = () => {
|
|
5483
5614
|
const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
|
|
5484
|
-
const stringPropContext = useBoundProp(
|
|
5615
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil16);
|
|
5485
5616
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
5486
|
-
const rowRef =
|
|
5617
|
+
const rowRef = useRef15(null);
|
|
5487
5618
|
const handlePositionChange = (event) => {
|
|
5488
5619
|
const value = event.target.value || null;
|
|
5489
5620
|
if (value === "custom") {
|
|
@@ -5492,7 +5623,7 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
5492
5623
|
stringPropContext.setValue(value);
|
|
5493
5624
|
}
|
|
5494
5625
|
};
|
|
5495
|
-
return /* @__PURE__ */
|
|
5626
|
+
return /* @__PURE__ */ React85.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React85.createElement(PopoverGridContainer, null, /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(ControlFormLabel, null, __35("Position", "elementor"))), /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React85.createElement(ControlActions, null, /* @__PURE__ */ React85.createElement(
|
|
5496
5627
|
Select4,
|
|
5497
5628
|
{
|
|
5498
5629
|
fullWidth: true,
|
|
@@ -5501,18 +5632,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
5501
5632
|
disabled: stringPropContext.disabled,
|
|
5502
5633
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
5503
5634
|
},
|
|
5504
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
5505
|
-
))))), isCustom ? /* @__PURE__ */
|
|
5635
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React85.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
|
|
5636
|
+
))))), isCustom ? /* @__PURE__ */ React85.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React85.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React85.createElement(
|
|
5506
5637
|
SizeControl,
|
|
5507
5638
|
{
|
|
5508
|
-
startIcon: /* @__PURE__ */
|
|
5639
|
+
startIcon: /* @__PURE__ */ React85.createElement(LetterXIcon, { fontSize: "tiny" }),
|
|
5509
5640
|
anchorRef: rowRef,
|
|
5510
5641
|
min: -Number.MAX_SAFE_INTEGER
|
|
5511
5642
|
}
|
|
5512
|
-
))), /* @__PURE__ */
|
|
5643
|
+
))), /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React85.createElement(
|
|
5513
5644
|
SizeControl,
|
|
5514
5645
|
{
|
|
5515
|
-
startIcon: /* @__PURE__ */
|
|
5646
|
+
startIcon: /* @__PURE__ */ React85.createElement(LetterYIcon, { fontSize: "tiny" }),
|
|
5516
5647
|
anchorRef: rowRef,
|
|
5517
5648
|
min: -Number.MAX_SAFE_INTEGER
|
|
5518
5649
|
}
|
|
@@ -5520,44 +5651,44 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
5520
5651
|
};
|
|
5521
5652
|
|
|
5522
5653
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
5523
|
-
import * as
|
|
5654
|
+
import * as React86 from "react";
|
|
5524
5655
|
import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
|
|
5525
|
-
import { Grid as
|
|
5526
|
-
import { __ as
|
|
5656
|
+
import { Grid as Grid16 } from "@elementor/ui";
|
|
5657
|
+
import { __ as __36 } from "@wordpress/i18n";
|
|
5527
5658
|
var repeatControlOptions = [
|
|
5528
5659
|
{
|
|
5529
5660
|
value: "repeat",
|
|
5530
|
-
label:
|
|
5531
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5661
|
+
label: __36("Repeat", "elementor"),
|
|
5662
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(GridDotsIcon, { fontSize: size }),
|
|
5532
5663
|
showTooltip: true
|
|
5533
5664
|
},
|
|
5534
5665
|
{
|
|
5535
5666
|
value: "repeat-x",
|
|
5536
|
-
label:
|
|
5537
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5667
|
+
label: __36("Repeat-x", "elementor"),
|
|
5668
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(DotsHorizontalIcon, { fontSize: size }),
|
|
5538
5669
|
showTooltip: true
|
|
5539
5670
|
},
|
|
5540
5671
|
{
|
|
5541
5672
|
value: "repeat-y",
|
|
5542
|
-
label:
|
|
5543
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5673
|
+
label: __36("Repeat-y", "elementor"),
|
|
5674
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(DotsVerticalIcon, { fontSize: size }),
|
|
5544
5675
|
showTooltip: true
|
|
5545
5676
|
},
|
|
5546
5677
|
{
|
|
5547
5678
|
value: "no-repeat",
|
|
5548
|
-
label:
|
|
5549
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5679
|
+
label: __36("No-repeat", "elementor"),
|
|
5680
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(XIcon3, { fontSize: size }),
|
|
5550
5681
|
showTooltip: true
|
|
5551
5682
|
}
|
|
5552
5683
|
];
|
|
5553
5684
|
var BackgroundImageOverlayRepeat = () => {
|
|
5554
|
-
return /* @__PURE__ */
|
|
5685
|
+
return /* @__PURE__ */ React86.createElement(PopoverGridContainer, null, /* @__PURE__ */ React86.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React86.createElement(ControlFormLabel, null, __36("Repeat", "elementor"))), /* @__PURE__ */ React86.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React86.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
5555
5686
|
};
|
|
5556
5687
|
|
|
5557
5688
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
5558
|
-
import * as
|
|
5559
|
-
import { useRef as
|
|
5560
|
-
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as
|
|
5689
|
+
import * as React87 from "react";
|
|
5690
|
+
import { useRef as useRef16 } from "react";
|
|
5691
|
+
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
|
|
5561
5692
|
import {
|
|
5562
5693
|
ArrowBarBothIcon,
|
|
5563
5694
|
ArrowsMaximizeIcon,
|
|
@@ -5566,39 +5697,39 @@ import {
|
|
|
5566
5697
|
LetterAIcon,
|
|
5567
5698
|
PencilIcon
|
|
5568
5699
|
} from "@elementor/icons";
|
|
5569
|
-
import { Grid as
|
|
5570
|
-
import { __ as
|
|
5700
|
+
import { Grid as Grid17 } from "@elementor/ui";
|
|
5701
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
5571
5702
|
var sizeControlOptions = [
|
|
5572
5703
|
{
|
|
5573
5704
|
value: "auto",
|
|
5574
|
-
label:
|
|
5575
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5705
|
+
label: __37("Auto", "elementor"),
|
|
5706
|
+
renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(LetterAIcon, { fontSize: size }),
|
|
5576
5707
|
showTooltip: true
|
|
5577
5708
|
},
|
|
5578
5709
|
{
|
|
5579
5710
|
value: "cover",
|
|
5580
|
-
label:
|
|
5581
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5711
|
+
label: __37("Cover", "elementor"),
|
|
5712
|
+
renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(ArrowsMaximizeIcon, { fontSize: size }),
|
|
5582
5713
|
showTooltip: true
|
|
5583
5714
|
},
|
|
5584
5715
|
{
|
|
5585
5716
|
value: "contain",
|
|
5586
|
-
label:
|
|
5587
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5717
|
+
label: __37("Contain", "elementor"),
|
|
5718
|
+
renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(ArrowBarBothIcon, { fontSize: size }),
|
|
5588
5719
|
showTooltip: true
|
|
5589
5720
|
},
|
|
5590
5721
|
{
|
|
5591
5722
|
value: "custom",
|
|
5592
|
-
label:
|
|
5593
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5723
|
+
label: __37("Custom", "elementor"),
|
|
5724
|
+
renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(PencilIcon, { fontSize: size }),
|
|
5594
5725
|
showTooltip: true
|
|
5595
5726
|
}
|
|
5596
5727
|
];
|
|
5597
5728
|
var BackgroundImageOverlaySize = () => {
|
|
5598
5729
|
const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
|
|
5599
|
-
const stringPropContext = useBoundProp(
|
|
5730
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil17);
|
|
5600
5731
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
5601
|
-
const rowRef =
|
|
5732
|
+
const rowRef = useRef16(null);
|
|
5602
5733
|
const handleSizeChange = (size) => {
|
|
5603
5734
|
if (size === "custom") {
|
|
5604
5735
|
backgroundImageScaleContext.setValue({ width: null, height: null });
|
|
@@ -5606,7 +5737,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
5606
5737
|
stringPropContext.setValue(size);
|
|
5607
5738
|
}
|
|
5608
5739
|
};
|
|
5609
|
-
return /* @__PURE__ */
|
|
5740
|
+
return /* @__PURE__ */ React87.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React87.createElement(PopoverGridContainer, null, /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(ControlFormLabel, null, __37("Size", "elementor"))), /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React87.createElement(
|
|
5610
5741
|
ControlToggleButtonGroup,
|
|
5611
5742
|
{
|
|
5612
5743
|
exclusive: true,
|
|
@@ -5615,17 +5746,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
5615
5746
|
disabled: stringPropContext.disabled,
|
|
5616
5747
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
5617
5748
|
}
|
|
5618
|
-
)))), isCustom ? /* @__PURE__ */
|
|
5749
|
+
)))), isCustom ? /* @__PURE__ */ React87.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React87.createElement(PopoverGridContainer, null, /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React87.createElement(
|
|
5619
5750
|
SizeControl,
|
|
5620
5751
|
{
|
|
5621
|
-
startIcon: /* @__PURE__ */
|
|
5752
|
+
startIcon: /* @__PURE__ */ React87.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
|
|
5622
5753
|
extendedOptions: ["auto"],
|
|
5623
5754
|
anchorRef: rowRef
|
|
5624
5755
|
}
|
|
5625
|
-
))), /* @__PURE__ */
|
|
5756
|
+
))), /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React87.createElement(
|
|
5626
5757
|
SizeControl,
|
|
5627
5758
|
{
|
|
5628
|
-
startIcon: /* @__PURE__ */
|
|
5759
|
+
startIcon: /* @__PURE__ */ React87.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
|
|
5629
5760
|
extendedOptions: ["auto"],
|
|
5630
5761
|
anchorRef: rowRef
|
|
5631
5762
|
}
|
|
@@ -5633,7 +5764,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
5633
5764
|
};
|
|
5634
5765
|
|
|
5635
5766
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
5636
|
-
import { useRef as
|
|
5767
|
+
import { useRef as useRef17 } from "react";
|
|
5637
5768
|
import {
|
|
5638
5769
|
backgroundColorOverlayPropTypeUtil,
|
|
5639
5770
|
backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
|
|
@@ -5658,7 +5789,7 @@ var useBackgroundTabsHistory = ({
|
|
|
5658
5789
|
return "image";
|
|
5659
5790
|
};
|
|
5660
5791
|
const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
|
|
5661
|
-
const valuesHistory =
|
|
5792
|
+
const valuesHistory = useRef17({
|
|
5662
5793
|
image: initialBackgroundImageOverlay,
|
|
5663
5794
|
color: initialBackgroundColorOverlay2,
|
|
5664
5795
|
gradient: initialBackgroundGradientOverlay2
|
|
@@ -5726,59 +5857,59 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
5726
5857
|
}
|
|
5727
5858
|
});
|
|
5728
5859
|
var backgroundResolutionOptions = [
|
|
5729
|
-
{ label:
|
|
5730
|
-
{ label:
|
|
5731
|
-
{ label:
|
|
5732
|
-
{ label:
|
|
5860
|
+
{ label: __38("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
5861
|
+
{ label: __38("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
5862
|
+
{ label: __38("Large 1024 x 1024", "elementor"), value: "large" },
|
|
5863
|
+
{ label: __38("Full", "elementor"), value: "full" }
|
|
5733
5864
|
];
|
|
5734
5865
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
5735
5866
|
const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
|
|
5736
|
-
return /* @__PURE__ */
|
|
5867
|
+
return /* @__PURE__ */ React88.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React88.createElement(
|
|
5737
5868
|
ControlRepeater,
|
|
5738
5869
|
{
|
|
5739
5870
|
initial: getInitialBackgroundOverlay(),
|
|
5740
5871
|
propTypeUtil: backgroundOverlayPropTypeUtil
|
|
5741
5872
|
},
|
|
5742
|
-
/* @__PURE__ */
|
|
5743
|
-
/* @__PURE__ */
|
|
5873
|
+
/* @__PURE__ */ React88.createElement(RepeaterHeader, { label: __38("Overlay", "elementor") }, /* @__PURE__ */ React88.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
5874
|
+
/* @__PURE__ */ React88.createElement(ItemsContainer, null, /* @__PURE__ */ React88.createElement(
|
|
5744
5875
|
Item,
|
|
5745
5876
|
{
|
|
5746
5877
|
Icon: ItemIcon2,
|
|
5747
|
-
Label:
|
|
5748
|
-
actions: /* @__PURE__ */
|
|
5878
|
+
Label: ItemLabel3,
|
|
5879
|
+
actions: /* @__PURE__ */ React88.createElement(React88.Fragment, null, /* @__PURE__ */ React88.createElement(DuplicateItemAction, null), /* @__PURE__ */ React88.createElement(DisableItemAction, null), /* @__PURE__ */ React88.createElement(RemoveItemAction, null))
|
|
5749
5880
|
}
|
|
5750
5881
|
)),
|
|
5751
|
-
/* @__PURE__ */
|
|
5882
|
+
/* @__PURE__ */ React88.createElement(EditItemPopover, null, /* @__PURE__ */ React88.createElement(ItemContent2, null))
|
|
5752
5883
|
));
|
|
5753
5884
|
});
|
|
5754
|
-
var
|
|
5885
|
+
var ItemContent2 = () => {
|
|
5755
5886
|
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
5756
5887
|
image: getInitialBackgroundOverlay().value,
|
|
5757
5888
|
color: initialBackgroundColorOverlay.value,
|
|
5758
5889
|
gradient: initialBackgroundGradientOverlay.value
|
|
5759
5890
|
});
|
|
5760
5891
|
const { rowRef } = useRepeaterContext();
|
|
5761
|
-
return /* @__PURE__ */
|
|
5892
|
+
return /* @__PURE__ */ React88.createElement(Box15, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box15, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
|
|
5762
5893
|
Tabs,
|
|
5763
5894
|
{
|
|
5764
5895
|
size: "small",
|
|
5765
5896
|
variant: "fullWidth",
|
|
5766
5897
|
...getTabsProps(),
|
|
5767
|
-
"aria-label":
|
|
5898
|
+
"aria-label": __38("Background Overlay", "elementor")
|
|
5768
5899
|
},
|
|
5769
|
-
/* @__PURE__ */
|
|
5770
|
-
/* @__PURE__ */
|
|
5771
|
-
/* @__PURE__ */
|
|
5772
|
-
)), /* @__PURE__ */
|
|
5900
|
+
/* @__PURE__ */ React88.createElement(Tab, { label: __38("Image", "elementor"), ...getTabProps("image") }),
|
|
5901
|
+
/* @__PURE__ */ React88.createElement(Tab, { label: __38("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
5902
|
+
/* @__PURE__ */ React88.createElement(Tab, { label: __38("Color", "elementor"), ...getTabProps("color") })
|
|
5903
|
+
)), /* @__PURE__ */ React88.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React88.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React88.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React88.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
5773
5904
|
};
|
|
5774
5905
|
var ItemIcon2 = ({ value }) => {
|
|
5775
5906
|
switch (value.$$type) {
|
|
5776
5907
|
case "background-image-overlay":
|
|
5777
|
-
return /* @__PURE__ */
|
|
5908
|
+
return /* @__PURE__ */ React88.createElement(ItemIconImage, { value });
|
|
5778
5909
|
case "background-color-overlay":
|
|
5779
|
-
return /* @__PURE__ */
|
|
5910
|
+
return /* @__PURE__ */ React88.createElement(ItemIconColor, { value });
|
|
5780
5911
|
case "background-gradient-overlay":
|
|
5781
|
-
return /* @__PURE__ */
|
|
5912
|
+
return /* @__PURE__ */ React88.createElement(ItemIconGradient, { value });
|
|
5782
5913
|
default:
|
|
5783
5914
|
return null;
|
|
5784
5915
|
}
|
|
@@ -5791,11 +5922,11 @@ var extractColorFrom = (prop) => {
|
|
|
5791
5922
|
};
|
|
5792
5923
|
var ItemIconColor = ({ value: prop }) => {
|
|
5793
5924
|
const color = extractColorFrom(prop);
|
|
5794
|
-
return /* @__PURE__ */
|
|
5925
|
+
return /* @__PURE__ */ React88.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
5795
5926
|
};
|
|
5796
5927
|
var ItemIconImage = ({ value }) => {
|
|
5797
5928
|
const { imageUrl } = useImage(value);
|
|
5798
|
-
return /* @__PURE__ */
|
|
5929
|
+
return /* @__PURE__ */ React88.createElement(
|
|
5799
5930
|
CardMedia4,
|
|
5800
5931
|
{
|
|
5801
5932
|
image: imageUrl,
|
|
@@ -5810,41 +5941,41 @@ var ItemIconImage = ({ value }) => {
|
|
|
5810
5941
|
};
|
|
5811
5942
|
var ItemIconGradient = ({ value }) => {
|
|
5812
5943
|
const gradient = getGradientValue(value);
|
|
5813
|
-
return /* @__PURE__ */
|
|
5944
|
+
return /* @__PURE__ */ React88.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
5814
5945
|
};
|
|
5815
|
-
var
|
|
5946
|
+
var ItemLabel3 = ({ value }) => {
|
|
5816
5947
|
switch (value.$$type) {
|
|
5817
5948
|
case "background-image-overlay":
|
|
5818
|
-
return /* @__PURE__ */
|
|
5949
|
+
return /* @__PURE__ */ React88.createElement(ItemLabelImage, { value });
|
|
5819
5950
|
case "background-color-overlay":
|
|
5820
|
-
return /* @__PURE__ */
|
|
5951
|
+
return /* @__PURE__ */ React88.createElement(ItemLabelColor, { value });
|
|
5821
5952
|
case "background-gradient-overlay":
|
|
5822
|
-
return /* @__PURE__ */
|
|
5953
|
+
return /* @__PURE__ */ React88.createElement(ItemLabelGradient, { value });
|
|
5823
5954
|
default:
|
|
5824
5955
|
return null;
|
|
5825
5956
|
}
|
|
5826
5957
|
};
|
|
5827
5958
|
var ItemLabelColor = ({ value: prop }) => {
|
|
5828
5959
|
const color = extractColorFrom(prop);
|
|
5829
|
-
return /* @__PURE__ */
|
|
5960
|
+
return /* @__PURE__ */ React88.createElement("span", null, color);
|
|
5830
5961
|
};
|
|
5831
5962
|
var ItemLabelImage = ({ value }) => {
|
|
5832
5963
|
const { imageTitle } = useImage(value);
|
|
5833
|
-
return /* @__PURE__ */
|
|
5964
|
+
return /* @__PURE__ */ React88.createElement("span", null, imageTitle);
|
|
5834
5965
|
};
|
|
5835
5966
|
var ItemLabelGradient = ({ value }) => {
|
|
5836
5967
|
if (value.value.type.value === "linear") {
|
|
5837
|
-
return /* @__PURE__ */
|
|
5968
|
+
return /* @__PURE__ */ React88.createElement("span", null, __38("Linear Gradient", "elementor"));
|
|
5838
5969
|
}
|
|
5839
|
-
return /* @__PURE__ */
|
|
5970
|
+
return /* @__PURE__ */ React88.createElement("span", null, __38("Radial Gradient", "elementor"));
|
|
5840
5971
|
};
|
|
5841
5972
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
5842
5973
|
const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
|
|
5843
|
-
return /* @__PURE__ */
|
|
5974
|
+
return /* @__PURE__ */ React88.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React88.createElement(ColorControl, { anchorEl })));
|
|
5844
5975
|
};
|
|
5845
5976
|
var ImageOverlayContent = () => {
|
|
5846
5977
|
const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
|
|
5847
|
-
return /* @__PURE__ */
|
|
5978
|
+
return /* @__PURE__ */ React88.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React88.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayAttachment, null)));
|
|
5848
5979
|
};
|
|
5849
5980
|
var StyledUnstableColorIndicator3 = styled10(UnstableColorIndicator3)(({ theme }) => ({
|
|
5850
5981
|
height: "1rem",
|
|
@@ -5883,29 +6014,29 @@ var getGradientValue = (value) => {
|
|
|
5883
6014
|
|
|
5884
6015
|
// src/controls/background-control/background-control.tsx
|
|
5885
6016
|
var clipOptions = [
|
|
5886
|
-
{ label:
|
|
5887
|
-
{ label:
|
|
5888
|
-
{ label:
|
|
5889
|
-
{ label:
|
|
6017
|
+
{ label: __39("Full element", "elementor"), value: "border-box" },
|
|
6018
|
+
{ label: __39("Padding edges", "elementor"), value: "padding-box" },
|
|
6019
|
+
{ label: __39("Content edges", "elementor"), value: "content-box" },
|
|
6020
|
+
{ label: __39("Text", "elementor"), value: "text" }
|
|
5890
6021
|
];
|
|
5891
|
-
var colorLabel =
|
|
5892
|
-
var clipLabel =
|
|
6022
|
+
var colorLabel = __39("Color", "elementor");
|
|
6023
|
+
var clipLabel = __39("Clipping", "elementor");
|
|
5893
6024
|
var BackgroundControl = createControl(() => {
|
|
5894
6025
|
const propContext = useBoundProp(backgroundPropTypeUtil);
|
|
5895
|
-
return /* @__PURE__ */
|
|
6026
|
+
return /* @__PURE__ */ React89.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React89.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React89.createElement(BackgroundColorField, null), /* @__PURE__ */ React89.createElement(BackgroundClipField, null));
|
|
5896
6027
|
});
|
|
5897
6028
|
var BackgroundColorField = () => {
|
|
5898
|
-
return /* @__PURE__ */
|
|
6029
|
+
return /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React89.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React89.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React89.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ColorControl, null))));
|
|
5899
6030
|
};
|
|
5900
6031
|
var BackgroundClipField = () => {
|
|
5901
|
-
return /* @__PURE__ */
|
|
6032
|
+
return /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React89.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React89.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React89.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(SelectControl, { options: clipOptions }))));
|
|
5902
6033
|
};
|
|
5903
6034
|
|
|
5904
6035
|
// src/controls/repeatable-control.tsx
|
|
5905
|
-
import * as
|
|
5906
|
-
import { useMemo as
|
|
6036
|
+
import * as React90 from "react";
|
|
6037
|
+
import { useMemo as useMemo13 } from "react";
|
|
5907
6038
|
import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
|
|
5908
|
-
import { Box as
|
|
6039
|
+
import { Box as Box16 } from "@elementor/ui";
|
|
5909
6040
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
5910
6041
|
var RepeatableControl = createControl(
|
|
5911
6042
|
({
|
|
@@ -5924,11 +6055,11 @@ var RepeatableControl = createControl(
|
|
|
5924
6055
|
if (!childPropTypeUtil) {
|
|
5925
6056
|
return null;
|
|
5926
6057
|
}
|
|
5927
|
-
const childArrayPropTypeUtil2 =
|
|
6058
|
+
const childArrayPropTypeUtil2 = useMemo13(
|
|
5928
6059
|
() => createArrayPropUtils2(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
5929
6060
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
5930
6061
|
);
|
|
5931
|
-
const contextValue =
|
|
6062
|
+
const contextValue = useMemo13(
|
|
5932
6063
|
() => ({
|
|
5933
6064
|
...childControlConfig,
|
|
5934
6065
|
placeholder: placeholder || "",
|
|
@@ -5938,14 +6069,14 @@ var RepeatableControl = createControl(
|
|
|
5938
6069
|
);
|
|
5939
6070
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
|
|
5940
6071
|
const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
|
|
5941
|
-
return /* @__PURE__ */
|
|
6072
|
+
return /* @__PURE__ */ React90.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React90.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React90.createElement(
|
|
5942
6073
|
ControlRepeater,
|
|
5943
6074
|
{
|
|
5944
6075
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
5945
6076
|
propTypeUtil: childArrayPropTypeUtil2,
|
|
5946
6077
|
isItemDisabled: isItemDisabled2
|
|
5947
6078
|
},
|
|
5948
|
-
/* @__PURE__ */
|
|
6079
|
+
/* @__PURE__ */ React90.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React90.createElement(
|
|
5949
6080
|
TooltipAddItemAction,
|
|
5950
6081
|
{
|
|
5951
6082
|
...addItemTooltipProps,
|
|
@@ -5953,22 +6084,22 @@ var RepeatableControl = createControl(
|
|
|
5953
6084
|
ariaLabel: repeaterLabel
|
|
5954
6085
|
}
|
|
5955
6086
|
)),
|
|
5956
|
-
/* @__PURE__ */
|
|
6087
|
+
/* @__PURE__ */ React90.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React90.createElement(
|
|
5957
6088
|
Item,
|
|
5958
6089
|
{
|
|
5959
6090
|
Icon: ItemIcon3,
|
|
5960
|
-
Label:
|
|
5961
|
-
actions: /* @__PURE__ */
|
|
6091
|
+
Label: ItemLabel4,
|
|
6092
|
+
actions: /* @__PURE__ */ React90.createElement(React90.Fragment, null, showDuplicate && /* @__PURE__ */ React90.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React90.createElement(DisableItemAction, null), /* @__PURE__ */ React90.createElement(RemoveItemAction, null))
|
|
5962
6093
|
}
|
|
5963
6094
|
)),
|
|
5964
|
-
/* @__PURE__ */
|
|
6095
|
+
/* @__PURE__ */ React90.createElement(EditItemPopover, null, /* @__PURE__ */ React90.createElement(Content2, null))
|
|
5965
6096
|
)));
|
|
5966
6097
|
}
|
|
5967
6098
|
);
|
|
5968
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
6099
|
+
var ItemIcon3 = () => /* @__PURE__ */ React90.createElement(React90.Fragment, null);
|
|
5969
6100
|
var Content2 = () => {
|
|
5970
6101
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
5971
|
-
return /* @__PURE__ */
|
|
6102
|
+
return /* @__PURE__ */ React90.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React90.createElement(PopoverGridContainer, null, /* @__PURE__ */ React90.createElement(ChildControl, { ...props })));
|
|
5972
6103
|
};
|
|
5973
6104
|
var interpolate = (template, data) => {
|
|
5974
6105
|
if (!data) {
|
|
@@ -6045,13 +6176,13 @@ var getTextColor = (isReadOnly, showPlaceholder) => {
|
|
|
6045
6176
|
}
|
|
6046
6177
|
return showPlaceholder ? "text.tertiary" : "text.primary";
|
|
6047
6178
|
};
|
|
6048
|
-
var
|
|
6179
|
+
var ItemLabel4 = ({ value }) => {
|
|
6049
6180
|
const { placeholder, patternLabel, props: childProps } = useRepeatableControlContext();
|
|
6050
6181
|
const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
|
|
6051
6182
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
6052
6183
|
const isReadOnly = !!childProps?.readOnly;
|
|
6053
6184
|
const color = getTextColor(isReadOnly, showPlaceholder);
|
|
6054
|
-
return /* @__PURE__ */
|
|
6185
|
+
return /* @__PURE__ */ React90.createElement(Box16, { component: "span", color }, label);
|
|
6055
6186
|
};
|
|
6056
6187
|
var getAllProperties = (pattern) => {
|
|
6057
6188
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -6059,15 +6190,15 @@ var getAllProperties = (pattern) => {
|
|
|
6059
6190
|
};
|
|
6060
6191
|
|
|
6061
6192
|
// src/controls/key-value-control.tsx
|
|
6062
|
-
import * as
|
|
6063
|
-
import { useMemo as
|
|
6193
|
+
import * as React91 from "react";
|
|
6194
|
+
import { useMemo as useMemo14, useState as useState17 } from "react";
|
|
6064
6195
|
import {
|
|
6065
6196
|
isTransformable,
|
|
6066
6197
|
keyValuePropTypeUtil,
|
|
6067
|
-
stringPropTypeUtil as
|
|
6198
|
+
stringPropTypeUtil as stringPropTypeUtil18
|
|
6068
6199
|
} from "@elementor/editor-props";
|
|
6069
|
-
import { FormHelperText, FormLabel as FormLabel3, Grid as
|
|
6070
|
-
import { __ as
|
|
6200
|
+
import { FormHelperText, FormLabel as FormLabel3, Grid as Grid19 } from "@elementor/ui";
|
|
6201
|
+
import { __ as __40 } from "@wordpress/i18n";
|
|
6071
6202
|
|
|
6072
6203
|
// src/utils/escape-html-attr.ts
|
|
6073
6204
|
var escapeHtmlAttr = (value) => {
|
|
@@ -6097,17 +6228,17 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6097
6228
|
key: getInitialFieldValue(value?.key),
|
|
6098
6229
|
value: getInitialFieldValue(value?.value)
|
|
6099
6230
|
});
|
|
6100
|
-
const keyLabel = props.keyName ||
|
|
6101
|
-
const valueLabel = props.valueName ||
|
|
6231
|
+
const keyLabel = props.keyName || __40("Key", "elementor");
|
|
6232
|
+
const valueLabel = props.valueName || __40("Value", "elementor");
|
|
6102
6233
|
const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
|
|
6103
6234
|
keyHelper: void 0,
|
|
6104
6235
|
valueHelper: void 0
|
|
6105
6236
|
};
|
|
6106
|
-
const [keyRegex, valueRegex, errMsg] =
|
|
6237
|
+
const [keyRegex, valueRegex, errMsg] = useMemo14(
|
|
6107
6238
|
() => [
|
|
6108
6239
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
6109
6240
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
6110
|
-
props.validationErrorMessage ||
|
|
6241
|
+
props.validationErrorMessage || __40("Invalid Format", "elementor")
|
|
6111
6242
|
],
|
|
6112
6243
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
6113
6244
|
);
|
|
@@ -6136,7 +6267,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6136
6267
|
});
|
|
6137
6268
|
return;
|
|
6138
6269
|
}
|
|
6139
|
-
const extractedValue =
|
|
6270
|
+
const extractedValue = stringPropTypeUtil18.extract(newChangedValue);
|
|
6140
6271
|
setSessionState((prev) => ({
|
|
6141
6272
|
...prev,
|
|
6142
6273
|
[fieldType]: extractedValue
|
|
@@ -6156,14 +6287,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6156
6287
|
});
|
|
6157
6288
|
}
|
|
6158
6289
|
};
|
|
6159
|
-
return /* @__PURE__ */
|
|
6290
|
+
return /* @__PURE__ */ React91.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React91.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React91.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React91.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React91.createElement(
|
|
6160
6291
|
TextControl,
|
|
6161
6292
|
{
|
|
6162
6293
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
6163
6294
|
error: !!keyError,
|
|
6164
6295
|
helperText: keyHelper
|
|
6165
6296
|
}
|
|
6166
|
-
)), !!keyError && /* @__PURE__ */
|
|
6297
|
+
)), !!keyError && /* @__PURE__ */ React91.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React91.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React91.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React91.createElement(
|
|
6167
6298
|
TextControl,
|
|
6168
6299
|
{
|
|
6169
6300
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -6171,31 +6302,31 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6171
6302
|
inputDisabled: !!keyError,
|
|
6172
6303
|
helperText: valueHelper
|
|
6173
6304
|
}
|
|
6174
|
-
)), !!valueError && /* @__PURE__ */
|
|
6305
|
+
)), !!valueError && /* @__PURE__ */ React91.createElement(FormHelperText, { error: true }, valueError))));
|
|
6175
6306
|
});
|
|
6176
6307
|
|
|
6177
6308
|
// src/controls/position-control.tsx
|
|
6178
|
-
import * as
|
|
6179
|
-
import { positionPropTypeUtil, stringPropTypeUtil as
|
|
6309
|
+
import * as React92 from "react";
|
|
6310
|
+
import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil19 } from "@elementor/editor-props";
|
|
6180
6311
|
import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
|
|
6181
6312
|
import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
|
|
6182
|
-
import { Grid as
|
|
6183
|
-
import { __ as
|
|
6313
|
+
import { Grid as Grid20, Select as Select5 } from "@elementor/ui";
|
|
6314
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
6184
6315
|
var positionOptions = [
|
|
6185
|
-
{ label:
|
|
6186
|
-
{ label:
|
|
6187
|
-
{ label:
|
|
6188
|
-
{ label:
|
|
6189
|
-
{ label:
|
|
6190
|
-
{ label:
|
|
6191
|
-
{ label:
|
|
6192
|
-
{ label:
|
|
6193
|
-
{ label:
|
|
6194
|
-
{ label:
|
|
6316
|
+
{ label: __41("Center center", "elementor"), value: "center center" },
|
|
6317
|
+
{ label: __41("Center left", "elementor"), value: "center left" },
|
|
6318
|
+
{ label: __41("Center right", "elementor"), value: "center right" },
|
|
6319
|
+
{ label: __41("Top center", "elementor"), value: "top center" },
|
|
6320
|
+
{ label: __41("Top left", "elementor"), value: "top left" },
|
|
6321
|
+
{ label: __41("Top right", "elementor"), value: "top right" },
|
|
6322
|
+
{ label: __41("Bottom center", "elementor"), value: "bottom center" },
|
|
6323
|
+
{ label: __41("Bottom left", "elementor"), value: "bottom left" },
|
|
6324
|
+
{ label: __41("Bottom right", "elementor"), value: "bottom right" },
|
|
6325
|
+
{ label: __41("Custom", "elementor"), value: "custom" }
|
|
6195
6326
|
];
|
|
6196
6327
|
var PositionControl = () => {
|
|
6197
6328
|
const positionContext = useBoundProp(positionPropTypeUtil);
|
|
6198
|
-
const stringPropContext = useBoundProp(
|
|
6329
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil19);
|
|
6199
6330
|
const isCustom = !!positionContext.value;
|
|
6200
6331
|
const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
|
|
6201
6332
|
const handlePositionChange = (event) => {
|
|
@@ -6206,7 +6337,7 @@ var PositionControl = () => {
|
|
|
6206
6337
|
stringPropContext.setValue(value);
|
|
6207
6338
|
}
|
|
6208
6339
|
};
|
|
6209
|
-
return /* @__PURE__ */
|
|
6340
|
+
return /* @__PURE__ */ React92.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, __41("Object position", "elementor"))), /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(
|
|
6210
6341
|
Select5,
|
|
6211
6342
|
{
|
|
6212
6343
|
size: "tiny",
|
|
@@ -6217,29 +6348,29 @@ var PositionControl = () => {
|
|
|
6217
6348
|
renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
|
|
6218
6349
|
fullWidth: true
|
|
6219
6350
|
},
|
|
6220
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
6221
|
-
)))), isCustom && /* @__PURE__ */
|
|
6351
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React92.createElement(MenuListItem7, { key: value, value: value ?? "" }, label))
|
|
6352
|
+
)))), isCustom && /* @__PURE__ */ React92.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React92.createElement(
|
|
6222
6353
|
SizeControl,
|
|
6223
6354
|
{
|
|
6224
|
-
startIcon: /* @__PURE__ */
|
|
6355
|
+
startIcon: /* @__PURE__ */ React92.createElement(LetterXIcon2, { fontSize: "tiny" }),
|
|
6225
6356
|
min: -Number.MAX_SAFE_INTEGER
|
|
6226
6357
|
}
|
|
6227
|
-
))), /* @__PURE__ */
|
|
6358
|
+
))), /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React92.createElement(
|
|
6228
6359
|
SizeControl,
|
|
6229
6360
|
{
|
|
6230
|
-
startIcon: /* @__PURE__ */
|
|
6361
|
+
startIcon: /* @__PURE__ */ React92.createElement(LetterYIcon2, { fontSize: "tiny" }),
|
|
6231
6362
|
min: -Number.MAX_SAFE_INTEGER
|
|
6232
6363
|
}
|
|
6233
6364
|
)))))));
|
|
6234
6365
|
};
|
|
6235
6366
|
|
|
6236
6367
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
6237
|
-
import * as
|
|
6238
|
-
import { useRef as
|
|
6368
|
+
import * as React105 from "react";
|
|
6369
|
+
import { useRef as useRef25 } from "react";
|
|
6239
6370
|
import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
|
|
6240
6371
|
import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
|
|
6241
|
-
import { bindTrigger as bindTrigger5, Box as
|
|
6242
|
-
import { __ as
|
|
6372
|
+
import { bindTrigger as bindTrigger5, Box as Box20, IconButton as IconButton8, Tooltip as Tooltip8, Typography as Typography7, usePopupState as usePopupState8 } from "@elementor/ui";
|
|
6373
|
+
import { __ as __51 } from "@wordpress/i18n";
|
|
6243
6374
|
|
|
6244
6375
|
// src/controls/transform-control/initial-values.ts
|
|
6245
6376
|
import {
|
|
@@ -6293,24 +6424,24 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
|
|
|
6293
6424
|
});
|
|
6294
6425
|
|
|
6295
6426
|
// src/controls/transform-control/transform-content.tsx
|
|
6296
|
-
import * as
|
|
6297
|
-
import { Box as
|
|
6298
|
-
import { __ as
|
|
6427
|
+
import * as React99 from "react";
|
|
6428
|
+
import { Box as Box17, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
|
|
6429
|
+
import { __ as __46 } from "@wordpress/i18n";
|
|
6299
6430
|
|
|
6300
6431
|
// src/controls/transform-control/functions/move.tsx
|
|
6301
|
-
import * as
|
|
6302
|
-
import { useRef as
|
|
6432
|
+
import * as React94 from "react";
|
|
6433
|
+
import { useRef as useRef18 } from "react";
|
|
6303
6434
|
import { moveTransformPropTypeUtil } from "@elementor/editor-props";
|
|
6304
6435
|
import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
|
|
6305
|
-
import { Grid as
|
|
6306
|
-
import { __ as
|
|
6436
|
+
import { Grid as Grid22 } from "@elementor/ui";
|
|
6437
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
6307
6438
|
|
|
6308
6439
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
6309
|
-
import * as
|
|
6310
|
-
import { Grid as
|
|
6440
|
+
import * as React93 from "react";
|
|
6441
|
+
import { Grid as Grid21 } from "@elementor/ui";
|
|
6311
6442
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
6312
6443
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
6313
|
-
return /* @__PURE__ */
|
|
6444
|
+
return /* @__PURE__ */ React93.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React93.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React93.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React93.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React93.createElement(
|
|
6314
6445
|
SizeControl,
|
|
6315
6446
|
{
|
|
6316
6447
|
anchorRef,
|
|
@@ -6326,28 +6457,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
|
|
|
6326
6457
|
// src/controls/transform-control/functions/move.tsx
|
|
6327
6458
|
var moveAxisControls = [
|
|
6328
6459
|
{
|
|
6329
|
-
label:
|
|
6460
|
+
label: __42("Move X", "elementor"),
|
|
6330
6461
|
bind: "x",
|
|
6331
|
-
startIcon: /* @__PURE__ */
|
|
6462
|
+
startIcon: /* @__PURE__ */ React94.createElement(ArrowRightIcon, { fontSize: "tiny" }),
|
|
6332
6463
|
units: ["px", "%", "em", "rem", "vw"]
|
|
6333
6464
|
},
|
|
6334
6465
|
{
|
|
6335
|
-
label:
|
|
6466
|
+
label: __42("Move Y", "elementor"),
|
|
6336
6467
|
bind: "y",
|
|
6337
|
-
startIcon: /* @__PURE__ */
|
|
6468
|
+
startIcon: /* @__PURE__ */ React94.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
6338
6469
|
units: ["px", "%", "em", "rem", "vh"]
|
|
6339
6470
|
},
|
|
6340
6471
|
{
|
|
6341
|
-
label:
|
|
6472
|
+
label: __42("Move Z", "elementor"),
|
|
6342
6473
|
bind: "z",
|
|
6343
|
-
startIcon: /* @__PURE__ */
|
|
6474
|
+
startIcon: /* @__PURE__ */ React94.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
6344
6475
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
6345
6476
|
}
|
|
6346
6477
|
];
|
|
6347
6478
|
var Move = () => {
|
|
6348
6479
|
const context = useBoundProp(moveTransformPropTypeUtil);
|
|
6349
|
-
const rowRefs = [
|
|
6350
|
-
return /* @__PURE__ */
|
|
6480
|
+
const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
|
|
6481
|
+
return /* @__PURE__ */ React94.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React94.createElement(
|
|
6351
6482
|
AxisRow,
|
|
6352
6483
|
{
|
|
6353
6484
|
key: control.bind,
|
|
@@ -6360,34 +6491,34 @@ var Move = () => {
|
|
|
6360
6491
|
};
|
|
6361
6492
|
|
|
6362
6493
|
// src/controls/transform-control/functions/rotate.tsx
|
|
6363
|
-
import * as
|
|
6364
|
-
import { useRef as
|
|
6494
|
+
import * as React95 from "react";
|
|
6495
|
+
import { useRef as useRef19 } from "react";
|
|
6365
6496
|
import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
6366
6497
|
import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
|
|
6367
|
-
import { Grid as
|
|
6368
|
-
import { __ as
|
|
6498
|
+
import { Grid as Grid23 } from "@elementor/ui";
|
|
6499
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
6369
6500
|
var rotateAxisControls = [
|
|
6370
6501
|
{
|
|
6371
|
-
label:
|
|
6502
|
+
label: __43("Rotate X", "elementor"),
|
|
6372
6503
|
bind: "x",
|
|
6373
|
-
startIcon: /* @__PURE__ */
|
|
6504
|
+
startIcon: /* @__PURE__ */ React95.createElement(Arrow360Icon, { fontSize: "tiny" })
|
|
6374
6505
|
},
|
|
6375
6506
|
{
|
|
6376
|
-
label:
|
|
6507
|
+
label: __43("Rotate Y", "elementor"),
|
|
6377
6508
|
bind: "y",
|
|
6378
|
-
startIcon: /* @__PURE__ */
|
|
6509
|
+
startIcon: /* @__PURE__ */ React95.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
6379
6510
|
},
|
|
6380
6511
|
{
|
|
6381
|
-
label:
|
|
6512
|
+
label: __43("Rotate Z", "elementor"),
|
|
6382
6513
|
bind: "z",
|
|
6383
|
-
startIcon: /* @__PURE__ */
|
|
6514
|
+
startIcon: /* @__PURE__ */ React95.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
|
|
6384
6515
|
}
|
|
6385
6516
|
];
|
|
6386
6517
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
6387
6518
|
var Rotate = () => {
|
|
6388
6519
|
const context = useBoundProp(rotateTransformPropTypeUtil2);
|
|
6389
|
-
const rowRefs = [
|
|
6390
|
-
return /* @__PURE__ */
|
|
6520
|
+
const rowRefs = [useRef19(null), useRef19(null), useRef19(null)];
|
|
6521
|
+
return /* @__PURE__ */ React95.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React95.createElement(
|
|
6391
6522
|
AxisRow,
|
|
6392
6523
|
{
|
|
6393
6524
|
key: control.bind,
|
|
@@ -6399,68 +6530,68 @@ var Rotate = () => {
|
|
|
6399
6530
|
};
|
|
6400
6531
|
|
|
6401
6532
|
// src/controls/transform-control/functions/scale.tsx
|
|
6402
|
-
import * as
|
|
6403
|
-
import { useRef as
|
|
6533
|
+
import * as React97 from "react";
|
|
6534
|
+
import { useRef as useRef20 } from "react";
|
|
6404
6535
|
import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
6405
6536
|
import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
|
|
6406
|
-
import { Grid as
|
|
6407
|
-
import { __ as
|
|
6537
|
+
import { Grid as Grid25 } from "@elementor/ui";
|
|
6538
|
+
import { __ as __44 } from "@wordpress/i18n";
|
|
6408
6539
|
|
|
6409
6540
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
6410
|
-
import * as
|
|
6411
|
-
import { Grid as
|
|
6541
|
+
import * as React96 from "react";
|
|
6542
|
+
import { Grid as Grid24 } from "@elementor/ui";
|
|
6412
6543
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
6413
|
-
return /* @__PURE__ */
|
|
6544
|
+
return /* @__PURE__ */ React96.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React96.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, label)), /* @__PURE__ */ React96.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React96.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
6414
6545
|
};
|
|
6415
6546
|
|
|
6416
6547
|
// src/controls/transform-control/functions/scale.tsx
|
|
6417
6548
|
var scaleAxisControls = [
|
|
6418
6549
|
{
|
|
6419
|
-
label:
|
|
6550
|
+
label: __44("Scale X", "elementor"),
|
|
6420
6551
|
bind: "x",
|
|
6421
|
-
startIcon: /* @__PURE__ */
|
|
6552
|
+
startIcon: /* @__PURE__ */ React97.createElement(ArrowRightIcon2, { fontSize: "tiny" })
|
|
6422
6553
|
},
|
|
6423
6554
|
{
|
|
6424
|
-
label:
|
|
6555
|
+
label: __44("Scale Y", "elementor"),
|
|
6425
6556
|
bind: "y",
|
|
6426
|
-
startIcon: /* @__PURE__ */
|
|
6557
|
+
startIcon: /* @__PURE__ */ React97.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
|
|
6427
6558
|
},
|
|
6428
6559
|
{
|
|
6429
|
-
label:
|
|
6560
|
+
label: __44("Scale Z", "elementor"),
|
|
6430
6561
|
bind: "z",
|
|
6431
|
-
startIcon: /* @__PURE__ */
|
|
6562
|
+
startIcon: /* @__PURE__ */ React97.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
|
|
6432
6563
|
}
|
|
6433
6564
|
];
|
|
6434
6565
|
var Scale = () => {
|
|
6435
6566
|
const context = useBoundProp(scaleTransformPropTypeUtil2);
|
|
6436
|
-
const rowRefs = [
|
|
6437
|
-
return /* @__PURE__ */
|
|
6567
|
+
const rowRefs = [useRef20(null), useRef20(null), useRef20(null)];
|
|
6568
|
+
return /* @__PURE__ */ React97.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React97.createElement(PropProvider, { ...context }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React97.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
|
|
6438
6569
|
};
|
|
6439
6570
|
|
|
6440
6571
|
// src/controls/transform-control/functions/skew.tsx
|
|
6441
|
-
import * as
|
|
6442
|
-
import { useRef as
|
|
6572
|
+
import * as React98 from "react";
|
|
6573
|
+
import { useRef as useRef21 } from "react";
|
|
6443
6574
|
import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
6444
6575
|
import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
|
|
6445
|
-
import { Grid as
|
|
6446
|
-
import { __ as
|
|
6576
|
+
import { Grid as Grid26 } from "@elementor/ui";
|
|
6577
|
+
import { __ as __45 } from "@wordpress/i18n";
|
|
6447
6578
|
var skewAxisControls = [
|
|
6448
6579
|
{
|
|
6449
|
-
label:
|
|
6580
|
+
label: __45("Skew X", "elementor"),
|
|
6450
6581
|
bind: "x",
|
|
6451
|
-
startIcon: /* @__PURE__ */
|
|
6582
|
+
startIcon: /* @__PURE__ */ React98.createElement(ArrowRightIcon3, { fontSize: "tiny" })
|
|
6452
6583
|
},
|
|
6453
6584
|
{
|
|
6454
|
-
label:
|
|
6585
|
+
label: __45("Skew Y", "elementor"),
|
|
6455
6586
|
bind: "y",
|
|
6456
|
-
startIcon: /* @__PURE__ */
|
|
6587
|
+
startIcon: /* @__PURE__ */ React98.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
6457
6588
|
}
|
|
6458
6589
|
];
|
|
6459
6590
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
6460
6591
|
var Skew = () => {
|
|
6461
6592
|
const context = useBoundProp(skewTransformPropTypeUtil2);
|
|
6462
|
-
const rowRefs = [
|
|
6463
|
-
return /* @__PURE__ */
|
|
6593
|
+
const rowRefs = [useRef21(null), useRef21(null), useRef21(null)];
|
|
6594
|
+
return /* @__PURE__ */ React98.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React98.createElement(PropProvider, { ...context }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React98.createElement(
|
|
6464
6595
|
AxisRow,
|
|
6465
6596
|
{
|
|
6466
6597
|
key: control.bind,
|
|
@@ -6472,7 +6603,7 @@ var Skew = () => {
|
|
|
6472
6603
|
};
|
|
6473
6604
|
|
|
6474
6605
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
6475
|
-
import { useRef as
|
|
6606
|
+
import { useRef as useRef22 } from "react";
|
|
6476
6607
|
import {
|
|
6477
6608
|
moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
|
|
6478
6609
|
rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
|
|
@@ -6504,7 +6635,7 @@ var useTransformTabsHistory = ({
|
|
|
6504
6635
|
}
|
|
6505
6636
|
};
|
|
6506
6637
|
const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
|
|
6507
|
-
const valuesHistory =
|
|
6638
|
+
const valuesHistory = useRef22({
|
|
6508
6639
|
move: initialMove,
|
|
6509
6640
|
scale: initialScale,
|
|
6510
6641
|
rotate: initialRotate,
|
|
@@ -6565,7 +6696,7 @@ var TransformContent = () => {
|
|
|
6565
6696
|
rotate: initialRotateValue.value,
|
|
6566
6697
|
skew: initialSkewValue.value
|
|
6567
6698
|
});
|
|
6568
|
-
return /* @__PURE__ */
|
|
6699
|
+
return /* @__PURE__ */ React99.createElement(PopoverContent, null, /* @__PURE__ */ React99.createElement(Box17, { sx: { width: "100%" } }, /* @__PURE__ */ React99.createElement(Box17, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React99.createElement(
|
|
6569
6700
|
Tabs2,
|
|
6570
6701
|
{
|
|
6571
6702
|
size: "small",
|
|
@@ -6576,37 +6707,37 @@ var TransformContent = () => {
|
|
|
6576
6707
|
}
|
|
6577
6708
|
},
|
|
6578
6709
|
...getTabsProps(),
|
|
6579
|
-
"aria-label":
|
|
6710
|
+
"aria-label": __46("Transform", "elementor")
|
|
6580
6711
|
},
|
|
6581
|
-
/* @__PURE__ */
|
|
6582
|
-
/* @__PURE__ */
|
|
6583
|
-
/* @__PURE__ */
|
|
6584
|
-
/* @__PURE__ */
|
|
6585
|
-
)), /* @__PURE__ */
|
|
6712
|
+
/* @__PURE__ */ React99.createElement(Tab2, { label: __46("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
6713
|
+
/* @__PURE__ */ React99.createElement(Tab2, { label: __46("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
6714
|
+
/* @__PURE__ */ React99.createElement(Tab2, { label: __46("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
6715
|
+
/* @__PURE__ */ React99.createElement(Tab2, { label: __46("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
6716
|
+
)), /* @__PURE__ */ React99.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React99.createElement(Move, null)), /* @__PURE__ */ React99.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React99.createElement(Scale, null)), /* @__PURE__ */ React99.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React99.createElement(Rotate, null)), /* @__PURE__ */ React99.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React99.createElement(Skew, null))));
|
|
6586
6717
|
};
|
|
6587
6718
|
|
|
6588
6719
|
// src/controls/transform-control/transform-icon.tsx
|
|
6589
|
-
import * as
|
|
6720
|
+
import * as React100 from "react";
|
|
6590
6721
|
import { ArrowAutofitHeightIcon, ArrowsMaximizeIcon as ArrowsMaximizeIcon2, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
|
|
6591
6722
|
var TransformIcon = ({ value }) => {
|
|
6592
6723
|
switch (value.$$type) {
|
|
6593
6724
|
case TransformFunctionKeys.move:
|
|
6594
|
-
return /* @__PURE__ */
|
|
6725
|
+
return /* @__PURE__ */ React100.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
|
|
6595
6726
|
case TransformFunctionKeys.scale:
|
|
6596
|
-
return /* @__PURE__ */
|
|
6727
|
+
return /* @__PURE__ */ React100.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
|
|
6597
6728
|
case TransformFunctionKeys.rotate:
|
|
6598
|
-
return /* @__PURE__ */
|
|
6729
|
+
return /* @__PURE__ */ React100.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
|
|
6599
6730
|
case TransformFunctionKeys.skew:
|
|
6600
|
-
return /* @__PURE__ */
|
|
6731
|
+
return /* @__PURE__ */ React100.createElement(SkewXIcon, { fontSize: "tiny" });
|
|
6601
6732
|
default:
|
|
6602
6733
|
return null;
|
|
6603
6734
|
}
|
|
6604
6735
|
};
|
|
6605
6736
|
|
|
6606
6737
|
// src/controls/transform-control/transform-label.tsx
|
|
6607
|
-
import * as
|
|
6608
|
-
import { Box as
|
|
6609
|
-
import { __ as
|
|
6738
|
+
import * as React101 from "react";
|
|
6739
|
+
import { Box as Box18 } from "@elementor/ui";
|
|
6740
|
+
import { __ as __47 } from "@wordpress/i18n";
|
|
6610
6741
|
var orderedAxis = ["x", "y", "z"];
|
|
6611
6742
|
var formatLabel = (value, functionType) => {
|
|
6612
6743
|
return orderedAxis.map((axisKey) => {
|
|
@@ -6624,98 +6755,98 @@ var TransformLabel = (props) => {
|
|
|
6624
6755
|
const { $$type, value } = props.value;
|
|
6625
6756
|
switch ($$type) {
|
|
6626
6757
|
case TransformFunctionKeys.move:
|
|
6627
|
-
return /* @__PURE__ */
|
|
6758
|
+
return /* @__PURE__ */ React101.createElement(Label2, { label: __47("Move", "elementor"), value: formatLabel(value, "move") });
|
|
6628
6759
|
case TransformFunctionKeys.scale:
|
|
6629
|
-
return /* @__PURE__ */
|
|
6760
|
+
return /* @__PURE__ */ React101.createElement(Label2, { label: __47("Scale", "elementor"), value: formatLabel(value, "scale") });
|
|
6630
6761
|
case TransformFunctionKeys.rotate:
|
|
6631
|
-
return /* @__PURE__ */
|
|
6762
|
+
return /* @__PURE__ */ React101.createElement(Label2, { label: __47("Rotate", "elementor"), value: formatLabel(value, "rotate") });
|
|
6632
6763
|
case TransformFunctionKeys.skew:
|
|
6633
|
-
return /* @__PURE__ */
|
|
6764
|
+
return /* @__PURE__ */ React101.createElement(Label2, { label: __47("Skew", "elementor"), value: formatLabel(value, "skew") });
|
|
6634
6765
|
default:
|
|
6635
6766
|
return "";
|
|
6636
6767
|
}
|
|
6637
6768
|
};
|
|
6638
6769
|
var Label2 = ({ label, value }) => {
|
|
6639
|
-
return /* @__PURE__ */
|
|
6770
|
+
return /* @__PURE__ */ React101.createElement(Box18, { component: "span" }, label, ": ", value);
|
|
6640
6771
|
};
|
|
6641
6772
|
|
|
6642
6773
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
6643
|
-
import * as
|
|
6774
|
+
import * as React104 from "react";
|
|
6644
6775
|
import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
|
|
6645
6776
|
import { AdjustmentsIcon } from "@elementor/icons";
|
|
6646
|
-
import { bindPopover as bindPopover6, Box as
|
|
6647
|
-
import { __ as
|
|
6777
|
+
import { bindPopover as bindPopover6, Box as Box19, Divider as Divider4, Popover as Popover6 } from "@elementor/ui";
|
|
6778
|
+
import { __ as __50 } from "@wordpress/i18n";
|
|
6648
6779
|
|
|
6649
6780
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
6650
|
-
import * as
|
|
6651
|
-
import { useRef as
|
|
6781
|
+
import * as React102 from "react";
|
|
6782
|
+
import { useRef as useRef23 } from "react";
|
|
6652
6783
|
import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
|
|
6653
|
-
import { Grid as
|
|
6654
|
-
import { __ as
|
|
6784
|
+
import { Grid as Grid27, Stack as Stack15 } from "@elementor/ui";
|
|
6785
|
+
import { __ as __48 } from "@wordpress/i18n";
|
|
6655
6786
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
6656
6787
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
6657
|
-
label:
|
|
6788
|
+
label: __48("Perspective", "elementor"),
|
|
6658
6789
|
bind: "perspective",
|
|
6659
6790
|
units: ["px", "em", "rem", "vw", "vh"]
|
|
6660
6791
|
};
|
|
6661
6792
|
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
6662
6793
|
{
|
|
6663
|
-
label:
|
|
6794
|
+
label: __48("Origin X", "elementor"),
|
|
6664
6795
|
bind: "x",
|
|
6665
6796
|
units: ORIGIN_UNITS
|
|
6666
6797
|
},
|
|
6667
6798
|
{
|
|
6668
|
-
label:
|
|
6799
|
+
label: __48("Origin Y", "elementor"),
|
|
6669
6800
|
bind: "y",
|
|
6670
6801
|
units: ORIGIN_UNITS
|
|
6671
6802
|
}
|
|
6672
6803
|
];
|
|
6673
6804
|
var ChildrenPerspectiveControl = () => {
|
|
6674
|
-
return /* @__PURE__ */
|
|
6805
|
+
return /* @__PURE__ */ React102.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, __48("Children perspective", "elementor")), /* @__PURE__ */ React102.createElement(PerspectiveControl, null), /* @__PURE__ */ React102.createElement(PerspectiveOriginControl, null));
|
|
6675
6806
|
};
|
|
6676
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
6677
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
6807
|
+
var PerspectiveControl = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React102.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
6808
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React102.createElement(PerspectiveOriginControlProvider, null));
|
|
6678
6809
|
var PerspectiveOriginControlProvider = () => {
|
|
6679
6810
|
const context = useBoundProp(perspectiveOriginPropTypeUtil);
|
|
6680
|
-
return /* @__PURE__ */
|
|
6811
|
+
return /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React102.createElement(ControlFields, { control }))));
|
|
6681
6812
|
};
|
|
6682
6813
|
var ControlFields = ({ control }) => {
|
|
6683
|
-
const rowRef =
|
|
6684
|
-
return /* @__PURE__ */
|
|
6814
|
+
const rowRef = useRef23(null);
|
|
6815
|
+
return /* @__PURE__ */ React102.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React102.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React102.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
6685
6816
|
};
|
|
6686
6817
|
|
|
6687
6818
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
6688
|
-
import * as
|
|
6689
|
-
import { useRef as
|
|
6819
|
+
import * as React103 from "react";
|
|
6820
|
+
import { useRef as useRef24 } from "react";
|
|
6690
6821
|
import { transformOriginPropTypeUtil } from "@elementor/editor-props";
|
|
6691
|
-
import { Grid as
|
|
6692
|
-
import { __ as
|
|
6822
|
+
import { Grid as Grid28, Stack as Stack16 } from "@elementor/ui";
|
|
6823
|
+
import { __ as __49 } from "@wordpress/i18n";
|
|
6693
6824
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
6694
6825
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
6695
6826
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
6696
6827
|
{
|
|
6697
|
-
label:
|
|
6828
|
+
label: __49("Origin X", "elementor"),
|
|
6698
6829
|
bind: "x",
|
|
6699
6830
|
units: TRANSFORM_ORIGIN_UNITS
|
|
6700
6831
|
},
|
|
6701
6832
|
{
|
|
6702
|
-
label:
|
|
6833
|
+
label: __49("Origin Y", "elementor"),
|
|
6703
6834
|
bind: "y",
|
|
6704
6835
|
units: TRANSFORM_ORIGIN_UNITS
|
|
6705
6836
|
},
|
|
6706
6837
|
{
|
|
6707
|
-
label:
|
|
6838
|
+
label: __49("Origin Z", "elementor"),
|
|
6708
6839
|
bind: "z",
|
|
6709
6840
|
units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
|
|
6710
6841
|
}
|
|
6711
6842
|
];
|
|
6712
6843
|
var TransformOriginControl = () => {
|
|
6713
|
-
return /* @__PURE__ */
|
|
6844
|
+
return /* @__PURE__ */ React103.createElement(Stack16, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, __49("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React103.createElement(ControlFields2, { control, key: control.bind })));
|
|
6714
6845
|
};
|
|
6715
6846
|
var ControlFields2 = ({ control }) => {
|
|
6716
6847
|
const context = useBoundProp(transformOriginPropTypeUtil);
|
|
6717
|
-
const rowRef =
|
|
6718
|
-
return /* @__PURE__ */
|
|
6848
|
+
const rowRef = useRef24(null);
|
|
6849
|
+
return /* @__PURE__ */ React103.createElement(PropProvider, { ...context }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React103.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React103.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
|
|
6719
6850
|
};
|
|
6720
6851
|
|
|
6721
6852
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
@@ -6729,7 +6860,7 @@ var TransformSettingsControl = ({
|
|
|
6729
6860
|
...popupState,
|
|
6730
6861
|
anchorEl: anchorRef.current ?? void 0
|
|
6731
6862
|
});
|
|
6732
|
-
return /* @__PURE__ */
|
|
6863
|
+
return /* @__PURE__ */ React104.createElement(
|
|
6733
6864
|
Popover6,
|
|
6734
6865
|
{
|
|
6735
6866
|
disablePortal: true,
|
|
@@ -6744,16 +6875,16 @@ var TransformSettingsControl = ({
|
|
|
6744
6875
|
},
|
|
6745
6876
|
...popupProps
|
|
6746
6877
|
},
|
|
6747
|
-
/* @__PURE__ */
|
|
6878
|
+
/* @__PURE__ */ React104.createElement(
|
|
6748
6879
|
PopoverHeader4,
|
|
6749
6880
|
{
|
|
6750
|
-
title:
|
|
6881
|
+
title: __50("Transform settings", "elementor"),
|
|
6751
6882
|
onClose: popupState.close,
|
|
6752
|
-
icon: /* @__PURE__ */
|
|
6883
|
+
icon: /* @__PURE__ */ React104.createElement(AdjustmentsIcon, { fontSize: SIZE10 })
|
|
6753
6884
|
}
|
|
6754
6885
|
),
|
|
6755
|
-
/* @__PURE__ */
|
|
6756
|
-
/* @__PURE__ */
|
|
6886
|
+
/* @__PURE__ */ React104.createElement(Divider4, null),
|
|
6887
|
+
/* @__PURE__ */ React104.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React104.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(Box19, { sx: { my: 0.5 } }, /* @__PURE__ */ React104.createElement(Divider4, null)), /* @__PURE__ */ React104.createElement(ChildrenPerspectiveControl, null)))
|
|
6757
6888
|
);
|
|
6758
6889
|
};
|
|
6759
6890
|
|
|
@@ -6762,27 +6893,27 @@ var SIZE11 = "tiny";
|
|
|
6762
6893
|
var TransformRepeaterControl = createControl(
|
|
6763
6894
|
({ showChildrenPerspective }) => {
|
|
6764
6895
|
const context = useBoundProp(transformPropTypeUtil);
|
|
6765
|
-
const headerRef =
|
|
6896
|
+
const headerRef = useRef25(null);
|
|
6766
6897
|
const popupState = usePopupState8({ variant: "popover" });
|
|
6767
|
-
return /* @__PURE__ */
|
|
6898
|
+
return /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(
|
|
6768
6899
|
TransformSettingsControl,
|
|
6769
6900
|
{
|
|
6770
6901
|
popupState,
|
|
6771
6902
|
anchorRef: headerRef,
|
|
6772
6903
|
showChildrenPerspective
|
|
6773
6904
|
}
|
|
6774
|
-
), /* @__PURE__ */
|
|
6905
|
+
), /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React105.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
6775
6906
|
}
|
|
6776
6907
|
);
|
|
6777
|
-
var ToolTip = /* @__PURE__ */
|
|
6778
|
-
|
|
6908
|
+
var ToolTip = /* @__PURE__ */ React105.createElement(
|
|
6909
|
+
Box20,
|
|
6779
6910
|
{
|
|
6780
6911
|
component: "span",
|
|
6781
6912
|
"aria-label": void 0,
|
|
6782
6913
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
6783
6914
|
},
|
|
6784
|
-
/* @__PURE__ */
|
|
6785
|
-
/* @__PURE__ */
|
|
6915
|
+
/* @__PURE__ */ React105.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
|
|
6916
|
+
/* @__PURE__ */ React105.createElement(Typography7, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __51("You can use each kind of transform only once per element.", "elementor"))
|
|
6786
6917
|
);
|
|
6787
6918
|
var Repeater2 = ({
|
|
6788
6919
|
headerRef,
|
|
@@ -6796,21 +6927,21 @@ var Repeater2 = ({
|
|
|
6796
6927
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
6797
6928
|
};
|
|
6798
6929
|
const shouldDisableAddItem = !getInitialValue2();
|
|
6799
|
-
return /* @__PURE__ */
|
|
6930
|
+
return /* @__PURE__ */ React105.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React105.createElement(
|
|
6800
6931
|
ControlRepeater,
|
|
6801
6932
|
{
|
|
6802
6933
|
initial: getInitialValue2() ?? initialTransformValue,
|
|
6803
6934
|
propTypeUtil: transformFunctionsPropTypeUtil
|
|
6804
6935
|
},
|
|
6805
|
-
/* @__PURE__ */
|
|
6936
|
+
/* @__PURE__ */ React105.createElement(
|
|
6806
6937
|
RepeaterHeader,
|
|
6807
6938
|
{
|
|
6808
|
-
label:
|
|
6809
|
-
adornment: () => /* @__PURE__ */
|
|
6939
|
+
label: __51("Transform", "elementor"),
|
|
6940
|
+
adornment: () => /* @__PURE__ */ React105.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
6810
6941
|
ref: headerRef
|
|
6811
6942
|
},
|
|
6812
|
-
/* @__PURE__ */
|
|
6813
|
-
/* @__PURE__ */
|
|
6943
|
+
/* @__PURE__ */ React105.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
6944
|
+
/* @__PURE__ */ React105.createElement(
|
|
6814
6945
|
TooltipAddItemAction,
|
|
6815
6946
|
{
|
|
6816
6947
|
disabled: shouldDisableAddItem,
|
|
@@ -6820,15 +6951,15 @@ var Repeater2 = ({
|
|
|
6820
6951
|
}
|
|
6821
6952
|
)
|
|
6822
6953
|
),
|
|
6823
|
-
/* @__PURE__ */
|
|
6954
|
+
/* @__PURE__ */ React105.createElement(ItemsContainer, null, /* @__PURE__ */ React105.createElement(
|
|
6824
6955
|
Item,
|
|
6825
6956
|
{
|
|
6826
6957
|
Icon: TransformIcon,
|
|
6827
6958
|
Label: TransformLabel,
|
|
6828
|
-
actions: /* @__PURE__ */
|
|
6959
|
+
actions: /* @__PURE__ */ React105.createElement(React105.Fragment, null, /* @__PURE__ */ React105.createElement(DisableItemAction, null), /* @__PURE__ */ React105.createElement(RemoveItemAction, null))
|
|
6829
6960
|
}
|
|
6830
6961
|
)),
|
|
6831
|
-
/* @__PURE__ */
|
|
6962
|
+
/* @__PURE__ */ React105.createElement(EditItemPopover, null, /* @__PURE__ */ React105.createElement(TransformContent, null))
|
|
6832
6963
|
));
|
|
6833
6964
|
};
|
|
6834
6965
|
var TransformBasePopoverTrigger = ({
|
|
@@ -6836,33 +6967,33 @@ var TransformBasePopoverTrigger = ({
|
|
|
6836
6967
|
repeaterBindKey
|
|
6837
6968
|
}) => {
|
|
6838
6969
|
const { bind } = useBoundProp();
|
|
6839
|
-
const titleLabel =
|
|
6840
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
6970
|
+
const titleLabel = __51("Transform settings", "elementor");
|
|
6971
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React105.createElement(Tooltip8, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React105.createElement(IconButton8, { size: SIZE11, "aria-label": titleLabel, ...bindTrigger5(popupState) }, /* @__PURE__ */ React105.createElement(AdjustmentsIcon2, { fontSize: SIZE11 })));
|
|
6841
6972
|
};
|
|
6842
6973
|
|
|
6843
6974
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
6844
|
-
import * as
|
|
6845
|
-
import { useEffect as useEffect15, useMemo as
|
|
6975
|
+
import * as React108 from "react";
|
|
6976
|
+
import { useEffect as useEffect15, useMemo as useMemo17, useState as useState18 } from "react";
|
|
6846
6977
|
import {
|
|
6847
6978
|
createArrayPropUtils as createArrayPropUtils3,
|
|
6848
6979
|
selectionSizePropTypeUtil as selectionSizePropTypeUtil2
|
|
6849
6980
|
} from "@elementor/editor-props";
|
|
6850
6981
|
import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
|
|
6851
|
-
import { Alert as Alert2, AlertTitle as AlertTitle3, Box as
|
|
6982
|
+
import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box22, Typography as Typography8 } from "@elementor/ui";
|
|
6852
6983
|
import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
|
|
6853
|
-
import { __ as
|
|
6984
|
+
import { __ as __54 } from "@wordpress/i18n";
|
|
6854
6985
|
|
|
6855
6986
|
// src/controls/selection-size-control.tsx
|
|
6856
|
-
import * as
|
|
6857
|
-
import { useMemo as
|
|
6987
|
+
import * as React106 from "react";
|
|
6988
|
+
import { useMemo as useMemo15, useRef as useRef26 } from "react";
|
|
6858
6989
|
import { selectionSizePropTypeUtil } from "@elementor/editor-props";
|
|
6859
|
-
import { Grid as
|
|
6990
|
+
import { Grid as Grid29 } from "@elementor/ui";
|
|
6860
6991
|
var SelectionSizeControl = createControl(
|
|
6861
6992
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
6862
6993
|
const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
|
|
6863
|
-
const rowRef =
|
|
6994
|
+
const rowRef = useRef26(null);
|
|
6864
6995
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
6865
|
-
const currentSizeConfig =
|
|
6996
|
+
const currentSizeConfig = useMemo15(() => {
|
|
6866
6997
|
switch (value.selection.$$type) {
|
|
6867
6998
|
case "key-value":
|
|
6868
6999
|
return sizeConfigMap[value?.selection?.value.value.value || ""];
|
|
@@ -6873,7 +7004,7 @@ var SelectionSizeControl = createControl(
|
|
|
6873
7004
|
}
|
|
6874
7005
|
}, [value, sizeConfigMap]);
|
|
6875
7006
|
const SelectionComponent = selectionConfig.component;
|
|
6876
|
-
return /* @__PURE__ */
|
|
7007
|
+
return /* @__PURE__ */ React106.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React106.createElement(Grid29, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React106.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React106.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React106.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React106.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React106.createElement(React106.Fragment, null, /* @__PURE__ */ React106.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React106.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React106.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React106.createElement(
|
|
6877
7008
|
SizeControl,
|
|
6878
7009
|
{
|
|
6879
7010
|
anchorRef: rowRef,
|
|
@@ -6888,12 +7019,12 @@ var SelectionSizeControl = createControl(
|
|
|
6888
7019
|
|
|
6889
7020
|
// src/controls/transition-control/data.ts
|
|
6890
7021
|
import { hasProInstalled, isVersionGreaterOrEqual } from "@elementor/utils";
|
|
6891
|
-
import { __ as
|
|
7022
|
+
import { __ as __52 } from "@wordpress/i18n";
|
|
6892
7023
|
var initialTransitionValue = {
|
|
6893
7024
|
selection: {
|
|
6894
7025
|
$$type: "key-value",
|
|
6895
7026
|
value: {
|
|
6896
|
-
key: { value:
|
|
7027
|
+
key: { value: __52("All properties", "elementor"), $$type: "string" },
|
|
6897
7028
|
value: { value: "all", $$type: "string" }
|
|
6898
7029
|
}
|
|
6899
7030
|
},
|
|
@@ -6917,128 +7048,128 @@ var createTransitionPropertiesList = () => {
|
|
|
6917
7048
|
const isSiteRtl = getIsSiteRtl();
|
|
6918
7049
|
const baseProperties = [
|
|
6919
7050
|
{
|
|
6920
|
-
label:
|
|
7051
|
+
label: __52("Default", "elementor"),
|
|
6921
7052
|
type: "category",
|
|
6922
|
-
properties: [{ label:
|
|
7053
|
+
properties: [{ label: __52("All properties", "elementor"), value: "all" }]
|
|
6923
7054
|
},
|
|
6924
7055
|
{
|
|
6925
|
-
label:
|
|
7056
|
+
label: __52("Margin", "elementor"),
|
|
6926
7057
|
type: "category",
|
|
6927
7058
|
properties: [
|
|
6928
|
-
{ label:
|
|
6929
|
-
{ label:
|
|
7059
|
+
{ label: __52("Margin (all)", "elementor"), value: "margin", isDisabled: true },
|
|
7060
|
+
{ label: __52("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
|
|
6930
7061
|
{
|
|
6931
|
-
label: isSiteRtl ?
|
|
7062
|
+
label: isSiteRtl ? __52("Margin right", "elementor") : __52("Margin left", "elementor"),
|
|
6932
7063
|
value: "margin-inline-start",
|
|
6933
7064
|
isDisabled: true
|
|
6934
7065
|
},
|
|
6935
7066
|
{
|
|
6936
|
-
label: isSiteRtl ?
|
|
7067
|
+
label: isSiteRtl ? __52("Margin left", "elementor") : __52("Margin right", "elementor"),
|
|
6937
7068
|
value: "margin-inline-end",
|
|
6938
7069
|
isDisabled: true
|
|
6939
7070
|
},
|
|
6940
|
-
{ label:
|
|
7071
|
+
{ label: __52("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
|
|
6941
7072
|
]
|
|
6942
7073
|
},
|
|
6943
7074
|
{
|
|
6944
|
-
label:
|
|
7075
|
+
label: __52("Padding", "elementor"),
|
|
6945
7076
|
type: "category",
|
|
6946
7077
|
properties: [
|
|
6947
|
-
{ label:
|
|
6948
|
-
{ label:
|
|
7078
|
+
{ label: __52("Padding (all)", "elementor"), value: "padding", isDisabled: true },
|
|
7079
|
+
{ label: __52("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
|
|
6949
7080
|
{
|
|
6950
|
-
label: isSiteRtl ?
|
|
7081
|
+
label: isSiteRtl ? __52("Padding right", "elementor") : __52("Padding left", "elementor"),
|
|
6951
7082
|
value: "padding-inline-start",
|
|
6952
7083
|
isDisabled: true
|
|
6953
7084
|
},
|
|
6954
7085
|
{
|
|
6955
|
-
label: isSiteRtl ?
|
|
7086
|
+
label: isSiteRtl ? __52("Padding left", "elementor") : __52("Padding right", "elementor"),
|
|
6956
7087
|
value: "padding-inline-end",
|
|
6957
7088
|
isDisabled: true
|
|
6958
7089
|
},
|
|
6959
|
-
{ label:
|
|
7090
|
+
{ label: __52("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
|
|
6960
7091
|
]
|
|
6961
7092
|
},
|
|
6962
7093
|
{
|
|
6963
|
-
label:
|
|
7094
|
+
label: __52("Flex", "elementor"),
|
|
6964
7095
|
type: "category",
|
|
6965
7096
|
properties: [
|
|
6966
|
-
{ label:
|
|
6967
|
-
{ label:
|
|
6968
|
-
{ label:
|
|
6969
|
-
{ label:
|
|
7097
|
+
{ label: __52("Flex (all)", "elementor"), value: "flex", isDisabled: true },
|
|
7098
|
+
{ label: __52("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
|
|
7099
|
+
{ label: __52("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
|
|
7100
|
+
{ label: __52("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
|
|
6970
7101
|
]
|
|
6971
7102
|
},
|
|
6972
7103
|
{
|
|
6973
|
-
label:
|
|
7104
|
+
label: __52("Size", "elementor"),
|
|
6974
7105
|
type: "category",
|
|
6975
7106
|
properties: [
|
|
6976
|
-
{ label:
|
|
6977
|
-
{ label:
|
|
6978
|
-
{ label:
|
|
6979
|
-
{ label:
|
|
6980
|
-
{ label:
|
|
6981
|
-
{ label:
|
|
7107
|
+
{ label: __52("Width", "elementor"), value: "width", isDisabled: true },
|
|
7108
|
+
{ label: __52("Height", "elementor"), value: "height", isDisabled: true },
|
|
7109
|
+
{ label: __52("Max height", "elementor"), value: "max-height", isDisabled: true },
|
|
7110
|
+
{ label: __52("Max width", "elementor"), value: "max-width", isDisabled: true },
|
|
7111
|
+
{ label: __52("Min height", "elementor"), value: "min-height", isDisabled: true },
|
|
7112
|
+
{ label: __52("Min width", "elementor"), value: "min-width", isDisabled: true }
|
|
6982
7113
|
]
|
|
6983
7114
|
},
|
|
6984
7115
|
{
|
|
6985
|
-
label:
|
|
7116
|
+
label: __52("Position", "elementor"),
|
|
6986
7117
|
type: "category",
|
|
6987
7118
|
properties: [
|
|
6988
|
-
{ label:
|
|
7119
|
+
{ label: __52("Top", "elementor"), value: "inset-block-start", isDisabled: true },
|
|
6989
7120
|
{
|
|
6990
|
-
label: isSiteRtl ?
|
|
7121
|
+
label: isSiteRtl ? __52("Right", "elementor") : __52("Left", "elementor"),
|
|
6991
7122
|
value: "inset-inline-start",
|
|
6992
7123
|
isDisabled: true
|
|
6993
7124
|
},
|
|
6994
7125
|
{
|
|
6995
|
-
label: isSiteRtl ?
|
|
7126
|
+
label: isSiteRtl ? __52("Left", "elementor") : __52("Right", "elementor"),
|
|
6996
7127
|
value: "inset-inline-end",
|
|
6997
7128
|
isDisabled: true
|
|
6998
7129
|
},
|
|
6999
|
-
{ label:
|
|
7000
|
-
{ label:
|
|
7130
|
+
{ label: __52("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
|
|
7131
|
+
{ label: __52("Z-index", "elementor"), value: "z-index", isDisabled: true }
|
|
7001
7132
|
]
|
|
7002
7133
|
},
|
|
7003
7134
|
{
|
|
7004
|
-
label:
|
|
7135
|
+
label: __52("Typography", "elementor"),
|
|
7005
7136
|
type: "category",
|
|
7006
7137
|
properties: [
|
|
7007
|
-
{ label:
|
|
7008
|
-
{ label:
|
|
7009
|
-
{ label:
|
|
7010
|
-
{ label:
|
|
7011
|
-
{ label:
|
|
7012
|
-
{ label:
|
|
7013
|
-
{ label:
|
|
7138
|
+
{ label: __52("Font color", "elementor"), value: "color", isDisabled: true },
|
|
7139
|
+
{ label: __52("Font size", "elementor"), value: "font-size", isDisabled: true },
|
|
7140
|
+
{ label: __52("Line height", "elementor"), value: "line-height", isDisabled: true },
|
|
7141
|
+
{ label: __52("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
|
|
7142
|
+
{ label: __52("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
|
|
7143
|
+
{ label: __52("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
|
|
7144
|
+
{ label: __52("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
|
|
7014
7145
|
]
|
|
7015
7146
|
},
|
|
7016
7147
|
{
|
|
7017
|
-
label:
|
|
7148
|
+
label: __52("Background", "elementor"),
|
|
7018
7149
|
type: "category",
|
|
7019
7150
|
properties: [
|
|
7020
|
-
{ label:
|
|
7021
|
-
{ label:
|
|
7022
|
-
{ label:
|
|
7151
|
+
{ label: __52("Background color", "elementor"), value: "background-color", isDisabled: true },
|
|
7152
|
+
{ label: __52("Background position", "elementor"), value: "background-position", isDisabled: true },
|
|
7153
|
+
{ label: __52("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
|
|
7023
7154
|
]
|
|
7024
7155
|
},
|
|
7025
7156
|
{
|
|
7026
|
-
label:
|
|
7157
|
+
label: __52("Border", "elementor"),
|
|
7027
7158
|
type: "category",
|
|
7028
7159
|
properties: [
|
|
7029
|
-
{ label:
|
|
7030
|
-
{ label:
|
|
7031
|
-
{ label:
|
|
7032
|
-
{ label:
|
|
7160
|
+
{ label: __52("Border (all)", "elementor"), value: "border", isDisabled: true },
|
|
7161
|
+
{ label: __52("Border radius", "elementor"), value: "border-radius", isDisabled: true },
|
|
7162
|
+
{ label: __52("Border color", "elementor"), value: "border-color", isDisabled: true },
|
|
7163
|
+
{ label: __52("Border width", "elementor"), value: "border-width", isDisabled: true }
|
|
7033
7164
|
]
|
|
7034
7165
|
},
|
|
7035
7166
|
{
|
|
7036
|
-
label:
|
|
7167
|
+
label: __52("Effects", "elementor"),
|
|
7037
7168
|
type: "category",
|
|
7038
7169
|
properties: [
|
|
7039
|
-
{ label:
|
|
7040
|
-
{ label:
|
|
7041
|
-
{ label:
|
|
7170
|
+
{ label: __52("Opacity", "elementor"), value: "opacity", isDisabled: true },
|
|
7171
|
+
{ label: __52("Transform (all)", "elementor"), value: "transform", isDisabled: true },
|
|
7172
|
+
{ label: __52("Filter (all)", "elementor"), value: "filter", isDisabled: true }
|
|
7042
7173
|
]
|
|
7043
7174
|
}
|
|
7044
7175
|
];
|
|
@@ -7074,13 +7205,13 @@ function subscribeToTransitionEvent() {
|
|
|
7074
7205
|
}
|
|
7075
7206
|
|
|
7076
7207
|
// src/controls/transition-control/transition-selector.tsx
|
|
7077
|
-
import * as
|
|
7078
|
-
import { useMemo as
|
|
7208
|
+
import * as React107 from "react";
|
|
7209
|
+
import { useMemo as useMemo16, useRef as useRef27 } from "react";
|
|
7079
7210
|
import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
|
|
7080
7211
|
import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
|
|
7081
7212
|
import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
|
|
7082
|
-
import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as
|
|
7083
|
-
import { __ as
|
|
7213
|
+
import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box21, Popover as Popover7, UnstableTag as UnstableTag3, usePopupState as usePopupState9 } from "@elementor/ui";
|
|
7214
|
+
import { __ as __53 } from "@wordpress/i18n";
|
|
7084
7215
|
|
|
7085
7216
|
// src/utils/tracking.ts
|
|
7086
7217
|
import { getSelectedElements as getSelectedElements2 } from "@elementor/editor-elements";
|
|
@@ -7162,9 +7293,9 @@ var TransitionSelector = ({
|
|
|
7162
7293
|
const {
|
|
7163
7294
|
key: { value: transitionLabel }
|
|
7164
7295
|
} = value;
|
|
7165
|
-
const defaultRef =
|
|
7296
|
+
const defaultRef = useRef27(null);
|
|
7166
7297
|
const popoverState = usePopupState9({ variant: "popover" });
|
|
7167
|
-
const disabledCategories =
|
|
7298
|
+
const disabledCategories = useMemo16(() => {
|
|
7168
7299
|
return new Set(
|
|
7169
7300
|
transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
|
|
7170
7301
|
);
|
|
@@ -7184,7 +7315,7 @@ var TransitionSelector = ({
|
|
|
7184
7315
|
return [
|
|
7185
7316
|
first,
|
|
7186
7317
|
{
|
|
7187
|
-
label:
|
|
7318
|
+
label: __53("Recently Used", "elementor"),
|
|
7188
7319
|
items: recentItems
|
|
7189
7320
|
},
|
|
7190
7321
|
...rest
|
|
@@ -7208,16 +7339,16 @@ var TransitionSelector = ({
|
|
|
7208
7339
|
left: rect.right + 36
|
|
7209
7340
|
};
|
|
7210
7341
|
};
|
|
7211
|
-
return /* @__PURE__ */
|
|
7342
|
+
return /* @__PURE__ */ React107.createElement(Box21, { ref: defaultRef }, /* @__PURE__ */ React107.createElement(ControlActions, null, /* @__PURE__ */ React107.createElement(
|
|
7212
7343
|
UnstableTag3,
|
|
7213
7344
|
{
|
|
7214
7345
|
variant: "outlined",
|
|
7215
7346
|
label: transitionLabel,
|
|
7216
|
-
endIcon: /* @__PURE__ */
|
|
7347
|
+
endIcon: /* @__PURE__ */ React107.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
|
|
7217
7348
|
...bindTrigger6(popoverState),
|
|
7218
7349
|
fullWidth: true
|
|
7219
7350
|
}
|
|
7220
|
-
)), /* @__PURE__ */
|
|
7351
|
+
)), /* @__PURE__ */ React107.createElement(
|
|
7221
7352
|
Popover7,
|
|
7222
7353
|
{
|
|
7223
7354
|
disablePortal: true,
|
|
@@ -7228,7 +7359,7 @@ var TransitionSelector = ({
|
|
|
7228
7359
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
7229
7360
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
7230
7361
|
},
|
|
7231
|
-
/* @__PURE__ */
|
|
7362
|
+
/* @__PURE__ */ React107.createElement(
|
|
7232
7363
|
ItemSelector,
|
|
7233
7364
|
{
|
|
7234
7365
|
itemsList: getItemList(),
|
|
@@ -7236,11 +7367,11 @@ var TransitionSelector = ({
|
|
|
7236
7367
|
onItemChange: handleTransitionPropertyChange,
|
|
7237
7368
|
onClose: popoverState.close,
|
|
7238
7369
|
sectionWidth: 268,
|
|
7239
|
-
title:
|
|
7370
|
+
title: __53("Transition Property", "elementor"),
|
|
7240
7371
|
icon: VariationsIcon,
|
|
7241
7372
|
disabledItems: includeCurrentValueInOptions(value, disabledItems),
|
|
7242
|
-
categoryItemContentTemplate: (item) => /* @__PURE__ */
|
|
7243
|
-
|
|
7373
|
+
categoryItemContentTemplate: (item) => /* @__PURE__ */ React107.createElement(
|
|
7374
|
+
Box21,
|
|
7244
7375
|
{
|
|
7245
7376
|
sx: {
|
|
7246
7377
|
display: "flex",
|
|
@@ -7249,13 +7380,13 @@ var TransitionSelector = ({
|
|
|
7249
7380
|
width: "100%"
|
|
7250
7381
|
}
|
|
7251
7382
|
},
|
|
7252
|
-
/* @__PURE__ */
|
|
7253
|
-
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */
|
|
7383
|
+
/* @__PURE__ */ React107.createElement("span", null, item.value),
|
|
7384
|
+
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React107.createElement(PromotionChip, null)
|
|
7254
7385
|
),
|
|
7255
|
-
footer: showPromotion ? /* @__PURE__ */
|
|
7386
|
+
footer: showPromotion ? /* @__PURE__ */ React107.createElement(
|
|
7256
7387
|
PromotionAlert,
|
|
7257
7388
|
{
|
|
7258
|
-
message:
|
|
7389
|
+
message: __53(
|
|
7259
7390
|
"Upgrade to customize transition properties and control effects.",
|
|
7260
7391
|
"elementor"
|
|
7261
7392
|
),
|
|
@@ -7294,8 +7425,8 @@ var areAllPropertiesUsed = (value = []) => {
|
|
|
7294
7425
|
};
|
|
7295
7426
|
var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
7296
7427
|
return {
|
|
7297
|
-
selectionLabel:
|
|
7298
|
-
sizeLabel:
|
|
7428
|
+
selectionLabel: __54("Type", "elementor"),
|
|
7429
|
+
sizeLabel: __54("Duration", "elementor"),
|
|
7299
7430
|
selectionConfig: {
|
|
7300
7431
|
component: TransitionSelector,
|
|
7301
7432
|
props: {
|
|
@@ -7371,7 +7502,7 @@ var getInitialValue = (values = []) => {
|
|
|
7371
7502
|
}
|
|
7372
7503
|
return initialTransitionValue;
|
|
7373
7504
|
};
|
|
7374
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
7505
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React108.createElement(
|
|
7375
7506
|
Alert2,
|
|
7376
7507
|
{
|
|
7377
7508
|
sx: {
|
|
@@ -7379,10 +7510,10 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React107.createElement(
|
|
|
7379
7510
|
gap: 0.5
|
|
7380
7511
|
},
|
|
7381
7512
|
color: "secondary",
|
|
7382
|
-
icon: /* @__PURE__ */
|
|
7513
|
+
icon: /* @__PURE__ */ React108.createElement(InfoCircleFilledIcon3, null)
|
|
7383
7514
|
},
|
|
7384
|
-
/* @__PURE__ */
|
|
7385
|
-
/* @__PURE__ */
|
|
7515
|
+
/* @__PURE__ */ React108.createElement(AlertTitle3, null, __54("Transitions", "elementor")),
|
|
7516
|
+
/* @__PURE__ */ React108.createElement(Box22, { component: "span" }, /* @__PURE__ */ React108.createElement(Typography8, { variant: "body2" }, __54("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
7386
7517
|
);
|
|
7387
7518
|
var TransitionRepeaterControl = createControl(
|
|
7388
7519
|
({
|
|
@@ -7393,11 +7524,11 @@ var TransitionRepeaterControl = createControl(
|
|
|
7393
7524
|
const [recentlyUsedList, setRecentlyUsedList] = useState18([]);
|
|
7394
7525
|
const proInstalled = hasProInstalled2();
|
|
7395
7526
|
const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
7396
|
-
const { allDisabled: disabledItems, proDisabled: proDisabledItems } =
|
|
7527
|
+
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo17(
|
|
7397
7528
|
() => getDisabledItemLabels(value),
|
|
7398
7529
|
[value]
|
|
7399
7530
|
);
|
|
7400
|
-
const allowedTransitionSet =
|
|
7531
|
+
const allowedTransitionSet = useMemo17(() => {
|
|
7401
7532
|
const set = /* @__PURE__ */ new Set();
|
|
7402
7533
|
transitionProperties.forEach((category) => {
|
|
7403
7534
|
category.properties.forEach((prop) => {
|
|
@@ -7423,15 +7554,15 @@ var TransitionRepeaterControl = createControl(
|
|
|
7423
7554
|
useEffect15(() => {
|
|
7424
7555
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
7425
7556
|
}, [recentlyUsedListGetter]);
|
|
7426
|
-
const allPropertiesUsed =
|
|
7557
|
+
const allPropertiesUsed = useMemo17(() => areAllPropertiesUsed(value), [value]);
|
|
7427
7558
|
const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
|
|
7428
|
-
return /* @__PURE__ */
|
|
7559
|
+
return /* @__PURE__ */ React108.createElement(
|
|
7429
7560
|
RepeatableControl,
|
|
7430
7561
|
{
|
|
7431
|
-
label:
|
|
7432
|
-
repeaterLabel:
|
|
7562
|
+
label: __54("Transitions", "elementor"),
|
|
7563
|
+
repeaterLabel: __54("Transitions", "elementor"),
|
|
7433
7564
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
7434
|
-
placeholder:
|
|
7565
|
+
placeholder: __54("Empty Transition", "elementor"),
|
|
7435
7566
|
showDuplicate: false,
|
|
7436
7567
|
showToggle: true,
|
|
7437
7568
|
initialValues: getInitialValue(value),
|
|
@@ -7452,11 +7583,11 @@ var TransitionRepeaterControl = createControl(
|
|
|
7452
7583
|
);
|
|
7453
7584
|
|
|
7454
7585
|
// src/controls/date-time-control.tsx
|
|
7455
|
-
import * as
|
|
7586
|
+
import * as React109 from "react";
|
|
7456
7587
|
import * as dayjs from "dayjs";
|
|
7457
|
-
import { isTransformable as isTransformable2, stringPropTypeUtil as
|
|
7588
|
+
import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
|
|
7458
7589
|
import { DateTimePropTypeUtil } from "@elementor/editor-props";
|
|
7459
|
-
import { Box as
|
|
7590
|
+
import { Box as Box23, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
|
|
7460
7591
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
7461
7592
|
var TIME_FORMAT = "HH:mm";
|
|
7462
7593
|
var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
@@ -7500,10 +7631,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7500
7631
|
const base = dayjs.default();
|
|
7501
7632
|
return base.hour(h).minute(m).second(0).millisecond(0);
|
|
7502
7633
|
};
|
|
7503
|
-
return /* @__PURE__ */
|
|
7634
|
+
return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(LocalizationProvider, null, /* @__PURE__ */ React109.createElement(Box23, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React109.createElement(
|
|
7504
7635
|
DatePicker,
|
|
7505
7636
|
{
|
|
7506
|
-
value: parseDateValue(
|
|
7637
|
+
value: parseDateValue(stringPropTypeUtil20.extract(value?.date)),
|
|
7507
7638
|
onChange: (v) => handleChange({ date: v }, { bind: "date" }),
|
|
7508
7639
|
disabled: inputDisabled,
|
|
7509
7640
|
slotProps: {
|
|
@@ -7512,10 +7643,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7512
7643
|
openPickerIcon: { fontSize: "tiny" }
|
|
7513
7644
|
}
|
|
7514
7645
|
}
|
|
7515
|
-
)), /* @__PURE__ */
|
|
7646
|
+
)), /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React109.createElement(
|
|
7516
7647
|
TimePicker,
|
|
7517
7648
|
{
|
|
7518
|
-
value: parseTimeValue(
|
|
7649
|
+
value: parseTimeValue(stringPropTypeUtil20.extract(value?.time)),
|
|
7519
7650
|
onChange: (v) => handleChange({ time: v }, { bind: "time" }),
|
|
7520
7651
|
disabled: inputDisabled,
|
|
7521
7652
|
slotProps: {
|
|
@@ -7528,13 +7659,13 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7528
7659
|
});
|
|
7529
7660
|
|
|
7530
7661
|
// src/controls/date-range-control.tsx
|
|
7531
|
-
import * as
|
|
7662
|
+
import * as React111 from "react";
|
|
7532
7663
|
import { dateRangePropTypeUtil, dateStringPropTypeUtil as dateStringPropTypeUtil2 } from "@elementor/editor-props";
|
|
7533
|
-
import { FormHelperText as FormHelperText2, Grid as
|
|
7534
|
-
import { __ as
|
|
7664
|
+
import { FormHelperText as FormHelperText2, Grid as Grid30, Stack as Stack17 } from "@elementor/ui";
|
|
7665
|
+
import { __ as __55 } from "@wordpress/i18n";
|
|
7535
7666
|
|
|
7536
7667
|
// src/controls/date-string-control.tsx
|
|
7537
|
-
import * as
|
|
7668
|
+
import * as React110 from "react";
|
|
7538
7669
|
import { dateStringPropTypeUtil } from "@elementor/editor-props";
|
|
7539
7670
|
import { DatePicker as DatePicker2, LocalizationProvider as LocalizationProvider2 } from "@elementor/ui";
|
|
7540
7671
|
|
|
@@ -7593,7 +7724,7 @@ var DateStringControl = createControl(
|
|
|
7593
7724
|
}
|
|
7594
7725
|
setValue(newValue.format(format));
|
|
7595
7726
|
};
|
|
7596
|
-
return /* @__PURE__ */
|
|
7727
|
+
return /* @__PURE__ */ React110.createElement(LocalizationProvider2, null, /* @__PURE__ */ React110.createElement(ControlActions, null, /* @__PURE__ */ React110.createElement(
|
|
7597
7728
|
DatePicker2,
|
|
7598
7729
|
{
|
|
7599
7730
|
value: parseDateString(value ?? ""),
|
|
@@ -7607,8 +7738,8 @@ var DateStringControl = createControl(
|
|
|
7607
7738
|
|
|
7608
7739
|
// src/controls/date-range-control.tsx
|
|
7609
7740
|
var RANGE_LABELS = {
|
|
7610
|
-
min:
|
|
7611
|
-
max:
|
|
7741
|
+
min: __55("Min date", "elementor"),
|
|
7742
|
+
max: __55("Max date", "elementor")
|
|
7612
7743
|
};
|
|
7613
7744
|
var isMaxBeforeMin = (minIso, maxIso) => {
|
|
7614
7745
|
if (!minIso || !maxIso) {
|
|
@@ -7616,38 +7747,38 @@ var isMaxBeforeMin = (minIso, maxIso) => {
|
|
|
7616
7747
|
}
|
|
7617
7748
|
return maxIso < minIso;
|
|
7618
7749
|
};
|
|
7619
|
-
var RANGE_ERROR_MESSAGE =
|
|
7750
|
+
var RANGE_ERROR_MESSAGE = __55("Max date must be on or after Min date", "elementor");
|
|
7620
7751
|
var DateRangeControl = createControl(() => {
|
|
7621
7752
|
const { value, setValue, ...propContext } = useBoundProp(dateRangePropTypeUtil);
|
|
7622
7753
|
const minString = dateStringPropTypeUtil2.extract(value?.min);
|
|
7623
7754
|
const maxString = dateStringPropTypeUtil2.extract(value?.max);
|
|
7624
7755
|
const hasInvalidRange = isMaxBeforeMin(minString, maxString);
|
|
7625
|
-
return /* @__PURE__ */
|
|
7756
|
+
return /* @__PURE__ */ React111.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React111.createElement(Stack17, { gap: 0.75 }, /* @__PURE__ */ React111.createElement(Stack17, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React111.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React111.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React111.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(
|
|
7626
7757
|
BoundDateStringControl,
|
|
7627
7758
|
{
|
|
7628
7759
|
bind: "min",
|
|
7629
7760
|
ariaLabel: RANGE_LABELS.min,
|
|
7630
7761
|
error: hasInvalidRange
|
|
7631
7762
|
}
|
|
7632
|
-
))), /* @__PURE__ */
|
|
7763
|
+
))), /* @__PURE__ */ React111.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React111.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React111.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(
|
|
7633
7764
|
BoundDateStringControl,
|
|
7634
7765
|
{
|
|
7635
7766
|
bind: "max",
|
|
7636
7767
|
ariaLabel: RANGE_LABELS.max,
|
|
7637
7768
|
error: hasInvalidRange
|
|
7638
7769
|
}
|
|
7639
|
-
)))), hasInvalidRange && /* @__PURE__ */
|
|
7770
|
+
)))), hasInvalidRange && /* @__PURE__ */ React111.createElement(FormHelperText2, { error: true }, RANGE_ERROR_MESSAGE)));
|
|
7640
7771
|
});
|
|
7641
7772
|
var BoundDateStringControl = ({
|
|
7642
7773
|
bind,
|
|
7643
7774
|
ariaLabel,
|
|
7644
7775
|
error
|
|
7645
7776
|
}) => {
|
|
7646
|
-
return /* @__PURE__ */
|
|
7777
|
+
return /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React111.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
|
|
7647
7778
|
};
|
|
7648
7779
|
|
|
7649
7780
|
// src/controls/time-string-control.tsx
|
|
7650
|
-
import * as
|
|
7781
|
+
import * as React112 from "react";
|
|
7651
7782
|
import { timeStringPropTypeUtil } from "@elementor/editor-props";
|
|
7652
7783
|
import { LocalizationProvider as LocalizationProvider3, TimePicker as TimePicker2 } from "@elementor/ui";
|
|
7653
7784
|
var TimeStringControl = createControl(
|
|
@@ -7675,7 +7806,7 @@ var TimeStringControl = createControl(
|
|
|
7675
7806
|
}
|
|
7676
7807
|
setValue(newValue.format(format));
|
|
7677
7808
|
};
|
|
7678
|
-
return /* @__PURE__ */
|
|
7809
|
+
return /* @__PURE__ */ React112.createElement(LocalizationProvider3, null, /* @__PURE__ */ React112.createElement(ControlActions, null, /* @__PURE__ */ React112.createElement(
|
|
7679
7810
|
TimePicker2,
|
|
7680
7811
|
{
|
|
7681
7812
|
value: parseTimeString(value ?? ""),
|
|
@@ -7688,33 +7819,33 @@ var TimeStringControl = createControl(
|
|
|
7688
7819
|
);
|
|
7689
7820
|
|
|
7690
7821
|
// src/controls/time-range-control.tsx
|
|
7691
|
-
import * as
|
|
7822
|
+
import * as React113 from "react";
|
|
7692
7823
|
import { timeRangePropTypeUtil } from "@elementor/editor-props";
|
|
7693
|
-
import { Grid as
|
|
7694
|
-
import { __ as
|
|
7824
|
+
import { Grid as Grid31, Stack as Stack18 } from "@elementor/ui";
|
|
7825
|
+
import { __ as __56 } from "@wordpress/i18n";
|
|
7695
7826
|
var RANGE_LABELS2 = {
|
|
7696
|
-
min:
|
|
7697
|
-
max:
|
|
7827
|
+
min: __56("Start time", "elementor"),
|
|
7828
|
+
max: __56("End time", "elementor")
|
|
7698
7829
|
};
|
|
7699
7830
|
var TimeRangeControl = createControl(() => {
|
|
7700
7831
|
const { value, setValue, ...propContext } = useBoundProp(timeRangePropTypeUtil);
|
|
7701
|
-
return /* @__PURE__ */
|
|
7832
|
+
return /* @__PURE__ */ React113.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React113.createElement(Stack18, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React113.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React113.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React113.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React113.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React113.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React113.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
|
|
7702
7833
|
});
|
|
7703
7834
|
var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
7704
|
-
return /* @__PURE__ */
|
|
7835
|
+
return /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React113.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
|
|
7705
7836
|
};
|
|
7706
7837
|
|
|
7707
7838
|
// src/controls/inline-editing-control.tsx
|
|
7708
|
-
import * as
|
|
7709
|
-
import { useCallback as useCallback4, useEffect as useEffect17, useMemo as
|
|
7710
|
-
import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as
|
|
7711
|
-
import { Box as
|
|
7839
|
+
import * as React115 from "react";
|
|
7840
|
+
import { useCallback as useCallback4, useEffect as useEffect17, useMemo as useMemo18 } from "react";
|
|
7841
|
+
import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
|
|
7842
|
+
import { Box as Box25 } from "@elementor/ui";
|
|
7712
7843
|
import { debounce as debounce4 } from "@elementor/utils";
|
|
7713
7844
|
|
|
7714
7845
|
// src/components/inline-editor.tsx
|
|
7715
|
-
import * as
|
|
7716
|
-
import { useEffect as useEffect16, useRef as
|
|
7717
|
-
import { Box as
|
|
7846
|
+
import * as React114 from "react";
|
|
7847
|
+
import { useEffect as useEffect16, useRef as useRef28 } from "react";
|
|
7848
|
+
import { Box as Box24 } from "@elementor/ui";
|
|
7718
7849
|
import Bold from "@tiptap/extension-bold";
|
|
7719
7850
|
import Document from "@tiptap/extension-document";
|
|
7720
7851
|
import HardBreak from "@tiptap/extension-hard-break";
|
|
@@ -7751,7 +7882,7 @@ function htmlToPlainText(html) {
|
|
|
7751
7882
|
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
7752
7883
|
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
7753
7884
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
7754
|
-
var InlineEditor =
|
|
7885
|
+
var InlineEditor = React114.forwardRef((props, ref) => {
|
|
7755
7886
|
const {
|
|
7756
7887
|
value,
|
|
7757
7888
|
setValue,
|
|
@@ -7767,8 +7898,8 @@ var InlineEditor = React113.forwardRef((props, ref) => {
|
|
|
7767
7898
|
onSelectionEnd,
|
|
7768
7899
|
mountElement = null
|
|
7769
7900
|
} = props;
|
|
7770
|
-
const containerRef =
|
|
7771
|
-
const onBlurRef =
|
|
7901
|
+
const containerRef = useRef28(null);
|
|
7902
|
+
const onBlurRef = useRef28(onBlur);
|
|
7772
7903
|
onBlurRef.current = onBlur;
|
|
7773
7904
|
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
7774
7905
|
const onUpdate = ({ editor: updatedEditor }) => {
|
|
@@ -7862,10 +7993,10 @@ var InlineEditor = React113.forwardRef((props, ref) => {
|
|
|
7862
7993
|
if (mountElement) {
|
|
7863
7994
|
return null;
|
|
7864
7995
|
}
|
|
7865
|
-
return /* @__PURE__ */
|
|
7996
|
+
return /* @__PURE__ */ React114.createElement(Box24, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React114.createElement(EditorContent, { ref, editor }));
|
|
7866
7997
|
});
|
|
7867
7998
|
var useOnUpdate = (callback, dependencies) => {
|
|
7868
|
-
const hasMounted =
|
|
7999
|
+
const hasMounted = useRef28(false);
|
|
7869
8000
|
useEffect16(() => {
|
|
7870
8001
|
if (hasMounted.current) {
|
|
7871
8002
|
callback();
|
|
@@ -7884,12 +8015,12 @@ var InlineEditingControl = createControl(
|
|
|
7884
8015
|
props
|
|
7885
8016
|
}) => {
|
|
7886
8017
|
const { value, setValue, placeholder } = useBoundProp(htmlV3PropTypeUtil);
|
|
7887
|
-
const content =
|
|
7888
|
-
const debouncedParse =
|
|
8018
|
+
const content = stringPropTypeUtil21.extract(value?.content ?? null) ?? "";
|
|
8019
|
+
const debouncedParse = useMemo18(
|
|
7889
8020
|
() => debounce4((html) => {
|
|
7890
8021
|
const parsed = parseHtmlChildren(html);
|
|
7891
8022
|
setValue({
|
|
7892
|
-
content: parsed.content ?
|
|
8023
|
+
content: parsed.content ? stringPropTypeUtil21.create(parsed.content) : null,
|
|
7893
8024
|
children: parsed.children
|
|
7894
8025
|
});
|
|
7895
8026
|
}, CHILDREN_PARSE_DEBOUNCE_MS),
|
|
@@ -7899,7 +8030,7 @@ var InlineEditingControl = createControl(
|
|
|
7899
8030
|
(newValue) => {
|
|
7900
8031
|
const html = newValue ?? "";
|
|
7901
8032
|
setValue({
|
|
7902
|
-
content: html ?
|
|
8033
|
+
content: html ? stringPropTypeUtil21.create(html) : null,
|
|
7903
8034
|
children: value?.children ?? []
|
|
7904
8035
|
});
|
|
7905
8036
|
debouncedParse(html);
|
|
@@ -7907,8 +8038,8 @@ var InlineEditingControl = createControl(
|
|
|
7907
8038
|
[setValue, value?.children, debouncedParse]
|
|
7908
8039
|
);
|
|
7909
8040
|
useEffect17(() => () => debouncedParse.cancel(), [debouncedParse]);
|
|
7910
|
-
return /* @__PURE__ */
|
|
7911
|
-
|
|
8041
|
+
return /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
|
|
8042
|
+
Box25,
|
|
7912
8043
|
{
|
|
7913
8044
|
sx: {
|
|
7914
8045
|
p: 0.8,
|
|
@@ -7952,7 +8083,7 @@ var InlineEditingControl = createControl(
|
|
|
7952
8083
|
...attributes,
|
|
7953
8084
|
...props
|
|
7954
8085
|
},
|
|
7955
|
-
/* @__PURE__ */
|
|
8086
|
+
/* @__PURE__ */ React115.createElement(
|
|
7956
8087
|
InlineEditor,
|
|
7957
8088
|
{
|
|
7958
8089
|
value: content,
|
|
@@ -7965,12 +8096,12 @@ var InlineEditingControl = createControl(
|
|
|
7965
8096
|
);
|
|
7966
8097
|
|
|
7967
8098
|
// src/controls/email-form-action-control.tsx
|
|
7968
|
-
import * as
|
|
8099
|
+
import * as React116 from "react";
|
|
7969
8100
|
import { emailPropTypeUtil } from "@elementor/editor-props";
|
|
7970
8101
|
import { CollapsibleContent, InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
|
|
7971
|
-
import { Box as
|
|
8102
|
+
import { Box as Box26, Divider as Divider5, Grid as Grid32, Stack as Stack19 } from "@elementor/ui";
|
|
7972
8103
|
import { hasProInstalled as hasProInstalled3, isVersionGreaterOrEqual as isVersionGreaterOrEqual2 } from "@elementor/utils";
|
|
7973
|
-
import { __ as
|
|
8104
|
+
import { __ as __57 } from "@wordpress/i18n";
|
|
7974
8105
|
|
|
7975
8106
|
// src/hooks/use-form-field-suggestions.ts
|
|
7976
8107
|
import { getContainer, getSelectedElements as getSelectedElements3 } from "@elementor/editor-elements";
|
|
@@ -8029,14 +8160,14 @@ function useFormFieldSuggestions(options) {
|
|
|
8029
8160
|
}
|
|
8030
8161
|
|
|
8031
8162
|
// src/controls/email-form-action-control.tsx
|
|
8032
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
8033
|
-
var SendToField = ({ placeholder }) => /* @__PURE__ */
|
|
8034
|
-
var SubjectField = () => /* @__PURE__ */
|
|
8163
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React116.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(TextControl, { placeholder }))));
|
|
8164
|
+
var SendToField = ({ placeholder }) => /* @__PURE__ */ React116.createElement(EmailField, { bind: "to", label: __57("Send to", "elementor"), placeholder });
|
|
8165
|
+
var SubjectField = () => /* @__PURE__ */ React116.createElement(
|
|
8035
8166
|
EmailField,
|
|
8036
8167
|
{
|
|
8037
8168
|
bind: "subject",
|
|
8038
|
-
label:
|
|
8039
|
-
placeholder:
|
|
8169
|
+
label: __57("Email subject", "elementor"),
|
|
8170
|
+
placeholder: __57("New form submission", "elementor")
|
|
8040
8171
|
}
|
|
8041
8172
|
);
|
|
8042
8173
|
var MIN_PRO_VERSION_FOR_MENTIONS = "4.1.0";
|
|
@@ -8052,82 +8183,82 @@ var shouldShowMentionsInfo = () => {
|
|
|
8052
8183
|
};
|
|
8053
8184
|
var MessageField = () => {
|
|
8054
8185
|
const suggestions = useFormFieldSuggestions();
|
|
8055
|
-
return /* @__PURE__ */
|
|
8186
|
+
return /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React116.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, __57("Message", "elementor"))), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __57(
|
|
8056
8187
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
8057
8188
|
"elementor"
|
|
8058
|
-
) :
|
|
8189
|
+
) : __57("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
8059
8190
|
};
|
|
8060
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
8191
|
+
var FromEmailField = () => /* @__PURE__ */ React116.createElement(
|
|
8061
8192
|
EmailField,
|
|
8062
8193
|
{
|
|
8063
8194
|
bind: "from",
|
|
8064
|
-
label:
|
|
8065
|
-
placeholder:
|
|
8195
|
+
label: __57("From email", "elementor"),
|
|
8196
|
+
placeholder: __57("What email should appear as the sender?", "elementor")
|
|
8066
8197
|
}
|
|
8067
8198
|
);
|
|
8068
|
-
var FromNameField = () => /* @__PURE__ */
|
|
8199
|
+
var FromNameField = () => /* @__PURE__ */ React116.createElement(
|
|
8069
8200
|
EmailField,
|
|
8070
8201
|
{
|
|
8071
8202
|
bind: "from-name",
|
|
8072
|
-
label:
|
|
8073
|
-
placeholder:
|
|
8203
|
+
label: __57("From name", "elementor"),
|
|
8204
|
+
placeholder: __57("What name should appear as the sender?", "elementor")
|
|
8074
8205
|
}
|
|
8075
8206
|
);
|
|
8076
8207
|
var ReplyToField = () => {
|
|
8077
8208
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8078
|
-
return /* @__PURE__ */
|
|
8209
|
+
return /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React116.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, __57("Reply-to", "elementor"))), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(
|
|
8079
8210
|
MentionTextAreaControl,
|
|
8080
8211
|
{
|
|
8081
8212
|
suggestions: emailSuggestions,
|
|
8082
8213
|
rows: 1,
|
|
8083
8214
|
triggerPosition: "start",
|
|
8084
|
-
placeholder:
|
|
8215
|
+
placeholder: __57("You can type @ to insert an email field", "elementor")
|
|
8085
8216
|
}
|
|
8086
8217
|
))));
|
|
8087
8218
|
};
|
|
8088
|
-
var CcField = () => /* @__PURE__ */
|
|
8089
|
-
var BccField = () => /* @__PURE__ */
|
|
8090
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
8219
|
+
var CcField = () => /* @__PURE__ */ React116.createElement(EmailField, { bind: "cc", label: __57("Cc", "elementor") });
|
|
8220
|
+
var BccField = () => /* @__PURE__ */ React116.createElement(EmailField, { bind: "bcc", label: __57("Bcc", "elementor") });
|
|
8221
|
+
var MetaDataField = () => /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React116.createElement(Stack19, { gap: 0.5 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, __57("Metadata", "elementor")), /* @__PURE__ */ React116.createElement(
|
|
8091
8222
|
ChipsControl,
|
|
8092
8223
|
{
|
|
8093
8224
|
options: [
|
|
8094
|
-
{ label:
|
|
8095
|
-
{ label:
|
|
8096
|
-
{ label:
|
|
8097
|
-
{ label:
|
|
8098
|
-
{ label:
|
|
8225
|
+
{ label: __57("Date", "elementor"), value: "date" },
|
|
8226
|
+
{ label: __57("Time", "elementor"), value: "time" },
|
|
8227
|
+
{ label: __57("Page URL", "elementor"), value: "page-url" },
|
|
8228
|
+
{ label: __57("User agent", "elementor"), value: "user-agent" },
|
|
8229
|
+
{ label: __57("Credit", "elementor"), value: "credit" }
|
|
8099
8230
|
]
|
|
8100
8231
|
}
|
|
8101
8232
|
)));
|
|
8102
|
-
var SendAsField = () => /* @__PURE__ */
|
|
8233
|
+
var SendAsField = () => /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React116.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, __57("Send as", "elementor"))), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(
|
|
8103
8234
|
SelectControl,
|
|
8104
8235
|
{
|
|
8105
8236
|
options: [
|
|
8106
|
-
{ label:
|
|
8107
|
-
{ label:
|
|
8237
|
+
{ label: __57("HTML", "elementor"), value: "html" },
|
|
8238
|
+
{ label: __57("Plain Text", "elementor"), value: "plain" }
|
|
8108
8239
|
]
|
|
8109
8240
|
}
|
|
8110
8241
|
))));
|
|
8111
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
8242
|
+
var AdvancedSettings = () => /* @__PURE__ */ React116.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React116.createElement(Box26, { sx: { pt: 2 } }, /* @__PURE__ */ React116.createElement(Stack19, { gap: 2 }, /* @__PURE__ */ React116.createElement(FromNameField, null), /* @__PURE__ */ React116.createElement(ReplyToField, null), /* @__PURE__ */ React116.createElement(CcField, null), /* @__PURE__ */ React116.createElement(BccField, null), /* @__PURE__ */ React116.createElement(Divider5, null), /* @__PURE__ */ React116.createElement(MetaDataField, null), /* @__PURE__ */ React116.createElement(SendAsField, null))));
|
|
8112
8243
|
var EmailFormActionControl = createControl(({ toPlaceholder }) => {
|
|
8113
8244
|
const { value, setValue, ...propContext } = useBoundProp(emailPropTypeUtil);
|
|
8114
|
-
return /* @__PURE__ */
|
|
8245
|
+
return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(Stack19, { gap: 2 }, /* @__PURE__ */ React116.createElement(ControlLabel, null, __57("Email settings", "elementor")), /* @__PURE__ */ React116.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React116.createElement(SubjectField, null), /* @__PURE__ */ React116.createElement(MessageField, null), /* @__PURE__ */ React116.createElement(FromEmailField, null), /* @__PURE__ */ React116.createElement(AdvancedSettings, null)));
|
|
8115
8246
|
});
|
|
8116
8247
|
|
|
8117
8248
|
// src/controls/attachment-type-control.tsx
|
|
8118
|
-
import * as
|
|
8249
|
+
import * as React117 from "react";
|
|
8119
8250
|
import { InfoAlert as InfoAlert3 } from "@elementor/editor-ui";
|
|
8120
|
-
import { Grid as
|
|
8121
|
-
import { __ as
|
|
8251
|
+
import { Grid as Grid33 } from "@elementor/ui";
|
|
8252
|
+
import { __ as __58 } from "@wordpress/i18n";
|
|
8122
8253
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
8123
|
-
return /* @__PURE__ */
|
|
8254
|
+
return /* @__PURE__ */ React117.createElement(Grid33, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(SelectControl, { options })), /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(InfoAlert3, null, __58(
|
|
8124
8255
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
8125
8256
|
"elementor"
|
|
8126
8257
|
))));
|
|
8127
8258
|
});
|
|
8128
8259
|
|
|
8129
8260
|
// src/controls/grid-span-control.tsx
|
|
8130
|
-
import * as
|
|
8261
|
+
import * as React118 from "react";
|
|
8131
8262
|
import { spanPropTypeUtil } from "@elementor/editor-props";
|
|
8132
8263
|
import { TextField as TextField11 } from "@elementor/ui";
|
|
8133
8264
|
var GridSpanControl = createControl(
|
|
@@ -8143,7 +8274,7 @@ var GridSpanControl = createControl(
|
|
|
8143
8274
|
const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(spanPropTypeUtil);
|
|
8144
8275
|
const handleChange = (event) => setValue(event.target.value);
|
|
8145
8276
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
|
|
8146
|
-
return /* @__PURE__ */
|
|
8277
|
+
return /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
|
|
8147
8278
|
TextField11,
|
|
8148
8279
|
{
|
|
8149
8280
|
size: "tiny",
|
|
@@ -8164,17 +8295,17 @@ var GridSpanControl = createControl(
|
|
|
8164
8295
|
);
|
|
8165
8296
|
|
|
8166
8297
|
// src/components/promotions/display-conditions-control.tsx
|
|
8167
|
-
import * as
|
|
8168
|
-
import { useRef as
|
|
8298
|
+
import * as React120 from "react";
|
|
8299
|
+
import { useRef as useRef29 } from "react";
|
|
8169
8300
|
import { SitemapIcon } from "@elementor/icons";
|
|
8170
|
-
import { IconButton as
|
|
8171
|
-
import { __ as
|
|
8301
|
+
import { IconButton as IconButton9, Stack as Stack20, Tooltip as Tooltip9 } from "@elementor/ui";
|
|
8302
|
+
import { __ as __59 } from "@wordpress/i18n";
|
|
8172
8303
|
|
|
8173
8304
|
// src/components/promotions/promotion-trigger.tsx
|
|
8174
|
-
import * as
|
|
8305
|
+
import * as React119 from "react";
|
|
8175
8306
|
import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState19 } from "react";
|
|
8176
8307
|
import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
|
|
8177
|
-
import { Box as
|
|
8308
|
+
import { Box as Box27 } from "@elementor/ui";
|
|
8178
8309
|
function getV4Promotion(key) {
|
|
8179
8310
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
8180
8311
|
}
|
|
@@ -8191,7 +8322,7 @@ var PromotionTrigger = forwardRef12(
|
|
|
8191
8322
|
});
|
|
8192
8323
|
}, [trackingData]);
|
|
8193
8324
|
useImperativeHandle(ref, () => ({ toggle }), [toggle]);
|
|
8194
|
-
return /* @__PURE__ */
|
|
8325
|
+
return /* @__PURE__ */ React119.createElement(React119.Fragment, null, promotion && /* @__PURE__ */ React119.createElement(
|
|
8195
8326
|
PromotionInfotip,
|
|
8196
8327
|
{
|
|
8197
8328
|
title: promotion.title,
|
|
@@ -8205,8 +8336,8 @@ var PromotionTrigger = forwardRef12(
|
|
|
8205
8336
|
},
|
|
8206
8337
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
8207
8338
|
},
|
|
8208
|
-
/* @__PURE__ */
|
|
8209
|
-
|
|
8339
|
+
/* @__PURE__ */ React119.createElement(
|
|
8340
|
+
Box27,
|
|
8210
8341
|
{
|
|
8211
8342
|
onClick: (e) => {
|
|
8212
8343
|
e.stopPropagation();
|
|
@@ -8214,18 +8345,18 @@ var PromotionTrigger = forwardRef12(
|
|
|
8214
8345
|
},
|
|
8215
8346
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
8216
8347
|
},
|
|
8217
|
-
children ?? /* @__PURE__ */
|
|
8348
|
+
children ?? /* @__PURE__ */ React119.createElement(PromotionChip2, null)
|
|
8218
8349
|
)
|
|
8219
8350
|
));
|
|
8220
8351
|
}
|
|
8221
8352
|
);
|
|
8222
8353
|
|
|
8223
8354
|
// src/components/promotions/display-conditions-control.tsx
|
|
8224
|
-
var ARIA_LABEL =
|
|
8355
|
+
var ARIA_LABEL = __59("Display Conditions", "elementor");
|
|
8225
8356
|
var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
|
|
8226
8357
|
var DisplayConditionsControl = createControl(() => {
|
|
8227
|
-
const triggerRef =
|
|
8228
|
-
return /* @__PURE__ */
|
|
8358
|
+
const triggerRef = useRef29(null);
|
|
8359
|
+
return /* @__PURE__ */ React120.createElement(
|
|
8229
8360
|
Stack20,
|
|
8230
8361
|
{
|
|
8231
8362
|
direction: "row",
|
|
@@ -8235,9 +8366,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8235
8366
|
alignItems: "center"
|
|
8236
8367
|
}
|
|
8237
8368
|
},
|
|
8238
|
-
/* @__PURE__ */
|
|
8239
|
-
/* @__PURE__ */
|
|
8240
|
-
|
|
8369
|
+
/* @__PURE__ */ React120.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
|
|
8370
|
+
/* @__PURE__ */ React120.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React120.createElement(
|
|
8371
|
+
IconButton9,
|
|
8241
8372
|
{
|
|
8242
8373
|
size: "tiny",
|
|
8243
8374
|
"aria-label": ARIA_LABEL,
|
|
@@ -8249,22 +8380,22 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8249
8380
|
borderRadius: 1
|
|
8250
8381
|
}
|
|
8251
8382
|
},
|
|
8252
|
-
/* @__PURE__ */
|
|
8383
|
+
/* @__PURE__ */ React120.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
8253
8384
|
))
|
|
8254
8385
|
);
|
|
8255
8386
|
});
|
|
8256
8387
|
|
|
8257
8388
|
// src/components/promotions/attributes-control.tsx
|
|
8258
|
-
import * as
|
|
8259
|
-
import { useRef as
|
|
8260
|
-
import { PlusIcon as
|
|
8389
|
+
import * as React121 from "react";
|
|
8390
|
+
import { useRef as useRef30 } from "react";
|
|
8391
|
+
import { PlusIcon as PlusIcon4 } from "@elementor/icons";
|
|
8261
8392
|
import { Stack as Stack21, Tooltip as Tooltip10 } from "@elementor/ui";
|
|
8262
|
-
import { __ as
|
|
8263
|
-
var ARIA_LABEL2 =
|
|
8393
|
+
import { __ as __60 } from "@wordpress/i18n";
|
|
8394
|
+
var ARIA_LABEL2 = __60("Attributes", "elementor");
|
|
8264
8395
|
var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
|
|
8265
8396
|
var AttributesControl = createControl(() => {
|
|
8266
|
-
const triggerRef =
|
|
8267
|
-
return /* @__PURE__ */
|
|
8397
|
+
const triggerRef = useRef30(null);
|
|
8398
|
+
return /* @__PURE__ */ React121.createElement(
|
|
8268
8399
|
Stack21,
|
|
8269
8400
|
{
|
|
8270
8401
|
direction: "row",
|
|
@@ -8274,9 +8405,9 @@ var AttributesControl = createControl(() => {
|
|
|
8274
8405
|
alignItems: "center"
|
|
8275
8406
|
}
|
|
8276
8407
|
},
|
|
8277
|
-
/* @__PURE__ */
|
|
8278
|
-
/* @__PURE__ */
|
|
8279
|
-
|
|
8408
|
+
/* @__PURE__ */ React121.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
|
|
8409
|
+
/* @__PURE__ */ React121.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React121.createElement(
|
|
8410
|
+
PlusIcon4,
|
|
8280
8411
|
{
|
|
8281
8412
|
"aria-label": ARIA_LABEL2,
|
|
8282
8413
|
fontSize: "tiny",
|
|
@@ -8289,29 +8420,29 @@ var AttributesControl = createControl(() => {
|
|
|
8289
8420
|
});
|
|
8290
8421
|
|
|
8291
8422
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
8292
|
-
import * as
|
|
8423
|
+
import * as React122 from "react";
|
|
8293
8424
|
import { BrushBigIcon } from "@elementor/icons";
|
|
8294
|
-
import { IconButton as
|
|
8295
|
-
var CustomIconButton = styled11(
|
|
8425
|
+
import { IconButton as IconButton10, styled as styled11, Tooltip as Tooltip11 } from "@elementor/ui";
|
|
8426
|
+
var CustomIconButton = styled11(IconButton10)(({ theme }) => ({
|
|
8296
8427
|
width: theme.spacing(2.5),
|
|
8297
8428
|
height: theme.spacing(2.5)
|
|
8298
8429
|
}));
|
|
8299
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
8430
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React122.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React122.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React122.createElement(BrushBigIcon, { fontSize: size })));
|
|
8300
8431
|
|
|
8301
8432
|
// src/components/repeater/repeater.tsx
|
|
8302
|
-
import * as
|
|
8433
|
+
import * as React123 from "react";
|
|
8303
8434
|
import { useEffect as useEffect18, useState as useState20 } from "react";
|
|
8304
|
-
import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as
|
|
8435
|
+
import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
|
|
8305
8436
|
import {
|
|
8306
8437
|
bindPopover as bindPopover8,
|
|
8307
8438
|
bindTrigger as bindTrigger7,
|
|
8308
|
-
Box as
|
|
8309
|
-
IconButton as
|
|
8439
|
+
Box as Box28,
|
|
8440
|
+
IconButton as IconButton11,
|
|
8310
8441
|
Infotip as Infotip4,
|
|
8311
8442
|
Tooltip as Tooltip12,
|
|
8312
8443
|
usePopupState as usePopupState10
|
|
8313
8444
|
} from "@elementor/ui";
|
|
8314
|
-
import { __ as
|
|
8445
|
+
import { __ as __61 } from "@wordpress/i18n";
|
|
8315
8446
|
var SIZE12 = "tiny";
|
|
8316
8447
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
8317
8448
|
var Repeater3 = ({
|
|
@@ -8392,8 +8523,8 @@ var Repeater3 = ({
|
|
|
8392
8523
|
};
|
|
8393
8524
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
8394
8525
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
8395
|
-
const addButton = /* @__PURE__ */
|
|
8396
|
-
|
|
8526
|
+
const addButton = /* @__PURE__ */ React123.createElement(
|
|
8527
|
+
IconButton11,
|
|
8397
8528
|
{
|
|
8398
8529
|
size: SIZE12,
|
|
8399
8530
|
sx: {
|
|
@@ -8401,11 +8532,11 @@ var Repeater3 = ({
|
|
|
8401
8532
|
},
|
|
8402
8533
|
disabled: isButtonDisabled,
|
|
8403
8534
|
onClick: addRepeaterItem,
|
|
8404
|
-
"aria-label":
|
|
8535
|
+
"aria-label": __61("Add item", "elementor")
|
|
8405
8536
|
},
|
|
8406
|
-
/* @__PURE__ */
|
|
8537
|
+
/* @__PURE__ */ React123.createElement(PlusIcon5, { fontSize: SIZE12 })
|
|
8407
8538
|
);
|
|
8408
|
-
return /* @__PURE__ */
|
|
8539
|
+
return /* @__PURE__ */ React123.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React123.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React123.createElement(
|
|
8409
8540
|
Infotip4,
|
|
8410
8541
|
{
|
|
8411
8542
|
placement: "right",
|
|
@@ -8413,20 +8544,20 @@ var Repeater3 = ({
|
|
|
8413
8544
|
color: "secondary",
|
|
8414
8545
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
8415
8546
|
},
|
|
8416
|
-
/* @__PURE__ */
|
|
8417
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
8547
|
+
/* @__PURE__ */ React123.createElement(Box28, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
8548
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React123.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
8418
8549
|
const index = uniqueKeys.indexOf(key);
|
|
8419
8550
|
const value = items2[index];
|
|
8420
8551
|
if (!value) {
|
|
8421
8552
|
return null;
|
|
8422
8553
|
}
|
|
8423
|
-
return /* @__PURE__ */
|
|
8554
|
+
return /* @__PURE__ */ React123.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React123.createElement(
|
|
8424
8555
|
RepeaterItem,
|
|
8425
8556
|
{
|
|
8426
8557
|
disabled,
|
|
8427
8558
|
propDisabled: value?.disabled,
|
|
8428
|
-
label: /* @__PURE__ */
|
|
8429
|
-
startIcon: /* @__PURE__ */
|
|
8559
|
+
label: /* @__PURE__ */ React123.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React123.createElement(itemSettings.Label, { value, index })),
|
|
8560
|
+
startIcon: /* @__PURE__ */ React123.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React123.createElement(itemSettings.Icon, { value })),
|
|
8430
8561
|
removeItem: () => removeRepeaterItem(index),
|
|
8431
8562
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
8432
8563
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -8440,7 +8571,7 @@ var Repeater3 = ({
|
|
|
8440
8571
|
actions: itemSettings.actions,
|
|
8441
8572
|
value
|
|
8442
8573
|
},
|
|
8443
|
-
(props) => /* @__PURE__ */
|
|
8574
|
+
(props) => /* @__PURE__ */ React123.createElement(
|
|
8444
8575
|
itemSettings.Content,
|
|
8445
8576
|
{
|
|
8446
8577
|
...props,
|
|
@@ -8482,16 +8613,16 @@ var RepeaterItem = ({
|
|
|
8482
8613
|
);
|
|
8483
8614
|
const triggerProps = bindTrigger7(popoverState);
|
|
8484
8615
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
8485
|
-
const duplicateLabel =
|
|
8486
|
-
const toggleLabel = propDisabled ?
|
|
8487
|
-
const removeLabel =
|
|
8488
|
-
return /* @__PURE__ */
|
|
8616
|
+
const duplicateLabel = __61("Duplicate", "elementor");
|
|
8617
|
+
const toggleLabel = propDisabled ? __61("Show", "elementor") : __61("Hide", "elementor");
|
|
8618
|
+
const removeLabel = __61("Remove", "elementor");
|
|
8619
|
+
return /* @__PURE__ */ React123.createElement(Box28, { sx: { display: "contents" } }, /* @__PURE__ */ React123.createElement(
|
|
8489
8620
|
RepeaterTag,
|
|
8490
8621
|
{
|
|
8491
8622
|
disabled,
|
|
8492
8623
|
label,
|
|
8493
8624
|
ref: setRef,
|
|
8494
|
-
"aria-label":
|
|
8625
|
+
"aria-label": __61("Open item", "elementor"),
|
|
8495
8626
|
...triggerProps,
|
|
8496
8627
|
onClick: (e) => {
|
|
8497
8628
|
triggerProps.onClick(e);
|
|
@@ -8500,9 +8631,9 @@ var RepeaterItem = ({
|
|
|
8500
8631
|
}
|
|
8501
8632
|
},
|
|
8502
8633
|
startIcon,
|
|
8503
|
-
actions: /* @__PURE__ */
|
|
8634
|
+
actions: /* @__PURE__ */ React123.createElement(React123.Fragment, null, showDuplicate && /* @__PURE__ */ React123.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React123.createElement(IconButton11, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React123.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React123.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React123.createElement(IconButton11, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React123.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React123.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React123.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React123.createElement(IconButton11, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React123.createElement(XIcon4, { fontSize: SIZE12 }))))
|
|
8504
8635
|
}
|
|
8505
|
-
), /* @__PURE__ */
|
|
8636
|
+
), /* @__PURE__ */ React123.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React123.createElement(Box28, null, children({ anchorEl: ref }))));
|
|
8506
8637
|
};
|
|
8507
8638
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
8508
8639
|
const [ref, setRef] = useState20(null);
|
|
@@ -8527,8 +8658,8 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
8527
8658
|
};
|
|
8528
8659
|
|
|
8529
8660
|
// src/components/inline-editor-toolbar.tsx
|
|
8530
|
-
import * as
|
|
8531
|
-
import { useEffect as useEffect20, useMemo as
|
|
8661
|
+
import * as React125 from "react";
|
|
8662
|
+
import { useEffect as useEffect20, useMemo as useMemo19, useRef as useRef32, useState as useState21 } from "react";
|
|
8532
8663
|
import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
|
|
8533
8664
|
import {
|
|
8534
8665
|
BoldIcon,
|
|
@@ -8541,8 +8672,8 @@ import {
|
|
|
8541
8672
|
UnderlineIcon
|
|
8542
8673
|
} from "@elementor/icons";
|
|
8543
8674
|
import {
|
|
8544
|
-
Box as
|
|
8545
|
-
IconButton as
|
|
8675
|
+
Box as Box29,
|
|
8676
|
+
IconButton as IconButton12,
|
|
8546
8677
|
ToggleButton as ToggleButton3,
|
|
8547
8678
|
ToggleButtonGroup as ToggleButtonGroup2,
|
|
8548
8679
|
toggleButtonGroupClasses,
|
|
@@ -8550,14 +8681,14 @@ import {
|
|
|
8550
8681
|
usePopupState as usePopupState11
|
|
8551
8682
|
} from "@elementor/ui";
|
|
8552
8683
|
import { useEditorState } from "@tiptap/react";
|
|
8553
|
-
import { __ as
|
|
8684
|
+
import { __ as __63 } from "@wordpress/i18n";
|
|
8554
8685
|
|
|
8555
8686
|
// src/components/url-popover.tsx
|
|
8556
|
-
import * as
|
|
8557
|
-
import { useEffect as useEffect19, useRef as
|
|
8687
|
+
import * as React124 from "react";
|
|
8688
|
+
import { useEffect as useEffect19, useRef as useRef31 } from "react";
|
|
8558
8689
|
import { ExternalLinkIcon } from "@elementor/icons";
|
|
8559
8690
|
import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack22, TextField as TextField12, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
|
|
8560
|
-
import { __ as
|
|
8691
|
+
import { __ as __62 } from "@wordpress/i18n";
|
|
8561
8692
|
var UrlPopover = ({
|
|
8562
8693
|
popupState,
|
|
8563
8694
|
restoreValue,
|
|
@@ -8567,7 +8698,7 @@ var UrlPopover = ({
|
|
|
8567
8698
|
openInNewTab,
|
|
8568
8699
|
onToggleNewTab
|
|
8569
8700
|
}) => {
|
|
8570
|
-
const inputRef =
|
|
8701
|
+
const inputRef = useRef31(null);
|
|
8571
8702
|
useEffect19(() => {
|
|
8572
8703
|
if (popupState.isOpen) {
|
|
8573
8704
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
@@ -8577,7 +8708,7 @@ var UrlPopover = ({
|
|
|
8577
8708
|
restoreValue();
|
|
8578
8709
|
popupState.close();
|
|
8579
8710
|
};
|
|
8580
|
-
return /* @__PURE__ */
|
|
8711
|
+
return /* @__PURE__ */ React124.createElement(
|
|
8581
8712
|
Popover8,
|
|
8582
8713
|
{
|
|
8583
8714
|
slotProps: {
|
|
@@ -8588,30 +8719,30 @@ var UrlPopover = ({
|
|
|
8588
8719
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8589
8720
|
onClose: handleClose
|
|
8590
8721
|
},
|
|
8591
|
-
/* @__PURE__ */
|
|
8722
|
+
/* @__PURE__ */ React124.createElement(Stack22, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React124.createElement(
|
|
8592
8723
|
TextField12,
|
|
8593
8724
|
{
|
|
8594
8725
|
value,
|
|
8595
8726
|
onChange,
|
|
8596
8727
|
size: "tiny",
|
|
8597
8728
|
fullWidth: true,
|
|
8598
|
-
placeholder:
|
|
8729
|
+
placeholder: __62("Type a URL", "elementor"),
|
|
8599
8730
|
inputProps: { ref: inputRef },
|
|
8600
8731
|
color: "secondary",
|
|
8601
8732
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
8602
8733
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
8603
8734
|
}
|
|
8604
|
-
), /* @__PURE__ */
|
|
8735
|
+
), /* @__PURE__ */ React124.createElement(Tooltip13, { title: __62("Open in a new tab", "elementor") }, /* @__PURE__ */ React124.createElement(
|
|
8605
8736
|
ToggleButton2,
|
|
8606
8737
|
{
|
|
8607
8738
|
size: "tiny",
|
|
8608
8739
|
value: "newTab",
|
|
8609
8740
|
selected: openInNewTab,
|
|
8610
8741
|
onClick: onToggleNewTab,
|
|
8611
|
-
"aria-label":
|
|
8742
|
+
"aria-label": __62("Open in a new tab", "elementor"),
|
|
8612
8743
|
sx: { borderRadius: "8px" }
|
|
8613
8744
|
},
|
|
8614
|
-
/* @__PURE__ */
|
|
8745
|
+
/* @__PURE__ */ React124.createElement(ExternalLinkIcon, { fontSize: "tiny" })
|
|
8615
8746
|
)))
|
|
8616
8747
|
);
|
|
8617
8748
|
};
|
|
@@ -8620,14 +8751,14 @@ var UrlPopover = ({
|
|
|
8620
8751
|
var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
8621
8752
|
const [urlValue, setUrlValue] = useState21("");
|
|
8622
8753
|
const [openInNewTab, setOpenInNewTab] = useState21(false);
|
|
8623
|
-
const toolbarRef =
|
|
8754
|
+
const toolbarRef = useRef32(null);
|
|
8624
8755
|
const linkPopupState = usePopupState11({ variant: "popover" });
|
|
8625
8756
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
8626
8757
|
const editorState = useEditorState({
|
|
8627
8758
|
editor,
|
|
8628
8759
|
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
8629
8760
|
});
|
|
8630
|
-
const formatButtonsList =
|
|
8761
|
+
const formatButtonsList = useMemo19(() => {
|
|
8631
8762
|
const buttons = Object.values(formatButtons);
|
|
8632
8763
|
if (isElementClickable) {
|
|
8633
8764
|
return buttons.filter((button) => button.action !== "link");
|
|
@@ -8667,8 +8798,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8667
8798
|
useEffect20(() => {
|
|
8668
8799
|
editor?.commands?.focus();
|
|
8669
8800
|
}, [editor]);
|
|
8670
|
-
return /* @__PURE__ */
|
|
8671
|
-
|
|
8801
|
+
return /* @__PURE__ */ React125.createElement(
|
|
8802
|
+
Box29,
|
|
8672
8803
|
{
|
|
8673
8804
|
ref: toolbarRef,
|
|
8674
8805
|
sx: {
|
|
@@ -8684,8 +8815,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8684
8815
|
...sx
|
|
8685
8816
|
}
|
|
8686
8817
|
},
|
|
8687
|
-
/* @__PURE__ */
|
|
8688
|
-
/* @__PURE__ */
|
|
8818
|
+
/* @__PURE__ */ React125.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React125.createElement(IconButton12, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
8819
|
+
/* @__PURE__ */ React125.createElement(
|
|
8689
8820
|
ToggleButtonGroup2,
|
|
8690
8821
|
{
|
|
8691
8822
|
value: editorState,
|
|
@@ -8707,7 +8838,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8707
8838
|
}
|
|
8708
8839
|
}
|
|
8709
8840
|
},
|
|
8710
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
8841
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React125.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React125.createElement(
|
|
8711
8842
|
ToggleButton3,
|
|
8712
8843
|
{
|
|
8713
8844
|
value: button.action,
|
|
@@ -8725,7 +8856,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8725
8856
|
button.icon
|
|
8726
8857
|
)))
|
|
8727
8858
|
),
|
|
8728
|
-
/* @__PURE__ */
|
|
8859
|
+
/* @__PURE__ */ React125.createElement(
|
|
8729
8860
|
UrlPopover,
|
|
8730
8861
|
{
|
|
8731
8862
|
popupState: linkPopupState,
|
|
@@ -8748,64 +8879,64 @@ var checkIfElementIsClickable = (elementId) => {
|
|
|
8748
8879
|
};
|
|
8749
8880
|
var toolbarButtons = {
|
|
8750
8881
|
clear: {
|
|
8751
|
-
label:
|
|
8752
|
-
icon: /* @__PURE__ */
|
|
8882
|
+
label: __63("Clear", "elementor"),
|
|
8883
|
+
icon: /* @__PURE__ */ React125.createElement(MinusIcon2, { fontSize: "tiny" }),
|
|
8753
8884
|
action: "clear",
|
|
8754
8885
|
method: (editor) => {
|
|
8755
8886
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
8756
8887
|
}
|
|
8757
8888
|
},
|
|
8758
8889
|
bold: {
|
|
8759
|
-
label:
|
|
8760
|
-
icon: /* @__PURE__ */
|
|
8890
|
+
label: __63("Bold", "elementor"),
|
|
8891
|
+
icon: /* @__PURE__ */ React125.createElement(BoldIcon, { fontSize: "tiny" }),
|
|
8761
8892
|
action: "bold",
|
|
8762
8893
|
method: (editor) => {
|
|
8763
8894
|
editor.chain().focus().toggleBold().run();
|
|
8764
8895
|
}
|
|
8765
8896
|
},
|
|
8766
8897
|
italic: {
|
|
8767
|
-
label:
|
|
8768
|
-
icon: /* @__PURE__ */
|
|
8898
|
+
label: __63("Italic", "elementor"),
|
|
8899
|
+
icon: /* @__PURE__ */ React125.createElement(ItalicIcon, { fontSize: "tiny" }),
|
|
8769
8900
|
action: "italic",
|
|
8770
8901
|
method: (editor) => {
|
|
8771
8902
|
editor.chain().focus().toggleItalic().run();
|
|
8772
8903
|
}
|
|
8773
8904
|
},
|
|
8774
8905
|
underline: {
|
|
8775
|
-
label:
|
|
8776
|
-
icon: /* @__PURE__ */
|
|
8906
|
+
label: __63("Underline", "elementor"),
|
|
8907
|
+
icon: /* @__PURE__ */ React125.createElement(UnderlineIcon, { fontSize: "tiny" }),
|
|
8777
8908
|
action: "underline",
|
|
8778
8909
|
method: (editor) => {
|
|
8779
8910
|
editor.chain().focus().toggleUnderline().run();
|
|
8780
8911
|
}
|
|
8781
8912
|
},
|
|
8782
8913
|
strike: {
|
|
8783
|
-
label:
|
|
8784
|
-
icon: /* @__PURE__ */
|
|
8914
|
+
label: __63("Strikethrough", "elementor"),
|
|
8915
|
+
icon: /* @__PURE__ */ React125.createElement(StrikethroughIcon, { fontSize: "tiny" }),
|
|
8785
8916
|
action: "strike",
|
|
8786
8917
|
method: (editor) => {
|
|
8787
8918
|
editor.chain().focus().toggleStrike().run();
|
|
8788
8919
|
}
|
|
8789
8920
|
},
|
|
8790
8921
|
superscript: {
|
|
8791
|
-
label:
|
|
8792
|
-
icon: /* @__PURE__ */
|
|
8922
|
+
label: __63("Superscript", "elementor"),
|
|
8923
|
+
icon: /* @__PURE__ */ React125.createElement(SuperscriptIcon, { fontSize: "tiny" }),
|
|
8793
8924
|
action: "superscript",
|
|
8794
8925
|
method: (editor) => {
|
|
8795
8926
|
editor.chain().focus().toggleSuperscript().run();
|
|
8796
8927
|
}
|
|
8797
8928
|
},
|
|
8798
8929
|
subscript: {
|
|
8799
|
-
label:
|
|
8800
|
-
icon: /* @__PURE__ */
|
|
8930
|
+
label: __63("Subscript", "elementor"),
|
|
8931
|
+
icon: /* @__PURE__ */ React125.createElement(SubscriptIcon, { fontSize: "tiny" }),
|
|
8801
8932
|
action: "subscript",
|
|
8802
8933
|
method: (editor) => {
|
|
8803
8934
|
editor.chain().focus().toggleSubscript().run();
|
|
8804
8935
|
}
|
|
8805
8936
|
},
|
|
8806
8937
|
link: {
|
|
8807
|
-
label:
|
|
8808
|
-
icon: /* @__PURE__ */
|
|
8938
|
+
label: __63("Link", "elementor"),
|
|
8939
|
+
icon: /* @__PURE__ */ React125.createElement(LinkIcon3, { fontSize: "tiny" }),
|
|
8809
8940
|
action: "link",
|
|
8810
8941
|
method: null
|
|
8811
8942
|
}
|
|
@@ -8814,7 +8945,7 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
|
8814
8945
|
var possibleFormats = Object.keys(formatButtons);
|
|
8815
8946
|
|
|
8816
8947
|
// src/components/size/unstable-size-field.tsx
|
|
8817
|
-
import * as
|
|
8948
|
+
import * as React128 from "react";
|
|
8818
8949
|
import { InputAdornment as InputAdornment6 } from "@elementor/ui";
|
|
8819
8950
|
|
|
8820
8951
|
// src/hooks/use-size-value.ts
|
|
@@ -8857,7 +8988,7 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
8857
8988
|
};
|
|
8858
8989
|
|
|
8859
8990
|
// src/components/size/unit-select.tsx
|
|
8860
|
-
import * as
|
|
8991
|
+
import * as React126 from "react";
|
|
8861
8992
|
import { useId as useId4 } from "react";
|
|
8862
8993
|
import { MenuListItem as MenuListItem8 } from "@elementor/editor-ui";
|
|
8863
8994
|
import { bindMenu as bindMenu3, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu4, styled as styled12, usePopupState as usePopupState12 } from "@elementor/ui";
|
|
@@ -8875,7 +9006,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
8875
9006
|
onClick(options[index]);
|
|
8876
9007
|
popupState.close();
|
|
8877
9008
|
};
|
|
8878
|
-
return /* @__PURE__ */
|
|
9009
|
+
return /* @__PURE__ */ React126.createElement(React126.Fragment, null, /* @__PURE__ */ React126.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React126.createElement(Menu4, { MenuListProps: { dense: true }, ...bindMenu3(popupState) }, options.map((option, index) => /* @__PURE__ */ React126.createElement(
|
|
8879
9010
|
MenuListItem8,
|
|
8880
9011
|
{
|
|
8881
9012
|
key: option,
|
|
@@ -8904,11 +9035,11 @@ var StyledButton3 = styled12(Button7, {
|
|
|
8904
9035
|
}));
|
|
8905
9036
|
|
|
8906
9037
|
// src/components/size/unstable-size-input.tsx
|
|
8907
|
-
import * as
|
|
9038
|
+
import * as React127 from "react";
|
|
8908
9039
|
import { forwardRef as forwardRef13 } from "react";
|
|
8909
9040
|
var UnstableSizeInput = forwardRef13(
|
|
8910
9041
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
8911
|
-
return /* @__PURE__ */
|
|
9042
|
+
return /* @__PURE__ */ React127.createElement(
|
|
8912
9043
|
NumberInput,
|
|
8913
9044
|
{
|
|
8914
9045
|
ref,
|
|
@@ -8946,7 +9077,7 @@ var UnstableSizeField = ({
|
|
|
8946
9077
|
const shouldHighlightUnit2 = () => {
|
|
8947
9078
|
return hasValue(size);
|
|
8948
9079
|
};
|
|
8949
|
-
return /* @__PURE__ */
|
|
9080
|
+
return /* @__PURE__ */ React128.createElement(
|
|
8950
9081
|
UnstableSizeInput,
|
|
8951
9082
|
{
|
|
8952
9083
|
type: "number",
|
|
@@ -8955,8 +9086,8 @@ var UnstableSizeField = ({
|
|
|
8955
9086
|
onChange: (event) => setSize(event.target.value),
|
|
8956
9087
|
InputProps: {
|
|
8957
9088
|
...InputProps,
|
|
8958
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
8959
|
-
endAdornment: /* @__PURE__ */
|
|
9089
|
+
startAdornment: startIcon && /* @__PURE__ */ React128.createElement(InputAdornment6, { position: "start" }, startIcon),
|
|
9090
|
+
endAdornment: /* @__PURE__ */ React128.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React128.createElement(
|
|
8960
9091
|
UnitSelect,
|
|
8961
9092
|
{
|
|
8962
9093
|
options: units2,
|
|
@@ -8974,7 +9105,7 @@ var hasValue = (value) => {
|
|
|
8974
9105
|
};
|
|
8975
9106
|
|
|
8976
9107
|
// src/hooks/use-font-families.ts
|
|
8977
|
-
import { useMemo as
|
|
9108
|
+
import { useMemo as useMemo20 } from "react";
|
|
8978
9109
|
import { getElementorConfig } from "@elementor/editor-v1-adapters";
|
|
8979
9110
|
var getFontControlConfig = () => {
|
|
8980
9111
|
const { controls } = getElementorConfig();
|
|
@@ -8982,7 +9113,7 @@ var getFontControlConfig = () => {
|
|
|
8982
9113
|
};
|
|
8983
9114
|
var useFontFamilies = () => {
|
|
8984
9115
|
const { groups, options } = getFontControlConfig();
|
|
8985
|
-
return
|
|
9116
|
+
return useMemo20(() => {
|
|
8986
9117
|
if (!groups || !options) {
|
|
8987
9118
|
return [];
|
|
8988
9119
|
}
|
|
@@ -9048,6 +9179,7 @@ export {
|
|
|
9048
9179
|
PropProvider,
|
|
9049
9180
|
QueryChipsControl,
|
|
9050
9181
|
QueryControl,
|
|
9182
|
+
QueryFilterRepeaterControl,
|
|
9051
9183
|
RepeatableControl,
|
|
9052
9184
|
Repeater3 as Repeater,
|
|
9053
9185
|
SelectControl,
|