@elementor/editor-controls 3.33.0-149 → 3.33.0-151
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 +26 -14
- package/dist/index.d.ts +26 -14
- package/dist/index.js +605 -499
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +476 -371
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -15
- package/src/components/conditional-control-infotip.tsx +64 -0
- package/src/components/enable-unfiltered-modal.tsx +1 -26
- package/src/controls/html-tag-control.tsx +90 -0
- package/src/controls/query-control.tsx +7 -0
- package/src/controls/svg-media-control.tsx +33 -10
- package/src/index.ts +1 -0
package/dist/index.js
CHANGED
|
@@ -46,6 +46,7 @@ __export(index_exports, {
|
|
|
46
46
|
FloatingActionsBar: () => FloatingActionsBar,
|
|
47
47
|
FontFamilyControl: () => FontFamilyControl,
|
|
48
48
|
GapControl: () => GapControl,
|
|
49
|
+
HtmlTagControl: () => HtmlTagControl,
|
|
49
50
|
ImageControl: () => ImageControl,
|
|
50
51
|
ItemSelector: () => ItemSelector,
|
|
51
52
|
KeyValueControl: () => KeyValueControl,
|
|
@@ -3213,6 +3214,11 @@ var QueryControl = createControl((props) => {
|
|
|
3213
3214
|
onSetValue?.(valueToSave);
|
|
3214
3215
|
};
|
|
3215
3216
|
const onTextChange = (newValue) => {
|
|
3217
|
+
if (!newValue) {
|
|
3218
|
+
setValue(null);
|
|
3219
|
+
onSetValue?.(null);
|
|
3220
|
+
return;
|
|
3221
|
+
}
|
|
3216
3222
|
const newLinkValue = newValue?.trim() || "";
|
|
3217
3223
|
const valueToSave = newLinkValue ? import_editor_props22.urlPropTypeUtil.create(newLinkValue) : null;
|
|
3218
3224
|
setValue(valueToSave);
|
|
@@ -3376,29 +3382,128 @@ var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
|
|
|
3376
3382
|
return /* @__PURE__ */ React62.createElement(import_ui47.IconButton, { size: SIZE6, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React62.createElement(import_icons14.MinusIcon, { fontSize: SIZE6 }) : /* @__PURE__ */ React62.createElement(import_icons14.PlusIcon, { fontSize: SIZE6 }));
|
|
3377
3383
|
};
|
|
3378
3384
|
|
|
3379
|
-
// src/controls/
|
|
3385
|
+
// src/controls/html-tag-control.tsx
|
|
3386
|
+
var React64 = __toESM(require("react"));
|
|
3387
|
+
var import_editor_elements3 = require("@elementor/editor-elements");
|
|
3388
|
+
var import_editor_props25 = require("@elementor/editor-props");
|
|
3389
|
+
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
3390
|
+
var import_ui50 = require("@elementor/ui");
|
|
3391
|
+
var import_i18n23 = require("@wordpress/i18n");
|
|
3392
|
+
|
|
3393
|
+
// src/components/conditional-control-infotip.tsx
|
|
3380
3394
|
var React63 = __toESM(require("react"));
|
|
3395
|
+
var import_editor_ui5 = require("@elementor/editor-ui");
|
|
3396
|
+
var import_ui48 = require("@elementor/ui");
|
|
3397
|
+
var import_ui49 = require("@elementor/ui");
|
|
3398
|
+
var DEFAULT_COLOR = "secondary";
|
|
3399
|
+
var ConditionalControlInfotip = React63.forwardRef(
|
|
3400
|
+
({ children, title, description, alertProps, infotipProps, ...props }, ref) => {
|
|
3401
|
+
const theme = (0, import_ui48.useTheme)();
|
|
3402
|
+
const isUiRtl = "rtl" === theme.direction;
|
|
3403
|
+
const isEnabled = props.isEnabled && (title || description);
|
|
3404
|
+
return /* @__PURE__ */ React63.createElement(import_ui48.Box, { ref }, isEnabled ? /* @__PURE__ */ React63.createElement(import_ui49.DirectionProvider, { rtl: isUiRtl }, /* @__PURE__ */ React63.createElement(
|
|
3405
|
+
import_ui48.Infotip,
|
|
3406
|
+
{
|
|
3407
|
+
placement: "right",
|
|
3408
|
+
color: DEFAULT_COLOR,
|
|
3409
|
+
slotProps: {
|
|
3410
|
+
popper: {
|
|
3411
|
+
modifiers: [
|
|
3412
|
+
{
|
|
3413
|
+
name: "offset",
|
|
3414
|
+
options: {
|
|
3415
|
+
offset: [0, 10]
|
|
3416
|
+
}
|
|
3417
|
+
}
|
|
3418
|
+
]
|
|
3419
|
+
}
|
|
3420
|
+
},
|
|
3421
|
+
...infotipProps,
|
|
3422
|
+
content: /* @__PURE__ */ React63.createElement(
|
|
3423
|
+
import_editor_ui5.InfoAlert,
|
|
3424
|
+
{
|
|
3425
|
+
color: DEFAULT_COLOR,
|
|
3426
|
+
sx: { width: 300, px: 1.5, py: 2 },
|
|
3427
|
+
...alertProps
|
|
3428
|
+
},
|
|
3429
|
+
/* @__PURE__ */ React63.createElement(import_ui48.Box, { sx: { flexDirection: "column", display: "flex", gap: 0.5 } }, /* @__PURE__ */ React63.createElement(import_ui48.AlertTitle, null, title), /* @__PURE__ */ React63.createElement(import_ui48.Box, null, description))
|
|
3430
|
+
)
|
|
3431
|
+
},
|
|
3432
|
+
children
|
|
3433
|
+
)) : children);
|
|
3434
|
+
}
|
|
3435
|
+
);
|
|
3436
|
+
|
|
3437
|
+
// src/controls/html-tag-control.tsx
|
|
3438
|
+
var StyledSelect = (0, import_ui50.styled)(import_ui50.Select)(() => ({ ".MuiSelect-select.Mui-disabled": { cursor: "not-allowed" } }));
|
|
3439
|
+
var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} }) => {
|
|
3440
|
+
const { value, setValue, disabled, placeholder } = useBoundProp(import_editor_props25.stringPropTypeUtil);
|
|
3441
|
+
const handleChange = (event) => {
|
|
3442
|
+
const newValue = event.target.value || null;
|
|
3443
|
+
onChange?.(newValue, value);
|
|
3444
|
+
setValue(newValue);
|
|
3445
|
+
};
|
|
3446
|
+
const elementLabel = (0, import_editor_elements3.getElementLabel)() ?? "element";
|
|
3447
|
+
const infoTipProps = {
|
|
3448
|
+
title: (0, import_i18n23.__)("HTML Tag", "elementor"),
|
|
3449
|
+
/* translators: %s is the element name. */
|
|
3450
|
+
description: (0, import_i18n23.__)(
|
|
3451
|
+
`The tag is locked to 'a' tag because this %s has a link. To pick a different tag, remove the link first.`,
|
|
3452
|
+
"elementor"
|
|
3453
|
+
).replace("%s", elementLabel),
|
|
3454
|
+
isEnabled: !!disabled
|
|
3455
|
+
};
|
|
3456
|
+
const renderValue = (selectedValue) => {
|
|
3457
|
+
if (selectedValue) {
|
|
3458
|
+
return findOptionByValue(selectedValue)?.label || fallbackLabels[selectedValue] || selectedValue;
|
|
3459
|
+
}
|
|
3460
|
+
if (!placeholder) {
|
|
3461
|
+
return "";
|
|
3462
|
+
}
|
|
3463
|
+
const placeholderOption = findOptionByValue(placeholder);
|
|
3464
|
+
const displayText = placeholderOption?.label || placeholder;
|
|
3465
|
+
return /* @__PURE__ */ React64.createElement(import_ui50.Typography, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
|
|
3466
|
+
};
|
|
3467
|
+
const findOptionByValue = (searchValue) => options.find((opt) => opt.value === searchValue);
|
|
3468
|
+
return /* @__PURE__ */ React64.createElement(ControlActions, null, /* @__PURE__ */ React64.createElement(ConditionalControlInfotip, { ...infoTipProps }, /* @__PURE__ */ React64.createElement(
|
|
3469
|
+
StyledSelect,
|
|
3470
|
+
{
|
|
3471
|
+
sx: { overflow: "hidden", cursor: disabled ? "not-allowed" : void 0 },
|
|
3472
|
+
displayEmpty: true,
|
|
3473
|
+
size: "tiny",
|
|
3474
|
+
renderValue,
|
|
3475
|
+
value: value ?? "",
|
|
3476
|
+
onChange: handleChange,
|
|
3477
|
+
disabled,
|
|
3478
|
+
fullWidth: true
|
|
3479
|
+
},
|
|
3480
|
+
options.map(({ label, ...props }) => /* @__PURE__ */ React64.createElement(import_editor_ui6.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
|
|
3481
|
+
)));
|
|
3482
|
+
});
|
|
3483
|
+
|
|
3484
|
+
// src/controls/gap-control.tsx
|
|
3485
|
+
var React65 = __toESM(require("react"));
|
|
3381
3486
|
var import_react31 = require("react");
|
|
3382
|
-
var
|
|
3487
|
+
var import_editor_props26 = require("@elementor/editor-props");
|
|
3383
3488
|
var import_icons15 = require("@elementor/icons");
|
|
3384
|
-
var
|
|
3385
|
-
var
|
|
3489
|
+
var import_ui51 = require("@elementor/ui");
|
|
3490
|
+
var import_i18n24 = require("@wordpress/i18n");
|
|
3386
3491
|
var GapControl = ({ label }) => {
|
|
3387
3492
|
const {
|
|
3388
3493
|
value: directionValue,
|
|
3389
3494
|
setValue: setDirectionValue,
|
|
3390
3495
|
propType,
|
|
3391
3496
|
disabled: directionDisabled
|
|
3392
|
-
} = useBoundProp(
|
|
3497
|
+
} = useBoundProp(import_editor_props26.layoutDirectionPropTypeUtil);
|
|
3393
3498
|
const stackRef = (0, import_react31.useRef)(null);
|
|
3394
|
-
const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(
|
|
3499
|
+
const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props26.sizePropTypeUtil);
|
|
3395
3500
|
const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
|
|
3396
3501
|
const onLinkToggle = () => {
|
|
3397
3502
|
if (!isLinked) {
|
|
3398
3503
|
setSizeValue(directionValue?.column?.value ?? null);
|
|
3399
3504
|
return;
|
|
3400
3505
|
}
|
|
3401
|
-
const value = sizeValue ?
|
|
3506
|
+
const value = sizeValue ? import_editor_props26.sizePropTypeUtil.create(sizeValue) : null;
|
|
3402
3507
|
setDirectionValue({
|
|
3403
3508
|
row: value,
|
|
3404
3509
|
column: value
|
|
@@ -3406,11 +3511,11 @@ var GapControl = ({ label }) => {
|
|
|
3406
3511
|
};
|
|
3407
3512
|
const tooltipLabel = label.toLowerCase();
|
|
3408
3513
|
const LinkedIcon = isLinked ? import_icons15.LinkIcon : import_icons15.DetachIcon;
|
|
3409
|
-
const linkedLabel = (0,
|
|
3410
|
-
const unlinkedLabel = (0,
|
|
3514
|
+
const linkedLabel = (0, import_i18n24.__)("Link %s", "elementor").replace("%s", tooltipLabel);
|
|
3515
|
+
const unlinkedLabel = (0, import_i18n24.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
|
|
3411
3516
|
const disabled = sizeDisabled || directionDisabled;
|
|
3412
|
-
return /* @__PURE__ */
|
|
3413
|
-
|
|
3517
|
+
return /* @__PURE__ */ React65.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React65.createElement(import_ui51.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React65.createElement(ControlLabel, null, label), /* @__PURE__ */ React65.createElement(import_ui51.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React65.createElement(
|
|
3518
|
+
import_ui51.ToggleButton,
|
|
3414
3519
|
{
|
|
3415
3520
|
"aria-label": isLinked ? unlinkedLabel : linkedLabel,
|
|
3416
3521
|
size: "tiny",
|
|
@@ -3420,8 +3525,8 @@ var GapControl = ({ label }) => {
|
|
|
3420
3525
|
onChange: onLinkToggle,
|
|
3421
3526
|
disabled
|
|
3422
3527
|
},
|
|
3423
|
-
/* @__PURE__ */
|
|
3424
|
-
))), /* @__PURE__ */
|
|
3528
|
+
/* @__PURE__ */ React65.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
3529
|
+
))), /* @__PURE__ */ React65.createElement(import_ui51.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React65.createElement(import_ui51.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React65.createElement(import_ui51.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, (0, import_i18n24.__)("Column", "elementor"))), /* @__PURE__ */ React65.createElement(import_ui51.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React65.createElement(import_ui51.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React65.createElement(import_ui51.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, (0, import_i18n24.__)("Row", "elementor"))), /* @__PURE__ */ React65.createElement(import_ui51.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
|
|
3425
3530
|
};
|
|
3426
3531
|
var Control4 = ({
|
|
3427
3532
|
bind,
|
|
@@ -3429,21 +3534,21 @@ var Control4 = ({
|
|
|
3429
3534
|
anchorRef
|
|
3430
3535
|
}) => {
|
|
3431
3536
|
if (isLinked) {
|
|
3432
|
-
return /* @__PURE__ */
|
|
3537
|
+
return /* @__PURE__ */ React65.createElement(SizeControl, { anchorRef });
|
|
3433
3538
|
}
|
|
3434
|
-
return /* @__PURE__ */
|
|
3539
|
+
return /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React65.createElement(SizeControl, { anchorRef }));
|
|
3435
3540
|
};
|
|
3436
3541
|
|
|
3437
3542
|
// src/controls/aspect-ratio-control.tsx
|
|
3438
|
-
var
|
|
3543
|
+
var React66 = __toESM(require("react"));
|
|
3439
3544
|
var import_react32 = require("react");
|
|
3440
|
-
var
|
|
3441
|
-
var
|
|
3545
|
+
var import_editor_props27 = require("@elementor/editor-props");
|
|
3546
|
+
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
3442
3547
|
var import_icons16 = require("@elementor/icons");
|
|
3443
|
-
var
|
|
3444
|
-
var
|
|
3548
|
+
var import_ui52 = require("@elementor/ui");
|
|
3549
|
+
var import_i18n25 = require("@wordpress/i18n");
|
|
3445
3550
|
var RATIO_OPTIONS = [
|
|
3446
|
-
{ label: (0,
|
|
3551
|
+
{ label: (0, import_i18n25.__)("Auto", "elementor"), value: "auto" },
|
|
3447
3552
|
{ label: "1/1", value: "1/1" },
|
|
3448
3553
|
{ label: "4/3", value: "4/3" },
|
|
3449
3554
|
{ label: "3/4", value: "3/4" },
|
|
@@ -3454,7 +3559,7 @@ var RATIO_OPTIONS = [
|
|
|
3454
3559
|
];
|
|
3455
3560
|
var CUSTOM_RATIO = "custom";
|
|
3456
3561
|
var AspectRatioControl = createControl(({ label }) => {
|
|
3457
|
-
const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(
|
|
3562
|
+
const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(import_editor_props27.stringPropTypeUtil);
|
|
3458
3563
|
const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
|
|
3459
3564
|
const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
|
|
3460
3565
|
const [isCustom, setIsCustom] = (0, import_react32.useState)(isCustomSelected);
|
|
@@ -3502,8 +3607,8 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
3502
3607
|
setAspectRatioValue(`${customWidth}/${newHeight}`);
|
|
3503
3608
|
}
|
|
3504
3609
|
};
|
|
3505
|
-
return /* @__PURE__ */
|
|
3506
|
-
|
|
3610
|
+
return /* @__PURE__ */ React66.createElement(ControlActions, null, /* @__PURE__ */ React66.createElement(import_ui52.Stack, { direction: "column", gap: 2 }, /* @__PURE__ */ React66.createElement(import_ui52.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React66.createElement(import_ui52.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlLabel, null, label)), /* @__PURE__ */ React66.createElement(import_ui52.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(
|
|
3611
|
+
import_ui52.Select,
|
|
3507
3612
|
{
|
|
3508
3613
|
size: "tiny",
|
|
3509
3614
|
displayEmpty: true,
|
|
@@ -3513,11 +3618,11 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
3513
3618
|
onChange: handleSelectChange,
|
|
3514
3619
|
fullWidth: true
|
|
3515
3620
|
},
|
|
3516
|
-
[...RATIO_OPTIONS, { label: (0,
|
|
3517
|
-
({ label: optionLabel, ...props }) => /* @__PURE__ */
|
|
3621
|
+
[...RATIO_OPTIONS, { label: (0, import_i18n25.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
|
|
3622
|
+
({ label: optionLabel, ...props }) => /* @__PURE__ */ React66.createElement(import_editor_ui7.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
|
|
3518
3623
|
)
|
|
3519
|
-
))), isCustom && /* @__PURE__ */
|
|
3520
|
-
|
|
3624
|
+
))), isCustom && /* @__PURE__ */ React66.createElement(import_ui52.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React66.createElement(import_ui52.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(
|
|
3625
|
+
import_ui52.TextField,
|
|
3521
3626
|
{
|
|
3522
3627
|
size: "tiny",
|
|
3523
3628
|
type: "number",
|
|
@@ -3526,11 +3631,11 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
3526
3631
|
value: customWidth,
|
|
3527
3632
|
onChange: handleCustomWidthChange,
|
|
3528
3633
|
InputProps: {
|
|
3529
|
-
startAdornment: /* @__PURE__ */
|
|
3634
|
+
startAdornment: /* @__PURE__ */ React66.createElement(import_icons16.ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
|
|
3530
3635
|
}
|
|
3531
3636
|
}
|
|
3532
|
-
)), /* @__PURE__ */
|
|
3533
|
-
|
|
3637
|
+
)), /* @__PURE__ */ React66.createElement(import_ui52.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(
|
|
3638
|
+
import_ui52.TextField,
|
|
3534
3639
|
{
|
|
3535
3640
|
size: "tiny",
|
|
3536
3641
|
type: "number",
|
|
@@ -3539,48 +3644,41 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
3539
3644
|
value: customHeight,
|
|
3540
3645
|
onChange: handleCustomHeightChange,
|
|
3541
3646
|
InputProps: {
|
|
3542
|
-
startAdornment: /* @__PURE__ */
|
|
3647
|
+
startAdornment: /* @__PURE__ */ React66.createElement(import_icons16.ArrowsMoveVerticalIcon, { fontSize: "tiny" })
|
|
3543
3648
|
}
|
|
3544
3649
|
}
|
|
3545
3650
|
)))));
|
|
3546
3651
|
});
|
|
3547
3652
|
|
|
3548
3653
|
// src/controls/svg-media-control.tsx
|
|
3549
|
-
var
|
|
3654
|
+
var React68 = __toESM(require("react"));
|
|
3550
3655
|
var import_react34 = require("react");
|
|
3551
|
-
var
|
|
3656
|
+
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
3657
|
+
var import_editor_props28 = require("@elementor/editor-props");
|
|
3552
3658
|
var import_icons17 = require("@elementor/icons");
|
|
3553
|
-
var
|
|
3659
|
+
var import_ui54 = require("@elementor/ui");
|
|
3554
3660
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
3555
|
-
var
|
|
3661
|
+
var import_i18n27 = require("@wordpress/i18n");
|
|
3556
3662
|
|
|
3557
3663
|
// src/components/enable-unfiltered-modal.tsx
|
|
3558
|
-
var
|
|
3664
|
+
var React67 = __toESM(require("react"));
|
|
3559
3665
|
var import_react33 = require("react");
|
|
3560
|
-
var
|
|
3561
|
-
var
|
|
3562
|
-
var
|
|
3563
|
-
var
|
|
3564
|
-
var ADMIN_CONTENT_TEXT = (0, import_i18n25.__)(
|
|
3666
|
+
var import_ui53 = require("@elementor/ui");
|
|
3667
|
+
var import_i18n26 = require("@wordpress/i18n");
|
|
3668
|
+
var ADMIN_TITLE_TEXT = (0, import_i18n26.__)("Enable Unfiltered Uploads", "elementor");
|
|
3669
|
+
var ADMIN_CONTENT_TEXT = (0, import_i18n26.__)(
|
|
3565
3670
|
"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.",
|
|
3566
3671
|
"elementor"
|
|
3567
3672
|
);
|
|
3568
|
-
var
|
|
3569
|
-
var
|
|
3570
|
-
"This is because this file type may pose a security risk. To upload them anyway, ask the site administrator to enable unfiltered file uploads.",
|
|
3571
|
-
"elementor"
|
|
3572
|
-
);
|
|
3573
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT1 = (0, import_i18n25.__)("Failed to enable unfiltered files upload.", "elementor");
|
|
3574
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n25.__)(
|
|
3673
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT1 = (0, import_i18n26.__)("Failed to enable unfiltered files upload.", "elementor");
|
|
3674
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n26.__)(
|
|
3575
3675
|
"You can try again, if the problem persists, please contact support.",
|
|
3576
3676
|
"elementor"
|
|
3577
3677
|
);
|
|
3578
3678
|
var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
|
|
3579
3679
|
var EnableUnfilteredModal = (props) => {
|
|
3580
3680
|
const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
|
|
3581
|
-
const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
|
|
3582
3681
|
const [isError, setIsError] = (0, import_react33.useState)(false);
|
|
3583
|
-
const canManageOptions = canUser("manage_options");
|
|
3584
3682
|
const onClose = (enabled) => {
|
|
3585
3683
|
props.onClose(enabled);
|
|
3586
3684
|
setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
|
|
@@ -3598,10 +3696,10 @@ var EnableUnfilteredModal = (props) => {
|
|
|
3598
3696
|
}
|
|
3599
3697
|
};
|
|
3600
3698
|
const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
|
|
3601
|
-
return
|
|
3699
|
+
return /* @__PURE__ */ React67.createElement(AdminDialog, { ...dialogProps });
|
|
3602
3700
|
};
|
|
3603
|
-
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */
|
|
3604
|
-
|
|
3701
|
+
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React67.createElement(import_ui53.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React67.createElement(import_ui53.DialogHeader, { logo: false }, /* @__PURE__ */ React67.createElement(import_ui53.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React67.createElement(import_ui53.Divider, null), /* @__PURE__ */ React67.createElement(import_ui53.DialogContent, null, /* @__PURE__ */ React67.createElement(import_ui53.DialogContentText, null, isError ? /* @__PURE__ */ React67.createElement(React67.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React67.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React67.createElement(import_ui53.DialogActions, null, /* @__PURE__ */ React67.createElement(import_ui53.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n26.__)("Cancel", "elementor")), /* @__PURE__ */ React67.createElement(
|
|
3702
|
+
import_ui53.Button,
|
|
3605
3703
|
{
|
|
3606
3704
|
size: "medium",
|
|
3607
3705
|
onClick: () => handleEnable(),
|
|
@@ -3609,16 +3707,15 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
3609
3707
|
color: "primary",
|
|
3610
3708
|
disabled: isPending
|
|
3611
3709
|
},
|
|
3612
|
-
isPending ? /* @__PURE__ */
|
|
3710
|
+
isPending ? /* @__PURE__ */ React67.createElement(import_ui53.CircularProgress, { size: 24 }) : (0, import_i18n26.__)("Enable", "elementor")
|
|
3613
3711
|
)));
|
|
3614
|
-
var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React65.createElement(import_ui50.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React65.createElement(import_ui50.DialogHeader, { logo: false }, /* @__PURE__ */ React65.createElement(import_ui50.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React65.createElement(import_ui50.Divider, null), /* @__PURE__ */ React65.createElement(import_ui50.DialogContent, null, /* @__PURE__ */ React65.createElement(import_ui50.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React65.createElement(import_ui50.DialogActions, null, /* @__PURE__ */ React65.createElement(import_ui50.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n25.__)("Got it", "elementor"))));
|
|
3615
3712
|
|
|
3616
3713
|
// src/controls/svg-media-control.tsx
|
|
3617
3714
|
var TILE_SIZE = 8;
|
|
3618
3715
|
var TILE_WHITE = "transparent";
|
|
3619
3716
|
var TILE_BLACK = "#c1c1c1";
|
|
3620
3717
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
3621
|
-
var StyledCard = (0,
|
|
3718
|
+
var StyledCard = (0, import_ui54.styled)(import_ui54.Card)`
|
|
3622
3719
|
background-color: white;
|
|
3623
3720
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
3624
3721
|
background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
|
|
@@ -3627,7 +3724,7 @@ var StyledCard = (0, import_ui51.styled)(import_ui51.Card)`
|
|
|
3627
3724
|
${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
|
|
3628
3725
|
border: none;
|
|
3629
3726
|
`;
|
|
3630
|
-
var StyledCardMediaContainer = (0,
|
|
3727
|
+
var StyledCardMediaContainer = (0, import_ui54.styled)(import_ui54.Stack)`
|
|
3631
3728
|
position: relative;
|
|
3632
3729
|
height: 140px;
|
|
3633
3730
|
object-fit: contain;
|
|
@@ -3639,12 +3736,14 @@ var StyledCardMediaContainer = (0, import_ui51.styled)(import_ui51.Stack)`
|
|
|
3639
3736
|
var MODE_BROWSE = { mode: "browse" };
|
|
3640
3737
|
var MODE_UPLOAD = { mode: "upload" };
|
|
3641
3738
|
var SvgMediaControl = createControl(() => {
|
|
3642
|
-
const { value, setValue } = useBoundProp(
|
|
3739
|
+
const { value, setValue } = useBoundProp(import_editor_props28.imageSrcPropTypeUtil);
|
|
3643
3740
|
const { id, url } = value ?? {};
|
|
3644
3741
|
const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
|
|
3645
3742
|
const src = attachment?.url ?? url?.value ?? null;
|
|
3646
3743
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
3647
3744
|
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react34.useState)(false);
|
|
3745
|
+
const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
|
|
3746
|
+
const canManageOptions = canUser("manage_options");
|
|
3648
3747
|
const { open } = (0, import_wp_media2.useWpMediaFrame)({
|
|
3649
3748
|
mediaTypes: ["svg"],
|
|
3650
3749
|
multiple: false,
|
|
@@ -3672,16 +3771,21 @@ var SvgMediaControl = createControl(() => {
|
|
|
3672
3771
|
open(openOptions);
|
|
3673
3772
|
}
|
|
3674
3773
|
};
|
|
3675
|
-
|
|
3676
|
-
|
|
3774
|
+
const infotipProps = {
|
|
3775
|
+
title: (0, import_i18n27.__)("Sorry, you can't upload that file yet.", "elementor"),
|
|
3776
|
+
description: /* @__PURE__ */ React68.createElement(React68.Fragment, null, (0, import_i18n27.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React68.createElement("br", null), (0, import_i18n27.__)("file uploads.", "elementor")),
|
|
3777
|
+
isEnabled: !canManageOptions
|
|
3778
|
+
};
|
|
3779
|
+
return /* @__PURE__ */ React68.createElement(import_ui54.Stack, { gap: 1 }, /* @__PURE__ */ React68.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React68.createElement(ControlActions, null, /* @__PURE__ */ React68.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React68.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React68.createElement(import_ui54.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React68.createElement(
|
|
3780
|
+
import_ui54.CardMedia,
|
|
3677
3781
|
{
|
|
3678
3782
|
component: "img",
|
|
3679
3783
|
image: src,
|
|
3680
|
-
alt: (0,
|
|
3784
|
+
alt: (0, import_i18n27.__)("Preview SVG", "elementor"),
|
|
3681
3785
|
sx: { maxHeight: "140px", width: "50px" }
|
|
3682
3786
|
}
|
|
3683
|
-
)), /* @__PURE__ */
|
|
3684
|
-
|
|
3787
|
+
)), /* @__PURE__ */ React68.createElement(
|
|
3788
|
+
import_ui54.CardOverlay,
|
|
3685
3789
|
{
|
|
3686
3790
|
sx: {
|
|
3687
3791
|
"&:hover": {
|
|
@@ -3689,68 +3793,69 @@ var SvgMediaControl = createControl(() => {
|
|
|
3689
3793
|
}
|
|
3690
3794
|
}
|
|
3691
3795
|
},
|
|
3692
|
-
/* @__PURE__ */
|
|
3693
|
-
|
|
3796
|
+
/* @__PURE__ */ React68.createElement(import_ui54.Stack, { gap: 1 }, /* @__PURE__ */ React68.createElement(
|
|
3797
|
+
import_ui54.Button,
|
|
3694
3798
|
{
|
|
3695
3799
|
size: "tiny",
|
|
3696
3800
|
color: "inherit",
|
|
3697
3801
|
variant: "outlined",
|
|
3698
3802
|
onClick: () => handleClick(MODE_BROWSE)
|
|
3699
3803
|
},
|
|
3700
|
-
(0,
|
|
3701
|
-
), /* @__PURE__ */
|
|
3702
|
-
|
|
3804
|
+
(0, import_i18n27.__)("Select SVG", "elementor")
|
|
3805
|
+
), /* @__PURE__ */ React68.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React68.createElement("span", null, /* @__PURE__ */ React68.createElement(import_ui54.ThemeProvider, { colorScheme: canManageOptions ? "light" : "dark" }, /* @__PURE__ */ React68.createElement(
|
|
3806
|
+
import_ui54.Button,
|
|
3703
3807
|
{
|
|
3704
3808
|
size: "tiny",
|
|
3705
3809
|
variant: "text",
|
|
3706
3810
|
color: "inherit",
|
|
3707
|
-
startIcon: /* @__PURE__ */
|
|
3708
|
-
|
|
3811
|
+
startIcon: /* @__PURE__ */ React68.createElement(import_icons17.UploadIcon, null),
|
|
3812
|
+
disabled: canManageOptions ? false : true,
|
|
3813
|
+
onClick: () => canManageOptions && handleClick(MODE_UPLOAD)
|
|
3709
3814
|
},
|
|
3710
|
-
(0,
|
|
3711
|
-
))
|
|
3815
|
+
(0, import_i18n27.__)("Upload", "elementor")
|
|
3816
|
+
)))))
|
|
3712
3817
|
))));
|
|
3713
3818
|
});
|
|
3714
3819
|
|
|
3715
3820
|
// src/controls/background-control/background-control.tsx
|
|
3716
|
-
var
|
|
3717
|
-
var
|
|
3718
|
-
var
|
|
3719
|
-
var
|
|
3821
|
+
var React75 = __toESM(require("react"));
|
|
3822
|
+
var import_editor_props34 = require("@elementor/editor-props");
|
|
3823
|
+
var import_ui62 = require("@elementor/ui");
|
|
3824
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
3720
3825
|
|
|
3721
3826
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
3722
|
-
var
|
|
3723
|
-
var
|
|
3724
|
-
var
|
|
3827
|
+
var React74 = __toESM(require("react"));
|
|
3828
|
+
var import_editor_props33 = require("@elementor/editor-props");
|
|
3829
|
+
var import_ui61 = require("@elementor/ui");
|
|
3725
3830
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
3726
|
-
var
|
|
3831
|
+
var import_i18n32 = require("@wordpress/i18n");
|
|
3727
3832
|
|
|
3728
3833
|
// src/env.ts
|
|
3729
3834
|
var import_env = require("@elementor/env");
|
|
3730
3835
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
3731
3836
|
|
|
3732
3837
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
3733
|
-
var
|
|
3734
|
-
var
|
|
3735
|
-
var
|
|
3838
|
+
var React69 = __toESM(require("react"));
|
|
3839
|
+
var import_editor_props29 = require("@elementor/editor-props");
|
|
3840
|
+
var import_ui55 = require("@elementor/ui");
|
|
3736
3841
|
var BackgroundGradientColorControl = createControl(() => {
|
|
3737
|
-
const { value, setValue } = useBoundProp(
|
|
3842
|
+
const { value, setValue } = useBoundProp(import_editor_props29.backgroundGradientOverlayPropTypeUtil);
|
|
3738
3843
|
const handleChange = (newValue) => {
|
|
3739
3844
|
const transformedValue = createTransformableValue(newValue);
|
|
3740
3845
|
if (transformedValue.positions) {
|
|
3741
|
-
transformedValue.positions =
|
|
3846
|
+
transformedValue.positions = import_editor_props29.stringPropTypeUtil.create(newValue.positions.join(" "));
|
|
3742
3847
|
}
|
|
3743
3848
|
setValue(transformedValue);
|
|
3744
3849
|
};
|
|
3745
3850
|
const createTransformableValue = (newValue) => ({
|
|
3746
3851
|
...newValue,
|
|
3747
|
-
type:
|
|
3748
|
-
angle:
|
|
3749
|
-
stops:
|
|
3852
|
+
type: import_editor_props29.stringPropTypeUtil.create(newValue.type),
|
|
3853
|
+
angle: import_editor_props29.numberPropTypeUtil.create(newValue.angle),
|
|
3854
|
+
stops: import_editor_props29.gradientColorStopPropTypeUtil.create(
|
|
3750
3855
|
newValue.stops.map(
|
|
3751
|
-
({ color, offset }) =>
|
|
3752
|
-
color:
|
|
3753
|
-
offset:
|
|
3856
|
+
({ color, offset }) => import_editor_props29.colorStopPropTypeUtil.create({
|
|
3857
|
+
color: import_editor_props29.colorPropTypeUtil.create(color),
|
|
3858
|
+
offset: import_editor_props29.numberPropTypeUtil.create(offset)
|
|
3754
3859
|
})
|
|
3755
3860
|
)
|
|
3756
3861
|
)
|
|
@@ -3770,8 +3875,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
3770
3875
|
positions: positions?.value.split(" ")
|
|
3771
3876
|
};
|
|
3772
3877
|
};
|
|
3773
|
-
return /* @__PURE__ */
|
|
3774
|
-
|
|
3878
|
+
return /* @__PURE__ */ React69.createElement(ControlActions, null, /* @__PURE__ */ React69.createElement(
|
|
3879
|
+
import_ui55.UnstableGradientBox,
|
|
3775
3880
|
{
|
|
3776
3881
|
sx: { width: "auto", padding: 1.5 },
|
|
3777
3882
|
value: normalizeValue(),
|
|
@@ -3779,67 +3884,67 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
3779
3884
|
}
|
|
3780
3885
|
));
|
|
3781
3886
|
});
|
|
3782
|
-
var initialBackgroundGradientOverlay =
|
|
3783
|
-
type:
|
|
3784
|
-
angle:
|
|
3785
|
-
stops:
|
|
3786
|
-
|
|
3787
|
-
color:
|
|
3788
|
-
offset:
|
|
3887
|
+
var initialBackgroundGradientOverlay = import_editor_props29.backgroundGradientOverlayPropTypeUtil.create({
|
|
3888
|
+
type: import_editor_props29.stringPropTypeUtil.create("linear"),
|
|
3889
|
+
angle: import_editor_props29.numberPropTypeUtil.create(180),
|
|
3890
|
+
stops: import_editor_props29.gradientColorStopPropTypeUtil.create([
|
|
3891
|
+
import_editor_props29.colorStopPropTypeUtil.create({
|
|
3892
|
+
color: import_editor_props29.colorPropTypeUtil.create("rgb(0,0,0)"),
|
|
3893
|
+
offset: import_editor_props29.numberPropTypeUtil.create(0)
|
|
3789
3894
|
}),
|
|
3790
|
-
|
|
3791
|
-
color:
|
|
3792
|
-
offset:
|
|
3895
|
+
import_editor_props29.colorStopPropTypeUtil.create({
|
|
3896
|
+
color: import_editor_props29.colorPropTypeUtil.create("rgb(255,255,255)"),
|
|
3897
|
+
offset: import_editor_props29.numberPropTypeUtil.create(100)
|
|
3793
3898
|
})
|
|
3794
3899
|
])
|
|
3795
3900
|
});
|
|
3796
3901
|
|
|
3797
3902
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
3798
|
-
var
|
|
3903
|
+
var React70 = __toESM(require("react"));
|
|
3799
3904
|
var import_icons18 = require("@elementor/icons");
|
|
3800
|
-
var
|
|
3801
|
-
var
|
|
3905
|
+
var import_ui56 = require("@elementor/ui");
|
|
3906
|
+
var import_i18n28 = require("@wordpress/i18n");
|
|
3802
3907
|
var attachmentControlOptions = [
|
|
3803
3908
|
{
|
|
3804
3909
|
value: "fixed",
|
|
3805
|
-
label: (0,
|
|
3806
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3910
|
+
label: (0, import_i18n28.__)("Fixed", "elementor"),
|
|
3911
|
+
renderContent: ({ size }) => /* @__PURE__ */ React70.createElement(import_icons18.PinIcon, { fontSize: size }),
|
|
3807
3912
|
showTooltip: true
|
|
3808
3913
|
},
|
|
3809
3914
|
{
|
|
3810
3915
|
value: "scroll",
|
|
3811
|
-
label: (0,
|
|
3812
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3916
|
+
label: (0, import_i18n28.__)("Scroll", "elementor"),
|
|
3917
|
+
renderContent: ({ size }) => /* @__PURE__ */ React70.createElement(import_icons18.PinnedOffIcon, { fontSize: size }),
|
|
3813
3918
|
showTooltip: true
|
|
3814
3919
|
}
|
|
3815
3920
|
];
|
|
3816
3921
|
var BackgroundImageOverlayAttachment = () => {
|
|
3817
|
-
return /* @__PURE__ */
|
|
3922
|
+
return /* @__PURE__ */ React70.createElement(PopoverGridContainer, null, /* @__PURE__ */ React70.createElement(import_ui56.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(ControlFormLabel, null, (0, import_i18n28.__)("Attachment", "elementor"))), /* @__PURE__ */ React70.createElement(import_ui56.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React70.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
3818
3923
|
};
|
|
3819
3924
|
|
|
3820
3925
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
3821
|
-
var
|
|
3926
|
+
var React71 = __toESM(require("react"));
|
|
3822
3927
|
var import_react35 = require("react");
|
|
3823
|
-
var
|
|
3824
|
-
var
|
|
3928
|
+
var import_editor_props30 = require("@elementor/editor-props");
|
|
3929
|
+
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
3825
3930
|
var import_icons19 = require("@elementor/icons");
|
|
3826
|
-
var
|
|
3827
|
-
var
|
|
3931
|
+
var import_ui57 = require("@elementor/ui");
|
|
3932
|
+
var import_i18n29 = require("@wordpress/i18n");
|
|
3828
3933
|
var backgroundPositionOptions = [
|
|
3829
|
-
{ label: (0,
|
|
3830
|
-
{ label: (0,
|
|
3831
|
-
{ label: (0,
|
|
3832
|
-
{ label: (0,
|
|
3833
|
-
{ label: (0,
|
|
3834
|
-
{ label: (0,
|
|
3835
|
-
{ label: (0,
|
|
3836
|
-
{ label: (0,
|
|
3837
|
-
{ label: (0,
|
|
3838
|
-
{ label: (0,
|
|
3934
|
+
{ label: (0, import_i18n29.__)("Center center", "elementor"), value: "center center" },
|
|
3935
|
+
{ label: (0, import_i18n29.__)("Center left", "elementor"), value: "center left" },
|
|
3936
|
+
{ label: (0, import_i18n29.__)("Center right", "elementor"), value: "center right" },
|
|
3937
|
+
{ label: (0, import_i18n29.__)("Top center", "elementor"), value: "top center" },
|
|
3938
|
+
{ label: (0, import_i18n29.__)("Top left", "elementor"), value: "top left" },
|
|
3939
|
+
{ label: (0, import_i18n29.__)("Top right", "elementor"), value: "top right" },
|
|
3940
|
+
{ label: (0, import_i18n29.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
3941
|
+
{ label: (0, import_i18n29.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
3942
|
+
{ label: (0, import_i18n29.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
3943
|
+
{ label: (0, import_i18n29.__)("Custom", "elementor"), value: "custom" }
|
|
3839
3944
|
];
|
|
3840
3945
|
var BackgroundImageOverlayPosition = () => {
|
|
3841
|
-
const backgroundImageOffsetContext = useBoundProp(
|
|
3842
|
-
const stringPropContext = useBoundProp(
|
|
3946
|
+
const backgroundImageOffsetContext = useBoundProp(import_editor_props30.backgroundImagePositionOffsetPropTypeUtil);
|
|
3947
|
+
const stringPropContext = useBoundProp(import_editor_props30.stringPropTypeUtil);
|
|
3843
3948
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
3844
3949
|
const rowRef = (0, import_react35.useRef)(null);
|
|
3845
3950
|
const handlePositionChange = (event) => {
|
|
@@ -3850,8 +3955,8 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
3850
3955
|
stringPropContext.setValue(value);
|
|
3851
3956
|
}
|
|
3852
3957
|
};
|
|
3853
|
-
return /* @__PURE__ */
|
|
3854
|
-
|
|
3958
|
+
return /* @__PURE__ */ React71.createElement(import_ui57.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React71.createElement(import_ui57.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(PopoverGridContainer, null, /* @__PURE__ */ React71.createElement(import_ui57.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(ControlFormLabel, null, (0, import_i18n29.__)("Position", "elementor"))), /* @__PURE__ */ React71.createElement(import_ui57.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React71.createElement(
|
|
3959
|
+
import_ui57.Select,
|
|
3855
3960
|
{
|
|
3856
3961
|
fullWidth: true,
|
|
3857
3962
|
size: "tiny",
|
|
@@ -3859,18 +3964,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
3859
3964
|
disabled: stringPropContext.disabled,
|
|
3860
3965
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
3861
3966
|
},
|
|
3862
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
3863
|
-
)))), isCustom ? /* @__PURE__ */
|
|
3967
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React71.createElement(import_editor_ui8.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
3968
|
+
)))), isCustom ? /* @__PURE__ */ React71.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React71.createElement(import_ui57.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(import_ui57.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React71.createElement(import_ui57.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React71.createElement(
|
|
3864
3969
|
SizeControl,
|
|
3865
3970
|
{
|
|
3866
|
-
startIcon: /* @__PURE__ */
|
|
3971
|
+
startIcon: /* @__PURE__ */ React71.createElement(import_icons19.LetterXIcon, { fontSize: "tiny" }),
|
|
3867
3972
|
anchorRef: rowRef,
|
|
3868
3973
|
min: -Number.MAX_SAFE_INTEGER
|
|
3869
3974
|
}
|
|
3870
|
-
))), /* @__PURE__ */
|
|
3975
|
+
))), /* @__PURE__ */ React71.createElement(import_ui57.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React71.createElement(
|
|
3871
3976
|
SizeControl,
|
|
3872
3977
|
{
|
|
3873
|
-
startIcon: /* @__PURE__ */
|
|
3978
|
+
startIcon: /* @__PURE__ */ React71.createElement(import_icons19.LetterYIcon, { fontSize: "tiny" }),
|
|
3874
3979
|
anchorRef: rowRef,
|
|
3875
3980
|
min: -Number.MAX_SAFE_INTEGER
|
|
3876
3981
|
}
|
|
@@ -3878,76 +3983,76 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
3878
3983
|
};
|
|
3879
3984
|
|
|
3880
3985
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
3881
|
-
var
|
|
3986
|
+
var React72 = __toESM(require("react"));
|
|
3882
3987
|
var import_icons20 = require("@elementor/icons");
|
|
3883
|
-
var
|
|
3884
|
-
var
|
|
3988
|
+
var import_ui58 = require("@elementor/ui");
|
|
3989
|
+
var import_i18n30 = require("@wordpress/i18n");
|
|
3885
3990
|
var repeatControlOptions = [
|
|
3886
3991
|
{
|
|
3887
3992
|
value: "repeat",
|
|
3888
|
-
label: (0,
|
|
3889
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3993
|
+
label: (0, import_i18n30.__)("Repeat", "elementor"),
|
|
3994
|
+
renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(import_icons20.GridDotsIcon, { fontSize: size }),
|
|
3890
3995
|
showTooltip: true
|
|
3891
3996
|
},
|
|
3892
3997
|
{
|
|
3893
3998
|
value: "repeat-x",
|
|
3894
|
-
label: (0,
|
|
3895
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3999
|
+
label: (0, import_i18n30.__)("Repeat-x", "elementor"),
|
|
4000
|
+
renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(import_icons20.DotsHorizontalIcon, { fontSize: size }),
|
|
3896
4001
|
showTooltip: true
|
|
3897
4002
|
},
|
|
3898
4003
|
{
|
|
3899
4004
|
value: "repeat-y",
|
|
3900
|
-
label: (0,
|
|
3901
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4005
|
+
label: (0, import_i18n30.__)("Repeat-y", "elementor"),
|
|
4006
|
+
renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(import_icons20.DotsVerticalIcon, { fontSize: size }),
|
|
3902
4007
|
showTooltip: true
|
|
3903
4008
|
},
|
|
3904
4009
|
{
|
|
3905
4010
|
value: "no-repeat",
|
|
3906
|
-
label: (0,
|
|
3907
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4011
|
+
label: (0, import_i18n30.__)("No-repeat", "elementor"),
|
|
4012
|
+
renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(import_icons20.XIcon, { fontSize: size }),
|
|
3908
4013
|
showTooltip: true
|
|
3909
4014
|
}
|
|
3910
4015
|
];
|
|
3911
4016
|
var BackgroundImageOverlayRepeat = () => {
|
|
3912
|
-
return /* @__PURE__ */
|
|
4017
|
+
return /* @__PURE__ */ React72.createElement(PopoverGridContainer, null, /* @__PURE__ */ React72.createElement(import_ui58.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlFormLabel, null, (0, import_i18n30.__)("Repeat", "elementor"))), /* @__PURE__ */ React72.createElement(import_ui58.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React72.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
3913
4018
|
};
|
|
3914
4019
|
|
|
3915
4020
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
3916
|
-
var
|
|
4021
|
+
var React73 = __toESM(require("react"));
|
|
3917
4022
|
var import_react36 = require("react");
|
|
3918
|
-
var
|
|
4023
|
+
var import_editor_props31 = require("@elementor/editor-props");
|
|
3919
4024
|
var import_icons21 = require("@elementor/icons");
|
|
3920
|
-
var
|
|
3921
|
-
var
|
|
4025
|
+
var import_ui59 = require("@elementor/ui");
|
|
4026
|
+
var import_i18n31 = require("@wordpress/i18n");
|
|
3922
4027
|
var sizeControlOptions = [
|
|
3923
4028
|
{
|
|
3924
4029
|
value: "auto",
|
|
3925
|
-
label: (0,
|
|
3926
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4030
|
+
label: (0, import_i18n31.__)("Auto", "elementor"),
|
|
4031
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(import_icons21.LetterAIcon, { fontSize: size }),
|
|
3927
4032
|
showTooltip: true
|
|
3928
4033
|
},
|
|
3929
4034
|
{
|
|
3930
4035
|
value: "cover",
|
|
3931
|
-
label: (0,
|
|
3932
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4036
|
+
label: (0, import_i18n31.__)("Cover", "elementor"),
|
|
4037
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(import_icons21.ArrowsMaximizeIcon, { fontSize: size }),
|
|
3933
4038
|
showTooltip: true
|
|
3934
4039
|
},
|
|
3935
4040
|
{
|
|
3936
4041
|
value: "contain",
|
|
3937
|
-
label: (0,
|
|
3938
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4042
|
+
label: (0, import_i18n31.__)("Contain", "elementor"),
|
|
4043
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(import_icons21.ArrowBarBothIcon, { fontSize: size }),
|
|
3939
4044
|
showTooltip: true
|
|
3940
4045
|
},
|
|
3941
4046
|
{
|
|
3942
4047
|
value: "custom",
|
|
3943
|
-
label: (0,
|
|
3944
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4048
|
+
label: (0, import_i18n31.__)("Custom", "elementor"),
|
|
4049
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(import_icons21.PencilIcon, { fontSize: size }),
|
|
3945
4050
|
showTooltip: true
|
|
3946
4051
|
}
|
|
3947
4052
|
];
|
|
3948
4053
|
var BackgroundImageOverlaySize = () => {
|
|
3949
|
-
const backgroundImageScaleContext = useBoundProp(
|
|
3950
|
-
const stringPropContext = useBoundProp(
|
|
4054
|
+
const backgroundImageScaleContext = useBoundProp(import_editor_props31.backgroundImageSizeScalePropTypeUtil);
|
|
4055
|
+
const stringPropContext = useBoundProp(import_editor_props31.stringPropTypeUtil);
|
|
3951
4056
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
3952
4057
|
const rowRef = (0, import_react36.useRef)(null);
|
|
3953
4058
|
const handleSizeChange = (size) => {
|
|
@@ -3957,7 +4062,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
3957
4062
|
stringPropContext.setValue(size);
|
|
3958
4063
|
}
|
|
3959
4064
|
};
|
|
3960
|
-
return /* @__PURE__ */
|
|
4065
|
+
return /* @__PURE__ */ React73.createElement(import_ui59.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React73.createElement(import_ui59.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React73.createElement(PopoverGridContainer, null, /* @__PURE__ */ React73.createElement(import_ui59.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(ControlFormLabel, null, (0, import_i18n31.__)("Size", "elementor"))), /* @__PURE__ */ React73.createElement(import_ui59.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React73.createElement(
|
|
3961
4066
|
ControlToggleButtonGroup,
|
|
3962
4067
|
{
|
|
3963
4068
|
exclusive: true,
|
|
@@ -3966,17 +4071,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
3966
4071
|
disabled: stringPropContext.disabled,
|
|
3967
4072
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
3968
4073
|
}
|
|
3969
|
-
)))), isCustom ? /* @__PURE__ */
|
|
4074
|
+
)))), isCustom ? /* @__PURE__ */ React73.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React73.createElement(import_ui59.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React73.createElement(PopoverGridContainer, null, /* @__PURE__ */ React73.createElement(import_ui59.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React73.createElement(
|
|
3970
4075
|
SizeControl,
|
|
3971
4076
|
{
|
|
3972
|
-
startIcon: /* @__PURE__ */
|
|
4077
|
+
startIcon: /* @__PURE__ */ React73.createElement(import_icons21.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
3973
4078
|
extendedOptions: ["auto"],
|
|
3974
4079
|
anchorRef: rowRef
|
|
3975
4080
|
}
|
|
3976
|
-
))), /* @__PURE__ */
|
|
4081
|
+
))), /* @__PURE__ */ React73.createElement(import_ui59.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React73.createElement(
|
|
3977
4082
|
SizeControl,
|
|
3978
4083
|
{
|
|
3979
|
-
startIcon: /* @__PURE__ */
|
|
4084
|
+
startIcon: /* @__PURE__ */ React73.createElement(import_icons21.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
3980
4085
|
extendedOptions: ["auto"],
|
|
3981
4086
|
anchorRef: rowRef
|
|
3982
4087
|
}
|
|
@@ -3985,16 +4090,16 @@ var BackgroundImageOverlaySize = () => {
|
|
|
3985
4090
|
|
|
3986
4091
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
3987
4092
|
var import_react37 = require("react");
|
|
3988
|
-
var
|
|
3989
|
-
var
|
|
4093
|
+
var import_editor_props32 = require("@elementor/editor-props");
|
|
4094
|
+
var import_ui60 = require("@elementor/ui");
|
|
3990
4095
|
var useBackgroundTabsHistory = ({
|
|
3991
4096
|
color: initialBackgroundColorOverlay2,
|
|
3992
4097
|
image: initialBackgroundImageOverlay,
|
|
3993
4098
|
gradient: initialBackgroundGradientOverlay2
|
|
3994
4099
|
}) => {
|
|
3995
|
-
const { value: imageValue, setValue: setImageValue } = useBoundProp(
|
|
3996
|
-
const { value: colorValue, setValue: setColorValue } = useBoundProp(
|
|
3997
|
-
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(
|
|
4100
|
+
const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props32.backgroundImageOverlayPropTypeUtil);
|
|
4101
|
+
const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props32.backgroundColorOverlayPropTypeUtil);
|
|
4102
|
+
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props32.backgroundGradientOverlayPropTypeUtil);
|
|
3998
4103
|
const getCurrentOverlayType = () => {
|
|
3999
4104
|
if (colorValue) {
|
|
4000
4105
|
return "color";
|
|
@@ -4004,7 +4109,7 @@ var useBackgroundTabsHistory = ({
|
|
|
4004
4109
|
}
|
|
4005
4110
|
return "image";
|
|
4006
4111
|
};
|
|
4007
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
4112
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui60.useTabs)(getCurrentOverlayType());
|
|
4008
4113
|
const valuesHistory = (0, import_react37.useRef)({
|
|
4009
4114
|
image: initialBackgroundImageOverlay,
|
|
4010
4115
|
color: initialBackgroundColorOverlay2,
|
|
@@ -4043,9 +4148,9 @@ var useBackgroundTabsHistory = ({
|
|
|
4043
4148
|
|
|
4044
4149
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
4045
4150
|
var DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = "#00000033";
|
|
4046
|
-
var initialBackgroundColorOverlay =
|
|
4151
|
+
var initialBackgroundColorOverlay = import_editor_props33.backgroundColorOverlayPropTypeUtil.create(
|
|
4047
4152
|
{
|
|
4048
|
-
color:
|
|
4153
|
+
color: import_editor_props33.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
|
|
4049
4154
|
}
|
|
4050
4155
|
);
|
|
4051
4156
|
var getInitialBackgroundOverlay = () => ({
|
|
@@ -4073,29 +4178,29 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
4073
4178
|
}
|
|
4074
4179
|
});
|
|
4075
4180
|
var backgroundResolutionOptions = [
|
|
4076
|
-
{ label: (0,
|
|
4077
|
-
{ label: (0,
|
|
4078
|
-
{ label: (0,
|
|
4079
|
-
{ label: (0,
|
|
4181
|
+
{ label: (0, import_i18n32.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
4182
|
+
{ label: (0, import_i18n32.__)("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
4183
|
+
{ label: (0, import_i18n32.__)("Large 1024 x 1024", "elementor"), value: "large" },
|
|
4184
|
+
{ label: (0, import_i18n32.__)("Full", "elementor"), value: "full" }
|
|
4080
4185
|
];
|
|
4081
4186
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
4082
|
-
const { propType, value: overlayValues, setValue } = useBoundProp(
|
|
4083
|
-
return /* @__PURE__ */
|
|
4187
|
+
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props33.backgroundOverlayPropTypeUtil);
|
|
4188
|
+
return /* @__PURE__ */ React74.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React74.createElement(
|
|
4084
4189
|
ControlRepeater,
|
|
4085
4190
|
{
|
|
4086
4191
|
initial: getInitialBackgroundOverlay(),
|
|
4087
|
-
propTypeUtil:
|
|
4192
|
+
propTypeUtil: import_editor_props33.backgroundOverlayPropTypeUtil
|
|
4088
4193
|
},
|
|
4089
|
-
/* @__PURE__ */
|
|
4090
|
-
/* @__PURE__ */
|
|
4194
|
+
/* @__PURE__ */ React74.createElement(Header, { label: (0, import_i18n32.__)("Overlay", "elementor") }, /* @__PURE__ */ React74.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
4195
|
+
/* @__PURE__ */ React74.createElement(ItemsContainer, null, /* @__PURE__ */ React74.createElement(
|
|
4091
4196
|
Item,
|
|
4092
4197
|
{
|
|
4093
4198
|
Icon: ItemIcon2,
|
|
4094
4199
|
Label: ItemLabel2,
|
|
4095
|
-
actions: /* @__PURE__ */
|
|
4200
|
+
actions: /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(DuplicateItemAction, null), /* @__PURE__ */ React74.createElement(DisableItemAction, null), /* @__PURE__ */ React74.createElement(RemoveItemAction, null))
|
|
4096
4201
|
}
|
|
4097
4202
|
)),
|
|
4098
|
-
/* @__PURE__ */
|
|
4203
|
+
/* @__PURE__ */ React74.createElement(EditItemPopover, null, /* @__PURE__ */ React74.createElement(ItemContent, null))
|
|
4099
4204
|
));
|
|
4100
4205
|
});
|
|
4101
4206
|
var ItemContent = () => {
|
|
@@ -4105,27 +4210,27 @@ var ItemContent = () => {
|
|
|
4105
4210
|
gradient: initialBackgroundGradientOverlay.value
|
|
4106
4211
|
});
|
|
4107
4212
|
const { rowRef } = useRepeaterContext();
|
|
4108
|
-
return /* @__PURE__ */
|
|
4109
|
-
|
|
4213
|
+
return /* @__PURE__ */ React74.createElement(import_ui61.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React74.createElement(import_ui61.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React74.createElement(
|
|
4214
|
+
import_ui61.Tabs,
|
|
4110
4215
|
{
|
|
4111
4216
|
size: "small",
|
|
4112
4217
|
variant: "fullWidth",
|
|
4113
4218
|
...getTabsProps(),
|
|
4114
|
-
"aria-label": (0,
|
|
4219
|
+
"aria-label": (0, import_i18n32.__)("Background Overlay", "elementor")
|
|
4115
4220
|
},
|
|
4116
|
-
/* @__PURE__ */
|
|
4117
|
-
/* @__PURE__ */
|
|
4118
|
-
/* @__PURE__ */
|
|
4119
|
-
)), /* @__PURE__ */
|
|
4221
|
+
/* @__PURE__ */ React74.createElement(import_ui61.Tab, { label: (0, import_i18n32.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
4222
|
+
/* @__PURE__ */ React74.createElement(import_ui61.Tab, { label: (0, import_i18n32.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
4223
|
+
/* @__PURE__ */ React74.createElement(import_ui61.Tab, { label: (0, import_i18n32.__)("Color", "elementor"), ...getTabProps("color") })
|
|
4224
|
+
)), /* @__PURE__ */ React74.createElement(import_ui61.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React74.createElement(PopoverContent, null, /* @__PURE__ */ React74.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React74.createElement(import_ui61.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React74.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React74.createElement(import_ui61.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React74.createElement(PopoverContent, null, /* @__PURE__ */ React74.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
4120
4225
|
};
|
|
4121
4226
|
var ItemIcon2 = ({ value }) => {
|
|
4122
4227
|
switch (value.$$type) {
|
|
4123
4228
|
case "background-image-overlay":
|
|
4124
|
-
return /* @__PURE__ */
|
|
4229
|
+
return /* @__PURE__ */ React74.createElement(ItemIconImage, { value });
|
|
4125
4230
|
case "background-color-overlay":
|
|
4126
|
-
return /* @__PURE__ */
|
|
4231
|
+
return /* @__PURE__ */ React74.createElement(ItemIconColor, { value });
|
|
4127
4232
|
case "background-gradient-overlay":
|
|
4128
|
-
return /* @__PURE__ */
|
|
4233
|
+
return /* @__PURE__ */ React74.createElement(ItemIconGradient, { value });
|
|
4129
4234
|
default:
|
|
4130
4235
|
return null;
|
|
4131
4236
|
}
|
|
@@ -4138,12 +4243,12 @@ var extractColorFrom = (prop) => {
|
|
|
4138
4243
|
};
|
|
4139
4244
|
var ItemIconColor = ({ value: prop }) => {
|
|
4140
4245
|
const color = extractColorFrom(prop);
|
|
4141
|
-
return /* @__PURE__ */
|
|
4246
|
+
return /* @__PURE__ */ React74.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
4142
4247
|
};
|
|
4143
4248
|
var ItemIconImage = ({ value }) => {
|
|
4144
4249
|
const { imageUrl } = useImage(value);
|
|
4145
|
-
return /* @__PURE__ */
|
|
4146
|
-
|
|
4250
|
+
return /* @__PURE__ */ React74.createElement(
|
|
4251
|
+
import_ui61.CardMedia,
|
|
4147
4252
|
{
|
|
4148
4253
|
image: imageUrl,
|
|
4149
4254
|
sx: (theme) => ({
|
|
@@ -4157,43 +4262,43 @@ var ItemIconImage = ({ value }) => {
|
|
|
4157
4262
|
};
|
|
4158
4263
|
var ItemIconGradient = ({ value }) => {
|
|
4159
4264
|
const gradient = getGradientValue(value);
|
|
4160
|
-
return /* @__PURE__ */
|
|
4265
|
+
return /* @__PURE__ */ React74.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
4161
4266
|
};
|
|
4162
4267
|
var ItemLabel2 = ({ value }) => {
|
|
4163
4268
|
switch (value.$$type) {
|
|
4164
4269
|
case "background-image-overlay":
|
|
4165
|
-
return /* @__PURE__ */
|
|
4270
|
+
return /* @__PURE__ */ React74.createElement(ItemLabelImage, { value });
|
|
4166
4271
|
case "background-color-overlay":
|
|
4167
|
-
return /* @__PURE__ */
|
|
4272
|
+
return /* @__PURE__ */ React74.createElement(ItemLabelColor, { value });
|
|
4168
4273
|
case "background-gradient-overlay":
|
|
4169
|
-
return /* @__PURE__ */
|
|
4274
|
+
return /* @__PURE__ */ React74.createElement(ItemLabelGradient, { value });
|
|
4170
4275
|
default:
|
|
4171
4276
|
return null;
|
|
4172
4277
|
}
|
|
4173
4278
|
};
|
|
4174
4279
|
var ItemLabelColor = ({ value: prop }) => {
|
|
4175
4280
|
const color = extractColorFrom(prop);
|
|
4176
|
-
return /* @__PURE__ */
|
|
4281
|
+
return /* @__PURE__ */ React74.createElement("span", null, color);
|
|
4177
4282
|
};
|
|
4178
4283
|
var ItemLabelImage = ({ value }) => {
|
|
4179
4284
|
const { imageTitle } = useImage(value);
|
|
4180
|
-
return /* @__PURE__ */
|
|
4285
|
+
return /* @__PURE__ */ React74.createElement("span", null, imageTitle);
|
|
4181
4286
|
};
|
|
4182
4287
|
var ItemLabelGradient = ({ value }) => {
|
|
4183
4288
|
if (value.value.type.value === "linear") {
|
|
4184
|
-
return /* @__PURE__ */
|
|
4289
|
+
return /* @__PURE__ */ React74.createElement("span", null, (0, import_i18n32.__)("Linear Gradient", "elementor"));
|
|
4185
4290
|
}
|
|
4186
|
-
return /* @__PURE__ */
|
|
4291
|
+
return /* @__PURE__ */ React74.createElement("span", null, (0, import_i18n32.__)("Radial Gradient", "elementor"));
|
|
4187
4292
|
};
|
|
4188
4293
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
4189
|
-
const propContext = useBoundProp(
|
|
4190
|
-
return /* @__PURE__ */
|
|
4294
|
+
const propContext = useBoundProp(import_editor_props33.backgroundColorOverlayPropTypeUtil);
|
|
4295
|
+
return /* @__PURE__ */ React74.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React74.createElement(ColorControl, { anchorEl })));
|
|
4191
4296
|
};
|
|
4192
4297
|
var ImageOverlayContent = () => {
|
|
4193
|
-
const propContext = useBoundProp(
|
|
4194
|
-
return /* @__PURE__ */
|
|
4298
|
+
const propContext = useBoundProp(import_editor_props33.backgroundImageOverlayPropTypeUtil);
|
|
4299
|
+
return /* @__PURE__ */ React74.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React74.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React74.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React74.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React74.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React74.createElement(BackgroundImageOverlayAttachment, null)));
|
|
4195
4300
|
};
|
|
4196
|
-
var StyledUnstableColorIndicator3 = (0,
|
|
4301
|
+
var StyledUnstableColorIndicator3 = (0, import_ui61.styled)(import_ui61.UnstableColorIndicator)(({ theme }) => ({
|
|
4197
4302
|
height: "1rem",
|
|
4198
4303
|
width: "1rem",
|
|
4199
4304
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
@@ -4230,29 +4335,29 @@ var getGradientValue = (value) => {
|
|
|
4230
4335
|
|
|
4231
4336
|
// src/controls/background-control/background-control.tsx
|
|
4232
4337
|
var clipOptions = [
|
|
4233
|
-
{ label: (0,
|
|
4234
|
-
{ label: (0,
|
|
4235
|
-
{ label: (0,
|
|
4236
|
-
{ label: (0,
|
|
4338
|
+
{ label: (0, import_i18n33.__)("Border edges", "elementor"), value: "border-box" },
|
|
4339
|
+
{ label: (0, import_i18n33.__)("Padding edges", "elementor"), value: "padding-box" },
|
|
4340
|
+
{ label: (0, import_i18n33.__)("Content edges", "elementor"), value: "content-box" },
|
|
4341
|
+
{ label: (0, import_i18n33.__)("Text", "elementor"), value: "text" }
|
|
4237
4342
|
];
|
|
4238
|
-
var colorLabel = (0,
|
|
4239
|
-
var clipLabel = (0,
|
|
4343
|
+
var colorLabel = (0, import_i18n33.__)("Color", "elementor");
|
|
4344
|
+
var clipLabel = (0, import_i18n33.__)("Clipping", "elementor");
|
|
4240
4345
|
var BackgroundControl = createControl(() => {
|
|
4241
|
-
const propContext = useBoundProp(
|
|
4242
|
-
return /* @__PURE__ */
|
|
4346
|
+
const propContext = useBoundProp(import_editor_props34.backgroundPropTypeUtil);
|
|
4347
|
+
return /* @__PURE__ */ React75.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React75.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React75.createElement(BackgroundColorField, null), /* @__PURE__ */ React75.createElement(BackgroundClipField, null));
|
|
4243
4348
|
});
|
|
4244
4349
|
var BackgroundColorField = () => {
|
|
4245
|
-
return /* @__PURE__ */
|
|
4350
|
+
return /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React75.createElement(import_ui62.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React75.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React75.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ColorControl, null))));
|
|
4246
4351
|
};
|
|
4247
4352
|
var BackgroundClipField = () => {
|
|
4248
|
-
return /* @__PURE__ */
|
|
4353
|
+
return /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React75.createElement(import_ui62.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React75.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React75.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(SelectControl, { options: clipOptions }))));
|
|
4249
4354
|
};
|
|
4250
4355
|
|
|
4251
4356
|
// src/controls/repeatable-control.tsx
|
|
4252
|
-
var
|
|
4357
|
+
var React76 = __toESM(require("react"));
|
|
4253
4358
|
var import_react39 = require("react");
|
|
4254
|
-
var
|
|
4255
|
-
var
|
|
4359
|
+
var import_editor_props35 = require("@elementor/editor-props");
|
|
4360
|
+
var import_ui63 = require("@elementor/ui");
|
|
4256
4361
|
|
|
4257
4362
|
// src/hooks/use-repeatable-control-context.ts
|
|
4258
4363
|
var import_react38 = require("react");
|
|
@@ -4284,7 +4389,7 @@ var RepeatableControl = createControl(
|
|
|
4284
4389
|
return null;
|
|
4285
4390
|
}
|
|
4286
4391
|
const childArrayPropTypeUtil = (0, import_react39.useMemo)(
|
|
4287
|
-
() => (0,
|
|
4392
|
+
() => (0, import_editor_props35.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
4288
4393
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
4289
4394
|
);
|
|
4290
4395
|
const contextValue = (0, import_react39.useMemo)(
|
|
@@ -4296,13 +4401,13 @@ var RepeatableControl = createControl(
|
|
|
4296
4401
|
[childControlConfig, placeholder, patternLabel]
|
|
4297
4402
|
);
|
|
4298
4403
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
4299
|
-
return /* @__PURE__ */
|
|
4404
|
+
return /* @__PURE__ */ React76.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React76.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React76.createElement(
|
|
4300
4405
|
ControlRepeater,
|
|
4301
4406
|
{
|
|
4302
4407
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
4303
4408
|
propTypeUtil: childArrayPropTypeUtil
|
|
4304
4409
|
},
|
|
4305
|
-
/* @__PURE__ */
|
|
4410
|
+
/* @__PURE__ */ React76.createElement(Header, { label: repeaterLabel }, /* @__PURE__ */ React76.createElement(
|
|
4306
4411
|
TooltipAddItemAction,
|
|
4307
4412
|
{
|
|
4308
4413
|
...addItemTooltipProps,
|
|
@@ -4310,22 +4415,22 @@ var RepeatableControl = createControl(
|
|
|
4310
4415
|
ariaLabel: repeaterLabel
|
|
4311
4416
|
}
|
|
4312
4417
|
)),
|
|
4313
|
-
/* @__PURE__ */
|
|
4418
|
+
/* @__PURE__ */ React76.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React76.createElement(
|
|
4314
4419
|
Item,
|
|
4315
4420
|
{
|
|
4316
4421
|
Icon: ItemIcon3,
|
|
4317
4422
|
Label: ItemLabel3,
|
|
4318
|
-
actions: /* @__PURE__ */
|
|
4423
|
+
actions: /* @__PURE__ */ React76.createElement(React76.Fragment, null, showDuplicate && /* @__PURE__ */ React76.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React76.createElement(DisableItemAction, null), /* @__PURE__ */ React76.createElement(RemoveItemAction, null))
|
|
4319
4424
|
}
|
|
4320
4425
|
)),
|
|
4321
|
-
/* @__PURE__ */
|
|
4426
|
+
/* @__PURE__ */ React76.createElement(EditItemPopover, null, /* @__PURE__ */ React76.createElement(Content2, null))
|
|
4322
4427
|
)));
|
|
4323
4428
|
}
|
|
4324
4429
|
);
|
|
4325
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
4430
|
+
var ItemIcon3 = () => /* @__PURE__ */ React76.createElement(React76.Fragment, null);
|
|
4326
4431
|
var Content2 = () => {
|
|
4327
4432
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
4328
|
-
return /* @__PURE__ */
|
|
4433
|
+
return /* @__PURE__ */ React76.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React76.createElement(PopoverGridContainer, null, /* @__PURE__ */ React76.createElement(ChildControl, { ...props })));
|
|
4329
4434
|
};
|
|
4330
4435
|
var interpolate = (template, data) => {
|
|
4331
4436
|
if (!data) {
|
|
@@ -4387,7 +4492,7 @@ var ItemLabel3 = ({ value }) => {
|
|
|
4387
4492
|
const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
|
|
4388
4493
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
4389
4494
|
const color = showPlaceholder ? "text.tertiary" : "text.primary";
|
|
4390
|
-
return /* @__PURE__ */
|
|
4495
|
+
return /* @__PURE__ */ React76.createElement(import_ui63.Box, { component: "span", color }, label);
|
|
4391
4496
|
};
|
|
4392
4497
|
var getAllProperties = (pattern) => {
|
|
4393
4498
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -4395,11 +4500,11 @@ var getAllProperties = (pattern) => {
|
|
|
4395
4500
|
};
|
|
4396
4501
|
|
|
4397
4502
|
// src/controls/key-value-control.tsx
|
|
4398
|
-
var
|
|
4503
|
+
var React77 = __toESM(require("react"));
|
|
4399
4504
|
var import_react40 = require("react");
|
|
4400
|
-
var
|
|
4401
|
-
var
|
|
4402
|
-
var
|
|
4505
|
+
var import_editor_props36 = require("@elementor/editor-props");
|
|
4506
|
+
var import_ui64 = require("@elementor/ui");
|
|
4507
|
+
var import_i18n34 = require("@wordpress/i18n");
|
|
4403
4508
|
|
|
4404
4509
|
// src/utils/escape-html-attr.ts
|
|
4405
4510
|
var escapeHtmlAttr = (value) => {
|
|
@@ -4415,15 +4520,15 @@ var escapeHtmlAttr = (value) => {
|
|
|
4415
4520
|
|
|
4416
4521
|
// src/controls/key-value-control.tsx
|
|
4417
4522
|
var KeyValueControl = createControl((props = {}) => {
|
|
4418
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
4523
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props36.keyValuePropTypeUtil);
|
|
4419
4524
|
const [keyError, setKeyError] = (0, import_react40.useState)("");
|
|
4420
4525
|
const [valueError, setValueError] = (0, import_react40.useState)("");
|
|
4421
4526
|
const [sessionState, setSessionState] = (0, import_react40.useState)({
|
|
4422
4527
|
key: value?.key?.value || "",
|
|
4423
4528
|
value: value?.value?.value || ""
|
|
4424
4529
|
});
|
|
4425
|
-
const keyLabel = props.keyName || (0,
|
|
4426
|
-
const valueLabel = props.valueName || (0,
|
|
4530
|
+
const keyLabel = props.keyName || (0, import_i18n34.__)("Key", "elementor");
|
|
4531
|
+
const valueLabel = props.valueName || (0, import_i18n34.__)("Value", "elementor");
|
|
4427
4532
|
const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
|
|
4428
4533
|
keyHelper: void 0,
|
|
4429
4534
|
valueHelper: void 0
|
|
@@ -4432,7 +4537,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4432
4537
|
() => [
|
|
4433
4538
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
4434
4539
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
4435
|
-
props.validationErrorMessage || (0,
|
|
4540
|
+
props.validationErrorMessage || (0, import_i18n34.__)("Invalid Format", "elementor")
|
|
4436
4541
|
],
|
|
4437
4542
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
4438
4543
|
);
|
|
@@ -4454,14 +4559,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4454
4559
|
return;
|
|
4455
4560
|
}
|
|
4456
4561
|
const newChangedValue = newValue[fieldType];
|
|
4457
|
-
if ((0,
|
|
4562
|
+
if ((0, import_editor_props36.isTransformable)(newChangedValue) && newChangedValue.$$type === "dynamic") {
|
|
4458
4563
|
setValue({
|
|
4459
4564
|
...value,
|
|
4460
4565
|
[fieldType]: newChangedValue
|
|
4461
4566
|
});
|
|
4462
4567
|
return;
|
|
4463
4568
|
}
|
|
4464
|
-
const extractedValue =
|
|
4569
|
+
const extractedValue = import_editor_props36.stringPropTypeUtil.extract(newChangedValue);
|
|
4465
4570
|
setSessionState((prev) => ({
|
|
4466
4571
|
...prev,
|
|
4467
4572
|
[fieldType]: extractedValue
|
|
@@ -4481,14 +4586,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4481
4586
|
});
|
|
4482
4587
|
}
|
|
4483
4588
|
};
|
|
4484
|
-
return /* @__PURE__ */
|
|
4589
|
+
return /* @__PURE__ */ React77.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React77.createElement(import_ui64.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React77.createElement(import_ui64.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React77.createElement(import_ui64.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React77.createElement(
|
|
4485
4590
|
TextControl,
|
|
4486
4591
|
{
|
|
4487
4592
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
4488
4593
|
error: !!keyError,
|
|
4489
4594
|
helperText: keyHelper
|
|
4490
4595
|
}
|
|
4491
|
-
)), !!keyError && /* @__PURE__ */
|
|
4596
|
+
)), !!keyError && /* @__PURE__ */ React77.createElement(import_ui64.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React77.createElement(import_ui64.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React77.createElement(import_ui64.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React77.createElement(
|
|
4492
4597
|
TextControl,
|
|
4493
4598
|
{
|
|
4494
4599
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -4496,31 +4601,31 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4496
4601
|
inputDisabled: !!keyError,
|
|
4497
4602
|
helperText: valueHelper
|
|
4498
4603
|
}
|
|
4499
|
-
)), !!valueError && /* @__PURE__ */
|
|
4604
|
+
)), !!valueError && /* @__PURE__ */ React77.createElement(import_ui64.FormHelperText, { error: true }, valueError))));
|
|
4500
4605
|
});
|
|
4501
4606
|
|
|
4502
4607
|
// src/controls/position-control.tsx
|
|
4503
|
-
var
|
|
4504
|
-
var
|
|
4505
|
-
var
|
|
4608
|
+
var React78 = __toESM(require("react"));
|
|
4609
|
+
var import_editor_props37 = require("@elementor/editor-props");
|
|
4610
|
+
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
4506
4611
|
var import_icons22 = require("@elementor/icons");
|
|
4507
|
-
var
|
|
4508
|
-
var
|
|
4612
|
+
var import_ui65 = require("@elementor/ui");
|
|
4613
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
4509
4614
|
var positionOptions = [
|
|
4510
|
-
{ label: (0,
|
|
4511
|
-
{ label: (0,
|
|
4512
|
-
{ label: (0,
|
|
4513
|
-
{ label: (0,
|
|
4514
|
-
{ label: (0,
|
|
4515
|
-
{ label: (0,
|
|
4516
|
-
{ label: (0,
|
|
4517
|
-
{ label: (0,
|
|
4518
|
-
{ label: (0,
|
|
4519
|
-
{ label: (0,
|
|
4615
|
+
{ label: (0, import_i18n35.__)("Center center", "elementor"), value: "center center" },
|
|
4616
|
+
{ label: (0, import_i18n35.__)("Center left", "elementor"), value: "center left" },
|
|
4617
|
+
{ label: (0, import_i18n35.__)("Center right", "elementor"), value: "center right" },
|
|
4618
|
+
{ label: (0, import_i18n35.__)("Top center", "elementor"), value: "top center" },
|
|
4619
|
+
{ label: (0, import_i18n35.__)("Top left", "elementor"), value: "top left" },
|
|
4620
|
+
{ label: (0, import_i18n35.__)("Top right", "elementor"), value: "top right" },
|
|
4621
|
+
{ label: (0, import_i18n35.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
4622
|
+
{ label: (0, import_i18n35.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
4623
|
+
{ label: (0, import_i18n35.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
4624
|
+
{ label: (0, import_i18n35.__)("Custom", "elementor"), value: "custom" }
|
|
4520
4625
|
];
|
|
4521
4626
|
var PositionControl = () => {
|
|
4522
|
-
const positionContext = useBoundProp(
|
|
4523
|
-
const stringPropContext = useBoundProp(
|
|
4627
|
+
const positionContext = useBoundProp(import_editor_props37.positionPropTypeUtil);
|
|
4628
|
+
const stringPropContext = useBoundProp(import_editor_props37.stringPropTypeUtil);
|
|
4524
4629
|
const isCustom = !!positionContext.value;
|
|
4525
4630
|
const handlePositionChange = (event) => {
|
|
4526
4631
|
const value = event.target.value || null;
|
|
@@ -4530,8 +4635,8 @@ var PositionControl = () => {
|
|
|
4530
4635
|
stringPropContext.setValue(value);
|
|
4531
4636
|
}
|
|
4532
4637
|
};
|
|
4533
|
-
return /* @__PURE__ */
|
|
4534
|
-
|
|
4638
|
+
return /* @__PURE__ */ React78.createElement(import_ui65.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React78.createElement(import_ui65.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(import_ui65.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React78.createElement(import_ui65.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(ControlFormLabel, null, (0, import_i18n35.__)("Object position", "elementor"))), /* @__PURE__ */ React78.createElement(import_ui65.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React78.createElement(
|
|
4639
|
+
import_ui65.Select,
|
|
4535
4640
|
{
|
|
4536
4641
|
size: "tiny",
|
|
4537
4642
|
disabled: stringPropContext.disabled,
|
|
@@ -4539,32 +4644,32 @@ var PositionControl = () => {
|
|
|
4539
4644
|
onChange: handlePositionChange,
|
|
4540
4645
|
fullWidth: true
|
|
4541
4646
|
},
|
|
4542
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
4543
|
-
)))), isCustom && /* @__PURE__ */
|
|
4647
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React78.createElement(import_editor_ui9.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
4648
|
+
)))), isCustom && /* @__PURE__ */ React78.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React78.createElement(import_ui65.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(import_ui65.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React78.createElement(import_ui65.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React78.createElement(
|
|
4544
4649
|
SizeControl,
|
|
4545
4650
|
{
|
|
4546
|
-
startIcon: /* @__PURE__ */
|
|
4651
|
+
startIcon: /* @__PURE__ */ React78.createElement(import_icons22.LetterXIcon, { fontSize: "tiny" }),
|
|
4547
4652
|
min: -Number.MAX_SAFE_INTEGER
|
|
4548
4653
|
}
|
|
4549
|
-
))), /* @__PURE__ */
|
|
4654
|
+
))), /* @__PURE__ */ React78.createElement(import_ui65.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React78.createElement(
|
|
4550
4655
|
SizeControl,
|
|
4551
4656
|
{
|
|
4552
|
-
startIcon: /* @__PURE__ */
|
|
4657
|
+
startIcon: /* @__PURE__ */ React78.createElement(import_icons22.LetterYIcon, { fontSize: "tiny" }),
|
|
4553
4658
|
min: -Number.MAX_SAFE_INTEGER
|
|
4554
4659
|
}
|
|
4555
4660
|
)))))));
|
|
4556
4661
|
};
|
|
4557
4662
|
|
|
4558
4663
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
4559
|
-
var
|
|
4664
|
+
var React91 = __toESM(require("react"));
|
|
4560
4665
|
var import_react46 = require("react");
|
|
4561
|
-
var
|
|
4666
|
+
var import_editor_props46 = require("@elementor/editor-props");
|
|
4562
4667
|
var import_icons29 = require("@elementor/icons");
|
|
4563
|
-
var
|
|
4564
|
-
var
|
|
4668
|
+
var import_ui78 = require("@elementor/ui");
|
|
4669
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
4565
4670
|
|
|
4566
4671
|
// src/controls/transform-control/initial-values.ts
|
|
4567
|
-
var
|
|
4672
|
+
var import_editor_props38 = require("@elementor/editor-props");
|
|
4568
4673
|
var TransformFunctionKeys = {
|
|
4569
4674
|
move: "transform-move",
|
|
4570
4675
|
scale: "transform-scale",
|
|
@@ -4594,96 +4699,96 @@ var initialTransformValue = {
|
|
|
4594
4699
|
z: { $$type: "size", value: { size: defaultValues.move.size, unit: defaultValues.move.unit } }
|
|
4595
4700
|
}
|
|
4596
4701
|
};
|
|
4597
|
-
var initialScaleValue =
|
|
4598
|
-
x:
|
|
4599
|
-
y:
|
|
4600
|
-
z:
|
|
4702
|
+
var initialScaleValue = import_editor_props38.scaleTransformPropTypeUtil.create({
|
|
4703
|
+
x: import_editor_props38.numberPropTypeUtil.create(defaultValues.scale),
|
|
4704
|
+
y: import_editor_props38.numberPropTypeUtil.create(defaultValues.scale),
|
|
4705
|
+
z: import_editor_props38.numberPropTypeUtil.create(defaultValues.scale)
|
|
4601
4706
|
});
|
|
4602
|
-
var initialRotateValue =
|
|
4707
|
+
var initialRotateValue = import_editor_props38.rotateTransformPropTypeUtil.create({
|
|
4603
4708
|
x: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
4604
4709
|
y: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
4605
4710
|
z: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } }
|
|
4606
4711
|
});
|
|
4607
|
-
var initialSkewValue =
|
|
4712
|
+
var initialSkewValue = import_editor_props38.skewTransformPropTypeUtil.create({
|
|
4608
4713
|
x: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } },
|
|
4609
4714
|
y: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } }
|
|
4610
4715
|
});
|
|
4611
4716
|
|
|
4612
4717
|
// src/controls/transform-control/transform-base-control.tsx
|
|
4613
|
-
var
|
|
4614
|
-
var
|
|
4718
|
+
var React81 = __toESM(require("react"));
|
|
4719
|
+
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
4615
4720
|
var import_icons23 = require("@elementor/icons");
|
|
4616
|
-
var
|
|
4617
|
-
var
|
|
4721
|
+
var import_ui68 = require("@elementor/ui");
|
|
4722
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
4618
4723
|
|
|
4619
4724
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
4620
|
-
var
|
|
4621
|
-
var
|
|
4622
|
-
var
|
|
4623
|
-
var
|
|
4725
|
+
var React79 = __toESM(require("react"));
|
|
4726
|
+
var import_editor_props39 = require("@elementor/editor-props");
|
|
4727
|
+
var import_ui66 = require("@elementor/ui");
|
|
4728
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
4624
4729
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
4625
4730
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
4626
|
-
label: (0,
|
|
4731
|
+
label: (0, import_i18n36.__)("Perspective", "elementor"),
|
|
4627
4732
|
bind: "perspective",
|
|
4628
4733
|
units: ["px", "em", "rem", "vw", "vh"]
|
|
4629
4734
|
};
|
|
4630
4735
|
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
4631
4736
|
{
|
|
4632
|
-
label: (0,
|
|
4737
|
+
label: (0, import_i18n36.__)("Origin X", "elementor"),
|
|
4633
4738
|
bind: "x",
|
|
4634
4739
|
units: ORIGIN_UNITS
|
|
4635
4740
|
},
|
|
4636
4741
|
{
|
|
4637
|
-
label: (0,
|
|
4742
|
+
label: (0, import_i18n36.__)("Origin Y", "elementor"),
|
|
4638
4743
|
bind: "y",
|
|
4639
4744
|
units: ORIGIN_UNITS
|
|
4640
4745
|
}
|
|
4641
4746
|
];
|
|
4642
4747
|
var ChildrenPerspectiveControl = () => {
|
|
4643
|
-
return /* @__PURE__ */
|
|
4748
|
+
return /* @__PURE__ */ React79.createElement(import_ui66.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React79.createElement(ControlFormLabel, null, (0, import_i18n36.__)("Children perspective", "elementor")), /* @__PURE__ */ React79.createElement(PerspectiveControl, null), /* @__PURE__ */ React79.createElement(PerspectiveOriginControl, null));
|
|
4644
4749
|
};
|
|
4645
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
4646
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
4750
|
+
var PerspectiveControl = () => /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React79.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
4751
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React79.createElement(PerspectiveOriginControlProvider, null));
|
|
4647
4752
|
var PerspectiveOriginControlProvider = () => {
|
|
4648
|
-
const context = useBoundProp(
|
|
4649
|
-
return /* @__PURE__ */
|
|
4753
|
+
const context = useBoundProp(import_editor_props39.perspectiveOriginPropTypeUtil);
|
|
4754
|
+
return /* @__PURE__ */ React79.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React79.createElement(ControlFields, { control }))));
|
|
4650
4755
|
};
|
|
4651
4756
|
var ControlFields = ({ control }) => {
|
|
4652
|
-
const rowRef =
|
|
4653
|
-
return /* @__PURE__ */
|
|
4757
|
+
const rowRef = React79.useRef(null);
|
|
4758
|
+
return /* @__PURE__ */ React79.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React79.createElement(import_ui66.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React79.createElement(import_ui66.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
4654
4759
|
};
|
|
4655
4760
|
|
|
4656
4761
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
4657
|
-
var
|
|
4658
|
-
var
|
|
4659
|
-
var
|
|
4660
|
-
var
|
|
4762
|
+
var React80 = __toESM(require("react"));
|
|
4763
|
+
var import_editor_props40 = require("@elementor/editor-props");
|
|
4764
|
+
var import_ui67 = require("@elementor/ui");
|
|
4765
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
4661
4766
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
4662
4767
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
4663
4768
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
4664
4769
|
{
|
|
4665
|
-
label: (0,
|
|
4770
|
+
label: (0, import_i18n37.__)("Origin X", "elementor"),
|
|
4666
4771
|
bind: "x",
|
|
4667
4772
|
units: TRANSFORM_ORIGIN_UNITS
|
|
4668
4773
|
},
|
|
4669
4774
|
{
|
|
4670
|
-
label: (0,
|
|
4775
|
+
label: (0, import_i18n37.__)("Origin Y", "elementor"),
|
|
4671
4776
|
bind: "y",
|
|
4672
4777
|
units: TRANSFORM_ORIGIN_UNITS
|
|
4673
4778
|
},
|
|
4674
4779
|
{
|
|
4675
|
-
label: (0,
|
|
4780
|
+
label: (0, import_i18n37.__)("Origin Z", "elementor"),
|
|
4676
4781
|
bind: "z",
|
|
4677
4782
|
units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
|
|
4678
4783
|
}
|
|
4679
4784
|
];
|
|
4680
4785
|
var TransformOriginControl = () => {
|
|
4681
|
-
return /* @__PURE__ */
|
|
4786
|
+
return /* @__PURE__ */ React80.createElement(import_ui67.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React80.createElement(ControlFormLabel, null, (0, import_i18n37.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React80.createElement(ControlFields2, { control, key: control.bind })));
|
|
4682
4787
|
};
|
|
4683
4788
|
var ControlFields2 = ({ control }) => {
|
|
4684
|
-
const context = useBoundProp(
|
|
4685
|
-
const rowRef =
|
|
4686
|
-
return /* @__PURE__ */
|
|
4789
|
+
const context = useBoundProp(import_editor_props40.transformOriginPropTypeUtil);
|
|
4790
|
+
const rowRef = React80.useRef(null);
|
|
4791
|
+
return /* @__PURE__ */ React80.createElement(PropProvider, { ...context }, /* @__PURE__ */ React80.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React80.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React80.createElement(import_ui67.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React80.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React80.createElement(import_ui67.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React80.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
|
|
4687
4792
|
};
|
|
4688
4793
|
|
|
4689
4794
|
// src/controls/transform-control/transform-base-control.tsx
|
|
@@ -4692,12 +4797,12 @@ var TransformBaseControl = ({
|
|
|
4692
4797
|
popupState,
|
|
4693
4798
|
anchorRef
|
|
4694
4799
|
}) => {
|
|
4695
|
-
const popupProps = (0,
|
|
4800
|
+
const popupProps = (0, import_ui68.bindPopover)({
|
|
4696
4801
|
...popupState,
|
|
4697
4802
|
anchorEl: anchorRef.current ?? void 0
|
|
4698
4803
|
});
|
|
4699
|
-
return /* @__PURE__ */
|
|
4700
|
-
|
|
4804
|
+
return /* @__PURE__ */ React81.createElement(
|
|
4805
|
+
import_ui68.Popover,
|
|
4701
4806
|
{
|
|
4702
4807
|
disablePortal: true,
|
|
4703
4808
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
@@ -4711,38 +4816,38 @@ var TransformBaseControl = ({
|
|
|
4711
4816
|
},
|
|
4712
4817
|
...popupProps
|
|
4713
4818
|
},
|
|
4714
|
-
/* @__PURE__ */
|
|
4715
|
-
|
|
4819
|
+
/* @__PURE__ */ React81.createElement(
|
|
4820
|
+
import_editor_ui10.PopoverHeader,
|
|
4716
4821
|
{
|
|
4717
|
-
title: (0,
|
|
4822
|
+
title: (0, import_i18n38.__)("Base Transform", "elementor"),
|
|
4718
4823
|
onClose: popupState.close,
|
|
4719
|
-
icon: /* @__PURE__ */
|
|
4824
|
+
icon: /* @__PURE__ */ React81.createElement(import_icons23.AdjustmentsIcon, { fontSize: SIZE7 })
|
|
4720
4825
|
}
|
|
4721
4826
|
),
|
|
4722
|
-
/* @__PURE__ */
|
|
4723
|
-
/* @__PURE__ */
|
|
4827
|
+
/* @__PURE__ */ React81.createElement(import_ui68.Divider, null),
|
|
4828
|
+
/* @__PURE__ */ React81.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React81.createElement(TransformOriginControl, null)), /* @__PURE__ */ React81.createElement(import_ui68.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React81.createElement(import_ui68.Divider, null)), /* @__PURE__ */ React81.createElement(ChildrenPerspectiveControl, null))
|
|
4724
4829
|
);
|
|
4725
4830
|
};
|
|
4726
4831
|
|
|
4727
4832
|
// src/controls/transform-control/transform-content.tsx
|
|
4728
|
-
var
|
|
4729
|
-
var
|
|
4730
|
-
var
|
|
4833
|
+
var React88 = __toESM(require("react"));
|
|
4834
|
+
var import_ui76 = require("@elementor/ui");
|
|
4835
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
4731
4836
|
|
|
4732
4837
|
// src/controls/transform-control/functions/move.tsx
|
|
4733
|
-
var
|
|
4838
|
+
var React83 = __toESM(require("react"));
|
|
4734
4839
|
var import_react41 = require("react");
|
|
4735
|
-
var
|
|
4840
|
+
var import_editor_props41 = require("@elementor/editor-props");
|
|
4736
4841
|
var import_icons24 = require("@elementor/icons");
|
|
4737
|
-
var
|
|
4738
|
-
var
|
|
4842
|
+
var import_ui70 = require("@elementor/ui");
|
|
4843
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
4739
4844
|
|
|
4740
4845
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
4741
|
-
var
|
|
4742
|
-
var
|
|
4846
|
+
var React82 = __toESM(require("react"));
|
|
4847
|
+
var import_ui69 = require("@elementor/ui");
|
|
4743
4848
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
4744
4849
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
4745
|
-
return /* @__PURE__ */
|
|
4850
|
+
return /* @__PURE__ */ React82.createElement(import_ui69.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React82.createElement(import_ui69.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React82.createElement(import_ui69.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React82.createElement(
|
|
4746
4851
|
SizeControl,
|
|
4747
4852
|
{
|
|
4748
4853
|
anchorRef,
|
|
@@ -4758,28 +4863,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
|
|
|
4758
4863
|
// src/controls/transform-control/functions/move.tsx
|
|
4759
4864
|
var moveAxisControls = [
|
|
4760
4865
|
{
|
|
4761
|
-
label: (0,
|
|
4866
|
+
label: (0, import_i18n39.__)("Move X", "elementor"),
|
|
4762
4867
|
bind: "x",
|
|
4763
|
-
startIcon: /* @__PURE__ */
|
|
4868
|
+
startIcon: /* @__PURE__ */ React83.createElement(import_icons24.ArrowRightIcon, { fontSize: "tiny" }),
|
|
4764
4869
|
units: ["px", "%", "em", "rem", "vw"]
|
|
4765
4870
|
},
|
|
4766
4871
|
{
|
|
4767
|
-
label: (0,
|
|
4872
|
+
label: (0, import_i18n39.__)("Move Y", "elementor"),
|
|
4768
4873
|
bind: "y",
|
|
4769
|
-
startIcon: /* @__PURE__ */
|
|
4874
|
+
startIcon: /* @__PURE__ */ React83.createElement(import_icons24.ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
4770
4875
|
units: ["px", "%", "em", "rem", "vh"]
|
|
4771
4876
|
},
|
|
4772
4877
|
{
|
|
4773
|
-
label: (0,
|
|
4878
|
+
label: (0, import_i18n39.__)("Move Z", "elementor"),
|
|
4774
4879
|
bind: "z",
|
|
4775
|
-
startIcon: /* @__PURE__ */
|
|
4880
|
+
startIcon: /* @__PURE__ */ React83.createElement(import_icons24.ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
4776
4881
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
4777
4882
|
}
|
|
4778
4883
|
];
|
|
4779
4884
|
var Move = () => {
|
|
4780
|
-
const context = useBoundProp(
|
|
4885
|
+
const context = useBoundProp(import_editor_props41.moveTransformPropTypeUtil);
|
|
4781
4886
|
const rowRefs = [(0, import_react41.useRef)(null), (0, import_react41.useRef)(null), (0, import_react41.useRef)(null)];
|
|
4782
|
-
return /* @__PURE__ */
|
|
4887
|
+
return /* @__PURE__ */ React83.createElement(import_ui70.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React83.createElement(PropProvider, { ...context }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React83.createElement(
|
|
4783
4888
|
AxisRow,
|
|
4784
4889
|
{
|
|
4785
4890
|
key: control.bind,
|
|
@@ -4792,34 +4897,34 @@ var Move = () => {
|
|
|
4792
4897
|
};
|
|
4793
4898
|
|
|
4794
4899
|
// src/controls/transform-control/functions/rotate.tsx
|
|
4795
|
-
var
|
|
4900
|
+
var React84 = __toESM(require("react"));
|
|
4796
4901
|
var import_react42 = require("react");
|
|
4797
|
-
var
|
|
4902
|
+
var import_editor_props42 = require("@elementor/editor-props");
|
|
4798
4903
|
var import_icons25 = require("@elementor/icons");
|
|
4799
|
-
var
|
|
4800
|
-
var
|
|
4904
|
+
var import_ui71 = require("@elementor/ui");
|
|
4905
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
4801
4906
|
var rotateAxisControls = [
|
|
4802
4907
|
{
|
|
4803
|
-
label: (0,
|
|
4908
|
+
label: (0, import_i18n40.__)("Rotate X", "elementor"),
|
|
4804
4909
|
bind: "x",
|
|
4805
|
-
startIcon: /* @__PURE__ */
|
|
4910
|
+
startIcon: /* @__PURE__ */ React84.createElement(import_icons25.Arrow360Icon, { fontSize: "tiny" })
|
|
4806
4911
|
},
|
|
4807
4912
|
{
|
|
4808
|
-
label: (0,
|
|
4913
|
+
label: (0, import_i18n40.__)("Rotate Y", "elementor"),
|
|
4809
4914
|
bind: "y",
|
|
4810
|
-
startIcon: /* @__PURE__ */
|
|
4915
|
+
startIcon: /* @__PURE__ */ React84.createElement(import_icons25.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
4811
4916
|
},
|
|
4812
4917
|
{
|
|
4813
|
-
label: (0,
|
|
4918
|
+
label: (0, import_i18n40.__)("Rotate Z", "elementor"),
|
|
4814
4919
|
bind: "z",
|
|
4815
|
-
startIcon: /* @__PURE__ */
|
|
4920
|
+
startIcon: /* @__PURE__ */ React84.createElement(import_icons25.RotateClockwiseIcon, { fontSize: "tiny" })
|
|
4816
4921
|
}
|
|
4817
4922
|
];
|
|
4818
4923
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
4819
4924
|
var Rotate = () => {
|
|
4820
|
-
const context = useBoundProp(
|
|
4925
|
+
const context = useBoundProp(import_editor_props42.rotateTransformPropTypeUtil);
|
|
4821
4926
|
const rowRefs = [(0, import_react42.useRef)(null), (0, import_react42.useRef)(null), (0, import_react42.useRef)(null)];
|
|
4822
|
-
return /* @__PURE__ */
|
|
4927
|
+
return /* @__PURE__ */ React84.createElement(import_ui71.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React84.createElement(PropProvider, { ...context }, /* @__PURE__ */ React84.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React84.createElement(
|
|
4823
4928
|
AxisRow,
|
|
4824
4929
|
{
|
|
4825
4930
|
key: control.bind,
|
|
@@ -4831,68 +4936,68 @@ var Rotate = () => {
|
|
|
4831
4936
|
};
|
|
4832
4937
|
|
|
4833
4938
|
// src/controls/transform-control/functions/scale.tsx
|
|
4834
|
-
var
|
|
4939
|
+
var React86 = __toESM(require("react"));
|
|
4835
4940
|
var import_react43 = require("react");
|
|
4836
|
-
var
|
|
4941
|
+
var import_editor_props43 = require("@elementor/editor-props");
|
|
4837
4942
|
var import_icons26 = require("@elementor/icons");
|
|
4838
|
-
var
|
|
4839
|
-
var
|
|
4943
|
+
var import_ui73 = require("@elementor/ui");
|
|
4944
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
4840
4945
|
|
|
4841
4946
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
4842
|
-
var
|
|
4843
|
-
var
|
|
4947
|
+
var React85 = __toESM(require("react"));
|
|
4948
|
+
var import_ui72 = require("@elementor/ui");
|
|
4844
4949
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
4845
|
-
return /* @__PURE__ */
|
|
4950
|
+
return /* @__PURE__ */ React85.createElement(import_ui72.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React85.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React85.createElement(import_ui72.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(ControlLabel, null, label)), /* @__PURE__ */ React85.createElement(import_ui72.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React85.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
4846
4951
|
};
|
|
4847
4952
|
|
|
4848
4953
|
// src/controls/transform-control/functions/scale.tsx
|
|
4849
4954
|
var scaleAxisControls = [
|
|
4850
4955
|
{
|
|
4851
|
-
label: (0,
|
|
4956
|
+
label: (0, import_i18n41.__)("Scale X", "elementor"),
|
|
4852
4957
|
bind: "x",
|
|
4853
|
-
startIcon: /* @__PURE__ */
|
|
4958
|
+
startIcon: /* @__PURE__ */ React86.createElement(import_icons26.ArrowRightIcon, { fontSize: "tiny" })
|
|
4854
4959
|
},
|
|
4855
4960
|
{
|
|
4856
|
-
label: (0,
|
|
4961
|
+
label: (0, import_i18n41.__)("Scale Y", "elementor"),
|
|
4857
4962
|
bind: "y",
|
|
4858
|
-
startIcon: /* @__PURE__ */
|
|
4963
|
+
startIcon: /* @__PURE__ */ React86.createElement(import_icons26.ArrowDownSmallIcon, { fontSize: "tiny" })
|
|
4859
4964
|
},
|
|
4860
4965
|
{
|
|
4861
|
-
label: (0,
|
|
4966
|
+
label: (0, import_i18n41.__)("Scale Z", "elementor"),
|
|
4862
4967
|
bind: "z",
|
|
4863
|
-
startIcon: /* @__PURE__ */
|
|
4968
|
+
startIcon: /* @__PURE__ */ React86.createElement(import_icons26.ArrowDownLeftIcon, { fontSize: "tiny" })
|
|
4864
4969
|
}
|
|
4865
4970
|
];
|
|
4866
4971
|
var Scale = () => {
|
|
4867
|
-
const context = useBoundProp(
|
|
4972
|
+
const context = useBoundProp(import_editor_props43.scaleTransformPropTypeUtil);
|
|
4868
4973
|
const rowRefs = [(0, import_react43.useRef)(null), (0, import_react43.useRef)(null), (0, import_react43.useRef)(null)];
|
|
4869
|
-
return /* @__PURE__ */
|
|
4974
|
+
return /* @__PURE__ */ React86.createElement(import_ui73.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React86.createElement(PropProvider, { ...context }, /* @__PURE__ */ React86.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React86.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
|
|
4870
4975
|
};
|
|
4871
4976
|
|
|
4872
4977
|
// src/controls/transform-control/functions/skew.tsx
|
|
4873
|
-
var
|
|
4978
|
+
var React87 = __toESM(require("react"));
|
|
4874
4979
|
var import_react44 = require("react");
|
|
4875
|
-
var
|
|
4980
|
+
var import_editor_props44 = require("@elementor/editor-props");
|
|
4876
4981
|
var import_icons27 = require("@elementor/icons");
|
|
4877
|
-
var
|
|
4878
|
-
var
|
|
4982
|
+
var import_ui74 = require("@elementor/ui");
|
|
4983
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
4879
4984
|
var skewAxisControls = [
|
|
4880
4985
|
{
|
|
4881
|
-
label: (0,
|
|
4986
|
+
label: (0, import_i18n42.__)("Skew X", "elementor"),
|
|
4882
4987
|
bind: "x",
|
|
4883
|
-
startIcon: /* @__PURE__ */
|
|
4988
|
+
startIcon: /* @__PURE__ */ React87.createElement(import_icons27.ArrowRightIcon, { fontSize: "tiny" })
|
|
4884
4989
|
},
|
|
4885
4990
|
{
|
|
4886
|
-
label: (0,
|
|
4991
|
+
label: (0, import_i18n42.__)("Skew Y", "elementor"),
|
|
4887
4992
|
bind: "y",
|
|
4888
|
-
startIcon: /* @__PURE__ */
|
|
4993
|
+
startIcon: /* @__PURE__ */ React87.createElement(import_icons27.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
4889
4994
|
}
|
|
4890
4995
|
];
|
|
4891
4996
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
4892
4997
|
var Skew = () => {
|
|
4893
|
-
const context = useBoundProp(
|
|
4998
|
+
const context = useBoundProp(import_editor_props44.skewTransformPropTypeUtil);
|
|
4894
4999
|
const rowRefs = [(0, import_react44.useRef)(null), (0, import_react44.useRef)(null), (0, import_react44.useRef)(null)];
|
|
4895
|
-
return /* @__PURE__ */
|
|
5000
|
+
return /* @__PURE__ */ React87.createElement(import_ui74.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(PropProvider, { ...context }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React87.createElement(
|
|
4896
5001
|
AxisRow,
|
|
4897
5002
|
{
|
|
4898
5003
|
key: control.bind,
|
|
@@ -4905,18 +5010,18 @@ var Skew = () => {
|
|
|
4905
5010
|
|
|
4906
5011
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
4907
5012
|
var import_react45 = require("react");
|
|
4908
|
-
var
|
|
4909
|
-
var
|
|
5013
|
+
var import_editor_props45 = require("@elementor/editor-props");
|
|
5014
|
+
var import_ui75 = require("@elementor/ui");
|
|
4910
5015
|
var useTransformTabsHistory = ({
|
|
4911
5016
|
move: initialMove,
|
|
4912
5017
|
scale: initialScale,
|
|
4913
5018
|
rotate: initialRotate,
|
|
4914
5019
|
skew: initialSkew
|
|
4915
5020
|
}) => {
|
|
4916
|
-
const { value: moveValue, setValue: setMoveValue } = useBoundProp(
|
|
4917
|
-
const { value: scaleValue, setValue: setScaleValue } = useBoundProp(
|
|
4918
|
-
const { value: rotateValue, setValue: setRotateValue } = useBoundProp(
|
|
4919
|
-
const { value: skewValue, setValue: setSkewValue } = useBoundProp(
|
|
5021
|
+
const { value: moveValue, setValue: setMoveValue } = useBoundProp(import_editor_props45.moveTransformPropTypeUtil);
|
|
5022
|
+
const { value: scaleValue, setValue: setScaleValue } = useBoundProp(import_editor_props45.scaleTransformPropTypeUtil);
|
|
5023
|
+
const { value: rotateValue, setValue: setRotateValue } = useBoundProp(import_editor_props45.rotateTransformPropTypeUtil);
|
|
5024
|
+
const { value: skewValue, setValue: setSkewValue } = useBoundProp(import_editor_props45.skewTransformPropTypeUtil);
|
|
4920
5025
|
const { openItemIndex, items: items2 } = useRepeaterContext();
|
|
4921
5026
|
const getCurrentTransformType = () => {
|
|
4922
5027
|
switch (true) {
|
|
@@ -4930,7 +5035,7 @@ var useTransformTabsHistory = ({
|
|
|
4930
5035
|
return TransformFunctionKeys.move;
|
|
4931
5036
|
}
|
|
4932
5037
|
};
|
|
4933
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
5038
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui75.useTabs)(getCurrentTransformType());
|
|
4934
5039
|
const valuesHistory = (0, import_react45.useRef)({
|
|
4935
5040
|
move: initialMove,
|
|
4936
5041
|
scale: initialScale,
|
|
@@ -4992,8 +5097,8 @@ var TransformContent = () => {
|
|
|
4992
5097
|
rotate: initialRotateValue.value,
|
|
4993
5098
|
skew: initialSkewValue.value
|
|
4994
5099
|
});
|
|
4995
|
-
return /* @__PURE__ */
|
|
4996
|
-
|
|
5100
|
+
return /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(import_ui76.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(import_ui76.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
|
|
5101
|
+
import_ui76.Tabs,
|
|
4997
5102
|
{
|
|
4998
5103
|
size: "small",
|
|
4999
5104
|
variant: "fullWidth",
|
|
@@ -5003,37 +5108,37 @@ var TransformContent = () => {
|
|
|
5003
5108
|
}
|
|
5004
5109
|
},
|
|
5005
5110
|
...getTabsProps(),
|
|
5006
|
-
"aria-label": (0,
|
|
5111
|
+
"aria-label": (0, import_i18n43.__)("Transform", "elementor")
|
|
5007
5112
|
},
|
|
5008
|
-
/* @__PURE__ */
|
|
5009
|
-
/* @__PURE__ */
|
|
5010
|
-
/* @__PURE__ */
|
|
5011
|
-
/* @__PURE__ */
|
|
5012
|
-
)), /* @__PURE__ */
|
|
5113
|
+
/* @__PURE__ */ React88.createElement(import_ui76.Tab, { label: (0, import_i18n43.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
5114
|
+
/* @__PURE__ */ React88.createElement(import_ui76.Tab, { label: (0, import_i18n43.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
5115
|
+
/* @__PURE__ */ React88.createElement(import_ui76.Tab, { label: (0, import_i18n43.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
5116
|
+
/* @__PURE__ */ React88.createElement(import_ui76.Tab, { label: (0, import_i18n43.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
5117
|
+
)), /* @__PURE__ */ React88.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React88.createElement(Move, null)), /* @__PURE__ */ React88.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React88.createElement(Scale, null)), /* @__PURE__ */ React88.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React88.createElement(Rotate, null)), /* @__PURE__ */ React88.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React88.createElement(Skew, null))));
|
|
5013
5118
|
};
|
|
5014
5119
|
|
|
5015
5120
|
// src/controls/transform-control/transform-icon.tsx
|
|
5016
|
-
var
|
|
5121
|
+
var React89 = __toESM(require("react"));
|
|
5017
5122
|
var import_icons28 = require("@elementor/icons");
|
|
5018
5123
|
var TransformIcon = ({ value }) => {
|
|
5019
5124
|
switch (value.$$type) {
|
|
5020
5125
|
case TransformFunctionKeys.move:
|
|
5021
|
-
return /* @__PURE__ */
|
|
5126
|
+
return /* @__PURE__ */ React89.createElement(import_icons28.ArrowsMaximizeIcon, { fontSize: "tiny" });
|
|
5022
5127
|
case TransformFunctionKeys.scale:
|
|
5023
|
-
return /* @__PURE__ */
|
|
5128
|
+
return /* @__PURE__ */ React89.createElement(import_icons28.ExpandIcon, { fontSize: "tiny" });
|
|
5024
5129
|
case TransformFunctionKeys.rotate:
|
|
5025
|
-
return /* @__PURE__ */
|
|
5130
|
+
return /* @__PURE__ */ React89.createElement(import_icons28.RotateClockwise2Icon, { fontSize: "tiny" });
|
|
5026
5131
|
case TransformFunctionKeys.skew:
|
|
5027
|
-
return /* @__PURE__ */
|
|
5132
|
+
return /* @__PURE__ */ React89.createElement(import_icons28.SkewXIcon, { fontSize: "tiny" });
|
|
5028
5133
|
default:
|
|
5029
5134
|
return null;
|
|
5030
5135
|
}
|
|
5031
5136
|
};
|
|
5032
5137
|
|
|
5033
5138
|
// src/controls/transform-control/transform-label.tsx
|
|
5034
|
-
var
|
|
5035
|
-
var
|
|
5036
|
-
var
|
|
5139
|
+
var React90 = __toESM(require("react"));
|
|
5140
|
+
var import_ui77 = require("@elementor/ui");
|
|
5141
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
5037
5142
|
var transformMoveValue = (value) => Object.values(value).map((axis) => {
|
|
5038
5143
|
const size = axis?.value?.size ?? defaultValues.move.size;
|
|
5039
5144
|
const unit = axis?.value?.unit ?? defaultValues.move.unit;
|
|
@@ -5054,66 +5159,66 @@ var TransformLabel = (props) => {
|
|
|
5054
5159
|
const { $$type, value } = props.value;
|
|
5055
5160
|
switch ($$type) {
|
|
5056
5161
|
case TransformFunctionKeys.move:
|
|
5057
|
-
return /* @__PURE__ */
|
|
5162
|
+
return /* @__PURE__ */ React90.createElement(Label2, { label: (0, import_i18n44.__)("Move", "elementor"), value: transformMoveValue(value) });
|
|
5058
5163
|
case TransformFunctionKeys.scale:
|
|
5059
|
-
return /* @__PURE__ */
|
|
5164
|
+
return /* @__PURE__ */ React90.createElement(Label2, { label: (0, import_i18n44.__)("Scale", "elementor"), value: transformScaleValue(value) });
|
|
5060
5165
|
case TransformFunctionKeys.rotate:
|
|
5061
|
-
return /* @__PURE__ */
|
|
5166
|
+
return /* @__PURE__ */ React90.createElement(Label2, { label: (0, import_i18n44.__)("Rotate", "elementor"), value: transformRotateValue(value) });
|
|
5062
5167
|
case TransformFunctionKeys.skew:
|
|
5063
|
-
return /* @__PURE__ */
|
|
5168
|
+
return /* @__PURE__ */ React90.createElement(Label2, { label: (0, import_i18n44.__)("Skew", "elementor"), value: transformSkewValue(value) });
|
|
5064
5169
|
default:
|
|
5065
5170
|
return "";
|
|
5066
5171
|
}
|
|
5067
5172
|
};
|
|
5068
5173
|
var Label2 = ({ label, value }) => {
|
|
5069
|
-
return /* @__PURE__ */
|
|
5174
|
+
return /* @__PURE__ */ React90.createElement(import_ui77.Box, { component: "span" }, label, ": ", value);
|
|
5070
5175
|
};
|
|
5071
5176
|
|
|
5072
5177
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
5073
5178
|
var SIZE8 = "tiny";
|
|
5074
5179
|
var TransformRepeaterControl = createControl(() => {
|
|
5075
|
-
const context = useBoundProp(
|
|
5180
|
+
const context = useBoundProp(import_editor_props46.transformPropTypeUtil);
|
|
5076
5181
|
const headerRef = (0, import_react46.useRef)(null);
|
|
5077
|
-
const popupState = (0,
|
|
5078
|
-
return /* @__PURE__ */
|
|
5182
|
+
const popupState = (0, import_ui78.usePopupState)({ variant: "popover" });
|
|
5183
|
+
return /* @__PURE__ */ React91.createElement(PropProvider, { ...context }, /* @__PURE__ */ React91.createElement(TransformBaseControl, { popupState, anchorRef: headerRef }), /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React91.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
5079
5184
|
});
|
|
5080
|
-
var ToolTip = /* @__PURE__ */
|
|
5081
|
-
|
|
5185
|
+
var ToolTip = /* @__PURE__ */ React91.createElement(
|
|
5186
|
+
import_ui78.Box,
|
|
5082
5187
|
{
|
|
5083
5188
|
component: "span",
|
|
5084
5189
|
"aria-label": void 0,
|
|
5085
5190
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
5086
5191
|
},
|
|
5087
|
-
/* @__PURE__ */
|
|
5088
|
-
/* @__PURE__ */
|
|
5192
|
+
/* @__PURE__ */ React91.createElement(import_icons29.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
|
|
5193
|
+
/* @__PURE__ */ React91.createElement(import_ui78.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n45.__)("You can use each kind of transform only once per element.", "elementor"))
|
|
5089
5194
|
);
|
|
5090
5195
|
var Repeater2 = ({
|
|
5091
5196
|
headerRef,
|
|
5092
5197
|
propType,
|
|
5093
5198
|
popupState
|
|
5094
5199
|
}) => {
|
|
5095
|
-
const transformFunctionsContext = useBoundProp(
|
|
5200
|
+
const transformFunctionsContext = useBoundProp(import_editor_props46.transformFunctionsPropTypeUtil);
|
|
5096
5201
|
const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
|
|
5097
5202
|
const { value: transformValues, bind } = transformFunctionsContext;
|
|
5098
5203
|
const getInitialValue = () => {
|
|
5099
5204
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
5100
5205
|
};
|
|
5101
5206
|
const shouldDisableAddItem = !getInitialValue();
|
|
5102
|
-
return /* @__PURE__ */
|
|
5207
|
+
return /* @__PURE__ */ React91.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React91.createElement(
|
|
5103
5208
|
ControlRepeater,
|
|
5104
5209
|
{
|
|
5105
5210
|
initial: getInitialValue() ?? initialTransformValue,
|
|
5106
|
-
propTypeUtil:
|
|
5211
|
+
propTypeUtil: import_editor_props46.transformFunctionsPropTypeUtil
|
|
5107
5212
|
},
|
|
5108
|
-
/* @__PURE__ */
|
|
5213
|
+
/* @__PURE__ */ React91.createElement(
|
|
5109
5214
|
Header,
|
|
5110
5215
|
{
|
|
5111
|
-
label: (0,
|
|
5112
|
-
adornment: () => /* @__PURE__ */
|
|
5216
|
+
label: (0, import_i18n45.__)("Transform", "elementor"),
|
|
5217
|
+
adornment: () => /* @__PURE__ */ React91.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
5113
5218
|
ref: headerRef
|
|
5114
5219
|
},
|
|
5115
|
-
/* @__PURE__ */
|
|
5116
|
-
/* @__PURE__ */
|
|
5220
|
+
/* @__PURE__ */ React91.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
5221
|
+
/* @__PURE__ */ React91.createElement(
|
|
5117
5222
|
TooltipAddItemAction,
|
|
5118
5223
|
{
|
|
5119
5224
|
disabled: shouldDisableAddItem,
|
|
@@ -5123,15 +5228,15 @@ var Repeater2 = ({
|
|
|
5123
5228
|
}
|
|
5124
5229
|
)
|
|
5125
5230
|
),
|
|
5126
|
-
/* @__PURE__ */
|
|
5231
|
+
/* @__PURE__ */ React91.createElement(ItemsContainer, null, /* @__PURE__ */ React91.createElement(
|
|
5127
5232
|
Item,
|
|
5128
5233
|
{
|
|
5129
5234
|
Icon: TransformIcon,
|
|
5130
5235
|
Label: TransformLabel,
|
|
5131
|
-
actions: /* @__PURE__ */
|
|
5236
|
+
actions: /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(DisableItemAction, null), /* @__PURE__ */ React91.createElement(RemoveItemAction, null))
|
|
5132
5237
|
}
|
|
5133
5238
|
)),
|
|
5134
|
-
/* @__PURE__ */
|
|
5239
|
+
/* @__PURE__ */ React91.createElement(EditItemPopover, null, /* @__PURE__ */ React91.createElement(TransformContent, null))
|
|
5135
5240
|
));
|
|
5136
5241
|
};
|
|
5137
5242
|
var TransformBasePopoverTrigger = ({
|
|
@@ -5139,25 +5244,25 @@ var TransformBasePopoverTrigger = ({
|
|
|
5139
5244
|
repeaterBindKey
|
|
5140
5245
|
}) => {
|
|
5141
5246
|
const { bind } = useBoundProp();
|
|
5142
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
5247
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React91.createElement(import_ui78.IconButton, { size: SIZE8, "aria-label": (0, import_i18n45.__)("Base Transform", "elementor"), ...(0, import_ui78.bindTrigger)(popupState) }, /* @__PURE__ */ React91.createElement(import_icons29.AdjustmentsIcon, { fontSize: SIZE8 }));
|
|
5143
5248
|
};
|
|
5144
5249
|
|
|
5145
5250
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
5146
|
-
var
|
|
5251
|
+
var React94 = __toESM(require("react"));
|
|
5147
5252
|
var import_react49 = require("react");
|
|
5148
|
-
var
|
|
5253
|
+
var import_editor_props49 = require("@elementor/editor-props");
|
|
5149
5254
|
var import_icons31 = require("@elementor/icons");
|
|
5150
|
-
var
|
|
5151
|
-
var
|
|
5255
|
+
var import_ui81 = require("@elementor/ui");
|
|
5256
|
+
var import_i18n48 = require("@wordpress/i18n");
|
|
5152
5257
|
|
|
5153
5258
|
// src/controls/selection-size-control.tsx
|
|
5154
|
-
var
|
|
5259
|
+
var React92 = __toESM(require("react"));
|
|
5155
5260
|
var import_react47 = require("react");
|
|
5156
|
-
var
|
|
5157
|
-
var
|
|
5261
|
+
var import_editor_props47 = require("@elementor/editor-props");
|
|
5262
|
+
var import_ui79 = require("@elementor/ui");
|
|
5158
5263
|
var SelectionSizeControl = createControl(
|
|
5159
5264
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
5160
|
-
const { value, setValue, propType } = useBoundProp(
|
|
5265
|
+
const { value, setValue, propType } = useBoundProp(import_editor_props47.selectionSizePropTypeUtil);
|
|
5161
5266
|
const rowRef = (0, import_react47.useRef)(null);
|
|
5162
5267
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
5163
5268
|
const currentSizeConfig = (0, import_react47.useMemo)(() => {
|
|
@@ -5171,7 +5276,7 @@ var SelectionSizeControl = createControl(
|
|
|
5171
5276
|
}
|
|
5172
5277
|
}, [value, sizeConfigMap]);
|
|
5173
5278
|
const SelectionComponent = selectionConfig.component;
|
|
5174
|
-
return /* @__PURE__ */
|
|
5279
|
+
return /* @__PURE__ */ React92.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React92.createElement(import_ui79.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React92.createElement(import_ui79.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React92.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React92.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React92.createElement(React92.Fragment, null, /* @__PURE__ */ React92.createElement(import_ui79.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React92.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React92.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React92.createElement(
|
|
5175
5280
|
SizeControl,
|
|
5176
5281
|
{
|
|
5177
5282
|
anchorRef: rowRef,
|
|
@@ -5185,12 +5290,12 @@ var SelectionSizeControl = createControl(
|
|
|
5185
5290
|
);
|
|
5186
5291
|
|
|
5187
5292
|
// src/controls/transition-control/data.ts
|
|
5188
|
-
var
|
|
5293
|
+
var import_i18n46 = require("@wordpress/i18n");
|
|
5189
5294
|
var initialTransitionValue = {
|
|
5190
5295
|
selection: {
|
|
5191
5296
|
$$type: "key-value",
|
|
5192
5297
|
value: {
|
|
5193
|
-
key: { value: (0,
|
|
5298
|
+
key: { value: (0, import_i18n46.__)("All properties", "elementor"), $$type: "string" },
|
|
5194
5299
|
value: { value: "all", $$type: "string" }
|
|
5195
5300
|
}
|
|
5196
5301
|
},
|
|
@@ -5198,9 +5303,9 @@ var initialTransitionValue = {
|
|
|
5198
5303
|
};
|
|
5199
5304
|
var transitionProperties = [
|
|
5200
5305
|
{
|
|
5201
|
-
label: (0,
|
|
5306
|
+
label: (0, import_i18n46.__)("Default", "elementor"),
|
|
5202
5307
|
type: "category",
|
|
5203
|
-
properties: [{ label: (0,
|
|
5308
|
+
properties: [{ label: (0, import_i18n46.__)("All properties", "elementor"), value: "all" }]
|
|
5204
5309
|
}
|
|
5205
5310
|
];
|
|
5206
5311
|
var transitionsItemsList = transitionProperties.map((category) => ({
|
|
@@ -5209,7 +5314,7 @@ var transitionsItemsList = transitionProperties.map((category) => ({
|
|
|
5209
5314
|
}));
|
|
5210
5315
|
|
|
5211
5316
|
// src/controls/transition-control/trainsition-events.ts
|
|
5212
|
-
var
|
|
5317
|
+
var import_editor_elements4 = require("@elementor/editor-elements");
|
|
5213
5318
|
var import_mixpanel = require("@elementor/mixpanel");
|
|
5214
5319
|
var transitionRepeaterMixpanelEvent = {
|
|
5215
5320
|
eventName: "click_added_transition",
|
|
@@ -5221,7 +5326,7 @@ function subscribeToTransitionEvent() {
|
|
|
5221
5326
|
eventBus.subscribe("transition-item-added", (data) => {
|
|
5222
5327
|
const payload = data;
|
|
5223
5328
|
const value = payload?.itemValue?.selection?.value?.value?.value;
|
|
5224
|
-
const selectedElements = (0,
|
|
5329
|
+
const selectedElements = (0, import_editor_elements4.getSelectedElements)();
|
|
5225
5330
|
const widgetType = selectedElements[0]?.type ?? null;
|
|
5226
5331
|
(0, import_mixpanel.trackEvent)({
|
|
5227
5332
|
transition_type: value ?? "unknown",
|
|
@@ -5232,12 +5337,12 @@ function subscribeToTransitionEvent() {
|
|
|
5232
5337
|
}
|
|
5233
5338
|
|
|
5234
5339
|
// src/controls/transition-control/transition-selector.tsx
|
|
5235
|
-
var
|
|
5340
|
+
var React93 = __toESM(require("react"));
|
|
5236
5341
|
var import_react48 = require("react");
|
|
5237
|
-
var
|
|
5342
|
+
var import_editor_props48 = require("@elementor/editor-props");
|
|
5238
5343
|
var import_icons30 = require("@elementor/icons");
|
|
5239
|
-
var
|
|
5240
|
-
var
|
|
5344
|
+
var import_ui80 = require("@elementor/ui");
|
|
5345
|
+
var import_i18n47 = require("@wordpress/i18n");
|
|
5241
5346
|
var toTransitionSelectorValue = (label) => {
|
|
5242
5347
|
for (const category of transitionProperties) {
|
|
5243
5348
|
const property = category.properties.find((prop) => prop.label === label);
|
|
@@ -5262,12 +5367,12 @@ var TransitionSelector = ({
|
|
|
5262
5367
|
recentlyUsedList = [],
|
|
5263
5368
|
disabledItems = []
|
|
5264
5369
|
}) => {
|
|
5265
|
-
const { value, setValue } = useBoundProp(
|
|
5370
|
+
const { value, setValue } = useBoundProp(import_editor_props48.keyValuePropTypeUtil);
|
|
5266
5371
|
const {
|
|
5267
5372
|
key: { value: transitionLabel }
|
|
5268
5373
|
} = value;
|
|
5269
5374
|
const defaultRef = (0, import_react48.useRef)(null);
|
|
5270
|
-
const popoverState = (0,
|
|
5375
|
+
const popoverState = (0, import_ui80.usePopupState)({ variant: "popover" });
|
|
5271
5376
|
const getItemList = () => {
|
|
5272
5377
|
const recentItems = recentlyUsedList.map((item) => findByValue(item)).filter((item) => !!item);
|
|
5273
5378
|
const filteredItems = transitionsItemsList.map((category) => {
|
|
@@ -5283,7 +5388,7 @@ var TransitionSelector = ({
|
|
|
5283
5388
|
return [
|
|
5284
5389
|
first,
|
|
5285
5390
|
{
|
|
5286
|
-
label: (0,
|
|
5391
|
+
label: (0, import_i18n47.__)("Recently Used", "elementor"),
|
|
5287
5392
|
items: recentItems
|
|
5288
5393
|
},
|
|
5289
5394
|
...rest
|
|
@@ -5307,27 +5412,27 @@ var TransitionSelector = ({
|
|
|
5307
5412
|
left: rect.right + 36
|
|
5308
5413
|
};
|
|
5309
5414
|
};
|
|
5310
|
-
return /* @__PURE__ */
|
|
5311
|
-
|
|
5415
|
+
return /* @__PURE__ */ React93.createElement(import_ui80.Box, { ref: defaultRef }, /* @__PURE__ */ React93.createElement(
|
|
5416
|
+
import_ui80.UnstableTag,
|
|
5312
5417
|
{
|
|
5313
5418
|
variant: "outlined",
|
|
5314
5419
|
label: transitionLabel,
|
|
5315
|
-
endIcon: /* @__PURE__ */
|
|
5316
|
-
...(0,
|
|
5420
|
+
endIcon: /* @__PURE__ */ React93.createElement(import_icons30.ChevronDownIcon, { fontSize: "tiny" }),
|
|
5421
|
+
...(0, import_ui80.bindTrigger)(popoverState),
|
|
5317
5422
|
fullWidth: true
|
|
5318
5423
|
}
|
|
5319
|
-
), /* @__PURE__ */
|
|
5320
|
-
|
|
5424
|
+
), /* @__PURE__ */ React93.createElement(
|
|
5425
|
+
import_ui80.Popover,
|
|
5321
5426
|
{
|
|
5322
5427
|
disablePortal: true,
|
|
5323
5428
|
disableScrollLock: true,
|
|
5324
|
-
...(0,
|
|
5429
|
+
...(0, import_ui80.bindPopover)(popoverState),
|
|
5325
5430
|
anchorReference: "anchorPosition",
|
|
5326
5431
|
anchorPosition: getAnchorPosition(),
|
|
5327
5432
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
5328
5433
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
5329
5434
|
},
|
|
5330
|
-
/* @__PURE__ */
|
|
5435
|
+
/* @__PURE__ */ React93.createElement(
|
|
5331
5436
|
ItemSelector,
|
|
5332
5437
|
{
|
|
5333
5438
|
itemsList: getItemList(),
|
|
@@ -5335,7 +5440,7 @@ var TransitionSelector = ({
|
|
|
5335
5440
|
onItemChange: handleTransitionPropertyChange,
|
|
5336
5441
|
onClose: popoverState.close,
|
|
5337
5442
|
sectionWidth: 268,
|
|
5338
|
-
title: (0,
|
|
5443
|
+
title: (0, import_i18n47.__)("Transition Property", "elementor"),
|
|
5339
5444
|
icon: import_icons30.VariationsIcon,
|
|
5340
5445
|
disabledItems
|
|
5341
5446
|
}
|
|
@@ -5351,8 +5456,8 @@ var DURATION_CONFIG = {
|
|
|
5351
5456
|
};
|
|
5352
5457
|
var getSelectionSizeProps = (recentlyUsedList, disabledItems) => {
|
|
5353
5458
|
return {
|
|
5354
|
-
selectionLabel: (0,
|
|
5355
|
-
sizeLabel: (0,
|
|
5459
|
+
selectionLabel: (0, import_i18n48.__)("Type", "elementor"),
|
|
5460
|
+
sizeLabel: (0, import_i18n48.__)("Duration", "elementor"),
|
|
5356
5461
|
selectionConfig: {
|
|
5357
5462
|
component: TransitionSelector,
|
|
5358
5463
|
props: {
|
|
@@ -5375,23 +5480,23 @@ var getSelectionSizeProps = (recentlyUsedList, disabledItems) => {
|
|
|
5375
5480
|
};
|
|
5376
5481
|
function getChildControlConfig(recentlyUsedList, disabledItems) {
|
|
5377
5482
|
return {
|
|
5378
|
-
propTypeUtil:
|
|
5483
|
+
propTypeUtil: import_editor_props49.selectionSizePropTypeUtil,
|
|
5379
5484
|
component: SelectionSizeControl,
|
|
5380
5485
|
props: getSelectionSizeProps(recentlyUsedList, disabledItems)
|
|
5381
5486
|
};
|
|
5382
5487
|
}
|
|
5383
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
5384
|
-
|
|
5488
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React94.createElement(
|
|
5489
|
+
import_ui81.Alert,
|
|
5385
5490
|
{
|
|
5386
5491
|
sx: {
|
|
5387
5492
|
width: 280,
|
|
5388
5493
|
gap: 0.5
|
|
5389
5494
|
},
|
|
5390
5495
|
color: "secondary",
|
|
5391
|
-
icon: /* @__PURE__ */
|
|
5496
|
+
icon: /* @__PURE__ */ React94.createElement(import_icons31.InfoCircleFilledIcon, null)
|
|
5392
5497
|
},
|
|
5393
|
-
/* @__PURE__ */
|
|
5394
|
-
/* @__PURE__ */
|
|
5498
|
+
/* @__PURE__ */ React94.createElement(import_ui81.AlertTitle, null, (0, import_i18n48.__)("Transitions", "elementor")),
|
|
5499
|
+
/* @__PURE__ */ React94.createElement(import_ui81.Box, { component: "span" }, /* @__PURE__ */ React94.createElement(import_ui81.Typography, { variant: "body2" }, (0, import_i18n48.__)("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
5395
5500
|
);
|
|
5396
5501
|
subscribeToTransitionEvent();
|
|
5397
5502
|
var getTransitionLabel = (item) => {
|
|
@@ -5408,7 +5513,7 @@ var TransitionRepeaterControl = createControl(
|
|
|
5408
5513
|
const currentStyleIsNormal = currentStyleState === null;
|
|
5409
5514
|
const [recentlyUsedList, setRecentlyUsedList] = (0, import_react49.useState)([]);
|
|
5410
5515
|
const childArrayPropTypeUtil = (0, import_react49.useMemo)(
|
|
5411
|
-
() => (0,
|
|
5516
|
+
() => (0, import_editor_props49.createArrayPropUtils)(import_editor_props49.selectionSizePropTypeUtil.key, import_editor_props49.selectionSizePropTypeUtil.schema, "transition"),
|
|
5412
5517
|
[]
|
|
5413
5518
|
);
|
|
5414
5519
|
const { value } = useBoundProp(childArrayPropTypeUtil);
|
|
@@ -5416,13 +5521,13 @@ var TransitionRepeaterControl = createControl(
|
|
|
5416
5521
|
(0, import_react49.useEffect)(() => {
|
|
5417
5522
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
5418
5523
|
}, [recentlyUsedListGetter]);
|
|
5419
|
-
return /* @__PURE__ */
|
|
5524
|
+
return /* @__PURE__ */ React94.createElement(
|
|
5420
5525
|
RepeatableControl,
|
|
5421
5526
|
{
|
|
5422
|
-
label: (0,
|
|
5423
|
-
repeaterLabel: (0,
|
|
5527
|
+
label: (0, import_i18n48.__)("Transitions", "elementor"),
|
|
5528
|
+
repeaterLabel: (0, import_i18n48.__)("Transitions", "elementor"),
|
|
5424
5529
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
5425
|
-
placeholder: (0,
|
|
5530
|
+
placeholder: (0, import_i18n48.__)("Empty Transition", "elementor"),
|
|
5426
5531
|
showDuplicate: false,
|
|
5427
5532
|
showToggle: true,
|
|
5428
5533
|
initialValues: initialTransitionValue,
|
|
@@ -5439,21 +5544,21 @@ var TransitionRepeaterControl = createControl(
|
|
|
5439
5544
|
);
|
|
5440
5545
|
|
|
5441
5546
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
5442
|
-
var
|
|
5547
|
+
var React95 = __toESM(require("react"));
|
|
5443
5548
|
var import_icons32 = require("@elementor/icons");
|
|
5444
|
-
var
|
|
5445
|
-
var CustomIconButton = (0,
|
|
5549
|
+
var import_ui82 = require("@elementor/ui");
|
|
5550
|
+
var CustomIconButton = (0, import_ui82.styled)(import_ui82.IconButton)(({ theme }) => ({
|
|
5446
5551
|
width: theme.spacing(2.5),
|
|
5447
5552
|
height: theme.spacing(2.5)
|
|
5448
5553
|
}));
|
|
5449
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
5554
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React95.createElement(import_ui82.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React95.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React95.createElement(import_icons32.BrushBigIcon, { fontSize: size })));
|
|
5450
5555
|
|
|
5451
5556
|
// src/components/repeater.tsx
|
|
5452
|
-
var
|
|
5557
|
+
var React96 = __toESM(require("react"));
|
|
5453
5558
|
var import_react50 = require("react");
|
|
5454
5559
|
var import_icons33 = require("@elementor/icons");
|
|
5455
|
-
var
|
|
5456
|
-
var
|
|
5560
|
+
var import_ui83 = require("@elementor/ui");
|
|
5561
|
+
var import_i18n49 = require("@wordpress/i18n");
|
|
5457
5562
|
var SIZE9 = "tiny";
|
|
5458
5563
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
5459
5564
|
var Repeater3 = ({
|
|
@@ -5548,8 +5653,8 @@ var Repeater3 = ({
|
|
|
5548
5653
|
{ action: { type: "reorder", payload: { ...meta } } }
|
|
5549
5654
|
);
|
|
5550
5655
|
};
|
|
5551
|
-
return /* @__PURE__ */
|
|
5552
|
-
|
|
5656
|
+
return /* @__PURE__ */ React96.createElement(SectionContent, null, /* @__PURE__ */ React96.createElement(
|
|
5657
|
+
import_ui83.Stack,
|
|
5553
5658
|
{
|
|
5554
5659
|
direction: "row",
|
|
5555
5660
|
justifyContent: "start",
|
|
@@ -5557,31 +5662,31 @@ var Repeater3 = ({
|
|
|
5557
5662
|
gap: 1,
|
|
5558
5663
|
sx: { marginInlineEnd: -0.75 }
|
|
5559
5664
|
},
|
|
5560
|
-
/* @__PURE__ */
|
|
5561
|
-
/* @__PURE__ */
|
|
5562
|
-
/* @__PURE__ */
|
|
5563
|
-
|
|
5665
|
+
/* @__PURE__ */ React96.createElement(import_ui83.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
|
|
5666
|
+
/* @__PURE__ */ React96.createElement(ControlAdornments, null),
|
|
5667
|
+
/* @__PURE__ */ React96.createElement(
|
|
5668
|
+
import_ui83.IconButton,
|
|
5564
5669
|
{
|
|
5565
5670
|
size: SIZE9,
|
|
5566
5671
|
sx: { ml: "auto" },
|
|
5567
5672
|
disabled,
|
|
5568
5673
|
onClick: addRepeaterItem,
|
|
5569
|
-
"aria-label": (0,
|
|
5674
|
+
"aria-label": (0, import_i18n49.__)("Add item", "elementor")
|
|
5570
5675
|
},
|
|
5571
|
-
/* @__PURE__ */
|
|
5676
|
+
/* @__PURE__ */ React96.createElement(import_icons33.PlusIcon, { fontSize: SIZE9 })
|
|
5572
5677
|
)
|
|
5573
|
-
), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
5678
|
+
), 0 < uniqueKeys.length && /* @__PURE__ */ React96.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
|
|
5574
5679
|
const value = items2[index];
|
|
5575
5680
|
if (!value) {
|
|
5576
5681
|
return null;
|
|
5577
5682
|
}
|
|
5578
|
-
return /* @__PURE__ */
|
|
5683
|
+
return /* @__PURE__ */ React96.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React96.createElement(
|
|
5579
5684
|
RepeaterItem,
|
|
5580
5685
|
{
|
|
5581
5686
|
disabled,
|
|
5582
5687
|
propDisabled: value?.disabled,
|
|
5583
|
-
label: /* @__PURE__ */
|
|
5584
|
-
startIcon: /* @__PURE__ */
|
|
5688
|
+
label: /* @__PURE__ */ React96.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React96.createElement(itemSettings.Label, { value })),
|
|
5689
|
+
startIcon: /* @__PURE__ */ React96.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React96.createElement(itemSettings.Icon, { value })),
|
|
5585
5690
|
removeItem: () => removeRepeaterItem(index),
|
|
5586
5691
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
5587
5692
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -5591,7 +5696,7 @@ var Repeater3 = ({
|
|
|
5591
5696
|
showToggle,
|
|
5592
5697
|
collectionPropUtil
|
|
5593
5698
|
},
|
|
5594
|
-
(props) => /* @__PURE__ */
|
|
5699
|
+
(props) => /* @__PURE__ */ React96.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
|
|
5595
5700
|
));
|
|
5596
5701
|
})));
|
|
5597
5702
|
};
|
|
@@ -5612,11 +5717,11 @@ var RepeaterItem = ({
|
|
|
5612
5717
|
}) => {
|
|
5613
5718
|
const [anchorEl, setAnchorEl] = (0, import_react50.useState)(null);
|
|
5614
5719
|
const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
|
|
5615
|
-
const duplicateLabel = (0,
|
|
5616
|
-
const toggleLabel = propDisabled ? (0,
|
|
5617
|
-
const removeLabel = (0,
|
|
5618
|
-
return /* @__PURE__ */
|
|
5619
|
-
|
|
5720
|
+
const duplicateLabel = (0, import_i18n49.__)("Duplicate", "elementor");
|
|
5721
|
+
const toggleLabel = propDisabled ? (0, import_i18n49.__)("Show", "elementor") : (0, import_i18n49.__)("Hide", "elementor");
|
|
5722
|
+
const removeLabel = (0, import_i18n49.__)("Remove", "elementor");
|
|
5723
|
+
return /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(
|
|
5724
|
+
import_ui83.UnstableTag,
|
|
5620
5725
|
{
|
|
5621
5726
|
disabled,
|
|
5622
5727
|
label,
|
|
@@ -5624,13 +5729,13 @@ var RepeaterItem = ({
|
|
|
5624
5729
|
fullWidth: true,
|
|
5625
5730
|
ref: setRef,
|
|
5626
5731
|
variant: "outlined",
|
|
5627
|
-
"aria-label": (0,
|
|
5628
|
-
...(0,
|
|
5732
|
+
"aria-label": (0, import_i18n49.__)("Open item", "elementor"),
|
|
5733
|
+
...(0, import_ui83.bindTrigger)(popoverState),
|
|
5629
5734
|
startIcon,
|
|
5630
|
-
actions: /* @__PURE__ */
|
|
5735
|
+
actions: /* @__PURE__ */ React96.createElement(React96.Fragment, null, showDuplicate && /* @__PURE__ */ React96.createElement(import_ui83.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(import_ui83.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React96.createElement(import_icons33.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React96.createElement(import_ui83.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(import_ui83.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React96.createElement(import_icons33.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React96.createElement(import_icons33.EyeIcon, { fontSize: SIZE9 }))), /* @__PURE__ */ React96.createElement(import_ui83.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(import_ui83.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React96.createElement(import_icons33.XIcon, { fontSize: SIZE9 }))))
|
|
5631
5736
|
}
|
|
5632
|
-
), /* @__PURE__ */
|
|
5633
|
-
|
|
5737
|
+
), /* @__PURE__ */ React96.createElement(
|
|
5738
|
+
import_ui83.Popover,
|
|
5634
5739
|
{
|
|
5635
5740
|
disablePortal: true,
|
|
5636
5741
|
slotProps: {
|
|
@@ -5643,13 +5748,13 @@ var RepeaterItem = ({
|
|
|
5643
5748
|
...popoverProps,
|
|
5644
5749
|
anchorEl: ref
|
|
5645
5750
|
},
|
|
5646
|
-
/* @__PURE__ */
|
|
5751
|
+
/* @__PURE__ */ React96.createElement(import_ui83.Box, null, children({ anchorEl, collectionPropUtil }))
|
|
5647
5752
|
));
|
|
5648
5753
|
};
|
|
5649
5754
|
var usePopover = (openOnMount, onOpen) => {
|
|
5650
5755
|
const [ref, setRef] = (0, import_react50.useState)(null);
|
|
5651
|
-
const popoverState = (0,
|
|
5652
|
-
const popoverProps = (0,
|
|
5756
|
+
const popoverState = (0, import_ui83.usePopupState)({ variant: "popover" });
|
|
5757
|
+
const popoverProps = (0, import_ui83.bindPopover)(popoverState);
|
|
5653
5758
|
(0, import_react50.useEffect)(() => {
|
|
5654
5759
|
if (openOnMount && ref) {
|
|
5655
5760
|
popoverState.open(ref);
|
|
@@ -5681,6 +5786,7 @@ var usePopover = (openOnMount, onOpen) => {
|
|
|
5681
5786
|
FloatingActionsBar,
|
|
5682
5787
|
FontFamilyControl,
|
|
5683
5788
|
GapControl,
|
|
5789
|
+
HtmlTagControl,
|
|
5684
5790
|
ImageControl,
|
|
5685
5791
|
ItemSelector,
|
|
5686
5792
|
KeyValueControl,
|