@elementor/editor-editing-panel 1.5.0 → 1.6.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 +24 -0
- package/dist/index.d.mts +37 -3
- package/dist/index.d.ts +37 -3
- package/dist/index.js +708 -538
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +604 -420
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -6
- package/src/components/css-class-menu.tsx +125 -0
- package/src/components/css-class-selector.tsx +71 -9
- package/src/components/style-tab.tsx +12 -3
- package/src/contexts/css-class-item-context.tsx +31 -0
- package/src/contexts/style-context.tsx +4 -3
- package/src/css-classes.ts +37 -0
- package/src/index.ts +1 -0
- package/src/init.ts +2 -0
package/dist/index.js
CHANGED
|
@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
+
registerGlobalClassMenuItem: () => registerGlobalClassMenuItem,
|
|
34
|
+
registerStateMenuItem: () => registerStateMenuItem,
|
|
33
35
|
replaceControl: () => replaceControl,
|
|
34
36
|
useBoundProp: () => import_editor_controls46.useBoundProp
|
|
35
37
|
});
|
|
@@ -40,13 +42,122 @@ var import_editor_controls46 = require("@elementor/editor-controls");
|
|
|
40
42
|
var import_editor_controls = require("@elementor/editor-controls");
|
|
41
43
|
var { replaceControl, getControlReplacement } = (0, import_editor_controls.createControlReplacement)();
|
|
42
44
|
|
|
45
|
+
// src/components/css-class-menu.tsx
|
|
46
|
+
var React3 = __toESM(require("react"));
|
|
47
|
+
var import_icons = require("@elementor/icons");
|
|
48
|
+
var import_menus = require("@elementor/menus");
|
|
49
|
+
var import_ui = require("@elementor/ui");
|
|
50
|
+
var import_i18n = require("@wordpress/i18n");
|
|
51
|
+
|
|
52
|
+
// src/contexts/css-class-item-context.tsx
|
|
53
|
+
var React = __toESM(require("react"));
|
|
54
|
+
var import_react = require("react");
|
|
55
|
+
var ClassItemContext = (0, import_react.createContext)({
|
|
56
|
+
styleId: "",
|
|
57
|
+
isGlobal: false,
|
|
58
|
+
isActive: false
|
|
59
|
+
});
|
|
60
|
+
function CssClassItemProvider({ styleId, isGlobal, isActive, children }) {
|
|
61
|
+
return /* @__PURE__ */ React.createElement(ClassItemContext.Provider, { value: { styleId, isGlobal, isActive } }, children);
|
|
62
|
+
}
|
|
63
|
+
function useCssClassItem() {
|
|
64
|
+
const context = React.useContext(ClassItemContext);
|
|
65
|
+
if (!context) {
|
|
66
|
+
throw new Error("useCssClassItem must be used within a CssClassItemProvider");
|
|
67
|
+
}
|
|
68
|
+
return context;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// src/contexts/style-context.tsx
|
|
72
|
+
var React2 = __toESM(require("react"));
|
|
73
|
+
var import_react2 = require("react");
|
|
74
|
+
var Context = (0, import_react2.createContext)(null);
|
|
75
|
+
function StyleProvider({ children, id, setId, meta, setMetaState }) {
|
|
76
|
+
return /* @__PURE__ */ React2.createElement(Context.Provider, { value: { id, setId, meta, setMetaState } }, children);
|
|
77
|
+
}
|
|
78
|
+
function useStyle() {
|
|
79
|
+
const context = (0, import_react2.useContext)(Context);
|
|
80
|
+
if (!context) {
|
|
81
|
+
throw new Error("useStyle must be used within a StyleProvider");
|
|
82
|
+
}
|
|
83
|
+
return context;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// src/components/css-class-menu.tsx
|
|
87
|
+
var { useMenuItems: useStateMenuItems, registerStateMenuItem } = (0, import_menus.createMenu)({
|
|
88
|
+
components: {
|
|
89
|
+
StateMenuItem
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
var { useMenuItems: useGlobalClassMenuItems, registerGlobalClassMenuItem } = (0, import_menus.createMenu)({
|
|
93
|
+
components: {
|
|
94
|
+
GlobalClassMenuItem
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
function CssClassMenu({
|
|
98
|
+
popupState,
|
|
99
|
+
containerRef
|
|
100
|
+
}) {
|
|
101
|
+
const { isGlobal } = useCssClassItem();
|
|
102
|
+
const { default: globalClassMenuItems } = useGlobalClassMenuItems();
|
|
103
|
+
const { default: stateMenuItems } = useStateMenuItems();
|
|
104
|
+
return /* @__PURE__ */ React3.createElement(
|
|
105
|
+
import_ui.Menu,
|
|
106
|
+
{
|
|
107
|
+
MenuListProps: { dense: true },
|
|
108
|
+
...(0, import_ui.bindMenu)(popupState),
|
|
109
|
+
anchorOrigin: {
|
|
110
|
+
vertical: "top",
|
|
111
|
+
horizontal: "right"
|
|
112
|
+
},
|
|
113
|
+
anchorEl: containerRef.current
|
|
114
|
+
},
|
|
115
|
+
isGlobal && /* @__PURE__ */ React3.createElement(GlobalClassMenuSection, null, globalClassMenuItems.map(({ id, MenuItem: MenuItemComponent }) => /* @__PURE__ */ React3.createElement(MenuItemComponent, { key: id }))),
|
|
116
|
+
/* @__PURE__ */ React3.createElement(import_ui.ListSubheader, null, (0, import_i18n.__)("Add a pseudo selector", "elementor")),
|
|
117
|
+
stateMenuItems.map(({ id, MenuItem: MenuItemComponent }) => /* @__PURE__ */ React3.createElement(MenuItemComponent, { key: id }))
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
function StateMenuItem({ state, disabled }) {
|
|
121
|
+
const { isActive, styleId } = useCssClassItem();
|
|
122
|
+
const { setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
|
|
123
|
+
const { state: activeState } = meta;
|
|
124
|
+
const isSelected = state === activeState && isActive;
|
|
125
|
+
return /* @__PURE__ */ React3.createElement(
|
|
126
|
+
StyledMenuItem,
|
|
127
|
+
{
|
|
128
|
+
selected: state === activeState && isActive,
|
|
129
|
+
disabled,
|
|
130
|
+
onClick: () => {
|
|
131
|
+
if (!isActive) {
|
|
132
|
+
setActiveId(styleId);
|
|
133
|
+
}
|
|
134
|
+
setActiveMetaState(state);
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
isSelected && /* @__PURE__ */ React3.createElement(import_ui.ListItemIcon, null, /* @__PURE__ */ React3.createElement(import_icons.CheckIcon, null)),
|
|
138
|
+
/* @__PURE__ */ React3.createElement(import_ui.ListItemText, { primary: state ? `:${state}` : "Normal" })
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
function GlobalClassMenuItem({ text, onClick }) {
|
|
142
|
+
return /* @__PURE__ */ React3.createElement(StyledMenuItem, { onClick }, /* @__PURE__ */ React3.createElement(import_ui.ListItemText, { primary: text }));
|
|
143
|
+
}
|
|
144
|
+
var GlobalClassMenuSection = (0, import_ui.styled)(import_ui.Box)(({ theme }) => ({
|
|
145
|
+
borderBottom: `1px solid ${theme?.palette.divider}`
|
|
146
|
+
}));
|
|
147
|
+
var StyledMenuItem = (0, import_ui.styled)(import_ui.MenuItem)({
|
|
148
|
+
"&:hover": {
|
|
149
|
+
color: "text.primary"
|
|
150
|
+
// Overriding global CSS from the editor.
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
|
|
43
154
|
// src/init.ts
|
|
44
155
|
var import_editor = require("@elementor/editor");
|
|
45
156
|
var import_editor_panels3 = require("@elementor/editor-panels");
|
|
46
157
|
var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
|
|
47
158
|
|
|
48
159
|
// src/hooks/use-close-editor-panel.ts
|
|
49
|
-
var
|
|
160
|
+
var import_react15 = require("react");
|
|
50
161
|
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
51
162
|
var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
52
163
|
|
|
@@ -54,22 +165,22 @@ var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
|
54
165
|
var import_editor_panels2 = require("@elementor/editor-panels");
|
|
55
166
|
|
|
56
167
|
// src/components/editing-panel.tsx
|
|
57
|
-
var
|
|
168
|
+
var React61 = __toESM(require("react"));
|
|
58
169
|
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
59
170
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
60
171
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
61
|
-
var
|
|
62
|
-
var
|
|
172
|
+
var import_ui51 = require("@elementor/ui");
|
|
173
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
63
174
|
|
|
64
175
|
// src/contexts/element-context.tsx
|
|
65
|
-
var
|
|
66
|
-
var
|
|
67
|
-
var
|
|
176
|
+
var React4 = __toESM(require("react"));
|
|
177
|
+
var import_react3 = require("react");
|
|
178
|
+
var Context2 = (0, import_react3.createContext)(null);
|
|
68
179
|
function ElementProvider({ children, element, elementType }) {
|
|
69
|
-
return /* @__PURE__ */
|
|
180
|
+
return /* @__PURE__ */ React4.createElement(Context2.Provider, { value: { element, elementType } }, children);
|
|
70
181
|
}
|
|
71
182
|
function useElement() {
|
|
72
|
-
const context = (0,
|
|
183
|
+
const context = (0, import_react3.useContext)(Context2);
|
|
73
184
|
if (!context) {
|
|
74
185
|
throw new Error("useElement must be used within a ElementProvider");
|
|
75
186
|
}
|
|
@@ -77,13 +188,13 @@ function useElement() {
|
|
|
77
188
|
}
|
|
78
189
|
|
|
79
190
|
// src/controls-actions.ts
|
|
80
|
-
var
|
|
191
|
+
var import_menus2 = require("@elementor/menus");
|
|
81
192
|
|
|
82
193
|
// src/popover-action.tsx
|
|
83
|
-
var
|
|
84
|
-
var
|
|
85
|
-
var
|
|
86
|
-
var
|
|
194
|
+
var React5 = __toESM(require("react"));
|
|
195
|
+
var import_react4 = require("react");
|
|
196
|
+
var import_icons2 = require("@elementor/icons");
|
|
197
|
+
var import_ui2 = require("@elementor/ui");
|
|
87
198
|
var SIZE = "tiny";
|
|
88
199
|
function PopoverAction({
|
|
89
200
|
title,
|
|
@@ -91,16 +202,16 @@ function PopoverAction({
|
|
|
91
202
|
icon: Icon,
|
|
92
203
|
popoverContent: PopoverContent
|
|
93
204
|
}) {
|
|
94
|
-
const id = (0,
|
|
95
|
-
const popupState = (0,
|
|
205
|
+
const id = (0, import_react4.useId)();
|
|
206
|
+
const popupState = (0, import_ui2.usePopupState)({
|
|
96
207
|
variant: "popover",
|
|
97
208
|
popupId: `elementor-popover-action-${id}`
|
|
98
209
|
});
|
|
99
210
|
if (!visible) {
|
|
100
211
|
return null;
|
|
101
212
|
}
|
|
102
|
-
return /* @__PURE__ */
|
|
103
|
-
|
|
213
|
+
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui2.Tooltip, { placement: "top", title }, /* @__PURE__ */ React5.createElement(import_ui2.IconButton, { "aria-label": title, key: id, size: SIZE, ...(0, import_ui2.bindToggle)(popupState) }, /* @__PURE__ */ React5.createElement(Icon, { fontSize: SIZE }))), /* @__PURE__ */ React5.createElement(
|
|
214
|
+
import_ui2.Popover,
|
|
104
215
|
{
|
|
105
216
|
disablePortal: true,
|
|
106
217
|
disableScrollLock: true,
|
|
@@ -108,39 +219,39 @@ function PopoverAction({
|
|
|
108
219
|
vertical: "bottom",
|
|
109
220
|
horizontal: "center"
|
|
110
221
|
},
|
|
111
|
-
...(0,
|
|
222
|
+
...(0, import_ui2.bindPopover)(popupState)
|
|
112
223
|
},
|
|
113
|
-
/* @__PURE__ */
|
|
114
|
-
/* @__PURE__ */
|
|
224
|
+
/* @__PURE__ */ React5.createElement(import_ui2.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React5.createElement(Icon, { fontSize: SIZE, sx: { mr: 0.5 } }), /* @__PURE__ */ React5.createElement(import_ui2.Typography, { variant: "subtitle2" }, title), /* @__PURE__ */ React5.createElement(import_ui2.IconButton, { sx: { ml: "auto" }, size: SIZE, onClick: popupState.close }, /* @__PURE__ */ React5.createElement(import_icons2.XIcon, { fontSize: SIZE }))),
|
|
225
|
+
/* @__PURE__ */ React5.createElement(PopoverContent, { closePopover: popupState.close })
|
|
115
226
|
));
|
|
116
227
|
}
|
|
117
228
|
|
|
118
229
|
// src/controls-actions.ts
|
|
119
|
-
var controlActionsMenu = (0,
|
|
230
|
+
var controlActionsMenu = (0, import_menus2.createMenu)({
|
|
120
231
|
components: {
|
|
121
232
|
PopoverAction
|
|
122
233
|
}
|
|
123
234
|
});
|
|
124
235
|
|
|
125
236
|
// src/components/editing-panel-error-fallback.tsx
|
|
126
|
-
var
|
|
127
|
-
var
|
|
237
|
+
var React6 = __toESM(require("react"));
|
|
238
|
+
var import_ui3 = require("@elementor/ui");
|
|
128
239
|
function EditorPanelErrorFallback() {
|
|
129
|
-
return /* @__PURE__ */
|
|
240
|
+
return /* @__PURE__ */ React6.createElement(import_ui3.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React6.createElement(import_ui3.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React6.createElement("strong", null, "Something went wrong")));
|
|
130
241
|
}
|
|
131
242
|
|
|
132
243
|
// src/components/editing-panel-tabs.tsx
|
|
133
|
-
var
|
|
134
|
-
var
|
|
135
|
-
var
|
|
136
|
-
var
|
|
244
|
+
var React60 = __toESM(require("react"));
|
|
245
|
+
var import_react14 = require("react");
|
|
246
|
+
var import_ui50 = require("@elementor/ui");
|
|
247
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
137
248
|
|
|
138
249
|
// src/components/settings-tab.tsx
|
|
139
|
-
var
|
|
250
|
+
var React12 = __toESM(require("react"));
|
|
140
251
|
var import_editor_controls4 = require("@elementor/editor-controls");
|
|
141
252
|
|
|
142
253
|
// src/controls-registry/control.tsx
|
|
143
|
-
var
|
|
254
|
+
var React7 = __toESM(require("react"));
|
|
144
255
|
var import_utils = require("@elementor/utils");
|
|
145
256
|
|
|
146
257
|
// src/controls-registry/controls-registry.tsx
|
|
@@ -169,20 +280,20 @@ var Control = ({ props, type }) => {
|
|
|
169
280
|
context: { type }
|
|
170
281
|
});
|
|
171
282
|
}
|
|
172
|
-
return /* @__PURE__ */
|
|
283
|
+
return /* @__PURE__ */ React7.createElement(ControlByType, { ...props });
|
|
173
284
|
};
|
|
174
285
|
|
|
175
286
|
// src/controls-registry/control-type-container.tsx
|
|
176
|
-
var
|
|
177
|
-
var
|
|
287
|
+
var React8 = __toESM(require("react"));
|
|
288
|
+
var import_ui4 = require("@elementor/ui");
|
|
178
289
|
var ControlTypeContainer = ({
|
|
179
290
|
controlType,
|
|
180
291
|
children
|
|
181
292
|
}) => {
|
|
182
293
|
const layout = getLayoutByType(controlType);
|
|
183
|
-
return /* @__PURE__ */
|
|
294
|
+
return /* @__PURE__ */ React8.createElement(StyledContainer, { layout }, children);
|
|
184
295
|
};
|
|
185
|
-
var StyledContainer = (0,
|
|
296
|
+
var StyledContainer = (0, import_ui4.styled)(import_ui4.Box, {
|
|
186
297
|
shouldForwardProp: (prop) => !["layout"].includes(prop)
|
|
187
298
|
})(({ layout, theme }) => ({
|
|
188
299
|
display: "grid",
|
|
@@ -198,7 +309,7 @@ var getGridLayout = (layout) => ({
|
|
|
198
309
|
});
|
|
199
310
|
|
|
200
311
|
// src/controls-registry/settings-field.tsx
|
|
201
|
-
var
|
|
312
|
+
var React9 = __toESM(require("react"));
|
|
202
313
|
var import_editor_controls3 = require("@elementor/editor-controls");
|
|
203
314
|
var import_editor_elements = require("@elementor/editor-elements");
|
|
204
315
|
var SettingsField = ({ bind, children }) => {
|
|
@@ -214,18 +325,18 @@ var SettingsField = ({ bind, children }) => {
|
|
|
214
325
|
}
|
|
215
326
|
});
|
|
216
327
|
};
|
|
217
|
-
return /* @__PURE__ */
|
|
328
|
+
return /* @__PURE__ */ React9.createElement(import_editor_controls3.BoundPropProvider, { setValue, value, bind }, children);
|
|
218
329
|
};
|
|
219
330
|
|
|
220
331
|
// src/components/section.tsx
|
|
221
|
-
var
|
|
222
|
-
var
|
|
223
|
-
var
|
|
332
|
+
var React10 = __toESM(require("react"));
|
|
333
|
+
var import_react5 = require("react");
|
|
334
|
+
var import_ui6 = require("@elementor/ui");
|
|
224
335
|
|
|
225
336
|
// src/components/collapse-icon.tsx
|
|
226
|
-
var
|
|
227
|
-
var
|
|
228
|
-
var CollapseIcon = (0,
|
|
337
|
+
var import_icons3 = require("@elementor/icons");
|
|
338
|
+
var import_ui5 = require("@elementor/ui");
|
|
339
|
+
var CollapseIcon = (0, import_ui5.styled)(import_icons3.ChevronDownIcon, {
|
|
229
340
|
shouldForwardProp: (prop) => prop !== "open"
|
|
230
341
|
})(({ theme, open }) => ({
|
|
231
342
|
transform: open ? "rotate(180deg)" : "rotate(0deg)",
|
|
@@ -236,40 +347,40 @@ var CollapseIcon = (0, import_ui4.styled)(import_icons2.ChevronDownIcon, {
|
|
|
236
347
|
|
|
237
348
|
// src/components/section.tsx
|
|
238
349
|
function Section({ title, children, defaultExpanded = false }) {
|
|
239
|
-
const [isOpen, setIsOpen] = (0,
|
|
240
|
-
const id = (0,
|
|
350
|
+
const [isOpen, setIsOpen] = (0, import_react5.useState)(!!defaultExpanded);
|
|
351
|
+
const id = (0, import_react5.useId)();
|
|
241
352
|
const labelId = `label-${id}`;
|
|
242
353
|
const contentId = `content-${id}`;
|
|
243
|
-
return /* @__PURE__ */
|
|
244
|
-
|
|
354
|
+
return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
|
|
355
|
+
import_ui6.ListItemButton,
|
|
245
356
|
{
|
|
246
357
|
id: labelId,
|
|
247
358
|
"aria-controls": contentId,
|
|
248
359
|
onClick: () => setIsOpen((prev) => !prev)
|
|
249
360
|
},
|
|
250
|
-
/* @__PURE__ */
|
|
251
|
-
/* @__PURE__ */
|
|
252
|
-
), /* @__PURE__ */
|
|
361
|
+
/* @__PURE__ */ React10.createElement(import_ui6.ListItemText, { secondary: title }),
|
|
362
|
+
/* @__PURE__ */ React10.createElement(CollapseIcon, { open: isOpen, color: "secondary" })
|
|
363
|
+
), /* @__PURE__ */ React10.createElement(import_ui6.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 2.5, p: 2 }, children)), /* @__PURE__ */ React10.createElement(import_ui6.Divider, null));
|
|
253
364
|
}
|
|
254
365
|
|
|
255
366
|
// src/components/sections-list.tsx
|
|
256
|
-
var
|
|
257
|
-
var
|
|
367
|
+
var React11 = __toESM(require("react"));
|
|
368
|
+
var import_ui7 = require("@elementor/ui");
|
|
258
369
|
function SectionsList(props) {
|
|
259
|
-
return /* @__PURE__ */
|
|
370
|
+
return /* @__PURE__ */ React11.createElement(import_ui7.List, { disablePadding: true, component: "div", ...props });
|
|
260
371
|
}
|
|
261
372
|
|
|
262
373
|
// src/components/settings-tab.tsx
|
|
263
374
|
var SettingsTab = () => {
|
|
264
375
|
const { elementType } = useElement();
|
|
265
|
-
return /* @__PURE__ */
|
|
376
|
+
return /* @__PURE__ */ React12.createElement(SectionsList, null, elementType.controls.map(({ type, value }, index) => {
|
|
266
377
|
if (type === "control") {
|
|
267
|
-
return /* @__PURE__ */
|
|
378
|
+
return /* @__PURE__ */ React12.createElement(Control2, { key: value.bind, control: value });
|
|
268
379
|
}
|
|
269
380
|
if (type === "section") {
|
|
270
|
-
return /* @__PURE__ */
|
|
381
|
+
return /* @__PURE__ */ React12.createElement(Section, { title: value.label, key: type + "." + index, defaultExpanded: true }, value.items?.map((item) => {
|
|
271
382
|
if (item.type === "control") {
|
|
272
|
-
return /* @__PURE__ */
|
|
383
|
+
return /* @__PURE__ */ React12.createElement(Control2, { key: item.value.bind, control: item.value });
|
|
273
384
|
}
|
|
274
385
|
return null;
|
|
275
386
|
}));
|
|
@@ -281,63 +392,50 @@ var Control2 = ({ control }) => {
|
|
|
281
392
|
if (!getControlByType(control.type)) {
|
|
282
393
|
return null;
|
|
283
394
|
}
|
|
284
|
-
return /* @__PURE__ */
|
|
395
|
+
return /* @__PURE__ */ React12.createElement(SettingsField, { bind: control.bind }, /* @__PURE__ */ React12.createElement(ControlTypeContainer, { controlType: control.type }, control.label ? /* @__PURE__ */ React12.createElement(import_editor_controls4.ControlLabel, null, control.label) : null, /* @__PURE__ */ React12.createElement(Control, { type: control.type, props: control.props })));
|
|
285
396
|
};
|
|
286
397
|
|
|
287
398
|
// src/components/style-tab.tsx
|
|
288
|
-
var
|
|
289
|
-
var
|
|
399
|
+
var React59 = __toESM(require("react"));
|
|
400
|
+
var import_react13 = require("react");
|
|
290
401
|
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
291
402
|
var import_editor_responsive = require("@elementor/editor-responsive");
|
|
292
|
-
var
|
|
293
|
-
var
|
|
403
|
+
var import_ui49 = require("@elementor/ui");
|
|
404
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
294
405
|
|
|
295
406
|
// src/contexts/classes-prop-context.tsx
|
|
296
|
-
var
|
|
297
|
-
var
|
|
298
|
-
var
|
|
407
|
+
var React13 = __toESM(require("react"));
|
|
408
|
+
var import_react6 = require("react");
|
|
409
|
+
var Context3 = (0, import_react6.createContext)(null);
|
|
299
410
|
function ClassesPropProvider({ children, prop }) {
|
|
300
|
-
return /* @__PURE__ */
|
|
411
|
+
return /* @__PURE__ */ React13.createElement(Context3.Provider, { value: { prop } }, children);
|
|
301
412
|
}
|
|
302
413
|
function useClassesProp() {
|
|
303
|
-
const context = (0,
|
|
414
|
+
const context = (0, import_react6.useContext)(Context3);
|
|
304
415
|
if (!context) {
|
|
305
416
|
throw new Error("useClassesProp must be used within a ClassesPropProvider");
|
|
306
417
|
}
|
|
307
418
|
return context.prop;
|
|
308
419
|
}
|
|
309
420
|
|
|
310
|
-
// src/contexts/style-context.tsx
|
|
311
|
-
var React11 = __toESM(require("react"));
|
|
312
|
-
var import_react5 = require("react");
|
|
313
|
-
var Context3 = (0, import_react5.createContext)(null);
|
|
314
|
-
function StyleProvider({ children, id, setId, meta }) {
|
|
315
|
-
return /* @__PURE__ */ React11.createElement(Context3.Provider, { value: { id, setId, meta } }, children);
|
|
316
|
-
}
|
|
317
|
-
function useStyle() {
|
|
318
|
-
const context = (0, import_react5.useContext)(Context3);
|
|
319
|
-
if (!context) {
|
|
320
|
-
throw new Error("useStyle must be used within a StyleProvider");
|
|
321
|
-
}
|
|
322
|
-
return context;
|
|
323
|
-
}
|
|
324
|
-
|
|
325
421
|
// src/components/css-class-selector.tsx
|
|
326
|
-
var
|
|
422
|
+
var React16 = __toESM(require("react"));
|
|
423
|
+
var import_react8 = require("react");
|
|
327
424
|
var import_editor_elements2 = require("@elementor/editor-elements");
|
|
328
425
|
var import_editor_props = require("@elementor/editor-props");
|
|
329
426
|
var import_editor_styles_repository = require("@elementor/editor-styles-repository");
|
|
330
|
-
var
|
|
331
|
-
var
|
|
427
|
+
var import_icons4 = require("@elementor/icons");
|
|
428
|
+
var import_ui11 = require("@elementor/ui");
|
|
429
|
+
var import_i18n2 = require("@wordpress/i18n");
|
|
332
430
|
|
|
333
431
|
// src/components/conditional-tooltip-wrapper.tsx
|
|
334
|
-
var
|
|
335
|
-
var
|
|
336
|
-
var
|
|
432
|
+
var import_react7 = require("react");
|
|
433
|
+
var React14 = __toESM(require("react"));
|
|
434
|
+
var import_ui8 = require("@elementor/ui");
|
|
337
435
|
var ConditionalTooltipWrapper = ({ maxWidth, title }) => {
|
|
338
|
-
const elRef = (0,
|
|
339
|
-
const [isOverflown, setIsOverflown] = (0,
|
|
340
|
-
(0,
|
|
436
|
+
const elRef = (0, import_react7.useRef)(null);
|
|
437
|
+
const [isOverflown, setIsOverflown] = (0, import_react7.useState)(false);
|
|
438
|
+
(0, import_react7.useEffect)(() => {
|
|
341
439
|
const onResize = () => {
|
|
342
440
|
const element = elRef.current;
|
|
343
441
|
if (element) {
|
|
@@ -351,12 +449,12 @@ var ConditionalTooltipWrapper = ({ maxWidth, title }) => {
|
|
|
351
449
|
};
|
|
352
450
|
}, []);
|
|
353
451
|
if (isOverflown) {
|
|
354
|
-
return /* @__PURE__ */
|
|
452
|
+
return /* @__PURE__ */ React14.createElement(import_ui8.Tooltip, { title, placement: "top" }, /* @__PURE__ */ React14.createElement(Content, { maxWidth, ref: elRef }, title));
|
|
355
453
|
}
|
|
356
|
-
return /* @__PURE__ */
|
|
454
|
+
return /* @__PURE__ */ React14.createElement(Content, { maxWidth, ref: elRef }, title);
|
|
357
455
|
};
|
|
358
|
-
var Content =
|
|
359
|
-
|
|
456
|
+
var Content = React14.forwardRef(({ maxWidth, ...tooltipProps }, ref) => /* @__PURE__ */ React14.createElement(
|
|
457
|
+
import_ui8.Box,
|
|
360
458
|
{
|
|
361
459
|
ref,
|
|
362
460
|
position: "relative",
|
|
@@ -366,11 +464,11 @@ var Content = React12.forwardRef(({ maxWidth, ...tooltipProps }, ref) => /* @__P
|
|
|
366
464
|
));
|
|
367
465
|
|
|
368
466
|
// src/components/multi-combobox/multi-combobox.tsx
|
|
369
|
-
var
|
|
370
|
-
var
|
|
467
|
+
var React15 = __toESM(require("react"));
|
|
468
|
+
var import_ui10 = require("@elementor/ui");
|
|
371
469
|
|
|
372
470
|
// src/components/multi-combobox/use-combobox-actions.ts
|
|
373
|
-
var
|
|
471
|
+
var import_ui9 = require("@elementor/ui");
|
|
374
472
|
var useComboboxActions = (applied, actions, optionsLabel, onSelect) => ({
|
|
375
473
|
action: {
|
|
376
474
|
is: (opt) => typeof opt !== "string" && "action" in opt,
|
|
@@ -404,7 +502,7 @@ var useComboboxActions = (applied, actions, optionsLabel, onSelect) => ({
|
|
|
404
502
|
}
|
|
405
503
|
}
|
|
406
504
|
});
|
|
407
|
-
var filter = (0,
|
|
505
|
+
var filter = (0, import_ui9.createFilterOptions)();
|
|
408
506
|
var createActionOption = (groupLabel, action, inputValue) => ({
|
|
409
507
|
value: "",
|
|
410
508
|
label: inputValue,
|
|
@@ -432,8 +530,8 @@ var MultiCombobox = ({
|
|
|
432
530
|
optionsLabel,
|
|
433
531
|
onSelect
|
|
434
532
|
);
|
|
435
|
-
return /* @__PURE__ */
|
|
436
|
-
|
|
533
|
+
return /* @__PURE__ */ React15.createElement(
|
|
534
|
+
import_ui10.Autocomplete,
|
|
437
535
|
{
|
|
438
536
|
...props,
|
|
439
537
|
freeSolo: true,
|
|
@@ -445,8 +543,8 @@ var MultiCombobox = ({
|
|
|
445
543
|
value: selected,
|
|
446
544
|
options: options10,
|
|
447
545
|
renderGroup,
|
|
448
|
-
renderInput: (params) => /* @__PURE__ */
|
|
449
|
-
getLimitTagsText: (more) => /* @__PURE__ */
|
|
546
|
+
renderInput: (params) => /* @__PURE__ */ React15.createElement(import_ui10.TextField, { ...params }),
|
|
547
|
+
getLimitTagsText: (more) => /* @__PURE__ */ React15.createElement(import_ui10.Chip, { size: "tiny", variant: "standard", label: `+${more}`, clickable: true }),
|
|
450
548
|
onChange: (_, selectedOrTypedValue, reason) => {
|
|
451
549
|
if (reason === "createOption") {
|
|
452
550
|
const typedValue = selectedOrTypedValue.find((option) => typeof option === "string");
|
|
@@ -478,19 +576,19 @@ var MultiCombobox = ({
|
|
|
478
576
|
}
|
|
479
577
|
);
|
|
480
578
|
};
|
|
481
|
-
var renderGroup = (params) => /* @__PURE__ */
|
|
482
|
-
var Group = (0,
|
|
579
|
+
var renderGroup = (params) => /* @__PURE__ */ React15.createElement(Group, { key: params.key }, /* @__PURE__ */ React15.createElement(GroupHeader, null, params.group), /* @__PURE__ */ React15.createElement(GroupItems, null, params.children));
|
|
580
|
+
var Group = (0, import_ui10.styled)("li")`
|
|
483
581
|
&:not( :last-of-type ) {
|
|
484
582
|
border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
|
|
485
583
|
}
|
|
486
584
|
`;
|
|
487
|
-
var GroupHeader = (0,
|
|
585
|
+
var GroupHeader = (0, import_ui10.styled)(import_ui10.Box)(({ theme }) => ({
|
|
488
586
|
position: "sticky",
|
|
489
587
|
top: "-8px",
|
|
490
588
|
padding: theme.spacing(1, 2),
|
|
491
589
|
color: theme.palette.text.tertiary
|
|
492
590
|
}));
|
|
493
|
-
var GroupItems = (0,
|
|
591
|
+
var GroupItems = (0, import_ui10.styled)("ul")`
|
|
494
592
|
padding: 0;
|
|
495
593
|
`;
|
|
496
594
|
|
|
@@ -498,7 +596,7 @@ var GroupItems = (0, import_ui9.styled)("ul")`
|
|
|
498
596
|
var ID = "elementor-css-class-selector";
|
|
499
597
|
var TAGS_LIMIT = 8;
|
|
500
598
|
var EMPTY_OPTION = {
|
|
501
|
-
label: (0,
|
|
599
|
+
label: (0, import_i18n2.__)("local", "elementor"),
|
|
502
600
|
value: "",
|
|
503
601
|
fixed: true,
|
|
504
602
|
color: "primary",
|
|
@@ -512,7 +610,7 @@ function CssClassSelector() {
|
|
|
512
610
|
const handleActivate = ({ value }) => setActiveId(value);
|
|
513
611
|
const applied = useAppliedOptions(options10, appliedIds);
|
|
514
612
|
const active = applied.find((option) => option.value === activeId) ?? EMPTY_OPTION;
|
|
515
|
-
return /* @__PURE__ */
|
|
613
|
+
return /* @__PURE__ */ React16.createElement(import_ui11.Stack, { gap: 1, p: 2 }, /* @__PURE__ */ React16.createElement(import_ui11.Typography, { component: "label", variant: "caption", htmlFor: ID }, (0, import_i18n2.__)("CSS Classes", "elementor")), /* @__PURE__ */ React16.createElement(
|
|
516
614
|
MultiCombobox,
|
|
517
615
|
{
|
|
518
616
|
id: ID,
|
|
@@ -521,28 +619,57 @@ function CssClassSelector() {
|
|
|
521
619
|
selected: applied,
|
|
522
620
|
onSelect: handleApply,
|
|
523
621
|
limitTags: TAGS_LIMIT,
|
|
524
|
-
optionsLabel: (0,
|
|
622
|
+
optionsLabel: (0, import_i18n2.__)("Global CSS Classes", "elementor"),
|
|
525
623
|
renderTags: (values, getTagProps) => values.map((value, index) => {
|
|
526
624
|
const chipProps = getTagProps({ index });
|
|
527
625
|
const isActive = value.value === active?.value;
|
|
528
|
-
return /* @__PURE__ */
|
|
529
|
-
|
|
626
|
+
return /* @__PURE__ */ React16.createElement(
|
|
627
|
+
CssClassItem,
|
|
530
628
|
{
|
|
531
|
-
...chipProps,
|
|
532
629
|
key: chipProps.key,
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
630
|
+
label: value.label,
|
|
631
|
+
id: value.value,
|
|
632
|
+
isActive,
|
|
633
|
+
isGlobal: value.color === "global",
|
|
536
634
|
color: isActive && value.color ? value.color : "default",
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
"aria-pressed": isActive
|
|
635
|
+
chipProps,
|
|
636
|
+
onClickActive: () => handleActivate(value)
|
|
540
637
|
}
|
|
541
638
|
);
|
|
542
639
|
})
|
|
543
640
|
}
|
|
544
641
|
));
|
|
545
642
|
}
|
|
643
|
+
function CssClassItem({ id, label, isActive, isGlobal, color, chipProps, onClickActive }) {
|
|
644
|
+
const { meta } = useStyle();
|
|
645
|
+
const popupId = (0, import_react8.useId)().replace(/:/g, "_");
|
|
646
|
+
const popupState = (0, import_ui11.usePopupState)({ variant: "popover", popupId });
|
|
647
|
+
const chipRef = (0, import_react8.useRef)(null);
|
|
648
|
+
const { onDelete, ...chipGroupProps } = chipProps;
|
|
649
|
+
return /* @__PURE__ */ React16.createElement(CssClassItemProvider, { styleId: id, isActive, isGlobal }, /* @__PURE__ */ React16.createElement(import_ui11.UnstableChipGroup, { ref: chipRef, ...chipGroupProps, "aria-label": `Edit ${label}`, role: "group" }, /* @__PURE__ */ React16.createElement(
|
|
650
|
+
import_ui11.Chip,
|
|
651
|
+
{
|
|
652
|
+
key: chipProps.key,
|
|
653
|
+
size: "small",
|
|
654
|
+
label: /* @__PURE__ */ React16.createElement(ConditionalTooltipWrapper, { maxWidth: "10ch", title: label }),
|
|
655
|
+
variant: isActive && !meta.state ? "filled" : "standard",
|
|
656
|
+
color,
|
|
657
|
+
onClick: () => onClickActive(id),
|
|
658
|
+
"aria-pressed": isActive
|
|
659
|
+
}
|
|
660
|
+
), /* @__PURE__ */ React16.createElement(
|
|
661
|
+
import_ui11.Chip,
|
|
662
|
+
{
|
|
663
|
+
key: `${chipProps.key}-menu`,
|
|
664
|
+
size: "small",
|
|
665
|
+
label: /* @__PURE__ */ React16.createElement(import_ui11.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, isActive && meta.state && /* @__PURE__ */ React16.createElement(import_ui11.Typography, { variant: "inherit" }, meta.state), /* @__PURE__ */ React16.createElement(import_icons4.DotsVerticalIcon, { fontSize: "inherit" })),
|
|
666
|
+
variant: "filled",
|
|
667
|
+
color,
|
|
668
|
+
...(0, import_ui11.bindTrigger)(popupState),
|
|
669
|
+
"aria-label": (0, import_i18n2.__)("Open CSS Class Menu", "elementor")
|
|
670
|
+
}
|
|
671
|
+
)), /* @__PURE__ */ React16.createElement(CssClassMenu, { popupState, containerRef: chipRef }));
|
|
672
|
+
}
|
|
546
673
|
function useOptions() {
|
|
547
674
|
const { element } = useElement();
|
|
548
675
|
return (0, import_editor_styles_repository.useAllStylesByProvider)({ elementId: element.id }).flatMap(([providerKey, styleDefs]) => {
|
|
@@ -607,16 +734,16 @@ function useHandleApply(appliedIds, setAppliedIds) {
|
|
|
607
734
|
}
|
|
608
735
|
|
|
609
736
|
// src/components/style-sections/background-section/background-section.tsx
|
|
610
|
-
var
|
|
737
|
+
var React18 = __toESM(require("react"));
|
|
611
738
|
var import_editor_controls6 = require("@elementor/editor-controls");
|
|
612
739
|
|
|
613
740
|
// src/controls-registry/styles-field.tsx
|
|
614
|
-
var
|
|
741
|
+
var React17 = __toESM(require("react"));
|
|
615
742
|
var import_editor_controls5 = require("@elementor/editor-controls");
|
|
616
743
|
|
|
617
744
|
// src/hooks/use-styles-fields.ts
|
|
618
745
|
var import_editor_elements3 = require("@elementor/editor-elements");
|
|
619
|
-
var
|
|
746
|
+
var import_i18n3 = require("@wordpress/i18n");
|
|
620
747
|
function useStylesFields(propNames) {
|
|
621
748
|
const { element } = useElement();
|
|
622
749
|
const { id, meta } = useStyle();
|
|
@@ -634,7 +761,7 @@ function useStylesFields(propNames) {
|
|
|
634
761
|
props: newValues,
|
|
635
762
|
meta,
|
|
636
763
|
bind: classesProp,
|
|
637
|
-
label: (0,
|
|
764
|
+
label: (0, import_i18n3.__)("local", "elementor")
|
|
638
765
|
});
|
|
639
766
|
};
|
|
640
767
|
return [value, setValue];
|
|
@@ -655,31 +782,31 @@ function useStylesField(propName) {
|
|
|
655
782
|
// src/controls-registry/styles-field.tsx
|
|
656
783
|
var StylesField = ({ bind, children }) => {
|
|
657
784
|
const [value, setValue] = useStylesField(bind);
|
|
658
|
-
return /* @__PURE__ */
|
|
785
|
+
return /* @__PURE__ */ React17.createElement(import_editor_controls5.BoundPropProvider, { setValue, value, bind }, children);
|
|
659
786
|
};
|
|
660
787
|
|
|
661
788
|
// src/components/style-sections/background-section/background-section.tsx
|
|
662
789
|
var BackgroundSection = () => {
|
|
663
|
-
return /* @__PURE__ */
|
|
790
|
+
return /* @__PURE__ */ React18.createElement(StylesField, { bind: "background" }, /* @__PURE__ */ React18.createElement(import_editor_controls6.BackgroundControl, null));
|
|
664
791
|
};
|
|
665
792
|
|
|
666
793
|
// src/components/style-sections/border-section/border-section.tsx
|
|
667
|
-
var
|
|
668
|
-
var
|
|
794
|
+
var React25 = __toESM(require("react"));
|
|
795
|
+
var import_ui15 = require("@elementor/ui");
|
|
669
796
|
|
|
670
797
|
// src/components/style-sections/border-section/border-field.tsx
|
|
671
|
-
var
|
|
672
|
-
var
|
|
798
|
+
var React23 = __toESM(require("react"));
|
|
799
|
+
var import_i18n7 = require("@wordpress/i18n");
|
|
673
800
|
|
|
674
801
|
// src/components/add-or-remove-content.tsx
|
|
675
|
-
var
|
|
802
|
+
var React19 = __toESM(require("react"));
|
|
676
803
|
var import_editor_controls7 = require("@elementor/editor-controls");
|
|
677
|
-
var
|
|
678
|
-
var
|
|
804
|
+
var import_icons5 = require("@elementor/icons");
|
|
805
|
+
var import_ui12 = require("@elementor/ui");
|
|
679
806
|
var SIZE2 = "tiny";
|
|
680
807
|
var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
681
|
-
return /* @__PURE__ */
|
|
682
|
-
|
|
808
|
+
return /* @__PURE__ */ React19.createElement(import_ui12.Stack, { gap: 1.5 }, /* @__PURE__ */ React19.createElement(
|
|
809
|
+
import_ui12.Stack,
|
|
683
810
|
{
|
|
684
811
|
direction: "row",
|
|
685
812
|
sx: {
|
|
@@ -687,75 +814,75 @@ var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
|
687
814
|
alignItems: "center"
|
|
688
815
|
}
|
|
689
816
|
},
|
|
690
|
-
/* @__PURE__ */
|
|
691
|
-
isAdded ? /* @__PURE__ */
|
|
692
|
-
), /* @__PURE__ */
|
|
817
|
+
/* @__PURE__ */ React19.createElement(import_editor_controls7.ControlLabel, null, label),
|
|
818
|
+
isAdded ? /* @__PURE__ */ React19.createElement(import_ui12.IconButton, { size: SIZE2, onClick: onRemove }, /* @__PURE__ */ React19.createElement(import_icons5.MinusIcon, { fontSize: SIZE2 })) : /* @__PURE__ */ React19.createElement(import_ui12.IconButton, { size: SIZE2, onClick: onAdd }, /* @__PURE__ */ React19.createElement(import_icons5.PlusIcon, { fontSize: SIZE2 }))
|
|
819
|
+
), /* @__PURE__ */ React19.createElement(import_ui12.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React19.createElement(import_ui12.Stack, { gap: 1.5 }, children)));
|
|
693
820
|
};
|
|
694
821
|
|
|
695
822
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
696
|
-
var
|
|
823
|
+
var React20 = __toESM(require("react"));
|
|
697
824
|
var import_editor_controls8 = require("@elementor/editor-controls");
|
|
698
|
-
var
|
|
699
|
-
var
|
|
825
|
+
var import_ui13 = require("@elementor/ui");
|
|
826
|
+
var import_i18n4 = require("@wordpress/i18n");
|
|
700
827
|
var BorderColorField = () => {
|
|
701
|
-
return /* @__PURE__ */
|
|
828
|
+
return /* @__PURE__ */ React20.createElement(StylesField, { bind: "border-color" }, /* @__PURE__ */ React20.createElement(import_ui13.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React20.createElement(import_ui13.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React20.createElement(import_editor_controls8.ControlLabel, null, (0, import_i18n4.__)("Border Color", "elementor"))), /* @__PURE__ */ React20.createElement(import_ui13.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React20.createElement(import_editor_controls8.ColorControl, null))));
|
|
702
829
|
};
|
|
703
830
|
|
|
704
831
|
// src/components/style-sections/border-section/border-style-field.tsx
|
|
705
|
-
var
|
|
832
|
+
var React21 = __toESM(require("react"));
|
|
706
833
|
var import_editor_controls9 = require("@elementor/editor-controls");
|
|
707
|
-
var
|
|
708
|
-
var
|
|
834
|
+
var import_ui14 = require("@elementor/ui");
|
|
835
|
+
var import_i18n5 = require("@wordpress/i18n");
|
|
709
836
|
var borderStyles = [
|
|
710
|
-
{ value: "none", label: (0,
|
|
711
|
-
{ value: "solid", label: (0,
|
|
712
|
-
{ value: "dashed", label: (0,
|
|
713
|
-
{ value: "dotted", label: (0,
|
|
714
|
-
{ value: "double", label: (0,
|
|
715
|
-
{ value: "groove", label: (0,
|
|
716
|
-
{ value: "ridge", label: (0,
|
|
717
|
-
{ value: "inset", label: (0,
|
|
718
|
-
{ value: "outset", label: (0,
|
|
837
|
+
{ value: "none", label: (0, import_i18n5.__)("None", "elementor") },
|
|
838
|
+
{ value: "solid", label: (0, import_i18n5.__)("Solid", "elementor") },
|
|
839
|
+
{ value: "dashed", label: (0, import_i18n5.__)("Dashed", "elementor") },
|
|
840
|
+
{ value: "dotted", label: (0, import_i18n5.__)("Dotted", "elementor") },
|
|
841
|
+
{ value: "double", label: (0, import_i18n5.__)("Double", "elementor") },
|
|
842
|
+
{ value: "groove", label: (0, import_i18n5.__)("Groove", "elementor") },
|
|
843
|
+
{ value: "ridge", label: (0, import_i18n5.__)("Ridge", "elementor") },
|
|
844
|
+
{ value: "inset", label: (0, import_i18n5.__)("Inset", "elementor") },
|
|
845
|
+
{ value: "outset", label: (0, import_i18n5.__)("Outset", "elementor") }
|
|
719
846
|
];
|
|
720
847
|
var BorderStyleField = () => {
|
|
721
|
-
return /* @__PURE__ */
|
|
848
|
+
return /* @__PURE__ */ React21.createElement(StylesField, { bind: "border-style" }, /* @__PURE__ */ React21.createElement(import_ui14.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React21.createElement(import_ui14.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(import_editor_controls9.ControlLabel, null, (0, import_i18n5.__)("Border Type", "elementor"))), /* @__PURE__ */ React21.createElement(import_ui14.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(import_editor_controls9.SelectControl, { options: borderStyles }))));
|
|
722
849
|
};
|
|
723
850
|
|
|
724
851
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
725
|
-
var
|
|
852
|
+
var React22 = __toESM(require("react"));
|
|
726
853
|
var import_editor_controls10 = require("@elementor/editor-controls");
|
|
727
854
|
var import_editor_props2 = require("@elementor/editor-props");
|
|
728
|
-
var
|
|
729
|
-
var
|
|
855
|
+
var import_icons6 = require("@elementor/icons");
|
|
856
|
+
var import_i18n6 = require("@wordpress/i18n");
|
|
730
857
|
var edges = [
|
|
731
858
|
{
|
|
732
|
-
label: (0,
|
|
733
|
-
icon: /* @__PURE__ */
|
|
859
|
+
label: (0, import_i18n6.__)("Top", "elementor"),
|
|
860
|
+
icon: /* @__PURE__ */ React22.createElement(import_icons6.SideTopIcon, { fontSize: "tiny" }),
|
|
734
861
|
bind: "top"
|
|
735
862
|
},
|
|
736
863
|
{
|
|
737
|
-
label: (0,
|
|
738
|
-
icon: /* @__PURE__ */
|
|
864
|
+
label: (0, import_i18n6.__)("Right", "elementor"),
|
|
865
|
+
icon: /* @__PURE__ */ React22.createElement(import_icons6.SideRightIcon, { fontSize: "tiny" }),
|
|
739
866
|
bind: "right"
|
|
740
867
|
},
|
|
741
868
|
{
|
|
742
|
-
label: (0,
|
|
743
|
-
icon: /* @__PURE__ */
|
|
869
|
+
label: (0, import_i18n6.__)("Bottom", "elementor"),
|
|
870
|
+
icon: /* @__PURE__ */ React22.createElement(import_icons6.SideBottomIcon, { fontSize: "tiny" }),
|
|
744
871
|
bind: "bottom"
|
|
745
872
|
},
|
|
746
873
|
{
|
|
747
|
-
label: (0,
|
|
748
|
-
icon: /* @__PURE__ */
|
|
874
|
+
label: (0, import_i18n6.__)("Left", "elementor"),
|
|
875
|
+
icon: /* @__PURE__ */ React22.createElement(import_icons6.SideLeftIcon, { fontSize: "tiny" }),
|
|
749
876
|
bind: "left"
|
|
750
877
|
}
|
|
751
878
|
];
|
|
752
879
|
var BorderWidthField = () => {
|
|
753
|
-
return /* @__PURE__ */
|
|
880
|
+
return /* @__PURE__ */ React22.createElement(StylesField, { bind: "border-width" }, /* @__PURE__ */ React22.createElement(
|
|
754
881
|
import_editor_controls10.EqualUnequalSizesControl,
|
|
755
882
|
{
|
|
756
883
|
items: edges,
|
|
757
|
-
label: (0,
|
|
758
|
-
icon: /* @__PURE__ */
|
|
884
|
+
label: (0, import_i18n6.__)("Border Width", "elementor"),
|
|
885
|
+
icon: /* @__PURE__ */ React22.createElement(import_icons6.SideAllIcon, { fontSize: "tiny" }),
|
|
759
886
|
multiSizePropTypeUtil: import_editor_props2.borderWidthPropTypeUtil
|
|
760
887
|
}
|
|
761
888
|
));
|
|
@@ -784,77 +911,77 @@ var BorderField = () => {
|
|
|
784
911
|
setBorderStyle(null);
|
|
785
912
|
};
|
|
786
913
|
const hasBorder = Boolean(borderWidth || borderColor || borderStyle);
|
|
787
|
-
return /* @__PURE__ */
|
|
914
|
+
return /* @__PURE__ */ React23.createElement(
|
|
788
915
|
AddOrRemoveContent,
|
|
789
916
|
{
|
|
790
|
-
label: (0,
|
|
917
|
+
label: (0, import_i18n7.__)("Border", "elementor"),
|
|
791
918
|
isAdded: hasBorder,
|
|
792
919
|
onAdd: addBorder,
|
|
793
920
|
onRemove: removeBorder
|
|
794
921
|
},
|
|
795
|
-
/* @__PURE__ */
|
|
796
|
-
/* @__PURE__ */
|
|
797
|
-
/* @__PURE__ */
|
|
922
|
+
/* @__PURE__ */ React23.createElement(BorderWidthField, null),
|
|
923
|
+
/* @__PURE__ */ React23.createElement(BorderColorField, null),
|
|
924
|
+
/* @__PURE__ */ React23.createElement(BorderStyleField, null)
|
|
798
925
|
);
|
|
799
926
|
};
|
|
800
927
|
|
|
801
928
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
802
|
-
var
|
|
929
|
+
var React24 = __toESM(require("react"));
|
|
803
930
|
var import_editor_controls11 = require("@elementor/editor-controls");
|
|
804
931
|
var import_editor_props3 = require("@elementor/editor-props");
|
|
805
|
-
var
|
|
806
|
-
var
|
|
932
|
+
var import_icons7 = require("@elementor/icons");
|
|
933
|
+
var import_i18n8 = require("@wordpress/i18n");
|
|
807
934
|
var corners = [
|
|
808
935
|
{
|
|
809
|
-
label: (0,
|
|
810
|
-
icon: /* @__PURE__ */
|
|
936
|
+
label: (0, import_i18n8.__)("Top Left", "elementor"),
|
|
937
|
+
icon: /* @__PURE__ */ React24.createElement(import_icons7.RadiusTopLeftIcon, { fontSize: "tiny" }),
|
|
811
938
|
bind: "top-left"
|
|
812
939
|
},
|
|
813
940
|
{
|
|
814
|
-
label: (0,
|
|
815
|
-
icon: /* @__PURE__ */
|
|
941
|
+
label: (0, import_i18n8.__)("Top Right", "elementor"),
|
|
942
|
+
icon: /* @__PURE__ */ React24.createElement(import_icons7.RadiusTopRightIcon, { fontSize: "tiny" }),
|
|
816
943
|
bind: "top-right"
|
|
817
944
|
},
|
|
818
945
|
{
|
|
819
|
-
label: (0,
|
|
820
|
-
icon: /* @__PURE__ */
|
|
946
|
+
label: (0, import_i18n8.__)("Bottom Right", "elementor"),
|
|
947
|
+
icon: /* @__PURE__ */ React24.createElement(import_icons7.RadiusBottomRightIcon, { fontSize: "tiny" }),
|
|
821
948
|
bind: "bottom-right"
|
|
822
949
|
},
|
|
823
950
|
{
|
|
824
|
-
label: (0,
|
|
825
|
-
icon: /* @__PURE__ */
|
|
951
|
+
label: (0, import_i18n8.__)("Bottom Left", "elementor"),
|
|
952
|
+
icon: /* @__PURE__ */ React24.createElement(import_icons7.RadiusBottomLeftIcon, { fontSize: "tiny" }),
|
|
826
953
|
bind: "bottom-left"
|
|
827
954
|
}
|
|
828
955
|
];
|
|
829
956
|
var BorderRadiusField = () => {
|
|
830
|
-
return /* @__PURE__ */
|
|
957
|
+
return /* @__PURE__ */ React24.createElement(StylesField, { bind: "border-radius" }, /* @__PURE__ */ React24.createElement(
|
|
831
958
|
import_editor_controls11.EqualUnequalSizesControl,
|
|
832
959
|
{
|
|
833
960
|
items: corners,
|
|
834
|
-
label: (0,
|
|
835
|
-
icon: /* @__PURE__ */
|
|
961
|
+
label: (0, import_i18n8.__)("Border Radius", "elementor"),
|
|
962
|
+
icon: /* @__PURE__ */ React24.createElement(import_icons7.BorderCornersIcon, { fontSize: "tiny" }),
|
|
836
963
|
multiSizePropTypeUtil: import_editor_props3.borderRadiusPropTypeUtil
|
|
837
964
|
}
|
|
838
965
|
));
|
|
839
966
|
};
|
|
840
967
|
|
|
841
968
|
// src/components/style-sections/border-section/border-section.tsx
|
|
842
|
-
var BorderSection = () => /* @__PURE__ */
|
|
969
|
+
var BorderSection = () => /* @__PURE__ */ React25.createElement(import_ui15.Stack, { gap: 1.5 }, /* @__PURE__ */ React25.createElement(BorderRadiusField, null), /* @__PURE__ */ React25.createElement(import_ui15.Divider, null), /* @__PURE__ */ React25.createElement(BorderField, null));
|
|
843
970
|
|
|
844
971
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
845
|
-
var
|
|
972
|
+
var React26 = __toESM(require("react"));
|
|
846
973
|
var import_editor_controls12 = require("@elementor/editor-controls");
|
|
847
|
-
var
|
|
974
|
+
var import_ui16 = require("@elementor/ui");
|
|
848
975
|
var EffectsSection = () => {
|
|
849
|
-
return /* @__PURE__ */
|
|
976
|
+
return /* @__PURE__ */ React26.createElement(import_ui16.Stack, { gap: 1.5 }, /* @__PURE__ */ React26.createElement(StylesField, { bind: "box-shadow" }, /* @__PURE__ */ React26.createElement(import_editor_controls12.BoxShadowRepeaterControl, null)));
|
|
850
977
|
};
|
|
851
978
|
|
|
852
979
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
853
|
-
var
|
|
980
|
+
var React37 = __toESM(require("react"));
|
|
854
981
|
var import_editor_controls22 = require("@elementor/editor-controls");
|
|
855
982
|
var import_editor_elements4 = require("@elementor/editor-elements");
|
|
856
|
-
var
|
|
857
|
-
var
|
|
983
|
+
var import_ui28 = require("@elementor/ui");
|
|
984
|
+
var import_i18n18 = require("@wordpress/i18n");
|
|
858
985
|
|
|
859
986
|
// src/hooks/use-computed-style.ts
|
|
860
987
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
@@ -882,24 +1009,24 @@ function useComputedStyle(elementId) {
|
|
|
882
1009
|
}
|
|
883
1010
|
|
|
884
1011
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
885
|
-
var
|
|
1012
|
+
var React28 = __toESM(require("react"));
|
|
886
1013
|
var import_editor_controls13 = require("@elementor/editor-controls");
|
|
887
|
-
var
|
|
888
|
-
var
|
|
889
|
-
var
|
|
1014
|
+
var import_icons8 = require("@elementor/icons");
|
|
1015
|
+
var import_ui19 = require("@elementor/ui");
|
|
1016
|
+
var import_i18n9 = require("@wordpress/i18n");
|
|
890
1017
|
|
|
891
1018
|
// src/hooks/use-direction.ts
|
|
892
|
-
var
|
|
1019
|
+
var import_ui17 = require("@elementor/ui");
|
|
893
1020
|
function useDirection() {
|
|
894
|
-
const theme = (0,
|
|
1021
|
+
const theme = (0, import_ui17.useTheme)(), extendedWindow = window;
|
|
895
1022
|
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
896
1023
|
return { isSiteRtl, isUiRtl };
|
|
897
1024
|
}
|
|
898
1025
|
|
|
899
1026
|
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
900
|
-
var
|
|
901
|
-
var
|
|
902
|
-
var
|
|
1027
|
+
var React27 = __toESM(require("react"));
|
|
1028
|
+
var import_react9 = require("react");
|
|
1029
|
+
var import_ui18 = require("@elementor/ui");
|
|
903
1030
|
var CLOCKWISE_ANGLES = {
|
|
904
1031
|
row: 0,
|
|
905
1032
|
column: 90,
|
|
@@ -913,13 +1040,13 @@ var COUNTER_CLOCKWISE_ANGLES = {
|
|
|
913
1040
|
"column-reverse": -270
|
|
914
1041
|
};
|
|
915
1042
|
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
916
|
-
const rotate = (0,
|
|
1043
|
+
const rotate = (0, import_react9.useRef)(useGetTargetAngle(isClockwise, offset));
|
|
917
1044
|
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
918
|
-
return /* @__PURE__ */
|
|
1045
|
+
return /* @__PURE__ */ React27.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
919
1046
|
};
|
|
920
1047
|
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
921
1048
|
const [direction] = useStylesField("flex-direction");
|
|
922
|
-
const isRtl = "rtl" === (0,
|
|
1049
|
+
const isRtl = "rtl" === (0, import_ui18.useTheme)().direction;
|
|
923
1050
|
const rotationMultiplier = isRtl ? -1 : 1;
|
|
924
1051
|
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
925
1052
|
const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[direction?.value || "row"] + offset;
|
|
@@ -930,8 +1057,8 @@ var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
|
930
1057
|
};
|
|
931
1058
|
|
|
932
1059
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
933
|
-
var StartIcon = (0,
|
|
934
|
-
var EndIcon = (0,
|
|
1060
|
+
var StartIcon = (0, import_ui19.withDirection)(import_icons8.LayoutAlignLeftIcon);
|
|
1061
|
+
var EndIcon = (0, import_ui19.withDirection)(import_icons8.LayoutAlignRightIcon);
|
|
935
1062
|
var iconProps = {
|
|
936
1063
|
isClockwise: false,
|
|
937
1064
|
offset: 90
|
|
@@ -939,42 +1066,42 @@ var iconProps = {
|
|
|
939
1066
|
var options = [
|
|
940
1067
|
{
|
|
941
1068
|
value: "start",
|
|
942
|
-
label: (0,
|
|
943
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1069
|
+
label: (0, import_i18n9.__)("Start", "elementor"),
|
|
1070
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
|
|
944
1071
|
showTooltip: true
|
|
945
1072
|
},
|
|
946
1073
|
{
|
|
947
1074
|
value: "center",
|
|
948
|
-
label: (0,
|
|
949
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1075
|
+
label: (0, import_i18n9.__)("Center", "elementor"),
|
|
1076
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: import_icons8.LayoutAlignCenterIcon, size, ...iconProps }),
|
|
950
1077
|
showTooltip: true
|
|
951
1078
|
},
|
|
952
1079
|
{
|
|
953
1080
|
value: "end",
|
|
954
|
-
label: (0,
|
|
955
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1081
|
+
label: (0, import_i18n9.__)("End", "elementor"),
|
|
1082
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
|
|
956
1083
|
showTooltip: true
|
|
957
1084
|
},
|
|
958
1085
|
{
|
|
959
1086
|
value: "stretch",
|
|
960
|
-
label: (0,
|
|
961
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1087
|
+
label: (0, import_i18n9.__)("Stretch", "elementor"),
|
|
1088
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: import_icons8.LayoutDistributeVerticalIcon, size, ...iconProps }),
|
|
962
1089
|
showTooltip: true
|
|
963
1090
|
}
|
|
964
1091
|
];
|
|
965
1092
|
var AlignItemsField = () => {
|
|
966
1093
|
const { isSiteRtl } = useDirection();
|
|
967
|
-
return /* @__PURE__ */
|
|
1094
|
+
return /* @__PURE__ */ React28.createElement(import_ui19.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React28.createElement(import_ui19.ThemeProvider, null, /* @__PURE__ */ React28.createElement(StylesField, { bind: "align-items" }, /* @__PURE__ */ React28.createElement(import_ui19.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(import_ui19.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(import_editor_controls13.ControlLabel, null, (0, import_i18n9.__)("Align items", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui19.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React28.createElement(import_editor_controls13.ToggleControl, { options }))))));
|
|
968
1095
|
};
|
|
969
1096
|
|
|
970
1097
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
971
|
-
var
|
|
1098
|
+
var React29 = __toESM(require("react"));
|
|
972
1099
|
var import_editor_controls14 = require("@elementor/editor-controls");
|
|
973
|
-
var
|
|
974
|
-
var
|
|
975
|
-
var
|
|
976
|
-
var StartIcon2 = (0,
|
|
977
|
-
var EndIcon2 = (0,
|
|
1100
|
+
var import_icons9 = require("@elementor/icons");
|
|
1101
|
+
var import_ui20 = require("@elementor/ui");
|
|
1102
|
+
var import_i18n10 = require("@wordpress/i18n");
|
|
1103
|
+
var StartIcon2 = (0, import_ui20.withDirection)(import_icons9.LayoutAlignLeftIcon);
|
|
1104
|
+
var EndIcon2 = (0, import_ui20.withDirection)(import_icons9.LayoutAlignRightIcon);
|
|
978
1105
|
var iconProps2 = {
|
|
979
1106
|
isClockwise: false,
|
|
980
1107
|
offset: 90
|
|
@@ -982,105 +1109,105 @@ var iconProps2 = {
|
|
|
982
1109
|
var options2 = [
|
|
983
1110
|
{
|
|
984
1111
|
value: "start",
|
|
985
|
-
label: (0,
|
|
986
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1112
|
+
label: (0, import_i18n10.__)("Start", "elementor"),
|
|
1113
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
|
|
987
1114
|
showTooltip: true
|
|
988
1115
|
},
|
|
989
1116
|
{
|
|
990
1117
|
value: "center",
|
|
991
|
-
label: (0,
|
|
992
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1118
|
+
label: (0, import_i18n10.__)("Center", "elementor"),
|
|
1119
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: import_icons9.LayoutAlignCenterIcon, size, ...iconProps2 }),
|
|
993
1120
|
showTooltip: true
|
|
994
1121
|
},
|
|
995
1122
|
{
|
|
996
1123
|
value: "end",
|
|
997
|
-
label: (0,
|
|
998
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1124
|
+
label: (0, import_i18n10.__)("End", "elementor"),
|
|
1125
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
|
|
999
1126
|
showTooltip: true
|
|
1000
1127
|
},
|
|
1001
1128
|
{
|
|
1002
1129
|
value: "stretch",
|
|
1003
|
-
label: (0,
|
|
1004
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1130
|
+
label: (0, import_i18n10.__)("Stretch", "elementor"),
|
|
1131
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: import_icons9.LayoutDistributeVerticalIcon, size, ...iconProps2 }),
|
|
1005
1132
|
showTooltip: true
|
|
1006
1133
|
}
|
|
1007
1134
|
];
|
|
1008
1135
|
var AlignSelfChild = () => {
|
|
1009
1136
|
const { isSiteRtl } = useDirection();
|
|
1010
|
-
return /* @__PURE__ */
|
|
1137
|
+
return /* @__PURE__ */ React29.createElement(import_ui20.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React29.createElement(import_ui20.ThemeProvider, null, /* @__PURE__ */ React29.createElement(StylesField, { bind: "align-self" }, /* @__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_controls14.ControlLabel, null, (0, import_i18n10.__)("Align self", "elementor"))), /* @__PURE__ */ React29.createElement(import_ui20.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React29.createElement(import_editor_controls14.ToggleControl, { options: options2 }))))));
|
|
1011
1138
|
};
|
|
1012
1139
|
|
|
1013
1140
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
1014
|
-
var
|
|
1141
|
+
var React30 = __toESM(require("react"));
|
|
1015
1142
|
var import_editor_controls15 = require("@elementor/editor-controls");
|
|
1016
|
-
var
|
|
1017
|
-
var
|
|
1143
|
+
var import_ui21 = require("@elementor/ui");
|
|
1144
|
+
var import_i18n11 = require("@wordpress/i18n");
|
|
1018
1145
|
var DisplayField = () => {
|
|
1019
1146
|
const options10 = [
|
|
1020
1147
|
{
|
|
1021
1148
|
value: "block",
|
|
1022
|
-
renderContent: () => (0,
|
|
1023
|
-
label: (0,
|
|
1149
|
+
renderContent: () => (0, import_i18n11.__)("Block", "elementor"),
|
|
1150
|
+
label: (0, import_i18n11.__)("Block", "elementor")
|
|
1024
1151
|
},
|
|
1025
1152
|
{
|
|
1026
1153
|
value: "flex",
|
|
1027
|
-
renderContent: () => (0,
|
|
1028
|
-
label: (0,
|
|
1154
|
+
renderContent: () => (0, import_i18n11.__)("Flex", "elementor"),
|
|
1155
|
+
label: (0, import_i18n11.__)("Flex", "elementor")
|
|
1029
1156
|
}
|
|
1030
1157
|
];
|
|
1031
|
-
return /* @__PURE__ */
|
|
1158
|
+
return /* @__PURE__ */ React30.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React30.createElement(import_ui21.Stack, { gap: 1 }, /* @__PURE__ */ React30.createElement(import_editor_controls15.ControlLabel, null, (0, import_i18n11.__)("Display", "elementor")), /* @__PURE__ */ React30.createElement(import_editor_controls15.ToggleControl, { options: options10, fullWidth: true })));
|
|
1032
1159
|
};
|
|
1033
1160
|
|
|
1034
1161
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
1035
|
-
var
|
|
1162
|
+
var React31 = __toESM(require("react"));
|
|
1036
1163
|
var import_editor_controls16 = require("@elementor/editor-controls");
|
|
1037
|
-
var
|
|
1038
|
-
var
|
|
1039
|
-
var
|
|
1164
|
+
var import_icons10 = require("@elementor/icons");
|
|
1165
|
+
var import_ui22 = require("@elementor/ui");
|
|
1166
|
+
var import_i18n12 = require("@wordpress/i18n");
|
|
1040
1167
|
var options3 = [
|
|
1041
1168
|
{
|
|
1042
1169
|
value: "row",
|
|
1043
|
-
label: (0,
|
|
1170
|
+
label: (0, import_i18n12.__)("Row", "elementor"),
|
|
1044
1171
|
renderContent: ({ size }) => {
|
|
1045
|
-
const StartIcon4 = (0,
|
|
1046
|
-
return /* @__PURE__ */
|
|
1172
|
+
const StartIcon4 = (0, import_ui22.withDirection)(import_icons10.ArrowRightIcon);
|
|
1173
|
+
return /* @__PURE__ */ React31.createElement(StartIcon4, { fontSize: size });
|
|
1047
1174
|
},
|
|
1048
1175
|
showTooltip: true
|
|
1049
1176
|
},
|
|
1050
1177
|
{
|
|
1051
1178
|
value: "column",
|
|
1052
|
-
label: (0,
|
|
1053
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1179
|
+
label: (0, import_i18n12.__)("Column", "elementor"),
|
|
1180
|
+
renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons10.ArrowDownSmallIcon, { fontSize: size }),
|
|
1054
1181
|
showTooltip: true
|
|
1055
1182
|
},
|
|
1056
1183
|
{
|
|
1057
1184
|
value: "row-reverse",
|
|
1058
|
-
label: (0,
|
|
1185
|
+
label: (0, import_i18n12.__)("Reversed row", "elementor"),
|
|
1059
1186
|
renderContent: ({ size }) => {
|
|
1060
|
-
const EndIcon4 = (0,
|
|
1061
|
-
return /* @__PURE__ */
|
|
1187
|
+
const EndIcon4 = (0, import_ui22.withDirection)(import_icons10.ArrowLeftIcon);
|
|
1188
|
+
return /* @__PURE__ */ React31.createElement(EndIcon4, { fontSize: size });
|
|
1062
1189
|
},
|
|
1063
1190
|
showTooltip: true
|
|
1064
1191
|
},
|
|
1065
1192
|
{
|
|
1066
1193
|
value: "column-reverse",
|
|
1067
|
-
label: (0,
|
|
1068
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1194
|
+
label: (0, import_i18n12.__)("Reversed column", "elementor"),
|
|
1195
|
+
renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(import_icons10.ArrowUpSmallIcon, { fontSize: size }),
|
|
1069
1196
|
showTooltip: true
|
|
1070
1197
|
}
|
|
1071
1198
|
];
|
|
1072
1199
|
var FlexDirectionField = () => {
|
|
1073
1200
|
const { isSiteRtl } = useDirection();
|
|
1074
|
-
return /* @__PURE__ */
|
|
1201
|
+
return /* @__PURE__ */ React31.createElement(import_ui22.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React31.createElement(import_ui22.ThemeProvider, null, /* @__PURE__ */ React31.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React31.createElement(import_ui22.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(import_editor_controls16.ControlLabel, null, (0, import_i18n12.__)("Direction", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui22.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React31.createElement(import_editor_controls16.ToggleControl, { options: options3 }))))));
|
|
1075
1202
|
};
|
|
1076
1203
|
|
|
1077
1204
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
1078
|
-
var
|
|
1079
|
-
var
|
|
1205
|
+
var React32 = __toESM(require("react"));
|
|
1206
|
+
var import_react10 = require("react");
|
|
1080
1207
|
var import_editor_controls17 = require("@elementor/editor-controls");
|
|
1081
|
-
var
|
|
1082
|
-
var
|
|
1083
|
-
var
|
|
1208
|
+
var import_icons11 = require("@elementor/icons");
|
|
1209
|
+
var import_ui23 = require("@elementor/ui");
|
|
1210
|
+
var import_i18n13 = require("@wordpress/i18n");
|
|
1084
1211
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
1085
1212
|
var LAST_DEFAULT_VALUE = 99999;
|
|
1086
1213
|
var FIRST = "first";
|
|
@@ -1093,26 +1220,26 @@ var orderValueMap = {
|
|
|
1093
1220
|
var items = [
|
|
1094
1221
|
{
|
|
1095
1222
|
value: FIRST,
|
|
1096
|
-
label: (0,
|
|
1097
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1223
|
+
label: (0, import_i18n13.__)("First", "elementor"),
|
|
1224
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons11.ArrowUpSmallIcon, { fontSize: size }),
|
|
1098
1225
|
showTooltip: true
|
|
1099
1226
|
},
|
|
1100
1227
|
{
|
|
1101
1228
|
value: LAST,
|
|
1102
|
-
label: (0,
|
|
1103
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1229
|
+
label: (0, import_i18n13.__)("Last", "elementor"),
|
|
1230
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons11.ArrowDownSmallIcon, { fontSize: size }),
|
|
1104
1231
|
showTooltip: true
|
|
1105
1232
|
},
|
|
1106
1233
|
{
|
|
1107
1234
|
value: CUSTOM,
|
|
1108
|
-
label: (0,
|
|
1109
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1235
|
+
label: (0, import_i18n13.__)("Custom", "elementor"),
|
|
1236
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(import_icons11.PencilIcon, { fontSize: size }),
|
|
1110
1237
|
showTooltip: true
|
|
1111
1238
|
}
|
|
1112
1239
|
];
|
|
1113
1240
|
var FlexOrderField = () => {
|
|
1114
1241
|
const { isSiteRtl } = useDirection(), [order, setOrder] = useStylesField("order");
|
|
1115
|
-
const [groupControlValue, setGroupControlValue] = (0,
|
|
1242
|
+
const [groupControlValue, setGroupControlValue] = (0, import_react10.useState)(getGroupControlValue(order?.value || null));
|
|
1116
1243
|
const handleToggleButtonChange = (group) => {
|
|
1117
1244
|
setGroupControlValue(group);
|
|
1118
1245
|
if (!group || group === CUSTOM) {
|
|
@@ -1121,7 +1248,7 @@ var FlexOrderField = () => {
|
|
|
1121
1248
|
}
|
|
1122
1249
|
setOrder({ $$type: "number", value: orderValueMap[group] });
|
|
1123
1250
|
};
|
|
1124
|
-
return /* @__PURE__ */
|
|
1251
|
+
return /* @__PURE__ */ React32.createElement(import_ui23.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React32.createElement(import_ui23.ThemeProvider, null, /* @__PURE__ */ React32.createElement(import_ui23.Stack, { gap: 2 }, /* @__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_controls17.ControlLabel, null, (0, import_i18n13.__)("Order", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui23.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(
|
|
1125
1252
|
import_editor_controls17.ControlToggleButtonGroup,
|
|
1126
1253
|
{
|
|
1127
1254
|
items,
|
|
@@ -1129,7 +1256,7 @@ var FlexOrderField = () => {
|
|
|
1129
1256
|
onChange: handleToggleButtonChange,
|
|
1130
1257
|
exclusive: true
|
|
1131
1258
|
}
|
|
1132
|
-
))), CUSTOM === groupControlValue && /* @__PURE__ */
|
|
1259
|
+
))), CUSTOM === groupControlValue && /* @__PURE__ */ React32.createElement(StylesField, { bind: "order" }, /* @__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_controls17.ControlLabel, null, (0, import_i18n13.__)("Custom order", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui23.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(
|
|
1133
1260
|
import_editor_controls17.NumberControl,
|
|
1134
1261
|
{
|
|
1135
1262
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -1149,36 +1276,36 @@ var getGroupControlValue = (order) => {
|
|
|
1149
1276
|
};
|
|
1150
1277
|
|
|
1151
1278
|
// src/components/style-sections/layout-section/flex-size-field.tsx
|
|
1152
|
-
var
|
|
1279
|
+
var React33 = __toESM(require("react"));
|
|
1153
1280
|
var import_editor_controls18 = require("@elementor/editor-controls");
|
|
1154
|
-
var
|
|
1155
|
-
var
|
|
1156
|
-
var
|
|
1281
|
+
var import_icons12 = require("@elementor/icons");
|
|
1282
|
+
var import_ui24 = require("@elementor/ui");
|
|
1283
|
+
var import_i18n14 = require("@wordpress/i18n");
|
|
1157
1284
|
var DEFAULT = 1;
|
|
1158
1285
|
var items2 = [
|
|
1159
1286
|
{
|
|
1160
1287
|
value: "flex-grow",
|
|
1161
|
-
label: (0,
|
|
1162
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1288
|
+
label: (0, import_i18n14.__)("Grow", "elementor"),
|
|
1289
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons12.ExpandIcon, { fontSize: size }),
|
|
1163
1290
|
showTooltip: true
|
|
1164
1291
|
},
|
|
1165
1292
|
{
|
|
1166
1293
|
value: "flex-shrink",
|
|
1167
|
-
label: (0,
|
|
1168
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1294
|
+
label: (0, import_i18n14.__)("Shrink", "elementor"),
|
|
1295
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons12.ShrinkIcon, { fontSize: size }),
|
|
1169
1296
|
showTooltip: true
|
|
1170
1297
|
},
|
|
1171
1298
|
{
|
|
1172
1299
|
value: "custom",
|
|
1173
|
-
label: (0,
|
|
1174
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1300
|
+
label: (0, import_i18n14.__)("Custom", "elementor"),
|
|
1301
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons12.PencilIcon, { fontSize: size }),
|
|
1175
1302
|
showTooltip: true
|
|
1176
1303
|
}
|
|
1177
1304
|
];
|
|
1178
1305
|
var FlexSizeField = () => {
|
|
1179
1306
|
const { isSiteRtl } = useDirection(), [growField, setGrowField] = useStylesField("flex-grow"), [shrinkField, setShrinkField] = useStylesField("flex-shrink"), [basisField, setBasisField] = useStylesField("flex-basis");
|
|
1180
1307
|
const grow = growField?.value || null, shrink = shrinkField?.value || null, basis = basisField?.value || null;
|
|
1181
|
-
const currentGroup =
|
|
1308
|
+
const currentGroup = React33.useMemo(() => getActiveGroup({ grow, shrink, basis }), [grow, shrink, basis]), [activeGroup, setActiveGroup] = React33.useState(currentGroup);
|
|
1182
1309
|
const onChangeGroup = (group = null) => {
|
|
1183
1310
|
setActiveGroup(group);
|
|
1184
1311
|
setBasisField(null);
|
|
@@ -1195,7 +1322,7 @@ var FlexSizeField = () => {
|
|
|
1195
1322
|
setGrowField(null);
|
|
1196
1323
|
setShrinkField({ $$type: "number", value: DEFAULT });
|
|
1197
1324
|
};
|
|
1198
|
-
return /* @__PURE__ */
|
|
1325
|
+
return /* @__PURE__ */ React33.createElement(import_ui24.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React33.createElement(import_ui24.ThemeProvider, null, /* @__PURE__ */ React33.createElement(import_ui24.Stack, { gap: 2 }, /* @__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_controls18.ControlLabel, null, (0, import_i18n14.__)("Size", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(
|
|
1199
1326
|
import_editor_controls18.ControlToggleButtonGroup,
|
|
1200
1327
|
{
|
|
1201
1328
|
value: activeGroup,
|
|
@@ -1203,9 +1330,9 @@ var FlexSizeField = () => {
|
|
|
1203
1330
|
items: items2,
|
|
1204
1331
|
exclusive: true
|
|
1205
1332
|
}
|
|
1206
|
-
))), "custom" === activeGroup && /* @__PURE__ */
|
|
1333
|
+
))), "custom" === activeGroup && /* @__PURE__ */ React33.createElement(FlexCustomField, null))));
|
|
1207
1334
|
};
|
|
1208
|
-
var FlexCustomField = () => /* @__PURE__ */
|
|
1335
|
+
var FlexCustomField = () => /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(StylesField, { bind: "flex-grow" }, /* @__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_controls18.ControlLabel, null, (0, import_i18n14.__)("Grow", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(import_editor_controls18.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React33.createElement(StylesField, { bind: "flex-shrink" }, /* @__PURE__ */ React33.createElement(import_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_controls18.ControlLabel, null, (0, import_i18n14.__)("Shrink", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(import_editor_controls18.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React33.createElement(StylesField, { bind: "flex-basis" }, /* @__PURE__ */ React33.createElement(import_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_controls18.ControlLabel, null, (0, import_i18n14.__)("Basis", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui24.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(import_editor_controls18.SizeControl, null)))));
|
|
1209
1336
|
var getActiveGroup = ({
|
|
1210
1337
|
grow,
|
|
1211
1338
|
shrink,
|
|
@@ -1227,22 +1354,22 @@ var getActiveGroup = ({
|
|
|
1227
1354
|
};
|
|
1228
1355
|
|
|
1229
1356
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
1230
|
-
var
|
|
1357
|
+
var React34 = __toESM(require("react"));
|
|
1231
1358
|
var import_editor_controls19 = require("@elementor/editor-controls");
|
|
1232
|
-
var
|
|
1233
|
-
var
|
|
1359
|
+
var import_ui25 = require("@elementor/ui");
|
|
1360
|
+
var import_i18n15 = require("@wordpress/i18n");
|
|
1234
1361
|
var GapControlField = () => {
|
|
1235
|
-
return /* @__PURE__ */
|
|
1362
|
+
return /* @__PURE__ */ React34.createElement(import_ui25.Stack, { gap: 1 }, /* @__PURE__ */ React34.createElement(StylesField, { bind: "gap" }, /* @__PURE__ */ React34.createElement(import_editor_controls19.GapControl, { label: (0, import_i18n15.__)("Gaps", "elementor") })));
|
|
1236
1363
|
};
|
|
1237
1364
|
|
|
1238
1365
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
1239
|
-
var
|
|
1366
|
+
var React35 = __toESM(require("react"));
|
|
1240
1367
|
var import_editor_controls20 = require("@elementor/editor-controls");
|
|
1241
|
-
var
|
|
1242
|
-
var
|
|
1243
|
-
var
|
|
1244
|
-
var StartIcon3 = (0,
|
|
1245
|
-
var EndIcon3 = (0,
|
|
1368
|
+
var import_icons13 = require("@elementor/icons");
|
|
1369
|
+
var import_ui26 = require("@elementor/ui");
|
|
1370
|
+
var import_i18n16 = require("@wordpress/i18n");
|
|
1371
|
+
var StartIcon3 = (0, import_ui26.withDirection)(import_icons13.JustifyTopIcon);
|
|
1372
|
+
var EndIcon3 = (0, import_ui26.withDirection)(import_icons13.JustifyBottomIcon);
|
|
1246
1373
|
var iconProps3 = {
|
|
1247
1374
|
isClockwise: true,
|
|
1248
1375
|
offset: -90
|
|
@@ -1250,75 +1377,75 @@ var iconProps3 = {
|
|
|
1250
1377
|
var options4 = [
|
|
1251
1378
|
{
|
|
1252
1379
|
value: "start",
|
|
1253
|
-
label: (0,
|
|
1254
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1380
|
+
label: (0, import_i18n16.__)("Start", "elementor"),
|
|
1381
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: StartIcon3, size, ...iconProps3 }),
|
|
1255
1382
|
showTooltip: true
|
|
1256
1383
|
},
|
|
1257
1384
|
{
|
|
1258
1385
|
value: "center",
|
|
1259
|
-
label: (0,
|
|
1260
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1386
|
+
label: (0, import_i18n16.__)("Center", "elementor"),
|
|
1387
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons13.JustifyCenterIcon, size, ...iconProps3 }),
|
|
1261
1388
|
showTooltip: true
|
|
1262
1389
|
},
|
|
1263
1390
|
{
|
|
1264
1391
|
value: "end",
|
|
1265
|
-
label: (0,
|
|
1266
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1392
|
+
label: (0, import_i18n16.__)("End", "elementor"),
|
|
1393
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: EndIcon3, size, ...iconProps3 }),
|
|
1267
1394
|
showTooltip: true
|
|
1268
1395
|
},
|
|
1269
1396
|
{
|
|
1270
1397
|
value: "space-between",
|
|
1271
|
-
label: (0,
|
|
1272
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1398
|
+
label: (0, import_i18n16.__)("Space between", "elementor"),
|
|
1399
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons13.JustifySpaceBetweenVerticalIcon, size, ...iconProps3 }),
|
|
1273
1400
|
showTooltip: true
|
|
1274
1401
|
},
|
|
1275
1402
|
{
|
|
1276
1403
|
value: "space-around",
|
|
1277
|
-
label: (0,
|
|
1278
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1404
|
+
label: (0, import_i18n16.__)("Space around", "elementor"),
|
|
1405
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons13.JustifySpaceAroundVerticalIcon, size, ...iconProps3 }),
|
|
1279
1406
|
showTooltip: true
|
|
1280
1407
|
},
|
|
1281
1408
|
{
|
|
1282
1409
|
value: "space-evenly",
|
|
1283
|
-
label: (0,
|
|
1284
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1410
|
+
label: (0, import_i18n16.__)("Space evenly", "elementor"),
|
|
1411
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: import_icons13.JustifyDistributeVerticalIcon, size, ...iconProps3 }),
|
|
1285
1412
|
showTooltip: true
|
|
1286
1413
|
}
|
|
1287
1414
|
];
|
|
1288
1415
|
var JustifyContentField = () => {
|
|
1289
1416
|
const { isSiteRtl } = useDirection();
|
|
1290
|
-
return /* @__PURE__ */
|
|
1417
|
+
return /* @__PURE__ */ React35.createElement(import_ui26.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React35.createElement(import_ui26.ThemeProvider, null, /* @__PURE__ */ React35.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React35.createElement(import_ui26.Stack, { gap: 1 }, /* @__PURE__ */ React35.createElement(import_editor_controls20.ControlLabel, null, (0, import_i18n16.__)("Justify content", "elementor")), /* @__PURE__ */ React35.createElement(import_editor_controls20.ToggleControl, { options: options4, fullWidth: true })))));
|
|
1291
1418
|
};
|
|
1292
1419
|
|
|
1293
1420
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
1294
|
-
var
|
|
1421
|
+
var React36 = __toESM(require("react"));
|
|
1295
1422
|
var import_editor_controls21 = require("@elementor/editor-controls");
|
|
1296
|
-
var
|
|
1297
|
-
var
|
|
1298
|
-
var
|
|
1423
|
+
var import_icons14 = require("@elementor/icons");
|
|
1424
|
+
var import_ui27 = require("@elementor/ui");
|
|
1425
|
+
var import_i18n17 = require("@wordpress/i18n");
|
|
1299
1426
|
var options5 = [
|
|
1300
1427
|
{
|
|
1301
1428
|
value: "nowrap",
|
|
1302
|
-
label: (0,
|
|
1303
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1429
|
+
label: (0, import_i18n17.__)("No wrap", "elementor"),
|
|
1430
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons14.ArrowRightIcon, { fontSize: size }),
|
|
1304
1431
|
showTooltip: true
|
|
1305
1432
|
},
|
|
1306
1433
|
{
|
|
1307
1434
|
value: "wrap",
|
|
1308
|
-
label: (0,
|
|
1309
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1435
|
+
label: (0, import_i18n17.__)("Wrap", "elementor"),
|
|
1436
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons14.ArrowBackIcon, { fontSize: size }),
|
|
1310
1437
|
showTooltip: true
|
|
1311
1438
|
},
|
|
1312
1439
|
{
|
|
1313
1440
|
value: "wrap-reverse",
|
|
1314
|
-
label: (0,
|
|
1315
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1441
|
+
label: (0, import_i18n17.__)("Reversed wrap", "elementor"),
|
|
1442
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons14.ArrowForwardIcon, { fontSize: size }),
|
|
1316
1443
|
showTooltip: true
|
|
1317
1444
|
}
|
|
1318
1445
|
];
|
|
1319
1446
|
var WrapField = () => {
|
|
1320
1447
|
const { isSiteRtl } = useDirection();
|
|
1321
|
-
return /* @__PURE__ */
|
|
1448
|
+
return /* @__PURE__ */ React36.createElement(import_ui27.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(import_ui27.ThemeProvider, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React36.createElement(import_ui27.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(import_ui27.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(import_editor_controls21.ControlLabel, null, (0, import_i18n17.__)("Wrap", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui27.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React36.createElement(import_editor_controls21.ToggleControl, { options: options5 }))))));
|
|
1322
1449
|
};
|
|
1323
1450
|
|
|
1324
1451
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -1327,22 +1454,22 @@ var LayoutSection = () => {
|
|
|
1327
1454
|
const { element } = useElement();
|
|
1328
1455
|
const parent = (0, import_editor_elements4.useParentElement)(element.id);
|
|
1329
1456
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
1330
|
-
return /* @__PURE__ */
|
|
1457
|
+
return /* @__PURE__ */ React37.createElement(import_ui28.Stack, { gap: 2 }, /* @__PURE__ */ React37.createElement(DisplayField, null), "flex" === display?.value && /* @__PURE__ */ React37.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React37.createElement(FlexChildFields, null));
|
|
1331
1458
|
};
|
|
1332
|
-
var FlexFields = () => /* @__PURE__ */
|
|
1333
|
-
var FlexChildFields = () => /* @__PURE__ */
|
|
1459
|
+
var FlexFields = () => /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(FlexDirectionField, null), /* @__PURE__ */ React37.createElement(JustifyContentField, null), /* @__PURE__ */ React37.createElement(AlignItemsField, null), /* @__PURE__ */ React37.createElement(import_ui28.Divider, null), /* @__PURE__ */ React37.createElement(GapControlField, null), /* @__PURE__ */ React37.createElement(WrapField, null));
|
|
1460
|
+
var FlexChildFields = () => /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(import_ui28.Divider, null), /* @__PURE__ */ React37.createElement(import_editor_controls22.ControlLabel, null, (0, import_i18n18.__)("Flex child", "elementor")), /* @__PURE__ */ React37.createElement(AlignSelfChild, null), /* @__PURE__ */ React37.createElement(FlexOrderField, null), /* @__PURE__ */ React37.createElement(FlexSizeField, null));
|
|
1334
1461
|
|
|
1335
1462
|
// src/components/style-sections/position-section/position-section.tsx
|
|
1336
|
-
var
|
|
1337
|
-
var
|
|
1463
|
+
var React41 = __toESM(require("react"));
|
|
1464
|
+
var import_ui32 = require("@elementor/ui");
|
|
1338
1465
|
|
|
1339
1466
|
// src/hooks/use-session-storage.ts
|
|
1340
|
-
var
|
|
1467
|
+
var import_react11 = require("react");
|
|
1341
1468
|
var import_utils2 = require("@elementor/utils");
|
|
1342
1469
|
var useSessionStorage = (key) => {
|
|
1343
1470
|
const prefixedKey = `elementor/${key}`;
|
|
1344
|
-
const [value, setValue] = (0,
|
|
1345
|
-
(0,
|
|
1471
|
+
const [value, setValue] = (0, import_react11.useState)();
|
|
1472
|
+
(0, import_react11.useEffect)(() => {
|
|
1346
1473
|
return subscribeToSessionStorage(prefixedKey, (newValue) => {
|
|
1347
1474
|
setValue(newValue ?? null);
|
|
1348
1475
|
});
|
|
@@ -1374,46 +1501,46 @@ var subscribeToSessionStorage = (key, subscriber) => {
|
|
|
1374
1501
|
};
|
|
1375
1502
|
|
|
1376
1503
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
1377
|
-
var
|
|
1504
|
+
var React38 = __toESM(require("react"));
|
|
1378
1505
|
var import_editor_controls23 = require("@elementor/editor-controls");
|
|
1379
|
-
var
|
|
1380
|
-
var
|
|
1381
|
-
var
|
|
1506
|
+
var import_icons15 = require("@elementor/icons");
|
|
1507
|
+
var import_ui29 = require("@elementor/ui");
|
|
1508
|
+
var import_i18n19 = require("@wordpress/i18n");
|
|
1382
1509
|
var sideIcons = {
|
|
1383
|
-
left: /* @__PURE__ */
|
|
1384
|
-
right: /* @__PURE__ */
|
|
1385
|
-
top: /* @__PURE__ */
|
|
1386
|
-
bottom: /* @__PURE__ */
|
|
1510
|
+
left: /* @__PURE__ */ React38.createElement(import_icons15.SideLeftIcon, { fontSize: "tiny" }),
|
|
1511
|
+
right: /* @__PURE__ */ React38.createElement(import_icons15.SideRightIcon, { fontSize: "tiny" }),
|
|
1512
|
+
top: /* @__PURE__ */ React38.createElement(import_icons15.SideTopIcon, { fontSize: "tiny" }),
|
|
1513
|
+
bottom: /* @__PURE__ */ React38.createElement(import_icons15.SideBottomIcon, { fontSize: "tiny" })
|
|
1387
1514
|
};
|
|
1388
1515
|
var DimensionsField = () => {
|
|
1389
|
-
return /* @__PURE__ */
|
|
1516
|
+
return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(DimensionField, { side: "top", label: (0, import_i18n19.__)("Top", "elementor") }), /* @__PURE__ */ React38.createElement(DimensionField, { side: "right", label: (0, import_i18n19.__)("Right", "elementor") })), /* @__PURE__ */ React38.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(DimensionField, { side: "bottom", label: (0, import_i18n19.__)("Bottom", "elementor") }), /* @__PURE__ */ React38.createElement(DimensionField, { side: "left", label: (0, import_i18n19.__)("Left", "elementor") })));
|
|
1390
1517
|
};
|
|
1391
1518
|
var DimensionField = ({ side, label }) => {
|
|
1392
|
-
return /* @__PURE__ */
|
|
1519
|
+
return /* @__PURE__ */ React38.createElement(import_ui29.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(import_editor_controls23.ControlLabel, null, label)), /* @__PURE__ */ React38.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(StylesField, { bind: side }, /* @__PURE__ */ React38.createElement(import_editor_controls23.SizeControl, { startIcon: sideIcons[side] }))));
|
|
1393
1520
|
};
|
|
1394
1521
|
|
|
1395
1522
|
// src/components/style-sections/position-section/position-field.tsx
|
|
1396
|
-
var
|
|
1523
|
+
var React39 = __toESM(require("react"));
|
|
1397
1524
|
var import_editor_controls24 = require("@elementor/editor-controls");
|
|
1398
|
-
var
|
|
1399
|
-
var
|
|
1525
|
+
var import_ui30 = require("@elementor/ui");
|
|
1526
|
+
var import_i18n20 = require("@wordpress/i18n");
|
|
1400
1527
|
var positionOptions = [
|
|
1401
|
-
{ label: (0,
|
|
1402
|
-
{ label: (0,
|
|
1403
|
-
{ label: (0,
|
|
1404
|
-
{ label: (0,
|
|
1528
|
+
{ label: (0, import_i18n20.__)("Static", "elementor"), value: "static" },
|
|
1529
|
+
{ label: (0, import_i18n20.__)("Relative", "elementor"), value: "relative" },
|
|
1530
|
+
{ label: (0, import_i18n20.__)("Absolute", "elementor"), value: "absolute" },
|
|
1531
|
+
{ label: (0, import_i18n20.__)("Fixed", "elementor"), value: "fixed" }
|
|
1405
1532
|
];
|
|
1406
1533
|
var PositionField = ({ onChange }) => {
|
|
1407
|
-
return /* @__PURE__ */
|
|
1534
|
+
return /* @__PURE__ */ React39.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React39.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(import_editor_controls24.ControlLabel, null, (0, import_i18n20.__)("Position", "elementor"))), /* @__PURE__ */ React39.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(import_editor_controls24.SelectControl, { options: positionOptions, onChange }))));
|
|
1408
1535
|
};
|
|
1409
1536
|
|
|
1410
1537
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
1411
|
-
var
|
|
1538
|
+
var React40 = __toESM(require("react"));
|
|
1412
1539
|
var import_editor_controls25 = require("@elementor/editor-controls");
|
|
1413
|
-
var
|
|
1414
|
-
var
|
|
1540
|
+
var import_ui31 = require("@elementor/ui");
|
|
1541
|
+
var import_i18n21 = require("@wordpress/i18n");
|
|
1415
1542
|
var ZIndexField = () => {
|
|
1416
|
-
return /* @__PURE__ */
|
|
1543
|
+
return /* @__PURE__ */ React40.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React40.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(import_editor_controls25.ControlLabel, null, (0, import_i18n21.__)("Z-Index", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(import_editor_controls25.NumberControl, null))));
|
|
1417
1544
|
};
|
|
1418
1545
|
|
|
1419
1546
|
// src/components/style-sections/position-section/position-section.tsx
|
|
@@ -1445,7 +1572,7 @@ var PositionSection = () => {
|
|
|
1445
1572
|
}
|
|
1446
1573
|
};
|
|
1447
1574
|
const isNotStatic = positionValue && positionValue?.value !== "static";
|
|
1448
|
-
return /* @__PURE__ */
|
|
1575
|
+
return /* @__PURE__ */ React41.createElement(import_ui32.Stack, { gap: 1.5 }, /* @__PURE__ */ React41.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(DimensionsField, null), /* @__PURE__ */ React41.createElement(ZIndexField, null)) : null);
|
|
1449
1576
|
};
|
|
1450
1577
|
var usePersistDimensions = () => {
|
|
1451
1578
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -1455,91 +1582,91 @@ var usePersistDimensions = () => {
|
|
|
1455
1582
|
};
|
|
1456
1583
|
|
|
1457
1584
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1458
|
-
var
|
|
1585
|
+
var React43 = __toESM(require("react"));
|
|
1459
1586
|
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
1460
|
-
var
|
|
1461
|
-
var
|
|
1587
|
+
var import_ui34 = require("@elementor/ui");
|
|
1588
|
+
var import_i18n23 = require("@wordpress/i18n");
|
|
1462
1589
|
|
|
1463
1590
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
1464
|
-
var
|
|
1591
|
+
var React42 = __toESM(require("react"));
|
|
1465
1592
|
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
1466
|
-
var
|
|
1467
|
-
var
|
|
1468
|
-
var
|
|
1593
|
+
var import_icons16 = require("@elementor/icons");
|
|
1594
|
+
var import_ui33 = require("@elementor/ui");
|
|
1595
|
+
var import_i18n22 = require("@wordpress/i18n");
|
|
1469
1596
|
var options6 = [
|
|
1470
1597
|
{
|
|
1471
1598
|
value: "visible",
|
|
1472
|
-
label: (0,
|
|
1473
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1599
|
+
label: (0, import_i18n22.__)("Visible", "elementor"),
|
|
1600
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons16.EyeIcon, { fontSize: size }),
|
|
1474
1601
|
showTooltip: true
|
|
1475
1602
|
},
|
|
1476
1603
|
{
|
|
1477
1604
|
value: "hidden",
|
|
1478
|
-
label: (0,
|
|
1479
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1605
|
+
label: (0, import_i18n22.__)("Hidden", "elementor"),
|
|
1606
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons16.EyeOffIcon, { fontSize: size }),
|
|
1480
1607
|
showTooltip: true
|
|
1481
1608
|
},
|
|
1482
1609
|
{
|
|
1483
1610
|
value: "auto",
|
|
1484
|
-
label: (0,
|
|
1485
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1611
|
+
label: (0, import_i18n22.__)("Auto", "elementor"),
|
|
1612
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons16.ExpandBottomIcon, { fontSize: size }),
|
|
1486
1613
|
showTooltip: true
|
|
1487
1614
|
}
|
|
1488
1615
|
];
|
|
1489
1616
|
var OverflowField = () => {
|
|
1490
|
-
return /* @__PURE__ */
|
|
1617
|
+
return /* @__PURE__ */ React42.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React42.createElement(import_ui33.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React42.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(import_editor_controls26.ControlLabel, null, (0, import_i18n22.__)("Overflow", "elementor"))), /* @__PURE__ */ React42.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React42.createElement(import_editor_controls26.ToggleControl, { options: options6 }))));
|
|
1491
1618
|
};
|
|
1492
1619
|
|
|
1493
1620
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1494
1621
|
var SizeSection = () => {
|
|
1495
|
-
return /* @__PURE__ */
|
|
1622
|
+
return /* @__PURE__ */ React43.createElement(import_ui34.Stack, { gap: 1.5 }, /* @__PURE__ */ React43.createElement(import_ui34.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "width", label: (0, import_i18n23.__)("Width", "elementor") })), /* @__PURE__ */ React43.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "height", label: (0, import_i18n23.__)("Height", "elementor") }))), /* @__PURE__ */ React43.createElement(import_ui34.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "min-width", label: (0, import_i18n23.__)("Min. Width", "elementor") })), /* @__PURE__ */ React43.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "min-height", label: (0, import_i18n23.__)("Min. Height", "elementor") }))), /* @__PURE__ */ React43.createElement(import_ui34.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "max-width", label: (0, import_i18n23.__)("Max. Width", "elementor") })), /* @__PURE__ */ React43.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "max-height", label: (0, import_i18n23.__)("Max. Height", "elementor") }))), /* @__PURE__ */ React43.createElement(import_ui34.Divider, null), /* @__PURE__ */ React43.createElement(import_ui34.Stack, null, /* @__PURE__ */ React43.createElement(OverflowField, null)));
|
|
1496
1623
|
};
|
|
1497
1624
|
var SizeField = ({ label, bind }) => {
|
|
1498
|
-
return /* @__PURE__ */
|
|
1625
|
+
return /* @__PURE__ */ React43.createElement(StylesField, { bind }, /* @__PURE__ */ React43.createElement(import_ui34.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React43.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(import_editor_controls27.ControlLabel, null, label)), /* @__PURE__ */ React43.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(import_editor_controls27.SizeControl, null))));
|
|
1499
1626
|
};
|
|
1500
1627
|
|
|
1501
1628
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
1502
|
-
var
|
|
1629
|
+
var React44 = __toESM(require("react"));
|
|
1503
1630
|
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
1504
|
-
var
|
|
1505
|
-
var
|
|
1631
|
+
var import_ui35 = require("@elementor/ui");
|
|
1632
|
+
var import_i18n24 = require("@wordpress/i18n");
|
|
1506
1633
|
var SpacingSection = () => {
|
|
1507
|
-
return /* @__PURE__ */
|
|
1634
|
+
return /* @__PURE__ */ React44.createElement(import_ui35.Stack, { gap: 1.5 }, /* @__PURE__ */ React44.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React44.createElement(import_editor_controls28.LinkedDimensionsControl, { label: (0, import_i18n24.__)("Padding", "elementor") })), /* @__PURE__ */ React44.createElement(import_ui35.Divider, null), /* @__PURE__ */ React44.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React44.createElement(import_editor_controls28.LinkedDimensionsControl, { label: (0, import_i18n24.__)("Margin", "elementor") })));
|
|
1508
1635
|
};
|
|
1509
1636
|
|
|
1510
1637
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
1511
|
-
var
|
|
1512
|
-
var
|
|
1638
|
+
var React58 = __toESM(require("react"));
|
|
1639
|
+
var import_ui48 = require("@elementor/ui");
|
|
1513
1640
|
|
|
1514
1641
|
// src/components/collapsible-content.tsx
|
|
1515
|
-
var
|
|
1516
|
-
var
|
|
1517
|
-
var
|
|
1518
|
-
var
|
|
1642
|
+
var React45 = __toESM(require("react"));
|
|
1643
|
+
var import_react12 = require("react");
|
|
1644
|
+
var import_ui36 = require("@elementor/ui");
|
|
1645
|
+
var import_i18n25 = require("@wordpress/i18n");
|
|
1519
1646
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
1520
|
-
const [open, setOpen] = (0,
|
|
1647
|
+
const [open, setOpen] = (0, import_react12.useState)(defaultOpen);
|
|
1521
1648
|
const handleToggle = () => {
|
|
1522
1649
|
setOpen((prevOpen) => !prevOpen);
|
|
1523
1650
|
};
|
|
1524
|
-
return /* @__PURE__ */
|
|
1525
|
-
|
|
1651
|
+
return /* @__PURE__ */ React45.createElement(import_ui36.Stack, { sx: { py: 0.5 } }, /* @__PURE__ */ React45.createElement(
|
|
1652
|
+
import_ui36.Button,
|
|
1526
1653
|
{
|
|
1527
1654
|
fullWidth: true,
|
|
1528
1655
|
size: "small",
|
|
1529
1656
|
color: "secondary",
|
|
1530
1657
|
variant: "outlined",
|
|
1531
1658
|
onClick: handleToggle,
|
|
1532
|
-
endIcon: /* @__PURE__ */
|
|
1659
|
+
endIcon: /* @__PURE__ */ React45.createElement(CollapseIcon, { open })
|
|
1533
1660
|
},
|
|
1534
|
-
open ? (0,
|
|
1535
|
-
), /* @__PURE__ */
|
|
1661
|
+
open ? (0, import_i18n25.__)("Show less", "elementor") : (0, import_i18n25.__)("Show more", "elementor")
|
|
1662
|
+
), /* @__PURE__ */ React45.createElement(import_ui36.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
1536
1663
|
};
|
|
1537
1664
|
|
|
1538
1665
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
1539
|
-
var
|
|
1666
|
+
var React46 = __toESM(require("react"));
|
|
1540
1667
|
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
1541
|
-
var
|
|
1542
|
-
var
|
|
1668
|
+
var import_ui37 = require("@elementor/ui");
|
|
1669
|
+
var import_i18n26 = require("@wordpress/i18n");
|
|
1543
1670
|
|
|
1544
1671
|
// src/sync/get-elementor-config.ts
|
|
1545
1672
|
var getElementorConfig = () => {
|
|
@@ -1553,7 +1680,7 @@ var FontFamilyField = () => {
|
|
|
1553
1680
|
if (!fontFamilies) {
|
|
1554
1681
|
return null;
|
|
1555
1682
|
}
|
|
1556
|
-
return /* @__PURE__ */
|
|
1683
|
+
return /* @__PURE__ */ React46.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React46.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(import_editor_controls29.ControlLabel, null, (0, import_i18n26.__)("Font Family", "elementor"))), /* @__PURE__ */ React46.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(import_editor_controls29.FontFamilyControl, { fontFamilies }))));
|
|
1557
1684
|
};
|
|
1558
1685
|
var getFontFamilies = () => {
|
|
1559
1686
|
const { controls } = getElementorConfig();
|
|
@@ -1565,115 +1692,115 @@ var getFontFamilies = () => {
|
|
|
1565
1692
|
};
|
|
1566
1693
|
|
|
1567
1694
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
1568
|
-
var
|
|
1695
|
+
var React47 = __toESM(require("react"));
|
|
1569
1696
|
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
1570
|
-
var
|
|
1571
|
-
var
|
|
1697
|
+
var import_ui38 = require("@elementor/ui");
|
|
1698
|
+
var import_i18n27 = require("@wordpress/i18n");
|
|
1572
1699
|
var FontSizeField = () => {
|
|
1573
|
-
return /* @__PURE__ */
|
|
1700
|
+
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React47.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(import_editor_controls30.ControlLabel, null, (0, import_i18n27.__)("Font Size", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(import_editor_controls30.SizeControl, null))));
|
|
1574
1701
|
};
|
|
1575
1702
|
|
|
1576
1703
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
1577
|
-
var
|
|
1704
|
+
var React48 = __toESM(require("react"));
|
|
1578
1705
|
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
1579
|
-
var
|
|
1580
|
-
var
|
|
1706
|
+
var import_ui39 = require("@elementor/ui");
|
|
1707
|
+
var import_i18n28 = require("@wordpress/i18n");
|
|
1581
1708
|
var fontWeightOptions = [
|
|
1582
|
-
{ label: (0,
|
|
1583
|
-
{ label: (0,
|
|
1584
|
-
{ label: (0,
|
|
1585
|
-
{ label: (0,
|
|
1586
|
-
{ label: (0,
|
|
1709
|
+
{ label: (0, import_i18n28.__)("Light - 400", "elementor"), value: "400" },
|
|
1710
|
+
{ label: (0, import_i18n28.__)("Regular - 500", "elementor"), value: "500" },
|
|
1711
|
+
{ label: (0, import_i18n28.__)("Semi Bold - 600", "elementor"), value: "600" },
|
|
1712
|
+
{ label: (0, import_i18n28.__)("Bold - 700", "elementor"), value: "700" },
|
|
1713
|
+
{ label: (0, import_i18n28.__)("Black - 900", "elementor"), value: "900" }
|
|
1587
1714
|
];
|
|
1588
1715
|
var FontWeightField = () => {
|
|
1589
|
-
return /* @__PURE__ */
|
|
1716
|
+
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React48.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(import_editor_controls31.ControlLabel, null, (0, import_i18n28.__)("Font Weight", "elementor"))), /* @__PURE__ */ React48.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(import_editor_controls31.SelectControl, { options: fontWeightOptions }))));
|
|
1590
1717
|
};
|
|
1591
1718
|
|
|
1592
1719
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
1593
|
-
var
|
|
1720
|
+
var React49 = __toESM(require("react"));
|
|
1594
1721
|
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
1595
|
-
var
|
|
1596
|
-
var
|
|
1722
|
+
var import_ui40 = require("@elementor/ui");
|
|
1723
|
+
var import_i18n29 = require("@wordpress/i18n");
|
|
1597
1724
|
var LetterSpacingField = () => {
|
|
1598
|
-
return /* @__PURE__ */
|
|
1725
|
+
return /* @__PURE__ */ React49.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React49.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(import_editor_controls32.ControlLabel, null, (0, import_i18n29.__)("Letter Spacing", "elementor"))), /* @__PURE__ */ React49.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(import_editor_controls32.SizeControl, null))));
|
|
1599
1726
|
};
|
|
1600
1727
|
|
|
1601
1728
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
1602
|
-
var
|
|
1729
|
+
var React50 = __toESM(require("react"));
|
|
1603
1730
|
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
1604
|
-
var
|
|
1605
|
-
var
|
|
1731
|
+
var import_ui41 = require("@elementor/ui");
|
|
1732
|
+
var import_i18n30 = require("@wordpress/i18n");
|
|
1606
1733
|
var LineHeightField = () => {
|
|
1607
|
-
return /* @__PURE__ */
|
|
1734
|
+
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React50.createElement(import_ui41.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React50.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(import_editor_controls33.ControlLabel, null, (0, import_i18n30.__)("Line Height", "elementor"))), /* @__PURE__ */ React50.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(import_editor_controls33.SizeControl, null))));
|
|
1608
1735
|
};
|
|
1609
1736
|
|
|
1610
1737
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
1611
|
-
var
|
|
1738
|
+
var React51 = __toESM(require("react"));
|
|
1612
1739
|
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
1613
|
-
var
|
|
1614
|
-
var
|
|
1615
|
-
var
|
|
1740
|
+
var import_icons17 = require("@elementor/icons");
|
|
1741
|
+
var import_ui42 = require("@elementor/ui");
|
|
1742
|
+
var import_i18n31 = require("@wordpress/i18n");
|
|
1616
1743
|
var options7 = [
|
|
1617
1744
|
{
|
|
1618
1745
|
value: "left",
|
|
1619
|
-
label: (0,
|
|
1620
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1746
|
+
label: (0, import_i18n31.__)("Left", "elementor"),
|
|
1747
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons17.AlignLeftIcon, { fontSize: size })
|
|
1621
1748
|
},
|
|
1622
1749
|
{
|
|
1623
1750
|
value: "center",
|
|
1624
|
-
label: (0,
|
|
1625
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1751
|
+
label: (0, import_i18n31.__)("Center", "elementor"),
|
|
1752
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons17.AlignCenterIcon, { fontSize: size })
|
|
1626
1753
|
},
|
|
1627
1754
|
{
|
|
1628
1755
|
value: "right",
|
|
1629
|
-
label: (0,
|
|
1630
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1756
|
+
label: (0, import_i18n31.__)("Right", "elementor"),
|
|
1757
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons17.AlignRightIcon, { fontSize: size })
|
|
1631
1758
|
},
|
|
1632
1759
|
{
|
|
1633
1760
|
value: "justify",
|
|
1634
|
-
label: (0,
|
|
1635
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1761
|
+
label: (0, import_i18n31.__)("Justify", "elementor"),
|
|
1762
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons17.AlignJustifiedIcon, { fontSize: size })
|
|
1636
1763
|
}
|
|
1637
1764
|
];
|
|
1638
1765
|
var TextAlignmentField = () => {
|
|
1639
|
-
return /* @__PURE__ */
|
|
1766
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(import_editor_controls34.ControlLabel, null, (0, import_i18n31.__)("Alignment", "elementor"))), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React51.createElement(import_editor_controls34.ToggleControl, { options: options7 }))));
|
|
1640
1767
|
};
|
|
1641
1768
|
|
|
1642
1769
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
1643
|
-
var
|
|
1770
|
+
var React52 = __toESM(require("react"));
|
|
1644
1771
|
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
1645
|
-
var
|
|
1646
|
-
var
|
|
1772
|
+
var import_ui43 = require("@elementor/ui");
|
|
1773
|
+
var import_i18n32 = require("@wordpress/i18n");
|
|
1647
1774
|
var TextColorField = () => {
|
|
1648
|
-
return /* @__PURE__ */
|
|
1775
|
+
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React52.createElement(import_ui43.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls35.ControlLabel, null, (0, import_i18n32.__)("Text Color", "elementor"))), /* @__PURE__ */ React52.createElement(import_ui43.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(import_editor_controls35.ColorControl, null))));
|
|
1649
1776
|
};
|
|
1650
1777
|
|
|
1651
1778
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
1652
|
-
var
|
|
1779
|
+
var React53 = __toESM(require("react"));
|
|
1653
1780
|
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
1654
|
-
var
|
|
1655
|
-
var
|
|
1656
|
-
var
|
|
1781
|
+
var import_icons18 = require("@elementor/icons");
|
|
1782
|
+
var import_ui44 = require("@elementor/ui");
|
|
1783
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
1657
1784
|
var options8 = [
|
|
1658
1785
|
{
|
|
1659
1786
|
value: "ltr",
|
|
1660
|
-
label: (0,
|
|
1661
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1787
|
+
label: (0, import_i18n33.__)("Left to Right", "elementor"),
|
|
1788
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons18.TextDirectionLtrIcon, { fontSize: size })
|
|
1662
1789
|
},
|
|
1663
1790
|
{
|
|
1664
1791
|
value: "rtl",
|
|
1665
|
-
label: (0,
|
|
1666
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1792
|
+
label: (0, import_i18n33.__)("Right to Left", "elementor"),
|
|
1793
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(import_icons18.TextDirectionRtlIcon, { fontSize: size })
|
|
1667
1794
|
}
|
|
1668
1795
|
];
|
|
1669
1796
|
var TextDirectionField = () => {
|
|
1670
|
-
return /* @__PURE__ */
|
|
1797
|
+
return /* @__PURE__ */ React53.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React53.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(import_editor_controls36.ControlLabel, null, (0, import_i18n33.__)("Direction", "elementor"))), /* @__PURE__ */ React53.createElement(import_ui44.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React53.createElement(import_editor_controls36.ToggleControl, { options: options8 }))));
|
|
1671
1798
|
};
|
|
1672
1799
|
|
|
1673
1800
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
1674
|
-
var
|
|
1801
|
+
var React54 = __toESM(require("react"));
|
|
1675
1802
|
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
1676
|
-
var
|
|
1803
|
+
var import_i18n34 = require("@wordpress/i18n");
|
|
1677
1804
|
var initTextStroke = {
|
|
1678
1805
|
$$type: "stroke",
|
|
1679
1806
|
value: {
|
|
@@ -1699,24 +1826,24 @@ var TextStrokeField = () => {
|
|
|
1699
1826
|
setTextStroke(null);
|
|
1700
1827
|
};
|
|
1701
1828
|
const hasTextStroke = Boolean(textStroke);
|
|
1702
|
-
return /* @__PURE__ */
|
|
1829
|
+
return /* @__PURE__ */ React54.createElement(
|
|
1703
1830
|
AddOrRemoveContent,
|
|
1704
1831
|
{
|
|
1705
|
-
label: (0,
|
|
1832
|
+
label: (0, import_i18n34.__)("Text Stroke", "elementor"),
|
|
1706
1833
|
isAdded: hasTextStroke,
|
|
1707
1834
|
onAdd: addTextStroke,
|
|
1708
1835
|
onRemove: removeTextStroke
|
|
1709
1836
|
},
|
|
1710
|
-
/* @__PURE__ */
|
|
1837
|
+
/* @__PURE__ */ React54.createElement(StylesField, { bind: "-webkit-text-stroke" }, /* @__PURE__ */ React54.createElement(import_editor_controls37.StrokeControl, null))
|
|
1711
1838
|
);
|
|
1712
1839
|
};
|
|
1713
1840
|
|
|
1714
1841
|
// src/components/style-sections/typography-section/text-style-field.tsx
|
|
1715
|
-
var
|
|
1842
|
+
var React55 = __toESM(require("react"));
|
|
1716
1843
|
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
1717
|
-
var
|
|
1718
|
-
var
|
|
1719
|
-
var
|
|
1844
|
+
var import_icons19 = require("@elementor/icons");
|
|
1845
|
+
var import_ui45 = require("@elementor/ui");
|
|
1846
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
1720
1847
|
var buttonSize = "tiny";
|
|
1721
1848
|
var TextStyleField = () => {
|
|
1722
1849
|
const [fontStyle, setFontStyle] = useStylesField("font-style");
|
|
@@ -1740,7 +1867,7 @@ var TextStyleField = () => {
|
|
|
1740
1867
|
value: newValue
|
|
1741
1868
|
});
|
|
1742
1869
|
};
|
|
1743
|
-
return /* @__PURE__ */
|
|
1870
|
+
return /* @__PURE__ */ React55.createElement(import_ui45.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(import_editor_controls38.ControlLabel, null, (0, import_i18n35.__)("Style", "elementor"))), /* @__PURE__ */ React55.createElement(import_ui45.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React55.createElement(import_ui45.ToggleButtonGroup, { value: formats }, /* @__PURE__ */ React55.createElement(
|
|
1744
1871
|
ToggleButton,
|
|
1745
1872
|
{
|
|
1746
1873
|
value: "italic",
|
|
@@ -1748,8 +1875,8 @@ var TextStyleField = () => {
|
|
|
1748
1875
|
"aria-label": "italic",
|
|
1749
1876
|
sx: { marginLeft: "auto" }
|
|
1750
1877
|
},
|
|
1751
|
-
/* @__PURE__ */
|
|
1752
|
-
), /* @__PURE__ */
|
|
1878
|
+
/* @__PURE__ */ React55.createElement(import_icons19.ItalicIcon, { fontSize: buttonSize })
|
|
1879
|
+
), /* @__PURE__ */ React55.createElement(
|
|
1753
1880
|
ShorthandControl,
|
|
1754
1881
|
{
|
|
1755
1882
|
value: "line-through",
|
|
@@ -1757,8 +1884,8 @@ var TextStyleField = () => {
|
|
|
1757
1884
|
updateValues: handleSetTextDecoration,
|
|
1758
1885
|
"aria-label": "line-through"
|
|
1759
1886
|
},
|
|
1760
|
-
/* @__PURE__ */
|
|
1761
|
-
), /* @__PURE__ */
|
|
1887
|
+
/* @__PURE__ */ React55.createElement(import_icons19.StrikethroughIcon, { fontSize: buttonSize })
|
|
1888
|
+
), /* @__PURE__ */ React55.createElement(
|
|
1762
1889
|
ShorthandControl,
|
|
1763
1890
|
{
|
|
1764
1891
|
value: "underline",
|
|
@@ -1766,7 +1893,7 @@ var TextStyleField = () => {
|
|
|
1766
1893
|
updateValues: handleSetTextDecoration,
|
|
1767
1894
|
"aria-label": "underline"
|
|
1768
1895
|
},
|
|
1769
|
-
/* @__PURE__ */
|
|
1896
|
+
/* @__PURE__ */ React55.createElement(import_icons19.UnderlineIcon, { fontSize: buttonSize })
|
|
1770
1897
|
))));
|
|
1771
1898
|
};
|
|
1772
1899
|
var ShorthandControl = ({
|
|
@@ -1785,52 +1912,52 @@ var ShorthandControl = ({
|
|
|
1785
1912
|
updateValues([...valuesArr, newValue].join(" "));
|
|
1786
1913
|
}
|
|
1787
1914
|
};
|
|
1788
|
-
return /* @__PURE__ */
|
|
1915
|
+
return /* @__PURE__ */ React55.createElement(ToggleButton, { value, onChange: toggleValue, selected, "aria-label": ariaLabel }, children);
|
|
1789
1916
|
};
|
|
1790
1917
|
var ToggleButton = ({ onChange, ...props }) => {
|
|
1791
1918
|
const handleChange = (_e, newValue) => {
|
|
1792
1919
|
onChange(newValue);
|
|
1793
1920
|
};
|
|
1794
|
-
return /* @__PURE__ */
|
|
1921
|
+
return /* @__PURE__ */ React55.createElement(import_ui45.ToggleButton, { ...props, onChange: handleChange, size: buttonSize });
|
|
1795
1922
|
};
|
|
1796
1923
|
|
|
1797
1924
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
1798
|
-
var
|
|
1925
|
+
var React56 = __toESM(require("react"));
|
|
1799
1926
|
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
1800
|
-
var
|
|
1801
|
-
var
|
|
1802
|
-
var
|
|
1927
|
+
var import_icons20 = require("@elementor/icons");
|
|
1928
|
+
var import_ui46 = require("@elementor/ui");
|
|
1929
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
1803
1930
|
var options9 = [
|
|
1804
1931
|
{
|
|
1805
1932
|
value: "capitalize",
|
|
1806
|
-
label: (0,
|
|
1807
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1933
|
+
label: (0, import_i18n36.__)("Capitalize", "elementor"),
|
|
1934
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons20.LetterCaseIcon, { fontSize: size })
|
|
1808
1935
|
},
|
|
1809
1936
|
{
|
|
1810
1937
|
value: "uppercase",
|
|
1811
|
-
label: (0,
|
|
1812
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1938
|
+
label: (0, import_i18n36.__)("Uppercase", "elementor"),
|
|
1939
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons20.LetterCaseUpperIcon, { fontSize: size })
|
|
1813
1940
|
},
|
|
1814
1941
|
{
|
|
1815
1942
|
value: "lowercase",
|
|
1816
|
-
label: (0,
|
|
1817
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1943
|
+
label: (0, import_i18n36.__)("Lowercase", "elementor"),
|
|
1944
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons20.LetterCaseLowerIcon, { fontSize: size })
|
|
1818
1945
|
}
|
|
1819
1946
|
];
|
|
1820
|
-
var TransformField = () => /* @__PURE__ */
|
|
1947
|
+
var TransformField = () => /* @__PURE__ */ React56.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React56.createElement(import_ui46.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(import_editor_controls39.ControlLabel, null, (0, import_i18n36.__)("Transform", "elementor"))), /* @__PURE__ */ React56.createElement(import_ui46.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React56.createElement(import_editor_controls39.ToggleControl, { options: options9 }))));
|
|
1821
1948
|
|
|
1822
1949
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
1823
|
-
var
|
|
1950
|
+
var React57 = __toESM(require("react"));
|
|
1824
1951
|
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
1825
|
-
var
|
|
1826
|
-
var
|
|
1952
|
+
var import_ui47 = require("@elementor/ui");
|
|
1953
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
1827
1954
|
var WordSpacingField = () => {
|
|
1828
|
-
return /* @__PURE__ */
|
|
1955
|
+
return /* @__PURE__ */ React57.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(import_editor_controls40.ControlLabel, null, (0, import_i18n37.__)("Word Spacing", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(import_editor_controls40.SizeControl, null))));
|
|
1829
1956
|
};
|
|
1830
1957
|
|
|
1831
1958
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
1832
1959
|
var TypographySection = () => {
|
|
1833
|
-
return /* @__PURE__ */
|
|
1960
|
+
return /* @__PURE__ */ React58.createElement(import_ui48.Stack, { gap: 1.5 }, /* @__PURE__ */ React58.createElement(FontFamilyField, null), /* @__PURE__ */ React58.createElement(FontWeightField, null), /* @__PURE__ */ React58.createElement(FontSizeField, null), /* @__PURE__ */ React58.createElement(import_ui48.Divider, null), /* @__PURE__ */ React58.createElement(TextAlignmentField, null), /* @__PURE__ */ React58.createElement(TextColorField, null), /* @__PURE__ */ React58.createElement(CollapsibleContent, null, /* @__PURE__ */ React58.createElement(import_ui48.Stack, { gap: 1.5, sx: { pt: 1.5 } }, /* @__PURE__ */ React58.createElement(LineHeightField, null), /* @__PURE__ */ React58.createElement(LetterSpacingField, null), /* @__PURE__ */ React58.createElement(WordSpacingField, null), /* @__PURE__ */ React58.createElement(import_ui48.Divider, null), /* @__PURE__ */ React58.createElement(TextStyleField, null), /* @__PURE__ */ React58.createElement(TransformField, null), /* @__PURE__ */ React58.createElement(TextDirectionField, null), /* @__PURE__ */ React58.createElement(TextStrokeField, null))));
|
|
1834
1961
|
};
|
|
1835
1962
|
|
|
1836
1963
|
// src/components/style-tab.tsx
|
|
@@ -1838,11 +1965,26 @@ var CLASSES_PROP_KEY = "classes";
|
|
|
1838
1965
|
var StyleTab = () => {
|
|
1839
1966
|
const currentClassesProp = useCurrentClassesProp();
|
|
1840
1967
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
1968
|
+
const [activeStyleState, setActiveStyleState] = (0, import_react13.useState)(null);
|
|
1841
1969
|
const breakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
|
|
1842
|
-
return /* @__PURE__ */
|
|
1970
|
+
return /* @__PURE__ */ React59.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React59.createElement(
|
|
1971
|
+
StyleProvider,
|
|
1972
|
+
{
|
|
1973
|
+
meta: { breakpoint, state: activeStyleState },
|
|
1974
|
+
id: activeStyleDefId,
|
|
1975
|
+
setId: (id) => {
|
|
1976
|
+
setActiveStyleDefId(id);
|
|
1977
|
+
setActiveStyleState(null);
|
|
1978
|
+
},
|
|
1979
|
+
setMetaState: setActiveStyleState
|
|
1980
|
+
},
|
|
1981
|
+
/* @__PURE__ */ React59.createElement(CssClassSelector, null),
|
|
1982
|
+
/* @__PURE__ */ React59.createElement(import_ui49.Divider, null),
|
|
1983
|
+
/* @__PURE__ */ React59.createElement(SectionsList, null, /* @__PURE__ */ React59.createElement(Section, { title: (0, import_i18n38.__)("Layout", "elementor") }, /* @__PURE__ */ React59.createElement(LayoutSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: (0, import_i18n38.__)("Spacing", "elementor") }, /* @__PURE__ */ React59.createElement(SpacingSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: (0, import_i18n38.__)("Size", "elementor") }, /* @__PURE__ */ React59.createElement(SizeSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: (0, import_i18n38.__)("Position", "elementor") }, /* @__PURE__ */ React59.createElement(PositionSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: (0, import_i18n38.__)("Typography", "elementor") }, /* @__PURE__ */ React59.createElement(TypographySection, null)), /* @__PURE__ */ React59.createElement(Section, { title: (0, import_i18n38.__)("Background", "elementor") }, /* @__PURE__ */ React59.createElement(BackgroundSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: (0, import_i18n38.__)("Border", "elementor") }, /* @__PURE__ */ React59.createElement(BorderSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: (0, import_i18n38.__)("Effects", "elementor") }, /* @__PURE__ */ React59.createElement(EffectsSection, null)))
|
|
1984
|
+
));
|
|
1843
1985
|
};
|
|
1844
1986
|
function useActiveStyleDefId(currentClassesProp) {
|
|
1845
|
-
const [activeStyledDefId, setActiveStyledDefId] = (0,
|
|
1987
|
+
const [activeStyledDefId, setActiveStyledDefId] = (0, import_react13.useState)(null);
|
|
1846
1988
|
const fallback = useFirstElementStyleDef(currentClassesProp);
|
|
1847
1989
|
return [activeStyledDefId || fallback?.id || null, setActiveStyledDefId];
|
|
1848
1990
|
}
|
|
@@ -1866,11 +2008,11 @@ function useCurrentClassesProp() {
|
|
|
1866
2008
|
// src/components/editing-panel-tabs.tsx
|
|
1867
2009
|
var EditingPanelTabs = () => {
|
|
1868
2010
|
const { element } = useElement();
|
|
1869
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
2011
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui50.useTabs)("settings");
|
|
1870
2012
|
return (
|
|
1871
2013
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
1872
2014
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
1873
|
-
/* @__PURE__ */
|
|
2015
|
+
/* @__PURE__ */ React60.createElement(import_react14.Fragment, { key: element.id }, /* @__PURE__ */ React60.createElement(import_ui50.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React60.createElement(import_ui50.Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React60.createElement(import_ui50.Tab, { label: (0, import_i18n39.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React60.createElement(import_ui50.Tab, { label: (0, import_i18n39.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React60.createElement(import_ui50.Divider, null), /* @__PURE__ */ React60.createElement(import_ui50.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React60.createElement(SettingsTab, null)), /* @__PURE__ */ React60.createElement(import_ui50.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React60.createElement(StyleTab, null))))
|
|
1874
2016
|
);
|
|
1875
2017
|
};
|
|
1876
2018
|
|
|
@@ -1883,8 +2025,8 @@ var EditingPanel = () => {
|
|
|
1883
2025
|
if (!element || !elementType) {
|
|
1884
2026
|
return null;
|
|
1885
2027
|
}
|
|
1886
|
-
const panelTitle = (0,
|
|
1887
|
-
return /* @__PURE__ */
|
|
2028
|
+
const panelTitle = (0, import_i18n40.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
2029
|
+
return /* @__PURE__ */ React61.createElement(import_ui51.ErrorBoundary, { fallback: /* @__PURE__ */ React61.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React61.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React61.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React61.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React61.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React61.createElement(import_editor_controls41.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React61.createElement(import_editor_controls41.ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React61.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React61.createElement(EditingPanelTabs, null)))))));
|
|
1888
2030
|
};
|
|
1889
2031
|
|
|
1890
2032
|
// src/panel.ts
|
|
@@ -1907,7 +2049,7 @@ var isAtomicWidgetSelected = () => {
|
|
|
1907
2049
|
// src/hooks/use-close-editor-panel.ts
|
|
1908
2050
|
var useCloseEditorPanel = () => {
|
|
1909
2051
|
const { close } = usePanelActions();
|
|
1910
|
-
return (0,
|
|
2052
|
+
return (0, import_react15.useEffect)(() => {
|
|
1911
2053
|
return (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.commandStartEvent)("document/elements/delete"), (e) => {
|
|
1912
2054
|
const selectedElement = (0, import_editor_elements8.getSelectedElements)()[0];
|
|
1913
2055
|
const { container: deletedContainer } = e?.args;
|
|
@@ -1920,11 +2062,11 @@ var useCloseEditorPanel = () => {
|
|
|
1920
2062
|
};
|
|
1921
2063
|
|
|
1922
2064
|
// src/hooks/use-open-editor-panel.ts
|
|
1923
|
-
var
|
|
2065
|
+
var import_react16 = require("react");
|
|
1924
2066
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
1925
2067
|
var useOpenEditorPanel = () => {
|
|
1926
2068
|
const { open } = usePanelActions();
|
|
1927
|
-
(0,
|
|
2069
|
+
(0, import_react16.useEffect)(() => {
|
|
1928
2070
|
return (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.commandStartEvent)("panel/editor/open"), () => {
|
|
1929
2071
|
if (isAtomicWidgetSelected()) {
|
|
1930
2072
|
open();
|
|
@@ -1940,13 +2082,38 @@ var EditingPanelHooks = () => {
|
|
|
1940
2082
|
return null;
|
|
1941
2083
|
};
|
|
1942
2084
|
|
|
2085
|
+
// src/css-classes.ts
|
|
2086
|
+
var STATES = ["hover", "focus", "active"];
|
|
2087
|
+
function initCssClasses() {
|
|
2088
|
+
registerStateItems();
|
|
2089
|
+
registerGlobalClassItems();
|
|
2090
|
+
}
|
|
2091
|
+
function registerStateItems() {
|
|
2092
|
+
registerStateMenuItem({
|
|
2093
|
+
id: "normal",
|
|
2094
|
+
props: {
|
|
2095
|
+
state: null
|
|
2096
|
+
}
|
|
2097
|
+
});
|
|
2098
|
+
STATES.forEach((state) => {
|
|
2099
|
+
registerStateMenuItem({
|
|
2100
|
+
id: state,
|
|
2101
|
+
props: {
|
|
2102
|
+
state
|
|
2103
|
+
}
|
|
2104
|
+
});
|
|
2105
|
+
});
|
|
2106
|
+
}
|
|
2107
|
+
function registerGlobalClassItems() {
|
|
2108
|
+
}
|
|
2109
|
+
|
|
1943
2110
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
1944
|
-
var
|
|
1945
|
-
var
|
|
2111
|
+
var React64 = __toESM(require("react"));
|
|
2112
|
+
var import_react20 = require("react");
|
|
1946
2113
|
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
1947
|
-
var
|
|
1948
|
-
var
|
|
1949
|
-
var
|
|
2114
|
+
var import_icons22 = require("@elementor/icons");
|
|
2115
|
+
var import_ui53 = require("@elementor/ui");
|
|
2116
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
1950
2117
|
|
|
1951
2118
|
// src/hooks/use-persist-dynamic-value.ts
|
|
1952
2119
|
var usePersistDynamicValue = (propKey) => {
|
|
@@ -1956,14 +2123,14 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
1956
2123
|
};
|
|
1957
2124
|
|
|
1958
2125
|
// src/dynamics/dynamic-control.tsx
|
|
1959
|
-
var
|
|
2126
|
+
var React62 = __toESM(require("react"));
|
|
1960
2127
|
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
1961
2128
|
|
|
1962
2129
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
1963
|
-
var
|
|
2130
|
+
var import_react18 = require("react");
|
|
1964
2131
|
|
|
1965
2132
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
1966
|
-
var
|
|
2133
|
+
var import_react17 = require("react");
|
|
1967
2134
|
|
|
1968
2135
|
// src/dynamics/sync/get-elementor-config.ts
|
|
1969
2136
|
var getElementorConfig2 = () => {
|
|
@@ -2015,7 +2182,7 @@ var usePropDynamicTags = (propName) => {
|
|
|
2015
2182
|
const propDynamicType = getDynamicPropType(propType);
|
|
2016
2183
|
categories = propDynamicType?.settings.categories || [];
|
|
2017
2184
|
}
|
|
2018
|
-
return (0,
|
|
2185
|
+
return (0, import_react17.useMemo)(() => getDynamicTagsByCategories(categories), [categories.join()]);
|
|
2019
2186
|
};
|
|
2020
2187
|
var getDynamicTagsByCategories = (categories) => {
|
|
2021
2188
|
const dynamicTags = getAtomicDynamicTags();
|
|
@@ -2031,7 +2198,7 @@ var getDynamicTagsByCategories = (categories) => {
|
|
|
2031
2198
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
2032
2199
|
var useDynamicTag = (propName, tagName) => {
|
|
2033
2200
|
const dynamicTags = usePropDynamicTags(propName);
|
|
2034
|
-
return (0,
|
|
2201
|
+
return (0, import_react18.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
|
|
2035
2202
|
};
|
|
2036
2203
|
|
|
2037
2204
|
// src/dynamics/dynamic-control.tsx
|
|
@@ -2053,19 +2220,19 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
2053
2220
|
}
|
|
2054
2221
|
});
|
|
2055
2222
|
};
|
|
2056
|
-
return /* @__PURE__ */
|
|
2223
|
+
return /* @__PURE__ */ React62.createElement(import_editor_controls42.BoundPropProvider, { setValue: setDynamicValue, value: dynamicValue, bind }, children);
|
|
2057
2224
|
};
|
|
2058
2225
|
|
|
2059
2226
|
// src/dynamics/components/dynamic-selection.tsx
|
|
2060
|
-
var
|
|
2061
|
-
var
|
|
2227
|
+
var React63 = __toESM(require("react"));
|
|
2228
|
+
var import_react19 = require("react");
|
|
2062
2229
|
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
2063
|
-
var
|
|
2064
|
-
var
|
|
2065
|
-
var
|
|
2230
|
+
var import_icons21 = require("@elementor/icons");
|
|
2231
|
+
var import_ui52 = require("@elementor/ui");
|
|
2232
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
2066
2233
|
var SIZE3 = "tiny";
|
|
2067
2234
|
var DynamicSelection = ({ onSelect }) => {
|
|
2068
|
-
const [searchValue, setSearchValue] = (0,
|
|
2235
|
+
const [searchValue, setSearchValue] = (0, import_react19.useState)("");
|
|
2069
2236
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
2070
2237
|
const { value: anyValue } = (0, import_editor_controls43.useBoundProp)();
|
|
2071
2238
|
const { bind, value: dynamicValue, setValue } = (0, import_editor_controls43.useBoundProp)(dynamicPropTypeUtil);
|
|
@@ -2082,22 +2249,22 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2082
2249
|
setValue({ name: value, settings: {} });
|
|
2083
2250
|
onSelect?.();
|
|
2084
2251
|
};
|
|
2085
|
-
return /* @__PURE__ */
|
|
2086
|
-
|
|
2252
|
+
return /* @__PURE__ */ React63.createElement(import_ui52.Stack, null, /* @__PURE__ */ React63.createElement(import_ui52.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React63.createElement(
|
|
2253
|
+
import_ui52.TextField,
|
|
2087
2254
|
{
|
|
2088
2255
|
fullWidth: true,
|
|
2089
2256
|
size: SIZE3,
|
|
2090
2257
|
value: searchValue,
|
|
2091
2258
|
onChange: handleSearch,
|
|
2092
|
-
placeholder: (0,
|
|
2259
|
+
placeholder: (0, import_i18n41.__)("Search dynamic tag", "elementor"),
|
|
2093
2260
|
InputProps: {
|
|
2094
|
-
startAdornment: /* @__PURE__ */
|
|
2261
|
+
startAdornment: /* @__PURE__ */ React63.createElement(import_ui52.InputAdornment, { position: "start" }, /* @__PURE__ */ React63.createElement(import_icons21.SearchIcon, { fontSize: SIZE3 }))
|
|
2095
2262
|
}
|
|
2096
2263
|
}
|
|
2097
|
-
)), /* @__PURE__ */
|
|
2264
|
+
)), /* @__PURE__ */ React63.createElement(import_ui52.Divider, null), /* @__PURE__ */ React63.createElement(import_ui52.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options10.length > 0 ? /* @__PURE__ */ React63.createElement(import_ui52.MenuList, { role: "listbox", tabIndex: 0 }, options10.map(([category, items3], index) => /* @__PURE__ */ React63.createElement(import_react19.Fragment, { key: index }, /* @__PURE__ */ React63.createElement(import_ui52.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items3.map(({ value, label: tagLabel }) => {
|
|
2098
2265
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
2099
|
-
return /* @__PURE__ */
|
|
2100
|
-
|
|
2266
|
+
return /* @__PURE__ */ React63.createElement(
|
|
2267
|
+
import_ui52.MenuItem,
|
|
2101
2268
|
{
|
|
2102
2269
|
key: value,
|
|
2103
2270
|
selected: isSelected,
|
|
@@ -2107,16 +2274,16 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2107
2274
|
},
|
|
2108
2275
|
tagLabel
|
|
2109
2276
|
);
|
|
2110
|
-
})))) : /* @__PURE__ */
|
|
2111
|
-
|
|
2277
|
+
})))) : /* @__PURE__ */ React63.createElement(import_ui52.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React63.createElement(import_icons21.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React63.createElement(import_ui52.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n41.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React63.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React63.createElement(import_ui52.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React63.createElement(
|
|
2278
|
+
import_ui52.Link,
|
|
2112
2279
|
{
|
|
2113
2280
|
color: "secondary",
|
|
2114
2281
|
variant: "caption",
|
|
2115
2282
|
component: "button",
|
|
2116
2283
|
onClick: () => setSearchValue("")
|
|
2117
2284
|
},
|
|
2118
|
-
(0,
|
|
2119
|
-
), "\xA0", (0,
|
|
2285
|
+
(0, import_i18n41.__)("Clear the filters", "elementor")
|
|
2286
|
+
), "\xA0", (0, import_i18n41.__)("and try again.", "elementor")))));
|
|
2120
2287
|
};
|
|
2121
2288
|
var useFilteredOptions = (bind, searchValue) => {
|
|
2122
2289
|
const dynamicTags = usePropDynamicTags(bind);
|
|
@@ -2141,8 +2308,8 @@ var DynamicSelectionControl = () => {
|
|
|
2141
2308
|
const { bind, value } = (0, import_editor_controls44.useBoundProp)(dynamicPropTypeUtil);
|
|
2142
2309
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
2143
2310
|
const { name: tagName = "" } = value;
|
|
2144
|
-
const selectionPopoverId = (0,
|
|
2145
|
-
const selectionPopoverState = (0,
|
|
2311
|
+
const selectionPopoverId = (0, import_react20.useId)();
|
|
2312
|
+
const selectionPopoverState = (0, import_ui53.usePopupState)({ variant: "popover", popupId: selectionPopoverId });
|
|
2146
2313
|
const dynamicTag = useDynamicTag(bind, tagName);
|
|
2147
2314
|
const removeDynamicTag = () => {
|
|
2148
2315
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -2150,70 +2317,70 @@ var DynamicSelectionControl = () => {
|
|
|
2150
2317
|
if (!dynamicTag) {
|
|
2151
2318
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
2152
2319
|
}
|
|
2153
|
-
return /* @__PURE__ */
|
|
2154
|
-
|
|
2320
|
+
return /* @__PURE__ */ React64.createElement(import_ui53.Box, null, /* @__PURE__ */ React64.createElement(
|
|
2321
|
+
import_ui53.UnstableTag,
|
|
2155
2322
|
{
|
|
2156
2323
|
fullWidth: true,
|
|
2157
2324
|
showActionsOnHover: true,
|
|
2158
2325
|
label: dynamicTag.label,
|
|
2159
|
-
startIcon: /* @__PURE__ */
|
|
2160
|
-
...(0,
|
|
2161
|
-
actions: /* @__PURE__ */
|
|
2162
|
-
|
|
2326
|
+
startIcon: /* @__PURE__ */ React64.createElement(import_icons22.DatabaseIcon, { fontSize: SIZE4 }),
|
|
2327
|
+
...(0, import_ui53.bindTrigger)(selectionPopoverState),
|
|
2328
|
+
actions: /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React64.createElement(
|
|
2329
|
+
import_ui53.IconButton,
|
|
2163
2330
|
{
|
|
2164
2331
|
size: SIZE4,
|
|
2165
2332
|
onClick: removeDynamicTag,
|
|
2166
|
-
"aria-label": (0,
|
|
2333
|
+
"aria-label": (0, import_i18n42.__)("Remove dynamic value", "elementor")
|
|
2167
2334
|
},
|
|
2168
|
-
/* @__PURE__ */
|
|
2335
|
+
/* @__PURE__ */ React64.createElement(import_icons22.XIcon, { fontSize: SIZE4 })
|
|
2169
2336
|
))
|
|
2170
2337
|
}
|
|
2171
|
-
), /* @__PURE__ */
|
|
2172
|
-
|
|
2338
|
+
), /* @__PURE__ */ React64.createElement(
|
|
2339
|
+
import_ui53.Popover,
|
|
2173
2340
|
{
|
|
2174
2341
|
disablePortal: true,
|
|
2175
2342
|
disableScrollLock: true,
|
|
2176
2343
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
2177
|
-
...(0,
|
|
2344
|
+
...(0, import_ui53.bindPopover)(selectionPopoverState)
|
|
2178
2345
|
},
|
|
2179
|
-
/* @__PURE__ */
|
|
2346
|
+
/* @__PURE__ */ React64.createElement(import_ui53.Stack, null, /* @__PURE__ */ React64.createElement(import_ui53.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React64.createElement(import_icons22.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React64.createElement(import_ui53.Typography, { variant: "subtitle2" }, (0, import_i18n42.__)("Dynamic Tags", "elementor")), /* @__PURE__ */ React64.createElement(import_ui53.IconButton, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React64.createElement(import_icons22.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React64.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
2180
2347
|
));
|
|
2181
2348
|
};
|
|
2182
2349
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
2183
|
-
const popupId = (0,
|
|
2184
|
-
const settingsPopupState = (0,
|
|
2350
|
+
const popupId = (0, import_react20.useId)();
|
|
2351
|
+
const settingsPopupState = (0, import_ui53.usePopupState)({ variant: "popover", popupId });
|
|
2185
2352
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
2186
2353
|
if (!hasDynamicSettings) {
|
|
2187
2354
|
return null;
|
|
2188
2355
|
}
|
|
2189
|
-
return /* @__PURE__ */
|
|
2190
|
-
|
|
2356
|
+
return /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement(
|
|
2357
|
+
import_ui53.IconButton,
|
|
2191
2358
|
{
|
|
2192
2359
|
size: SIZE4,
|
|
2193
|
-
...(0,
|
|
2194
|
-
"aria-label": (0,
|
|
2360
|
+
...(0, import_ui53.bindTrigger)(settingsPopupState),
|
|
2361
|
+
"aria-label": (0, import_i18n42.__)("Settings", "elementor")
|
|
2195
2362
|
},
|
|
2196
|
-
/* @__PURE__ */
|
|
2197
|
-
), /* @__PURE__ */
|
|
2198
|
-
|
|
2363
|
+
/* @__PURE__ */ React64.createElement(import_icons22.SettingsIcon, { fontSize: SIZE4 })
|
|
2364
|
+
), /* @__PURE__ */ React64.createElement(
|
|
2365
|
+
import_ui53.Popover,
|
|
2199
2366
|
{
|
|
2200
2367
|
disableScrollLock: true,
|
|
2201
2368
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
2202
|
-
...(0,
|
|
2369
|
+
...(0, import_ui53.bindPopover)(settingsPopupState)
|
|
2203
2370
|
},
|
|
2204
|
-
/* @__PURE__ */
|
|
2371
|
+
/* @__PURE__ */ React64.createElement(import_ui53.Paper, { component: import_ui53.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React64.createElement(import_ui53.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React64.createElement(import_icons22.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React64.createElement(import_ui53.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React64.createElement(import_ui53.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React64.createElement(import_icons22.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React64.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
2205
2372
|
));
|
|
2206
2373
|
};
|
|
2207
2374
|
var DynamicSettings = ({ controls }) => {
|
|
2208
2375
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
2209
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
2376
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui53.useTabs)(0);
|
|
2210
2377
|
if (!tabs.length) {
|
|
2211
2378
|
return null;
|
|
2212
2379
|
}
|
|
2213
|
-
return /* @__PURE__ */
|
|
2214
|
-
return /* @__PURE__ */
|
|
2380
|
+
return /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement(import_ui53.Tabs, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React64.createElement(import_ui53.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React64.createElement(import_ui53.Divider, null), tabs.map(({ value }, index) => {
|
|
2381
|
+
return /* @__PURE__ */ React64.createElement(import_ui53.TabPanel, { key: index, sx: { flexGrow: 1 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React64.createElement(import_ui53.Stack, { gap: 1, px: 2 }, value.items.map((item) => {
|
|
2215
2382
|
if (item.type === "control") {
|
|
2216
|
-
return /* @__PURE__ */
|
|
2383
|
+
return /* @__PURE__ */ React64.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
2217
2384
|
}
|
|
2218
2385
|
return null;
|
|
2219
2386
|
})));
|
|
@@ -2223,14 +2390,14 @@ var Control3 = ({ control }) => {
|
|
|
2223
2390
|
if (!getControlByType(control.type)) {
|
|
2224
2391
|
return null;
|
|
2225
2392
|
}
|
|
2226
|
-
return /* @__PURE__ */
|
|
2393
|
+
return /* @__PURE__ */ React64.createElement(DynamicControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React64.createElement(import_editor_controls44.ControlLabel, null, control.label) : null, /* @__PURE__ */ React64.createElement(Control, { type: control.type, props: control.props }));
|
|
2227
2394
|
};
|
|
2228
2395
|
|
|
2229
2396
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
2230
|
-
var
|
|
2397
|
+
var React65 = __toESM(require("react"));
|
|
2231
2398
|
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
2232
|
-
var
|
|
2233
|
-
var
|
|
2399
|
+
var import_icons23 = require("@elementor/icons");
|
|
2400
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
2234
2401
|
var usePropDynamicAction = () => {
|
|
2235
2402
|
const { bind } = (0, import_editor_controls45.useBoundProp)();
|
|
2236
2403
|
const { elementType } = useElement();
|
|
@@ -2238,9 +2405,9 @@ var usePropDynamicAction = () => {
|
|
|
2238
2405
|
const visible = !!propType && supportsDynamic(propType);
|
|
2239
2406
|
return {
|
|
2240
2407
|
visible,
|
|
2241
|
-
icon:
|
|
2242
|
-
title: (0,
|
|
2243
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
2408
|
+
icon: import_icons23.DatabaseIcon,
|
|
2409
|
+
title: (0, import_i18n43.__)("Dynamic Tags", "elementor"),
|
|
2410
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React65.createElement(DynamicSelection, { onSelect: closePopover })
|
|
2244
2411
|
};
|
|
2245
2412
|
};
|
|
2246
2413
|
|
|
@@ -2266,6 +2433,7 @@ function init2() {
|
|
|
2266
2433
|
component: EditingPanelHooks
|
|
2267
2434
|
});
|
|
2268
2435
|
init();
|
|
2436
|
+
initCssClasses();
|
|
2269
2437
|
}
|
|
2270
2438
|
var blockV1Panel = () => {
|
|
2271
2439
|
(0, import_editor_v1_adapters4.__privateBlockDataCommand)({
|
|
@@ -2278,6 +2446,8 @@ var blockV1Panel = () => {
|
|
|
2278
2446
|
init2();
|
|
2279
2447
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2280
2448
|
0 && (module.exports = {
|
|
2449
|
+
registerGlobalClassMenuItem,
|
|
2450
|
+
registerStateMenuItem,
|
|
2281
2451
|
replaceControl,
|
|
2282
2452
|
useBoundProp
|
|
2283
2453
|
});
|