@elementor/editor-controls 4.2.0-855 → 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.js
CHANGED
|
@@ -73,6 +73,7 @@ __export(index_exports, {
|
|
|
73
73
|
PropProvider: () => PropProvider,
|
|
74
74
|
QueryChipsControl: () => QueryChipsControl,
|
|
75
75
|
QueryControl: () => QueryControl,
|
|
76
|
+
QueryFilterRepeaterControl: () => QueryFilterRepeaterControl,
|
|
76
77
|
RepeatableControl: () => RepeatableControl,
|
|
77
78
|
Repeater: () => Repeater3,
|
|
78
79
|
SelectControl: () => SelectControl,
|
|
@@ -4904,50 +4905,177 @@ function extractChips(value) {
|
|
|
4904
4905
|
return value.map((item) => extractFlatOptionFromQueryValue(item?.value)).filter((chip) => chip !== null);
|
|
4905
4906
|
}
|
|
4906
4907
|
|
|
4907
|
-
// src/controls/
|
|
4908
|
+
// src/controls/query-filter-repeater-control.tsx
|
|
4908
4909
|
var React77 = __toESM(require("react"));
|
|
4909
4910
|
var import_react45 = require("react");
|
|
4910
4911
|
var import_editor_props31 = require("@elementor/editor-props");
|
|
4911
|
-
var import_editor_responsive5 = require("@elementor/editor-responsive");
|
|
4912
4912
|
var import_icons18 = require("@elementor/icons");
|
|
4913
4913
|
var import_ui60 = require("@elementor/ui");
|
|
4914
4914
|
var import_i18n28 = require("@wordpress/i18n");
|
|
4915
|
+
var QueryFilterRepeaterControl = createControl(
|
|
4916
|
+
({
|
|
4917
|
+
allowedKeys,
|
|
4918
|
+
keyConfig,
|
|
4919
|
+
label = (0, import_i18n28.__)("Filter", "elementor"),
|
|
4920
|
+
chipsPlaceholder
|
|
4921
|
+
}) => {
|
|
4922
|
+
const { propType, value, setValue } = useBoundProp(import_editor_props31.queryFilterArrayPropTypeUtil);
|
|
4923
|
+
const usedKeys = (0, import_react45.useMemo)(() => getUsedKeys(value ?? []), [value]);
|
|
4924
|
+
const nextAvailableKey = (0, import_react45.useMemo)(
|
|
4925
|
+
() => allowedKeys.find((key) => !usedKeys.has(key)) ?? null,
|
|
4926
|
+
[allowedKeys, usedKeys]
|
|
4927
|
+
);
|
|
4928
|
+
const getKeySelectOptions = (0, import_react45.useMemo)(
|
|
4929
|
+
() => (currentKey) => allowedKeys.map((itemKey) => ({
|
|
4930
|
+
value: itemKey,
|
|
4931
|
+
label: keyConfig[itemKey]?.label ?? itemKey,
|
|
4932
|
+
disabled: itemKey !== currentKey && usedKeys.has(itemKey)
|
|
4933
|
+
})),
|
|
4934
|
+
[allowedKeys, keyConfig, usedKeys]
|
|
4935
|
+
);
|
|
4936
|
+
const initialFallback = (0, import_react45.useMemo)(() => createItemForKey(allowedKeys[0] ?? ""), [allowedKeys]);
|
|
4937
|
+
return /* @__PURE__ */ React77.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React77.createElement(ControlRepeater, { initial: initialFallback, propTypeUtil: import_editor_props31.queryFilterArrayPropTypeUtil }, /* @__PURE__ */ React77.createElement(RepeaterHeader, { label }, /* @__PURE__ */ React77.createElement(AddFilterItemAction, { nextAvailableKey, ariaLabel: label })), /* @__PURE__ */ React77.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React77.createElement(
|
|
4938
|
+
Item,
|
|
4939
|
+
{
|
|
4940
|
+
Icon: EmptyIcon,
|
|
4941
|
+
actions: /* @__PURE__ */ React77.createElement(RemoveItemAction, null),
|
|
4942
|
+
Label: ({ value: itemValue }) => /* @__PURE__ */ React77.createElement(ItemLabel2, { value: itemValue, keyConfig })
|
|
4943
|
+
}
|
|
4944
|
+
)), /* @__PURE__ */ React77.createElement(EditItemPopover, null, /* @__PURE__ */ React77.createElement(
|
|
4945
|
+
ItemContent,
|
|
4946
|
+
{
|
|
4947
|
+
keyConfig,
|
|
4948
|
+
getKeySelectOptions,
|
|
4949
|
+
chipsPlaceholder
|
|
4950
|
+
}
|
|
4951
|
+
))));
|
|
4952
|
+
}
|
|
4953
|
+
);
|
|
4954
|
+
var AddFilterItemAction = ({
|
|
4955
|
+
nextAvailableKey,
|
|
4956
|
+
ariaLabel
|
|
4957
|
+
}) => {
|
|
4958
|
+
const { addItem } = useRepeaterContext();
|
|
4959
|
+
const disabled = nextAvailableKey === null;
|
|
4960
|
+
const onClick = (ev) => {
|
|
4961
|
+
if (!nextAvailableKey) {
|
|
4962
|
+
return;
|
|
4963
|
+
}
|
|
4964
|
+
addItem(ev, { item: createItemForKey(nextAvailableKey), index: 0 });
|
|
4965
|
+
};
|
|
4966
|
+
return /* @__PURE__ */ React77.createElement(import_ui60.Box, { component: "span", sx: { cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React77.createElement(
|
|
4967
|
+
import_ui60.IconButton,
|
|
4968
|
+
{
|
|
4969
|
+
size: "tiny",
|
|
4970
|
+
disabled,
|
|
4971
|
+
onClick,
|
|
4972
|
+
"aria-label": (0, import_i18n28.sprintf)((0, import_i18n28.__)("Add %s item", "elementor"), ariaLabel.toLowerCase())
|
|
4973
|
+
},
|
|
4974
|
+
/* @__PURE__ */ React77.createElement(import_icons18.PlusIcon, { fontSize: "tiny" })
|
|
4975
|
+
));
|
|
4976
|
+
};
|
|
4977
|
+
var EmptyIcon = () => null;
|
|
4978
|
+
var ItemLabel2 = ({ value, keyConfig }) => {
|
|
4979
|
+
const itemKey = import_editor_props31.stringPropTypeUtil.extract(value?.value?.key);
|
|
4980
|
+
const label = itemKey && keyConfig[itemKey]?.label || (0, import_i18n28.__)("Item", "elementor");
|
|
4981
|
+
const chipLabels = extractChipLabels(value?.value?.values);
|
|
4982
|
+
const suffix = chipLabels.length > 0 ? `: ${chipLabels.join(", ")}` : "";
|
|
4983
|
+
return /* @__PURE__ */ React77.createElement(import_ui60.Box, { component: "span" }, label, suffix);
|
|
4984
|
+
};
|
|
4985
|
+
function extractChipLabels(chipsProp) {
|
|
4986
|
+
const chips = chipsProp?.value ?? [];
|
|
4987
|
+
return chips.map((chip) => import_editor_props31.stringPropTypeUtil.extract(chip?.value?.label)).filter((label) => !!label);
|
|
4988
|
+
}
|
|
4989
|
+
var ItemContent = ({
|
|
4990
|
+
keyConfig,
|
|
4991
|
+
getKeySelectOptions,
|
|
4992
|
+
chipsPlaceholder
|
|
4993
|
+
}) => {
|
|
4994
|
+
const propContext = useBoundProp(import_editor_props31.queryFilterPropTypeUtil);
|
|
4995
|
+
const valuesByKeyRef = (0, import_react45.useRef)({});
|
|
4996
|
+
const handleValueChange = (nextValue, options, meta) => {
|
|
4997
|
+
if (meta?.bind !== "key") {
|
|
4998
|
+
propContext.setValue(nextValue, options, meta);
|
|
4999
|
+
return;
|
|
5000
|
+
}
|
|
5001
|
+
const previousKey = import_editor_props31.stringPropTypeUtil.extract(propContext.value?.key);
|
|
5002
|
+
const newKey = import_editor_props31.stringPropTypeUtil.extract(nextValue?.key);
|
|
5003
|
+
if (previousKey) {
|
|
5004
|
+
valuesByKeyRef.current[previousKey] = propContext.value?.values ?? null;
|
|
5005
|
+
}
|
|
5006
|
+
const restoredValues = newKey ? valuesByKeyRef.current[newKey] ?? null : null;
|
|
5007
|
+
propContext.setValue({ ...nextValue, values: restoredValues }, options, meta);
|
|
5008
|
+
};
|
|
5009
|
+
const currentKey = import_editor_props31.stringPropTypeUtil.extract(propContext.value?.key);
|
|
5010
|
+
const currentKeyConfig = currentKey ? keyConfig[currentKey] : void 0;
|
|
5011
|
+
const hasValuesField = !!currentKeyConfig?.queryEndpoint;
|
|
5012
|
+
const keySelectOptions = (0, import_react45.useMemo)(() => getKeySelectOptions(currentKey), [getKeySelectOptions, currentKey]);
|
|
5013
|
+
return /* @__PURE__ */ React77.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React77.createElement(PopoverGridContainer, { flexWrap: "wrap" }, /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, (0, import_i18n28.__)("Type", "elementor"))), /* @__PURE__ */ React77.createElement(import_ui60.Grid, { 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(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(ControlFormLabel, null, currentKeyConfig.label)), /* @__PURE__ */ React77.createElement(import_ui60.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "values" }, /* @__PURE__ */ React77.createElement(
|
|
5014
|
+
QueryChipsControl,
|
|
5015
|
+
{
|
|
5016
|
+
queryOptions: {
|
|
5017
|
+
url: currentKeyConfig.queryEndpoint.url,
|
|
5018
|
+
params: currentKeyConfig.queryEndpoint.params ?? {}
|
|
5019
|
+
},
|
|
5020
|
+
placeholder: currentKeyConfig.chipsPlaceholder ?? chipsPlaceholder
|
|
5021
|
+
}
|
|
5022
|
+
))))));
|
|
5023
|
+
};
|
|
5024
|
+
function createItemForKey(key) {
|
|
5025
|
+
return import_editor_props31.queryFilterPropTypeUtil.create({
|
|
5026
|
+
key: import_editor_props31.stringPropTypeUtil.create(key),
|
|
5027
|
+
values: null
|
|
5028
|
+
});
|
|
5029
|
+
}
|
|
5030
|
+
function getUsedKeys(items2) {
|
|
5031
|
+
const keys = items2.map((item) => import_editor_props31.stringPropTypeUtil.extract(item?.value?.key)).filter((key) => !!key);
|
|
5032
|
+
return new Set(keys);
|
|
5033
|
+
}
|
|
5034
|
+
|
|
5035
|
+
// src/controls/gap-control.tsx
|
|
5036
|
+
var React78 = __toESM(require("react"));
|
|
5037
|
+
var import_react46 = require("react");
|
|
5038
|
+
var import_editor_props32 = require("@elementor/editor-props");
|
|
5039
|
+
var import_editor_responsive5 = require("@elementor/editor-responsive");
|
|
5040
|
+
var import_icons19 = require("@elementor/icons");
|
|
5041
|
+
var import_ui61 = require("@elementor/ui");
|
|
5042
|
+
var import_i18n29 = require("@wordpress/i18n");
|
|
4915
5043
|
var GapControl = ({ label }) => {
|
|
4916
|
-
const stackRef = (0,
|
|
4917
|
-
const { disabled: sizeDisabled } = useBoundProp(
|
|
5044
|
+
const stackRef = (0, import_react46.useRef)(null);
|
|
5045
|
+
const { disabled: sizeDisabled } = useBoundProp(import_editor_props32.sizePropTypeUtil);
|
|
4918
5046
|
const {
|
|
4919
5047
|
value: directionValue,
|
|
4920
5048
|
setValue: setDirectionValue,
|
|
4921
5049
|
propType,
|
|
4922
5050
|
placeholder: directionPlaceholder,
|
|
4923
5051
|
disabled: directionDisabled
|
|
4924
|
-
} = useBoundProp(
|
|
5052
|
+
} = useBoundProp(import_editor_props32.layoutDirectionPropTypeUtil);
|
|
4925
5053
|
const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
|
|
4926
5054
|
const inferIsLinked = () => {
|
|
4927
|
-
if (
|
|
5055
|
+
if (import_editor_props32.layoutDirectionPropTypeUtil.isValid(masterValue)) {
|
|
4928
5056
|
return false;
|
|
4929
5057
|
}
|
|
4930
|
-
if (!masterValue &&
|
|
5058
|
+
if (!masterValue && import_editor_props32.layoutDirectionPropTypeUtil.isValid(masterPlaceholder)) {
|
|
4931
5059
|
return false;
|
|
4932
5060
|
}
|
|
4933
5061
|
return true;
|
|
4934
5062
|
};
|
|
4935
|
-
const [isLinked, setIsLinked] = (0,
|
|
4936
|
-
const isCurrentlyDirection =
|
|
5063
|
+
const [isLinked, setIsLinked] = (0, import_react46.useState)(() => inferIsLinked());
|
|
5064
|
+
const isCurrentlyDirection = import_editor_props32.layoutDirectionPropTypeUtil.isValid(masterValue ?? masterPlaceholder);
|
|
4937
5065
|
const activeBreakpoint = (0, import_editor_responsive5.useActiveBreakpoint)();
|
|
4938
|
-
(0,
|
|
5066
|
+
(0, import_react46.useLayoutEffect)(() => {
|
|
4939
5067
|
setIsLinked(inferIsLinked());
|
|
4940
5068
|
}, [activeBreakpoint, isCurrentlyDirection]);
|
|
4941
5069
|
const onLinkToggle = () => {
|
|
4942
5070
|
setIsLinked((prev) => !prev);
|
|
4943
|
-
if (!
|
|
5071
|
+
if (!import_editor_props32.layoutDirectionPropTypeUtil.isValid(masterValue)) {
|
|
4944
5072
|
const currentValue2 = masterValue ? masterValue : null;
|
|
4945
5073
|
if (!currentValue2) {
|
|
4946
5074
|
setMasterValue(null);
|
|
4947
5075
|
return;
|
|
4948
5076
|
}
|
|
4949
5077
|
setMasterValue(
|
|
4950
|
-
|
|
5078
|
+
import_editor_props32.layoutDirectionPropTypeUtil.create({
|
|
4951
5079
|
row: currentValue2,
|
|
4952
5080
|
column: currentValue2
|
|
4953
5081
|
})
|
|
@@ -4958,9 +5086,9 @@ var GapControl = ({ label }) => {
|
|
|
4958
5086
|
setMasterValue(currentValue);
|
|
4959
5087
|
};
|
|
4960
5088
|
const tooltipLabel = label.toLowerCase();
|
|
4961
|
-
const LinkedIcon = isLinked ?
|
|
4962
|
-
const linkedLabel = (0,
|
|
4963
|
-
const unlinkedLabel = (0,
|
|
5089
|
+
const LinkedIcon = isLinked ? import_icons19.LinkIcon : import_icons19.DetachIcon;
|
|
5090
|
+
const linkedLabel = (0, import_i18n29.__)("Link %s", "elementor").replace("%s", tooltipLabel);
|
|
5091
|
+
const unlinkedLabel = (0, import_i18n29.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
|
|
4964
5092
|
const disabled = sizeDisabled || directionDisabled;
|
|
4965
5093
|
const propProviderProps = {
|
|
4966
5094
|
propType,
|
|
@@ -4976,11 +5104,11 @@ var GapControl = ({ label }) => {
|
|
|
4976
5104
|
const getEffectivePlaceholder = (bind) => {
|
|
4977
5105
|
if (isLinked) {
|
|
4978
5106
|
const linkedPlaceholder = directionPlaceholder?.column ?? directionPlaceholder?.row;
|
|
4979
|
-
return
|
|
5107
|
+
return import_editor_props32.sizePropTypeUtil.extract(linkedPlaceholder);
|
|
4980
5108
|
}
|
|
4981
|
-
return
|
|
5109
|
+
return import_editor_props32.sizePropTypeUtil.extract(directionPlaceholder?.[bind]);
|
|
4982
5110
|
};
|
|
4983
|
-
return /* @__PURE__ */
|
|
5111
|
+
return /* @__PURE__ */ React78.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React78.createElement(import_ui61.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React78.createElement(ControlLabel, null, label), /* @__PURE__ */ React78.createElement(import_ui61.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React78.createElement(
|
|
4984
5112
|
StyledToggleButton,
|
|
4985
5113
|
{
|
|
4986
5114
|
"aria-label": isLinked ? unlinkedLabel : linkedLabel,
|
|
@@ -4992,21 +5120,21 @@ var GapControl = ({ label }) => {
|
|
|
4992
5120
|
disabled,
|
|
4993
5121
|
isPlaceholder: hasPlaceholders
|
|
4994
5122
|
},
|
|
4995
|
-
/* @__PURE__ */
|
|
4996
|
-
))), /* @__PURE__ */
|
|
5123
|
+
/* @__PURE__ */ React78.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
5124
|
+
))), /* @__PURE__ */ React78.createElement(import_ui61.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React78.createElement(import_ui61.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React78.createElement(import_ui61.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(ControlFormLabel, null, (0, import_i18n29.__)("Column", "elementor"))), /* @__PURE__ */ React78.createElement(import_ui61.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(
|
|
4997
5125
|
Control4,
|
|
4998
5126
|
{
|
|
4999
5127
|
bind: "column",
|
|
5000
|
-
ariaLabel: (0,
|
|
5128
|
+
ariaLabel: (0, import_i18n29.__)("Column gap", "elementor"),
|
|
5001
5129
|
isLinked,
|
|
5002
5130
|
anchorRef: stackRef,
|
|
5003
5131
|
placeholder: getEffectivePlaceholder("column") ?? void 0
|
|
5004
5132
|
}
|
|
5005
|
-
))), /* @__PURE__ */
|
|
5133
|
+
))), /* @__PURE__ */ React78.createElement(import_ui61.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React78.createElement(import_ui61.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(ControlFormLabel, null, (0, import_i18n29.__)("Row", "elementor"))), /* @__PURE__ */ React78.createElement(import_ui61.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(
|
|
5006
5134
|
Control4,
|
|
5007
5135
|
{
|
|
5008
5136
|
bind: "row",
|
|
5009
|
-
ariaLabel: (0,
|
|
5137
|
+
ariaLabel: (0, import_i18n29.__)("Row gap", "elementor"),
|
|
5010
5138
|
isLinked,
|
|
5011
5139
|
anchorRef: stackRef,
|
|
5012
5140
|
placeholder: getEffectivePlaceholder("row") ?? void 0
|
|
@@ -5021,21 +5149,21 @@ var Control4 = ({
|
|
|
5021
5149
|
placeholder
|
|
5022
5150
|
}) => {
|
|
5023
5151
|
if (isLinked) {
|
|
5024
|
-
return /* @__PURE__ */
|
|
5152
|
+
return /* @__PURE__ */ React78.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel });
|
|
5025
5153
|
}
|
|
5026
|
-
return /* @__PURE__ */
|
|
5154
|
+
return /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React78.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel }));
|
|
5027
5155
|
};
|
|
5028
5156
|
|
|
5029
5157
|
// src/controls/aspect-ratio-control.tsx
|
|
5030
|
-
var
|
|
5031
|
-
var
|
|
5032
|
-
var
|
|
5158
|
+
var React79 = __toESM(require("react"));
|
|
5159
|
+
var import_react47 = require("react");
|
|
5160
|
+
var import_editor_props33 = require("@elementor/editor-props");
|
|
5033
5161
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
5034
|
-
var
|
|
5035
|
-
var
|
|
5036
|
-
var
|
|
5162
|
+
var import_icons20 = require("@elementor/icons");
|
|
5163
|
+
var import_ui62 = require("@elementor/ui");
|
|
5164
|
+
var import_i18n30 = require("@wordpress/i18n");
|
|
5037
5165
|
var RATIO_OPTIONS = [
|
|
5038
|
-
{ label: (0,
|
|
5166
|
+
{ label: (0, import_i18n30.__)("Auto", "elementor"), value: "auto" },
|
|
5039
5167
|
{ label: "1/1", value: "1/1" },
|
|
5040
5168
|
{ label: "4/3", value: "4/3" },
|
|
5041
5169
|
{ label: "3/4", value: "3/4" },
|
|
@@ -5051,17 +5179,17 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5051
5179
|
setValue: setAspectRatioValue,
|
|
5052
5180
|
disabled,
|
|
5053
5181
|
placeholder: externalPlaceholder
|
|
5054
|
-
} = useBoundProp(
|
|
5182
|
+
} = useBoundProp(import_editor_props33.stringPropTypeUtil);
|
|
5055
5183
|
const aspectRatioValue = currentPropValue ?? externalPlaceholder;
|
|
5056
5184
|
const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
|
|
5057
5185
|
const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
|
|
5058
|
-
const [isCustom, setIsCustom] = (0,
|
|
5059
|
-
const [customWidth, setCustomWidth] = (0,
|
|
5060
|
-
const [customHeight, setCustomHeight] = (0,
|
|
5061
|
-
const [selectedValue, setSelectedValue] = (0,
|
|
5186
|
+
const [isCustom, setIsCustom] = (0, import_react47.useState)(isCustomSelected);
|
|
5187
|
+
const [customWidth, setCustomWidth] = (0, import_react47.useState)(initialWidth);
|
|
5188
|
+
const [customHeight, setCustomHeight] = (0, import_react47.useState)(initialHeight);
|
|
5189
|
+
const [selectedValue, setSelectedValue] = (0, import_react47.useState)(
|
|
5062
5190
|
isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
|
|
5063
5191
|
);
|
|
5064
|
-
(0,
|
|
5192
|
+
(0, import_react47.useEffect)(() => {
|
|
5065
5193
|
const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
|
|
5066
5194
|
if (isCustomValue) {
|
|
5067
5195
|
const [width, height] = aspectRatioValue.split("/");
|
|
@@ -5102,8 +5230,8 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5102
5230
|
};
|
|
5103
5231
|
const lookup = currentPropValue ?? externalPlaceholder;
|
|
5104
5232
|
const selectedOption = RATIO_OPTIONS.find((option) => option.value === lookup);
|
|
5105
|
-
return /* @__PURE__ */
|
|
5106
|
-
|
|
5233
|
+
return /* @__PURE__ */ React79.createElement(ControlActions, null, /* @__PURE__ */ React79.createElement(import_ui62.Stack, { direction: "column", gap: 2 }, /* @__PURE__ */ React79.createElement(import_ui62.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React79.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ControlLabel, null, label)), /* @__PURE__ */ React79.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(
|
|
5234
|
+
import_ui62.Select,
|
|
5107
5235
|
{
|
|
5108
5236
|
size: "tiny",
|
|
5109
5237
|
displayEmpty: true,
|
|
@@ -5114,11 +5242,11 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5114
5242
|
renderValue: isCustomSelected ? void 0 : () => selectedOption?.label,
|
|
5115
5243
|
fullWidth: true
|
|
5116
5244
|
},
|
|
5117
|
-
[...RATIO_OPTIONS, { label: (0,
|
|
5118
|
-
({ label: optionLabel, ...props }) => /* @__PURE__ */
|
|
5245
|
+
[...RATIO_OPTIONS, { label: (0, import_i18n30.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
|
|
5246
|
+
({ label: optionLabel, ...props }) => /* @__PURE__ */ React79.createElement(import_editor_ui10.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
|
|
5119
5247
|
)
|
|
5120
|
-
))), isCustom && /* @__PURE__ */
|
|
5121
|
-
|
|
5248
|
+
))), isCustom && /* @__PURE__ */ React79.createElement(import_ui62.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React79.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(
|
|
5249
|
+
import_ui62.TextField,
|
|
5122
5250
|
{
|
|
5123
5251
|
size: "tiny",
|
|
5124
5252
|
type: "number",
|
|
@@ -5127,11 +5255,11 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5127
5255
|
value: customWidth,
|
|
5128
5256
|
onChange: handleCustomWidthChange,
|
|
5129
5257
|
InputProps: {
|
|
5130
|
-
startAdornment: /* @__PURE__ */
|
|
5258
|
+
startAdornment: /* @__PURE__ */ React79.createElement(import_icons20.ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
|
|
5131
5259
|
}
|
|
5132
5260
|
}
|
|
5133
|
-
)), /* @__PURE__ */
|
|
5134
|
-
|
|
5261
|
+
)), /* @__PURE__ */ React79.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(
|
|
5262
|
+
import_ui62.TextField,
|
|
5135
5263
|
{
|
|
5136
5264
|
size: "tiny",
|
|
5137
5265
|
type: "number",
|
|
@@ -5140,41 +5268,41 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5140
5268
|
value: customHeight,
|
|
5141
5269
|
onChange: handleCustomHeightChange,
|
|
5142
5270
|
InputProps: {
|
|
5143
|
-
startAdornment: /* @__PURE__ */
|
|
5271
|
+
startAdornment: /* @__PURE__ */ React79.createElement(import_icons20.ArrowsMoveVerticalIcon, { fontSize: "tiny" })
|
|
5144
5272
|
}
|
|
5145
5273
|
}
|
|
5146
5274
|
)))));
|
|
5147
5275
|
});
|
|
5148
5276
|
|
|
5149
5277
|
// src/controls/svg-media-control.tsx
|
|
5150
|
-
var
|
|
5151
|
-
var
|
|
5278
|
+
var React81 = __toESM(require("react"));
|
|
5279
|
+
var import_react49 = require("react");
|
|
5152
5280
|
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
5153
|
-
var
|
|
5154
|
-
var
|
|
5155
|
-
var
|
|
5281
|
+
var import_editor_props34 = require("@elementor/editor-props");
|
|
5282
|
+
var import_icons21 = require("@elementor/icons");
|
|
5283
|
+
var import_ui64 = require("@elementor/ui");
|
|
5156
5284
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
5157
|
-
var
|
|
5285
|
+
var import_i18n32 = require("@wordpress/i18n");
|
|
5158
5286
|
|
|
5159
5287
|
// src/components/enable-unfiltered-modal.tsx
|
|
5160
|
-
var
|
|
5161
|
-
var
|
|
5162
|
-
var
|
|
5163
|
-
var
|
|
5164
|
-
var ADMIN_TITLE_TEXT = (0,
|
|
5165
|
-
var ADMIN_CONTENT_TEXT = (0,
|
|
5288
|
+
var React80 = __toESM(require("react"));
|
|
5289
|
+
var import_react48 = require("react");
|
|
5290
|
+
var import_ui63 = require("@elementor/ui");
|
|
5291
|
+
var import_i18n31 = require("@wordpress/i18n");
|
|
5292
|
+
var ADMIN_TITLE_TEXT = (0, import_i18n31.__)("Enable Unfiltered Uploads", "elementor");
|
|
5293
|
+
var ADMIN_CONTENT_TEXT = (0, import_i18n31.__)(
|
|
5166
5294
|
"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.",
|
|
5167
5295
|
"elementor"
|
|
5168
5296
|
);
|
|
5169
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT1 = (0,
|
|
5170
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0,
|
|
5297
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT1 = (0, import_i18n31.__)("Failed to enable unfiltered files upload.", "elementor");
|
|
5298
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n31.__)(
|
|
5171
5299
|
"You can try again, if the problem persists, please contact support.",
|
|
5172
5300
|
"elementor"
|
|
5173
5301
|
);
|
|
5174
5302
|
var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
|
|
5175
5303
|
var EnableUnfilteredModal = (props) => {
|
|
5176
5304
|
const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
|
|
5177
|
-
const [isError, setIsError] = (0,
|
|
5305
|
+
const [isError, setIsError] = (0, import_react48.useState)(false);
|
|
5178
5306
|
const onClose = (enabled) => {
|
|
5179
5307
|
props.onClose(enabled);
|
|
5180
5308
|
setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
|
|
@@ -5192,10 +5320,10 @@ var EnableUnfilteredModal = (props) => {
|
|
|
5192
5320
|
}
|
|
5193
5321
|
};
|
|
5194
5322
|
const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
|
|
5195
|
-
return /* @__PURE__ */
|
|
5323
|
+
return /* @__PURE__ */ React80.createElement(AdminDialog, { ...dialogProps });
|
|
5196
5324
|
};
|
|
5197
|
-
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */
|
|
5198
|
-
|
|
5325
|
+
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React80.createElement(import_ui63.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React80.createElement(import_ui63.DialogHeader, { logo: false }, /* @__PURE__ */ React80.createElement(import_ui63.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React80.createElement(import_ui63.Divider, null), /* @__PURE__ */ React80.createElement(import_ui63.DialogContent, null, /* @__PURE__ */ React80.createElement(import_ui63.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(import_ui63.DialogActions, null, /* @__PURE__ */ React80.createElement(import_ui63.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n31.__)("Cancel", "elementor")), /* @__PURE__ */ React80.createElement(
|
|
5326
|
+
import_ui63.Button,
|
|
5199
5327
|
{
|
|
5200
5328
|
size: "medium",
|
|
5201
5329
|
onClick: () => handleEnable(),
|
|
@@ -5203,7 +5331,7 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
5203
5331
|
color: "primary",
|
|
5204
5332
|
disabled: isPending
|
|
5205
5333
|
},
|
|
5206
|
-
isPending ? /* @__PURE__ */
|
|
5334
|
+
isPending ? /* @__PURE__ */ React80.createElement(import_ui63.CircularProgress, { size: 24 }) : (0, import_i18n31.__)("Enable", "elementor")
|
|
5207
5335
|
)));
|
|
5208
5336
|
|
|
5209
5337
|
// src/controls/svg-media-control.tsx
|
|
@@ -5211,7 +5339,7 @@ var TILE_SIZE = 8;
|
|
|
5211
5339
|
var TILE_WHITE = "transparent";
|
|
5212
5340
|
var TILE_BLACK = "#c1c1c1";
|
|
5213
5341
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
5214
|
-
var StyledCard = (0,
|
|
5342
|
+
var StyledCard = (0, import_ui64.styled)(import_ui64.Card)`
|
|
5215
5343
|
background-color: white;
|
|
5216
5344
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
5217
5345
|
background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
|
|
@@ -5220,7 +5348,7 @@ var StyledCard = (0, import_ui63.styled)(import_ui63.Card)`
|
|
|
5220
5348
|
${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
|
|
5221
5349
|
border: none;
|
|
5222
5350
|
`;
|
|
5223
|
-
var StyledCardMediaContainer = (0,
|
|
5351
|
+
var StyledCardMediaContainer = (0, import_ui64.styled)(import_ui64.Stack)`
|
|
5224
5352
|
position: relative;
|
|
5225
5353
|
height: 140px;
|
|
5226
5354
|
object-fit: contain;
|
|
@@ -5232,13 +5360,13 @@ var StyledCardMediaContainer = (0, import_ui63.styled)(import_ui63.Stack)`
|
|
|
5232
5360
|
var MODE_BROWSE = { mode: "browse" };
|
|
5233
5361
|
var MODE_UPLOAD = { mode: "upload" };
|
|
5234
5362
|
var SvgMediaControl = createControl(() => {
|
|
5235
|
-
const { value, setValue } = useBoundProp(
|
|
5363
|
+
const { value, setValue } = useBoundProp(import_editor_props34.svgSrcPropTypeUtil);
|
|
5236
5364
|
const id = value?.id;
|
|
5237
5365
|
const url = value?.url;
|
|
5238
5366
|
const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
|
|
5239
5367
|
const src = attachment?.url ?? url?.value ?? null;
|
|
5240
5368
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
5241
|
-
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0,
|
|
5369
|
+
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react49.useState)(false);
|
|
5242
5370
|
const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
|
|
5243
5371
|
const { open } = (0, import_wp_media2.useWpMediaFrame)({
|
|
5244
5372
|
mediaTypes: ["svg"],
|
|
@@ -5250,7 +5378,7 @@ var SvgMediaControl = createControl(() => {
|
|
|
5250
5378
|
$$type: "image-attachment-id",
|
|
5251
5379
|
value: selectedAttachment.id
|
|
5252
5380
|
},
|
|
5253
|
-
url:
|
|
5381
|
+
url: import_editor_props34.urlPropTypeUtil.create(selectedAttachment.url)
|
|
5254
5382
|
});
|
|
5255
5383
|
}
|
|
5256
5384
|
});
|
|
@@ -5268,20 +5396,20 @@ var SvgMediaControl = createControl(() => {
|
|
|
5268
5396
|
}
|
|
5269
5397
|
};
|
|
5270
5398
|
const infotipProps = {
|
|
5271
|
-
title: (0,
|
|
5272
|
-
description: /* @__PURE__ */
|
|
5399
|
+
title: (0, import_i18n32.__)("Sorry, you can't upload that file yet.", "elementor"),
|
|
5400
|
+
description: /* @__PURE__ */ React81.createElement(React81.Fragment, null, (0, import_i18n32.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React81.createElement("br", null), (0, import_i18n32.__)("file uploads.", "elementor")),
|
|
5273
5401
|
isEnabled: !isAdmin
|
|
5274
5402
|
};
|
|
5275
|
-
return /* @__PURE__ */
|
|
5276
|
-
|
|
5403
|
+
return /* @__PURE__ */ React81.createElement(import_ui64.Stack, { 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(import_ui64.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React81.createElement(
|
|
5404
|
+
import_ui64.CardMedia,
|
|
5277
5405
|
{
|
|
5278
5406
|
component: "img",
|
|
5279
5407
|
image: src,
|
|
5280
|
-
alt: (0,
|
|
5408
|
+
alt: (0, import_i18n32.__)("Preview SVG", "elementor"),
|
|
5281
5409
|
sx: { maxHeight: "140px", width: "50px" }
|
|
5282
5410
|
}
|
|
5283
|
-
)), /* @__PURE__ */
|
|
5284
|
-
|
|
5411
|
+
)), /* @__PURE__ */ React81.createElement(
|
|
5412
|
+
import_ui64.CardOverlay,
|
|
5285
5413
|
{
|
|
5286
5414
|
sx: {
|
|
5287
5415
|
"&:hover": {
|
|
@@ -5289,8 +5417,8 @@ var SvgMediaControl = createControl(() => {
|
|
|
5289
5417
|
}
|
|
5290
5418
|
}
|
|
5291
5419
|
},
|
|
5292
|
-
/* @__PURE__ */
|
|
5293
|
-
|
|
5420
|
+
/* @__PURE__ */ React81.createElement(import_ui64.Stack, { gap: 1 }, /* @__PURE__ */ React81.createElement(
|
|
5421
|
+
import_ui64.Button,
|
|
5294
5422
|
{
|
|
5295
5423
|
size: "tiny",
|
|
5296
5424
|
color: "inherit",
|
|
@@ -5298,33 +5426,33 @@ var SvgMediaControl = createControl(() => {
|
|
|
5298
5426
|
onClick: () => handleClick(MODE_BROWSE),
|
|
5299
5427
|
"aria-label": "Select SVG"
|
|
5300
5428
|
},
|
|
5301
|
-
(0,
|
|
5302
|
-
), /* @__PURE__ */
|
|
5303
|
-
|
|
5429
|
+
(0, import_i18n32.__)("Select SVG", "elementor")
|
|
5430
|
+
), /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(import_ui64.ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
|
|
5431
|
+
import_ui64.Button,
|
|
5304
5432
|
{
|
|
5305
5433
|
size: "tiny",
|
|
5306
5434
|
variant: "text",
|
|
5307
5435
|
color: "inherit",
|
|
5308
|
-
startIcon: /* @__PURE__ */
|
|
5436
|
+
startIcon: /* @__PURE__ */ React81.createElement(import_icons21.UploadIcon, null),
|
|
5309
5437
|
disabled: !isAdmin,
|
|
5310
5438
|
onClick: () => isAdmin && handleClick(MODE_UPLOAD),
|
|
5311
5439
|
"aria-label": "Upload SVG"
|
|
5312
5440
|
},
|
|
5313
|
-
(0,
|
|
5441
|
+
(0, import_i18n32.__)("Upload", "elementor")
|
|
5314
5442
|
)))))
|
|
5315
5443
|
))));
|
|
5316
5444
|
});
|
|
5317
5445
|
|
|
5318
5446
|
// src/controls/video-media-control.tsx
|
|
5319
|
-
var
|
|
5320
|
-
var
|
|
5321
|
-
var
|
|
5322
|
-
var
|
|
5447
|
+
var React82 = __toESM(require("react"));
|
|
5448
|
+
var import_editor_props35 = require("@elementor/editor-props");
|
|
5449
|
+
var import_icons22 = require("@elementor/icons");
|
|
5450
|
+
var import_ui65 = require("@elementor/ui");
|
|
5323
5451
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
5324
|
-
var
|
|
5452
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
5325
5453
|
var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
|
|
5326
5454
|
var VideoMediaControl = createControl(() => {
|
|
5327
|
-
const { value, setValue } = useBoundProp(
|
|
5455
|
+
const { value, setValue } = useBoundProp(import_editor_props35.videoSrcPropTypeUtil);
|
|
5328
5456
|
const { id, url } = value ?? {};
|
|
5329
5457
|
const { data: attachment, isFetching } = (0, import_wp_media3.useWpMediaAttachment)(id?.value || null);
|
|
5330
5458
|
const videoUrl = attachment?.url ?? url?.value ?? null;
|
|
@@ -5342,8 +5470,8 @@ var VideoMediaControl = createControl(() => {
|
|
|
5342
5470
|
});
|
|
5343
5471
|
}
|
|
5344
5472
|
});
|
|
5345
|
-
return /* @__PURE__ */
|
|
5346
|
-
|
|
5473
|
+
return /* @__PURE__ */ React82.createElement(ControlActions, null, /* @__PURE__ */ React82.createElement(import_ui65.Card, { variant: "outlined" }, /* @__PURE__ */ React82.createElement(
|
|
5474
|
+
import_ui65.CardMedia,
|
|
5347
5475
|
{
|
|
5348
5476
|
sx: {
|
|
5349
5477
|
height: 140,
|
|
@@ -5357,34 +5485,34 @@ var VideoMediaControl = createControl(() => {
|
|
|
5357
5485
|
alignItems: "center"
|
|
5358
5486
|
}
|
|
5359
5487
|
},
|
|
5360
|
-
/* @__PURE__ */
|
|
5361
|
-
), /* @__PURE__ */
|
|
5362
|
-
|
|
5488
|
+
/* @__PURE__ */ React82.createElement(VideoPreview, { isFetching, videoUrl })
|
|
5489
|
+
), /* @__PURE__ */ React82.createElement(import_ui65.CardOverlay, null, /* @__PURE__ */ React82.createElement(import_ui65.Stack, { gap: 1 }, /* @__PURE__ */ React82.createElement(
|
|
5490
|
+
import_ui65.Button,
|
|
5363
5491
|
{
|
|
5364
5492
|
size: "tiny",
|
|
5365
5493
|
color: "inherit",
|
|
5366
5494
|
variant: "outlined",
|
|
5367
5495
|
onClick: () => open({ mode: "browse" })
|
|
5368
5496
|
},
|
|
5369
|
-
(0,
|
|
5370
|
-
), /* @__PURE__ */
|
|
5371
|
-
|
|
5497
|
+
(0, import_i18n33.__)("Select video", "elementor")
|
|
5498
|
+
), /* @__PURE__ */ React82.createElement(
|
|
5499
|
+
import_ui65.Button,
|
|
5372
5500
|
{
|
|
5373
5501
|
size: "tiny",
|
|
5374
5502
|
variant: "text",
|
|
5375
5503
|
color: "inherit",
|
|
5376
|
-
startIcon: /* @__PURE__ */
|
|
5504
|
+
startIcon: /* @__PURE__ */ React82.createElement(import_icons22.UploadIcon, null),
|
|
5377
5505
|
onClick: () => open({ mode: "upload" })
|
|
5378
5506
|
},
|
|
5379
|
-
(0,
|
|
5507
|
+
(0, import_i18n33.__)("Upload", "elementor")
|
|
5380
5508
|
)))));
|
|
5381
5509
|
});
|
|
5382
5510
|
var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
5383
5511
|
if (isFetching) {
|
|
5384
|
-
return /* @__PURE__ */
|
|
5512
|
+
return /* @__PURE__ */ React82.createElement(import_ui65.CircularProgress, null);
|
|
5385
5513
|
}
|
|
5386
5514
|
if (videoUrl) {
|
|
5387
|
-
return /* @__PURE__ */
|
|
5515
|
+
return /* @__PURE__ */ React82.createElement(
|
|
5388
5516
|
"video",
|
|
5389
5517
|
{
|
|
5390
5518
|
src: videoUrl,
|
|
@@ -5399,48 +5527,48 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
|
5399
5527
|
}
|
|
5400
5528
|
);
|
|
5401
5529
|
}
|
|
5402
|
-
return /* @__PURE__ */
|
|
5530
|
+
return /* @__PURE__ */ React82.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
|
|
5403
5531
|
};
|
|
5404
5532
|
|
|
5405
5533
|
// src/controls/background-control/background-control.tsx
|
|
5534
|
+
var React89 = __toESM(require("react"));
|
|
5535
|
+
var import_editor_props41 = require("@elementor/editor-props");
|
|
5536
|
+
var import_ui73 = require("@elementor/ui");
|
|
5537
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
5538
|
+
|
|
5539
|
+
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
5406
5540
|
var React88 = __toESM(require("react"));
|
|
5407
5541
|
var import_editor_props40 = require("@elementor/editor-props");
|
|
5408
5542
|
var import_ui72 = require("@elementor/ui");
|
|
5409
|
-
var import_i18n38 = require("@wordpress/i18n");
|
|
5410
|
-
|
|
5411
|
-
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
5412
|
-
var React87 = __toESM(require("react"));
|
|
5413
|
-
var import_editor_props39 = require("@elementor/editor-props");
|
|
5414
|
-
var import_ui71 = require("@elementor/ui");
|
|
5415
5543
|
var import_wp_media4 = require("@elementor/wp-media");
|
|
5416
|
-
var
|
|
5544
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
5417
5545
|
|
|
5418
5546
|
// src/env.ts
|
|
5419
5547
|
var import_env = require("@elementor/env");
|
|
5420
5548
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
5421
5549
|
|
|
5422
5550
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
5423
|
-
var
|
|
5424
|
-
var
|
|
5425
|
-
var
|
|
5551
|
+
var React83 = __toESM(require("react"));
|
|
5552
|
+
var import_editor_props36 = require("@elementor/editor-props");
|
|
5553
|
+
var import_ui66 = require("@elementor/ui");
|
|
5426
5554
|
var BackgroundGradientColorControl = createControl(() => {
|
|
5427
|
-
const { value, setValue } = useBoundProp(
|
|
5555
|
+
const { value, setValue } = useBoundProp(import_editor_props36.backgroundGradientOverlayPropTypeUtil);
|
|
5428
5556
|
const handleChange = (newValue) => {
|
|
5429
5557
|
const transformedValue = createTransformableValue(newValue);
|
|
5430
5558
|
if (transformedValue.positions) {
|
|
5431
|
-
transformedValue.positions =
|
|
5559
|
+
transformedValue.positions = import_editor_props36.stringPropTypeUtil.create(newValue.positions.join(" "));
|
|
5432
5560
|
}
|
|
5433
5561
|
setValue(transformedValue);
|
|
5434
5562
|
};
|
|
5435
5563
|
const createTransformableValue = (newValue) => ({
|
|
5436
5564
|
...newValue,
|
|
5437
|
-
type:
|
|
5438
|
-
angle:
|
|
5439
|
-
stops:
|
|
5565
|
+
type: import_editor_props36.stringPropTypeUtil.create(newValue.type),
|
|
5566
|
+
angle: import_editor_props36.numberPropTypeUtil.create(newValue.angle),
|
|
5567
|
+
stops: import_editor_props36.gradientColorStopPropTypeUtil.create(
|
|
5440
5568
|
newValue.stops.map(
|
|
5441
|
-
({ color, offset }) =>
|
|
5442
|
-
color:
|
|
5443
|
-
offset:
|
|
5569
|
+
({ color, offset }) => import_editor_props36.colorStopPropTypeUtil.create({
|
|
5570
|
+
color: import_editor_props36.colorPropTypeUtil.create(color),
|
|
5571
|
+
offset: import_editor_props36.numberPropTypeUtil.create(offset)
|
|
5444
5572
|
})
|
|
5445
5573
|
)
|
|
5446
5574
|
)
|
|
@@ -5460,8 +5588,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
5460
5588
|
positions: positions?.value.split(" ")
|
|
5461
5589
|
};
|
|
5462
5590
|
};
|
|
5463
|
-
return /* @__PURE__ */
|
|
5464
|
-
|
|
5591
|
+
return /* @__PURE__ */ React83.createElement(
|
|
5592
|
+
import_ui66.UnstableGradientBox,
|
|
5465
5593
|
{
|
|
5466
5594
|
sx: { width: "auto", padding: 1.5 },
|
|
5467
5595
|
value: normalizeValue(),
|
|
@@ -5469,69 +5597,69 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
5469
5597
|
}
|
|
5470
5598
|
);
|
|
5471
5599
|
});
|
|
5472
|
-
var initialBackgroundGradientOverlay =
|
|
5473
|
-
type:
|
|
5474
|
-
angle:
|
|
5475
|
-
stops:
|
|
5476
|
-
|
|
5477
|
-
color:
|
|
5478
|
-
offset:
|
|
5600
|
+
var initialBackgroundGradientOverlay = import_editor_props36.backgroundGradientOverlayPropTypeUtil.create({
|
|
5601
|
+
type: import_editor_props36.stringPropTypeUtil.create("linear"),
|
|
5602
|
+
angle: import_editor_props36.numberPropTypeUtil.create(180),
|
|
5603
|
+
stops: import_editor_props36.gradientColorStopPropTypeUtil.create([
|
|
5604
|
+
import_editor_props36.colorStopPropTypeUtil.create({
|
|
5605
|
+
color: import_editor_props36.colorPropTypeUtil.create("rgb(0,0,0)"),
|
|
5606
|
+
offset: import_editor_props36.numberPropTypeUtil.create(0)
|
|
5479
5607
|
}),
|
|
5480
|
-
|
|
5481
|
-
color:
|
|
5482
|
-
offset:
|
|
5608
|
+
import_editor_props36.colorStopPropTypeUtil.create({
|
|
5609
|
+
color: import_editor_props36.colorPropTypeUtil.create("rgb(255,255,255)"),
|
|
5610
|
+
offset: import_editor_props36.numberPropTypeUtil.create(100)
|
|
5483
5611
|
})
|
|
5484
5612
|
])
|
|
5485
5613
|
});
|
|
5486
5614
|
|
|
5487
5615
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
5488
|
-
var
|
|
5489
|
-
var
|
|
5490
|
-
var
|
|
5491
|
-
var
|
|
5616
|
+
var React84 = __toESM(require("react"));
|
|
5617
|
+
var import_icons23 = require("@elementor/icons");
|
|
5618
|
+
var import_ui67 = require("@elementor/ui");
|
|
5619
|
+
var import_i18n34 = require("@wordpress/i18n");
|
|
5492
5620
|
var attachmentControlOptions = [
|
|
5493
5621
|
{
|
|
5494
5622
|
value: "fixed",
|
|
5495
|
-
label: (0,
|
|
5496
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5623
|
+
label: (0, import_i18n34.__)("Fixed", "elementor"),
|
|
5624
|
+
renderContent: ({ size }) => /* @__PURE__ */ React84.createElement(import_icons23.PinIcon, { fontSize: size }),
|
|
5497
5625
|
showTooltip: true
|
|
5498
5626
|
},
|
|
5499
5627
|
{
|
|
5500
5628
|
value: "scroll",
|
|
5501
|
-
label: (0,
|
|
5502
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5629
|
+
label: (0, import_i18n34.__)("Scroll", "elementor"),
|
|
5630
|
+
renderContent: ({ size }) => /* @__PURE__ */ React84.createElement(import_icons23.PinnedOffIcon, { fontSize: size }),
|
|
5503
5631
|
showTooltip: true
|
|
5504
5632
|
}
|
|
5505
5633
|
];
|
|
5506
5634
|
var BackgroundImageOverlayAttachment = () => {
|
|
5507
|
-
return /* @__PURE__ */
|
|
5635
|
+
return /* @__PURE__ */ React84.createElement(PopoverGridContainer, null, /* @__PURE__ */ React84.createElement(import_ui67.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React84.createElement(ControlFormLabel, null, (0, import_i18n34.__)("Attachment", "elementor"))), /* @__PURE__ */ React84.createElement(import_ui67.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React84.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
5508
5636
|
};
|
|
5509
5637
|
|
|
5510
5638
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
5511
|
-
var
|
|
5512
|
-
var
|
|
5513
|
-
var
|
|
5639
|
+
var React85 = __toESM(require("react"));
|
|
5640
|
+
var import_react50 = require("react");
|
|
5641
|
+
var import_editor_props37 = require("@elementor/editor-props");
|
|
5514
5642
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
5515
|
-
var
|
|
5516
|
-
var
|
|
5517
|
-
var
|
|
5643
|
+
var import_icons24 = require("@elementor/icons");
|
|
5644
|
+
var import_ui68 = require("@elementor/ui");
|
|
5645
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
5518
5646
|
var backgroundPositionOptions = [
|
|
5519
|
-
{ label: (0,
|
|
5520
|
-
{ label: (0,
|
|
5521
|
-
{ label: (0,
|
|
5522
|
-
{ label: (0,
|
|
5523
|
-
{ label: (0,
|
|
5524
|
-
{ label: (0,
|
|
5525
|
-
{ label: (0,
|
|
5526
|
-
{ label: (0,
|
|
5527
|
-
{ label: (0,
|
|
5528
|
-
{ label: (0,
|
|
5647
|
+
{ label: (0, import_i18n35.__)("Center center", "elementor"), value: "center center" },
|
|
5648
|
+
{ label: (0, import_i18n35.__)("Center left", "elementor"), value: "center left" },
|
|
5649
|
+
{ label: (0, import_i18n35.__)("Center right", "elementor"), value: "center right" },
|
|
5650
|
+
{ label: (0, import_i18n35.__)("Top center", "elementor"), value: "top center" },
|
|
5651
|
+
{ label: (0, import_i18n35.__)("Top left", "elementor"), value: "top left" },
|
|
5652
|
+
{ label: (0, import_i18n35.__)("Top right", "elementor"), value: "top right" },
|
|
5653
|
+
{ label: (0, import_i18n35.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
5654
|
+
{ label: (0, import_i18n35.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
5655
|
+
{ label: (0, import_i18n35.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
5656
|
+
{ label: (0, import_i18n35.__)("Custom", "elementor"), value: "custom" }
|
|
5529
5657
|
];
|
|
5530
5658
|
var BackgroundImageOverlayPosition = () => {
|
|
5531
|
-
const backgroundImageOffsetContext = useBoundProp(
|
|
5532
|
-
const stringPropContext = useBoundProp(
|
|
5659
|
+
const backgroundImageOffsetContext = useBoundProp(import_editor_props37.backgroundImagePositionOffsetPropTypeUtil);
|
|
5660
|
+
const stringPropContext = useBoundProp(import_editor_props37.stringPropTypeUtil);
|
|
5533
5661
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
5534
|
-
const rowRef = (0,
|
|
5662
|
+
const rowRef = (0, import_react50.useRef)(null);
|
|
5535
5663
|
const handlePositionChange = (event) => {
|
|
5536
5664
|
const value = event.target.value || null;
|
|
5537
5665
|
if (value === "custom") {
|
|
@@ -5540,8 +5668,8 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
5540
5668
|
stringPropContext.setValue(value);
|
|
5541
5669
|
}
|
|
5542
5670
|
};
|
|
5543
|
-
return /* @__PURE__ */
|
|
5544
|
-
|
|
5671
|
+
return /* @__PURE__ */ React85.createElement(import_ui68.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React85.createElement(import_ui68.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React85.createElement(PopoverGridContainer, null, /* @__PURE__ */ React85.createElement(import_ui68.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(ControlFormLabel, null, (0, import_i18n35.__)("Position", "elementor"))), /* @__PURE__ */ React85.createElement(import_ui68.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React85.createElement(ControlActions, null, /* @__PURE__ */ React85.createElement(
|
|
5672
|
+
import_ui68.Select,
|
|
5545
5673
|
{
|
|
5546
5674
|
fullWidth: true,
|
|
5547
5675
|
size: "tiny",
|
|
@@ -5549,18 +5677,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
5549
5677
|
disabled: stringPropContext.disabled,
|
|
5550
5678
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
5551
5679
|
},
|
|
5552
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
5553
|
-
))))), isCustom ? /* @__PURE__ */
|
|
5680
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React85.createElement(import_editor_ui11.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
5681
|
+
))))), isCustom ? /* @__PURE__ */ React85.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React85.createElement(import_ui68.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React85.createElement(import_ui68.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React85.createElement(import_ui68.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React85.createElement(
|
|
5554
5682
|
SizeControl,
|
|
5555
5683
|
{
|
|
5556
|
-
startIcon: /* @__PURE__ */
|
|
5684
|
+
startIcon: /* @__PURE__ */ React85.createElement(import_icons24.LetterXIcon, { fontSize: "tiny" }),
|
|
5557
5685
|
anchorRef: rowRef,
|
|
5558
5686
|
min: -Number.MAX_SAFE_INTEGER
|
|
5559
5687
|
}
|
|
5560
|
-
))), /* @__PURE__ */
|
|
5688
|
+
))), /* @__PURE__ */ React85.createElement(import_ui68.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React85.createElement(
|
|
5561
5689
|
SizeControl,
|
|
5562
5690
|
{
|
|
5563
|
-
startIcon: /* @__PURE__ */
|
|
5691
|
+
startIcon: /* @__PURE__ */ React85.createElement(import_icons24.LetterYIcon, { fontSize: "tiny" }),
|
|
5564
5692
|
anchorRef: rowRef,
|
|
5565
5693
|
min: -Number.MAX_SAFE_INTEGER
|
|
5566
5694
|
}
|
|
@@ -5568,78 +5696,78 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
5568
5696
|
};
|
|
5569
5697
|
|
|
5570
5698
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
5571
|
-
var
|
|
5572
|
-
var
|
|
5573
|
-
var
|
|
5574
|
-
var
|
|
5699
|
+
var React86 = __toESM(require("react"));
|
|
5700
|
+
var import_icons25 = require("@elementor/icons");
|
|
5701
|
+
var import_ui69 = require("@elementor/ui");
|
|
5702
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
5575
5703
|
var repeatControlOptions = [
|
|
5576
5704
|
{
|
|
5577
5705
|
value: "repeat",
|
|
5578
|
-
label: (0,
|
|
5579
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5706
|
+
label: (0, import_i18n36.__)("Repeat", "elementor"),
|
|
5707
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(import_icons25.GridDotsIcon, { fontSize: size }),
|
|
5580
5708
|
showTooltip: true
|
|
5581
5709
|
},
|
|
5582
5710
|
{
|
|
5583
5711
|
value: "repeat-x",
|
|
5584
|
-
label: (0,
|
|
5585
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5712
|
+
label: (0, import_i18n36.__)("Repeat-x", "elementor"),
|
|
5713
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(import_icons25.DotsHorizontalIcon, { fontSize: size }),
|
|
5586
5714
|
showTooltip: true
|
|
5587
5715
|
},
|
|
5588
5716
|
{
|
|
5589
5717
|
value: "repeat-y",
|
|
5590
|
-
label: (0,
|
|
5591
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5718
|
+
label: (0, import_i18n36.__)("Repeat-y", "elementor"),
|
|
5719
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(import_icons25.DotsVerticalIcon, { fontSize: size }),
|
|
5592
5720
|
showTooltip: true
|
|
5593
5721
|
},
|
|
5594
5722
|
{
|
|
5595
5723
|
value: "no-repeat",
|
|
5596
|
-
label: (0,
|
|
5597
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5724
|
+
label: (0, import_i18n36.__)("No-repeat", "elementor"),
|
|
5725
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(import_icons25.XIcon, { fontSize: size }),
|
|
5598
5726
|
showTooltip: true
|
|
5599
5727
|
}
|
|
5600
5728
|
];
|
|
5601
5729
|
var BackgroundImageOverlayRepeat = () => {
|
|
5602
|
-
return /* @__PURE__ */
|
|
5730
|
+
return /* @__PURE__ */ React86.createElement(PopoverGridContainer, null, /* @__PURE__ */ React86.createElement(import_ui69.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React86.createElement(ControlFormLabel, null, (0, import_i18n36.__)("Repeat", "elementor"))), /* @__PURE__ */ React86.createElement(import_ui69.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React86.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
5603
5731
|
};
|
|
5604
5732
|
|
|
5605
5733
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
5606
|
-
var
|
|
5607
|
-
var
|
|
5608
|
-
var
|
|
5609
|
-
var
|
|
5610
|
-
var
|
|
5611
|
-
var
|
|
5734
|
+
var React87 = __toESM(require("react"));
|
|
5735
|
+
var import_react51 = require("react");
|
|
5736
|
+
var import_editor_props38 = require("@elementor/editor-props");
|
|
5737
|
+
var import_icons26 = require("@elementor/icons");
|
|
5738
|
+
var import_ui70 = require("@elementor/ui");
|
|
5739
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
5612
5740
|
var sizeControlOptions = [
|
|
5613
5741
|
{
|
|
5614
5742
|
value: "auto",
|
|
5615
|
-
label: (0,
|
|
5616
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5743
|
+
label: (0, import_i18n37.__)("Auto", "elementor"),
|
|
5744
|
+
renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(import_icons26.LetterAIcon, { fontSize: size }),
|
|
5617
5745
|
showTooltip: true
|
|
5618
5746
|
},
|
|
5619
5747
|
{
|
|
5620
5748
|
value: "cover",
|
|
5621
|
-
label: (0,
|
|
5622
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5749
|
+
label: (0, import_i18n37.__)("Cover", "elementor"),
|
|
5750
|
+
renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(import_icons26.ArrowsMaximizeIcon, { fontSize: size }),
|
|
5623
5751
|
showTooltip: true
|
|
5624
5752
|
},
|
|
5625
5753
|
{
|
|
5626
5754
|
value: "contain",
|
|
5627
|
-
label: (0,
|
|
5628
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5755
|
+
label: (0, import_i18n37.__)("Contain", "elementor"),
|
|
5756
|
+
renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(import_icons26.ArrowBarBothIcon, { fontSize: size }),
|
|
5629
5757
|
showTooltip: true
|
|
5630
5758
|
},
|
|
5631
5759
|
{
|
|
5632
5760
|
value: "custom",
|
|
5633
|
-
label: (0,
|
|
5634
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5761
|
+
label: (0, import_i18n37.__)("Custom", "elementor"),
|
|
5762
|
+
renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(import_icons26.PencilIcon, { fontSize: size }),
|
|
5635
5763
|
showTooltip: true
|
|
5636
5764
|
}
|
|
5637
5765
|
];
|
|
5638
5766
|
var BackgroundImageOverlaySize = () => {
|
|
5639
|
-
const backgroundImageScaleContext = useBoundProp(
|
|
5640
|
-
const stringPropContext = useBoundProp(
|
|
5767
|
+
const backgroundImageScaleContext = useBoundProp(import_editor_props38.backgroundImageSizeScalePropTypeUtil);
|
|
5768
|
+
const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
|
|
5641
5769
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
5642
|
-
const rowRef = (0,
|
|
5770
|
+
const rowRef = (0, import_react51.useRef)(null);
|
|
5643
5771
|
const handleSizeChange = (size) => {
|
|
5644
5772
|
if (size === "custom") {
|
|
5645
5773
|
backgroundImageScaleContext.setValue({ width: null, height: null });
|
|
@@ -5647,7 +5775,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
5647
5775
|
stringPropContext.setValue(size);
|
|
5648
5776
|
}
|
|
5649
5777
|
};
|
|
5650
|
-
return /* @__PURE__ */
|
|
5778
|
+
return /* @__PURE__ */ React87.createElement(import_ui70.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(import_ui70.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React87.createElement(PopoverGridContainer, null, /* @__PURE__ */ React87.createElement(import_ui70.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(ControlFormLabel, null, (0, import_i18n37.__)("Size", "elementor"))), /* @__PURE__ */ React87.createElement(import_ui70.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React87.createElement(
|
|
5651
5779
|
ControlToggleButtonGroup,
|
|
5652
5780
|
{
|
|
5653
5781
|
exclusive: true,
|
|
@@ -5656,17 +5784,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
5656
5784
|
disabled: stringPropContext.disabled,
|
|
5657
5785
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
5658
5786
|
}
|
|
5659
|
-
)))), isCustom ? /* @__PURE__ */
|
|
5787
|
+
)))), isCustom ? /* @__PURE__ */ React87.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React87.createElement(import_ui70.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React87.createElement(PopoverGridContainer, null, /* @__PURE__ */ React87.createElement(import_ui70.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React87.createElement(
|
|
5660
5788
|
SizeControl,
|
|
5661
5789
|
{
|
|
5662
|
-
startIcon: /* @__PURE__ */
|
|
5790
|
+
startIcon: /* @__PURE__ */ React87.createElement(import_icons26.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
5663
5791
|
extendedOptions: ["auto"],
|
|
5664
5792
|
anchorRef: rowRef
|
|
5665
5793
|
}
|
|
5666
|
-
))), /* @__PURE__ */
|
|
5794
|
+
))), /* @__PURE__ */ React87.createElement(import_ui70.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React87.createElement(
|
|
5667
5795
|
SizeControl,
|
|
5668
5796
|
{
|
|
5669
|
-
startIcon: /* @__PURE__ */
|
|
5797
|
+
startIcon: /* @__PURE__ */ React87.createElement(import_icons26.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
5670
5798
|
extendedOptions: ["auto"],
|
|
5671
5799
|
anchorRef: rowRef
|
|
5672
5800
|
}
|
|
@@ -5674,17 +5802,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
5674
5802
|
};
|
|
5675
5803
|
|
|
5676
5804
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
5677
|
-
var
|
|
5678
|
-
var
|
|
5679
|
-
var
|
|
5805
|
+
var import_react52 = require("react");
|
|
5806
|
+
var import_editor_props39 = require("@elementor/editor-props");
|
|
5807
|
+
var import_ui71 = require("@elementor/ui");
|
|
5680
5808
|
var useBackgroundTabsHistory = ({
|
|
5681
5809
|
color: initialBackgroundColorOverlay2,
|
|
5682
5810
|
image: initialBackgroundImageOverlay,
|
|
5683
5811
|
gradient: initialBackgroundGradientOverlay2
|
|
5684
5812
|
}) => {
|
|
5685
|
-
const { value: imageValue, setValue: setImageValue } = useBoundProp(
|
|
5686
|
-
const { value: colorValue, setValue: setColorValue } = useBoundProp(
|
|
5687
|
-
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(
|
|
5813
|
+
const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props39.backgroundImageOverlayPropTypeUtil);
|
|
5814
|
+
const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props39.backgroundColorOverlayPropTypeUtil);
|
|
5815
|
+
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props39.backgroundGradientOverlayPropTypeUtil);
|
|
5688
5816
|
const getCurrentOverlayType = () => {
|
|
5689
5817
|
if (colorValue) {
|
|
5690
5818
|
return "color";
|
|
@@ -5694,8 +5822,8 @@ var useBackgroundTabsHistory = ({
|
|
|
5694
5822
|
}
|
|
5695
5823
|
return "image";
|
|
5696
5824
|
};
|
|
5697
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
5698
|
-
const valuesHistory = (0,
|
|
5825
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui71.useTabs)(getCurrentOverlayType());
|
|
5826
|
+
const valuesHistory = (0, import_react52.useRef)({
|
|
5699
5827
|
image: initialBackgroundImageOverlay,
|
|
5700
5828
|
color: initialBackgroundColorOverlay2,
|
|
5701
5829
|
gradient: initialBackgroundGradientOverlay2
|
|
@@ -5733,9 +5861,9 @@ var useBackgroundTabsHistory = ({
|
|
|
5733
5861
|
|
|
5734
5862
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
5735
5863
|
var DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = "#00000033";
|
|
5736
|
-
var initialBackgroundColorOverlay =
|
|
5864
|
+
var initialBackgroundColorOverlay = import_editor_props40.backgroundColorOverlayPropTypeUtil.create(
|
|
5737
5865
|
{
|
|
5738
|
-
color:
|
|
5866
|
+
color: import_editor_props40.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
|
|
5739
5867
|
}
|
|
5740
5868
|
);
|
|
5741
5869
|
var getInitialBackgroundOverlay = () => ({
|
|
@@ -5763,59 +5891,59 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
5763
5891
|
}
|
|
5764
5892
|
});
|
|
5765
5893
|
var backgroundResolutionOptions = [
|
|
5766
|
-
{ label: (0,
|
|
5767
|
-
{ label: (0,
|
|
5768
|
-
{ label: (0,
|
|
5769
|
-
{ label: (0,
|
|
5894
|
+
{ label: (0, import_i18n38.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
5895
|
+
{ label: (0, import_i18n38.__)("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
5896
|
+
{ label: (0, import_i18n38.__)("Large 1024 x 1024", "elementor"), value: "large" },
|
|
5897
|
+
{ label: (0, import_i18n38.__)("Full", "elementor"), value: "full" }
|
|
5770
5898
|
];
|
|
5771
5899
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
5772
|
-
const { propType, value: overlayValues, setValue } = useBoundProp(
|
|
5773
|
-
return /* @__PURE__ */
|
|
5900
|
+
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props40.backgroundOverlayPropTypeUtil);
|
|
5901
|
+
return /* @__PURE__ */ React88.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React88.createElement(
|
|
5774
5902
|
ControlRepeater,
|
|
5775
5903
|
{
|
|
5776
5904
|
initial: getInitialBackgroundOverlay(),
|
|
5777
|
-
propTypeUtil:
|
|
5905
|
+
propTypeUtil: import_editor_props40.backgroundOverlayPropTypeUtil
|
|
5778
5906
|
},
|
|
5779
|
-
/* @__PURE__ */
|
|
5780
|
-
/* @__PURE__ */
|
|
5907
|
+
/* @__PURE__ */ React88.createElement(RepeaterHeader, { label: (0, import_i18n38.__)("Overlay", "elementor") }, /* @__PURE__ */ React88.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
5908
|
+
/* @__PURE__ */ React88.createElement(ItemsContainer, null, /* @__PURE__ */ React88.createElement(
|
|
5781
5909
|
Item,
|
|
5782
5910
|
{
|
|
5783
5911
|
Icon: ItemIcon2,
|
|
5784
|
-
Label:
|
|
5785
|
-
actions: /* @__PURE__ */
|
|
5912
|
+
Label: ItemLabel3,
|
|
5913
|
+
actions: /* @__PURE__ */ React88.createElement(React88.Fragment, null, /* @__PURE__ */ React88.createElement(DuplicateItemAction, null), /* @__PURE__ */ React88.createElement(DisableItemAction, null), /* @__PURE__ */ React88.createElement(RemoveItemAction, null))
|
|
5786
5914
|
}
|
|
5787
5915
|
)),
|
|
5788
|
-
/* @__PURE__ */
|
|
5916
|
+
/* @__PURE__ */ React88.createElement(EditItemPopover, null, /* @__PURE__ */ React88.createElement(ItemContent2, null))
|
|
5789
5917
|
));
|
|
5790
5918
|
});
|
|
5791
|
-
var
|
|
5919
|
+
var ItemContent2 = () => {
|
|
5792
5920
|
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
5793
5921
|
image: getInitialBackgroundOverlay().value,
|
|
5794
5922
|
color: initialBackgroundColorOverlay.value,
|
|
5795
5923
|
gradient: initialBackgroundGradientOverlay.value
|
|
5796
5924
|
});
|
|
5797
5925
|
const { rowRef } = useRepeaterContext();
|
|
5798
|
-
return /* @__PURE__ */
|
|
5799
|
-
|
|
5926
|
+
return /* @__PURE__ */ React88.createElement(import_ui72.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(import_ui72.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
|
|
5927
|
+
import_ui72.Tabs,
|
|
5800
5928
|
{
|
|
5801
5929
|
size: "small",
|
|
5802
5930
|
variant: "fullWidth",
|
|
5803
5931
|
...getTabsProps(),
|
|
5804
|
-
"aria-label": (0,
|
|
5932
|
+
"aria-label": (0, import_i18n38.__)("Background Overlay", "elementor")
|
|
5805
5933
|
},
|
|
5806
|
-
/* @__PURE__ */
|
|
5807
|
-
/* @__PURE__ */
|
|
5808
|
-
/* @__PURE__ */
|
|
5809
|
-
)), /* @__PURE__ */
|
|
5934
|
+
/* @__PURE__ */ React88.createElement(import_ui72.Tab, { label: (0, import_i18n38.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
5935
|
+
/* @__PURE__ */ React88.createElement(import_ui72.Tab, { label: (0, import_i18n38.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
5936
|
+
/* @__PURE__ */ React88.createElement(import_ui72.Tab, { label: (0, import_i18n38.__)("Color", "elementor"), ...getTabProps("color") })
|
|
5937
|
+
)), /* @__PURE__ */ React88.createElement(import_ui72.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React88.createElement(import_ui72.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React88.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React88.createElement(import_ui72.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
5810
5938
|
};
|
|
5811
5939
|
var ItemIcon2 = ({ value }) => {
|
|
5812
5940
|
switch (value.$$type) {
|
|
5813
5941
|
case "background-image-overlay":
|
|
5814
|
-
return /* @__PURE__ */
|
|
5942
|
+
return /* @__PURE__ */ React88.createElement(ItemIconImage, { value });
|
|
5815
5943
|
case "background-color-overlay":
|
|
5816
|
-
return /* @__PURE__ */
|
|
5944
|
+
return /* @__PURE__ */ React88.createElement(ItemIconColor, { value });
|
|
5817
5945
|
case "background-gradient-overlay":
|
|
5818
|
-
return /* @__PURE__ */
|
|
5946
|
+
return /* @__PURE__ */ React88.createElement(ItemIconGradient, { value });
|
|
5819
5947
|
default:
|
|
5820
5948
|
return null;
|
|
5821
5949
|
}
|
|
@@ -5828,12 +5956,12 @@ var extractColorFrom = (prop) => {
|
|
|
5828
5956
|
};
|
|
5829
5957
|
var ItemIconColor = ({ value: prop }) => {
|
|
5830
5958
|
const color = extractColorFrom(prop);
|
|
5831
|
-
return /* @__PURE__ */
|
|
5959
|
+
return /* @__PURE__ */ React88.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
5832
5960
|
};
|
|
5833
5961
|
var ItemIconImage = ({ value }) => {
|
|
5834
5962
|
const { imageUrl } = useImage(value);
|
|
5835
|
-
return /* @__PURE__ */
|
|
5836
|
-
|
|
5963
|
+
return /* @__PURE__ */ React88.createElement(
|
|
5964
|
+
import_ui72.CardMedia,
|
|
5837
5965
|
{
|
|
5838
5966
|
image: imageUrl,
|
|
5839
5967
|
sx: (theme) => ({
|
|
@@ -5847,43 +5975,43 @@ var ItemIconImage = ({ value }) => {
|
|
|
5847
5975
|
};
|
|
5848
5976
|
var ItemIconGradient = ({ value }) => {
|
|
5849
5977
|
const gradient = getGradientValue(value);
|
|
5850
|
-
return /* @__PURE__ */
|
|
5978
|
+
return /* @__PURE__ */ React88.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
5851
5979
|
};
|
|
5852
|
-
var
|
|
5980
|
+
var ItemLabel3 = ({ value }) => {
|
|
5853
5981
|
switch (value.$$type) {
|
|
5854
5982
|
case "background-image-overlay":
|
|
5855
|
-
return /* @__PURE__ */
|
|
5983
|
+
return /* @__PURE__ */ React88.createElement(ItemLabelImage, { value });
|
|
5856
5984
|
case "background-color-overlay":
|
|
5857
|
-
return /* @__PURE__ */
|
|
5985
|
+
return /* @__PURE__ */ React88.createElement(ItemLabelColor, { value });
|
|
5858
5986
|
case "background-gradient-overlay":
|
|
5859
|
-
return /* @__PURE__ */
|
|
5987
|
+
return /* @__PURE__ */ React88.createElement(ItemLabelGradient, { value });
|
|
5860
5988
|
default:
|
|
5861
5989
|
return null;
|
|
5862
5990
|
}
|
|
5863
5991
|
};
|
|
5864
5992
|
var ItemLabelColor = ({ value: prop }) => {
|
|
5865
5993
|
const color = extractColorFrom(prop);
|
|
5866
|
-
return /* @__PURE__ */
|
|
5994
|
+
return /* @__PURE__ */ React88.createElement("span", null, color);
|
|
5867
5995
|
};
|
|
5868
5996
|
var ItemLabelImage = ({ value }) => {
|
|
5869
5997
|
const { imageTitle } = useImage(value);
|
|
5870
|
-
return /* @__PURE__ */
|
|
5998
|
+
return /* @__PURE__ */ React88.createElement("span", null, imageTitle);
|
|
5871
5999
|
};
|
|
5872
6000
|
var ItemLabelGradient = ({ value }) => {
|
|
5873
6001
|
if (value.value.type.value === "linear") {
|
|
5874
|
-
return /* @__PURE__ */
|
|
6002
|
+
return /* @__PURE__ */ React88.createElement("span", null, (0, import_i18n38.__)("Linear Gradient", "elementor"));
|
|
5875
6003
|
}
|
|
5876
|
-
return /* @__PURE__ */
|
|
6004
|
+
return /* @__PURE__ */ React88.createElement("span", null, (0, import_i18n38.__)("Radial Gradient", "elementor"));
|
|
5877
6005
|
};
|
|
5878
6006
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
5879
|
-
const propContext = useBoundProp(
|
|
5880
|
-
return /* @__PURE__ */
|
|
6007
|
+
const propContext = useBoundProp(import_editor_props40.backgroundColorOverlayPropTypeUtil);
|
|
6008
|
+
return /* @__PURE__ */ React88.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React88.createElement(ColorControl, { anchorEl })));
|
|
5881
6009
|
};
|
|
5882
6010
|
var ImageOverlayContent = () => {
|
|
5883
|
-
const propContext = useBoundProp(
|
|
5884
|
-
return /* @__PURE__ */
|
|
6011
|
+
const propContext = useBoundProp(import_editor_props40.backgroundImageOverlayPropTypeUtil);
|
|
6012
|
+
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)));
|
|
5885
6013
|
};
|
|
5886
|
-
var StyledUnstableColorIndicator3 = (0,
|
|
6014
|
+
var StyledUnstableColorIndicator3 = (0, import_ui72.styled)(import_ui72.UnstableColorIndicator)(({ theme }) => ({
|
|
5887
6015
|
height: "1rem",
|
|
5888
6016
|
width: "1rem",
|
|
5889
6017
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
@@ -5920,29 +6048,29 @@ var getGradientValue = (value) => {
|
|
|
5920
6048
|
|
|
5921
6049
|
// src/controls/background-control/background-control.tsx
|
|
5922
6050
|
var clipOptions = [
|
|
5923
|
-
{ label: (0,
|
|
5924
|
-
{ label: (0,
|
|
5925
|
-
{ label: (0,
|
|
5926
|
-
{ label: (0,
|
|
6051
|
+
{ label: (0, import_i18n39.__)("Full element", "elementor"), value: "border-box" },
|
|
6052
|
+
{ label: (0, import_i18n39.__)("Padding edges", "elementor"), value: "padding-box" },
|
|
6053
|
+
{ label: (0, import_i18n39.__)("Content edges", "elementor"), value: "content-box" },
|
|
6054
|
+
{ label: (0, import_i18n39.__)("Text", "elementor"), value: "text" }
|
|
5927
6055
|
];
|
|
5928
|
-
var colorLabel = (0,
|
|
5929
|
-
var clipLabel = (0,
|
|
6056
|
+
var colorLabel = (0, import_i18n39.__)("Color", "elementor");
|
|
6057
|
+
var clipLabel = (0, import_i18n39.__)("Clipping", "elementor");
|
|
5930
6058
|
var BackgroundControl = createControl(() => {
|
|
5931
|
-
const propContext = useBoundProp(
|
|
5932
|
-
return /* @__PURE__ */
|
|
6059
|
+
const propContext = useBoundProp(import_editor_props41.backgroundPropTypeUtil);
|
|
6060
|
+
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));
|
|
5933
6061
|
});
|
|
5934
6062
|
var BackgroundColorField = () => {
|
|
5935
|
-
return /* @__PURE__ */
|
|
6063
|
+
return /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React89.createElement(import_ui73.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React89.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React89.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ColorControl, null))));
|
|
5936
6064
|
};
|
|
5937
6065
|
var BackgroundClipField = () => {
|
|
5938
|
-
return /* @__PURE__ */
|
|
6066
|
+
return /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React89.createElement(import_ui73.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React89.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React89.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(SelectControl, { options: clipOptions }))));
|
|
5939
6067
|
};
|
|
5940
6068
|
|
|
5941
6069
|
// src/controls/repeatable-control.tsx
|
|
5942
|
-
var
|
|
5943
|
-
var
|
|
5944
|
-
var
|
|
5945
|
-
var
|
|
6070
|
+
var React90 = __toESM(require("react"));
|
|
6071
|
+
var import_react53 = require("react");
|
|
6072
|
+
var import_editor_props42 = require("@elementor/editor-props");
|
|
6073
|
+
var import_ui74 = require("@elementor/ui");
|
|
5946
6074
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
5947
6075
|
var RepeatableControl = createControl(
|
|
5948
6076
|
({
|
|
@@ -5961,11 +6089,11 @@ var RepeatableControl = createControl(
|
|
|
5961
6089
|
if (!childPropTypeUtil) {
|
|
5962
6090
|
return null;
|
|
5963
6091
|
}
|
|
5964
|
-
const childArrayPropTypeUtil2 = (0,
|
|
5965
|
-
() => (0,
|
|
6092
|
+
const childArrayPropTypeUtil2 = (0, import_react53.useMemo)(
|
|
6093
|
+
() => (0, import_editor_props42.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
5966
6094
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
5967
6095
|
);
|
|
5968
|
-
const contextValue = (0,
|
|
6096
|
+
const contextValue = (0, import_react53.useMemo)(
|
|
5969
6097
|
() => ({
|
|
5970
6098
|
...childControlConfig,
|
|
5971
6099
|
placeholder: placeholder || "",
|
|
@@ -5975,14 +6103,14 @@ var RepeatableControl = createControl(
|
|
|
5975
6103
|
);
|
|
5976
6104
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
|
|
5977
6105
|
const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
|
|
5978
|
-
return /* @__PURE__ */
|
|
6106
|
+
return /* @__PURE__ */ React90.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React90.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React90.createElement(
|
|
5979
6107
|
ControlRepeater,
|
|
5980
6108
|
{
|
|
5981
6109
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
5982
6110
|
propTypeUtil: childArrayPropTypeUtil2,
|
|
5983
6111
|
isItemDisabled: isItemDisabled2
|
|
5984
6112
|
},
|
|
5985
|
-
/* @__PURE__ */
|
|
6113
|
+
/* @__PURE__ */ React90.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React90.createElement(
|
|
5986
6114
|
TooltipAddItemAction,
|
|
5987
6115
|
{
|
|
5988
6116
|
...addItemTooltipProps,
|
|
@@ -5990,22 +6118,22 @@ var RepeatableControl = createControl(
|
|
|
5990
6118
|
ariaLabel: repeaterLabel
|
|
5991
6119
|
}
|
|
5992
6120
|
)),
|
|
5993
|
-
/* @__PURE__ */
|
|
6121
|
+
/* @__PURE__ */ React90.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React90.createElement(
|
|
5994
6122
|
Item,
|
|
5995
6123
|
{
|
|
5996
6124
|
Icon: ItemIcon3,
|
|
5997
|
-
Label:
|
|
5998
|
-
actions: /* @__PURE__ */
|
|
6125
|
+
Label: ItemLabel4,
|
|
6126
|
+
actions: /* @__PURE__ */ React90.createElement(React90.Fragment, null, showDuplicate && /* @__PURE__ */ React90.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React90.createElement(DisableItemAction, null), /* @__PURE__ */ React90.createElement(RemoveItemAction, null))
|
|
5999
6127
|
}
|
|
6000
6128
|
)),
|
|
6001
|
-
/* @__PURE__ */
|
|
6129
|
+
/* @__PURE__ */ React90.createElement(EditItemPopover, null, /* @__PURE__ */ React90.createElement(Content2, null))
|
|
6002
6130
|
)));
|
|
6003
6131
|
}
|
|
6004
6132
|
);
|
|
6005
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
6133
|
+
var ItemIcon3 = () => /* @__PURE__ */ React90.createElement(React90.Fragment, null);
|
|
6006
6134
|
var Content2 = () => {
|
|
6007
6135
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
6008
|
-
return /* @__PURE__ */
|
|
6136
|
+
return /* @__PURE__ */ React90.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React90.createElement(PopoverGridContainer, null, /* @__PURE__ */ React90.createElement(ChildControl, { ...props })));
|
|
6009
6137
|
};
|
|
6010
6138
|
var interpolate = (template, data) => {
|
|
6011
6139
|
if (!data) {
|
|
@@ -6082,13 +6210,13 @@ var getTextColor = (isReadOnly, showPlaceholder) => {
|
|
|
6082
6210
|
}
|
|
6083
6211
|
return showPlaceholder ? "text.tertiary" : "text.primary";
|
|
6084
6212
|
};
|
|
6085
|
-
var
|
|
6213
|
+
var ItemLabel4 = ({ value }) => {
|
|
6086
6214
|
const { placeholder, patternLabel, props: childProps } = useRepeatableControlContext();
|
|
6087
6215
|
const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
|
|
6088
6216
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
6089
6217
|
const isReadOnly = !!childProps?.readOnly;
|
|
6090
6218
|
const color = getTextColor(isReadOnly, showPlaceholder);
|
|
6091
|
-
return /* @__PURE__ */
|
|
6219
|
+
return /* @__PURE__ */ React90.createElement(import_ui74.Box, { component: "span", color }, label);
|
|
6092
6220
|
};
|
|
6093
6221
|
var getAllProperties = (pattern) => {
|
|
6094
6222
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -6096,11 +6224,11 @@ var getAllProperties = (pattern) => {
|
|
|
6096
6224
|
};
|
|
6097
6225
|
|
|
6098
6226
|
// src/controls/key-value-control.tsx
|
|
6099
|
-
var
|
|
6100
|
-
var
|
|
6101
|
-
var
|
|
6102
|
-
var
|
|
6103
|
-
var
|
|
6227
|
+
var React91 = __toESM(require("react"));
|
|
6228
|
+
var import_react54 = require("react");
|
|
6229
|
+
var import_editor_props43 = require("@elementor/editor-props");
|
|
6230
|
+
var import_ui75 = require("@elementor/ui");
|
|
6231
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
6104
6232
|
|
|
6105
6233
|
// src/utils/escape-html-attr.ts
|
|
6106
6234
|
var escapeHtmlAttr = (value) => {
|
|
@@ -6123,24 +6251,24 @@ var getInitialFieldValue = (fieldValue) => {
|
|
|
6123
6251
|
return transformableValue.value || "";
|
|
6124
6252
|
};
|
|
6125
6253
|
var KeyValueControl = createControl((props = {}) => {
|
|
6126
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
6127
|
-
const [keyError, setKeyError] = (0,
|
|
6128
|
-
const [valueError, setValueError] = (0,
|
|
6129
|
-
const [sessionState, setSessionState] = (0,
|
|
6254
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props43.keyValuePropTypeUtil);
|
|
6255
|
+
const [keyError, setKeyError] = (0, import_react54.useState)("");
|
|
6256
|
+
const [valueError, setValueError] = (0, import_react54.useState)("");
|
|
6257
|
+
const [sessionState, setSessionState] = (0, import_react54.useState)({
|
|
6130
6258
|
key: getInitialFieldValue(value?.key),
|
|
6131
6259
|
value: getInitialFieldValue(value?.value)
|
|
6132
6260
|
});
|
|
6133
|
-
const keyLabel = props.keyName || (0,
|
|
6134
|
-
const valueLabel = props.valueName || (0,
|
|
6261
|
+
const keyLabel = props.keyName || (0, import_i18n40.__)("Key", "elementor");
|
|
6262
|
+
const valueLabel = props.valueName || (0, import_i18n40.__)("Value", "elementor");
|
|
6135
6263
|
const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
|
|
6136
6264
|
keyHelper: void 0,
|
|
6137
6265
|
valueHelper: void 0
|
|
6138
6266
|
};
|
|
6139
|
-
const [keyRegex, valueRegex, errMsg] = (0,
|
|
6267
|
+
const [keyRegex, valueRegex, errMsg] = (0, import_react54.useMemo)(
|
|
6140
6268
|
() => [
|
|
6141
6269
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
6142
6270
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
6143
|
-
props.validationErrorMessage || (0,
|
|
6271
|
+
props.validationErrorMessage || (0, import_i18n40.__)("Invalid Format", "elementor")
|
|
6144
6272
|
],
|
|
6145
6273
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
6146
6274
|
);
|
|
@@ -6162,14 +6290,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6162
6290
|
return;
|
|
6163
6291
|
}
|
|
6164
6292
|
const newChangedValue = newValue[fieldType];
|
|
6165
|
-
if ((0,
|
|
6293
|
+
if ((0, import_editor_props43.isTransformable)(newChangedValue) && newChangedValue.$$type === "dynamic") {
|
|
6166
6294
|
setValue({
|
|
6167
6295
|
...value,
|
|
6168
6296
|
[fieldType]: newChangedValue
|
|
6169
6297
|
});
|
|
6170
6298
|
return;
|
|
6171
6299
|
}
|
|
6172
|
-
const extractedValue =
|
|
6300
|
+
const extractedValue = import_editor_props43.stringPropTypeUtil.extract(newChangedValue);
|
|
6173
6301
|
setSessionState((prev) => ({
|
|
6174
6302
|
...prev,
|
|
6175
6303
|
[fieldType]: extractedValue
|
|
@@ -6189,14 +6317,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6189
6317
|
});
|
|
6190
6318
|
}
|
|
6191
6319
|
};
|
|
6192
|
-
return /* @__PURE__ */
|
|
6320
|
+
return /* @__PURE__ */ React91.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React91.createElement(import_ui75.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React91.createElement(import_ui75.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React91.createElement(import_ui75.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React91.createElement(
|
|
6193
6321
|
TextControl,
|
|
6194
6322
|
{
|
|
6195
6323
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
6196
6324
|
error: !!keyError,
|
|
6197
6325
|
helperText: keyHelper
|
|
6198
6326
|
}
|
|
6199
|
-
)), !!keyError && /* @__PURE__ */
|
|
6327
|
+
)), !!keyError && /* @__PURE__ */ React91.createElement(import_ui75.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React91.createElement(import_ui75.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React91.createElement(import_ui75.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React91.createElement(
|
|
6200
6328
|
TextControl,
|
|
6201
6329
|
{
|
|
6202
6330
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -6204,31 +6332,31 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6204
6332
|
inputDisabled: !!keyError,
|
|
6205
6333
|
helperText: valueHelper
|
|
6206
6334
|
}
|
|
6207
|
-
)), !!valueError && /* @__PURE__ */
|
|
6335
|
+
)), !!valueError && /* @__PURE__ */ React91.createElement(import_ui75.FormHelperText, { error: true }, valueError))));
|
|
6208
6336
|
});
|
|
6209
6337
|
|
|
6210
6338
|
// src/controls/position-control.tsx
|
|
6211
|
-
var
|
|
6212
|
-
var
|
|
6339
|
+
var React92 = __toESM(require("react"));
|
|
6340
|
+
var import_editor_props44 = require("@elementor/editor-props");
|
|
6213
6341
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
6214
|
-
var
|
|
6215
|
-
var
|
|
6216
|
-
var
|
|
6342
|
+
var import_icons27 = require("@elementor/icons");
|
|
6343
|
+
var import_ui76 = require("@elementor/ui");
|
|
6344
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
6217
6345
|
var positionOptions = [
|
|
6218
|
-
{ label: (0,
|
|
6219
|
-
{ label: (0,
|
|
6220
|
-
{ label: (0,
|
|
6221
|
-
{ label: (0,
|
|
6222
|
-
{ label: (0,
|
|
6223
|
-
{ label: (0,
|
|
6224
|
-
{ label: (0,
|
|
6225
|
-
{ label: (0,
|
|
6226
|
-
{ label: (0,
|
|
6227
|
-
{ label: (0,
|
|
6346
|
+
{ label: (0, import_i18n41.__)("Center center", "elementor"), value: "center center" },
|
|
6347
|
+
{ label: (0, import_i18n41.__)("Center left", "elementor"), value: "center left" },
|
|
6348
|
+
{ label: (0, import_i18n41.__)("Center right", "elementor"), value: "center right" },
|
|
6349
|
+
{ label: (0, import_i18n41.__)("Top center", "elementor"), value: "top center" },
|
|
6350
|
+
{ label: (0, import_i18n41.__)("Top left", "elementor"), value: "top left" },
|
|
6351
|
+
{ label: (0, import_i18n41.__)("Top right", "elementor"), value: "top right" },
|
|
6352
|
+
{ label: (0, import_i18n41.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
6353
|
+
{ label: (0, import_i18n41.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
6354
|
+
{ label: (0, import_i18n41.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
6355
|
+
{ label: (0, import_i18n41.__)("Custom", "elementor"), value: "custom" }
|
|
6228
6356
|
];
|
|
6229
6357
|
var PositionControl = () => {
|
|
6230
|
-
const positionContext = useBoundProp(
|
|
6231
|
-
const stringPropContext = useBoundProp(
|
|
6358
|
+
const positionContext = useBoundProp(import_editor_props44.positionPropTypeUtil);
|
|
6359
|
+
const stringPropContext = useBoundProp(import_editor_props44.stringPropTypeUtil);
|
|
6232
6360
|
const isCustom = !!positionContext.value;
|
|
6233
6361
|
const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
|
|
6234
6362
|
const handlePositionChange = (event) => {
|
|
@@ -6239,8 +6367,8 @@ var PositionControl = () => {
|
|
|
6239
6367
|
stringPropContext.setValue(value);
|
|
6240
6368
|
}
|
|
6241
6369
|
};
|
|
6242
|
-
return /* @__PURE__ */
|
|
6243
|
-
|
|
6370
|
+
return /* @__PURE__ */ React92.createElement(import_ui76.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(import_ui76.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(import_ui76.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React92.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n41.__)("Object position", "elementor"))), /* @__PURE__ */ React92.createElement(import_ui76.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(
|
|
6371
|
+
import_ui76.Select,
|
|
6244
6372
|
{
|
|
6245
6373
|
size: "tiny",
|
|
6246
6374
|
displayEmpty: true,
|
|
@@ -6250,32 +6378,32 @@ var PositionControl = () => {
|
|
|
6250
6378
|
renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
|
|
6251
6379
|
fullWidth: true
|
|
6252
6380
|
},
|
|
6253
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
6254
|
-
)))), isCustom && /* @__PURE__ */
|
|
6381
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React92.createElement(import_editor_ui12.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
6382
|
+
)))), isCustom && /* @__PURE__ */ React92.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React92.createElement(import_ui76.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(import_ui76.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React92.createElement(
|
|
6255
6383
|
SizeControl,
|
|
6256
6384
|
{
|
|
6257
|
-
startIcon: /* @__PURE__ */
|
|
6385
|
+
startIcon: /* @__PURE__ */ React92.createElement(import_icons27.LetterXIcon, { fontSize: "tiny" }),
|
|
6258
6386
|
min: -Number.MAX_SAFE_INTEGER
|
|
6259
6387
|
}
|
|
6260
|
-
))), /* @__PURE__ */
|
|
6388
|
+
))), /* @__PURE__ */ React92.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React92.createElement(
|
|
6261
6389
|
SizeControl,
|
|
6262
6390
|
{
|
|
6263
|
-
startIcon: /* @__PURE__ */
|
|
6391
|
+
startIcon: /* @__PURE__ */ React92.createElement(import_icons27.LetterYIcon, { fontSize: "tiny" }),
|
|
6264
6392
|
min: -Number.MAX_SAFE_INTEGER
|
|
6265
6393
|
}
|
|
6266
6394
|
)))))));
|
|
6267
6395
|
};
|
|
6268
6396
|
|
|
6269
6397
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
6270
|
-
var
|
|
6271
|
-
var
|
|
6272
|
-
var
|
|
6273
|
-
var
|
|
6274
|
-
var
|
|
6275
|
-
var
|
|
6398
|
+
var React105 = __toESM(require("react"));
|
|
6399
|
+
var import_react62 = require("react");
|
|
6400
|
+
var import_editor_props53 = require("@elementor/editor-props");
|
|
6401
|
+
var import_icons34 = require("@elementor/icons");
|
|
6402
|
+
var import_ui89 = require("@elementor/ui");
|
|
6403
|
+
var import_i18n51 = require("@wordpress/i18n");
|
|
6276
6404
|
|
|
6277
6405
|
// src/controls/transform-control/initial-values.ts
|
|
6278
|
-
var
|
|
6406
|
+
var import_editor_props45 = require("@elementor/editor-props");
|
|
6279
6407
|
var TransformFunctionKeys = {
|
|
6280
6408
|
move: "transform-move",
|
|
6281
6409
|
scale: "transform-scale",
|
|
@@ -6305,40 +6433,40 @@ var initialTransformValue = {
|
|
|
6305
6433
|
z: { $$type: "size", value: { size: defaultValues.move.size, unit: defaultValues.move.unit } }
|
|
6306
6434
|
}
|
|
6307
6435
|
};
|
|
6308
|
-
var initialScaleValue =
|
|
6309
|
-
x:
|
|
6310
|
-
y:
|
|
6311
|
-
z:
|
|
6436
|
+
var initialScaleValue = import_editor_props45.scaleTransformPropTypeUtil.create({
|
|
6437
|
+
x: import_editor_props45.numberPropTypeUtil.create(defaultValues.scale),
|
|
6438
|
+
y: import_editor_props45.numberPropTypeUtil.create(defaultValues.scale),
|
|
6439
|
+
z: import_editor_props45.numberPropTypeUtil.create(defaultValues.scale)
|
|
6312
6440
|
});
|
|
6313
|
-
var initialRotateValue =
|
|
6441
|
+
var initialRotateValue = import_editor_props45.rotateTransformPropTypeUtil.create({
|
|
6314
6442
|
x: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
6315
6443
|
y: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
6316
6444
|
z: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } }
|
|
6317
6445
|
});
|
|
6318
|
-
var initialSkewValue =
|
|
6446
|
+
var initialSkewValue = import_editor_props45.skewTransformPropTypeUtil.create({
|
|
6319
6447
|
x: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } },
|
|
6320
6448
|
y: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } }
|
|
6321
6449
|
});
|
|
6322
6450
|
|
|
6323
6451
|
// src/controls/transform-control/transform-content.tsx
|
|
6324
|
-
var
|
|
6325
|
-
var
|
|
6326
|
-
var
|
|
6452
|
+
var React99 = __toESM(require("react"));
|
|
6453
|
+
var import_ui84 = require("@elementor/ui");
|
|
6454
|
+
var import_i18n46 = require("@wordpress/i18n");
|
|
6327
6455
|
|
|
6328
6456
|
// src/controls/transform-control/functions/move.tsx
|
|
6329
|
-
var
|
|
6330
|
-
var
|
|
6331
|
-
var
|
|
6332
|
-
var
|
|
6333
|
-
var
|
|
6334
|
-
var
|
|
6457
|
+
var React94 = __toESM(require("react"));
|
|
6458
|
+
var import_react55 = require("react");
|
|
6459
|
+
var import_editor_props46 = require("@elementor/editor-props");
|
|
6460
|
+
var import_icons28 = require("@elementor/icons");
|
|
6461
|
+
var import_ui78 = require("@elementor/ui");
|
|
6462
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
6335
6463
|
|
|
6336
6464
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
6337
|
-
var
|
|
6338
|
-
var
|
|
6465
|
+
var React93 = __toESM(require("react"));
|
|
6466
|
+
var import_ui77 = require("@elementor/ui");
|
|
6339
6467
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
6340
6468
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
6341
|
-
return /* @__PURE__ */
|
|
6469
|
+
return /* @__PURE__ */ React93.createElement(import_ui77.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React93.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React93.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React93.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React93.createElement(
|
|
6342
6470
|
SizeControl,
|
|
6343
6471
|
{
|
|
6344
6472
|
anchorRef,
|
|
@@ -6354,28 +6482,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
|
|
|
6354
6482
|
// src/controls/transform-control/functions/move.tsx
|
|
6355
6483
|
var moveAxisControls = [
|
|
6356
6484
|
{
|
|
6357
|
-
label: (0,
|
|
6485
|
+
label: (0, import_i18n42.__)("Move X", "elementor"),
|
|
6358
6486
|
bind: "x",
|
|
6359
|
-
startIcon: /* @__PURE__ */
|
|
6487
|
+
startIcon: /* @__PURE__ */ React94.createElement(import_icons28.ArrowRightIcon, { fontSize: "tiny" }),
|
|
6360
6488
|
units: ["px", "%", "em", "rem", "vw"]
|
|
6361
6489
|
},
|
|
6362
6490
|
{
|
|
6363
|
-
label: (0,
|
|
6491
|
+
label: (0, import_i18n42.__)("Move Y", "elementor"),
|
|
6364
6492
|
bind: "y",
|
|
6365
|
-
startIcon: /* @__PURE__ */
|
|
6493
|
+
startIcon: /* @__PURE__ */ React94.createElement(import_icons28.ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
6366
6494
|
units: ["px", "%", "em", "rem", "vh"]
|
|
6367
6495
|
},
|
|
6368
6496
|
{
|
|
6369
|
-
label: (0,
|
|
6497
|
+
label: (0, import_i18n42.__)("Move Z", "elementor"),
|
|
6370
6498
|
bind: "z",
|
|
6371
|
-
startIcon: /* @__PURE__ */
|
|
6499
|
+
startIcon: /* @__PURE__ */ React94.createElement(import_icons28.ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
6372
6500
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
6373
6501
|
}
|
|
6374
6502
|
];
|
|
6375
6503
|
var Move = () => {
|
|
6376
|
-
const context = useBoundProp(
|
|
6377
|
-
const rowRefs = [(0,
|
|
6378
|
-
return /* @__PURE__ */
|
|
6504
|
+
const context = useBoundProp(import_editor_props46.moveTransformPropTypeUtil);
|
|
6505
|
+
const rowRefs = [(0, import_react55.useRef)(null), (0, import_react55.useRef)(null), (0, import_react55.useRef)(null)];
|
|
6506
|
+
return /* @__PURE__ */ React94.createElement(import_ui78.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React94.createElement(
|
|
6379
6507
|
AxisRow,
|
|
6380
6508
|
{
|
|
6381
6509
|
key: control.bind,
|
|
@@ -6388,34 +6516,34 @@ var Move = () => {
|
|
|
6388
6516
|
};
|
|
6389
6517
|
|
|
6390
6518
|
// src/controls/transform-control/functions/rotate.tsx
|
|
6391
|
-
var
|
|
6392
|
-
var
|
|
6393
|
-
var
|
|
6394
|
-
var
|
|
6395
|
-
var
|
|
6396
|
-
var
|
|
6519
|
+
var React95 = __toESM(require("react"));
|
|
6520
|
+
var import_react56 = require("react");
|
|
6521
|
+
var import_editor_props47 = require("@elementor/editor-props");
|
|
6522
|
+
var import_icons29 = require("@elementor/icons");
|
|
6523
|
+
var import_ui79 = require("@elementor/ui");
|
|
6524
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
6397
6525
|
var rotateAxisControls = [
|
|
6398
6526
|
{
|
|
6399
|
-
label: (0,
|
|
6527
|
+
label: (0, import_i18n43.__)("Rotate X", "elementor"),
|
|
6400
6528
|
bind: "x",
|
|
6401
|
-
startIcon: /* @__PURE__ */
|
|
6529
|
+
startIcon: /* @__PURE__ */ React95.createElement(import_icons29.Arrow360Icon, { fontSize: "tiny" })
|
|
6402
6530
|
},
|
|
6403
6531
|
{
|
|
6404
|
-
label: (0,
|
|
6532
|
+
label: (0, import_i18n43.__)("Rotate Y", "elementor"),
|
|
6405
6533
|
bind: "y",
|
|
6406
|
-
startIcon: /* @__PURE__ */
|
|
6534
|
+
startIcon: /* @__PURE__ */ React95.createElement(import_icons29.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
6407
6535
|
},
|
|
6408
6536
|
{
|
|
6409
|
-
label: (0,
|
|
6537
|
+
label: (0, import_i18n43.__)("Rotate Z", "elementor"),
|
|
6410
6538
|
bind: "z",
|
|
6411
|
-
startIcon: /* @__PURE__ */
|
|
6539
|
+
startIcon: /* @__PURE__ */ React95.createElement(import_icons29.RotateClockwiseIcon, { fontSize: "tiny" })
|
|
6412
6540
|
}
|
|
6413
6541
|
];
|
|
6414
6542
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
6415
6543
|
var Rotate = () => {
|
|
6416
|
-
const context = useBoundProp(
|
|
6417
|
-
const rowRefs = [(0,
|
|
6418
|
-
return /* @__PURE__ */
|
|
6544
|
+
const context = useBoundProp(import_editor_props47.rotateTransformPropTypeUtil);
|
|
6545
|
+
const rowRefs = [(0, import_react56.useRef)(null), (0, import_react56.useRef)(null), (0, import_react56.useRef)(null)];
|
|
6546
|
+
return /* @__PURE__ */ React95.createElement(import_ui79.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React95.createElement(
|
|
6419
6547
|
AxisRow,
|
|
6420
6548
|
{
|
|
6421
6549
|
key: control.bind,
|
|
@@ -6427,68 +6555,68 @@ var Rotate = () => {
|
|
|
6427
6555
|
};
|
|
6428
6556
|
|
|
6429
6557
|
// src/controls/transform-control/functions/scale.tsx
|
|
6430
|
-
var
|
|
6431
|
-
var
|
|
6432
|
-
var
|
|
6433
|
-
var
|
|
6434
|
-
var
|
|
6435
|
-
var
|
|
6558
|
+
var React97 = __toESM(require("react"));
|
|
6559
|
+
var import_react57 = require("react");
|
|
6560
|
+
var import_editor_props48 = require("@elementor/editor-props");
|
|
6561
|
+
var import_icons30 = require("@elementor/icons");
|
|
6562
|
+
var import_ui81 = require("@elementor/ui");
|
|
6563
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
6436
6564
|
|
|
6437
6565
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
6438
|
-
var
|
|
6439
|
-
var
|
|
6566
|
+
var React96 = __toESM(require("react"));
|
|
6567
|
+
var import_ui80 = require("@elementor/ui");
|
|
6440
6568
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
6441
|
-
return /* @__PURE__ */
|
|
6569
|
+
return /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, label)), /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React96.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
6442
6570
|
};
|
|
6443
6571
|
|
|
6444
6572
|
// src/controls/transform-control/functions/scale.tsx
|
|
6445
6573
|
var scaleAxisControls = [
|
|
6446
6574
|
{
|
|
6447
|
-
label: (0,
|
|
6575
|
+
label: (0, import_i18n44.__)("Scale X", "elementor"),
|
|
6448
6576
|
bind: "x",
|
|
6449
|
-
startIcon: /* @__PURE__ */
|
|
6577
|
+
startIcon: /* @__PURE__ */ React97.createElement(import_icons30.ArrowRightIcon, { fontSize: "tiny" })
|
|
6450
6578
|
},
|
|
6451
6579
|
{
|
|
6452
|
-
label: (0,
|
|
6580
|
+
label: (0, import_i18n44.__)("Scale Y", "elementor"),
|
|
6453
6581
|
bind: "y",
|
|
6454
|
-
startIcon: /* @__PURE__ */
|
|
6582
|
+
startIcon: /* @__PURE__ */ React97.createElement(import_icons30.ArrowDownSmallIcon, { fontSize: "tiny" })
|
|
6455
6583
|
},
|
|
6456
6584
|
{
|
|
6457
|
-
label: (0,
|
|
6585
|
+
label: (0, import_i18n44.__)("Scale Z", "elementor"),
|
|
6458
6586
|
bind: "z",
|
|
6459
|
-
startIcon: /* @__PURE__ */
|
|
6587
|
+
startIcon: /* @__PURE__ */ React97.createElement(import_icons30.ArrowDownLeftIcon, { fontSize: "tiny" })
|
|
6460
6588
|
}
|
|
6461
6589
|
];
|
|
6462
6590
|
var Scale = () => {
|
|
6463
|
-
const context = useBoundProp(
|
|
6464
|
-
const rowRefs = [(0,
|
|
6465
|
-
return /* @__PURE__ */
|
|
6591
|
+
const context = useBoundProp(import_editor_props48.scaleTransformPropTypeUtil);
|
|
6592
|
+
const rowRefs = [(0, import_react57.useRef)(null), (0, import_react57.useRef)(null), (0, import_react57.useRef)(null)];
|
|
6593
|
+
return /* @__PURE__ */ React97.createElement(import_ui81.Grid, { 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] })))));
|
|
6466
6594
|
};
|
|
6467
6595
|
|
|
6468
6596
|
// src/controls/transform-control/functions/skew.tsx
|
|
6469
|
-
var
|
|
6470
|
-
var
|
|
6471
|
-
var
|
|
6472
|
-
var
|
|
6473
|
-
var
|
|
6474
|
-
var
|
|
6597
|
+
var React98 = __toESM(require("react"));
|
|
6598
|
+
var import_react58 = require("react");
|
|
6599
|
+
var import_editor_props49 = require("@elementor/editor-props");
|
|
6600
|
+
var import_icons31 = require("@elementor/icons");
|
|
6601
|
+
var import_ui82 = require("@elementor/ui");
|
|
6602
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
6475
6603
|
var skewAxisControls = [
|
|
6476
6604
|
{
|
|
6477
|
-
label: (0,
|
|
6605
|
+
label: (0, import_i18n45.__)("Skew X", "elementor"),
|
|
6478
6606
|
bind: "x",
|
|
6479
|
-
startIcon: /* @__PURE__ */
|
|
6607
|
+
startIcon: /* @__PURE__ */ React98.createElement(import_icons31.ArrowRightIcon, { fontSize: "tiny" })
|
|
6480
6608
|
},
|
|
6481
6609
|
{
|
|
6482
|
-
label: (0,
|
|
6610
|
+
label: (0, import_i18n45.__)("Skew Y", "elementor"),
|
|
6483
6611
|
bind: "y",
|
|
6484
|
-
startIcon: /* @__PURE__ */
|
|
6612
|
+
startIcon: /* @__PURE__ */ React98.createElement(import_icons31.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
6485
6613
|
}
|
|
6486
6614
|
];
|
|
6487
6615
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
6488
6616
|
var Skew = () => {
|
|
6489
|
-
const context = useBoundProp(
|
|
6490
|
-
const rowRefs = [(0,
|
|
6491
|
-
return /* @__PURE__ */
|
|
6617
|
+
const context = useBoundProp(import_editor_props49.skewTransformPropTypeUtil);
|
|
6618
|
+
const rowRefs = [(0, import_react58.useRef)(null), (0, import_react58.useRef)(null), (0, import_react58.useRef)(null)];
|
|
6619
|
+
return /* @__PURE__ */ React98.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React98.createElement(PropProvider, { ...context }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React98.createElement(
|
|
6492
6620
|
AxisRow,
|
|
6493
6621
|
{
|
|
6494
6622
|
key: control.bind,
|
|
@@ -6500,19 +6628,19 @@ var Skew = () => {
|
|
|
6500
6628
|
};
|
|
6501
6629
|
|
|
6502
6630
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
6503
|
-
var
|
|
6504
|
-
var
|
|
6505
|
-
var
|
|
6631
|
+
var import_react59 = require("react");
|
|
6632
|
+
var import_editor_props50 = require("@elementor/editor-props");
|
|
6633
|
+
var import_ui83 = require("@elementor/ui");
|
|
6506
6634
|
var useTransformTabsHistory = ({
|
|
6507
6635
|
move: initialMove,
|
|
6508
6636
|
scale: initialScale,
|
|
6509
6637
|
rotate: initialRotate,
|
|
6510
6638
|
skew: initialSkew
|
|
6511
6639
|
}) => {
|
|
6512
|
-
const { value: moveValue, setValue: setMoveValue } = useBoundProp(
|
|
6513
|
-
const { value: scaleValue, setValue: setScaleValue } = useBoundProp(
|
|
6514
|
-
const { value: rotateValue, setValue: setRotateValue } = useBoundProp(
|
|
6515
|
-
const { value: skewValue, setValue: setSkewValue } = useBoundProp(
|
|
6640
|
+
const { value: moveValue, setValue: setMoveValue } = useBoundProp(import_editor_props50.moveTransformPropTypeUtil);
|
|
6641
|
+
const { value: scaleValue, setValue: setScaleValue } = useBoundProp(import_editor_props50.scaleTransformPropTypeUtil);
|
|
6642
|
+
const { value: rotateValue, setValue: setRotateValue } = useBoundProp(import_editor_props50.rotateTransformPropTypeUtil);
|
|
6643
|
+
const { value: skewValue, setValue: setSkewValue } = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
|
|
6516
6644
|
const { openItemIndex, items: items2 } = useRepeaterContext();
|
|
6517
6645
|
const getCurrentTransformType = () => {
|
|
6518
6646
|
switch (true) {
|
|
@@ -6526,8 +6654,8 @@ var useTransformTabsHistory = ({
|
|
|
6526
6654
|
return TransformFunctionKeys.move;
|
|
6527
6655
|
}
|
|
6528
6656
|
};
|
|
6529
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
6530
|
-
const valuesHistory = (0,
|
|
6657
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui83.useTabs)(getCurrentTransformType());
|
|
6658
|
+
const valuesHistory = (0, import_react59.useRef)({
|
|
6531
6659
|
move: initialMove,
|
|
6532
6660
|
scale: initialScale,
|
|
6533
6661
|
rotate: initialRotate,
|
|
@@ -6588,8 +6716,8 @@ var TransformContent = () => {
|
|
|
6588
6716
|
rotate: initialRotateValue.value,
|
|
6589
6717
|
skew: initialSkewValue.value
|
|
6590
6718
|
});
|
|
6591
|
-
return /* @__PURE__ */
|
|
6592
|
-
|
|
6719
|
+
return /* @__PURE__ */ React99.createElement(PopoverContent, null, /* @__PURE__ */ React99.createElement(import_ui84.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React99.createElement(import_ui84.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React99.createElement(
|
|
6720
|
+
import_ui84.Tabs,
|
|
6593
6721
|
{
|
|
6594
6722
|
size: "small",
|
|
6595
6723
|
variant: "fullWidth",
|
|
@@ -6599,37 +6727,37 @@ var TransformContent = () => {
|
|
|
6599
6727
|
}
|
|
6600
6728
|
},
|
|
6601
6729
|
...getTabsProps(),
|
|
6602
|
-
"aria-label": (0,
|
|
6730
|
+
"aria-label": (0, import_i18n46.__)("Transform", "elementor")
|
|
6603
6731
|
},
|
|
6604
|
-
/* @__PURE__ */
|
|
6605
|
-
/* @__PURE__ */
|
|
6606
|
-
/* @__PURE__ */
|
|
6607
|
-
/* @__PURE__ */
|
|
6608
|
-
)), /* @__PURE__ */
|
|
6732
|
+
/* @__PURE__ */ React99.createElement(import_ui84.Tab, { label: (0, import_i18n46.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
6733
|
+
/* @__PURE__ */ React99.createElement(import_ui84.Tab, { label: (0, import_i18n46.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
6734
|
+
/* @__PURE__ */ React99.createElement(import_ui84.Tab, { label: (0, import_i18n46.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
6735
|
+
/* @__PURE__ */ React99.createElement(import_ui84.Tab, { label: (0, import_i18n46.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
6736
|
+
)), /* @__PURE__ */ React99.createElement(import_ui84.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React99.createElement(Move, null)), /* @__PURE__ */ React99.createElement(import_ui84.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React99.createElement(Scale, null)), /* @__PURE__ */ React99.createElement(import_ui84.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React99.createElement(Rotate, null)), /* @__PURE__ */ React99.createElement(import_ui84.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React99.createElement(Skew, null))));
|
|
6609
6737
|
};
|
|
6610
6738
|
|
|
6611
6739
|
// src/controls/transform-control/transform-icon.tsx
|
|
6612
|
-
var
|
|
6613
|
-
var
|
|
6740
|
+
var React100 = __toESM(require("react"));
|
|
6741
|
+
var import_icons32 = require("@elementor/icons");
|
|
6614
6742
|
var TransformIcon = ({ value }) => {
|
|
6615
6743
|
switch (value.$$type) {
|
|
6616
6744
|
case TransformFunctionKeys.move:
|
|
6617
|
-
return /* @__PURE__ */
|
|
6745
|
+
return /* @__PURE__ */ React100.createElement(import_icons32.ArrowsMaximizeIcon, { fontSize: "tiny" });
|
|
6618
6746
|
case TransformFunctionKeys.scale:
|
|
6619
|
-
return /* @__PURE__ */
|
|
6747
|
+
return /* @__PURE__ */ React100.createElement(import_icons32.ArrowAutofitHeightIcon, { fontSize: "tiny" });
|
|
6620
6748
|
case TransformFunctionKeys.rotate:
|
|
6621
|
-
return /* @__PURE__ */
|
|
6749
|
+
return /* @__PURE__ */ React100.createElement(import_icons32.RotateClockwise2Icon, { fontSize: "tiny" });
|
|
6622
6750
|
case TransformFunctionKeys.skew:
|
|
6623
|
-
return /* @__PURE__ */
|
|
6751
|
+
return /* @__PURE__ */ React100.createElement(import_icons32.SkewXIcon, { fontSize: "tiny" });
|
|
6624
6752
|
default:
|
|
6625
6753
|
return null;
|
|
6626
6754
|
}
|
|
6627
6755
|
};
|
|
6628
6756
|
|
|
6629
6757
|
// src/controls/transform-control/transform-label.tsx
|
|
6630
|
-
var
|
|
6631
|
-
var
|
|
6632
|
-
var
|
|
6758
|
+
var React101 = __toESM(require("react"));
|
|
6759
|
+
var import_ui85 = require("@elementor/ui");
|
|
6760
|
+
var import_i18n47 = require("@wordpress/i18n");
|
|
6633
6761
|
var orderedAxis = ["x", "y", "z"];
|
|
6634
6762
|
var formatLabel = (value, functionType) => {
|
|
6635
6763
|
return orderedAxis.map((axisKey) => {
|
|
@@ -6647,98 +6775,98 @@ var TransformLabel = (props) => {
|
|
|
6647
6775
|
const { $$type, value } = props.value;
|
|
6648
6776
|
switch ($$type) {
|
|
6649
6777
|
case TransformFunctionKeys.move:
|
|
6650
|
-
return /* @__PURE__ */
|
|
6778
|
+
return /* @__PURE__ */ React101.createElement(Label2, { label: (0, import_i18n47.__)("Move", "elementor"), value: formatLabel(value, "move") });
|
|
6651
6779
|
case TransformFunctionKeys.scale:
|
|
6652
|
-
return /* @__PURE__ */
|
|
6780
|
+
return /* @__PURE__ */ React101.createElement(Label2, { label: (0, import_i18n47.__)("Scale", "elementor"), value: formatLabel(value, "scale") });
|
|
6653
6781
|
case TransformFunctionKeys.rotate:
|
|
6654
|
-
return /* @__PURE__ */
|
|
6782
|
+
return /* @__PURE__ */ React101.createElement(Label2, { label: (0, import_i18n47.__)("Rotate", "elementor"), value: formatLabel(value, "rotate") });
|
|
6655
6783
|
case TransformFunctionKeys.skew:
|
|
6656
|
-
return /* @__PURE__ */
|
|
6784
|
+
return /* @__PURE__ */ React101.createElement(Label2, { label: (0, import_i18n47.__)("Skew", "elementor"), value: formatLabel(value, "skew") });
|
|
6657
6785
|
default:
|
|
6658
6786
|
return "";
|
|
6659
6787
|
}
|
|
6660
6788
|
};
|
|
6661
6789
|
var Label2 = ({ label, value }) => {
|
|
6662
|
-
return /* @__PURE__ */
|
|
6790
|
+
return /* @__PURE__ */ React101.createElement(import_ui85.Box, { component: "span" }, label, ": ", value);
|
|
6663
6791
|
};
|
|
6664
6792
|
|
|
6665
6793
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
6666
|
-
var
|
|
6794
|
+
var React104 = __toESM(require("react"));
|
|
6667
6795
|
var import_editor_ui13 = require("@elementor/editor-ui");
|
|
6668
|
-
var
|
|
6669
|
-
var
|
|
6670
|
-
var
|
|
6796
|
+
var import_icons33 = require("@elementor/icons");
|
|
6797
|
+
var import_ui88 = require("@elementor/ui");
|
|
6798
|
+
var import_i18n50 = require("@wordpress/i18n");
|
|
6671
6799
|
|
|
6672
6800
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
6673
|
-
var
|
|
6674
|
-
var
|
|
6675
|
-
var
|
|
6676
|
-
var
|
|
6677
|
-
var
|
|
6801
|
+
var React102 = __toESM(require("react"));
|
|
6802
|
+
var import_react60 = require("react");
|
|
6803
|
+
var import_editor_props51 = require("@elementor/editor-props");
|
|
6804
|
+
var import_ui86 = require("@elementor/ui");
|
|
6805
|
+
var import_i18n48 = require("@wordpress/i18n");
|
|
6678
6806
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
6679
6807
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
6680
|
-
label: (0,
|
|
6808
|
+
label: (0, import_i18n48.__)("Perspective", "elementor"),
|
|
6681
6809
|
bind: "perspective",
|
|
6682
6810
|
units: ["px", "em", "rem", "vw", "vh"]
|
|
6683
6811
|
};
|
|
6684
6812
|
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
6685
6813
|
{
|
|
6686
|
-
label: (0,
|
|
6814
|
+
label: (0, import_i18n48.__)("Origin X", "elementor"),
|
|
6687
6815
|
bind: "x",
|
|
6688
6816
|
units: ORIGIN_UNITS
|
|
6689
6817
|
},
|
|
6690
6818
|
{
|
|
6691
|
-
label: (0,
|
|
6819
|
+
label: (0, import_i18n48.__)("Origin Y", "elementor"),
|
|
6692
6820
|
bind: "y",
|
|
6693
6821
|
units: ORIGIN_UNITS
|
|
6694
6822
|
}
|
|
6695
6823
|
];
|
|
6696
6824
|
var ChildrenPerspectiveControl = () => {
|
|
6697
|
-
return /* @__PURE__ */
|
|
6825
|
+
return /* @__PURE__ */ React102.createElement(import_ui86.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, (0, import_i18n48.__)("Children perspective", "elementor")), /* @__PURE__ */ React102.createElement(PerspectiveControl, null), /* @__PURE__ */ React102.createElement(PerspectiveOriginControl, null));
|
|
6698
6826
|
};
|
|
6699
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
6700
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
6827
|
+
var PerspectiveControl = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React102.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
6828
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React102.createElement(PerspectiveOriginControlProvider, null));
|
|
6701
6829
|
var PerspectiveOriginControlProvider = () => {
|
|
6702
|
-
const context = useBoundProp(
|
|
6703
|
-
return /* @__PURE__ */
|
|
6830
|
+
const context = useBoundProp(import_editor_props51.perspectiveOriginPropTypeUtil);
|
|
6831
|
+
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 }))));
|
|
6704
6832
|
};
|
|
6705
6833
|
var ControlFields = ({ control }) => {
|
|
6706
|
-
const rowRef = (0,
|
|
6707
|
-
return /* @__PURE__ */
|
|
6834
|
+
const rowRef = (0, import_react60.useRef)(null);
|
|
6835
|
+
return /* @__PURE__ */ React102.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React102.createElement(import_ui86.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React102.createElement(import_ui86.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
6708
6836
|
};
|
|
6709
6837
|
|
|
6710
6838
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
6711
|
-
var
|
|
6712
|
-
var
|
|
6713
|
-
var
|
|
6714
|
-
var
|
|
6715
|
-
var
|
|
6839
|
+
var React103 = __toESM(require("react"));
|
|
6840
|
+
var import_react61 = require("react");
|
|
6841
|
+
var import_editor_props52 = require("@elementor/editor-props");
|
|
6842
|
+
var import_ui87 = require("@elementor/ui");
|
|
6843
|
+
var import_i18n49 = require("@wordpress/i18n");
|
|
6716
6844
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
6717
6845
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
6718
6846
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
6719
6847
|
{
|
|
6720
|
-
label: (0,
|
|
6848
|
+
label: (0, import_i18n49.__)("Origin X", "elementor"),
|
|
6721
6849
|
bind: "x",
|
|
6722
6850
|
units: TRANSFORM_ORIGIN_UNITS
|
|
6723
6851
|
},
|
|
6724
6852
|
{
|
|
6725
|
-
label: (0,
|
|
6853
|
+
label: (0, import_i18n49.__)("Origin Y", "elementor"),
|
|
6726
6854
|
bind: "y",
|
|
6727
6855
|
units: TRANSFORM_ORIGIN_UNITS
|
|
6728
6856
|
},
|
|
6729
6857
|
{
|
|
6730
|
-
label: (0,
|
|
6858
|
+
label: (0, import_i18n49.__)("Origin Z", "elementor"),
|
|
6731
6859
|
bind: "z",
|
|
6732
6860
|
units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
|
|
6733
6861
|
}
|
|
6734
6862
|
];
|
|
6735
6863
|
var TransformOriginControl = () => {
|
|
6736
|
-
return /* @__PURE__ */
|
|
6864
|
+
return /* @__PURE__ */ React103.createElement(import_ui87.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, (0, import_i18n49.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React103.createElement(ControlFields2, { control, key: control.bind })));
|
|
6737
6865
|
};
|
|
6738
6866
|
var ControlFields2 = ({ control }) => {
|
|
6739
|
-
const context = useBoundProp(
|
|
6740
|
-
const rowRef = (0,
|
|
6741
|
-
return /* @__PURE__ */
|
|
6867
|
+
const context = useBoundProp(import_editor_props52.transformOriginPropTypeUtil);
|
|
6868
|
+
const rowRef = (0, import_react61.useRef)(null);
|
|
6869
|
+
return /* @__PURE__ */ React103.createElement(PropProvider, { ...context }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
|
|
6742
6870
|
};
|
|
6743
6871
|
|
|
6744
6872
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
@@ -6748,12 +6876,12 @@ var TransformSettingsControl = ({
|
|
|
6748
6876
|
anchorRef,
|
|
6749
6877
|
showChildrenPerspective
|
|
6750
6878
|
}) => {
|
|
6751
|
-
const popupProps = (0,
|
|
6879
|
+
const popupProps = (0, import_ui88.bindPopover)({
|
|
6752
6880
|
...popupState,
|
|
6753
6881
|
anchorEl: anchorRef.current ?? void 0
|
|
6754
6882
|
});
|
|
6755
|
-
return /* @__PURE__ */
|
|
6756
|
-
|
|
6883
|
+
return /* @__PURE__ */ React104.createElement(
|
|
6884
|
+
import_ui88.Popover,
|
|
6757
6885
|
{
|
|
6758
6886
|
disablePortal: true,
|
|
6759
6887
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
@@ -6767,16 +6895,16 @@ var TransformSettingsControl = ({
|
|
|
6767
6895
|
},
|
|
6768
6896
|
...popupProps
|
|
6769
6897
|
},
|
|
6770
|
-
/* @__PURE__ */
|
|
6898
|
+
/* @__PURE__ */ React104.createElement(
|
|
6771
6899
|
import_editor_ui13.PopoverHeader,
|
|
6772
6900
|
{
|
|
6773
|
-
title: (0,
|
|
6901
|
+
title: (0, import_i18n50.__)("Transform settings", "elementor"),
|
|
6774
6902
|
onClose: popupState.close,
|
|
6775
|
-
icon: /* @__PURE__ */
|
|
6903
|
+
icon: /* @__PURE__ */ React104.createElement(import_icons33.AdjustmentsIcon, { fontSize: SIZE10 })
|
|
6776
6904
|
}
|
|
6777
6905
|
),
|
|
6778
|
-
/* @__PURE__ */
|
|
6779
|
-
/* @__PURE__ */
|
|
6906
|
+
/* @__PURE__ */ React104.createElement(import_ui88.Divider, null),
|
|
6907
|
+
/* @__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(import_ui88.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React104.createElement(import_ui88.Divider, null)), /* @__PURE__ */ React104.createElement(ChildrenPerspectiveControl, null)))
|
|
6780
6908
|
);
|
|
6781
6909
|
};
|
|
6782
6910
|
|
|
@@ -6784,56 +6912,56 @@ var TransformSettingsControl = ({
|
|
|
6784
6912
|
var SIZE11 = "tiny";
|
|
6785
6913
|
var TransformRepeaterControl = createControl(
|
|
6786
6914
|
({ showChildrenPerspective }) => {
|
|
6787
|
-
const context = useBoundProp(
|
|
6788
|
-
const headerRef = (0,
|
|
6789
|
-
const popupState = (0,
|
|
6790
|
-
return /* @__PURE__ */
|
|
6915
|
+
const context = useBoundProp(import_editor_props53.transformPropTypeUtil);
|
|
6916
|
+
const headerRef = (0, import_react62.useRef)(null);
|
|
6917
|
+
const popupState = (0, import_ui89.usePopupState)({ variant: "popover" });
|
|
6918
|
+
return /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(
|
|
6791
6919
|
TransformSettingsControl,
|
|
6792
6920
|
{
|
|
6793
6921
|
popupState,
|
|
6794
6922
|
anchorRef: headerRef,
|
|
6795
6923
|
showChildrenPerspective
|
|
6796
6924
|
}
|
|
6797
|
-
), /* @__PURE__ */
|
|
6925
|
+
), /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React105.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
6798
6926
|
}
|
|
6799
6927
|
);
|
|
6800
|
-
var ToolTip = /* @__PURE__ */
|
|
6801
|
-
|
|
6928
|
+
var ToolTip = /* @__PURE__ */ React105.createElement(
|
|
6929
|
+
import_ui89.Box,
|
|
6802
6930
|
{
|
|
6803
6931
|
component: "span",
|
|
6804
6932
|
"aria-label": void 0,
|
|
6805
6933
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
6806
6934
|
},
|
|
6807
|
-
/* @__PURE__ */
|
|
6808
|
-
/* @__PURE__ */
|
|
6935
|
+
/* @__PURE__ */ React105.createElement(import_icons34.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
|
|
6936
|
+
/* @__PURE__ */ React105.createElement(import_ui89.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n51.__)("You can use each kind of transform only once per element.", "elementor"))
|
|
6809
6937
|
);
|
|
6810
6938
|
var Repeater2 = ({
|
|
6811
6939
|
headerRef,
|
|
6812
6940
|
propType,
|
|
6813
6941
|
popupState
|
|
6814
6942
|
}) => {
|
|
6815
|
-
const transformFunctionsContext = useBoundProp(
|
|
6943
|
+
const transformFunctionsContext = useBoundProp(import_editor_props53.transformFunctionsPropTypeUtil);
|
|
6816
6944
|
const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
|
|
6817
6945
|
const { value: transformValues, bind } = transformFunctionsContext;
|
|
6818
6946
|
const getInitialValue2 = () => {
|
|
6819
6947
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
6820
6948
|
};
|
|
6821
6949
|
const shouldDisableAddItem = !getInitialValue2();
|
|
6822
|
-
return /* @__PURE__ */
|
|
6950
|
+
return /* @__PURE__ */ React105.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React105.createElement(
|
|
6823
6951
|
ControlRepeater,
|
|
6824
6952
|
{
|
|
6825
6953
|
initial: getInitialValue2() ?? initialTransformValue,
|
|
6826
|
-
propTypeUtil:
|
|
6954
|
+
propTypeUtil: import_editor_props53.transformFunctionsPropTypeUtil
|
|
6827
6955
|
},
|
|
6828
|
-
/* @__PURE__ */
|
|
6956
|
+
/* @__PURE__ */ React105.createElement(
|
|
6829
6957
|
RepeaterHeader,
|
|
6830
6958
|
{
|
|
6831
|
-
label: (0,
|
|
6832
|
-
adornment: () => /* @__PURE__ */
|
|
6959
|
+
label: (0, import_i18n51.__)("Transform", "elementor"),
|
|
6960
|
+
adornment: () => /* @__PURE__ */ React105.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
6833
6961
|
ref: headerRef
|
|
6834
6962
|
},
|
|
6835
|
-
/* @__PURE__ */
|
|
6836
|
-
/* @__PURE__ */
|
|
6963
|
+
/* @__PURE__ */ React105.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
6964
|
+
/* @__PURE__ */ React105.createElement(
|
|
6837
6965
|
TooltipAddItemAction,
|
|
6838
6966
|
{
|
|
6839
6967
|
disabled: shouldDisableAddItem,
|
|
@@ -6843,15 +6971,15 @@ var Repeater2 = ({
|
|
|
6843
6971
|
}
|
|
6844
6972
|
)
|
|
6845
6973
|
),
|
|
6846
|
-
/* @__PURE__ */
|
|
6974
|
+
/* @__PURE__ */ React105.createElement(ItemsContainer, null, /* @__PURE__ */ React105.createElement(
|
|
6847
6975
|
Item,
|
|
6848
6976
|
{
|
|
6849
6977
|
Icon: TransformIcon,
|
|
6850
6978
|
Label: TransformLabel,
|
|
6851
|
-
actions: /* @__PURE__ */
|
|
6979
|
+
actions: /* @__PURE__ */ React105.createElement(React105.Fragment, null, /* @__PURE__ */ React105.createElement(DisableItemAction, null), /* @__PURE__ */ React105.createElement(RemoveItemAction, null))
|
|
6852
6980
|
}
|
|
6853
6981
|
)),
|
|
6854
|
-
/* @__PURE__ */
|
|
6982
|
+
/* @__PURE__ */ React105.createElement(EditItemPopover, null, /* @__PURE__ */ React105.createElement(TransformContent, null))
|
|
6855
6983
|
));
|
|
6856
6984
|
};
|
|
6857
6985
|
var TransformBasePopoverTrigger = ({
|
|
@@ -6859,30 +6987,30 @@ var TransformBasePopoverTrigger = ({
|
|
|
6859
6987
|
repeaterBindKey
|
|
6860
6988
|
}) => {
|
|
6861
6989
|
const { bind } = useBoundProp();
|
|
6862
|
-
const titleLabel = (0,
|
|
6863
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
6990
|
+
const titleLabel = (0, import_i18n51.__)("Transform settings", "elementor");
|
|
6991
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React105.createElement(import_ui89.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React105.createElement(import_ui89.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui89.bindTrigger)(popupState) }, /* @__PURE__ */ React105.createElement(import_icons34.AdjustmentsIcon, { fontSize: SIZE11 })));
|
|
6864
6992
|
};
|
|
6865
6993
|
|
|
6866
6994
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
6867
|
-
var
|
|
6868
|
-
var
|
|
6869
|
-
var
|
|
6870
|
-
var
|
|
6871
|
-
var
|
|
6995
|
+
var React108 = __toESM(require("react"));
|
|
6996
|
+
var import_react65 = require("react");
|
|
6997
|
+
var import_editor_props56 = require("@elementor/editor-props");
|
|
6998
|
+
var import_icons36 = require("@elementor/icons");
|
|
6999
|
+
var import_ui92 = require("@elementor/ui");
|
|
6872
7000
|
var import_utils7 = require("@elementor/utils");
|
|
6873
|
-
var
|
|
7001
|
+
var import_i18n54 = require("@wordpress/i18n");
|
|
6874
7002
|
|
|
6875
7003
|
// src/controls/selection-size-control.tsx
|
|
6876
|
-
var
|
|
6877
|
-
var
|
|
6878
|
-
var
|
|
6879
|
-
var
|
|
7004
|
+
var React106 = __toESM(require("react"));
|
|
7005
|
+
var import_react63 = require("react");
|
|
7006
|
+
var import_editor_props54 = require("@elementor/editor-props");
|
|
7007
|
+
var import_ui90 = require("@elementor/ui");
|
|
6880
7008
|
var SelectionSizeControl = createControl(
|
|
6881
7009
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
6882
|
-
const { value, setValue, propType } = useBoundProp(
|
|
6883
|
-
const rowRef = (0,
|
|
7010
|
+
const { value, setValue, propType } = useBoundProp(import_editor_props54.selectionSizePropTypeUtil);
|
|
7011
|
+
const rowRef = (0, import_react63.useRef)(null);
|
|
6884
7012
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
6885
|
-
const currentSizeConfig = (0,
|
|
7013
|
+
const currentSizeConfig = (0, import_react63.useMemo)(() => {
|
|
6886
7014
|
switch (value.selection.$$type) {
|
|
6887
7015
|
case "key-value":
|
|
6888
7016
|
return sizeConfigMap[value?.selection?.value.value.value || ""];
|
|
@@ -6893,7 +7021,7 @@ var SelectionSizeControl = createControl(
|
|
|
6893
7021
|
}
|
|
6894
7022
|
}, [value, sizeConfigMap]);
|
|
6895
7023
|
const SelectionComponent = selectionConfig.component;
|
|
6896
|
-
return /* @__PURE__ */
|
|
7024
|
+
return /* @__PURE__ */ React106.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React106.createElement(import_ui90.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React106.createElement(import_ui90.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React106.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React106.createElement(import_ui90.Grid, { 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(import_ui90.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React106.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React106.createElement(import_ui90.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React106.createElement(
|
|
6897
7025
|
SizeControl,
|
|
6898
7026
|
{
|
|
6899
7027
|
anchorRef: rowRef,
|
|
@@ -6908,12 +7036,12 @@ var SelectionSizeControl = createControl(
|
|
|
6908
7036
|
|
|
6909
7037
|
// src/controls/transition-control/data.ts
|
|
6910
7038
|
var import_utils6 = require("@elementor/utils");
|
|
6911
|
-
var
|
|
7039
|
+
var import_i18n52 = require("@wordpress/i18n");
|
|
6912
7040
|
var initialTransitionValue = {
|
|
6913
7041
|
selection: {
|
|
6914
7042
|
$$type: "key-value",
|
|
6915
7043
|
value: {
|
|
6916
|
-
key: { value: (0,
|
|
7044
|
+
key: { value: (0, import_i18n52.__)("All properties", "elementor"), $$type: "string" },
|
|
6917
7045
|
value: { value: "all", $$type: "string" }
|
|
6918
7046
|
}
|
|
6919
7047
|
},
|
|
@@ -6937,128 +7065,128 @@ var createTransitionPropertiesList = () => {
|
|
|
6937
7065
|
const isSiteRtl = getIsSiteRtl();
|
|
6938
7066
|
const baseProperties = [
|
|
6939
7067
|
{
|
|
6940
|
-
label: (0,
|
|
7068
|
+
label: (0, import_i18n52.__)("Default", "elementor"),
|
|
6941
7069
|
type: "category",
|
|
6942
|
-
properties: [{ label: (0,
|
|
7070
|
+
properties: [{ label: (0, import_i18n52.__)("All properties", "elementor"), value: "all" }]
|
|
6943
7071
|
},
|
|
6944
7072
|
{
|
|
6945
|
-
label: (0,
|
|
7073
|
+
label: (0, import_i18n52.__)("Margin", "elementor"),
|
|
6946
7074
|
type: "category",
|
|
6947
7075
|
properties: [
|
|
6948
|
-
{ label: (0,
|
|
6949
|
-
{ label: (0,
|
|
7076
|
+
{ label: (0, import_i18n52.__)("Margin (all)", "elementor"), value: "margin", isDisabled: true },
|
|
7077
|
+
{ label: (0, import_i18n52.__)("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
|
|
6950
7078
|
{
|
|
6951
|
-
label: isSiteRtl ? (0,
|
|
7079
|
+
label: isSiteRtl ? (0, import_i18n52.__)("Margin right", "elementor") : (0, import_i18n52.__)("Margin left", "elementor"),
|
|
6952
7080
|
value: "margin-inline-start",
|
|
6953
7081
|
isDisabled: true
|
|
6954
7082
|
},
|
|
6955
7083
|
{
|
|
6956
|
-
label: isSiteRtl ? (0,
|
|
7084
|
+
label: isSiteRtl ? (0, import_i18n52.__)("Margin left", "elementor") : (0, import_i18n52.__)("Margin right", "elementor"),
|
|
6957
7085
|
value: "margin-inline-end",
|
|
6958
7086
|
isDisabled: true
|
|
6959
7087
|
},
|
|
6960
|
-
{ label: (0,
|
|
7088
|
+
{ label: (0, import_i18n52.__)("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
|
|
6961
7089
|
]
|
|
6962
7090
|
},
|
|
6963
7091
|
{
|
|
6964
|
-
label: (0,
|
|
7092
|
+
label: (0, import_i18n52.__)("Padding", "elementor"),
|
|
6965
7093
|
type: "category",
|
|
6966
7094
|
properties: [
|
|
6967
|
-
{ label: (0,
|
|
6968
|
-
{ label: (0,
|
|
7095
|
+
{ label: (0, import_i18n52.__)("Padding (all)", "elementor"), value: "padding", isDisabled: true },
|
|
7096
|
+
{ label: (0, import_i18n52.__)("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
|
|
6969
7097
|
{
|
|
6970
|
-
label: isSiteRtl ? (0,
|
|
7098
|
+
label: isSiteRtl ? (0, import_i18n52.__)("Padding right", "elementor") : (0, import_i18n52.__)("Padding left", "elementor"),
|
|
6971
7099
|
value: "padding-inline-start",
|
|
6972
7100
|
isDisabled: true
|
|
6973
7101
|
},
|
|
6974
7102
|
{
|
|
6975
|
-
label: isSiteRtl ? (0,
|
|
7103
|
+
label: isSiteRtl ? (0, import_i18n52.__)("Padding left", "elementor") : (0, import_i18n52.__)("Padding right", "elementor"),
|
|
6976
7104
|
value: "padding-inline-end",
|
|
6977
7105
|
isDisabled: true
|
|
6978
7106
|
},
|
|
6979
|
-
{ label: (0,
|
|
7107
|
+
{ label: (0, import_i18n52.__)("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
|
|
6980
7108
|
]
|
|
6981
7109
|
},
|
|
6982
7110
|
{
|
|
6983
|
-
label: (0,
|
|
7111
|
+
label: (0, import_i18n52.__)("Flex", "elementor"),
|
|
6984
7112
|
type: "category",
|
|
6985
7113
|
properties: [
|
|
6986
|
-
{ label: (0,
|
|
6987
|
-
{ label: (0,
|
|
6988
|
-
{ label: (0,
|
|
6989
|
-
{ label: (0,
|
|
7114
|
+
{ label: (0, import_i18n52.__)("Flex (all)", "elementor"), value: "flex", isDisabled: true },
|
|
7115
|
+
{ label: (0, import_i18n52.__)("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
|
|
7116
|
+
{ label: (0, import_i18n52.__)("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
|
|
7117
|
+
{ label: (0, import_i18n52.__)("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
|
|
6990
7118
|
]
|
|
6991
7119
|
},
|
|
6992
7120
|
{
|
|
6993
|
-
label: (0,
|
|
7121
|
+
label: (0, import_i18n52.__)("Size", "elementor"),
|
|
6994
7122
|
type: "category",
|
|
6995
7123
|
properties: [
|
|
6996
|
-
{ label: (0,
|
|
6997
|
-
{ label: (0,
|
|
6998
|
-
{ label: (0,
|
|
6999
|
-
{ label: (0,
|
|
7000
|
-
{ label: (0,
|
|
7001
|
-
{ label: (0,
|
|
7124
|
+
{ label: (0, import_i18n52.__)("Width", "elementor"), value: "width", isDisabled: true },
|
|
7125
|
+
{ label: (0, import_i18n52.__)("Height", "elementor"), value: "height", isDisabled: true },
|
|
7126
|
+
{ label: (0, import_i18n52.__)("Max height", "elementor"), value: "max-height", isDisabled: true },
|
|
7127
|
+
{ label: (0, import_i18n52.__)("Max width", "elementor"), value: "max-width", isDisabled: true },
|
|
7128
|
+
{ label: (0, import_i18n52.__)("Min height", "elementor"), value: "min-height", isDisabled: true },
|
|
7129
|
+
{ label: (0, import_i18n52.__)("Min width", "elementor"), value: "min-width", isDisabled: true }
|
|
7002
7130
|
]
|
|
7003
7131
|
},
|
|
7004
7132
|
{
|
|
7005
|
-
label: (0,
|
|
7133
|
+
label: (0, import_i18n52.__)("Position", "elementor"),
|
|
7006
7134
|
type: "category",
|
|
7007
7135
|
properties: [
|
|
7008
|
-
{ label: (0,
|
|
7136
|
+
{ label: (0, import_i18n52.__)("Top", "elementor"), value: "inset-block-start", isDisabled: true },
|
|
7009
7137
|
{
|
|
7010
|
-
label: isSiteRtl ? (0,
|
|
7138
|
+
label: isSiteRtl ? (0, import_i18n52.__)("Right", "elementor") : (0, import_i18n52.__)("Left", "elementor"),
|
|
7011
7139
|
value: "inset-inline-start",
|
|
7012
7140
|
isDisabled: true
|
|
7013
7141
|
},
|
|
7014
7142
|
{
|
|
7015
|
-
label: isSiteRtl ? (0,
|
|
7143
|
+
label: isSiteRtl ? (0, import_i18n52.__)("Left", "elementor") : (0, import_i18n52.__)("Right", "elementor"),
|
|
7016
7144
|
value: "inset-inline-end",
|
|
7017
7145
|
isDisabled: true
|
|
7018
7146
|
},
|
|
7019
|
-
{ label: (0,
|
|
7020
|
-
{ label: (0,
|
|
7147
|
+
{ label: (0, import_i18n52.__)("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
|
|
7148
|
+
{ label: (0, import_i18n52.__)("Z-index", "elementor"), value: "z-index", isDisabled: true }
|
|
7021
7149
|
]
|
|
7022
7150
|
},
|
|
7023
7151
|
{
|
|
7024
|
-
label: (0,
|
|
7152
|
+
label: (0, import_i18n52.__)("Typography", "elementor"),
|
|
7025
7153
|
type: "category",
|
|
7026
7154
|
properties: [
|
|
7027
|
-
{ label: (0,
|
|
7028
|
-
{ label: (0,
|
|
7029
|
-
{ label: (0,
|
|
7030
|
-
{ label: (0,
|
|
7031
|
-
{ label: (0,
|
|
7032
|
-
{ label: (0,
|
|
7033
|
-
{ label: (0,
|
|
7155
|
+
{ label: (0, import_i18n52.__)("Font color", "elementor"), value: "color", isDisabled: true },
|
|
7156
|
+
{ label: (0, import_i18n52.__)("Font size", "elementor"), value: "font-size", isDisabled: true },
|
|
7157
|
+
{ label: (0, import_i18n52.__)("Line height", "elementor"), value: "line-height", isDisabled: true },
|
|
7158
|
+
{ label: (0, import_i18n52.__)("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
|
|
7159
|
+
{ label: (0, import_i18n52.__)("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
|
|
7160
|
+
{ label: (0, import_i18n52.__)("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
|
|
7161
|
+
{ label: (0, import_i18n52.__)("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
|
|
7034
7162
|
]
|
|
7035
7163
|
},
|
|
7036
7164
|
{
|
|
7037
|
-
label: (0,
|
|
7165
|
+
label: (0, import_i18n52.__)("Background", "elementor"),
|
|
7038
7166
|
type: "category",
|
|
7039
7167
|
properties: [
|
|
7040
|
-
{ label: (0,
|
|
7041
|
-
{ label: (0,
|
|
7042
|
-
{ label: (0,
|
|
7168
|
+
{ label: (0, import_i18n52.__)("Background color", "elementor"), value: "background-color", isDisabled: true },
|
|
7169
|
+
{ label: (0, import_i18n52.__)("Background position", "elementor"), value: "background-position", isDisabled: true },
|
|
7170
|
+
{ label: (0, import_i18n52.__)("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
|
|
7043
7171
|
]
|
|
7044
7172
|
},
|
|
7045
7173
|
{
|
|
7046
|
-
label: (0,
|
|
7174
|
+
label: (0, import_i18n52.__)("Border", "elementor"),
|
|
7047
7175
|
type: "category",
|
|
7048
7176
|
properties: [
|
|
7049
|
-
{ label: (0,
|
|
7050
|
-
{ label: (0,
|
|
7051
|
-
{ label: (0,
|
|
7052
|
-
{ label: (0,
|
|
7177
|
+
{ label: (0, import_i18n52.__)("Border (all)", "elementor"), value: "border", isDisabled: true },
|
|
7178
|
+
{ label: (0, import_i18n52.__)("Border radius", "elementor"), value: "border-radius", isDisabled: true },
|
|
7179
|
+
{ label: (0, import_i18n52.__)("Border color", "elementor"), value: "border-color", isDisabled: true },
|
|
7180
|
+
{ label: (0, import_i18n52.__)("Border width", "elementor"), value: "border-width", isDisabled: true }
|
|
7053
7181
|
]
|
|
7054
7182
|
},
|
|
7055
7183
|
{
|
|
7056
|
-
label: (0,
|
|
7184
|
+
label: (0, import_i18n52.__)("Effects", "elementor"),
|
|
7057
7185
|
type: "category",
|
|
7058
7186
|
properties: [
|
|
7059
|
-
{ label: (0,
|
|
7060
|
-
{ label: (0,
|
|
7061
|
-
{ label: (0,
|
|
7187
|
+
{ label: (0, import_i18n52.__)("Opacity", "elementor"), value: "opacity", isDisabled: true },
|
|
7188
|
+
{ label: (0, import_i18n52.__)("Transform (all)", "elementor"), value: "transform", isDisabled: true },
|
|
7189
|
+
{ label: (0, import_i18n52.__)("Filter (all)", "elementor"), value: "filter", isDisabled: true }
|
|
7062
7190
|
]
|
|
7063
7191
|
}
|
|
7064
7192
|
];
|
|
@@ -7094,13 +7222,13 @@ function subscribeToTransitionEvent() {
|
|
|
7094
7222
|
}
|
|
7095
7223
|
|
|
7096
7224
|
// src/controls/transition-control/transition-selector.tsx
|
|
7097
|
-
var
|
|
7098
|
-
var
|
|
7099
|
-
var
|
|
7225
|
+
var React107 = __toESM(require("react"));
|
|
7226
|
+
var import_react64 = require("react");
|
|
7227
|
+
var import_editor_props55 = require("@elementor/editor-props");
|
|
7100
7228
|
var import_editor_ui14 = require("@elementor/editor-ui");
|
|
7101
|
-
var
|
|
7102
|
-
var
|
|
7103
|
-
var
|
|
7229
|
+
var import_icons35 = require("@elementor/icons");
|
|
7230
|
+
var import_ui91 = require("@elementor/ui");
|
|
7231
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
7104
7232
|
|
|
7105
7233
|
// src/utils/tracking.ts
|
|
7106
7234
|
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
@@ -7178,13 +7306,13 @@ var TransitionSelector = ({
|
|
|
7178
7306
|
disabledItems = [],
|
|
7179
7307
|
showPromotion = false
|
|
7180
7308
|
}) => {
|
|
7181
|
-
const { value, setValue } = useBoundProp(
|
|
7309
|
+
const { value, setValue } = useBoundProp(import_editor_props55.keyValuePropTypeUtil);
|
|
7182
7310
|
const {
|
|
7183
7311
|
key: { value: transitionLabel }
|
|
7184
7312
|
} = value;
|
|
7185
|
-
const defaultRef = (0,
|
|
7186
|
-
const popoverState = (0,
|
|
7187
|
-
const disabledCategories = (0,
|
|
7313
|
+
const defaultRef = (0, import_react64.useRef)(null);
|
|
7314
|
+
const popoverState = (0, import_ui91.usePopupState)({ variant: "popover" });
|
|
7315
|
+
const disabledCategories = (0, import_react64.useMemo)(() => {
|
|
7188
7316
|
return new Set(
|
|
7189
7317
|
transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
|
|
7190
7318
|
);
|
|
@@ -7204,7 +7332,7 @@ var TransitionSelector = ({
|
|
|
7204
7332
|
return [
|
|
7205
7333
|
first,
|
|
7206
7334
|
{
|
|
7207
|
-
label: (0,
|
|
7335
|
+
label: (0, import_i18n53.__)("Recently Used", "elementor"),
|
|
7208
7336
|
items: recentItems
|
|
7209
7337
|
},
|
|
7210
7338
|
...rest
|
|
@@ -7228,27 +7356,27 @@ var TransitionSelector = ({
|
|
|
7228
7356
|
left: rect.right + 36
|
|
7229
7357
|
};
|
|
7230
7358
|
};
|
|
7231
|
-
return /* @__PURE__ */
|
|
7232
|
-
|
|
7359
|
+
return /* @__PURE__ */ React107.createElement(import_ui91.Box, { ref: defaultRef }, /* @__PURE__ */ React107.createElement(ControlActions, null, /* @__PURE__ */ React107.createElement(
|
|
7360
|
+
import_ui91.UnstableTag,
|
|
7233
7361
|
{
|
|
7234
7362
|
variant: "outlined",
|
|
7235
7363
|
label: transitionLabel,
|
|
7236
|
-
endIcon: /* @__PURE__ */
|
|
7237
|
-
...(0,
|
|
7364
|
+
endIcon: /* @__PURE__ */ React107.createElement(import_icons35.ChevronDownIcon, { fontSize: "tiny" }),
|
|
7365
|
+
...(0, import_ui91.bindTrigger)(popoverState),
|
|
7238
7366
|
fullWidth: true
|
|
7239
7367
|
}
|
|
7240
|
-
)), /* @__PURE__ */
|
|
7241
|
-
|
|
7368
|
+
)), /* @__PURE__ */ React107.createElement(
|
|
7369
|
+
import_ui91.Popover,
|
|
7242
7370
|
{
|
|
7243
7371
|
disablePortal: true,
|
|
7244
7372
|
disableScrollLock: true,
|
|
7245
|
-
...(0,
|
|
7373
|
+
...(0, import_ui91.bindPopover)(popoverState),
|
|
7246
7374
|
anchorReference: "anchorPosition",
|
|
7247
7375
|
anchorPosition: getAnchorPosition(),
|
|
7248
7376
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
7249
7377
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
7250
7378
|
},
|
|
7251
|
-
/* @__PURE__ */
|
|
7379
|
+
/* @__PURE__ */ React107.createElement(
|
|
7252
7380
|
ItemSelector,
|
|
7253
7381
|
{
|
|
7254
7382
|
itemsList: getItemList(),
|
|
@@ -7256,11 +7384,11 @@ var TransitionSelector = ({
|
|
|
7256
7384
|
onItemChange: handleTransitionPropertyChange,
|
|
7257
7385
|
onClose: popoverState.close,
|
|
7258
7386
|
sectionWidth: 268,
|
|
7259
|
-
title: (0,
|
|
7260
|
-
icon:
|
|
7387
|
+
title: (0, import_i18n53.__)("Transition Property", "elementor"),
|
|
7388
|
+
icon: import_icons35.VariationsIcon,
|
|
7261
7389
|
disabledItems: includeCurrentValueInOptions(value, disabledItems),
|
|
7262
|
-
categoryItemContentTemplate: (item) => /* @__PURE__ */
|
|
7263
|
-
|
|
7390
|
+
categoryItemContentTemplate: (item) => /* @__PURE__ */ React107.createElement(
|
|
7391
|
+
import_ui91.Box,
|
|
7264
7392
|
{
|
|
7265
7393
|
sx: {
|
|
7266
7394
|
display: "flex",
|
|
@@ -7269,13 +7397,13 @@ var TransitionSelector = ({
|
|
|
7269
7397
|
width: "100%"
|
|
7270
7398
|
}
|
|
7271
7399
|
},
|
|
7272
|
-
/* @__PURE__ */
|
|
7273
|
-
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */
|
|
7400
|
+
/* @__PURE__ */ React107.createElement("span", null, item.value),
|
|
7401
|
+
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React107.createElement(import_editor_ui14.PromotionChip, null)
|
|
7274
7402
|
),
|
|
7275
|
-
footer: showPromotion ? /* @__PURE__ */
|
|
7403
|
+
footer: showPromotion ? /* @__PURE__ */ React107.createElement(
|
|
7276
7404
|
import_editor_ui14.PromotionAlert,
|
|
7277
7405
|
{
|
|
7278
|
-
message: (0,
|
|
7406
|
+
message: (0, import_i18n53.__)(
|
|
7279
7407
|
"Upgrade to customize transition properties and control effects.",
|
|
7280
7408
|
"elementor"
|
|
7281
7409
|
),
|
|
@@ -7297,9 +7425,9 @@ var DURATION_CONFIG = {
|
|
|
7297
7425
|
units: ["s", "ms"],
|
|
7298
7426
|
defaultUnit: "ms"
|
|
7299
7427
|
};
|
|
7300
|
-
var childArrayPropTypeUtil = (0,
|
|
7301
|
-
|
|
7302
|
-
|
|
7428
|
+
var childArrayPropTypeUtil = (0, import_editor_props56.createArrayPropUtils)(
|
|
7429
|
+
import_editor_props56.selectionSizePropTypeUtil.key,
|
|
7430
|
+
import_editor_props56.selectionSizePropTypeUtil.schema,
|
|
7303
7431
|
"transition"
|
|
7304
7432
|
);
|
|
7305
7433
|
subscribeToTransitionEvent();
|
|
@@ -7314,8 +7442,8 @@ var areAllPropertiesUsed = (value = []) => {
|
|
|
7314
7442
|
};
|
|
7315
7443
|
var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
7316
7444
|
return {
|
|
7317
|
-
selectionLabel: (0,
|
|
7318
|
-
sizeLabel: (0,
|
|
7445
|
+
selectionLabel: (0, import_i18n54.__)("Type", "elementor"),
|
|
7446
|
+
sizeLabel: (0, import_i18n54.__)("Duration", "elementor"),
|
|
7319
7447
|
selectionConfig: {
|
|
7320
7448
|
component: TransitionSelector,
|
|
7321
7449
|
props: {
|
|
@@ -7343,7 +7471,7 @@ var isItemDisabled = (item) => {
|
|
|
7343
7471
|
};
|
|
7344
7472
|
var getChildControlConfig = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
7345
7473
|
return {
|
|
7346
|
-
propTypeUtil:
|
|
7474
|
+
propTypeUtil: import_editor_props56.selectionSizePropTypeUtil,
|
|
7347
7475
|
component: SelectionSizeControl,
|
|
7348
7476
|
props: getSelectionSizeProps(recentlyUsedList, disabledItems, showPromotion),
|
|
7349
7477
|
isItemDisabled
|
|
@@ -7391,18 +7519,18 @@ var getInitialValue = (values = []) => {
|
|
|
7391
7519
|
}
|
|
7392
7520
|
return initialTransitionValue;
|
|
7393
7521
|
};
|
|
7394
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
7395
|
-
|
|
7522
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React108.createElement(
|
|
7523
|
+
import_ui92.Alert,
|
|
7396
7524
|
{
|
|
7397
7525
|
sx: {
|
|
7398
7526
|
width: 280,
|
|
7399
7527
|
gap: 0.5
|
|
7400
7528
|
},
|
|
7401
7529
|
color: "secondary",
|
|
7402
|
-
icon: /* @__PURE__ */
|
|
7530
|
+
icon: /* @__PURE__ */ React108.createElement(import_icons36.InfoCircleFilledIcon, null)
|
|
7403
7531
|
},
|
|
7404
|
-
/* @__PURE__ */
|
|
7405
|
-
/* @__PURE__ */
|
|
7532
|
+
/* @__PURE__ */ React108.createElement(import_ui92.AlertTitle, null, (0, import_i18n54.__)("Transitions", "elementor")),
|
|
7533
|
+
/* @__PURE__ */ React108.createElement(import_ui92.Box, { component: "span" }, /* @__PURE__ */ React108.createElement(import_ui92.Typography, { variant: "body2" }, (0, import_i18n54.__)("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
7406
7534
|
);
|
|
7407
7535
|
var TransitionRepeaterControl = createControl(
|
|
7408
7536
|
({
|
|
@@ -7410,14 +7538,14 @@ var TransitionRepeaterControl = createControl(
|
|
|
7410
7538
|
currentStyleState
|
|
7411
7539
|
}) => {
|
|
7412
7540
|
const currentStyleIsNormal = currentStyleState === null;
|
|
7413
|
-
const [recentlyUsedList, setRecentlyUsedList] = (0,
|
|
7541
|
+
const [recentlyUsedList, setRecentlyUsedList] = (0, import_react65.useState)([]);
|
|
7414
7542
|
const proInstalled = (0, import_utils7.hasProInstalled)();
|
|
7415
7543
|
const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
7416
|
-
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0,
|
|
7544
|
+
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react65.useMemo)(
|
|
7417
7545
|
() => getDisabledItemLabels(value),
|
|
7418
7546
|
[value]
|
|
7419
7547
|
);
|
|
7420
|
-
const allowedTransitionSet = (0,
|
|
7548
|
+
const allowedTransitionSet = (0, import_react65.useMemo)(() => {
|
|
7421
7549
|
const set = /* @__PURE__ */ new Set();
|
|
7422
7550
|
transitionProperties.forEach((category) => {
|
|
7423
7551
|
category.properties.forEach((prop) => {
|
|
@@ -7428,7 +7556,7 @@ var TransitionRepeaterControl = createControl(
|
|
|
7428
7556
|
});
|
|
7429
7557
|
return set;
|
|
7430
7558
|
}, [proInstalled]);
|
|
7431
|
-
(0,
|
|
7559
|
+
(0, import_react65.useEffect)(() => {
|
|
7432
7560
|
if (!value || value.length === 0) {
|
|
7433
7561
|
return;
|
|
7434
7562
|
}
|
|
@@ -7440,18 +7568,18 @@ var TransitionRepeaterControl = createControl(
|
|
|
7440
7568
|
setValue(sanitized);
|
|
7441
7569
|
}
|
|
7442
7570
|
}, [allowedTransitionSet]);
|
|
7443
|
-
(0,
|
|
7571
|
+
(0, import_react65.useEffect)(() => {
|
|
7444
7572
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
7445
7573
|
}, [recentlyUsedListGetter]);
|
|
7446
|
-
const allPropertiesUsed = (0,
|
|
7574
|
+
const allPropertiesUsed = (0, import_react65.useMemo)(() => areAllPropertiesUsed(value), [value]);
|
|
7447
7575
|
const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
|
|
7448
|
-
return /* @__PURE__ */
|
|
7576
|
+
return /* @__PURE__ */ React108.createElement(
|
|
7449
7577
|
RepeatableControl,
|
|
7450
7578
|
{
|
|
7451
|
-
label: (0,
|
|
7452
|
-
repeaterLabel: (0,
|
|
7579
|
+
label: (0, import_i18n54.__)("Transitions", "elementor"),
|
|
7580
|
+
repeaterLabel: (0, import_i18n54.__)("Transitions", "elementor"),
|
|
7453
7581
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
7454
|
-
placeholder: (0,
|
|
7582
|
+
placeholder: (0, import_i18n54.__)("Empty Transition", "elementor"),
|
|
7455
7583
|
showDuplicate: false,
|
|
7456
7584
|
showToggle: true,
|
|
7457
7585
|
initialValues: getInitialValue(value),
|
|
@@ -7472,19 +7600,19 @@ var TransitionRepeaterControl = createControl(
|
|
|
7472
7600
|
);
|
|
7473
7601
|
|
|
7474
7602
|
// src/controls/date-time-control.tsx
|
|
7475
|
-
var
|
|
7603
|
+
var React109 = __toESM(require("react"));
|
|
7476
7604
|
var dayjs = __toESM(require("dayjs"));
|
|
7477
|
-
var import_editor_props56 = require("@elementor/editor-props");
|
|
7478
7605
|
var import_editor_props57 = require("@elementor/editor-props");
|
|
7479
|
-
var
|
|
7606
|
+
var import_editor_props58 = require("@elementor/editor-props");
|
|
7607
|
+
var import_ui93 = require("@elementor/ui");
|
|
7480
7608
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
7481
7609
|
var TIME_FORMAT = "HH:mm";
|
|
7482
7610
|
var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
7483
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
7611
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props58.DateTimePropTypeUtil);
|
|
7484
7612
|
const handleChange = (newValue, meta) => {
|
|
7485
7613
|
const field = meta.bind;
|
|
7486
7614
|
const fieldValue = newValue[field];
|
|
7487
|
-
if ((0,
|
|
7615
|
+
if ((0, import_editor_props57.isTransformable)(fieldValue)) {
|
|
7488
7616
|
return setValue({ ...value, [field]: fieldValue });
|
|
7489
7617
|
}
|
|
7490
7618
|
let formattedValue = "";
|
|
@@ -7520,10 +7648,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7520
7648
|
const base = dayjs.default();
|
|
7521
7649
|
return base.hour(h).minute(m).second(0).millisecond(0);
|
|
7522
7650
|
};
|
|
7523
|
-
return /* @__PURE__ */
|
|
7524
|
-
|
|
7651
|
+
return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(import_ui93.LocalizationProvider, null, /* @__PURE__ */ React109.createElement(import_ui93.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React109.createElement(
|
|
7652
|
+
import_ui93.DatePicker,
|
|
7525
7653
|
{
|
|
7526
|
-
value: parseDateValue(
|
|
7654
|
+
value: parseDateValue(import_editor_props57.stringPropTypeUtil.extract(value?.date)),
|
|
7527
7655
|
onChange: (v) => handleChange({ date: v }, { bind: "date" }),
|
|
7528
7656
|
disabled: inputDisabled,
|
|
7529
7657
|
slotProps: {
|
|
@@ -7532,10 +7660,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7532
7660
|
openPickerIcon: { fontSize: "tiny" }
|
|
7533
7661
|
}
|
|
7534
7662
|
}
|
|
7535
|
-
)), /* @__PURE__ */
|
|
7536
|
-
|
|
7663
|
+
)), /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React109.createElement(
|
|
7664
|
+
import_ui93.TimePicker,
|
|
7537
7665
|
{
|
|
7538
|
-
value: parseTimeValue(
|
|
7666
|
+
value: parseTimeValue(import_editor_props57.stringPropTypeUtil.extract(value?.time)),
|
|
7539
7667
|
onChange: (v) => handleChange({ time: v }, { bind: "time" }),
|
|
7540
7668
|
disabled: inputDisabled,
|
|
7541
7669
|
slotProps: {
|
|
@@ -7548,15 +7676,15 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7548
7676
|
});
|
|
7549
7677
|
|
|
7550
7678
|
// src/controls/date-range-control.tsx
|
|
7679
|
+
var React111 = __toESM(require("react"));
|
|
7680
|
+
var import_editor_props60 = require("@elementor/editor-props");
|
|
7681
|
+
var import_ui95 = require("@elementor/ui");
|
|
7682
|
+
var import_i18n55 = require("@wordpress/i18n");
|
|
7683
|
+
|
|
7684
|
+
// src/controls/date-string-control.tsx
|
|
7551
7685
|
var React110 = __toESM(require("react"));
|
|
7552
7686
|
var import_editor_props59 = require("@elementor/editor-props");
|
|
7553
7687
|
var import_ui94 = require("@elementor/ui");
|
|
7554
|
-
var import_i18n54 = require("@wordpress/i18n");
|
|
7555
|
-
|
|
7556
|
-
// src/controls/date-string-control.tsx
|
|
7557
|
-
var React109 = __toESM(require("react"));
|
|
7558
|
-
var import_editor_props58 = require("@elementor/editor-props");
|
|
7559
|
-
var import_ui93 = require("@elementor/ui");
|
|
7560
7688
|
|
|
7561
7689
|
// src/utils/date-time.ts
|
|
7562
7690
|
var dayjs2 = __toESM(require("dayjs"));
|
|
@@ -7590,7 +7718,7 @@ function parseTimeString(raw) {
|
|
|
7590
7718
|
// src/controls/date-string-control.tsx
|
|
7591
7719
|
var DateStringControl = createControl(
|
|
7592
7720
|
({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
|
|
7593
|
-
const { value, setValue, disabled } = useBoundProp(
|
|
7721
|
+
const { value, setValue, disabled } = useBoundProp(import_editor_props59.dateStringPropTypeUtil);
|
|
7594
7722
|
const isDisabled = inputDisabled ?? disabled;
|
|
7595
7723
|
const slotProps = {
|
|
7596
7724
|
textField: {
|
|
@@ -7613,8 +7741,8 @@ var DateStringControl = createControl(
|
|
|
7613
7741
|
}
|
|
7614
7742
|
setValue(newValue.format(format));
|
|
7615
7743
|
};
|
|
7616
|
-
return /* @__PURE__ */
|
|
7617
|
-
|
|
7744
|
+
return /* @__PURE__ */ React110.createElement(import_ui94.LocalizationProvider, null, /* @__PURE__ */ React110.createElement(ControlActions, null, /* @__PURE__ */ React110.createElement(
|
|
7745
|
+
import_ui94.DatePicker,
|
|
7618
7746
|
{
|
|
7619
7747
|
value: parseDateString(value ?? ""),
|
|
7620
7748
|
onChange: (newValue) => handleChange(newValue, DATE_FORMAT2),
|
|
@@ -7627,8 +7755,8 @@ var DateStringControl = createControl(
|
|
|
7627
7755
|
|
|
7628
7756
|
// src/controls/date-range-control.tsx
|
|
7629
7757
|
var RANGE_LABELS = {
|
|
7630
|
-
min: (0,
|
|
7631
|
-
max: (0,
|
|
7758
|
+
min: (0, import_i18n55.__)("Min date", "elementor"),
|
|
7759
|
+
max: (0, import_i18n55.__)("Max date", "elementor")
|
|
7632
7760
|
};
|
|
7633
7761
|
var isMaxBeforeMin = (minIso, maxIso) => {
|
|
7634
7762
|
if (!minIso || !maxIso) {
|
|
@@ -7636,43 +7764,43 @@ var isMaxBeforeMin = (minIso, maxIso) => {
|
|
|
7636
7764
|
}
|
|
7637
7765
|
return maxIso < minIso;
|
|
7638
7766
|
};
|
|
7639
|
-
var RANGE_ERROR_MESSAGE = (0,
|
|
7767
|
+
var RANGE_ERROR_MESSAGE = (0, import_i18n55.__)("Max date must be on or after Min date", "elementor");
|
|
7640
7768
|
var DateRangeControl = createControl(() => {
|
|
7641
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
7642
|
-
const minString =
|
|
7643
|
-
const maxString =
|
|
7769
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props60.dateRangePropTypeUtil);
|
|
7770
|
+
const minString = import_editor_props60.dateStringPropTypeUtil.extract(value?.min);
|
|
7771
|
+
const maxString = import_editor_props60.dateStringPropTypeUtil.extract(value?.max);
|
|
7644
7772
|
const hasInvalidRange = isMaxBeforeMin(minString, maxString);
|
|
7645
|
-
return /* @__PURE__ */
|
|
7773
|
+
return /* @__PURE__ */ React111.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React111.createElement(import_ui95.Stack, { gap: 0.75 }, /* @__PURE__ */ React111.createElement(import_ui95.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(
|
|
7646
7774
|
BoundDateStringControl,
|
|
7647
7775
|
{
|
|
7648
7776
|
bind: "min",
|
|
7649
7777
|
ariaLabel: RANGE_LABELS.min,
|
|
7650
7778
|
error: hasInvalidRange
|
|
7651
7779
|
}
|
|
7652
|
-
))), /* @__PURE__ */
|
|
7780
|
+
))), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(
|
|
7653
7781
|
BoundDateStringControl,
|
|
7654
7782
|
{
|
|
7655
7783
|
bind: "max",
|
|
7656
7784
|
ariaLabel: RANGE_LABELS.max,
|
|
7657
7785
|
error: hasInvalidRange
|
|
7658
7786
|
}
|
|
7659
|
-
)))), hasInvalidRange && /* @__PURE__ */
|
|
7787
|
+
)))), hasInvalidRange && /* @__PURE__ */ React111.createElement(import_ui95.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
|
|
7660
7788
|
});
|
|
7661
7789
|
var BoundDateStringControl = ({
|
|
7662
7790
|
bind,
|
|
7663
7791
|
ariaLabel,
|
|
7664
7792
|
error
|
|
7665
7793
|
}) => {
|
|
7666
|
-
return /* @__PURE__ */
|
|
7794
|
+
return /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React111.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
|
|
7667
7795
|
};
|
|
7668
7796
|
|
|
7669
7797
|
// src/controls/time-string-control.tsx
|
|
7670
|
-
var
|
|
7671
|
-
var
|
|
7672
|
-
var
|
|
7798
|
+
var React112 = __toESM(require("react"));
|
|
7799
|
+
var import_editor_props61 = require("@elementor/editor-props");
|
|
7800
|
+
var import_ui96 = require("@elementor/ui");
|
|
7673
7801
|
var TimeStringControl = createControl(
|
|
7674
7802
|
({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
|
|
7675
|
-
const { value, setValue, disabled } = useBoundProp(
|
|
7803
|
+
const { value, setValue, disabled } = useBoundProp(import_editor_props61.timeStringPropTypeUtil);
|
|
7676
7804
|
const isDisabled = inputDisabled ?? disabled;
|
|
7677
7805
|
const slotProps = {
|
|
7678
7806
|
textField: {
|
|
@@ -7695,8 +7823,8 @@ var TimeStringControl = createControl(
|
|
|
7695
7823
|
}
|
|
7696
7824
|
setValue(newValue.format(format));
|
|
7697
7825
|
};
|
|
7698
|
-
return /* @__PURE__ */
|
|
7699
|
-
|
|
7826
|
+
return /* @__PURE__ */ React112.createElement(import_ui96.LocalizationProvider, null, /* @__PURE__ */ React112.createElement(ControlActions, null, /* @__PURE__ */ React112.createElement(
|
|
7827
|
+
import_ui96.TimePicker,
|
|
7700
7828
|
{
|
|
7701
7829
|
value: parseTimeString(value ?? ""),
|
|
7702
7830
|
onChange: (newValue) => handleChange(newValue, TIME_FORMAT2),
|
|
@@ -7708,33 +7836,33 @@ var TimeStringControl = createControl(
|
|
|
7708
7836
|
);
|
|
7709
7837
|
|
|
7710
7838
|
// src/controls/time-range-control.tsx
|
|
7711
|
-
var
|
|
7712
|
-
var
|
|
7713
|
-
var
|
|
7714
|
-
var
|
|
7839
|
+
var React113 = __toESM(require("react"));
|
|
7840
|
+
var import_editor_props62 = require("@elementor/editor-props");
|
|
7841
|
+
var import_ui97 = require("@elementor/ui");
|
|
7842
|
+
var import_i18n56 = require("@wordpress/i18n");
|
|
7715
7843
|
var RANGE_LABELS2 = {
|
|
7716
|
-
min: (0,
|
|
7717
|
-
max: (0,
|
|
7844
|
+
min: (0, import_i18n56.__)("Start time", "elementor"),
|
|
7845
|
+
max: (0, import_i18n56.__)("End time", "elementor")
|
|
7718
7846
|
};
|
|
7719
7847
|
var TimeRangeControl = createControl(() => {
|
|
7720
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
7721
|
-
return /* @__PURE__ */
|
|
7848
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props62.timeRangePropTypeUtil);
|
|
7849
|
+
return /* @__PURE__ */ React113.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React113.createElement(import_ui97.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
|
|
7722
7850
|
});
|
|
7723
7851
|
var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
7724
|
-
return /* @__PURE__ */
|
|
7852
|
+
return /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React113.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
|
|
7725
7853
|
};
|
|
7726
7854
|
|
|
7727
7855
|
// src/controls/inline-editing-control.tsx
|
|
7728
|
-
var
|
|
7729
|
-
var
|
|
7730
|
-
var
|
|
7731
|
-
var
|
|
7856
|
+
var React115 = __toESM(require("react"));
|
|
7857
|
+
var import_react68 = require("react");
|
|
7858
|
+
var import_editor_props63 = require("@elementor/editor-props");
|
|
7859
|
+
var import_ui99 = require("@elementor/ui");
|
|
7732
7860
|
var import_utils8 = require("@elementor/utils");
|
|
7733
7861
|
|
|
7734
7862
|
// src/components/inline-editor.tsx
|
|
7735
|
-
var
|
|
7736
|
-
var
|
|
7737
|
-
var
|
|
7863
|
+
var React114 = __toESM(require("react"));
|
|
7864
|
+
var import_react66 = require("react");
|
|
7865
|
+
var import_ui98 = require("@elementor/ui");
|
|
7738
7866
|
var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
|
|
7739
7867
|
var import_extension_document = __toESM(require("@tiptap/extension-document"));
|
|
7740
7868
|
var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
|
|
@@ -7747,7 +7875,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
|
|
|
7747
7875
|
var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
|
|
7748
7876
|
var import_extension_text = __toESM(require("@tiptap/extension-text"));
|
|
7749
7877
|
var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
|
|
7750
|
-
var
|
|
7878
|
+
var import_react67 = require("@tiptap/react");
|
|
7751
7879
|
|
|
7752
7880
|
// src/utils/inline-editing.ts
|
|
7753
7881
|
function isEmpty(value = "") {
|
|
@@ -7771,7 +7899,7 @@ function htmlToPlainText(html) {
|
|
|
7771
7899
|
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
7772
7900
|
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
7773
7901
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
7774
|
-
var InlineEditor =
|
|
7902
|
+
var InlineEditor = React114.forwardRef((props, ref) => {
|
|
7775
7903
|
const {
|
|
7776
7904
|
value,
|
|
7777
7905
|
setValue,
|
|
@@ -7787,8 +7915,8 @@ var InlineEditor = React113.forwardRef((props, ref) => {
|
|
|
7787
7915
|
onSelectionEnd,
|
|
7788
7916
|
mountElement = null
|
|
7789
7917
|
} = props;
|
|
7790
|
-
const containerRef = (0,
|
|
7791
|
-
const onBlurRef = (0,
|
|
7918
|
+
const containerRef = (0, import_react66.useRef)(null);
|
|
7919
|
+
const onBlurRef = (0, import_react66.useRef)(onBlur);
|
|
7792
7920
|
onBlurRef.current = onBlur;
|
|
7793
7921
|
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
7794
7922
|
const onUpdate = ({ editor: updatedEditor }) => {
|
|
@@ -7810,7 +7938,7 @@ var InlineEditor = React113.forwardRef((props, ref) => {
|
|
|
7810
7938
|
...HTMLAttributes,
|
|
7811
7939
|
class: elementClasses
|
|
7812
7940
|
});
|
|
7813
|
-
const editor = (0,
|
|
7941
|
+
const editor = (0, import_react67.useEditor)({
|
|
7814
7942
|
...mountElement ? { element: mountElement } : {},
|
|
7815
7943
|
extensions: [
|
|
7816
7944
|
import_extension_document.default.extend({
|
|
@@ -7882,11 +8010,11 @@ var InlineEditor = React113.forwardRef((props, ref) => {
|
|
|
7882
8010
|
if (mountElement) {
|
|
7883
8011
|
return null;
|
|
7884
8012
|
}
|
|
7885
|
-
return /* @__PURE__ */
|
|
8013
|
+
return /* @__PURE__ */ React114.createElement(import_ui98.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React114.createElement(import_react67.EditorContent, { ref, editor }));
|
|
7886
8014
|
});
|
|
7887
8015
|
var useOnUpdate = (callback, dependencies) => {
|
|
7888
|
-
const hasMounted = (0,
|
|
7889
|
-
(0,
|
|
8016
|
+
const hasMounted = (0, import_react66.useRef)(false);
|
|
8017
|
+
(0, import_react66.useEffect)(() => {
|
|
7890
8018
|
if (hasMounted.current) {
|
|
7891
8019
|
callback();
|
|
7892
8020
|
} else {
|
|
@@ -7903,32 +8031,32 @@ var InlineEditingControl = createControl(
|
|
|
7903
8031
|
attributes,
|
|
7904
8032
|
props
|
|
7905
8033
|
}) => {
|
|
7906
|
-
const { value, setValue, placeholder } = useBoundProp(
|
|
7907
|
-
const content =
|
|
7908
|
-
const debouncedParse = (0,
|
|
8034
|
+
const { value, setValue, placeholder } = useBoundProp(import_editor_props63.htmlV3PropTypeUtil);
|
|
8035
|
+
const content = import_editor_props63.stringPropTypeUtil.extract(value?.content ?? null) ?? "";
|
|
8036
|
+
const debouncedParse = (0, import_react68.useMemo)(
|
|
7909
8037
|
() => (0, import_utils8.debounce)((html) => {
|
|
7910
|
-
const parsed = (0,
|
|
8038
|
+
const parsed = (0, import_editor_props63.parseHtmlChildren)(html);
|
|
7911
8039
|
setValue({
|
|
7912
|
-
content: parsed.content ?
|
|
8040
|
+
content: parsed.content ? import_editor_props63.stringPropTypeUtil.create(parsed.content) : null,
|
|
7913
8041
|
children: parsed.children
|
|
7914
8042
|
});
|
|
7915
8043
|
}, CHILDREN_PARSE_DEBOUNCE_MS),
|
|
7916
8044
|
[setValue]
|
|
7917
8045
|
);
|
|
7918
|
-
const handleChange = (0,
|
|
8046
|
+
const handleChange = (0, import_react68.useCallback)(
|
|
7919
8047
|
(newValue) => {
|
|
7920
8048
|
const html = newValue ?? "";
|
|
7921
8049
|
setValue({
|
|
7922
|
-
content: html ?
|
|
8050
|
+
content: html ? import_editor_props63.stringPropTypeUtil.create(html) : null,
|
|
7923
8051
|
children: value?.children ?? []
|
|
7924
8052
|
});
|
|
7925
8053
|
debouncedParse(html);
|
|
7926
8054
|
},
|
|
7927
8055
|
[setValue, value?.children, debouncedParse]
|
|
7928
8056
|
);
|
|
7929
|
-
(0,
|
|
7930
|
-
return /* @__PURE__ */
|
|
7931
|
-
|
|
8057
|
+
(0, import_react68.useEffect)(() => () => debouncedParse.cancel(), [debouncedParse]);
|
|
8058
|
+
return /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
|
|
8059
|
+
import_ui99.Box,
|
|
7932
8060
|
{
|
|
7933
8061
|
sx: {
|
|
7934
8062
|
p: 0.8,
|
|
@@ -7972,7 +8100,7 @@ var InlineEditingControl = createControl(
|
|
|
7972
8100
|
...attributes,
|
|
7973
8101
|
...props
|
|
7974
8102
|
},
|
|
7975
|
-
/* @__PURE__ */
|
|
8103
|
+
/* @__PURE__ */ React115.createElement(
|
|
7976
8104
|
InlineEditor,
|
|
7977
8105
|
{
|
|
7978
8106
|
value: content,
|
|
@@ -7985,16 +8113,16 @@ var InlineEditingControl = createControl(
|
|
|
7985
8113
|
);
|
|
7986
8114
|
|
|
7987
8115
|
// src/controls/email-form-action-control.tsx
|
|
7988
|
-
var
|
|
7989
|
-
var
|
|
8116
|
+
var React116 = __toESM(require("react"));
|
|
8117
|
+
var import_editor_props65 = require("@elementor/editor-props");
|
|
7990
8118
|
var import_editor_ui15 = require("@elementor/editor-ui");
|
|
7991
|
-
var
|
|
8119
|
+
var import_ui100 = require("@elementor/ui");
|
|
7992
8120
|
var import_utils9 = require("@elementor/utils");
|
|
7993
|
-
var
|
|
8121
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
7994
8122
|
|
|
7995
8123
|
// src/hooks/use-form-field-suggestions.ts
|
|
7996
8124
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
7997
|
-
var
|
|
8125
|
+
var import_editor_props64 = require("@elementor/editor-props");
|
|
7998
8126
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
7999
8127
|
var FORM_FIELD_WIDGET_TYPES = [
|
|
8000
8128
|
"e-form-input",
|
|
@@ -8031,13 +8159,13 @@ function useFormFieldSuggestions(options) {
|
|
|
8031
8159
|
}
|
|
8032
8160
|
if (options?.inputType) {
|
|
8033
8161
|
const typeProp = child.settings.get("type");
|
|
8034
|
-
const typeValue = (0,
|
|
8162
|
+
const typeValue = (0, import_editor_props64.isTransformable)(typeProp) ? typeProp.value : typeProp;
|
|
8035
8163
|
if (typeValue !== options.inputType) {
|
|
8036
8164
|
return;
|
|
8037
8165
|
}
|
|
8038
8166
|
}
|
|
8039
8167
|
const cssIdProp = child.settings.get("_cssid");
|
|
8040
|
-
const fieldId = (0,
|
|
8168
|
+
const fieldId = (0, import_editor_props64.isTransformable)(cssIdProp) ? cssIdProp.value : cssIdProp;
|
|
8041
8169
|
if (fieldId && typeof fieldId === "string") {
|
|
8042
8170
|
suggestions.push({ label: fieldId, value: fieldId });
|
|
8043
8171
|
}
|
|
@@ -8049,14 +8177,14 @@ function useFormFieldSuggestions(options) {
|
|
|
8049
8177
|
}
|
|
8050
8178
|
|
|
8051
8179
|
// src/controls/email-form-action-control.tsx
|
|
8052
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
8053
|
-
var SendToField = ({ placeholder }) => /* @__PURE__ */
|
|
8054
|
-
var SubjectField = () => /* @__PURE__ */
|
|
8180
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(TextControl, { placeholder }))));
|
|
8181
|
+
var SendToField = ({ placeholder }) => /* @__PURE__ */ React116.createElement(EmailField, { bind: "to", label: (0, import_i18n57.__)("Send to", "elementor"), placeholder });
|
|
8182
|
+
var SubjectField = () => /* @__PURE__ */ React116.createElement(
|
|
8055
8183
|
EmailField,
|
|
8056
8184
|
{
|
|
8057
8185
|
bind: "subject",
|
|
8058
|
-
label: (0,
|
|
8059
|
-
placeholder: (0,
|
|
8186
|
+
label: (0, import_i18n57.__)("Email subject", "elementor"),
|
|
8187
|
+
placeholder: (0, import_i18n57.__)("New form submission", "elementor")
|
|
8060
8188
|
}
|
|
8061
8189
|
);
|
|
8062
8190
|
var MIN_PRO_VERSION_FOR_MENTIONS = "4.1.0";
|
|
@@ -8072,84 +8200,84 @@ var shouldShowMentionsInfo = () => {
|
|
|
8072
8200
|
};
|
|
8073
8201
|
var MessageField = () => {
|
|
8074
8202
|
const suggestions = useFormFieldSuggestions();
|
|
8075
|
-
return /* @__PURE__ */
|
|
8203
|
+
return /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Message", "elementor"))), /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(import_editor_ui15.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n57.__)(
|
|
8076
8204
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
8077
8205
|
"elementor"
|
|
8078
|
-
) : (0,
|
|
8206
|
+
) : (0, import_i18n57.__)("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
8079
8207
|
};
|
|
8080
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
8208
|
+
var FromEmailField = () => /* @__PURE__ */ React116.createElement(
|
|
8081
8209
|
EmailField,
|
|
8082
8210
|
{
|
|
8083
8211
|
bind: "from",
|
|
8084
|
-
label: (0,
|
|
8085
|
-
placeholder: (0,
|
|
8212
|
+
label: (0, import_i18n57.__)("From email", "elementor"),
|
|
8213
|
+
placeholder: (0, import_i18n57.__)("What email should appear as the sender?", "elementor")
|
|
8086
8214
|
}
|
|
8087
8215
|
);
|
|
8088
|
-
var FromNameField = () => /* @__PURE__ */
|
|
8216
|
+
var FromNameField = () => /* @__PURE__ */ React116.createElement(
|
|
8089
8217
|
EmailField,
|
|
8090
8218
|
{
|
|
8091
8219
|
bind: "from-name",
|
|
8092
|
-
label: (0,
|
|
8093
|
-
placeholder: (0,
|
|
8220
|
+
label: (0, import_i18n57.__)("From name", "elementor"),
|
|
8221
|
+
placeholder: (0, import_i18n57.__)("What name should appear as the sender?", "elementor")
|
|
8094
8222
|
}
|
|
8095
8223
|
);
|
|
8096
8224
|
var ReplyToField = () => {
|
|
8097
8225
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8098
|
-
return /* @__PURE__ */
|
|
8226
|
+
return /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Reply-to", "elementor"))), /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(
|
|
8099
8227
|
MentionTextAreaControl,
|
|
8100
8228
|
{
|
|
8101
8229
|
suggestions: emailSuggestions,
|
|
8102
8230
|
rows: 1,
|
|
8103
8231
|
triggerPosition: "start",
|
|
8104
|
-
placeholder: (0,
|
|
8232
|
+
placeholder: (0, import_i18n57.__)("You can type @ to insert an email field", "elementor")
|
|
8105
8233
|
}
|
|
8106
8234
|
))));
|
|
8107
8235
|
};
|
|
8108
|
-
var CcField = () => /* @__PURE__ */
|
|
8109
|
-
var BccField = () => /* @__PURE__ */
|
|
8110
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
8236
|
+
var CcField = () => /* @__PURE__ */ React116.createElement(EmailField, { bind: "cc", label: (0, import_i18n57.__)("Cc", "elementor") });
|
|
8237
|
+
var BccField = () => /* @__PURE__ */ React116.createElement(EmailField, { bind: "bcc", label: (0, import_i18n57.__)("Bcc", "elementor") });
|
|
8238
|
+
var MetaDataField = () => /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React116.createElement(import_ui100.Stack, { gap: 0.5 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Metadata", "elementor")), /* @__PURE__ */ React116.createElement(
|
|
8111
8239
|
ChipsControl,
|
|
8112
8240
|
{
|
|
8113
8241
|
options: [
|
|
8114
|
-
{ label: (0,
|
|
8115
|
-
{ label: (0,
|
|
8116
|
-
{ label: (0,
|
|
8117
|
-
{ label: (0,
|
|
8118
|
-
{ label: (0,
|
|
8242
|
+
{ label: (0, import_i18n57.__)("Date", "elementor"), value: "date" },
|
|
8243
|
+
{ label: (0, import_i18n57.__)("Time", "elementor"), value: "time" },
|
|
8244
|
+
{ label: (0, import_i18n57.__)("Page URL", "elementor"), value: "page-url" },
|
|
8245
|
+
{ label: (0, import_i18n57.__)("User agent", "elementor"), value: "user-agent" },
|
|
8246
|
+
{ label: (0, import_i18n57.__)("Credit", "elementor"), value: "credit" }
|
|
8119
8247
|
]
|
|
8120
8248
|
}
|
|
8121
8249
|
)));
|
|
8122
|
-
var SendAsField = () => /* @__PURE__ */
|
|
8250
|
+
var SendAsField = () => /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Send as", "elementor"))), /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(
|
|
8123
8251
|
SelectControl,
|
|
8124
8252
|
{
|
|
8125
8253
|
options: [
|
|
8126
|
-
{ label: (0,
|
|
8127
|
-
{ label: (0,
|
|
8254
|
+
{ label: (0, import_i18n57.__)("HTML", "elementor"), value: "html" },
|
|
8255
|
+
{ label: (0, import_i18n57.__)("Plain Text", "elementor"), value: "plain" }
|
|
8128
8256
|
]
|
|
8129
8257
|
}
|
|
8130
8258
|
))));
|
|
8131
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
8259
|
+
var AdvancedSettings = () => /* @__PURE__ */ React116.createElement(import_editor_ui15.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React116.createElement(import_ui100.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React116.createElement(import_ui100.Stack, { 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(import_ui100.Divider, null), /* @__PURE__ */ React116.createElement(MetaDataField, null), /* @__PURE__ */ React116.createElement(SendAsField, null))));
|
|
8132
8260
|
var EmailFormActionControl = createControl(({ toPlaceholder }) => {
|
|
8133
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
8134
|
-
return /* @__PURE__ */
|
|
8261
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props65.emailPropTypeUtil);
|
|
8262
|
+
return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(import_ui100.Stack, { gap: 2 }, /* @__PURE__ */ React116.createElement(ControlLabel, null, (0, import_i18n57.__)("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)));
|
|
8135
8263
|
});
|
|
8136
8264
|
|
|
8137
8265
|
// src/controls/attachment-type-control.tsx
|
|
8138
|
-
var
|
|
8266
|
+
var React117 = __toESM(require("react"));
|
|
8139
8267
|
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
8140
|
-
var
|
|
8141
|
-
var
|
|
8268
|
+
var import_ui101 = require("@elementor/ui");
|
|
8269
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
8142
8270
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
8143
|
-
return /* @__PURE__ */
|
|
8271
|
+
return /* @__PURE__ */ React117.createElement(import_ui101.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React117.createElement(import_ui101.Grid, { item: true }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React117.createElement(import_ui101.Grid, { item: true }, /* @__PURE__ */ React117.createElement(SelectControl, { options })), /* @__PURE__ */ React117.createElement(import_ui101.Grid, { item: true }, /* @__PURE__ */ React117.createElement(import_editor_ui16.InfoAlert, null, (0, import_i18n58.__)(
|
|
8144
8272
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
8145
8273
|
"elementor"
|
|
8146
8274
|
))));
|
|
8147
8275
|
});
|
|
8148
8276
|
|
|
8149
8277
|
// src/controls/grid-span-control.tsx
|
|
8150
|
-
var
|
|
8151
|
-
var
|
|
8152
|
-
var
|
|
8278
|
+
var React118 = __toESM(require("react"));
|
|
8279
|
+
var import_editor_props66 = require("@elementor/editor-props");
|
|
8280
|
+
var import_ui102 = require("@elementor/ui");
|
|
8153
8281
|
var GridSpanControl = createControl(
|
|
8154
8282
|
({
|
|
8155
8283
|
placeholder: propPlaceholder,
|
|
@@ -8160,11 +8288,11 @@ var GridSpanControl = createControl(
|
|
|
8160
8288
|
sx,
|
|
8161
8289
|
ariaLabel
|
|
8162
8290
|
}) => {
|
|
8163
|
-
const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(
|
|
8291
|
+
const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(import_editor_props66.spanPropTypeUtil);
|
|
8164
8292
|
const handleChange = (event) => setValue(event.target.value);
|
|
8165
8293
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
|
|
8166
|
-
return /* @__PURE__ */
|
|
8167
|
-
|
|
8294
|
+
return /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
|
|
8295
|
+
import_ui102.TextField,
|
|
8168
8296
|
{
|
|
8169
8297
|
size: "tiny",
|
|
8170
8298
|
fullWidth: true,
|
|
@@ -8184,25 +8312,25 @@ var GridSpanControl = createControl(
|
|
|
8184
8312
|
);
|
|
8185
8313
|
|
|
8186
8314
|
// src/components/promotions/display-conditions-control.tsx
|
|
8187
|
-
var
|
|
8188
|
-
var
|
|
8189
|
-
var
|
|
8190
|
-
var
|
|
8191
|
-
var
|
|
8315
|
+
var React120 = __toESM(require("react"));
|
|
8316
|
+
var import_react70 = require("react");
|
|
8317
|
+
var import_icons37 = require("@elementor/icons");
|
|
8318
|
+
var import_ui104 = require("@elementor/ui");
|
|
8319
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
8192
8320
|
|
|
8193
8321
|
// src/components/promotions/promotion-trigger.tsx
|
|
8194
|
-
var
|
|
8195
|
-
var
|
|
8322
|
+
var React119 = __toESM(require("react"));
|
|
8323
|
+
var import_react69 = require("react");
|
|
8196
8324
|
var import_editor_ui17 = require("@elementor/editor-ui");
|
|
8197
|
-
var
|
|
8325
|
+
var import_ui103 = require("@elementor/ui");
|
|
8198
8326
|
function getV4Promotion(key) {
|
|
8199
8327
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
8200
8328
|
}
|
|
8201
|
-
var PromotionTrigger = (0,
|
|
8329
|
+
var PromotionTrigger = (0, import_react69.forwardRef)(
|
|
8202
8330
|
({ promotionKey, children, trackingData }, ref) => {
|
|
8203
|
-
const [isOpen, setIsOpen] = (0,
|
|
8331
|
+
const [isOpen, setIsOpen] = (0, import_react69.useState)(false);
|
|
8204
8332
|
const promotion = getV4Promotion(promotionKey);
|
|
8205
|
-
const toggle = (0,
|
|
8333
|
+
const toggle = (0, import_react69.useCallback)(() => {
|
|
8206
8334
|
setIsOpen((prev) => {
|
|
8207
8335
|
if (!prev) {
|
|
8208
8336
|
trackViewPromotion(trackingData);
|
|
@@ -8210,8 +8338,8 @@ var PromotionTrigger = (0, import_react68.forwardRef)(
|
|
|
8210
8338
|
return !prev;
|
|
8211
8339
|
});
|
|
8212
8340
|
}, [trackingData]);
|
|
8213
|
-
(0,
|
|
8214
|
-
return /* @__PURE__ */
|
|
8341
|
+
(0, import_react69.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
|
|
8342
|
+
return /* @__PURE__ */ React119.createElement(React119.Fragment, null, promotion && /* @__PURE__ */ React119.createElement(
|
|
8215
8343
|
import_editor_ui17.PromotionInfotip,
|
|
8216
8344
|
{
|
|
8217
8345
|
title: promotion.title,
|
|
@@ -8225,8 +8353,8 @@ var PromotionTrigger = (0, import_react68.forwardRef)(
|
|
|
8225
8353
|
},
|
|
8226
8354
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
8227
8355
|
},
|
|
8228
|
-
/* @__PURE__ */
|
|
8229
|
-
|
|
8356
|
+
/* @__PURE__ */ React119.createElement(
|
|
8357
|
+
import_ui103.Box,
|
|
8230
8358
|
{
|
|
8231
8359
|
onClick: (e) => {
|
|
8232
8360
|
e.stopPropagation();
|
|
@@ -8234,19 +8362,19 @@ var PromotionTrigger = (0, import_react68.forwardRef)(
|
|
|
8234
8362
|
},
|
|
8235
8363
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
8236
8364
|
},
|
|
8237
|
-
children ?? /* @__PURE__ */
|
|
8365
|
+
children ?? /* @__PURE__ */ React119.createElement(import_editor_ui17.PromotionChip, null)
|
|
8238
8366
|
)
|
|
8239
8367
|
));
|
|
8240
8368
|
}
|
|
8241
8369
|
);
|
|
8242
8370
|
|
|
8243
8371
|
// src/components/promotions/display-conditions-control.tsx
|
|
8244
|
-
var ARIA_LABEL = (0,
|
|
8372
|
+
var ARIA_LABEL = (0, import_i18n59.__)("Display Conditions", "elementor");
|
|
8245
8373
|
var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
|
|
8246
8374
|
var DisplayConditionsControl = createControl(() => {
|
|
8247
|
-
const triggerRef = (0,
|
|
8248
|
-
return /* @__PURE__ */
|
|
8249
|
-
|
|
8375
|
+
const triggerRef = (0, import_react70.useRef)(null);
|
|
8376
|
+
return /* @__PURE__ */ React120.createElement(
|
|
8377
|
+
import_ui104.Stack,
|
|
8250
8378
|
{
|
|
8251
8379
|
direction: "row",
|
|
8252
8380
|
spacing: 2,
|
|
@@ -8255,9 +8383,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8255
8383
|
alignItems: "center"
|
|
8256
8384
|
}
|
|
8257
8385
|
},
|
|
8258
|
-
/* @__PURE__ */
|
|
8259
|
-
/* @__PURE__ */
|
|
8260
|
-
|
|
8386
|
+
/* @__PURE__ */ React120.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
|
|
8387
|
+
/* @__PURE__ */ React120.createElement(import_ui104.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React120.createElement(
|
|
8388
|
+
import_ui104.IconButton,
|
|
8261
8389
|
{
|
|
8262
8390
|
size: "tiny",
|
|
8263
8391
|
"aria-label": ARIA_LABEL,
|
|
@@ -8269,23 +8397,23 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8269
8397
|
borderRadius: 1
|
|
8270
8398
|
}
|
|
8271
8399
|
},
|
|
8272
|
-
/* @__PURE__ */
|
|
8400
|
+
/* @__PURE__ */ React120.createElement(import_icons37.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
8273
8401
|
))
|
|
8274
8402
|
);
|
|
8275
8403
|
});
|
|
8276
8404
|
|
|
8277
8405
|
// src/components/promotions/attributes-control.tsx
|
|
8278
|
-
var
|
|
8279
|
-
var
|
|
8280
|
-
var
|
|
8281
|
-
var
|
|
8282
|
-
var
|
|
8283
|
-
var ARIA_LABEL2 = (0,
|
|
8406
|
+
var React121 = __toESM(require("react"));
|
|
8407
|
+
var import_react71 = require("react");
|
|
8408
|
+
var import_icons38 = require("@elementor/icons");
|
|
8409
|
+
var import_ui105 = require("@elementor/ui");
|
|
8410
|
+
var import_i18n60 = require("@wordpress/i18n");
|
|
8411
|
+
var ARIA_LABEL2 = (0, import_i18n60.__)("Attributes", "elementor");
|
|
8284
8412
|
var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
|
|
8285
8413
|
var AttributesControl = createControl(() => {
|
|
8286
|
-
const triggerRef = (0,
|
|
8287
|
-
return /* @__PURE__ */
|
|
8288
|
-
|
|
8414
|
+
const triggerRef = (0, import_react71.useRef)(null);
|
|
8415
|
+
return /* @__PURE__ */ React121.createElement(
|
|
8416
|
+
import_ui105.Stack,
|
|
8289
8417
|
{
|
|
8290
8418
|
direction: "row",
|
|
8291
8419
|
spacing: 2,
|
|
@@ -8294,9 +8422,9 @@ var AttributesControl = createControl(() => {
|
|
|
8294
8422
|
alignItems: "center"
|
|
8295
8423
|
}
|
|
8296
8424
|
},
|
|
8297
|
-
/* @__PURE__ */
|
|
8298
|
-
/* @__PURE__ */
|
|
8299
|
-
|
|
8425
|
+
/* @__PURE__ */ React121.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
|
|
8426
|
+
/* @__PURE__ */ React121.createElement(import_ui105.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React121.createElement(
|
|
8427
|
+
import_icons38.PlusIcon,
|
|
8300
8428
|
{
|
|
8301
8429
|
"aria-label": ARIA_LABEL2,
|
|
8302
8430
|
fontSize: "tiny",
|
|
@@ -8309,21 +8437,21 @@ var AttributesControl = createControl(() => {
|
|
|
8309
8437
|
});
|
|
8310
8438
|
|
|
8311
8439
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
8312
|
-
var
|
|
8313
|
-
var
|
|
8314
|
-
var
|
|
8315
|
-
var CustomIconButton = (0,
|
|
8440
|
+
var React122 = __toESM(require("react"));
|
|
8441
|
+
var import_icons39 = require("@elementor/icons");
|
|
8442
|
+
var import_ui106 = require("@elementor/ui");
|
|
8443
|
+
var CustomIconButton = (0, import_ui106.styled)(import_ui106.IconButton)(({ theme }) => ({
|
|
8316
8444
|
width: theme.spacing(2.5),
|
|
8317
8445
|
height: theme.spacing(2.5)
|
|
8318
8446
|
}));
|
|
8319
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
8447
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React122.createElement(import_ui106.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React122.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React122.createElement(import_icons39.BrushBigIcon, { fontSize: size })));
|
|
8320
8448
|
|
|
8321
8449
|
// src/components/repeater/repeater.tsx
|
|
8322
|
-
var
|
|
8323
|
-
var
|
|
8324
|
-
var
|
|
8325
|
-
var
|
|
8326
|
-
var
|
|
8450
|
+
var React123 = __toESM(require("react"));
|
|
8451
|
+
var import_react72 = require("react");
|
|
8452
|
+
var import_icons40 = require("@elementor/icons");
|
|
8453
|
+
var import_ui107 = require("@elementor/ui");
|
|
8454
|
+
var import_i18n61 = require("@wordpress/i18n");
|
|
8327
8455
|
var SIZE12 = "tiny";
|
|
8328
8456
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
8329
8457
|
var Repeater3 = ({
|
|
@@ -8341,7 +8469,7 @@ var Repeater3 = ({
|
|
|
8341
8469
|
openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
|
|
8342
8470
|
isSortable = true
|
|
8343
8471
|
}) => {
|
|
8344
|
-
const [openItem, setOpenItem] = (0,
|
|
8472
|
+
const [openItem, setOpenItem] = (0, import_react72.useState)(initialOpenItem);
|
|
8345
8473
|
const uniqueKeys = items2.map(
|
|
8346
8474
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
8347
8475
|
);
|
|
@@ -8404,8 +8532,8 @@ var Repeater3 = ({
|
|
|
8404
8532
|
};
|
|
8405
8533
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
8406
8534
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
8407
|
-
const addButton = /* @__PURE__ */
|
|
8408
|
-
|
|
8535
|
+
const addButton = /* @__PURE__ */ React123.createElement(
|
|
8536
|
+
import_ui107.IconButton,
|
|
8409
8537
|
{
|
|
8410
8538
|
size: SIZE12,
|
|
8411
8539
|
sx: {
|
|
@@ -8413,32 +8541,32 @@ var Repeater3 = ({
|
|
|
8413
8541
|
},
|
|
8414
8542
|
disabled: isButtonDisabled,
|
|
8415
8543
|
onClick: addRepeaterItem,
|
|
8416
|
-
"aria-label": (0,
|
|
8544
|
+
"aria-label": (0, import_i18n61.__)("Add item", "elementor")
|
|
8417
8545
|
},
|
|
8418
|
-
/* @__PURE__ */
|
|
8546
|
+
/* @__PURE__ */ React123.createElement(import_icons40.PlusIcon, { fontSize: SIZE12 })
|
|
8419
8547
|
);
|
|
8420
|
-
return /* @__PURE__ */
|
|
8421
|
-
|
|
8548
|
+
return /* @__PURE__ */ React123.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React123.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React123.createElement(
|
|
8549
|
+
import_ui107.Infotip,
|
|
8422
8550
|
{
|
|
8423
8551
|
placement: "right",
|
|
8424
8552
|
content: addButtonInfotipContent,
|
|
8425
8553
|
color: "secondary",
|
|
8426
8554
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
8427
8555
|
},
|
|
8428
|
-
/* @__PURE__ */
|
|
8429
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
8556
|
+
/* @__PURE__ */ React123.createElement(import_ui107.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
8557
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React123.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
8430
8558
|
const index = uniqueKeys.indexOf(key);
|
|
8431
8559
|
const value = items2[index];
|
|
8432
8560
|
if (!value) {
|
|
8433
8561
|
return null;
|
|
8434
8562
|
}
|
|
8435
|
-
return /* @__PURE__ */
|
|
8563
|
+
return /* @__PURE__ */ React123.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React123.createElement(
|
|
8436
8564
|
RepeaterItem,
|
|
8437
8565
|
{
|
|
8438
8566
|
disabled,
|
|
8439
8567
|
propDisabled: value?.disabled,
|
|
8440
|
-
label: /* @__PURE__ */
|
|
8441
|
-
startIcon: /* @__PURE__ */
|
|
8568
|
+
label: /* @__PURE__ */ React123.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React123.createElement(itemSettings.Label, { value, index })),
|
|
8569
|
+
startIcon: /* @__PURE__ */ React123.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React123.createElement(itemSettings.Icon, { value })),
|
|
8442
8570
|
removeItem: () => removeRepeaterItem(index),
|
|
8443
8571
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
8444
8572
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -8452,7 +8580,7 @@ var Repeater3 = ({
|
|
|
8452
8580
|
actions: itemSettings.actions,
|
|
8453
8581
|
value
|
|
8454
8582
|
},
|
|
8455
|
-
(props) => /* @__PURE__ */
|
|
8583
|
+
(props) => /* @__PURE__ */ React123.createElement(
|
|
8456
8584
|
itemSettings.Content,
|
|
8457
8585
|
{
|
|
8458
8586
|
...props,
|
|
@@ -8492,18 +8620,18 @@ var RepeaterItem = ({
|
|
|
8492
8620
|
},
|
|
8493
8621
|
wrappedOnPopoverClose
|
|
8494
8622
|
);
|
|
8495
|
-
const triggerProps = (0,
|
|
8623
|
+
const triggerProps = (0, import_ui107.bindTrigger)(popoverState);
|
|
8496
8624
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
8497
|
-
const duplicateLabel = (0,
|
|
8498
|
-
const toggleLabel = propDisabled ? (0,
|
|
8499
|
-
const removeLabel = (0,
|
|
8500
|
-
return /* @__PURE__ */
|
|
8625
|
+
const duplicateLabel = (0, import_i18n61.__)("Duplicate", "elementor");
|
|
8626
|
+
const toggleLabel = propDisabled ? (0, import_i18n61.__)("Show", "elementor") : (0, import_i18n61.__)("Hide", "elementor");
|
|
8627
|
+
const removeLabel = (0, import_i18n61.__)("Remove", "elementor");
|
|
8628
|
+
return /* @__PURE__ */ React123.createElement(import_ui107.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React123.createElement(
|
|
8501
8629
|
RepeaterTag,
|
|
8502
8630
|
{
|
|
8503
8631
|
disabled,
|
|
8504
8632
|
label,
|
|
8505
8633
|
ref: setRef,
|
|
8506
|
-
"aria-label": (0,
|
|
8634
|
+
"aria-label": (0, import_i18n61.__)("Open item", "elementor"),
|
|
8507
8635
|
...triggerProps,
|
|
8508
8636
|
onClick: (e) => {
|
|
8509
8637
|
triggerProps.onClick(e);
|
|
@@ -8512,15 +8640,15 @@ var RepeaterItem = ({
|
|
|
8512
8640
|
}
|
|
8513
8641
|
},
|
|
8514
8642
|
startIcon,
|
|
8515
|
-
actions: /* @__PURE__ */
|
|
8643
|
+
actions: /* @__PURE__ */ React123.createElement(React123.Fragment, null, showDuplicate && /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React123.createElement(import_ui107.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React123.createElement(import_icons40.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React123.createElement(import_ui107.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React123.createElement(import_icons40.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React123.createElement(import_icons40.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React123.createElement(import_ui107.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React123.createElement(import_icons40.XIcon, { fontSize: SIZE12 }))))
|
|
8516
8644
|
}
|
|
8517
|
-
), /* @__PURE__ */
|
|
8645
|
+
), /* @__PURE__ */ React123.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React123.createElement(import_ui107.Box, null, children({ anchorEl: ref }))));
|
|
8518
8646
|
};
|
|
8519
8647
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
8520
|
-
const [ref, setRef] = (0,
|
|
8521
|
-
const popoverState = (0,
|
|
8522
|
-
const popoverProps = (0,
|
|
8523
|
-
(0,
|
|
8648
|
+
const [ref, setRef] = (0, import_react72.useState)(null);
|
|
8649
|
+
const popoverState = (0, import_ui107.usePopupState)({ variant: "popover" });
|
|
8650
|
+
const popoverProps = (0, import_ui107.bindPopover)(popoverState);
|
|
8651
|
+
(0, import_react72.useEffect)(() => {
|
|
8524
8652
|
if (openOnMount && ref) {
|
|
8525
8653
|
popoverState.open(ref);
|
|
8526
8654
|
onOpen?.();
|
|
@@ -8539,20 +8667,20 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
8539
8667
|
};
|
|
8540
8668
|
|
|
8541
8669
|
// src/components/inline-editor-toolbar.tsx
|
|
8670
|
+
var React125 = __toESM(require("react"));
|
|
8671
|
+
var import_react74 = require("react");
|
|
8672
|
+
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
8673
|
+
var import_icons42 = require("@elementor/icons");
|
|
8674
|
+
var import_ui109 = require("@elementor/ui");
|
|
8675
|
+
var import_react75 = require("@tiptap/react");
|
|
8676
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
8677
|
+
|
|
8678
|
+
// src/components/url-popover.tsx
|
|
8542
8679
|
var React124 = __toESM(require("react"));
|
|
8543
8680
|
var import_react73 = require("react");
|
|
8544
|
-
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
8545
8681
|
var import_icons41 = require("@elementor/icons");
|
|
8546
8682
|
var import_ui108 = require("@elementor/ui");
|
|
8547
|
-
var import_react74 = require("@tiptap/react");
|
|
8548
8683
|
var import_i18n62 = require("@wordpress/i18n");
|
|
8549
|
-
|
|
8550
|
-
// src/components/url-popover.tsx
|
|
8551
|
-
var React123 = __toESM(require("react"));
|
|
8552
|
-
var import_react72 = require("react");
|
|
8553
|
-
var import_icons40 = require("@elementor/icons");
|
|
8554
|
-
var import_ui107 = require("@elementor/ui");
|
|
8555
|
-
var import_i18n61 = require("@wordpress/i18n");
|
|
8556
8684
|
var UrlPopover = ({
|
|
8557
8685
|
popupState,
|
|
8558
8686
|
restoreValue,
|
|
@@ -8562,8 +8690,8 @@ var UrlPopover = ({
|
|
|
8562
8690
|
openInNewTab,
|
|
8563
8691
|
onToggleNewTab
|
|
8564
8692
|
}) => {
|
|
8565
|
-
const inputRef = (0,
|
|
8566
|
-
(0,
|
|
8693
|
+
const inputRef = (0, import_react73.useRef)(null);
|
|
8694
|
+
(0, import_react73.useEffect)(() => {
|
|
8567
8695
|
if (popupState.isOpen) {
|
|
8568
8696
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
8569
8697
|
}
|
|
@@ -8572,57 +8700,57 @@ var UrlPopover = ({
|
|
|
8572
8700
|
restoreValue();
|
|
8573
8701
|
popupState.close();
|
|
8574
8702
|
};
|
|
8575
|
-
return /* @__PURE__ */
|
|
8576
|
-
|
|
8703
|
+
return /* @__PURE__ */ React124.createElement(
|
|
8704
|
+
import_ui108.Popover,
|
|
8577
8705
|
{
|
|
8578
8706
|
slotProps: {
|
|
8579
8707
|
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
8580
8708
|
},
|
|
8581
|
-
...(0,
|
|
8709
|
+
...(0, import_ui108.bindPopover)(popupState),
|
|
8582
8710
|
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
8583
8711
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8584
8712
|
onClose: handleClose
|
|
8585
8713
|
},
|
|
8586
|
-
/* @__PURE__ */
|
|
8587
|
-
|
|
8714
|
+
/* @__PURE__ */ React124.createElement(import_ui108.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React124.createElement(
|
|
8715
|
+
import_ui108.TextField,
|
|
8588
8716
|
{
|
|
8589
8717
|
value,
|
|
8590
8718
|
onChange,
|
|
8591
8719
|
size: "tiny",
|
|
8592
8720
|
fullWidth: true,
|
|
8593
|
-
placeholder: (0,
|
|
8721
|
+
placeholder: (0, import_i18n62.__)("Type a URL", "elementor"),
|
|
8594
8722
|
inputProps: { ref: inputRef },
|
|
8595
8723
|
color: "secondary",
|
|
8596
8724
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
8597
8725
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
8598
8726
|
}
|
|
8599
|
-
), /* @__PURE__ */
|
|
8600
|
-
|
|
8727
|
+
), /* @__PURE__ */ React124.createElement(import_ui108.Tooltip, { title: (0, import_i18n62.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React124.createElement(
|
|
8728
|
+
import_ui108.ToggleButton,
|
|
8601
8729
|
{
|
|
8602
8730
|
size: "tiny",
|
|
8603
8731
|
value: "newTab",
|
|
8604
8732
|
selected: openInNewTab,
|
|
8605
8733
|
onClick: onToggleNewTab,
|
|
8606
|
-
"aria-label": (0,
|
|
8734
|
+
"aria-label": (0, import_i18n62.__)("Open in a new tab", "elementor"),
|
|
8607
8735
|
sx: { borderRadius: "8px" }
|
|
8608
8736
|
},
|
|
8609
|
-
/* @__PURE__ */
|
|
8737
|
+
/* @__PURE__ */ React124.createElement(import_icons41.ExternalLinkIcon, { fontSize: "tiny" })
|
|
8610
8738
|
)))
|
|
8611
8739
|
);
|
|
8612
8740
|
};
|
|
8613
8741
|
|
|
8614
8742
|
// src/components/inline-editor-toolbar.tsx
|
|
8615
8743
|
var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
8616
|
-
const [urlValue, setUrlValue] = (0,
|
|
8617
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
8618
|
-
const toolbarRef = (0,
|
|
8619
|
-
const linkPopupState = (0,
|
|
8744
|
+
const [urlValue, setUrlValue] = (0, import_react74.useState)("");
|
|
8745
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react74.useState)(false);
|
|
8746
|
+
const toolbarRef = (0, import_react74.useRef)(null);
|
|
8747
|
+
const linkPopupState = (0, import_ui109.usePopupState)({ variant: "popover" });
|
|
8620
8748
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
8621
|
-
const editorState = (0,
|
|
8749
|
+
const editorState = (0, import_react75.useEditorState)({
|
|
8622
8750
|
editor,
|
|
8623
8751
|
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
8624
8752
|
});
|
|
8625
|
-
const formatButtonsList = (0,
|
|
8753
|
+
const formatButtonsList = (0, import_react74.useMemo)(() => {
|
|
8626
8754
|
const buttons = Object.values(formatButtons);
|
|
8627
8755
|
if (isElementClickable) {
|
|
8628
8756
|
return buttons.filter((button) => button.action !== "link");
|
|
@@ -8659,11 +8787,11 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8659
8787
|
}
|
|
8660
8788
|
linkPopupState.close();
|
|
8661
8789
|
};
|
|
8662
|
-
(0,
|
|
8790
|
+
(0, import_react74.useEffect)(() => {
|
|
8663
8791
|
editor?.commands?.focus();
|
|
8664
8792
|
}, [editor]);
|
|
8665
|
-
return /* @__PURE__ */
|
|
8666
|
-
|
|
8793
|
+
return /* @__PURE__ */ React125.createElement(
|
|
8794
|
+
import_ui109.Box,
|
|
8667
8795
|
{
|
|
8668
8796
|
ref: toolbarRef,
|
|
8669
8797
|
sx: {
|
|
@@ -8679,9 +8807,9 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8679
8807
|
...sx
|
|
8680
8808
|
}
|
|
8681
8809
|
},
|
|
8682
|
-
/* @__PURE__ */
|
|
8683
|
-
/* @__PURE__ */
|
|
8684
|
-
|
|
8810
|
+
/* @__PURE__ */ React125.createElement(import_ui109.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React125.createElement(import_ui109.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
8811
|
+
/* @__PURE__ */ React125.createElement(
|
|
8812
|
+
import_ui109.ToggleButtonGroup,
|
|
8685
8813
|
{
|
|
8686
8814
|
value: editorState,
|
|
8687
8815
|
size: "tiny",
|
|
@@ -8689,7 +8817,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8689
8817
|
display: "flex",
|
|
8690
8818
|
gap: 0.5,
|
|
8691
8819
|
border: "none",
|
|
8692
|
-
[`& .${
|
|
8820
|
+
[`& .${import_ui109.toggleButtonGroupClasses.firstButton}, & .${import_ui109.toggleButtonGroupClasses.middleButton}, & .${import_ui109.toggleButtonGroupClasses.lastButton}`]: {
|
|
8693
8821
|
borderRadius: "8px",
|
|
8694
8822
|
border: "none",
|
|
8695
8823
|
marginLeft: 0,
|
|
@@ -8702,8 +8830,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8702
8830
|
}
|
|
8703
8831
|
}
|
|
8704
8832
|
},
|
|
8705
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
8706
|
-
|
|
8833
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React125.createElement(import_ui109.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React125.createElement(
|
|
8834
|
+
import_ui109.ToggleButton,
|
|
8707
8835
|
{
|
|
8708
8836
|
value: button.action,
|
|
8709
8837
|
"aria-label": button.label,
|
|
@@ -8720,7 +8848,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8720
8848
|
button.icon
|
|
8721
8849
|
)))
|
|
8722
8850
|
),
|
|
8723
|
-
/* @__PURE__ */
|
|
8851
|
+
/* @__PURE__ */ React125.createElement(
|
|
8724
8852
|
UrlPopover,
|
|
8725
8853
|
{
|
|
8726
8854
|
popupState: linkPopupState,
|
|
@@ -8743,64 +8871,64 @@ var checkIfElementIsClickable = (elementId) => {
|
|
|
8743
8871
|
};
|
|
8744
8872
|
var toolbarButtons = {
|
|
8745
8873
|
clear: {
|
|
8746
|
-
label: (0,
|
|
8747
|
-
icon: /* @__PURE__ */
|
|
8874
|
+
label: (0, import_i18n63.__)("Clear", "elementor"),
|
|
8875
|
+
icon: /* @__PURE__ */ React125.createElement(import_icons42.MinusIcon, { fontSize: "tiny" }),
|
|
8748
8876
|
action: "clear",
|
|
8749
8877
|
method: (editor) => {
|
|
8750
8878
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
8751
8879
|
}
|
|
8752
8880
|
},
|
|
8753
8881
|
bold: {
|
|
8754
|
-
label: (0,
|
|
8755
|
-
icon: /* @__PURE__ */
|
|
8882
|
+
label: (0, import_i18n63.__)("Bold", "elementor"),
|
|
8883
|
+
icon: /* @__PURE__ */ React125.createElement(import_icons42.BoldIcon, { fontSize: "tiny" }),
|
|
8756
8884
|
action: "bold",
|
|
8757
8885
|
method: (editor) => {
|
|
8758
8886
|
editor.chain().focus().toggleBold().run();
|
|
8759
8887
|
}
|
|
8760
8888
|
},
|
|
8761
8889
|
italic: {
|
|
8762
|
-
label: (0,
|
|
8763
|
-
icon: /* @__PURE__ */
|
|
8890
|
+
label: (0, import_i18n63.__)("Italic", "elementor"),
|
|
8891
|
+
icon: /* @__PURE__ */ React125.createElement(import_icons42.ItalicIcon, { fontSize: "tiny" }),
|
|
8764
8892
|
action: "italic",
|
|
8765
8893
|
method: (editor) => {
|
|
8766
8894
|
editor.chain().focus().toggleItalic().run();
|
|
8767
8895
|
}
|
|
8768
8896
|
},
|
|
8769
8897
|
underline: {
|
|
8770
|
-
label: (0,
|
|
8771
|
-
icon: /* @__PURE__ */
|
|
8898
|
+
label: (0, import_i18n63.__)("Underline", "elementor"),
|
|
8899
|
+
icon: /* @__PURE__ */ React125.createElement(import_icons42.UnderlineIcon, { fontSize: "tiny" }),
|
|
8772
8900
|
action: "underline",
|
|
8773
8901
|
method: (editor) => {
|
|
8774
8902
|
editor.chain().focus().toggleUnderline().run();
|
|
8775
8903
|
}
|
|
8776
8904
|
},
|
|
8777
8905
|
strike: {
|
|
8778
|
-
label: (0,
|
|
8779
|
-
icon: /* @__PURE__ */
|
|
8906
|
+
label: (0, import_i18n63.__)("Strikethrough", "elementor"),
|
|
8907
|
+
icon: /* @__PURE__ */ React125.createElement(import_icons42.StrikethroughIcon, { fontSize: "tiny" }),
|
|
8780
8908
|
action: "strike",
|
|
8781
8909
|
method: (editor) => {
|
|
8782
8910
|
editor.chain().focus().toggleStrike().run();
|
|
8783
8911
|
}
|
|
8784
8912
|
},
|
|
8785
8913
|
superscript: {
|
|
8786
|
-
label: (0,
|
|
8787
|
-
icon: /* @__PURE__ */
|
|
8914
|
+
label: (0, import_i18n63.__)("Superscript", "elementor"),
|
|
8915
|
+
icon: /* @__PURE__ */ React125.createElement(import_icons42.SuperscriptIcon, { fontSize: "tiny" }),
|
|
8788
8916
|
action: "superscript",
|
|
8789
8917
|
method: (editor) => {
|
|
8790
8918
|
editor.chain().focus().toggleSuperscript().run();
|
|
8791
8919
|
}
|
|
8792
8920
|
},
|
|
8793
8921
|
subscript: {
|
|
8794
|
-
label: (0,
|
|
8795
|
-
icon: /* @__PURE__ */
|
|
8922
|
+
label: (0, import_i18n63.__)("Subscript", "elementor"),
|
|
8923
|
+
icon: /* @__PURE__ */ React125.createElement(import_icons42.SubscriptIcon, { fontSize: "tiny" }),
|
|
8796
8924
|
action: "subscript",
|
|
8797
8925
|
method: (editor) => {
|
|
8798
8926
|
editor.chain().focus().toggleSubscript().run();
|
|
8799
8927
|
}
|
|
8800
8928
|
},
|
|
8801
8929
|
link: {
|
|
8802
|
-
label: (0,
|
|
8803
|
-
icon: /* @__PURE__ */
|
|
8930
|
+
label: (0, import_i18n63.__)("Link", "elementor"),
|
|
8931
|
+
icon: /* @__PURE__ */ React125.createElement(import_icons42.LinkIcon, { fontSize: "tiny" }),
|
|
8804
8932
|
action: "link",
|
|
8805
8933
|
method: null
|
|
8806
8934
|
}
|
|
@@ -8809,8 +8937,8 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
|
8809
8937
|
var possibleFormats = Object.keys(formatButtons);
|
|
8810
8938
|
|
|
8811
8939
|
// src/components/size/unstable-size-field.tsx
|
|
8812
|
-
var
|
|
8813
|
-
var
|
|
8940
|
+
var React128 = __toESM(require("react"));
|
|
8941
|
+
var import_ui111 = require("@elementor/ui");
|
|
8814
8942
|
|
|
8815
8943
|
// src/hooks/use-size-value.ts
|
|
8816
8944
|
var DEFAULT_UNIT2 = "px";
|
|
@@ -8852,25 +8980,25 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
8852
8980
|
};
|
|
8853
8981
|
|
|
8854
8982
|
// src/components/size/unit-select.tsx
|
|
8855
|
-
var
|
|
8856
|
-
var
|
|
8983
|
+
var React126 = __toESM(require("react"));
|
|
8984
|
+
var import_react76 = require("react");
|
|
8857
8985
|
var import_editor_ui18 = require("@elementor/editor-ui");
|
|
8858
|
-
var
|
|
8986
|
+
var import_ui110 = require("@elementor/ui");
|
|
8859
8987
|
var menuItemContentStyles2 = {
|
|
8860
8988
|
display: "flex",
|
|
8861
8989
|
flexDirection: "column",
|
|
8862
8990
|
justifyContent: "center"
|
|
8863
8991
|
};
|
|
8864
8992
|
var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
8865
|
-
const popupState = (0,
|
|
8993
|
+
const popupState = (0, import_ui110.usePopupState)({
|
|
8866
8994
|
variant: "popover",
|
|
8867
|
-
popupId: (0,
|
|
8995
|
+
popupId: (0, import_react76.useId)()
|
|
8868
8996
|
});
|
|
8869
8997
|
const handleMenuItemClick = (index) => {
|
|
8870
8998
|
onClick(options[index]);
|
|
8871
8999
|
popupState.close();
|
|
8872
9000
|
};
|
|
8873
|
-
return /* @__PURE__ */
|
|
9001
|
+
return /* @__PURE__ */ React126.createElement(React126.Fragment, null, /* @__PURE__ */ React126.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui110.bindTrigger)(popupState) }, value), /* @__PURE__ */ React126.createElement(import_ui110.Menu, { MenuListProps: { dense: true }, ...(0, import_ui110.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React126.createElement(
|
|
8874
9002
|
import_editor_ui18.MenuListItem,
|
|
8875
9003
|
{
|
|
8876
9004
|
key: option,
|
|
@@ -8889,7 +9017,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
8889
9017
|
option.toUpperCase()
|
|
8890
9018
|
))));
|
|
8891
9019
|
};
|
|
8892
|
-
var StyledButton3 = (0,
|
|
9020
|
+
var StyledButton3 = (0, import_ui110.styled)(import_ui110.Button, {
|
|
8893
9021
|
shouldForwardProp: (prop) => prop !== "isPrimaryColor"
|
|
8894
9022
|
})(({ isPrimaryColor, theme }) => ({
|
|
8895
9023
|
color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
|
|
@@ -8899,11 +9027,11 @@ var StyledButton3 = (0, import_ui109.styled)(import_ui109.Button, {
|
|
|
8899
9027
|
}));
|
|
8900
9028
|
|
|
8901
9029
|
// src/components/size/unstable-size-input.tsx
|
|
8902
|
-
var
|
|
8903
|
-
var
|
|
8904
|
-
var UnstableSizeInput = (0,
|
|
9030
|
+
var React127 = __toESM(require("react"));
|
|
9031
|
+
var import_react77 = require("react");
|
|
9032
|
+
var UnstableSizeInput = (0, import_react77.forwardRef)(
|
|
8905
9033
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
8906
|
-
return /* @__PURE__ */
|
|
9034
|
+
return /* @__PURE__ */ React127.createElement(
|
|
8907
9035
|
NumberInput,
|
|
8908
9036
|
{
|
|
8909
9037
|
ref,
|
|
@@ -8941,7 +9069,7 @@ var UnstableSizeField = ({
|
|
|
8941
9069
|
const shouldHighlightUnit2 = () => {
|
|
8942
9070
|
return hasValue(size);
|
|
8943
9071
|
};
|
|
8944
|
-
return /* @__PURE__ */
|
|
9072
|
+
return /* @__PURE__ */ React128.createElement(
|
|
8945
9073
|
UnstableSizeInput,
|
|
8946
9074
|
{
|
|
8947
9075
|
type: "number",
|
|
@@ -8950,8 +9078,8 @@ var UnstableSizeField = ({
|
|
|
8950
9078
|
onChange: (event) => setSize(event.target.value),
|
|
8951
9079
|
InputProps: {
|
|
8952
9080
|
...InputProps,
|
|
8953
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
8954
|
-
endAdornment: /* @__PURE__ */
|
|
9081
|
+
startAdornment: startIcon && /* @__PURE__ */ React128.createElement(import_ui111.InputAdornment, { position: "start" }, startIcon),
|
|
9082
|
+
endAdornment: /* @__PURE__ */ React128.createElement(import_ui111.InputAdornment, { position: "end" }, /* @__PURE__ */ React128.createElement(
|
|
8955
9083
|
UnitSelect,
|
|
8956
9084
|
{
|
|
8957
9085
|
options: units2,
|
|
@@ -8969,7 +9097,7 @@ var hasValue = (value) => {
|
|
|
8969
9097
|
};
|
|
8970
9098
|
|
|
8971
9099
|
// src/hooks/use-font-families.ts
|
|
8972
|
-
var
|
|
9100
|
+
var import_react78 = require("react");
|
|
8973
9101
|
var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
8974
9102
|
var getFontControlConfig = () => {
|
|
8975
9103
|
const { controls } = (0, import_editor_v1_adapters2.getElementorConfig)();
|
|
@@ -8977,7 +9105,7 @@ var getFontControlConfig = () => {
|
|
|
8977
9105
|
};
|
|
8978
9106
|
var useFontFamilies = () => {
|
|
8979
9107
|
const { groups, options } = getFontControlConfig();
|
|
8980
|
-
return (0,
|
|
9108
|
+
return (0, import_react78.useMemo)(() => {
|
|
8981
9109
|
if (!groups || !options) {
|
|
8982
9110
|
return [];
|
|
8983
9111
|
}
|
|
@@ -9044,6 +9172,7 @@ var useFontFamilies = () => {
|
|
|
9044
9172
|
PropProvider,
|
|
9045
9173
|
QueryChipsControl,
|
|
9046
9174
|
QueryControl,
|
|
9175
|
+
QueryFilterRepeaterControl,
|
|
9047
9176
|
RepeatableControl,
|
|
9048
9177
|
Repeater,
|
|
9049
9178
|
SelectControl,
|