@elementor/editor-editing-panel 1.12.0 → 1.13.1
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 +28 -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.js
CHANGED
|
@@ -622,12 +622,12 @@ function useHandleApply(appliedIds, setAppliedIds) {
|
|
|
622
622
|
var import_editor_panels2 = require("@elementor/editor-panels");
|
|
623
623
|
|
|
624
624
|
// src/components/editing-panel.tsx
|
|
625
|
-
var
|
|
625
|
+
var React63 = __toESM(require("react"));
|
|
626
626
|
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
627
627
|
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
628
628
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
629
629
|
var import_session4 = require("@elementor/session");
|
|
630
|
-
var
|
|
630
|
+
var import_ui48 = require("@elementor/ui");
|
|
631
631
|
var import_i18n42 = require("@wordpress/i18n");
|
|
632
632
|
|
|
633
633
|
// src/controls-actions.ts
|
|
@@ -643,7 +643,7 @@ function PopoverAction({
|
|
|
643
643
|
title,
|
|
644
644
|
visible = true,
|
|
645
645
|
icon: Icon,
|
|
646
|
-
popoverContent:
|
|
646
|
+
popoverContent: PopoverContent2
|
|
647
647
|
}) {
|
|
648
648
|
const id = (0, import_react6.useId)();
|
|
649
649
|
const popupState = (0, import_ui5.usePopupState)({
|
|
@@ -665,7 +665,7 @@ function PopoverAction({
|
|
|
665
665
|
...(0, import_ui5.bindPopover)(popupState)
|
|
666
666
|
},
|
|
667
667
|
/* @__PURE__ */ React8.createElement(import_ui5.Stack, { 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(import_ui5.Typography, { variant: "subtitle2" }, title), /* @__PURE__ */ React8.createElement(import_ui5.IconButton, { sx: { ml: "auto" }, size: SIZE, onClick: popupState.close }, /* @__PURE__ */ React8.createElement(import_icons2.XIcon, { fontSize: SIZE }))),
|
|
668
|
-
/* @__PURE__ */ React8.createElement(
|
|
668
|
+
/* @__PURE__ */ React8.createElement(PopoverContent2, { closePopover: popupState.close })
|
|
669
669
|
));
|
|
670
670
|
}
|
|
671
671
|
|
|
@@ -684,9 +684,9 @@ function EditorPanelErrorFallback() {
|
|
|
684
684
|
}
|
|
685
685
|
|
|
686
686
|
// src/components/editing-panel-tabs.tsx
|
|
687
|
-
var
|
|
687
|
+
var React62 = __toESM(require("react"));
|
|
688
688
|
var import_react14 = require("react");
|
|
689
|
-
var
|
|
689
|
+
var import_ui47 = require("@elementor/ui");
|
|
690
690
|
var import_i18n41 = require("@wordpress/i18n");
|
|
691
691
|
|
|
692
692
|
// src/components/settings-tab.tsx
|
|
@@ -849,12 +849,12 @@ var Control2 = ({ control }) => {
|
|
|
849
849
|
};
|
|
850
850
|
|
|
851
851
|
// src/components/style-tab.tsx
|
|
852
|
-
var
|
|
852
|
+
var React61 = __toESM(require("react"));
|
|
853
853
|
var import_react13 = require("react");
|
|
854
854
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
855
855
|
var import_editor_responsive = require("@elementor/editor-responsive");
|
|
856
856
|
var import_session3 = require("@elementor/session");
|
|
857
|
-
var
|
|
857
|
+
var import_ui46 = require("@elementor/ui");
|
|
858
858
|
var import_i18n40 = require("@wordpress/i18n");
|
|
859
859
|
|
|
860
860
|
// src/components/style-sections/background-section/background-section.tsx
|
|
@@ -1021,27 +1021,31 @@ var BackgroundSection = () => {
|
|
|
1021
1021
|
};
|
|
1022
1022
|
|
|
1023
1023
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1024
|
-
var
|
|
1025
|
-
var import_ui18 = require("@elementor/ui");
|
|
1024
|
+
var React27 = __toESM(require("react"));
|
|
1026
1025
|
|
|
1027
1026
|
// src/components/panel-divider.tsx
|
|
1028
1027
|
var React18 = __toESM(require("react"));
|
|
1029
1028
|
var import_ui11 = require("@elementor/ui");
|
|
1030
1029
|
var PanelDivider = () => /* @__PURE__ */ React18.createElement(import_ui11.Divider, { sx: { my: 0.5 } });
|
|
1031
1030
|
|
|
1031
|
+
// src/components/section-content.tsx
|
|
1032
|
+
var React19 = __toESM(require("react"));
|
|
1033
|
+
var import_ui12 = require("@elementor/ui");
|
|
1034
|
+
var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React19.createElement(import_ui12.Stack, { gap, sx: { ...sx } }, children);
|
|
1035
|
+
|
|
1032
1036
|
// src/components/style-sections/border-section/border-field.tsx
|
|
1033
|
-
var
|
|
1037
|
+
var React24 = __toESM(require("react"));
|
|
1034
1038
|
var import_i18n8 = require("@wordpress/i18n");
|
|
1035
1039
|
|
|
1036
1040
|
// src/components/add-or-remove-content.tsx
|
|
1037
|
-
var
|
|
1041
|
+
var React20 = __toESM(require("react"));
|
|
1038
1042
|
var import_editor_controls7 = require("@elementor/editor-controls");
|
|
1039
1043
|
var import_icons4 = require("@elementor/icons");
|
|
1040
|
-
var
|
|
1044
|
+
var import_ui13 = require("@elementor/ui");
|
|
1041
1045
|
var SIZE2 = "tiny";
|
|
1042
1046
|
var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
1043
|
-
return /* @__PURE__ */
|
|
1044
|
-
|
|
1047
|
+
return /* @__PURE__ */ React20.createElement(SectionContent, null, /* @__PURE__ */ React20.createElement(
|
|
1048
|
+
import_ui13.Stack,
|
|
1045
1049
|
{
|
|
1046
1050
|
direction: "row",
|
|
1047
1051
|
sx: {
|
|
@@ -1049,24 +1053,24 @@ var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
|
1049
1053
|
alignItems: "center"
|
|
1050
1054
|
}
|
|
1051
1055
|
},
|
|
1052
|
-
/* @__PURE__ */
|
|
1053
|
-
isAdded ? /* @__PURE__ */
|
|
1054
|
-
), /* @__PURE__ */
|
|
1056
|
+
/* @__PURE__ */ React20.createElement(import_editor_controls7.ControlLabel, null, label),
|
|
1057
|
+
isAdded ? /* @__PURE__ */ React20.createElement(import_ui13.IconButton, { size: SIZE2, onClick: onRemove, "aria-label": "Remove" }, /* @__PURE__ */ React20.createElement(import_icons4.MinusIcon, { fontSize: SIZE2 })) : /* @__PURE__ */ React20.createElement(import_ui13.IconButton, { size: SIZE2, onClick: onAdd, "aria-label": "Add" }, /* @__PURE__ */ React20.createElement(import_icons4.PlusIcon, { fontSize: SIZE2 }))
|
|
1058
|
+
), /* @__PURE__ */ React20.createElement(import_ui13.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React20.createElement(SectionContent, null, children)));
|
|
1055
1059
|
};
|
|
1056
1060
|
|
|
1057
1061
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
1058
|
-
var
|
|
1062
|
+
var React21 = __toESM(require("react"));
|
|
1059
1063
|
var import_editor_controls8 = require("@elementor/editor-controls");
|
|
1060
|
-
var
|
|
1064
|
+
var import_ui14 = require("@elementor/ui");
|
|
1061
1065
|
var import_i18n5 = require("@wordpress/i18n");
|
|
1062
1066
|
var BorderColorField = () => {
|
|
1063
|
-
return /* @__PURE__ */
|
|
1067
|
+
return /* @__PURE__ */ React21.createElement(StylesField, { bind: "border-color" }, /* @__PURE__ */ React21.createElement(import_ui14.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React21.createElement(import_ui14.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(import_editor_controls8.ControlLabel, null, (0, import_i18n5.__)("Border color", "elementor"))), /* @__PURE__ */ React21.createElement(import_ui14.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(import_editor_controls8.ColorControl, null))));
|
|
1064
1068
|
};
|
|
1065
1069
|
|
|
1066
1070
|
// src/components/style-sections/border-section/border-style-field.tsx
|
|
1067
|
-
var
|
|
1071
|
+
var React22 = __toESM(require("react"));
|
|
1068
1072
|
var import_editor_controls9 = require("@elementor/editor-controls");
|
|
1069
|
-
var
|
|
1073
|
+
var import_ui15 = require("@elementor/ui");
|
|
1070
1074
|
var import_i18n6 = require("@wordpress/i18n");
|
|
1071
1075
|
var borderStyles = [
|
|
1072
1076
|
{ value: "none", label: (0, import_i18n6.__)("None", "elementor") },
|
|
@@ -1080,11 +1084,11 @@ var borderStyles = [
|
|
|
1080
1084
|
{ value: "outset", label: (0, import_i18n6.__)("Outset", "elementor") }
|
|
1081
1085
|
];
|
|
1082
1086
|
var BorderStyleField = () => {
|
|
1083
|
-
return /* @__PURE__ */
|
|
1087
|
+
return /* @__PURE__ */ React22.createElement(StylesField, { bind: "border-style" }, /* @__PURE__ */ React22.createElement(import_ui15.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(import_ui15.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(import_editor_controls9.ControlLabel, null, (0, import_i18n6.__)("Border type", "elementor"))), /* @__PURE__ */ React22.createElement(import_ui15.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React22.createElement(import_editor_controls9.SelectControl, { options: borderStyles }))));
|
|
1084
1088
|
};
|
|
1085
1089
|
|
|
1086
1090
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
1087
|
-
var
|
|
1091
|
+
var React23 = __toESM(require("react"));
|
|
1088
1092
|
var import_editor_controls10 = require("@elementor/editor-controls");
|
|
1089
1093
|
var import_editor_props2 = require("@elementor/editor-props");
|
|
1090
1094
|
var import_icons5 = require("@elementor/icons");
|
|
@@ -1092,32 +1096,32 @@ var import_i18n7 = require("@wordpress/i18n");
|
|
|
1092
1096
|
var edges = [
|
|
1093
1097
|
{
|
|
1094
1098
|
label: (0, import_i18n7.__)("Top", "elementor"),
|
|
1095
|
-
icon: /* @__PURE__ */
|
|
1099
|
+
icon: /* @__PURE__ */ React23.createElement(import_icons5.SideTopIcon, { fontSize: "tiny" }),
|
|
1096
1100
|
bind: "top"
|
|
1097
1101
|
},
|
|
1098
1102
|
{
|
|
1099
1103
|
label: (0, import_i18n7.__)("Right", "elementor"),
|
|
1100
|
-
icon: /* @__PURE__ */
|
|
1104
|
+
icon: /* @__PURE__ */ React23.createElement(import_icons5.SideRightIcon, { fontSize: "tiny" }),
|
|
1101
1105
|
bind: "right"
|
|
1102
1106
|
},
|
|
1103
1107
|
{
|
|
1104
1108
|
label: (0, import_i18n7.__)("Bottom", "elementor"),
|
|
1105
|
-
icon: /* @__PURE__ */
|
|
1109
|
+
icon: /* @__PURE__ */ React23.createElement(import_icons5.SideBottomIcon, { fontSize: "tiny" }),
|
|
1106
1110
|
bind: "bottom"
|
|
1107
1111
|
},
|
|
1108
1112
|
{
|
|
1109
1113
|
label: (0, import_i18n7.__)("Left", "elementor"),
|
|
1110
|
-
icon: /* @__PURE__ */
|
|
1114
|
+
icon: /* @__PURE__ */ React23.createElement(import_icons5.SideLeftIcon, { fontSize: "tiny" }),
|
|
1111
1115
|
bind: "left"
|
|
1112
1116
|
}
|
|
1113
1117
|
];
|
|
1114
1118
|
var BorderWidthField = () => {
|
|
1115
|
-
return /* @__PURE__ */
|
|
1119
|
+
return /* @__PURE__ */ React23.createElement(StylesField, { bind: "border-width" }, /* @__PURE__ */ React23.createElement(
|
|
1116
1120
|
import_editor_controls10.EqualUnequalSizesControl,
|
|
1117
1121
|
{
|
|
1118
1122
|
items: edges,
|
|
1119
1123
|
label: (0, import_i18n7.__)("Border width", "elementor"),
|
|
1120
|
-
icon: /* @__PURE__ */
|
|
1124
|
+
icon: /* @__PURE__ */ React23.createElement(import_icons5.SideAllIcon, { fontSize: "tiny" }),
|
|
1121
1125
|
multiSizePropTypeUtil: import_editor_props2.borderWidthPropTypeUtil
|
|
1122
1126
|
}
|
|
1123
1127
|
));
|
|
@@ -1142,7 +1146,7 @@ var BorderField = () => {
|
|
|
1142
1146
|
});
|
|
1143
1147
|
};
|
|
1144
1148
|
const hasBorder = Object.values(border ?? {}).some(Boolean);
|
|
1145
|
-
return /* @__PURE__ */
|
|
1149
|
+
return /* @__PURE__ */ React24.createElement(
|
|
1146
1150
|
AddOrRemoveContent,
|
|
1147
1151
|
{
|
|
1148
1152
|
label: (0, import_i18n8.__)("Border", "elementor"),
|
|
@@ -1150,32 +1154,32 @@ var BorderField = () => {
|
|
|
1150
1154
|
onAdd: addBorder,
|
|
1151
1155
|
onRemove: removeBorder
|
|
1152
1156
|
},
|
|
1153
|
-
/* @__PURE__ */
|
|
1154
|
-
/* @__PURE__ */
|
|
1155
|
-
/* @__PURE__ */
|
|
1157
|
+
/* @__PURE__ */ React24.createElement(BorderWidthField, null),
|
|
1158
|
+
/* @__PURE__ */ React24.createElement(BorderColorField, null),
|
|
1159
|
+
/* @__PURE__ */ React24.createElement(BorderStyleField, null)
|
|
1156
1160
|
);
|
|
1157
1161
|
};
|
|
1158
1162
|
|
|
1159
1163
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
1160
|
-
var
|
|
1164
|
+
var React26 = __toESM(require("react"));
|
|
1161
1165
|
var import_editor_controls11 = require("@elementor/editor-controls");
|
|
1162
1166
|
var import_editor_props3 = require("@elementor/editor-props");
|
|
1163
1167
|
var import_icons6 = require("@elementor/icons");
|
|
1164
|
-
var
|
|
1168
|
+
var import_ui18 = require("@elementor/ui");
|
|
1165
1169
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1166
1170
|
|
|
1167
1171
|
// src/hooks/use-direction.ts
|
|
1168
|
-
var
|
|
1172
|
+
var import_ui16 = require("@elementor/ui");
|
|
1169
1173
|
function useDirection() {
|
|
1170
|
-
const theme = (0,
|
|
1174
|
+
const theme = (0, import_ui16.useTheme)(), extendedWindow = window;
|
|
1171
1175
|
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
1172
1176
|
return { isSiteRtl, isUiRtl };
|
|
1173
1177
|
}
|
|
1174
1178
|
|
|
1175
1179
|
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
1176
|
-
var
|
|
1180
|
+
var React25 = __toESM(require("react"));
|
|
1177
1181
|
var import_react9 = require("react");
|
|
1178
|
-
var
|
|
1182
|
+
var import_ui17 = require("@elementor/ui");
|
|
1179
1183
|
var CLOCKWISE_ANGLES = {
|
|
1180
1184
|
row: 0,
|
|
1181
1185
|
column: 90,
|
|
@@ -1191,11 +1195,11 @@ var COUNTER_CLOCKWISE_ANGLES = {
|
|
|
1191
1195
|
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
1192
1196
|
const rotate = (0, import_react9.useRef)(useGetTargetAngle(isClockwise, offset));
|
|
1193
1197
|
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
1194
|
-
return /* @__PURE__ */
|
|
1198
|
+
return /* @__PURE__ */ React25.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
1195
1199
|
};
|
|
1196
1200
|
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
1197
1201
|
const [direction] = useStylesField("flex-direction");
|
|
1198
|
-
const isRtl = "rtl" === (0,
|
|
1202
|
+
const isRtl = "rtl" === (0, import_ui17.useTheme)().direction;
|
|
1199
1203
|
const rotationMultiplier = isRtl ? -1 : 1;
|
|
1200
1204
|
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
1201
1205
|
const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
|
|
@@ -1206,10 +1210,10 @@ var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
|
1206
1210
|
};
|
|
1207
1211
|
|
|
1208
1212
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
1209
|
-
var StartStartIcon = (0,
|
|
1210
|
-
var StartEndIcon = (0,
|
|
1211
|
-
var EndStartIcon = (0,
|
|
1212
|
-
var EndEndIcon = (0,
|
|
1213
|
+
var StartStartIcon = (0, import_ui18.withDirection)(import_icons6.RadiusTopLeftIcon);
|
|
1214
|
+
var StartEndIcon = (0, import_ui18.withDirection)(import_icons6.RadiusTopRightIcon);
|
|
1215
|
+
var EndStartIcon = (0, import_ui18.withDirection)(import_icons6.RadiusBottomLeftIcon);
|
|
1216
|
+
var EndEndIcon = (0, import_ui18.withDirection)(import_icons6.RadiusBottomRightIcon);
|
|
1213
1217
|
var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Top right", "elementor") : (0, import_i18n9.__)("Top left", "elementor");
|
|
1214
1218
|
var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Top left", "elementor") : (0, import_i18n9.__)("Top right", "elementor");
|
|
1215
1219
|
var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Bottom right", "elementor") : (0, import_i18n9.__)("Bottom left", "elementor");
|
|
@@ -1217,54 +1221,52 @@ var getEndEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Bottom lef
|
|
|
1217
1221
|
var getCorners = (isSiteRtl) => [
|
|
1218
1222
|
{
|
|
1219
1223
|
label: getStartStartLabel(isSiteRtl),
|
|
1220
|
-
icon: /* @__PURE__ */
|
|
1224
|
+
icon: /* @__PURE__ */ React26.createElement(RotatedIcon, { icon: StartStartIcon, size: "tiny" }),
|
|
1221
1225
|
bind: "start-start"
|
|
1222
1226
|
},
|
|
1223
1227
|
{
|
|
1224
1228
|
label: getStartEndLabel(isSiteRtl),
|
|
1225
|
-
icon: /* @__PURE__ */
|
|
1229
|
+
icon: /* @__PURE__ */ React26.createElement(RotatedIcon, { icon: StartEndIcon, size: "tiny" }),
|
|
1226
1230
|
bind: "start-end"
|
|
1227
1231
|
},
|
|
1228
1232
|
{
|
|
1229
1233
|
label: getEndEndLabel(isSiteRtl),
|
|
1230
|
-
icon: /* @__PURE__ */
|
|
1234
|
+
icon: /* @__PURE__ */ React26.createElement(RotatedIcon, { icon: EndEndIcon, size: "tiny" }),
|
|
1231
1235
|
bind: "end-end"
|
|
1232
1236
|
},
|
|
1233
1237
|
{
|
|
1234
1238
|
label: getEndStartLabel(isSiteRtl),
|
|
1235
|
-
icon: /* @__PURE__ */
|
|
1239
|
+
icon: /* @__PURE__ */ React26.createElement(RotatedIcon, { icon: EndStartIcon, size: "tiny" }),
|
|
1236
1240
|
bind: "end-start"
|
|
1237
1241
|
}
|
|
1238
1242
|
];
|
|
1239
1243
|
var BorderRadiusField = () => {
|
|
1240
1244
|
const { isSiteRtl } = useDirection();
|
|
1241
|
-
return /* @__PURE__ */
|
|
1245
|
+
return /* @__PURE__ */ React26.createElement(StylesField, { bind: "border-radius" }, /* @__PURE__ */ React26.createElement(
|
|
1242
1246
|
import_editor_controls11.EqualUnequalSizesControl,
|
|
1243
1247
|
{
|
|
1244
1248
|
items: getCorners(isSiteRtl),
|
|
1245
1249
|
label: (0, import_i18n9.__)("Border radius", "elementor"),
|
|
1246
|
-
icon: /* @__PURE__ */
|
|
1250
|
+
icon: /* @__PURE__ */ React26.createElement(import_icons6.BorderCornersIcon, { fontSize: "tiny" }),
|
|
1247
1251
|
multiSizePropTypeUtil: import_editor_props3.borderRadiusPropTypeUtil
|
|
1248
1252
|
}
|
|
1249
1253
|
));
|
|
1250
1254
|
};
|
|
1251
1255
|
|
|
1252
1256
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1253
|
-
var BorderSection = () => /* @__PURE__ */
|
|
1257
|
+
var BorderSection = () => /* @__PURE__ */ React27.createElement(SectionContent, null, /* @__PURE__ */ React27.createElement(BorderRadiusField, null), /* @__PURE__ */ React27.createElement(PanelDivider, null), /* @__PURE__ */ React27.createElement(BorderField, null));
|
|
1254
1258
|
|
|
1255
1259
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
1256
|
-
var
|
|
1260
|
+
var React28 = __toESM(require("react"));
|
|
1257
1261
|
var import_editor_controls12 = require("@elementor/editor-controls");
|
|
1258
|
-
var import_ui19 = require("@elementor/ui");
|
|
1259
1262
|
var EffectsSection = () => {
|
|
1260
|
-
return /* @__PURE__ */
|
|
1263
|
+
return /* @__PURE__ */ React28.createElement(SectionContent, null, /* @__PURE__ */ React28.createElement(StylesField, { bind: "box-shadow" }, /* @__PURE__ */ React28.createElement(import_editor_controls12.BoxShadowRepeaterControl, null)));
|
|
1261
1264
|
};
|
|
1262
1265
|
|
|
1263
1266
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
1264
|
-
var
|
|
1267
|
+
var React38 = __toESM(require("react"));
|
|
1265
1268
|
var import_editor_controls22 = require("@elementor/editor-controls");
|
|
1266
1269
|
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
1267
|
-
var import_ui29 = require("@elementor/ui");
|
|
1268
1270
|
var import_i18n19 = require("@wordpress/i18n");
|
|
1269
1271
|
|
|
1270
1272
|
// src/hooks/use-computed-style.ts
|
|
@@ -1293,13 +1295,13 @@ function useComputedStyle(elementId) {
|
|
|
1293
1295
|
}
|
|
1294
1296
|
|
|
1295
1297
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
1296
|
-
var
|
|
1298
|
+
var React29 = __toESM(require("react"));
|
|
1297
1299
|
var import_editor_controls13 = require("@elementor/editor-controls");
|
|
1298
1300
|
var import_icons7 = require("@elementor/icons");
|
|
1299
|
-
var
|
|
1301
|
+
var import_ui19 = require("@elementor/ui");
|
|
1300
1302
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1301
|
-
var StartIcon = (0,
|
|
1302
|
-
var EndIcon = (0,
|
|
1303
|
+
var StartIcon = (0, import_ui19.withDirection)(import_icons7.LayoutAlignLeftIcon);
|
|
1304
|
+
var EndIcon = (0, import_ui19.withDirection)(import_icons7.LayoutAlignRightIcon);
|
|
1303
1305
|
var iconProps = {
|
|
1304
1306
|
isClockwise: false,
|
|
1305
1307
|
offset: 90
|
|
@@ -1308,41 +1310,41 @@ var options = [
|
|
|
1308
1310
|
{
|
|
1309
1311
|
value: "start",
|
|
1310
1312
|
label: (0, import_i18n10.__)("Start", "elementor"),
|
|
1311
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1313
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
|
|
1312
1314
|
showTooltip: true
|
|
1313
1315
|
},
|
|
1314
1316
|
{
|
|
1315
1317
|
value: "center",
|
|
1316
1318
|
label: (0, import_i18n10.__)("Center", "elementor"),
|
|
1317
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1319
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: import_icons7.LayoutAlignCenterIcon, size, ...iconProps }),
|
|
1318
1320
|
showTooltip: true
|
|
1319
1321
|
},
|
|
1320
1322
|
{
|
|
1321
1323
|
value: "end",
|
|
1322
1324
|
label: (0, import_i18n10.__)("End", "elementor"),
|
|
1323
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1325
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
|
|
1324
1326
|
showTooltip: true
|
|
1325
1327
|
},
|
|
1326
1328
|
{
|
|
1327
1329
|
value: "stretch",
|
|
1328
1330
|
label: (0, import_i18n10.__)("Stretch", "elementor"),
|
|
1329
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1331
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: import_icons7.LayoutDistributeVerticalIcon, size, ...iconProps }),
|
|
1330
1332
|
showTooltip: true
|
|
1331
1333
|
}
|
|
1332
1334
|
];
|
|
1333
1335
|
var AlignItemsField = () => {
|
|
1334
1336
|
const { isSiteRtl } = useDirection();
|
|
1335
|
-
return /* @__PURE__ */
|
|
1337
|
+
return /* @__PURE__ */ React29.createElement(import_ui19.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React29.createElement(import_ui19.ThemeProvider, null, /* @__PURE__ */ React29.createElement(StylesField, { bind: "align-items" }, /* @__PURE__ */ React29.createElement(import_ui19.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React29.createElement(import_ui19.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(import_editor_controls13.ControlLabel, null, (0, import_i18n10.__)("Align items", "elementor"))), /* @__PURE__ */ React29.createElement(import_ui19.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React29.createElement(import_editor_controls13.ToggleControl, { options }))))));
|
|
1336
1338
|
};
|
|
1337
1339
|
|
|
1338
1340
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
1339
|
-
var
|
|
1341
|
+
var React30 = __toESM(require("react"));
|
|
1340
1342
|
var import_editor_controls14 = require("@elementor/editor-controls");
|
|
1341
1343
|
var import_icons8 = require("@elementor/icons");
|
|
1342
|
-
var
|
|
1344
|
+
var import_ui20 = require("@elementor/ui");
|
|
1343
1345
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1344
|
-
var StartIcon2 = (0,
|
|
1345
|
-
var EndIcon2 = (0,
|
|
1346
|
+
var StartIcon2 = (0, import_ui20.withDirection)(import_icons8.LayoutAlignLeftIcon);
|
|
1347
|
+
var EndIcon2 = (0, import_ui20.withDirection)(import_icons8.LayoutAlignRightIcon);
|
|
1346
1348
|
var iconProps2 = {
|
|
1347
1349
|
isClockwise: false,
|
|
1348
1350
|
offset: 90
|
|
@@ -1351,37 +1353,37 @@ var options2 = [
|
|
|
1351
1353
|
{
|
|
1352
1354
|
value: "start",
|
|
1353
1355
|
label: (0, import_i18n11.__)("Start", "elementor"),
|
|
1354
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1356
|
+
renderContent: ({ size }) => /* @__PURE__ */ React30.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
|
|
1355
1357
|
showTooltip: true
|
|
1356
1358
|
},
|
|
1357
1359
|
{
|
|
1358
1360
|
value: "center",
|
|
1359
1361
|
label: (0, import_i18n11.__)("Center", "elementor"),
|
|
1360
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1362
|
+
renderContent: ({ size }) => /* @__PURE__ */ React30.createElement(RotatedIcon, { icon: import_icons8.LayoutAlignCenterIcon, size, ...iconProps2 }),
|
|
1361
1363
|
showTooltip: true
|
|
1362
1364
|
},
|
|
1363
1365
|
{
|
|
1364
1366
|
value: "end",
|
|
1365
1367
|
label: (0, import_i18n11.__)("End", "elementor"),
|
|
1366
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1368
|
+
renderContent: ({ size }) => /* @__PURE__ */ React30.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
|
|
1367
1369
|
showTooltip: true
|
|
1368
1370
|
},
|
|
1369
1371
|
{
|
|
1370
1372
|
value: "stretch",
|
|
1371
1373
|
label: (0, import_i18n11.__)("Stretch", "elementor"),
|
|
1372
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1374
|
+
renderContent: ({ size }) => /* @__PURE__ */ React30.createElement(RotatedIcon, { icon: import_icons8.LayoutDistributeVerticalIcon, size, ...iconProps2 }),
|
|
1373
1375
|
showTooltip: true
|
|
1374
1376
|
}
|
|
1375
1377
|
];
|
|
1376
1378
|
var AlignSelfChild = () => {
|
|
1377
1379
|
const { isSiteRtl } = useDirection();
|
|
1378
|
-
return /* @__PURE__ */
|
|
1380
|
+
return /* @__PURE__ */ React30.createElement(import_ui20.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React30.createElement(import_ui20.ThemeProvider, null, /* @__PURE__ */ React30.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React30.createElement(import_ui20.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui20.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(import_editor_controls14.ControlLabel, null, (0, import_i18n11.__)("Align self", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui20.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React30.createElement(import_editor_controls14.ToggleControl, { options: options2 }))))));
|
|
1379
1381
|
};
|
|
1380
1382
|
|
|
1381
1383
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
1382
|
-
var
|
|
1384
|
+
var React31 = __toESM(require("react"));
|
|
1383
1385
|
var import_editor_controls15 = require("@elementor/editor-controls");
|
|
1384
|
-
var
|
|
1386
|
+
var import_ui21 = require("@elementor/ui");
|
|
1385
1387
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1386
1388
|
var DisplayField = () => {
|
|
1387
1389
|
const options11 = [
|
|
@@ -1404,58 +1406,58 @@ var DisplayField = () => {
|
|
|
1404
1406
|
showTooltip: true
|
|
1405
1407
|
}
|
|
1406
1408
|
];
|
|
1407
|
-
return /* @__PURE__ */
|
|
1409
|
+
return /* @__PURE__ */ React31.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React31.createElement(import_ui21.Stack, { gap: 1 }, /* @__PURE__ */ React31.createElement(import_editor_controls15.ControlLabel, null, (0, import_i18n12.__)("Display", "elementor")), /* @__PURE__ */ React31.createElement(import_editor_controls15.ToggleControl, { options: options11, fullWidth: true })));
|
|
1408
1410
|
};
|
|
1409
1411
|
|
|
1410
1412
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
1411
|
-
var
|
|
1413
|
+
var React32 = __toESM(require("react"));
|
|
1412
1414
|
var import_editor_controls16 = require("@elementor/editor-controls");
|
|
1413
1415
|
var import_icons9 = require("@elementor/icons");
|
|
1414
|
-
var
|
|
1416
|
+
var import_ui22 = require("@elementor/ui");
|
|
1415
1417
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1416
1418
|
var options3 = [
|
|
1417
1419
|
{
|
|
1418
1420
|
value: "row",
|
|
1419
1421
|
label: (0, import_i18n13.__)("Row", "elementor"),
|
|
1420
1422
|
renderContent: ({ size }) => {
|
|
1421
|
-
const StartIcon5 = (0,
|
|
1422
|
-
return /* @__PURE__ */
|
|
1423
|
+
const StartIcon5 = (0, import_ui22.withDirection)(import_icons9.ArrowRightIcon);
|
|
1424
|
+
return /* @__PURE__ */ React32.createElement(StartIcon5, { fontSize: size });
|
|
1423
1425
|
},
|
|
1424
1426
|
showTooltip: true
|
|
1425
1427
|
},
|
|
1426
1428
|
{
|
|
1427
1429
|
value: "column",
|
|
1428
1430
|
label: (0, import_i18n13.__)("Column", "elementor"),
|
|
1429
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1431
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons9.ArrowDownSmallIcon, { fontSize: size }),
|
|
1430
1432
|
showTooltip: true
|
|
1431
1433
|
},
|
|
1432
1434
|
{
|
|
1433
1435
|
value: "row-reverse",
|
|
1434
1436
|
label: (0, import_i18n13.__)("Reversed row", "elementor"),
|
|
1435
1437
|
renderContent: ({ size }) => {
|
|
1436
|
-
const EndIcon5 = (0,
|
|
1437
|
-
return /* @__PURE__ */
|
|
1438
|
+
const EndIcon5 = (0, import_ui22.withDirection)(import_icons9.ArrowLeftIcon);
|
|
1439
|
+
return /* @__PURE__ */ React32.createElement(EndIcon5, { fontSize: size });
|
|
1438
1440
|
},
|
|
1439
1441
|
showTooltip: true
|
|
1440
1442
|
},
|
|
1441
1443
|
{
|
|
1442
1444
|
value: "column-reverse",
|
|
1443
1445
|
label: (0, import_i18n13.__)("Reversed column", "elementor"),
|
|
1444
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1446
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons9.ArrowUpSmallIcon, { fontSize: size }),
|
|
1445
1447
|
showTooltip: true
|
|
1446
1448
|
}
|
|
1447
1449
|
];
|
|
1448
1450
|
var FlexDirectionField = () => {
|
|
1449
1451
|
const { isSiteRtl } = useDirection();
|
|
1450
|
-
return /* @__PURE__ */
|
|
1452
|
+
return /* @__PURE__ */ React32.createElement(import_ui22.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React32.createElement(import_ui22.ThemeProvider, null, /* @__PURE__ */ React32.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React32.createElement(import_ui22.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(import_editor_controls16.ControlLabel, null, (0, import_i18n13.__)("Direction", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui22.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(import_editor_controls16.ToggleControl, { options: options3 }))))));
|
|
1451
1453
|
};
|
|
1452
1454
|
|
|
1453
1455
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
1454
|
-
var
|
|
1456
|
+
var React33 = __toESM(require("react"));
|
|
1455
1457
|
var import_react10 = require("react");
|
|
1456
1458
|
var import_editor_controls17 = require("@elementor/editor-controls");
|
|
1457
1459
|
var import_icons10 = require("@elementor/icons");
|
|
1458
|
-
var
|
|
1460
|
+
var import_ui23 = require("@elementor/ui");
|
|
1459
1461
|
var import_i18n14 = require("@wordpress/i18n");
|
|
1460
1462
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
1461
1463
|
var LAST_DEFAULT_VALUE = 99999;
|
|
@@ -1470,19 +1472,19 @@ var items = [
|
|
|
1470
1472
|
{
|
|
1471
1473
|
value: FIRST,
|
|
1472
1474
|
label: (0, import_i18n14.__)("First", "elementor"),
|
|
1473
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1475
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons10.ArrowUpSmallIcon, { fontSize: size }),
|
|
1474
1476
|
showTooltip: true
|
|
1475
1477
|
},
|
|
1476
1478
|
{
|
|
1477
1479
|
value: LAST,
|
|
1478
1480
|
label: (0, import_i18n14.__)("Last", "elementor"),
|
|
1479
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1481
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons10.ArrowDownSmallIcon, { fontSize: size }),
|
|
1480
1482
|
showTooltip: true
|
|
1481
1483
|
},
|
|
1482
1484
|
{
|
|
1483
1485
|
value: CUSTOM,
|
|
1484
1486
|
label: (0, import_i18n14.__)("Custom", "elementor"),
|
|
1485
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1487
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons10.PencilIcon, { fontSize: size }),
|
|
1486
1488
|
showTooltip: true
|
|
1487
1489
|
}
|
|
1488
1490
|
];
|
|
@@ -1497,7 +1499,7 @@ var FlexOrderField = () => {
|
|
|
1497
1499
|
}
|
|
1498
1500
|
setOrder({ $$type: "number", value: orderValueMap[group] });
|
|
1499
1501
|
};
|
|
1500
|
-
return /* @__PURE__ */
|
|
1502
|
+
return /* @__PURE__ */ React33.createElement(import_ui23.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React33.createElement(import_ui23.ThemeProvider, null, /* @__PURE__ */ React33.createElement(SectionContent, null, /* @__PURE__ */ React33.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(import_editor_controls17.ControlLabel, null, (0, import_i18n14.__)("Order", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui23.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(
|
|
1501
1503
|
import_editor_controls17.ControlToggleButtonGroup,
|
|
1502
1504
|
{
|
|
1503
1505
|
items,
|
|
@@ -1505,7 +1507,7 @@ var FlexOrderField = () => {
|
|
|
1505
1507
|
onChange: handleToggleButtonChange,
|
|
1506
1508
|
exclusive: true
|
|
1507
1509
|
}
|
|
1508
|
-
))), CUSTOM === groupControlValue && /* @__PURE__ */
|
|
1510
|
+
))), CUSTOM === groupControlValue && /* @__PURE__ */ React33.createElement(StylesField, { bind: "order" }, /* @__PURE__ */ React33.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(import_editor_controls17.ControlLabel, null, (0, import_i18n14.__)("Custom order", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui23.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(
|
|
1509
1511
|
import_editor_controls17.NumberControl,
|
|
1510
1512
|
{
|
|
1511
1513
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -1525,30 +1527,30 @@ var getGroupControlValue = (order) => {
|
|
|
1525
1527
|
};
|
|
1526
1528
|
|
|
1527
1529
|
// src/components/style-sections/layout-section/flex-size-field.tsx
|
|
1528
|
-
var
|
|
1530
|
+
var React34 = __toESM(require("react"));
|
|
1529
1531
|
var import_react11 = require("react");
|
|
1530
1532
|
var import_editor_controls18 = require("@elementor/editor-controls");
|
|
1531
1533
|
var import_icons11 = require("@elementor/icons");
|
|
1532
|
-
var
|
|
1534
|
+
var import_ui24 = require("@elementor/ui");
|
|
1533
1535
|
var import_i18n15 = require("@wordpress/i18n");
|
|
1534
1536
|
var DEFAULT = 1;
|
|
1535
1537
|
var items2 = [
|
|
1536
1538
|
{
|
|
1537
1539
|
value: "flex-grow",
|
|
1538
1540
|
label: (0, import_i18n15.__)("Grow", "elementor"),
|
|
1539
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1541
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(import_icons11.ExpandIcon, { fontSize: size }),
|
|
1540
1542
|
showTooltip: true
|
|
1541
1543
|
},
|
|
1542
1544
|
{
|
|
1543
1545
|
value: "flex-shrink",
|
|
1544
1546
|
label: (0, import_i18n15.__)("Shrink", "elementor"),
|
|
1545
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1547
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(import_icons11.ShrinkIcon, { fontSize: size }),
|
|
1546
1548
|
showTooltip: true
|
|
1547
1549
|
},
|
|
1548
1550
|
{
|
|
1549
1551
|
value: "custom",
|
|
1550
1552
|
label: (0, import_i18n15.__)("Custom", "elementor"),
|
|
1551
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1553
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(import_icons11.PencilIcon, { fontSize: size }),
|
|
1552
1554
|
showTooltip: true
|
|
1553
1555
|
}
|
|
1554
1556
|
];
|
|
@@ -1572,7 +1574,7 @@ var FlexSizeField = () => {
|
|
|
1572
1574
|
setGrowField(null);
|
|
1573
1575
|
setShrinkField({ $$type: "number", value: DEFAULT });
|
|
1574
1576
|
};
|
|
1575
|
-
return /* @__PURE__ */
|
|
1577
|
+
return /* @__PURE__ */ React34.createElement(import_ui24.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React34.createElement(import_ui24.ThemeProvider, null, /* @__PURE__ */ React34.createElement(SectionContent, null, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Size", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(
|
|
1576
1578
|
import_editor_controls18.ControlToggleButtonGroup,
|
|
1577
1579
|
{
|
|
1578
1580
|
value: activeGroup,
|
|
@@ -1580,9 +1582,9 @@ var FlexSizeField = () => {
|
|
|
1580
1582
|
items: items2,
|
|
1581
1583
|
exclusive: true
|
|
1582
1584
|
}
|
|
1583
|
-
))), "custom" === activeGroup && /* @__PURE__ */
|
|
1585
|
+
))), "custom" === activeGroup && /* @__PURE__ */ React34.createElement(FlexCustomField, null))));
|
|
1584
1586
|
};
|
|
1585
|
-
var FlexCustomField = () => /* @__PURE__ */
|
|
1587
|
+
var FlexCustomField = () => /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Grow", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(import_editor_controls18.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-shrink" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Shrink", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(import_editor_controls18.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-basis" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Basis", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(import_editor_controls18.SizeControl, null)))));
|
|
1586
1588
|
var getActiveGroup = ({
|
|
1587
1589
|
grow,
|
|
1588
1590
|
shrink,
|
|
@@ -1604,22 +1606,22 @@ var getActiveGroup = ({
|
|
|
1604
1606
|
};
|
|
1605
1607
|
|
|
1606
1608
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
1607
|
-
var
|
|
1609
|
+
var React35 = __toESM(require("react"));
|
|
1608
1610
|
var import_editor_controls19 = require("@elementor/editor-controls");
|
|
1609
|
-
var
|
|
1611
|
+
var import_ui25 = require("@elementor/ui");
|
|
1610
1612
|
var import_i18n16 = require("@wordpress/i18n");
|
|
1611
1613
|
var GapControlField = () => {
|
|
1612
|
-
return /* @__PURE__ */
|
|
1614
|
+
return /* @__PURE__ */ React35.createElement(import_ui25.Stack, { gap: 1 }, /* @__PURE__ */ React35.createElement(StylesField, { bind: "gap" }, /* @__PURE__ */ React35.createElement(import_editor_controls19.GapControl, { label: (0, import_i18n16.__)("Gaps", "elementor") })));
|
|
1613
1615
|
};
|
|
1614
1616
|
|
|
1615
1617
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
1616
|
-
var
|
|
1618
|
+
var React36 = __toESM(require("react"));
|
|
1617
1619
|
var import_editor_controls20 = require("@elementor/editor-controls");
|
|
1618
1620
|
var import_icons12 = require("@elementor/icons");
|
|
1619
|
-
var
|
|
1621
|
+
var import_ui26 = require("@elementor/ui");
|
|
1620
1622
|
var import_i18n17 = require("@wordpress/i18n");
|
|
1621
|
-
var StartIcon3 = (0,
|
|
1622
|
-
var EndIcon3 = (0,
|
|
1623
|
+
var StartIcon3 = (0, import_ui26.withDirection)(import_icons12.JustifyTopIcon);
|
|
1624
|
+
var EndIcon3 = (0, import_ui26.withDirection)(import_icons12.JustifyBottomIcon);
|
|
1623
1625
|
var iconProps3 = {
|
|
1624
1626
|
isClockwise: true,
|
|
1625
1627
|
offset: -90
|
|
@@ -1628,74 +1630,74 @@ var options4 = [
|
|
|
1628
1630
|
{
|
|
1629
1631
|
value: "start",
|
|
1630
1632
|
label: (0, import_i18n17.__)("Start", "elementor"),
|
|
1631
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1633
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: StartIcon3, size, ...iconProps3 }),
|
|
1632
1634
|
showTooltip: true
|
|
1633
1635
|
},
|
|
1634
1636
|
{
|
|
1635
1637
|
value: "center",
|
|
1636
1638
|
label: (0, import_i18n17.__)("Center", "elementor"),
|
|
1637
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1639
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: import_icons12.JustifyCenterIcon, size, ...iconProps3 }),
|
|
1638
1640
|
showTooltip: true
|
|
1639
1641
|
},
|
|
1640
1642
|
{
|
|
1641
1643
|
value: "end",
|
|
1642
1644
|
label: (0, import_i18n17.__)("End", "elementor"),
|
|
1643
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1645
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: EndIcon3, size, ...iconProps3 }),
|
|
1644
1646
|
showTooltip: true
|
|
1645
1647
|
},
|
|
1646
1648
|
{
|
|
1647
1649
|
value: "space-between",
|
|
1648
1650
|
label: (0, import_i18n17.__)("Space between", "elementor"),
|
|
1649
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1651
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: import_icons12.JustifySpaceBetweenVerticalIcon, size, ...iconProps3 }),
|
|
1650
1652
|
showTooltip: true
|
|
1651
1653
|
},
|
|
1652
1654
|
{
|
|
1653
1655
|
value: "space-around",
|
|
1654
1656
|
label: (0, import_i18n17.__)("Space around", "elementor"),
|
|
1655
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1657
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: import_icons12.JustifySpaceAroundVerticalIcon, size, ...iconProps3 }),
|
|
1656
1658
|
showTooltip: true
|
|
1657
1659
|
},
|
|
1658
1660
|
{
|
|
1659
1661
|
value: "space-evenly",
|
|
1660
1662
|
label: (0, import_i18n17.__)("Space evenly", "elementor"),
|
|
1661
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1663
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(RotatedIcon, { icon: import_icons12.JustifyDistributeVerticalIcon, size, ...iconProps3 }),
|
|
1662
1664
|
showTooltip: true
|
|
1663
1665
|
}
|
|
1664
1666
|
];
|
|
1665
1667
|
var JustifyContentField = () => {
|
|
1666
1668
|
const { isSiteRtl } = useDirection();
|
|
1667
|
-
return /* @__PURE__ */
|
|
1669
|
+
return /* @__PURE__ */ React36.createElement(import_ui26.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(import_ui26.ThemeProvider, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React36.createElement(import_ui26.Stack, { gap: 1 }, /* @__PURE__ */ React36.createElement(import_editor_controls20.ControlLabel, null, (0, import_i18n17.__)("Justify content", "elementor")), /* @__PURE__ */ React36.createElement(import_editor_controls20.ToggleControl, { options: options4, fullWidth: true })))));
|
|
1668
1670
|
};
|
|
1669
1671
|
|
|
1670
1672
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
1671
|
-
var
|
|
1673
|
+
var React37 = __toESM(require("react"));
|
|
1672
1674
|
var import_editor_controls21 = require("@elementor/editor-controls");
|
|
1673
1675
|
var import_icons13 = require("@elementor/icons");
|
|
1674
|
-
var
|
|
1676
|
+
var import_ui27 = require("@elementor/ui");
|
|
1675
1677
|
var import_i18n18 = require("@wordpress/i18n");
|
|
1676
1678
|
var options5 = [
|
|
1677
1679
|
{
|
|
1678
1680
|
value: "nowrap",
|
|
1679
1681
|
label: (0, import_i18n18.__)("No wrap", "elementor"),
|
|
1680
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1682
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.ArrowRightIcon, { fontSize: size }),
|
|
1681
1683
|
showTooltip: true
|
|
1682
1684
|
},
|
|
1683
1685
|
{
|
|
1684
1686
|
value: "wrap",
|
|
1685
1687
|
label: (0, import_i18n18.__)("Wrap", "elementor"),
|
|
1686
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1688
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.ArrowBackIcon, { fontSize: size }),
|
|
1687
1689
|
showTooltip: true
|
|
1688
1690
|
},
|
|
1689
1691
|
{
|
|
1690
1692
|
value: "wrap-reverse",
|
|
1691
1693
|
label: (0, import_i18n18.__)("Reversed wrap", "elementor"),
|
|
1692
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1694
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons13.ArrowForwardIcon, { fontSize: size }),
|
|
1693
1695
|
showTooltip: true
|
|
1694
1696
|
}
|
|
1695
1697
|
];
|
|
1696
1698
|
var WrapField = () => {
|
|
1697
1699
|
const { isSiteRtl } = useDirection();
|
|
1698
|
-
return /* @__PURE__ */
|
|
1700
|
+
return /* @__PURE__ */ React37.createElement(import_ui27.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React37.createElement(import_ui27.ThemeProvider, null, /* @__PURE__ */ React37.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React37.createElement(import_ui27.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui27.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(import_editor_controls21.ControlLabel, null, (0, import_i18n18.__)("Wrap", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui27.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React37.createElement(import_editor_controls21.ToggleControl, { options: options5 }))))));
|
|
1699
1701
|
};
|
|
1700
1702
|
|
|
1701
1703
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -1704,39 +1706,38 @@ var LayoutSection = () => {
|
|
|
1704
1706
|
const { element } = useElement();
|
|
1705
1707
|
const parent = (0, import_editor_elements5.useParentElement)(element.id);
|
|
1706
1708
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
1707
|
-
return /* @__PURE__ */
|
|
1709
|
+
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));
|
|
1708
1710
|
};
|
|
1709
|
-
var FlexFields = () => /* @__PURE__ */
|
|
1710
|
-
var FlexChildFields = () => /* @__PURE__ */
|
|
1711
|
+
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));
|
|
1712
|
+
var FlexChildFields = () => /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(PanelDivider, null), /* @__PURE__ */ React38.createElement(import_editor_controls22.ControlLabel, null, (0, import_i18n19.__)("Flex child", "elementor")), /* @__PURE__ */ React38.createElement(AlignSelfChild, null), /* @__PURE__ */ React38.createElement(FlexOrderField, null), /* @__PURE__ */ React38.createElement(FlexSizeField, null));
|
|
1711
1713
|
|
|
1712
1714
|
// src/components/style-sections/position-section/position-section.tsx
|
|
1713
|
-
var
|
|
1715
|
+
var React42 = __toESM(require("react"));
|
|
1714
1716
|
var import_session2 = require("@elementor/session");
|
|
1715
|
-
var import_ui33 = require("@elementor/ui");
|
|
1716
1717
|
|
|
1717
1718
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
1718
|
-
var
|
|
1719
|
+
var React39 = __toESM(require("react"));
|
|
1719
1720
|
var import_editor_controls23 = require("@elementor/editor-controls");
|
|
1720
1721
|
var import_icons14 = require("@elementor/icons");
|
|
1721
|
-
var
|
|
1722
|
+
var import_ui28 = require("@elementor/ui");
|
|
1722
1723
|
var import_i18n20 = require("@wordpress/i18n");
|
|
1723
1724
|
var sideIcons = {
|
|
1724
|
-
left: /* @__PURE__ */
|
|
1725
|
-
right: /* @__PURE__ */
|
|
1726
|
-
top: /* @__PURE__ */
|
|
1727
|
-
bottom: /* @__PURE__ */
|
|
1725
|
+
left: /* @__PURE__ */ React39.createElement(import_icons14.SideLeftIcon, { fontSize: "tiny" }),
|
|
1726
|
+
right: /* @__PURE__ */ React39.createElement(import_icons14.SideRightIcon, { fontSize: "tiny" }),
|
|
1727
|
+
top: /* @__PURE__ */ React39.createElement(import_icons14.SideTopIcon, { fontSize: "tiny" }),
|
|
1728
|
+
bottom: /* @__PURE__ */ React39.createElement(import_icons14.SideBottomIcon, { fontSize: "tiny" })
|
|
1728
1729
|
};
|
|
1729
1730
|
var DimensionsField = () => {
|
|
1730
|
-
return /* @__PURE__ */
|
|
1731
|
+
return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(import_ui28.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "top", label: (0, import_i18n20.__)("Top", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "right", label: (0, import_i18n20.__)("Right", "elementor") })), /* @__PURE__ */ React39.createElement(import_ui28.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "bottom", label: (0, import_i18n20.__)("Bottom", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "left", label: (0, import_i18n20.__)("Left", "elementor") })));
|
|
1731
1732
|
};
|
|
1732
1733
|
var DimensionField = ({ side, label }) => {
|
|
1733
|
-
return /* @__PURE__ */
|
|
1734
|
+
return /* @__PURE__ */ React39.createElement(import_ui28.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(import_editor_controls23.ControlLabel, null, label)), /* @__PURE__ */ React39.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(StylesField, { bind: side }, /* @__PURE__ */ React39.createElement(import_editor_controls23.SizeControl, { startIcon: sideIcons[side] }))));
|
|
1734
1735
|
};
|
|
1735
1736
|
|
|
1736
1737
|
// src/components/style-sections/position-section/position-field.tsx
|
|
1737
|
-
var
|
|
1738
|
+
var React40 = __toESM(require("react"));
|
|
1738
1739
|
var import_editor_controls24 = require("@elementor/editor-controls");
|
|
1739
|
-
var
|
|
1740
|
+
var import_ui29 = require("@elementor/ui");
|
|
1740
1741
|
var import_i18n21 = require("@wordpress/i18n");
|
|
1741
1742
|
var positionOptions = [
|
|
1742
1743
|
{ label: (0, import_i18n21.__)("Static", "elementor"), value: "static" },
|
|
@@ -1746,16 +1747,16 @@ var positionOptions = [
|
|
|
1746
1747
|
{ label: (0, import_i18n21.__)("Sticky", "elementor"), value: "sticky" }
|
|
1747
1748
|
];
|
|
1748
1749
|
var PositionField = ({ onChange }) => {
|
|
1749
|
-
return /* @__PURE__ */
|
|
1750
|
+
return /* @__PURE__ */ React40.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React40.createElement(import_ui29.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(import_ui29.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(import_editor_controls24.ControlLabel, null, (0, import_i18n21.__)("Position", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui29.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(import_editor_controls24.SelectControl, { options: positionOptions, onChange }))));
|
|
1750
1751
|
};
|
|
1751
1752
|
|
|
1752
1753
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
1753
|
-
var
|
|
1754
|
+
var React41 = __toESM(require("react"));
|
|
1754
1755
|
var import_editor_controls25 = require("@elementor/editor-controls");
|
|
1755
|
-
var
|
|
1756
|
+
var import_ui30 = require("@elementor/ui");
|
|
1756
1757
|
var import_i18n22 = require("@wordpress/i18n");
|
|
1757
1758
|
var ZIndexField = () => {
|
|
1758
|
-
return /* @__PURE__ */
|
|
1759
|
+
return /* @__PURE__ */ React41.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React41.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(import_editor_controls25.ControlLabel, null, (0, import_i18n22.__)("Z-Index", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(import_editor_controls25.NumberControl, null))));
|
|
1759
1760
|
};
|
|
1760
1761
|
|
|
1761
1762
|
// src/components/style-sections/position-section/position-section.tsx
|
|
@@ -1787,7 +1788,7 @@ var PositionSection = () => {
|
|
|
1787
1788
|
}
|
|
1788
1789
|
};
|
|
1789
1790
|
const isNotStatic = positionValue && positionValue?.value !== "static";
|
|
1790
|
-
return /* @__PURE__ */
|
|
1791
|
+
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);
|
|
1791
1792
|
};
|
|
1792
1793
|
var usePersistDimensions = () => {
|
|
1793
1794
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -1797,90 +1798,89 @@ var usePersistDimensions = () => {
|
|
|
1797
1798
|
};
|
|
1798
1799
|
|
|
1799
1800
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1800
|
-
var
|
|
1801
|
+
var React44 = __toESM(require("react"));
|
|
1801
1802
|
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
1802
|
-
var
|
|
1803
|
+
var import_ui32 = require("@elementor/ui");
|
|
1803
1804
|
var import_i18n24 = require("@wordpress/i18n");
|
|
1804
1805
|
|
|
1805
1806
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
1806
|
-
var
|
|
1807
|
+
var React43 = __toESM(require("react"));
|
|
1807
1808
|
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
1808
1809
|
var import_icons15 = require("@elementor/icons");
|
|
1809
|
-
var
|
|
1810
|
+
var import_ui31 = require("@elementor/ui");
|
|
1810
1811
|
var import_i18n23 = require("@wordpress/i18n");
|
|
1811
1812
|
var options6 = [
|
|
1812
1813
|
{
|
|
1813
1814
|
value: "visible",
|
|
1814
1815
|
label: (0, import_i18n23.__)("Visible", "elementor"),
|
|
1815
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1816
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons15.EyeIcon, { fontSize: size }),
|
|
1816
1817
|
showTooltip: true
|
|
1817
1818
|
},
|
|
1818
1819
|
{
|
|
1819
1820
|
value: "hidden",
|
|
1820
1821
|
label: (0, import_i18n23.__)("Hidden", "elementor"),
|
|
1821
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1822
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons15.EyeOffIcon, { fontSize: size }),
|
|
1822
1823
|
showTooltip: true
|
|
1823
1824
|
},
|
|
1824
1825
|
{
|
|
1825
1826
|
value: "auto",
|
|
1826
1827
|
label: (0, import_i18n23.__)("Auto", "elementor"),
|
|
1827
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1828
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons15.LetterAIcon, { fontSize: size }),
|
|
1828
1829
|
showTooltip: true
|
|
1829
1830
|
}
|
|
1830
1831
|
];
|
|
1831
1832
|
var OverflowField = () => {
|
|
1832
|
-
return /* @__PURE__ */
|
|
1833
|
+
return /* @__PURE__ */ React43.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React43.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(import_editor_controls26.ControlLabel, null, (0, import_i18n23.__)("Overflow", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React43.createElement(import_editor_controls26.ToggleControl, { options: options6 }))));
|
|
1833
1834
|
};
|
|
1834
1835
|
|
|
1835
1836
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1836
1837
|
var SizeSection = () => {
|
|
1837
|
-
return /* @__PURE__ */
|
|
1838
|
+
return /* @__PURE__ */ React44.createElement(SectionContent, null, /* @__PURE__ */ React44.createElement(import_ui32.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "width", label: (0, import_i18n24.__)("Width", "elementor") })), /* @__PURE__ */ React44.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "height", label: (0, import_i18n24.__)("Height", "elementor") }))), /* @__PURE__ */ React44.createElement(import_ui32.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "min-width", label: (0, import_i18n24.__)("Min. width", "elementor") })), /* @__PURE__ */ React44.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "min-height", label: (0, import_i18n24.__)("Min. height", "elementor") }))), /* @__PURE__ */ React44.createElement(import_ui32.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "max-width", label: (0, import_i18n24.__)("Max. width", "elementor") })), /* @__PURE__ */ React44.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "max-height", label: (0, import_i18n24.__)("Max. height", "elementor") }))), /* @__PURE__ */ React44.createElement(PanelDivider, null), /* @__PURE__ */ React44.createElement(import_ui32.Stack, null, /* @__PURE__ */ React44.createElement(OverflowField, null)));
|
|
1838
1839
|
};
|
|
1839
1840
|
var SizeField = ({ label, bind }) => {
|
|
1840
|
-
return /* @__PURE__ */
|
|
1841
|
+
return /* @__PURE__ */ React44.createElement(StylesField, { bind }, /* @__PURE__ */ React44.createElement(import_ui32.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React44.createElement(import_ui32.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(import_editor_controls27.ControlLabel, null, label)), /* @__PURE__ */ React44.createElement(import_ui32.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(import_editor_controls27.SizeControl, null))));
|
|
1841
1842
|
};
|
|
1842
1843
|
|
|
1843
1844
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
1844
|
-
var
|
|
1845
|
+
var React45 = __toESM(require("react"));
|
|
1845
1846
|
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
1846
|
-
var import_ui36 = require("@elementor/ui");
|
|
1847
1847
|
var import_i18n25 = require("@wordpress/i18n");
|
|
1848
1848
|
var SpacingSection = () => {
|
|
1849
|
-
return /* @__PURE__ */
|
|
1849
|
+
return /* @__PURE__ */ React45.createElement(SectionContent, null, /* @__PURE__ */ React45.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React45.createElement(import_editor_controls28.LinkedDimensionsControl, { label: (0, import_i18n25.__)("Padding", "elementor") })), /* @__PURE__ */ React45.createElement(PanelDivider, null), /* @__PURE__ */ React45.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React45.createElement(import_editor_controls28.LinkedDimensionsControl, { label: (0, import_i18n25.__)("Margin", "elementor") })));
|
|
1850
1850
|
};
|
|
1851
1851
|
|
|
1852
1852
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
1853
|
-
var
|
|
1854
|
-
var import_ui50 = require("@elementor/ui");
|
|
1853
|
+
var React60 = __toESM(require("react"));
|
|
1855
1854
|
|
|
1856
1855
|
// src/components/collapsible-content.tsx
|
|
1857
|
-
var
|
|
1856
|
+
var React46 = __toESM(require("react"));
|
|
1858
1857
|
var import_react12 = require("react");
|
|
1859
|
-
var
|
|
1858
|
+
var import_ui33 = require("@elementor/ui");
|
|
1860
1859
|
var import_i18n26 = require("@wordpress/i18n");
|
|
1861
1860
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
1862
1861
|
const [open, setOpen] = (0, import_react12.useState)(defaultOpen);
|
|
1863
1862
|
const handleToggle = () => {
|
|
1864
1863
|
setOpen((prevOpen) => !prevOpen);
|
|
1865
1864
|
};
|
|
1866
|
-
return /* @__PURE__ */
|
|
1867
|
-
|
|
1865
|
+
return /* @__PURE__ */ React46.createElement(import_ui33.Stack, null, /* @__PURE__ */ React46.createElement(
|
|
1866
|
+
import_ui33.Button,
|
|
1868
1867
|
{
|
|
1869
1868
|
fullWidth: true,
|
|
1870
1869
|
size: "small",
|
|
1871
1870
|
color: "secondary",
|
|
1872
1871
|
variant: "outlined",
|
|
1873
1872
|
onClick: handleToggle,
|
|
1874
|
-
endIcon: /* @__PURE__ */
|
|
1873
|
+
endIcon: /* @__PURE__ */ React46.createElement(CollapseIcon, { open }),
|
|
1874
|
+
sx: { my: 0.5 }
|
|
1875
1875
|
},
|
|
1876
1876
|
open ? (0, import_i18n26.__)("Show less", "elementor") : (0, import_i18n26.__)("Show more", "elementor")
|
|
1877
|
-
), /* @__PURE__ */
|
|
1877
|
+
), /* @__PURE__ */ React46.createElement(import_ui33.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
1878
1878
|
};
|
|
1879
1879
|
|
|
1880
1880
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
1881
|
-
var
|
|
1881
|
+
var React47 = __toESM(require("react"));
|
|
1882
1882
|
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
1883
|
-
var
|
|
1883
|
+
var import_ui34 = require("@elementor/ui");
|
|
1884
1884
|
var import_i18n27 = require("@wordpress/i18n");
|
|
1885
1885
|
|
|
1886
1886
|
// src/sync/get-elementor-config.ts
|
|
@@ -1895,7 +1895,7 @@ var FontFamilyField = () => {
|
|
|
1895
1895
|
if (!fontFamilies) {
|
|
1896
1896
|
return null;
|
|
1897
1897
|
}
|
|
1898
|
-
return /* @__PURE__ */
|
|
1898
|
+
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React47.createElement(import_ui34.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(import_editor_controls29.ControlLabel, null, (0, import_i18n27.__)("Font family", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui34.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React47.createElement(import_editor_controls29.FontFamilyControl, { fontFamilies }))));
|
|
1899
1899
|
};
|
|
1900
1900
|
var getFontFamilies = () => {
|
|
1901
1901
|
const { controls } = getElementorConfig();
|
|
@@ -1907,40 +1907,40 @@ var getFontFamilies = () => {
|
|
|
1907
1907
|
};
|
|
1908
1908
|
|
|
1909
1909
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
1910
|
-
var
|
|
1910
|
+
var React48 = __toESM(require("react"));
|
|
1911
1911
|
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
1912
|
-
var
|
|
1912
|
+
var import_ui35 = require("@elementor/ui");
|
|
1913
1913
|
var import_i18n28 = require("@wordpress/i18n");
|
|
1914
1914
|
var FontSizeField = () => {
|
|
1915
|
-
return /* @__PURE__ */
|
|
1915
|
+
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React48.createElement(import_ui35.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(import_editor_controls30.ControlLabel, null, (0, import_i18n28.__)("Font size", "elementor"))), /* @__PURE__ */ React48.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(import_editor_controls30.SizeControl, null))));
|
|
1916
1916
|
};
|
|
1917
1917
|
|
|
1918
1918
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
1919
|
-
var
|
|
1919
|
+
var React49 = __toESM(require("react"));
|
|
1920
1920
|
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
1921
1921
|
var import_icons16 = require("@elementor/icons");
|
|
1922
|
-
var
|
|
1922
|
+
var import_ui36 = require("@elementor/ui");
|
|
1923
1923
|
var import_i18n29 = require("@wordpress/i18n");
|
|
1924
1924
|
var options7 = [
|
|
1925
1925
|
{
|
|
1926
1926
|
value: "normal",
|
|
1927
1927
|
label: (0, import_i18n29.__)("Normal", "elementor"),
|
|
1928
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1928
|
+
renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(import_icons16.MinusIcon, { fontSize: size }),
|
|
1929
1929
|
showTooltip: true
|
|
1930
1930
|
},
|
|
1931
1931
|
{
|
|
1932
1932
|
value: "italic",
|
|
1933
1933
|
label: (0, import_i18n29.__)("Italic", "elementor"),
|
|
1934
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1934
|
+
renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(import_icons16.ItalicIcon, { fontSize: size }),
|
|
1935
1935
|
showTooltip: true
|
|
1936
1936
|
}
|
|
1937
1937
|
];
|
|
1938
|
-
var FontStyleField = () => /* @__PURE__ */
|
|
1938
|
+
var FontStyleField = () => /* @__PURE__ */ React49.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React49.createElement(import_ui36.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(import_editor_controls31.ControlLabel, null, (0, import_i18n29.__)("Font Style", "elementor"))), /* @__PURE__ */ React49.createElement(import_ui36.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React49.createElement(import_editor_controls31.ToggleControl, { options: options7 }))));
|
|
1939
1939
|
|
|
1940
1940
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
1941
|
-
var
|
|
1941
|
+
var React50 = __toESM(require("react"));
|
|
1942
1942
|
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
1943
|
-
var
|
|
1943
|
+
var import_ui37 = require("@elementor/ui");
|
|
1944
1944
|
var import_i18n30 = require("@wordpress/i18n");
|
|
1945
1945
|
var fontWeightOptions = [
|
|
1946
1946
|
{ value: "100", label: (0, import_i18n30.__)("100 - Thin", "elementor") },
|
|
@@ -1954,79 +1954,79 @@ var fontWeightOptions = [
|
|
|
1954
1954
|
{ value: "900", label: (0, import_i18n30.__)("900 - Black", "elementor") }
|
|
1955
1955
|
];
|
|
1956
1956
|
var FontWeightField = () => {
|
|
1957
|
-
return /* @__PURE__ */
|
|
1957
|
+
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React50.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React50.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(import_editor_controls32.ControlLabel, null, (0, import_i18n30.__)("Font weight", "elementor"))), /* @__PURE__ */ React50.createElement(import_ui37.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React50.createElement(import_editor_controls32.SelectControl, { options: fontWeightOptions }))));
|
|
1958
1958
|
};
|
|
1959
1959
|
|
|
1960
1960
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
1961
|
-
var
|
|
1961
|
+
var React51 = __toESM(require("react"));
|
|
1962
1962
|
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
1963
|
-
var
|
|
1963
|
+
var import_ui38 = require("@elementor/ui");
|
|
1964
1964
|
var import_i18n31 = require("@wordpress/i18n");
|
|
1965
1965
|
var LetterSpacingField = () => {
|
|
1966
|
-
return /* @__PURE__ */
|
|
1966
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React51.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls33.ControlLabel, null, (0, import_i18n31.__)("Letter spacing", "elementor"))), /* @__PURE__ */ React51.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls33.SizeControl, null))));
|
|
1967
1967
|
};
|
|
1968
1968
|
|
|
1969
1969
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
1970
|
-
var
|
|
1970
|
+
var React52 = __toESM(require("react"));
|
|
1971
1971
|
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
1972
|
-
var
|
|
1972
|
+
var import_ui39 = require("@elementor/ui");
|
|
1973
1973
|
var import_i18n32 = require("@wordpress/i18n");
|
|
1974
1974
|
var LineHeightField = () => {
|
|
1975
|
-
return /* @__PURE__ */
|
|
1975
|
+
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React52.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls34.ControlLabel, null, (0, import_i18n32.__)("Line height", "elementor"))), /* @__PURE__ */ React52.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls34.SizeControl, null))));
|
|
1976
1976
|
};
|
|
1977
1977
|
|
|
1978
1978
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
1979
|
-
var
|
|
1979
|
+
var React53 = __toESM(require("react"));
|
|
1980
1980
|
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
1981
1981
|
var import_icons17 = require("@elementor/icons");
|
|
1982
|
-
var
|
|
1982
|
+
var import_ui40 = require("@elementor/ui");
|
|
1983
1983
|
var import_i18n33 = require("@wordpress/i18n");
|
|
1984
|
-
var StartIcon4 = (0,
|
|
1985
|
-
var EndIcon4 = (0,
|
|
1984
|
+
var StartIcon4 = (0, import_ui40.withDirection)(import_icons17.AlignLeftIcon);
|
|
1985
|
+
var EndIcon4 = (0, import_ui40.withDirection)(import_icons17.AlignRightIcon);
|
|
1986
1986
|
var options8 = [
|
|
1987
1987
|
{
|
|
1988
1988
|
value: "start",
|
|
1989
1989
|
label: (0, import_i18n33.__)("Start", "elementor"),
|
|
1990
|
-
renderContent: () => /* @__PURE__ */
|
|
1990
|
+
renderContent: () => /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: StartIcon4, size: "tiny" }),
|
|
1991
1991
|
showTooltip: true
|
|
1992
1992
|
},
|
|
1993
1993
|
{
|
|
1994
1994
|
value: "center",
|
|
1995
1995
|
label: (0, import_i18n33.__)("Center", "elementor"),
|
|
1996
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1996
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons17.AlignCenterIcon, { fontSize: size }),
|
|
1997
1997
|
showTooltip: true
|
|
1998
1998
|
},
|
|
1999
1999
|
{
|
|
2000
2000
|
value: "end",
|
|
2001
2001
|
label: (0, import_i18n33.__)("End", "elementor"),
|
|
2002
|
-
renderContent: () => /* @__PURE__ */
|
|
2002
|
+
renderContent: () => /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: EndIcon4, size: "tiny" }),
|
|
2003
2003
|
showTooltip: true
|
|
2004
2004
|
},
|
|
2005
2005
|
{
|
|
2006
2006
|
value: "justify",
|
|
2007
2007
|
label: (0, import_i18n33.__)("Justify", "elementor"),
|
|
2008
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2008
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons17.AlignJustifiedIcon, { fontSize: size }),
|
|
2009
2009
|
showTooltip: true
|
|
2010
2010
|
}
|
|
2011
2011
|
];
|
|
2012
2012
|
var TextAlignmentField = () => {
|
|
2013
|
-
return /* @__PURE__ */
|
|
2013
|
+
return /* @__PURE__ */ React53.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React53.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(import_editor_controls35.ControlLabel, null, (0, import_i18n33.__)("Alignment", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui40.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React53.createElement(import_editor_controls35.ToggleControl, { options: options8 }))));
|
|
2014
2014
|
};
|
|
2015
2015
|
|
|
2016
2016
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
2017
|
-
var
|
|
2017
|
+
var React54 = __toESM(require("react"));
|
|
2018
2018
|
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
2019
|
-
var
|
|
2019
|
+
var import_ui41 = require("@elementor/ui");
|
|
2020
2020
|
var import_i18n34 = require("@wordpress/i18n");
|
|
2021
2021
|
var TextColorField = () => {
|
|
2022
|
-
return /* @__PURE__ */
|
|
2022
|
+
return /* @__PURE__ */ React54.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React54.createElement(import_ui41.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(import_editor_controls36.ControlLabel, null, (0, import_i18n34.__)("Text color", "elementor"))), /* @__PURE__ */ React54.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(import_editor_controls36.ColorControl, null))));
|
|
2023
2023
|
};
|
|
2024
2024
|
|
|
2025
2025
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
2026
|
-
var
|
|
2026
|
+
var React55 = __toESM(require("react"));
|
|
2027
2027
|
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
2028
2028
|
var import_icons18 = require("@elementor/icons");
|
|
2029
|
-
var
|
|
2029
|
+
var import_ui42 = require("@elementor/ui");
|
|
2030
2030
|
var import_i18n35 = require("@wordpress/i18n");
|
|
2031
2031
|
var buttonSize = "tiny";
|
|
2032
2032
|
var TextDecorationField = () => {
|
|
@@ -2041,7 +2041,7 @@ var TextDecorationField = () => {
|
|
|
2041
2041
|
value: newValue
|
|
2042
2042
|
});
|
|
2043
2043
|
};
|
|
2044
|
-
return /* @__PURE__ */
|
|
2044
|
+
return /* @__PURE__ */ React55.createElement(import_ui42.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(import_editor_controls37.ControlLabel, null, (0, import_i18n35.__)("Style", "elementor"))), /* @__PURE__ */ React55.createElement(import_ui42.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React55.createElement(import_ui42.ToggleButtonGroup, { value: formats }, /* @__PURE__ */ React55.createElement(
|
|
2045
2045
|
ShorthandControl,
|
|
2046
2046
|
{
|
|
2047
2047
|
value: "line-through",
|
|
@@ -2049,8 +2049,8 @@ var TextDecorationField = () => {
|
|
|
2049
2049
|
updateValues: handleSetTextDecoration,
|
|
2050
2050
|
"aria-label": "line-through"
|
|
2051
2051
|
},
|
|
2052
|
-
/* @__PURE__ */
|
|
2053
|
-
), /* @__PURE__ */
|
|
2052
|
+
/* @__PURE__ */ React55.createElement(import_icons18.StrikethroughIcon, { fontSize: buttonSize })
|
|
2053
|
+
), /* @__PURE__ */ React55.createElement(
|
|
2054
2054
|
ShorthandControl,
|
|
2055
2055
|
{
|
|
2056
2056
|
value: "underline",
|
|
@@ -2058,7 +2058,7 @@ var TextDecorationField = () => {
|
|
|
2058
2058
|
updateValues: handleSetTextDecoration,
|
|
2059
2059
|
"aria-label": "underline"
|
|
2060
2060
|
},
|
|
2061
|
-
/* @__PURE__ */
|
|
2061
|
+
/* @__PURE__ */ React55.createElement(import_icons18.UnderlineIcon, { fontSize: buttonSize })
|
|
2062
2062
|
))));
|
|
2063
2063
|
};
|
|
2064
2064
|
var ShorthandControl = ({
|
|
@@ -2077,39 +2077,39 @@ var ShorthandControl = ({
|
|
|
2077
2077
|
updateValues([...valuesArr, newValue].join(" "));
|
|
2078
2078
|
}
|
|
2079
2079
|
};
|
|
2080
|
-
return /* @__PURE__ */
|
|
2080
|
+
return /* @__PURE__ */ React55.createElement(ToggleButton, { value, onChange: toggleValue, selected, "aria-label": ariaLabel }, children);
|
|
2081
2081
|
};
|
|
2082
2082
|
var ToggleButton = ({ onChange, ...props }) => {
|
|
2083
2083
|
const handleChange = (_e, newValue) => {
|
|
2084
2084
|
onChange(newValue);
|
|
2085
2085
|
};
|
|
2086
|
-
return /* @__PURE__ */
|
|
2086
|
+
return /* @__PURE__ */ React55.createElement(import_ui42.ToggleButton, { ...props, onChange: handleChange, size: buttonSize });
|
|
2087
2087
|
};
|
|
2088
2088
|
|
|
2089
2089
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
2090
|
-
var
|
|
2090
|
+
var React56 = __toESM(require("react"));
|
|
2091
2091
|
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
2092
2092
|
var import_icons19 = require("@elementor/icons");
|
|
2093
|
-
var
|
|
2093
|
+
var import_ui43 = require("@elementor/ui");
|
|
2094
2094
|
var import_i18n36 = require("@wordpress/i18n");
|
|
2095
2095
|
var options9 = [
|
|
2096
2096
|
{
|
|
2097
2097
|
value: "ltr",
|
|
2098
2098
|
label: (0, import_i18n36.__)("Left to Right", "elementor"),
|
|
2099
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2099
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons19.TextDirectionLtrIcon, { fontSize: size })
|
|
2100
2100
|
},
|
|
2101
2101
|
{
|
|
2102
2102
|
value: "rtl",
|
|
2103
2103
|
label: (0, import_i18n36.__)("Right to Left", "elementor"),
|
|
2104
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2104
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons19.TextDirectionRtlIcon, { fontSize: size })
|
|
2105
2105
|
}
|
|
2106
2106
|
];
|
|
2107
2107
|
var TextDirectionField = () => {
|
|
2108
|
-
return /* @__PURE__ */
|
|
2108
|
+
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React56.createElement(import_ui43.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(import_editor_controls38.ControlLabel, null, (0, import_i18n36.__)("Direction", "elementor"))), /* @__PURE__ */ React56.createElement(import_ui43.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React56.createElement(import_editor_controls38.ToggleControl, { options: options9 }))));
|
|
2109
2109
|
};
|
|
2110
2110
|
|
|
2111
2111
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
2112
|
-
var
|
|
2112
|
+
var React57 = __toESM(require("react"));
|
|
2113
2113
|
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
2114
2114
|
var import_i18n37 = require("@wordpress/i18n");
|
|
2115
2115
|
var initTextStroke = {
|
|
@@ -2137,7 +2137,7 @@ var TextStrokeField = () => {
|
|
|
2137
2137
|
setTextStroke(null);
|
|
2138
2138
|
};
|
|
2139
2139
|
const hasTextStroke = Boolean(textStroke);
|
|
2140
|
-
return /* @__PURE__ */
|
|
2140
|
+
return /* @__PURE__ */ React57.createElement(
|
|
2141
2141
|
AddOrRemoveContent,
|
|
2142
2142
|
{
|
|
2143
2143
|
label: (0, import_i18n37.__)("Text stroke", "elementor"),
|
|
@@ -2145,56 +2145,56 @@ var TextStrokeField = () => {
|
|
|
2145
2145
|
onAdd: addTextStroke,
|
|
2146
2146
|
onRemove: removeTextStroke
|
|
2147
2147
|
},
|
|
2148
|
-
/* @__PURE__ */
|
|
2148
|
+
/* @__PURE__ */ React57.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React57.createElement(import_editor_controls39.StrokeControl, null))
|
|
2149
2149
|
);
|
|
2150
2150
|
};
|
|
2151
2151
|
|
|
2152
2152
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
2153
|
-
var
|
|
2153
|
+
var React58 = __toESM(require("react"));
|
|
2154
2154
|
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
2155
2155
|
var import_icons20 = require("@elementor/icons");
|
|
2156
|
-
var
|
|
2156
|
+
var import_ui44 = require("@elementor/ui");
|
|
2157
2157
|
var import_i18n38 = require("@wordpress/i18n");
|
|
2158
2158
|
var options10 = [
|
|
2159
2159
|
{
|
|
2160
2160
|
value: "none",
|
|
2161
2161
|
label: (0, import_i18n38.__)("None", "elementor"),
|
|
2162
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2162
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(import_icons20.MinusIcon, { fontSize: size }),
|
|
2163
2163
|
showTooltip: true
|
|
2164
2164
|
},
|
|
2165
2165
|
{
|
|
2166
2166
|
value: "capitalize",
|
|
2167
2167
|
label: (0, import_i18n38.__)("Capitalize", "elementor"),
|
|
2168
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2168
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(import_icons20.LetterCaseIcon, { fontSize: size }),
|
|
2169
2169
|
showTooltip: true
|
|
2170
2170
|
},
|
|
2171
2171
|
{
|
|
2172
2172
|
value: "uppercase",
|
|
2173
2173
|
label: (0, import_i18n38.__)("Uppercase", "elementor"),
|
|
2174
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2174
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(import_icons20.LetterCaseUpperIcon, { fontSize: size }),
|
|
2175
2175
|
showTooltip: true
|
|
2176
2176
|
},
|
|
2177
2177
|
{
|
|
2178
2178
|
value: "lowercase",
|
|
2179
2179
|
label: (0, import_i18n38.__)("Lowercase", "elementor"),
|
|
2180
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2180
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(import_icons20.LetterCaseLowerIcon, { fontSize: size }),
|
|
2181
2181
|
showTooltip: true
|
|
2182
2182
|
}
|
|
2183
2183
|
];
|
|
2184
|
-
var TransformField = () => /* @__PURE__ */
|
|
2184
|
+
var TransformField = () => /* @__PURE__ */ React58.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React58.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(import_editor_controls40.ControlLabel, null, (0, import_i18n38.__)("Text transform", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui44.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React58.createElement(import_editor_controls40.ToggleControl, { options: options10 }))));
|
|
2185
2185
|
|
|
2186
2186
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
2187
|
-
var
|
|
2187
|
+
var React59 = __toESM(require("react"));
|
|
2188
2188
|
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
2189
|
-
var
|
|
2189
|
+
var import_ui45 = require("@elementor/ui");
|
|
2190
2190
|
var import_i18n39 = require("@wordpress/i18n");
|
|
2191
2191
|
var WordSpacingField = () => {
|
|
2192
|
-
return /* @__PURE__ */
|
|
2192
|
+
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React59.createElement(import_ui45.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(import_editor_controls41.ControlLabel, null, (0, import_i18n39.__)("Word spacing", "elementor"))), /* @__PURE__ */ React59.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(import_editor_controls41.SizeControl, null))));
|
|
2193
2193
|
};
|
|
2194
2194
|
|
|
2195
2195
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
2196
2196
|
var TypographySection = () => {
|
|
2197
|
-
return /* @__PURE__ */
|
|
2197
|
+
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))));
|
|
2198
2198
|
};
|
|
2199
2199
|
|
|
2200
2200
|
// src/components/style-tab.tsx
|
|
@@ -2204,7 +2204,7 @@ var StyleTab = () => {
|
|
|
2204
2204
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
2205
2205
|
const [activeStyleState, setActiveStyleState] = (0, import_react13.useState)(null);
|
|
2206
2206
|
const breakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
|
|
2207
|
-
return /* @__PURE__ */
|
|
2207
|
+
return /* @__PURE__ */ React61.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React61.createElement(
|
|
2208
2208
|
StyleProvider,
|
|
2209
2209
|
{
|
|
2210
2210
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -2215,7 +2215,7 @@ var StyleTab = () => {
|
|
|
2215
2215
|
},
|
|
2216
2216
|
setMetaState: setActiveStyleState
|
|
2217
2217
|
},
|
|
2218
|
-
/* @__PURE__ */
|
|
2218
|
+
/* @__PURE__ */ React61.createElement(import_session3.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React61.createElement(CssClassSelector, null), /* @__PURE__ */ React61.createElement(import_ui46.Divider, null), /* @__PURE__ */ React61.createElement(SectionsList, null, /* @__PURE__ */ React61.createElement(Section, { title: (0, import_i18n40.__)("Layout", "elementor") }, /* @__PURE__ */ React61.createElement(LayoutSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: (0, import_i18n40.__)("Spacing", "elementor") }, /* @__PURE__ */ React61.createElement(SpacingSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: (0, import_i18n40.__)("Size", "elementor") }, /* @__PURE__ */ React61.createElement(SizeSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: (0, import_i18n40.__)("Position", "elementor") }, /* @__PURE__ */ React61.createElement(PositionSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: (0, import_i18n40.__)("Typography", "elementor") }, /* @__PURE__ */ React61.createElement(TypographySection, null)), /* @__PURE__ */ React61.createElement(Section, { title: (0, import_i18n40.__)("Background", "elementor") }, /* @__PURE__ */ React61.createElement(BackgroundSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: (0, import_i18n40.__)("Border", "elementor") }, /* @__PURE__ */ React61.createElement(BorderSection, null)), /* @__PURE__ */ React61.createElement(Section, { title: (0, import_i18n40.__)("Effects", "elementor") }, /* @__PURE__ */ React61.createElement(EffectsSection, null))))
|
|
2219
2219
|
));
|
|
2220
2220
|
};
|
|
2221
2221
|
function useActiveStyleDefId(currentClassesProp) {
|
|
@@ -2243,11 +2243,11 @@ function useCurrentClassesProp() {
|
|
|
2243
2243
|
// src/components/editing-panel-tabs.tsx
|
|
2244
2244
|
var EditingPanelTabs = () => {
|
|
2245
2245
|
const { element } = useElement();
|
|
2246
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
2246
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui47.useTabs)("settings");
|
|
2247
2247
|
return (
|
|
2248
2248
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
2249
2249
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
2250
|
-
/* @__PURE__ */
|
|
2250
|
+
/* @__PURE__ */ React62.createElement(import_react14.Fragment, { key: element.id }, /* @__PURE__ */ React62.createElement(import_ui47.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React62.createElement(import_ui47.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React62.createElement(import_ui47.Tab, { label: (0, import_i18n41.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React62.createElement(import_ui47.Tab, { label: (0, import_i18n41.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React62.createElement(import_ui47.Divider, null), /* @__PURE__ */ React62.createElement(import_ui47.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React62.createElement(SettingsTab, null)), /* @__PURE__ */ React62.createElement(import_ui47.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React62.createElement(StyleTab, null))))
|
|
2251
2251
|
);
|
|
2252
2252
|
};
|
|
2253
2253
|
|
|
@@ -2261,7 +2261,7 @@ var EditingPanel = () => {
|
|
|
2261
2261
|
return null;
|
|
2262
2262
|
}
|
|
2263
2263
|
const panelTitle = (0, import_i18n42.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
2264
|
-
return /* @__PURE__ */
|
|
2264
|
+
return /* @__PURE__ */ React63.createElement(import_ui48.ErrorBoundary, { fallback: /* @__PURE__ */ React63.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React63.createElement(import_session4.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React63.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React63.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React63.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React63.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React63.createElement(import_editor_controls42.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React63.createElement(import_editor_controls42.ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React63.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React63.createElement(EditingPanelTabs, null))))))));
|
|
2265
2265
|
};
|
|
2266
2266
|
|
|
2267
2267
|
// src/panel.ts
|
|
@@ -2328,13 +2328,18 @@ var EditingPanelHooks = () => {
|
|
|
2328
2328
|
};
|
|
2329
2329
|
|
|
2330
2330
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
2331
|
-
var
|
|
2331
|
+
var React67 = __toESM(require("react"));
|
|
2332
2332
|
var import_react20 = require("react");
|
|
2333
2333
|
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
2334
2334
|
var import_icons22 = require("@elementor/icons");
|
|
2335
|
-
var
|
|
2335
|
+
var import_ui51 = require("@elementor/ui");
|
|
2336
2336
|
var import_i18n44 = require("@wordpress/i18n");
|
|
2337
2337
|
|
|
2338
|
+
// src/components/popover-content.tsx
|
|
2339
|
+
var React64 = __toESM(require("react"));
|
|
2340
|
+
var import_ui49 = require("@elementor/ui");
|
|
2341
|
+
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React64.createElement(import_ui49.Stack, { alignItems, gap, p }, children);
|
|
2342
|
+
|
|
2338
2343
|
// src/hooks/use-persist-dynamic-value.ts
|
|
2339
2344
|
var import_session5 = require("@elementor/session");
|
|
2340
2345
|
var usePersistDynamicValue = (propKey) => {
|
|
@@ -2344,7 +2349,7 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
2344
2349
|
};
|
|
2345
2350
|
|
|
2346
2351
|
// src/dynamics/dynamic-control.tsx
|
|
2347
|
-
var
|
|
2352
|
+
var React65 = __toESM(require("react"));
|
|
2348
2353
|
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
2349
2354
|
|
|
2350
2355
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
@@ -2443,15 +2448,15 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
2443
2448
|
});
|
|
2444
2449
|
};
|
|
2445
2450
|
const propType = createTopLevelOjectType({ schema: dynamicTag.props_schema });
|
|
2446
|
-
return /* @__PURE__ */
|
|
2451
|
+
return /* @__PURE__ */ React65.createElement(import_editor_controls44.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React65.createElement(import_editor_controls44.PropKeyProvider, { bind }, children));
|
|
2447
2452
|
};
|
|
2448
2453
|
|
|
2449
2454
|
// src/dynamics/components/dynamic-selection.tsx
|
|
2450
|
-
var
|
|
2455
|
+
var React66 = __toESM(require("react"));
|
|
2451
2456
|
var import_react19 = require("react");
|
|
2452
2457
|
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
2453
2458
|
var import_icons21 = require("@elementor/icons");
|
|
2454
|
-
var
|
|
2459
|
+
var import_ui50 = require("@elementor/ui");
|
|
2455
2460
|
var import_i18n43 = require("@wordpress/i18n");
|
|
2456
2461
|
var SIZE3 = "tiny";
|
|
2457
2462
|
var DynamicSelection = ({ onSelect }) => {
|
|
@@ -2472,8 +2477,8 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2472
2477
|
setValue({ name: value, settings: {} });
|
|
2473
2478
|
onSelect?.();
|
|
2474
2479
|
};
|
|
2475
|
-
return /* @__PURE__ */
|
|
2476
|
-
|
|
2480
|
+
return /* @__PURE__ */ React66.createElement(import_ui50.Stack, null, /* @__PURE__ */ React66.createElement(import_ui50.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React66.createElement(
|
|
2481
|
+
import_ui50.TextField,
|
|
2477
2482
|
{
|
|
2478
2483
|
fullWidth: true,
|
|
2479
2484
|
size: SIZE3,
|
|
@@ -2481,24 +2486,24 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2481
2486
|
onChange: handleSearch,
|
|
2482
2487
|
placeholder: (0, import_i18n43.__)("Search dynamic tag", "elementor"),
|
|
2483
2488
|
InputProps: {
|
|
2484
|
-
startAdornment: /* @__PURE__ */
|
|
2489
|
+
startAdornment: /* @__PURE__ */ React66.createElement(import_ui50.InputAdornment, { position: "start" }, /* @__PURE__ */ React66.createElement(import_icons21.SearchIcon, { fontSize: SIZE3 }))
|
|
2485
2490
|
}
|
|
2486
2491
|
}
|
|
2487
|
-
)), /* @__PURE__ */
|
|
2492
|
+
)), /* @__PURE__ */ React66.createElement(import_ui50.Divider, null), /* @__PURE__ */ React66.createElement(import_ui50.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options11.length > 0 ? /* @__PURE__ */ React66.createElement(import_ui50.MenuList, { role: "listbox", tabIndex: 0 }, options11.map(([category, items3], index) => /* @__PURE__ */ React66.createElement(import_react19.Fragment, { key: index }, /* @__PURE__ */ React66.createElement(import_ui50.ListSubheader, { sx: { px: 1.5, typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items3.map(({ value, label: tagLabel }) => {
|
|
2488
2493
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
2489
|
-
return /* @__PURE__ */
|
|
2490
|
-
|
|
2494
|
+
return /* @__PURE__ */ React66.createElement(
|
|
2495
|
+
import_ui50.MenuItem,
|
|
2491
2496
|
{
|
|
2492
2497
|
key: value,
|
|
2493
2498
|
selected: isSelected,
|
|
2494
2499
|
autoFocus: isSelected,
|
|
2495
|
-
sx: { typography: "caption" },
|
|
2500
|
+
sx: { px: 1.5, typography: "caption" },
|
|
2496
2501
|
onClick: () => handleSetDynamicTag(value)
|
|
2497
2502
|
},
|
|
2498
2503
|
tagLabel
|
|
2499
2504
|
);
|
|
2500
|
-
})))) : /* @__PURE__ */
|
|
2501
|
-
|
|
2505
|
+
})))) : /* @__PURE__ */ React66.createElement(PopoverContent, { alignItems: "center", p: 2.5 }, /* @__PURE__ */ React66.createElement(import_icons21.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React66.createElement(import_ui50.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n43.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React66.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React66.createElement(import_ui50.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React66.createElement(
|
|
2506
|
+
import_ui50.Link,
|
|
2502
2507
|
{
|
|
2503
2508
|
color: "secondary",
|
|
2504
2509
|
variant: "caption",
|
|
@@ -2532,7 +2537,7 @@ var DynamicSelectionControl = () => {
|
|
|
2532
2537
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
2533
2538
|
const { name: tagName = "" } = value;
|
|
2534
2539
|
const selectionPopoverId = (0, import_react20.useId)();
|
|
2535
|
-
const selectionPopoverState = (0,
|
|
2540
|
+
const selectionPopoverState = (0, import_ui51.usePopupState)({ variant: "popover", popupId: selectionPopoverId });
|
|
2536
2541
|
const dynamicTag = useDynamicTag(tagName);
|
|
2537
2542
|
const removeDynamicTag = () => {
|
|
2538
2543
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -2540,70 +2545,70 @@ var DynamicSelectionControl = () => {
|
|
|
2540
2545
|
if (!dynamicTag) {
|
|
2541
2546
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
2542
2547
|
}
|
|
2543
|
-
return /* @__PURE__ */
|
|
2544
|
-
|
|
2548
|
+
return /* @__PURE__ */ React67.createElement(import_ui51.Box, null, /* @__PURE__ */ React67.createElement(
|
|
2549
|
+
import_ui51.UnstableTag,
|
|
2545
2550
|
{
|
|
2546
2551
|
fullWidth: true,
|
|
2547
2552
|
showActionsOnHover: true,
|
|
2548
2553
|
label: dynamicTag.label,
|
|
2549
|
-
startIcon: /* @__PURE__ */
|
|
2550
|
-
...(0,
|
|
2551
|
-
actions: /* @__PURE__ */
|
|
2552
|
-
|
|
2554
|
+
startIcon: /* @__PURE__ */ React67.createElement(import_icons22.DatabaseIcon, { fontSize: SIZE4 }),
|
|
2555
|
+
...(0, import_ui51.bindTrigger)(selectionPopoverState),
|
|
2556
|
+
actions: /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React67.createElement(
|
|
2557
|
+
import_ui51.IconButton,
|
|
2553
2558
|
{
|
|
2554
2559
|
size: SIZE4,
|
|
2555
2560
|
onClick: removeDynamicTag,
|
|
2556
2561
|
"aria-label": (0, import_i18n44.__)("Remove dynamic value", "elementor")
|
|
2557
2562
|
},
|
|
2558
|
-
/* @__PURE__ */
|
|
2563
|
+
/* @__PURE__ */ React67.createElement(import_icons22.XIcon, { fontSize: SIZE4 })
|
|
2559
2564
|
))
|
|
2560
2565
|
}
|
|
2561
|
-
), /* @__PURE__ */
|
|
2562
|
-
|
|
2566
|
+
), /* @__PURE__ */ React67.createElement(
|
|
2567
|
+
import_ui51.Popover,
|
|
2563
2568
|
{
|
|
2564
2569
|
disablePortal: true,
|
|
2565
2570
|
disableScrollLock: true,
|
|
2566
2571
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
2567
|
-
...(0,
|
|
2572
|
+
...(0, import_ui51.bindPopover)(selectionPopoverState)
|
|
2568
2573
|
},
|
|
2569
|
-
/* @__PURE__ */
|
|
2574
|
+
/* @__PURE__ */ React67.createElement(import_ui51.Stack, null, /* @__PURE__ */ React67.createElement(import_ui51.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React67.createElement(import_icons22.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(import_ui51.Typography, { variant: "subtitle2" }, (0, import_i18n44.__)("Dynamic Tags", "elementor")), /* @__PURE__ */ React67.createElement(import_ui51.IconButton, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React67.createElement(import_icons22.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
2570
2575
|
));
|
|
2571
2576
|
};
|
|
2572
2577
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
2573
2578
|
const popupId = (0, import_react20.useId)();
|
|
2574
|
-
const settingsPopupState = (0,
|
|
2579
|
+
const settingsPopupState = (0, import_ui51.usePopupState)({ variant: "popover", popupId });
|
|
2575
2580
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
2576
2581
|
if (!hasDynamicSettings) {
|
|
2577
2582
|
return null;
|
|
2578
2583
|
}
|
|
2579
|
-
return /* @__PURE__ */
|
|
2580
|
-
|
|
2584
|
+
return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(
|
|
2585
|
+
import_ui51.IconButton,
|
|
2581
2586
|
{
|
|
2582
2587
|
size: SIZE4,
|
|
2583
|
-
...(0,
|
|
2588
|
+
...(0, import_ui51.bindTrigger)(settingsPopupState),
|
|
2584
2589
|
"aria-label": (0, import_i18n44.__)("Settings", "elementor")
|
|
2585
2590
|
},
|
|
2586
|
-
/* @__PURE__ */
|
|
2587
|
-
), /* @__PURE__ */
|
|
2588
|
-
|
|
2591
|
+
/* @__PURE__ */ React67.createElement(import_icons22.SettingsIcon, { fontSize: SIZE4 })
|
|
2592
|
+
), /* @__PURE__ */ React67.createElement(
|
|
2593
|
+
import_ui51.Popover,
|
|
2589
2594
|
{
|
|
2590
2595
|
disableScrollLock: true,
|
|
2591
2596
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
2592
|
-
...(0,
|
|
2597
|
+
...(0, import_ui51.bindPopover)(settingsPopupState)
|
|
2593
2598
|
},
|
|
2594
|
-
/* @__PURE__ */
|
|
2599
|
+
/* @__PURE__ */ React67.createElement(import_ui51.Paper, { component: import_ui51.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React67.createElement(import_ui51.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React67.createElement(import_icons22.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(import_ui51.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React67.createElement(import_ui51.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React67.createElement(import_icons22.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
2595
2600
|
));
|
|
2596
2601
|
};
|
|
2597
2602
|
var DynamicSettings = ({ controls }) => {
|
|
2598
2603
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
2599
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
2604
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui51.useTabs)(0);
|
|
2600
2605
|
if (!tabs.length) {
|
|
2601
2606
|
return null;
|
|
2602
2607
|
}
|
|
2603
|
-
return /* @__PURE__ */
|
|
2604
|
-
return /* @__PURE__ */
|
|
2608
|
+
return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(import_ui51.Tabs, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React67.createElement(import_ui51.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React67.createElement(import_ui51.Divider, null), tabs.map(({ value }, index) => {
|
|
2609
|
+
return /* @__PURE__ */ React67.createElement(import_ui51.TabPanel, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React67.createElement(PopoverContent, { p: 1.5 }, value.items.map((item) => {
|
|
2605
2610
|
if (item.type === "control") {
|
|
2606
|
-
return /* @__PURE__ */
|
|
2611
|
+
return /* @__PURE__ */ React67.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
2607
2612
|
}
|
|
2608
2613
|
return null;
|
|
2609
2614
|
})));
|
|
@@ -2613,11 +2618,11 @@ var Control3 = ({ control }) => {
|
|
|
2613
2618
|
if (!getControlByType(control.type)) {
|
|
2614
2619
|
return null;
|
|
2615
2620
|
}
|
|
2616
|
-
return /* @__PURE__ */
|
|
2621
|
+
return /* @__PURE__ */ React67.createElement(DynamicControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React67.createElement(import_editor_controls46.ControlLabel, null, control.label) : null, /* @__PURE__ */ React67.createElement(Control, { type: control.type, props: control.props }));
|
|
2617
2622
|
};
|
|
2618
2623
|
|
|
2619
2624
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
2620
|
-
var
|
|
2625
|
+
var React68 = __toESM(require("react"));
|
|
2621
2626
|
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
2622
2627
|
var import_icons23 = require("@elementor/icons");
|
|
2623
2628
|
var import_i18n45 = require("@wordpress/i18n");
|
|
@@ -2628,7 +2633,7 @@ var usePropDynamicAction = () => {
|
|
|
2628
2633
|
visible,
|
|
2629
2634
|
icon: import_icons23.DatabaseIcon,
|
|
2630
2635
|
title: (0, import_i18n45.__)("Dynamic Tags", "elementor"),
|
|
2631
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
2636
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React68.createElement(DynamicSelection, { onSelect: closePopover })
|
|
2632
2637
|
};
|
|
2633
2638
|
};
|
|
2634
2639
|
|