@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.mjs
CHANGED
|
@@ -322,7 +322,7 @@ var SelectControl = createControl(({ options, onChange }) => {
|
|
|
322
322
|
var ImageControl = createControl(
|
|
323
323
|
({ sizes, resolutionLabel = __2("Image resolution", "elementor") }) => {
|
|
324
324
|
const propContext = useBoundProp(imagePropTypeUtil);
|
|
325
|
-
return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(Stack2, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", __2("Choose image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, null)), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(Grid, { container: true, gap:
|
|
325
|
+
return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(Stack2, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", __2("Choose image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, null)), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }))))));
|
|
326
326
|
}
|
|
327
327
|
);
|
|
328
328
|
|
|
@@ -492,7 +492,7 @@ var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, st
|
|
|
492
492
|
}
|
|
493
493
|
),
|
|
494
494
|
placeholder,
|
|
495
|
-
startAdornment: startIcon
|
|
495
|
+
startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(InputAdornment2, { position: "start" }, startIcon) : void 0,
|
|
496
496
|
type: "number",
|
|
497
497
|
value: Number.isNaN(state?.size) ? "" : state?.size,
|
|
498
498
|
onChange: handleSizeChange
|
|
@@ -501,13 +501,18 @@ var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, st
|
|
|
501
501
|
});
|
|
502
502
|
|
|
503
503
|
// src/controls/stroke-control.tsx
|
|
504
|
-
import * as
|
|
504
|
+
import * as React17 from "react";
|
|
505
505
|
import { strokePropTypeUtil } from "@elementor/editor-props";
|
|
506
|
-
import { Grid as Grid2
|
|
506
|
+
import { Grid as Grid2 } from "@elementor/ui";
|
|
507
507
|
import { __ as __3 } from "@wordpress/i18n";
|
|
508
508
|
|
|
509
|
-
// src/
|
|
509
|
+
// src/components/section-content.tsx
|
|
510
510
|
import * as React15 from "react";
|
|
511
|
+
import { Stack as Stack3 } from "@elementor/ui";
|
|
512
|
+
var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React15.createElement(Stack3, { gap, sx: { ...sx } }, children);
|
|
513
|
+
|
|
514
|
+
// src/controls/color-control.tsx
|
|
515
|
+
import * as React16 from "react";
|
|
511
516
|
import { colorPropTypeUtil } from "@elementor/editor-props";
|
|
512
517
|
import { UnstableColorField } from "@elementor/ui";
|
|
513
518
|
var ColorControl = createControl(({ propTypeUtil = colorPropTypeUtil, ...props }) => {
|
|
@@ -515,25 +520,40 @@ var ColorControl = createControl(({ propTypeUtil = colorPropTypeUtil, ...props }
|
|
|
515
520
|
const handleChange = (selectedColor) => {
|
|
516
521
|
setValue(selectedColor);
|
|
517
522
|
};
|
|
518
|
-
return /* @__PURE__ */
|
|
523
|
+
return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(UnstableColorField, { size: "tiny", ...props, value: value ?? "", onChange: handleChange, fullWidth: true }));
|
|
519
524
|
});
|
|
520
525
|
|
|
521
526
|
// src/controls/stroke-control.tsx
|
|
522
527
|
var units = ["px", "em", "rem"];
|
|
523
528
|
var StrokeControl = createControl(() => {
|
|
524
529
|
const propContext = useBoundProp(strokePropTypeUtil);
|
|
525
|
-
return /* @__PURE__ */
|
|
530
|
+
return /* @__PURE__ */ React17.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React17.createElement(SectionContent, null, /* @__PURE__ */ React17.createElement(Control, { bind: "width", label: __3("Stroke width", "elementor") }, /* @__PURE__ */ React17.createElement(SizeControl, { units })), /* @__PURE__ */ React17.createElement(Control, { bind: "color", label: __3("Stroke color", "elementor") }, /* @__PURE__ */ React17.createElement(ColorControl, null))));
|
|
526
531
|
});
|
|
527
|
-
var Control = ({ bind, label, children }) => /* @__PURE__ */
|
|
532
|
+
var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(ControlLabel, null, label)), /* @__PURE__ */ React17.createElement(Grid2, { item: true, xs: 6 }, children)));
|
|
528
533
|
|
|
529
534
|
// src/controls/box-shadow-repeater-control.tsx
|
|
530
|
-
import * as
|
|
535
|
+
import * as React21 from "react";
|
|
531
536
|
import { boxShadowPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
|
|
532
|
-
import { Grid as
|
|
537
|
+
import { Grid as Grid4, Typography as Typography3, UnstableColorIndicator } from "@elementor/ui";
|
|
533
538
|
import { __ as __5 } from "@wordpress/i18n";
|
|
534
539
|
|
|
540
|
+
// src/components/popover-content.tsx
|
|
541
|
+
import * as React18 from "react";
|
|
542
|
+
import { Stack as Stack4 } from "@elementor/ui";
|
|
543
|
+
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React18.createElement(Stack4, { alignItems, gap, p }, children);
|
|
544
|
+
|
|
545
|
+
// src/components/popover-grid-container.tsx
|
|
546
|
+
import * as React19 from "react";
|
|
547
|
+
import { Grid as Grid3 } from "@elementor/ui";
|
|
548
|
+
var PopoverGridContainer = ({
|
|
549
|
+
gap = 1.5,
|
|
550
|
+
alignItems = "center",
|
|
551
|
+
flexWrap = "nowrap",
|
|
552
|
+
children
|
|
553
|
+
}) => /* @__PURE__ */ React19.createElement(Grid3, { container: true, gap, alignItems, flexWrap }, children);
|
|
554
|
+
|
|
535
555
|
// src/components/repeater.tsx
|
|
536
|
-
import * as
|
|
556
|
+
import * as React20 from "react";
|
|
537
557
|
import { useRef, useState as useState2 } from "react";
|
|
538
558
|
import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "@elementor/icons";
|
|
539
559
|
import {
|
|
@@ -542,7 +562,7 @@ import {
|
|
|
542
562
|
Box,
|
|
543
563
|
IconButton,
|
|
544
564
|
Popover,
|
|
545
|
-
Stack as
|
|
565
|
+
Stack as Stack5,
|
|
546
566
|
Typography as Typography2,
|
|
547
567
|
UnstableTag,
|
|
548
568
|
usePopupState as usePopupState2
|
|
@@ -584,19 +604,19 @@ var Repeater = ({
|
|
|
584
604
|
})
|
|
585
605
|
);
|
|
586
606
|
};
|
|
587
|
-
return /* @__PURE__ */
|
|
607
|
+
return /* @__PURE__ */ React20.createElement(SectionContent, null, /* @__PURE__ */ React20.createElement(Stack5, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React20.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React20.createElement(IconButton, { size: SIZE, onClick: addRepeaterItem, "aria-label": __4("Add item", "elementor") }, /* @__PURE__ */ React20.createElement(PlusIcon, { fontSize: SIZE }))), /* @__PURE__ */ React20.createElement(Stack5, { gap: 1, sx: { "&:empty": { display: "none" } } }, repeaterValues.map((value, index) => /* @__PURE__ */ React20.createElement(
|
|
588
608
|
RepeaterItem,
|
|
589
609
|
{
|
|
590
610
|
key: index,
|
|
591
611
|
bind: String(index),
|
|
592
612
|
disabled: value.disabled,
|
|
593
|
-
label: /* @__PURE__ */
|
|
594
|
-
startIcon: /* @__PURE__ */
|
|
613
|
+
label: /* @__PURE__ */ React20.createElement(itemSettings.Label, { value }),
|
|
614
|
+
startIcon: /* @__PURE__ */ React20.createElement(itemSettings.Icon, { value }),
|
|
595
615
|
removeItem: () => removeRepeaterItem(index),
|
|
596
616
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
597
617
|
toggleDisableItem: () => toggleDisableRepeaterItem(index)
|
|
598
618
|
},
|
|
599
|
-
(props) => /* @__PURE__ */
|
|
619
|
+
(props) => /* @__PURE__ */ React20.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
|
|
600
620
|
))));
|
|
601
621
|
};
|
|
602
622
|
var RepeaterItem = ({
|
|
@@ -614,7 +634,7 @@ var RepeaterItem = ({
|
|
|
614
634
|
const [anchorEl, setAnchorEl] = useState2(null);
|
|
615
635
|
const popoverState = usePopupState2({ popupId, variant: "popover" });
|
|
616
636
|
const popoverProps = bindPopover(popoverState);
|
|
617
|
-
return /* @__PURE__ */
|
|
637
|
+
return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
|
|
618
638
|
UnstableTag,
|
|
619
639
|
{
|
|
620
640
|
label,
|
|
@@ -624,33 +644,33 @@ var RepeaterItem = ({
|
|
|
624
644
|
"aria-label": __4("Open item", "elementor"),
|
|
625
645
|
...bindTrigger2(popoverState),
|
|
626
646
|
startIcon,
|
|
627
|
-
actions: /* @__PURE__ */
|
|
647
|
+
actions: /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
|
|
628
648
|
IconButton,
|
|
629
649
|
{
|
|
630
650
|
size: SIZE,
|
|
631
651
|
onClick: duplicateItem,
|
|
632
652
|
"aria-label": __4("Duplicate item", "elementor")
|
|
633
653
|
},
|
|
634
|
-
/* @__PURE__ */
|
|
635
|
-
), /* @__PURE__ */
|
|
654
|
+
/* @__PURE__ */ React20.createElement(CopyIcon, { fontSize: SIZE })
|
|
655
|
+
), /* @__PURE__ */ React20.createElement(
|
|
636
656
|
IconButton,
|
|
637
657
|
{
|
|
638
658
|
size: SIZE,
|
|
639
659
|
onClick: toggleDisableItem,
|
|
640
660
|
"aria-label": disabled ? __4("Enable item", "elementor") : __4("Disable item", "elementor")
|
|
641
661
|
},
|
|
642
|
-
disabled ? /* @__PURE__ */
|
|
643
|
-
), /* @__PURE__ */
|
|
662
|
+
disabled ? /* @__PURE__ */ React20.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React20.createElement(EyeIcon, { fontSize: SIZE })
|
|
663
|
+
), /* @__PURE__ */ React20.createElement(
|
|
644
664
|
IconButton,
|
|
645
665
|
{
|
|
646
666
|
size: SIZE,
|
|
647
667
|
onClick: removeItem,
|
|
648
668
|
"aria-label": __4("Remove item", "elementor")
|
|
649
669
|
},
|
|
650
|
-
/* @__PURE__ */
|
|
670
|
+
/* @__PURE__ */ React20.createElement(XIcon, { fontSize: SIZE })
|
|
651
671
|
))
|
|
652
672
|
}
|
|
653
|
-
), /* @__PURE__ */
|
|
673
|
+
), /* @__PURE__ */ React20.createElement(
|
|
654
674
|
Popover,
|
|
655
675
|
{
|
|
656
676
|
disablePortal: true,
|
|
@@ -663,14 +683,14 @@ var RepeaterItem = ({
|
|
|
663
683
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
664
684
|
...popoverProps
|
|
665
685
|
},
|
|
666
|
-
/* @__PURE__ */
|
|
686
|
+
/* @__PURE__ */ React20.createElement(Box, null, children({ anchorEl }))
|
|
667
687
|
));
|
|
668
688
|
};
|
|
669
689
|
|
|
670
690
|
// src/controls/box-shadow-repeater-control.tsx
|
|
671
691
|
var BoxShadowRepeaterControl = createControl(() => {
|
|
672
692
|
const { propType, value, setValue } = useBoundProp(boxShadowPropTypeUtil);
|
|
673
|
-
return /* @__PURE__ */
|
|
693
|
+
return /* @__PURE__ */ React21.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React21.createElement(
|
|
674
694
|
Repeater,
|
|
675
695
|
{
|
|
676
696
|
values: value ?? [],
|
|
@@ -685,13 +705,13 @@ var BoxShadowRepeaterControl = createControl(() => {
|
|
|
685
705
|
}
|
|
686
706
|
));
|
|
687
707
|
});
|
|
688
|
-
var ItemIcon = ({ value }) => /* @__PURE__ */
|
|
708
|
+
var ItemIcon = ({ value }) => /* @__PURE__ */ React21.createElement(UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
|
|
689
709
|
var ItemContent = ({ anchorEl, bind }) => {
|
|
690
|
-
return /* @__PURE__ */
|
|
710
|
+
return /* @__PURE__ */ React21.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React21.createElement(Content, { anchorEl }));
|
|
691
711
|
};
|
|
692
712
|
var Content = ({ anchorEl }) => {
|
|
693
713
|
const { propType, value, setValue } = useBoundProp(shadowPropTypeUtil);
|
|
694
|
-
return /* @__PURE__ */
|
|
714
|
+
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: __5("Color", "elementor") }, /* @__PURE__ */ React21.createElement(
|
|
695
715
|
ColorControl,
|
|
696
716
|
{
|
|
697
717
|
slotProps: {
|
|
@@ -708,7 +728,7 @@ var Content = ({ anchorEl }) => {
|
|
|
708
728
|
}
|
|
709
729
|
}
|
|
710
730
|
}
|
|
711
|
-
)), /* @__PURE__ */
|
|
731
|
+
)), /* @__PURE__ */ React21.createElement(Control2, { bind: "position", label: __5("Position", "elementor") }, /* @__PURE__ */ React21.createElement(
|
|
712
732
|
SelectControl,
|
|
713
733
|
{
|
|
714
734
|
options: [
|
|
@@ -716,9 +736,9 @@ var Content = ({ anchorEl }) => {
|
|
|
716
736
|
{ label: __5("Outset", "elementor"), value: null }
|
|
717
737
|
]
|
|
718
738
|
}
|
|
719
|
-
))), /* @__PURE__ */
|
|
739
|
+
))), /* @__PURE__ */ React21.createElement(PopoverGridContainer, null, /* @__PURE__ */ React21.createElement(Control2, { bind: "hOffset", label: __5("Horizontal", "elementor") }, /* @__PURE__ */ React21.createElement(SizeControl, null)), /* @__PURE__ */ React21.createElement(Control2, { bind: "vOffset", label: __5("Vertical", "elementor") }, /* @__PURE__ */ React21.createElement(SizeControl, null))), /* @__PURE__ */ React21.createElement(PopoverGridContainer, null, /* @__PURE__ */ React21.createElement(Control2, { bind: "blur", label: __5("Blur", "elementor") }, /* @__PURE__ */ React21.createElement(SizeControl, null)), /* @__PURE__ */ React21.createElement(Control2, { bind: "spread", label: __5("Spread", "elementor") }, /* @__PURE__ */ React21.createElement(SizeControl, null)))));
|
|
720
740
|
};
|
|
721
|
-
var Control2 = ({ label, bind, children }) => /* @__PURE__ */
|
|
741
|
+
var Control2 = ({ label, bind, children }) => /* @__PURE__ */ React21.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React21.createElement(Grid4, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React21.createElement(Grid4, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React21.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React21.createElement(Typography3, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React21.createElement(Grid4, { item: true, xs: 12 }, children))));
|
|
722
742
|
var ItemLabel = ({ value }) => {
|
|
723
743
|
const { position, hOffset, vOffset, blur, spread } = value.value;
|
|
724
744
|
const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
|
|
@@ -732,7 +752,7 @@ var ItemLabel = ({ value }) => {
|
|
|
732
752
|
blurSize + blurUnit,
|
|
733
753
|
spreadSize + spreadUnit
|
|
734
754
|
].join(" ");
|
|
735
|
-
return /* @__PURE__ */
|
|
755
|
+
return /* @__PURE__ */ React21.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
|
|
736
756
|
};
|
|
737
757
|
var initialShadow = {
|
|
738
758
|
$$type: "shadow",
|
|
@@ -762,11 +782,11 @@ var initialShadow = {
|
|
|
762
782
|
};
|
|
763
783
|
|
|
764
784
|
// src/controls/toggle-control.tsx
|
|
765
|
-
import * as
|
|
785
|
+
import * as React23 from "react";
|
|
766
786
|
import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
|
|
767
787
|
|
|
768
788
|
// src/components/control-toggle-button-group.tsx
|
|
769
|
-
import * as
|
|
789
|
+
import * as React22 from "react";
|
|
770
790
|
import {
|
|
771
791
|
styled as styled2,
|
|
772
792
|
ToggleButton,
|
|
@@ -790,7 +810,7 @@ var ControlToggleButtonGroup = ({
|
|
|
790
810
|
const handleChange = (_, newValue) => {
|
|
791
811
|
onChange(newValue);
|
|
792
812
|
};
|
|
793
|
-
return /* @__PURE__ */
|
|
813
|
+
return /* @__PURE__ */ React22.createElement(
|
|
794
814
|
StyledToggleButtonGroup,
|
|
795
815
|
{
|
|
796
816
|
justify,
|
|
@@ -802,7 +822,7 @@ var ControlToggleButtonGroup = ({
|
|
|
802
822
|
}
|
|
803
823
|
},
|
|
804
824
|
items.map(
|
|
805
|
-
({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */
|
|
825
|
+
({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */ React22.createElement(Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React22.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React22.createElement(Content3, { size }))) : /* @__PURE__ */ React22.createElement(
|
|
806
826
|
ToggleButton,
|
|
807
827
|
{
|
|
808
828
|
key: buttonValue,
|
|
@@ -811,7 +831,7 @@ var ControlToggleButtonGroup = ({
|
|
|
811
831
|
size,
|
|
812
832
|
fullWidth
|
|
813
833
|
},
|
|
814
|
-
/* @__PURE__ */
|
|
834
|
+
/* @__PURE__ */ React22.createElement(Content3, { size })
|
|
815
835
|
)
|
|
816
836
|
)
|
|
817
837
|
);
|
|
@@ -824,7 +844,7 @@ var ToggleControl = createControl(
|
|
|
824
844
|
const handleToggle = (option) => {
|
|
825
845
|
setValue(option);
|
|
826
846
|
};
|
|
827
|
-
return /* @__PURE__ */
|
|
847
|
+
return /* @__PURE__ */ React23.createElement(
|
|
828
848
|
ControlToggleButtonGroup,
|
|
829
849
|
{
|
|
830
850
|
items: options,
|
|
@@ -839,7 +859,7 @@ var ToggleControl = createControl(
|
|
|
839
859
|
);
|
|
840
860
|
|
|
841
861
|
// src/controls/number-control.tsx
|
|
842
|
-
import * as
|
|
862
|
+
import * as React24 from "react";
|
|
843
863
|
import { numberPropTypeUtil } from "@elementor/editor-props";
|
|
844
864
|
import { TextField as TextField4 } from "@elementor/ui";
|
|
845
865
|
var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
|
|
@@ -861,7 +881,7 @@ var NumberControl = createControl(
|
|
|
861
881
|
const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
|
|
862
882
|
setValue(Math.min(Math.max(formattedValue, min), max));
|
|
863
883
|
};
|
|
864
|
-
return /* @__PURE__ */
|
|
884
|
+
return /* @__PURE__ */ React24.createElement(ControlActions, null, /* @__PURE__ */ React24.createElement(
|
|
865
885
|
TextField4,
|
|
866
886
|
{
|
|
867
887
|
size: "tiny",
|
|
@@ -877,10 +897,10 @@ var NumberControl = createControl(
|
|
|
877
897
|
);
|
|
878
898
|
|
|
879
899
|
// src/controls/equal-unequal-sizes-control.tsx
|
|
880
|
-
import * as
|
|
900
|
+
import * as React25 from "react";
|
|
881
901
|
import { useId as useId2, useRef as useRef2 } from "react";
|
|
882
902
|
import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
|
|
883
|
-
import { bindPopover as bindPopover2, bindToggle, Grid as
|
|
903
|
+
import { bindPopover as bindPopover2, bindToggle, Grid as Grid5, Popover as Popover2, Stack as Stack6, ToggleButton as ToggleButton2, usePopupState as usePopupState3 } from "@elementor/ui";
|
|
884
904
|
import { __ as __6 } from "@wordpress/i18n";
|
|
885
905
|
var isEqualSizes = (propValue, items) => {
|
|
886
906
|
const values = Object.values(propValue);
|
|
@@ -934,7 +954,7 @@ function EqualUnequalSizesControl({
|
|
|
934
954
|
return splitEqualValue() ?? null;
|
|
935
955
|
};
|
|
936
956
|
const isMixed = !!multiSizeValue;
|
|
937
|
-
return /* @__PURE__ */
|
|
957
|
+
return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React25.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React25.createElement(ControlLabel, null, label)), /* @__PURE__ */ React25.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React25.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React25.createElement(SizeControl, { placeholder: isMixed ? __6("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React25.createElement(
|
|
938
958
|
ToggleButton2,
|
|
939
959
|
{
|
|
940
960
|
size: "tiny",
|
|
@@ -944,7 +964,7 @@ function EqualUnequalSizesControl({
|
|
|
944
964
|
selected: popupState.isOpen
|
|
945
965
|
},
|
|
946
966
|
icon
|
|
947
|
-
)))), /* @__PURE__ */
|
|
967
|
+
)))), /* @__PURE__ */ React25.createElement(
|
|
948
968
|
Popover2,
|
|
949
969
|
{
|
|
950
970
|
disablePortal: true,
|
|
@@ -959,19 +979,19 @@ function EqualUnequalSizesControl({
|
|
|
959
979
|
},
|
|
960
980
|
...bindPopover2(popupState),
|
|
961
981
|
slotProps: {
|
|
962
|
-
paper: { sx: { mt: 0.5,
|
|
982
|
+
paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } }
|
|
963
983
|
}
|
|
964
984
|
},
|
|
965
|
-
/* @__PURE__ */
|
|
985
|
+
/* @__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] }))))
|
|
966
986
|
));
|
|
967
987
|
}
|
|
968
|
-
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */
|
|
988
|
+
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React25.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React25.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React25.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React25.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React25.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React25.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React25.createElement(SizeControl, { startIcon: item.icon })))));
|
|
969
989
|
|
|
970
990
|
// src/controls/linked-dimensions-control.tsx
|
|
971
|
-
import * as
|
|
991
|
+
import * as React26 from "react";
|
|
972
992
|
import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
|
|
973
993
|
import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
|
|
974
|
-
import { Grid as
|
|
994
|
+
import { Grid as Grid6, Stack as Stack7, ToggleButton as ToggleButton3 } from "@elementor/ui";
|
|
975
995
|
import { __ as __7 } from "@wordpress/i18n";
|
|
976
996
|
var LinkedDimensionsControl = createControl(({ label }) => {
|
|
977
997
|
const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp(dimensionsPropTypeUtil);
|
|
@@ -991,7 +1011,7 @@ var LinkedDimensionsControl = createControl(({ label }) => {
|
|
|
991
1011
|
});
|
|
992
1012
|
};
|
|
993
1013
|
const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
|
|
994
|
-
return /* @__PURE__ */
|
|
1014
|
+
return /* @__PURE__ */ React26.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React26.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label), /* @__PURE__ */ React26.createElement(
|
|
995
1015
|
ToggleButton3,
|
|
996
1016
|
{
|
|
997
1017
|
"aria-label": __7("Link inputs", "elementor"),
|
|
@@ -1001,47 +1021,47 @@ var LinkedDimensionsControl = createControl(({ label }) => {
|
|
|
1001
1021
|
sx: { marginLeft: "auto" },
|
|
1002
1022
|
onChange: onLinkToggle
|
|
1003
1023
|
},
|
|
1004
|
-
/* @__PURE__ */
|
|
1005
|
-
)), /* @__PURE__ */
|
|
1024
|
+
/* @__PURE__ */ React26.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1025
|
+
)), /* @__PURE__ */ React26.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React26.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
|
|
1006
1026
|
Control3,
|
|
1007
1027
|
{
|
|
1008
1028
|
bind: "top",
|
|
1009
|
-
startIcon: /* @__PURE__ */
|
|
1029
|
+
startIcon: /* @__PURE__ */ React26.createElement(SideTopIcon, { fontSize: "tiny" }),
|
|
1010
1030
|
isLinked
|
|
1011
1031
|
}
|
|
1012
|
-
))), /* @__PURE__ */
|
|
1032
|
+
))), /* @__PURE__ */ React26.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, __7("Right", "elementor"))), /* @__PURE__ */ React26.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
|
|
1013
1033
|
Control3,
|
|
1014
1034
|
{
|
|
1015
1035
|
bind: "right",
|
|
1016
|
-
startIcon: /* @__PURE__ */
|
|
1036
|
+
startIcon: /* @__PURE__ */ React26.createElement(SideRightIcon, { fontSize: "tiny" }),
|
|
1017
1037
|
isLinked
|
|
1018
1038
|
}
|
|
1019
|
-
)))), /* @__PURE__ */
|
|
1039
|
+
)))), /* @__PURE__ */ React26.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React26.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
|
|
1020
1040
|
Control3,
|
|
1021
1041
|
{
|
|
1022
1042
|
bind: "bottom",
|
|
1023
|
-
startIcon: /* @__PURE__ */
|
|
1043
|
+
startIcon: /* @__PURE__ */ React26.createElement(SideBottomIcon, { fontSize: "tiny" }),
|
|
1024
1044
|
isLinked
|
|
1025
1045
|
}
|
|
1026
|
-
))), /* @__PURE__ */
|
|
1046
|
+
))), /* @__PURE__ */ React26.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, __7("Left", "elementor"))), /* @__PURE__ */ React26.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(
|
|
1027
1047
|
Control3,
|
|
1028
1048
|
{
|
|
1029
1049
|
bind: "left",
|
|
1030
|
-
startIcon: /* @__PURE__ */
|
|
1050
|
+
startIcon: /* @__PURE__ */ React26.createElement(SideLeftIcon, { fontSize: "tiny" }),
|
|
1031
1051
|
isLinked
|
|
1032
1052
|
}
|
|
1033
1053
|
)))));
|
|
1034
1054
|
});
|
|
1035
1055
|
var Control3 = ({ bind, startIcon, isLinked }) => {
|
|
1036
1056
|
if (isLinked) {
|
|
1037
|
-
return /* @__PURE__ */
|
|
1057
|
+
return /* @__PURE__ */ React26.createElement(SizeControl, { startIcon });
|
|
1038
1058
|
}
|
|
1039
|
-
return /* @__PURE__ */
|
|
1059
|
+
return /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React26.createElement(SizeControl, { startIcon }));
|
|
1040
1060
|
};
|
|
1041
1061
|
|
|
1042
1062
|
// src/controls/font-family-control.tsx
|
|
1043
1063
|
import { Fragment as Fragment4, useId as useId3, useState as useState3 } from "react";
|
|
1044
|
-
import * as
|
|
1064
|
+
import * as React27 from "react";
|
|
1045
1065
|
import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
|
|
1046
1066
|
import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon as XIcon2 } from "@elementor/icons";
|
|
1047
1067
|
import {
|
|
@@ -1112,16 +1132,16 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1112
1132
|
setSearchValue("");
|
|
1113
1133
|
popoverState.close();
|
|
1114
1134
|
};
|
|
1115
|
-
return /* @__PURE__ */
|
|
1135
|
+
return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(
|
|
1116
1136
|
UnstableTag2,
|
|
1117
1137
|
{
|
|
1118
1138
|
variant: "outlined",
|
|
1119
1139
|
label: fontFamily,
|
|
1120
|
-
endIcon: /* @__PURE__ */
|
|
1140
|
+
endIcon: /* @__PURE__ */ React27.createElement(ChevronDownIcon, { fontSize: "tiny" }),
|
|
1121
1141
|
...bindTrigger3(popoverState),
|
|
1122
1142
|
fullWidth: true
|
|
1123
1143
|
}
|
|
1124
|
-
), /* @__PURE__ */
|
|
1144
|
+
), /* @__PURE__ */ React27.createElement(
|
|
1125
1145
|
Popover3,
|
|
1126
1146
|
{
|
|
1127
1147
|
disablePortal: true,
|
|
@@ -1130,7 +1150,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1130
1150
|
...bindPopover3(popoverState),
|
|
1131
1151
|
onClose: handleClose
|
|
1132
1152
|
},
|
|
1133
|
-
/* @__PURE__ */
|
|
1153
|
+
/* @__PURE__ */ React27.createElement(Stack8, null, /* @__PURE__ */ React27.createElement(Stack8, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React27.createElement(EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React27.createElement(Typography4, { variant: "subtitle2" }, __9("Font Family", "elementor")), /* @__PURE__ */ React27.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React27.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React27.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React27.createElement(
|
|
1134
1154
|
TextField5,
|
|
1135
1155
|
{
|
|
1136
1156
|
fullWidth: true,
|
|
@@ -1139,12 +1159,18 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1139
1159
|
placeholder: __9("Search", "elementor"),
|
|
1140
1160
|
onChange: handleSearch,
|
|
1141
1161
|
InputProps: {
|
|
1142
|
-
startAdornment: /* @__PURE__ */
|
|
1162
|
+
startAdornment: /* @__PURE__ */ React27.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React27.createElement(SearchIcon, { fontSize: SIZE2 }))
|
|
1143
1163
|
}
|
|
1144
1164
|
}
|
|
1145
|
-
)), /* @__PURE__ */
|
|
1165
|
+
)), /* @__PURE__ */ React27.createElement(Divider, null), /* @__PURE__ */ React27.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React27.createElement(MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React27.createElement(Fragment4, { key: index }, /* @__PURE__ */ React27.createElement(
|
|
1166
|
+
ListSubheader,
|
|
1167
|
+
{
|
|
1168
|
+
sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
|
|
1169
|
+
},
|
|
1170
|
+
category
|
|
1171
|
+
), items.map((item) => {
|
|
1146
1172
|
const isSelected = item === fontFamily;
|
|
1147
|
-
return /* @__PURE__ */
|
|
1173
|
+
return /* @__PURE__ */ React27.createElement(
|
|
1148
1174
|
MenuItem3,
|
|
1149
1175
|
{
|
|
1150
1176
|
key: item,
|
|
@@ -1154,12 +1180,12 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1154
1180
|
setFontFamily(item);
|
|
1155
1181
|
handleClose();
|
|
1156
1182
|
},
|
|
1157
|
-
sx: { typography: "caption" },
|
|
1183
|
+
sx: { px: 1.5, typography: "caption" },
|
|
1158
1184
|
style: { fontFamily: item }
|
|
1159
1185
|
},
|
|
1160
1186
|
item
|
|
1161
1187
|
);
|
|
1162
|
-
})))) : /* @__PURE__ */
|
|
1188
|
+
})))) : /* @__PURE__ */ React27.createElement(Stack8, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React27.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React27.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, __9("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React27.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React27.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React27.createElement(
|
|
1163
1189
|
Link,
|
|
1164
1190
|
{
|
|
1165
1191
|
color: "secondary",
|
|
@@ -1173,13 +1199,13 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1173
1199
|
});
|
|
1174
1200
|
|
|
1175
1201
|
// src/controls/url-control.tsx
|
|
1176
|
-
import * as
|
|
1202
|
+
import * as React28 from "react";
|
|
1177
1203
|
import { urlPropTypeUtil } from "@elementor/editor-props";
|
|
1178
1204
|
import { TextField as TextField6 } from "@elementor/ui";
|
|
1179
1205
|
var UrlControl = createControl(({ placeholder }) => {
|
|
1180
1206
|
const { value, setValue } = useBoundProp(urlPropTypeUtil);
|
|
1181
1207
|
const handleChange = (event) => setValue(event.target.value);
|
|
1182
|
-
return /* @__PURE__ */
|
|
1208
|
+
return /* @__PURE__ */ React28.createElement(ControlActions, null, /* @__PURE__ */ React28.createElement(
|
|
1183
1209
|
TextField6,
|
|
1184
1210
|
{
|
|
1185
1211
|
size: "tiny",
|
|
@@ -1192,7 +1218,7 @@ var UrlControl = createControl(({ placeholder }) => {
|
|
|
1192
1218
|
});
|
|
1193
1219
|
|
|
1194
1220
|
// src/controls/link-control.tsx
|
|
1195
|
-
import * as
|
|
1221
|
+
import * as React30 from "react";
|
|
1196
1222
|
import { useMemo, useState as useState4 } from "react";
|
|
1197
1223
|
import {
|
|
1198
1224
|
booleanPropTypeUtil,
|
|
@@ -1204,11 +1230,11 @@ import {
|
|
|
1204
1230
|
import { httpService } from "@elementor/http";
|
|
1205
1231
|
import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
|
|
1206
1232
|
import { useSessionStorage } from "@elementor/session";
|
|
1207
|
-
import { Collapse, Divider as Divider2, Grid as
|
|
1233
|
+
import { Collapse, Divider as Divider2, Grid as Grid7, IconButton as IconButton4, Stack as Stack9, Switch } from "@elementor/ui";
|
|
1208
1234
|
import { __ as __10 } from "@wordpress/i18n";
|
|
1209
1235
|
|
|
1210
1236
|
// src/components/autocomplete.tsx
|
|
1211
|
-
import * as
|
|
1237
|
+
import * as React29 from "react";
|
|
1212
1238
|
import { forwardRef as forwardRef2 } from "react";
|
|
1213
1239
|
import { XIcon as XIcon3 } from "@elementor/icons";
|
|
1214
1240
|
import {
|
|
@@ -1234,7 +1260,7 @@ var Autocomplete = forwardRef2((props, ref) => {
|
|
|
1234
1260
|
const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
|
|
1235
1261
|
const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
|
|
1236
1262
|
const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
|
|
1237
|
-
return /* @__PURE__ */
|
|
1263
|
+
return /* @__PURE__ */ React29.createElement(
|
|
1238
1264
|
AutocompleteBase,
|
|
1239
1265
|
{
|
|
1240
1266
|
...restProps,
|
|
@@ -1252,8 +1278,8 @@ var Autocomplete = forwardRef2((props, ref) => {
|
|
|
1252
1278
|
groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
|
|
1253
1279
|
isOptionEqualToValue,
|
|
1254
1280
|
filterOptions: () => optionKeys,
|
|
1255
|
-
renderOption: (optionProps, optionId) => /* @__PURE__ */
|
|
1256
|
-
renderInput: (params) => /* @__PURE__ */
|
|
1281
|
+
renderOption: (optionProps, optionId) => /* @__PURE__ */ React29.createElement(Box3, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
|
|
1282
|
+
renderInput: (params) => /* @__PURE__ */ React29.createElement(
|
|
1257
1283
|
TextInput,
|
|
1258
1284
|
{
|
|
1259
1285
|
params,
|
|
@@ -1276,7 +1302,7 @@ var TextInput = ({
|
|
|
1276
1302
|
const onChange = (event) => {
|
|
1277
1303
|
handleChange(event.target.value);
|
|
1278
1304
|
};
|
|
1279
|
-
return /* @__PURE__ */
|
|
1305
|
+
return /* @__PURE__ */ React29.createElement(
|
|
1280
1306
|
TextField7,
|
|
1281
1307
|
{
|
|
1282
1308
|
...params,
|
|
@@ -1289,7 +1315,7 @@ var TextInput = ({
|
|
|
1289
1315
|
},
|
|
1290
1316
|
InputProps: {
|
|
1291
1317
|
...params.InputProps,
|
|
1292
|
-
endAdornment: /* @__PURE__ */
|
|
1318
|
+
endAdornment: /* @__PURE__ */ React29.createElement(ClearButton, { params, allowClear, handleChange })
|
|
1293
1319
|
}
|
|
1294
1320
|
}
|
|
1295
1321
|
);
|
|
@@ -1298,7 +1324,7 @@ var ClearButton = ({
|
|
|
1298
1324
|
allowClear,
|
|
1299
1325
|
handleChange,
|
|
1300
1326
|
params
|
|
1301
|
-
}) => /* @__PURE__ */
|
|
1327
|
+
}) => /* @__PURE__ */ React29.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React29.createElement(IconButton3, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React29.createElement(XIcon3, { fontSize: params.size })));
|
|
1302
1328
|
function findMatchingOption(options, optionId = null) {
|
|
1303
1329
|
const formattedOption = (optionId || "").toString();
|
|
1304
1330
|
return options.find(({ id }) => formattedOption === id.toString());
|
|
@@ -1377,7 +1403,7 @@ var LinkControl = createControl((props) => {
|
|
|
1377
1403
|
),
|
|
1378
1404
|
[endpoint]
|
|
1379
1405
|
);
|
|
1380
|
-
return /* @__PURE__ */
|
|
1406
|
+
return /* @__PURE__ */ React30.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React30.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React30.createElement(Divider2, null), /* @__PURE__ */ React30.createElement(
|
|
1381
1407
|
Stack9,
|
|
1382
1408
|
{
|
|
1383
1409
|
direction: "row",
|
|
@@ -1386,8 +1412,8 @@ var LinkControl = createControl((props) => {
|
|
|
1386
1412
|
alignItems: "center"
|
|
1387
1413
|
}
|
|
1388
1414
|
},
|
|
1389
|
-
/* @__PURE__ */
|
|
1390
|
-
/* @__PURE__ */
|
|
1415
|
+
/* @__PURE__ */ React30.createElement(ControlLabel, null, __10("Link", "elementor")),
|
|
1416
|
+
/* @__PURE__ */ React30.createElement(
|
|
1391
1417
|
ToggleIconControl,
|
|
1392
1418
|
{
|
|
1393
1419
|
enabled: isEnabled,
|
|
@@ -1395,7 +1421,7 @@ var LinkControl = createControl((props) => {
|
|
|
1395
1421
|
label: __10("Toggle link", "elementor")
|
|
1396
1422
|
}
|
|
1397
1423
|
)
|
|
1398
|
-
), /* @__PURE__ */
|
|
1424
|
+
), /* @__PURE__ */ React30.createElement(Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React30.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React30.createElement(ControlActions, null, /* @__PURE__ */ React30.createElement(
|
|
1399
1425
|
Autocomplete,
|
|
1400
1426
|
{
|
|
1401
1427
|
options,
|
|
@@ -1406,17 +1432,17 @@ var LinkControl = createControl((props) => {
|
|
|
1406
1432
|
onTextChange,
|
|
1407
1433
|
minInputLength
|
|
1408
1434
|
}
|
|
1409
|
-
))), /* @__PURE__ */
|
|
1435
|
+
))), /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React30.createElement(SwitchControl, null))))));
|
|
1410
1436
|
});
|
|
1411
1437
|
var ToggleIconControl = ({ enabled, onIconClick, label }) => {
|
|
1412
|
-
return /* @__PURE__ */
|
|
1438
|
+
return /* @__PURE__ */ React30.createElement(IconButton4, { size: SIZE3, onClick: onIconClick, "aria-label": label }, enabled ? /* @__PURE__ */ React30.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React30.createElement(PlusIcon2, { fontSize: SIZE3 }));
|
|
1413
1439
|
};
|
|
1414
1440
|
var SwitchControl = () => {
|
|
1415
1441
|
const { value = false, setValue } = useBoundProp(booleanPropTypeUtil);
|
|
1416
1442
|
const onClick = () => {
|
|
1417
1443
|
setValue(!value);
|
|
1418
1444
|
};
|
|
1419
|
-
return /* @__PURE__ */
|
|
1445
|
+
return /* @__PURE__ */ React30.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React30.createElement(Grid7, { item: true }, /* @__PURE__ */ React30.createElement(ControlLabel, null, __10("Open in new tab", "elementor"))), /* @__PURE__ */ React30.createElement(Grid7, { item: true }, /* @__PURE__ */ React30.createElement(Switch, { checked: value, onClick })));
|
|
1420
1446
|
};
|
|
1421
1447
|
async function fetchOptions(ajaxUrl, params) {
|
|
1422
1448
|
if (!params || !ajaxUrl) {
|
|
@@ -1457,10 +1483,10 @@ function debounce(fn, timeout) {
|
|
|
1457
1483
|
}
|
|
1458
1484
|
|
|
1459
1485
|
// src/controls/gap-control.tsx
|
|
1460
|
-
import * as
|
|
1486
|
+
import * as React31 from "react";
|
|
1461
1487
|
import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
|
|
1462
1488
|
import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
|
|
1463
|
-
import { Grid as
|
|
1489
|
+
import { Grid as Grid8, Stack as Stack10, ToggleButton as ToggleButton4 } from "@elementor/ui";
|
|
1464
1490
|
import { __ as __11 } from "@wordpress/i18n";
|
|
1465
1491
|
var GapControl = createControl(({ label }) => {
|
|
1466
1492
|
const {
|
|
@@ -1482,7 +1508,7 @@ var GapControl = createControl(({ label }) => {
|
|
|
1482
1508
|
});
|
|
1483
1509
|
};
|
|
1484
1510
|
const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
|
|
1485
|
-
return /* @__PURE__ */
|
|
1511
|
+
return /* @__PURE__ */ React31.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React31.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(
|
|
1486
1512
|
ToggleButton4,
|
|
1487
1513
|
{
|
|
1488
1514
|
"aria-label": __11("Link inputs", "elementor"),
|
|
@@ -1492,18 +1518,18 @@ var GapControl = createControl(({ label }) => {
|
|
|
1492
1518
|
sx: { marginLeft: "auto" },
|
|
1493
1519
|
onChange: onLinkToggle
|
|
1494
1520
|
},
|
|
1495
|
-
/* @__PURE__ */
|
|
1496
|
-
)), /* @__PURE__ */
|
|
1521
|
+
/* @__PURE__ */ React31.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1522
|
+
)), /* @__PURE__ */ React31.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(ControlLabel, null, __11("Column", "elementor"))), /* @__PURE__ */ React31.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React31.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(ControlLabel, null, __11("Row", "elementor"))), /* @__PURE__ */ React31.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Control4, { bind: "row", isLinked })))));
|
|
1497
1523
|
});
|
|
1498
1524
|
var Control4 = ({ bind, isLinked }) => {
|
|
1499
1525
|
if (isLinked) {
|
|
1500
|
-
return /* @__PURE__ */
|
|
1526
|
+
return /* @__PURE__ */ React31.createElement(SizeControl, null);
|
|
1501
1527
|
}
|
|
1502
|
-
return /* @__PURE__ */
|
|
1528
|
+
return /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React31.createElement(SizeControl, null));
|
|
1503
1529
|
};
|
|
1504
1530
|
|
|
1505
1531
|
// src/controls/svg-media-control.tsx
|
|
1506
|
-
import * as
|
|
1532
|
+
import * as React32 from "react";
|
|
1507
1533
|
import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
|
|
1508
1534
|
import { UploadIcon as UploadIcon2 } from "@elementor/icons";
|
|
1509
1535
|
import { Button as Button3, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress2, Stack as Stack11, styled as styled3 } from "@elementor/ui";
|
|
@@ -1551,7 +1577,7 @@ var SvgMediaControl = createControl(() => {
|
|
|
1551
1577
|
});
|
|
1552
1578
|
}
|
|
1553
1579
|
});
|
|
1554
|
-
return /* @__PURE__ */
|
|
1580
|
+
return /* @__PURE__ */ React32.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, " ", __12("Choose SVG", "elementor"), " "), /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React32.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React32.createElement(CircularProgress2, { role: "progressbar" }) : /* @__PURE__ */ React32.createElement(
|
|
1555
1581
|
CardMedia2,
|
|
1556
1582
|
{
|
|
1557
1583
|
component: "img",
|
|
@@ -1559,7 +1585,7 @@ var SvgMediaControl = createControl(() => {
|
|
|
1559
1585
|
alt: __12("Preview SVG", "elementor"),
|
|
1560
1586
|
sx: { maxHeight: "140px", width: "50px" }
|
|
1561
1587
|
}
|
|
1562
|
-
)), /* @__PURE__ */
|
|
1588
|
+
)), /* @__PURE__ */ React32.createElement(
|
|
1563
1589
|
CardOverlay2,
|
|
1564
1590
|
{
|
|
1565
1591
|
sx: {
|
|
@@ -1568,7 +1594,7 @@ var SvgMediaControl = createControl(() => {
|
|
|
1568
1594
|
}
|
|
1569
1595
|
}
|
|
1570
1596
|
},
|
|
1571
|
-
/* @__PURE__ */
|
|
1597
|
+
/* @__PURE__ */ React32.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React32.createElement(
|
|
1572
1598
|
Button3,
|
|
1573
1599
|
{
|
|
1574
1600
|
size: "tiny",
|
|
@@ -1577,13 +1603,13 @@ var SvgMediaControl = createControl(() => {
|
|
|
1577
1603
|
onClick: () => open({ mode: "browse" })
|
|
1578
1604
|
},
|
|
1579
1605
|
__12("Select SVG", "elementor")
|
|
1580
|
-
), /* @__PURE__ */
|
|
1606
|
+
), /* @__PURE__ */ React32.createElement(
|
|
1581
1607
|
Button3,
|
|
1582
1608
|
{
|
|
1583
1609
|
size: "tiny",
|
|
1584
1610
|
variant: "text",
|
|
1585
1611
|
color: "inherit",
|
|
1586
|
-
startIcon: /* @__PURE__ */
|
|
1612
|
+
startIcon: /* @__PURE__ */ React32.createElement(UploadIcon2, null),
|
|
1587
1613
|
onClick: () => open({ mode: "upload" })
|
|
1588
1614
|
},
|
|
1589
1615
|
__12("Upload SVG", "elementor")
|
|
@@ -1592,19 +1618,19 @@ var SvgMediaControl = createControl(() => {
|
|
|
1592
1618
|
});
|
|
1593
1619
|
|
|
1594
1620
|
// src/controls/background-control/background-control.tsx
|
|
1595
|
-
import * as
|
|
1621
|
+
import * as React38 from "react";
|
|
1596
1622
|
import { backgroundPropTypeUtil } from "@elementor/editor-props";
|
|
1597
|
-
import { Grid as
|
|
1623
|
+
import { Grid as Grid14 } from "@elementor/ui";
|
|
1598
1624
|
import { __ as __18 } from "@wordpress/i18n";
|
|
1599
1625
|
|
|
1600
1626
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
1601
|
-
import * as
|
|
1627
|
+
import * as React37 from "react";
|
|
1602
1628
|
import {
|
|
1603
1629
|
backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
|
|
1604
1630
|
backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
|
|
1605
1631
|
backgroundOverlayPropTypeUtil
|
|
1606
1632
|
} from "@elementor/editor-props";
|
|
1607
|
-
import { Box as Box4, CardMedia as CardMedia3, Grid as
|
|
1633
|
+
import { Box as Box4, CardMedia as CardMedia3, Grid as Grid13, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
|
|
1608
1634
|
import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
|
|
1609
1635
|
import { __ as __17 } from "@wordpress/i18n";
|
|
1610
1636
|
|
|
@@ -1613,33 +1639,33 @@ import { parseEnv } from "@elementor/env";
|
|
|
1613
1639
|
var { env } = parseEnv("@elementor/editor-controls");
|
|
1614
1640
|
|
|
1615
1641
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
1616
|
-
import * as
|
|
1642
|
+
import * as React33 from "react";
|
|
1617
1643
|
import { PinIcon, PinnedOffIcon } from "@elementor/icons";
|
|
1618
|
-
import { Grid as
|
|
1644
|
+
import { Grid as Grid9 } from "@elementor/ui";
|
|
1619
1645
|
import { __ as __13 } from "@wordpress/i18n";
|
|
1620
1646
|
var attachmentControlOptions = [
|
|
1621
1647
|
{
|
|
1622
1648
|
value: "fixed",
|
|
1623
1649
|
label: __13("Fixed", "elementor"),
|
|
1624
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1650
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(PinIcon, { fontSize: size }),
|
|
1625
1651
|
showTooltip: true
|
|
1626
1652
|
},
|
|
1627
1653
|
{
|
|
1628
1654
|
value: "scroll",
|
|
1629
1655
|
label: __13("Scroll", "elementor"),
|
|
1630
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1656
|
+
renderContent: ({ size }) => /* @__PURE__ */ React33.createElement(PinnedOffIcon, { fontSize: size }),
|
|
1631
1657
|
showTooltip: true
|
|
1632
1658
|
}
|
|
1633
1659
|
];
|
|
1634
1660
|
var BackgroundImageOverlayAttachment = () => {
|
|
1635
|
-
return /* @__PURE__ */
|
|
1661
|
+
return /* @__PURE__ */ React33.createElement(PopoverGridContainer, null, /* @__PURE__ */ React33.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, __13("Attachment", "elementor"))), /* @__PURE__ */ React33.createElement(Grid9, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React33.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
1636
1662
|
};
|
|
1637
1663
|
|
|
1638
1664
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
1639
|
-
import * as
|
|
1665
|
+
import * as React34 from "react";
|
|
1640
1666
|
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
|
|
1641
1667
|
import { LetterXIcon, LetterYIcon } from "@elementor/icons";
|
|
1642
|
-
import { Grid as
|
|
1668
|
+
import { Grid as Grid10, MenuItem as MenuItem4, Select as Select2 } from "@elementor/ui";
|
|
1643
1669
|
import { __ as __14 } from "@wordpress/i18n";
|
|
1644
1670
|
var backgroundPositionOptions = [
|
|
1645
1671
|
{ label: __14("Center center", "elementor"), value: "center center" },
|
|
@@ -1665,7 +1691,7 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
1665
1691
|
stringPropContext.setValue(value);
|
|
1666
1692
|
}
|
|
1667
1693
|
};
|
|
1668
|
-
return /* @__PURE__ */
|
|
1694
|
+
return /* @__PURE__ */ React34.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React34.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(PopoverGridContainer, null, /* @__PURE__ */ React34.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, __14("Position", "elementor"))), /* @__PURE__ */ React34.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(
|
|
1669
1695
|
Select2,
|
|
1670
1696
|
{
|
|
1671
1697
|
size: "tiny",
|
|
@@ -1673,47 +1699,47 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
1673
1699
|
onChange: handlePositionChange,
|
|
1674
1700
|
fullWidth: true
|
|
1675
1701
|
},
|
|
1676
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
1677
|
-
)))), isCustom ? /* @__PURE__ */
|
|
1702
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React34.createElement(MenuItem4, { key: value, value: value ?? "" }, label))
|
|
1703
|
+
)))), isCustom ? /* @__PURE__ */ React34.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React34.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React34.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React34.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React34.createElement(SizeControl, { startIcon: /* @__PURE__ */ React34.createElement(LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React34.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React34.createElement(SizeControl, { startIcon: /* @__PURE__ */ React34.createElement(LetterYIcon, { fontSize: "tiny" }) })))))) : null);
|
|
1678
1704
|
};
|
|
1679
1705
|
|
|
1680
1706
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
1681
|
-
import * as
|
|
1707
|
+
import * as React35 from "react";
|
|
1682
1708
|
import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
|
|
1683
|
-
import { Grid as
|
|
1709
|
+
import { Grid as Grid11 } from "@elementor/ui";
|
|
1684
1710
|
import { __ as __15 } from "@wordpress/i18n";
|
|
1685
1711
|
var repeatControlOptions = [
|
|
1686
1712
|
{
|
|
1687
1713
|
value: "repeat",
|
|
1688
1714
|
label: __15("Repeat", "elementor"),
|
|
1689
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1715
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(GridDotsIcon, { fontSize: size }),
|
|
1690
1716
|
showTooltip: true
|
|
1691
1717
|
},
|
|
1692
1718
|
{
|
|
1693
1719
|
value: "repeat-x",
|
|
1694
1720
|
label: __15("Repeat-x", "elementor"),
|
|
1695
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1721
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(DotsHorizontalIcon, { fontSize: size }),
|
|
1696
1722
|
showTooltip: true
|
|
1697
1723
|
},
|
|
1698
1724
|
{
|
|
1699
1725
|
value: "repeat-y",
|
|
1700
1726
|
label: __15("Repeat-y", "elementor"),
|
|
1701
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1727
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(DotsVerticalIcon, { fontSize: size }),
|
|
1702
1728
|
showTooltip: true
|
|
1703
1729
|
},
|
|
1704
1730
|
{
|
|
1705
1731
|
value: "no-repeat",
|
|
1706
1732
|
label: __15("No-Repeat", "elementor"),
|
|
1707
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1733
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(XIcon4, { fontSize: size }),
|
|
1708
1734
|
showTooltip: true
|
|
1709
1735
|
}
|
|
1710
1736
|
];
|
|
1711
1737
|
var BackgroundImageOverlayRepeat = () => {
|
|
1712
|
-
return /* @__PURE__ */
|
|
1738
|
+
return /* @__PURE__ */ React35.createElement(PopoverGridContainer, null, /* @__PURE__ */ React35.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, __15("Repeat", "elementor"))), /* @__PURE__ */ React35.createElement(Grid11, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React35.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
1713
1739
|
};
|
|
1714
1740
|
|
|
1715
1741
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
1716
|
-
import * as
|
|
1742
|
+
import * as React36 from "react";
|
|
1717
1743
|
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
|
|
1718
1744
|
import {
|
|
1719
1745
|
ArrowBarBothIcon,
|
|
@@ -1723,31 +1749,31 @@ import {
|
|
|
1723
1749
|
LetterAIcon,
|
|
1724
1750
|
PencilIcon
|
|
1725
1751
|
} from "@elementor/icons";
|
|
1726
|
-
import { Grid as
|
|
1752
|
+
import { Grid as Grid12 } from "@elementor/ui";
|
|
1727
1753
|
import { __ as __16 } from "@wordpress/i18n";
|
|
1728
1754
|
var sizeControlOptions = [
|
|
1729
1755
|
{
|
|
1730
1756
|
value: "auto",
|
|
1731
1757
|
label: __16("Auto", "elementor"),
|
|
1732
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1758
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(LetterAIcon, { fontSize: size }),
|
|
1733
1759
|
showTooltip: true
|
|
1734
1760
|
},
|
|
1735
1761
|
{
|
|
1736
1762
|
value: "cover",
|
|
1737
1763
|
label: __16("Cover", "elementor"),
|
|
1738
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1764
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(ArrowsMaximizeIcon, { fontSize: size }),
|
|
1739
1765
|
showTooltip: true
|
|
1740
1766
|
},
|
|
1741
1767
|
{
|
|
1742
1768
|
value: "contain",
|
|
1743
1769
|
label: __16("Contain", "elementor"),
|
|
1744
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1770
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(ArrowBarBothIcon, { fontSize: size }),
|
|
1745
1771
|
showTooltip: true
|
|
1746
1772
|
},
|
|
1747
1773
|
{
|
|
1748
1774
|
value: "custom",
|
|
1749
1775
|
label: __16("Custom", "elementor"),
|
|
1750
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1776
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(PencilIcon, { fontSize: size }),
|
|
1751
1777
|
showTooltip: true
|
|
1752
1778
|
}
|
|
1753
1779
|
];
|
|
@@ -1762,7 +1788,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
1762
1788
|
stringPropContext.setValue(size);
|
|
1763
1789
|
}
|
|
1764
1790
|
};
|
|
1765
|
-
return /* @__PURE__ */
|
|
1791
|
+
return /* @__PURE__ */ React36.createElement(Grid12, { container: true, spacing: 1.5 }, /* @__PURE__ */ React36.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, __16("Size", "elementor"))), /* @__PURE__ */ React36.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React36.createElement(
|
|
1766
1792
|
ControlToggleButtonGroup,
|
|
1767
1793
|
{
|
|
1768
1794
|
exclusive: true,
|
|
@@ -1770,7 +1796,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
1770
1796
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
|
|
1771
1797
|
onChange: handleSizeChange
|
|
1772
1798
|
}
|
|
1773
|
-
)))), isCustom ? /* @__PURE__ */
|
|
1799
|
+
)))), isCustom ? /* @__PURE__ */ React36.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React36.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: /* @__PURE__ */ React36.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React36.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: /* @__PURE__ */ React36.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" }) })))))) : null);
|
|
1774
1800
|
};
|
|
1775
1801
|
|
|
1776
1802
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
@@ -1852,7 +1878,7 @@ var backgroundResolutionOptions = [
|
|
|
1852
1878
|
];
|
|
1853
1879
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
1854
1880
|
const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
|
|
1855
|
-
return /* @__PURE__ */
|
|
1881
|
+
return /* @__PURE__ */ React37.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React37.createElement(
|
|
1856
1882
|
Repeater,
|
|
1857
1883
|
{
|
|
1858
1884
|
values: overlayValues ?? [],
|
|
@@ -1868,58 +1894,58 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
1868
1894
|
));
|
|
1869
1895
|
});
|
|
1870
1896
|
var ItemContent2 = ({ bind }) => {
|
|
1871
|
-
return /* @__PURE__ */
|
|
1897
|
+
return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(Content2, null));
|
|
1872
1898
|
};
|
|
1873
1899
|
var Content2 = () => {
|
|
1874
1900
|
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
1875
1901
|
image: getInitialBackgroundOverlay().value,
|
|
1876
1902
|
color: initialBackgroundColorOverlay.value
|
|
1877
1903
|
});
|
|
1878
|
-
return /* @__PURE__ */
|
|
1904
|
+
return /* @__PURE__ */ React37.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React37.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React37.createElement(Tabs, { ...getTabsProps(), "aria-label": __17("Background Overlay", "elementor") }, /* @__PURE__ */ React37.createElement(Tab, { label: __17("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React37.createElement(Tab, { label: __17("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React37.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React37.createElement(PopoverContent, null, /* @__PURE__ */ React37.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React37.createElement(TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React37.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React37.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ColorControl, { propTypeUtil: backgroundColorOverlayPropTypeUtil2 })))));
|
|
1879
1905
|
};
|
|
1880
1906
|
var ItemIcon2 = ({ value }) => {
|
|
1881
1907
|
switch (value.$$type) {
|
|
1882
1908
|
case "background-image-overlay":
|
|
1883
|
-
return /* @__PURE__ */
|
|
1909
|
+
return /* @__PURE__ */ React37.createElement(ItemIconImage, { value });
|
|
1884
1910
|
case "background-color-overlay":
|
|
1885
|
-
return /* @__PURE__ */
|
|
1911
|
+
return /* @__PURE__ */ React37.createElement(ItemIconColor, { value });
|
|
1886
1912
|
default:
|
|
1887
1913
|
return null;
|
|
1888
1914
|
}
|
|
1889
1915
|
};
|
|
1890
1916
|
var ItemIconColor = ({ value }) => {
|
|
1891
|
-
return /* @__PURE__ */
|
|
1917
|
+
return /* @__PURE__ */ React37.createElement(UnstableColorIndicator2, { size: "inherit", component: "span", value: value.value });
|
|
1892
1918
|
};
|
|
1893
1919
|
var ItemIconImage = ({ value }) => {
|
|
1894
1920
|
const { imageUrl } = useImage(value);
|
|
1895
|
-
return /* @__PURE__ */
|
|
1921
|
+
return /* @__PURE__ */ React37.createElement(CardMedia3, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
|
|
1896
1922
|
};
|
|
1897
1923
|
var ItemLabel2 = ({ value }) => {
|
|
1898
1924
|
switch (value.$$type) {
|
|
1899
1925
|
case "background-image-overlay":
|
|
1900
|
-
return /* @__PURE__ */
|
|
1926
|
+
return /* @__PURE__ */ React37.createElement(ItemLabelImage, { value });
|
|
1901
1927
|
case "background-color-overlay":
|
|
1902
|
-
return /* @__PURE__ */
|
|
1928
|
+
return /* @__PURE__ */ React37.createElement(ItemLabelColor, { value });
|
|
1903
1929
|
default:
|
|
1904
1930
|
return null;
|
|
1905
1931
|
}
|
|
1906
1932
|
};
|
|
1907
1933
|
var ItemLabelColor = ({ value }) => {
|
|
1908
|
-
return /* @__PURE__ */
|
|
1934
|
+
return /* @__PURE__ */ React37.createElement("span", null, value.value);
|
|
1909
1935
|
};
|
|
1910
1936
|
var ItemLabelImage = ({ value }) => {
|
|
1911
1937
|
const { imageTitle } = useImage(value);
|
|
1912
|
-
return /* @__PURE__ */
|
|
1938
|
+
return /* @__PURE__ */ React37.createElement("span", null, imageTitle);
|
|
1913
1939
|
};
|
|
1914
1940
|
var ImageOverlayContent = () => {
|
|
1915
1941
|
const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
|
|
1916
|
-
return /* @__PURE__ */
|
|
1942
|
+
return /* @__PURE__ */ React37.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React37.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React37.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(
|
|
1917
1943
|
ImageControl,
|
|
1918
1944
|
{
|
|
1919
1945
|
resolutionLabel: __17("Resolution", "elementor"),
|
|
1920
1946
|
sizes: backgroundResolutionOptions
|
|
1921
1947
|
}
|
|
1922
|
-
)))), /* @__PURE__ */
|
|
1948
|
+
)))), /* @__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)));
|
|
1923
1949
|
};
|
|
1924
1950
|
var useImage = (image) => {
|
|
1925
1951
|
let imageTitle, imageUrl = null;
|
|
@@ -1939,7 +1965,7 @@ var useImage = (image) => {
|
|
|
1939
1965
|
// src/controls/background-control/background-control.tsx
|
|
1940
1966
|
var BackgroundControl = createControl(() => {
|
|
1941
1967
|
const propContext = useBoundProp(backgroundPropTypeUtil);
|
|
1942
|
-
return /* @__PURE__ */
|
|
1968
|
+
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(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, __18("Color", "elementor"))), /* @__PURE__ */ React38.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ColorControl, null))))));
|
|
1943
1969
|
});
|
|
1944
1970
|
export {
|
|
1945
1971
|
BackgroundControl,
|