@elementor/editor-controls 3.32.0-36 → 3.32.0-37
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.js +449 -405
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +332 -288
- package/dist/index.mjs.map +1 -1
- package/package.json +14 -14
- package/src/controls/transform-control/transform-base-control.tsx +3 -0
- package/src/controls/transform-control/transform-base-controls/children-perspective-control.tsx +78 -0
package/dist/index.mjs
CHANGED
|
@@ -3302,13 +3302,13 @@ var SvgMediaControl = createControl(() => {
|
|
|
3302
3302
|
});
|
|
3303
3303
|
|
|
3304
3304
|
// src/controls/background-control/background-control.tsx
|
|
3305
|
-
import * as
|
|
3305
|
+
import * as React68 from "react";
|
|
3306
3306
|
import { backgroundPropTypeUtil } from "@elementor/editor-props";
|
|
3307
|
-
import { Grid as
|
|
3308
|
-
import { __ as
|
|
3307
|
+
import { Grid as Grid18 } from "@elementor/ui";
|
|
3308
|
+
import { __ as __32 } from "@wordpress/i18n";
|
|
3309
3309
|
|
|
3310
3310
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
3311
|
-
import * as
|
|
3311
|
+
import * as React67 from "react";
|
|
3312
3312
|
import {
|
|
3313
3313
|
backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
|
|
3314
3314
|
backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
|
|
@@ -3317,7 +3317,7 @@ import {
|
|
|
3317
3317
|
} from "@elementor/editor-props";
|
|
3318
3318
|
import { Box as Box10, CardMedia as CardMedia3, styled as styled6, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
|
|
3319
3319
|
import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
|
|
3320
|
-
import { __ as
|
|
3320
|
+
import { __ as __31 } from "@wordpress/i18n";
|
|
3321
3321
|
|
|
3322
3322
|
// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
|
|
3323
3323
|
import * as React50 from "react";
|
|
@@ -3447,49 +3447,91 @@ var ConditionalToolTip = ({
|
|
|
3447
3447
|
) : children;
|
|
3448
3448
|
|
|
3449
3449
|
// src/components/unstable-repeater/header/header.tsx
|
|
3450
|
-
import * as
|
|
3451
|
-
import { Stack as
|
|
3450
|
+
import * as React54 from "react";
|
|
3451
|
+
import { Stack as Stack16, Typography as Typography5 } from "@elementor/ui";
|
|
3452
3452
|
|
|
3453
3453
|
// src/controls/transform-control/transform-base-control.tsx
|
|
3454
|
-
import * as
|
|
3454
|
+
import * as React53 from "react";
|
|
3455
3455
|
import { useRef as useRef11 } from "react";
|
|
3456
3456
|
import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
|
|
3457
3457
|
import { AdjustmentsIcon } from "@elementor/icons";
|
|
3458
|
-
import { bindPopover as bindPopover5, bindTrigger as bindTrigger4, Divider as
|
|
3459
|
-
import { __ as
|
|
3458
|
+
import { bindPopover as bindPopover5, bindTrigger as bindTrigger4, Divider as Divider6, IconButton as IconButton5, Popover as Popover5, usePopupState as usePopupState7 } from "@elementor/ui";
|
|
3459
|
+
import { __ as __22 } from "@wordpress/i18n";
|
|
3460
3460
|
|
|
3461
|
-
// src/controls/transform-control/transform-base-controls/
|
|
3461
|
+
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
3462
3462
|
import * as React51 from "react";
|
|
3463
3463
|
import { sizePropTypeUtil as sizePropTypeUtil6 } from "@elementor/editor-props";
|
|
3464
3464
|
import { Divider as Divider4, Grid as Grid12, Stack as Stack14 } from "@elementor/ui";
|
|
3465
3465
|
import { __ as __20 } from "@wordpress/i18n";
|
|
3466
|
+
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
3467
|
+
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
3468
|
+
{
|
|
3469
|
+
label: __20("Perspective", "elementor"),
|
|
3470
|
+
bindValue: "perspective",
|
|
3471
|
+
units: lengthUnits
|
|
3472
|
+
},
|
|
3473
|
+
{
|
|
3474
|
+
label: __20("Origin X", "elementor"),
|
|
3475
|
+
bindValue: "perspective-origin-x",
|
|
3476
|
+
units: ORIGIN_UNITS
|
|
3477
|
+
},
|
|
3478
|
+
{
|
|
3479
|
+
label: __20("Origin Y", "elementor"),
|
|
3480
|
+
bindValue: "perspective-origin-y",
|
|
3481
|
+
units: ORIGIN_UNITS
|
|
3482
|
+
}
|
|
3483
|
+
];
|
|
3484
|
+
var ChildrenPerspectiveControl = ({ rowRef }) => {
|
|
3485
|
+
return /* @__PURE__ */ React51.createElement(Stack14, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React51.createElement(ControlFormLabel, { sx: { pt: 1.5, pl: 1.5 } }, __20("Children perspective", "elementor")), /* @__PURE__ */ React51.createElement(Grid12, { container: true, spacing: 1.5, ref: rowRef }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React51.createElement(ControlFields, { control, rowRef, key: control.bindValue })), /* @__PURE__ */ React51.createElement(Divider4, { sx: { py: 3 } })));
|
|
3486
|
+
};
|
|
3487
|
+
var ControlFields = ({
|
|
3488
|
+
control,
|
|
3489
|
+
rowRef
|
|
3490
|
+
}) => {
|
|
3491
|
+
const context = useBoundProp(sizePropTypeUtil6);
|
|
3492
|
+
return /* @__PURE__ */ React51.createElement(PropProvider, { ...context }, /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind: control.bindValue }, /* @__PURE__ */ React51.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React51.createElement(Grid12, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React51.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlLabel, null, control.label)), /* @__PURE__ */ React51.createElement(Grid12, { item: true, xs: 6, sx: { pr: 3 } }, /* @__PURE__ */ React51.createElement(
|
|
3493
|
+
SizeControl,
|
|
3494
|
+
{
|
|
3495
|
+
variant: "length",
|
|
3496
|
+
units: [...control.units],
|
|
3497
|
+
anchorRef: rowRef,
|
|
3498
|
+
disableCustom: true
|
|
3499
|
+
}
|
|
3500
|
+
))))));
|
|
3501
|
+
};
|
|
3502
|
+
|
|
3503
|
+
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
3504
|
+
import * as React52 from "react";
|
|
3505
|
+
import { sizePropTypeUtil as sizePropTypeUtil7 } from "@elementor/editor-props";
|
|
3506
|
+
import { Divider as Divider5, Grid as Grid13, Stack as Stack15 } from "@elementor/ui";
|
|
3507
|
+
import { __ as __21 } from "@wordpress/i18n";
|
|
3466
3508
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
3467
3509
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
3468
3510
|
{
|
|
3469
|
-
label:
|
|
3511
|
+
label: __21("Origin X", "elementor"),
|
|
3470
3512
|
bindValue: "x",
|
|
3471
3513
|
units: TRANSFORM_ORIGIN_UNITS
|
|
3472
3514
|
},
|
|
3473
3515
|
{
|
|
3474
|
-
label:
|
|
3516
|
+
label: __21("Origin Y", "elementor"),
|
|
3475
3517
|
bindValue: "y",
|
|
3476
3518
|
units: TRANSFORM_ORIGIN_UNITS
|
|
3477
3519
|
},
|
|
3478
3520
|
{
|
|
3479
|
-
label:
|
|
3521
|
+
label: __21("Origin Z", "elementor"),
|
|
3480
3522
|
bindValue: "z",
|
|
3481
3523
|
units: TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%")
|
|
3482
3524
|
}
|
|
3483
3525
|
];
|
|
3484
3526
|
var TransformOriginControl = ({ rowRef }) => {
|
|
3485
|
-
return /* @__PURE__ */
|
|
3527
|
+
return /* @__PURE__ */ React52.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React52.createElement(ControlFormLabel, { sx: { pt: 1.5, pl: 1.5 } }, __21("Transform", "elementor")), /* @__PURE__ */ React52.createElement(Grid13, { container: true, spacing: 1.5, ref: rowRef }, TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React52.createElement(ControlFields2, { control, rowRef, key: control.bindValue })), /* @__PURE__ */ React52.createElement(Divider5, { sx: { py: 3 } })));
|
|
3486
3528
|
};
|
|
3487
|
-
var
|
|
3529
|
+
var ControlFields2 = ({
|
|
3488
3530
|
control,
|
|
3489
3531
|
rowRef
|
|
3490
3532
|
}) => {
|
|
3491
|
-
const context = useBoundProp(
|
|
3492
|
-
return /* @__PURE__ */
|
|
3533
|
+
const context = useBoundProp(sizePropTypeUtil7);
|
|
3534
|
+
return /* @__PURE__ */ React52.createElement(PropProvider, { ...context }, /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: control.bindValue }, /* @__PURE__ */ React52.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React52.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ControlLabel, null, control.label)), /* @__PURE__ */ React52.createElement(Grid13, { item: true, xs: 6, sx: { pr: 3 } }, /* @__PURE__ */ React52.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true }))))));
|
|
3493
3535
|
};
|
|
3494
3536
|
|
|
3495
3537
|
// src/controls/transform-control/transform-base-control.tsx
|
|
@@ -3501,15 +3543,15 @@ var TransformBaseControl = ({ anchorRef }) => {
|
|
|
3501
3543
|
...popupState,
|
|
3502
3544
|
anchorEl: anchorRef.current ?? void 0
|
|
3503
3545
|
});
|
|
3504
|
-
return /* @__PURE__ */
|
|
3546
|
+
return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(
|
|
3505
3547
|
IconButton5,
|
|
3506
3548
|
{
|
|
3507
3549
|
size: SIZE5,
|
|
3508
|
-
"aria-label":
|
|
3550
|
+
"aria-label": __22("Base Transform", "elementor"),
|
|
3509
3551
|
...bindTrigger4(popupState)
|
|
3510
3552
|
},
|
|
3511
|
-
/* @__PURE__ */
|
|
3512
|
-
), /* @__PURE__ */
|
|
3553
|
+
/* @__PURE__ */ React53.createElement(AdjustmentsIcon, { fontSize: SIZE5 })
|
|
3554
|
+
), /* @__PURE__ */ React53.createElement(
|
|
3513
3555
|
Popover5,
|
|
3514
3556
|
{
|
|
3515
3557
|
disablePortal: true,
|
|
@@ -3522,27 +3564,29 @@ var TransformBaseControl = ({ anchorRef }) => {
|
|
|
3522
3564
|
},
|
|
3523
3565
|
...popupProps
|
|
3524
3566
|
},
|
|
3525
|
-
/* @__PURE__ */
|
|
3567
|
+
/* @__PURE__ */ React53.createElement(
|
|
3526
3568
|
PopoverHeader3,
|
|
3527
3569
|
{
|
|
3528
|
-
title:
|
|
3570
|
+
title: __22("Base Transform", "elementor"),
|
|
3529
3571
|
onClose: popupState.close,
|
|
3530
|
-
icon: /* @__PURE__ */
|
|
3572
|
+
icon: /* @__PURE__ */ React53.createElement(AdjustmentsIcon, { fontSize: SIZE5 })
|
|
3531
3573
|
}
|
|
3532
3574
|
),
|
|
3533
|
-
/* @__PURE__ */
|
|
3534
|
-
/* @__PURE__ */
|
|
3575
|
+
/* @__PURE__ */ React53.createElement(Divider6, null),
|
|
3576
|
+
/* @__PURE__ */ React53.createElement(TransformOriginControl, { rowRef }),
|
|
3577
|
+
/* @__PURE__ */ React53.createElement(Divider6, null),
|
|
3578
|
+
/* @__PURE__ */ React53.createElement(ChildrenPerspectiveControl, { rowRef })
|
|
3535
3579
|
));
|
|
3536
3580
|
};
|
|
3537
3581
|
|
|
3538
3582
|
// src/components/unstable-repeater/header/header.tsx
|
|
3539
3583
|
var Header = ({ label, children }) => {
|
|
3540
3584
|
const { value } = useBoundProp();
|
|
3541
|
-
return /* @__PURE__ */
|
|
3585
|
+
return /* @__PURE__ */ React54.createElement(Stack16, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React54.createElement(Typography5, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React54.createElement(RepeaterHeaderActionsSlot, { value }), /* @__PURE__ */ React54.createElement(SlotChildren, { whitelist: [TransformBaseControl, TooltipAddItemAction], sorted: true }, children), /* @__PURE__ */ React54.createElement(ControlAdornments, null));
|
|
3542
3586
|
};
|
|
3543
3587
|
|
|
3544
3588
|
// src/components/unstable-repeater/items/items-container.tsx
|
|
3545
|
-
import * as
|
|
3589
|
+
import * as React55 from "react";
|
|
3546
3590
|
var ItemsContainer = ({
|
|
3547
3591
|
itemTemplate,
|
|
3548
3592
|
isSortable = true,
|
|
@@ -3561,9 +3605,9 @@ var ItemsContainer = ({
|
|
|
3561
3605
|
})
|
|
3562
3606
|
);
|
|
3563
3607
|
};
|
|
3564
|
-
return /* @__PURE__ */
|
|
3608
|
+
return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
|
|
3565
3609
|
const value = items2[index].item;
|
|
3566
|
-
return /* @__PURE__ */
|
|
3610
|
+
return /* @__PURE__ */ React55.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, React55.isValidElement(itemTemplate) ? React55.cloneElement(itemTemplate, {
|
|
3567
3611
|
key,
|
|
3568
3612
|
value,
|
|
3569
3613
|
index,
|
|
@@ -3573,15 +3617,15 @@ var ItemsContainer = ({
|
|
|
3573
3617
|
};
|
|
3574
3618
|
|
|
3575
3619
|
// src/components/unstable-repeater/items/item.tsx
|
|
3576
|
-
import * as
|
|
3620
|
+
import * as React59 from "react";
|
|
3577
3621
|
import { bindTrigger as bindTrigger5, UnstableTag as UnstableTag3 } from "@elementor/ui";
|
|
3578
|
-
import { __ as
|
|
3622
|
+
import { __ as __26 } from "@wordpress/i18n";
|
|
3579
3623
|
|
|
3580
3624
|
// src/components/unstable-repeater/actions/disable-item-action.tsx
|
|
3581
|
-
import * as
|
|
3625
|
+
import * as React56 from "react";
|
|
3582
3626
|
import { EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2 } from "@elementor/icons";
|
|
3583
3627
|
import { IconButton as IconButton6, Tooltip as Tooltip6 } from "@elementor/ui";
|
|
3584
|
-
import { __ as
|
|
3628
|
+
import { __ as __23 } from "@wordpress/i18n";
|
|
3585
3629
|
var SIZE6 = "tiny";
|
|
3586
3630
|
var DisableItemAction = ({ index = -1 }) => {
|
|
3587
3631
|
const { items: items2, updateItem } = useRepeaterContext();
|
|
@@ -3589,7 +3633,7 @@ var DisableItemAction = ({ index = -1 }) => {
|
|
|
3589
3633
|
return null;
|
|
3590
3634
|
}
|
|
3591
3635
|
const propDisabled = items2[index].item.disabled ?? false;
|
|
3592
|
-
const toggleLabel = propDisabled ?
|
|
3636
|
+
const toggleLabel = propDisabled ? __23("Show", "elementor") : __23("Hide", "elementor");
|
|
3593
3637
|
const onClick = () => {
|
|
3594
3638
|
const self = structuredClone(items2[index].item);
|
|
3595
3639
|
self.disabled = !self.disabled;
|
|
@@ -3598,42 +3642,42 @@ var DisableItemAction = ({ index = -1 }) => {
|
|
|
3598
3642
|
}
|
|
3599
3643
|
updateItem(self, index);
|
|
3600
3644
|
};
|
|
3601
|
-
return /* @__PURE__ */
|
|
3645
|
+
return /* @__PURE__ */ React56.createElement(Tooltip6, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React56.createElement(IconButton6, { size: SIZE6, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React56.createElement(EyeOffIcon2, { fontSize: SIZE6 }) : /* @__PURE__ */ React56.createElement(EyeIcon2, { fontSize: SIZE6 })));
|
|
3602
3646
|
};
|
|
3603
3647
|
|
|
3604
3648
|
// src/components/unstable-repeater/actions/duplicate-item-action.tsx
|
|
3605
|
-
import * as
|
|
3649
|
+
import * as React57 from "react";
|
|
3606
3650
|
import { CopyIcon as CopyIcon2 } from "@elementor/icons";
|
|
3607
3651
|
import { IconButton as IconButton7, Tooltip as Tooltip7 } from "@elementor/ui";
|
|
3608
|
-
import { __ as
|
|
3652
|
+
import { __ as __24 } from "@wordpress/i18n";
|
|
3609
3653
|
var SIZE7 = "tiny";
|
|
3610
3654
|
var DuplicateItemAction = ({ index = -1 }) => {
|
|
3611
3655
|
const { items: items2, addItem } = useRepeaterContext();
|
|
3612
3656
|
if (index === -1) {
|
|
3613
3657
|
return null;
|
|
3614
3658
|
}
|
|
3615
|
-
const duplicateLabel =
|
|
3659
|
+
const duplicateLabel = __24("Duplicate", "elementor");
|
|
3616
3660
|
const onClick = (ev) => {
|
|
3617
3661
|
const newItem = structuredClone(items2[index]?.item);
|
|
3618
3662
|
addItem(ev, { item: newItem, index: index + 1 });
|
|
3619
3663
|
};
|
|
3620
|
-
return /* @__PURE__ */
|
|
3664
|
+
return /* @__PURE__ */ React57.createElement(Tooltip7, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(IconButton7, { size: SIZE7, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React57.createElement(CopyIcon2, { fontSize: SIZE7 })));
|
|
3621
3665
|
};
|
|
3622
3666
|
|
|
3623
3667
|
// src/components/unstable-repeater/actions/remove-item-action.tsx
|
|
3624
|
-
import * as
|
|
3668
|
+
import * as React58 from "react";
|
|
3625
3669
|
import { XIcon as XIcon3 } from "@elementor/icons";
|
|
3626
3670
|
import { IconButton as IconButton8, Tooltip as Tooltip8 } from "@elementor/ui";
|
|
3627
|
-
import { __ as
|
|
3671
|
+
import { __ as __25 } from "@wordpress/i18n";
|
|
3628
3672
|
var SIZE8 = "tiny";
|
|
3629
3673
|
var RemoveItemAction = ({ index = -1 }) => {
|
|
3630
3674
|
const { removeItem } = useRepeaterContext();
|
|
3631
3675
|
if (index === -1) {
|
|
3632
3676
|
return null;
|
|
3633
3677
|
}
|
|
3634
|
-
const removeLabel =
|
|
3678
|
+
const removeLabel = __25("Remove", "elementor");
|
|
3635
3679
|
const onClick = () => removeItem(index);
|
|
3636
|
-
return /* @__PURE__ */
|
|
3680
|
+
return /* @__PURE__ */ React58.createElement(Tooltip8, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React58.createElement(IconButton8, { size: SIZE8, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React58.createElement(XIcon3, { fontSize: SIZE8 })));
|
|
3637
3681
|
};
|
|
3638
3682
|
|
|
3639
3683
|
// src/components/unstable-repeater/items/item.tsx
|
|
@@ -3651,21 +3695,21 @@ var Item = ({
|
|
|
3651
3695
|
triggerProps.onClick(ev);
|
|
3652
3696
|
setOpenItemIndex(index);
|
|
3653
3697
|
};
|
|
3654
|
-
return /* @__PURE__ */
|
|
3698
|
+
return /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(
|
|
3655
3699
|
UnstableTag3,
|
|
3656
3700
|
{
|
|
3657
3701
|
key,
|
|
3658
3702
|
disabled: false,
|
|
3659
|
-
label: /* @__PURE__ */
|
|
3703
|
+
label: /* @__PURE__ */ React59.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React59.createElement(Label3, { value })),
|
|
3660
3704
|
showActionsOnHover: true,
|
|
3661
3705
|
fullWidth: true,
|
|
3662
3706
|
ref: (ref) => ref && openItemIndex === index && setRowRef(ref),
|
|
3663
3707
|
variant: "outlined",
|
|
3664
|
-
"aria-label":
|
|
3708
|
+
"aria-label": __26("Open item", "elementor"),
|
|
3665
3709
|
...triggerProps,
|
|
3666
3710
|
onClick,
|
|
3667
|
-
startIcon: /* @__PURE__ */
|
|
3668
|
-
actions: /* @__PURE__ */
|
|
3711
|
+
startIcon: /* @__PURE__ */ React59.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React59.createElement(Icon, { value })),
|
|
3712
|
+
actions: /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), /* @__PURE__ */ React59.createElement(
|
|
3669
3713
|
SlotChildren,
|
|
3670
3714
|
{
|
|
3671
3715
|
whitelist: [DuplicateItemAction, DisableItemAction, RemoveItemAction],
|
|
@@ -3679,10 +3723,10 @@ var Item = ({
|
|
|
3679
3723
|
};
|
|
3680
3724
|
|
|
3681
3725
|
// src/components/unstable-repeater/unstable-repeater.tsx
|
|
3682
|
-
import * as
|
|
3726
|
+
import * as React61 from "react";
|
|
3683
3727
|
|
|
3684
3728
|
// src/components/unstable-repeater/items/edit-item-popover.tsx
|
|
3685
|
-
import * as
|
|
3729
|
+
import * as React60 from "react";
|
|
3686
3730
|
import { bindPopover as bindPopover6, Box as Box9, Popover as Popover6 } from "@elementor/ui";
|
|
3687
3731
|
var EditItemPopover = ({ children }) => {
|
|
3688
3732
|
const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef, items: items2 } = useRepeaterContext();
|
|
@@ -3696,7 +3740,7 @@ var EditItemPopover = ({ children }) => {
|
|
|
3696
3740
|
setRowRef(null);
|
|
3697
3741
|
setOpenItemIndex(EMPTY_OPEN_ITEM2);
|
|
3698
3742
|
};
|
|
3699
|
-
return /* @__PURE__ */
|
|
3743
|
+
return /* @__PURE__ */ React60.createElement(
|
|
3700
3744
|
Popover6,
|
|
3701
3745
|
{
|
|
3702
3746
|
disablePortal: true,
|
|
@@ -3710,7 +3754,7 @@ var EditItemPopover = ({ children }) => {
|
|
|
3710
3754
|
anchorEl: rowRef,
|
|
3711
3755
|
onClose
|
|
3712
3756
|
},
|
|
3713
|
-
/* @__PURE__ */
|
|
3757
|
+
/* @__PURE__ */ React60.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React60.createElement(Box9, null, React60.isValidElement(children) && React60.cloneElement(children, { bind, index: openItemIndex })))
|
|
3714
3758
|
);
|
|
3715
3759
|
};
|
|
3716
3760
|
|
|
@@ -3720,7 +3764,7 @@ var UnstableRepeater = ({
|
|
|
3720
3764
|
initial,
|
|
3721
3765
|
propTypeUtil
|
|
3722
3766
|
}) => {
|
|
3723
|
-
return /* @__PURE__ */
|
|
3767
|
+
return /* @__PURE__ */ React61.createElement(SectionContent, null, /* @__PURE__ */ React61.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React61.createElement(SlotChildren, { whitelist: [Header, ItemsContainer, EditItemPopover], sorted: true }, children)));
|
|
3724
3768
|
};
|
|
3725
3769
|
|
|
3726
3770
|
// src/env.ts
|
|
@@ -3728,7 +3772,7 @@ import { parseEnv } from "@elementor/env";
|
|
|
3728
3772
|
var { env } = parseEnv("@elementor/editor-controls");
|
|
3729
3773
|
|
|
3730
3774
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
3731
|
-
import * as
|
|
3775
|
+
import * as React62 from "react";
|
|
3732
3776
|
import {
|
|
3733
3777
|
backgroundGradientOverlayPropTypeUtil,
|
|
3734
3778
|
colorPropTypeUtil as colorPropTypeUtil2,
|
|
@@ -3775,7 +3819,7 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
3775
3819
|
positions: positions?.value.split(" ")
|
|
3776
3820
|
};
|
|
3777
3821
|
};
|
|
3778
|
-
return /* @__PURE__ */
|
|
3822
|
+
return /* @__PURE__ */ React62.createElement(ControlActions, null, /* @__PURE__ */ React62.createElement(
|
|
3779
3823
|
UnstableGradientBox,
|
|
3780
3824
|
{
|
|
3781
3825
|
sx: { width: "auto", padding: 1.5 },
|
|
@@ -3800,47 +3844,47 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
|
|
|
3800
3844
|
});
|
|
3801
3845
|
|
|
3802
3846
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
3803
|
-
import * as
|
|
3847
|
+
import * as React63 from "react";
|
|
3804
3848
|
import { PinIcon, PinnedOffIcon } from "@elementor/icons";
|
|
3805
|
-
import { Grid as
|
|
3806
|
-
import { __ as
|
|
3849
|
+
import { Grid as Grid14 } from "@elementor/ui";
|
|
3850
|
+
import { __ as __27 } from "@wordpress/i18n";
|
|
3807
3851
|
var attachmentControlOptions = [
|
|
3808
3852
|
{
|
|
3809
3853
|
value: "fixed",
|
|
3810
|
-
label:
|
|
3811
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3854
|
+
label: __27("Fixed", "elementor"),
|
|
3855
|
+
renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(PinIcon, { fontSize: size }),
|
|
3812
3856
|
showTooltip: true
|
|
3813
3857
|
},
|
|
3814
3858
|
{
|
|
3815
3859
|
value: "scroll",
|
|
3816
|
-
label:
|
|
3817
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3860
|
+
label: __27("Scroll", "elementor"),
|
|
3861
|
+
renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(PinnedOffIcon, { fontSize: size }),
|
|
3818
3862
|
showTooltip: true
|
|
3819
3863
|
}
|
|
3820
3864
|
];
|
|
3821
3865
|
var BackgroundImageOverlayAttachment = () => {
|
|
3822
|
-
return /* @__PURE__ */
|
|
3866
|
+
return /* @__PURE__ */ React63.createElement(PopoverGridContainer, null, /* @__PURE__ */ React63.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlFormLabel, null, __27("Attachment", "elementor"))), /* @__PURE__ */ React63.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React63.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
3823
3867
|
};
|
|
3824
3868
|
|
|
3825
3869
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
3826
|
-
import * as
|
|
3870
|
+
import * as React64 from "react";
|
|
3827
3871
|
import { useRef as useRef12 } from "react";
|
|
3828
3872
|
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
|
|
3829
3873
|
import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
|
|
3830
3874
|
import { LetterXIcon, LetterYIcon } from "@elementor/icons";
|
|
3831
|
-
import { Grid as
|
|
3832
|
-
import { __ as
|
|
3875
|
+
import { Grid as Grid15, Select as Select3 } from "@elementor/ui";
|
|
3876
|
+
import { __ as __28 } from "@wordpress/i18n";
|
|
3833
3877
|
var backgroundPositionOptions = [
|
|
3834
|
-
{ label:
|
|
3835
|
-
{ label:
|
|
3836
|
-
{ label:
|
|
3837
|
-
{ label:
|
|
3838
|
-
{ label:
|
|
3839
|
-
{ label:
|
|
3840
|
-
{ label:
|
|
3841
|
-
{ label:
|
|
3842
|
-
{ label:
|
|
3843
|
-
{ label:
|
|
3878
|
+
{ label: __28("Center center", "elementor"), value: "center center" },
|
|
3879
|
+
{ label: __28("Center left", "elementor"), value: "center left" },
|
|
3880
|
+
{ label: __28("Center right", "elementor"), value: "center right" },
|
|
3881
|
+
{ label: __28("Top center", "elementor"), value: "top center" },
|
|
3882
|
+
{ label: __28("Top left", "elementor"), value: "top left" },
|
|
3883
|
+
{ label: __28("Top right", "elementor"), value: "top right" },
|
|
3884
|
+
{ label: __28("Bottom center", "elementor"), value: "bottom center" },
|
|
3885
|
+
{ label: __28("Bottom left", "elementor"), value: "bottom left" },
|
|
3886
|
+
{ label: __28("Bottom right", "elementor"), value: "bottom right" },
|
|
3887
|
+
{ label: __28("Custom", "elementor"), value: "custom" }
|
|
3844
3888
|
];
|
|
3845
3889
|
var BackgroundImageOverlayPosition = () => {
|
|
3846
3890
|
const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
|
|
@@ -3855,7 +3899,7 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
3855
3899
|
stringPropContext.setValue(value);
|
|
3856
3900
|
}
|
|
3857
3901
|
};
|
|
3858
|
-
return /* @__PURE__ */
|
|
3902
|
+
return /* @__PURE__ */ React64.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React64.createElement(PopoverGridContainer, null, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(ControlFormLabel, null, __28("Position", "elementor"))), /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React64.createElement(
|
|
3859
3903
|
Select3,
|
|
3860
3904
|
{
|
|
3861
3905
|
fullWidth: true,
|
|
@@ -3864,59 +3908,59 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
3864
3908
|
disabled: stringPropContext.disabled,
|
|
3865
3909
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
3866
3910
|
},
|
|
3867
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
3868
|
-
)))), isCustom ? /* @__PURE__ */
|
|
3911
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React64.createElement(MenuListItem4, { key: value, value: value ?? "" }, label))
|
|
3912
|
+
)))), isCustom ? /* @__PURE__ */ React64.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React64.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React64.createElement(
|
|
3869
3913
|
SizeControl,
|
|
3870
3914
|
{
|
|
3871
|
-
startIcon: /* @__PURE__ */
|
|
3915
|
+
startIcon: /* @__PURE__ */ React64.createElement(LetterXIcon, { fontSize: "tiny" }),
|
|
3872
3916
|
anchorRef: rowRef
|
|
3873
3917
|
}
|
|
3874
|
-
))), /* @__PURE__ */
|
|
3918
|
+
))), /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React64.createElement(
|
|
3875
3919
|
SizeControl,
|
|
3876
3920
|
{
|
|
3877
|
-
startIcon: /* @__PURE__ */
|
|
3921
|
+
startIcon: /* @__PURE__ */ React64.createElement(LetterYIcon, { fontSize: "tiny" }),
|
|
3878
3922
|
anchorRef: rowRef
|
|
3879
3923
|
}
|
|
3880
3924
|
)))))) : null);
|
|
3881
3925
|
};
|
|
3882
3926
|
|
|
3883
3927
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
3884
|
-
import * as
|
|
3928
|
+
import * as React65 from "react";
|
|
3885
3929
|
import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
|
|
3886
|
-
import { Grid as
|
|
3887
|
-
import { __ as
|
|
3930
|
+
import { Grid as Grid16 } from "@elementor/ui";
|
|
3931
|
+
import { __ as __29 } from "@wordpress/i18n";
|
|
3888
3932
|
var repeatControlOptions = [
|
|
3889
3933
|
{
|
|
3890
3934
|
value: "repeat",
|
|
3891
|
-
label:
|
|
3892
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3935
|
+
label: __29("Repeat", "elementor"),
|
|
3936
|
+
renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(GridDotsIcon, { fontSize: size }),
|
|
3893
3937
|
showTooltip: true
|
|
3894
3938
|
},
|
|
3895
3939
|
{
|
|
3896
3940
|
value: "repeat-x",
|
|
3897
|
-
label:
|
|
3898
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3941
|
+
label: __29("Repeat-x", "elementor"),
|
|
3942
|
+
renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(DotsHorizontalIcon, { fontSize: size }),
|
|
3899
3943
|
showTooltip: true
|
|
3900
3944
|
},
|
|
3901
3945
|
{
|
|
3902
3946
|
value: "repeat-y",
|
|
3903
|
-
label:
|
|
3904
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3947
|
+
label: __29("Repeat-y", "elementor"),
|
|
3948
|
+
renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(DotsVerticalIcon, { fontSize: size }),
|
|
3905
3949
|
showTooltip: true
|
|
3906
3950
|
},
|
|
3907
3951
|
{
|
|
3908
3952
|
value: "no-repeat",
|
|
3909
|
-
label:
|
|
3910
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3953
|
+
label: __29("No-repeat", "elementor"),
|
|
3954
|
+
renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(XIcon4, { fontSize: size }),
|
|
3911
3955
|
showTooltip: true
|
|
3912
3956
|
}
|
|
3913
3957
|
];
|
|
3914
3958
|
var BackgroundImageOverlayRepeat = () => {
|
|
3915
|
-
return /* @__PURE__ */
|
|
3959
|
+
return /* @__PURE__ */ React65.createElement(PopoverGridContainer, null, /* @__PURE__ */ React65.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, __29("Repeat", "elementor"))), /* @__PURE__ */ React65.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React65.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
3916
3960
|
};
|
|
3917
3961
|
|
|
3918
3962
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
3919
|
-
import * as
|
|
3963
|
+
import * as React66 from "react";
|
|
3920
3964
|
import { useRef as useRef13 } from "react";
|
|
3921
3965
|
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
|
|
3922
3966
|
import {
|
|
@@ -3927,31 +3971,31 @@ import {
|
|
|
3927
3971
|
LetterAIcon,
|
|
3928
3972
|
PencilIcon
|
|
3929
3973
|
} from "@elementor/icons";
|
|
3930
|
-
import { Grid as
|
|
3931
|
-
import { __ as
|
|
3974
|
+
import { Grid as Grid17 } from "@elementor/ui";
|
|
3975
|
+
import { __ as __30 } from "@wordpress/i18n";
|
|
3932
3976
|
var sizeControlOptions = [
|
|
3933
3977
|
{
|
|
3934
3978
|
value: "auto",
|
|
3935
|
-
label:
|
|
3936
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3979
|
+
label: __30("Auto", "elementor"),
|
|
3980
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(LetterAIcon, { fontSize: size }),
|
|
3937
3981
|
showTooltip: true
|
|
3938
3982
|
},
|
|
3939
3983
|
{
|
|
3940
3984
|
value: "cover",
|
|
3941
|
-
label:
|
|
3942
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3985
|
+
label: __30("Cover", "elementor"),
|
|
3986
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(ArrowsMaximizeIcon, { fontSize: size }),
|
|
3943
3987
|
showTooltip: true
|
|
3944
3988
|
},
|
|
3945
3989
|
{
|
|
3946
3990
|
value: "contain",
|
|
3947
|
-
label:
|
|
3948
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3991
|
+
label: __30("Contain", "elementor"),
|
|
3992
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(ArrowBarBothIcon, { fontSize: size }),
|
|
3949
3993
|
showTooltip: true
|
|
3950
3994
|
},
|
|
3951
3995
|
{
|
|
3952
3996
|
value: "custom",
|
|
3953
|
-
label:
|
|
3954
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3997
|
+
label: __30("Custom", "elementor"),
|
|
3998
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(PencilIcon, { fontSize: size }),
|
|
3955
3999
|
showTooltip: true
|
|
3956
4000
|
}
|
|
3957
4001
|
];
|
|
@@ -3967,7 +4011,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
3967
4011
|
stringPropContext.setValue(size);
|
|
3968
4012
|
}
|
|
3969
4013
|
};
|
|
3970
|
-
return /* @__PURE__ */
|
|
4014
|
+
return /* @__PURE__ */ React66.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React66.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlFormLabel, null, __30("Size", "elementor"))), /* @__PURE__ */ React66.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React66.createElement(
|
|
3971
4015
|
ControlToggleButtonGroup,
|
|
3972
4016
|
{
|
|
3973
4017
|
exclusive: true,
|
|
@@ -3976,17 +4020,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
3976
4020
|
disabled: stringPropContext.disabled,
|
|
3977
4021
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
3978
4022
|
}
|
|
3979
|
-
)))), isCustom ? /* @__PURE__ */
|
|
4023
|
+
)))), isCustom ? /* @__PURE__ */ React66.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React66.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React66.createElement(
|
|
3980
4024
|
SizeControl,
|
|
3981
4025
|
{
|
|
3982
|
-
startIcon: /* @__PURE__ */
|
|
4026
|
+
startIcon: /* @__PURE__ */ React66.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
|
|
3983
4027
|
extendedOptions: ["auto"],
|
|
3984
4028
|
anchorRef: rowRef
|
|
3985
4029
|
}
|
|
3986
|
-
))), /* @__PURE__ */
|
|
4030
|
+
))), /* @__PURE__ */ React66.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React66.createElement(
|
|
3987
4031
|
SizeControl,
|
|
3988
4032
|
{
|
|
3989
|
-
startIcon: /* @__PURE__ */
|
|
4033
|
+
startIcon: /* @__PURE__ */ React66.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
|
|
3990
4034
|
extendedOptions: ["auto"],
|
|
3991
4035
|
anchorRef: rowRef
|
|
3992
4036
|
}
|
|
@@ -4087,22 +4131,22 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
4087
4131
|
}
|
|
4088
4132
|
});
|
|
4089
4133
|
var backgroundResolutionOptions = [
|
|
4090
|
-
{ label:
|
|
4091
|
-
{ label:
|
|
4092
|
-
{ label:
|
|
4093
|
-
{ label:
|
|
4134
|
+
{ label: __31("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
4135
|
+
{ label: __31("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
4136
|
+
{ label: __31("Large 1024 x 1024", "elementor"), value: "large" },
|
|
4137
|
+
{ label: __31("Full", "elementor"), value: "full" }
|
|
4094
4138
|
];
|
|
4095
4139
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
4096
4140
|
const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
|
|
4097
|
-
return /* @__PURE__ */
|
|
4141
|
+
return /* @__PURE__ */ React67.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React67.createElement(
|
|
4098
4142
|
UnstableRepeater,
|
|
4099
4143
|
{
|
|
4100
4144
|
initial: getInitialBackgroundOverlay(),
|
|
4101
4145
|
propTypeUtil: backgroundOverlayPropTypeUtil
|
|
4102
4146
|
},
|
|
4103
|
-
/* @__PURE__ */
|
|
4104
|
-
/* @__PURE__ */
|
|
4105
|
-
/* @__PURE__ */
|
|
4147
|
+
/* @__PURE__ */ React67.createElement(Header, { label: __31("Overlay", "elementor") }, /* @__PURE__ */ React67.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
4148
|
+
/* @__PURE__ */ React67.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React67.createElement(Item, { Icon: ItemIcon3, Label: ItemLabel3 }) }, /* @__PURE__ */ React67.createElement(DuplicateItemAction, null), /* @__PURE__ */ React67.createElement(DisableItemAction, null), /* @__PURE__ */ React67.createElement(RemoveItemAction, null)),
|
|
4149
|
+
/* @__PURE__ */ React67.createElement(EditItemPopover, null, /* @__PURE__ */ React67.createElement(ItemContent3, null))
|
|
4106
4150
|
));
|
|
4107
4151
|
});
|
|
4108
4152
|
var ItemContent3 = () => {
|
|
@@ -4112,27 +4156,27 @@ var ItemContent3 = () => {
|
|
|
4112
4156
|
gradient: initialBackgroundGradientOverlay.value
|
|
4113
4157
|
});
|
|
4114
4158
|
const { rowRef } = useRepeaterContext();
|
|
4115
|
-
return /* @__PURE__ */
|
|
4159
|
+
return /* @__PURE__ */ React67.createElement(Box10, { sx: { width: "100%" } }, /* @__PURE__ */ React67.createElement(Box10, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React67.createElement(
|
|
4116
4160
|
Tabs,
|
|
4117
4161
|
{
|
|
4118
4162
|
size: "small",
|
|
4119
4163
|
variant: "fullWidth",
|
|
4120
4164
|
...getTabsProps(),
|
|
4121
|
-
"aria-label":
|
|
4165
|
+
"aria-label": __31("Background Overlay", "elementor")
|
|
4122
4166
|
},
|
|
4123
|
-
/* @__PURE__ */
|
|
4124
|
-
/* @__PURE__ */
|
|
4125
|
-
/* @__PURE__ */
|
|
4126
|
-
)), /* @__PURE__ */
|
|
4167
|
+
/* @__PURE__ */ React67.createElement(Tab, { label: __31("Image", "elementor"), ...getTabProps("image") }),
|
|
4168
|
+
/* @__PURE__ */ React67.createElement(Tab, { label: __31("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
4169
|
+
/* @__PURE__ */ React67.createElement(Tab, { label: __31("Color", "elementor"), ...getTabProps("color") })
|
|
4170
|
+
)), /* @__PURE__ */ React67.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React67.createElement(PopoverContent, null, /* @__PURE__ */ React67.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React67.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React67.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React67.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React67.createElement(PopoverContent, null, /* @__PURE__ */ React67.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
4127
4171
|
};
|
|
4128
4172
|
var ItemIcon3 = ({ value }) => {
|
|
4129
4173
|
switch (value.$$type) {
|
|
4130
4174
|
case "background-image-overlay":
|
|
4131
|
-
return /* @__PURE__ */
|
|
4175
|
+
return /* @__PURE__ */ React67.createElement(ItemIconImage, { value });
|
|
4132
4176
|
case "background-color-overlay":
|
|
4133
|
-
return /* @__PURE__ */
|
|
4177
|
+
return /* @__PURE__ */ React67.createElement(ItemIconColor, { value });
|
|
4134
4178
|
case "background-gradient-overlay":
|
|
4135
|
-
return /* @__PURE__ */
|
|
4179
|
+
return /* @__PURE__ */ React67.createElement(ItemIconGradient, { value });
|
|
4136
4180
|
default:
|
|
4137
4181
|
return null;
|
|
4138
4182
|
}
|
|
@@ -4145,11 +4189,11 @@ var extractColorFrom = (prop) => {
|
|
|
4145
4189
|
};
|
|
4146
4190
|
var ItemIconColor = ({ value: prop }) => {
|
|
4147
4191
|
const color = extractColorFrom(prop);
|
|
4148
|
-
return /* @__PURE__ */
|
|
4192
|
+
return /* @__PURE__ */ React67.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
|
|
4149
4193
|
};
|
|
4150
4194
|
var ItemIconImage = ({ value }) => {
|
|
4151
4195
|
const { imageUrl } = useImage(value);
|
|
4152
|
-
return /* @__PURE__ */
|
|
4196
|
+
return /* @__PURE__ */ React67.createElement(
|
|
4153
4197
|
CardMedia3,
|
|
4154
4198
|
{
|
|
4155
4199
|
image: imageUrl,
|
|
@@ -4164,41 +4208,41 @@ var ItemIconImage = ({ value }) => {
|
|
|
4164
4208
|
};
|
|
4165
4209
|
var ItemIconGradient = ({ value }) => {
|
|
4166
4210
|
const gradient = getGradientValue(value);
|
|
4167
|
-
return /* @__PURE__ */
|
|
4211
|
+
return /* @__PURE__ */ React67.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
4168
4212
|
};
|
|
4169
4213
|
var ItemLabel3 = ({ value }) => {
|
|
4170
4214
|
switch (value.$$type) {
|
|
4171
4215
|
case "background-image-overlay":
|
|
4172
|
-
return /* @__PURE__ */
|
|
4216
|
+
return /* @__PURE__ */ React67.createElement(ItemLabelImage, { value });
|
|
4173
4217
|
case "background-color-overlay":
|
|
4174
|
-
return /* @__PURE__ */
|
|
4218
|
+
return /* @__PURE__ */ React67.createElement(ItemLabelColor, { value });
|
|
4175
4219
|
case "background-gradient-overlay":
|
|
4176
|
-
return /* @__PURE__ */
|
|
4220
|
+
return /* @__PURE__ */ React67.createElement(ItemLabelGradient, { value });
|
|
4177
4221
|
default:
|
|
4178
4222
|
return null;
|
|
4179
4223
|
}
|
|
4180
4224
|
};
|
|
4181
4225
|
var ItemLabelColor = ({ value: prop }) => {
|
|
4182
4226
|
const color = extractColorFrom(prop);
|
|
4183
|
-
return /* @__PURE__ */
|
|
4227
|
+
return /* @__PURE__ */ React67.createElement("span", null, color);
|
|
4184
4228
|
};
|
|
4185
4229
|
var ItemLabelImage = ({ value }) => {
|
|
4186
4230
|
const { imageTitle } = useImage(value);
|
|
4187
|
-
return /* @__PURE__ */
|
|
4231
|
+
return /* @__PURE__ */ React67.createElement("span", null, imageTitle);
|
|
4188
4232
|
};
|
|
4189
4233
|
var ItemLabelGradient = ({ value }) => {
|
|
4190
4234
|
if (value.value.type.value === "linear") {
|
|
4191
|
-
return /* @__PURE__ */
|
|
4235
|
+
return /* @__PURE__ */ React67.createElement("span", null, __31("Linear Gradient", "elementor"));
|
|
4192
4236
|
}
|
|
4193
|
-
return /* @__PURE__ */
|
|
4237
|
+
return /* @__PURE__ */ React67.createElement("span", null, __31("Radial Gradient", "elementor"));
|
|
4194
4238
|
};
|
|
4195
4239
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
4196
4240
|
const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
|
|
4197
|
-
return /* @__PURE__ */
|
|
4241
|
+
return /* @__PURE__ */ React67.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React67.createElement(ColorControl, { anchorEl })));
|
|
4198
4242
|
};
|
|
4199
4243
|
var ImageOverlayContent = () => {
|
|
4200
4244
|
const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
|
|
4201
|
-
return /* @__PURE__ */
|
|
4245
|
+
return /* @__PURE__ */ React67.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React67.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React67.createElement(BackgroundImageOverlayAttachment, null)));
|
|
4202
4246
|
};
|
|
4203
4247
|
var StyledUnstableColorIndicator = styled6(UnstableColorIndicator2)(({ theme }) => ({
|
|
4204
4248
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
@@ -4236,12 +4280,12 @@ var getGradientValue = (value) => {
|
|
|
4236
4280
|
// src/controls/background-control/background-control.tsx
|
|
4237
4281
|
var BackgroundControl = createControl(() => {
|
|
4238
4282
|
const propContext = useBoundProp(backgroundPropTypeUtil);
|
|
4239
|
-
const colorLabel =
|
|
4240
|
-
return /* @__PURE__ */
|
|
4283
|
+
const colorLabel = __32("Color", "elementor");
|
|
4284
|
+
return /* @__PURE__ */ React68.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React68.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React68.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React68.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(ColorControl, null)))));
|
|
4241
4285
|
});
|
|
4242
4286
|
|
|
4243
4287
|
// src/controls/repeatable-control.tsx
|
|
4244
|
-
import * as
|
|
4288
|
+
import * as React69 from "react";
|
|
4245
4289
|
import { useMemo as useMemo5 } from "react";
|
|
4246
4290
|
import { createArrayPropUtils } from "@elementor/editor-props";
|
|
4247
4291
|
import { Box as Box11 } from "@elementor/ui";
|
|
@@ -4287,7 +4331,7 @@ var RepeatableControl = createControl(
|
|
|
4287
4331
|
[childControlConfig, placeholder, patternLabel]
|
|
4288
4332
|
);
|
|
4289
4333
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
4290
|
-
return /* @__PURE__ */
|
|
4334
|
+
return /* @__PURE__ */ React69.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React69.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React69.createElement(
|
|
4291
4335
|
Repeater,
|
|
4292
4336
|
{
|
|
4293
4337
|
openOnAdd: true,
|
|
@@ -4308,12 +4352,12 @@ var RepeatableControl = createControl(
|
|
|
4308
4352
|
}
|
|
4309
4353
|
);
|
|
4310
4354
|
var ItemContent4 = ({ bind }) => {
|
|
4311
|
-
return /* @__PURE__ */
|
|
4355
|
+
return /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React69.createElement(Content3, null));
|
|
4312
4356
|
};
|
|
4313
|
-
var ItemIcon4 = () => /* @__PURE__ */
|
|
4357
|
+
var ItemIcon4 = () => /* @__PURE__ */ React69.createElement(React69.Fragment, null);
|
|
4314
4358
|
var Content3 = () => {
|
|
4315
4359
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
4316
|
-
return /* @__PURE__ */
|
|
4360
|
+
return /* @__PURE__ */ React69.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React69.createElement(PopoverGridContainer, null, /* @__PURE__ */ React69.createElement(ChildControl, { ...props })));
|
|
4317
4361
|
};
|
|
4318
4362
|
var interpolate = (template, data) => {
|
|
4319
4363
|
if (!data) {
|
|
@@ -4375,7 +4419,7 @@ var ItemLabel4 = ({ value }) => {
|
|
|
4375
4419
|
const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
|
|
4376
4420
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
4377
4421
|
const color = showPlaceholder ? "text.tertiary" : "text.primary";
|
|
4378
|
-
return /* @__PURE__ */
|
|
4422
|
+
return /* @__PURE__ */ React69.createElement(Box11, { component: "span", color }, label);
|
|
4379
4423
|
};
|
|
4380
4424
|
var getAllProperties = (pattern) => {
|
|
4381
4425
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -4383,15 +4427,15 @@ var getAllProperties = (pattern) => {
|
|
|
4383
4427
|
};
|
|
4384
4428
|
|
|
4385
4429
|
// src/controls/key-value-control.tsx
|
|
4386
|
-
import * as
|
|
4430
|
+
import * as React70 from "react";
|
|
4387
4431
|
import { useMemo as useMemo6, useState as useState13 } from "react";
|
|
4388
4432
|
import {
|
|
4389
4433
|
isTransformable,
|
|
4390
4434
|
keyValuePropTypeUtil,
|
|
4391
4435
|
stringPropTypeUtil as stringPropTypeUtil11
|
|
4392
4436
|
} from "@elementor/editor-props";
|
|
4393
|
-
import { FormHelperText, FormLabel as FormLabel3, Grid as
|
|
4394
|
-
import { __ as
|
|
4437
|
+
import { FormHelperText, FormLabel as FormLabel3, Grid as Grid19 } from "@elementor/ui";
|
|
4438
|
+
import { __ as __33 } from "@wordpress/i18n";
|
|
4395
4439
|
var KeyValueControl = createControl((props = {}) => {
|
|
4396
4440
|
const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
|
|
4397
4441
|
const [keyError, setKeyError] = useState13("");
|
|
@@ -4400,13 +4444,13 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4400
4444
|
key: value?.key?.value || "",
|
|
4401
4445
|
value: value?.value?.value || ""
|
|
4402
4446
|
});
|
|
4403
|
-
const keyLabel = props.keyName ||
|
|
4404
|
-
const valueLabel = props.valueName ||
|
|
4447
|
+
const keyLabel = props.keyName || __33("Key", "elementor");
|
|
4448
|
+
const valueLabel = props.valueName || __33("Value", "elementor");
|
|
4405
4449
|
const [keyRegex, valueRegex, errMsg] = useMemo6(
|
|
4406
4450
|
() => [
|
|
4407
4451
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
4408
4452
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
4409
|
-
props.validationErrorMessage ||
|
|
4453
|
+
props.validationErrorMessage || __33("Invalid Format", "elementor")
|
|
4410
4454
|
],
|
|
4411
4455
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
4412
4456
|
);
|
|
@@ -4455,34 +4499,34 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4455
4499
|
});
|
|
4456
4500
|
}
|
|
4457
4501
|
};
|
|
4458
|
-
return /* @__PURE__ */
|
|
4502
|
+
return /* @__PURE__ */ React70.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React70.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React70.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React70.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React70.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError })), !!keyError && /* @__PURE__ */ React70.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React70.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React70.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React70.createElement(
|
|
4459
4503
|
TextControl,
|
|
4460
4504
|
{
|
|
4461
4505
|
inputValue: sessionState.value,
|
|
4462
4506
|
error: !!valueError,
|
|
4463
4507
|
inputDisabled: !!keyError
|
|
4464
4508
|
}
|
|
4465
|
-
)), !!valueError && /* @__PURE__ */
|
|
4509
|
+
)), !!valueError && /* @__PURE__ */ React70.createElement(FormHelperText, { error: true }, valueError))));
|
|
4466
4510
|
});
|
|
4467
4511
|
|
|
4468
4512
|
// src/controls/position-control.tsx
|
|
4469
|
-
import * as
|
|
4513
|
+
import * as React71 from "react";
|
|
4470
4514
|
import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
|
|
4471
4515
|
import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
|
|
4472
4516
|
import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
|
|
4473
|
-
import { Grid as
|
|
4474
|
-
import { __ as
|
|
4517
|
+
import { Grid as Grid20, Select as Select4 } from "@elementor/ui";
|
|
4518
|
+
import { __ as __34 } from "@wordpress/i18n";
|
|
4475
4519
|
var positionOptions = [
|
|
4476
|
-
{ label:
|
|
4477
|
-
{ label:
|
|
4478
|
-
{ label:
|
|
4479
|
-
{ label:
|
|
4480
|
-
{ label:
|
|
4481
|
-
{ label:
|
|
4482
|
-
{ label:
|
|
4483
|
-
{ label:
|
|
4484
|
-
{ label:
|
|
4485
|
-
{ label:
|
|
4520
|
+
{ label: __34("Center center", "elementor"), value: "center center" },
|
|
4521
|
+
{ label: __34("Center left", "elementor"), value: "center left" },
|
|
4522
|
+
{ label: __34("Center right", "elementor"), value: "center right" },
|
|
4523
|
+
{ label: __34("Top center", "elementor"), value: "top center" },
|
|
4524
|
+
{ label: __34("Top left", "elementor"), value: "top left" },
|
|
4525
|
+
{ label: __34("Top right", "elementor"), value: "top right" },
|
|
4526
|
+
{ label: __34("Bottom center", "elementor"), value: "bottom center" },
|
|
4527
|
+
{ label: __34("Bottom left", "elementor"), value: "bottom left" },
|
|
4528
|
+
{ label: __34("Bottom right", "elementor"), value: "bottom right" },
|
|
4529
|
+
{ label: __34("Custom", "elementor"), value: "custom" }
|
|
4486
4530
|
];
|
|
4487
4531
|
var PositionControl = () => {
|
|
4488
4532
|
const positionContext = useBoundProp(positionPropTypeUtil);
|
|
@@ -4496,7 +4540,7 @@ var PositionControl = () => {
|
|
|
4496
4540
|
stringPropContext.setValue(value);
|
|
4497
4541
|
}
|
|
4498
4542
|
};
|
|
4499
|
-
return /* @__PURE__ */
|
|
4543
|
+
return /* @__PURE__ */ React71.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React71.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React71.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(ControlFormLabel, null, __34("Object position", "elementor"))), /* @__PURE__ */ React71.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React71.createElement(
|
|
4500
4544
|
Select4,
|
|
4501
4545
|
{
|
|
4502
4546
|
size: "tiny",
|
|
@@ -4505,16 +4549,16 @@ var PositionControl = () => {
|
|
|
4505
4549
|
onChange: handlePositionChange,
|
|
4506
4550
|
fullWidth: true
|
|
4507
4551
|
},
|
|
4508
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
4509
|
-
)))), isCustom && /* @__PURE__ */
|
|
4552
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React71.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
|
|
4553
|
+
)))), isCustom && /* @__PURE__ */ React71.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React71.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React71.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React71.createElement(SizeControl, { startIcon: /* @__PURE__ */ React71.createElement(LetterXIcon2, { fontSize: "tiny" }) }))), /* @__PURE__ */ React71.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React71.createElement(SizeControl, { startIcon: /* @__PURE__ */ React71.createElement(LetterYIcon2, { fontSize: "tiny" }) })))))));
|
|
4510
4554
|
};
|
|
4511
4555
|
|
|
4512
4556
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
4513
|
-
import * as
|
|
4557
|
+
import * as React81 from "react";
|
|
4514
4558
|
import { transformPropTypeUtil } from "@elementor/editor-props";
|
|
4515
4559
|
import { InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
|
|
4516
4560
|
import { Typography as Typography6 } from "@elementor/ui";
|
|
4517
|
-
import { __ as
|
|
4561
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
4518
4562
|
|
|
4519
4563
|
// src/controls/transform-control/initial-values.ts
|
|
4520
4564
|
import {
|
|
@@ -4568,143 +4612,143 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
|
|
|
4568
4612
|
});
|
|
4569
4613
|
|
|
4570
4614
|
// src/controls/transform-control/transform-content.tsx
|
|
4571
|
-
import * as
|
|
4615
|
+
import * as React78 from "react";
|
|
4572
4616
|
import { Box as Box12, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
|
|
4573
|
-
import { __ as
|
|
4617
|
+
import { __ as __39 } from "@wordpress/i18n";
|
|
4574
4618
|
|
|
4575
4619
|
// src/controls/transform-control/functions/move.tsx
|
|
4576
|
-
import * as
|
|
4620
|
+
import * as React73 from "react";
|
|
4577
4621
|
import { useRef as useRef15 } from "react";
|
|
4578
4622
|
import { moveTransformPropTypeUtil } from "@elementor/editor-props";
|
|
4579
4623
|
import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
|
|
4580
|
-
import { Grid as
|
|
4581
|
-
import { __ as
|
|
4624
|
+
import { Grid as Grid22 } from "@elementor/ui";
|
|
4625
|
+
import { __ as __35 } from "@wordpress/i18n";
|
|
4582
4626
|
|
|
4583
4627
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
4584
|
-
import * as
|
|
4585
|
-
import { Grid as
|
|
4628
|
+
import * as React72 from "react";
|
|
4629
|
+
import { Grid as Grid21 } from "@elementor/ui";
|
|
4586
4630
|
var AxisRow = ({ label, bindValue, startIcon, anchorRef, units: units2 }) => {
|
|
4587
|
-
return /* @__PURE__ */
|
|
4631
|
+
return /* @__PURE__ */ React72.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React72.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlLabel, null, label)), /* @__PURE__ */ React72.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React72.createElement(SizeControl, { anchorRef, startIcon, units: units2, variant: "angle" })))));
|
|
4588
4632
|
};
|
|
4589
4633
|
|
|
4590
4634
|
// src/controls/transform-control/functions/move.tsx
|
|
4591
4635
|
var moveAxisControls = [
|
|
4592
4636
|
{
|
|
4593
|
-
label:
|
|
4637
|
+
label: __35("Move X", "elementor"),
|
|
4594
4638
|
bindValue: "x",
|
|
4595
|
-
startIcon: /* @__PURE__ */
|
|
4639
|
+
startIcon: /* @__PURE__ */ React73.createElement(ArrowRightIcon, { fontSize: "tiny" })
|
|
4596
4640
|
},
|
|
4597
4641
|
{
|
|
4598
|
-
label:
|
|
4642
|
+
label: __35("Move Y", "elementor"),
|
|
4599
4643
|
bindValue: "y",
|
|
4600
|
-
startIcon: /* @__PURE__ */
|
|
4644
|
+
startIcon: /* @__PURE__ */ React73.createElement(ArrowDownSmallIcon, { fontSize: "tiny" })
|
|
4601
4645
|
},
|
|
4602
4646
|
{
|
|
4603
|
-
label:
|
|
4647
|
+
label: __35("Move Z", "elementor"),
|
|
4604
4648
|
bindValue: "z",
|
|
4605
|
-
startIcon: /* @__PURE__ */
|
|
4649
|
+
startIcon: /* @__PURE__ */ React73.createElement(ArrowDownLeftIcon, { fontSize: "tiny" })
|
|
4606
4650
|
}
|
|
4607
4651
|
];
|
|
4608
4652
|
var Move = () => {
|
|
4609
4653
|
const context = useBoundProp(moveTransformPropTypeUtil);
|
|
4610
4654
|
const rowRef = useRef15(null);
|
|
4611
|
-
return /* @__PURE__ */
|
|
4655
|
+
return /* @__PURE__ */ React73.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React73.createElement(PropProvider, { ...context }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control) => /* @__PURE__ */ React73.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
|
|
4612
4656
|
};
|
|
4613
4657
|
|
|
4614
4658
|
// src/controls/transform-control/functions/rotate.tsx
|
|
4615
|
-
import * as
|
|
4659
|
+
import * as React74 from "react";
|
|
4616
4660
|
import { useRef as useRef16 } from "react";
|
|
4617
4661
|
import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
4618
4662
|
import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
|
|
4619
|
-
import { Grid as
|
|
4620
|
-
import { __ as
|
|
4663
|
+
import { Grid as Grid23 } from "@elementor/ui";
|
|
4664
|
+
import { __ as __36 } from "@wordpress/i18n";
|
|
4621
4665
|
var rotateAxisControls = [
|
|
4622
4666
|
{
|
|
4623
|
-
label:
|
|
4667
|
+
label: __36("Rotate X", "elementor"),
|
|
4624
4668
|
bindValue: "x",
|
|
4625
|
-
startIcon: /* @__PURE__ */
|
|
4669
|
+
startIcon: /* @__PURE__ */ React74.createElement(Arrow360Icon, { fontSize: "tiny" })
|
|
4626
4670
|
},
|
|
4627
4671
|
{
|
|
4628
|
-
label:
|
|
4672
|
+
label: __36("Rotate Y", "elementor"),
|
|
4629
4673
|
bindValue: "y",
|
|
4630
|
-
startIcon: /* @__PURE__ */
|
|
4674
|
+
startIcon: /* @__PURE__ */ React74.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
4631
4675
|
},
|
|
4632
4676
|
{
|
|
4633
|
-
label:
|
|
4677
|
+
label: __36("Rotate Z", "elementor"),
|
|
4634
4678
|
bindValue: "z",
|
|
4635
|
-
startIcon: /* @__PURE__ */
|
|
4679
|
+
startIcon: /* @__PURE__ */ React74.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
|
|
4636
4680
|
}
|
|
4637
4681
|
];
|
|
4638
4682
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
4639
4683
|
var Rotate = () => {
|
|
4640
4684
|
const context = useBoundProp(rotateTransformPropTypeUtil2);
|
|
4641
4685
|
const rowRef = useRef16(null);
|
|
4642
|
-
return /* @__PURE__ */
|
|
4686
|
+
return /* @__PURE__ */ React74.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(PropProvider, { ...context }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control) => /* @__PURE__ */ React74.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef, units: rotateUnits })))));
|
|
4643
4687
|
};
|
|
4644
4688
|
|
|
4645
4689
|
// src/controls/transform-control/functions/scale.tsx
|
|
4646
|
-
import * as
|
|
4690
|
+
import * as React76 from "react";
|
|
4647
4691
|
import { useRef as useRef17 } from "react";
|
|
4648
4692
|
import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
4649
4693
|
import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
|
|
4650
|
-
import { Grid as
|
|
4651
|
-
import { __ as
|
|
4694
|
+
import { Grid as Grid25 } from "@elementor/ui";
|
|
4695
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
4652
4696
|
|
|
4653
4697
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
4654
|
-
import * as
|
|
4655
|
-
import { Grid as
|
|
4698
|
+
import * as React75 from "react";
|
|
4699
|
+
import { Grid as Grid24 } from "@elementor/ui";
|
|
4656
4700
|
var ScaleAxisRow = ({ label, bindValue, startIcon, anchorRef }) => {
|
|
4657
|
-
return /* @__PURE__ */
|
|
4701
|
+
return /* @__PURE__ */ React75.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React75.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, label)), /* @__PURE__ */ React75.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React75.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
4658
4702
|
};
|
|
4659
4703
|
|
|
4660
4704
|
// src/controls/transform-control/functions/scale.tsx
|
|
4661
4705
|
var scaleAxisControls = [
|
|
4662
4706
|
{
|
|
4663
|
-
label:
|
|
4707
|
+
label: __37("Scale X", "elementor"),
|
|
4664
4708
|
bindValue: "x",
|
|
4665
|
-
startIcon: /* @__PURE__ */
|
|
4709
|
+
startIcon: /* @__PURE__ */ React76.createElement(ArrowRightIcon2, { fontSize: "tiny" })
|
|
4666
4710
|
},
|
|
4667
4711
|
{
|
|
4668
|
-
label:
|
|
4712
|
+
label: __37("Scale Y", "elementor"),
|
|
4669
4713
|
bindValue: "y",
|
|
4670
|
-
startIcon: /* @__PURE__ */
|
|
4714
|
+
startIcon: /* @__PURE__ */ React76.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
|
|
4671
4715
|
},
|
|
4672
4716
|
{
|
|
4673
|
-
label:
|
|
4717
|
+
label: __37("Scale Z", "elementor"),
|
|
4674
4718
|
bindValue: "z",
|
|
4675
|
-
startIcon: /* @__PURE__ */
|
|
4719
|
+
startIcon: /* @__PURE__ */ React76.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
|
|
4676
4720
|
}
|
|
4677
4721
|
];
|
|
4678
4722
|
var Scale = () => {
|
|
4679
4723
|
const context = useBoundProp(scaleTransformPropTypeUtil2);
|
|
4680
4724
|
const rowRef = useRef17(null);
|
|
4681
|
-
return /* @__PURE__ */
|
|
4725
|
+
return /* @__PURE__ */ React76.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React76.createElement(PropProvider, { ...context }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control) => /* @__PURE__ */ React76.createElement(ScaleAxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
|
|
4682
4726
|
};
|
|
4683
4727
|
|
|
4684
4728
|
// src/controls/transform-control/functions/skew.tsx
|
|
4685
|
-
import * as
|
|
4729
|
+
import * as React77 from "react";
|
|
4686
4730
|
import { useRef as useRef18 } from "react";
|
|
4687
4731
|
import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
4688
4732
|
import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
|
|
4689
|
-
import { Grid as
|
|
4690
|
-
import { __ as
|
|
4733
|
+
import { Grid as Grid26 } from "@elementor/ui";
|
|
4734
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
4691
4735
|
var skewAxisControls = [
|
|
4692
4736
|
{
|
|
4693
|
-
label:
|
|
4737
|
+
label: __38("Skew X", "elementor"),
|
|
4694
4738
|
bindValue: "x",
|
|
4695
|
-
startIcon: /* @__PURE__ */
|
|
4739
|
+
startIcon: /* @__PURE__ */ React77.createElement(ArrowRightIcon3, { fontSize: "tiny" })
|
|
4696
4740
|
},
|
|
4697
4741
|
{
|
|
4698
|
-
label:
|
|
4742
|
+
label: __38("Skew Y", "elementor"),
|
|
4699
4743
|
bindValue: "y",
|
|
4700
|
-
startIcon: /* @__PURE__ */
|
|
4744
|
+
startIcon: /* @__PURE__ */ React77.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
4701
4745
|
}
|
|
4702
4746
|
];
|
|
4703
4747
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
4704
4748
|
var Skew = () => {
|
|
4705
4749
|
const context = useBoundProp(skewTransformPropTypeUtil2);
|
|
4706
4750
|
const rowRef = useRef18(null);
|
|
4707
|
-
return /* @__PURE__ */
|
|
4751
|
+
return /* @__PURE__ */ React77.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...context }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control) => /* @__PURE__ */ React77.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef, units: skewUnits })))));
|
|
4708
4752
|
};
|
|
4709
4753
|
|
|
4710
4754
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
@@ -4801,7 +4845,7 @@ var TransformContent = () => {
|
|
|
4801
4845
|
rotate: initialRotateValue.value,
|
|
4802
4846
|
skew: initialSkewValue.value
|
|
4803
4847
|
});
|
|
4804
|
-
return /* @__PURE__ */
|
|
4848
|
+
return /* @__PURE__ */ React78.createElement(PopoverContent, null, /* @__PURE__ */ React78.createElement(Box12, { sx: { width: "100%" } }, /* @__PURE__ */ React78.createElement(Box12, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React78.createElement(
|
|
4805
4849
|
Tabs2,
|
|
4806
4850
|
{
|
|
4807
4851
|
size: "small",
|
|
@@ -4812,37 +4856,37 @@ var TransformContent = () => {
|
|
|
4812
4856
|
}
|
|
4813
4857
|
},
|
|
4814
4858
|
...getTabsProps(),
|
|
4815
|
-
"aria-label":
|
|
4859
|
+
"aria-label": __39("Transform", "elementor")
|
|
4816
4860
|
},
|
|
4817
|
-
/* @__PURE__ */
|
|
4818
|
-
/* @__PURE__ */
|
|
4819
|
-
/* @__PURE__ */
|
|
4820
|
-
/* @__PURE__ */
|
|
4821
|
-
)), /* @__PURE__ */
|
|
4861
|
+
/* @__PURE__ */ React78.createElement(Tab2, { label: __39("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
4862
|
+
/* @__PURE__ */ React78.createElement(Tab2, { label: __39("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
4863
|
+
/* @__PURE__ */ React78.createElement(Tab2, { label: __39("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
4864
|
+
/* @__PURE__ */ React78.createElement(Tab2, { label: __39("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
4865
|
+
)), /* @__PURE__ */ React78.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React78.createElement(Move, null)), /* @__PURE__ */ React78.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React78.createElement(Scale, null)), /* @__PURE__ */ React78.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React78.createElement(Rotate, null)), /* @__PURE__ */ React78.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React78.createElement(Skew, null))));
|
|
4822
4866
|
};
|
|
4823
4867
|
|
|
4824
4868
|
// src/controls/transform-control/transform-icon.tsx
|
|
4825
|
-
import * as
|
|
4869
|
+
import * as React79 from "react";
|
|
4826
4870
|
import { ArrowsMaximizeIcon as ArrowsMaximizeIcon2, ExpandIcon, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
|
|
4827
4871
|
var TransformIcon = ({ value }) => {
|
|
4828
4872
|
switch (value.$$type) {
|
|
4829
4873
|
case TransformFunctionKeys.move:
|
|
4830
|
-
return /* @__PURE__ */
|
|
4874
|
+
return /* @__PURE__ */ React79.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
|
|
4831
4875
|
case TransformFunctionKeys.scale:
|
|
4832
|
-
return /* @__PURE__ */
|
|
4876
|
+
return /* @__PURE__ */ React79.createElement(ExpandIcon, { fontSize: "tiny" });
|
|
4833
4877
|
case TransformFunctionKeys.rotate:
|
|
4834
|
-
return /* @__PURE__ */
|
|
4878
|
+
return /* @__PURE__ */ React79.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
|
|
4835
4879
|
case TransformFunctionKeys.skew:
|
|
4836
|
-
return /* @__PURE__ */
|
|
4880
|
+
return /* @__PURE__ */ React79.createElement(SkewXIcon, { fontSize: "tiny" });
|
|
4837
4881
|
default:
|
|
4838
4882
|
return null;
|
|
4839
4883
|
}
|
|
4840
4884
|
};
|
|
4841
4885
|
|
|
4842
4886
|
// src/controls/transform-control/transform-label.tsx
|
|
4843
|
-
import * as
|
|
4887
|
+
import * as React80 from "react";
|
|
4844
4888
|
import { Box as Box13 } from "@elementor/ui";
|
|
4845
|
-
import { __ as
|
|
4889
|
+
import { __ as __40 } from "@wordpress/i18n";
|
|
4846
4890
|
var transformMoveValue = (value) => Object.values(value).map((axis) => {
|
|
4847
4891
|
const size = axis?.value?.size ?? defaultValues.move.size;
|
|
4848
4892
|
const unit = axis?.value?.unit ?? defaultValues.move.unit;
|
|
@@ -4863,19 +4907,19 @@ var TransformLabel = (props) => {
|
|
|
4863
4907
|
const { $$type, value } = props.value;
|
|
4864
4908
|
switch ($$type) {
|
|
4865
4909
|
case TransformFunctionKeys.move:
|
|
4866
|
-
return /* @__PURE__ */
|
|
4910
|
+
return /* @__PURE__ */ React80.createElement(Label2, { label: __40("Move", "elementor"), value: transformMoveValue(value) });
|
|
4867
4911
|
case TransformFunctionKeys.scale:
|
|
4868
|
-
return /* @__PURE__ */
|
|
4912
|
+
return /* @__PURE__ */ React80.createElement(Label2, { label: __40("Scale", "elementor"), value: transformScaleValue(value) });
|
|
4869
4913
|
case TransformFunctionKeys.rotate:
|
|
4870
|
-
return /* @__PURE__ */
|
|
4914
|
+
return /* @__PURE__ */ React80.createElement(Label2, { label: __40("Rotate", "elementor"), value: transformRotateValue(value) });
|
|
4871
4915
|
case TransformFunctionKeys.skew:
|
|
4872
|
-
return /* @__PURE__ */
|
|
4916
|
+
return /* @__PURE__ */ React80.createElement(Label2, { label: __40("Skew", "elementor"), value: transformSkewValue(value) });
|
|
4873
4917
|
default:
|
|
4874
4918
|
return "";
|
|
4875
4919
|
}
|
|
4876
4920
|
};
|
|
4877
4921
|
var Label2 = ({ label, value }) => {
|
|
4878
|
-
return /* @__PURE__ */
|
|
4922
|
+
return /* @__PURE__ */ React80.createElement(Box13, { component: "span" }, label, ": ", value);
|
|
4879
4923
|
};
|
|
4880
4924
|
|
|
4881
4925
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
@@ -4886,13 +4930,13 @@ var TransformRepeaterControl = createControl(() => {
|
|
|
4886
4930
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
4887
4931
|
};
|
|
4888
4932
|
const shouldDisableAddItem = !getInitialValue();
|
|
4889
|
-
return /* @__PURE__ */
|
|
4933
|
+
return /* @__PURE__ */ React81.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React81.createElement(
|
|
4890
4934
|
UnstableRepeater,
|
|
4891
4935
|
{
|
|
4892
4936
|
initial: getInitialValue() ?? initialTransformValue,
|
|
4893
4937
|
propTypeUtil: transformPropTypeUtil
|
|
4894
4938
|
},
|
|
4895
|
-
/* @__PURE__ */
|
|
4939
|
+
/* @__PURE__ */ React81.createElement(Header, { label: __41("Transform", "elementor") }, /* @__PURE__ */ React81.createElement(
|
|
4896
4940
|
TooltipAddItemAction,
|
|
4897
4941
|
{
|
|
4898
4942
|
disabled: shouldDisableAddItem,
|
|
@@ -4900,22 +4944,22 @@ var TransformRepeaterControl = createControl(() => {
|
|
|
4900
4944
|
enableTooltip: shouldDisableAddItem
|
|
4901
4945
|
}
|
|
4902
4946
|
)),
|
|
4903
|
-
/* @__PURE__ */
|
|
4904
|
-
/* @__PURE__ */
|
|
4947
|
+
/* @__PURE__ */ React81.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React81.createElement(Item, { Icon: TransformIcon, Label: TransformLabel }) }, /* @__PURE__ */ React81.createElement(DisableItemAction, null), /* @__PURE__ */ React81.createElement(RemoveItemAction, null)),
|
|
4948
|
+
/* @__PURE__ */ React81.createElement(EditItemPopover, null, /* @__PURE__ */ React81.createElement(TransformContent, null))
|
|
4905
4949
|
));
|
|
4906
4950
|
});
|
|
4907
|
-
var ToolTip = /* @__PURE__ */
|
|
4951
|
+
var ToolTip = /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }), /* @__PURE__ */ React81.createElement(Typography6, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __41("You can use each kind of transform only once per element.", "elementor")));
|
|
4908
4952
|
|
|
4909
4953
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
4910
|
-
import * as
|
|
4954
|
+
import * as React84 from "react";
|
|
4911
4955
|
import { selectionSizePropTypeUtil as selectionSizePropTypeUtil2 } from "@elementor/editor-props";
|
|
4912
|
-
import { __ as
|
|
4956
|
+
import { __ as __44 } from "@wordpress/i18n";
|
|
4913
4957
|
|
|
4914
4958
|
// src/controls/selection-size-control.tsx
|
|
4915
|
-
import * as
|
|
4959
|
+
import * as React82 from "react";
|
|
4916
4960
|
import { useMemo as useMemo7, useRef as useRef20 } from "react";
|
|
4917
4961
|
import { selectionSizePropTypeUtil } from "@elementor/editor-props";
|
|
4918
|
-
import { Grid as
|
|
4962
|
+
import { Grid as Grid27 } from "@elementor/ui";
|
|
4919
4963
|
var SelectionSizeControl = createControl(
|
|
4920
4964
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
4921
4965
|
const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
|
|
@@ -4931,7 +4975,7 @@ var SelectionSizeControl = createControl(
|
|
|
4931
4975
|
}
|
|
4932
4976
|
}, [value, sizeConfigMap]);
|
|
4933
4977
|
const SelectionComponent = selectionConfig.component;
|
|
4934
|
-
return /* @__PURE__ */
|
|
4978
|
+
return /* @__PURE__ */ React82.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React82.createElement(Grid27, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React82.createElement(Grid27, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React82.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React82.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(Grid27, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, sizeLabel)), /* @__PURE__ */ React82.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React82.createElement(
|
|
4935
4979
|
SizeControl,
|
|
4936
4980
|
{
|
|
4937
4981
|
anchorRef: rowRef,
|
|
@@ -4944,12 +4988,12 @@ var SelectionSizeControl = createControl(
|
|
|
4944
4988
|
);
|
|
4945
4989
|
|
|
4946
4990
|
// src/controls/transition-control/data.ts
|
|
4947
|
-
import { __ as
|
|
4991
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
4948
4992
|
var initialTransitionValue = {
|
|
4949
4993
|
selection: {
|
|
4950
4994
|
$$type: "key-value",
|
|
4951
4995
|
value: {
|
|
4952
|
-
key: { value:
|
|
4996
|
+
key: { value: __42("All properties", "elementor"), $$type: "string" },
|
|
4953
4997
|
value: { value: "all", $$type: "string" }
|
|
4954
4998
|
}
|
|
4955
4999
|
},
|
|
@@ -4957,9 +5001,9 @@ var initialTransitionValue = {
|
|
|
4957
5001
|
};
|
|
4958
5002
|
var transitionProperties = [
|
|
4959
5003
|
{
|
|
4960
|
-
label:
|
|
5004
|
+
label: __42("Default", "elementor"),
|
|
4961
5005
|
type: "category",
|
|
4962
|
-
properties: [{ label:
|
|
5006
|
+
properties: [{ label: __42("All properties", "elementor"), value: "all" }]
|
|
4963
5007
|
}
|
|
4964
5008
|
];
|
|
4965
5009
|
var transitionsItemsList = transitionProperties.map((category) => ({
|
|
@@ -4968,12 +5012,12 @@ var transitionsItemsList = transitionProperties.map((category) => ({
|
|
|
4968
5012
|
}));
|
|
4969
5013
|
|
|
4970
5014
|
// src/controls/transition-control/transition-selector.tsx
|
|
4971
|
-
import * as
|
|
5015
|
+
import * as React83 from "react";
|
|
4972
5016
|
import { useRef as useRef21 } from "react";
|
|
4973
5017
|
import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
|
|
4974
5018
|
import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
|
|
4975
5019
|
import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box14, Popover as Popover7, UnstableTag as UnstableTag4, usePopupState as usePopupState8 } from "@elementor/ui";
|
|
4976
|
-
import { __ as
|
|
5020
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
4977
5021
|
var toTransitionSelectorValue = (label) => {
|
|
4978
5022
|
for (const category of transitionProperties) {
|
|
4979
5023
|
const property = category.properties.find((prop) => prop.label === label);
|
|
@@ -5015,7 +5059,7 @@ var TransitionSelector = ({ recentlyUsedList }) => {
|
|
|
5015
5059
|
}
|
|
5016
5060
|
return [
|
|
5017
5061
|
{
|
|
5018
|
-
label:
|
|
5062
|
+
label: __43("Recent", "elementor"),
|
|
5019
5063
|
items: recentItems
|
|
5020
5064
|
},
|
|
5021
5065
|
...filteredItems
|
|
@@ -5039,16 +5083,16 @@ var TransitionSelector = ({ recentlyUsedList }) => {
|
|
|
5039
5083
|
left: rect.right + 36
|
|
5040
5084
|
};
|
|
5041
5085
|
};
|
|
5042
|
-
return /* @__PURE__ */
|
|
5086
|
+
return /* @__PURE__ */ React83.createElement(Box14, { ref: defaultRef }, /* @__PURE__ */ React83.createElement(
|
|
5043
5087
|
UnstableTag4,
|
|
5044
5088
|
{
|
|
5045
5089
|
variant: "outlined",
|
|
5046
5090
|
label: transitionLabel,
|
|
5047
|
-
endIcon: /* @__PURE__ */
|
|
5091
|
+
endIcon: /* @__PURE__ */ React83.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
|
|
5048
5092
|
...bindTrigger6(popoverState),
|
|
5049
5093
|
fullWidth: true
|
|
5050
5094
|
}
|
|
5051
|
-
), /* @__PURE__ */
|
|
5095
|
+
), /* @__PURE__ */ React83.createElement(
|
|
5052
5096
|
Popover7,
|
|
5053
5097
|
{
|
|
5054
5098
|
disablePortal: true,
|
|
@@ -5059,7 +5103,7 @@ var TransitionSelector = ({ recentlyUsedList }) => {
|
|
|
5059
5103
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
5060
5104
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
5061
5105
|
},
|
|
5062
|
-
/* @__PURE__ */
|
|
5106
|
+
/* @__PURE__ */ React83.createElement(
|
|
5063
5107
|
ItemSelector,
|
|
5064
5108
|
{
|
|
5065
5109
|
itemsList: getItemList(),
|
|
@@ -5067,7 +5111,7 @@ var TransitionSelector = ({ recentlyUsedList }) => {
|
|
|
5067
5111
|
onItemChange: handleTransitionPropertyChange,
|
|
5068
5112
|
onClose: popoverState.close,
|
|
5069
5113
|
sectionWidth: 268,
|
|
5070
|
-
title:
|
|
5114
|
+
title: __43("Transition Property", "elementor"),
|
|
5071
5115
|
icon: VariationsIcon
|
|
5072
5116
|
}
|
|
5073
5117
|
)
|
|
@@ -5082,8 +5126,8 @@ var DURATION_CONFIG = {
|
|
|
5082
5126
|
};
|
|
5083
5127
|
var getSelectionSizeProps = (recentlyUsedList) => {
|
|
5084
5128
|
return {
|
|
5085
|
-
selectionLabel:
|
|
5086
|
-
sizeLabel:
|
|
5129
|
+
selectionLabel: __44("Type", "elementor"),
|
|
5130
|
+
sizeLabel: __44("Duration", "elementor"),
|
|
5087
5131
|
selectionConfig: {
|
|
5088
5132
|
component: TransitionSelector,
|
|
5089
5133
|
props: {
|
|
@@ -5111,13 +5155,13 @@ function getChildControlConfig(recentlyUsedList) {
|
|
|
5111
5155
|
};
|
|
5112
5156
|
}
|
|
5113
5157
|
var TransitionRepeaterControl = createControl((props) => {
|
|
5114
|
-
return /* @__PURE__ */
|
|
5158
|
+
return /* @__PURE__ */ React84.createElement(
|
|
5115
5159
|
RepeatableControl,
|
|
5116
5160
|
{
|
|
5117
|
-
label:
|
|
5118
|
-
repeaterLabel:
|
|
5161
|
+
label: __44("Transitions", "elementor"),
|
|
5162
|
+
repeaterLabel: __44("Transitions", "elementor"),
|
|
5119
5163
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
5120
|
-
placeholder:
|
|
5164
|
+
placeholder: __44("Empty Transition", "elementor"),
|
|
5121
5165
|
showDuplicate: false,
|
|
5122
5166
|
showToggle: true,
|
|
5123
5167
|
initialValues: initialTransitionValue,
|
|
@@ -5128,7 +5172,7 @@ var TransitionRepeaterControl = createControl((props) => {
|
|
|
5128
5172
|
});
|
|
5129
5173
|
|
|
5130
5174
|
// src/components/css-code-editor/css-editor.tsx
|
|
5131
|
-
import * as
|
|
5175
|
+
import * as React86 from "react";
|
|
5132
5176
|
import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
|
|
5133
5177
|
import { useTheme as useTheme2 } from "@elementor/ui";
|
|
5134
5178
|
import { Editor } from "@monaco-editor/react";
|
|
@@ -5179,25 +5223,25 @@ var ResizeHandle = styled7(Button5)`
|
|
|
5179
5223
|
`;
|
|
5180
5224
|
|
|
5181
5225
|
// src/components/css-code-editor/css-validation.ts
|
|
5182
|
-
import { __ as
|
|
5226
|
+
import { __ as __45 } from "@wordpress/i18n";
|
|
5183
5227
|
var forbiddenPatterns = [
|
|
5184
5228
|
{
|
|
5185
5229
|
pattern: ":hover",
|
|
5186
|
-
message:
|
|
5230
|
+
message: __45(
|
|
5187
5231
|
"The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.",
|
|
5188
5232
|
"elementor"
|
|
5189
5233
|
)
|
|
5190
5234
|
},
|
|
5191
5235
|
{
|
|
5192
5236
|
pattern: ":active",
|
|
5193
|
-
message:
|
|
5237
|
+
message: __45(
|
|
5194
5238
|
"The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.",
|
|
5195
5239
|
"elementor"
|
|
5196
5240
|
)
|
|
5197
5241
|
},
|
|
5198
5242
|
{
|
|
5199
5243
|
pattern: "@media",
|
|
5200
|
-
message:
|
|
5244
|
+
message: __45(
|
|
5201
5245
|
"The use of @media is not permitted. Instead, switch to the desired breakpoint and add your custom code there.",
|
|
5202
5246
|
"elementor"
|
|
5203
5247
|
)
|
|
@@ -5236,9 +5280,9 @@ function validate(editor, monaco) {
|
|
|
5236
5280
|
}
|
|
5237
5281
|
|
|
5238
5282
|
// src/components/css-code-editor/resize-handle.tsx
|
|
5239
|
-
import * as
|
|
5283
|
+
import * as React85 from "react";
|
|
5240
5284
|
var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
|
|
5241
|
-
const handleResizeMove =
|
|
5285
|
+
const handleResizeMove = React85.useCallback(
|
|
5242
5286
|
(e) => {
|
|
5243
5287
|
const container = containerRef.current;
|
|
5244
5288
|
if (!container) {
|
|
@@ -5251,11 +5295,11 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
|
|
|
5251
5295
|
},
|
|
5252
5296
|
[containerRef, onResize, onHeightChange]
|
|
5253
5297
|
);
|
|
5254
|
-
const handleResizeEnd =
|
|
5298
|
+
const handleResizeEnd = React85.useCallback(() => {
|
|
5255
5299
|
document.removeEventListener("mousemove", handleResizeMove);
|
|
5256
5300
|
document.removeEventListener("mouseup", handleResizeEnd);
|
|
5257
5301
|
}, [handleResizeMove]);
|
|
5258
|
-
const handleResizeStart =
|
|
5302
|
+
const handleResizeStart = React85.useCallback(
|
|
5259
5303
|
(e) => {
|
|
5260
5304
|
e.preventDefault();
|
|
5261
5305
|
e.stopPropagation();
|
|
@@ -5264,13 +5308,13 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
|
|
|
5264
5308
|
},
|
|
5265
5309
|
[handleResizeMove, handleResizeEnd]
|
|
5266
5310
|
);
|
|
5267
|
-
|
|
5311
|
+
React85.useEffect(() => {
|
|
5268
5312
|
return () => {
|
|
5269
5313
|
document.removeEventListener("mousemove", handleResizeMove);
|
|
5270
5314
|
document.removeEventListener("mouseup", handleResizeEnd);
|
|
5271
5315
|
};
|
|
5272
5316
|
}, [handleResizeMove, handleResizeEnd]);
|
|
5273
|
-
return /* @__PURE__ */
|
|
5317
|
+
return /* @__PURE__ */ React85.createElement(
|
|
5274
5318
|
ResizeHandle,
|
|
5275
5319
|
{
|
|
5276
5320
|
onMouseDown: handleResizeStart,
|
|
@@ -5354,21 +5398,21 @@ var createEditorDidMountHandler = (editorRef, monacoRef, debounceTimer, onChange
|
|
|
5354
5398
|
};
|
|
5355
5399
|
var CssEditor = ({ value, onChange }) => {
|
|
5356
5400
|
const theme = useTheme2();
|
|
5357
|
-
const containerRef =
|
|
5358
|
-
const editorRef =
|
|
5359
|
-
const monacoRef =
|
|
5360
|
-
const debounceTimer =
|
|
5401
|
+
const containerRef = React86.useRef(null);
|
|
5402
|
+
const editorRef = React86.useRef(null);
|
|
5403
|
+
const monacoRef = React86.useRef(null);
|
|
5404
|
+
const debounceTimer = React86.useRef(null);
|
|
5361
5405
|
const activeBreakpoint = useActiveBreakpoint2();
|
|
5362
|
-
const handleResize =
|
|
5406
|
+
const handleResize = React86.useCallback(() => {
|
|
5363
5407
|
editorRef.current?.layout();
|
|
5364
5408
|
}, []);
|
|
5365
|
-
const handleHeightChange =
|
|
5409
|
+
const handleHeightChange = React86.useCallback((height) => {
|
|
5366
5410
|
if (containerRef.current) {
|
|
5367
5411
|
containerRef.current.style.height = `${height}px`;
|
|
5368
5412
|
}
|
|
5369
5413
|
}, []);
|
|
5370
5414
|
const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef, debounceTimer, onChange);
|
|
5371
|
-
|
|
5415
|
+
React86.useEffect(() => {
|
|
5372
5416
|
const timerRef = debounceTimer;
|
|
5373
5417
|
return () => {
|
|
5374
5418
|
const timer = timerRef.current;
|
|
@@ -5377,7 +5421,7 @@ var CssEditor = ({ value, onChange }) => {
|
|
|
5377
5421
|
}
|
|
5378
5422
|
};
|
|
5379
5423
|
}, []);
|
|
5380
|
-
return /* @__PURE__ */
|
|
5424
|
+
return /* @__PURE__ */ React86.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React86.createElement(
|
|
5381
5425
|
Editor,
|
|
5382
5426
|
{
|
|
5383
5427
|
key: activeBreakpoint,
|
|
@@ -5398,7 +5442,7 @@ var CssEditor = ({ value, onChange }) => {
|
|
|
5398
5442
|
fixedOverflowWidgets: true
|
|
5399
5443
|
}
|
|
5400
5444
|
}
|
|
5401
|
-
), /* @__PURE__ */
|
|
5445
|
+
), /* @__PURE__ */ React86.createElement(
|
|
5402
5446
|
ResizeHandleComponent,
|
|
5403
5447
|
{
|
|
5404
5448
|
onResize: handleResize,
|