@elementor/editor-editing-panel 1.11.1 → 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 +26 -0
- package/dist/index.js +435 -435
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +354 -354
- 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 +5 -6
- 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 +1 -1
- 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,32 +1150,32 @@ 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");
|
|
1167
|
-
var
|
|
1164
|
+
var import_ui17 = require("@elementor/ui");
|
|
1168
1165
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1169
1166
|
|
|
1170
1167
|
// src/hooks/use-direction.ts
|
|
1171
|
-
var
|
|
1168
|
+
var import_ui15 = require("@elementor/ui");
|
|
1172
1169
|
function useDirection() {
|
|
1173
|
-
const theme = (0,
|
|
1170
|
+
const theme = (0, import_ui15.useTheme)(), extendedWindow = window;
|
|
1174
1171
|
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
1175
1172
|
return { isSiteRtl, isUiRtl };
|
|
1176
1173
|
}
|
|
1177
1174
|
|
|
1178
1175
|
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
1179
|
-
var
|
|
1176
|
+
var React24 = __toESM(require("react"));
|
|
1180
1177
|
var import_react9 = require("react");
|
|
1181
|
-
var
|
|
1178
|
+
var import_ui16 = require("@elementor/ui");
|
|
1182
1179
|
var CLOCKWISE_ANGLES = {
|
|
1183
1180
|
row: 0,
|
|
1184
1181
|
column: 90,
|
|
@@ -1194,11 +1191,11 @@ var COUNTER_CLOCKWISE_ANGLES = {
|
|
|
1194
1191
|
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
1195
1192
|
const rotate = (0, import_react9.useRef)(useGetTargetAngle(isClockwise, offset));
|
|
1196
1193
|
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
1197
|
-
return /* @__PURE__ */
|
|
1194
|
+
return /* @__PURE__ */ React24.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
1198
1195
|
};
|
|
1199
1196
|
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
1200
1197
|
const [direction] = useStylesField("flex-direction");
|
|
1201
|
-
const isRtl = "rtl" === (0,
|
|
1198
|
+
const isRtl = "rtl" === (0, import_ui16.useTheme)().direction;
|
|
1202
1199
|
const rotationMultiplier = isRtl ? -1 : 1;
|
|
1203
1200
|
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
1204
1201
|
const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
|
|
@@ -1209,65 +1206,65 @@ var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
|
1209
1206
|
};
|
|
1210
1207
|
|
|
1211
1208
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
1212
|
-
var StartStartIcon = (0,
|
|
1213
|
-
var StartEndIcon = (0,
|
|
1214
|
-
var EndStartIcon = (0,
|
|
1215
|
-
var EndEndIcon = (0,
|
|
1216
|
-
var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Top
|
|
1217
|
-
var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Top
|
|
1218
|
-
var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Bottom
|
|
1219
|
-
var getEndEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n9.__)("Bottom
|
|
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");
|
|
1220
1217
|
var getCorners = (isSiteRtl) => [
|
|
1221
1218
|
{
|
|
1222
1219
|
label: getStartStartLabel(isSiteRtl),
|
|
1223
|
-
icon: /* @__PURE__ */
|
|
1220
|
+
icon: /* @__PURE__ */ React25.createElement(RotatedIcon, { icon: StartStartIcon, size: "tiny" }),
|
|
1224
1221
|
bind: "start-start"
|
|
1225
1222
|
},
|
|
1226
1223
|
{
|
|
1227
1224
|
label: getStartEndLabel(isSiteRtl),
|
|
1228
|
-
icon: /* @__PURE__ */
|
|
1225
|
+
icon: /* @__PURE__ */ React25.createElement(RotatedIcon, { icon: StartEndIcon, size: "tiny" }),
|
|
1229
1226
|
bind: "start-end"
|
|
1230
1227
|
},
|
|
1231
1228
|
{
|
|
1232
1229
|
label: getEndEndLabel(isSiteRtl),
|
|
1233
|
-
icon: /* @__PURE__ */
|
|
1230
|
+
icon: /* @__PURE__ */ React25.createElement(RotatedIcon, { icon: EndEndIcon, size: "tiny" }),
|
|
1234
1231
|
bind: "end-end"
|
|
1235
1232
|
},
|
|
1236
1233
|
{
|
|
1237
1234
|
label: getEndStartLabel(isSiteRtl),
|
|
1238
|
-
icon: /* @__PURE__ */
|
|
1235
|
+
icon: /* @__PURE__ */ React25.createElement(RotatedIcon, { icon: EndStartIcon, size: "tiny" }),
|
|
1239
1236
|
bind: "end-start"
|
|
1240
1237
|
}
|
|
1241
1238
|
];
|
|
1242
1239
|
var BorderRadiusField = () => {
|
|
1243
1240
|
const { isSiteRtl } = useDirection();
|
|
1244
|
-
return /* @__PURE__ */
|
|
1241
|
+
return /* @__PURE__ */ React25.createElement(StylesField, { bind: "border-radius" }, /* @__PURE__ */ React25.createElement(
|
|
1245
1242
|
import_editor_controls11.EqualUnequalSizesControl,
|
|
1246
1243
|
{
|
|
1247
1244
|
items: getCorners(isSiteRtl),
|
|
1248
|
-
label: (0, import_i18n9.__)("Border
|
|
1249
|
-
icon: /* @__PURE__ */
|
|
1245
|
+
label: (0, import_i18n9.__)("Border radius", "elementor"),
|
|
1246
|
+
icon: /* @__PURE__ */ React25.createElement(import_icons6.BorderCornersIcon, { fontSize: "tiny" }),
|
|
1250
1247
|
multiSizePropTypeUtil: import_editor_props3.borderRadiusPropTypeUtil
|
|
1251
1248
|
}
|
|
1252
1249
|
));
|
|
1253
1250
|
};
|
|
1254
1251
|
|
|
1255
1252
|
// src/components/style-sections/border-section/border-section.tsx
|
|
1256
|
-
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));
|
|
1257
1254
|
|
|
1258
1255
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
1259
|
-
var
|
|
1256
|
+
var React27 = __toESM(require("react"));
|
|
1260
1257
|
var import_editor_controls12 = require("@elementor/editor-controls");
|
|
1261
|
-
var
|
|
1258
|
+
var import_ui19 = require("@elementor/ui");
|
|
1262
1259
|
var EffectsSection = () => {
|
|
1263
|
-
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)));
|
|
1264
1261
|
};
|
|
1265
1262
|
|
|
1266
1263
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
1267
|
-
var
|
|
1264
|
+
var React37 = __toESM(require("react"));
|
|
1268
1265
|
var import_editor_controls22 = require("@elementor/editor-controls");
|
|
1269
1266
|
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
1270
|
-
var
|
|
1267
|
+
var import_ui29 = require("@elementor/ui");
|
|
1271
1268
|
var import_i18n19 = require("@wordpress/i18n");
|
|
1272
1269
|
|
|
1273
1270
|
// src/hooks/use-computed-style.ts
|
|
@@ -1296,13 +1293,13 @@ function useComputedStyle(elementId) {
|
|
|
1296
1293
|
}
|
|
1297
1294
|
|
|
1298
1295
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
1299
|
-
var
|
|
1296
|
+
var React28 = __toESM(require("react"));
|
|
1300
1297
|
var import_editor_controls13 = require("@elementor/editor-controls");
|
|
1301
1298
|
var import_icons7 = require("@elementor/icons");
|
|
1302
|
-
var
|
|
1299
|
+
var import_ui20 = require("@elementor/ui");
|
|
1303
1300
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1304
|
-
var StartIcon = (0,
|
|
1305
|
-
var EndIcon = (0,
|
|
1301
|
+
var StartIcon = (0, import_ui20.withDirection)(import_icons7.LayoutAlignLeftIcon);
|
|
1302
|
+
var EndIcon = (0, import_ui20.withDirection)(import_icons7.LayoutAlignRightIcon);
|
|
1306
1303
|
var iconProps = {
|
|
1307
1304
|
isClockwise: false,
|
|
1308
1305
|
offset: 90
|
|
@@ -1311,41 +1308,41 @@ var options = [
|
|
|
1311
1308
|
{
|
|
1312
1309
|
value: "start",
|
|
1313
1310
|
label: (0, import_i18n10.__)("Start", "elementor"),
|
|
1314
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1311
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
|
|
1315
1312
|
showTooltip: true
|
|
1316
1313
|
},
|
|
1317
1314
|
{
|
|
1318
1315
|
value: "center",
|
|
1319
1316
|
label: (0, import_i18n10.__)("Center", "elementor"),
|
|
1320
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1317
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: import_icons7.LayoutAlignCenterIcon, size, ...iconProps }),
|
|
1321
1318
|
showTooltip: true
|
|
1322
1319
|
},
|
|
1323
1320
|
{
|
|
1324
1321
|
value: "end",
|
|
1325
1322
|
label: (0, import_i18n10.__)("End", "elementor"),
|
|
1326
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1323
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
|
|
1327
1324
|
showTooltip: true
|
|
1328
1325
|
},
|
|
1329
1326
|
{
|
|
1330
1327
|
value: "stretch",
|
|
1331
1328
|
label: (0, import_i18n10.__)("Stretch", "elementor"),
|
|
1332
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1329
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: import_icons7.LayoutDistributeVerticalIcon, size, ...iconProps }),
|
|
1333
1330
|
showTooltip: true
|
|
1334
1331
|
}
|
|
1335
1332
|
];
|
|
1336
1333
|
var AlignItemsField = () => {
|
|
1337
1334
|
const { isSiteRtl } = useDirection();
|
|
1338
|
-
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 }))))));
|
|
1339
1336
|
};
|
|
1340
1337
|
|
|
1341
1338
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
1342
|
-
var
|
|
1339
|
+
var React29 = __toESM(require("react"));
|
|
1343
1340
|
var import_editor_controls14 = require("@elementor/editor-controls");
|
|
1344
1341
|
var import_icons8 = require("@elementor/icons");
|
|
1345
|
-
var
|
|
1342
|
+
var import_ui21 = require("@elementor/ui");
|
|
1346
1343
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1347
|
-
var StartIcon2 = (0,
|
|
1348
|
-
var EndIcon2 = (0,
|
|
1344
|
+
var StartIcon2 = (0, import_ui21.withDirection)(import_icons8.LayoutAlignLeftIcon);
|
|
1345
|
+
var EndIcon2 = (0, import_ui21.withDirection)(import_icons8.LayoutAlignRightIcon);
|
|
1349
1346
|
var iconProps2 = {
|
|
1350
1347
|
isClockwise: false,
|
|
1351
1348
|
offset: 90
|
|
@@ -1354,40 +1351,40 @@ var options2 = [
|
|
|
1354
1351
|
{
|
|
1355
1352
|
value: "start",
|
|
1356
1353
|
label: (0, import_i18n11.__)("Start", "elementor"),
|
|
1357
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1354
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
|
|
1358
1355
|
showTooltip: true
|
|
1359
1356
|
},
|
|
1360
1357
|
{
|
|
1361
1358
|
value: "center",
|
|
1362
1359
|
label: (0, import_i18n11.__)("Center", "elementor"),
|
|
1363
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1360
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: import_icons8.LayoutAlignCenterIcon, size, ...iconProps2 }),
|
|
1364
1361
|
showTooltip: true
|
|
1365
1362
|
},
|
|
1366
1363
|
{
|
|
1367
1364
|
value: "end",
|
|
1368
1365
|
label: (0, import_i18n11.__)("End", "elementor"),
|
|
1369
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1366
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
|
|
1370
1367
|
showTooltip: true
|
|
1371
1368
|
},
|
|
1372
1369
|
{
|
|
1373
1370
|
value: "stretch",
|
|
1374
1371
|
label: (0, import_i18n11.__)("Stretch", "elementor"),
|
|
1375
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1372
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: import_icons8.LayoutDistributeVerticalIcon, size, ...iconProps2 }),
|
|
1376
1373
|
showTooltip: true
|
|
1377
1374
|
}
|
|
1378
1375
|
];
|
|
1379
1376
|
var AlignSelfChild = () => {
|
|
1380
1377
|
const { isSiteRtl } = useDirection();
|
|
1381
|
-
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 }))))));
|
|
1382
1379
|
};
|
|
1383
1380
|
|
|
1384
1381
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
1385
|
-
var
|
|
1382
|
+
var React30 = __toESM(require("react"));
|
|
1386
1383
|
var import_editor_controls15 = require("@elementor/editor-controls");
|
|
1387
|
-
var
|
|
1384
|
+
var import_ui22 = require("@elementor/ui");
|
|
1388
1385
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1389
1386
|
var DisplayField = () => {
|
|
1390
|
-
const
|
|
1387
|
+
const options11 = [
|
|
1391
1388
|
{
|
|
1392
1389
|
value: "block",
|
|
1393
1390
|
renderContent: () => (0, import_i18n12.__)("Block", "elementor"),
|
|
@@ -1407,58 +1404,58 @@ var DisplayField = () => {
|
|
|
1407
1404
|
showTooltip: true
|
|
1408
1405
|
}
|
|
1409
1406
|
];
|
|
1410
|
-
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 })));
|
|
1411
1408
|
};
|
|
1412
1409
|
|
|
1413
1410
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
1414
|
-
var
|
|
1411
|
+
var React31 = __toESM(require("react"));
|
|
1415
1412
|
var import_editor_controls16 = require("@elementor/editor-controls");
|
|
1416
1413
|
var import_icons9 = require("@elementor/icons");
|
|
1417
|
-
var
|
|
1414
|
+
var import_ui23 = require("@elementor/ui");
|
|
1418
1415
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1419
1416
|
var options3 = [
|
|
1420
1417
|
{
|
|
1421
1418
|
value: "row",
|
|
1422
1419
|
label: (0, import_i18n13.__)("Row", "elementor"),
|
|
1423
1420
|
renderContent: ({ size }) => {
|
|
1424
|
-
const StartIcon5 = (0,
|
|
1425
|
-
return /* @__PURE__ */
|
|
1421
|
+
const StartIcon5 = (0, import_ui23.withDirection)(import_icons9.ArrowRightIcon);
|
|
1422
|
+
return /* @__PURE__ */ React31.createElement(StartIcon5, { fontSize: size });
|
|
1426
1423
|
},
|
|
1427
1424
|
showTooltip: true
|
|
1428
1425
|
},
|
|
1429
1426
|
{
|
|
1430
1427
|
value: "column",
|
|
1431
1428
|
label: (0, import_i18n13.__)("Column", "elementor"),
|
|
1432
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1429
|
+
renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.ArrowDownSmallIcon, { fontSize: size }),
|
|
1433
1430
|
showTooltip: true
|
|
1434
1431
|
},
|
|
1435
1432
|
{
|
|
1436
1433
|
value: "row-reverse",
|
|
1437
1434
|
label: (0, import_i18n13.__)("Reversed row", "elementor"),
|
|
1438
1435
|
renderContent: ({ size }) => {
|
|
1439
|
-
const EndIcon5 = (0,
|
|
1440
|
-
return /* @__PURE__ */
|
|
1436
|
+
const EndIcon5 = (0, import_ui23.withDirection)(import_icons9.ArrowLeftIcon);
|
|
1437
|
+
return /* @__PURE__ */ React31.createElement(EndIcon5, { fontSize: size });
|
|
1441
1438
|
},
|
|
1442
1439
|
showTooltip: true
|
|
1443
1440
|
},
|
|
1444
1441
|
{
|
|
1445
1442
|
value: "column-reverse",
|
|
1446
1443
|
label: (0, import_i18n13.__)("Reversed column", "elementor"),
|
|
1447
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1444
|
+
renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons9.ArrowUpSmallIcon, { fontSize: size }),
|
|
1448
1445
|
showTooltip: true
|
|
1449
1446
|
}
|
|
1450
1447
|
];
|
|
1451
1448
|
var FlexDirectionField = () => {
|
|
1452
1449
|
const { isSiteRtl } = useDirection();
|
|
1453
|
-
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 }))))));
|
|
1454
1451
|
};
|
|
1455
1452
|
|
|
1456
1453
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
1457
|
-
var
|
|
1454
|
+
var React32 = __toESM(require("react"));
|
|
1458
1455
|
var import_react10 = require("react");
|
|
1459
1456
|
var import_editor_controls17 = require("@elementor/editor-controls");
|
|
1460
1457
|
var import_icons10 = require("@elementor/icons");
|
|
1461
|
-
var
|
|
1458
|
+
var import_ui24 = require("@elementor/ui");
|
|
1462
1459
|
var import_i18n14 = require("@wordpress/i18n");
|
|
1463
1460
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
1464
1461
|
var LAST_DEFAULT_VALUE = 99999;
|
|
@@ -1473,19 +1470,19 @@ var items = [
|
|
|
1473
1470
|
{
|
|
1474
1471
|
value: FIRST,
|
|
1475
1472
|
label: (0, import_i18n14.__)("First", "elementor"),
|
|
1476
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1473
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons10.ArrowUpSmallIcon, { fontSize: size }),
|
|
1477
1474
|
showTooltip: true
|
|
1478
1475
|
},
|
|
1479
1476
|
{
|
|
1480
1477
|
value: LAST,
|
|
1481
1478
|
label: (0, import_i18n14.__)("Last", "elementor"),
|
|
1482
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1479
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons10.ArrowDownSmallIcon, { fontSize: size }),
|
|
1483
1480
|
showTooltip: true
|
|
1484
1481
|
},
|
|
1485
1482
|
{
|
|
1486
1483
|
value: CUSTOM,
|
|
1487
1484
|
label: (0, import_i18n14.__)("Custom", "elementor"),
|
|
1488
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1485
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons10.PencilIcon, { fontSize: size }),
|
|
1489
1486
|
showTooltip: true
|
|
1490
1487
|
}
|
|
1491
1488
|
];
|
|
@@ -1500,7 +1497,7 @@ var FlexOrderField = () => {
|
|
|
1500
1497
|
}
|
|
1501
1498
|
setOrder({ $$type: "number", value: orderValueMap[group] });
|
|
1502
1499
|
};
|
|
1503
|
-
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(
|
|
1504
1501
|
import_editor_controls17.ControlToggleButtonGroup,
|
|
1505
1502
|
{
|
|
1506
1503
|
items,
|
|
@@ -1508,7 +1505,7 @@ var FlexOrderField = () => {
|
|
|
1508
1505
|
onChange: handleToggleButtonChange,
|
|
1509
1506
|
exclusive: true
|
|
1510
1507
|
}
|
|
1511
|
-
))), 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(
|
|
1512
1509
|
import_editor_controls17.NumberControl,
|
|
1513
1510
|
{
|
|
1514
1511
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -1528,30 +1525,30 @@ var getGroupControlValue = (order) => {
|
|
|
1528
1525
|
};
|
|
1529
1526
|
|
|
1530
1527
|
// src/components/style-sections/layout-section/flex-size-field.tsx
|
|
1531
|
-
var
|
|
1528
|
+
var React33 = __toESM(require("react"));
|
|
1532
1529
|
var import_react11 = require("react");
|
|
1533
1530
|
var import_editor_controls18 = require("@elementor/editor-controls");
|
|
1534
1531
|
var import_icons11 = require("@elementor/icons");
|
|
1535
|
-
var
|
|
1532
|
+
var import_ui25 = require("@elementor/ui");
|
|
1536
1533
|
var import_i18n15 = require("@wordpress/i18n");
|
|
1537
1534
|
var DEFAULT = 1;
|
|
1538
1535
|
var items2 = [
|
|
1539
1536
|
{
|
|
1540
1537
|
value: "flex-grow",
|
|
1541
1538
|
label: (0, import_i18n15.__)("Grow", "elementor"),
|
|
1542
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1539
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons11.ExpandIcon, { fontSize: size }),
|
|
1543
1540
|
showTooltip: true
|
|
1544
1541
|
},
|
|
1545
1542
|
{
|
|
1546
1543
|
value: "flex-shrink",
|
|
1547
1544
|
label: (0, import_i18n15.__)("Shrink", "elementor"),
|
|
1548
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1545
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons11.ShrinkIcon, { fontSize: size }),
|
|
1549
1546
|
showTooltip: true
|
|
1550
1547
|
},
|
|
1551
1548
|
{
|
|
1552
1549
|
value: "custom",
|
|
1553
1550
|
label: (0, import_i18n15.__)("Custom", "elementor"),
|
|
1554
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1551
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons11.PencilIcon, { fontSize: size }),
|
|
1555
1552
|
showTooltip: true
|
|
1556
1553
|
}
|
|
1557
1554
|
];
|
|
@@ -1575,7 +1572,7 @@ var FlexSizeField = () => {
|
|
|
1575
1572
|
setGrowField(null);
|
|
1576
1573
|
setShrinkField({ $$type: "number", value: DEFAULT });
|
|
1577
1574
|
};
|
|
1578
|
-
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(
|
|
1579
1576
|
import_editor_controls18.ControlToggleButtonGroup,
|
|
1580
1577
|
{
|
|
1581
1578
|
value: activeGroup,
|
|
@@ -1583,9 +1580,9 @@ var FlexSizeField = () => {
|
|
|
1583
1580
|
items: items2,
|
|
1584
1581
|
exclusive: true
|
|
1585
1582
|
}
|
|
1586
|
-
))), "custom" === activeGroup && /* @__PURE__ */
|
|
1583
|
+
))), "custom" === activeGroup && /* @__PURE__ */ React33.createElement(FlexCustomField, null))));
|
|
1587
1584
|
};
|
|
1588
|
-
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)))));
|
|
1589
1586
|
var getActiveGroup = ({
|
|
1590
1587
|
grow,
|
|
1591
1588
|
shrink,
|
|
@@ -1607,22 +1604,22 @@ var getActiveGroup = ({
|
|
|
1607
1604
|
};
|
|
1608
1605
|
|
|
1609
1606
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
1610
|
-
var
|
|
1607
|
+
var React34 = __toESM(require("react"));
|
|
1611
1608
|
var import_editor_controls19 = require("@elementor/editor-controls");
|
|
1612
|
-
var
|
|
1609
|
+
var import_ui26 = require("@elementor/ui");
|
|
1613
1610
|
var import_i18n16 = require("@wordpress/i18n");
|
|
1614
1611
|
var GapControlField = () => {
|
|
1615
|
-
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") })));
|
|
1616
1613
|
};
|
|
1617
1614
|
|
|
1618
1615
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
1619
|
-
var
|
|
1616
|
+
var React35 = __toESM(require("react"));
|
|
1620
1617
|
var import_editor_controls20 = require("@elementor/editor-controls");
|
|
1621
1618
|
var import_icons12 = require("@elementor/icons");
|
|
1622
|
-
var
|
|
1619
|
+
var import_ui27 = require("@elementor/ui");
|
|
1623
1620
|
var import_i18n17 = require("@wordpress/i18n");
|
|
1624
|
-
var StartIcon3 = (0,
|
|
1625
|
-
var EndIcon3 = (0,
|
|
1621
|
+
var StartIcon3 = (0, import_ui27.withDirection)(import_icons12.JustifyTopIcon);
|
|
1622
|
+
var EndIcon3 = (0, import_ui27.withDirection)(import_icons12.JustifyBottomIcon);
|
|
1626
1623
|
var iconProps3 = {
|
|
1627
1624
|
isClockwise: true,
|
|
1628
1625
|
offset: -90
|
|
@@ -1631,74 +1628,74 @@ var options4 = [
|
|
|
1631
1628
|
{
|
|
1632
1629
|
value: "start",
|
|
1633
1630
|
label: (0, import_i18n17.__)("Start", "elementor"),
|
|
1634
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1631
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: StartIcon3, size, ...iconProps3 }),
|
|
1635
1632
|
showTooltip: true
|
|
1636
1633
|
},
|
|
1637
1634
|
{
|
|
1638
1635
|
value: "center",
|
|
1639
1636
|
label: (0, import_i18n17.__)("Center", "elementor"),
|
|
1640
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1637
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons12.JustifyCenterIcon, size, ...iconProps3 }),
|
|
1641
1638
|
showTooltip: true
|
|
1642
1639
|
},
|
|
1643
1640
|
{
|
|
1644
1641
|
value: "end",
|
|
1645
1642
|
label: (0, import_i18n17.__)("End", "elementor"),
|
|
1646
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1643
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: EndIcon3, size, ...iconProps3 }),
|
|
1647
1644
|
showTooltip: true
|
|
1648
1645
|
},
|
|
1649
1646
|
{
|
|
1650
1647
|
value: "space-between",
|
|
1651
1648
|
label: (0, import_i18n17.__)("Space between", "elementor"),
|
|
1652
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1649
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons12.JustifySpaceBetweenVerticalIcon, size, ...iconProps3 }),
|
|
1653
1650
|
showTooltip: true
|
|
1654
1651
|
},
|
|
1655
1652
|
{
|
|
1656
1653
|
value: "space-around",
|
|
1657
1654
|
label: (0, import_i18n17.__)("Space around", "elementor"),
|
|
1658
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1655
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons12.JustifySpaceAroundVerticalIcon, size, ...iconProps3 }),
|
|
1659
1656
|
showTooltip: true
|
|
1660
1657
|
},
|
|
1661
1658
|
{
|
|
1662
1659
|
value: "space-evenly",
|
|
1663
1660
|
label: (0, import_i18n17.__)("Space evenly", "elementor"),
|
|
1664
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1661
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons12.JustifyDistributeVerticalIcon, size, ...iconProps3 }),
|
|
1665
1662
|
showTooltip: true
|
|
1666
1663
|
}
|
|
1667
1664
|
];
|
|
1668
1665
|
var JustifyContentField = () => {
|
|
1669
1666
|
const { isSiteRtl } = useDirection();
|
|
1670
|
-
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 })))));
|
|
1671
1668
|
};
|
|
1672
1669
|
|
|
1673
1670
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
1674
|
-
var
|
|
1671
|
+
var React36 = __toESM(require("react"));
|
|
1675
1672
|
var import_editor_controls21 = require("@elementor/editor-controls");
|
|
1676
1673
|
var import_icons13 = require("@elementor/icons");
|
|
1677
|
-
var
|
|
1674
|
+
var import_ui28 = require("@elementor/ui");
|
|
1678
1675
|
var import_i18n18 = require("@wordpress/i18n");
|
|
1679
1676
|
var options5 = [
|
|
1680
1677
|
{
|
|
1681
1678
|
value: "nowrap",
|
|
1682
1679
|
label: (0, import_i18n18.__)("No wrap", "elementor"),
|
|
1683
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1680
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons13.ArrowRightIcon, { fontSize: size }),
|
|
1684
1681
|
showTooltip: true
|
|
1685
1682
|
},
|
|
1686
1683
|
{
|
|
1687
1684
|
value: "wrap",
|
|
1688
1685
|
label: (0, import_i18n18.__)("Wrap", "elementor"),
|
|
1689
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1686
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons13.ArrowBackIcon, { fontSize: size }),
|
|
1690
1687
|
showTooltip: true
|
|
1691
1688
|
},
|
|
1692
1689
|
{
|
|
1693
1690
|
value: "wrap-reverse",
|
|
1694
1691
|
label: (0, import_i18n18.__)("Reversed wrap", "elementor"),
|
|
1695
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1692
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons13.ArrowForwardIcon, { fontSize: size }),
|
|
1696
1693
|
showTooltip: true
|
|
1697
1694
|
}
|
|
1698
1695
|
];
|
|
1699
1696
|
var WrapField = () => {
|
|
1700
1697
|
const { isSiteRtl } = useDirection();
|
|
1701
|
-
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 }))))));
|
|
1702
1699
|
};
|
|
1703
1700
|
|
|
1704
1701
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -1707,39 +1704,39 @@ var LayoutSection = () => {
|
|
|
1707
1704
|
const { element } = useElement();
|
|
1708
1705
|
const parent = (0, import_editor_elements5.useParentElement)(element.id);
|
|
1709
1706
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
1710
|
-
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));
|
|
1711
1708
|
};
|
|
1712
|
-
var FlexFields = () => /* @__PURE__ */
|
|
1713
|
-
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));
|
|
1714
1711
|
|
|
1715
1712
|
// src/components/style-sections/position-section/position-section.tsx
|
|
1716
|
-
var
|
|
1713
|
+
var React41 = __toESM(require("react"));
|
|
1717
1714
|
var import_session2 = require("@elementor/session");
|
|
1718
|
-
var
|
|
1715
|
+
var import_ui33 = require("@elementor/ui");
|
|
1719
1716
|
|
|
1720
1717
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
1721
|
-
var
|
|
1718
|
+
var React38 = __toESM(require("react"));
|
|
1722
1719
|
var import_editor_controls23 = require("@elementor/editor-controls");
|
|
1723
1720
|
var import_icons14 = require("@elementor/icons");
|
|
1724
|
-
var
|
|
1721
|
+
var import_ui30 = require("@elementor/ui");
|
|
1725
1722
|
var import_i18n20 = require("@wordpress/i18n");
|
|
1726
1723
|
var sideIcons = {
|
|
1727
|
-
left: /* @__PURE__ */
|
|
1728
|
-
right: /* @__PURE__ */
|
|
1729
|
-
top: /* @__PURE__ */
|
|
1730
|
-
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" })
|
|
1731
1728
|
};
|
|
1732
1729
|
var DimensionsField = () => {
|
|
1733
|
-
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") })));
|
|
1734
1731
|
};
|
|
1735
1732
|
var DimensionField = ({ side, label }) => {
|
|
1736
|
-
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] }))));
|
|
1737
1734
|
};
|
|
1738
1735
|
|
|
1739
1736
|
// src/components/style-sections/position-section/position-field.tsx
|
|
1740
|
-
var
|
|
1737
|
+
var React39 = __toESM(require("react"));
|
|
1741
1738
|
var import_editor_controls24 = require("@elementor/editor-controls");
|
|
1742
|
-
var
|
|
1739
|
+
var import_ui31 = require("@elementor/ui");
|
|
1743
1740
|
var import_i18n21 = require("@wordpress/i18n");
|
|
1744
1741
|
var positionOptions = [
|
|
1745
1742
|
{ label: (0, import_i18n21.__)("Static", "elementor"), value: "static" },
|
|
@@ -1749,16 +1746,16 @@ var positionOptions = [
|
|
|
1749
1746
|
{ label: (0, import_i18n21.__)("Sticky", "elementor"), value: "sticky" }
|
|
1750
1747
|
];
|
|
1751
1748
|
var PositionField = ({ onChange }) => {
|
|
1752
|
-
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 }))));
|
|
1753
1750
|
};
|
|
1754
1751
|
|
|
1755
1752
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
1756
|
-
var
|
|
1753
|
+
var React40 = __toESM(require("react"));
|
|
1757
1754
|
var import_editor_controls25 = require("@elementor/editor-controls");
|
|
1758
|
-
var
|
|
1755
|
+
var import_ui32 = require("@elementor/ui");
|
|
1759
1756
|
var import_i18n22 = require("@wordpress/i18n");
|
|
1760
1757
|
var ZIndexField = () => {
|
|
1761
|
-
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))));
|
|
1762
1759
|
};
|
|
1763
1760
|
|
|
1764
1761
|
// src/components/style-sections/position-section/position-section.tsx
|
|
@@ -1790,7 +1787,7 @@ var PositionSection = () => {
|
|
|
1790
1787
|
}
|
|
1791
1788
|
};
|
|
1792
1789
|
const isNotStatic = positionValue && positionValue?.value !== "static";
|
|
1793
|
-
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);
|
|
1794
1791
|
};
|
|
1795
1792
|
var usePersistDimensions = () => {
|
|
1796
1793
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -1800,90 +1797,90 @@ var usePersistDimensions = () => {
|
|
|
1800
1797
|
};
|
|
1801
1798
|
|
|
1802
1799
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1803
|
-
var
|
|
1800
|
+
var React43 = __toESM(require("react"));
|
|
1804
1801
|
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
1805
|
-
var
|
|
1802
|
+
var import_ui35 = require("@elementor/ui");
|
|
1806
1803
|
var import_i18n24 = require("@wordpress/i18n");
|
|
1807
1804
|
|
|
1808
1805
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
1809
|
-
var
|
|
1806
|
+
var React42 = __toESM(require("react"));
|
|
1810
1807
|
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
1811
1808
|
var import_icons15 = require("@elementor/icons");
|
|
1812
|
-
var
|
|
1809
|
+
var import_ui34 = require("@elementor/ui");
|
|
1813
1810
|
var import_i18n23 = require("@wordpress/i18n");
|
|
1814
1811
|
var options6 = [
|
|
1815
1812
|
{
|
|
1816
1813
|
value: "visible",
|
|
1817
1814
|
label: (0, import_i18n23.__)("Visible", "elementor"),
|
|
1818
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1815
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons15.EyeIcon, { fontSize: size }),
|
|
1819
1816
|
showTooltip: true
|
|
1820
1817
|
},
|
|
1821
1818
|
{
|
|
1822
1819
|
value: "hidden",
|
|
1823
1820
|
label: (0, import_i18n23.__)("Hidden", "elementor"),
|
|
1824
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1821
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons15.EyeOffIcon, { fontSize: size }),
|
|
1825
1822
|
showTooltip: true
|
|
1826
1823
|
},
|
|
1827
1824
|
{
|
|
1828
1825
|
value: "auto",
|
|
1829
1826
|
label: (0, import_i18n23.__)("Auto", "elementor"),
|
|
1830
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1827
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons15.ExpandBottomIcon, { fontSize: size }),
|
|
1831
1828
|
showTooltip: true
|
|
1832
1829
|
}
|
|
1833
1830
|
];
|
|
1834
1831
|
var OverflowField = () => {
|
|
1835
|
-
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 }))));
|
|
1836
1833
|
};
|
|
1837
1834
|
|
|
1838
1835
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1839
1836
|
var SizeSection = () => {
|
|
1840
|
-
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)));
|
|
1841
1838
|
};
|
|
1842
1839
|
var SizeField = ({ label, bind }) => {
|
|
1843
|
-
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))));
|
|
1844
1841
|
};
|
|
1845
1842
|
|
|
1846
1843
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
1847
|
-
var
|
|
1844
|
+
var React44 = __toESM(require("react"));
|
|
1848
1845
|
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
1849
|
-
var
|
|
1846
|
+
var import_ui36 = require("@elementor/ui");
|
|
1850
1847
|
var import_i18n25 = require("@wordpress/i18n");
|
|
1851
1848
|
var SpacingSection = () => {
|
|
1852
|
-
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") })));
|
|
1853
1850
|
};
|
|
1854
1851
|
|
|
1855
1852
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
1856
|
-
var
|
|
1857
|
-
var
|
|
1853
|
+
var React59 = __toESM(require("react"));
|
|
1854
|
+
var import_ui50 = require("@elementor/ui");
|
|
1858
1855
|
|
|
1859
1856
|
// src/components/collapsible-content.tsx
|
|
1860
|
-
var
|
|
1857
|
+
var React45 = __toESM(require("react"));
|
|
1861
1858
|
var import_react12 = require("react");
|
|
1862
|
-
var
|
|
1859
|
+
var import_ui37 = require("@elementor/ui");
|
|
1863
1860
|
var import_i18n26 = require("@wordpress/i18n");
|
|
1864
1861
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
1865
1862
|
const [open, setOpen] = (0, import_react12.useState)(defaultOpen);
|
|
1866
1863
|
const handleToggle = () => {
|
|
1867
1864
|
setOpen((prevOpen) => !prevOpen);
|
|
1868
1865
|
};
|
|
1869
|
-
return /* @__PURE__ */
|
|
1870
|
-
|
|
1866
|
+
return /* @__PURE__ */ React45.createElement(import_ui37.Stack, { sx: { py: 0.5 } }, /* @__PURE__ */ React45.createElement(
|
|
1867
|
+
import_ui37.Button,
|
|
1871
1868
|
{
|
|
1872
1869
|
fullWidth: true,
|
|
1873
1870
|
size: "small",
|
|
1874
1871
|
color: "secondary",
|
|
1875
1872
|
variant: "outlined",
|
|
1876
1873
|
onClick: handleToggle,
|
|
1877
|
-
endIcon: /* @__PURE__ */
|
|
1874
|
+
endIcon: /* @__PURE__ */ React45.createElement(CollapseIcon, { open })
|
|
1878
1875
|
},
|
|
1879
1876
|
open ? (0, import_i18n26.__)("Show less", "elementor") : (0, import_i18n26.__)("Show more", "elementor")
|
|
1880
|
-
), /* @__PURE__ */
|
|
1877
|
+
), /* @__PURE__ */ React45.createElement(import_ui37.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
1881
1878
|
};
|
|
1882
1879
|
|
|
1883
1880
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
1884
|
-
var
|
|
1881
|
+
var React46 = __toESM(require("react"));
|
|
1885
1882
|
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
1886
|
-
var
|
|
1883
|
+
var import_ui38 = require("@elementor/ui");
|
|
1887
1884
|
var import_i18n27 = require("@wordpress/i18n");
|
|
1888
1885
|
|
|
1889
1886
|
// src/sync/get-elementor-config.ts
|
|
@@ -1898,194 +1895,143 @@ var FontFamilyField = () => {
|
|
|
1898
1895
|
if (!fontFamilies) {
|
|
1899
1896
|
return null;
|
|
1900
1897
|
}
|
|
1901
|
-
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 }))));
|
|
1902
1899
|
};
|
|
1903
1900
|
var getFontFamilies = () => {
|
|
1904
1901
|
const { controls } = getElementorConfig();
|
|
1905
|
-
const
|
|
1906
|
-
if (!
|
|
1902
|
+
const options11 = controls?.font?.options;
|
|
1903
|
+
if (!options11) {
|
|
1907
1904
|
return null;
|
|
1908
1905
|
}
|
|
1909
|
-
return
|
|
1906
|
+
return options11;
|
|
1910
1907
|
};
|
|
1911
1908
|
|
|
1912
1909
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
1913
|
-
var
|
|
1910
|
+
var React47 = __toESM(require("react"));
|
|
1914
1911
|
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
1915
|
-
var
|
|
1912
|
+
var import_ui39 = require("@elementor/ui");
|
|
1916
1913
|
var import_i18n28 = require("@wordpress/i18n");
|
|
1917
1914
|
var FontSizeField = () => {
|
|
1918
|
-
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))));
|
|
1919
1916
|
};
|
|
1920
1917
|
|
|
1921
|
-
// src/components/style-sections/typography-section/font-
|
|
1922
|
-
var
|
|
1918
|
+
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
1919
|
+
var React48 = __toESM(require("react"));
|
|
1923
1920
|
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
1924
|
-
var
|
|
1921
|
+
var import_icons16 = require("@elementor/icons");
|
|
1922
|
+
var import_ui40 = require("@elementor/ui");
|
|
1925
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");
|
|
1926
1945
|
var fontWeightOptions = [
|
|
1927
|
-
{ value: "100", label: (0,
|
|
1928
|
-
{ value: "200", label: (0,
|
|
1929
|
-
{ value: "300", label: (0,
|
|
1930
|
-
{ value: "400", label: (0,
|
|
1931
|
-
{ value: "500", label: (0,
|
|
1932
|
-
{ value: "600", label: (0,
|
|
1933
|
-
{ value: "700", label: (0,
|
|
1934
|
-
{ value: "800", label: (0,
|
|
1935
|
-
{ 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") }
|
|
1936
1955
|
];
|
|
1937
1956
|
var FontWeightField = () => {
|
|
1938
|
-
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 }))));
|
|
1939
1958
|
};
|
|
1940
1959
|
|
|
1941
1960
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
1942
|
-
var
|
|
1943
|
-
var
|
|
1944
|
-
var
|
|
1945
|
-
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");
|
|
1946
1965
|
var LetterSpacingField = () => {
|
|
1947
|
-
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))));
|
|
1948
1967
|
};
|
|
1949
1968
|
|
|
1950
1969
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
1951
|
-
var
|
|
1952
|
-
var
|
|
1953
|
-
var
|
|
1954
|
-
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");
|
|
1955
1974
|
var LineHeightField = () => {
|
|
1956
|
-
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))));
|
|
1957
1976
|
};
|
|
1958
1977
|
|
|
1959
1978
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
1960
|
-
var
|
|
1961
|
-
var
|
|
1962
|
-
var
|
|
1963
|
-
var
|
|
1964
|
-
var
|
|
1965
|
-
var StartIcon4 = (0,
|
|
1966
|
-
var EndIcon4 = (0,
|
|
1967
|
-
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 = [
|
|
1968
1987
|
{
|
|
1969
1988
|
value: "start",
|
|
1970
|
-
label: (0,
|
|
1971
|
-
renderContent: () => /* @__PURE__ */
|
|
1989
|
+
label: (0, import_i18n33.__)("Start", "elementor"),
|
|
1990
|
+
renderContent: () => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: StartIcon4, size: "tiny" }),
|
|
1972
1991
|
showTooltip: true
|
|
1973
1992
|
},
|
|
1974
1993
|
{
|
|
1975
1994
|
value: "center",
|
|
1976
|
-
label: (0,
|
|
1977
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1995
|
+
label: (0, import_i18n33.__)("Center", "elementor"),
|
|
1996
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(import_icons17.AlignCenterIcon, { fontSize: size }),
|
|
1978
1997
|
showTooltip: true
|
|
1979
1998
|
},
|
|
1980
1999
|
{
|
|
1981
2000
|
value: "end",
|
|
1982
|
-
label: (0,
|
|
1983
|
-
renderContent: () => /* @__PURE__ */
|
|
2001
|
+
label: (0, import_i18n33.__)("End", "elementor"),
|
|
2002
|
+
renderContent: () => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: EndIcon4, size: "tiny" }),
|
|
1984
2003
|
showTooltip: true
|
|
1985
2004
|
},
|
|
1986
2005
|
{
|
|
1987
2006
|
value: "justify",
|
|
1988
|
-
label: (0,
|
|
1989
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2007
|
+
label: (0, import_i18n33.__)("Justify", "elementor"),
|
|
2008
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(import_icons17.AlignJustifiedIcon, { fontSize: size }),
|
|
1990
2009
|
showTooltip: true
|
|
1991
2010
|
}
|
|
1992
2011
|
];
|
|
1993
2012
|
var TextAlignmentField = () => {
|
|
1994
|
-
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 }))));
|
|
1995
2014
|
};
|
|
1996
2015
|
|
|
1997
2016
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
1998
|
-
var
|
|
1999
|
-
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
2000
|
-
var import_ui43 = require("@elementor/ui");
|
|
2001
|
-
var import_i18n33 = require("@wordpress/i18n");
|
|
2002
|
-
var TextColorField = () => {
|
|
2003
|
-
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls35.ControlLabel, null, (0, import_i18n33.__)("Text Color", "elementor"))), /* @__PURE__ */ React51.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls35.ColorControl, null))));
|
|
2004
|
-
};
|
|
2005
|
-
|
|
2006
|
-
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
2007
|
-
var React52 = __toESM(require("react"));
|
|
2017
|
+
var React53 = __toESM(require("react"));
|
|
2008
2018
|
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
2009
|
-
var
|
|
2010
|
-
var import_ui44 = require("@elementor/ui");
|
|
2019
|
+
var import_ui45 = require("@elementor/ui");
|
|
2011
2020
|
var import_i18n34 = require("@wordpress/i18n");
|
|
2012
|
-
var
|
|
2013
|
-
{
|
|
2014
|
-
value: "ltr",
|
|
2015
|
-
label: (0, import_i18n34.__)("Left to Right", "elementor"),
|
|
2016
|
-
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(import_icons17.TextDirectionLtrIcon, { fontSize: size })
|
|
2017
|
-
},
|
|
2018
|
-
{
|
|
2019
|
-
value: "rtl",
|
|
2020
|
-
label: (0, import_i18n34.__)("Right to Left", "elementor"),
|
|
2021
|
-
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(import_icons17.TextDirectionRtlIcon, { fontSize: size })
|
|
2022
|
-
}
|
|
2023
|
-
];
|
|
2024
|
-
var TextDirectionField = () => {
|
|
2025
|
-
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls36.ControlLabel, null, (0, import_i18n34.__)("Direction", "elementor"))), /* @__PURE__ */ React52.createElement(import_ui44.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React52.createElement(import_editor_controls36.ToggleControl, { options: options8 }))));
|
|
2026
|
-
};
|
|
2027
|
-
|
|
2028
|
-
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
2029
|
-
var React53 = __toESM(require("react"));
|
|
2030
|
-
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
2031
|
-
var import_i18n35 = require("@wordpress/i18n");
|
|
2032
|
-
var initTextStroke = {
|
|
2033
|
-
$$type: "stroke",
|
|
2034
|
-
value: {
|
|
2035
|
-
color: {
|
|
2036
|
-
$$type: "color",
|
|
2037
|
-
value: "#000000"
|
|
2038
|
-
},
|
|
2039
|
-
width: {
|
|
2040
|
-
$$type: "size",
|
|
2041
|
-
value: {
|
|
2042
|
-
unit: "px",
|
|
2043
|
-
size: 1
|
|
2044
|
-
}
|
|
2045
|
-
}
|
|
2046
|
-
}
|
|
2047
|
-
};
|
|
2048
|
-
var TextStrokeField = () => {
|
|
2049
|
-
const [textStroke, setTextStroke] = useStylesField("stroke");
|
|
2050
|
-
const addTextStroke = () => {
|
|
2051
|
-
setTextStroke(initTextStroke);
|
|
2052
|
-
};
|
|
2053
|
-
const removeTextStroke = () => {
|
|
2054
|
-
setTextStroke(null);
|
|
2055
|
-
};
|
|
2056
|
-
const hasTextStroke = Boolean(textStroke);
|
|
2057
|
-
return /* @__PURE__ */ React53.createElement(
|
|
2058
|
-
AddOrRemoveContent,
|
|
2059
|
-
{
|
|
2060
|
-
label: (0, import_i18n35.__)("Text Stroke", "elementor"),
|
|
2061
|
-
isAdded: hasTextStroke,
|
|
2062
|
-
onAdd: addTextStroke,
|
|
2063
|
-
onRemove: removeTextStroke
|
|
2064
|
-
},
|
|
2065
|
-
/* @__PURE__ */ React53.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React53.createElement(import_editor_controls37.StrokeControl, null))
|
|
2066
|
-
);
|
|
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))));
|
|
2067
2023
|
};
|
|
2068
2024
|
|
|
2069
|
-
// src/components/style-sections/typography-section/text-
|
|
2025
|
+
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
2070
2026
|
var React54 = __toESM(require("react"));
|
|
2071
|
-
var
|
|
2027
|
+
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
2072
2028
|
var import_icons18 = require("@elementor/icons");
|
|
2073
|
-
var
|
|
2074
|
-
var
|
|
2029
|
+
var import_ui46 = require("@elementor/ui");
|
|
2030
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
2075
2031
|
var buttonSize = "tiny";
|
|
2076
|
-
var
|
|
2077
|
-
const [fontStyle, setFontStyle] = useStylesField("font-style");
|
|
2032
|
+
var TextDecorationField = () => {
|
|
2078
2033
|
const [textDecoration, setTextDecoration] = useStylesField("text-decoration");
|
|
2079
|
-
const formats = [
|
|
2080
|
-
const handleSetFontStyle = (newValue) => {
|
|
2081
|
-
if (newValue === null) {
|
|
2082
|
-
return setFontStyle(null);
|
|
2083
|
-
}
|
|
2084
|
-
setFontStyle({
|
|
2085
|
-
$$type: "string",
|
|
2086
|
-
value: newValue
|
|
2087
|
-
});
|
|
2088
|
-
};
|
|
2034
|
+
const formats = [...(textDecoration?.value || "").split(" ")];
|
|
2089
2035
|
const handleSetTextDecoration = (newValue) => {
|
|
2090
2036
|
if (newValue === null) {
|
|
2091
2037
|
return setTextDecoration(null);
|
|
@@ -2095,16 +2041,7 @@ var TextStyleField = () => {
|
|
|
2095
2041
|
value: newValue
|
|
2096
2042
|
});
|
|
2097
2043
|
};
|
|
2098
|
-
return /* @__PURE__ */ React54.createElement(
|
|
2099
|
-
ToggleButton,
|
|
2100
|
-
{
|
|
2101
|
-
value: "italic",
|
|
2102
|
-
onChange: (v) => handleSetFontStyle(fontStyle?.value === v ? null : v),
|
|
2103
|
-
"aria-label": "italic",
|
|
2104
|
-
sx: { marginLeft: "auto" }
|
|
2105
|
-
},
|
|
2106
|
-
/* @__PURE__ */ React54.createElement(import_icons18.ItalicIcon, { fontSize: buttonSize })
|
|
2107
|
-
), /* @__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(
|
|
2108
2045
|
ShorthandControl,
|
|
2109
2046
|
{
|
|
2110
2047
|
value: "line-through",
|
|
@@ -2146,55 +2083,118 @@ var ToggleButton = ({ onChange, ...props }) => {
|
|
|
2146
2083
|
const handleChange = (_e, newValue) => {
|
|
2147
2084
|
onChange(newValue);
|
|
2148
2085
|
};
|
|
2149
|
-
return /* @__PURE__ */ React54.createElement(
|
|
2086
|
+
return /* @__PURE__ */ React54.createElement(import_ui46.ToggleButton, { ...props, onChange: handleChange, size: buttonSize });
|
|
2150
2087
|
};
|
|
2151
2088
|
|
|
2152
|
-
// src/components/style-sections/typography-section/
|
|
2089
|
+
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
2153
2090
|
var React55 = __toESM(require("react"));
|
|
2154
|
-
var
|
|
2091
|
+
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
2155
2092
|
var import_icons19 = require("@elementor/icons");
|
|
2156
|
-
var
|
|
2157
|
-
var
|
|
2093
|
+
var import_ui47 = require("@elementor/ui");
|
|
2094
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
2158
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 = [
|
|
2159
2159
|
{
|
|
2160
2160
|
value: "none",
|
|
2161
|
-
label: (0,
|
|
2162
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2161
|
+
label: (0, import_i18n38.__)("None", "elementor"),
|
|
2162
|
+
renderContent: ({ size }) => /* @__PURE__ */ React57.createElement(import_icons20.MinusIcon, { fontSize: size }),
|
|
2163
2163
|
showTooltip: true
|
|
2164
2164
|
},
|
|
2165
2165
|
{
|
|
2166
2166
|
value: "capitalize",
|
|
2167
|
-
label: (0,
|
|
2168
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2167
|
+
label: (0, import_i18n38.__)("Capitalize", "elementor"),
|
|
2168
|
+
renderContent: ({ size }) => /* @__PURE__ */ React57.createElement(import_icons20.LetterCaseIcon, { fontSize: size }),
|
|
2169
2169
|
showTooltip: true
|
|
2170
2170
|
},
|
|
2171
2171
|
{
|
|
2172
2172
|
value: "uppercase",
|
|
2173
|
-
label: (0,
|
|
2174
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2173
|
+
label: (0, import_i18n38.__)("Uppercase", "elementor"),
|
|
2174
|
+
renderContent: ({ size }) => /* @__PURE__ */ React57.createElement(import_icons20.LetterCaseUpperIcon, { fontSize: size }),
|
|
2175
2175
|
showTooltip: true
|
|
2176
2176
|
},
|
|
2177
2177
|
{
|
|
2178
2178
|
value: "lowercase",
|
|
2179
|
-
label: (0,
|
|
2180
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2179
|
+
label: (0, import_i18n38.__)("Lowercase", "elementor"),
|
|
2180
|
+
renderContent: ({ size }) => /* @__PURE__ */ React57.createElement(import_icons20.LetterCaseLowerIcon, { fontSize: size }),
|
|
2181
2181
|
showTooltip: true
|
|
2182
2182
|
}
|
|
2183
2183
|
];
|
|
2184
|
-
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 }))));
|
|
2185
2185
|
|
|
2186
2186
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
2187
|
-
var
|
|
2188
|
-
var
|
|
2189
|
-
var
|
|
2190
|
-
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");
|
|
2191
2191
|
var WordSpacingField = () => {
|
|
2192
|
-
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))));
|
|
2193
2193
|
};
|
|
2194
2194
|
|
|
2195
2195
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
2196
2196
|
var TypographySection = () => {
|
|
2197
|
-
return /* @__PURE__ */
|
|
2197
|
+
return /* @__PURE__ */ 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))));
|
|
2198
2198
|
};
|
|
2199
2199
|
|
|
2200
2200
|
// src/components/style-tab.tsx
|
|
@@ -2204,7 +2204,7 @@ var StyleTab = () => {
|
|
|
2204
2204
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
2205
2205
|
const [activeStyleState, setActiveStyleState] = (0, import_react13.useState)(null);
|
|
2206
2206
|
const breakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
|
|
2207
|
-
return /* @__PURE__ */
|
|
2207
|
+
return /* @__PURE__ */ React60.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React60.createElement(
|
|
2208
2208
|
StyleProvider,
|
|
2209
2209
|
{
|
|
2210
2210
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -2215,7 +2215,7 @@ var StyleTab = () => {
|
|
|
2215
2215
|
},
|
|
2216
2216
|
setMetaState: setActiveStyleState
|
|
2217
2217
|
},
|
|
2218
|
-
/* @__PURE__ */
|
|
2218
|
+
/* @__PURE__ */ 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))))
|
|
2219
2219
|
));
|
|
2220
2220
|
};
|
|
2221
2221
|
function useActiveStyleDefId(currentClassesProp) {
|
|
@@ -2243,11 +2243,11 @@ function useCurrentClassesProp() {
|
|
|
2243
2243
|
// src/components/editing-panel-tabs.tsx
|
|
2244
2244
|
var EditingPanelTabs = () => {
|
|
2245
2245
|
const { element } = useElement();
|
|
2246
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
2246
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui52.useTabs)("settings");
|
|
2247
2247
|
return (
|
|
2248
2248
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
2249
2249
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
2250
|
-
/* @__PURE__ */
|
|
2250
|
+
/* @__PURE__ */ 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))))
|
|
2251
2251
|
);
|
|
2252
2252
|
};
|
|
2253
2253
|
|
|
@@ -2260,8 +2260,8 @@ var EditingPanel = () => {
|
|
|
2260
2260
|
if (!element || !elementType) {
|
|
2261
2261
|
return null;
|
|
2262
2262
|
}
|
|
2263
|
-
const panelTitle = (0,
|
|
2264
|
-
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))))))));
|
|
2265
2265
|
};
|
|
2266
2266
|
|
|
2267
2267
|
// src/panel.ts
|
|
@@ -2328,12 +2328,12 @@ var EditingPanelHooks = () => {
|
|
|
2328
2328
|
};
|
|
2329
2329
|
|
|
2330
2330
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
2331
|
-
var
|
|
2331
|
+
var React65 = __toESM(require("react"));
|
|
2332
2332
|
var import_react20 = require("react");
|
|
2333
|
-
var
|
|
2334
|
-
var
|
|
2335
|
-
var
|
|
2336
|
-
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");
|
|
2337
2337
|
|
|
2338
2338
|
// src/hooks/use-persist-dynamic-value.ts
|
|
2339
2339
|
var import_session5 = require("@elementor/session");
|
|
@@ -2344,15 +2344,15 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
2344
2344
|
};
|
|
2345
2345
|
|
|
2346
2346
|
// src/dynamics/dynamic-control.tsx
|
|
2347
|
-
var
|
|
2348
|
-
var
|
|
2347
|
+
var React63 = __toESM(require("react"));
|
|
2348
|
+
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
2349
2349
|
|
|
2350
2350
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
2351
2351
|
var import_react18 = require("react");
|
|
2352
2352
|
|
|
2353
2353
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
2354
2354
|
var import_react17 = require("react");
|
|
2355
|
-
var
|
|
2355
|
+
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
2356
2356
|
|
|
2357
2357
|
// src/dynamics/sync/get-elementor-config.ts
|
|
2358
2358
|
var getElementorConfig2 = () => {
|
|
@@ -2398,7 +2398,7 @@ var dynamicPropTypeUtil = (0, import_editor_props4.createPropUtils)(
|
|
|
2398
2398
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
2399
2399
|
var usePropDynamicTags = () => {
|
|
2400
2400
|
let categories = [];
|
|
2401
|
-
const { propType } = (0,
|
|
2401
|
+
const { propType } = (0, import_editor_controls43.useBoundProp)();
|
|
2402
2402
|
if (propType) {
|
|
2403
2403
|
const propDynamicType = getDynamicPropType(propType);
|
|
2404
2404
|
categories = propDynamicType?.settings.categories || [];
|
|
@@ -2424,7 +2424,7 @@ var useDynamicTag = (tagName) => {
|
|
|
2424
2424
|
|
|
2425
2425
|
// src/dynamics/dynamic-control.tsx
|
|
2426
2426
|
var DynamicControl = ({ bind, children }) => {
|
|
2427
|
-
const { value, setValue } = (0,
|
|
2427
|
+
const { value, setValue } = (0, import_editor_controls44.useBoundProp)(dynamicPropTypeUtil);
|
|
2428
2428
|
const { name = "", settings } = value ?? {};
|
|
2429
2429
|
const dynamicTag = useDynamicTag(name);
|
|
2430
2430
|
if (!dynamicTag) {
|
|
@@ -2443,25 +2443,25 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
2443
2443
|
});
|
|
2444
2444
|
};
|
|
2445
2445
|
const propType = createTopLevelOjectType({ schema: dynamicTag.props_schema });
|
|
2446
|
-
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));
|
|
2447
2447
|
};
|
|
2448
2448
|
|
|
2449
2449
|
// src/dynamics/components/dynamic-selection.tsx
|
|
2450
|
-
var
|
|
2450
|
+
var React64 = __toESM(require("react"));
|
|
2451
2451
|
var import_react19 = require("react");
|
|
2452
|
-
var
|
|
2453
|
-
var
|
|
2454
|
-
var
|
|
2455
|
-
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");
|
|
2456
2456
|
var SIZE3 = "tiny";
|
|
2457
2457
|
var DynamicSelection = ({ onSelect }) => {
|
|
2458
2458
|
const [searchValue, setSearchValue] = (0, import_react19.useState)("");
|
|
2459
2459
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
2460
|
-
const { value: anyValue } = (0,
|
|
2461
|
-
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);
|
|
2462
2462
|
const [, updatePropValueHistory] = usePersistDynamicValue(bind);
|
|
2463
2463
|
const isCurrentValueDynamic = !!dynamicValue;
|
|
2464
|
-
const
|
|
2464
|
+
const options11 = useFilteredOptions(searchValue);
|
|
2465
2465
|
const handleSearch = (event) => {
|
|
2466
2466
|
setSearchValue(event.target.value);
|
|
2467
2467
|
};
|
|
@@ -2472,22 +2472,22 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2472
2472
|
setValue({ name: value, settings: {} });
|
|
2473
2473
|
onSelect?.();
|
|
2474
2474
|
};
|
|
2475
|
-
return /* @__PURE__ */
|
|
2476
|
-
|
|
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,
|
|
2477
2477
|
{
|
|
2478
2478
|
fullWidth: true,
|
|
2479
2479
|
size: SIZE3,
|
|
2480
2480
|
value: searchValue,
|
|
2481
2481
|
onChange: handleSearch,
|
|
2482
|
-
placeholder: (0,
|
|
2482
|
+
placeholder: (0, import_i18n43.__)("Search dynamic tag", "elementor"),
|
|
2483
2483
|
InputProps: {
|
|
2484
|
-
startAdornment: /* @__PURE__ */
|
|
2484
|
+
startAdornment: /* @__PURE__ */ React64.createElement(import_ui54.InputAdornment, { position: "start" }, /* @__PURE__ */ React64.createElement(import_icons21.SearchIcon, { fontSize: SIZE3 }))
|
|
2485
2485
|
}
|
|
2486
2486
|
}
|
|
2487
|
-
)), /* @__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 }) => {
|
|
2488
2488
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
2489
|
-
return /* @__PURE__ */
|
|
2490
|
-
|
|
2489
|
+
return /* @__PURE__ */ React64.createElement(
|
|
2490
|
+
import_ui54.MenuItem,
|
|
2491
2491
|
{
|
|
2492
2492
|
key: value,
|
|
2493
2493
|
selected: isSelected,
|
|
@@ -2497,20 +2497,20 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2497
2497
|
},
|
|
2498
2498
|
tagLabel
|
|
2499
2499
|
);
|
|
2500
|
-
})))) : /* @__PURE__ */
|
|
2501
|
-
|
|
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,
|
|
2502
2502
|
{
|
|
2503
2503
|
color: "secondary",
|
|
2504
2504
|
variant: "caption",
|
|
2505
2505
|
component: "button",
|
|
2506
2506
|
onClick: () => setSearchValue("")
|
|
2507
2507
|
},
|
|
2508
|
-
(0,
|
|
2509
|
-
), "\xA0", (0,
|
|
2508
|
+
(0, import_i18n43.__)("Clear the filters", "elementor")
|
|
2509
|
+
), "\xA0", (0, import_i18n43.__)("and try again.", "elementor")))));
|
|
2510
2510
|
};
|
|
2511
2511
|
var useFilteredOptions = (searchValue) => {
|
|
2512
2512
|
const dynamicTags = usePropDynamicTags();
|
|
2513
|
-
const
|
|
2513
|
+
const options11 = dynamicTags.reduce((categories, { name, label, group }) => {
|
|
2514
2514
|
const isVisible = label.toLowerCase().includes(searchValue.trim().toLowerCase());
|
|
2515
2515
|
if (!isVisible) {
|
|
2516
2516
|
return categories;
|
|
@@ -2521,18 +2521,18 @@ var useFilteredOptions = (searchValue) => {
|
|
|
2521
2521
|
categories.get(group)?.push({ label, value: name });
|
|
2522
2522
|
return categories;
|
|
2523
2523
|
}, /* @__PURE__ */ new Map());
|
|
2524
|
-
return [...
|
|
2524
|
+
return [...options11];
|
|
2525
2525
|
};
|
|
2526
2526
|
|
|
2527
2527
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
2528
2528
|
var SIZE4 = "tiny";
|
|
2529
2529
|
var DynamicSelectionControl = () => {
|
|
2530
|
-
const { setValue: setAnyValue } = (0,
|
|
2531
|
-
const { bind, value } = (0,
|
|
2530
|
+
const { setValue: setAnyValue } = (0, import_editor_controls46.useBoundProp)();
|
|
2531
|
+
const { bind, value } = (0, import_editor_controls46.useBoundProp)(dynamicPropTypeUtil);
|
|
2532
2532
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
2533
2533
|
const { name: tagName = "" } = value;
|
|
2534
2534
|
const selectionPopoverId = (0, import_react20.useId)();
|
|
2535
|
-
const selectionPopoverState = (0,
|
|
2535
|
+
const selectionPopoverState = (0, import_ui55.usePopupState)({ variant: "popover", popupId: selectionPopoverId });
|
|
2536
2536
|
const dynamicTag = useDynamicTag(tagName);
|
|
2537
2537
|
const removeDynamicTag = () => {
|
|
2538
2538
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -2540,70 +2540,70 @@ var DynamicSelectionControl = () => {
|
|
|
2540
2540
|
if (!dynamicTag) {
|
|
2541
2541
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
2542
2542
|
}
|
|
2543
|
-
return /* @__PURE__ */
|
|
2544
|
-
|
|
2543
|
+
return /* @__PURE__ */ React65.createElement(import_ui55.Box, null, /* @__PURE__ */ React65.createElement(
|
|
2544
|
+
import_ui55.UnstableTag,
|
|
2545
2545
|
{
|
|
2546
2546
|
fullWidth: true,
|
|
2547
2547
|
showActionsOnHover: true,
|
|
2548
2548
|
label: dynamicTag.label,
|
|
2549
|
-
startIcon: /* @__PURE__ */
|
|
2550
|
-
...(0,
|
|
2551
|
-
actions: /* @__PURE__ */
|
|
2552
|
-
|
|
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,
|
|
2553
2553
|
{
|
|
2554
2554
|
size: SIZE4,
|
|
2555
2555
|
onClick: removeDynamicTag,
|
|
2556
|
-
"aria-label": (0,
|
|
2556
|
+
"aria-label": (0, import_i18n44.__)("Remove dynamic value", "elementor")
|
|
2557
2557
|
},
|
|
2558
|
-
/* @__PURE__ */
|
|
2558
|
+
/* @__PURE__ */ React65.createElement(import_icons22.XIcon, { fontSize: SIZE4 })
|
|
2559
2559
|
))
|
|
2560
2560
|
}
|
|
2561
|
-
), /* @__PURE__ */
|
|
2562
|
-
|
|
2561
|
+
), /* @__PURE__ */ React65.createElement(
|
|
2562
|
+
import_ui55.Popover,
|
|
2563
2563
|
{
|
|
2564
2564
|
disablePortal: true,
|
|
2565
2565
|
disableScrollLock: true,
|
|
2566
2566
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
2567
|
-
...(0,
|
|
2567
|
+
...(0, import_ui55.bindPopover)(selectionPopoverState)
|
|
2568
2568
|
},
|
|
2569
|
-
/* @__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 }))
|
|
2570
2570
|
));
|
|
2571
2571
|
};
|
|
2572
2572
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
2573
2573
|
const popupId = (0, import_react20.useId)();
|
|
2574
|
-
const settingsPopupState = (0,
|
|
2574
|
+
const settingsPopupState = (0, import_ui55.usePopupState)({ variant: "popover", popupId });
|
|
2575
2575
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
2576
2576
|
if (!hasDynamicSettings) {
|
|
2577
2577
|
return null;
|
|
2578
2578
|
}
|
|
2579
|
-
return /* @__PURE__ */
|
|
2580
|
-
|
|
2579
|
+
return /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement(
|
|
2580
|
+
import_ui55.IconButton,
|
|
2581
2581
|
{
|
|
2582
2582
|
size: SIZE4,
|
|
2583
|
-
...(0,
|
|
2584
|
-
"aria-label": (0,
|
|
2583
|
+
...(0, import_ui55.bindTrigger)(settingsPopupState),
|
|
2584
|
+
"aria-label": (0, import_i18n44.__)("Settings", "elementor")
|
|
2585
2585
|
},
|
|
2586
|
-
/* @__PURE__ */
|
|
2587
|
-
), /* @__PURE__ */
|
|
2588
|
-
|
|
2586
|
+
/* @__PURE__ */ React65.createElement(import_icons22.SettingsIcon, { fontSize: SIZE4 })
|
|
2587
|
+
), /* @__PURE__ */ React65.createElement(
|
|
2588
|
+
import_ui55.Popover,
|
|
2589
2589
|
{
|
|
2590
2590
|
disableScrollLock: true,
|
|
2591
2591
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
2592
|
-
...(0,
|
|
2592
|
+
...(0, import_ui55.bindPopover)(settingsPopupState)
|
|
2593
2593
|
},
|
|
2594
|
-
/* @__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 }))
|
|
2595
2595
|
));
|
|
2596
2596
|
};
|
|
2597
2597
|
var DynamicSettings = ({ controls }) => {
|
|
2598
2598
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
2599
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
2599
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui55.useTabs)(0);
|
|
2600
2600
|
if (!tabs.length) {
|
|
2601
2601
|
return null;
|
|
2602
2602
|
}
|
|
2603
|
-
return /* @__PURE__ */
|
|
2604
|
-
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) => {
|
|
2605
2605
|
if (item.type === "control") {
|
|
2606
|
-
return /* @__PURE__ */
|
|
2606
|
+
return /* @__PURE__ */ React65.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
2607
2607
|
}
|
|
2608
2608
|
return null;
|
|
2609
2609
|
})));
|
|
@@ -2613,22 +2613,22 @@ var Control3 = ({ control }) => {
|
|
|
2613
2613
|
if (!getControlByType(control.type)) {
|
|
2614
2614
|
return null;
|
|
2615
2615
|
}
|
|
2616
|
-
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 }));
|
|
2617
2617
|
};
|
|
2618
2618
|
|
|
2619
2619
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
2620
|
-
var
|
|
2621
|
-
var
|
|
2622
|
-
var
|
|
2623
|
-
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");
|
|
2624
2624
|
var usePropDynamicAction = () => {
|
|
2625
|
-
const { propType } = (0,
|
|
2625
|
+
const { propType } = (0, import_editor_controls47.useBoundProp)();
|
|
2626
2626
|
const visible = !!propType && supportsDynamic(propType);
|
|
2627
2627
|
return {
|
|
2628
2628
|
visible,
|
|
2629
|
-
icon:
|
|
2630
|
-
title: (0,
|
|
2631
|
-
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 })
|
|
2632
2632
|
};
|
|
2633
2633
|
};
|
|
2634
2634
|
|