@elementor/editor-variables 3.32.0-59 → 3.32.0-61
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.d.mts +9 -6
- package/dist/index.d.ts +9 -6
- package/dist/index.js +371 -286
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +316 -230
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -12
- package/src/components/variables-manager/variable-editable-cell.tsx +70 -0
- package/src/components/variables-manager/variables-manager-panel.tsx +3 -1
- package/src/components/variables-manager/variables-manager-table.tsx +39 -18
- package/src/variables-registry/create-variable-type-registry.ts +1 -1
package/dist/index.js
CHANGED
|
@@ -41,23 +41,15 @@ var import_editor_editing_panel10 = require("@elementor/editor-editing-panel");
|
|
|
41
41
|
var import_editor_panels2 = require("@elementor/editor-panels");
|
|
42
42
|
|
|
43
43
|
// src/components/variables-manager/variables-manager-panel.tsx
|
|
44
|
-
var
|
|
45
|
-
var
|
|
44
|
+
var React7 = __toESM(require("react"));
|
|
45
|
+
var import_react6 = require("react");
|
|
46
46
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
47
47
|
var import_editor_ui2 = require("@elementor/editor-ui");
|
|
48
48
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
49
49
|
var import_icons3 = require("@elementor/icons");
|
|
50
|
-
var
|
|
50
|
+
var import_ui7 = require("@elementor/ui");
|
|
51
51
|
var import_i18n4 = require("@wordpress/i18n");
|
|
52
52
|
|
|
53
|
-
// src/components/variables-manager/variables-manager-table.tsx
|
|
54
|
-
var React5 = __toESM(require("react"));
|
|
55
|
-
var import_react4 = require("react");
|
|
56
|
-
var import_editor_ui = require("@elementor/editor-ui");
|
|
57
|
-
var import_icons2 = require("@elementor/icons");
|
|
58
|
-
var import_ui5 = require("@elementor/ui");
|
|
59
|
-
var import_i18n3 = require("@wordpress/i18n");
|
|
60
|
-
|
|
61
53
|
// src/hooks/use-prop-variables.ts
|
|
62
54
|
var import_react2 = require("react");
|
|
63
55
|
var import_editor_controls = require("@elementor/editor-controls");
|
|
@@ -545,6 +537,14 @@ var restoreVariable = (restoreId, label, value) => {
|
|
|
545
537
|
return service.restore(restoreId, label, value).then(extractId);
|
|
546
538
|
};
|
|
547
539
|
|
|
540
|
+
// src/components/variables-manager/variables-manager-table.tsx
|
|
541
|
+
var React6 = __toESM(require("react"));
|
|
542
|
+
var import_react5 = require("react");
|
|
543
|
+
var import_editor_ui = require("@elementor/editor-ui");
|
|
544
|
+
var import_icons2 = require("@elementor/icons");
|
|
545
|
+
var import_ui6 = require("@elementor/ui");
|
|
546
|
+
var import_i18n3 = require("@wordpress/i18n");
|
|
547
|
+
|
|
548
548
|
// src/components/variables-manager/variable-edit-menu.tsx
|
|
549
549
|
var React3 = __toESM(require("react"));
|
|
550
550
|
var import_react3 = require("react");
|
|
@@ -599,9 +599,63 @@ var VariableEditMenu = ({ menuActions, disabled }) => {
|
|
|
599
599
|
));
|
|
600
600
|
};
|
|
601
601
|
|
|
602
|
-
// src/components/variables-manager/variable-
|
|
602
|
+
// src/components/variables-manager/variable-editable-cell.tsx
|
|
603
603
|
var React4 = __toESM(require("react"));
|
|
604
|
+
var import_react4 = require("react");
|
|
604
605
|
var import_ui4 = require("@elementor/ui");
|
|
606
|
+
var VariableEditableCell = ({
|
|
607
|
+
initialValue,
|
|
608
|
+
children,
|
|
609
|
+
editableElement,
|
|
610
|
+
onSave,
|
|
611
|
+
prefixElement,
|
|
612
|
+
disableCloseOnBlur
|
|
613
|
+
}) => {
|
|
614
|
+
const [value, setValue] = (0, import_react4.useState)(initialValue);
|
|
615
|
+
const [isEditing, setIsEditing] = (0, import_react4.useState)(false);
|
|
616
|
+
const handleDoubleClick = () => {
|
|
617
|
+
setIsEditing(true);
|
|
618
|
+
};
|
|
619
|
+
const handleSave = () => {
|
|
620
|
+
onSave(value);
|
|
621
|
+
setIsEditing(false);
|
|
622
|
+
};
|
|
623
|
+
const handleKeyDown = (event) => {
|
|
624
|
+
if (event.key === "Enter") {
|
|
625
|
+
handleSave();
|
|
626
|
+
} else if (event.key === "Escape") {
|
|
627
|
+
setIsEditing(false);
|
|
628
|
+
}
|
|
629
|
+
if (event.key === " " && !isEditing) {
|
|
630
|
+
event.preventDefault();
|
|
631
|
+
setIsEditing(true);
|
|
632
|
+
}
|
|
633
|
+
};
|
|
634
|
+
const handleChange = (newValue) => {
|
|
635
|
+
setValue(newValue);
|
|
636
|
+
};
|
|
637
|
+
const editableContent = editableElement({ value, onChange: handleChange });
|
|
638
|
+
return /* @__PURE__ */ React4.createElement(import_ui4.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React4.createElement(
|
|
639
|
+
import_ui4.Stack,
|
|
640
|
+
{
|
|
641
|
+
direction: "row",
|
|
642
|
+
alignItems: "center",
|
|
643
|
+
gap: 1,
|
|
644
|
+
onDoubleClick: handleDoubleClick,
|
|
645
|
+
onBlur: disableCloseOnBlur ? void 0 : handleSave,
|
|
646
|
+
onKeyDown: handleKeyDown,
|
|
647
|
+
tabIndex: 0,
|
|
648
|
+
role: "button",
|
|
649
|
+
"aria-label": "Double click or press Space to edit"
|
|
650
|
+
},
|
|
651
|
+
prefixElement,
|
|
652
|
+
isEditing ? editableContent : children
|
|
653
|
+
));
|
|
654
|
+
};
|
|
655
|
+
|
|
656
|
+
// src/components/variables-manager/variable-table-cell.tsx
|
|
657
|
+
var React5 = __toESM(require("react"));
|
|
658
|
+
var import_ui5 = require("@elementor/ui");
|
|
605
659
|
var VariableTableCell = ({
|
|
606
660
|
children,
|
|
607
661
|
isHeader,
|
|
@@ -619,36 +673,38 @@ var VariableTableCell = ({
|
|
|
619
673
|
...width && { width },
|
|
620
674
|
...sx
|
|
621
675
|
};
|
|
622
|
-
return /* @__PURE__ */
|
|
676
|
+
return /* @__PURE__ */ React5.createElement(import_ui5.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
|
|
623
677
|
};
|
|
624
678
|
|
|
625
679
|
// src/components/variables-manager/variables-manager-table.tsx
|
|
626
|
-
var VariablesManagerTable = ({ menuActions }) => {
|
|
627
|
-
const
|
|
628
|
-
const
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
680
|
+
var VariablesManagerTable = ({ menuActions, variables }) => {
|
|
681
|
+
const [ids, setIds] = (0, import_react5.useState)(Object.keys(variables));
|
|
682
|
+
const rows = ids.map((id2) => {
|
|
683
|
+
const variable = variables[id2];
|
|
684
|
+
const variableType = getVariableType(variable.type);
|
|
685
|
+
return {
|
|
686
|
+
id: id2,
|
|
687
|
+
name: variable.label,
|
|
688
|
+
value: variable.value,
|
|
689
|
+
type: variable.type,
|
|
690
|
+
...variableType
|
|
691
|
+
};
|
|
692
|
+
});
|
|
637
693
|
const tableSX = {
|
|
638
694
|
minWidth: 250,
|
|
639
695
|
tableLayout: "fixed"
|
|
640
696
|
};
|
|
641
|
-
return /* @__PURE__ */
|
|
642
|
-
|
|
697
|
+
return /* @__PURE__ */ React6.createElement(import_ui6.TableContainer, { sx: { overflow: "initial" } }, /* @__PURE__ */ React6.createElement(import_ui6.Table, { sx: tableSX, "aria-label": "Variables manager list with drag and drop reordering" }, /* @__PURE__ */ React6.createElement(import_ui6.TableHead, null, /* @__PURE__ */ React6.createElement(import_ui6.TableRow, null, /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 10, maxWidth: 10 }), /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n3.__)("Name", "elementor")), /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true }, (0, import_i18n3.__)("Value", "elementor")), /* @__PURE__ */ React6.createElement(VariableTableCell, { isHeader: true, noPadding: true, width: 16, maxWidth: 16 }))), /* @__PURE__ */ React6.createElement(import_ui6.TableBody, null, /* @__PURE__ */ React6.createElement(
|
|
698
|
+
import_ui6.UnstableSortableProvider,
|
|
643
699
|
{
|
|
644
700
|
value: ids,
|
|
645
701
|
onChange: setIds,
|
|
646
702
|
variant: "static",
|
|
647
703
|
restrictAxis: true,
|
|
648
|
-
dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */
|
|
704
|
+
dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React6.createElement(import_ui6.Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React6.createElement(import_ui6.TableBody, null, dragOverlayChildren))
|
|
649
705
|
},
|
|
650
|
-
rows.map((row) => /* @__PURE__ */
|
|
651
|
-
|
|
706
|
+
rows.map((row) => /* @__PURE__ */ React6.createElement(
|
|
707
|
+
import_ui6.UnstableSortableItem,
|
|
652
708
|
{
|
|
653
709
|
key: row.id,
|
|
654
710
|
id: row.id,
|
|
@@ -667,8 +723,8 @@ var VariablesManagerTable = ({ menuActions }) => {
|
|
|
667
723
|
}) => {
|
|
668
724
|
const showIndicationBefore = showDropIndication && dropPosition === "before";
|
|
669
725
|
const showIndicationAfter = showDropIndication && dropPosition === "after";
|
|
670
|
-
return /* @__PURE__ */
|
|
671
|
-
|
|
726
|
+
return /* @__PURE__ */ React6.createElement(
|
|
727
|
+
import_ui6.TableRow,
|
|
672
728
|
{
|
|
673
729
|
...itemProps,
|
|
674
730
|
selected: isDragged,
|
|
@@ -698,8 +754,8 @@ var VariablesManagerTable = ({ menuActions }) => {
|
|
|
698
754
|
style: { ...itemStyle, ...triggerStyle },
|
|
699
755
|
disableDivider: isDragOverlay || index === rows.length - 1
|
|
700
756
|
},
|
|
701
|
-
/* @__PURE__ */
|
|
702
|
-
|
|
757
|
+
/* @__PURE__ */ React6.createElement(VariableTableCell, { noPadding: true, width: 10, maxWidth: 10 }, /* @__PURE__ */ React6.createElement(
|
|
758
|
+
import_ui6.IconButton,
|
|
703
759
|
{
|
|
704
760
|
size: "small",
|
|
705
761
|
ref: setTriggerRef,
|
|
@@ -707,11 +763,39 @@ var VariablesManagerTable = ({ menuActions }) => {
|
|
|
707
763
|
disabled: isSorting,
|
|
708
764
|
draggable: true
|
|
709
765
|
},
|
|
710
|
-
/* @__PURE__ */
|
|
766
|
+
/* @__PURE__ */ React6.createElement(import_icons2.GripVerticalIcon, { fontSize: "inherit" })
|
|
711
767
|
)),
|
|
712
|
-
/* @__PURE__ */
|
|
713
|
-
|
|
714
|
-
|
|
768
|
+
/* @__PURE__ */ React6.createElement(VariableTableCell, null, /* @__PURE__ */ React6.createElement(
|
|
769
|
+
VariableEditableCell,
|
|
770
|
+
{
|
|
771
|
+
initialValue: row.name,
|
|
772
|
+
onSave: () => {
|
|
773
|
+
},
|
|
774
|
+
prefixElement: (0, import_react5.createElement)(row.icon, { fontSize: "inherit" }),
|
|
775
|
+
editableElement: ({ value, onChange }) => /* @__PURE__ */ React6.createElement(
|
|
776
|
+
import_ui6.TextField,
|
|
777
|
+
{
|
|
778
|
+
size: "tiny",
|
|
779
|
+
value,
|
|
780
|
+
onChange: (event) => onChange(event.target.value)
|
|
781
|
+
}
|
|
782
|
+
)
|
|
783
|
+
},
|
|
784
|
+
/* @__PURE__ */ React6.createElement(import_editor_ui.EllipsisWithTooltip, { title: row.name }, row.name)
|
|
785
|
+
)),
|
|
786
|
+
/* @__PURE__ */ React6.createElement(VariableTableCell, null, /* @__PURE__ */ React6.createElement(
|
|
787
|
+
VariableEditableCell,
|
|
788
|
+
{
|
|
789
|
+
initialValue: row.value,
|
|
790
|
+
onSave: () => {
|
|
791
|
+
},
|
|
792
|
+
editableElement: row.valueField,
|
|
793
|
+
disableCloseOnBlur: true
|
|
794
|
+
},
|
|
795
|
+
row.startIcon && row.startIcon({ value: row.value }),
|
|
796
|
+
/* @__PURE__ */ React6.createElement(import_editor_ui.EllipsisWithTooltip, { title: row.value }, row.value)
|
|
797
|
+
)),
|
|
798
|
+
/* @__PURE__ */ React6.createElement(
|
|
715
799
|
VariableTableCell,
|
|
716
800
|
{
|
|
717
801
|
align: "right",
|
|
@@ -720,7 +804,7 @@ var VariablesManagerTable = ({ menuActions }) => {
|
|
|
720
804
|
maxWidth: 16,
|
|
721
805
|
sx: { paddingInlineEnd: 1 }
|
|
722
806
|
},
|
|
723
|
-
/* @__PURE__ */
|
|
807
|
+
/* @__PURE__ */ React6.createElement(import_ui6.Stack, { role: "toolbar", direction: "row", justifyContent: "flex-end" }, /* @__PURE__ */ React6.createElement(
|
|
724
808
|
VariableEditMenu,
|
|
725
809
|
{
|
|
726
810
|
menuActions,
|
|
@@ -751,6 +835,7 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
|
|
|
751
835
|
function VariablesManagerPanel() {
|
|
752
836
|
const { close: closePanel } = usePanelActions();
|
|
753
837
|
const isDirty = false;
|
|
838
|
+
const variables = getVariables(false);
|
|
754
839
|
usePreventUnload(isDirty);
|
|
755
840
|
const menuActions = [
|
|
756
841
|
{
|
|
@@ -761,7 +846,7 @@ function VariablesManagerPanel() {
|
|
|
761
846
|
}
|
|
762
847
|
}
|
|
763
848
|
];
|
|
764
|
-
return /* @__PURE__ */
|
|
849
|
+
return /* @__PURE__ */ React7.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React7.createElement(import_ui7.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui7.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_ui7.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n4.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React7.createElement(
|
|
765
850
|
CloseButton,
|
|
766
851
|
{
|
|
767
852
|
sx: { marginLeft: "auto" },
|
|
@@ -769,7 +854,7 @@ function VariablesManagerPanel() {
|
|
|
769
854
|
closePanel();
|
|
770
855
|
}
|
|
771
856
|
}
|
|
772
|
-
))), /* @__PURE__ */
|
|
857
|
+
))), /* @__PURE__ */ React7.createElement(
|
|
773
858
|
import_editor_panels.PanelBody,
|
|
774
859
|
{
|
|
775
860
|
sx: {
|
|
@@ -778,14 +863,14 @@ function VariablesManagerPanel() {
|
|
|
778
863
|
height: "100%"
|
|
779
864
|
}
|
|
780
865
|
},
|
|
781
|
-
/* @__PURE__ */
|
|
782
|
-
/* @__PURE__ */
|
|
783
|
-
), /* @__PURE__ */
|
|
866
|
+
/* @__PURE__ */ React7.createElement(import_ui7.Divider, null),
|
|
867
|
+
/* @__PURE__ */ React7.createElement(VariablesManagerTable, { menuActions, variables })
|
|
868
|
+
), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React7.createElement(import_ui7.Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, (0, import_i18n4.__)("Save changes", "elementor"))))));
|
|
784
869
|
}
|
|
785
|
-
var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */
|
|
786
|
-
var ErrorBoundaryFallback = () => /* @__PURE__ */
|
|
870
|
+
var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(import_ui7.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(import_icons3.XIcon, { fontSize: "small" }));
|
|
871
|
+
var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui7.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui7.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n4.__)("Something went wrong", "elementor"))));
|
|
787
872
|
var usePreventUnload = (isDirty) => {
|
|
788
|
-
(0,
|
|
873
|
+
(0, import_react6.useEffect)(() => {
|
|
789
874
|
const handleBeforeUnload = (event) => {
|
|
790
875
|
if (isDirty) {
|
|
791
876
|
event.preventDefault();
|
|
@@ -799,15 +884,15 @@ var usePreventUnload = (isDirty) => {
|
|
|
799
884
|
};
|
|
800
885
|
|
|
801
886
|
// src/controls/variable-control.tsx
|
|
802
|
-
var
|
|
887
|
+
var React29 = __toESM(require("react"));
|
|
803
888
|
var import_editor_controls10 = require("@elementor/editor-controls");
|
|
804
889
|
|
|
805
890
|
// src/components/ui/variable/assigned-variable.tsx
|
|
806
|
-
var
|
|
807
|
-
var
|
|
891
|
+
var import_react14 = require("react");
|
|
892
|
+
var React21 = __toESM(require("react"));
|
|
808
893
|
var import_editor_controls6 = require("@elementor/editor-controls");
|
|
809
894
|
var import_icons11 = require("@elementor/icons");
|
|
810
|
-
var
|
|
895
|
+
var import_ui21 = require("@elementor/ui");
|
|
811
896
|
|
|
812
897
|
// src/utils/unlink-variable.ts
|
|
813
898
|
function transformValueBeforeUnlink(variable, propTypeKey) {
|
|
@@ -826,21 +911,21 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
|
|
|
826
911
|
}
|
|
827
912
|
|
|
828
913
|
// src/components/variable-selection-popover.tsx
|
|
829
|
-
var
|
|
830
|
-
var
|
|
914
|
+
var React19 = __toESM(require("react"));
|
|
915
|
+
var import_react13 = require("react");
|
|
831
916
|
var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
832
917
|
|
|
833
918
|
// src/context/variable-selection-popover.context.tsx
|
|
834
|
-
var
|
|
835
|
-
var
|
|
836
|
-
var
|
|
837
|
-
var PopoverContentRefContext = (0,
|
|
919
|
+
var React8 = __toESM(require("react"));
|
|
920
|
+
var import_react7 = require("react");
|
|
921
|
+
var import_ui8 = require("@elementor/ui");
|
|
922
|
+
var PopoverContentRefContext = (0, import_react7.createContext)(null);
|
|
838
923
|
var PopoverContentRefContextProvider = ({ children }) => {
|
|
839
|
-
const [anchorRef, setAnchorRef] = (0,
|
|
840
|
-
return /* @__PURE__ */
|
|
924
|
+
const [anchorRef, setAnchorRef] = (0, import_react7.useState)(null);
|
|
925
|
+
return /* @__PURE__ */ React8.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React8.createElement(import_ui8.Box, { ref: setAnchorRef }, children));
|
|
841
926
|
};
|
|
842
927
|
var usePopoverContentRef = () => {
|
|
843
|
-
return (0,
|
|
928
|
+
return (0, import_react7.useContext)(PopoverContentRefContext);
|
|
844
929
|
};
|
|
845
930
|
|
|
846
931
|
// src/hooks/use-permissions.ts
|
|
@@ -859,13 +944,13 @@ var usePermissions = () => {
|
|
|
859
944
|
};
|
|
860
945
|
|
|
861
946
|
// src/components/variable-creation.tsx
|
|
862
|
-
var
|
|
863
|
-
var
|
|
947
|
+
var React11 = __toESM(require("react"));
|
|
948
|
+
var import_react9 = require("react");
|
|
864
949
|
var import_editor_controls3 = require("@elementor/editor-controls");
|
|
865
950
|
var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
|
|
866
951
|
var import_editor_ui3 = require("@elementor/editor-ui");
|
|
867
952
|
var import_icons4 = require("@elementor/icons");
|
|
868
|
-
var
|
|
953
|
+
var import_ui11 = require("@elementor/ui");
|
|
869
954
|
var import_i18n7 = require("@wordpress/i18n");
|
|
870
955
|
|
|
871
956
|
// src/hooks/use-initial-value.ts
|
|
@@ -951,16 +1036,16 @@ var validateValue = (value) => {
|
|
|
951
1036
|
};
|
|
952
1037
|
|
|
953
1038
|
// src/components/fields/label-field.tsx
|
|
954
|
-
var
|
|
955
|
-
var
|
|
956
|
-
var
|
|
1039
|
+
var React10 = __toESM(require("react"));
|
|
1040
|
+
var import_react8 = require("react");
|
|
1041
|
+
var import_ui10 = require("@elementor/ui");
|
|
957
1042
|
var import_i18n6 = require("@wordpress/i18n");
|
|
958
1043
|
|
|
959
1044
|
// src/components/ui/form-field.tsx
|
|
960
|
-
var
|
|
961
|
-
var
|
|
1045
|
+
var React9 = __toESM(require("react"));
|
|
1046
|
+
var import_ui9 = require("@elementor/ui");
|
|
962
1047
|
var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
|
|
963
|
-
return /* @__PURE__ */
|
|
1048
|
+
return /* @__PURE__ */ React9.createElement(import_ui9.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui9.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React9.createElement(import_ui9.FormLabel, { htmlFor: id2, size: "tiny" }, label)), /* @__PURE__ */ React9.createElement(import_ui9.Grid, { item: true, xs: 12 }, children, errorMsg && /* @__PURE__ */ React9.createElement(import_ui9.FormHelperText, { error: true }, errorMsg), noticeMsg && /* @__PURE__ */ React9.createElement(import_ui9.FormHelperText, null, noticeMsg)));
|
|
964
1049
|
};
|
|
965
1050
|
|
|
966
1051
|
// src/components/fields/label-field.tsx
|
|
@@ -968,16 +1053,16 @@ function isLabelEqual(a, b) {
|
|
|
968
1053
|
return a.trim().toLowerCase() === b.trim().toLowerCase();
|
|
969
1054
|
}
|
|
970
1055
|
var useLabelError = (initialError) => {
|
|
971
|
-
const [error, setError] = (0,
|
|
1056
|
+
const [error, setError] = (0, import_react8.useState)(initialError ?? { value: "", message: "" });
|
|
972
1057
|
return {
|
|
973
1058
|
labelFieldError: error,
|
|
974
1059
|
setLabelFieldError: setError
|
|
975
1060
|
};
|
|
976
1061
|
};
|
|
977
1062
|
var LabelField = ({ value, error, onChange }) => {
|
|
978
|
-
const [label, setLabel] = (0,
|
|
979
|
-
const [errorMessage, setErrorMessage] = (0,
|
|
980
|
-
const [noticeMessage, setNoticeMessage] = (0,
|
|
1063
|
+
const [label, setLabel] = (0, import_react8.useState)(value);
|
|
1064
|
+
const [errorMessage, setErrorMessage] = (0, import_react8.useState)("");
|
|
1065
|
+
const [noticeMessage, setNoticeMessage] = (0, import_react8.useState)(() => labelHint(value));
|
|
981
1066
|
const handleChange = (newValue) => {
|
|
982
1067
|
setLabel(newValue);
|
|
983
1068
|
const errorMsg2 = validateLabel(newValue);
|
|
@@ -986,14 +1071,14 @@ var LabelField = ({ value, error, onChange }) => {
|
|
|
986
1071
|
setNoticeMessage(errorMsg2 ? "" : hintMsg);
|
|
987
1072
|
onChange(isLabelEqual(newValue, error?.value ?? "") || errorMsg2 ? "" : newValue);
|
|
988
1073
|
};
|
|
989
|
-
const id2 = (0,
|
|
1074
|
+
const id2 = (0, import_react8.useId)();
|
|
990
1075
|
let errorMsg = errorMessage;
|
|
991
1076
|
if (isLabelEqual(label, error?.value ?? "") && error?.message) {
|
|
992
1077
|
errorMsg = error.message;
|
|
993
1078
|
}
|
|
994
1079
|
const noticeMsg = errorMsg ? "" : noticeMessage;
|
|
995
|
-
return /* @__PURE__ */
|
|
996
|
-
|
|
1080
|
+
return /* @__PURE__ */ React10.createElement(FormField, { id: id2, label: (0, import_i18n6.__)("Name", "elementor"), errorMsg, noticeMsg }, /* @__PURE__ */ React10.createElement(
|
|
1081
|
+
import_ui10.TextField,
|
|
997
1082
|
{
|
|
998
1083
|
id: id2,
|
|
999
1084
|
size: "tiny",
|
|
@@ -1013,10 +1098,10 @@ var VariableCreation = ({ onGoBack, onClose }) => {
|
|
|
1013
1098
|
const { setValue: setVariable, path } = (0, import_editor_controls3.useBoundProp)(propTypeUtil);
|
|
1014
1099
|
const { propType } = (0, import_editor_controls3.useBoundProp)();
|
|
1015
1100
|
const initialValue = useInitialValue();
|
|
1016
|
-
const [value, setValue] = (0,
|
|
1017
|
-
const [label, setLabel] = (0,
|
|
1018
|
-
const [errorMessage, setErrorMessage] = (0,
|
|
1019
|
-
const [valueFieldError, setValueFieldError] = (0,
|
|
1101
|
+
const [value, setValue] = (0, import_react9.useState)(initialValue);
|
|
1102
|
+
const [label, setLabel] = (0, import_react9.useState)("");
|
|
1103
|
+
const [errorMessage, setErrorMessage] = (0, import_react9.useState)("");
|
|
1104
|
+
const [valueFieldError, setValueFieldError] = (0, import_react9.useState)("");
|
|
1020
1105
|
const { labelFieldError, setLabelFieldError } = useLabelError();
|
|
1021
1106
|
const resetFields = () => {
|
|
1022
1107
|
setValue("");
|
|
@@ -1067,14 +1152,14 @@ var VariableCreation = ({ onGoBack, onClose }) => {
|
|
|
1067
1152
|
return !!errorMessage;
|
|
1068
1153
|
};
|
|
1069
1154
|
const isSubmitDisabled = hasEmptyFields() || hasErrors();
|
|
1070
|
-
return /* @__PURE__ */
|
|
1155
|
+
return /* @__PURE__ */ React11.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React11.createElement(
|
|
1071
1156
|
import_editor_ui3.PopoverHeader,
|
|
1072
1157
|
{
|
|
1073
|
-
icon: /* @__PURE__ */
|
|
1158
|
+
icon: /* @__PURE__ */ React11.createElement(React11.Fragment, null, onGoBack && /* @__PURE__ */ React11.createElement(import_ui11.IconButton, { size: SIZE, "aria-label": (0, import_i18n7.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React11.createElement(import_icons4.ArrowLeftIcon, { fontSize: SIZE })), /* @__PURE__ */ React11.createElement(VariableIcon, { fontSize: SIZE })),
|
|
1074
1159
|
title: (0, import_i18n7.__)("Create variable", "elementor"),
|
|
1075
1160
|
onClose: closePopover
|
|
1076
1161
|
}
|
|
1077
|
-
), /* @__PURE__ */
|
|
1162
|
+
), /* @__PURE__ */ React11.createElement(import_ui11.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React11.createElement(
|
|
1078
1163
|
LabelField,
|
|
1079
1164
|
{
|
|
1080
1165
|
value: label,
|
|
@@ -1084,7 +1169,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
|
|
|
1084
1169
|
setErrorMessage("");
|
|
1085
1170
|
}
|
|
1086
1171
|
}
|
|
1087
|
-
), /* @__PURE__ */
|
|
1172
|
+
), /* @__PURE__ */ React11.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n7.__)("Value", "elementor") }, /* @__PURE__ */ React11.createElement(
|
|
1088
1173
|
ValueField,
|
|
1089
1174
|
{
|
|
1090
1175
|
value,
|
|
@@ -1096,24 +1181,24 @@ var VariableCreation = ({ onGoBack, onClose }) => {
|
|
|
1096
1181
|
onValidationChange: setValueFieldError,
|
|
1097
1182
|
propType
|
|
1098
1183
|
}
|
|
1099
|
-
)), errorMessage && /* @__PURE__ */
|
|
1184
|
+
)), errorMessage && /* @__PURE__ */ React11.createElement(import_ui11.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React11.createElement(import_ui11.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React11.createElement(import_ui11.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n7.__)("Create", "elementor"))));
|
|
1100
1185
|
};
|
|
1101
1186
|
|
|
1102
1187
|
// src/components/variable-edit.tsx
|
|
1103
|
-
var
|
|
1104
|
-
var
|
|
1188
|
+
var React14 = __toESM(require("react"));
|
|
1189
|
+
var import_react11 = require("react");
|
|
1105
1190
|
var import_editor_controls4 = require("@elementor/editor-controls");
|
|
1106
1191
|
var import_editor_current_user2 = require("@elementor/editor-current-user");
|
|
1107
1192
|
var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
|
|
1108
1193
|
var import_editor_ui4 = require("@elementor/editor-ui");
|
|
1109
1194
|
var import_icons7 = require("@elementor/icons");
|
|
1110
|
-
var
|
|
1195
|
+
var import_ui14 = require("@elementor/ui");
|
|
1111
1196
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1112
1197
|
|
|
1113
1198
|
// src/components/ui/delete-confirmation-dialog.tsx
|
|
1114
|
-
var
|
|
1199
|
+
var React12 = __toESM(require("react"));
|
|
1115
1200
|
var import_icons5 = require("@elementor/icons");
|
|
1116
|
-
var
|
|
1201
|
+
var import_ui12 = require("@elementor/ui");
|
|
1117
1202
|
var import_i18n8 = require("@wordpress/i18n");
|
|
1118
1203
|
var TITLE_ID = "delete-variable-dialog";
|
|
1119
1204
|
var DeleteConfirmationDialog = ({
|
|
@@ -1122,14 +1207,14 @@ var DeleteConfirmationDialog = ({
|
|
|
1122
1207
|
closeDialog,
|
|
1123
1208
|
onConfirm
|
|
1124
1209
|
}) => {
|
|
1125
|
-
return /* @__PURE__ */
|
|
1210
|
+
return /* @__PURE__ */ React12.createElement(import_ui12.Dialog, { open, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React12.createElement(import_ui12.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React12.createElement(import_icons5.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n8.__)("Delete this variable?", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.DialogContent, null, /* @__PURE__ */ React12.createElement(import_ui12.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n8.__)("All elements using", "elementor"), /* @__PURE__ */ React12.createElement(import_ui12.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n8.__)("will keep their current values, but the variable itself will be removed.", "elementor"))), /* @__PURE__ */ React12.createElement(import_ui12.DialogActions, null, /* @__PURE__ */ React12.createElement(import_ui12.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n8.__)("Not now", "elementor")), /* @__PURE__ */ React12.createElement(import_ui12.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n8.__)("Delete", "elementor"))));
|
|
1126
1211
|
};
|
|
1127
1212
|
|
|
1128
1213
|
// src/components/ui/edit-confirmation-dialog.tsx
|
|
1129
|
-
var
|
|
1130
|
-
var
|
|
1214
|
+
var React13 = __toESM(require("react"));
|
|
1215
|
+
var import_react10 = require("react");
|
|
1131
1216
|
var import_icons6 = require("@elementor/icons");
|
|
1132
|
-
var
|
|
1217
|
+
var import_ui13 = require("@elementor/ui");
|
|
1133
1218
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1134
1219
|
var EDIT_CONFIRMATION_DIALOG_ID = "edit-confirmation-dialog";
|
|
1135
1220
|
var EditConfirmationDialog = ({
|
|
@@ -1137,30 +1222,30 @@ var EditConfirmationDialog = ({
|
|
|
1137
1222
|
onConfirm,
|
|
1138
1223
|
onSuppressMessage
|
|
1139
1224
|
}) => {
|
|
1140
|
-
const [dontShowAgain, setDontShowAgain] = (0,
|
|
1225
|
+
const [dontShowAgain, setDontShowAgain] = (0, import_react10.useState)(false);
|
|
1141
1226
|
const handleSave = () => {
|
|
1142
1227
|
if (dontShowAgain) {
|
|
1143
1228
|
onSuppressMessage?.();
|
|
1144
1229
|
}
|
|
1145
1230
|
onConfirm?.();
|
|
1146
1231
|
};
|
|
1147
|
-
return /* @__PURE__ */
|
|
1232
|
+
return /* @__PURE__ */ React13.createElement(import_ui13.Dialog, { open: true, onClose: closeDialog, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(import_ui13.DialogTitle, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React13.createElement(import_icons6.AlertTriangleFilledIcon, { color: "secondary" }), (0, import_i18n9.__)("Changes to variables go live right away.", "elementor")), /* @__PURE__ */ React13.createElement(import_ui13.DialogContent, null, /* @__PURE__ */ React13.createElement(import_ui13.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n9.__)(
|
|
1148
1233
|
"Don't worry - all other changes you make will wait until you publish your site.",
|
|
1149
1234
|
"elementor"
|
|
1150
|
-
))), /* @__PURE__ */
|
|
1151
|
-
|
|
1235
|
+
))), /* @__PURE__ */ React13.createElement(import_ui13.DialogActions, { sx: { justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React13.createElement(
|
|
1236
|
+
import_ui13.FormControlLabel,
|
|
1152
1237
|
{
|
|
1153
|
-
control: /* @__PURE__ */
|
|
1154
|
-
|
|
1238
|
+
control: /* @__PURE__ */ React13.createElement(
|
|
1239
|
+
import_ui13.Checkbox,
|
|
1155
1240
|
{
|
|
1156
1241
|
checked: dontShowAgain,
|
|
1157
1242
|
onChange: (event) => setDontShowAgain(event.target.checked),
|
|
1158
1243
|
size: "small"
|
|
1159
1244
|
}
|
|
1160
1245
|
),
|
|
1161
|
-
label: /* @__PURE__ */
|
|
1246
|
+
label: /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "body2" }, (0, import_i18n9.__)("Don't show me again", "elementor"))
|
|
1162
1247
|
}
|
|
1163
|
-
), /* @__PURE__ */
|
|
1248
|
+
), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(import_ui13.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n9.__)("Keep editing", "elementor")), /* @__PURE__ */ React13.createElement(import_ui13.Button, { variant: "contained", color: "secondary", onClick: handleSave, sx: { ml: 1 } }, (0, import_i18n9.__)("Save", "elementor")))));
|
|
1164
1249
|
};
|
|
1165
1250
|
|
|
1166
1251
|
// src/components/variable-edit.tsx
|
|
@@ -1170,19 +1255,19 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
|
|
|
1170
1255
|
const { setValue: notifyBoundPropChange, value: assignedValue } = (0, import_editor_controls4.useBoundProp)(propTypeUtil);
|
|
1171
1256
|
const { propType } = (0, import_editor_controls4.useBoundProp)();
|
|
1172
1257
|
const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user2.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
|
|
1173
|
-
const [deleteConfirmation, setDeleteConfirmation] = (0,
|
|
1174
|
-
const [editConfirmation, setEditConfirmation] = (0,
|
|
1175
|
-
const [errorMessage, setErrorMessage] = (0,
|
|
1176
|
-
const [valueFieldError, setValueFieldError] = (0,
|
|
1258
|
+
const [deleteConfirmation, setDeleteConfirmation] = (0, import_react11.useState)(false);
|
|
1259
|
+
const [editConfirmation, setEditConfirmation] = (0, import_react11.useState)(false);
|
|
1260
|
+
const [errorMessage, setErrorMessage] = (0, import_react11.useState)("");
|
|
1261
|
+
const [valueFieldError, setValueFieldError] = (0, import_react11.useState)("");
|
|
1177
1262
|
const { labelFieldError, setLabelFieldError } = useLabelError();
|
|
1178
1263
|
const variable = useVariable(editId);
|
|
1179
1264
|
if (!variable) {
|
|
1180
1265
|
throw new Error(`Global ${variableType} variable not found`);
|
|
1181
1266
|
}
|
|
1182
1267
|
const userPermissions = usePermissions();
|
|
1183
|
-
const [value, setValue] = (0,
|
|
1184
|
-
const [label, setLabel] = (0,
|
|
1185
|
-
(0,
|
|
1268
|
+
const [value, setValue] = (0, import_react11.useState)(() => variable.value);
|
|
1269
|
+
const [label, setLabel] = (0, import_react11.useState)(() => variable.label);
|
|
1270
|
+
(0, import_react11.useEffect)(() => {
|
|
1186
1271
|
styleVariablesRepository.update({
|
|
1187
1272
|
[editId]: {
|
|
1188
1273
|
...variable,
|
|
@@ -1245,15 +1330,15 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
|
|
|
1245
1330
|
const actions = [];
|
|
1246
1331
|
if (userPermissions.canDelete()) {
|
|
1247
1332
|
actions.push(
|
|
1248
|
-
/* @__PURE__ */
|
|
1249
|
-
|
|
1333
|
+
/* @__PURE__ */ React14.createElement(
|
|
1334
|
+
import_ui14.IconButton,
|
|
1250
1335
|
{
|
|
1251
1336
|
key: "delete",
|
|
1252
1337
|
size: SIZE2,
|
|
1253
1338
|
"aria-label": (0, import_i18n10.__)("Delete", "elementor"),
|
|
1254
1339
|
onClick: handleDeleteConfirmation
|
|
1255
1340
|
},
|
|
1256
|
-
/* @__PURE__ */
|
|
1341
|
+
/* @__PURE__ */ React14.createElement(import_icons7.TrashIcon, { fontSize: SIZE2 })
|
|
1257
1342
|
)
|
|
1258
1343
|
);
|
|
1259
1344
|
}
|
|
@@ -1273,23 +1358,23 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
|
|
|
1273
1358
|
return !!errorMessage;
|
|
1274
1359
|
};
|
|
1275
1360
|
const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
|
|
1276
|
-
return /* @__PURE__ */
|
|
1361
|
+
return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React14.createElement(
|
|
1277
1362
|
import_editor_ui4.PopoverHeader,
|
|
1278
1363
|
{
|
|
1279
1364
|
title: (0, import_i18n10.__)("Edit variable", "elementor"),
|
|
1280
1365
|
onClose,
|
|
1281
|
-
icon: /* @__PURE__ */
|
|
1282
|
-
|
|
1366
|
+
icon: /* @__PURE__ */ React14.createElement(React14.Fragment, null, onGoBack && /* @__PURE__ */ React14.createElement(
|
|
1367
|
+
import_ui14.IconButton,
|
|
1283
1368
|
{
|
|
1284
1369
|
size: SIZE2,
|
|
1285
1370
|
"aria-label": (0, import_i18n10.__)("Go Back", "elementor"),
|
|
1286
1371
|
onClick: onGoBack
|
|
1287
1372
|
},
|
|
1288
|
-
/* @__PURE__ */
|
|
1289
|
-
), /* @__PURE__ */
|
|
1373
|
+
/* @__PURE__ */ React14.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE2 })
|
|
1374
|
+
), /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: SIZE2 })),
|
|
1290
1375
|
actions
|
|
1291
1376
|
}
|
|
1292
|
-
), /* @__PURE__ */
|
|
1377
|
+
), /* @__PURE__ */ React14.createElement(import_ui14.Divider, null), /* @__PURE__ */ React14.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React14.createElement(
|
|
1293
1378
|
LabelField,
|
|
1294
1379
|
{
|
|
1295
1380
|
value: label,
|
|
@@ -1299,7 +1384,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
|
|
|
1299
1384
|
setErrorMessage("");
|
|
1300
1385
|
}
|
|
1301
1386
|
}
|
|
1302
|
-
), /* @__PURE__ */
|
|
1387
|
+
), /* @__PURE__ */ React14.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n10.__)("Value", "elementor") }, /* @__PURE__ */ React14.createElement(
|
|
1303
1388
|
ValueField,
|
|
1304
1389
|
{
|
|
1305
1390
|
value,
|
|
@@ -1311,7 +1396,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
|
|
|
1311
1396
|
onValidationChange: setValueFieldError,
|
|
1312
1397
|
propType
|
|
1313
1398
|
}
|
|
1314
|
-
)), errorMessage && /* @__PURE__ */
|
|
1399
|
+
)), errorMessage && /* @__PURE__ */ React14.createElement(import_ui14.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React14.createElement(import_ui14.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React14.createElement(import_ui14.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleUpdate }, (0, import_i18n10.__)("Save", "elementor")))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
|
|
1315
1400
|
DeleteConfirmationDialog,
|
|
1316
1401
|
{
|
|
1317
1402
|
open: true,
|
|
@@ -1319,7 +1404,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
|
|
|
1319
1404
|
onConfirm: handleDelete,
|
|
1320
1405
|
closeDialog: closeDeleteDialog()
|
|
1321
1406
|
}
|
|
1322
|
-
), editConfirmation && !isMessageSuppressed && /* @__PURE__ */
|
|
1407
|
+
), editConfirmation && !isMessageSuppressed && /* @__PURE__ */ React14.createElement(
|
|
1323
1408
|
EditConfirmationDialog,
|
|
1324
1409
|
{
|
|
1325
1410
|
closeDialog: closeEditDialog(),
|
|
@@ -1330,26 +1415,26 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
|
|
|
1330
1415
|
};
|
|
1331
1416
|
|
|
1332
1417
|
// src/components/variables-selection.tsx
|
|
1333
|
-
var
|
|
1334
|
-
var
|
|
1418
|
+
var React18 = __toESM(require("react"));
|
|
1419
|
+
var import_react12 = require("react");
|
|
1335
1420
|
var import_editor_controls5 = require("@elementor/editor-controls");
|
|
1336
1421
|
var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
|
|
1337
1422
|
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
1338
1423
|
var import_icons9 = require("@elementor/icons");
|
|
1339
|
-
var
|
|
1424
|
+
var import_ui19 = require("@elementor/ui");
|
|
1340
1425
|
var import_i18n14 = require("@wordpress/i18n");
|
|
1341
1426
|
|
|
1342
1427
|
// src/components/ui/menu-item-content.tsx
|
|
1343
|
-
var
|
|
1428
|
+
var React15 = __toESM(require("react"));
|
|
1344
1429
|
var import_editor_ui5 = require("@elementor/editor-ui");
|
|
1345
1430
|
var import_icons8 = require("@elementor/icons");
|
|
1346
|
-
var
|
|
1431
|
+
var import_ui15 = require("@elementor/ui");
|
|
1347
1432
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1348
1433
|
var SIZE3 = "tiny";
|
|
1349
1434
|
var MenuItemContent = ({ item }) => {
|
|
1350
1435
|
const onEdit = item.onEdit;
|
|
1351
|
-
return /* @__PURE__ */
|
|
1352
|
-
|
|
1436
|
+
return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_ui15.ListItemIcon, null, item.icon), /* @__PURE__ */ React15.createElement(
|
|
1437
|
+
import_ui15.Box,
|
|
1353
1438
|
{
|
|
1354
1439
|
sx: {
|
|
1355
1440
|
flex: 1,
|
|
@@ -1359,30 +1444,30 @@ var MenuItemContent = ({ item }) => {
|
|
|
1359
1444
|
gap: 1
|
|
1360
1445
|
}
|
|
1361
1446
|
},
|
|
1362
|
-
/* @__PURE__ */
|
|
1447
|
+
/* @__PURE__ */ React15.createElement(
|
|
1363
1448
|
import_editor_ui5.EllipsisWithTooltip,
|
|
1364
1449
|
{
|
|
1365
1450
|
title: item.label || item.value,
|
|
1366
|
-
as:
|
|
1451
|
+
as: import_ui15.Typography,
|
|
1367
1452
|
variant: "caption",
|
|
1368
1453
|
color: "text.primary",
|
|
1369
1454
|
sx: { marginTop: "1px", lineHeight: "2" },
|
|
1370
1455
|
maxWidth: "50%"
|
|
1371
1456
|
}
|
|
1372
1457
|
),
|
|
1373
|
-
item.secondaryText && /* @__PURE__ */
|
|
1458
|
+
item.secondaryText && /* @__PURE__ */ React15.createElement(
|
|
1374
1459
|
import_editor_ui5.EllipsisWithTooltip,
|
|
1375
1460
|
{
|
|
1376
1461
|
title: item.secondaryText,
|
|
1377
|
-
as:
|
|
1462
|
+
as: import_ui15.Typography,
|
|
1378
1463
|
variant: "caption",
|
|
1379
1464
|
color: "text.tertiary",
|
|
1380
1465
|
sx: { marginTop: "1px", lineHeight: "1" },
|
|
1381
1466
|
maxWidth: "50%"
|
|
1382
1467
|
}
|
|
1383
1468
|
)
|
|
1384
|
-
), !!onEdit && /* @__PURE__ */
|
|
1385
|
-
|
|
1469
|
+
), !!onEdit && /* @__PURE__ */ React15.createElement(
|
|
1470
|
+
import_ui15.IconButton,
|
|
1386
1471
|
{
|
|
1387
1472
|
sx: { mx: 1, opacity: "0" },
|
|
1388
1473
|
onClick: (e) => {
|
|
@@ -1391,17 +1476,17 @@ var MenuItemContent = ({ item }) => {
|
|
|
1391
1476
|
},
|
|
1392
1477
|
"aria-label": (0, import_i18n11.__)("Edit", "elementor")
|
|
1393
1478
|
},
|
|
1394
|
-
/* @__PURE__ */
|
|
1479
|
+
/* @__PURE__ */ React15.createElement(import_icons8.EditIcon, { color: "action", fontSize: SIZE3 })
|
|
1395
1480
|
));
|
|
1396
1481
|
};
|
|
1397
1482
|
|
|
1398
1483
|
// src/components/ui/no-search-results.tsx
|
|
1399
|
-
var
|
|
1400
|
-
var
|
|
1484
|
+
var React16 = __toESM(require("react"));
|
|
1485
|
+
var import_ui16 = require("@elementor/ui");
|
|
1401
1486
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1402
1487
|
var NoSearchResults = ({ searchValue, onClear, icon }) => {
|
|
1403
|
-
return /* @__PURE__ */
|
|
1404
|
-
|
|
1488
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1489
|
+
import_ui16.Stack,
|
|
1405
1490
|
{
|
|
1406
1491
|
gap: 1,
|
|
1407
1492
|
alignItems: "center",
|
|
@@ -1412,19 +1497,19 @@ var NoSearchResults = ({ searchValue, onClear, icon }) => {
|
|
|
1412
1497
|
sx: { pb: 3.5 }
|
|
1413
1498
|
},
|
|
1414
1499
|
icon,
|
|
1415
|
-
/* @__PURE__ */
|
|
1416
|
-
/* @__PURE__ */
|
|
1500
|
+
/* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n12.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React16.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
1501
|
+
/* @__PURE__ */ React16.createElement(import_ui16.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n12.__)("Try something else.", "elementor"), /* @__PURE__ */ React16.createElement(import_ui16.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n12.__)("Clear & try again", "elementor")))
|
|
1417
1502
|
);
|
|
1418
1503
|
};
|
|
1419
1504
|
|
|
1420
1505
|
// src/components/ui/no-variables.tsx
|
|
1421
|
-
var
|
|
1422
|
-
var
|
|
1506
|
+
var React17 = __toESM(require("react"));
|
|
1507
|
+
var import_ui17 = require("@elementor/ui");
|
|
1423
1508
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1424
1509
|
var NoVariables = ({ icon, title, onAdd }) => {
|
|
1425
1510
|
const canAdd = usePermissions().canAdd();
|
|
1426
|
-
return /* @__PURE__ */
|
|
1427
|
-
|
|
1511
|
+
return /* @__PURE__ */ React17.createElement(
|
|
1512
|
+
import_ui17.Stack,
|
|
1428
1513
|
{
|
|
1429
1514
|
gap: 1,
|
|
1430
1515
|
alignItems: "center",
|
|
@@ -1434,7 +1519,7 @@ var NoVariables = ({ icon, title, onAdd }) => {
|
|
|
1434
1519
|
sx: { p: 2.5, pb: 5.5 }
|
|
1435
1520
|
},
|
|
1436
1521
|
icon,
|
|
1437
|
-
canAdd ? /* @__PURE__ */
|
|
1522
|
+
canAdd ? /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
|
|
1438
1523
|
NoVariablesContent,
|
|
1439
1524
|
{
|
|
1440
1525
|
title: title || (0, import_i18n13.__)("Create your first variable", "elementor"),
|
|
@@ -1443,7 +1528,7 @@ var NoVariables = ({ icon, title, onAdd }) => {
|
|
|
1443
1528
|
"elementor"
|
|
1444
1529
|
)
|
|
1445
1530
|
}
|
|
1446
|
-
), onAdd && /* @__PURE__ */
|
|
1531
|
+
), onAdd && /* @__PURE__ */ React17.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, (0, import_i18n13.__)("Create a variable", "elementor"))) : /* @__PURE__ */ React17.createElement(
|
|
1447
1532
|
NoVariablesContent,
|
|
1448
1533
|
{
|
|
1449
1534
|
title: (0, import_i18n13.__)("There are no variables", "elementor"),
|
|
@@ -1453,12 +1538,12 @@ var NoVariables = ({ icon, title, onAdd }) => {
|
|
|
1453
1538
|
);
|
|
1454
1539
|
};
|
|
1455
1540
|
function NoVariablesContent({ title, message }) {
|
|
1456
|
-
return /* @__PURE__ */
|
|
1541
|
+
return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React17.createElement(import_ui17.Typography, { align: "center", variant: "caption", maxWidth: "180px" }, message));
|
|
1457
1542
|
}
|
|
1458
1543
|
|
|
1459
1544
|
// src/components/ui/styled-menu-list.tsx
|
|
1460
|
-
var
|
|
1461
|
-
var VariablesStyledMenuList = (0,
|
|
1545
|
+
var import_ui18 = require("@elementor/ui");
|
|
1546
|
+
var VariablesStyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) => ({
|
|
1462
1547
|
"& > li": {
|
|
1463
1548
|
height: 32,
|
|
1464
1549
|
width: "100%",
|
|
@@ -1493,7 +1578,7 @@ var SIZE4 = "tiny";
|
|
|
1493
1578
|
var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
|
|
1494
1579
|
const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
|
|
1495
1580
|
const { value: variable, setValue: setVariable, path } = (0, import_editor_controls5.useBoundProp)(propTypeUtil);
|
|
1496
|
-
const [searchValue, setSearchValue] = (0,
|
|
1581
|
+
const [searchValue, setSearchValue] = (0, import_react12.useState)("");
|
|
1497
1582
|
const {
|
|
1498
1583
|
list: variables,
|
|
1499
1584
|
hasMatches: hasSearchResults,
|
|
@@ -1519,20 +1604,20 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
|
|
|
1519
1604
|
const actions = [];
|
|
1520
1605
|
if (onAdd) {
|
|
1521
1606
|
actions.push(
|
|
1522
|
-
/* @__PURE__ */
|
|
1607
|
+
/* @__PURE__ */ React18.createElement(import_ui19.IconButton, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React18.createElement(import_icons9.PlusIcon, { fontSize: SIZE4 }))
|
|
1523
1608
|
);
|
|
1524
1609
|
}
|
|
1525
1610
|
if (onSettings) {
|
|
1526
1611
|
actions.push(
|
|
1527
|
-
/* @__PURE__ */
|
|
1612
|
+
/* @__PURE__ */ React18.createElement(import_ui19.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React18.createElement(import_icons9.SettingsIcon, { fontSize: SIZE4 }))
|
|
1528
1613
|
);
|
|
1529
1614
|
}
|
|
1530
|
-
const StartIcon = startIcon || (() => /* @__PURE__ */
|
|
1615
|
+
const StartIcon = startIcon || (() => /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE4 }));
|
|
1531
1616
|
const items = variables.map(({ value, label, key }) => ({
|
|
1532
1617
|
type: "item",
|
|
1533
1618
|
value: key,
|
|
1534
1619
|
label,
|
|
1535
|
-
icon: /* @__PURE__ */
|
|
1620
|
+
icon: /* @__PURE__ */ React18.createElement(StartIcon, { value }),
|
|
1536
1621
|
secondaryText: value,
|
|
1537
1622
|
onEdit: onEdit ? () => onEdit?.(key) : void 0
|
|
1538
1623
|
}));
|
|
@@ -1547,22 +1632,22 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
|
|
|
1547
1632
|
(0, import_i18n14.__)("Create your first %s variable", "elementor"),
|
|
1548
1633
|
variableType
|
|
1549
1634
|
);
|
|
1550
|
-
return /* @__PURE__ */
|
|
1635
|
+
return /* @__PURE__ */ React18.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React18.createElement(
|
|
1551
1636
|
import_editor_ui6.PopoverHeader,
|
|
1552
1637
|
{
|
|
1553
1638
|
title: (0, import_i18n14.__)("Variables", "elementor"),
|
|
1554
|
-
icon: /* @__PURE__ */
|
|
1639
|
+
icon: /* @__PURE__ */ React18.createElement(import_icons9.ColorFilterIcon, { fontSize: SIZE4 }),
|
|
1555
1640
|
onClose: closePopover,
|
|
1556
1641
|
actions
|
|
1557
1642
|
}
|
|
1558
|
-
), hasVariables && /* @__PURE__ */
|
|
1643
|
+
), hasVariables && /* @__PURE__ */ React18.createElement(
|
|
1559
1644
|
import_editor_ui6.PopoverSearch,
|
|
1560
1645
|
{
|
|
1561
1646
|
value: searchValue,
|
|
1562
1647
|
onSearch: handleSearch,
|
|
1563
1648
|
placeholder: (0, import_i18n14.__)("Search", "elementor")
|
|
1564
1649
|
}
|
|
1565
|
-
), /* @__PURE__ */
|
|
1650
|
+
), /* @__PURE__ */ React18.createElement(import_ui19.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React18.createElement(
|
|
1566
1651
|
import_editor_ui6.PopoverMenuList,
|
|
1567
1652
|
{
|
|
1568
1653
|
items,
|
|
@@ -1572,16 +1657,16 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
|
|
|
1572
1657
|
selectedValue: variable,
|
|
1573
1658
|
"data-testid": `${variableType}-variables-list`,
|
|
1574
1659
|
menuListTemplate: VariablesStyledMenuList,
|
|
1575
|
-
menuItemContentTemplate: (item) => /* @__PURE__ */
|
|
1660
|
+
menuItemContentTemplate: (item) => /* @__PURE__ */ React18.createElement(MenuItemContent, { item })
|
|
1576
1661
|
}
|
|
1577
|
-
), !hasSearchResults && hasVariables && /* @__PURE__ */
|
|
1662
|
+
), !hasSearchResults && hasVariables && /* @__PURE__ */ React18.createElement(
|
|
1578
1663
|
NoSearchResults,
|
|
1579
1664
|
{
|
|
1580
1665
|
searchValue,
|
|
1581
1666
|
onClear: handleClearSearch,
|
|
1582
|
-
icon: /* @__PURE__ */
|
|
1667
|
+
icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" })
|
|
1583
1668
|
}
|
|
1584
|
-
), !hasVariables && /* @__PURE__ */
|
|
1669
|
+
), !hasVariables && /* @__PURE__ */ React18.createElement(NoVariables, { title: noVariableTitle, icon: /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: "large" }), onAdd }));
|
|
1585
1670
|
};
|
|
1586
1671
|
|
|
1587
1672
|
// src/components/variable-selection-popover.tsx
|
|
@@ -1589,13 +1674,13 @@ var VIEW_LIST = "list";
|
|
|
1589
1674
|
var VIEW_ADD = "add";
|
|
1590
1675
|
var VIEW_EDIT = "edit";
|
|
1591
1676
|
var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
|
|
1592
|
-
const [currentView, setCurrentView] = (0,
|
|
1593
|
-
const [editId, setEditId] = (0,
|
|
1677
|
+
const [currentView, setCurrentView] = (0, import_react13.useState)(VIEW_LIST);
|
|
1678
|
+
const [editId, setEditId] = (0, import_react13.useState)("");
|
|
1594
1679
|
const { open } = usePanelActions();
|
|
1595
1680
|
const onSettingsAvailable = (0, import_editor_v1_adapters2.isExperimentActive)("e_variables_manager") ? () => {
|
|
1596
1681
|
open();
|
|
1597
1682
|
} : void 0;
|
|
1598
|
-
return /* @__PURE__ */
|
|
1683
|
+
return /* @__PURE__ */ React19.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React19.createElement(PopoverContentRefContextProvider, null, RenderView({
|
|
1599
1684
|
propTypeKey,
|
|
1600
1685
|
currentView,
|
|
1601
1686
|
selectedVariable,
|
|
@@ -1641,7 +1726,7 @@ function RenderView(props) {
|
|
|
1641
1726
|
}
|
|
1642
1727
|
};
|
|
1643
1728
|
if (VIEW_LIST === props.currentView) {
|
|
1644
|
-
return /* @__PURE__ */
|
|
1729
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1645
1730
|
VariablesSelection,
|
|
1646
1731
|
{
|
|
1647
1732
|
closePopover: handlers.onClose,
|
|
@@ -1652,10 +1737,10 @@ function RenderView(props) {
|
|
|
1652
1737
|
);
|
|
1653
1738
|
}
|
|
1654
1739
|
if (VIEW_ADD === props.currentView) {
|
|
1655
|
-
return /* @__PURE__ */
|
|
1740
|
+
return /* @__PURE__ */ React19.createElement(VariableCreation, { onGoBack: handlers.onGoBack, onClose: handlers.onClose });
|
|
1656
1741
|
}
|
|
1657
1742
|
if (VIEW_EDIT === props.currentView) {
|
|
1658
|
-
return /* @__PURE__ */
|
|
1743
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1659
1744
|
VariableEdit,
|
|
1660
1745
|
{
|
|
1661
1746
|
editId: props.editId,
|
|
@@ -1669,25 +1754,25 @@ function RenderView(props) {
|
|
|
1669
1754
|
}
|
|
1670
1755
|
|
|
1671
1756
|
// src/components/ui/tags/assigned-tag.tsx
|
|
1672
|
-
var
|
|
1757
|
+
var React20 = __toESM(require("react"));
|
|
1673
1758
|
var import_icons10 = require("@elementor/icons");
|
|
1674
|
-
var
|
|
1759
|
+
var import_ui20 = require("@elementor/ui");
|
|
1675
1760
|
var import_i18n15 = require("@wordpress/i18n");
|
|
1676
1761
|
var SIZE5 = "tiny";
|
|
1677
1762
|
var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
|
|
1678
1763
|
const actions = [];
|
|
1679
1764
|
if (onUnlink) {
|
|
1680
1765
|
actions.push(
|
|
1681
|
-
/* @__PURE__ */
|
|
1766
|
+
/* @__PURE__ */ React20.createElement(import_ui20.IconButton, { key: "unlink", size: SIZE5, onClick: onUnlink, "aria-label": (0, import_i18n15.__)("Unlink", "elementor") }, /* @__PURE__ */ React20.createElement(import_icons10.DetachIcon, { fontSize: SIZE5 }))
|
|
1682
1767
|
);
|
|
1683
1768
|
}
|
|
1684
|
-
return /* @__PURE__ */
|
|
1685
|
-
|
|
1769
|
+
return /* @__PURE__ */ React20.createElement(import_ui20.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React20.createElement(
|
|
1770
|
+
import_ui20.UnstableTag,
|
|
1686
1771
|
{
|
|
1687
1772
|
fullWidth: true,
|
|
1688
1773
|
showActionsOnHover: true,
|
|
1689
|
-
startIcon: /* @__PURE__ */
|
|
1690
|
-
label: /* @__PURE__ */
|
|
1774
|
+
startIcon: /* @__PURE__ */ React20.createElement(import_ui20.Stack, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
|
|
1775
|
+
label: /* @__PURE__ */ React20.createElement(import_ui20.Box, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React20.createElement(import_ui20.Typography, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
|
|
1691
1776
|
actions,
|
|
1692
1777
|
...props
|
|
1693
1778
|
}
|
|
@@ -1698,24 +1783,24 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
|
|
|
1698
1783
|
var AssignedVariable = ({ variable, propTypeKey }) => {
|
|
1699
1784
|
const { startIcon, propTypeUtil } = getVariableType(propTypeKey);
|
|
1700
1785
|
const { setValue } = (0, import_editor_controls6.useBoundProp)();
|
|
1701
|
-
const anchorRef = (0,
|
|
1702
|
-
const popupId = (0,
|
|
1703
|
-
const popupState = (0,
|
|
1786
|
+
const anchorRef = (0, import_react14.useRef)(null);
|
|
1787
|
+
const popupId = (0, import_react14.useId)();
|
|
1788
|
+
const popupState = (0, import_ui21.usePopupState)({
|
|
1704
1789
|
variant: "popover",
|
|
1705
1790
|
popupId: `elementor-variables-list-${popupId}`
|
|
1706
1791
|
});
|
|
1707
1792
|
const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
|
|
1708
1793
|
const StartIcon = startIcon || (() => null);
|
|
1709
|
-
return /* @__PURE__ */
|
|
1794
|
+
return /* @__PURE__ */ React21.createElement(import_ui21.Box, { ref: anchorRef }, /* @__PURE__ */ React21.createElement(
|
|
1710
1795
|
AssignedTag,
|
|
1711
1796
|
{
|
|
1712
1797
|
label: variable.label,
|
|
1713
|
-
startIcon: /* @__PURE__ */
|
|
1798
|
+
startIcon: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE5 }), /* @__PURE__ */ React21.createElement(StartIcon, { value: variable.value })),
|
|
1714
1799
|
onUnlink: unlinkVariable,
|
|
1715
|
-
...(0,
|
|
1800
|
+
...(0, import_ui21.bindTrigger)(popupState)
|
|
1716
1801
|
}
|
|
1717
|
-
), /* @__PURE__ */
|
|
1718
|
-
|
|
1802
|
+
), /* @__PURE__ */ React21.createElement(
|
|
1803
|
+
import_ui21.Popover,
|
|
1719
1804
|
{
|
|
1720
1805
|
disableScrollLock: true,
|
|
1721
1806
|
anchorEl: anchorRef.current,
|
|
@@ -1724,9 +1809,9 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
|
|
|
1724
1809
|
PaperProps: {
|
|
1725
1810
|
sx: { my: 1 }
|
|
1726
1811
|
},
|
|
1727
|
-
...(0,
|
|
1812
|
+
...(0, import_ui21.bindPopover)(popupState)
|
|
1728
1813
|
},
|
|
1729
|
-
/* @__PURE__ */
|
|
1814
|
+
/* @__PURE__ */ React21.createElement(
|
|
1730
1815
|
VariableSelectionPopover,
|
|
1731
1816
|
{
|
|
1732
1817
|
selectedVariable: variable,
|
|
@@ -1738,18 +1823,18 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
|
|
|
1738
1823
|
};
|
|
1739
1824
|
|
|
1740
1825
|
// src/components/ui/variable/deleted-variable.tsx
|
|
1741
|
-
var
|
|
1742
|
-
var
|
|
1826
|
+
var React25 = __toESM(require("react"));
|
|
1827
|
+
var import_react16 = require("react");
|
|
1743
1828
|
var import_editor_controls8 = require("@elementor/editor-controls");
|
|
1744
|
-
var
|
|
1829
|
+
var import_ui25 = require("@elementor/ui");
|
|
1745
1830
|
|
|
1746
1831
|
// src/components/variable-restore.tsx
|
|
1747
|
-
var
|
|
1748
|
-
var
|
|
1832
|
+
var React22 = __toESM(require("react"));
|
|
1833
|
+
var import_react15 = require("react");
|
|
1749
1834
|
var import_editor_controls7 = require("@elementor/editor-controls");
|
|
1750
1835
|
var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
|
|
1751
1836
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
1752
|
-
var
|
|
1837
|
+
var import_ui22 = require("@elementor/ui");
|
|
1753
1838
|
var import_i18n16 = require("@wordpress/i18n");
|
|
1754
1839
|
var SIZE6 = "tiny";
|
|
1755
1840
|
var VariableRestore = ({ variableId, onClose, onSubmit }) => {
|
|
@@ -1760,10 +1845,10 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
|
|
|
1760
1845
|
if (!variable) {
|
|
1761
1846
|
throw new Error(`Global ${variableType} variable not found`);
|
|
1762
1847
|
}
|
|
1763
|
-
const [errorMessage, setErrorMessage] = (0,
|
|
1764
|
-
const [valueFieldError, setValueFieldError] = (0,
|
|
1765
|
-
const [label, setLabel] = (0,
|
|
1766
|
-
const [value, setValue] = (0,
|
|
1848
|
+
const [errorMessage, setErrorMessage] = (0, import_react15.useState)("");
|
|
1849
|
+
const [valueFieldError, setValueFieldError] = (0, import_react15.useState)("");
|
|
1850
|
+
const [label, setLabel] = (0, import_react15.useState)(variable.label);
|
|
1851
|
+
const [value, setValue] = (0, import_react15.useState)(variable.value);
|
|
1767
1852
|
const { labelFieldError, setLabelFieldError } = useLabelError({
|
|
1768
1853
|
value: variable.label,
|
|
1769
1854
|
message: ERROR_MESSAGES.DUPLICATED_LABEL
|
|
@@ -1801,14 +1886,14 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
|
|
|
1801
1886
|
return !!errorMessage;
|
|
1802
1887
|
};
|
|
1803
1888
|
const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
|
|
1804
|
-
return /* @__PURE__ */
|
|
1889
|
+
return /* @__PURE__ */ React22.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React22.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React22.createElement(
|
|
1805
1890
|
import_editor_ui7.PopoverHeader,
|
|
1806
1891
|
{
|
|
1807
|
-
icon: /* @__PURE__ */
|
|
1892
|
+
icon: /* @__PURE__ */ React22.createElement(VariableIcon, { fontSize: SIZE6 }),
|
|
1808
1893
|
title: (0, import_i18n16.__)("Restore variable", "elementor"),
|
|
1809
1894
|
onClose
|
|
1810
1895
|
}
|
|
1811
|
-
), /* @__PURE__ */
|
|
1896
|
+
), /* @__PURE__ */ React22.createElement(import_ui22.Divider, null), /* @__PURE__ */ React22.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React22.createElement(
|
|
1812
1897
|
LabelField,
|
|
1813
1898
|
{
|
|
1814
1899
|
value: label,
|
|
@@ -1818,7 +1903,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
|
|
|
1818
1903
|
setErrorMessage("");
|
|
1819
1904
|
}
|
|
1820
1905
|
}
|
|
1821
|
-
), /* @__PURE__ */
|
|
1906
|
+
), /* @__PURE__ */ React22.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n16.__)("Value", "elementor") }, /* @__PURE__ */ React22.createElement(
|
|
1822
1907
|
ValueField,
|
|
1823
1908
|
{
|
|
1824
1909
|
value,
|
|
@@ -1830,26 +1915,26 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
|
|
|
1830
1915
|
onValidationChange: setValueFieldError,
|
|
1831
1916
|
propType
|
|
1832
1917
|
}
|
|
1833
|
-
)), errorMessage && /* @__PURE__ */
|
|
1918
|
+
)), errorMessage && /* @__PURE__ */ React22.createElement(import_ui22.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React22.createElement(import_ui22.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React22.createElement(import_ui22.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n16.__)("Restore", "elementor")))));
|
|
1834
1919
|
};
|
|
1835
1920
|
|
|
1836
1921
|
// src/components/ui/deleted-variable-alert.tsx
|
|
1837
|
-
var
|
|
1922
|
+
var React23 = __toESM(require("react"));
|
|
1838
1923
|
var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
|
|
1839
|
-
var
|
|
1924
|
+
var import_ui23 = require("@elementor/ui");
|
|
1840
1925
|
var import_i18n17 = require("@wordpress/i18n");
|
|
1841
1926
|
var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
|
|
1842
1927
|
const sectionWidth = (0, import_editor_editing_panel6.useSectionWidth)();
|
|
1843
|
-
return /* @__PURE__ */
|
|
1844
|
-
|
|
1928
|
+
return /* @__PURE__ */ React23.createElement(import_ui23.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React23.createElement(
|
|
1929
|
+
import_ui23.Alert,
|
|
1845
1930
|
{
|
|
1846
1931
|
variant: "standard",
|
|
1847
1932
|
severity: "warning",
|
|
1848
1933
|
onClose,
|
|
1849
|
-
action: /* @__PURE__ */
|
|
1934
|
+
action: /* @__PURE__ */ React23.createElement(React23.Fragment, null, onUnlink && /* @__PURE__ */ React23.createElement(import_ui23.AlertAction, { variant: "contained", onClick: onUnlink }, (0, import_i18n17.__)("Unlink", "elementor")), onRestore && /* @__PURE__ */ React23.createElement(import_ui23.AlertAction, { variant: "outlined", onClick: onRestore }, (0, import_i18n17.__)("Restore", "elementor"))),
|
|
1850
1935
|
sx: { width: sectionWidth }
|
|
1851
1936
|
},
|
|
1852
|
-
/* @__PURE__ */
|
|
1937
|
+
/* @__PURE__ */ React23.createElement(import_ui23.AlertTitle, null, (0, import_i18n17.__)("Deleted variable", "elementor")),
|
|
1853
1938
|
(0, import_i18n17.__)("The variable", "elementor"),
|
|
1854
1939
|
" '",
|
|
1855
1940
|
label,
|
|
@@ -1863,13 +1948,13 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
|
|
|
1863
1948
|
};
|
|
1864
1949
|
|
|
1865
1950
|
// src/components/ui/tags/deleted-tag.tsx
|
|
1866
|
-
var
|
|
1951
|
+
var React24 = __toESM(require("react"));
|
|
1867
1952
|
var import_icons12 = require("@elementor/icons");
|
|
1868
|
-
var
|
|
1953
|
+
var import_ui24 = require("@elementor/ui");
|
|
1869
1954
|
var import_i18n18 = require("@wordpress/i18n");
|
|
1870
|
-
var DeletedTag =
|
|
1871
|
-
return /* @__PURE__ */
|
|
1872
|
-
|
|
1955
|
+
var DeletedTag = React24.forwardRef(({ label, onClick, ...props }, ref) => {
|
|
1956
|
+
return /* @__PURE__ */ React24.createElement(
|
|
1957
|
+
import_ui24.Chip,
|
|
1873
1958
|
{
|
|
1874
1959
|
ref,
|
|
1875
1960
|
size: "tiny",
|
|
@@ -1877,8 +1962,8 @@ var DeletedTag = React23.forwardRef(({ label, onClick, ...props }, ref) => {
|
|
|
1877
1962
|
shape: "rounded",
|
|
1878
1963
|
variant: "standard",
|
|
1879
1964
|
onClick,
|
|
1880
|
-
icon: /* @__PURE__ */
|
|
1881
|
-
label: /* @__PURE__ */
|
|
1965
|
+
icon: /* @__PURE__ */ React24.createElement(import_icons12.AlertTriangleFilledIcon, null),
|
|
1966
|
+
label: /* @__PURE__ */ React24.createElement(import_ui24.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React24.createElement(import_ui24.Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" } }, /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true }, label), /* @__PURE__ */ React24.createElement(import_ui24.Typography, { variant: "caption", noWrap: true, sx: { textOverflow: "initial", overflow: "visible" } }, "(", (0, import_i18n18.__)("deleted", "elementor"), ")"))),
|
|
1882
1967
|
sx: {
|
|
1883
1968
|
height: (theme) => theme.spacing(3.5),
|
|
1884
1969
|
borderRadius: (theme) => theme.spacing(1),
|
|
@@ -1895,12 +1980,12 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
|
|
|
1895
1980
|
const { propTypeUtil } = getVariableType(propTypeKey);
|
|
1896
1981
|
const { setValue } = (0, import_editor_controls8.useBoundProp)();
|
|
1897
1982
|
const userPermissions = usePermissions();
|
|
1898
|
-
const [showInfotip, setShowInfotip] = (0,
|
|
1983
|
+
const [showInfotip, setShowInfotip] = (0, import_react16.useState)(false);
|
|
1899
1984
|
const toggleInfotip = () => setShowInfotip((prev) => !prev);
|
|
1900
1985
|
const closeInfotip = () => setShowInfotip(false);
|
|
1901
|
-
const deletedChipAnchorRef = (0,
|
|
1902
|
-
const popupId = (0,
|
|
1903
|
-
const popupState = (0,
|
|
1986
|
+
const deletedChipAnchorRef = (0, import_react16.useRef)(null);
|
|
1987
|
+
const popupId = (0, import_react16.useId)();
|
|
1988
|
+
const popupState = (0, import_ui25.usePopupState)({
|
|
1904
1989
|
variant: "popover",
|
|
1905
1990
|
popupId: `elementor-variables-restore-${popupId}`
|
|
1906
1991
|
});
|
|
@@ -1926,15 +2011,15 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
|
|
|
1926
2011
|
const handleRestoreWithOverrides = () => {
|
|
1927
2012
|
popupState.close();
|
|
1928
2013
|
};
|
|
1929
|
-
return /* @__PURE__ */
|
|
1930
|
-
|
|
2014
|
+
return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_ui25.Box, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React25.createElement(import_ui25.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React25.createElement(
|
|
2015
|
+
import_ui25.Infotip,
|
|
1931
2016
|
{
|
|
1932
2017
|
color: "warning",
|
|
1933
2018
|
placement: "right-start",
|
|
1934
2019
|
open: showInfotip,
|
|
1935
2020
|
disableHoverListener: true,
|
|
1936
2021
|
onClose: closeInfotip,
|
|
1937
|
-
content: /* @__PURE__ */
|
|
2022
|
+
content: /* @__PURE__ */ React25.createElement(
|
|
1938
2023
|
DeletedVariableAlert,
|
|
1939
2024
|
{
|
|
1940
2025
|
onClose: closeInfotip,
|
|
@@ -1954,9 +2039,9 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
|
|
|
1954
2039
|
}
|
|
1955
2040
|
}
|
|
1956
2041
|
},
|
|
1957
|
-
/* @__PURE__ */
|
|
1958
|
-
), /* @__PURE__ */
|
|
1959
|
-
|
|
2042
|
+
/* @__PURE__ */ React25.createElement(DeletedTag, { label: variable.label, onClick: toggleInfotip })
|
|
2043
|
+
), /* @__PURE__ */ React25.createElement(
|
|
2044
|
+
import_ui25.Popover,
|
|
1960
2045
|
{
|
|
1961
2046
|
disableScrollLock: true,
|
|
1962
2047
|
anchorOrigin: { vertical: "bottom", horizontal: "right" },
|
|
@@ -1964,9 +2049,9 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
|
|
|
1964
2049
|
PaperProps: {
|
|
1965
2050
|
sx: { my: 1 }
|
|
1966
2051
|
},
|
|
1967
|
-
...(0,
|
|
2052
|
+
...(0, import_ui25.bindPopover)(popupState)
|
|
1968
2053
|
},
|
|
1969
|
-
/* @__PURE__ */
|
|
2054
|
+
/* @__PURE__ */ React25.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React25.createElement(
|
|
1970
2055
|
VariableRestore,
|
|
1971
2056
|
{
|
|
1972
2057
|
variableId: variable.key ?? "",
|
|
@@ -1978,29 +2063,29 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
|
|
|
1978
2063
|
};
|
|
1979
2064
|
|
|
1980
2065
|
// src/components/ui/variable/missing-variable.tsx
|
|
1981
|
-
var
|
|
1982
|
-
var
|
|
2066
|
+
var React28 = __toESM(require("react"));
|
|
2067
|
+
var import_react17 = require("react");
|
|
1983
2068
|
var import_editor_controls9 = require("@elementor/editor-controls");
|
|
1984
|
-
var
|
|
2069
|
+
var import_ui28 = require("@elementor/ui");
|
|
1985
2070
|
var import_i18n20 = require("@wordpress/i18n");
|
|
1986
2071
|
|
|
1987
2072
|
// src/components/ui/missing-variable-alert.tsx
|
|
1988
|
-
var
|
|
2073
|
+
var React26 = __toESM(require("react"));
|
|
1989
2074
|
var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
|
|
1990
|
-
var
|
|
2075
|
+
var import_ui26 = require("@elementor/ui");
|
|
1991
2076
|
var import_i18n19 = require("@wordpress/i18n");
|
|
1992
2077
|
var MissingVariableAlert = ({ onClose, onClear }) => {
|
|
1993
2078
|
const sectionWidth = (0, import_editor_editing_panel7.useSectionWidth)();
|
|
1994
|
-
return /* @__PURE__ */
|
|
1995
|
-
|
|
2079
|
+
return /* @__PURE__ */ React26.createElement(import_ui26.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React26.createElement(
|
|
2080
|
+
import_ui26.Alert,
|
|
1996
2081
|
{
|
|
1997
2082
|
variant: "standard",
|
|
1998
2083
|
severity: "warning",
|
|
1999
2084
|
onClose,
|
|
2000
|
-
action: /* @__PURE__ */
|
|
2085
|
+
action: /* @__PURE__ */ React26.createElement(React26.Fragment, null, onClear && /* @__PURE__ */ React26.createElement(import_ui26.AlertAction, { variant: "contained", onClick: onClear }, (0, import_i18n19.__)("Clear", "elementor"))),
|
|
2001
2086
|
sx: { width: sectionWidth }
|
|
2002
2087
|
},
|
|
2003
|
-
/* @__PURE__ */
|
|
2088
|
+
/* @__PURE__ */ React26.createElement(import_ui26.AlertTitle, null, (0, import_i18n19.__)("This variable is missing", "elementor")),
|
|
2004
2089
|
(0, import_i18n19.__)(
|
|
2005
2090
|
"It may have been deleted. Try clearing this field and select a different value or variable.",
|
|
2006
2091
|
"elementor"
|
|
@@ -2009,12 +2094,12 @@ var MissingVariableAlert = ({ onClose, onClear }) => {
|
|
|
2009
2094
|
};
|
|
2010
2095
|
|
|
2011
2096
|
// src/components/ui/tags/missing-tag.tsx
|
|
2012
|
-
var
|
|
2097
|
+
var React27 = __toESM(require("react"));
|
|
2013
2098
|
var import_icons13 = require("@elementor/icons");
|
|
2014
|
-
var
|
|
2015
|
-
var MissingTag =
|
|
2016
|
-
return /* @__PURE__ */
|
|
2017
|
-
|
|
2099
|
+
var import_ui27 = require("@elementor/ui");
|
|
2100
|
+
var MissingTag = React27.forwardRef(({ label, onClick, ...props }, ref) => {
|
|
2101
|
+
return /* @__PURE__ */ React27.createElement(
|
|
2102
|
+
import_ui27.Chip,
|
|
2018
2103
|
{
|
|
2019
2104
|
ref,
|
|
2020
2105
|
size: "tiny",
|
|
@@ -2022,7 +2107,7 @@ var MissingTag = React26.forwardRef(({ label, onClick, ...props }, ref) => {
|
|
|
2022
2107
|
shape: "rounded",
|
|
2023
2108
|
variant: "standard",
|
|
2024
2109
|
onClick,
|
|
2025
|
-
icon: /* @__PURE__ */
|
|
2110
|
+
icon: /* @__PURE__ */ React27.createElement(import_icons13.AlertTriangleFilledIcon, null),
|
|
2026
2111
|
label,
|
|
2027
2112
|
sx: {
|
|
2028
2113
|
height: (theme) => theme.spacing(3.5),
|
|
@@ -2038,19 +2123,19 @@ var MissingTag = React26.forwardRef(({ label, onClick, ...props }, ref) => {
|
|
|
2038
2123
|
// src/components/ui/variable/missing-variable.tsx
|
|
2039
2124
|
var MissingVariable = () => {
|
|
2040
2125
|
const { setValue } = (0, import_editor_controls9.useBoundProp)();
|
|
2041
|
-
const [infotipVisible, setInfotipVisible] = (0,
|
|
2126
|
+
const [infotipVisible, setInfotipVisible] = (0, import_react17.useState)(false);
|
|
2042
2127
|
const toggleInfotip = () => setInfotipVisible((prev) => !prev);
|
|
2043
2128
|
const closeInfotip = () => setInfotipVisible(false);
|
|
2044
2129
|
const clearValue = () => setValue(null);
|
|
2045
|
-
return /* @__PURE__ */
|
|
2046
|
-
|
|
2130
|
+
return /* @__PURE__ */ React28.createElement(React28.Fragment, null, infotipVisible && /* @__PURE__ */ React28.createElement(import_ui28.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
|
|
2131
|
+
import_ui28.Infotip,
|
|
2047
2132
|
{
|
|
2048
2133
|
color: "warning",
|
|
2049
2134
|
placement: "right-start",
|
|
2050
2135
|
open: infotipVisible,
|
|
2051
2136
|
disableHoverListener: true,
|
|
2052
2137
|
onClose: closeInfotip,
|
|
2053
|
-
content: /* @__PURE__ */
|
|
2138
|
+
content: /* @__PURE__ */ React28.createElement(MissingVariableAlert, { onClose: closeInfotip, onClear: clearValue }),
|
|
2054
2139
|
slotProps: {
|
|
2055
2140
|
popper: {
|
|
2056
2141
|
modifiers: [
|
|
@@ -2062,7 +2147,7 @@ var MissingVariable = () => {
|
|
|
2062
2147
|
}
|
|
2063
2148
|
}
|
|
2064
2149
|
},
|
|
2065
|
-
/* @__PURE__ */
|
|
2150
|
+
/* @__PURE__ */ React28.createElement(MissingTag, { label: (0, import_i18n20.__)("Missing variable", "elementor"), onClick: toggleInfotip })
|
|
2066
2151
|
));
|
|
2067
2152
|
};
|
|
2068
2153
|
|
|
@@ -2071,17 +2156,17 @@ var VariableControl = () => {
|
|
|
2071
2156
|
const boundProp = (0, import_editor_controls10.useBoundProp)().value;
|
|
2072
2157
|
const assignedVariable = useVariable(boundProp?.value);
|
|
2073
2158
|
if (!assignedVariable) {
|
|
2074
|
-
return /* @__PURE__ */
|
|
2159
|
+
return /* @__PURE__ */ React29.createElement(MissingVariable, null);
|
|
2075
2160
|
}
|
|
2076
2161
|
const { $$type: propTypeKey } = boundProp;
|
|
2077
2162
|
if (assignedVariable?.deleted) {
|
|
2078
|
-
return /* @__PURE__ */
|
|
2163
|
+
return /* @__PURE__ */ React29.createElement(DeletedVariable, { variable: assignedVariable, propTypeKey });
|
|
2079
2164
|
}
|
|
2080
|
-
return /* @__PURE__ */
|
|
2165
|
+
return /* @__PURE__ */ React29.createElement(AssignedVariable, { variable: assignedVariable, propTypeKey });
|
|
2081
2166
|
};
|
|
2082
2167
|
|
|
2083
2168
|
// src/hooks/use-prop-variable-action.tsx
|
|
2084
|
-
var
|
|
2169
|
+
var React30 = __toESM(require("react"));
|
|
2085
2170
|
var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
|
|
2086
2171
|
var import_icons14 = require("@elementor/icons");
|
|
2087
2172
|
var import_i18n21 = require("@wordpress/i18n");
|
|
@@ -2097,7 +2182,7 @@ var usePropVariableAction = () => {
|
|
|
2097
2182
|
return null;
|
|
2098
2183
|
}
|
|
2099
2184
|
trackOpenVariablePopover(path, variable.variableType);
|
|
2100
|
-
return /* @__PURE__ */
|
|
2185
|
+
return /* @__PURE__ */ React30.createElement(VariableSelectionPopover, { closePopover, propTypeKey: variable.propTypeUtil.key });
|
|
2101
2186
|
}
|
|
2102
2187
|
};
|
|
2103
2188
|
};
|
|
@@ -2122,18 +2207,18 @@ var trackOpenVariablePopover = (path, variableType) => {
|
|
|
2122
2207
|
};
|
|
2123
2208
|
|
|
2124
2209
|
// src/register-variable-types.tsx
|
|
2125
|
-
var
|
|
2210
|
+
var React33 = __toESM(require("react"));
|
|
2126
2211
|
var import_editor_props3 = require("@elementor/editor-props");
|
|
2127
2212
|
var import_icons16 = require("@elementor/icons");
|
|
2128
2213
|
|
|
2129
2214
|
// src/components/fields/color-field.tsx
|
|
2130
|
-
var
|
|
2131
|
-
var
|
|
2132
|
-
var
|
|
2215
|
+
var React31 = __toESM(require("react"));
|
|
2216
|
+
var import_react18 = require("react");
|
|
2217
|
+
var import_ui29 = require("@elementor/ui");
|
|
2133
2218
|
var ColorField = ({ value, onChange, onValidationChange }) => {
|
|
2134
|
-
const [color, setColor] = (0,
|
|
2135
|
-
const [errorMessage, setErrorMessage] = (0,
|
|
2136
|
-
const defaultRef = (0,
|
|
2219
|
+
const [color, setColor] = (0, import_react18.useState)(value);
|
|
2220
|
+
const [errorMessage, setErrorMessage] = (0, import_react18.useState)("");
|
|
2221
|
+
const defaultRef = (0, import_react18.useRef)(null);
|
|
2137
2222
|
const anchorRef = usePopoverContentRef() ?? defaultRef.current;
|
|
2138
2223
|
const handleChange = (newValue) => {
|
|
2139
2224
|
setColor(newValue);
|
|
@@ -2142,8 +2227,8 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
|
|
|
2142
2227
|
onValidationChange?.(errorMsg);
|
|
2143
2228
|
onChange(errorMsg ? "" : newValue);
|
|
2144
2229
|
};
|
|
2145
|
-
return /* @__PURE__ */
|
|
2146
|
-
|
|
2230
|
+
return /* @__PURE__ */ React31.createElement(
|
|
2231
|
+
import_ui29.UnstableColorField,
|
|
2147
2232
|
{
|
|
2148
2233
|
size: "tiny",
|
|
2149
2234
|
fullWidth: true,
|
|
@@ -2162,21 +2247,21 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
|
|
|
2162
2247
|
};
|
|
2163
2248
|
|
|
2164
2249
|
// src/components/fields/font-field.tsx
|
|
2165
|
-
var
|
|
2166
|
-
var
|
|
2250
|
+
var React32 = __toESM(require("react"));
|
|
2251
|
+
var import_react19 = require("react");
|
|
2167
2252
|
var import_editor_controls11 = require("@elementor/editor-controls");
|
|
2168
2253
|
var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
|
|
2169
2254
|
var import_icons15 = require("@elementor/icons");
|
|
2170
|
-
var
|
|
2255
|
+
var import_ui30 = require("@elementor/ui");
|
|
2171
2256
|
var import_i18n22 = require("@wordpress/i18n");
|
|
2172
2257
|
var FontField = ({ value, onChange, onValidationChange }) => {
|
|
2173
|
-
const [fontFamily, setFontFamily] = (0,
|
|
2174
|
-
const defaultRef = (0,
|
|
2258
|
+
const [fontFamily, setFontFamily] = (0, import_react19.useState)(value);
|
|
2259
|
+
const defaultRef = (0, import_react19.useRef)(null);
|
|
2175
2260
|
const anchorRef = usePopoverContentRef() ?? defaultRef.current;
|
|
2176
|
-
const fontPopoverState = (0,
|
|
2261
|
+
const fontPopoverState = (0, import_ui30.usePopupState)({ variant: "popover" });
|
|
2177
2262
|
const fontFamilies = (0, import_editor_editing_panel9.useFontFamilies)();
|
|
2178
2263
|
const sectionWidth = (0, import_editor_editing_panel9.useSectionWidth)();
|
|
2179
|
-
const mapFontSubs =
|
|
2264
|
+
const mapFontSubs = React32.useMemo(() => {
|
|
2180
2265
|
return fontFamilies.map(({ label, fonts }) => ({
|
|
2181
2266
|
label,
|
|
2182
2267
|
items: fonts
|
|
@@ -2192,28 +2277,28 @@ var FontField = ({ value, onChange, onValidationChange }) => {
|
|
|
2192
2277
|
handleChange(newFontFamily);
|
|
2193
2278
|
fontPopoverState.close();
|
|
2194
2279
|
};
|
|
2195
|
-
const id2 = (0,
|
|
2196
|
-
return /* @__PURE__ */
|
|
2197
|
-
|
|
2280
|
+
const id2 = (0, import_react19.useId)();
|
|
2281
|
+
return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(
|
|
2282
|
+
import_ui30.UnstableTag,
|
|
2198
2283
|
{
|
|
2199
2284
|
id: id2,
|
|
2200
2285
|
variant: "outlined",
|
|
2201
2286
|
label: fontFamily,
|
|
2202
|
-
endIcon: /* @__PURE__ */
|
|
2203
|
-
...(0,
|
|
2287
|
+
endIcon: /* @__PURE__ */ React32.createElement(import_icons15.ChevronDownIcon, { fontSize: "tiny" }),
|
|
2288
|
+
...(0, import_ui30.bindTrigger)(fontPopoverState),
|
|
2204
2289
|
fullWidth: true
|
|
2205
2290
|
}
|
|
2206
|
-
), /* @__PURE__ */
|
|
2207
|
-
|
|
2291
|
+
), /* @__PURE__ */ React32.createElement(
|
|
2292
|
+
import_ui30.Popover,
|
|
2208
2293
|
{
|
|
2209
2294
|
disablePortal: true,
|
|
2210
2295
|
disableScrollLock: true,
|
|
2211
2296
|
anchorEl: anchorRef,
|
|
2212
2297
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
2213
2298
|
transformOrigin: { vertical: "top", horizontal: -28 },
|
|
2214
|
-
...(0,
|
|
2299
|
+
...(0, import_ui30.bindPopover)(fontPopoverState)
|
|
2215
2300
|
},
|
|
2216
|
-
/* @__PURE__ */
|
|
2301
|
+
/* @__PURE__ */ React32.createElement(
|
|
2217
2302
|
import_editor_controls11.ItemSelector,
|
|
2218
2303
|
{
|
|
2219
2304
|
itemsList: mapFontSubs,
|
|
@@ -2238,7 +2323,7 @@ function registerVariableTypes() {
|
|
|
2238
2323
|
propTypeUtil: colorVariablePropTypeUtil,
|
|
2239
2324
|
fallbackPropTypeUtil: import_editor_props3.colorPropTypeUtil,
|
|
2240
2325
|
variableType: "color",
|
|
2241
|
-
startIcon: ({ value }) => /* @__PURE__ */
|
|
2326
|
+
startIcon: ({ value }) => /* @__PURE__ */ React33.createElement(ColorIndicator, { size: "inherit", component: "span", value })
|
|
2242
2327
|
});
|
|
2243
2328
|
registerVariableType({
|
|
2244
2329
|
valueField: FontField,
|
|
@@ -2250,10 +2335,10 @@ function registerVariableTypes() {
|
|
|
2250
2335
|
}
|
|
2251
2336
|
|
|
2252
2337
|
// src/renderers/style-variables-renderer.tsx
|
|
2253
|
-
var
|
|
2254
|
-
var
|
|
2338
|
+
var React34 = __toESM(require("react"));
|
|
2339
|
+
var import_react20 = require("react");
|
|
2255
2340
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
2256
|
-
var
|
|
2341
|
+
var import_ui31 = require("@elementor/ui");
|
|
2257
2342
|
|
|
2258
2343
|
// src/sync/get-canvas-iframe-document.ts
|
|
2259
2344
|
function getCanvasIframeDocument() {
|
|
@@ -2272,14 +2357,14 @@ function StyleVariablesRenderer() {
|
|
|
2272
2357
|
}
|
|
2273
2358
|
const cssVariables = convertToCssVariables(styleVariables);
|
|
2274
2359
|
const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
|
|
2275
|
-
return /* @__PURE__ */
|
|
2360
|
+
return /* @__PURE__ */ React34.createElement(import_ui31.Portal, { container }, /* @__PURE__ */ React34.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
|
|
2276
2361
|
}
|
|
2277
2362
|
function usePortalContainer() {
|
|
2278
2363
|
return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
|
|
2279
2364
|
}
|
|
2280
2365
|
function useStyleVariables() {
|
|
2281
|
-
const [variables, setVariables] = (0,
|
|
2282
|
-
(0,
|
|
2366
|
+
const [variables, setVariables] = (0, import_react20.useState)({});
|
|
2367
|
+
(0, import_react20.useEffect)(() => {
|
|
2283
2368
|
const unsubscribe = styleVariablesRepository.subscribe(setVariables);
|
|
2284
2369
|
return () => {
|
|
2285
2370
|
unsubscribe();
|
|
@@ -2302,22 +2387,22 @@ var import_editor_controls12 = require("@elementor/editor-controls");
|
|
|
2302
2387
|
var import_editor_props4 = require("@elementor/editor-props");
|
|
2303
2388
|
|
|
2304
2389
|
// src/components/variables-repeater-item-slot.tsx
|
|
2305
|
-
var
|
|
2390
|
+
var React35 = __toESM(require("react"));
|
|
2306
2391
|
var useColorVariable = (value) => {
|
|
2307
2392
|
const variableId = value?.value?.color?.value;
|
|
2308
2393
|
return useVariable(variableId || "");
|
|
2309
2394
|
};
|
|
2310
2395
|
var BackgroundRepeaterColorIndicator = ({ value }) => {
|
|
2311
2396
|
const colorVariable = useColorVariable(value);
|
|
2312
|
-
return /* @__PURE__ */
|
|
2397
|
+
return /* @__PURE__ */ React35.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
|
|
2313
2398
|
};
|
|
2314
2399
|
var BackgroundRepeaterLabel = ({ value }) => {
|
|
2315
2400
|
const colorVariable = useColorVariable(value);
|
|
2316
|
-
return /* @__PURE__ */
|
|
2401
|
+
return /* @__PURE__ */ React35.createElement("span", null, colorVariable?.label);
|
|
2317
2402
|
};
|
|
2318
2403
|
var BoxShadowRepeaterColorIndicator = ({ value }) => {
|
|
2319
2404
|
const colorVariable = useColorVariable(value);
|
|
2320
|
-
return /* @__PURE__ */
|
|
2405
|
+
return /* @__PURE__ */ React35.createElement(ColorIndicator, { component: "span", size: "inherit", value: colorVariable?.value });
|
|
2321
2406
|
};
|
|
2322
2407
|
|
|
2323
2408
|
// src/repeater-injections.ts
|