@elementor/editor-controls 0.34.2 → 0.36.0
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/CHANGELOG.md +21 -0
- package/dist/index.d.mts +11 -5
- package/dist/index.d.ts +11 -5
- package/dist/index.js +363 -312
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +316 -272
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/components/control-form-label.tsx +3 -3
- package/src/components/control-label.tsx +1 -1
- package/src/components/font-family-selector.tsx +282 -0
- package/src/components/repeater.tsx +2 -4
- package/src/components/sortable.tsx +4 -2
- package/src/controls/aspect-ratio-control.tsx +51 -48
- package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx +3 -2
- package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx +2 -1
- package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +1 -1
- package/src/controls/box-shadow-repeater-control.tsx +3 -3
- package/src/controls/equal-unequal-sizes-control.tsx +14 -4
- package/src/controls/font-family-control/font-family-control.tsx +12 -273
- package/src/controls/gap-control.tsx +3 -1
- package/src/controls/image-control.tsx +2 -2
- package/src/controls/link-control.tsx +1 -1
- package/src/controls/linked-dimensions-control.tsx +11 -4
- package/src/index.ts +1 -0
package/dist/index.js
CHANGED
|
@@ -42,6 +42,7 @@ __export(index_exports, {
|
|
|
42
42
|
ControlToggleButtonGroup: () => ControlToggleButtonGroup,
|
|
43
43
|
EqualUnequalSizesControl: () => EqualUnequalSizesControl,
|
|
44
44
|
FontFamilyControl: () => FontFamilyControl,
|
|
45
|
+
FontFamilySelector: () => FontFamilySelector,
|
|
45
46
|
GapControl: () => GapControl,
|
|
46
47
|
ImageControl: () => ImageControl,
|
|
47
48
|
LinkControl: () => LinkControl,
|
|
@@ -256,8 +257,8 @@ var resolveUnionPropType = (propType, key) => {
|
|
|
256
257
|
// src/components/control-form-label.tsx
|
|
257
258
|
var React3 = __toESM(require("react"));
|
|
258
259
|
var import_ui = require("@elementor/ui");
|
|
259
|
-
var ControlFormLabel = (
|
|
260
|
-
return /* @__PURE__ */ React3.createElement(import_ui.FormLabel, { size: "tiny" }
|
|
260
|
+
var ControlFormLabel = (props) => {
|
|
261
|
+
return /* @__PURE__ */ React3.createElement(import_ui.FormLabel, { size: "tiny", ...props });
|
|
261
262
|
};
|
|
262
263
|
|
|
263
264
|
// src/create-control.tsx
|
|
@@ -462,7 +463,7 @@ var ImageControl = createControl(
|
|
|
462
463
|
const propContext = useBoundProp(import_editor_props3.imagePropTypeUtil);
|
|
463
464
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
464
465
|
const mediaTypes = allowSvgUpload ? ["image", "svg"] : ["image"];
|
|
465
|
-
return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, ["all", "media"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null,
|
|
466
|
+
return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, ["all", "media"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, (0, import_i18n2.__)("Image", "elementor")), /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes })) : null, ["all", "sizes"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, resolutionLabel)), /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes })))) : null));
|
|
466
467
|
}
|
|
467
468
|
);
|
|
468
469
|
|
|
@@ -856,11 +857,12 @@ var import_ui16 = require("@elementor/ui");
|
|
|
856
857
|
var SortableProvider = (props) => {
|
|
857
858
|
return /* @__PURE__ */ React22.createElement(import_ui16.List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React22.createElement(import_ui16.UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
|
|
858
859
|
};
|
|
859
|
-
var SortableItem = ({ id, children }) => {
|
|
860
|
+
var SortableItem = ({ id, children, disabled }) => {
|
|
860
861
|
return /* @__PURE__ */ React22.createElement(
|
|
861
862
|
import_ui16.UnstableSortableItem,
|
|
862
863
|
{
|
|
863
864
|
id,
|
|
865
|
+
disabled,
|
|
864
866
|
render: ({
|
|
865
867
|
itemProps,
|
|
866
868
|
triggerProps,
|
|
@@ -869,7 +871,7 @@ var SortableItem = ({ id, children }) => {
|
|
|
869
871
|
showDropIndication,
|
|
870
872
|
dropIndicationStyle
|
|
871
873
|
}) => {
|
|
872
|
-
return /* @__PURE__ */ React22.createElement(StyledListItem, { ...itemProps, style: itemStyle }, /* @__PURE__ */ React22.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React22.createElement(StyledDivider, { style: dropIndicationStyle }));
|
|
874
|
+
return /* @__PURE__ */ React22.createElement(StyledListItem, { ...itemProps, style: itemStyle }, !disabled && /* @__PURE__ */ React22.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React22.createElement(StyledDivider, { style: dropIndicationStyle }));
|
|
873
875
|
}
|
|
874
876
|
}
|
|
875
877
|
);
|
|
@@ -997,7 +999,6 @@ var Repeater = ({
|
|
|
997
999
|
});
|
|
998
1000
|
});
|
|
999
1001
|
};
|
|
1000
|
-
const ItemWrapper = disabled ? React23.Fragment : SortableItem;
|
|
1001
1002
|
return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(
|
|
1002
1003
|
import_ui17.Stack,
|
|
1003
1004
|
{
|
|
@@ -1025,7 +1026,7 @@ var Repeater = ({
|
|
|
1025
1026
|
if (!value) {
|
|
1026
1027
|
return null;
|
|
1027
1028
|
}
|
|
1028
|
-
return /* @__PURE__ */ React23.createElement(
|
|
1029
|
+
return /* @__PURE__ */ React23.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled }, /* @__PURE__ */ React23.createElement(
|
|
1029
1030
|
RepeaterItem,
|
|
1030
1031
|
{
|
|
1031
1032
|
disabled,
|
|
@@ -1111,7 +1112,7 @@ var usePopover = (openOnMount, onOpen) => {
|
|
|
1111
1112
|
// src/controls/box-shadow-repeater-control.tsx
|
|
1112
1113
|
var BoxShadowRepeaterControl = createControl(() => {
|
|
1113
1114
|
const { propType, value, setValue, disabled } = useBoundProp(import_editor_props9.boxShadowPropTypeUtil);
|
|
1114
|
-
return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(
|
|
1115
|
+
return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue, disabled }, /* @__PURE__ */ React24.createElement(
|
|
1115
1116
|
Repeater,
|
|
1116
1117
|
{
|
|
1117
1118
|
openOnAdd: true,
|
|
@@ -1133,8 +1134,8 @@ var ItemContent = ({ anchorEl, bind }) => {
|
|
|
1133
1134
|
return /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(Content, { anchorEl }));
|
|
1134
1135
|
};
|
|
1135
1136
|
var Content = ({ anchorEl }) => {
|
|
1136
|
-
const
|
|
1137
|
-
return /* @__PURE__ */ React24.createElement(PropProvider, {
|
|
1137
|
+
const context = useBoundProp(import_editor_props9.shadowPropTypeUtil);
|
|
1138
|
+
return /* @__PURE__ */ React24.createElement(PropProvider, { ...context }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React24.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
|
|
1138
1139
|
SelectControl,
|
|
1139
1140
|
{
|
|
1140
1141
|
options: [
|
|
@@ -1481,7 +1482,7 @@ var import_i18n6 = require("@wordpress/i18n");
|
|
|
1481
1482
|
var React29 = __toESM(require("react"));
|
|
1482
1483
|
var import_ui22 = require("@elementor/ui");
|
|
1483
1484
|
var ControlLabel = ({ children }) => {
|
|
1484
|
-
return /* @__PURE__ */ React29.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap:
|
|
1485
|
+
return /* @__PURE__ */ React29.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React29.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React29.createElement(ControlAdornments, null));
|
|
1485
1486
|
};
|
|
1486
1487
|
|
|
1487
1488
|
// src/controls/equal-unequal-sizes-control.tsx
|
|
@@ -1511,7 +1512,7 @@ function EqualUnequalSizesControl({
|
|
|
1511
1512
|
setValue: setMultiSizeValue,
|
|
1512
1513
|
disabled: multiSizeDisabled
|
|
1513
1514
|
} = useBoundProp(multiSizePropTypeUtil);
|
|
1514
|
-
const { value: sizeValue, setValue: setSizeValue
|
|
1515
|
+
const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props12.sizePropTypeUtil);
|
|
1515
1516
|
const splitEqualValue = () => {
|
|
1516
1517
|
if (!sizeValue) {
|
|
1517
1518
|
return null;
|
|
@@ -1538,8 +1539,9 @@ function EqualUnequalSizesControl({
|
|
|
1538
1539
|
}
|
|
1539
1540
|
return splitEqualValue() ?? null;
|
|
1540
1541
|
};
|
|
1542
|
+
const isShowingGeneralIndicator = !(0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30") || !popupState.isOpen;
|
|
1541
1543
|
const isMixed = !!multiSizeValue;
|
|
1542
|
-
return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, label)), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React30.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React30.createElement(import_ui23.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
|
|
1544
|
+
return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React30.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React30.createElement(ControlLabel, null, label)), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React30.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React30.createElement(import_ui23.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
|
|
1543
1545
|
import_ui23.ToggleButton,
|
|
1544
1546
|
{
|
|
1545
1547
|
size: "tiny",
|
|
@@ -1547,8 +1549,7 @@ function EqualUnequalSizesControl({
|
|
|
1547
1549
|
sx: { marginLeft: "auto" },
|
|
1548
1550
|
...(0, import_ui23.bindToggle)(popupState),
|
|
1549
1551
|
selected: popupState.isOpen,
|
|
1550
|
-
"aria-label": tooltipLabel
|
|
1551
|
-
disabled: multiSizeDisabled || sizeDisabled
|
|
1552
|
+
"aria-label": tooltipLabel
|
|
1552
1553
|
},
|
|
1553
1554
|
icon
|
|
1554
1555
|
))))), /* @__PURE__ */ React30.createElement(
|
|
@@ -1569,7 +1570,16 @@ function EqualUnequalSizesControl({
|
|
|
1569
1570
|
paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } }
|
|
1570
1571
|
}
|
|
1571
1572
|
},
|
|
1572
|
-
/* @__PURE__ */ React30.createElement(
|
|
1573
|
+
/* @__PURE__ */ React30.createElement(
|
|
1574
|
+
PropProvider,
|
|
1575
|
+
{
|
|
1576
|
+
propType: multiSizePropType,
|
|
1577
|
+
value: getMultiSizeValues(),
|
|
1578
|
+
setValue: setNestedProp,
|
|
1579
|
+
disabled: multiSizeDisabled
|
|
1580
|
+
},
|
|
1581
|
+
/* @__PURE__ */ React30.createElement(PopoverContent, { p: 1.5, pt: 2.5, pb: 3 }, /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[2] }), /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[3] })))
|
|
1582
|
+
)
|
|
1573
1583
|
));
|
|
1574
1584
|
}
|
|
1575
1585
|
var MultiSizeValueControl = ({ item }) => {
|
|
@@ -1616,63 +1626,75 @@ var LinkedDimensionsControl = createControl(
|
|
|
1616
1626
|
const LinkedIcon = isLinked ? import_icons5.LinkIcon : import_icons5.DetachIcon;
|
|
1617
1627
|
const linkedLabel = (0, import_i18n7.__)("Link %s", "elementor").replace("%s", tooltipLabel);
|
|
1618
1628
|
const unlinkedLabel = (0, import_i18n7.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
|
|
1619
|
-
|
|
1620
|
-
|
|
1629
|
+
const disabled = sizeDisabled || dimensionsDisabled;
|
|
1630
|
+
return /* @__PURE__ */ React31.createElement(
|
|
1631
|
+
PropProvider,
|
|
1621
1632
|
{
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
sx: { marginLeft: "auto" },
|
|
1627
|
-
onChange: onLinkToggle,
|
|
1628
|
-
disabled: sizeDisabled || dimensionsDisabled
|
|
1633
|
+
propType,
|
|
1634
|
+
value: dimensionsValue,
|
|
1635
|
+
setValue: setDimensionsValue,
|
|
1636
|
+
disabled
|
|
1629
1637
|
},
|
|
1630
|
-
/* @__PURE__ */ React31.createElement(
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
}
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
}
|
|
1675
|
-
|
|
1638
|
+
/* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React31.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(
|
|
1639
|
+
import_ui24.ToggleButton,
|
|
1640
|
+
{
|
|
1641
|
+
"aria-label": isLinked ? unlinkedLabel : linkedLabel,
|
|
1642
|
+
size: "tiny",
|
|
1643
|
+
value: "check",
|
|
1644
|
+
selected: isLinked,
|
|
1645
|
+
sx: { marginLeft: "auto" },
|
|
1646
|
+
onChange: onLinkToggle,
|
|
1647
|
+
disabled
|
|
1648
|
+
},
|
|
1649
|
+
/* @__PURE__ */ React31.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1650
|
+
))),
|
|
1651
|
+
/* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-start", label: (0, import_i18n7.__)("Top", "elementor") })), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
|
|
1652
|
+
Control3,
|
|
1653
|
+
{
|
|
1654
|
+
bind: "block-start",
|
|
1655
|
+
startIcon: /* @__PURE__ */ React31.createElement(import_icons5.SideTopIcon, { fontSize: "tiny" }),
|
|
1656
|
+
isLinked,
|
|
1657
|
+
extendedValues
|
|
1658
|
+
}
|
|
1659
|
+
))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
|
|
1660
|
+
Label,
|
|
1661
|
+
{
|
|
1662
|
+
bind: "inline-end",
|
|
1663
|
+
label: isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor")
|
|
1664
|
+
}
|
|
1665
|
+
)), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
|
|
1666
|
+
Control3,
|
|
1667
|
+
{
|
|
1668
|
+
bind: "inline-end",
|
|
1669
|
+
startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(import_icons5.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(import_icons5.SideRightIcon, { fontSize: "tiny" }),
|
|
1670
|
+
isLinked,
|
|
1671
|
+
extendedValues
|
|
1672
|
+
}
|
|
1673
|
+
)))),
|
|
1674
|
+
/* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-end", label: (0, import_i18n7.__)("Bottom", "elementor") })), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
|
|
1675
|
+
Control3,
|
|
1676
|
+
{
|
|
1677
|
+
bind: "block-end",
|
|
1678
|
+
startIcon: /* @__PURE__ */ React31.createElement(import_icons5.SideBottomIcon, { fontSize: "tiny" }),
|
|
1679
|
+
isLinked,
|
|
1680
|
+
extendedValues
|
|
1681
|
+
}
|
|
1682
|
+
))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
|
|
1683
|
+
Label,
|
|
1684
|
+
{
|
|
1685
|
+
bind: "inline-start",
|
|
1686
|
+
label: isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor")
|
|
1687
|
+
}
|
|
1688
|
+
)), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
|
|
1689
|
+
Control3,
|
|
1690
|
+
{
|
|
1691
|
+
bind: "inline-start",
|
|
1692
|
+
isLinked,
|
|
1693
|
+
extendedValues,
|
|
1694
|
+
startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(import_icons5.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(import_icons5.SideLeftIcon, { fontSize: "tiny" })
|
|
1695
|
+
}
|
|
1696
|
+
))))
|
|
1697
|
+
);
|
|
1676
1698
|
}
|
|
1677
1699
|
);
|
|
1678
1700
|
var Control3 = ({
|
|
@@ -1695,15 +1717,27 @@ var Label = ({ label, bind }) => {
|
|
|
1695
1717
|
};
|
|
1696
1718
|
|
|
1697
1719
|
// src/controls/font-family-control/font-family-control.tsx
|
|
1698
|
-
var
|
|
1699
|
-
var import_react13 = require("react");
|
|
1720
|
+
var React33 = __toESM(require("react"));
|
|
1700
1721
|
var import_editor_props14 = require("@elementor/editor-props");
|
|
1722
|
+
var import_icons7 = require("@elementor/icons");
|
|
1723
|
+
var import_ui26 = require("@elementor/ui");
|
|
1724
|
+
|
|
1725
|
+
// src/components/font-family-selector.tsx
|
|
1726
|
+
var import_react13 = require("react");
|
|
1727
|
+
var React32 = __toESM(require("react"));
|
|
1728
|
+
var import_editor_ui3 = require("@elementor/editor-ui");
|
|
1701
1729
|
var import_icons6 = require("@elementor/icons");
|
|
1702
1730
|
var import_ui25 = require("@elementor/ui");
|
|
1703
1731
|
var import_utils2 = require("@elementor/utils");
|
|
1704
1732
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
1705
1733
|
var import_i18n8 = require("@wordpress/i18n");
|
|
1706
1734
|
|
|
1735
|
+
// src/controls/font-family-control/enqueue-font.tsx
|
|
1736
|
+
var enqueueFont = (fontFamily, context = "editor") => {
|
|
1737
|
+
const extendedWindow = window;
|
|
1738
|
+
return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
|
|
1739
|
+
};
|
|
1740
|
+
|
|
1707
1741
|
// src/hooks/use-filtered-font-families.ts
|
|
1708
1742
|
var useFilteredFontFamilies = (fontFamilies, searchValue) => {
|
|
1709
1743
|
return fontFamilies.reduce((acc, category) => {
|
|
@@ -1720,98 +1754,76 @@ var useFilteredFontFamilies = (fontFamilies, searchValue) => {
|
|
|
1720
1754
|
}, []);
|
|
1721
1755
|
};
|
|
1722
1756
|
|
|
1723
|
-
// src/
|
|
1724
|
-
var enqueueFont = (fontFamily, context = "editor") => {
|
|
1725
|
-
const extendedWindow = window;
|
|
1726
|
-
return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
|
|
1727
|
-
};
|
|
1728
|
-
|
|
1729
|
-
// src/controls/font-family-control/font-family-control.tsx
|
|
1757
|
+
// src/components/font-family-selector.tsx
|
|
1730
1758
|
var SIZE2 = "tiny";
|
|
1731
|
-
var
|
|
1759
|
+
var FontFamilySelector = ({
|
|
1760
|
+
fontFamilies,
|
|
1761
|
+
fontFamily,
|
|
1762
|
+
onFontFamilyChange,
|
|
1763
|
+
onClose
|
|
1764
|
+
}) => {
|
|
1732
1765
|
const [searchValue, setSearchValue] = (0, import_react13.useState)("");
|
|
1733
|
-
const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(import_editor_props14.stringPropTypeUtil);
|
|
1734
|
-
const popoverState = (0, import_ui25.usePopupState)({ variant: "popover" });
|
|
1735
1766
|
const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
|
|
1736
1767
|
const handleSearch = (event) => {
|
|
1737
1768
|
setSearchValue(event.target.value);
|
|
1738
1769
|
};
|
|
1739
1770
|
const handleClose = () => {
|
|
1740
1771
|
setSearchValue("");
|
|
1741
|
-
|
|
1772
|
+
onClose();
|
|
1742
1773
|
};
|
|
1743
|
-
return /* @__PURE__ */ React32.createElement(
|
|
1744
|
-
|
|
1774
|
+
return /* @__PURE__ */ React32.createElement(import_ui25.Stack, null, /* @__PURE__ */ React32.createElement(
|
|
1775
|
+
import_editor_ui3.PopoverHeader,
|
|
1745
1776
|
{
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
...(0, import_ui25.bindTrigger)(popoverState),
|
|
1750
|
-
fullWidth: true,
|
|
1751
|
-
disabled
|
|
1777
|
+
title: (0, import_i18n8.__)("Font Family", "elementor"),
|
|
1778
|
+
onClose: handleClose,
|
|
1779
|
+
icon: /* @__PURE__ */ React32.createElement(import_icons6.TextIcon, { fontSize: SIZE2 })
|
|
1752
1780
|
}
|
|
1753
|
-
)
|
|
1754
|
-
import_ui25.
|
|
1781
|
+
), /* @__PURE__ */ React32.createElement(import_ui25.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React32.createElement(
|
|
1782
|
+
import_ui25.TextField,
|
|
1755
1783
|
{
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
{
|
|
1765
|
-
autoFocus: true,
|
|
1766
|
-
fullWidth: true,
|
|
1767
|
-
size: SIZE2,
|
|
1768
|
-
value: searchValue,
|
|
1769
|
-
placeholder: (0, import_i18n8.__)("Search", "elementor"),
|
|
1770
|
-
onChange: handleSearch,
|
|
1771
|
-
InputProps: {
|
|
1772
|
-
startAdornment: /* @__PURE__ */ React32.createElement(import_ui25.InputAdornment, { position: "start" }, /* @__PURE__ */ React32.createElement(import_icons6.SearchIcon, { fontSize: SIZE2 }))
|
|
1773
|
-
}
|
|
1784
|
+
autoFocus: true,
|
|
1785
|
+
fullWidth: true,
|
|
1786
|
+
size: SIZE2,
|
|
1787
|
+
value: searchValue,
|
|
1788
|
+
placeholder: (0, import_i18n8.__)("Search", "elementor"),
|
|
1789
|
+
onChange: handleSearch,
|
|
1790
|
+
InputProps: {
|
|
1791
|
+
startAdornment: /* @__PURE__ */ React32.createElement(import_ui25.InputAdornment, { position: "start" }, /* @__PURE__ */ React32.createElement(import_icons6.SearchIcon, { fontSize: SIZE2 }))
|
|
1774
1792
|
}
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1793
|
+
}
|
|
1794
|
+
)), /* @__PURE__ */ React32.createElement(import_ui25.Divider, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React32.createElement(
|
|
1795
|
+
FontList,
|
|
1796
|
+
{
|
|
1797
|
+
fontListItems: filteredFontFamilies,
|
|
1798
|
+
setFontFamily: onFontFamilyChange,
|
|
1799
|
+
handleClose,
|
|
1800
|
+
fontFamily
|
|
1801
|
+
}
|
|
1802
|
+
) : /* @__PURE__ */ React32.createElement(import_ui25.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React32.createElement(import_ui25.Stack, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React32.createElement(import_icons6.TextIcon, { fontSize: "large" }), /* @__PURE__ */ React32.createElement(import_ui25.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React32.createElement(import_ui25.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React32.createElement(
|
|
1803
|
+
import_ui25.Typography,
|
|
1804
|
+
{
|
|
1805
|
+
variant: "subtitle2",
|
|
1806
|
+
color: "text.secondary",
|
|
1807
|
+
sx: {
|
|
1808
|
+
display: "flex",
|
|
1809
|
+
width: "100%",
|
|
1810
|
+
justifyContent: "center"
|
|
1782
1811
|
}
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
|
|
1799
|
-
},
|
|
1800
|
-
searchValue
|
|
1801
|
-
),
|
|
1802
|
-
/* @__PURE__ */ React32.createElement("span", null, "\u201D.")
|
|
1803
|
-
)), /* @__PURE__ */ React32.createElement(import_ui25.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React32.createElement(
|
|
1804
|
-
import_ui25.Link,
|
|
1805
|
-
{
|
|
1806
|
-
color: "secondary",
|
|
1807
|
-
variant: "caption",
|
|
1808
|
-
component: "button",
|
|
1809
|
-
onClick: () => setSearchValue("")
|
|
1810
|
-
},
|
|
1811
|
-
(0, import_i18n8.__)("Clear & try again", "elementor")
|
|
1812
|
-
)))))
|
|
1813
|
-
));
|
|
1814
|
-
});
|
|
1812
|
+
},
|
|
1813
|
+
/* @__PURE__ */ React32.createElement("span", null, "\u201C"),
|
|
1814
|
+
/* @__PURE__ */ React32.createElement("span", { style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" } }, searchValue),
|
|
1815
|
+
/* @__PURE__ */ React32.createElement("span", null, "\u201D.")
|
|
1816
|
+
)), /* @__PURE__ */ React32.createElement(import_ui25.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React32.createElement(
|
|
1817
|
+
import_ui25.Link,
|
|
1818
|
+
{
|
|
1819
|
+
color: "secondary",
|
|
1820
|
+
variant: "caption",
|
|
1821
|
+
component: "button",
|
|
1822
|
+
onClick: () => setSearchValue("")
|
|
1823
|
+
},
|
|
1824
|
+
(0, import_i18n8.__)("Clear & try again", "elementor")
|
|
1825
|
+
)))));
|
|
1826
|
+
};
|
|
1815
1827
|
var LIST_ITEM_HEIGHT = 36;
|
|
1816
1828
|
var LIST_ITEMS_BUFFER = 6;
|
|
1817
1829
|
var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
|
|
@@ -1945,15 +1957,50 @@ var useDebounce = (fn, delay) => {
|
|
|
1945
1957
|
return debouncedFn;
|
|
1946
1958
|
};
|
|
1947
1959
|
|
|
1960
|
+
// src/controls/font-family-control/font-family-control.tsx
|
|
1961
|
+
var SIZE3 = "tiny";
|
|
1962
|
+
var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
1963
|
+
const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(import_editor_props14.stringPropTypeUtil);
|
|
1964
|
+
const popoverState = (0, import_ui26.usePopupState)({ variant: "popover" });
|
|
1965
|
+
return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(
|
|
1966
|
+
import_ui26.UnstableTag,
|
|
1967
|
+
{
|
|
1968
|
+
variant: "outlined",
|
|
1969
|
+
label: fontFamily,
|
|
1970
|
+
endIcon: /* @__PURE__ */ React33.createElement(import_icons7.ChevronDownIcon, { fontSize: SIZE3 }),
|
|
1971
|
+
...(0, import_ui26.bindTrigger)(popoverState),
|
|
1972
|
+
fullWidth: true,
|
|
1973
|
+
disabled
|
|
1974
|
+
}
|
|
1975
|
+
)), /* @__PURE__ */ React33.createElement(
|
|
1976
|
+
import_ui26.Popover,
|
|
1977
|
+
{
|
|
1978
|
+
disablePortal: true,
|
|
1979
|
+
disableScrollLock: true,
|
|
1980
|
+
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
1981
|
+
...(0, import_ui26.bindPopover)(popoverState)
|
|
1982
|
+
},
|
|
1983
|
+
/* @__PURE__ */ React33.createElement(
|
|
1984
|
+
FontFamilySelector,
|
|
1985
|
+
{
|
|
1986
|
+
fontFamilies,
|
|
1987
|
+
fontFamily,
|
|
1988
|
+
onFontFamilyChange: setFontFamily,
|
|
1989
|
+
onClose: popoverState.close
|
|
1990
|
+
}
|
|
1991
|
+
)
|
|
1992
|
+
));
|
|
1993
|
+
});
|
|
1994
|
+
|
|
1948
1995
|
// src/controls/url-control.tsx
|
|
1949
|
-
var
|
|
1996
|
+
var React34 = __toESM(require("react"));
|
|
1950
1997
|
var import_editor_props15 = require("@elementor/editor-props");
|
|
1951
|
-
var
|
|
1998
|
+
var import_ui27 = require("@elementor/ui");
|
|
1952
1999
|
var UrlControl = createControl(({ placeholder }) => {
|
|
1953
2000
|
const { value, setValue, disabled } = useBoundProp(import_editor_props15.urlPropTypeUtil);
|
|
1954
2001
|
const handleChange = (event) => setValue(event.target.value);
|
|
1955
|
-
return /* @__PURE__ */
|
|
1956
|
-
|
|
2002
|
+
return /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
|
|
2003
|
+
import_ui27.TextField,
|
|
1957
2004
|
{
|
|
1958
2005
|
size: "tiny",
|
|
1959
2006
|
fullWidth: true,
|
|
@@ -1966,23 +2013,23 @@ var UrlControl = createControl(({ placeholder }) => {
|
|
|
1966
2013
|
});
|
|
1967
2014
|
|
|
1968
2015
|
// src/controls/link-control.tsx
|
|
1969
|
-
var
|
|
2016
|
+
var React36 = __toESM(require("react"));
|
|
1970
2017
|
var import_react15 = require("react");
|
|
1971
2018
|
var import_editor_elements = require("@elementor/editor-elements");
|
|
1972
2019
|
var import_editor_props16 = require("@elementor/editor-props");
|
|
1973
|
-
var
|
|
2020
|
+
var import_editor_ui4 = require("@elementor/editor-ui");
|
|
1974
2021
|
var import_http_client2 = require("@elementor/http-client");
|
|
1975
|
-
var
|
|
2022
|
+
var import_icons9 = require("@elementor/icons");
|
|
1976
2023
|
var import_session = require("@elementor/session");
|
|
1977
|
-
var
|
|
2024
|
+
var import_ui29 = require("@elementor/ui");
|
|
1978
2025
|
var import_utils3 = require("@elementor/utils");
|
|
1979
2026
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1980
2027
|
|
|
1981
2028
|
// src/components/autocomplete.tsx
|
|
1982
|
-
var
|
|
2029
|
+
var React35 = __toESM(require("react"));
|
|
1983
2030
|
var import_react14 = require("react");
|
|
1984
|
-
var
|
|
1985
|
-
var
|
|
2031
|
+
var import_icons8 = require("@elementor/icons");
|
|
2032
|
+
var import_ui28 = require("@elementor/ui");
|
|
1986
2033
|
var Autocomplete = (0, import_react14.forwardRef)((props, ref) => {
|
|
1987
2034
|
const {
|
|
1988
2035
|
options,
|
|
@@ -1999,8 +2046,8 @@ var Autocomplete = (0, import_react14.forwardRef)((props, ref) => {
|
|
|
1999
2046
|
const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
|
|
2000
2047
|
const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
|
|
2001
2048
|
const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
|
|
2002
|
-
return /* @__PURE__ */
|
|
2003
|
-
|
|
2049
|
+
return /* @__PURE__ */ React35.createElement(
|
|
2050
|
+
import_ui28.Autocomplete,
|
|
2004
2051
|
{
|
|
2005
2052
|
...restProps,
|
|
2006
2053
|
ref,
|
|
@@ -2017,8 +2064,8 @@ var Autocomplete = (0, import_react14.forwardRef)((props, ref) => {
|
|
|
2017
2064
|
groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
|
|
2018
2065
|
isOptionEqualToValue,
|
|
2019
2066
|
filterOptions: () => optionKeys,
|
|
2020
|
-
renderOption: (optionProps, optionId) => /* @__PURE__ */
|
|
2021
|
-
renderInput: (params) => /* @__PURE__ */
|
|
2067
|
+
renderOption: (optionProps, optionId) => /* @__PURE__ */ React35.createElement(import_ui28.Box, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
|
|
2068
|
+
renderInput: (params) => /* @__PURE__ */ React35.createElement(
|
|
2022
2069
|
TextInput,
|
|
2023
2070
|
{
|
|
2024
2071
|
params,
|
|
@@ -2041,8 +2088,8 @@ var TextInput = ({
|
|
|
2041
2088
|
const onChange = (event) => {
|
|
2042
2089
|
handleChange(event.target.value);
|
|
2043
2090
|
};
|
|
2044
|
-
return /* @__PURE__ */
|
|
2045
|
-
|
|
2091
|
+
return /* @__PURE__ */ React35.createElement(
|
|
2092
|
+
import_ui28.TextField,
|
|
2046
2093
|
{
|
|
2047
2094
|
...params,
|
|
2048
2095
|
placeholder,
|
|
@@ -2054,7 +2101,7 @@ var TextInput = ({
|
|
|
2054
2101
|
},
|
|
2055
2102
|
InputProps: {
|
|
2056
2103
|
...params.InputProps,
|
|
2057
|
-
endAdornment: /* @__PURE__ */
|
|
2104
|
+
endAdornment: /* @__PURE__ */ React35.createElement(ClearButton, { params, allowClear, handleChange })
|
|
2058
2105
|
}
|
|
2059
2106
|
}
|
|
2060
2107
|
);
|
|
@@ -2063,7 +2110,7 @@ var ClearButton = ({
|
|
|
2063
2110
|
allowClear,
|
|
2064
2111
|
handleChange,
|
|
2065
2112
|
params
|
|
2066
|
-
}) => /* @__PURE__ */
|
|
2113
|
+
}) => /* @__PURE__ */ React35.createElement(import_ui28.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React35.createElement(import_ui28.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React35.createElement(import_icons8.XIcon, { fontSize: params.size })));
|
|
2067
2114
|
function findMatchingOption(options, optionId = null) {
|
|
2068
2115
|
const formattedOption = (optionId || "").toString();
|
|
2069
2116
|
return options.find(({ id }) => formattedOption === id.toString());
|
|
@@ -2085,7 +2132,7 @@ function _factoryFilter(newValue, options, minInputLength) {
|
|
|
2085
2132
|
}
|
|
2086
2133
|
|
|
2087
2134
|
// src/controls/link-control.tsx
|
|
2088
|
-
var
|
|
2135
|
+
var SIZE4 = "tiny";
|
|
2089
2136
|
var learnMoreButton = {
|
|
2090
2137
|
label: (0, import_i18n9.__)("Learn More", "elementor"),
|
|
2091
2138
|
href: "https://go.elementor.com/element-link-inside-link-infotip"
|
|
@@ -2162,8 +2209,8 @@ var LinkControl = createControl((props) => {
|
|
|
2162
2209
|
),
|
|
2163
2210
|
[endpoint]
|
|
2164
2211
|
);
|
|
2165
|
-
return /* @__PURE__ */
|
|
2166
|
-
|
|
2212
|
+
return /* @__PURE__ */ React36.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React36.createElement(import_ui29.Stack, { gap: 1.5 }, /* @__PURE__ */ React36.createElement(
|
|
2213
|
+
import_ui29.Stack,
|
|
2167
2214
|
{
|
|
2168
2215
|
direction: "row",
|
|
2169
2216
|
sx: {
|
|
@@ -2172,8 +2219,8 @@ var LinkControl = createControl((props) => {
|
|
|
2172
2219
|
marginInlineEnd: -0.75
|
|
2173
2220
|
}
|
|
2174
2221
|
},
|
|
2175
|
-
/* @__PURE__ */
|
|
2176
|
-
/* @__PURE__ */
|
|
2222
|
+
/* @__PURE__ */ React36.createElement(ControlFormLabel, null, (0, import_i18n9.__)("Link", "elementor")),
|
|
2223
|
+
/* @__PURE__ */ React36.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React36.createElement(
|
|
2177
2224
|
ToggleIconControl,
|
|
2178
2225
|
{
|
|
2179
2226
|
disabled: shouldDisableAddingLink,
|
|
@@ -2182,7 +2229,7 @@ var LinkControl = createControl((props) => {
|
|
|
2182
2229
|
label: (0, import_i18n9.__)("Toggle link", "elementor")
|
|
2183
2230
|
}
|
|
2184
2231
|
))
|
|
2185
|
-
), /* @__PURE__ */
|
|
2232
|
+
), /* @__PURE__ */ React36.createElement(import_ui29.Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React36.createElement(import_ui29.Stack, { gap: 1.5 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React36.createElement(ControlActions, null, /* @__PURE__ */ React36.createElement(
|
|
2186
2233
|
Autocomplete,
|
|
2187
2234
|
{
|
|
2188
2235
|
options,
|
|
@@ -2193,10 +2240,10 @@ var LinkControl = createControl((props) => {
|
|
|
2193
2240
|
onTextChange,
|
|
2194
2241
|
minInputLength
|
|
2195
2242
|
}
|
|
2196
|
-
))), /* @__PURE__ */
|
|
2243
|
+
))), /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React36.createElement(SwitchControl, { disabled: propContext.disabled || !value }))))));
|
|
2197
2244
|
});
|
|
2198
2245
|
var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
|
|
2199
|
-
return /* @__PURE__ */
|
|
2246
|
+
return /* @__PURE__ */ React36.createElement(import_ui29.IconButton, { size: SIZE4, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React36.createElement(import_icons9.MinusIcon, { fontSize: SIZE4 }) : /* @__PURE__ */ React36.createElement(import_icons9.PlusIcon, { fontSize: SIZE4 }));
|
|
2200
2247
|
};
|
|
2201
2248
|
var SwitchControl = ({ disabled }) => {
|
|
2202
2249
|
const { value = false, setValue } = useBoundProp(import_editor_props16.booleanPropTypeUtil);
|
|
@@ -2208,7 +2255,7 @@ var SwitchControl = ({ disabled }) => {
|
|
|
2208
2255
|
opacity: 0
|
|
2209
2256
|
}
|
|
2210
2257
|
} : {};
|
|
2211
|
-
return /* @__PURE__ */
|
|
2258
|
+
return /* @__PURE__ */ React36.createElement(import_ui29.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, (0, import_i18n9.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React36.createElement(import_ui29.Switch, { checked: value, onClick, disabled, inputProps })));
|
|
2212
2259
|
};
|
|
2213
2260
|
async function fetchOptions(ajaxUrl, params) {
|
|
2214
2261
|
if (!params || !ajaxUrl) {
|
|
@@ -2245,15 +2292,15 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
|
|
|
2245
2292
|
(0, import_editor_elements.selectElement)(elementId);
|
|
2246
2293
|
}
|
|
2247
2294
|
};
|
|
2248
|
-
return shouldRestrict && isVisible ? /* @__PURE__ */
|
|
2249
|
-
|
|
2295
|
+
return shouldRestrict && isVisible ? /* @__PURE__ */ React36.createElement(
|
|
2296
|
+
import_ui29.Infotip,
|
|
2250
2297
|
{
|
|
2251
2298
|
placement: "right",
|
|
2252
|
-
content: /* @__PURE__ */
|
|
2253
|
-
|
|
2299
|
+
content: /* @__PURE__ */ React36.createElement(
|
|
2300
|
+
import_editor_ui4.InfoTipCard,
|
|
2254
2301
|
{
|
|
2255
2302
|
content: INFOTIP_CONTENT[reason],
|
|
2256
|
-
svgIcon: /* @__PURE__ */
|
|
2303
|
+
svgIcon: /* @__PURE__ */ React36.createElement(import_icons9.AlertTriangleIcon, null),
|
|
2257
2304
|
learnMoreButton,
|
|
2258
2305
|
ctaButton: {
|
|
2259
2306
|
label: (0, import_i18n9.__)("Take me there", "elementor"),
|
|
@@ -2262,19 +2309,19 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
|
|
|
2262
2309
|
}
|
|
2263
2310
|
)
|
|
2264
2311
|
},
|
|
2265
|
-
/* @__PURE__ */
|
|
2266
|
-
) : /* @__PURE__ */
|
|
2312
|
+
/* @__PURE__ */ React36.createElement(import_ui29.Box, null, children)
|
|
2313
|
+
) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, children);
|
|
2267
2314
|
};
|
|
2268
2315
|
var INFOTIP_CONTENT = {
|
|
2269
|
-
descendant: /* @__PURE__ */
|
|
2270
|
-
ancestor: /* @__PURE__ */
|
|
2316
|
+
descendant: /* @__PURE__ */ React36.createElement(React36.Fragment, null, (0, import_i18n9.__)("To add a link to this container,", "elementor"), /* @__PURE__ */ React36.createElement("br", null), (0, import_i18n9.__)("first remove the link from the elements inside of it.", "elementor")),
|
|
2317
|
+
ancestor: /* @__PURE__ */ React36.createElement(React36.Fragment, null, (0, import_i18n9.__)("To add a link to this element,", "elementor"), /* @__PURE__ */ React36.createElement("br", null), (0, import_i18n9.__)("first remove the link from its parent container.", "elementor"))
|
|
2271
2318
|
};
|
|
2272
2319
|
|
|
2273
2320
|
// src/controls/gap-control.tsx
|
|
2274
|
-
var
|
|
2321
|
+
var React37 = __toESM(require("react"));
|
|
2275
2322
|
var import_editor_props17 = require("@elementor/editor-props");
|
|
2276
|
-
var
|
|
2277
|
-
var
|
|
2323
|
+
var import_icons10 = require("@elementor/icons");
|
|
2324
|
+
var import_ui30 = require("@elementor/ui");
|
|
2278
2325
|
var import_i18n10 = require("@wordpress/i18n");
|
|
2279
2326
|
var GapControl = createControl(({ label }) => {
|
|
2280
2327
|
const {
|
|
@@ -2297,11 +2344,12 @@ var GapControl = createControl(({ label }) => {
|
|
|
2297
2344
|
});
|
|
2298
2345
|
};
|
|
2299
2346
|
const tooltipLabel = label.toLowerCase();
|
|
2300
|
-
const LinkedIcon = isLinked ?
|
|
2347
|
+
const LinkedIcon = isLinked ? import_icons10.LinkIcon : import_icons10.DetachIcon;
|
|
2301
2348
|
const linkedLabel = (0, import_i18n10.__)("Link %s", "elementor").replace("%s", tooltipLabel);
|
|
2302
2349
|
const unlinkedLabel = (0, import_i18n10.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
|
|
2303
|
-
|
|
2304
|
-
|
|
2350
|
+
const disabled = sizeDisabled || directionDisabled;
|
|
2351
|
+
return /* @__PURE__ */ React37.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React37.createElement(import_ui30.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label), /* @__PURE__ */ React37.createElement(import_ui30.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
|
|
2352
|
+
import_ui30.ToggleButton,
|
|
2305
2353
|
{
|
|
2306
2354
|
"aria-label": isLinked ? unlinkedLabel : linkedLabel,
|
|
2307
2355
|
size: "tiny",
|
|
@@ -2309,25 +2357,25 @@ var GapControl = createControl(({ label }) => {
|
|
|
2309
2357
|
selected: isLinked,
|
|
2310
2358
|
sx: { marginLeft: "auto" },
|
|
2311
2359
|
onChange: onLinkToggle,
|
|
2312
|
-
disabled
|
|
2360
|
+
disabled
|
|
2313
2361
|
},
|
|
2314
|
-
/* @__PURE__ */
|
|
2315
|
-
))), /* @__PURE__ */
|
|
2362
|
+
/* @__PURE__ */ React37.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
2363
|
+
))), /* @__PURE__ */ React37.createElement(import_ui30.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Column", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Row", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Control4, { bind: "row", isLinked })))));
|
|
2316
2364
|
});
|
|
2317
2365
|
var Control4 = ({ bind, isLinked }) => {
|
|
2318
2366
|
if (isLinked) {
|
|
2319
|
-
return /* @__PURE__ */
|
|
2367
|
+
return /* @__PURE__ */ React37.createElement(SizeControl, null);
|
|
2320
2368
|
}
|
|
2321
|
-
return /* @__PURE__ */
|
|
2369
|
+
return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(SizeControl, null));
|
|
2322
2370
|
};
|
|
2323
2371
|
|
|
2324
2372
|
// src/controls/aspect-ratio-control.tsx
|
|
2325
|
-
var
|
|
2373
|
+
var React38 = __toESM(require("react"));
|
|
2326
2374
|
var import_react16 = require("react");
|
|
2327
2375
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
2328
|
-
var
|
|
2329
|
-
var
|
|
2330
|
-
var
|
|
2376
|
+
var import_editor_ui5 = require("@elementor/editor-ui");
|
|
2377
|
+
var import_icons11 = require("@elementor/icons");
|
|
2378
|
+
var import_ui31 = require("@elementor/ui");
|
|
2331
2379
|
var import_i18n11 = require("@wordpress/i18n");
|
|
2332
2380
|
var RATIO_OPTIONS = [
|
|
2333
2381
|
{ label: (0, import_i18n11.__)("Auto", "elementor"), value: "auto" },
|
|
@@ -2374,8 +2422,8 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
2374
2422
|
setAspectRatioValue(`${customWidth}/${newHeight}`);
|
|
2375
2423
|
}
|
|
2376
2424
|
};
|
|
2377
|
-
return /* @__PURE__ */
|
|
2378
|
-
|
|
2425
|
+
return /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(import_ui31.Stack, { direction: "column", pt: 2, gap: 2 }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, label)), /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
|
|
2426
|
+
import_ui31.Select,
|
|
2379
2427
|
{
|
|
2380
2428
|
size: "tiny",
|
|
2381
2429
|
displayEmpty: true,
|
|
@@ -2386,10 +2434,10 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
2386
2434
|
fullWidth: true
|
|
2387
2435
|
},
|
|
2388
2436
|
[...RATIO_OPTIONS, { label: (0, import_i18n11.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
|
|
2389
|
-
({ label: optionLabel, ...props }) => /* @__PURE__ */
|
|
2437
|
+
({ label: optionLabel, ...props }) => /* @__PURE__ */ React38.createElement(import_editor_ui5.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
|
|
2390
2438
|
)
|
|
2391
|
-
))), isCustom && /* @__PURE__ */
|
|
2392
|
-
|
|
2439
|
+
))), isCustom && /* @__PURE__ */ React38.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
|
|
2440
|
+
import_ui31.TextField,
|
|
2393
2441
|
{
|
|
2394
2442
|
size: "tiny",
|
|
2395
2443
|
type: "number",
|
|
@@ -2398,11 +2446,11 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
2398
2446
|
value: customWidth,
|
|
2399
2447
|
onChange: handleCustomWidthChange,
|
|
2400
2448
|
InputProps: {
|
|
2401
|
-
startAdornment: /* @__PURE__ */
|
|
2449
|
+
startAdornment: /* @__PURE__ */ React38.createElement(import_icons11.ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
|
|
2402
2450
|
}
|
|
2403
2451
|
}
|
|
2404
|
-
)), /* @__PURE__ */
|
|
2405
|
-
|
|
2452
|
+
)), /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
|
|
2453
|
+
import_ui31.TextField,
|
|
2406
2454
|
{
|
|
2407
2455
|
size: "tiny",
|
|
2408
2456
|
type: "number",
|
|
@@ -2411,26 +2459,26 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
2411
2459
|
value: customHeight,
|
|
2412
2460
|
onChange: handleCustomHeightChange,
|
|
2413
2461
|
InputProps: {
|
|
2414
|
-
startAdornment: /* @__PURE__ */
|
|
2462
|
+
startAdornment: /* @__PURE__ */ React38.createElement(import_icons11.ArrowsMoveVerticalIcon, { fontSize: "tiny" })
|
|
2415
2463
|
}
|
|
2416
2464
|
}
|
|
2417
|
-
))));
|
|
2465
|
+
)))));
|
|
2418
2466
|
});
|
|
2419
2467
|
|
|
2420
2468
|
// src/controls/svg-media-control.tsx
|
|
2421
|
-
var
|
|
2469
|
+
var React40 = __toESM(require("react"));
|
|
2422
2470
|
var import_react18 = require("react");
|
|
2423
2471
|
var import_editor_props19 = require("@elementor/editor-props");
|
|
2424
|
-
var
|
|
2425
|
-
var
|
|
2472
|
+
var import_icons12 = require("@elementor/icons");
|
|
2473
|
+
var import_ui33 = require("@elementor/ui");
|
|
2426
2474
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
2427
2475
|
var import_i18n13 = require("@wordpress/i18n");
|
|
2428
2476
|
|
|
2429
2477
|
// src/components/enable-unfiltered-modal.tsx
|
|
2430
|
-
var
|
|
2478
|
+
var React39 = __toESM(require("react"));
|
|
2431
2479
|
var import_react17 = require("react");
|
|
2432
2480
|
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
2433
|
-
var
|
|
2481
|
+
var import_ui32 = require("@elementor/ui");
|
|
2434
2482
|
var import_i18n12 = require("@wordpress/i18n");
|
|
2435
2483
|
var ADMIN_TITLE_TEXT = (0, import_i18n12.__)("Enable Unfiltered Uploads", "elementor");
|
|
2436
2484
|
var ADMIN_CONTENT_TEXT = (0, import_i18n12.__)(
|
|
@@ -2470,10 +2518,10 @@ var EnableUnfilteredModal = (props) => {
|
|
|
2470
2518
|
}
|
|
2471
2519
|
};
|
|
2472
2520
|
const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
|
|
2473
|
-
return canManageOptions ? /* @__PURE__ */
|
|
2521
|
+
return canManageOptions ? /* @__PURE__ */ React39.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React39.createElement(NonAdminDialog, { ...dialogProps });
|
|
2474
2522
|
};
|
|
2475
|
-
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */
|
|
2476
|
-
|
|
2523
|
+
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React39.createElement(import_ui32.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React39.createElement(import_ui32.DialogHeader, { logo: false }, /* @__PURE__ */ React39.createElement(import_ui32.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React39.createElement(import_ui32.Divider, null), /* @__PURE__ */ React39.createElement(import_ui32.DialogContent, null, /* @__PURE__ */ React39.createElement(import_ui32.DialogContentText, null, isError ? /* @__PURE__ */ React39.createElement(React39.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React39.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React39.createElement(import_ui32.DialogActions, null, /* @__PURE__ */ React39.createElement(import_ui32.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n12.__)("Cancel", "elementor")), /* @__PURE__ */ React39.createElement(
|
|
2524
|
+
import_ui32.Button,
|
|
2477
2525
|
{
|
|
2478
2526
|
size: "medium",
|
|
2479
2527
|
onClick: () => handleEnable(),
|
|
@@ -2481,16 +2529,16 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
2481
2529
|
color: "primary",
|
|
2482
2530
|
disabled: isPending
|
|
2483
2531
|
},
|
|
2484
|
-
isPending ? /* @__PURE__ */
|
|
2532
|
+
isPending ? /* @__PURE__ */ React39.createElement(import_ui32.CircularProgress, { size: 24 }) : (0, import_i18n12.__)("Enable", "elementor")
|
|
2485
2533
|
)));
|
|
2486
|
-
var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */
|
|
2534
|
+
var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React39.createElement(import_ui32.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React39.createElement(import_ui32.DialogHeader, { logo: false }, /* @__PURE__ */ React39.createElement(import_ui32.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React39.createElement(import_ui32.Divider, null), /* @__PURE__ */ React39.createElement(import_ui32.DialogContent, null, /* @__PURE__ */ React39.createElement(import_ui32.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React39.createElement(import_ui32.DialogActions, null, /* @__PURE__ */ React39.createElement(import_ui32.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n12.__)("Got it", "elementor"))));
|
|
2487
2535
|
|
|
2488
2536
|
// src/controls/svg-media-control.tsx
|
|
2489
2537
|
var TILE_SIZE = 8;
|
|
2490
2538
|
var TILE_WHITE = "transparent";
|
|
2491
2539
|
var TILE_BLACK = "#c1c1c1";
|
|
2492
2540
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
2493
|
-
var StyledCard = (0,
|
|
2541
|
+
var StyledCard = (0, import_ui33.styled)(import_ui33.Card)`
|
|
2494
2542
|
background-color: white;
|
|
2495
2543
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
2496
2544
|
background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
|
|
@@ -2499,7 +2547,7 @@ var StyledCard = (0, import_ui32.styled)(import_ui32.Card)`
|
|
|
2499
2547
|
${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
|
|
2500
2548
|
border: none;
|
|
2501
2549
|
`;
|
|
2502
|
-
var StyledCardMediaContainer = (0,
|
|
2550
|
+
var StyledCardMediaContainer = (0, import_ui33.styled)(import_ui33.Stack)`
|
|
2503
2551
|
position: relative;
|
|
2504
2552
|
height: 140px;
|
|
2505
2553
|
object-fit: contain;
|
|
@@ -2544,16 +2592,16 @@ var SvgMediaControl = createControl(() => {
|
|
|
2544
2592
|
open(openOptions);
|
|
2545
2593
|
}
|
|
2546
2594
|
};
|
|
2547
|
-
return /* @__PURE__ */
|
|
2548
|
-
|
|
2595
|
+
return /* @__PURE__ */ React40.createElement(import_ui33.Stack, { gap: 1 }, /* @__PURE__ */ React40.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React40.createElement(ControlFormLabel, null, " ", (0, import_i18n13.__)("SVG", "elementor"), " "), /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React40.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React40.createElement(import_ui33.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React40.createElement(
|
|
2596
|
+
import_ui33.CardMedia,
|
|
2549
2597
|
{
|
|
2550
2598
|
component: "img",
|
|
2551
2599
|
image: src,
|
|
2552
2600
|
alt: (0, import_i18n13.__)("Preview SVG", "elementor"),
|
|
2553
2601
|
sx: { maxHeight: "140px", width: "50px" }
|
|
2554
2602
|
}
|
|
2555
|
-
)), /* @__PURE__ */
|
|
2556
|
-
|
|
2603
|
+
)), /* @__PURE__ */ React40.createElement(
|
|
2604
|
+
import_ui33.CardOverlay,
|
|
2557
2605
|
{
|
|
2558
2606
|
sx: {
|
|
2559
2607
|
"&:hover": {
|
|
@@ -2561,8 +2609,8 @@ var SvgMediaControl = createControl(() => {
|
|
|
2561
2609
|
}
|
|
2562
2610
|
}
|
|
2563
2611
|
},
|
|
2564
|
-
/* @__PURE__ */
|
|
2565
|
-
|
|
2612
|
+
/* @__PURE__ */ React40.createElement(import_ui33.Stack, { gap: 1 }, /* @__PURE__ */ React40.createElement(
|
|
2613
|
+
import_ui33.Button,
|
|
2566
2614
|
{
|
|
2567
2615
|
size: "tiny",
|
|
2568
2616
|
color: "inherit",
|
|
@@ -2570,13 +2618,13 @@ var SvgMediaControl = createControl(() => {
|
|
|
2570
2618
|
onClick: () => handleClick(MODE_BROWSE)
|
|
2571
2619
|
},
|
|
2572
2620
|
(0, import_i18n13.__)("Select SVG", "elementor")
|
|
2573
|
-
), /* @__PURE__ */
|
|
2574
|
-
|
|
2621
|
+
), /* @__PURE__ */ React40.createElement(
|
|
2622
|
+
import_ui33.Button,
|
|
2575
2623
|
{
|
|
2576
2624
|
size: "tiny",
|
|
2577
2625
|
variant: "text",
|
|
2578
2626
|
color: "inherit",
|
|
2579
|
-
startIcon: /* @__PURE__ */
|
|
2627
|
+
startIcon: /* @__PURE__ */ React40.createElement(import_icons12.UploadIcon, null),
|
|
2580
2628
|
onClick: () => handleClick(MODE_UPLOAD)
|
|
2581
2629
|
},
|
|
2582
2630
|
(0, import_i18n13.__)("Upload", "elementor")
|
|
@@ -2585,16 +2633,16 @@ var SvgMediaControl = createControl(() => {
|
|
|
2585
2633
|
});
|
|
2586
2634
|
|
|
2587
2635
|
// src/controls/background-control/background-control.tsx
|
|
2588
|
-
var
|
|
2636
|
+
var React47 = __toESM(require("react"));
|
|
2589
2637
|
var import_editor_props25 = require("@elementor/editor-props");
|
|
2590
2638
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
2591
|
-
var
|
|
2639
|
+
var import_ui41 = require("@elementor/ui");
|
|
2592
2640
|
var import_i18n19 = require("@wordpress/i18n");
|
|
2593
2641
|
|
|
2594
2642
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
2595
|
-
var
|
|
2643
|
+
var React46 = __toESM(require("react"));
|
|
2596
2644
|
var import_editor_props24 = require("@elementor/editor-props");
|
|
2597
|
-
var
|
|
2645
|
+
var import_ui40 = require("@elementor/ui");
|
|
2598
2646
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
2599
2647
|
var import_i18n18 = require("@wordpress/i18n");
|
|
2600
2648
|
|
|
@@ -2603,9 +2651,9 @@ var import_env = require("@elementor/env");
|
|
|
2603
2651
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
2604
2652
|
|
|
2605
2653
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
2606
|
-
var
|
|
2654
|
+
var React41 = __toESM(require("react"));
|
|
2607
2655
|
var import_editor_props20 = require("@elementor/editor-props");
|
|
2608
|
-
var
|
|
2656
|
+
var import_ui34 = require("@elementor/ui");
|
|
2609
2657
|
var BackgroundGradientColorControl = createControl(() => {
|
|
2610
2658
|
const { value, setValue } = useBoundProp(import_editor_props20.backgroundGradientOverlayPropTypeUtil);
|
|
2611
2659
|
const handleChange = (newValue) => {
|
|
@@ -2643,8 +2691,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
2643
2691
|
positions: positions?.value.split(" ")
|
|
2644
2692
|
};
|
|
2645
2693
|
};
|
|
2646
|
-
return /* @__PURE__ */
|
|
2647
|
-
|
|
2694
|
+
return /* @__PURE__ */ React41.createElement(ControlActions, null, /* @__PURE__ */ React41.createElement(
|
|
2695
|
+
import_ui34.UnstableGradientBox,
|
|
2648
2696
|
{
|
|
2649
2697
|
sx: { width: "auto", padding: 1.5 },
|
|
2650
2698
|
value: normalizeValue(),
|
|
@@ -2668,34 +2716,34 @@ var initialBackgroundGradientOverlay = import_editor_props20.backgroundGradientO
|
|
|
2668
2716
|
});
|
|
2669
2717
|
|
|
2670
2718
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
2671
|
-
var
|
|
2672
|
-
var
|
|
2673
|
-
var
|
|
2719
|
+
var React42 = __toESM(require("react"));
|
|
2720
|
+
var import_icons13 = require("@elementor/icons");
|
|
2721
|
+
var import_ui35 = require("@elementor/ui");
|
|
2674
2722
|
var import_i18n14 = require("@wordpress/i18n");
|
|
2675
2723
|
var attachmentControlOptions = [
|
|
2676
2724
|
{
|
|
2677
2725
|
value: "fixed",
|
|
2678
2726
|
label: (0, import_i18n14.__)("Fixed", "elementor"),
|
|
2679
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2727
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.PinIcon, { fontSize: size }),
|
|
2680
2728
|
showTooltip: true
|
|
2681
2729
|
},
|
|
2682
2730
|
{
|
|
2683
2731
|
value: "scroll",
|
|
2684
2732
|
label: (0, import_i18n14.__)("Scroll", "elementor"),
|
|
2685
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2733
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.PinnedOffIcon, { fontSize: size }),
|
|
2686
2734
|
showTooltip: true
|
|
2687
2735
|
}
|
|
2688
2736
|
];
|
|
2689
2737
|
var BackgroundImageOverlayAttachment = () => {
|
|
2690
|
-
return /* @__PURE__ */
|
|
2738
|
+
return /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, (0, import_i18n14.__)("Attachment", "elementor"))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React42.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
2691
2739
|
};
|
|
2692
2740
|
|
|
2693
2741
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
2694
|
-
var
|
|
2742
|
+
var React43 = __toESM(require("react"));
|
|
2695
2743
|
var import_editor_props21 = require("@elementor/editor-props");
|
|
2696
|
-
var
|
|
2697
|
-
var
|
|
2698
|
-
var
|
|
2744
|
+
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
2745
|
+
var import_icons14 = require("@elementor/icons");
|
|
2746
|
+
var import_ui36 = require("@elementor/ui");
|
|
2699
2747
|
var import_i18n15 = require("@wordpress/i18n");
|
|
2700
2748
|
var backgroundPositionOptions = [
|
|
2701
2749
|
{ label: (0, import_i18n15.__)("Center center", "elementor"), value: "center center" },
|
|
@@ -2721,82 +2769,83 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
2721
2769
|
stringPropContext.setValue(value);
|
|
2722
2770
|
}
|
|
2723
2771
|
};
|
|
2724
|
-
return /* @__PURE__ */
|
|
2725
|
-
|
|
2772
|
+
return /* @__PURE__ */ React43.createElement(import_ui36.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Position", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React43.createElement(
|
|
2773
|
+
import_ui36.Select,
|
|
2726
2774
|
{
|
|
2775
|
+
fullWidth: true,
|
|
2727
2776
|
size: "tiny",
|
|
2728
|
-
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? "",
|
|
2729
2777
|
onChange: handlePositionChange,
|
|
2730
|
-
|
|
2778
|
+
disabled: stringPropContext.disabled,
|
|
2779
|
+
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
2731
2780
|
},
|
|
2732
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
2733
|
-
)))), isCustom ? /* @__PURE__ */
|
|
2781
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React43.createElement(import_editor_ui6.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
2782
|
+
)))), isCustom ? /* @__PURE__ */ React43.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React43.createElement(SizeControl, { startIcon: /* @__PURE__ */ React43.createElement(import_icons14.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React43.createElement(SizeControl, { startIcon: /* @__PURE__ */ React43.createElement(import_icons14.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
|
|
2734
2783
|
};
|
|
2735
2784
|
|
|
2736
2785
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
2737
|
-
var
|
|
2738
|
-
var
|
|
2739
|
-
var
|
|
2786
|
+
var React44 = __toESM(require("react"));
|
|
2787
|
+
var import_icons15 = require("@elementor/icons");
|
|
2788
|
+
var import_ui37 = require("@elementor/ui");
|
|
2740
2789
|
var import_i18n16 = require("@wordpress/i18n");
|
|
2741
2790
|
var repeatControlOptions = [
|
|
2742
2791
|
{
|
|
2743
2792
|
value: "repeat",
|
|
2744
2793
|
label: (0, import_i18n16.__)("Repeat", "elementor"),
|
|
2745
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2794
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.GridDotsIcon, { fontSize: size }),
|
|
2746
2795
|
showTooltip: true
|
|
2747
2796
|
},
|
|
2748
2797
|
{
|
|
2749
2798
|
value: "repeat-x",
|
|
2750
2799
|
label: (0, import_i18n16.__)("Repeat-x", "elementor"),
|
|
2751
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2800
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.DotsHorizontalIcon, { fontSize: size }),
|
|
2752
2801
|
showTooltip: true
|
|
2753
2802
|
},
|
|
2754
2803
|
{
|
|
2755
2804
|
value: "repeat-y",
|
|
2756
2805
|
label: (0, import_i18n16.__)("Repeat-y", "elementor"),
|
|
2757
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2806
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.DotsVerticalIcon, { fontSize: size }),
|
|
2758
2807
|
showTooltip: true
|
|
2759
2808
|
},
|
|
2760
2809
|
{
|
|
2761
2810
|
value: "no-repeat",
|
|
2762
2811
|
label: (0, import_i18n16.__)("No-repeat", "elementor"),
|
|
2763
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2812
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.XIcon, { fontSize: size }),
|
|
2764
2813
|
showTooltip: true
|
|
2765
2814
|
}
|
|
2766
2815
|
];
|
|
2767
2816
|
var BackgroundImageOverlayRepeat = () => {
|
|
2768
|
-
return /* @__PURE__ */
|
|
2817
|
+
return /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, (0, import_i18n16.__)("Repeat", "elementor"))), /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React44.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
2769
2818
|
};
|
|
2770
2819
|
|
|
2771
2820
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
2772
|
-
var
|
|
2821
|
+
var React45 = __toESM(require("react"));
|
|
2773
2822
|
var import_editor_props22 = require("@elementor/editor-props");
|
|
2774
|
-
var
|
|
2775
|
-
var
|
|
2823
|
+
var import_icons16 = require("@elementor/icons");
|
|
2824
|
+
var import_ui38 = require("@elementor/ui");
|
|
2776
2825
|
var import_i18n17 = require("@wordpress/i18n");
|
|
2777
2826
|
var sizeControlOptions = [
|
|
2778
2827
|
{
|
|
2779
2828
|
value: "auto",
|
|
2780
2829
|
label: (0, import_i18n17.__)("Auto", "elementor"),
|
|
2781
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2830
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(import_icons16.LetterAIcon, { fontSize: size }),
|
|
2782
2831
|
showTooltip: true
|
|
2783
2832
|
},
|
|
2784
2833
|
{
|
|
2785
2834
|
value: "cover",
|
|
2786
2835
|
label: (0, import_i18n17.__)("Cover", "elementor"),
|
|
2787
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2836
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(import_icons16.ArrowsMaximizeIcon, { fontSize: size }),
|
|
2788
2837
|
showTooltip: true
|
|
2789
2838
|
},
|
|
2790
2839
|
{
|
|
2791
2840
|
value: "contain",
|
|
2792
2841
|
label: (0, import_i18n17.__)("Contain", "elementor"),
|
|
2793
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2842
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(import_icons16.ArrowBarBothIcon, { fontSize: size }),
|
|
2794
2843
|
showTooltip: true
|
|
2795
2844
|
},
|
|
2796
2845
|
{
|
|
2797
2846
|
value: "custom",
|
|
2798
2847
|
label: (0, import_i18n17.__)("Custom", "elementor"),
|
|
2799
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2848
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(import_icons16.PencilIcon, { fontSize: size }),
|
|
2800
2849
|
showTooltip: true
|
|
2801
2850
|
}
|
|
2802
2851
|
];
|
|
@@ -2811,24 +2860,25 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2811
2860
|
stringPropContext.setValue(size);
|
|
2812
2861
|
}
|
|
2813
2862
|
};
|
|
2814
|
-
return /* @__PURE__ */
|
|
2863
|
+
return /* @__PURE__ */ React45.createElement(import_ui38.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, (0, import_i18n17.__)("Size", "elementor"))), /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React45.createElement(
|
|
2815
2864
|
ControlToggleButtonGroup,
|
|
2816
2865
|
{
|
|
2817
2866
|
exclusive: true,
|
|
2818
2867
|
items: sizeControlOptions,
|
|
2819
|
-
|
|
2820
|
-
|
|
2868
|
+
onChange: handleSizeChange,
|
|
2869
|
+
disabled: stringPropContext.disabled,
|
|
2870
|
+
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
2821
2871
|
}
|
|
2822
|
-
)))), isCustom ? /* @__PURE__ */
|
|
2872
|
+
)))), isCustom ? /* @__PURE__ */ React45.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React45.createElement(
|
|
2823
2873
|
SizeControl,
|
|
2824
2874
|
{
|
|
2825
|
-
startIcon: /* @__PURE__ */
|
|
2875
|
+
startIcon: /* @__PURE__ */ React45.createElement(import_icons16.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
2826
2876
|
extendedValues: ["auto"]
|
|
2827
2877
|
}
|
|
2828
|
-
))), /* @__PURE__ */
|
|
2878
|
+
))), /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React45.createElement(
|
|
2829
2879
|
SizeControl,
|
|
2830
2880
|
{
|
|
2831
|
-
startIcon: /* @__PURE__ */
|
|
2881
|
+
startIcon: /* @__PURE__ */ React45.createElement(import_icons16.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
2832
2882
|
extendedValues: ["auto"]
|
|
2833
2883
|
}
|
|
2834
2884
|
)))))) : null);
|
|
@@ -2837,7 +2887,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2837
2887
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
2838
2888
|
var import_react19 = require("react");
|
|
2839
2889
|
var import_editor_props23 = require("@elementor/editor-props");
|
|
2840
|
-
var
|
|
2890
|
+
var import_ui39 = require("@elementor/ui");
|
|
2841
2891
|
var useBackgroundTabsHistory = ({
|
|
2842
2892
|
color: initialBackgroundColorOverlay2,
|
|
2843
2893
|
image: initialBackgroundImageOverlay,
|
|
@@ -2855,7 +2905,7 @@ var useBackgroundTabsHistory = ({
|
|
|
2855
2905
|
}
|
|
2856
2906
|
return "image";
|
|
2857
2907
|
};
|
|
2858
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
2908
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui39.useTabs)(getCurrentOverlayType());
|
|
2859
2909
|
const valuesHistory = (0, import_react19.useRef)({
|
|
2860
2910
|
image: initialBackgroundImageOverlay,
|
|
2861
2911
|
color: initialBackgroundColorOverlay2,
|
|
@@ -2931,7 +2981,7 @@ var backgroundResolutionOptions = [
|
|
|
2931
2981
|
];
|
|
2932
2982
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
2933
2983
|
const { propType, value: overlayValues, setValue, disabled } = useBoundProp(import_editor_props24.backgroundOverlayPropTypeUtil);
|
|
2934
|
-
return /* @__PURE__ */
|
|
2984
|
+
return /* @__PURE__ */ React46.createElement(PropProvider, { propType, value: overlayValues, setValue, disabled }, /* @__PURE__ */ React46.createElement(
|
|
2935
2985
|
Repeater,
|
|
2936
2986
|
{
|
|
2937
2987
|
openOnAdd: true,
|
|
@@ -2949,7 +2999,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
2949
2999
|
));
|
|
2950
3000
|
});
|
|
2951
3001
|
var ItemContent2 = ({ anchorEl = null, bind }) => {
|
|
2952
|
-
return /* @__PURE__ */
|
|
3002
|
+
return /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React46.createElement(Content2, { anchorEl }));
|
|
2953
3003
|
};
|
|
2954
3004
|
var Content2 = ({ anchorEl }) => {
|
|
2955
3005
|
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
@@ -2957,27 +3007,27 @@ var Content2 = ({ anchorEl }) => {
|
|
|
2957
3007
|
color: initialBackgroundColorOverlay.value,
|
|
2958
3008
|
gradient: initialBackgroundGradientOverlay.value
|
|
2959
3009
|
});
|
|
2960
|
-
return /* @__PURE__ */
|
|
2961
|
-
|
|
3010
|
+
return /* @__PURE__ */ React46.createElement(import_ui40.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React46.createElement(import_ui40.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React46.createElement(
|
|
3011
|
+
import_ui40.Tabs,
|
|
2962
3012
|
{
|
|
2963
3013
|
size: "small",
|
|
2964
3014
|
variant: "fullWidth",
|
|
2965
3015
|
...getTabsProps(),
|
|
2966
3016
|
"aria-label": (0, import_i18n18.__)("Background Overlay", "elementor")
|
|
2967
3017
|
},
|
|
2968
|
-
/* @__PURE__ */
|
|
2969
|
-
/* @__PURE__ */
|
|
2970
|
-
/* @__PURE__ */
|
|
2971
|
-
)), /* @__PURE__ */
|
|
3018
|
+
/* @__PURE__ */ React46.createElement(import_ui40.Tab, { label: (0, import_i18n18.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
3019
|
+
/* @__PURE__ */ React46.createElement(import_ui40.Tab, { label: (0, import_i18n18.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
3020
|
+
/* @__PURE__ */ React46.createElement(import_ui40.Tab, { label: (0, import_i18n18.__)("Color", "elementor"), ...getTabProps("color") })
|
|
3021
|
+
)), /* @__PURE__ */ React46.createElement(import_ui40.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React46.createElement(PopoverContent, null, /* @__PURE__ */ React46.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React46.createElement(import_ui40.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React46.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React46.createElement(import_ui40.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React46.createElement(PopoverContent, null, /* @__PURE__ */ React46.createElement(ColorOverlayContent, { anchorEl }))));
|
|
2972
3022
|
};
|
|
2973
3023
|
var ItemIcon2 = ({ value }) => {
|
|
2974
3024
|
switch (value.$$type) {
|
|
2975
3025
|
case "background-image-overlay":
|
|
2976
|
-
return /* @__PURE__ */
|
|
3026
|
+
return /* @__PURE__ */ React46.createElement(ItemIconImage, { value });
|
|
2977
3027
|
case "background-color-overlay":
|
|
2978
|
-
return /* @__PURE__ */
|
|
3028
|
+
return /* @__PURE__ */ React46.createElement(ItemIconColor, { value });
|
|
2979
3029
|
case "background-gradient-overlay":
|
|
2980
|
-
return /* @__PURE__ */
|
|
3030
|
+
return /* @__PURE__ */ React46.createElement(ItemIconGradient, { value });
|
|
2981
3031
|
default:
|
|
2982
3032
|
return null;
|
|
2983
3033
|
}
|
|
@@ -2990,12 +3040,12 @@ var extractColorFrom = (prop) => {
|
|
|
2990
3040
|
};
|
|
2991
3041
|
var ItemIconColor = ({ value: prop }) => {
|
|
2992
3042
|
const color = extractColorFrom(prop);
|
|
2993
|
-
return /* @__PURE__ */
|
|
3043
|
+
return /* @__PURE__ */ React46.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
|
|
2994
3044
|
};
|
|
2995
3045
|
var ItemIconImage = ({ value }) => {
|
|
2996
3046
|
const { imageUrl } = useImage(value);
|
|
2997
|
-
return /* @__PURE__ */
|
|
2998
|
-
|
|
3047
|
+
return /* @__PURE__ */ React46.createElement(
|
|
3048
|
+
import_ui40.CardMedia,
|
|
2999
3049
|
{
|
|
3000
3050
|
image: imageUrl,
|
|
3001
3051
|
sx: (theme) => ({
|
|
@@ -3009,49 +3059,49 @@ var ItemIconImage = ({ value }) => {
|
|
|
3009
3059
|
};
|
|
3010
3060
|
var ItemIconGradient = ({ value }) => {
|
|
3011
3061
|
const gradient = getGradientValue(value);
|
|
3012
|
-
return /* @__PURE__ */
|
|
3062
|
+
return /* @__PURE__ */ React46.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
3013
3063
|
};
|
|
3014
3064
|
var ItemLabel2 = ({ value }) => {
|
|
3015
3065
|
switch (value.$$type) {
|
|
3016
3066
|
case "background-image-overlay":
|
|
3017
|
-
return /* @__PURE__ */
|
|
3067
|
+
return /* @__PURE__ */ React46.createElement(ItemLabelImage, { value });
|
|
3018
3068
|
case "background-color-overlay":
|
|
3019
|
-
return /* @__PURE__ */
|
|
3069
|
+
return /* @__PURE__ */ React46.createElement(ItemLabelColor, { value });
|
|
3020
3070
|
case "background-gradient-overlay":
|
|
3021
|
-
return /* @__PURE__ */
|
|
3071
|
+
return /* @__PURE__ */ React46.createElement(ItemLabelGradient, { value });
|
|
3022
3072
|
default:
|
|
3023
3073
|
return null;
|
|
3024
3074
|
}
|
|
3025
3075
|
};
|
|
3026
3076
|
var ItemLabelColor = ({ value: prop }) => {
|
|
3027
3077
|
const color = extractColorFrom(prop);
|
|
3028
|
-
return /* @__PURE__ */
|
|
3078
|
+
return /* @__PURE__ */ React46.createElement("span", null, color);
|
|
3029
3079
|
};
|
|
3030
3080
|
var ItemLabelImage = ({ value }) => {
|
|
3031
3081
|
const { imageTitle } = useImage(value);
|
|
3032
|
-
return /* @__PURE__ */
|
|
3082
|
+
return /* @__PURE__ */ React46.createElement("span", null, imageTitle);
|
|
3033
3083
|
};
|
|
3034
3084
|
var ItemLabelGradient = ({ value }) => {
|
|
3035
3085
|
if (value.value.type.value === "linear") {
|
|
3036
|
-
return /* @__PURE__ */
|
|
3086
|
+
return /* @__PURE__ */ React46.createElement("span", null, (0, import_i18n18.__)("Linear Gradient", "elementor"));
|
|
3037
3087
|
}
|
|
3038
|
-
return /* @__PURE__ */
|
|
3088
|
+
return /* @__PURE__ */ React46.createElement("span", null, (0, import_i18n18.__)("Radial Gradient", "elementor"));
|
|
3039
3089
|
};
|
|
3040
3090
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
3041
3091
|
const propContext = useBoundProp(import_editor_props24.backgroundColorOverlayPropTypeUtil);
|
|
3042
|
-
return /* @__PURE__ */
|
|
3092
|
+
return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React46.createElement(ColorControl, { anchorEl })));
|
|
3043
3093
|
};
|
|
3044
3094
|
var ImageOverlayContent = () => {
|
|
3045
3095
|
const propContext = useBoundProp(import_editor_props24.backgroundImageOverlayPropTypeUtil);
|
|
3046
|
-
return /* @__PURE__ */
|
|
3096
|
+
return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(
|
|
3047
3097
|
ImageControl,
|
|
3048
3098
|
{
|
|
3049
3099
|
resolutionLabel: (0, import_i18n18.__)("Resolution", "elementor"),
|
|
3050
3100
|
sizes: backgroundResolutionOptions
|
|
3051
3101
|
}
|
|
3052
|
-
)))), /* @__PURE__ */
|
|
3102
|
+
)))), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayAttachment, null)));
|
|
3053
3103
|
};
|
|
3054
|
-
var StyledUnstableColorIndicator = (0,
|
|
3104
|
+
var StyledUnstableColorIndicator = (0, import_ui40.styled)(import_ui40.UnstableColorIndicator)(({ theme }) => ({
|
|
3055
3105
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
3056
3106
|
}));
|
|
3057
3107
|
var useImage = (image) => {
|
|
@@ -3089,19 +3139,19 @@ var BackgroundControl = createControl(() => {
|
|
|
3089
3139
|
const propContext = useBoundProp(import_editor_props25.backgroundPropTypeUtil);
|
|
3090
3140
|
const isUsingNestedProps = (0, import_editor_v1_adapters3.isExperimentActive)("e_v_3_30");
|
|
3091
3141
|
const colorLabel = (0, import_i18n19.__)("Color", "elementor");
|
|
3092
|
-
return /* @__PURE__ */
|
|
3142
|
+
return /* @__PURE__ */ React47.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React47.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React47.createElement(import_ui41.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui41.Grid, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React47.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React47.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React47.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ColorControl, null)))));
|
|
3093
3143
|
});
|
|
3094
3144
|
|
|
3095
3145
|
// src/controls/switch-control.tsx
|
|
3096
|
-
var
|
|
3146
|
+
var React48 = __toESM(require("react"));
|
|
3097
3147
|
var import_editor_props26 = require("@elementor/editor-props");
|
|
3098
|
-
var
|
|
3148
|
+
var import_ui42 = require("@elementor/ui");
|
|
3099
3149
|
var SwitchControl2 = createControl(() => {
|
|
3100
3150
|
const { value, setValue, disabled } = useBoundProp(import_editor_props26.booleanPropTypeUtil);
|
|
3101
3151
|
const handleChange = (event) => {
|
|
3102
3152
|
setValue(event.target.checked);
|
|
3103
3153
|
};
|
|
3104
|
-
return /* @__PURE__ */
|
|
3154
|
+
return /* @__PURE__ */ React48.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React48.createElement(import_ui42.Switch, { checked: !!value, onChange: handleChange, size: "small", disabled }));
|
|
3105
3155
|
});
|
|
3106
3156
|
// Annotate the CommonJS export names for ESM import in node:
|
|
3107
3157
|
0 && (module.exports = {
|
|
@@ -3117,6 +3167,7 @@ var SwitchControl2 = createControl(() => {
|
|
|
3117
3167
|
ControlToggleButtonGroup,
|
|
3118
3168
|
EqualUnequalSizesControl,
|
|
3119
3169
|
FontFamilyControl,
|
|
3170
|
+
FontFamilySelector,
|
|
3120
3171
|
GapControl,
|
|
3121
3172
|
ImageControl,
|
|
3122
3173
|
LinkControl,
|