@elementor/editor-editing-panel 1.16.0 → 1.17.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 +43 -0
- package/dist/index.js +286 -226
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +184 -124
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -12
- package/src/components/editing-panel.tsx +2 -0
- package/src/components/style-sections/border-section/border-radius-field.tsx +1 -0
- package/src/components/style-sections/border-section/border-width-field.tsx +19 -10
- package/src/components/style-sections/position-section/dimensions-field.tsx +23 -11
- package/src/components/style-sections/position-section/position-section.tsx +12 -12
- package/src/components/style-sections/spacing-section/spacing-section.tsx +9 -2
- package/src/components/style-sections/typography-section/font-family-field.tsx +34 -2
- package/src/components/style-sections/typography-section/text-direction-field.tsx +4 -2
- package/src/dynamics/components/dynamic-selection.tsx +18 -11
package/dist/index.js
CHANGED
|
@@ -626,8 +626,9 @@ 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
|
+
var import_icons21 = require("@elementor/icons");
|
|
629
630
|
var import_session4 = require("@elementor/session");
|
|
630
|
-
var
|
|
631
|
+
var import_ui49 = require("@elementor/ui");
|
|
631
632
|
var import_i18n42 = require("@wordpress/i18n");
|
|
632
633
|
|
|
633
634
|
// src/controls-actions.ts
|
|
@@ -685,8 +686,8 @@ function EditorPanelErrorFallback() {
|
|
|
685
686
|
|
|
686
687
|
// src/components/editing-panel-tabs.tsx
|
|
687
688
|
var React62 = __toESM(require("react"));
|
|
688
|
-
var
|
|
689
|
-
var
|
|
689
|
+
var import_react15 = require("react");
|
|
690
|
+
var import_ui48 = require("@elementor/ui");
|
|
690
691
|
var import_i18n41 = require("@wordpress/i18n");
|
|
691
692
|
|
|
692
693
|
// src/components/settings-tab.tsx
|
|
@@ -850,11 +851,11 @@ var Control2 = ({ control }) => {
|
|
|
850
851
|
|
|
851
852
|
// src/components/style-tab.tsx
|
|
852
853
|
var React61 = __toESM(require("react"));
|
|
853
|
-
var
|
|
854
|
+
var import_react14 = require("react");
|
|
854
855
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
855
856
|
var import_editor_responsive = require("@elementor/editor-responsive");
|
|
856
857
|
var import_session3 = require("@elementor/session");
|
|
857
|
-
var
|
|
858
|
+
var import_ui47 = require("@elementor/ui");
|
|
858
859
|
var import_i18n40 = require("@wordpress/i18n");
|
|
859
860
|
|
|
860
861
|
// src/components/style-sections/background-section/background-section.tsx
|
|
@@ -1034,7 +1035,7 @@ var import_ui12 = require("@elementor/ui");
|
|
|
1034
1035
|
var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React19.createElement(import_ui12.Stack, { gap, sx: { ...sx } }, children);
|
|
1035
1036
|
|
|
1036
1037
|
// src/components/style-sections/border-section/border-field.tsx
|
|
1037
|
-
var
|
|
1038
|
+
var React25 = __toESM(require("react"));
|
|
1038
1039
|
var import_i18n8 = require("@wordpress/i18n");
|
|
1039
1040
|
|
|
1040
1041
|
// src/components/add-or-remove-content.tsx
|
|
@@ -1088,40 +1089,88 @@ var BorderStyleField = () => {
|
|
|
1088
1089
|
};
|
|
1089
1090
|
|
|
1090
1091
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
1091
|
-
var
|
|
1092
|
+
var React24 = __toESM(require("react"));
|
|
1092
1093
|
var import_editor_controls10 = require("@elementor/editor-controls");
|
|
1093
1094
|
var import_editor_props2 = require("@elementor/editor-props");
|
|
1094
1095
|
var import_icons5 = require("@elementor/icons");
|
|
1096
|
+
var import_ui18 = require("@elementor/ui");
|
|
1095
1097
|
var import_i18n7 = require("@wordpress/i18n");
|
|
1096
|
-
|
|
1098
|
+
|
|
1099
|
+
// src/hooks/use-direction.ts
|
|
1100
|
+
var import_ui16 = require("@elementor/ui");
|
|
1101
|
+
function useDirection() {
|
|
1102
|
+
const theme = (0, import_ui16.useTheme)(), extendedWindow = window;
|
|
1103
|
+
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
1104
|
+
return { isSiteRtl, isUiRtl };
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
1108
|
+
var React23 = __toESM(require("react"));
|
|
1109
|
+
var import_react9 = require("react");
|
|
1110
|
+
var import_ui17 = require("@elementor/ui");
|
|
1111
|
+
var CLOCKWISE_ANGLES = {
|
|
1112
|
+
row: 0,
|
|
1113
|
+
column: 90,
|
|
1114
|
+
"row-reverse": 180,
|
|
1115
|
+
"column-reverse": 270
|
|
1116
|
+
};
|
|
1117
|
+
var COUNTER_CLOCKWISE_ANGLES = {
|
|
1118
|
+
row: 0,
|
|
1119
|
+
column: -90,
|
|
1120
|
+
"row-reverse": -180,
|
|
1121
|
+
"column-reverse": -270
|
|
1122
|
+
};
|
|
1123
|
+
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
1124
|
+
const rotate = (0, import_react9.useRef)(useGetTargetAngle(isClockwise, offset));
|
|
1125
|
+
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
1126
|
+
return /* @__PURE__ */ React23.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
1127
|
+
};
|
|
1128
|
+
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
1129
|
+
const [direction] = useStylesField("flex-direction");
|
|
1130
|
+
const isRtl = "rtl" === (0, import_ui17.useTheme)().direction;
|
|
1131
|
+
const rotationMultiplier = isRtl ? -1 : 1;
|
|
1132
|
+
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
1133
|
+
const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
|
|
1134
|
+
const targetAngle = angleMap[direction?.value || "row"] + offset;
|
|
1135
|
+
const diffToTargetAngle = (targetAngle - currentAngle + 360) % 360;
|
|
1136
|
+
const formattedDiff = (diffToTargetAngle + 180) % 360 - 180;
|
|
1137
|
+
return (currentAngle + formattedDiff) * rotationMultiplier;
|
|
1138
|
+
};
|
|
1139
|
+
|
|
1140
|
+
// src/components/style-sections/border-section/border-width-field.tsx
|
|
1141
|
+
var InlineStartIcon = (0, import_ui18.withDirection)(import_icons5.SideRightIcon);
|
|
1142
|
+
var InlineEndIcon = (0, import_ui18.withDirection)(import_icons5.SideLeftIcon);
|
|
1143
|
+
var getEdges = (isSiteRtl) => [
|
|
1097
1144
|
{
|
|
1098
1145
|
label: (0, import_i18n7.__)("Top", "elementor"),
|
|
1099
|
-
icon: /* @__PURE__ */
|
|
1100
|
-
bind: "
|
|
1146
|
+
icon: /* @__PURE__ */ React24.createElement(import_icons5.SideTopIcon, { fontSize: "tiny" }),
|
|
1147
|
+
bind: "block-start"
|
|
1101
1148
|
},
|
|
1102
1149
|
{
|
|
1103
|
-
label: (0, import_i18n7.__)("Right", "elementor"),
|
|
1104
|
-
icon: /* @__PURE__ */
|
|
1105
|
-
bind: "
|
|
1150
|
+
label: isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor"),
|
|
1151
|
+
icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: InlineStartIcon, size: "tiny" }),
|
|
1152
|
+
bind: "inline-end"
|
|
1106
1153
|
},
|
|
1107
1154
|
{
|
|
1108
1155
|
label: (0, import_i18n7.__)("Bottom", "elementor"),
|
|
1109
|
-
icon: /* @__PURE__ */
|
|
1110
|
-
bind: "
|
|
1156
|
+
icon: /* @__PURE__ */ React24.createElement(import_icons5.SideBottomIcon, { fontSize: "tiny" }),
|
|
1157
|
+
bind: "block-end"
|
|
1111
1158
|
},
|
|
1112
1159
|
{
|
|
1113
|
-
label: (0, import_i18n7.__)("Left", "elementor"),
|
|
1114
|
-
icon: /* @__PURE__ */
|
|
1115
|
-
bind: "
|
|
1160
|
+
label: isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor"),
|
|
1161
|
+
icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: InlineEndIcon, size: "tiny" }),
|
|
1162
|
+
bind: "inline-start"
|
|
1116
1163
|
}
|
|
1117
1164
|
];
|
|
1118
1165
|
var BorderWidthField = () => {
|
|
1119
|
-
|
|
1166
|
+
const { isSiteRtl } = useDirection();
|
|
1167
|
+
return /* @__PURE__ */ React24.createElement(StylesField, { bind: "border-width" }, /* @__PURE__ */ React24.createElement(
|
|
1120
1168
|
import_editor_controls10.EqualUnequalSizesControl,
|
|
1121
1169
|
{
|
|
1122
|
-
items:
|
|
1170
|
+
items: getEdges(isSiteRtl),
|
|
1123
1171
|
label: (0, import_i18n7.__)("Border width", "elementor"),
|
|
1124
|
-
icon: /* @__PURE__ */
|
|
1172
|
+
icon: /* @__PURE__ */ React24.createElement(import_icons5.SideAllIcon, { fontSize: "tiny" }),
|
|
1173
|
+
tooltipLabel: (0, import_i18n7.__)("Adjust borders", "elementor"),
|
|
1125
1174
|
multiSizePropTypeUtil: import_editor_props2.borderWidthPropTypeUtil
|
|
1126
1175
|
}
|
|
1127
1176
|
));
|
|
@@ -1146,7 +1195,7 @@ var BorderField = () => {
|
|
|
1146
1195
|
});
|
|
1147
1196
|
};
|
|
1148
1197
|
const hasBorder = Object.values(border ?? {}).some(Boolean);
|
|
1149
|
-
return /* @__PURE__ */
|
|
1198
|
+
return /* @__PURE__ */ React25.createElement(
|
|
1150
1199
|
AddOrRemoveContent,
|
|
1151
1200
|
{
|
|
1152
1201
|
label: (0, import_i18n8.__)("Border", "elementor"),
|
|
@@ -1154,9 +1203,9 @@ var BorderField = () => {
|
|
|
1154
1203
|
onAdd: addBorder,
|
|
1155
1204
|
onRemove: removeBorder
|
|
1156
1205
|
},
|
|
1157
|
-
/* @__PURE__ */
|
|
1158
|
-
/* @__PURE__ */
|
|
1159
|
-
/* @__PURE__ */
|
|
1206
|
+
/* @__PURE__ */ React25.createElement(BorderWidthField, null),
|
|
1207
|
+
/* @__PURE__ */ React25.createElement(BorderColorField, null),
|
|
1208
|
+
/* @__PURE__ */ React25.createElement(BorderStyleField, null)
|
|
1160
1209
|
);
|
|
1161
1210
|
};
|
|
1162
1211
|
|
|
@@ -1165,55 +1214,12 @@ var React26 = __toESM(require("react"));
|
|
|
1165
1214
|
var import_editor_controls11 = require("@elementor/editor-controls");
|
|
1166
1215
|
var import_editor_props3 = require("@elementor/editor-props");
|
|
1167
1216
|
var import_icons6 = require("@elementor/icons");
|
|
1168
|
-
var
|
|
1217
|
+
var import_ui19 = require("@elementor/ui");
|
|
1169
1218
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
var
|
|
1173
|
-
|
|
1174
|
-
const theme = (0, import_ui16.useTheme)(), extendedWindow = window;
|
|
1175
|
-
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
1176
|
-
return { isSiteRtl, isUiRtl };
|
|
1177
|
-
}
|
|
1178
|
-
|
|
1179
|
-
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
1180
|
-
var React25 = __toESM(require("react"));
|
|
1181
|
-
var import_react9 = require("react");
|
|
1182
|
-
var import_ui17 = require("@elementor/ui");
|
|
1183
|
-
var CLOCKWISE_ANGLES = {
|
|
1184
|
-
row: 0,
|
|
1185
|
-
column: 90,
|
|
1186
|
-
"row-reverse": 180,
|
|
1187
|
-
"column-reverse": 270
|
|
1188
|
-
};
|
|
1189
|
-
var COUNTER_CLOCKWISE_ANGLES = {
|
|
1190
|
-
row: 0,
|
|
1191
|
-
column: -90,
|
|
1192
|
-
"row-reverse": -180,
|
|
1193
|
-
"column-reverse": -270
|
|
1194
|
-
};
|
|
1195
|
-
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
1196
|
-
const rotate = (0, import_react9.useRef)(useGetTargetAngle(isClockwise, offset));
|
|
1197
|
-
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
1198
|
-
return /* @__PURE__ */ React25.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
1199
|
-
};
|
|
1200
|
-
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
1201
|
-
const [direction] = useStylesField("flex-direction");
|
|
1202
|
-
const isRtl = "rtl" === (0, import_ui17.useTheme)().direction;
|
|
1203
|
-
const rotationMultiplier = isRtl ? -1 : 1;
|
|
1204
|
-
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
1205
|
-
const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
|
|
1206
|
-
const targetAngle = angleMap[direction?.value || "row"] + offset;
|
|
1207
|
-
const diffToTargetAngle = (targetAngle - currentAngle + 360) % 360;
|
|
1208
|
-
const formattedDiff = (diffToTargetAngle + 180) % 360 - 180;
|
|
1209
|
-
return (currentAngle + formattedDiff) * rotationMultiplier;
|
|
1210
|
-
};
|
|
1211
|
-
|
|
1212
|
-
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
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);
|
|
1219
|
+
var StartStartIcon = (0, import_ui19.withDirection)(import_icons6.RadiusTopLeftIcon);
|
|
1220
|
+
var StartEndIcon = (0, import_ui19.withDirection)(import_icons6.RadiusTopRightIcon);
|
|
1221
|
+
var EndStartIcon = (0, import_ui19.withDirection)(import_icons6.RadiusBottomLeftIcon);
|
|
1222
|
+
var EndEndIcon = (0, import_ui19.withDirection)(import_icons6.RadiusBottomRightIcon);
|
|
1217
1223
|
var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Top right", "elementor") : (0, import_i18n9.__)("Top left", "elementor");
|
|
1218
1224
|
var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Top left", "elementor") : (0, import_i18n9.__)("Top right", "elementor");
|
|
1219
1225
|
var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Bottom right", "elementor") : (0, import_i18n9.__)("Bottom left", "elementor");
|
|
@@ -1248,6 +1254,7 @@ var BorderRadiusField = () => {
|
|
|
1248
1254
|
items: getCorners(isSiteRtl),
|
|
1249
1255
|
label: (0, import_i18n9.__)("Border radius", "elementor"),
|
|
1250
1256
|
icon: /* @__PURE__ */ React26.createElement(import_icons6.BorderCornersIcon, { fontSize: "tiny" }),
|
|
1257
|
+
tooltipLabel: (0, import_i18n9.__)("Adjust corners", "elementor"),
|
|
1251
1258
|
multiSizePropTypeUtil: import_editor_props3.borderRadiusPropTypeUtil
|
|
1252
1259
|
}
|
|
1253
1260
|
));
|
|
@@ -1298,10 +1305,10 @@ function useComputedStyle(elementId) {
|
|
|
1298
1305
|
var React29 = __toESM(require("react"));
|
|
1299
1306
|
var import_editor_controls13 = require("@elementor/editor-controls");
|
|
1300
1307
|
var import_icons7 = require("@elementor/icons");
|
|
1301
|
-
var
|
|
1308
|
+
var import_ui20 = require("@elementor/ui");
|
|
1302
1309
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1303
|
-
var StartIcon = (0,
|
|
1304
|
-
var EndIcon = (0,
|
|
1310
|
+
var StartIcon = (0, import_ui20.withDirection)(import_icons7.LayoutAlignLeftIcon);
|
|
1311
|
+
var EndIcon = (0, import_ui20.withDirection)(import_icons7.LayoutAlignRightIcon);
|
|
1305
1312
|
var iconProps = {
|
|
1306
1313
|
isClockwise: false,
|
|
1307
1314
|
offset: 90
|
|
@@ -1334,17 +1341,17 @@ var options = [
|
|
|
1334
1341
|
];
|
|
1335
1342
|
var AlignItemsField = () => {
|
|
1336
1343
|
const { isSiteRtl } = useDirection();
|
|
1337
|
-
return /* @__PURE__ */ React29.createElement(
|
|
1344
|
+
return /* @__PURE__ */ React29.createElement(import_ui20.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React29.createElement(import_ui20.ThemeProvider, null, /* @__PURE__ */ React29.createElement(StylesField, { bind: "align-items" }, /* @__PURE__ */ React29.createElement(import_ui20.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React29.createElement(import_ui20.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(import_editor_controls13.ControlLabel, null, (0, import_i18n10.__)("Align items", "elementor"))), /* @__PURE__ */ React29.createElement(import_ui20.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React29.createElement(import_editor_controls13.ToggleControl, { options }))))));
|
|
1338
1345
|
};
|
|
1339
1346
|
|
|
1340
1347
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
1341
1348
|
var React30 = __toESM(require("react"));
|
|
1342
1349
|
var import_editor_controls14 = require("@elementor/editor-controls");
|
|
1343
1350
|
var import_icons8 = require("@elementor/icons");
|
|
1344
|
-
var
|
|
1351
|
+
var import_ui21 = require("@elementor/ui");
|
|
1345
1352
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1346
|
-
var StartIcon2 = (0,
|
|
1347
|
-
var EndIcon2 = (0,
|
|
1353
|
+
var StartIcon2 = (0, import_ui21.withDirection)(import_icons8.LayoutAlignLeftIcon);
|
|
1354
|
+
var EndIcon2 = (0, import_ui21.withDirection)(import_icons8.LayoutAlignRightIcon);
|
|
1348
1355
|
var iconProps2 = {
|
|
1349
1356
|
isClockwise: false,
|
|
1350
1357
|
offset: 90
|
|
@@ -1377,13 +1384,13 @@ var options2 = [
|
|
|
1377
1384
|
];
|
|
1378
1385
|
var AlignSelfChild = () => {
|
|
1379
1386
|
const { isSiteRtl } = useDirection();
|
|
1380
|
-
return /* @__PURE__ */ React30.createElement(
|
|
1387
|
+
return /* @__PURE__ */ React30.createElement(import_ui21.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React30.createElement(import_ui21.ThemeProvider, null, /* @__PURE__ */ React30.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React30.createElement(import_ui21.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(import_editor_controls14.ControlLabel, null, (0, import_i18n11.__)("Align self", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui21.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React30.createElement(import_editor_controls14.ToggleControl, { options: options2 }))))));
|
|
1381
1388
|
};
|
|
1382
1389
|
|
|
1383
1390
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
1384
1391
|
var React31 = __toESM(require("react"));
|
|
1385
1392
|
var import_editor_controls15 = require("@elementor/editor-controls");
|
|
1386
|
-
var
|
|
1393
|
+
var import_ui22 = require("@elementor/ui");
|
|
1387
1394
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1388
1395
|
var DisplayField = () => {
|
|
1389
1396
|
const options11 = [
|
|
@@ -1412,21 +1419,21 @@ var DisplayField = () => {
|
|
|
1412
1419
|
showTooltip: true
|
|
1413
1420
|
}
|
|
1414
1421
|
];
|
|
1415
|
-
return /* @__PURE__ */ React31.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React31.createElement(
|
|
1422
|
+
return /* @__PURE__ */ React31.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React31.createElement(import_ui22.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 })));
|
|
1416
1423
|
};
|
|
1417
1424
|
|
|
1418
1425
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
1419
1426
|
var React32 = __toESM(require("react"));
|
|
1420
1427
|
var import_editor_controls16 = require("@elementor/editor-controls");
|
|
1421
1428
|
var import_icons9 = require("@elementor/icons");
|
|
1422
|
-
var
|
|
1429
|
+
var import_ui23 = require("@elementor/ui");
|
|
1423
1430
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1424
1431
|
var options3 = [
|
|
1425
1432
|
{
|
|
1426
1433
|
value: "row",
|
|
1427
1434
|
label: (0, import_i18n13.__)("Row", "elementor"),
|
|
1428
1435
|
renderContent: ({ size }) => {
|
|
1429
|
-
const StartIcon5 = (0,
|
|
1436
|
+
const StartIcon5 = (0, import_ui23.withDirection)(import_icons9.ArrowRightIcon);
|
|
1430
1437
|
return /* @__PURE__ */ React32.createElement(StartIcon5, { fontSize: size });
|
|
1431
1438
|
},
|
|
1432
1439
|
showTooltip: true
|
|
@@ -1441,7 +1448,7 @@ var options3 = [
|
|
|
1441
1448
|
value: "row-reverse",
|
|
1442
1449
|
label: (0, import_i18n13.__)("Reversed row", "elementor"),
|
|
1443
1450
|
renderContent: ({ size }) => {
|
|
1444
|
-
const EndIcon5 = (0,
|
|
1451
|
+
const EndIcon5 = (0, import_ui23.withDirection)(import_icons9.ArrowLeftIcon);
|
|
1445
1452
|
return /* @__PURE__ */ React32.createElement(EndIcon5, { fontSize: size });
|
|
1446
1453
|
},
|
|
1447
1454
|
showTooltip: true
|
|
@@ -1455,7 +1462,7 @@ var options3 = [
|
|
|
1455
1462
|
];
|
|
1456
1463
|
var FlexDirectionField = () => {
|
|
1457
1464
|
const { isSiteRtl } = useDirection();
|
|
1458
|
-
return /* @__PURE__ */ React32.createElement(
|
|
1465
|
+
return /* @__PURE__ */ React32.createElement(import_ui23.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React32.createElement(import_ui23.ThemeProvider, null, /* @__PURE__ */ React32.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React32.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(import_editor_controls16.ControlLabel, null, (0, import_i18n13.__)("Direction", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui23.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(import_editor_controls16.ToggleControl, { options: options3 }))))));
|
|
1459
1466
|
};
|
|
1460
1467
|
|
|
1461
1468
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
@@ -1463,7 +1470,7 @@ var React33 = __toESM(require("react"));
|
|
|
1463
1470
|
var import_react10 = require("react");
|
|
1464
1471
|
var import_editor_controls17 = require("@elementor/editor-controls");
|
|
1465
1472
|
var import_icons10 = require("@elementor/icons");
|
|
1466
|
-
var
|
|
1473
|
+
var import_ui24 = require("@elementor/ui");
|
|
1467
1474
|
var import_i18n14 = require("@wordpress/i18n");
|
|
1468
1475
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
1469
1476
|
var LAST_DEFAULT_VALUE = 99999;
|
|
@@ -1505,7 +1512,7 @@ var FlexOrderField = () => {
|
|
|
1505
1512
|
}
|
|
1506
1513
|
setOrder({ $$type: "number", value: orderValueMap[group] });
|
|
1507
1514
|
};
|
|
1508
|
-
return /* @__PURE__ */ React33.createElement(
|
|
1515
|
+
return /* @__PURE__ */ React33.createElement(import_ui24.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React33.createElement(import_ui24.ThemeProvider, null, /* @__PURE__ */ React33.createElement(SectionContent, null, /* @__PURE__ */ React33.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(import_editor_controls17.ControlLabel, null, (0, import_i18n14.__)("Order", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(
|
|
1509
1516
|
import_editor_controls17.ControlToggleButtonGroup,
|
|
1510
1517
|
{
|
|
1511
1518
|
items,
|
|
@@ -1513,7 +1520,7 @@ var FlexOrderField = () => {
|
|
|
1513
1520
|
onChange: handleToggleButtonChange,
|
|
1514
1521
|
exclusive: true
|
|
1515
1522
|
}
|
|
1516
|
-
))), CUSTOM === groupControlValue && /* @__PURE__ */ React33.createElement(StylesField, { bind: "order" }, /* @__PURE__ */ React33.createElement(
|
|
1523
|
+
))), CUSTOM === groupControlValue && /* @__PURE__ */ React33.createElement(StylesField, { bind: "order" }, /* @__PURE__ */ React33.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(import_editor_controls17.ControlLabel, null, (0, import_i18n14.__)("Custom order", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(
|
|
1517
1524
|
import_editor_controls17.NumberControl,
|
|
1518
1525
|
{
|
|
1519
1526
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -1537,7 +1544,7 @@ var React34 = __toESM(require("react"));
|
|
|
1537
1544
|
var import_react11 = require("react");
|
|
1538
1545
|
var import_editor_controls18 = require("@elementor/editor-controls");
|
|
1539
1546
|
var import_icons11 = require("@elementor/icons");
|
|
1540
|
-
var
|
|
1547
|
+
var import_ui25 = require("@elementor/ui");
|
|
1541
1548
|
var import_i18n15 = require("@wordpress/i18n");
|
|
1542
1549
|
var DEFAULT = 1;
|
|
1543
1550
|
var items2 = [
|
|
@@ -1580,7 +1587,7 @@ var FlexSizeField = () => {
|
|
|
1580
1587
|
setGrowField(null);
|
|
1581
1588
|
setShrinkField({ $$type: "number", value: DEFAULT });
|
|
1582
1589
|
};
|
|
1583
|
-
return /* @__PURE__ */ React34.createElement(
|
|
1590
|
+
return /* @__PURE__ */ React34.createElement(import_ui25.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React34.createElement(import_ui25.ThemeProvider, null, /* @__PURE__ */ React34.createElement(SectionContent, null, /* @__PURE__ */ React34.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Size", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui25.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(
|
|
1584
1591
|
import_editor_controls18.ControlToggleButtonGroup,
|
|
1585
1592
|
{
|
|
1586
1593
|
value: activeGroup,
|
|
@@ -1590,7 +1597,7 @@ var FlexSizeField = () => {
|
|
|
1590
1597
|
}
|
|
1591
1598
|
))), "custom" === activeGroup && /* @__PURE__ */ React34.createElement(FlexCustomField, null))));
|
|
1592
1599
|
};
|
|
1593
|
-
var FlexCustomField = () => /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React34.createElement(
|
|
1600
|
+
var FlexCustomField = () => /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React34.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Grow", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui25.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_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Shrink", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui25.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_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Basis", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui25.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React34.createElement(import_editor_controls18.SizeControl, { extendedValues: ["auto"] })))));
|
|
1594
1601
|
var getActiveGroup = ({
|
|
1595
1602
|
grow,
|
|
1596
1603
|
shrink,
|
|
@@ -1614,20 +1621,20 @@ var getActiveGroup = ({
|
|
|
1614
1621
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
1615
1622
|
var React35 = __toESM(require("react"));
|
|
1616
1623
|
var import_editor_controls19 = require("@elementor/editor-controls");
|
|
1617
|
-
var
|
|
1624
|
+
var import_ui26 = require("@elementor/ui");
|
|
1618
1625
|
var import_i18n16 = require("@wordpress/i18n");
|
|
1619
1626
|
var GapControlField = () => {
|
|
1620
|
-
return /* @__PURE__ */ React35.createElement(
|
|
1627
|
+
return /* @__PURE__ */ React35.createElement(import_ui26.Stack, { gap: 1 }, /* @__PURE__ */ React35.createElement(StylesField, { bind: "gap" }, /* @__PURE__ */ React35.createElement(import_editor_controls19.GapControl, { label: (0, import_i18n16.__)("Gaps", "elementor") })));
|
|
1621
1628
|
};
|
|
1622
1629
|
|
|
1623
1630
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
1624
1631
|
var React36 = __toESM(require("react"));
|
|
1625
1632
|
var import_editor_controls20 = require("@elementor/editor-controls");
|
|
1626
1633
|
var import_icons12 = require("@elementor/icons");
|
|
1627
|
-
var
|
|
1634
|
+
var import_ui27 = require("@elementor/ui");
|
|
1628
1635
|
var import_i18n17 = require("@wordpress/i18n");
|
|
1629
|
-
var StartIcon3 = (0,
|
|
1630
|
-
var EndIcon3 = (0,
|
|
1636
|
+
var StartIcon3 = (0, import_ui27.withDirection)(import_icons12.JustifyTopIcon);
|
|
1637
|
+
var EndIcon3 = (0, import_ui27.withDirection)(import_icons12.JustifyBottomIcon);
|
|
1631
1638
|
var iconProps3 = {
|
|
1632
1639
|
isClockwise: true,
|
|
1633
1640
|
offset: -90
|
|
@@ -1672,14 +1679,14 @@ var options4 = [
|
|
|
1672
1679
|
];
|
|
1673
1680
|
var JustifyContentField = () => {
|
|
1674
1681
|
const { isSiteRtl } = useDirection();
|
|
1675
|
-
return /* @__PURE__ */ React36.createElement(
|
|
1682
|
+
return /* @__PURE__ */ React36.createElement(import_ui27.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(import_ui27.ThemeProvider, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React36.createElement(import_ui27.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 })))));
|
|
1676
1683
|
};
|
|
1677
1684
|
|
|
1678
1685
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
1679
1686
|
var React37 = __toESM(require("react"));
|
|
1680
1687
|
var import_editor_controls21 = require("@elementor/editor-controls");
|
|
1681
1688
|
var import_icons13 = require("@elementor/icons");
|
|
1682
|
-
var
|
|
1689
|
+
var import_ui28 = require("@elementor/ui");
|
|
1683
1690
|
var import_i18n18 = require("@wordpress/i18n");
|
|
1684
1691
|
var options5 = [
|
|
1685
1692
|
{
|
|
@@ -1703,7 +1710,7 @@ var options5 = [
|
|
|
1703
1710
|
];
|
|
1704
1711
|
var WrapField = () => {
|
|
1705
1712
|
const { isSiteRtl } = useDirection();
|
|
1706
|
-
return /* @__PURE__ */ React37.createElement(
|
|
1713
|
+
return /* @__PURE__ */ React37.createElement(import_ui28.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React37.createElement(import_ui28.ThemeProvider, null, /* @__PURE__ */ React37.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React37.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(import_editor_controls21.ControlLabel, null, (0, import_i18n18.__)("Wrap", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui28.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React37.createElement(import_editor_controls21.ToggleControl, { options: options5 }))))));
|
|
1707
1714
|
};
|
|
1708
1715
|
|
|
1709
1716
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -1725,25 +1732,30 @@ var import_session2 = require("@elementor/session");
|
|
|
1725
1732
|
var React39 = __toESM(require("react"));
|
|
1726
1733
|
var import_editor_controls23 = require("@elementor/editor-controls");
|
|
1727
1734
|
var import_icons14 = require("@elementor/icons");
|
|
1728
|
-
var
|
|
1735
|
+
var import_ui29 = require("@elementor/ui");
|
|
1729
1736
|
var import_i18n20 = require("@wordpress/i18n");
|
|
1737
|
+
var InlineStartIcon2 = (0, import_ui29.withDirection)(import_icons14.SideLeftIcon);
|
|
1738
|
+
var InlineEndIcon2 = (0, import_ui29.withDirection)(import_icons14.SideRightIcon);
|
|
1730
1739
|
var sideIcons = {
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1740
|
+
"inset-block-start": /* @__PURE__ */ React39.createElement(import_icons14.SideTopIcon, { fontSize: "tiny" }),
|
|
1741
|
+
"inset-block-end": /* @__PURE__ */ React39.createElement(import_icons14.SideBottomIcon, { fontSize: "tiny" }),
|
|
1742
|
+
"inset-inline-start": /* @__PURE__ */ React39.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
|
|
1743
|
+
"inset-inline-end": /* @__PURE__ */ React39.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
|
|
1735
1744
|
};
|
|
1745
|
+
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n20.__)("Right", "elementor") : (0, import_i18n20.__)("Left", "elementor");
|
|
1746
|
+
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n20.__)("Left", "elementor") : (0, import_i18n20.__)("Right", "elementor");
|
|
1736
1747
|
var DimensionsField = () => {
|
|
1737
|
-
|
|
1748
|
+
const { isSiteRtl } = useDirection();
|
|
1749
|
+
return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n20.__)("Top", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "inset-inline-start", label: getInlineStartLabel(isSiteRtl) })), /* @__PURE__ */ React39.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n20.__)("Bottom", "elementor") }), /* @__PURE__ */ React39.createElement(DimensionField, { side: "inset-inline-end", label: getInlineEndLabel(isSiteRtl) })));
|
|
1738
1750
|
};
|
|
1739
1751
|
var DimensionField = ({ side, label }) => {
|
|
1740
|
-
return /* @__PURE__ */ React39.createElement(
|
|
1752
|
+
return /* @__PURE__ */ React39.createElement(import_ui29.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(import_editor_controls23.ControlLabel, null, label)), /* @__PURE__ */ React39.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(StylesField, { bind: side }, /* @__PURE__ */ React39.createElement(import_editor_controls23.SizeControl, { startIcon: sideIcons[side], extendedValues: ["auto"] }))));
|
|
1741
1753
|
};
|
|
1742
1754
|
|
|
1743
1755
|
// src/components/style-sections/position-section/position-field.tsx
|
|
1744
1756
|
var React40 = __toESM(require("react"));
|
|
1745
1757
|
var import_editor_controls24 = require("@elementor/editor-controls");
|
|
1746
|
-
var
|
|
1758
|
+
var import_ui30 = require("@elementor/ui");
|
|
1747
1759
|
var import_i18n21 = require("@wordpress/i18n");
|
|
1748
1760
|
var positionOptions = [
|
|
1749
1761
|
{ label: (0, import_i18n21.__)("Static", "elementor"), value: "static" },
|
|
@@ -1753,26 +1765,26 @@ var positionOptions = [
|
|
|
1753
1765
|
{ label: (0, import_i18n21.__)("Sticky", "elementor"), value: "sticky" }
|
|
1754
1766
|
];
|
|
1755
1767
|
var PositionField = ({ onChange }) => {
|
|
1756
|
-
return /* @__PURE__ */ React40.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React40.createElement(
|
|
1768
|
+
return /* @__PURE__ */ React40.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React40.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(import_editor_controls24.ControlLabel, null, (0, import_i18n21.__)("Position", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui30.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(import_editor_controls24.SelectControl, { options: positionOptions, onChange }))));
|
|
1757
1769
|
};
|
|
1758
1770
|
|
|
1759
1771
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
1760
1772
|
var React41 = __toESM(require("react"));
|
|
1761
1773
|
var import_editor_controls25 = require("@elementor/editor-controls");
|
|
1762
|
-
var
|
|
1774
|
+
var import_ui31 = require("@elementor/ui");
|
|
1763
1775
|
var import_i18n22 = require("@wordpress/i18n");
|
|
1764
1776
|
var ZIndexField = () => {
|
|
1765
|
-
return /* @__PURE__ */ React41.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React41.createElement(
|
|
1777
|
+
return /* @__PURE__ */ React41.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React41.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(import_editor_controls25.ControlLabel, null, (0, import_i18n22.__)("Z-index", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(import_editor_controls25.NumberControl, null))));
|
|
1766
1778
|
};
|
|
1767
1779
|
|
|
1768
1780
|
// src/components/style-sections/position-section/position-section.tsx
|
|
1769
1781
|
var PositionSection = () => {
|
|
1770
1782
|
const [positionValue] = useStylesField("position");
|
|
1771
1783
|
const [dimensionsValues, setDimensionsValues] = useStylesFields([
|
|
1772
|
-
"
|
|
1773
|
-
"
|
|
1774
|
-
"
|
|
1775
|
-
"
|
|
1784
|
+
"inset-block-start",
|
|
1785
|
+
"inset-block-end",
|
|
1786
|
+
"inset-inline-start",
|
|
1787
|
+
"inset-inline-end"
|
|
1776
1788
|
]);
|
|
1777
1789
|
const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
|
|
1778
1790
|
const onPositionChange = (newPosition, previousPosition) => {
|
|
@@ -1780,10 +1792,10 @@ var PositionSection = () => {
|
|
|
1780
1792
|
if (dimensionsValues) {
|
|
1781
1793
|
updateDimensionsHistory(dimensionsValues);
|
|
1782
1794
|
setDimensionsValues({
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1795
|
+
"inset-block-start": void 0,
|
|
1796
|
+
"inset-block-end": void 0,
|
|
1797
|
+
"inset-inline-start": void 0,
|
|
1798
|
+
"inset-inline-end": void 0
|
|
1787
1799
|
});
|
|
1788
1800
|
}
|
|
1789
1801
|
} else if (previousPosition === "static") {
|
|
@@ -1806,14 +1818,14 @@ var usePersistDimensions = () => {
|
|
|
1806
1818
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1807
1819
|
var React44 = __toESM(require("react"));
|
|
1808
1820
|
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
1809
|
-
var
|
|
1821
|
+
var import_ui33 = require("@elementor/ui");
|
|
1810
1822
|
var import_i18n24 = require("@wordpress/i18n");
|
|
1811
1823
|
|
|
1812
1824
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
1813
1825
|
var React43 = __toESM(require("react"));
|
|
1814
1826
|
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
1815
1827
|
var import_icons15 = require("@elementor/icons");
|
|
1816
|
-
var
|
|
1828
|
+
var import_ui32 = require("@elementor/ui");
|
|
1817
1829
|
var import_i18n23 = require("@wordpress/i18n");
|
|
1818
1830
|
var options6 = [
|
|
1819
1831
|
{
|
|
@@ -1836,29 +1848,29 @@ var options6 = [
|
|
|
1836
1848
|
}
|
|
1837
1849
|
];
|
|
1838
1850
|
var OverflowField = () => {
|
|
1839
|
-
return /* @__PURE__ */ React43.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React43.createElement(
|
|
1851
|
+
return /* @__PURE__ */ React43.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React43.createElement(import_ui32.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(import_editor_controls26.ControlLabel, null, (0, import_i18n23.__)("Overflow", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui32.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React43.createElement(import_editor_controls26.ToggleControl, { options: options6 }))));
|
|
1840
1852
|
};
|
|
1841
1853
|
|
|
1842
1854
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1843
1855
|
var SizeSection = () => {
|
|
1844
|
-
return /* @__PURE__ */ React44.createElement(SectionContent, null, /* @__PURE__ */ React44.createElement(
|
|
1856
|
+
return /* @__PURE__ */ React44.createElement(SectionContent, null, /* @__PURE__ */ React44.createElement(import_ui33.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "width", label: (0, import_i18n24.__)("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React44.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "height", label: (0, import_i18n24.__)("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React44.createElement(import_ui33.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
|
|
1845
1857
|
SizeField,
|
|
1846
1858
|
{
|
|
1847
1859
|
bind: "min-width",
|
|
1848
1860
|
label: (0, import_i18n24.__)("Min width", "elementor"),
|
|
1849
1861
|
extendedValues: ["auto"]
|
|
1850
1862
|
}
|
|
1851
|
-
)), /* @__PURE__ */ React44.createElement(
|
|
1863
|
+
)), /* @__PURE__ */ React44.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
|
|
1852
1864
|
SizeField,
|
|
1853
1865
|
{
|
|
1854
1866
|
bind: "min-height",
|
|
1855
1867
|
label: (0, import_i18n24.__)("Min height", "elementor"),
|
|
1856
1868
|
extendedValues: ["auto"]
|
|
1857
1869
|
}
|
|
1858
|
-
))), /* @__PURE__ */ React44.createElement(
|
|
1870
|
+
))), /* @__PURE__ */ React44.createElement(import_ui33.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(SizeField, { bind: "max-width", label: (0, import_i18n24.__)("Max width", "elementor") })), /* @__PURE__ */ React44.createElement(import_ui33.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_ui33.Stack, null, /* @__PURE__ */ React44.createElement(OverflowField, null)));
|
|
1859
1871
|
};
|
|
1860
1872
|
var SizeField = ({ label, bind, extendedValues }) => {
|
|
1861
|
-
return /* @__PURE__ */ React44.createElement(StylesField, { bind }, /* @__PURE__ */ React44.createElement(
|
|
1873
|
+
return /* @__PURE__ */ React44.createElement(StylesField, { bind }, /* @__PURE__ */ React44.createElement(import_ui33.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React44.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(import_editor_controls27.ControlLabel, null, label)), /* @__PURE__ */ React44.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(import_editor_controls27.SizeControl, { extendedValues }))));
|
|
1862
1874
|
};
|
|
1863
1875
|
|
|
1864
1876
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
@@ -1866,7 +1878,15 @@ var React45 = __toESM(require("react"));
|
|
|
1866
1878
|
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
1867
1879
|
var import_i18n25 = require("@wordpress/i18n");
|
|
1868
1880
|
var SpacingSection = () => {
|
|
1869
|
-
|
|
1881
|
+
const { isSiteRtl } = useDirection();
|
|
1882
|
+
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"), isSiteRtl })), /* @__PURE__ */ React45.createElement(PanelDivider, null), /* @__PURE__ */ React45.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React45.createElement(
|
|
1883
|
+
import_editor_controls28.LinkedDimensionsControl,
|
|
1884
|
+
{
|
|
1885
|
+
label: (0, import_i18n25.__)("Margin", "elementor"),
|
|
1886
|
+
isSiteRtl,
|
|
1887
|
+
extendedValues: ["auto"]
|
|
1888
|
+
}
|
|
1889
|
+
)));
|
|
1870
1890
|
};
|
|
1871
1891
|
|
|
1872
1892
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -1875,15 +1895,15 @@ var React60 = __toESM(require("react"));
|
|
|
1875
1895
|
// src/components/collapsible-content.tsx
|
|
1876
1896
|
var React46 = __toESM(require("react"));
|
|
1877
1897
|
var import_react12 = require("react");
|
|
1878
|
-
var
|
|
1898
|
+
var import_ui34 = require("@elementor/ui");
|
|
1879
1899
|
var import_i18n26 = require("@wordpress/i18n");
|
|
1880
1900
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
1881
1901
|
const [open, setOpen] = (0, import_react12.useState)(defaultOpen);
|
|
1882
1902
|
const handleToggle = () => {
|
|
1883
1903
|
setOpen((prevOpen) => !prevOpen);
|
|
1884
1904
|
};
|
|
1885
|
-
return /* @__PURE__ */ React46.createElement(
|
|
1886
|
-
|
|
1905
|
+
return /* @__PURE__ */ React46.createElement(import_ui34.Stack, null, /* @__PURE__ */ React46.createElement(
|
|
1906
|
+
import_ui34.Button,
|
|
1887
1907
|
{
|
|
1888
1908
|
fullWidth: true,
|
|
1889
1909
|
size: "small",
|
|
@@ -1894,13 +1914,14 @@ var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
|
1894
1914
|
sx: { my: 0.5 }
|
|
1895
1915
|
},
|
|
1896
1916
|
open ? (0, import_i18n26.__)("Show less", "elementor") : (0, import_i18n26.__)("Show more", "elementor")
|
|
1897
|
-
), /* @__PURE__ */ React46.createElement(
|
|
1917
|
+
), /* @__PURE__ */ React46.createElement(import_ui34.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
1898
1918
|
};
|
|
1899
1919
|
|
|
1900
1920
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
1901
1921
|
var React47 = __toESM(require("react"));
|
|
1922
|
+
var import_react13 = require("react");
|
|
1902
1923
|
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
1903
|
-
var
|
|
1924
|
+
var import_ui35 = require("@elementor/ui");
|
|
1904
1925
|
var import_i18n27 = require("@wordpress/i18n");
|
|
1905
1926
|
|
|
1906
1927
|
// src/sync/get-elementor-config.ts
|
|
@@ -1910,12 +1931,17 @@ var getElementorConfig = () => {
|
|
|
1910
1931
|
};
|
|
1911
1932
|
|
|
1912
1933
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
1934
|
+
var supportedCategories = {
|
|
1935
|
+
system: (0, import_i18n27.__)("System", "elementor"),
|
|
1936
|
+
custom: (0, import_i18n27.__)("Custom Fonts", "elementor"),
|
|
1937
|
+
googlefonts: (0, import_i18n27.__)("Google Fonts", "elementor")
|
|
1938
|
+
};
|
|
1913
1939
|
var FontFamilyField = () => {
|
|
1914
|
-
const fontFamilies =
|
|
1915
|
-
if (
|
|
1940
|
+
const fontFamilies = useFontFamilies();
|
|
1941
|
+
if (Object.keys(fontFamilies).length === 0) {
|
|
1916
1942
|
return null;
|
|
1917
1943
|
}
|
|
1918
|
-
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React47.createElement(
|
|
1944
|
+
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React47.createElement(import_ui35.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(import_editor_controls29.ControlLabel, null, (0, import_i18n27.__)("Font family", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React47.createElement(import_editor_controls29.FontFamilyControl, { fontFamilies }))));
|
|
1919
1945
|
};
|
|
1920
1946
|
var getFontFamilies = () => {
|
|
1921
1947
|
const { controls } = getElementorConfig();
|
|
@@ -1925,21 +1951,39 @@ var getFontFamilies = () => {
|
|
|
1925
1951
|
}
|
|
1926
1952
|
return options11;
|
|
1927
1953
|
};
|
|
1954
|
+
var useFontFamilies = () => {
|
|
1955
|
+
const fontFamilies = getFontFamilies();
|
|
1956
|
+
return (0, import_react13.useMemo)(
|
|
1957
|
+
() => Object.entries(fontFamilies || {}).reduce((acc, [font, category]) => {
|
|
1958
|
+
const categoryLabel = supportedCategories[category];
|
|
1959
|
+
const existingCategory = acc[categoryLabel];
|
|
1960
|
+
if (!categoryLabel) {
|
|
1961
|
+
return acc;
|
|
1962
|
+
}
|
|
1963
|
+
if (!existingCategory) {
|
|
1964
|
+
acc[categoryLabel] = [];
|
|
1965
|
+
}
|
|
1966
|
+
acc[categoryLabel].push(font);
|
|
1967
|
+
return acc;
|
|
1968
|
+
}, {}),
|
|
1969
|
+
[fontFamilies]
|
|
1970
|
+
);
|
|
1971
|
+
};
|
|
1928
1972
|
|
|
1929
1973
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
1930
1974
|
var React48 = __toESM(require("react"));
|
|
1931
1975
|
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
1932
|
-
var
|
|
1976
|
+
var import_ui36 = require("@elementor/ui");
|
|
1933
1977
|
var import_i18n28 = require("@wordpress/i18n");
|
|
1934
1978
|
var FontSizeField = () => {
|
|
1935
|
-
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React48.createElement(
|
|
1979
|
+
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React48.createElement(import_ui36.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(import_editor_controls30.ControlLabel, null, (0, import_i18n28.__)("Font size", "elementor"))), /* @__PURE__ */ React48.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(import_editor_controls30.SizeControl, null))));
|
|
1936
1980
|
};
|
|
1937
1981
|
|
|
1938
1982
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
1939
1983
|
var React49 = __toESM(require("react"));
|
|
1940
1984
|
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
1941
1985
|
var import_icons16 = require("@elementor/icons");
|
|
1942
|
-
var
|
|
1986
|
+
var import_ui37 = require("@elementor/ui");
|
|
1943
1987
|
var import_i18n29 = require("@wordpress/i18n");
|
|
1944
1988
|
var options7 = [
|
|
1945
1989
|
{
|
|
@@ -1955,12 +1999,12 @@ var options7 = [
|
|
|
1955
1999
|
showTooltip: true
|
|
1956
2000
|
}
|
|
1957
2001
|
];
|
|
1958
|
-
var FontStyleField = () => /* @__PURE__ */ React49.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React49.createElement(
|
|
2002
|
+
var FontStyleField = () => /* @__PURE__ */ React49.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React49.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(import_editor_controls31.ControlLabel, null, (0, import_i18n29.__)("Font Style", "elementor"))), /* @__PURE__ */ React49.createElement(import_ui37.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React49.createElement(import_editor_controls31.ToggleControl, { options: options7 }))));
|
|
1959
2003
|
|
|
1960
2004
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
1961
2005
|
var React50 = __toESM(require("react"));
|
|
1962
2006
|
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
1963
|
-
var
|
|
2007
|
+
var import_ui38 = require("@elementor/ui");
|
|
1964
2008
|
var import_i18n30 = require("@wordpress/i18n");
|
|
1965
2009
|
var fontWeightOptions = [
|
|
1966
2010
|
{ value: "100", label: (0, import_i18n30.__)("100 - Thin", "elementor") },
|
|
@@ -1974,35 +2018,35 @@ var fontWeightOptions = [
|
|
|
1974
2018
|
{ value: "900", label: (0, import_i18n30.__)("900 - Black", "elementor") }
|
|
1975
2019
|
];
|
|
1976
2020
|
var FontWeightField = () => {
|
|
1977
|
-
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React50.createElement(
|
|
2021
|
+
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React50.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React50.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(import_editor_controls32.ControlLabel, null, (0, import_i18n30.__)("Font weight", "elementor"))), /* @__PURE__ */ React50.createElement(import_ui38.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React50.createElement(import_editor_controls32.SelectControl, { options: fontWeightOptions }))));
|
|
1978
2022
|
};
|
|
1979
2023
|
|
|
1980
2024
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
1981
2025
|
var React51 = __toESM(require("react"));
|
|
1982
2026
|
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
1983
|
-
var
|
|
2027
|
+
var import_ui39 = require("@elementor/ui");
|
|
1984
2028
|
var import_i18n31 = require("@wordpress/i18n");
|
|
1985
2029
|
var LetterSpacingField = () => {
|
|
1986
|
-
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React51.createElement(
|
|
2030
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React51.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls33.ControlLabel, null, (0, import_i18n31.__)("Letter spacing", "elementor"))), /* @__PURE__ */ React51.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls33.SizeControl, null))));
|
|
1987
2031
|
};
|
|
1988
2032
|
|
|
1989
2033
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
1990
2034
|
var React52 = __toESM(require("react"));
|
|
1991
2035
|
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
1992
|
-
var
|
|
2036
|
+
var import_ui40 = require("@elementor/ui");
|
|
1993
2037
|
var import_i18n32 = require("@wordpress/i18n");
|
|
1994
2038
|
var LineHeightField = () => {
|
|
1995
|
-
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React52.createElement(
|
|
2039
|
+
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React52.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls34.ControlLabel, null, (0, import_i18n32.__)("Line height", "elementor"))), /* @__PURE__ */ React52.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls34.SizeControl, null))));
|
|
1996
2040
|
};
|
|
1997
2041
|
|
|
1998
2042
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
1999
2043
|
var React53 = __toESM(require("react"));
|
|
2000
2044
|
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
2001
2045
|
var import_icons17 = require("@elementor/icons");
|
|
2002
|
-
var
|
|
2046
|
+
var import_ui41 = require("@elementor/ui");
|
|
2003
2047
|
var import_i18n33 = require("@wordpress/i18n");
|
|
2004
|
-
var StartIcon4 = (0,
|
|
2005
|
-
var EndIcon4 = (0,
|
|
2048
|
+
var StartIcon4 = (0, import_ui41.withDirection)(import_icons17.AlignLeftIcon);
|
|
2049
|
+
var EndIcon4 = (0, import_ui41.withDirection)(import_icons17.AlignRightIcon);
|
|
2006
2050
|
var options8 = [
|
|
2007
2051
|
{
|
|
2008
2052
|
value: "start",
|
|
@@ -2030,23 +2074,23 @@ var options8 = [
|
|
|
2030
2074
|
}
|
|
2031
2075
|
];
|
|
2032
2076
|
var TextAlignmentField = () => {
|
|
2033
|
-
return /* @__PURE__ */ React53.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React53.createElement(
|
|
2077
|
+
return /* @__PURE__ */ React53.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React53.createElement(import_ui41.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(import_editor_controls35.ControlLabel, null, (0, import_i18n33.__)("Alignment", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui41.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React53.createElement(import_editor_controls35.ToggleControl, { options: options8 }))));
|
|
2034
2078
|
};
|
|
2035
2079
|
|
|
2036
2080
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
2037
2081
|
var React54 = __toESM(require("react"));
|
|
2038
2082
|
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
2039
|
-
var
|
|
2083
|
+
var import_ui42 = require("@elementor/ui");
|
|
2040
2084
|
var import_i18n34 = require("@wordpress/i18n");
|
|
2041
2085
|
var TextColorField = () => {
|
|
2042
|
-
return /* @__PURE__ */ React54.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React54.createElement(
|
|
2086
|
+
return /* @__PURE__ */ React54.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React54.createElement(import_ui42.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(import_editor_controls36.ControlLabel, null, (0, import_i18n34.__)("Text color", "elementor"))), /* @__PURE__ */ React54.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(import_editor_controls36.ColorControl, null))));
|
|
2043
2087
|
};
|
|
2044
2088
|
|
|
2045
2089
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
2046
2090
|
var React55 = __toESM(require("react"));
|
|
2047
2091
|
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
2048
2092
|
var import_icons18 = require("@elementor/icons");
|
|
2049
|
-
var
|
|
2093
|
+
var import_ui43 = require("@elementor/ui");
|
|
2050
2094
|
var import_i18n35 = require("@wordpress/i18n");
|
|
2051
2095
|
var buttonSize = "tiny";
|
|
2052
2096
|
var TextDecorationField = () => {
|
|
@@ -2061,7 +2105,7 @@ var TextDecorationField = () => {
|
|
|
2061
2105
|
value: newValue
|
|
2062
2106
|
});
|
|
2063
2107
|
};
|
|
2064
|
-
return /* @__PURE__ */ React55.createElement(
|
|
2108
|
+
return /* @__PURE__ */ React55.createElement(import_ui43.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(import_editor_controls37.ControlLabel, null, (0, import_i18n35.__)("Style", "elementor"))), /* @__PURE__ */ React55.createElement(import_ui43.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React55.createElement(import_ui43.ToggleButtonGroup, { value: formats }, /* @__PURE__ */ React55.createElement(
|
|
2065
2109
|
ShorthandControl,
|
|
2066
2110
|
{
|
|
2067
2111
|
value: "line-through",
|
|
@@ -2103,29 +2147,31 @@ var ToggleButton = ({ onChange, ...props }) => {
|
|
|
2103
2147
|
const handleChange = (_e, newValue) => {
|
|
2104
2148
|
onChange(newValue);
|
|
2105
2149
|
};
|
|
2106
|
-
return /* @__PURE__ */ React55.createElement(
|
|
2150
|
+
return /* @__PURE__ */ React55.createElement(import_ui43.ToggleButton, { ...props, onChange: handleChange, size: buttonSize });
|
|
2107
2151
|
};
|
|
2108
2152
|
|
|
2109
2153
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
2110
2154
|
var React56 = __toESM(require("react"));
|
|
2111
2155
|
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
2112
2156
|
var import_icons19 = require("@elementor/icons");
|
|
2113
|
-
var
|
|
2157
|
+
var import_ui44 = require("@elementor/ui");
|
|
2114
2158
|
var import_i18n36 = require("@wordpress/i18n");
|
|
2115
2159
|
var options9 = [
|
|
2116
2160
|
{
|
|
2117
2161
|
value: "ltr",
|
|
2118
|
-
label: (0, import_i18n36.__)("Left to
|
|
2119
|
-
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons19.TextDirectionLtrIcon, { fontSize: size })
|
|
2162
|
+
label: (0, import_i18n36.__)("Left to right", "elementor"),
|
|
2163
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons19.TextDirectionLtrIcon, { fontSize: size }),
|
|
2164
|
+
showTooltip: true
|
|
2120
2165
|
},
|
|
2121
2166
|
{
|
|
2122
2167
|
value: "rtl",
|
|
2123
|
-
label: (0, import_i18n36.__)("Right to
|
|
2124
|
-
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons19.TextDirectionRtlIcon, { fontSize: size })
|
|
2168
|
+
label: (0, import_i18n36.__)("Right to left", "elementor"),
|
|
2169
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons19.TextDirectionRtlIcon, { fontSize: size }),
|
|
2170
|
+
showTooltip: true
|
|
2125
2171
|
}
|
|
2126
2172
|
];
|
|
2127
2173
|
var TextDirectionField = () => {
|
|
2128
|
-
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React56.createElement(
|
|
2174
|
+
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React56.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(import_editor_controls38.ControlLabel, null, (0, import_i18n36.__)("Direction", "elementor"))), /* @__PURE__ */ React56.createElement(import_ui44.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React56.createElement(import_editor_controls38.ToggleControl, { options: options9 }))));
|
|
2129
2175
|
};
|
|
2130
2176
|
|
|
2131
2177
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -2173,7 +2219,7 @@ var TextStrokeField = () => {
|
|
|
2173
2219
|
var React58 = __toESM(require("react"));
|
|
2174
2220
|
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
2175
2221
|
var import_icons20 = require("@elementor/icons");
|
|
2176
|
-
var
|
|
2222
|
+
var import_ui45 = require("@elementor/ui");
|
|
2177
2223
|
var import_i18n38 = require("@wordpress/i18n");
|
|
2178
2224
|
var options10 = [
|
|
2179
2225
|
{
|
|
@@ -2201,15 +2247,15 @@ var options10 = [
|
|
|
2201
2247
|
showTooltip: true
|
|
2202
2248
|
}
|
|
2203
2249
|
];
|
|
2204
|
-
var TransformField = () => /* @__PURE__ */ React58.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React58.createElement(
|
|
2250
|
+
var TransformField = () => /* @__PURE__ */ React58.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React58.createElement(import_ui45.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(import_editor_controls40.ControlLabel, null, (0, import_i18n38.__)("Text transform", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui45.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React58.createElement(import_editor_controls40.ToggleControl, { options: options10 }))));
|
|
2205
2251
|
|
|
2206
2252
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
2207
2253
|
var React59 = __toESM(require("react"));
|
|
2208
2254
|
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
2209
|
-
var
|
|
2255
|
+
var import_ui46 = require("@elementor/ui");
|
|
2210
2256
|
var import_i18n39 = require("@wordpress/i18n");
|
|
2211
2257
|
var WordSpacingField = () => {
|
|
2212
|
-
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React59.createElement(
|
|
2258
|
+
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React59.createElement(import_ui46.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(import_editor_controls41.ControlLabel, null, (0, import_i18n39.__)("Word spacing", "elementor"))), /* @__PURE__ */ React59.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(import_editor_controls41.SizeControl, null))));
|
|
2213
2259
|
};
|
|
2214
2260
|
|
|
2215
2261
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -2222,7 +2268,7 @@ var CLASSES_PROP_KEY = "classes";
|
|
|
2222
2268
|
var StyleTab = () => {
|
|
2223
2269
|
const currentClassesProp = useCurrentClassesProp();
|
|
2224
2270
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
2225
|
-
const [activeStyleState, setActiveStyleState] = (0,
|
|
2271
|
+
const [activeStyleState, setActiveStyleState] = (0, import_react14.useState)(null);
|
|
2226
2272
|
const breakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
|
|
2227
2273
|
return /* @__PURE__ */ React61.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React61.createElement(
|
|
2228
2274
|
StyleProvider,
|
|
@@ -2235,11 +2281,11 @@ var StyleTab = () => {
|
|
|
2235
2281
|
},
|
|
2236
2282
|
setMetaState: setActiveStyleState
|
|
2237
2283
|
},
|
|
2238
|
-
/* @__PURE__ */ React61.createElement(import_session3.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React61.createElement(CssClassSelector, null), /* @__PURE__ */ React61.createElement(
|
|
2284
|
+
/* @__PURE__ */ React61.createElement(import_session3.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React61.createElement(CssClassSelector, null), /* @__PURE__ */ React61.createElement(import_ui47.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))))
|
|
2239
2285
|
));
|
|
2240
2286
|
};
|
|
2241
2287
|
function useActiveStyleDefId(currentClassesProp) {
|
|
2242
|
-
const [activeStyledDefId, setActiveStyledDefId] = (0,
|
|
2288
|
+
const [activeStyledDefId, setActiveStyledDefId] = (0, import_react14.useState)(null);
|
|
2243
2289
|
const fallback = useFirstElementStyleDef(currentClassesProp);
|
|
2244
2290
|
return [activeStyledDefId || fallback?.id || null, setActiveStyledDefId];
|
|
2245
2291
|
}
|
|
@@ -2263,11 +2309,11 @@ function useCurrentClassesProp() {
|
|
|
2263
2309
|
// src/components/editing-panel-tabs.tsx
|
|
2264
2310
|
var EditingPanelTabs = () => {
|
|
2265
2311
|
const { element } = useElement();
|
|
2266
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
2312
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui48.useTabs)("settings");
|
|
2267
2313
|
return (
|
|
2268
2314
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
2269
2315
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
2270
|
-
/* @__PURE__ */ React62.createElement(
|
|
2316
|
+
/* @__PURE__ */ React62.createElement(import_react15.Fragment, { key: element.id }, /* @__PURE__ */ React62.createElement(import_ui48.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React62.createElement(import_ui48.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React62.createElement(import_ui48.Tab, { label: (0, import_i18n41.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React62.createElement(import_ui48.Tab, { label: (0, import_i18n41.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React62.createElement(import_ui48.Divider, null), /* @__PURE__ */ React62.createElement(import_ui48.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React62.createElement(SettingsTab, null)), /* @__PURE__ */ React62.createElement(import_ui48.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React62.createElement(StyleTab, null))))
|
|
2271
2317
|
);
|
|
2272
2318
|
};
|
|
2273
2319
|
|
|
@@ -2281,7 +2327,7 @@ var EditingPanel = () => {
|
|
|
2281
2327
|
return null;
|
|
2282
2328
|
}
|
|
2283
2329
|
const panelTitle = (0, import_i18n42.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
2284
|
-
return /* @__PURE__ */ React63.createElement(
|
|
2330
|
+
return /* @__PURE__ */ React63.createElement(import_ui49.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_icons21.RocketIcon, { fontSize: "small", sx: { color: "text.disabled" } })), /* @__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))))))));
|
|
2285
2331
|
};
|
|
2286
2332
|
|
|
2287
2333
|
// src/panel.ts
|
|
@@ -2296,7 +2342,7 @@ var import_editor_panels3 = require("@elementor/editor-panels");
|
|
|
2296
2342
|
var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
|
|
2297
2343
|
|
|
2298
2344
|
// src/hooks/use-close-editor-panel.ts
|
|
2299
|
-
var
|
|
2345
|
+
var import_react16 = require("react");
|
|
2300
2346
|
var import_editor_elements9 = require("@elementor/editor-elements");
|
|
2301
2347
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
2302
2348
|
|
|
@@ -2314,7 +2360,7 @@ var isAtomicWidgetSelected = () => {
|
|
|
2314
2360
|
// src/hooks/use-close-editor-panel.ts
|
|
2315
2361
|
var useCloseEditorPanel = () => {
|
|
2316
2362
|
const { close } = usePanelActions();
|
|
2317
|
-
return (0,
|
|
2363
|
+
return (0, import_react16.useEffect)(() => {
|
|
2318
2364
|
return (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.commandStartEvent)("document/elements/delete"), (e) => {
|
|
2319
2365
|
const selectedElement = (0, import_editor_elements9.getSelectedElements)()[0];
|
|
2320
2366
|
const { container: deletedContainer } = e?.args;
|
|
@@ -2327,11 +2373,11 @@ var useCloseEditorPanel = () => {
|
|
|
2327
2373
|
};
|
|
2328
2374
|
|
|
2329
2375
|
// src/hooks/use-open-editor-panel.ts
|
|
2330
|
-
var
|
|
2376
|
+
var import_react17 = require("react");
|
|
2331
2377
|
var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
|
|
2332
2378
|
var useOpenEditorPanel = () => {
|
|
2333
2379
|
const { open } = usePanelActions();
|
|
2334
|
-
(0,
|
|
2380
|
+
(0, import_react17.useEffect)(() => {
|
|
2335
2381
|
return (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.commandStartEvent)("panel/editor/open"), () => {
|
|
2336
2382
|
if (isAtomicWidgetSelected()) {
|
|
2337
2383
|
open();
|
|
@@ -2349,16 +2395,16 @@ var EditingPanelHooks = () => {
|
|
|
2349
2395
|
|
|
2350
2396
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
2351
2397
|
var React67 = __toESM(require("react"));
|
|
2352
|
-
var
|
|
2398
|
+
var import_react21 = require("react");
|
|
2353
2399
|
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
2354
|
-
var
|
|
2355
|
-
var
|
|
2400
|
+
var import_icons23 = require("@elementor/icons");
|
|
2401
|
+
var import_ui52 = require("@elementor/ui");
|
|
2356
2402
|
var import_i18n44 = require("@wordpress/i18n");
|
|
2357
2403
|
|
|
2358
2404
|
// src/components/popover-content.tsx
|
|
2359
2405
|
var React64 = __toESM(require("react"));
|
|
2360
|
-
var
|
|
2361
|
-
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React64.createElement(
|
|
2406
|
+
var import_ui50 = require("@elementor/ui");
|
|
2407
|
+
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React64.createElement(import_ui50.Stack, { alignItems, gap, p }, children);
|
|
2362
2408
|
|
|
2363
2409
|
// src/hooks/use-persist-dynamic-value.ts
|
|
2364
2410
|
var import_session5 = require("@elementor/session");
|
|
@@ -2373,10 +2419,10 @@ var React65 = __toESM(require("react"));
|
|
|
2373
2419
|
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
2374
2420
|
|
|
2375
2421
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
2376
|
-
var
|
|
2422
|
+
var import_react19 = require("react");
|
|
2377
2423
|
|
|
2378
2424
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
2379
|
-
var
|
|
2425
|
+
var import_react18 = require("react");
|
|
2380
2426
|
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
2381
2427
|
|
|
2382
2428
|
// src/dynamics/sync/get-elementor-config.ts
|
|
@@ -2428,7 +2474,7 @@ var usePropDynamicTags = () => {
|
|
|
2428
2474
|
const propDynamicType = getDynamicPropType(propType);
|
|
2429
2475
|
categories = propDynamicType?.settings.categories || [];
|
|
2430
2476
|
}
|
|
2431
|
-
return (0,
|
|
2477
|
+
return (0, import_react18.useMemo)(() => getDynamicTagsByCategories(categories), [categories.join()]);
|
|
2432
2478
|
};
|
|
2433
2479
|
var getDynamicTagsByCategories = (categories) => {
|
|
2434
2480
|
const dynamicTags = getAtomicDynamicTags();
|
|
@@ -2444,7 +2490,7 @@ var getDynamicTagsByCategories = (categories) => {
|
|
|
2444
2490
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
2445
2491
|
var useDynamicTag = (tagName) => {
|
|
2446
2492
|
const dynamicTags = usePropDynamicTags();
|
|
2447
|
-
return (0,
|
|
2493
|
+
return (0, import_react19.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
|
|
2448
2494
|
};
|
|
2449
2495
|
|
|
2450
2496
|
// src/dynamics/dynamic-control.tsx
|
|
@@ -2473,14 +2519,14 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
2473
2519
|
|
|
2474
2520
|
// src/dynamics/components/dynamic-selection.tsx
|
|
2475
2521
|
var React66 = __toESM(require("react"));
|
|
2476
|
-
var
|
|
2522
|
+
var import_react20 = require("react");
|
|
2477
2523
|
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
2478
|
-
var
|
|
2479
|
-
var
|
|
2524
|
+
var import_icons22 = require("@elementor/icons");
|
|
2525
|
+
var import_ui51 = require("@elementor/ui");
|
|
2480
2526
|
var import_i18n43 = require("@wordpress/i18n");
|
|
2481
2527
|
var SIZE3 = "tiny";
|
|
2482
2528
|
var DynamicSelection = ({ onSelect }) => {
|
|
2483
|
-
const [searchValue, setSearchValue] = (0,
|
|
2529
|
+
const [searchValue, setSearchValue] = (0, import_react20.useState)("");
|
|
2484
2530
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
2485
2531
|
const { value: anyValue } = (0, import_editor_controls45.useBoundProp)();
|
|
2486
2532
|
const { bind, value: dynamicValue, setValue } = (0, import_editor_controls45.useBoundProp)(dynamicPropTypeUtil);
|
|
@@ -2497,8 +2543,8 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2497
2543
|
setValue({ name: value, settings: {} });
|
|
2498
2544
|
onSelect?.();
|
|
2499
2545
|
};
|
|
2500
|
-
return /* @__PURE__ */ React66.createElement(
|
|
2501
|
-
|
|
2546
|
+
return /* @__PURE__ */ React66.createElement(import_ui51.Stack, null, /* @__PURE__ */ React66.createElement(import_ui51.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React66.createElement(
|
|
2547
|
+
import_ui51.TextField,
|
|
2502
2548
|
{
|
|
2503
2549
|
fullWidth: true,
|
|
2504
2550
|
size: SIZE3,
|
|
@@ -2506,13 +2552,13 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2506
2552
|
onChange: handleSearch,
|
|
2507
2553
|
placeholder: (0, import_i18n43.__)("Search dynamic tags\u2026", "elementor"),
|
|
2508
2554
|
InputProps: {
|
|
2509
|
-
startAdornment: /* @__PURE__ */ React66.createElement(
|
|
2555
|
+
startAdornment: /* @__PURE__ */ React66.createElement(import_ui51.InputAdornment, { position: "start" }, /* @__PURE__ */ React66.createElement(import_icons22.SearchIcon, { fontSize: SIZE3 }))
|
|
2510
2556
|
}
|
|
2511
2557
|
}
|
|
2512
|
-
)), /* @__PURE__ */ React66.createElement(
|
|
2558
|
+
)), /* @__PURE__ */ React66.createElement(import_ui51.Divider, null), /* @__PURE__ */ React66.createElement(import_ui51.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options11.length > 0 ? /* @__PURE__ */ React66.createElement(import_ui51.MenuList, { role: "listbox", tabIndex: 0 }, options11.map(([category, items3], index) => /* @__PURE__ */ React66.createElement(import_react20.Fragment, { key: index }, /* @__PURE__ */ React66.createElement(import_ui51.ListSubheader, { sx: { px: 1.5, typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items3.map(({ value, label: tagLabel }) => {
|
|
2513
2559
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
2514
2560
|
return /* @__PURE__ */ React66.createElement(
|
|
2515
|
-
|
|
2561
|
+
import_ui51.MenuItem,
|
|
2516
2562
|
{
|
|
2517
2563
|
key: value,
|
|
2518
2564
|
selected: isSelected,
|
|
@@ -2522,16 +2568,30 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2522
2568
|
},
|
|
2523
2569
|
tagLabel
|
|
2524
2570
|
);
|
|
2525
|
-
})))) : /* @__PURE__ */ React66.createElement(
|
|
2526
|
-
|
|
2571
|
+
})))) : /* @__PURE__ */ React66.createElement(
|
|
2572
|
+
import_ui51.Stack,
|
|
2527
2573
|
{
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2574
|
+
gap: 1,
|
|
2575
|
+
alignItems: "center",
|
|
2576
|
+
justifyContent: "center",
|
|
2577
|
+
height: "100%",
|
|
2578
|
+
p: 2.5,
|
|
2579
|
+
color: "text.secondary",
|
|
2580
|
+
sx: { pb: 3.5 }
|
|
2532
2581
|
},
|
|
2533
|
-
|
|
2534
|
-
|
|
2582
|
+
/* @__PURE__ */ React66.createElement(import_icons22.DatabaseIcon, { fontSize: "large" }),
|
|
2583
|
+
/* @__PURE__ */ React66.createElement(import_ui51.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n43.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React66.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
2584
|
+
/* @__PURE__ */ React66.createElement(import_ui51.Typography, { align: "center", variant: "caption" }, (0, import_i18n43.__)("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React66.createElement(
|
|
2585
|
+
import_ui51.Link,
|
|
2586
|
+
{
|
|
2587
|
+
color: "text.secondary",
|
|
2588
|
+
variant: "caption",
|
|
2589
|
+
component: "button",
|
|
2590
|
+
onClick: () => setSearchValue("")
|
|
2591
|
+
},
|
|
2592
|
+
(0, import_i18n43.__)("Clear & try again", "elementor")
|
|
2593
|
+
))
|
|
2594
|
+
)));
|
|
2535
2595
|
};
|
|
2536
2596
|
var useFilteredOptions = (searchValue) => {
|
|
2537
2597
|
const dynamicTags = usePropDynamicTags();
|
|
@@ -2556,8 +2616,8 @@ var DynamicSelectionControl = () => {
|
|
|
2556
2616
|
const { bind, value } = (0, import_editor_controls46.useBoundProp)(dynamicPropTypeUtil);
|
|
2557
2617
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
2558
2618
|
const { name: tagName = "" } = value;
|
|
2559
|
-
const selectionPopoverId = (0,
|
|
2560
|
-
const selectionPopoverState = (0,
|
|
2619
|
+
const selectionPopoverId = (0, import_react21.useId)();
|
|
2620
|
+
const selectionPopoverState = (0, import_ui52.usePopupState)({ variant: "popover", popupId: selectionPopoverId });
|
|
2561
2621
|
const dynamicTag = useDynamicTag(tagName);
|
|
2562
2622
|
const removeDynamicTag = () => {
|
|
2563
2623
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -2565,68 +2625,68 @@ var DynamicSelectionControl = () => {
|
|
|
2565
2625
|
if (!dynamicTag) {
|
|
2566
2626
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
2567
2627
|
}
|
|
2568
|
-
return /* @__PURE__ */ React67.createElement(
|
|
2569
|
-
|
|
2628
|
+
return /* @__PURE__ */ React67.createElement(import_ui52.Box, null, /* @__PURE__ */ React67.createElement(
|
|
2629
|
+
import_ui52.UnstableTag,
|
|
2570
2630
|
{
|
|
2571
2631
|
fullWidth: true,
|
|
2572
2632
|
showActionsOnHover: true,
|
|
2573
2633
|
label: dynamicTag.label,
|
|
2574
|
-
startIcon: /* @__PURE__ */ React67.createElement(
|
|
2575
|
-
...(0,
|
|
2634
|
+
startIcon: /* @__PURE__ */ React67.createElement(import_icons23.DatabaseIcon, { fontSize: SIZE4 }),
|
|
2635
|
+
...(0, import_ui52.bindTrigger)(selectionPopoverState),
|
|
2576
2636
|
actions: /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React67.createElement(
|
|
2577
|
-
|
|
2637
|
+
import_ui52.IconButton,
|
|
2578
2638
|
{
|
|
2579
2639
|
size: SIZE4,
|
|
2580
2640
|
onClick: removeDynamicTag,
|
|
2581
2641
|
"aria-label": (0, import_i18n44.__)("Remove dynamic value", "elementor")
|
|
2582
2642
|
},
|
|
2583
|
-
/* @__PURE__ */ React67.createElement(
|
|
2643
|
+
/* @__PURE__ */ React67.createElement(import_icons23.XIcon, { fontSize: SIZE4 })
|
|
2584
2644
|
))
|
|
2585
2645
|
}
|
|
2586
2646
|
), /* @__PURE__ */ React67.createElement(
|
|
2587
|
-
|
|
2647
|
+
import_ui52.Popover,
|
|
2588
2648
|
{
|
|
2589
2649
|
disablePortal: true,
|
|
2590
2650
|
disableScrollLock: true,
|
|
2591
2651
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
2592
|
-
...(0,
|
|
2652
|
+
...(0, import_ui52.bindPopover)(selectionPopoverState)
|
|
2593
2653
|
},
|
|
2594
|
-
/* @__PURE__ */ React67.createElement(
|
|
2654
|
+
/* @__PURE__ */ React67.createElement(import_ui52.Stack, null, /* @__PURE__ */ React67.createElement(import_ui52.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React67.createElement(import_icons23.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(import_ui52.Typography, { variant: "subtitle2" }, (0, import_i18n44.__)("Dynamic tags", "elementor")), /* @__PURE__ */ React67.createElement(import_ui52.IconButton, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React67.createElement(import_icons23.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
2595
2655
|
));
|
|
2596
2656
|
};
|
|
2597
2657
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
2598
|
-
const popupId = (0,
|
|
2599
|
-
const settingsPopupState = (0,
|
|
2658
|
+
const popupId = (0, import_react21.useId)();
|
|
2659
|
+
const settingsPopupState = (0, import_ui52.usePopupState)({ variant: "popover", popupId });
|
|
2600
2660
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
2601
2661
|
if (!hasDynamicSettings) {
|
|
2602
2662
|
return null;
|
|
2603
2663
|
}
|
|
2604
2664
|
return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(
|
|
2605
|
-
|
|
2665
|
+
import_ui52.IconButton,
|
|
2606
2666
|
{
|
|
2607
2667
|
size: SIZE4,
|
|
2608
|
-
...(0,
|
|
2668
|
+
...(0, import_ui52.bindTrigger)(settingsPopupState),
|
|
2609
2669
|
"aria-label": (0, import_i18n44.__)("Settings", "elementor")
|
|
2610
2670
|
},
|
|
2611
|
-
/* @__PURE__ */ React67.createElement(
|
|
2671
|
+
/* @__PURE__ */ React67.createElement(import_icons23.SettingsIcon, { fontSize: SIZE4 })
|
|
2612
2672
|
), /* @__PURE__ */ React67.createElement(
|
|
2613
|
-
|
|
2673
|
+
import_ui52.Popover,
|
|
2614
2674
|
{
|
|
2615
2675
|
disableScrollLock: true,
|
|
2616
2676
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
2617
|
-
...(0,
|
|
2677
|
+
...(0, import_ui52.bindPopover)(settingsPopupState)
|
|
2618
2678
|
},
|
|
2619
|
-
/* @__PURE__ */ React67.createElement(
|
|
2679
|
+
/* @__PURE__ */ React67.createElement(import_ui52.Paper, { component: import_ui52.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React67.createElement(import_ui52.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React67.createElement(import_icons23.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React67.createElement(import_ui52.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React67.createElement(import_ui52.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React67.createElement(import_icons23.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React67.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
2620
2680
|
));
|
|
2621
2681
|
};
|
|
2622
2682
|
var DynamicSettings = ({ controls }) => {
|
|
2623
2683
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
2624
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
2684
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui52.useTabs)(0);
|
|
2625
2685
|
if (!tabs.length) {
|
|
2626
2686
|
return null;
|
|
2627
2687
|
}
|
|
2628
|
-
return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(
|
|
2629
|
-
return /* @__PURE__ */ React67.createElement(
|
|
2688
|
+
return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(import_ui52.Tabs, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React67.createElement(import_ui52.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React67.createElement(import_ui52.Divider, null), tabs.map(({ value }, index) => {
|
|
2689
|
+
return /* @__PURE__ */ React67.createElement(import_ui52.TabPanel, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React67.createElement(PopoverContent, { p: 1.5 }, value.items.map((item) => {
|
|
2630
2690
|
if (item.type === "control") {
|
|
2631
2691
|
return /* @__PURE__ */ React67.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
2632
2692
|
}
|
|
@@ -2638,20 +2698,20 @@ var Control3 = ({ control }) => {
|
|
|
2638
2698
|
if (!getControlByType(control.type)) {
|
|
2639
2699
|
return null;
|
|
2640
2700
|
}
|
|
2641
|
-
return /* @__PURE__ */ React67.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React67.createElement(
|
|
2701
|
+
return /* @__PURE__ */ React67.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React67.createElement(import_ui52.Grid, { container: true, gap: 1 }, control.label ? /* @__PURE__ */ React67.createElement(import_ui52.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(import_editor_controls46.ControlLabel, null, control.label)) : null, /* @__PURE__ */ React67.createElement(import_ui52.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(Control, { type: control.type, props: control.props }))));
|
|
2642
2702
|
};
|
|
2643
2703
|
|
|
2644
2704
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
2645
2705
|
var React68 = __toESM(require("react"));
|
|
2646
2706
|
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
2647
|
-
var
|
|
2707
|
+
var import_icons24 = require("@elementor/icons");
|
|
2648
2708
|
var import_i18n45 = require("@wordpress/i18n");
|
|
2649
2709
|
var usePropDynamicAction = () => {
|
|
2650
2710
|
const { propType } = (0, import_editor_controls47.useBoundProp)();
|
|
2651
2711
|
const visible = !!propType && supportsDynamic(propType);
|
|
2652
2712
|
return {
|
|
2653
2713
|
visible,
|
|
2654
|
-
icon:
|
|
2714
|
+
icon: import_icons24.DatabaseIcon,
|
|
2655
2715
|
title: (0, import_i18n45.__)("Dynamic tags", "elementor"),
|
|
2656
2716
|
popoverContent: ({ closePopover }) => /* @__PURE__ */ React68.createElement(DynamicSelection, { onSelect: closePopover })
|
|
2657
2717
|
};
|