@elementor/editor-controls 0.12.0 → 0.13.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 +12 -0
- package/dist/index.js +343 -217
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +286 -153
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/repeater.tsx +83 -28
- package/src/components/sortable.tsx +108 -0
- package/src/controls/text-area-control.tsx +1 -1
package/dist/index.mjs
CHANGED
|
@@ -360,7 +360,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
|
|
|
360
360
|
size: "tiny",
|
|
361
361
|
multiline: true,
|
|
362
362
|
fullWidth: true,
|
|
363
|
-
|
|
363
|
+
minRows: 5,
|
|
364
364
|
value: value ?? "",
|
|
365
365
|
onChange: handleChange,
|
|
366
366
|
placeholder
|
|
@@ -532,7 +532,7 @@ var StrokeControl = createControl(() => {
|
|
|
532
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)));
|
|
533
533
|
|
|
534
534
|
// src/controls/box-shadow-repeater-control.tsx
|
|
535
|
-
import * as
|
|
535
|
+
import * as React22 from "react";
|
|
536
536
|
import { boxShadowPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
|
|
537
537
|
import { Grid as Grid4, Typography as Typography3, UnstableColorIndicator } from "@elementor/ui";
|
|
538
538
|
import { __ as __5 } from "@wordpress/i18n";
|
|
@@ -553,7 +553,7 @@ var PopoverGridContainer = ({
|
|
|
553
553
|
}) => /* @__PURE__ */ React19.createElement(Grid3, { container: true, gap, alignItems, flexWrap }, children);
|
|
554
554
|
|
|
555
555
|
// src/components/repeater.tsx
|
|
556
|
-
import * as
|
|
556
|
+
import * as React21 from "react";
|
|
557
557
|
import { useRef, useState as useState2 } from "react";
|
|
558
558
|
import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "@elementor/icons";
|
|
559
559
|
import {
|
|
@@ -568,6 +568,101 @@ import {
|
|
|
568
568
|
usePopupState as usePopupState2
|
|
569
569
|
} from "@elementor/ui";
|
|
570
570
|
import { __ as __4 } from "@wordpress/i18n";
|
|
571
|
+
|
|
572
|
+
// src/components/sortable.tsx
|
|
573
|
+
import * as React20 from "react";
|
|
574
|
+
import { GripVerticalIcon } from "@elementor/icons";
|
|
575
|
+
import {
|
|
576
|
+
Divider,
|
|
577
|
+
List,
|
|
578
|
+
ListItem,
|
|
579
|
+
styled as styled2,
|
|
580
|
+
UnstableSortableItem,
|
|
581
|
+
UnstableSortableProvider
|
|
582
|
+
} from "@elementor/ui";
|
|
583
|
+
var SortableProvider = (props) => {
|
|
584
|
+
return /* @__PURE__ */ React20.createElement(List, { sx: { p: 0, m: 0 } }, /* @__PURE__ */ React20.createElement(
|
|
585
|
+
UnstableSortableProvider,
|
|
586
|
+
{
|
|
587
|
+
restrictAxis: true,
|
|
588
|
+
disableDragOverlay: false,
|
|
589
|
+
variant: "static",
|
|
590
|
+
...props
|
|
591
|
+
}
|
|
592
|
+
));
|
|
593
|
+
};
|
|
594
|
+
var SortableItem = ({ id, children }) => {
|
|
595
|
+
return /* @__PURE__ */ React20.createElement(
|
|
596
|
+
UnstableSortableItem,
|
|
597
|
+
{
|
|
598
|
+
id,
|
|
599
|
+
render: ({
|
|
600
|
+
itemProps,
|
|
601
|
+
triggerProps,
|
|
602
|
+
itemStyle,
|
|
603
|
+
triggerStyle,
|
|
604
|
+
isDragOverlay,
|
|
605
|
+
showDropIndication,
|
|
606
|
+
dropIndicationStyle
|
|
607
|
+
}) => {
|
|
608
|
+
return /* @__PURE__ */ React20.createElement(
|
|
609
|
+
StyledListItem,
|
|
610
|
+
{
|
|
611
|
+
...itemProps,
|
|
612
|
+
style: itemStyle,
|
|
613
|
+
sx: { backgroundColor: isDragOverlay ? "background.paper" : void 0 }
|
|
614
|
+
},
|
|
615
|
+
/* @__PURE__ */ React20.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }),
|
|
616
|
+
children,
|
|
617
|
+
showDropIndication && /* @__PURE__ */ React20.createElement(StyledDivider, { style: dropIndicationStyle })
|
|
618
|
+
);
|
|
619
|
+
}
|
|
620
|
+
}
|
|
621
|
+
);
|
|
622
|
+
};
|
|
623
|
+
var StyledListItem = styled2(ListItem)`
|
|
624
|
+
position: relative;
|
|
625
|
+
margin-inline: 0px;
|
|
626
|
+
padding-inline: 0px;
|
|
627
|
+
padding-block: ${({ theme }) => theme.spacing(0.5)};
|
|
628
|
+
|
|
629
|
+
& .class-item-sortable-trigger {
|
|
630
|
+
color: ${({ theme }) => theme.palette.action.active};
|
|
631
|
+
height: 100%;
|
|
632
|
+
display: flex;
|
|
633
|
+
align-items: center;
|
|
634
|
+
visibility: hidden;
|
|
635
|
+
position: absolute;
|
|
636
|
+
top: 50%;
|
|
637
|
+
padding-inline-end: ${({ theme }) => theme.spacing(0.5)};
|
|
638
|
+
transform: translate( -75%, -50% );
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
&:hover {
|
|
642
|
+
& .class-item-sortable-trigger {
|
|
643
|
+
visibility: visible;
|
|
644
|
+
}
|
|
645
|
+
}
|
|
646
|
+
`;
|
|
647
|
+
var SortableTrigger = (props) => /* @__PURE__ */ React20.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React20.createElement(GripVerticalIcon, { fontSize: "tiny" }));
|
|
648
|
+
var StyledDivider = styled2(Divider)`
|
|
649
|
+
height: 0px;
|
|
650
|
+
border: none;
|
|
651
|
+
overflow: visible;
|
|
652
|
+
|
|
653
|
+
&:after {
|
|
654
|
+
--height: 2px;
|
|
655
|
+
content: '';
|
|
656
|
+
display: block;
|
|
657
|
+
width: 100%;
|
|
658
|
+
height: var( --height );
|
|
659
|
+
margin-block: calc( -1 * var( --height ) / 2 );
|
|
660
|
+
border-radius: ${({ theme }) => theme.spacing(0.5)};
|
|
661
|
+
background-color: ${({ theme }) => theme.palette.text.primary};
|
|
662
|
+
}
|
|
663
|
+
`;
|
|
664
|
+
|
|
665
|
+
// src/components/repeater.tsx
|
|
571
666
|
var SIZE = "tiny";
|
|
572
667
|
var Repeater = ({
|
|
573
668
|
label,
|
|
@@ -576,27 +671,50 @@ var Repeater = ({
|
|
|
576
671
|
values: repeaterValues = [],
|
|
577
672
|
setValues: setRepeaterValues
|
|
578
673
|
}) => {
|
|
674
|
+
const [items, setItems] = useSyncExternalState({
|
|
675
|
+
external: repeaterValues,
|
|
676
|
+
// @ts-expect-error - as long as persistWhen => true, value will never be null
|
|
677
|
+
setExternal: setRepeaterValues,
|
|
678
|
+
persistWhen: () => true
|
|
679
|
+
});
|
|
680
|
+
const [uniqueKeys, setUniqueKeys] = useState2(items.map((_, index) => index));
|
|
681
|
+
const generateNextKey = (source) => {
|
|
682
|
+
return 1 + Math.max(0, ...source);
|
|
683
|
+
};
|
|
579
684
|
const addRepeaterItem = () => {
|
|
580
685
|
const newItem = structuredClone(itemSettings.initialValues);
|
|
686
|
+
const newKey = generateNextKey(uniqueKeys);
|
|
581
687
|
if (addToBottom) {
|
|
582
|
-
|
|
688
|
+
setItems([...items, newItem]);
|
|
689
|
+
setUniqueKeys([...uniqueKeys, newKey]);
|
|
690
|
+
} else {
|
|
691
|
+
setItems([newItem, ...items]);
|
|
692
|
+
setUniqueKeys([newKey, ...uniqueKeys]);
|
|
583
693
|
}
|
|
584
|
-
setRepeaterValues([newItem, ...repeaterValues]);
|
|
585
694
|
};
|
|
586
695
|
const duplicateRepeaterItem = (index) => {
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
]);
|
|
696
|
+
const newItem = structuredClone(items[index]);
|
|
697
|
+
const newKey = generateNextKey(uniqueKeys);
|
|
698
|
+
const atPosition = 1 + index;
|
|
699
|
+
setItems([...items.slice(0, atPosition), newItem, ...items.slice(atPosition)]);
|
|
700
|
+
setUniqueKeys([...uniqueKeys.slice(0, atPosition), newKey, ...uniqueKeys.slice(atPosition)]);
|
|
592
701
|
};
|
|
593
702
|
const removeRepeaterItem = (index) => {
|
|
594
|
-
|
|
703
|
+
setUniqueKeys(
|
|
704
|
+
uniqueKeys.filter((_, pos) => {
|
|
705
|
+
return pos !== index;
|
|
706
|
+
})
|
|
707
|
+
);
|
|
708
|
+
setItems(
|
|
709
|
+
items.filter((_, pos) => {
|
|
710
|
+
return pos !== index;
|
|
711
|
+
})
|
|
712
|
+
);
|
|
595
713
|
};
|
|
596
714
|
const toggleDisableRepeaterItem = (index) => {
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
if (
|
|
715
|
+
setItems(
|
|
716
|
+
items.map((value, pos) => {
|
|
717
|
+
if (pos === index) {
|
|
600
718
|
const { disabled, ...rest } = value;
|
|
601
719
|
return { ...rest, ...disabled ? {} : { disabled: true } };
|
|
602
720
|
}
|
|
@@ -604,20 +722,34 @@ var Repeater = ({
|
|
|
604
722
|
})
|
|
605
723
|
);
|
|
606
724
|
};
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
{
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
725
|
+
const onChangeOrder = (reorderedKeys) => {
|
|
726
|
+
setUniqueKeys(reorderedKeys);
|
|
727
|
+
setItems((prevItems) => {
|
|
728
|
+
return reorderedKeys.map((keyValue) => {
|
|
729
|
+
const index = uniqueKeys.indexOf(keyValue);
|
|
730
|
+
return prevItems[index];
|
|
731
|
+
});
|
|
732
|
+
});
|
|
733
|
+
};
|
|
734
|
+
return /* @__PURE__ */ React21.createElement(SectionContent, null, /* @__PURE__ */ React21.createElement(Stack5, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React21.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React21.createElement(IconButton, { size: SIZE, onClick: addRepeaterItem, "aria-label": __4("Add item", "elementor") }, /* @__PURE__ */ React21.createElement(PlusIcon, { fontSize: SIZE }))), 0 < uniqueKeys.length && /* @__PURE__ */ React21.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
|
|
735
|
+
const value = items[index];
|
|
736
|
+
if (!value) {
|
|
737
|
+
return null;
|
|
738
|
+
}
|
|
739
|
+
return /* @__PURE__ */ React21.createElement(SortableItem, { id: key, key: `sortable-${key}` }, /* @__PURE__ */ React21.createElement(
|
|
740
|
+
RepeaterItem,
|
|
741
|
+
{
|
|
742
|
+
bind: String(index),
|
|
743
|
+
disabled: value?.disabled,
|
|
744
|
+
label: /* @__PURE__ */ React21.createElement(itemSettings.Label, { value }),
|
|
745
|
+
startIcon: /* @__PURE__ */ React21.createElement(itemSettings.Icon, { value }),
|
|
746
|
+
removeItem: () => removeRepeaterItem(index),
|
|
747
|
+
duplicateItem: () => duplicateRepeaterItem(index),
|
|
748
|
+
toggleDisableItem: () => toggleDisableRepeaterItem(index)
|
|
749
|
+
},
|
|
750
|
+
(props) => /* @__PURE__ */ React21.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
|
|
751
|
+
));
|
|
752
|
+
})));
|
|
621
753
|
};
|
|
622
754
|
var RepeaterItem = ({
|
|
623
755
|
label,
|
|
@@ -634,43 +766,44 @@ var RepeaterItem = ({
|
|
|
634
766
|
const [anchorEl, setAnchorEl] = useState2(null);
|
|
635
767
|
const popoverState = usePopupState2({ popupId, variant: "popover" });
|
|
636
768
|
const popoverProps = bindPopover(popoverState);
|
|
637
|
-
return /* @__PURE__ */
|
|
769
|
+
return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
|
|
638
770
|
UnstableTag,
|
|
639
771
|
{
|
|
640
772
|
label,
|
|
641
773
|
showActionsOnHover: true,
|
|
774
|
+
fullWidth: true,
|
|
642
775
|
ref: controlRef,
|
|
643
776
|
variant: "outlined",
|
|
644
777
|
"aria-label": __4("Open item", "elementor"),
|
|
645
778
|
...bindTrigger2(popoverState),
|
|
646
779
|
startIcon,
|
|
647
|
-
actions: /* @__PURE__ */
|
|
780
|
+
actions: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
|
|
648
781
|
IconButton,
|
|
649
782
|
{
|
|
650
783
|
size: SIZE,
|
|
651
784
|
onClick: duplicateItem,
|
|
652
785
|
"aria-label": __4("Duplicate item", "elementor")
|
|
653
786
|
},
|
|
654
|
-
/* @__PURE__ */
|
|
655
|
-
), /* @__PURE__ */
|
|
787
|
+
/* @__PURE__ */ React21.createElement(CopyIcon, { fontSize: SIZE })
|
|
788
|
+
), /* @__PURE__ */ React21.createElement(
|
|
656
789
|
IconButton,
|
|
657
790
|
{
|
|
658
791
|
size: SIZE,
|
|
659
792
|
onClick: toggleDisableItem,
|
|
660
793
|
"aria-label": disabled ? __4("Enable item", "elementor") : __4("Disable item", "elementor")
|
|
661
794
|
},
|
|
662
|
-
disabled ? /* @__PURE__ */
|
|
663
|
-
), /* @__PURE__ */
|
|
795
|
+
disabled ? /* @__PURE__ */ React21.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React21.createElement(EyeIcon, { fontSize: SIZE })
|
|
796
|
+
), /* @__PURE__ */ React21.createElement(
|
|
664
797
|
IconButton,
|
|
665
798
|
{
|
|
666
799
|
size: SIZE,
|
|
667
800
|
onClick: removeItem,
|
|
668
801
|
"aria-label": __4("Remove item", "elementor")
|
|
669
802
|
},
|
|
670
|
-
/* @__PURE__ */
|
|
803
|
+
/* @__PURE__ */ React21.createElement(XIcon, { fontSize: SIZE })
|
|
671
804
|
))
|
|
672
805
|
}
|
|
673
|
-
), /* @__PURE__ */
|
|
806
|
+
), /* @__PURE__ */ React21.createElement(
|
|
674
807
|
Popover,
|
|
675
808
|
{
|
|
676
809
|
disablePortal: true,
|
|
@@ -683,14 +816,14 @@ var RepeaterItem = ({
|
|
|
683
816
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
684
817
|
...popoverProps
|
|
685
818
|
},
|
|
686
|
-
/* @__PURE__ */
|
|
819
|
+
/* @__PURE__ */ React21.createElement(Box, null, children({ anchorEl }))
|
|
687
820
|
));
|
|
688
821
|
};
|
|
689
822
|
|
|
690
823
|
// src/controls/box-shadow-repeater-control.tsx
|
|
691
824
|
var BoxShadowRepeaterControl = createControl(() => {
|
|
692
825
|
const { propType, value, setValue } = useBoundProp(boxShadowPropTypeUtil);
|
|
693
|
-
return /* @__PURE__ */
|
|
826
|
+
return /* @__PURE__ */ React22.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React22.createElement(
|
|
694
827
|
Repeater,
|
|
695
828
|
{
|
|
696
829
|
values: value ?? [],
|
|
@@ -705,13 +838,13 @@ var BoxShadowRepeaterControl = createControl(() => {
|
|
|
705
838
|
}
|
|
706
839
|
));
|
|
707
840
|
});
|
|
708
|
-
var ItemIcon = ({ value }) => /* @__PURE__ */
|
|
841
|
+
var ItemIcon = ({ value }) => /* @__PURE__ */ React22.createElement(UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
|
|
709
842
|
var ItemContent = ({ anchorEl, bind }) => {
|
|
710
|
-
return /* @__PURE__ */
|
|
843
|
+
return /* @__PURE__ */ React22.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React22.createElement(Content, { anchorEl }));
|
|
711
844
|
};
|
|
712
845
|
var Content = ({ anchorEl }) => {
|
|
713
846
|
const { propType, value, setValue } = useBoundProp(shadowPropTypeUtil);
|
|
714
|
-
return /* @__PURE__ */
|
|
847
|
+
return /* @__PURE__ */ React22.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React22.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React22.createElement(PopoverGridContainer, null, /* @__PURE__ */ React22.createElement(Control2, { bind: "color", label: __5("Color", "elementor") }, /* @__PURE__ */ React22.createElement(
|
|
715
848
|
ColorControl,
|
|
716
849
|
{
|
|
717
850
|
slotProps: {
|
|
@@ -728,7 +861,7 @@ var Content = ({ anchorEl }) => {
|
|
|
728
861
|
}
|
|
729
862
|
}
|
|
730
863
|
}
|
|
731
|
-
)), /* @__PURE__ */
|
|
864
|
+
)), /* @__PURE__ */ React22.createElement(Control2, { bind: "position", label: __5("Position", "elementor") }, /* @__PURE__ */ React22.createElement(
|
|
732
865
|
SelectControl,
|
|
733
866
|
{
|
|
734
867
|
options: [
|
|
@@ -736,9 +869,9 @@ var Content = ({ anchorEl }) => {
|
|
|
736
869
|
{ label: __5("Outset", "elementor"), value: null }
|
|
737
870
|
]
|
|
738
871
|
}
|
|
739
|
-
))), /* @__PURE__ */
|
|
872
|
+
))), /* @__PURE__ */ React22.createElement(PopoverGridContainer, null, /* @__PURE__ */ React22.createElement(Control2, { bind: "hOffset", label: __5("Horizontal", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null)), /* @__PURE__ */ React22.createElement(Control2, { bind: "vOffset", label: __5("Vertical", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null))), /* @__PURE__ */ React22.createElement(PopoverGridContainer, null, /* @__PURE__ */ React22.createElement(Control2, { bind: "blur", label: __5("Blur", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null)), /* @__PURE__ */ React22.createElement(Control2, { bind: "spread", label: __5("Spread", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null)))));
|
|
740
873
|
};
|
|
741
|
-
var Control2 = ({ label, bind, children }) => /* @__PURE__ */
|
|
874
|
+
var Control2 = ({ label, bind, children }) => /* @__PURE__ */ React22.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React22.createElement(Grid4, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React22.createElement(Grid4, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React22.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(Typography3, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React22.createElement(Grid4, { item: true, xs: 12 }, children))));
|
|
742
875
|
var ItemLabel = ({ value }) => {
|
|
743
876
|
const { position, hOffset, vOffset, blur, spread } = value.value;
|
|
744
877
|
const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
|
|
@@ -752,7 +885,7 @@ var ItemLabel = ({ value }) => {
|
|
|
752
885
|
blurSize + blurUnit,
|
|
753
886
|
spreadSize + spreadUnit
|
|
754
887
|
].join(" ");
|
|
755
|
-
return /* @__PURE__ */
|
|
888
|
+
return /* @__PURE__ */ React22.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
|
|
756
889
|
};
|
|
757
890
|
var initialShadow = {
|
|
758
891
|
$$type: "shadow",
|
|
@@ -782,19 +915,19 @@ var initialShadow = {
|
|
|
782
915
|
};
|
|
783
916
|
|
|
784
917
|
// src/controls/toggle-control.tsx
|
|
785
|
-
import * as
|
|
918
|
+
import * as React24 from "react";
|
|
786
919
|
import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
|
|
787
920
|
|
|
788
921
|
// src/components/control-toggle-button-group.tsx
|
|
789
|
-
import * as
|
|
922
|
+
import * as React23 from "react";
|
|
790
923
|
import {
|
|
791
|
-
styled as
|
|
924
|
+
styled as styled3,
|
|
792
925
|
ToggleButton,
|
|
793
926
|
ToggleButtonGroup,
|
|
794
927
|
Tooltip,
|
|
795
928
|
useTheme
|
|
796
929
|
} from "@elementor/ui";
|
|
797
|
-
var StyledToggleButtonGroup =
|
|
930
|
+
var StyledToggleButtonGroup = styled3(ToggleButtonGroup)`
|
|
798
931
|
${({ justify }) => `justify-content: ${justify};`}
|
|
799
932
|
`;
|
|
800
933
|
var ControlToggleButtonGroup = ({
|
|
@@ -810,7 +943,7 @@ var ControlToggleButtonGroup = ({
|
|
|
810
943
|
const handleChange = (_, newValue) => {
|
|
811
944
|
onChange(newValue);
|
|
812
945
|
};
|
|
813
|
-
return /* @__PURE__ */
|
|
946
|
+
return /* @__PURE__ */ React23.createElement(
|
|
814
947
|
StyledToggleButtonGroup,
|
|
815
948
|
{
|
|
816
949
|
justify,
|
|
@@ -822,7 +955,7 @@ var ControlToggleButtonGroup = ({
|
|
|
822
955
|
}
|
|
823
956
|
},
|
|
824
957
|
items.map(
|
|
825
|
-
({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */
|
|
958
|
+
({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */ React23.createElement(Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React23.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React23.createElement(Content3, { size }))) : /* @__PURE__ */ React23.createElement(
|
|
826
959
|
ToggleButton,
|
|
827
960
|
{
|
|
828
961
|
key: buttonValue,
|
|
@@ -831,7 +964,7 @@ var ControlToggleButtonGroup = ({
|
|
|
831
964
|
size,
|
|
832
965
|
fullWidth
|
|
833
966
|
},
|
|
834
|
-
/* @__PURE__ */
|
|
967
|
+
/* @__PURE__ */ React23.createElement(Content3, { size })
|
|
835
968
|
)
|
|
836
969
|
)
|
|
837
970
|
);
|
|
@@ -844,7 +977,7 @@ var ToggleControl = createControl(
|
|
|
844
977
|
const handleToggle = (option) => {
|
|
845
978
|
setValue(option);
|
|
846
979
|
};
|
|
847
|
-
return /* @__PURE__ */
|
|
980
|
+
return /* @__PURE__ */ React24.createElement(
|
|
848
981
|
ControlToggleButtonGroup,
|
|
849
982
|
{
|
|
850
983
|
items: options,
|
|
@@ -859,7 +992,7 @@ var ToggleControl = createControl(
|
|
|
859
992
|
);
|
|
860
993
|
|
|
861
994
|
// src/controls/number-control.tsx
|
|
862
|
-
import * as
|
|
995
|
+
import * as React25 from "react";
|
|
863
996
|
import { numberPropTypeUtil } from "@elementor/editor-props";
|
|
864
997
|
import { TextField as TextField4 } from "@elementor/ui";
|
|
865
998
|
var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
|
|
@@ -881,7 +1014,7 @@ var NumberControl = createControl(
|
|
|
881
1014
|
const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
|
|
882
1015
|
setValue(Math.min(Math.max(formattedValue, min), max));
|
|
883
1016
|
};
|
|
884
|
-
return /* @__PURE__ */
|
|
1017
|
+
return /* @__PURE__ */ React25.createElement(ControlActions, null, /* @__PURE__ */ React25.createElement(
|
|
885
1018
|
TextField4,
|
|
886
1019
|
{
|
|
887
1020
|
size: "tiny",
|
|
@@ -897,7 +1030,7 @@ var NumberControl = createControl(
|
|
|
897
1030
|
);
|
|
898
1031
|
|
|
899
1032
|
// src/controls/equal-unequal-sizes-control.tsx
|
|
900
|
-
import * as
|
|
1033
|
+
import * as React26 from "react";
|
|
901
1034
|
import { useId as useId2, useRef as useRef2 } from "react";
|
|
902
1035
|
import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
|
|
903
1036
|
import { bindPopover as bindPopover2, bindToggle, Grid as Grid5, Popover as Popover2, Stack as Stack6, ToggleButton as ToggleButton2, usePopupState as usePopupState3 } from "@elementor/ui";
|
|
@@ -954,7 +1087,7 @@ function EqualUnequalSizesControl({
|
|
|
954
1087
|
return splitEqualValue() ?? null;
|
|
955
1088
|
};
|
|
956
1089
|
const isMixed = !!multiSizeValue;
|
|
957
|
-
return /* @__PURE__ */
|
|
1090
|
+
return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label)), /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React26.createElement(SizeControl, { placeholder: isMixed ? __6("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React26.createElement(
|
|
958
1091
|
ToggleButton2,
|
|
959
1092
|
{
|
|
960
1093
|
size: "tiny",
|
|
@@ -964,7 +1097,7 @@ function EqualUnequalSizesControl({
|
|
|
964
1097
|
selected: popupState.isOpen
|
|
965
1098
|
},
|
|
966
1099
|
icon
|
|
967
|
-
)))), /* @__PURE__ */
|
|
1100
|
+
)))), /* @__PURE__ */ React26.createElement(
|
|
968
1101
|
Popover2,
|
|
969
1102
|
{
|
|
970
1103
|
disablePortal: true,
|
|
@@ -982,13 +1115,13 @@ function EqualUnequalSizesControl({
|
|
|
982
1115
|
paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } }
|
|
983
1116
|
}
|
|
984
1117
|
},
|
|
985
|
-
/* @__PURE__ */
|
|
1118
|
+
/* @__PURE__ */ React26.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__PURE__ */ React26.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[3] }), /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[2] }))))
|
|
986
1119
|
));
|
|
987
1120
|
}
|
|
988
|
-
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */
|
|
1121
|
+
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(Grid5, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(SizeControl, { startIcon: item.icon })))));
|
|
989
1122
|
|
|
990
1123
|
// src/controls/linked-dimensions-control.tsx
|
|
991
|
-
import * as
|
|
1124
|
+
import * as React27 from "react";
|
|
992
1125
|
import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
|
|
993
1126
|
import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
|
|
994
1127
|
import { Grid as Grid6, Stack as Stack7, ToggleButton as ToggleButton3 } from "@elementor/ui";
|
|
@@ -1011,7 +1144,7 @@ var LinkedDimensionsControl = createControl(({ label }) => {
|
|
|
1011
1144
|
});
|
|
1012
1145
|
};
|
|
1013
1146
|
const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
|
|
1014
|
-
return /* @__PURE__ */
|
|
1147
|
+
return /* @__PURE__ */ React27.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(
|
|
1015
1148
|
ToggleButton3,
|
|
1016
1149
|
{
|
|
1017
1150
|
"aria-label": __7("Link inputs", "elementor"),
|
|
@@ -1021,54 +1154,54 @@ var LinkedDimensionsControl = createControl(({ label }) => {
|
|
|
1021
1154
|
sx: { marginLeft: "auto" },
|
|
1022
1155
|
onChange: onLinkToggle
|
|
1023
1156
|
},
|
|
1024
|
-
/* @__PURE__ */
|
|
1025
|
-
)), /* @__PURE__ */
|
|
1157
|
+
/* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1158
|
+
)), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
|
|
1026
1159
|
Control3,
|
|
1027
1160
|
{
|
|
1028
1161
|
bind: "top",
|
|
1029
|
-
startIcon: /* @__PURE__ */
|
|
1162
|
+
startIcon: /* @__PURE__ */ React27.createElement(SideTopIcon, { fontSize: "tiny" }),
|
|
1030
1163
|
isLinked
|
|
1031
1164
|
}
|
|
1032
|
-
))), /* @__PURE__ */
|
|
1165
|
+
))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Right", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
|
|
1033
1166
|
Control3,
|
|
1034
1167
|
{
|
|
1035
1168
|
bind: "right",
|
|
1036
|
-
startIcon: /* @__PURE__ */
|
|
1169
|
+
startIcon: /* @__PURE__ */ React27.createElement(SideRightIcon, { fontSize: "tiny" }),
|
|
1037
1170
|
isLinked
|
|
1038
1171
|
}
|
|
1039
|
-
)))), /* @__PURE__ */
|
|
1172
|
+
)))), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
|
|
1040
1173
|
Control3,
|
|
1041
1174
|
{
|
|
1042
1175
|
bind: "bottom",
|
|
1043
|
-
startIcon: /* @__PURE__ */
|
|
1176
|
+
startIcon: /* @__PURE__ */ React27.createElement(SideBottomIcon, { fontSize: "tiny" }),
|
|
1044
1177
|
isLinked
|
|
1045
1178
|
}
|
|
1046
|
-
))), /* @__PURE__ */
|
|
1179
|
+
))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Left", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
|
|
1047
1180
|
Control3,
|
|
1048
1181
|
{
|
|
1049
1182
|
bind: "left",
|
|
1050
|
-
startIcon: /* @__PURE__ */
|
|
1183
|
+
startIcon: /* @__PURE__ */ React27.createElement(SideLeftIcon, { fontSize: "tiny" }),
|
|
1051
1184
|
isLinked
|
|
1052
1185
|
}
|
|
1053
1186
|
)))));
|
|
1054
1187
|
});
|
|
1055
1188
|
var Control3 = ({ bind, startIcon, isLinked }) => {
|
|
1056
1189
|
if (isLinked) {
|
|
1057
|
-
return /* @__PURE__ */
|
|
1190
|
+
return /* @__PURE__ */ React27.createElement(SizeControl, { startIcon });
|
|
1058
1191
|
}
|
|
1059
|
-
return /* @__PURE__ */
|
|
1192
|
+
return /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React27.createElement(SizeControl, { startIcon }));
|
|
1060
1193
|
};
|
|
1061
1194
|
|
|
1062
1195
|
// src/controls/font-family-control.tsx
|
|
1063
1196
|
import { Fragment as Fragment4, useId as useId3, useState as useState3 } from "react";
|
|
1064
|
-
import * as
|
|
1197
|
+
import * as React28 from "react";
|
|
1065
1198
|
import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
|
|
1066
1199
|
import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon as XIcon2 } from "@elementor/icons";
|
|
1067
1200
|
import {
|
|
1068
1201
|
bindPopover as bindPopover3,
|
|
1069
1202
|
bindTrigger as bindTrigger3,
|
|
1070
1203
|
Box as Box2,
|
|
1071
|
-
Divider,
|
|
1204
|
+
Divider as Divider2,
|
|
1072
1205
|
IconButton as IconButton2,
|
|
1073
1206
|
InputAdornment as InputAdornment3,
|
|
1074
1207
|
Link,
|
|
@@ -1132,16 +1265,16 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1132
1265
|
setSearchValue("");
|
|
1133
1266
|
popoverState.close();
|
|
1134
1267
|
};
|
|
1135
|
-
return /* @__PURE__ */
|
|
1268
|
+
return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
|
|
1136
1269
|
UnstableTag2,
|
|
1137
1270
|
{
|
|
1138
1271
|
variant: "outlined",
|
|
1139
1272
|
label: fontFamily,
|
|
1140
|
-
endIcon: /* @__PURE__ */
|
|
1273
|
+
endIcon: /* @__PURE__ */ React28.createElement(ChevronDownIcon, { fontSize: "tiny" }),
|
|
1141
1274
|
...bindTrigger3(popoverState),
|
|
1142
1275
|
fullWidth: true
|
|
1143
1276
|
}
|
|
1144
|
-
), /* @__PURE__ */
|
|
1277
|
+
), /* @__PURE__ */ React28.createElement(
|
|
1145
1278
|
Popover3,
|
|
1146
1279
|
{
|
|
1147
1280
|
disablePortal: true,
|
|
@@ -1150,7 +1283,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1150
1283
|
...bindPopover3(popoverState),
|
|
1151
1284
|
onClose: handleClose
|
|
1152
1285
|
},
|
|
1153
|
-
/* @__PURE__ */
|
|
1286
|
+
/* @__PURE__ */ React28.createElement(Stack8, null, /* @__PURE__ */ React28.createElement(Stack8, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React28.createElement(Typography4, { variant: "subtitle2" }, __9("Font Family", "elementor")), /* @__PURE__ */ React28.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React28.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React28.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React28.createElement(
|
|
1154
1287
|
TextField5,
|
|
1155
1288
|
{
|
|
1156
1289
|
fullWidth: true,
|
|
@@ -1159,10 +1292,10 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1159
1292
|
placeholder: __9("Search", "elementor"),
|
|
1160
1293
|
onChange: handleSearch,
|
|
1161
1294
|
InputProps: {
|
|
1162
|
-
startAdornment: /* @__PURE__ */
|
|
1295
|
+
startAdornment: /* @__PURE__ */ React28.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React28.createElement(SearchIcon, { fontSize: SIZE2 }))
|
|
1163
1296
|
}
|
|
1164
1297
|
}
|
|
1165
|
-
)), /* @__PURE__ */
|
|
1298
|
+
)), /* @__PURE__ */ React28.createElement(Divider2, null), /* @__PURE__ */ React28.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React28.createElement(MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React28.createElement(Fragment4, { key: index }, /* @__PURE__ */ React28.createElement(
|
|
1166
1299
|
ListSubheader,
|
|
1167
1300
|
{
|
|
1168
1301
|
sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
|
|
@@ -1170,7 +1303,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1170
1303
|
category
|
|
1171
1304
|
), items.map((item) => {
|
|
1172
1305
|
const isSelected = item === fontFamily;
|
|
1173
|
-
return /* @__PURE__ */
|
|
1306
|
+
return /* @__PURE__ */ React28.createElement(
|
|
1174
1307
|
MenuItem3,
|
|
1175
1308
|
{
|
|
1176
1309
|
key: item,
|
|
@@ -1185,7 +1318,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1185
1318
|
},
|
|
1186
1319
|
item
|
|
1187
1320
|
);
|
|
1188
|
-
})))) : /* @__PURE__ */
|
|
1321
|
+
})))) : /* @__PURE__ */ React28.createElement(Stack8, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React28.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, __9("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React28.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React28.createElement(Typography4, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React28.createElement(
|
|
1189
1322
|
Link,
|
|
1190
1323
|
{
|
|
1191
1324
|
color: "secondary",
|
|
@@ -1199,13 +1332,13 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1199
1332
|
});
|
|
1200
1333
|
|
|
1201
1334
|
// src/controls/url-control.tsx
|
|
1202
|
-
import * as
|
|
1335
|
+
import * as React29 from "react";
|
|
1203
1336
|
import { urlPropTypeUtil } from "@elementor/editor-props";
|
|
1204
1337
|
import { TextField as TextField6 } from "@elementor/ui";
|
|
1205
1338
|
var UrlControl = createControl(({ placeholder }) => {
|
|
1206
1339
|
const { value, setValue } = useBoundProp(urlPropTypeUtil);
|
|
1207
1340
|
const handleChange = (event) => setValue(event.target.value);
|
|
1208
|
-
return /* @__PURE__ */
|
|
1341
|
+
return /* @__PURE__ */ React29.createElement(ControlActions, null, /* @__PURE__ */ React29.createElement(
|
|
1209
1342
|
TextField6,
|
|
1210
1343
|
{
|
|
1211
1344
|
size: "tiny",
|
|
@@ -1218,7 +1351,7 @@ var UrlControl = createControl(({ placeholder }) => {
|
|
|
1218
1351
|
});
|
|
1219
1352
|
|
|
1220
1353
|
// src/controls/link-control.tsx
|
|
1221
|
-
import * as
|
|
1354
|
+
import * as React31 from "react";
|
|
1222
1355
|
import { useMemo, useState as useState4 } from "react";
|
|
1223
1356
|
import {
|
|
1224
1357
|
booleanPropTypeUtil,
|
|
@@ -1230,11 +1363,11 @@ import {
|
|
|
1230
1363
|
import { httpService } from "@elementor/http";
|
|
1231
1364
|
import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
|
|
1232
1365
|
import { useSessionStorage } from "@elementor/session";
|
|
1233
|
-
import { Collapse, Divider as
|
|
1366
|
+
import { Collapse, Divider as Divider3, Grid as Grid7, IconButton as IconButton4, Stack as Stack9, Switch } from "@elementor/ui";
|
|
1234
1367
|
import { __ as __10 } from "@wordpress/i18n";
|
|
1235
1368
|
|
|
1236
1369
|
// src/components/autocomplete.tsx
|
|
1237
|
-
import * as
|
|
1370
|
+
import * as React30 from "react";
|
|
1238
1371
|
import { forwardRef as forwardRef2 } from "react";
|
|
1239
1372
|
import { XIcon as XIcon3 } from "@elementor/icons";
|
|
1240
1373
|
import {
|
|
@@ -1260,7 +1393,7 @@ var Autocomplete = forwardRef2((props, ref) => {
|
|
|
1260
1393
|
const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
|
|
1261
1394
|
const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
|
|
1262
1395
|
const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
|
|
1263
|
-
return /* @__PURE__ */
|
|
1396
|
+
return /* @__PURE__ */ React30.createElement(
|
|
1264
1397
|
AutocompleteBase,
|
|
1265
1398
|
{
|
|
1266
1399
|
...restProps,
|
|
@@ -1278,8 +1411,8 @@ var Autocomplete = forwardRef2((props, ref) => {
|
|
|
1278
1411
|
groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
|
|
1279
1412
|
isOptionEqualToValue,
|
|
1280
1413
|
filterOptions: () => optionKeys,
|
|
1281
|
-
renderOption: (optionProps, optionId) => /* @__PURE__ */
|
|
1282
|
-
renderInput: (params) => /* @__PURE__ */
|
|
1414
|
+
renderOption: (optionProps, optionId) => /* @__PURE__ */ React30.createElement(Box3, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
|
|
1415
|
+
renderInput: (params) => /* @__PURE__ */ React30.createElement(
|
|
1283
1416
|
TextInput,
|
|
1284
1417
|
{
|
|
1285
1418
|
params,
|
|
@@ -1302,7 +1435,7 @@ var TextInput = ({
|
|
|
1302
1435
|
const onChange = (event) => {
|
|
1303
1436
|
handleChange(event.target.value);
|
|
1304
1437
|
};
|
|
1305
|
-
return /* @__PURE__ */
|
|
1438
|
+
return /* @__PURE__ */ React30.createElement(
|
|
1306
1439
|
TextField7,
|
|
1307
1440
|
{
|
|
1308
1441
|
...params,
|
|
@@ -1315,7 +1448,7 @@ var TextInput = ({
|
|
|
1315
1448
|
},
|
|
1316
1449
|
InputProps: {
|
|
1317
1450
|
...params.InputProps,
|
|
1318
|
-
endAdornment: /* @__PURE__ */
|
|
1451
|
+
endAdornment: /* @__PURE__ */ React30.createElement(ClearButton, { params, allowClear, handleChange })
|
|
1319
1452
|
}
|
|
1320
1453
|
}
|
|
1321
1454
|
);
|
|
@@ -1324,7 +1457,7 @@ var ClearButton = ({
|
|
|
1324
1457
|
allowClear,
|
|
1325
1458
|
handleChange,
|
|
1326
1459
|
params
|
|
1327
|
-
}) => /* @__PURE__ */
|
|
1460
|
+
}) => /* @__PURE__ */ React30.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React30.createElement(IconButton3, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React30.createElement(XIcon3, { fontSize: params.size })));
|
|
1328
1461
|
function findMatchingOption(options, optionId = null) {
|
|
1329
1462
|
const formattedOption = (optionId || "").toString();
|
|
1330
1463
|
return options.find(({ id }) => formattedOption === id.toString());
|
|
@@ -1403,7 +1536,7 @@ var LinkControl = createControl((props) => {
|
|
|
1403
1536
|
),
|
|
1404
1537
|
[endpoint]
|
|
1405
1538
|
);
|
|
1406
|
-
return /* @__PURE__ */
|
|
1539
|
+
return /* @__PURE__ */ React31.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React31.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React31.createElement(Divider3, null), /* @__PURE__ */ React31.createElement(
|
|
1407
1540
|
Stack9,
|
|
1408
1541
|
{
|
|
1409
1542
|
direction: "row",
|
|
@@ -1412,8 +1545,8 @@ var LinkControl = createControl((props) => {
|
|
|
1412
1545
|
alignItems: "center"
|
|
1413
1546
|
}
|
|
1414
1547
|
},
|
|
1415
|
-
/* @__PURE__ */
|
|
1416
|
-
/* @__PURE__ */
|
|
1548
|
+
/* @__PURE__ */ React31.createElement(ControlLabel, null, __10("Link", "elementor")),
|
|
1549
|
+
/* @__PURE__ */ React31.createElement(
|
|
1417
1550
|
ToggleIconControl,
|
|
1418
1551
|
{
|
|
1419
1552
|
enabled: isEnabled,
|
|
@@ -1421,7 +1554,7 @@ var LinkControl = createControl((props) => {
|
|
|
1421
1554
|
label: __10("Toggle link", "elementor")
|
|
1422
1555
|
}
|
|
1423
1556
|
)
|
|
1424
|
-
), /* @__PURE__ */
|
|
1557
|
+
), /* @__PURE__ */ React31.createElement(Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React31.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React31.createElement(ControlActions, null, /* @__PURE__ */ React31.createElement(
|
|
1425
1558
|
Autocomplete,
|
|
1426
1559
|
{
|
|
1427
1560
|
options,
|
|
@@ -1432,17 +1565,17 @@ var LinkControl = createControl((props) => {
|
|
|
1432
1565
|
onTextChange,
|
|
1433
1566
|
minInputLength
|
|
1434
1567
|
}
|
|
1435
|
-
))), /* @__PURE__ */
|
|
1568
|
+
))), /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React31.createElement(SwitchControl, null))))));
|
|
1436
1569
|
});
|
|
1437
1570
|
var ToggleIconControl = ({ enabled, onIconClick, label }) => {
|
|
1438
|
-
return /* @__PURE__ */
|
|
1571
|
+
return /* @__PURE__ */ React31.createElement(IconButton4, { size: SIZE3, onClick: onIconClick, "aria-label": label }, enabled ? /* @__PURE__ */ React31.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React31.createElement(PlusIcon2, { fontSize: SIZE3 }));
|
|
1439
1572
|
};
|
|
1440
1573
|
var SwitchControl = () => {
|
|
1441
1574
|
const { value = false, setValue } = useBoundProp(booleanPropTypeUtil);
|
|
1442
1575
|
const onClick = () => {
|
|
1443
1576
|
setValue(!value);
|
|
1444
1577
|
};
|
|
1445
|
-
return /* @__PURE__ */
|
|
1578
|
+
return /* @__PURE__ */ React31.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React31.createElement(Grid7, { item: true }, /* @__PURE__ */ React31.createElement(ControlLabel, null, __10("Open in new tab", "elementor"))), /* @__PURE__ */ React31.createElement(Grid7, { item: true }, /* @__PURE__ */ React31.createElement(Switch, { checked: value, onClick })));
|
|
1446
1579
|
};
|
|
1447
1580
|
async function fetchOptions(ajaxUrl, params) {
|
|
1448
1581
|
if (!params || !ajaxUrl) {
|
|
@@ -1483,7 +1616,7 @@ function debounce(fn, timeout) {
|
|
|
1483
1616
|
}
|
|
1484
1617
|
|
|
1485
1618
|
// src/controls/gap-control.tsx
|
|
1486
|
-
import * as
|
|
1619
|
+
import * as React32 from "react";
|
|
1487
1620
|
import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
|
|
1488
1621
|
import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
|
|
1489
1622
|
import { Grid as Grid8, Stack as Stack10, ToggleButton as ToggleButton4 } from "@elementor/ui";
|
|
@@ -1508,7 +1641,7 @@ var GapControl = createControl(({ label }) => {
|
|
|
1508
1641
|
});
|
|
1509
1642
|
};
|
|
1510
1643
|
const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
|
|
1511
|
-
return /* @__PURE__ */
|
|
1644
|
+
return /* @__PURE__ */ React32.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React32.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, label), /* @__PURE__ */ React32.createElement(
|
|
1512
1645
|
ToggleButton4,
|
|
1513
1646
|
{
|
|
1514
1647
|
"aria-label": __11("Link inputs", "elementor"),
|
|
@@ -1518,28 +1651,28 @@ var GapControl = createControl(({ label }) => {
|
|
|
1518
1651
|
sx: { marginLeft: "auto" },
|
|
1519
1652
|
onChange: onLinkToggle
|
|
1520
1653
|
},
|
|
1521
|
-
/* @__PURE__ */
|
|
1522
|
-
)), /* @__PURE__ */
|
|
1654
|
+
/* @__PURE__ */ React32.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1655
|
+
)), /* @__PURE__ */ React32.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __11("Column", "elementor"))), /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __11("Row", "elementor"))), /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "row", isLinked })))));
|
|
1523
1656
|
});
|
|
1524
1657
|
var Control4 = ({ bind, isLinked }) => {
|
|
1525
1658
|
if (isLinked) {
|
|
1526
|
-
return /* @__PURE__ */
|
|
1659
|
+
return /* @__PURE__ */ React32.createElement(SizeControl, null);
|
|
1527
1660
|
}
|
|
1528
|
-
return /* @__PURE__ */
|
|
1661
|
+
return /* @__PURE__ */ React32.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React32.createElement(SizeControl, null));
|
|
1529
1662
|
};
|
|
1530
1663
|
|
|
1531
1664
|
// src/controls/svg-media-control.tsx
|
|
1532
|
-
import * as
|
|
1665
|
+
import * as React33 from "react";
|
|
1533
1666
|
import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
|
|
1534
1667
|
import { UploadIcon as UploadIcon2 } from "@elementor/icons";
|
|
1535
|
-
import { Button as Button3, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress2, Stack as Stack11, styled as
|
|
1668
|
+
import { Button as Button3, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress2, Stack as Stack11, styled as styled4 } from "@elementor/ui";
|
|
1536
1669
|
import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
|
|
1537
1670
|
import { __ as __12 } from "@wordpress/i18n";
|
|
1538
1671
|
var TILE_SIZE = 8;
|
|
1539
1672
|
var TILE_WHITE = "transparent";
|
|
1540
1673
|
var TILE_BLACK = "#c1c1c1";
|
|
1541
1674
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
1542
|
-
var StyledCard =
|
|
1675
|
+
var StyledCard = styled4(Card2)`
|
|
1543
1676
|
background-color: white;
|
|
1544
1677
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
1545
1678
|
background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
|
|
@@ -1548,7 +1681,7 @@ var StyledCard = styled3(Card2)`
|
|
|
1548
1681
|
${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
|
|
1549
1682
|
border: none;
|
|
1550
1683
|
`;
|
|
1551
|
-
var StyledCardMediaContainer =
|
|
1684
|
+
var StyledCardMediaContainer = styled4(Stack11)`
|
|
1552
1685
|
position: relative;
|
|
1553
1686
|
height: 140px;
|
|
1554
1687
|
object-fit: contain;
|
|
@@ -1577,7 +1710,7 @@ var SvgMediaControl = createControl(() => {
|
|
|
1577
1710
|
});
|
|
1578
1711
|
}
|
|
1579
1712
|
});
|
|
1580
|
-
return /* @__PURE__ */
|
|
1713
|
+
return /* @__PURE__ */ React33.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React33.createElement(ControlLabel, null, " ", __12("Choose SVG", "elementor"), " "), /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React33.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React33.createElement(CircularProgress2, { role: "progressbar" }) : /* @__PURE__ */ React33.createElement(
|
|
1581
1714
|
CardMedia2,
|
|
1582
1715
|
{
|
|
1583
1716
|
component: "img",
|
|
@@ -1585,7 +1718,7 @@ var SvgMediaControl = createControl(() => {
|
|
|
1585
1718
|
alt: __12("Preview SVG", "elementor"),
|
|
1586
1719
|
sx: { maxHeight: "140px", width: "50px" }
|
|
1587
1720
|
}
|
|
1588
|
-
)), /* @__PURE__ */
|
|
1721
|
+
)), /* @__PURE__ */ React33.createElement(
|
|
1589
1722
|
CardOverlay2,
|
|
1590
1723
|
{
|
|
1591
1724
|
sx: {
|
|
@@ -1594,7 +1727,7 @@ var SvgMediaControl = createControl(() => {
|
|
|
1594
1727
|
}
|
|
1595
1728
|
}
|
|
1596
1729
|
},
|
|
1597
|
-
/* @__PURE__ */
|
|
1730
|
+
/* @__PURE__ */ React33.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React33.createElement(
|
|
1598
1731
|
Button3,
|
|
1599
1732
|
{
|
|
1600
1733
|
size: "tiny",
|
|
@@ -1603,13 +1736,13 @@ var SvgMediaControl = createControl(() => {
|
|
|
1603
1736
|
onClick: () => open({ mode: "browse" })
|
|
1604
1737
|
},
|
|
1605
1738
|
__12("Select SVG", "elementor")
|
|
1606
|
-
), /* @__PURE__ */
|
|
1739
|
+
), /* @__PURE__ */ React33.createElement(
|
|
1607
1740
|
Button3,
|
|
1608
1741
|
{
|
|
1609
1742
|
size: "tiny",
|
|
1610
1743
|
variant: "text",
|
|
1611
1744
|
color: "inherit",
|
|
1612
|
-
startIcon: /* @__PURE__ */
|
|
1745
|
+
startIcon: /* @__PURE__ */ React33.createElement(UploadIcon2, null),
|
|
1613
1746
|
onClick: () => open({ mode: "upload" })
|
|
1614
1747
|
},
|
|
1615
1748
|
__12("Upload SVG", "elementor")
|
|
@@ -1618,13 +1751,13 @@ var SvgMediaControl = createControl(() => {
|
|
|
1618
1751
|
});
|
|
1619
1752
|
|
|
1620
1753
|
// src/controls/background-control/background-control.tsx
|
|
1621
|
-
import * as
|
|
1754
|
+
import * as React39 from "react";
|
|
1622
1755
|
import { backgroundPropTypeUtil } from "@elementor/editor-props";
|
|
1623
1756
|
import { Grid as Grid14 } from "@elementor/ui";
|
|
1624
1757
|
import { __ as __18 } from "@wordpress/i18n";
|
|
1625
1758
|
|
|
1626
1759
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
1627
|
-
import * as
|
|
1760
|
+
import * as React38 from "react";
|
|
1628
1761
|
import {
|
|
1629
1762
|
backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
|
|
1630
1763
|
backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
|
|
@@ -1639,7 +1772,7 @@ import { parseEnv } from "@elementor/env";
|
|
|
1639
1772
|
var { env } = parseEnv("@elementor/editor-controls");
|
|
1640
1773
|
|
|
1641
1774
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
1642
|
-
import * as
|
|
1775
|
+
import * as React34 from "react";
|
|
1643
1776
|
import { PinIcon, PinnedOffIcon } from "@elementor/icons";
|
|
1644
1777
|
import { Grid as Grid9 } from "@elementor/ui";
|
|
1645
1778
|
import { __ as __13 } from "@wordpress/i18n";
|
|
@@ -1647,22 +1780,22 @@ var attachmentControlOptions = [
|
|
|
1647
1780
|
{
|
|
1648
1781
|
value: "fixed",
|
|
1649
1782
|
label: __13("Fixed", "elementor"),
|
|
1650
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1783
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(PinIcon, { fontSize: size }),
|
|
1651
1784
|
showTooltip: true
|
|
1652
1785
|
},
|
|
1653
1786
|
{
|
|
1654
1787
|
value: "scroll",
|
|
1655
1788
|
label: __13("Scroll", "elementor"),
|
|
1656
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1789
|
+
renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(PinnedOffIcon, { fontSize: size }),
|
|
1657
1790
|
showTooltip: true
|
|
1658
1791
|
}
|
|
1659
1792
|
];
|
|
1660
1793
|
var BackgroundImageOverlayAttachment = () => {
|
|
1661
|
-
return /* @__PURE__ */
|
|
1794
|
+
return /* @__PURE__ */ React34.createElement(PopoverGridContainer, null, /* @__PURE__ */ React34.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, __13("Attachment", "elementor"))), /* @__PURE__ */ React34.createElement(Grid9, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
1662
1795
|
};
|
|
1663
1796
|
|
|
1664
1797
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
1665
|
-
import * as
|
|
1798
|
+
import * as React35 from "react";
|
|
1666
1799
|
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
|
|
1667
1800
|
import { LetterXIcon, LetterYIcon } from "@elementor/icons";
|
|
1668
1801
|
import { Grid as Grid10, MenuItem as MenuItem4, Select as Select2 } from "@elementor/ui";
|
|
@@ -1691,7 +1824,7 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
1691
1824
|
stringPropContext.setValue(value);
|
|
1692
1825
|
}
|
|
1693
1826
|
};
|
|
1694
|
-
return /* @__PURE__ */
|
|
1827
|
+
return /* @__PURE__ */ React35.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(PopoverGridContainer, null, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, __14("Position", "elementor"))), /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React35.createElement(
|
|
1695
1828
|
Select2,
|
|
1696
1829
|
{
|
|
1697
1830
|
size: "tiny",
|
|
@@ -1699,12 +1832,12 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
1699
1832
|
onChange: handlePositionChange,
|
|
1700
1833
|
fullWidth: true
|
|
1701
1834
|
},
|
|
1702
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
1703
|
-
)))), isCustom ? /* @__PURE__ */
|
|
1835
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React35.createElement(MenuItem4, { key: value, value: value ?? "" }, label))
|
|
1836
|
+
)))), isCustom ? /* @__PURE__ */ React35.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React35.createElement(SizeControl, { startIcon: /* @__PURE__ */ React35.createElement(LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React35.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React35.createElement(SizeControl, { startIcon: /* @__PURE__ */ React35.createElement(LetterYIcon, { fontSize: "tiny" }) })))))) : null);
|
|
1704
1837
|
};
|
|
1705
1838
|
|
|
1706
1839
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
1707
|
-
import * as
|
|
1840
|
+
import * as React36 from "react";
|
|
1708
1841
|
import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
|
|
1709
1842
|
import { Grid as Grid11 } from "@elementor/ui";
|
|
1710
1843
|
import { __ as __15 } from "@wordpress/i18n";
|
|
@@ -1712,34 +1845,34 @@ var repeatControlOptions = [
|
|
|
1712
1845
|
{
|
|
1713
1846
|
value: "repeat",
|
|
1714
1847
|
label: __15("Repeat", "elementor"),
|
|
1715
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1848
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(GridDotsIcon, { fontSize: size }),
|
|
1716
1849
|
showTooltip: true
|
|
1717
1850
|
},
|
|
1718
1851
|
{
|
|
1719
1852
|
value: "repeat-x",
|
|
1720
1853
|
label: __15("Repeat-x", "elementor"),
|
|
1721
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1854
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(DotsHorizontalIcon, { fontSize: size }),
|
|
1722
1855
|
showTooltip: true
|
|
1723
1856
|
},
|
|
1724
1857
|
{
|
|
1725
1858
|
value: "repeat-y",
|
|
1726
1859
|
label: __15("Repeat-y", "elementor"),
|
|
1727
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1860
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(DotsVerticalIcon, { fontSize: size }),
|
|
1728
1861
|
showTooltip: true
|
|
1729
1862
|
},
|
|
1730
1863
|
{
|
|
1731
1864
|
value: "no-repeat",
|
|
1732
1865
|
label: __15("No-Repeat", "elementor"),
|
|
1733
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1866
|
+
renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(XIcon4, { fontSize: size }),
|
|
1734
1867
|
showTooltip: true
|
|
1735
1868
|
}
|
|
1736
1869
|
];
|
|
1737
1870
|
var BackgroundImageOverlayRepeat = () => {
|
|
1738
|
-
return /* @__PURE__ */
|
|
1871
|
+
return /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, __15("Repeat", "elementor"))), /* @__PURE__ */ React36.createElement(Grid11, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React36.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
1739
1872
|
};
|
|
1740
1873
|
|
|
1741
1874
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
1742
|
-
import * as
|
|
1875
|
+
import * as React37 from "react";
|
|
1743
1876
|
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
|
|
1744
1877
|
import {
|
|
1745
1878
|
ArrowBarBothIcon,
|
|
@@ -1755,25 +1888,25 @@ var sizeControlOptions = [
|
|
|
1755
1888
|
{
|
|
1756
1889
|
value: "auto",
|
|
1757
1890
|
label: __16("Auto", "elementor"),
|
|
1758
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1891
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(LetterAIcon, { fontSize: size }),
|
|
1759
1892
|
showTooltip: true
|
|
1760
1893
|
},
|
|
1761
1894
|
{
|
|
1762
1895
|
value: "cover",
|
|
1763
1896
|
label: __16("Cover", "elementor"),
|
|
1764
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1897
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowsMaximizeIcon, { fontSize: size }),
|
|
1765
1898
|
showTooltip: true
|
|
1766
1899
|
},
|
|
1767
1900
|
{
|
|
1768
1901
|
value: "contain",
|
|
1769
1902
|
label: __16("Contain", "elementor"),
|
|
1770
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1903
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(ArrowBarBothIcon, { fontSize: size }),
|
|
1771
1904
|
showTooltip: true
|
|
1772
1905
|
},
|
|
1773
1906
|
{
|
|
1774
1907
|
value: "custom",
|
|
1775
1908
|
label: __16("Custom", "elementor"),
|
|
1776
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
1909
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(PencilIcon, { fontSize: size }),
|
|
1777
1910
|
showTooltip: true
|
|
1778
1911
|
}
|
|
1779
1912
|
];
|
|
@@ -1788,7 +1921,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
1788
1921
|
stringPropContext.setValue(size);
|
|
1789
1922
|
}
|
|
1790
1923
|
};
|
|
1791
|
-
return /* @__PURE__ */
|
|
1924
|
+
return /* @__PURE__ */ React37.createElement(Grid12, { container: true, spacing: 1.5 }, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, __16("Size", "elementor"))), /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React37.createElement(
|
|
1792
1925
|
ControlToggleButtonGroup,
|
|
1793
1926
|
{
|
|
1794
1927
|
exclusive: true,
|
|
@@ -1796,7 +1929,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
1796
1929
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
|
|
1797
1930
|
onChange: handleSizeChange
|
|
1798
1931
|
}
|
|
1799
|
-
)))), isCustom ? /* @__PURE__ */
|
|
1932
|
+
)))), isCustom ? /* @__PURE__ */ React37.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: /* @__PURE__ */ React37.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React37.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: /* @__PURE__ */ React37.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" }) })))))) : null);
|
|
1800
1933
|
};
|
|
1801
1934
|
|
|
1802
1935
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
@@ -1878,7 +2011,7 @@ var backgroundResolutionOptions = [
|
|
|
1878
2011
|
];
|
|
1879
2012
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
1880
2013
|
const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
|
|
1881
|
-
return /* @__PURE__ */
|
|
2014
|
+
return /* @__PURE__ */ React38.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React38.createElement(
|
|
1882
2015
|
Repeater,
|
|
1883
2016
|
{
|
|
1884
2017
|
values: overlayValues ?? [],
|
|
@@ -1894,58 +2027,58 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
1894
2027
|
));
|
|
1895
2028
|
});
|
|
1896
2029
|
var ItemContent2 = ({ bind }) => {
|
|
1897
|
-
return /* @__PURE__ */
|
|
2030
|
+
return /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React38.createElement(Content2, null));
|
|
1898
2031
|
};
|
|
1899
2032
|
var Content2 = () => {
|
|
1900
2033
|
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
1901
2034
|
image: getInitialBackgroundOverlay().value,
|
|
1902
2035
|
color: initialBackgroundColorOverlay.value
|
|
1903
2036
|
});
|
|
1904
|
-
return /* @__PURE__ */
|
|
2037
|
+
return /* @__PURE__ */ React38.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React38.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React38.createElement(Tabs, { ...getTabsProps(), "aria-label": __17("Background Overlay", "elementor") }, /* @__PURE__ */ React38.createElement(Tab, { label: __17("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React38.createElement(Tab, { label: __17("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React38.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React38.createElement(PopoverContent, null, /* @__PURE__ */ React38.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React38.createElement(TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React38.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(ColorControl, { propTypeUtil: backgroundColorOverlayPropTypeUtil2 })))));
|
|
1905
2038
|
};
|
|
1906
2039
|
var ItemIcon2 = ({ value }) => {
|
|
1907
2040
|
switch (value.$$type) {
|
|
1908
2041
|
case "background-image-overlay":
|
|
1909
|
-
return /* @__PURE__ */
|
|
2042
|
+
return /* @__PURE__ */ React38.createElement(ItemIconImage, { value });
|
|
1910
2043
|
case "background-color-overlay":
|
|
1911
|
-
return /* @__PURE__ */
|
|
2044
|
+
return /* @__PURE__ */ React38.createElement(ItemIconColor, { value });
|
|
1912
2045
|
default:
|
|
1913
2046
|
return null;
|
|
1914
2047
|
}
|
|
1915
2048
|
};
|
|
1916
2049
|
var ItemIconColor = ({ value }) => {
|
|
1917
|
-
return /* @__PURE__ */
|
|
2050
|
+
return /* @__PURE__ */ React38.createElement(UnstableColorIndicator2, { size: "inherit", component: "span", value: value.value });
|
|
1918
2051
|
};
|
|
1919
2052
|
var ItemIconImage = ({ value }) => {
|
|
1920
2053
|
const { imageUrl } = useImage(value);
|
|
1921
|
-
return /* @__PURE__ */
|
|
2054
|
+
return /* @__PURE__ */ React38.createElement(CardMedia3, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
|
|
1922
2055
|
};
|
|
1923
2056
|
var ItemLabel2 = ({ value }) => {
|
|
1924
2057
|
switch (value.$$type) {
|
|
1925
2058
|
case "background-image-overlay":
|
|
1926
|
-
return /* @__PURE__ */
|
|
2059
|
+
return /* @__PURE__ */ React38.createElement(ItemLabelImage, { value });
|
|
1927
2060
|
case "background-color-overlay":
|
|
1928
|
-
return /* @__PURE__ */
|
|
2061
|
+
return /* @__PURE__ */ React38.createElement(ItemLabelColor, { value });
|
|
1929
2062
|
default:
|
|
1930
2063
|
return null;
|
|
1931
2064
|
}
|
|
1932
2065
|
};
|
|
1933
2066
|
var ItemLabelColor = ({ value }) => {
|
|
1934
|
-
return /* @__PURE__ */
|
|
2067
|
+
return /* @__PURE__ */ React38.createElement("span", null, value.value);
|
|
1935
2068
|
};
|
|
1936
2069
|
var ItemLabelImage = ({ value }) => {
|
|
1937
2070
|
const { imageTitle } = useImage(value);
|
|
1938
|
-
return /* @__PURE__ */
|
|
2071
|
+
return /* @__PURE__ */ React38.createElement("span", null, imageTitle);
|
|
1939
2072
|
};
|
|
1940
2073
|
var ImageOverlayContent = () => {
|
|
1941
2074
|
const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
|
|
1942
|
-
return /* @__PURE__ */
|
|
2075
|
+
return /* @__PURE__ */ React38.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React38.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React38.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(
|
|
1943
2076
|
ImageControl,
|
|
1944
2077
|
{
|
|
1945
2078
|
resolutionLabel: __17("Resolution", "elementor"),
|
|
1946
2079
|
sizes: backgroundResolutionOptions
|
|
1947
2080
|
}
|
|
1948
|
-
)))), /* @__PURE__ */
|
|
2081
|
+
)))), /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React38.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React38.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React38.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React38.createElement(BackgroundImageOverlayAttachment, null)));
|
|
1949
2082
|
};
|
|
1950
2083
|
var useImage = (image) => {
|
|
1951
2084
|
let imageTitle, imageUrl = null;
|
|
@@ -1965,7 +2098,7 @@ var useImage = (image) => {
|
|
|
1965
2098
|
// src/controls/background-control/background-control.tsx
|
|
1966
2099
|
var BackgroundControl = createControl(() => {
|
|
1967
2100
|
const propContext = useBoundProp(backgroundPropTypeUtil);
|
|
1968
|
-
return /* @__PURE__ */
|
|
2101
|
+
return /* @__PURE__ */ React39.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React39.createElement(SectionContent, null, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React39.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React39.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, __18("Color", "elementor"))), /* @__PURE__ */ React39.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ColorControl, null))))));
|
|
1969
2102
|
});
|
|
1970
2103
|
export {
|
|
1971
2104
|
BackgroundControl,
|