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