@elementor/editor-components 3.35.0-482 → 3.35.0-484
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/dist/index.js +219 -281
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +162 -235
- package/dist/index.mjs.map +1 -1
- package/package.json +22 -22
- package/src/components/components-tab/components-list.tsx +2 -39
- package/src/components/components-tab/angie-promotion-modal.tsx +0 -72
package/dist/index.js
CHANGED
|
@@ -44,7 +44,7 @@ var import_editor_panels5 = require("@elementor/editor-panels");
|
|
|
44
44
|
var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
|
|
45
45
|
var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
|
|
46
46
|
var import_store80 = require("@elementor/store");
|
|
47
|
-
var
|
|
47
|
+
var import_i18n30 = require("@wordpress/i18n");
|
|
48
48
|
|
|
49
49
|
// src/component-instance-transformer.ts
|
|
50
50
|
var import_editor_canvas = require("@elementor/editor-canvas");
|
|
@@ -2200,7 +2200,7 @@ function getComponentName() {
|
|
|
2200
2200
|
}
|
|
2201
2201
|
|
|
2202
2202
|
// src/components/components-tab/components.tsx
|
|
2203
|
-
var
|
|
2203
|
+
var React18 = __toESM(require("react"));
|
|
2204
2204
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
2205
2205
|
|
|
2206
2206
|
// src/hooks/use-components.ts
|
|
@@ -2271,12 +2271,10 @@ var ComponentSearch = () => {
|
|
|
2271
2271
|
};
|
|
2272
2272
|
|
|
2273
2273
|
// src/components/components-tab/components-list.tsx
|
|
2274
|
-
var
|
|
2275
|
-
var import_react9 = require("react");
|
|
2276
|
-
var import_editor_mcp = require("@elementor/editor-mcp");
|
|
2274
|
+
var React16 = __toESM(require("react"));
|
|
2277
2275
|
var import_icons10 = require("@elementor/icons");
|
|
2278
|
-
var
|
|
2279
|
-
var
|
|
2276
|
+
var import_ui14 = require("@elementor/ui");
|
|
2277
|
+
var import_i18n19 = require("@wordpress/i18n");
|
|
2280
2278
|
|
|
2281
2279
|
// src/hooks/use-components-permissions.ts
|
|
2282
2280
|
var import_editor_current_user2 = require("@elementor/editor-current-user");
|
|
@@ -2324,60 +2322,25 @@ function findComponentInstancesByUid(documentContainer, componentUid) {
|
|
|
2324
2322
|
});
|
|
2325
2323
|
}
|
|
2326
2324
|
|
|
2327
|
-
// src/components/components-tab/angie-promotion-modal.tsx
|
|
2328
|
-
var React13 = __toESM(require("react"));
|
|
2329
|
-
var import_ui12 = require("@elementor/ui");
|
|
2330
|
-
var import_i18n15 = require("@wordpress/i18n");
|
|
2331
|
-
var ANGIE_INSTALL_URL = "/wp-admin/plugin-install.php?tab=plugin-information&plugin=angie";
|
|
2332
|
-
var PLACEHOLDER_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/components-angie-promo.svg";
|
|
2333
|
-
var AngiePromotionModal = ({ children, open, onClose }) => {
|
|
2334
|
-
return /* @__PURE__ */ React13.createElement(import_ui12.Infotip, { placement: "right-end", arrow: true, content: /* @__PURE__ */ React13.createElement(AngiePromotionCard, { onClose }), open }, children);
|
|
2335
|
-
};
|
|
2336
|
-
function AngiePromotionCard({ onClose }) {
|
|
2337
|
-
const handleCtaClick = () => {
|
|
2338
|
-
window.open(ANGIE_INSTALL_URL, "_blank");
|
|
2339
|
-
onClose();
|
|
2340
|
-
};
|
|
2341
|
-
return /* @__PURE__ */ React13.createElement(import_ui12.ClickAwayListener, { disableReactTree: true, mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onClose }, /* @__PURE__ */ React13.createElement(import_ui12.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
|
|
2342
|
-
import_ui12.CardHeader,
|
|
2343
|
-
{
|
|
2344
|
-
title: (0, import_i18n15.__)("Add new component with AI", "elementor"),
|
|
2345
|
-
titleTypographyProps: { variant: "subtitle2" },
|
|
2346
|
-
action: /* @__PURE__ */ React13.createElement(import_ui12.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
|
|
2347
|
-
}
|
|
2348
|
-
), /* @__PURE__ */ React13.createElement(
|
|
2349
|
-
import_ui12.CardMedia,
|
|
2350
|
-
{
|
|
2351
|
-
component: "img",
|
|
2352
|
-
image: PLACEHOLDER_IMAGE_URL,
|
|
2353
|
-
alt: "",
|
|
2354
|
-
sx: { width: "100%", aspectRatio: "16 / 9" }
|
|
2355
|
-
}
|
|
2356
|
-
), /* @__PURE__ */ React13.createElement(import_ui12.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n15.__)(
|
|
2357
|
-
"Angie our AI assistant can easily create new components and save you the hassle of doing it yourself",
|
|
2358
|
-
"elementor"
|
|
2359
|
-
))), /* @__PURE__ */ React13.createElement(import_ui12.CardActions, { sx: { justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(import_ui12.Button, { size: "medium", variant: "contained", color: "accent", onClick: handleCtaClick }, (0, import_i18n15.__)("Get Angie", "elementor")))));
|
|
2360
|
-
}
|
|
2361
|
-
|
|
2362
2325
|
// src/components/components-tab/components-item.tsx
|
|
2363
|
-
var
|
|
2326
|
+
var React14 = __toESM(require("react"));
|
|
2364
2327
|
var import_react8 = require("react");
|
|
2365
2328
|
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
2366
2329
|
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
2367
2330
|
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
2368
2331
|
var import_icons9 = require("@elementor/icons");
|
|
2369
|
-
var
|
|
2370
|
-
var
|
|
2332
|
+
var import_ui12 = require("@elementor/ui");
|
|
2333
|
+
var import_i18n18 = require("@wordpress/i18n");
|
|
2371
2334
|
|
|
2372
2335
|
// src/store/actions/archive-component.ts
|
|
2373
2336
|
var import_editor_documents8 = require("@elementor/editor-documents");
|
|
2374
2337
|
var import_editor_notifications = require("@elementor/editor-notifications");
|
|
2375
2338
|
var import_store35 = require("@elementor/store");
|
|
2376
|
-
var
|
|
2339
|
+
var import_i18n15 = require("@wordpress/i18n");
|
|
2377
2340
|
var successNotification = (componentId, componentName) => ({
|
|
2378
2341
|
type: "success",
|
|
2379
2342
|
/* translators: %s: component name */
|
|
2380
|
-
message: (0,
|
|
2343
|
+
message: (0, import_i18n15.__)("Successfully deleted component %s", "elementor").replace("%s", componentName),
|
|
2381
2344
|
id: `success-archived-components-notification-${componentId}`
|
|
2382
2345
|
});
|
|
2383
2346
|
var archiveComponent = (componentId, componentName) => {
|
|
@@ -2510,14 +2473,14 @@ var import_store41 = require("@elementor/store");
|
|
|
2510
2473
|
|
|
2511
2474
|
// src/components/create-component-form/utils/component-form-schema.ts
|
|
2512
2475
|
var import_schema5 = require("@elementor/schema");
|
|
2513
|
-
var
|
|
2476
|
+
var import_i18n16 = require("@wordpress/i18n");
|
|
2514
2477
|
var MIN_NAME_LENGTH = 2;
|
|
2515
2478
|
var MAX_NAME_LENGTH = 50;
|
|
2516
|
-
var baseComponentSchema = import_schema5.z.string().trim().max(MAX_NAME_LENGTH, (0,
|
|
2479
|
+
var baseComponentSchema = import_schema5.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n16.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
|
|
2517
2480
|
var createBaseComponentSchema = (existingNames) => {
|
|
2518
2481
|
return import_schema5.z.object({
|
|
2519
2482
|
componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
|
|
2520
|
-
message: (0,
|
|
2483
|
+
message: (0, import_i18n16.__)("Component name already exists", "elementor")
|
|
2521
2484
|
})
|
|
2522
2485
|
});
|
|
2523
2486
|
};
|
|
@@ -2525,9 +2488,9 @@ var createSubmitComponentSchema = (existingNames) => {
|
|
|
2525
2488
|
const baseSchema = createBaseComponentSchema(existingNames);
|
|
2526
2489
|
return baseSchema.extend({
|
|
2527
2490
|
componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
|
|
2528
|
-
message: (0,
|
|
2491
|
+
message: (0, import_i18n16.__)("Component name is required.", "elementor")
|
|
2529
2492
|
}).refine((value) => value.length >= MIN_NAME_LENGTH, {
|
|
2530
|
-
message: (0,
|
|
2493
|
+
message: (0, import_i18n16.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
|
|
2531
2494
|
})
|
|
2532
2495
|
});
|
|
2533
2496
|
};
|
|
@@ -2618,14 +2581,14 @@ var createComponentModel2 = (component) => {
|
|
|
2618
2581
|
};
|
|
2619
2582
|
|
|
2620
2583
|
// src/components/components-tab/delete-confirmation-dialog.tsx
|
|
2621
|
-
var
|
|
2584
|
+
var React13 = __toESM(require("react"));
|
|
2622
2585
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
2623
|
-
var
|
|
2586
|
+
var import_i18n17 = require("@wordpress/i18n");
|
|
2624
2587
|
function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
|
|
2625
|
-
return /* @__PURE__ */
|
|
2588
|
+
return /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n17.__)("Delete this component?", "elementor")), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n17.__)(
|
|
2626
2589
|
"Existing instances on your pages will remain functional. You will no longer find this component in your list.",
|
|
2627
2590
|
"elementor"
|
|
2628
|
-
))), /* @__PURE__ */
|
|
2591
|
+
))), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose, onConfirm }));
|
|
2629
2592
|
}
|
|
2630
2593
|
|
|
2631
2594
|
// src/components/components-tab/components-item.tsx
|
|
@@ -2646,7 +2609,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2646
2609
|
validation: validateComponentTitle
|
|
2647
2610
|
});
|
|
2648
2611
|
const componentModel = createComponentModel2(component);
|
|
2649
|
-
const popupState = (0,
|
|
2612
|
+
const popupState = (0, import_ui12.usePopupState)({
|
|
2650
2613
|
variant: "popover",
|
|
2651
2614
|
disableAutoFocus: true
|
|
2652
2615
|
});
|
|
@@ -2671,7 +2634,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2671
2634
|
const handleDeleteDialogClose = () => {
|
|
2672
2635
|
setIsDeleteDialogOpen(false);
|
|
2673
2636
|
};
|
|
2674
|
-
return /* @__PURE__ */
|
|
2637
|
+
return /* @__PURE__ */ React14.createElement(import_ui12.Stack, null, /* @__PURE__ */ React14.createElement(
|
|
2675
2638
|
import_editor_ui8.WarningInfotip,
|
|
2676
2639
|
{
|
|
2677
2640
|
open: Boolean(error),
|
|
@@ -2680,8 +2643,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2680
2643
|
width: itemRef.current?.getBoundingClientRect().width,
|
|
2681
2644
|
offset: [0, -15]
|
|
2682
2645
|
},
|
|
2683
|
-
/* @__PURE__ */
|
|
2684
|
-
|
|
2646
|
+
/* @__PURE__ */ React14.createElement(
|
|
2647
|
+
import_ui12.ListItemButton,
|
|
2685
2648
|
{
|
|
2686
2649
|
draggable: true,
|
|
2687
2650
|
onDragStart: (event) => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel, event),
|
|
@@ -2699,8 +2662,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2699
2662
|
gap: 1
|
|
2700
2663
|
}
|
|
2701
2664
|
},
|
|
2702
|
-
/* @__PURE__ */
|
|
2703
|
-
|
|
2665
|
+
/* @__PURE__ */ React14.createElement(
|
|
2666
|
+
import_ui12.Box,
|
|
2704
2667
|
{
|
|
2705
2668
|
display: "flex",
|
|
2706
2669
|
alignItems: "center",
|
|
@@ -2709,31 +2672,31 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2709
2672
|
flexGrow: 1,
|
|
2710
2673
|
onClick: handleClick
|
|
2711
2674
|
},
|
|
2712
|
-
/* @__PURE__ */
|
|
2713
|
-
/* @__PURE__ */
|
|
2675
|
+
/* @__PURE__ */ React14.createElement(import_ui12.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React14.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
|
|
2676
|
+
/* @__PURE__ */ React14.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React14.createElement(import_ui12.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React14.createElement(
|
|
2714
2677
|
import_editor_ui8.EditableField,
|
|
2715
2678
|
{
|
|
2716
2679
|
ref: editableRef,
|
|
2717
|
-
as:
|
|
2680
|
+
as: import_ui12.Typography,
|
|
2718
2681
|
variant: "caption",
|
|
2719
2682
|
...getEditableProps()
|
|
2720
2683
|
}
|
|
2721
|
-
) : /* @__PURE__ */
|
|
2684
|
+
) : /* @__PURE__ */ React14.createElement(
|
|
2722
2685
|
import_editor_ui8.EllipsisWithTooltip,
|
|
2723
2686
|
{
|
|
2724
2687
|
title: component.name,
|
|
2725
|
-
as:
|
|
2688
|
+
as: import_ui12.Typography,
|
|
2726
2689
|
variant: "caption",
|
|
2727
2690
|
color: "text.primary"
|
|
2728
2691
|
}
|
|
2729
2692
|
)))
|
|
2730
2693
|
),
|
|
2731
|
-
shouldShowActions && /* @__PURE__ */
|
|
2694
|
+
shouldShowActions && /* @__PURE__ */ React14.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React14.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
|
|
2732
2695
|
)
|
|
2733
|
-
), shouldShowActions && /* @__PURE__ */
|
|
2734
|
-
|
|
2696
|
+
), shouldShowActions && /* @__PURE__ */ React14.createElement(
|
|
2697
|
+
import_ui12.Menu,
|
|
2735
2698
|
{
|
|
2736
|
-
...(0,
|
|
2699
|
+
...(0, import_ui12.bindMenu)(popupState),
|
|
2737
2700
|
anchorOrigin: {
|
|
2738
2701
|
vertical: "bottom",
|
|
2739
2702
|
horizontal: "right"
|
|
@@ -2743,7 +2706,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2743
2706
|
horizontal: "right"
|
|
2744
2707
|
}
|
|
2745
2708
|
},
|
|
2746
|
-
canRename && /* @__PURE__ */
|
|
2709
|
+
canRename && /* @__PURE__ */ React14.createElement(
|
|
2747
2710
|
import_editor_ui8.MenuListItem,
|
|
2748
2711
|
{
|
|
2749
2712
|
sx: { minWidth: "160px" },
|
|
@@ -2753,18 +2716,18 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
|
|
|
2753
2716
|
openEditMode();
|
|
2754
2717
|
}
|
|
2755
2718
|
},
|
|
2756
|
-
(0,
|
|
2719
|
+
(0, import_i18n18.__)("Rename", "elementor")
|
|
2757
2720
|
),
|
|
2758
|
-
canDelete && /* @__PURE__ */
|
|
2721
|
+
canDelete && /* @__PURE__ */ React14.createElement(
|
|
2759
2722
|
import_editor_ui8.MenuListItem,
|
|
2760
2723
|
{
|
|
2761
2724
|
sx: { minWidth: "160px" },
|
|
2762
2725
|
primaryTypographyProps: { variant: "caption", color: "error.light" },
|
|
2763
2726
|
onClick: handleDeleteClick
|
|
2764
2727
|
},
|
|
2765
|
-
(0,
|
|
2728
|
+
(0, import_i18n18.__)("Delete", "elementor")
|
|
2766
2729
|
)
|
|
2767
|
-
), /* @__PURE__ */
|
|
2730
|
+
), /* @__PURE__ */ React14.createElement(
|
|
2768
2731
|
DeleteConfirmationDialog,
|
|
2769
2732
|
{
|
|
2770
2733
|
open: isDeleteDialogOpen,
|
|
@@ -2792,7 +2755,7 @@ var validateComponentTitle = (newTitle) => {
|
|
|
2792
2755
|
}
|
|
2793
2756
|
return result.errorMessage;
|
|
2794
2757
|
};
|
|
2795
|
-
var Indicator = (0,
|
|
2758
|
+
var Indicator = (0, import_ui12.styled)(import_ui12.Box, {
|
|
2796
2759
|
shouldForwardProp: (prop) => prop !== "isActive" && prop !== "isError"
|
|
2797
2760
|
})(({ theme, isActive, isError }) => ({
|
|
2798
2761
|
display: "flex",
|
|
@@ -2815,13 +2778,13 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
|
|
|
2815
2778
|
};
|
|
2816
2779
|
|
|
2817
2780
|
// src/components/components-tab/loading-components.tsx
|
|
2818
|
-
var
|
|
2819
|
-
var
|
|
2781
|
+
var React15 = __toESM(require("react"));
|
|
2782
|
+
var import_ui13 = require("@elementor/ui");
|
|
2820
2783
|
var ROWS_COUNT = 6;
|
|
2821
2784
|
var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
|
|
2822
2785
|
var LoadingComponents = () => {
|
|
2823
|
-
return /* @__PURE__ */
|
|
2824
|
-
|
|
2786
|
+
return /* @__PURE__ */ React15.createElement(
|
|
2787
|
+
import_ui13.Stack,
|
|
2825
2788
|
{
|
|
2826
2789
|
"aria-label": "Loading components",
|
|
2827
2790
|
gap: 1,
|
|
@@ -2842,14 +2805,14 @@ var LoadingComponents = () => {
|
|
|
2842
2805
|
}
|
|
2843
2806
|
}
|
|
2844
2807
|
},
|
|
2845
|
-
rows.map((row) => /* @__PURE__ */
|
|
2846
|
-
|
|
2808
|
+
rows.map((row) => /* @__PURE__ */ React15.createElement(
|
|
2809
|
+
import_ui13.ListItemButton,
|
|
2847
2810
|
{
|
|
2848
2811
|
key: row,
|
|
2849
2812
|
sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
|
|
2850
2813
|
shape: "rounded"
|
|
2851
2814
|
},
|
|
2852
|
-
/* @__PURE__ */
|
|
2815
|
+
/* @__PURE__ */ React15.createElement(import_ui13.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React15.createElement(import_ui13.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React15.createElement(import_ui13.Skeleton, { variant: "text", width: "100%", height: "36px" }))
|
|
2853
2816
|
))
|
|
2854
2817
|
);
|
|
2855
2818
|
};
|
|
@@ -2863,16 +2826,16 @@ var SUBTITLE_OVERRIDE_SX = {
|
|
|
2863
2826
|
function ComponentsList() {
|
|
2864
2827
|
const { components, isLoading, searchValue } = useFilteredComponents();
|
|
2865
2828
|
if (isLoading) {
|
|
2866
|
-
return /* @__PURE__ */
|
|
2829
|
+
return /* @__PURE__ */ React16.createElement(LoadingComponents, null);
|
|
2867
2830
|
}
|
|
2868
2831
|
const isEmpty = !components || components.length === 0;
|
|
2869
2832
|
if (isEmpty) {
|
|
2870
2833
|
if (searchValue.length > 0) {
|
|
2871
|
-
return /* @__PURE__ */
|
|
2834
|
+
return /* @__PURE__ */ React16.createElement(EmptySearchResult, null);
|
|
2872
2835
|
}
|
|
2873
|
-
return /* @__PURE__ */
|
|
2836
|
+
return /* @__PURE__ */ React16.createElement(EmptyState, null);
|
|
2874
2837
|
}
|
|
2875
|
-
return /* @__PURE__ */
|
|
2838
|
+
return /* @__PURE__ */ React16.createElement(import_ui14.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React16.createElement(
|
|
2876
2839
|
ComponentItem,
|
|
2877
2840
|
{
|
|
2878
2841
|
key: component.uid,
|
|
@@ -2884,24 +2847,9 @@ function ComponentsList() {
|
|
|
2884
2847
|
)));
|
|
2885
2848
|
}
|
|
2886
2849
|
var EmptyState = () => {
|
|
2887
|
-
const [isAngieModalOpen, setIsAngieModalOpen] = (0, import_react9.useState)(false);
|
|
2888
2850
|
const { canCreate } = useComponentsPermissions();
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
if (sdk.isAngieReady()) {
|
|
2892
|
-
sdk.triggerAngie({
|
|
2893
|
-
prompt: (0, import_i18n20.__)(
|
|
2894
|
-
"Create a [hero/testimonial/product card/CTA/feature] component for my [business type]. Include [describe what you want]",
|
|
2895
|
-
"elementor"
|
|
2896
|
-
),
|
|
2897
|
-
context: { source: "components-panel-empty-state" }
|
|
2898
|
-
});
|
|
2899
|
-
} else {
|
|
2900
|
-
setIsAngieModalOpen(true);
|
|
2901
|
-
}
|
|
2902
|
-
};
|
|
2903
|
-
return /* @__PURE__ */ React17.createElement(
|
|
2904
|
-
import_ui15.Stack,
|
|
2851
|
+
return /* @__PURE__ */ React16.createElement(
|
|
2852
|
+
import_ui14.Stack,
|
|
2905
2853
|
{
|
|
2906
2854
|
alignItems: "center",
|
|
2907
2855
|
justifyContent: "start",
|
|
@@ -2910,11 +2858,11 @@ var EmptyState = () => {
|
|
|
2910
2858
|
gap: 2,
|
|
2911
2859
|
overflow: "hidden"
|
|
2912
2860
|
},
|
|
2913
|
-
/* @__PURE__ */
|
|
2861
|
+
/* @__PURE__ */ React16.createElement(import_ui14.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n19.__)("No components yet", "elementor")), /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n19.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React16.createElement("br", null), canCreate ? (0, import_i18n19.__)("Create once, use everywhere.", "elementor") : (0, import_i18n19.__)(
|
|
2914
2862
|
"With your current role, you cannot create components. Contact an administrator to create one.",
|
|
2915
2863
|
"elementor"
|
|
2916
|
-
)), /* @__PURE__ */
|
|
2917
|
-
|
|
2864
|
+
)), /* @__PURE__ */ React16.createElement(
|
|
2865
|
+
import_ui14.Link,
|
|
2918
2866
|
{
|
|
2919
2867
|
href: LEARN_MORE_URL,
|
|
2920
2868
|
target: "_blank",
|
|
@@ -2922,37 +2870,27 @@ var EmptyState = () => {
|
|
|
2922
2870
|
variant: "caption",
|
|
2923
2871
|
color: "info.main"
|
|
2924
2872
|
},
|
|
2925
|
-
(0,
|
|
2873
|
+
(0, import_i18n19.__)("Learn more about components", "elementor")
|
|
2926
2874
|
)),
|
|
2927
|
-
canCreate && /* @__PURE__ */
|
|
2928
|
-
|
|
2875
|
+
canCreate && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_ui14.Divider, { sx: { width: "100%" } }), /* @__PURE__ */ React16.createElement(import_ui14.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React16.createElement(
|
|
2876
|
+
import_ui14.Typography,
|
|
2929
2877
|
{
|
|
2930
2878
|
align: "center",
|
|
2931
2879
|
variant: "subtitle2",
|
|
2932
2880
|
color: "text.secondary",
|
|
2933
2881
|
sx: SUBTITLE_OVERRIDE_SX
|
|
2934
2882
|
},
|
|
2935
|
-
(0,
|
|
2936
|
-
), /* @__PURE__ */
|
|
2883
|
+
(0, import_i18n19.__)("Create your first one:", "elementor")
|
|
2884
|
+
), /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n19.__)(
|
|
2937
2885
|
'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
|
|
2938
2886
|
"elementor"
|
|
2939
|
-
)), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary" }, (0, import_i18n20.__)("Or", "elementor")), /* @__PURE__ */ React17.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React17.createElement(
|
|
2940
|
-
import_ui15.Button,
|
|
2941
|
-
{
|
|
2942
|
-
color: "secondary",
|
|
2943
|
-
variant: "outlined",
|
|
2944
|
-
size: "small",
|
|
2945
|
-
onClick: handleCreateWithAI,
|
|
2946
|
-
endIcon: /* @__PURE__ */ React17.createElement(import_icons10.AIIcon, null)
|
|
2947
|
-
},
|
|
2948
|
-
(0, import_i18n20.__)("Create component with AI", "elementor")
|
|
2949
2887
|
))))
|
|
2950
2888
|
);
|
|
2951
2889
|
};
|
|
2952
2890
|
var EmptySearchResult = () => {
|
|
2953
2891
|
const { searchValue, clearSearch } = useSearch();
|
|
2954
|
-
return /* @__PURE__ */
|
|
2955
|
-
|
|
2892
|
+
return /* @__PURE__ */ React16.createElement(
|
|
2893
|
+
import_ui14.Stack,
|
|
2956
2894
|
{
|
|
2957
2895
|
color: "text.secondary",
|
|
2958
2896
|
pt: 5,
|
|
@@ -2961,17 +2899,17 @@ var EmptySearchResult = () => {
|
|
|
2961
2899
|
overflow: "hidden",
|
|
2962
2900
|
justifySelf: "center"
|
|
2963
2901
|
},
|
|
2964
|
-
/* @__PURE__ */
|
|
2965
|
-
/* @__PURE__ */
|
|
2966
|
-
|
|
2902
|
+
/* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, null),
|
|
2903
|
+
/* @__PURE__ */ React16.createElement(
|
|
2904
|
+
import_ui14.Box,
|
|
2967
2905
|
{
|
|
2968
2906
|
sx: {
|
|
2969
2907
|
width: "100%"
|
|
2970
2908
|
}
|
|
2971
2909
|
},
|
|
2972
|
-
/* @__PURE__ */
|
|
2973
|
-
searchValue && /* @__PURE__ */
|
|
2974
|
-
|
|
2910
|
+
/* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n19.__)("Sorry, nothing matched", "elementor")),
|
|
2911
|
+
searchValue && /* @__PURE__ */ React16.createElement(
|
|
2912
|
+
import_ui14.Typography,
|
|
2975
2913
|
{
|
|
2976
2914
|
variant: "subtitle2",
|
|
2977
2915
|
color: "inherit",
|
|
@@ -2982,8 +2920,8 @@ var EmptySearchResult = () => {
|
|
|
2982
2920
|
justifyContent: "center"
|
|
2983
2921
|
}
|
|
2984
2922
|
},
|
|
2985
|
-
/* @__PURE__ */
|
|
2986
|
-
/* @__PURE__ */
|
|
2923
|
+
/* @__PURE__ */ React16.createElement("span", null, "\u201C"),
|
|
2924
|
+
/* @__PURE__ */ React16.createElement(
|
|
2987
2925
|
"span",
|
|
2988
2926
|
{
|
|
2989
2927
|
style: {
|
|
@@ -2994,11 +2932,11 @@ var EmptySearchResult = () => {
|
|
|
2994
2932
|
},
|
|
2995
2933
|
searchValue
|
|
2996
2934
|
),
|
|
2997
|
-
/* @__PURE__ */
|
|
2935
|
+
/* @__PURE__ */ React16.createElement("span", null, "\u201D.")
|
|
2998
2936
|
)
|
|
2999
2937
|
),
|
|
3000
|
-
/* @__PURE__ */
|
|
3001
|
-
/* @__PURE__ */
|
|
2938
|
+
/* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n19.__)("Try something else.", "elementor")),
|
|
2939
|
+
/* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(import_ui14.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n19.__)("Clear & try again", "elementor")))
|
|
3002
2940
|
);
|
|
3003
2941
|
};
|
|
3004
2942
|
var useFilteredComponents = () => {
|
|
@@ -3014,12 +2952,12 @@ var useFilteredComponents = () => {
|
|
|
3014
2952
|
};
|
|
3015
2953
|
|
|
3016
2954
|
// src/components/components-tab/components-pro-notification.tsx
|
|
3017
|
-
var
|
|
2955
|
+
var React17 = __toESM(require("react"));
|
|
3018
2956
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
3019
|
-
var
|
|
3020
|
-
var
|
|
2957
|
+
var import_ui15 = require("@elementor/ui");
|
|
2958
|
+
var import_i18n20 = require("@wordpress/i18n");
|
|
3021
2959
|
function ComponentsProNotification() {
|
|
3022
|
-
return /* @__PURE__ */
|
|
2960
|
+
return /* @__PURE__ */ React17.createElement(import_ui15.Box, { sx: { px: 2 } }, /* @__PURE__ */ React17.createElement(import_editor_ui9.InfoAlert, null, /* @__PURE__ */ React17.createElement(import_ui15.Typography, { variant: "caption", component: "span" }, /* @__PURE__ */ React17.createElement(import_ui15.Typography, { variant: "caption", component: "span", fontWeight: "bold" }, (0, import_i18n20.__)("Try Components for free:", "elementor")), " ", (0, import_i18n20.__)(
|
|
3023
2961
|
"Soon Components will be part of the Pro subscription, but what you create now will remain on your site.",
|
|
3024
2962
|
"elementor"
|
|
3025
2963
|
))));
|
|
@@ -3029,10 +2967,10 @@ function ComponentsProNotification() {
|
|
|
3029
2967
|
var ComponentsContent = () => {
|
|
3030
2968
|
const { components, isLoading } = useComponents();
|
|
3031
2969
|
const hasComponents = !isLoading && components.length > 0;
|
|
3032
|
-
return /* @__PURE__ */
|
|
2970
|
+
return /* @__PURE__ */ React18.createElement(React18.Fragment, null, hasComponents && /* @__PURE__ */ React18.createElement(ComponentSearch, null), hasComponents && !isProUser() && /* @__PURE__ */ React18.createElement(ComponentsProNotification, null), /* @__PURE__ */ React18.createElement(ComponentsList, null));
|
|
3033
2971
|
};
|
|
3034
2972
|
var Components = () => {
|
|
3035
|
-
return /* @__PURE__ */
|
|
2973
|
+
return /* @__PURE__ */ React18.createElement(import_editor_ui10.ThemeProvider, null, /* @__PURE__ */ React18.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React18.createElement(ComponentsContent, null)));
|
|
3036
2974
|
};
|
|
3037
2975
|
|
|
3038
2976
|
// src/components/consts.ts
|
|
@@ -3040,22 +2978,22 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
|
|
|
3040
2978
|
var OVERRIDABLE_PROP_REPLACEMENT_ID = "overridable-prop";
|
|
3041
2979
|
|
|
3042
2980
|
// src/components/create-component-form/create-component-form.tsx
|
|
3043
|
-
var
|
|
3044
|
-
var
|
|
2981
|
+
var React19 = __toESM(require("react"));
|
|
2982
|
+
var import_react10 = require("react");
|
|
3045
2983
|
var import_editor_elements10 = require("@elementor/editor-elements");
|
|
3046
2984
|
var import_editor_notifications3 = require("@elementor/editor-notifications");
|
|
3047
2985
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
3048
2986
|
var import_icons11 = require("@elementor/icons");
|
|
3049
2987
|
var import_store47 = require("@elementor/store");
|
|
3050
|
-
var
|
|
3051
|
-
var
|
|
2988
|
+
var import_ui16 = require("@elementor/ui");
|
|
2989
|
+
var import_i18n22 = require("@wordpress/i18n");
|
|
3052
2990
|
|
|
3053
2991
|
// src/prevent-non-atomic-nesting.ts
|
|
3054
2992
|
var import_editor_canvas6 = require("@elementor/editor-canvas");
|
|
3055
2993
|
var import_editor_elements9 = require("@elementor/editor-elements");
|
|
3056
2994
|
var import_editor_notifications2 = require("@elementor/editor-notifications");
|
|
3057
2995
|
var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
|
|
3058
|
-
var
|
|
2996
|
+
var import_i18n21 = require("@wordpress/i18n");
|
|
3059
2997
|
|
|
3060
2998
|
// src/utils/is-editing-component.ts
|
|
3061
2999
|
var import_store43 = require("@elementor/store");
|
|
@@ -3070,7 +3008,7 @@ function isEditingComponent() {
|
|
|
3070
3008
|
// src/prevent-non-atomic-nesting.ts
|
|
3071
3009
|
var NON_ATOMIC_ELEMENT_ALERT = {
|
|
3072
3010
|
type: "default",
|
|
3073
|
-
message: (0,
|
|
3011
|
+
message: (0, import_i18n21.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
|
|
3074
3012
|
id: "non-atomic-element-blocked"
|
|
3075
3013
|
};
|
|
3076
3014
|
function initNonAtomicNestingPrevention() {
|
|
@@ -3204,11 +3142,11 @@ async function createUnpublishedComponent({
|
|
|
3204
3142
|
}
|
|
3205
3143
|
|
|
3206
3144
|
// src/components/create-component-form/hooks/use-form.ts
|
|
3207
|
-
var
|
|
3145
|
+
var import_react9 = require("react");
|
|
3208
3146
|
var useForm = (initialValues) => {
|
|
3209
|
-
const [values, setValues] = (0,
|
|
3210
|
-
const [errors, setErrors] = (0,
|
|
3211
|
-
const isValid = (0,
|
|
3147
|
+
const [values, setValues] = (0, import_react9.useState)(initialValues);
|
|
3148
|
+
const [errors, setErrors] = (0, import_react9.useState)({});
|
|
3149
|
+
const isValid = (0, import_react9.useMemo)(() => {
|
|
3212
3150
|
return !Object.values(errors).some((error) => error);
|
|
3213
3151
|
}, [errors]);
|
|
3214
3152
|
const handleChange = (e, field, validationSchema) => {
|
|
@@ -3283,17 +3221,17 @@ function countNestedElements(container) {
|
|
|
3283
3221
|
|
|
3284
3222
|
// src/components/create-component-form/create-component-form.tsx
|
|
3285
3223
|
function CreateComponentForm() {
|
|
3286
|
-
const [element, setElement] = (0,
|
|
3287
|
-
const [anchorPosition, setAnchorPosition] = (0,
|
|
3288
|
-
const eventData = (0,
|
|
3289
|
-
(0,
|
|
3224
|
+
const [element, setElement] = (0, import_react10.useState)(null);
|
|
3225
|
+
const [anchorPosition, setAnchorPosition] = (0, import_react10.useState)();
|
|
3226
|
+
const eventData = (0, import_react10.useRef)(null);
|
|
3227
|
+
(0, import_react10.useEffect)(() => {
|
|
3290
3228
|
const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
|
|
3291
3229
|
const openPopup = (event) => {
|
|
3292
3230
|
const nonAtomicElements = findNonAtomicElementsInElement(event.detail.element);
|
|
3293
3231
|
if (nonAtomicElements.length > 0) {
|
|
3294
3232
|
(0, import_editor_notifications3.notify)({
|
|
3295
3233
|
type: "default",
|
|
3296
|
-
message: (0,
|
|
3234
|
+
message: (0, import_i18n22.__)(
|
|
3297
3235
|
"Components require atomic elements only. Remove widgets to create this component.",
|
|
3298
3236
|
"elementor"
|
|
3299
3237
|
),
|
|
@@ -3334,12 +3272,12 @@ function CreateComponentForm() {
|
|
|
3334
3272
|
}
|
|
3335
3273
|
(0, import_editor_notifications3.notify)({
|
|
3336
3274
|
type: "success",
|
|
3337
|
-
message: (0,
|
|
3275
|
+
message: (0, import_i18n22.__)("Component created successfully.", "elementor"),
|
|
3338
3276
|
id: `component-saved-successfully-${uid}`
|
|
3339
3277
|
});
|
|
3340
3278
|
resetAndClosePopup();
|
|
3341
3279
|
} catch {
|
|
3342
|
-
const errorMessage = (0,
|
|
3280
|
+
const errorMessage = (0, import_i18n22.__)("Failed to create component. Please try again.", "elementor");
|
|
3343
3281
|
(0, import_editor_notifications3.notify)({
|
|
3344
3282
|
type: "error",
|
|
3345
3283
|
message: errorMessage,
|
|
@@ -3359,15 +3297,15 @@ function CreateComponentForm() {
|
|
|
3359
3297
|
...eventData.current
|
|
3360
3298
|
});
|
|
3361
3299
|
};
|
|
3362
|
-
return /* @__PURE__ */
|
|
3363
|
-
|
|
3300
|
+
return /* @__PURE__ */ React19.createElement(import_editor_ui11.ThemeProvider, null, /* @__PURE__ */ React19.createElement(
|
|
3301
|
+
import_ui16.Popover,
|
|
3364
3302
|
{
|
|
3365
3303
|
open: element !== null,
|
|
3366
3304
|
onClose: cancelSave,
|
|
3367
3305
|
anchorReference: "anchorPosition",
|
|
3368
3306
|
anchorPosition
|
|
3369
3307
|
},
|
|
3370
|
-
element !== null && /* @__PURE__ */
|
|
3308
|
+
element !== null && /* @__PURE__ */ React19.createElement(
|
|
3371
3309
|
Form2,
|
|
3372
3310
|
{
|
|
3373
3311
|
initialValues: { componentName: element.elementLabel },
|
|
@@ -3385,14 +3323,14 @@ var Form2 = ({
|
|
|
3385
3323
|
}) => {
|
|
3386
3324
|
const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
|
|
3387
3325
|
const { components } = useComponents();
|
|
3388
|
-
const existingComponentNames = (0,
|
|
3326
|
+
const existingComponentNames = (0, import_react10.useMemo)(() => {
|
|
3389
3327
|
return components?.map((component) => component.name) ?? [];
|
|
3390
3328
|
}, [components]);
|
|
3391
|
-
const changeValidationSchema = (0,
|
|
3329
|
+
const changeValidationSchema = (0, import_react10.useMemo)(
|
|
3392
3330
|
() => createBaseComponentSchema(existingComponentNames),
|
|
3393
3331
|
[existingComponentNames]
|
|
3394
3332
|
);
|
|
3395
|
-
const submitValidationSchema = (0,
|
|
3333
|
+
const submitValidationSchema = (0, import_react10.useMemo)(
|
|
3396
3334
|
() => createSubmitComponentSchema(existingComponentNames),
|
|
3397
3335
|
[existingComponentNames]
|
|
3398
3336
|
);
|
|
@@ -3403,14 +3341,14 @@ var Form2 = ({
|
|
|
3403
3341
|
}
|
|
3404
3342
|
};
|
|
3405
3343
|
const texts = {
|
|
3406
|
-
heading: (0,
|
|
3407
|
-
name: (0,
|
|
3408
|
-
cancel: (0,
|
|
3409
|
-
create: (0,
|
|
3344
|
+
heading: (0, import_i18n22.__)("Create component", "elementor"),
|
|
3345
|
+
name: (0, import_i18n22.__)("Name", "elementor"),
|
|
3346
|
+
cancel: (0, import_i18n22.__)("Cancel", "elementor"),
|
|
3347
|
+
create: (0, import_i18n22.__)("Create", "elementor")
|
|
3410
3348
|
};
|
|
3411
3349
|
const nameInputId = "component-name";
|
|
3412
|
-
return /* @__PURE__ */
|
|
3413
|
-
|
|
3350
|
+
return /* @__PURE__ */ React19.createElement(import_editor_ui11.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
|
|
3351
|
+
import_ui16.Stack,
|
|
3414
3352
|
{
|
|
3415
3353
|
direction: "row",
|
|
3416
3354
|
alignItems: "center",
|
|
@@ -3418,10 +3356,10 @@ var Form2 = ({
|
|
|
3418
3356
|
px: 1.5,
|
|
3419
3357
|
sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
|
|
3420
3358
|
},
|
|
3421
|
-
/* @__PURE__ */
|
|
3422
|
-
/* @__PURE__ */
|
|
3423
|
-
), /* @__PURE__ */
|
|
3424
|
-
|
|
3359
|
+
/* @__PURE__ */ React19.createElement(import_icons11.ComponentsIcon, { fontSize: FONT_SIZE }),
|
|
3360
|
+
/* @__PURE__ */ React19.createElement(import_ui16.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
|
|
3361
|
+
), /* @__PURE__ */ React19.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(import_ui16.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React19.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
|
|
3362
|
+
import_ui16.TextField,
|
|
3425
3363
|
{
|
|
3426
3364
|
id: nameInputId,
|
|
3427
3365
|
size: FONT_SIZE,
|
|
@@ -3432,12 +3370,12 @@ var Form2 = ({
|
|
|
3432
3370
|
error: Boolean(errors.componentName),
|
|
3433
3371
|
helperText: errors.componentName
|
|
3434
3372
|
}
|
|
3435
|
-
))), /* @__PURE__ */
|
|
3373
|
+
))), /* @__PURE__ */ React19.createElement(import_ui16.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui16.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React19.createElement(import_ui16.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
|
|
3436
3374
|
};
|
|
3437
3375
|
|
|
3438
3376
|
// src/components/edit-component/edit-component.tsx
|
|
3439
|
-
var
|
|
3440
|
-
var
|
|
3377
|
+
var React21 = __toESM(require("react"));
|
|
3378
|
+
var import_react13 = require("react");
|
|
3441
3379
|
var import_editor_documents11 = require("@elementor/editor-documents");
|
|
3442
3380
|
var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
|
|
3443
3381
|
var import_store51 = require("@elementor/store");
|
|
@@ -3459,10 +3397,10 @@ function updateCurrentComponent({
|
|
|
3459
3397
|
}
|
|
3460
3398
|
|
|
3461
3399
|
// src/components/edit-component/component-modal.tsx
|
|
3462
|
-
var
|
|
3463
|
-
var
|
|
3400
|
+
var React20 = __toESM(require("react"));
|
|
3401
|
+
var import_react12 = require("react");
|
|
3464
3402
|
var import_react_dom = require("react-dom");
|
|
3465
|
-
var
|
|
3403
|
+
var import_i18n23 = require("@wordpress/i18n");
|
|
3466
3404
|
|
|
3467
3405
|
// src/hooks/use-canvas-document.ts
|
|
3468
3406
|
var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
|
|
@@ -3471,10 +3409,10 @@ function useCanvasDocument() {
|
|
|
3471
3409
|
}
|
|
3472
3410
|
|
|
3473
3411
|
// src/hooks/use-element-rect.ts
|
|
3474
|
-
var
|
|
3412
|
+
var import_react11 = require("react");
|
|
3475
3413
|
var import_utils5 = require("@elementor/utils");
|
|
3476
3414
|
function useElementRect(element) {
|
|
3477
|
-
const [rect, setRect] = (0,
|
|
3415
|
+
const [rect, setRect] = (0, import_react11.useState)(new DOMRect(0, 0, 0, 0));
|
|
3478
3416
|
const onChange = (0, import_utils5.throttle)(
|
|
3479
3417
|
() => {
|
|
3480
3418
|
setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
|
|
@@ -3485,7 +3423,7 @@ function useElementRect(element) {
|
|
|
3485
3423
|
useScrollListener({ element, onChange });
|
|
3486
3424
|
useResizeListener({ element, onChange });
|
|
3487
3425
|
useMutationsListener({ element, onChange });
|
|
3488
|
-
(0,
|
|
3426
|
+
(0, import_react11.useEffect)(
|
|
3489
3427
|
() => () => {
|
|
3490
3428
|
onChange.cancel();
|
|
3491
3429
|
},
|
|
@@ -3494,7 +3432,7 @@ function useElementRect(element) {
|
|
|
3494
3432
|
return rect;
|
|
3495
3433
|
}
|
|
3496
3434
|
function useScrollListener({ element, onChange }) {
|
|
3497
|
-
(0,
|
|
3435
|
+
(0, import_react11.useEffect)(() => {
|
|
3498
3436
|
if (!element) {
|
|
3499
3437
|
return;
|
|
3500
3438
|
}
|
|
@@ -3506,7 +3444,7 @@ function useScrollListener({ element, onChange }) {
|
|
|
3506
3444
|
}, [element, onChange]);
|
|
3507
3445
|
}
|
|
3508
3446
|
function useResizeListener({ element, onChange }) {
|
|
3509
|
-
(0,
|
|
3447
|
+
(0, import_react11.useEffect)(() => {
|
|
3510
3448
|
if (!element) {
|
|
3511
3449
|
return;
|
|
3512
3450
|
}
|
|
@@ -3521,7 +3459,7 @@ function useResizeListener({ element, onChange }) {
|
|
|
3521
3459
|
}, [element, onChange]);
|
|
3522
3460
|
}
|
|
3523
3461
|
function useMutationsListener({ element, onChange }) {
|
|
3524
|
-
(0,
|
|
3462
|
+
(0, import_react11.useEffect)(() => {
|
|
3525
3463
|
if (!element) {
|
|
3526
3464
|
return;
|
|
3527
3465
|
}
|
|
@@ -3536,7 +3474,7 @@ function useMutationsListener({ element, onChange }) {
|
|
|
3536
3474
|
// src/components/edit-component/component-modal.tsx
|
|
3537
3475
|
function ComponentModal({ topLevelElementDom, onClose }) {
|
|
3538
3476
|
const canvasDocument = useCanvasDocument();
|
|
3539
|
-
(0,
|
|
3477
|
+
(0, import_react12.useEffect)(() => {
|
|
3540
3478
|
const handleEsc = (event) => {
|
|
3541
3479
|
if (event.key === "Escape") {
|
|
3542
3480
|
onClose();
|
|
@@ -3551,7 +3489,7 @@ function ComponentModal({ topLevelElementDom, onClose }) {
|
|
|
3551
3489
|
return null;
|
|
3552
3490
|
}
|
|
3553
3491
|
return (0, import_react_dom.createPortal)(
|
|
3554
|
-
/* @__PURE__ */
|
|
3492
|
+
/* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(BlockEditPage, null), /* @__PURE__ */ React20.createElement(Backdrop, { canvas: canvasDocument, element: topLevelElementDom, onClose })),
|
|
3555
3493
|
canvasDocument.body
|
|
3556
3494
|
);
|
|
3557
3495
|
}
|
|
@@ -3580,7 +3518,7 @@ function Backdrop({
|
|
|
3580
3518
|
onClose();
|
|
3581
3519
|
}
|
|
3582
3520
|
};
|
|
3583
|
-
return /* @__PURE__ */
|
|
3521
|
+
return /* @__PURE__ */ React20.createElement(
|
|
3584
3522
|
"div",
|
|
3585
3523
|
{
|
|
3586
3524
|
style: backdropStyle,
|
|
@@ -3588,7 +3526,7 @@ function Backdrop({
|
|
|
3588
3526
|
onKeyDown: handleKeyDown,
|
|
3589
3527
|
role: "button",
|
|
3590
3528
|
tabIndex: 0,
|
|
3591
|
-
"aria-label": (0,
|
|
3529
|
+
"aria-label": (0, import_i18n23.__)("Exit component editing mode", "elementor")
|
|
3592
3530
|
}
|
|
3593
3531
|
);
|
|
3594
3532
|
}
|
|
@@ -3628,7 +3566,7 @@ function BlockEditPage() {
|
|
|
3628
3566
|
}
|
|
3629
3567
|
}
|
|
3630
3568
|
`;
|
|
3631
|
-
return /* @__PURE__ */
|
|
3569
|
+
return /* @__PURE__ */ React20.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
|
|
3632
3570
|
}
|
|
3633
3571
|
|
|
3634
3572
|
// src/components/edit-component/edit-component.tsx
|
|
@@ -3641,13 +3579,13 @@ function EditComponent() {
|
|
|
3641
3579
|
if (!currentComponentId) {
|
|
3642
3580
|
return null;
|
|
3643
3581
|
}
|
|
3644
|
-
return /* @__PURE__ */
|
|
3582
|
+
return /* @__PURE__ */ React21.createElement(ComponentModal, { topLevelElementDom, onClose });
|
|
3645
3583
|
}
|
|
3646
3584
|
function useHandleDocumentSwitches() {
|
|
3647
3585
|
const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
|
|
3648
3586
|
const currentComponentId = useCurrentComponentId();
|
|
3649
3587
|
const path = (0, import_store51.__useSelector)(selectPath);
|
|
3650
|
-
(0,
|
|
3588
|
+
(0, import_react13.useEffect)(() => {
|
|
3651
3589
|
return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/open"), () => {
|
|
3652
3590
|
const nextDocument = documentsManager.getCurrent();
|
|
3653
3591
|
if (nextDocument.id === currentComponentId) {
|
|
@@ -3700,11 +3638,11 @@ function getInstanceTitle(instanceId, path) {
|
|
|
3700
3638
|
}
|
|
3701
3639
|
function useComponentDOMElement(id2) {
|
|
3702
3640
|
const { componentContainerDomElement, topLevelElementDom } = getComponentDOMElements(id2);
|
|
3703
|
-
const [currentElementDom, setCurrentElementDom] = (0,
|
|
3704
|
-
(0,
|
|
3641
|
+
const [currentElementDom, setCurrentElementDom] = (0, import_react13.useState)(topLevelElementDom);
|
|
3642
|
+
(0, import_react13.useEffect)(() => {
|
|
3705
3643
|
setCurrentElementDom(topLevelElementDom);
|
|
3706
3644
|
}, [topLevelElementDom]);
|
|
3707
|
-
(0,
|
|
3645
|
+
(0, import_react13.useEffect)(() => {
|
|
3708
3646
|
if (!componentContainerDomElement) {
|
|
3709
3647
|
return;
|
|
3710
3648
|
}
|
|
@@ -3732,34 +3670,34 @@ function getComponentDOMElements(id2) {
|
|
|
3732
3670
|
}
|
|
3733
3671
|
|
|
3734
3672
|
// src/components/in-edit-mode.tsx
|
|
3735
|
-
var
|
|
3673
|
+
var React22 = __toESM(require("react"));
|
|
3736
3674
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
3737
3675
|
var import_icons12 = require("@elementor/icons");
|
|
3738
|
-
var
|
|
3739
|
-
var
|
|
3676
|
+
var import_ui17 = require("@elementor/ui");
|
|
3677
|
+
var import_i18n24 = require("@wordpress/i18n");
|
|
3740
3678
|
var openEditModeDialog = (lockedBy) => {
|
|
3741
3679
|
(0, import_editor_ui12.openDialog)({
|
|
3742
|
-
component: /* @__PURE__ */
|
|
3680
|
+
component: /* @__PURE__ */ React22.createElement(EditModeDialog, { lockedBy })
|
|
3743
3681
|
});
|
|
3744
3682
|
};
|
|
3745
3683
|
var EditModeDialog = ({ lockedBy }) => {
|
|
3746
|
-
const content = (0,
|
|
3747
|
-
return /* @__PURE__ */
|
|
3684
|
+
const content = (0, import_i18n24.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
|
|
3685
|
+
return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui17.DialogHeader, { logo: false }, /* @__PURE__ */ React22.createElement(import_ui17.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(import_ui17.Icon, { color: "secondary" }, /* @__PURE__ */ React22.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React22.createElement(import_ui17.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React22.createElement(import_ui17.DialogContent, null, /* @__PURE__ */ React22.createElement(import_ui17.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React22.createElement(import_ui17.Typography, { variant: "body2" }, (0, import_i18n24.__)(
|
|
3748
3686
|
"You can wait for them to finish or reach out to coordinate your changes together.",
|
|
3749
3687
|
"elementor"
|
|
3750
|
-
)), /* @__PURE__ */
|
|
3688
|
+
)), /* @__PURE__ */ React22.createElement(import_ui17.DialogActions, null, /* @__PURE__ */ React22.createElement(import_ui17.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui12.closeDialog }, (0, import_i18n24.__)("Close", "elementor"))))));
|
|
3751
3689
|
};
|
|
3752
3690
|
|
|
3753
3691
|
// src/components/instance-editing-panel/instance-editing-panel.tsx
|
|
3754
|
-
var
|
|
3692
|
+
var React28 = __toESM(require("react"));
|
|
3755
3693
|
var import_editor_controls4 = require("@elementor/editor-controls");
|
|
3756
3694
|
var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
|
|
3757
3695
|
var import_editor_elements15 = require("@elementor/editor-elements");
|
|
3758
3696
|
var import_editor_panels4 = require("@elementor/editor-panels");
|
|
3759
3697
|
var import_editor_ui14 = require("@elementor/editor-ui");
|
|
3760
3698
|
var import_icons14 = require("@elementor/icons");
|
|
3761
|
-
var
|
|
3762
|
-
var
|
|
3699
|
+
var import_ui22 = require("@elementor/ui");
|
|
3700
|
+
var import_i18n26 = require("@wordpress/i18n");
|
|
3763
3701
|
|
|
3764
3702
|
// src/hooks/use-component-instance-settings.ts
|
|
3765
3703
|
var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
|
|
@@ -3771,21 +3709,21 @@ function useComponentInstanceSettings() {
|
|
|
3771
3709
|
}
|
|
3772
3710
|
|
|
3773
3711
|
// src/components/instance-editing-panel/empty-state.tsx
|
|
3774
|
-
var
|
|
3712
|
+
var React23 = __toESM(require("react"));
|
|
3775
3713
|
var import_icons13 = require("@elementor/icons");
|
|
3776
|
-
var
|
|
3777
|
-
var
|
|
3714
|
+
var import_ui18 = require("@elementor/ui");
|
|
3715
|
+
var import_i18n25 = require("@wordpress/i18n");
|
|
3778
3716
|
var EmptyState2 = ({ onEditComponent }) => {
|
|
3779
3717
|
const { canEdit } = useComponentsPermissions();
|
|
3780
|
-
const message = canEdit ? (0,
|
|
3718
|
+
const message = canEdit ? (0, import_i18n25.__)(
|
|
3781
3719
|
"Edit the component to add properties, manage them or update the design across all instances.",
|
|
3782
3720
|
"elementor"
|
|
3783
|
-
) : (0,
|
|
3721
|
+
) : (0, import_i18n25.__)(
|
|
3784
3722
|
"With your current role, you cannot edit this component. Contact an administrator to add properties.",
|
|
3785
3723
|
"elementor"
|
|
3786
3724
|
);
|
|
3787
|
-
return /* @__PURE__ */
|
|
3788
|
-
|
|
3725
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3726
|
+
import_ui18.Stack,
|
|
3789
3727
|
{
|
|
3790
3728
|
alignItems: "center",
|
|
3791
3729
|
justifyContent: "start",
|
|
@@ -3794,26 +3732,26 @@ var EmptyState2 = ({ onEditComponent }) => {
|
|
|
3794
3732
|
sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
|
|
3795
3733
|
gap: 1.5
|
|
3796
3734
|
},
|
|
3797
|
-
/* @__PURE__ */
|
|
3798
|
-
/* @__PURE__ */
|
|
3799
|
-
/* @__PURE__ */
|
|
3800
|
-
canEdit && /* @__PURE__ */
|
|
3735
|
+
/* @__PURE__ */ React23.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
|
|
3736
|
+
/* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n25.__)("No properties yet", "elementor")),
|
|
3737
|
+
/* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
|
|
3738
|
+
canEdit && /* @__PURE__ */ React23.createElement(import_ui18.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n25.__)("Edit component", "elementor"))
|
|
3801
3739
|
);
|
|
3802
3740
|
};
|
|
3803
3741
|
|
|
3804
3742
|
// src/components/instance-editing-panel/override-props-group.tsx
|
|
3805
|
-
var
|
|
3806
|
-
var
|
|
3743
|
+
var React27 = __toESM(require("react"));
|
|
3744
|
+
var import_react15 = require("react");
|
|
3807
3745
|
var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
|
|
3808
3746
|
var import_editor_ui13 = require("@elementor/editor-ui");
|
|
3809
|
-
var
|
|
3747
|
+
var import_ui21 = require("@elementor/ui");
|
|
3810
3748
|
|
|
3811
3749
|
// src/components/instance-editing-panel/override-prop-control.tsx
|
|
3812
|
-
var
|
|
3750
|
+
var React26 = __toESM(require("react"));
|
|
3813
3751
|
var import_editor_controls3 = require("@elementor/editor-controls");
|
|
3814
3752
|
var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
|
|
3815
3753
|
var import_editor_elements14 = require("@elementor/editor-elements");
|
|
3816
|
-
var
|
|
3754
|
+
var import_ui20 = require("@elementor/ui");
|
|
3817
3755
|
|
|
3818
3756
|
// src/hooks/use-controls-by-widget-type.ts
|
|
3819
3757
|
var import_editor_elements12 = require("@elementor/editor-elements");
|
|
@@ -3847,14 +3785,14 @@ function getControlsByBind(controls) {
|
|
|
3847
3785
|
}
|
|
3848
3786
|
|
|
3849
3787
|
// src/provider/overridable-prop-context.tsx
|
|
3850
|
-
var
|
|
3851
|
-
var
|
|
3852
|
-
var OverridablePropContext = (0,
|
|
3788
|
+
var React24 = __toESM(require("react"));
|
|
3789
|
+
var import_react14 = require("react");
|
|
3790
|
+
var OverridablePropContext = (0, import_react14.createContext)(null);
|
|
3853
3791
|
function OverridablePropProvider({ children, ...props }) {
|
|
3854
|
-
return /* @__PURE__ */
|
|
3792
|
+
return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
|
|
3855
3793
|
}
|
|
3856
|
-
var useOverridablePropValue = () => (0,
|
|
3857
|
-
var useComponentInstanceElement = () => (0,
|
|
3794
|
+
var useOverridablePropValue = () => (0, import_react14.useContext)(OverridablePropContext)?.value;
|
|
3795
|
+
var useComponentInstanceElement = () => (0, import_react14.useContext)(OverridablePropContext)?.componentInstanceElement;
|
|
3858
3796
|
|
|
3859
3797
|
// src/store/actions/update-overridable-prop.ts
|
|
3860
3798
|
var import_store53 = require("@elementor/store");
|
|
@@ -3945,11 +3883,11 @@ function getPropType({ widgetType, propKey }) {
|
|
|
3945
3883
|
}
|
|
3946
3884
|
|
|
3947
3885
|
// src/components/control-label.tsx
|
|
3948
|
-
var
|
|
3886
|
+
var React25 = __toESM(require("react"));
|
|
3949
3887
|
var import_editor_controls2 = require("@elementor/editor-controls");
|
|
3950
|
-
var
|
|
3888
|
+
var import_ui19 = require("@elementor/ui");
|
|
3951
3889
|
var ControlLabel = ({ children, ...props }) => {
|
|
3952
|
-
return /* @__PURE__ */
|
|
3890
|
+
return /* @__PURE__ */ React25.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React25.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React25.createElement(import_editor_controls2.ControlAdornments, null));
|
|
3953
3891
|
};
|
|
3954
3892
|
|
|
3955
3893
|
// src/components/errors.ts
|
|
@@ -3961,7 +3899,7 @@ var OverrideControlInnerElementNotFoundError = (0, import_utils7.createError)({
|
|
|
3961
3899
|
|
|
3962
3900
|
// src/components/instance-editing-panel/override-prop-control.tsx
|
|
3963
3901
|
function OverridePropControl({ overridableProp, overrides }) {
|
|
3964
|
-
return /* @__PURE__ */
|
|
3902
|
+
return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
|
|
3965
3903
|
}
|
|
3966
3904
|
function OverrideControl({ overridableProp, overrides }) {
|
|
3967
3905
|
const componentInstanceElement = (0, import_editor_editing_panel3.useElement)();
|
|
@@ -4032,13 +3970,13 @@ function OverrideControl({ overridableProp, overrides }) {
|
|
|
4032
3970
|
if (!elementType) {
|
|
4033
3971
|
return null;
|
|
4034
3972
|
}
|
|
4035
|
-
return /* @__PURE__ */
|
|
3973
|
+
return /* @__PURE__ */ React26.createElement(
|
|
4036
3974
|
OverridablePropProvider,
|
|
4037
3975
|
{
|
|
4038
3976
|
value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
|
|
4039
3977
|
componentInstanceElement
|
|
4040
3978
|
},
|
|
4041
|
-
/* @__PURE__ */
|
|
3979
|
+
/* @__PURE__ */ React26.createElement(import_editor_editing_panel3.ElementProvider, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(
|
|
4042
3980
|
import_editor_controls3.PropProvider,
|
|
4043
3981
|
{
|
|
4044
3982
|
propType: propTypeSchema,
|
|
@@ -4048,7 +3986,7 @@ function OverrideControl({ overridableProp, overrides }) {
|
|
|
4048
3986
|
return false;
|
|
4049
3987
|
}
|
|
4050
3988
|
},
|
|
4051
|
-
/* @__PURE__ */
|
|
3989
|
+
/* @__PURE__ */ React26.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React26.createElement(import_editor_controls3.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React26.createElement(import_ui20.Stack, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React26.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React26.createElement(OriginalControl, { control, controlProps }))))
|
|
4052
3990
|
)))
|
|
4053
3991
|
);
|
|
4054
3992
|
}
|
|
@@ -4112,7 +4050,7 @@ function getControlParams(controls, originPropFields, label) {
|
|
|
4112
4050
|
}
|
|
4113
4051
|
function OriginalControl({ control, controlProps }) {
|
|
4114
4052
|
const { value } = control;
|
|
4115
|
-
return /* @__PURE__ */
|
|
4053
|
+
return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.BaseControl, { type: value.type, props: controlProps });
|
|
4116
4054
|
}
|
|
4117
4055
|
function getControlLayout(control) {
|
|
4118
4056
|
return control.value.meta?.layout || import_editor_editing_panel3.controlsRegistry.getLayout(control.value.type);
|
|
@@ -4139,12 +4077,12 @@ function OverridePropsGroup({ group, props, overrides }) {
|
|
|
4139
4077
|
const handleClick = () => {
|
|
4140
4078
|
setIsOpen(!isOpen);
|
|
4141
4079
|
};
|
|
4142
|
-
const id2 = (0,
|
|
4080
|
+
const id2 = (0, import_react15.useId)();
|
|
4143
4081
|
const labelId = `label-${id2}`;
|
|
4144
4082
|
const contentId = `content-${id2}`;
|
|
4145
4083
|
const title = group.label;
|
|
4146
|
-
return /* @__PURE__ */
|
|
4147
|
-
|
|
4084
|
+
return /* @__PURE__ */ React27.createElement(import_ui21.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React27.createElement(
|
|
4085
|
+
import_ui21.ListItemButton,
|
|
4148
4086
|
{
|
|
4149
4087
|
id: labelId,
|
|
4150
4088
|
"aria-controls": contentId,
|
|
@@ -4153,16 +4091,16 @@ function OverridePropsGroup({ group, props, overrides }) {
|
|
|
4153
4091
|
p: 0,
|
|
4154
4092
|
sx: { "&:hover": { backgroundColor: "transparent" } }
|
|
4155
4093
|
},
|
|
4156
|
-
/* @__PURE__ */
|
|
4157
|
-
|
|
4094
|
+
/* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React27.createElement(
|
|
4095
|
+
import_ui21.ListItemText,
|
|
4158
4096
|
{
|
|
4159
4097
|
secondary: title,
|
|
4160
4098
|
secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
|
|
4161
4099
|
sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
|
|
4162
4100
|
}
|
|
4163
4101
|
)),
|
|
4164
|
-
/* @__PURE__ */
|
|
4165
|
-
), /* @__PURE__ */
|
|
4102
|
+
/* @__PURE__ */ React27.createElement(import_editor_ui13.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
|
|
4103
|
+
), /* @__PURE__ */ React27.createElement(import_ui21.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React27.createElement(
|
|
4166
4104
|
OverridePropControl,
|
|
4167
4105
|
{
|
|
4168
4106
|
key: overrideKey,
|
|
@@ -4184,23 +4122,23 @@ function InstanceEditingPanel() {
|
|
|
4184
4122
|
if (!componentId || !overridableProps || !component) {
|
|
4185
4123
|
return null;
|
|
4186
4124
|
}
|
|
4187
|
-
const panelTitle = (0,
|
|
4125
|
+
const panelTitle = (0, import_i18n26.__)("Edit %s", "elementor").replace("%s", component.name);
|
|
4188
4126
|
const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
|
|
4189
4127
|
const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
|
|
4190
4128
|
const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
|
|
4191
4129
|
const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
|
|
4192
|
-
return /* @__PURE__ */
|
|
4130
|
+
return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(import_editor_ui14.EllipsisWithTooltip, { title: component.name, as: import_editor_panels4.PanelHeaderTitle, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React28.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React28.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelBody, null, /* @__PURE__ */ React28.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id }, /* @__PURE__ */ React28.createElement(
|
|
4193
4131
|
OverridePropsGroup,
|
|
4194
4132
|
{
|
|
4195
4133
|
group,
|
|
4196
4134
|
props: overridableProps.props,
|
|
4197
4135
|
overrides
|
|
4198
4136
|
}
|
|
4199
|
-
), /* @__PURE__ */
|
|
4137
|
+
), /* @__PURE__ */ React28.createElement(import_ui22.Divider, null)))))));
|
|
4200
4138
|
}
|
|
4201
4139
|
|
|
4202
4140
|
// src/components/overridable-props/overridable-prop-control.tsx
|
|
4203
|
-
var
|
|
4141
|
+
var React29 = __toESM(require("react"));
|
|
4204
4142
|
var import_editor_controls5 = require("@elementor/editor-controls");
|
|
4205
4143
|
var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
|
|
4206
4144
|
function OverridablePropControl({
|
|
@@ -4245,7 +4183,7 @@ function OverridablePropControl({
|
|
|
4245
4183
|
});
|
|
4246
4184
|
const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
|
|
4247
4185
|
const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
|
|
4248
|
-
return /* @__PURE__ */
|
|
4186
|
+
return /* @__PURE__ */ React29.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React29.createElement(
|
|
4249
4187
|
import_editor_controls5.PropProvider,
|
|
4250
4188
|
{
|
|
4251
4189
|
...propContext,
|
|
@@ -4256,7 +4194,7 @@ function OverridablePropControl({
|
|
|
4256
4194
|
},
|
|
4257
4195
|
placeholder: objectPlaceholder
|
|
4258
4196
|
},
|
|
4259
|
-
/* @__PURE__ */
|
|
4197
|
+
/* @__PURE__ */ React29.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React29.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React29.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
|
|
4260
4198
|
));
|
|
4261
4199
|
}
|
|
4262
4200
|
function ControlWithReplacements({
|
|
@@ -4266,18 +4204,18 @@ function ControlWithReplacements({
|
|
|
4266
4204
|
const { ControlToRender, isReplaced } = (0, import_editor_controls5.useControlReplacement)(OriginalControl2);
|
|
4267
4205
|
if (isReplaced) {
|
|
4268
4206
|
const ReplacementControl = ControlToRender;
|
|
4269
|
-
return /* @__PURE__ */
|
|
4207
|
+
return /* @__PURE__ */ React29.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
|
|
4270
4208
|
}
|
|
4271
|
-
return /* @__PURE__ */
|
|
4209
|
+
return /* @__PURE__ */ React29.createElement(OriginalControl2, { ...props });
|
|
4272
4210
|
}
|
|
4273
4211
|
|
|
4274
4212
|
// src/components/overridable-props/overridable-prop-indicator.tsx
|
|
4275
|
-
var
|
|
4213
|
+
var React31 = __toESM(require("react"));
|
|
4276
4214
|
var import_editor_controls6 = require("@elementor/editor-controls");
|
|
4277
4215
|
var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
|
|
4278
4216
|
var import_editor_elements16 = require("@elementor/editor-elements");
|
|
4279
|
-
var
|
|
4280
|
-
var
|
|
4217
|
+
var import_ui24 = require("@elementor/ui");
|
|
4218
|
+
var import_i18n28 = require("@wordpress/i18n");
|
|
4281
4219
|
|
|
4282
4220
|
// src/store/actions/set-overridable-prop.ts
|
|
4283
4221
|
var import_store58 = require("@elementor/store");
|
|
@@ -4358,13 +4296,13 @@ function setOverridableProp({
|
|
|
4358
4296
|
}
|
|
4359
4297
|
|
|
4360
4298
|
// src/components/overridable-props/indicator.tsx
|
|
4361
|
-
var
|
|
4362
|
-
var
|
|
4299
|
+
var React30 = __toESM(require("react"));
|
|
4300
|
+
var import_react16 = require("react");
|
|
4363
4301
|
var import_icons15 = require("@elementor/icons");
|
|
4364
|
-
var
|
|
4365
|
-
var
|
|
4302
|
+
var import_ui23 = require("@elementor/ui");
|
|
4303
|
+
var import_i18n27 = require("@wordpress/i18n");
|
|
4366
4304
|
var SIZE2 = "tiny";
|
|
4367
|
-
var IconContainer = (0,
|
|
4305
|
+
var IconContainer = (0, import_ui23.styled)(import_ui23.Box)`
|
|
4368
4306
|
pointer-events: none;
|
|
4369
4307
|
opacity: 0;
|
|
4370
4308
|
transition: opacity 0.2s ease-in-out;
|
|
@@ -4381,7 +4319,7 @@ var IconContainer = (0, import_ui24.styled)(import_ui24.Box)`
|
|
|
4381
4319
|
stroke-width: 2px;
|
|
4382
4320
|
}
|
|
4383
4321
|
`;
|
|
4384
|
-
var Content = (0,
|
|
4322
|
+
var Content = (0, import_ui23.styled)(import_ui23.Box)`
|
|
4385
4323
|
position: relative;
|
|
4386
4324
|
display: flex;
|
|
4387
4325
|
align-items: center;
|
|
@@ -4418,13 +4356,13 @@ var Content = (0, import_ui24.styled)(import_ui24.Box)`
|
|
|
4418
4356
|
}
|
|
4419
4357
|
}
|
|
4420
4358
|
`;
|
|
4421
|
-
var Indicator2 = (0,
|
|
4359
|
+
var Indicator2 = (0, import_react16.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React30.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React30.createElement(
|
|
4422
4360
|
IconContainer,
|
|
4423
4361
|
{
|
|
4424
4362
|
className: "icon",
|
|
4425
|
-
"aria-label": isOverridable ? (0,
|
|
4363
|
+
"aria-label": isOverridable ? (0, import_i18n27.__)("Overridable property", "elementor") : (0, import_i18n27.__)("Make prop overridable", "elementor")
|
|
4426
4364
|
},
|
|
4427
|
-
isOverridable ? /* @__PURE__ */
|
|
4365
|
+
isOverridable ? /* @__PURE__ */ React30.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React30.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
|
|
4428
4366
|
)));
|
|
4429
4367
|
|
|
4430
4368
|
// src/components/overridable-props/utils/get-overridable-prop.ts
|
|
@@ -4448,7 +4386,7 @@ function OverridablePropIndicator() {
|
|
|
4448
4386
|
if (!isPropAllowed(propType) || !componentId || !overridableProps) {
|
|
4449
4387
|
return null;
|
|
4450
4388
|
}
|
|
4451
|
-
return /* @__PURE__ */
|
|
4389
|
+
return /* @__PURE__ */ React31.createElement(Content2, { componentId, overridableProps });
|
|
4452
4390
|
}
|
|
4453
4391
|
function Content2({ componentId, overridableProps }) {
|
|
4454
4392
|
const {
|
|
@@ -4462,11 +4400,11 @@ function Content2({ componentId, overridableProps }) {
|
|
|
4462
4400
|
componentOverridablePropTypeUtil
|
|
4463
4401
|
);
|
|
4464
4402
|
const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
|
|
4465
|
-
const popupState = (0,
|
|
4403
|
+
const popupState = (0, import_ui24.usePopupState)({
|
|
4466
4404
|
variant: "popover"
|
|
4467
4405
|
});
|
|
4468
|
-
const triggerProps = (0,
|
|
4469
|
-
const popoverProps = (0,
|
|
4406
|
+
const triggerProps = (0, import_ui24.bindTrigger)(popupState);
|
|
4407
|
+
const popoverProps = (0, import_ui24.bindPopover)(popupState);
|
|
4470
4408
|
const { elType } = (0, import_editor_elements16.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
|
|
4471
4409
|
const handleSubmit = ({ label, group }) => {
|
|
4472
4410
|
const propTypeDefault = propType.default ?? {};
|
|
@@ -4494,8 +4432,8 @@ function Content2({ componentId, overridableProps }) {
|
|
|
4494
4432
|
popupState.close();
|
|
4495
4433
|
};
|
|
4496
4434
|
const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
|
|
4497
|
-
return /* @__PURE__ */
|
|
4498
|
-
|
|
4435
|
+
return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n28.__)("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
|
|
4436
|
+
import_ui24.Popover,
|
|
4499
4437
|
{
|
|
4500
4438
|
disableScrollLock: true,
|
|
4501
4439
|
anchorOrigin: {
|
|
@@ -4511,7 +4449,7 @@ function Content2({ componentId, overridableProps }) {
|
|
|
4511
4449
|
},
|
|
4512
4450
|
...popoverProps
|
|
4513
4451
|
},
|
|
4514
|
-
/* @__PURE__ */
|
|
4452
|
+
/* @__PURE__ */ React31.createElement(
|
|
4515
4453
|
OverridablePropForm,
|
|
4516
4454
|
{
|
|
4517
4455
|
onSubmit: handleSubmit,
|
|
@@ -4530,12 +4468,12 @@ function isPropAllowed(propType) {
|
|
|
4530
4468
|
}
|
|
4531
4469
|
|
|
4532
4470
|
// src/mcp/index.ts
|
|
4533
|
-
var
|
|
4471
|
+
var import_editor_mcp2 = require("@elementor/editor-mcp");
|
|
4534
4472
|
|
|
4535
4473
|
// src/mcp/save-as-component-tool.ts
|
|
4536
4474
|
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
4537
4475
|
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
4538
|
-
var
|
|
4476
|
+
var import_editor_mcp = require("@elementor/editor-mcp");
|
|
4539
4477
|
var import_http_client2 = require("@elementor/http-client");
|
|
4540
4478
|
var import_schema6 = require("@elementor/schema");
|
|
4541
4479
|
var import_utils9 = require("@elementor/utils");
|
|
@@ -4708,7 +4646,7 @@ function getValidElementTypes() {
|
|
|
4708
4646
|
}, []);
|
|
4709
4647
|
}
|
|
4710
4648
|
var generatePrompt = () => {
|
|
4711
|
-
const saveAsComponentPrompt = (0,
|
|
4649
|
+
const saveAsComponentPrompt = (0, import_editor_mcp.toolPrompts)("save-as-component");
|
|
4712
4650
|
saveAsComponentPrompt.description(`
|
|
4713
4651
|
Save an existing element as a reusable component in the Elementor editor.
|
|
4714
4652
|
|
|
@@ -4852,7 +4790,7 @@ Component with overridable properties:
|
|
|
4852
4790
|
return saveAsComponentPrompt.prompt();
|
|
4853
4791
|
};
|
|
4854
4792
|
var initSaveAsComponentTool = () => {
|
|
4855
|
-
return (0,
|
|
4793
|
+
return (0, import_editor_mcp.getMCPByDomain)("components").addTool({
|
|
4856
4794
|
name: "save-as-component",
|
|
4857
4795
|
schema: InputSchema,
|
|
4858
4796
|
outputSchema: OutputSchema,
|
|
@@ -4863,7 +4801,7 @@ var initSaveAsComponentTool = () => {
|
|
|
4863
4801
|
|
|
4864
4802
|
// src/mcp/index.ts
|
|
4865
4803
|
function initMcp() {
|
|
4866
|
-
const { setMCPDescription } = (0,
|
|
4804
|
+
const { setMCPDescription } = (0, import_editor_mcp2.getMCPByDomain)("components");
|
|
4867
4805
|
setMCPDescription(
|
|
4868
4806
|
`Elementor Editor Components MCP - Tools for creating and managing reusable components.
|
|
4869
4807
|
Components are reusable blocks of content that can be used multiple times across the pages, its a widget which contains a set of elements and styles.`
|
|
@@ -4872,10 +4810,10 @@ function initMcp() {
|
|
|
4872
4810
|
}
|
|
4873
4811
|
|
|
4874
4812
|
// src/populate-store.ts
|
|
4875
|
-
var
|
|
4813
|
+
var import_react17 = require("react");
|
|
4876
4814
|
var import_store63 = require("@elementor/store");
|
|
4877
4815
|
function PopulateStore() {
|
|
4878
|
-
(0,
|
|
4816
|
+
(0, import_react17.useEffect)(() => {
|
|
4879
4817
|
(0, import_store63.__dispatch)(loadComponents());
|
|
4880
4818
|
}, []);
|
|
4881
4819
|
return null;
|
|
@@ -4886,11 +4824,11 @@ var import_editor_elements18 = require("@elementor/editor-elements");
|
|
|
4886
4824
|
var import_editor_notifications4 = require("@elementor/editor-notifications");
|
|
4887
4825
|
var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
|
|
4888
4826
|
var import_store64 = require("@elementor/store");
|
|
4889
|
-
var
|
|
4827
|
+
var import_i18n29 = require("@wordpress/i18n");
|
|
4890
4828
|
var COMPONENT_TYPE = "e-component";
|
|
4891
4829
|
var COMPONENT_CIRCULAR_NESTING_ALERT = {
|
|
4892
4830
|
type: "default",
|
|
4893
|
-
message: (0,
|
|
4831
|
+
message: (0, import_i18n29.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
|
|
4894
4832
|
id: "circular-component-nesting-blocked"
|
|
4895
4833
|
};
|
|
4896
4834
|
function initCircularNestingPrevention() {
|
|
@@ -5487,7 +5425,7 @@ function init() {
|
|
|
5487
5425
|
window.elementorCommon.__beforeSave = beforeSave;
|
|
5488
5426
|
(0, import_editor_elements_panel.injectTab)({
|
|
5489
5427
|
id: "components",
|
|
5490
|
-
label: (0,
|
|
5428
|
+
label: (0, import_i18n30.__)("Components", "elementor"),
|
|
5491
5429
|
component: Components,
|
|
5492
5430
|
position: 1
|
|
5493
5431
|
});
|