@elementor/editor-editing-panel 0.18.0 → 0.19.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 +13 -0
- package/dist/index.d.mts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +381 -330
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +291 -240
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/editing-panel-error-fallback.tsx +12 -0
- package/src/components/editing-panel.tsx +23 -12
- package/src/components/settings-tab.tsx +3 -3
- package/src/components/style-sections/background-section/background-color-control.tsx +20 -0
- package/src/components/style-sections/background-section/background-section.tsx +15 -0
- package/src/components/style-sections/effects-section/box-shadow-repeater.tsx +1 -1
- package/src/components/style-sections/spacing-section/linked-dimensions-control.tsx +1 -1
- package/src/components/style-sections/typography-section/text-alignment-control.tsx +1 -1
- package/src/components/style-sections/typography-section/text-direction-control.tsx +1 -1
- package/src/components/style-sections/typography-section/text-style-control.tsx +1 -1
- package/src/components/style-sections/typography-section/transform-control.tsx +1 -1
- package/src/components/style-tab.tsx +5 -3
- package/src/control-replacement.tsx +3 -0
- package/src/controls/components/text-field-inner-selection.tsx +2 -2
- package/src/controls/control-context.tsx +1 -1
- package/src/controls/control-replacement.ts +1 -1
- package/src/controls/control-types/color-control.tsx +1 -1
- package/src/controls/control-types/image-control.tsx +1 -1
- package/src/controls/control-types/image-media-control.tsx +2 -2
- package/src/controls/control-types/select-control.tsx +1 -1
- package/src/controls/control-types/size-control.tsx +1 -1
- package/src/controls/control-types/toggle-control.tsx +1 -1
- package/src/controls/create-control-replacement.tsx +53 -0
- package/src/controls/create-control.tsx +12 -3
- package/src/controls/hooks/use-style-control.ts +3 -3
- package/src/{hooks → controls/hooks}/use-widget-settings.ts +1 -1
- package/src/{props → controls/props}/is-transformable.ts +1 -2
- package/src/{types.ts → controls/props/types.ts} +0 -38
- package/src/{contexts/element-context.tsx → controls/providers/element-provider.tsx} +4 -4
- package/src/controls/settings-control.tsx +5 -5
- package/src/controls/style-control.tsx +1 -1
- package/src/{sync → controls/sync}/get-container.ts +1 -1
- package/src/{sync → controls/sync}/update-settings.ts +1 -1
- package/src/controls/types.ts +39 -0
- package/src/dynamics/components/dynamic-selection-control.tsx +1 -1
- package/src/dynamics/components/dynamic-selection.tsx +5 -5
- package/src/dynamics/dynamic-control.tsx +1 -1
- package/src/dynamics/hooks/use-dynamic-tag.ts +2 -2
- package/src/dynamics/hooks/use-prop-dynamic-action.tsx +2 -2
- package/src/dynamics/hooks/use-prop-dynamic-tags.ts +3 -3
- package/src/dynamics/hooks/use-prop-value-history.ts +3 -3
- package/src/dynamics/init.ts +1 -1
- package/src/dynamics/types.ts +2 -1
- package/src/dynamics/utils.ts +2 -2
- package/src/hooks/use-element-style-prop.ts +3 -2
- package/src/hooks/use-element-styles.ts +1 -1
- package/src/hooks/use-element-type.ts +1 -1
- package/src/index.ts +1 -1
- package/src/sync/get-element-styles.ts +2 -2
- package/src/sync/get-selected-elements.ts +1 -1
- package/src/sync/types.ts +2 -1
- package/src/sync/update-style.ts +3 -2
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
// src/controls/create-control-replacement.tsx
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { createContext as createContext2, useContext as useContext2 } from "react";
|
|
4
|
+
|
|
1
5
|
// src/controls/control-context.tsx
|
|
2
6
|
import { createContext, useContext } from "react";
|
|
3
7
|
var ControlContext = createContext(null);
|
|
@@ -9,26 +13,41 @@ function useControl(defaultValue) {
|
|
|
9
13
|
return { ...controlContext, value: controlContext.value ?? defaultValue };
|
|
10
14
|
}
|
|
11
15
|
|
|
12
|
-
// src/controls/control-replacement.
|
|
13
|
-
var
|
|
14
|
-
var
|
|
16
|
+
// src/controls/create-control-replacement.tsx
|
|
17
|
+
var ControlReplacementContext = createContext2(void 0);
|
|
18
|
+
var ControlReplacementProvider = ({
|
|
19
|
+
component,
|
|
20
|
+
condition,
|
|
21
|
+
children
|
|
22
|
+
}) => {
|
|
23
|
+
return /* @__PURE__ */ React.createElement(ControlReplacementContext.Provider, { value: { component, condition } }, children);
|
|
24
|
+
};
|
|
25
|
+
var useControlReplacement = () => {
|
|
26
|
+
const { value } = useControl();
|
|
27
|
+
const controlReplacement = useContext2(ControlReplacementContext);
|
|
15
28
|
let shouldReplace = false;
|
|
16
29
|
try {
|
|
17
|
-
shouldReplace = !!controlReplacement?.condition({ value }) && !!controlReplacement
|
|
30
|
+
shouldReplace = !!controlReplacement?.condition({ value }) && !!controlReplacement.component;
|
|
18
31
|
} catch {
|
|
19
32
|
}
|
|
20
33
|
return shouldReplace ? controlReplacement?.component : void 0;
|
|
21
34
|
};
|
|
22
|
-
|
|
23
|
-
controlReplacement
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
35
|
+
var createControlReplacement = () => {
|
|
36
|
+
let controlReplacement;
|
|
37
|
+
function replaceControl2({ component, condition }) {
|
|
38
|
+
controlReplacement = { component, condition };
|
|
39
|
+
}
|
|
40
|
+
function getControlReplacement2() {
|
|
41
|
+
return controlReplacement;
|
|
42
|
+
}
|
|
43
|
+
return { replaceControl: replaceControl2, getControlReplacement: getControlReplacement2 };
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
// src/control-replacement.tsx
|
|
47
|
+
var { replaceControl, getControlReplacement } = createControlReplacement();
|
|
29
48
|
|
|
30
49
|
// src/controls/control-actions/actions/popover-action.tsx
|
|
31
|
-
import * as
|
|
50
|
+
import * as React2 from "react";
|
|
32
51
|
import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from "@elementor/ui";
|
|
33
52
|
import { useId } from "react";
|
|
34
53
|
import { XIcon } from "@elementor/icons";
|
|
@@ -47,7 +66,7 @@ function PopoverAction({
|
|
|
47
66
|
if (!visible) {
|
|
48
67
|
return null;
|
|
49
68
|
}
|
|
50
|
-
return /* @__PURE__ */
|
|
69
|
+
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Tooltip, { placement: "top", title }, /* @__PURE__ */ React2.createElement(IconButton, { "aria-label": title, key: id, size: SIZE, ...bindToggle(popupState) }, /* @__PURE__ */ React2.createElement(Icon, { fontSize: SIZE }))), /* @__PURE__ */ React2.createElement(
|
|
51
70
|
Popover,
|
|
52
71
|
{
|
|
53
72
|
disablePortal: true,
|
|
@@ -58,8 +77,8 @@ function PopoverAction({
|
|
|
58
77
|
},
|
|
59
78
|
...bindPopover(popupState)
|
|
60
79
|
},
|
|
61
|
-
/* @__PURE__ */
|
|
62
|
-
/* @__PURE__ */
|
|
80
|
+
/* @__PURE__ */ React2.createElement(Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React2.createElement(Icon, { fontSize: SIZE, sx: { mr: 0.5 } }), /* @__PURE__ */ React2.createElement(Typography, { variant: "subtitle2" }, title), /* @__PURE__ */ React2.createElement(IconButton, { sx: { ml: "auto" }, size: SIZE, onClick: popupState.close }, /* @__PURE__ */ React2.createElement(XIcon, { fontSize: SIZE }))),
|
|
81
|
+
/* @__PURE__ */ React2.createElement(PopoverContent, { closePopover: popupState.close })
|
|
63
82
|
));
|
|
64
83
|
}
|
|
65
84
|
|
|
@@ -75,8 +94,8 @@ var controlActionsMenu = createMenu({
|
|
|
75
94
|
import { __createPanel as createPanel } from "@elementor/editor-panels";
|
|
76
95
|
|
|
77
96
|
// src/components/editing-panel.tsx
|
|
78
|
-
import * as
|
|
79
|
-
import { __ as
|
|
97
|
+
import * as React49 from "react";
|
|
98
|
+
import { __ as __25 } from "@wordpress/i18n";
|
|
80
99
|
|
|
81
100
|
// src/hooks/use-selected-elements.ts
|
|
82
101
|
import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
|
|
@@ -105,6 +124,24 @@ function useSelectedElements() {
|
|
|
105
124
|
);
|
|
106
125
|
}
|
|
107
126
|
|
|
127
|
+
// src/components/editing-panel.tsx
|
|
128
|
+
import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
|
|
129
|
+
|
|
130
|
+
// src/controls/providers/element-provider.tsx
|
|
131
|
+
import * as React3 from "react";
|
|
132
|
+
import { createContext as createContext3, useContext as useContext3 } from "react";
|
|
133
|
+
var Context = createContext3(null);
|
|
134
|
+
function ElementProvider({ children, element, elementType }) {
|
|
135
|
+
return /* @__PURE__ */ React3.createElement(Context.Provider, { value: { element, elementType } }, children);
|
|
136
|
+
}
|
|
137
|
+
function useElement() {
|
|
138
|
+
const context = useContext3(Context);
|
|
139
|
+
if (!context) {
|
|
140
|
+
throw new Error("useElement must be used within a ElementProvider");
|
|
141
|
+
}
|
|
142
|
+
return context;
|
|
143
|
+
}
|
|
144
|
+
|
|
108
145
|
// src/hooks/use-element-type.ts
|
|
109
146
|
import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
|
|
110
147
|
|
|
@@ -141,47 +178,29 @@ function useElementType(type) {
|
|
|
141
178
|
);
|
|
142
179
|
}
|
|
143
180
|
|
|
144
|
-
// src/components/editing-panel.tsx
|
|
145
|
-
import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
|
|
146
|
-
|
|
147
|
-
// src/contexts/element-context.tsx
|
|
148
|
-
import * as React2 from "react";
|
|
149
|
-
import { createContext as createContext2, useContext as useContext2 } from "react";
|
|
150
|
-
var Context = createContext2(null);
|
|
151
|
-
function ElementContext({ children, element, elementType }) {
|
|
152
|
-
return /* @__PURE__ */ React2.createElement(Context.Provider, { value: { element, elementType } }, children);
|
|
153
|
-
}
|
|
154
|
-
function useElementContext() {
|
|
155
|
-
const context = useContext2(Context);
|
|
156
|
-
if (!context) {
|
|
157
|
-
throw new Error("useElementContext must be used within a ElementContextProvider");
|
|
158
|
-
}
|
|
159
|
-
return context;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
181
|
// src/components/editing-panel-tabs.tsx
|
|
163
|
-
import { Stack as
|
|
164
|
-
import * as
|
|
165
|
-
import { __ as
|
|
182
|
+
import { Stack as Stack17, Tabs, Tab, TabPanel, useTabs } from "@elementor/ui";
|
|
183
|
+
import * as React47 from "react";
|
|
184
|
+
import { __ as __24 } from "@wordpress/i18n";
|
|
166
185
|
|
|
167
186
|
// src/components/settings-tab.tsx
|
|
168
|
-
import * as
|
|
187
|
+
import * as React18 from "react";
|
|
169
188
|
import { Stack as Stack5 } from "@elementor/ui";
|
|
170
189
|
|
|
171
190
|
// src/controls/settings-control.tsx
|
|
172
|
-
import * as
|
|
191
|
+
import * as React5 from "react";
|
|
173
192
|
|
|
174
|
-
// src/hooks/use-widget-settings.ts
|
|
193
|
+
// src/controls/hooks/use-widget-settings.ts
|
|
175
194
|
import { commandEndEvent as commandEndEvent3, __privateUseListenTo as useListenTo3 } from "@elementor/editor-v1-adapters";
|
|
176
195
|
|
|
177
|
-
// src/sync/get-container.ts
|
|
196
|
+
// src/controls/sync/get-container.ts
|
|
178
197
|
function getContainer(id) {
|
|
179
198
|
const extendedWindow = window;
|
|
180
199
|
const container = extendedWindow.elementor?.getContainer?.(id);
|
|
181
200
|
return container ?? null;
|
|
182
201
|
}
|
|
183
202
|
|
|
184
|
-
// src/hooks/use-widget-settings.ts
|
|
203
|
+
// src/controls/hooks/use-widget-settings.ts
|
|
185
204
|
var useWidgetSettings = ({ id, bind }) => {
|
|
186
205
|
return useListenTo3(
|
|
187
206
|
commandEndEvent3("document/elements/settings"),
|
|
@@ -194,7 +213,7 @@ var useWidgetSettings = ({ id, bind }) => {
|
|
|
194
213
|
);
|
|
195
214
|
};
|
|
196
215
|
|
|
197
|
-
// src/sync/update-settings.ts
|
|
216
|
+
// src/controls/sync/update-settings.ts
|
|
198
217
|
import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
|
|
199
218
|
var updateSettings = ({ id, props }) => {
|
|
200
219
|
const container = getContainer(id);
|
|
@@ -207,15 +226,15 @@ var updateSettings = ({ id, props }) => {
|
|
|
207
226
|
};
|
|
208
227
|
|
|
209
228
|
// src/components/control-label.tsx
|
|
210
|
-
import * as
|
|
229
|
+
import * as React4 from "react";
|
|
211
230
|
import { Typography as Typography2 } from "@elementor/ui";
|
|
212
231
|
var ControlLabel = ({ children }) => {
|
|
213
|
-
return /* @__PURE__ */
|
|
232
|
+
return /* @__PURE__ */ React4.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary" }, children);
|
|
214
233
|
};
|
|
215
234
|
|
|
216
235
|
// src/controls/settings-control.tsx
|
|
217
236
|
var SettingsControl = ({ bind, children }) => {
|
|
218
|
-
const { element, elementType } =
|
|
237
|
+
const { element, elementType } = useElement();
|
|
219
238
|
const defaultValue = elementType.propsSchema[bind]?.default;
|
|
220
239
|
const settingsValue = useWidgetSettings({ id: element.id, bind });
|
|
221
240
|
const value = settingsValue ?? defaultValue ?? null;
|
|
@@ -227,39 +246,39 @@ var SettingsControl = ({ bind, children }) => {
|
|
|
227
246
|
}
|
|
228
247
|
});
|
|
229
248
|
};
|
|
230
|
-
return /* @__PURE__ */
|
|
249
|
+
return /* @__PURE__ */ React5.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
|
|
231
250
|
};
|
|
232
251
|
SettingsControl.Label = ControlLabel;
|
|
233
252
|
|
|
234
253
|
// src/components/accordion-section.tsx
|
|
235
|
-
import * as
|
|
254
|
+
import * as React6 from "react";
|
|
236
255
|
import { useId as useId2 } from "react";
|
|
237
256
|
import { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack as Stack2 } from "@elementor/ui";
|
|
238
257
|
var AccordionSection = ({ title, children }) => {
|
|
239
258
|
const uid = useId2();
|
|
240
259
|
const labelId = `label-${uid}`;
|
|
241
260
|
const contentId = `content-${uid}`;
|
|
242
|
-
return /* @__PURE__ */
|
|
261
|
+
return /* @__PURE__ */ React6.createElement(Accordion, { disableGutters: true, defaultExpanded: true }, /* @__PURE__ */ React6.createElement(AccordionSummary, { "aria-controls": contentId, id: labelId }, /* @__PURE__ */ React6.createElement(AccordionSummaryText, { primaryTypographyProps: { variant: "caption" } }, title)), /* @__PURE__ */ React6.createElement(AccordionDetails, { id: contentId, "aria-labelledby": labelId }, /* @__PURE__ */ React6.createElement(Stack2, { gap: 2.5 }, children)));
|
|
243
262
|
};
|
|
244
263
|
|
|
245
264
|
// src/controls/control.tsx
|
|
246
|
-
import * as
|
|
265
|
+
import * as React16 from "react";
|
|
247
266
|
import { createError } from "@elementor/utils";
|
|
248
267
|
|
|
249
268
|
// src/controls/control-types/image-control.tsx
|
|
250
|
-
import * as
|
|
269
|
+
import * as React11 from "react";
|
|
251
270
|
import { Grid, Stack as Stack4 } from "@elementor/ui";
|
|
252
271
|
import { __ as __2 } from "@wordpress/i18n";
|
|
253
272
|
|
|
254
273
|
// src/controls/control-types/image-media-control.tsx
|
|
255
|
-
import * as
|
|
274
|
+
import * as React9 from "react";
|
|
256
275
|
import { Button, Card, CardMedia, CardOverlay, Stack as Stack3 } from "@elementor/ui";
|
|
257
276
|
import { UploadIcon } from "@elementor/icons";
|
|
258
277
|
import { useWpMediaAttachment, useWpMediaFrame } from "@elementor/wp-media";
|
|
259
278
|
import { __ } from "@wordpress/i18n";
|
|
260
279
|
|
|
261
280
|
// src/controls/control-actions/control-actions.tsx
|
|
262
|
-
import * as
|
|
281
|
+
import * as React7 from "react";
|
|
263
282
|
import { styled, UnstableFloatingActionBar } from "@elementor/ui";
|
|
264
283
|
var { useMenuItems } = controlActionsMenu;
|
|
265
284
|
var FloatingBar = styled(UnstableFloatingActionBar)`
|
|
@@ -278,10 +297,10 @@ function ControlActions({ fullWidth = false, children }) {
|
|
|
278
297
|
if (items.length === 0) {
|
|
279
298
|
return children;
|
|
280
299
|
}
|
|
281
|
-
return /* @__PURE__ */
|
|
300
|
+
return /* @__PURE__ */ React7.createElement(
|
|
282
301
|
FloatingBar,
|
|
283
302
|
{
|
|
284
|
-
actions: items.map(({ MenuItem: MenuItem4, id }) => /* @__PURE__ */
|
|
303
|
+
actions: items.map(({ MenuItem: MenuItem4, id }) => /* @__PURE__ */ React7.createElement(MenuItem4, { key: id })),
|
|
285
304
|
sx: fullWidth ? { width: "100%" } : void 0
|
|
286
305
|
},
|
|
287
306
|
children
|
|
@@ -289,15 +308,16 @@ function ControlActions({ fullWidth = false, children }) {
|
|
|
289
308
|
}
|
|
290
309
|
|
|
291
310
|
// src/controls/create-control.tsx
|
|
292
|
-
import * as
|
|
311
|
+
import * as React8 from "react";
|
|
312
|
+
import { ErrorBoundary } from "@elementor/ui";
|
|
293
313
|
var brandSymbol = Symbol("control");
|
|
294
314
|
function createControl(Component, { supportsReplacements = true } = {}) {
|
|
295
315
|
return (props) => {
|
|
296
316
|
const ControlReplacement = useControlReplacement();
|
|
297
317
|
if (ControlReplacement && supportsReplacements) {
|
|
298
|
-
return /* @__PURE__ */
|
|
318
|
+
return /* @__PURE__ */ React8.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React8.createElement(ControlReplacement, { ...props }));
|
|
299
319
|
}
|
|
300
|
-
return /* @__PURE__ */
|
|
320
|
+
return /* @__PURE__ */ React8.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React8.createElement(Component, { ...props }));
|
|
301
321
|
};
|
|
302
322
|
}
|
|
303
323
|
|
|
@@ -324,7 +344,7 @@ var ImageMediaControl = createControl(() => {
|
|
|
324
344
|
});
|
|
325
345
|
}
|
|
326
346
|
});
|
|
327
|
-
return /* @__PURE__ */
|
|
347
|
+
return /* @__PURE__ */ React9.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React9.createElement(CardMedia, { image: src, sx: { height: 150 } }), /* @__PURE__ */ React9.createElement(CardOverlay, null, /* @__PURE__ */ React9.createElement(ControlActions, null, /* @__PURE__ */ React9.createElement(Stack3, { gap: 0.5 }, /* @__PURE__ */ React9.createElement(
|
|
328
348
|
Button,
|
|
329
349
|
{
|
|
330
350
|
size: "tiny",
|
|
@@ -333,13 +353,13 @@ var ImageMediaControl = createControl(() => {
|
|
|
333
353
|
onClick: () => open({ mode: "browse" })
|
|
334
354
|
},
|
|
335
355
|
__("Select Image", "elementor")
|
|
336
|
-
), /* @__PURE__ */
|
|
356
|
+
), /* @__PURE__ */ React9.createElement(
|
|
337
357
|
Button,
|
|
338
358
|
{
|
|
339
359
|
size: "tiny",
|
|
340
360
|
variant: "text",
|
|
341
361
|
color: "inherit",
|
|
342
|
-
startIcon: /* @__PURE__ */
|
|
362
|
+
startIcon: /* @__PURE__ */ React9.createElement(UploadIcon, null),
|
|
343
363
|
onClick: () => open({ mode: "upload" })
|
|
344
364
|
},
|
|
345
365
|
__("Upload Image", "elementor")
|
|
@@ -347,14 +367,14 @@ var ImageMediaControl = createControl(() => {
|
|
|
347
367
|
});
|
|
348
368
|
|
|
349
369
|
// src/controls/control-types/select-control.tsx
|
|
350
|
-
import * as
|
|
370
|
+
import * as React10 from "react";
|
|
351
371
|
import { MenuItem, Select } from "@elementor/ui";
|
|
352
372
|
var SelectControl = createControl(({ options: options4 }) => {
|
|
353
373
|
const { value, setValue } = useControl();
|
|
354
374
|
const handleChange = (event) => {
|
|
355
375
|
setValue(event.target.value);
|
|
356
376
|
};
|
|
357
|
-
return /* @__PURE__ */
|
|
377
|
+
return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options4.map(({ label, ...props }) => /* @__PURE__ */ React10.createElement(MenuItem, { key: props.value, ...props }, label))));
|
|
358
378
|
});
|
|
359
379
|
|
|
360
380
|
// src/controls/control-types/image-control.tsx
|
|
@@ -379,27 +399,27 @@ var ImageControl = createControl((props) => {
|
|
|
379
399
|
}
|
|
380
400
|
});
|
|
381
401
|
};
|
|
382
|
-
return /* @__PURE__ */
|
|
402
|
+
return /* @__PURE__ */ React11.createElement(Stack4, { gap: 2 }, /* @__PURE__ */ React11.createElement(ControlContext.Provider, { value: { setValue: setImageSrc, value: src, bind: "src" } }, /* @__PURE__ */ React11.createElement(ImageMediaControl, null)), /* @__PURE__ */ React11.createElement(ControlContext.Provider, { value: { setValue: setImageSize, value: size, bind: "size" } }, /* @__PURE__ */ React11.createElement(Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React11.createElement(SettingsControl.Label, null, " ", __2("Image Resolution", "elementor"))), /* @__PURE__ */ React11.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React11.createElement(SelectControl, { options: props.sizes })))));
|
|
383
403
|
});
|
|
384
404
|
|
|
385
405
|
// src/controls/control-types/text-control.tsx
|
|
386
|
-
import * as
|
|
406
|
+
import * as React12 from "react";
|
|
387
407
|
import { TextField } from "@elementor/ui";
|
|
388
408
|
var TextControl = createControl(({ placeholder }) => {
|
|
389
409
|
const { value, setValue } = useControl("");
|
|
390
410
|
const handleChange = (event) => setValue(event.target.value);
|
|
391
|
-
return /* @__PURE__ */
|
|
411
|
+
return /* @__PURE__ */ React12.createElement(ControlActions, { fullWidth: true }, /* @__PURE__ */ React12.createElement(TextField, { type: "text", size: "tiny", value, onChange: handleChange, placeholder }));
|
|
392
412
|
});
|
|
393
413
|
|
|
394
414
|
// src/controls/control-types/text-area-control.tsx
|
|
395
|
-
import * as
|
|
415
|
+
import * as React13 from "react";
|
|
396
416
|
import { TextField as TextField2 } from "@elementor/ui";
|
|
397
417
|
var TextAreaControl = createControl(({ placeholder }) => {
|
|
398
418
|
const { value, setValue } = useControl();
|
|
399
419
|
const handleChange = (event) => {
|
|
400
420
|
setValue(event.target.value);
|
|
401
421
|
};
|
|
402
|
-
return /* @__PURE__ */
|
|
422
|
+
return /* @__PURE__ */ React13.createElement(ControlActions, { fullWidth: true }, /* @__PURE__ */ React13.createElement(
|
|
403
423
|
TextField2,
|
|
404
424
|
{
|
|
405
425
|
size: "tiny",
|
|
@@ -414,7 +434,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
|
|
|
414
434
|
});
|
|
415
435
|
|
|
416
436
|
// src/controls/control-types/size-control.tsx
|
|
417
|
-
import * as
|
|
437
|
+
import * as React15 from "react";
|
|
418
438
|
import { InputAdornment as InputAdornment2 } from "@elementor/ui";
|
|
419
439
|
|
|
420
440
|
// src/controls/hooks/use-sync-external-state.tsx
|
|
@@ -451,9 +471,9 @@ var useSyncExternalState = ({
|
|
|
451
471
|
};
|
|
452
472
|
|
|
453
473
|
// src/controls/components/text-field-inner-selection.tsx
|
|
454
|
-
import * as
|
|
455
|
-
import { bindMenu, bindTrigger, Button as Button2, InputAdornment, Menu, MenuItem as MenuItem2, TextField as TextField3, usePopupState as usePopupState2 } from "@elementor/ui";
|
|
474
|
+
import * as React14 from "react";
|
|
456
475
|
import { useId as useId3 } from "react";
|
|
476
|
+
import { bindMenu, bindTrigger, Button as Button2, InputAdornment, Menu, MenuItem as MenuItem2, TextField as TextField3, usePopupState as usePopupState2 } from "@elementor/ui";
|
|
457
477
|
var TextFieldInnerSelection = ({
|
|
458
478
|
placeholder,
|
|
459
479
|
type,
|
|
@@ -462,7 +482,7 @@ var TextFieldInnerSelection = ({
|
|
|
462
482
|
endAdornment,
|
|
463
483
|
startAdornment
|
|
464
484
|
}) => {
|
|
465
|
-
return /* @__PURE__ */
|
|
485
|
+
return /* @__PURE__ */ React14.createElement(
|
|
466
486
|
TextField3,
|
|
467
487
|
{
|
|
468
488
|
size: "tiny",
|
|
@@ -490,7 +510,7 @@ var SelectionEndAdornment = ({
|
|
|
490
510
|
onClick(options4[index]);
|
|
491
511
|
popupState.close();
|
|
492
512
|
};
|
|
493
|
-
return /* @__PURE__ */
|
|
513
|
+
return /* @__PURE__ */ React14.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React14.createElement(
|
|
494
514
|
Button2,
|
|
495
515
|
{
|
|
496
516
|
size: "small",
|
|
@@ -499,7 +519,7 @@ var SelectionEndAdornment = ({
|
|
|
499
519
|
...bindTrigger(popupState)
|
|
500
520
|
},
|
|
501
521
|
value.toUpperCase()
|
|
502
|
-
), /* @__PURE__ */
|
|
522
|
+
), /* @__PURE__ */ React14.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options4.map((option, index) => /* @__PURE__ */ React14.createElement(MenuItem2, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
|
|
503
523
|
};
|
|
504
524
|
|
|
505
525
|
// src/controls/control-types/size-control.tsx
|
|
@@ -534,12 +554,12 @@ var SizeControl = createControl(({ units = defaultUnits, placeholder, startIcon
|
|
|
534
554
|
}
|
|
535
555
|
}));
|
|
536
556
|
};
|
|
537
|
-
return /* @__PURE__ */
|
|
557
|
+
return /* @__PURE__ */ React15.createElement(ControlActions, null, /* @__PURE__ */ React15.createElement(
|
|
538
558
|
TextFieldInnerSelection,
|
|
539
559
|
{
|
|
540
|
-
endAdornment: /* @__PURE__ */
|
|
560
|
+
endAdornment: /* @__PURE__ */ React15.createElement(SelectionEndAdornment, { options: units, onClick: handleUnitChange, value: state.value.unit }),
|
|
541
561
|
placeholder,
|
|
542
|
-
startAdornment: startIcon ?? /* @__PURE__ */
|
|
562
|
+
startAdornment: startIcon ?? /* @__PURE__ */ React15.createElement(InputAdornment2, { position: "start" }, startIcon),
|
|
543
563
|
type: "number",
|
|
544
564
|
value: Number.isNaN(state.value.size) ? "" : state.value.size,
|
|
545
565
|
onChange: handleSizeChange
|
|
@@ -570,18 +590,18 @@ var Control = ({ props, type }) => {
|
|
|
570
590
|
context: { type }
|
|
571
591
|
});
|
|
572
592
|
}
|
|
573
|
-
return /* @__PURE__ */
|
|
593
|
+
return /* @__PURE__ */ React16.createElement(ControlByType, { ...props });
|
|
574
594
|
};
|
|
575
595
|
|
|
576
596
|
// src/controls/components/control-type-container.tsx
|
|
577
|
-
import * as
|
|
597
|
+
import * as React17 from "react";
|
|
578
598
|
import { styled as styled2, Box } from "@elementor/ui";
|
|
579
599
|
var ControlTypeContainer = ({
|
|
580
600
|
controlType,
|
|
581
601
|
children
|
|
582
602
|
}) => {
|
|
583
603
|
const layout = getLayoutByType(controlType);
|
|
584
|
-
return /* @__PURE__ */
|
|
604
|
+
return /* @__PURE__ */ React17.createElement(StyledContainer, { layout }, children);
|
|
585
605
|
};
|
|
586
606
|
var StyledContainer = styled2(Box, {
|
|
587
607
|
shouldForwardProp: (prop) => !["layout"].includes(prop)
|
|
@@ -600,15 +620,15 @@ var getGridLayout = (layout) => ({
|
|
|
600
620
|
|
|
601
621
|
// src/components/settings-tab.tsx
|
|
602
622
|
var SettingsTab = () => {
|
|
603
|
-
const { elementType } =
|
|
604
|
-
return /* @__PURE__ */
|
|
623
|
+
const { elementType } = useElement();
|
|
624
|
+
return /* @__PURE__ */ React18.createElement(Stack5, null, elementType.controls.map(({ type, value }, index) => {
|
|
605
625
|
if (type === "control") {
|
|
606
|
-
return /* @__PURE__ */
|
|
626
|
+
return /* @__PURE__ */ React18.createElement(Control2, { key: value.bind, control: value });
|
|
607
627
|
}
|
|
608
628
|
if (type === "section") {
|
|
609
|
-
return /* @__PURE__ */
|
|
629
|
+
return /* @__PURE__ */ React18.createElement(AccordionSection, { key: type + "." + index, title: value.label }, value.items?.map((item) => {
|
|
610
630
|
if (item.type === "control") {
|
|
611
|
-
return /* @__PURE__ */
|
|
631
|
+
return /* @__PURE__ */ React18.createElement(Control2, { key: item.value.bind, control: item.value });
|
|
612
632
|
}
|
|
613
633
|
return null;
|
|
614
634
|
}));
|
|
@@ -620,24 +640,24 @@ var Control2 = ({ control }) => {
|
|
|
620
640
|
if (!getControlByType(control.type)) {
|
|
621
641
|
return null;
|
|
622
642
|
}
|
|
623
|
-
return /* @__PURE__ */
|
|
643
|
+
return /* @__PURE__ */ React18.createElement(SettingsControl, { bind: control.bind }, /* @__PURE__ */ React18.createElement(ControlTypeContainer, { controlType: control.type }, control.label ? /* @__PURE__ */ React18.createElement(SettingsControl.Label, null, control.label) : null, /* @__PURE__ */ React18.createElement(Control, { type: control.type, props: control.props })));
|
|
624
644
|
};
|
|
625
645
|
|
|
626
646
|
// src/components/style-tab.tsx
|
|
627
|
-
import * as
|
|
647
|
+
import * as React46 from "react";
|
|
628
648
|
|
|
629
649
|
// src/contexts/style-context.tsx
|
|
630
|
-
import * as
|
|
631
|
-
import { createContext as
|
|
650
|
+
import * as React19 from "react";
|
|
651
|
+
import { createContext as createContext4, useContext as useContext4 } from "react";
|
|
632
652
|
import { useActiveBreakpoint } from "@elementor/editor-responsive";
|
|
633
|
-
var Context2 =
|
|
653
|
+
var Context2 = createContext4(null);
|
|
634
654
|
function StyleContext({ children, selectedStyleDef, selectedClassesProp }) {
|
|
635
655
|
const breakpoint = useActiveBreakpoint();
|
|
636
656
|
const selectedMeta = { breakpoint, state: null };
|
|
637
|
-
return /* @__PURE__ */
|
|
657
|
+
return /* @__PURE__ */ React19.createElement(Context2.Provider, { value: { selectedStyleDef, selectedMeta, selectedClassesProp } }, children);
|
|
638
658
|
}
|
|
639
659
|
function useStyleContext() {
|
|
640
|
-
const context =
|
|
660
|
+
const context = useContext4(Context2);
|
|
641
661
|
if (!context) {
|
|
642
662
|
throw new Error("UseStyleContext must be used within a StyleContextProvider");
|
|
643
663
|
}
|
|
@@ -665,13 +685,13 @@ var useElementStyles = (elementID) => {
|
|
|
665
685
|
};
|
|
666
686
|
|
|
667
687
|
// src/components/style-tab.tsx
|
|
668
|
-
import { Stack as
|
|
688
|
+
import { Stack as Stack16 } from "@elementor/ui";
|
|
669
689
|
|
|
670
690
|
// src/components/style-sections/size-section.tsx
|
|
671
|
-
import * as
|
|
691
|
+
import * as React21 from "react";
|
|
672
692
|
|
|
673
693
|
// src/controls/style-control.tsx
|
|
674
|
-
import * as
|
|
694
|
+
import * as React20 from "react";
|
|
675
695
|
|
|
676
696
|
// src/hooks/use-element-style-prop.ts
|
|
677
697
|
import { commandEndEvent as commandEndEvent5, __privateUseListenTo as useListenTo5 } from "@elementor/editor-v1-adapters";
|
|
@@ -718,7 +738,7 @@ var updateStyle = ({ elementID, styleDefID, meta, props, bind }) => {
|
|
|
718
738
|
|
|
719
739
|
// src/controls/hooks/use-style-control.ts
|
|
720
740
|
var useStyleControl = (propName) => {
|
|
721
|
-
const { element } =
|
|
741
|
+
const { element } = useElement();
|
|
722
742
|
const { selectedStyleDef, selectedMeta, selectedClassesProp } = useStyleContext();
|
|
723
743
|
const value = useElementStyleProp({
|
|
724
744
|
elementID: element.id,
|
|
@@ -741,7 +761,7 @@ var useStyleControl = (propName) => {
|
|
|
741
761
|
// src/controls/style-control.tsx
|
|
742
762
|
var StyleControl = ({ bind, children }) => {
|
|
743
763
|
const [value, setValue] = useStyleControl(bind);
|
|
744
|
-
return /* @__PURE__ */
|
|
764
|
+
return /* @__PURE__ */ React20.createElement(ControlContext.Provider, { value: { bind, value, setValue } }, children);
|
|
745
765
|
};
|
|
746
766
|
StyleControl.Label = ControlLabel;
|
|
747
767
|
|
|
@@ -749,18 +769,18 @@ StyleControl.Label = ControlLabel;
|
|
|
749
769
|
import { Grid as Grid2, Stack as Stack6 } from "@elementor/ui";
|
|
750
770
|
import { __ as __3 } from "@wordpress/i18n";
|
|
751
771
|
var SizeSection = () => {
|
|
752
|
-
return /* @__PURE__ */
|
|
772
|
+
return /* @__PURE__ */ React21.createElement(AccordionSection, { title: __3("Size", "elementor") }, /* @__PURE__ */ React21.createElement(Stack6, { gap: 1.5 }, /* @__PURE__ */ React21.createElement(Grid2, { container: true, spacing: 2 }, /* @__PURE__ */ React21.createElement(Control3, { bind: "width", label: __3("Width", "elementor") }), /* @__PURE__ */ React21.createElement(Control3, { bind: "height", label: __3("Height", "elementor") })), /* @__PURE__ */ React21.createElement(Grid2, { container: true, spacing: 2 }, /* @__PURE__ */ React21.createElement(Control3, { bind: "min-width", label: __3("Min. Width", "elementor") }), /* @__PURE__ */ React21.createElement(Control3, { bind: "min-height", label: __3("Min. Height", "elementor") })), /* @__PURE__ */ React21.createElement(Grid2, { container: true, spacing: 2 }, /* @__PURE__ */ React21.createElement(Control3, { bind: "max-width", label: __3("Max. Width", "elementor") }), /* @__PURE__ */ React21.createElement(Control3, { bind: "max-height", label: __3("Max. Height", "elementor") }))));
|
|
753
773
|
};
|
|
754
774
|
var Control3 = ({ label, bind }) => {
|
|
755
|
-
return /* @__PURE__ */
|
|
775
|
+
return /* @__PURE__ */ React21.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(StyleControl, { bind }, /* @__PURE__ */ React21.createElement(Grid2, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React21.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React21.createElement(StyleControl.Label, null, label)), /* @__PURE__ */ React21.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React21.createElement(Control, { type: "size" })))));
|
|
756
776
|
};
|
|
757
777
|
|
|
758
778
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
759
|
-
import * as
|
|
779
|
+
import * as React35 from "react";
|
|
760
780
|
import { Divider, Stack as Stack8 } from "@elementor/ui";
|
|
761
781
|
|
|
762
782
|
// src/components/style-sections/typography-section/text-style-control.tsx
|
|
763
|
-
import * as
|
|
783
|
+
import * as React22 from "react";
|
|
764
784
|
import { __ as __4 } from "@wordpress/i18n";
|
|
765
785
|
import { Grid as Grid3, ToggleButton as ToggleButtonBase, ToggleButtonGroup } from "@elementor/ui";
|
|
766
786
|
import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from "@elementor/icons";
|
|
@@ -769,7 +789,7 @@ var TextStyleControl = () => {
|
|
|
769
789
|
const [fontStyle, setFontStyle] = useStyleControl("font-style");
|
|
770
790
|
const [textDecoration, setTextDecoration] = useStyleControl("text-decoration");
|
|
771
791
|
const formats = [fontStyle, ...(textDecoration || "").split(" ")];
|
|
772
|
-
return /* @__PURE__ */
|
|
792
|
+
return /* @__PURE__ */ React22.createElement(Grid3, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React22.createElement(ControlLabel, null, __4("Style", "elementor"))), /* @__PURE__ */ React22.createElement(Grid3, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React22.createElement(ToggleButtonGroup, { value: formats }, /* @__PURE__ */ React22.createElement(
|
|
773
793
|
ToggleButton,
|
|
774
794
|
{
|
|
775
795
|
value: "italic",
|
|
@@ -777,8 +797,8 @@ var TextStyleControl = () => {
|
|
|
777
797
|
"aria-label": "italic",
|
|
778
798
|
sx: { marginLeft: "auto" }
|
|
779
799
|
},
|
|
780
|
-
/* @__PURE__ */
|
|
781
|
-
), /* @__PURE__ */
|
|
800
|
+
/* @__PURE__ */ React22.createElement(ItalicIcon, { fontSize: buttonSize })
|
|
801
|
+
), /* @__PURE__ */ React22.createElement(
|
|
782
802
|
ShorthandControl,
|
|
783
803
|
{
|
|
784
804
|
value: "line-through",
|
|
@@ -786,8 +806,8 @@ var TextStyleControl = () => {
|
|
|
786
806
|
updateValues: setTextDecoration,
|
|
787
807
|
"aria-label": "line-through"
|
|
788
808
|
},
|
|
789
|
-
/* @__PURE__ */
|
|
790
|
-
), /* @__PURE__ */
|
|
809
|
+
/* @__PURE__ */ React22.createElement(StrikethroughIcon, { fontSize: buttonSize })
|
|
810
|
+
), /* @__PURE__ */ React22.createElement(
|
|
791
811
|
ShorthandControl,
|
|
792
812
|
{
|
|
793
813
|
value: "underline",
|
|
@@ -795,7 +815,7 @@ var TextStyleControl = () => {
|
|
|
795
815
|
updateValues: setTextDecoration,
|
|
796
816
|
"aria-label": "underline"
|
|
797
817
|
},
|
|
798
|
-
/* @__PURE__ */
|
|
818
|
+
/* @__PURE__ */ React22.createElement(UnderlineIcon, { fontSize: buttonSize })
|
|
799
819
|
))));
|
|
800
820
|
};
|
|
801
821
|
var ShorthandControl = ({
|
|
@@ -814,28 +834,28 @@ var ShorthandControl = ({
|
|
|
814
834
|
updateValues([...valuesArr, newValue].join(" "));
|
|
815
835
|
}
|
|
816
836
|
};
|
|
817
|
-
return /* @__PURE__ */
|
|
837
|
+
return /* @__PURE__ */ React22.createElement(ToggleButton, { value, onChange: toggleValue, selected, "aria-label": ariaLabel }, children);
|
|
818
838
|
};
|
|
819
839
|
var ToggleButton = ({ onChange, ...props }) => {
|
|
820
840
|
const handleChange = (_e, newValue) => {
|
|
821
841
|
onChange(newValue);
|
|
822
842
|
};
|
|
823
|
-
return /* @__PURE__ */
|
|
843
|
+
return /* @__PURE__ */ React22.createElement(ToggleButtonBase, { ...props, onChange: handleChange, size: buttonSize });
|
|
824
844
|
};
|
|
825
845
|
|
|
826
846
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
827
847
|
import { __ as __14 } from "@wordpress/i18n";
|
|
828
848
|
|
|
829
849
|
// src/components/style-sections/typography-section/font-size-control.tsx
|
|
830
|
-
import * as
|
|
850
|
+
import * as React23 from "react";
|
|
831
851
|
import { __ as __5 } from "@wordpress/i18n";
|
|
832
852
|
import { Grid as Grid4 } from "@elementor/ui";
|
|
833
853
|
var FontSizeControl = () => {
|
|
834
|
-
return /* @__PURE__ */
|
|
854
|
+
return /* @__PURE__ */ React23.createElement(StyleControl, { bind: "font-size" }, /* @__PURE__ */ React23.createElement(Grid4, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(StyleControl.Label, null, __5("Font Size", "elementor"))), /* @__PURE__ */ React23.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(SizeControl, null))));
|
|
835
855
|
};
|
|
836
856
|
|
|
837
857
|
// src/components/style-sections/typography-section/font-weight-control.tsx
|
|
838
|
-
import * as
|
|
858
|
+
import * as React24 from "react";
|
|
839
859
|
import { __ as __6 } from "@wordpress/i18n";
|
|
840
860
|
import { Grid as Grid5 } from "@elementor/ui";
|
|
841
861
|
var fontWeightOptions = [
|
|
@@ -846,16 +866,16 @@ var fontWeightOptions = [
|
|
|
846
866
|
{ label: __6("Black - 900", "elementor"), value: "900" }
|
|
847
867
|
];
|
|
848
868
|
var FontWeightControl = () => {
|
|
849
|
-
return /* @__PURE__ */
|
|
869
|
+
return /* @__PURE__ */ React24.createElement(StyleControl, { bind: "font-weight" }, /* @__PURE__ */ React24.createElement(Grid5, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React24.createElement(StyleControl.Label, null, __6("Font Weight", "elementor"))), /* @__PURE__ */ React24.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React24.createElement(SelectControl, { options: fontWeightOptions }))));
|
|
850
870
|
};
|
|
851
871
|
|
|
852
872
|
// src/components/style-sections/typography-section/text-color-control.tsx
|
|
853
|
-
import * as
|
|
873
|
+
import * as React26 from "react";
|
|
854
874
|
import { __ as __7 } from "@wordpress/i18n";
|
|
855
875
|
import { Grid as Grid6 } from "@elementor/ui";
|
|
856
876
|
|
|
857
877
|
// src/controls/control-types/color-control.tsx
|
|
858
|
-
import * as
|
|
878
|
+
import * as React25 from "react";
|
|
859
879
|
import { UnstableColorPicker } from "@elementor/ui";
|
|
860
880
|
var ColorControl = createControl(
|
|
861
881
|
(props) => {
|
|
@@ -866,33 +886,33 @@ var ColorControl = createControl(
|
|
|
866
886
|
value: selectedColor
|
|
867
887
|
});
|
|
868
888
|
};
|
|
869
|
-
return /* @__PURE__ */
|
|
889
|
+
return /* @__PURE__ */ React25.createElement(ControlActions, null, /* @__PURE__ */ React25.createElement(UnstableColorPicker, { size: "tiny", ...props, value: value?.value, onChange: handleChange }));
|
|
870
890
|
}
|
|
871
891
|
);
|
|
872
892
|
|
|
873
893
|
// src/components/style-sections/typography-section/text-color-control.tsx
|
|
874
894
|
var TextColorControl = () => {
|
|
875
|
-
return /* @__PURE__ */
|
|
895
|
+
return /* @__PURE__ */ React26.createElement(StyleControl, { bind: "color" }, /* @__PURE__ */ React26.createElement(Grid6, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(StyleControl.Label, null, __7("Text Color", "elementor"))), /* @__PURE__ */ React26.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(ColorControl, null))));
|
|
876
896
|
};
|
|
877
897
|
|
|
878
898
|
// src/components/style-sections/typography-section/letter-spacing-control.tsx
|
|
879
|
-
import * as
|
|
899
|
+
import * as React27 from "react";
|
|
880
900
|
import { __ as __8 } from "@wordpress/i18n";
|
|
881
901
|
import { Grid as Grid7 } from "@elementor/ui";
|
|
882
902
|
var LetterSpacingControl = () => {
|
|
883
|
-
return /* @__PURE__ */
|
|
903
|
+
return /* @__PURE__ */ React27.createElement(StyleControl, { bind: "letter-spacing" }, /* @__PURE__ */ React27.createElement(Grid7, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React27.createElement(StyleControl.Label, null, __8("Letter Spacing", "elementor"))), /* @__PURE__ */ React27.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React27.createElement(SizeControl, null))));
|
|
884
904
|
};
|
|
885
905
|
|
|
886
906
|
// src/components/style-sections/typography-section/word-spacing-control.tsx
|
|
887
|
-
import * as
|
|
907
|
+
import * as React28 from "react";
|
|
888
908
|
import { __ as __9 } from "@wordpress/i18n";
|
|
889
909
|
import { Grid as Grid8 } from "@elementor/ui";
|
|
890
910
|
var WordSpacingControl = () => {
|
|
891
|
-
return /* @__PURE__ */
|
|
911
|
+
return /* @__PURE__ */ React28.createElement(StyleControl, { bind: "word-spacing" }, /* @__PURE__ */ React28.createElement(Grid8, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(StyleControl.Label, null, __9("Word Spacing", "elementor"))), /* @__PURE__ */ React28.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(SizeControl, null))));
|
|
892
912
|
};
|
|
893
913
|
|
|
894
914
|
// src/components/collapsible-content.tsx
|
|
895
|
-
import * as
|
|
915
|
+
import * as React29 from "react";
|
|
896
916
|
import { useState as useState2 } from "react";
|
|
897
917
|
import { ChevronDownIcon } from "@elementor/icons";
|
|
898
918
|
import { Button as Button3, Collapse, Stack as Stack7, styled as styled3 } from "@elementor/ui";
|
|
@@ -902,7 +922,7 @@ var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
|
902
922
|
const handleToggle = () => {
|
|
903
923
|
setOpen((prevOpen) => !prevOpen);
|
|
904
924
|
};
|
|
905
|
-
return /* @__PURE__ */
|
|
925
|
+
return /* @__PURE__ */ React29.createElement(Stack7, { sx: { py: 0.5 } }, /* @__PURE__ */ React29.createElement(
|
|
906
926
|
Button3,
|
|
907
927
|
{
|
|
908
928
|
fullWidth: true,
|
|
@@ -910,10 +930,10 @@ var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
|
910
930
|
color: "secondary",
|
|
911
931
|
variant: "outlined",
|
|
912
932
|
onClick: handleToggle,
|
|
913
|
-
endIcon: /* @__PURE__ */
|
|
933
|
+
endIcon: /* @__PURE__ */ React29.createElement(ChevronIcon, { open })
|
|
914
934
|
},
|
|
915
935
|
open ? __10("Show less", "elementor") : __10("Show more", "elementor")
|
|
916
|
-
), /* @__PURE__ */
|
|
936
|
+
), /* @__PURE__ */ React29.createElement(Collapse, { in: open, timeout: "auto" }, children));
|
|
917
937
|
};
|
|
918
938
|
var ChevronIcon = styled3(ChevronDownIcon, {
|
|
919
939
|
shouldForwardProp: (prop) => prop !== "open"
|
|
@@ -925,16 +945,16 @@ var ChevronIcon = styled3(ChevronDownIcon, {
|
|
|
925
945
|
}));
|
|
926
946
|
|
|
927
947
|
// src/components/style-sections/typography-section/transform-control.tsx
|
|
928
|
-
import * as
|
|
948
|
+
import * as React32 from "react";
|
|
929
949
|
import { __ as __11 } from "@wordpress/i18n";
|
|
930
950
|
import { Grid as Grid9 } from "@elementor/ui";
|
|
931
951
|
import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from "@elementor/icons";
|
|
932
952
|
|
|
933
953
|
// src/controls/control-types/toggle-control.tsx
|
|
934
|
-
import * as
|
|
954
|
+
import * as React31 from "react";
|
|
935
955
|
|
|
936
956
|
// src/controls/components/control-toggle-button-group.tsx
|
|
937
|
-
import * as
|
|
957
|
+
import * as React30 from "react";
|
|
938
958
|
import { styled as styled4, ToggleButton as ToggleButton2, ToggleButtonGroup as ToggleButtonGroup2 } from "@elementor/ui";
|
|
939
959
|
var StyledToggleButtonGroup = styled4(ToggleButtonGroup2)`
|
|
940
960
|
${({ justify }) => `justify-content: ${justify};`}
|
|
@@ -950,7 +970,7 @@ var ControlToggleButtonGroup = ({
|
|
|
950
970
|
const handleChange = (_, newValue) => {
|
|
951
971
|
onChange(newValue);
|
|
952
972
|
};
|
|
953
|
-
return /* @__PURE__ */
|
|
973
|
+
return /* @__PURE__ */ React30.createElement(StyledToggleButtonGroup, { justify, value, onChange: handleChange, exclusive }, items.map(({ label, value: buttonValue, icon: Icon }) => /* @__PURE__ */ React30.createElement(ToggleButton2, { key: buttonValue, value: buttonValue, "aria-label": label, size }, /* @__PURE__ */ React30.createElement(Icon, { fontSize: size }))));
|
|
954
974
|
};
|
|
955
975
|
|
|
956
976
|
// src/controls/control-types/toggle-control.tsx
|
|
@@ -959,7 +979,7 @@ var ToggleControl = createControl(({ options: options4 }) => {
|
|
|
959
979
|
const handleToggle = (option) => {
|
|
960
980
|
setValue(option || void 0);
|
|
961
981
|
};
|
|
962
|
-
return /* @__PURE__ */
|
|
982
|
+
return /* @__PURE__ */ React31.createElement(
|
|
963
983
|
ControlToggleButtonGroup,
|
|
964
984
|
{
|
|
965
985
|
items: options4,
|
|
@@ -976,10 +996,10 @@ var options = [
|
|
|
976
996
|
{ value: "uppercase", label: __11("Uppercase", "elementor"), icon: LetterCaseUpperIcon },
|
|
977
997
|
{ value: "lowercase", label: __11("Lowercase", "elementor"), icon: LetterCaseLowerIcon }
|
|
978
998
|
];
|
|
979
|
-
var TransformControl = () => /* @__PURE__ */
|
|
999
|
+
var TransformControl = () => /* @__PURE__ */ React32.createElement(StyleControl, { bind: "text-transform" }, /* @__PURE__ */ React32.createElement(Grid9, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React32.createElement(StyleControl.Label, null, __11("Transform", "elementor"))), /* @__PURE__ */ React32.createElement(Grid9, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React32.createElement(ToggleControl, { options }))));
|
|
980
1000
|
|
|
981
1001
|
// src/components/style-sections/typography-section/text-alignment-control.tsx
|
|
982
|
-
import * as
|
|
1002
|
+
import * as React33 from "react";
|
|
983
1003
|
import { __ as __12 } from "@wordpress/i18n";
|
|
984
1004
|
import { Grid as Grid10 } from "@elementor/ui";
|
|
985
1005
|
import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifiedIcon } from "@elementor/icons";
|
|
@@ -1006,11 +1026,11 @@ var options2 = [
|
|
|
1006
1026
|
}
|
|
1007
1027
|
];
|
|
1008
1028
|
var TextAlignmentControl = () => {
|
|
1009
|
-
return /* @__PURE__ */
|
|
1029
|
+
return /* @__PURE__ */ React33.createElement(StyleControl, { bind: "text-align" }, /* @__PURE__ */ React33.createElement(Grid10, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React33.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(StyleControl.Label, null, __12("Alignment", "elementor"))), /* @__PURE__ */ React33.createElement(Grid10, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React33.createElement(ToggleControl, { options: options2 }))));
|
|
1010
1030
|
};
|
|
1011
1031
|
|
|
1012
1032
|
// src/components/style-sections/typography-section/text-direction-control.tsx
|
|
1013
|
-
import * as
|
|
1033
|
+
import * as React34 from "react";
|
|
1014
1034
|
import { __ as __13 } from "@wordpress/i18n";
|
|
1015
1035
|
import { Grid as Grid11 } from "@elementor/ui";
|
|
1016
1036
|
import { TextDirectionLtrIcon, TextDirectionRtlIcon } from "@elementor/icons";
|
|
@@ -1027,25 +1047,25 @@ var options3 = [
|
|
|
1027
1047
|
}
|
|
1028
1048
|
];
|
|
1029
1049
|
var TextDirectionControl = () => {
|
|
1030
|
-
return /* @__PURE__ */
|
|
1050
|
+
return /* @__PURE__ */ React34.createElement(StyleControl, { bind: "direction" }, /* @__PURE__ */ React34.createElement(Grid11, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React34.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(StyleControl.Label, null, __13("Direction", "elementor"))), /* @__PURE__ */ React34.createElement(Grid11, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React34.createElement(ToggleControl, { options: options3 }))));
|
|
1031
1051
|
};
|
|
1032
1052
|
|
|
1033
1053
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
1034
1054
|
var TypographySection = () => {
|
|
1035
|
-
return /* @__PURE__ */
|
|
1055
|
+
return /* @__PURE__ */ React35.createElement(AccordionSection, { title: __14("Typography", "elementor") }, /* @__PURE__ */ React35.createElement(Stack8, { gap: 1.5 }, /* @__PURE__ */ React35.createElement(FontWeightControl, null), /* @__PURE__ */ React35.createElement(FontSizeControl, null), /* @__PURE__ */ React35.createElement(Divider, null), /* @__PURE__ */ React35.createElement(TextColorControl, null), /* @__PURE__ */ React35.createElement(CollapsibleContent, null, /* @__PURE__ */ React35.createElement(Stack8, { gap: 1.5, sx: { pt: 1.5 } }, /* @__PURE__ */ React35.createElement(LetterSpacingControl, null), /* @__PURE__ */ React35.createElement(WordSpacingControl, null), /* @__PURE__ */ React35.createElement(Divider, null), /* @__PURE__ */ React35.createElement(TextAlignmentControl, null), /* @__PURE__ */ React35.createElement(TextStyleControl, null), /* @__PURE__ */ React35.createElement(TransformControl, null), /* @__PURE__ */ React35.createElement(TextDirectionControl, null)))));
|
|
1036
1056
|
};
|
|
1037
1057
|
|
|
1038
1058
|
// src/components/style-sections/position-section/position-section.tsx
|
|
1039
|
-
import * as
|
|
1059
|
+
import * as React38 from "react";
|
|
1040
1060
|
import { Stack as Stack9 } from "@elementor/ui";
|
|
1041
1061
|
|
|
1042
1062
|
// src/components/style-sections/position-section/z-index-control.tsx
|
|
1043
|
-
import * as
|
|
1063
|
+
import * as React37 from "react";
|
|
1044
1064
|
import { __ as __15 } from "@wordpress/i18n";
|
|
1045
1065
|
import { Grid as Grid12 } from "@elementor/ui";
|
|
1046
1066
|
|
|
1047
1067
|
// src/controls/control-types/number-control.tsx
|
|
1048
|
-
import * as
|
|
1068
|
+
import * as React36 from "react";
|
|
1049
1069
|
import { TextField as TextField4 } from "@elementor/ui";
|
|
1050
1070
|
var isEmptyOrNaN = (value) => value === void 0 || value === "" || Number.isNaN(Number(value));
|
|
1051
1071
|
var NumberControl = createControl(({ placeholder }) => {
|
|
@@ -1054,7 +1074,7 @@ var NumberControl = createControl(({ placeholder }) => {
|
|
|
1054
1074
|
const eventValue = event.target.value;
|
|
1055
1075
|
setValue(isEmptyOrNaN(eventValue) ? void 0 : Number(eventValue));
|
|
1056
1076
|
};
|
|
1057
|
-
return /* @__PURE__ */
|
|
1077
|
+
return /* @__PURE__ */ React36.createElement(ControlActions, null, /* @__PURE__ */ React36.createElement(
|
|
1058
1078
|
TextField4,
|
|
1059
1079
|
{
|
|
1060
1080
|
size: "tiny",
|
|
@@ -1068,22 +1088,22 @@ var NumberControl = createControl(({ placeholder }) => {
|
|
|
1068
1088
|
|
|
1069
1089
|
// src/components/style-sections/position-section/z-index-control.tsx
|
|
1070
1090
|
var ZIndexControl = () => {
|
|
1071
|
-
return /* @__PURE__ */
|
|
1091
|
+
return /* @__PURE__ */ React37.createElement(StyleControl, { bind: "z-index" }, /* @__PURE__ */ React37.createElement(Grid12, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(StyleControl.Label, null, __15("Z-Index", "elementor"))), /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(NumberControl, null))));
|
|
1072
1092
|
};
|
|
1073
1093
|
|
|
1074
1094
|
// src/components/style-sections/position-section/position-section.tsx
|
|
1075
1095
|
import { __ as __16 } from "@wordpress/i18n";
|
|
1076
1096
|
var PositionSection = () => {
|
|
1077
|
-
return /* @__PURE__ */
|
|
1097
|
+
return /* @__PURE__ */ React38.createElement(AccordionSection, { title: __16("Position", "elementor") }, /* @__PURE__ */ React38.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React38.createElement(ZIndexControl, null)));
|
|
1078
1098
|
};
|
|
1079
1099
|
|
|
1080
1100
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
1081
|
-
import * as
|
|
1101
|
+
import * as React40 from "react";
|
|
1082
1102
|
import { Divider as Divider2, Stack as Stack11 } from "@elementor/ui";
|
|
1083
1103
|
import { __ as __18 } from "@wordpress/i18n";
|
|
1084
1104
|
|
|
1085
1105
|
// src/components/style-sections/spacing-section/linked-dimensions-control.tsx
|
|
1086
|
-
import * as
|
|
1106
|
+
import * as React39 from "react";
|
|
1087
1107
|
import { __ as __17 } from "@wordpress/i18n";
|
|
1088
1108
|
import { Grid as Grid13, Stack as Stack10, ToggleButton as ToggleButton3 } from "@elementor/ui";
|
|
1089
1109
|
import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
|
|
@@ -1118,7 +1138,7 @@ var LinkedDimensionsControl = ({ label }) => {
|
|
|
1118
1138
|
});
|
|
1119
1139
|
};
|
|
1120
1140
|
const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
|
|
1121
|
-
return /* @__PURE__ */
|
|
1141
|
+
return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, label), /* @__PURE__ */ React39.createElement(
|
|
1122
1142
|
ToggleButton3,
|
|
1123
1143
|
{
|
|
1124
1144
|
"aria-label": __17("Link Inputs", "elementor"),
|
|
@@ -1128,38 +1148,38 @@ var LinkedDimensionsControl = ({ label }) => {
|
|
|
1128
1148
|
sx: { marginLeft: "auto" },
|
|
1129
1149
|
onChange: toggleLinked
|
|
1130
1150
|
},
|
|
1131
|
-
/* @__PURE__ */
|
|
1132
|
-
)), /* @__PURE__ */
|
|
1151
|
+
/* @__PURE__ */ React39.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1152
|
+
)), /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2 }, /* @__PURE__ */ React39.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, __17("Top", "elementor"))), /* @__PURE__ */ React39.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(
|
|
1133
1153
|
Control4,
|
|
1134
1154
|
{
|
|
1135
1155
|
bind: "top",
|
|
1136
1156
|
value: top,
|
|
1137
1157
|
setValue: setLinkedValue,
|
|
1138
|
-
startIcon: /* @__PURE__ */
|
|
1158
|
+
startIcon: /* @__PURE__ */ React39.createElement(SideTopIcon, { fontSize: "tiny" })
|
|
1139
1159
|
}
|
|
1140
|
-
))), /* @__PURE__ */
|
|
1160
|
+
))), /* @__PURE__ */ React39.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, __17("Right", "elementor"))), /* @__PURE__ */ React39.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(
|
|
1141
1161
|
Control4,
|
|
1142
1162
|
{
|
|
1143
1163
|
bind: "right",
|
|
1144
1164
|
value: right,
|
|
1145
1165
|
setValue: setLinkedValue,
|
|
1146
|
-
startIcon: /* @__PURE__ */
|
|
1166
|
+
startIcon: /* @__PURE__ */ React39.createElement(SideRightIcon, { fontSize: "tiny" })
|
|
1147
1167
|
}
|
|
1148
|
-
)))), /* @__PURE__ */
|
|
1168
|
+
)))), /* @__PURE__ */ React39.createElement(Stack10, { direction: "row", gap: 2 }, /* @__PURE__ */ React39.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, __17("Bottom", "elementor"))), /* @__PURE__ */ React39.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(
|
|
1149
1169
|
Control4,
|
|
1150
1170
|
{
|
|
1151
1171
|
bind: "bottom",
|
|
1152
1172
|
value: bottom,
|
|
1153
1173
|
setValue: setLinkedValue,
|
|
1154
|
-
startIcon: /* @__PURE__ */
|
|
1174
|
+
startIcon: /* @__PURE__ */ React39.createElement(SideBottomIcon, { fontSize: "tiny" })
|
|
1155
1175
|
}
|
|
1156
|
-
))), /* @__PURE__ */
|
|
1176
|
+
))), /* @__PURE__ */ React39.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, __17("Left", "elementor"))), /* @__PURE__ */ React39.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(
|
|
1157
1177
|
Control4,
|
|
1158
1178
|
{
|
|
1159
1179
|
bind: "left",
|
|
1160
1180
|
value: left,
|
|
1161
1181
|
setValue: setLinkedValue,
|
|
1162
|
-
startIcon: /* @__PURE__ */
|
|
1182
|
+
startIcon: /* @__PURE__ */ React39.createElement(SideLeftIcon, { fontSize: "tiny" })
|
|
1163
1183
|
}
|
|
1164
1184
|
)))));
|
|
1165
1185
|
};
|
|
@@ -1168,7 +1188,7 @@ var Control4 = ({
|
|
|
1168
1188
|
startIcon,
|
|
1169
1189
|
value,
|
|
1170
1190
|
setValue
|
|
1171
|
-
}) => /* @__PURE__ */
|
|
1191
|
+
}) => /* @__PURE__ */ React39.createElement(
|
|
1172
1192
|
ControlContext.Provider,
|
|
1173
1193
|
{
|
|
1174
1194
|
value: {
|
|
@@ -1177,26 +1197,26 @@ var Control4 = ({
|
|
|
1177
1197
|
value
|
|
1178
1198
|
}
|
|
1179
1199
|
},
|
|
1180
|
-
/* @__PURE__ */
|
|
1200
|
+
/* @__PURE__ */ React39.createElement(SizeControl, { startIcon })
|
|
1181
1201
|
);
|
|
1182
1202
|
|
|
1183
1203
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
1184
1204
|
var SpacingSection = () => {
|
|
1185
|
-
return /* @__PURE__ */
|
|
1205
|
+
return /* @__PURE__ */ React40.createElement(AccordionSection, { title: __18("Spacing", "elementor") }, /* @__PURE__ */ React40.createElement(Stack11, { gap: 1.5 }, /* @__PURE__ */ React40.createElement(StyleControl, { bind: "padding" }, /* @__PURE__ */ React40.createElement(LinkedDimensionsControl, { label: __18("Padding", "elementor") })), /* @__PURE__ */ React40.createElement(Divider2, null), /* @__PURE__ */ React40.createElement(StyleControl, { bind: "margin" }, /* @__PURE__ */ React40.createElement(LinkedDimensionsControl, { label: __18("Margin", "elementor") }))));
|
|
1186
1206
|
};
|
|
1187
1207
|
|
|
1188
1208
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
1189
|
-
import * as
|
|
1209
|
+
import * as React43 from "react";
|
|
1190
1210
|
import { __ as __21 } from "@wordpress/i18n";
|
|
1191
1211
|
import { Stack as Stack14 } from "@elementor/ui";
|
|
1192
1212
|
|
|
1193
1213
|
// src/components/style-sections/effects-section/box-shadow-repeater.tsx
|
|
1194
|
-
import * as
|
|
1214
|
+
import * as React42 from "react";
|
|
1195
1215
|
import { __ as __20 } from "@wordpress/i18n";
|
|
1196
1216
|
import { Grid as Grid14, Stack as Stack13, UnstableColorIndicator } from "@elementor/ui";
|
|
1197
1217
|
|
|
1198
1218
|
// src/controls/components/repeater.tsx
|
|
1199
|
-
import * as
|
|
1219
|
+
import * as React41 from "react";
|
|
1200
1220
|
import { useId as useId4, useRef, useState as useState3 } from "react";
|
|
1201
1221
|
import { __ as __19 } from "@wordpress/i18n";
|
|
1202
1222
|
import { PlusIcon, XIcon as XIcon2, CopyIcon, EyeIcon, EyeOffIcon } from "@elementor/icons";
|
|
@@ -1243,18 +1263,18 @@ var Repeater = ({
|
|
|
1243
1263
|
})
|
|
1244
1264
|
);
|
|
1245
1265
|
};
|
|
1246
|
-
return /* @__PURE__ */
|
|
1266
|
+
return /* @__PURE__ */ React41.createElement(Stack12, null, /* @__PURE__ */ React41.createElement(Stack12, { direction: "row", justifyContent: "space-between", sx: { py: 0.5 } }, /* @__PURE__ */ React41.createElement(Typography3, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React41.createElement(IconButton2, { size: SIZE2, onClick: addRepeaterItem, "aria-label": __19("Add item", "elementor") }, /* @__PURE__ */ React41.createElement(PlusIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React41.createElement(Stack12, { gap: 1 }, repeaterValues.map((value, index) => /* @__PURE__ */ React41.createElement(
|
|
1247
1267
|
RepeaterItem,
|
|
1248
1268
|
{
|
|
1249
1269
|
key: index,
|
|
1250
1270
|
disabled: value.disabled,
|
|
1251
|
-
label: /* @__PURE__ */
|
|
1252
|
-
startIcon: /* @__PURE__ */
|
|
1271
|
+
label: /* @__PURE__ */ React41.createElement(itemSettings.Label, { value }),
|
|
1272
|
+
startIcon: /* @__PURE__ */ React41.createElement(itemSettings.Icon, { value }),
|
|
1253
1273
|
removeItem: () => removeRepeaterItem(index),
|
|
1254
1274
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
1255
1275
|
toggleDisableItem: () => toggleDisableRepeaterItem(index)
|
|
1256
1276
|
},
|
|
1257
|
-
(props) => /* @__PURE__ */
|
|
1277
|
+
(props) => /* @__PURE__ */ React41.createElement(
|
|
1258
1278
|
itemSettings.Content,
|
|
1259
1279
|
{
|
|
1260
1280
|
...props,
|
|
@@ -1280,7 +1300,7 @@ var RepeaterItem = ({
|
|
|
1280
1300
|
const [anchorEl, setAnchorEl] = useState3(null);
|
|
1281
1301
|
const popoverState = usePopupState3({ popupId, variant: "popover" });
|
|
1282
1302
|
const popoverProps = bindPopover2(popoverState);
|
|
1283
|
-
return /* @__PURE__ */
|
|
1303
|
+
return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(
|
|
1284
1304
|
UnstableTag,
|
|
1285
1305
|
{
|
|
1286
1306
|
ref: tagRef,
|
|
@@ -1290,33 +1310,33 @@ var RepeaterItem = ({
|
|
|
1290
1310
|
"aria-label": __19("Open item", "elementor"),
|
|
1291
1311
|
...bindTrigger2(popoverState),
|
|
1292
1312
|
startIcon,
|
|
1293
|
-
actions: /* @__PURE__ */
|
|
1313
|
+
actions: /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(
|
|
1294
1314
|
IconButton2,
|
|
1295
1315
|
{
|
|
1296
1316
|
size: SIZE2,
|
|
1297
1317
|
onClick: duplicateItem,
|
|
1298
1318
|
"aria-label": __19("Duplicate item", "elementor")
|
|
1299
1319
|
},
|
|
1300
|
-
/* @__PURE__ */
|
|
1301
|
-
), /* @__PURE__ */
|
|
1320
|
+
/* @__PURE__ */ React41.createElement(CopyIcon, { fontSize: SIZE2 })
|
|
1321
|
+
), /* @__PURE__ */ React41.createElement(
|
|
1302
1322
|
IconButton2,
|
|
1303
1323
|
{
|
|
1304
1324
|
size: SIZE2,
|
|
1305
1325
|
onClick: toggleDisableItem,
|
|
1306
1326
|
"aria-label": disabled ? __19("Enable item", "elementor") : __19("Disable item", "elementor")
|
|
1307
1327
|
},
|
|
1308
|
-
disabled ? /* @__PURE__ */
|
|
1309
|
-
), /* @__PURE__ */
|
|
1328
|
+
disabled ? /* @__PURE__ */ React41.createElement(EyeOffIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React41.createElement(EyeIcon, { fontSize: SIZE2 })
|
|
1329
|
+
), /* @__PURE__ */ React41.createElement(
|
|
1310
1330
|
IconButton2,
|
|
1311
1331
|
{
|
|
1312
1332
|
size: SIZE2,
|
|
1313
1333
|
onClick: removeItem,
|
|
1314
1334
|
"aria-label": __19("Remove item", "elementor")
|
|
1315
1335
|
},
|
|
1316
|
-
/* @__PURE__ */
|
|
1336
|
+
/* @__PURE__ */ React41.createElement(XIcon2, { fontSize: SIZE2 })
|
|
1317
1337
|
))
|
|
1318
1338
|
}
|
|
1319
|
-
), /* @__PURE__ */
|
|
1339
|
+
), /* @__PURE__ */ React41.createElement(
|
|
1320
1340
|
Popover2,
|
|
1321
1341
|
{
|
|
1322
1342
|
disablePortal: true,
|
|
@@ -1326,7 +1346,7 @@ var RepeaterItem = ({
|
|
|
1326
1346
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
1327
1347
|
...popoverProps
|
|
1328
1348
|
},
|
|
1329
|
-
/* @__PURE__ */
|
|
1349
|
+
/* @__PURE__ */ React41.createElement(Box2, { p: 2 }, children({ anchorEl }))
|
|
1330
1350
|
));
|
|
1331
1351
|
};
|
|
1332
1352
|
|
|
@@ -1340,7 +1360,7 @@ var BoxShadowRepeater = () => {
|
|
|
1340
1360
|
value: newValue
|
|
1341
1361
|
});
|
|
1342
1362
|
};
|
|
1343
|
-
return /* @__PURE__ */
|
|
1363
|
+
return /* @__PURE__ */ React42.createElement(
|
|
1344
1364
|
Repeater,
|
|
1345
1365
|
{
|
|
1346
1366
|
values: boxShadowValues,
|
|
@@ -1355,7 +1375,7 @@ var BoxShadowRepeater = () => {
|
|
|
1355
1375
|
}
|
|
1356
1376
|
);
|
|
1357
1377
|
};
|
|
1358
|
-
var ItemIcon = ({ value }) => /* @__PURE__ */
|
|
1378
|
+
var ItemIcon = ({ value }) => /* @__PURE__ */ React42.createElement(UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
|
|
1359
1379
|
var ItemContent = ({
|
|
1360
1380
|
anchorEl,
|
|
1361
1381
|
value,
|
|
@@ -1367,7 +1387,7 @@ var ItemContent = ({
|
|
|
1367
1387
|
value: newValue
|
|
1368
1388
|
});
|
|
1369
1389
|
};
|
|
1370
|
-
return /* @__PURE__ */
|
|
1390
|
+
return /* @__PURE__ */ React42.createElement(Stack13, { gap: 1.5 }, /* @__PURE__ */ React42.createElement(Grid14, { container: true, spacing: 1 }, /* @__PURE__ */ React42.createElement(
|
|
1371
1391
|
Control5,
|
|
1372
1392
|
{
|
|
1373
1393
|
bind: "color",
|
|
@@ -1375,7 +1395,7 @@ var ItemContent = ({
|
|
|
1375
1395
|
label: __20("Color", "elementor"),
|
|
1376
1396
|
setValue: (v) => setShadow({ ...value.value, color: v })
|
|
1377
1397
|
},
|
|
1378
|
-
/* @__PURE__ */
|
|
1398
|
+
/* @__PURE__ */ React42.createElement(
|
|
1379
1399
|
ColorControl,
|
|
1380
1400
|
{
|
|
1381
1401
|
anchorEl,
|
|
@@ -1389,7 +1409,7 @@ var ItemContent = ({
|
|
|
1389
1409
|
}
|
|
1390
1410
|
}
|
|
1391
1411
|
)
|
|
1392
|
-
), /* @__PURE__ */
|
|
1412
|
+
), /* @__PURE__ */ React42.createElement(
|
|
1393
1413
|
Control5,
|
|
1394
1414
|
{
|
|
1395
1415
|
bind: "position",
|
|
@@ -1397,7 +1417,7 @@ var ItemContent = ({
|
|
|
1397
1417
|
label: __20("Position", "elementor"),
|
|
1398
1418
|
setValue: (v) => setShadow({ ...value.value, position: v })
|
|
1399
1419
|
},
|
|
1400
|
-
/* @__PURE__ */
|
|
1420
|
+
/* @__PURE__ */ React42.createElement(
|
|
1401
1421
|
SelectControl,
|
|
1402
1422
|
{
|
|
1403
1423
|
options: [
|
|
@@ -1406,7 +1426,7 @@ var ItemContent = ({
|
|
|
1406
1426
|
]
|
|
1407
1427
|
}
|
|
1408
1428
|
)
|
|
1409
|
-
)), /* @__PURE__ */
|
|
1429
|
+
)), /* @__PURE__ */ React42.createElement(Grid14, { container: true, spacing: 1 }, /* @__PURE__ */ React42.createElement(
|
|
1410
1430
|
Control5,
|
|
1411
1431
|
{
|
|
1412
1432
|
bind: "hOffset",
|
|
@@ -1414,8 +1434,8 @@ var ItemContent = ({
|
|
|
1414
1434
|
value: value.value.hOffset,
|
|
1415
1435
|
setValue: (v) => setShadow({ ...value.value, hOffset: v })
|
|
1416
1436
|
},
|
|
1417
|
-
/* @__PURE__ */
|
|
1418
|
-
), /* @__PURE__ */
|
|
1437
|
+
/* @__PURE__ */ React42.createElement(SizeControl, null)
|
|
1438
|
+
), /* @__PURE__ */ React42.createElement(
|
|
1419
1439
|
Control5,
|
|
1420
1440
|
{
|
|
1421
1441
|
label: __20("Vertical", "elementor"),
|
|
@@ -1423,8 +1443,8 @@ var ItemContent = ({
|
|
|
1423
1443
|
value: value.value.vOffset,
|
|
1424
1444
|
setValue: (v) => setShadow({ ...value.value, vOffset: v })
|
|
1425
1445
|
},
|
|
1426
|
-
/* @__PURE__ */
|
|
1427
|
-
)), /* @__PURE__ */
|
|
1446
|
+
/* @__PURE__ */ React42.createElement(SizeControl, null)
|
|
1447
|
+
)), /* @__PURE__ */ React42.createElement(Grid14, { container: true, spacing: 1 }, /* @__PURE__ */ React42.createElement(
|
|
1428
1448
|
Control5,
|
|
1429
1449
|
{
|
|
1430
1450
|
bind: "blur",
|
|
@@ -1432,8 +1452,8 @@ var ItemContent = ({
|
|
|
1432
1452
|
label: __20("Blur", "elementor"),
|
|
1433
1453
|
setValue: (v) => setShadow({ ...value.value, blur: v })
|
|
1434
1454
|
},
|
|
1435
|
-
/* @__PURE__ */
|
|
1436
|
-
), /* @__PURE__ */
|
|
1455
|
+
/* @__PURE__ */ React42.createElement(SizeControl, null)
|
|
1456
|
+
), /* @__PURE__ */ React42.createElement(
|
|
1437
1457
|
Control5,
|
|
1438
1458
|
{
|
|
1439
1459
|
bind: "spread",
|
|
@@ -1441,7 +1461,7 @@ var ItemContent = ({
|
|
|
1441
1461
|
value: value.value.spread,
|
|
1442
1462
|
setValue: (v) => setShadow({ ...value.value, spread: v })
|
|
1443
1463
|
},
|
|
1444
|
-
/* @__PURE__ */
|
|
1464
|
+
/* @__PURE__ */ React42.createElement(SizeControl, null)
|
|
1445
1465
|
)));
|
|
1446
1466
|
};
|
|
1447
1467
|
var Control5 = ({
|
|
@@ -1450,7 +1470,7 @@ var Control5 = ({
|
|
|
1450
1470
|
label,
|
|
1451
1471
|
bind,
|
|
1452
1472
|
children
|
|
1453
|
-
}) => /* @__PURE__ */
|
|
1473
|
+
}) => /* @__PURE__ */ React42.createElement(ControlContext.Provider, { value: { value, setValue, bind } }, /* @__PURE__ */ React42.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(Grid14, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React42.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(ControlLabel, null, label)), /* @__PURE__ */ React42.createElement(Grid14, { item: true, xs: 12 }, children))));
|
|
1454
1474
|
var ItemLabel = ({ value }) => {
|
|
1455
1475
|
const { position, hOffset, vOffset, blur, spread } = value.value;
|
|
1456
1476
|
const { size: hOffsetSize, unit: hOffsetUnit } = hOffset.value;
|
|
@@ -1463,7 +1483,7 @@ var ItemLabel = ({ value }) => {
|
|
|
1463
1483
|
blurSize + blurUnit,
|
|
1464
1484
|
spreadSize + spreadUnit
|
|
1465
1485
|
].join(" ");
|
|
1466
|
-
return /* @__PURE__ */
|
|
1486
|
+
return /* @__PURE__ */ React42.createElement("span", { style: { textTransform: "capitalize" } }, position, ": ", sizes);
|
|
1467
1487
|
};
|
|
1468
1488
|
var initialShadow = {
|
|
1469
1489
|
$$type: "shadow",
|
|
@@ -1494,7 +1514,25 @@ var initialShadow = {
|
|
|
1494
1514
|
|
|
1495
1515
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
1496
1516
|
var EffectsSection = () => {
|
|
1497
|
-
return /* @__PURE__ */
|
|
1517
|
+
return /* @__PURE__ */ React43.createElement(AccordionSection, { title: __21("Effects", "elementor") }, /* @__PURE__ */ React43.createElement(Stack14, { gap: 1.5 }, /* @__PURE__ */ React43.createElement(StyleControl, { bind: "box-shadow" }, /* @__PURE__ */ React43.createElement(BoxShadowRepeater, null))));
|
|
1518
|
+
};
|
|
1519
|
+
|
|
1520
|
+
// src/components/style-sections/background-section/background-section.tsx
|
|
1521
|
+
import * as React45 from "react";
|
|
1522
|
+
import { __ as __23 } from "@wordpress/i18n";
|
|
1523
|
+
import { Stack as Stack15 } from "@elementor/ui";
|
|
1524
|
+
|
|
1525
|
+
// src/components/style-sections/background-section/background-color-control.tsx
|
|
1526
|
+
import * as React44 from "react";
|
|
1527
|
+
import { __ as __22 } from "@wordpress/i18n";
|
|
1528
|
+
import { Grid as Grid15 } from "@elementor/ui";
|
|
1529
|
+
var BackgroundColorControl = () => {
|
|
1530
|
+
return /* @__PURE__ */ React44.createElement(StyleControl, { bind: "background-color" }, /* @__PURE__ */ React44.createElement(Grid15, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React44.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(StyleControl.Label, null, __22("Color", "elementor"))), /* @__PURE__ */ React44.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ColorControl, null))));
|
|
1531
|
+
};
|
|
1532
|
+
|
|
1533
|
+
// src/components/style-sections/background-section/background-section.tsx
|
|
1534
|
+
var BackgroundSection = () => {
|
|
1535
|
+
return /* @__PURE__ */ React45.createElement(AccordionSection, { title: __23("Background", "elementor") }, /* @__PURE__ */ React45.createElement(Stack15, { gap: 1.5 }, /* @__PURE__ */ React45.createElement(BackgroundColorControl, null)));
|
|
1498
1536
|
};
|
|
1499
1537
|
|
|
1500
1538
|
// src/components/style-tab.tsx
|
|
@@ -1502,10 +1540,10 @@ var CLASSES_PROP_KEY = "classes";
|
|
|
1502
1540
|
var StyleTab = () => {
|
|
1503
1541
|
const styleDefinition = useStyleDefinition();
|
|
1504
1542
|
const classesProp = useClassesProp();
|
|
1505
|
-
return /* @__PURE__ */
|
|
1543
|
+
return /* @__PURE__ */ React46.createElement(StyleContext, { selectedStyleDef: styleDefinition, selectedClassesProp: classesProp }, /* @__PURE__ */ React46.createElement(Stack16, null, /* @__PURE__ */ React46.createElement(SizeSection, null), /* @__PURE__ */ React46.createElement(PositionSection, null), /* @__PURE__ */ React46.createElement(TypographySection, null), /* @__PURE__ */ React46.createElement(BackgroundSection, null), /* @__PURE__ */ React46.createElement(SpacingSection, null), /* @__PURE__ */ React46.createElement(EffectsSection, null)));
|
|
1506
1544
|
};
|
|
1507
1545
|
function useClassesProp() {
|
|
1508
|
-
const { elementType } =
|
|
1546
|
+
const { elementType } = useElement();
|
|
1509
1547
|
const prop = Object.entries(elementType.propsSchema).find(
|
|
1510
1548
|
([, propType]) => propType.kind === "array" && propType.key === CLASSES_PROP_KEY
|
|
1511
1549
|
);
|
|
@@ -1515,7 +1553,7 @@ function useClassesProp() {
|
|
|
1515
1553
|
return prop[0];
|
|
1516
1554
|
}
|
|
1517
1555
|
function useStyleDefinition() {
|
|
1518
|
-
const { element } =
|
|
1556
|
+
const { element } = useElement();
|
|
1519
1557
|
const elementStyles = useElementStyles(element.id);
|
|
1520
1558
|
return Object.values(elementStyles || {})[0] ?? null;
|
|
1521
1559
|
}
|
|
@@ -1523,9 +1561,19 @@ function useStyleDefinition() {
|
|
|
1523
1561
|
// src/components/editing-panel-tabs.tsx
|
|
1524
1562
|
var EditingPanelTabs = () => {
|
|
1525
1563
|
const { getTabProps, getTabPanelProps, getTabsProps } = useTabs("settings");
|
|
1526
|
-
return /* @__PURE__ */
|
|
1564
|
+
return /* @__PURE__ */ React47.createElement(Stack17, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React47.createElement(Tabs, { variant: "fullWidth", indicatorColor: "secondary", textColor: "inherit", ...getTabsProps() }, /* @__PURE__ */ React47.createElement(Tab, { label: __24("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React47.createElement(Tab, { label: __24("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React47.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React47.createElement(SettingsTab, null)), /* @__PURE__ */ React47.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React47.createElement(StyleTab, null)));
|
|
1527
1565
|
};
|
|
1528
1566
|
|
|
1567
|
+
// src/components/editing-panel.tsx
|
|
1568
|
+
import { ErrorBoundary as ErrorBoundary2 } from "@elementor/ui";
|
|
1569
|
+
|
|
1570
|
+
// src/components/editing-panel-error-fallback.tsx
|
|
1571
|
+
import * as React48 from "react";
|
|
1572
|
+
import { Alert, Box as Box3 } from "@elementor/ui";
|
|
1573
|
+
function EditorPanelErrorFallback() {
|
|
1574
|
+
return /* @__PURE__ */ React48.createElement(Box3, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React48.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React48.createElement("strong", null, "Something went wrong")));
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1529
1577
|
// src/components/editing-panel.tsx
|
|
1530
1578
|
var EditingPanel = () => {
|
|
1531
1579
|
const elements = useSelectedElements();
|
|
@@ -1534,8 +1582,9 @@ var EditingPanel = () => {
|
|
|
1534
1582
|
if (elements.length !== 1 || !elementType) {
|
|
1535
1583
|
return null;
|
|
1536
1584
|
}
|
|
1537
|
-
const
|
|
1538
|
-
|
|
1585
|
+
const controlReplacement = getControlReplacement();
|
|
1586
|
+
const panelTitle = __25("Edit %s", "elementor").replace("%s", elementType.title);
|
|
1587
|
+
return /* @__PURE__ */ React49.createElement(ErrorBoundary2, { fallback: /* @__PURE__ */ React49.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React49.createElement(Panel, null, /* @__PURE__ */ React49.createElement(PanelHeader, null, /* @__PURE__ */ React49.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React49.createElement(PanelBody, null, /* @__PURE__ */ React49.createElement(ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React49.createElement(ElementProvider, { element: selectedElement, elementType }, /* @__PURE__ */ React49.createElement(EditingPanelTabs, null))))));
|
|
1539
1588
|
};
|
|
1540
1589
|
|
|
1541
1590
|
// src/panel.ts
|
|
@@ -1582,11 +1631,14 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
|
|
|
1582
1631
|
import { __privateBlockDataCommand as blockDataCommand } from "@elementor/editor-v1-adapters";
|
|
1583
1632
|
|
|
1584
1633
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
1585
|
-
import * as
|
|
1634
|
+
import * as React52 from "react";
|
|
1586
1635
|
import { useId as useId5 } from "react";
|
|
1587
1636
|
|
|
1588
1637
|
// src/dynamics/dynamic-control.tsx
|
|
1589
|
-
import * as
|
|
1638
|
+
import * as React50 from "react";
|
|
1639
|
+
|
|
1640
|
+
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
1641
|
+
import { useMemo as useMemo2 } from "react";
|
|
1590
1642
|
|
|
1591
1643
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
1592
1644
|
import { useMemo } from "react";
|
|
@@ -1609,7 +1661,7 @@ var getAtomicDynamicTags = () => {
|
|
|
1609
1661
|
};
|
|
1610
1662
|
};
|
|
1611
1663
|
|
|
1612
|
-
// src/props/is-transformable.ts
|
|
1664
|
+
// src/controls/props/is-transformable.ts
|
|
1613
1665
|
import { z } from "@elementor/schema";
|
|
1614
1666
|
var transformableSchema = z.object({
|
|
1615
1667
|
$$type: z.string(),
|
|
@@ -1636,7 +1688,7 @@ var supportsDynamic = (propType) => {
|
|
|
1636
1688
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
1637
1689
|
var usePropDynamicTags = (propName) => {
|
|
1638
1690
|
let categories = [];
|
|
1639
|
-
const { elementType } =
|
|
1691
|
+
const { elementType } = useElement();
|
|
1640
1692
|
const propType = elementType.propsSchema?.[propName];
|
|
1641
1693
|
if (propType) {
|
|
1642
1694
|
const propDynamicType = getDynamicPropType(propType);
|
|
@@ -1656,7 +1708,6 @@ var getDynamicTagsByCategories = (categories) => {
|
|
|
1656
1708
|
};
|
|
1657
1709
|
|
|
1658
1710
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
1659
|
-
import { useMemo as useMemo2 } from "react";
|
|
1660
1711
|
var useDynamicTag = (propName, tagName) => {
|
|
1661
1712
|
const dynamicTags = usePropDynamicTags(propName);
|
|
1662
1713
|
return useMemo2(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
|
|
@@ -1684,35 +1735,35 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
1684
1735
|
}
|
|
1685
1736
|
});
|
|
1686
1737
|
};
|
|
1687
|
-
return /* @__PURE__ */
|
|
1738
|
+
return /* @__PURE__ */ React50.createElement(ControlContext.Provider, { value: { setValue: setDynamicValue, value: dynamicValue, bind } }, children);
|
|
1688
1739
|
};
|
|
1689
1740
|
|
|
1690
1741
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
1691
1742
|
import { DatabaseIcon, SettingsIcon, XIcon as XIcon3 } from "@elementor/icons";
|
|
1692
1743
|
|
|
1693
1744
|
// src/dynamics/components/dynamic-selection.tsx
|
|
1694
|
-
import * as
|
|
1745
|
+
import * as React51 from "react";
|
|
1695
1746
|
import { useState as useState4, Fragment as Fragment4 } from "react";
|
|
1696
1747
|
import { SearchIcon, PhotoIcon } from "@elementor/icons";
|
|
1697
1748
|
import {
|
|
1698
|
-
Box as
|
|
1749
|
+
Box as Box4,
|
|
1699
1750
|
Divider as Divider3,
|
|
1700
1751
|
InputAdornment as InputAdornment3,
|
|
1701
1752
|
Link,
|
|
1702
1753
|
ListSubheader,
|
|
1703
1754
|
MenuItem as MenuItem3,
|
|
1704
1755
|
MenuList,
|
|
1705
|
-
Stack as
|
|
1756
|
+
Stack as Stack18,
|
|
1706
1757
|
TextField as TextField5,
|
|
1707
1758
|
Typography as Typography4
|
|
1708
1759
|
} from "@elementor/ui";
|
|
1709
|
-
import { __ as
|
|
1760
|
+
import { __ as __26 } from "@wordpress/i18n";
|
|
1710
1761
|
|
|
1711
1762
|
// src/dynamics/hooks/use-prop-value-history.ts
|
|
1712
1763
|
var PROPS_VALUES_HISTORY_KEY = "elementor/dynamic/non-dynamic-values-history";
|
|
1713
1764
|
var usePropValueHistory = (path) => {
|
|
1714
1765
|
const valuesHistory = getValues();
|
|
1715
|
-
const { element } =
|
|
1766
|
+
const { element } = useElement();
|
|
1716
1767
|
const key = `${element.id}-${path}`;
|
|
1717
1768
|
const value = valuesHistory[key] ?? null;
|
|
1718
1769
|
const setValue = (newValue) => {
|
|
@@ -1746,21 +1797,21 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
1746
1797
|
setValue({ $$type: "dynamic", value: { name: value, settings: {} } });
|
|
1747
1798
|
onSelect?.();
|
|
1748
1799
|
};
|
|
1749
|
-
return /* @__PURE__ */
|
|
1800
|
+
return /* @__PURE__ */ React51.createElement(Stack18, null, /* @__PURE__ */ React51.createElement(Box4, { px: 1.5, pb: 1 }, /* @__PURE__ */ React51.createElement(
|
|
1750
1801
|
TextField5,
|
|
1751
1802
|
{
|
|
1752
1803
|
fullWidth: true,
|
|
1753
1804
|
size: SIZE3,
|
|
1754
1805
|
value: searchValue,
|
|
1755
1806
|
onChange: handleSearch,
|
|
1756
|
-
placeholder:
|
|
1807
|
+
placeholder: __26("Search dynamic tag", "elementor"),
|
|
1757
1808
|
InputProps: {
|
|
1758
|
-
startAdornment: /* @__PURE__ */
|
|
1809
|
+
startAdornment: /* @__PURE__ */ React51.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React51.createElement(SearchIcon, { fontSize: SIZE3 }))
|
|
1759
1810
|
}
|
|
1760
1811
|
}
|
|
1761
|
-
)), /* @__PURE__ */
|
|
1812
|
+
)), /* @__PURE__ */ React51.createElement(Divider3, null), /* @__PURE__ */ React51.createElement(Box4, { sx: { overflowY: "auto", height: 260, width: 220 } }, options4.length > 0 ? /* @__PURE__ */ React51.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options4.map(([category, items], index) => /* @__PURE__ */ React51.createElement(Fragment4, { key: index }, /* @__PURE__ */ React51.createElement(ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, dynamicGroups?.[category]?.title || category), items.map(({ value, label: tagLabel }) => {
|
|
1762
1813
|
const isSelected = isCurrentValueDynamic && value === currentValue?.value?.name;
|
|
1763
|
-
return /* @__PURE__ */
|
|
1814
|
+
return /* @__PURE__ */ React51.createElement(
|
|
1764
1815
|
MenuItem3,
|
|
1765
1816
|
{
|
|
1766
1817
|
key: value,
|
|
@@ -1771,7 +1822,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
1771
1822
|
},
|
|
1772
1823
|
tagLabel
|
|
1773
1824
|
);
|
|
1774
|
-
})))) : /* @__PURE__ */
|
|
1825
|
+
})))) : /* @__PURE__ */ React51.createElement(Stack18, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React51.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React51.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, __26("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React51.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React51.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React51.createElement(
|
|
1775
1826
|
Link,
|
|
1776
1827
|
{
|
|
1777
1828
|
color: "secondary",
|
|
@@ -1779,8 +1830,8 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
1779
1830
|
component: "button",
|
|
1780
1831
|
onClick: () => setSearchValue("")
|
|
1781
1832
|
},
|
|
1782
|
-
|
|
1783
|
-
), "\xA0",
|
|
1833
|
+
__26("Clear the filters", "elementor")
|
|
1834
|
+
), "\xA0", __26("and try again.", "elementor")))));
|
|
1784
1835
|
};
|
|
1785
1836
|
var useFilteredOptions = (bind, searchValue) => {
|
|
1786
1837
|
const dynamicTags = usePropDynamicTags(bind);
|
|
@@ -1802,11 +1853,11 @@ var useFilteredOptions = (bind, searchValue) => {
|
|
|
1802
1853
|
import {
|
|
1803
1854
|
bindPopover as bindPopover3,
|
|
1804
1855
|
bindTrigger as bindTrigger3,
|
|
1805
|
-
Box as
|
|
1856
|
+
Box as Box5,
|
|
1806
1857
|
IconButton as IconButton3,
|
|
1807
1858
|
Paper,
|
|
1808
1859
|
Popover as Popover3,
|
|
1809
|
-
Stack as
|
|
1860
|
+
Stack as Stack19,
|
|
1810
1861
|
Typography as Typography5,
|
|
1811
1862
|
UnstableTag as Tag,
|
|
1812
1863
|
usePopupState as usePopupState4,
|
|
@@ -1816,7 +1867,7 @@ import {
|
|
|
1816
1867
|
Tab as Tab2,
|
|
1817
1868
|
TabPanel as TabPanel2
|
|
1818
1869
|
} from "@elementor/ui";
|
|
1819
|
-
import { __ as
|
|
1870
|
+
import { __ as __27 } from "@wordpress/i18n";
|
|
1820
1871
|
var SIZE4 = "tiny";
|
|
1821
1872
|
var DynamicSelectionControl = () => {
|
|
1822
1873
|
const { bind, value, setValue } = useControl();
|
|
@@ -1831,25 +1882,25 @@ var DynamicSelectionControl = () => {
|
|
|
1831
1882
|
if (!dynamicTag) {
|
|
1832
1883
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
1833
1884
|
}
|
|
1834
|
-
return /* @__PURE__ */
|
|
1885
|
+
return /* @__PURE__ */ React52.createElement(Box5, null, /* @__PURE__ */ React52.createElement(
|
|
1835
1886
|
Tag,
|
|
1836
1887
|
{
|
|
1837
1888
|
fullWidth: true,
|
|
1838
1889
|
showActionsOnHover: true,
|
|
1839
1890
|
label: dynamicTag.label,
|
|
1840
|
-
startIcon: /* @__PURE__ */
|
|
1891
|
+
startIcon: /* @__PURE__ */ React52.createElement(DatabaseIcon, { fontSize: SIZE4 }),
|
|
1841
1892
|
...bindTrigger3(selectionPopoverState),
|
|
1842
|
-
actions: /* @__PURE__ */
|
|
1893
|
+
actions: /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React52.createElement(
|
|
1843
1894
|
IconButton3,
|
|
1844
1895
|
{
|
|
1845
1896
|
size: SIZE4,
|
|
1846
1897
|
onClick: removeDynamicTag,
|
|
1847
|
-
"aria-label":
|
|
1898
|
+
"aria-label": __27("Remove dynamic value", "elementor")
|
|
1848
1899
|
},
|
|
1849
|
-
/* @__PURE__ */
|
|
1900
|
+
/* @__PURE__ */ React52.createElement(XIcon3, { fontSize: SIZE4 })
|
|
1850
1901
|
))
|
|
1851
1902
|
}
|
|
1852
|
-
), /* @__PURE__ */
|
|
1903
|
+
), /* @__PURE__ */ React52.createElement(
|
|
1853
1904
|
Popover3,
|
|
1854
1905
|
{
|
|
1855
1906
|
disablePortal: true,
|
|
@@ -1857,7 +1908,7 @@ var DynamicSelectionControl = () => {
|
|
|
1857
1908
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
1858
1909
|
...bindPopover3(selectionPopoverState)
|
|
1859
1910
|
},
|
|
1860
|
-
/* @__PURE__ */
|
|
1911
|
+
/* @__PURE__ */ React52.createElement(Stack19, null, /* @__PURE__ */ React52.createElement(Stack19, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React52.createElement(DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React52.createElement(Typography5, { variant: "subtitle2" }, __27("Dynamic Tags", "elementor")), /* @__PURE__ */ React52.createElement(IconButton3, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React52.createElement(XIcon3, { fontSize: SIZE4 }))), /* @__PURE__ */ React52.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
1861
1912
|
));
|
|
1862
1913
|
};
|
|
1863
1914
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
@@ -1867,22 +1918,22 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
|
1867
1918
|
if (!hasDynamicSettings) {
|
|
1868
1919
|
return null;
|
|
1869
1920
|
}
|
|
1870
|
-
return /* @__PURE__ */
|
|
1921
|
+
return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(
|
|
1871
1922
|
IconButton3,
|
|
1872
1923
|
{
|
|
1873
1924
|
size: SIZE4,
|
|
1874
1925
|
...bindTrigger3(settingsPopupState),
|
|
1875
|
-
"aria-label":
|
|
1926
|
+
"aria-label": __27("Settings", "elementor")
|
|
1876
1927
|
},
|
|
1877
|
-
/* @__PURE__ */
|
|
1878
|
-
), /* @__PURE__ */
|
|
1928
|
+
/* @__PURE__ */ React52.createElement(SettingsIcon, { fontSize: SIZE4 })
|
|
1929
|
+
), /* @__PURE__ */ React52.createElement(
|
|
1879
1930
|
Popover3,
|
|
1880
1931
|
{
|
|
1881
1932
|
disableScrollLock: true,
|
|
1882
1933
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
1883
1934
|
...bindPopover3(settingsPopupState)
|
|
1884
1935
|
},
|
|
1885
|
-
/* @__PURE__ */
|
|
1936
|
+
/* @__PURE__ */ React52.createElement(Paper, { component: Stack19, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React52.createElement(Stack19, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React52.createElement(DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React52.createElement(Typography5, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React52.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React52.createElement(XIcon3, { fontSize: SIZE4 }))), /* @__PURE__ */ React52.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
1886
1937
|
));
|
|
1887
1938
|
};
|
|
1888
1939
|
var DynamicSettings = ({ controls }) => {
|
|
@@ -1891,10 +1942,10 @@ var DynamicSettings = ({ controls }) => {
|
|
|
1891
1942
|
if (!tabs.length) {
|
|
1892
1943
|
return null;
|
|
1893
1944
|
}
|
|
1894
|
-
return /* @__PURE__ */
|
|
1895
|
-
return /* @__PURE__ */
|
|
1945
|
+
return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(Tabs2, { indicatorColor: "secondary", textColor: "secondary", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React52.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React52.createElement(Divider4, null), tabs.map(({ value }, index) => {
|
|
1946
|
+
return /* @__PURE__ */ React52.createElement(TabPanel2, { key: index, sx: { flexGrow: 1 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React52.createElement(Stack19, { gap: 1, px: 2 }, value.items.map((item) => {
|
|
1896
1947
|
if (item.type === "control") {
|
|
1897
|
-
return /* @__PURE__ */
|
|
1948
|
+
return /* @__PURE__ */ React52.createElement(Control6, { key: item.value.bind, control: item.value });
|
|
1898
1949
|
}
|
|
1899
1950
|
return null;
|
|
1900
1951
|
})));
|
|
@@ -1904,23 +1955,23 @@ var Control6 = ({ control }) => {
|
|
|
1904
1955
|
if (!getControlByType(control.type)) {
|
|
1905
1956
|
return null;
|
|
1906
1957
|
}
|
|
1907
|
-
return /* @__PURE__ */
|
|
1958
|
+
return /* @__PURE__ */ React52.createElement(DynamicControl, { bind: control.bind }, control.label ? /* @__PURE__ */ React52.createElement(ControlLabel, null, control.label) : null, /* @__PURE__ */ React52.createElement(Control, { type: control.type, props: control.props }));
|
|
1908
1959
|
};
|
|
1909
1960
|
|
|
1910
1961
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
1911
|
-
import * as
|
|
1962
|
+
import * as React53 from "react";
|
|
1912
1963
|
import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
|
|
1913
|
-
import { __ as
|
|
1964
|
+
import { __ as __28 } from "@wordpress/i18n";
|
|
1914
1965
|
var usePropDynamicAction = () => {
|
|
1915
1966
|
const { bind } = useControl();
|
|
1916
|
-
const { elementType } =
|
|
1967
|
+
const { elementType } = useElement();
|
|
1917
1968
|
const propType = elementType.propsSchema[bind];
|
|
1918
1969
|
const visible = !!propType && supportsDynamic(propType);
|
|
1919
1970
|
return {
|
|
1920
1971
|
visible,
|
|
1921
1972
|
icon: DatabaseIcon2,
|
|
1922
|
-
title:
|
|
1923
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
1973
|
+
title: __28("Dynamic Tags", "elementor"),
|
|
1974
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React53.createElement(DynamicSelection, { onSelect: closePopover })
|
|
1924
1975
|
};
|
|
1925
1976
|
};
|
|
1926
1977
|
|