@elementor/editor-editing-panel 1.23.0 → 1.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/dist/index.js +400 -352
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +367 -324
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
- package/src/components/add-or-remove-content.tsx +1 -1
- package/src/components/{control-label-with-adornments.tsx → control-label.tsx} +3 -3
- package/src/components/css-classes/css-class-item.tsx +16 -5
- package/src/components/css-classes/css-class-selector.tsx +3 -3
- package/src/components/editing-panel-tabs.tsx +8 -1
- package/src/components/editing-panel.tsx +18 -15
- package/src/components/multi-combobox.tsx +12 -1
- package/src/components/settings-tab.tsx +2 -2
- package/src/components/style-sections/border-section/border-color-field.tsx +2 -1
- package/src/components/style-sections/border-section/border-style-field.tsx +2 -1
- package/src/components/style-sections/layout-section/align-content-field.tsx +2 -1
- package/src/components/style-sections/layout-section/align-items-field.tsx +2 -1
- package/src/components/style-sections/layout-section/align-self-child-field.tsx +2 -1
- package/src/components/style-sections/layout-section/display-field.tsx +2 -1
- package/src/components/style-sections/layout-section/flex-direction-field.tsx +2 -1
- package/src/components/style-sections/layout-section/flex-order-field.tsx +20 -24
- package/src/components/style-sections/layout-section/flex-size-field.tsx +6 -4
- package/src/components/style-sections/layout-section/justify-content-field.tsx +5 -4
- package/src/components/style-sections/layout-section/layout-section.tsx +2 -2
- package/src/components/style-sections/layout-section/wrap-field.tsx +2 -1
- package/src/components/style-sections/position-section/dimensions-field.tsx +2 -1
- package/src/components/style-sections/position-section/position-field.tsx +2 -1
- package/src/components/style-sections/position-section/z-index-field.tsx +2 -1
- package/src/components/style-sections/size-section/overflow-field.tsx +2 -1
- package/src/components/style-sections/size-section/size-section.tsx +2 -1
- package/src/components/style-sections/typography-section/font-family-field.tsx +2 -1
- package/src/components/style-sections/typography-section/font-size-field.tsx +2 -1
- package/src/components/style-sections/typography-section/font-style-field.tsx +2 -2
- package/src/components/style-sections/typography-section/font-weight-field.tsx +2 -1
- package/src/components/style-sections/typography-section/letter-spacing-field.tsx +2 -1
- package/src/components/style-sections/typography-section/line-height-field.tsx +2 -1
- package/src/components/style-sections/typography-section/text-alignment-field.tsx +2 -1
- package/src/components/style-sections/typography-section/text-color-field.tsx +2 -1
- package/src/components/style-sections/typography-section/text-decoration-field.tsx +2 -1
- package/src/components/style-sections/typography-section/text-direction-field.tsx +2 -1
- package/src/components/style-sections/typography-section/text-stroke-field.tsx +9 -9
- package/src/components/style-sections/typography-section/transform-field.tsx +2 -1
- package/src/components/style-sections/typography-section/word-spacing-field.tsx +2 -1
- package/src/dynamics/components/dynamic-selection-control.tsx +2 -2
- package/src/dynamics/components/dynamic-selection.tsx +4 -4
- package/src/styles-inheritance/styles-inheritance-indicator.tsx +7 -6
package/dist/index.js
CHANGED
|
@@ -157,7 +157,18 @@ function MultiCombobox({
|
|
|
157
157
|
value: selected,
|
|
158
158
|
options: options13,
|
|
159
159
|
renderGroup: (params) => /* @__PURE__ */ React4.createElement(Group, { ...params }),
|
|
160
|
-
renderInput: (params) => /* @__PURE__ */ React4.createElement(
|
|
160
|
+
renderInput: (params) => /* @__PURE__ */ React4.createElement(
|
|
161
|
+
import_ui.TextField,
|
|
162
|
+
{
|
|
163
|
+
...params,
|
|
164
|
+
sx: (theme) => ({
|
|
165
|
+
".MuiAutocomplete-inputRoot.MuiInputBase-adornedStart": {
|
|
166
|
+
paddingLeft: theme.spacing(0.25),
|
|
167
|
+
paddingRight: theme.spacing(0.25)
|
|
168
|
+
}
|
|
169
|
+
})
|
|
170
|
+
}
|
|
171
|
+
),
|
|
161
172
|
onChange: (_, selectedOrInputValue, reason) => {
|
|
162
173
|
const inputValue = selectedOrInputValue.find((option) => typeof option === "string");
|
|
163
174
|
const optionsAndActions = selectedOrInputValue.filter((option) => typeof option !== "string");
|
|
@@ -428,52 +439,67 @@ function CssClassItem({
|
|
|
428
439
|
const providerActions = import_editor_styles_repository3.stylesRepository.getProviderByKey(provider)?.actions;
|
|
429
440
|
const allowRename = Boolean(providerActions?.update);
|
|
430
441
|
const isShowingState = isActive && meta.state;
|
|
431
|
-
return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
|
|
432
|
-
import_ui3.
|
|
442
|
+
return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
|
|
443
|
+
import_ui3.UnstableChipGroup,
|
|
433
444
|
{
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
445
|
+
ref: setChipRef,
|
|
446
|
+
...chipGroupProps,
|
|
447
|
+
"aria-label": `Edit ${label}`,
|
|
448
|
+
role: "group",
|
|
449
|
+
sx: (theme) => ({
|
|
450
|
+
"&.MuiChipGroup-root.MuiAutocomplete-tag": { margin: theme.spacing(0.125) }
|
|
451
|
+
})
|
|
452
|
+
},
|
|
453
|
+
/* @__PURE__ */ React6.createElement(
|
|
454
|
+
import_ui3.Chip,
|
|
455
|
+
{
|
|
456
|
+
size: CHIP_SIZE,
|
|
457
|
+
label: isEditing ? /* @__PURE__ */ React6.createElement(import_editor_ui2.EditableField, { ref, error, ...getEditableProps() }) : /* @__PURE__ */ React6.createElement(import_editor_ui2.EllipsisWithTooltip, { maxWidth: "10ch", title: label, as: "div" }),
|
|
458
|
+
variant: isActive && !meta.state && !isEditing ? "filled" : "standard",
|
|
459
|
+
shape: "rounded",
|
|
460
|
+
icon,
|
|
461
|
+
color,
|
|
462
|
+
onClick: () => {
|
|
463
|
+
if (isShowingState) {
|
|
464
|
+
setMetaState(null);
|
|
465
|
+
return;
|
|
466
|
+
}
|
|
467
|
+
if (allowRename && isActive) {
|
|
468
|
+
openEditMode();
|
|
469
|
+
return;
|
|
470
|
+
}
|
|
471
|
+
onClickActive(id);
|
|
472
|
+
},
|
|
473
|
+
"aria-pressed": isActive,
|
|
474
|
+
sx: (theme) => ({
|
|
475
|
+
cursor: isActive && allowRename && !isShowingState ? "text" : "pointer",
|
|
476
|
+
borderRadius: `${theme.shape.borderRadius * 0.75}px`,
|
|
477
|
+
"&.Mui-focusVisible": {
|
|
478
|
+
boxShadow: "none !important"
|
|
479
|
+
}
|
|
480
|
+
})
|
|
457
481
|
}
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
482
|
+
),
|
|
483
|
+
!isEditing && /* @__PURE__ */ React6.createElement(
|
|
484
|
+
import_ui3.Chip,
|
|
485
|
+
{
|
|
486
|
+
icon: isShowingState ? void 0 : /* @__PURE__ */ React6.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" }),
|
|
487
|
+
size: CHIP_SIZE,
|
|
488
|
+
label: isShowingState ? /* @__PURE__ */ React6.createElement(import_ui3.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React6.createElement(import_ui3.Typography, { variant: "inherit" }, meta.state), /* @__PURE__ */ React6.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })) : void 0,
|
|
489
|
+
variant: "filled",
|
|
490
|
+
shape: "rounded",
|
|
491
|
+
color,
|
|
492
|
+
...(0, import_ui3.bindTrigger)(popupState),
|
|
493
|
+
"aria-label": (0, import_i18n2.__)("Open CSS Class Menu", "elementor"),
|
|
494
|
+
sx: (theme) => ({
|
|
495
|
+
borderRadius: `${theme.shape.borderRadius * 0.75}px`,
|
|
496
|
+
paddingRight: 0,
|
|
497
|
+
...!isShowingState ? { paddingLeft: 0 } : {},
|
|
498
|
+
".MuiChip-label": isShowingState ? { paddingRight: 0 } : { padding: 0 }
|
|
499
|
+
})
|
|
474
500
|
}
|
|
475
|
-
|
|
476
|
-
)
|
|
501
|
+
)
|
|
502
|
+
), /* @__PURE__ */ React6.createElement(
|
|
477
503
|
CssClassMenu,
|
|
478
504
|
{
|
|
479
505
|
styleId: id,
|
|
@@ -501,7 +527,7 @@ var EMPTY_OPTION = {
|
|
|
501
527
|
label: (0, import_i18n3.__)("local", "elementor"),
|
|
502
528
|
value: null,
|
|
503
529
|
fixed: true,
|
|
504
|
-
color: "
|
|
530
|
+
color: "accent",
|
|
505
531
|
icon: /* @__PURE__ */ React7.createElement(import_icons2.MapPinIcon, null),
|
|
506
532
|
provider: import_editor_styles_repository4.ELEMENTS_STYLES_PROVIDER_KEY
|
|
507
533
|
};
|
|
@@ -574,7 +600,7 @@ function useOptions() {
|
|
|
574
600
|
label: styleDef.label,
|
|
575
601
|
value: styleDef.id,
|
|
576
602
|
fixed: isElements,
|
|
577
|
-
color: isElements ? "
|
|
603
|
+
color: isElements ? "accent" : "global",
|
|
578
604
|
icon: isElements ? /* @__PURE__ */ React7.createElement(import_icons2.MapPinIcon, null) : null,
|
|
579
605
|
provider: provider.key,
|
|
580
606
|
group: provider.labels?.plural
|
|
@@ -670,13 +696,14 @@ function useHandleApply(appliedIds, setAppliedIds) {
|
|
|
670
696
|
var import_editor_panels2 = require("@elementor/editor-panels");
|
|
671
697
|
|
|
672
698
|
// src/components/editing-panel.tsx
|
|
673
|
-
var
|
|
699
|
+
var React67 = __toESM(require("react"));
|
|
674
700
|
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
675
701
|
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
676
702
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
703
|
+
var import_editor_ui3 = require("@elementor/editor-ui");
|
|
677
704
|
var import_icons23 = require("@elementor/icons");
|
|
678
705
|
var import_session4 = require("@elementor/session");
|
|
679
|
-
var
|
|
706
|
+
var import_ui52 = require("@elementor/ui");
|
|
680
707
|
var import_i18n45 = require("@wordpress/i18n");
|
|
681
708
|
|
|
682
709
|
// src/controls-actions.ts
|
|
@@ -733,9 +760,9 @@ function EditorPanelErrorFallback() {
|
|
|
733
760
|
}
|
|
734
761
|
|
|
735
762
|
// src/components/editing-panel-tabs.tsx
|
|
736
|
-
var
|
|
763
|
+
var React66 = __toESM(require("react"));
|
|
737
764
|
var import_react17 = require("react");
|
|
738
|
-
var
|
|
765
|
+
var import_ui51 = require("@elementor/ui");
|
|
739
766
|
var import_i18n44 = require("@wordpress/i18n");
|
|
740
767
|
|
|
741
768
|
// src/components/settings-tab.tsx
|
|
@@ -902,17 +929,17 @@ var Control2 = ({ control }) => {
|
|
|
902
929
|
if (!getControlByType(control.type)) {
|
|
903
930
|
return null;
|
|
904
931
|
}
|
|
905
|
-
return /* @__PURE__ */ React15.createElement(SettingsField, { bind: control.bind }, /* @__PURE__ */ React15.createElement(ControlTypeContainer, { controlType: control.type }, control.label ? /* @__PURE__ */ React15.createElement(import_editor_controls4.
|
|
932
|
+
return /* @__PURE__ */ React15.createElement(SettingsField, { bind: control.bind }, /* @__PURE__ */ React15.createElement(ControlTypeContainer, { controlType: control.type }, control.label ? /* @__PURE__ */ React15.createElement(import_editor_controls4.ControlFormLabel, null, control.label) : null, /* @__PURE__ */ React15.createElement(Control, { type: control.type, props: control.props })));
|
|
906
933
|
};
|
|
907
934
|
|
|
908
935
|
// src/components/style-tab.tsx
|
|
909
|
-
var
|
|
936
|
+
var React65 = __toESM(require("react"));
|
|
910
937
|
var import_react16 = require("react");
|
|
911
938
|
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
912
939
|
var import_editor_props5 = require("@elementor/editor-props");
|
|
913
940
|
var import_editor_responsive2 = require("@elementor/editor-responsive");
|
|
914
941
|
var import_session3 = require("@elementor/session");
|
|
915
|
-
var
|
|
942
|
+
var import_ui50 = require("@elementor/ui");
|
|
916
943
|
var import_i18n43 = require("@wordpress/i18n");
|
|
917
944
|
|
|
918
945
|
// src/contexts/styles-inheritance-context.tsx
|
|
@@ -1281,20 +1308,20 @@ var Circle = (0, import_ui11.styled)("div", {
|
|
|
1281
1308
|
background-color: ${({ theme, variant }) => {
|
|
1282
1309
|
switch (variant) {
|
|
1283
1310
|
case "overridden":
|
|
1284
|
-
return theme.palette.warning.
|
|
1311
|
+
return theme.palette.warning.light;
|
|
1285
1312
|
case "global-affects":
|
|
1286
|
-
return theme.palette.global.
|
|
1313
|
+
return theme.palette.global.dark;
|
|
1287
1314
|
case "local-affects":
|
|
1288
1315
|
return theme.palette.primary.main;
|
|
1289
1316
|
default:
|
|
1290
|
-
return theme.palette.text.
|
|
1317
|
+
return theme.palette.text.disabled;
|
|
1291
1318
|
}
|
|
1292
1319
|
}};
|
|
1293
1320
|
`;
|
|
1294
1321
|
var StylesInheritanceIndicator = () => {
|
|
1295
|
-
const {
|
|
1322
|
+
const { value, path } = (0, import_editor_controls5.useBoundProp)();
|
|
1296
1323
|
const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
|
|
1297
|
-
const [
|
|
1324
|
+
const [bind] = path;
|
|
1298
1325
|
const inheritanceChain = useStylesInheritanceField(bind);
|
|
1299
1326
|
if (!inheritanceChain.length) {
|
|
1300
1327
|
return null;
|
|
@@ -1351,7 +1378,7 @@ var BackgroundSection = () => {
|
|
|
1351
1378
|
};
|
|
1352
1379
|
|
|
1353
1380
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1354
|
-
var
|
|
1381
|
+
var React30 = __toESM(require("react"));
|
|
1355
1382
|
|
|
1356
1383
|
// src/components/panel-divider.tsx
|
|
1357
1384
|
var React20 = __toESM(require("react"));
|
|
@@ -1364,18 +1391,27 @@ var import_ui13 = require("@elementor/ui");
|
|
|
1364
1391
|
var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React21.createElement(import_ui13.Stack, { gap, sx: { ...sx } }, children);
|
|
1365
1392
|
|
|
1366
1393
|
// src/components/style-sections/border-section/border-field.tsx
|
|
1367
|
-
var
|
|
1394
|
+
var React28 = __toESM(require("react"));
|
|
1368
1395
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1369
1396
|
|
|
1370
1397
|
// src/components/add-or-remove-content.tsx
|
|
1398
|
+
var React23 = __toESM(require("react"));
|
|
1399
|
+
var import_icons5 = require("@elementor/icons");
|
|
1400
|
+
var import_ui15 = require("@elementor/ui");
|
|
1401
|
+
|
|
1402
|
+
// src/components/control-label.tsx
|
|
1371
1403
|
var React22 = __toESM(require("react"));
|
|
1372
1404
|
var import_editor_controls8 = require("@elementor/editor-controls");
|
|
1373
|
-
var import_icons5 = require("@elementor/icons");
|
|
1374
1405
|
var import_ui14 = require("@elementor/ui");
|
|
1406
|
+
var ControlLabel = ({ children }) => {
|
|
1407
|
+
return /* @__PURE__ */ React22.createElement(import_ui14.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 1 }, /* @__PURE__ */ React22.createElement(import_editor_controls8.ControlFormLabel, null, children), /* @__PURE__ */ React22.createElement(import_editor_controls8.ControlAdornments, null));
|
|
1408
|
+
};
|
|
1409
|
+
|
|
1410
|
+
// src/components/add-or-remove-content.tsx
|
|
1375
1411
|
var SIZE2 = "tiny";
|
|
1376
1412
|
var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
1377
|
-
return /* @__PURE__ */
|
|
1378
|
-
|
|
1413
|
+
return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(
|
|
1414
|
+
import_ui15.Stack,
|
|
1379
1415
|
{
|
|
1380
1416
|
direction: "row",
|
|
1381
1417
|
sx: {
|
|
@@ -1383,24 +1419,24 @@ var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
|
1383
1419
|
alignItems: "center"
|
|
1384
1420
|
}
|
|
1385
1421
|
},
|
|
1386
|
-
/* @__PURE__ */
|
|
1387
|
-
isAdded ? /* @__PURE__ */
|
|
1388
|
-
), /* @__PURE__ */
|
|
1422
|
+
/* @__PURE__ */ React23.createElement(ControlLabel, null, label),
|
|
1423
|
+
isAdded ? /* @__PURE__ */ React23.createElement(import_ui15.IconButton, { size: SIZE2, onClick: onRemove, "aria-label": "Remove" }, /* @__PURE__ */ React23.createElement(import_icons5.MinusIcon, { fontSize: SIZE2 })) : /* @__PURE__ */ React23.createElement(import_ui15.IconButton, { size: SIZE2, onClick: onAdd, "aria-label": "Add" }, /* @__PURE__ */ React23.createElement(import_icons5.PlusIcon, { fontSize: SIZE2 }))
|
|
1424
|
+
), /* @__PURE__ */ React23.createElement(import_ui15.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React23.createElement(SectionContent, null, children)));
|
|
1389
1425
|
};
|
|
1390
1426
|
|
|
1391
1427
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
1392
|
-
var
|
|
1428
|
+
var React24 = __toESM(require("react"));
|
|
1393
1429
|
var import_editor_controls9 = require("@elementor/editor-controls");
|
|
1394
|
-
var
|
|
1430
|
+
var import_ui16 = require("@elementor/ui");
|
|
1395
1431
|
var import_i18n6 = require("@wordpress/i18n");
|
|
1396
1432
|
var BorderColorField = () => {
|
|
1397
|
-
return /* @__PURE__ */
|
|
1433
|
+
return /* @__PURE__ */ React24.createElement(StylesField, { bind: "border-color" }, /* @__PURE__ */ React24.createElement(import_ui16.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(import_ui16.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n6.__)("Border color", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui16.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React24.createElement(import_editor_controls9.ColorControl, null))));
|
|
1398
1434
|
};
|
|
1399
1435
|
|
|
1400
1436
|
// src/components/style-sections/border-section/border-style-field.tsx
|
|
1401
|
-
var
|
|
1437
|
+
var React25 = __toESM(require("react"));
|
|
1402
1438
|
var import_editor_controls10 = require("@elementor/editor-controls");
|
|
1403
|
-
var
|
|
1439
|
+
var import_ui17 = require("@elementor/ui");
|
|
1404
1440
|
var import_i18n7 = require("@wordpress/i18n");
|
|
1405
1441
|
var borderStyles = [
|
|
1406
1442
|
{ value: "none", label: (0, import_i18n7.__)("None", "elementor") },
|
|
@@ -1414,29 +1450,29 @@ var borderStyles = [
|
|
|
1414
1450
|
{ value: "outset", label: (0, import_i18n7.__)("Outset", "elementor") }
|
|
1415
1451
|
];
|
|
1416
1452
|
var BorderStyleField = () => {
|
|
1417
|
-
return /* @__PURE__ */
|
|
1453
|
+
return /* @__PURE__ */ React25.createElement(StylesField, { bind: "border-style" }, /* @__PURE__ */ React25.createElement(import_ui17.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React25.createElement(import_ui17.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React25.createElement(ControlLabel, null, (0, import_i18n7.__)("Border type", "elementor"))), /* @__PURE__ */ React25.createElement(import_ui17.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React25.createElement(import_editor_controls10.SelectControl, { options: borderStyles }))));
|
|
1418
1454
|
};
|
|
1419
1455
|
|
|
1420
1456
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
1421
|
-
var
|
|
1457
|
+
var React27 = __toESM(require("react"));
|
|
1422
1458
|
var import_editor_controls11 = require("@elementor/editor-controls");
|
|
1423
1459
|
var import_editor_props3 = require("@elementor/editor-props");
|
|
1424
1460
|
var import_icons6 = require("@elementor/icons");
|
|
1425
|
-
var
|
|
1461
|
+
var import_ui20 = require("@elementor/ui");
|
|
1426
1462
|
var import_i18n8 = require("@wordpress/i18n");
|
|
1427
1463
|
|
|
1428
1464
|
// src/hooks/use-direction.ts
|
|
1429
|
-
var
|
|
1465
|
+
var import_ui18 = require("@elementor/ui");
|
|
1430
1466
|
function useDirection() {
|
|
1431
|
-
const theme = (0,
|
|
1467
|
+
const theme = (0, import_ui18.useTheme)(), extendedWindow = window;
|
|
1432
1468
|
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
1433
1469
|
return { isSiteRtl, isUiRtl };
|
|
1434
1470
|
}
|
|
1435
1471
|
|
|
1436
1472
|
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
1437
|
-
var
|
|
1473
|
+
var React26 = __toESM(require("react"));
|
|
1438
1474
|
var import_react11 = require("react");
|
|
1439
|
-
var
|
|
1475
|
+
var import_ui19 = require("@elementor/ui");
|
|
1440
1476
|
var CLOCKWISE_ANGLES = {
|
|
1441
1477
|
row: 0,
|
|
1442
1478
|
column: 90,
|
|
@@ -1458,11 +1494,11 @@ var RotatedIcon = ({
|
|
|
1458
1494
|
}) => {
|
|
1459
1495
|
const rotate = (0, import_react11.useRef)(useGetTargetAngle(isClockwise, offset, disableRotationForReversed));
|
|
1460
1496
|
rotate.current = useGetTargetAngle(isClockwise, offset, disableRotationForReversed, rotate);
|
|
1461
|
-
return /* @__PURE__ */
|
|
1497
|
+
return /* @__PURE__ */ React26.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
1462
1498
|
};
|
|
1463
1499
|
var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existingRef) => {
|
|
1464
1500
|
const [direction] = useStylesField("flex-direction");
|
|
1465
|
-
const isRtl = "rtl" === (0,
|
|
1501
|
+
const isRtl = "rtl" === (0, import_ui19.useTheme)().direction;
|
|
1466
1502
|
const rotationMultiplier = isRtl ? -1 : 1;
|
|
1467
1503
|
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
1468
1504
|
const currentDirection = direction?.value || "row";
|
|
@@ -1477,38 +1513,38 @@ var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existi
|
|
|
1477
1513
|
};
|
|
1478
1514
|
|
|
1479
1515
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
1480
|
-
var InlineStartIcon = (0,
|
|
1481
|
-
var InlineEndIcon = (0,
|
|
1516
|
+
var InlineStartIcon = (0, import_ui20.withDirection)(import_icons6.SideRightIcon);
|
|
1517
|
+
var InlineEndIcon = (0, import_ui20.withDirection)(import_icons6.SideLeftIcon);
|
|
1482
1518
|
var getEdges = (isSiteRtl) => [
|
|
1483
1519
|
{
|
|
1484
1520
|
label: (0, import_i18n8.__)("Top", "elementor"),
|
|
1485
|
-
icon: /* @__PURE__ */
|
|
1521
|
+
icon: /* @__PURE__ */ React27.createElement(import_icons6.SideTopIcon, { fontSize: "tiny" }),
|
|
1486
1522
|
bind: "block-start"
|
|
1487
1523
|
},
|
|
1488
1524
|
{
|
|
1489
1525
|
label: isSiteRtl ? (0, import_i18n8.__)("Left", "elementor") : (0, import_i18n8.__)("Right", "elementor"),
|
|
1490
|
-
icon: /* @__PURE__ */
|
|
1526
|
+
icon: /* @__PURE__ */ React27.createElement(RotatedIcon, { icon: InlineStartIcon, size: "tiny" }),
|
|
1491
1527
|
bind: "inline-end"
|
|
1492
1528
|
},
|
|
1493
1529
|
{
|
|
1494
1530
|
label: (0, import_i18n8.__)("Bottom", "elementor"),
|
|
1495
|
-
icon: /* @__PURE__ */
|
|
1531
|
+
icon: /* @__PURE__ */ React27.createElement(import_icons6.SideBottomIcon, { fontSize: "tiny" }),
|
|
1496
1532
|
bind: "block-end"
|
|
1497
1533
|
},
|
|
1498
1534
|
{
|
|
1499
1535
|
label: isSiteRtl ? (0, import_i18n8.__)("Right", "elementor") : (0, import_i18n8.__)("Left", "elementor"),
|
|
1500
|
-
icon: /* @__PURE__ */
|
|
1536
|
+
icon: /* @__PURE__ */ React27.createElement(RotatedIcon, { icon: InlineEndIcon, size: "tiny" }),
|
|
1501
1537
|
bind: "inline-start"
|
|
1502
1538
|
}
|
|
1503
1539
|
];
|
|
1504
1540
|
var BorderWidthField = () => {
|
|
1505
1541
|
const { isSiteRtl } = useDirection();
|
|
1506
|
-
return /* @__PURE__ */
|
|
1542
|
+
return /* @__PURE__ */ React27.createElement(StylesField, { bind: "border-width" }, /* @__PURE__ */ React27.createElement(
|
|
1507
1543
|
import_editor_controls11.EqualUnequalSizesControl,
|
|
1508
1544
|
{
|
|
1509
1545
|
items: getEdges(isSiteRtl),
|
|
1510
1546
|
label: (0, import_i18n8.__)("Border width", "elementor"),
|
|
1511
|
-
icon: /* @__PURE__ */
|
|
1547
|
+
icon: /* @__PURE__ */ React27.createElement(import_icons6.SideAllIcon, { fontSize: "tiny" }),
|
|
1512
1548
|
tooltipLabel: (0, import_i18n8.__)("Adjust borders", "elementor"),
|
|
1513
1549
|
multiSizePropTypeUtil: import_editor_props3.borderWidthPropTypeUtil
|
|
1514
1550
|
}
|
|
@@ -1534,7 +1570,7 @@ var BorderField = () => {
|
|
|
1534
1570
|
});
|
|
1535
1571
|
};
|
|
1536
1572
|
const hasBorder = Object.values(border ?? {}).some(Boolean);
|
|
1537
|
-
return /* @__PURE__ */
|
|
1573
|
+
return /* @__PURE__ */ React28.createElement(
|
|
1538
1574
|
AddOrRemoveContent,
|
|
1539
1575
|
{
|
|
1540
1576
|
label: (0, import_i18n9.__)("Border", "elementor"),
|
|
@@ -1542,23 +1578,23 @@ var BorderField = () => {
|
|
|
1542
1578
|
onAdd: addBorder,
|
|
1543
1579
|
onRemove: removeBorder
|
|
1544
1580
|
},
|
|
1545
|
-
/* @__PURE__ */
|
|
1546
|
-
/* @__PURE__ */
|
|
1547
|
-
/* @__PURE__ */
|
|
1581
|
+
/* @__PURE__ */ React28.createElement(BorderWidthField, null),
|
|
1582
|
+
/* @__PURE__ */ React28.createElement(BorderColorField, null),
|
|
1583
|
+
/* @__PURE__ */ React28.createElement(BorderStyleField, null)
|
|
1548
1584
|
);
|
|
1549
1585
|
};
|
|
1550
1586
|
|
|
1551
1587
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
1552
|
-
var
|
|
1588
|
+
var React29 = __toESM(require("react"));
|
|
1553
1589
|
var import_editor_controls12 = require("@elementor/editor-controls");
|
|
1554
1590
|
var import_editor_props4 = require("@elementor/editor-props");
|
|
1555
1591
|
var import_icons7 = require("@elementor/icons");
|
|
1556
|
-
var
|
|
1592
|
+
var import_ui21 = require("@elementor/ui");
|
|
1557
1593
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1558
|
-
var StartStartIcon = (0,
|
|
1559
|
-
var StartEndIcon = (0,
|
|
1560
|
-
var EndStartIcon = (0,
|
|
1561
|
-
var EndEndIcon = (0,
|
|
1594
|
+
var StartStartIcon = (0, import_ui21.withDirection)(import_icons7.RadiusTopLeftIcon);
|
|
1595
|
+
var StartEndIcon = (0, import_ui21.withDirection)(import_icons7.RadiusTopRightIcon);
|
|
1596
|
+
var EndStartIcon = (0, import_ui21.withDirection)(import_icons7.RadiusBottomLeftIcon);
|
|
1597
|
+
var EndEndIcon = (0, import_ui21.withDirection)(import_icons7.RadiusBottomRightIcon);
|
|
1562
1598
|
var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n10.__)("Top right", "elementor") : (0, import_i18n10.__)("Top left", "elementor");
|
|
1563
1599
|
var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n10.__)("Top left", "elementor") : (0, import_i18n10.__)("Top right", "elementor");
|
|
1564
1600
|
var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n10.__)("Bottom right", "elementor") : (0, import_i18n10.__)("Bottom left", "elementor");
|
|
@@ -1566,33 +1602,33 @@ var getEndEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n10.__)("Bottom le
|
|
|
1566
1602
|
var getCorners = (isSiteRtl) => [
|
|
1567
1603
|
{
|
|
1568
1604
|
label: getStartStartLabel(isSiteRtl),
|
|
1569
|
-
icon: /* @__PURE__ */
|
|
1605
|
+
icon: /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: StartStartIcon, size: "tiny" }),
|
|
1570
1606
|
bind: "start-start"
|
|
1571
1607
|
},
|
|
1572
1608
|
{
|
|
1573
1609
|
label: getStartEndLabel(isSiteRtl),
|
|
1574
|
-
icon: /* @__PURE__ */
|
|
1610
|
+
icon: /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: StartEndIcon, size: "tiny" }),
|
|
1575
1611
|
bind: "start-end"
|
|
1576
1612
|
},
|
|
1577
1613
|
{
|
|
1578
1614
|
label: getEndStartLabel(isSiteRtl),
|
|
1579
|
-
icon: /* @__PURE__ */
|
|
1615
|
+
icon: /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: EndStartIcon, size: "tiny" }),
|
|
1580
1616
|
bind: "end-start"
|
|
1581
1617
|
},
|
|
1582
1618
|
{
|
|
1583
1619
|
label: getEndEndLabel(isSiteRtl),
|
|
1584
|
-
icon: /* @__PURE__ */
|
|
1620
|
+
icon: /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: EndEndIcon, size: "tiny" }),
|
|
1585
1621
|
bind: "end-end"
|
|
1586
1622
|
}
|
|
1587
1623
|
];
|
|
1588
1624
|
var BorderRadiusField = () => {
|
|
1589
1625
|
const { isSiteRtl } = useDirection();
|
|
1590
|
-
return /* @__PURE__ */
|
|
1626
|
+
return /* @__PURE__ */ React29.createElement(StylesField, { bind: "border-radius" }, /* @__PURE__ */ React29.createElement(
|
|
1591
1627
|
import_editor_controls12.EqualUnequalSizesControl,
|
|
1592
1628
|
{
|
|
1593
1629
|
items: getCorners(isSiteRtl),
|
|
1594
1630
|
label: (0, import_i18n10.__)("Border radius", "elementor"),
|
|
1595
|
-
icon: /* @__PURE__ */
|
|
1631
|
+
icon: /* @__PURE__ */ React29.createElement(import_icons7.BorderCornersIcon, { fontSize: "tiny" }),
|
|
1596
1632
|
tooltipLabel: (0, import_i18n10.__)("Adjust corners", "elementor"),
|
|
1597
1633
|
multiSizePropTypeUtil: import_editor_props4.borderRadiusPropTypeUtil
|
|
1598
1634
|
}
|
|
@@ -1600,17 +1636,17 @@ var BorderRadiusField = () => {
|
|
|
1600
1636
|
};
|
|
1601
1637
|
|
|
1602
1638
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1603
|
-
var BorderSection = () => /* @__PURE__ */
|
|
1639
|
+
var BorderSection = () => /* @__PURE__ */ React30.createElement(SectionContent, null, /* @__PURE__ */ React30.createElement(BorderRadiusField, null), /* @__PURE__ */ React30.createElement(PanelDivider, null), /* @__PURE__ */ React30.createElement(BorderField, null));
|
|
1604
1640
|
|
|
1605
1641
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
1606
|
-
var
|
|
1642
|
+
var React31 = __toESM(require("react"));
|
|
1607
1643
|
var import_editor_controls13 = require("@elementor/editor-controls");
|
|
1608
1644
|
var EffectsSection = () => {
|
|
1609
|
-
return /* @__PURE__ */
|
|
1645
|
+
return /* @__PURE__ */ React31.createElement(SectionContent, null, /* @__PURE__ */ React31.createElement(StylesField, { bind: "box-shadow" }, /* @__PURE__ */ React31.createElement(import_editor_controls13.BoxShadowRepeaterControl, null)));
|
|
1610
1646
|
};
|
|
1611
1647
|
|
|
1612
1648
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
1613
|
-
var
|
|
1649
|
+
var React42 = __toESM(require("react"));
|
|
1614
1650
|
var import_editor_controls24 = require("@elementor/editor-controls");
|
|
1615
1651
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
1616
1652
|
var import_i18n21 = require("@wordpress/i18n");
|
|
@@ -1641,13 +1677,13 @@ function useComputedStyle(elementId) {
|
|
|
1641
1677
|
}
|
|
1642
1678
|
|
|
1643
1679
|
// src/components/style-sections/layout-section/align-content-field.tsx
|
|
1644
|
-
var
|
|
1680
|
+
var React32 = __toESM(require("react"));
|
|
1645
1681
|
var import_editor_controls14 = require("@elementor/editor-controls");
|
|
1646
1682
|
var import_icons8 = require("@elementor/icons");
|
|
1647
|
-
var
|
|
1683
|
+
var import_ui22 = require("@elementor/ui");
|
|
1648
1684
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1649
|
-
var StartIcon = (0,
|
|
1650
|
-
var EndIcon = (0,
|
|
1685
|
+
var StartIcon = (0, import_ui22.withDirection)(import_icons8.JustifyTopIcon);
|
|
1686
|
+
var EndIcon = (0, import_ui22.withDirection)(import_icons8.JustifyBottomIcon);
|
|
1651
1687
|
var iconProps = {
|
|
1652
1688
|
isClockwise: false,
|
|
1653
1689
|
offset: 0,
|
|
@@ -1657,53 +1693,53 @@ var options = [
|
|
|
1657
1693
|
{
|
|
1658
1694
|
value: "start",
|
|
1659
1695
|
label: (0, import_i18n11.__)("Start", "elementor"),
|
|
1660
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1696
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
|
|
1661
1697
|
showTooltip: true
|
|
1662
1698
|
},
|
|
1663
1699
|
{
|
|
1664
1700
|
value: "center",
|
|
1665
1701
|
label: (0, import_i18n11.__)("Center", "elementor"),
|
|
1666
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1702
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(RotatedIcon, { icon: import_icons8.JustifyCenterIcon, size, ...iconProps }),
|
|
1667
1703
|
showTooltip: true
|
|
1668
1704
|
},
|
|
1669
1705
|
{
|
|
1670
1706
|
value: "end",
|
|
1671
1707
|
label: (0, import_i18n11.__)("End", "elementor"),
|
|
1672
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1708
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
|
|
1673
1709
|
showTooltip: true
|
|
1674
1710
|
},
|
|
1675
1711
|
{
|
|
1676
1712
|
value: "space-between",
|
|
1677
1713
|
label: (0, import_i18n11.__)("Space between", "elementor"),
|
|
1678
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1714
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(RotatedIcon, { icon: import_icons8.JustifySpaceBetweenVerticalIcon, size, ...iconProps }),
|
|
1679
1715
|
showTooltip: true
|
|
1680
1716
|
},
|
|
1681
1717
|
{
|
|
1682
1718
|
value: "space-around",
|
|
1683
1719
|
label: (0, import_i18n11.__)("Space around", "elementor"),
|
|
1684
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1720
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(RotatedIcon, { icon: import_icons8.JustifySpaceAroundVerticalIcon, size, ...iconProps }),
|
|
1685
1721
|
showTooltip: true
|
|
1686
1722
|
},
|
|
1687
1723
|
{
|
|
1688
1724
|
value: "space-evenly",
|
|
1689
1725
|
label: (0, import_i18n11.__)("Space evenly", "elementor"),
|
|
1690
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1726
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(RotatedIcon, { icon: import_icons8.JustifyDistributeVerticalIcon, size, ...iconProps }),
|
|
1691
1727
|
showTooltip: true
|
|
1692
1728
|
}
|
|
1693
1729
|
];
|
|
1694
1730
|
var AlignContentField = () => {
|
|
1695
1731
|
const { isSiteRtl } = useDirection();
|
|
1696
|
-
return /* @__PURE__ */
|
|
1732
|
+
return /* @__PURE__ */ React32.createElement(import_ui22.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React32.createElement(import_ui22.ThemeProvider, null, /* @__PURE__ */ React32.createElement(StylesField, { bind: "align-content" }, /* @__PURE__ */ React32.createElement(import_ui22.Stack, { gap: 1 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n11.__)("Align content", "elementor")), /* @__PURE__ */ React32.createElement(import_editor_controls14.ToggleControl, { options, fullWidth: true })))));
|
|
1697
1733
|
};
|
|
1698
1734
|
|
|
1699
1735
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
1700
|
-
var
|
|
1736
|
+
var React33 = __toESM(require("react"));
|
|
1701
1737
|
var import_editor_controls15 = require("@elementor/editor-controls");
|
|
1702
1738
|
var import_icons9 = require("@elementor/icons");
|
|
1703
|
-
var
|
|
1739
|
+
var import_ui23 = require("@elementor/ui");
|
|
1704
1740
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1705
|
-
var StartIcon2 = (0,
|
|
1706
|
-
var EndIcon2 = (0,
|
|
1741
|
+
var StartIcon2 = (0, import_ui23.withDirection)(import_icons9.LayoutAlignLeftIcon);
|
|
1742
|
+
var EndIcon2 = (0, import_ui23.withDirection)(import_icons9.LayoutAlignRightIcon);
|
|
1707
1743
|
var iconProps2 = {
|
|
1708
1744
|
isClockwise: false,
|
|
1709
1745
|
offset: 90
|
|
@@ -1712,41 +1748,41 @@ var options2 = [
|
|
|
1712
1748
|
{
|
|
1713
1749
|
value: "start",
|
|
1714
1750
|
label: (0, import_i18n12.__)("Start", "elementor"),
|
|
1715
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1751
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
|
|
1716
1752
|
showTooltip: true
|
|
1717
1753
|
},
|
|
1718
1754
|
{
|
|
1719
1755
|
value: "center",
|
|
1720
1756
|
label: (0, import_i18n12.__)("Center", "elementor"),
|
|
1721
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1757
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(RotatedIcon, { icon: import_icons9.LayoutAlignCenterIcon, size, ...iconProps2 }),
|
|
1722
1758
|
showTooltip: true
|
|
1723
1759
|
},
|
|
1724
1760
|
{
|
|
1725
1761
|
value: "end",
|
|
1726
1762
|
label: (0, import_i18n12.__)("End", "elementor"),
|
|
1727
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1763
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
|
|
1728
1764
|
showTooltip: true
|
|
1729
1765
|
},
|
|
1730
1766
|
{
|
|
1731
1767
|
value: "stretch",
|
|
1732
1768
|
label: (0, import_i18n12.__)("Stretch", "elementor"),
|
|
1733
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1769
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(RotatedIcon, { icon: import_icons9.LayoutDistributeVerticalIcon, size, ...iconProps2 }),
|
|
1734
1770
|
showTooltip: true
|
|
1735
1771
|
}
|
|
1736
1772
|
];
|
|
1737
1773
|
var AlignItemsField = () => {
|
|
1738
1774
|
const { isSiteRtl } = useDirection();
|
|
1739
|
-
return /* @__PURE__ */
|
|
1775
|
+
return /* @__PURE__ */ React33.createElement(import_ui23.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React33.createElement(import_ui23.ThemeProvider, null, /* @__PURE__ */ React33.createElement(StylesField, { bind: "align-items" }, /* @__PURE__ */ React33.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, (0, import_i18n12.__)("Align items", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui23.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(import_editor_controls15.ToggleControl, { options: options2 }))))));
|
|
1740
1776
|
};
|
|
1741
1777
|
|
|
1742
1778
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
1743
|
-
var
|
|
1779
|
+
var React34 = __toESM(require("react"));
|
|
1744
1780
|
var import_editor_controls16 = require("@elementor/editor-controls");
|
|
1745
1781
|
var import_icons10 = require("@elementor/icons");
|
|
1746
|
-
var
|
|
1782
|
+
var import_ui24 = require("@elementor/ui");
|
|
1747
1783
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1748
|
-
var StartIcon3 = (0,
|
|
1749
|
-
var EndIcon3 = (0,
|
|
1784
|
+
var StartIcon3 = (0, import_ui24.withDirection)(import_icons10.LayoutAlignLeftIcon);
|
|
1785
|
+
var EndIcon3 = (0, import_ui24.withDirection)(import_icons10.LayoutAlignRightIcon);
|
|
1750
1786
|
var iconProps3 = {
|
|
1751
1787
|
isClockwise: false,
|
|
1752
1788
|
offset: 90
|
|
@@ -1755,37 +1791,37 @@ var options3 = [
|
|
|
1755
1791
|
{
|
|
1756
1792
|
value: "start",
|
|
1757
1793
|
label: (0, import_i18n13.__)("Start", "elementor"),
|
|
1758
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1794
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: StartIcon3, size, ...iconProps3 }),
|
|
1759
1795
|
showTooltip: true
|
|
1760
1796
|
},
|
|
1761
1797
|
{
|
|
1762
1798
|
value: "center",
|
|
1763
1799
|
label: (0, import_i18n13.__)("Center", "elementor"),
|
|
1764
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1800
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: import_icons10.LayoutAlignCenterIcon, size, ...iconProps3 }),
|
|
1765
1801
|
showTooltip: true
|
|
1766
1802
|
},
|
|
1767
1803
|
{
|
|
1768
1804
|
value: "end",
|
|
1769
1805
|
label: (0, import_i18n13.__)("End", "elementor"),
|
|
1770
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1806
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: EndIcon3, size, ...iconProps3 }),
|
|
1771
1807
|
showTooltip: true
|
|
1772
1808
|
},
|
|
1773
1809
|
{
|
|
1774
1810
|
value: "stretch",
|
|
1775
1811
|
label: (0, import_i18n13.__)("Stretch", "elementor"),
|
|
1776
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1812
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: import_icons10.LayoutDistributeVerticalIcon, size, ...iconProps3 }),
|
|
1777
1813
|
showTooltip: true
|
|
1778
1814
|
}
|
|
1779
1815
|
];
|
|
1780
1816
|
var AlignSelfChild = () => {
|
|
1781
1817
|
const { isSiteRtl } = useDirection();
|
|
1782
|
-
return /* @__PURE__ */
|
|
1818
|
+
return /* @__PURE__ */ React34.createElement(import_ui24.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React34.createElement(import_ui24.ThemeProvider, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, (0, import_i18n13.__)("Align self", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React34.createElement(import_editor_controls16.ToggleControl, { options: options3 }))))));
|
|
1783
1819
|
};
|
|
1784
1820
|
|
|
1785
1821
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
1786
|
-
var
|
|
1822
|
+
var React35 = __toESM(require("react"));
|
|
1787
1823
|
var import_editor_controls17 = require("@elementor/editor-controls");
|
|
1788
|
-
var
|
|
1824
|
+
var import_ui25 = require("@elementor/ui");
|
|
1789
1825
|
var import_i18n14 = require("@wordpress/i18n");
|
|
1790
1826
|
var DisplayField = () => {
|
|
1791
1827
|
const options13 = [
|
|
@@ -1814,58 +1850,58 @@ var DisplayField = () => {
|
|
|
1814
1850
|
showTooltip: true
|
|
1815
1851
|
}
|
|
1816
1852
|
];
|
|
1817
|
-
return /* @__PURE__ */
|
|
1853
|
+
return /* @__PURE__ */ React35.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React35.createElement(import_ui25.Stack, { gap: 0.75 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, (0, import_i18n14.__)("Display", "elementor")), /* @__PURE__ */ React35.createElement(import_editor_controls17.ToggleControl, { options: options13, fullWidth: true })));
|
|
1818
1854
|
};
|
|
1819
1855
|
|
|
1820
1856
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
1821
|
-
var
|
|
1857
|
+
var React36 = __toESM(require("react"));
|
|
1822
1858
|
var import_editor_controls18 = require("@elementor/editor-controls");
|
|
1823
1859
|
var import_icons11 = require("@elementor/icons");
|
|
1824
|
-
var
|
|
1860
|
+
var import_ui26 = require("@elementor/ui");
|
|
1825
1861
|
var import_i18n15 = require("@wordpress/i18n");
|
|
1826
1862
|
var options4 = [
|
|
1827
1863
|
{
|
|
1828
1864
|
value: "row",
|
|
1829
1865
|
label: (0, import_i18n15.__)("Row", "elementor"),
|
|
1830
1866
|
renderContent: ({ size }) => {
|
|
1831
|
-
const StartIcon6 = (0,
|
|
1832
|
-
return /* @__PURE__ */
|
|
1867
|
+
const StartIcon6 = (0, import_ui26.withDirection)(import_icons11.ArrowRightIcon);
|
|
1868
|
+
return /* @__PURE__ */ React36.createElement(StartIcon6, { fontSize: size });
|
|
1833
1869
|
},
|
|
1834
1870
|
showTooltip: true
|
|
1835
1871
|
},
|
|
1836
1872
|
{
|
|
1837
1873
|
value: "column",
|
|
1838
1874
|
label: (0, import_i18n15.__)("Column", "elementor"),
|
|
1839
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1875
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons11.ArrowDownSmallIcon, { fontSize: size }),
|
|
1840
1876
|
showTooltip: true
|
|
1841
1877
|
},
|
|
1842
1878
|
{
|
|
1843
1879
|
value: "row-reverse",
|
|
1844
1880
|
label: (0, import_i18n15.__)("Reversed row", "elementor"),
|
|
1845
1881
|
renderContent: ({ size }) => {
|
|
1846
|
-
const EndIcon6 = (0,
|
|
1847
|
-
return /* @__PURE__ */
|
|
1882
|
+
const EndIcon6 = (0, import_ui26.withDirection)(import_icons11.ArrowLeftIcon);
|
|
1883
|
+
return /* @__PURE__ */ React36.createElement(EndIcon6, { fontSize: size });
|
|
1848
1884
|
},
|
|
1849
1885
|
showTooltip: true
|
|
1850
1886
|
},
|
|
1851
1887
|
{
|
|
1852
1888
|
value: "column-reverse",
|
|
1853
1889
|
label: (0, import_i18n15.__)("Reversed column", "elementor"),
|
|
1854
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1890
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons11.ArrowUpSmallIcon, { fontSize: size }),
|
|
1855
1891
|
showTooltip: true
|
|
1856
1892
|
}
|
|
1857
1893
|
];
|
|
1858
1894
|
var FlexDirectionField = () => {
|
|
1859
1895
|
const { isSiteRtl } = useDirection();
|
|
1860
|
-
return /* @__PURE__ */
|
|
1896
|
+
return /* @__PURE__ */ React36.createElement(import_ui26.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(import_ui26.ThemeProvider, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React36.createElement(import_ui26.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(import_ui26.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, (0, import_i18n15.__)("Direction", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui26.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React36.createElement(import_editor_controls18.ToggleControl, { options: options4 }))))));
|
|
1861
1897
|
};
|
|
1862
1898
|
|
|
1863
1899
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
1864
|
-
var
|
|
1900
|
+
var React37 = __toESM(require("react"));
|
|
1865
1901
|
var import_react12 = require("react");
|
|
1866
1902
|
var import_editor_controls19 = require("@elementor/editor-controls");
|
|
1867
1903
|
var import_icons12 = require("@elementor/icons");
|
|
1868
|
-
var
|
|
1904
|
+
var import_ui27 = require("@elementor/ui");
|
|
1869
1905
|
var import_i18n16 = require("@wordpress/i18n");
|
|
1870
1906
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
1871
1907
|
var LAST_DEFAULT_VALUE = 99999;
|
|
@@ -1880,19 +1916,19 @@ var items = [
|
|
|
1880
1916
|
{
|
|
1881
1917
|
value: FIRST,
|
|
1882
1918
|
label: (0, import_i18n16.__)("First", "elementor"),
|
|
1883
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1919
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons12.ArrowUpSmallIcon, { fontSize: size }),
|
|
1884
1920
|
showTooltip: true
|
|
1885
1921
|
},
|
|
1886
1922
|
{
|
|
1887
1923
|
value: LAST,
|
|
1888
1924
|
label: (0, import_i18n16.__)("Last", "elementor"),
|
|
1889
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1925
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons12.ArrowDownSmallIcon, { fontSize: size }),
|
|
1890
1926
|
showTooltip: true
|
|
1891
1927
|
},
|
|
1892
1928
|
{
|
|
1893
1929
|
value: CUSTOM,
|
|
1894
1930
|
label: (0, import_i18n16.__)("Custom", "elementor"),
|
|
1895
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1931
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons12.PencilIcon, { fontSize: size }),
|
|
1896
1932
|
showTooltip: true
|
|
1897
1933
|
}
|
|
1898
1934
|
];
|
|
@@ -1907,7 +1943,7 @@ var FlexOrderField = () => {
|
|
|
1907
1943
|
}
|
|
1908
1944
|
setOrder({ $$type: "number", value: orderValueMap[group] });
|
|
1909
1945
|
};
|
|
1910
|
-
return /* @__PURE__ */
|
|
1946
|
+
return /* @__PURE__ */ React37.createElement(import_ui27.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React37.createElement(import_ui27.ThemeProvider, null, /* @__PURE__ */ React37.createElement(StylesField, { bind: "order" }, /* @__PURE__ */ React37.createElement(SectionContent, null, /* @__PURE__ */ React37.createElement(import_ui27.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui27.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, (0, import_i18n16.__)("Order", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui27.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React37.createElement(
|
|
1911
1947
|
import_editor_controls19.ControlToggleButtonGroup,
|
|
1912
1948
|
{
|
|
1913
1949
|
items,
|
|
@@ -1915,7 +1951,7 @@ var FlexOrderField = () => {
|
|
|
1915
1951
|
onChange: handleToggleButtonChange,
|
|
1916
1952
|
exclusive: true
|
|
1917
1953
|
}
|
|
1918
|
-
))), CUSTOM === groupControlValue && /* @__PURE__ */
|
|
1954
|
+
))), CUSTOM === groupControlValue && /* @__PURE__ */ React37.createElement(import_ui27.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui27.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, (0, import_i18n16.__)("Custom order", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui27.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React37.createElement(
|
|
1919
1955
|
import_editor_controls19.NumberControl,
|
|
1920
1956
|
{
|
|
1921
1957
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -1935,30 +1971,30 @@ var getGroupControlValue = (order) => {
|
|
|
1935
1971
|
};
|
|
1936
1972
|
|
|
1937
1973
|
// src/components/style-sections/layout-section/flex-size-field.tsx
|
|
1938
|
-
var
|
|
1974
|
+
var React38 = __toESM(require("react"));
|
|
1939
1975
|
var import_react13 = require("react");
|
|
1940
1976
|
var import_editor_controls20 = require("@elementor/editor-controls");
|
|
1941
1977
|
var import_icons13 = require("@elementor/icons");
|
|
1942
|
-
var
|
|
1978
|
+
var import_ui28 = require("@elementor/ui");
|
|
1943
1979
|
var import_i18n17 = require("@wordpress/i18n");
|
|
1944
1980
|
var DEFAULT = 1;
|
|
1945
1981
|
var items2 = [
|
|
1946
1982
|
{
|
|
1947
1983
|
value: "flex-grow",
|
|
1948
1984
|
label: (0, import_i18n17.__)("Grow", "elementor"),
|
|
1949
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1985
|
+
renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.ExpandIcon, { fontSize: size }),
|
|
1950
1986
|
showTooltip: true
|
|
1951
1987
|
},
|
|
1952
1988
|
{
|
|
1953
1989
|
value: "flex-shrink",
|
|
1954
1990
|
label: (0, import_i18n17.__)("Shrink", "elementor"),
|
|
1955
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1991
|
+
renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.ShrinkIcon, { fontSize: size }),
|
|
1956
1992
|
showTooltip: true
|
|
1957
1993
|
},
|
|
1958
1994
|
{
|
|
1959
1995
|
value: "custom",
|
|
1960
1996
|
label: (0, import_i18n17.__)("Custom", "elementor"),
|
|
1961
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1997
|
+
renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.PencilIcon, { fontSize: size }),
|
|
1962
1998
|
showTooltip: true
|
|
1963
1999
|
}
|
|
1964
2000
|
];
|
|
@@ -1982,7 +2018,7 @@ var FlexSizeField = () => {
|
|
|
1982
2018
|
setGrowField(null);
|
|
1983
2019
|
setShrinkField({ $$type: "number", value: DEFAULT });
|
|
1984
2020
|
};
|
|
1985
|
-
return /* @__PURE__ */
|
|
2021
|
+
return /* @__PURE__ */ React38.createElement(import_ui28.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React38.createElement(import_ui28.ThemeProvider, null, /* @__PURE__ */ React38.createElement(SectionContent, null, /* @__PURE__ */ React38.createElement(import_ui28.Typography, { fontSize: "large" }, activeGroup), /* @__PURE__ */ React38.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(StylesField, { bind: activeGroup ?? "" }, /* @__PURE__ */ React38.createElement(ControlLabel, null, (0, import_i18n17.__)("Size", "elementor")))), /* @__PURE__ */ React38.createElement(import_ui28.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React38.createElement(
|
|
1986
2022
|
import_editor_controls20.ControlToggleButtonGroup,
|
|
1987
2023
|
{
|
|
1988
2024
|
value: activeGroup,
|
|
@@ -1990,9 +2026,9 @@ var FlexSizeField = () => {
|
|
|
1990
2026
|
items: items2,
|
|
1991
2027
|
exclusive: true
|
|
1992
2028
|
}
|
|
1993
|
-
))), "custom" === activeGroup && /* @__PURE__ */
|
|
2029
|
+
))), "custom" === activeGroup && /* @__PURE__ */ React38.createElement(FlexCustomField, null))));
|
|
1994
2030
|
};
|
|
1995
|
-
var FlexCustomField = () => /* @__PURE__ */
|
|
2031
|
+
var FlexCustomField = () => /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React38.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, (0, import_i18n17.__)("Grow", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui28.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React38.createElement(import_editor_controls20.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React38.createElement(StylesField, { bind: "flex-shrink" }, /* @__PURE__ */ React38.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, (0, import_i18n17.__)("Shrink", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui28.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React38.createElement(import_editor_controls20.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React38.createElement(StylesField, { bind: "flex-basis" }, /* @__PURE__ */ React38.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, (0, import_i18n17.__)("Basis", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui28.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React38.createElement(import_editor_controls20.SizeControl, { extendedValues: ["auto"] })))));
|
|
1996
2032
|
var getActiveGroup = ({
|
|
1997
2033
|
grow,
|
|
1998
2034
|
shrink,
|
|
@@ -2014,98 +2050,98 @@ var getActiveGroup = ({
|
|
|
2014
2050
|
};
|
|
2015
2051
|
|
|
2016
2052
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
2017
|
-
var
|
|
2053
|
+
var React39 = __toESM(require("react"));
|
|
2018
2054
|
var import_editor_controls21 = require("@elementor/editor-controls");
|
|
2019
|
-
var
|
|
2055
|
+
var import_ui29 = require("@elementor/ui");
|
|
2020
2056
|
var import_i18n18 = require("@wordpress/i18n");
|
|
2021
2057
|
var GapControlField = () => {
|
|
2022
|
-
return /* @__PURE__ */
|
|
2058
|
+
return /* @__PURE__ */ React39.createElement(import_ui29.Stack, { gap: 1 }, /* @__PURE__ */ React39.createElement(StylesField, { bind: "gap" }, /* @__PURE__ */ React39.createElement(import_editor_controls21.GapControl, { label: (0, import_i18n18.__)("Gaps", "elementor") })));
|
|
2023
2059
|
};
|
|
2024
2060
|
|
|
2025
2061
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
2026
|
-
var
|
|
2062
|
+
var React40 = __toESM(require("react"));
|
|
2027
2063
|
var import_editor_controls22 = require("@elementor/editor-controls");
|
|
2028
2064
|
var import_icons14 = require("@elementor/icons");
|
|
2029
|
-
var
|
|
2065
|
+
var import_ui30 = require("@elementor/ui");
|
|
2030
2066
|
var import_i18n19 = require("@wordpress/i18n");
|
|
2031
|
-
var StartIcon4 = (0,
|
|
2032
|
-
var EndIcon4 = (0,
|
|
2067
|
+
var StartIcon4 = (0, import_ui30.withDirection)(import_icons14.JustifyTopIcon);
|
|
2068
|
+
var EndIcon4 = (0, import_ui30.withDirection)(import_icons14.JustifyBottomIcon);
|
|
2033
2069
|
var iconProps4 = {
|
|
2034
2070
|
isClockwise: true,
|
|
2035
2071
|
offset: -90
|
|
2036
2072
|
};
|
|
2037
2073
|
var options5 = [
|
|
2038
2074
|
{
|
|
2039
|
-
value: "start",
|
|
2075
|
+
value: "flex-start",
|
|
2040
2076
|
label: (0, import_i18n19.__)("Start", "elementor"),
|
|
2041
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2077
|
+
renderContent: ({ size }) => /* @__PURE__ */ React40.createElement(RotatedIcon, { icon: StartIcon4, size, ...iconProps4 }),
|
|
2042
2078
|
showTooltip: true
|
|
2043
2079
|
},
|
|
2044
2080
|
{
|
|
2045
2081
|
value: "center",
|
|
2046
2082
|
label: (0, import_i18n19.__)("Center", "elementor"),
|
|
2047
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2083
|
+
renderContent: ({ size }) => /* @__PURE__ */ React40.createElement(RotatedIcon, { icon: import_icons14.JustifyCenterIcon, size, ...iconProps4 }),
|
|
2048
2084
|
showTooltip: true
|
|
2049
2085
|
},
|
|
2050
2086
|
{
|
|
2051
|
-
value: "end",
|
|
2087
|
+
value: "flex-end",
|
|
2052
2088
|
label: (0, import_i18n19.__)("End", "elementor"),
|
|
2053
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2089
|
+
renderContent: ({ size }) => /* @__PURE__ */ React40.createElement(RotatedIcon, { icon: EndIcon4, size, ...iconProps4 }),
|
|
2054
2090
|
showTooltip: true
|
|
2055
2091
|
},
|
|
2056
2092
|
{
|
|
2057
2093
|
value: "space-between",
|
|
2058
2094
|
label: (0, import_i18n19.__)("Space between", "elementor"),
|
|
2059
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2095
|
+
renderContent: ({ size }) => /* @__PURE__ */ React40.createElement(RotatedIcon, { icon: import_icons14.JustifySpaceBetweenVerticalIcon, size, ...iconProps4 }),
|
|
2060
2096
|
showTooltip: true
|
|
2061
2097
|
},
|
|
2062
2098
|
{
|
|
2063
2099
|
value: "space-around",
|
|
2064
2100
|
label: (0, import_i18n19.__)("Space around", "elementor"),
|
|
2065
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2101
|
+
renderContent: ({ size }) => /* @__PURE__ */ React40.createElement(RotatedIcon, { icon: import_icons14.JustifySpaceAroundVerticalIcon, size, ...iconProps4 }),
|
|
2066
2102
|
showTooltip: true
|
|
2067
2103
|
},
|
|
2068
2104
|
{
|
|
2069
2105
|
value: "space-evenly",
|
|
2070
2106
|
label: (0, import_i18n19.__)("Space evenly", "elementor"),
|
|
2071
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2107
|
+
renderContent: ({ size }) => /* @__PURE__ */ React40.createElement(RotatedIcon, { icon: import_icons14.JustifyDistributeVerticalIcon, size, ...iconProps4 }),
|
|
2072
2108
|
showTooltip: true
|
|
2073
2109
|
}
|
|
2074
2110
|
];
|
|
2075
2111
|
var JustifyContentField = () => {
|
|
2076
2112
|
const { isSiteRtl } = useDirection();
|
|
2077
|
-
return /* @__PURE__ */
|
|
2113
|
+
return /* @__PURE__ */ React40.createElement(import_ui30.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React40.createElement(import_ui30.ThemeProvider, null, /* @__PURE__ */ React40.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React40.createElement(import_ui30.Stack, { gap: 0.75 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, (0, import_i18n19.__)("Justify content", "elementor")), /* @__PURE__ */ React40.createElement(import_editor_controls22.ToggleControl, { options: options5, fullWidth: true })))));
|
|
2078
2114
|
};
|
|
2079
2115
|
|
|
2080
2116
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
2081
|
-
var
|
|
2117
|
+
var React41 = __toESM(require("react"));
|
|
2082
2118
|
var import_editor_controls23 = require("@elementor/editor-controls");
|
|
2083
2119
|
var import_icons15 = require("@elementor/icons");
|
|
2084
|
-
var
|
|
2120
|
+
var import_ui31 = require("@elementor/ui");
|
|
2085
2121
|
var import_i18n20 = require("@wordpress/i18n");
|
|
2086
2122
|
var options6 = [
|
|
2087
2123
|
{
|
|
2088
2124
|
value: "nowrap",
|
|
2089
2125
|
label: (0, import_i18n20.__)("No wrap", "elementor"),
|
|
2090
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2126
|
+
renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons15.ArrowRightIcon, { fontSize: size }),
|
|
2091
2127
|
showTooltip: true
|
|
2092
2128
|
},
|
|
2093
2129
|
{
|
|
2094
2130
|
value: "wrap",
|
|
2095
2131
|
label: (0, import_i18n20.__)("Wrap", "elementor"),
|
|
2096
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2132
|
+
renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons15.ArrowBackIcon, { fontSize: size }),
|
|
2097
2133
|
showTooltip: true
|
|
2098
2134
|
},
|
|
2099
2135
|
{
|
|
2100
2136
|
value: "wrap-reverse",
|
|
2101
2137
|
label: (0, import_i18n20.__)("Reversed wrap", "elementor"),
|
|
2102
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2138
|
+
renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons15.ArrowForwardIcon, { fontSize: size }),
|
|
2103
2139
|
showTooltip: true
|
|
2104
2140
|
}
|
|
2105
2141
|
];
|
|
2106
2142
|
var WrapField = () => {
|
|
2107
2143
|
const { isSiteRtl } = useDirection();
|
|
2108
|
-
return /* @__PURE__ */
|
|
2144
|
+
return /* @__PURE__ */ React41.createElement(import_ui31.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React41.createElement(import_ui31.ThemeProvider, null, /* @__PURE__ */ React41.createElement(StylesField, { bind: "flex-wrap" }, /* @__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(ControlLabel, null, (0, import_i18n20.__)("Wrap", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(import_editor_controls23.ToggleControl, { options: options6 }))))));
|
|
2109
2145
|
};
|
|
2110
2146
|
|
|
2111
2147
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -2114,46 +2150,46 @@ var LayoutSection = () => {
|
|
|
2114
2150
|
const { element } = useElement();
|
|
2115
2151
|
const parent = (0, import_editor_elements6.useParentElement)(element.id);
|
|
2116
2152
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
2117
|
-
return /* @__PURE__ */
|
|
2153
|
+
return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(DisplayField, null), ("flex" === display?.value || "inline-flex" === display?.value) && /* @__PURE__ */ React42.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React42.createElement(FlexChildFields, null));
|
|
2118
2154
|
};
|
|
2119
2155
|
var FlexFields = () => {
|
|
2120
2156
|
const [flexWrap] = useStylesField("flex-wrap");
|
|
2121
|
-
return /* @__PURE__ */
|
|
2157
|
+
return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(FlexDirectionField, null), /* @__PURE__ */ React42.createElement(JustifyContentField, null), /* @__PURE__ */ React42.createElement(AlignItemsField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(GapControlField, null), /* @__PURE__ */ React42.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React42.createElement(AlignContentField, null));
|
|
2122
2158
|
};
|
|
2123
|
-
var FlexChildFields = () => /* @__PURE__ */
|
|
2159
|
+
var FlexChildFields = () => /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(import_editor_controls24.ControlFormLabel, null, (0, import_i18n21.__)("Flex child", "elementor")), /* @__PURE__ */ React42.createElement(AlignSelfChild, null), /* @__PURE__ */ React42.createElement(FlexOrderField, null), /* @__PURE__ */ React42.createElement(FlexSizeField, null));
|
|
2124
2160
|
|
|
2125
2161
|
// src/components/style-sections/position-section/position-section.tsx
|
|
2126
|
-
var
|
|
2162
|
+
var React46 = __toESM(require("react"));
|
|
2127
2163
|
var import_session2 = require("@elementor/session");
|
|
2128
2164
|
|
|
2129
2165
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
2130
|
-
var
|
|
2166
|
+
var React43 = __toESM(require("react"));
|
|
2131
2167
|
var import_editor_controls25 = require("@elementor/editor-controls");
|
|
2132
2168
|
var import_icons16 = require("@elementor/icons");
|
|
2133
|
-
var
|
|
2169
|
+
var import_ui32 = require("@elementor/ui");
|
|
2134
2170
|
var import_i18n22 = require("@wordpress/i18n");
|
|
2135
|
-
var InlineStartIcon2 = (0,
|
|
2136
|
-
var InlineEndIcon2 = (0,
|
|
2171
|
+
var InlineStartIcon2 = (0, import_ui32.withDirection)(import_icons16.SideLeftIcon);
|
|
2172
|
+
var InlineEndIcon2 = (0, import_ui32.withDirection)(import_icons16.SideRightIcon);
|
|
2137
2173
|
var sideIcons = {
|
|
2138
|
-
"inset-block-start": /* @__PURE__ */
|
|
2139
|
-
"inset-block-end": /* @__PURE__ */
|
|
2140
|
-
"inset-inline-start": /* @__PURE__ */
|
|
2141
|
-
"inset-inline-end": /* @__PURE__ */
|
|
2174
|
+
"inset-block-start": /* @__PURE__ */ React43.createElement(import_icons16.SideTopIcon, { fontSize: "tiny" }),
|
|
2175
|
+
"inset-block-end": /* @__PURE__ */ React43.createElement(import_icons16.SideBottomIcon, { fontSize: "tiny" }),
|
|
2176
|
+
"inset-inline-start": /* @__PURE__ */ React43.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
|
|
2177
|
+
"inset-inline-end": /* @__PURE__ */ React43.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
|
|
2142
2178
|
};
|
|
2143
2179
|
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n22.__)("Right", "elementor") : (0, import_i18n22.__)("Left", "elementor");
|
|
2144
2180
|
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n22.__)("Left", "elementor") : (0, import_i18n22.__)("Right", "elementor");
|
|
2145
2181
|
var DimensionsField = () => {
|
|
2146
2182
|
const { isSiteRtl } = useDirection();
|
|
2147
|
-
return /* @__PURE__ */
|
|
2183
|
+
return /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(import_ui32.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n22.__)("Top", "elementor") }), /* @__PURE__ */ React43.createElement(DimensionField, { side: "inset-inline-end", label: getInlineEndLabel(isSiteRtl) })), /* @__PURE__ */ React43.createElement(import_ui32.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n22.__)("Bottom", "elementor") }), /* @__PURE__ */ React43.createElement(DimensionField, { side: "inset-inline-start", label: getInlineStartLabel(isSiteRtl) })));
|
|
2148
2184
|
};
|
|
2149
2185
|
var DimensionField = ({ side, label }) => {
|
|
2150
|
-
return /* @__PURE__ */
|
|
2186
|
+
return /* @__PURE__ */ React43.createElement(import_ui32.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React43.createElement(import_ui32.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(ControlLabel, null, label)), /* @__PURE__ */ React43.createElement(import_ui32.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(StylesField, { bind: side }, /* @__PURE__ */ React43.createElement(import_editor_controls25.SizeControl, { startIcon: sideIcons[side], extendedValues: ["auto"] }))));
|
|
2151
2187
|
};
|
|
2152
2188
|
|
|
2153
2189
|
// src/components/style-sections/position-section/position-field.tsx
|
|
2154
|
-
var
|
|
2190
|
+
var React44 = __toESM(require("react"));
|
|
2155
2191
|
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
2156
|
-
var
|
|
2192
|
+
var import_ui33 = require("@elementor/ui");
|
|
2157
2193
|
var import_i18n23 = require("@wordpress/i18n");
|
|
2158
2194
|
var positionOptions = [
|
|
2159
2195
|
{ label: (0, import_i18n23.__)("Static", "elementor"), value: "static" },
|
|
@@ -2163,16 +2199,16 @@ var positionOptions = [
|
|
|
2163
2199
|
{ label: (0, import_i18n23.__)("Sticky", "elementor"), value: "sticky" }
|
|
2164
2200
|
];
|
|
2165
2201
|
var PositionField = ({ onChange }) => {
|
|
2166
|
-
return /* @__PURE__ */
|
|
2202
|
+
return /* @__PURE__ */ React44.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React44.createElement(import_ui33.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlLabel, null, (0, import_i18n23.__)("Position", "elementor"))), /* @__PURE__ */ React44.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React44.createElement(import_editor_controls26.SelectControl, { options: positionOptions, onChange }))));
|
|
2167
2203
|
};
|
|
2168
2204
|
|
|
2169
2205
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
2170
|
-
var
|
|
2206
|
+
var React45 = __toESM(require("react"));
|
|
2171
2207
|
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
2172
|
-
var
|
|
2208
|
+
var import_ui34 = require("@elementor/ui");
|
|
2173
2209
|
var import_i18n24 = require("@wordpress/i18n");
|
|
2174
2210
|
var ZIndexField = () => {
|
|
2175
|
-
return /* @__PURE__ */
|
|
2211
|
+
return /* @__PURE__ */ React45.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React45.createElement(import_ui34.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ControlLabel, null, (0, import_i18n24.__)("Z-index", "elementor"))), /* @__PURE__ */ React45.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(import_editor_controls27.NumberControl, null))));
|
|
2176
2212
|
};
|
|
2177
2213
|
|
|
2178
2214
|
// src/components/style-sections/position-section/position-section.tsx
|
|
@@ -2204,7 +2240,7 @@ var PositionSection = () => {
|
|
|
2204
2240
|
}
|
|
2205
2241
|
};
|
|
2206
2242
|
const isNotStatic = positionValue && positionValue?.value !== "static";
|
|
2207
|
-
return /* @__PURE__ */
|
|
2243
|
+
return /* @__PURE__ */ React46.createElement(SectionContent, null, /* @__PURE__ */ React46.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(DimensionsField, null), /* @__PURE__ */ React46.createElement(ZIndexField, null)) : null);
|
|
2208
2244
|
};
|
|
2209
2245
|
var usePersistDimensions = () => {
|
|
2210
2246
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -2214,111 +2250,111 @@ var usePersistDimensions = () => {
|
|
|
2214
2250
|
};
|
|
2215
2251
|
|
|
2216
2252
|
// src/components/style-sections/size-section/size-section.tsx
|
|
2217
|
-
var
|
|
2253
|
+
var React48 = __toESM(require("react"));
|
|
2218
2254
|
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
2219
|
-
var
|
|
2255
|
+
var import_ui36 = require("@elementor/ui");
|
|
2220
2256
|
var import_i18n26 = require("@wordpress/i18n");
|
|
2221
2257
|
|
|
2222
2258
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
2223
|
-
var
|
|
2259
|
+
var React47 = __toESM(require("react"));
|
|
2224
2260
|
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
2225
2261
|
var import_icons17 = require("@elementor/icons");
|
|
2226
|
-
var
|
|
2262
|
+
var import_ui35 = require("@elementor/ui");
|
|
2227
2263
|
var import_i18n25 = require("@wordpress/i18n");
|
|
2228
2264
|
var options7 = [
|
|
2229
2265
|
{
|
|
2230
2266
|
value: "visible",
|
|
2231
2267
|
label: (0, import_i18n25.__)("Visible", "elementor"),
|
|
2232
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2268
|
+
renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons17.EyeIcon, { fontSize: size }),
|
|
2233
2269
|
showTooltip: true
|
|
2234
2270
|
},
|
|
2235
2271
|
{
|
|
2236
2272
|
value: "hidden",
|
|
2237
2273
|
label: (0, import_i18n25.__)("Hidden", "elementor"),
|
|
2238
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2274
|
+
renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons17.EyeOffIcon, { fontSize: size }),
|
|
2239
2275
|
showTooltip: true
|
|
2240
2276
|
},
|
|
2241
2277
|
{
|
|
2242
2278
|
value: "auto",
|
|
2243
2279
|
label: (0, import_i18n25.__)("Auto", "elementor"),
|
|
2244
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2280
|
+
renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons17.LetterAIcon, { fontSize: size }),
|
|
2245
2281
|
showTooltip: true
|
|
2246
2282
|
}
|
|
2247
2283
|
];
|
|
2248
2284
|
var OverflowField = () => {
|
|
2249
|
-
return /* @__PURE__ */
|
|
2285
|
+
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "overflow" }, /* @__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(ControlLabel, null, (0, import_i18n25.__)("Overflow", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(import_editor_controls28.ToggleControl, { options: options7 }))));
|
|
2250
2286
|
};
|
|
2251
2287
|
|
|
2252
2288
|
// src/components/style-sections/size-section/size-section.tsx
|
|
2253
2289
|
var SizeSection = () => {
|
|
2254
|
-
return /* @__PURE__ */
|
|
2290
|
+
return /* @__PURE__ */ React48.createElement(SectionContent, null, /* @__PURE__ */ React48.createElement(import_ui36.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(SizeField, { bind: "width", label: (0, import_i18n26.__)("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React48.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(SizeField, { bind: "height", label: (0, import_i18n26.__)("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React48.createElement(import_ui36.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(
|
|
2255
2291
|
SizeField,
|
|
2256
2292
|
{
|
|
2257
2293
|
bind: "min-width",
|
|
2258
2294
|
label: (0, import_i18n26.__)("Min width", "elementor"),
|
|
2259
2295
|
extendedValues: ["auto"]
|
|
2260
2296
|
}
|
|
2261
|
-
)), /* @__PURE__ */
|
|
2297
|
+
)), /* @__PURE__ */ React48.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(
|
|
2262
2298
|
SizeField,
|
|
2263
2299
|
{
|
|
2264
2300
|
bind: "min-height",
|
|
2265
2301
|
label: (0, import_i18n26.__)("Min height", "elementor"),
|
|
2266
2302
|
extendedValues: ["auto"]
|
|
2267
2303
|
}
|
|
2268
|
-
))), /* @__PURE__ */
|
|
2304
|
+
))), /* @__PURE__ */ React48.createElement(import_ui36.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(SizeField, { bind: "max-width", label: (0, import_i18n26.__)("Max width", "elementor") })), /* @__PURE__ */ React48.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(SizeField, { bind: "max-height", label: (0, import_i18n26.__)("Max height", "elementor") }))), /* @__PURE__ */ React48.createElement(PanelDivider, null), /* @__PURE__ */ React48.createElement(import_ui36.Stack, null, /* @__PURE__ */ React48.createElement(OverflowField, null)));
|
|
2269
2305
|
};
|
|
2270
2306
|
var SizeField = ({ label, bind, extendedValues }) => {
|
|
2271
|
-
return /* @__PURE__ */
|
|
2307
|
+
return /* @__PURE__ */ React48.createElement(StylesField, { bind }, /* @__PURE__ */ React48.createElement(import_ui36.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React48.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React48.createElement(ControlLabel, null, label)), /* @__PURE__ */ React48.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React48.createElement(import_editor_controls29.SizeControl, { extendedValues }))));
|
|
2272
2308
|
};
|
|
2273
2309
|
|
|
2274
2310
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
2275
|
-
var
|
|
2311
|
+
var React49 = __toESM(require("react"));
|
|
2276
2312
|
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
2277
2313
|
var import_i18n27 = require("@wordpress/i18n");
|
|
2278
2314
|
var SpacingSection = () => {
|
|
2279
2315
|
const { isSiteRtl } = useDirection();
|
|
2280
|
-
return /* @__PURE__ */
|
|
2316
|
+
return /* @__PURE__ */ React49.createElement(SectionContent, null, /* @__PURE__ */ React49.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React49.createElement(
|
|
2281
2317
|
import_editor_controls30.LinkedDimensionsControl,
|
|
2282
2318
|
{
|
|
2283
2319
|
label: (0, import_i18n27.__)("Margin", "elementor"),
|
|
2284
2320
|
isSiteRtl,
|
|
2285
2321
|
extendedValues: ["auto"]
|
|
2286
2322
|
}
|
|
2287
|
-
)), /* @__PURE__ */
|
|
2323
|
+
)), /* @__PURE__ */ React49.createElement(PanelDivider, null), /* @__PURE__ */ React49.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React49.createElement(import_editor_controls30.LinkedDimensionsControl, { label: (0, import_i18n27.__)("Padding", "elementor"), isSiteRtl })));
|
|
2288
2324
|
};
|
|
2289
2325
|
|
|
2290
2326
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
2291
|
-
var
|
|
2327
|
+
var React64 = __toESM(require("react"));
|
|
2292
2328
|
|
|
2293
2329
|
// src/components/collapsible-content.tsx
|
|
2294
|
-
var
|
|
2330
|
+
var React50 = __toESM(require("react"));
|
|
2295
2331
|
var import_react14 = require("react");
|
|
2296
|
-
var
|
|
2332
|
+
var import_ui37 = require("@elementor/ui");
|
|
2297
2333
|
var import_i18n28 = require("@wordpress/i18n");
|
|
2298
2334
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
2299
2335
|
const [open, setOpen] = (0, import_react14.useState)(defaultOpen);
|
|
2300
2336
|
const handleToggle = () => {
|
|
2301
2337
|
setOpen((prevOpen) => !prevOpen);
|
|
2302
2338
|
};
|
|
2303
|
-
return /* @__PURE__ */
|
|
2304
|
-
|
|
2339
|
+
return /* @__PURE__ */ React50.createElement(import_ui37.Stack, null, /* @__PURE__ */ React50.createElement(
|
|
2340
|
+
import_ui37.Button,
|
|
2305
2341
|
{
|
|
2306
2342
|
fullWidth: true,
|
|
2307
2343
|
size: "small",
|
|
2308
2344
|
color: "secondary",
|
|
2309
2345
|
variant: "outlined",
|
|
2310
2346
|
onClick: handleToggle,
|
|
2311
|
-
endIcon: /* @__PURE__ */
|
|
2347
|
+
endIcon: /* @__PURE__ */ React50.createElement(CollapseIcon, { open }),
|
|
2312
2348
|
sx: { my: 0.5 }
|
|
2313
2349
|
},
|
|
2314
2350
|
open ? (0, import_i18n28.__)("Show less", "elementor") : (0, import_i18n28.__)("Show more", "elementor")
|
|
2315
|
-
), /* @__PURE__ */
|
|
2351
|
+
), /* @__PURE__ */ React50.createElement(import_ui37.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
2316
2352
|
};
|
|
2317
2353
|
|
|
2318
2354
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
2319
|
-
var
|
|
2355
|
+
var React51 = __toESM(require("react"));
|
|
2320
2356
|
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
2321
|
-
var
|
|
2357
|
+
var import_ui38 = require("@elementor/ui");
|
|
2322
2358
|
var import_i18n30 = require("@wordpress/i18n");
|
|
2323
2359
|
|
|
2324
2360
|
// src/components/style-sections/typography-section/hooks/use-font-families.ts
|
|
@@ -2372,44 +2408,44 @@ var FontFamilyField = () => {
|
|
|
2372
2408
|
if (fontFamilies.length === 0) {
|
|
2373
2409
|
return null;
|
|
2374
2410
|
}
|
|
2375
|
-
return /* @__PURE__ */
|
|
2411
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React51.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlLabel, null, (0, import_i18n30.__)("Font family", "elementor"))), /* @__PURE__ */ React51.createElement(import_ui38.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React51.createElement(import_editor_controls31.FontFamilyControl, { fontFamilies }))));
|
|
2376
2412
|
};
|
|
2377
2413
|
|
|
2378
2414
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
2379
|
-
var
|
|
2415
|
+
var React52 = __toESM(require("react"));
|
|
2380
2416
|
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
2381
|
-
var
|
|
2417
|
+
var import_ui39 = require("@elementor/ui");
|
|
2382
2418
|
var import_i18n31 = require("@wordpress/i18n");
|
|
2383
2419
|
var FontSizeField = () => {
|
|
2384
|
-
return /* @__PURE__ */
|
|
2420
|
+
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React52.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ControlLabel, null, (0, import_i18n31.__)("Font size", "elementor"))), /* @__PURE__ */ React52.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls32.SizeControl, null))));
|
|
2385
2421
|
};
|
|
2386
2422
|
|
|
2387
2423
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
2388
|
-
var
|
|
2424
|
+
var React53 = __toESM(require("react"));
|
|
2389
2425
|
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
2390
2426
|
var import_icons18 = require("@elementor/icons");
|
|
2391
|
-
var
|
|
2427
|
+
var import_ui40 = require("@elementor/ui");
|
|
2392
2428
|
var import_i18n32 = require("@wordpress/i18n");
|
|
2393
2429
|
var options8 = [
|
|
2394
2430
|
{
|
|
2395
2431
|
value: "normal",
|
|
2396
2432
|
label: (0, import_i18n32.__)("Normal", "elementor"),
|
|
2397
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2433
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons18.MinusIcon, { fontSize: size }),
|
|
2398
2434
|
showTooltip: true
|
|
2399
2435
|
},
|
|
2400
2436
|
{
|
|
2401
2437
|
value: "italic",
|
|
2402
2438
|
label: (0, import_i18n32.__)("Italic", "elementor"),
|
|
2403
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2439
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons18.ItalicIcon, { fontSize: size }),
|
|
2404
2440
|
showTooltip: true
|
|
2405
2441
|
}
|
|
2406
2442
|
];
|
|
2407
|
-
var FontStyleField = () => /* @__PURE__ */
|
|
2443
|
+
var FontStyleField = () => /* @__PURE__ */ React53.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React53.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(import_editor_controls33.ControlFormLabel, null, (0, import_i18n32.__)("Font style", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui40.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React53.createElement(import_editor_controls33.ToggleControl, { options: options8 }))));
|
|
2408
2444
|
|
|
2409
2445
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
2410
|
-
var
|
|
2446
|
+
var React54 = __toESM(require("react"));
|
|
2411
2447
|
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
2412
|
-
var
|
|
2448
|
+
var import_ui41 = require("@elementor/ui");
|
|
2413
2449
|
var import_i18n33 = require("@wordpress/i18n");
|
|
2414
2450
|
var fontWeightOptions = [
|
|
2415
2451
|
{ value: "100", label: (0, import_i18n33.__)("100 - Thin", "elementor") },
|
|
@@ -2423,135 +2459,135 @@ var fontWeightOptions = [
|
|
|
2423
2459
|
{ value: "900", label: (0, import_i18n33.__)("900 - Black", "elementor") }
|
|
2424
2460
|
];
|
|
2425
2461
|
var FontWeightField = () => {
|
|
2426
|
-
return /* @__PURE__ */
|
|
2462
|
+
return /* @__PURE__ */ React54.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React54.createElement(import_ui41.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(ControlLabel, null, (0, import_i18n33.__)("Font weight", "elementor"))), /* @__PURE__ */ React54.createElement(import_ui41.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React54.createElement(import_editor_controls34.SelectControl, { options: fontWeightOptions }))));
|
|
2427
2463
|
};
|
|
2428
2464
|
|
|
2429
2465
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
2430
|
-
var
|
|
2466
|
+
var React55 = __toESM(require("react"));
|
|
2431
2467
|
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
2432
|
-
var
|
|
2468
|
+
var import_ui42 = require("@elementor/ui");
|
|
2433
2469
|
var import_i18n34 = require("@wordpress/i18n");
|
|
2434
2470
|
var LetterSpacingField = () => {
|
|
2435
|
-
return /* @__PURE__ */
|
|
2471
|
+
return /* @__PURE__ */ React55.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React55.createElement(import_ui42.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(ControlLabel, null, (0, import_i18n34.__)("Letter spacing", "elementor"))), /* @__PURE__ */ React55.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(import_editor_controls35.SizeControl, null))));
|
|
2436
2472
|
};
|
|
2437
2473
|
|
|
2438
2474
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
2439
|
-
var
|
|
2475
|
+
var React56 = __toESM(require("react"));
|
|
2440
2476
|
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
2441
|
-
var
|
|
2477
|
+
var import_ui43 = require("@elementor/ui");
|
|
2442
2478
|
var import_i18n35 = require("@wordpress/i18n");
|
|
2443
2479
|
var LineHeightField = () => {
|
|
2444
|
-
return /* @__PURE__ */
|
|
2480
|
+
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React56.createElement(import_ui43.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(ControlLabel, null, (0, import_i18n35.__)("Line height", "elementor"))), /* @__PURE__ */ React56.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(import_editor_controls36.SizeControl, null))));
|
|
2445
2481
|
};
|
|
2446
2482
|
|
|
2447
2483
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
2448
|
-
var
|
|
2484
|
+
var React57 = __toESM(require("react"));
|
|
2449
2485
|
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
2450
2486
|
var import_icons19 = require("@elementor/icons");
|
|
2451
|
-
var
|
|
2487
|
+
var import_ui44 = require("@elementor/ui");
|
|
2452
2488
|
var import_i18n36 = require("@wordpress/i18n");
|
|
2453
|
-
var StartIcon5 = (0,
|
|
2454
|
-
var EndIcon5 = (0,
|
|
2489
|
+
var StartIcon5 = (0, import_ui44.withDirection)(import_icons19.AlignLeftIcon);
|
|
2490
|
+
var EndIcon5 = (0, import_ui44.withDirection)(import_icons19.AlignRightIcon);
|
|
2455
2491
|
var options9 = [
|
|
2456
2492
|
{
|
|
2457
2493
|
value: "start",
|
|
2458
2494
|
label: (0, import_i18n36.__)("Start", "elementor"),
|
|
2459
|
-
renderContent: () => /* @__PURE__ */
|
|
2495
|
+
renderContent: () => /* @__PURE__ */ React57.createElement(RotatedIcon, { icon: StartIcon5, size: "tiny" }),
|
|
2460
2496
|
showTooltip: true
|
|
2461
2497
|
},
|
|
2462
2498
|
{
|
|
2463
2499
|
value: "center",
|
|
2464
2500
|
label: (0, import_i18n36.__)("Center", "elementor"),
|
|
2465
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2501
|
+
renderContent: ({ size }) => /* @__PURE__ */ React57.createElement(import_icons19.AlignCenterIcon, { fontSize: size }),
|
|
2466
2502
|
showTooltip: true
|
|
2467
2503
|
},
|
|
2468
2504
|
{
|
|
2469
2505
|
value: "end",
|
|
2470
2506
|
label: (0, import_i18n36.__)("End", "elementor"),
|
|
2471
|
-
renderContent: () => /* @__PURE__ */
|
|
2507
|
+
renderContent: () => /* @__PURE__ */ React57.createElement(RotatedIcon, { icon: EndIcon5, size: "tiny" }),
|
|
2472
2508
|
showTooltip: true
|
|
2473
2509
|
},
|
|
2474
2510
|
{
|
|
2475
2511
|
value: "justify",
|
|
2476
2512
|
label: (0, import_i18n36.__)("Justify", "elementor"),
|
|
2477
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2513
|
+
renderContent: ({ size }) => /* @__PURE__ */ React57.createElement(import_icons19.AlignJustifiedIcon, { fontSize: size }),
|
|
2478
2514
|
showTooltip: true
|
|
2479
2515
|
}
|
|
2480
2516
|
];
|
|
2481
2517
|
var TextAlignmentField = () => {
|
|
2482
|
-
return /* @__PURE__ */
|
|
2518
|
+
return /* @__PURE__ */ React57.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React57.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, (0, import_i18n36.__)("Alignment", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui44.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React57.createElement(import_editor_controls37.ToggleControl, { options: options9 }))));
|
|
2483
2519
|
};
|
|
2484
2520
|
|
|
2485
2521
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
2486
|
-
var
|
|
2522
|
+
var React58 = __toESM(require("react"));
|
|
2487
2523
|
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
2488
|
-
var
|
|
2524
|
+
var import_ui45 = require("@elementor/ui");
|
|
2489
2525
|
var import_i18n37 = require("@wordpress/i18n");
|
|
2490
2526
|
var TextColorField = () => {
|
|
2491
|
-
return /* @__PURE__ */
|
|
2527
|
+
return /* @__PURE__ */ React58.createElement(StylesField, { bind: "color" }, /* @__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(ControlLabel, null, (0, import_i18n37.__)("Text color", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(import_editor_controls38.ColorControl, null))));
|
|
2492
2528
|
};
|
|
2493
2529
|
|
|
2494
2530
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
2495
|
-
var
|
|
2531
|
+
var React59 = __toESM(require("react"));
|
|
2496
2532
|
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
2497
2533
|
var import_icons20 = require("@elementor/icons");
|
|
2498
|
-
var
|
|
2534
|
+
var import_ui46 = require("@elementor/ui");
|
|
2499
2535
|
var import_i18n38 = require("@wordpress/i18n");
|
|
2500
2536
|
var options10 = [
|
|
2501
2537
|
{
|
|
2502
2538
|
value: "none",
|
|
2503
2539
|
label: (0, import_i18n38.__)("None", "elementor"),
|
|
2504
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2540
|
+
renderContent: ({ size }) => /* @__PURE__ */ React59.createElement(import_icons20.MinusIcon, { fontSize: size }),
|
|
2505
2541
|
showTooltip: true,
|
|
2506
2542
|
exclusive: true
|
|
2507
2543
|
},
|
|
2508
2544
|
{
|
|
2509
2545
|
value: "underline",
|
|
2510
2546
|
label: (0, import_i18n38.__)("Underline", "elementor"),
|
|
2511
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2547
|
+
renderContent: ({ size }) => /* @__PURE__ */ React59.createElement(import_icons20.UnderlineIcon, { fontSize: size }),
|
|
2512
2548
|
showTooltip: true
|
|
2513
2549
|
},
|
|
2514
2550
|
{
|
|
2515
2551
|
value: "line-through",
|
|
2516
2552
|
label: (0, import_i18n38.__)("Line-through", "elementor"),
|
|
2517
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2553
|
+
renderContent: ({ size }) => /* @__PURE__ */ React59.createElement(import_icons20.StrikethroughIcon, { fontSize: size }),
|
|
2518
2554
|
showTooltip: true
|
|
2519
2555
|
},
|
|
2520
2556
|
{
|
|
2521
2557
|
value: "overline",
|
|
2522
2558
|
label: (0, import_i18n38.__)("Overline", "elementor"),
|
|
2523
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2559
|
+
renderContent: ({ size }) => /* @__PURE__ */ React59.createElement(import_icons20.OverlineIcon, { fontSize: size }),
|
|
2524
2560
|
showTooltip: true
|
|
2525
2561
|
}
|
|
2526
2562
|
];
|
|
2527
|
-
var TextDecorationField = () => /* @__PURE__ */
|
|
2563
|
+
var TextDecorationField = () => /* @__PURE__ */ React59.createElement(StylesField, { bind: "text-decoration" }, /* @__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(ControlLabel, null, (0, import_i18n38.__)("Line decoration", "elementor"))), /* @__PURE__ */ React59.createElement(import_ui46.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React59.createElement(import_editor_controls39.ToggleControl, { options: options10, exclusive: false }))));
|
|
2528
2564
|
|
|
2529
2565
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
2530
|
-
var
|
|
2566
|
+
var React60 = __toESM(require("react"));
|
|
2531
2567
|
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
2532
2568
|
var import_icons21 = require("@elementor/icons");
|
|
2533
|
-
var
|
|
2569
|
+
var import_ui47 = require("@elementor/ui");
|
|
2534
2570
|
var import_i18n39 = require("@wordpress/i18n");
|
|
2535
2571
|
var options11 = [
|
|
2536
2572
|
{
|
|
2537
2573
|
value: "ltr",
|
|
2538
2574
|
label: (0, import_i18n39.__)("Left to right", "elementor"),
|
|
2539
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2575
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(import_icons21.TextDirectionLtrIcon, { fontSize: size }),
|
|
2540
2576
|
showTooltip: true
|
|
2541
2577
|
},
|
|
2542
2578
|
{
|
|
2543
2579
|
value: "rtl",
|
|
2544
2580
|
label: (0, import_i18n39.__)("Right to left", "elementor"),
|
|
2545
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2581
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(import_icons21.TextDirectionRtlIcon, { fontSize: size }),
|
|
2546
2582
|
showTooltip: true
|
|
2547
2583
|
}
|
|
2548
2584
|
];
|
|
2549
2585
|
var TextDirectionField = () => {
|
|
2550
|
-
return /* @__PURE__ */
|
|
2586
|
+
return /* @__PURE__ */ React60.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React60.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, (0, import_i18n39.__)("Direction", "elementor"))), /* @__PURE__ */ React60.createElement(import_ui47.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React60.createElement(import_editor_controls40.ToggleControl, { options: options11 }))));
|
|
2551
2587
|
};
|
|
2552
2588
|
|
|
2553
2589
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
2554
|
-
var
|
|
2590
|
+
var React61 = __toESM(require("react"));
|
|
2555
2591
|
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
2556
2592
|
var import_i18n40 = require("@wordpress/i18n");
|
|
2557
2593
|
var initTextStroke = {
|
|
@@ -2579,7 +2615,7 @@ var TextStrokeField = () => {
|
|
|
2579
2615
|
setTextStroke(null);
|
|
2580
2616
|
};
|
|
2581
2617
|
const hasTextStroke = Boolean(textStroke);
|
|
2582
|
-
return /* @__PURE__ */
|
|
2618
|
+
return /* @__PURE__ */ React61.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React61.createElement(
|
|
2583
2619
|
AddOrRemoveContent,
|
|
2584
2620
|
{
|
|
2585
2621
|
label: (0, import_i18n40.__)("Text stroke", "elementor"),
|
|
@@ -2587,56 +2623,56 @@ var TextStrokeField = () => {
|
|
|
2587
2623
|
onAdd: addTextStroke,
|
|
2588
2624
|
onRemove: removeTextStroke
|
|
2589
2625
|
},
|
|
2590
|
-
/* @__PURE__ */
|
|
2591
|
-
);
|
|
2626
|
+
/* @__PURE__ */ React61.createElement(import_editor_controls41.StrokeControl, null)
|
|
2627
|
+
));
|
|
2592
2628
|
};
|
|
2593
2629
|
|
|
2594
2630
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
2595
|
-
var
|
|
2631
|
+
var React62 = __toESM(require("react"));
|
|
2596
2632
|
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
2597
2633
|
var import_icons22 = require("@elementor/icons");
|
|
2598
|
-
var
|
|
2634
|
+
var import_ui48 = require("@elementor/ui");
|
|
2599
2635
|
var import_i18n41 = require("@wordpress/i18n");
|
|
2600
2636
|
var options12 = [
|
|
2601
2637
|
{
|
|
2602
2638
|
value: "none",
|
|
2603
2639
|
label: (0, import_i18n41.__)("None", "elementor"),
|
|
2604
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2640
|
+
renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(import_icons22.MinusIcon, { fontSize: size }),
|
|
2605
2641
|
showTooltip: true
|
|
2606
2642
|
},
|
|
2607
2643
|
{
|
|
2608
2644
|
value: "capitalize",
|
|
2609
2645
|
label: (0, import_i18n41.__)("Capitalize", "elementor"),
|
|
2610
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2646
|
+
renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(import_icons22.LetterCaseIcon, { fontSize: size }),
|
|
2611
2647
|
showTooltip: true
|
|
2612
2648
|
},
|
|
2613
2649
|
{
|
|
2614
2650
|
value: "uppercase",
|
|
2615
2651
|
label: (0, import_i18n41.__)("Uppercase", "elementor"),
|
|
2616
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2652
|
+
renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(import_icons22.LetterCaseUpperIcon, { fontSize: size }),
|
|
2617
2653
|
showTooltip: true
|
|
2618
2654
|
},
|
|
2619
2655
|
{
|
|
2620
2656
|
value: "lowercase",
|
|
2621
2657
|
label: (0, import_i18n41.__)("Lowercase", "elementor"),
|
|
2622
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2658
|
+
renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(import_icons22.LetterCaseLowerIcon, { fontSize: size }),
|
|
2623
2659
|
showTooltip: true
|
|
2624
2660
|
}
|
|
2625
2661
|
];
|
|
2626
|
-
var TransformField = () => /* @__PURE__ */
|
|
2662
|
+
var TransformField = () => /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React62.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, (0, import_i18n41.__)("Text transform", "elementor"))), /* @__PURE__ */ React62.createElement(import_ui48.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React62.createElement(import_editor_controls42.ToggleControl, { options: options12 }))));
|
|
2627
2663
|
|
|
2628
2664
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
2629
|
-
var
|
|
2665
|
+
var React63 = __toESM(require("react"));
|
|
2630
2666
|
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
2631
|
-
var
|
|
2667
|
+
var import_ui49 = require("@elementor/ui");
|
|
2632
2668
|
var import_i18n42 = require("@wordpress/i18n");
|
|
2633
2669
|
var WordSpacingField = () => {
|
|
2634
|
-
return /* @__PURE__ */
|
|
2670
|
+
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React63.createElement(import_ui49.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React63.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlLabel, null, (0, import_i18n42.__)("Word spacing", "elementor"))), /* @__PURE__ */ React63.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(import_editor_controls43.SizeControl, null))));
|
|
2635
2671
|
};
|
|
2636
2672
|
|
|
2637
2673
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
2638
2674
|
var TypographySection = () => {
|
|
2639
|
-
return /* @__PURE__ */
|
|
2675
|
+
return /* @__PURE__ */ React64.createElement(SectionContent, null, /* @__PURE__ */ React64.createElement(FontFamilyField, null), /* @__PURE__ */ React64.createElement(FontWeightField, null), /* @__PURE__ */ React64.createElement(FontSizeField, null), /* @__PURE__ */ React64.createElement(PanelDivider, null), /* @__PURE__ */ React64.createElement(TextAlignmentField, null), /* @__PURE__ */ React64.createElement(TextColorField, null), /* @__PURE__ */ React64.createElement(CollapsibleContent, null, /* @__PURE__ */ React64.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React64.createElement(LineHeightField, null), /* @__PURE__ */ React64.createElement(LetterSpacingField, null), /* @__PURE__ */ React64.createElement(WordSpacingField, null), /* @__PURE__ */ React64.createElement(PanelDivider, null), /* @__PURE__ */ React64.createElement(TextDecorationField, null), /* @__PURE__ */ React64.createElement(TransformField, null), /* @__PURE__ */ React64.createElement(TextDirectionField, null), /* @__PURE__ */ React64.createElement(FontStyleField, null), /* @__PURE__ */ React64.createElement(TextStrokeField, null))));
|
|
2640
2676
|
};
|
|
2641
2677
|
|
|
2642
2678
|
// src/components/style-tab.tsx
|
|
@@ -2645,7 +2681,7 @@ var StyleTab = () => {
|
|
|
2645
2681
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
2646
2682
|
const [activeStyleState, setActiveStyleState] = (0, import_react16.useState)(null);
|
|
2647
2683
|
const breakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
|
|
2648
|
-
return /* @__PURE__ */
|
|
2684
|
+
return /* @__PURE__ */ React65.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React65.createElement(
|
|
2649
2685
|
StyleProvider,
|
|
2650
2686
|
{
|
|
2651
2687
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -2656,7 +2692,7 @@ var StyleTab = () => {
|
|
|
2656
2692
|
},
|
|
2657
2693
|
setMetaState: setActiveStyleState
|
|
2658
2694
|
},
|
|
2659
|
-
/* @__PURE__ */
|
|
2695
|
+
/* @__PURE__ */ React65.createElement(import_session3.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React65.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React65.createElement(CssClassSelector, null), /* @__PURE__ */ React65.createElement(import_ui50.Divider, null), /* @__PURE__ */ React65.createElement(SectionsList, null, /* @__PURE__ */ React65.createElement(Section, { title: (0, import_i18n43.__)("Layout", "elementor") }, /* @__PURE__ */ React65.createElement(LayoutSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: (0, import_i18n43.__)("Spacing", "elementor") }, /* @__PURE__ */ React65.createElement(SpacingSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: (0, import_i18n43.__)("Size", "elementor") }, /* @__PURE__ */ React65.createElement(SizeSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: (0, import_i18n43.__)("Position", "elementor") }, /* @__PURE__ */ React65.createElement(PositionSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: (0, import_i18n43.__)("Typography", "elementor") }, /* @__PURE__ */ React65.createElement(TypographySection, null)), /* @__PURE__ */ React65.createElement(Section, { title: (0, import_i18n43.__)("Background", "elementor") }, /* @__PURE__ */ React65.createElement(BackgroundSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: (0, import_i18n43.__)("Border", "elementor") }, /* @__PURE__ */ React65.createElement(BorderSection, null)), /* @__PURE__ */ React65.createElement(Section, { title: (0, import_i18n43.__)("Effects", "elementor") }, /* @__PURE__ */ React65.createElement(EffectsSection, null)))))
|
|
2660
2696
|
));
|
|
2661
2697
|
};
|
|
2662
2698
|
function useActiveStyleDefId(currentClassesProp) {
|
|
@@ -2684,11 +2720,23 @@ function useCurrentClassesProp() {
|
|
|
2684
2720
|
// src/components/editing-panel-tabs.tsx
|
|
2685
2721
|
var EditingPanelTabs = () => {
|
|
2686
2722
|
const { element } = useElement();
|
|
2687
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
2723
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui51.useTabs)("settings");
|
|
2688
2724
|
return (
|
|
2689
2725
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
2690
2726
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
2691
|
-
/* @__PURE__ */
|
|
2727
|
+
/* @__PURE__ */ React66.createElement(import_react17.Fragment, { key: element.id }, /* @__PURE__ */ React66.createElement(import_ui51.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React66.createElement(
|
|
2728
|
+
import_ui51.Tabs,
|
|
2729
|
+
{
|
|
2730
|
+
variant: "fullWidth",
|
|
2731
|
+
indicatorColor: "secondary",
|
|
2732
|
+
textColor: "inherit",
|
|
2733
|
+
size: "small",
|
|
2734
|
+
sx: { mt: 0.5 },
|
|
2735
|
+
...getTabsProps()
|
|
2736
|
+
},
|
|
2737
|
+
/* @__PURE__ */ React66.createElement(import_ui51.Tab, { label: (0, import_i18n44.__)("General", "elementor"), ...getTabProps("settings") }),
|
|
2738
|
+
/* @__PURE__ */ React66.createElement(import_ui51.Tab, { label: (0, import_i18n44.__)("Style", "elementor"), ...getTabProps("style") })
|
|
2739
|
+
), /* @__PURE__ */ React66.createElement(import_ui51.Divider, null), /* @__PURE__ */ React66.createElement(import_ui51.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React66.createElement(SettingsTab, null)), /* @__PURE__ */ React66.createElement(import_ui51.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React66.createElement(StyleTab, null))))
|
|
2692
2740
|
);
|
|
2693
2741
|
};
|
|
2694
2742
|
|
|
@@ -2702,7 +2750,7 @@ var EditingPanel = () => {
|
|
|
2702
2750
|
return null;
|
|
2703
2751
|
}
|
|
2704
2752
|
const panelTitle = (0, import_i18n45.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
2705
|
-
return /* @__PURE__ */
|
|
2753
|
+
return /* @__PURE__ */ React67.createElement(import_ui52.ErrorBoundary, { fallback: /* @__PURE__ */ React67.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React67.createElement(import_session4.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React67.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React67.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React67.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React67.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React67.createElement(import_icons23.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React67.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React67.createElement(import_editor_controls44.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React67.createElement(import_editor_controls44.ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React67.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React67.createElement(EditingPanelTabs, null)))))))));
|
|
2706
2754
|
};
|
|
2707
2755
|
|
|
2708
2756
|
// src/panel.ts
|
|
@@ -2751,17 +2799,17 @@ var EditingPanelHooks = () => {
|
|
|
2751
2799
|
};
|
|
2752
2800
|
|
|
2753
2801
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
2754
|
-
var
|
|
2802
|
+
var React71 = __toESM(require("react"));
|
|
2755
2803
|
var import_react22 = require("react");
|
|
2756
2804
|
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
2757
2805
|
var import_icons25 = require("@elementor/icons");
|
|
2758
|
-
var
|
|
2806
|
+
var import_ui55 = require("@elementor/ui");
|
|
2759
2807
|
var import_i18n47 = require("@wordpress/i18n");
|
|
2760
2808
|
|
|
2761
2809
|
// src/components/popover-content.tsx
|
|
2762
|
-
var
|
|
2763
|
-
var
|
|
2764
|
-
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */
|
|
2810
|
+
var React68 = __toESM(require("react"));
|
|
2811
|
+
var import_ui53 = require("@elementor/ui");
|
|
2812
|
+
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React68.createElement(import_ui53.Stack, { alignItems, gap, p }, children);
|
|
2765
2813
|
|
|
2766
2814
|
// src/hooks/use-persist-dynamic-value.ts
|
|
2767
2815
|
var import_session5 = require("@elementor/session");
|
|
@@ -2772,7 +2820,7 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
2772
2820
|
};
|
|
2773
2821
|
|
|
2774
2822
|
// src/dynamics/dynamic-control.tsx
|
|
2775
|
-
var
|
|
2823
|
+
var React69 = __toESM(require("react"));
|
|
2776
2824
|
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
2777
2825
|
|
|
2778
2826
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
@@ -2871,15 +2919,15 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
2871
2919
|
});
|
|
2872
2920
|
};
|
|
2873
2921
|
const propType = createTopLevelOjectType({ schema: dynamicTag.props_schema });
|
|
2874
|
-
return /* @__PURE__ */
|
|
2922
|
+
return /* @__PURE__ */ React69.createElement(import_editor_controls46.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React69.createElement(import_editor_controls46.PropKeyProvider, { bind }, children));
|
|
2875
2923
|
};
|
|
2876
2924
|
|
|
2877
2925
|
// src/dynamics/components/dynamic-selection.tsx
|
|
2878
|
-
var
|
|
2926
|
+
var React70 = __toESM(require("react"));
|
|
2879
2927
|
var import_react21 = require("react");
|
|
2880
2928
|
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
2881
2929
|
var import_icons24 = require("@elementor/icons");
|
|
2882
|
-
var
|
|
2930
|
+
var import_ui54 = require("@elementor/ui");
|
|
2883
2931
|
var import_i18n46 = require("@wordpress/i18n");
|
|
2884
2932
|
var SIZE3 = "tiny";
|
|
2885
2933
|
var DynamicSelection = ({ onSelect }) => {
|
|
@@ -2894,15 +2942,15 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2894
2942
|
const handleSearch = (event) => {
|
|
2895
2943
|
setSearchValue(event.target.value);
|
|
2896
2944
|
};
|
|
2897
|
-
const handleSetDynamicTag = (value) => {
|
|
2945
|
+
const handleSetDynamicTag = (value, label) => {
|
|
2898
2946
|
if (!isCurrentValueDynamic) {
|
|
2899
2947
|
updatePropValueHistory(anyValue);
|
|
2900
2948
|
}
|
|
2901
|
-
setValue({ name: value, settings: {} });
|
|
2949
|
+
setValue({ name: value, settings: { label } });
|
|
2902
2950
|
onSelect?.();
|
|
2903
2951
|
};
|
|
2904
|
-
return /* @__PURE__ */
|
|
2905
|
-
|
|
2952
|
+
return /* @__PURE__ */ React70.createElement(import_ui54.Stack, null, hasNoDynamicTags ? /* @__PURE__ */ React70.createElement(NoDynamicTags, null) : /* @__PURE__ */ React70.createElement(import_react21.Fragment, null, /* @__PURE__ */ React70.createElement(import_ui54.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React70.createElement(
|
|
2953
|
+
import_ui54.TextField,
|
|
2906
2954
|
{
|
|
2907
2955
|
fullWidth: true,
|
|
2908
2956
|
size: SIZE3,
|
|
@@ -2910,32 +2958,32 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2910
2958
|
onChange: handleSearch,
|
|
2911
2959
|
placeholder: (0, import_i18n46.__)("Search dynamic tags\u2026", "elementor"),
|
|
2912
2960
|
InputProps: {
|
|
2913
|
-
startAdornment: /* @__PURE__ */
|
|
2961
|
+
startAdornment: /* @__PURE__ */ React70.createElement(import_ui54.InputAdornment, { position: "start" }, /* @__PURE__ */ React70.createElement(import_icons24.SearchIcon, { fontSize: SIZE3 }))
|
|
2914
2962
|
}
|
|
2915
2963
|
}
|
|
2916
|
-
)), /* @__PURE__ */
|
|
2917
|
-
|
|
2964
|
+
)), /* @__PURE__ */ React70.createElement(import_ui54.Divider, null), /* @__PURE__ */ React70.createElement(import_ui54.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options13.length > 0 ? /* @__PURE__ */ React70.createElement(import_ui54.MenuList, { role: "listbox", tabIndex: 0 }, options13.map(([category, items3], index) => /* @__PURE__ */ React70.createElement(import_react21.Fragment, { key: index }, /* @__PURE__ */ React70.createElement(
|
|
2965
|
+
import_ui54.MenuSubheader,
|
|
2918
2966
|
{
|
|
2919
2967
|
sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
|
|
2920
2968
|
},
|
|
2921
2969
|
dynamicGroups?.[category]?.title || category
|
|
2922
2970
|
), items3.map(({ value, label: tagLabel }) => {
|
|
2923
2971
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
2924
|
-
return /* @__PURE__ */
|
|
2925
|
-
|
|
2972
|
+
return /* @__PURE__ */ React70.createElement(
|
|
2973
|
+
import_ui54.MenuItem,
|
|
2926
2974
|
{
|
|
2927
2975
|
key: value,
|
|
2928
2976
|
selected: isSelected,
|
|
2929
2977
|
autoFocus: isSelected,
|
|
2930
|
-
sx: { px:
|
|
2931
|
-
onClick: () => handleSetDynamicTag(value)
|
|
2978
|
+
sx: { px: 3.5, typography: "caption" },
|
|
2979
|
+
onClick: () => handleSetDynamicTag(value, tagLabel)
|
|
2932
2980
|
},
|
|
2933
2981
|
tagLabel
|
|
2934
2982
|
);
|
|
2935
|
-
})))) : /* @__PURE__ */
|
|
2983
|
+
})))) : /* @__PURE__ */ React70.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") }))));
|
|
2936
2984
|
};
|
|
2937
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
2938
|
-
|
|
2985
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React70.createElement(
|
|
2986
|
+
import_ui54.Stack,
|
|
2939
2987
|
{
|
|
2940
2988
|
gap: 1,
|
|
2941
2989
|
alignItems: "center",
|
|
@@ -2945,12 +2993,12 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React69.createElem
|
|
|
2945
2993
|
color: "text.secondary",
|
|
2946
2994
|
sx: { pb: 3.5 }
|
|
2947
2995
|
},
|
|
2948
|
-
/* @__PURE__ */
|
|
2949
|
-
/* @__PURE__ */
|
|
2950
|
-
/* @__PURE__ */
|
|
2996
|
+
/* @__PURE__ */ React70.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
|
|
2997
|
+
/* @__PURE__ */ React70.createElement(import_ui54.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n46.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React70.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
2998
|
+
/* @__PURE__ */ React70.createElement(import_ui54.Typography, { align: "center", variant: "caption" }, (0, import_i18n46.__)("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React70.createElement(import_ui54.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n46.__)("Clear & try again", "elementor")))
|
|
2951
2999
|
);
|
|
2952
|
-
var NoDynamicTags = () => /* @__PURE__ */
|
|
2953
|
-
|
|
3000
|
+
var NoDynamicTags = () => /* @__PURE__ */ React70.createElement(import_ui54.Box, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React70.createElement(import_ui54.Divider, null), /* @__PURE__ */ React70.createElement(
|
|
3001
|
+
import_ui54.Stack,
|
|
2954
3002
|
{
|
|
2955
3003
|
gap: 1,
|
|
2956
3004
|
alignItems: "center",
|
|
@@ -2960,9 +3008,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React69.createElement(import_ui53.Box,
|
|
|
2960
3008
|
color: "text.secondary",
|
|
2961
3009
|
sx: { pb: 3.5 }
|
|
2962
3010
|
},
|
|
2963
|
-
/* @__PURE__ */
|
|
2964
|
-
/* @__PURE__ */
|
|
2965
|
-
/* @__PURE__ */
|
|
3011
|
+
/* @__PURE__ */ React70.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
|
|
3012
|
+
/* @__PURE__ */ React70.createElement(import_ui54.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n46.__)("Streamline your workflow with dynamic tags", "elementor")),
|
|
3013
|
+
/* @__PURE__ */ React70.createElement(import_ui54.Typography, { align: "center", variant: "caption" }, (0, import_i18n46.__)("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
|
|
2966
3014
|
));
|
|
2967
3015
|
var useFilteredOptions = (searchValue) => {
|
|
2968
3016
|
const dynamicTags = usePropDynamicTags();
|
|
@@ -2988,7 +3036,7 @@ var DynamicSelectionControl = () => {
|
|
|
2988
3036
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
2989
3037
|
const { name: tagName = "" } = value;
|
|
2990
3038
|
const selectionPopoverId = (0, import_react22.useId)();
|
|
2991
|
-
const selectionPopoverState = (0,
|
|
3039
|
+
const selectionPopoverState = (0, import_ui55.usePopupState)({ variant: "popover", popupId: selectionPopoverId });
|
|
2992
3040
|
const dynamicTag = useDynamicTag(tagName);
|
|
2993
3041
|
const removeDynamicTag = () => {
|
|
2994
3042
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -2996,70 +3044,70 @@ var DynamicSelectionControl = () => {
|
|
|
2996
3044
|
if (!dynamicTag) {
|
|
2997
3045
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
2998
3046
|
}
|
|
2999
|
-
return /* @__PURE__ */
|
|
3000
|
-
|
|
3047
|
+
return /* @__PURE__ */ React71.createElement(import_ui55.Box, null, /* @__PURE__ */ React71.createElement(
|
|
3048
|
+
import_ui55.UnstableTag,
|
|
3001
3049
|
{
|
|
3002
3050
|
fullWidth: true,
|
|
3003
3051
|
showActionsOnHover: true,
|
|
3004
3052
|
label: dynamicTag.label,
|
|
3005
|
-
startIcon: /* @__PURE__ */
|
|
3006
|
-
...(0,
|
|
3007
|
-
actions: /* @__PURE__ */
|
|
3008
|
-
|
|
3053
|
+
startIcon: /* @__PURE__ */ React71.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4 }),
|
|
3054
|
+
...(0, import_ui55.bindTrigger)(selectionPopoverState),
|
|
3055
|
+
actions: /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React71.createElement(
|
|
3056
|
+
import_ui55.IconButton,
|
|
3009
3057
|
{
|
|
3010
3058
|
size: SIZE4,
|
|
3011
3059
|
onClick: removeDynamicTag,
|
|
3012
3060
|
"aria-label": (0, import_i18n47.__)("Remove dynamic value", "elementor")
|
|
3013
3061
|
},
|
|
3014
|
-
/* @__PURE__ */
|
|
3062
|
+
/* @__PURE__ */ React71.createElement(import_icons25.XIcon, { fontSize: SIZE4 })
|
|
3015
3063
|
))
|
|
3016
3064
|
}
|
|
3017
|
-
), /* @__PURE__ */
|
|
3018
|
-
|
|
3065
|
+
), /* @__PURE__ */ React71.createElement(
|
|
3066
|
+
import_ui55.Popover,
|
|
3019
3067
|
{
|
|
3020
3068
|
disablePortal: true,
|
|
3021
3069
|
disableScrollLock: true,
|
|
3022
3070
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
3023
|
-
...(0,
|
|
3071
|
+
...(0, import_ui55.bindPopover)(selectionPopoverState)
|
|
3024
3072
|
},
|
|
3025
|
-
/* @__PURE__ */
|
|
3073
|
+
/* @__PURE__ */ React71.createElement(import_ui55.Stack, null, /* @__PURE__ */ React71.createElement(import_ui55.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React71.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(import_ui55.Typography, { variant: "subtitle2" }, (0, import_i18n47.__)("Dynamic tags", "elementor")), /* @__PURE__ */ React71.createElement(import_ui55.IconButton, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React71.createElement(import_icons25.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
3026
3074
|
));
|
|
3027
3075
|
};
|
|
3028
3076
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
3029
3077
|
const popupId = (0, import_react22.useId)();
|
|
3030
|
-
const settingsPopupState = (0,
|
|
3078
|
+
const settingsPopupState = (0, import_ui55.usePopupState)({ variant: "popover", popupId });
|
|
3031
3079
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
3032
3080
|
if (!hasDynamicSettings) {
|
|
3033
3081
|
return null;
|
|
3034
3082
|
}
|
|
3035
|
-
return /* @__PURE__ */
|
|
3036
|
-
|
|
3083
|
+
return /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(
|
|
3084
|
+
import_ui55.IconButton,
|
|
3037
3085
|
{
|
|
3038
3086
|
size: SIZE4,
|
|
3039
|
-
...(0,
|
|
3087
|
+
...(0, import_ui55.bindTrigger)(settingsPopupState),
|
|
3040
3088
|
"aria-label": (0, import_i18n47.__)("Settings", "elementor")
|
|
3041
3089
|
},
|
|
3042
|
-
/* @__PURE__ */
|
|
3043
|
-
), /* @__PURE__ */
|
|
3044
|
-
|
|
3090
|
+
/* @__PURE__ */ React71.createElement(import_icons25.SettingsIcon, { fontSize: SIZE4 })
|
|
3091
|
+
), /* @__PURE__ */ React71.createElement(
|
|
3092
|
+
import_ui55.Popover,
|
|
3045
3093
|
{
|
|
3046
3094
|
disableScrollLock: true,
|
|
3047
3095
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
3048
|
-
...(0,
|
|
3096
|
+
...(0, import_ui55.bindPopover)(settingsPopupState)
|
|
3049
3097
|
},
|
|
3050
|
-
/* @__PURE__ */
|
|
3098
|
+
/* @__PURE__ */ React71.createElement(import_ui55.Paper, { component: import_ui55.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React71.createElement(import_ui55.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React71.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(import_ui55.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React71.createElement(import_ui55.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React71.createElement(import_icons25.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
3051
3099
|
));
|
|
3052
3100
|
};
|
|
3053
3101
|
var DynamicSettings = ({ controls }) => {
|
|
3054
3102
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
3055
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
3103
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui55.useTabs)(0);
|
|
3056
3104
|
if (!tabs.length) {
|
|
3057
3105
|
return null;
|
|
3058
3106
|
}
|
|
3059
|
-
return /* @__PURE__ */
|
|
3060
|
-
return /* @__PURE__ */
|
|
3107
|
+
return /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(import_ui55.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React71.createElement(import_ui55.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React71.createElement(import_ui55.Divider, null), tabs.map(({ value }, index) => {
|
|
3108
|
+
return /* @__PURE__ */ React71.createElement(import_ui55.TabPanel, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React71.createElement(PopoverContent, { p: 2, gap: 2 }, value.items.map((item) => {
|
|
3061
3109
|
if (item.type === "control") {
|
|
3062
|
-
return /* @__PURE__ */
|
|
3110
|
+
return /* @__PURE__ */ React71.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
3063
3111
|
}
|
|
3064
3112
|
return null;
|
|
3065
3113
|
})));
|
|
@@ -3069,11 +3117,11 @@ var Control3 = ({ control }) => {
|
|
|
3069
3117
|
if (!getControlByType(control.type)) {
|
|
3070
3118
|
return null;
|
|
3071
3119
|
}
|
|
3072
|
-
return /* @__PURE__ */
|
|
3120
|
+
return /* @__PURE__ */ React71.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React71.createElement(import_ui55.Grid, { container: true, gap: 0.75 }, control.label ? /* @__PURE__ */ React71.createElement(import_ui55.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(import_editor_controls48.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React71.createElement(import_ui55.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React71.createElement(Control, { type: control.type, props: control.props }))));
|
|
3073
3121
|
};
|
|
3074
3122
|
|
|
3075
3123
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
3076
|
-
var
|
|
3124
|
+
var React72 = __toESM(require("react"));
|
|
3077
3125
|
var import_editor_controls49 = require("@elementor/editor-controls");
|
|
3078
3126
|
var import_icons26 = require("@elementor/icons");
|
|
3079
3127
|
var import_i18n48 = require("@wordpress/i18n");
|
|
@@ -3084,7 +3132,7 @@ var usePropDynamicAction = () => {
|
|
|
3084
3132
|
visible,
|
|
3085
3133
|
icon: import_icons26.DatabaseIcon,
|
|
3086
3134
|
title: (0, import_i18n48.__)("Dynamic tags", "elementor"),
|
|
3087
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
3135
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React72.createElement(DynamicSelection, { onSelect: closePopover })
|
|
3088
3136
|
};
|
|
3089
3137
|
};
|
|
3090
3138
|
|