@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.mjs
CHANGED
|
@@ -3164,6 +3164,11 @@ var QueryControl = createControl((props) => {
|
|
|
3164
3164
|
onSetValue?.(valueToSave);
|
|
3165
3165
|
};
|
|
3166
3166
|
const onTextChange = (newValue) => {
|
|
3167
|
+
if (!newValue) {
|
|
3168
|
+
setValue(null);
|
|
3169
|
+
onSetValue?.(null);
|
|
3170
|
+
return;
|
|
3171
|
+
}
|
|
3167
3172
|
const newLinkValue = newValue?.trim() || "";
|
|
3168
3173
|
const valueToSave = newLinkValue ? urlPropTypeUtil2.create(newLinkValue) : null;
|
|
3169
3174
|
setValue(valueToSave);
|
|
@@ -3327,13 +3332,112 @@ var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
|
|
|
3327
3332
|
return /* @__PURE__ */ React62.createElement(IconButton6, { size: SIZE6, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React62.createElement(MinusIcon, { fontSize: SIZE6 }) : /* @__PURE__ */ React62.createElement(PlusIcon2, { fontSize: SIZE6 }));
|
|
3328
3333
|
};
|
|
3329
3334
|
|
|
3330
|
-
// src/controls/
|
|
3335
|
+
// src/controls/html-tag-control.tsx
|
|
3336
|
+
import * as React64 from "react";
|
|
3337
|
+
import { getElementLabel } from "@elementor/editor-elements";
|
|
3338
|
+
import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
|
|
3339
|
+
import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
|
|
3340
|
+
import { Select as Select2, styled as styled7, Typography as Typography5 } from "@elementor/ui";
|
|
3341
|
+
import { __ as __23 } from "@wordpress/i18n";
|
|
3342
|
+
|
|
3343
|
+
// src/components/conditional-control-infotip.tsx
|
|
3331
3344
|
import * as React63 from "react";
|
|
3345
|
+
import { InfoAlert } from "@elementor/editor-ui";
|
|
3346
|
+
import { AlertTitle as AlertTitle2, Box as Box11, Infotip as Infotip3, useTheme as useTheme2 } from "@elementor/ui";
|
|
3347
|
+
import { DirectionProvider } from "@elementor/ui";
|
|
3348
|
+
var DEFAULT_COLOR = "secondary";
|
|
3349
|
+
var ConditionalControlInfotip = React63.forwardRef(
|
|
3350
|
+
({ children, title, description, alertProps, infotipProps, ...props }, ref) => {
|
|
3351
|
+
const theme = useTheme2();
|
|
3352
|
+
const isUiRtl = "rtl" === theme.direction;
|
|
3353
|
+
const isEnabled = props.isEnabled && (title || description);
|
|
3354
|
+
return /* @__PURE__ */ React63.createElement(Box11, { ref }, isEnabled ? /* @__PURE__ */ React63.createElement(DirectionProvider, { rtl: isUiRtl }, /* @__PURE__ */ React63.createElement(
|
|
3355
|
+
Infotip3,
|
|
3356
|
+
{
|
|
3357
|
+
placement: "right",
|
|
3358
|
+
color: DEFAULT_COLOR,
|
|
3359
|
+
slotProps: {
|
|
3360
|
+
popper: {
|
|
3361
|
+
modifiers: [
|
|
3362
|
+
{
|
|
3363
|
+
name: "offset",
|
|
3364
|
+
options: {
|
|
3365
|
+
offset: [0, 10]
|
|
3366
|
+
}
|
|
3367
|
+
}
|
|
3368
|
+
]
|
|
3369
|
+
}
|
|
3370
|
+
},
|
|
3371
|
+
...infotipProps,
|
|
3372
|
+
content: /* @__PURE__ */ React63.createElement(
|
|
3373
|
+
InfoAlert,
|
|
3374
|
+
{
|
|
3375
|
+
color: DEFAULT_COLOR,
|
|
3376
|
+
sx: { width: 300, px: 1.5, py: 2 },
|
|
3377
|
+
...alertProps
|
|
3378
|
+
},
|
|
3379
|
+
/* @__PURE__ */ React63.createElement(Box11, { sx: { flexDirection: "column", display: "flex", gap: 0.5 } }, /* @__PURE__ */ React63.createElement(AlertTitle2, null, title), /* @__PURE__ */ React63.createElement(Box11, null, description))
|
|
3380
|
+
)
|
|
3381
|
+
},
|
|
3382
|
+
children
|
|
3383
|
+
)) : children);
|
|
3384
|
+
}
|
|
3385
|
+
);
|
|
3386
|
+
|
|
3387
|
+
// src/controls/html-tag-control.tsx
|
|
3388
|
+
var StyledSelect = styled7(Select2)(() => ({ ".MuiSelect-select.Mui-disabled": { cursor: "not-allowed" } }));
|
|
3389
|
+
var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} }) => {
|
|
3390
|
+
const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil7);
|
|
3391
|
+
const handleChange = (event) => {
|
|
3392
|
+
const newValue = event.target.value || null;
|
|
3393
|
+
onChange?.(newValue, value);
|
|
3394
|
+
setValue(newValue);
|
|
3395
|
+
};
|
|
3396
|
+
const elementLabel = getElementLabel() ?? "element";
|
|
3397
|
+
const infoTipProps = {
|
|
3398
|
+
title: __23("HTML Tag", "elementor"),
|
|
3399
|
+
/* translators: %s is the element name. */
|
|
3400
|
+
description: __23(
|
|
3401
|
+
`The tag is locked to 'a' tag because this %s has a link. To pick a different tag, remove the link first.`,
|
|
3402
|
+
"elementor"
|
|
3403
|
+
).replace("%s", elementLabel),
|
|
3404
|
+
isEnabled: !!disabled
|
|
3405
|
+
};
|
|
3406
|
+
const renderValue = (selectedValue) => {
|
|
3407
|
+
if (selectedValue) {
|
|
3408
|
+
return findOptionByValue(selectedValue)?.label || fallbackLabels[selectedValue] || selectedValue;
|
|
3409
|
+
}
|
|
3410
|
+
if (!placeholder) {
|
|
3411
|
+
return "";
|
|
3412
|
+
}
|
|
3413
|
+
const placeholderOption = findOptionByValue(placeholder);
|
|
3414
|
+
const displayText = placeholderOption?.label || placeholder;
|
|
3415
|
+
return /* @__PURE__ */ React64.createElement(Typography5, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
|
|
3416
|
+
};
|
|
3417
|
+
const findOptionByValue = (searchValue) => options.find((opt) => opt.value === searchValue);
|
|
3418
|
+
return /* @__PURE__ */ React64.createElement(ControlActions, null, /* @__PURE__ */ React64.createElement(ConditionalControlInfotip, { ...infoTipProps }, /* @__PURE__ */ React64.createElement(
|
|
3419
|
+
StyledSelect,
|
|
3420
|
+
{
|
|
3421
|
+
sx: { overflow: "hidden", cursor: disabled ? "not-allowed" : void 0 },
|
|
3422
|
+
displayEmpty: true,
|
|
3423
|
+
size: "tiny",
|
|
3424
|
+
renderValue,
|
|
3425
|
+
value: value ?? "",
|
|
3426
|
+
onChange: handleChange,
|
|
3427
|
+
disabled,
|
|
3428
|
+
fullWidth: true
|
|
3429
|
+
},
|
|
3430
|
+
options.map(({ label, ...props }) => /* @__PURE__ */ React64.createElement(MenuListItem3, { key: props.value, ...props, value: props.value ?? "" }, label))
|
|
3431
|
+
)));
|
|
3432
|
+
});
|
|
3433
|
+
|
|
3434
|
+
// src/controls/gap-control.tsx
|
|
3435
|
+
import * as React65 from "react";
|
|
3332
3436
|
import { useRef as useRef10 } from "react";
|
|
3333
3437
|
import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil5 } from "@elementor/editor-props";
|
|
3334
3438
|
import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
|
|
3335
3439
|
import { Grid as Grid11, Stack as Stack11, ToggleButton as ToggleButton3, Tooltip as Tooltip7 } from "@elementor/ui";
|
|
3336
|
-
import { __ as
|
|
3440
|
+
import { __ as __24 } from "@wordpress/i18n";
|
|
3337
3441
|
var GapControl = ({ label }) => {
|
|
3338
3442
|
const {
|
|
3339
3443
|
value: directionValue,
|
|
@@ -3357,10 +3461,10 @@ var GapControl = ({ label }) => {
|
|
|
3357
3461
|
};
|
|
3358
3462
|
const tooltipLabel = label.toLowerCase();
|
|
3359
3463
|
const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
|
|
3360
|
-
const linkedLabel =
|
|
3361
|
-
const unlinkedLabel =
|
|
3464
|
+
const linkedLabel = __24("Link %s", "elementor").replace("%s", tooltipLabel);
|
|
3465
|
+
const unlinkedLabel = __24("Unlink %s", "elementor").replace("%s", tooltipLabel);
|
|
3362
3466
|
const disabled = sizeDisabled || directionDisabled;
|
|
3363
|
-
return /* @__PURE__ */
|
|
3467
|
+
return /* @__PURE__ */ React65.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React65.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React65.createElement(ControlLabel, null, label), /* @__PURE__ */ React65.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React65.createElement(
|
|
3364
3468
|
ToggleButton3,
|
|
3365
3469
|
{
|
|
3366
3470
|
"aria-label": isLinked ? unlinkedLabel : linkedLabel,
|
|
@@ -3371,8 +3475,8 @@ var GapControl = ({ label }) => {
|
|
|
3371
3475
|
onChange: onLinkToggle,
|
|
3372
3476
|
disabled
|
|
3373
3477
|
},
|
|
3374
|
-
/* @__PURE__ */
|
|
3375
|
-
))), /* @__PURE__ */
|
|
3478
|
+
/* @__PURE__ */ React65.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
3479
|
+
))), /* @__PURE__ */ React65.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React65.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React65.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, __24("Column", "elementor"))), /* @__PURE__ */ React65.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React65.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React65.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, __24("Row", "elementor"))), /* @__PURE__ */ React65.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
|
|
3376
3480
|
};
|
|
3377
3481
|
var Control4 = ({
|
|
3378
3482
|
bind,
|
|
@@ -3380,21 +3484,21 @@ var Control4 = ({
|
|
|
3380
3484
|
anchorRef
|
|
3381
3485
|
}) => {
|
|
3382
3486
|
if (isLinked) {
|
|
3383
|
-
return /* @__PURE__ */
|
|
3487
|
+
return /* @__PURE__ */ React65.createElement(SizeControl, { anchorRef });
|
|
3384
3488
|
}
|
|
3385
|
-
return /* @__PURE__ */
|
|
3489
|
+
return /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React65.createElement(SizeControl, { anchorRef }));
|
|
3386
3490
|
};
|
|
3387
3491
|
|
|
3388
3492
|
// src/controls/aspect-ratio-control.tsx
|
|
3389
|
-
import * as
|
|
3493
|
+
import * as React66 from "react";
|
|
3390
3494
|
import { useEffect as useEffect8, useState as useState12 } from "react";
|
|
3391
|
-
import { stringPropTypeUtil as
|
|
3392
|
-
import { MenuListItem as
|
|
3495
|
+
import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
|
|
3496
|
+
import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
|
|
3393
3497
|
import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
|
|
3394
|
-
import { Grid as Grid12, Select as
|
|
3395
|
-
import { __ as
|
|
3498
|
+
import { Grid as Grid12, Select as Select3, Stack as Stack12, TextField as TextField7 } from "@elementor/ui";
|
|
3499
|
+
import { __ as __25 } from "@wordpress/i18n";
|
|
3396
3500
|
var RATIO_OPTIONS = [
|
|
3397
|
-
{ label:
|
|
3501
|
+
{ label: __25("Auto", "elementor"), value: "auto" },
|
|
3398
3502
|
{ label: "1/1", value: "1/1" },
|
|
3399
3503
|
{ label: "4/3", value: "4/3" },
|
|
3400
3504
|
{ label: "3/4", value: "3/4" },
|
|
@@ -3405,7 +3509,7 @@ var RATIO_OPTIONS = [
|
|
|
3405
3509
|
];
|
|
3406
3510
|
var CUSTOM_RATIO = "custom";
|
|
3407
3511
|
var AspectRatioControl = createControl(({ label }) => {
|
|
3408
|
-
const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(
|
|
3512
|
+
const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(stringPropTypeUtil8);
|
|
3409
3513
|
const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
|
|
3410
3514
|
const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
|
|
3411
3515
|
const [isCustom, setIsCustom] = useState12(isCustomSelected);
|
|
@@ -3453,8 +3557,8 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
3453
3557
|
setAspectRatioValue(`${customWidth}/${newHeight}`);
|
|
3454
3558
|
}
|
|
3455
3559
|
};
|
|
3456
|
-
return /* @__PURE__ */
|
|
3457
|
-
|
|
3560
|
+
return /* @__PURE__ */ React66.createElement(ControlActions, null, /* @__PURE__ */ React66.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React66.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React66.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlLabel, null, label)), /* @__PURE__ */ React66.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(
|
|
3561
|
+
Select3,
|
|
3458
3562
|
{
|
|
3459
3563
|
size: "tiny",
|
|
3460
3564
|
displayEmpty: true,
|
|
@@ -3464,10 +3568,10 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
3464
3568
|
onChange: handleSelectChange,
|
|
3465
3569
|
fullWidth: true
|
|
3466
3570
|
},
|
|
3467
|
-
[...RATIO_OPTIONS, { label:
|
|
3468
|
-
({ label: optionLabel, ...props }) => /* @__PURE__ */
|
|
3571
|
+
[...RATIO_OPTIONS, { label: __25("Custom", "elementor"), value: CUSTOM_RATIO }].map(
|
|
3572
|
+
({ label: optionLabel, ...props }) => /* @__PURE__ */ React66.createElement(MenuListItem4, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
|
|
3469
3573
|
)
|
|
3470
|
-
))), isCustom && /* @__PURE__ */
|
|
3574
|
+
))), isCustom && /* @__PURE__ */ React66.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React66.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(
|
|
3471
3575
|
TextField7,
|
|
3472
3576
|
{
|
|
3473
3577
|
size: "tiny",
|
|
@@ -3477,10 +3581,10 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
3477
3581
|
value: customWidth,
|
|
3478
3582
|
onChange: handleCustomWidthChange,
|
|
3479
3583
|
InputProps: {
|
|
3480
|
-
startAdornment: /* @__PURE__ */
|
|
3584
|
+
startAdornment: /* @__PURE__ */ React66.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
|
|
3481
3585
|
}
|
|
3482
3586
|
}
|
|
3483
|
-
)), /* @__PURE__ */
|
|
3587
|
+
)), /* @__PURE__ */ React66.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(
|
|
3484
3588
|
TextField7,
|
|
3485
3589
|
{
|
|
3486
3590
|
size: "tiny",
|
|
@@ -3490,25 +3594,25 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
3490
3594
|
value: customHeight,
|
|
3491
3595
|
onChange: handleCustomHeightChange,
|
|
3492
3596
|
InputProps: {
|
|
3493
|
-
startAdornment: /* @__PURE__ */
|
|
3597
|
+
startAdornment: /* @__PURE__ */ React66.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
|
|
3494
3598
|
}
|
|
3495
3599
|
}
|
|
3496
3600
|
)))));
|
|
3497
3601
|
});
|
|
3498
3602
|
|
|
3499
3603
|
// src/controls/svg-media-control.tsx
|
|
3500
|
-
import * as
|
|
3604
|
+
import * as React68 from "react";
|
|
3501
3605
|
import { useState as useState14 } from "react";
|
|
3606
|
+
import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
|
|
3502
3607
|
import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
|
|
3503
3608
|
import { UploadIcon as UploadIcon2 } from "@elementor/icons";
|
|
3504
|
-
import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as
|
|
3609
|
+
import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled8, ThemeProvider } from "@elementor/ui";
|
|
3505
3610
|
import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
|
|
3506
|
-
import { __ as
|
|
3611
|
+
import { __ as __27 } from "@wordpress/i18n";
|
|
3507
3612
|
|
|
3508
3613
|
// src/components/enable-unfiltered-modal.tsx
|
|
3509
|
-
import * as
|
|
3614
|
+
import * as React67 from "react";
|
|
3510
3615
|
import { useState as useState13 } from "react";
|
|
3511
|
-
import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
|
|
3512
3616
|
import {
|
|
3513
3617
|
Button as Button3,
|
|
3514
3618
|
CircularProgress as CircularProgress2,
|
|
@@ -3520,28 +3624,21 @@ import {
|
|
|
3520
3624
|
DialogTitle,
|
|
3521
3625
|
Divider as Divider3
|
|
3522
3626
|
} from "@elementor/ui";
|
|
3523
|
-
import { __ as
|
|
3524
|
-
var ADMIN_TITLE_TEXT =
|
|
3525
|
-
var ADMIN_CONTENT_TEXT =
|
|
3627
|
+
import { __ as __26 } from "@wordpress/i18n";
|
|
3628
|
+
var ADMIN_TITLE_TEXT = __26("Enable Unfiltered Uploads", "elementor");
|
|
3629
|
+
var ADMIN_CONTENT_TEXT = __26(
|
|
3526
3630
|
"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.",
|
|
3527
3631
|
"elementor"
|
|
3528
3632
|
);
|
|
3529
|
-
var
|
|
3530
|
-
var
|
|
3531
|
-
"This is because this file type may pose a security risk. To upload them anyway, ask the site administrator to enable unfiltered file uploads.",
|
|
3532
|
-
"elementor"
|
|
3533
|
-
);
|
|
3534
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT1 = __25("Failed to enable unfiltered files upload.", "elementor");
|
|
3535
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT2 = __25(
|
|
3633
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT1 = __26("Failed to enable unfiltered files upload.", "elementor");
|
|
3634
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT2 = __26(
|
|
3536
3635
|
"You can try again, if the problem persists, please contact support.",
|
|
3537
3636
|
"elementor"
|
|
3538
3637
|
);
|
|
3539
3638
|
var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
|
|
3540
3639
|
var EnableUnfilteredModal = (props) => {
|
|
3541
3640
|
const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
|
|
3542
|
-
const { canUser } = useCurrentUserCapabilities();
|
|
3543
3641
|
const [isError, setIsError] = useState13(false);
|
|
3544
|
-
const canManageOptions = canUser("manage_options");
|
|
3545
3642
|
const onClose = (enabled) => {
|
|
3546
3643
|
props.onClose(enabled);
|
|
3547
3644
|
setTimeout(() => setIsError(false), WAIT_FOR_CLOSE_TIMEOUT_MS);
|
|
@@ -3559,9 +3656,9 @@ var EnableUnfilteredModal = (props) => {
|
|
|
3559
3656
|
}
|
|
3560
3657
|
};
|
|
3561
3658
|
const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
|
|
3562
|
-
return
|
|
3659
|
+
return /* @__PURE__ */ React67.createElement(AdminDialog, { ...dialogProps });
|
|
3563
3660
|
};
|
|
3564
|
-
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */
|
|
3661
|
+
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React67.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React67.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React67.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React67.createElement(Divider3, null), /* @__PURE__ */ React67.createElement(DialogContent, null, /* @__PURE__ */ React67.createElement(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(DialogActions, null, /* @__PURE__ */ React67.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __26("Cancel", "elementor")), /* @__PURE__ */ React67.createElement(
|
|
3565
3662
|
Button3,
|
|
3566
3663
|
{
|
|
3567
3664
|
size: "medium",
|
|
@@ -3570,16 +3667,15 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
3570
3667
|
color: "primary",
|
|
3571
3668
|
disabled: isPending
|
|
3572
3669
|
},
|
|
3573
|
-
isPending ? /* @__PURE__ */
|
|
3670
|
+
isPending ? /* @__PURE__ */ React67.createElement(CircularProgress2, { size: 24 }) : __26("Enable", "elementor")
|
|
3574
3671
|
)));
|
|
3575
|
-
var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React65.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React65.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React65.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React65.createElement(Divider3, null), /* @__PURE__ */ React65.createElement(DialogContent, null, /* @__PURE__ */ React65.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React65.createElement(DialogActions, null, /* @__PURE__ */ React65.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __25("Got it", "elementor"))));
|
|
3576
3672
|
|
|
3577
3673
|
// src/controls/svg-media-control.tsx
|
|
3578
3674
|
var TILE_SIZE = 8;
|
|
3579
3675
|
var TILE_WHITE = "transparent";
|
|
3580
3676
|
var TILE_BLACK = "#c1c1c1";
|
|
3581
3677
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
3582
|
-
var StyledCard =
|
|
3678
|
+
var StyledCard = styled8(Card2)`
|
|
3583
3679
|
background-color: white;
|
|
3584
3680
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
3585
3681
|
background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
|
|
@@ -3588,7 +3684,7 @@ var StyledCard = styled7(Card2)`
|
|
|
3588
3684
|
${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
|
|
3589
3685
|
border: none;
|
|
3590
3686
|
`;
|
|
3591
|
-
var StyledCardMediaContainer =
|
|
3687
|
+
var StyledCardMediaContainer = styled8(Stack13)`
|
|
3592
3688
|
position: relative;
|
|
3593
3689
|
height: 140px;
|
|
3594
3690
|
object-fit: contain;
|
|
@@ -3606,6 +3702,8 @@ var SvgMediaControl = createControl(() => {
|
|
|
3606
3702
|
const src = attachment?.url ?? url?.value ?? null;
|
|
3607
3703
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
3608
3704
|
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState14(false);
|
|
3705
|
+
const { canUser } = useCurrentUserCapabilities();
|
|
3706
|
+
const canManageOptions = canUser("manage_options");
|
|
3609
3707
|
const { open } = useWpMediaFrame2({
|
|
3610
3708
|
mediaTypes: ["svg"],
|
|
3611
3709
|
multiple: false,
|
|
@@ -3633,15 +3731,20 @@ var SvgMediaControl = createControl(() => {
|
|
|
3633
3731
|
open(openOptions);
|
|
3634
3732
|
}
|
|
3635
3733
|
};
|
|
3636
|
-
|
|
3734
|
+
const infotipProps = {
|
|
3735
|
+
title: __27("Sorry, you can't upload that file yet.", "elementor"),
|
|
3736
|
+
description: /* @__PURE__ */ React68.createElement(React68.Fragment, null, __27("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React68.createElement("br", null), __27("file uploads.", "elementor")),
|
|
3737
|
+
isEnabled: !canManageOptions
|
|
3738
|
+
};
|
|
3739
|
+
return /* @__PURE__ */ React68.createElement(Stack13, { 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(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React68.createElement(
|
|
3637
3740
|
CardMedia2,
|
|
3638
3741
|
{
|
|
3639
3742
|
component: "img",
|
|
3640
3743
|
image: src,
|
|
3641
|
-
alt:
|
|
3744
|
+
alt: __27("Preview SVG", "elementor"),
|
|
3642
3745
|
sx: { maxHeight: "140px", width: "50px" }
|
|
3643
3746
|
}
|
|
3644
|
-
)), /* @__PURE__ */
|
|
3747
|
+
)), /* @__PURE__ */ React68.createElement(
|
|
3645
3748
|
CardOverlay2,
|
|
3646
3749
|
{
|
|
3647
3750
|
sx: {
|
|
@@ -3650,7 +3753,7 @@ var SvgMediaControl = createControl(() => {
|
|
|
3650
3753
|
}
|
|
3651
3754
|
}
|
|
3652
3755
|
},
|
|
3653
|
-
/* @__PURE__ */
|
|
3756
|
+
/* @__PURE__ */ React68.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React68.createElement(
|
|
3654
3757
|
Button4,
|
|
3655
3758
|
{
|
|
3656
3759
|
size: "tiny",
|
|
@@ -3658,52 +3761,53 @@ var SvgMediaControl = createControl(() => {
|
|
|
3658
3761
|
variant: "outlined",
|
|
3659
3762
|
onClick: () => handleClick(MODE_BROWSE)
|
|
3660
3763
|
},
|
|
3661
|
-
|
|
3662
|
-
), /* @__PURE__ */
|
|
3764
|
+
__27("Select SVG", "elementor")
|
|
3765
|
+
), /* @__PURE__ */ React68.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React68.createElement("span", null, /* @__PURE__ */ React68.createElement(ThemeProvider, { colorScheme: canManageOptions ? "light" : "dark" }, /* @__PURE__ */ React68.createElement(
|
|
3663
3766
|
Button4,
|
|
3664
3767
|
{
|
|
3665
3768
|
size: "tiny",
|
|
3666
3769
|
variant: "text",
|
|
3667
3770
|
color: "inherit",
|
|
3668
|
-
startIcon: /* @__PURE__ */
|
|
3669
|
-
|
|
3771
|
+
startIcon: /* @__PURE__ */ React68.createElement(UploadIcon2, null),
|
|
3772
|
+
disabled: canManageOptions ? false : true,
|
|
3773
|
+
onClick: () => canManageOptions && handleClick(MODE_UPLOAD)
|
|
3670
3774
|
},
|
|
3671
|
-
|
|
3672
|
-
))
|
|
3775
|
+
__27("Upload", "elementor")
|
|
3776
|
+
)))))
|
|
3673
3777
|
))));
|
|
3674
3778
|
});
|
|
3675
3779
|
|
|
3676
3780
|
// src/controls/background-control/background-control.tsx
|
|
3677
|
-
import * as
|
|
3781
|
+
import * as React75 from "react";
|
|
3678
3782
|
import { backgroundPropTypeUtil } from "@elementor/editor-props";
|
|
3679
3783
|
import { Grid as Grid17 } from "@elementor/ui";
|
|
3680
|
-
import { __ as
|
|
3784
|
+
import { __ as __33 } from "@wordpress/i18n";
|
|
3681
3785
|
|
|
3682
3786
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
3683
|
-
import * as
|
|
3787
|
+
import * as React74 from "react";
|
|
3684
3788
|
import {
|
|
3685
3789
|
backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
|
|
3686
3790
|
backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
|
|
3687
3791
|
backgroundOverlayPropTypeUtil,
|
|
3688
3792
|
colorPropTypeUtil as colorPropTypeUtil3
|
|
3689
3793
|
} from "@elementor/editor-props";
|
|
3690
|
-
import { Box as
|
|
3794
|
+
import { Box as Box12, CardMedia as CardMedia3, styled as styled9, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
|
|
3691
3795
|
import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
|
|
3692
|
-
import { __ as
|
|
3796
|
+
import { __ as __32 } from "@wordpress/i18n";
|
|
3693
3797
|
|
|
3694
3798
|
// src/env.ts
|
|
3695
3799
|
import { parseEnv } from "@elementor/env";
|
|
3696
3800
|
var { env } = parseEnv("@elementor/editor-controls");
|
|
3697
3801
|
|
|
3698
3802
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
3699
|
-
import * as
|
|
3803
|
+
import * as React69 from "react";
|
|
3700
3804
|
import {
|
|
3701
3805
|
backgroundGradientOverlayPropTypeUtil,
|
|
3702
3806
|
colorPropTypeUtil as colorPropTypeUtil2,
|
|
3703
3807
|
colorStopPropTypeUtil,
|
|
3704
3808
|
gradientColorStopPropTypeUtil,
|
|
3705
3809
|
numberPropTypeUtil as numberPropTypeUtil3,
|
|
3706
|
-
stringPropTypeUtil as
|
|
3810
|
+
stringPropTypeUtil as stringPropTypeUtil9
|
|
3707
3811
|
} from "@elementor/editor-props";
|
|
3708
3812
|
import { UnstableGradientBox } from "@elementor/ui";
|
|
3709
3813
|
var BackgroundGradientColorControl = createControl(() => {
|
|
@@ -3711,13 +3815,13 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
3711
3815
|
const handleChange = (newValue) => {
|
|
3712
3816
|
const transformedValue = createTransformableValue(newValue);
|
|
3713
3817
|
if (transformedValue.positions) {
|
|
3714
|
-
transformedValue.positions =
|
|
3818
|
+
transformedValue.positions = stringPropTypeUtil9.create(newValue.positions.join(" "));
|
|
3715
3819
|
}
|
|
3716
3820
|
setValue(transformedValue);
|
|
3717
3821
|
};
|
|
3718
3822
|
const createTransformableValue = (newValue) => ({
|
|
3719
3823
|
...newValue,
|
|
3720
|
-
type:
|
|
3824
|
+
type: stringPropTypeUtil9.create(newValue.type),
|
|
3721
3825
|
angle: numberPropTypeUtil3.create(newValue.angle),
|
|
3722
3826
|
stops: gradientColorStopPropTypeUtil.create(
|
|
3723
3827
|
newValue.stops.map(
|
|
@@ -3743,7 +3847,7 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
3743
3847
|
positions: positions?.value.split(" ")
|
|
3744
3848
|
};
|
|
3745
3849
|
};
|
|
3746
|
-
return /* @__PURE__ */
|
|
3850
|
+
return /* @__PURE__ */ React69.createElement(ControlActions, null, /* @__PURE__ */ React69.createElement(
|
|
3747
3851
|
UnstableGradientBox,
|
|
3748
3852
|
{
|
|
3749
3853
|
sx: { width: "auto", padding: 1.5 },
|
|
@@ -3753,7 +3857,7 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
3753
3857
|
));
|
|
3754
3858
|
});
|
|
3755
3859
|
var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
|
|
3756
|
-
type:
|
|
3860
|
+
type: stringPropTypeUtil9.create("linear"),
|
|
3757
3861
|
angle: numberPropTypeUtil3.create(180),
|
|
3758
3862
|
stops: gradientColorStopPropTypeUtil.create([
|
|
3759
3863
|
colorStopPropTypeUtil.create({
|
|
@@ -3768,51 +3872,51 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
|
|
|
3768
3872
|
});
|
|
3769
3873
|
|
|
3770
3874
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
3771
|
-
import * as
|
|
3875
|
+
import * as React70 from "react";
|
|
3772
3876
|
import { PinIcon, PinnedOffIcon } from "@elementor/icons";
|
|
3773
3877
|
import { Grid as Grid13 } from "@elementor/ui";
|
|
3774
|
-
import { __ as
|
|
3878
|
+
import { __ as __28 } from "@wordpress/i18n";
|
|
3775
3879
|
var attachmentControlOptions = [
|
|
3776
3880
|
{
|
|
3777
3881
|
value: "fixed",
|
|
3778
|
-
label:
|
|
3779
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3882
|
+
label: __28("Fixed", "elementor"),
|
|
3883
|
+
renderContent: ({ size }) => /* @__PURE__ */ React70.createElement(PinIcon, { fontSize: size }),
|
|
3780
3884
|
showTooltip: true
|
|
3781
3885
|
},
|
|
3782
3886
|
{
|
|
3783
3887
|
value: "scroll",
|
|
3784
|
-
label:
|
|
3785
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3888
|
+
label: __28("Scroll", "elementor"),
|
|
3889
|
+
renderContent: ({ size }) => /* @__PURE__ */ React70.createElement(PinnedOffIcon, { fontSize: size }),
|
|
3786
3890
|
showTooltip: true
|
|
3787
3891
|
}
|
|
3788
3892
|
];
|
|
3789
3893
|
var BackgroundImageOverlayAttachment = () => {
|
|
3790
|
-
return /* @__PURE__ */
|
|
3894
|
+
return /* @__PURE__ */ React70.createElement(PopoverGridContainer, null, /* @__PURE__ */ React70.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(ControlFormLabel, null, __28("Attachment", "elementor"))), /* @__PURE__ */ React70.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React70.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
3791
3895
|
};
|
|
3792
3896
|
|
|
3793
3897
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
3794
|
-
import * as
|
|
3898
|
+
import * as React71 from "react";
|
|
3795
3899
|
import { useRef as useRef11 } from "react";
|
|
3796
|
-
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as
|
|
3797
|
-
import { MenuListItem as
|
|
3900
|
+
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
|
|
3901
|
+
import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
|
|
3798
3902
|
import { LetterXIcon, LetterYIcon } from "@elementor/icons";
|
|
3799
|
-
import { Grid as Grid14, Select as
|
|
3800
|
-
import { __ as
|
|
3903
|
+
import { Grid as Grid14, Select as Select4 } from "@elementor/ui";
|
|
3904
|
+
import { __ as __29 } from "@wordpress/i18n";
|
|
3801
3905
|
var backgroundPositionOptions = [
|
|
3802
|
-
{ label:
|
|
3803
|
-
{ label:
|
|
3804
|
-
{ label:
|
|
3805
|
-
{ label:
|
|
3806
|
-
{ label:
|
|
3807
|
-
{ label:
|
|
3808
|
-
{ label:
|
|
3809
|
-
{ label:
|
|
3810
|
-
{ label:
|
|
3811
|
-
{ label:
|
|
3906
|
+
{ label: __29("Center center", "elementor"), value: "center center" },
|
|
3907
|
+
{ label: __29("Center left", "elementor"), value: "center left" },
|
|
3908
|
+
{ label: __29("Center right", "elementor"), value: "center right" },
|
|
3909
|
+
{ label: __29("Top center", "elementor"), value: "top center" },
|
|
3910
|
+
{ label: __29("Top left", "elementor"), value: "top left" },
|
|
3911
|
+
{ label: __29("Top right", "elementor"), value: "top right" },
|
|
3912
|
+
{ label: __29("Bottom center", "elementor"), value: "bottom center" },
|
|
3913
|
+
{ label: __29("Bottom left", "elementor"), value: "bottom left" },
|
|
3914
|
+
{ label: __29("Bottom right", "elementor"), value: "bottom right" },
|
|
3915
|
+
{ label: __29("Custom", "elementor"), value: "custom" }
|
|
3812
3916
|
];
|
|
3813
3917
|
var BackgroundImageOverlayPosition = () => {
|
|
3814
3918
|
const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
|
|
3815
|
-
const stringPropContext = useBoundProp(
|
|
3919
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil10);
|
|
3816
3920
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
3817
3921
|
const rowRef = useRef11(null);
|
|
3818
3922
|
const handlePositionChange = (event) => {
|
|
@@ -3823,8 +3927,8 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
3823
3927
|
stringPropContext.setValue(value);
|
|
3824
3928
|
}
|
|
3825
3929
|
};
|
|
3826
|
-
return /* @__PURE__ */
|
|
3827
|
-
|
|
3930
|
+
return /* @__PURE__ */ React71.createElement(Grid14, { container: true, spacing: 1.5 }, /* @__PURE__ */ React71.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(PopoverGridContainer, null, /* @__PURE__ */ React71.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(ControlFormLabel, null, __29("Position", "elementor"))), /* @__PURE__ */ React71.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React71.createElement(
|
|
3931
|
+
Select4,
|
|
3828
3932
|
{
|
|
3829
3933
|
fullWidth: true,
|
|
3830
3934
|
size: "tiny",
|
|
@@ -3832,18 +3936,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
3832
3936
|
disabled: stringPropContext.disabled,
|
|
3833
3937
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
3834
3938
|
},
|
|
3835
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
3836
|
-
)))), isCustom ? /* @__PURE__ */
|
|
3939
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React71.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
|
|
3940
|
+
)))), isCustom ? /* @__PURE__ */ React71.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React71.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(Grid14, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React71.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React71.createElement(
|
|
3837
3941
|
SizeControl,
|
|
3838
3942
|
{
|
|
3839
|
-
startIcon: /* @__PURE__ */
|
|
3943
|
+
startIcon: /* @__PURE__ */ React71.createElement(LetterXIcon, { fontSize: "tiny" }),
|
|
3840
3944
|
anchorRef: rowRef,
|
|
3841
3945
|
min: -Number.MAX_SAFE_INTEGER
|
|
3842
3946
|
}
|
|
3843
|
-
))), /* @__PURE__ */
|
|
3947
|
+
))), /* @__PURE__ */ React71.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React71.createElement(
|
|
3844
3948
|
SizeControl,
|
|
3845
3949
|
{
|
|
3846
|
-
startIcon: /* @__PURE__ */
|
|
3950
|
+
startIcon: /* @__PURE__ */ React71.createElement(LetterYIcon, { fontSize: "tiny" }),
|
|
3847
3951
|
anchorRef: rowRef,
|
|
3848
3952
|
min: -Number.MAX_SAFE_INTEGER
|
|
3849
3953
|
}
|
|
@@ -3851,44 +3955,44 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
3851
3955
|
};
|
|
3852
3956
|
|
|
3853
3957
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
3854
|
-
import * as
|
|
3958
|
+
import * as React72 from "react";
|
|
3855
3959
|
import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
|
|
3856
3960
|
import { Grid as Grid15 } from "@elementor/ui";
|
|
3857
|
-
import { __ as
|
|
3961
|
+
import { __ as __30 } from "@wordpress/i18n";
|
|
3858
3962
|
var repeatControlOptions = [
|
|
3859
3963
|
{
|
|
3860
3964
|
value: "repeat",
|
|
3861
|
-
label:
|
|
3862
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3965
|
+
label: __30("Repeat", "elementor"),
|
|
3966
|
+
renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(GridDotsIcon, { fontSize: size }),
|
|
3863
3967
|
showTooltip: true
|
|
3864
3968
|
},
|
|
3865
3969
|
{
|
|
3866
3970
|
value: "repeat-x",
|
|
3867
|
-
label:
|
|
3868
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3971
|
+
label: __30("Repeat-x", "elementor"),
|
|
3972
|
+
renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(DotsHorizontalIcon, { fontSize: size }),
|
|
3869
3973
|
showTooltip: true
|
|
3870
3974
|
},
|
|
3871
3975
|
{
|
|
3872
3976
|
value: "repeat-y",
|
|
3873
|
-
label:
|
|
3874
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3977
|
+
label: __30("Repeat-y", "elementor"),
|
|
3978
|
+
renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(DotsVerticalIcon, { fontSize: size }),
|
|
3875
3979
|
showTooltip: true
|
|
3876
3980
|
},
|
|
3877
3981
|
{
|
|
3878
3982
|
value: "no-repeat",
|
|
3879
|
-
label:
|
|
3880
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3983
|
+
label: __30("No-repeat", "elementor"),
|
|
3984
|
+
renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(XIcon3, { fontSize: size }),
|
|
3881
3985
|
showTooltip: true
|
|
3882
3986
|
}
|
|
3883
3987
|
];
|
|
3884
3988
|
var BackgroundImageOverlayRepeat = () => {
|
|
3885
|
-
return /* @__PURE__ */
|
|
3989
|
+
return /* @__PURE__ */ React72.createElement(PopoverGridContainer, null, /* @__PURE__ */ React72.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlFormLabel, null, __30("Repeat", "elementor"))), /* @__PURE__ */ React72.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React72.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
3886
3990
|
};
|
|
3887
3991
|
|
|
3888
3992
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
3889
|
-
import * as
|
|
3993
|
+
import * as React73 from "react";
|
|
3890
3994
|
import { useRef as useRef12 } from "react";
|
|
3891
|
-
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as
|
|
3995
|
+
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
|
|
3892
3996
|
import {
|
|
3893
3997
|
ArrowBarBothIcon,
|
|
3894
3998
|
ArrowsMaximizeIcon,
|
|
@@ -3898,36 +4002,36 @@ import {
|
|
|
3898
4002
|
PencilIcon
|
|
3899
4003
|
} from "@elementor/icons";
|
|
3900
4004
|
import { Grid as Grid16 } from "@elementor/ui";
|
|
3901
|
-
import { __ as
|
|
4005
|
+
import { __ as __31 } from "@wordpress/i18n";
|
|
3902
4006
|
var sizeControlOptions = [
|
|
3903
4007
|
{
|
|
3904
4008
|
value: "auto",
|
|
3905
|
-
label:
|
|
3906
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4009
|
+
label: __31("Auto", "elementor"),
|
|
4010
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(LetterAIcon, { fontSize: size }),
|
|
3907
4011
|
showTooltip: true
|
|
3908
4012
|
},
|
|
3909
4013
|
{
|
|
3910
4014
|
value: "cover",
|
|
3911
|
-
label:
|
|
3912
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4015
|
+
label: __31("Cover", "elementor"),
|
|
4016
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(ArrowsMaximizeIcon, { fontSize: size }),
|
|
3913
4017
|
showTooltip: true
|
|
3914
4018
|
},
|
|
3915
4019
|
{
|
|
3916
4020
|
value: "contain",
|
|
3917
|
-
label:
|
|
3918
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4021
|
+
label: __31("Contain", "elementor"),
|
|
4022
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(ArrowBarBothIcon, { fontSize: size }),
|
|
3919
4023
|
showTooltip: true
|
|
3920
4024
|
},
|
|
3921
4025
|
{
|
|
3922
4026
|
value: "custom",
|
|
3923
|
-
label:
|
|
3924
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4027
|
+
label: __31("Custom", "elementor"),
|
|
4028
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(PencilIcon, { fontSize: size }),
|
|
3925
4029
|
showTooltip: true
|
|
3926
4030
|
}
|
|
3927
4031
|
];
|
|
3928
4032
|
var BackgroundImageOverlaySize = () => {
|
|
3929
4033
|
const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
|
|
3930
|
-
const stringPropContext = useBoundProp(
|
|
4034
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil11);
|
|
3931
4035
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
3932
4036
|
const rowRef = useRef12(null);
|
|
3933
4037
|
const handleSizeChange = (size) => {
|
|
@@ -3937,7 +4041,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
3937
4041
|
stringPropContext.setValue(size);
|
|
3938
4042
|
}
|
|
3939
4043
|
};
|
|
3940
|
-
return /* @__PURE__ */
|
|
4044
|
+
return /* @__PURE__ */ React73.createElement(Grid16, { container: true, spacing: 1.5 }, /* @__PURE__ */ React73.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React73.createElement(PopoverGridContainer, null, /* @__PURE__ */ React73.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(ControlFormLabel, null, __31("Size", "elementor"))), /* @__PURE__ */ React73.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React73.createElement(
|
|
3941
4045
|
ControlToggleButtonGroup,
|
|
3942
4046
|
{
|
|
3943
4047
|
exclusive: true,
|
|
@@ -3946,17 +4050,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
3946
4050
|
disabled: stringPropContext.disabled,
|
|
3947
4051
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
3948
4052
|
}
|
|
3949
|
-
)))), isCustom ? /* @__PURE__ */
|
|
4053
|
+
)))), isCustom ? /* @__PURE__ */ React73.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React73.createElement(Grid16, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React73.createElement(PopoverGridContainer, null, /* @__PURE__ */ React73.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React73.createElement(
|
|
3950
4054
|
SizeControl,
|
|
3951
4055
|
{
|
|
3952
|
-
startIcon: /* @__PURE__ */
|
|
4056
|
+
startIcon: /* @__PURE__ */ React73.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
|
|
3953
4057
|
extendedOptions: ["auto"],
|
|
3954
4058
|
anchorRef: rowRef
|
|
3955
4059
|
}
|
|
3956
|
-
))), /* @__PURE__ */
|
|
4060
|
+
))), /* @__PURE__ */ React73.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React73.createElement(
|
|
3957
4061
|
SizeControl,
|
|
3958
4062
|
{
|
|
3959
|
-
startIcon: /* @__PURE__ */
|
|
4063
|
+
startIcon: /* @__PURE__ */ React73.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
|
|
3960
4064
|
extendedOptions: ["auto"],
|
|
3961
4065
|
anchorRef: rowRef
|
|
3962
4066
|
}
|
|
@@ -4057,29 +4161,29 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
4057
4161
|
}
|
|
4058
4162
|
});
|
|
4059
4163
|
var backgroundResolutionOptions = [
|
|
4060
|
-
{ label:
|
|
4061
|
-
{ label:
|
|
4062
|
-
{ label:
|
|
4063
|
-
{ label:
|
|
4164
|
+
{ label: __32("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
4165
|
+
{ label: __32("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
4166
|
+
{ label: __32("Large 1024 x 1024", "elementor"), value: "large" },
|
|
4167
|
+
{ label: __32("Full", "elementor"), value: "full" }
|
|
4064
4168
|
];
|
|
4065
4169
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
4066
4170
|
const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
|
|
4067
|
-
return /* @__PURE__ */
|
|
4171
|
+
return /* @__PURE__ */ React74.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React74.createElement(
|
|
4068
4172
|
ControlRepeater,
|
|
4069
4173
|
{
|
|
4070
4174
|
initial: getInitialBackgroundOverlay(),
|
|
4071
4175
|
propTypeUtil: backgroundOverlayPropTypeUtil
|
|
4072
4176
|
},
|
|
4073
|
-
/* @__PURE__ */
|
|
4074
|
-
/* @__PURE__ */
|
|
4177
|
+
/* @__PURE__ */ React74.createElement(Header, { label: __32("Overlay", "elementor") }, /* @__PURE__ */ React74.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
4178
|
+
/* @__PURE__ */ React74.createElement(ItemsContainer, null, /* @__PURE__ */ React74.createElement(
|
|
4075
4179
|
Item,
|
|
4076
4180
|
{
|
|
4077
4181
|
Icon: ItemIcon2,
|
|
4078
4182
|
Label: ItemLabel2,
|
|
4079
|
-
actions: /* @__PURE__ */
|
|
4183
|
+
actions: /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(DuplicateItemAction, null), /* @__PURE__ */ React74.createElement(DisableItemAction, null), /* @__PURE__ */ React74.createElement(RemoveItemAction, null))
|
|
4080
4184
|
}
|
|
4081
4185
|
)),
|
|
4082
|
-
/* @__PURE__ */
|
|
4186
|
+
/* @__PURE__ */ React74.createElement(EditItemPopover, null, /* @__PURE__ */ React74.createElement(ItemContent, null))
|
|
4083
4187
|
));
|
|
4084
4188
|
});
|
|
4085
4189
|
var ItemContent = () => {
|
|
@@ -4089,27 +4193,27 @@ var ItemContent = () => {
|
|
|
4089
4193
|
gradient: initialBackgroundGradientOverlay.value
|
|
4090
4194
|
});
|
|
4091
4195
|
const { rowRef } = useRepeaterContext();
|
|
4092
|
-
return /* @__PURE__ */
|
|
4196
|
+
return /* @__PURE__ */ React74.createElement(Box12, { sx: { width: "100%" } }, /* @__PURE__ */ React74.createElement(Box12, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React74.createElement(
|
|
4093
4197
|
Tabs,
|
|
4094
4198
|
{
|
|
4095
4199
|
size: "small",
|
|
4096
4200
|
variant: "fullWidth",
|
|
4097
4201
|
...getTabsProps(),
|
|
4098
|
-
"aria-label":
|
|
4202
|
+
"aria-label": __32("Background Overlay", "elementor")
|
|
4099
4203
|
},
|
|
4100
|
-
/* @__PURE__ */
|
|
4101
|
-
/* @__PURE__ */
|
|
4102
|
-
/* @__PURE__ */
|
|
4103
|
-
)), /* @__PURE__ */
|
|
4204
|
+
/* @__PURE__ */ React74.createElement(Tab, { label: __32("Image", "elementor"), ...getTabProps("image") }),
|
|
4205
|
+
/* @__PURE__ */ React74.createElement(Tab, { label: __32("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
4206
|
+
/* @__PURE__ */ React74.createElement(Tab, { label: __32("Color", "elementor"), ...getTabProps("color") })
|
|
4207
|
+
)), /* @__PURE__ */ React74.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React74.createElement(PopoverContent, null, /* @__PURE__ */ React74.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React74.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React74.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React74.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React74.createElement(PopoverContent, null, /* @__PURE__ */ React74.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
4104
4208
|
};
|
|
4105
4209
|
var ItemIcon2 = ({ value }) => {
|
|
4106
4210
|
switch (value.$$type) {
|
|
4107
4211
|
case "background-image-overlay":
|
|
4108
|
-
return /* @__PURE__ */
|
|
4212
|
+
return /* @__PURE__ */ React74.createElement(ItemIconImage, { value });
|
|
4109
4213
|
case "background-color-overlay":
|
|
4110
|
-
return /* @__PURE__ */
|
|
4214
|
+
return /* @__PURE__ */ React74.createElement(ItemIconColor, { value });
|
|
4111
4215
|
case "background-gradient-overlay":
|
|
4112
|
-
return /* @__PURE__ */
|
|
4216
|
+
return /* @__PURE__ */ React74.createElement(ItemIconGradient, { value });
|
|
4113
4217
|
default:
|
|
4114
4218
|
return null;
|
|
4115
4219
|
}
|
|
@@ -4122,11 +4226,11 @@ var extractColorFrom = (prop) => {
|
|
|
4122
4226
|
};
|
|
4123
4227
|
var ItemIconColor = ({ value: prop }) => {
|
|
4124
4228
|
const color = extractColorFrom(prop);
|
|
4125
|
-
return /* @__PURE__ */
|
|
4229
|
+
return /* @__PURE__ */ React74.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
4126
4230
|
};
|
|
4127
4231
|
var ItemIconImage = ({ value }) => {
|
|
4128
4232
|
const { imageUrl } = useImage(value);
|
|
4129
|
-
return /* @__PURE__ */
|
|
4233
|
+
return /* @__PURE__ */ React74.createElement(
|
|
4130
4234
|
CardMedia3,
|
|
4131
4235
|
{
|
|
4132
4236
|
image: imageUrl,
|
|
@@ -4141,43 +4245,43 @@ var ItemIconImage = ({ value }) => {
|
|
|
4141
4245
|
};
|
|
4142
4246
|
var ItemIconGradient = ({ value }) => {
|
|
4143
4247
|
const gradient = getGradientValue(value);
|
|
4144
|
-
return /* @__PURE__ */
|
|
4248
|
+
return /* @__PURE__ */ React74.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
4145
4249
|
};
|
|
4146
4250
|
var ItemLabel2 = ({ value }) => {
|
|
4147
4251
|
switch (value.$$type) {
|
|
4148
4252
|
case "background-image-overlay":
|
|
4149
|
-
return /* @__PURE__ */
|
|
4253
|
+
return /* @__PURE__ */ React74.createElement(ItemLabelImage, { value });
|
|
4150
4254
|
case "background-color-overlay":
|
|
4151
|
-
return /* @__PURE__ */
|
|
4255
|
+
return /* @__PURE__ */ React74.createElement(ItemLabelColor, { value });
|
|
4152
4256
|
case "background-gradient-overlay":
|
|
4153
|
-
return /* @__PURE__ */
|
|
4257
|
+
return /* @__PURE__ */ React74.createElement(ItemLabelGradient, { value });
|
|
4154
4258
|
default:
|
|
4155
4259
|
return null;
|
|
4156
4260
|
}
|
|
4157
4261
|
};
|
|
4158
4262
|
var ItemLabelColor = ({ value: prop }) => {
|
|
4159
4263
|
const color = extractColorFrom(prop);
|
|
4160
|
-
return /* @__PURE__ */
|
|
4264
|
+
return /* @__PURE__ */ React74.createElement("span", null, color);
|
|
4161
4265
|
};
|
|
4162
4266
|
var ItemLabelImage = ({ value }) => {
|
|
4163
4267
|
const { imageTitle } = useImage(value);
|
|
4164
|
-
return /* @__PURE__ */
|
|
4268
|
+
return /* @__PURE__ */ React74.createElement("span", null, imageTitle);
|
|
4165
4269
|
};
|
|
4166
4270
|
var ItemLabelGradient = ({ value }) => {
|
|
4167
4271
|
if (value.value.type.value === "linear") {
|
|
4168
|
-
return /* @__PURE__ */
|
|
4272
|
+
return /* @__PURE__ */ React74.createElement("span", null, __32("Linear Gradient", "elementor"));
|
|
4169
4273
|
}
|
|
4170
|
-
return /* @__PURE__ */
|
|
4274
|
+
return /* @__PURE__ */ React74.createElement("span", null, __32("Radial Gradient", "elementor"));
|
|
4171
4275
|
};
|
|
4172
4276
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
4173
4277
|
const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
|
|
4174
|
-
return /* @__PURE__ */
|
|
4278
|
+
return /* @__PURE__ */ React74.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React74.createElement(ColorControl, { anchorEl })));
|
|
4175
4279
|
};
|
|
4176
4280
|
var ImageOverlayContent = () => {
|
|
4177
4281
|
const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
|
|
4178
|
-
return /* @__PURE__ */
|
|
4282
|
+
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)));
|
|
4179
4283
|
};
|
|
4180
|
-
var StyledUnstableColorIndicator3 =
|
|
4284
|
+
var StyledUnstableColorIndicator3 = styled9(UnstableColorIndicator3)(({ theme }) => ({
|
|
4181
4285
|
height: "1rem",
|
|
4182
4286
|
width: "1rem",
|
|
4183
4287
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
@@ -4214,29 +4318,29 @@ var getGradientValue = (value) => {
|
|
|
4214
4318
|
|
|
4215
4319
|
// src/controls/background-control/background-control.tsx
|
|
4216
4320
|
var clipOptions = [
|
|
4217
|
-
{ label:
|
|
4218
|
-
{ label:
|
|
4219
|
-
{ label:
|
|
4220
|
-
{ label:
|
|
4321
|
+
{ label: __33("Border edges", "elementor"), value: "border-box" },
|
|
4322
|
+
{ label: __33("Padding edges", "elementor"), value: "padding-box" },
|
|
4323
|
+
{ label: __33("Content edges", "elementor"), value: "content-box" },
|
|
4324
|
+
{ label: __33("Text", "elementor"), value: "text" }
|
|
4221
4325
|
];
|
|
4222
|
-
var colorLabel =
|
|
4223
|
-
var clipLabel =
|
|
4326
|
+
var colorLabel = __33("Color", "elementor");
|
|
4327
|
+
var clipLabel = __33("Clipping", "elementor");
|
|
4224
4328
|
var BackgroundControl = createControl(() => {
|
|
4225
4329
|
const propContext = useBoundProp(backgroundPropTypeUtil);
|
|
4226
|
-
return /* @__PURE__ */
|
|
4330
|
+
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));
|
|
4227
4331
|
});
|
|
4228
4332
|
var BackgroundColorField = () => {
|
|
4229
|
-
return /* @__PURE__ */
|
|
4333
|
+
return /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React75.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React75.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React75.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ColorControl, null))));
|
|
4230
4334
|
};
|
|
4231
4335
|
var BackgroundClipField = () => {
|
|
4232
|
-
return /* @__PURE__ */
|
|
4336
|
+
return /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React75.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React75.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React75.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(SelectControl, { options: clipOptions }))));
|
|
4233
4337
|
};
|
|
4234
4338
|
|
|
4235
4339
|
// src/controls/repeatable-control.tsx
|
|
4236
|
-
import * as
|
|
4340
|
+
import * as React76 from "react";
|
|
4237
4341
|
import { useMemo as useMemo6 } from "react";
|
|
4238
4342
|
import { createArrayPropUtils } from "@elementor/editor-props";
|
|
4239
|
-
import { Box as
|
|
4343
|
+
import { Box as Box13 } from "@elementor/ui";
|
|
4240
4344
|
|
|
4241
4345
|
// src/hooks/use-repeatable-control-context.ts
|
|
4242
4346
|
import { createContext as createContext10, useContext as useContext9 } from "react";
|
|
@@ -4280,13 +4384,13 @@ var RepeatableControl = createControl(
|
|
|
4280
4384
|
[childControlConfig, placeholder, patternLabel]
|
|
4281
4385
|
);
|
|
4282
4386
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
4283
|
-
return /* @__PURE__ */
|
|
4387
|
+
return /* @__PURE__ */ React76.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React76.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React76.createElement(
|
|
4284
4388
|
ControlRepeater,
|
|
4285
4389
|
{
|
|
4286
4390
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
4287
4391
|
propTypeUtil: childArrayPropTypeUtil
|
|
4288
4392
|
},
|
|
4289
|
-
/* @__PURE__ */
|
|
4393
|
+
/* @__PURE__ */ React76.createElement(Header, { label: repeaterLabel }, /* @__PURE__ */ React76.createElement(
|
|
4290
4394
|
TooltipAddItemAction,
|
|
4291
4395
|
{
|
|
4292
4396
|
...addItemTooltipProps,
|
|
@@ -4294,22 +4398,22 @@ var RepeatableControl = createControl(
|
|
|
4294
4398
|
ariaLabel: repeaterLabel
|
|
4295
4399
|
}
|
|
4296
4400
|
)),
|
|
4297
|
-
/* @__PURE__ */
|
|
4401
|
+
/* @__PURE__ */ React76.createElement(ItemsContainer, { isSortable: false }, /* @__PURE__ */ React76.createElement(
|
|
4298
4402
|
Item,
|
|
4299
4403
|
{
|
|
4300
4404
|
Icon: ItemIcon3,
|
|
4301
4405
|
Label: ItemLabel3,
|
|
4302
|
-
actions: /* @__PURE__ */
|
|
4406
|
+
actions: /* @__PURE__ */ React76.createElement(React76.Fragment, null, showDuplicate && /* @__PURE__ */ React76.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React76.createElement(DisableItemAction, null), /* @__PURE__ */ React76.createElement(RemoveItemAction, null))
|
|
4303
4407
|
}
|
|
4304
4408
|
)),
|
|
4305
|
-
/* @__PURE__ */
|
|
4409
|
+
/* @__PURE__ */ React76.createElement(EditItemPopover, null, /* @__PURE__ */ React76.createElement(Content2, null))
|
|
4306
4410
|
)));
|
|
4307
4411
|
}
|
|
4308
4412
|
);
|
|
4309
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
4413
|
+
var ItemIcon3 = () => /* @__PURE__ */ React76.createElement(React76.Fragment, null);
|
|
4310
4414
|
var Content2 = () => {
|
|
4311
4415
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
4312
|
-
return /* @__PURE__ */
|
|
4416
|
+
return /* @__PURE__ */ React76.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React76.createElement(PopoverGridContainer, null, /* @__PURE__ */ React76.createElement(ChildControl, { ...props })));
|
|
4313
4417
|
};
|
|
4314
4418
|
var interpolate = (template, data) => {
|
|
4315
4419
|
if (!data) {
|
|
@@ -4371,7 +4475,7 @@ var ItemLabel3 = ({ value }) => {
|
|
|
4371
4475
|
const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
|
|
4372
4476
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
4373
4477
|
const color = showPlaceholder ? "text.tertiary" : "text.primary";
|
|
4374
|
-
return /* @__PURE__ */
|
|
4478
|
+
return /* @__PURE__ */ React76.createElement(Box13, { component: "span", color }, label);
|
|
4375
4479
|
};
|
|
4376
4480
|
var getAllProperties = (pattern) => {
|
|
4377
4481
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -4379,15 +4483,15 @@ var getAllProperties = (pattern) => {
|
|
|
4379
4483
|
};
|
|
4380
4484
|
|
|
4381
4485
|
// src/controls/key-value-control.tsx
|
|
4382
|
-
import * as
|
|
4486
|
+
import * as React77 from "react";
|
|
4383
4487
|
import { useMemo as useMemo7, useState as useState15 } from "react";
|
|
4384
4488
|
import {
|
|
4385
4489
|
isTransformable,
|
|
4386
4490
|
keyValuePropTypeUtil,
|
|
4387
|
-
stringPropTypeUtil as
|
|
4491
|
+
stringPropTypeUtil as stringPropTypeUtil12
|
|
4388
4492
|
} from "@elementor/editor-props";
|
|
4389
4493
|
import { FormHelperText, FormLabel as FormLabel3, Grid as Grid18 } from "@elementor/ui";
|
|
4390
|
-
import { __ as
|
|
4494
|
+
import { __ as __34 } from "@wordpress/i18n";
|
|
4391
4495
|
|
|
4392
4496
|
// src/utils/escape-html-attr.ts
|
|
4393
4497
|
var escapeHtmlAttr = (value) => {
|
|
@@ -4410,8 +4514,8 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4410
4514
|
key: value?.key?.value || "",
|
|
4411
4515
|
value: value?.value?.value || ""
|
|
4412
4516
|
});
|
|
4413
|
-
const keyLabel = props.keyName ||
|
|
4414
|
-
const valueLabel = props.valueName ||
|
|
4517
|
+
const keyLabel = props.keyName || __34("Key", "elementor");
|
|
4518
|
+
const valueLabel = props.valueName || __34("Value", "elementor");
|
|
4415
4519
|
const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
|
|
4416
4520
|
keyHelper: void 0,
|
|
4417
4521
|
valueHelper: void 0
|
|
@@ -4420,7 +4524,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4420
4524
|
() => [
|
|
4421
4525
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
4422
4526
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
4423
|
-
props.validationErrorMessage ||
|
|
4527
|
+
props.validationErrorMessage || __34("Invalid Format", "elementor")
|
|
4424
4528
|
],
|
|
4425
4529
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
4426
4530
|
);
|
|
@@ -4449,7 +4553,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4449
4553
|
});
|
|
4450
4554
|
return;
|
|
4451
4555
|
}
|
|
4452
|
-
const extractedValue =
|
|
4556
|
+
const extractedValue = stringPropTypeUtil12.extract(newChangedValue);
|
|
4453
4557
|
setSessionState((prev) => ({
|
|
4454
4558
|
...prev,
|
|
4455
4559
|
[fieldType]: extractedValue
|
|
@@ -4469,14 +4573,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4469
4573
|
});
|
|
4470
4574
|
}
|
|
4471
4575
|
};
|
|
4472
|
-
return /* @__PURE__ */
|
|
4576
|
+
return /* @__PURE__ */ React77.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React77.createElement(Grid18, { container: true, gap: 1.5 }, /* @__PURE__ */ React77.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React77.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React77.createElement(
|
|
4473
4577
|
TextControl,
|
|
4474
4578
|
{
|
|
4475
4579
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
4476
4580
|
error: !!keyError,
|
|
4477
4581
|
helperText: keyHelper
|
|
4478
4582
|
}
|
|
4479
|
-
)), !!keyError && /* @__PURE__ */
|
|
4583
|
+
)), !!keyError && /* @__PURE__ */ React77.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React77.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React77.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React77.createElement(
|
|
4480
4584
|
TextControl,
|
|
4481
4585
|
{
|
|
4482
4586
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -4484,31 +4588,31 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4484
4588
|
inputDisabled: !!keyError,
|
|
4485
4589
|
helperText: valueHelper
|
|
4486
4590
|
}
|
|
4487
|
-
)), !!valueError && /* @__PURE__ */
|
|
4591
|
+
)), !!valueError && /* @__PURE__ */ React77.createElement(FormHelperText, { error: true }, valueError))));
|
|
4488
4592
|
});
|
|
4489
4593
|
|
|
4490
4594
|
// src/controls/position-control.tsx
|
|
4491
|
-
import * as
|
|
4492
|
-
import { positionPropTypeUtil, stringPropTypeUtil as
|
|
4493
|
-
import { MenuListItem as
|
|
4595
|
+
import * as React78 from "react";
|
|
4596
|
+
import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
|
|
4597
|
+
import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
|
|
4494
4598
|
import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
|
|
4495
|
-
import { Grid as Grid19, Select as
|
|
4496
|
-
import { __ as
|
|
4599
|
+
import { Grid as Grid19, Select as Select5 } from "@elementor/ui";
|
|
4600
|
+
import { __ as __35 } from "@wordpress/i18n";
|
|
4497
4601
|
var positionOptions = [
|
|
4498
|
-
{ label:
|
|
4499
|
-
{ label:
|
|
4500
|
-
{ label:
|
|
4501
|
-
{ label:
|
|
4502
|
-
{ label:
|
|
4503
|
-
{ label:
|
|
4504
|
-
{ label:
|
|
4505
|
-
{ label:
|
|
4506
|
-
{ label:
|
|
4507
|
-
{ label:
|
|
4602
|
+
{ label: __35("Center center", "elementor"), value: "center center" },
|
|
4603
|
+
{ label: __35("Center left", "elementor"), value: "center left" },
|
|
4604
|
+
{ label: __35("Center right", "elementor"), value: "center right" },
|
|
4605
|
+
{ label: __35("Top center", "elementor"), value: "top center" },
|
|
4606
|
+
{ label: __35("Top left", "elementor"), value: "top left" },
|
|
4607
|
+
{ label: __35("Top right", "elementor"), value: "top right" },
|
|
4608
|
+
{ label: __35("Bottom center", "elementor"), value: "bottom center" },
|
|
4609
|
+
{ label: __35("Bottom left", "elementor"), value: "bottom left" },
|
|
4610
|
+
{ label: __35("Bottom right", "elementor"), value: "bottom right" },
|
|
4611
|
+
{ label: __35("Custom", "elementor"), value: "custom" }
|
|
4508
4612
|
];
|
|
4509
4613
|
var PositionControl = () => {
|
|
4510
4614
|
const positionContext = useBoundProp(positionPropTypeUtil);
|
|
4511
|
-
const stringPropContext = useBoundProp(
|
|
4615
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil13);
|
|
4512
4616
|
const isCustom = !!positionContext.value;
|
|
4513
4617
|
const handlePositionChange = (event) => {
|
|
4514
4618
|
const value = event.target.value || null;
|
|
@@ -4518,8 +4622,8 @@ var PositionControl = () => {
|
|
|
4518
4622
|
stringPropContext.setValue(value);
|
|
4519
4623
|
}
|
|
4520
4624
|
};
|
|
4521
|
-
return /* @__PURE__ */
|
|
4522
|
-
|
|
4625
|
+
return /* @__PURE__ */ React78.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React78.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(Grid19, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React78.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(ControlFormLabel, null, __35("Object position", "elementor"))), /* @__PURE__ */ React78.createElement(Grid19, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React78.createElement(
|
|
4626
|
+
Select5,
|
|
4523
4627
|
{
|
|
4524
4628
|
size: "tiny",
|
|
4525
4629
|
disabled: stringPropContext.disabled,
|
|
@@ -4527,29 +4631,29 @@ var PositionControl = () => {
|
|
|
4527
4631
|
onChange: handlePositionChange,
|
|
4528
4632
|
fullWidth: true
|
|
4529
4633
|
},
|
|
4530
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
4531
|
-
)))), isCustom && /* @__PURE__ */
|
|
4634
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React78.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
|
|
4635
|
+
)))), isCustom && /* @__PURE__ */ React78.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React78.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React78.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React78.createElement(
|
|
4532
4636
|
SizeControl,
|
|
4533
4637
|
{
|
|
4534
|
-
startIcon: /* @__PURE__ */
|
|
4638
|
+
startIcon: /* @__PURE__ */ React78.createElement(LetterXIcon2, { fontSize: "tiny" }),
|
|
4535
4639
|
min: -Number.MAX_SAFE_INTEGER
|
|
4536
4640
|
}
|
|
4537
|
-
))), /* @__PURE__ */
|
|
4641
|
+
))), /* @__PURE__ */ React78.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React78.createElement(
|
|
4538
4642
|
SizeControl,
|
|
4539
4643
|
{
|
|
4540
|
-
startIcon: /* @__PURE__ */
|
|
4644
|
+
startIcon: /* @__PURE__ */ React78.createElement(LetterYIcon2, { fontSize: "tiny" }),
|
|
4541
4645
|
min: -Number.MAX_SAFE_INTEGER
|
|
4542
4646
|
}
|
|
4543
4647
|
)))))));
|
|
4544
4648
|
};
|
|
4545
4649
|
|
|
4546
4650
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
4547
|
-
import * as
|
|
4651
|
+
import * as React91 from "react";
|
|
4548
4652
|
import { useRef as useRef21 } from "react";
|
|
4549
4653
|
import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
|
|
4550
4654
|
import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
|
|
4551
|
-
import { bindTrigger as bindTrigger4, Box as
|
|
4552
|
-
import { __ as
|
|
4655
|
+
import { bindTrigger as bindTrigger4, Box as Box17, IconButton as IconButton7, Typography as Typography6, usePopupState as usePopupState6 } from "@elementor/ui";
|
|
4656
|
+
import { __ as __45 } from "@wordpress/i18n";
|
|
4553
4657
|
|
|
4554
4658
|
// src/controls/transform-control/initial-values.ts
|
|
4555
4659
|
import {
|
|
@@ -4603,80 +4707,80 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
|
|
|
4603
4707
|
});
|
|
4604
4708
|
|
|
4605
4709
|
// src/controls/transform-control/transform-base-control.tsx
|
|
4606
|
-
import * as
|
|
4710
|
+
import * as React81 from "react";
|
|
4607
4711
|
import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
|
|
4608
4712
|
import { AdjustmentsIcon } from "@elementor/icons";
|
|
4609
|
-
import { bindPopover as bindPopover5, Box as
|
|
4610
|
-
import { __ as
|
|
4713
|
+
import { bindPopover as bindPopover5, Box as Box14, Divider as Divider4, Popover as Popover5 } from "@elementor/ui";
|
|
4714
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
4611
4715
|
|
|
4612
4716
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
4613
|
-
import * as
|
|
4717
|
+
import * as React79 from "react";
|
|
4614
4718
|
import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
|
|
4615
4719
|
import { Grid as Grid20, Stack as Stack14 } from "@elementor/ui";
|
|
4616
|
-
import { __ as
|
|
4720
|
+
import { __ as __36 } from "@wordpress/i18n";
|
|
4617
4721
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
4618
4722
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
4619
|
-
label:
|
|
4723
|
+
label: __36("Perspective", "elementor"),
|
|
4620
4724
|
bind: "perspective",
|
|
4621
4725
|
units: ["px", "em", "rem", "vw", "vh"]
|
|
4622
4726
|
};
|
|
4623
4727
|
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
4624
4728
|
{
|
|
4625
|
-
label:
|
|
4729
|
+
label: __36("Origin X", "elementor"),
|
|
4626
4730
|
bind: "x",
|
|
4627
4731
|
units: ORIGIN_UNITS
|
|
4628
4732
|
},
|
|
4629
4733
|
{
|
|
4630
|
-
label:
|
|
4734
|
+
label: __36("Origin Y", "elementor"),
|
|
4631
4735
|
bind: "y",
|
|
4632
4736
|
units: ORIGIN_UNITS
|
|
4633
4737
|
}
|
|
4634
4738
|
];
|
|
4635
4739
|
var ChildrenPerspectiveControl = () => {
|
|
4636
|
-
return /* @__PURE__ */
|
|
4740
|
+
return /* @__PURE__ */ React79.createElement(Stack14, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React79.createElement(ControlFormLabel, null, __36("Children perspective", "elementor")), /* @__PURE__ */ React79.createElement(PerspectiveControl, null), /* @__PURE__ */ React79.createElement(PerspectiveOriginControl, null));
|
|
4637
4741
|
};
|
|
4638
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
4639
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
4742
|
+
var PerspectiveControl = () => /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React79.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
4743
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React79.createElement(PerspectiveOriginControlProvider, null));
|
|
4640
4744
|
var PerspectiveOriginControlProvider = () => {
|
|
4641
4745
|
const context = useBoundProp(perspectiveOriginPropTypeUtil);
|
|
4642
|
-
return /* @__PURE__ */
|
|
4746
|
+
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 }))));
|
|
4643
4747
|
};
|
|
4644
4748
|
var ControlFields = ({ control }) => {
|
|
4645
|
-
const rowRef =
|
|
4646
|
-
return /* @__PURE__ */
|
|
4749
|
+
const rowRef = React79.useRef(null);
|
|
4750
|
+
return /* @__PURE__ */ React79.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React79.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React79.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
4647
4751
|
};
|
|
4648
4752
|
|
|
4649
4753
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
4650
|
-
import * as
|
|
4754
|
+
import * as React80 from "react";
|
|
4651
4755
|
import { transformOriginPropTypeUtil } from "@elementor/editor-props";
|
|
4652
4756
|
import { Grid as Grid21, Stack as Stack15 } from "@elementor/ui";
|
|
4653
|
-
import { __ as
|
|
4757
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
4654
4758
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
4655
4759
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
4656
4760
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
4657
4761
|
{
|
|
4658
|
-
label:
|
|
4762
|
+
label: __37("Origin X", "elementor"),
|
|
4659
4763
|
bind: "x",
|
|
4660
4764
|
units: TRANSFORM_ORIGIN_UNITS
|
|
4661
4765
|
},
|
|
4662
4766
|
{
|
|
4663
|
-
label:
|
|
4767
|
+
label: __37("Origin Y", "elementor"),
|
|
4664
4768
|
bind: "y",
|
|
4665
4769
|
units: TRANSFORM_ORIGIN_UNITS
|
|
4666
4770
|
},
|
|
4667
4771
|
{
|
|
4668
|
-
label:
|
|
4772
|
+
label: __37("Origin Z", "elementor"),
|
|
4669
4773
|
bind: "z",
|
|
4670
4774
|
units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
|
|
4671
4775
|
}
|
|
4672
4776
|
];
|
|
4673
4777
|
var TransformOriginControl = () => {
|
|
4674
|
-
return /* @__PURE__ */
|
|
4778
|
+
return /* @__PURE__ */ React80.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React80.createElement(ControlFormLabel, null, __37("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React80.createElement(ControlFields2, { control, key: control.bind })));
|
|
4675
4779
|
};
|
|
4676
4780
|
var ControlFields2 = ({ control }) => {
|
|
4677
4781
|
const context = useBoundProp(transformOriginPropTypeUtil);
|
|
4678
|
-
const rowRef =
|
|
4679
|
-
return /* @__PURE__ */
|
|
4782
|
+
const rowRef = React80.useRef(null);
|
|
4783
|
+
return /* @__PURE__ */ React80.createElement(PropProvider, { ...context }, /* @__PURE__ */ React80.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React80.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React80.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React80.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React80.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React80.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
|
|
4680
4784
|
};
|
|
4681
4785
|
|
|
4682
4786
|
// src/controls/transform-control/transform-base-control.tsx
|
|
@@ -4689,7 +4793,7 @@ var TransformBaseControl = ({
|
|
|
4689
4793
|
...popupState,
|
|
4690
4794
|
anchorEl: anchorRef.current ?? void 0
|
|
4691
4795
|
});
|
|
4692
|
-
return /* @__PURE__ */
|
|
4796
|
+
return /* @__PURE__ */ React81.createElement(
|
|
4693
4797
|
Popover5,
|
|
4694
4798
|
{
|
|
4695
4799
|
disablePortal: true,
|
|
@@ -4704,38 +4808,38 @@ var TransformBaseControl = ({
|
|
|
4704
4808
|
},
|
|
4705
4809
|
...popupProps
|
|
4706
4810
|
},
|
|
4707
|
-
/* @__PURE__ */
|
|
4811
|
+
/* @__PURE__ */ React81.createElement(
|
|
4708
4812
|
PopoverHeader3,
|
|
4709
4813
|
{
|
|
4710
|
-
title:
|
|
4814
|
+
title: __38("Base Transform", "elementor"),
|
|
4711
4815
|
onClose: popupState.close,
|
|
4712
|
-
icon: /* @__PURE__ */
|
|
4816
|
+
icon: /* @__PURE__ */ React81.createElement(AdjustmentsIcon, { fontSize: SIZE7 })
|
|
4713
4817
|
}
|
|
4714
4818
|
),
|
|
4715
|
-
/* @__PURE__ */
|
|
4716
|
-
/* @__PURE__ */
|
|
4819
|
+
/* @__PURE__ */ React81.createElement(Divider4, null),
|
|
4820
|
+
/* @__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(Box14, { sx: { my: 0.5 } }, /* @__PURE__ */ React81.createElement(Divider4, null)), /* @__PURE__ */ React81.createElement(ChildrenPerspectiveControl, null))
|
|
4717
4821
|
);
|
|
4718
4822
|
};
|
|
4719
4823
|
|
|
4720
4824
|
// src/controls/transform-control/transform-content.tsx
|
|
4721
|
-
import * as
|
|
4722
|
-
import { Box as
|
|
4723
|
-
import { __ as
|
|
4825
|
+
import * as React88 from "react";
|
|
4826
|
+
import { Box as Box15, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
|
|
4827
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
4724
4828
|
|
|
4725
4829
|
// src/controls/transform-control/functions/move.tsx
|
|
4726
|
-
import * as
|
|
4830
|
+
import * as React83 from "react";
|
|
4727
4831
|
import { useRef as useRef16 } from "react";
|
|
4728
4832
|
import { moveTransformPropTypeUtil } from "@elementor/editor-props";
|
|
4729
4833
|
import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
|
|
4730
4834
|
import { Grid as Grid23 } from "@elementor/ui";
|
|
4731
|
-
import { __ as
|
|
4835
|
+
import { __ as __39 } from "@wordpress/i18n";
|
|
4732
4836
|
|
|
4733
4837
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
4734
|
-
import * as
|
|
4838
|
+
import * as React82 from "react";
|
|
4735
4839
|
import { Grid as Grid22 } from "@elementor/ui";
|
|
4736
4840
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
4737
4841
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
4738
|
-
return /* @__PURE__ */
|
|
4842
|
+
return /* @__PURE__ */ React82.createElement(Grid22, { item: true, xs: 12 }, /* @__PURE__ */ React82.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React82.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React82.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React82.createElement(
|
|
4739
4843
|
SizeControl,
|
|
4740
4844
|
{
|
|
4741
4845
|
anchorRef,
|
|
@@ -4751,28 +4855,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
|
|
|
4751
4855
|
// src/controls/transform-control/functions/move.tsx
|
|
4752
4856
|
var moveAxisControls = [
|
|
4753
4857
|
{
|
|
4754
|
-
label:
|
|
4858
|
+
label: __39("Move X", "elementor"),
|
|
4755
4859
|
bind: "x",
|
|
4756
|
-
startIcon: /* @__PURE__ */
|
|
4860
|
+
startIcon: /* @__PURE__ */ React83.createElement(ArrowRightIcon, { fontSize: "tiny" }),
|
|
4757
4861
|
units: ["px", "%", "em", "rem", "vw"]
|
|
4758
4862
|
},
|
|
4759
4863
|
{
|
|
4760
|
-
label:
|
|
4864
|
+
label: __39("Move Y", "elementor"),
|
|
4761
4865
|
bind: "y",
|
|
4762
|
-
startIcon: /* @__PURE__ */
|
|
4866
|
+
startIcon: /* @__PURE__ */ React83.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
4763
4867
|
units: ["px", "%", "em", "rem", "vh"]
|
|
4764
4868
|
},
|
|
4765
4869
|
{
|
|
4766
|
-
label:
|
|
4870
|
+
label: __39("Move Z", "elementor"),
|
|
4767
4871
|
bind: "z",
|
|
4768
|
-
startIcon: /* @__PURE__ */
|
|
4872
|
+
startIcon: /* @__PURE__ */ React83.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
4769
4873
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
4770
4874
|
}
|
|
4771
4875
|
];
|
|
4772
4876
|
var Move = () => {
|
|
4773
4877
|
const context = useBoundProp(moveTransformPropTypeUtil);
|
|
4774
4878
|
const rowRefs = [useRef16(null), useRef16(null), useRef16(null)];
|
|
4775
|
-
return /* @__PURE__ */
|
|
4879
|
+
return /* @__PURE__ */ React83.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React83.createElement(PropProvider, { ...context }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React83.createElement(
|
|
4776
4880
|
AxisRow,
|
|
4777
4881
|
{
|
|
4778
4882
|
key: control.bind,
|
|
@@ -4785,34 +4889,34 @@ var Move = () => {
|
|
|
4785
4889
|
};
|
|
4786
4890
|
|
|
4787
4891
|
// src/controls/transform-control/functions/rotate.tsx
|
|
4788
|
-
import * as
|
|
4892
|
+
import * as React84 from "react";
|
|
4789
4893
|
import { useRef as useRef17 } from "react";
|
|
4790
4894
|
import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
4791
4895
|
import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
|
|
4792
4896
|
import { Grid as Grid24 } from "@elementor/ui";
|
|
4793
|
-
import { __ as
|
|
4897
|
+
import { __ as __40 } from "@wordpress/i18n";
|
|
4794
4898
|
var rotateAxisControls = [
|
|
4795
4899
|
{
|
|
4796
|
-
label:
|
|
4900
|
+
label: __40("Rotate X", "elementor"),
|
|
4797
4901
|
bind: "x",
|
|
4798
|
-
startIcon: /* @__PURE__ */
|
|
4902
|
+
startIcon: /* @__PURE__ */ React84.createElement(Arrow360Icon, { fontSize: "tiny" })
|
|
4799
4903
|
},
|
|
4800
4904
|
{
|
|
4801
|
-
label:
|
|
4905
|
+
label: __40("Rotate Y", "elementor"),
|
|
4802
4906
|
bind: "y",
|
|
4803
|
-
startIcon: /* @__PURE__ */
|
|
4907
|
+
startIcon: /* @__PURE__ */ React84.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
4804
4908
|
},
|
|
4805
4909
|
{
|
|
4806
|
-
label:
|
|
4910
|
+
label: __40("Rotate Z", "elementor"),
|
|
4807
4911
|
bind: "z",
|
|
4808
|
-
startIcon: /* @__PURE__ */
|
|
4912
|
+
startIcon: /* @__PURE__ */ React84.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
|
|
4809
4913
|
}
|
|
4810
4914
|
];
|
|
4811
4915
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
4812
4916
|
var Rotate = () => {
|
|
4813
4917
|
const context = useBoundProp(rotateTransformPropTypeUtil2);
|
|
4814
4918
|
const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
|
|
4815
|
-
return /* @__PURE__ */
|
|
4919
|
+
return /* @__PURE__ */ React84.createElement(Grid24, { container: true, spacing: 1.5 }, /* @__PURE__ */ React84.createElement(PropProvider, { ...context }, /* @__PURE__ */ React84.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React84.createElement(
|
|
4816
4920
|
AxisRow,
|
|
4817
4921
|
{
|
|
4818
4922
|
key: control.bind,
|
|
@@ -4824,68 +4928,68 @@ var Rotate = () => {
|
|
|
4824
4928
|
};
|
|
4825
4929
|
|
|
4826
4930
|
// src/controls/transform-control/functions/scale.tsx
|
|
4827
|
-
import * as
|
|
4931
|
+
import * as React86 from "react";
|
|
4828
4932
|
import { useRef as useRef18 } from "react";
|
|
4829
4933
|
import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
4830
4934
|
import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
|
|
4831
4935
|
import { Grid as Grid26 } from "@elementor/ui";
|
|
4832
|
-
import { __ as
|
|
4936
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
4833
4937
|
|
|
4834
4938
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
4835
|
-
import * as
|
|
4939
|
+
import * as React85 from "react";
|
|
4836
4940
|
import { Grid as Grid25 } from "@elementor/ui";
|
|
4837
4941
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
4838
|
-
return /* @__PURE__ */
|
|
4942
|
+
return /* @__PURE__ */ React85.createElement(Grid25, { item: true, xs: 12 }, /* @__PURE__ */ React85.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React85.createElement(Grid25, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(ControlLabel, null, label)), /* @__PURE__ */ React85.createElement(Grid25, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React85.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
4839
4943
|
};
|
|
4840
4944
|
|
|
4841
4945
|
// src/controls/transform-control/functions/scale.tsx
|
|
4842
4946
|
var scaleAxisControls = [
|
|
4843
4947
|
{
|
|
4844
|
-
label:
|
|
4948
|
+
label: __41("Scale X", "elementor"),
|
|
4845
4949
|
bind: "x",
|
|
4846
|
-
startIcon: /* @__PURE__ */
|
|
4950
|
+
startIcon: /* @__PURE__ */ React86.createElement(ArrowRightIcon2, { fontSize: "tiny" })
|
|
4847
4951
|
},
|
|
4848
4952
|
{
|
|
4849
|
-
label:
|
|
4953
|
+
label: __41("Scale Y", "elementor"),
|
|
4850
4954
|
bind: "y",
|
|
4851
|
-
startIcon: /* @__PURE__ */
|
|
4955
|
+
startIcon: /* @__PURE__ */ React86.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
|
|
4852
4956
|
},
|
|
4853
4957
|
{
|
|
4854
|
-
label:
|
|
4958
|
+
label: __41("Scale Z", "elementor"),
|
|
4855
4959
|
bind: "z",
|
|
4856
|
-
startIcon: /* @__PURE__ */
|
|
4960
|
+
startIcon: /* @__PURE__ */ React86.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
|
|
4857
4961
|
}
|
|
4858
4962
|
];
|
|
4859
4963
|
var Scale = () => {
|
|
4860
4964
|
const context = useBoundProp(scaleTransformPropTypeUtil2);
|
|
4861
4965
|
const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
|
|
4862
|
-
return /* @__PURE__ */
|
|
4966
|
+
return /* @__PURE__ */ React86.createElement(Grid26, { 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] })))));
|
|
4863
4967
|
};
|
|
4864
4968
|
|
|
4865
4969
|
// src/controls/transform-control/functions/skew.tsx
|
|
4866
|
-
import * as
|
|
4970
|
+
import * as React87 from "react";
|
|
4867
4971
|
import { useRef as useRef19 } from "react";
|
|
4868
4972
|
import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
4869
4973
|
import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
|
|
4870
4974
|
import { Grid as Grid27 } from "@elementor/ui";
|
|
4871
|
-
import { __ as
|
|
4975
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
4872
4976
|
var skewAxisControls = [
|
|
4873
4977
|
{
|
|
4874
|
-
label:
|
|
4978
|
+
label: __42("Skew X", "elementor"),
|
|
4875
4979
|
bind: "x",
|
|
4876
|
-
startIcon: /* @__PURE__ */
|
|
4980
|
+
startIcon: /* @__PURE__ */ React87.createElement(ArrowRightIcon3, { fontSize: "tiny" })
|
|
4877
4981
|
},
|
|
4878
4982
|
{
|
|
4879
|
-
label:
|
|
4983
|
+
label: __42("Skew Y", "elementor"),
|
|
4880
4984
|
bind: "y",
|
|
4881
|
-
startIcon: /* @__PURE__ */
|
|
4985
|
+
startIcon: /* @__PURE__ */ React87.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
4882
4986
|
}
|
|
4883
4987
|
];
|
|
4884
4988
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
4885
4989
|
var Skew = () => {
|
|
4886
4990
|
const context = useBoundProp(skewTransformPropTypeUtil2);
|
|
4887
4991
|
const rowRefs = [useRef19(null), useRef19(null), useRef19(null)];
|
|
4888
|
-
return /* @__PURE__ */
|
|
4992
|
+
return /* @__PURE__ */ React87.createElement(Grid27, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(PropProvider, { ...context }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React87.createElement(
|
|
4889
4993
|
AxisRow,
|
|
4890
4994
|
{
|
|
4891
4995
|
key: control.bind,
|
|
@@ -4990,7 +5094,7 @@ var TransformContent = () => {
|
|
|
4990
5094
|
rotate: initialRotateValue.value,
|
|
4991
5095
|
skew: initialSkewValue.value
|
|
4992
5096
|
});
|
|
4993
|
-
return /* @__PURE__ */
|
|
5097
|
+
return /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(Box15, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box15, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
|
|
4994
5098
|
Tabs2,
|
|
4995
5099
|
{
|
|
4996
5100
|
size: "small",
|
|
@@ -5001,37 +5105,37 @@ var TransformContent = () => {
|
|
|
5001
5105
|
}
|
|
5002
5106
|
},
|
|
5003
5107
|
...getTabsProps(),
|
|
5004
|
-
"aria-label":
|
|
5108
|
+
"aria-label": __43("Transform", "elementor")
|
|
5005
5109
|
},
|
|
5006
|
-
/* @__PURE__ */
|
|
5007
|
-
/* @__PURE__ */
|
|
5008
|
-
/* @__PURE__ */
|
|
5009
|
-
/* @__PURE__ */
|
|
5010
|
-
)), /* @__PURE__ */
|
|
5110
|
+
/* @__PURE__ */ React88.createElement(Tab2, { label: __43("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
5111
|
+
/* @__PURE__ */ React88.createElement(Tab2, { label: __43("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
5112
|
+
/* @__PURE__ */ React88.createElement(Tab2, { label: __43("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
5113
|
+
/* @__PURE__ */ React88.createElement(Tab2, { label: __43("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
5114
|
+
)), /* @__PURE__ */ React88.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React88.createElement(Move, null)), /* @__PURE__ */ React88.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React88.createElement(Scale, null)), /* @__PURE__ */ React88.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React88.createElement(Rotate, null)), /* @__PURE__ */ React88.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React88.createElement(Skew, null))));
|
|
5011
5115
|
};
|
|
5012
5116
|
|
|
5013
5117
|
// src/controls/transform-control/transform-icon.tsx
|
|
5014
|
-
import * as
|
|
5118
|
+
import * as React89 from "react";
|
|
5015
5119
|
import { ArrowsMaximizeIcon as ArrowsMaximizeIcon2, ExpandIcon, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
|
|
5016
5120
|
var TransformIcon = ({ value }) => {
|
|
5017
5121
|
switch (value.$$type) {
|
|
5018
5122
|
case TransformFunctionKeys.move:
|
|
5019
|
-
return /* @__PURE__ */
|
|
5123
|
+
return /* @__PURE__ */ React89.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
|
|
5020
5124
|
case TransformFunctionKeys.scale:
|
|
5021
|
-
return /* @__PURE__ */
|
|
5125
|
+
return /* @__PURE__ */ React89.createElement(ExpandIcon, { fontSize: "tiny" });
|
|
5022
5126
|
case TransformFunctionKeys.rotate:
|
|
5023
|
-
return /* @__PURE__ */
|
|
5127
|
+
return /* @__PURE__ */ React89.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
|
|
5024
5128
|
case TransformFunctionKeys.skew:
|
|
5025
|
-
return /* @__PURE__ */
|
|
5129
|
+
return /* @__PURE__ */ React89.createElement(SkewXIcon, { fontSize: "tiny" });
|
|
5026
5130
|
default:
|
|
5027
5131
|
return null;
|
|
5028
5132
|
}
|
|
5029
5133
|
};
|
|
5030
5134
|
|
|
5031
5135
|
// src/controls/transform-control/transform-label.tsx
|
|
5032
|
-
import * as
|
|
5033
|
-
import { Box as
|
|
5034
|
-
import { __ as
|
|
5136
|
+
import * as React90 from "react";
|
|
5137
|
+
import { Box as Box16 } from "@elementor/ui";
|
|
5138
|
+
import { __ as __44 } from "@wordpress/i18n";
|
|
5035
5139
|
var transformMoveValue = (value) => Object.values(value).map((axis) => {
|
|
5036
5140
|
const size = axis?.value?.size ?? defaultValues.move.size;
|
|
5037
5141
|
const unit = axis?.value?.unit ?? defaultValues.move.unit;
|
|
@@ -5052,19 +5156,19 @@ var TransformLabel = (props) => {
|
|
|
5052
5156
|
const { $$type, value } = props.value;
|
|
5053
5157
|
switch ($$type) {
|
|
5054
5158
|
case TransformFunctionKeys.move:
|
|
5055
|
-
return /* @__PURE__ */
|
|
5159
|
+
return /* @__PURE__ */ React90.createElement(Label2, { label: __44("Move", "elementor"), value: transformMoveValue(value) });
|
|
5056
5160
|
case TransformFunctionKeys.scale:
|
|
5057
|
-
return /* @__PURE__ */
|
|
5161
|
+
return /* @__PURE__ */ React90.createElement(Label2, { label: __44("Scale", "elementor"), value: transformScaleValue(value) });
|
|
5058
5162
|
case TransformFunctionKeys.rotate:
|
|
5059
|
-
return /* @__PURE__ */
|
|
5163
|
+
return /* @__PURE__ */ React90.createElement(Label2, { label: __44("Rotate", "elementor"), value: transformRotateValue(value) });
|
|
5060
5164
|
case TransformFunctionKeys.skew:
|
|
5061
|
-
return /* @__PURE__ */
|
|
5165
|
+
return /* @__PURE__ */ React90.createElement(Label2, { label: __44("Skew", "elementor"), value: transformSkewValue(value) });
|
|
5062
5166
|
default:
|
|
5063
5167
|
return "";
|
|
5064
5168
|
}
|
|
5065
5169
|
};
|
|
5066
5170
|
var Label2 = ({ label, value }) => {
|
|
5067
|
-
return /* @__PURE__ */
|
|
5171
|
+
return /* @__PURE__ */ React90.createElement(Box16, { component: "span" }, label, ": ", value);
|
|
5068
5172
|
};
|
|
5069
5173
|
|
|
5070
5174
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
@@ -5073,17 +5177,17 @@ var TransformRepeaterControl = createControl(() => {
|
|
|
5073
5177
|
const context = useBoundProp(transformPropTypeUtil);
|
|
5074
5178
|
const headerRef = useRef21(null);
|
|
5075
5179
|
const popupState = usePopupState6({ variant: "popover" });
|
|
5076
|
-
return /* @__PURE__ */
|
|
5180
|
+
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 })));
|
|
5077
5181
|
});
|
|
5078
|
-
var ToolTip = /* @__PURE__ */
|
|
5079
|
-
|
|
5182
|
+
var ToolTip = /* @__PURE__ */ React91.createElement(
|
|
5183
|
+
Box17,
|
|
5080
5184
|
{
|
|
5081
5185
|
component: "span",
|
|
5082
5186
|
"aria-label": void 0,
|
|
5083
5187
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
5084
5188
|
},
|
|
5085
|
-
/* @__PURE__ */
|
|
5086
|
-
/* @__PURE__ */
|
|
5189
|
+
/* @__PURE__ */ React91.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
|
|
5190
|
+
/* @__PURE__ */ React91.createElement(Typography6, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __45("You can use each kind of transform only once per element.", "elementor"))
|
|
5087
5191
|
);
|
|
5088
5192
|
var Repeater2 = ({
|
|
5089
5193
|
headerRef,
|
|
@@ -5097,21 +5201,21 @@ var Repeater2 = ({
|
|
|
5097
5201
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
5098
5202
|
};
|
|
5099
5203
|
const shouldDisableAddItem = !getInitialValue();
|
|
5100
|
-
return /* @__PURE__ */
|
|
5204
|
+
return /* @__PURE__ */ React91.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React91.createElement(
|
|
5101
5205
|
ControlRepeater,
|
|
5102
5206
|
{
|
|
5103
5207
|
initial: getInitialValue() ?? initialTransformValue,
|
|
5104
5208
|
propTypeUtil: transformFunctionsPropTypeUtil
|
|
5105
5209
|
},
|
|
5106
|
-
/* @__PURE__ */
|
|
5210
|
+
/* @__PURE__ */ React91.createElement(
|
|
5107
5211
|
Header,
|
|
5108
5212
|
{
|
|
5109
|
-
label:
|
|
5110
|
-
adornment: () => /* @__PURE__ */
|
|
5213
|
+
label: __45("Transform", "elementor"),
|
|
5214
|
+
adornment: () => /* @__PURE__ */ React91.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
5111
5215
|
ref: headerRef
|
|
5112
5216
|
},
|
|
5113
|
-
/* @__PURE__ */
|
|
5114
|
-
/* @__PURE__ */
|
|
5217
|
+
/* @__PURE__ */ React91.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
5218
|
+
/* @__PURE__ */ React91.createElement(
|
|
5115
5219
|
TooltipAddItemAction,
|
|
5116
5220
|
{
|
|
5117
5221
|
disabled: shouldDisableAddItem,
|
|
@@ -5121,15 +5225,15 @@ var Repeater2 = ({
|
|
|
5121
5225
|
}
|
|
5122
5226
|
)
|
|
5123
5227
|
),
|
|
5124
|
-
/* @__PURE__ */
|
|
5228
|
+
/* @__PURE__ */ React91.createElement(ItemsContainer, null, /* @__PURE__ */ React91.createElement(
|
|
5125
5229
|
Item,
|
|
5126
5230
|
{
|
|
5127
5231
|
Icon: TransformIcon,
|
|
5128
5232
|
Label: TransformLabel,
|
|
5129
|
-
actions: /* @__PURE__ */
|
|
5233
|
+
actions: /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(DisableItemAction, null), /* @__PURE__ */ React91.createElement(RemoveItemAction, null))
|
|
5130
5234
|
}
|
|
5131
5235
|
)),
|
|
5132
|
-
/* @__PURE__ */
|
|
5236
|
+
/* @__PURE__ */ React91.createElement(EditItemPopover, null, /* @__PURE__ */ React91.createElement(TransformContent, null))
|
|
5133
5237
|
));
|
|
5134
5238
|
};
|
|
5135
5239
|
var TransformBasePopoverTrigger = ({
|
|
@@ -5137,19 +5241,19 @@ var TransformBasePopoverTrigger = ({
|
|
|
5137
5241
|
repeaterBindKey
|
|
5138
5242
|
}) => {
|
|
5139
5243
|
const { bind } = useBoundProp();
|
|
5140
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
5244
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React91.createElement(IconButton7, { size: SIZE8, "aria-label": __45("Base Transform", "elementor"), ...bindTrigger4(popupState) }, /* @__PURE__ */ React91.createElement(AdjustmentsIcon2, { fontSize: SIZE8 }));
|
|
5141
5245
|
};
|
|
5142
5246
|
|
|
5143
5247
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
5144
|
-
import * as
|
|
5248
|
+
import * as React94 from "react";
|
|
5145
5249
|
import { useEffect as useEffect9, useMemo as useMemo9, useState as useState16 } from "react";
|
|
5146
5250
|
import { createArrayPropUtils as createArrayPropUtils2, selectionSizePropTypeUtil as selectionSizePropTypeUtil2 } from "@elementor/editor-props";
|
|
5147
5251
|
import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
|
|
5148
|
-
import { Alert as Alert2, AlertTitle as
|
|
5149
|
-
import { __ as
|
|
5252
|
+
import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box19, Typography as Typography7 } from "@elementor/ui";
|
|
5253
|
+
import { __ as __48 } from "@wordpress/i18n";
|
|
5150
5254
|
|
|
5151
5255
|
// src/controls/selection-size-control.tsx
|
|
5152
|
-
import * as
|
|
5256
|
+
import * as React92 from "react";
|
|
5153
5257
|
import { useMemo as useMemo8, useRef as useRef22 } from "react";
|
|
5154
5258
|
import { selectionSizePropTypeUtil } from "@elementor/editor-props";
|
|
5155
5259
|
import { Grid as Grid28 } from "@elementor/ui";
|
|
@@ -5169,7 +5273,7 @@ var SelectionSizeControl = createControl(
|
|
|
5169
5273
|
}
|
|
5170
5274
|
}, [value, sizeConfigMap]);
|
|
5171
5275
|
const SelectionComponent = selectionConfig.component;
|
|
5172
|
-
return /* @__PURE__ */
|
|
5276
|
+
return /* @__PURE__ */ React92.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React92.createElement(Grid28, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React92.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React92.createElement(Grid28, { 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(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React92.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React92.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React92.createElement(
|
|
5173
5277
|
SizeControl,
|
|
5174
5278
|
{
|
|
5175
5279
|
anchorRef: rowRef,
|
|
@@ -5183,12 +5287,12 @@ var SelectionSizeControl = createControl(
|
|
|
5183
5287
|
);
|
|
5184
5288
|
|
|
5185
5289
|
// src/controls/transition-control/data.ts
|
|
5186
|
-
import { __ as
|
|
5290
|
+
import { __ as __46 } from "@wordpress/i18n";
|
|
5187
5291
|
var initialTransitionValue = {
|
|
5188
5292
|
selection: {
|
|
5189
5293
|
$$type: "key-value",
|
|
5190
5294
|
value: {
|
|
5191
|
-
key: { value:
|
|
5295
|
+
key: { value: __46("All properties", "elementor"), $$type: "string" },
|
|
5192
5296
|
value: { value: "all", $$type: "string" }
|
|
5193
5297
|
}
|
|
5194
5298
|
},
|
|
@@ -5196,9 +5300,9 @@ var initialTransitionValue = {
|
|
|
5196
5300
|
};
|
|
5197
5301
|
var transitionProperties = [
|
|
5198
5302
|
{
|
|
5199
|
-
label:
|
|
5303
|
+
label: __46("Default", "elementor"),
|
|
5200
5304
|
type: "category",
|
|
5201
|
-
properties: [{ label:
|
|
5305
|
+
properties: [{ label: __46("All properties", "elementor"), value: "all" }]
|
|
5202
5306
|
}
|
|
5203
5307
|
];
|
|
5204
5308
|
var transitionsItemsList = transitionProperties.map((category) => ({
|
|
@@ -5230,12 +5334,12 @@ function subscribeToTransitionEvent() {
|
|
|
5230
5334
|
}
|
|
5231
5335
|
|
|
5232
5336
|
// src/controls/transition-control/transition-selector.tsx
|
|
5233
|
-
import * as
|
|
5337
|
+
import * as React93 from "react";
|
|
5234
5338
|
import { useRef as useRef23 } from "react";
|
|
5235
5339
|
import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
|
|
5236
5340
|
import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
|
|
5237
|
-
import { bindPopover as bindPopover6, bindTrigger as bindTrigger5, Box as
|
|
5238
|
-
import { __ as
|
|
5341
|
+
import { bindPopover as bindPopover6, bindTrigger as bindTrigger5, Box as Box18, Popover as Popover6, UnstableTag as UnstableTag3, usePopupState as usePopupState7 } from "@elementor/ui";
|
|
5342
|
+
import { __ as __47 } from "@wordpress/i18n";
|
|
5239
5343
|
var toTransitionSelectorValue = (label) => {
|
|
5240
5344
|
for (const category of transitionProperties) {
|
|
5241
5345
|
const property = category.properties.find((prop) => prop.label === label);
|
|
@@ -5281,7 +5385,7 @@ var TransitionSelector = ({
|
|
|
5281
5385
|
return [
|
|
5282
5386
|
first,
|
|
5283
5387
|
{
|
|
5284
|
-
label:
|
|
5388
|
+
label: __47("Recently Used", "elementor"),
|
|
5285
5389
|
items: recentItems
|
|
5286
5390
|
},
|
|
5287
5391
|
...rest
|
|
@@ -5305,16 +5409,16 @@ var TransitionSelector = ({
|
|
|
5305
5409
|
left: rect.right + 36
|
|
5306
5410
|
};
|
|
5307
5411
|
};
|
|
5308
|
-
return /* @__PURE__ */
|
|
5412
|
+
return /* @__PURE__ */ React93.createElement(Box18, { ref: defaultRef }, /* @__PURE__ */ React93.createElement(
|
|
5309
5413
|
UnstableTag3,
|
|
5310
5414
|
{
|
|
5311
5415
|
variant: "outlined",
|
|
5312
5416
|
label: transitionLabel,
|
|
5313
|
-
endIcon: /* @__PURE__ */
|
|
5417
|
+
endIcon: /* @__PURE__ */ React93.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
|
|
5314
5418
|
...bindTrigger5(popoverState),
|
|
5315
5419
|
fullWidth: true
|
|
5316
5420
|
}
|
|
5317
|
-
), /* @__PURE__ */
|
|
5421
|
+
), /* @__PURE__ */ React93.createElement(
|
|
5318
5422
|
Popover6,
|
|
5319
5423
|
{
|
|
5320
5424
|
disablePortal: true,
|
|
@@ -5325,7 +5429,7 @@ var TransitionSelector = ({
|
|
|
5325
5429
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
5326
5430
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
5327
5431
|
},
|
|
5328
|
-
/* @__PURE__ */
|
|
5432
|
+
/* @__PURE__ */ React93.createElement(
|
|
5329
5433
|
ItemSelector,
|
|
5330
5434
|
{
|
|
5331
5435
|
itemsList: getItemList(),
|
|
@@ -5333,7 +5437,7 @@ var TransitionSelector = ({
|
|
|
5333
5437
|
onItemChange: handleTransitionPropertyChange,
|
|
5334
5438
|
onClose: popoverState.close,
|
|
5335
5439
|
sectionWidth: 268,
|
|
5336
|
-
title:
|
|
5440
|
+
title: __47("Transition Property", "elementor"),
|
|
5337
5441
|
icon: VariationsIcon,
|
|
5338
5442
|
disabledItems
|
|
5339
5443
|
}
|
|
@@ -5349,8 +5453,8 @@ var DURATION_CONFIG = {
|
|
|
5349
5453
|
};
|
|
5350
5454
|
var getSelectionSizeProps = (recentlyUsedList, disabledItems) => {
|
|
5351
5455
|
return {
|
|
5352
|
-
selectionLabel:
|
|
5353
|
-
sizeLabel:
|
|
5456
|
+
selectionLabel: __48("Type", "elementor"),
|
|
5457
|
+
sizeLabel: __48("Duration", "elementor"),
|
|
5354
5458
|
selectionConfig: {
|
|
5355
5459
|
component: TransitionSelector,
|
|
5356
5460
|
props: {
|
|
@@ -5378,7 +5482,7 @@ function getChildControlConfig(recentlyUsedList, disabledItems) {
|
|
|
5378
5482
|
props: getSelectionSizeProps(recentlyUsedList, disabledItems)
|
|
5379
5483
|
};
|
|
5380
5484
|
}
|
|
5381
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
5485
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React94.createElement(
|
|
5382
5486
|
Alert2,
|
|
5383
5487
|
{
|
|
5384
5488
|
sx: {
|
|
@@ -5386,10 +5490,10 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React92.createElement(
|
|
|
5386
5490
|
gap: 0.5
|
|
5387
5491
|
},
|
|
5388
5492
|
color: "secondary",
|
|
5389
|
-
icon: /* @__PURE__ */
|
|
5493
|
+
icon: /* @__PURE__ */ React94.createElement(InfoCircleFilledIcon3, null)
|
|
5390
5494
|
},
|
|
5391
|
-
/* @__PURE__ */
|
|
5392
|
-
/* @__PURE__ */
|
|
5495
|
+
/* @__PURE__ */ React94.createElement(AlertTitle3, null, __48("Transitions", "elementor")),
|
|
5496
|
+
/* @__PURE__ */ React94.createElement(Box19, { component: "span" }, /* @__PURE__ */ React94.createElement(Typography7, { variant: "body2" }, __48("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
5393
5497
|
);
|
|
5394
5498
|
subscribeToTransitionEvent();
|
|
5395
5499
|
var getTransitionLabel = (item) => {
|
|
@@ -5414,13 +5518,13 @@ var TransitionRepeaterControl = createControl(
|
|
|
5414
5518
|
useEffect9(() => {
|
|
5415
5519
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
5416
5520
|
}, [recentlyUsedListGetter]);
|
|
5417
|
-
return /* @__PURE__ */
|
|
5521
|
+
return /* @__PURE__ */ React94.createElement(
|
|
5418
5522
|
RepeatableControl,
|
|
5419
5523
|
{
|
|
5420
|
-
label:
|
|
5421
|
-
repeaterLabel:
|
|
5524
|
+
label: __48("Transitions", "elementor"),
|
|
5525
|
+
repeaterLabel: __48("Transitions", "elementor"),
|
|
5422
5526
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
5423
|
-
placeholder:
|
|
5527
|
+
placeholder: __48("Empty Transition", "elementor"),
|
|
5424
5528
|
showDuplicate: false,
|
|
5425
5529
|
showToggle: true,
|
|
5426
5530
|
initialValues: initialTransitionValue,
|
|
@@ -5437,32 +5541,32 @@ var TransitionRepeaterControl = createControl(
|
|
|
5437
5541
|
);
|
|
5438
5542
|
|
|
5439
5543
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
5440
|
-
import * as
|
|
5544
|
+
import * as React95 from "react";
|
|
5441
5545
|
import { BrushBigIcon } from "@elementor/icons";
|
|
5442
|
-
import { IconButton as IconButton8, styled as
|
|
5443
|
-
var CustomIconButton =
|
|
5546
|
+
import { IconButton as IconButton8, styled as styled10, Tooltip as Tooltip8 } from "@elementor/ui";
|
|
5547
|
+
var CustomIconButton = styled10(IconButton8)(({ theme }) => ({
|
|
5444
5548
|
width: theme.spacing(2.5),
|
|
5445
5549
|
height: theme.spacing(2.5)
|
|
5446
5550
|
}));
|
|
5447
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
5551
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React95.createElement(Tooltip8, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React95.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React95.createElement(BrushBigIcon, { fontSize: size })));
|
|
5448
5552
|
|
|
5449
5553
|
// src/components/repeater.tsx
|
|
5450
|
-
import * as
|
|
5554
|
+
import * as React96 from "react";
|
|
5451
5555
|
import { useEffect as useEffect10, useState as useState17 } from "react";
|
|
5452
5556
|
import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon3, XIcon as XIcon4 } from "@elementor/icons";
|
|
5453
5557
|
import {
|
|
5454
5558
|
bindPopover as bindPopover7,
|
|
5455
5559
|
bindTrigger as bindTrigger6,
|
|
5456
|
-
Box as
|
|
5560
|
+
Box as Box20,
|
|
5457
5561
|
IconButton as IconButton9,
|
|
5458
5562
|
Popover as Popover7,
|
|
5459
5563
|
Stack as Stack16,
|
|
5460
5564
|
Tooltip as Tooltip9,
|
|
5461
|
-
Typography as
|
|
5565
|
+
Typography as Typography8,
|
|
5462
5566
|
UnstableTag as UnstableTag4,
|
|
5463
5567
|
usePopupState as usePopupState8
|
|
5464
5568
|
} from "@elementor/ui";
|
|
5465
|
-
import { __ as
|
|
5569
|
+
import { __ as __49 } from "@wordpress/i18n";
|
|
5466
5570
|
var SIZE9 = "tiny";
|
|
5467
5571
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
5468
5572
|
var Repeater3 = ({
|
|
@@ -5557,7 +5661,7 @@ var Repeater3 = ({
|
|
|
5557
5661
|
{ action: { type: "reorder", payload: { ...meta } } }
|
|
5558
5662
|
);
|
|
5559
5663
|
};
|
|
5560
|
-
return /* @__PURE__ */
|
|
5664
|
+
return /* @__PURE__ */ React96.createElement(SectionContent, null, /* @__PURE__ */ React96.createElement(
|
|
5561
5665
|
Stack16,
|
|
5562
5666
|
{
|
|
5563
5667
|
direction: "row",
|
|
@@ -5566,31 +5670,31 @@ var Repeater3 = ({
|
|
|
5566
5670
|
gap: 1,
|
|
5567
5671
|
sx: { marginInlineEnd: -0.75 }
|
|
5568
5672
|
},
|
|
5569
|
-
/* @__PURE__ */
|
|
5570
|
-
/* @__PURE__ */
|
|
5571
|
-
/* @__PURE__ */
|
|
5673
|
+
/* @__PURE__ */ React96.createElement(Typography8, { component: "label", variant: "caption", color: "text.secondary" }, label),
|
|
5674
|
+
/* @__PURE__ */ React96.createElement(ControlAdornments, null),
|
|
5675
|
+
/* @__PURE__ */ React96.createElement(
|
|
5572
5676
|
IconButton9,
|
|
5573
5677
|
{
|
|
5574
5678
|
size: SIZE9,
|
|
5575
5679
|
sx: { ml: "auto" },
|
|
5576
5680
|
disabled,
|
|
5577
5681
|
onClick: addRepeaterItem,
|
|
5578
|
-
"aria-label":
|
|
5682
|
+
"aria-label": __49("Add item", "elementor")
|
|
5579
5683
|
},
|
|
5580
|
-
/* @__PURE__ */
|
|
5684
|
+
/* @__PURE__ */ React96.createElement(PlusIcon3, { fontSize: SIZE9 })
|
|
5581
5685
|
)
|
|
5582
|
-
), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
5686
|
+
), 0 < uniqueKeys.length && /* @__PURE__ */ React96.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
|
|
5583
5687
|
const value = items2[index];
|
|
5584
5688
|
if (!value) {
|
|
5585
5689
|
return null;
|
|
5586
5690
|
}
|
|
5587
|
-
return /* @__PURE__ */
|
|
5691
|
+
return /* @__PURE__ */ React96.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React96.createElement(
|
|
5588
5692
|
RepeaterItem,
|
|
5589
5693
|
{
|
|
5590
5694
|
disabled,
|
|
5591
5695
|
propDisabled: value?.disabled,
|
|
5592
|
-
label: /* @__PURE__ */
|
|
5593
|
-
startIcon: /* @__PURE__ */
|
|
5696
|
+
label: /* @__PURE__ */ React96.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React96.createElement(itemSettings.Label, { value })),
|
|
5697
|
+
startIcon: /* @__PURE__ */ React96.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React96.createElement(itemSettings.Icon, { value })),
|
|
5594
5698
|
removeItem: () => removeRepeaterItem(index),
|
|
5595
5699
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
5596
5700
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -5600,7 +5704,7 @@ var Repeater3 = ({
|
|
|
5600
5704
|
showToggle,
|
|
5601
5705
|
collectionPropUtil
|
|
5602
5706
|
},
|
|
5603
|
-
(props) => /* @__PURE__ */
|
|
5707
|
+
(props) => /* @__PURE__ */ React96.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
|
|
5604
5708
|
));
|
|
5605
5709
|
})));
|
|
5606
5710
|
};
|
|
@@ -5621,10 +5725,10 @@ var RepeaterItem = ({
|
|
|
5621
5725
|
}) => {
|
|
5622
5726
|
const [anchorEl, setAnchorEl] = useState17(null);
|
|
5623
5727
|
const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
|
|
5624
|
-
const duplicateLabel =
|
|
5625
|
-
const toggleLabel = propDisabled ?
|
|
5626
|
-
const removeLabel =
|
|
5627
|
-
return /* @__PURE__ */
|
|
5728
|
+
const duplicateLabel = __49("Duplicate", "elementor");
|
|
5729
|
+
const toggleLabel = propDisabled ? __49("Show", "elementor") : __49("Hide", "elementor");
|
|
5730
|
+
const removeLabel = __49("Remove", "elementor");
|
|
5731
|
+
return /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(
|
|
5628
5732
|
UnstableTag4,
|
|
5629
5733
|
{
|
|
5630
5734
|
disabled,
|
|
@@ -5633,12 +5737,12 @@ var RepeaterItem = ({
|
|
|
5633
5737
|
fullWidth: true,
|
|
5634
5738
|
ref: setRef,
|
|
5635
5739
|
variant: "outlined",
|
|
5636
|
-
"aria-label":
|
|
5740
|
+
"aria-label": __49("Open item", "elementor"),
|
|
5637
5741
|
...bindTrigger6(popoverState),
|
|
5638
5742
|
startIcon,
|
|
5639
|
-
actions: /* @__PURE__ */
|
|
5743
|
+
actions: /* @__PURE__ */ React96.createElement(React96.Fragment, null, showDuplicate && /* @__PURE__ */ React96.createElement(Tooltip9, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(IconButton9, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React96.createElement(CopyIcon2, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React96.createElement(Tooltip9, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(IconButton9, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React96.createElement(EyeOffIcon2, { fontSize: SIZE9 }) : /* @__PURE__ */ React96.createElement(EyeIcon2, { fontSize: SIZE9 }))), /* @__PURE__ */ React96.createElement(Tooltip9, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(IconButton9, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React96.createElement(XIcon4, { fontSize: SIZE9 }))))
|
|
5640
5744
|
}
|
|
5641
|
-
), /* @__PURE__ */
|
|
5745
|
+
), /* @__PURE__ */ React96.createElement(
|
|
5642
5746
|
Popover7,
|
|
5643
5747
|
{
|
|
5644
5748
|
disablePortal: true,
|
|
@@ -5652,7 +5756,7 @@ var RepeaterItem = ({
|
|
|
5652
5756
|
...popoverProps,
|
|
5653
5757
|
anchorEl: ref
|
|
5654
5758
|
},
|
|
5655
|
-
/* @__PURE__ */
|
|
5759
|
+
/* @__PURE__ */ React96.createElement(Box20, null, children({ anchorEl, collectionPropUtil }))
|
|
5656
5760
|
));
|
|
5657
5761
|
};
|
|
5658
5762
|
var usePopover = (openOnMount, onOpen) => {
|
|
@@ -5689,6 +5793,7 @@ export {
|
|
|
5689
5793
|
FloatingActionsBar,
|
|
5690
5794
|
FontFamilyControl,
|
|
5691
5795
|
GapControl,
|
|
5796
|
+
HtmlTagControl,
|
|
5692
5797
|
ImageControl,
|
|
5693
5798
|
ItemSelector,
|
|
5694
5799
|
KeyValueControl,
|