@elementor/editor-components 3.35.0-377 → 3.35.0-379
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 +282 -217
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +266 -201
- package/dist/index.mjs.map +1 -1
- package/package.json +22 -21
- package/src/components/component-panel-header/component-badge.tsx +25 -22
- package/src/components/component-panel-header/component-panel-header.tsx +18 -2
- package/src/components/components-tab/component-introduction.tsx +68 -0
package/dist/index.js
CHANGED
|
@@ -43,7 +43,7 @@ var import_editor_elements_panel = require("@elementor/editor-elements-panel");
|
|
|
43
43
|
var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
|
|
44
44
|
var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
|
|
45
45
|
var import_store48 = require("@elementor/store");
|
|
46
|
-
var
|
|
46
|
+
var import_i18n18 = require("@wordpress/i18n");
|
|
47
47
|
|
|
48
48
|
// src/component-instance-transformer.ts
|
|
49
49
|
var import_editor_canvas = require("@elementor/editor-canvas");
|
|
@@ -339,11 +339,12 @@ var componentOverrideTransformer = (0, import_editor_canvas3.createTransformer)(
|
|
|
339
339
|
});
|
|
340
340
|
|
|
341
341
|
// src/components/component-panel-header/component-panel-header.tsx
|
|
342
|
-
var
|
|
342
|
+
var React3 = __toESM(require("react"));
|
|
343
|
+
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
343
344
|
var import_editor_documents3 = require("@elementor/editor-documents");
|
|
344
345
|
var import_icons2 = require("@elementor/icons");
|
|
345
|
-
var
|
|
346
|
-
var
|
|
346
|
+
var import_ui3 = require("@elementor/ui");
|
|
347
|
+
var import_i18n3 = require("@wordpress/i18n");
|
|
347
348
|
|
|
348
349
|
// src/hooks/use-navigate-back.ts
|
|
349
350
|
var import_react = require("react");
|
|
@@ -376,29 +377,78 @@ function useNavigateBack() {
|
|
|
376
377
|
}, [path, documentsManager]);
|
|
377
378
|
}
|
|
378
379
|
|
|
379
|
-
// src/components/
|
|
380
|
+
// src/components/components-tab/component-introduction.tsx
|
|
380
381
|
var React = __toESM(require("react"));
|
|
381
|
-
var
|
|
382
|
-
var
|
|
382
|
+
var import_editor_controls = require("@elementor/editor-controls");
|
|
383
|
+
var import_editor_ui = require("@elementor/editor-ui");
|
|
383
384
|
var import_ui = require("@elementor/ui");
|
|
384
385
|
var import_i18n = require("@wordpress/i18n");
|
|
385
|
-
var
|
|
386
|
-
|
|
387
|
-
|
|
386
|
+
var ComponentIntroduction = ({
|
|
387
|
+
anchorRef,
|
|
388
|
+
shouldShowIntroduction,
|
|
389
|
+
onClose
|
|
390
|
+
}) => {
|
|
391
|
+
if (!anchorRef.current || !shouldShowIntroduction) {
|
|
392
|
+
return null;
|
|
393
|
+
}
|
|
388
394
|
return /* @__PURE__ */ React.createElement(
|
|
389
|
-
|
|
395
|
+
import_ui.Popover,
|
|
390
396
|
{
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
+
anchorEl: anchorRef.current,
|
|
398
|
+
open: shouldShowIntroduction,
|
|
399
|
+
anchorOrigin: {
|
|
400
|
+
vertical: "top",
|
|
401
|
+
horizontal: "right"
|
|
402
|
+
},
|
|
403
|
+
transformOrigin: {
|
|
404
|
+
vertical: "top",
|
|
405
|
+
horizontal: -30
|
|
406
|
+
},
|
|
407
|
+
onClose
|
|
397
408
|
},
|
|
398
|
-
/* @__PURE__ */ React.createElement(import_ui.
|
|
409
|
+
/* @__PURE__ */ React.createElement(import_ui.Box, { sx: { width: "296px" } }, /* @__PURE__ */ React.createElement(import_editor_ui.PopoverHeader, { title: (0, import_i18n.__)("Add your first property", "elementor"), onClose }), /* @__PURE__ */ React.createElement(
|
|
410
|
+
import_ui.Image,
|
|
411
|
+
{
|
|
412
|
+
sx: { width: "296px", height: "160px" },
|
|
413
|
+
src: "https://assets.elementor.com/packages/v1/images/components-properties-intro.png",
|
|
414
|
+
alt: ""
|
|
415
|
+
}
|
|
416
|
+
), /* @__PURE__ */ React.createElement(import_editor_controls.PopoverContent, null, /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 1, sx: { p: 2 } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)("Properties make instances flexible.", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
|
|
417
|
+
"Click next to any setting you want users to customize - like text, images, or links.",
|
|
418
|
+
"elementor"
|
|
419
|
+
)), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
|
|
420
|
+
"Your properties will appear in the Properties panel, where you can organize and manage them anytime.",
|
|
421
|
+
"elementor"
|
|
422
|
+
)), /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(import_ui.Button, { size: "medium", variant: "contained", onClick: onClose }, (0, import_i18n.__)("Got it", "elementor"))))))
|
|
399
423
|
);
|
|
400
424
|
};
|
|
401
|
-
|
|
425
|
+
|
|
426
|
+
// src/components/component-panel-header/component-badge.tsx
|
|
427
|
+
var React2 = __toESM(require("react"));
|
|
428
|
+
var import_react2 = require("react");
|
|
429
|
+
var import_icons = require("@elementor/icons");
|
|
430
|
+
var import_ui2 = require("@elementor/ui");
|
|
431
|
+
var import_i18n2 = require("@wordpress/i18n");
|
|
432
|
+
var ComponentsBadge = React2.forwardRef(
|
|
433
|
+
({ overridesCount }, ref) => {
|
|
434
|
+
const prevCount = usePrevious(overridesCount);
|
|
435
|
+
const isFirstOverride = prevCount === 0 && overridesCount === 1;
|
|
436
|
+
return /* @__PURE__ */ React2.createElement(
|
|
437
|
+
StyledBadge,
|
|
438
|
+
{
|
|
439
|
+
ref,
|
|
440
|
+
color: "primary",
|
|
441
|
+
key: overridesCount,
|
|
442
|
+
invisible: overridesCount === 0,
|
|
443
|
+
animate: isFirstOverride,
|
|
444
|
+
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
445
|
+
badgeContent: /* @__PURE__ */ React2.createElement(import_ui2.Box, { sx: { animation: !isFirstOverride ? `${slideUp} 300ms ease-out` : "none" } }, overridesCount)
|
|
446
|
+
},
|
|
447
|
+
/* @__PURE__ */ React2.createElement(import_ui2.ToggleButton, { value: "overrides", size: "tiny", "aria-label": (0, import_i18n2.__)("View overrides", "elementor") }, /* @__PURE__ */ React2.createElement(import_icons.ComponentPropListIcon, { fontSize: "tiny" }))
|
|
448
|
+
);
|
|
449
|
+
}
|
|
450
|
+
);
|
|
451
|
+
var StyledBadge = (0, import_ui2.styled)(import_ui2.Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
|
|
402
452
|
({ theme, animate }) => ({
|
|
403
453
|
"& .MuiBadge-badge": {
|
|
404
454
|
minWidth: theme.spacing(2),
|
|
@@ -417,12 +467,12 @@ function usePrevious(value) {
|
|
|
417
467
|
}, [value]);
|
|
418
468
|
return ref.current;
|
|
419
469
|
}
|
|
420
|
-
var bounceIn =
|
|
470
|
+
var bounceIn = import_ui2.keyframes`
|
|
421
471
|
0% { transform: scale(0) translate(50%, 50%); opacity: 0; }
|
|
422
472
|
70% { transform: scale(1.1) translate(50%, -50%); opacity: 1; }
|
|
423
473
|
100% { transform: scale(1) translate(50%, -50%); opacity: 1; }
|
|
424
474
|
`;
|
|
425
|
-
var slideUp =
|
|
475
|
+
var slideUp = import_ui2.keyframes`
|
|
426
476
|
from { transform: translateY(100%); opacity: 0; }
|
|
427
477
|
to { transform: translateY(0); opacity: 1; }
|
|
428
478
|
`;
|
|
@@ -439,26 +489,41 @@ function useOverridableProps(componentId) {
|
|
|
439
489
|
}
|
|
440
490
|
|
|
441
491
|
// src/components/component-panel-header/component-panel-header.tsx
|
|
492
|
+
var MESSAGE_KEY = "components-properties-introduction";
|
|
442
493
|
var ComponentPanelHeader = () => {
|
|
443
494
|
const currentComponentId = useCurrentComponentId();
|
|
444
495
|
const overridableProps = useOverridableProps(currentComponentId);
|
|
445
496
|
const onBack = useNavigateBack();
|
|
446
497
|
const componentName = getComponentName();
|
|
498
|
+
const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
|
|
499
|
+
const [shouldShowIntroduction, setShouldShowIntroduction] = React3.useState(!isMessageSuppressed);
|
|
447
500
|
const overridesCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
|
|
501
|
+
const anchorRef = React3.useRef(null);
|
|
448
502
|
if (!currentComponentId) {
|
|
449
503
|
return null;
|
|
450
504
|
}
|
|
451
|
-
|
|
452
|
-
|
|
505
|
+
const handleCloseIntroduction = () => {
|
|
506
|
+
suppressMessage();
|
|
507
|
+
setShouldShowIntroduction(false);
|
|
508
|
+
};
|
|
509
|
+
return /* @__PURE__ */ React3.createElement(import_ui3.Box, null, /* @__PURE__ */ React3.createElement(
|
|
510
|
+
import_ui3.Stack,
|
|
453
511
|
{
|
|
454
512
|
direction: "row",
|
|
455
513
|
alignItems: "center",
|
|
456
514
|
justifyContent: "space-between",
|
|
457
515
|
sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
|
|
458
516
|
},
|
|
459
|
-
/* @__PURE__ */
|
|
460
|
-
/* @__PURE__ */
|
|
461
|
-
), /* @__PURE__ */
|
|
517
|
+
/* @__PURE__ */ React3.createElement(import_ui3.Stack, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React3.createElement(import_ui3.Tooltip, { title: (0, import_i18n3.__)("Back", "elementor") }, /* @__PURE__ */ React3.createElement(import_ui3.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n3.__)("Back", "elementor") }, /* @__PURE__ */ React3.createElement(import_icons2.ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React3.createElement(import_ui3.Stack, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React3.createElement(import_icons2.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
|
|
518
|
+
/* @__PURE__ */ React3.createElement(ComponentsBadge, { overridesCount, ref: anchorRef })
|
|
519
|
+
), /* @__PURE__ */ React3.createElement(import_ui3.Divider, null), /* @__PURE__ */ React3.createElement(
|
|
520
|
+
ComponentIntroduction,
|
|
521
|
+
{
|
|
522
|
+
anchorRef,
|
|
523
|
+
shouldShowIntroduction,
|
|
524
|
+
onClose: handleCloseIntroduction
|
|
525
|
+
}
|
|
526
|
+
));
|
|
462
527
|
};
|
|
463
528
|
function getComponentName() {
|
|
464
529
|
const documentsManager = (0, import_editor_documents3.getV1DocumentsManager)();
|
|
@@ -467,17 +532,17 @@ function getComponentName() {
|
|
|
467
532
|
}
|
|
468
533
|
|
|
469
534
|
// src/components/components-tab/components.tsx
|
|
470
|
-
var
|
|
471
|
-
var
|
|
535
|
+
var React9 = __toESM(require("react"));
|
|
536
|
+
var import_editor_ui3 = require("@elementor/editor-ui");
|
|
472
537
|
|
|
473
538
|
// src/components/components-tab/component-search.tsx
|
|
474
|
-
var
|
|
539
|
+
var React5 = __toESM(require("react"));
|
|
475
540
|
var import_icons3 = require("@elementor/icons");
|
|
476
|
-
var
|
|
477
|
-
var
|
|
541
|
+
var import_ui4 = require("@elementor/ui");
|
|
542
|
+
var import_i18n4 = require("@wordpress/i18n");
|
|
478
543
|
|
|
479
544
|
// src/components/components-tab/search-provider.tsx
|
|
480
|
-
var
|
|
545
|
+
var React4 = __toESM(require("react"));
|
|
481
546
|
var import_react3 = require("react");
|
|
482
547
|
var import_utils = require("@elementor/utils");
|
|
483
548
|
var SearchContext = (0, import_react3.createContext)(void 0);
|
|
@@ -489,7 +554,7 @@ var SearchProvider = ({
|
|
|
489
554
|
const clearSearch = () => {
|
|
490
555
|
handleChange("");
|
|
491
556
|
};
|
|
492
|
-
return /* @__PURE__ */
|
|
557
|
+
return /* @__PURE__ */ React4.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
|
|
493
558
|
};
|
|
494
559
|
var useSearch = () => {
|
|
495
560
|
const context = (0, import_react3.useContext)(SearchContext);
|
|
@@ -502,27 +567,27 @@ var useSearch = () => {
|
|
|
502
567
|
// src/components/components-tab/component-search.tsx
|
|
503
568
|
var ComponentSearch = () => {
|
|
504
569
|
const { inputValue, handleChange } = useSearch();
|
|
505
|
-
return /* @__PURE__ */
|
|
506
|
-
|
|
570
|
+
return /* @__PURE__ */ React5.createElement(import_ui4.Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React5.createElement(import_ui4.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React5.createElement(
|
|
571
|
+
import_ui4.TextField,
|
|
507
572
|
{
|
|
508
573
|
role: "search",
|
|
509
574
|
fullWidth: true,
|
|
510
575
|
size: "tiny",
|
|
511
576
|
value: inputValue,
|
|
512
|
-
placeholder: (0,
|
|
577
|
+
placeholder: (0, import_i18n4.__)("Search", "elementor"),
|
|
513
578
|
onChange: (e) => handleChange(e.target.value),
|
|
514
579
|
InputProps: {
|
|
515
|
-
startAdornment: /* @__PURE__ */
|
|
580
|
+
startAdornment: /* @__PURE__ */ React5.createElement(import_ui4.InputAdornment, { position: "start" }, /* @__PURE__ */ React5.createElement(import_icons3.SearchIcon, { fontSize: "tiny" }))
|
|
516
581
|
}
|
|
517
582
|
}
|
|
518
583
|
)));
|
|
519
584
|
};
|
|
520
585
|
|
|
521
586
|
// src/components/components-tab/components-list.tsx
|
|
522
|
-
var
|
|
587
|
+
var React8 = __toESM(require("react"));
|
|
523
588
|
var import_icons5 = require("@elementor/icons");
|
|
524
|
-
var
|
|
525
|
-
var
|
|
589
|
+
var import_ui7 = require("@elementor/ui");
|
|
590
|
+
var import_i18n7 = require("@wordpress/i18n");
|
|
526
591
|
|
|
527
592
|
// src/hooks/use-components.ts
|
|
528
593
|
var import_store10 = require("@elementor/store");
|
|
@@ -533,13 +598,13 @@ var useComponents = () => {
|
|
|
533
598
|
};
|
|
534
599
|
|
|
535
600
|
// src/components/components-tab/components-item.tsx
|
|
536
|
-
var
|
|
601
|
+
var React6 = __toESM(require("react"));
|
|
537
602
|
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
538
603
|
var import_editor_elements3 = require("@elementor/editor-elements");
|
|
539
|
-
var
|
|
604
|
+
var import_editor_ui2 = require("@elementor/editor-ui");
|
|
540
605
|
var import_icons4 = require("@elementor/icons");
|
|
541
|
-
var
|
|
542
|
-
var
|
|
606
|
+
var import_ui5 = require("@elementor/ui");
|
|
607
|
+
var import_i18n6 = require("@wordpress/i18n");
|
|
543
608
|
|
|
544
609
|
// src/store/actions/archive-component.ts
|
|
545
610
|
var import_editor_documents4 = require("@elementor/editor-documents");
|
|
@@ -560,7 +625,7 @@ var import_editor_documents6 = require("@elementor/editor-documents");
|
|
|
560
625
|
// src/create-component-type.ts
|
|
561
626
|
var import_editor_canvas4 = require("@elementor/editor-canvas");
|
|
562
627
|
var import_editor_documents5 = require("@elementor/editor-documents");
|
|
563
|
-
var
|
|
628
|
+
var import_i18n5 = require("@wordpress/i18n");
|
|
564
629
|
|
|
565
630
|
// src/utils/tracking.ts
|
|
566
631
|
var import_mixpanel = require("@elementor/mixpanel");
|
|
@@ -680,7 +745,7 @@ function createComponentView(options) {
|
|
|
680
745
|
action: {
|
|
681
746
|
name: "edit component",
|
|
682
747
|
icon: "eicon-edit",
|
|
683
|
-
title: () => (0,
|
|
748
|
+
title: () => (0, import_i18n5.__)("Edit Component", "elementor"),
|
|
684
749
|
isEnabled: () => true,
|
|
685
750
|
callback: (_, eventData) => this.editComponent(eventData)
|
|
686
751
|
}
|
|
@@ -919,7 +984,7 @@ var createComponentModel = (component) => {
|
|
|
919
984
|
// src/components/components-tab/components-item.tsx
|
|
920
985
|
var ComponentItem = ({ component }) => {
|
|
921
986
|
const componentModel = createComponentModel(component);
|
|
922
|
-
const popupState = (0,
|
|
987
|
+
const popupState = (0, import_ui5.usePopupState)({
|
|
923
988
|
variant: "popover",
|
|
924
989
|
disableAutoFocus: true
|
|
925
990
|
});
|
|
@@ -937,8 +1002,8 @@ var ComponentItem = ({ component }) => {
|
|
|
937
1002
|
}
|
|
938
1003
|
archiveComponent(component.id);
|
|
939
1004
|
};
|
|
940
|
-
return /* @__PURE__ */
|
|
941
|
-
|
|
1005
|
+
return /* @__PURE__ */ React6.createElement(import_ui5.Stack, null, /* @__PURE__ */ React6.createElement(
|
|
1006
|
+
import_ui5.ListItemButton,
|
|
942
1007
|
{
|
|
943
1008
|
draggable: true,
|
|
944
1009
|
onDragStart: () => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel),
|
|
@@ -955,8 +1020,8 @@ var ComponentItem = ({ component }) => {
|
|
|
955
1020
|
gap: 1
|
|
956
1021
|
}
|
|
957
1022
|
},
|
|
958
|
-
/* @__PURE__ */
|
|
959
|
-
|
|
1023
|
+
/* @__PURE__ */ React6.createElement(
|
|
1024
|
+
import_ui5.Box,
|
|
960
1025
|
{
|
|
961
1026
|
onClick: handleClick,
|
|
962
1027
|
sx: {
|
|
@@ -967,22 +1032,22 @@ var ComponentItem = ({ component }) => {
|
|
|
967
1032
|
flexGrow: 1
|
|
968
1033
|
}
|
|
969
1034
|
},
|
|
970
|
-
/* @__PURE__ */
|
|
971
|
-
/* @__PURE__ */
|
|
972
|
-
|
|
1035
|
+
/* @__PURE__ */ React6.createElement(import_ui5.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React6.createElement(import_icons4.ComponentsIcon, { fontSize: "tiny" })),
|
|
1036
|
+
/* @__PURE__ */ React6.createElement(import_ui5.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, /* @__PURE__ */ React6.createElement(
|
|
1037
|
+
import_editor_ui2.EllipsisWithTooltip,
|
|
973
1038
|
{
|
|
974
1039
|
title: component.name,
|
|
975
|
-
as:
|
|
1040
|
+
as: import_ui5.Typography,
|
|
976
1041
|
variant: "caption",
|
|
977
1042
|
color: "text.primary"
|
|
978
1043
|
}
|
|
979
1044
|
))
|
|
980
1045
|
),
|
|
981
|
-
/* @__PURE__ */
|
|
982
|
-
), /* @__PURE__ */
|
|
983
|
-
|
|
1046
|
+
/* @__PURE__ */ React6.createElement(import_ui5.IconButton, { size: "tiny", ...(0, import_ui5.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React6.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" }))
|
|
1047
|
+
), /* @__PURE__ */ React6.createElement(
|
|
1048
|
+
import_ui5.Menu,
|
|
984
1049
|
{
|
|
985
|
-
...(0,
|
|
1050
|
+
...(0, import_ui5.bindMenu)(popupState),
|
|
986
1051
|
anchorOrigin: {
|
|
987
1052
|
vertical: "bottom",
|
|
988
1053
|
horizontal: "right"
|
|
@@ -992,7 +1057,7 @@ var ComponentItem = ({ component }) => {
|
|
|
992
1057
|
horizontal: "right"
|
|
993
1058
|
}
|
|
994
1059
|
},
|
|
995
|
-
/* @__PURE__ */
|
|
1060
|
+
/* @__PURE__ */ React6.createElement(import_editor_ui2.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, (0, import_i18n6.__)("Archive", "elementor"))
|
|
996
1061
|
));
|
|
997
1062
|
};
|
|
998
1063
|
var addComponentToPage = (model) => {
|
|
@@ -1009,13 +1074,13 @@ var addComponentToPage = (model) => {
|
|
|
1009
1074
|
};
|
|
1010
1075
|
|
|
1011
1076
|
// src/components/components-tab/loading-components.tsx
|
|
1012
|
-
var
|
|
1013
|
-
var
|
|
1077
|
+
var React7 = __toESM(require("react"));
|
|
1078
|
+
var import_ui6 = require("@elementor/ui");
|
|
1014
1079
|
var ROWS_COUNT = 6;
|
|
1015
1080
|
var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
|
|
1016
1081
|
var LoadingComponents = () => {
|
|
1017
|
-
return /* @__PURE__ */
|
|
1018
|
-
|
|
1082
|
+
return /* @__PURE__ */ React7.createElement(
|
|
1083
|
+
import_ui6.Stack,
|
|
1019
1084
|
{
|
|
1020
1085
|
"aria-label": "Loading components",
|
|
1021
1086
|
gap: 1,
|
|
@@ -1036,14 +1101,14 @@ var LoadingComponents = () => {
|
|
|
1036
1101
|
}
|
|
1037
1102
|
}
|
|
1038
1103
|
},
|
|
1039
|
-
rows.map((row) => /* @__PURE__ */
|
|
1040
|
-
|
|
1104
|
+
rows.map((row) => /* @__PURE__ */ React7.createElement(
|
|
1105
|
+
import_ui6.ListItemButton,
|
|
1041
1106
|
{
|
|
1042
1107
|
key: row,
|
|
1043
1108
|
sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
|
|
1044
1109
|
shape: "rounded"
|
|
1045
1110
|
},
|
|
1046
|
-
/* @__PURE__ */
|
|
1111
|
+
/* @__PURE__ */ React7.createElement(import_ui6.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React7.createElement(import_ui6.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React7.createElement(import_ui6.Skeleton, { variant: "text", width: "100%", height: "36px" }))
|
|
1047
1112
|
))
|
|
1048
1113
|
);
|
|
1049
1114
|
};
|
|
@@ -1052,20 +1117,20 @@ var LoadingComponents = () => {
|
|
|
1052
1117
|
function ComponentsList() {
|
|
1053
1118
|
const { components, isLoading, searchValue } = useFilteredComponents();
|
|
1054
1119
|
if (isLoading) {
|
|
1055
|
-
return /* @__PURE__ */
|
|
1120
|
+
return /* @__PURE__ */ React8.createElement(LoadingComponents, null);
|
|
1056
1121
|
}
|
|
1057
1122
|
const isEmpty = !components || components.length === 0;
|
|
1058
1123
|
if (isEmpty) {
|
|
1059
1124
|
if (searchValue.length > 0) {
|
|
1060
|
-
return /* @__PURE__ */
|
|
1125
|
+
return /* @__PURE__ */ React8.createElement(EmptySearchResult, null);
|
|
1061
1126
|
}
|
|
1062
|
-
return /* @__PURE__ */
|
|
1127
|
+
return /* @__PURE__ */ React8.createElement(EmptyState, null);
|
|
1063
1128
|
}
|
|
1064
|
-
return /* @__PURE__ */
|
|
1129
|
+
return /* @__PURE__ */ React8.createElement(import_ui7.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React8.createElement(ComponentItem, { key: component.uid, component })));
|
|
1065
1130
|
}
|
|
1066
1131
|
var EmptyState = () => {
|
|
1067
|
-
return /* @__PURE__ */
|
|
1068
|
-
|
|
1132
|
+
return /* @__PURE__ */ React8.createElement(
|
|
1133
|
+
import_ui7.Stack,
|
|
1069
1134
|
{
|
|
1070
1135
|
alignItems: "center",
|
|
1071
1136
|
justifyContent: "center",
|
|
@@ -1074,32 +1139,32 @@ var EmptyState = () => {
|
|
|
1074
1139
|
gap: 1.75,
|
|
1075
1140
|
overflow: "hidden"
|
|
1076
1141
|
},
|
|
1077
|
-
/* @__PURE__ */
|
|
1078
|
-
/* @__PURE__ */
|
|
1079
|
-
/* @__PURE__ */
|
|
1142
|
+
/* @__PURE__ */ React8.createElement(import_ui7.Icon, { fontSize: "large" }, /* @__PURE__ */ React8.createElement(import_icons5.EyeIcon, { fontSize: "large" })),
|
|
1143
|
+
/* @__PURE__ */ React8.createElement(import_ui7.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n7.__)("Text that explains that there are no Components yet.", "elementor")),
|
|
1144
|
+
/* @__PURE__ */ React8.createElement(import_ui7.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n7.__)(
|
|
1080
1145
|
"Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
|
|
1081
1146
|
"elementor"
|
|
1082
1147
|
)),
|
|
1083
|
-
/* @__PURE__ */
|
|
1084
|
-
/* @__PURE__ */
|
|
1085
|
-
/* @__PURE__ */
|
|
1086
|
-
|
|
1148
|
+
/* @__PURE__ */ React8.createElement(import_ui7.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
|
|
1149
|
+
/* @__PURE__ */ React8.createElement(import_ui7.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n7.__)("To create a component, first design it, then choose one of three options:", "elementor")),
|
|
1150
|
+
/* @__PURE__ */ React8.createElement(
|
|
1151
|
+
import_ui7.Typography,
|
|
1087
1152
|
{
|
|
1088
1153
|
align: "left",
|
|
1089
1154
|
variant: "caption",
|
|
1090
1155
|
color: "text.secondary",
|
|
1091
1156
|
sx: { display: "flex", flexDirection: "column" }
|
|
1092
1157
|
},
|
|
1093
|
-
/* @__PURE__ */
|
|
1094
|
-
/* @__PURE__ */
|
|
1095
|
-
/* @__PURE__ */
|
|
1158
|
+
/* @__PURE__ */ React8.createElement("span", null, (0, import_i18n7.__)("1. Right-click and select Create Component", "elementor")),
|
|
1159
|
+
/* @__PURE__ */ React8.createElement("span", null, (0, import_i18n7.__)("2. Use the component icon in the Structure panel", "elementor")),
|
|
1160
|
+
/* @__PURE__ */ React8.createElement("span", null, (0, import_i18n7.__)("3. Use the component icon in the Edit panel header", "elementor"))
|
|
1096
1161
|
)
|
|
1097
1162
|
);
|
|
1098
1163
|
};
|
|
1099
1164
|
var EmptySearchResult = () => {
|
|
1100
1165
|
const { searchValue, clearSearch } = useSearch();
|
|
1101
|
-
return /* @__PURE__ */
|
|
1102
|
-
|
|
1166
|
+
return /* @__PURE__ */ React8.createElement(
|
|
1167
|
+
import_ui7.Stack,
|
|
1103
1168
|
{
|
|
1104
1169
|
color: "text.secondary",
|
|
1105
1170
|
pt: 5,
|
|
@@ -1108,17 +1173,17 @@ var EmptySearchResult = () => {
|
|
|
1108
1173
|
overflow: "hidden",
|
|
1109
1174
|
justifySelf: "center"
|
|
1110
1175
|
},
|
|
1111
|
-
/* @__PURE__ */
|
|
1112
|
-
/* @__PURE__ */
|
|
1113
|
-
|
|
1176
|
+
/* @__PURE__ */ React8.createElement(import_icons5.ComponentsIcon, null),
|
|
1177
|
+
/* @__PURE__ */ React8.createElement(
|
|
1178
|
+
import_ui7.Box,
|
|
1114
1179
|
{
|
|
1115
1180
|
sx: {
|
|
1116
1181
|
width: "100%"
|
|
1117
1182
|
}
|
|
1118
1183
|
},
|
|
1119
|
-
/* @__PURE__ */
|
|
1120
|
-
searchValue && /* @__PURE__ */
|
|
1121
|
-
|
|
1184
|
+
/* @__PURE__ */ React8.createElement(import_ui7.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n7.__)("Sorry, nothing matched", "elementor")),
|
|
1185
|
+
searchValue && /* @__PURE__ */ React8.createElement(
|
|
1186
|
+
import_ui7.Typography,
|
|
1122
1187
|
{
|
|
1123
1188
|
variant: "subtitle2",
|
|
1124
1189
|
color: "inherit",
|
|
@@ -1128,8 +1193,8 @@ var EmptySearchResult = () => {
|
|
|
1128
1193
|
justifyContent: "center"
|
|
1129
1194
|
}
|
|
1130
1195
|
},
|
|
1131
|
-
/* @__PURE__ */
|
|
1132
|
-
/* @__PURE__ */
|
|
1196
|
+
/* @__PURE__ */ React8.createElement("span", null, "\u201C"),
|
|
1197
|
+
/* @__PURE__ */ React8.createElement(
|
|
1133
1198
|
"span",
|
|
1134
1199
|
{
|
|
1135
1200
|
style: {
|
|
@@ -1140,11 +1205,11 @@ var EmptySearchResult = () => {
|
|
|
1140
1205
|
},
|
|
1141
1206
|
searchValue
|
|
1142
1207
|
),
|
|
1143
|
-
/* @__PURE__ */
|
|
1208
|
+
/* @__PURE__ */ React8.createElement("span", null, "\u201D.")
|
|
1144
1209
|
)
|
|
1145
1210
|
),
|
|
1146
|
-
/* @__PURE__ */
|
|
1147
|
-
/* @__PURE__ */
|
|
1211
|
+
/* @__PURE__ */ React8.createElement(import_ui7.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n7.__)("Try something else.", "elementor")),
|
|
1212
|
+
/* @__PURE__ */ React8.createElement(import_ui7.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React8.createElement(import_ui7.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n7.__)("Clear & try again", "elementor")))
|
|
1148
1213
|
);
|
|
1149
1214
|
};
|
|
1150
1215
|
var useFilteredComponents = () => {
|
|
@@ -1161,20 +1226,20 @@ var useFilteredComponents = () => {
|
|
|
1161
1226
|
|
|
1162
1227
|
// src/components/components-tab/components.tsx
|
|
1163
1228
|
var Components = () => {
|
|
1164
|
-
return /* @__PURE__ */
|
|
1229
|
+
return /* @__PURE__ */ React9.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React9.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React9.createElement(ComponentSearch, null), /* @__PURE__ */ React9.createElement(ComponentsList, null)));
|
|
1165
1230
|
};
|
|
1166
1231
|
|
|
1167
1232
|
// src/components/consts.ts
|
|
1168
1233
|
var COMPONENT_DOCUMENT_TYPE = "elementor_component";
|
|
1169
1234
|
|
|
1170
1235
|
// src/components/create-component-form/create-component-form.tsx
|
|
1171
|
-
var
|
|
1236
|
+
var React10 = __toESM(require("react"));
|
|
1172
1237
|
var import_react5 = require("react");
|
|
1173
1238
|
var import_editor_elements4 = require("@elementor/editor-elements");
|
|
1174
|
-
var
|
|
1239
|
+
var import_editor_ui4 = require("@elementor/editor-ui");
|
|
1175
1240
|
var import_icons6 = require("@elementor/icons");
|
|
1176
|
-
var
|
|
1177
|
-
var
|
|
1241
|
+
var import_ui8 = require("@elementor/ui");
|
|
1242
|
+
var import_i18n9 = require("@wordpress/i18n");
|
|
1178
1243
|
|
|
1179
1244
|
// src/store/actions/create-unpublished-component.ts
|
|
1180
1245
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
@@ -1252,16 +1317,16 @@ var validateForm = (values, schema) => {
|
|
|
1252
1317
|
|
|
1253
1318
|
// src/components/create-component-form/utils/component-form-schema.ts
|
|
1254
1319
|
var import_schema = require("@elementor/schema");
|
|
1255
|
-
var
|
|
1320
|
+
var import_i18n8 = require("@wordpress/i18n");
|
|
1256
1321
|
var MIN_NAME_LENGTH = 2;
|
|
1257
1322
|
var MAX_NAME_LENGTH = 50;
|
|
1258
1323
|
var createBaseComponentSchema = (existingNames) => {
|
|
1259
1324
|
return import_schema.z.object({
|
|
1260
1325
|
componentName: import_schema.z.string().trim().max(
|
|
1261
1326
|
MAX_NAME_LENGTH,
|
|
1262
|
-
(0,
|
|
1327
|
+
(0, import_i18n8.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
|
|
1263
1328
|
).refine((value) => !existingNames.includes(value), {
|
|
1264
|
-
message: (0,
|
|
1329
|
+
message: (0, import_i18n8.__)("Component name already exists", "elementor")
|
|
1265
1330
|
})
|
|
1266
1331
|
});
|
|
1267
1332
|
};
|
|
@@ -1269,9 +1334,9 @@ var createSubmitComponentSchema = (existingNames) => {
|
|
|
1269
1334
|
const baseSchema = createBaseComponentSchema(existingNames);
|
|
1270
1335
|
return baseSchema.extend({
|
|
1271
1336
|
componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
|
|
1272
|
-
message: (0,
|
|
1337
|
+
message: (0, import_i18n8.__)("Component name is required.", "elementor")
|
|
1273
1338
|
}).refine((value) => value.length >= MIN_NAME_LENGTH, {
|
|
1274
|
-
message: (0,
|
|
1339
|
+
message: (0, import_i18n8.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
|
|
1275
1340
|
})
|
|
1276
1341
|
});
|
|
1277
1342
|
};
|
|
@@ -1336,12 +1401,12 @@ function CreateComponentForm() {
|
|
|
1336
1401
|
setResultNotification({
|
|
1337
1402
|
show: true,
|
|
1338
1403
|
// Translators: %1$s: Component name, %2$s: Component UID
|
|
1339
|
-
message: (0,
|
|
1404
|
+
message: (0, import_i18n9.__)("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
|
|
1340
1405
|
type: "success"
|
|
1341
1406
|
});
|
|
1342
1407
|
resetAndClosePopup();
|
|
1343
1408
|
} catch {
|
|
1344
|
-
const errorMessage = (0,
|
|
1409
|
+
const errorMessage = (0, import_i18n9.__)("Failed to save component. Please try again.", "elementor");
|
|
1345
1410
|
setResultNotification({
|
|
1346
1411
|
show: true,
|
|
1347
1412
|
message: errorMessage,
|
|
@@ -1360,15 +1425,15 @@ function CreateComponentForm() {
|
|
|
1360
1425
|
...eventData.current
|
|
1361
1426
|
});
|
|
1362
1427
|
};
|
|
1363
|
-
return /* @__PURE__ */
|
|
1364
|
-
|
|
1428
|
+
return /* @__PURE__ */ React10.createElement(import_editor_ui4.ThemeProvider, null, /* @__PURE__ */ React10.createElement(
|
|
1429
|
+
import_ui8.Popover,
|
|
1365
1430
|
{
|
|
1366
1431
|
open: element !== null,
|
|
1367
1432
|
onClose: cancelSave,
|
|
1368
1433
|
anchorReference: "anchorPosition",
|
|
1369
1434
|
anchorPosition
|
|
1370
1435
|
},
|
|
1371
|
-
element !== null && /* @__PURE__ */
|
|
1436
|
+
element !== null && /* @__PURE__ */ React10.createElement(
|
|
1372
1437
|
Form,
|
|
1373
1438
|
{
|
|
1374
1439
|
initialValues: { componentName: element.elementLabel },
|
|
@@ -1376,8 +1441,8 @@ function CreateComponentForm() {
|
|
|
1376
1441
|
closePopup: cancelSave
|
|
1377
1442
|
}
|
|
1378
1443
|
)
|
|
1379
|
-
), /* @__PURE__ */
|
|
1380
|
-
|
|
1444
|
+
), /* @__PURE__ */ React10.createElement(import_ui8.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React10.createElement(
|
|
1445
|
+
import_ui8.Alert,
|
|
1381
1446
|
{
|
|
1382
1447
|
onClose: () => setResultNotification(null),
|
|
1383
1448
|
severity: resultNotification?.type,
|
|
@@ -1412,14 +1477,14 @@ var Form = ({
|
|
|
1412
1477
|
}
|
|
1413
1478
|
};
|
|
1414
1479
|
const texts = {
|
|
1415
|
-
heading: (0,
|
|
1416
|
-
name: (0,
|
|
1417
|
-
cancel: (0,
|
|
1418
|
-
create: (0,
|
|
1480
|
+
heading: (0, import_i18n9.__)("Save as a component", "elementor"),
|
|
1481
|
+
name: (0, import_i18n9.__)("Name", "elementor"),
|
|
1482
|
+
cancel: (0, import_i18n9.__)("Cancel", "elementor"),
|
|
1483
|
+
create: (0, import_i18n9.__)("Create", "elementor")
|
|
1419
1484
|
};
|
|
1420
1485
|
const nameInputId = "component-name";
|
|
1421
|
-
return /* @__PURE__ */
|
|
1422
|
-
|
|
1486
|
+
return /* @__PURE__ */ React10.createElement(import_editor_ui4.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React10.createElement(import_ui8.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React10.createElement(
|
|
1487
|
+
import_ui8.Stack,
|
|
1423
1488
|
{
|
|
1424
1489
|
direction: "row",
|
|
1425
1490
|
alignItems: "center",
|
|
@@ -1427,10 +1492,10 @@ var Form = ({
|
|
|
1427
1492
|
px: 1.5,
|
|
1428
1493
|
sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
|
|
1429
1494
|
},
|
|
1430
|
-
/* @__PURE__ */
|
|
1431
|
-
/* @__PURE__ */
|
|
1432
|
-
), /* @__PURE__ */
|
|
1433
|
-
|
|
1495
|
+
/* @__PURE__ */ React10.createElement(import_icons6.StarIcon, { fontSize: FONT_SIZE }),
|
|
1496
|
+
/* @__PURE__ */ React10.createElement(import_ui8.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
|
|
1497
|
+
), /* @__PURE__ */ React10.createElement(import_ui8.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React10.createElement(import_ui8.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(import_ui8.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React10.createElement(import_ui8.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React10.createElement(
|
|
1498
|
+
import_ui8.TextField,
|
|
1434
1499
|
{
|
|
1435
1500
|
id: nameInputId,
|
|
1436
1501
|
size: FONT_SIZE,
|
|
@@ -1441,11 +1506,11 @@ var Form = ({
|
|
|
1441
1506
|
error: Boolean(errors.componentName),
|
|
1442
1507
|
helperText: errors.componentName
|
|
1443
1508
|
}
|
|
1444
|
-
))), /* @__PURE__ */
|
|
1509
|
+
))), /* @__PURE__ */ React10.createElement(import_ui8.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React10.createElement(import_ui8.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React10.createElement(import_ui8.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
|
|
1445
1510
|
};
|
|
1446
1511
|
|
|
1447
1512
|
// src/components/edit-component/edit-component.tsx
|
|
1448
|
-
var
|
|
1513
|
+
var React12 = __toESM(require("react"));
|
|
1449
1514
|
var import_react8 = require("react");
|
|
1450
1515
|
var import_editor_documents8 = require("@elementor/editor-documents");
|
|
1451
1516
|
var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
|
|
@@ -1468,10 +1533,10 @@ function updateCurrentComponent({
|
|
|
1468
1533
|
}
|
|
1469
1534
|
|
|
1470
1535
|
// src/components/edit-component/component-modal.tsx
|
|
1471
|
-
var
|
|
1536
|
+
var React11 = __toESM(require("react"));
|
|
1472
1537
|
var import_react7 = require("react");
|
|
1473
1538
|
var import_react_dom = require("react-dom");
|
|
1474
|
-
var
|
|
1539
|
+
var import_i18n10 = require("@wordpress/i18n");
|
|
1475
1540
|
|
|
1476
1541
|
// src/hooks/use-canvas-document.ts
|
|
1477
1542
|
var import_editor_canvas6 = require("@elementor/editor-canvas");
|
|
@@ -1561,7 +1626,7 @@ function ComponentModal({ element, onClose }) {
|
|
|
1561
1626
|
return null;
|
|
1562
1627
|
}
|
|
1563
1628
|
return (0, import_react_dom.createPortal)(
|
|
1564
|
-
/* @__PURE__ */
|
|
1629
|
+
/* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(BlockEditPage, null), /* @__PURE__ */ React11.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
|
|
1565
1630
|
canvasDocument.body
|
|
1566
1631
|
);
|
|
1567
1632
|
}
|
|
@@ -1585,7 +1650,7 @@ function Backdrop({ canvas, element, onClose }) {
|
|
|
1585
1650
|
onClose();
|
|
1586
1651
|
}
|
|
1587
1652
|
};
|
|
1588
|
-
return /* @__PURE__ */
|
|
1653
|
+
return /* @__PURE__ */ React11.createElement(
|
|
1589
1654
|
"div",
|
|
1590
1655
|
{
|
|
1591
1656
|
style: backdropStyle,
|
|
@@ -1593,7 +1658,7 @@ function Backdrop({ canvas, element, onClose }) {
|
|
|
1593
1658
|
onKeyDown: handleKeyDown,
|
|
1594
1659
|
role: "button",
|
|
1595
1660
|
tabIndex: 0,
|
|
1596
|
-
"aria-label": (0,
|
|
1661
|
+
"aria-label": (0, import_i18n10.__)("Exit component editing mode", "elementor")
|
|
1597
1662
|
}
|
|
1598
1663
|
);
|
|
1599
1664
|
}
|
|
@@ -1643,7 +1708,7 @@ function BlockEditPage() {
|
|
|
1643
1708
|
}
|
|
1644
1709
|
}
|
|
1645
1710
|
`;
|
|
1646
|
-
return /* @__PURE__ */
|
|
1711
|
+
return /* @__PURE__ */ React11.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
|
|
1647
1712
|
}
|
|
1648
1713
|
|
|
1649
1714
|
// src/components/edit-component/edit-component.tsx
|
|
@@ -1656,7 +1721,7 @@ function EditComponent() {
|
|
|
1656
1721
|
if (!elementDom) {
|
|
1657
1722
|
return null;
|
|
1658
1723
|
}
|
|
1659
|
-
return /* @__PURE__ */
|
|
1724
|
+
return /* @__PURE__ */ React12.createElement(ComponentModal, { element: elementDom, onClose });
|
|
1660
1725
|
}
|
|
1661
1726
|
function useHandleDocumentSwitches() {
|
|
1662
1727
|
const documentsManager = (0, import_editor_documents8.getV1DocumentsManager)();
|
|
@@ -1709,33 +1774,33 @@ function getComponentDOMElement(id) {
|
|
|
1709
1774
|
}
|
|
1710
1775
|
|
|
1711
1776
|
// src/components/in-edit-mode.tsx
|
|
1712
|
-
var
|
|
1713
|
-
var
|
|
1777
|
+
var React13 = __toESM(require("react"));
|
|
1778
|
+
var import_editor_ui5 = require("@elementor/editor-ui");
|
|
1714
1779
|
var import_icons7 = require("@elementor/icons");
|
|
1715
|
-
var
|
|
1716
|
-
var
|
|
1780
|
+
var import_ui9 = require("@elementor/ui");
|
|
1781
|
+
var import_i18n11 = require("@wordpress/i18n");
|
|
1717
1782
|
var openEditModeDialog = (lockedBy) => {
|
|
1718
|
-
(0,
|
|
1719
|
-
component: /* @__PURE__ */
|
|
1783
|
+
(0, import_editor_ui5.openDialog)({
|
|
1784
|
+
component: /* @__PURE__ */ React13.createElement(EditModeDialog, { lockedBy })
|
|
1720
1785
|
});
|
|
1721
1786
|
};
|
|
1722
1787
|
var EditModeDialog = ({ lockedBy }) => {
|
|
1723
|
-
const content = (0,
|
|
1724
|
-
return /* @__PURE__ */
|
|
1788
|
+
const content = (0, import_i18n11.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
|
|
1789
|
+
return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(import_ui9.DialogHeader, { logo: false }, /* @__PURE__ */ React13.createElement(import_ui9.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React13.createElement(import_ui9.Icon, { color: "secondary" }, /* @__PURE__ */ React13.createElement(import_icons7.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React13.createElement(import_ui9.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React13.createElement(import_ui9.DialogContent, null, /* @__PURE__ */ React13.createElement(import_ui9.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React13.createElement(import_ui9.Typography, { variant: "body2" }, (0, import_i18n11.__)(
|
|
1725
1790
|
"You can wait for them to finish or reach out to coordinate your changes together.",
|
|
1726
1791
|
"elementor"
|
|
1727
|
-
)), /* @__PURE__ */
|
|
1792
|
+
)), /* @__PURE__ */ React13.createElement(import_ui9.DialogActions, null, /* @__PURE__ */ React13.createElement(import_ui9.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui5.closeDialog }, (0, import_i18n11.__)("Close", "elementor"))))));
|
|
1728
1793
|
};
|
|
1729
1794
|
|
|
1730
1795
|
// src/components/instance-editing-panel/instance-editing-panel.tsx
|
|
1731
|
-
var
|
|
1796
|
+
var React16 = __toESM(require("react"));
|
|
1732
1797
|
var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
|
|
1733
1798
|
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
1734
1799
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
1735
1800
|
var import_icons9 = require("@elementor/icons");
|
|
1736
1801
|
var import_store26 = require("@elementor/store");
|
|
1737
|
-
var
|
|
1738
|
-
var
|
|
1802
|
+
var import_ui12 = require("@elementor/ui");
|
|
1803
|
+
var import_i18n13 = require("@wordpress/i18n");
|
|
1739
1804
|
|
|
1740
1805
|
// src/prop-types/component-instance-prop-type.ts
|
|
1741
1806
|
var import_editor_props3 = require("@elementor/editor-props");
|
|
@@ -1776,13 +1841,13 @@ var componentInstancePropTypeUtil = (0, import_editor_props3.createPropUtils)(
|
|
|
1776
1841
|
);
|
|
1777
1842
|
|
|
1778
1843
|
// src/components/instance-editing-panel/empty-state.tsx
|
|
1779
|
-
var
|
|
1844
|
+
var React14 = __toESM(require("react"));
|
|
1780
1845
|
var import_icons8 = require("@elementor/icons");
|
|
1781
|
-
var
|
|
1782
|
-
var
|
|
1846
|
+
var import_ui10 = require("@elementor/ui");
|
|
1847
|
+
var import_i18n12 = require("@wordpress/i18n");
|
|
1783
1848
|
var EmptyState2 = ({ onEditComponent }) => {
|
|
1784
|
-
return /* @__PURE__ */
|
|
1785
|
-
|
|
1849
|
+
return /* @__PURE__ */ React14.createElement(
|
|
1850
|
+
import_ui10.Stack,
|
|
1786
1851
|
{
|
|
1787
1852
|
alignItems: "center",
|
|
1788
1853
|
justifyContent: "start",
|
|
@@ -1791,22 +1856,22 @@ var EmptyState2 = ({ onEditComponent }) => {
|
|
|
1791
1856
|
sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
|
|
1792
1857
|
gap: 1.5
|
|
1793
1858
|
},
|
|
1794
|
-
/* @__PURE__ */
|
|
1795
|
-
/* @__PURE__ */
|
|
1796
|
-
/* @__PURE__ */
|
|
1859
|
+
/* @__PURE__ */ React14.createElement(import_icons8.ComponentPropListIcon, { fontSize: "large" }),
|
|
1860
|
+
/* @__PURE__ */ React14.createElement(import_ui10.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n12.__)("No properties yet", "elementor")),
|
|
1861
|
+
/* @__PURE__ */ React14.createElement(import_ui10.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n12.__)(
|
|
1797
1862
|
"Edit the component to add properties, manage them or update the design across all instances.",
|
|
1798
1863
|
"elementor"
|
|
1799
1864
|
)),
|
|
1800
|
-
/* @__PURE__ */
|
|
1865
|
+
/* @__PURE__ */ React14.createElement(import_ui10.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React14.createElement(import_icons8.PencilIcon, { fontSize: "small" }), (0, import_i18n12.__)("Edit component", "elementor"))
|
|
1801
1866
|
);
|
|
1802
1867
|
};
|
|
1803
1868
|
|
|
1804
1869
|
// src/components/instance-editing-panel/override-props-group.tsx
|
|
1805
|
-
var
|
|
1870
|
+
var React15 = __toESM(require("react"));
|
|
1806
1871
|
var import_react9 = require("react");
|
|
1807
1872
|
var import_editor_editing_panel = require("@elementor/editor-editing-panel");
|
|
1808
|
-
var
|
|
1809
|
-
var
|
|
1873
|
+
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
1874
|
+
var import_ui11 = require("@elementor/ui");
|
|
1810
1875
|
function OverridePropsGroup({ group, props }) {
|
|
1811
1876
|
const [isOpen, setIsOpen] = (0, import_editor_editing_panel.useStateByElement)(group.id, true);
|
|
1812
1877
|
const handleClick = () => {
|
|
@@ -1816,8 +1881,8 @@ function OverridePropsGroup({ group, props }) {
|
|
|
1816
1881
|
const labelId = `label-${id}`;
|
|
1817
1882
|
const contentId = `content-${id}`;
|
|
1818
1883
|
const title = group.label;
|
|
1819
|
-
return /* @__PURE__ */
|
|
1820
|
-
|
|
1884
|
+
return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
|
|
1885
|
+
import_ui11.ListItemButton,
|
|
1821
1886
|
{
|
|
1822
1887
|
id: labelId,
|
|
1823
1888
|
"aria-controls": contentId,
|
|
@@ -1826,18 +1891,18 @@ function OverridePropsGroup({ group, props }) {
|
|
|
1826
1891
|
p: 0,
|
|
1827
1892
|
sx: { "&:hover": { backgroundColor: "transparent" } }
|
|
1828
1893
|
},
|
|
1829
|
-
/* @__PURE__ */
|
|
1830
|
-
|
|
1894
|
+
/* @__PURE__ */ React15.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React15.createElement(
|
|
1895
|
+
import_ui11.ListItemText,
|
|
1831
1896
|
{
|
|
1832
1897
|
secondary: title,
|
|
1833
1898
|
secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
|
|
1834
1899
|
sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
|
|
1835
1900
|
}
|
|
1836
1901
|
)),
|
|
1837
|
-
/* @__PURE__ */
|
|
1838
|
-
), /* @__PURE__ */
|
|
1902
|
+
/* @__PURE__ */ React15.createElement(import_editor_ui6.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
|
|
1903
|
+
), /* @__PURE__ */ React15.createElement(import_ui11.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React15.createElement(import_ui11.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((propId) => (
|
|
1839
1904
|
// TODO: Render actual controls
|
|
1840
|
-
/* @__PURE__ */
|
|
1905
|
+
/* @__PURE__ */ React15.createElement("pre", { key: propId }, JSON.stringify(props[propId], null, 2))
|
|
1841
1906
|
)))));
|
|
1842
1907
|
}
|
|
1843
1908
|
|
|
@@ -1852,18 +1917,18 @@ function InstanceEditingPanel() {
|
|
|
1852
1917
|
if (!componentId || !overridableProps || !component) {
|
|
1853
1918
|
return null;
|
|
1854
1919
|
}
|
|
1855
|
-
const panelTitle = (0,
|
|
1920
|
+
const panelTitle = (0, import_i18n13.__)("Edit %s", "elementor").replace("%s", component.name);
|
|
1856
1921
|
const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
|
|
1857
1922
|
const groups = overridableProps.groups.order.map(
|
|
1858
1923
|
(groupId) => overridableProps.groups.items[groupId] ? overridableProps.groups.items[groupId] : null
|
|
1859
1924
|
).filter(Boolean);
|
|
1860
1925
|
const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
|
|
1861
|
-
return /* @__PURE__ */
|
|
1926
|
+
return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_editor_panels.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React16.createElement(import_ui12.Stack, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React16.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React16.createElement(import_icons9.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React16.createElement(import_editor_panels.PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React16.createElement(import_ui12.Tooltip, { title: panelTitle }, /* @__PURE__ */ React16.createElement(import_ui12.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React16.createElement(import_icons9.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React16.createElement(import_editor_panels.PanelBody, null, isEmpty ? /* @__PURE__ */ React16.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React16.createElement(import_ui12.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React16.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
|
|
1862
1927
|
}
|
|
1863
1928
|
|
|
1864
1929
|
// src/components/overridable-props/overridable-prop-control.tsx
|
|
1865
|
-
var
|
|
1866
|
-
var
|
|
1930
|
+
var React18 = __toESM(require("react"));
|
|
1931
|
+
var import_editor_controls2 = require("@elementor/editor-controls");
|
|
1867
1932
|
var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
|
|
1868
1933
|
|
|
1869
1934
|
// src/prop-types/component-overridable-prop-type.ts
|
|
@@ -1881,11 +1946,11 @@ var componentOverridablePropTypeUtil = (0, import_editor_props4.createPropUtils)
|
|
|
1881
1946
|
);
|
|
1882
1947
|
|
|
1883
1948
|
// src/provider/overridable-prop-context.tsx
|
|
1884
|
-
var
|
|
1949
|
+
var React17 = __toESM(require("react"));
|
|
1885
1950
|
var import_react10 = require("react");
|
|
1886
1951
|
var OverridablePropContext = (0, import_react10.createContext)(null);
|
|
1887
1952
|
function OverridablePropProvider({ children, ...props }) {
|
|
1888
|
-
return /* @__PURE__ */
|
|
1953
|
+
return /* @__PURE__ */ React17.createElement(OverridablePropContext.Provider, { value: props }, children);
|
|
1889
1954
|
}
|
|
1890
1955
|
var useOverridablePropValue = () => (0, import_react10.useContext)(OverridablePropContext)?.value;
|
|
1891
1956
|
|
|
@@ -1924,7 +1989,7 @@ function OverridablePropControl({
|
|
|
1924
1989
|
...props
|
|
1925
1990
|
}) {
|
|
1926
1991
|
const { elementType } = (0, import_editor_editing_panel3.useElement)();
|
|
1927
|
-
const { value, bind, setValue, placeholder, ...propContext } = (0,
|
|
1992
|
+
const { value, bind, setValue, placeholder, ...propContext } = (0, import_editor_controls2.useBoundProp)(componentOverridablePropTypeUtil);
|
|
1928
1993
|
const componentId = useCurrentComponentId();
|
|
1929
1994
|
if (!componentId) {
|
|
1930
1995
|
return null;
|
|
@@ -1946,8 +2011,8 @@ function OverridablePropControl({
|
|
|
1946
2011
|
}
|
|
1947
2012
|
});
|
|
1948
2013
|
const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
|
|
1949
|
-
return /* @__PURE__ */
|
|
1950
|
-
|
|
2014
|
+
return /* @__PURE__ */ React18.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React18.createElement(
|
|
2015
|
+
import_editor_controls2.PropProvider,
|
|
1951
2016
|
{
|
|
1952
2017
|
...propContext,
|
|
1953
2018
|
propType,
|
|
@@ -1955,23 +2020,23 @@ function OverridablePropControl({
|
|
|
1955
2020
|
value: { [bind]: value.origin_value },
|
|
1956
2021
|
placeholder: objectPlaceholder
|
|
1957
2022
|
},
|
|
1958
|
-
/* @__PURE__ */
|
|
2023
|
+
/* @__PURE__ */ React18.createElement(import_editor_controls2.PropKeyProvider, { bind }, /* @__PURE__ */ React18.createElement(import_editor_controls2.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React18.createElement(OriginalControl, { ...props })))
|
|
1959
2024
|
));
|
|
1960
2025
|
}
|
|
1961
2026
|
|
|
1962
2027
|
// src/components/overridable-props/overridable-prop-indicator.tsx
|
|
1963
|
-
var
|
|
1964
|
-
var
|
|
2028
|
+
var React21 = __toESM(require("react"));
|
|
2029
|
+
var import_editor_controls3 = require("@elementor/editor-controls");
|
|
1965
2030
|
var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
|
|
1966
2031
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
1967
2032
|
var import_store35 = require("@elementor/store");
|
|
1968
|
-
var
|
|
1969
|
-
var
|
|
2033
|
+
var import_ui15 = require("@elementor/ui");
|
|
2034
|
+
var import_i18n17 = require("@wordpress/i18n");
|
|
1970
2035
|
|
|
1971
2036
|
// src/store/actions/set-overridable-prop.ts
|
|
1972
2037
|
var import_store31 = require("@elementor/store");
|
|
1973
2038
|
var import_utils5 = require("@elementor/utils");
|
|
1974
|
-
var
|
|
2039
|
+
var import_i18n14 = require("@wordpress/i18n");
|
|
1975
2040
|
function setOverridableProp({
|
|
1976
2041
|
componentId,
|
|
1977
2042
|
overrideKey,
|
|
@@ -2061,7 +2126,7 @@ function addNewGroup(groups, groupId) {
|
|
|
2061
2126
|
...groups.items,
|
|
2062
2127
|
[currentGroupId]: {
|
|
2063
2128
|
id: currentGroupId,
|
|
2064
|
-
label: (0,
|
|
2129
|
+
label: (0, import_i18n14.__)("Default", "elementor"),
|
|
2065
2130
|
props: []
|
|
2066
2131
|
}
|
|
2067
2132
|
},
|
|
@@ -2111,13 +2176,13 @@ function removeProps({
|
|
|
2111
2176
|
}
|
|
2112
2177
|
|
|
2113
2178
|
// src/components/overridable-props/indicator.tsx
|
|
2114
|
-
var
|
|
2179
|
+
var React19 = __toESM(require("react"));
|
|
2115
2180
|
var import_react11 = require("react");
|
|
2116
2181
|
var import_icons10 = require("@elementor/icons");
|
|
2117
|
-
var
|
|
2118
|
-
var
|
|
2182
|
+
var import_ui13 = require("@elementor/ui");
|
|
2183
|
+
var import_i18n15 = require("@wordpress/i18n");
|
|
2119
2184
|
var SIZE = "tiny";
|
|
2120
|
-
var IconContainer = (0,
|
|
2185
|
+
var IconContainer = (0, import_ui13.styled)(import_ui13.Box)`
|
|
2121
2186
|
pointer-events: none;
|
|
2122
2187
|
opacity: 0;
|
|
2123
2188
|
transition: opacity 0.2s ease-in-out;
|
|
@@ -2134,7 +2199,7 @@ var IconContainer = (0, import_ui12.styled)(import_ui12.Box)`
|
|
|
2134
2199
|
stroke-width: 2px;
|
|
2135
2200
|
}
|
|
2136
2201
|
`;
|
|
2137
|
-
var Content = (0,
|
|
2202
|
+
var Content = (0, import_ui13.styled)(import_ui13.Box)`
|
|
2138
2203
|
position: relative;
|
|
2139
2204
|
display: flex;
|
|
2140
2205
|
align-items: center;
|
|
@@ -2171,33 +2236,33 @@ var Content = (0, import_ui12.styled)(import_ui12.Box)`
|
|
|
2171
2236
|
}
|
|
2172
2237
|
}
|
|
2173
2238
|
`;
|
|
2174
|
-
var Indicator = (0, import_react11.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */
|
|
2239
|
+
var Indicator = (0, import_react11.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React19.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React19.createElement(
|
|
2175
2240
|
IconContainer,
|
|
2176
2241
|
{
|
|
2177
2242
|
className: "icon",
|
|
2178
|
-
"aria-label": isOverridable ? (0,
|
|
2243
|
+
"aria-label": isOverridable ? (0, import_i18n15.__)("Overridable property", "elementor") : (0, import_i18n15.__)("Make prop overridable", "elementor")
|
|
2179
2244
|
},
|
|
2180
|
-
isOverridable ? /* @__PURE__ */
|
|
2245
|
+
isOverridable ? /* @__PURE__ */ React19.createElement(import_icons10.CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React19.createElement(import_icons10.PlusIcon, { fontSize: SIZE })
|
|
2181
2246
|
)));
|
|
2182
2247
|
|
|
2183
2248
|
// src/components/overridable-props/overridable-prop-form.tsx
|
|
2184
|
-
var
|
|
2249
|
+
var React20 = __toESM(require("react"));
|
|
2185
2250
|
var import_react12 = require("react");
|
|
2186
|
-
var
|
|
2187
|
-
var
|
|
2188
|
-
var
|
|
2251
|
+
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
2252
|
+
var import_ui14 = require("@elementor/ui");
|
|
2253
|
+
var import_i18n16 = require("@wordpress/i18n");
|
|
2189
2254
|
var SIZE2 = "tiny";
|
|
2190
|
-
var DEFAULT_GROUP = { value: null, label: (0,
|
|
2255
|
+
var DEFAULT_GROUP = { value: null, label: (0, import_i18n16.__)("Default", "elementor") };
|
|
2191
2256
|
function OverridablePropForm({ onSubmit, groups, currentValue }) {
|
|
2192
2257
|
const [propLabel, setPropLabel] = (0, import_react12.useState)(currentValue?.label ?? null);
|
|
2193
2258
|
const [group, setGroup] = (0, import_react12.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
|
|
2194
|
-
const name = (0,
|
|
2195
|
-
const groupName = (0,
|
|
2259
|
+
const name = (0, import_i18n16.__)("Name", "elementor");
|
|
2260
|
+
const groupName = (0, import_i18n16.__)("Group Name", "elementor");
|
|
2196
2261
|
const isCreate = currentValue === void 0;
|
|
2197
|
-
const title = isCreate ? (0,
|
|
2198
|
-
const ctaLabel = isCreate ? (0,
|
|
2199
|
-
return /* @__PURE__ */
|
|
2200
|
-
|
|
2262
|
+
const title = isCreate ? (0, import_i18n16.__)("Create new property", "elementor") : (0, import_i18n16.__)("Update property", "elementor");
|
|
2263
|
+
const ctaLabel = isCreate ? (0, import_i18n16.__)("Create", "elementor") : (0, import_i18n16.__)("Update", "elementor");
|
|
2264
|
+
return /* @__PURE__ */ React20.createElement(import_editor_ui7.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React20.createElement(import_ui14.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
|
|
2265
|
+
import_ui14.Stack,
|
|
2201
2266
|
{
|
|
2202
2267
|
direction: "row",
|
|
2203
2268
|
alignItems: "center",
|
|
@@ -2205,19 +2270,19 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
|
|
|
2205
2270
|
px: 1.5,
|
|
2206
2271
|
sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
|
|
2207
2272
|
},
|
|
2208
|
-
/* @__PURE__ */
|
|
2209
|
-
), /* @__PURE__ */
|
|
2210
|
-
|
|
2273
|
+
/* @__PURE__ */ React20.createElement(import_ui14.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
|
|
2274
|
+
), /* @__PURE__ */ React20.createElement(import_ui14.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React20.createElement(import_ui14.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(import_ui14.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React20.createElement(import_ui14.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
|
|
2275
|
+
import_ui14.TextField,
|
|
2211
2276
|
{
|
|
2212
2277
|
name,
|
|
2213
2278
|
size: SIZE2,
|
|
2214
2279
|
fullWidth: true,
|
|
2215
|
-
placeholder: (0,
|
|
2280
|
+
placeholder: (0, import_i18n16.__)("Enter value", "elementor"),
|
|
2216
2281
|
value: propLabel ?? "",
|
|
2217
2282
|
onChange: (e) => setPropLabel(e.target.value)
|
|
2218
2283
|
}
|
|
2219
|
-
))), /* @__PURE__ */
|
|
2220
|
-
|
|
2284
|
+
))), /* @__PURE__ */ React20.createElement(import_ui14.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React20.createElement(import_ui14.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(import_ui14.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React20.createElement(import_ui14.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
|
|
2285
|
+
import_ui14.Select,
|
|
2221
2286
|
{
|
|
2222
2287
|
name: groupName,
|
|
2223
2288
|
size: SIZE2,
|
|
@@ -2233,8 +2298,8 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
|
|
|
2233
2298
|
return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
|
|
2234
2299
|
}
|
|
2235
2300
|
},
|
|
2236
|
-
(groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */
|
|
2237
|
-
))), /* @__PURE__ */
|
|
2301
|
+
(groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React20.createElement(import_editor_ui7.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
|
|
2302
|
+
))), /* @__PURE__ */ React20.createElement(import_ui14.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React20.createElement(import_ui14.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
|
|
2238
2303
|
}
|
|
2239
2304
|
|
|
2240
2305
|
// src/components/overridable-props/utils/get-overridable-prop.ts
|
|
@@ -2253,30 +2318,30 @@ function getOverridableProp({
|
|
|
2253
2318
|
// src/components/overridable-props/overridable-prop-indicator.tsx
|
|
2254
2319
|
var FORBIDDEN_KEYS = ["_cssid", "attributes"];
|
|
2255
2320
|
function OverridablePropIndicator() {
|
|
2256
|
-
const { bind } = (0,
|
|
2321
|
+
const { bind } = (0, import_editor_controls3.useBoundProp)();
|
|
2257
2322
|
const componentId = useCurrentComponentId();
|
|
2258
2323
|
if (!isPropAllowed(bind) || !componentId) {
|
|
2259
2324
|
return null;
|
|
2260
2325
|
}
|
|
2261
2326
|
const overridableProps = selectOverridableProps((0, import_store35.__getState)(), componentId);
|
|
2262
|
-
return /* @__PURE__ */
|
|
2327
|
+
return /* @__PURE__ */ React21.createElement(Content2, { componentId, overridableProps });
|
|
2263
2328
|
}
|
|
2264
2329
|
function Content2({ componentId, overridableProps }) {
|
|
2265
2330
|
const {
|
|
2266
2331
|
element: { id: elementId },
|
|
2267
2332
|
elementType
|
|
2268
2333
|
} = (0, import_editor_editing_panel4.useElement)();
|
|
2269
|
-
const { value, bind, propType } = (0,
|
|
2334
|
+
const { value, bind, propType } = (0, import_editor_controls3.useBoundProp)();
|
|
2270
2335
|
const contextOverridableValue = useOverridablePropValue();
|
|
2271
|
-
const { value: boundPropOverridableValue, setValue: setOverridableValue } = (0,
|
|
2336
|
+
const { value: boundPropOverridableValue, setValue: setOverridableValue } = (0, import_editor_controls3.useBoundProp)(
|
|
2272
2337
|
componentOverridablePropTypeUtil
|
|
2273
2338
|
);
|
|
2274
2339
|
const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
|
|
2275
|
-
const popupState = (0,
|
|
2340
|
+
const popupState = (0, import_ui15.usePopupState)({
|
|
2276
2341
|
variant: "popover"
|
|
2277
2342
|
});
|
|
2278
|
-
const triggerProps = (0,
|
|
2279
|
-
const popoverProps = (0,
|
|
2343
|
+
const triggerProps = (0, import_ui15.bindTrigger)(popupState);
|
|
2344
|
+
const popoverProps = (0, import_ui15.bindPopover)(popupState);
|
|
2280
2345
|
const { elType } = (0, import_editor_elements6.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
|
|
2281
2346
|
const handleSubmit = ({ label, group }) => {
|
|
2282
2347
|
const originValue = !overridableValue ? value ?? propType.default : overridableValue?.origin_value ?? {};
|
|
@@ -2300,8 +2365,8 @@ function Content2({ componentId, overridableProps }) {
|
|
|
2300
2365
|
popupState.close();
|
|
2301
2366
|
};
|
|
2302
2367
|
const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
|
|
2303
|
-
return /* @__PURE__ */
|
|
2304
|
-
|
|
2368
|
+
return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui15.Tooltip, { placement: "top", title: (0, import_i18n17.__)("Override Property", "elementor") }, /* @__PURE__ */ React21.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React21.createElement(
|
|
2369
|
+
import_ui15.Popover,
|
|
2305
2370
|
{
|
|
2306
2371
|
disableScrollLock: true,
|
|
2307
2372
|
anchorOrigin: {
|
|
@@ -2317,7 +2382,7 @@ function Content2({ componentId, overridableProps }) {
|
|
|
2317
2382
|
},
|
|
2318
2383
|
...popoverProps
|
|
2319
2384
|
},
|
|
2320
|
-
/* @__PURE__ */
|
|
2385
|
+
/* @__PURE__ */ React21.createElement(
|
|
2321
2386
|
OverridablePropForm,
|
|
2322
2387
|
{
|
|
2323
2388
|
onSubmit: handleSubmit,
|
|
@@ -2881,7 +2946,7 @@ function init() {
|
|
|
2881
2946
|
window.elementorCommon.__beforeSave = beforeSave;
|
|
2882
2947
|
(0, import_editor_elements_panel.injectTab)({
|
|
2883
2948
|
id: "components",
|
|
2884
|
-
label: (0,
|
|
2949
|
+
label: (0, import_i18n18.__)("Components", "elementor"),
|
|
2885
2950
|
component: Components
|
|
2886
2951
|
});
|
|
2887
2952
|
(0, import_editor.injectIntoTop)({
|