@elementor/editor-controls 4.4.0-1149 → 4.4.0-beta2
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 +12 -1
- package/dist/index.d.ts +12 -1
- package/dist/index.js +1155 -1057
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +858 -761
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -16
- package/src/controls/query-select-control.tsx +104 -0
- package/src/controls/size-control/hooks/use-size-value.ts +2 -2
- package/src/controls/size-control/unstable-size-control.tsx +19 -1
- package/src/controls/size-control/utils/resolve-size-value.ts +14 -0
- package/src/controls/size-control.tsx +5 -5
- package/src/hooks/use-query-autocomplete.ts +7 -3
- package/src/index.ts +1 -0
package/dist/index.mjs
CHANGED
|
@@ -1531,17 +1531,17 @@ var SizeControl = createControl(
|
|
|
1531
1531
|
const actualUnits = resolveUnits(propType, enablePropTypeUnits, variant, units2, actualExtendedOptions);
|
|
1532
1532
|
const popupState = usePopupState2({ variant: "popover" });
|
|
1533
1533
|
const memorizedExternalState = useMemo2(
|
|
1534
|
-
() => createStateFromSizeProp(sizeValue, actualDefaultUnit),
|
|
1534
|
+
() => sizeValue ? createStateFromSizeProp(sizeValue, actualDefaultUnit) : null,
|
|
1535
1535
|
[sizeValue, actualDefaultUnit]
|
|
1536
1536
|
);
|
|
1537
1537
|
const [state, setState] = useSyncExternalState({
|
|
1538
1538
|
external: memorizedExternalState,
|
|
1539
1539
|
setExternal: (newState, options, meta) => setSizeValue(extractValueFromState(newState), options, meta),
|
|
1540
1540
|
persistWhen: (newState) => !!extractValueFromState(newState),
|
|
1541
|
-
fallback: (
|
|
1542
|
-
unit:
|
|
1543
|
-
numeric:
|
|
1544
|
-
custom:
|
|
1541
|
+
fallback: (prevState) => ({
|
|
1542
|
+
unit: prevState?.unit && !isUnitExtendedOption(prevState.unit) ? prevState.unit : actualDefaultUnit,
|
|
1543
|
+
numeric: DEFAULT_SIZE,
|
|
1544
|
+
custom: ""
|
|
1545
1545
|
})
|
|
1546
1546
|
});
|
|
1547
1547
|
const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = actualDefaultUnit } = extractValueFromState(state, true) || {};
|
|
@@ -3566,6 +3566,13 @@ var createDefaultSizeValue = (units2, defaultUnit) => {
|
|
|
3566
3566
|
}
|
|
3567
3567
|
return { size: DEFAULT_SIZE2, unit };
|
|
3568
3568
|
};
|
|
3569
|
+
var createEmptySizeValue = (previousValue, units2, defaultUnit) => {
|
|
3570
|
+
const previousUnit = previousValue?.unit;
|
|
3571
|
+
if (!previousUnit || isExtendedUnit(previousUnit) || !units2.includes(previousUnit)) {
|
|
3572
|
+
return createDefaultSizeValue(units2, defaultUnit);
|
|
3573
|
+
}
|
|
3574
|
+
return { size: DEFAULT_SIZE2, unit: previousUnit };
|
|
3575
|
+
};
|
|
3569
3576
|
var resolveFallbackUnit = (unit, units2, defaultUnit) => {
|
|
3570
3577
|
if (units2.includes(unit)) {
|
|
3571
3578
|
return unit;
|
|
@@ -3620,7 +3627,7 @@ var useSizeValue = ({
|
|
|
3620
3627
|
}
|
|
3621
3628
|
},
|
|
3622
3629
|
persistWhen: (next) => hasChanged(next, resolvedValue),
|
|
3623
|
-
fallback: () =>
|
|
3630
|
+
fallback: (previousValue) => createEmptySizeValue(previousValue, units2, defaultUnit)
|
|
3624
3631
|
});
|
|
3625
3632
|
const [unit, setUnit] = useUnitSync({
|
|
3626
3633
|
sizeValue,
|
|
@@ -4056,16 +4063,19 @@ var UnstableSizeControl = createControl(
|
|
|
4056
4063
|
restoreValue
|
|
4057
4064
|
} = useBoundProp(sizePropTypeUtil4);
|
|
4058
4065
|
const lastNonAutoValue = useRef13(null);
|
|
4059
|
-
const
|
|
4066
|
+
const clearedUnit = useRef13(null);
|
|
4067
|
+
const { sizeValue: resolvedSizeValue, placeholder } = resolveBoundPropValue(
|
|
4060
4068
|
value ?? lastNonAutoValue.current,
|
|
4061
4069
|
boundPropPlaceholder,
|
|
4062
4070
|
propPlaceholder
|
|
4063
4071
|
);
|
|
4072
|
+
const sizeValue = applyClearedUnit(resolvedSizeValue, value, clearedUnit.current);
|
|
4064
4073
|
const units2 = getSizeUnits(propType, variant);
|
|
4065
4074
|
const defaultUnit = getDefaultUnit(propType);
|
|
4066
4075
|
const handleBlur = () => {
|
|
4067
4076
|
const isRequired = propType.settings.required;
|
|
4068
4077
|
if (shouldNullifyValue(value) && !isRequired) {
|
|
4078
|
+
clearedUnit.current = value?.unit ?? null;
|
|
4069
4079
|
setValue(null);
|
|
4070
4080
|
}
|
|
4071
4081
|
if (isRequired) {
|
|
@@ -4073,6 +4083,7 @@ var UnstableSizeControl = createControl(
|
|
|
4073
4083
|
}
|
|
4074
4084
|
};
|
|
4075
4085
|
const handleChange = (newValue, options, meta) => {
|
|
4086
|
+
clearedUnit.current = null;
|
|
4076
4087
|
if (isTransitioningFromExtendedUnit(newValue, value)) {
|
|
4077
4088
|
lastNonAutoValue.current = newValue;
|
|
4078
4089
|
setValue(null);
|
|
@@ -4106,6 +4117,12 @@ var UnstableSizeControl = createControl(
|
|
|
4106
4117
|
);
|
|
4107
4118
|
}
|
|
4108
4119
|
);
|
|
4120
|
+
var applyClearedUnit = (resolvedValue, boundValue, clearedUnit) => {
|
|
4121
|
+
if (boundValue || !resolvedValue || !clearedUnit) {
|
|
4122
|
+
return resolvedValue;
|
|
4123
|
+
}
|
|
4124
|
+
return { ...resolvedValue, unit: clearedUnit };
|
|
4125
|
+
};
|
|
4109
4126
|
var isTransitioningFromExtendedUnit = (nextValue, previousValue) => {
|
|
4110
4127
|
return !isExtendedUnit(nextValue.unit) && isExtendedUnit(previousValue?.unit) && nextValue.size === "";
|
|
4111
4128
|
};
|
|
@@ -4797,7 +4814,7 @@ function factoryFilter(newValue, options, minInputLength) {
|
|
|
4797
4814
|
}
|
|
4798
4815
|
|
|
4799
4816
|
// src/hooks/use-query-autocomplete.ts
|
|
4800
|
-
import { useEffect as useEffect14, useMemo as useMemo9, useState as useState14 } from "react";
|
|
4817
|
+
import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef15, useState as useState14 } from "react";
|
|
4801
4818
|
import { numberPropTypeUtil as numberPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
|
|
4802
4819
|
import { httpService as httpService2 } from "@elementor/http-client";
|
|
4803
4820
|
import { debounce as debounce2 } from "@elementor/utils";
|
|
@@ -4821,13 +4838,16 @@ function useQueryAutocomplete({
|
|
|
4821
4838
|
),
|
|
4822
4839
|
[url, excludeIdSet]
|
|
4823
4840
|
);
|
|
4841
|
+
const paramsKey = useMemo9(() => JSON.stringify(params), [params]);
|
|
4842
|
+
const paramsRef = useRef15(params);
|
|
4843
|
+
paramsRef.current = params;
|
|
4824
4844
|
useEffect14(() => {
|
|
4825
4845
|
if (minInputLength === 0 && url) {
|
|
4826
|
-
fetchOptions(url, { ...
|
|
4846
|
+
fetchOptions(url, { ...paramsRef.current, term: "" }).then((newOptions) => {
|
|
4827
4847
|
setOptions(formatOptions(filterExcludedOptions(newOptions, excludeIdSet)));
|
|
4828
4848
|
});
|
|
4829
4849
|
}
|
|
4830
|
-
}, [url, minInputLength, excludeIdSet,
|
|
4850
|
+
}, [url, minInputLength, excludeIdSet, paramsKey]);
|
|
4831
4851
|
const updateOptions = (term) => {
|
|
4832
4852
|
const termStr = term ?? "";
|
|
4833
4853
|
if (!url || termStr.length < minInputLength) {
|
|
@@ -5258,7 +5278,7 @@ function extractChips(value) {
|
|
|
5258
5278
|
|
|
5259
5279
|
// src/controls/query-filter-repeater-control.tsx
|
|
5260
5280
|
import * as React80 from "react";
|
|
5261
|
-
import { useMemo as useMemo11, useRef as
|
|
5281
|
+
import { useMemo as useMemo11, useRef as useRef16 } from "react";
|
|
5262
5282
|
import { useSelectedElementSettings } from "@elementor/editor-elements";
|
|
5263
5283
|
import {
|
|
5264
5284
|
extractValue,
|
|
@@ -5360,7 +5380,7 @@ var ItemContent = ({
|
|
|
5360
5380
|
chipsPlaceholder
|
|
5361
5381
|
}) => {
|
|
5362
5382
|
const propContext = useBoundProp(queryFilterPropTypeUtil);
|
|
5363
|
-
const snapshotsByKeyRef =
|
|
5383
|
+
const snapshotsByKeyRef = useRef16({});
|
|
5364
5384
|
const handleValueChange = (nextValue, options, meta) => {
|
|
5365
5385
|
if (meta?.bind !== "key") {
|
|
5366
5386
|
propContext.setValue(nextValue, options, meta);
|
|
@@ -5430,9 +5450,85 @@ function getUsedKeys(items2) {
|
|
|
5430
5450
|
return new Set(keys);
|
|
5431
5451
|
}
|
|
5432
5452
|
|
|
5433
|
-
// src/controls/
|
|
5453
|
+
// src/controls/query-select-control.tsx
|
|
5434
5454
|
import * as React81 from "react";
|
|
5435
|
-
import {
|
|
5455
|
+
import { useMemo as useMemo12 } from "react";
|
|
5456
|
+
import { numberPropTypeUtil as numberPropTypeUtil5, queryPropTypeUtil as queryPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
|
|
5457
|
+
import { Autocomplete as Autocomplete4, TextField as TextField10 } from "@elementor/ui";
|
|
5458
|
+
import { __ as __31 } from "@wordpress/i18n";
|
|
5459
|
+
var SIZE10 = "tiny";
|
|
5460
|
+
var QuerySelectControl = createControl((props) => {
|
|
5461
|
+
const { queryOptions, placeholder, minInputLength = 0, ariaLabel } = props;
|
|
5462
|
+
const { value, setValue, disabled } = useBoundProp(queryPropTypeUtil3);
|
|
5463
|
+
const selectedOption = useMemo12(() => extractFlatOptionFromQueryValue(value), [value]);
|
|
5464
|
+
const { options, updateOptions } = useQueryAutocomplete({
|
|
5465
|
+
url: queryOptions.url,
|
|
5466
|
+
params: queryOptions.params,
|
|
5467
|
+
minInputLength,
|
|
5468
|
+
initialQueryValue: value
|
|
5469
|
+
});
|
|
5470
|
+
const optionsWithSelected = useMemo12(
|
|
5471
|
+
() => withSelectedOption(options, selectedOption),
|
|
5472
|
+
[options, selectedOption]
|
|
5473
|
+
);
|
|
5474
|
+
const handleChange = (_, newValue) => {
|
|
5475
|
+
if (!newValue) {
|
|
5476
|
+
setValue(null);
|
|
5477
|
+
return;
|
|
5478
|
+
}
|
|
5479
|
+
setValue({
|
|
5480
|
+
id: numberPropTypeUtil5.create(Number(newValue.id)),
|
|
5481
|
+
label: stringPropTypeUtil13.create(newValue.label)
|
|
5482
|
+
});
|
|
5483
|
+
};
|
|
5484
|
+
const handleInputChange = (_, term, reason) => {
|
|
5485
|
+
if ("reset" === reason || "clear" === reason) {
|
|
5486
|
+
updateOptions(null);
|
|
5487
|
+
return;
|
|
5488
|
+
}
|
|
5489
|
+
if ("input" !== reason) {
|
|
5490
|
+
return;
|
|
5491
|
+
}
|
|
5492
|
+
updateOptions(term || null);
|
|
5493
|
+
};
|
|
5494
|
+
return /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(
|
|
5495
|
+
Autocomplete4,
|
|
5496
|
+
{
|
|
5497
|
+
fullWidth: true,
|
|
5498
|
+
openOnFocus: true,
|
|
5499
|
+
disabled,
|
|
5500
|
+
size: SIZE10,
|
|
5501
|
+
value: selectedOption,
|
|
5502
|
+
options: optionsWithSelected,
|
|
5503
|
+
onChange: handleChange,
|
|
5504
|
+
onInputChange: handleInputChange,
|
|
5505
|
+
getOptionLabel: (option) => option.label,
|
|
5506
|
+
isOptionEqualToValue: (option, val) => option.id === val.id,
|
|
5507
|
+
filterOptions: (opts) => opts,
|
|
5508
|
+
renderInput: (params) => /* @__PURE__ */ React81.createElement(
|
|
5509
|
+
TextField10,
|
|
5510
|
+
{
|
|
5511
|
+
...params,
|
|
5512
|
+
placeholder: placeholder ?? __31("Search", "elementor"),
|
|
5513
|
+
inputProps: {
|
|
5514
|
+
...params.inputProps,
|
|
5515
|
+
...ariaLabel ? { "aria-label": ariaLabel } : {}
|
|
5516
|
+
}
|
|
5517
|
+
}
|
|
5518
|
+
)
|
|
5519
|
+
}
|
|
5520
|
+
));
|
|
5521
|
+
});
|
|
5522
|
+
function withSelectedOption(options, selectedOption) {
|
|
5523
|
+
if (!selectedOption || options.some((option) => option.id === selectedOption.id)) {
|
|
5524
|
+
return options;
|
|
5525
|
+
}
|
|
5526
|
+
return [selectedOption, ...options];
|
|
5527
|
+
}
|
|
5528
|
+
|
|
5529
|
+
// src/controls/gap-control.tsx
|
|
5530
|
+
import * as React82 from "react";
|
|
5531
|
+
import { useLayoutEffect as useLayoutEffect2, useRef as useRef17, useState as useState16 } from "react";
|
|
5436
5532
|
import {
|
|
5437
5533
|
layoutDirectionPropTypeUtil,
|
|
5438
5534
|
sizePropTypeUtil as sizePropTypeUtil6
|
|
@@ -5440,9 +5536,9 @@ import {
|
|
|
5440
5536
|
import { useActiveBreakpoint as useActiveBreakpoint5 } from "@elementor/editor-responsive";
|
|
5441
5537
|
import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
|
|
5442
5538
|
import { Grid as Grid12, Stack as Stack13, Tooltip as Tooltip7 } from "@elementor/ui";
|
|
5443
|
-
import { __ as
|
|
5539
|
+
import { __ as __32 } from "@wordpress/i18n";
|
|
5444
5540
|
var GapControl = ({ label }) => {
|
|
5445
|
-
const stackRef =
|
|
5541
|
+
const stackRef = useRef17(null);
|
|
5446
5542
|
const { disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil6);
|
|
5447
5543
|
const {
|
|
5448
5544
|
value: directionValue,
|
|
@@ -5488,8 +5584,8 @@ var GapControl = ({ label }) => {
|
|
|
5488
5584
|
};
|
|
5489
5585
|
const tooltipLabel = label.toLowerCase();
|
|
5490
5586
|
const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
|
|
5491
|
-
const linkedLabel =
|
|
5492
|
-
const unlinkedLabel =
|
|
5587
|
+
const linkedLabel = __32("Link %s", "elementor").replace("%s", tooltipLabel);
|
|
5588
|
+
const unlinkedLabel = __32("Unlink %s", "elementor").replace("%s", tooltipLabel);
|
|
5493
5589
|
const disabled = sizeDisabled || directionDisabled;
|
|
5494
5590
|
const propProviderProps = {
|
|
5495
5591
|
propType,
|
|
@@ -5509,7 +5605,7 @@ var GapControl = ({ label }) => {
|
|
|
5509
5605
|
}
|
|
5510
5606
|
return sizePropTypeUtil6.extract(directionPlaceholder?.[bind]);
|
|
5511
5607
|
};
|
|
5512
|
-
return /* @__PURE__ */
|
|
5608
|
+
return /* @__PURE__ */ React82.createElement(PropProvider, { ...propProviderProps }, /* @__PURE__ */ React82.createElement(Stack13, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React82.createElement(ControlLabel, null, label), /* @__PURE__ */ React82.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React82.createElement(
|
|
5513
5609
|
StyledToggleButton,
|
|
5514
5610
|
{
|
|
5515
5611
|
"aria-label": isLinked ? unlinkedLabel : linkedLabel,
|
|
@@ -5521,21 +5617,21 @@ var GapControl = ({ label }) => {
|
|
|
5521
5617
|
disabled,
|
|
5522
5618
|
isPlaceholder: hasPlaceholders
|
|
5523
5619
|
},
|
|
5524
|
-
/* @__PURE__ */
|
|
5525
|
-
))), /* @__PURE__ */
|
|
5620
|
+
/* @__PURE__ */ React82.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
5621
|
+
))), /* @__PURE__ */ React82.createElement(Stack13, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React82.createElement(Grid12, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React82.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, __32("Column", "elementor"))), /* @__PURE__ */ React82.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(
|
|
5526
5622
|
Control4,
|
|
5527
5623
|
{
|
|
5528
5624
|
bind: "column",
|
|
5529
|
-
ariaLabel:
|
|
5625
|
+
ariaLabel: __32("Column gap", "elementor"),
|
|
5530
5626
|
isLinked,
|
|
5531
5627
|
anchorRef: stackRef,
|
|
5532
5628
|
placeholder: getEffectivePlaceholder("column") ?? void 0
|
|
5533
5629
|
}
|
|
5534
|
-
))), /* @__PURE__ */
|
|
5630
|
+
))), /* @__PURE__ */ React82.createElement(Grid12, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React82.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, __32("Row", "elementor"))), /* @__PURE__ */ React82.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(
|
|
5535
5631
|
Control4,
|
|
5536
5632
|
{
|
|
5537
5633
|
bind: "row",
|
|
5538
|
-
ariaLabel:
|
|
5634
|
+
ariaLabel: __32("Row gap", "elementor"),
|
|
5539
5635
|
isLinked,
|
|
5540
5636
|
anchorRef: stackRef,
|
|
5541
5637
|
placeholder: getEffectivePlaceholder("row") ?? void 0
|
|
@@ -5550,21 +5646,21 @@ var Control4 = ({
|
|
|
5550
5646
|
placeholder
|
|
5551
5647
|
}) => {
|
|
5552
5648
|
if (isLinked) {
|
|
5553
|
-
return /* @__PURE__ */
|
|
5649
|
+
return /* @__PURE__ */ React82.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel });
|
|
5554
5650
|
}
|
|
5555
|
-
return /* @__PURE__ */
|
|
5651
|
+
return /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React82.createElement(UnstableSizeControl, { anchorRef, placeholder, ariaLabel }));
|
|
5556
5652
|
};
|
|
5557
5653
|
|
|
5558
5654
|
// src/controls/aspect-ratio-control.tsx
|
|
5559
|
-
import * as
|
|
5655
|
+
import * as React83 from "react";
|
|
5560
5656
|
import { useEffect as useEffect16, useState as useState17 } from "react";
|
|
5561
|
-
import { stringPropTypeUtil as
|
|
5657
|
+
import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
|
|
5562
5658
|
import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
|
|
5563
5659
|
import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
|
|
5564
|
-
import { Grid as Grid13, Select as Select3, Stack as Stack14, TextField as
|
|
5565
|
-
import { __ as
|
|
5660
|
+
import { Grid as Grid13, Select as Select3, Stack as Stack14, TextField as TextField11 } from "@elementor/ui";
|
|
5661
|
+
import { __ as __33 } from "@wordpress/i18n";
|
|
5566
5662
|
var RATIO_OPTIONS = [
|
|
5567
|
-
{ label:
|
|
5663
|
+
{ label: __33("Auto", "elementor"), value: "auto" },
|
|
5568
5664
|
{ label: "1/1", value: "1/1" },
|
|
5569
5665
|
{ label: "4/3", value: "4/3" },
|
|
5570
5666
|
{ label: "3/4", value: "3/4" },
|
|
@@ -5580,7 +5676,7 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5580
5676
|
setValue: setAspectRatioValue,
|
|
5581
5677
|
disabled,
|
|
5582
5678
|
placeholder: externalPlaceholder
|
|
5583
|
-
} = useBoundProp(
|
|
5679
|
+
} = useBoundProp(stringPropTypeUtil14);
|
|
5584
5680
|
const aspectRatioValue = currentPropValue ?? externalPlaceholder;
|
|
5585
5681
|
const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
|
|
5586
5682
|
const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
|
|
@@ -5631,7 +5727,7 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5631
5727
|
};
|
|
5632
5728
|
const lookup = currentPropValue ?? externalPlaceholder;
|
|
5633
5729
|
const selectedOption = RATIO_OPTIONS.find((option) => option.value === lookup);
|
|
5634
|
-
return /* @__PURE__ */
|
|
5730
|
+
return /* @__PURE__ */ React83.createElement(ControlActions, null, /* @__PURE__ */ React83.createElement(Stack14, { direction: "column", gap: 2 }, /* @__PURE__ */ React83.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React83.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(ControlLabel, null, label)), /* @__PURE__ */ React83.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(
|
|
5635
5731
|
Select3,
|
|
5636
5732
|
{
|
|
5637
5733
|
size: "tiny",
|
|
@@ -5643,11 +5739,11 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5643
5739
|
renderValue: isCustomSelected ? void 0 : () => selectedOption?.label,
|
|
5644
5740
|
fullWidth: true
|
|
5645
5741
|
},
|
|
5646
|
-
[...RATIO_OPTIONS, { label:
|
|
5647
|
-
({ label: optionLabel, ...props }) => /* @__PURE__ */
|
|
5742
|
+
[...RATIO_OPTIONS, { label: __33("Custom", "elementor"), value: CUSTOM_RATIO }].map(
|
|
5743
|
+
({ label: optionLabel, ...props }) => /* @__PURE__ */ React83.createElement(MenuListItem5, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
|
|
5648
5744
|
)
|
|
5649
|
-
))), isCustom && /* @__PURE__ */
|
|
5650
|
-
|
|
5745
|
+
))), isCustom && /* @__PURE__ */ React83.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React83.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(
|
|
5746
|
+
TextField11,
|
|
5651
5747
|
{
|
|
5652
5748
|
size: "tiny",
|
|
5653
5749
|
type: "number",
|
|
@@ -5656,11 +5752,11 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5656
5752
|
value: customWidth,
|
|
5657
5753
|
onChange: handleCustomWidthChange,
|
|
5658
5754
|
InputProps: {
|
|
5659
|
-
startAdornment: /* @__PURE__ */
|
|
5755
|
+
startAdornment: /* @__PURE__ */ React83.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
|
|
5660
5756
|
}
|
|
5661
5757
|
}
|
|
5662
|
-
)), /* @__PURE__ */
|
|
5663
|
-
|
|
5758
|
+
)), /* @__PURE__ */ React83.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(
|
|
5759
|
+
TextField11,
|
|
5664
5760
|
{
|
|
5665
5761
|
size: "tiny",
|
|
5666
5762
|
type: "number",
|
|
@@ -5669,23 +5765,23 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5669
5765
|
value: customHeight,
|
|
5670
5766
|
onChange: handleCustomHeightChange,
|
|
5671
5767
|
InputProps: {
|
|
5672
|
-
startAdornment: /* @__PURE__ */
|
|
5768
|
+
startAdornment: /* @__PURE__ */ React83.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
|
|
5673
5769
|
}
|
|
5674
5770
|
}
|
|
5675
5771
|
)))));
|
|
5676
5772
|
});
|
|
5677
5773
|
|
|
5678
5774
|
// src/controls/svg-media-control.tsx
|
|
5679
|
-
import * as
|
|
5680
|
-
import { useEffect as useEffect18, useRef as
|
|
5775
|
+
import * as React94 from "react";
|
|
5776
|
+
import { useEffect as useEffect18, useRef as useRef22, useState as useState24 } from "react";
|
|
5681
5777
|
import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
|
|
5682
5778
|
import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
|
|
5683
5779
|
import { Box as Box24, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack18, styled as styled12, usePopupState as usePopupState9 } from "@elementor/ui";
|
|
5684
5780
|
import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
|
|
5685
|
-
import { __ as
|
|
5781
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
5686
5782
|
|
|
5687
5783
|
// src/components/enable-unfiltered-modal.tsx
|
|
5688
|
-
import * as
|
|
5784
|
+
import * as React84 from "react";
|
|
5689
5785
|
import { useState as useState18 } from "react";
|
|
5690
5786
|
import {
|
|
5691
5787
|
Button as Button5,
|
|
@@ -5698,14 +5794,14 @@ import {
|
|
|
5698
5794
|
DialogTitle,
|
|
5699
5795
|
Divider as Divider3
|
|
5700
5796
|
} from "@elementor/ui";
|
|
5701
|
-
import { __ as
|
|
5702
|
-
var ADMIN_TITLE_TEXT =
|
|
5703
|
-
var ADMIN_CONTENT_TEXT =
|
|
5797
|
+
import { __ as __34 } from "@wordpress/i18n";
|
|
5798
|
+
var ADMIN_TITLE_TEXT = __34("Enable Unfiltered Uploads", "elementor");
|
|
5799
|
+
var ADMIN_CONTENT_TEXT = __34(
|
|
5704
5800
|
"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.",
|
|
5705
5801
|
"elementor"
|
|
5706
5802
|
);
|
|
5707
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT1 =
|
|
5708
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT2 =
|
|
5803
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT1 = __34("Failed to enable unfiltered files upload.", "elementor");
|
|
5804
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT2 = __34(
|
|
5709
5805
|
"You can try again, if the problem persists, please contact support.",
|
|
5710
5806
|
"elementor"
|
|
5711
5807
|
);
|
|
@@ -5730,9 +5826,9 @@ var EnableUnfilteredModal = (props) => {
|
|
|
5730
5826
|
}
|
|
5731
5827
|
};
|
|
5732
5828
|
const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
|
|
5733
|
-
return /* @__PURE__ */
|
|
5829
|
+
return /* @__PURE__ */ React84.createElement(AdminDialog, { ...dialogProps });
|
|
5734
5830
|
};
|
|
5735
|
-
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */
|
|
5831
|
+
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React84.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React84.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React84.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React84.createElement(Divider3, null), /* @__PURE__ */ React84.createElement(DialogContent, null, /* @__PURE__ */ React84.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React84.createElement(React84.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React84.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React84.createElement(DialogActions, null, /* @__PURE__ */ React84.createElement(Button5, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __34("Cancel", "elementor")), /* @__PURE__ */ React84.createElement(
|
|
5736
5832
|
Button5,
|
|
5737
5833
|
{
|
|
5738
5834
|
size: "medium",
|
|
@@ -5741,7 +5837,7 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
5741
5837
|
color: "primary",
|
|
5742
5838
|
disabled: isPending
|
|
5743
5839
|
},
|
|
5744
|
-
isPending ? /* @__PURE__ */
|
|
5840
|
+
isPending ? /* @__PURE__ */ React84.createElement(CircularProgress2, { size: 24 }) : __34("Enable", "elementor")
|
|
5745
5841
|
)));
|
|
5746
5842
|
|
|
5747
5843
|
// src/controls/icon-library/get-icon-library-anchor.ts
|
|
@@ -5760,8 +5856,8 @@ function measureIconLibraryAnchor(container, buttonGroup) {
|
|
|
5760
5856
|
}
|
|
5761
5857
|
|
|
5762
5858
|
// src/controls/icon-library/icon-library-popover.tsx
|
|
5763
|
-
import * as
|
|
5764
|
-
import { useMemo as
|
|
5859
|
+
import * as React91 from "react";
|
|
5860
|
+
import { useMemo as useMemo13, useState as useState23 } from "react";
|
|
5765
5861
|
import {
|
|
5766
5862
|
PopoverBody as PopoverBody2,
|
|
5767
5863
|
PopoverHeader as PopoverHeader4,
|
|
@@ -5773,7 +5869,7 @@ import { LibraryIcon as LibraryIcon2 } from "@elementor/icons";
|
|
|
5773
5869
|
import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
|
|
5774
5870
|
import { Box as Box21, CircularProgress as CircularProgress3, Divider as Divider5, Link as Link3, Stack as Stack16, styled as styled11, Typography as Typography10 } from "@elementor/ui";
|
|
5775
5871
|
import { useDebounceState } from "@elementor/utils";
|
|
5776
|
-
import { __ as
|
|
5872
|
+
import { __ as __39 } from "@wordpress/i18n";
|
|
5777
5873
|
|
|
5778
5874
|
// src/controls/icon-library/font-awesome-7-data.ts
|
|
5779
5875
|
var FONT_AWESOME_7_LIBRARIES = [
|
|
@@ -6021,12 +6117,12 @@ function toCatalogIcon(icon, library) {
|
|
|
6021
6117
|
}
|
|
6022
6118
|
|
|
6023
6119
|
// src/controls/icon-library/font-awesome-glyph.tsx
|
|
6024
|
-
import * as
|
|
6025
|
-
import { useEffect as useEffect17, useRef as
|
|
6120
|
+
import * as React85 from "react";
|
|
6121
|
+
import { useEffect as useEffect17, useRef as useRef19, useState as useState20 } from "react";
|
|
6026
6122
|
import { Box as Box17 } from "@elementor/ui";
|
|
6027
6123
|
|
|
6028
6124
|
// src/controls/icon-library/icon-library-providers.ts
|
|
6029
|
-
import { useRef as
|
|
6125
|
+
import { useRef as useRef18, useState as useState19 } from "react";
|
|
6030
6126
|
import { useQuery as useQuery2 } from "@elementor/query";
|
|
6031
6127
|
var PROVIDER_ICON_SVG_QUERY_KEY = "icon-library-provider-svg";
|
|
6032
6128
|
var providers = /* @__PURE__ */ new Map();
|
|
@@ -6072,7 +6168,7 @@ async function resolveFromProviders(pickResolver, library, iconValue, signal) {
|
|
|
6072
6168
|
return null;
|
|
6073
6169
|
}
|
|
6074
6170
|
function useStableConcat(lists) {
|
|
6075
|
-
const previous =
|
|
6171
|
+
const previous = useRef18(null);
|
|
6076
6172
|
if (!previous.current || !areSameLists(previous.current.lists, lists)) {
|
|
6077
6173
|
previous.current = { lists, merged: lists.flatMap((list) => list ?? []) };
|
|
6078
6174
|
}
|
|
@@ -6139,15 +6235,15 @@ function pruneNode(node) {
|
|
|
6139
6235
|
var FontAwesomeGlyph = (props) => {
|
|
6140
6236
|
const { icon } = props;
|
|
6141
6237
|
if (icon.lazySvg && !icon.svgMarkup) {
|
|
6142
|
-
return /* @__PURE__ */
|
|
6238
|
+
return /* @__PURE__ */ React85.createElement(LazyProviderGlyph, { ...props });
|
|
6143
6239
|
}
|
|
6144
|
-
return /* @__PURE__ */
|
|
6240
|
+
return /* @__PURE__ */ React85.createElement(ResolvedGlyph, { ...props });
|
|
6145
6241
|
};
|
|
6146
6242
|
var LazyProviderGlyph = (props) => {
|
|
6147
6243
|
const { icon, size } = props;
|
|
6148
6244
|
const [resolved, setResolved] = useState20(null);
|
|
6149
6245
|
const [isVisible, setIsVisible] = useState20(typeof IntersectionObserver === "undefined");
|
|
6150
|
-
const placeholderRef =
|
|
6246
|
+
const placeholderRef = useRef19(null);
|
|
6151
6247
|
const svgMarkup = resolved?.id === icon.id ? resolved.markup : null;
|
|
6152
6248
|
useEffect17(() => {
|
|
6153
6249
|
const element = placeholderRef.current;
|
|
@@ -6173,7 +6269,7 @@ var LazyProviderGlyph = (props) => {
|
|
|
6173
6269
|
return () => controller.abort();
|
|
6174
6270
|
}, [isVisible, icon.id, icon.library, icon.value]);
|
|
6175
6271
|
if (!svgMarkup) {
|
|
6176
|
-
return /* @__PURE__ */
|
|
6272
|
+
return /* @__PURE__ */ React85.createElement(
|
|
6177
6273
|
Box17,
|
|
6178
6274
|
{
|
|
6179
6275
|
component: "span",
|
|
@@ -6183,12 +6279,12 @@ var LazyProviderGlyph = (props) => {
|
|
|
6183
6279
|
}
|
|
6184
6280
|
);
|
|
6185
6281
|
}
|
|
6186
|
-
return /* @__PURE__ */
|
|
6282
|
+
return /* @__PURE__ */ React85.createElement(ResolvedGlyph, { ...props, icon: { ...icon, svgMarkup } });
|
|
6187
6283
|
};
|
|
6188
6284
|
var ResolvedGlyph = ({ icon, size, color, label }) => {
|
|
6189
6285
|
const svgMarkup = sanitizeIconSvgMarkup(icon.svgMarkup);
|
|
6190
6286
|
if (svgMarkup) {
|
|
6191
|
-
return /* @__PURE__ */
|
|
6287
|
+
return /* @__PURE__ */ React85.createElement(
|
|
6192
6288
|
Box17,
|
|
6193
6289
|
{
|
|
6194
6290
|
component: "span",
|
|
@@ -6214,7 +6310,7 @@ var ResolvedGlyph = ({ icon, size, color, label }) => {
|
|
|
6214
6310
|
);
|
|
6215
6311
|
}
|
|
6216
6312
|
if (icon.paths.length > 0) {
|
|
6217
|
-
return /* @__PURE__ */
|
|
6313
|
+
return /* @__PURE__ */ React85.createElement(
|
|
6218
6314
|
"svg",
|
|
6219
6315
|
{
|
|
6220
6316
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -6227,11 +6323,11 @@ var ResolvedGlyph = ({ icon, size, color, label }) => {
|
|
|
6227
6323
|
"aria-label": label,
|
|
6228
6324
|
role: label ? "img" : void 0
|
|
6229
6325
|
},
|
|
6230
|
-
icon.paths.map((path, index) => /* @__PURE__ */
|
|
6326
|
+
icon.paths.map((path, index) => /* @__PURE__ */ React85.createElement("path", { key: `${index}-${path}`, d: path }))
|
|
6231
6327
|
);
|
|
6232
6328
|
}
|
|
6233
6329
|
if (icon.glyphClass) {
|
|
6234
|
-
return /* @__PURE__ */
|
|
6330
|
+
return /* @__PURE__ */ React85.createElement(
|
|
6235
6331
|
"i",
|
|
6236
6332
|
{
|
|
6237
6333
|
className: icon.glyphClass,
|
|
@@ -6245,7 +6341,7 @@ var ResolvedGlyph = ({ icon, size, color, label }) => {
|
|
|
6245
6341
|
};
|
|
6246
6342
|
|
|
6247
6343
|
// src/controls/icon-library/icon-library-filter.tsx
|
|
6248
|
-
import * as
|
|
6344
|
+
import * as React86 from "react";
|
|
6249
6345
|
import { useId as useId4 } from "react";
|
|
6250
6346
|
import {
|
|
6251
6347
|
CheckIcon,
|
|
@@ -6270,7 +6366,7 @@ import {
|
|
|
6270
6366
|
Typography as Typography9,
|
|
6271
6367
|
usePopupState as usePopupState8
|
|
6272
6368
|
} from "@elementor/ui";
|
|
6273
|
-
import { __ as
|
|
6369
|
+
import { __ as __35 } from "@wordpress/i18n";
|
|
6274
6370
|
|
|
6275
6371
|
// src/controls/icon-library/icon-library-tooltip.ts
|
|
6276
6372
|
var ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY = 0;
|
|
@@ -6304,21 +6400,21 @@ var IconLibraryFilter = ({ value, onChange }) => {
|
|
|
6304
6400
|
const entries = getFilterEntries();
|
|
6305
6401
|
const selectableValues = entries.flatMap((entry) => entry.type === FILTER_TYPE_ITEM ? [entry.value] : []);
|
|
6306
6402
|
const isFiltered = value.length > 0;
|
|
6307
|
-
const filterButtonLabel = isFiltered ?
|
|
6403
|
+
const filterButtonLabel = isFiltered ? __35("Filter by library, active", "elementor") : __35("Filter by library", "elementor");
|
|
6308
6404
|
const handleLibraryClick = (library) => {
|
|
6309
6405
|
const nextValue = value.includes(library) ? value.filter((selectedLibrary) => selectedLibrary !== library) : [...value, library];
|
|
6310
6406
|
onChange(nextValue.length === selectableValues.length ? [] : nextValue);
|
|
6311
6407
|
};
|
|
6312
|
-
return /* @__PURE__ */
|
|
6408
|
+
return /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(
|
|
6313
6409
|
Tooltip8,
|
|
6314
6410
|
{
|
|
6315
|
-
title:
|
|
6411
|
+
title: __35("Filter by library", "elementor"),
|
|
6316
6412
|
placement: "top",
|
|
6317
6413
|
enterDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
|
|
6318
6414
|
enterNextDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
|
|
6319
6415
|
disableInteractive: true
|
|
6320
6416
|
},
|
|
6321
|
-
/* @__PURE__ */
|
|
6417
|
+
/* @__PURE__ */ React86.createElement(
|
|
6322
6418
|
ToggleButton2,
|
|
6323
6419
|
{
|
|
6324
6420
|
"aria-label": filterButtonLabel,
|
|
@@ -6329,8 +6425,8 @@ var IconLibraryFilter = ({ value, onChange }) => {
|
|
|
6329
6425
|
...bindToggle2(popupState),
|
|
6330
6426
|
"aria-expanded": popupState.isOpen
|
|
6331
6427
|
},
|
|
6332
|
-
/* @__PURE__ */
|
|
6333
|
-
isFiltered ? /* @__PURE__ */
|
|
6428
|
+
/* @__PURE__ */ React86.createElement(FilterIcon2, { fontSize: "tiny" }),
|
|
6429
|
+
isFiltered ? /* @__PURE__ */ React86.createElement(
|
|
6334
6430
|
Box18,
|
|
6335
6431
|
{
|
|
6336
6432
|
component: "span",
|
|
@@ -6347,14 +6443,14 @@ var IconLibraryFilter = ({ value, onChange }) => {
|
|
|
6347
6443
|
}
|
|
6348
6444
|
) : null
|
|
6349
6445
|
)
|
|
6350
|
-
), /* @__PURE__ */
|
|
6446
|
+
), /* @__PURE__ */ React86.createElement(
|
|
6351
6447
|
Menu4,
|
|
6352
6448
|
{
|
|
6353
6449
|
...bindMenu3(popupState),
|
|
6354
6450
|
MenuListProps: {
|
|
6355
6451
|
dense: true,
|
|
6356
6452
|
autoFocusItem: true,
|
|
6357
|
-
"aria-label":
|
|
6453
|
+
"aria-label": __35("Filter by library", "elementor")
|
|
6358
6454
|
},
|
|
6359
6455
|
sx: { "& .MuiPaper-root": { minWidth: FILTER_MENU_WIDTH } }
|
|
6360
6456
|
},
|
|
@@ -6366,13 +6462,13 @@ var IconLibraryFilter = ({ value, onChange }) => {
|
|
|
6366
6462
|
var renderFilterEntry = (entry, index, selectedLibraries, isFiltered, onAllIconsClick, onLibraryClick) => {
|
|
6367
6463
|
if (entry.type === FILTER_TYPE_GROUP) {
|
|
6368
6464
|
return [
|
|
6369
|
-
/* @__PURE__ */
|
|
6370
|
-
/* @__PURE__ */
|
|
6465
|
+
/* @__PURE__ */ React86.createElement(Divider4, { key: `divider-${index}` }),
|
|
6466
|
+
/* @__PURE__ */ React86.createElement(ListSubheader, { key: `group-${index}`, disableSticky: true }, entry.label)
|
|
6371
6467
|
];
|
|
6372
6468
|
}
|
|
6373
6469
|
if (entry.type === FILTER_TYPE_ALL) {
|
|
6374
6470
|
return [
|
|
6375
|
-
/* @__PURE__ */
|
|
6471
|
+
/* @__PURE__ */ React86.createElement(
|
|
6376
6472
|
MenuItem2,
|
|
6377
6473
|
{
|
|
6378
6474
|
key: `all-${index}`,
|
|
@@ -6387,7 +6483,7 @@ var renderFilterEntry = (entry, index, selectedLibraries, isFiltered, onAllIcons
|
|
|
6387
6483
|
}
|
|
6388
6484
|
const isSelected = selectedLibraries.includes(entry.value);
|
|
6389
6485
|
return [
|
|
6390
|
-
/* @__PURE__ */
|
|
6486
|
+
/* @__PURE__ */ React86.createElement(
|
|
6391
6487
|
MenuItem2,
|
|
6392
6488
|
{
|
|
6393
6489
|
key: entry.value,
|
|
@@ -6401,7 +6497,7 @@ var renderFilterEntry = (entry, index, selectedLibraries, isFiltered, onAllIcons
|
|
|
6401
6497
|
];
|
|
6402
6498
|
};
|
|
6403
6499
|
var getFilterIcon = (icon) => FILTER_ICONS[icon ?? ""] ?? LibraryIcon;
|
|
6404
|
-
var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */
|
|
6500
|
+
var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React86.createElement(Stack15, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React86.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React86.createElement(Typography9, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React86.createElement(CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null);
|
|
6405
6501
|
function getFilterEntries() {
|
|
6406
6502
|
const filter = window.elementorCommon?.config?.fontAwesome?.v7?.filter;
|
|
6407
6503
|
if (!Array.isArray(filter)) {
|
|
@@ -6440,11 +6536,11 @@ function parseFilterEntry(value) {
|
|
|
6440
6536
|
}
|
|
6441
6537
|
|
|
6442
6538
|
// src/controls/icon-library/icon-library-grid.tsx
|
|
6443
|
-
import * as
|
|
6444
|
-
import { useLayoutEffect as useLayoutEffect3, useRef as
|
|
6539
|
+
import * as React87 from "react";
|
|
6540
|
+
import { useLayoutEffect as useLayoutEffect3, useRef as useRef20, useState as useState21 } from "react";
|
|
6445
6541
|
import { Box as Box19, Tooltip as Tooltip9, useTheme as useTheme4 } from "@elementor/ui";
|
|
6446
6542
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
6447
|
-
import { __ as
|
|
6543
|
+
import { __ as __36 } from "@wordpress/i18n";
|
|
6448
6544
|
var ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT = 4;
|
|
6449
6545
|
var ICON_LIBRARY_GRID_MIN_CELL_SIZE = 52;
|
|
6450
6546
|
var ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY = 1e3;
|
|
@@ -6480,9 +6576,9 @@ var IconLibraryGrid = ({
|
|
|
6480
6576
|
noResultsComponent
|
|
6481
6577
|
}) => {
|
|
6482
6578
|
const theme = useTheme4();
|
|
6483
|
-
const containerRef =
|
|
6484
|
-
const cellRefs =
|
|
6485
|
-
const shouldRestoreFocusRef =
|
|
6579
|
+
const containerRef = useRef20(null);
|
|
6580
|
+
const cellRefs = useRef20(/* @__PURE__ */ new Map());
|
|
6581
|
+
const shouldRestoreFocusRef = useRef20(false);
|
|
6486
6582
|
const selectedIndex = items2.findIndex((item) => item.id === selectedValue);
|
|
6487
6583
|
const [focusedIndex, setFocusedIndex] = useState21(selectedIndex >= 0 ? selectedIndex : 0);
|
|
6488
6584
|
const [{ columnCount, cellSize }, setGridMetrics] = useState21(() => getGridMetrics(0, 0, 0));
|
|
@@ -6593,7 +6689,7 @@ var IconLibraryGrid = ({
|
|
|
6593
6689
|
moveFocus(event.key === "Home" ? rowStart : rowEnd);
|
|
6594
6690
|
}
|
|
6595
6691
|
};
|
|
6596
|
-
return /* @__PURE__ */
|
|
6692
|
+
return /* @__PURE__ */ React87.createElement(
|
|
6597
6693
|
Box19,
|
|
6598
6694
|
{
|
|
6599
6695
|
ref: containerRef,
|
|
@@ -6605,11 +6701,11 @@ var IconLibraryGrid = ({
|
|
|
6605
6701
|
overflowY: "auto"
|
|
6606
6702
|
}
|
|
6607
6703
|
},
|
|
6608
|
-
items2.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */
|
|
6704
|
+
items2.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React87.createElement(
|
|
6609
6705
|
Box19,
|
|
6610
6706
|
{
|
|
6611
6707
|
role: "grid",
|
|
6612
|
-
"aria-label":
|
|
6708
|
+
"aria-label": __36("Icons", "elementor"),
|
|
6613
6709
|
"aria-rowcount": rowCount,
|
|
6614
6710
|
"aria-colcount": columnCount,
|
|
6615
6711
|
"data-testid": "icon-library-grid",
|
|
@@ -6623,7 +6719,7 @@ var IconLibraryGrid = ({
|
|
|
6623
6719
|
virtualizer.getVirtualItems().map((virtualRow) => {
|
|
6624
6720
|
const startIndex = virtualRow.index * columnCount;
|
|
6625
6721
|
const rowItems = items2.slice(startIndex, startIndex + columnCount);
|
|
6626
|
-
return /* @__PURE__ */
|
|
6722
|
+
return /* @__PURE__ */ React87.createElement(
|
|
6627
6723
|
Box19,
|
|
6628
6724
|
{
|
|
6629
6725
|
key: virtualRow.key,
|
|
@@ -6647,14 +6743,14 @@ var IconLibraryGrid = ({
|
|
|
6647
6743
|
const index = startIndex + columnIndex;
|
|
6648
6744
|
const isSelected = selectedValue === item.id;
|
|
6649
6745
|
const tabIndex = focusedIndex === index ? 0 : -1;
|
|
6650
|
-
return /* @__PURE__ */
|
|
6746
|
+
return /* @__PURE__ */ React87.createElement(
|
|
6651
6747
|
Box19,
|
|
6652
6748
|
{
|
|
6653
6749
|
key: item.id,
|
|
6654
6750
|
role: "presentation",
|
|
6655
6751
|
sx: { minWidth: 0, minHeight: 0, width: "100%", height: "100%" }
|
|
6656
6752
|
},
|
|
6657
|
-
/* @__PURE__ */
|
|
6753
|
+
/* @__PURE__ */ React87.createElement(
|
|
6658
6754
|
Tooltip9,
|
|
6659
6755
|
{
|
|
6660
6756
|
title: item.label,
|
|
@@ -6664,7 +6760,7 @@ var IconLibraryGrid = ({
|
|
|
6664
6760
|
disableInteractive: true,
|
|
6665
6761
|
disableFocusListener: true
|
|
6666
6762
|
},
|
|
6667
|
-
/* @__PURE__ */
|
|
6763
|
+
/* @__PURE__ */ React87.createElement(
|
|
6668
6764
|
Box19,
|
|
6669
6765
|
{
|
|
6670
6766
|
component: "button",
|
|
@@ -6719,7 +6815,7 @@ var IconLibraryGrid = ({
|
|
|
6719
6815
|
}
|
|
6720
6816
|
}
|
|
6721
6817
|
},
|
|
6722
|
-
/* @__PURE__ */
|
|
6818
|
+
/* @__PURE__ */ React87.createElement(
|
|
6723
6819
|
FontAwesomeGlyph,
|
|
6724
6820
|
{
|
|
6725
6821
|
icon: { ...item, value: item.iconValue ?? item.value },
|
|
@@ -6738,13 +6834,13 @@ var IconLibraryGrid = ({
|
|
|
6738
6834
|
};
|
|
6739
6835
|
|
|
6740
6836
|
// src/controls/icon-library/icon-library-upload-action.tsx
|
|
6741
|
-
import * as
|
|
6742
|
-
import { forwardRef as forwardRef11, useRef as
|
|
6837
|
+
import * as React88 from "react";
|
|
6838
|
+
import { forwardRef as forwardRef11, useRef as useRef21, useState as useState22 } from "react";
|
|
6743
6839
|
import { PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
|
|
6744
6840
|
import { UploadIcon as UploadIcon2 } from "@elementor/icons";
|
|
6745
6841
|
import { createReplaceableLocation as createReplaceableLocation2 } from "@elementor/locations";
|
|
6746
6842
|
import { Box as Box20, IconButton as IconButton8, Tooltip as Tooltip10 } from "@elementor/ui";
|
|
6747
|
-
import { __ as
|
|
6843
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
6748
6844
|
|
|
6749
6845
|
// src/utils/tracking.ts
|
|
6750
6846
|
import { getSelectedElements } from "@elementor/editor-elements";
|
|
@@ -6790,18 +6886,18 @@ var TRACKING_DATA = { target_name: "icon_library_upload", location_l2: "general"
|
|
|
6790
6886
|
var { Slot: IconLibraryUploadActionSlot, inject: injectIntoIconLibraryUploadAction } = createReplaceableLocation2();
|
|
6791
6887
|
var IconLibraryUploadButton = forwardRef11(
|
|
6792
6888
|
(props, ref) => {
|
|
6793
|
-
const label =
|
|
6794
|
-
return /* @__PURE__ */
|
|
6889
|
+
const label = __37("Upload library", "elementor");
|
|
6890
|
+
return /* @__PURE__ */ React88.createElement(Tooltip10, { title: label, placement: "top" }, /* @__PURE__ */ React88.createElement(IconButton8, { ref, size: "tiny", "aria-label": label, ...props }, /* @__PURE__ */ React88.createElement(UploadIcon2, { fontSize: "tiny" })));
|
|
6795
6891
|
}
|
|
6796
6892
|
);
|
|
6797
6893
|
var IconLibraryUploadPromotion = ({
|
|
6798
6894
|
ctaUrl = ICON_LIBRARY_UPLOAD_UPGRADE_URL,
|
|
6799
|
-
ctaText =
|
|
6800
|
-
title =
|
|
6801
|
-
content =
|
|
6895
|
+
ctaText = __37("Upgrade now", "elementor"),
|
|
6896
|
+
title = __37("Upload custom icons", "elementor"),
|
|
6897
|
+
content = __37("Add your own icon font library to use across your site.", "elementor")
|
|
6802
6898
|
}) => {
|
|
6803
6899
|
const [isOpen, setIsOpen] = useState22(false);
|
|
6804
|
-
const triggerRef =
|
|
6900
|
+
const triggerRef = useRef21(null);
|
|
6805
6901
|
const canSeePromotions = !!window.elementor?.config?.v4Promotions;
|
|
6806
6902
|
const close = () => {
|
|
6807
6903
|
setIsOpen(false);
|
|
@@ -6817,7 +6913,7 @@ var IconLibraryUploadPromotion = ({
|
|
|
6817
6913
|
if (!canSeePromotions) {
|
|
6818
6914
|
return null;
|
|
6819
6915
|
}
|
|
6820
|
-
return /* @__PURE__ */
|
|
6916
|
+
return /* @__PURE__ */ React88.createElement(
|
|
6821
6917
|
PromotionPopover,
|
|
6822
6918
|
{
|
|
6823
6919
|
open: isOpen,
|
|
@@ -6833,7 +6929,7 @@ var IconLibraryUploadPromotion = ({
|
|
|
6833
6929
|
},
|
|
6834
6930
|
onCtaClick: () => trackUpgradePromotionClick(TRACKING_DATA)
|
|
6835
6931
|
},
|
|
6836
|
-
/* @__PURE__ */
|
|
6932
|
+
/* @__PURE__ */ React88.createElement(Box20, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React88.createElement(
|
|
6837
6933
|
IconLibraryUploadButton,
|
|
6838
6934
|
{
|
|
6839
6935
|
ref: triggerRef,
|
|
@@ -6848,22 +6944,22 @@ var IconLibraryUploadAction = () => {
|
|
|
6848
6944
|
if (window.elementorPro) {
|
|
6849
6945
|
return null;
|
|
6850
6946
|
}
|
|
6851
|
-
return /* @__PURE__ */
|
|
6947
|
+
return /* @__PURE__ */ React88.createElement(IconLibraryUploadPromotion, null);
|
|
6852
6948
|
};
|
|
6853
6949
|
|
|
6854
6950
|
// src/controls/icon-library/icon-library-view-toggle.tsx
|
|
6855
|
-
import * as
|
|
6951
|
+
import * as React89 from "react";
|
|
6856
6952
|
import { ListIcon, WidgetsIcon } from "@elementor/icons";
|
|
6857
6953
|
import { IconButton as IconButton9, Tooltip as Tooltip11 } from "@elementor/ui";
|
|
6858
|
-
import { __ as
|
|
6954
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
6859
6955
|
var HEADER_ACTION_GAP = 0.5;
|
|
6860
6956
|
var IconLibraryViewToggle = ({ value, onChange }) => {
|
|
6861
6957
|
const isGrid = value === "grid";
|
|
6862
6958
|
const nextView = isGrid ? "list" : "grid";
|
|
6863
6959
|
const ViewIcon = isGrid ? WidgetsIcon : ListIcon;
|
|
6864
|
-
const viewButtonLabel = isGrid ?
|
|
6865
|
-
const viewButtonAction = isGrid ?
|
|
6866
|
-
return /* @__PURE__ */
|
|
6960
|
+
const viewButtonLabel = isGrid ? __38("Grid view", "elementor") : __38("List view", "elementor");
|
|
6961
|
+
const viewButtonAction = isGrid ? __38("Switch to list view", "elementor") : __38("Switch to grid view", "elementor");
|
|
6962
|
+
return /* @__PURE__ */ React89.createElement(
|
|
6867
6963
|
Tooltip11,
|
|
6868
6964
|
{
|
|
6869
6965
|
title: viewButtonLabel,
|
|
@@ -6872,7 +6968,7 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
|
|
|
6872
6968
|
enterNextDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
|
|
6873
6969
|
disableInteractive: true
|
|
6874
6970
|
},
|
|
6875
|
-
/* @__PURE__ */
|
|
6971
|
+
/* @__PURE__ */ React89.createElement(
|
|
6876
6972
|
IconButton9,
|
|
6877
6973
|
{
|
|
6878
6974
|
"aria-label": viewButtonAction,
|
|
@@ -6880,7 +6976,7 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
|
|
|
6880
6976
|
onClick: () => onChange(nextView),
|
|
6881
6977
|
sx: { flexShrink: 0, mr: HEADER_ACTION_GAP }
|
|
6882
6978
|
},
|
|
6883
|
-
/* @__PURE__ */
|
|
6979
|
+
/* @__PURE__ */ React89.createElement(ViewIcon, { fontSize: "tiny" })
|
|
6884
6980
|
)
|
|
6885
6981
|
);
|
|
6886
6982
|
};
|
|
@@ -6901,11 +6997,11 @@ function mergeIconsById(primary, secondary) {
|
|
|
6901
6997
|
}
|
|
6902
6998
|
|
|
6903
6999
|
// src/controls/icon-library/svg-element-icon.tsx
|
|
6904
|
-
import * as
|
|
7000
|
+
import * as React90 from "react";
|
|
6905
7001
|
import { SvgIcon } from "@elementor/ui";
|
|
6906
7002
|
var SVG_ELEMENT_ICON_PATH = "M502 772c10 0 19-6 24-14l201-351c4-9 4-19 0-27-5-9-14-14-24-14h-401c-10 0-19 5-24 14-4 8-5 18 0 27l201 351c5 8 14 14 23 14z m0-82l-154-270h309l-154 270z m-323-471c-6 0-12-2-16-7-4-4-7-10-7-16v-201c0-6 3-12 7-16 4-5 10-7 16-7h201c6 0 12 2 16 7 5 4 7 10 7 16v201c0 6-2 12-7 16-4 5-10 7-16 7h-201z m-54 32c14 14 34 22 54 22h201c20 0 40-8 55-22 14-15 22-35 22-55v-201c0-20-8-40-22-54-15-15-35-23-55-23h-201c-20 0-40 8-54 23-15 14-23 34-23 54v201c0 20 8 40 23 55z m480-30c34 33 79 52 126 52s92-19 125-52c34-33 52-78 52-125s-18-93-52-126c-33-33-78-52-125-52s-92 19-126 52c-33 33-52 78-52 126s19 92 52 125z m126-2c-33 0-64-13-87-36-24-23-37-55-37-87s13-65 37-88c23-23 54-36 87-36s64 13 87 36c23 23 36 55 36 88s-13 64-36 87c-23 23-54 36-87 36z";
|
|
6907
|
-
var SvgElementIcon =
|
|
6908
|
-
(props, ref) => /* @__PURE__ */
|
|
7003
|
+
var SvgElementIcon = React90.forwardRef(
|
|
7004
|
+
(props, ref) => /* @__PURE__ */ React90.createElement(SvgIcon, { viewBox: "0 0 1000 1000", ...props, ref }, /* @__PURE__ */ React90.createElement("g", { transform: "translate(0, 850) scale(1, -1)" }, /* @__PURE__ */ React90.createElement("path", { d: SVG_ELEMENT_ICON_PATH })))
|
|
6909
7005
|
);
|
|
6910
7006
|
|
|
6911
7007
|
// src/controls/icon-library/use-font-awesome-7-catalog.ts
|
|
@@ -6964,16 +7060,16 @@ var IconLibraryPopover = ({
|
|
|
6964
7060
|
const view = isIconLibraryView(storedView) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
|
|
6965
7061
|
const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog(open);
|
|
6966
7062
|
const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(open);
|
|
6967
|
-
const icons =
|
|
7063
|
+
const icons = useMemo13(
|
|
6968
7064
|
() => mergeIconsById(fontAwesomeIcons, providerIcons),
|
|
6969
7065
|
[providerIcons, fontAwesomeIcons]
|
|
6970
7066
|
);
|
|
6971
|
-
const items2 =
|
|
7067
|
+
const items2 = useMemo13(
|
|
6972
7068
|
() => createIconLibraryItems(icons, searchValue, activeLibraries),
|
|
6973
7069
|
[activeLibraries, icons, searchValue]
|
|
6974
7070
|
);
|
|
6975
7071
|
const isLoading = isFontAwesomeLoading || isProviderLoading && items2.length === 0;
|
|
6976
|
-
const selectedValue =
|
|
7072
|
+
const selectedValue = useMemo13(
|
|
6977
7073
|
() => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
|
|
6978
7074
|
[icons, selectedIconClass, selectedIconLibrary]
|
|
6979
7075
|
);
|
|
@@ -6995,15 +7091,15 @@ var IconLibraryPopover = ({
|
|
|
6995
7091
|
const handleClearSearch = () => {
|
|
6996
7092
|
setSearchValue("");
|
|
6997
7093
|
};
|
|
6998
|
-
return /* @__PURE__ */
|
|
7094
|
+
return /* @__PURE__ */ React91.createElement(PopoverBody2, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React91.createElement(
|
|
6999
7095
|
PopoverHeader4,
|
|
7000
7096
|
{
|
|
7001
|
-
title:
|
|
7097
|
+
title: __39("Icon library", "elementor"),
|
|
7002
7098
|
onClose: handleClose,
|
|
7003
|
-
icon: /* @__PURE__ */
|
|
7099
|
+
icon: /* @__PURE__ */ React91.createElement(LibraryIcon2, { fontSize: "tiny" }),
|
|
7004
7100
|
actions: [
|
|
7005
|
-
/* @__PURE__ */
|
|
7006
|
-
/* @__PURE__ */
|
|
7101
|
+
/* @__PURE__ */ React91.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView }),
|
|
7102
|
+
/* @__PURE__ */ React91.createElement(IconLibraryUploadActionSlot, { key: "upload" }, /* @__PURE__ */ React91.createElement(IconLibraryUploadAction, null))
|
|
7007
7103
|
],
|
|
7008
7104
|
sx: {
|
|
7009
7105
|
pl: ICON_LIBRARY_INLINE_SPACING,
|
|
@@ -7011,7 +7107,7 @@ var IconLibraryPopover = ({
|
|
|
7011
7107
|
"& .MuiTypography-subtitle2": { fontSize: ICON_LIBRARY_TITLE_SIZE }
|
|
7012
7108
|
}
|
|
7013
7109
|
}
|
|
7014
|
-
), /* @__PURE__ */
|
|
7110
|
+
), /* @__PURE__ */ React91.createElement(
|
|
7015
7111
|
Stack16,
|
|
7016
7112
|
{
|
|
7017
7113
|
direction: "row",
|
|
@@ -7019,18 +7115,18 @@ var IconLibraryPopover = ({
|
|
|
7019
7115
|
gap: 1,
|
|
7020
7116
|
sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM }
|
|
7021
7117
|
},
|
|
7022
|
-
/* @__PURE__ */
|
|
7118
|
+
/* @__PURE__ */ React91.createElement(
|
|
7023
7119
|
SearchField2,
|
|
7024
7120
|
{
|
|
7025
7121
|
value: searchInputValue,
|
|
7026
7122
|
onSearch: handleSearchChange,
|
|
7027
|
-
placeholder:
|
|
7123
|
+
placeholder: __39("Search", "elementor"),
|
|
7028
7124
|
id: "icon-library-search",
|
|
7029
7125
|
sx: { flex: 1, px: 0, pb: 0 }
|
|
7030
7126
|
}
|
|
7031
7127
|
),
|
|
7032
|
-
/* @__PURE__ */
|
|
7033
|
-
), /* @__PURE__ */
|
|
7128
|
+
/* @__PURE__ */ React91.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })
|
|
7129
|
+
), /* @__PURE__ */ React91.createElement(Divider5, null), /* @__PURE__ */ React91.createElement(Box21, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React91.createElement(
|
|
7034
7130
|
IconLibraryContent,
|
|
7035
7131
|
{
|
|
7036
7132
|
isLoading,
|
|
@@ -7057,9 +7153,9 @@ var IconLibraryContent = ({
|
|
|
7057
7153
|
onClearSearch
|
|
7058
7154
|
}) => {
|
|
7059
7155
|
if (isLoading) {
|
|
7060
|
-
return /* @__PURE__ */
|
|
7156
|
+
return /* @__PURE__ */ React91.createElement(IconLibraryLoadingState, null);
|
|
7061
7157
|
}
|
|
7062
|
-
const emptyState = /* @__PURE__ */
|
|
7158
|
+
const emptyState = /* @__PURE__ */ React91.createElement(
|
|
7063
7159
|
IconLibraryEmptyState,
|
|
7064
7160
|
{
|
|
7065
7161
|
searchValue,
|
|
@@ -7068,7 +7164,7 @@ var IconLibraryContent = ({
|
|
|
7068
7164
|
}
|
|
7069
7165
|
);
|
|
7070
7166
|
if (view === "grid") {
|
|
7071
|
-
return /* @__PURE__ */
|
|
7167
|
+
return /* @__PURE__ */ React91.createElement(Box21, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React91.createElement(
|
|
7072
7168
|
IconLibraryGrid,
|
|
7073
7169
|
{
|
|
7074
7170
|
items: items2,
|
|
@@ -7079,7 +7175,7 @@ var IconLibraryContent = ({
|
|
|
7079
7175
|
}
|
|
7080
7176
|
));
|
|
7081
7177
|
}
|
|
7082
|
-
return /* @__PURE__ */
|
|
7178
|
+
return /* @__PURE__ */ React91.createElement(
|
|
7083
7179
|
PopoverMenuList2,
|
|
7084
7180
|
{
|
|
7085
7181
|
items: items2,
|
|
@@ -7094,20 +7190,20 @@ var IconLibraryContent = ({
|
|
|
7094
7190
|
}
|
|
7095
7191
|
);
|
|
7096
7192
|
};
|
|
7097
|
-
var IconLibraryLoadingState = () => /* @__PURE__ */
|
|
7193
|
+
var IconLibraryLoadingState = () => /* @__PURE__ */ React91.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React91.createElement(CircularProgress3, { role: "progressbar", size: 24, "aria-label": __39("Loading icons", "elementor") }));
|
|
7098
7194
|
var IconLibraryEmptyState = ({
|
|
7099
7195
|
searchValue,
|
|
7100
7196
|
isCatalogAvailable,
|
|
7101
7197
|
onClear
|
|
7102
7198
|
}) => {
|
|
7103
7199
|
if (!isCatalogAvailable) {
|
|
7104
|
-
return /* @__PURE__ */
|
|
7200
|
+
return /* @__PURE__ */ React91.createElement(CatalogUnavailable, null);
|
|
7105
7201
|
}
|
|
7106
|
-
return /* @__PURE__ */
|
|
7202
|
+
return /* @__PURE__ */ React91.createElement(NoResults, { searchValue, onClear });
|
|
7107
7203
|
};
|
|
7108
7204
|
var IconLibraryRow = (item) => {
|
|
7109
7205
|
const icon = item;
|
|
7110
|
-
return /* @__PURE__ */
|
|
7206
|
+
return /* @__PURE__ */ React91.createElement(Stack16, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React91.createElement(
|
|
7111
7207
|
Box21,
|
|
7112
7208
|
{
|
|
7113
7209
|
sx: {
|
|
@@ -7123,7 +7219,7 @@ var IconLibraryRow = (item) => {
|
|
|
7123
7219
|
flexShrink: 0
|
|
7124
7220
|
}
|
|
7125
7221
|
},
|
|
7126
|
-
/* @__PURE__ */
|
|
7222
|
+
/* @__PURE__ */ React91.createElement(
|
|
7127
7223
|
FontAwesomeGlyph,
|
|
7128
7224
|
{
|
|
7129
7225
|
icon: { ...icon, value: icon.iconValue },
|
|
@@ -7131,10 +7227,10 @@ var IconLibraryRow = (item) => {
|
|
|
7131
7227
|
color: "currentColor"
|
|
7132
7228
|
}
|
|
7133
7229
|
)
|
|
7134
|
-
), /* @__PURE__ */
|
|
7230
|
+
), /* @__PURE__ */ React91.createElement(Typography10, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
|
|
7135
7231
|
};
|
|
7136
|
-
var CatalogUnavailable = () => /* @__PURE__ */
|
|
7137
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
7232
|
+
var CatalogUnavailable = () => /* @__PURE__ */ React91.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React91.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React91.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary" }, __39("Icons couldn't be loaded.", "elementor")));
|
|
7233
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React91.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React91.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React91.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary" }, __39("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React91.createElement(Link3, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, __39("Clear & try again", "elementor"))) : null);
|
|
7138
7234
|
var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
|
|
7139
7235
|
...icon,
|
|
7140
7236
|
type: "item",
|
|
@@ -7143,23 +7239,23 @@ var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesom
|
|
|
7143
7239
|
}));
|
|
7144
7240
|
|
|
7145
7241
|
// src/controls/open-icon-library.ts
|
|
7146
|
-
import { stringPropTypeUtil as
|
|
7242
|
+
import { stringPropTypeUtil as stringPropTypeUtil15 } from "@elementor/editor-props";
|
|
7147
7243
|
function enqueueIconFonts(library) {
|
|
7148
7244
|
window.elementor?.helpers?.enqueueIconFonts?.(library);
|
|
7149
7245
|
}
|
|
7150
7246
|
function createIconPropValue(icon, library) {
|
|
7151
7247
|
return {
|
|
7152
|
-
value:
|
|
7153
|
-
library:
|
|
7248
|
+
value: stringPropTypeUtil15.create(icon),
|
|
7249
|
+
library: stringPropTypeUtil15.create(library)
|
|
7154
7250
|
};
|
|
7155
7251
|
}
|
|
7156
7252
|
|
|
7157
7253
|
// src/controls/svg-media-overlay.tsx
|
|
7158
|
-
import * as
|
|
7254
|
+
import * as React92 from "react";
|
|
7159
7255
|
import { ThemeProvider } from "@elementor/editor-ui";
|
|
7160
7256
|
import { LibraryIcon as LibraryIcon3 } from "@elementor/icons";
|
|
7161
7257
|
import { Box as Box22, Button as Button6, Stack as Stack17, Typography as Typography11 } from "@elementor/ui";
|
|
7162
|
-
import { __ as
|
|
7258
|
+
import { __ as __40 } from "@wordpress/i18n";
|
|
7163
7259
|
var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
|
|
7164
7260
|
var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
|
|
7165
7261
|
var ICON_LIBRARY_PADDING = 0.625;
|
|
@@ -7172,31 +7268,31 @@ var SvgMediaOverlay = ({
|
|
|
7172
7268
|
onOpenIconLibrary,
|
|
7173
7269
|
infotipTitle,
|
|
7174
7270
|
infotipDescription
|
|
7175
|
-
}) => /* @__PURE__ */
|
|
7271
|
+
}) => /* @__PURE__ */ React92.createElement(Stack17, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React92.createElement(
|
|
7176
7272
|
MediaActionGroup,
|
|
7177
7273
|
{
|
|
7178
7274
|
label,
|
|
7179
7275
|
onSelect: onSelectSvg,
|
|
7180
7276
|
groupRef: buttonGroupRef,
|
|
7181
7277
|
testId: SVG_MEDIA_ACTION_GROUP_TEST_ID,
|
|
7182
|
-
uploadSlot: /* @__PURE__ */
|
|
7278
|
+
uploadSlot: /* @__PURE__ */ React92.createElement(
|
|
7183
7279
|
ConditionalControlInfotip,
|
|
7184
7280
|
{
|
|
7185
7281
|
title: infotipTitle,
|
|
7186
7282
|
description: infotipDescription,
|
|
7187
7283
|
isEnabled: !isAdmin
|
|
7188
7284
|
},
|
|
7189
|
-
/* @__PURE__ */
|
|
7285
|
+
/* @__PURE__ */ React92.createElement(Box22, { component: "span", sx: { display: "flex", width: "100%" } }, /* @__PURE__ */ React92.createElement(UploadControl, { isAdmin, onUpload }))
|
|
7190
7286
|
)
|
|
7191
7287
|
}
|
|
7192
|
-
), /* @__PURE__ */
|
|
7288
|
+
), /* @__PURE__ */ React92.createElement(
|
|
7193
7289
|
Button6,
|
|
7194
7290
|
{
|
|
7195
7291
|
size: "tiny",
|
|
7196
7292
|
color: "inherit",
|
|
7197
7293
|
variant: "text",
|
|
7198
|
-
startIcon: /* @__PURE__ */
|
|
7199
|
-
"aria-label":
|
|
7294
|
+
startIcon: /* @__PURE__ */ React92.createElement(LibraryIcon3, { sx: { height: "18px", width: "16px" } }),
|
|
7295
|
+
"aria-label": __40("Icon library", "elementor"),
|
|
7200
7296
|
onClick: onOpenIconLibrary,
|
|
7201
7297
|
sx: {
|
|
7202
7298
|
height: "28px",
|
|
@@ -7204,20 +7300,20 @@ var SvgMediaOverlay = ({
|
|
|
7204
7300
|
".MuiButton-icon": { ml: 0 }
|
|
7205
7301
|
}
|
|
7206
7302
|
},
|
|
7207
|
-
/* @__PURE__ */
|
|
7303
|
+
/* @__PURE__ */ React92.createElement(Typography11, null, __40("Icon library", "elementor"))
|
|
7208
7304
|
));
|
|
7209
7305
|
var UploadControl = ({ isAdmin, onUpload }) => {
|
|
7210
7306
|
if (isAdmin) {
|
|
7211
|
-
return /* @__PURE__ */
|
|
7307
|
+
return /* @__PURE__ */ React92.createElement(MediaUploadButton, { onClick: onUpload });
|
|
7212
7308
|
}
|
|
7213
|
-
return /* @__PURE__ */
|
|
7309
|
+
return /* @__PURE__ */ React92.createElement(ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React92.createElement(MediaUploadButton, { disabled: true }));
|
|
7214
7310
|
};
|
|
7215
7311
|
|
|
7216
7312
|
// src/controls/svg-media-preview.tsx
|
|
7217
|
-
import * as
|
|
7218
|
-
import { useMemo as
|
|
7313
|
+
import * as React93 from "react";
|
|
7314
|
+
import { useMemo as useMemo14 } from "react";
|
|
7219
7315
|
import { Box as Box23, CardMedia as CardMedia2, CircularProgress as CircularProgress4 } from "@elementor/ui";
|
|
7220
|
-
import { __ as
|
|
7316
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
7221
7317
|
var ICON_PREVIEW_SIZE = 50;
|
|
7222
7318
|
var ICON_PREVIEW_COLOR = "#000000";
|
|
7223
7319
|
var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
@@ -7227,7 +7323,7 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
|
7227
7323
|
const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(
|
|
7228
7324
|
shouldLoadIconCatalog && !isFontAwesomeLibrary
|
|
7229
7325
|
);
|
|
7230
|
-
const icons =
|
|
7326
|
+
const icons = useMemo14(
|
|
7231
7327
|
() => mergeIconsById(fontAwesomeIcons, providerIcons),
|
|
7232
7328
|
[fontAwesomeIcons, providerIcons]
|
|
7233
7329
|
);
|
|
@@ -7239,21 +7335,21 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
|
7239
7335
|
shouldLoadIconCatalog && !isLoadingCatalog && !selectedIcon && !isFontAwesomeLibrary
|
|
7240
7336
|
);
|
|
7241
7337
|
if (isFetching || isLoadingCatalog || isSavedIconLoading) {
|
|
7242
|
-
return /* @__PURE__ */
|
|
7338
|
+
return /* @__PURE__ */ React93.createElement(CircularProgress4, { role: "progressbar", "aria-label": __41("Loading icon", "elementor") });
|
|
7243
7339
|
}
|
|
7244
7340
|
if (selectedIcon) {
|
|
7245
|
-
return /* @__PURE__ */
|
|
7341
|
+
return /* @__PURE__ */ React93.createElement(IconPreview, { icon: selectedIcon });
|
|
7246
7342
|
}
|
|
7247
7343
|
if (shouldLoadIconCatalog && iconClassName && iconLibrary && isFontAwesomeLibrary) {
|
|
7248
|
-
return /* @__PURE__ */
|
|
7344
|
+
return /* @__PURE__ */ React93.createElement(IconPreview, { icon: createLazyIcon(iconLibrary, iconClassName) });
|
|
7249
7345
|
}
|
|
7250
7346
|
if (savedIconSvg) {
|
|
7251
|
-
return /* @__PURE__ */
|
|
7347
|
+
return /* @__PURE__ */ React93.createElement(IconPreview, { icon: toSvgMarkupIcon(savedIconSvg, iconLibrary, iconClassName) });
|
|
7252
7348
|
}
|
|
7253
7349
|
if (shouldLoadIconCatalog) {
|
|
7254
|
-
return /* @__PURE__ */
|
|
7350
|
+
return /* @__PURE__ */ React93.createElement(IconPreviewPlaceholder, null);
|
|
7255
7351
|
}
|
|
7256
|
-
return /* @__PURE__ */
|
|
7352
|
+
return /* @__PURE__ */ React93.createElement(SvgPreview, { src });
|
|
7257
7353
|
};
|
|
7258
7354
|
var createLazyIcon = (library, value) => ({
|
|
7259
7355
|
id: `${library}:${value}`,
|
|
@@ -7279,16 +7375,16 @@ var toSvgMarkupIcon = (svgMarkup, library, value) => ({
|
|
|
7279
7375
|
paths: [],
|
|
7280
7376
|
svgMarkup
|
|
7281
7377
|
});
|
|
7282
|
-
var IconPreview = ({ icon }) => /* @__PURE__ */
|
|
7378
|
+
var IconPreview = ({ icon }) => /* @__PURE__ */ React93.createElement(Box23, { sx: { color: ICON_PREVIEW_COLOR, minWidth: ICON_PREVIEW_SIZE, minHeight: ICON_PREVIEW_SIZE } }, /* @__PURE__ */ React93.createElement(
|
|
7283
7379
|
FontAwesomeGlyph,
|
|
7284
7380
|
{
|
|
7285
7381
|
icon,
|
|
7286
7382
|
size: ICON_PREVIEW_SIZE,
|
|
7287
7383
|
color: ICON_PREVIEW_COLOR,
|
|
7288
|
-
label:
|
|
7384
|
+
label: __41("Preview icon", "elementor")
|
|
7289
7385
|
}
|
|
7290
7386
|
));
|
|
7291
|
-
var IconPreviewPlaceholder = () => /* @__PURE__ */
|
|
7387
|
+
var IconPreviewPlaceholder = () => /* @__PURE__ */ React93.createElement(
|
|
7292
7388
|
Box23,
|
|
7293
7389
|
{
|
|
7294
7390
|
"aria-hidden": true,
|
|
@@ -7299,12 +7395,12 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React92.createElement(
|
|
|
7299
7395
|
}
|
|
7300
7396
|
}
|
|
7301
7397
|
);
|
|
7302
|
-
var SvgPreview = ({ src }) => /* @__PURE__ */
|
|
7398
|
+
var SvgPreview = ({ src }) => /* @__PURE__ */ React93.createElement(
|
|
7303
7399
|
CardMedia2,
|
|
7304
7400
|
{
|
|
7305
7401
|
component: "img",
|
|
7306
7402
|
image: src,
|
|
7307
|
-
alt:
|
|
7403
|
+
alt: __41("Preview SVG", "elementor"),
|
|
7308
7404
|
sx: { maxHeight: "140px", width: `${ICON_PREVIEW_SIZE}px`, color: ICON_PREVIEW_COLOR }
|
|
7309
7405
|
}
|
|
7310
7406
|
);
|
|
@@ -7338,7 +7434,7 @@ var StyledCardMediaContainer = styled12(Stack18)`
|
|
|
7338
7434
|
var MODE_BROWSE = { mode: "browse" };
|
|
7339
7435
|
var MODE_UPLOAD = { mode: "upload" };
|
|
7340
7436
|
var SvgMediaControl = createControl(({ label }) => {
|
|
7341
|
-
const groupLabel = label ??
|
|
7437
|
+
const groupLabel = label ?? __42("SVG", "elementor");
|
|
7342
7438
|
const { value: svgValue, setValue: setSvgValue, placeholder: svgPlaceholder } = useBoundProp(svgSrcPropTypeUtil);
|
|
7343
7439
|
const { value: iconValue, setValue: setIconValue, placeholder: iconPlaceholder } = useBoundProp(iconPropTypeUtil);
|
|
7344
7440
|
const id = svgValue?.id;
|
|
@@ -7350,8 +7446,8 @@ var SvgMediaControl = createControl(({ label }) => {
|
|
|
7350
7446
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
7351
7447
|
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState24(false);
|
|
7352
7448
|
const iconLibraryPopoverState = usePopupState9({ variant: "popover" });
|
|
7353
|
-
const controlContainerRef =
|
|
7354
|
-
const buttonGroupRef =
|
|
7449
|
+
const controlContainerRef = useRef22(null);
|
|
7450
|
+
const buttonGroupRef = useRef22(null);
|
|
7355
7451
|
const [iconLibraryAnchor, setIconLibraryAnchor] = useState24(null);
|
|
7356
7452
|
const { isAdmin } = useCurrentUserCapabilities();
|
|
7357
7453
|
const selectedIconClass = typeof previewIconValue?.value?.value === "string" ? previewIconValue.value.value : null;
|
|
@@ -7420,7 +7516,7 @@ var SvgMediaControl = createControl(({ label }) => {
|
|
|
7420
7516
|
};
|
|
7421
7517
|
}, [iconLibraryPopoverState.isOpen]);
|
|
7422
7518
|
const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
|
|
7423
|
-
return /* @__PURE__ */
|
|
7519
|
+
return /* @__PURE__ */ React94.createElement(Stack18, { gap: 1, "aria-label": __42("SVG control", "elementor") }, /* @__PURE__ */ React94.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), iconLibraryAnchor ? /* @__PURE__ */ React94.createElement(
|
|
7424
7520
|
Popover6,
|
|
7425
7521
|
{
|
|
7426
7522
|
disableScrollLock: true,
|
|
@@ -7440,7 +7536,7 @@ var SvgMediaControl = createControl(({ label }) => {
|
|
|
7440
7536
|
}
|
|
7441
7537
|
}
|
|
7442
7538
|
},
|
|
7443
|
-
/* @__PURE__ */
|
|
7539
|
+
/* @__PURE__ */ React94.createElement(
|
|
7444
7540
|
IconLibraryPopover,
|
|
7445
7541
|
{
|
|
7446
7542
|
open: iconLibraryPopoverState.isOpen,
|
|
@@ -7451,14 +7547,14 @@ var SvgMediaControl = createControl(({ label }) => {
|
|
|
7451
7547
|
width: iconLibraryWidth
|
|
7452
7548
|
}
|
|
7453
7549
|
)
|
|
7454
|
-
) : null, /* @__PURE__ */
|
|
7550
|
+
) : null, /* @__PURE__ */ React94.createElement(
|
|
7455
7551
|
Box24,
|
|
7456
7552
|
{
|
|
7457
7553
|
ref: controlContainerRef,
|
|
7458
7554
|
"data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
|
|
7459
7555
|
sx: { width: "100%" }
|
|
7460
7556
|
},
|
|
7461
|
-
/* @__PURE__ */
|
|
7557
|
+
/* @__PURE__ */ React94.createElement(ControlActions, null, /* @__PURE__ */ React94.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React94.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React94.createElement(
|
|
7462
7558
|
SvgMediaPreview,
|
|
7463
7559
|
{
|
|
7464
7560
|
isFetching,
|
|
@@ -7466,7 +7562,7 @@ var SvgMediaControl = createControl(({ label }) => {
|
|
|
7466
7562
|
iconClassName: selectedIconClass,
|
|
7467
7563
|
iconLibrary: selectedIconLibrary
|
|
7468
7564
|
}
|
|
7469
|
-
)), /* @__PURE__ */
|
|
7565
|
+
)), /* @__PURE__ */ React94.createElement(
|
|
7470
7566
|
CardOverlay2,
|
|
7471
7567
|
{
|
|
7472
7568
|
sx: {
|
|
@@ -7475,7 +7571,7 @@ var SvgMediaControl = createControl(({ label }) => {
|
|
|
7475
7571
|
}
|
|
7476
7572
|
}
|
|
7477
7573
|
},
|
|
7478
|
-
/* @__PURE__ */
|
|
7574
|
+
/* @__PURE__ */ React94.createElement(
|
|
7479
7575
|
SvgMediaOverlay,
|
|
7480
7576
|
{
|
|
7481
7577
|
label: groupLabel,
|
|
@@ -7484,23 +7580,23 @@ var SvgMediaControl = createControl(({ label }) => {
|
|
|
7484
7580
|
onSelectSvg: handleSelectSvg,
|
|
7485
7581
|
onUpload: handleUpload,
|
|
7486
7582
|
onOpenIconLibrary: handleOpenIconLibrary,
|
|
7487
|
-
infotipTitle:
|
|
7488
|
-
infotipDescription: /* @__PURE__ */
|
|
7583
|
+
infotipTitle: __42("Sorry, you can't upload that file yet.", "elementor"),
|
|
7584
|
+
infotipDescription: /* @__PURE__ */ React94.createElement(UnfilteredUploadInfotipDescription, null)
|
|
7489
7585
|
}
|
|
7490
7586
|
)
|
|
7491
7587
|
)))
|
|
7492
7588
|
));
|
|
7493
7589
|
});
|
|
7494
|
-
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */
|
|
7590
|
+
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React94.createElement(React94.Fragment, null, __42("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React94.createElement("br", null), __42("file uploads.", "elementor"));
|
|
7495
7591
|
|
|
7496
7592
|
// src/controls/video-media-control.tsx
|
|
7497
|
-
import * as
|
|
7593
|
+
import * as React95 from "react";
|
|
7498
7594
|
import { urlPropTypeUtil as urlPropTypeUtil5, videoSrcPropTypeUtil } from "@elementor/editor-props";
|
|
7499
7595
|
import { Card as Card3, CardMedia as CardMedia3, CardOverlay as CardOverlay3, CircularProgress as CircularProgress5 } from "@elementor/ui";
|
|
7500
7596
|
import { useWpMediaAttachment as useWpMediaAttachment3, useWpMediaFrame as useWpMediaFrame3 } from "@elementor/wp-media";
|
|
7501
|
-
import { __ as
|
|
7597
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
7502
7598
|
var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
|
|
7503
|
-
var VideoMediaControl = createControl(({ label =
|
|
7599
|
+
var VideoMediaControl = createControl(({ label = __43("Video", "elementor") }) => {
|
|
7504
7600
|
const { value, setValue, propType } = useBoundProp(videoSrcPropTypeUtil);
|
|
7505
7601
|
const { id, url } = value ?? {};
|
|
7506
7602
|
const { data: attachment, isFetching } = useWpMediaAttachment3(id?.value || null);
|
|
@@ -7528,7 +7624,7 @@ var VideoMediaControl = createControl(({ label = __42("Video", "elementor") }) =
|
|
|
7528
7624
|
});
|
|
7529
7625
|
}
|
|
7530
7626
|
});
|
|
7531
|
-
return /* @__PURE__ */
|
|
7627
|
+
return /* @__PURE__ */ React95.createElement(ControlActions, null, /* @__PURE__ */ React95.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React95.createElement(
|
|
7532
7628
|
CardMedia3,
|
|
7533
7629
|
{
|
|
7534
7630
|
sx: {
|
|
@@ -7543,8 +7639,8 @@ var VideoMediaControl = createControl(({ label = __42("Video", "elementor") }) =
|
|
|
7543
7639
|
alignItems: "center"
|
|
7544
7640
|
}
|
|
7545
7641
|
},
|
|
7546
|
-
/* @__PURE__ */
|
|
7547
|
-
), /* @__PURE__ */
|
|
7642
|
+
/* @__PURE__ */ React95.createElement(VideoPreview, { isFetching, videoUrl })
|
|
7643
|
+
), /* @__PURE__ */ React95.createElement(CardOverlay3, null, /* @__PURE__ */ React95.createElement(
|
|
7548
7644
|
MediaSelectActions,
|
|
7549
7645
|
{
|
|
7550
7646
|
label,
|
|
@@ -7556,13 +7652,13 @@ var VideoMediaControl = createControl(({ label = __42("Video", "elementor") }) =
|
|
|
7556
7652
|
});
|
|
7557
7653
|
var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
7558
7654
|
if (isFetching) {
|
|
7559
|
-
return /* @__PURE__ */
|
|
7655
|
+
return /* @__PURE__ */ React95.createElement(CircularProgress5, null);
|
|
7560
7656
|
}
|
|
7561
7657
|
if (videoUrl) {
|
|
7562
|
-
return /* @__PURE__ */
|
|
7658
|
+
return /* @__PURE__ */ React95.createElement(
|
|
7563
7659
|
"video",
|
|
7564
7660
|
{
|
|
7565
|
-
"aria-label":
|
|
7661
|
+
"aria-label": __43("Video preview", "elementor"),
|
|
7566
7662
|
src: videoUrl,
|
|
7567
7663
|
muted: true,
|
|
7568
7664
|
preload: "metadata",
|
|
@@ -7575,17 +7671,17 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
|
7575
7671
|
}
|
|
7576
7672
|
);
|
|
7577
7673
|
}
|
|
7578
|
-
return /* @__PURE__ */
|
|
7674
|
+
return /* @__PURE__ */ React95.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
|
|
7579
7675
|
};
|
|
7580
7676
|
|
|
7581
7677
|
// src/controls/background-control/background-control.tsx
|
|
7582
|
-
import * as
|
|
7678
|
+
import * as React102 from "react";
|
|
7583
7679
|
import { backgroundPropTypeUtil } from "@elementor/editor-props";
|
|
7584
7680
|
import { Grid as Grid18 } from "@elementor/ui";
|
|
7585
|
-
import { __ as
|
|
7681
|
+
import { __ as __49 } from "@wordpress/i18n";
|
|
7586
7682
|
|
|
7587
7683
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
7588
|
-
import * as
|
|
7684
|
+
import * as React101 from "react";
|
|
7589
7685
|
import {
|
|
7590
7686
|
backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
|
|
7591
7687
|
backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
|
|
@@ -7594,21 +7690,21 @@ import {
|
|
|
7594
7690
|
} from "@elementor/editor-props";
|
|
7595
7691
|
import { Box as Box25, CardMedia as CardMedia4, styled as styled13, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
|
|
7596
7692
|
import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
|
|
7597
|
-
import { __ as
|
|
7693
|
+
import { __ as __48 } from "@wordpress/i18n";
|
|
7598
7694
|
|
|
7599
7695
|
// src/env.ts
|
|
7600
7696
|
import { parseEnv } from "@elementor/env";
|
|
7601
7697
|
var { env } = parseEnv("@elementor/editor-controls");
|
|
7602
7698
|
|
|
7603
7699
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
7604
|
-
import * as
|
|
7700
|
+
import * as React96 from "react";
|
|
7605
7701
|
import {
|
|
7606
7702
|
backgroundGradientOverlayPropTypeUtil,
|
|
7607
7703
|
colorPropTypeUtil as colorPropTypeUtil2,
|
|
7608
7704
|
colorStopPropTypeUtil,
|
|
7609
7705
|
gradientColorStopPropTypeUtil,
|
|
7610
|
-
numberPropTypeUtil as
|
|
7611
|
-
stringPropTypeUtil as
|
|
7706
|
+
numberPropTypeUtil as numberPropTypeUtil6,
|
|
7707
|
+
stringPropTypeUtil as stringPropTypeUtil16
|
|
7612
7708
|
} from "@elementor/editor-props";
|
|
7613
7709
|
import { UnstableGradientBox } from "@elementor/ui";
|
|
7614
7710
|
var BackgroundGradientColorControl = createControl(() => {
|
|
@@ -7616,19 +7712,19 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
7616
7712
|
const handleChange = (newValue) => {
|
|
7617
7713
|
const transformedValue = createTransformableValue(newValue);
|
|
7618
7714
|
if (transformedValue.positions) {
|
|
7619
|
-
transformedValue.positions =
|
|
7715
|
+
transformedValue.positions = stringPropTypeUtil16.create(newValue.positions.join(" "));
|
|
7620
7716
|
}
|
|
7621
7717
|
setValue(transformedValue);
|
|
7622
7718
|
};
|
|
7623
7719
|
const createTransformableValue = (newValue) => ({
|
|
7624
7720
|
...newValue,
|
|
7625
|
-
type:
|
|
7626
|
-
angle:
|
|
7721
|
+
type: stringPropTypeUtil16.create(newValue.type),
|
|
7722
|
+
angle: numberPropTypeUtil6.create(newValue.angle),
|
|
7627
7723
|
stops: gradientColorStopPropTypeUtil.create(
|
|
7628
7724
|
newValue.stops.map(
|
|
7629
7725
|
({ color, offset }) => colorStopPropTypeUtil.create({
|
|
7630
7726
|
color: colorPropTypeUtil2.create(color),
|
|
7631
|
-
offset:
|
|
7727
|
+
offset: numberPropTypeUtil6.create(offset)
|
|
7632
7728
|
})
|
|
7633
7729
|
)
|
|
7634
7730
|
)
|
|
@@ -7648,7 +7744,7 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
7648
7744
|
positions: positions?.value.split(" ")
|
|
7649
7745
|
};
|
|
7650
7746
|
};
|
|
7651
|
-
return /* @__PURE__ */
|
|
7747
|
+
return /* @__PURE__ */ React96.createElement(
|
|
7652
7748
|
UnstableGradientBox,
|
|
7653
7749
|
{
|
|
7654
7750
|
sx: { width: "auto", padding: 1.5 },
|
|
@@ -7658,68 +7754,68 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
7658
7754
|
);
|
|
7659
7755
|
});
|
|
7660
7756
|
var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
|
|
7661
|
-
type:
|
|
7662
|
-
angle:
|
|
7757
|
+
type: stringPropTypeUtil16.create("linear"),
|
|
7758
|
+
angle: numberPropTypeUtil6.create(180),
|
|
7663
7759
|
stops: gradientColorStopPropTypeUtil.create([
|
|
7664
7760
|
colorStopPropTypeUtil.create({
|
|
7665
7761
|
color: colorPropTypeUtil2.create("rgb(0,0,0)"),
|
|
7666
|
-
offset:
|
|
7762
|
+
offset: numberPropTypeUtil6.create(0)
|
|
7667
7763
|
}),
|
|
7668
7764
|
colorStopPropTypeUtil.create({
|
|
7669
7765
|
color: colorPropTypeUtil2.create("rgb(255,255,255)"),
|
|
7670
|
-
offset:
|
|
7766
|
+
offset: numberPropTypeUtil6.create(100)
|
|
7671
7767
|
})
|
|
7672
7768
|
])
|
|
7673
7769
|
});
|
|
7674
7770
|
|
|
7675
7771
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
7676
|
-
import * as
|
|
7772
|
+
import * as React97 from "react";
|
|
7677
7773
|
import { PinIcon, PinnedOffIcon } from "@elementor/icons";
|
|
7678
7774
|
import { Grid as Grid14 } from "@elementor/ui";
|
|
7679
|
-
import { __ as
|
|
7775
|
+
import { __ as __44 } from "@wordpress/i18n";
|
|
7680
7776
|
var attachmentControlOptions = [
|
|
7681
7777
|
{
|
|
7682
7778
|
value: "fixed",
|
|
7683
|
-
label:
|
|
7684
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7779
|
+
label: __44("Fixed", "elementor"),
|
|
7780
|
+
renderContent: ({ size }) => /* @__PURE__ */ React97.createElement(PinIcon, { fontSize: size }),
|
|
7685
7781
|
showTooltip: true
|
|
7686
7782
|
},
|
|
7687
7783
|
{
|
|
7688
7784
|
value: "scroll",
|
|
7689
|
-
label:
|
|
7690
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7785
|
+
label: __44("Scroll", "elementor"),
|
|
7786
|
+
renderContent: ({ size }) => /* @__PURE__ */ React97.createElement(PinnedOffIcon, { fontSize: size }),
|
|
7691
7787
|
showTooltip: true
|
|
7692
7788
|
}
|
|
7693
7789
|
];
|
|
7694
7790
|
var BackgroundImageOverlayAttachment = () => {
|
|
7695
|
-
return /* @__PURE__ */
|
|
7791
|
+
return /* @__PURE__ */ React97.createElement(PopoverGridContainer, null, /* @__PURE__ */ React97.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlFormLabel, null, __44("Attachment", "elementor"))), /* @__PURE__ */ React97.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React97.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
7696
7792
|
};
|
|
7697
7793
|
|
|
7698
7794
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
7699
|
-
import * as
|
|
7700
|
-
import { useRef as
|
|
7701
|
-
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as
|
|
7795
|
+
import * as React98 from "react";
|
|
7796
|
+
import { useRef as useRef23 } from "react";
|
|
7797
|
+
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
|
|
7702
7798
|
import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
|
|
7703
7799
|
import { LetterXIcon, LetterYIcon } from "@elementor/icons";
|
|
7704
7800
|
import { Grid as Grid15, Select as Select4 } from "@elementor/ui";
|
|
7705
|
-
import { __ as
|
|
7801
|
+
import { __ as __45 } from "@wordpress/i18n";
|
|
7706
7802
|
var backgroundPositionOptions = [
|
|
7707
|
-
{ label:
|
|
7708
|
-
{ label:
|
|
7709
|
-
{ label:
|
|
7710
|
-
{ label:
|
|
7711
|
-
{ label:
|
|
7712
|
-
{ label:
|
|
7713
|
-
{ label:
|
|
7714
|
-
{ label:
|
|
7715
|
-
{ label:
|
|
7716
|
-
{ label:
|
|
7803
|
+
{ label: __45("Center center", "elementor"), value: "center center" },
|
|
7804
|
+
{ label: __45("Center left", "elementor"), value: "center left" },
|
|
7805
|
+
{ label: __45("Center right", "elementor"), value: "center right" },
|
|
7806
|
+
{ label: __45("Top center", "elementor"), value: "top center" },
|
|
7807
|
+
{ label: __45("Top left", "elementor"), value: "top left" },
|
|
7808
|
+
{ label: __45("Top right", "elementor"), value: "top right" },
|
|
7809
|
+
{ label: __45("Bottom center", "elementor"), value: "bottom center" },
|
|
7810
|
+
{ label: __45("Bottom left", "elementor"), value: "bottom left" },
|
|
7811
|
+
{ label: __45("Bottom right", "elementor"), value: "bottom right" },
|
|
7812
|
+
{ label: __45("Custom", "elementor"), value: "custom" }
|
|
7717
7813
|
];
|
|
7718
7814
|
var BackgroundImageOverlayPosition = () => {
|
|
7719
7815
|
const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
|
|
7720
|
-
const stringPropContext = useBoundProp(
|
|
7816
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil17);
|
|
7721
7817
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
7722
|
-
const rowRef =
|
|
7818
|
+
const rowRef = useRef23(null);
|
|
7723
7819
|
const handlePositionChange = (event) => {
|
|
7724
7820
|
const value = event.target.value || null;
|
|
7725
7821
|
if (value === "custom") {
|
|
@@ -7728,7 +7824,7 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7728
7824
|
stringPropContext.setValue(value);
|
|
7729
7825
|
}
|
|
7730
7826
|
};
|
|
7731
|
-
return /* @__PURE__ */
|
|
7827
|
+
return /* @__PURE__ */ React98.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React98.createElement(PopoverGridContainer, null, /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(ControlFormLabel, null, __45("Position", "elementor"))), /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React98.createElement(ControlActions, null, /* @__PURE__ */ React98.createElement(
|
|
7732
7828
|
Select4,
|
|
7733
7829
|
{
|
|
7734
7830
|
fullWidth: true,
|
|
@@ -7737,18 +7833,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7737
7833
|
disabled: stringPropContext.disabled,
|
|
7738
7834
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
7739
7835
|
},
|
|
7740
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
7741
|
-
))))), isCustom ? /* @__PURE__ */
|
|
7836
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React98.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
|
|
7837
|
+
))))), isCustom ? /* @__PURE__ */ React98.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React98.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React98.createElement(
|
|
7742
7838
|
SizeControl,
|
|
7743
7839
|
{
|
|
7744
|
-
startIcon: /* @__PURE__ */
|
|
7840
|
+
startIcon: /* @__PURE__ */ React98.createElement(LetterXIcon, { fontSize: "tiny" }),
|
|
7745
7841
|
anchorRef: rowRef,
|
|
7746
7842
|
min: -Number.MAX_SAFE_INTEGER
|
|
7747
7843
|
}
|
|
7748
|
-
))), /* @__PURE__ */
|
|
7844
|
+
))), /* @__PURE__ */ React98.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React98.createElement(
|
|
7749
7845
|
SizeControl,
|
|
7750
7846
|
{
|
|
7751
|
-
startIcon: /* @__PURE__ */
|
|
7847
|
+
startIcon: /* @__PURE__ */ React98.createElement(LetterYIcon, { fontSize: "tiny" }),
|
|
7752
7848
|
anchorRef: rowRef,
|
|
7753
7849
|
min: -Number.MAX_SAFE_INTEGER
|
|
7754
7850
|
}
|
|
@@ -7756,44 +7852,44 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7756
7852
|
};
|
|
7757
7853
|
|
|
7758
7854
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
7759
|
-
import * as
|
|
7855
|
+
import * as React99 from "react";
|
|
7760
7856
|
import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
|
|
7761
7857
|
import { Grid as Grid16 } from "@elementor/ui";
|
|
7762
|
-
import { __ as
|
|
7858
|
+
import { __ as __46 } from "@wordpress/i18n";
|
|
7763
7859
|
var repeatControlOptions = [
|
|
7764
7860
|
{
|
|
7765
7861
|
value: "repeat",
|
|
7766
|
-
label:
|
|
7767
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7862
|
+
label: __46("Repeat", "elementor"),
|
|
7863
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(GridDotsIcon, { fontSize: size }),
|
|
7768
7864
|
showTooltip: true
|
|
7769
7865
|
},
|
|
7770
7866
|
{
|
|
7771
7867
|
value: "repeat-x",
|
|
7772
|
-
label:
|
|
7773
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7868
|
+
label: __46("Repeat-x", "elementor"),
|
|
7869
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(DotsHorizontalIcon, { fontSize: size }),
|
|
7774
7870
|
showTooltip: true
|
|
7775
7871
|
},
|
|
7776
7872
|
{
|
|
7777
7873
|
value: "repeat-y",
|
|
7778
|
-
label:
|
|
7779
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7874
|
+
label: __46("Repeat-y", "elementor"),
|
|
7875
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(DotsVerticalIcon, { fontSize: size }),
|
|
7780
7876
|
showTooltip: true
|
|
7781
7877
|
},
|
|
7782
7878
|
{
|
|
7783
7879
|
value: "no-repeat",
|
|
7784
|
-
label:
|
|
7785
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7880
|
+
label: __46("No-repeat", "elementor"),
|
|
7881
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(XIcon3, { fontSize: size }),
|
|
7786
7882
|
showTooltip: true
|
|
7787
7883
|
}
|
|
7788
7884
|
];
|
|
7789
7885
|
var BackgroundImageOverlayRepeat = () => {
|
|
7790
|
-
return /* @__PURE__ */
|
|
7886
|
+
return /* @__PURE__ */ React99.createElement(PopoverGridContainer, null, /* @__PURE__ */ React99.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, __46("Repeat", "elementor"))), /* @__PURE__ */ React99.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React99.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
7791
7887
|
};
|
|
7792
7888
|
|
|
7793
7889
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
7794
|
-
import * as
|
|
7795
|
-
import { useRef as
|
|
7796
|
-
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as
|
|
7890
|
+
import * as React100 from "react";
|
|
7891
|
+
import { useRef as useRef24 } from "react";
|
|
7892
|
+
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil18 } from "@elementor/editor-props";
|
|
7797
7893
|
import {
|
|
7798
7894
|
ArrowBarBothIcon,
|
|
7799
7895
|
ArrowsMaximizeIcon,
|
|
@@ -7803,38 +7899,38 @@ import {
|
|
|
7803
7899
|
PencilIcon
|
|
7804
7900
|
} from "@elementor/icons";
|
|
7805
7901
|
import { Grid as Grid17 } from "@elementor/ui";
|
|
7806
|
-
import { __ as
|
|
7902
|
+
import { __ as __47 } from "@wordpress/i18n";
|
|
7807
7903
|
var sizeControlOptions = [
|
|
7808
7904
|
{
|
|
7809
7905
|
value: "auto",
|
|
7810
|
-
label:
|
|
7811
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7906
|
+
label: __47("Auto", "elementor"),
|
|
7907
|
+
renderContent: ({ size }) => /* @__PURE__ */ React100.createElement(LetterAIcon, { fontSize: size }),
|
|
7812
7908
|
showTooltip: true
|
|
7813
7909
|
},
|
|
7814
7910
|
{
|
|
7815
7911
|
value: "cover",
|
|
7816
|
-
label:
|
|
7817
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7912
|
+
label: __47("Cover", "elementor"),
|
|
7913
|
+
renderContent: ({ size }) => /* @__PURE__ */ React100.createElement(ArrowsMaximizeIcon, { fontSize: size }),
|
|
7818
7914
|
showTooltip: true
|
|
7819
7915
|
},
|
|
7820
7916
|
{
|
|
7821
7917
|
value: "contain",
|
|
7822
|
-
label:
|
|
7823
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7918
|
+
label: __47("Contain", "elementor"),
|
|
7919
|
+
renderContent: ({ size }) => /* @__PURE__ */ React100.createElement(ArrowBarBothIcon, { fontSize: size }),
|
|
7824
7920
|
showTooltip: true
|
|
7825
7921
|
},
|
|
7826
7922
|
{
|
|
7827
7923
|
value: "custom",
|
|
7828
|
-
label:
|
|
7829
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7924
|
+
label: __47("Custom", "elementor"),
|
|
7925
|
+
renderContent: ({ size }) => /* @__PURE__ */ React100.createElement(PencilIcon, { fontSize: size }),
|
|
7830
7926
|
showTooltip: true
|
|
7831
7927
|
}
|
|
7832
7928
|
];
|
|
7833
7929
|
var BackgroundImageOverlaySize = () => {
|
|
7834
7930
|
const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
|
|
7835
|
-
const stringPropContext = useBoundProp(
|
|
7931
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil18);
|
|
7836
7932
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
7837
|
-
const rowRef =
|
|
7933
|
+
const rowRef = useRef24(null);
|
|
7838
7934
|
const handleSizeChange = (size) => {
|
|
7839
7935
|
if (size === "custom") {
|
|
7840
7936
|
backgroundImageScaleContext.setValue({ width: null, height: null });
|
|
@@ -7842,7 +7938,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7842
7938
|
stringPropContext.setValue(size);
|
|
7843
7939
|
}
|
|
7844
7940
|
};
|
|
7845
|
-
return /* @__PURE__ */
|
|
7941
|
+
return /* @__PURE__ */ React100.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, null, /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlFormLabel, null, __47("Size", "elementor"))), /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React100.createElement(
|
|
7846
7942
|
ControlToggleButtonGroup,
|
|
7847
7943
|
{
|
|
7848
7944
|
exclusive: true,
|
|
@@ -7851,17 +7947,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7851
7947
|
disabled: stringPropContext.disabled,
|
|
7852
7948
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
7853
7949
|
}
|
|
7854
|
-
)))), isCustom ? /* @__PURE__ */
|
|
7950
|
+
)))), isCustom ? /* @__PURE__ */ React100.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, null, /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React100.createElement(
|
|
7855
7951
|
SizeControl,
|
|
7856
7952
|
{
|
|
7857
|
-
startIcon: /* @__PURE__ */
|
|
7953
|
+
startIcon: /* @__PURE__ */ React100.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
|
|
7858
7954
|
extendedOptions: ["auto"],
|
|
7859
7955
|
anchorRef: rowRef
|
|
7860
7956
|
}
|
|
7861
|
-
))), /* @__PURE__ */
|
|
7957
|
+
))), /* @__PURE__ */ React100.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React100.createElement(
|
|
7862
7958
|
SizeControl,
|
|
7863
7959
|
{
|
|
7864
|
-
startIcon: /* @__PURE__ */
|
|
7960
|
+
startIcon: /* @__PURE__ */ React100.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
|
|
7865
7961
|
extendedOptions: ["auto"],
|
|
7866
7962
|
anchorRef: rowRef
|
|
7867
7963
|
}
|
|
@@ -7869,7 +7965,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7869
7965
|
};
|
|
7870
7966
|
|
|
7871
7967
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
7872
|
-
import { useRef as
|
|
7968
|
+
import { useRef as useRef25 } from "react";
|
|
7873
7969
|
import {
|
|
7874
7970
|
backgroundColorOverlayPropTypeUtil,
|
|
7875
7971
|
backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
|
|
@@ -7894,7 +7990,7 @@ var useBackgroundTabsHistory = ({
|
|
|
7894
7990
|
return "image";
|
|
7895
7991
|
};
|
|
7896
7992
|
const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
|
|
7897
|
-
const valuesHistory =
|
|
7993
|
+
const valuesHistory = useRef25({
|
|
7898
7994
|
image: initialBackgroundImageOverlay,
|
|
7899
7995
|
color: initialBackgroundColorOverlay2,
|
|
7900
7996
|
gradient: initialBackgroundGradientOverlay2
|
|
@@ -7962,29 +8058,29 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
7962
8058
|
}
|
|
7963
8059
|
});
|
|
7964
8060
|
var backgroundResolutionOptions = [
|
|
7965
|
-
{ label:
|
|
7966
|
-
{ label:
|
|
7967
|
-
{ label:
|
|
7968
|
-
{ label:
|
|
8061
|
+
{ label: __48("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
8062
|
+
{ label: __48("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
8063
|
+
{ label: __48("Large 1024 x 1024", "elementor"), value: "large" },
|
|
8064
|
+
{ label: __48("Full", "elementor"), value: "full" }
|
|
7969
8065
|
];
|
|
7970
8066
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
7971
8067
|
const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
|
|
7972
|
-
return /* @__PURE__ */
|
|
8068
|
+
return /* @__PURE__ */ React101.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React101.createElement(
|
|
7973
8069
|
ControlRepeater,
|
|
7974
8070
|
{
|
|
7975
8071
|
initial: getInitialBackgroundOverlay(),
|
|
7976
8072
|
propTypeUtil: backgroundOverlayPropTypeUtil
|
|
7977
8073
|
},
|
|
7978
|
-
/* @__PURE__ */
|
|
7979
|
-
/* @__PURE__ */
|
|
8074
|
+
/* @__PURE__ */ React101.createElement(RepeaterHeader, { label: __48("Overlay", "elementor") }, /* @__PURE__ */ React101.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
8075
|
+
/* @__PURE__ */ React101.createElement(ItemsContainer, null, /* @__PURE__ */ React101.createElement(
|
|
7980
8076
|
Item,
|
|
7981
8077
|
{
|
|
7982
8078
|
Icon: ItemIcon2,
|
|
7983
8079
|
Label: ItemLabel3,
|
|
7984
|
-
actions: /* @__PURE__ */
|
|
8080
|
+
actions: /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(DuplicateItemAction, null), /* @__PURE__ */ React101.createElement(DisableItemAction, null), /* @__PURE__ */ React101.createElement(RemoveItemAction, null))
|
|
7985
8081
|
}
|
|
7986
8082
|
)),
|
|
7987
|
-
/* @__PURE__ */
|
|
8083
|
+
/* @__PURE__ */ React101.createElement(EditItemPopover, null, /* @__PURE__ */ React101.createElement(ItemContent2, null))
|
|
7988
8084
|
));
|
|
7989
8085
|
});
|
|
7990
8086
|
var ItemContent2 = () => {
|
|
@@ -7994,27 +8090,27 @@ var ItemContent2 = () => {
|
|
|
7994
8090
|
gradient: initialBackgroundGradientOverlay.value
|
|
7995
8091
|
});
|
|
7996
8092
|
const { rowRef } = useRepeaterContext();
|
|
7997
|
-
return /* @__PURE__ */
|
|
8093
|
+
return /* @__PURE__ */ React101.createElement(Box25, { sx: { width: "100%" } }, /* @__PURE__ */ React101.createElement(Box25, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React101.createElement(
|
|
7998
8094
|
Tabs,
|
|
7999
8095
|
{
|
|
8000
8096
|
size: "small",
|
|
8001
8097
|
variant: "fullWidth",
|
|
8002
8098
|
...getTabsProps(),
|
|
8003
|
-
"aria-label":
|
|
8099
|
+
"aria-label": __48("Background Overlay", "elementor")
|
|
8004
8100
|
},
|
|
8005
|
-
/* @__PURE__ */
|
|
8006
|
-
/* @__PURE__ */
|
|
8007
|
-
/* @__PURE__ */
|
|
8008
|
-
)), /* @__PURE__ */
|
|
8101
|
+
/* @__PURE__ */ React101.createElement(Tab, { label: __48("Image", "elementor"), ...getTabProps("image") }),
|
|
8102
|
+
/* @__PURE__ */ React101.createElement(Tab, { label: __48("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
8103
|
+
/* @__PURE__ */ React101.createElement(Tab, { label: __48("Color", "elementor"), ...getTabProps("color") })
|
|
8104
|
+
)), /* @__PURE__ */ React101.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React101.createElement(PopoverContent, null, /* @__PURE__ */ React101.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React101.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React101.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React101.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React101.createElement(PopoverContent, null, /* @__PURE__ */ React101.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
8009
8105
|
};
|
|
8010
8106
|
var ItemIcon2 = ({ value }) => {
|
|
8011
8107
|
switch (value.$$type) {
|
|
8012
8108
|
case "background-image-overlay":
|
|
8013
|
-
return /* @__PURE__ */
|
|
8109
|
+
return /* @__PURE__ */ React101.createElement(ItemIconImage, { value });
|
|
8014
8110
|
case "background-color-overlay":
|
|
8015
|
-
return /* @__PURE__ */
|
|
8111
|
+
return /* @__PURE__ */ React101.createElement(ItemIconColor, { value });
|
|
8016
8112
|
case "background-gradient-overlay":
|
|
8017
|
-
return /* @__PURE__ */
|
|
8113
|
+
return /* @__PURE__ */ React101.createElement(ItemIconGradient, { value });
|
|
8018
8114
|
default:
|
|
8019
8115
|
return null;
|
|
8020
8116
|
}
|
|
@@ -8027,11 +8123,11 @@ var extractColorFrom = (prop) => {
|
|
|
8027
8123
|
};
|
|
8028
8124
|
var ItemIconColor = ({ value: prop }) => {
|
|
8029
8125
|
const color = extractColorFrom(prop);
|
|
8030
|
-
return /* @__PURE__ */
|
|
8126
|
+
return /* @__PURE__ */ React101.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
8031
8127
|
};
|
|
8032
8128
|
var ItemIconImage = ({ value }) => {
|
|
8033
8129
|
const { imageUrl } = useImage(value);
|
|
8034
|
-
return /* @__PURE__ */
|
|
8130
|
+
return /* @__PURE__ */ React101.createElement(
|
|
8035
8131
|
CardMedia4,
|
|
8036
8132
|
{
|
|
8037
8133
|
image: imageUrl,
|
|
@@ -8046,41 +8142,41 @@ var ItemIconImage = ({ value }) => {
|
|
|
8046
8142
|
};
|
|
8047
8143
|
var ItemIconGradient = ({ value }) => {
|
|
8048
8144
|
const gradient = getGradientValue(value);
|
|
8049
|
-
return /* @__PURE__ */
|
|
8145
|
+
return /* @__PURE__ */ React101.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
8050
8146
|
};
|
|
8051
8147
|
var ItemLabel3 = ({ value }) => {
|
|
8052
8148
|
switch (value.$$type) {
|
|
8053
8149
|
case "background-image-overlay":
|
|
8054
|
-
return /* @__PURE__ */
|
|
8150
|
+
return /* @__PURE__ */ React101.createElement(ItemLabelImage, { value });
|
|
8055
8151
|
case "background-color-overlay":
|
|
8056
|
-
return /* @__PURE__ */
|
|
8152
|
+
return /* @__PURE__ */ React101.createElement(ItemLabelColor, { value });
|
|
8057
8153
|
case "background-gradient-overlay":
|
|
8058
|
-
return /* @__PURE__ */
|
|
8154
|
+
return /* @__PURE__ */ React101.createElement(ItemLabelGradient, { value });
|
|
8059
8155
|
default:
|
|
8060
8156
|
return null;
|
|
8061
8157
|
}
|
|
8062
8158
|
};
|
|
8063
8159
|
var ItemLabelColor = ({ value: prop }) => {
|
|
8064
8160
|
const color = extractColorFrom(prop);
|
|
8065
|
-
return /* @__PURE__ */
|
|
8161
|
+
return /* @__PURE__ */ React101.createElement("span", null, color);
|
|
8066
8162
|
};
|
|
8067
8163
|
var ItemLabelImage = ({ value }) => {
|
|
8068
8164
|
const { imageTitle } = useImage(value);
|
|
8069
|
-
return /* @__PURE__ */
|
|
8165
|
+
return /* @__PURE__ */ React101.createElement("span", null, imageTitle);
|
|
8070
8166
|
};
|
|
8071
8167
|
var ItemLabelGradient = ({ value }) => {
|
|
8072
8168
|
if (value.value.type.value === "linear") {
|
|
8073
|
-
return /* @__PURE__ */
|
|
8169
|
+
return /* @__PURE__ */ React101.createElement("span", null, __48("Linear Gradient", "elementor"));
|
|
8074
8170
|
}
|
|
8075
|
-
return /* @__PURE__ */
|
|
8171
|
+
return /* @__PURE__ */ React101.createElement("span", null, __48("Radial Gradient", "elementor"));
|
|
8076
8172
|
};
|
|
8077
8173
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
8078
8174
|
const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
|
|
8079
|
-
return /* @__PURE__ */
|
|
8175
|
+
return /* @__PURE__ */ React101.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React101.createElement(ColorControl, { anchorEl })));
|
|
8080
8176
|
};
|
|
8081
8177
|
var ImageOverlayContent = () => {
|
|
8082
8178
|
const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
|
|
8083
|
-
return /* @__PURE__ */
|
|
8179
|
+
return /* @__PURE__ */ React101.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React101.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React101.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React101.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React101.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React101.createElement(BackgroundImageOverlayAttachment, null)));
|
|
8084
8180
|
};
|
|
8085
8181
|
var StyledUnstableColorIndicator3 = styled13(UnstableColorIndicator3)(({ theme }) => ({
|
|
8086
8182
|
height: "1rem",
|
|
@@ -8125,27 +8221,27 @@ var getGradientValue = (value) => {
|
|
|
8125
8221
|
|
|
8126
8222
|
// src/controls/background-control/background-control.tsx
|
|
8127
8223
|
var clipOptions = [
|
|
8128
|
-
{ label:
|
|
8129
|
-
{ label:
|
|
8130
|
-
{ label:
|
|
8131
|
-
{ label:
|
|
8224
|
+
{ label: __49("Full element", "elementor"), value: "border-box" },
|
|
8225
|
+
{ label: __49("Padding edges", "elementor"), value: "padding-box" },
|
|
8226
|
+
{ label: __49("Content edges", "elementor"), value: "content-box" },
|
|
8227
|
+
{ label: __49("Text", "elementor"), value: "text" }
|
|
8132
8228
|
];
|
|
8133
|
-
var colorLabel =
|
|
8134
|
-
var clipLabel =
|
|
8229
|
+
var colorLabel = __49("Color", "elementor");
|
|
8230
|
+
var clipLabel = __49("Clipping", "elementor");
|
|
8135
8231
|
var BackgroundControl = createControl(() => {
|
|
8136
8232
|
const propContext = useBoundProp(backgroundPropTypeUtil);
|
|
8137
|
-
return /* @__PURE__ */
|
|
8233
|
+
return /* @__PURE__ */ React102.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React102.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React102.createElement(BackgroundColorField, null), /* @__PURE__ */ React102.createElement(BackgroundClipField, null));
|
|
8138
8234
|
});
|
|
8139
8235
|
var BackgroundColorField = () => {
|
|
8140
|
-
return /* @__PURE__ */
|
|
8236
|
+
return /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React102.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React102.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React102.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(ColorControl, null))));
|
|
8141
8237
|
};
|
|
8142
8238
|
var BackgroundClipField = () => {
|
|
8143
|
-
return /* @__PURE__ */
|
|
8239
|
+
return /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React102.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React102.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React102.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(SelectControl, { options: clipOptions }))));
|
|
8144
8240
|
};
|
|
8145
8241
|
|
|
8146
8242
|
// src/controls/repeatable-control.tsx
|
|
8147
|
-
import * as
|
|
8148
|
-
import { useMemo as
|
|
8243
|
+
import * as React103 from "react";
|
|
8244
|
+
import { useMemo as useMemo15 } from "react";
|
|
8149
8245
|
import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
|
|
8150
8246
|
import { Box as Box26 } from "@elementor/ui";
|
|
8151
8247
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
@@ -8166,11 +8262,11 @@ var RepeatableControl = createControl(
|
|
|
8166
8262
|
if (!childPropTypeUtil) {
|
|
8167
8263
|
return null;
|
|
8168
8264
|
}
|
|
8169
|
-
const childArrayPropTypeUtil2 =
|
|
8265
|
+
const childArrayPropTypeUtil2 = useMemo15(
|
|
8170
8266
|
() => createArrayPropUtils2(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
8171
8267
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
8172
8268
|
);
|
|
8173
|
-
const contextValue =
|
|
8269
|
+
const contextValue = useMemo15(
|
|
8174
8270
|
() => ({
|
|
8175
8271
|
...childControlConfig,
|
|
8176
8272
|
placeholder: placeholder || "",
|
|
@@ -8180,14 +8276,14 @@ var RepeatableControl = createControl(
|
|
|
8180
8276
|
);
|
|
8181
8277
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
|
|
8182
8278
|
const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
|
|
8183
|
-
return /* @__PURE__ */
|
|
8279
|
+
return /* @__PURE__ */ React103.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React103.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React103.createElement(
|
|
8184
8280
|
ControlRepeater,
|
|
8185
8281
|
{
|
|
8186
8282
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
8187
8283
|
propTypeUtil: childArrayPropTypeUtil2,
|
|
8188
8284
|
isItemDisabled: isItemDisabled2
|
|
8189
8285
|
},
|
|
8190
|
-
/* @__PURE__ */
|
|
8286
|
+
/* @__PURE__ */ React103.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React103.createElement(
|
|
8191
8287
|
TooltipAddItemAction,
|
|
8192
8288
|
{
|
|
8193
8289
|
...addItemTooltipProps,
|
|
@@ -8195,22 +8291,22 @@ var RepeatableControl = createControl(
|
|
|
8195
8291
|
ariaLabel: repeaterLabel
|
|
8196
8292
|
}
|
|
8197
8293
|
)),
|
|
8198
|
-
/* @__PURE__ */
|
|
8294
|
+
/* @__PURE__ */ React103.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React103.createElement(
|
|
8199
8295
|
Item,
|
|
8200
8296
|
{
|
|
8201
8297
|
Icon: ItemIcon3,
|
|
8202
8298
|
Label: ItemLabel4,
|
|
8203
|
-
actions: /* @__PURE__ */
|
|
8299
|
+
actions: /* @__PURE__ */ React103.createElement(React103.Fragment, null, showDuplicate && /* @__PURE__ */ React103.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React103.createElement(DisableItemAction, null), /* @__PURE__ */ React103.createElement(RemoveItemAction, null))
|
|
8204
8300
|
}
|
|
8205
8301
|
)),
|
|
8206
|
-
/* @__PURE__ */
|
|
8302
|
+
/* @__PURE__ */ React103.createElement(EditItemPopover, null, /* @__PURE__ */ React103.createElement(Content2, null))
|
|
8207
8303
|
)));
|
|
8208
8304
|
}
|
|
8209
8305
|
);
|
|
8210
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
8306
|
+
var ItemIcon3 = () => /* @__PURE__ */ React103.createElement(React103.Fragment, null);
|
|
8211
8307
|
var Content2 = () => {
|
|
8212
8308
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
8213
|
-
return /* @__PURE__ */
|
|
8309
|
+
return /* @__PURE__ */ React103.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, null, /* @__PURE__ */ React103.createElement(ChildControl, { ...props })));
|
|
8214
8310
|
};
|
|
8215
8311
|
var interpolate = (template, data) => {
|
|
8216
8312
|
if (!data) {
|
|
@@ -8293,7 +8389,7 @@ var ItemLabel4 = ({ value }) => {
|
|
|
8293
8389
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
8294
8390
|
const isReadOnly = !!childProps?.readOnly;
|
|
8295
8391
|
const color = getTextColor(isReadOnly, showPlaceholder);
|
|
8296
|
-
return /* @__PURE__ */
|
|
8392
|
+
return /* @__PURE__ */ React103.createElement(Box26, { component: "span", color }, label);
|
|
8297
8393
|
};
|
|
8298
8394
|
var getAllProperties = (pattern) => {
|
|
8299
8395
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -8301,15 +8397,15 @@ var getAllProperties = (pattern) => {
|
|
|
8301
8397
|
};
|
|
8302
8398
|
|
|
8303
8399
|
// src/controls/key-value-control.tsx
|
|
8304
|
-
import * as
|
|
8305
|
-
import { useMemo as
|
|
8400
|
+
import * as React104 from "react";
|
|
8401
|
+
import { useMemo as useMemo16, useState as useState25 } from "react";
|
|
8306
8402
|
import {
|
|
8307
8403
|
isTransformable,
|
|
8308
8404
|
keyValuePropTypeUtil,
|
|
8309
|
-
stringPropTypeUtil as
|
|
8405
|
+
stringPropTypeUtil as stringPropTypeUtil19
|
|
8310
8406
|
} from "@elementor/editor-props";
|
|
8311
8407
|
import { FormHelperText, FormLabel as FormLabel3, Grid as Grid19 } from "@elementor/ui";
|
|
8312
|
-
import { __ as
|
|
8408
|
+
import { __ as __50 } from "@wordpress/i18n";
|
|
8313
8409
|
|
|
8314
8410
|
// src/utils/escape-html-attr.ts
|
|
8315
8411
|
var escapeHtmlAttr = (value) => {
|
|
@@ -8339,17 +8435,17 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8339
8435
|
key: getInitialFieldValue(value?.key),
|
|
8340
8436
|
value: getInitialFieldValue(value?.value)
|
|
8341
8437
|
});
|
|
8342
|
-
const keyLabel = props.keyName ||
|
|
8343
|
-
const valueLabel = props.valueName ||
|
|
8438
|
+
const keyLabel = props.keyName || __50("Key", "elementor");
|
|
8439
|
+
const valueLabel = props.valueName || __50("Value", "elementor");
|
|
8344
8440
|
const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
|
|
8345
8441
|
keyHelper: void 0,
|
|
8346
8442
|
valueHelper: void 0
|
|
8347
8443
|
};
|
|
8348
|
-
const [keyRegex, valueRegex, errMsg] =
|
|
8444
|
+
const [keyRegex, valueRegex, errMsg] = useMemo16(
|
|
8349
8445
|
() => [
|
|
8350
8446
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
8351
8447
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
8352
|
-
props.validationErrorMessage ||
|
|
8448
|
+
props.validationErrorMessage || __50("Invalid Format", "elementor")
|
|
8353
8449
|
],
|
|
8354
8450
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
8355
8451
|
);
|
|
@@ -8378,7 +8474,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8378
8474
|
});
|
|
8379
8475
|
return;
|
|
8380
8476
|
}
|
|
8381
|
-
const extractedValue =
|
|
8477
|
+
const extractedValue = stringPropTypeUtil19.extract(newChangedValue);
|
|
8382
8478
|
setSessionState((prev) => ({
|
|
8383
8479
|
...prev,
|
|
8384
8480
|
[fieldType]: extractedValue
|
|
@@ -8398,14 +8494,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8398
8494
|
});
|
|
8399
8495
|
}
|
|
8400
8496
|
};
|
|
8401
|
-
return /* @__PURE__ */
|
|
8497
|
+
return /* @__PURE__ */ React104.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React104.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React104.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React104.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React104.createElement(
|
|
8402
8498
|
TextControl,
|
|
8403
8499
|
{
|
|
8404
8500
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
8405
8501
|
error: !!keyError,
|
|
8406
8502
|
helperText: keyHelper
|
|
8407
8503
|
}
|
|
8408
|
-
)), !!keyError && /* @__PURE__ */
|
|
8504
|
+
)), !!keyError && /* @__PURE__ */ React104.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React104.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React104.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React104.createElement(
|
|
8409
8505
|
TextControl,
|
|
8410
8506
|
{
|
|
8411
8507
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -8413,31 +8509,31 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8413
8509
|
inputDisabled: !!keyError,
|
|
8414
8510
|
helperText: valueHelper
|
|
8415
8511
|
}
|
|
8416
|
-
)), !!valueError && /* @__PURE__ */
|
|
8512
|
+
)), !!valueError && /* @__PURE__ */ React104.createElement(FormHelperText, { error: true }, valueError))));
|
|
8417
8513
|
});
|
|
8418
8514
|
|
|
8419
8515
|
// src/controls/position-control.tsx
|
|
8420
|
-
import * as
|
|
8421
|
-
import { positionPropTypeUtil, stringPropTypeUtil as
|
|
8516
|
+
import * as React105 from "react";
|
|
8517
|
+
import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
|
|
8422
8518
|
import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
|
|
8423
8519
|
import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
|
|
8424
8520
|
import { Grid as Grid20, Select as Select5 } from "@elementor/ui";
|
|
8425
|
-
import { __ as
|
|
8521
|
+
import { __ as __51 } from "@wordpress/i18n";
|
|
8426
8522
|
var positionOptions = [
|
|
8427
|
-
{ label:
|
|
8428
|
-
{ label:
|
|
8429
|
-
{ label:
|
|
8430
|
-
{ label:
|
|
8431
|
-
{ label:
|
|
8432
|
-
{ label:
|
|
8433
|
-
{ label:
|
|
8434
|
-
{ label:
|
|
8435
|
-
{ label:
|
|
8436
|
-
{ label:
|
|
8523
|
+
{ label: __51("Center center", "elementor"), value: "center center" },
|
|
8524
|
+
{ label: __51("Center left", "elementor"), value: "center left" },
|
|
8525
|
+
{ label: __51("Center right", "elementor"), value: "center right" },
|
|
8526
|
+
{ label: __51("Top center", "elementor"), value: "top center" },
|
|
8527
|
+
{ label: __51("Top left", "elementor"), value: "top left" },
|
|
8528
|
+
{ label: __51("Top right", "elementor"), value: "top right" },
|
|
8529
|
+
{ label: __51("Bottom center", "elementor"), value: "bottom center" },
|
|
8530
|
+
{ label: __51("Bottom left", "elementor"), value: "bottom left" },
|
|
8531
|
+
{ label: __51("Bottom right", "elementor"), value: "bottom right" },
|
|
8532
|
+
{ label: __51("Custom", "elementor"), value: "custom" }
|
|
8437
8533
|
];
|
|
8438
8534
|
var PositionControl = () => {
|
|
8439
8535
|
const positionContext = useBoundProp(positionPropTypeUtil);
|
|
8440
|
-
const stringPropContext = useBoundProp(
|
|
8536
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil20);
|
|
8441
8537
|
const isCustom = !!positionContext.value;
|
|
8442
8538
|
const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
|
|
8443
8539
|
const handlePositionChange = (event) => {
|
|
@@ -8448,7 +8544,7 @@ var PositionControl = () => {
|
|
|
8448
8544
|
stringPropContext.setValue(value);
|
|
8449
8545
|
}
|
|
8450
8546
|
};
|
|
8451
|
-
return /* @__PURE__ */
|
|
8547
|
+
return /* @__PURE__ */ React105.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React105.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(ControlFormLabel, null, __51("Object position", "elementor"))), /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React105.createElement(
|
|
8452
8548
|
Select5,
|
|
8453
8549
|
{
|
|
8454
8550
|
size: "tiny",
|
|
@@ -8459,33 +8555,33 @@ var PositionControl = () => {
|
|
|
8459
8555
|
renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
|
|
8460
8556
|
fullWidth: true
|
|
8461
8557
|
},
|
|
8462
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
8463
|
-
)))), isCustom && /* @__PURE__ */
|
|
8558
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React105.createElement(MenuListItem7, { key: value, value: value ?? "" }, label))
|
|
8559
|
+
)))), isCustom && /* @__PURE__ */ React105.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React105.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React105.createElement(
|
|
8464
8560
|
SizeControl,
|
|
8465
8561
|
{
|
|
8466
|
-
startIcon: /* @__PURE__ */
|
|
8562
|
+
startIcon: /* @__PURE__ */ React105.createElement(LetterXIcon2, { fontSize: "tiny" }),
|
|
8467
8563
|
min: -Number.MAX_SAFE_INTEGER
|
|
8468
8564
|
}
|
|
8469
|
-
))), /* @__PURE__ */
|
|
8565
|
+
))), /* @__PURE__ */ React105.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React105.createElement(
|
|
8470
8566
|
SizeControl,
|
|
8471
8567
|
{
|
|
8472
|
-
startIcon: /* @__PURE__ */
|
|
8568
|
+
startIcon: /* @__PURE__ */ React105.createElement(LetterYIcon2, { fontSize: "tiny" }),
|
|
8473
8569
|
min: -Number.MAX_SAFE_INTEGER
|
|
8474
8570
|
}
|
|
8475
8571
|
)))))));
|
|
8476
8572
|
};
|
|
8477
8573
|
|
|
8478
8574
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
8479
|
-
import * as
|
|
8480
|
-
import { useRef as
|
|
8575
|
+
import * as React118 from "react";
|
|
8576
|
+
import { useRef as useRef33 } from "react";
|
|
8481
8577
|
import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
|
|
8482
8578
|
import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
|
|
8483
8579
|
import { bindTrigger as bindTrigger5, Box as Box30, IconButton as IconButton10, Tooltip as Tooltip12, Typography as Typography12, usePopupState as usePopupState10 } from "@elementor/ui";
|
|
8484
|
-
import { __ as
|
|
8580
|
+
import { __ as __61 } from "@wordpress/i18n";
|
|
8485
8581
|
|
|
8486
8582
|
// src/controls/transform-control/initial-values.ts
|
|
8487
8583
|
import {
|
|
8488
|
-
numberPropTypeUtil as
|
|
8584
|
+
numberPropTypeUtil as numberPropTypeUtil7,
|
|
8489
8585
|
rotateTransformPropTypeUtil,
|
|
8490
8586
|
scaleTransformPropTypeUtil,
|
|
8491
8587
|
skewTransformPropTypeUtil
|
|
@@ -8520,9 +8616,9 @@ var initialTransformValue = {
|
|
|
8520
8616
|
}
|
|
8521
8617
|
};
|
|
8522
8618
|
var initialScaleValue = scaleTransformPropTypeUtil.create({
|
|
8523
|
-
x:
|
|
8524
|
-
y:
|
|
8525
|
-
z:
|
|
8619
|
+
x: numberPropTypeUtil7.create(defaultValues.scale),
|
|
8620
|
+
y: numberPropTypeUtil7.create(defaultValues.scale),
|
|
8621
|
+
z: numberPropTypeUtil7.create(defaultValues.scale)
|
|
8526
8622
|
});
|
|
8527
8623
|
var initialRotateValue = rotateTransformPropTypeUtil.create({
|
|
8528
8624
|
x: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
@@ -8535,24 +8631,24 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
|
|
|
8535
8631
|
});
|
|
8536
8632
|
|
|
8537
8633
|
// src/controls/transform-control/transform-content.tsx
|
|
8538
|
-
import * as
|
|
8634
|
+
import * as React112 from "react";
|
|
8539
8635
|
import { Box as Box27, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
|
|
8540
|
-
import { __ as
|
|
8636
|
+
import { __ as __56 } from "@wordpress/i18n";
|
|
8541
8637
|
|
|
8542
8638
|
// src/controls/transform-control/functions/move.tsx
|
|
8543
|
-
import * as
|
|
8544
|
-
import { useRef as
|
|
8639
|
+
import * as React107 from "react";
|
|
8640
|
+
import { useRef as useRef26 } from "react";
|
|
8545
8641
|
import { moveTransformPropTypeUtil } from "@elementor/editor-props";
|
|
8546
8642
|
import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
|
|
8547
8643
|
import { Grid as Grid22 } from "@elementor/ui";
|
|
8548
|
-
import { __ as
|
|
8644
|
+
import { __ as __52 } from "@wordpress/i18n";
|
|
8549
8645
|
|
|
8550
8646
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
8551
|
-
import * as
|
|
8647
|
+
import * as React106 from "react";
|
|
8552
8648
|
import { Grid as Grid21 } from "@elementor/ui";
|
|
8553
8649
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
8554
8650
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
8555
|
-
return /* @__PURE__ */
|
|
8651
|
+
return /* @__PURE__ */ React106.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React106.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React106.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React106.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React106.createElement(
|
|
8556
8652
|
SizeControl,
|
|
8557
8653
|
{
|
|
8558
8654
|
anchorRef,
|
|
@@ -8568,28 +8664,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
|
|
|
8568
8664
|
// src/controls/transform-control/functions/move.tsx
|
|
8569
8665
|
var moveAxisControls = [
|
|
8570
8666
|
{
|
|
8571
|
-
label:
|
|
8667
|
+
label: __52("Move X", "elementor"),
|
|
8572
8668
|
bind: "x",
|
|
8573
|
-
startIcon: /* @__PURE__ */
|
|
8669
|
+
startIcon: /* @__PURE__ */ React107.createElement(ArrowRightIcon, { fontSize: "tiny" }),
|
|
8574
8670
|
units: ["px", "%", "em", "rem", "vw"]
|
|
8575
8671
|
},
|
|
8576
8672
|
{
|
|
8577
|
-
label:
|
|
8673
|
+
label: __52("Move Y", "elementor"),
|
|
8578
8674
|
bind: "y",
|
|
8579
|
-
startIcon: /* @__PURE__ */
|
|
8675
|
+
startIcon: /* @__PURE__ */ React107.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
8580
8676
|
units: ["px", "%", "em", "rem", "vh"]
|
|
8581
8677
|
},
|
|
8582
8678
|
{
|
|
8583
|
-
label:
|
|
8679
|
+
label: __52("Move Z", "elementor"),
|
|
8584
8680
|
bind: "z",
|
|
8585
|
-
startIcon: /* @__PURE__ */
|
|
8681
|
+
startIcon: /* @__PURE__ */ React107.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
8586
8682
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
8587
8683
|
}
|
|
8588
8684
|
];
|
|
8589
8685
|
var Move = () => {
|
|
8590
8686
|
const context = useBoundProp(moveTransformPropTypeUtil);
|
|
8591
|
-
const rowRefs = [
|
|
8592
|
-
return /* @__PURE__ */
|
|
8687
|
+
const rowRefs = [useRef26(null), useRef26(null), useRef26(null)];
|
|
8688
|
+
return /* @__PURE__ */ React107.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React107.createElement(PropProvider, { ...context }, /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React107.createElement(
|
|
8593
8689
|
AxisRow,
|
|
8594
8690
|
{
|
|
8595
8691
|
key: control.bind,
|
|
@@ -8602,34 +8698,34 @@ var Move = () => {
|
|
|
8602
8698
|
};
|
|
8603
8699
|
|
|
8604
8700
|
// src/controls/transform-control/functions/rotate.tsx
|
|
8605
|
-
import * as
|
|
8606
|
-
import { useRef as
|
|
8701
|
+
import * as React108 from "react";
|
|
8702
|
+
import { useRef as useRef27 } from "react";
|
|
8607
8703
|
import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
8608
8704
|
import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
|
|
8609
8705
|
import { Grid as Grid23 } from "@elementor/ui";
|
|
8610
|
-
import { __ as
|
|
8706
|
+
import { __ as __53 } from "@wordpress/i18n";
|
|
8611
8707
|
var rotateAxisControls = [
|
|
8612
8708
|
{
|
|
8613
|
-
label:
|
|
8709
|
+
label: __53("Rotate X", "elementor"),
|
|
8614
8710
|
bind: "x",
|
|
8615
|
-
startIcon: /* @__PURE__ */
|
|
8711
|
+
startIcon: /* @__PURE__ */ React108.createElement(Arrow360Icon, { fontSize: "tiny" })
|
|
8616
8712
|
},
|
|
8617
8713
|
{
|
|
8618
|
-
label:
|
|
8714
|
+
label: __53("Rotate Y", "elementor"),
|
|
8619
8715
|
bind: "y",
|
|
8620
|
-
startIcon: /* @__PURE__ */
|
|
8716
|
+
startIcon: /* @__PURE__ */ React108.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
8621
8717
|
},
|
|
8622
8718
|
{
|
|
8623
|
-
label:
|
|
8719
|
+
label: __53("Rotate Z", "elementor"),
|
|
8624
8720
|
bind: "z",
|
|
8625
|
-
startIcon: /* @__PURE__ */
|
|
8721
|
+
startIcon: /* @__PURE__ */ React108.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
|
|
8626
8722
|
}
|
|
8627
8723
|
];
|
|
8628
8724
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
8629
8725
|
var Rotate = () => {
|
|
8630
8726
|
const context = useBoundProp(rotateTransformPropTypeUtil2);
|
|
8631
|
-
const rowRefs = [
|
|
8632
|
-
return /* @__PURE__ */
|
|
8727
|
+
const rowRefs = [useRef27(null), useRef27(null), useRef27(null)];
|
|
8728
|
+
return /* @__PURE__ */ React108.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React108.createElement(PropProvider, { ...context }, /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React108.createElement(
|
|
8633
8729
|
AxisRow,
|
|
8634
8730
|
{
|
|
8635
8731
|
key: control.bind,
|
|
@@ -8641,68 +8737,68 @@ var Rotate = () => {
|
|
|
8641
8737
|
};
|
|
8642
8738
|
|
|
8643
8739
|
// src/controls/transform-control/functions/scale.tsx
|
|
8644
|
-
import * as
|
|
8645
|
-
import { useRef as
|
|
8740
|
+
import * as React110 from "react";
|
|
8741
|
+
import { useRef as useRef28 } from "react";
|
|
8646
8742
|
import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
8647
8743
|
import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
|
|
8648
8744
|
import { Grid as Grid25 } from "@elementor/ui";
|
|
8649
|
-
import { __ as
|
|
8745
|
+
import { __ as __54 } from "@wordpress/i18n";
|
|
8650
8746
|
|
|
8651
8747
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
8652
|
-
import * as
|
|
8748
|
+
import * as React109 from "react";
|
|
8653
8749
|
import { Grid as Grid24 } from "@elementor/ui";
|
|
8654
8750
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
8655
|
-
return /* @__PURE__ */
|
|
8751
|
+
return /* @__PURE__ */ React109.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React109.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlLabel, null, label)), /* @__PURE__ */ React109.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React109.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
8656
8752
|
};
|
|
8657
8753
|
|
|
8658
8754
|
// src/controls/transform-control/functions/scale.tsx
|
|
8659
8755
|
var scaleAxisControls = [
|
|
8660
8756
|
{
|
|
8661
|
-
label:
|
|
8757
|
+
label: __54("Scale X", "elementor"),
|
|
8662
8758
|
bind: "x",
|
|
8663
|
-
startIcon: /* @__PURE__ */
|
|
8759
|
+
startIcon: /* @__PURE__ */ React110.createElement(ArrowRightIcon2, { fontSize: "tiny" })
|
|
8664
8760
|
},
|
|
8665
8761
|
{
|
|
8666
|
-
label:
|
|
8762
|
+
label: __54("Scale Y", "elementor"),
|
|
8667
8763
|
bind: "y",
|
|
8668
|
-
startIcon: /* @__PURE__ */
|
|
8764
|
+
startIcon: /* @__PURE__ */ React110.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
|
|
8669
8765
|
},
|
|
8670
8766
|
{
|
|
8671
|
-
label:
|
|
8767
|
+
label: __54("Scale Z", "elementor"),
|
|
8672
8768
|
bind: "z",
|
|
8673
|
-
startIcon: /* @__PURE__ */
|
|
8769
|
+
startIcon: /* @__PURE__ */ React110.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
|
|
8674
8770
|
}
|
|
8675
8771
|
];
|
|
8676
8772
|
var Scale = () => {
|
|
8677
8773
|
const context = useBoundProp(scaleTransformPropTypeUtil2);
|
|
8678
|
-
const rowRefs = [
|
|
8679
|
-
return /* @__PURE__ */
|
|
8774
|
+
const rowRefs = [useRef28(null), useRef28(null), useRef28(null)];
|
|
8775
|
+
return /* @__PURE__ */ React110.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React110.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
|
|
8680
8776
|
};
|
|
8681
8777
|
|
|
8682
8778
|
// src/controls/transform-control/functions/skew.tsx
|
|
8683
|
-
import * as
|
|
8684
|
-
import { useRef as
|
|
8779
|
+
import * as React111 from "react";
|
|
8780
|
+
import { useRef as useRef29 } from "react";
|
|
8685
8781
|
import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
8686
8782
|
import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
|
|
8687
8783
|
import { Grid as Grid26 } from "@elementor/ui";
|
|
8688
|
-
import { __ as
|
|
8784
|
+
import { __ as __55 } from "@wordpress/i18n";
|
|
8689
8785
|
var skewAxisControls = [
|
|
8690
8786
|
{
|
|
8691
|
-
label:
|
|
8787
|
+
label: __55("Skew X", "elementor"),
|
|
8692
8788
|
bind: "x",
|
|
8693
|
-
startIcon: /* @__PURE__ */
|
|
8789
|
+
startIcon: /* @__PURE__ */ React111.createElement(ArrowRightIcon3, { fontSize: "tiny" })
|
|
8694
8790
|
},
|
|
8695
8791
|
{
|
|
8696
|
-
label:
|
|
8792
|
+
label: __55("Skew Y", "elementor"),
|
|
8697
8793
|
bind: "y",
|
|
8698
|
-
startIcon: /* @__PURE__ */
|
|
8794
|
+
startIcon: /* @__PURE__ */ React111.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
8699
8795
|
}
|
|
8700
8796
|
];
|
|
8701
8797
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
8702
8798
|
var Skew = () => {
|
|
8703
8799
|
const context = useBoundProp(skewTransformPropTypeUtil2);
|
|
8704
|
-
const rowRefs = [
|
|
8705
|
-
return /* @__PURE__ */
|
|
8800
|
+
const rowRefs = [useRef29(null), useRef29(null), useRef29(null)];
|
|
8801
|
+
return /* @__PURE__ */ React111.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React111.createElement(PropProvider, { ...context }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React111.createElement(
|
|
8706
8802
|
AxisRow,
|
|
8707
8803
|
{
|
|
8708
8804
|
key: control.bind,
|
|
@@ -8714,7 +8810,7 @@ var Skew = () => {
|
|
|
8714
8810
|
};
|
|
8715
8811
|
|
|
8716
8812
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
8717
|
-
import { useRef as
|
|
8813
|
+
import { useRef as useRef30 } from "react";
|
|
8718
8814
|
import {
|
|
8719
8815
|
moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
|
|
8720
8816
|
rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
|
|
@@ -8746,7 +8842,7 @@ var useTransformTabsHistory = ({
|
|
|
8746
8842
|
}
|
|
8747
8843
|
};
|
|
8748
8844
|
const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
|
|
8749
|
-
const valuesHistory =
|
|
8845
|
+
const valuesHistory = useRef30({
|
|
8750
8846
|
move: initialMove,
|
|
8751
8847
|
scale: initialScale,
|
|
8752
8848
|
rotate: initialRotate,
|
|
@@ -8807,7 +8903,7 @@ var TransformContent = () => {
|
|
|
8807
8903
|
rotate: initialRotateValue.value,
|
|
8808
8904
|
skew: initialSkewValue.value
|
|
8809
8905
|
});
|
|
8810
|
-
return /* @__PURE__ */
|
|
8906
|
+
return /* @__PURE__ */ React112.createElement(PopoverContent, null, /* @__PURE__ */ React112.createElement(Box27, { sx: { width: "100%" } }, /* @__PURE__ */ React112.createElement(Box27, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React112.createElement(
|
|
8811
8907
|
Tabs2,
|
|
8812
8908
|
{
|
|
8813
8909
|
size: "small",
|
|
@@ -8818,37 +8914,37 @@ var TransformContent = () => {
|
|
|
8818
8914
|
}
|
|
8819
8915
|
},
|
|
8820
8916
|
...getTabsProps(),
|
|
8821
|
-
"aria-label":
|
|
8917
|
+
"aria-label": __56("Transform", "elementor")
|
|
8822
8918
|
},
|
|
8823
|
-
/* @__PURE__ */
|
|
8824
|
-
/* @__PURE__ */
|
|
8825
|
-
/* @__PURE__ */
|
|
8826
|
-
/* @__PURE__ */
|
|
8827
|
-
)), /* @__PURE__ */
|
|
8919
|
+
/* @__PURE__ */ React112.createElement(Tab2, { label: __56("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
8920
|
+
/* @__PURE__ */ React112.createElement(Tab2, { label: __56("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
8921
|
+
/* @__PURE__ */ React112.createElement(Tab2, { label: __56("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
8922
|
+
/* @__PURE__ */ React112.createElement(Tab2, { label: __56("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
8923
|
+
)), /* @__PURE__ */ React112.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React112.createElement(Move, null)), /* @__PURE__ */ React112.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React112.createElement(Scale, null)), /* @__PURE__ */ React112.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React112.createElement(Rotate, null)), /* @__PURE__ */ React112.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React112.createElement(Skew, null))));
|
|
8828
8924
|
};
|
|
8829
8925
|
|
|
8830
8926
|
// src/controls/transform-control/transform-icon.tsx
|
|
8831
|
-
import * as
|
|
8927
|
+
import * as React113 from "react";
|
|
8832
8928
|
import { ArrowAutofitHeightIcon, ArrowsMaximizeIcon as ArrowsMaximizeIcon2, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
|
|
8833
8929
|
var TransformIcon = ({ value }) => {
|
|
8834
8930
|
switch (value.$$type) {
|
|
8835
8931
|
case TransformFunctionKeys.move:
|
|
8836
|
-
return /* @__PURE__ */
|
|
8932
|
+
return /* @__PURE__ */ React113.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
|
|
8837
8933
|
case TransformFunctionKeys.scale:
|
|
8838
|
-
return /* @__PURE__ */
|
|
8934
|
+
return /* @__PURE__ */ React113.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
|
|
8839
8935
|
case TransformFunctionKeys.rotate:
|
|
8840
|
-
return /* @__PURE__ */
|
|
8936
|
+
return /* @__PURE__ */ React113.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
|
|
8841
8937
|
case TransformFunctionKeys.skew:
|
|
8842
|
-
return /* @__PURE__ */
|
|
8938
|
+
return /* @__PURE__ */ React113.createElement(SkewXIcon, { fontSize: "tiny" });
|
|
8843
8939
|
default:
|
|
8844
8940
|
return null;
|
|
8845
8941
|
}
|
|
8846
8942
|
};
|
|
8847
8943
|
|
|
8848
8944
|
// src/controls/transform-control/transform-label.tsx
|
|
8849
|
-
import * as
|
|
8945
|
+
import * as React114 from "react";
|
|
8850
8946
|
import { Box as Box28 } from "@elementor/ui";
|
|
8851
|
-
import { __ as
|
|
8947
|
+
import { __ as __57 } from "@wordpress/i18n";
|
|
8852
8948
|
var orderedAxis = ["x", "y", "z"];
|
|
8853
8949
|
var formatLabel = (value, functionType) => {
|
|
8854
8950
|
return orderedAxis.map((axisKey) => {
|
|
@@ -8866,102 +8962,102 @@ var TransformLabel = (props) => {
|
|
|
8866
8962
|
const { $$type, value } = props.value;
|
|
8867
8963
|
switch ($$type) {
|
|
8868
8964
|
case TransformFunctionKeys.move:
|
|
8869
|
-
return /* @__PURE__ */
|
|
8965
|
+
return /* @__PURE__ */ React114.createElement(Label2, { label: __57("Move", "elementor"), value: formatLabel(value, "move") });
|
|
8870
8966
|
case TransformFunctionKeys.scale:
|
|
8871
|
-
return /* @__PURE__ */
|
|
8967
|
+
return /* @__PURE__ */ React114.createElement(Label2, { label: __57("Scale", "elementor"), value: formatLabel(value, "scale") });
|
|
8872
8968
|
case TransformFunctionKeys.rotate:
|
|
8873
|
-
return /* @__PURE__ */
|
|
8969
|
+
return /* @__PURE__ */ React114.createElement(Label2, { label: __57("Rotate", "elementor"), value: formatLabel(value, "rotate") });
|
|
8874
8970
|
case TransformFunctionKeys.skew:
|
|
8875
|
-
return /* @__PURE__ */
|
|
8971
|
+
return /* @__PURE__ */ React114.createElement(Label2, { label: __57("Skew", "elementor"), value: formatLabel(value, "skew") });
|
|
8876
8972
|
default:
|
|
8877
8973
|
return "";
|
|
8878
8974
|
}
|
|
8879
8975
|
};
|
|
8880
8976
|
var Label2 = ({ label, value }) => {
|
|
8881
|
-
return /* @__PURE__ */
|
|
8977
|
+
return /* @__PURE__ */ React114.createElement(Box28, { component: "span" }, label, ": ", value);
|
|
8882
8978
|
};
|
|
8883
8979
|
|
|
8884
8980
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
8885
|
-
import * as
|
|
8981
|
+
import * as React117 from "react";
|
|
8886
8982
|
import { PopoverHeader as PopoverHeader5 } from "@elementor/editor-ui";
|
|
8887
8983
|
import { AdjustmentsIcon } from "@elementor/icons";
|
|
8888
8984
|
import { bindPopover as bindPopover6, Box as Box29, Divider as Divider6, Popover as Popover7 } from "@elementor/ui";
|
|
8889
|
-
import { __ as
|
|
8985
|
+
import { __ as __60 } from "@wordpress/i18n";
|
|
8890
8986
|
|
|
8891
8987
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
8892
|
-
import * as
|
|
8893
|
-
import { useRef as
|
|
8988
|
+
import * as React115 from "react";
|
|
8989
|
+
import { useRef as useRef31 } from "react";
|
|
8894
8990
|
import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
|
|
8895
8991
|
import { Grid as Grid27, Stack as Stack19 } from "@elementor/ui";
|
|
8896
|
-
import { __ as
|
|
8992
|
+
import { __ as __58 } from "@wordpress/i18n";
|
|
8897
8993
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
8898
8994
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
8899
|
-
label:
|
|
8995
|
+
label: __58("Perspective", "elementor"),
|
|
8900
8996
|
bind: "perspective",
|
|
8901
8997
|
units: ["px", "em", "rem", "vw", "vh"]
|
|
8902
8998
|
};
|
|
8903
8999
|
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
8904
9000
|
{
|
|
8905
|
-
label:
|
|
9001
|
+
label: __58("Origin X", "elementor"),
|
|
8906
9002
|
bind: "x",
|
|
8907
9003
|
units: ORIGIN_UNITS
|
|
8908
9004
|
},
|
|
8909
9005
|
{
|
|
8910
|
-
label:
|
|
9006
|
+
label: __58("Origin Y", "elementor"),
|
|
8911
9007
|
bind: "y",
|
|
8912
9008
|
units: ORIGIN_UNITS
|
|
8913
9009
|
}
|
|
8914
9010
|
];
|
|
8915
9011
|
var ChildrenPerspectiveControl = () => {
|
|
8916
|
-
return /* @__PURE__ */
|
|
9012
|
+
return /* @__PURE__ */ React115.createElement(Stack19, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, __58("Children perspective", "elementor")), /* @__PURE__ */ React115.createElement(PerspectiveControl, null), /* @__PURE__ */ React115.createElement(PerspectiveOriginControl, null));
|
|
8917
9013
|
};
|
|
8918
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
8919
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
9014
|
+
var PerspectiveControl = () => /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React115.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
9015
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React115.createElement(PerspectiveOriginControlProvider, null));
|
|
8920
9016
|
var PerspectiveOriginControlProvider = () => {
|
|
8921
9017
|
const context = useBoundProp(perspectiveOriginPropTypeUtil);
|
|
8922
|
-
return /* @__PURE__ */
|
|
9018
|
+
return /* @__PURE__ */ React115.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React115.createElement(ControlFields, { control }))));
|
|
8923
9019
|
};
|
|
8924
9020
|
var ControlFields = ({ control }) => {
|
|
8925
|
-
const rowRef =
|
|
8926
|
-
return /* @__PURE__ */
|
|
9021
|
+
const rowRef = useRef31(null);
|
|
9022
|
+
return /* @__PURE__ */ React115.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React115.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React115.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
8927
9023
|
};
|
|
8928
9024
|
|
|
8929
9025
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
8930
|
-
import * as
|
|
8931
|
-
import { useRef as
|
|
9026
|
+
import * as React116 from "react";
|
|
9027
|
+
import { useRef as useRef32 } from "react";
|
|
8932
9028
|
import { transformOriginPropTypeUtil } from "@elementor/editor-props";
|
|
8933
9029
|
import { Grid as Grid28, Stack as Stack20 } from "@elementor/ui";
|
|
8934
|
-
import { __ as
|
|
9030
|
+
import { __ as __59 } from "@wordpress/i18n";
|
|
8935
9031
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
8936
9032
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
8937
9033
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
8938
9034
|
{
|
|
8939
|
-
label:
|
|
9035
|
+
label: __59("Origin X", "elementor"),
|
|
8940
9036
|
bind: "x",
|
|
8941
9037
|
units: TRANSFORM_ORIGIN_UNITS
|
|
8942
9038
|
},
|
|
8943
9039
|
{
|
|
8944
|
-
label:
|
|
9040
|
+
label: __59("Origin Y", "elementor"),
|
|
8945
9041
|
bind: "y",
|
|
8946
9042
|
units: TRANSFORM_ORIGIN_UNITS
|
|
8947
9043
|
},
|
|
8948
9044
|
{
|
|
8949
|
-
label:
|
|
9045
|
+
label: __59("Origin Z", "elementor"),
|
|
8950
9046
|
bind: "z",
|
|
8951
9047
|
units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
|
|
8952
9048
|
}
|
|
8953
9049
|
];
|
|
8954
9050
|
var TransformOriginControl = () => {
|
|
8955
|
-
return /* @__PURE__ */
|
|
9051
|
+
return /* @__PURE__ */ React116.createElement(Stack20, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, __59("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React116.createElement(ControlFields2, { control, key: control.bind })));
|
|
8956
9052
|
};
|
|
8957
9053
|
var ControlFields2 = ({ control }) => {
|
|
8958
9054
|
const context = useBoundProp(transformOriginPropTypeUtil);
|
|
8959
|
-
const rowRef =
|
|
8960
|
-
return /* @__PURE__ */
|
|
9055
|
+
const rowRef = useRef32(null);
|
|
9056
|
+
return /* @__PURE__ */ React116.createElement(PropProvider, { ...context }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React116.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React116.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React116.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React116.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
|
|
8961
9057
|
};
|
|
8962
9058
|
|
|
8963
9059
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
8964
|
-
var
|
|
9060
|
+
var SIZE11 = "tiny";
|
|
8965
9061
|
var TransformSettingsControl = ({
|
|
8966
9062
|
popupState,
|
|
8967
9063
|
anchorRef,
|
|
@@ -8971,7 +9067,7 @@ var TransformSettingsControl = ({
|
|
|
8971
9067
|
...popupState,
|
|
8972
9068
|
anchorEl: anchorRef.current ?? void 0
|
|
8973
9069
|
});
|
|
8974
|
-
return /* @__PURE__ */
|
|
9070
|
+
return /* @__PURE__ */ React117.createElement(
|
|
8975
9071
|
Popover7,
|
|
8976
9072
|
{
|
|
8977
9073
|
disablePortal: true,
|
|
@@ -8986,45 +9082,45 @@ var TransformSettingsControl = ({
|
|
|
8986
9082
|
},
|
|
8987
9083
|
...popupProps
|
|
8988
9084
|
},
|
|
8989
|
-
/* @__PURE__ */
|
|
9085
|
+
/* @__PURE__ */ React117.createElement(
|
|
8990
9086
|
PopoverHeader5,
|
|
8991
9087
|
{
|
|
8992
|
-
title:
|
|
9088
|
+
title: __60("Transform settings", "elementor"),
|
|
8993
9089
|
onClose: popupState.close,
|
|
8994
|
-
icon: /* @__PURE__ */
|
|
9090
|
+
icon: /* @__PURE__ */ React117.createElement(AdjustmentsIcon, { fontSize: SIZE11 })
|
|
8995
9091
|
}
|
|
8996
9092
|
),
|
|
8997
|
-
/* @__PURE__ */
|
|
8998
|
-
/* @__PURE__ */
|
|
9093
|
+
/* @__PURE__ */ React117.createElement(Divider6, null),
|
|
9094
|
+
/* @__PURE__ */ React117.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React117.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement(Box29, { sx: { my: 0.5 } }, /* @__PURE__ */ React117.createElement(Divider6, null)), /* @__PURE__ */ React117.createElement(ChildrenPerspectiveControl, null)))
|
|
8999
9095
|
);
|
|
9000
9096
|
};
|
|
9001
9097
|
|
|
9002
9098
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
9003
|
-
var
|
|
9099
|
+
var SIZE12 = "tiny";
|
|
9004
9100
|
var TransformRepeaterControl = createControl(
|
|
9005
9101
|
({ showChildrenPerspective }) => {
|
|
9006
9102
|
const context = useBoundProp(transformPropTypeUtil);
|
|
9007
|
-
const headerRef =
|
|
9103
|
+
const headerRef = useRef33(null);
|
|
9008
9104
|
const popupState = usePopupState10({ variant: "popover" });
|
|
9009
|
-
return /* @__PURE__ */
|
|
9105
|
+
return /* @__PURE__ */ React118.createElement(PropProvider, { ...context }, /* @__PURE__ */ React118.createElement(
|
|
9010
9106
|
TransformSettingsControl,
|
|
9011
9107
|
{
|
|
9012
9108
|
popupState,
|
|
9013
9109
|
anchorRef: headerRef,
|
|
9014
9110
|
showChildrenPerspective
|
|
9015
9111
|
}
|
|
9016
|
-
), /* @__PURE__ */
|
|
9112
|
+
), /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React118.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
9017
9113
|
}
|
|
9018
9114
|
);
|
|
9019
|
-
var ToolTip = /* @__PURE__ */
|
|
9115
|
+
var ToolTip = /* @__PURE__ */ React118.createElement(
|
|
9020
9116
|
Box30,
|
|
9021
9117
|
{
|
|
9022
9118
|
component: "span",
|
|
9023
9119
|
"aria-label": void 0,
|
|
9024
9120
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
9025
9121
|
},
|
|
9026
|
-
/* @__PURE__ */
|
|
9027
|
-
/* @__PURE__ */
|
|
9122
|
+
/* @__PURE__ */ React118.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
|
|
9123
|
+
/* @__PURE__ */ React118.createElement(Typography12, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __61("You can use each kind of transform only once per element.", "elementor"))
|
|
9028
9124
|
);
|
|
9029
9125
|
var Repeater2 = ({
|
|
9030
9126
|
headerRef,
|
|
@@ -9038,21 +9134,21 @@ var Repeater2 = ({
|
|
|
9038
9134
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
9039
9135
|
};
|
|
9040
9136
|
const shouldDisableAddItem = !getInitialValue2();
|
|
9041
|
-
return /* @__PURE__ */
|
|
9137
|
+
return /* @__PURE__ */ React118.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React118.createElement(
|
|
9042
9138
|
ControlRepeater,
|
|
9043
9139
|
{
|
|
9044
9140
|
initial: getInitialValue2() ?? initialTransformValue,
|
|
9045
9141
|
propTypeUtil: transformFunctionsPropTypeUtil
|
|
9046
9142
|
},
|
|
9047
|
-
/* @__PURE__ */
|
|
9143
|
+
/* @__PURE__ */ React118.createElement(
|
|
9048
9144
|
RepeaterHeader,
|
|
9049
9145
|
{
|
|
9050
|
-
label:
|
|
9051
|
-
adornment: () => /* @__PURE__ */
|
|
9146
|
+
label: __61("Transform", "elementor"),
|
|
9147
|
+
adornment: () => /* @__PURE__ */ React118.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
9052
9148
|
ref: headerRef
|
|
9053
9149
|
},
|
|
9054
|
-
/* @__PURE__ */
|
|
9055
|
-
/* @__PURE__ */
|
|
9150
|
+
/* @__PURE__ */ React118.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
9151
|
+
/* @__PURE__ */ React118.createElement(
|
|
9056
9152
|
TooltipAddItemAction,
|
|
9057
9153
|
{
|
|
9058
9154
|
disabled: shouldDisableAddItem,
|
|
@@ -9062,15 +9158,15 @@ var Repeater2 = ({
|
|
|
9062
9158
|
}
|
|
9063
9159
|
)
|
|
9064
9160
|
),
|
|
9065
|
-
/* @__PURE__ */
|
|
9161
|
+
/* @__PURE__ */ React118.createElement(ItemsContainer, null, /* @__PURE__ */ React118.createElement(
|
|
9066
9162
|
Item,
|
|
9067
9163
|
{
|
|
9068
9164
|
Icon: TransformIcon,
|
|
9069
9165
|
Label: TransformLabel,
|
|
9070
|
-
actions: /* @__PURE__ */
|
|
9166
|
+
actions: /* @__PURE__ */ React118.createElement(React118.Fragment, null, /* @__PURE__ */ React118.createElement(DisableItemAction, null), /* @__PURE__ */ React118.createElement(RemoveItemAction, null))
|
|
9071
9167
|
}
|
|
9072
9168
|
)),
|
|
9073
|
-
/* @__PURE__ */
|
|
9169
|
+
/* @__PURE__ */ React118.createElement(EditItemPopover, null, /* @__PURE__ */ React118.createElement(TransformContent, null))
|
|
9074
9170
|
));
|
|
9075
9171
|
};
|
|
9076
9172
|
var TransformBasePopoverTrigger = ({
|
|
@@ -9078,13 +9174,13 @@ var TransformBasePopoverTrigger = ({
|
|
|
9078
9174
|
repeaterBindKey
|
|
9079
9175
|
}) => {
|
|
9080
9176
|
const { bind } = useBoundProp();
|
|
9081
|
-
const titleLabel =
|
|
9082
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
9177
|
+
const titleLabel = __61("Transform settings", "elementor");
|
|
9178
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React118.createElement(Tooltip12, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React118.createElement(IconButton10, { size: SIZE12, "aria-label": titleLabel, ...bindTrigger5(popupState) }, /* @__PURE__ */ React118.createElement(AdjustmentsIcon2, { fontSize: SIZE12 })));
|
|
9083
9179
|
};
|
|
9084
9180
|
|
|
9085
9181
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
9086
|
-
import * as
|
|
9087
|
-
import { useEffect as useEffect19, useMemo as
|
|
9182
|
+
import * as React121 from "react";
|
|
9183
|
+
import { useEffect as useEffect19, useMemo as useMemo19, useState as useState26 } from "react";
|
|
9088
9184
|
import {
|
|
9089
9185
|
createArrayPropUtils as createArrayPropUtils3,
|
|
9090
9186
|
selectionSizePropTypeUtil as selectionSizePropTypeUtil2
|
|
@@ -9092,19 +9188,19 @@ import {
|
|
|
9092
9188
|
import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
|
|
9093
9189
|
import { Alert as Alert3, AlertTitle as AlertTitle4, Box as Box32, Typography as Typography13 } from "@elementor/ui";
|
|
9094
9190
|
import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
|
|
9095
|
-
import { __ as
|
|
9191
|
+
import { __ as __64 } from "@wordpress/i18n";
|
|
9096
9192
|
|
|
9097
9193
|
// src/controls/selection-size-control.tsx
|
|
9098
|
-
import * as
|
|
9099
|
-
import { useMemo as
|
|
9194
|
+
import * as React119 from "react";
|
|
9195
|
+
import { useMemo as useMemo17, useRef as useRef34 } from "react";
|
|
9100
9196
|
import { selectionSizePropTypeUtil } from "@elementor/editor-props";
|
|
9101
9197
|
import { Grid as Grid29 } from "@elementor/ui";
|
|
9102
9198
|
var SelectionSizeControl = createControl(
|
|
9103
9199
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
9104
9200
|
const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
|
|
9105
|
-
const rowRef =
|
|
9201
|
+
const rowRef = useRef34(null);
|
|
9106
9202
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
9107
|
-
const currentSizeConfig =
|
|
9203
|
+
const currentSizeConfig = useMemo17(() => {
|
|
9108
9204
|
switch (value.selection.$$type) {
|
|
9109
9205
|
case "key-value":
|
|
9110
9206
|
return sizeConfigMap[value?.selection?.value.value.value || ""];
|
|
@@ -9115,7 +9211,7 @@ var SelectionSizeControl = createControl(
|
|
|
9115
9211
|
}
|
|
9116
9212
|
}, [value, sizeConfigMap]);
|
|
9117
9213
|
const SelectionComponent = selectionConfig.component;
|
|
9118
|
-
return /* @__PURE__ */
|
|
9214
|
+
return /* @__PURE__ */ React119.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React119.createElement(Grid29, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React119.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React119.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React119.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React119.createElement(React119.Fragment, null, /* @__PURE__ */ React119.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React119.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React119.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React119.createElement(
|
|
9119
9215
|
SizeControl,
|
|
9120
9216
|
{
|
|
9121
9217
|
anchorRef: rowRef,
|
|
@@ -9130,12 +9226,12 @@ var SelectionSizeControl = createControl(
|
|
|
9130
9226
|
|
|
9131
9227
|
// src/controls/transition-control/data.ts
|
|
9132
9228
|
import { hasProInstalled, isVersionGreaterOrEqual } from "@elementor/utils";
|
|
9133
|
-
import { __ as
|
|
9229
|
+
import { __ as __62 } from "@wordpress/i18n";
|
|
9134
9230
|
var initialTransitionValue = {
|
|
9135
9231
|
selection: {
|
|
9136
9232
|
$$type: "key-value",
|
|
9137
9233
|
value: {
|
|
9138
|
-
key: { value:
|
|
9234
|
+
key: { value: __62("All properties", "elementor"), $$type: "string" },
|
|
9139
9235
|
value: { value: "all", $$type: "string" }
|
|
9140
9236
|
}
|
|
9141
9237
|
},
|
|
@@ -9159,128 +9255,128 @@ var createTransitionPropertiesList = () => {
|
|
|
9159
9255
|
const isSiteRtl = getIsSiteRtl();
|
|
9160
9256
|
const baseProperties = [
|
|
9161
9257
|
{
|
|
9162
|
-
label:
|
|
9258
|
+
label: __62("Default", "elementor"),
|
|
9163
9259
|
type: "category",
|
|
9164
|
-
properties: [{ label:
|
|
9260
|
+
properties: [{ label: __62("All properties", "elementor"), value: "all" }]
|
|
9165
9261
|
},
|
|
9166
9262
|
{
|
|
9167
|
-
label:
|
|
9263
|
+
label: __62("Margin", "elementor"),
|
|
9168
9264
|
type: "category",
|
|
9169
9265
|
properties: [
|
|
9170
|
-
{ label:
|
|
9171
|
-
{ label:
|
|
9266
|
+
{ label: __62("Margin (all)", "elementor"), value: "margin", isDisabled: true },
|
|
9267
|
+
{ label: __62("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
|
|
9172
9268
|
{
|
|
9173
|
-
label: isSiteRtl ?
|
|
9269
|
+
label: isSiteRtl ? __62("Margin right", "elementor") : __62("Margin left", "elementor"),
|
|
9174
9270
|
value: "margin-inline-start",
|
|
9175
9271
|
isDisabled: true
|
|
9176
9272
|
},
|
|
9177
9273
|
{
|
|
9178
|
-
label: isSiteRtl ?
|
|
9274
|
+
label: isSiteRtl ? __62("Margin left", "elementor") : __62("Margin right", "elementor"),
|
|
9179
9275
|
value: "margin-inline-end",
|
|
9180
9276
|
isDisabled: true
|
|
9181
9277
|
},
|
|
9182
|
-
{ label:
|
|
9278
|
+
{ label: __62("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
|
|
9183
9279
|
]
|
|
9184
9280
|
},
|
|
9185
9281
|
{
|
|
9186
|
-
label:
|
|
9282
|
+
label: __62("Padding", "elementor"),
|
|
9187
9283
|
type: "category",
|
|
9188
9284
|
properties: [
|
|
9189
|
-
{ label:
|
|
9190
|
-
{ label:
|
|
9285
|
+
{ label: __62("Padding (all)", "elementor"), value: "padding", isDisabled: true },
|
|
9286
|
+
{ label: __62("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
|
|
9191
9287
|
{
|
|
9192
|
-
label: isSiteRtl ?
|
|
9288
|
+
label: isSiteRtl ? __62("Padding right", "elementor") : __62("Padding left", "elementor"),
|
|
9193
9289
|
value: "padding-inline-start",
|
|
9194
9290
|
isDisabled: true
|
|
9195
9291
|
},
|
|
9196
9292
|
{
|
|
9197
|
-
label: isSiteRtl ?
|
|
9293
|
+
label: isSiteRtl ? __62("Padding left", "elementor") : __62("Padding right", "elementor"),
|
|
9198
9294
|
value: "padding-inline-end",
|
|
9199
9295
|
isDisabled: true
|
|
9200
9296
|
},
|
|
9201
|
-
{ label:
|
|
9297
|
+
{ label: __62("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
|
|
9202
9298
|
]
|
|
9203
9299
|
},
|
|
9204
9300
|
{
|
|
9205
|
-
label:
|
|
9301
|
+
label: __62("Flex", "elementor"),
|
|
9206
9302
|
type: "category",
|
|
9207
9303
|
properties: [
|
|
9208
|
-
{ label:
|
|
9209
|
-
{ label:
|
|
9210
|
-
{ label:
|
|
9211
|
-
{ label:
|
|
9304
|
+
{ label: __62("Flex (all)", "elementor"), value: "flex", isDisabled: true },
|
|
9305
|
+
{ label: __62("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
|
|
9306
|
+
{ label: __62("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
|
|
9307
|
+
{ label: __62("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
|
|
9212
9308
|
]
|
|
9213
9309
|
},
|
|
9214
9310
|
{
|
|
9215
|
-
label:
|
|
9311
|
+
label: __62("Size", "elementor"),
|
|
9216
9312
|
type: "category",
|
|
9217
9313
|
properties: [
|
|
9218
|
-
{ label:
|
|
9219
|
-
{ label:
|
|
9220
|
-
{ label:
|
|
9221
|
-
{ label:
|
|
9222
|
-
{ label:
|
|
9223
|
-
{ label:
|
|
9314
|
+
{ label: __62("Width", "elementor"), value: "width", isDisabled: true },
|
|
9315
|
+
{ label: __62("Height", "elementor"), value: "height", isDisabled: true },
|
|
9316
|
+
{ label: __62("Max height", "elementor"), value: "max-height", isDisabled: true },
|
|
9317
|
+
{ label: __62("Max width", "elementor"), value: "max-width", isDisabled: true },
|
|
9318
|
+
{ label: __62("Min height", "elementor"), value: "min-height", isDisabled: true },
|
|
9319
|
+
{ label: __62("Min width", "elementor"), value: "min-width", isDisabled: true }
|
|
9224
9320
|
]
|
|
9225
9321
|
},
|
|
9226
9322
|
{
|
|
9227
|
-
label:
|
|
9323
|
+
label: __62("Position", "elementor"),
|
|
9228
9324
|
type: "category",
|
|
9229
9325
|
properties: [
|
|
9230
|
-
{ label:
|
|
9326
|
+
{ label: __62("Top", "elementor"), value: "inset-block-start", isDisabled: true },
|
|
9231
9327
|
{
|
|
9232
|
-
label: isSiteRtl ?
|
|
9328
|
+
label: isSiteRtl ? __62("Right", "elementor") : __62("Left", "elementor"),
|
|
9233
9329
|
value: "inset-inline-start",
|
|
9234
9330
|
isDisabled: true
|
|
9235
9331
|
},
|
|
9236
9332
|
{
|
|
9237
|
-
label: isSiteRtl ?
|
|
9333
|
+
label: isSiteRtl ? __62("Left", "elementor") : __62("Right", "elementor"),
|
|
9238
9334
|
value: "inset-inline-end",
|
|
9239
9335
|
isDisabled: true
|
|
9240
9336
|
},
|
|
9241
|
-
{ label:
|
|
9242
|
-
{ label:
|
|
9337
|
+
{ label: __62("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
|
|
9338
|
+
{ label: __62("Z-index", "elementor"), value: "z-index", isDisabled: true }
|
|
9243
9339
|
]
|
|
9244
9340
|
},
|
|
9245
9341
|
{
|
|
9246
|
-
label:
|
|
9342
|
+
label: __62("Typography", "elementor"),
|
|
9247
9343
|
type: "category",
|
|
9248
9344
|
properties: [
|
|
9249
|
-
{ label:
|
|
9250
|
-
{ label:
|
|
9251
|
-
{ label:
|
|
9252
|
-
{ label:
|
|
9253
|
-
{ label:
|
|
9254
|
-
{ label:
|
|
9255
|
-
{ label:
|
|
9345
|
+
{ label: __62("Font color", "elementor"), value: "color", isDisabled: true },
|
|
9346
|
+
{ label: __62("Font size", "elementor"), value: "font-size", isDisabled: true },
|
|
9347
|
+
{ label: __62("Line height", "elementor"), value: "line-height", isDisabled: true },
|
|
9348
|
+
{ label: __62("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
|
|
9349
|
+
{ label: __62("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
|
|
9350
|
+
{ label: __62("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
|
|
9351
|
+
{ label: __62("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
|
|
9256
9352
|
]
|
|
9257
9353
|
},
|
|
9258
9354
|
{
|
|
9259
|
-
label:
|
|
9355
|
+
label: __62("Background", "elementor"),
|
|
9260
9356
|
type: "category",
|
|
9261
9357
|
properties: [
|
|
9262
|
-
{ label:
|
|
9263
|
-
{ label:
|
|
9264
|
-
{ label:
|
|
9358
|
+
{ label: __62("Background color", "elementor"), value: "background-color", isDisabled: true },
|
|
9359
|
+
{ label: __62("Background position", "elementor"), value: "background-position", isDisabled: true },
|
|
9360
|
+
{ label: __62("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
|
|
9265
9361
|
]
|
|
9266
9362
|
},
|
|
9267
9363
|
{
|
|
9268
|
-
label:
|
|
9364
|
+
label: __62("Border", "elementor"),
|
|
9269
9365
|
type: "category",
|
|
9270
9366
|
properties: [
|
|
9271
|
-
{ label:
|
|
9272
|
-
{ label:
|
|
9273
|
-
{ label:
|
|
9274
|
-
{ label:
|
|
9367
|
+
{ label: __62("Border (all)", "elementor"), value: "border", isDisabled: true },
|
|
9368
|
+
{ label: __62("Border radius", "elementor"), value: "border-radius", isDisabled: true },
|
|
9369
|
+
{ label: __62("Border color", "elementor"), value: "border-color", isDisabled: true },
|
|
9370
|
+
{ label: __62("Border width", "elementor"), value: "border-width", isDisabled: true }
|
|
9275
9371
|
]
|
|
9276
9372
|
},
|
|
9277
9373
|
{
|
|
9278
|
-
label:
|
|
9374
|
+
label: __62("Effects", "elementor"),
|
|
9279
9375
|
type: "category",
|
|
9280
9376
|
properties: [
|
|
9281
|
-
{ label:
|
|
9282
|
-
{ label:
|
|
9283
|
-
{ label:
|
|
9377
|
+
{ label: __62("Opacity", "elementor"), value: "opacity", isDisabled: true },
|
|
9378
|
+
{ label: __62("Transform (all)", "elementor"), value: "transform", isDisabled: true },
|
|
9379
|
+
{ label: __62("Filter (all)", "elementor"), value: "filter", isDisabled: true }
|
|
9284
9380
|
]
|
|
9285
9381
|
}
|
|
9286
9382
|
];
|
|
@@ -9316,13 +9412,13 @@ function subscribeToTransitionEvent() {
|
|
|
9316
9412
|
}
|
|
9317
9413
|
|
|
9318
9414
|
// src/controls/transition-control/transition-selector.tsx
|
|
9319
|
-
import * as
|
|
9320
|
-
import { useMemo as
|
|
9415
|
+
import * as React120 from "react";
|
|
9416
|
+
import { useMemo as useMemo18, useRef as useRef35 } from "react";
|
|
9321
9417
|
import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
|
|
9322
9418
|
import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
|
|
9323
9419
|
import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
|
|
9324
9420
|
import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box31, Popover as Popover8, UnstableTag as UnstableTag3, usePopupState as usePopupState11 } from "@elementor/ui";
|
|
9325
|
-
import { __ as
|
|
9421
|
+
import { __ as __63 } from "@wordpress/i18n";
|
|
9326
9422
|
var toTransitionSelectorValue = (label) => {
|
|
9327
9423
|
for (const category of transitionProperties) {
|
|
9328
9424
|
const property = category.properties.find((prop) => prop.label === label);
|
|
@@ -9363,9 +9459,9 @@ var TransitionSelector = ({
|
|
|
9363
9459
|
const {
|
|
9364
9460
|
key: { value: transitionLabel }
|
|
9365
9461
|
} = value;
|
|
9366
|
-
const defaultRef =
|
|
9462
|
+
const defaultRef = useRef35(null);
|
|
9367
9463
|
const popoverState = usePopupState11({ variant: "popover" });
|
|
9368
|
-
const disabledCategories =
|
|
9464
|
+
const disabledCategories = useMemo18(() => {
|
|
9369
9465
|
return new Set(
|
|
9370
9466
|
transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
|
|
9371
9467
|
);
|
|
@@ -9385,7 +9481,7 @@ var TransitionSelector = ({
|
|
|
9385
9481
|
return [
|
|
9386
9482
|
first,
|
|
9387
9483
|
{
|
|
9388
|
-
label:
|
|
9484
|
+
label: __63("Recently Used", "elementor"),
|
|
9389
9485
|
items: recentItems
|
|
9390
9486
|
},
|
|
9391
9487
|
...rest
|
|
@@ -9409,16 +9505,16 @@ var TransitionSelector = ({
|
|
|
9409
9505
|
left: rect.right + 36
|
|
9410
9506
|
};
|
|
9411
9507
|
};
|
|
9412
|
-
return /* @__PURE__ */
|
|
9508
|
+
return /* @__PURE__ */ React120.createElement(Box31, { ref: defaultRef }, /* @__PURE__ */ React120.createElement(ControlActions, null, /* @__PURE__ */ React120.createElement(
|
|
9413
9509
|
UnstableTag3,
|
|
9414
9510
|
{
|
|
9415
9511
|
variant: "outlined",
|
|
9416
9512
|
label: transitionLabel,
|
|
9417
|
-
endIcon: /* @__PURE__ */
|
|
9513
|
+
endIcon: /* @__PURE__ */ React120.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
|
|
9418
9514
|
...bindTrigger6(popoverState),
|
|
9419
9515
|
fullWidth: true
|
|
9420
9516
|
}
|
|
9421
|
-
)), /* @__PURE__ */
|
|
9517
|
+
)), /* @__PURE__ */ React120.createElement(
|
|
9422
9518
|
Popover8,
|
|
9423
9519
|
{
|
|
9424
9520
|
disablePortal: true,
|
|
@@ -9429,7 +9525,7 @@ var TransitionSelector = ({
|
|
|
9429
9525
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
9430
9526
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
9431
9527
|
},
|
|
9432
|
-
/* @__PURE__ */
|
|
9528
|
+
/* @__PURE__ */ React120.createElement(
|
|
9433
9529
|
ItemSelector,
|
|
9434
9530
|
{
|
|
9435
9531
|
itemsList: getItemList(),
|
|
@@ -9437,10 +9533,10 @@ var TransitionSelector = ({
|
|
|
9437
9533
|
onItemChange: handleTransitionPropertyChange,
|
|
9438
9534
|
onClose: popoverState.close,
|
|
9439
9535
|
sectionWidth: 268,
|
|
9440
|
-
title:
|
|
9536
|
+
title: __63("Transition Property", "elementor"),
|
|
9441
9537
|
icon: VariationsIcon,
|
|
9442
9538
|
disabledItems: includeCurrentValueInOptions(value, disabledItems),
|
|
9443
|
-
categoryItemContentTemplate: (item) => /* @__PURE__ */
|
|
9539
|
+
categoryItemContentTemplate: (item) => /* @__PURE__ */ React120.createElement(
|
|
9444
9540
|
Box31,
|
|
9445
9541
|
{
|
|
9446
9542
|
sx: {
|
|
@@ -9450,13 +9546,13 @@ var TransitionSelector = ({
|
|
|
9450
9546
|
width: "100%"
|
|
9451
9547
|
}
|
|
9452
9548
|
},
|
|
9453
|
-
/* @__PURE__ */
|
|
9454
|
-
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */
|
|
9549
|
+
/* @__PURE__ */ React120.createElement("span", null, item.value),
|
|
9550
|
+
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React120.createElement(PromotionChip, null)
|
|
9455
9551
|
),
|
|
9456
|
-
footer: showPromotion ? /* @__PURE__ */
|
|
9552
|
+
footer: showPromotion ? /* @__PURE__ */ React120.createElement(
|
|
9457
9553
|
PromotionAlert,
|
|
9458
9554
|
{
|
|
9459
|
-
message:
|
|
9555
|
+
message: __63(
|
|
9460
9556
|
"Upgrade to customize transition properties and control effects.",
|
|
9461
9557
|
"elementor"
|
|
9462
9558
|
),
|
|
@@ -9495,8 +9591,8 @@ var areAllPropertiesUsed = (value = []) => {
|
|
|
9495
9591
|
};
|
|
9496
9592
|
var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
9497
9593
|
return {
|
|
9498
|
-
selectionLabel:
|
|
9499
|
-
sizeLabel:
|
|
9594
|
+
selectionLabel: __64("Type", "elementor"),
|
|
9595
|
+
sizeLabel: __64("Duration", "elementor"),
|
|
9500
9596
|
selectionConfig: {
|
|
9501
9597
|
component: TransitionSelector,
|
|
9502
9598
|
props: {
|
|
@@ -9572,7 +9668,7 @@ var getInitialValue = (values = []) => {
|
|
|
9572
9668
|
}
|
|
9573
9669
|
return initialTransitionValue;
|
|
9574
9670
|
};
|
|
9575
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
9671
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React121.createElement(
|
|
9576
9672
|
Alert3,
|
|
9577
9673
|
{
|
|
9578
9674
|
sx: {
|
|
@@ -9580,10 +9676,10 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React120.createElement(
|
|
|
9580
9676
|
gap: 0.5
|
|
9581
9677
|
},
|
|
9582
9678
|
color: "secondary",
|
|
9583
|
-
icon: /* @__PURE__ */
|
|
9679
|
+
icon: /* @__PURE__ */ React121.createElement(InfoCircleFilledIcon3, null)
|
|
9584
9680
|
},
|
|
9585
|
-
/* @__PURE__ */
|
|
9586
|
-
/* @__PURE__ */
|
|
9681
|
+
/* @__PURE__ */ React121.createElement(AlertTitle4, null, __64("Transitions", "elementor")),
|
|
9682
|
+
/* @__PURE__ */ React121.createElement(Box32, { component: "span" }, /* @__PURE__ */ React121.createElement(Typography13, { variant: "body2" }, __64("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
9587
9683
|
);
|
|
9588
9684
|
var TransitionRepeaterControl = createControl(
|
|
9589
9685
|
({
|
|
@@ -9594,11 +9690,11 @@ var TransitionRepeaterControl = createControl(
|
|
|
9594
9690
|
const [recentlyUsedList, setRecentlyUsedList] = useState26([]);
|
|
9595
9691
|
const proInstalled = hasProInstalled2();
|
|
9596
9692
|
const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
9597
|
-
const { allDisabled: disabledItems, proDisabled: proDisabledItems } =
|
|
9693
|
+
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo19(
|
|
9598
9694
|
() => getDisabledItemLabels(value),
|
|
9599
9695
|
[value]
|
|
9600
9696
|
);
|
|
9601
|
-
const allowedTransitionSet =
|
|
9697
|
+
const allowedTransitionSet = useMemo19(() => {
|
|
9602
9698
|
const set = /* @__PURE__ */ new Set();
|
|
9603
9699
|
transitionProperties.forEach((category) => {
|
|
9604
9700
|
category.properties.forEach((prop) => {
|
|
@@ -9624,15 +9720,15 @@ var TransitionRepeaterControl = createControl(
|
|
|
9624
9720
|
useEffect19(() => {
|
|
9625
9721
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
9626
9722
|
}, [recentlyUsedListGetter]);
|
|
9627
|
-
const allPropertiesUsed =
|
|
9723
|
+
const allPropertiesUsed = useMemo19(() => areAllPropertiesUsed(value), [value]);
|
|
9628
9724
|
const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
|
|
9629
|
-
return /* @__PURE__ */
|
|
9725
|
+
return /* @__PURE__ */ React121.createElement(
|
|
9630
9726
|
RepeatableControl,
|
|
9631
9727
|
{
|
|
9632
|
-
label:
|
|
9633
|
-
repeaterLabel:
|
|
9728
|
+
label: __64("Transitions", "elementor"),
|
|
9729
|
+
repeaterLabel: __64("Transitions", "elementor"),
|
|
9634
9730
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
9635
|
-
placeholder:
|
|
9731
|
+
placeholder: __64("Empty Transition", "elementor"),
|
|
9636
9732
|
showDuplicate: false,
|
|
9637
9733
|
showToggle: true,
|
|
9638
9734
|
initialValues: getInitialValue(value),
|
|
@@ -9653,9 +9749,9 @@ var TransitionRepeaterControl = createControl(
|
|
|
9653
9749
|
);
|
|
9654
9750
|
|
|
9655
9751
|
// src/controls/date-time-control.tsx
|
|
9656
|
-
import * as
|
|
9752
|
+
import * as React122 from "react";
|
|
9657
9753
|
import * as dayjs from "dayjs";
|
|
9658
|
-
import { isTransformable as isTransformable2, stringPropTypeUtil as
|
|
9754
|
+
import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
|
|
9659
9755
|
import { DateTimePropTypeUtil } from "@elementor/editor-props";
|
|
9660
9756
|
import { Box as Box33, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
|
|
9661
9757
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
@@ -9701,10 +9797,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9701
9797
|
const base = dayjs.default();
|
|
9702
9798
|
return base.hour(h).minute(m).second(0).millisecond(0);
|
|
9703
9799
|
};
|
|
9704
|
-
return /* @__PURE__ */
|
|
9800
|
+
return /* @__PURE__ */ React122.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React122.createElement(ControlActions, null, /* @__PURE__ */ React122.createElement(LocalizationProvider, null, /* @__PURE__ */ React122.createElement(Box33, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React122.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React122.createElement(
|
|
9705
9801
|
DatePicker,
|
|
9706
9802
|
{
|
|
9707
|
-
value: parseDateValue(
|
|
9803
|
+
value: parseDateValue(stringPropTypeUtil21.extract(value?.date)),
|
|
9708
9804
|
onChange: (v) => handleChange({ date: v }, { bind: "date" }),
|
|
9709
9805
|
disabled: inputDisabled,
|
|
9710
9806
|
slotProps: {
|
|
@@ -9713,10 +9809,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9713
9809
|
openPickerIcon: { fontSize: "tiny" }
|
|
9714
9810
|
}
|
|
9715
9811
|
}
|
|
9716
|
-
)), /* @__PURE__ */
|
|
9812
|
+
)), /* @__PURE__ */ React122.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React122.createElement(
|
|
9717
9813
|
TimePicker,
|
|
9718
9814
|
{
|
|
9719
|
-
value: parseTimeValue(
|
|
9815
|
+
value: parseTimeValue(stringPropTypeUtil21.extract(value?.time)),
|
|
9720
9816
|
onChange: (v) => handleChange({ time: v }, { bind: "time" }),
|
|
9721
9817
|
disabled: inputDisabled,
|
|
9722
9818
|
slotProps: {
|
|
@@ -9729,13 +9825,13 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9729
9825
|
});
|
|
9730
9826
|
|
|
9731
9827
|
// src/controls/date-range-control.tsx
|
|
9732
|
-
import * as
|
|
9828
|
+
import * as React124 from "react";
|
|
9733
9829
|
import { dateRangePropTypeUtil, dateStringPropTypeUtil as dateStringPropTypeUtil2 } from "@elementor/editor-props";
|
|
9734
9830
|
import { FormHelperText as FormHelperText2, Grid as Grid30, Stack as Stack21 } from "@elementor/ui";
|
|
9735
|
-
import { __ as
|
|
9831
|
+
import { __ as __65 } from "@wordpress/i18n";
|
|
9736
9832
|
|
|
9737
9833
|
// src/controls/date-string-control.tsx
|
|
9738
|
-
import * as
|
|
9834
|
+
import * as React123 from "react";
|
|
9739
9835
|
import { dateStringPropTypeUtil } from "@elementor/editor-props";
|
|
9740
9836
|
import { DatePicker as DatePicker2, LocalizationProvider as LocalizationProvider2 } from "@elementor/ui";
|
|
9741
9837
|
|
|
@@ -9794,7 +9890,7 @@ var DateStringControl = createControl(
|
|
|
9794
9890
|
}
|
|
9795
9891
|
setValue(newValue.format(format));
|
|
9796
9892
|
};
|
|
9797
|
-
return /* @__PURE__ */
|
|
9893
|
+
return /* @__PURE__ */ React123.createElement(LocalizationProvider2, null, /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
|
|
9798
9894
|
DatePicker2,
|
|
9799
9895
|
{
|
|
9800
9896
|
value: parseDateString(value ?? ""),
|
|
@@ -9808,8 +9904,8 @@ var DateStringControl = createControl(
|
|
|
9808
9904
|
|
|
9809
9905
|
// src/controls/date-range-control.tsx
|
|
9810
9906
|
var RANGE_LABELS = {
|
|
9811
|
-
min:
|
|
9812
|
-
max:
|
|
9907
|
+
min: __65("Min date", "elementor"),
|
|
9908
|
+
max: __65("Max date", "elementor")
|
|
9813
9909
|
};
|
|
9814
9910
|
var isMaxBeforeMin = (minIso, maxIso) => {
|
|
9815
9911
|
if (!minIso || !maxIso) {
|
|
@@ -9817,38 +9913,38 @@ var isMaxBeforeMin = (minIso, maxIso) => {
|
|
|
9817
9913
|
}
|
|
9818
9914
|
return maxIso < minIso;
|
|
9819
9915
|
};
|
|
9820
|
-
var RANGE_ERROR_MESSAGE =
|
|
9916
|
+
var RANGE_ERROR_MESSAGE = __65("Max date must be on or after Min date", "elementor");
|
|
9821
9917
|
var DateRangeControl = createControl(() => {
|
|
9822
9918
|
const { value, setValue, ...propContext } = useBoundProp(dateRangePropTypeUtil);
|
|
9823
9919
|
const minString = dateStringPropTypeUtil2.extract(value?.min);
|
|
9824
9920
|
const maxString = dateStringPropTypeUtil2.extract(value?.max);
|
|
9825
9921
|
const hasInvalidRange = isMaxBeforeMin(minString, maxString);
|
|
9826
|
-
return /* @__PURE__ */
|
|
9922
|
+
return /* @__PURE__ */ React124.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React124.createElement(Stack21, { gap: 0.75 }, /* @__PURE__ */ React124.createElement(Stack21, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React124.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React124.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React124.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React124.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React124.createElement(
|
|
9827
9923
|
BoundDateStringControl,
|
|
9828
9924
|
{
|
|
9829
9925
|
bind: "min",
|
|
9830
9926
|
ariaLabel: RANGE_LABELS.min,
|
|
9831
9927
|
error: hasInvalidRange
|
|
9832
9928
|
}
|
|
9833
|
-
))), /* @__PURE__ */
|
|
9929
|
+
))), /* @__PURE__ */ React124.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React124.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React124.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React124.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React124.createElement(
|
|
9834
9930
|
BoundDateStringControl,
|
|
9835
9931
|
{
|
|
9836
9932
|
bind: "max",
|
|
9837
9933
|
ariaLabel: RANGE_LABELS.max,
|
|
9838
9934
|
error: hasInvalidRange
|
|
9839
9935
|
}
|
|
9840
|
-
)))), hasInvalidRange && /* @__PURE__ */
|
|
9936
|
+
)))), hasInvalidRange && /* @__PURE__ */ React124.createElement(FormHelperText2, { error: true }, RANGE_ERROR_MESSAGE)));
|
|
9841
9937
|
});
|
|
9842
9938
|
var BoundDateStringControl = ({
|
|
9843
9939
|
bind,
|
|
9844
9940
|
ariaLabel,
|
|
9845
9941
|
error
|
|
9846
9942
|
}) => {
|
|
9847
|
-
return /* @__PURE__ */
|
|
9943
|
+
return /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React124.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
|
|
9848
9944
|
};
|
|
9849
9945
|
|
|
9850
9946
|
// src/controls/time-string-control.tsx
|
|
9851
|
-
import * as
|
|
9947
|
+
import * as React125 from "react";
|
|
9852
9948
|
import { timeStringPropTypeUtil } from "@elementor/editor-props";
|
|
9853
9949
|
import { LocalizationProvider as LocalizationProvider3, TimePicker as TimePicker2 } from "@elementor/ui";
|
|
9854
9950
|
var TimeStringControl = createControl(
|
|
@@ -9876,7 +9972,7 @@ var TimeStringControl = createControl(
|
|
|
9876
9972
|
}
|
|
9877
9973
|
setValue(newValue.format(format));
|
|
9878
9974
|
};
|
|
9879
|
-
return /* @__PURE__ */
|
|
9975
|
+
return /* @__PURE__ */ React125.createElement(LocalizationProvider3, null, /* @__PURE__ */ React125.createElement(ControlActions, null, /* @__PURE__ */ React125.createElement(
|
|
9880
9976
|
TimePicker2,
|
|
9881
9977
|
{
|
|
9882
9978
|
value: parseTimeString(value ?? ""),
|
|
@@ -9889,31 +9985,31 @@ var TimeStringControl = createControl(
|
|
|
9889
9985
|
);
|
|
9890
9986
|
|
|
9891
9987
|
// src/controls/time-range-control.tsx
|
|
9892
|
-
import * as
|
|
9988
|
+
import * as React126 from "react";
|
|
9893
9989
|
import { timeRangePropTypeUtil } from "@elementor/editor-props";
|
|
9894
9990
|
import { Grid as Grid31, Stack as Stack22 } from "@elementor/ui";
|
|
9895
|
-
import { __ as
|
|
9991
|
+
import { __ as __66 } from "@wordpress/i18n";
|
|
9896
9992
|
var RANGE_LABELS2 = {
|
|
9897
|
-
min:
|
|
9898
|
-
max:
|
|
9993
|
+
min: __66("Start time", "elementor"),
|
|
9994
|
+
max: __66("End time", "elementor")
|
|
9899
9995
|
};
|
|
9900
9996
|
var TimeRangeControl = createControl(() => {
|
|
9901
9997
|
const { value, setValue, ...propContext } = useBoundProp(timeRangePropTypeUtil);
|
|
9902
|
-
return /* @__PURE__ */
|
|
9998
|
+
return /* @__PURE__ */ React126.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React126.createElement(Stack22, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React126.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React126.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React126.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React126.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React126.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React126.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React126.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React126.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
|
|
9903
9999
|
});
|
|
9904
10000
|
var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
9905
|
-
return /* @__PURE__ */
|
|
10001
|
+
return /* @__PURE__ */ React126.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React126.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
|
|
9906
10002
|
};
|
|
9907
10003
|
|
|
9908
10004
|
// src/controls/inline-editing-control.tsx
|
|
9909
|
-
import * as
|
|
10005
|
+
import * as React130 from "react";
|
|
9910
10006
|
import { useCallback as useCallback4, useState as useState28 } from "react";
|
|
9911
10007
|
import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
|
|
9912
10008
|
import { Box as Box36, Stack as Stack24 } from "@elementor/ui";
|
|
9913
10009
|
|
|
9914
10010
|
// src/components/inline-editor.tsx
|
|
9915
|
-
import * as
|
|
9916
|
-
import { useEffect as useEffect20, useRef as
|
|
10011
|
+
import * as React127 from "react";
|
|
10012
|
+
import { useEffect as useEffect20, useRef as useRef36 } from "react";
|
|
9917
10013
|
import { Box as Box34 } from "@elementor/ui";
|
|
9918
10014
|
import Bold from "@tiptap/extension-bold";
|
|
9919
10015
|
import Document from "@tiptap/extension-document";
|
|
@@ -9930,7 +10026,7 @@ import Underline from "@tiptap/extension-underline";
|
|
|
9930
10026
|
import { EditorContent, useEditor } from "@tiptap/react";
|
|
9931
10027
|
|
|
9932
10028
|
// src/utils/inline-editing.ts
|
|
9933
|
-
import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as
|
|
10029
|
+
import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
|
|
9934
10030
|
function isEmpty(value = "") {
|
|
9935
10031
|
if (!value) {
|
|
9936
10032
|
return true;
|
|
@@ -9952,14 +10048,14 @@ function extractInlineHtmlContent(propValue) {
|
|
|
9952
10048
|
return escapedHtmlPropTypeUtil.extract(propValue) ?? "";
|
|
9953
10049
|
}
|
|
9954
10050
|
const htmlV3 = htmlV3PropTypeUtil.extract(propValue);
|
|
9955
|
-
return
|
|
10051
|
+
return stringPropTypeUtil22.extract(htmlV3?.content ?? null) ?? "";
|
|
9956
10052
|
}
|
|
9957
10053
|
|
|
9958
10054
|
// src/components/inline-editor.tsx
|
|
9959
10055
|
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
9960
10056
|
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
9961
10057
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
9962
|
-
var InlineEditor =
|
|
10058
|
+
var InlineEditor = React127.forwardRef((props, ref) => {
|
|
9963
10059
|
const {
|
|
9964
10060
|
value,
|
|
9965
10061
|
setValue,
|
|
@@ -9976,8 +10072,8 @@ var InlineEditor = React126.forwardRef((props, ref) => {
|
|
|
9976
10072
|
onSelectionEnd,
|
|
9977
10073
|
mountElement = null
|
|
9978
10074
|
} = props;
|
|
9979
|
-
const containerRef =
|
|
9980
|
-
const onBlurRef =
|
|
10075
|
+
const containerRef = useRef36(null);
|
|
10076
|
+
const onBlurRef = useRef36(onBlur);
|
|
9981
10077
|
onBlurRef.current = onBlur;
|
|
9982
10078
|
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
9983
10079
|
const onUpdate = ({ editor: updatedEditor }) => {
|
|
@@ -10072,10 +10168,10 @@ var InlineEditor = React126.forwardRef((props, ref) => {
|
|
|
10072
10168
|
if (mountElement) {
|
|
10073
10169
|
return null;
|
|
10074
10170
|
}
|
|
10075
|
-
return /* @__PURE__ */
|
|
10171
|
+
return /* @__PURE__ */ React127.createElement(Box34, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React127.createElement(EditorContent, { ref, editor }));
|
|
10076
10172
|
});
|
|
10077
10173
|
var useOnUpdate = (callback, dependencies) => {
|
|
10078
|
-
const hasMounted =
|
|
10174
|
+
const hasMounted = useRef36(false);
|
|
10079
10175
|
useEffect20(() => {
|
|
10080
10176
|
if (hasMounted.current) {
|
|
10081
10177
|
callback();
|
|
@@ -10086,8 +10182,8 @@ var useOnUpdate = (callback, dependencies) => {
|
|
|
10086
10182
|
};
|
|
10087
10183
|
|
|
10088
10184
|
// src/components/inline-editor-toolbar.tsx
|
|
10089
|
-
import * as
|
|
10090
|
-
import { useEffect as useEffect22, useMemo as
|
|
10185
|
+
import * as React129 from "react";
|
|
10186
|
+
import { useEffect as useEffect22, useMemo as useMemo20, useRef as useRef38, useState as useState27 } from "react";
|
|
10091
10187
|
import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
|
|
10092
10188
|
import {
|
|
10093
10189
|
BoldIcon,
|
|
@@ -10109,14 +10205,14 @@ import {
|
|
|
10109
10205
|
usePopupState as usePopupState12
|
|
10110
10206
|
} from "@elementor/ui";
|
|
10111
10207
|
import { useEditorState } from "@tiptap/react";
|
|
10112
|
-
import { __ as
|
|
10208
|
+
import { __ as __68 } from "@wordpress/i18n";
|
|
10113
10209
|
|
|
10114
10210
|
// src/components/url-popover.tsx
|
|
10115
|
-
import * as
|
|
10116
|
-
import { useEffect as useEffect21, useRef as
|
|
10211
|
+
import * as React128 from "react";
|
|
10212
|
+
import { useEffect as useEffect21, useRef as useRef37 } from "react";
|
|
10117
10213
|
import { ExternalLinkIcon } from "@elementor/icons";
|
|
10118
|
-
import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack23, TextField as
|
|
10119
|
-
import { __ as
|
|
10214
|
+
import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack23, TextField as TextField12, ToggleButton as ToggleButton3, Tooltip as Tooltip13 } from "@elementor/ui";
|
|
10215
|
+
import { __ as __67 } from "@wordpress/i18n";
|
|
10120
10216
|
var UrlPopover = ({
|
|
10121
10217
|
popupState,
|
|
10122
10218
|
restoreValue,
|
|
@@ -10126,7 +10222,7 @@ var UrlPopover = ({
|
|
|
10126
10222
|
openInNewTab,
|
|
10127
10223
|
onToggleNewTab
|
|
10128
10224
|
}) => {
|
|
10129
|
-
const inputRef =
|
|
10225
|
+
const inputRef = useRef37(null);
|
|
10130
10226
|
useEffect21(() => {
|
|
10131
10227
|
if (popupState.isOpen) {
|
|
10132
10228
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
@@ -10136,7 +10232,7 @@ var UrlPopover = ({
|
|
|
10136
10232
|
restoreValue();
|
|
10137
10233
|
popupState.close();
|
|
10138
10234
|
};
|
|
10139
|
-
return /* @__PURE__ */
|
|
10235
|
+
return /* @__PURE__ */ React128.createElement(
|
|
10140
10236
|
Popover9,
|
|
10141
10237
|
{
|
|
10142
10238
|
slotProps: {
|
|
@@ -10147,30 +10243,30 @@ var UrlPopover = ({
|
|
|
10147
10243
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
10148
10244
|
onClose: handleClose
|
|
10149
10245
|
},
|
|
10150
|
-
/* @__PURE__ */
|
|
10151
|
-
|
|
10246
|
+
/* @__PURE__ */ React128.createElement(Stack23, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React128.createElement(
|
|
10247
|
+
TextField12,
|
|
10152
10248
|
{
|
|
10153
10249
|
value,
|
|
10154
10250
|
onChange,
|
|
10155
10251
|
size: "tiny",
|
|
10156
10252
|
fullWidth: true,
|
|
10157
|
-
placeholder:
|
|
10253
|
+
placeholder: __67("Type a URL", "elementor"),
|
|
10158
10254
|
inputProps: { ref: inputRef },
|
|
10159
10255
|
color: "secondary",
|
|
10160
10256
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
10161
10257
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
10162
10258
|
}
|
|
10163
|
-
), /* @__PURE__ */
|
|
10259
|
+
), /* @__PURE__ */ React128.createElement(Tooltip13, { title: __67("Open in a new tab", "elementor") }, /* @__PURE__ */ React128.createElement(
|
|
10164
10260
|
ToggleButton3,
|
|
10165
10261
|
{
|
|
10166
10262
|
size: "tiny",
|
|
10167
10263
|
value: "newTab",
|
|
10168
10264
|
selected: openInNewTab,
|
|
10169
10265
|
onClick: onToggleNewTab,
|
|
10170
|
-
"aria-label":
|
|
10266
|
+
"aria-label": __67("Open in a new tab", "elementor"),
|
|
10171
10267
|
sx: { borderRadius: "8px" }
|
|
10172
10268
|
},
|
|
10173
|
-
/* @__PURE__ */
|
|
10269
|
+
/* @__PURE__ */ React128.createElement(ExternalLinkIcon, { fontSize: "tiny" })
|
|
10174
10270
|
)))
|
|
10175
10271
|
);
|
|
10176
10272
|
};
|
|
@@ -10184,14 +10280,14 @@ var InlineEditorToolbar = ({
|
|
|
10184
10280
|
}) => {
|
|
10185
10281
|
const [urlValue, setUrlValue] = useState27("");
|
|
10186
10282
|
const [openInNewTab, setOpenInNewTab] = useState27(false);
|
|
10187
|
-
const toolbarRef =
|
|
10283
|
+
const toolbarRef = useRef38(null);
|
|
10188
10284
|
const linkPopupState = usePopupState12({ variant: "popover" });
|
|
10189
10285
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
10190
10286
|
const editorState = useEditorState({
|
|
10191
10287
|
editor,
|
|
10192
10288
|
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
10193
10289
|
});
|
|
10194
|
-
const formatButtonsList =
|
|
10290
|
+
const formatButtonsList = useMemo20(() => {
|
|
10195
10291
|
const buttons = Object.values(formatButtons);
|
|
10196
10292
|
if (isElementClickable) {
|
|
10197
10293
|
return buttons.filter((button) => button.action !== "link");
|
|
@@ -10233,7 +10329,7 @@ var InlineEditorToolbar = ({
|
|
|
10233
10329
|
editor?.commands?.focus();
|
|
10234
10330
|
}
|
|
10235
10331
|
}, [editor, inControlPanel]);
|
|
10236
|
-
return /* @__PURE__ */
|
|
10332
|
+
return /* @__PURE__ */ React129.createElement(
|
|
10237
10333
|
Box35,
|
|
10238
10334
|
{
|
|
10239
10335
|
ref: toolbarRef,
|
|
@@ -10267,8 +10363,8 @@ var InlineEditorToolbar = ({
|
|
|
10267
10363
|
}
|
|
10268
10364
|
}
|
|
10269
10365
|
},
|
|
10270
|
-
/* @__PURE__ */
|
|
10271
|
-
/* @__PURE__ */
|
|
10366
|
+
/* @__PURE__ */ React129.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React129.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
10367
|
+
/* @__PURE__ */ React129.createElement(
|
|
10272
10368
|
ToggleButtonGroup2,
|
|
10273
10369
|
{
|
|
10274
10370
|
value: editorState,
|
|
@@ -10298,7 +10394,7 @@ var InlineEditorToolbar = ({
|
|
|
10298
10394
|
}
|
|
10299
10395
|
}
|
|
10300
10396
|
},
|
|
10301
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
10397
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React129.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React129.createElement(
|
|
10302
10398
|
ToggleButton4,
|
|
10303
10399
|
{
|
|
10304
10400
|
value: button.action,
|
|
@@ -10316,7 +10412,7 @@ var InlineEditorToolbar = ({
|
|
|
10316
10412
|
button.icon
|
|
10317
10413
|
)))
|
|
10318
10414
|
),
|
|
10319
|
-
/* @__PURE__ */
|
|
10415
|
+
/* @__PURE__ */ React129.createElement(
|
|
10320
10416
|
UrlPopover,
|
|
10321
10417
|
{
|
|
10322
10418
|
popupState: linkPopupState,
|
|
@@ -10339,64 +10435,64 @@ var checkIfElementIsClickable = (elementId) => {
|
|
|
10339
10435
|
};
|
|
10340
10436
|
var toolbarButtons = {
|
|
10341
10437
|
clear: {
|
|
10342
|
-
label:
|
|
10343
|
-
icon: /* @__PURE__ */
|
|
10438
|
+
label: __68("Clear", "elementor"),
|
|
10439
|
+
icon: /* @__PURE__ */ React129.createElement(MinusIcon2, { fontSize: "tiny" }),
|
|
10344
10440
|
action: "clear",
|
|
10345
10441
|
method: (editor) => {
|
|
10346
10442
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
10347
10443
|
}
|
|
10348
10444
|
},
|
|
10349
10445
|
bold: {
|
|
10350
|
-
label:
|
|
10351
|
-
icon: /* @__PURE__ */
|
|
10446
|
+
label: __68("Bold", "elementor"),
|
|
10447
|
+
icon: /* @__PURE__ */ React129.createElement(BoldIcon, { fontSize: "tiny" }),
|
|
10352
10448
|
action: "bold",
|
|
10353
10449
|
method: (editor) => {
|
|
10354
10450
|
editor.chain().focus().toggleBold().run();
|
|
10355
10451
|
}
|
|
10356
10452
|
},
|
|
10357
10453
|
italic: {
|
|
10358
|
-
label:
|
|
10359
|
-
icon: /* @__PURE__ */
|
|
10454
|
+
label: __68("Italic", "elementor"),
|
|
10455
|
+
icon: /* @__PURE__ */ React129.createElement(ItalicIcon, { fontSize: "tiny" }),
|
|
10360
10456
|
action: "italic",
|
|
10361
10457
|
method: (editor) => {
|
|
10362
10458
|
editor.chain().focus().toggleItalic().run();
|
|
10363
10459
|
}
|
|
10364
10460
|
},
|
|
10365
10461
|
underline: {
|
|
10366
|
-
label:
|
|
10367
|
-
icon: /* @__PURE__ */
|
|
10462
|
+
label: __68("Underline", "elementor"),
|
|
10463
|
+
icon: /* @__PURE__ */ React129.createElement(UnderlineIcon, { fontSize: "tiny" }),
|
|
10368
10464
|
action: "underline",
|
|
10369
10465
|
method: (editor) => {
|
|
10370
10466
|
editor.chain().focus().toggleUnderline().run();
|
|
10371
10467
|
}
|
|
10372
10468
|
},
|
|
10373
10469
|
strike: {
|
|
10374
|
-
label:
|
|
10375
|
-
icon: /* @__PURE__ */
|
|
10470
|
+
label: __68("Strikethrough", "elementor"),
|
|
10471
|
+
icon: /* @__PURE__ */ React129.createElement(StrikethroughIcon, { fontSize: "tiny" }),
|
|
10376
10472
|
action: "strike",
|
|
10377
10473
|
method: (editor) => {
|
|
10378
10474
|
editor.chain().focus().toggleStrike().run();
|
|
10379
10475
|
}
|
|
10380
10476
|
},
|
|
10381
10477
|
superscript: {
|
|
10382
|
-
label:
|
|
10383
|
-
icon: /* @__PURE__ */
|
|
10478
|
+
label: __68("Superscript", "elementor"),
|
|
10479
|
+
icon: /* @__PURE__ */ React129.createElement(SuperscriptIcon, { fontSize: "tiny" }),
|
|
10384
10480
|
action: "superscript",
|
|
10385
10481
|
method: (editor) => {
|
|
10386
10482
|
editor.chain().focus().toggleSuperscript().run();
|
|
10387
10483
|
}
|
|
10388
10484
|
},
|
|
10389
10485
|
subscript: {
|
|
10390
|
-
label:
|
|
10391
|
-
icon: /* @__PURE__ */
|
|
10486
|
+
label: __68("Subscript", "elementor"),
|
|
10487
|
+
icon: /* @__PURE__ */ React129.createElement(SubscriptIcon, { fontSize: "tiny" }),
|
|
10392
10488
|
action: "subscript",
|
|
10393
10489
|
method: (editor) => {
|
|
10394
10490
|
editor.chain().focus().toggleSubscript().run();
|
|
10395
10491
|
}
|
|
10396
10492
|
},
|
|
10397
10493
|
link: {
|
|
10398
|
-
label:
|
|
10399
|
-
icon: /* @__PURE__ */
|
|
10494
|
+
label: __68("Link", "elementor"),
|
|
10495
|
+
icon: /* @__PURE__ */ React129.createElement(LinkIcon3, { fontSize: "tiny" }),
|
|
10400
10496
|
action: "link",
|
|
10401
10497
|
method: null
|
|
10402
10498
|
}
|
|
@@ -10418,7 +10514,7 @@ var InlineEditingControl = createControl(
|
|
|
10418
10514
|
},
|
|
10419
10515
|
[setValue]
|
|
10420
10516
|
);
|
|
10421
|
-
const editorField = /* @__PURE__ */
|
|
10517
|
+
const editorField = /* @__PURE__ */ React130.createElement(ControlActions, null, /* @__PURE__ */ React130.createElement(Box36, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React130.createElement(
|
|
10422
10518
|
InlineEditorToolbar,
|
|
10423
10519
|
{
|
|
10424
10520
|
editor,
|
|
@@ -10431,7 +10527,7 @@ var InlineEditingControl = createControl(
|
|
|
10431
10527
|
}),
|
|
10432
10528
|
inControlPanel: true
|
|
10433
10529
|
}
|
|
10434
|
-
), /* @__PURE__ */
|
|
10530
|
+
), /* @__PURE__ */ React130.createElement(
|
|
10435
10531
|
Box36,
|
|
10436
10532
|
{
|
|
10437
10533
|
sx: (theme) => ({
|
|
@@ -10476,7 +10572,7 @@ var InlineEditingControl = createControl(
|
|
|
10476
10572
|
...attributes,
|
|
10477
10573
|
...props
|
|
10478
10574
|
},
|
|
10479
|
-
/* @__PURE__ */
|
|
10575
|
+
/* @__PURE__ */ React130.createElement(
|
|
10480
10576
|
InlineEditor,
|
|
10481
10577
|
{
|
|
10482
10578
|
value: content,
|
|
@@ -10493,22 +10589,22 @@ var InlineEditingControl = createControl(
|
|
|
10493
10589
|
if (!promotion) {
|
|
10494
10590
|
return editorField;
|
|
10495
10591
|
}
|
|
10496
|
-
return /* @__PURE__ */
|
|
10592
|
+
return /* @__PURE__ */ React130.createElement(Stack24, { gap: 1 }, /* @__PURE__ */ React130.createElement(Stack24, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React130.createElement(ControlLabel, null, label), /* @__PURE__ */ React130.createElement(ImageOptimizeTrigger, { promotion })), editorField);
|
|
10497
10593
|
}
|
|
10498
10594
|
);
|
|
10499
10595
|
|
|
10500
10596
|
// src/controls/email-form-action-control/index.tsx
|
|
10501
|
-
import * as
|
|
10597
|
+
import * as React134 from "react";
|
|
10502
10598
|
import { emailsPropTypeUtil } from "@elementor/editor-props";
|
|
10503
10599
|
import { CollapsibleContent } from "@elementor/editor-ui";
|
|
10504
10600
|
import { Box as Box37, Divider as Divider7, Stack as Stack26 } from "@elementor/ui";
|
|
10505
|
-
import { __ as
|
|
10601
|
+
import { __ as __70 } from "@wordpress/i18n";
|
|
10506
10602
|
|
|
10507
10603
|
// src/controls/email-form-action-control/fields.tsx
|
|
10508
|
-
import * as
|
|
10604
|
+
import * as React133 from "react";
|
|
10509
10605
|
import { InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
|
|
10510
10606
|
import { Grid as Grid34, Stack as Stack25 } from "@elementor/ui";
|
|
10511
|
-
import { __ as
|
|
10607
|
+
import { __ as __69 } from "@wordpress/i18n";
|
|
10512
10608
|
|
|
10513
10609
|
// src/hooks/use-form-field-suggestions.ts
|
|
10514
10610
|
import {
|
|
@@ -10517,7 +10613,7 @@ import {
|
|
|
10517
10613
|
getSelectedElements as getSelectedElements3,
|
|
10518
10614
|
getWidgetsCache
|
|
10519
10615
|
} from "@elementor/editor-elements";
|
|
10520
|
-
import { stringPropTypeUtil as
|
|
10616
|
+
import { stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
|
|
10521
10617
|
import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
|
|
10522
10618
|
var FORM_FIELD_WIDGET_TYPES = [
|
|
10523
10619
|
"e-form-input",
|
|
@@ -10534,7 +10630,7 @@ function isFormFieldWidgetType(widgetType) {
|
|
|
10534
10630
|
return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
|
|
10535
10631
|
}
|
|
10536
10632
|
function extractStringPropValue(value) {
|
|
10537
|
-
return
|
|
10633
|
+
return stringPropTypeUtil23.extract(value);
|
|
10538
10634
|
}
|
|
10539
10635
|
function getSettingWithDefault(child, widgetType, key) {
|
|
10540
10636
|
const fromGet = child.settings.get(key);
|
|
@@ -10598,10 +10694,10 @@ function useFormFieldSuggestions(options) {
|
|
|
10598
10694
|
}
|
|
10599
10695
|
|
|
10600
10696
|
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
10601
|
-
import * as
|
|
10602
|
-
import { useMemo as
|
|
10603
|
-
import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as
|
|
10604
|
-
import { Autocomplete as
|
|
10697
|
+
import * as React131 from "react";
|
|
10698
|
+
import { useMemo as useMemo21, useState as useState29 } from "react";
|
|
10699
|
+
import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil24 } from "@elementor/editor-props";
|
|
10700
|
+
import { Autocomplete as Autocomplete5, Grid as Grid32, TextField as TextField13 } from "@elementor/ui";
|
|
10605
10701
|
|
|
10606
10702
|
// src/controls/email-form-action-control/utils.ts
|
|
10607
10703
|
import { z } from "@elementor/schema";
|
|
@@ -10639,8 +10735,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10639
10735
|
const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
|
|
10640
10736
|
const [inputValue, setInputValue] = useState29("");
|
|
10641
10737
|
const items2 = value || [];
|
|
10642
|
-
const selectedValues = items2.map((item) =>
|
|
10643
|
-
const suggestionOptions =
|
|
10738
|
+
const selectedValues = items2.map((item) => stringPropTypeUtil24.extract(item)).filter((val) => val !== null);
|
|
10739
|
+
const suggestionOptions = useMemo21(
|
|
10644
10740
|
() => suggestions.map((suggestion) => `[${suggestion.value}]`),
|
|
10645
10741
|
[suggestions]
|
|
10646
10742
|
);
|
|
@@ -10649,7 +10745,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10649
10745
|
if (!address || selectedValues.includes(address) || !isValidRecipient(address)) {
|
|
10650
10746
|
return;
|
|
10651
10747
|
}
|
|
10652
|
-
setValue([...items2,
|
|
10748
|
+
setValue([...items2, stringPropTypeUtil24.create(address)]);
|
|
10653
10749
|
setInputValue("");
|
|
10654
10750
|
};
|
|
10655
10751
|
const handleChange = (_, newValue) => {
|
|
@@ -10659,7 +10755,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10659
10755
|
if (!address || !isValidRecipient(address)) {
|
|
10660
10756
|
continue;
|
|
10661
10757
|
}
|
|
10662
|
-
updated.push(
|
|
10758
|
+
updated.push(stringPropTypeUtil24.create(address));
|
|
10663
10759
|
}
|
|
10664
10760
|
setValue(updated);
|
|
10665
10761
|
setInputValue("");
|
|
@@ -10675,8 +10771,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10675
10771
|
tryAddChip(inputValue);
|
|
10676
10772
|
}
|
|
10677
10773
|
};
|
|
10678
|
-
return /* @__PURE__ */
|
|
10679
|
-
|
|
10774
|
+
return /* @__PURE__ */ React131.createElement(ControlActions, null, /* @__PURE__ */ React131.createElement(
|
|
10775
|
+
Autocomplete5,
|
|
10680
10776
|
{
|
|
10681
10777
|
fullWidth: true,
|
|
10682
10778
|
multiple: true,
|
|
@@ -10700,17 +10796,17 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10700
10796
|
onBlur: handleBlur,
|
|
10701
10797
|
getOptionLabel: (option) => option,
|
|
10702
10798
|
isOptionEqualToValue: (option, val) => option === val,
|
|
10703
|
-
renderInput: (params) => /* @__PURE__ */
|
|
10704
|
-
renderTags: (tagValues, getTagProps) => /* @__PURE__ */
|
|
10799
|
+
renderInput: (params) => /* @__PURE__ */ React131.createElement(TextField13, { ...params, placeholder, onKeyDown: handleKeyDown }),
|
|
10800
|
+
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React131.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
|
|
10705
10801
|
}
|
|
10706
10802
|
));
|
|
10707
10803
|
});
|
|
10708
|
-
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */
|
|
10804
|
+
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React131.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React131.createElement(Grid32, { item: true }, /* @__PURE__ */ React131.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React131.createElement(Grid32, { item: true }, /* @__PURE__ */ React131.createElement(EmailChipsControl, { placeholder, suggestions })));
|
|
10709
10805
|
|
|
10710
10806
|
// src/controls/email-form-action-control/email-field.tsx
|
|
10711
|
-
import * as
|
|
10807
|
+
import * as React132 from "react";
|
|
10712
10808
|
import { Grid as Grid33 } from "@elementor/ui";
|
|
10713
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
10809
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React132.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(Grid33, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React132.createElement(Grid33, { item: true }, /* @__PURE__ */ React132.createElement(TextControl, { placeholder }))));
|
|
10714
10810
|
|
|
10715
10811
|
// src/controls/email-form-action-control/fields.tsx
|
|
10716
10812
|
var FieldValueMentionField = ({
|
|
@@ -10719,88 +10815,88 @@ var FieldValueMentionField = ({
|
|
|
10719
10815
|
placeholder
|
|
10720
10816
|
}) => {
|
|
10721
10817
|
const suggestions = useFormFieldSuggestions();
|
|
10722
|
-
return /* @__PURE__ */
|
|
10818
|
+
return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React133.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(MentionTextAreaControl, { suggestions, rows: 1, placeholder }))));
|
|
10723
10819
|
};
|
|
10724
10820
|
var SendToField = ({ placeholder }) => {
|
|
10725
10821
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10726
|
-
return /* @__PURE__ */
|
|
10822
|
+
return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React133.createElement(Stack25, { gap: 0.5 }, /* @__PURE__ */ React133.createElement(
|
|
10727
10823
|
EmailChipsField,
|
|
10728
10824
|
{
|
|
10729
|
-
fieldLabel:
|
|
10825
|
+
fieldLabel: __69("Send to", "elementor"),
|
|
10730
10826
|
placeholder,
|
|
10731
10827
|
suggestions
|
|
10732
10828
|
}
|
|
10733
|
-
), shouldShowMentionsInfo() && /* @__PURE__ */
|
|
10829
|
+
), shouldShowMentionsInfo() && /* @__PURE__ */ React133.createElement(InfoAlert2, null, __69("Type @ or an email field name to insert its submitted value.", "elementor"))));
|
|
10734
10830
|
};
|
|
10735
|
-
var SubjectField = () => /* @__PURE__ */
|
|
10831
|
+
var SubjectField = () => /* @__PURE__ */ React133.createElement(
|
|
10736
10832
|
FieldValueMentionField,
|
|
10737
10833
|
{
|
|
10738
10834
|
bind: "subject",
|
|
10739
|
-
label:
|
|
10740
|
-
placeholder:
|
|
10835
|
+
label: __69("Email subject", "elementor"),
|
|
10836
|
+
placeholder: __69("New form submission", "elementor")
|
|
10741
10837
|
}
|
|
10742
10838
|
);
|
|
10743
10839
|
var MessageField = () => {
|
|
10744
10840
|
const suggestions = useFormFieldSuggestions();
|
|
10745
|
-
return /* @__PURE__ */
|
|
10841
|
+
return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React133.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(ControlFormLabel, null, __69("Message", "elementor"))), /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __69(
|
|
10746
10842
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
10747
10843
|
"elementor"
|
|
10748
|
-
) :
|
|
10844
|
+
) : __69("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
10749
10845
|
};
|
|
10750
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
10846
|
+
var FromEmailField = () => /* @__PURE__ */ React133.createElement(
|
|
10751
10847
|
EmailField,
|
|
10752
10848
|
{
|
|
10753
10849
|
bind: "from",
|
|
10754
|
-
label:
|
|
10755
|
-
placeholder:
|
|
10850
|
+
label: __69("From email", "elementor"),
|
|
10851
|
+
placeholder: __69("What email should appear as the sender?", "elementor")
|
|
10756
10852
|
}
|
|
10757
10853
|
);
|
|
10758
|
-
var FromNameField = () => /* @__PURE__ */
|
|
10854
|
+
var FromNameField = () => /* @__PURE__ */ React133.createElement(
|
|
10759
10855
|
FieldValueMentionField,
|
|
10760
10856
|
{
|
|
10761
10857
|
bind: "from-name",
|
|
10762
|
-
label:
|
|
10763
|
-
placeholder:
|
|
10858
|
+
label: __69("From name", "elementor"),
|
|
10859
|
+
placeholder: __69("What name should appear as the sender?", "elementor")
|
|
10764
10860
|
}
|
|
10765
10861
|
);
|
|
10766
10862
|
var ReplyToField = () => {
|
|
10767
10863
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10768
|
-
return /* @__PURE__ */
|
|
10864
|
+
return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React133.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(ControlFormLabel, null, __69("Reply-to", "elementor"))), /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(
|
|
10769
10865
|
MentionTextAreaControl,
|
|
10770
10866
|
{
|
|
10771
10867
|
suggestions: emailSuggestions,
|
|
10772
10868
|
rows: 1,
|
|
10773
10869
|
triggerPosition: "start",
|
|
10774
|
-
placeholder:
|
|
10870
|
+
placeholder: __69("You can type @ to insert an email field", "elementor")
|
|
10775
10871
|
}
|
|
10776
10872
|
))));
|
|
10777
10873
|
};
|
|
10778
10874
|
var CcField = () => {
|
|
10779
10875
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10780
|
-
return /* @__PURE__ */
|
|
10876
|
+
return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React133.createElement(EmailChipsField, { fieldLabel: __69("Cc", "elementor"), suggestions }));
|
|
10781
10877
|
};
|
|
10782
10878
|
var BccField = () => {
|
|
10783
10879
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10784
|
-
return /* @__PURE__ */
|
|
10880
|
+
return /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React133.createElement(EmailChipsField, { fieldLabel: __69("Bcc", "elementor"), suggestions }));
|
|
10785
10881
|
};
|
|
10786
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
10882
|
+
var MetaDataField = () => /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React133.createElement(Stack25, { gap: 0.5 }, /* @__PURE__ */ React133.createElement(ControlFormLabel, null, __69("Metadata", "elementor")), /* @__PURE__ */ React133.createElement(
|
|
10787
10883
|
ChipsControl,
|
|
10788
10884
|
{
|
|
10789
10885
|
options: [
|
|
10790
|
-
{ label:
|
|
10791
|
-
{ label:
|
|
10792
|
-
{ label:
|
|
10793
|
-
{ label:
|
|
10794
|
-
{ label:
|
|
10886
|
+
{ label: __69("Date", "elementor"), value: "date" },
|
|
10887
|
+
{ label: __69("Time", "elementor"), value: "time" },
|
|
10888
|
+
{ label: __69("Page URL", "elementor"), value: "page-url" },
|
|
10889
|
+
{ label: __69("User agent", "elementor"), value: "user-agent" },
|
|
10890
|
+
{ label: __69("Credit", "elementor"), value: "credit" }
|
|
10795
10891
|
]
|
|
10796
10892
|
}
|
|
10797
10893
|
)));
|
|
10798
|
-
var SendAsField = () => /* @__PURE__ */
|
|
10894
|
+
var SendAsField = () => /* @__PURE__ */ React133.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React133.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(ControlFormLabel, null, __69("Send as", "elementor"))), /* @__PURE__ */ React133.createElement(Grid34, { item: true }, /* @__PURE__ */ React133.createElement(
|
|
10799
10895
|
SelectControl,
|
|
10800
10896
|
{
|
|
10801
10897
|
options: [
|
|
10802
|
-
{ label:
|
|
10803
|
-
{ label:
|
|
10898
|
+
{ label: __69("HTML", "elementor"), value: "html" },
|
|
10899
|
+
{ label: __69("Plain Text", "elementor"), value: "plain" }
|
|
10804
10900
|
]
|
|
10805
10901
|
}
|
|
10806
10902
|
))));
|
|
@@ -10809,27 +10905,27 @@ var SendAsField = () => /* @__PURE__ */ React132.createElement(PropKeyProvider,
|
|
|
10809
10905
|
var EmailFormActionControl = createControl(
|
|
10810
10906
|
({ toPlaceholder, label }) => {
|
|
10811
10907
|
const { value, setValue, ...propContext } = useBoundProp(emailsPropTypeUtil);
|
|
10812
|
-
return /* @__PURE__ */
|
|
10908
|
+
return /* @__PURE__ */ React134.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React134.createElement(Stack26, { gap: 2 }, /* @__PURE__ */ React134.createElement(ControlLabel, null, label ? label + " " + __70("settings", "elementor") : __70("Email settings", "elementor")), /* @__PURE__ */ React134.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React134.createElement(SubjectField, null), /* @__PURE__ */ React134.createElement(MessageField, null), /* @__PURE__ */ React134.createElement(FromEmailField, null), /* @__PURE__ */ React134.createElement(AdvancedSettings, null)));
|
|
10813
10909
|
}
|
|
10814
10910
|
);
|
|
10815
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
10911
|
+
var AdvancedSettings = () => /* @__PURE__ */ React134.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React134.createElement(Box37, { sx: { pt: 2 } }, /* @__PURE__ */ React134.createElement(Stack26, { gap: 2 }, /* @__PURE__ */ React134.createElement(FromNameField, null), /* @__PURE__ */ React134.createElement(ReplyToField, null), /* @__PURE__ */ React134.createElement(CcField, null), /* @__PURE__ */ React134.createElement(BccField, null), /* @__PURE__ */ React134.createElement(Divider7, null), /* @__PURE__ */ React134.createElement(MetaDataField, null), /* @__PURE__ */ React134.createElement(SendAsField, null))));
|
|
10816
10912
|
|
|
10817
10913
|
// src/controls/attachment-type-control.tsx
|
|
10818
|
-
import * as
|
|
10914
|
+
import * as React135 from "react";
|
|
10819
10915
|
import { InfoAlert as InfoAlert3 } from "@elementor/editor-ui";
|
|
10820
10916
|
import { Grid as Grid35 } from "@elementor/ui";
|
|
10821
|
-
import { __ as
|
|
10917
|
+
import { __ as __71 } from "@wordpress/i18n";
|
|
10822
10918
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
10823
|
-
return /* @__PURE__ */
|
|
10919
|
+
return /* @__PURE__ */ React135.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React135.createElement(Grid35, { item: true }, /* @__PURE__ */ React135.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React135.createElement(Grid35, { item: true }, /* @__PURE__ */ React135.createElement(SelectControl, { options })), /* @__PURE__ */ React135.createElement(Grid35, { item: true }, /* @__PURE__ */ React135.createElement(InfoAlert3, null, __71(
|
|
10824
10920
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
10825
10921
|
"elementor"
|
|
10826
10922
|
))));
|
|
10827
10923
|
});
|
|
10828
10924
|
|
|
10829
10925
|
// src/controls/grid-span-control.tsx
|
|
10830
|
-
import * as
|
|
10926
|
+
import * as React136 from "react";
|
|
10831
10927
|
import { spanPropTypeUtil } from "@elementor/editor-props";
|
|
10832
|
-
import { TextField as
|
|
10928
|
+
import { TextField as TextField14 } from "@elementor/ui";
|
|
10833
10929
|
var GridSpanControl = createControl(
|
|
10834
10930
|
({
|
|
10835
10931
|
placeholder: propPlaceholder,
|
|
@@ -10846,8 +10942,8 @@ var GridSpanControl = createControl(
|
|
|
10846
10942
|
setValue(next === "" ? null : next);
|
|
10847
10943
|
};
|
|
10848
10944
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
|
|
10849
|
-
return /* @__PURE__ */
|
|
10850
|
-
|
|
10945
|
+
return /* @__PURE__ */ React136.createElement(ControlActions, null, /* @__PURE__ */ React136.createElement(
|
|
10946
|
+
TextField14,
|
|
10851
10947
|
{
|
|
10852
10948
|
size: "tiny",
|
|
10853
10949
|
fullWidth: true,
|
|
@@ -10867,14 +10963,14 @@ var GridSpanControl = createControl(
|
|
|
10867
10963
|
);
|
|
10868
10964
|
|
|
10869
10965
|
// src/components/promotions/display-conditions-control.tsx
|
|
10870
|
-
import * as
|
|
10871
|
-
import { useRef as
|
|
10966
|
+
import * as React138 from "react";
|
|
10967
|
+
import { useRef as useRef39 } from "react";
|
|
10872
10968
|
import { SitemapIcon } from "@elementor/icons";
|
|
10873
10969
|
import { IconButton as IconButton12, Stack as Stack27, Tooltip as Tooltip15 } from "@elementor/ui";
|
|
10874
|
-
import { __ as
|
|
10970
|
+
import { __ as __72 } from "@wordpress/i18n";
|
|
10875
10971
|
|
|
10876
10972
|
// src/components/promotions/promotion-trigger.tsx
|
|
10877
|
-
import * as
|
|
10973
|
+
import * as React137 from "react";
|
|
10878
10974
|
import { forwardRef as forwardRef14, useCallback as useCallback5, useImperativeHandle, useState as useState30 } from "react";
|
|
10879
10975
|
import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
|
|
10880
10976
|
import { Box as Box38 } from "@elementor/ui";
|
|
@@ -10894,7 +10990,7 @@ var PromotionTrigger = forwardRef14(
|
|
|
10894
10990
|
});
|
|
10895
10991
|
}, [trackingData]);
|
|
10896
10992
|
useImperativeHandle(ref, () => ({ toggle }), [toggle]);
|
|
10897
|
-
return /* @__PURE__ */
|
|
10993
|
+
return /* @__PURE__ */ React137.createElement(React137.Fragment, null, promotion && /* @__PURE__ */ React137.createElement(
|
|
10898
10994
|
PromotionInfotip,
|
|
10899
10995
|
{
|
|
10900
10996
|
title: promotion.title,
|
|
@@ -10908,7 +11004,7 @@ var PromotionTrigger = forwardRef14(
|
|
|
10908
11004
|
},
|
|
10909
11005
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
10910
11006
|
},
|
|
10911
|
-
/* @__PURE__ */
|
|
11007
|
+
/* @__PURE__ */ React137.createElement(
|
|
10912
11008
|
Box38,
|
|
10913
11009
|
{
|
|
10914
11010
|
onClick: (e) => {
|
|
@@ -10917,18 +11013,18 @@ var PromotionTrigger = forwardRef14(
|
|
|
10917
11013
|
},
|
|
10918
11014
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
10919
11015
|
},
|
|
10920
|
-
children ?? /* @__PURE__ */
|
|
11016
|
+
children ?? /* @__PURE__ */ React137.createElement(PromotionChip2, null)
|
|
10921
11017
|
)
|
|
10922
11018
|
));
|
|
10923
11019
|
}
|
|
10924
11020
|
);
|
|
10925
11021
|
|
|
10926
11022
|
// src/components/promotions/display-conditions-control.tsx
|
|
10927
|
-
var ARIA_LABEL =
|
|
11023
|
+
var ARIA_LABEL = __72("Display Conditions", "elementor");
|
|
10928
11024
|
var TRACKING_DATA2 = { target_name: "display_conditions", location_l2: "general" };
|
|
10929
11025
|
var DisplayConditionsControl = createControl(() => {
|
|
10930
|
-
const triggerRef =
|
|
10931
|
-
return /* @__PURE__ */
|
|
11026
|
+
const triggerRef = useRef39(null);
|
|
11027
|
+
return /* @__PURE__ */ React138.createElement(
|
|
10932
11028
|
Stack27,
|
|
10933
11029
|
{
|
|
10934
11030
|
direction: "row",
|
|
@@ -10938,8 +11034,8 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
10938
11034
|
alignItems: "center"
|
|
10939
11035
|
}
|
|
10940
11036
|
},
|
|
10941
|
-
/* @__PURE__ */
|
|
10942
|
-
/* @__PURE__ */
|
|
11037
|
+
/* @__PURE__ */ React138.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA2 }),
|
|
11038
|
+
/* @__PURE__ */ React138.createElement(Tooltip15, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React138.createElement(
|
|
10943
11039
|
IconButton12,
|
|
10944
11040
|
{
|
|
10945
11041
|
size: "tiny",
|
|
@@ -10952,22 +11048,22 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
10952
11048
|
borderRadius: 1
|
|
10953
11049
|
}
|
|
10954
11050
|
},
|
|
10955
|
-
/* @__PURE__ */
|
|
11051
|
+
/* @__PURE__ */ React138.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
10956
11052
|
))
|
|
10957
11053
|
);
|
|
10958
11054
|
});
|
|
10959
11055
|
|
|
10960
11056
|
// src/components/promotions/attributes-control.tsx
|
|
10961
|
-
import * as
|
|
10962
|
-
import { useRef as
|
|
11057
|
+
import * as React139 from "react";
|
|
11058
|
+
import { useRef as useRef40 } from "react";
|
|
10963
11059
|
import { PlusIcon as PlusIcon4 } from "@elementor/icons";
|
|
10964
11060
|
import { Stack as Stack28, Tooltip as Tooltip16 } from "@elementor/ui";
|
|
10965
|
-
import { __ as
|
|
10966
|
-
var ARIA_LABEL2 =
|
|
11061
|
+
import { __ as __73 } from "@wordpress/i18n";
|
|
11062
|
+
var ARIA_LABEL2 = __73("Attributes", "elementor");
|
|
10967
11063
|
var TRACKING_DATA3 = { target_name: "attributes", location_l2: "general" };
|
|
10968
11064
|
var AttributesControl = createControl(() => {
|
|
10969
|
-
const triggerRef =
|
|
10970
|
-
return /* @__PURE__ */
|
|
11065
|
+
const triggerRef = useRef40(null);
|
|
11066
|
+
return /* @__PURE__ */ React139.createElement(
|
|
10971
11067
|
Stack28,
|
|
10972
11068
|
{
|
|
10973
11069
|
direction: "row",
|
|
@@ -10977,8 +11073,8 @@ var AttributesControl = createControl(() => {
|
|
|
10977
11073
|
alignItems: "center"
|
|
10978
11074
|
}
|
|
10979
11075
|
},
|
|
10980
|
-
/* @__PURE__ */
|
|
10981
|
-
/* @__PURE__ */
|
|
11076
|
+
/* @__PURE__ */ React139.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA3 }),
|
|
11077
|
+
/* @__PURE__ */ React139.createElement(Tooltip16, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React139.createElement(
|
|
10982
11078
|
PlusIcon4,
|
|
10983
11079
|
{
|
|
10984
11080
|
"aria-label": ARIA_LABEL2,
|
|
@@ -10992,17 +11088,17 @@ var AttributesControl = createControl(() => {
|
|
|
10992
11088
|
});
|
|
10993
11089
|
|
|
10994
11090
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
10995
|
-
import * as
|
|
11091
|
+
import * as React140 from "react";
|
|
10996
11092
|
import { BrushBigIcon } from "@elementor/icons";
|
|
10997
11093
|
import { IconButton as IconButton13, styled as styled14, Tooltip as Tooltip17 } from "@elementor/ui";
|
|
10998
11094
|
var CustomIconButton = styled14(IconButton13)(({ theme }) => ({
|
|
10999
11095
|
width: theme.spacing(2.5),
|
|
11000
11096
|
height: theme.spacing(2.5)
|
|
11001
11097
|
}));
|
|
11002
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
11098
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React140.createElement(Tooltip17, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React140.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React140.createElement(BrushBigIcon, { fontSize: size })));
|
|
11003
11099
|
|
|
11004
11100
|
// src/components/repeater/repeater.tsx
|
|
11005
|
-
import * as
|
|
11101
|
+
import * as React141 from "react";
|
|
11006
11102
|
import { useEffect as useEffect23, useState as useState31 } from "react";
|
|
11007
11103
|
import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
|
|
11008
11104
|
import {
|
|
@@ -11014,8 +11110,8 @@ import {
|
|
|
11014
11110
|
Tooltip as Tooltip18,
|
|
11015
11111
|
usePopupState as usePopupState13
|
|
11016
11112
|
} from "@elementor/ui";
|
|
11017
|
-
import { __ as
|
|
11018
|
-
var
|
|
11113
|
+
import { __ as __74 } from "@wordpress/i18n";
|
|
11114
|
+
var SIZE13 = "tiny";
|
|
11019
11115
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
11020
11116
|
var Repeater3 = ({
|
|
11021
11117
|
label,
|
|
@@ -11096,20 +11192,20 @@ var Repeater3 = ({
|
|
|
11096
11192
|
};
|
|
11097
11193
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
11098
11194
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
11099
|
-
const addButton = /* @__PURE__ */
|
|
11195
|
+
const addButton = /* @__PURE__ */ React141.createElement(
|
|
11100
11196
|
IconButton14,
|
|
11101
11197
|
{
|
|
11102
|
-
size:
|
|
11198
|
+
size: SIZE13,
|
|
11103
11199
|
sx: {
|
|
11104
11200
|
ml: "auto"
|
|
11105
11201
|
},
|
|
11106
11202
|
disabled: isButtonDisabled,
|
|
11107
11203
|
onClick: addRepeaterItem,
|
|
11108
|
-
"aria-label":
|
|
11204
|
+
"aria-label": __74("Add item", "elementor")
|
|
11109
11205
|
},
|
|
11110
|
-
/* @__PURE__ */
|
|
11206
|
+
/* @__PURE__ */ React141.createElement(PlusIcon5, { fontSize: SIZE13 })
|
|
11111
11207
|
);
|
|
11112
|
-
return /* @__PURE__ */
|
|
11208
|
+
return /* @__PURE__ */ React141.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React141.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React141.createElement(
|
|
11113
11209
|
Infotip5,
|
|
11114
11210
|
{
|
|
11115
11211
|
placement: "right",
|
|
@@ -11117,20 +11213,20 @@ var Repeater3 = ({
|
|
|
11117
11213
|
color: "secondary",
|
|
11118
11214
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
11119
11215
|
},
|
|
11120
|
-
/* @__PURE__ */
|
|
11121
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
11216
|
+
/* @__PURE__ */ React141.createElement(Box39, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
11217
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React141.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
11122
11218
|
const index = uniqueKeys.indexOf(key);
|
|
11123
11219
|
const value = items2[index];
|
|
11124
11220
|
if (!value) {
|
|
11125
11221
|
return null;
|
|
11126
11222
|
}
|
|
11127
|
-
return /* @__PURE__ */
|
|
11223
|
+
return /* @__PURE__ */ React141.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React141.createElement(
|
|
11128
11224
|
RepeaterItem,
|
|
11129
11225
|
{
|
|
11130
11226
|
disabled,
|
|
11131
11227
|
propDisabled: value?.disabled,
|
|
11132
|
-
label: /* @__PURE__ */
|
|
11133
|
-
startIcon: /* @__PURE__ */
|
|
11228
|
+
label: /* @__PURE__ */ React141.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React141.createElement(itemSettings.Label, { value, index })),
|
|
11229
|
+
startIcon: /* @__PURE__ */ React141.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React141.createElement(itemSettings.Icon, { value })),
|
|
11134
11230
|
removeItem: () => removeRepeaterItem(index),
|
|
11135
11231
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
11136
11232
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -11144,7 +11240,7 @@ var Repeater3 = ({
|
|
|
11144
11240
|
actions: itemSettings.actions,
|
|
11145
11241
|
value
|
|
11146
11242
|
},
|
|
11147
|
-
(props) => /* @__PURE__ */
|
|
11243
|
+
(props) => /* @__PURE__ */ React141.createElement(
|
|
11148
11244
|
itemSettings.Content,
|
|
11149
11245
|
{
|
|
11150
11246
|
...props,
|
|
@@ -11186,16 +11282,16 @@ var RepeaterItem = ({
|
|
|
11186
11282
|
);
|
|
11187
11283
|
const triggerProps = bindTrigger7(popoverState);
|
|
11188
11284
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
11189
|
-
const duplicateLabel =
|
|
11190
|
-
const toggleLabel = propDisabled ?
|
|
11191
|
-
const removeLabel =
|
|
11192
|
-
return /* @__PURE__ */
|
|
11285
|
+
const duplicateLabel = __74("Duplicate", "elementor");
|
|
11286
|
+
const toggleLabel = propDisabled ? __74("Show", "elementor") : __74("Hide", "elementor");
|
|
11287
|
+
const removeLabel = __74("Remove", "elementor");
|
|
11288
|
+
return /* @__PURE__ */ React141.createElement(Box39, { sx: { display: "contents" } }, /* @__PURE__ */ React141.createElement(
|
|
11193
11289
|
RepeaterTag,
|
|
11194
11290
|
{
|
|
11195
11291
|
disabled,
|
|
11196
11292
|
label,
|
|
11197
11293
|
ref: setRef,
|
|
11198
|
-
"aria-label":
|
|
11294
|
+
"aria-label": __74("Open item", "elementor"),
|
|
11199
11295
|
...triggerProps,
|
|
11200
11296
|
onClick: (e) => {
|
|
11201
11297
|
triggerProps.onClick(e);
|
|
@@ -11204,9 +11300,9 @@ var RepeaterItem = ({
|
|
|
11204
11300
|
}
|
|
11205
11301
|
},
|
|
11206
11302
|
startIcon,
|
|
11207
|
-
actions: /* @__PURE__ */
|
|
11303
|
+
actions: /* @__PURE__ */ React141.createElement(React141.Fragment, null, showDuplicate && /* @__PURE__ */ React141.createElement(Tooltip18, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React141.createElement(IconButton14, { size: SIZE13, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React141.createElement(CopyIcon2, { fontSize: SIZE13 }))), showToggle && /* @__PURE__ */ React141.createElement(Tooltip18, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React141.createElement(IconButton14, { size: SIZE13, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React141.createElement(EyeOffIcon2, { fontSize: SIZE13 }) : /* @__PURE__ */ React141.createElement(EyeIcon2, { fontSize: SIZE13 }))), actions?.(value), showRemove && /* @__PURE__ */ React141.createElement(Tooltip18, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React141.createElement(IconButton14, { size: SIZE13, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React141.createElement(XIcon4, { fontSize: SIZE13 }))))
|
|
11208
11304
|
}
|
|
11209
|
-
), /* @__PURE__ */
|
|
11305
|
+
), /* @__PURE__ */ React141.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React141.createElement(Box39, null, children({ anchorEl: ref }))));
|
|
11210
11306
|
};
|
|
11211
11307
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
11212
11308
|
const [ref, setRef] = useState31(null);
|
|
@@ -11231,7 +11327,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
11231
11327
|
};
|
|
11232
11328
|
|
|
11233
11329
|
// src/components/size/unstable-size-field.tsx
|
|
11234
|
-
import * as
|
|
11330
|
+
import * as React144 from "react";
|
|
11235
11331
|
import { InputAdornment as InputAdornment6 } from "@elementor/ui";
|
|
11236
11332
|
|
|
11237
11333
|
// src/hooks/use-size-value.ts
|
|
@@ -11274,7 +11370,7 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
11274
11370
|
};
|
|
11275
11371
|
|
|
11276
11372
|
// src/components/size/unit-select.tsx
|
|
11277
|
-
import * as
|
|
11373
|
+
import * as React142 from "react";
|
|
11278
11374
|
import { useId as useId5 } from "react";
|
|
11279
11375
|
import { MenuListItem as MenuListItem8 } from "@elementor/editor-ui";
|
|
11280
11376
|
import { bindMenu as bindMenu4, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu5, styled as styled15, usePopupState as usePopupState14 } from "@elementor/ui";
|
|
@@ -11292,7 +11388,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
11292
11388
|
onClick(options[index]);
|
|
11293
11389
|
popupState.close();
|
|
11294
11390
|
};
|
|
11295
|
-
return /* @__PURE__ */
|
|
11391
|
+
return /* @__PURE__ */ React142.createElement(React142.Fragment, null, /* @__PURE__ */ React142.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React142.createElement(Menu5, { MenuListProps: { dense: true }, ...bindMenu4(popupState) }, options.map((option, index) => /* @__PURE__ */ React142.createElement(
|
|
11296
11392
|
MenuListItem8,
|
|
11297
11393
|
{
|
|
11298
11394
|
key: option,
|
|
@@ -11321,11 +11417,11 @@ var StyledButton3 = styled15(Button7, {
|
|
|
11321
11417
|
}));
|
|
11322
11418
|
|
|
11323
11419
|
// src/components/size/unstable-size-input.tsx
|
|
11324
|
-
import * as
|
|
11420
|
+
import * as React143 from "react";
|
|
11325
11421
|
import { forwardRef as forwardRef15 } from "react";
|
|
11326
11422
|
var UnstableSizeInput = forwardRef15(
|
|
11327
11423
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
11328
|
-
return /* @__PURE__ */
|
|
11424
|
+
return /* @__PURE__ */ React143.createElement(
|
|
11329
11425
|
NumberInput,
|
|
11330
11426
|
{
|
|
11331
11427
|
ref,
|
|
@@ -11363,7 +11459,7 @@ var UnstableSizeField = ({
|
|
|
11363
11459
|
const shouldHighlightUnit2 = () => {
|
|
11364
11460
|
return hasValue(size);
|
|
11365
11461
|
};
|
|
11366
|
-
return /* @__PURE__ */
|
|
11462
|
+
return /* @__PURE__ */ React144.createElement(
|
|
11367
11463
|
UnstableSizeInput,
|
|
11368
11464
|
{
|
|
11369
11465
|
type: "number",
|
|
@@ -11372,8 +11468,8 @@ var UnstableSizeField = ({
|
|
|
11372
11468
|
onChange: (event) => setSize(event.target.value),
|
|
11373
11469
|
InputProps: {
|
|
11374
11470
|
...InputProps,
|
|
11375
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
11376
|
-
endAdornment: /* @__PURE__ */
|
|
11471
|
+
startAdornment: startIcon && /* @__PURE__ */ React144.createElement(InputAdornment6, { position: "start" }, startIcon),
|
|
11472
|
+
endAdornment: /* @__PURE__ */ React144.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React144.createElement(
|
|
11377
11473
|
UnitSelect,
|
|
11378
11474
|
{
|
|
11379
11475
|
options: units2,
|
|
@@ -11391,7 +11487,7 @@ var hasValue = (value) => {
|
|
|
11391
11487
|
};
|
|
11392
11488
|
|
|
11393
11489
|
// src/hooks/use-font-families.ts
|
|
11394
|
-
import { useMemo as
|
|
11490
|
+
import { useMemo as useMemo22 } from "react";
|
|
11395
11491
|
import { getElementorConfig } from "@elementor/editor-v1-adapters";
|
|
11396
11492
|
var getFontControlConfig = () => {
|
|
11397
11493
|
const { controls } = getElementorConfig();
|
|
@@ -11399,7 +11495,7 @@ var getFontControlConfig = () => {
|
|
|
11399
11495
|
};
|
|
11400
11496
|
var useFontFamilies = () => {
|
|
11401
11497
|
const { groups, options } = getFontControlConfig();
|
|
11402
|
-
return
|
|
11498
|
+
return useMemo22(() => {
|
|
11403
11499
|
if (!groups || !options) {
|
|
11404
11500
|
return [];
|
|
11405
11501
|
}
|
|
@@ -11470,6 +11566,7 @@ export {
|
|
|
11470
11566
|
QueryChipsControl,
|
|
11471
11567
|
QueryControl,
|
|
11472
11568
|
QueryFilterRepeaterControl,
|
|
11569
|
+
QuerySelectControl,
|
|
11473
11570
|
RepeatableControl,
|
|
11474
11571
|
Repeater3 as Repeater,
|
|
11475
11572
|
SelectControl,
|