@elementor/editor-controls 3.32.0-35 → 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.js
CHANGED
|
@@ -3327,17 +3327,17 @@ var SvgMediaControl = createControl(() => {
|
|
|
3327
3327
|
});
|
|
3328
3328
|
|
|
3329
3329
|
// src/controls/background-control/background-control.tsx
|
|
3330
|
+
var React68 = __toESM(require("react"));
|
|
3331
|
+
var import_editor_props32 = require("@elementor/editor-props");
|
|
3332
|
+
var import_ui59 = require("@elementor/ui");
|
|
3333
|
+
var import_i18n32 = require("@wordpress/i18n");
|
|
3334
|
+
|
|
3335
|
+
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
3330
3336
|
var React67 = __toESM(require("react"));
|
|
3331
3337
|
var import_editor_props31 = require("@elementor/editor-props");
|
|
3332
3338
|
var import_ui58 = require("@elementor/ui");
|
|
3333
|
-
var import_i18n31 = require("@wordpress/i18n");
|
|
3334
|
-
|
|
3335
|
-
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
3336
|
-
var React66 = __toESM(require("react"));
|
|
3337
|
-
var import_editor_props30 = require("@elementor/editor-props");
|
|
3338
|
-
var import_ui57 = require("@elementor/ui");
|
|
3339
3339
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
3340
|
-
var
|
|
3340
|
+
var import_i18n31 = require("@wordpress/i18n");
|
|
3341
3341
|
|
|
3342
3342
|
// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
|
|
3343
3343
|
var React50 = __toESM(require("react"));
|
|
@@ -3467,70 +3467,112 @@ var ConditionalToolTip = ({
|
|
|
3467
3467
|
) : children;
|
|
3468
3468
|
|
|
3469
3469
|
// src/components/unstable-repeater/header/header.tsx
|
|
3470
|
-
var
|
|
3471
|
-
var
|
|
3470
|
+
var React54 = __toESM(require("react"));
|
|
3471
|
+
var import_ui46 = require("@elementor/ui");
|
|
3472
3472
|
|
|
3473
3473
|
// src/controls/transform-control/transform-base-control.tsx
|
|
3474
|
-
var
|
|
3474
|
+
var React53 = __toESM(require("react"));
|
|
3475
3475
|
var import_react31 = require("react");
|
|
3476
3476
|
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
3477
3477
|
var import_icons16 = require("@elementor/icons");
|
|
3478
|
-
var
|
|
3479
|
-
var
|
|
3478
|
+
var import_ui45 = require("@elementor/ui");
|
|
3479
|
+
var import_i18n22 = require("@wordpress/i18n");
|
|
3480
3480
|
|
|
3481
|
-
// src/controls/transform-control/transform-base-controls/
|
|
3481
|
+
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
3482
3482
|
var React51 = __toESM(require("react"));
|
|
3483
3483
|
var import_editor_props25 = require("@elementor/editor-props");
|
|
3484
3484
|
var import_ui43 = require("@elementor/ui");
|
|
3485
3485
|
var import_i18n20 = require("@wordpress/i18n");
|
|
3486
|
+
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
3487
|
+
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
3488
|
+
{
|
|
3489
|
+
label: (0, import_i18n20.__)("Perspective", "elementor"),
|
|
3490
|
+
bindValue: "perspective",
|
|
3491
|
+
units: lengthUnits
|
|
3492
|
+
},
|
|
3493
|
+
{
|
|
3494
|
+
label: (0, import_i18n20.__)("Origin X", "elementor"),
|
|
3495
|
+
bindValue: "perspective-origin-x",
|
|
3496
|
+
units: ORIGIN_UNITS
|
|
3497
|
+
},
|
|
3498
|
+
{
|
|
3499
|
+
label: (0, import_i18n20.__)("Origin Y", "elementor"),
|
|
3500
|
+
bindValue: "perspective-origin-y",
|
|
3501
|
+
units: ORIGIN_UNITS
|
|
3502
|
+
}
|
|
3503
|
+
];
|
|
3504
|
+
var ChildrenPerspectiveControl = ({ rowRef }) => {
|
|
3505
|
+
return /* @__PURE__ */ React51.createElement(import_ui43.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React51.createElement(ControlFormLabel, { sx: { pt: 1.5, pl: 1.5 } }, (0, import_i18n20.__)("Children perspective", "elementor")), /* @__PURE__ */ React51.createElement(import_ui43.Grid, { container: true, spacing: 1.5, ref: rowRef }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React51.createElement(ControlFields, { control, rowRef, key: control.bindValue })), /* @__PURE__ */ React51.createElement(import_ui43.Divider, { sx: { py: 3 } })));
|
|
3506
|
+
};
|
|
3507
|
+
var ControlFields = ({
|
|
3508
|
+
control,
|
|
3509
|
+
rowRef
|
|
3510
|
+
}) => {
|
|
3511
|
+
const context = useBoundProp(import_editor_props25.sizePropTypeUtil);
|
|
3512
|
+
return /* @__PURE__ */ React51.createElement(PropProvider, { ...context }, /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind: control.bindValue }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlLabel, null, control.label)), /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 6, sx: { pr: 3 } }, /* @__PURE__ */ React51.createElement(
|
|
3513
|
+
SizeControl,
|
|
3514
|
+
{
|
|
3515
|
+
variant: "length",
|
|
3516
|
+
units: [...control.units],
|
|
3517
|
+
anchorRef: rowRef,
|
|
3518
|
+
disableCustom: true
|
|
3519
|
+
}
|
|
3520
|
+
))))));
|
|
3521
|
+
};
|
|
3522
|
+
|
|
3523
|
+
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
3524
|
+
var React52 = __toESM(require("react"));
|
|
3525
|
+
var import_editor_props26 = require("@elementor/editor-props");
|
|
3526
|
+
var import_ui44 = require("@elementor/ui");
|
|
3527
|
+
var import_i18n21 = require("@wordpress/i18n");
|
|
3486
3528
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
3487
3529
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
3488
3530
|
{
|
|
3489
|
-
label: (0,
|
|
3531
|
+
label: (0, import_i18n21.__)("Origin X", "elementor"),
|
|
3490
3532
|
bindValue: "x",
|
|
3491
3533
|
units: TRANSFORM_ORIGIN_UNITS
|
|
3492
3534
|
},
|
|
3493
3535
|
{
|
|
3494
|
-
label: (0,
|
|
3536
|
+
label: (0, import_i18n21.__)("Origin Y", "elementor"),
|
|
3495
3537
|
bindValue: "y",
|
|
3496
3538
|
units: TRANSFORM_ORIGIN_UNITS
|
|
3497
3539
|
},
|
|
3498
3540
|
{
|
|
3499
|
-
label: (0,
|
|
3541
|
+
label: (0, import_i18n21.__)("Origin Z", "elementor"),
|
|
3500
3542
|
bindValue: "z",
|
|
3501
3543
|
units: TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%")
|
|
3502
3544
|
}
|
|
3503
3545
|
];
|
|
3504
3546
|
var TransformOriginControl = ({ rowRef }) => {
|
|
3505
|
-
return /* @__PURE__ */
|
|
3547
|
+
return /* @__PURE__ */ React52.createElement(import_ui44.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React52.createElement(ControlFormLabel, { sx: { pt: 1.5, pl: 1.5 } }, (0, import_i18n21.__)("Transform", "elementor")), /* @__PURE__ */ React52.createElement(import_ui44.Grid, { container: true, spacing: 1.5, ref: rowRef }, TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React52.createElement(ControlFields2, { control, rowRef, key: control.bindValue })), /* @__PURE__ */ React52.createElement(import_ui44.Divider, { sx: { py: 3 } })));
|
|
3506
3548
|
};
|
|
3507
|
-
var
|
|
3549
|
+
var ControlFields2 = ({
|
|
3508
3550
|
control,
|
|
3509
3551
|
rowRef
|
|
3510
3552
|
}) => {
|
|
3511
|
-
const context = useBoundProp(
|
|
3512
|
-
return /* @__PURE__ */
|
|
3553
|
+
const context = useBoundProp(import_editor_props26.sizePropTypeUtil);
|
|
3554
|
+
return /* @__PURE__ */ React52.createElement(PropProvider, { ...context }, /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: control.bindValue }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ControlLabel, null, control.label)), /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6, sx: { pr: 3 } }, /* @__PURE__ */ React52.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true }))))));
|
|
3513
3555
|
};
|
|
3514
3556
|
|
|
3515
3557
|
// src/controls/transform-control/transform-base-control.tsx
|
|
3516
3558
|
var SIZE5 = "tiny";
|
|
3517
3559
|
var TransformBaseControl = ({ anchorRef }) => {
|
|
3518
3560
|
const rowRef = (0, import_react31.useRef)(null);
|
|
3519
|
-
const popupState = (0,
|
|
3520
|
-
const popupProps = (0,
|
|
3561
|
+
const popupState = (0, import_ui45.usePopupState)({ variant: "popover" });
|
|
3562
|
+
const popupProps = (0, import_ui45.bindPopover)({
|
|
3521
3563
|
...popupState,
|
|
3522
3564
|
anchorEl: anchorRef.current ?? void 0
|
|
3523
3565
|
});
|
|
3524
|
-
return /* @__PURE__ */
|
|
3525
|
-
|
|
3566
|
+
return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(
|
|
3567
|
+
import_ui45.IconButton,
|
|
3526
3568
|
{
|
|
3527
3569
|
size: SIZE5,
|
|
3528
|
-
"aria-label": (0,
|
|
3529
|
-
...(0,
|
|
3570
|
+
"aria-label": (0, import_i18n22.__)("Base Transform", "elementor"),
|
|
3571
|
+
...(0, import_ui45.bindTrigger)(popupState)
|
|
3530
3572
|
},
|
|
3531
|
-
/* @__PURE__ */
|
|
3532
|
-
), /* @__PURE__ */
|
|
3533
|
-
|
|
3573
|
+
/* @__PURE__ */ React53.createElement(import_icons16.AdjustmentsIcon, { fontSize: SIZE5 })
|
|
3574
|
+
), /* @__PURE__ */ React53.createElement(
|
|
3575
|
+
import_ui45.Popover,
|
|
3534
3576
|
{
|
|
3535
3577
|
disablePortal: true,
|
|
3536
3578
|
slotProps: {
|
|
@@ -3542,27 +3584,29 @@ var TransformBaseControl = ({ anchorRef }) => {
|
|
|
3542
3584
|
},
|
|
3543
3585
|
...popupProps
|
|
3544
3586
|
},
|
|
3545
|
-
/* @__PURE__ */
|
|
3587
|
+
/* @__PURE__ */ React53.createElement(
|
|
3546
3588
|
import_editor_ui6.PopoverHeader,
|
|
3547
3589
|
{
|
|
3548
|
-
title: (0,
|
|
3590
|
+
title: (0, import_i18n22.__)("Base Transform", "elementor"),
|
|
3549
3591
|
onClose: popupState.close,
|
|
3550
|
-
icon: /* @__PURE__ */
|
|
3592
|
+
icon: /* @__PURE__ */ React53.createElement(import_icons16.AdjustmentsIcon, { fontSize: SIZE5 })
|
|
3551
3593
|
}
|
|
3552
3594
|
),
|
|
3553
|
-
/* @__PURE__ */
|
|
3554
|
-
/* @__PURE__ */
|
|
3595
|
+
/* @__PURE__ */ React53.createElement(import_ui45.Divider, null),
|
|
3596
|
+
/* @__PURE__ */ React53.createElement(TransformOriginControl, { rowRef }),
|
|
3597
|
+
/* @__PURE__ */ React53.createElement(import_ui45.Divider, null),
|
|
3598
|
+
/* @__PURE__ */ React53.createElement(ChildrenPerspectiveControl, { rowRef })
|
|
3555
3599
|
));
|
|
3556
3600
|
};
|
|
3557
3601
|
|
|
3558
3602
|
// src/components/unstable-repeater/header/header.tsx
|
|
3559
3603
|
var Header = ({ label, children }) => {
|
|
3560
3604
|
const { value } = useBoundProp();
|
|
3561
|
-
return /* @__PURE__ */
|
|
3605
|
+
return /* @__PURE__ */ React54.createElement(import_ui46.Stack, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React54.createElement(import_ui46.Typography, { 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));
|
|
3562
3606
|
};
|
|
3563
3607
|
|
|
3564
3608
|
// src/components/unstable-repeater/items/items-container.tsx
|
|
3565
|
-
var
|
|
3609
|
+
var React55 = __toESM(require("react"));
|
|
3566
3610
|
var ItemsContainer = ({
|
|
3567
3611
|
itemTemplate,
|
|
3568
3612
|
isSortable = true,
|
|
@@ -3581,9 +3625,9 @@ var ItemsContainer = ({
|
|
|
3581
3625
|
})
|
|
3582
3626
|
);
|
|
3583
3627
|
};
|
|
3584
|
-
return /* @__PURE__ */
|
|
3628
|
+
return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
|
|
3585
3629
|
const value = items2[index].item;
|
|
3586
|
-
return /* @__PURE__ */
|
|
3630
|
+
return /* @__PURE__ */ React55.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, React55.isValidElement(itemTemplate) ? React55.cloneElement(itemTemplate, {
|
|
3587
3631
|
key,
|
|
3588
3632
|
value,
|
|
3589
3633
|
index,
|
|
@@ -3593,15 +3637,15 @@ var ItemsContainer = ({
|
|
|
3593
3637
|
};
|
|
3594
3638
|
|
|
3595
3639
|
// src/components/unstable-repeater/items/item.tsx
|
|
3596
|
-
var
|
|
3597
|
-
var
|
|
3598
|
-
var
|
|
3640
|
+
var React59 = __toESM(require("react"));
|
|
3641
|
+
var import_ui50 = require("@elementor/ui");
|
|
3642
|
+
var import_i18n26 = require("@wordpress/i18n");
|
|
3599
3643
|
|
|
3600
3644
|
// src/components/unstable-repeater/actions/disable-item-action.tsx
|
|
3601
|
-
var
|
|
3645
|
+
var React56 = __toESM(require("react"));
|
|
3602
3646
|
var import_icons17 = require("@elementor/icons");
|
|
3603
|
-
var
|
|
3604
|
-
var
|
|
3647
|
+
var import_ui47 = require("@elementor/ui");
|
|
3648
|
+
var import_i18n23 = require("@wordpress/i18n");
|
|
3605
3649
|
var SIZE6 = "tiny";
|
|
3606
3650
|
var DisableItemAction = ({ index = -1 }) => {
|
|
3607
3651
|
const { items: items2, updateItem } = useRepeaterContext();
|
|
@@ -3609,7 +3653,7 @@ var DisableItemAction = ({ index = -1 }) => {
|
|
|
3609
3653
|
return null;
|
|
3610
3654
|
}
|
|
3611
3655
|
const propDisabled = items2[index].item.disabled ?? false;
|
|
3612
|
-
const toggleLabel = propDisabled ? (0,
|
|
3656
|
+
const toggleLabel = propDisabled ? (0, import_i18n23.__)("Show", "elementor") : (0, import_i18n23.__)("Hide", "elementor");
|
|
3613
3657
|
const onClick = () => {
|
|
3614
3658
|
const self = structuredClone(items2[index].item);
|
|
3615
3659
|
self.disabled = !self.disabled;
|
|
@@ -3618,42 +3662,42 @@ var DisableItemAction = ({ index = -1 }) => {
|
|
|
3618
3662
|
}
|
|
3619
3663
|
updateItem(self, index);
|
|
3620
3664
|
};
|
|
3621
|
-
return /* @__PURE__ */
|
|
3665
|
+
return /* @__PURE__ */ React56.createElement(import_ui47.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React56.createElement(import_ui47.IconButton, { size: SIZE6, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React56.createElement(import_icons17.EyeOffIcon, { fontSize: SIZE6 }) : /* @__PURE__ */ React56.createElement(import_icons17.EyeIcon, { fontSize: SIZE6 })));
|
|
3622
3666
|
};
|
|
3623
3667
|
|
|
3624
3668
|
// src/components/unstable-repeater/actions/duplicate-item-action.tsx
|
|
3625
|
-
var
|
|
3669
|
+
var React57 = __toESM(require("react"));
|
|
3626
3670
|
var import_icons18 = require("@elementor/icons");
|
|
3627
|
-
var
|
|
3628
|
-
var
|
|
3671
|
+
var import_ui48 = require("@elementor/ui");
|
|
3672
|
+
var import_i18n24 = require("@wordpress/i18n");
|
|
3629
3673
|
var SIZE7 = "tiny";
|
|
3630
3674
|
var DuplicateItemAction = ({ index = -1 }) => {
|
|
3631
3675
|
const { items: items2, addItem } = useRepeaterContext();
|
|
3632
3676
|
if (index === -1) {
|
|
3633
3677
|
return null;
|
|
3634
3678
|
}
|
|
3635
|
-
const duplicateLabel = (0,
|
|
3679
|
+
const duplicateLabel = (0, import_i18n24.__)("Duplicate", "elementor");
|
|
3636
3680
|
const onClick = (ev) => {
|
|
3637
3681
|
const newItem = structuredClone(items2[index]?.item);
|
|
3638
3682
|
addItem(ev, { item: newItem, index: index + 1 });
|
|
3639
3683
|
};
|
|
3640
|
-
return /* @__PURE__ */
|
|
3684
|
+
return /* @__PURE__ */ React57.createElement(import_ui48.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(import_ui48.IconButton, { size: SIZE7, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React57.createElement(import_icons18.CopyIcon, { fontSize: SIZE7 })));
|
|
3641
3685
|
};
|
|
3642
3686
|
|
|
3643
3687
|
// src/components/unstable-repeater/actions/remove-item-action.tsx
|
|
3644
|
-
var
|
|
3688
|
+
var React58 = __toESM(require("react"));
|
|
3645
3689
|
var import_icons19 = require("@elementor/icons");
|
|
3646
|
-
var
|
|
3647
|
-
var
|
|
3690
|
+
var import_ui49 = require("@elementor/ui");
|
|
3691
|
+
var import_i18n25 = require("@wordpress/i18n");
|
|
3648
3692
|
var SIZE8 = "tiny";
|
|
3649
3693
|
var RemoveItemAction = ({ index = -1 }) => {
|
|
3650
3694
|
const { removeItem } = useRepeaterContext();
|
|
3651
3695
|
if (index === -1) {
|
|
3652
3696
|
return null;
|
|
3653
3697
|
}
|
|
3654
|
-
const removeLabel = (0,
|
|
3698
|
+
const removeLabel = (0, import_i18n25.__)("Remove", "elementor");
|
|
3655
3699
|
const onClick = () => removeItem(index);
|
|
3656
|
-
return /* @__PURE__ */
|
|
3700
|
+
return /* @__PURE__ */ React58.createElement(import_ui49.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React58.createElement(import_ui49.IconButton, { size: SIZE8, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React58.createElement(import_icons19.XIcon, { fontSize: SIZE8 })));
|
|
3657
3701
|
};
|
|
3658
3702
|
|
|
3659
3703
|
// src/components/unstable-repeater/items/item.tsx
|
|
@@ -3665,27 +3709,27 @@ var Item = ({
|
|
|
3665
3709
|
children
|
|
3666
3710
|
}) => {
|
|
3667
3711
|
const { items: items2, popoverState, setRowRef, openItemIndex, setOpenItemIndex } = useRepeaterContext();
|
|
3668
|
-
const triggerProps = (0,
|
|
3712
|
+
const triggerProps = (0, import_ui50.bindTrigger)(popoverState);
|
|
3669
3713
|
const key = items2[index].key ?? -1;
|
|
3670
3714
|
const onClick = (ev) => {
|
|
3671
3715
|
triggerProps.onClick(ev);
|
|
3672
3716
|
setOpenItemIndex(index);
|
|
3673
3717
|
};
|
|
3674
|
-
return /* @__PURE__ */
|
|
3675
|
-
|
|
3718
|
+
return /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(
|
|
3719
|
+
import_ui50.UnstableTag,
|
|
3676
3720
|
{
|
|
3677
3721
|
key,
|
|
3678
3722
|
disabled: false,
|
|
3679
|
-
label: /* @__PURE__ */
|
|
3723
|
+
label: /* @__PURE__ */ React59.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React59.createElement(Label3, { value })),
|
|
3680
3724
|
showActionsOnHover: true,
|
|
3681
3725
|
fullWidth: true,
|
|
3682
3726
|
ref: (ref) => ref && openItemIndex === index && setRowRef(ref),
|
|
3683
3727
|
variant: "outlined",
|
|
3684
|
-
"aria-label": (0,
|
|
3728
|
+
"aria-label": (0, import_i18n26.__)("Open item", "elementor"),
|
|
3685
3729
|
...triggerProps,
|
|
3686
3730
|
onClick,
|
|
3687
|
-
startIcon: /* @__PURE__ */
|
|
3688
|
-
actions: /* @__PURE__ */
|
|
3731
|
+
startIcon: /* @__PURE__ */ React59.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React59.createElement(Icon, { value })),
|
|
3732
|
+
actions: /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), /* @__PURE__ */ React59.createElement(
|
|
3689
3733
|
SlotChildren,
|
|
3690
3734
|
{
|
|
3691
3735
|
whitelist: [DuplicateItemAction, DisableItemAction, RemoveItemAction],
|
|
@@ -3699,14 +3743,14 @@ var Item = ({
|
|
|
3699
3743
|
};
|
|
3700
3744
|
|
|
3701
3745
|
// src/components/unstable-repeater/unstable-repeater.tsx
|
|
3702
|
-
var
|
|
3746
|
+
var React61 = __toESM(require("react"));
|
|
3703
3747
|
|
|
3704
3748
|
// src/components/unstable-repeater/items/edit-item-popover.tsx
|
|
3705
|
-
var
|
|
3706
|
-
var
|
|
3749
|
+
var React60 = __toESM(require("react"));
|
|
3750
|
+
var import_ui51 = require("@elementor/ui");
|
|
3707
3751
|
var EditItemPopover = ({ children }) => {
|
|
3708
3752
|
const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef, items: items2 } = useRepeaterContext();
|
|
3709
|
-
const popoverProps = (0,
|
|
3753
|
+
const popoverProps = (0, import_ui51.bindPopover)(popoverState);
|
|
3710
3754
|
if (!isOpen || !rowRef) {
|
|
3711
3755
|
return null;
|
|
3712
3756
|
}
|
|
@@ -3716,8 +3760,8 @@ var EditItemPopover = ({ children }) => {
|
|
|
3716
3760
|
setRowRef(null);
|
|
3717
3761
|
setOpenItemIndex(EMPTY_OPEN_ITEM2);
|
|
3718
3762
|
};
|
|
3719
|
-
return /* @__PURE__ */
|
|
3720
|
-
|
|
3763
|
+
return /* @__PURE__ */ React60.createElement(
|
|
3764
|
+
import_ui51.Popover,
|
|
3721
3765
|
{
|
|
3722
3766
|
disablePortal: true,
|
|
3723
3767
|
slotProps: {
|
|
@@ -3730,7 +3774,7 @@ var EditItemPopover = ({ children }) => {
|
|
|
3730
3774
|
anchorEl: rowRef,
|
|
3731
3775
|
onClose
|
|
3732
3776
|
},
|
|
3733
|
-
/* @__PURE__ */
|
|
3777
|
+
/* @__PURE__ */ React60.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React60.createElement(import_ui51.Box, null, React60.isValidElement(children) && React60.cloneElement(children, { bind, index: openItemIndex })))
|
|
3734
3778
|
);
|
|
3735
3779
|
};
|
|
3736
3780
|
|
|
@@ -3740,7 +3784,7 @@ var UnstableRepeater = ({
|
|
|
3740
3784
|
initial,
|
|
3741
3785
|
propTypeUtil
|
|
3742
3786
|
}) => {
|
|
3743
|
-
return /* @__PURE__ */
|
|
3787
|
+
return /* @__PURE__ */ React61.createElement(SectionContent, null, /* @__PURE__ */ React61.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React61.createElement(SlotChildren, { whitelist: [Header, ItemsContainer, EditItemPopover], sorted: true }, children)));
|
|
3744
3788
|
};
|
|
3745
3789
|
|
|
3746
3790
|
// src/env.ts
|
|
@@ -3748,27 +3792,27 @@ var import_env = require("@elementor/env");
|
|
|
3748
3792
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
3749
3793
|
|
|
3750
3794
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
3751
|
-
var
|
|
3752
|
-
var
|
|
3753
|
-
var
|
|
3795
|
+
var React62 = __toESM(require("react"));
|
|
3796
|
+
var import_editor_props27 = require("@elementor/editor-props");
|
|
3797
|
+
var import_ui52 = require("@elementor/ui");
|
|
3754
3798
|
var BackgroundGradientColorControl = createControl(() => {
|
|
3755
|
-
const { value, setValue } = useBoundProp(
|
|
3799
|
+
const { value, setValue } = useBoundProp(import_editor_props27.backgroundGradientOverlayPropTypeUtil);
|
|
3756
3800
|
const handleChange = (newValue) => {
|
|
3757
3801
|
const transformedValue = createTransformableValue(newValue);
|
|
3758
3802
|
if (transformedValue.positions) {
|
|
3759
|
-
transformedValue.positions =
|
|
3803
|
+
transformedValue.positions = import_editor_props27.stringPropTypeUtil.create(newValue.positions.join(" "));
|
|
3760
3804
|
}
|
|
3761
3805
|
setValue(transformedValue);
|
|
3762
3806
|
};
|
|
3763
3807
|
const createTransformableValue = (newValue) => ({
|
|
3764
3808
|
...newValue,
|
|
3765
|
-
type:
|
|
3766
|
-
angle:
|
|
3767
|
-
stops:
|
|
3809
|
+
type: import_editor_props27.stringPropTypeUtil.create(newValue.type),
|
|
3810
|
+
angle: import_editor_props27.numberPropTypeUtil.create(newValue.angle),
|
|
3811
|
+
stops: import_editor_props27.gradientColorStopPropTypeUtil.create(
|
|
3768
3812
|
newValue.stops.map(
|
|
3769
|
-
({ color, offset }) =>
|
|
3770
|
-
color:
|
|
3771
|
-
offset:
|
|
3813
|
+
({ color, offset }) => import_editor_props27.colorStopPropTypeUtil.create({
|
|
3814
|
+
color: import_editor_props27.colorPropTypeUtil.create(color),
|
|
3815
|
+
offset: import_editor_props27.numberPropTypeUtil.create(offset)
|
|
3772
3816
|
})
|
|
3773
3817
|
)
|
|
3774
3818
|
)
|
|
@@ -3788,8 +3832,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
3788
3832
|
positions: positions?.value.split(" ")
|
|
3789
3833
|
};
|
|
3790
3834
|
};
|
|
3791
|
-
return /* @__PURE__ */
|
|
3792
|
-
|
|
3835
|
+
return /* @__PURE__ */ React62.createElement(ControlActions, null, /* @__PURE__ */ React62.createElement(
|
|
3836
|
+
import_ui52.UnstableGradientBox,
|
|
3793
3837
|
{
|
|
3794
3838
|
sx: { width: "auto", padding: 1.5 },
|
|
3795
3839
|
value: normalizeValue(),
|
|
@@ -3797,67 +3841,67 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
3797
3841
|
}
|
|
3798
3842
|
));
|
|
3799
3843
|
});
|
|
3800
|
-
var initialBackgroundGradientOverlay =
|
|
3801
|
-
type:
|
|
3802
|
-
angle:
|
|
3803
|
-
stops:
|
|
3804
|
-
|
|
3805
|
-
color:
|
|
3806
|
-
offset:
|
|
3844
|
+
var initialBackgroundGradientOverlay = import_editor_props27.backgroundGradientOverlayPropTypeUtil.create({
|
|
3845
|
+
type: import_editor_props27.stringPropTypeUtil.create("linear"),
|
|
3846
|
+
angle: import_editor_props27.numberPropTypeUtil.create(180),
|
|
3847
|
+
stops: import_editor_props27.gradientColorStopPropTypeUtil.create([
|
|
3848
|
+
import_editor_props27.colorStopPropTypeUtil.create({
|
|
3849
|
+
color: import_editor_props27.colorPropTypeUtil.create("rgb(0,0,0)"),
|
|
3850
|
+
offset: import_editor_props27.numberPropTypeUtil.create(0)
|
|
3807
3851
|
}),
|
|
3808
|
-
|
|
3809
|
-
color:
|
|
3810
|
-
offset:
|
|
3852
|
+
import_editor_props27.colorStopPropTypeUtil.create({
|
|
3853
|
+
color: import_editor_props27.colorPropTypeUtil.create("rgb(255,255,255)"),
|
|
3854
|
+
offset: import_editor_props27.numberPropTypeUtil.create(100)
|
|
3811
3855
|
})
|
|
3812
3856
|
])
|
|
3813
3857
|
});
|
|
3814
3858
|
|
|
3815
3859
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
3816
|
-
var
|
|
3860
|
+
var React63 = __toESM(require("react"));
|
|
3817
3861
|
var import_icons20 = require("@elementor/icons");
|
|
3818
|
-
var
|
|
3819
|
-
var
|
|
3862
|
+
var import_ui53 = require("@elementor/ui");
|
|
3863
|
+
var import_i18n27 = require("@wordpress/i18n");
|
|
3820
3864
|
var attachmentControlOptions = [
|
|
3821
3865
|
{
|
|
3822
3866
|
value: "fixed",
|
|
3823
|
-
label: (0,
|
|
3824
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3867
|
+
label: (0, import_i18n27.__)("Fixed", "elementor"),
|
|
3868
|
+
renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(import_icons20.PinIcon, { fontSize: size }),
|
|
3825
3869
|
showTooltip: true
|
|
3826
3870
|
},
|
|
3827
3871
|
{
|
|
3828
3872
|
value: "scroll",
|
|
3829
|
-
label: (0,
|
|
3830
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3873
|
+
label: (0, import_i18n27.__)("Scroll", "elementor"),
|
|
3874
|
+
renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(import_icons20.PinnedOffIcon, { fontSize: size }),
|
|
3831
3875
|
showTooltip: true
|
|
3832
3876
|
}
|
|
3833
3877
|
];
|
|
3834
3878
|
var BackgroundImageOverlayAttachment = () => {
|
|
3835
|
-
return /* @__PURE__ */
|
|
3879
|
+
return /* @__PURE__ */ React63.createElement(PopoverGridContainer, null, /* @__PURE__ */ React63.createElement(import_ui53.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlFormLabel, null, (0, import_i18n27.__)("Attachment", "elementor"))), /* @__PURE__ */ React63.createElement(import_ui53.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React63.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
3836
3880
|
};
|
|
3837
3881
|
|
|
3838
3882
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
3839
|
-
var
|
|
3883
|
+
var React64 = __toESM(require("react"));
|
|
3840
3884
|
var import_react32 = require("react");
|
|
3841
|
-
var
|
|
3885
|
+
var import_editor_props28 = require("@elementor/editor-props");
|
|
3842
3886
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
3843
3887
|
var import_icons21 = require("@elementor/icons");
|
|
3844
|
-
var
|
|
3845
|
-
var
|
|
3888
|
+
var import_ui54 = require("@elementor/ui");
|
|
3889
|
+
var import_i18n28 = require("@wordpress/i18n");
|
|
3846
3890
|
var backgroundPositionOptions = [
|
|
3847
|
-
{ label: (0,
|
|
3848
|
-
{ label: (0,
|
|
3849
|
-
{ label: (0,
|
|
3850
|
-
{ label: (0,
|
|
3851
|
-
{ label: (0,
|
|
3852
|
-
{ label: (0,
|
|
3853
|
-
{ label: (0,
|
|
3854
|
-
{ label: (0,
|
|
3855
|
-
{ label: (0,
|
|
3856
|
-
{ label: (0,
|
|
3891
|
+
{ label: (0, import_i18n28.__)("Center center", "elementor"), value: "center center" },
|
|
3892
|
+
{ label: (0, import_i18n28.__)("Center left", "elementor"), value: "center left" },
|
|
3893
|
+
{ label: (0, import_i18n28.__)("Center right", "elementor"), value: "center right" },
|
|
3894
|
+
{ label: (0, import_i18n28.__)("Top center", "elementor"), value: "top center" },
|
|
3895
|
+
{ label: (0, import_i18n28.__)("Top left", "elementor"), value: "top left" },
|
|
3896
|
+
{ label: (0, import_i18n28.__)("Top right", "elementor"), value: "top right" },
|
|
3897
|
+
{ label: (0, import_i18n28.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
3898
|
+
{ label: (0, import_i18n28.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
3899
|
+
{ label: (0, import_i18n28.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
3900
|
+
{ label: (0, import_i18n28.__)("Custom", "elementor"), value: "custom" }
|
|
3857
3901
|
];
|
|
3858
3902
|
var BackgroundImageOverlayPosition = () => {
|
|
3859
|
-
const backgroundImageOffsetContext = useBoundProp(
|
|
3860
|
-
const stringPropContext = useBoundProp(
|
|
3903
|
+
const backgroundImageOffsetContext = useBoundProp(import_editor_props28.backgroundImagePositionOffsetPropTypeUtil);
|
|
3904
|
+
const stringPropContext = useBoundProp(import_editor_props28.stringPropTypeUtil);
|
|
3861
3905
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
3862
3906
|
const rowRef = (0, import_react32.useRef)(null);
|
|
3863
3907
|
const handlePositionChange = (event) => {
|
|
@@ -3868,8 +3912,8 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
3868
3912
|
stringPropContext.setValue(value);
|
|
3869
3913
|
}
|
|
3870
3914
|
};
|
|
3871
|
-
return /* @__PURE__ */
|
|
3872
|
-
|
|
3915
|
+
return /* @__PURE__ */ React64.createElement(import_ui54.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React64.createElement(PopoverGridContainer, null, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(ControlFormLabel, null, (0, import_i18n28.__)("Position", "elementor"))), /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React64.createElement(
|
|
3916
|
+
import_ui54.Select,
|
|
3873
3917
|
{
|
|
3874
3918
|
fullWidth: true,
|
|
3875
3919
|
size: "tiny",
|
|
@@ -3877,93 +3921,93 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
3877
3921
|
disabled: stringPropContext.disabled,
|
|
3878
3922
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
3879
3923
|
},
|
|
3880
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
3881
|
-
)))), isCustom ? /* @__PURE__ */
|
|
3924
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React64.createElement(import_editor_ui7.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
3925
|
+
)))), isCustom ? /* @__PURE__ */ React64.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React64.createElement(
|
|
3882
3926
|
SizeControl,
|
|
3883
3927
|
{
|
|
3884
|
-
startIcon: /* @__PURE__ */
|
|
3928
|
+
startIcon: /* @__PURE__ */ React64.createElement(import_icons21.LetterXIcon, { fontSize: "tiny" }),
|
|
3885
3929
|
anchorRef: rowRef
|
|
3886
3930
|
}
|
|
3887
|
-
))), /* @__PURE__ */
|
|
3931
|
+
))), /* @__PURE__ */ React64.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React64.createElement(
|
|
3888
3932
|
SizeControl,
|
|
3889
3933
|
{
|
|
3890
|
-
startIcon: /* @__PURE__ */
|
|
3934
|
+
startIcon: /* @__PURE__ */ React64.createElement(import_icons21.LetterYIcon, { fontSize: "tiny" }),
|
|
3891
3935
|
anchorRef: rowRef
|
|
3892
3936
|
}
|
|
3893
3937
|
)))))) : null);
|
|
3894
3938
|
};
|
|
3895
3939
|
|
|
3896
3940
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
3897
|
-
var
|
|
3941
|
+
var React65 = __toESM(require("react"));
|
|
3898
3942
|
var import_icons22 = require("@elementor/icons");
|
|
3899
|
-
var
|
|
3900
|
-
var
|
|
3943
|
+
var import_ui55 = require("@elementor/ui");
|
|
3944
|
+
var import_i18n29 = require("@wordpress/i18n");
|
|
3901
3945
|
var repeatControlOptions = [
|
|
3902
3946
|
{
|
|
3903
3947
|
value: "repeat",
|
|
3904
|
-
label: (0,
|
|
3905
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3948
|
+
label: (0, import_i18n29.__)("Repeat", "elementor"),
|
|
3949
|
+
renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.GridDotsIcon, { fontSize: size }),
|
|
3906
3950
|
showTooltip: true
|
|
3907
3951
|
},
|
|
3908
3952
|
{
|
|
3909
3953
|
value: "repeat-x",
|
|
3910
|
-
label: (0,
|
|
3911
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3954
|
+
label: (0, import_i18n29.__)("Repeat-x", "elementor"),
|
|
3955
|
+
renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.DotsHorizontalIcon, { fontSize: size }),
|
|
3912
3956
|
showTooltip: true
|
|
3913
3957
|
},
|
|
3914
3958
|
{
|
|
3915
3959
|
value: "repeat-y",
|
|
3916
|
-
label: (0,
|
|
3917
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3960
|
+
label: (0, import_i18n29.__)("Repeat-y", "elementor"),
|
|
3961
|
+
renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.DotsVerticalIcon, { fontSize: size }),
|
|
3918
3962
|
showTooltip: true
|
|
3919
3963
|
},
|
|
3920
3964
|
{
|
|
3921
3965
|
value: "no-repeat",
|
|
3922
|
-
label: (0,
|
|
3923
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3966
|
+
label: (0, import_i18n29.__)("No-repeat", "elementor"),
|
|
3967
|
+
renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(import_icons22.XIcon, { fontSize: size }),
|
|
3924
3968
|
showTooltip: true
|
|
3925
3969
|
}
|
|
3926
3970
|
];
|
|
3927
3971
|
var BackgroundImageOverlayRepeat = () => {
|
|
3928
|
-
return /* @__PURE__ */
|
|
3972
|
+
return /* @__PURE__ */ React65.createElement(PopoverGridContainer, null, /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, (0, import_i18n29.__)("Repeat", "elementor"))), /* @__PURE__ */ React65.createElement(import_ui55.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React65.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
3929
3973
|
};
|
|
3930
3974
|
|
|
3931
3975
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
3932
|
-
var
|
|
3976
|
+
var React66 = __toESM(require("react"));
|
|
3933
3977
|
var import_react33 = require("react");
|
|
3934
|
-
var
|
|
3978
|
+
var import_editor_props29 = require("@elementor/editor-props");
|
|
3935
3979
|
var import_icons23 = require("@elementor/icons");
|
|
3936
|
-
var
|
|
3937
|
-
var
|
|
3980
|
+
var import_ui56 = require("@elementor/ui");
|
|
3981
|
+
var import_i18n30 = require("@wordpress/i18n");
|
|
3938
3982
|
var sizeControlOptions = [
|
|
3939
3983
|
{
|
|
3940
3984
|
value: "auto",
|
|
3941
|
-
label: (0,
|
|
3942
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3985
|
+
label: (0, import_i18n30.__)("Auto", "elementor"),
|
|
3986
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons23.LetterAIcon, { fontSize: size }),
|
|
3943
3987
|
showTooltip: true
|
|
3944
3988
|
},
|
|
3945
3989
|
{
|
|
3946
3990
|
value: "cover",
|
|
3947
|
-
label: (0,
|
|
3948
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3991
|
+
label: (0, import_i18n30.__)("Cover", "elementor"),
|
|
3992
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons23.ArrowsMaximizeIcon, { fontSize: size }),
|
|
3949
3993
|
showTooltip: true
|
|
3950
3994
|
},
|
|
3951
3995
|
{
|
|
3952
3996
|
value: "contain",
|
|
3953
|
-
label: (0,
|
|
3954
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3997
|
+
label: (0, import_i18n30.__)("Contain", "elementor"),
|
|
3998
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons23.ArrowBarBothIcon, { fontSize: size }),
|
|
3955
3999
|
showTooltip: true
|
|
3956
4000
|
},
|
|
3957
4001
|
{
|
|
3958
4002
|
value: "custom",
|
|
3959
|
-
label: (0,
|
|
3960
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4003
|
+
label: (0, import_i18n30.__)("Custom", "elementor"),
|
|
4004
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons23.PencilIcon, { fontSize: size }),
|
|
3961
4005
|
showTooltip: true
|
|
3962
4006
|
}
|
|
3963
4007
|
];
|
|
3964
4008
|
var BackgroundImageOverlaySize = () => {
|
|
3965
|
-
const backgroundImageScaleContext = useBoundProp(
|
|
3966
|
-
const stringPropContext = useBoundProp(
|
|
4009
|
+
const backgroundImageScaleContext = useBoundProp(import_editor_props29.backgroundImageSizeScalePropTypeUtil);
|
|
4010
|
+
const stringPropContext = useBoundProp(import_editor_props29.stringPropTypeUtil);
|
|
3967
4011
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
3968
4012
|
const rowRef = (0, import_react33.useRef)(null);
|
|
3969
4013
|
const handleSizeChange = (size) => {
|
|
@@ -3973,7 +4017,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
3973
4017
|
stringPropContext.setValue(size);
|
|
3974
4018
|
}
|
|
3975
4019
|
};
|
|
3976
|
-
return /* @__PURE__ */
|
|
4020
|
+
return /* @__PURE__ */ React66.createElement(import_ui56.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlFormLabel, null, (0, import_i18n30.__)("Size", "elementor"))), /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React66.createElement(
|
|
3977
4021
|
ControlToggleButtonGroup,
|
|
3978
4022
|
{
|
|
3979
4023
|
exclusive: true,
|
|
@@ -3982,17 +4026,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
3982
4026
|
disabled: stringPropContext.disabled,
|
|
3983
4027
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
3984
4028
|
}
|
|
3985
|
-
)))), isCustom ? /* @__PURE__ */
|
|
4029
|
+
)))), isCustom ? /* @__PURE__ */ React66.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React66.createElement(
|
|
3986
4030
|
SizeControl,
|
|
3987
4031
|
{
|
|
3988
|
-
startIcon: /* @__PURE__ */
|
|
4032
|
+
startIcon: /* @__PURE__ */ React66.createElement(import_icons23.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
3989
4033
|
extendedOptions: ["auto"],
|
|
3990
4034
|
anchorRef: rowRef
|
|
3991
4035
|
}
|
|
3992
|
-
))), /* @__PURE__ */
|
|
4036
|
+
))), /* @__PURE__ */ React66.createElement(import_ui56.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React66.createElement(
|
|
3993
4037
|
SizeControl,
|
|
3994
4038
|
{
|
|
3995
|
-
startIcon: /* @__PURE__ */
|
|
4039
|
+
startIcon: /* @__PURE__ */ React66.createElement(import_icons23.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
3996
4040
|
extendedOptions: ["auto"],
|
|
3997
4041
|
anchorRef: rowRef
|
|
3998
4042
|
}
|
|
@@ -4001,16 +4045,16 @@ var BackgroundImageOverlaySize = () => {
|
|
|
4001
4045
|
|
|
4002
4046
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
4003
4047
|
var import_react34 = require("react");
|
|
4004
|
-
var
|
|
4005
|
-
var
|
|
4048
|
+
var import_editor_props30 = require("@elementor/editor-props");
|
|
4049
|
+
var import_ui57 = require("@elementor/ui");
|
|
4006
4050
|
var useBackgroundTabsHistory = ({
|
|
4007
4051
|
color: initialBackgroundColorOverlay2,
|
|
4008
4052
|
image: initialBackgroundImageOverlay,
|
|
4009
4053
|
gradient: initialBackgroundGradientOverlay2
|
|
4010
4054
|
}) => {
|
|
4011
|
-
const { value: imageValue, setValue: setImageValue } = useBoundProp(
|
|
4012
|
-
const { value: colorValue, setValue: setColorValue } = useBoundProp(
|
|
4013
|
-
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(
|
|
4055
|
+
const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props30.backgroundImageOverlayPropTypeUtil);
|
|
4056
|
+
const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props30.backgroundColorOverlayPropTypeUtil);
|
|
4057
|
+
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props30.backgroundGradientOverlayPropTypeUtil);
|
|
4014
4058
|
const getCurrentOverlayType = () => {
|
|
4015
4059
|
if (colorValue) {
|
|
4016
4060
|
return "color";
|
|
@@ -4020,7 +4064,7 @@ var useBackgroundTabsHistory = ({
|
|
|
4020
4064
|
}
|
|
4021
4065
|
return "image";
|
|
4022
4066
|
};
|
|
4023
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
4067
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui57.useTabs)(getCurrentOverlayType());
|
|
4024
4068
|
const valuesHistory = (0, import_react34.useRef)({
|
|
4025
4069
|
image: initialBackgroundImageOverlay,
|
|
4026
4070
|
color: initialBackgroundColorOverlay2,
|
|
@@ -4059,9 +4103,9 @@ var useBackgroundTabsHistory = ({
|
|
|
4059
4103
|
|
|
4060
4104
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
4061
4105
|
var DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = "#00000033";
|
|
4062
|
-
var initialBackgroundColorOverlay =
|
|
4106
|
+
var initialBackgroundColorOverlay = import_editor_props31.backgroundColorOverlayPropTypeUtil.create(
|
|
4063
4107
|
{
|
|
4064
|
-
color:
|
|
4108
|
+
color: import_editor_props31.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
|
|
4065
4109
|
}
|
|
4066
4110
|
);
|
|
4067
4111
|
var getInitialBackgroundOverlay = () => ({
|
|
@@ -4089,22 +4133,22 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
4089
4133
|
}
|
|
4090
4134
|
});
|
|
4091
4135
|
var backgroundResolutionOptions = [
|
|
4092
|
-
{ label: (0,
|
|
4093
|
-
{ label: (0,
|
|
4094
|
-
{ label: (0,
|
|
4095
|
-
{ label: (0,
|
|
4136
|
+
{ label: (0, import_i18n31.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
4137
|
+
{ label: (0, import_i18n31.__)("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
4138
|
+
{ label: (0, import_i18n31.__)("Large 1024 x 1024", "elementor"), value: "large" },
|
|
4139
|
+
{ label: (0, import_i18n31.__)("Full", "elementor"), value: "full" }
|
|
4096
4140
|
];
|
|
4097
4141
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
4098
|
-
const { propType, value: overlayValues, setValue } = useBoundProp(
|
|
4099
|
-
return /* @__PURE__ */
|
|
4142
|
+
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props31.backgroundOverlayPropTypeUtil);
|
|
4143
|
+
return /* @__PURE__ */ React67.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React67.createElement(
|
|
4100
4144
|
UnstableRepeater,
|
|
4101
4145
|
{
|
|
4102
4146
|
initial: getInitialBackgroundOverlay(),
|
|
4103
|
-
propTypeUtil:
|
|
4147
|
+
propTypeUtil: import_editor_props31.backgroundOverlayPropTypeUtil
|
|
4104
4148
|
},
|
|
4105
|
-
/* @__PURE__ */
|
|
4106
|
-
/* @__PURE__ */
|
|
4107
|
-
/* @__PURE__ */
|
|
4149
|
+
/* @__PURE__ */ React67.createElement(Header, { label: (0, import_i18n31.__)("Overlay", "elementor") }, /* @__PURE__ */ React67.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
4150
|
+
/* @__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)),
|
|
4151
|
+
/* @__PURE__ */ React67.createElement(EditItemPopover, null, /* @__PURE__ */ React67.createElement(ItemContent3, null))
|
|
4108
4152
|
));
|
|
4109
4153
|
});
|
|
4110
4154
|
var ItemContent3 = () => {
|
|
@@ -4114,27 +4158,27 @@ var ItemContent3 = () => {
|
|
|
4114
4158
|
gradient: initialBackgroundGradientOverlay.value
|
|
4115
4159
|
});
|
|
4116
4160
|
const { rowRef } = useRepeaterContext();
|
|
4117
|
-
return /* @__PURE__ */
|
|
4118
|
-
|
|
4161
|
+
return /* @__PURE__ */ React67.createElement(import_ui58.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React67.createElement(import_ui58.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React67.createElement(
|
|
4162
|
+
import_ui58.Tabs,
|
|
4119
4163
|
{
|
|
4120
4164
|
size: "small",
|
|
4121
4165
|
variant: "fullWidth",
|
|
4122
4166
|
...getTabsProps(),
|
|
4123
|
-
"aria-label": (0,
|
|
4167
|
+
"aria-label": (0, import_i18n31.__)("Background Overlay", "elementor")
|
|
4124
4168
|
},
|
|
4125
|
-
/* @__PURE__ */
|
|
4126
|
-
/* @__PURE__ */
|
|
4127
|
-
/* @__PURE__ */
|
|
4128
|
-
)), /* @__PURE__ */
|
|
4169
|
+
/* @__PURE__ */ React67.createElement(import_ui58.Tab, { label: (0, import_i18n31.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
4170
|
+
/* @__PURE__ */ React67.createElement(import_ui58.Tab, { label: (0, import_i18n31.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
4171
|
+
/* @__PURE__ */ React67.createElement(import_ui58.Tab, { label: (0, import_i18n31.__)("Color", "elementor"), ...getTabProps("color") })
|
|
4172
|
+
)), /* @__PURE__ */ React67.createElement(import_ui58.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React67.createElement(PopoverContent, null, /* @__PURE__ */ React67.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React67.createElement(import_ui58.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React67.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React67.createElement(import_ui58.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React67.createElement(PopoverContent, null, /* @__PURE__ */ React67.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
4129
4173
|
};
|
|
4130
4174
|
var ItemIcon3 = ({ value }) => {
|
|
4131
4175
|
switch (value.$$type) {
|
|
4132
4176
|
case "background-image-overlay":
|
|
4133
|
-
return /* @__PURE__ */
|
|
4177
|
+
return /* @__PURE__ */ React67.createElement(ItemIconImage, { value });
|
|
4134
4178
|
case "background-color-overlay":
|
|
4135
|
-
return /* @__PURE__ */
|
|
4179
|
+
return /* @__PURE__ */ React67.createElement(ItemIconColor, { value });
|
|
4136
4180
|
case "background-gradient-overlay":
|
|
4137
|
-
return /* @__PURE__ */
|
|
4181
|
+
return /* @__PURE__ */ React67.createElement(ItemIconGradient, { value });
|
|
4138
4182
|
default:
|
|
4139
4183
|
return null;
|
|
4140
4184
|
}
|
|
@@ -4147,12 +4191,12 @@ var extractColorFrom = (prop) => {
|
|
|
4147
4191
|
};
|
|
4148
4192
|
var ItemIconColor = ({ value: prop }) => {
|
|
4149
4193
|
const color = extractColorFrom(prop);
|
|
4150
|
-
return /* @__PURE__ */
|
|
4194
|
+
return /* @__PURE__ */ React67.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
|
|
4151
4195
|
};
|
|
4152
4196
|
var ItemIconImage = ({ value }) => {
|
|
4153
4197
|
const { imageUrl } = useImage(value);
|
|
4154
|
-
return /* @__PURE__ */
|
|
4155
|
-
|
|
4198
|
+
return /* @__PURE__ */ React67.createElement(
|
|
4199
|
+
import_ui58.CardMedia,
|
|
4156
4200
|
{
|
|
4157
4201
|
image: imageUrl,
|
|
4158
4202
|
sx: (theme) => ({
|
|
@@ -4166,43 +4210,43 @@ var ItemIconImage = ({ value }) => {
|
|
|
4166
4210
|
};
|
|
4167
4211
|
var ItemIconGradient = ({ value }) => {
|
|
4168
4212
|
const gradient = getGradientValue(value);
|
|
4169
|
-
return /* @__PURE__ */
|
|
4213
|
+
return /* @__PURE__ */ React67.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
4170
4214
|
};
|
|
4171
4215
|
var ItemLabel3 = ({ value }) => {
|
|
4172
4216
|
switch (value.$$type) {
|
|
4173
4217
|
case "background-image-overlay":
|
|
4174
|
-
return /* @__PURE__ */
|
|
4218
|
+
return /* @__PURE__ */ React67.createElement(ItemLabelImage, { value });
|
|
4175
4219
|
case "background-color-overlay":
|
|
4176
|
-
return /* @__PURE__ */
|
|
4220
|
+
return /* @__PURE__ */ React67.createElement(ItemLabelColor, { value });
|
|
4177
4221
|
case "background-gradient-overlay":
|
|
4178
|
-
return /* @__PURE__ */
|
|
4222
|
+
return /* @__PURE__ */ React67.createElement(ItemLabelGradient, { value });
|
|
4179
4223
|
default:
|
|
4180
4224
|
return null;
|
|
4181
4225
|
}
|
|
4182
4226
|
};
|
|
4183
4227
|
var ItemLabelColor = ({ value: prop }) => {
|
|
4184
4228
|
const color = extractColorFrom(prop);
|
|
4185
|
-
return /* @__PURE__ */
|
|
4229
|
+
return /* @__PURE__ */ React67.createElement("span", null, color);
|
|
4186
4230
|
};
|
|
4187
4231
|
var ItemLabelImage = ({ value }) => {
|
|
4188
4232
|
const { imageTitle } = useImage(value);
|
|
4189
|
-
return /* @__PURE__ */
|
|
4233
|
+
return /* @__PURE__ */ React67.createElement("span", null, imageTitle);
|
|
4190
4234
|
};
|
|
4191
4235
|
var ItemLabelGradient = ({ value }) => {
|
|
4192
4236
|
if (value.value.type.value === "linear") {
|
|
4193
|
-
return /* @__PURE__ */
|
|
4237
|
+
return /* @__PURE__ */ React67.createElement("span", null, (0, import_i18n31.__)("Linear Gradient", "elementor"));
|
|
4194
4238
|
}
|
|
4195
|
-
return /* @__PURE__ */
|
|
4239
|
+
return /* @__PURE__ */ React67.createElement("span", null, (0, import_i18n31.__)("Radial Gradient", "elementor"));
|
|
4196
4240
|
};
|
|
4197
4241
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
4198
|
-
const propContext = useBoundProp(
|
|
4199
|
-
return /* @__PURE__ */
|
|
4242
|
+
const propContext = useBoundProp(import_editor_props31.backgroundColorOverlayPropTypeUtil);
|
|
4243
|
+
return /* @__PURE__ */ React67.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React67.createElement(ColorControl, { anchorEl })));
|
|
4200
4244
|
};
|
|
4201
4245
|
var ImageOverlayContent = () => {
|
|
4202
|
-
const propContext = useBoundProp(
|
|
4203
|
-
return /* @__PURE__ */
|
|
4246
|
+
const propContext = useBoundProp(import_editor_props31.backgroundImageOverlayPropTypeUtil);
|
|
4247
|
+
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)));
|
|
4204
4248
|
};
|
|
4205
|
-
var StyledUnstableColorIndicator = (0,
|
|
4249
|
+
var StyledUnstableColorIndicator = (0, import_ui58.styled)(import_ui58.UnstableColorIndicator)(({ theme }) => ({
|
|
4206
4250
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
4207
4251
|
}));
|
|
4208
4252
|
var useImage = (image) => {
|
|
@@ -4237,16 +4281,16 @@ var getGradientValue = (value) => {
|
|
|
4237
4281
|
|
|
4238
4282
|
// src/controls/background-control/background-control.tsx
|
|
4239
4283
|
var BackgroundControl = createControl(() => {
|
|
4240
|
-
const propContext = useBoundProp(
|
|
4241
|
-
const colorLabel = (0,
|
|
4242
|
-
return /* @__PURE__ */
|
|
4284
|
+
const propContext = useBoundProp(import_editor_props32.backgroundPropTypeUtil);
|
|
4285
|
+
const colorLabel = (0, import_i18n32.__)("Color", "elementor");
|
|
4286
|
+
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(import_ui59.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(import_ui59.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React68.createElement(import_ui59.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(ColorControl, null)))));
|
|
4243
4287
|
});
|
|
4244
4288
|
|
|
4245
4289
|
// src/controls/repeatable-control.tsx
|
|
4246
|
-
var
|
|
4290
|
+
var React69 = __toESM(require("react"));
|
|
4247
4291
|
var import_react36 = require("react");
|
|
4248
|
-
var
|
|
4249
|
-
var
|
|
4292
|
+
var import_editor_props33 = require("@elementor/editor-props");
|
|
4293
|
+
var import_ui60 = require("@elementor/ui");
|
|
4250
4294
|
|
|
4251
4295
|
// src/hooks/use-repeatable-control-context.ts
|
|
4252
4296
|
var import_react35 = require("react");
|
|
@@ -4277,7 +4321,7 @@ var RepeatableControl = createControl(
|
|
|
4277
4321
|
return null;
|
|
4278
4322
|
}
|
|
4279
4323
|
const childArrayPropTypeUtil = (0, import_react36.useMemo)(
|
|
4280
|
-
() => (0,
|
|
4324
|
+
() => (0, import_editor_props33.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
4281
4325
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
4282
4326
|
);
|
|
4283
4327
|
const contextValue = (0, import_react36.useMemo)(
|
|
@@ -4289,7 +4333,7 @@ var RepeatableControl = createControl(
|
|
|
4289
4333
|
[childControlConfig, placeholder, patternLabel]
|
|
4290
4334
|
);
|
|
4291
4335
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
4292
|
-
return /* @__PURE__ */
|
|
4336
|
+
return /* @__PURE__ */ React69.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React69.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React69.createElement(
|
|
4293
4337
|
Repeater,
|
|
4294
4338
|
{
|
|
4295
4339
|
openOnAdd: true,
|
|
@@ -4310,12 +4354,12 @@ var RepeatableControl = createControl(
|
|
|
4310
4354
|
}
|
|
4311
4355
|
);
|
|
4312
4356
|
var ItemContent4 = ({ bind }) => {
|
|
4313
|
-
return /* @__PURE__ */
|
|
4357
|
+
return /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React69.createElement(Content3, null));
|
|
4314
4358
|
};
|
|
4315
|
-
var ItemIcon4 = () => /* @__PURE__ */
|
|
4359
|
+
var ItemIcon4 = () => /* @__PURE__ */ React69.createElement(React69.Fragment, null);
|
|
4316
4360
|
var Content3 = () => {
|
|
4317
4361
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
4318
|
-
return /* @__PURE__ */
|
|
4362
|
+
return /* @__PURE__ */ React69.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React69.createElement(PopoverGridContainer, null, /* @__PURE__ */ React69.createElement(ChildControl, { ...props })));
|
|
4319
4363
|
};
|
|
4320
4364
|
var interpolate = (template, data) => {
|
|
4321
4365
|
if (!data) {
|
|
@@ -4377,7 +4421,7 @@ var ItemLabel4 = ({ value }) => {
|
|
|
4377
4421
|
const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
|
|
4378
4422
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
4379
4423
|
const color = showPlaceholder ? "text.tertiary" : "text.primary";
|
|
4380
|
-
return /* @__PURE__ */
|
|
4424
|
+
return /* @__PURE__ */ React69.createElement(import_ui60.Box, { component: "span", color }, label);
|
|
4381
4425
|
};
|
|
4382
4426
|
var getAllProperties = (pattern) => {
|
|
4383
4427
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -4385,26 +4429,26 @@ var getAllProperties = (pattern) => {
|
|
|
4385
4429
|
};
|
|
4386
4430
|
|
|
4387
4431
|
// src/controls/key-value-control.tsx
|
|
4388
|
-
var
|
|
4432
|
+
var React70 = __toESM(require("react"));
|
|
4389
4433
|
var import_react37 = require("react");
|
|
4390
|
-
var
|
|
4391
|
-
var
|
|
4392
|
-
var
|
|
4434
|
+
var import_editor_props34 = require("@elementor/editor-props");
|
|
4435
|
+
var import_ui61 = require("@elementor/ui");
|
|
4436
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
4393
4437
|
var KeyValueControl = createControl((props = {}) => {
|
|
4394
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
4438
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props34.keyValuePropTypeUtil);
|
|
4395
4439
|
const [keyError, setKeyError] = (0, import_react37.useState)("");
|
|
4396
4440
|
const [valueError, setValueError] = (0, import_react37.useState)("");
|
|
4397
4441
|
const [sessionState, setSessionState] = (0, import_react37.useState)({
|
|
4398
4442
|
key: value?.key?.value || "",
|
|
4399
4443
|
value: value?.value?.value || ""
|
|
4400
4444
|
});
|
|
4401
|
-
const keyLabel = props.keyName || (0,
|
|
4402
|
-
const valueLabel = props.valueName || (0,
|
|
4445
|
+
const keyLabel = props.keyName || (0, import_i18n33.__)("Key", "elementor");
|
|
4446
|
+
const valueLabel = props.valueName || (0, import_i18n33.__)("Value", "elementor");
|
|
4403
4447
|
const [keyRegex, valueRegex, errMsg] = (0, import_react37.useMemo)(
|
|
4404
4448
|
() => [
|
|
4405
4449
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
4406
4450
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
4407
|
-
props.validationErrorMessage || (0,
|
|
4451
|
+
props.validationErrorMessage || (0, import_i18n33.__)("Invalid Format", "elementor")
|
|
4408
4452
|
],
|
|
4409
4453
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
4410
4454
|
);
|
|
@@ -4426,14 +4470,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4426
4470
|
return;
|
|
4427
4471
|
}
|
|
4428
4472
|
const newChangedValue = newValue[fieldType];
|
|
4429
|
-
if ((0,
|
|
4473
|
+
if ((0, import_editor_props34.isTransformable)(newChangedValue) && newChangedValue.$$type === "dynamic") {
|
|
4430
4474
|
setValue({
|
|
4431
4475
|
...value,
|
|
4432
4476
|
[fieldType]: newChangedValue
|
|
4433
4477
|
});
|
|
4434
4478
|
return;
|
|
4435
4479
|
}
|
|
4436
|
-
const extractedValue =
|
|
4480
|
+
const extractedValue = import_editor_props34.stringPropTypeUtil.extract(newChangedValue);
|
|
4437
4481
|
setSessionState((prev) => ({
|
|
4438
4482
|
...prev,
|
|
4439
4483
|
[fieldType]: extractedValue
|
|
@@ -4453,38 +4497,38 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
4453
4497
|
});
|
|
4454
4498
|
}
|
|
4455
4499
|
};
|
|
4456
|
-
return /* @__PURE__ */
|
|
4500
|
+
return /* @__PURE__ */ React70.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React70.createElement(import_ui61.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React70.createElement(import_ui61.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React70.createElement(import_ui61.FormLabel, { 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(import_ui61.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React70.createElement(import_ui61.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React70.createElement(import_ui61.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React70.createElement(
|
|
4457
4501
|
TextControl,
|
|
4458
4502
|
{
|
|
4459
4503
|
inputValue: sessionState.value,
|
|
4460
4504
|
error: !!valueError,
|
|
4461
4505
|
inputDisabled: !!keyError
|
|
4462
4506
|
}
|
|
4463
|
-
)), !!valueError && /* @__PURE__ */
|
|
4507
|
+
)), !!valueError && /* @__PURE__ */ React70.createElement(import_ui61.FormHelperText, { error: true }, valueError))));
|
|
4464
4508
|
});
|
|
4465
4509
|
|
|
4466
4510
|
// src/controls/position-control.tsx
|
|
4467
|
-
var
|
|
4468
|
-
var
|
|
4511
|
+
var React71 = __toESM(require("react"));
|
|
4512
|
+
var import_editor_props35 = require("@elementor/editor-props");
|
|
4469
4513
|
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
4470
4514
|
var import_icons24 = require("@elementor/icons");
|
|
4471
|
-
var
|
|
4472
|
-
var
|
|
4515
|
+
var import_ui62 = require("@elementor/ui");
|
|
4516
|
+
var import_i18n34 = require("@wordpress/i18n");
|
|
4473
4517
|
var positionOptions = [
|
|
4474
|
-
{ label: (0,
|
|
4475
|
-
{ label: (0,
|
|
4476
|
-
{ label: (0,
|
|
4477
|
-
{ label: (0,
|
|
4478
|
-
{ label: (0,
|
|
4479
|
-
{ label: (0,
|
|
4480
|
-
{ label: (0,
|
|
4481
|
-
{ label: (0,
|
|
4482
|
-
{ label: (0,
|
|
4483
|
-
{ label: (0,
|
|
4518
|
+
{ label: (0, import_i18n34.__)("Center center", "elementor"), value: "center center" },
|
|
4519
|
+
{ label: (0, import_i18n34.__)("Center left", "elementor"), value: "center left" },
|
|
4520
|
+
{ label: (0, import_i18n34.__)("Center right", "elementor"), value: "center right" },
|
|
4521
|
+
{ label: (0, import_i18n34.__)("Top center", "elementor"), value: "top center" },
|
|
4522
|
+
{ label: (0, import_i18n34.__)("Top left", "elementor"), value: "top left" },
|
|
4523
|
+
{ label: (0, import_i18n34.__)("Top right", "elementor"), value: "top right" },
|
|
4524
|
+
{ label: (0, import_i18n34.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
4525
|
+
{ label: (0, import_i18n34.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
4526
|
+
{ label: (0, import_i18n34.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
4527
|
+
{ label: (0, import_i18n34.__)("Custom", "elementor"), value: "custom" }
|
|
4484
4528
|
];
|
|
4485
4529
|
var PositionControl = () => {
|
|
4486
|
-
const positionContext = useBoundProp(
|
|
4487
|
-
const stringPropContext = useBoundProp(
|
|
4530
|
+
const positionContext = useBoundProp(import_editor_props35.positionPropTypeUtil);
|
|
4531
|
+
const stringPropContext = useBoundProp(import_editor_props35.stringPropTypeUtil);
|
|
4488
4532
|
const isCustom = !!positionContext.value;
|
|
4489
4533
|
const handlePositionChange = (event) => {
|
|
4490
4534
|
const value = event.target.value || null;
|
|
@@ -4494,8 +4538,8 @@ var PositionControl = () => {
|
|
|
4494
4538
|
stringPropContext.setValue(value);
|
|
4495
4539
|
}
|
|
4496
4540
|
};
|
|
4497
|
-
return /* @__PURE__ */
|
|
4498
|
-
|
|
4541
|
+
return /* @__PURE__ */ React71.createElement(import_ui62.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(ControlFormLabel, null, (0, import_i18n34.__)("Object position", "elementor"))), /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React71.createElement(
|
|
4542
|
+
import_ui62.Select,
|
|
4499
4543
|
{
|
|
4500
4544
|
size: "tiny",
|
|
4501
4545
|
disabled: stringPropContext.disabled,
|
|
@@ -4503,19 +4547,19 @@ var PositionControl = () => {
|
|
|
4503
4547
|
onChange: handlePositionChange,
|
|
4504
4548
|
fullWidth: true
|
|
4505
4549
|
},
|
|
4506
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
4507
|
-
)))), isCustom && /* @__PURE__ */
|
|
4550
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React71.createElement(import_editor_ui8.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
4551
|
+
)))), isCustom && /* @__PURE__ */ React71.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React71.createElement(SizeControl, { startIcon: /* @__PURE__ */ React71.createElement(import_icons24.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React71.createElement(import_ui62.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React71.createElement(SizeControl, { startIcon: /* @__PURE__ */ React71.createElement(import_icons24.LetterYIcon, { fontSize: "tiny" }) })))))));
|
|
4508
4552
|
};
|
|
4509
4553
|
|
|
4510
4554
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
4511
|
-
var
|
|
4512
|
-
var
|
|
4555
|
+
var React81 = __toESM(require("react"));
|
|
4556
|
+
var import_editor_props42 = require("@elementor/editor-props");
|
|
4513
4557
|
var import_icons30 = require("@elementor/icons");
|
|
4514
|
-
var
|
|
4515
|
-
var
|
|
4558
|
+
var import_ui72 = require("@elementor/ui");
|
|
4559
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
4516
4560
|
|
|
4517
4561
|
// src/controls/transform-control/initial-values.ts
|
|
4518
|
-
var
|
|
4562
|
+
var import_editor_props36 = require("@elementor/editor-props");
|
|
4519
4563
|
var TransformFunctionKeys = {
|
|
4520
4564
|
move: "transform-move",
|
|
4521
4565
|
scale: "transform-scale",
|
|
@@ -4545,175 +4589,175 @@ var initialTransformValue = {
|
|
|
4545
4589
|
z: { $$type: "size", value: { size: defaultValues.move.size, unit: defaultValues.move.unit } }
|
|
4546
4590
|
}
|
|
4547
4591
|
};
|
|
4548
|
-
var initialScaleValue =
|
|
4549
|
-
x:
|
|
4550
|
-
y:
|
|
4551
|
-
z:
|
|
4592
|
+
var initialScaleValue = import_editor_props36.scaleTransformPropTypeUtil.create({
|
|
4593
|
+
x: import_editor_props36.numberPropTypeUtil.create(defaultValues.scale),
|
|
4594
|
+
y: import_editor_props36.numberPropTypeUtil.create(defaultValues.scale),
|
|
4595
|
+
z: import_editor_props36.numberPropTypeUtil.create(defaultValues.scale)
|
|
4552
4596
|
});
|
|
4553
|
-
var initialRotateValue =
|
|
4597
|
+
var initialRotateValue = import_editor_props36.rotateTransformPropTypeUtil.create({
|
|
4554
4598
|
x: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
4555
4599
|
y: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
4556
4600
|
z: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } }
|
|
4557
4601
|
});
|
|
4558
|
-
var initialSkewValue =
|
|
4602
|
+
var initialSkewValue = import_editor_props36.skewTransformPropTypeUtil.create({
|
|
4559
4603
|
x: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } },
|
|
4560
4604
|
y: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } }
|
|
4561
4605
|
});
|
|
4562
4606
|
|
|
4563
4607
|
// src/controls/transform-control/transform-content.tsx
|
|
4564
|
-
var
|
|
4565
|
-
var
|
|
4566
|
-
var
|
|
4608
|
+
var React78 = __toESM(require("react"));
|
|
4609
|
+
var import_ui70 = require("@elementor/ui");
|
|
4610
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
4567
4611
|
|
|
4568
4612
|
// src/controls/transform-control/functions/move.tsx
|
|
4569
|
-
var
|
|
4613
|
+
var React73 = __toESM(require("react"));
|
|
4570
4614
|
var import_react38 = require("react");
|
|
4571
|
-
var
|
|
4615
|
+
var import_editor_props37 = require("@elementor/editor-props");
|
|
4572
4616
|
var import_icons25 = require("@elementor/icons");
|
|
4573
|
-
var
|
|
4574
|
-
var
|
|
4617
|
+
var import_ui64 = require("@elementor/ui");
|
|
4618
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
4575
4619
|
|
|
4576
4620
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
4577
|
-
var
|
|
4578
|
-
var
|
|
4621
|
+
var React72 = __toESM(require("react"));
|
|
4622
|
+
var import_ui63 = require("@elementor/ui");
|
|
4579
4623
|
var AxisRow = ({ label, bindValue, startIcon, anchorRef, units: units2 }) => {
|
|
4580
|
-
return /* @__PURE__ */
|
|
4624
|
+
return /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlLabel, null, label)), /* @__PURE__ */ React72.createElement(import_ui63.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React72.createElement(SizeControl, { anchorRef, startIcon, units: units2, variant: "angle" })))));
|
|
4581
4625
|
};
|
|
4582
4626
|
|
|
4583
4627
|
// src/controls/transform-control/functions/move.tsx
|
|
4584
4628
|
var moveAxisControls = [
|
|
4585
4629
|
{
|
|
4586
|
-
label: (0,
|
|
4630
|
+
label: (0, import_i18n35.__)("Move X", "elementor"),
|
|
4587
4631
|
bindValue: "x",
|
|
4588
|
-
startIcon: /* @__PURE__ */
|
|
4632
|
+
startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowRightIcon, { fontSize: "tiny" })
|
|
4589
4633
|
},
|
|
4590
4634
|
{
|
|
4591
|
-
label: (0,
|
|
4635
|
+
label: (0, import_i18n35.__)("Move Y", "elementor"),
|
|
4592
4636
|
bindValue: "y",
|
|
4593
|
-
startIcon: /* @__PURE__ */
|
|
4637
|
+
startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowDownSmallIcon, { fontSize: "tiny" })
|
|
4594
4638
|
},
|
|
4595
4639
|
{
|
|
4596
|
-
label: (0,
|
|
4640
|
+
label: (0, import_i18n35.__)("Move Z", "elementor"),
|
|
4597
4641
|
bindValue: "z",
|
|
4598
|
-
startIcon: /* @__PURE__ */
|
|
4642
|
+
startIcon: /* @__PURE__ */ React73.createElement(import_icons25.ArrowDownLeftIcon, { fontSize: "tiny" })
|
|
4599
4643
|
}
|
|
4600
4644
|
];
|
|
4601
4645
|
var Move = () => {
|
|
4602
|
-
const context = useBoundProp(
|
|
4646
|
+
const context = useBoundProp(import_editor_props37.moveTransformPropTypeUtil);
|
|
4603
4647
|
const rowRef = (0, import_react38.useRef)(null);
|
|
4604
|
-
return /* @__PURE__ */
|
|
4648
|
+
return /* @__PURE__ */ React73.createElement(import_ui64.Grid, { 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 })))));
|
|
4605
4649
|
};
|
|
4606
4650
|
|
|
4607
4651
|
// src/controls/transform-control/functions/rotate.tsx
|
|
4608
|
-
var
|
|
4652
|
+
var React74 = __toESM(require("react"));
|
|
4609
4653
|
var import_react39 = require("react");
|
|
4610
|
-
var
|
|
4654
|
+
var import_editor_props38 = require("@elementor/editor-props");
|
|
4611
4655
|
var import_icons26 = require("@elementor/icons");
|
|
4612
|
-
var
|
|
4613
|
-
var
|
|
4656
|
+
var import_ui65 = require("@elementor/ui");
|
|
4657
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
4614
4658
|
var rotateAxisControls = [
|
|
4615
4659
|
{
|
|
4616
|
-
label: (0,
|
|
4660
|
+
label: (0, import_i18n36.__)("Rotate X", "elementor"),
|
|
4617
4661
|
bindValue: "x",
|
|
4618
|
-
startIcon: /* @__PURE__ */
|
|
4662
|
+
startIcon: /* @__PURE__ */ React74.createElement(import_icons26.Arrow360Icon, { fontSize: "tiny" })
|
|
4619
4663
|
},
|
|
4620
4664
|
{
|
|
4621
|
-
label: (0,
|
|
4665
|
+
label: (0, import_i18n36.__)("Rotate Y", "elementor"),
|
|
4622
4666
|
bindValue: "y",
|
|
4623
|
-
startIcon: /* @__PURE__ */
|
|
4667
|
+
startIcon: /* @__PURE__ */ React74.createElement(import_icons26.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
4624
4668
|
},
|
|
4625
4669
|
{
|
|
4626
|
-
label: (0,
|
|
4670
|
+
label: (0, import_i18n36.__)("Rotate Z", "elementor"),
|
|
4627
4671
|
bindValue: "z",
|
|
4628
|
-
startIcon: /* @__PURE__ */
|
|
4672
|
+
startIcon: /* @__PURE__ */ React74.createElement(import_icons26.RotateClockwiseIcon, { fontSize: "tiny" })
|
|
4629
4673
|
}
|
|
4630
4674
|
];
|
|
4631
4675
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
4632
4676
|
var Rotate = () => {
|
|
4633
|
-
const context = useBoundProp(
|
|
4677
|
+
const context = useBoundProp(import_editor_props38.rotateTransformPropTypeUtil);
|
|
4634
4678
|
const rowRef = (0, import_react39.useRef)(null);
|
|
4635
|
-
return /* @__PURE__ */
|
|
4679
|
+
return /* @__PURE__ */ React74.createElement(import_ui65.Grid, { 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 })))));
|
|
4636
4680
|
};
|
|
4637
4681
|
|
|
4638
4682
|
// src/controls/transform-control/functions/scale.tsx
|
|
4639
|
-
var
|
|
4683
|
+
var React76 = __toESM(require("react"));
|
|
4640
4684
|
var import_react40 = require("react");
|
|
4641
|
-
var
|
|
4685
|
+
var import_editor_props39 = require("@elementor/editor-props");
|
|
4642
4686
|
var import_icons27 = require("@elementor/icons");
|
|
4643
|
-
var
|
|
4644
|
-
var
|
|
4687
|
+
var import_ui67 = require("@elementor/ui");
|
|
4688
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
4645
4689
|
|
|
4646
4690
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
4647
|
-
var
|
|
4648
|
-
var
|
|
4691
|
+
var React75 = __toESM(require("react"));
|
|
4692
|
+
var import_ui66 = require("@elementor/ui");
|
|
4649
4693
|
var ScaleAxisRow = ({ label, bindValue, startIcon, anchorRef }) => {
|
|
4650
|
-
return /* @__PURE__ */
|
|
4694
|
+
return /* @__PURE__ */ React75.createElement(import_ui66.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React75.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React75.createElement(import_ui66.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlLabel, null, label)), /* @__PURE__ */ React75.createElement(import_ui66.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React75.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
4651
4695
|
};
|
|
4652
4696
|
|
|
4653
4697
|
// src/controls/transform-control/functions/scale.tsx
|
|
4654
4698
|
var scaleAxisControls = [
|
|
4655
4699
|
{
|
|
4656
|
-
label: (0,
|
|
4700
|
+
label: (0, import_i18n37.__)("Scale X", "elementor"),
|
|
4657
4701
|
bindValue: "x",
|
|
4658
|
-
startIcon: /* @__PURE__ */
|
|
4702
|
+
startIcon: /* @__PURE__ */ React76.createElement(import_icons27.ArrowRightIcon, { fontSize: "tiny" })
|
|
4659
4703
|
},
|
|
4660
4704
|
{
|
|
4661
|
-
label: (0,
|
|
4705
|
+
label: (0, import_i18n37.__)("Scale Y", "elementor"),
|
|
4662
4706
|
bindValue: "y",
|
|
4663
|
-
startIcon: /* @__PURE__ */
|
|
4707
|
+
startIcon: /* @__PURE__ */ React76.createElement(import_icons27.ArrowDownSmallIcon, { fontSize: "tiny" })
|
|
4664
4708
|
},
|
|
4665
4709
|
{
|
|
4666
|
-
label: (0,
|
|
4710
|
+
label: (0, import_i18n37.__)("Scale Z", "elementor"),
|
|
4667
4711
|
bindValue: "z",
|
|
4668
|
-
startIcon: /* @__PURE__ */
|
|
4712
|
+
startIcon: /* @__PURE__ */ React76.createElement(import_icons27.ArrowDownLeftIcon, { fontSize: "tiny" })
|
|
4669
4713
|
}
|
|
4670
4714
|
];
|
|
4671
4715
|
var Scale = () => {
|
|
4672
|
-
const context = useBoundProp(
|
|
4716
|
+
const context = useBoundProp(import_editor_props39.scaleTransformPropTypeUtil);
|
|
4673
4717
|
const rowRef = (0, import_react40.useRef)(null);
|
|
4674
|
-
return /* @__PURE__ */
|
|
4718
|
+
return /* @__PURE__ */ React76.createElement(import_ui67.Grid, { 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 })))));
|
|
4675
4719
|
};
|
|
4676
4720
|
|
|
4677
4721
|
// src/controls/transform-control/functions/skew.tsx
|
|
4678
|
-
var
|
|
4722
|
+
var React77 = __toESM(require("react"));
|
|
4679
4723
|
var import_react41 = require("react");
|
|
4680
|
-
var
|
|
4724
|
+
var import_editor_props40 = require("@elementor/editor-props");
|
|
4681
4725
|
var import_icons28 = require("@elementor/icons");
|
|
4682
|
-
var
|
|
4683
|
-
var
|
|
4726
|
+
var import_ui68 = require("@elementor/ui");
|
|
4727
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
4684
4728
|
var skewAxisControls = [
|
|
4685
4729
|
{
|
|
4686
|
-
label: (0,
|
|
4730
|
+
label: (0, import_i18n38.__)("Skew X", "elementor"),
|
|
4687
4731
|
bindValue: "x",
|
|
4688
|
-
startIcon: /* @__PURE__ */
|
|
4732
|
+
startIcon: /* @__PURE__ */ React77.createElement(import_icons28.ArrowRightIcon, { fontSize: "tiny" })
|
|
4689
4733
|
},
|
|
4690
4734
|
{
|
|
4691
|
-
label: (0,
|
|
4735
|
+
label: (0, import_i18n38.__)("Skew Y", "elementor"),
|
|
4692
4736
|
bindValue: "y",
|
|
4693
|
-
startIcon: /* @__PURE__ */
|
|
4737
|
+
startIcon: /* @__PURE__ */ React77.createElement(import_icons28.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
4694
4738
|
}
|
|
4695
4739
|
];
|
|
4696
4740
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
4697
4741
|
var Skew = () => {
|
|
4698
|
-
const context = useBoundProp(
|
|
4742
|
+
const context = useBoundProp(import_editor_props40.skewTransformPropTypeUtil);
|
|
4699
4743
|
const rowRef = (0, import_react41.useRef)(null);
|
|
4700
|
-
return /* @__PURE__ */
|
|
4744
|
+
return /* @__PURE__ */ React77.createElement(import_ui68.Grid, { 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 })))));
|
|
4701
4745
|
};
|
|
4702
4746
|
|
|
4703
4747
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
4704
4748
|
var import_react42 = require("react");
|
|
4705
|
-
var
|
|
4706
|
-
var
|
|
4749
|
+
var import_editor_props41 = require("@elementor/editor-props");
|
|
4750
|
+
var import_ui69 = require("@elementor/ui");
|
|
4707
4751
|
var useTransformTabsHistory = ({
|
|
4708
4752
|
move: initialMove,
|
|
4709
4753
|
scale: initialScale,
|
|
4710
4754
|
rotate: initialRotate,
|
|
4711
4755
|
skew: initialSkew
|
|
4712
4756
|
}) => {
|
|
4713
|
-
const { value: moveValue, setValue: setMoveValue } = useBoundProp(
|
|
4714
|
-
const { value: scaleValue, setValue: setScaleValue } = useBoundProp(
|
|
4715
|
-
const { value: rotateValue, setValue: setRotateValue } = useBoundProp(
|
|
4716
|
-
const { value: skewValue, setValue: setSkewValue } = useBoundProp(
|
|
4757
|
+
const { value: moveValue, setValue: setMoveValue } = useBoundProp(import_editor_props41.moveTransformPropTypeUtil);
|
|
4758
|
+
const { value: scaleValue, setValue: setScaleValue } = useBoundProp(import_editor_props41.scaleTransformPropTypeUtil);
|
|
4759
|
+
const { value: rotateValue, setValue: setRotateValue } = useBoundProp(import_editor_props41.rotateTransformPropTypeUtil);
|
|
4760
|
+
const { value: skewValue, setValue: setSkewValue } = useBoundProp(import_editor_props41.skewTransformPropTypeUtil);
|
|
4717
4761
|
const { openItemIndex, items: items2 } = useRepeaterContext();
|
|
4718
4762
|
const getCurrentTransformType = () => {
|
|
4719
4763
|
switch (true) {
|
|
@@ -4727,7 +4771,7 @@ var useTransformTabsHistory = ({
|
|
|
4727
4771
|
return TransformFunctionKeys.move;
|
|
4728
4772
|
}
|
|
4729
4773
|
};
|
|
4730
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
4774
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui69.useTabs)(getCurrentTransformType());
|
|
4731
4775
|
const valuesHistory = (0, import_react42.useRef)({
|
|
4732
4776
|
move: initialMove,
|
|
4733
4777
|
scale: initialScale,
|
|
@@ -4789,8 +4833,8 @@ var TransformContent = () => {
|
|
|
4789
4833
|
rotate: initialRotateValue.value,
|
|
4790
4834
|
skew: initialSkewValue.value
|
|
4791
4835
|
});
|
|
4792
|
-
return /* @__PURE__ */
|
|
4793
|
-
|
|
4836
|
+
return /* @__PURE__ */ React78.createElement(PopoverContent, null, /* @__PURE__ */ React78.createElement(import_ui70.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React78.createElement(import_ui70.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React78.createElement(
|
|
4837
|
+
import_ui70.Tabs,
|
|
4794
4838
|
{
|
|
4795
4839
|
size: "small",
|
|
4796
4840
|
variant: "fullWidth",
|
|
@@ -4800,37 +4844,37 @@ var TransformContent = () => {
|
|
|
4800
4844
|
}
|
|
4801
4845
|
},
|
|
4802
4846
|
...getTabsProps(),
|
|
4803
|
-
"aria-label": (0,
|
|
4847
|
+
"aria-label": (0, import_i18n39.__)("Transform", "elementor")
|
|
4804
4848
|
},
|
|
4805
|
-
/* @__PURE__ */
|
|
4806
|
-
/* @__PURE__ */
|
|
4807
|
-
/* @__PURE__ */
|
|
4808
|
-
/* @__PURE__ */
|
|
4809
|
-
)), /* @__PURE__ */
|
|
4849
|
+
/* @__PURE__ */ React78.createElement(import_ui70.Tab, { label: (0, import_i18n39.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
4850
|
+
/* @__PURE__ */ React78.createElement(import_ui70.Tab, { label: (0, import_i18n39.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
4851
|
+
/* @__PURE__ */ React78.createElement(import_ui70.Tab, { label: (0, import_i18n39.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
4852
|
+
/* @__PURE__ */ React78.createElement(import_ui70.Tab, { label: (0, import_i18n39.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
4853
|
+
)), /* @__PURE__ */ React78.createElement(import_ui70.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React78.createElement(Move, null)), /* @__PURE__ */ React78.createElement(import_ui70.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React78.createElement(Scale, null)), /* @__PURE__ */ React78.createElement(import_ui70.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React78.createElement(Rotate, null)), /* @__PURE__ */ React78.createElement(import_ui70.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React78.createElement(Skew, null))));
|
|
4810
4854
|
};
|
|
4811
4855
|
|
|
4812
4856
|
// src/controls/transform-control/transform-icon.tsx
|
|
4813
|
-
var
|
|
4857
|
+
var React79 = __toESM(require("react"));
|
|
4814
4858
|
var import_icons29 = require("@elementor/icons");
|
|
4815
4859
|
var TransformIcon = ({ value }) => {
|
|
4816
4860
|
switch (value.$$type) {
|
|
4817
4861
|
case TransformFunctionKeys.move:
|
|
4818
|
-
return /* @__PURE__ */
|
|
4862
|
+
return /* @__PURE__ */ React79.createElement(import_icons29.ArrowsMaximizeIcon, { fontSize: "tiny" });
|
|
4819
4863
|
case TransformFunctionKeys.scale:
|
|
4820
|
-
return /* @__PURE__ */
|
|
4864
|
+
return /* @__PURE__ */ React79.createElement(import_icons29.ExpandIcon, { fontSize: "tiny" });
|
|
4821
4865
|
case TransformFunctionKeys.rotate:
|
|
4822
|
-
return /* @__PURE__ */
|
|
4866
|
+
return /* @__PURE__ */ React79.createElement(import_icons29.RotateClockwise2Icon, { fontSize: "tiny" });
|
|
4823
4867
|
case TransformFunctionKeys.skew:
|
|
4824
|
-
return /* @__PURE__ */
|
|
4868
|
+
return /* @__PURE__ */ React79.createElement(import_icons29.SkewXIcon, { fontSize: "tiny" });
|
|
4825
4869
|
default:
|
|
4826
4870
|
return null;
|
|
4827
4871
|
}
|
|
4828
4872
|
};
|
|
4829
4873
|
|
|
4830
4874
|
// src/controls/transform-control/transform-label.tsx
|
|
4831
|
-
var
|
|
4832
|
-
var
|
|
4833
|
-
var
|
|
4875
|
+
var React80 = __toESM(require("react"));
|
|
4876
|
+
var import_ui71 = require("@elementor/ui");
|
|
4877
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
4834
4878
|
var transformMoveValue = (value) => Object.values(value).map((axis) => {
|
|
4835
4879
|
const size = axis?.value?.size ?? defaultValues.move.size;
|
|
4836
4880
|
const unit = axis?.value?.unit ?? defaultValues.move.unit;
|
|
@@ -4851,36 +4895,36 @@ var TransformLabel = (props) => {
|
|
|
4851
4895
|
const { $$type, value } = props.value;
|
|
4852
4896
|
switch ($$type) {
|
|
4853
4897
|
case TransformFunctionKeys.move:
|
|
4854
|
-
return /* @__PURE__ */
|
|
4898
|
+
return /* @__PURE__ */ React80.createElement(Label2, { label: (0, import_i18n40.__)("Move", "elementor"), value: transformMoveValue(value) });
|
|
4855
4899
|
case TransformFunctionKeys.scale:
|
|
4856
|
-
return /* @__PURE__ */
|
|
4900
|
+
return /* @__PURE__ */ React80.createElement(Label2, { label: (0, import_i18n40.__)("Scale", "elementor"), value: transformScaleValue(value) });
|
|
4857
4901
|
case TransformFunctionKeys.rotate:
|
|
4858
|
-
return /* @__PURE__ */
|
|
4902
|
+
return /* @__PURE__ */ React80.createElement(Label2, { label: (0, import_i18n40.__)("Rotate", "elementor"), value: transformRotateValue(value) });
|
|
4859
4903
|
case TransformFunctionKeys.skew:
|
|
4860
|
-
return /* @__PURE__ */
|
|
4904
|
+
return /* @__PURE__ */ React80.createElement(Label2, { label: (0, import_i18n40.__)("Skew", "elementor"), value: transformSkewValue(value) });
|
|
4861
4905
|
default:
|
|
4862
4906
|
return "";
|
|
4863
4907
|
}
|
|
4864
4908
|
};
|
|
4865
4909
|
var Label2 = ({ label, value }) => {
|
|
4866
|
-
return /* @__PURE__ */
|
|
4910
|
+
return /* @__PURE__ */ React80.createElement(import_ui71.Box, { component: "span" }, label, ": ", value);
|
|
4867
4911
|
};
|
|
4868
4912
|
|
|
4869
4913
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
4870
4914
|
var TransformRepeaterControl = createControl(() => {
|
|
4871
|
-
const { propType, value: transformValues, setValue } = useBoundProp(
|
|
4915
|
+
const { propType, value: transformValues, setValue } = useBoundProp(import_editor_props42.transformPropTypeUtil);
|
|
4872
4916
|
const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
|
|
4873
4917
|
const getInitialValue = () => {
|
|
4874
4918
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
4875
4919
|
};
|
|
4876
4920
|
const shouldDisableAddItem = !getInitialValue();
|
|
4877
|
-
return /* @__PURE__ */
|
|
4921
|
+
return /* @__PURE__ */ React81.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React81.createElement(
|
|
4878
4922
|
UnstableRepeater,
|
|
4879
4923
|
{
|
|
4880
4924
|
initial: getInitialValue() ?? initialTransformValue,
|
|
4881
|
-
propTypeUtil:
|
|
4925
|
+
propTypeUtil: import_editor_props42.transformPropTypeUtil
|
|
4882
4926
|
},
|
|
4883
|
-
/* @__PURE__ */
|
|
4927
|
+
/* @__PURE__ */ React81.createElement(Header, { label: (0, import_i18n41.__)("Transform", "elementor") }, /* @__PURE__ */ React81.createElement(
|
|
4884
4928
|
TooltipAddItemAction,
|
|
4885
4929
|
{
|
|
4886
4930
|
disabled: shouldDisableAddItem,
|
|
@@ -4888,25 +4932,25 @@ var TransformRepeaterControl = createControl(() => {
|
|
|
4888
4932
|
enableTooltip: shouldDisableAddItem
|
|
4889
4933
|
}
|
|
4890
4934
|
)),
|
|
4891
|
-
/* @__PURE__ */
|
|
4892
|
-
/* @__PURE__ */
|
|
4935
|
+
/* @__PURE__ */ React81.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React81.createElement(Item, { Icon: TransformIcon, Label: TransformLabel }) }, /* @__PURE__ */ React81.createElement(DisableItemAction, null), /* @__PURE__ */ React81.createElement(RemoveItemAction, null)),
|
|
4936
|
+
/* @__PURE__ */ React81.createElement(EditItemPopover, null, /* @__PURE__ */ React81.createElement(TransformContent, null))
|
|
4893
4937
|
));
|
|
4894
4938
|
});
|
|
4895
|
-
var ToolTip = /* @__PURE__ */
|
|
4939
|
+
var ToolTip = /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(import_icons30.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }), /* @__PURE__ */ React81.createElement(import_ui72.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n41.__)("You can use each kind of transform only once per element.", "elementor")));
|
|
4896
4940
|
|
|
4897
4941
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
4898
|
-
var
|
|
4899
|
-
var
|
|
4900
|
-
var
|
|
4942
|
+
var React84 = __toESM(require("react"));
|
|
4943
|
+
var import_editor_props45 = require("@elementor/editor-props");
|
|
4944
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
4901
4945
|
|
|
4902
4946
|
// src/controls/selection-size-control.tsx
|
|
4903
|
-
var
|
|
4947
|
+
var React82 = __toESM(require("react"));
|
|
4904
4948
|
var import_react43 = require("react");
|
|
4905
|
-
var
|
|
4906
|
-
var
|
|
4949
|
+
var import_editor_props43 = require("@elementor/editor-props");
|
|
4950
|
+
var import_ui73 = require("@elementor/ui");
|
|
4907
4951
|
var SelectionSizeControl = createControl(
|
|
4908
4952
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
4909
|
-
const { value, setValue, propType } = useBoundProp(
|
|
4953
|
+
const { value, setValue, propType } = useBoundProp(import_editor_props43.selectionSizePropTypeUtil);
|
|
4910
4954
|
const rowRef = (0, import_react43.useRef)(null);
|
|
4911
4955
|
const currentSizeConfig = (0, import_react43.useMemo)(() => {
|
|
4912
4956
|
switch (value.selection.$$type) {
|
|
@@ -4919,7 +4963,7 @@ var SelectionSizeControl = createControl(
|
|
|
4919
4963
|
}
|
|
4920
4964
|
}, [value, sizeConfigMap]);
|
|
4921
4965
|
const SelectionComponent = selectionConfig.component;
|
|
4922
|
-
return /* @__PURE__ */
|
|
4966
|
+
return /* @__PURE__ */ React82.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React82.createElement(import_ui73.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React82.createElement(import_ui73.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React82.createElement(import_ui73.Grid, { 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(import_ui73.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React82.createElement(ControlFormLabel, null, sizeLabel)), /* @__PURE__ */ React82.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React82.createElement(
|
|
4923
4967
|
SizeControl,
|
|
4924
4968
|
{
|
|
4925
4969
|
anchorRef: rowRef,
|
|
@@ -4932,12 +4976,12 @@ var SelectionSizeControl = createControl(
|
|
|
4932
4976
|
);
|
|
4933
4977
|
|
|
4934
4978
|
// src/controls/transition-control/data.ts
|
|
4935
|
-
var
|
|
4979
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
4936
4980
|
var initialTransitionValue = {
|
|
4937
4981
|
selection: {
|
|
4938
4982
|
$$type: "key-value",
|
|
4939
4983
|
value: {
|
|
4940
|
-
key: { value: (0,
|
|
4984
|
+
key: { value: (0, import_i18n42.__)("All properties", "elementor"), $$type: "string" },
|
|
4941
4985
|
value: { value: "all", $$type: "string" }
|
|
4942
4986
|
}
|
|
4943
4987
|
},
|
|
@@ -4945,9 +4989,9 @@ var initialTransitionValue = {
|
|
|
4945
4989
|
};
|
|
4946
4990
|
var transitionProperties = [
|
|
4947
4991
|
{
|
|
4948
|
-
label: (0,
|
|
4992
|
+
label: (0, import_i18n42.__)("Default", "elementor"),
|
|
4949
4993
|
type: "category",
|
|
4950
|
-
properties: [{ label: (0,
|
|
4994
|
+
properties: [{ label: (0, import_i18n42.__)("All properties", "elementor"), value: "all" }]
|
|
4951
4995
|
}
|
|
4952
4996
|
];
|
|
4953
4997
|
var transitionsItemsList = transitionProperties.map((category) => ({
|
|
@@ -4956,12 +5000,12 @@ var transitionsItemsList = transitionProperties.map((category) => ({
|
|
|
4956
5000
|
}));
|
|
4957
5001
|
|
|
4958
5002
|
// src/controls/transition-control/transition-selector.tsx
|
|
4959
|
-
var
|
|
5003
|
+
var React83 = __toESM(require("react"));
|
|
4960
5004
|
var import_react44 = require("react");
|
|
4961
|
-
var
|
|
5005
|
+
var import_editor_props44 = require("@elementor/editor-props");
|
|
4962
5006
|
var import_icons31 = require("@elementor/icons");
|
|
4963
|
-
var
|
|
4964
|
-
var
|
|
5007
|
+
var import_ui74 = require("@elementor/ui");
|
|
5008
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
4965
5009
|
var toTransitionSelectorValue = (label) => {
|
|
4966
5010
|
for (const category of transitionProperties) {
|
|
4967
5011
|
const property = category.properties.find((prop) => prop.label === label);
|
|
@@ -4983,13 +5027,13 @@ var findByValue = (value) => {
|
|
|
4983
5027
|
}
|
|
4984
5028
|
};
|
|
4985
5029
|
var TransitionSelector = ({ recentlyUsedList }) => {
|
|
4986
|
-
const { value, setValue } = useBoundProp(
|
|
5030
|
+
const { value, setValue } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
|
|
4987
5031
|
const {
|
|
4988
5032
|
value: { value: transitionValue },
|
|
4989
5033
|
key: { value: transitionLabel }
|
|
4990
5034
|
} = value;
|
|
4991
5035
|
const defaultRef = (0, import_react44.useRef)(null);
|
|
4992
|
-
const popoverState = (0,
|
|
5036
|
+
const popoverState = (0, import_ui74.usePopupState)({ variant: "popover" });
|
|
4993
5037
|
const getItemList = () => {
|
|
4994
5038
|
const recentItems = recentlyUsedList.map((item) => findByValue(item)).filter((item) => !!item);
|
|
4995
5039
|
const filteredItems = transitionsItemsList.map((category) => {
|
|
@@ -5003,7 +5047,7 @@ var TransitionSelector = ({ recentlyUsedList }) => {
|
|
|
5003
5047
|
}
|
|
5004
5048
|
return [
|
|
5005
5049
|
{
|
|
5006
|
-
label: (0,
|
|
5050
|
+
label: (0, import_i18n43.__)("Recent", "elementor"),
|
|
5007
5051
|
items: recentItems
|
|
5008
5052
|
},
|
|
5009
5053
|
...filteredItems
|
|
@@ -5027,27 +5071,27 @@ var TransitionSelector = ({ recentlyUsedList }) => {
|
|
|
5027
5071
|
left: rect.right + 36
|
|
5028
5072
|
};
|
|
5029
5073
|
};
|
|
5030
|
-
return /* @__PURE__ */
|
|
5031
|
-
|
|
5074
|
+
return /* @__PURE__ */ React83.createElement(import_ui74.Box, { ref: defaultRef }, /* @__PURE__ */ React83.createElement(
|
|
5075
|
+
import_ui74.UnstableTag,
|
|
5032
5076
|
{
|
|
5033
5077
|
variant: "outlined",
|
|
5034
5078
|
label: transitionLabel,
|
|
5035
|
-
endIcon: /* @__PURE__ */
|
|
5036
|
-
...(0,
|
|
5079
|
+
endIcon: /* @__PURE__ */ React83.createElement(import_icons31.ChevronDownIcon, { fontSize: "tiny" }),
|
|
5080
|
+
...(0, import_ui74.bindTrigger)(popoverState),
|
|
5037
5081
|
fullWidth: true
|
|
5038
5082
|
}
|
|
5039
|
-
), /* @__PURE__ */
|
|
5040
|
-
|
|
5083
|
+
), /* @__PURE__ */ React83.createElement(
|
|
5084
|
+
import_ui74.Popover,
|
|
5041
5085
|
{
|
|
5042
5086
|
disablePortal: true,
|
|
5043
5087
|
disableScrollLock: true,
|
|
5044
|
-
...(0,
|
|
5088
|
+
...(0, import_ui74.bindPopover)(popoverState),
|
|
5045
5089
|
anchorReference: "anchorPosition",
|
|
5046
5090
|
anchorPosition: getAnchorPosition(),
|
|
5047
5091
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
5048
5092
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
5049
5093
|
},
|
|
5050
|
-
/* @__PURE__ */
|
|
5094
|
+
/* @__PURE__ */ React83.createElement(
|
|
5051
5095
|
ItemSelector,
|
|
5052
5096
|
{
|
|
5053
5097
|
itemsList: getItemList(),
|
|
@@ -5055,7 +5099,7 @@ var TransitionSelector = ({ recentlyUsedList }) => {
|
|
|
5055
5099
|
onItemChange: handleTransitionPropertyChange,
|
|
5056
5100
|
onClose: popoverState.close,
|
|
5057
5101
|
sectionWidth: 268,
|
|
5058
|
-
title: (0,
|
|
5102
|
+
title: (0, import_i18n43.__)("Transition Property", "elementor"),
|
|
5059
5103
|
icon: import_icons31.VariationsIcon
|
|
5060
5104
|
}
|
|
5061
5105
|
)
|
|
@@ -5070,8 +5114,8 @@ var DURATION_CONFIG = {
|
|
|
5070
5114
|
};
|
|
5071
5115
|
var getSelectionSizeProps = (recentlyUsedList) => {
|
|
5072
5116
|
return {
|
|
5073
|
-
selectionLabel: (0,
|
|
5074
|
-
sizeLabel: (0,
|
|
5117
|
+
selectionLabel: (0, import_i18n44.__)("Type", "elementor"),
|
|
5118
|
+
sizeLabel: (0, import_i18n44.__)("Duration", "elementor"),
|
|
5075
5119
|
selectionConfig: {
|
|
5076
5120
|
component: TransitionSelector,
|
|
5077
5121
|
props: {
|
|
@@ -5093,19 +5137,19 @@ var getSelectionSizeProps = (recentlyUsedList) => {
|
|
|
5093
5137
|
};
|
|
5094
5138
|
function getChildControlConfig(recentlyUsedList) {
|
|
5095
5139
|
return {
|
|
5096
|
-
propTypeUtil:
|
|
5140
|
+
propTypeUtil: import_editor_props45.selectionSizePropTypeUtil,
|
|
5097
5141
|
component: SelectionSizeControl,
|
|
5098
5142
|
props: getSelectionSizeProps(recentlyUsedList)
|
|
5099
5143
|
};
|
|
5100
5144
|
}
|
|
5101
5145
|
var TransitionRepeaterControl = createControl((props) => {
|
|
5102
|
-
return /* @__PURE__ */
|
|
5146
|
+
return /* @__PURE__ */ React84.createElement(
|
|
5103
5147
|
RepeatableControl,
|
|
5104
5148
|
{
|
|
5105
|
-
label: (0,
|
|
5106
|
-
repeaterLabel: (0,
|
|
5149
|
+
label: (0, import_i18n44.__)("Transitions", "elementor"),
|
|
5150
|
+
repeaterLabel: (0, import_i18n44.__)("Transitions", "elementor"),
|
|
5107
5151
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
5108
|
-
placeholder: (0,
|
|
5152
|
+
placeholder: (0, import_i18n44.__)("Empty Transition", "elementor"),
|
|
5109
5153
|
showDuplicate: false,
|
|
5110
5154
|
showToggle: true,
|
|
5111
5155
|
initialValues: initialTransitionValue,
|
|
@@ -5116,14 +5160,14 @@ var TransitionRepeaterControl = createControl((props) => {
|
|
|
5116
5160
|
});
|
|
5117
5161
|
|
|
5118
5162
|
// src/components/css-code-editor/css-editor.tsx
|
|
5119
|
-
var
|
|
5163
|
+
var React86 = __toESM(require("react"));
|
|
5120
5164
|
var import_editor_responsive2 = require("@elementor/editor-responsive");
|
|
5121
|
-
var
|
|
5165
|
+
var import_ui76 = require("@elementor/ui");
|
|
5122
5166
|
var import_react45 = require("@monaco-editor/react");
|
|
5123
5167
|
|
|
5124
5168
|
// src/components/css-code-editor/css-editor.styles.ts
|
|
5125
|
-
var
|
|
5126
|
-
var EditorWrapper = (0,
|
|
5169
|
+
var import_ui75 = require("@elementor/ui");
|
|
5170
|
+
var EditorWrapper = (0, import_ui75.styled)(import_ui75.Box)`
|
|
5127
5171
|
border: 1px solid var( --e-a-border-color );
|
|
5128
5172
|
border-radius: 8px;
|
|
5129
5173
|
padding: 10px 12px;
|
|
@@ -5134,7 +5178,7 @@ var EditorWrapper = (0, import_ui74.styled)(import_ui74.Box)`
|
|
|
5134
5178
|
z-index: 99999999 !important;
|
|
5135
5179
|
}
|
|
5136
5180
|
`;
|
|
5137
|
-
var ResizeHandle = (0,
|
|
5181
|
+
var ResizeHandle = (0, import_ui75.styled)(import_ui75.Button)`
|
|
5138
5182
|
position: absolute;
|
|
5139
5183
|
bottom: 0;
|
|
5140
5184
|
left: 0;
|
|
@@ -5167,25 +5211,25 @@ var ResizeHandle = (0, import_ui74.styled)(import_ui74.Button)`
|
|
|
5167
5211
|
`;
|
|
5168
5212
|
|
|
5169
5213
|
// src/components/css-code-editor/css-validation.ts
|
|
5170
|
-
var
|
|
5214
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
5171
5215
|
var forbiddenPatterns = [
|
|
5172
5216
|
{
|
|
5173
5217
|
pattern: ":hover",
|
|
5174
|
-
message: (0,
|
|
5218
|
+
message: (0, import_i18n45.__)(
|
|
5175
5219
|
"The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.",
|
|
5176
5220
|
"elementor"
|
|
5177
5221
|
)
|
|
5178
5222
|
},
|
|
5179
5223
|
{
|
|
5180
5224
|
pattern: ":active",
|
|
5181
|
-
message: (0,
|
|
5225
|
+
message: (0, import_i18n45.__)(
|
|
5182
5226
|
"The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.",
|
|
5183
5227
|
"elementor"
|
|
5184
5228
|
)
|
|
5185
5229
|
},
|
|
5186
5230
|
{
|
|
5187
5231
|
pattern: "@media",
|
|
5188
|
-
message: (0,
|
|
5232
|
+
message: (0, import_i18n45.__)(
|
|
5189
5233
|
"The use of @media is not permitted. Instead, switch to the desired breakpoint and add your custom code there.",
|
|
5190
5234
|
"elementor"
|
|
5191
5235
|
)
|
|
@@ -5224,9 +5268,9 @@ function validate(editor, monaco) {
|
|
|
5224
5268
|
}
|
|
5225
5269
|
|
|
5226
5270
|
// src/components/css-code-editor/resize-handle.tsx
|
|
5227
|
-
var
|
|
5271
|
+
var React85 = __toESM(require("react"));
|
|
5228
5272
|
var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
|
|
5229
|
-
const handleResizeMove =
|
|
5273
|
+
const handleResizeMove = React85.useCallback(
|
|
5230
5274
|
(e) => {
|
|
5231
5275
|
const container = containerRef.current;
|
|
5232
5276
|
if (!container) {
|
|
@@ -5239,11 +5283,11 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
|
|
|
5239
5283
|
},
|
|
5240
5284
|
[containerRef, onResize, onHeightChange]
|
|
5241
5285
|
);
|
|
5242
|
-
const handleResizeEnd =
|
|
5286
|
+
const handleResizeEnd = React85.useCallback(() => {
|
|
5243
5287
|
document.removeEventListener("mousemove", handleResizeMove);
|
|
5244
5288
|
document.removeEventListener("mouseup", handleResizeEnd);
|
|
5245
5289
|
}, [handleResizeMove]);
|
|
5246
|
-
const handleResizeStart =
|
|
5290
|
+
const handleResizeStart = React85.useCallback(
|
|
5247
5291
|
(e) => {
|
|
5248
5292
|
e.preventDefault();
|
|
5249
5293
|
e.stopPropagation();
|
|
@@ -5252,13 +5296,13 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
|
|
|
5252
5296
|
},
|
|
5253
5297
|
[handleResizeMove, handleResizeEnd]
|
|
5254
5298
|
);
|
|
5255
|
-
|
|
5299
|
+
React85.useEffect(() => {
|
|
5256
5300
|
return () => {
|
|
5257
5301
|
document.removeEventListener("mousemove", handleResizeMove);
|
|
5258
5302
|
document.removeEventListener("mouseup", handleResizeEnd);
|
|
5259
5303
|
};
|
|
5260
5304
|
}, [handleResizeMove, handleResizeEnd]);
|
|
5261
|
-
return /* @__PURE__ */
|
|
5305
|
+
return /* @__PURE__ */ React85.createElement(
|
|
5262
5306
|
ResizeHandle,
|
|
5263
5307
|
{
|
|
5264
5308
|
onMouseDown: handleResizeStart,
|
|
@@ -5341,22 +5385,22 @@ var createEditorDidMountHandler = (editorRef, monacoRef, debounceTimer, onChange
|
|
|
5341
5385
|
};
|
|
5342
5386
|
};
|
|
5343
5387
|
var CssEditor = ({ value, onChange }) => {
|
|
5344
|
-
const theme = (0,
|
|
5345
|
-
const containerRef =
|
|
5346
|
-
const editorRef =
|
|
5347
|
-
const monacoRef =
|
|
5348
|
-
const debounceTimer =
|
|
5388
|
+
const theme = (0, import_ui76.useTheme)();
|
|
5389
|
+
const containerRef = React86.useRef(null);
|
|
5390
|
+
const editorRef = React86.useRef(null);
|
|
5391
|
+
const monacoRef = React86.useRef(null);
|
|
5392
|
+
const debounceTimer = React86.useRef(null);
|
|
5349
5393
|
const activeBreakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
|
|
5350
|
-
const handleResize =
|
|
5394
|
+
const handleResize = React86.useCallback(() => {
|
|
5351
5395
|
editorRef.current?.layout();
|
|
5352
5396
|
}, []);
|
|
5353
|
-
const handleHeightChange =
|
|
5397
|
+
const handleHeightChange = React86.useCallback((height) => {
|
|
5354
5398
|
if (containerRef.current) {
|
|
5355
5399
|
containerRef.current.style.height = `${height}px`;
|
|
5356
5400
|
}
|
|
5357
5401
|
}, []);
|
|
5358
5402
|
const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef, debounceTimer, onChange);
|
|
5359
|
-
|
|
5403
|
+
React86.useEffect(() => {
|
|
5360
5404
|
const timerRef = debounceTimer;
|
|
5361
5405
|
return () => {
|
|
5362
5406
|
const timer = timerRef.current;
|
|
@@ -5365,7 +5409,7 @@ var CssEditor = ({ value, onChange }) => {
|
|
|
5365
5409
|
}
|
|
5366
5410
|
};
|
|
5367
5411
|
}, []);
|
|
5368
|
-
return /* @__PURE__ */
|
|
5412
|
+
return /* @__PURE__ */ React86.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React86.createElement(
|
|
5369
5413
|
import_react45.Editor,
|
|
5370
5414
|
{
|
|
5371
5415
|
key: activeBreakpoint,
|
|
@@ -5386,7 +5430,7 @@ var CssEditor = ({ value, onChange }) => {
|
|
|
5386
5430
|
fixedOverflowWidgets: true
|
|
5387
5431
|
}
|
|
5388
5432
|
}
|
|
5389
|
-
), /* @__PURE__ */
|
|
5433
|
+
), /* @__PURE__ */ React86.createElement(
|
|
5390
5434
|
ResizeHandleComponent,
|
|
5391
5435
|
{
|
|
5392
5436
|
onResize: handleResize,
|