@elementor/editor-controls 0.11.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/index.js +219 -193
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +172 -146
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/popover-content.tsx +15 -0
- package/src/components/popover-grid-container.tsx +20 -0
- package/src/components/repeater.tsx +6 -4
- package/src/components/section-content.tsx +16 -0
- package/src/controls/background-control/background-control.tsx +4 -3
- package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx +3 -2
- package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx +5 -4
- package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx +3 -2
- package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx +5 -4
- package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +4 -3
- package/src/controls/box-shadow-repeater-control.tsx +11 -9
- package/src/controls/equal-unequal-sizes-control.tsx +9 -7
- package/src/controls/font-family-control.tsx +4 -2
- package/src/controls/image-control.tsx +1 -1
- package/src/controls/size-control.tsx +3 -1
- package/src/controls/stroke-control.tsx +4 -3
package/dist/index.js
CHANGED
|
@@ -385,7 +385,7 @@ var SelectControl = createControl(({ options, onChange }) => {
|
|
|
385
385
|
var ImageControl = createControl(
|
|
386
386
|
({ sizes, resolutionLabel = (0, import_i18n2.__)("Image resolution", "elementor") }) => {
|
|
387
387
|
const propContext = useBoundProp(import_editor_props3.imagePropTypeUtil);
|
|
388
|
-
return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", (0, import_i18n2.__)("Choose image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, null)), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { container: true, gap:
|
|
388
|
+
return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", (0, import_i18n2.__)("Choose image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, null)), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }))))));
|
|
389
389
|
}
|
|
390
390
|
);
|
|
391
391
|
|
|
@@ -555,7 +555,7 @@ var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, st
|
|
|
555
555
|
}
|
|
556
556
|
),
|
|
557
557
|
placeholder,
|
|
558
|
-
startAdornment: startIcon
|
|
558
|
+
startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(import_ui10.InputAdornment, { position: "start" }, startIcon) : void 0,
|
|
559
559
|
type: "number",
|
|
560
560
|
value: Number.isNaN(state?.size) ? "" : state?.size,
|
|
561
561
|
onChange: handleSizeChange
|
|
@@ -564,42 +564,62 @@ var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, st
|
|
|
564
564
|
});
|
|
565
565
|
|
|
566
566
|
// src/controls/stroke-control.tsx
|
|
567
|
-
var
|
|
567
|
+
var React17 = __toESM(require("react"));
|
|
568
568
|
var import_editor_props8 = require("@elementor/editor-props");
|
|
569
|
-
var
|
|
569
|
+
var import_ui13 = require("@elementor/ui");
|
|
570
570
|
var import_i18n3 = require("@wordpress/i18n");
|
|
571
571
|
|
|
572
|
-
// src/
|
|
572
|
+
// src/components/section-content.tsx
|
|
573
573
|
var React15 = __toESM(require("react"));
|
|
574
|
-
var import_editor_props7 = require("@elementor/editor-props");
|
|
575
574
|
var import_ui11 = require("@elementor/ui");
|
|
575
|
+
var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React15.createElement(import_ui11.Stack, { gap, sx: { ...sx } }, children);
|
|
576
|
+
|
|
577
|
+
// src/controls/color-control.tsx
|
|
578
|
+
var React16 = __toESM(require("react"));
|
|
579
|
+
var import_editor_props7 = require("@elementor/editor-props");
|
|
580
|
+
var import_ui12 = require("@elementor/ui");
|
|
576
581
|
var ColorControl = createControl(({ propTypeUtil = import_editor_props7.colorPropTypeUtil, ...props }) => {
|
|
577
582
|
const { value, setValue } = useBoundProp(propTypeUtil);
|
|
578
583
|
const handleChange = (selectedColor) => {
|
|
579
584
|
setValue(selectedColor);
|
|
580
585
|
};
|
|
581
|
-
return /* @__PURE__ */
|
|
586
|
+
return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(import_ui12.UnstableColorField, { size: "tiny", ...props, value: value ?? "", onChange: handleChange, fullWidth: true }));
|
|
582
587
|
});
|
|
583
588
|
|
|
584
589
|
// src/controls/stroke-control.tsx
|
|
585
590
|
var units = ["px", "em", "rem"];
|
|
586
591
|
var StrokeControl = createControl(() => {
|
|
587
592
|
const propContext = useBoundProp(import_editor_props8.strokePropTypeUtil);
|
|
588
|
-
return /* @__PURE__ */
|
|
593
|
+
return /* @__PURE__ */ React17.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React17.createElement(SectionContent, null, /* @__PURE__ */ React17.createElement(Control, { bind: "width", label: (0, import_i18n3.__)("Stroke width", "elementor") }, /* @__PURE__ */ React17.createElement(SizeControl, { units })), /* @__PURE__ */ React17.createElement(Control, { bind: "color", label: (0, import_i18n3.__)("Stroke color", "elementor") }, /* @__PURE__ */ React17.createElement(ColorControl, null))));
|
|
589
594
|
});
|
|
590
|
-
var Control = ({ bind, label, children }) => /* @__PURE__ */
|
|
595
|
+
var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(ControlLabel, null, label)), /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, children)));
|
|
591
596
|
|
|
592
597
|
// src/controls/box-shadow-repeater-control.tsx
|
|
593
|
-
var
|
|
598
|
+
var React21 = __toESM(require("react"));
|
|
594
599
|
var import_editor_props9 = require("@elementor/editor-props");
|
|
595
|
-
var
|
|
600
|
+
var import_ui17 = require("@elementor/ui");
|
|
596
601
|
var import_i18n5 = require("@wordpress/i18n");
|
|
597
602
|
|
|
603
|
+
// src/components/popover-content.tsx
|
|
604
|
+
var React18 = __toESM(require("react"));
|
|
605
|
+
var import_ui14 = require("@elementor/ui");
|
|
606
|
+
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React18.createElement(import_ui14.Stack, { alignItems, gap, p }, children);
|
|
607
|
+
|
|
608
|
+
// src/components/popover-grid-container.tsx
|
|
609
|
+
var React19 = __toESM(require("react"));
|
|
610
|
+
var import_ui15 = require("@elementor/ui");
|
|
611
|
+
var PopoverGridContainer = ({
|
|
612
|
+
gap = 1.5,
|
|
613
|
+
alignItems = "center",
|
|
614
|
+
flexWrap = "nowrap",
|
|
615
|
+
children
|
|
616
|
+
}) => /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap, alignItems, flexWrap }, children);
|
|
617
|
+
|
|
598
618
|
// src/components/repeater.tsx
|
|
599
|
-
var
|
|
619
|
+
var React20 = __toESM(require("react"));
|
|
600
620
|
var import_react7 = require("react");
|
|
601
621
|
var import_icons2 = require("@elementor/icons");
|
|
602
|
-
var
|
|
622
|
+
var import_ui16 = require("@elementor/ui");
|
|
603
623
|
var import_i18n4 = require("@wordpress/i18n");
|
|
604
624
|
var SIZE = "tiny";
|
|
605
625
|
var Repeater = ({
|
|
@@ -637,19 +657,19 @@ var Repeater = ({
|
|
|
637
657
|
})
|
|
638
658
|
);
|
|
639
659
|
};
|
|
640
|
-
return /* @__PURE__ */
|
|
660
|
+
return /* @__PURE__ */ React20.createElement(SectionContent, null, /* @__PURE__ */ React20.createElement(import_ui16.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React20.createElement(import_ui16.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React20.createElement(import_ui16.IconButton, { size: SIZE, onClick: addRepeaterItem, "aria-label": (0, import_i18n4.__)("Add item", "elementor") }, /* @__PURE__ */ React20.createElement(import_icons2.PlusIcon, { fontSize: SIZE }))), /* @__PURE__ */ React20.createElement(import_ui16.Stack, { gap: 1, sx: { "&:empty": { display: "none" } } }, repeaterValues.map((value, index) => /* @__PURE__ */ React20.createElement(
|
|
641
661
|
RepeaterItem,
|
|
642
662
|
{
|
|
643
663
|
key: index,
|
|
644
664
|
bind: String(index),
|
|
645
665
|
disabled: value.disabled,
|
|
646
|
-
label: /* @__PURE__ */
|
|
647
|
-
startIcon: /* @__PURE__ */
|
|
666
|
+
label: /* @__PURE__ */ React20.createElement(itemSettings.Label, { value }),
|
|
667
|
+
startIcon: /* @__PURE__ */ React20.createElement(itemSettings.Icon, { value }),
|
|
648
668
|
removeItem: () => removeRepeaterItem(index),
|
|
649
669
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
650
670
|
toggleDisableItem: () => toggleDisableRepeaterItem(index)
|
|
651
671
|
},
|
|
652
|
-
(props) => /* @__PURE__ */
|
|
672
|
+
(props) => /* @__PURE__ */ React20.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
|
|
653
673
|
))));
|
|
654
674
|
};
|
|
655
675
|
var RepeaterItem = ({
|
|
@@ -665,46 +685,46 @@ var RepeaterItem = ({
|
|
|
665
685
|
const popupId = `repeater-popup-${bind}`;
|
|
666
686
|
const controlRef = (0, import_react7.useRef)(null);
|
|
667
687
|
const [anchorEl, setAnchorEl] = (0, import_react7.useState)(null);
|
|
668
|
-
const popoverState = (0,
|
|
669
|
-
const popoverProps = (0,
|
|
670
|
-
return /* @__PURE__ */
|
|
671
|
-
|
|
688
|
+
const popoverState = (0, import_ui16.usePopupState)({ popupId, variant: "popover" });
|
|
689
|
+
const popoverProps = (0, import_ui16.bindPopover)(popoverState);
|
|
690
|
+
return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
|
|
691
|
+
import_ui16.UnstableTag,
|
|
672
692
|
{
|
|
673
693
|
label,
|
|
674
694
|
showActionsOnHover: true,
|
|
675
695
|
ref: controlRef,
|
|
676
696
|
variant: "outlined",
|
|
677
697
|
"aria-label": (0, import_i18n4.__)("Open item", "elementor"),
|
|
678
|
-
...(0,
|
|
698
|
+
...(0, import_ui16.bindTrigger)(popoverState),
|
|
679
699
|
startIcon,
|
|
680
|
-
actions: /* @__PURE__ */
|
|
681
|
-
|
|
700
|
+
actions: /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
|
|
701
|
+
import_ui16.IconButton,
|
|
682
702
|
{
|
|
683
703
|
size: SIZE,
|
|
684
704
|
onClick: duplicateItem,
|
|
685
705
|
"aria-label": (0, import_i18n4.__)("Duplicate item", "elementor")
|
|
686
706
|
},
|
|
687
|
-
/* @__PURE__ */
|
|
688
|
-
), /* @__PURE__ */
|
|
689
|
-
|
|
707
|
+
/* @__PURE__ */ React20.createElement(import_icons2.CopyIcon, { fontSize: SIZE })
|
|
708
|
+
), /* @__PURE__ */ React20.createElement(
|
|
709
|
+
import_ui16.IconButton,
|
|
690
710
|
{
|
|
691
711
|
size: SIZE,
|
|
692
712
|
onClick: toggleDisableItem,
|
|
693
713
|
"aria-label": disabled ? (0, import_i18n4.__)("Enable item", "elementor") : (0, import_i18n4.__)("Disable item", "elementor")
|
|
694
714
|
},
|
|
695
|
-
disabled ? /* @__PURE__ */
|
|
696
|
-
), /* @__PURE__ */
|
|
697
|
-
|
|
715
|
+
disabled ? /* @__PURE__ */ React20.createElement(import_icons2.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React20.createElement(import_icons2.EyeIcon, { fontSize: SIZE })
|
|
716
|
+
), /* @__PURE__ */ React20.createElement(
|
|
717
|
+
import_ui16.IconButton,
|
|
698
718
|
{
|
|
699
719
|
size: SIZE,
|
|
700
720
|
onClick: removeItem,
|
|
701
721
|
"aria-label": (0, import_i18n4.__)("Remove item", "elementor")
|
|
702
722
|
},
|
|
703
|
-
/* @__PURE__ */
|
|
723
|
+
/* @__PURE__ */ React20.createElement(import_icons2.XIcon, { fontSize: SIZE })
|
|
704
724
|
))
|
|
705
725
|
}
|
|
706
|
-
), /* @__PURE__ */
|
|
707
|
-
|
|
726
|
+
), /* @__PURE__ */ React20.createElement(
|
|
727
|
+
import_ui16.Popover,
|
|
708
728
|
{
|
|
709
729
|
disablePortal: true,
|
|
710
730
|
slotProps: {
|
|
@@ -716,14 +736,14 @@ var RepeaterItem = ({
|
|
|
716
736
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
717
737
|
...popoverProps
|
|
718
738
|
},
|
|
719
|
-
/* @__PURE__ */
|
|
739
|
+
/* @__PURE__ */ React20.createElement(import_ui16.Box, null, children({ anchorEl }))
|
|
720
740
|
));
|
|
721
741
|
};
|
|
722
742
|
|
|
723
743
|
// src/controls/box-shadow-repeater-control.tsx
|
|
724
744
|
var BoxShadowRepeaterControl = createControl(() => {
|
|
725
745
|
const { propType, value, setValue } = useBoundProp(import_editor_props9.boxShadowPropTypeUtil);
|
|
726
|
-
return /* @__PURE__ */
|
|
746
|
+
return /* @__PURE__ */ React21.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React21.createElement(
|
|
727
747
|
Repeater,
|
|
728
748
|
{
|
|
729
749
|
values: value ?? [],
|
|
@@ -738,13 +758,13 @@ var BoxShadowRepeaterControl = createControl(() => {
|
|
|
738
758
|
}
|
|
739
759
|
));
|
|
740
760
|
});
|
|
741
|
-
var ItemIcon = ({ value }) => /* @__PURE__ */
|
|
761
|
+
var ItemIcon = ({ value }) => /* @__PURE__ */ React21.createElement(import_ui17.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
|
|
742
762
|
var ItemContent = ({ anchorEl, bind }) => {
|
|
743
|
-
return /* @__PURE__ */
|
|
763
|
+
return /* @__PURE__ */ React21.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React21.createElement(Content, { anchorEl }));
|
|
744
764
|
};
|
|
745
765
|
var Content = ({ anchorEl }) => {
|
|
746
766
|
const { propType, value, setValue } = useBoundProp(import_editor_props9.shadowPropTypeUtil);
|
|
747
|
-
return /* @__PURE__ */
|
|
767
|
+
return /* @__PURE__ */ React21.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React21.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React21.createElement(PopoverGridContainer, null, /* @__PURE__ */ React21.createElement(Control2, { bind: "color", label: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React21.createElement(
|
|
748
768
|
ColorControl,
|
|
749
769
|
{
|
|
750
770
|
slotProps: {
|
|
@@ -761,7 +781,7 @@ var Content = ({ anchorEl }) => {
|
|
|
761
781
|
}
|
|
762
782
|
}
|
|
763
783
|
}
|
|
764
|
-
)), /* @__PURE__ */
|
|
784
|
+
)), /* @__PURE__ */ React21.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor") }, /* @__PURE__ */ React21.createElement(
|
|
765
785
|
SelectControl,
|
|
766
786
|
{
|
|
767
787
|
options: [
|
|
@@ -769,9 +789,9 @@ var Content = ({ anchorEl }) => {
|
|
|
769
789
|
{ label: (0, import_i18n5.__)("Outset", "elementor"), value: null }
|
|
770
790
|
]
|
|
771
791
|
}
|
|
772
|
-
))), /* @__PURE__ */
|
|
792
|
+
))), /* @__PURE__ */ React21.createElement(PopoverGridContainer, null, /* @__PURE__ */ React21.createElement(Control2, { bind: "hOffset", label: (0, import_i18n5.__)("Horizontal", "elementor") }, /* @__PURE__ */ React21.createElement(SizeControl, null)), /* @__PURE__ */ React21.createElement(Control2, { bind: "vOffset", label: (0, import_i18n5.__)("Vertical", "elementor") }, /* @__PURE__ */ React21.createElement(SizeControl, null))), /* @__PURE__ */ React21.createElement(PopoverGridContainer, null, /* @__PURE__ */ React21.createElement(Control2, { bind: "blur", label: (0, import_i18n5.__)("Blur", "elementor") }, /* @__PURE__ */ React21.createElement(SizeControl, null)), /* @__PURE__ */ React21.createElement(Control2, { bind: "spread", label: (0, import_i18n5.__)("Spread", "elementor") }, /* @__PURE__ */ React21.createElement(SizeControl, null)))));
|
|
773
793
|
};
|
|
774
|
-
var Control2 = ({ label, bind, children }) => /* @__PURE__ */
|
|
794
|
+
var Control2 = ({ label, bind, children }) => /* @__PURE__ */ React21.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React21.createElement(import_ui17.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React21.createElement(import_ui17.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React21.createElement(import_ui17.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React21.createElement(import_ui17.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React21.createElement(import_ui17.Grid, { item: true, xs: 12 }, children))));
|
|
775
795
|
var ItemLabel = ({ value }) => {
|
|
776
796
|
const { position, hOffset, vOffset, blur, spread } = value.value;
|
|
777
797
|
const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
|
|
@@ -785,7 +805,7 @@ var ItemLabel = ({ value }) => {
|
|
|
785
805
|
blurSize + blurUnit,
|
|
786
806
|
spreadSize + spreadUnit
|
|
787
807
|
].join(" ");
|
|
788
|
-
return /* @__PURE__ */
|
|
808
|
+
return /* @__PURE__ */ React21.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
|
|
789
809
|
};
|
|
790
810
|
var initialShadow = {
|
|
791
811
|
$$type: "shadow",
|
|
@@ -815,13 +835,13 @@ var initialShadow = {
|
|
|
815
835
|
};
|
|
816
836
|
|
|
817
837
|
// src/controls/toggle-control.tsx
|
|
818
|
-
var
|
|
838
|
+
var React23 = __toESM(require("react"));
|
|
819
839
|
var import_editor_props10 = require("@elementor/editor-props");
|
|
820
840
|
|
|
821
841
|
// src/components/control-toggle-button-group.tsx
|
|
822
|
-
var
|
|
823
|
-
var
|
|
824
|
-
var StyledToggleButtonGroup = (0,
|
|
842
|
+
var React22 = __toESM(require("react"));
|
|
843
|
+
var import_ui18 = require("@elementor/ui");
|
|
844
|
+
var StyledToggleButtonGroup = (0, import_ui18.styled)(import_ui18.ToggleButtonGroup)`
|
|
825
845
|
${({ justify }) => `justify-content: ${justify};`}
|
|
826
846
|
`;
|
|
827
847
|
var ControlToggleButtonGroup = ({
|
|
@@ -833,11 +853,11 @@ var ControlToggleButtonGroup = ({
|
|
|
833
853
|
exclusive = false,
|
|
834
854
|
fullWidth = false
|
|
835
855
|
}) => {
|
|
836
|
-
const isRtl = "rtl" === (0,
|
|
856
|
+
const isRtl = "rtl" === (0, import_ui18.useTheme)().direction;
|
|
837
857
|
const handleChange = (_, newValue) => {
|
|
838
858
|
onChange(newValue);
|
|
839
859
|
};
|
|
840
|
-
return /* @__PURE__ */
|
|
860
|
+
return /* @__PURE__ */ React22.createElement(
|
|
841
861
|
StyledToggleButtonGroup,
|
|
842
862
|
{
|
|
843
863
|
justify,
|
|
@@ -849,8 +869,8 @@ var ControlToggleButtonGroup = ({
|
|
|
849
869
|
}
|
|
850
870
|
},
|
|
851
871
|
items.map(
|
|
852
|
-
({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */
|
|
853
|
-
|
|
872
|
+
({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */ React22.createElement(import_ui18.Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React22.createElement(import_ui18.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React22.createElement(Content3, { size }))) : /* @__PURE__ */ React22.createElement(
|
|
873
|
+
import_ui18.ToggleButton,
|
|
854
874
|
{
|
|
855
875
|
key: buttonValue,
|
|
856
876
|
value: buttonValue,
|
|
@@ -858,7 +878,7 @@ var ControlToggleButtonGroup = ({
|
|
|
858
878
|
size,
|
|
859
879
|
fullWidth
|
|
860
880
|
},
|
|
861
|
-
/* @__PURE__ */
|
|
881
|
+
/* @__PURE__ */ React22.createElement(Content3, { size })
|
|
862
882
|
)
|
|
863
883
|
)
|
|
864
884
|
);
|
|
@@ -871,7 +891,7 @@ var ToggleControl = createControl(
|
|
|
871
891
|
const handleToggle = (option) => {
|
|
872
892
|
setValue(option);
|
|
873
893
|
};
|
|
874
|
-
return /* @__PURE__ */
|
|
894
|
+
return /* @__PURE__ */ React23.createElement(
|
|
875
895
|
ControlToggleButtonGroup,
|
|
876
896
|
{
|
|
877
897
|
items: options,
|
|
@@ -886,9 +906,9 @@ var ToggleControl = createControl(
|
|
|
886
906
|
);
|
|
887
907
|
|
|
888
908
|
// src/controls/number-control.tsx
|
|
889
|
-
var
|
|
909
|
+
var React24 = __toESM(require("react"));
|
|
890
910
|
var import_editor_props11 = require("@elementor/editor-props");
|
|
891
|
-
var
|
|
911
|
+
var import_ui19 = require("@elementor/ui");
|
|
892
912
|
var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
|
|
893
913
|
var NumberControl = createControl(
|
|
894
914
|
({
|
|
@@ -908,8 +928,8 @@ var NumberControl = createControl(
|
|
|
908
928
|
const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
|
|
909
929
|
setValue(Math.min(Math.max(formattedValue, min), max));
|
|
910
930
|
};
|
|
911
|
-
return /* @__PURE__ */
|
|
912
|
-
|
|
931
|
+
return /* @__PURE__ */ React24.createElement(ControlActions, null, /* @__PURE__ */ React24.createElement(
|
|
932
|
+
import_ui19.TextField,
|
|
913
933
|
{
|
|
914
934
|
size: "tiny",
|
|
915
935
|
type: "number",
|
|
@@ -924,10 +944,10 @@ var NumberControl = createControl(
|
|
|
924
944
|
);
|
|
925
945
|
|
|
926
946
|
// src/controls/equal-unequal-sizes-control.tsx
|
|
927
|
-
var
|
|
947
|
+
var React25 = __toESM(require("react"));
|
|
928
948
|
var import_react8 = require("react");
|
|
929
949
|
var import_editor_props12 = require("@elementor/editor-props");
|
|
930
|
-
var
|
|
950
|
+
var import_ui20 = require("@elementor/ui");
|
|
931
951
|
var import_i18n6 = require("@wordpress/i18n");
|
|
932
952
|
var isEqualSizes = (propValue, items) => {
|
|
933
953
|
const values = Object.values(propValue);
|
|
@@ -947,7 +967,7 @@ function EqualUnequalSizesControl({
|
|
|
947
967
|
}) {
|
|
948
968
|
const popupId = (0, import_react8.useId)();
|
|
949
969
|
const controlRef = (0, import_react8.useRef)(null);
|
|
950
|
-
const popupState = (0,
|
|
970
|
+
const popupState = (0, import_ui20.usePopupState)({ variant: "popover", popupId });
|
|
951
971
|
const {
|
|
952
972
|
propType: multiSizePropType,
|
|
953
973
|
value: multiSizeValue,
|
|
@@ -981,18 +1001,18 @@ function EqualUnequalSizesControl({
|
|
|
981
1001
|
return splitEqualValue() ?? null;
|
|
982
1002
|
};
|
|
983
1003
|
const isMixed = !!multiSizeValue;
|
|
984
|
-
return /* @__PURE__ */
|
|
985
|
-
|
|
1004
|
+
return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_ui20.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React25.createElement(import_ui20.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React25.createElement(ControlLabel, null, label)), /* @__PURE__ */ React25.createElement(import_ui20.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React25.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React25.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React25.createElement(
|
|
1005
|
+
import_ui20.ToggleButton,
|
|
986
1006
|
{
|
|
987
1007
|
size: "tiny",
|
|
988
1008
|
value: "check",
|
|
989
1009
|
sx: { marginLeft: "auto" },
|
|
990
|
-
...(0,
|
|
1010
|
+
...(0, import_ui20.bindToggle)(popupState),
|
|
991
1011
|
selected: popupState.isOpen
|
|
992
1012
|
},
|
|
993
1013
|
icon
|
|
994
|
-
)))), /* @__PURE__ */
|
|
995
|
-
|
|
1014
|
+
)))), /* @__PURE__ */ React25.createElement(
|
|
1015
|
+
import_ui20.Popover,
|
|
996
1016
|
{
|
|
997
1017
|
disablePortal: true,
|
|
998
1018
|
disableScrollLock: true,
|
|
@@ -1004,21 +1024,21 @@ function EqualUnequalSizesControl({
|
|
|
1004
1024
|
vertical: "top",
|
|
1005
1025
|
horizontal: "right"
|
|
1006
1026
|
},
|
|
1007
|
-
...(0,
|
|
1027
|
+
...(0, import_ui20.bindPopover)(popupState),
|
|
1008
1028
|
slotProps: {
|
|
1009
|
-
paper: { sx: { mt: 0.5,
|
|
1029
|
+
paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } }
|
|
1010
1030
|
}
|
|
1011
1031
|
},
|
|
1012
|
-
/* @__PURE__ */
|
|
1032
|
+
/* @__PURE__ */ React25.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__PURE__ */ React25.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React25.createElement(PopoverGridContainer, null, /* @__PURE__ */ React25.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React25.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React25.createElement(PopoverGridContainer, null, /* @__PURE__ */ React25.createElement(MultiSizeValueControl, { item: items[3] }), /* @__PURE__ */ React25.createElement(MultiSizeValueControl, { item: items[2] }))))
|
|
1013
1033
|
));
|
|
1014
1034
|
}
|
|
1015
|
-
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */
|
|
1035
|
+
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React25.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React25.createElement(import_ui20.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React25.createElement(import_ui20.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React25.createElement(import_ui20.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React25.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React25.createElement(import_ui20.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React25.createElement(SizeControl, { startIcon: item.icon })))));
|
|
1016
1036
|
|
|
1017
1037
|
// src/controls/linked-dimensions-control.tsx
|
|
1018
|
-
var
|
|
1038
|
+
var React26 = __toESM(require("react"));
|
|
1019
1039
|
var import_editor_props13 = require("@elementor/editor-props");
|
|
1020
1040
|
var import_icons3 = require("@elementor/icons");
|
|
1021
|
-
var
|
|
1041
|
+
var import_ui21 = require("@elementor/ui");
|
|
1022
1042
|
var import_i18n7 = require("@wordpress/i18n");
|
|
1023
1043
|
var LinkedDimensionsControl = createControl(({ label }) => {
|
|
1024
1044
|
const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp(import_editor_props13.dimensionsPropTypeUtil);
|
|
@@ -1038,8 +1058,8 @@ var LinkedDimensionsControl = createControl(({ label }) => {
|
|
|
1038
1058
|
});
|
|
1039
1059
|
};
|
|
1040
1060
|
const LinkedIcon = isLinked ? import_icons3.LinkIcon : import_icons3.DetachIcon;
|
|
1041
|
-
return /* @__PURE__ */
|
|
1042
|
-
|
|
1061
|
+
return /* @__PURE__ */ React26.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React26.createElement(import_ui21.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label), /* @__PURE__ */ React26.createElement(
|
|
1062
|
+
import_ui21.ToggleButton,
|
|
1043
1063
|
{
|
|
1044
1064
|
"aria-label": (0, import_i18n7.__)("Link inputs", "elementor"),
|
|
1045
1065
|
size: "tiny",
|
|
@@ -1048,50 +1068,50 @@ var LinkedDimensionsControl = createControl(({ label }) => {
|
|
|
1048
1068
|
sx: { marginLeft: "auto" },
|
|
1049
1069
|
onChange: onLinkToggle
|
|
1050
1070
|
},
|
|
1051
|
-
/* @__PURE__ */
|
|
1052
|
-
)), /* @__PURE__ */
|
|
1071
|
+
/* @__PURE__ */ React26.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1072
|
+
)), /* @__PURE__ */ React26.createElement(import_ui21.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
|
|
1053
1073
|
Control3,
|
|
1054
1074
|
{
|
|
1055
1075
|
bind: "top",
|
|
1056
|
-
startIcon: /* @__PURE__ */
|
|
1076
|
+
startIcon: /* @__PURE__ */ React26.createElement(import_icons3.SideTopIcon, { fontSize: "tiny" }),
|
|
1057
1077
|
isLinked
|
|
1058
1078
|
}
|
|
1059
|
-
))), /* @__PURE__ */
|
|
1079
|
+
))), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
|
|
1060
1080
|
Control3,
|
|
1061
1081
|
{
|
|
1062
1082
|
bind: "right",
|
|
1063
|
-
startIcon: /* @__PURE__ */
|
|
1083
|
+
startIcon: /* @__PURE__ */ React26.createElement(import_icons3.SideRightIcon, { fontSize: "tiny" }),
|
|
1064
1084
|
isLinked
|
|
1065
1085
|
}
|
|
1066
|
-
)))), /* @__PURE__ */
|
|
1086
|
+
)))), /* @__PURE__ */ React26.createElement(import_ui21.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
|
|
1067
1087
|
Control3,
|
|
1068
1088
|
{
|
|
1069
1089
|
bind: "bottom",
|
|
1070
|
-
startIcon: /* @__PURE__ */
|
|
1090
|
+
startIcon: /* @__PURE__ */ React26.createElement(import_icons3.SideBottomIcon, { fontSize: "tiny" }),
|
|
1071
1091
|
isLinked
|
|
1072
1092
|
}
|
|
1073
|
-
))), /* @__PURE__ */
|
|
1093
|
+
))), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
|
|
1074
1094
|
Control3,
|
|
1075
1095
|
{
|
|
1076
1096
|
bind: "left",
|
|
1077
|
-
startIcon: /* @__PURE__ */
|
|
1097
|
+
startIcon: /* @__PURE__ */ React26.createElement(import_icons3.SideLeftIcon, { fontSize: "tiny" }),
|
|
1078
1098
|
isLinked
|
|
1079
1099
|
}
|
|
1080
1100
|
)))));
|
|
1081
1101
|
});
|
|
1082
1102
|
var Control3 = ({ bind, startIcon, isLinked }) => {
|
|
1083
1103
|
if (isLinked) {
|
|
1084
|
-
return /* @__PURE__ */
|
|
1104
|
+
return /* @__PURE__ */ React26.createElement(SizeControl, { startIcon });
|
|
1085
1105
|
}
|
|
1086
|
-
return /* @__PURE__ */
|
|
1106
|
+
return /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React26.createElement(SizeControl, { startIcon }));
|
|
1087
1107
|
};
|
|
1088
1108
|
|
|
1089
1109
|
// src/controls/font-family-control.tsx
|
|
1090
1110
|
var import_react9 = require("react");
|
|
1091
|
-
var
|
|
1111
|
+
var React27 = __toESM(require("react"));
|
|
1092
1112
|
var import_editor_props14 = require("@elementor/editor-props");
|
|
1093
1113
|
var import_icons4 = require("@elementor/icons");
|
|
1094
|
-
var
|
|
1114
|
+
var import_ui22 = require("@elementor/ui");
|
|
1095
1115
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1096
1116
|
|
|
1097
1117
|
// src/hooks/use-filtered-font-families.ts
|
|
@@ -1130,7 +1150,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1130
1150
|
const [searchValue, setSearchValue] = (0, import_react9.useState)("");
|
|
1131
1151
|
const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props14.stringPropTypeUtil);
|
|
1132
1152
|
const popupId = (0, import_react9.useId)();
|
|
1133
|
-
const popoverState = (0,
|
|
1153
|
+
const popoverState = (0, import_ui22.usePopupState)({ variant: "popover", popupId });
|
|
1134
1154
|
const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
|
|
1135
1155
|
if (!filteredFontFamilies) {
|
|
1136
1156
|
return null;
|
|
@@ -1142,26 +1162,26 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1142
1162
|
setSearchValue("");
|
|
1143
1163
|
popoverState.close();
|
|
1144
1164
|
};
|
|
1145
|
-
return /* @__PURE__ */
|
|
1146
|
-
|
|
1165
|
+
return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(
|
|
1166
|
+
import_ui22.UnstableTag,
|
|
1147
1167
|
{
|
|
1148
1168
|
variant: "outlined",
|
|
1149
1169
|
label: fontFamily,
|
|
1150
|
-
endIcon: /* @__PURE__ */
|
|
1151
|
-
...(0,
|
|
1170
|
+
endIcon: /* @__PURE__ */ React27.createElement(import_icons4.ChevronDownIcon, { fontSize: "tiny" }),
|
|
1171
|
+
...(0, import_ui22.bindTrigger)(popoverState),
|
|
1152
1172
|
fullWidth: true
|
|
1153
1173
|
}
|
|
1154
|
-
), /* @__PURE__ */
|
|
1155
|
-
|
|
1174
|
+
), /* @__PURE__ */ React27.createElement(
|
|
1175
|
+
import_ui22.Popover,
|
|
1156
1176
|
{
|
|
1157
1177
|
disablePortal: true,
|
|
1158
1178
|
disableScrollLock: true,
|
|
1159
1179
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
1160
|
-
...(0,
|
|
1180
|
+
...(0, import_ui22.bindPopover)(popoverState),
|
|
1161
1181
|
onClose: handleClose
|
|
1162
1182
|
},
|
|
1163
|
-
/* @__PURE__ */
|
|
1164
|
-
|
|
1183
|
+
/* @__PURE__ */ React27.createElement(import_ui22.Stack, null, /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React27.createElement(import_icons4.EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React27.createElement(import_ui22.Typography, { variant: "subtitle2" }, (0, import_i18n9.__)("Font Family", "elementor")), /* @__PURE__ */ React27.createElement(import_ui22.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React27.createElement(import_icons4.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React27.createElement(import_ui22.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React27.createElement(
|
|
1184
|
+
import_ui22.TextField,
|
|
1165
1185
|
{
|
|
1166
1186
|
fullWidth: true,
|
|
1167
1187
|
size: SIZE2,
|
|
@@ -1169,13 +1189,19 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1169
1189
|
placeholder: (0, import_i18n9.__)("Search", "elementor"),
|
|
1170
1190
|
onChange: handleSearch,
|
|
1171
1191
|
InputProps: {
|
|
1172
|
-
startAdornment: /* @__PURE__ */
|
|
1192
|
+
startAdornment: /* @__PURE__ */ React27.createElement(import_ui22.InputAdornment, { position: "start" }, /* @__PURE__ */ React27.createElement(import_icons4.SearchIcon, { fontSize: SIZE2 }))
|
|
1173
1193
|
}
|
|
1174
1194
|
}
|
|
1175
|
-
)), /* @__PURE__ */
|
|
1195
|
+
)), /* @__PURE__ */ React27.createElement(import_ui22.Divider, null), /* @__PURE__ */ React27.createElement(import_ui22.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React27.createElement(import_ui22.MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React27.createElement(import_react9.Fragment, { key: index }, /* @__PURE__ */ React27.createElement(
|
|
1196
|
+
import_ui22.ListSubheader,
|
|
1197
|
+
{
|
|
1198
|
+
sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
|
|
1199
|
+
},
|
|
1200
|
+
category
|
|
1201
|
+
), items.map((item) => {
|
|
1176
1202
|
const isSelected = item === fontFamily;
|
|
1177
|
-
return /* @__PURE__ */
|
|
1178
|
-
|
|
1203
|
+
return /* @__PURE__ */ React27.createElement(
|
|
1204
|
+
import_ui22.MenuItem,
|
|
1179
1205
|
{
|
|
1180
1206
|
key: item,
|
|
1181
1207
|
selected: isSelected,
|
|
@@ -1184,13 +1210,13 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1184
1210
|
setFontFamily(item);
|
|
1185
1211
|
handleClose();
|
|
1186
1212
|
},
|
|
1187
|
-
sx: { typography: "caption" },
|
|
1213
|
+
sx: { px: 1.5, typography: "caption" },
|
|
1188
1214
|
style: { fontFamily: item }
|
|
1189
1215
|
},
|
|
1190
1216
|
item
|
|
1191
1217
|
);
|
|
1192
|
-
})))) : /* @__PURE__ */
|
|
1193
|
-
|
|
1218
|
+
})))) : /* @__PURE__ */ React27.createElement(import_ui22.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React27.createElement(import_icons4.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React27.createElement(import_ui22.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n9.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React27.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React27.createElement(import_ui22.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React27.createElement(
|
|
1219
|
+
import_ui22.Link,
|
|
1194
1220
|
{
|
|
1195
1221
|
color: "secondary",
|
|
1196
1222
|
variant: "caption",
|
|
@@ -1203,14 +1229,14 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1203
1229
|
});
|
|
1204
1230
|
|
|
1205
1231
|
// src/controls/url-control.tsx
|
|
1206
|
-
var
|
|
1232
|
+
var React28 = __toESM(require("react"));
|
|
1207
1233
|
var import_editor_props15 = require("@elementor/editor-props");
|
|
1208
|
-
var
|
|
1234
|
+
var import_ui23 = require("@elementor/ui");
|
|
1209
1235
|
var UrlControl = createControl(({ placeholder }) => {
|
|
1210
1236
|
const { value, setValue } = useBoundProp(import_editor_props15.urlPropTypeUtil);
|
|
1211
1237
|
const handleChange = (event) => setValue(event.target.value);
|
|
1212
|
-
return /* @__PURE__ */
|
|
1213
|
-
|
|
1238
|
+
return /* @__PURE__ */ React28.createElement(ControlActions, null, /* @__PURE__ */ React28.createElement(
|
|
1239
|
+
import_ui23.TextField,
|
|
1214
1240
|
{
|
|
1215
1241
|
size: "tiny",
|
|
1216
1242
|
fullWidth: true,
|
|
@@ -1222,20 +1248,20 @@ var UrlControl = createControl(({ placeholder }) => {
|
|
|
1222
1248
|
});
|
|
1223
1249
|
|
|
1224
1250
|
// src/controls/link-control.tsx
|
|
1225
|
-
var
|
|
1251
|
+
var React30 = __toESM(require("react"));
|
|
1226
1252
|
var import_react11 = require("react");
|
|
1227
1253
|
var import_editor_props16 = require("@elementor/editor-props");
|
|
1228
1254
|
var import_http = require("@elementor/http");
|
|
1229
1255
|
var import_icons6 = require("@elementor/icons");
|
|
1230
1256
|
var import_session = require("@elementor/session");
|
|
1231
|
-
var
|
|
1257
|
+
var import_ui25 = require("@elementor/ui");
|
|
1232
1258
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1233
1259
|
|
|
1234
1260
|
// src/components/autocomplete.tsx
|
|
1235
|
-
var
|
|
1261
|
+
var React29 = __toESM(require("react"));
|
|
1236
1262
|
var import_react10 = require("react");
|
|
1237
1263
|
var import_icons5 = require("@elementor/icons");
|
|
1238
|
-
var
|
|
1264
|
+
var import_ui24 = require("@elementor/ui");
|
|
1239
1265
|
var Autocomplete = (0, import_react10.forwardRef)((props, ref) => {
|
|
1240
1266
|
const {
|
|
1241
1267
|
options,
|
|
@@ -1252,8 +1278,8 @@ var Autocomplete = (0, import_react10.forwardRef)((props, ref) => {
|
|
|
1252
1278
|
const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
|
|
1253
1279
|
const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
|
|
1254
1280
|
const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
|
|
1255
|
-
return /* @__PURE__ */
|
|
1256
|
-
|
|
1281
|
+
return /* @__PURE__ */ React29.createElement(
|
|
1282
|
+
import_ui24.Autocomplete,
|
|
1257
1283
|
{
|
|
1258
1284
|
...restProps,
|
|
1259
1285
|
ref,
|
|
@@ -1270,8 +1296,8 @@ var Autocomplete = (0, import_react10.forwardRef)((props, ref) => {
|
|
|
1270
1296
|
groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
|
|
1271
1297
|
isOptionEqualToValue,
|
|
1272
1298
|
filterOptions: () => optionKeys,
|
|
1273
|
-
renderOption: (optionProps, optionId) => /* @__PURE__ */
|
|
1274
|
-
renderInput: (params) => /* @__PURE__ */
|
|
1299
|
+
renderOption: (optionProps, optionId) => /* @__PURE__ */ React29.createElement(import_ui24.Box, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
|
|
1300
|
+
renderInput: (params) => /* @__PURE__ */ React29.createElement(
|
|
1275
1301
|
TextInput,
|
|
1276
1302
|
{
|
|
1277
1303
|
params,
|
|
@@ -1294,8 +1320,8 @@ var TextInput = ({
|
|
|
1294
1320
|
const onChange = (event) => {
|
|
1295
1321
|
handleChange(event.target.value);
|
|
1296
1322
|
};
|
|
1297
|
-
return /* @__PURE__ */
|
|
1298
|
-
|
|
1323
|
+
return /* @__PURE__ */ React29.createElement(
|
|
1324
|
+
import_ui24.TextField,
|
|
1299
1325
|
{
|
|
1300
1326
|
...params,
|
|
1301
1327
|
placeholder,
|
|
@@ -1307,7 +1333,7 @@ var TextInput = ({
|
|
|
1307
1333
|
},
|
|
1308
1334
|
InputProps: {
|
|
1309
1335
|
...params.InputProps,
|
|
1310
|
-
endAdornment: /* @__PURE__ */
|
|
1336
|
+
endAdornment: /* @__PURE__ */ React29.createElement(ClearButton, { params, allowClear, handleChange })
|
|
1311
1337
|
}
|
|
1312
1338
|
}
|
|
1313
1339
|
);
|
|
@@ -1316,7 +1342,7 @@ var ClearButton = ({
|
|
|
1316
1342
|
allowClear,
|
|
1317
1343
|
handleChange,
|
|
1318
1344
|
params
|
|
1319
|
-
}) => /* @__PURE__ */
|
|
1345
|
+
}) => /* @__PURE__ */ React29.createElement(import_ui24.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React29.createElement(import_ui24.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React29.createElement(import_icons5.XIcon, { fontSize: params.size })));
|
|
1320
1346
|
function findMatchingOption(options, optionId = null) {
|
|
1321
1347
|
const formattedOption = (optionId || "").toString();
|
|
1322
1348
|
return options.find(({ id }) => formattedOption === id.toString());
|
|
@@ -1395,8 +1421,8 @@ var LinkControl = createControl((props) => {
|
|
|
1395
1421
|
),
|
|
1396
1422
|
[endpoint]
|
|
1397
1423
|
);
|
|
1398
|
-
return /* @__PURE__ */
|
|
1399
|
-
|
|
1424
|
+
return /* @__PURE__ */ React30.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React30.createElement(import_ui25.Stack, { gap: 1.5 }, /* @__PURE__ */ React30.createElement(import_ui25.Divider, null), /* @__PURE__ */ React30.createElement(
|
|
1425
|
+
import_ui25.Stack,
|
|
1400
1426
|
{
|
|
1401
1427
|
direction: "row",
|
|
1402
1428
|
sx: {
|
|
@@ -1404,8 +1430,8 @@ var LinkControl = createControl((props) => {
|
|
|
1404
1430
|
alignItems: "center"
|
|
1405
1431
|
}
|
|
1406
1432
|
},
|
|
1407
|
-
/* @__PURE__ */
|
|
1408
|
-
/* @__PURE__ */
|
|
1433
|
+
/* @__PURE__ */ React30.createElement(ControlLabel, null, (0, import_i18n10.__)("Link", "elementor")),
|
|
1434
|
+
/* @__PURE__ */ React30.createElement(
|
|
1409
1435
|
ToggleIconControl,
|
|
1410
1436
|
{
|
|
1411
1437
|
enabled: isEnabled,
|
|
@@ -1413,7 +1439,7 @@ var LinkControl = createControl((props) => {
|
|
|
1413
1439
|
label: (0, import_i18n10.__)("Toggle link", "elementor")
|
|
1414
1440
|
}
|
|
1415
1441
|
)
|
|
1416
|
-
), /* @__PURE__ */
|
|
1442
|
+
), /* @__PURE__ */ React30.createElement(import_ui25.Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React30.createElement(import_ui25.Stack, { gap: 1.5 }, /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React30.createElement(ControlActions, null, /* @__PURE__ */ React30.createElement(
|
|
1417
1443
|
Autocomplete,
|
|
1418
1444
|
{
|
|
1419
1445
|
options,
|
|
@@ -1424,17 +1450,17 @@ var LinkControl = createControl((props) => {
|
|
|
1424
1450
|
onTextChange,
|
|
1425
1451
|
minInputLength
|
|
1426
1452
|
}
|
|
1427
|
-
))), /* @__PURE__ */
|
|
1453
|
+
))), /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React30.createElement(SwitchControl, null))))));
|
|
1428
1454
|
});
|
|
1429
1455
|
var ToggleIconControl = ({ enabled, onIconClick, label }) => {
|
|
1430
|
-
return /* @__PURE__ */
|
|
1456
|
+
return /* @__PURE__ */ React30.createElement(import_ui25.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label }, enabled ? /* @__PURE__ */ React30.createElement(import_icons6.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React30.createElement(import_icons6.PlusIcon, { fontSize: SIZE3 }));
|
|
1431
1457
|
};
|
|
1432
1458
|
var SwitchControl = () => {
|
|
1433
1459
|
const { value = false, setValue } = useBoundProp(import_editor_props16.booleanPropTypeUtil);
|
|
1434
1460
|
const onClick = () => {
|
|
1435
1461
|
setValue(!value);
|
|
1436
1462
|
};
|
|
1437
|
-
return /* @__PURE__ */
|
|
1463
|
+
return /* @__PURE__ */ React30.createElement(import_ui25.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true }, /* @__PURE__ */ React30.createElement(ControlLabel, null, (0, import_i18n10.__)("Open in new tab", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true }, /* @__PURE__ */ React30.createElement(import_ui25.Switch, { checked: value, onClick })));
|
|
1438
1464
|
};
|
|
1439
1465
|
async function fetchOptions(ajaxUrl, params) {
|
|
1440
1466
|
if (!params || !ajaxUrl) {
|
|
@@ -1475,10 +1501,10 @@ function debounce(fn, timeout) {
|
|
|
1475
1501
|
}
|
|
1476
1502
|
|
|
1477
1503
|
// src/controls/gap-control.tsx
|
|
1478
|
-
var
|
|
1504
|
+
var React31 = __toESM(require("react"));
|
|
1479
1505
|
var import_editor_props17 = require("@elementor/editor-props");
|
|
1480
1506
|
var import_icons7 = require("@elementor/icons");
|
|
1481
|
-
var
|
|
1507
|
+
var import_ui26 = require("@elementor/ui");
|
|
1482
1508
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1483
1509
|
var GapControl = createControl(({ label }) => {
|
|
1484
1510
|
const {
|
|
@@ -1500,8 +1526,8 @@ var GapControl = createControl(({ label }) => {
|
|
|
1500
1526
|
});
|
|
1501
1527
|
};
|
|
1502
1528
|
const LinkedIcon = isLinked ? import_icons7.LinkIcon : import_icons7.DetachIcon;
|
|
1503
|
-
return /* @__PURE__ */
|
|
1504
|
-
|
|
1529
|
+
return /* @__PURE__ */ React31.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React31.createElement(import_ui26.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(
|
|
1530
|
+
import_ui26.ToggleButton,
|
|
1505
1531
|
{
|
|
1506
1532
|
"aria-label": (0, import_i18n11.__)("Link inputs", "elementor"),
|
|
1507
1533
|
size: "tiny",
|
|
@@ -1510,28 +1536,28 @@ var GapControl = createControl(({ label }) => {
|
|
|
1510
1536
|
sx: { marginLeft: "auto" },
|
|
1511
1537
|
onChange: onLinkToggle
|
|
1512
1538
|
},
|
|
1513
|
-
/* @__PURE__ */
|
|
1514
|
-
)), /* @__PURE__ */
|
|
1539
|
+
/* @__PURE__ */ React31.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1540
|
+
)), /* @__PURE__ */ React31.createElement(import_ui26.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui26.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(ControlLabel, null, (0, import_i18n11.__)("Column", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React31.createElement(import_ui26.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(ControlLabel, null, (0, import_i18n11.__)("Row", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Control4, { bind: "row", isLinked })))));
|
|
1515
1541
|
});
|
|
1516
1542
|
var Control4 = ({ bind, isLinked }) => {
|
|
1517
1543
|
if (isLinked) {
|
|
1518
|
-
return /* @__PURE__ */
|
|
1544
|
+
return /* @__PURE__ */ React31.createElement(SizeControl, null);
|
|
1519
1545
|
}
|
|
1520
|
-
return /* @__PURE__ */
|
|
1546
|
+
return /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React31.createElement(SizeControl, null));
|
|
1521
1547
|
};
|
|
1522
1548
|
|
|
1523
1549
|
// src/controls/svg-media-control.tsx
|
|
1524
|
-
var
|
|
1550
|
+
var React32 = __toESM(require("react"));
|
|
1525
1551
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
1526
1552
|
var import_icons8 = require("@elementor/icons");
|
|
1527
|
-
var
|
|
1553
|
+
var import_ui27 = require("@elementor/ui");
|
|
1528
1554
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
1529
1555
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1530
1556
|
var TILE_SIZE = 8;
|
|
1531
1557
|
var TILE_WHITE = "transparent";
|
|
1532
1558
|
var TILE_BLACK = "#c1c1c1";
|
|
1533
1559
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
1534
|
-
var StyledCard = (0,
|
|
1560
|
+
var StyledCard = (0, import_ui27.styled)(import_ui27.Card)`
|
|
1535
1561
|
background-color: white;
|
|
1536
1562
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
1537
1563
|
background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
|
|
@@ -1540,7 +1566,7 @@ var StyledCard = (0, import_ui24.styled)(import_ui24.Card)`
|
|
|
1540
1566
|
${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
|
|
1541
1567
|
border: none;
|
|
1542
1568
|
`;
|
|
1543
|
-
var StyledCardMediaContainer = (0,
|
|
1569
|
+
var StyledCardMediaContainer = (0, import_ui27.styled)(import_ui27.Stack)`
|
|
1544
1570
|
position: relative;
|
|
1545
1571
|
height: 140px;
|
|
1546
1572
|
object-fit: contain;
|
|
@@ -1569,16 +1595,16 @@ var SvgMediaControl = createControl(() => {
|
|
|
1569
1595
|
});
|
|
1570
1596
|
}
|
|
1571
1597
|
});
|
|
1572
|
-
return /* @__PURE__ */
|
|
1573
|
-
|
|
1598
|
+
return /* @__PURE__ */ React32.createElement(import_ui27.Stack, { gap: 1 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, " ", (0, import_i18n12.__)("Choose SVG", "elementor"), " "), /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React32.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React32.createElement(import_ui27.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React32.createElement(
|
|
1599
|
+
import_ui27.CardMedia,
|
|
1574
1600
|
{
|
|
1575
1601
|
component: "img",
|
|
1576
1602
|
image: src,
|
|
1577
1603
|
alt: (0, import_i18n12.__)("Preview SVG", "elementor"),
|
|
1578
1604
|
sx: { maxHeight: "140px", width: "50px" }
|
|
1579
1605
|
}
|
|
1580
|
-
)), /* @__PURE__ */
|
|
1581
|
-
|
|
1606
|
+
)), /* @__PURE__ */ React32.createElement(
|
|
1607
|
+
import_ui27.CardOverlay,
|
|
1582
1608
|
{
|
|
1583
1609
|
sx: {
|
|
1584
1610
|
"&:hover": {
|
|
@@ -1586,8 +1612,8 @@ var SvgMediaControl = createControl(() => {
|
|
|
1586
1612
|
}
|
|
1587
1613
|
}
|
|
1588
1614
|
},
|
|
1589
|
-
/* @__PURE__ */
|
|
1590
|
-
|
|
1615
|
+
/* @__PURE__ */ React32.createElement(import_ui27.Stack, { gap: 1 }, /* @__PURE__ */ React32.createElement(
|
|
1616
|
+
import_ui27.Button,
|
|
1591
1617
|
{
|
|
1592
1618
|
size: "tiny",
|
|
1593
1619
|
color: "inherit",
|
|
@@ -1595,13 +1621,13 @@ var SvgMediaControl = createControl(() => {
|
|
|
1595
1621
|
onClick: () => open({ mode: "browse" })
|
|
1596
1622
|
},
|
|
1597
1623
|
(0, import_i18n12.__)("Select SVG", "elementor")
|
|
1598
|
-
), /* @__PURE__ */
|
|
1599
|
-
|
|
1624
|
+
), /* @__PURE__ */ React32.createElement(
|
|
1625
|
+
import_ui27.Button,
|
|
1600
1626
|
{
|
|
1601
1627
|
size: "tiny",
|
|
1602
1628
|
variant: "text",
|
|
1603
1629
|
color: "inherit",
|
|
1604
|
-
startIcon: /* @__PURE__ */
|
|
1630
|
+
startIcon: /* @__PURE__ */ React32.createElement(import_icons8.UploadIcon, null),
|
|
1605
1631
|
onClick: () => open({ mode: "upload" })
|
|
1606
1632
|
},
|
|
1607
1633
|
(0, import_i18n12.__)("Upload SVG", "elementor")
|
|
@@ -1610,15 +1636,15 @@ var SvgMediaControl = createControl(() => {
|
|
|
1610
1636
|
});
|
|
1611
1637
|
|
|
1612
1638
|
// src/controls/background-control/background-control.tsx
|
|
1613
|
-
var
|
|
1639
|
+
var React38 = __toESM(require("react"));
|
|
1614
1640
|
var import_editor_props23 = require("@elementor/editor-props");
|
|
1615
|
-
var
|
|
1641
|
+
var import_ui34 = require("@elementor/ui");
|
|
1616
1642
|
var import_i18n18 = require("@wordpress/i18n");
|
|
1617
1643
|
|
|
1618
1644
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
1619
|
-
var
|
|
1645
|
+
var React37 = __toESM(require("react"));
|
|
1620
1646
|
var import_editor_props22 = require("@elementor/editor-props");
|
|
1621
|
-
var
|
|
1647
|
+
var import_ui33 = require("@elementor/ui");
|
|
1622
1648
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
1623
1649
|
var import_i18n17 = require("@wordpress/i18n");
|
|
1624
1650
|
|
|
@@ -1627,33 +1653,33 @@ var import_env = require("@elementor/env");
|
|
|
1627
1653
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
1628
1654
|
|
|
1629
1655
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
1630
|
-
var
|
|
1656
|
+
var React33 = __toESM(require("react"));
|
|
1631
1657
|
var import_icons9 = require("@elementor/icons");
|
|
1632
|
-
var
|
|
1658
|
+
var import_ui28 = require("@elementor/ui");
|
|
1633
1659
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1634
1660
|
var attachmentControlOptions = [
|
|
1635
1661
|
{
|
|
1636
1662
|
value: "fixed",
|
|
1637
1663
|
label: (0, import_i18n13.__)("Fixed", "elementor"),
|
|
1638
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1664
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons9.PinIcon, { fontSize: size }),
|
|
1639
1665
|
showTooltip: true
|
|
1640
1666
|
},
|
|
1641
1667
|
{
|
|
1642
1668
|
value: "scroll",
|
|
1643
1669
|
label: (0, import_i18n13.__)("Scroll", "elementor"),
|
|
1644
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1670
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(import_icons9.PinnedOffIcon, { fontSize: size }),
|
|
1645
1671
|
showTooltip: true
|
|
1646
1672
|
}
|
|
1647
1673
|
];
|
|
1648
1674
|
var BackgroundImageOverlayAttachment = () => {
|
|
1649
|
-
return /* @__PURE__ */
|
|
1675
|
+
return /* @__PURE__ */ React33.createElement(PopoverGridContainer, null, /* @__PURE__ */ React33.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, (0, import_i18n13.__)("Attachment", "elementor"))), /* @__PURE__ */ React33.createElement(import_ui28.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React33.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
1650
1676
|
};
|
|
1651
1677
|
|
|
1652
1678
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
1653
|
-
var
|
|
1679
|
+
var React34 = __toESM(require("react"));
|
|
1654
1680
|
var import_editor_props19 = require("@elementor/editor-props");
|
|
1655
1681
|
var import_icons10 = require("@elementor/icons");
|
|
1656
|
-
var
|
|
1682
|
+
var import_ui29 = require("@elementor/ui");
|
|
1657
1683
|
var import_i18n14 = require("@wordpress/i18n");
|
|
1658
1684
|
var backgroundPositionOptions = [
|
|
1659
1685
|
{ label: (0, import_i18n14.__)("Center center", "elementor"), value: "center center" },
|
|
@@ -1679,82 +1705,82 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
1679
1705
|
stringPropContext.setValue(value);
|
|
1680
1706
|
}
|
|
1681
1707
|
};
|
|
1682
|
-
return /* @__PURE__ */
|
|
1683
|
-
|
|
1708
|
+
return /* @__PURE__ */ React34.createElement(import_ui29.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(PopoverGridContainer, null, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, (0, import_i18n14.__)("Position", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(
|
|
1709
|
+
import_ui29.Select,
|
|
1684
1710
|
{
|
|
1685
1711
|
size: "tiny",
|
|
1686
1712
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? "",
|
|
1687
1713
|
onChange: handlePositionChange,
|
|
1688
1714
|
fullWidth: true
|
|
1689
1715
|
},
|
|
1690
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
1691
|
-
)))), isCustom ? /* @__PURE__ */
|
|
1716
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React34.createElement(import_ui29.MenuItem, { key: value, value: value ?? "" }, label))
|
|
1717
|
+
)))), isCustom ? /* @__PURE__ */ React34.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React34.createElement(SizeControl, { startIcon: /* @__PURE__ */ React34.createElement(import_icons10.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React34.createElement(import_ui29.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React34.createElement(SizeControl, { startIcon: /* @__PURE__ */ React34.createElement(import_icons10.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
|
|
1692
1718
|
};
|
|
1693
1719
|
|
|
1694
1720
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
1695
|
-
var
|
|
1721
|
+
var React35 = __toESM(require("react"));
|
|
1696
1722
|
var import_icons11 = require("@elementor/icons");
|
|
1697
|
-
var
|
|
1723
|
+
var import_ui30 = require("@elementor/ui");
|
|
1698
1724
|
var import_i18n15 = require("@wordpress/i18n");
|
|
1699
1725
|
var repeatControlOptions = [
|
|
1700
1726
|
{
|
|
1701
1727
|
value: "repeat",
|
|
1702
1728
|
label: (0, import_i18n15.__)("Repeat", "elementor"),
|
|
1703
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1729
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(import_icons11.GridDotsIcon, { fontSize: size }),
|
|
1704
1730
|
showTooltip: true
|
|
1705
1731
|
},
|
|
1706
1732
|
{
|
|
1707
1733
|
value: "repeat-x",
|
|
1708
1734
|
label: (0, import_i18n15.__)("Repeat-x", "elementor"),
|
|
1709
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1735
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(import_icons11.DotsHorizontalIcon, { fontSize: size }),
|
|
1710
1736
|
showTooltip: true
|
|
1711
1737
|
},
|
|
1712
1738
|
{
|
|
1713
1739
|
value: "repeat-y",
|
|
1714
1740
|
label: (0, import_i18n15.__)("Repeat-y", "elementor"),
|
|
1715
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1741
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(import_icons11.DotsVerticalIcon, { fontSize: size }),
|
|
1716
1742
|
showTooltip: true
|
|
1717
1743
|
},
|
|
1718
1744
|
{
|
|
1719
1745
|
value: "no-repeat",
|
|
1720
1746
|
label: (0, import_i18n15.__)("No-Repeat", "elementor"),
|
|
1721
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1747
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(import_icons11.XIcon, { fontSize: size }),
|
|
1722
1748
|
showTooltip: true
|
|
1723
1749
|
}
|
|
1724
1750
|
];
|
|
1725
1751
|
var BackgroundImageOverlayRepeat = () => {
|
|
1726
|
-
return /* @__PURE__ */
|
|
1752
|
+
return /* @__PURE__ */ React35.createElement(PopoverGridContainer, null, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, (0, import_i18n15.__)("Repeat", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React35.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
1727
1753
|
};
|
|
1728
1754
|
|
|
1729
1755
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
1730
|
-
var
|
|
1756
|
+
var React36 = __toESM(require("react"));
|
|
1731
1757
|
var import_editor_props20 = require("@elementor/editor-props");
|
|
1732
1758
|
var import_icons12 = require("@elementor/icons");
|
|
1733
|
-
var
|
|
1759
|
+
var import_ui31 = require("@elementor/ui");
|
|
1734
1760
|
var import_i18n16 = require("@wordpress/i18n");
|
|
1735
1761
|
var sizeControlOptions = [
|
|
1736
1762
|
{
|
|
1737
1763
|
value: "auto",
|
|
1738
1764
|
label: (0, import_i18n16.__)("Auto", "elementor"),
|
|
1739
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1765
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.LetterAIcon, { fontSize: size }),
|
|
1740
1766
|
showTooltip: true
|
|
1741
1767
|
},
|
|
1742
1768
|
{
|
|
1743
1769
|
value: "cover",
|
|
1744
1770
|
label: (0, import_i18n16.__)("Cover", "elementor"),
|
|
1745
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1771
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.ArrowsMaximizeIcon, { fontSize: size }),
|
|
1746
1772
|
showTooltip: true
|
|
1747
1773
|
},
|
|
1748
1774
|
{
|
|
1749
1775
|
value: "contain",
|
|
1750
1776
|
label: (0, import_i18n16.__)("Contain", "elementor"),
|
|
1751
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1777
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.ArrowBarBothIcon, { fontSize: size }),
|
|
1752
1778
|
showTooltip: true
|
|
1753
1779
|
},
|
|
1754
1780
|
{
|
|
1755
1781
|
value: "custom",
|
|
1756
1782
|
label: (0, import_i18n16.__)("Custom", "elementor"),
|
|
1757
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1783
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons12.PencilIcon, { fontSize: size }),
|
|
1758
1784
|
showTooltip: true
|
|
1759
1785
|
}
|
|
1760
1786
|
];
|
|
@@ -1769,7 +1795,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
1769
1795
|
stringPropContext.setValue(size);
|
|
1770
1796
|
}
|
|
1771
1797
|
};
|
|
1772
|
-
return /* @__PURE__ */
|
|
1798
|
+
return /* @__PURE__ */ React36.createElement(import_ui31.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, (0, import_i18n16.__)("Size", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React36.createElement(
|
|
1773
1799
|
ControlToggleButtonGroup,
|
|
1774
1800
|
{
|
|
1775
1801
|
exclusive: true,
|
|
@@ -1777,20 +1803,20 @@ var BackgroundImageOverlaySize = () => {
|
|
|
1777
1803
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
|
|
1778
1804
|
onChange: handleSizeChange
|
|
1779
1805
|
}
|
|
1780
|
-
)))), isCustom ? /* @__PURE__ */
|
|
1806
|
+
)))), isCustom ? /* @__PURE__ */ React36.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: /* @__PURE__ */ React36.createElement(import_icons12.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: /* @__PURE__ */ React36.createElement(import_icons12.ArrowsMoveVerticalIcon, { fontSize: "tiny" }) })))))) : null);
|
|
1781
1807
|
};
|
|
1782
1808
|
|
|
1783
1809
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
1784
1810
|
var import_react12 = require("react");
|
|
1785
1811
|
var import_editor_props21 = require("@elementor/editor-props");
|
|
1786
|
-
var
|
|
1812
|
+
var import_ui32 = require("@elementor/ui");
|
|
1787
1813
|
var useBackgroundTabsHistory = ({
|
|
1788
1814
|
color: initialBackgroundColorOverlay2,
|
|
1789
1815
|
image: initialBackgroundImageOverlay
|
|
1790
1816
|
}) => {
|
|
1791
1817
|
const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props21.backgroundImageOverlayPropTypeUtil);
|
|
1792
1818
|
const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props21.backgroundColorOverlayPropTypeUtil);
|
|
1793
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
1819
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui32.useTabs)(colorValue ? "color" : "image");
|
|
1794
1820
|
const valuesHistory = (0, import_react12.useRef)({
|
|
1795
1821
|
image: initialBackgroundImageOverlay,
|
|
1796
1822
|
color: initialBackgroundColorOverlay2
|
|
@@ -1856,7 +1882,7 @@ var backgroundResolutionOptions = [
|
|
|
1856
1882
|
];
|
|
1857
1883
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
1858
1884
|
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props22.backgroundOverlayPropTypeUtil);
|
|
1859
|
-
return /* @__PURE__ */
|
|
1885
|
+
return /* @__PURE__ */ React37.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React37.createElement(
|
|
1860
1886
|
Repeater,
|
|
1861
1887
|
{
|
|
1862
1888
|
values: overlayValues ?? [],
|
|
@@ -1872,58 +1898,58 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
1872
1898
|
));
|
|
1873
1899
|
});
|
|
1874
1900
|
var ItemContent2 = ({ bind }) => {
|
|
1875
|
-
return /* @__PURE__ */
|
|
1901
|
+
return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(Content2, null));
|
|
1876
1902
|
};
|
|
1877
1903
|
var Content2 = () => {
|
|
1878
1904
|
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
1879
1905
|
image: getInitialBackgroundOverlay().value,
|
|
1880
1906
|
color: initialBackgroundColorOverlay.value
|
|
1881
1907
|
});
|
|
1882
|
-
return /* @__PURE__ */
|
|
1908
|
+
return /* @__PURE__ */ React37.createElement(import_ui33.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React37.createElement(import_ui33.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React37.createElement(import_ui33.Tabs, { ...getTabsProps(), "aria-label": (0, import_i18n17.__)("Background Overlay", "elementor") }, /* @__PURE__ */ React37.createElement(import_ui33.Tab, { label: (0, import_i18n17.__)("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React37.createElement(import_ui33.Tab, { label: (0, import_i18n17.__)("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React37.createElement(import_ui33.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React37.createElement(PopoverContent, null, /* @__PURE__ */ React37.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React37.createElement(import_ui33.TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React37.createElement(import_ui33.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React37.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ColorControl, { propTypeUtil: import_editor_props22.backgroundColorOverlayPropTypeUtil })))));
|
|
1883
1909
|
};
|
|
1884
1910
|
var ItemIcon2 = ({ value }) => {
|
|
1885
1911
|
switch (value.$$type) {
|
|
1886
1912
|
case "background-image-overlay":
|
|
1887
|
-
return /* @__PURE__ */
|
|
1913
|
+
return /* @__PURE__ */ React37.createElement(ItemIconImage, { value });
|
|
1888
1914
|
case "background-color-overlay":
|
|
1889
|
-
return /* @__PURE__ */
|
|
1915
|
+
return /* @__PURE__ */ React37.createElement(ItemIconColor, { value });
|
|
1890
1916
|
default:
|
|
1891
1917
|
return null;
|
|
1892
1918
|
}
|
|
1893
1919
|
};
|
|
1894
1920
|
var ItemIconColor = ({ value }) => {
|
|
1895
|
-
return /* @__PURE__ */
|
|
1921
|
+
return /* @__PURE__ */ React37.createElement(import_ui33.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
|
|
1896
1922
|
};
|
|
1897
1923
|
var ItemIconImage = ({ value }) => {
|
|
1898
1924
|
const { imageUrl } = useImage(value);
|
|
1899
|
-
return /* @__PURE__ */
|
|
1925
|
+
return /* @__PURE__ */ React37.createElement(import_ui33.CardMedia, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
|
|
1900
1926
|
};
|
|
1901
1927
|
var ItemLabel2 = ({ value }) => {
|
|
1902
1928
|
switch (value.$$type) {
|
|
1903
1929
|
case "background-image-overlay":
|
|
1904
|
-
return /* @__PURE__ */
|
|
1930
|
+
return /* @__PURE__ */ React37.createElement(ItemLabelImage, { value });
|
|
1905
1931
|
case "background-color-overlay":
|
|
1906
|
-
return /* @__PURE__ */
|
|
1932
|
+
return /* @__PURE__ */ React37.createElement(ItemLabelColor, { value });
|
|
1907
1933
|
default:
|
|
1908
1934
|
return null;
|
|
1909
1935
|
}
|
|
1910
1936
|
};
|
|
1911
1937
|
var ItemLabelColor = ({ value }) => {
|
|
1912
|
-
return /* @__PURE__ */
|
|
1938
|
+
return /* @__PURE__ */ React37.createElement("span", null, value.value);
|
|
1913
1939
|
};
|
|
1914
1940
|
var ItemLabelImage = ({ value }) => {
|
|
1915
1941
|
const { imageTitle } = useImage(value);
|
|
1916
|
-
return /* @__PURE__ */
|
|
1942
|
+
return /* @__PURE__ */ React37.createElement("span", null, imageTitle);
|
|
1917
1943
|
};
|
|
1918
1944
|
var ImageOverlayContent = () => {
|
|
1919
1945
|
const propContext = useBoundProp(import_editor_props22.backgroundImageOverlayPropTypeUtil);
|
|
1920
|
-
return /* @__PURE__ */
|
|
1946
|
+
return /* @__PURE__ */ React37.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React37.createElement(import_ui33.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React37.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(
|
|
1921
1947
|
ImageControl,
|
|
1922
1948
|
{
|
|
1923
1949
|
resolutionLabel: (0, import_i18n17.__)("Resolution", "elementor"),
|
|
1924
1950
|
sizes: backgroundResolutionOptions
|
|
1925
1951
|
}
|
|
1926
|
-
)))), /* @__PURE__ */
|
|
1952
|
+
)))), /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React37.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React37.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React37.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React37.createElement(BackgroundImageOverlayAttachment, null)));
|
|
1927
1953
|
};
|
|
1928
1954
|
var useImage = (image) => {
|
|
1929
1955
|
let imageTitle, imageUrl = null;
|
|
@@ -1943,7 +1969,7 @@ var useImage = (image) => {
|
|
|
1943
1969
|
// src/controls/background-control/background-control.tsx
|
|
1944
1970
|
var BackgroundControl = createControl(() => {
|
|
1945
1971
|
const propContext = useBoundProp(import_editor_props23.backgroundPropTypeUtil);
|
|
1946
|
-
return /* @__PURE__ */
|
|
1972
|
+
return /* @__PURE__ */ React38.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React38.createElement(SectionContent, null, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React38.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React38.createElement(import_ui34.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, (0, import_i18n18.__)("Color", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ColorControl, null))))));
|
|
1947
1973
|
});
|
|
1948
1974
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1949
1975
|
0 && (module.exports = {
|