@elementor/editor-editing-panel 1.11.0 → 1.11.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 +16 -0
- package/dist/index.js +190 -180
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +91 -81
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
- package/src/components/style-sections/border-section/border-radius-field.tsx +33 -14
- package/src/components/style-sections/typography-section/text-stroke-field.tsx +2 -2
package/dist/index.js
CHANGED
|
@@ -631,7 +631,7 @@ var import_editor_controls41 = require("@elementor/editor-controls");
|
|
|
631
631
|
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
632
632
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
633
633
|
var import_session4 = require("@elementor/session");
|
|
634
|
-
var
|
|
634
|
+
var import_ui51 = require("@elementor/ui");
|
|
635
635
|
var import_i18n41 = require("@wordpress/i18n");
|
|
636
636
|
|
|
637
637
|
// src/controls-actions.ts
|
|
@@ -690,7 +690,7 @@ function EditorPanelErrorFallback() {
|
|
|
690
690
|
// src/components/editing-panel-tabs.tsx
|
|
691
691
|
var React59 = __toESM(require("react"));
|
|
692
692
|
var import_react14 = require("react");
|
|
693
|
-
var
|
|
693
|
+
var import_ui50 = require("@elementor/ui");
|
|
694
694
|
var import_i18n40 = require("@wordpress/i18n");
|
|
695
695
|
|
|
696
696
|
// src/components/settings-tab.tsx
|
|
@@ -862,7 +862,7 @@ var import_react13 = require("react");
|
|
|
862
862
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
863
863
|
var import_editor_responsive = require("@elementor/editor-responsive");
|
|
864
864
|
var import_session3 = require("@elementor/session");
|
|
865
|
-
var
|
|
865
|
+
var import_ui49 = require("@elementor/ui");
|
|
866
866
|
var import_i18n39 = require("@wordpress/i18n");
|
|
867
867
|
|
|
868
868
|
// src/components/style-sections/background-section/background-section.tsx
|
|
@@ -1029,8 +1029,8 @@ var BackgroundSection = () => {
|
|
|
1029
1029
|
};
|
|
1030
1030
|
|
|
1031
1031
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1032
|
-
var
|
|
1033
|
-
var
|
|
1032
|
+
var React25 = __toESM(require("react"));
|
|
1033
|
+
var import_ui17 = require("@elementor/ui");
|
|
1034
1034
|
|
|
1035
1035
|
// src/components/style-sections/border-section/border-field.tsx
|
|
1036
1036
|
var React22 = __toESM(require("react"));
|
|
@@ -1160,61 +1160,114 @@ var BorderField = () => {
|
|
|
1160
1160
|
};
|
|
1161
1161
|
|
|
1162
1162
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
1163
|
-
var
|
|
1163
|
+
var React24 = __toESM(require("react"));
|
|
1164
1164
|
var import_editor_controls11 = require("@elementor/editor-controls");
|
|
1165
1165
|
var import_editor_props3 = require("@elementor/editor-props");
|
|
1166
1166
|
var import_icons6 = require("@elementor/icons");
|
|
1167
|
+
var import_ui16 = require("@elementor/ui");
|
|
1167
1168
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1168
|
-
|
|
1169
|
+
|
|
1170
|
+
// src/hooks/use-direction.ts
|
|
1171
|
+
var import_ui14 = require("@elementor/ui");
|
|
1172
|
+
function useDirection() {
|
|
1173
|
+
const theme = (0, import_ui14.useTheme)(), extendedWindow = window;
|
|
1174
|
+
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
1175
|
+
return { isSiteRtl, isUiRtl };
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
1179
|
+
var React23 = __toESM(require("react"));
|
|
1180
|
+
var import_react9 = require("react");
|
|
1181
|
+
var import_ui15 = require("@elementor/ui");
|
|
1182
|
+
var CLOCKWISE_ANGLES = {
|
|
1183
|
+
row: 0,
|
|
1184
|
+
column: 90,
|
|
1185
|
+
"row-reverse": 180,
|
|
1186
|
+
"column-reverse": 270
|
|
1187
|
+
};
|
|
1188
|
+
var COUNTER_CLOCKWISE_ANGLES = {
|
|
1189
|
+
row: 0,
|
|
1190
|
+
column: -90,
|
|
1191
|
+
"row-reverse": -180,
|
|
1192
|
+
"column-reverse": -270
|
|
1193
|
+
};
|
|
1194
|
+
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
1195
|
+
const rotate = (0, import_react9.useRef)(useGetTargetAngle(isClockwise, offset));
|
|
1196
|
+
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
1197
|
+
return /* @__PURE__ */ React23.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
1198
|
+
};
|
|
1199
|
+
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
1200
|
+
const [direction] = useStylesField("flex-direction");
|
|
1201
|
+
const isRtl = "rtl" === (0, import_ui15.useTheme)().direction;
|
|
1202
|
+
const rotationMultiplier = isRtl ? -1 : 1;
|
|
1203
|
+
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
1204
|
+
const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
|
|
1205
|
+
const targetAngle = angleMap[direction?.value || "row"] + offset;
|
|
1206
|
+
const diffToTargetAngle = (targetAngle - currentAngle + 360) % 360;
|
|
1207
|
+
const formattedDiff = (diffToTargetAngle + 180) % 360 - 180;
|
|
1208
|
+
return (currentAngle + formattedDiff) * rotationMultiplier;
|
|
1209
|
+
};
|
|
1210
|
+
|
|
1211
|
+
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
1212
|
+
var StartStartIcon = (0, import_ui16.withDirection)(import_icons6.RadiusTopLeftIcon);
|
|
1213
|
+
var StartEndIcon = (0, import_ui16.withDirection)(import_icons6.RadiusTopRightIcon);
|
|
1214
|
+
var EndStartIcon = (0, import_ui16.withDirection)(import_icons6.RadiusBottomLeftIcon);
|
|
1215
|
+
var EndEndIcon = (0, import_ui16.withDirection)(import_icons6.RadiusBottomRightIcon);
|
|
1216
|
+
var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Top Right", "elementor") : (0, import_i18n9.__)("Top Left", "elementor");
|
|
1217
|
+
var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Top Left", "elementor") : (0, import_i18n9.__)("Top Right", "elementor");
|
|
1218
|
+
var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Bottom Right", "elementor") : (0, import_i18n9.__)("Bottom Left", "elementor");
|
|
1219
|
+
var getEndEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Bottom Left", "elementor") : (0, import_i18n9.__)("Bottom Right", "elementor");
|
|
1220
|
+
var getCorners = (isSiteRtl) => [
|
|
1169
1221
|
{
|
|
1170
|
-
label: (
|
|
1171
|
-
icon: /* @__PURE__ */
|
|
1172
|
-
bind: "
|
|
1222
|
+
label: getStartStartLabel(isSiteRtl),
|
|
1223
|
+
icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: StartStartIcon, size: "tiny" }),
|
|
1224
|
+
bind: "start-start"
|
|
1173
1225
|
},
|
|
1174
1226
|
{
|
|
1175
|
-
label: (
|
|
1176
|
-
icon: /* @__PURE__ */
|
|
1177
|
-
bind: "
|
|
1227
|
+
label: getStartEndLabel(isSiteRtl),
|
|
1228
|
+
icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: StartEndIcon, size: "tiny" }),
|
|
1229
|
+
bind: "start-end"
|
|
1178
1230
|
},
|
|
1179
1231
|
{
|
|
1180
|
-
label: (
|
|
1181
|
-
icon: /* @__PURE__ */
|
|
1182
|
-
bind: "
|
|
1232
|
+
label: getEndEndLabel(isSiteRtl),
|
|
1233
|
+
icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: EndEndIcon, size: "tiny" }),
|
|
1234
|
+
bind: "end-end"
|
|
1183
1235
|
},
|
|
1184
1236
|
{
|
|
1185
|
-
label: (
|
|
1186
|
-
icon: /* @__PURE__ */
|
|
1187
|
-
bind: "
|
|
1237
|
+
label: getEndStartLabel(isSiteRtl),
|
|
1238
|
+
icon: /* @__PURE__ */ React24.createElement(RotatedIcon, { icon: EndStartIcon, size: "tiny" }),
|
|
1239
|
+
bind: "end-start"
|
|
1188
1240
|
}
|
|
1189
1241
|
];
|
|
1190
1242
|
var BorderRadiusField = () => {
|
|
1191
|
-
|
|
1243
|
+
const { isSiteRtl } = useDirection();
|
|
1244
|
+
return /* @__PURE__ */ React24.createElement(StylesField, { bind: "border-radius" }, /* @__PURE__ */ React24.createElement(
|
|
1192
1245
|
import_editor_controls11.EqualUnequalSizesControl,
|
|
1193
1246
|
{
|
|
1194
|
-
items:
|
|
1247
|
+
items: getCorners(isSiteRtl),
|
|
1195
1248
|
label: (0, import_i18n9.__)("Border Radius", "elementor"),
|
|
1196
|
-
icon: /* @__PURE__ */
|
|
1249
|
+
icon: /* @__PURE__ */ React24.createElement(import_icons6.BorderCornersIcon, { fontSize: "tiny" }),
|
|
1197
1250
|
multiSizePropTypeUtil: import_editor_props3.borderRadiusPropTypeUtil
|
|
1198
1251
|
}
|
|
1199
1252
|
));
|
|
1200
1253
|
};
|
|
1201
1254
|
|
|
1202
1255
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1203
|
-
var BorderSection = () => /* @__PURE__ */
|
|
1256
|
+
var BorderSection = () => /* @__PURE__ */ React25.createElement(import_ui17.Stack, { gap: 1.5 }, /* @__PURE__ */ React25.createElement(BorderRadiusField, null), /* @__PURE__ */ React25.createElement(import_ui17.Divider, null), /* @__PURE__ */ React25.createElement(BorderField, null));
|
|
1204
1257
|
|
|
1205
1258
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
1206
|
-
var
|
|
1259
|
+
var React26 = __toESM(require("react"));
|
|
1207
1260
|
var import_editor_controls12 = require("@elementor/editor-controls");
|
|
1208
|
-
var
|
|
1261
|
+
var import_ui18 = require("@elementor/ui");
|
|
1209
1262
|
var EffectsSection = () => {
|
|
1210
|
-
return /* @__PURE__ */
|
|
1263
|
+
return /* @__PURE__ */ React26.createElement(import_ui18.Stack, { gap: 1.5 }, /* @__PURE__ */ React26.createElement(StylesField, { bind: "box-shadow" }, /* @__PURE__ */ React26.createElement(import_editor_controls12.BoxShadowRepeaterControl, null)));
|
|
1211
1264
|
};
|
|
1212
1265
|
|
|
1213
1266
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
1214
1267
|
var React36 = __toESM(require("react"));
|
|
1215
1268
|
var import_editor_controls22 = require("@elementor/editor-controls");
|
|
1216
1269
|
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
1217
|
-
var
|
|
1270
|
+
var import_ui28 = require("@elementor/ui");
|
|
1218
1271
|
var import_i18n19 = require("@wordpress/i18n");
|
|
1219
1272
|
|
|
1220
1273
|
// src/hooks/use-computed-style.ts
|
|
@@ -1246,53 +1299,10 @@ function useComputedStyle(elementId) {
|
|
|
1246
1299
|
var React27 = __toESM(require("react"));
|
|
1247
1300
|
var import_editor_controls13 = require("@elementor/editor-controls");
|
|
1248
1301
|
var import_icons7 = require("@elementor/icons");
|
|
1249
|
-
var
|
|
1302
|
+
var import_ui19 = require("@elementor/ui");
|
|
1250
1303
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
var import_ui16 = require("@elementor/ui");
|
|
1254
|
-
function useDirection() {
|
|
1255
|
-
const theme = (0, import_ui16.useTheme)(), extendedWindow = window;
|
|
1256
|
-
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
1257
|
-
return { isSiteRtl, isUiRtl };
|
|
1258
|
-
}
|
|
1259
|
-
|
|
1260
|
-
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
1261
|
-
var React26 = __toESM(require("react"));
|
|
1262
|
-
var import_react9 = require("react");
|
|
1263
|
-
var import_ui17 = require("@elementor/ui");
|
|
1264
|
-
var CLOCKWISE_ANGLES = {
|
|
1265
|
-
row: 0,
|
|
1266
|
-
column: 90,
|
|
1267
|
-
"row-reverse": 180,
|
|
1268
|
-
"column-reverse": 270
|
|
1269
|
-
};
|
|
1270
|
-
var COUNTER_CLOCKWISE_ANGLES = {
|
|
1271
|
-
row: 0,
|
|
1272
|
-
column: -90,
|
|
1273
|
-
"row-reverse": -180,
|
|
1274
|
-
"column-reverse": -270
|
|
1275
|
-
};
|
|
1276
|
-
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
1277
|
-
const rotate = (0, import_react9.useRef)(useGetTargetAngle(isClockwise, offset));
|
|
1278
|
-
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
1279
|
-
return /* @__PURE__ */ React26.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
1280
|
-
};
|
|
1281
|
-
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
1282
|
-
const [direction] = useStylesField("flex-direction");
|
|
1283
|
-
const isRtl = "rtl" === (0, import_ui17.useTheme)().direction;
|
|
1284
|
-
const rotationMultiplier = isRtl ? -1 : 1;
|
|
1285
|
-
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
1286
|
-
const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
|
|
1287
|
-
const targetAngle = angleMap[direction?.value || "row"] + offset;
|
|
1288
|
-
const diffToTargetAngle = (targetAngle - currentAngle + 360) % 360;
|
|
1289
|
-
const formattedDiff = (diffToTargetAngle + 180) % 360 - 180;
|
|
1290
|
-
return (currentAngle + formattedDiff) * rotationMultiplier;
|
|
1291
|
-
};
|
|
1292
|
-
|
|
1293
|
-
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
1294
|
-
var StartIcon = (0, import_ui18.withDirection)(import_icons7.LayoutAlignLeftIcon);
|
|
1295
|
-
var EndIcon = (0, import_ui18.withDirection)(import_icons7.LayoutAlignRightIcon);
|
|
1304
|
+
var StartIcon = (0, import_ui19.withDirection)(import_icons7.LayoutAlignLeftIcon);
|
|
1305
|
+
var EndIcon = (0, import_ui19.withDirection)(import_icons7.LayoutAlignRightIcon);
|
|
1296
1306
|
var iconProps = {
|
|
1297
1307
|
isClockwise: false,
|
|
1298
1308
|
offset: 90
|
|
@@ -1325,17 +1335,17 @@ var options = [
|
|
|
1325
1335
|
];
|
|
1326
1336
|
var AlignItemsField = () => {
|
|
1327
1337
|
const { isSiteRtl } = useDirection();
|
|
1328
|
-
return /* @__PURE__ */ React27.createElement(
|
|
1338
|
+
return /* @__PURE__ */ React27.createElement(import_ui19.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React27.createElement(import_ui19.ThemeProvider, null, /* @__PURE__ */ React27.createElement(StylesField, { bind: "align-items" }, /* @__PURE__ */ React27.createElement(import_ui19.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui19.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React27.createElement(import_editor_controls13.ControlLabel, null, (0, import_i18n10.__)("Align items", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui19.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React27.createElement(import_editor_controls13.ToggleControl, { options }))))));
|
|
1329
1339
|
};
|
|
1330
1340
|
|
|
1331
1341
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
1332
1342
|
var React28 = __toESM(require("react"));
|
|
1333
1343
|
var import_editor_controls14 = require("@elementor/editor-controls");
|
|
1334
1344
|
var import_icons8 = require("@elementor/icons");
|
|
1335
|
-
var
|
|
1345
|
+
var import_ui20 = require("@elementor/ui");
|
|
1336
1346
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1337
|
-
var StartIcon2 = (0,
|
|
1338
|
-
var EndIcon2 = (0,
|
|
1347
|
+
var StartIcon2 = (0, import_ui20.withDirection)(import_icons8.LayoutAlignLeftIcon);
|
|
1348
|
+
var EndIcon2 = (0, import_ui20.withDirection)(import_icons8.LayoutAlignRightIcon);
|
|
1339
1349
|
var iconProps2 = {
|
|
1340
1350
|
isClockwise: false,
|
|
1341
1351
|
offset: 90
|
|
@@ -1368,13 +1378,13 @@ var options2 = [
|
|
|
1368
1378
|
];
|
|
1369
1379
|
var AlignSelfChild = () => {
|
|
1370
1380
|
const { isSiteRtl } = useDirection();
|
|
1371
|
-
return /* @__PURE__ */ React28.createElement(
|
|
1381
|
+
return /* @__PURE__ */ React28.createElement(import_ui20.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React28.createElement(import_ui20.ThemeProvider, null, /* @__PURE__ */ React28.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React28.createElement(import_ui20.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(import_ui20.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(import_editor_controls14.ControlLabel, null, (0, import_i18n11.__)("Align self", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui20.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React28.createElement(import_editor_controls14.ToggleControl, { options: options2 }))))));
|
|
1372
1382
|
};
|
|
1373
1383
|
|
|
1374
1384
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
1375
1385
|
var React29 = __toESM(require("react"));
|
|
1376
1386
|
var import_editor_controls15 = require("@elementor/editor-controls");
|
|
1377
|
-
var
|
|
1387
|
+
var import_ui21 = require("@elementor/ui");
|
|
1378
1388
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1379
1389
|
var DisplayField = () => {
|
|
1380
1390
|
const options10 = [
|
|
@@ -1397,21 +1407,21 @@ var DisplayField = () => {
|
|
|
1397
1407
|
showTooltip: true
|
|
1398
1408
|
}
|
|
1399
1409
|
];
|
|
1400
|
-
return /* @__PURE__ */ React29.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React29.createElement(
|
|
1410
|
+
return /* @__PURE__ */ React29.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React29.createElement(import_ui21.Stack, { gap: 1 }, /* @__PURE__ */ React29.createElement(import_editor_controls15.ControlLabel, null, (0, import_i18n12.__)("Display", "elementor")), /* @__PURE__ */ React29.createElement(import_editor_controls15.ToggleControl, { options: options10, fullWidth: true })));
|
|
1401
1411
|
};
|
|
1402
1412
|
|
|
1403
1413
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
1404
1414
|
var React30 = __toESM(require("react"));
|
|
1405
1415
|
var import_editor_controls16 = require("@elementor/editor-controls");
|
|
1406
1416
|
var import_icons9 = require("@elementor/icons");
|
|
1407
|
-
var
|
|
1417
|
+
var import_ui22 = require("@elementor/ui");
|
|
1408
1418
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1409
1419
|
var options3 = [
|
|
1410
1420
|
{
|
|
1411
1421
|
value: "row",
|
|
1412
1422
|
label: (0, import_i18n13.__)("Row", "elementor"),
|
|
1413
1423
|
renderContent: ({ size }) => {
|
|
1414
|
-
const StartIcon5 = (0,
|
|
1424
|
+
const StartIcon5 = (0, import_ui22.withDirection)(import_icons9.ArrowRightIcon);
|
|
1415
1425
|
return /* @__PURE__ */ React30.createElement(StartIcon5, { fontSize: size });
|
|
1416
1426
|
},
|
|
1417
1427
|
showTooltip: true
|
|
@@ -1426,7 +1436,7 @@ var options3 = [
|
|
|
1426
1436
|
value: "row-reverse",
|
|
1427
1437
|
label: (0, import_i18n13.__)("Reversed row", "elementor"),
|
|
1428
1438
|
renderContent: ({ size }) => {
|
|
1429
|
-
const EndIcon5 = (0,
|
|
1439
|
+
const EndIcon5 = (0, import_ui22.withDirection)(import_icons9.ArrowLeftIcon);
|
|
1430
1440
|
return /* @__PURE__ */ React30.createElement(EndIcon5, { fontSize: size });
|
|
1431
1441
|
},
|
|
1432
1442
|
showTooltip: true
|
|
@@ -1440,7 +1450,7 @@ var options3 = [
|
|
|
1440
1450
|
];
|
|
1441
1451
|
var FlexDirectionField = () => {
|
|
1442
1452
|
const { isSiteRtl } = useDirection();
|
|
1443
|
-
return /* @__PURE__ */ React30.createElement(
|
|
1453
|
+
return /* @__PURE__ */ React30.createElement(import_ui22.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React30.createElement(import_ui22.ThemeProvider, null, /* @__PURE__ */ React30.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React30.createElement(import_ui22.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(import_editor_controls16.ControlLabel, null, (0, import_i18n13.__)("Direction", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui22.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React30.createElement(import_editor_controls16.ToggleControl, { options: options3 }))))));
|
|
1444
1454
|
};
|
|
1445
1455
|
|
|
1446
1456
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
@@ -1448,7 +1458,7 @@ var React31 = __toESM(require("react"));
|
|
|
1448
1458
|
var import_react10 = require("react");
|
|
1449
1459
|
var import_editor_controls17 = require("@elementor/editor-controls");
|
|
1450
1460
|
var import_icons10 = require("@elementor/icons");
|
|
1451
|
-
var
|
|
1461
|
+
var import_ui23 = require("@elementor/ui");
|
|
1452
1462
|
var import_i18n14 = require("@wordpress/i18n");
|
|
1453
1463
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
1454
1464
|
var LAST_DEFAULT_VALUE = 99999;
|
|
@@ -1490,7 +1500,7 @@ var FlexOrderField = () => {
|
|
|
1490
1500
|
}
|
|
1491
1501
|
setOrder({ $$type: "number", value: orderValueMap[group] });
|
|
1492
1502
|
};
|
|
1493
|
-
return /* @__PURE__ */ React31.createElement(
|
|
1503
|
+
return /* @__PURE__ */ React31.createElement(import_ui23.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React31.createElement(import_ui23.ThemeProvider, null, /* @__PURE__ */ React31.createElement(import_ui23.Stack, { gap: 2 }, /* @__PURE__ */ React31.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(import_editor_controls17.ControlLabel, null, (0, import_i18n14.__)("Order", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui23.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React31.createElement(
|
|
1494
1504
|
import_editor_controls17.ControlToggleButtonGroup,
|
|
1495
1505
|
{
|
|
1496
1506
|
items,
|
|
@@ -1498,7 +1508,7 @@ var FlexOrderField = () => {
|
|
|
1498
1508
|
onChange: handleToggleButtonChange,
|
|
1499
1509
|
exclusive: true
|
|
1500
1510
|
}
|
|
1501
|
-
))), CUSTOM === groupControlValue && /* @__PURE__ */ React31.createElement(StylesField, { bind: "order" }, /* @__PURE__ */ React31.createElement(
|
|
1511
|
+
))), CUSTOM === groupControlValue && /* @__PURE__ */ React31.createElement(StylesField, { bind: "order" }, /* @__PURE__ */ React31.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(import_editor_controls17.ControlLabel, null, (0, import_i18n14.__)("Custom order", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui23.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React31.createElement(
|
|
1502
1512
|
import_editor_controls17.NumberControl,
|
|
1503
1513
|
{
|
|
1504
1514
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -1522,7 +1532,7 @@ var React32 = __toESM(require("react"));
|
|
|
1522
1532
|
var import_react11 = require("react");
|
|
1523
1533
|
var import_editor_controls18 = require("@elementor/editor-controls");
|
|
1524
1534
|
var import_icons11 = require("@elementor/icons");
|
|
1525
|
-
var
|
|
1535
|
+
var import_ui24 = require("@elementor/ui");
|
|
1526
1536
|
var import_i18n15 = require("@wordpress/i18n");
|
|
1527
1537
|
var DEFAULT = 1;
|
|
1528
1538
|
var items2 = [
|
|
@@ -1565,7 +1575,7 @@ var FlexSizeField = () => {
|
|
|
1565
1575
|
setGrowField(null);
|
|
1566
1576
|
setShrinkField({ $$type: "number", value: DEFAULT });
|
|
1567
1577
|
};
|
|
1568
|
-
return /* @__PURE__ */ React32.createElement(
|
|
1578
|
+
return /* @__PURE__ */ React32.createElement(import_ui24.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React32.createElement(import_ui24.ThemeProvider, null, /* @__PURE__ */ React32.createElement(import_ui24.Stack, { gap: 2 }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Size", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(
|
|
1569
1579
|
import_editor_controls18.ControlToggleButtonGroup,
|
|
1570
1580
|
{
|
|
1571
1581
|
value: activeGroup,
|
|
@@ -1575,7 +1585,7 @@ var FlexSizeField = () => {
|
|
|
1575
1585
|
}
|
|
1576
1586
|
))), "custom" === activeGroup && /* @__PURE__ */ React32.createElement(FlexCustomField, null))));
|
|
1577
1587
|
};
|
|
1578
|
-
var FlexCustomField = () => /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React32.createElement(
|
|
1588
|
+
var FlexCustomField = () => /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Grow", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(import_editor_controls18.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React32.createElement(StylesField, { bind: "flex-shrink" }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Shrink", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(import_editor_controls18.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React32.createElement(StylesField, { bind: "flex-basis" }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Basis", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(import_editor_controls18.SizeControl, null)))));
|
|
1579
1589
|
var getActiveGroup = ({
|
|
1580
1590
|
grow,
|
|
1581
1591
|
shrink,
|
|
@@ -1599,20 +1609,20 @@ var getActiveGroup = ({
|
|
|
1599
1609
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
1600
1610
|
var React33 = __toESM(require("react"));
|
|
1601
1611
|
var import_editor_controls19 = require("@elementor/editor-controls");
|
|
1602
|
-
var
|
|
1612
|
+
var import_ui25 = require("@elementor/ui");
|
|
1603
1613
|
var import_i18n16 = require("@wordpress/i18n");
|
|
1604
1614
|
var GapControlField = () => {
|
|
1605
|
-
return /* @__PURE__ */ React33.createElement(
|
|
1615
|
+
return /* @__PURE__ */ React33.createElement(import_ui25.Stack, { gap: 1 }, /* @__PURE__ */ React33.createElement(StylesField, { bind: "gap" }, /* @__PURE__ */ React33.createElement(import_editor_controls19.GapControl, { label: (0, import_i18n16.__)("Gaps", "elementor") })));
|
|
1606
1616
|
};
|
|
1607
1617
|
|
|
1608
1618
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
1609
1619
|
var React34 = __toESM(require("react"));
|
|
1610
1620
|
var import_editor_controls20 = require("@elementor/editor-controls");
|
|
1611
1621
|
var import_icons12 = require("@elementor/icons");
|
|
1612
|
-
var
|
|
1622
|
+
var import_ui26 = require("@elementor/ui");
|
|
1613
1623
|
var import_i18n17 = require("@wordpress/i18n");
|
|
1614
|
-
var StartIcon3 = (0,
|
|
1615
|
-
var EndIcon3 = (0,
|
|
1624
|
+
var StartIcon3 = (0, import_ui26.withDirection)(import_icons12.JustifyTopIcon);
|
|
1625
|
+
var EndIcon3 = (0, import_ui26.withDirection)(import_icons12.JustifyBottomIcon);
|
|
1616
1626
|
var iconProps3 = {
|
|
1617
1627
|
isClockwise: true,
|
|
1618
1628
|
offset: -90
|
|
@@ -1657,14 +1667,14 @@ var options4 = [
|
|
|
1657
1667
|
];
|
|
1658
1668
|
var JustifyContentField = () => {
|
|
1659
1669
|
const { isSiteRtl } = useDirection();
|
|
1660
|
-
return /* @__PURE__ */ React34.createElement(
|
|
1670
|
+
return /* @__PURE__ */ React34.createElement(import_ui26.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React34.createElement(import_ui26.ThemeProvider, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React34.createElement(import_ui26.Stack, { gap: 1 }, /* @__PURE__ */ React34.createElement(import_editor_controls20.ControlLabel, null, (0, import_i18n17.__)("Justify content", "elementor")), /* @__PURE__ */ React34.createElement(import_editor_controls20.ToggleControl, { options: options4, fullWidth: true })))));
|
|
1661
1671
|
};
|
|
1662
1672
|
|
|
1663
1673
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
1664
1674
|
var React35 = __toESM(require("react"));
|
|
1665
1675
|
var import_editor_controls21 = require("@elementor/editor-controls");
|
|
1666
1676
|
var import_icons13 = require("@elementor/icons");
|
|
1667
|
-
var
|
|
1677
|
+
var import_ui27 = require("@elementor/ui");
|
|
1668
1678
|
var import_i18n18 = require("@wordpress/i18n");
|
|
1669
1679
|
var options5 = [
|
|
1670
1680
|
{
|
|
@@ -1688,7 +1698,7 @@ var options5 = [
|
|
|
1688
1698
|
];
|
|
1689
1699
|
var WrapField = () => {
|
|
1690
1700
|
const { isSiteRtl } = useDirection();
|
|
1691
|
-
return /* @__PURE__ */ React35.createElement(
|
|
1701
|
+
return /* @__PURE__ */ React35.createElement(import_ui27.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React35.createElement(import_ui27.ThemeProvider, null, /* @__PURE__ */ React35.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React35.createElement(import_ui27.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(import_ui27.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(import_editor_controls21.ControlLabel, null, (0, import_i18n18.__)("Wrap", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui27.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React35.createElement(import_editor_controls21.ToggleControl, { options: options5 }))))));
|
|
1692
1702
|
};
|
|
1693
1703
|
|
|
1694
1704
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -1697,21 +1707,21 @@ var LayoutSection = () => {
|
|
|
1697
1707
|
const { element } = useElement();
|
|
1698
1708
|
const parent = (0, import_editor_elements5.useParentElement)(element.id);
|
|
1699
1709
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
1700
|
-
return /* @__PURE__ */ React36.createElement(
|
|
1710
|
+
return /* @__PURE__ */ React36.createElement(import_ui28.Stack, { gap: 2 }, /* @__PURE__ */ React36.createElement(DisplayField, null), "flex" === display?.value && /* @__PURE__ */ React36.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React36.createElement(FlexChildFields, null));
|
|
1701
1711
|
};
|
|
1702
|
-
var FlexFields = () => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(FlexDirectionField, null), /* @__PURE__ */ React36.createElement(JustifyContentField, null), /* @__PURE__ */ React36.createElement(AlignItemsField, null), /* @__PURE__ */ React36.createElement(
|
|
1703
|
-
var FlexChildFields = () => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
|
|
1712
|
+
var FlexFields = () => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(FlexDirectionField, null), /* @__PURE__ */ React36.createElement(JustifyContentField, null), /* @__PURE__ */ React36.createElement(AlignItemsField, null), /* @__PURE__ */ React36.createElement(import_ui28.Divider, null), /* @__PURE__ */ React36.createElement(GapControlField, null), /* @__PURE__ */ React36.createElement(WrapField, null));
|
|
1713
|
+
var FlexChildFields = () => /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(import_ui28.Divider, null), /* @__PURE__ */ React36.createElement(import_editor_controls22.ControlLabel, null, (0, import_i18n19.__)("Flex child", "elementor")), /* @__PURE__ */ React36.createElement(AlignSelfChild, null), /* @__PURE__ */ React36.createElement(FlexOrderField, null), /* @__PURE__ */ React36.createElement(FlexSizeField, null));
|
|
1704
1714
|
|
|
1705
1715
|
// src/components/style-sections/position-section/position-section.tsx
|
|
1706
1716
|
var React40 = __toESM(require("react"));
|
|
1707
1717
|
var import_session2 = require("@elementor/session");
|
|
1708
|
-
var
|
|
1718
|
+
var import_ui32 = require("@elementor/ui");
|
|
1709
1719
|
|
|
1710
1720
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
1711
1721
|
var React37 = __toESM(require("react"));
|
|
1712
1722
|
var import_editor_controls23 = require("@elementor/editor-controls");
|
|
1713
1723
|
var import_icons14 = require("@elementor/icons");
|
|
1714
|
-
var
|
|
1724
|
+
var import_ui29 = require("@elementor/ui");
|
|
1715
1725
|
var import_i18n20 = require("@wordpress/i18n");
|
|
1716
1726
|
var sideIcons = {
|
|
1717
1727
|
left: /* @__PURE__ */ React37.createElement(import_icons14.SideLeftIcon, { fontSize: "tiny" }),
|
|
@@ -1720,16 +1730,16 @@ var sideIcons = {
|
|
|
1720
1730
|
bottom: /* @__PURE__ */ React37.createElement(import_icons14.SideBottomIcon, { fontSize: "tiny" })
|
|
1721
1731
|
};
|
|
1722
1732
|
var DimensionsField = () => {
|
|
1723
|
-
return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(
|
|
1733
|
+
return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(DimensionField, { side: "top", label: (0, import_i18n20.__)("Top", "elementor") }), /* @__PURE__ */ React37.createElement(DimensionField, { side: "right", label: (0, import_i18n20.__)("Right", "elementor") })), /* @__PURE__ */ React37.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(DimensionField, { side: "bottom", label: (0, import_i18n20.__)("Bottom", "elementor") }), /* @__PURE__ */ React37.createElement(DimensionField, { side: "left", label: (0, import_i18n20.__)("Left", "elementor") })));
|
|
1724
1734
|
};
|
|
1725
1735
|
var DimensionField = ({ side, label }) => {
|
|
1726
|
-
return /* @__PURE__ */ React37.createElement(
|
|
1736
|
+
return /* @__PURE__ */ React37.createElement(import_ui29.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React37.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(import_editor_controls23.ControlLabel, null, label)), /* @__PURE__ */ React37.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(StylesField, { bind: side }, /* @__PURE__ */ React37.createElement(import_editor_controls23.SizeControl, { startIcon: sideIcons[side] }))));
|
|
1727
1737
|
};
|
|
1728
1738
|
|
|
1729
1739
|
// src/components/style-sections/position-section/position-field.tsx
|
|
1730
1740
|
var React38 = __toESM(require("react"));
|
|
1731
1741
|
var import_editor_controls24 = require("@elementor/editor-controls");
|
|
1732
|
-
var
|
|
1742
|
+
var import_ui30 = require("@elementor/ui");
|
|
1733
1743
|
var import_i18n21 = require("@wordpress/i18n");
|
|
1734
1744
|
var positionOptions = [
|
|
1735
1745
|
{ label: (0, import_i18n21.__)("Static", "elementor"), value: "static" },
|
|
@@ -1739,16 +1749,16 @@ var positionOptions = [
|
|
|
1739
1749
|
{ label: (0, import_i18n21.__)("Sticky", "elementor"), value: "sticky" }
|
|
1740
1750
|
];
|
|
1741
1751
|
var PositionField = ({ onChange }) => {
|
|
1742
|
-
return /* @__PURE__ */ React38.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React38.createElement(
|
|
1752
|
+
return /* @__PURE__ */ React38.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React38.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(import_editor_controls24.ControlLabel, null, (0, import_i18n21.__)("Position", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(import_editor_controls24.SelectControl, { options: positionOptions, onChange }))));
|
|
1743
1753
|
};
|
|
1744
1754
|
|
|
1745
1755
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
1746
1756
|
var React39 = __toESM(require("react"));
|
|
1747
1757
|
var import_editor_controls25 = require("@elementor/editor-controls");
|
|
1748
|
-
var
|
|
1758
|
+
var import_ui31 = require("@elementor/ui");
|
|
1749
1759
|
var import_i18n22 = require("@wordpress/i18n");
|
|
1750
1760
|
var ZIndexField = () => {
|
|
1751
|
-
return /* @__PURE__ */ React39.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React39.createElement(
|
|
1761
|
+
return /* @__PURE__ */ React39.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React39.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(import_editor_controls25.ControlLabel, null, (0, import_i18n22.__)("Z-Index", "elementor"))), /* @__PURE__ */ React39.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(import_editor_controls25.NumberControl, null))));
|
|
1752
1762
|
};
|
|
1753
1763
|
|
|
1754
1764
|
// src/components/style-sections/position-section/position-section.tsx
|
|
@@ -1780,7 +1790,7 @@ var PositionSection = () => {
|
|
|
1780
1790
|
}
|
|
1781
1791
|
};
|
|
1782
1792
|
const isNotStatic = positionValue && positionValue?.value !== "static";
|
|
1783
|
-
return /* @__PURE__ */ React40.createElement(
|
|
1793
|
+
return /* @__PURE__ */ React40.createElement(import_ui32.Stack, { gap: 1.5 }, /* @__PURE__ */ React40.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(DimensionsField, null), /* @__PURE__ */ React40.createElement(ZIndexField, null)) : null);
|
|
1784
1794
|
};
|
|
1785
1795
|
var usePersistDimensions = () => {
|
|
1786
1796
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -1792,14 +1802,14 @@ var usePersistDimensions = () => {
|
|
|
1792
1802
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1793
1803
|
var React42 = __toESM(require("react"));
|
|
1794
1804
|
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
1795
|
-
var
|
|
1805
|
+
var import_ui34 = require("@elementor/ui");
|
|
1796
1806
|
var import_i18n24 = require("@wordpress/i18n");
|
|
1797
1807
|
|
|
1798
1808
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
1799
1809
|
var React41 = __toESM(require("react"));
|
|
1800
1810
|
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
1801
1811
|
var import_icons15 = require("@elementor/icons");
|
|
1802
|
-
var
|
|
1812
|
+
var import_ui33 = require("@elementor/ui");
|
|
1803
1813
|
var import_i18n23 = require("@wordpress/i18n");
|
|
1804
1814
|
var options6 = [
|
|
1805
1815
|
{
|
|
@@ -1822,42 +1832,42 @@ var options6 = [
|
|
|
1822
1832
|
}
|
|
1823
1833
|
];
|
|
1824
1834
|
var OverflowField = () => {
|
|
1825
|
-
return /* @__PURE__ */ React41.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React41.createElement(
|
|
1835
|
+
return /* @__PURE__ */ React41.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React41.createElement(import_ui33.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(import_editor_controls26.ControlLabel, null, (0, import_i18n23.__)("Overflow", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(import_editor_controls26.ToggleControl, { options: options6 }))));
|
|
1826
1836
|
};
|
|
1827
1837
|
|
|
1828
1838
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1829
1839
|
var SizeSection = () => {
|
|
1830
|
-
return /* @__PURE__ */ React42.createElement(
|
|
1840
|
+
return /* @__PURE__ */ React42.createElement(import_ui34.Stack, { gap: 1.5 }, /* @__PURE__ */ React42.createElement(import_ui34.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React42.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(SizeField, { bind: "width", label: (0, import_i18n24.__)("Width", "elementor") })), /* @__PURE__ */ React42.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(SizeField, { bind: "height", label: (0, import_i18n24.__)("Height", "elementor") }))), /* @__PURE__ */ React42.createElement(import_ui34.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React42.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(SizeField, { bind: "min-width", label: (0, import_i18n24.__)("Min. Width", "elementor") })), /* @__PURE__ */ React42.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(SizeField, { bind: "min-height", label: (0, import_i18n24.__)("Min. Height", "elementor") }))), /* @__PURE__ */ React42.createElement(import_ui34.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React42.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(SizeField, { bind: "max-width", label: (0, import_i18n24.__)("Max. Width", "elementor") })), /* @__PURE__ */ React42.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(SizeField, { bind: "max-height", label: (0, import_i18n24.__)("Max. Height", "elementor") }))), /* @__PURE__ */ React42.createElement(import_ui34.Divider, null), /* @__PURE__ */ React42.createElement(import_ui34.Stack, null, /* @__PURE__ */ React42.createElement(OverflowField, null)));
|
|
1831
1841
|
};
|
|
1832
1842
|
var SizeField = ({ label, bind }) => {
|
|
1833
|
-
return /* @__PURE__ */ React42.createElement(StylesField, { bind }, /* @__PURE__ */ React42.createElement(
|
|
1843
|
+
return /* @__PURE__ */ React42.createElement(StylesField, { bind }, /* @__PURE__ */ React42.createElement(import_ui34.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React42.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(import_editor_controls27.ControlLabel, null, label)), /* @__PURE__ */ React42.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(import_editor_controls27.SizeControl, null))));
|
|
1834
1844
|
};
|
|
1835
1845
|
|
|
1836
1846
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
1837
1847
|
var React43 = __toESM(require("react"));
|
|
1838
1848
|
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
1839
|
-
var
|
|
1849
|
+
var import_ui35 = require("@elementor/ui");
|
|
1840
1850
|
var import_i18n25 = require("@wordpress/i18n");
|
|
1841
1851
|
var SpacingSection = () => {
|
|
1842
|
-
return /* @__PURE__ */ React43.createElement(
|
|
1852
|
+
return /* @__PURE__ */ React43.createElement(import_ui35.Stack, { gap: 1.5 }, /* @__PURE__ */ React43.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React43.createElement(import_editor_controls28.LinkedDimensionsControl, { label: (0, import_i18n25.__)("Padding", "elementor") })), /* @__PURE__ */ React43.createElement(import_ui35.Divider, null), /* @__PURE__ */ React43.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React43.createElement(import_editor_controls28.LinkedDimensionsControl, { label: (0, import_i18n25.__)("Margin", "elementor") })));
|
|
1843
1853
|
};
|
|
1844
1854
|
|
|
1845
1855
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
1846
1856
|
var React57 = __toESM(require("react"));
|
|
1847
|
-
var
|
|
1857
|
+
var import_ui48 = require("@elementor/ui");
|
|
1848
1858
|
|
|
1849
1859
|
// src/components/collapsible-content.tsx
|
|
1850
1860
|
var React44 = __toESM(require("react"));
|
|
1851
1861
|
var import_react12 = require("react");
|
|
1852
|
-
var
|
|
1862
|
+
var import_ui36 = require("@elementor/ui");
|
|
1853
1863
|
var import_i18n26 = require("@wordpress/i18n");
|
|
1854
1864
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
1855
1865
|
const [open, setOpen] = (0, import_react12.useState)(defaultOpen);
|
|
1856
1866
|
const handleToggle = () => {
|
|
1857
1867
|
setOpen((prevOpen) => !prevOpen);
|
|
1858
1868
|
};
|
|
1859
|
-
return /* @__PURE__ */ React44.createElement(
|
|
1860
|
-
|
|
1869
|
+
return /* @__PURE__ */ React44.createElement(import_ui36.Stack, { sx: { py: 0.5 } }, /* @__PURE__ */ React44.createElement(
|
|
1870
|
+
import_ui36.Button,
|
|
1861
1871
|
{
|
|
1862
1872
|
fullWidth: true,
|
|
1863
1873
|
size: "small",
|
|
@@ -1867,13 +1877,13 @@ var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
|
1867
1877
|
endIcon: /* @__PURE__ */ React44.createElement(CollapseIcon, { open })
|
|
1868
1878
|
},
|
|
1869
1879
|
open ? (0, import_i18n26.__)("Show less", "elementor") : (0, import_i18n26.__)("Show more", "elementor")
|
|
1870
|
-
), /* @__PURE__ */ React44.createElement(
|
|
1880
|
+
), /* @__PURE__ */ React44.createElement(import_ui36.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
1871
1881
|
};
|
|
1872
1882
|
|
|
1873
1883
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
1874
1884
|
var React45 = __toESM(require("react"));
|
|
1875
1885
|
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
1876
|
-
var
|
|
1886
|
+
var import_ui37 = require("@elementor/ui");
|
|
1877
1887
|
var import_i18n27 = require("@wordpress/i18n");
|
|
1878
1888
|
|
|
1879
1889
|
// src/sync/get-elementor-config.ts
|
|
@@ -1888,7 +1898,7 @@ var FontFamilyField = () => {
|
|
|
1888
1898
|
if (!fontFamilies) {
|
|
1889
1899
|
return null;
|
|
1890
1900
|
}
|
|
1891
|
-
return /* @__PURE__ */ React45.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React45.createElement(
|
|
1901
|
+
return /* @__PURE__ */ React45.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React45.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(import_editor_controls29.ControlLabel, null, (0, import_i18n27.__)("Font Family", "elementor"))), /* @__PURE__ */ React45.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(import_editor_controls29.FontFamilyControl, { fontFamilies }))));
|
|
1892
1902
|
};
|
|
1893
1903
|
var getFontFamilies = () => {
|
|
1894
1904
|
const { controls } = getElementorConfig();
|
|
@@ -1902,16 +1912,16 @@ var getFontFamilies = () => {
|
|
|
1902
1912
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
1903
1913
|
var React46 = __toESM(require("react"));
|
|
1904
1914
|
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
1905
|
-
var
|
|
1915
|
+
var import_ui38 = require("@elementor/ui");
|
|
1906
1916
|
var import_i18n28 = require("@wordpress/i18n");
|
|
1907
1917
|
var FontSizeField = () => {
|
|
1908
|
-
return /* @__PURE__ */ React46.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React46.createElement(
|
|
1918
|
+
return /* @__PURE__ */ React46.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(import_editor_controls30.ControlLabel, null, (0, import_i18n28.__)("Font Size", "elementor"))), /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(import_editor_controls30.SizeControl, null))));
|
|
1909
1919
|
};
|
|
1910
1920
|
|
|
1911
1921
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
1912
1922
|
var React47 = __toESM(require("react"));
|
|
1913
1923
|
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
1914
|
-
var
|
|
1924
|
+
var import_ui39 = require("@elementor/ui");
|
|
1915
1925
|
var import_i18n29 = require("@wordpress/i18n");
|
|
1916
1926
|
var fontWeightOptions = [
|
|
1917
1927
|
{ value: "100", label: (0, import_i18n29.__)("100 - Thin", "elementor") },
|
|
@@ -1925,35 +1935,35 @@ var fontWeightOptions = [
|
|
|
1925
1935
|
{ value: "900", label: (0, import_i18n29.__)("900 - Black", "elementor") }
|
|
1926
1936
|
];
|
|
1927
1937
|
var FontWeightField = () => {
|
|
1928
|
-
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React47.createElement(
|
|
1938
|
+
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React47.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(import_editor_controls31.ControlLabel, null, (0, import_i18n29.__)("Font Weight", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(import_editor_controls31.SelectControl, { options: fontWeightOptions }))));
|
|
1929
1939
|
};
|
|
1930
1940
|
|
|
1931
1941
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
1932
1942
|
var React48 = __toESM(require("react"));
|
|
1933
1943
|
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
1934
|
-
var
|
|
1944
|
+
var import_ui40 = require("@elementor/ui");
|
|
1935
1945
|
var import_i18n30 = require("@wordpress/i18n");
|
|
1936
1946
|
var LetterSpacingField = () => {
|
|
1937
|
-
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React48.createElement(
|
|
1947
|
+
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React48.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(import_editor_controls32.ControlLabel, null, (0, import_i18n30.__)("Letter Spacing", "elementor"))), /* @__PURE__ */ React48.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(import_editor_controls32.SizeControl, null))));
|
|
1938
1948
|
};
|
|
1939
1949
|
|
|
1940
1950
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
1941
1951
|
var React49 = __toESM(require("react"));
|
|
1942
1952
|
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
1943
|
-
var
|
|
1953
|
+
var import_ui41 = require("@elementor/ui");
|
|
1944
1954
|
var import_i18n31 = require("@wordpress/i18n");
|
|
1945
1955
|
var LineHeightField = () => {
|
|
1946
|
-
return /* @__PURE__ */ React49.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React49.createElement(
|
|
1956
|
+
return /* @__PURE__ */ React49.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React49.createElement(import_ui41.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(import_editor_controls33.ControlLabel, null, (0, import_i18n31.__)("Line Height", "elementor"))), /* @__PURE__ */ React49.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(import_editor_controls33.SizeControl, null))));
|
|
1947
1957
|
};
|
|
1948
1958
|
|
|
1949
1959
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
1950
1960
|
var React50 = __toESM(require("react"));
|
|
1951
1961
|
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
1952
1962
|
var import_icons16 = require("@elementor/icons");
|
|
1953
|
-
var
|
|
1963
|
+
var import_ui42 = require("@elementor/ui");
|
|
1954
1964
|
var import_i18n32 = require("@wordpress/i18n");
|
|
1955
|
-
var StartIcon4 = (0,
|
|
1956
|
-
var EndIcon4 = (0,
|
|
1965
|
+
var StartIcon4 = (0, import_ui42.withDirection)(import_icons16.AlignLeftIcon);
|
|
1966
|
+
var EndIcon4 = (0, import_ui42.withDirection)(import_icons16.AlignRightIcon);
|
|
1957
1967
|
var options7 = [
|
|
1958
1968
|
{
|
|
1959
1969
|
value: "start",
|
|
@@ -1981,23 +1991,23 @@ var options7 = [
|
|
|
1981
1991
|
}
|
|
1982
1992
|
];
|
|
1983
1993
|
var TextAlignmentField = () => {
|
|
1984
|
-
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React50.createElement(
|
|
1994
|
+
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React50.createElement(import_ui42.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React50.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(import_editor_controls34.ControlLabel, null, (0, import_i18n32.__)("Alignment", "elementor"))), /* @__PURE__ */ React50.createElement(import_ui42.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React50.createElement(import_editor_controls34.ToggleControl, { options: options7 }))));
|
|
1985
1995
|
};
|
|
1986
1996
|
|
|
1987
1997
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
1988
1998
|
var React51 = __toESM(require("react"));
|
|
1989
1999
|
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
1990
|
-
var
|
|
2000
|
+
var import_ui43 = require("@elementor/ui");
|
|
1991
2001
|
var import_i18n33 = require("@wordpress/i18n");
|
|
1992
2002
|
var TextColorField = () => {
|
|
1993
|
-
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React51.createElement(
|
|
2003
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls35.ControlLabel, null, (0, import_i18n33.__)("Text Color", "elementor"))), /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls35.ColorControl, null))));
|
|
1994
2004
|
};
|
|
1995
2005
|
|
|
1996
2006
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
1997
2007
|
var React52 = __toESM(require("react"));
|
|
1998
2008
|
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
1999
2009
|
var import_icons17 = require("@elementor/icons");
|
|
2000
|
-
var
|
|
2010
|
+
var import_ui44 = require("@elementor/ui");
|
|
2001
2011
|
var import_i18n34 = require("@wordpress/i18n");
|
|
2002
2012
|
var options8 = [
|
|
2003
2013
|
{
|
|
@@ -2012,7 +2022,7 @@ var options8 = [
|
|
|
2012
2022
|
}
|
|
2013
2023
|
];
|
|
2014
2024
|
var TextDirectionField = () => {
|
|
2015
|
-
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React52.createElement(
|
|
2025
|
+
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls36.ControlLabel, null, (0, import_i18n34.__)("Direction", "elementor"))), /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React52.createElement(import_editor_controls36.ToggleControl, { options: options8 }))));
|
|
2016
2026
|
};
|
|
2017
2027
|
|
|
2018
2028
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -2036,7 +2046,7 @@ var initTextStroke = {
|
|
|
2036
2046
|
}
|
|
2037
2047
|
};
|
|
2038
2048
|
var TextStrokeField = () => {
|
|
2039
|
-
const [textStroke, setTextStroke] = useStylesField("
|
|
2049
|
+
const [textStroke, setTextStroke] = useStylesField("stroke");
|
|
2040
2050
|
const addTextStroke = () => {
|
|
2041
2051
|
setTextStroke(initTextStroke);
|
|
2042
2052
|
};
|
|
@@ -2052,7 +2062,7 @@ var TextStrokeField = () => {
|
|
|
2052
2062
|
onAdd: addTextStroke,
|
|
2053
2063
|
onRemove: removeTextStroke
|
|
2054
2064
|
},
|
|
2055
|
-
/* @__PURE__ */ React53.createElement(StylesField, { bind: "
|
|
2065
|
+
/* @__PURE__ */ React53.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React53.createElement(import_editor_controls37.StrokeControl, null))
|
|
2056
2066
|
);
|
|
2057
2067
|
};
|
|
2058
2068
|
|
|
@@ -2060,7 +2070,7 @@ var TextStrokeField = () => {
|
|
|
2060
2070
|
var React54 = __toESM(require("react"));
|
|
2061
2071
|
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
2062
2072
|
var import_icons18 = require("@elementor/icons");
|
|
2063
|
-
var
|
|
2073
|
+
var import_ui45 = require("@elementor/ui");
|
|
2064
2074
|
var import_i18n36 = require("@wordpress/i18n");
|
|
2065
2075
|
var buttonSize = "tiny";
|
|
2066
2076
|
var TextStyleField = () => {
|
|
@@ -2085,7 +2095,7 @@ var TextStyleField = () => {
|
|
|
2085
2095
|
value: newValue
|
|
2086
2096
|
});
|
|
2087
2097
|
};
|
|
2088
|
-
return /* @__PURE__ */ React54.createElement(
|
|
2098
|
+
return /* @__PURE__ */ React54.createElement(import_ui45.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(import_editor_controls38.ControlLabel, null, (0, import_i18n36.__)("Style", "elementor"))), /* @__PURE__ */ React54.createElement(import_ui45.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React54.createElement(import_ui45.ToggleButtonGroup, { value: formats }, /* @__PURE__ */ React54.createElement(
|
|
2089
2099
|
ToggleButton,
|
|
2090
2100
|
{
|
|
2091
2101
|
value: "italic",
|
|
@@ -2136,14 +2146,14 @@ var ToggleButton = ({ onChange, ...props }) => {
|
|
|
2136
2146
|
const handleChange = (_e, newValue) => {
|
|
2137
2147
|
onChange(newValue);
|
|
2138
2148
|
};
|
|
2139
|
-
return /* @__PURE__ */ React54.createElement(
|
|
2149
|
+
return /* @__PURE__ */ React54.createElement(import_ui45.ToggleButton, { ...props, onChange: handleChange, size: buttonSize });
|
|
2140
2150
|
};
|
|
2141
2151
|
|
|
2142
2152
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
2143
2153
|
var React55 = __toESM(require("react"));
|
|
2144
2154
|
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
2145
2155
|
var import_icons19 = require("@elementor/icons");
|
|
2146
|
-
var
|
|
2156
|
+
var import_ui46 = require("@elementor/ui");
|
|
2147
2157
|
var import_i18n37 = require("@wordpress/i18n");
|
|
2148
2158
|
var options9 = [
|
|
2149
2159
|
{
|
|
@@ -2171,20 +2181,20 @@ var options9 = [
|
|
|
2171
2181
|
showTooltip: true
|
|
2172
2182
|
}
|
|
2173
2183
|
];
|
|
2174
|
-
var TransformField = () => /* @__PURE__ */ React55.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React55.createElement(
|
|
2184
|
+
var TransformField = () => /* @__PURE__ */ React55.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React55.createElement(import_ui46.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(import_editor_controls39.ControlLabel, null, (0, import_i18n37.__)("Text Transform", "elementor"))), /* @__PURE__ */ React55.createElement(import_ui46.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React55.createElement(import_editor_controls39.ToggleControl, { options: options9 }))));
|
|
2175
2185
|
|
|
2176
2186
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
2177
2187
|
var React56 = __toESM(require("react"));
|
|
2178
2188
|
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
2179
|
-
var
|
|
2189
|
+
var import_ui47 = require("@elementor/ui");
|
|
2180
2190
|
var import_i18n38 = require("@wordpress/i18n");
|
|
2181
2191
|
var WordSpacingField = () => {
|
|
2182
|
-
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React56.createElement(
|
|
2192
|
+
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React56.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(import_editor_controls40.ControlLabel, null, (0, import_i18n38.__)("Word Spacing", "elementor"))), /* @__PURE__ */ React56.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(import_editor_controls40.SizeControl, null))));
|
|
2183
2193
|
};
|
|
2184
2194
|
|
|
2185
2195
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
2186
2196
|
var TypographySection = () => {
|
|
2187
|
-
return /* @__PURE__ */ React57.createElement(
|
|
2197
|
+
return /* @__PURE__ */ React57.createElement(import_ui48.Stack, { gap: 1.5 }, /* @__PURE__ */ React57.createElement(FontFamilyField, null), /* @__PURE__ */ React57.createElement(FontWeightField, null), /* @__PURE__ */ React57.createElement(FontSizeField, null), /* @__PURE__ */ React57.createElement(import_ui48.Divider, null), /* @__PURE__ */ React57.createElement(TextAlignmentField, null), /* @__PURE__ */ React57.createElement(TextColorField, null), /* @__PURE__ */ React57.createElement(CollapsibleContent, null, /* @__PURE__ */ React57.createElement(import_ui48.Stack, { gap: 1.5, sx: { pt: 1.5 } }, /* @__PURE__ */ React57.createElement(LineHeightField, null), /* @__PURE__ */ React57.createElement(LetterSpacingField, null), /* @__PURE__ */ React57.createElement(WordSpacingField, null), /* @__PURE__ */ React57.createElement(import_ui48.Divider, null), /* @__PURE__ */ React57.createElement(TextStyleField, null), /* @__PURE__ */ React57.createElement(TransformField, null), /* @__PURE__ */ React57.createElement(TextDirectionField, null), /* @__PURE__ */ React57.createElement(TextStrokeField, null))));
|
|
2188
2198
|
};
|
|
2189
2199
|
|
|
2190
2200
|
// src/components/style-tab.tsx
|
|
@@ -2205,7 +2215,7 @@ var StyleTab = () => {
|
|
|
2205
2215
|
},
|
|
2206
2216
|
setMetaState: setActiveStyleState
|
|
2207
2217
|
},
|
|
2208
|
-
/* @__PURE__ */ React58.createElement(import_session3.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React58.createElement(CssClassSelector, null), /* @__PURE__ */ React58.createElement(
|
|
2218
|
+
/* @__PURE__ */ React58.createElement(import_session3.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React58.createElement(CssClassSelector, null), /* @__PURE__ */ React58.createElement(import_ui49.Divider, null), /* @__PURE__ */ React58.createElement(SectionsList, null, /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n39.__)("Layout", "elementor") }, /* @__PURE__ */ React58.createElement(LayoutSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n39.__)("Spacing", "elementor") }, /* @__PURE__ */ React58.createElement(SpacingSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n39.__)("Size", "elementor") }, /* @__PURE__ */ React58.createElement(SizeSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n39.__)("Position", "elementor") }, /* @__PURE__ */ React58.createElement(PositionSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n39.__)("Typography", "elementor") }, /* @__PURE__ */ React58.createElement(TypographySection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n39.__)("Background", "elementor") }, /* @__PURE__ */ React58.createElement(BackgroundSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n39.__)("Border", "elementor") }, /* @__PURE__ */ React58.createElement(BorderSection, null)), /* @__PURE__ */ React58.createElement(Section, { title: (0, import_i18n39.__)("Effects", "elementor") }, /* @__PURE__ */ React58.createElement(EffectsSection, null))))
|
|
2209
2219
|
));
|
|
2210
2220
|
};
|
|
2211
2221
|
function useActiveStyleDefId(currentClassesProp) {
|
|
@@ -2233,11 +2243,11 @@ function useCurrentClassesProp() {
|
|
|
2233
2243
|
// src/components/editing-panel-tabs.tsx
|
|
2234
2244
|
var EditingPanelTabs = () => {
|
|
2235
2245
|
const { element } = useElement();
|
|
2236
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
2246
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui50.useTabs)("settings");
|
|
2237
2247
|
return (
|
|
2238
2248
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
2239
2249
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
2240
|
-
/* @__PURE__ */ React59.createElement(import_react14.Fragment, { key: element.id }, /* @__PURE__ */ React59.createElement(
|
|
2250
|
+
/* @__PURE__ */ React59.createElement(import_react14.Fragment, { key: element.id }, /* @__PURE__ */ React59.createElement(import_ui50.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React59.createElement(import_ui50.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React59.createElement(import_ui50.Tab, { label: (0, import_i18n40.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React59.createElement(import_ui50.Tab, { label: (0, import_i18n40.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React59.createElement(import_ui50.Divider, null), /* @__PURE__ */ React59.createElement(import_ui50.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React59.createElement(SettingsTab, null)), /* @__PURE__ */ React59.createElement(import_ui50.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React59.createElement(StyleTab, null))))
|
|
2241
2251
|
);
|
|
2242
2252
|
};
|
|
2243
2253
|
|
|
@@ -2251,7 +2261,7 @@ var EditingPanel = () => {
|
|
|
2251
2261
|
return null;
|
|
2252
2262
|
}
|
|
2253
2263
|
const panelTitle = (0, import_i18n41.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
2254
|
-
return /* @__PURE__ */ React60.createElement(
|
|
2264
|
+
return /* @__PURE__ */ React60.createElement(import_ui51.ErrorBoundary, { fallback: /* @__PURE__ */ React60.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React60.createElement(import_session4.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React60.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React60.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React60.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React60.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React60.createElement(import_editor_controls41.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React60.createElement(import_editor_controls41.ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React60.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React60.createElement(EditingPanelTabs, null))))))));
|
|
2255
2265
|
};
|
|
2256
2266
|
|
|
2257
2267
|
// src/panel.ts
|
|
@@ -2322,7 +2332,7 @@ var React63 = __toESM(require("react"));
|
|
|
2322
2332
|
var import_react20 = require("react");
|
|
2323
2333
|
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
2324
2334
|
var import_icons21 = require("@elementor/icons");
|
|
2325
|
-
var
|
|
2335
|
+
var import_ui53 = require("@elementor/ui");
|
|
2326
2336
|
var import_i18n43 = require("@wordpress/i18n");
|
|
2327
2337
|
|
|
2328
2338
|
// src/hooks/use-persist-dynamic-value.ts
|
|
@@ -2441,7 +2451,7 @@ var React62 = __toESM(require("react"));
|
|
|
2441
2451
|
var import_react19 = require("react");
|
|
2442
2452
|
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
2443
2453
|
var import_icons20 = require("@elementor/icons");
|
|
2444
|
-
var
|
|
2454
|
+
var import_ui52 = require("@elementor/ui");
|
|
2445
2455
|
var import_i18n42 = require("@wordpress/i18n");
|
|
2446
2456
|
var SIZE3 = "tiny";
|
|
2447
2457
|
var DynamicSelection = ({ onSelect }) => {
|
|
@@ -2462,8 +2472,8 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2462
2472
|
setValue({ name: value, settings: {} });
|
|
2463
2473
|
onSelect?.();
|
|
2464
2474
|
};
|
|
2465
|
-
return /* @__PURE__ */ React62.createElement(
|
|
2466
|
-
|
|
2475
|
+
return /* @__PURE__ */ React62.createElement(import_ui52.Stack, null, /* @__PURE__ */ React62.createElement(import_ui52.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React62.createElement(
|
|
2476
|
+
import_ui52.TextField,
|
|
2467
2477
|
{
|
|
2468
2478
|
fullWidth: true,
|
|
2469
2479
|
size: SIZE3,
|
|
@@ -2471,13 +2481,13 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2471
2481
|
onChange: handleSearch,
|
|
2472
2482
|
placeholder: (0, import_i18n42.__)("Search dynamic tag", "elementor"),
|
|
2473
2483
|
InputProps: {
|
|
2474
|
-
startAdornment: /* @__PURE__ */ React62.createElement(
|
|
2484
|
+
startAdornment: /* @__PURE__ */ React62.createElement(import_ui52.InputAdornment, { position: "start" }, /* @__PURE__ */ React62.createElement(import_icons20.SearchIcon, { fontSize: SIZE3 }))
|
|
2475
2485
|
}
|
|
2476
2486
|
}
|
|
2477
|
-
)), /* @__PURE__ */ React62.createElement(
|
|
2487
|
+
)), /* @__PURE__ */ React62.createElement(import_ui52.Divider, null), /* @__PURE__ */ React62.createElement(import_ui52.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options10.length > 0 ? /* @__PURE__ */ React62.createElement(import_ui52.MenuList, { role: "listbox", tabIndex: 0 }, options10.map(([category, items3], index) => /* @__PURE__ */ React62.createElement(import_react19.Fragment, { key: index }, /* @__PURE__ */ React62.createElement(import_ui52.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items3.map(({ value, label: tagLabel }) => {
|
|
2478
2488
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
2479
2489
|
return /* @__PURE__ */ React62.createElement(
|
|
2480
|
-
|
|
2490
|
+
import_ui52.MenuItem,
|
|
2481
2491
|
{
|
|
2482
2492
|
key: value,
|
|
2483
2493
|
selected: isSelected,
|
|
@@ -2487,8 +2497,8 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2487
2497
|
},
|
|
2488
2498
|
tagLabel
|
|
2489
2499
|
);
|
|
2490
|
-
})))) : /* @__PURE__ */ React62.createElement(
|
|
2491
|
-
|
|
2500
|
+
})))) : /* @__PURE__ */ React62.createElement(import_ui52.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React62.createElement(import_icons20.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React62.createElement(import_ui52.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n42.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React62.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React62.createElement(import_ui52.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React62.createElement(
|
|
2501
|
+
import_ui52.Link,
|
|
2492
2502
|
{
|
|
2493
2503
|
color: "secondary",
|
|
2494
2504
|
variant: "caption",
|
|
@@ -2522,7 +2532,7 @@ var DynamicSelectionControl = () => {
|
|
|
2522
2532
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
2523
2533
|
const { name: tagName = "" } = value;
|
|
2524
2534
|
const selectionPopoverId = (0, import_react20.useId)();
|
|
2525
|
-
const selectionPopoverState = (0,
|
|
2535
|
+
const selectionPopoverState = (0, import_ui53.usePopupState)({ variant: "popover", popupId: selectionPopoverId });
|
|
2526
2536
|
const dynamicTag = useDynamicTag(tagName);
|
|
2527
2537
|
const removeDynamicTag = () => {
|
|
2528
2538
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -2530,16 +2540,16 @@ var DynamicSelectionControl = () => {
|
|
|
2530
2540
|
if (!dynamicTag) {
|
|
2531
2541
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
2532
2542
|
}
|
|
2533
|
-
return /* @__PURE__ */ React63.createElement(
|
|
2534
|
-
|
|
2543
|
+
return /* @__PURE__ */ React63.createElement(import_ui53.Box, null, /* @__PURE__ */ React63.createElement(
|
|
2544
|
+
import_ui53.UnstableTag,
|
|
2535
2545
|
{
|
|
2536
2546
|
fullWidth: true,
|
|
2537
2547
|
showActionsOnHover: true,
|
|
2538
2548
|
label: dynamicTag.label,
|
|
2539
2549
|
startIcon: /* @__PURE__ */ React63.createElement(import_icons21.DatabaseIcon, { fontSize: SIZE4 }),
|
|
2540
|
-
...(0,
|
|
2550
|
+
...(0, import_ui53.bindTrigger)(selectionPopoverState),
|
|
2541
2551
|
actions: /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React63.createElement(
|
|
2542
|
-
|
|
2552
|
+
import_ui53.IconButton,
|
|
2543
2553
|
{
|
|
2544
2554
|
size: SIZE4,
|
|
2545
2555
|
onClick: removeDynamicTag,
|
|
@@ -2549,49 +2559,49 @@ var DynamicSelectionControl = () => {
|
|
|
2549
2559
|
))
|
|
2550
2560
|
}
|
|
2551
2561
|
), /* @__PURE__ */ React63.createElement(
|
|
2552
|
-
|
|
2562
|
+
import_ui53.Popover,
|
|
2553
2563
|
{
|
|
2554
2564
|
disablePortal: true,
|
|
2555
2565
|
disableScrollLock: true,
|
|
2556
2566
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
2557
|
-
...(0,
|
|
2567
|
+
...(0, import_ui53.bindPopover)(selectionPopoverState)
|
|
2558
2568
|
},
|
|
2559
|
-
/* @__PURE__ */ React63.createElement(
|
|
2569
|
+
/* @__PURE__ */ React63.createElement(import_ui53.Stack, null, /* @__PURE__ */ React63.createElement(import_ui53.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React63.createElement(import_icons21.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React63.createElement(import_ui53.Typography, { variant: "subtitle2" }, (0, import_i18n43.__)("Dynamic Tags", "elementor")), /* @__PURE__ */ React63.createElement(import_ui53.IconButton, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React63.createElement(import_icons21.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React63.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
2560
2570
|
));
|
|
2561
2571
|
};
|
|
2562
2572
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
2563
2573
|
const popupId = (0, import_react20.useId)();
|
|
2564
|
-
const settingsPopupState = (0,
|
|
2574
|
+
const settingsPopupState = (0, import_ui53.usePopupState)({ variant: "popover", popupId });
|
|
2565
2575
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
2566
2576
|
if (!hasDynamicSettings) {
|
|
2567
2577
|
return null;
|
|
2568
2578
|
}
|
|
2569
2579
|
return /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(
|
|
2570
|
-
|
|
2580
|
+
import_ui53.IconButton,
|
|
2571
2581
|
{
|
|
2572
2582
|
size: SIZE4,
|
|
2573
|
-
...(0,
|
|
2583
|
+
...(0, import_ui53.bindTrigger)(settingsPopupState),
|
|
2574
2584
|
"aria-label": (0, import_i18n43.__)("Settings", "elementor")
|
|
2575
2585
|
},
|
|
2576
2586
|
/* @__PURE__ */ React63.createElement(import_icons21.SettingsIcon, { fontSize: SIZE4 })
|
|
2577
2587
|
), /* @__PURE__ */ React63.createElement(
|
|
2578
|
-
|
|
2588
|
+
import_ui53.Popover,
|
|
2579
2589
|
{
|
|
2580
2590
|
disableScrollLock: true,
|
|
2581
2591
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
2582
|
-
...(0,
|
|
2592
|
+
...(0, import_ui53.bindPopover)(settingsPopupState)
|
|
2583
2593
|
},
|
|
2584
|
-
/* @__PURE__ */ React63.createElement(
|
|
2594
|
+
/* @__PURE__ */ React63.createElement(import_ui53.Paper, { component: import_ui53.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React63.createElement(import_ui53.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React63.createElement(import_icons21.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React63.createElement(import_ui53.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React63.createElement(import_ui53.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React63.createElement(import_icons21.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React63.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
2585
2595
|
));
|
|
2586
2596
|
};
|
|
2587
2597
|
var DynamicSettings = ({ controls }) => {
|
|
2588
2598
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
2589
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
2599
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui53.useTabs)(0);
|
|
2590
2600
|
if (!tabs.length) {
|
|
2591
2601
|
return null;
|
|
2592
2602
|
}
|
|
2593
|
-
return /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(
|
|
2594
|
-
return /* @__PURE__ */ React63.createElement(
|
|
2603
|
+
return /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(import_ui53.Tabs, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React63.createElement(import_ui53.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React63.createElement(import_ui53.Divider, null), tabs.map(({ value }, index) => {
|
|
2604
|
+
return /* @__PURE__ */ React63.createElement(import_ui53.TabPanel, { key: index, sx: { flexGrow: 1 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React63.createElement(import_ui53.Stack, { gap: 1, px: 2 }, value.items.map((item) => {
|
|
2595
2605
|
if (item.type === "control") {
|
|
2596
2606
|
return /* @__PURE__ */ React63.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
2597
2607
|
}
|