@elementor/editor-editing-panel 1.11.0 → 1.12.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 +42 -0
- package/dist/index.js +483 -473
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +425 -415
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
- package/src/components/css-classes/css-class-item.tsx +2 -0
- package/src/components/css-classes/css-class-selector.tsx +2 -7
- package/src/components/panel-divider.tsx +4 -0
- package/src/components/style-sections/border-section/border-color-field.tsx +1 -1
- package/src/components/style-sections/border-section/border-radius-field.tsx +33 -15
- package/src/components/style-sections/border-section/border-section.tsx +3 -2
- package/src/components/style-sections/border-section/border-style-field.tsx +2 -2
- package/src/components/style-sections/border-section/border-width-field.tsx +1 -1
- package/src/components/style-sections/layout-section/layout-section.tsx +4 -3
- package/src/components/style-sections/position-section/position-field.tsx +1 -1
- package/src/components/style-sections/size-section/size-section.tsx +7 -6
- package/src/components/style-sections/spacing-section/spacing-section.tsx +3 -2
- package/src/components/style-sections/typography-section/font-family-field.tsx +2 -2
- package/src/components/style-sections/typography-section/font-size-field.tsx +1 -1
- package/src/components/style-sections/typography-section/font-style-field.tsx +36 -0
- package/src/components/style-sections/typography-section/font-weight-field.tsx +2 -2
- package/src/components/style-sections/typography-section/letter-spacing-field.tsx +1 -1
- package/src/components/style-sections/typography-section/line-height-field.tsx +1 -1
- package/src/components/style-sections/typography-section/text-color-field.tsx +1 -1
- package/src/components/style-sections/typography-section/{text-style-field.tsx → text-decoration-field.tsx} +3 -24
- package/src/components/style-sections/typography-section/text-stroke-field.tsx +3 -3
- package/src/components/style-sections/typography-section/transform-field.tsx +1 -1
- package/src/components/style-sections/typography-section/typography-section.tsx +8 -5
- package/src/components/style-sections/typography-section/word-spacing-field.tsx +1 -1
- package/src/controls-registry/settings-field.tsx +1 -7
package/dist/index.js
CHANGED
|
@@ -32,12 +32,12 @@ var index_exports = {};
|
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
injectIntoClassSelectorActions: () => injectIntoClassSelectorActions,
|
|
34
34
|
replaceControl: () => replaceControl,
|
|
35
|
-
useBoundProp: () =>
|
|
35
|
+
useBoundProp: () => import_editor_controls48.useBoundProp,
|
|
36
36
|
usePanelActions: () => usePanelActions,
|
|
37
37
|
usePanelStatus: () => usePanelStatus
|
|
38
38
|
});
|
|
39
39
|
module.exports = __toCommonJS(index_exports);
|
|
40
|
-
var
|
|
40
|
+
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
41
41
|
|
|
42
42
|
// src/control-replacement.tsx
|
|
43
43
|
var import_editor_controls = require("@elementor/editor-controls");
|
|
@@ -136,7 +136,7 @@ var import_ui = require("@elementor/ui");
|
|
|
136
136
|
function MultiCombobox({
|
|
137
137
|
actions = [],
|
|
138
138
|
selected,
|
|
139
|
-
options:
|
|
139
|
+
options: options11,
|
|
140
140
|
onSelect,
|
|
141
141
|
...props
|
|
142
142
|
}) {
|
|
@@ -154,14 +154,14 @@ function MultiCombobox({
|
|
|
154
154
|
handleHomeEndKeys: true,
|
|
155
155
|
disabled: loading,
|
|
156
156
|
value: selected,
|
|
157
|
-
options:
|
|
157
|
+
options: options11,
|
|
158
158
|
renderGroup: (params) => /* @__PURE__ */ React4.createElement(Group, { ...params }),
|
|
159
159
|
renderInput: (params) => /* @__PURE__ */ React4.createElement(import_ui.TextField, { ...params }),
|
|
160
160
|
onChange: (_, selectedOrInputValue, reason) => {
|
|
161
161
|
const inputValue = selectedOrInputValue.find((option) => typeof option === "string");
|
|
162
162
|
const optionsAndActions = selectedOrInputValue.filter((option) => typeof option !== "string");
|
|
163
163
|
if (reason === "createOption") {
|
|
164
|
-
const [firstAction] = filterActions(actions, { options:
|
|
164
|
+
const [firstAction] = filterActions(actions, { options: options11, inputValue: inputValue ?? "" });
|
|
165
165
|
if (firstAction) {
|
|
166
166
|
return run(firstAction.apply, firstAction.value);
|
|
167
167
|
}
|
|
@@ -170,7 +170,7 @@ function MultiCombobox({
|
|
|
170
170
|
if (reason === "selectOption" && action) {
|
|
171
171
|
return run(action.apply, action.value);
|
|
172
172
|
}
|
|
173
|
-
const fixedValues =
|
|
173
|
+
const fixedValues = options11.filter((option) => !!option.fixed);
|
|
174
174
|
onSelect?.([.../* @__PURE__ */ new Set([...optionsAndActions, ...fixedValues])]);
|
|
175
175
|
},
|
|
176
176
|
getOptionLabel: (option) => typeof option === "string" ? option : option.label,
|
|
@@ -227,8 +227,8 @@ function useActionRunner() {
|
|
|
227
227
|
};
|
|
228
228
|
return { run, loading };
|
|
229
229
|
}
|
|
230
|
-
function filterActions(actions, { options:
|
|
231
|
-
return actions.filter((action) => action.condition(
|
|
230
|
+
function filterActions(actions, { options: options11, inputValue }) {
|
|
231
|
+
return actions.filter((action) => action.condition(options11, inputValue)).map((action, index) => ({
|
|
232
232
|
label: action.label(inputValue),
|
|
233
233
|
value: inputValue,
|
|
234
234
|
group: action.group,
|
|
@@ -457,6 +457,7 @@ var validateLabel = (newLabel) => {
|
|
|
457
457
|
if (import_editor_styles_repository3.stylesRepository.isLabelExist(newLabel)) {
|
|
458
458
|
return (0, import_i18n2.__)("Existing name", "elementor");
|
|
459
459
|
}
|
|
460
|
+
return null;
|
|
460
461
|
};
|
|
461
462
|
|
|
462
463
|
// src/components/css-classes/css-class-selector.tsx
|
|
@@ -471,19 +472,19 @@ var EMPTY_OPTION = {
|
|
|
471
472
|
};
|
|
472
473
|
var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = (0, import_locations.createLocation)();
|
|
473
474
|
function CssClassSelector() {
|
|
474
|
-
const
|
|
475
|
+
const options11 = useOptions();
|
|
475
476
|
const { value: appliedIds, setValue: setAppliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
|
|
476
477
|
const { id: activeId, setId: setActiveId } = useStyle();
|
|
477
478
|
const actions = useCreateActions({ pushAppliedId, setActiveId });
|
|
478
479
|
const handleApply = useHandleApply(appliedIds, setAppliedIds);
|
|
479
|
-
const applied = useAppliedOptions(
|
|
480
|
+
const applied = useAppliedOptions(options11, appliedIds);
|
|
480
481
|
const active = applied.find((option) => option.value === activeId) ?? EMPTY_OPTION;
|
|
481
482
|
return /* @__PURE__ */ React7.createElement(import_ui4.Stack, { gap: 1, p: 2 }, /* @__PURE__ */ React7.createElement(import_ui4.Stack, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React7.createElement(import_ui4.Typography, { component: "label", variant: "caption", htmlFor: ID }, (0, import_i18n3.__)("CSS Classes", "elementor")), /* @__PURE__ */ React7.createElement(import_ui4.Stack, { direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React7.createElement(
|
|
482
483
|
MultiCombobox,
|
|
483
484
|
{
|
|
484
485
|
id: ID,
|
|
485
486
|
size: "tiny",
|
|
486
|
-
options:
|
|
487
|
+
options: options11,
|
|
487
488
|
selected: applied,
|
|
488
489
|
onSelect: handleApply,
|
|
489
490
|
limitTags: TAGS_LIMIT,
|
|
@@ -558,19 +559,14 @@ function useCreateActions({
|
|
|
558
559
|
pushAppliedId(createdId);
|
|
559
560
|
setActiveId(createdId);
|
|
560
561
|
},
|
|
561
|
-
condition: (
|
|
562
|
-
const isUniqueLabel = !options10.some(
|
|
563
|
-
(option) => option.label.toLowerCase() === inputValue.toLowerCase()
|
|
564
|
-
);
|
|
565
|
-
return !!inputValue && isUniqueLabel;
|
|
566
|
-
},
|
|
562
|
+
condition: (_, inputValue) => import_editor_styles_repository4.stylesRepository.isLabelValid(inputValue) && !import_editor_styles_repository4.stylesRepository.isLabelExist(inputValue),
|
|
567
563
|
// translators: %s is the singular label of css class provider (e.g "Global CSS Class").
|
|
568
564
|
group: (0, import_i18n3.__)("Create New %s", "elementor").replace("%s", provider.labels?.singular ?? "")
|
|
569
565
|
};
|
|
570
566
|
});
|
|
571
567
|
}
|
|
572
|
-
function useAppliedOptions(
|
|
573
|
-
const applied =
|
|
568
|
+
function useAppliedOptions(options11, appliedIds) {
|
|
569
|
+
const applied = options11.filter((option) => appliedIds.includes(option.value));
|
|
574
570
|
const hasElementsProviderStyleApplied = applied.some(
|
|
575
571
|
(option) => option.provider === import_editor_styles_repository4.ELEMENTS_STYLES_PROVIDER_KEY
|
|
576
572
|
);
|
|
@@ -626,13 +622,13 @@ function useHandleApply(appliedIds, setAppliedIds) {
|
|
|
626
622
|
var import_editor_panels2 = require("@elementor/editor-panels");
|
|
627
623
|
|
|
628
624
|
// src/components/editing-panel.tsx
|
|
629
|
-
var
|
|
630
|
-
var
|
|
625
|
+
var React62 = __toESM(require("react"));
|
|
626
|
+
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
631
627
|
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
632
628
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
633
629
|
var import_session4 = require("@elementor/session");
|
|
634
|
-
var
|
|
635
|
-
var
|
|
630
|
+
var import_ui53 = require("@elementor/ui");
|
|
631
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
636
632
|
|
|
637
633
|
// src/controls-actions.ts
|
|
638
634
|
var import_menus = require("@elementor/menus");
|
|
@@ -688,10 +684,10 @@ function EditorPanelErrorFallback() {
|
|
|
688
684
|
}
|
|
689
685
|
|
|
690
686
|
// src/components/editing-panel-tabs.tsx
|
|
691
|
-
var
|
|
687
|
+
var React61 = __toESM(require("react"));
|
|
692
688
|
var import_react14 = require("react");
|
|
693
|
-
var
|
|
694
|
-
var
|
|
689
|
+
var import_ui52 = require("@elementor/ui");
|
|
690
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
695
691
|
|
|
696
692
|
// src/components/settings-tab.tsx
|
|
697
693
|
var React15 = __toESM(require("react"));
|
|
@@ -774,12 +770,8 @@ var createTopLevelOjectType = ({ schema }) => {
|
|
|
774
770
|
var SettingsField = ({ bind, children }) => {
|
|
775
771
|
const { element, elementType } = useElement();
|
|
776
772
|
const settingsValue = (0, import_editor_elements3.useElementSetting)(element.id, bind);
|
|
777
|
-
const linkValue = (0, import_editor_elements3.useElementSetting)(element.id, "link");
|
|
778
773
|
const value = { [bind]: settingsValue };
|
|
779
774
|
const propType = createTopLevelOjectType({ schema: elementType.propsSchema });
|
|
780
|
-
if (bind === "tag" && linkValue?.value && "div-block" === elementType.key) {
|
|
781
|
-
return null;
|
|
782
|
-
}
|
|
783
775
|
const setValue = (newValue) => {
|
|
784
776
|
(0, import_editor_elements3.updateElementSettings)({
|
|
785
777
|
id: element.id,
|
|
@@ -857,13 +849,13 @@ var Control2 = ({ control }) => {
|
|
|
857
849
|
};
|
|
858
850
|
|
|
859
851
|
// src/components/style-tab.tsx
|
|
860
|
-
var
|
|
852
|
+
var React60 = __toESM(require("react"));
|
|
861
853
|
var import_react13 = require("react");
|
|
862
854
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
863
855
|
var import_editor_responsive = require("@elementor/editor-responsive");
|
|
864
856
|
var import_session3 = require("@elementor/session");
|
|
865
|
-
var
|
|
866
|
-
var
|
|
857
|
+
var import_ui51 = require("@elementor/ui");
|
|
858
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
867
859
|
|
|
868
860
|
// src/components/style-sections/background-section/background-section.tsx
|
|
869
861
|
var React17 = __toESM(require("react"));
|
|
@@ -1029,22 +1021,27 @@ var BackgroundSection = () => {
|
|
|
1029
1021
|
};
|
|
1030
1022
|
|
|
1031
1023
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1032
|
-
var
|
|
1033
|
-
var
|
|
1024
|
+
var React26 = __toESM(require("react"));
|
|
1025
|
+
var import_ui18 = require("@elementor/ui");
|
|
1026
|
+
|
|
1027
|
+
// src/components/panel-divider.tsx
|
|
1028
|
+
var React18 = __toESM(require("react"));
|
|
1029
|
+
var import_ui11 = require("@elementor/ui");
|
|
1030
|
+
var PanelDivider = () => /* @__PURE__ */ React18.createElement(import_ui11.Divider, { sx: { my: 0.5 } });
|
|
1034
1031
|
|
|
1035
1032
|
// src/components/style-sections/border-section/border-field.tsx
|
|
1036
|
-
var
|
|
1033
|
+
var React23 = __toESM(require("react"));
|
|
1037
1034
|
var import_i18n8 = require("@wordpress/i18n");
|
|
1038
1035
|
|
|
1039
1036
|
// src/components/add-or-remove-content.tsx
|
|
1040
|
-
var
|
|
1037
|
+
var React19 = __toESM(require("react"));
|
|
1041
1038
|
var import_editor_controls7 = require("@elementor/editor-controls");
|
|
1042
1039
|
var import_icons4 = require("@elementor/icons");
|
|
1043
|
-
var
|
|
1040
|
+
var import_ui12 = require("@elementor/ui");
|
|
1044
1041
|
var SIZE2 = "tiny";
|
|
1045
1042
|
var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
1046
|
-
return /* @__PURE__ */
|
|
1047
|
-
|
|
1043
|
+
return /* @__PURE__ */ React19.createElement(import_ui12.Stack, { gap: 1.5 }, /* @__PURE__ */ React19.createElement(
|
|
1044
|
+
import_ui12.Stack,
|
|
1048
1045
|
{
|
|
1049
1046
|
direction: "row",
|
|
1050
1047
|
sx: {
|
|
@@ -1052,24 +1049,24 @@ var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
|
1052
1049
|
alignItems: "center"
|
|
1053
1050
|
}
|
|
1054
1051
|
},
|
|
1055
|
-
/* @__PURE__ */
|
|
1056
|
-
isAdded ? /* @__PURE__ */
|
|
1057
|
-
), /* @__PURE__ */
|
|
1052
|
+
/* @__PURE__ */ React19.createElement(import_editor_controls7.ControlLabel, null, label),
|
|
1053
|
+
isAdded ? /* @__PURE__ */ React19.createElement(import_ui12.IconButton, { size: SIZE2, onClick: onRemove, "aria-label": "Remove" }, /* @__PURE__ */ React19.createElement(import_icons4.MinusIcon, { fontSize: SIZE2 })) : /* @__PURE__ */ React19.createElement(import_ui12.IconButton, { size: SIZE2, onClick: onAdd, "aria-label": "Add" }, /* @__PURE__ */ React19.createElement(import_icons4.PlusIcon, { fontSize: SIZE2 }))
|
|
1054
|
+
), /* @__PURE__ */ React19.createElement(import_ui12.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React19.createElement(import_ui12.Stack, { gap: 1.5 }, children)));
|
|
1058
1055
|
};
|
|
1059
1056
|
|
|
1060
1057
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
1061
|
-
var
|
|
1058
|
+
var React20 = __toESM(require("react"));
|
|
1062
1059
|
var import_editor_controls8 = require("@elementor/editor-controls");
|
|
1063
|
-
var
|
|
1060
|
+
var import_ui13 = require("@elementor/ui");
|
|
1064
1061
|
var import_i18n5 = require("@wordpress/i18n");
|
|
1065
1062
|
var BorderColorField = () => {
|
|
1066
|
-
return /* @__PURE__ */
|
|
1063
|
+
return /* @__PURE__ */ React20.createElement(StylesField, { bind: "border-color" }, /* @__PURE__ */ React20.createElement(import_ui13.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React20.createElement(import_ui13.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React20.createElement(import_editor_controls8.ControlLabel, null, (0, import_i18n5.__)("Border color", "elementor"))), /* @__PURE__ */ React20.createElement(import_ui13.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React20.createElement(import_editor_controls8.ColorControl, null))));
|
|
1067
1064
|
};
|
|
1068
1065
|
|
|
1069
1066
|
// src/components/style-sections/border-section/border-style-field.tsx
|
|
1070
|
-
var
|
|
1067
|
+
var React21 = __toESM(require("react"));
|
|
1071
1068
|
var import_editor_controls9 = require("@elementor/editor-controls");
|
|
1072
|
-
var
|
|
1069
|
+
var import_ui14 = require("@elementor/ui");
|
|
1073
1070
|
var import_i18n6 = require("@wordpress/i18n");
|
|
1074
1071
|
var borderStyles = [
|
|
1075
1072
|
{ value: "none", label: (0, import_i18n6.__)("None", "elementor") },
|
|
@@ -1083,11 +1080,11 @@ var borderStyles = [
|
|
|
1083
1080
|
{ value: "outset", label: (0, import_i18n6.__)("Outset", "elementor") }
|
|
1084
1081
|
];
|
|
1085
1082
|
var BorderStyleField = () => {
|
|
1086
|
-
return /* @__PURE__ */
|
|
1083
|
+
return /* @__PURE__ */ React21.createElement(StylesField, { bind: "border-style" }, /* @__PURE__ */ React21.createElement(import_ui14.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React21.createElement(import_ui14.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(import_editor_controls9.ControlLabel, null, (0, import_i18n6.__)("Border type", "elementor"))), /* @__PURE__ */ React21.createElement(import_ui14.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React21.createElement(import_editor_controls9.SelectControl, { options: borderStyles }))));
|
|
1087
1084
|
};
|
|
1088
1085
|
|
|
1089
1086
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
1090
|
-
var
|
|
1087
|
+
var React22 = __toESM(require("react"));
|
|
1091
1088
|
var import_editor_controls10 = require("@elementor/editor-controls");
|
|
1092
1089
|
var import_editor_props2 = require("@elementor/editor-props");
|
|
1093
1090
|
var import_icons5 = require("@elementor/icons");
|
|
@@ -1095,32 +1092,32 @@ var import_i18n7 = require("@wordpress/i18n");
|
|
|
1095
1092
|
var edges = [
|
|
1096
1093
|
{
|
|
1097
1094
|
label: (0, import_i18n7.__)("Top", "elementor"),
|
|
1098
|
-
icon: /* @__PURE__ */
|
|
1095
|
+
icon: /* @__PURE__ */ React22.createElement(import_icons5.SideTopIcon, { fontSize: "tiny" }),
|
|
1099
1096
|
bind: "top"
|
|
1100
1097
|
},
|
|
1101
1098
|
{
|
|
1102
1099
|
label: (0, import_i18n7.__)("Right", "elementor"),
|
|
1103
|
-
icon: /* @__PURE__ */
|
|
1100
|
+
icon: /* @__PURE__ */ React22.createElement(import_icons5.SideRightIcon, { fontSize: "tiny" }),
|
|
1104
1101
|
bind: "right"
|
|
1105
1102
|
},
|
|
1106
1103
|
{
|
|
1107
1104
|
label: (0, import_i18n7.__)("Bottom", "elementor"),
|
|
1108
|
-
icon: /* @__PURE__ */
|
|
1105
|
+
icon: /* @__PURE__ */ React22.createElement(import_icons5.SideBottomIcon, { fontSize: "tiny" }),
|
|
1109
1106
|
bind: "bottom"
|
|
1110
1107
|
},
|
|
1111
1108
|
{
|
|
1112
1109
|
label: (0, import_i18n7.__)("Left", "elementor"),
|
|
1113
|
-
icon: /* @__PURE__ */
|
|
1110
|
+
icon: /* @__PURE__ */ React22.createElement(import_icons5.SideLeftIcon, { fontSize: "tiny" }),
|
|
1114
1111
|
bind: "left"
|
|
1115
1112
|
}
|
|
1116
1113
|
];
|
|
1117
1114
|
var BorderWidthField = () => {
|
|
1118
|
-
return /* @__PURE__ */
|
|
1115
|
+
return /* @__PURE__ */ React22.createElement(StylesField, { bind: "border-width" }, /* @__PURE__ */ React22.createElement(
|
|
1119
1116
|
import_editor_controls10.EqualUnequalSizesControl,
|
|
1120
1117
|
{
|
|
1121
1118
|
items: edges,
|
|
1122
|
-
label: (0, import_i18n7.__)("Border
|
|
1123
|
-
icon: /* @__PURE__ */
|
|
1119
|
+
label: (0, import_i18n7.__)("Border width", "elementor"),
|
|
1120
|
+
icon: /* @__PURE__ */ React22.createElement(import_icons5.SideAllIcon, { fontSize: "tiny" }),
|
|
1124
1121
|
multiSizePropTypeUtil: import_editor_props2.borderWidthPropTypeUtil
|
|
1125
1122
|
}
|
|
1126
1123
|
));
|
|
@@ -1145,7 +1142,7 @@ var BorderField = () => {
|
|
|
1145
1142
|
});
|
|
1146
1143
|
};
|
|
1147
1144
|
const hasBorder = Object.values(border ?? {}).some(Boolean);
|
|
1148
|
-
return /* @__PURE__ */
|
|
1145
|
+
return /* @__PURE__ */ React23.createElement(
|
|
1149
1146
|
AddOrRemoveContent,
|
|
1150
1147
|
{
|
|
1151
1148
|
label: (0, import_i18n8.__)("Border", "elementor"),
|
|
@@ -1153,68 +1150,121 @@ var BorderField = () => {
|
|
|
1153
1150
|
onAdd: addBorder,
|
|
1154
1151
|
onRemove: removeBorder
|
|
1155
1152
|
},
|
|
1156
|
-
/* @__PURE__ */
|
|
1157
|
-
/* @__PURE__ */
|
|
1158
|
-
/* @__PURE__ */
|
|
1153
|
+
/* @__PURE__ */ React23.createElement(BorderWidthField, null),
|
|
1154
|
+
/* @__PURE__ */ React23.createElement(BorderColorField, null),
|
|
1155
|
+
/* @__PURE__ */ React23.createElement(BorderStyleField, null)
|
|
1159
1156
|
);
|
|
1160
1157
|
};
|
|
1161
1158
|
|
|
1162
1159
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
1163
|
-
var
|
|
1160
|
+
var React25 = __toESM(require("react"));
|
|
1164
1161
|
var import_editor_controls11 = require("@elementor/editor-controls");
|
|
1165
1162
|
var import_editor_props3 = require("@elementor/editor-props");
|
|
1166
1163
|
var import_icons6 = require("@elementor/icons");
|
|
1164
|
+
var import_ui17 = require("@elementor/ui");
|
|
1167
1165
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1168
|
-
|
|
1166
|
+
|
|
1167
|
+
// src/hooks/use-direction.ts
|
|
1168
|
+
var import_ui15 = require("@elementor/ui");
|
|
1169
|
+
function useDirection() {
|
|
1170
|
+
const theme = (0, import_ui15.useTheme)(), extendedWindow = window;
|
|
1171
|
+
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
1172
|
+
return { isSiteRtl, isUiRtl };
|
|
1173
|
+
}
|
|
1174
|
+
|
|
1175
|
+
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
1176
|
+
var React24 = __toESM(require("react"));
|
|
1177
|
+
var import_react9 = require("react");
|
|
1178
|
+
var import_ui16 = require("@elementor/ui");
|
|
1179
|
+
var CLOCKWISE_ANGLES = {
|
|
1180
|
+
row: 0,
|
|
1181
|
+
column: 90,
|
|
1182
|
+
"row-reverse": 180,
|
|
1183
|
+
"column-reverse": 270
|
|
1184
|
+
};
|
|
1185
|
+
var COUNTER_CLOCKWISE_ANGLES = {
|
|
1186
|
+
row: 0,
|
|
1187
|
+
column: -90,
|
|
1188
|
+
"row-reverse": -180,
|
|
1189
|
+
"column-reverse": -270
|
|
1190
|
+
};
|
|
1191
|
+
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
1192
|
+
const rotate = (0, import_react9.useRef)(useGetTargetAngle(isClockwise, offset));
|
|
1193
|
+
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
1194
|
+
return /* @__PURE__ */ React24.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
1195
|
+
};
|
|
1196
|
+
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
1197
|
+
const [direction] = useStylesField("flex-direction");
|
|
1198
|
+
const isRtl = "rtl" === (0, import_ui16.useTheme)().direction;
|
|
1199
|
+
const rotationMultiplier = isRtl ? -1 : 1;
|
|
1200
|
+
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
1201
|
+
const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
|
|
1202
|
+
const targetAngle = angleMap[direction?.value || "row"] + offset;
|
|
1203
|
+
const diffToTargetAngle = (targetAngle - currentAngle + 360) % 360;
|
|
1204
|
+
const formattedDiff = (diffToTargetAngle + 180) % 360 - 180;
|
|
1205
|
+
return (currentAngle + formattedDiff) * rotationMultiplier;
|
|
1206
|
+
};
|
|
1207
|
+
|
|
1208
|
+
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
1209
|
+
var StartStartIcon = (0, import_ui17.withDirection)(import_icons6.RadiusTopLeftIcon);
|
|
1210
|
+
var StartEndIcon = (0, import_ui17.withDirection)(import_icons6.RadiusTopRightIcon);
|
|
1211
|
+
var EndStartIcon = (0, import_ui17.withDirection)(import_icons6.RadiusBottomLeftIcon);
|
|
1212
|
+
var EndEndIcon = (0, import_ui17.withDirection)(import_icons6.RadiusBottomRightIcon);
|
|
1213
|
+
var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Top right", "elementor") : (0, import_i18n9.__)("Top left", "elementor");
|
|
1214
|
+
var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Top left", "elementor") : (0, import_i18n9.__)("Top right", "elementor");
|
|
1215
|
+
var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Bottom right", "elementor") : (0, import_i18n9.__)("Bottom left", "elementor");
|
|
1216
|
+
var getEndEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Bottom left", "elementor") : (0, import_i18n9.__)("Bottom right", "elementor");
|
|
1217
|
+
var getCorners = (isSiteRtl) => [
|
|
1169
1218
|
{
|
|
1170
|
-
label: (
|
|
1171
|
-
icon: /* @__PURE__ */
|
|
1172
|
-
bind: "
|
|
1219
|
+
label: getStartStartLabel(isSiteRtl),
|
|
1220
|
+
icon: /* @__PURE__ */ React25.createElement(RotatedIcon, { icon: StartStartIcon, size: "tiny" }),
|
|
1221
|
+
bind: "start-start"
|
|
1173
1222
|
},
|
|
1174
1223
|
{
|
|
1175
|
-
label: (
|
|
1176
|
-
icon: /* @__PURE__ */
|
|
1177
|
-
bind: "
|
|
1224
|
+
label: getStartEndLabel(isSiteRtl),
|
|
1225
|
+
icon: /* @__PURE__ */ React25.createElement(RotatedIcon, { icon: StartEndIcon, size: "tiny" }),
|
|
1226
|
+
bind: "start-end"
|
|
1178
1227
|
},
|
|
1179
1228
|
{
|
|
1180
|
-
label: (
|
|
1181
|
-
icon: /* @__PURE__ */
|
|
1182
|
-
bind: "
|
|
1229
|
+
label: getEndEndLabel(isSiteRtl),
|
|
1230
|
+
icon: /* @__PURE__ */ React25.createElement(RotatedIcon, { icon: EndEndIcon, size: "tiny" }),
|
|
1231
|
+
bind: "end-end"
|
|
1183
1232
|
},
|
|
1184
1233
|
{
|
|
1185
|
-
label: (
|
|
1186
|
-
icon: /* @__PURE__ */
|
|
1187
|
-
bind: "
|
|
1234
|
+
label: getEndStartLabel(isSiteRtl),
|
|
1235
|
+
icon: /* @__PURE__ */ React25.createElement(RotatedIcon, { icon: EndStartIcon, size: "tiny" }),
|
|
1236
|
+
bind: "end-start"
|
|
1188
1237
|
}
|
|
1189
1238
|
];
|
|
1190
1239
|
var BorderRadiusField = () => {
|
|
1191
|
-
|
|
1240
|
+
const { isSiteRtl } = useDirection();
|
|
1241
|
+
return /* @__PURE__ */ React25.createElement(StylesField, { bind: "border-radius" }, /* @__PURE__ */ React25.createElement(
|
|
1192
1242
|
import_editor_controls11.EqualUnequalSizesControl,
|
|
1193
1243
|
{
|
|
1194
|
-
items:
|
|
1195
|
-
label: (0, import_i18n9.__)("Border
|
|
1196
|
-
icon: /* @__PURE__ */
|
|
1244
|
+
items: getCorners(isSiteRtl),
|
|
1245
|
+
label: (0, import_i18n9.__)("Border radius", "elementor"),
|
|
1246
|
+
icon: /* @__PURE__ */ React25.createElement(import_icons6.BorderCornersIcon, { fontSize: "tiny" }),
|
|
1197
1247
|
multiSizePropTypeUtil: import_editor_props3.borderRadiusPropTypeUtil
|
|
1198
1248
|
}
|
|
1199
1249
|
));
|
|
1200
1250
|
};
|
|
1201
1251
|
|
|
1202
1252
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1203
|
-
var BorderSection = () => /* @__PURE__ */
|
|
1253
|
+
var BorderSection = () => /* @__PURE__ */ React26.createElement(import_ui18.Stack, { gap: 1.5 }, /* @__PURE__ */ React26.createElement(BorderRadiusField, null), /* @__PURE__ */ React26.createElement(PanelDivider, null), /* @__PURE__ */ React26.createElement(BorderField, null));
|
|
1204
1254
|
|
|
1205
1255
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
1206
|
-
var
|
|
1256
|
+
var React27 = __toESM(require("react"));
|
|
1207
1257
|
var import_editor_controls12 = require("@elementor/editor-controls");
|
|
1208
|
-
var
|
|
1258
|
+
var import_ui19 = require("@elementor/ui");
|
|
1209
1259
|
var EffectsSection = () => {
|
|
1210
|
-
return /* @__PURE__ */
|
|
1260
|
+
return /* @__PURE__ */ React27.createElement(import_ui19.Stack, { gap: 1.5 }, /* @__PURE__ */ React27.createElement(StylesField, { bind: "box-shadow" }, /* @__PURE__ */ React27.createElement(import_editor_controls12.BoxShadowRepeaterControl, null)));
|
|
1211
1261
|
};
|
|
1212
1262
|
|
|
1213
1263
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
1214
|
-
var
|
|
1264
|
+
var React37 = __toESM(require("react"));
|
|
1215
1265
|
var import_editor_controls22 = require("@elementor/editor-controls");
|
|
1216
1266
|
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
1217
|
-
var
|
|
1267
|
+
var import_ui29 = require("@elementor/ui");
|
|
1218
1268
|
var import_i18n19 = require("@wordpress/i18n");
|
|
1219
1269
|
|
|
1220
1270
|
// src/hooks/use-computed-style.ts
|
|
@@ -1243,56 +1293,13 @@ function useComputedStyle(elementId) {
|
|
|
1243
1293
|
}
|
|
1244
1294
|
|
|
1245
1295
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
1246
|
-
var
|
|
1296
|
+
var React28 = __toESM(require("react"));
|
|
1247
1297
|
var import_editor_controls13 = require("@elementor/editor-controls");
|
|
1248
1298
|
var import_icons7 = require("@elementor/icons");
|
|
1249
|
-
var
|
|
1299
|
+
var import_ui20 = require("@elementor/ui");
|
|
1250
1300
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
var import_ui16 = require("@elementor/ui");
|
|
1254
|
-
function useDirection() {
|
|
1255
|
-
const theme = (0, import_ui16.useTheme)(), extendedWindow = window;
|
|
1256
|
-
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
1257
|
-
return { isSiteRtl, isUiRtl };
|
|
1258
|
-
}
|
|
1259
|
-
|
|
1260
|
-
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
1261
|
-
var React26 = __toESM(require("react"));
|
|
1262
|
-
var import_react9 = require("react");
|
|
1263
|
-
var import_ui17 = require("@elementor/ui");
|
|
1264
|
-
var CLOCKWISE_ANGLES = {
|
|
1265
|
-
row: 0,
|
|
1266
|
-
column: 90,
|
|
1267
|
-
"row-reverse": 180,
|
|
1268
|
-
"column-reverse": 270
|
|
1269
|
-
};
|
|
1270
|
-
var COUNTER_CLOCKWISE_ANGLES = {
|
|
1271
|
-
row: 0,
|
|
1272
|
-
column: -90,
|
|
1273
|
-
"row-reverse": -180,
|
|
1274
|
-
"column-reverse": -270
|
|
1275
|
-
};
|
|
1276
|
-
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
1277
|
-
const rotate = (0, import_react9.useRef)(useGetTargetAngle(isClockwise, offset));
|
|
1278
|
-
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
1279
|
-
return /* @__PURE__ */ React26.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
1280
|
-
};
|
|
1281
|
-
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
1282
|
-
const [direction] = useStylesField("flex-direction");
|
|
1283
|
-
const isRtl = "rtl" === (0, import_ui17.useTheme)().direction;
|
|
1284
|
-
const rotationMultiplier = isRtl ? -1 : 1;
|
|
1285
|
-
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
1286
|
-
const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
|
|
1287
|
-
const targetAngle = angleMap[direction?.value || "row"] + offset;
|
|
1288
|
-
const diffToTargetAngle = (targetAngle - currentAngle + 360) % 360;
|
|
1289
|
-
const formattedDiff = (diffToTargetAngle + 180) % 360 - 180;
|
|
1290
|
-
return (currentAngle + formattedDiff) * rotationMultiplier;
|
|
1291
|
-
};
|
|
1292
|
-
|
|
1293
|
-
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
1294
|
-
var StartIcon = (0, import_ui18.withDirection)(import_icons7.LayoutAlignLeftIcon);
|
|
1295
|
-
var EndIcon = (0, import_ui18.withDirection)(import_icons7.LayoutAlignRightIcon);
|
|
1301
|
+
var StartIcon = (0, import_ui20.withDirection)(import_icons7.LayoutAlignLeftIcon);
|
|
1302
|
+
var EndIcon = (0, import_ui20.withDirection)(import_icons7.LayoutAlignRightIcon);
|
|
1296
1303
|
var iconProps = {
|
|
1297
1304
|
isClockwise: false,
|
|
1298
1305
|
offset: 90
|
|
@@ -1301,41 +1308,41 @@ var options = [
|
|
|
1301
1308
|
{
|
|
1302
1309
|
value: "start",
|
|
1303
1310
|
label: (0, import_i18n10.__)("Start", "elementor"),
|
|
1304
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1311
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
|
|
1305
1312
|
showTooltip: true
|
|
1306
1313
|
},
|
|
1307
1314
|
{
|
|
1308
1315
|
value: "center",
|
|
1309
1316
|
label: (0, import_i18n10.__)("Center", "elementor"),
|
|
1310
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1317
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: import_icons7.LayoutAlignCenterIcon, size, ...iconProps }),
|
|
1311
1318
|
showTooltip: true
|
|
1312
1319
|
},
|
|
1313
1320
|
{
|
|
1314
1321
|
value: "end",
|
|
1315
1322
|
label: (0, import_i18n10.__)("End", "elementor"),
|
|
1316
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1323
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
|
|
1317
1324
|
showTooltip: true
|
|
1318
1325
|
},
|
|
1319
1326
|
{
|
|
1320
1327
|
value: "stretch",
|
|
1321
1328
|
label: (0, import_i18n10.__)("Stretch", "elementor"),
|
|
1322
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1329
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: import_icons7.LayoutDistributeVerticalIcon, size, ...iconProps }),
|
|
1323
1330
|
showTooltip: true
|
|
1324
1331
|
}
|
|
1325
1332
|
];
|
|
1326
1333
|
var AlignItemsField = () => {
|
|
1327
1334
|
const { isSiteRtl } = useDirection();
|
|
1328
|
-
return /* @__PURE__ */
|
|
1335
|
+
return /* @__PURE__ */ React28.createElement(import_ui20.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React28.createElement(import_ui20.ThemeProvider, null, /* @__PURE__ */ React28.createElement(StylesField, { bind: "align-items" }, /* @__PURE__ */ React28.createElement(import_ui20.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(import_ui20.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(import_editor_controls13.ControlLabel, null, (0, import_i18n10.__)("Align items", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui20.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React28.createElement(import_editor_controls13.ToggleControl, { options }))))));
|
|
1329
1336
|
};
|
|
1330
1337
|
|
|
1331
1338
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
1332
|
-
var
|
|
1339
|
+
var React29 = __toESM(require("react"));
|
|
1333
1340
|
var import_editor_controls14 = require("@elementor/editor-controls");
|
|
1334
1341
|
var import_icons8 = require("@elementor/icons");
|
|
1335
|
-
var
|
|
1342
|
+
var import_ui21 = require("@elementor/ui");
|
|
1336
1343
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1337
|
-
var StartIcon2 = (0,
|
|
1338
|
-
var EndIcon2 = (0,
|
|
1344
|
+
var StartIcon2 = (0, import_ui21.withDirection)(import_icons8.LayoutAlignLeftIcon);
|
|
1345
|
+
var EndIcon2 = (0, import_ui21.withDirection)(import_icons8.LayoutAlignRightIcon);
|
|
1339
1346
|
var iconProps2 = {
|
|
1340
1347
|
isClockwise: false,
|
|
1341
1348
|
offset: 90
|
|
@@ -1344,40 +1351,40 @@ var options2 = [
|
|
|
1344
1351
|
{
|
|
1345
1352
|
value: "start",
|
|
1346
1353
|
label: (0, import_i18n11.__)("Start", "elementor"),
|
|
1347
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1354
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
|
|
1348
1355
|
showTooltip: true
|
|
1349
1356
|
},
|
|
1350
1357
|
{
|
|
1351
1358
|
value: "center",
|
|
1352
1359
|
label: (0, import_i18n11.__)("Center", "elementor"),
|
|
1353
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1360
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: import_icons8.LayoutAlignCenterIcon, size, ...iconProps2 }),
|
|
1354
1361
|
showTooltip: true
|
|
1355
1362
|
},
|
|
1356
1363
|
{
|
|
1357
1364
|
value: "end",
|
|
1358
1365
|
label: (0, import_i18n11.__)("End", "elementor"),
|
|
1359
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1366
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
|
|
1360
1367
|
showTooltip: true
|
|
1361
1368
|
},
|
|
1362
1369
|
{
|
|
1363
1370
|
value: "stretch",
|
|
1364
1371
|
label: (0, import_i18n11.__)("Stretch", "elementor"),
|
|
1365
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1372
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: import_icons8.LayoutDistributeVerticalIcon, size, ...iconProps2 }),
|
|
1366
1373
|
showTooltip: true
|
|
1367
1374
|
}
|
|
1368
1375
|
];
|
|
1369
1376
|
var AlignSelfChild = () => {
|
|
1370
1377
|
const { isSiteRtl } = useDirection();
|
|
1371
|
-
return /* @__PURE__ */
|
|
1378
|
+
return /* @__PURE__ */ React29.createElement(import_ui21.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React29.createElement(import_ui21.ThemeProvider, null, /* @__PURE__ */ React29.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React29.createElement(import_ui21.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React29.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(import_editor_controls14.ControlLabel, null, (0, import_i18n11.__)("Align self", "elementor"))), /* @__PURE__ */ React29.createElement(import_ui21.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React29.createElement(import_editor_controls14.ToggleControl, { options: options2 }))))));
|
|
1372
1379
|
};
|
|
1373
1380
|
|
|
1374
1381
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
1375
|
-
var
|
|
1382
|
+
var React30 = __toESM(require("react"));
|
|
1376
1383
|
var import_editor_controls15 = require("@elementor/editor-controls");
|
|
1377
|
-
var
|
|
1384
|
+
var import_ui22 = require("@elementor/ui");
|
|
1378
1385
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1379
1386
|
var DisplayField = () => {
|
|
1380
|
-
const
|
|
1387
|
+
const options11 = [
|
|
1381
1388
|
{
|
|
1382
1389
|
value: "block",
|
|
1383
1390
|
renderContent: () => (0, import_i18n12.__)("Block", "elementor"),
|
|
@@ -1397,58 +1404,58 @@ var DisplayField = () => {
|
|
|
1397
1404
|
showTooltip: true
|
|
1398
1405
|
}
|
|
1399
1406
|
];
|
|
1400
|
-
return /* @__PURE__ */
|
|
1407
|
+
return /* @__PURE__ */ React30.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React30.createElement(import_ui22.Stack, { gap: 1 }, /* @__PURE__ */ React30.createElement(import_editor_controls15.ControlLabel, null, (0, import_i18n12.__)("Display", "elementor")), /* @__PURE__ */ React30.createElement(import_editor_controls15.ToggleControl, { options: options11, fullWidth: true })));
|
|
1401
1408
|
};
|
|
1402
1409
|
|
|
1403
1410
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
1404
|
-
var
|
|
1411
|
+
var React31 = __toESM(require("react"));
|
|
1405
1412
|
var import_editor_controls16 = require("@elementor/editor-controls");
|
|
1406
1413
|
var import_icons9 = require("@elementor/icons");
|
|
1407
|
-
var
|
|
1414
|
+
var import_ui23 = require("@elementor/ui");
|
|
1408
1415
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1409
1416
|
var options3 = [
|
|
1410
1417
|
{
|
|
1411
1418
|
value: "row",
|
|
1412
1419
|
label: (0, import_i18n13.__)("Row", "elementor"),
|
|
1413
1420
|
renderContent: ({ size }) => {
|
|
1414
|
-
const StartIcon5 = (0,
|
|
1415
|
-
return /* @__PURE__ */
|
|
1421
|
+
const StartIcon5 = (0, import_ui23.withDirection)(import_icons9.ArrowRightIcon);
|
|
1422
|
+
return /* @__PURE__ */ React31.createElement(StartIcon5, { fontSize: size });
|
|
1416
1423
|
},
|
|
1417
1424
|
showTooltip: true
|
|
1418
1425
|
},
|
|
1419
1426
|
{
|
|
1420
1427
|
value: "column",
|
|
1421
1428
|
label: (0, import_i18n13.__)("Column", "elementor"),
|
|
1422
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1429
|
+
renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.ArrowDownSmallIcon, { fontSize: size }),
|
|
1423
1430
|
showTooltip: true
|
|
1424
1431
|
},
|
|
1425
1432
|
{
|
|
1426
1433
|
value: "row-reverse",
|
|
1427
1434
|
label: (0, import_i18n13.__)("Reversed row", "elementor"),
|
|
1428
1435
|
renderContent: ({ size }) => {
|
|
1429
|
-
const EndIcon5 = (0,
|
|
1430
|
-
return /* @__PURE__ */
|
|
1436
|
+
const EndIcon5 = (0, import_ui23.withDirection)(import_icons9.ArrowLeftIcon);
|
|
1437
|
+
return /* @__PURE__ */ React31.createElement(EndIcon5, { fontSize: size });
|
|
1431
1438
|
},
|
|
1432
1439
|
showTooltip: true
|
|
1433
1440
|
},
|
|
1434
1441
|
{
|
|
1435
1442
|
value: "column-reverse",
|
|
1436
1443
|
label: (0, import_i18n13.__)("Reversed column", "elementor"),
|
|
1437
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1444
|
+
renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.ArrowUpSmallIcon, { fontSize: size }),
|
|
1438
1445
|
showTooltip: true
|
|
1439
1446
|
}
|
|
1440
1447
|
];
|
|
1441
1448
|
var FlexDirectionField = () => {
|
|
1442
1449
|
const { isSiteRtl } = useDirection();
|
|
1443
|
-
return /* @__PURE__ */
|
|
1450
|
+
return /* @__PURE__ */ React31.createElement(import_ui23.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React31.createElement(import_ui23.ThemeProvider, null, /* @__PURE__ */ React31.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React31.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(import_editor_controls16.ControlLabel, null, (0, import_i18n13.__)("Direction", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui23.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React31.createElement(import_editor_controls16.ToggleControl, { options: options3 }))))));
|
|
1444
1451
|
};
|
|
1445
1452
|
|
|
1446
1453
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
1447
|
-
var
|
|
1454
|
+
var React32 = __toESM(require("react"));
|
|
1448
1455
|
var import_react10 = require("react");
|
|
1449
1456
|
var import_editor_controls17 = require("@elementor/editor-controls");
|
|
1450
1457
|
var import_icons10 = require("@elementor/icons");
|
|
1451
|
-
var
|
|
1458
|
+
var import_ui24 = require("@elementor/ui");
|
|
1452
1459
|
var import_i18n14 = require("@wordpress/i18n");
|
|
1453
1460
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
1454
1461
|
var LAST_DEFAULT_VALUE = 99999;
|
|
@@ -1463,19 +1470,19 @@ var items = [
|
|
|
1463
1470
|
{
|
|
1464
1471
|
value: FIRST,
|
|
1465
1472
|
label: (0, import_i18n14.__)("First", "elementor"),
|
|
1466
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1473
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons10.ArrowUpSmallIcon, { fontSize: size }),
|
|
1467
1474
|
showTooltip: true
|
|
1468
1475
|
},
|
|
1469
1476
|
{
|
|
1470
1477
|
value: LAST,
|
|
1471
1478
|
label: (0, import_i18n14.__)("Last", "elementor"),
|
|
1472
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1479
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons10.ArrowDownSmallIcon, { fontSize: size }),
|
|
1473
1480
|
showTooltip: true
|
|
1474
1481
|
},
|
|
1475
1482
|
{
|
|
1476
1483
|
value: CUSTOM,
|
|
1477
1484
|
label: (0, import_i18n14.__)("Custom", "elementor"),
|
|
1478
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1485
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons10.PencilIcon, { fontSize: size }),
|
|
1479
1486
|
showTooltip: true
|
|
1480
1487
|
}
|
|
1481
1488
|
];
|
|
@@ -1490,7 +1497,7 @@ var FlexOrderField = () => {
|
|
|
1490
1497
|
}
|
|
1491
1498
|
setOrder({ $$type: "number", value: orderValueMap[group] });
|
|
1492
1499
|
};
|
|
1493
|
-
return /* @__PURE__ */
|
|
1500
|
+
return /* @__PURE__ */ React32.createElement(import_ui24.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React32.createElement(import_ui24.ThemeProvider, null, /* @__PURE__ */ React32.createElement(import_ui24.Stack, { gap: 2 }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(import_editor_controls17.ControlLabel, null, (0, import_i18n14.__)("Order", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(
|
|
1494
1501
|
import_editor_controls17.ControlToggleButtonGroup,
|
|
1495
1502
|
{
|
|
1496
1503
|
items,
|
|
@@ -1498,7 +1505,7 @@ var FlexOrderField = () => {
|
|
|
1498
1505
|
onChange: handleToggleButtonChange,
|
|
1499
1506
|
exclusive: true
|
|
1500
1507
|
}
|
|
1501
|
-
))), CUSTOM === groupControlValue && /* @__PURE__ */
|
|
1508
|
+
))), CUSTOM === groupControlValue && /* @__PURE__ */ React32.createElement(StylesField, { bind: "order" }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(import_editor_controls17.ControlLabel, null, (0, import_i18n14.__)("Custom order", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(
|
|
1502
1509
|
import_editor_controls17.NumberControl,
|
|
1503
1510
|
{
|
|
1504
1511
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -1518,30 +1525,30 @@ var getGroupControlValue = (order) => {
|
|
|
1518
1525
|
};
|
|
1519
1526
|
|
|
1520
1527
|
// src/components/style-sections/layout-section/flex-size-field.tsx
|
|
1521
|
-
var
|
|
1528
|
+
var React33 = __toESM(require("react"));
|
|
1522
1529
|
var import_react11 = require("react");
|
|
1523
1530
|
var import_editor_controls18 = require("@elementor/editor-controls");
|
|
1524
1531
|
var import_icons11 = require("@elementor/icons");
|
|
1525
|
-
var
|
|
1532
|
+
var import_ui25 = require("@elementor/ui");
|
|
1526
1533
|
var import_i18n15 = require("@wordpress/i18n");
|
|
1527
1534
|
var DEFAULT = 1;
|
|
1528
1535
|
var items2 = [
|
|
1529
1536
|
{
|
|
1530
1537
|
value: "flex-grow",
|
|
1531
1538
|
label: (0, import_i18n15.__)("Grow", "elementor"),
|
|
1532
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1539
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons11.ExpandIcon, { fontSize: size }),
|
|
1533
1540
|
showTooltip: true
|
|
1534
1541
|
},
|
|
1535
1542
|
{
|
|
1536
1543
|
value: "flex-shrink",
|
|
1537
1544
|
label: (0, import_i18n15.__)("Shrink", "elementor"),
|
|
1538
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1545
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons11.ShrinkIcon, { fontSize: size }),
|
|
1539
1546
|
showTooltip: true
|
|
1540
1547
|
},
|
|
1541
1548
|
{
|
|
1542
1549
|
value: "custom",
|
|
1543
1550
|
label: (0, import_i18n15.__)("Custom", "elementor"),
|
|
1544
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1551
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons11.PencilIcon, { fontSize: size }),
|
|
1545
1552
|
showTooltip: true
|
|
1546
1553
|
}
|
|
1547
1554
|
];
|
|
@@ -1565,7 +1572,7 @@ var FlexSizeField = () => {
|
|
|
1565
1572
|
setGrowField(null);
|
|
1566
1573
|
setShrinkField({ $$type: "number", value: DEFAULT });
|
|
1567
1574
|
};
|
|
1568
|
-
return /* @__PURE__ */
|
|
1575
|
+
return /* @__PURE__ */ React33.createElement(import_ui25.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React33.createElement(import_ui25.ThemeProvider, null, /* @__PURE__ */ React33.createElement(import_ui25.Stack, { gap: 2 }, /* @__PURE__ */ React33.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Size", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui25.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(
|
|
1569
1576
|
import_editor_controls18.ControlToggleButtonGroup,
|
|
1570
1577
|
{
|
|
1571
1578
|
value: activeGroup,
|
|
@@ -1573,9 +1580,9 @@ var FlexSizeField = () => {
|
|
|
1573
1580
|
items: items2,
|
|
1574
1581
|
exclusive: true
|
|
1575
1582
|
}
|
|
1576
|
-
))), "custom" === activeGroup && /* @__PURE__ */
|
|
1583
|
+
))), "custom" === activeGroup && /* @__PURE__ */ React33.createElement(FlexCustomField, null))));
|
|
1577
1584
|
};
|
|
1578
|
-
var FlexCustomField = () => /* @__PURE__ */
|
|
1585
|
+
var FlexCustomField = () => /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React33.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Grow", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui25.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(import_editor_controls18.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React33.createElement(StylesField, { bind: "flex-shrink" }, /* @__PURE__ */ React33.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Shrink", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui25.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(import_editor_controls18.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React33.createElement(StylesField, { bind: "flex-basis" }, /* @__PURE__ */ React33.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(import_editor_controls18.ControlLabel, null, (0, import_i18n15.__)("Basis", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui25.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(import_editor_controls18.SizeControl, null)))));
|
|
1579
1586
|
var getActiveGroup = ({
|
|
1580
1587
|
grow,
|
|
1581
1588
|
shrink,
|
|
@@ -1597,22 +1604,22 @@ var getActiveGroup = ({
|
|
|
1597
1604
|
};
|
|
1598
1605
|
|
|
1599
1606
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
1600
|
-
var
|
|
1607
|
+
var React34 = __toESM(require("react"));
|
|
1601
1608
|
var import_editor_controls19 = require("@elementor/editor-controls");
|
|
1602
|
-
var
|
|
1609
|
+
var import_ui26 = require("@elementor/ui");
|
|
1603
1610
|
var import_i18n16 = require("@wordpress/i18n");
|
|
1604
1611
|
var GapControlField = () => {
|
|
1605
|
-
return /* @__PURE__ */
|
|
1612
|
+
return /* @__PURE__ */ React34.createElement(import_ui26.Stack, { gap: 1 }, /* @__PURE__ */ React34.createElement(StylesField, { bind: "gap" }, /* @__PURE__ */ React34.createElement(import_editor_controls19.GapControl, { label: (0, import_i18n16.__)("Gaps", "elementor") })));
|
|
1606
1613
|
};
|
|
1607
1614
|
|
|
1608
1615
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
1609
|
-
var
|
|
1616
|
+
var React35 = __toESM(require("react"));
|
|
1610
1617
|
var import_editor_controls20 = require("@elementor/editor-controls");
|
|
1611
1618
|
var import_icons12 = require("@elementor/icons");
|
|
1612
|
-
var
|
|
1619
|
+
var import_ui27 = require("@elementor/ui");
|
|
1613
1620
|
var import_i18n17 = require("@wordpress/i18n");
|
|
1614
|
-
var StartIcon3 = (0,
|
|
1615
|
-
var EndIcon3 = (0,
|
|
1621
|
+
var StartIcon3 = (0, import_ui27.withDirection)(import_icons12.JustifyTopIcon);
|
|
1622
|
+
var EndIcon3 = (0, import_ui27.withDirection)(import_icons12.JustifyBottomIcon);
|
|
1616
1623
|
var iconProps3 = {
|
|
1617
1624
|
isClockwise: true,
|
|
1618
1625
|
offset: -90
|
|
@@ -1621,74 +1628,74 @@ var options4 = [
|
|
|
1621
1628
|
{
|
|
1622
1629
|
value: "start",
|
|
1623
1630
|
label: (0, import_i18n17.__)("Start", "elementor"),
|
|
1624
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1631
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: StartIcon3, size, ...iconProps3 }),
|
|
1625
1632
|
showTooltip: true
|
|
1626
1633
|
},
|
|
1627
1634
|
{
|
|
1628
1635
|
value: "center",
|
|
1629
1636
|
label: (0, import_i18n17.__)("Center", "elementor"),
|
|
1630
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1637
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons12.JustifyCenterIcon, size, ...iconProps3 }),
|
|
1631
1638
|
showTooltip: true
|
|
1632
1639
|
},
|
|
1633
1640
|
{
|
|
1634
1641
|
value: "end",
|
|
1635
1642
|
label: (0, import_i18n17.__)("End", "elementor"),
|
|
1636
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1643
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: EndIcon3, size, ...iconProps3 }),
|
|
1637
1644
|
showTooltip: true
|
|
1638
1645
|
},
|
|
1639
1646
|
{
|
|
1640
1647
|
value: "space-between",
|
|
1641
1648
|
label: (0, import_i18n17.__)("Space between", "elementor"),
|
|
1642
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1649
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons12.JustifySpaceBetweenVerticalIcon, size, ...iconProps3 }),
|
|
1643
1650
|
showTooltip: true
|
|
1644
1651
|
},
|
|
1645
1652
|
{
|
|
1646
1653
|
value: "space-around",
|
|
1647
1654
|
label: (0, import_i18n17.__)("Space around", "elementor"),
|
|
1648
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1655
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons12.JustifySpaceAroundVerticalIcon, size, ...iconProps3 }),
|
|
1649
1656
|
showTooltip: true
|
|
1650
1657
|
},
|
|
1651
1658
|
{
|
|
1652
1659
|
value: "space-evenly",
|
|
1653
1660
|
label: (0, import_i18n17.__)("Space evenly", "elementor"),
|
|
1654
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1661
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons12.JustifyDistributeVerticalIcon, size, ...iconProps3 }),
|
|
1655
1662
|
showTooltip: true
|
|
1656
1663
|
}
|
|
1657
1664
|
];
|
|
1658
1665
|
var JustifyContentField = () => {
|
|
1659
1666
|
const { isSiteRtl } = useDirection();
|
|
1660
|
-
return /* @__PURE__ */
|
|
1667
|
+
return /* @__PURE__ */ React35.createElement(import_ui27.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React35.createElement(import_ui27.ThemeProvider, null, /* @__PURE__ */ React35.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React35.createElement(import_ui27.Stack, { gap: 1 }, /* @__PURE__ */ React35.createElement(import_editor_controls20.ControlLabel, null, (0, import_i18n17.__)("Justify content", "elementor")), /* @__PURE__ */ React35.createElement(import_editor_controls20.ToggleControl, { options: options4, fullWidth: true })))));
|
|
1661
1668
|
};
|
|
1662
1669
|
|
|
1663
1670
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
1664
|
-
var
|
|
1671
|
+
var React36 = __toESM(require("react"));
|
|
1665
1672
|
var import_editor_controls21 = require("@elementor/editor-controls");
|
|
1666
1673
|
var import_icons13 = require("@elementor/icons");
|
|
1667
|
-
var
|
|
1674
|
+
var import_ui28 = require("@elementor/ui");
|
|
1668
1675
|
var import_i18n18 = require("@wordpress/i18n");
|
|
1669
1676
|
var options5 = [
|
|
1670
1677
|
{
|
|
1671
1678
|
value: "nowrap",
|
|
1672
1679
|
label: (0, import_i18n18.__)("No wrap", "elementor"),
|
|
1673
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1680
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons13.ArrowRightIcon, { fontSize: size }),
|
|
1674
1681
|
showTooltip: true
|
|
1675
1682
|
},
|
|
1676
1683
|
{
|
|
1677
1684
|
value: "wrap",
|
|
1678
1685
|
label: (0, import_i18n18.__)("Wrap", "elementor"),
|
|
1679
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1686
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons13.ArrowBackIcon, { fontSize: size }),
|
|
1680
1687
|
showTooltip: true
|
|
1681
1688
|
},
|
|
1682
1689
|
{
|
|
1683
1690
|
value: "wrap-reverse",
|
|
1684
1691
|
label: (0, import_i18n18.__)("Reversed wrap", "elementor"),
|
|
1685
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1692
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons13.ArrowForwardIcon, { fontSize: size }),
|
|
1686
1693
|
showTooltip: true
|
|
1687
1694
|
}
|
|
1688
1695
|
];
|
|
1689
1696
|
var WrapField = () => {
|
|
1690
1697
|
const { isSiteRtl } = useDirection();
|
|
1691
|
-
return /* @__PURE__ */
|
|
1698
|
+
return /* @__PURE__ */ React36.createElement(import_ui28.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(import_ui28.ThemeProvider, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React36.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(import_editor_controls21.ControlLabel, null, (0, import_i18n18.__)("Wrap", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui28.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React36.createElement(import_editor_controls21.ToggleControl, { options: options5 }))))));
|
|
1692
1699
|
};
|
|
1693
1700
|
|
|
1694
1701
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -1697,39 +1704,39 @@ var LayoutSection = () => {
|
|
|
1697
1704
|
const { element } = useElement();
|
|
1698
1705
|
const parent = (0, import_editor_elements5.useParentElement)(element.id);
|
|
1699
1706
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
1700
|
-
return /* @__PURE__ */
|
|
1707
|
+
return /* @__PURE__ */ React37.createElement(import_ui29.Stack, { gap: 2 }, /* @__PURE__ */ React37.createElement(DisplayField, null), "flex" === display?.value && /* @__PURE__ */ React37.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React37.createElement(FlexChildFields, null));
|
|
1701
1708
|
};
|
|
1702
|
-
var FlexFields = () => /* @__PURE__ */
|
|
1703
|
-
var FlexChildFields = () => /* @__PURE__ */
|
|
1709
|
+
var FlexFields = () => /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(FlexDirectionField, null), /* @__PURE__ */ React37.createElement(JustifyContentField, null), /* @__PURE__ */ React37.createElement(AlignItemsField, null), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(GapControlField, null), /* @__PURE__ */ React37.createElement(WrapField, null));
|
|
1710
|
+
var FlexChildFields = () => /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(import_editor_controls22.ControlLabel, null, (0, import_i18n19.__)("Flex child", "elementor")), /* @__PURE__ */ React37.createElement(AlignSelfChild, null), /* @__PURE__ */ React37.createElement(FlexOrderField, null), /* @__PURE__ */ React37.createElement(FlexSizeField, null));
|
|
1704
1711
|
|
|
1705
1712
|
// src/components/style-sections/position-section/position-section.tsx
|
|
1706
|
-
var
|
|
1713
|
+
var React41 = __toESM(require("react"));
|
|
1707
1714
|
var import_session2 = require("@elementor/session");
|
|
1708
|
-
var
|
|
1715
|
+
var import_ui33 = require("@elementor/ui");
|
|
1709
1716
|
|
|
1710
1717
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
1711
|
-
var
|
|
1718
|
+
var React38 = __toESM(require("react"));
|
|
1712
1719
|
var import_editor_controls23 = require("@elementor/editor-controls");
|
|
1713
1720
|
var import_icons14 = require("@elementor/icons");
|
|
1714
|
-
var
|
|
1721
|
+
var import_ui30 = require("@elementor/ui");
|
|
1715
1722
|
var import_i18n20 = require("@wordpress/i18n");
|
|
1716
1723
|
var sideIcons = {
|
|
1717
|
-
left: /* @__PURE__ */
|
|
1718
|
-
right: /* @__PURE__ */
|
|
1719
|
-
top: /* @__PURE__ */
|
|
1720
|
-
bottom: /* @__PURE__ */
|
|
1724
|
+
left: /* @__PURE__ */ React38.createElement(import_icons14.SideLeftIcon, { fontSize: "tiny" }),
|
|
1725
|
+
right: /* @__PURE__ */ React38.createElement(import_icons14.SideRightIcon, { fontSize: "tiny" }),
|
|
1726
|
+
top: /* @__PURE__ */ React38.createElement(import_icons14.SideTopIcon, { fontSize: "tiny" }),
|
|
1727
|
+
bottom: /* @__PURE__ */ React38.createElement(import_icons14.SideBottomIcon, { fontSize: "tiny" })
|
|
1721
1728
|
};
|
|
1722
1729
|
var DimensionsField = () => {
|
|
1723
|
-
return /* @__PURE__ */
|
|
1730
|
+
return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(import_ui30.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(DimensionField, { side: "top", label: (0, import_i18n20.__)("Top", "elementor") }), /* @__PURE__ */ React38.createElement(DimensionField, { side: "right", label: (0, import_i18n20.__)("Right", "elementor") })), /* @__PURE__ */ React38.createElement(import_ui30.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(DimensionField, { side: "bottom", label: (0, import_i18n20.__)("Bottom", "elementor") }), /* @__PURE__ */ React38.createElement(DimensionField, { side: "left", label: (0, import_i18n20.__)("Left", "elementor") })));
|
|
1724
1731
|
};
|
|
1725
1732
|
var DimensionField = ({ side, label }) => {
|
|
1726
|
-
return /* @__PURE__ */
|
|
1733
|
+
return /* @__PURE__ */ React38.createElement(import_ui30.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(import_editor_controls23.ControlLabel, null, label)), /* @__PURE__ */ React38.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(StylesField, { bind: side }, /* @__PURE__ */ React38.createElement(import_editor_controls23.SizeControl, { startIcon: sideIcons[side] }))));
|
|
1727
1734
|
};
|
|
1728
1735
|
|
|
1729
1736
|
// src/components/style-sections/position-section/position-field.tsx
|
|
1730
|
-
var
|
|
1737
|
+
var React39 = __toESM(require("react"));
|
|
1731
1738
|
var import_editor_controls24 = require("@elementor/editor-controls");
|
|
1732
|
-
var
|
|
1739
|
+
var import_ui31 = require("@elementor/ui");
|
|
1733
1740
|
var import_i18n21 = require("@wordpress/i18n");
|
|
1734
1741
|
var positionOptions = [
|
|
1735
1742
|
{ label: (0, import_i18n21.__)("Static", "elementor"), value: "static" },
|
|
@@ -1739,16 +1746,16 @@ var positionOptions = [
|
|
|
1739
1746
|
{ label: (0, import_i18n21.__)("Sticky", "elementor"), value: "sticky" }
|
|
1740
1747
|
];
|
|
1741
1748
|
var PositionField = ({ onChange }) => {
|
|
1742
|
-
return /* @__PURE__ */
|
|
1749
|
+
return /* @__PURE__ */ React39.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React39.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(import_editor_controls24.ControlLabel, null, (0, import_i18n21.__)("Position", "elementor"))), /* @__PURE__ */ React39.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React39.createElement(import_editor_controls24.SelectControl, { options: positionOptions, onChange }))));
|
|
1743
1750
|
};
|
|
1744
1751
|
|
|
1745
1752
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
1746
|
-
var
|
|
1753
|
+
var React40 = __toESM(require("react"));
|
|
1747
1754
|
var import_editor_controls25 = require("@elementor/editor-controls");
|
|
1748
|
-
var
|
|
1755
|
+
var import_ui32 = require("@elementor/ui");
|
|
1749
1756
|
var import_i18n22 = require("@wordpress/i18n");
|
|
1750
1757
|
var ZIndexField = () => {
|
|
1751
|
-
return /* @__PURE__ */
|
|
1758
|
+
return /* @__PURE__ */ React40.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React40.createElement(import_ui32.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(import_editor_controls25.ControlLabel, null, (0, import_i18n22.__)("Z-Index", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(import_editor_controls25.NumberControl, null))));
|
|
1752
1759
|
};
|
|
1753
1760
|
|
|
1754
1761
|
// src/components/style-sections/position-section/position-section.tsx
|
|
@@ -1780,7 +1787,7 @@ var PositionSection = () => {
|
|
|
1780
1787
|
}
|
|
1781
1788
|
};
|
|
1782
1789
|
const isNotStatic = positionValue && positionValue?.value !== "static";
|
|
1783
|
-
return /* @__PURE__ */
|
|
1790
|
+
return /* @__PURE__ */ React41.createElement(import_ui33.Stack, { gap: 1.5 }, /* @__PURE__ */ React41.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(DimensionsField, null), /* @__PURE__ */ React41.createElement(ZIndexField, null)) : null);
|
|
1784
1791
|
};
|
|
1785
1792
|
var usePersistDimensions = () => {
|
|
1786
1793
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -1790,90 +1797,90 @@ var usePersistDimensions = () => {
|
|
|
1790
1797
|
};
|
|
1791
1798
|
|
|
1792
1799
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1793
|
-
var
|
|
1800
|
+
var React43 = __toESM(require("react"));
|
|
1794
1801
|
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
1795
|
-
var
|
|
1802
|
+
var import_ui35 = require("@elementor/ui");
|
|
1796
1803
|
var import_i18n24 = require("@wordpress/i18n");
|
|
1797
1804
|
|
|
1798
1805
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
1799
|
-
var
|
|
1806
|
+
var React42 = __toESM(require("react"));
|
|
1800
1807
|
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
1801
1808
|
var import_icons15 = require("@elementor/icons");
|
|
1802
|
-
var
|
|
1809
|
+
var import_ui34 = require("@elementor/ui");
|
|
1803
1810
|
var import_i18n23 = require("@wordpress/i18n");
|
|
1804
1811
|
var options6 = [
|
|
1805
1812
|
{
|
|
1806
1813
|
value: "visible",
|
|
1807
1814
|
label: (0, import_i18n23.__)("Visible", "elementor"),
|
|
1808
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1815
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons15.EyeIcon, { fontSize: size }),
|
|
1809
1816
|
showTooltip: true
|
|
1810
1817
|
},
|
|
1811
1818
|
{
|
|
1812
1819
|
value: "hidden",
|
|
1813
1820
|
label: (0, import_i18n23.__)("Hidden", "elementor"),
|
|
1814
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1821
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons15.EyeOffIcon, { fontSize: size }),
|
|
1815
1822
|
showTooltip: true
|
|
1816
1823
|
},
|
|
1817
1824
|
{
|
|
1818
1825
|
value: "auto",
|
|
1819
1826
|
label: (0, import_i18n23.__)("Auto", "elementor"),
|
|
1820
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1827
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons15.ExpandBottomIcon, { fontSize: size }),
|
|
1821
1828
|
showTooltip: true
|
|
1822
1829
|
}
|
|
1823
1830
|
];
|
|
1824
1831
|
var OverflowField = () => {
|
|
1825
|
-
return /* @__PURE__ */
|
|
1832
|
+
return /* @__PURE__ */ React42.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React42.createElement(import_ui34.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React42.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(import_editor_controls26.ControlLabel, null, (0, import_i18n23.__)("Overflow", "elementor"))), /* @__PURE__ */ React42.createElement(import_ui34.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React42.createElement(import_editor_controls26.ToggleControl, { options: options6 }))));
|
|
1826
1833
|
};
|
|
1827
1834
|
|
|
1828
1835
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1829
1836
|
var SizeSection = () => {
|
|
1830
|
-
return /* @__PURE__ */
|
|
1837
|
+
return /* @__PURE__ */ React43.createElement(import_ui35.Stack, { gap: 1.5 }, /* @__PURE__ */ React43.createElement(import_ui35.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "width", label: (0, import_i18n24.__)("Width", "elementor") })), /* @__PURE__ */ React43.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "height", label: (0, import_i18n24.__)("Height", "elementor") }))), /* @__PURE__ */ React43.createElement(import_ui35.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "min-width", label: (0, import_i18n24.__)("Min. width", "elementor") })), /* @__PURE__ */ React43.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "min-height", label: (0, import_i18n24.__)("Min. height", "elementor") }))), /* @__PURE__ */ React43.createElement(import_ui35.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "max-width", label: (0, import_i18n24.__)("Max. width", "elementor") })), /* @__PURE__ */ React43.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "max-height", label: (0, import_i18n24.__)("Max. height", "elementor") }))), /* @__PURE__ */ React43.createElement(PanelDivider, null), /* @__PURE__ */ React43.createElement(import_ui35.Stack, null, /* @__PURE__ */ React43.createElement(OverflowField, null)));
|
|
1831
1838
|
};
|
|
1832
1839
|
var SizeField = ({ label, bind }) => {
|
|
1833
|
-
return /* @__PURE__ */
|
|
1840
|
+
return /* @__PURE__ */ React43.createElement(StylesField, { bind }, /* @__PURE__ */ React43.createElement(import_ui35.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React43.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(import_editor_controls27.ControlLabel, null, label)), /* @__PURE__ */ React43.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(import_editor_controls27.SizeControl, null))));
|
|
1834
1841
|
};
|
|
1835
1842
|
|
|
1836
1843
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
1837
|
-
var
|
|
1844
|
+
var React44 = __toESM(require("react"));
|
|
1838
1845
|
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
1839
|
-
var
|
|
1846
|
+
var import_ui36 = require("@elementor/ui");
|
|
1840
1847
|
var import_i18n25 = require("@wordpress/i18n");
|
|
1841
1848
|
var SpacingSection = () => {
|
|
1842
|
-
return /* @__PURE__ */
|
|
1849
|
+
return /* @__PURE__ */ React44.createElement(import_ui36.Stack, { gap: 1.5 }, /* @__PURE__ */ React44.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React44.createElement(import_editor_controls28.LinkedDimensionsControl, { label: (0, import_i18n25.__)("Padding", "elementor") })), /* @__PURE__ */ React44.createElement(PanelDivider, null), /* @__PURE__ */ React44.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React44.createElement(import_editor_controls28.LinkedDimensionsControl, { label: (0, import_i18n25.__)("Margin", "elementor") })));
|
|
1843
1850
|
};
|
|
1844
1851
|
|
|
1845
1852
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
1846
|
-
var
|
|
1847
|
-
var
|
|
1853
|
+
var React59 = __toESM(require("react"));
|
|
1854
|
+
var import_ui50 = require("@elementor/ui");
|
|
1848
1855
|
|
|
1849
1856
|
// src/components/collapsible-content.tsx
|
|
1850
|
-
var
|
|
1857
|
+
var React45 = __toESM(require("react"));
|
|
1851
1858
|
var import_react12 = require("react");
|
|
1852
|
-
var
|
|
1859
|
+
var import_ui37 = require("@elementor/ui");
|
|
1853
1860
|
var import_i18n26 = require("@wordpress/i18n");
|
|
1854
1861
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
1855
1862
|
const [open, setOpen] = (0, import_react12.useState)(defaultOpen);
|
|
1856
1863
|
const handleToggle = () => {
|
|
1857
1864
|
setOpen((prevOpen) => !prevOpen);
|
|
1858
1865
|
};
|
|
1859
|
-
return /* @__PURE__ */
|
|
1860
|
-
|
|
1866
|
+
return /* @__PURE__ */ React45.createElement(import_ui37.Stack, { sx: { py: 0.5 } }, /* @__PURE__ */ React45.createElement(
|
|
1867
|
+
import_ui37.Button,
|
|
1861
1868
|
{
|
|
1862
1869
|
fullWidth: true,
|
|
1863
1870
|
size: "small",
|
|
1864
1871
|
color: "secondary",
|
|
1865
1872
|
variant: "outlined",
|
|
1866
1873
|
onClick: handleToggle,
|
|
1867
|
-
endIcon: /* @__PURE__ */
|
|
1874
|
+
endIcon: /* @__PURE__ */ React45.createElement(CollapseIcon, { open })
|
|
1868
1875
|
},
|
|
1869
1876
|
open ? (0, import_i18n26.__)("Show less", "elementor") : (0, import_i18n26.__)("Show more", "elementor")
|
|
1870
|
-
), /* @__PURE__ */
|
|
1877
|
+
), /* @__PURE__ */ React45.createElement(import_ui37.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
1871
1878
|
};
|
|
1872
1879
|
|
|
1873
1880
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
1874
|
-
var
|
|
1881
|
+
var React46 = __toESM(require("react"));
|
|
1875
1882
|
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
1876
|
-
var
|
|
1883
|
+
var import_ui38 = require("@elementor/ui");
|
|
1877
1884
|
var import_i18n27 = require("@wordpress/i18n");
|
|
1878
1885
|
|
|
1879
1886
|
// src/sync/get-elementor-config.ts
|
|
@@ -1888,194 +1895,143 @@ var FontFamilyField = () => {
|
|
|
1888
1895
|
if (!fontFamilies) {
|
|
1889
1896
|
return null;
|
|
1890
1897
|
}
|
|
1891
|
-
return /* @__PURE__ */
|
|
1898
|
+
return /* @__PURE__ */ React46.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(import_editor_controls29.ControlLabel, null, (0, import_i18n27.__)("Font family", "elementor"))), /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React46.createElement(import_editor_controls29.FontFamilyControl, { fontFamilies }))));
|
|
1892
1899
|
};
|
|
1893
1900
|
var getFontFamilies = () => {
|
|
1894
1901
|
const { controls } = getElementorConfig();
|
|
1895
|
-
const
|
|
1896
|
-
if (!
|
|
1902
|
+
const options11 = controls?.font?.options;
|
|
1903
|
+
if (!options11) {
|
|
1897
1904
|
return null;
|
|
1898
1905
|
}
|
|
1899
|
-
return
|
|
1906
|
+
return options11;
|
|
1900
1907
|
};
|
|
1901
1908
|
|
|
1902
1909
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
1903
|
-
var
|
|
1910
|
+
var React47 = __toESM(require("react"));
|
|
1904
1911
|
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
1905
|
-
var
|
|
1912
|
+
var import_ui39 = require("@elementor/ui");
|
|
1906
1913
|
var import_i18n28 = require("@wordpress/i18n");
|
|
1907
1914
|
var FontSizeField = () => {
|
|
1908
|
-
return /* @__PURE__ */
|
|
1915
|
+
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React47.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(import_editor_controls30.ControlLabel, null, (0, import_i18n28.__)("Font size", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(import_editor_controls30.SizeControl, null))));
|
|
1909
1916
|
};
|
|
1910
1917
|
|
|
1911
|
-
// src/components/style-sections/typography-section/font-
|
|
1912
|
-
var
|
|
1918
|
+
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
1919
|
+
var React48 = __toESM(require("react"));
|
|
1913
1920
|
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
1914
|
-
var
|
|
1921
|
+
var import_icons16 = require("@elementor/icons");
|
|
1922
|
+
var import_ui40 = require("@elementor/ui");
|
|
1915
1923
|
var import_i18n29 = require("@wordpress/i18n");
|
|
1924
|
+
var options7 = [
|
|
1925
|
+
{
|
|
1926
|
+
value: "normal",
|
|
1927
|
+
label: (0, import_i18n29.__)("Normal", "elementor"),
|
|
1928
|
+
renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons16.MinusIcon, { fontSize: size }),
|
|
1929
|
+
showTooltip: true
|
|
1930
|
+
},
|
|
1931
|
+
{
|
|
1932
|
+
value: "italic",
|
|
1933
|
+
label: (0, import_i18n29.__)("Italic", "elementor"),
|
|
1934
|
+
renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons16.ItalicIcon, { fontSize: size }),
|
|
1935
|
+
showTooltip: true
|
|
1936
|
+
}
|
|
1937
|
+
];
|
|
1938
|
+
var FontStyleField = () => /* @__PURE__ */ React48.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React48.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(import_editor_controls31.ControlLabel, null, (0, import_i18n29.__)("Font Style", "elementor"))), /* @__PURE__ */ React48.createElement(import_ui40.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React48.createElement(import_editor_controls31.ToggleControl, { options: options7 }))));
|
|
1939
|
+
|
|
1940
|
+
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
1941
|
+
var React49 = __toESM(require("react"));
|
|
1942
|
+
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
1943
|
+
var import_ui41 = require("@elementor/ui");
|
|
1944
|
+
var import_i18n30 = require("@wordpress/i18n");
|
|
1916
1945
|
var fontWeightOptions = [
|
|
1917
|
-
{ value: "100", label: (0,
|
|
1918
|
-
{ value: "200", label: (0,
|
|
1919
|
-
{ value: "300", label: (0,
|
|
1920
|
-
{ value: "400", label: (0,
|
|
1921
|
-
{ value: "500", label: (0,
|
|
1922
|
-
{ value: "600", label: (0,
|
|
1923
|
-
{ value: "700", label: (0,
|
|
1924
|
-
{ value: "800", label: (0,
|
|
1925
|
-
{ value: "900", label: (0,
|
|
1946
|
+
{ value: "100", label: (0, import_i18n30.__)("100 - Thin", "elementor") },
|
|
1947
|
+
{ value: "200", label: (0, import_i18n30.__)("200 - Extra Light", "elementor") },
|
|
1948
|
+
{ value: "300", label: (0, import_i18n30.__)("300 - Light", "elementor") },
|
|
1949
|
+
{ value: "400", label: (0, import_i18n30.__)("400 - Normal", "elementor") },
|
|
1950
|
+
{ value: "500", label: (0, import_i18n30.__)("500 - Medium", "elementor") },
|
|
1951
|
+
{ value: "600", label: (0, import_i18n30.__)("600 - Semi Bold", "elementor") },
|
|
1952
|
+
{ value: "700", label: (0, import_i18n30.__)("700 - Bold", "elementor") },
|
|
1953
|
+
{ value: "800", label: (0, import_i18n30.__)("800 - Extra Bold", "elementor") },
|
|
1954
|
+
{ value: "900", label: (0, import_i18n30.__)("900 - Black", "elementor") }
|
|
1926
1955
|
];
|
|
1927
1956
|
var FontWeightField = () => {
|
|
1928
|
-
return /* @__PURE__ */
|
|
1957
|
+
return /* @__PURE__ */ React49.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React49.createElement(import_ui41.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(import_editor_controls32.ControlLabel, null, (0, import_i18n30.__)("Font weight", "elementor"))), /* @__PURE__ */ React49.createElement(import_ui41.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React49.createElement(import_editor_controls32.SelectControl, { options: fontWeightOptions }))));
|
|
1929
1958
|
};
|
|
1930
1959
|
|
|
1931
1960
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
1932
|
-
var
|
|
1933
|
-
var
|
|
1934
|
-
var
|
|
1935
|
-
var
|
|
1961
|
+
var React50 = __toESM(require("react"));
|
|
1962
|
+
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
1963
|
+
var import_ui42 = require("@elementor/ui");
|
|
1964
|
+
var import_i18n31 = require("@wordpress/i18n");
|
|
1936
1965
|
var LetterSpacingField = () => {
|
|
1937
|
-
return /* @__PURE__ */
|
|
1966
|
+
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React50.createElement(import_ui42.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React50.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(import_editor_controls33.ControlLabel, null, (0, import_i18n31.__)("Letter spacing", "elementor"))), /* @__PURE__ */ React50.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(import_editor_controls33.SizeControl, null))));
|
|
1938
1967
|
};
|
|
1939
1968
|
|
|
1940
1969
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
1941
|
-
var
|
|
1942
|
-
var
|
|
1943
|
-
var
|
|
1944
|
-
var
|
|
1970
|
+
var React51 = __toESM(require("react"));
|
|
1971
|
+
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
1972
|
+
var import_ui43 = require("@elementor/ui");
|
|
1973
|
+
var import_i18n32 = require("@wordpress/i18n");
|
|
1945
1974
|
var LineHeightField = () => {
|
|
1946
|
-
return /* @__PURE__ */
|
|
1975
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls34.ControlLabel, null, (0, import_i18n32.__)("Line height", "elementor"))), /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls34.SizeControl, null))));
|
|
1947
1976
|
};
|
|
1948
1977
|
|
|
1949
1978
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
1950
|
-
var
|
|
1951
|
-
var
|
|
1952
|
-
var
|
|
1953
|
-
var
|
|
1954
|
-
var
|
|
1955
|
-
var StartIcon4 = (0,
|
|
1956
|
-
var EndIcon4 = (0,
|
|
1957
|
-
var
|
|
1979
|
+
var React52 = __toESM(require("react"));
|
|
1980
|
+
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
1981
|
+
var import_icons17 = require("@elementor/icons");
|
|
1982
|
+
var import_ui44 = require("@elementor/ui");
|
|
1983
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
1984
|
+
var StartIcon4 = (0, import_ui44.withDirection)(import_icons17.AlignLeftIcon);
|
|
1985
|
+
var EndIcon4 = (0, import_ui44.withDirection)(import_icons17.AlignRightIcon);
|
|
1986
|
+
var options8 = [
|
|
1958
1987
|
{
|
|
1959
1988
|
value: "start",
|
|
1960
|
-
label: (0,
|
|
1961
|
-
renderContent: () => /* @__PURE__ */
|
|
1989
|
+
label: (0, import_i18n33.__)("Start", "elementor"),
|
|
1990
|
+
renderContent: () => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: StartIcon4, size: "tiny" }),
|
|
1962
1991
|
showTooltip: true
|
|
1963
1992
|
},
|
|
1964
1993
|
{
|
|
1965
1994
|
value: "center",
|
|
1966
|
-
label: (0,
|
|
1967
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1995
|
+
label: (0, import_i18n33.__)("Center", "elementor"),
|
|
1996
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(import_icons17.AlignCenterIcon, { fontSize: size }),
|
|
1968
1997
|
showTooltip: true
|
|
1969
1998
|
},
|
|
1970
1999
|
{
|
|
1971
2000
|
value: "end",
|
|
1972
|
-
label: (0,
|
|
1973
|
-
renderContent: () => /* @__PURE__ */
|
|
2001
|
+
label: (0, import_i18n33.__)("End", "elementor"),
|
|
2002
|
+
renderContent: () => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: EndIcon4, size: "tiny" }),
|
|
1974
2003
|
showTooltip: true
|
|
1975
2004
|
},
|
|
1976
2005
|
{
|
|
1977
2006
|
value: "justify",
|
|
1978
|
-
label: (0,
|
|
1979
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2007
|
+
label: (0, import_i18n33.__)("Justify", "elementor"),
|
|
2008
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(import_icons17.AlignJustifiedIcon, { fontSize: size }),
|
|
1980
2009
|
showTooltip: true
|
|
1981
2010
|
}
|
|
1982
2011
|
];
|
|
1983
2012
|
var TextAlignmentField = () => {
|
|
1984
|
-
return /* @__PURE__ */
|
|
2013
|
+
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls35.ControlLabel, null, (0, import_i18n33.__)("Alignment", "elementor"))), /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React52.createElement(import_editor_controls35.ToggleControl, { options: options8 }))));
|
|
1985
2014
|
};
|
|
1986
2015
|
|
|
1987
2016
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
1988
|
-
var
|
|
1989
|
-
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
1990
|
-
var import_ui42 = require("@elementor/ui");
|
|
1991
|
-
var import_i18n33 = require("@wordpress/i18n");
|
|
1992
|
-
var TextColorField = () => {
|
|
1993
|
-
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls35.ControlLabel, null, (0, import_i18n33.__)("Text Color", "elementor"))), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls35.ColorControl, null))));
|
|
1994
|
-
};
|
|
1995
|
-
|
|
1996
|
-
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
1997
|
-
var React52 = __toESM(require("react"));
|
|
2017
|
+
var React53 = __toESM(require("react"));
|
|
1998
2018
|
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
1999
|
-
var
|
|
2000
|
-
var import_ui43 = require("@elementor/ui");
|
|
2019
|
+
var import_ui45 = require("@elementor/ui");
|
|
2001
2020
|
var import_i18n34 = require("@wordpress/i18n");
|
|
2002
|
-
var
|
|
2003
|
-
{
|
|
2004
|
-
value: "ltr",
|
|
2005
|
-
label: (0, import_i18n34.__)("Left to Right", "elementor"),
|
|
2006
|
-
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(import_icons17.TextDirectionLtrIcon, { fontSize: size })
|
|
2007
|
-
},
|
|
2008
|
-
{
|
|
2009
|
-
value: "rtl",
|
|
2010
|
-
label: (0, import_i18n34.__)("Right to Left", "elementor"),
|
|
2011
|
-
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(import_icons17.TextDirectionRtlIcon, { fontSize: size })
|
|
2012
|
-
}
|
|
2013
|
-
];
|
|
2014
|
-
var TextDirectionField = () => {
|
|
2015
|
-
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React52.createElement(import_ui43.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls36.ControlLabel, null, (0, import_i18n34.__)("Direction", "elementor"))), /* @__PURE__ */ React52.createElement(import_ui43.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React52.createElement(import_editor_controls36.ToggleControl, { options: options8 }))));
|
|
2016
|
-
};
|
|
2017
|
-
|
|
2018
|
-
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
2019
|
-
var React53 = __toESM(require("react"));
|
|
2020
|
-
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
2021
|
-
var import_i18n35 = require("@wordpress/i18n");
|
|
2022
|
-
var initTextStroke = {
|
|
2023
|
-
$$type: "stroke",
|
|
2024
|
-
value: {
|
|
2025
|
-
color: {
|
|
2026
|
-
$$type: "color",
|
|
2027
|
-
value: "#000000"
|
|
2028
|
-
},
|
|
2029
|
-
width: {
|
|
2030
|
-
$$type: "size",
|
|
2031
|
-
value: {
|
|
2032
|
-
unit: "px",
|
|
2033
|
-
size: 1
|
|
2034
|
-
}
|
|
2035
|
-
}
|
|
2036
|
-
}
|
|
2037
|
-
};
|
|
2038
|
-
var TextStrokeField = () => {
|
|
2039
|
-
const [textStroke, setTextStroke] = useStylesField("-webkit-text-stroke");
|
|
2040
|
-
const addTextStroke = () => {
|
|
2041
|
-
setTextStroke(initTextStroke);
|
|
2042
|
-
};
|
|
2043
|
-
const removeTextStroke = () => {
|
|
2044
|
-
setTextStroke(null);
|
|
2045
|
-
};
|
|
2046
|
-
const hasTextStroke = Boolean(textStroke);
|
|
2047
|
-
return /* @__PURE__ */ React53.createElement(
|
|
2048
|
-
AddOrRemoveContent,
|
|
2049
|
-
{
|
|
2050
|
-
label: (0, import_i18n35.__)("Text Stroke", "elementor"),
|
|
2051
|
-
isAdded: hasTextStroke,
|
|
2052
|
-
onAdd: addTextStroke,
|
|
2053
|
-
onRemove: removeTextStroke
|
|
2054
|
-
},
|
|
2055
|
-
/* @__PURE__ */ React53.createElement(StylesField, { bind: "-webkit-text-stroke" }, /* @__PURE__ */ React53.createElement(import_editor_controls37.StrokeControl, null))
|
|
2056
|
-
);
|
|
2021
|
+
var TextColorField = () => {
|
|
2022
|
+
return /* @__PURE__ */ React53.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React53.createElement(import_ui45.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(import_editor_controls36.ControlLabel, null, (0, import_i18n34.__)("Text color", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(import_editor_controls36.ColorControl, null))));
|
|
2057
2023
|
};
|
|
2058
2024
|
|
|
2059
|
-
// src/components/style-sections/typography-section/text-
|
|
2025
|
+
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
2060
2026
|
var React54 = __toESM(require("react"));
|
|
2061
|
-
var
|
|
2027
|
+
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
2062
2028
|
var import_icons18 = require("@elementor/icons");
|
|
2063
|
-
var
|
|
2064
|
-
var
|
|
2029
|
+
var import_ui46 = require("@elementor/ui");
|
|
2030
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
2065
2031
|
var buttonSize = "tiny";
|
|
2066
|
-
var
|
|
2067
|
-
const [fontStyle, setFontStyle] = useStylesField("font-style");
|
|
2032
|
+
var TextDecorationField = () => {
|
|
2068
2033
|
const [textDecoration, setTextDecoration] = useStylesField("text-decoration");
|
|
2069
|
-
const formats = [
|
|
2070
|
-
const handleSetFontStyle = (newValue) => {
|
|
2071
|
-
if (newValue === null) {
|
|
2072
|
-
return setFontStyle(null);
|
|
2073
|
-
}
|
|
2074
|
-
setFontStyle({
|
|
2075
|
-
$$type: "string",
|
|
2076
|
-
value: newValue
|
|
2077
|
-
});
|
|
2078
|
-
};
|
|
2034
|
+
const formats = [...(textDecoration?.value || "").split(" ")];
|
|
2079
2035
|
const handleSetTextDecoration = (newValue) => {
|
|
2080
2036
|
if (newValue === null) {
|
|
2081
2037
|
return setTextDecoration(null);
|
|
@@ -2085,16 +2041,7 @@ var TextStyleField = () => {
|
|
|
2085
2041
|
value: newValue
|
|
2086
2042
|
});
|
|
2087
2043
|
};
|
|
2088
|
-
return /* @__PURE__ */ React54.createElement(
|
|
2089
|
-
ToggleButton,
|
|
2090
|
-
{
|
|
2091
|
-
value: "italic",
|
|
2092
|
-
onChange: (v) => handleSetFontStyle(fontStyle?.value === v ? null : v),
|
|
2093
|
-
"aria-label": "italic",
|
|
2094
|
-
sx: { marginLeft: "auto" }
|
|
2095
|
-
},
|
|
2096
|
-
/* @__PURE__ */ React54.createElement(import_icons18.ItalicIcon, { fontSize: buttonSize })
|
|
2097
|
-
), /* @__PURE__ */ React54.createElement(
|
|
2044
|
+
return /* @__PURE__ */ React54.createElement(import_ui46.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(import_editor_controls37.ControlLabel, null, (0, import_i18n35.__)("Style", "elementor"))), /* @__PURE__ */ React54.createElement(import_ui46.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React54.createElement(import_ui46.ToggleButtonGroup, { value: formats }, /* @__PURE__ */ React54.createElement(
|
|
2098
2045
|
ShorthandControl,
|
|
2099
2046
|
{
|
|
2100
2047
|
value: "line-through",
|
|
@@ -2136,55 +2083,118 @@ var ToggleButton = ({ onChange, ...props }) => {
|
|
|
2136
2083
|
const handleChange = (_e, newValue) => {
|
|
2137
2084
|
onChange(newValue);
|
|
2138
2085
|
};
|
|
2139
|
-
return /* @__PURE__ */ React54.createElement(
|
|
2086
|
+
return /* @__PURE__ */ React54.createElement(import_ui46.ToggleButton, { ...props, onChange: handleChange, size: buttonSize });
|
|
2140
2087
|
};
|
|
2141
2088
|
|
|
2142
|
-
// src/components/style-sections/typography-section/
|
|
2089
|
+
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
2143
2090
|
var React55 = __toESM(require("react"));
|
|
2144
|
-
var
|
|
2091
|
+
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
2145
2092
|
var import_icons19 = require("@elementor/icons");
|
|
2146
|
-
var
|
|
2147
|
-
var
|
|
2093
|
+
var import_ui47 = require("@elementor/ui");
|
|
2094
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
2148
2095
|
var options9 = [
|
|
2096
|
+
{
|
|
2097
|
+
value: "ltr",
|
|
2098
|
+
label: (0, import_i18n36.__)("Left to Right", "elementor"),
|
|
2099
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(import_icons19.TextDirectionLtrIcon, { fontSize: size })
|
|
2100
|
+
},
|
|
2101
|
+
{
|
|
2102
|
+
value: "rtl",
|
|
2103
|
+
label: (0, import_i18n36.__)("Right to Left", "elementor"),
|
|
2104
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(import_icons19.TextDirectionRtlIcon, { fontSize: size })
|
|
2105
|
+
}
|
|
2106
|
+
];
|
|
2107
|
+
var TextDirectionField = () => {
|
|
2108
|
+
return /* @__PURE__ */ React55.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React55.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(import_editor_controls38.ControlLabel, null, (0, import_i18n36.__)("Direction", "elementor"))), /* @__PURE__ */ React55.createElement(import_ui47.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React55.createElement(import_editor_controls38.ToggleControl, { options: options9 }))));
|
|
2109
|
+
};
|
|
2110
|
+
|
|
2111
|
+
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
2112
|
+
var React56 = __toESM(require("react"));
|
|
2113
|
+
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
2114
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
2115
|
+
var initTextStroke = {
|
|
2116
|
+
$$type: "stroke",
|
|
2117
|
+
value: {
|
|
2118
|
+
color: {
|
|
2119
|
+
$$type: "color",
|
|
2120
|
+
value: "#000000"
|
|
2121
|
+
},
|
|
2122
|
+
width: {
|
|
2123
|
+
$$type: "size",
|
|
2124
|
+
value: {
|
|
2125
|
+
unit: "px",
|
|
2126
|
+
size: 1
|
|
2127
|
+
}
|
|
2128
|
+
}
|
|
2129
|
+
}
|
|
2130
|
+
};
|
|
2131
|
+
var TextStrokeField = () => {
|
|
2132
|
+
const [textStroke, setTextStroke] = useStylesField("stroke");
|
|
2133
|
+
const addTextStroke = () => {
|
|
2134
|
+
setTextStroke(initTextStroke);
|
|
2135
|
+
};
|
|
2136
|
+
const removeTextStroke = () => {
|
|
2137
|
+
setTextStroke(null);
|
|
2138
|
+
};
|
|
2139
|
+
const hasTextStroke = Boolean(textStroke);
|
|
2140
|
+
return /* @__PURE__ */ React56.createElement(
|
|
2141
|
+
AddOrRemoveContent,
|
|
2142
|
+
{
|
|
2143
|
+
label: (0, import_i18n37.__)("Text stroke", "elementor"),
|
|
2144
|
+
isAdded: hasTextStroke,
|
|
2145
|
+
onAdd: addTextStroke,
|
|
2146
|
+
onRemove: removeTextStroke
|
|
2147
|
+
},
|
|
2148
|
+
/* @__PURE__ */ React56.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React56.createElement(import_editor_controls39.StrokeControl, null))
|
|
2149
|
+
);
|
|
2150
|
+
};
|
|
2151
|
+
|
|
2152
|
+
// src/components/style-sections/typography-section/transform-field.tsx
|
|
2153
|
+
var React57 = __toESM(require("react"));
|
|
2154
|
+
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
2155
|
+
var import_icons20 = require("@elementor/icons");
|
|
2156
|
+
var import_ui48 = require("@elementor/ui");
|
|
2157
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
2158
|
+
var options10 = [
|
|
2149
2159
|
{
|
|
2150
2160
|
value: "none",
|
|
2151
|
-
label: (0,
|
|
2152
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2161
|
+
label: (0, import_i18n38.__)("None", "elementor"),
|
|
2162
|
+
renderContent: ({ size }) => /* @__PURE__ */ React57.createElement(import_icons20.MinusIcon, { fontSize: size }),
|
|
2153
2163
|
showTooltip: true
|
|
2154
2164
|
},
|
|
2155
2165
|
{
|
|
2156
2166
|
value: "capitalize",
|
|
2157
|
-
label: (0,
|
|
2158
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2167
|
+
label: (0, import_i18n38.__)("Capitalize", "elementor"),
|
|
2168
|
+
renderContent: ({ size }) => /* @__PURE__ */ React57.createElement(import_icons20.LetterCaseIcon, { fontSize: size }),
|
|
2159
2169
|
showTooltip: true
|
|
2160
2170
|
},
|
|
2161
2171
|
{
|
|
2162
2172
|
value: "uppercase",
|
|
2163
|
-
label: (0,
|
|
2164
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2173
|
+
label: (0, import_i18n38.__)("Uppercase", "elementor"),
|
|
2174
|
+
renderContent: ({ size }) => /* @__PURE__ */ React57.createElement(import_icons20.LetterCaseUpperIcon, { fontSize: size }),
|
|
2165
2175
|
showTooltip: true
|
|
2166
2176
|
},
|
|
2167
2177
|
{
|
|
2168
2178
|
value: "lowercase",
|
|
2169
|
-
label: (0,
|
|
2170
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2179
|
+
label: (0, import_i18n38.__)("Lowercase", "elementor"),
|
|
2180
|
+
renderContent: ({ size }) => /* @__PURE__ */ React57.createElement(import_icons20.LetterCaseLowerIcon, { fontSize: size }),
|
|
2171
2181
|
showTooltip: true
|
|
2172
2182
|
}
|
|
2173
2183
|
];
|
|
2174
|
-
var TransformField = () => /* @__PURE__ */
|
|
2184
|
+
var TransformField = () => /* @__PURE__ */ React57.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React57.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(import_editor_controls40.ControlLabel, null, (0, import_i18n38.__)("Text transform", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui48.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React57.createElement(import_editor_controls40.ToggleControl, { options: options10 }))));
|
|
2175
2185
|
|
|
2176
2186
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
2177
|
-
var
|
|
2178
|
-
var
|
|
2179
|
-
var
|
|
2180
|
-
var
|
|
2187
|
+
var React58 = __toESM(require("react"));
|
|
2188
|
+
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
2189
|
+
var import_ui49 = require("@elementor/ui");
|
|
2190
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
2181
2191
|
var WordSpacingField = () => {
|
|
2182
|
-
return /* @__PURE__ */
|
|
2192
|
+
return /* @__PURE__ */ React58.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React58.createElement(import_ui49.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(import_editor_controls41.ControlLabel, null, (0, import_i18n39.__)("Word spacing", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(import_editor_controls41.SizeControl, null))));
|
|
2183
2193
|
};
|
|
2184
2194
|
|
|
2185
2195
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
2186
2196
|
var TypographySection = () => {
|
|
2187
|
-
return /* @__PURE__ */
|
|
2197
|
+
return /* @__PURE__ */ React59.createElement(import_ui50.Stack, { gap: 1.5 }, /* @__PURE__ */ React59.createElement(FontFamilyField, null), /* @__PURE__ */ React59.createElement(FontWeightField, null), /* @__PURE__ */ React59.createElement(FontSizeField, null), /* @__PURE__ */ React59.createElement(PanelDivider, null), /* @__PURE__ */ React59.createElement(TextAlignmentField, null), /* @__PURE__ */ React59.createElement(TextColorField, null), /* @__PURE__ */ React59.createElement(CollapsibleContent, null, /* @__PURE__ */ React59.createElement(import_ui50.Stack, { gap: 1.5, sx: { pt: 1.5 } }, /* @__PURE__ */ React59.createElement(LineHeightField, null), /* @__PURE__ */ React59.createElement(LetterSpacingField, null), /* @__PURE__ */ React59.createElement(WordSpacingField, null), /* @__PURE__ */ React59.createElement(PanelDivider, null), /* @__PURE__ */ React59.createElement(TextDecorationField, null), /* @__PURE__ */ React59.createElement(TransformField, null), /* @__PURE__ */ React59.createElement(TextDirectionField, null), /* @__PURE__ */ React59.createElement(FontStyleField, null), /* @__PURE__ */ React59.createElement(TextStrokeField, null))));
|
|
2188
2198
|
};
|
|
2189
2199
|
|
|
2190
2200
|
// src/components/style-tab.tsx
|
|
@@ -2194,7 +2204,7 @@ var StyleTab = () => {
|
|
|
2194
2204
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
2195
2205
|
const [activeStyleState, setActiveStyleState] = (0, import_react13.useState)(null);
|
|
2196
2206
|
const breakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
|
|
2197
|
-
return /* @__PURE__ */
|
|
2207
|
+
return /* @__PURE__ */ React60.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React60.createElement(
|
|
2198
2208
|
StyleProvider,
|
|
2199
2209
|
{
|
|
2200
2210
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -2205,7 +2215,7 @@ var StyleTab = () => {
|
|
|
2205
2215
|
},
|
|
2206
2216
|
setMetaState: setActiveStyleState
|
|
2207
2217
|
},
|
|
2208
|
-
/* @__PURE__ */
|
|
2218
|
+
/* @__PURE__ */ React60.createElement(import_session3.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React60.createElement(CssClassSelector, null), /* @__PURE__ */ React60.createElement(import_ui51.Divider, null), /* @__PURE__ */ React60.createElement(SectionsList, null, /* @__PURE__ */ React60.createElement(Section, { title: (0, import_i18n40.__)("Layout", "elementor") }, /* @__PURE__ */ React60.createElement(LayoutSection, null)), /* @__PURE__ */ React60.createElement(Section, { title: (0, import_i18n40.__)("Spacing", "elementor") }, /* @__PURE__ */ React60.createElement(SpacingSection, null)), /* @__PURE__ */ React60.createElement(Section, { title: (0, import_i18n40.__)("Size", "elementor") }, /* @__PURE__ */ React60.createElement(SizeSection, null)), /* @__PURE__ */ React60.createElement(Section, { title: (0, import_i18n40.__)("Position", "elementor") }, /* @__PURE__ */ React60.createElement(PositionSection, null)), /* @__PURE__ */ React60.createElement(Section, { title: (0, import_i18n40.__)("Typography", "elementor") }, /* @__PURE__ */ React60.createElement(TypographySection, null)), /* @__PURE__ */ React60.createElement(Section, { title: (0, import_i18n40.__)("Background", "elementor") }, /* @__PURE__ */ React60.createElement(BackgroundSection, null)), /* @__PURE__ */ React60.createElement(Section, { title: (0, import_i18n40.__)("Border", "elementor") }, /* @__PURE__ */ React60.createElement(BorderSection, null)), /* @__PURE__ */ React60.createElement(Section, { title: (0, import_i18n40.__)("Effects", "elementor") }, /* @__PURE__ */ React60.createElement(EffectsSection, null))))
|
|
2209
2219
|
));
|
|
2210
2220
|
};
|
|
2211
2221
|
function useActiveStyleDefId(currentClassesProp) {
|
|
@@ -2233,11 +2243,11 @@ function useCurrentClassesProp() {
|
|
|
2233
2243
|
// src/components/editing-panel-tabs.tsx
|
|
2234
2244
|
var EditingPanelTabs = () => {
|
|
2235
2245
|
const { element } = useElement();
|
|
2236
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
2246
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui52.useTabs)("settings");
|
|
2237
2247
|
return (
|
|
2238
2248
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
2239
2249
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
2240
|
-
/* @__PURE__ */
|
|
2250
|
+
/* @__PURE__ */ React61.createElement(import_react14.Fragment, { key: element.id }, /* @__PURE__ */ React61.createElement(import_ui52.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React61.createElement(import_ui52.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React61.createElement(import_ui52.Tab, { label: (0, import_i18n41.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React61.createElement(import_ui52.Tab, { label: (0, import_i18n41.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React61.createElement(import_ui52.Divider, null), /* @__PURE__ */ React61.createElement(import_ui52.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React61.createElement(SettingsTab, null)), /* @__PURE__ */ React61.createElement(import_ui52.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React61.createElement(StyleTab, null))))
|
|
2241
2251
|
);
|
|
2242
2252
|
};
|
|
2243
2253
|
|
|
@@ -2250,8 +2260,8 @@ var EditingPanel = () => {
|
|
|
2250
2260
|
if (!element || !elementType) {
|
|
2251
2261
|
return null;
|
|
2252
2262
|
}
|
|
2253
|
-
const panelTitle = (0,
|
|
2254
|
-
return /* @__PURE__ */
|
|
2263
|
+
const panelTitle = (0, import_i18n42.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
2264
|
+
return /* @__PURE__ */ React62.createElement(import_ui53.ErrorBoundary, { fallback: /* @__PURE__ */ React62.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React62.createElement(import_session4.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React62.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React62.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React62.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React62.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React62.createElement(import_editor_controls42.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React62.createElement(import_editor_controls42.ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React62.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React62.createElement(EditingPanelTabs, null))))))));
|
|
2255
2265
|
};
|
|
2256
2266
|
|
|
2257
2267
|
// src/panel.ts
|
|
@@ -2318,12 +2328,12 @@ var EditingPanelHooks = () => {
|
|
|
2318
2328
|
};
|
|
2319
2329
|
|
|
2320
2330
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
2321
|
-
var
|
|
2331
|
+
var React65 = __toESM(require("react"));
|
|
2322
2332
|
var import_react20 = require("react");
|
|
2323
|
-
var
|
|
2324
|
-
var
|
|
2325
|
-
var
|
|
2326
|
-
var
|
|
2333
|
+
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
2334
|
+
var import_icons22 = require("@elementor/icons");
|
|
2335
|
+
var import_ui55 = require("@elementor/ui");
|
|
2336
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
2327
2337
|
|
|
2328
2338
|
// src/hooks/use-persist-dynamic-value.ts
|
|
2329
2339
|
var import_session5 = require("@elementor/session");
|
|
@@ -2334,15 +2344,15 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
2334
2344
|
};
|
|
2335
2345
|
|
|
2336
2346
|
// src/dynamics/dynamic-control.tsx
|
|
2337
|
-
var
|
|
2338
|
-
var
|
|
2347
|
+
var React63 = __toESM(require("react"));
|
|
2348
|
+
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
2339
2349
|
|
|
2340
2350
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
2341
2351
|
var import_react18 = require("react");
|
|
2342
2352
|
|
|
2343
2353
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
2344
2354
|
var import_react17 = require("react");
|
|
2345
|
-
var
|
|
2355
|
+
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
2346
2356
|
|
|
2347
2357
|
// src/dynamics/sync/get-elementor-config.ts
|
|
2348
2358
|
var getElementorConfig2 = () => {
|
|
@@ -2388,7 +2398,7 @@ var dynamicPropTypeUtil = (0, import_editor_props4.createPropUtils)(
|
|
|
2388
2398
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
2389
2399
|
var usePropDynamicTags = () => {
|
|
2390
2400
|
let categories = [];
|
|
2391
|
-
const { propType } = (0,
|
|
2401
|
+
const { propType } = (0, import_editor_controls43.useBoundProp)();
|
|
2392
2402
|
if (propType) {
|
|
2393
2403
|
const propDynamicType = getDynamicPropType(propType);
|
|
2394
2404
|
categories = propDynamicType?.settings.categories || [];
|
|
@@ -2414,7 +2424,7 @@ var useDynamicTag = (tagName) => {
|
|
|
2414
2424
|
|
|
2415
2425
|
// src/dynamics/dynamic-control.tsx
|
|
2416
2426
|
var DynamicControl = ({ bind, children }) => {
|
|
2417
|
-
const { value, setValue } = (0,
|
|
2427
|
+
const { value, setValue } = (0, import_editor_controls44.useBoundProp)(dynamicPropTypeUtil);
|
|
2418
2428
|
const { name = "", settings } = value ?? {};
|
|
2419
2429
|
const dynamicTag = useDynamicTag(name);
|
|
2420
2430
|
if (!dynamicTag) {
|
|
@@ -2433,25 +2443,25 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
2433
2443
|
});
|
|
2434
2444
|
};
|
|
2435
2445
|
const propType = createTopLevelOjectType({ schema: dynamicTag.props_schema });
|
|
2436
|
-
return /* @__PURE__ */
|
|
2446
|
+
return /* @__PURE__ */ React63.createElement(import_editor_controls44.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React63.createElement(import_editor_controls44.PropKeyProvider, { bind }, children));
|
|
2437
2447
|
};
|
|
2438
2448
|
|
|
2439
2449
|
// src/dynamics/components/dynamic-selection.tsx
|
|
2440
|
-
var
|
|
2450
|
+
var React64 = __toESM(require("react"));
|
|
2441
2451
|
var import_react19 = require("react");
|
|
2442
|
-
var
|
|
2443
|
-
var
|
|
2444
|
-
var
|
|
2445
|
-
var
|
|
2452
|
+
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
2453
|
+
var import_icons21 = require("@elementor/icons");
|
|
2454
|
+
var import_ui54 = require("@elementor/ui");
|
|
2455
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
2446
2456
|
var SIZE3 = "tiny";
|
|
2447
2457
|
var DynamicSelection = ({ onSelect }) => {
|
|
2448
2458
|
const [searchValue, setSearchValue] = (0, import_react19.useState)("");
|
|
2449
2459
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
2450
|
-
const { value: anyValue } = (0,
|
|
2451
|
-
const { bind, value: dynamicValue, setValue } = (0,
|
|
2460
|
+
const { value: anyValue } = (0, import_editor_controls45.useBoundProp)();
|
|
2461
|
+
const { bind, value: dynamicValue, setValue } = (0, import_editor_controls45.useBoundProp)(dynamicPropTypeUtil);
|
|
2452
2462
|
const [, updatePropValueHistory] = usePersistDynamicValue(bind);
|
|
2453
2463
|
const isCurrentValueDynamic = !!dynamicValue;
|
|
2454
|
-
const
|
|
2464
|
+
const options11 = useFilteredOptions(searchValue);
|
|
2455
2465
|
const handleSearch = (event) => {
|
|
2456
2466
|
setSearchValue(event.target.value);
|
|
2457
2467
|
};
|
|
@@ -2462,22 +2472,22 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2462
2472
|
setValue({ name: value, settings: {} });
|
|
2463
2473
|
onSelect?.();
|
|
2464
2474
|
};
|
|
2465
|
-
return /* @__PURE__ */
|
|
2466
|
-
|
|
2475
|
+
return /* @__PURE__ */ React64.createElement(import_ui54.Stack, null, /* @__PURE__ */ React64.createElement(import_ui54.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React64.createElement(
|
|
2476
|
+
import_ui54.TextField,
|
|
2467
2477
|
{
|
|
2468
2478
|
fullWidth: true,
|
|
2469
2479
|
size: SIZE3,
|
|
2470
2480
|
value: searchValue,
|
|
2471
2481
|
onChange: handleSearch,
|
|
2472
|
-
placeholder: (0,
|
|
2482
|
+
placeholder: (0, import_i18n43.__)("Search dynamic tag", "elementor"),
|
|
2473
2483
|
InputProps: {
|
|
2474
|
-
startAdornment: /* @__PURE__ */
|
|
2484
|
+
startAdornment: /* @__PURE__ */ React64.createElement(import_ui54.InputAdornment, { position: "start" }, /* @__PURE__ */ React64.createElement(import_icons21.SearchIcon, { fontSize: SIZE3 }))
|
|
2475
2485
|
}
|
|
2476
2486
|
}
|
|
2477
|
-
)), /* @__PURE__ */
|
|
2487
|
+
)), /* @__PURE__ */ React64.createElement(import_ui54.Divider, null), /* @__PURE__ */ React64.createElement(import_ui54.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options11.length > 0 ? /* @__PURE__ */ React64.createElement(import_ui54.MenuList, { role: "listbox", tabIndex: 0 }, options11.map(([category, items3], index) => /* @__PURE__ */ React64.createElement(import_react19.Fragment, { key: index }, /* @__PURE__ */ React64.createElement(import_ui54.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items3.map(({ value, label: tagLabel }) => {
|
|
2478
2488
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
2479
|
-
return /* @__PURE__ */
|
|
2480
|
-
|
|
2489
|
+
return /* @__PURE__ */ React64.createElement(
|
|
2490
|
+
import_ui54.MenuItem,
|
|
2481
2491
|
{
|
|
2482
2492
|
key: value,
|
|
2483
2493
|
selected: isSelected,
|
|
@@ -2487,20 +2497,20 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2487
2497
|
},
|
|
2488
2498
|
tagLabel
|
|
2489
2499
|
);
|
|
2490
|
-
})))) : /* @__PURE__ */
|
|
2491
|
-
|
|
2500
|
+
})))) : /* @__PURE__ */ React64.createElement(import_ui54.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React64.createElement(import_icons21.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React64.createElement(import_ui54.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n43.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React64.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React64.createElement(import_ui54.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React64.createElement(
|
|
2501
|
+
import_ui54.Link,
|
|
2492
2502
|
{
|
|
2493
2503
|
color: "secondary",
|
|
2494
2504
|
variant: "caption",
|
|
2495
2505
|
component: "button",
|
|
2496
2506
|
onClick: () => setSearchValue("")
|
|
2497
2507
|
},
|
|
2498
|
-
(0,
|
|
2499
|
-
), "\xA0", (0,
|
|
2508
|
+
(0, import_i18n43.__)("Clear the filters", "elementor")
|
|
2509
|
+
), "\xA0", (0, import_i18n43.__)("and try again.", "elementor")))));
|
|
2500
2510
|
};
|
|
2501
2511
|
var useFilteredOptions = (searchValue) => {
|
|
2502
2512
|
const dynamicTags = usePropDynamicTags();
|
|
2503
|
-
const
|
|
2513
|
+
const options11 = dynamicTags.reduce((categories, { name, label, group }) => {
|
|
2504
2514
|
const isVisible = label.toLowerCase().includes(searchValue.trim().toLowerCase());
|
|
2505
2515
|
if (!isVisible) {
|
|
2506
2516
|
return categories;
|
|
@@ -2511,18 +2521,18 @@ var useFilteredOptions = (searchValue) => {
|
|
|
2511
2521
|
categories.get(group)?.push({ label, value: name });
|
|
2512
2522
|
return categories;
|
|
2513
2523
|
}, /* @__PURE__ */ new Map());
|
|
2514
|
-
return [...
|
|
2524
|
+
return [...options11];
|
|
2515
2525
|
};
|
|
2516
2526
|
|
|
2517
2527
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
2518
2528
|
var SIZE4 = "tiny";
|
|
2519
2529
|
var DynamicSelectionControl = () => {
|
|
2520
|
-
const { setValue: setAnyValue } = (0,
|
|
2521
|
-
const { bind, value } = (0,
|
|
2530
|
+
const { setValue: setAnyValue } = (0, import_editor_controls46.useBoundProp)();
|
|
2531
|
+
const { bind, value } = (0, import_editor_controls46.useBoundProp)(dynamicPropTypeUtil);
|
|
2522
2532
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
2523
2533
|
const { name: tagName = "" } = value;
|
|
2524
2534
|
const selectionPopoverId = (0, import_react20.useId)();
|
|
2525
|
-
const selectionPopoverState = (0,
|
|
2535
|
+
const selectionPopoverState = (0, import_ui55.usePopupState)({ variant: "popover", popupId: selectionPopoverId });
|
|
2526
2536
|
const dynamicTag = useDynamicTag(tagName);
|
|
2527
2537
|
const removeDynamicTag = () => {
|
|
2528
2538
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -2530,70 +2540,70 @@ var DynamicSelectionControl = () => {
|
|
|
2530
2540
|
if (!dynamicTag) {
|
|
2531
2541
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
2532
2542
|
}
|
|
2533
|
-
return /* @__PURE__ */
|
|
2534
|
-
|
|
2543
|
+
return /* @__PURE__ */ React65.createElement(import_ui55.Box, null, /* @__PURE__ */ React65.createElement(
|
|
2544
|
+
import_ui55.UnstableTag,
|
|
2535
2545
|
{
|
|
2536
2546
|
fullWidth: true,
|
|
2537
2547
|
showActionsOnHover: true,
|
|
2538
2548
|
label: dynamicTag.label,
|
|
2539
|
-
startIcon: /* @__PURE__ */
|
|
2540
|
-
...(0,
|
|
2541
|
-
actions: /* @__PURE__ */
|
|
2542
|
-
|
|
2549
|
+
startIcon: /* @__PURE__ */ React65.createElement(import_icons22.DatabaseIcon, { fontSize: SIZE4 }),
|
|
2550
|
+
...(0, import_ui55.bindTrigger)(selectionPopoverState),
|
|
2551
|
+
actions: /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React65.createElement(
|
|
2552
|
+
import_ui55.IconButton,
|
|
2543
2553
|
{
|
|
2544
2554
|
size: SIZE4,
|
|
2545
2555
|
onClick: removeDynamicTag,
|
|
2546
|
-
"aria-label": (0,
|
|
2556
|
+
"aria-label": (0, import_i18n44.__)("Remove dynamic value", "elementor")
|
|
2547
2557
|
},
|
|
2548
|
-
/* @__PURE__ */
|
|
2558
|
+
/* @__PURE__ */ React65.createElement(import_icons22.XIcon, { fontSize: SIZE4 })
|
|
2549
2559
|
))
|
|
2550
2560
|
}
|
|
2551
|
-
), /* @__PURE__ */
|
|
2552
|
-
|
|
2561
|
+
), /* @__PURE__ */ React65.createElement(
|
|
2562
|
+
import_ui55.Popover,
|
|
2553
2563
|
{
|
|
2554
2564
|
disablePortal: true,
|
|
2555
2565
|
disableScrollLock: true,
|
|
2556
2566
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
2557
|
-
...(0,
|
|
2567
|
+
...(0, import_ui55.bindPopover)(selectionPopoverState)
|
|
2558
2568
|
},
|
|
2559
|
-
/* @__PURE__ */
|
|
2569
|
+
/* @__PURE__ */ React65.createElement(import_ui55.Stack, null, /* @__PURE__ */ React65.createElement(import_ui55.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React65.createElement(import_icons22.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React65.createElement(import_ui55.Typography, { variant: "subtitle2" }, (0, import_i18n44.__)("Dynamic Tags", "elementor")), /* @__PURE__ */ React65.createElement(import_ui55.IconButton, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React65.createElement(import_icons22.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React65.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
2560
2570
|
));
|
|
2561
2571
|
};
|
|
2562
2572
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
2563
2573
|
const popupId = (0, import_react20.useId)();
|
|
2564
|
-
const settingsPopupState = (0,
|
|
2574
|
+
const settingsPopupState = (0, import_ui55.usePopupState)({ variant: "popover", popupId });
|
|
2565
2575
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
2566
2576
|
if (!hasDynamicSettings) {
|
|
2567
2577
|
return null;
|
|
2568
2578
|
}
|
|
2569
|
-
return /* @__PURE__ */
|
|
2570
|
-
|
|
2579
|
+
return /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement(
|
|
2580
|
+
import_ui55.IconButton,
|
|
2571
2581
|
{
|
|
2572
2582
|
size: SIZE4,
|
|
2573
|
-
...(0,
|
|
2574
|
-
"aria-label": (0,
|
|
2583
|
+
...(0, import_ui55.bindTrigger)(settingsPopupState),
|
|
2584
|
+
"aria-label": (0, import_i18n44.__)("Settings", "elementor")
|
|
2575
2585
|
},
|
|
2576
|
-
/* @__PURE__ */
|
|
2577
|
-
), /* @__PURE__ */
|
|
2578
|
-
|
|
2586
|
+
/* @__PURE__ */ React65.createElement(import_icons22.SettingsIcon, { fontSize: SIZE4 })
|
|
2587
|
+
), /* @__PURE__ */ React65.createElement(
|
|
2588
|
+
import_ui55.Popover,
|
|
2579
2589
|
{
|
|
2580
2590
|
disableScrollLock: true,
|
|
2581
2591
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
2582
|
-
...(0,
|
|
2592
|
+
...(0, import_ui55.bindPopover)(settingsPopupState)
|
|
2583
2593
|
},
|
|
2584
|
-
/* @__PURE__ */
|
|
2594
|
+
/* @__PURE__ */ React65.createElement(import_ui55.Paper, { component: import_ui55.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React65.createElement(import_ui55.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React65.createElement(import_icons22.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React65.createElement(import_ui55.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React65.createElement(import_ui55.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React65.createElement(import_icons22.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React65.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
2585
2595
|
));
|
|
2586
2596
|
};
|
|
2587
2597
|
var DynamicSettings = ({ controls }) => {
|
|
2588
2598
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
2589
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
2599
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui55.useTabs)(0);
|
|
2590
2600
|
if (!tabs.length) {
|
|
2591
2601
|
return null;
|
|
2592
2602
|
}
|
|
2593
|
-
return /* @__PURE__ */
|
|
2594
|
-
return /* @__PURE__ */
|
|
2603
|
+
return /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement(import_ui55.Tabs, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React65.createElement(import_ui55.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React65.createElement(import_ui55.Divider, null), tabs.map(({ value }, index) => {
|
|
2604
|
+
return /* @__PURE__ */ React65.createElement(import_ui55.TabPanel, { key: index, sx: { flexGrow: 1 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React65.createElement(import_ui55.Stack, { gap: 1, px: 2 }, value.items.map((item) => {
|
|
2595
2605
|
if (item.type === "control") {
|
|
2596
|
-
return /* @__PURE__ */
|
|
2606
|
+
return /* @__PURE__ */ React65.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
2597
2607
|
}
|
|
2598
2608
|
return null;
|
|
2599
2609
|
})));
|
|
@@ -2603,22 +2613,22 @@ var Control3 = ({ control }) => {
|
|
|
2603
2613
|
if (!getControlByType(control.type)) {
|
|
2604
2614
|
return null;
|
|
2605
2615
|
}
|
|
2606
|
-
return /* @__PURE__ */
|
|
2616
|
+
return /* @__PURE__ */ React65.createElement(DynamicControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React65.createElement(import_editor_controls46.ControlLabel, null, control.label) : null, /* @__PURE__ */ React65.createElement(Control, { type: control.type, props: control.props }));
|
|
2607
2617
|
};
|
|
2608
2618
|
|
|
2609
2619
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
2610
|
-
var
|
|
2611
|
-
var
|
|
2612
|
-
var
|
|
2613
|
-
var
|
|
2620
|
+
var React66 = __toESM(require("react"));
|
|
2621
|
+
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
2622
|
+
var import_icons23 = require("@elementor/icons");
|
|
2623
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
2614
2624
|
var usePropDynamicAction = () => {
|
|
2615
|
-
const { propType } = (0,
|
|
2625
|
+
const { propType } = (0, import_editor_controls47.useBoundProp)();
|
|
2616
2626
|
const visible = !!propType && supportsDynamic(propType);
|
|
2617
2627
|
return {
|
|
2618
2628
|
visible,
|
|
2619
|
-
icon:
|
|
2620
|
-
title: (0,
|
|
2621
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
2629
|
+
icon: import_icons23.DatabaseIcon,
|
|
2630
|
+
title: (0, import_i18n45.__)("Dynamic Tags", "elementor"),
|
|
2631
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React66.createElement(DynamicSelection, { onSelect: closePopover })
|
|
2622
2632
|
};
|
|
2623
2633
|
};
|
|
2624
2634
|
|