@elementor/editor-controls 0.31.0 → 0.32.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 +17 -0
- package/dist/index.d.mts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +282 -178
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +233 -131
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
- package/src/controls/aspect-ratio-control.tsx +121 -0
- package/src/controls/link-control.tsx +1 -1
- package/src/controls/switch-control.tsx +20 -0
- package/src/index.ts +2 -0
package/dist/index.js
CHANGED
|
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
+
AspectRatioControl: () => AspectRatioControl,
|
|
33
34
|
BackgroundControl: () => BackgroundControl,
|
|
34
35
|
BoxShadowRepeaterControl: () => BoxShadowRepeaterControl,
|
|
35
36
|
ColorControl: () => ColorControl,
|
|
@@ -52,6 +53,7 @@ __export(index_exports, {
|
|
|
52
53
|
SizeControl: () => SizeControl,
|
|
53
54
|
StrokeControl: () => StrokeControl,
|
|
54
55
|
SvgMediaControl: () => SvgMediaControl,
|
|
56
|
+
SwitchControl: () => SwitchControl2,
|
|
55
57
|
TextAreaControl: () => TextAreaControl,
|
|
56
58
|
TextControl: () => TextControl,
|
|
57
59
|
ToggleControl: () => ToggleControl,
|
|
@@ -2059,7 +2061,7 @@ var LinkControl = createControl((props) => {
|
|
|
2059
2061
|
setValue(linkSessionValue.value);
|
|
2060
2062
|
}
|
|
2061
2063
|
setLinkSessionValue({
|
|
2062
|
-
value:
|
|
2064
|
+
value: linkSessionValue?.value,
|
|
2063
2065
|
meta: { isEnabled: newState }
|
|
2064
2066
|
});
|
|
2065
2067
|
};
|
|
@@ -2258,33 +2260,121 @@ var Control4 = ({ bind, isLinked }) => {
|
|
|
2258
2260
|
return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React36.createElement(SizeControl, null));
|
|
2259
2261
|
};
|
|
2260
2262
|
|
|
2261
|
-
// src/controls/
|
|
2262
|
-
var
|
|
2263
|
-
var
|
|
2263
|
+
// src/controls/aspect-ratio-control.tsx
|
|
2264
|
+
var React37 = __toESM(require("react"));
|
|
2265
|
+
var import_react16 = require("react");
|
|
2264
2266
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
2267
|
+
var import_editor_ui4 = require("@elementor/editor-ui");
|
|
2268
|
+
var import_ui30 = require("@elementor/ui");
|
|
2269
|
+
var import_i18n11 = require("@wordpress/i18n");
|
|
2270
|
+
var RATIO_OPTIONS = [
|
|
2271
|
+
{ label: (0, import_i18n11.__)("Auto", "elementor"), value: "auto" },
|
|
2272
|
+
{ label: "1/1", value: "1/1" },
|
|
2273
|
+
{ label: "4/3", value: "4/3" },
|
|
2274
|
+
{ label: "3/4", value: "3/4" },
|
|
2275
|
+
{ label: "16/9", value: "16/9" },
|
|
2276
|
+
{ label: "9/16", value: "9/16" },
|
|
2277
|
+
{ label: "3/2", value: "3/2" },
|
|
2278
|
+
{ label: "2/3", value: "2/3" }
|
|
2279
|
+
];
|
|
2280
|
+
var CUSTOM_RATIO = "custom";
|
|
2281
|
+
var AspectRatioControl = createControl(({ label }) => {
|
|
2282
|
+
const { value: aspectRatioValue, setValue: setAspectRatioValue } = useBoundProp(import_editor_props18.stringPropTypeUtil);
|
|
2283
|
+
const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
|
|
2284
|
+
const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
|
|
2285
|
+
const [isCustom, setIsCustom] = (0, import_react16.useState)(isCustomSelected);
|
|
2286
|
+
const [customWidth, setCustomWidth] = (0, import_react16.useState)(initialWidth);
|
|
2287
|
+
const [customHeight, setCustomHeight] = (0, import_react16.useState)(initialHeight);
|
|
2288
|
+
const [selectedValue, setSelectedValue] = (0, import_react16.useState)(
|
|
2289
|
+
isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
|
|
2290
|
+
);
|
|
2291
|
+
const handleSelectChange = (event) => {
|
|
2292
|
+
const newValue = event.target.value;
|
|
2293
|
+
const isCustomRatio = newValue === CUSTOM_RATIO;
|
|
2294
|
+
setIsCustom(isCustomRatio);
|
|
2295
|
+
setSelectedValue(newValue);
|
|
2296
|
+
if (isCustomRatio) {
|
|
2297
|
+
return;
|
|
2298
|
+
}
|
|
2299
|
+
setAspectRatioValue(newValue);
|
|
2300
|
+
};
|
|
2301
|
+
const handleCustomWidthChange = (event) => {
|
|
2302
|
+
const newWidth = event.target.value;
|
|
2303
|
+
setCustomWidth(newWidth);
|
|
2304
|
+
if (newWidth && customHeight) {
|
|
2305
|
+
setAspectRatioValue(`${newWidth}/${customHeight}`);
|
|
2306
|
+
}
|
|
2307
|
+
};
|
|
2308
|
+
const handleCustomHeightChange = (event) => {
|
|
2309
|
+
const newHeight = event.target.value;
|
|
2310
|
+
setCustomHeight(newHeight);
|
|
2311
|
+
if (customWidth && newHeight) {
|
|
2312
|
+
setAspectRatioValue(`${customWidth}/${newHeight}`);
|
|
2313
|
+
}
|
|
2314
|
+
};
|
|
2315
|
+
return /* @__PURE__ */ React37.createElement(import_ui30.Stack, { direction: "column", gap: 2 }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label)), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
|
|
2316
|
+
import_ui30.Select,
|
|
2317
|
+
{
|
|
2318
|
+
sx: { overflow: "hidden" },
|
|
2319
|
+
displayEmpty: true,
|
|
2320
|
+
size: "tiny",
|
|
2321
|
+
value: selectedValue,
|
|
2322
|
+
onChange: handleSelectChange,
|
|
2323
|
+
fullWidth: true
|
|
2324
|
+
},
|
|
2325
|
+
[...RATIO_OPTIONS, { label: (0, import_i18n11.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
|
|
2326
|
+
({ label: optionLabel, ...props }) => /* @__PURE__ */ React37.createElement(import_editor_ui4.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
|
|
2327
|
+
)
|
|
2328
|
+
))), isCustom && /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
|
|
2329
|
+
import_ui30.TextField,
|
|
2330
|
+
{
|
|
2331
|
+
size: "tiny",
|
|
2332
|
+
type: "number",
|
|
2333
|
+
fullWidth: true,
|
|
2334
|
+
value: customWidth,
|
|
2335
|
+
onChange: handleCustomWidthChange,
|
|
2336
|
+
placeholder: (0, import_i18n11.__)("Width", "elementor")
|
|
2337
|
+
}
|
|
2338
|
+
)), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
|
|
2339
|
+
import_ui30.TextField,
|
|
2340
|
+
{
|
|
2341
|
+
size: "tiny",
|
|
2342
|
+
type: "number",
|
|
2343
|
+
fullWidth: true,
|
|
2344
|
+
value: customHeight,
|
|
2345
|
+
onChange: handleCustomHeightChange,
|
|
2346
|
+
placeholder: (0, import_i18n11.__)("Height", "elementor")
|
|
2347
|
+
}
|
|
2348
|
+
))));
|
|
2349
|
+
});
|
|
2350
|
+
|
|
2351
|
+
// src/controls/svg-media-control.tsx
|
|
2352
|
+
var React39 = __toESM(require("react"));
|
|
2353
|
+
var import_react18 = require("react");
|
|
2354
|
+
var import_editor_props19 = require("@elementor/editor-props");
|
|
2265
2355
|
var import_icons10 = require("@elementor/icons");
|
|
2266
|
-
var
|
|
2356
|
+
var import_ui32 = require("@elementor/ui");
|
|
2267
2357
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
2268
|
-
var
|
|
2358
|
+
var import_i18n13 = require("@wordpress/i18n");
|
|
2269
2359
|
|
|
2270
2360
|
// src/components/enable-unfiltered-modal.tsx
|
|
2271
|
-
var
|
|
2272
|
-
var
|
|
2361
|
+
var React38 = __toESM(require("react"));
|
|
2362
|
+
var import_react17 = require("react");
|
|
2273
2363
|
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
2274
|
-
var
|
|
2275
|
-
var
|
|
2276
|
-
var ADMIN_TITLE_TEXT = (0,
|
|
2277
|
-
var ADMIN_CONTENT_TEXT = (0,
|
|
2364
|
+
var import_ui31 = require("@elementor/ui");
|
|
2365
|
+
var import_i18n12 = require("@wordpress/i18n");
|
|
2366
|
+
var ADMIN_TITLE_TEXT = (0, import_i18n12.__)("Enable Unfiltered Uploads", "elementor");
|
|
2367
|
+
var ADMIN_CONTENT_TEXT = (0, import_i18n12.__)(
|
|
2278
2368
|
"Before you enable unfiltered files upload, note that such files include a security risk. Elementor does run a process to remove possible malicious code, but there is still risk involved when using such files.",
|
|
2279
2369
|
"elementor"
|
|
2280
2370
|
);
|
|
2281
|
-
var NON_ADMIN_TITLE_TEXT = (0,
|
|
2282
|
-
var NON_ADMIN_CONTENT_TEXT = (0,
|
|
2371
|
+
var NON_ADMIN_TITLE_TEXT = (0, import_i18n12.__)("Sorry, you can't upload that file yet", "elementor");
|
|
2372
|
+
var NON_ADMIN_CONTENT_TEXT = (0, import_i18n12.__)(
|
|
2283
2373
|
"This is because this file type may pose a security risk. To upload them anyway, ask the site administrator to enable unfiltered file uploads.",
|
|
2284
2374
|
"elementor"
|
|
2285
2375
|
);
|
|
2286
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT1 = (0,
|
|
2287
|
-
var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0,
|
|
2376
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT1 = (0, import_i18n12.__)("Failed to enable unfiltered files upload.", "elementor");
|
|
2377
|
+
var ADMIN_FAILED_CONTENT_TEXT_PT2 = (0, import_i18n12.__)(
|
|
2288
2378
|
"You can try again, if the problem persists, please contact support.",
|
|
2289
2379
|
"elementor"
|
|
2290
2380
|
);
|
|
@@ -2292,7 +2382,7 @@ var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
|
|
|
2292
2382
|
var EnableUnfilteredModal = (props) => {
|
|
2293
2383
|
const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
|
|
2294
2384
|
const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
|
|
2295
|
-
const [isError, setIsError] = (0,
|
|
2385
|
+
const [isError, setIsError] = (0, import_react17.useState)(false);
|
|
2296
2386
|
const canManageOptions = canUser("manage_options");
|
|
2297
2387
|
const onClose = (enabled) => {
|
|
2298
2388
|
props.onClose(enabled);
|
|
@@ -2311,10 +2401,10 @@ var EnableUnfilteredModal = (props) => {
|
|
|
2311
2401
|
}
|
|
2312
2402
|
};
|
|
2313
2403
|
const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
|
|
2314
|
-
return canManageOptions ? /* @__PURE__ */
|
|
2404
|
+
return canManageOptions ? /* @__PURE__ */ React38.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React38.createElement(NonAdminDialog, { ...dialogProps });
|
|
2315
2405
|
};
|
|
2316
|
-
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */
|
|
2317
|
-
|
|
2406
|
+
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React38.createElement(import_ui31.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React38.createElement(import_ui31.DialogHeader, { logo: false }, /* @__PURE__ */ React38.createElement(import_ui31.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React38.createElement(import_ui31.Divider, null), /* @__PURE__ */ React38.createElement(import_ui31.DialogContent, null, /* @__PURE__ */ React38.createElement(import_ui31.DialogContentText, null, isError ? /* @__PURE__ */ React38.createElement(React38.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React38.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React38.createElement(import_ui31.DialogActions, null, /* @__PURE__ */ React38.createElement(import_ui31.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n12.__)("Cancel", "elementor")), /* @__PURE__ */ React38.createElement(
|
|
2407
|
+
import_ui31.Button,
|
|
2318
2408
|
{
|
|
2319
2409
|
size: "medium",
|
|
2320
2410
|
onClick: () => handleEnable(),
|
|
@@ -2322,16 +2412,16 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
2322
2412
|
color: "primary",
|
|
2323
2413
|
disabled: isPending
|
|
2324
2414
|
},
|
|
2325
|
-
isPending ? /* @__PURE__ */
|
|
2415
|
+
isPending ? /* @__PURE__ */ React38.createElement(import_ui31.CircularProgress, { size: 24 }) : (0, import_i18n12.__)("Enable", "elementor")
|
|
2326
2416
|
)));
|
|
2327
|
-
var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */
|
|
2417
|
+
var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React38.createElement(import_ui31.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React38.createElement(import_ui31.DialogHeader, { logo: false }, /* @__PURE__ */ React38.createElement(import_ui31.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React38.createElement(import_ui31.Divider, null), /* @__PURE__ */ React38.createElement(import_ui31.DialogContent, null, /* @__PURE__ */ React38.createElement(import_ui31.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React38.createElement(import_ui31.DialogActions, null, /* @__PURE__ */ React38.createElement(import_ui31.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n12.__)("Got it", "elementor"))));
|
|
2328
2418
|
|
|
2329
2419
|
// src/controls/svg-media-control.tsx
|
|
2330
2420
|
var TILE_SIZE = 8;
|
|
2331
2421
|
var TILE_WHITE = "transparent";
|
|
2332
2422
|
var TILE_BLACK = "#c1c1c1";
|
|
2333
2423
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
2334
|
-
var StyledCard = (0,
|
|
2424
|
+
var StyledCard = (0, import_ui32.styled)(import_ui32.Card)`
|
|
2335
2425
|
background-color: white;
|
|
2336
2426
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
2337
2427
|
background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
|
|
@@ -2340,7 +2430,7 @@ var StyledCard = (0, import_ui31.styled)(import_ui31.Card)`
|
|
|
2340
2430
|
${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
|
|
2341
2431
|
border: none;
|
|
2342
2432
|
`;
|
|
2343
|
-
var StyledCardMediaContainer = (0,
|
|
2433
|
+
var StyledCardMediaContainer = (0, import_ui32.styled)(import_ui32.Stack)`
|
|
2344
2434
|
position: relative;
|
|
2345
2435
|
height: 140px;
|
|
2346
2436
|
object-fit: contain;
|
|
@@ -2352,12 +2442,12 @@ var StyledCardMediaContainer = (0, import_ui31.styled)(import_ui31.Stack)`
|
|
|
2352
2442
|
var MODE_BROWSE = { mode: "browse" };
|
|
2353
2443
|
var MODE_UPLOAD = { mode: "upload" };
|
|
2354
2444
|
var SvgMediaControl = createControl(() => {
|
|
2355
|
-
const { value, setValue } = useBoundProp(
|
|
2445
|
+
const { value, setValue } = useBoundProp(import_editor_props19.imageSrcPropTypeUtil);
|
|
2356
2446
|
const { id, url } = value ?? {};
|
|
2357
2447
|
const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
|
|
2358
2448
|
const src = attachment?.url ?? url?.value ?? null;
|
|
2359
2449
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
2360
|
-
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0,
|
|
2450
|
+
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react18.useState)(false);
|
|
2361
2451
|
const { open } = (0, import_wp_media2.useWpMediaFrame)({
|
|
2362
2452
|
mediaTypes: ["svg"],
|
|
2363
2453
|
multiple: false,
|
|
@@ -2385,16 +2475,16 @@ var SvgMediaControl = createControl(() => {
|
|
|
2385
2475
|
open(openOptions);
|
|
2386
2476
|
}
|
|
2387
2477
|
};
|
|
2388
|
-
return /* @__PURE__ */
|
|
2389
|
-
|
|
2478
|
+
return /* @__PURE__ */ React39.createElement(import_ui32.Stack, { gap: 1 }, /* @__PURE__ */ React39.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React39.createElement(ControlFormLabel, null, " ", (0, import_i18n13.__)("SVG", "elementor"), " "), /* @__PURE__ */ React39.createElement(ControlActions, null, /* @__PURE__ */ React39.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React39.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React39.createElement(import_ui32.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React39.createElement(
|
|
2479
|
+
import_ui32.CardMedia,
|
|
2390
2480
|
{
|
|
2391
2481
|
component: "img",
|
|
2392
2482
|
image: src,
|
|
2393
|
-
alt: (0,
|
|
2483
|
+
alt: (0, import_i18n13.__)("Preview SVG", "elementor"),
|
|
2394
2484
|
sx: { maxHeight: "140px", width: "50px" }
|
|
2395
2485
|
}
|
|
2396
|
-
)), /* @__PURE__ */
|
|
2397
|
-
|
|
2486
|
+
)), /* @__PURE__ */ React39.createElement(
|
|
2487
|
+
import_ui32.CardOverlay,
|
|
2398
2488
|
{
|
|
2399
2489
|
sx: {
|
|
2400
2490
|
"&:hover": {
|
|
@@ -2402,69 +2492,69 @@ var SvgMediaControl = createControl(() => {
|
|
|
2402
2492
|
}
|
|
2403
2493
|
}
|
|
2404
2494
|
},
|
|
2405
|
-
/* @__PURE__ */
|
|
2406
|
-
|
|
2495
|
+
/* @__PURE__ */ React39.createElement(import_ui32.Stack, { gap: 1 }, /* @__PURE__ */ React39.createElement(
|
|
2496
|
+
import_ui32.Button,
|
|
2407
2497
|
{
|
|
2408
2498
|
size: "tiny",
|
|
2409
2499
|
color: "inherit",
|
|
2410
2500
|
variant: "outlined",
|
|
2411
2501
|
onClick: () => handleClick(MODE_BROWSE)
|
|
2412
2502
|
},
|
|
2413
|
-
(0,
|
|
2414
|
-
), /* @__PURE__ */
|
|
2415
|
-
|
|
2503
|
+
(0, import_i18n13.__)("Select SVG", "elementor")
|
|
2504
|
+
), /* @__PURE__ */ React39.createElement(
|
|
2505
|
+
import_ui32.Button,
|
|
2416
2506
|
{
|
|
2417
2507
|
size: "tiny",
|
|
2418
2508
|
variant: "text",
|
|
2419
2509
|
color: "inherit",
|
|
2420
|
-
startIcon: /* @__PURE__ */
|
|
2510
|
+
startIcon: /* @__PURE__ */ React39.createElement(import_icons10.UploadIcon, null),
|
|
2421
2511
|
onClick: () => handleClick(MODE_UPLOAD)
|
|
2422
2512
|
},
|
|
2423
|
-
(0,
|
|
2513
|
+
(0, import_i18n13.__)("Upload", "elementor")
|
|
2424
2514
|
))
|
|
2425
2515
|
))));
|
|
2426
2516
|
});
|
|
2427
2517
|
|
|
2428
2518
|
// src/controls/background-control/background-control.tsx
|
|
2429
|
-
var
|
|
2430
|
-
var
|
|
2519
|
+
var React46 = __toESM(require("react"));
|
|
2520
|
+
var import_editor_props25 = require("@elementor/editor-props");
|
|
2431
2521
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
2432
|
-
var
|
|
2433
|
-
var
|
|
2522
|
+
var import_ui40 = require("@elementor/ui");
|
|
2523
|
+
var import_i18n19 = require("@wordpress/i18n");
|
|
2434
2524
|
|
|
2435
2525
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
2436
|
-
var
|
|
2437
|
-
var
|
|
2438
|
-
var
|
|
2526
|
+
var React45 = __toESM(require("react"));
|
|
2527
|
+
var import_editor_props24 = require("@elementor/editor-props");
|
|
2528
|
+
var import_ui39 = require("@elementor/ui");
|
|
2439
2529
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
2440
|
-
var
|
|
2530
|
+
var import_i18n18 = require("@wordpress/i18n");
|
|
2441
2531
|
|
|
2442
2532
|
// src/env.ts
|
|
2443
2533
|
var import_env = require("@elementor/env");
|
|
2444
2534
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
2445
2535
|
|
|
2446
2536
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
2447
|
-
var
|
|
2448
|
-
var
|
|
2449
|
-
var
|
|
2537
|
+
var React40 = __toESM(require("react"));
|
|
2538
|
+
var import_editor_props20 = require("@elementor/editor-props");
|
|
2539
|
+
var import_ui33 = require("@elementor/ui");
|
|
2450
2540
|
var BackgroundGradientColorControl = createControl(() => {
|
|
2451
|
-
const { value, setValue } = useBoundProp(
|
|
2541
|
+
const { value, setValue } = useBoundProp(import_editor_props20.backgroundGradientOverlayPropTypeUtil);
|
|
2452
2542
|
const handleChange = (newValue) => {
|
|
2453
2543
|
const transformedValue = createTransformableValue(newValue);
|
|
2454
2544
|
if (transformedValue.positions) {
|
|
2455
|
-
transformedValue.positions =
|
|
2545
|
+
transformedValue.positions = import_editor_props20.stringPropTypeUtil.create(newValue.positions.join(" "));
|
|
2456
2546
|
}
|
|
2457
2547
|
setValue(transformedValue);
|
|
2458
2548
|
};
|
|
2459
2549
|
const createTransformableValue = (newValue) => ({
|
|
2460
2550
|
...newValue,
|
|
2461
|
-
type:
|
|
2462
|
-
angle:
|
|
2463
|
-
stops:
|
|
2551
|
+
type: import_editor_props20.stringPropTypeUtil.create(newValue.type),
|
|
2552
|
+
angle: import_editor_props20.numberPropTypeUtil.create(newValue.angle),
|
|
2553
|
+
stops: import_editor_props20.gradientColorStopPropTypeUtil.create(
|
|
2464
2554
|
newValue.stops.map(
|
|
2465
|
-
({ color, offset }) =>
|
|
2466
|
-
color:
|
|
2467
|
-
offset:
|
|
2555
|
+
({ color, offset }) => import_editor_props20.colorStopPropTypeUtil.create({
|
|
2556
|
+
color: import_editor_props20.colorPropTypeUtil.create(color),
|
|
2557
|
+
offset: import_editor_props20.numberPropTypeUtil.create(offset)
|
|
2468
2558
|
})
|
|
2469
2559
|
)
|
|
2470
2560
|
)
|
|
@@ -2484,8 +2574,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
2484
2574
|
positions: positions?.value.split(" ")
|
|
2485
2575
|
};
|
|
2486
2576
|
};
|
|
2487
|
-
return /* @__PURE__ */
|
|
2488
|
-
|
|
2577
|
+
return /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(
|
|
2578
|
+
import_ui33.UnstableGradientBox,
|
|
2489
2579
|
{
|
|
2490
2580
|
sx: { width: "auto", padding: 1.5 },
|
|
2491
2581
|
value: normalizeValue(),
|
|
@@ -2493,66 +2583,66 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
2493
2583
|
}
|
|
2494
2584
|
));
|
|
2495
2585
|
});
|
|
2496
|
-
var initialBackgroundGradientOverlay =
|
|
2497
|
-
type:
|
|
2498
|
-
angle:
|
|
2499
|
-
stops:
|
|
2500
|
-
|
|
2501
|
-
color:
|
|
2502
|
-
offset:
|
|
2586
|
+
var initialBackgroundGradientOverlay = import_editor_props20.backgroundGradientOverlayPropTypeUtil.create({
|
|
2587
|
+
type: import_editor_props20.stringPropTypeUtil.create("linear"),
|
|
2588
|
+
angle: import_editor_props20.numberPropTypeUtil.create(180),
|
|
2589
|
+
stops: import_editor_props20.gradientColorStopPropTypeUtil.create([
|
|
2590
|
+
import_editor_props20.colorStopPropTypeUtil.create({
|
|
2591
|
+
color: import_editor_props20.colorPropTypeUtil.create("rgb(0,0,0)"),
|
|
2592
|
+
offset: import_editor_props20.numberPropTypeUtil.create(0)
|
|
2503
2593
|
}),
|
|
2504
|
-
|
|
2505
|
-
color:
|
|
2506
|
-
offset:
|
|
2594
|
+
import_editor_props20.colorStopPropTypeUtil.create({
|
|
2595
|
+
color: import_editor_props20.colorPropTypeUtil.create("rgb(255,255,255)"),
|
|
2596
|
+
offset: import_editor_props20.numberPropTypeUtil.create(100)
|
|
2507
2597
|
})
|
|
2508
2598
|
])
|
|
2509
2599
|
});
|
|
2510
2600
|
|
|
2511
2601
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
2512
|
-
var
|
|
2602
|
+
var React41 = __toESM(require("react"));
|
|
2513
2603
|
var import_icons11 = require("@elementor/icons");
|
|
2514
|
-
var
|
|
2515
|
-
var
|
|
2604
|
+
var import_ui34 = require("@elementor/ui");
|
|
2605
|
+
var import_i18n14 = require("@wordpress/i18n");
|
|
2516
2606
|
var attachmentControlOptions = [
|
|
2517
2607
|
{
|
|
2518
2608
|
value: "fixed",
|
|
2519
|
-
label: (0,
|
|
2520
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2609
|
+
label: (0, import_i18n14.__)("Fixed", "elementor"),
|
|
2610
|
+
renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons11.PinIcon, { fontSize: size }),
|
|
2521
2611
|
showTooltip: true
|
|
2522
2612
|
},
|
|
2523
2613
|
{
|
|
2524
2614
|
value: "scroll",
|
|
2525
|
-
label: (0,
|
|
2526
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2615
|
+
label: (0, import_i18n14.__)("Scroll", "elementor"),
|
|
2616
|
+
renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons11.PinnedOffIcon, { fontSize: size }),
|
|
2527
2617
|
showTooltip: true
|
|
2528
2618
|
}
|
|
2529
2619
|
];
|
|
2530
2620
|
var BackgroundImageOverlayAttachment = () => {
|
|
2531
|
-
return /* @__PURE__ */
|
|
2621
|
+
return /* @__PURE__ */ React41.createElement(PopoverGridContainer, null, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, (0, import_i18n14.__)("Attachment", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React41.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
2532
2622
|
};
|
|
2533
2623
|
|
|
2534
2624
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
2535
|
-
var
|
|
2536
|
-
var
|
|
2537
|
-
var
|
|
2625
|
+
var React42 = __toESM(require("react"));
|
|
2626
|
+
var import_editor_props21 = require("@elementor/editor-props");
|
|
2627
|
+
var import_editor_ui5 = require("@elementor/editor-ui");
|
|
2538
2628
|
var import_icons12 = require("@elementor/icons");
|
|
2539
|
-
var
|
|
2540
|
-
var
|
|
2629
|
+
var import_ui35 = require("@elementor/ui");
|
|
2630
|
+
var import_i18n15 = require("@wordpress/i18n");
|
|
2541
2631
|
var backgroundPositionOptions = [
|
|
2542
|
-
{ label: (0,
|
|
2543
|
-
{ label: (0,
|
|
2544
|
-
{ label: (0,
|
|
2545
|
-
{ label: (0,
|
|
2546
|
-
{ label: (0,
|
|
2547
|
-
{ label: (0,
|
|
2548
|
-
{ label: (0,
|
|
2549
|
-
{ label: (0,
|
|
2550
|
-
{ label: (0,
|
|
2551
|
-
{ label: (0,
|
|
2632
|
+
{ label: (0, import_i18n15.__)("Center center", "elementor"), value: "center center" },
|
|
2633
|
+
{ label: (0, import_i18n15.__)("Center left", "elementor"), value: "center left" },
|
|
2634
|
+
{ label: (0, import_i18n15.__)("Center right", "elementor"), value: "center right" },
|
|
2635
|
+
{ label: (0, import_i18n15.__)("Top center", "elementor"), value: "top center" },
|
|
2636
|
+
{ label: (0, import_i18n15.__)("Top left", "elementor"), value: "top left" },
|
|
2637
|
+
{ label: (0, import_i18n15.__)("Top right", "elementor"), value: "top right" },
|
|
2638
|
+
{ label: (0, import_i18n15.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
2639
|
+
{ label: (0, import_i18n15.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
2640
|
+
{ label: (0, import_i18n15.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
2641
|
+
{ label: (0, import_i18n15.__)("Custom", "elementor"), value: "custom" }
|
|
2552
2642
|
];
|
|
2553
2643
|
var BackgroundImageOverlayPosition = () => {
|
|
2554
|
-
const backgroundImageOffsetContext = useBoundProp(
|
|
2555
|
-
const stringPropContext = useBoundProp(
|
|
2644
|
+
const backgroundImageOffsetContext = useBoundProp(import_editor_props21.backgroundImagePositionOffsetPropTypeUtil);
|
|
2645
|
+
const stringPropContext = useBoundProp(import_editor_props21.stringPropTypeUtil);
|
|
2556
2646
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
2557
2647
|
const handlePositionChange = (event) => {
|
|
2558
2648
|
const value = event.target.value || null;
|
|
@@ -2562,88 +2652,88 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
2562
2652
|
stringPropContext.setValue(value);
|
|
2563
2653
|
}
|
|
2564
2654
|
};
|
|
2565
|
-
return /* @__PURE__ */
|
|
2566
|
-
|
|
2655
|
+
return /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Position", "elementor"))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React42.createElement(
|
|
2656
|
+
import_ui35.Select,
|
|
2567
2657
|
{
|
|
2568
2658
|
size: "tiny",
|
|
2569
2659
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? "",
|
|
2570
2660
|
onChange: handlePositionChange,
|
|
2571
2661
|
fullWidth: true
|
|
2572
2662
|
},
|
|
2573
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
2574
|
-
)))), isCustom ? /* @__PURE__ */
|
|
2663
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React42.createElement(import_editor_ui5.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
2664
|
+
)))), isCustom ? /* @__PURE__ */ React42.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React42.createElement(SizeControl, { startIcon: /* @__PURE__ */ React42.createElement(import_icons12.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React42.createElement(SizeControl, { startIcon: /* @__PURE__ */ React42.createElement(import_icons12.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
|
|
2575
2665
|
};
|
|
2576
2666
|
|
|
2577
2667
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
2578
|
-
var
|
|
2668
|
+
var React43 = __toESM(require("react"));
|
|
2579
2669
|
var import_icons13 = require("@elementor/icons");
|
|
2580
|
-
var
|
|
2581
|
-
var
|
|
2670
|
+
var import_ui36 = require("@elementor/ui");
|
|
2671
|
+
var import_i18n16 = require("@wordpress/i18n");
|
|
2582
2672
|
var repeatControlOptions = [
|
|
2583
2673
|
{
|
|
2584
2674
|
value: "repeat",
|
|
2585
|
-
label: (0,
|
|
2586
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2675
|
+
label: (0, import_i18n16.__)("Repeat", "elementor"),
|
|
2676
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.GridDotsIcon, { fontSize: size }),
|
|
2587
2677
|
showTooltip: true
|
|
2588
2678
|
},
|
|
2589
2679
|
{
|
|
2590
2680
|
value: "repeat-x",
|
|
2591
|
-
label: (0,
|
|
2592
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2681
|
+
label: (0, import_i18n16.__)("Repeat-x", "elementor"),
|
|
2682
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.DotsHorizontalIcon, { fontSize: size }),
|
|
2593
2683
|
showTooltip: true
|
|
2594
2684
|
},
|
|
2595
2685
|
{
|
|
2596
2686
|
value: "repeat-y",
|
|
2597
|
-
label: (0,
|
|
2598
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2687
|
+
label: (0, import_i18n16.__)("Repeat-y", "elementor"),
|
|
2688
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.DotsVerticalIcon, { fontSize: size }),
|
|
2599
2689
|
showTooltip: true
|
|
2600
2690
|
},
|
|
2601
2691
|
{
|
|
2602
2692
|
value: "no-repeat",
|
|
2603
|
-
label: (0,
|
|
2604
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2693
|
+
label: (0, import_i18n16.__)("No-repeat", "elementor"),
|
|
2694
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(import_icons13.XIcon, { fontSize: size }),
|
|
2605
2695
|
showTooltip: true
|
|
2606
2696
|
}
|
|
2607
2697
|
];
|
|
2608
2698
|
var BackgroundImageOverlayRepeat = () => {
|
|
2609
|
-
return /* @__PURE__ */
|
|
2699
|
+
return /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, (0, import_i18n16.__)("Repeat", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React43.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
2610
2700
|
};
|
|
2611
2701
|
|
|
2612
2702
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
2613
|
-
var
|
|
2614
|
-
var
|
|
2703
|
+
var React44 = __toESM(require("react"));
|
|
2704
|
+
var import_editor_props22 = require("@elementor/editor-props");
|
|
2615
2705
|
var import_icons14 = require("@elementor/icons");
|
|
2616
|
-
var
|
|
2617
|
-
var
|
|
2706
|
+
var import_ui37 = require("@elementor/ui");
|
|
2707
|
+
var import_i18n17 = require("@wordpress/i18n");
|
|
2618
2708
|
var sizeControlOptions = [
|
|
2619
2709
|
{
|
|
2620
2710
|
value: "auto",
|
|
2621
|
-
label: (0,
|
|
2622
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2711
|
+
label: (0, import_i18n17.__)("Auto", "elementor"),
|
|
2712
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.LetterAIcon, { fontSize: size }),
|
|
2623
2713
|
showTooltip: true
|
|
2624
2714
|
},
|
|
2625
2715
|
{
|
|
2626
2716
|
value: "cover",
|
|
2627
|
-
label: (0,
|
|
2628
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2717
|
+
label: (0, import_i18n17.__)("Cover", "elementor"),
|
|
2718
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.ArrowsMaximizeIcon, { fontSize: size }),
|
|
2629
2719
|
showTooltip: true
|
|
2630
2720
|
},
|
|
2631
2721
|
{
|
|
2632
2722
|
value: "contain",
|
|
2633
|
-
label: (0,
|
|
2634
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2723
|
+
label: (0, import_i18n17.__)("Contain", "elementor"),
|
|
2724
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.ArrowBarBothIcon, { fontSize: size }),
|
|
2635
2725
|
showTooltip: true
|
|
2636
2726
|
},
|
|
2637
2727
|
{
|
|
2638
2728
|
value: "custom",
|
|
2639
|
-
label: (0,
|
|
2640
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2729
|
+
label: (0, import_i18n17.__)("Custom", "elementor"),
|
|
2730
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons14.PencilIcon, { fontSize: size }),
|
|
2641
2731
|
showTooltip: true
|
|
2642
2732
|
}
|
|
2643
2733
|
];
|
|
2644
2734
|
var BackgroundImageOverlaySize = () => {
|
|
2645
|
-
const backgroundImageScaleContext = useBoundProp(
|
|
2646
|
-
const stringPropContext = useBoundProp(
|
|
2735
|
+
const backgroundImageScaleContext = useBoundProp(import_editor_props22.backgroundImageSizeScalePropTypeUtil);
|
|
2736
|
+
const stringPropContext = useBoundProp(import_editor_props22.stringPropTypeUtil);
|
|
2647
2737
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
2648
2738
|
const handleSizeChange = (size) => {
|
|
2649
2739
|
if (size === "custom") {
|
|
@@ -2652,7 +2742,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2652
2742
|
stringPropContext.setValue(size);
|
|
2653
2743
|
}
|
|
2654
2744
|
};
|
|
2655
|
-
return /* @__PURE__ */
|
|
2745
|
+
return /* @__PURE__ */ React44.createElement(import_ui37.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, (0, import_i18n17.__)("Size", "elementor"))), /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React44.createElement(
|
|
2656
2746
|
ControlToggleButtonGroup,
|
|
2657
2747
|
{
|
|
2658
2748
|
exclusive: true,
|
|
@@ -2660,33 +2750,33 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2660
2750
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
|
|
2661
2751
|
onChange: handleSizeChange
|
|
2662
2752
|
}
|
|
2663
|
-
)))), isCustom ? /* @__PURE__ */
|
|
2753
|
+
)))), isCustom ? /* @__PURE__ */ React44.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React44.createElement(
|
|
2664
2754
|
SizeControl,
|
|
2665
2755
|
{
|
|
2666
|
-
startIcon: /* @__PURE__ */
|
|
2756
|
+
startIcon: /* @__PURE__ */ React44.createElement(import_icons14.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
2667
2757
|
extendedValues: ["auto"]
|
|
2668
2758
|
}
|
|
2669
|
-
))), /* @__PURE__ */
|
|
2759
|
+
))), /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React44.createElement(
|
|
2670
2760
|
SizeControl,
|
|
2671
2761
|
{
|
|
2672
|
-
startIcon: /* @__PURE__ */
|
|
2762
|
+
startIcon: /* @__PURE__ */ React44.createElement(import_icons14.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
2673
2763
|
extendedValues: ["auto"]
|
|
2674
2764
|
}
|
|
2675
2765
|
)))))) : null);
|
|
2676
2766
|
};
|
|
2677
2767
|
|
|
2678
2768
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
2679
|
-
var
|
|
2680
|
-
var
|
|
2681
|
-
var
|
|
2769
|
+
var import_react19 = require("react");
|
|
2770
|
+
var import_editor_props23 = require("@elementor/editor-props");
|
|
2771
|
+
var import_ui38 = require("@elementor/ui");
|
|
2682
2772
|
var useBackgroundTabsHistory = ({
|
|
2683
2773
|
color: initialBackgroundColorOverlay2,
|
|
2684
2774
|
image: initialBackgroundImageOverlay,
|
|
2685
2775
|
gradient: initialBackgroundGradientOverlay2
|
|
2686
2776
|
}) => {
|
|
2687
|
-
const { value: imageValue, setValue: setImageValue } = useBoundProp(
|
|
2688
|
-
const { value: colorValue, setValue: setColorValue } = useBoundProp(
|
|
2689
|
-
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(
|
|
2777
|
+
const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props23.backgroundImageOverlayPropTypeUtil);
|
|
2778
|
+
const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props23.backgroundColorOverlayPropTypeUtil);
|
|
2779
|
+
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props23.backgroundGradientOverlayPropTypeUtil);
|
|
2690
2780
|
const getCurrentOverlayType = () => {
|
|
2691
2781
|
if (colorValue) {
|
|
2692
2782
|
return "color";
|
|
@@ -2696,8 +2786,8 @@ var useBackgroundTabsHistory = ({
|
|
|
2696
2786
|
}
|
|
2697
2787
|
return "image";
|
|
2698
2788
|
};
|
|
2699
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
2700
|
-
const valuesHistory = (0,
|
|
2789
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui38.useTabs)(getCurrentOverlayType());
|
|
2790
|
+
const valuesHistory = (0, import_react19.useRef)({
|
|
2701
2791
|
image: initialBackgroundImageOverlay,
|
|
2702
2792
|
color: initialBackgroundColorOverlay2,
|
|
2703
2793
|
gradient: initialBackgroundGradientOverlay2
|
|
@@ -2735,9 +2825,9 @@ var useBackgroundTabsHistory = ({
|
|
|
2735
2825
|
|
|
2736
2826
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
2737
2827
|
var DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = "#00000033";
|
|
2738
|
-
var initialBackgroundColorOverlay =
|
|
2828
|
+
var initialBackgroundColorOverlay = import_editor_props24.backgroundColorOverlayPropTypeUtil.create(
|
|
2739
2829
|
{
|
|
2740
|
-
color:
|
|
2830
|
+
color: import_editor_props24.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
|
|
2741
2831
|
}
|
|
2742
2832
|
);
|
|
2743
2833
|
var getInitialBackgroundOverlay = () => ({
|
|
@@ -2765,20 +2855,20 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
2765
2855
|
}
|
|
2766
2856
|
});
|
|
2767
2857
|
var backgroundResolutionOptions = [
|
|
2768
|
-
{ label: (0,
|
|
2769
|
-
{ label: (0,
|
|
2770
|
-
{ label: (0,
|
|
2771
|
-
{ label: (0,
|
|
2858
|
+
{ label: (0, import_i18n18.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
2859
|
+
{ label: (0, import_i18n18.__)("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
2860
|
+
{ label: (0, import_i18n18.__)("Large 1024 x 1024", "elementor"), value: "large" },
|
|
2861
|
+
{ label: (0, import_i18n18.__)("Full", "elementor"), value: "full" }
|
|
2772
2862
|
];
|
|
2773
2863
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
2774
|
-
const { propType, value: overlayValues, setValue } = useBoundProp(
|
|
2775
|
-
return /* @__PURE__ */
|
|
2864
|
+
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props24.backgroundOverlayPropTypeUtil);
|
|
2865
|
+
return /* @__PURE__ */ React45.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React45.createElement(
|
|
2776
2866
|
Repeater,
|
|
2777
2867
|
{
|
|
2778
2868
|
openOnAdd: true,
|
|
2779
2869
|
values: overlayValues ?? [],
|
|
2780
2870
|
setValues: setValue,
|
|
2781
|
-
label: (0,
|
|
2871
|
+
label: (0, import_i18n18.__)("Overlay", "elementor"),
|
|
2782
2872
|
itemSettings: {
|
|
2783
2873
|
Icon: ItemIcon2,
|
|
2784
2874
|
Label: ItemLabel2,
|
|
@@ -2789,7 +2879,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
2789
2879
|
));
|
|
2790
2880
|
});
|
|
2791
2881
|
var ItemContent2 = ({ anchorEl = null, bind }) => {
|
|
2792
|
-
return /* @__PURE__ */
|
|
2882
|
+
return /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React45.createElement(Content2, { anchorEl }));
|
|
2793
2883
|
};
|
|
2794
2884
|
var Content2 = ({ anchorEl }) => {
|
|
2795
2885
|
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
@@ -2797,27 +2887,27 @@ var Content2 = ({ anchorEl }) => {
|
|
|
2797
2887
|
color: initialBackgroundColorOverlay.value,
|
|
2798
2888
|
gradient: initialBackgroundGradientOverlay.value
|
|
2799
2889
|
});
|
|
2800
|
-
return /* @__PURE__ */
|
|
2801
|
-
|
|
2890
|
+
return /* @__PURE__ */ React45.createElement(import_ui39.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React45.createElement(import_ui39.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React45.createElement(
|
|
2891
|
+
import_ui39.Tabs,
|
|
2802
2892
|
{
|
|
2803
2893
|
size: "small",
|
|
2804
2894
|
variant: "fullWidth",
|
|
2805
2895
|
...getTabsProps(),
|
|
2806
|
-
"aria-label": (0,
|
|
2896
|
+
"aria-label": (0, import_i18n18.__)("Background Overlay", "elementor")
|
|
2807
2897
|
},
|
|
2808
|
-
/* @__PURE__ */
|
|
2809
|
-
/* @__PURE__ */
|
|
2810
|
-
/* @__PURE__ */
|
|
2811
|
-
)), /* @__PURE__ */
|
|
2898
|
+
/* @__PURE__ */ React45.createElement(import_ui39.Tab, { label: (0, import_i18n18.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
2899
|
+
/* @__PURE__ */ React45.createElement(import_ui39.Tab, { label: (0, import_i18n18.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
2900
|
+
/* @__PURE__ */ React45.createElement(import_ui39.Tab, { label: (0, import_i18n18.__)("Color", "elementor"), ...getTabProps("color") })
|
|
2901
|
+
)), /* @__PURE__ */ React45.createElement(import_ui39.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React45.createElement(PopoverContent, null, /* @__PURE__ */ React45.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React45.createElement(import_ui39.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React45.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React45.createElement(import_ui39.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React45.createElement(PopoverContent, null, /* @__PURE__ */ React45.createElement(ColorOverlayContent, { anchorEl }))));
|
|
2812
2902
|
};
|
|
2813
2903
|
var ItemIcon2 = ({ value }) => {
|
|
2814
2904
|
switch (value.$$type) {
|
|
2815
2905
|
case "background-image-overlay":
|
|
2816
|
-
return /* @__PURE__ */
|
|
2906
|
+
return /* @__PURE__ */ React45.createElement(ItemIconImage, { value });
|
|
2817
2907
|
case "background-color-overlay":
|
|
2818
|
-
return /* @__PURE__ */
|
|
2908
|
+
return /* @__PURE__ */ React45.createElement(ItemIconColor, { value });
|
|
2819
2909
|
case "background-gradient-overlay":
|
|
2820
|
-
return /* @__PURE__ */
|
|
2910
|
+
return /* @__PURE__ */ React45.createElement(ItemIconGradient, { value });
|
|
2821
2911
|
default:
|
|
2822
2912
|
return null;
|
|
2823
2913
|
}
|
|
@@ -2830,12 +2920,12 @@ var extractColorFrom = (prop) => {
|
|
|
2830
2920
|
};
|
|
2831
2921
|
var ItemIconColor = ({ value: prop }) => {
|
|
2832
2922
|
const color = extractColorFrom(prop);
|
|
2833
|
-
return /* @__PURE__ */
|
|
2923
|
+
return /* @__PURE__ */ React45.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
|
|
2834
2924
|
};
|
|
2835
2925
|
var ItemIconImage = ({ value }) => {
|
|
2836
2926
|
const { imageUrl } = useImage(value);
|
|
2837
|
-
return /* @__PURE__ */
|
|
2838
|
-
|
|
2927
|
+
return /* @__PURE__ */ React45.createElement(
|
|
2928
|
+
import_ui39.CardMedia,
|
|
2839
2929
|
{
|
|
2840
2930
|
image: imageUrl,
|
|
2841
2931
|
sx: (theme) => ({
|
|
@@ -2849,49 +2939,49 @@ var ItemIconImage = ({ value }) => {
|
|
|
2849
2939
|
};
|
|
2850
2940
|
var ItemIconGradient = ({ value }) => {
|
|
2851
2941
|
const gradient = getGradientValue(value);
|
|
2852
|
-
return /* @__PURE__ */
|
|
2942
|
+
return /* @__PURE__ */ React45.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
2853
2943
|
};
|
|
2854
2944
|
var ItemLabel2 = ({ value }) => {
|
|
2855
2945
|
switch (value.$$type) {
|
|
2856
2946
|
case "background-image-overlay":
|
|
2857
|
-
return /* @__PURE__ */
|
|
2947
|
+
return /* @__PURE__ */ React45.createElement(ItemLabelImage, { value });
|
|
2858
2948
|
case "background-color-overlay":
|
|
2859
|
-
return /* @__PURE__ */
|
|
2949
|
+
return /* @__PURE__ */ React45.createElement(ItemLabelColor, { value });
|
|
2860
2950
|
case "background-gradient-overlay":
|
|
2861
|
-
return /* @__PURE__ */
|
|
2951
|
+
return /* @__PURE__ */ React45.createElement(ItemLabelGradient, { value });
|
|
2862
2952
|
default:
|
|
2863
2953
|
return null;
|
|
2864
2954
|
}
|
|
2865
2955
|
};
|
|
2866
2956
|
var ItemLabelColor = ({ value: prop }) => {
|
|
2867
2957
|
const color = extractColorFrom(prop);
|
|
2868
|
-
return /* @__PURE__ */
|
|
2958
|
+
return /* @__PURE__ */ React45.createElement("span", null, color);
|
|
2869
2959
|
};
|
|
2870
2960
|
var ItemLabelImage = ({ value }) => {
|
|
2871
2961
|
const { imageTitle } = useImage(value);
|
|
2872
|
-
return /* @__PURE__ */
|
|
2962
|
+
return /* @__PURE__ */ React45.createElement("span", null, imageTitle);
|
|
2873
2963
|
};
|
|
2874
2964
|
var ItemLabelGradient = ({ value }) => {
|
|
2875
2965
|
if (value.value.type.value === "linear") {
|
|
2876
|
-
return /* @__PURE__ */
|
|
2966
|
+
return /* @__PURE__ */ React45.createElement("span", null, (0, import_i18n18.__)("Linear Gradient", "elementor"));
|
|
2877
2967
|
}
|
|
2878
|
-
return /* @__PURE__ */
|
|
2968
|
+
return /* @__PURE__ */ React45.createElement("span", null, (0, import_i18n18.__)("Radial Gradient", "elementor"));
|
|
2879
2969
|
};
|
|
2880
2970
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
2881
|
-
const propContext = useBoundProp(
|
|
2882
|
-
return /* @__PURE__ */
|
|
2971
|
+
const propContext = useBoundProp(import_editor_props24.backgroundColorOverlayPropTypeUtil);
|
|
2972
|
+
return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React45.createElement(ColorControl, { anchorEl })));
|
|
2883
2973
|
};
|
|
2884
2974
|
var ImageOverlayContent = () => {
|
|
2885
|
-
const propContext = useBoundProp(
|
|
2886
|
-
return /* @__PURE__ */
|
|
2975
|
+
const propContext = useBoundProp(import_editor_props24.backgroundImageOverlayPropTypeUtil);
|
|
2976
|
+
return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React45.createElement(import_ui39.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React45.createElement(import_ui39.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(
|
|
2887
2977
|
ImageControl,
|
|
2888
2978
|
{
|
|
2889
|
-
resolutionLabel: (0,
|
|
2979
|
+
resolutionLabel: (0, import_i18n18.__)("Resolution", "elementor"),
|
|
2890
2980
|
sizes: backgroundResolutionOptions
|
|
2891
2981
|
}
|
|
2892
|
-
)))), /* @__PURE__ */
|
|
2982
|
+
)))), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlayAttachment, null)));
|
|
2893
2983
|
};
|
|
2894
|
-
var StyledUnstableColorIndicator = (0,
|
|
2984
|
+
var StyledUnstableColorIndicator = (0, import_ui39.styled)(import_ui39.UnstableColorIndicator)(({ theme }) => ({
|
|
2895
2985
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
2896
2986
|
}));
|
|
2897
2987
|
var useImage = (image) => {
|
|
@@ -2926,13 +3016,26 @@ var getGradientValue = (value) => {
|
|
|
2926
3016
|
|
|
2927
3017
|
// src/controls/background-control/background-control.tsx
|
|
2928
3018
|
var BackgroundControl = createControl(() => {
|
|
2929
|
-
const propContext = useBoundProp(
|
|
3019
|
+
const propContext = useBoundProp(import_editor_props25.backgroundPropTypeUtil);
|
|
2930
3020
|
const isUsingNestedProps = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30");
|
|
2931
|
-
const colorLabel = (0,
|
|
2932
|
-
return /* @__PURE__ */
|
|
3021
|
+
const colorLabel = (0, import_i18n19.__)("Color", "elementor");
|
|
3022
|
+
return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(SectionContent, null, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React46.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React46.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React46.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React46.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ColorControl, null))))));
|
|
3023
|
+
});
|
|
3024
|
+
|
|
3025
|
+
// src/controls/switch-control.tsx
|
|
3026
|
+
var React47 = __toESM(require("react"));
|
|
3027
|
+
var import_editor_props26 = require("@elementor/editor-props");
|
|
3028
|
+
var import_ui41 = require("@elementor/ui");
|
|
3029
|
+
var SwitchControl2 = createControl(() => {
|
|
3030
|
+
const { value, setValue } = useBoundProp(import_editor_props26.booleanPropTypeUtil);
|
|
3031
|
+
const handleChange = (event) => {
|
|
3032
|
+
setValue(event.target.checked);
|
|
3033
|
+
};
|
|
3034
|
+
return /* @__PURE__ */ React47.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(import_ui41.Switch, { checked: !!value, onChange: handleChange, size: "small" }));
|
|
2933
3035
|
});
|
|
2934
3036
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2935
3037
|
0 && (module.exports = {
|
|
3038
|
+
AspectRatioControl,
|
|
2936
3039
|
BackgroundControl,
|
|
2937
3040
|
BoxShadowRepeaterControl,
|
|
2938
3041
|
ColorControl,
|
|
@@ -2955,6 +3058,7 @@ var BackgroundControl = createControl(() => {
|
|
|
2955
3058
|
SizeControl,
|
|
2956
3059
|
StrokeControl,
|
|
2957
3060
|
SvgMediaControl,
|
|
3061
|
+
SwitchControl,
|
|
2958
3062
|
TextAreaControl,
|
|
2959
3063
|
TextControl,
|
|
2960
3064
|
ToggleControl,
|