@elementor/editor-editing-panel 1.5.1 → 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 +16 -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.mjs
CHANGED
|
@@ -5,6 +5,124 @@ import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
|
|
|
5
5
|
import { createControlReplacement } from "@elementor/editor-controls";
|
|
6
6
|
var { replaceControl, getControlReplacement } = createControlReplacement();
|
|
7
7
|
|
|
8
|
+
// src/components/css-class-menu.tsx
|
|
9
|
+
import * as React3 from "react";
|
|
10
|
+
import { CheckIcon } from "@elementor/icons";
|
|
11
|
+
import { createMenu } from "@elementor/menus";
|
|
12
|
+
import {
|
|
13
|
+
bindMenu,
|
|
14
|
+
Box,
|
|
15
|
+
ListItemIcon,
|
|
16
|
+
ListItemText,
|
|
17
|
+
ListSubheader,
|
|
18
|
+
Menu,
|
|
19
|
+
MenuItem,
|
|
20
|
+
styled
|
|
21
|
+
} from "@elementor/ui";
|
|
22
|
+
import { __ } from "@wordpress/i18n";
|
|
23
|
+
|
|
24
|
+
// src/contexts/css-class-item-context.tsx
|
|
25
|
+
import * as React from "react";
|
|
26
|
+
import { createContext } from "react";
|
|
27
|
+
var ClassItemContext = createContext({
|
|
28
|
+
styleId: "",
|
|
29
|
+
isGlobal: false,
|
|
30
|
+
isActive: false
|
|
31
|
+
});
|
|
32
|
+
function CssClassItemProvider({ styleId, isGlobal, isActive, children }) {
|
|
33
|
+
return /* @__PURE__ */ React.createElement(ClassItemContext.Provider, { value: { styleId, isGlobal, isActive } }, children);
|
|
34
|
+
}
|
|
35
|
+
function useCssClassItem() {
|
|
36
|
+
const context = React.useContext(ClassItemContext);
|
|
37
|
+
if (!context) {
|
|
38
|
+
throw new Error("useCssClassItem must be used within a CssClassItemProvider");
|
|
39
|
+
}
|
|
40
|
+
return context;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// src/contexts/style-context.tsx
|
|
44
|
+
import * as React2 from "react";
|
|
45
|
+
import { createContext as createContext2, useContext as useContext2 } from "react";
|
|
46
|
+
var Context = createContext2(null);
|
|
47
|
+
function StyleProvider({ children, id, setId, meta, setMetaState }) {
|
|
48
|
+
return /* @__PURE__ */ React2.createElement(Context.Provider, { value: { id, setId, meta, setMetaState } }, children);
|
|
49
|
+
}
|
|
50
|
+
function useStyle() {
|
|
51
|
+
const context = useContext2(Context);
|
|
52
|
+
if (!context) {
|
|
53
|
+
throw new Error("useStyle must be used within a StyleProvider");
|
|
54
|
+
}
|
|
55
|
+
return context;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// src/components/css-class-menu.tsx
|
|
59
|
+
var { useMenuItems: useStateMenuItems, registerStateMenuItem } = createMenu({
|
|
60
|
+
components: {
|
|
61
|
+
StateMenuItem
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
var { useMenuItems: useGlobalClassMenuItems, registerGlobalClassMenuItem } = createMenu({
|
|
65
|
+
components: {
|
|
66
|
+
GlobalClassMenuItem
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
function CssClassMenu({
|
|
70
|
+
popupState,
|
|
71
|
+
containerRef
|
|
72
|
+
}) {
|
|
73
|
+
const { isGlobal } = useCssClassItem();
|
|
74
|
+
const { default: globalClassMenuItems } = useGlobalClassMenuItems();
|
|
75
|
+
const { default: stateMenuItems } = useStateMenuItems();
|
|
76
|
+
return /* @__PURE__ */ React3.createElement(
|
|
77
|
+
Menu,
|
|
78
|
+
{
|
|
79
|
+
MenuListProps: { dense: true },
|
|
80
|
+
...bindMenu(popupState),
|
|
81
|
+
anchorOrigin: {
|
|
82
|
+
vertical: "top",
|
|
83
|
+
horizontal: "right"
|
|
84
|
+
},
|
|
85
|
+
anchorEl: containerRef.current
|
|
86
|
+
},
|
|
87
|
+
isGlobal && /* @__PURE__ */ React3.createElement(GlobalClassMenuSection, null, globalClassMenuItems.map(({ id, MenuItem: MenuItemComponent }) => /* @__PURE__ */ React3.createElement(MenuItemComponent, { key: id }))),
|
|
88
|
+
/* @__PURE__ */ React3.createElement(ListSubheader, null, __("Add a pseudo selector", "elementor")),
|
|
89
|
+
stateMenuItems.map(({ id, MenuItem: MenuItemComponent }) => /* @__PURE__ */ React3.createElement(MenuItemComponent, { key: id }))
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
function StateMenuItem({ state, disabled }) {
|
|
93
|
+
const { isActive, styleId } = useCssClassItem();
|
|
94
|
+
const { setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
|
|
95
|
+
const { state: activeState } = meta;
|
|
96
|
+
const isSelected = state === activeState && isActive;
|
|
97
|
+
return /* @__PURE__ */ React3.createElement(
|
|
98
|
+
StyledMenuItem,
|
|
99
|
+
{
|
|
100
|
+
selected: state === activeState && isActive,
|
|
101
|
+
disabled,
|
|
102
|
+
onClick: () => {
|
|
103
|
+
if (!isActive) {
|
|
104
|
+
setActiveId(styleId);
|
|
105
|
+
}
|
|
106
|
+
setActiveMetaState(state);
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
isSelected && /* @__PURE__ */ React3.createElement(ListItemIcon, null, /* @__PURE__ */ React3.createElement(CheckIcon, null)),
|
|
110
|
+
/* @__PURE__ */ React3.createElement(ListItemText, { primary: state ? `:${state}` : "Normal" })
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
function GlobalClassMenuItem({ text, onClick }) {
|
|
114
|
+
return /* @__PURE__ */ React3.createElement(StyledMenuItem, { onClick }, /* @__PURE__ */ React3.createElement(ListItemText, { primary: text }));
|
|
115
|
+
}
|
|
116
|
+
var GlobalClassMenuSection = styled(Box)(({ theme }) => ({
|
|
117
|
+
borderBottom: `1px solid ${theme?.palette.divider}`
|
|
118
|
+
}));
|
|
119
|
+
var StyledMenuItem = styled(MenuItem)({
|
|
120
|
+
"&:hover": {
|
|
121
|
+
color: "text.primary"
|
|
122
|
+
// Overriding global CSS from the editor.
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
|
|
8
126
|
// src/init.ts
|
|
9
127
|
import { injectIntoLogic } from "@elementor/editor";
|
|
10
128
|
import { __registerPanel as registerPanel } from "@elementor/editor-panels";
|
|
@@ -19,22 +137,22 @@ import { __privateListenTo as listenTo, commandStartEvent } from "@elementor/edi
|
|
|
19
137
|
import { __createPanel as createPanel } from "@elementor/editor-panels";
|
|
20
138
|
|
|
21
139
|
// src/components/editing-panel.tsx
|
|
22
|
-
import * as
|
|
140
|
+
import * as React61 from "react";
|
|
23
141
|
import { ControlActionsProvider, ControlReplacementProvider } from "@elementor/editor-controls";
|
|
24
142
|
import { useSelectedElement } from "@elementor/editor-elements";
|
|
25
143
|
import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
|
|
26
144
|
import { ErrorBoundary } from "@elementor/ui";
|
|
27
|
-
import { __ as
|
|
145
|
+
import { __ as __40 } from "@wordpress/i18n";
|
|
28
146
|
|
|
29
147
|
// src/contexts/element-context.tsx
|
|
30
|
-
import * as
|
|
31
|
-
import { createContext, useContext } from "react";
|
|
32
|
-
var
|
|
148
|
+
import * as React4 from "react";
|
|
149
|
+
import { createContext as createContext3, useContext as useContext3 } from "react";
|
|
150
|
+
var Context2 = createContext3(null);
|
|
33
151
|
function ElementProvider({ children, element, elementType }) {
|
|
34
|
-
return /* @__PURE__ */
|
|
152
|
+
return /* @__PURE__ */ React4.createElement(Context2.Provider, { value: { element, elementType } }, children);
|
|
35
153
|
}
|
|
36
154
|
function useElement() {
|
|
37
|
-
const context =
|
|
155
|
+
const context = useContext3(Context2);
|
|
38
156
|
if (!context) {
|
|
39
157
|
throw new Error("useElement must be used within a ElementProvider");
|
|
40
158
|
}
|
|
@@ -42,10 +160,10 @@ function useElement() {
|
|
|
42
160
|
}
|
|
43
161
|
|
|
44
162
|
// src/controls-actions.ts
|
|
45
|
-
import { createMenu } from "@elementor/menus";
|
|
163
|
+
import { createMenu as createMenu2 } from "@elementor/menus";
|
|
46
164
|
|
|
47
165
|
// src/popover-action.tsx
|
|
48
|
-
import * as
|
|
166
|
+
import * as React5 from "react";
|
|
49
167
|
import { useId } from "react";
|
|
50
168
|
import { XIcon } from "@elementor/icons";
|
|
51
169
|
import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from "@elementor/ui";
|
|
@@ -64,7 +182,7 @@ function PopoverAction({
|
|
|
64
182
|
if (!visible) {
|
|
65
183
|
return null;
|
|
66
184
|
}
|
|
67
|
-
return /* @__PURE__ */
|
|
185
|
+
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Tooltip, { placement: "top", title }, /* @__PURE__ */ React5.createElement(IconButton, { "aria-label": title, key: id, size: SIZE, ...bindToggle(popupState) }, /* @__PURE__ */ React5.createElement(Icon, { fontSize: SIZE }))), /* @__PURE__ */ React5.createElement(
|
|
68
186
|
Popover,
|
|
69
187
|
{
|
|
70
188
|
disablePortal: true,
|
|
@@ -75,37 +193,37 @@ function PopoverAction({
|
|
|
75
193
|
},
|
|
76
194
|
...bindPopover(popupState)
|
|
77
195
|
},
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
-
/* @__PURE__ */
|
|
196
|
+
/* @__PURE__ */ React5.createElement(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(Typography, { variant: "subtitle2" }, title), /* @__PURE__ */ React5.createElement(IconButton, { sx: { ml: "auto" }, size: SIZE, onClick: popupState.close }, /* @__PURE__ */ React5.createElement(XIcon, { fontSize: SIZE }))),
|
|
197
|
+
/* @__PURE__ */ React5.createElement(PopoverContent, { closePopover: popupState.close })
|
|
80
198
|
));
|
|
81
199
|
}
|
|
82
200
|
|
|
83
201
|
// src/controls-actions.ts
|
|
84
|
-
var controlActionsMenu =
|
|
202
|
+
var controlActionsMenu = createMenu2({
|
|
85
203
|
components: {
|
|
86
204
|
PopoverAction
|
|
87
205
|
}
|
|
88
206
|
});
|
|
89
207
|
|
|
90
208
|
// src/components/editing-panel-error-fallback.tsx
|
|
91
|
-
import * as
|
|
92
|
-
import { Alert, Box } from "@elementor/ui";
|
|
209
|
+
import * as React6 from "react";
|
|
210
|
+
import { Alert, Box as Box2 } from "@elementor/ui";
|
|
93
211
|
function EditorPanelErrorFallback() {
|
|
94
|
-
return /* @__PURE__ */
|
|
212
|
+
return /* @__PURE__ */ React6.createElement(Box2, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React6.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React6.createElement("strong", null, "Something went wrong")));
|
|
95
213
|
}
|
|
96
214
|
|
|
97
215
|
// src/components/editing-panel-tabs.tsx
|
|
98
|
-
import * as
|
|
216
|
+
import * as React60 from "react";
|
|
99
217
|
import { Fragment as Fragment7 } from "react";
|
|
100
218
|
import { Divider as Divider8, Stack as Stack19, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
|
|
101
|
-
import { __ as
|
|
219
|
+
import { __ as __39 } from "@wordpress/i18n";
|
|
102
220
|
|
|
103
221
|
// src/components/settings-tab.tsx
|
|
104
|
-
import * as
|
|
222
|
+
import * as React12 from "react";
|
|
105
223
|
import { ControlLabel } from "@elementor/editor-controls";
|
|
106
224
|
|
|
107
225
|
// src/controls-registry/control.tsx
|
|
108
|
-
import * as
|
|
226
|
+
import * as React7 from "react";
|
|
109
227
|
import { createError } from "@elementor/utils";
|
|
110
228
|
|
|
111
229
|
// src/controls-registry/controls-registry.tsx
|
|
@@ -142,20 +260,20 @@ var Control = ({ props, type }) => {
|
|
|
142
260
|
context: { type }
|
|
143
261
|
});
|
|
144
262
|
}
|
|
145
|
-
return /* @__PURE__ */
|
|
263
|
+
return /* @__PURE__ */ React7.createElement(ControlByType, { ...props });
|
|
146
264
|
};
|
|
147
265
|
|
|
148
266
|
// src/controls-registry/control-type-container.tsx
|
|
149
|
-
import * as
|
|
150
|
-
import { Box as
|
|
267
|
+
import * as React8 from "react";
|
|
268
|
+
import { Box as Box3, styled as styled2 } from "@elementor/ui";
|
|
151
269
|
var ControlTypeContainer = ({
|
|
152
270
|
controlType,
|
|
153
271
|
children
|
|
154
272
|
}) => {
|
|
155
273
|
const layout = getLayoutByType(controlType);
|
|
156
|
-
return /* @__PURE__ */
|
|
274
|
+
return /* @__PURE__ */ React8.createElement(StyledContainer, { layout }, children);
|
|
157
275
|
};
|
|
158
|
-
var StyledContainer =
|
|
276
|
+
var StyledContainer = styled2(Box3, {
|
|
159
277
|
shouldForwardProp: (prop) => !["layout"].includes(prop)
|
|
160
278
|
})(({ layout, theme }) => ({
|
|
161
279
|
display: "grid",
|
|
@@ -171,7 +289,7 @@ var getGridLayout = (layout) => ({
|
|
|
171
289
|
});
|
|
172
290
|
|
|
173
291
|
// src/controls-registry/settings-field.tsx
|
|
174
|
-
import * as
|
|
292
|
+
import * as React9 from "react";
|
|
175
293
|
import { BoundPropProvider } from "@elementor/editor-controls";
|
|
176
294
|
import { updateSettings, useElementSetting } from "@elementor/editor-elements";
|
|
177
295
|
var SettingsField = ({ bind, children }) => {
|
|
@@ -187,18 +305,18 @@ var SettingsField = ({ bind, children }) => {
|
|
|
187
305
|
}
|
|
188
306
|
});
|
|
189
307
|
};
|
|
190
|
-
return /* @__PURE__ */
|
|
308
|
+
return /* @__PURE__ */ React9.createElement(BoundPropProvider, { setValue, value, bind }, children);
|
|
191
309
|
};
|
|
192
310
|
|
|
193
311
|
// src/components/section.tsx
|
|
194
|
-
import * as
|
|
312
|
+
import * as React10 from "react";
|
|
195
313
|
import { useId as useId2, useState } from "react";
|
|
196
|
-
import { Collapse, Divider, ListItemButton, ListItemText, Stack as Stack2 } from "@elementor/ui";
|
|
314
|
+
import { Collapse, Divider, ListItemButton, ListItemText as ListItemText2, Stack as Stack2 } from "@elementor/ui";
|
|
197
315
|
|
|
198
316
|
// src/components/collapse-icon.tsx
|
|
199
317
|
import { ChevronDownIcon } from "@elementor/icons";
|
|
200
|
-
import { styled as
|
|
201
|
-
var CollapseIcon =
|
|
318
|
+
import { styled as styled3 } from "@elementor/ui";
|
|
319
|
+
var CollapseIcon = styled3(ChevronDownIcon, {
|
|
202
320
|
shouldForwardProp: (prop) => prop !== "open"
|
|
203
321
|
})(({ theme, open }) => ({
|
|
204
322
|
transform: open ? "rotate(180deg)" : "rotate(0deg)",
|
|
@@ -213,36 +331,36 @@ function Section({ title, children, defaultExpanded = false }) {
|
|
|
213
331
|
const id = useId2();
|
|
214
332
|
const labelId = `label-${id}`;
|
|
215
333
|
const contentId = `content-${id}`;
|
|
216
|
-
return /* @__PURE__ */
|
|
334
|
+
return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
|
|
217
335
|
ListItemButton,
|
|
218
336
|
{
|
|
219
337
|
id: labelId,
|
|
220
338
|
"aria-controls": contentId,
|
|
221
339
|
onClick: () => setIsOpen((prev) => !prev)
|
|
222
340
|
},
|
|
223
|
-
/* @__PURE__ */
|
|
224
|
-
/* @__PURE__ */
|
|
225
|
-
), /* @__PURE__ */
|
|
341
|
+
/* @__PURE__ */ React10.createElement(ListItemText2, { secondary: title }),
|
|
342
|
+
/* @__PURE__ */ React10.createElement(CollapseIcon, { open: isOpen, color: "secondary" })
|
|
343
|
+
), /* @__PURE__ */ React10.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React10.createElement(Stack2, { gap: 2.5, p: 2 }, children)), /* @__PURE__ */ React10.createElement(Divider, null));
|
|
226
344
|
}
|
|
227
345
|
|
|
228
346
|
// src/components/sections-list.tsx
|
|
229
|
-
import * as
|
|
347
|
+
import * as React11 from "react";
|
|
230
348
|
import { List } from "@elementor/ui";
|
|
231
349
|
function SectionsList(props) {
|
|
232
|
-
return /* @__PURE__ */
|
|
350
|
+
return /* @__PURE__ */ React11.createElement(List, { disablePadding: true, component: "div", ...props });
|
|
233
351
|
}
|
|
234
352
|
|
|
235
353
|
// src/components/settings-tab.tsx
|
|
236
354
|
var SettingsTab = () => {
|
|
237
355
|
const { elementType } = useElement();
|
|
238
|
-
return /* @__PURE__ */
|
|
356
|
+
return /* @__PURE__ */ React12.createElement(SectionsList, null, elementType.controls.map(({ type, value }, index) => {
|
|
239
357
|
if (type === "control") {
|
|
240
|
-
return /* @__PURE__ */
|
|
358
|
+
return /* @__PURE__ */ React12.createElement(Control2, { key: value.bind, control: value });
|
|
241
359
|
}
|
|
242
360
|
if (type === "section") {
|
|
243
|
-
return /* @__PURE__ */
|
|
361
|
+
return /* @__PURE__ */ React12.createElement(Section, { title: value.label, key: type + "." + index, defaultExpanded: true }, value.items?.map((item) => {
|
|
244
362
|
if (item.type === "control") {
|
|
245
|
-
return /* @__PURE__ */
|
|
363
|
+
return /* @__PURE__ */ React12.createElement(Control2, { key: item.value.bind, control: item.value });
|
|
246
364
|
}
|
|
247
365
|
return null;
|
|
248
366
|
}));
|
|
@@ -254,59 +372,53 @@ var Control2 = ({ control }) => {
|
|
|
254
372
|
if (!getControlByType(control.type)) {
|
|
255
373
|
return null;
|
|
256
374
|
}
|
|
257
|
-
return /* @__PURE__ */
|
|
375
|
+
return /* @__PURE__ */ React12.createElement(SettingsField, { bind: control.bind }, /* @__PURE__ */ React12.createElement(ControlTypeContainer, { controlType: control.type }, control.label ? /* @__PURE__ */ React12.createElement(ControlLabel, null, control.label) : null, /* @__PURE__ */ React12.createElement(Control, { type: control.type, props: control.props })));
|
|
258
376
|
};
|
|
259
377
|
|
|
260
378
|
// src/components/style-tab.tsx
|
|
261
|
-
import * as
|
|
379
|
+
import * as React59 from "react";
|
|
262
380
|
import { useState as useState7 } from "react";
|
|
263
381
|
import { useElementSetting as useElementSetting3, useElementStyles } from "@elementor/editor-elements";
|
|
264
382
|
import { useActiveBreakpoint } from "@elementor/editor-responsive";
|
|
265
383
|
import { Divider as Divider7 } from "@elementor/ui";
|
|
266
|
-
import { __ as
|
|
384
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
267
385
|
|
|
268
386
|
// src/contexts/classes-prop-context.tsx
|
|
269
|
-
import * as
|
|
270
|
-
import { createContext as
|
|
271
|
-
var
|
|
387
|
+
import * as React13 from "react";
|
|
388
|
+
import { createContext as createContext4, useContext as useContext4 } from "react";
|
|
389
|
+
var Context3 = createContext4(null);
|
|
272
390
|
function ClassesPropProvider({ children, prop }) {
|
|
273
|
-
return /* @__PURE__ */
|
|
391
|
+
return /* @__PURE__ */ React13.createElement(Context3.Provider, { value: { prop } }, children);
|
|
274
392
|
}
|
|
275
393
|
function useClassesProp() {
|
|
276
|
-
const context =
|
|
394
|
+
const context = useContext4(Context3);
|
|
277
395
|
if (!context) {
|
|
278
396
|
throw new Error("useClassesProp must be used within a ClassesPropProvider");
|
|
279
397
|
}
|
|
280
398
|
return context.prop;
|
|
281
399
|
}
|
|
282
400
|
|
|
283
|
-
// src/contexts/style-context.tsx
|
|
284
|
-
import * as React11 from "react";
|
|
285
|
-
import { createContext as createContext3, useContext as useContext3 } from "react";
|
|
286
|
-
var Context3 = createContext3(null);
|
|
287
|
-
function StyleProvider({ children, id, setId, meta }) {
|
|
288
|
-
return /* @__PURE__ */ React11.createElement(Context3.Provider, { value: { id, setId, meta } }, children);
|
|
289
|
-
}
|
|
290
|
-
function useStyle() {
|
|
291
|
-
const context = useContext3(Context3);
|
|
292
|
-
if (!context) {
|
|
293
|
-
throw new Error("useStyle must be used within a StyleProvider");
|
|
294
|
-
}
|
|
295
|
-
return context;
|
|
296
|
-
}
|
|
297
|
-
|
|
298
401
|
// src/components/css-class-selector.tsx
|
|
299
|
-
import * as
|
|
402
|
+
import * as React16 from "react";
|
|
403
|
+
import { useId as useId3, useRef as useRef2 } from "react";
|
|
300
404
|
import { updateSettings as updateSettings2, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
|
|
301
405
|
import { classesPropTypeUtil } from "@elementor/editor-props";
|
|
302
406
|
import { ELEMENTS_STYLES_PROVIDER_KEY, useAllStylesByProvider } from "@elementor/editor-styles-repository";
|
|
303
|
-
import {
|
|
304
|
-
import {
|
|
407
|
+
import { DotsVerticalIcon } from "@elementor/icons";
|
|
408
|
+
import {
|
|
409
|
+
bindTrigger,
|
|
410
|
+
Chip as Chip2,
|
|
411
|
+
Stack as Stack3,
|
|
412
|
+
Typography as Typography2,
|
|
413
|
+
UnstableChipGroup,
|
|
414
|
+
usePopupState as usePopupState2
|
|
415
|
+
} from "@elementor/ui";
|
|
416
|
+
import { __ as __2 } from "@wordpress/i18n";
|
|
305
417
|
|
|
306
418
|
// src/components/conditional-tooltip-wrapper.tsx
|
|
307
419
|
import { useEffect, useRef, useState as useState2 } from "react";
|
|
308
|
-
import * as
|
|
309
|
-
import { Box as
|
|
420
|
+
import * as React14 from "react";
|
|
421
|
+
import { Box as Box4, Tooltip as Tooltip2 } from "@elementor/ui";
|
|
310
422
|
var ConditionalTooltipWrapper = ({ maxWidth, title }) => {
|
|
311
423
|
const elRef = useRef(null);
|
|
312
424
|
const [isOverflown, setIsOverflown] = useState2(false);
|
|
@@ -324,12 +436,12 @@ var ConditionalTooltipWrapper = ({ maxWidth, title }) => {
|
|
|
324
436
|
};
|
|
325
437
|
}, []);
|
|
326
438
|
if (isOverflown) {
|
|
327
|
-
return /* @__PURE__ */
|
|
439
|
+
return /* @__PURE__ */ React14.createElement(Tooltip2, { title, placement: "top" }, /* @__PURE__ */ React14.createElement(Content, { maxWidth, ref: elRef }, title));
|
|
328
440
|
}
|
|
329
|
-
return /* @__PURE__ */
|
|
441
|
+
return /* @__PURE__ */ React14.createElement(Content, { maxWidth, ref: elRef }, title);
|
|
330
442
|
};
|
|
331
|
-
var Content =
|
|
332
|
-
|
|
443
|
+
var Content = React14.forwardRef(({ maxWidth, ...tooltipProps }, ref) => /* @__PURE__ */ React14.createElement(
|
|
444
|
+
Box4,
|
|
333
445
|
{
|
|
334
446
|
ref,
|
|
335
447
|
position: "relative",
|
|
@@ -339,12 +451,12 @@ var Content = React12.forwardRef(({ maxWidth, ...tooltipProps }, ref) => /* @__P
|
|
|
339
451
|
));
|
|
340
452
|
|
|
341
453
|
// src/components/multi-combobox/multi-combobox.tsx
|
|
342
|
-
import * as
|
|
454
|
+
import * as React15 from "react";
|
|
343
455
|
import {
|
|
344
456
|
Autocomplete,
|
|
345
|
-
Box as
|
|
457
|
+
Box as Box5,
|
|
346
458
|
Chip,
|
|
347
|
-
styled as
|
|
459
|
+
styled as styled4,
|
|
348
460
|
TextField
|
|
349
461
|
} from "@elementor/ui";
|
|
350
462
|
|
|
@@ -411,7 +523,7 @@ var MultiCombobox = ({
|
|
|
411
523
|
optionsLabel,
|
|
412
524
|
onSelect
|
|
413
525
|
);
|
|
414
|
-
return /* @__PURE__ */
|
|
526
|
+
return /* @__PURE__ */ React15.createElement(
|
|
415
527
|
Autocomplete,
|
|
416
528
|
{
|
|
417
529
|
...props,
|
|
@@ -424,8 +536,8 @@ var MultiCombobox = ({
|
|
|
424
536
|
value: selected,
|
|
425
537
|
options: options10,
|
|
426
538
|
renderGroup,
|
|
427
|
-
renderInput: (params) => /* @__PURE__ */
|
|
428
|
-
getLimitTagsText: (more) => /* @__PURE__ */
|
|
539
|
+
renderInput: (params) => /* @__PURE__ */ React15.createElement(TextField, { ...params }),
|
|
540
|
+
getLimitTagsText: (more) => /* @__PURE__ */ React15.createElement(Chip, { size: "tiny", variant: "standard", label: `+${more}`, clickable: true }),
|
|
429
541
|
onChange: (_, selectedOrTypedValue, reason) => {
|
|
430
542
|
if (reason === "createOption") {
|
|
431
543
|
const typedValue = selectedOrTypedValue.find((option) => typeof option === "string");
|
|
@@ -457,19 +569,19 @@ var MultiCombobox = ({
|
|
|
457
569
|
}
|
|
458
570
|
);
|
|
459
571
|
};
|
|
460
|
-
var renderGroup = (params) => /* @__PURE__ */
|
|
461
|
-
var Group =
|
|
572
|
+
var renderGroup = (params) => /* @__PURE__ */ React15.createElement(Group, { key: params.key }, /* @__PURE__ */ React15.createElement(GroupHeader, null, params.group), /* @__PURE__ */ React15.createElement(GroupItems, null, params.children));
|
|
573
|
+
var Group = styled4("li")`
|
|
462
574
|
&:not( :last-of-type ) {
|
|
463
575
|
border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
|
|
464
576
|
}
|
|
465
577
|
`;
|
|
466
|
-
var GroupHeader =
|
|
578
|
+
var GroupHeader = styled4(Box5)(({ theme }) => ({
|
|
467
579
|
position: "sticky",
|
|
468
580
|
top: "-8px",
|
|
469
581
|
padding: theme.spacing(1, 2),
|
|
470
582
|
color: theme.palette.text.tertiary
|
|
471
583
|
}));
|
|
472
|
-
var GroupItems =
|
|
584
|
+
var GroupItems = styled4("ul")`
|
|
473
585
|
padding: 0;
|
|
474
586
|
`;
|
|
475
587
|
|
|
@@ -477,7 +589,7 @@ var GroupItems = styled3("ul")`
|
|
|
477
589
|
var ID = "elementor-css-class-selector";
|
|
478
590
|
var TAGS_LIMIT = 8;
|
|
479
591
|
var EMPTY_OPTION = {
|
|
480
|
-
label:
|
|
592
|
+
label: __2("local", "elementor"),
|
|
481
593
|
value: "",
|
|
482
594
|
fixed: true,
|
|
483
595
|
color: "primary",
|
|
@@ -491,7 +603,7 @@ function CssClassSelector() {
|
|
|
491
603
|
const handleActivate = ({ value }) => setActiveId(value);
|
|
492
604
|
const applied = useAppliedOptions(options10, appliedIds);
|
|
493
605
|
const active = applied.find((option) => option.value === activeId) ?? EMPTY_OPTION;
|
|
494
|
-
return /* @__PURE__ */
|
|
606
|
+
return /* @__PURE__ */ React16.createElement(Stack3, { gap: 1, p: 2 }, /* @__PURE__ */ React16.createElement(Typography2, { component: "label", variant: "caption", htmlFor: ID }, __2("CSS Classes", "elementor")), /* @__PURE__ */ React16.createElement(
|
|
495
607
|
MultiCombobox,
|
|
496
608
|
{
|
|
497
609
|
id: ID,
|
|
@@ -500,28 +612,57 @@ function CssClassSelector() {
|
|
|
500
612
|
selected: applied,
|
|
501
613
|
onSelect: handleApply,
|
|
502
614
|
limitTags: TAGS_LIMIT,
|
|
503
|
-
optionsLabel:
|
|
615
|
+
optionsLabel: __2("Global CSS Classes", "elementor"),
|
|
504
616
|
renderTags: (values, getTagProps) => values.map((value, index) => {
|
|
505
617
|
const chipProps = getTagProps({ index });
|
|
506
618
|
const isActive = value.value === active?.value;
|
|
507
|
-
return /* @__PURE__ */
|
|
508
|
-
|
|
619
|
+
return /* @__PURE__ */ React16.createElement(
|
|
620
|
+
CssClassItem,
|
|
509
621
|
{
|
|
510
|
-
...chipProps,
|
|
511
622
|
key: chipProps.key,
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
623
|
+
label: value.label,
|
|
624
|
+
id: value.value,
|
|
625
|
+
isActive,
|
|
626
|
+
isGlobal: value.color === "global",
|
|
515
627
|
color: isActive && value.color ? value.color : "default",
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
"aria-pressed": isActive
|
|
628
|
+
chipProps,
|
|
629
|
+
onClickActive: () => handleActivate(value)
|
|
519
630
|
}
|
|
520
631
|
);
|
|
521
632
|
})
|
|
522
633
|
}
|
|
523
634
|
));
|
|
524
635
|
}
|
|
636
|
+
function CssClassItem({ id, label, isActive, isGlobal, color, chipProps, onClickActive }) {
|
|
637
|
+
const { meta } = useStyle();
|
|
638
|
+
const popupId = useId3().replace(/:/g, "_");
|
|
639
|
+
const popupState = usePopupState2({ variant: "popover", popupId });
|
|
640
|
+
const chipRef = useRef2(null);
|
|
641
|
+
const { onDelete, ...chipGroupProps } = chipProps;
|
|
642
|
+
return /* @__PURE__ */ React16.createElement(CssClassItemProvider, { styleId: id, isActive, isGlobal }, /* @__PURE__ */ React16.createElement(UnstableChipGroup, { ref: chipRef, ...chipGroupProps, "aria-label": `Edit ${label}`, role: "group" }, /* @__PURE__ */ React16.createElement(
|
|
643
|
+
Chip2,
|
|
644
|
+
{
|
|
645
|
+
key: chipProps.key,
|
|
646
|
+
size: "small",
|
|
647
|
+
label: /* @__PURE__ */ React16.createElement(ConditionalTooltipWrapper, { maxWidth: "10ch", title: label }),
|
|
648
|
+
variant: isActive && !meta.state ? "filled" : "standard",
|
|
649
|
+
color,
|
|
650
|
+
onClick: () => onClickActive(id),
|
|
651
|
+
"aria-pressed": isActive
|
|
652
|
+
}
|
|
653
|
+
), /* @__PURE__ */ React16.createElement(
|
|
654
|
+
Chip2,
|
|
655
|
+
{
|
|
656
|
+
key: `${chipProps.key}-menu`,
|
|
657
|
+
size: "small",
|
|
658
|
+
label: /* @__PURE__ */ React16.createElement(Stack3, { direction: "row", gap: 0.5, alignItems: "center" }, isActive && meta.state && /* @__PURE__ */ React16.createElement(Typography2, { variant: "inherit" }, meta.state), /* @__PURE__ */ React16.createElement(DotsVerticalIcon, { fontSize: "inherit" })),
|
|
659
|
+
variant: "filled",
|
|
660
|
+
color,
|
|
661
|
+
...bindTrigger(popupState),
|
|
662
|
+
"aria-label": __2("Open CSS Class Menu", "elementor")
|
|
663
|
+
}
|
|
664
|
+
)), /* @__PURE__ */ React16.createElement(CssClassMenu, { popupState, containerRef: chipRef }));
|
|
665
|
+
}
|
|
525
666
|
function useOptions() {
|
|
526
667
|
const { element } = useElement();
|
|
527
668
|
return useAllStylesByProvider({ elementId: element.id }).flatMap(([providerKey, styleDefs]) => {
|
|
@@ -586,16 +727,16 @@ function useHandleApply(appliedIds, setAppliedIds) {
|
|
|
586
727
|
}
|
|
587
728
|
|
|
588
729
|
// src/components/style-sections/background-section/background-section.tsx
|
|
589
|
-
import * as
|
|
730
|
+
import * as React18 from "react";
|
|
590
731
|
import { BackgroundControl } from "@elementor/editor-controls";
|
|
591
732
|
|
|
592
733
|
// src/controls-registry/styles-field.tsx
|
|
593
|
-
import * as
|
|
734
|
+
import * as React17 from "react";
|
|
594
735
|
import { BoundPropProvider as BoundPropProvider2 } from "@elementor/editor-controls";
|
|
595
736
|
|
|
596
737
|
// src/hooks/use-styles-fields.ts
|
|
597
738
|
import { updateStyle, useElementStyleProps } from "@elementor/editor-elements";
|
|
598
|
-
import { __ as
|
|
739
|
+
import { __ as __3 } from "@wordpress/i18n";
|
|
599
740
|
function useStylesFields(propNames) {
|
|
600
741
|
const { element } = useElement();
|
|
601
742
|
const { id, meta } = useStyle();
|
|
@@ -613,7 +754,7 @@ function useStylesFields(propNames) {
|
|
|
613
754
|
props: newValues,
|
|
614
755
|
meta,
|
|
615
756
|
bind: classesProp,
|
|
616
|
-
label:
|
|
757
|
+
label: __3("local", "elementor")
|
|
617
758
|
});
|
|
618
759
|
};
|
|
619
760
|
return [value, setValue];
|
|
@@ -634,30 +775,30 @@ function useStylesField(propName) {
|
|
|
634
775
|
// src/controls-registry/styles-field.tsx
|
|
635
776
|
var StylesField = ({ bind, children }) => {
|
|
636
777
|
const [value, setValue] = useStylesField(bind);
|
|
637
|
-
return /* @__PURE__ */
|
|
778
|
+
return /* @__PURE__ */ React17.createElement(BoundPropProvider2, { setValue, value, bind }, children);
|
|
638
779
|
};
|
|
639
780
|
|
|
640
781
|
// src/components/style-sections/background-section/background-section.tsx
|
|
641
782
|
var BackgroundSection = () => {
|
|
642
|
-
return /* @__PURE__ */
|
|
783
|
+
return /* @__PURE__ */ React18.createElement(StylesField, { bind: "background" }, /* @__PURE__ */ React18.createElement(BackgroundControl, null));
|
|
643
784
|
};
|
|
644
785
|
|
|
645
786
|
// src/components/style-sections/border-section/border-section.tsx
|
|
646
|
-
import * as
|
|
787
|
+
import * as React25 from "react";
|
|
647
788
|
import { Divider as Divider2, Stack as Stack5 } from "@elementor/ui";
|
|
648
789
|
|
|
649
790
|
// src/components/style-sections/border-section/border-field.tsx
|
|
650
|
-
import * as
|
|
651
|
-
import { __ as
|
|
791
|
+
import * as React23 from "react";
|
|
792
|
+
import { __ as __7 } from "@wordpress/i18n";
|
|
652
793
|
|
|
653
794
|
// src/components/add-or-remove-content.tsx
|
|
654
|
-
import * as
|
|
795
|
+
import * as React19 from "react";
|
|
655
796
|
import { ControlLabel as ControlLabel2 } from "@elementor/editor-controls";
|
|
656
797
|
import { MinusIcon, PlusIcon } from "@elementor/icons";
|
|
657
798
|
import { Collapse as Collapse2, IconButton as IconButton2, Stack as Stack4 } from "@elementor/ui";
|
|
658
799
|
var SIZE2 = "tiny";
|
|
659
800
|
var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
660
|
-
return /* @__PURE__ */
|
|
801
|
+
return /* @__PURE__ */ React19.createElement(Stack4, { gap: 1.5 }, /* @__PURE__ */ React19.createElement(
|
|
661
802
|
Stack4,
|
|
662
803
|
{
|
|
663
804
|
direction: "row",
|
|
@@ -666,75 +807,75 @@ var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
|
666
807
|
alignItems: "center"
|
|
667
808
|
}
|
|
668
809
|
},
|
|
669
|
-
/* @__PURE__ */
|
|
670
|
-
isAdded ? /* @__PURE__ */
|
|
671
|
-
), /* @__PURE__ */
|
|
810
|
+
/* @__PURE__ */ React19.createElement(ControlLabel2, null, label),
|
|
811
|
+
isAdded ? /* @__PURE__ */ React19.createElement(IconButton2, { size: SIZE2, onClick: onRemove }, /* @__PURE__ */ React19.createElement(MinusIcon, { fontSize: SIZE2 })) : /* @__PURE__ */ React19.createElement(IconButton2, { size: SIZE2, onClick: onAdd }, /* @__PURE__ */ React19.createElement(PlusIcon, { fontSize: SIZE2 }))
|
|
812
|
+
), /* @__PURE__ */ React19.createElement(Collapse2, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React19.createElement(Stack4, { gap: 1.5 }, children)));
|
|
672
813
|
};
|
|
673
814
|
|
|
674
815
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
675
|
-
import * as
|
|
816
|
+
import * as React20 from "react";
|
|
676
817
|
import { ColorControl, ControlLabel as ControlLabel3 } from "@elementor/editor-controls";
|
|
677
818
|
import { Grid } from "@elementor/ui";
|
|
678
|
-
import { __ as
|
|
819
|
+
import { __ as __4 } from "@wordpress/i18n";
|
|
679
820
|
var BorderColorField = () => {
|
|
680
|
-
return /* @__PURE__ */
|
|
821
|
+
return /* @__PURE__ */ React20.createElement(StylesField, { bind: "border-color" }, /* @__PURE__ */ React20.createElement(Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React20.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React20.createElement(ControlLabel3, null, __4("Border Color", "elementor"))), /* @__PURE__ */ React20.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React20.createElement(ColorControl, null))));
|
|
681
822
|
};
|
|
682
823
|
|
|
683
824
|
// src/components/style-sections/border-section/border-style-field.tsx
|
|
684
|
-
import * as
|
|
825
|
+
import * as React21 from "react";
|
|
685
826
|
import { ControlLabel as ControlLabel4, SelectControl as SelectControl2 } from "@elementor/editor-controls";
|
|
686
827
|
import { Grid as Grid2 } from "@elementor/ui";
|
|
687
|
-
import { __ as
|
|
828
|
+
import { __ as __5 } from "@wordpress/i18n";
|
|
688
829
|
var borderStyles = [
|
|
689
|
-
{ value: "none", label:
|
|
690
|
-
{ value: "solid", label:
|
|
691
|
-
{ value: "dashed", label:
|
|
692
|
-
{ value: "dotted", label:
|
|
693
|
-
{ value: "double", label:
|
|
694
|
-
{ value: "groove", label:
|
|
695
|
-
{ value: "ridge", label:
|
|
696
|
-
{ value: "inset", label:
|
|
697
|
-
{ value: "outset", label:
|
|
830
|
+
{ value: "none", label: __5("None", "elementor") },
|
|
831
|
+
{ value: "solid", label: __5("Solid", "elementor") },
|
|
832
|
+
{ value: "dashed", label: __5("Dashed", "elementor") },
|
|
833
|
+
{ value: "dotted", label: __5("Dotted", "elementor") },
|
|
834
|
+
{ value: "double", label: __5("Double", "elementor") },
|
|
835
|
+
{ value: "groove", label: __5("Groove", "elementor") },
|
|
836
|
+
{ value: "ridge", label: __5("Ridge", "elementor") },
|
|
837
|
+
{ value: "inset", label: __5("Inset", "elementor") },
|
|
838
|
+
{ value: "outset", label: __5("Outset", "elementor") }
|
|
698
839
|
];
|
|
699
840
|
var BorderStyleField = () => {
|
|
700
|
-
return /* @__PURE__ */
|
|
841
|
+
return /* @__PURE__ */ React21.createElement(StylesField, { bind: "border-style" }, /* @__PURE__ */ React21.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React21.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(ControlLabel4, null, __5("Border Type", "elementor"))), /* @__PURE__ */ React21.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(SelectControl2, { options: borderStyles }))));
|
|
701
842
|
};
|
|
702
843
|
|
|
703
844
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
704
|
-
import * as
|
|
845
|
+
import * as React22 from "react";
|
|
705
846
|
import { EqualUnequalSizesControl } from "@elementor/editor-controls";
|
|
706
847
|
import { borderWidthPropTypeUtil } from "@elementor/editor-props";
|
|
707
848
|
import { SideAllIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
|
|
708
|
-
import { __ as
|
|
849
|
+
import { __ as __6 } from "@wordpress/i18n";
|
|
709
850
|
var edges = [
|
|
710
851
|
{
|
|
711
|
-
label:
|
|
712
|
-
icon: /* @__PURE__ */
|
|
852
|
+
label: __6("Top", "elementor"),
|
|
853
|
+
icon: /* @__PURE__ */ React22.createElement(SideTopIcon, { fontSize: "tiny" }),
|
|
713
854
|
bind: "top"
|
|
714
855
|
},
|
|
715
856
|
{
|
|
716
|
-
label:
|
|
717
|
-
icon: /* @__PURE__ */
|
|
857
|
+
label: __6("Right", "elementor"),
|
|
858
|
+
icon: /* @__PURE__ */ React22.createElement(SideRightIcon, { fontSize: "tiny" }),
|
|
718
859
|
bind: "right"
|
|
719
860
|
},
|
|
720
861
|
{
|
|
721
|
-
label:
|
|
722
|
-
icon: /* @__PURE__ */
|
|
862
|
+
label: __6("Bottom", "elementor"),
|
|
863
|
+
icon: /* @__PURE__ */ React22.createElement(SideBottomIcon, { fontSize: "tiny" }),
|
|
723
864
|
bind: "bottom"
|
|
724
865
|
},
|
|
725
866
|
{
|
|
726
|
-
label:
|
|
727
|
-
icon: /* @__PURE__ */
|
|
867
|
+
label: __6("Left", "elementor"),
|
|
868
|
+
icon: /* @__PURE__ */ React22.createElement(SideLeftIcon, { fontSize: "tiny" }),
|
|
728
869
|
bind: "left"
|
|
729
870
|
}
|
|
730
871
|
];
|
|
731
872
|
var BorderWidthField = () => {
|
|
732
|
-
return /* @__PURE__ */
|
|
873
|
+
return /* @__PURE__ */ React22.createElement(StylesField, { bind: "border-width" }, /* @__PURE__ */ React22.createElement(
|
|
733
874
|
EqualUnequalSizesControl,
|
|
734
875
|
{
|
|
735
876
|
items: edges,
|
|
736
|
-
label:
|
|
737
|
-
icon: /* @__PURE__ */
|
|
877
|
+
label: __6("Border Width", "elementor"),
|
|
878
|
+
icon: /* @__PURE__ */ React22.createElement(SideAllIcon, { fontSize: "tiny" }),
|
|
738
879
|
multiSizePropTypeUtil: borderWidthPropTypeUtil
|
|
739
880
|
}
|
|
740
881
|
));
|
|
@@ -763,22 +904,22 @@ var BorderField = () => {
|
|
|
763
904
|
setBorderStyle(null);
|
|
764
905
|
};
|
|
765
906
|
const hasBorder = Boolean(borderWidth || borderColor || borderStyle);
|
|
766
|
-
return /* @__PURE__ */
|
|
907
|
+
return /* @__PURE__ */ React23.createElement(
|
|
767
908
|
AddOrRemoveContent,
|
|
768
909
|
{
|
|
769
|
-
label:
|
|
910
|
+
label: __7("Border", "elementor"),
|
|
770
911
|
isAdded: hasBorder,
|
|
771
912
|
onAdd: addBorder,
|
|
772
913
|
onRemove: removeBorder
|
|
773
914
|
},
|
|
774
|
-
/* @__PURE__ */
|
|
775
|
-
/* @__PURE__ */
|
|
776
|
-
/* @__PURE__ */
|
|
915
|
+
/* @__PURE__ */ React23.createElement(BorderWidthField, null),
|
|
916
|
+
/* @__PURE__ */ React23.createElement(BorderColorField, null),
|
|
917
|
+
/* @__PURE__ */ React23.createElement(BorderStyleField, null)
|
|
777
918
|
);
|
|
778
919
|
};
|
|
779
920
|
|
|
780
921
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
781
|
-
import * as
|
|
922
|
+
import * as React24 from "react";
|
|
782
923
|
import { EqualUnequalSizesControl as EqualUnequalSizesControl2 } from "@elementor/editor-controls";
|
|
783
924
|
import { borderRadiusPropTypeUtil } from "@elementor/editor-props";
|
|
784
925
|
import {
|
|
@@ -788,58 +929,58 @@ import {
|
|
|
788
929
|
RadiusTopLeftIcon,
|
|
789
930
|
RadiusTopRightIcon
|
|
790
931
|
} from "@elementor/icons";
|
|
791
|
-
import { __ as
|
|
932
|
+
import { __ as __8 } from "@wordpress/i18n";
|
|
792
933
|
var corners = [
|
|
793
934
|
{
|
|
794
|
-
label:
|
|
795
|
-
icon: /* @__PURE__ */
|
|
935
|
+
label: __8("Top Left", "elementor"),
|
|
936
|
+
icon: /* @__PURE__ */ React24.createElement(RadiusTopLeftIcon, { fontSize: "tiny" }),
|
|
796
937
|
bind: "top-left"
|
|
797
938
|
},
|
|
798
939
|
{
|
|
799
|
-
label:
|
|
800
|
-
icon: /* @__PURE__ */
|
|
940
|
+
label: __8("Top Right", "elementor"),
|
|
941
|
+
icon: /* @__PURE__ */ React24.createElement(RadiusTopRightIcon, { fontSize: "tiny" }),
|
|
801
942
|
bind: "top-right"
|
|
802
943
|
},
|
|
803
944
|
{
|
|
804
|
-
label:
|
|
805
|
-
icon: /* @__PURE__ */
|
|
945
|
+
label: __8("Bottom Right", "elementor"),
|
|
946
|
+
icon: /* @__PURE__ */ React24.createElement(RadiusBottomRightIcon, { fontSize: "tiny" }),
|
|
806
947
|
bind: "bottom-right"
|
|
807
948
|
},
|
|
808
949
|
{
|
|
809
|
-
label:
|
|
810
|
-
icon: /* @__PURE__ */
|
|
950
|
+
label: __8("Bottom Left", "elementor"),
|
|
951
|
+
icon: /* @__PURE__ */ React24.createElement(RadiusBottomLeftIcon, { fontSize: "tiny" }),
|
|
811
952
|
bind: "bottom-left"
|
|
812
953
|
}
|
|
813
954
|
];
|
|
814
955
|
var BorderRadiusField = () => {
|
|
815
|
-
return /* @__PURE__ */
|
|
956
|
+
return /* @__PURE__ */ React24.createElement(StylesField, { bind: "border-radius" }, /* @__PURE__ */ React24.createElement(
|
|
816
957
|
EqualUnequalSizesControl2,
|
|
817
958
|
{
|
|
818
959
|
items: corners,
|
|
819
|
-
label:
|
|
820
|
-
icon: /* @__PURE__ */
|
|
960
|
+
label: __8("Border Radius", "elementor"),
|
|
961
|
+
icon: /* @__PURE__ */ React24.createElement(BorderCornersIcon, { fontSize: "tiny" }),
|
|
821
962
|
multiSizePropTypeUtil: borderRadiusPropTypeUtil
|
|
822
963
|
}
|
|
823
964
|
));
|
|
824
965
|
};
|
|
825
966
|
|
|
826
967
|
// src/components/style-sections/border-section/border-section.tsx
|
|
827
|
-
var BorderSection = () => /* @__PURE__ */
|
|
968
|
+
var BorderSection = () => /* @__PURE__ */ React25.createElement(Stack5, { gap: 1.5 }, /* @__PURE__ */ React25.createElement(BorderRadiusField, null), /* @__PURE__ */ React25.createElement(Divider2, null), /* @__PURE__ */ React25.createElement(BorderField, null));
|
|
828
969
|
|
|
829
970
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
830
|
-
import * as
|
|
971
|
+
import * as React26 from "react";
|
|
831
972
|
import { BoxShadowRepeaterControl } from "@elementor/editor-controls";
|
|
832
973
|
import { Stack as Stack6 } from "@elementor/ui";
|
|
833
974
|
var EffectsSection = () => {
|
|
834
|
-
return /* @__PURE__ */
|
|
975
|
+
return /* @__PURE__ */ React26.createElement(Stack6, { gap: 1.5 }, /* @__PURE__ */ React26.createElement(StylesField, { bind: "box-shadow" }, /* @__PURE__ */ React26.createElement(BoxShadowRepeaterControl, null)));
|
|
835
976
|
};
|
|
836
977
|
|
|
837
978
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
838
|
-
import * as
|
|
979
|
+
import * as React37 from "react";
|
|
839
980
|
import { ControlLabel as ControlLabel13 } from "@elementor/editor-controls";
|
|
840
981
|
import { useParentElement } from "@elementor/editor-elements";
|
|
841
982
|
import { Divider as Divider3, Stack as Stack12 } from "@elementor/ui";
|
|
842
|
-
import { __ as
|
|
983
|
+
import { __ as __18 } from "@wordpress/i18n";
|
|
843
984
|
|
|
844
985
|
// src/hooks/use-computed-style.ts
|
|
845
986
|
import { __privateUseListenTo as useListenTo, commandEndEvent, windowEvent } from "@elementor/editor-v1-adapters";
|
|
@@ -867,7 +1008,7 @@ function useComputedStyle(elementId) {
|
|
|
867
1008
|
}
|
|
868
1009
|
|
|
869
1010
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
870
|
-
import * as
|
|
1011
|
+
import * as React28 from "react";
|
|
871
1012
|
import { ControlLabel as ControlLabel5, ToggleControl } from "@elementor/editor-controls";
|
|
872
1013
|
import {
|
|
873
1014
|
LayoutAlignCenterIcon as CenterIcon,
|
|
@@ -876,7 +1017,7 @@ import {
|
|
|
876
1017
|
LayoutDistributeVerticalIcon as JustifyIcon
|
|
877
1018
|
} from "@elementor/icons";
|
|
878
1019
|
import { DirectionProvider, Grid as Grid3, ThemeProvider, withDirection } from "@elementor/ui";
|
|
879
|
-
import { __ as
|
|
1020
|
+
import { __ as __9 } from "@wordpress/i18n";
|
|
880
1021
|
|
|
881
1022
|
// src/hooks/use-direction.ts
|
|
882
1023
|
import { useTheme } from "@elementor/ui";
|
|
@@ -887,8 +1028,8 @@ function useDirection() {
|
|
|
887
1028
|
}
|
|
888
1029
|
|
|
889
1030
|
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
890
|
-
import * as
|
|
891
|
-
import { useRef as
|
|
1031
|
+
import * as React27 from "react";
|
|
1032
|
+
import { useRef as useRef3 } from "react";
|
|
892
1033
|
import { useTheme as useTheme2 } from "@elementor/ui";
|
|
893
1034
|
var CLOCKWISE_ANGLES = {
|
|
894
1035
|
row: 0,
|
|
@@ -903,9 +1044,9 @@ var COUNTER_CLOCKWISE_ANGLES = {
|
|
|
903
1044
|
"column-reverse": -270
|
|
904
1045
|
};
|
|
905
1046
|
var RotatedIcon = ({ icon: Icon, size, isClockwise = true, offset = 0 }) => {
|
|
906
|
-
const rotate =
|
|
1047
|
+
const rotate = useRef3(useGetTargetAngle(isClockwise, offset));
|
|
907
1048
|
rotate.current = useGetTargetAngle(isClockwise, offset, rotate);
|
|
908
|
-
return /* @__PURE__ */
|
|
1049
|
+
return /* @__PURE__ */ React27.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
909
1050
|
};
|
|
910
1051
|
var useGetTargetAngle = (isClockwise, offset, existingRef) => {
|
|
911
1052
|
const [direction] = useStylesField("flex-direction");
|
|
@@ -929,36 +1070,36 @@ var iconProps = {
|
|
|
929
1070
|
var options = [
|
|
930
1071
|
{
|
|
931
1072
|
value: "start",
|
|
932
|
-
label:
|
|
933
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1073
|
+
label: __9("Start", "elementor"),
|
|
1074
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
|
|
934
1075
|
showTooltip: true
|
|
935
1076
|
},
|
|
936
1077
|
{
|
|
937
1078
|
value: "center",
|
|
938
|
-
label:
|
|
939
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1079
|
+
label: __9("Center", "elementor"),
|
|
1080
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: CenterIcon, size, ...iconProps }),
|
|
940
1081
|
showTooltip: true
|
|
941
1082
|
},
|
|
942
1083
|
{
|
|
943
1084
|
value: "end",
|
|
944
|
-
label:
|
|
945
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1085
|
+
label: __9("End", "elementor"),
|
|
1086
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
|
|
946
1087
|
showTooltip: true
|
|
947
1088
|
},
|
|
948
1089
|
{
|
|
949
1090
|
value: "stretch",
|
|
950
|
-
label:
|
|
951
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1091
|
+
label: __9("Stretch", "elementor"),
|
|
1092
|
+
renderContent: ({ size }) => /* @__PURE__ */ React28.createElement(RotatedIcon, { icon: JustifyIcon, size, ...iconProps }),
|
|
952
1093
|
showTooltip: true
|
|
953
1094
|
}
|
|
954
1095
|
];
|
|
955
1096
|
var AlignItemsField = () => {
|
|
956
1097
|
const { isSiteRtl } = useDirection();
|
|
957
|
-
return /* @__PURE__ */
|
|
1098
|
+
return /* @__PURE__ */ React28.createElement(DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React28.createElement(ThemeProvider, null, /* @__PURE__ */ React28.createElement(StylesField, { bind: "align-items" }, /* @__PURE__ */ React28.createElement(Grid3, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlLabel5, null, __9("Align items", "elementor"))), /* @__PURE__ */ React28.createElement(Grid3, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React28.createElement(ToggleControl, { options }))))));
|
|
958
1099
|
};
|
|
959
1100
|
|
|
960
1101
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
961
|
-
import * as
|
|
1102
|
+
import * as React29 from "react";
|
|
962
1103
|
import { ControlLabel as ControlLabel6, ToggleControl as ToggleControl2 } from "@elementor/editor-controls";
|
|
963
1104
|
import {
|
|
964
1105
|
LayoutAlignCenterIcon as CenterIcon2,
|
|
@@ -967,7 +1108,7 @@ import {
|
|
|
967
1108
|
LayoutDistributeVerticalIcon as JustifyIcon2
|
|
968
1109
|
} from "@elementor/icons";
|
|
969
1110
|
import { DirectionProvider as DirectionProvider2, Grid as Grid4, ThemeProvider as ThemeProvider2, withDirection as withDirection2 } from "@elementor/ui";
|
|
970
|
-
import { __ as
|
|
1111
|
+
import { __ as __10 } from "@wordpress/i18n";
|
|
971
1112
|
var StartIcon2 = withDirection2(LayoutAlignLeftIcon2);
|
|
972
1113
|
var EndIcon2 = withDirection2(LayoutAlignRightIcon2);
|
|
973
1114
|
var iconProps2 = {
|
|
@@ -977,100 +1118,100 @@ var iconProps2 = {
|
|
|
977
1118
|
var options2 = [
|
|
978
1119
|
{
|
|
979
1120
|
value: "start",
|
|
980
|
-
label:
|
|
981
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1121
|
+
label: __10("Start", "elementor"),
|
|
1122
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
|
|
982
1123
|
showTooltip: true
|
|
983
1124
|
},
|
|
984
1125
|
{
|
|
985
1126
|
value: "center",
|
|
986
|
-
label:
|
|
987
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1127
|
+
label: __10("Center", "elementor"),
|
|
1128
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: CenterIcon2, size, ...iconProps2 }),
|
|
988
1129
|
showTooltip: true
|
|
989
1130
|
},
|
|
990
1131
|
{
|
|
991
1132
|
value: "end",
|
|
992
|
-
label:
|
|
993
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1133
|
+
label: __10("End", "elementor"),
|
|
1134
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
|
|
994
1135
|
showTooltip: true
|
|
995
1136
|
},
|
|
996
1137
|
{
|
|
997
1138
|
value: "stretch",
|
|
998
|
-
label:
|
|
999
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1139
|
+
label: __10("Stretch", "elementor"),
|
|
1140
|
+
renderContent: ({ size }) => /* @__PURE__ */ React29.createElement(RotatedIcon, { icon: JustifyIcon2, size, ...iconProps2 }),
|
|
1000
1141
|
showTooltip: true
|
|
1001
1142
|
}
|
|
1002
1143
|
];
|
|
1003
1144
|
var AlignSelfChild = () => {
|
|
1004
1145
|
const { isSiteRtl } = useDirection();
|
|
1005
|
-
return /* @__PURE__ */
|
|
1146
|
+
return /* @__PURE__ */ React29.createElement(DirectionProvider2, { rtl: isSiteRtl }, /* @__PURE__ */ React29.createElement(ThemeProvider2, null, /* @__PURE__ */ React29.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React29.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React29.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(ControlLabel6, null, __10("Align self", "elementor"))), /* @__PURE__ */ React29.createElement(Grid4, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React29.createElement(ToggleControl2, { options: options2 }))))));
|
|
1006
1147
|
};
|
|
1007
1148
|
|
|
1008
1149
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
1009
|
-
import * as
|
|
1150
|
+
import * as React30 from "react";
|
|
1010
1151
|
import { ControlLabel as ControlLabel7, ToggleControl as ToggleControl3 } from "@elementor/editor-controls";
|
|
1011
1152
|
import { Stack as Stack7 } from "@elementor/ui";
|
|
1012
|
-
import { __ as
|
|
1153
|
+
import { __ as __11 } from "@wordpress/i18n";
|
|
1013
1154
|
var DisplayField = () => {
|
|
1014
1155
|
const options10 = [
|
|
1015
1156
|
{
|
|
1016
1157
|
value: "block",
|
|
1017
|
-
renderContent: () =>
|
|
1018
|
-
label:
|
|
1158
|
+
renderContent: () => __11("Block", "elementor"),
|
|
1159
|
+
label: __11("Block", "elementor")
|
|
1019
1160
|
},
|
|
1020
1161
|
{
|
|
1021
1162
|
value: "flex",
|
|
1022
|
-
renderContent: () =>
|
|
1023
|
-
label:
|
|
1163
|
+
renderContent: () => __11("Flex", "elementor"),
|
|
1164
|
+
label: __11("Flex", "elementor")
|
|
1024
1165
|
}
|
|
1025
1166
|
];
|
|
1026
|
-
return /* @__PURE__ */
|
|
1167
|
+
return /* @__PURE__ */ React30.createElement(StylesField, { bind: "display" }, /* @__PURE__ */ React30.createElement(Stack7, { gap: 1 }, /* @__PURE__ */ React30.createElement(ControlLabel7, null, __11("Display", "elementor")), /* @__PURE__ */ React30.createElement(ToggleControl3, { options: options10, fullWidth: true })));
|
|
1027
1168
|
};
|
|
1028
1169
|
|
|
1029
1170
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
1030
|
-
import * as
|
|
1171
|
+
import * as React31 from "react";
|
|
1031
1172
|
import { ControlLabel as ControlLabel8, ToggleControl as ToggleControl4 } from "@elementor/editor-controls";
|
|
1032
1173
|
import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
|
|
1033
1174
|
import { DirectionProvider as DirectionProvider3, Grid as Grid5, ThemeProvider as ThemeProvider3, withDirection as withDirection3 } from "@elementor/ui";
|
|
1034
|
-
import { __ as
|
|
1175
|
+
import { __ as __12 } from "@wordpress/i18n";
|
|
1035
1176
|
var options3 = [
|
|
1036
1177
|
{
|
|
1037
1178
|
value: "row",
|
|
1038
|
-
label:
|
|
1179
|
+
label: __12("Row", "elementor"),
|
|
1039
1180
|
renderContent: ({ size }) => {
|
|
1040
1181
|
const StartIcon4 = withDirection3(ArrowRightIcon);
|
|
1041
|
-
return /* @__PURE__ */
|
|
1182
|
+
return /* @__PURE__ */ React31.createElement(StartIcon4, { fontSize: size });
|
|
1042
1183
|
},
|
|
1043
1184
|
showTooltip: true
|
|
1044
1185
|
},
|
|
1045
1186
|
{
|
|
1046
1187
|
value: "column",
|
|
1047
|
-
label:
|
|
1048
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1188
|
+
label: __12("Column", "elementor"),
|
|
1189
|
+
renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(ArrowDownSmallIcon, { fontSize: size }),
|
|
1049
1190
|
showTooltip: true
|
|
1050
1191
|
},
|
|
1051
1192
|
{
|
|
1052
1193
|
value: "row-reverse",
|
|
1053
|
-
label:
|
|
1194
|
+
label: __12("Reversed row", "elementor"),
|
|
1054
1195
|
renderContent: ({ size }) => {
|
|
1055
1196
|
const EndIcon4 = withDirection3(ArrowLeftIcon);
|
|
1056
|
-
return /* @__PURE__ */
|
|
1197
|
+
return /* @__PURE__ */ React31.createElement(EndIcon4, { fontSize: size });
|
|
1057
1198
|
},
|
|
1058
1199
|
showTooltip: true
|
|
1059
1200
|
},
|
|
1060
1201
|
{
|
|
1061
1202
|
value: "column-reverse",
|
|
1062
|
-
label:
|
|
1063
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1203
|
+
label: __12("Reversed column", "elementor"),
|
|
1204
|
+
renderContent: ({ size }) => /* @__PURE__ */ React31.createElement(ArrowUpSmallIcon, { fontSize: size }),
|
|
1064
1205
|
showTooltip: true
|
|
1065
1206
|
}
|
|
1066
1207
|
];
|
|
1067
1208
|
var FlexDirectionField = () => {
|
|
1068
1209
|
const { isSiteRtl } = useDirection();
|
|
1069
|
-
return /* @__PURE__ */
|
|
1210
|
+
return /* @__PURE__ */ React31.createElement(DirectionProvider3, { rtl: isSiteRtl }, /* @__PURE__ */ React31.createElement(ThemeProvider3, null, /* @__PURE__ */ React31.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React31.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ControlLabel8, null, __12("Direction", "elementor"))), /* @__PURE__ */ React31.createElement(Grid5, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React31.createElement(ToggleControl4, { options: options3 }))))));
|
|
1070
1211
|
};
|
|
1071
1212
|
|
|
1072
1213
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
1073
|
-
import * as
|
|
1214
|
+
import * as React32 from "react";
|
|
1074
1215
|
import { useState as useState3 } from "react";
|
|
1075
1216
|
import {
|
|
1076
1217
|
ControlLabel as ControlLabel9,
|
|
@@ -1079,7 +1220,7 @@ import {
|
|
|
1079
1220
|
} from "@elementor/editor-controls";
|
|
1080
1221
|
import { ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowUpSmallIcon as ArrowUpSmallIcon2, PencilIcon } from "@elementor/icons";
|
|
1081
1222
|
import { DirectionProvider as DirectionProvider4, Grid as Grid6, Stack as Stack8, ThemeProvider as ThemeProvider4 } from "@elementor/ui";
|
|
1082
|
-
import { __ as
|
|
1223
|
+
import { __ as __13 } from "@wordpress/i18n";
|
|
1083
1224
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
1084
1225
|
var LAST_DEFAULT_VALUE = 99999;
|
|
1085
1226
|
var FIRST = "first";
|
|
@@ -1092,20 +1233,20 @@ var orderValueMap = {
|
|
|
1092
1233
|
var items = [
|
|
1093
1234
|
{
|
|
1094
1235
|
value: FIRST,
|
|
1095
|
-
label:
|
|
1096
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1236
|
+
label: __13("First", "elementor"),
|
|
1237
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(ArrowUpSmallIcon2, { fontSize: size }),
|
|
1097
1238
|
showTooltip: true
|
|
1098
1239
|
},
|
|
1099
1240
|
{
|
|
1100
1241
|
value: LAST,
|
|
1101
|
-
label:
|
|
1102
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1242
|
+
label: __13("Last", "elementor"),
|
|
1243
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(ArrowDownSmallIcon2, { fontSize: size }),
|
|
1103
1244
|
showTooltip: true
|
|
1104
1245
|
},
|
|
1105
1246
|
{
|
|
1106
1247
|
value: CUSTOM,
|
|
1107
|
-
label:
|
|
1108
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1248
|
+
label: __13("Custom", "elementor"),
|
|
1249
|
+
renderContent: ({ size }) => /* @__PURE__ */ React32.createElement(PencilIcon, { fontSize: size }),
|
|
1109
1250
|
showTooltip: true
|
|
1110
1251
|
}
|
|
1111
1252
|
];
|
|
@@ -1120,7 +1261,7 @@ var FlexOrderField = () => {
|
|
|
1120
1261
|
}
|
|
1121
1262
|
setOrder({ $$type: "number", value: orderValueMap[group] });
|
|
1122
1263
|
};
|
|
1123
|
-
return /* @__PURE__ */
|
|
1264
|
+
return /* @__PURE__ */ React32.createElement(DirectionProvider4, { rtl: isSiteRtl }, /* @__PURE__ */ React32.createElement(ThemeProvider4, null, /* @__PURE__ */ React32.createElement(Stack8, { gap: 2 }, /* @__PURE__ */ React32.createElement(Grid6, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(ControlLabel9, null, __13("Order", "elementor"))), /* @__PURE__ */ React32.createElement(Grid6, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(
|
|
1124
1265
|
ControlToggleButtonGroup,
|
|
1125
1266
|
{
|
|
1126
1267
|
items,
|
|
@@ -1128,7 +1269,7 @@ var FlexOrderField = () => {
|
|
|
1128
1269
|
onChange: handleToggleButtonChange,
|
|
1129
1270
|
exclusive: true
|
|
1130
1271
|
}
|
|
1131
|
-
))), CUSTOM === groupControlValue && /* @__PURE__ */
|
|
1272
|
+
))), CUSTOM === groupControlValue && /* @__PURE__ */ React32.createElement(StylesField, { bind: "order" }, /* @__PURE__ */ React32.createElement(Grid6, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(ControlLabel9, null, __13("Custom order", "elementor"))), /* @__PURE__ */ React32.createElement(Grid6, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React32.createElement(
|
|
1132
1273
|
NumberControl,
|
|
1133
1274
|
{
|
|
1134
1275
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -1148,7 +1289,7 @@ var getGroupControlValue = (order) => {
|
|
|
1148
1289
|
};
|
|
1149
1290
|
|
|
1150
1291
|
// src/components/style-sections/layout-section/flex-size-field.tsx
|
|
1151
|
-
import * as
|
|
1292
|
+
import * as React33 from "react";
|
|
1152
1293
|
import {
|
|
1153
1294
|
ControlLabel as ControlLabel10,
|
|
1154
1295
|
ControlToggleButtonGroup as ControlToggleButtonGroup2,
|
|
@@ -1157,32 +1298,32 @@ import {
|
|
|
1157
1298
|
} from "@elementor/editor-controls";
|
|
1158
1299
|
import { ExpandIcon, PencilIcon as PencilIcon2, ShrinkIcon } from "@elementor/icons";
|
|
1159
1300
|
import { DirectionProvider as DirectionProvider5, Grid as Grid7, Stack as Stack9, ThemeProvider as ThemeProvider5 } from "@elementor/ui";
|
|
1160
|
-
import { __ as
|
|
1301
|
+
import { __ as __14 } from "@wordpress/i18n";
|
|
1161
1302
|
var DEFAULT = 1;
|
|
1162
1303
|
var items2 = [
|
|
1163
1304
|
{
|
|
1164
1305
|
value: "flex-grow",
|
|
1165
|
-
label:
|
|
1166
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1306
|
+
label: __14("Grow", "elementor"),
|
|
1307
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(ExpandIcon, { fontSize: size }),
|
|
1167
1308
|
showTooltip: true
|
|
1168
1309
|
},
|
|
1169
1310
|
{
|
|
1170
1311
|
value: "flex-shrink",
|
|
1171
|
-
label:
|
|
1172
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1312
|
+
label: __14("Shrink", "elementor"),
|
|
1313
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(ShrinkIcon, { fontSize: size }),
|
|
1173
1314
|
showTooltip: true
|
|
1174
1315
|
},
|
|
1175
1316
|
{
|
|
1176
1317
|
value: "custom",
|
|
1177
|
-
label:
|
|
1178
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1318
|
+
label: __14("Custom", "elementor"),
|
|
1319
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(PencilIcon2, { fontSize: size }),
|
|
1179
1320
|
showTooltip: true
|
|
1180
1321
|
}
|
|
1181
1322
|
];
|
|
1182
1323
|
var FlexSizeField = () => {
|
|
1183
1324
|
const { isSiteRtl } = useDirection(), [growField, setGrowField] = useStylesField("flex-grow"), [shrinkField, setShrinkField] = useStylesField("flex-shrink"), [basisField, setBasisField] = useStylesField("flex-basis");
|
|
1184
1325
|
const grow = growField?.value || null, shrink = shrinkField?.value || null, basis = basisField?.value || null;
|
|
1185
|
-
const currentGroup =
|
|
1326
|
+
const currentGroup = React33.useMemo(() => getActiveGroup({ grow, shrink, basis }), [grow, shrink, basis]), [activeGroup, setActiveGroup] = React33.useState(currentGroup);
|
|
1186
1327
|
const onChangeGroup = (group = null) => {
|
|
1187
1328
|
setActiveGroup(group);
|
|
1188
1329
|
setBasisField(null);
|
|
@@ -1199,7 +1340,7 @@ var FlexSizeField = () => {
|
|
|
1199
1340
|
setGrowField(null);
|
|
1200
1341
|
setShrinkField({ $$type: "number", value: DEFAULT });
|
|
1201
1342
|
};
|
|
1202
|
-
return /* @__PURE__ */
|
|
1343
|
+
return /* @__PURE__ */ React33.createElement(DirectionProvider5, { rtl: isSiteRtl }, /* @__PURE__ */ React33.createElement(ThemeProvider5, null, /* @__PURE__ */ React33.createElement(Stack9, { gap: 2 }, /* @__PURE__ */ React33.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel10, null, __14("Size", "elementor"))), /* @__PURE__ */ React33.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(
|
|
1203
1344
|
ControlToggleButtonGroup2,
|
|
1204
1345
|
{
|
|
1205
1346
|
value: activeGroup,
|
|
@@ -1207,9 +1348,9 @@ var FlexSizeField = () => {
|
|
|
1207
1348
|
items: items2,
|
|
1208
1349
|
exclusive: true
|
|
1209
1350
|
}
|
|
1210
|
-
))), "custom" === activeGroup && /* @__PURE__ */
|
|
1351
|
+
))), "custom" === activeGroup && /* @__PURE__ */ React33.createElement(FlexCustomField, null))));
|
|
1211
1352
|
};
|
|
1212
|
-
var FlexCustomField = () => /* @__PURE__ */
|
|
1353
|
+
var FlexCustomField = () => /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React33.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel10, null, __14("Grow", "elementor"))), /* @__PURE__ */ React33.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(NumberControl2, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React33.createElement(StylesField, { bind: "flex-shrink" }, /* @__PURE__ */ React33.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel10, null, __14("Shrink", "elementor"))), /* @__PURE__ */ React33.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(NumberControl2, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React33.createElement(StylesField, { bind: "flex-basis" }, /* @__PURE__ */ React33.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React33.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel10, null, __14("Basis", "elementor"))), /* @__PURE__ */ React33.createElement(Grid7, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React33.createElement(SizeControl2, null)))));
|
|
1213
1354
|
var getActiveGroup = ({
|
|
1214
1355
|
grow,
|
|
1215
1356
|
shrink,
|
|
@@ -1231,16 +1372,16 @@ var getActiveGroup = ({
|
|
|
1231
1372
|
};
|
|
1232
1373
|
|
|
1233
1374
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
1234
|
-
import * as
|
|
1375
|
+
import * as React34 from "react";
|
|
1235
1376
|
import { GapControl } from "@elementor/editor-controls";
|
|
1236
1377
|
import { Stack as Stack10 } from "@elementor/ui";
|
|
1237
|
-
import { __ as
|
|
1378
|
+
import { __ as __15 } from "@wordpress/i18n";
|
|
1238
1379
|
var GapControlField = () => {
|
|
1239
|
-
return /* @__PURE__ */
|
|
1380
|
+
return /* @__PURE__ */ React34.createElement(Stack10, { gap: 1 }, /* @__PURE__ */ React34.createElement(StylesField, { bind: "gap" }, /* @__PURE__ */ React34.createElement(GapControl, { label: __15("Gaps", "elementor") })));
|
|
1240
1381
|
};
|
|
1241
1382
|
|
|
1242
1383
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
1243
|
-
import * as
|
|
1384
|
+
import * as React35 from "react";
|
|
1244
1385
|
import { ControlLabel as ControlLabel11, ToggleControl as ToggleControl5 } from "@elementor/editor-controls";
|
|
1245
1386
|
import {
|
|
1246
1387
|
JustifyBottomIcon,
|
|
@@ -1251,7 +1392,7 @@ import {
|
|
|
1251
1392
|
JustifyTopIcon
|
|
1252
1393
|
} from "@elementor/icons";
|
|
1253
1394
|
import { DirectionProvider as DirectionProvider6, Stack as Stack11, ThemeProvider as ThemeProvider6, withDirection as withDirection4 } from "@elementor/ui";
|
|
1254
|
-
import { __ as
|
|
1395
|
+
import { __ as __16 } from "@wordpress/i18n";
|
|
1255
1396
|
var StartIcon3 = withDirection4(JustifyTopIcon);
|
|
1256
1397
|
var EndIcon3 = withDirection4(JustifyBottomIcon);
|
|
1257
1398
|
var iconProps3 = {
|
|
@@ -1261,75 +1402,75 @@ var iconProps3 = {
|
|
|
1261
1402
|
var options4 = [
|
|
1262
1403
|
{
|
|
1263
1404
|
value: "start",
|
|
1264
|
-
label:
|
|
1265
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1405
|
+
label: __16("Start", "elementor"),
|
|
1406
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: StartIcon3, size, ...iconProps3 }),
|
|
1266
1407
|
showTooltip: true
|
|
1267
1408
|
},
|
|
1268
1409
|
{
|
|
1269
1410
|
value: "center",
|
|
1270
|
-
label:
|
|
1271
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1411
|
+
label: __16("Center", "elementor"),
|
|
1412
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: CenterIcon3, size, ...iconProps3 }),
|
|
1272
1413
|
showTooltip: true
|
|
1273
1414
|
},
|
|
1274
1415
|
{
|
|
1275
1416
|
value: "end",
|
|
1276
|
-
label:
|
|
1277
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1417
|
+
label: __16("End", "elementor"),
|
|
1418
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: EndIcon3, size, ...iconProps3 }),
|
|
1278
1419
|
showTooltip: true
|
|
1279
1420
|
},
|
|
1280
1421
|
{
|
|
1281
1422
|
value: "space-between",
|
|
1282
|
-
label:
|
|
1283
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1423
|
+
label: __16("Space between", "elementor"),
|
|
1424
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: BetweenIcon, size, ...iconProps3 }),
|
|
1284
1425
|
showTooltip: true
|
|
1285
1426
|
},
|
|
1286
1427
|
{
|
|
1287
1428
|
value: "space-around",
|
|
1288
|
-
label:
|
|
1289
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1429
|
+
label: __16("Space around", "elementor"),
|
|
1430
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: AroundIcon, size, ...iconProps3 }),
|
|
1290
1431
|
showTooltip: true
|
|
1291
1432
|
},
|
|
1292
1433
|
{
|
|
1293
1434
|
value: "space-evenly",
|
|
1294
|
-
label:
|
|
1295
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1435
|
+
label: __16("Space evenly", "elementor"),
|
|
1436
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(RotatedIcon, { icon: EvenlyIcon, size, ...iconProps3 }),
|
|
1296
1437
|
showTooltip: true
|
|
1297
1438
|
}
|
|
1298
1439
|
];
|
|
1299
1440
|
var JustifyContentField = () => {
|
|
1300
1441
|
const { isSiteRtl } = useDirection();
|
|
1301
|
-
return /* @__PURE__ */
|
|
1442
|
+
return /* @__PURE__ */ React35.createElement(DirectionProvider6, { rtl: isSiteRtl }, /* @__PURE__ */ React35.createElement(ThemeProvider6, null, /* @__PURE__ */ React35.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React35.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React35.createElement(ControlLabel11, null, __16("Justify content", "elementor")), /* @__PURE__ */ React35.createElement(ToggleControl5, { options: options4, fullWidth: true })))));
|
|
1302
1443
|
};
|
|
1303
1444
|
|
|
1304
1445
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
1305
|
-
import * as
|
|
1446
|
+
import * as React36 from "react";
|
|
1306
1447
|
import { ControlLabel as ControlLabel12, ToggleControl as ToggleControl6 } from "@elementor/editor-controls";
|
|
1307
1448
|
import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
|
|
1308
1449
|
import { DirectionProvider as DirectionProvider7, Grid as Grid8, ThemeProvider as ThemeProvider7 } from "@elementor/ui";
|
|
1309
|
-
import { __ as
|
|
1450
|
+
import { __ as __17 } from "@wordpress/i18n";
|
|
1310
1451
|
var options5 = [
|
|
1311
1452
|
{
|
|
1312
1453
|
value: "nowrap",
|
|
1313
|
-
label:
|
|
1314
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1454
|
+
label: __17("No wrap", "elementor"),
|
|
1455
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(ArrowRightIcon2, { fontSize: size }),
|
|
1315
1456
|
showTooltip: true
|
|
1316
1457
|
},
|
|
1317
1458
|
{
|
|
1318
1459
|
value: "wrap",
|
|
1319
|
-
label:
|
|
1320
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1460
|
+
label: __17("Wrap", "elementor"),
|
|
1461
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(ArrowBackIcon, { fontSize: size }),
|
|
1321
1462
|
showTooltip: true
|
|
1322
1463
|
},
|
|
1323
1464
|
{
|
|
1324
1465
|
value: "wrap-reverse",
|
|
1325
|
-
label:
|
|
1326
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1466
|
+
label: __17("Reversed wrap", "elementor"),
|
|
1467
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(ArrowForwardIcon, { fontSize: size }),
|
|
1327
1468
|
showTooltip: true
|
|
1328
1469
|
}
|
|
1329
1470
|
];
|
|
1330
1471
|
var WrapField = () => {
|
|
1331
1472
|
const { isSiteRtl } = useDirection();
|
|
1332
|
-
return /* @__PURE__ */
|
|
1473
|
+
return /* @__PURE__ */ React36.createElement(DirectionProvider7, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(ThemeProvider7, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React36.createElement(Grid8, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel12, null, __17("Wrap", "elementor"))), /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React36.createElement(ToggleControl6, { options: options5 }))))));
|
|
1333
1474
|
};
|
|
1334
1475
|
|
|
1335
1476
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -1338,13 +1479,13 @@ var LayoutSection = () => {
|
|
|
1338
1479
|
const { element } = useElement();
|
|
1339
1480
|
const parent = useParentElement(element.id);
|
|
1340
1481
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
1341
|
-
return /* @__PURE__ */
|
|
1482
|
+
return /* @__PURE__ */ React37.createElement(Stack12, { gap: 2 }, /* @__PURE__ */ React37.createElement(DisplayField, null), "flex" === display?.value && /* @__PURE__ */ React37.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React37.createElement(FlexChildFields, null));
|
|
1342
1483
|
};
|
|
1343
|
-
var FlexFields = () => /* @__PURE__ */
|
|
1344
|
-
var FlexChildFields = () => /* @__PURE__ */
|
|
1484
|
+
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(Divider3, null), /* @__PURE__ */ React37.createElement(GapControlField, null), /* @__PURE__ */ React37.createElement(WrapField, null));
|
|
1485
|
+
var FlexChildFields = () => /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(Divider3, null), /* @__PURE__ */ React37.createElement(ControlLabel13, null, __18("Flex child", "elementor")), /* @__PURE__ */ React37.createElement(AlignSelfChild, null), /* @__PURE__ */ React37.createElement(FlexOrderField, null), /* @__PURE__ */ React37.createElement(FlexSizeField, null));
|
|
1345
1486
|
|
|
1346
1487
|
// src/components/style-sections/position-section/position-section.tsx
|
|
1347
|
-
import * as
|
|
1488
|
+
import * as React41 from "react";
|
|
1348
1489
|
import { Stack as Stack14 } from "@elementor/ui";
|
|
1349
1490
|
|
|
1350
1491
|
// src/hooks/use-session-storage.ts
|
|
@@ -1385,46 +1526,46 @@ var subscribeToSessionStorage = (key, subscriber) => {
|
|
|
1385
1526
|
};
|
|
1386
1527
|
|
|
1387
1528
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
1388
|
-
import * as
|
|
1529
|
+
import * as React38 from "react";
|
|
1389
1530
|
import { ControlLabel as ControlLabel14, SizeControl as SizeControl3 } from "@elementor/editor-controls";
|
|
1390
1531
|
import { SideBottomIcon as SideBottomIcon2, SideLeftIcon as SideLeftIcon2, SideRightIcon as SideRightIcon2, SideTopIcon as SideTopIcon2 } from "@elementor/icons";
|
|
1391
1532
|
import { Grid as Grid9, Stack as Stack13 } from "@elementor/ui";
|
|
1392
|
-
import { __ as
|
|
1533
|
+
import { __ as __19 } from "@wordpress/i18n";
|
|
1393
1534
|
var sideIcons = {
|
|
1394
|
-
left: /* @__PURE__ */
|
|
1395
|
-
right: /* @__PURE__ */
|
|
1396
|
-
top: /* @__PURE__ */
|
|
1397
|
-
bottom: /* @__PURE__ */
|
|
1535
|
+
left: /* @__PURE__ */ React38.createElement(SideLeftIcon2, { fontSize: "tiny" }),
|
|
1536
|
+
right: /* @__PURE__ */ React38.createElement(SideRightIcon2, { fontSize: "tiny" }),
|
|
1537
|
+
top: /* @__PURE__ */ React38.createElement(SideTopIcon2, { fontSize: "tiny" }),
|
|
1538
|
+
bottom: /* @__PURE__ */ React38.createElement(SideBottomIcon2, { fontSize: "tiny" })
|
|
1398
1539
|
};
|
|
1399
1540
|
var DimensionsField = () => {
|
|
1400
|
-
return /* @__PURE__ */
|
|
1541
|
+
return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(Stack13, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(DimensionField, { side: "top", label: __19("Top", "elementor") }), /* @__PURE__ */ React38.createElement(DimensionField, { side: "right", label: __19("Right", "elementor") })), /* @__PURE__ */ React38.createElement(Stack13, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(DimensionField, { side: "bottom", label: __19("Bottom", "elementor") }), /* @__PURE__ */ React38.createElement(DimensionField, { side: "left", label: __19("Left", "elementor") })));
|
|
1401
1542
|
};
|
|
1402
1543
|
var DimensionField = ({ side, label }) => {
|
|
1403
|
-
return /* @__PURE__ */
|
|
1544
|
+
return /* @__PURE__ */ React38.createElement(Grid9, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(ControlLabel14, null, label)), /* @__PURE__ */ React38.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(StylesField, { bind: side }, /* @__PURE__ */ React38.createElement(SizeControl3, { startIcon: sideIcons[side] }))));
|
|
1404
1545
|
};
|
|
1405
1546
|
|
|
1406
1547
|
// src/components/style-sections/position-section/position-field.tsx
|
|
1407
|
-
import * as
|
|
1548
|
+
import * as React39 from "react";
|
|
1408
1549
|
import { ControlLabel as ControlLabel15, SelectControl as SelectControl3 } from "@elementor/editor-controls";
|
|
1409
1550
|
import { Grid as Grid10 } from "@elementor/ui";
|
|
1410
|
-
import { __ as
|
|
1551
|
+
import { __ as __20 } from "@wordpress/i18n";
|
|
1411
1552
|
var positionOptions = [
|
|
1412
|
-
{ label:
|
|
1413
|
-
{ label:
|
|
1414
|
-
{ label:
|
|
1415
|
-
{ label:
|
|
1553
|
+
{ label: __20("Static", "elementor"), value: "static" },
|
|
1554
|
+
{ label: __20("Relative", "elementor"), value: "relative" },
|
|
1555
|
+
{ label: __20("Absolute", "elementor"), value: "absolute" },
|
|
1556
|
+
{ label: __20("Fixed", "elementor"), value: "fixed" }
|
|
1416
1557
|
];
|
|
1417
1558
|
var PositionField = ({ onChange }) => {
|
|
1418
|
-
return /* @__PURE__ */
|
|
1559
|
+
return /* @__PURE__ */ React39.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React39.createElement(Grid10, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel15, null, __20("Position", "elementor"))), /* @__PURE__ */ React39.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(SelectControl3, { options: positionOptions, onChange }))));
|
|
1419
1560
|
};
|
|
1420
1561
|
|
|
1421
1562
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
1422
|
-
import * as
|
|
1563
|
+
import * as React40 from "react";
|
|
1423
1564
|
import { ControlLabel as ControlLabel16, NumberControl as NumberControl3 } from "@elementor/editor-controls";
|
|
1424
1565
|
import { Grid as Grid11 } from "@elementor/ui";
|
|
1425
|
-
import { __ as
|
|
1566
|
+
import { __ as __21 } from "@wordpress/i18n";
|
|
1426
1567
|
var ZIndexField = () => {
|
|
1427
|
-
return /* @__PURE__ */
|
|
1568
|
+
return /* @__PURE__ */ React40.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React40.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlLabel16, null, __21("Z-Index", "elementor"))), /* @__PURE__ */ React40.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(NumberControl3, null))));
|
|
1428
1569
|
};
|
|
1429
1570
|
|
|
1430
1571
|
// src/components/style-sections/position-section/position-section.tsx
|
|
@@ -1456,7 +1597,7 @@ var PositionSection = () => {
|
|
|
1456
1597
|
}
|
|
1457
1598
|
};
|
|
1458
1599
|
const isNotStatic = positionValue && positionValue?.value !== "static";
|
|
1459
|
-
return /* @__PURE__ */
|
|
1600
|
+
return /* @__PURE__ */ React41.createElement(Stack14, { 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);
|
|
1460
1601
|
};
|
|
1461
1602
|
var usePersistDimensions = () => {
|
|
1462
1603
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -1466,73 +1607,73 @@ var usePersistDimensions = () => {
|
|
|
1466
1607
|
};
|
|
1467
1608
|
|
|
1468
1609
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1469
|
-
import * as
|
|
1610
|
+
import * as React43 from "react";
|
|
1470
1611
|
import { ControlLabel as ControlLabel18, SizeControl as SizeControl4 } from "@elementor/editor-controls";
|
|
1471
1612
|
import { Divider as Divider4, Grid as Grid13, Stack as Stack15 } from "@elementor/ui";
|
|
1472
|
-
import { __ as
|
|
1613
|
+
import { __ as __23 } from "@wordpress/i18n";
|
|
1473
1614
|
|
|
1474
1615
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
1475
|
-
import * as
|
|
1616
|
+
import * as React42 from "react";
|
|
1476
1617
|
import { ControlLabel as ControlLabel17, ToggleControl as ToggleControl7 } from "@elementor/editor-controls";
|
|
1477
1618
|
import { ExpandBottomIcon, EyeIcon, EyeOffIcon } from "@elementor/icons";
|
|
1478
1619
|
import { Grid as Grid12 } from "@elementor/ui";
|
|
1479
|
-
import { __ as
|
|
1620
|
+
import { __ as __22 } from "@wordpress/i18n";
|
|
1480
1621
|
var options6 = [
|
|
1481
1622
|
{
|
|
1482
1623
|
value: "visible",
|
|
1483
|
-
label:
|
|
1484
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1624
|
+
label: __22("Visible", "elementor"),
|
|
1625
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(EyeIcon, { fontSize: size }),
|
|
1485
1626
|
showTooltip: true
|
|
1486
1627
|
},
|
|
1487
1628
|
{
|
|
1488
1629
|
value: "hidden",
|
|
1489
|
-
label:
|
|
1490
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1630
|
+
label: __22("Hidden", "elementor"),
|
|
1631
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(EyeOffIcon, { fontSize: size }),
|
|
1491
1632
|
showTooltip: true
|
|
1492
1633
|
},
|
|
1493
1634
|
{
|
|
1494
1635
|
value: "auto",
|
|
1495
|
-
label:
|
|
1496
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1636
|
+
label: __22("Auto", "elementor"),
|
|
1637
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(ExpandBottomIcon, { fontSize: size }),
|
|
1497
1638
|
showTooltip: true
|
|
1498
1639
|
}
|
|
1499
1640
|
];
|
|
1500
1641
|
var OverflowField = () => {
|
|
1501
|
-
return /* @__PURE__ */
|
|
1642
|
+
return /* @__PURE__ */ React42.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React42.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React42.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlLabel17, null, __22("Overflow", "elementor"))), /* @__PURE__ */ React42.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React42.createElement(ToggleControl7, { options: options6 }))));
|
|
1502
1643
|
};
|
|
1503
1644
|
|
|
1504
1645
|
// src/components/style-sections/size-section/size-section.tsx
|
|
1505
1646
|
var SizeSection = () => {
|
|
1506
|
-
return /* @__PURE__ */
|
|
1647
|
+
return /* @__PURE__ */ React43.createElement(Stack15, { gap: 1.5 }, /* @__PURE__ */ React43.createElement(Grid13, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "width", label: __23("Width", "elementor") })), /* @__PURE__ */ React43.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "height", label: __23("Height", "elementor") }))), /* @__PURE__ */ React43.createElement(Grid13, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "min-width", label: __23("Min. Width", "elementor") })), /* @__PURE__ */ React43.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "min-height", label: __23("Min. Height", "elementor") }))), /* @__PURE__ */ React43.createElement(Grid13, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "max-width", label: __23("Max. Width", "elementor") })), /* @__PURE__ */ React43.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(SizeField, { bind: "max-height", label: __23("Max. Height", "elementor") }))), /* @__PURE__ */ React43.createElement(Divider4, null), /* @__PURE__ */ React43.createElement(Stack15, null, /* @__PURE__ */ React43.createElement(OverflowField, null)));
|
|
1507
1648
|
};
|
|
1508
1649
|
var SizeField = ({ label, bind }) => {
|
|
1509
|
-
return /* @__PURE__ */
|
|
1650
|
+
return /* @__PURE__ */ React43.createElement(StylesField, { bind }, /* @__PURE__ */ React43.createElement(Grid13, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React43.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(ControlLabel18, null, label)), /* @__PURE__ */ React43.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(SizeControl4, null))));
|
|
1510
1651
|
};
|
|
1511
1652
|
|
|
1512
1653
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
1513
|
-
import * as
|
|
1654
|
+
import * as React44 from "react";
|
|
1514
1655
|
import { LinkedDimensionsControl } from "@elementor/editor-controls";
|
|
1515
1656
|
import { Divider as Divider5, Stack as Stack16 } from "@elementor/ui";
|
|
1516
|
-
import { __ as
|
|
1657
|
+
import { __ as __24 } from "@wordpress/i18n";
|
|
1517
1658
|
var SpacingSection = () => {
|
|
1518
|
-
return /* @__PURE__ */
|
|
1659
|
+
return /* @__PURE__ */ React44.createElement(Stack16, { gap: 1.5 }, /* @__PURE__ */ React44.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React44.createElement(LinkedDimensionsControl, { label: __24("Padding", "elementor") })), /* @__PURE__ */ React44.createElement(Divider5, null), /* @__PURE__ */ React44.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React44.createElement(LinkedDimensionsControl, { label: __24("Margin", "elementor") })));
|
|
1519
1660
|
};
|
|
1520
1661
|
|
|
1521
1662
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
1522
|
-
import * as
|
|
1663
|
+
import * as React58 from "react";
|
|
1523
1664
|
import { Divider as Divider6, Stack as Stack18 } from "@elementor/ui";
|
|
1524
1665
|
|
|
1525
1666
|
// src/components/collapsible-content.tsx
|
|
1526
|
-
import * as
|
|
1667
|
+
import * as React45 from "react";
|
|
1527
1668
|
import { useState as useState6 } from "react";
|
|
1528
1669
|
import { Button, Collapse as Collapse3, Stack as Stack17 } from "@elementor/ui";
|
|
1529
|
-
import { __ as
|
|
1670
|
+
import { __ as __25 } from "@wordpress/i18n";
|
|
1530
1671
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
1531
1672
|
const [open, setOpen] = useState6(defaultOpen);
|
|
1532
1673
|
const handleToggle = () => {
|
|
1533
1674
|
setOpen((prevOpen) => !prevOpen);
|
|
1534
1675
|
};
|
|
1535
|
-
return /* @__PURE__ */
|
|
1676
|
+
return /* @__PURE__ */ React45.createElement(Stack17, { sx: { py: 0.5 } }, /* @__PURE__ */ React45.createElement(
|
|
1536
1677
|
Button,
|
|
1537
1678
|
{
|
|
1538
1679
|
fullWidth: true,
|
|
@@ -1540,17 +1681,17 @@ var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
|
1540
1681
|
color: "secondary",
|
|
1541
1682
|
variant: "outlined",
|
|
1542
1683
|
onClick: handleToggle,
|
|
1543
|
-
endIcon: /* @__PURE__ */
|
|
1684
|
+
endIcon: /* @__PURE__ */ React45.createElement(CollapseIcon, { open })
|
|
1544
1685
|
},
|
|
1545
|
-
open ?
|
|
1546
|
-
), /* @__PURE__ */
|
|
1686
|
+
open ? __25("Show less", "elementor") : __25("Show more", "elementor")
|
|
1687
|
+
), /* @__PURE__ */ React45.createElement(Collapse3, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
1547
1688
|
};
|
|
1548
1689
|
|
|
1549
1690
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
1550
|
-
import * as
|
|
1691
|
+
import * as React46 from "react";
|
|
1551
1692
|
import { ControlLabel as ControlLabel19, FontFamilyControl } from "@elementor/editor-controls";
|
|
1552
1693
|
import { Grid as Grid14 } from "@elementor/ui";
|
|
1553
|
-
import { __ as
|
|
1694
|
+
import { __ as __26 } from "@wordpress/i18n";
|
|
1554
1695
|
|
|
1555
1696
|
// src/sync/get-elementor-config.ts
|
|
1556
1697
|
var getElementorConfig = () => {
|
|
@@ -1564,7 +1705,7 @@ var FontFamilyField = () => {
|
|
|
1564
1705
|
if (!fontFamilies) {
|
|
1565
1706
|
return null;
|
|
1566
1707
|
}
|
|
1567
|
-
return /* @__PURE__ */
|
|
1708
|
+
return /* @__PURE__ */ React46.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React46.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ControlLabel19, null, __26("Font Family", "elementor"))), /* @__PURE__ */ React46.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(FontFamilyControl, { fontFamilies }))));
|
|
1568
1709
|
};
|
|
1569
1710
|
var getFontFamilies = () => {
|
|
1570
1711
|
const { controls } = getElementorConfig();
|
|
@@ -1576,115 +1717,115 @@ var getFontFamilies = () => {
|
|
|
1576
1717
|
};
|
|
1577
1718
|
|
|
1578
1719
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
1579
|
-
import * as
|
|
1720
|
+
import * as React47 from "react";
|
|
1580
1721
|
import { ControlLabel as ControlLabel20, SizeControl as SizeControl5 } from "@elementor/editor-controls";
|
|
1581
1722
|
import { Grid as Grid15 } from "@elementor/ui";
|
|
1582
|
-
import { __ as
|
|
1723
|
+
import { __ as __27 } from "@wordpress/i18n";
|
|
1583
1724
|
var FontSizeField = () => {
|
|
1584
|
-
return /* @__PURE__ */
|
|
1725
|
+
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React47.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel20, null, __27("Font Size", "elementor"))), /* @__PURE__ */ React47.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(SizeControl5, null))));
|
|
1585
1726
|
};
|
|
1586
1727
|
|
|
1587
1728
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
1588
|
-
import * as
|
|
1729
|
+
import * as React48 from "react";
|
|
1589
1730
|
import { ControlLabel as ControlLabel21, SelectControl as SelectControl4 } from "@elementor/editor-controls";
|
|
1590
1731
|
import { Grid as Grid16 } from "@elementor/ui";
|
|
1591
|
-
import { __ as
|
|
1732
|
+
import { __ as __28 } from "@wordpress/i18n";
|
|
1592
1733
|
var fontWeightOptions = [
|
|
1593
|
-
{ label:
|
|
1594
|
-
{ label:
|
|
1595
|
-
{ label:
|
|
1596
|
-
{ label:
|
|
1597
|
-
{ label:
|
|
1734
|
+
{ label: __28("Light - 400", "elementor"), value: "400" },
|
|
1735
|
+
{ label: __28("Regular - 500", "elementor"), value: "500" },
|
|
1736
|
+
{ label: __28("Semi Bold - 600", "elementor"), value: "600" },
|
|
1737
|
+
{ label: __28("Bold - 700", "elementor"), value: "700" },
|
|
1738
|
+
{ label: __28("Black - 900", "elementor"), value: "900" }
|
|
1598
1739
|
];
|
|
1599
1740
|
var FontWeightField = () => {
|
|
1600
|
-
return /* @__PURE__ */
|
|
1741
|
+
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React48.createElement(Grid16, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(ControlLabel21, null, __28("Font Weight", "elementor"))), /* @__PURE__ */ React48.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(SelectControl4, { options: fontWeightOptions }))));
|
|
1601
1742
|
};
|
|
1602
1743
|
|
|
1603
1744
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
1604
|
-
import * as
|
|
1745
|
+
import * as React49 from "react";
|
|
1605
1746
|
import { ControlLabel as ControlLabel22, SizeControl as SizeControl6 } from "@elementor/editor-controls";
|
|
1606
1747
|
import { Grid as Grid17 } from "@elementor/ui";
|
|
1607
|
-
import { __ as
|
|
1748
|
+
import { __ as __29 } from "@wordpress/i18n";
|
|
1608
1749
|
var LetterSpacingField = () => {
|
|
1609
|
-
return /* @__PURE__ */
|
|
1750
|
+
return /* @__PURE__ */ React49.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React49.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ControlLabel22, null, __29("Letter Spacing", "elementor"))), /* @__PURE__ */ React49.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(SizeControl6, null))));
|
|
1610
1751
|
};
|
|
1611
1752
|
|
|
1612
1753
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
1613
|
-
import * as
|
|
1754
|
+
import * as React50 from "react";
|
|
1614
1755
|
import { ControlLabel as ControlLabel23, SizeControl as SizeControl7 } from "@elementor/editor-controls";
|
|
1615
1756
|
import { Grid as Grid18 } from "@elementor/ui";
|
|
1616
|
-
import { __ as
|
|
1757
|
+
import { __ as __30 } from "@wordpress/i18n";
|
|
1617
1758
|
var LineHeightField = () => {
|
|
1618
|
-
return /* @__PURE__ */
|
|
1759
|
+
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React50.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React50.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(ControlLabel23, null, __30("Line Height", "elementor"))), /* @__PURE__ */ React50.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(SizeControl7, null))));
|
|
1619
1760
|
};
|
|
1620
1761
|
|
|
1621
1762
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
1622
|
-
import * as
|
|
1763
|
+
import * as React51 from "react";
|
|
1623
1764
|
import { ControlLabel as ControlLabel24, ToggleControl as ToggleControl8 } from "@elementor/editor-controls";
|
|
1624
1765
|
import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from "@elementor/icons";
|
|
1625
1766
|
import { Grid as Grid19 } from "@elementor/ui";
|
|
1626
|
-
import { __ as
|
|
1767
|
+
import { __ as __31 } from "@wordpress/i18n";
|
|
1627
1768
|
var options7 = [
|
|
1628
1769
|
{
|
|
1629
1770
|
value: "left",
|
|
1630
|
-
label:
|
|
1631
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1771
|
+
label: __31("Left", "elementor"),
|
|
1772
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(AlignLeftIcon, { fontSize: size })
|
|
1632
1773
|
},
|
|
1633
1774
|
{
|
|
1634
1775
|
value: "center",
|
|
1635
|
-
label:
|
|
1636
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1776
|
+
label: __31("Center", "elementor"),
|
|
1777
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(AlignCenterIcon, { fontSize: size })
|
|
1637
1778
|
},
|
|
1638
1779
|
{
|
|
1639
1780
|
value: "right",
|
|
1640
|
-
label:
|
|
1641
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1781
|
+
label: __31("Right", "elementor"),
|
|
1782
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(AlignRightIcon, { fontSize: size })
|
|
1642
1783
|
},
|
|
1643
1784
|
{
|
|
1644
1785
|
value: "justify",
|
|
1645
|
-
label:
|
|
1646
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1786
|
+
label: __31("Justify", "elementor"),
|
|
1787
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(AlignJustifiedIcon, { fontSize: size })
|
|
1647
1788
|
}
|
|
1648
1789
|
];
|
|
1649
1790
|
var TextAlignmentField = () => {
|
|
1650
|
-
return /* @__PURE__ */
|
|
1791
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React51.createElement(Grid19, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlLabel24, null, __31("Alignment", "elementor"))), /* @__PURE__ */ React51.createElement(Grid19, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React51.createElement(ToggleControl8, { options: options7 }))));
|
|
1651
1792
|
};
|
|
1652
1793
|
|
|
1653
1794
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
1654
|
-
import * as
|
|
1795
|
+
import * as React52 from "react";
|
|
1655
1796
|
import { ColorControl as ColorControl2, ControlLabel as ControlLabel25 } from "@elementor/editor-controls";
|
|
1656
1797
|
import { Grid as Grid20 } from "@elementor/ui";
|
|
1657
|
-
import { __ as
|
|
1798
|
+
import { __ as __32 } from "@wordpress/i18n";
|
|
1658
1799
|
var TextColorField = () => {
|
|
1659
|
-
return /* @__PURE__ */
|
|
1800
|
+
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React52.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ControlLabel25, null, __32("Text Color", "elementor"))), /* @__PURE__ */ React52.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ColorControl2, null))));
|
|
1660
1801
|
};
|
|
1661
1802
|
|
|
1662
1803
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
1663
|
-
import * as
|
|
1804
|
+
import * as React53 from "react";
|
|
1664
1805
|
import { ControlLabel as ControlLabel26, ToggleControl as ToggleControl9 } from "@elementor/editor-controls";
|
|
1665
1806
|
import { TextDirectionLtrIcon, TextDirectionRtlIcon } from "@elementor/icons";
|
|
1666
1807
|
import { Grid as Grid21 } from "@elementor/ui";
|
|
1667
|
-
import { __ as
|
|
1808
|
+
import { __ as __33 } from "@wordpress/i18n";
|
|
1668
1809
|
var options8 = [
|
|
1669
1810
|
{
|
|
1670
1811
|
value: "ltr",
|
|
1671
|
-
label:
|
|
1672
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1812
|
+
label: __33("Left to Right", "elementor"),
|
|
1813
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(TextDirectionLtrIcon, { fontSize: size })
|
|
1673
1814
|
},
|
|
1674
1815
|
{
|
|
1675
1816
|
value: "rtl",
|
|
1676
|
-
label:
|
|
1677
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1817
|
+
label: __33("Right to Left", "elementor"),
|
|
1818
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(TextDirectionRtlIcon, { fontSize: size })
|
|
1678
1819
|
}
|
|
1679
1820
|
];
|
|
1680
1821
|
var TextDirectionField = () => {
|
|
1681
|
-
return /* @__PURE__ */
|
|
1822
|
+
return /* @__PURE__ */ React53.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React53.createElement(Grid21, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlLabel26, null, __33("Direction", "elementor"))), /* @__PURE__ */ React53.createElement(Grid21, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React53.createElement(ToggleControl9, { options: options8 }))));
|
|
1682
1823
|
};
|
|
1683
1824
|
|
|
1684
1825
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
1685
|
-
import * as
|
|
1826
|
+
import * as React54 from "react";
|
|
1686
1827
|
import { StrokeControl } from "@elementor/editor-controls";
|
|
1687
|
-
import { __ as
|
|
1828
|
+
import { __ as __34 } from "@wordpress/i18n";
|
|
1688
1829
|
var initTextStroke = {
|
|
1689
1830
|
$$type: "stroke",
|
|
1690
1831
|
value: {
|
|
@@ -1710,24 +1851,24 @@ var TextStrokeField = () => {
|
|
|
1710
1851
|
setTextStroke(null);
|
|
1711
1852
|
};
|
|
1712
1853
|
const hasTextStroke = Boolean(textStroke);
|
|
1713
|
-
return /* @__PURE__ */
|
|
1854
|
+
return /* @__PURE__ */ React54.createElement(
|
|
1714
1855
|
AddOrRemoveContent,
|
|
1715
1856
|
{
|
|
1716
|
-
label:
|
|
1857
|
+
label: __34("Text Stroke", "elementor"),
|
|
1717
1858
|
isAdded: hasTextStroke,
|
|
1718
1859
|
onAdd: addTextStroke,
|
|
1719
1860
|
onRemove: removeTextStroke
|
|
1720
1861
|
},
|
|
1721
|
-
/* @__PURE__ */
|
|
1862
|
+
/* @__PURE__ */ React54.createElement(StylesField, { bind: "-webkit-text-stroke" }, /* @__PURE__ */ React54.createElement(StrokeControl, null))
|
|
1722
1863
|
);
|
|
1723
1864
|
};
|
|
1724
1865
|
|
|
1725
1866
|
// src/components/style-sections/typography-section/text-style-field.tsx
|
|
1726
|
-
import * as
|
|
1867
|
+
import * as React55 from "react";
|
|
1727
1868
|
import { ControlLabel as ControlLabel27 } from "@elementor/editor-controls";
|
|
1728
1869
|
import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from "@elementor/icons";
|
|
1729
1870
|
import { Grid as Grid22, ToggleButton as ToggleButtonBase, ToggleButtonGroup } from "@elementor/ui";
|
|
1730
|
-
import { __ as
|
|
1871
|
+
import { __ as __35 } from "@wordpress/i18n";
|
|
1731
1872
|
var buttonSize = "tiny";
|
|
1732
1873
|
var TextStyleField = () => {
|
|
1733
1874
|
const [fontStyle, setFontStyle] = useStylesField("font-style");
|
|
@@ -1751,7 +1892,7 @@ var TextStyleField = () => {
|
|
|
1751
1892
|
value: newValue
|
|
1752
1893
|
});
|
|
1753
1894
|
};
|
|
1754
|
-
return /* @__PURE__ */
|
|
1895
|
+
return /* @__PURE__ */ React55.createElement(Grid22, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(ControlLabel27, null, __35("Style", "elementor"))), /* @__PURE__ */ React55.createElement(Grid22, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React55.createElement(ToggleButtonGroup, { value: formats }, /* @__PURE__ */ React55.createElement(
|
|
1755
1896
|
ToggleButton,
|
|
1756
1897
|
{
|
|
1757
1898
|
value: "italic",
|
|
@@ -1759,8 +1900,8 @@ var TextStyleField = () => {
|
|
|
1759
1900
|
"aria-label": "italic",
|
|
1760
1901
|
sx: { marginLeft: "auto" }
|
|
1761
1902
|
},
|
|
1762
|
-
/* @__PURE__ */
|
|
1763
|
-
), /* @__PURE__ */
|
|
1903
|
+
/* @__PURE__ */ React55.createElement(ItalicIcon, { fontSize: buttonSize })
|
|
1904
|
+
), /* @__PURE__ */ React55.createElement(
|
|
1764
1905
|
ShorthandControl,
|
|
1765
1906
|
{
|
|
1766
1907
|
value: "line-through",
|
|
@@ -1768,8 +1909,8 @@ var TextStyleField = () => {
|
|
|
1768
1909
|
updateValues: handleSetTextDecoration,
|
|
1769
1910
|
"aria-label": "line-through"
|
|
1770
1911
|
},
|
|
1771
|
-
/* @__PURE__ */
|
|
1772
|
-
), /* @__PURE__ */
|
|
1912
|
+
/* @__PURE__ */ React55.createElement(StrikethroughIcon, { fontSize: buttonSize })
|
|
1913
|
+
), /* @__PURE__ */ React55.createElement(
|
|
1773
1914
|
ShorthandControl,
|
|
1774
1915
|
{
|
|
1775
1916
|
value: "underline",
|
|
@@ -1777,7 +1918,7 @@ var TextStyleField = () => {
|
|
|
1777
1918
|
updateValues: handleSetTextDecoration,
|
|
1778
1919
|
"aria-label": "underline"
|
|
1779
1920
|
},
|
|
1780
|
-
/* @__PURE__ */
|
|
1921
|
+
/* @__PURE__ */ React55.createElement(UnderlineIcon, { fontSize: buttonSize })
|
|
1781
1922
|
))));
|
|
1782
1923
|
};
|
|
1783
1924
|
var ShorthandControl = ({
|
|
@@ -1796,52 +1937,52 @@ var ShorthandControl = ({
|
|
|
1796
1937
|
updateValues([...valuesArr, newValue].join(" "));
|
|
1797
1938
|
}
|
|
1798
1939
|
};
|
|
1799
|
-
return /* @__PURE__ */
|
|
1940
|
+
return /* @__PURE__ */ React55.createElement(ToggleButton, { value, onChange: toggleValue, selected, "aria-label": ariaLabel }, children);
|
|
1800
1941
|
};
|
|
1801
1942
|
var ToggleButton = ({ onChange, ...props }) => {
|
|
1802
1943
|
const handleChange = (_e, newValue) => {
|
|
1803
1944
|
onChange(newValue);
|
|
1804
1945
|
};
|
|
1805
|
-
return /* @__PURE__ */
|
|
1946
|
+
return /* @__PURE__ */ React55.createElement(ToggleButtonBase, { ...props, onChange: handleChange, size: buttonSize });
|
|
1806
1947
|
};
|
|
1807
1948
|
|
|
1808
1949
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
1809
|
-
import * as
|
|
1950
|
+
import * as React56 from "react";
|
|
1810
1951
|
import { ControlLabel as ControlLabel28, ToggleControl as ToggleControl10 } from "@elementor/editor-controls";
|
|
1811
1952
|
import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from "@elementor/icons";
|
|
1812
1953
|
import { Grid as Grid23 } from "@elementor/ui";
|
|
1813
|
-
import { __ as
|
|
1954
|
+
import { __ as __36 } from "@wordpress/i18n";
|
|
1814
1955
|
var options9 = [
|
|
1815
1956
|
{
|
|
1816
1957
|
value: "capitalize",
|
|
1817
|
-
label:
|
|
1818
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1958
|
+
label: __36("Capitalize", "elementor"),
|
|
1959
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(LetterCaseIcon, { fontSize: size })
|
|
1819
1960
|
},
|
|
1820
1961
|
{
|
|
1821
1962
|
value: "uppercase",
|
|
1822
|
-
label:
|
|
1823
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1963
|
+
label: __36("Uppercase", "elementor"),
|
|
1964
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(LetterCaseUpperIcon, { fontSize: size })
|
|
1824
1965
|
},
|
|
1825
1966
|
{
|
|
1826
1967
|
value: "lowercase",
|
|
1827
|
-
label:
|
|
1828
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1968
|
+
label: __36("Lowercase", "elementor"),
|
|
1969
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(LetterCaseLowerIcon, { fontSize: size })
|
|
1829
1970
|
}
|
|
1830
1971
|
];
|
|
1831
|
-
var TransformField = () => /* @__PURE__ */
|
|
1972
|
+
var TransformField = () => /* @__PURE__ */ React56.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React56.createElement(Grid23, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(ControlLabel28, null, __36("Transform", "elementor"))), /* @__PURE__ */ React56.createElement(Grid23, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React56.createElement(ToggleControl10, { options: options9 }))));
|
|
1832
1973
|
|
|
1833
1974
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
1834
|
-
import * as
|
|
1975
|
+
import * as React57 from "react";
|
|
1835
1976
|
import { ControlLabel as ControlLabel29, SizeControl as SizeControl8 } from "@elementor/editor-controls";
|
|
1836
1977
|
import { Grid as Grid24 } from "@elementor/ui";
|
|
1837
|
-
import { __ as
|
|
1978
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
1838
1979
|
var WordSpacingField = () => {
|
|
1839
|
-
return /* @__PURE__ */
|
|
1980
|
+
return /* @__PURE__ */ React57.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React57.createElement(Grid24, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel29, null, __37("Word Spacing", "elementor"))), /* @__PURE__ */ React57.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(SizeControl8, null))));
|
|
1840
1981
|
};
|
|
1841
1982
|
|
|
1842
1983
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
1843
1984
|
var TypographySection = () => {
|
|
1844
|
-
return /* @__PURE__ */
|
|
1985
|
+
return /* @__PURE__ */ React58.createElement(Stack18, { gap: 1.5 }, /* @__PURE__ */ React58.createElement(FontFamilyField, null), /* @__PURE__ */ React58.createElement(FontWeightField, null), /* @__PURE__ */ React58.createElement(FontSizeField, null), /* @__PURE__ */ React58.createElement(Divider6, null), /* @__PURE__ */ React58.createElement(TextAlignmentField, null), /* @__PURE__ */ React58.createElement(TextColorField, null), /* @__PURE__ */ React58.createElement(CollapsibleContent, null, /* @__PURE__ */ React58.createElement(Stack18, { 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(Divider6, null), /* @__PURE__ */ React58.createElement(TextStyleField, null), /* @__PURE__ */ React58.createElement(TransformField, null), /* @__PURE__ */ React58.createElement(TextDirectionField, null), /* @__PURE__ */ React58.createElement(TextStrokeField, null))));
|
|
1845
1986
|
};
|
|
1846
1987
|
|
|
1847
1988
|
// src/components/style-tab.tsx
|
|
@@ -1849,8 +1990,23 @@ var CLASSES_PROP_KEY = "classes";
|
|
|
1849
1990
|
var StyleTab = () => {
|
|
1850
1991
|
const currentClassesProp = useCurrentClassesProp();
|
|
1851
1992
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
1993
|
+
const [activeStyleState, setActiveStyleState] = useState7(null);
|
|
1852
1994
|
const breakpoint = useActiveBreakpoint();
|
|
1853
|
-
return /* @__PURE__ */
|
|
1995
|
+
return /* @__PURE__ */ React59.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React59.createElement(
|
|
1996
|
+
StyleProvider,
|
|
1997
|
+
{
|
|
1998
|
+
meta: { breakpoint, state: activeStyleState },
|
|
1999
|
+
id: activeStyleDefId,
|
|
2000
|
+
setId: (id) => {
|
|
2001
|
+
setActiveStyleDefId(id);
|
|
2002
|
+
setActiveStyleState(null);
|
|
2003
|
+
},
|
|
2004
|
+
setMetaState: setActiveStyleState
|
|
2005
|
+
},
|
|
2006
|
+
/* @__PURE__ */ React59.createElement(CssClassSelector, null),
|
|
2007
|
+
/* @__PURE__ */ React59.createElement(Divider7, null),
|
|
2008
|
+
/* @__PURE__ */ React59.createElement(SectionsList, null, /* @__PURE__ */ React59.createElement(Section, { title: __38("Layout", "elementor") }, /* @__PURE__ */ React59.createElement(LayoutSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: __38("Spacing", "elementor") }, /* @__PURE__ */ React59.createElement(SpacingSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: __38("Size", "elementor") }, /* @__PURE__ */ React59.createElement(SizeSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: __38("Position", "elementor") }, /* @__PURE__ */ React59.createElement(PositionSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: __38("Typography", "elementor") }, /* @__PURE__ */ React59.createElement(TypographySection, null)), /* @__PURE__ */ React59.createElement(Section, { title: __38("Background", "elementor") }, /* @__PURE__ */ React59.createElement(BackgroundSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: __38("Border", "elementor") }, /* @__PURE__ */ React59.createElement(BorderSection, null)), /* @__PURE__ */ React59.createElement(Section, { title: __38("Effects", "elementor") }, /* @__PURE__ */ React59.createElement(EffectsSection, null)))
|
|
2009
|
+
));
|
|
1854
2010
|
};
|
|
1855
2011
|
function useActiveStyleDefId(currentClassesProp) {
|
|
1856
2012
|
const [activeStyledDefId, setActiveStyledDefId] = useState7(null);
|
|
@@ -1881,7 +2037,7 @@ var EditingPanelTabs = () => {
|
|
|
1881
2037
|
return (
|
|
1882
2038
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
1883
2039
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
1884
|
-
/* @__PURE__ */
|
|
2040
|
+
/* @__PURE__ */ React60.createElement(Fragment7, { key: element.id }, /* @__PURE__ */ React60.createElement(Stack19, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React60.createElement(Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React60.createElement(Tab, { label: __39("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React60.createElement(Tab, { label: __39("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React60.createElement(Divider8, null), /* @__PURE__ */ React60.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React60.createElement(SettingsTab, null)), /* @__PURE__ */ React60.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React60.createElement(StyleTab, null))))
|
|
1885
2041
|
);
|
|
1886
2042
|
};
|
|
1887
2043
|
|
|
@@ -1894,8 +2050,8 @@ var EditingPanel = () => {
|
|
|
1894
2050
|
if (!element || !elementType) {
|
|
1895
2051
|
return null;
|
|
1896
2052
|
}
|
|
1897
|
-
const panelTitle =
|
|
1898
|
-
return /* @__PURE__ */
|
|
2053
|
+
const panelTitle = __40("Edit %s", "elementor").replace("%s", elementType.title);
|
|
2054
|
+
return /* @__PURE__ */ React61.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React61.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React61.createElement(Panel, null, /* @__PURE__ */ React61.createElement(PanelHeader, null, /* @__PURE__ */ React61.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React61.createElement(PanelBody, null, /* @__PURE__ */ React61.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React61.createElement(ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React61.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React61.createElement(EditingPanelTabs, null)))))));
|
|
1899
2055
|
};
|
|
1900
2056
|
|
|
1901
2057
|
// src/panel.ts
|
|
@@ -1951,15 +2107,40 @@ var EditingPanelHooks = () => {
|
|
|
1951
2107
|
return null;
|
|
1952
2108
|
};
|
|
1953
2109
|
|
|
2110
|
+
// src/css-classes.ts
|
|
2111
|
+
var STATES = ["hover", "focus", "active"];
|
|
2112
|
+
function initCssClasses() {
|
|
2113
|
+
registerStateItems();
|
|
2114
|
+
registerGlobalClassItems();
|
|
2115
|
+
}
|
|
2116
|
+
function registerStateItems() {
|
|
2117
|
+
registerStateMenuItem({
|
|
2118
|
+
id: "normal",
|
|
2119
|
+
props: {
|
|
2120
|
+
state: null
|
|
2121
|
+
}
|
|
2122
|
+
});
|
|
2123
|
+
STATES.forEach((state) => {
|
|
2124
|
+
registerStateMenuItem({
|
|
2125
|
+
id: state,
|
|
2126
|
+
props: {
|
|
2127
|
+
state
|
|
2128
|
+
}
|
|
2129
|
+
});
|
|
2130
|
+
});
|
|
2131
|
+
}
|
|
2132
|
+
function registerGlobalClassItems() {
|
|
2133
|
+
}
|
|
2134
|
+
|
|
1954
2135
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
1955
|
-
import * as
|
|
1956
|
-
import { useId as
|
|
2136
|
+
import * as React64 from "react";
|
|
2137
|
+
import { useId as useId4 } from "react";
|
|
1957
2138
|
import { ControlLabel as ControlLabel30, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
|
|
1958
2139
|
import { DatabaseIcon, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
|
|
1959
2140
|
import {
|
|
1960
2141
|
bindPopover as bindPopover2,
|
|
1961
|
-
bindTrigger,
|
|
1962
|
-
Box as
|
|
2142
|
+
bindTrigger as bindTrigger2,
|
|
2143
|
+
Box as Box7,
|
|
1963
2144
|
Divider as Divider10,
|
|
1964
2145
|
IconButton as IconButton3,
|
|
1965
2146
|
Paper,
|
|
@@ -1970,10 +2151,10 @@ import {
|
|
|
1970
2151
|
Tabs as Tabs2,
|
|
1971
2152
|
Typography as Typography4,
|
|
1972
2153
|
UnstableTag as Tag,
|
|
1973
|
-
usePopupState as
|
|
2154
|
+
usePopupState as usePopupState3,
|
|
1974
2155
|
useTabs as useTabs2
|
|
1975
2156
|
} from "@elementor/ui";
|
|
1976
|
-
import { __ as
|
|
2157
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
1977
2158
|
|
|
1978
2159
|
// src/hooks/use-persist-dynamic-value.ts
|
|
1979
2160
|
var usePersistDynamicValue = (propKey) => {
|
|
@@ -1983,7 +2164,7 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
1983
2164
|
};
|
|
1984
2165
|
|
|
1985
2166
|
// src/dynamics/dynamic-control.tsx
|
|
1986
|
-
import * as
|
|
2167
|
+
import * as React62 from "react";
|
|
1987
2168
|
import { BoundPropProvider as BoundPropProvider3, useBoundProp } from "@elementor/editor-controls";
|
|
1988
2169
|
|
|
1989
2170
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
@@ -2083,27 +2264,27 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
2083
2264
|
}
|
|
2084
2265
|
});
|
|
2085
2266
|
};
|
|
2086
|
-
return /* @__PURE__ */
|
|
2267
|
+
return /* @__PURE__ */ React62.createElement(BoundPropProvider3, { setValue: setDynamicValue, value: dynamicValue, bind }, children);
|
|
2087
2268
|
};
|
|
2088
2269
|
|
|
2089
2270
|
// src/dynamics/components/dynamic-selection.tsx
|
|
2090
|
-
import * as
|
|
2271
|
+
import * as React63 from "react";
|
|
2091
2272
|
import { Fragment as Fragment8, useState as useState8 } from "react";
|
|
2092
2273
|
import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
|
|
2093
2274
|
import { PhotoIcon, SearchIcon } from "@elementor/icons";
|
|
2094
2275
|
import {
|
|
2095
|
-
Box as
|
|
2276
|
+
Box as Box6,
|
|
2096
2277
|
Divider as Divider9,
|
|
2097
2278
|
InputAdornment,
|
|
2098
2279
|
Link,
|
|
2099
|
-
ListSubheader,
|
|
2100
|
-
MenuItem,
|
|
2280
|
+
ListSubheader as ListSubheader2,
|
|
2281
|
+
MenuItem as MenuItem2,
|
|
2101
2282
|
MenuList,
|
|
2102
2283
|
Stack as Stack20,
|
|
2103
2284
|
TextField as TextField2,
|
|
2104
2285
|
Typography as Typography3
|
|
2105
2286
|
} from "@elementor/ui";
|
|
2106
|
-
import { __ as
|
|
2287
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
2107
2288
|
var SIZE3 = "tiny";
|
|
2108
2289
|
var DynamicSelection = ({ onSelect }) => {
|
|
2109
2290
|
const [searchValue, setSearchValue] = useState8("");
|
|
@@ -2123,22 +2304,22 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2123
2304
|
setValue({ name: value, settings: {} });
|
|
2124
2305
|
onSelect?.();
|
|
2125
2306
|
};
|
|
2126
|
-
return /* @__PURE__ */
|
|
2307
|
+
return /* @__PURE__ */ React63.createElement(Stack20, null, /* @__PURE__ */ React63.createElement(Box6, { px: 1.5, pb: 1 }, /* @__PURE__ */ React63.createElement(
|
|
2127
2308
|
TextField2,
|
|
2128
2309
|
{
|
|
2129
2310
|
fullWidth: true,
|
|
2130
2311
|
size: SIZE3,
|
|
2131
2312
|
value: searchValue,
|
|
2132
2313
|
onChange: handleSearch,
|
|
2133
|
-
placeholder:
|
|
2314
|
+
placeholder: __41("Search dynamic tag", "elementor"),
|
|
2134
2315
|
InputProps: {
|
|
2135
|
-
startAdornment: /* @__PURE__ */
|
|
2316
|
+
startAdornment: /* @__PURE__ */ React63.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React63.createElement(SearchIcon, { fontSize: SIZE3 }))
|
|
2136
2317
|
}
|
|
2137
2318
|
}
|
|
2138
|
-
)), /* @__PURE__ */
|
|
2319
|
+
)), /* @__PURE__ */ React63.createElement(Divider9, null), /* @__PURE__ */ React63.createElement(Box6, { sx: { overflowY: "auto", height: 260, width: 220 } }, options10.length > 0 ? /* @__PURE__ */ React63.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options10.map(([category, items3], index) => /* @__PURE__ */ React63.createElement(Fragment8, { key: index }, /* @__PURE__ */ React63.createElement(ListSubheader2, { sx: { typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items3.map(({ value, label: tagLabel }) => {
|
|
2139
2320
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
2140
|
-
return /* @__PURE__ */
|
|
2141
|
-
|
|
2321
|
+
return /* @__PURE__ */ React63.createElement(
|
|
2322
|
+
MenuItem2,
|
|
2142
2323
|
{
|
|
2143
2324
|
key: value,
|
|
2144
2325
|
selected: isSelected,
|
|
@@ -2148,7 +2329,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2148
2329
|
},
|
|
2149
2330
|
tagLabel
|
|
2150
2331
|
);
|
|
2151
|
-
})))) : /* @__PURE__ */
|
|
2332
|
+
})))) : /* @__PURE__ */ React63.createElement(Stack20, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React63.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React63.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __41("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React63.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React63.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React63.createElement(
|
|
2152
2333
|
Link,
|
|
2153
2334
|
{
|
|
2154
2335
|
color: "secondary",
|
|
@@ -2156,8 +2337,8 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
2156
2337
|
component: "button",
|
|
2157
2338
|
onClick: () => setSearchValue("")
|
|
2158
2339
|
},
|
|
2159
|
-
|
|
2160
|
-
), "\xA0",
|
|
2340
|
+
__41("Clear the filters", "elementor")
|
|
2341
|
+
), "\xA0", __41("and try again.", "elementor")))));
|
|
2161
2342
|
};
|
|
2162
2343
|
var useFilteredOptions = (bind, searchValue) => {
|
|
2163
2344
|
const dynamicTags = usePropDynamicTags(bind);
|
|
@@ -2182,8 +2363,8 @@ var DynamicSelectionControl = () => {
|
|
|
2182
2363
|
const { bind, value } = useBoundProp3(dynamicPropTypeUtil);
|
|
2183
2364
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
2184
2365
|
const { name: tagName = "" } = value;
|
|
2185
|
-
const selectionPopoverId =
|
|
2186
|
-
const selectionPopoverState =
|
|
2366
|
+
const selectionPopoverId = useId4();
|
|
2367
|
+
const selectionPopoverState = usePopupState3({ variant: "popover", popupId: selectionPopoverId });
|
|
2187
2368
|
const dynamicTag = useDynamicTag(bind, tagName);
|
|
2188
2369
|
const removeDynamicTag = () => {
|
|
2189
2370
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -2191,25 +2372,25 @@ var DynamicSelectionControl = () => {
|
|
|
2191
2372
|
if (!dynamicTag) {
|
|
2192
2373
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
2193
2374
|
}
|
|
2194
|
-
return /* @__PURE__ */
|
|
2375
|
+
return /* @__PURE__ */ React64.createElement(Box7, null, /* @__PURE__ */ React64.createElement(
|
|
2195
2376
|
Tag,
|
|
2196
2377
|
{
|
|
2197
2378
|
fullWidth: true,
|
|
2198
2379
|
showActionsOnHover: true,
|
|
2199
2380
|
label: dynamicTag.label,
|
|
2200
|
-
startIcon: /* @__PURE__ */
|
|
2201
|
-
...
|
|
2202
|
-
actions: /* @__PURE__ */
|
|
2381
|
+
startIcon: /* @__PURE__ */ React64.createElement(DatabaseIcon, { fontSize: SIZE4 }),
|
|
2382
|
+
...bindTrigger2(selectionPopoverState),
|
|
2383
|
+
actions: /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React64.createElement(
|
|
2203
2384
|
IconButton3,
|
|
2204
2385
|
{
|
|
2205
2386
|
size: SIZE4,
|
|
2206
2387
|
onClick: removeDynamicTag,
|
|
2207
|
-
"aria-label":
|
|
2388
|
+
"aria-label": __42("Remove dynamic value", "elementor")
|
|
2208
2389
|
},
|
|
2209
|
-
/* @__PURE__ */
|
|
2390
|
+
/* @__PURE__ */ React64.createElement(XIcon2, { fontSize: SIZE4 })
|
|
2210
2391
|
))
|
|
2211
2392
|
}
|
|
2212
|
-
), /* @__PURE__ */
|
|
2393
|
+
), /* @__PURE__ */ React64.createElement(
|
|
2213
2394
|
Popover2,
|
|
2214
2395
|
{
|
|
2215
2396
|
disablePortal: true,
|
|
@@ -2217,32 +2398,32 @@ var DynamicSelectionControl = () => {
|
|
|
2217
2398
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
2218
2399
|
...bindPopover2(selectionPopoverState)
|
|
2219
2400
|
},
|
|
2220
|
-
/* @__PURE__ */
|
|
2401
|
+
/* @__PURE__ */ React64.createElement(Stack21, null, /* @__PURE__ */ React64.createElement(Stack21, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React64.createElement(DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React64.createElement(Typography4, { variant: "subtitle2" }, __42("Dynamic Tags", "elementor")), /* @__PURE__ */ React64.createElement(IconButton3, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React64.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React64.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
2221
2402
|
));
|
|
2222
2403
|
};
|
|
2223
2404
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
2224
|
-
const popupId =
|
|
2225
|
-
const settingsPopupState =
|
|
2405
|
+
const popupId = useId4();
|
|
2406
|
+
const settingsPopupState = usePopupState3({ variant: "popover", popupId });
|
|
2226
2407
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
2227
2408
|
if (!hasDynamicSettings) {
|
|
2228
2409
|
return null;
|
|
2229
2410
|
}
|
|
2230
|
-
return /* @__PURE__ */
|
|
2411
|
+
return /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement(
|
|
2231
2412
|
IconButton3,
|
|
2232
2413
|
{
|
|
2233
2414
|
size: SIZE4,
|
|
2234
|
-
...
|
|
2235
|
-
"aria-label":
|
|
2415
|
+
...bindTrigger2(settingsPopupState),
|
|
2416
|
+
"aria-label": __42("Settings", "elementor")
|
|
2236
2417
|
},
|
|
2237
|
-
/* @__PURE__ */
|
|
2238
|
-
), /* @__PURE__ */
|
|
2418
|
+
/* @__PURE__ */ React64.createElement(SettingsIcon, { fontSize: SIZE4 })
|
|
2419
|
+
), /* @__PURE__ */ React64.createElement(
|
|
2239
2420
|
Popover2,
|
|
2240
2421
|
{
|
|
2241
2422
|
disableScrollLock: true,
|
|
2242
2423
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
2243
2424
|
...bindPopover2(settingsPopupState)
|
|
2244
2425
|
},
|
|
2245
|
-
/* @__PURE__ */
|
|
2426
|
+
/* @__PURE__ */ React64.createElement(Paper, { component: Stack21, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React64.createElement(Stack21, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React64.createElement(DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React64.createElement(Typography4, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React64.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React64.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React64.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
2246
2427
|
));
|
|
2247
2428
|
};
|
|
2248
2429
|
var DynamicSettings = ({ controls }) => {
|
|
@@ -2251,10 +2432,10 @@ var DynamicSettings = ({ controls }) => {
|
|
|
2251
2432
|
if (!tabs.length) {
|
|
2252
2433
|
return null;
|
|
2253
2434
|
}
|
|
2254
|
-
return /* @__PURE__ */
|
|
2255
|
-
return /* @__PURE__ */
|
|
2435
|
+
return /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement(Tabs2, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React64.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React64.createElement(Divider10, null), tabs.map(({ value }, index) => {
|
|
2436
|
+
return /* @__PURE__ */ React64.createElement(TabPanel2, { key: index, sx: { flexGrow: 1 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React64.createElement(Stack21, { gap: 1, px: 2 }, value.items.map((item) => {
|
|
2256
2437
|
if (item.type === "control") {
|
|
2257
|
-
return /* @__PURE__ */
|
|
2438
|
+
return /* @__PURE__ */ React64.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
2258
2439
|
}
|
|
2259
2440
|
return null;
|
|
2260
2441
|
})));
|
|
@@ -2264,14 +2445,14 @@ var Control3 = ({ control }) => {
|
|
|
2264
2445
|
if (!getControlByType(control.type)) {
|
|
2265
2446
|
return null;
|
|
2266
2447
|
}
|
|
2267
|
-
return /* @__PURE__ */
|
|
2448
|
+
return /* @__PURE__ */ React64.createElement(DynamicControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React64.createElement(ControlLabel30, null, control.label) : null, /* @__PURE__ */ React64.createElement(Control, { type: control.type, props: control.props }));
|
|
2268
2449
|
};
|
|
2269
2450
|
|
|
2270
2451
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
2271
|
-
import * as
|
|
2452
|
+
import * as React65 from "react";
|
|
2272
2453
|
import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
|
|
2273
2454
|
import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
|
|
2274
|
-
import { __ as
|
|
2455
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
2275
2456
|
var usePropDynamicAction = () => {
|
|
2276
2457
|
const { bind } = useBoundProp4();
|
|
2277
2458
|
const { elementType } = useElement();
|
|
@@ -2280,8 +2461,8 @@ var usePropDynamicAction = () => {
|
|
|
2280
2461
|
return {
|
|
2281
2462
|
visible,
|
|
2282
2463
|
icon: DatabaseIcon2,
|
|
2283
|
-
title:
|
|
2284
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
2464
|
+
title: __43("Dynamic Tags", "elementor"),
|
|
2465
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React65.createElement(DynamicSelection, { onSelect: closePopover })
|
|
2285
2466
|
};
|
|
2286
2467
|
};
|
|
2287
2468
|
|
|
@@ -2307,6 +2488,7 @@ function init2() {
|
|
|
2307
2488
|
component: EditingPanelHooks
|
|
2308
2489
|
});
|
|
2309
2490
|
init();
|
|
2491
|
+
initCssClasses();
|
|
2310
2492
|
}
|
|
2311
2493
|
var blockV1Panel = () => {
|
|
2312
2494
|
blockDataCommand({
|
|
@@ -2318,6 +2500,8 @@ var blockV1Panel = () => {
|
|
|
2318
2500
|
// src/index.ts
|
|
2319
2501
|
init2();
|
|
2320
2502
|
export {
|
|
2503
|
+
registerGlobalClassMenuItem,
|
|
2504
|
+
registerStateMenuItem,
|
|
2321
2505
|
replaceControl,
|
|
2322
2506
|
useBoundProp5 as useBoundProp
|
|
2323
2507
|
};
|