@elementor/editor-editing-panel 1.12.0 → 1.13.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 +19 -0
- package/dist/index.js +277 -272
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +219 -214
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/components/add-or-remove-content.tsx +5 -3
- package/src/components/collapsible-content.tsx +2 -1
- package/src/components/popover-content.tsx +15 -0
- package/src/components/section-content.tsx +16 -0
- package/src/components/style-sections/border-section/border-section.tsx +3 -3
- package/src/components/style-sections/effects-section/effects-section.tsx +3 -3
- package/src/components/style-sections/layout-section/flex-order-field.tsx +4 -3
- package/src/components/style-sections/layout-section/flex-size-field.tsx +4 -3
- package/src/components/style-sections/layout-section/layout-section.tsx +3 -3
- package/src/components/style-sections/position-section/position-section.tsx +3 -3
- package/src/components/style-sections/size-section/overflow-field.tsx +2 -2
- package/src/components/style-sections/size-section/size-section.tsx +3 -2
- package/src/components/style-sections/spacing-section/spacing-section.tsx +3 -3
- package/src/components/style-sections/typography-section/typography-section.tsx +5 -5
- package/src/dynamics/components/dynamic-selection-control.tsx +4 -3
- package/src/dynamics/components/dynamic-selection.tsx +5 -4
package/dist/index.mjs
CHANGED
|
@@ -602,7 +602,7 @@ function useHandleApply(appliedIds, setAppliedIds) {
|
|
|
602
602
|
import { __createPanel as createPanel } from "@elementor/editor-panels";
|
|
603
603
|
|
|
604
604
|
// src/components/editing-panel.tsx
|
|
605
|
-
import * as
|
|
605
|
+
import * as React63 from "react";
|
|
606
606
|
import { ControlActionsProvider, ControlReplacementProvider } from "@elementor/editor-controls";
|
|
607
607
|
import { useSelectedElement } from "@elementor/editor-elements";
|
|
608
608
|
import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
|
|
@@ -623,7 +623,7 @@ function PopoverAction({
|
|
|
623
623
|
title,
|
|
624
624
|
visible = true,
|
|
625
625
|
icon: Icon,
|
|
626
|
-
popoverContent:
|
|
626
|
+
popoverContent: PopoverContent2
|
|
627
627
|
}) {
|
|
628
628
|
const id = useId2();
|
|
629
629
|
const popupState = usePopupState2({
|
|
@@ -645,7 +645,7 @@ function PopoverAction({
|
|
|
645
645
|
...bindPopover(popupState)
|
|
646
646
|
},
|
|
647
647
|
/* @__PURE__ */ React8.createElement(Stack3, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React8.createElement(Icon, { fontSize: SIZE, sx: { mr: 0.5 } }), /* @__PURE__ */ React8.createElement(Typography3, { variant: "subtitle2" }, title), /* @__PURE__ */ React8.createElement(IconButton, { sx: { ml: "auto" }, size: SIZE, onClick: popupState.close }, /* @__PURE__ */ React8.createElement(XIcon, { fontSize: SIZE }))),
|
|
648
|
-
/* @__PURE__ */ React8.createElement(
|
|
648
|
+
/* @__PURE__ */ React8.createElement(PopoverContent2, { closePopover: popupState.close })
|
|
649
649
|
));
|
|
650
650
|
}
|
|
651
651
|
|
|
@@ -664,9 +664,9 @@ function EditorPanelErrorFallback() {
|
|
|
664
664
|
}
|
|
665
665
|
|
|
666
666
|
// src/components/editing-panel-tabs.tsx
|
|
667
|
-
import * as
|
|
667
|
+
import * as React62 from "react";
|
|
668
668
|
import { Fragment as Fragment8 } from "react";
|
|
669
|
-
import { Divider as Divider5, Stack as
|
|
669
|
+
import { Divider as Divider5, Stack as Stack13, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
|
|
670
670
|
import { __ as __41 } from "@wordpress/i18n";
|
|
671
671
|
|
|
672
672
|
// src/components/settings-tab.tsx
|
|
@@ -838,7 +838,7 @@ var Control2 = ({ control }) => {
|
|
|
838
838
|
};
|
|
839
839
|
|
|
840
840
|
// src/components/style-tab.tsx
|
|
841
|
-
import * as
|
|
841
|
+
import * as React61 from "react";
|
|
842
842
|
import { useState as useState7 } from "react";
|
|
843
843
|
import { useElementSetting as useElementSetting4, useElementStyles } from "@elementor/editor-elements";
|
|
844
844
|
import { useActiveBreakpoint } from "@elementor/editor-responsive";
|
|
@@ -1014,27 +1014,31 @@ var BackgroundSection = () => {
|
|
|
1014
1014
|
};
|
|
1015
1015
|
|
|
1016
1016
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1017
|
-
import * as
|
|
1018
|
-
import { Stack as Stack6 } from "@elementor/ui";
|
|
1017
|
+
import * as React27 from "react";
|
|
1019
1018
|
|
|
1020
1019
|
// src/components/panel-divider.tsx
|
|
1021
1020
|
import * as React18 from "react";
|
|
1022
1021
|
import { Divider as Divider3 } from "@elementor/ui";
|
|
1023
1022
|
var PanelDivider = () => /* @__PURE__ */ React18.createElement(Divider3, { sx: { my: 0.5 } });
|
|
1024
1023
|
|
|
1024
|
+
// src/components/section-content.tsx
|
|
1025
|
+
import * as React19 from "react";
|
|
1026
|
+
import { Stack as Stack5 } from "@elementor/ui";
|
|
1027
|
+
var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React19.createElement(Stack5, { gap, sx: { ...sx } }, children);
|
|
1028
|
+
|
|
1025
1029
|
// src/components/style-sections/border-section/border-field.tsx
|
|
1026
|
-
import * as
|
|
1030
|
+
import * as React24 from "react";
|
|
1027
1031
|
import { __ as __8 } from "@wordpress/i18n";
|
|
1028
1032
|
|
|
1029
1033
|
// src/components/add-or-remove-content.tsx
|
|
1030
|
-
import * as
|
|
1034
|
+
import * as React20 from "react";
|
|
1031
1035
|
import { ControlLabel as ControlLabel2 } from "@elementor/editor-controls";
|
|
1032
1036
|
import { MinusIcon, PlusIcon } from "@elementor/icons";
|
|
1033
|
-
import { Collapse as Collapse2, IconButton as IconButton2, Stack as
|
|
1037
|
+
import { Collapse as Collapse2, IconButton as IconButton2, Stack as Stack6 } from "@elementor/ui";
|
|
1034
1038
|
var SIZE2 = "tiny";
|
|
1035
1039
|
var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
1036
|
-
return /* @__PURE__ */
|
|
1037
|
-
|
|
1040
|
+
return /* @__PURE__ */ React20.createElement(SectionContent, null, /* @__PURE__ */ React20.createElement(
|
|
1041
|
+
Stack6,
|
|
1038
1042
|
{
|
|
1039
1043
|
direction: "row",
|
|
1040
1044
|
sx: {
|
|
@@ -1042,22 +1046,22 @@ var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
|
1042
1046
|
alignItems: "center"
|
|
1043
1047
|
}
|
|
1044
1048
|
},
|
|
1045
|
-
/* @__PURE__ */
|
|
1046
|
-
isAdded ? /* @__PURE__ */
|
|
1047
|
-
), /* @__PURE__ */
|
|
1049
|
+
/* @__PURE__ */ React20.createElement(ControlLabel2, null, label),
|
|
1050
|
+
isAdded ? /* @__PURE__ */ React20.createElement(IconButton2, { size: SIZE2, onClick: onRemove, "aria-label": "Remove" }, /* @__PURE__ */ React20.createElement(MinusIcon, { fontSize: SIZE2 })) : /* @__PURE__ */ React20.createElement(IconButton2, { size: SIZE2, onClick: onAdd, "aria-label": "Add" }, /* @__PURE__ */ React20.createElement(PlusIcon, { fontSize: SIZE2 }))
|
|
1051
|
+
), /* @__PURE__ */ React20.createElement(Collapse2, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React20.createElement(SectionContent, null, children)));
|
|
1048
1052
|
};
|
|
1049
1053
|
|
|
1050
1054
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
1051
|
-
import * as
|
|
1055
|
+
import * as React21 from "react";
|
|
1052
1056
|
import { ColorControl, ControlLabel as ControlLabel3 } from "@elementor/editor-controls";
|
|
1053
1057
|
import { Grid } from "@elementor/ui";
|
|
1054
1058
|
import { __ as __5 } from "@wordpress/i18n";
|
|
1055
1059
|
var BorderColorField = () => {
|
|
1056
|
-
return /* @__PURE__ */
|
|
1060
|
+
return /* @__PURE__ */ React21.createElement(StylesField, { bind: "border-color" }, /* @__PURE__ */ React21.createElement(Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React21.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(ControlLabel3, null, __5("Border color", "elementor"))), /* @__PURE__ */ React21.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(ColorControl, null))));
|
|
1057
1061
|
};
|
|
1058
1062
|
|
|
1059
1063
|
// src/components/style-sections/border-section/border-style-field.tsx
|
|
1060
|
-
import * as
|
|
1064
|
+
import * as React22 from "react";
|
|
1061
1065
|
import { ControlLabel as ControlLabel4, SelectControl as SelectControl2 } from "@elementor/editor-controls";
|
|
1062
1066
|
import { Grid as Grid2 } from "@elementor/ui";
|
|
1063
1067
|
import { __ as __6 } from "@wordpress/i18n";
|
|
@@ -1073,11 +1077,11 @@ var borderStyles = [
|
|
|
1073
1077
|
{ value: "outset", label: __6("Outset", "elementor") }
|
|
1074
1078
|
];
|
|
1075
1079
|
var BorderStyleField = () => {
|
|
1076
|
-
return /* @__PURE__ */
|
|
1080
|
+
return /* @__PURE__ */ React22.createElement(StylesField, { bind: "border-style" }, /* @__PURE__ */ React22.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(ControlLabel4, null, __6("Border type", "elementor"))), /* @__PURE__ */ React22.createElement(Grid2, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React22.createElement(SelectControl2, { options: borderStyles }))));
|
|
1077
1081
|
};
|
|
1078
1082
|
|
|
1079
1083
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
1080
|
-
import * as
|
|
1084
|
+
import * as React23 from "react";
|
|
1081
1085
|
import { EqualUnequalSizesControl } from "@elementor/editor-controls";
|
|
1082
1086
|
import { borderWidthPropTypeUtil } from "@elementor/editor-props";
|
|
1083
1087
|
import { SideAllIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
|
|
@@ -1085,32 +1089,32 @@ import { __ as __7 } from "@wordpress/i18n";
|
|
|
1085
1089
|
var edges = [
|
|
1086
1090
|
{
|
|
1087
1091
|
label: __7("Top", "elementor"),
|
|
1088
|
-
icon: /* @__PURE__ */
|
|
1092
|
+
icon: /* @__PURE__ */ React23.createElement(SideTopIcon, { fontSize: "tiny" }),
|
|
1089
1093
|
bind: "top"
|
|
1090
1094
|
},
|
|
1091
1095
|
{
|
|
1092
1096
|
label: __7("Right", "elementor"),
|
|
1093
|
-
icon: /* @__PURE__ */
|
|
1097
|
+
icon: /* @__PURE__ */ React23.createElement(SideRightIcon, { fontSize: "tiny" }),
|
|
1094
1098
|
bind: "right"
|
|
1095
1099
|
},
|
|
1096
1100
|
{
|
|
1097
1101
|
label: __7("Bottom", "elementor"),
|
|
1098
|
-
icon: /* @__PURE__ */
|
|
1102
|
+
icon: /* @__PURE__ */ React23.createElement(SideBottomIcon, { fontSize: "tiny" }),
|
|
1099
1103
|
bind: "bottom"
|
|
1100
1104
|
},
|
|
1101
1105
|
{
|
|
1102
1106
|
label: __7("Left", "elementor"),
|
|
1103
|
-
icon: /* @__PURE__ */
|
|
1107
|
+
icon: /* @__PURE__ */ React23.createElement(SideLeftIcon, { fontSize: "tiny" }),
|
|
1104
1108
|
bind: "left"
|
|
1105
1109
|
}
|
|
1106
1110
|
];
|
|
1107
1111
|
var BorderWidthField = () => {
|
|
1108
|
-
return /* @__PURE__ */
|
|
1112
|
+
return /* @__PURE__ */ React23.createElement(StylesField, { bind: "border-width" }, /* @__PURE__ */ React23.createElement(
|
|
1109
1113
|
EqualUnequalSizesControl,
|
|
1110
1114
|
{
|
|
1111
1115
|
items: edges,
|
|
1112
1116
|
label: __7("Border width", "elementor"),
|
|
1113
|
-
icon: /* @__PURE__ */
|
|
1117
|
+
icon: /* @__PURE__ */ React23.createElement(SideAllIcon, { fontSize: "tiny" }),
|
|
1114
1118
|
multiSizePropTypeUtil: borderWidthPropTypeUtil
|
|
1115
1119
|
}
|
|
1116
1120
|
));
|
|
@@ -1135,7 +1139,7 @@ var BorderField = () => {
|
|
|
1135
1139
|
});
|
|
1136
1140
|
};
|
|
1137
1141
|
const hasBorder = Object.values(border ?? {}).some(Boolean);
|
|
1138
|
-
return /* @__PURE__ */
|
|
1142
|
+
return /* @__PURE__ */ React24.createElement(
|
|
1139
1143
|
AddOrRemoveContent,
|
|
1140
1144
|
{
|
|
1141
1145
|
label: __8("Border", "elementor"),
|
|
@@ -1143,14 +1147,14 @@ var BorderField = () => {
|
|
|
1143
1147
|
onAdd: addBorder,
|
|
1144
1148
|
onRemove: removeBorder
|
|
1145
1149
|
},
|
|
1146
|
-
/* @__PURE__ */
|
|
1147
|
-
/* @__PURE__ */
|
|
1148
|
-
/* @__PURE__ */
|
|
1150
|
+
/* @__PURE__ */ React24.createElement(BorderWidthField, null),
|
|
1151
|
+
/* @__PURE__ */ React24.createElement(BorderColorField, null),
|
|
1152
|
+
/* @__PURE__ */ React24.createElement(BorderStyleField, null)
|
|
1149
1153
|
);
|
|
1150
1154
|
};
|
|
1151
1155
|
|
|
1152
1156
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
1153
|
-
import * as
|
|
1157
|
+
import * as React26 from "react";
|
|
1154
1158
|
import { EqualUnequalSizesControl as EqualUnequalSizesControl2 } from "@elementor/editor-controls";
|
|
1155
1159
|
import { borderRadiusPropTypeUtil } from "@elementor/editor-props";
|
|
1156
1160
|
import {
|
|
@@ -1172,7 +1176,7 @@ function useDirection() {
|
|
|
1172
1176
|
}
|
|
1173
1177
|
|
|
1174
1178
|
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
1175
|
-
import * as
|
|
1179
|
+
import * as React25 from "react";
|
|
1176
1180
|
import { useRef } from "react";
|
|
1177
1181
|
import { useTheme as useTheme2 } from "@elementor/ui";
|
|
1178
1182
|
var CLOCKWISE_ANGLES = {
|
|
@@ -1190,7 +1194,7 @@ var COUNTER_CLOCKWISE_ANGLES = {
|
|
|
1190
1194
|
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
1191
1195
|
const rotate = useRef(useGetTargetAngle(isClockwise, offset));
|
|
1192
1196
|
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
1193
|
-
return /* @__PURE__ */
|
|
1197
|
+
return /* @__PURE__ */ React25.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
1194
1198
|
};
|
|
1195
1199
|
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
1196
1200
|
const [direction] = useStylesField("flex-direction");
|
|
@@ -1216,54 +1220,52 @@ var getEndEndLabel = (isSiteRtl) => isSiteRtl ? __9("Bottom left", "elementor")
|
|
|
1216
1220
|
var getCorners = (isSiteRtl) => [
|
|
1217
1221
|
{
|
|
1218
1222
|
label: getStartStartLabel(isSiteRtl),
|
|
1219
|
-
icon: /* @__PURE__ */
|
|
1223
|
+
icon: /* @__PURE__ */ React26.createElement(RotatedIcon, { icon: StartStartIcon, size: "tiny" }),
|
|
1220
1224
|
bind: "start-start"
|
|
1221
1225
|
},
|
|
1222
1226
|
{
|
|
1223
1227
|
label: getStartEndLabel(isSiteRtl),
|
|
1224
|
-
icon: /* @__PURE__ */
|
|
1228
|
+
icon: /* @__PURE__ */ React26.createElement(RotatedIcon, { icon: StartEndIcon, size: "tiny" }),
|
|
1225
1229
|
bind: "start-end"
|
|
1226
1230
|
},
|
|
1227
1231
|
{
|
|
1228
1232
|
label: getEndEndLabel(isSiteRtl),
|
|
1229
|
-
icon: /* @__PURE__ */
|
|
1233
|
+
icon: /* @__PURE__ */ React26.createElement(RotatedIcon, { icon: EndEndIcon, size: "tiny" }),
|
|
1230
1234
|
bind: "end-end"
|
|
1231
1235
|
},
|
|
1232
1236
|
{
|
|
1233
1237
|
label: getEndStartLabel(isSiteRtl),
|
|
1234
|
-
icon: /* @__PURE__ */
|
|
1238
|
+
icon: /* @__PURE__ */ React26.createElement(RotatedIcon, { icon: EndStartIcon, size: "tiny" }),
|
|
1235
1239
|
bind: "end-start"
|
|
1236
1240
|
}
|
|
1237
1241
|
];
|
|
1238
1242
|
var BorderRadiusField = () => {
|
|
1239
1243
|
const { isSiteRtl } = useDirection();
|
|
1240
|
-
return /* @__PURE__ */
|
|
1244
|
+
return /* @__PURE__ */ React26.createElement(StylesField, { bind: "border-radius" }, /* @__PURE__ */ React26.createElement(
|
|
1241
1245
|
EqualUnequalSizesControl2,
|
|
1242
1246
|
{
|
|
1243
1247
|
items: getCorners(isSiteRtl),
|
|
1244
1248
|
label: __9("Border radius", "elementor"),
|
|
1245
|
-
icon: /* @__PURE__ */
|
|
1249
|
+
icon: /* @__PURE__ */ React26.createElement(BorderCornersIcon, { fontSize: "tiny" }),
|
|
1246
1250
|
multiSizePropTypeUtil: borderRadiusPropTypeUtil
|
|
1247
1251
|
}
|
|
1248
1252
|
));
|
|
1249
1253
|
};
|
|
1250
1254
|
|
|
1251
1255
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1252
|
-
var BorderSection = () => /* @__PURE__ */
|
|
1256
|
+
var BorderSection = () => /* @__PURE__ */ React27.createElement(SectionContent, null, /* @__PURE__ */ React27.createElement(BorderRadiusField, null), /* @__PURE__ */ React27.createElement(PanelDivider, null), /* @__PURE__ */ React27.createElement(BorderField, null));
|
|
1253
1257
|
|
|
1254
1258
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
1255
|
-
import * as
|
|
1259
|
+
import * as React28 from "react";
|
|
1256
1260
|
import { BoxShadowRepeaterControl } from "@elementor/editor-controls";
|
|
1257
|
-
import { Stack as Stack7 } from "@elementor/ui";
|
|
1258
1261
|
var EffectsSection = () => {
|
|
1259
|
-
return /* @__PURE__ */
|
|
1262
|
+
return /* @__PURE__ */ React28.createElement(SectionContent, null, /* @__PURE__ */ React28.createElement(StylesField, { bind: "box-shadow" }, /* @__PURE__ */ React28.createElement(BoxShadowRepeaterControl, null)));
|
|
1260
1263
|
};
|
|
1261
1264
|
|
|
1262
1265
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
1263
|
-
import * as
|
|
1266
|
+
import * as React38 from "react";
|
|
1264
1267
|
import { ControlLabel as ControlLabel13 } from "@elementor/editor-controls";
|
|
1265
1268
|
import { useParentElement } from "@elementor/editor-elements";
|
|
1266
|
-
import { Stack as Stack13 } from "@elementor/ui";
|
|
1267
1269
|
import { __ as __19 } from "@wordpress/i18n";
|
|
1268
1270
|
|
|
1269
1271
|
// src/hooks/use-computed-style.ts
|
|
@@ -1292,7 +1294,7 @@ function useComputedStyle(elementId) {
|
|
|
1292
1294
|
}
|
|
1293
1295
|
|
|
1294
1296
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
1295
|
-
import * as
|
|
1297
|
+
import * as React29 from "react";
|
|
1296
1298
|
import { ControlLabel as ControlLabel5, ToggleControl } from "@elementor/editor-controls";
|
|
1297
1299
|
import {
|
|
1298
1300
|
LayoutAlignCenterIcon as CenterIcon,
|
|
@@ -1312,35 +1314,35 @@ var options = [
|
|
|
1312
1314
|
{
|
|
1313
1315
|
value: "start",
|
|
1314
1316
|
label: __10("Start", "elementor"),
|
|
1315
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1317
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
|
|
1316
1318
|
showTooltip: true
|
|
1317
1319
|
},
|
|
1318
1320
|
{
|
|
1319
1321
|
value: "center",
|
|
1320
1322
|
label: __10("Center", "elementor"),
|
|
1321
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1323
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: CenterIcon, size, ...iconProps }),
|
|
1322
1324
|
showTooltip: true
|
|
1323
1325
|
},
|
|
1324
1326
|
{
|
|
1325
1327
|
value: "end",
|
|
1326
1328
|
label: __10("End", "elementor"),
|
|
1327
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1329
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
|
|
1328
1330
|
showTooltip: true
|
|
1329
1331
|
},
|
|
1330
1332
|
{
|
|
1331
1333
|
value: "stretch",
|
|
1332
1334
|
label: __10("Stretch", "elementor"),
|
|
1333
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1335
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: JustifyIcon, size, ...iconProps }),
|
|
1334
1336
|
showTooltip: true
|
|
1335
1337
|
}
|
|
1336
1338
|
];
|
|
1337
1339
|
var AlignItemsField = () => {
|
|
1338
1340
|
const { isSiteRtl } = useDirection();
|
|
1339
|
-
return /* @__PURE__ */
|
|
1341
|
+
return /* @__PURE__ */ React29.createElement(DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React29.createElement(ThemeProvider, null, /* @__PURE__ */ React29.createElement(StylesField, { bind: "align-items" }, /* @__PURE__ */ React29.createElement(Grid3, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React29.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(ControlLabel5, null, __10("Align items", "elementor"))), /* @__PURE__ */ React29.createElement(Grid3, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React29.createElement(ToggleControl, { options }))))));
|
|
1340
1342
|
};
|
|
1341
1343
|
|
|
1342
1344
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
1343
|
-
import * as
|
|
1345
|
+
import * as React30 from "react";
|
|
1344
1346
|
import { ControlLabel as ControlLabel6, ToggleControl as ToggleControl2 } from "@elementor/editor-controls";
|
|
1345
1347
|
import {
|
|
1346
1348
|
LayoutAlignCenterIcon as CenterIcon2,
|
|
@@ -1360,37 +1362,37 @@ var options2 = [
|
|
|
1360
1362
|
{
|
|
1361
1363
|
value: "start",
|
|
1362
1364
|
label: __11("Start", "elementor"),
|
|
1363
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1365
|
+
renderContent: ({ size }) => /* @__PURE__ */ React30.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
|
|
1364
1366
|
showTooltip: true
|
|
1365
1367
|
},
|
|
1366
1368
|
{
|
|
1367
1369
|
value: "center",
|
|
1368
1370
|
label: __11("Center", "elementor"),
|
|
1369
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1371
|
+
renderContent: ({ size }) => /* @__PURE__ */ React30.createElement(RotatedIcon, { icon: CenterIcon2, size, ...iconProps2 }),
|
|
1370
1372
|
showTooltip: true
|
|
1371
1373
|
},
|
|
1372
1374
|
{
|
|
1373
1375
|
value: "end",
|
|
1374
1376
|
label: __11("End", "elementor"),
|
|
1375
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1377
|
+
renderContent: ({ size }) => /* @__PURE__ */ React30.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
|
|
1376
1378
|
showTooltip: true
|
|
1377
1379
|
},
|
|
1378
1380
|
{
|
|
1379
1381
|
value: "stretch",
|
|
1380
1382
|
label: __11("Stretch", "elementor"),
|
|
1381
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1383
|
+
renderContent: ({ size }) => /* @__PURE__ */ React30.createElement(RotatedIcon, { icon: JustifyIcon2, size, ...iconProps2 }),
|
|
1382
1384
|
showTooltip: true
|
|
1383
1385
|
}
|
|
1384
1386
|
];
|
|
1385
1387
|
var AlignSelfChild = () => {
|
|
1386
1388
|
const { isSiteRtl } = useDirection();
|
|
1387
|
-
return /* @__PURE__ */
|
|
1389
|
+
return /* @__PURE__ */ React30.createElement(DirectionProvider2, { rtl: isSiteRtl }, /* @__PURE__ */ React30.createElement(ThemeProvider2, null, /* @__PURE__ */ React30.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React30.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel6, null, __11("Align self", "elementor"))), /* @__PURE__ */ React30.createElement(Grid4, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React30.createElement(ToggleControl2, { options: options2 }))))));
|
|
1388
1390
|
};
|
|
1389
1391
|
|
|
1390
1392
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
1391
|
-
import * as
|
|
1393
|
+
import * as React31 from "react";
|
|
1392
1394
|
import { ControlLabel as ControlLabel7, ToggleControl as ToggleControl3 } from "@elementor/editor-controls";
|
|
1393
|
-
import { Stack as
|
|
1395
|
+
import { Stack as Stack7 } from "@elementor/ui";
|
|
1394
1396
|
import { __ as __12 } from "@wordpress/i18n";
|
|
1395
1397
|
var DisplayField = () => {
|
|
1396
1398
|
const options11 = [
|
|
@@ -1413,11 +1415,11 @@ var DisplayField = () => {
|
|
|
1413
1415
|
showTooltip: true
|
|
1414
1416
|
}
|
|
1415
1417
|
];
|
|
1416
|
-
return /* @__PURE__ */
|
|
1418
|
+
return /* @__PURE__ */ React31.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React31.createElement(Stack7, { gap: 1 }, /* @__PURE__ */ React31.createElement(ControlLabel7, null, __12("Display", "elementor")), /* @__PURE__ */ React31.createElement(ToggleControl3, { options: options11, fullWidth: true })));
|
|
1417
1419
|
};
|
|
1418
1420
|
|
|
1419
1421
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
1420
|
-
import * as
|
|
1422
|
+
import * as React32 from "react";
|
|
1421
1423
|
import { ControlLabel as ControlLabel8, ToggleControl as ToggleControl4 } from "@elementor/editor-controls";
|
|
1422
1424
|
import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
|
|
1423
1425
|
import { DirectionProvider as DirectionProvider3, Grid as Grid5, ThemeProvider as ThemeProvider3, withDirection as withDirection4 } from "@elementor/ui";
|
|
@@ -1428,14 +1430,14 @@ var options3 = [
|
|
|
1428
1430
|
label: __13("Row", "elementor"),
|
|
1429
1431
|
renderContent: ({ size }) => {
|
|
1430
1432
|
const StartIcon5 = withDirection4(ArrowRightIcon);
|
|
1431
|
-
return /* @__PURE__ */
|
|
1433
|
+
return /* @__PURE__ */ React32.createElement(StartIcon5, { fontSize: size });
|
|
1432
1434
|
},
|
|
1433
1435
|
showTooltip: true
|
|
1434
1436
|
},
|
|
1435
1437
|
{
|
|
1436
1438
|
value: "column",
|
|
1437
1439
|
label: __13("Column", "elementor"),
|
|
1438
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1440
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(ArrowDownSmallIcon, { fontSize: size }),
|
|
1439
1441
|
showTooltip: true
|
|
1440
1442
|
},
|
|
1441
1443
|
{
|
|
@@ -1443,24 +1445,24 @@ var options3 = [
|
|
|
1443
1445
|
label: __13("Reversed row", "elementor"),
|
|
1444
1446
|
renderContent: ({ size }) => {
|
|
1445
1447
|
const EndIcon5 = withDirection4(ArrowLeftIcon);
|
|
1446
|
-
return /* @__PURE__ */
|
|
1448
|
+
return /* @__PURE__ */ React32.createElement(EndIcon5, { fontSize: size });
|
|
1447
1449
|
},
|
|
1448
1450
|
showTooltip: true
|
|
1449
1451
|
},
|
|
1450
1452
|
{
|
|
1451
1453
|
value: "column-reverse",
|
|
1452
1454
|
label: __13("Reversed column", "elementor"),
|
|
1453
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1455
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(ArrowUpSmallIcon, { fontSize: size }),
|
|
1454
1456
|
showTooltip: true
|
|
1455
1457
|
}
|
|
1456
1458
|
];
|
|
1457
1459
|
var FlexDirectionField = () => {
|
|
1458
1460
|
const { isSiteRtl } = useDirection();
|
|
1459
|
-
return /* @__PURE__ */
|
|
1461
|
+
return /* @__PURE__ */ React32.createElement(DirectionProvider3, { rtl: isSiteRtl }, /* @__PURE__ */ React32.createElement(ThemeProvider3, null, /* @__PURE__ */ React32.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React32.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(ControlLabel8, null, __13("Direction", "elementor"))), /* @__PURE__ */ React32.createElement(Grid5, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(ToggleControl4, { options: options3 }))))));
|
|
1460
1462
|
};
|
|
1461
1463
|
|
|
1462
1464
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
1463
|
-
import * as
|
|
1465
|
+
import * as React33 from "react";
|
|
1464
1466
|
import { useState as useState4 } from "react";
|
|
1465
1467
|
import {
|
|
1466
1468
|
ControlLabel as ControlLabel9,
|
|
@@ -1468,7 +1470,7 @@ import {
|
|
|
1468
1470
|
NumberControl
|
|
1469
1471
|
} from "@elementor/editor-controls";
|
|
1470
1472
|
import { ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowUpSmallIcon as ArrowUpSmallIcon2, PencilIcon } from "@elementor/icons";
|
|
1471
|
-
import { DirectionProvider as DirectionProvider4, Grid as Grid6,
|
|
1473
|
+
import { DirectionProvider as DirectionProvider4, Grid as Grid6, ThemeProvider as ThemeProvider4 } from "@elementor/ui";
|
|
1472
1474
|
import { __ as __14 } from "@wordpress/i18n";
|
|
1473
1475
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
1474
1476
|
var LAST_DEFAULT_VALUE = 99999;
|
|
@@ -1483,19 +1485,19 @@ var items = [
|
|
|
1483
1485
|
{
|
|
1484
1486
|
value: FIRST,
|
|
1485
1487
|
label: __14("First", "elementor"),
|
|
1486
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1488
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(ArrowUpSmallIcon2, { fontSize: size }),
|
|
1487
1489
|
showTooltip: true
|
|
1488
1490
|
},
|
|
1489
1491
|
{
|
|
1490
1492
|
value: LAST,
|
|
1491
1493
|
label: __14("Last", "elementor"),
|
|
1492
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1494
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(ArrowDownSmallIcon2, { fontSize: size }),
|
|
1493
1495
|
showTooltip: true
|
|
1494
1496
|
},
|
|
1495
1497
|
{
|
|
1496
1498
|
value: CUSTOM,
|
|
1497
1499
|
label: __14("Custom", "elementor"),
|
|
1498
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1500
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(PencilIcon, { fontSize: size }),
|
|
1499
1501
|
showTooltip: true
|
|
1500
1502
|
}
|
|
1501
1503
|
];
|
|
@@ -1510,7 +1512,7 @@ var FlexOrderField = () => {
|
|
|
1510
1512
|
}
|
|
1511
1513
|
setOrder({ $$type: "number", value: orderValueMap[group] });
|
|
1512
1514
|
};
|
|
1513
|
-
return /* @__PURE__ */
|
|
1515
|
+
return /* @__PURE__ */ React33.createElement(DirectionProvider4, { rtl: isSiteRtl }, /* @__PURE__ */ React33.createElement(ThemeProvider4, null, /* @__PURE__ */ React33.createElement(SectionContent, null, /* @__PURE__ */ React33.createElement(Grid6, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel9, null, __14("Order", "elementor"))), /* @__PURE__ */ React33.createElement(Grid6, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(
|
|
1514
1516
|
ControlToggleButtonGroup,
|
|
1515
1517
|
{
|
|
1516
1518
|
items,
|
|
@@ -1518,7 +1520,7 @@ var FlexOrderField = () => {
|
|
|
1518
1520
|
onChange: handleToggleButtonChange,
|
|
1519
1521
|
exclusive: true
|
|
1520
1522
|
}
|
|
1521
|
-
))), CUSTOM === groupControlValue && /* @__PURE__ */
|
|
1523
|
+
))), CUSTOM === groupControlValue && /* @__PURE__ */ React33.createElement(StylesField, { bind: "order" }, /* @__PURE__ */ React33.createElement(Grid6, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel9, null, __14("Custom order", "elementor"))), /* @__PURE__ */ React33.createElement(Grid6, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(
|
|
1522
1524
|
NumberControl,
|
|
1523
1525
|
{
|
|
1524
1526
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -1538,7 +1540,7 @@ var getGroupControlValue = (order) => {
|
|
|
1538
1540
|
};
|
|
1539
1541
|
|
|
1540
1542
|
// src/components/style-sections/layout-section/flex-size-field.tsx
|
|
1541
|
-
import * as
|
|
1543
|
+
import * as React34 from "react";
|
|
1542
1544
|
import { useMemo as useMemo2, useState as useState5 } from "react";
|
|
1543
1545
|
import {
|
|
1544
1546
|
ControlLabel as ControlLabel10,
|
|
@@ -1547,26 +1549,26 @@ import {
|
|
|
1547
1549
|
SizeControl as SizeControl2
|
|
1548
1550
|
} from "@elementor/editor-controls";
|
|
1549
1551
|
import { ExpandIcon, PencilIcon as PencilIcon2, ShrinkIcon } from "@elementor/icons";
|
|
1550
|
-
import { DirectionProvider as DirectionProvider5, Grid as Grid7,
|
|
1552
|
+
import { DirectionProvider as DirectionProvider5, Grid as Grid7, ThemeProvider as ThemeProvider5 } from "@elementor/ui";
|
|
1551
1553
|
import { __ as __15 } from "@wordpress/i18n";
|
|
1552
1554
|
var DEFAULT = 1;
|
|
1553
1555
|
var items2 = [
|
|
1554
1556
|
{
|
|
1555
1557
|
value: "flex-grow",
|
|
1556
1558
|
label: __15("Grow", "elementor"),
|
|
1557
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1559
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(ExpandIcon, { fontSize: size }),
|
|
1558
1560
|
showTooltip: true
|
|
1559
1561
|
},
|
|
1560
1562
|
{
|
|
1561
1563
|
value: "flex-shrink",
|
|
1562
1564
|
label: __15("Shrink", "elementor"),
|
|
1563
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1565
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(ShrinkIcon, { fontSize: size }),
|
|
1564
1566
|
showTooltip: true
|
|
1565
1567
|
},
|
|
1566
1568
|
{
|
|
1567
1569
|
value: "custom",
|
|
1568
1570
|
label: __15("Custom", "elementor"),
|
|
1569
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1571
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(PencilIcon2, { fontSize: size }),
|
|
1570
1572
|
showTooltip: true
|
|
1571
1573
|
}
|
|
1572
1574
|
];
|
|
@@ -1590,7 +1592,7 @@ var FlexSizeField = () => {
|
|
|
1590
1592
|
setGrowField(null);
|
|
1591
1593
|
setShrinkField({ $$type: "number", value: DEFAULT });
|
|
1592
1594
|
};
|
|
1593
|
-
return /* @__PURE__ */
|
|
1595
|
+
return /* @__PURE__ */ React34.createElement(DirectionProvider5, { rtl: isSiteRtl }, /* @__PURE__ */ React34.createElement(ThemeProvider5, null, /* @__PURE__ */ React34.createElement(SectionContent, null, /* @__PURE__ */ React34.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel10, null, __15("Size", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(
|
|
1594
1596
|
ControlToggleButtonGroup2,
|
|
1595
1597
|
{
|
|
1596
1598
|
value: activeGroup,
|
|
@@ -1598,9 +1600,9 @@ var FlexSizeField = () => {
|
|
|
1598
1600
|
items: items2,
|
|
1599
1601
|
exclusive: true
|
|
1600
1602
|
}
|
|
1601
|
-
))), "custom" === activeGroup && /* @__PURE__ */
|
|
1603
|
+
))), "custom" === activeGroup && /* @__PURE__ */ React34.createElement(FlexCustomField, null))));
|
|
1602
1604
|
};
|
|
1603
|
-
var FlexCustomField = () => /* @__PURE__ */
|
|
1605
|
+
var FlexCustomField = () => /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React34.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel10, null, __15("Grow", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(NumberControl2, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-shrink" }, /* @__PURE__ */ React34.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel10, null, __15("Shrink", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(NumberControl2, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-basis" }, /* @__PURE__ */ React34.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel10, null, __15("Basis", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(SizeControl2, null)))));
|
|
1604
1606
|
var getActiveGroup = ({
|
|
1605
1607
|
grow,
|
|
1606
1608
|
shrink,
|
|
@@ -1622,16 +1624,16 @@ var getActiveGroup = ({
|
|
|
1622
1624
|
};
|
|
1623
1625
|
|
|
1624
1626
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
1625
|
-
import * as
|
|
1627
|
+
import * as React35 from "react";
|
|
1626
1628
|
import { GapControl } from "@elementor/editor-controls";
|
|
1627
|
-
import { Stack as
|
|
1629
|
+
import { Stack as Stack8 } from "@elementor/ui";
|
|
1628
1630
|
import { __ as __16 } from "@wordpress/i18n";
|
|
1629
1631
|
var GapControlField = () => {
|
|
1630
|
-
return /* @__PURE__ */
|
|
1632
|
+
return /* @__PURE__ */ React35.createElement(Stack8, { gap: 1 }, /* @__PURE__ */ React35.createElement(StylesField, { bind: "gap" }, /* @__PURE__ */ React35.createElement(GapControl, { label: __16("Gaps", "elementor") })));
|
|
1631
1633
|
};
|
|
1632
1634
|
|
|
1633
1635
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
1634
|
-
import * as
|
|
1636
|
+
import * as React36 from "react";
|
|
1635
1637
|
import { ControlLabel as ControlLabel11, ToggleControl as ToggleControl5 } from "@elementor/editor-controls";
|
|
1636
1638
|
import {
|
|
1637
1639
|
JustifyBottomIcon,
|
|
@@ -1641,7 +1643,7 @@ import {
|
|
|
1641
1643
|
JustifySpaceBetweenVerticalIcon as BetweenIcon,
|
|
1642
1644
|
JustifyTopIcon
|
|
1643
1645
|
} from "@elementor/icons";
|
|
1644
|
-
import { DirectionProvider as DirectionProvider6, Stack as
|
|
1646
|
+
import { DirectionProvider as DirectionProvider6, Stack as Stack9, ThemeProvider as ThemeProvider6, withDirection as withDirection5 } from "@elementor/ui";
|
|
1645
1647
|
import { __ as __17 } from "@wordpress/i18n";
|
|
1646
1648
|
var StartIcon3 = withDirection5(JustifyTopIcon);
|
|
1647
1649
|
var EndIcon3 = withDirection5(JustifyBottomIcon);
|
|
@@ -1653,47 +1655,47 @@ var options4 = [
|
|
|
1653
1655
|
{
|
|
1654
1656
|
value: "start",
|
|
1655
1657
|
label: __17("Start", "elementor"),
|
|
1656
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1658
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: StartIcon3, size, ...iconProps3 }),
|
|
1657
1659
|
showTooltip: true
|
|
1658
1660
|
},
|
|
1659
1661
|
{
|
|
1660
1662
|
value: "center",
|
|
1661
1663
|
label: __17("Center", "elementor"),
|
|
1662
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1664
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: CenterIcon3, size, ...iconProps3 }),
|
|
1663
1665
|
showTooltip: true
|
|
1664
1666
|
},
|
|
1665
1667
|
{
|
|
1666
1668
|
value: "end",
|
|
1667
1669
|
label: __17("End", "elementor"),
|
|
1668
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1670
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: EndIcon3, size, ...iconProps3 }),
|
|
1669
1671
|
showTooltip: true
|
|
1670
1672
|
},
|
|
1671
1673
|
{
|
|
1672
1674
|
value: "space-between",
|
|
1673
1675
|
label: __17("Space between", "elementor"),
|
|
1674
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1676
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: BetweenIcon, size, ...iconProps3 }),
|
|
1675
1677
|
showTooltip: true
|
|
1676
1678
|
},
|
|
1677
1679
|
{
|
|
1678
1680
|
value: "space-around",
|
|
1679
1681
|
label: __17("Space around", "elementor"),
|
|
1680
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1682
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: AroundIcon, size, ...iconProps3 }),
|
|
1681
1683
|
showTooltip: true
|
|
1682
1684
|
},
|
|
1683
1685
|
{
|
|
1684
1686
|
value: "space-evenly",
|
|
1685
1687
|
label: __17("Space evenly", "elementor"),
|
|
1686
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1688
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: EvenlyIcon, size, ...iconProps3 }),
|
|
1687
1689
|
showTooltip: true
|
|
1688
1690
|
}
|
|
1689
1691
|
];
|
|
1690
1692
|
var JustifyContentField = () => {
|
|
1691
1693
|
const { isSiteRtl } = useDirection();
|
|
1692
|
-
return /* @__PURE__ */
|
|
1694
|
+
return /* @__PURE__ */ React36.createElement(DirectionProvider6, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(ThemeProvider6, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React36.createElement(Stack9, { gap: 1 }, /* @__PURE__ */ React36.createElement(ControlLabel11, null, __17("Justify content", "elementor")), /* @__PURE__ */ React36.createElement(ToggleControl5, { options: options4, fullWidth: true })))));
|
|
1693
1695
|
};
|
|
1694
1696
|
|
|
1695
1697
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
1696
|
-
import * as
|
|
1698
|
+
import * as React37 from "react";
|
|
1697
1699
|
import { ControlLabel as ControlLabel12, ToggleControl as ToggleControl6 } from "@elementor/editor-controls";
|
|
1698
1700
|
import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
|
|
1699
1701
|
import { DirectionProvider as DirectionProvider7, Grid as Grid8, ThemeProvider as ThemeProvider7 } from "@elementor/ui";
|
|
@@ -1702,25 +1704,25 @@ var options5 = [
|
|
|
1702
1704
|
{
|
|
1703
1705
|
value: "nowrap",
|
|
1704
1706
|
label: __18("No wrap", "elementor"),
|
|
1705
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1707
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowRightIcon2, { fontSize: size }),
|
|
1706
1708
|
showTooltip: true
|
|
1707
1709
|
},
|
|
1708
1710
|
{
|
|
1709
1711
|
value: "wrap",
|
|
1710
1712
|
label: __18("Wrap", "elementor"),
|
|
1711
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1713
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowBackIcon, { fontSize: size }),
|
|
1712
1714
|
showTooltip: true
|
|
1713
1715
|
},
|
|
1714
1716
|
{
|
|
1715
1717
|
value: "wrap-reverse",
|
|
1716
1718
|
label: __18("Reversed wrap", "elementor"),
|
|
1717
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1719
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowForwardIcon, { fontSize: size }),
|
|
1718
1720
|
showTooltip: true
|
|
1719
1721
|
}
|
|
1720
1722
|
];
|
|
1721
1723
|
var WrapField = () => {
|
|
1722
1724
|
const { isSiteRtl } = useDirection();
|
|
1723
|
-
return /* @__PURE__ */
|
|
1725
|
+
return /* @__PURE__ */ React37.createElement(DirectionProvider7, { rtl: isSiteRtl }, /* @__PURE__ */ React37.createElement(ThemeProvider7, null, /* @__PURE__ */ React37.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React37.createElement(Grid8, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel12, null, __18("Wrap", "elementor"))), /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React37.createElement(ToggleControl6, { options: options5 }))))));
|
|
1724
1726
|
};
|
|
1725
1727
|
|
|
1726
1728
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -1729,37 +1731,36 @@ var LayoutSection = () => {
|
|
|
1729
1731
|
const { element } = useElement();
|
|
1730
1732
|
const parent = useParentElement(element.id);
|
|
1731
1733
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
1732
|
-
return /* @__PURE__ */
|
|
1734
|
+
return /* @__PURE__ */ React38.createElement(SectionContent, null, /* @__PURE__ */ React38.createElement(DisplayField, null), "flex" === display?.value && /* @__PURE__ */ React38.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React38.createElement(FlexChildFields, null));
|
|
1733
1735
|
};
|
|
1734
|
-
var FlexFields = () => /* @__PURE__ */
|
|
1735
|
-
var FlexChildFields = () => /* @__PURE__ */
|
|
1736
|
+
var FlexFields = () => /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(FlexDirectionField, null), /* @__PURE__ */ React38.createElement(JustifyContentField, null), /* @__PURE__ */ React38.createElement(AlignItemsField, null), /* @__PURE__ */ React38.createElement(PanelDivider, null), /* @__PURE__ */ React38.createElement(GapControlField, null), /* @__PURE__ */ React38.createElement(WrapField, null));
|
|
1737
|
+
var FlexChildFields = () => /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(PanelDivider, null), /* @__PURE__ */ React38.createElement(ControlLabel13, null, __19("Flex child", "elementor")), /* @__PURE__ */ React38.createElement(AlignSelfChild, null), /* @__PURE__ */ React38.createElement(FlexOrderField, null), /* @__PURE__ */ React38.createElement(FlexSizeField, null));
|
|
1736
1738
|
|
|
1737
1739
|
// src/components/style-sections/position-section/position-section.tsx
|
|
1738
|
-
import * as
|
|
1740
|
+
import * as React42 from "react";
|
|
1739
1741
|
import { useSessionStorage } from "@elementor/session";
|
|
1740
|
-
import { Stack as Stack15 } from "@elementor/ui";
|
|
1741
1742
|
|
|
1742
1743
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
1743
|
-
import * as
|
|
1744
|
+
import * as React39 from "react";
|
|
1744
1745
|
import { ControlLabel as ControlLabel14, SizeControl as SizeControl3 } from "@elementor/editor-controls";
|
|
1745
1746
|
import { SideBottomIcon as SideBottomIcon2, SideLeftIcon as SideLeftIcon2, SideRightIcon as SideRightIcon2, SideTopIcon as SideTopIcon2 } from "@elementor/icons";
|
|
1746
|
-
import { Grid as Grid9, Stack as
|
|
1747
|
+
import { Grid as Grid9, Stack as Stack10 } from "@elementor/ui";
|
|
1747
1748
|
import { __ as __20 } from "@wordpress/i18n";
|
|
1748
1749
|
var sideIcons = {
|
|
1749
|
-
left: /* @__PURE__ */
|
|
1750
|
-
right: /* @__PURE__ */
|
|
1751
|
-
top: /* @__PURE__ */
|
|
1752
|
-
bottom: /* @__PURE__ */
|
|
1750
|
+
left: /* @__PURE__ */ React39.createElement(SideLeftIcon2, { fontSize: "tiny" }),
|
|
1751
|
+
right: /* @__PURE__ */ React39.createElement(SideRightIcon2, { fontSize: "tiny" }),
|
|
1752
|
+
top: /* @__PURE__ */ React39.createElement(SideTopIcon2, { fontSize: "tiny" }),
|
|
1753
|
+
bottom: /* @__PURE__ */ React39.createElement(SideBottomIcon2, { fontSize: "tiny" })
|
|
1753
1754
|
};
|
|
1754
1755
|
var DimensionsField = () => {
|
|
1755
|
-
return /* @__PURE__ */
|
|
1756
|
+
return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "top", label: __20("Top", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "right", label: __20("Right", "elementor") })), /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "bottom", label: __20("Bottom", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "left", label: __20("Left", "elementor") })));
|
|
1756
1757
|
};
|
|
1757
1758
|
var DimensionField = ({ side, label }) => {
|
|
1758
|
-
return /* @__PURE__ */
|
|
1759
|
+
return /* @__PURE__ */ React39.createElement(Grid9, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(ControlLabel14, null, label)), /* @__PURE__ */ React39.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(StylesField, { bind: side }, /* @__PURE__ */ React39.createElement(SizeControl3, { startIcon: sideIcons[side] }))));
|
|
1759
1760
|
};
|
|
1760
1761
|
|
|
1761
1762
|
// src/components/style-sections/position-section/position-field.tsx
|
|
1762
|
-
import * as
|
|
1763
|
+
import * as React40 from "react";
|
|
1763
1764
|
import { ControlLabel as ControlLabel15, SelectControl as SelectControl3 } from "@elementor/editor-controls";
|
|
1764
1765
|
import { Grid as Grid10 } from "@elementor/ui";
|
|
1765
1766
|
import { __ as __21 } from "@wordpress/i18n";
|
|
@@ -1771,16 +1772,16 @@ var positionOptions = [
|
|
|
1771
1772
|
{ label: __21("Sticky", "elementor"), value: "sticky" }
|
|
1772
1773
|
];
|
|
1773
1774
|
var PositionField = ({ onChange }) => {
|
|
1774
|
-
return /* @__PURE__ */
|
|
1775
|
+
return /* @__PURE__ */ React40.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React40.createElement(Grid10, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlLabel15, null, __21("Position", "elementor"))), /* @__PURE__ */ React40.createElement(Grid10, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(SelectControl3, { options: positionOptions, onChange }))));
|
|
1775
1776
|
};
|
|
1776
1777
|
|
|
1777
1778
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
1778
|
-
import * as
|
|
1779
|
+
import * as React41 from "react";
|
|
1779
1780
|
import { ControlLabel as ControlLabel16, NumberControl as NumberControl3 } from "@elementor/editor-controls";
|
|
1780
1781
|
import { Grid as Grid11 } from "@elementor/ui";
|
|
1781
1782
|
import { __ as __22 } from "@wordpress/i18n";
|
|
1782
1783
|
var ZIndexField = () => {
|
|
1783
|
-
return /* @__PURE__ */
|
|
1784
|
+
return /* @__PURE__ */ React41.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React41.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlLabel16, null, __22("Z-Index", "elementor"))), /* @__PURE__ */ React41.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(NumberControl3, null))));
|
|
1784
1785
|
};
|
|
1785
1786
|
|
|
1786
1787
|
// src/components/style-sections/position-section/position-section.tsx
|
|
@@ -1812,7 +1813,7 @@ var PositionSection = () => {
|
|
|
1812
1813
|
}
|
|
1813
1814
|
};
|
|
1814
1815
|
const isNotStatic = positionValue && positionValue?.value !== "static";
|
|
1815
|
-
return /* @__PURE__ */
|
|
1816
|
+
return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(DimensionsField, null), /* @__PURE__ */ React42.createElement(ZIndexField, null)) : null);
|
|
1816
1817
|
};
|
|
1817
1818
|
var usePersistDimensions = () => {
|
|
1818
1819
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -1822,73 +1823,71 @@ var usePersistDimensions = () => {
|
|
|
1822
1823
|
};
|
|
1823
1824
|
|
|
1824
1825
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1825
|
-
import * as
|
|
1826
|
+
import * as React44 from "react";
|
|
1826
1827
|
import { ControlLabel as ControlLabel18, SizeControl as SizeControl4 } from "@elementor/editor-controls";
|
|
1827
|
-
import { Grid as Grid13, Stack as
|
|
1828
|
+
import { Grid as Grid13, Stack as Stack11 } from "@elementor/ui";
|
|
1828
1829
|
import { __ as __24 } from "@wordpress/i18n";
|
|
1829
1830
|
|
|
1830
1831
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
1831
|
-
import * as
|
|
1832
|
+
import * as React43 from "react";
|
|
1832
1833
|
import { ControlLabel as ControlLabel17, ToggleControl as ToggleControl7 } from "@elementor/editor-controls";
|
|
1833
|
-
import {
|
|
1834
|
+
import { EyeIcon, EyeOffIcon, LetterAIcon } from "@elementor/icons";
|
|
1834
1835
|
import { Grid as Grid12 } from "@elementor/ui";
|
|
1835
1836
|
import { __ as __23 } from "@wordpress/i18n";
|
|
1836
1837
|
var options6 = [
|
|
1837
1838
|
{
|
|
1838
1839
|
value: "visible",
|
|
1839
1840
|
label: __23("Visible", "elementor"),
|
|
1840
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1841
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(EyeIcon, { fontSize: size }),
|
|
1841
1842
|
showTooltip: true
|
|
1842
1843
|
},
|
|
1843
1844
|
{
|
|
1844
1845
|
value: "hidden",
|
|
1845
1846
|
label: __23("Hidden", "elementor"),
|
|
1846
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1847
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(EyeOffIcon, { fontSize: size }),
|
|
1847
1848
|
showTooltip: true
|
|
1848
1849
|
},
|
|
1849
1850
|
{
|
|
1850
1851
|
value: "auto",
|
|
1851
1852
|
label: __23("Auto", "elementor"),
|
|
1852
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1853
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(LetterAIcon, { fontSize: size }),
|
|
1853
1854
|
showTooltip: true
|
|
1854
1855
|
}
|
|
1855
1856
|
];
|
|
1856
1857
|
var OverflowField = () => {
|
|
1857
|
-
return /* @__PURE__ */
|
|
1858
|
+
return /* @__PURE__ */ React43.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React43.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlLabel17, null, __23("Overflow", "elementor"))), /* @__PURE__ */ React43.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React43.createElement(ToggleControl7, { options: options6 }))));
|
|
1858
1859
|
};
|
|
1859
1860
|
|
|
1860
1861
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1861
1862
|
var SizeSection = () => {
|
|
1862
|
-
return /* @__PURE__ */
|
|
1863
|
+
return /* @__PURE__ */ React44.createElement(SectionContent, null, /* @__PURE__ */ React44.createElement(Grid13, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "width", label: __24("Width", "elementor") })), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "height", label: __24("Height", "elementor") }))), /* @__PURE__ */ React44.createElement(Grid13, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "min-width", label: __24("Min. width", "elementor") })), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "min-height", label: __24("Min. height", "elementor") }))), /* @__PURE__ */ React44.createElement(Grid13, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "max-width", label: __24("Max. width", "elementor") })), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "max-height", label: __24("Max. height", "elementor") }))), /* @__PURE__ */ React44.createElement(PanelDivider, null), /* @__PURE__ */ React44.createElement(Stack11, null, /* @__PURE__ */ React44.createElement(OverflowField, null)));
|
|
1863
1864
|
};
|
|
1864
1865
|
var SizeField = ({ label, bind }) => {
|
|
1865
|
-
return /* @__PURE__ */
|
|
1866
|
+
return /* @__PURE__ */ React44.createElement(StylesField, { bind }, /* @__PURE__ */ React44.createElement(Grid13, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(ControlLabel18, null, label)), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(SizeControl4, null))));
|
|
1866
1867
|
};
|
|
1867
1868
|
|
|
1868
1869
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
1869
|
-
import * as
|
|
1870
|
+
import * as React45 from "react";
|
|
1870
1871
|
import { LinkedDimensionsControl } from "@elementor/editor-controls";
|
|
1871
|
-
import { Stack as Stack17 } from "@elementor/ui";
|
|
1872
1872
|
import { __ as __25 } from "@wordpress/i18n";
|
|
1873
1873
|
var SpacingSection = () => {
|
|
1874
|
-
return /* @__PURE__ */
|
|
1874
|
+
return /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React45.createElement(LinkedDimensionsControl, { label: __25("Padding", "elementor") })), /* @__PURE__ */ React45.createElement(PanelDivider, null), /* @__PURE__ */ React45.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React45.createElement(LinkedDimensionsControl, { label: __25("Margin", "elementor") })));
|
|
1875
1875
|
};
|
|
1876
1876
|
|
|
1877
1877
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
1878
|
-
import * as
|
|
1879
|
-
import { Stack as Stack19 } from "@elementor/ui";
|
|
1878
|
+
import * as React60 from "react";
|
|
1880
1879
|
|
|
1881
1880
|
// src/components/collapsible-content.tsx
|
|
1882
|
-
import * as
|
|
1881
|
+
import * as React46 from "react";
|
|
1883
1882
|
import { useState as useState6 } from "react";
|
|
1884
|
-
import { Button, Collapse as Collapse3, Stack as
|
|
1883
|
+
import { Button, Collapse as Collapse3, Stack as Stack12 } from "@elementor/ui";
|
|
1885
1884
|
import { __ as __26 } from "@wordpress/i18n";
|
|
1886
1885
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
1887
1886
|
const [open, setOpen] = useState6(defaultOpen);
|
|
1888
1887
|
const handleToggle = () => {
|
|
1889
1888
|
setOpen((prevOpen) => !prevOpen);
|
|
1890
1889
|
};
|
|
1891
|
-
return /* @__PURE__ */
|
|
1890
|
+
return /* @__PURE__ */ React46.createElement(Stack12, null, /* @__PURE__ */ React46.createElement(
|
|
1892
1891
|
Button,
|
|
1893
1892
|
{
|
|
1894
1893
|
fullWidth: true,
|
|
@@ -1896,14 +1895,15 @@ var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
|
1896
1895
|
color: "secondary",
|
|
1897
1896
|
variant: "outlined",
|
|
1898
1897
|
onClick: handleToggle,
|
|
1899
|
-
endIcon: /* @__PURE__ */
|
|
1898
|
+
endIcon: /* @__PURE__ */ React46.createElement(CollapseIcon, { open }),
|
|
1899
|
+
sx: { my: 0.5 }
|
|
1900
1900
|
},
|
|
1901
1901
|
open ? __26("Show less", "elementor") : __26("Show more", "elementor")
|
|
1902
|
-
), /* @__PURE__ */
|
|
1902
|
+
), /* @__PURE__ */ React46.createElement(Collapse3, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
1903
1903
|
};
|
|
1904
1904
|
|
|
1905
1905
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
1906
|
-
import * as
|
|
1906
|
+
import * as React47 from "react";
|
|
1907
1907
|
import { ControlLabel as ControlLabel19, FontFamilyControl } from "@elementor/editor-controls";
|
|
1908
1908
|
import { Grid as Grid14 } from "@elementor/ui";
|
|
1909
1909
|
import { __ as __27 } from "@wordpress/i18n";
|
|
@@ -1920,7 +1920,7 @@ var FontFamilyField = () => {
|
|
|
1920
1920
|
if (!fontFamilies) {
|
|
1921
1921
|
return null;
|
|
1922
1922
|
}
|
|
1923
|
-
return /* @__PURE__ */
|
|
1923
|
+
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React47.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel19, null, __27("Font family", "elementor"))), /* @__PURE__ */ React47.createElement(Grid14, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React47.createElement(FontFamilyControl, { fontFamilies }))));
|
|
1924
1924
|
};
|
|
1925
1925
|
var getFontFamilies = () => {
|
|
1926
1926
|
const { controls } = getElementorConfig();
|
|
@@ -1932,16 +1932,16 @@ var getFontFamilies = () => {
|
|
|
1932
1932
|
};
|
|
1933
1933
|
|
|
1934
1934
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
1935
|
-
import * as
|
|
1935
|
+
import * as React48 from "react";
|
|
1936
1936
|
import { ControlLabel as ControlLabel20, SizeControl as SizeControl5 } from "@elementor/editor-controls";
|
|
1937
1937
|
import { Grid as Grid15 } from "@elementor/ui";
|
|
1938
1938
|
import { __ as __28 } from "@wordpress/i18n";
|
|
1939
1939
|
var FontSizeField = () => {
|
|
1940
|
-
return /* @__PURE__ */
|
|
1940
|
+
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React48.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(ControlLabel20, null, __28("Font size", "elementor"))), /* @__PURE__ */ React48.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(SizeControl5, null))));
|
|
1941
1941
|
};
|
|
1942
1942
|
|
|
1943
1943
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
1944
|
-
import * as
|
|
1944
|
+
import * as React49 from "react";
|
|
1945
1945
|
import { ControlLabel as ControlLabel21, ToggleControl as ToggleControl8 } from "@elementor/editor-controls";
|
|
1946
1946
|
import { ItalicIcon, MinusIcon as MinusIcon2 } from "@elementor/icons";
|
|
1947
1947
|
import { Grid as Grid16 } from "@elementor/ui";
|
|
@@ -1950,20 +1950,20 @@ var options7 = [
|
|
|
1950
1950
|
{
|
|
1951
1951
|
value: "normal",
|
|
1952
1952
|
label: __29("Normal", "elementor"),
|
|
1953
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1953
|
+
renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(MinusIcon2, { fontSize: size }),
|
|
1954
1954
|
showTooltip: true
|
|
1955
1955
|
},
|
|
1956
1956
|
{
|
|
1957
1957
|
value: "italic",
|
|
1958
1958
|
label: __29("Italic", "elementor"),
|
|
1959
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1959
|
+
renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(ItalicIcon, { fontSize: size }),
|
|
1960
1960
|
showTooltip: true
|
|
1961
1961
|
}
|
|
1962
1962
|
];
|
|
1963
|
-
var FontStyleField = () => /* @__PURE__ */
|
|
1963
|
+
var FontStyleField = () => /* @__PURE__ */ React49.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React49.createElement(Grid16, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ControlLabel21, null, __29("Font Style", "elementor"))), /* @__PURE__ */ React49.createElement(Grid16, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React49.createElement(ToggleControl8, { options: options7 }))));
|
|
1964
1964
|
|
|
1965
1965
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
1966
|
-
import * as
|
|
1966
|
+
import * as React50 from "react";
|
|
1967
1967
|
import { ControlLabel as ControlLabel22, SelectControl as SelectControl4 } from "@elementor/editor-controls";
|
|
1968
1968
|
import { Grid as Grid17 } from "@elementor/ui";
|
|
1969
1969
|
import { __ as __30 } from "@wordpress/i18n";
|
|
@@ -1979,29 +1979,29 @@ var fontWeightOptions = [
|
|
|
1979
1979
|
{ value: "900", label: __30("900 - Black", "elementor") }
|
|
1980
1980
|
];
|
|
1981
1981
|
var FontWeightField = () => {
|
|
1982
|
-
return /* @__PURE__ */
|
|
1982
|
+
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React50.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React50.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(ControlLabel22, null, __30("Font weight", "elementor"))), /* @__PURE__ */ React50.createElement(Grid17, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React50.createElement(SelectControl4, { options: fontWeightOptions }))));
|
|
1983
1983
|
};
|
|
1984
1984
|
|
|
1985
1985
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
1986
|
-
import * as
|
|
1986
|
+
import * as React51 from "react";
|
|
1987
1987
|
import { ControlLabel as ControlLabel23, SizeControl as SizeControl6 } from "@elementor/editor-controls";
|
|
1988
1988
|
import { Grid as Grid18 } from "@elementor/ui";
|
|
1989
1989
|
import { __ as __31 } from "@wordpress/i18n";
|
|
1990
1990
|
var LetterSpacingField = () => {
|
|
1991
|
-
return /* @__PURE__ */
|
|
1991
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React51.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlLabel23, null, __31("Letter spacing", "elementor"))), /* @__PURE__ */ React51.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(SizeControl6, null))));
|
|
1992
1992
|
};
|
|
1993
1993
|
|
|
1994
1994
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
1995
|
-
import * as
|
|
1995
|
+
import * as React52 from "react";
|
|
1996
1996
|
import { ControlLabel as ControlLabel24, SizeControl as SizeControl7 } from "@elementor/editor-controls";
|
|
1997
1997
|
import { Grid as Grid19 } from "@elementor/ui";
|
|
1998
1998
|
import { __ as __32 } from "@wordpress/i18n";
|
|
1999
1999
|
var LineHeightField = () => {
|
|
2000
|
-
return /* @__PURE__ */
|
|
2000
|
+
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React52.createElement(Grid19, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ControlLabel24, null, __32("Line height", "elementor"))), /* @__PURE__ */ React52.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(SizeControl7, null))));
|
|
2001
2001
|
};
|
|
2002
2002
|
|
|
2003
2003
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
2004
|
-
import * as
|
|
2004
|
+
import * as React53 from "react";
|
|
2005
2005
|
import { ControlLabel as ControlLabel25, ToggleControl as ToggleControl9 } from "@elementor/editor-controls";
|
|
2006
2006
|
import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from "@elementor/icons";
|
|
2007
2007
|
import { Grid as Grid20, withDirection as withDirection6 } from "@elementor/ui";
|
|
@@ -2012,43 +2012,43 @@ var options8 = [
|
|
|
2012
2012
|
{
|
|
2013
2013
|
value: "start",
|
|
2014
2014
|
label: __33("Start", "elementor"),
|
|
2015
|
-
renderContent: () => /* @__PURE__ */
|
|
2015
|
+
renderContent: () => /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: StartIcon4, size: "tiny" }),
|
|
2016
2016
|
showTooltip: true
|
|
2017
2017
|
},
|
|
2018
2018
|
{
|
|
2019
2019
|
value: "center",
|
|
2020
2020
|
label: __33("Center", "elementor"),
|
|
2021
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2021
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(AlignCenterIcon, { fontSize: size }),
|
|
2022
2022
|
showTooltip: true
|
|
2023
2023
|
},
|
|
2024
2024
|
{
|
|
2025
2025
|
value: "end",
|
|
2026
2026
|
label: __33("End", "elementor"),
|
|
2027
|
-
renderContent: () => /* @__PURE__ */
|
|
2027
|
+
renderContent: () => /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: EndIcon4, size: "tiny" }),
|
|
2028
2028
|
showTooltip: true
|
|
2029
2029
|
},
|
|
2030
2030
|
{
|
|
2031
2031
|
value: "justify",
|
|
2032
2032
|
label: __33("Justify", "elementor"),
|
|
2033
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2033
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(AlignJustifiedIcon, { fontSize: size }),
|
|
2034
2034
|
showTooltip: true
|
|
2035
2035
|
}
|
|
2036
2036
|
];
|
|
2037
2037
|
var TextAlignmentField = () => {
|
|
2038
|
-
return /* @__PURE__ */
|
|
2038
|
+
return /* @__PURE__ */ React53.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React53.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlLabel25, null, __33("Alignment", "elementor"))), /* @__PURE__ */ React53.createElement(Grid20, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React53.createElement(ToggleControl9, { options: options8 }))));
|
|
2039
2039
|
};
|
|
2040
2040
|
|
|
2041
2041
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
2042
|
-
import * as
|
|
2042
|
+
import * as React54 from "react";
|
|
2043
2043
|
import { ColorControl as ColorControl2, ControlLabel as ControlLabel26 } from "@elementor/editor-controls";
|
|
2044
2044
|
import { Grid as Grid21 } from "@elementor/ui";
|
|
2045
2045
|
import { __ as __34 } from "@wordpress/i18n";
|
|
2046
2046
|
var TextColorField = () => {
|
|
2047
|
-
return /* @__PURE__ */
|
|
2047
|
+
return /* @__PURE__ */ React54.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React54.createElement(Grid21, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(ControlLabel26, null, __34("Text color", "elementor"))), /* @__PURE__ */ React54.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(ColorControl2, null))));
|
|
2048
2048
|
};
|
|
2049
2049
|
|
|
2050
2050
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
2051
|
-
import * as
|
|
2051
|
+
import * as React55 from "react";
|
|
2052
2052
|
import { ControlLabel as ControlLabel27 } from "@elementor/editor-controls";
|
|
2053
2053
|
import { StrikethroughIcon, UnderlineIcon } from "@elementor/icons";
|
|
2054
2054
|
import { Grid as Grid22, ToggleButton as ToggleButtonBase, ToggleButtonGroup } from "@elementor/ui";
|
|
@@ -2066,7 +2066,7 @@ var TextDecorationField = () => {
|
|
|
2066
2066
|
value: newValue
|
|
2067
2067
|
});
|
|
2068
2068
|
};
|
|
2069
|
-
return /* @__PURE__ */
|
|
2069
|
+
return /* @__PURE__ */ React55.createElement(Grid22, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(ControlLabel27, null, __35("Style", "elementor"))), /* @__PURE__ */ React55.createElement(Grid22, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React55.createElement(ToggleButtonGroup, { value: formats }, /* @__PURE__ */ React55.createElement(
|
|
2070
2070
|
ShorthandControl,
|
|
2071
2071
|
{
|
|
2072
2072
|
value: "line-through",
|
|
@@ -2074,8 +2074,8 @@ var TextDecorationField = () => {
|
|
|
2074
2074
|
updateValues: handleSetTextDecoration,
|
|
2075
2075
|
"aria-label": "line-through"
|
|
2076
2076
|
},
|
|
2077
|
-
/* @__PURE__ */
|
|
2078
|
-
), /* @__PURE__ */
|
|
2077
|
+
/* @__PURE__ */ React55.createElement(StrikethroughIcon, { fontSize: buttonSize })
|
|
2078
|
+
), /* @__PURE__ */ React55.createElement(
|
|
2079
2079
|
ShorthandControl,
|
|
2080
2080
|
{
|
|
2081
2081
|
value: "underline",
|
|
@@ -2083,7 +2083,7 @@ var TextDecorationField = () => {
|
|
|
2083
2083
|
updateValues: handleSetTextDecoration,
|
|
2084
2084
|
"aria-label": "underline"
|
|
2085
2085
|
},
|
|
2086
|
-
/* @__PURE__ */
|
|
2086
|
+
/* @__PURE__ */ React55.createElement(UnderlineIcon, { fontSize: buttonSize })
|
|
2087
2087
|
))));
|
|
2088
2088
|
};
|
|
2089
2089
|
var ShorthandControl = ({
|
|
@@ -2102,17 +2102,17 @@ var ShorthandControl = ({
|
|
|
2102
2102
|
updateValues([...valuesArr, newValue].join(" "));
|
|
2103
2103
|
}
|
|
2104
2104
|
};
|
|
2105
|
-
return /* @__PURE__ */
|
|
2105
|
+
return /* @__PURE__ */ React55.createElement(ToggleButton, { value, onChange: toggleValue, selected, "aria-label": ariaLabel }, children);
|
|
2106
2106
|
};
|
|
2107
2107
|
var ToggleButton = ({ onChange, ...props }) => {
|
|
2108
2108
|
const handleChange = (_e, newValue) => {
|
|
2109
2109
|
onChange(newValue);
|
|
2110
2110
|
};
|
|
2111
|
-
return /* @__PURE__ */
|
|
2111
|
+
return /* @__PURE__ */ React55.createElement(ToggleButtonBase, { ...props, onChange: handleChange, size: buttonSize });
|
|
2112
2112
|
};
|
|
2113
2113
|
|
|
2114
2114
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
2115
|
-
import * as
|
|
2115
|
+
import * as React56 from "react";
|
|
2116
2116
|
import { ControlLabel as ControlLabel28, ToggleControl as ToggleControl10 } from "@elementor/editor-controls";
|
|
2117
2117
|
import { TextDirectionLtrIcon, TextDirectionRtlIcon } from "@elementor/icons";
|
|
2118
2118
|
import { Grid as Grid23 } from "@elementor/ui";
|
|
@@ -2121,20 +2121,20 @@ var options9 = [
|
|
|
2121
2121
|
{
|
|
2122
2122
|
value: "ltr",
|
|
2123
2123
|
label: __36("Left to Right", "elementor"),
|
|
2124
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2124
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(TextDirectionLtrIcon, { fontSize: size })
|
|
2125
2125
|
},
|
|
2126
2126
|
{
|
|
2127
2127
|
value: "rtl",
|
|
2128
2128
|
label: __36("Right to Left", "elementor"),
|
|
2129
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2129
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(TextDirectionRtlIcon, { fontSize: size })
|
|
2130
2130
|
}
|
|
2131
2131
|
];
|
|
2132
2132
|
var TextDirectionField = () => {
|
|
2133
|
-
return /* @__PURE__ */
|
|
2133
|
+
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React56.createElement(Grid23, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(ControlLabel28, null, __36("Direction", "elementor"))), /* @__PURE__ */ React56.createElement(Grid23, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React56.createElement(ToggleControl10, { options: options9 }))));
|
|
2134
2134
|
};
|
|
2135
2135
|
|
|
2136
2136
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
2137
|
-
import * as
|
|
2137
|
+
import * as React57 from "react";
|
|
2138
2138
|
import { StrokeControl } from "@elementor/editor-controls";
|
|
2139
2139
|
import { __ as __37 } from "@wordpress/i18n";
|
|
2140
2140
|
var initTextStroke = {
|
|
@@ -2162,7 +2162,7 @@ var TextStrokeField = () => {
|
|
|
2162
2162
|
setTextStroke(null);
|
|
2163
2163
|
};
|
|
2164
2164
|
const hasTextStroke = Boolean(textStroke);
|
|
2165
|
-
return /* @__PURE__ */
|
|
2165
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2166
2166
|
AddOrRemoveContent,
|
|
2167
2167
|
{
|
|
2168
2168
|
label: __37("Text stroke", "elementor"),
|
|
@@ -2170,12 +2170,12 @@ var TextStrokeField = () => {
|
|
|
2170
2170
|
onAdd: addTextStroke,
|
|
2171
2171
|
onRemove: removeTextStroke
|
|
2172
2172
|
},
|
|
2173
|
-
/* @__PURE__ */
|
|
2173
|
+
/* @__PURE__ */ React57.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React57.createElement(StrokeControl, null))
|
|
2174
2174
|
);
|
|
2175
2175
|
};
|
|
2176
2176
|
|
|
2177
2177
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
2178
|
-
import * as
|
|
2178
|
+
import * as React58 from "react";
|
|
2179
2179
|
import { ControlLabel as ControlLabel29, ToggleControl as ToggleControl11 } from "@elementor/editor-controls";
|
|
2180
2180
|
import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon as MinusIcon3 } from "@elementor/icons";
|
|
2181
2181
|
import { Grid as Grid24 } from "@elementor/ui";
|
|
@@ -2184,42 +2184,42 @@ var options10 = [
|
|
|
2184
2184
|
{
|
|
2185
2185
|
value: "none",
|
|
2186
2186
|
label: __38("None", "elementor"),
|
|
2187
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2187
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(MinusIcon3, { fontSize: size }),
|
|
2188
2188
|
showTooltip: true
|
|
2189
2189
|
},
|
|
2190
2190
|
{
|
|
2191
2191
|
value: "capitalize",
|
|
2192
2192
|
label: __38("Capitalize", "elementor"),
|
|
2193
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2193
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(LetterCaseIcon, { fontSize: size }),
|
|
2194
2194
|
showTooltip: true
|
|
2195
2195
|
},
|
|
2196
2196
|
{
|
|
2197
2197
|
value: "uppercase",
|
|
2198
2198
|
label: __38("Uppercase", "elementor"),
|
|
2199
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2199
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(LetterCaseUpperIcon, { fontSize: size }),
|
|
2200
2200
|
showTooltip: true
|
|
2201
2201
|
},
|
|
2202
2202
|
{
|
|
2203
2203
|
value: "lowercase",
|
|
2204
2204
|
label: __38("Lowercase", "elementor"),
|
|
2205
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2205
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(LetterCaseLowerIcon, { fontSize: size }),
|
|
2206
2206
|
showTooltip: true
|
|
2207
2207
|
}
|
|
2208
2208
|
];
|
|
2209
|
-
var TransformField = () => /* @__PURE__ */
|
|
2209
|
+
var TransformField = () => /* @__PURE__ */ React58.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React58.createElement(Grid24, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel29, null, __38("Text transform", "elementor"))), /* @__PURE__ */ React58.createElement(Grid24, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React58.createElement(ToggleControl11, { options: options10 }))));
|
|
2210
2210
|
|
|
2211
2211
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
2212
|
-
import * as
|
|
2212
|
+
import * as React59 from "react";
|
|
2213
2213
|
import { ControlLabel as ControlLabel30, SizeControl as SizeControl8 } from "@elementor/editor-controls";
|
|
2214
2214
|
import { Grid as Grid25 } from "@elementor/ui";
|
|
2215
2215
|
import { __ as __39 } from "@wordpress/i18n";
|
|
2216
2216
|
var WordSpacingField = () => {
|
|
2217
|
-
return /* @__PURE__ */
|
|
2217
|
+
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React59.createElement(Grid25, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(Grid25, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(ControlLabel30, null, __39("Word spacing", "elementor"))), /* @__PURE__ */ React59.createElement(Grid25, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(SizeControl8, null))));
|
|
2218
2218
|
};
|
|
2219
2219
|
|
|
2220
2220
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
2221
2221
|
var TypographySection = () => {
|
|
2222
|
-
return /* @__PURE__ */
|
|
2222
|
+
return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(FontFamilyField, null), /* @__PURE__ */ React60.createElement(FontWeightField, null), /* @__PURE__ */ React60.createElement(FontSizeField, null), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(TextAlignmentField, null), /* @__PURE__ */ React60.createElement(TextColorField, null), /* @__PURE__ */ React60.createElement(CollapsibleContent, null, /* @__PURE__ */ React60.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React60.createElement(LineHeightField, null), /* @__PURE__ */ React60.createElement(LetterSpacingField, null), /* @__PURE__ */ React60.createElement(WordSpacingField, null), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(TextDecorationField, null), /* @__PURE__ */ React60.createElement(TransformField, null), /* @__PURE__ */ React60.createElement(TextDirectionField, null), /* @__PURE__ */ React60.createElement(FontStyleField, null), /* @__PURE__ */ React60.createElement(TextStrokeField, null))));
|
|
2223
2223
|
};
|
|
2224
2224
|
|
|
2225
2225
|
// src/components/style-tab.tsx
|
|
@@ -2229,7 +2229,7 @@ var StyleTab = () => {
|
|
|
2229
2229
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
2230
2230
|
const [activeStyleState, setActiveStyleState] = useState7(null);
|
|
2231
2231
|
const breakpoint = useActiveBreakpoint();
|
|
2232
|
-
return /* @__PURE__ */
|
|
2232
|
+
return /* @__PURE__ */ React61.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React61.createElement(
|
|
2233
2233
|
StyleProvider,
|
|
2234
2234
|
{
|
|
2235
2235
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -2240,7 +2240,7 @@ var StyleTab = () => {
|
|
|
2240
2240
|
},
|
|
2241
2241
|
setMetaState: setActiveStyleState
|
|
2242
2242
|
},
|
|
2243
|
-
/* @__PURE__ */
|
|
2243
|
+
/* @__PURE__ */ React61.createElement(SessionStorageProvider2, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React61.createElement(CssClassSelector, null), /* @__PURE__ */ React61.createElement(Divider4, null), /* @__PURE__ */ React61.createElement(SectionsList, null, /* @__PURE__ */ React61.createElement(Section, { title: __40("Layout", "elementor") }, /* @__PURE__ */ React61.createElement(LayoutSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: __40("Spacing", "elementor") }, /* @__PURE__ */ React61.createElement(SpacingSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: __40("Size", "elementor") }, /* @__PURE__ */ React61.createElement(SizeSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: __40("Position", "elementor") }, /* @__PURE__ */ React61.createElement(PositionSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: __40("Typography", "elementor") }, /* @__PURE__ */ React61.createElement(TypographySection, null)), /* @__PURE__ */ React61.createElement(Section, { title: __40("Background", "elementor") }, /* @__PURE__ */ React61.createElement(BackgroundSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: __40("Border", "elementor") }, /* @__PURE__ */ React61.createElement(BorderSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: __40("Effects", "elementor") }, /* @__PURE__ */ React61.createElement(EffectsSection, null))))
|
|
2244
2244
|
));
|
|
2245
2245
|
};
|
|
2246
2246
|
function useActiveStyleDefId(currentClassesProp) {
|
|
@@ -2272,7 +2272,7 @@ var EditingPanelTabs = () => {
|
|
|
2272
2272
|
return (
|
|
2273
2273
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
2274
2274
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
2275
|
-
/* @__PURE__ */
|
|
2275
|
+
/* @__PURE__ */ React62.createElement(Fragment8, { key: element.id }, /* @__PURE__ */ React62.createElement(Stack13, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React62.createElement(Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React62.createElement(Tab, { label: __41("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React62.createElement(Tab, { label: __41("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React62.createElement(Divider5, null), /* @__PURE__ */ React62.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React62.createElement(SettingsTab, null)), /* @__PURE__ */ React62.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React62.createElement(StyleTab, null))))
|
|
2276
2276
|
);
|
|
2277
2277
|
};
|
|
2278
2278
|
|
|
@@ -2286,7 +2286,7 @@ var EditingPanel = () => {
|
|
|
2286
2286
|
return null;
|
|
2287
2287
|
}
|
|
2288
2288
|
const panelTitle = __42("Edit %s", "elementor").replace("%s", elementType.title);
|
|
2289
|
-
return /* @__PURE__ */
|
|
2289
|
+
return /* @__PURE__ */ React63.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React63.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React63.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React63.createElement(Panel, null, /* @__PURE__ */ React63.createElement(PanelHeader, null, /* @__PURE__ */ React63.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React63.createElement(PanelBody, null, /* @__PURE__ */ React63.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React63.createElement(ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React63.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React63.createElement(EditingPanelTabs, null))))))));
|
|
2290
2290
|
};
|
|
2291
2291
|
|
|
2292
2292
|
// src/panel.ts
|
|
@@ -2353,7 +2353,7 @@ var EditingPanelHooks = () => {
|
|
|
2353
2353
|
};
|
|
2354
2354
|
|
|
2355
2355
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
2356
|
-
import * as
|
|
2356
|
+
import * as React67 from "react";
|
|
2357
2357
|
import { useId as useId4 } from "react";
|
|
2358
2358
|
import { ControlLabel as ControlLabel31, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
|
|
2359
2359
|
import { DatabaseIcon, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
|
|
@@ -2365,7 +2365,7 @@ import {
|
|
|
2365
2365
|
IconButton as IconButton3,
|
|
2366
2366
|
Paper,
|
|
2367
2367
|
Popover as Popover2,
|
|
2368
|
-
Stack as
|
|
2368
|
+
Stack as Stack16,
|
|
2369
2369
|
Tab as Tab2,
|
|
2370
2370
|
TabPanel as TabPanel2,
|
|
2371
2371
|
Tabs as Tabs2,
|
|
@@ -2376,6 +2376,11 @@ import {
|
|
|
2376
2376
|
} from "@elementor/ui";
|
|
2377
2377
|
import { __ as __44 } from "@wordpress/i18n";
|
|
2378
2378
|
|
|
2379
|
+
// src/components/popover-content.tsx
|
|
2380
|
+
import * as React64 from "react";
|
|
2381
|
+
import { Stack as Stack14 } from "@elementor/ui";
|
|
2382
|
+
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React64.createElement(Stack14, { alignItems, gap, p }, children);
|
|
2383
|
+
|
|
2379
2384
|
// src/hooks/use-persist-dynamic-value.ts
|
|
2380
2385
|
import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
|
|
2381
2386
|
var usePersistDynamicValue = (propKey) => {
|
|
@@ -2385,7 +2390,7 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
2385
2390
|
};
|
|
2386
2391
|
|
|
2387
2392
|
// src/dynamics/dynamic-control.tsx
|
|
2388
|
-
import * as
|
|
2393
|
+
import * as React65 from "react";
|
|
2389
2394
|
import { PropKeyProvider as PropKeyProvider3, PropProvider as PropProvider3, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
|
|
2390
2395
|
|
|
2391
2396
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
@@ -2487,11 +2492,11 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
2487
2492
|
});
|
|
2488
2493
|
};
|
|
2489
2494
|
const propType = createTopLevelOjectType({ schema: dynamicTag.props_schema });
|
|
2490
|
-
return /* @__PURE__ */
|
|
2495
|
+
return /* @__PURE__ */ React65.createElement(PropProvider3, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React65.createElement(PropKeyProvider3, { bind }, children));
|
|
2491
2496
|
};
|
|
2492
2497
|
|
|
2493
2498
|
// src/dynamics/components/dynamic-selection.tsx
|
|
2494
|
-
import * as
|
|
2499
|
+
import * as React66 from "react";
|
|
2495
2500
|
import { Fragment as Fragment9, useState as useState8 } from "react";
|
|
2496
2501
|
import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
|
|
2497
2502
|
import { PhotoIcon, SearchIcon } from "@elementor/icons";
|
|
@@ -2503,7 +2508,7 @@ import {
|
|
|
2503
2508
|
ListSubheader as ListSubheader2,
|
|
2504
2509
|
MenuItem as MenuItem2,
|
|
2505
2510
|
MenuList,
|
|
2506
|
-
Stack as
|
|
2511
|
+
Stack as Stack15,
|
|
2507
2512
|
TextField as TextField2,
|
|
2508
2513
|
Typography as Typography4
|
|
2509
2514
|
} from "@elementor/ui";
|
|
@@ -2527,7 +2532,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2527
2532
|
setValue({ name: value, settings: {} });
|
|
2528
2533
|
onSelect?.();
|
|
2529
2534
|
};
|
|
2530
|
-
return /* @__PURE__ */
|
|
2535
|
+
return /* @__PURE__ */ React66.createElement(Stack15, null, /* @__PURE__ */ React66.createElement(Box4, { px: 1.5, pb: 1 }, /* @__PURE__ */ React66.createElement(
|
|
2531
2536
|
TextField2,
|
|
2532
2537
|
{
|
|
2533
2538
|
fullWidth: true,
|
|
@@ -2536,23 +2541,23 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2536
2541
|
onChange: handleSearch,
|
|
2537
2542
|
placeholder: __43("Search dynamic tag", "elementor"),
|
|
2538
2543
|
InputProps: {
|
|
2539
|
-
startAdornment: /* @__PURE__ */
|
|
2544
|
+
startAdornment: /* @__PURE__ */ React66.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React66.createElement(SearchIcon, { fontSize: SIZE3 }))
|
|
2540
2545
|
}
|
|
2541
2546
|
}
|
|
2542
|
-
)), /* @__PURE__ */
|
|
2547
|
+
)), /* @__PURE__ */ React66.createElement(Divider6, null), /* @__PURE__ */ React66.createElement(Box4, { sx: { overflowY: "auto", height: 260, width: 220 } }, options11.length > 0 ? /* @__PURE__ */ React66.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options11.map(([category, items3], index) => /* @__PURE__ */ React66.createElement(Fragment9, { key: index }, /* @__PURE__ */ React66.createElement(ListSubheader2, { sx: { px: 1.5, typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items3.map(({ value, label: tagLabel }) => {
|
|
2543
2548
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
2544
|
-
return /* @__PURE__ */
|
|
2549
|
+
return /* @__PURE__ */ React66.createElement(
|
|
2545
2550
|
MenuItem2,
|
|
2546
2551
|
{
|
|
2547
2552
|
key: value,
|
|
2548
2553
|
selected: isSelected,
|
|
2549
2554
|
autoFocus: isSelected,
|
|
2550
|
-
sx: { typography: "caption" },
|
|
2555
|
+
sx: { px: 1.5, typography: "caption" },
|
|
2551
2556
|
onClick: () => handleSetDynamicTag(value)
|
|
2552
2557
|
},
|
|
2553
2558
|
tagLabel
|
|
2554
2559
|
);
|
|
2555
|
-
})))) : /* @__PURE__ */
|
|
2560
|
+
})))) : /* @__PURE__ */ React66.createElement(PopoverContent, { alignItems: "center", p: 2.5 }, /* @__PURE__ */ React66.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React66.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, __43("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React66.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React66.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React66.createElement(
|
|
2556
2561
|
Link,
|
|
2557
2562
|
{
|
|
2558
2563
|
color: "secondary",
|
|
@@ -2595,25 +2600,25 @@ var DynamicSelectionControl = () => {
|
|
|
2595
2600
|
if (!dynamicTag) {
|
|
2596
2601
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
2597
2602
|
}
|
|
2598
|
-
return /* @__PURE__ */
|
|
2603
|
+
return /* @__PURE__ */ React67.createElement(Box5, null, /* @__PURE__ */ React67.createElement(
|
|
2599
2604
|
Tag,
|
|
2600
2605
|
{
|
|
2601
2606
|
fullWidth: true,
|
|
2602
2607
|
showActionsOnHover: true,
|
|
2603
2608
|
label: dynamicTag.label,
|
|
2604
|
-
startIcon: /* @__PURE__ */
|
|
2609
|
+
startIcon: /* @__PURE__ */ React67.createElement(DatabaseIcon, { fontSize: SIZE4 }),
|
|
2605
2610
|
...bindTrigger2(selectionPopoverState),
|
|
2606
|
-
actions: /* @__PURE__ */
|
|
2611
|
+
actions: /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React67.createElement(
|
|
2607
2612
|
IconButton3,
|
|
2608
2613
|
{
|
|
2609
2614
|
size: SIZE4,
|
|
2610
2615
|
onClick: removeDynamicTag,
|
|
2611
2616
|
"aria-label": __44("Remove dynamic value", "elementor")
|
|
2612
2617
|
},
|
|
2613
|
-
/* @__PURE__ */
|
|
2618
|
+
/* @__PURE__ */ React67.createElement(XIcon2, { fontSize: SIZE4 })
|
|
2614
2619
|
))
|
|
2615
2620
|
}
|
|
2616
|
-
), /* @__PURE__ */
|
|
2621
|
+
), /* @__PURE__ */ React67.createElement(
|
|
2617
2622
|
Popover2,
|
|
2618
2623
|
{
|
|
2619
2624
|
disablePortal: true,
|
|
@@ -2621,7 +2626,7 @@ var DynamicSelectionControl = () => {
|
|
|
2621
2626
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
2622
2627
|
...bindPopover2(selectionPopoverState)
|
|
2623
2628
|
},
|
|
2624
|
-
/* @__PURE__ */
|
|
2629
|
+
/* @__PURE__ */ React67.createElement(Stack16, null, /* @__PURE__ */ React67.createElement(Stack16, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React67.createElement(DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(Typography5, { variant: "subtitle2" }, __44("Dynamic Tags", "elementor")), /* @__PURE__ */ React67.createElement(IconButton3, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React67.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
2625
2630
|
));
|
|
2626
2631
|
};
|
|
2627
2632
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
@@ -2631,22 +2636,22 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
|
2631
2636
|
if (!hasDynamicSettings) {
|
|
2632
2637
|
return null;
|
|
2633
2638
|
}
|
|
2634
|
-
return /* @__PURE__ */
|
|
2639
|
+
return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(
|
|
2635
2640
|
IconButton3,
|
|
2636
2641
|
{
|
|
2637
2642
|
size: SIZE4,
|
|
2638
2643
|
...bindTrigger2(settingsPopupState),
|
|
2639
2644
|
"aria-label": __44("Settings", "elementor")
|
|
2640
2645
|
},
|
|
2641
|
-
/* @__PURE__ */
|
|
2642
|
-
), /* @__PURE__ */
|
|
2646
|
+
/* @__PURE__ */ React67.createElement(SettingsIcon, { fontSize: SIZE4 })
|
|
2647
|
+
), /* @__PURE__ */ React67.createElement(
|
|
2643
2648
|
Popover2,
|
|
2644
2649
|
{
|
|
2645
2650
|
disableScrollLock: true,
|
|
2646
2651
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
2647
2652
|
...bindPopover2(settingsPopupState)
|
|
2648
2653
|
},
|
|
2649
|
-
/* @__PURE__ */
|
|
2654
|
+
/* @__PURE__ */ React67.createElement(Paper, { component: Stack16, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React67.createElement(Stack16, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React67.createElement(DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(Typography5, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React67.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React67.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
2650
2655
|
));
|
|
2651
2656
|
};
|
|
2652
2657
|
var DynamicSettings = ({ controls }) => {
|
|
@@ -2655,10 +2660,10 @@ var DynamicSettings = ({ controls }) => {
|
|
|
2655
2660
|
if (!tabs.length) {
|
|
2656
2661
|
return null;
|
|
2657
2662
|
}
|
|
2658
|
-
return /* @__PURE__ */
|
|
2659
|
-
return /* @__PURE__ */
|
|
2663
|
+
return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(Tabs2, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React67.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React67.createElement(Divider7, null), tabs.map(({ value }, index) => {
|
|
2664
|
+
return /* @__PURE__ */ React67.createElement(TabPanel2, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React67.createElement(PopoverContent, { p: 1.5 }, value.items.map((item) => {
|
|
2660
2665
|
if (item.type === "control") {
|
|
2661
|
-
return /* @__PURE__ */
|
|
2666
|
+
return /* @__PURE__ */ React67.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
2662
2667
|
}
|
|
2663
2668
|
return null;
|
|
2664
2669
|
})));
|
|
@@ -2668,11 +2673,11 @@ var Control3 = ({ control }) => {
|
|
|
2668
2673
|
if (!getControlByType(control.type)) {
|
|
2669
2674
|
return null;
|
|
2670
2675
|
}
|
|
2671
|
-
return /* @__PURE__ */
|
|
2676
|
+
return /* @__PURE__ */ React67.createElement(DynamicControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React67.createElement(ControlLabel31, null, control.label) : null, /* @__PURE__ */ React67.createElement(Control, { type: control.type, props: control.props }));
|
|
2672
2677
|
};
|
|
2673
2678
|
|
|
2674
2679
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
2675
|
-
import * as
|
|
2680
|
+
import * as React68 from "react";
|
|
2676
2681
|
import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
|
|
2677
2682
|
import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
|
|
2678
2683
|
import { __ as __45 } from "@wordpress/i18n";
|
|
@@ -2683,7 +2688,7 @@ var usePropDynamicAction = () => {
|
|
|
2683
2688
|
visible,
|
|
2684
2689
|
icon: DatabaseIcon2,
|
|
2685
2690
|
title: __45("Dynamic Tags", "elementor"),
|
|
2686
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
2691
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React68.createElement(DynamicSelection, { onSelect: closePopover })
|
|
2687
2692
|
};
|
|
2688
2693
|
};
|
|
2689
2694
|
|