@elementor/editor-controls 4.4.0-1138 → 4.4.0-1140
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +17 -2
- package/dist/index.d.ts +17 -2
- package/dist/index.js +926 -843
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +775 -695
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -16
- package/src/controls/icon-library/icon-library-popover.tsx +7 -1
- package/src/controls/icon-library/icon-library-upload-action.tsx +108 -0
- package/src/index.ts +5 -0
package/dist/index.mjs
CHANGED
|
@@ -5663,13 +5663,13 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5663
5663
|
});
|
|
5664
5664
|
|
|
5665
5665
|
// src/controls/svg-media-control.tsx
|
|
5666
|
-
import * as
|
|
5667
|
-
import { useEffect as useEffect17, useRef as
|
|
5666
|
+
import * as React93 from "react";
|
|
5667
|
+
import { useEffect as useEffect17, useRef as useRef19, useState as useState23 } from "react";
|
|
5668
5668
|
import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
|
|
5669
5669
|
import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
|
|
5670
|
-
import { Box as
|
|
5670
|
+
import { Box as Box24, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack18, styled as styled12, usePopupState as usePopupState9 } from "@elementor/ui";
|
|
5671
5671
|
import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
|
|
5672
|
-
import { __ as
|
|
5672
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
5673
5673
|
|
|
5674
5674
|
// src/components/enable-unfiltered-modal.tsx
|
|
5675
5675
|
import * as React83 from "react";
|
|
@@ -5747,8 +5747,8 @@ function measureIconLibraryAnchor(container, buttonGroup) {
|
|
|
5747
5747
|
}
|
|
5748
5748
|
|
|
5749
5749
|
// src/controls/icon-library/icon-library-popover.tsx
|
|
5750
|
-
import * as
|
|
5751
|
-
import { useMemo as useMemo12, useState as
|
|
5750
|
+
import * as React90 from "react";
|
|
5751
|
+
import { useMemo as useMemo12, useState as useState22 } from "react";
|
|
5752
5752
|
import {
|
|
5753
5753
|
PopoverBody as PopoverBody2,
|
|
5754
5754
|
PopoverHeader as PopoverHeader4,
|
|
@@ -5758,9 +5758,9 @@ import {
|
|
|
5758
5758
|
} from "@elementor/editor-ui";
|
|
5759
5759
|
import { LibraryIcon as LibraryIcon2 } from "@elementor/icons";
|
|
5760
5760
|
import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
|
|
5761
|
-
import { Box as
|
|
5761
|
+
import { Box as Box21, CircularProgress as CircularProgress3, Divider as Divider5, Link as Link3, Stack as Stack16, styled as styled11, Typography as Typography10 } from "@elementor/ui";
|
|
5762
5762
|
import { useDebounceState } from "@elementor/utils";
|
|
5763
|
-
import { __ as
|
|
5763
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
5764
5764
|
|
|
5765
5765
|
// src/controls/icon-library/font-awesome-7-data.ts
|
|
5766
5766
|
var FONT_AWESOME_7_LIBRARIES = [
|
|
@@ -6642,20 +6642,134 @@ async function resolveProviderIconSvg(library, iconValue, signal) {
|
|
|
6642
6642
|
return null;
|
|
6643
6643
|
}
|
|
6644
6644
|
|
|
6645
|
-
// src/controls/icon-library/icon-library-
|
|
6645
|
+
// src/controls/icon-library/icon-library-upload-action.tsx
|
|
6646
6646
|
import * as React87 from "react";
|
|
6647
|
-
import {
|
|
6648
|
-
import {
|
|
6647
|
+
import { forwardRef as forwardRef11, useRef as useRef18, useState as useState21 } from "react";
|
|
6648
|
+
import { PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
|
|
6649
|
+
import { UploadIcon as UploadIcon2 } from "@elementor/icons";
|
|
6650
|
+
import { createReplaceableLocation as createReplaceableLocation2 } from "@elementor/locations";
|
|
6651
|
+
import { Box as Box20, IconButton as IconButton8, Tooltip as Tooltip10 } from "@elementor/ui";
|
|
6649
6652
|
import { __ as __36 } from "@wordpress/i18n";
|
|
6653
|
+
|
|
6654
|
+
// src/utils/tracking.ts
|
|
6655
|
+
import { getSelectedElements } from "@elementor/editor-elements";
|
|
6656
|
+
import { getMixpanel } from "@elementor/events";
|
|
6657
|
+
var getBaseEventProperties = (data, config) => ({
|
|
6658
|
+
window_name: config?.appTypes?.editor ?? "editor",
|
|
6659
|
+
interaction_type: config?.triggers?.click ?? "Click",
|
|
6660
|
+
target_name: data.target_name,
|
|
6661
|
+
target_location: data.target_location ?? "widget_panel",
|
|
6662
|
+
location_l1: data.location_l1 ?? getSelectedElements()[0]?.type ?? "",
|
|
6663
|
+
...data.location_l2 && { location_l2: data.location_l2 }
|
|
6664
|
+
});
|
|
6665
|
+
var dispatchPromotionEvent = (data, resolveOptions) => {
|
|
6666
|
+
const { dispatchEvent, config } = getMixpanel();
|
|
6667
|
+
const { eventName, interactionResult, interactionDescription } = resolveOptions(config);
|
|
6668
|
+
if (!eventName) {
|
|
6669
|
+
return;
|
|
6670
|
+
}
|
|
6671
|
+
dispatchEvent?.(eventName, {
|
|
6672
|
+
...getBaseEventProperties(data, config),
|
|
6673
|
+
interaction_result: interactionResult,
|
|
6674
|
+
interaction_description: interactionDescription
|
|
6675
|
+
});
|
|
6676
|
+
};
|
|
6677
|
+
var trackViewPromotion = (data) => {
|
|
6678
|
+
dispatchPromotionEvent(data, (config) => ({
|
|
6679
|
+
eventName: config?.names?.promotions?.viewPromotion,
|
|
6680
|
+
interactionResult: config?.interactionResults?.promotionViewed ?? "promotion_viewed",
|
|
6681
|
+
interactionDescription: "user_viewed_promotion"
|
|
6682
|
+
}));
|
|
6683
|
+
};
|
|
6684
|
+
var trackUpgradePromotionClick = (data) => {
|
|
6685
|
+
dispatchPromotionEvent(data, (config) => ({
|
|
6686
|
+
eventName: config?.names?.promotions?.upgradePromotionClick,
|
|
6687
|
+
interactionResult: config?.interactionResults?.upgradeNow ?? "upgrade_now",
|
|
6688
|
+
interactionDescription: "user_clicked_upgrade_now"
|
|
6689
|
+
}));
|
|
6690
|
+
};
|
|
6691
|
+
|
|
6692
|
+
// src/controls/icon-library/icon-library-upload-action.tsx
|
|
6693
|
+
var ICON_LIBRARY_UPLOAD_UPGRADE_URL = "https://go.elementor.com/go-pro-svg-library-upload-upgrade/";
|
|
6694
|
+
var TRACKING_DATA = { target_name: "icon_library_upload", location_l2: "general" };
|
|
6695
|
+
var { Slot: IconLibraryUploadActionSlot, inject: injectIntoIconLibraryUploadAction } = createReplaceableLocation2();
|
|
6696
|
+
var IconLibraryUploadButton = forwardRef11(
|
|
6697
|
+
(props, ref) => {
|
|
6698
|
+
const label = __36("Upload library", "elementor");
|
|
6699
|
+
return /* @__PURE__ */ React87.createElement(Tooltip10, { title: label, placement: "top" }, /* @__PURE__ */ React87.createElement(IconButton8, { ref, size: "tiny", "aria-label": label, ...props }, /* @__PURE__ */ React87.createElement(UploadIcon2, { fontSize: "tiny" })));
|
|
6700
|
+
}
|
|
6701
|
+
);
|
|
6702
|
+
var IconLibraryUploadPromotion = ({
|
|
6703
|
+
ctaUrl = ICON_LIBRARY_UPLOAD_UPGRADE_URL,
|
|
6704
|
+
ctaText = __36("Upgrade now", "elementor"),
|
|
6705
|
+
title = __36("Upload custom icons", "elementor"),
|
|
6706
|
+
content = __36("Add your own icon font library to use across your site.", "elementor")
|
|
6707
|
+
}) => {
|
|
6708
|
+
const [isOpen, setIsOpen] = useState21(false);
|
|
6709
|
+
const triggerRef = useRef18(null);
|
|
6710
|
+
const canSeePromotions = !!window.elementor?.config?.v4Promotions;
|
|
6711
|
+
const close = () => {
|
|
6712
|
+
setIsOpen(false);
|
|
6713
|
+
triggerRef.current?.focus();
|
|
6714
|
+
};
|
|
6715
|
+
useCanvasClickHandler(isOpen, close);
|
|
6716
|
+
const toggle = () => {
|
|
6717
|
+
if (!isOpen) {
|
|
6718
|
+
trackViewPromotion(TRACKING_DATA);
|
|
6719
|
+
}
|
|
6720
|
+
setIsOpen(!isOpen);
|
|
6721
|
+
};
|
|
6722
|
+
if (!canSeePromotions) {
|
|
6723
|
+
return null;
|
|
6724
|
+
}
|
|
6725
|
+
return /* @__PURE__ */ React87.createElement(
|
|
6726
|
+
PromotionPopover,
|
|
6727
|
+
{
|
|
6728
|
+
open: isOpen,
|
|
6729
|
+
placement: "top",
|
|
6730
|
+
arrow: true,
|
|
6731
|
+
title,
|
|
6732
|
+
content,
|
|
6733
|
+
ctaText,
|
|
6734
|
+
ctaUrl,
|
|
6735
|
+
onClose: (event) => {
|
|
6736
|
+
event.stopPropagation();
|
|
6737
|
+
close();
|
|
6738
|
+
},
|
|
6739
|
+
onCtaClick: () => trackUpgradePromotionClick(TRACKING_DATA)
|
|
6740
|
+
},
|
|
6741
|
+
/* @__PURE__ */ React87.createElement(Box20, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React87.createElement(
|
|
6742
|
+
IconLibraryUploadButton,
|
|
6743
|
+
{
|
|
6744
|
+
ref: triggerRef,
|
|
6745
|
+
"aria-haspopup": "dialog",
|
|
6746
|
+
"aria-expanded": isOpen,
|
|
6747
|
+
onClick: toggle
|
|
6748
|
+
}
|
|
6749
|
+
))
|
|
6750
|
+
);
|
|
6751
|
+
};
|
|
6752
|
+
var IconLibraryUploadAction = () => {
|
|
6753
|
+
if (window.elementorPro) {
|
|
6754
|
+
return null;
|
|
6755
|
+
}
|
|
6756
|
+
return /* @__PURE__ */ React87.createElement(IconLibraryUploadPromotion, null);
|
|
6757
|
+
};
|
|
6758
|
+
|
|
6759
|
+
// src/controls/icon-library/icon-library-view-toggle.tsx
|
|
6760
|
+
import * as React88 from "react";
|
|
6761
|
+
import { ListIcon, WidgetsIcon } from "@elementor/icons";
|
|
6762
|
+
import { IconButton as IconButton9, Tooltip as Tooltip11 } from "@elementor/ui";
|
|
6763
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
6650
6764
|
var HEADER_ACTION_GAP = 0.5;
|
|
6651
6765
|
var IconLibraryViewToggle = ({ value, onChange }) => {
|
|
6652
6766
|
const isGrid = value === "grid";
|
|
6653
6767
|
const nextView = isGrid ? "list" : "grid";
|
|
6654
6768
|
const ViewIcon = isGrid ? WidgetsIcon : ListIcon;
|
|
6655
|
-
const viewButtonLabel = isGrid ?
|
|
6656
|
-
const viewButtonAction = isGrid ?
|
|
6657
|
-
return /* @__PURE__ */
|
|
6658
|
-
|
|
6769
|
+
const viewButtonLabel = isGrid ? __37("Grid view", "elementor") : __37("List view", "elementor");
|
|
6770
|
+
const viewButtonAction = isGrid ? __37("Switch to list view", "elementor") : __37("Switch to grid view", "elementor");
|
|
6771
|
+
return /* @__PURE__ */ React88.createElement(
|
|
6772
|
+
Tooltip11,
|
|
6659
6773
|
{
|
|
6660
6774
|
title: viewButtonLabel,
|
|
6661
6775
|
placement: "top",
|
|
@@ -6663,25 +6777,25 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
|
|
|
6663
6777
|
enterNextDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
|
|
6664
6778
|
disableInteractive: true
|
|
6665
6779
|
},
|
|
6666
|
-
/* @__PURE__ */
|
|
6667
|
-
|
|
6780
|
+
/* @__PURE__ */ React88.createElement(
|
|
6781
|
+
IconButton9,
|
|
6668
6782
|
{
|
|
6669
6783
|
"aria-label": viewButtonAction,
|
|
6670
6784
|
size: "tiny",
|
|
6671
6785
|
onClick: () => onChange(nextView),
|
|
6672
6786
|
sx: { flexShrink: 0, mr: HEADER_ACTION_GAP }
|
|
6673
6787
|
},
|
|
6674
|
-
/* @__PURE__ */
|
|
6788
|
+
/* @__PURE__ */ React88.createElement(ViewIcon, { fontSize: "tiny" })
|
|
6675
6789
|
)
|
|
6676
6790
|
);
|
|
6677
6791
|
};
|
|
6678
6792
|
|
|
6679
6793
|
// src/controls/icon-library/svg-element-icon.tsx
|
|
6680
|
-
import * as
|
|
6794
|
+
import * as React89 from "react";
|
|
6681
6795
|
import { SvgIcon } from "@elementor/ui";
|
|
6682
6796
|
var SVG_ELEMENT_ICON_PATH = "M502 772c10 0 19-6 24-14l201-351c4-9 4-19 0-27-5-9-14-14-24-14h-401c-10 0-19 5-24 14-4 8-5 18 0 27l201 351c5 8 14 14 23 14z m0-82l-154-270h309l-154 270z m-323-471c-6 0-12-2-16-7-4-4-7-10-7-16v-201c0-6 3-12 7-16 4-5 10-7 16-7h201c6 0 12 2 16 7 5 4 7 10 7 16v201c0 6-2 12-7 16-4 5-10 7-16 7h-201z m-54 32c14 14 34 22 54 22h201c20 0 40-8 55-22 14-15 22-35 22-55v-201c0-20-8-40-22-54-15-15-35-23-55-23h-201c-20 0-40 8-54 23-15 14-23 34-23 54v201c0 20 8 40 23 55z m480-30c34 33 79 52 126 52s92-19 125-52c34-33 52-78 52-125s-18-93-52-126c-33-33-78-52-125-52s-92 19-126 52c-33 33-52 78-52 126s19 92 52 125z m126-2c-33 0-64-13-87-36-24-23-37-55-37-87s13-65 37-88c23-23 54-36 87-36s64 13 87 36c23 23 36 55 36 88s-13 64-36 87c-23 23-54 36-87 36z";
|
|
6683
|
-
var SvgElementIcon =
|
|
6684
|
-
(props, ref) => /* @__PURE__ */
|
|
6797
|
+
var SvgElementIcon = React89.forwardRef(
|
|
6798
|
+
(props, ref) => /* @__PURE__ */ React89.createElement(SvgIcon, { viewBox: "0 0 1000 1000", ...props, ref }, /* @__PURE__ */ React89.createElement("g", { transform: "translate(0, 850) scale(1, -1)" }, /* @__PURE__ */ React89.createElement("path", { d: SVG_ELEMENT_ICON_PATH })))
|
|
6685
6799
|
);
|
|
6686
6800
|
|
|
6687
6801
|
// src/controls/icon-library/use-font-awesome-7-catalog.ts
|
|
@@ -6732,7 +6846,7 @@ var IconLibraryPopover = ({
|
|
|
6732
6846
|
handleChange: handleSearchChange,
|
|
6733
6847
|
setImmediateValue: setSearchValue
|
|
6734
6848
|
} = useDebounceState({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
|
|
6735
|
-
const [activeLibraries, setActiveLibraries] =
|
|
6849
|
+
const [activeLibraries, setActiveLibraries] = useState22([]);
|
|
6736
6850
|
const [storedView, setStoredView] = useSessionStorage2(
|
|
6737
6851
|
ICON_LIBRARY_VIEW_STORAGE_KEY,
|
|
6738
6852
|
ICON_LIBRARY_VIEW_STORAGE_PREFIX
|
|
@@ -6768,20 +6882,23 @@ var IconLibraryPopover = ({
|
|
|
6768
6882
|
const handleClearSearch = () => {
|
|
6769
6883
|
setSearchValue("");
|
|
6770
6884
|
};
|
|
6771
|
-
return /* @__PURE__ */
|
|
6885
|
+
return /* @__PURE__ */ React90.createElement(PopoverBody2, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React90.createElement(
|
|
6772
6886
|
PopoverHeader4,
|
|
6773
6887
|
{
|
|
6774
|
-
title:
|
|
6888
|
+
title: __38("Icon library", "elementor"),
|
|
6775
6889
|
onClose: handleClose,
|
|
6776
|
-
icon: /* @__PURE__ */
|
|
6777
|
-
actions: [
|
|
6890
|
+
icon: /* @__PURE__ */ React90.createElement(LibraryIcon2, { fontSize: "tiny" }),
|
|
6891
|
+
actions: [
|
|
6892
|
+
/* @__PURE__ */ React90.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView }),
|
|
6893
|
+
/* @__PURE__ */ React90.createElement(IconLibraryUploadActionSlot, { key: "upload" }, /* @__PURE__ */ React90.createElement(IconLibraryUploadAction, null))
|
|
6894
|
+
],
|
|
6778
6895
|
sx: {
|
|
6779
6896
|
pl: ICON_LIBRARY_INLINE_SPACING,
|
|
6780
6897
|
pr: 1,
|
|
6781
6898
|
"& .MuiTypography-subtitle2": { fontSize: ICON_LIBRARY_TITLE_SIZE }
|
|
6782
6899
|
}
|
|
6783
6900
|
}
|
|
6784
|
-
), /* @__PURE__ */
|
|
6901
|
+
), /* @__PURE__ */ React90.createElement(
|
|
6785
6902
|
Stack16,
|
|
6786
6903
|
{
|
|
6787
6904
|
direction: "row",
|
|
@@ -6789,18 +6906,18 @@ var IconLibraryPopover = ({
|
|
|
6789
6906
|
gap: 1,
|
|
6790
6907
|
sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM }
|
|
6791
6908
|
},
|
|
6792
|
-
/* @__PURE__ */
|
|
6909
|
+
/* @__PURE__ */ React90.createElement(
|
|
6793
6910
|
SearchField2,
|
|
6794
6911
|
{
|
|
6795
6912
|
value: searchInputValue,
|
|
6796
6913
|
onSearch: handleSearchChange,
|
|
6797
|
-
placeholder:
|
|
6914
|
+
placeholder: __38("Search", "elementor"),
|
|
6798
6915
|
id: "icon-library-search",
|
|
6799
6916
|
sx: { flex: 1, px: 0, pb: 0 }
|
|
6800
6917
|
}
|
|
6801
6918
|
),
|
|
6802
|
-
/* @__PURE__ */
|
|
6803
|
-
), /* @__PURE__ */
|
|
6919
|
+
/* @__PURE__ */ React90.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })
|
|
6920
|
+
), /* @__PURE__ */ React90.createElement(Divider5, null), /* @__PURE__ */ React90.createElement(Box21, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React90.createElement(
|
|
6804
6921
|
IconLibraryContent,
|
|
6805
6922
|
{
|
|
6806
6923
|
isLoading,
|
|
@@ -6827,9 +6944,9 @@ var IconLibraryContent = ({
|
|
|
6827
6944
|
onClearSearch
|
|
6828
6945
|
}) => {
|
|
6829
6946
|
if (isLoading) {
|
|
6830
|
-
return /* @__PURE__ */
|
|
6947
|
+
return /* @__PURE__ */ React90.createElement(IconLibraryLoadingState, null);
|
|
6831
6948
|
}
|
|
6832
|
-
const emptyState = /* @__PURE__ */
|
|
6949
|
+
const emptyState = /* @__PURE__ */ React90.createElement(
|
|
6833
6950
|
IconLibraryEmptyState,
|
|
6834
6951
|
{
|
|
6835
6952
|
searchValue,
|
|
@@ -6838,7 +6955,7 @@ var IconLibraryContent = ({
|
|
|
6838
6955
|
}
|
|
6839
6956
|
);
|
|
6840
6957
|
if (view === "grid") {
|
|
6841
|
-
return /* @__PURE__ */
|
|
6958
|
+
return /* @__PURE__ */ React90.createElement(Box21, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React90.createElement(
|
|
6842
6959
|
IconLibraryGrid,
|
|
6843
6960
|
{
|
|
6844
6961
|
items: items2,
|
|
@@ -6849,7 +6966,7 @@ var IconLibraryContent = ({
|
|
|
6849
6966
|
}
|
|
6850
6967
|
));
|
|
6851
6968
|
}
|
|
6852
|
-
return /* @__PURE__ */
|
|
6969
|
+
return /* @__PURE__ */ React90.createElement(
|
|
6853
6970
|
PopoverMenuList2,
|
|
6854
6971
|
{
|
|
6855
6972
|
items: items2,
|
|
@@ -6864,21 +6981,21 @@ var IconLibraryContent = ({
|
|
|
6864
6981
|
}
|
|
6865
6982
|
);
|
|
6866
6983
|
};
|
|
6867
|
-
var IconLibraryLoadingState = () => /* @__PURE__ */
|
|
6984
|
+
var IconLibraryLoadingState = () => /* @__PURE__ */ React90.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React90.createElement(CircularProgress3, { role: "progressbar", size: 24 }));
|
|
6868
6985
|
var IconLibraryEmptyState = ({
|
|
6869
6986
|
searchValue,
|
|
6870
6987
|
isCatalogAvailable,
|
|
6871
6988
|
onClear
|
|
6872
6989
|
}) => {
|
|
6873
6990
|
if (!isCatalogAvailable) {
|
|
6874
|
-
return /* @__PURE__ */
|
|
6991
|
+
return /* @__PURE__ */ React90.createElement(CatalogUnavailable, null);
|
|
6875
6992
|
}
|
|
6876
|
-
return /* @__PURE__ */
|
|
6993
|
+
return /* @__PURE__ */ React90.createElement(NoResults, { searchValue, onClear });
|
|
6877
6994
|
};
|
|
6878
6995
|
var IconLibraryRow = (item) => {
|
|
6879
6996
|
const icon = item;
|
|
6880
|
-
return /* @__PURE__ */
|
|
6881
|
-
|
|
6997
|
+
return /* @__PURE__ */ React90.createElement(Stack16, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React90.createElement(
|
|
6998
|
+
Box21,
|
|
6882
6999
|
{
|
|
6883
7000
|
sx: {
|
|
6884
7001
|
width: ICON_TILE_SIZE,
|
|
@@ -6893,11 +7010,11 @@ var IconLibraryRow = (item) => {
|
|
|
6893
7010
|
flexShrink: 0
|
|
6894
7011
|
}
|
|
6895
7012
|
},
|
|
6896
|
-
/* @__PURE__ */
|
|
6897
|
-
), /* @__PURE__ */
|
|
7013
|
+
/* @__PURE__ */ React90.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" })
|
|
7014
|
+
), /* @__PURE__ */ React90.createElement(Typography10, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
|
|
6898
7015
|
};
|
|
6899
|
-
var CatalogUnavailable = () => /* @__PURE__ */
|
|
6900
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
7016
|
+
var CatalogUnavailable = () => /* @__PURE__ */ React90.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React90.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React90.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary" }, __38("Icons couldn't be loaded.", "elementor")));
|
|
7017
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React90.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React90.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary" }, __38("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React90.createElement(Link3, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, __38("Clear & try again", "elementor"))) : null);
|
|
6901
7018
|
var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
|
|
6902
7019
|
...icon,
|
|
6903
7020
|
type: "item",
|
|
@@ -6917,10 +7034,10 @@ function createIconPropValue(icon, library) {
|
|
|
6917
7034
|
}
|
|
6918
7035
|
|
|
6919
7036
|
// src/controls/svg-media-overlay.tsx
|
|
6920
|
-
import * as
|
|
7037
|
+
import * as React91 from "react";
|
|
6921
7038
|
import { LibraryIcon as LibraryIcon3 } from "@elementor/icons";
|
|
6922
|
-
import { Box as
|
|
6923
|
-
import { __ as
|
|
7039
|
+
import { Box as Box22, Button as Button6, Stack as Stack17, ThemeProvider, Typography as Typography11 } from "@elementor/ui";
|
|
7040
|
+
import { __ as __39 } from "@wordpress/i18n";
|
|
6924
7041
|
var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
|
|
6925
7042
|
var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
|
|
6926
7043
|
var ICON_LIBRARY_PADDING = 0.625;
|
|
@@ -6934,31 +7051,31 @@ var SvgMediaOverlay = ({
|
|
|
6934
7051
|
onOpenIconLibrary,
|
|
6935
7052
|
infotipTitle,
|
|
6936
7053
|
infotipDescription
|
|
6937
|
-
}) => /* @__PURE__ */
|
|
7054
|
+
}) => /* @__PURE__ */ React91.createElement(Stack17, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React91.createElement(
|
|
6938
7055
|
MediaActionGroup,
|
|
6939
7056
|
{
|
|
6940
7057
|
label,
|
|
6941
7058
|
onSelect: onSelectSvg,
|
|
6942
7059
|
groupRef: buttonGroupRef,
|
|
6943
7060
|
testId: SVG_MEDIA_ACTION_GROUP_TEST_ID,
|
|
6944
|
-
uploadSlot: /* @__PURE__ */
|
|
7061
|
+
uploadSlot: /* @__PURE__ */ React91.createElement(
|
|
6945
7062
|
ConditionalControlInfotip,
|
|
6946
7063
|
{
|
|
6947
7064
|
title: infotipTitle,
|
|
6948
7065
|
description: infotipDescription,
|
|
6949
7066
|
isEnabled: !isAdmin
|
|
6950
7067
|
},
|
|
6951
|
-
/* @__PURE__ */
|
|
7068
|
+
/* @__PURE__ */ React91.createElement(Box22, { component: "span", sx: { display: "flex", width: "100%" } }, /* @__PURE__ */ React91.createElement(UploadControl, { isAdmin, onUpload }))
|
|
6952
7069
|
)
|
|
6953
7070
|
}
|
|
6954
|
-
), showIconLibrary ? /* @__PURE__ */
|
|
7071
|
+
), showIconLibrary ? /* @__PURE__ */ React91.createElement(
|
|
6955
7072
|
Button6,
|
|
6956
7073
|
{
|
|
6957
7074
|
size: "tiny",
|
|
6958
7075
|
color: "inherit",
|
|
6959
7076
|
variant: "text",
|
|
6960
|
-
startIcon: /* @__PURE__ */
|
|
6961
|
-
"aria-label":
|
|
7077
|
+
startIcon: /* @__PURE__ */ React91.createElement(LibraryIcon3, { sx: { height: "18px", width: "16px" } }),
|
|
7078
|
+
"aria-label": __39("Icon library", "elementor"),
|
|
6962
7079
|
onClick: onOpenIconLibrary,
|
|
6963
7080
|
sx: {
|
|
6964
7081
|
height: "28px",
|
|
@@ -6966,19 +7083,19 @@ var SvgMediaOverlay = ({
|
|
|
6966
7083
|
".MuiButton-icon": { ml: 0 }
|
|
6967
7084
|
}
|
|
6968
7085
|
},
|
|
6969
|
-
/* @__PURE__ */
|
|
7086
|
+
/* @__PURE__ */ React91.createElement(Typography11, null, __39("Icon library", "elementor"))
|
|
6970
7087
|
) : null);
|
|
6971
7088
|
var UploadControl = ({ isAdmin, onUpload }) => {
|
|
6972
7089
|
if (isAdmin) {
|
|
6973
|
-
return /* @__PURE__ */
|
|
7090
|
+
return /* @__PURE__ */ React91.createElement(MediaUploadButton, { onClick: onUpload });
|
|
6974
7091
|
}
|
|
6975
|
-
return /* @__PURE__ */
|
|
7092
|
+
return /* @__PURE__ */ React91.createElement(ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React91.createElement(MediaUploadButton, { disabled: true }));
|
|
6976
7093
|
};
|
|
6977
7094
|
|
|
6978
7095
|
// src/controls/svg-media-preview.tsx
|
|
6979
|
-
import * as
|
|
6980
|
-
import { Box as
|
|
6981
|
-
import { __ as
|
|
7096
|
+
import * as React92 from "react";
|
|
7097
|
+
import { Box as Box23, CardMedia as CardMedia2, CircularProgress as CircularProgress4 } from "@elementor/ui";
|
|
7098
|
+
import { __ as __40 } from "@wordpress/i18n";
|
|
6982
7099
|
var ICON_PREVIEW_SIZE = 50;
|
|
6983
7100
|
var ICON_PREVIEW_COLOR = "#000000";
|
|
6984
7101
|
var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
@@ -6989,27 +7106,27 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
|
6989
7106
|
const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
|
|
6990
7107
|
const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isProviderLoading);
|
|
6991
7108
|
if (isFetching || isLoadingCatalog) {
|
|
6992
|
-
return /* @__PURE__ */
|
|
7109
|
+
return /* @__PURE__ */ React92.createElement(CircularProgress4, { role: "progressbar" });
|
|
6993
7110
|
}
|
|
6994
7111
|
if (selectedIcon) {
|
|
6995
|
-
return /* @__PURE__ */
|
|
7112
|
+
return /* @__PURE__ */ React92.createElement(IconPreview, { icon: selectedIcon });
|
|
6996
7113
|
}
|
|
6997
7114
|
if (shouldLoadIconCatalog) {
|
|
6998
|
-
return /* @__PURE__ */
|
|
7115
|
+
return /* @__PURE__ */ React92.createElement(IconPreviewPlaceholder, null);
|
|
6999
7116
|
}
|
|
7000
|
-
return /* @__PURE__ */
|
|
7117
|
+
return /* @__PURE__ */ React92.createElement(SvgPreview, { src });
|
|
7001
7118
|
};
|
|
7002
|
-
var IconPreview = ({ icon }) => /* @__PURE__ */
|
|
7119
|
+
var IconPreview = ({ icon }) => /* @__PURE__ */ React92.createElement(Box23, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React92.createElement(
|
|
7003
7120
|
FontAwesomeGlyph,
|
|
7004
7121
|
{
|
|
7005
7122
|
icon,
|
|
7006
7123
|
size: ICON_PREVIEW_SIZE,
|
|
7007
7124
|
color: ICON_PREVIEW_COLOR,
|
|
7008
|
-
label:
|
|
7125
|
+
label: __40("Preview icon", "elementor")
|
|
7009
7126
|
}
|
|
7010
7127
|
));
|
|
7011
|
-
var IconPreviewPlaceholder = () => /* @__PURE__ */
|
|
7012
|
-
|
|
7128
|
+
var IconPreviewPlaceholder = () => /* @__PURE__ */ React92.createElement(
|
|
7129
|
+
Box23,
|
|
7013
7130
|
{
|
|
7014
7131
|
"aria-hidden": true,
|
|
7015
7132
|
sx: {
|
|
@@ -7019,12 +7136,12 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React91.createElement(
|
|
|
7019
7136
|
}
|
|
7020
7137
|
}
|
|
7021
7138
|
);
|
|
7022
|
-
var SvgPreview = ({ src }) => /* @__PURE__ */
|
|
7139
|
+
var SvgPreview = ({ src }) => /* @__PURE__ */ React92.createElement(
|
|
7023
7140
|
CardMedia2,
|
|
7024
7141
|
{
|
|
7025
7142
|
component: "img",
|
|
7026
7143
|
image: src,
|
|
7027
|
-
alt:
|
|
7144
|
+
alt: __40("Preview SVG", "elementor"),
|
|
7028
7145
|
sx: { maxHeight: "140px", width: `${ICON_PREVIEW_SIZE}px`, color: ICON_PREVIEW_COLOR }
|
|
7029
7146
|
}
|
|
7030
7147
|
);
|
|
@@ -7058,7 +7175,7 @@ var StyledCardMediaContainer = styled12(Stack18)`
|
|
|
7058
7175
|
var MODE_BROWSE = { mode: "browse" };
|
|
7059
7176
|
var MODE_UPLOAD = { mode: "upload" };
|
|
7060
7177
|
var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
7061
|
-
const groupLabel = label ??
|
|
7178
|
+
const groupLabel = label ?? __41("SVG", "elementor");
|
|
7062
7179
|
const { value: svgValue, setValue: setSvgValue, placeholder: svgPlaceholder } = useBoundProp(svgSrcPropTypeUtil);
|
|
7063
7180
|
const { value: iconValue, setValue: setIconValue, placeholder: iconPlaceholder } = useBoundProp(iconPropTypeUtil);
|
|
7064
7181
|
const id = svgValue?.id;
|
|
@@ -7068,11 +7185,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7068
7185
|
const { data: attachment, isFetching } = useWpMediaAttachment2(previewSvgValue?.id?.value || null);
|
|
7069
7186
|
const src = attachment?.url ?? previewSvgValue?.url?.value ?? null;
|
|
7070
7187
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
7071
|
-
const [unfilteredModalOpenState, setUnfilteredModalOpenState] =
|
|
7188
|
+
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState23(false);
|
|
7072
7189
|
const iconLibraryPopoverState = usePopupState9({ variant: "popover" });
|
|
7073
|
-
const controlContainerRef =
|
|
7074
|
-
const buttonGroupRef =
|
|
7075
|
-
const [iconLibraryAnchor, setIconLibraryAnchor] =
|
|
7190
|
+
const controlContainerRef = useRef19(null);
|
|
7191
|
+
const buttonGroupRef = useRef19(null);
|
|
7192
|
+
const [iconLibraryAnchor, setIconLibraryAnchor] = useState23(null);
|
|
7076
7193
|
const { isAdmin } = useCurrentUserCapabilities();
|
|
7077
7194
|
const selectedIconClass = showIconLibrary && typeof previewIconValue?.value?.value === "string" ? previewIconValue.value.value : null;
|
|
7078
7195
|
const selectedIconLibrary = showIconLibrary && typeof previewIconValue?.library?.value === "string" ? previewIconValue.library.value : null;
|
|
@@ -7140,7 +7257,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7140
7257
|
};
|
|
7141
7258
|
}, [iconLibraryPopoverState.isOpen]);
|
|
7142
7259
|
const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
|
|
7143
|
-
return /* @__PURE__ */
|
|
7260
|
+
return /* @__PURE__ */ React93.createElement(Stack18, { gap: 1, "aria-label": __41("SVG control", "elementor") }, /* @__PURE__ */ React93.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React93.createElement(
|
|
7144
7261
|
Popover6,
|
|
7145
7262
|
{
|
|
7146
7263
|
disableScrollLock: true,
|
|
@@ -7160,7 +7277,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7160
7277
|
}
|
|
7161
7278
|
}
|
|
7162
7279
|
},
|
|
7163
|
-
/* @__PURE__ */
|
|
7280
|
+
/* @__PURE__ */ React93.createElement(
|
|
7164
7281
|
IconLibraryPopover,
|
|
7165
7282
|
{
|
|
7166
7283
|
open: iconLibraryPopoverState.isOpen,
|
|
@@ -7171,14 +7288,14 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7171
7288
|
width: iconLibraryWidth
|
|
7172
7289
|
}
|
|
7173
7290
|
)
|
|
7174
|
-
) : null, /* @__PURE__ */
|
|
7175
|
-
|
|
7291
|
+
) : null, /* @__PURE__ */ React93.createElement(
|
|
7292
|
+
Box24,
|
|
7176
7293
|
{
|
|
7177
7294
|
ref: controlContainerRef,
|
|
7178
7295
|
"data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
|
|
7179
7296
|
sx: { width: "100%" }
|
|
7180
7297
|
},
|
|
7181
|
-
/* @__PURE__ */
|
|
7298
|
+
/* @__PURE__ */ React93.createElement(ControlActions, null, /* @__PURE__ */ React93.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React93.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React93.createElement(
|
|
7182
7299
|
SvgMediaPreview,
|
|
7183
7300
|
{
|
|
7184
7301
|
isFetching,
|
|
@@ -7186,7 +7303,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7186
7303
|
iconClassName: selectedIconClass,
|
|
7187
7304
|
iconLibrary: selectedIconLibrary
|
|
7188
7305
|
}
|
|
7189
|
-
)), /* @__PURE__ */
|
|
7306
|
+
)), /* @__PURE__ */ React93.createElement(
|
|
7190
7307
|
CardOverlay2,
|
|
7191
7308
|
{
|
|
7192
7309
|
sx: {
|
|
@@ -7195,7 +7312,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7195
7312
|
}
|
|
7196
7313
|
}
|
|
7197
7314
|
},
|
|
7198
|
-
/* @__PURE__ */
|
|
7315
|
+
/* @__PURE__ */ React93.createElement(
|
|
7199
7316
|
SvgMediaOverlay,
|
|
7200
7317
|
{
|
|
7201
7318
|
label: groupLabel,
|
|
@@ -7205,23 +7322,23 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7205
7322
|
onSelectSvg: handleSelectSvg,
|
|
7206
7323
|
onUpload: handleUpload,
|
|
7207
7324
|
onOpenIconLibrary: handleOpenIconLibrary,
|
|
7208
|
-
infotipTitle:
|
|
7209
|
-
infotipDescription: /* @__PURE__ */
|
|
7325
|
+
infotipTitle: __41("Sorry, you can't upload that file yet.", "elementor"),
|
|
7326
|
+
infotipDescription: /* @__PURE__ */ React93.createElement(UnfilteredUploadInfotipDescription, null)
|
|
7210
7327
|
}
|
|
7211
7328
|
)
|
|
7212
7329
|
)))
|
|
7213
7330
|
));
|
|
7214
7331
|
});
|
|
7215
|
-
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */
|
|
7332
|
+
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, __41("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React93.createElement("br", null), __41("file uploads.", "elementor"));
|
|
7216
7333
|
|
|
7217
7334
|
// src/controls/video-media-control.tsx
|
|
7218
|
-
import * as
|
|
7335
|
+
import * as React94 from "react";
|
|
7219
7336
|
import { urlPropTypeUtil as urlPropTypeUtil5, videoSrcPropTypeUtil } from "@elementor/editor-props";
|
|
7220
7337
|
import { Card as Card3, CardMedia as CardMedia3, CardOverlay as CardOverlay3, CircularProgress as CircularProgress5 } from "@elementor/ui";
|
|
7221
7338
|
import { useWpMediaAttachment as useWpMediaAttachment3, useWpMediaFrame as useWpMediaFrame3 } from "@elementor/wp-media";
|
|
7222
|
-
import { __ as
|
|
7339
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
7223
7340
|
var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
|
|
7224
|
-
var VideoMediaControl = createControl(({ label =
|
|
7341
|
+
var VideoMediaControl = createControl(({ label = __42("Video", "elementor") }) => {
|
|
7225
7342
|
const { value, setValue, propType } = useBoundProp(videoSrcPropTypeUtil);
|
|
7226
7343
|
const { id, url } = value ?? {};
|
|
7227
7344
|
const { data: attachment, isFetching } = useWpMediaAttachment3(id?.value || null);
|
|
@@ -7249,7 +7366,7 @@ var VideoMediaControl = createControl(({ label = __41("Video", "elementor") }) =
|
|
|
7249
7366
|
});
|
|
7250
7367
|
}
|
|
7251
7368
|
});
|
|
7252
|
-
return /* @__PURE__ */
|
|
7369
|
+
return /* @__PURE__ */ React94.createElement(ControlActions, null, /* @__PURE__ */ React94.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React94.createElement(
|
|
7253
7370
|
CardMedia3,
|
|
7254
7371
|
{
|
|
7255
7372
|
sx: {
|
|
@@ -7264,8 +7381,8 @@ var VideoMediaControl = createControl(({ label = __41("Video", "elementor") }) =
|
|
|
7264
7381
|
alignItems: "center"
|
|
7265
7382
|
}
|
|
7266
7383
|
},
|
|
7267
|
-
/* @__PURE__ */
|
|
7268
|
-
), /* @__PURE__ */
|
|
7384
|
+
/* @__PURE__ */ React94.createElement(VideoPreview, { isFetching, videoUrl })
|
|
7385
|
+
), /* @__PURE__ */ React94.createElement(CardOverlay3, null, /* @__PURE__ */ React94.createElement(
|
|
7269
7386
|
MediaSelectActions,
|
|
7270
7387
|
{
|
|
7271
7388
|
label,
|
|
@@ -7277,13 +7394,13 @@ var VideoMediaControl = createControl(({ label = __41("Video", "elementor") }) =
|
|
|
7277
7394
|
});
|
|
7278
7395
|
var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
7279
7396
|
if (isFetching) {
|
|
7280
|
-
return /* @__PURE__ */
|
|
7397
|
+
return /* @__PURE__ */ React94.createElement(CircularProgress5, null);
|
|
7281
7398
|
}
|
|
7282
7399
|
if (videoUrl) {
|
|
7283
|
-
return /* @__PURE__ */
|
|
7400
|
+
return /* @__PURE__ */ React94.createElement(
|
|
7284
7401
|
"video",
|
|
7285
7402
|
{
|
|
7286
|
-
"aria-label":
|
|
7403
|
+
"aria-label": __42("Video preview", "elementor"),
|
|
7287
7404
|
src: videoUrl,
|
|
7288
7405
|
muted: true,
|
|
7289
7406
|
preload: "metadata",
|
|
@@ -7296,33 +7413,33 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
|
7296
7413
|
}
|
|
7297
7414
|
);
|
|
7298
7415
|
}
|
|
7299
|
-
return /* @__PURE__ */
|
|
7416
|
+
return /* @__PURE__ */ React94.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
|
|
7300
7417
|
};
|
|
7301
7418
|
|
|
7302
7419
|
// src/controls/background-control/background-control.tsx
|
|
7303
|
-
import * as
|
|
7420
|
+
import * as React101 from "react";
|
|
7304
7421
|
import { backgroundPropTypeUtil } from "@elementor/editor-props";
|
|
7305
7422
|
import { Grid as Grid18 } from "@elementor/ui";
|
|
7306
|
-
import { __ as
|
|
7423
|
+
import { __ as __48 } from "@wordpress/i18n";
|
|
7307
7424
|
|
|
7308
7425
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
7309
|
-
import * as
|
|
7426
|
+
import * as React100 from "react";
|
|
7310
7427
|
import {
|
|
7311
7428
|
backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
|
|
7312
7429
|
backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
|
|
7313
7430
|
backgroundOverlayPropTypeUtil,
|
|
7314
7431
|
colorPropTypeUtil as colorPropTypeUtil3
|
|
7315
7432
|
} from "@elementor/editor-props";
|
|
7316
|
-
import { Box as
|
|
7433
|
+
import { Box as Box25, CardMedia as CardMedia4, styled as styled13, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
|
|
7317
7434
|
import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
|
|
7318
|
-
import { __ as
|
|
7435
|
+
import { __ as __47 } from "@wordpress/i18n";
|
|
7319
7436
|
|
|
7320
7437
|
// src/env.ts
|
|
7321
7438
|
import { parseEnv } from "@elementor/env";
|
|
7322
7439
|
var { env } = parseEnv("@elementor/editor-controls");
|
|
7323
7440
|
|
|
7324
7441
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
7325
|
-
import * as
|
|
7442
|
+
import * as React95 from "react";
|
|
7326
7443
|
import {
|
|
7327
7444
|
backgroundGradientOverlayPropTypeUtil,
|
|
7328
7445
|
colorPropTypeUtil as colorPropTypeUtil2,
|
|
@@ -7369,7 +7486,7 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
7369
7486
|
positions: positions?.value.split(" ")
|
|
7370
7487
|
};
|
|
7371
7488
|
};
|
|
7372
|
-
return /* @__PURE__ */
|
|
7489
|
+
return /* @__PURE__ */ React95.createElement(
|
|
7373
7490
|
UnstableGradientBox,
|
|
7374
7491
|
{
|
|
7375
7492
|
sx: { width: "auto", padding: 1.5 },
|
|
@@ -7394,53 +7511,53 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
|
|
|
7394
7511
|
});
|
|
7395
7512
|
|
|
7396
7513
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
7397
|
-
import * as
|
|
7514
|
+
import * as React96 from "react";
|
|
7398
7515
|
import { PinIcon, PinnedOffIcon } from "@elementor/icons";
|
|
7399
7516
|
import { Grid as Grid14 } from "@elementor/ui";
|
|
7400
|
-
import { __ as
|
|
7517
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
7401
7518
|
var attachmentControlOptions = [
|
|
7402
7519
|
{
|
|
7403
7520
|
value: "fixed",
|
|
7404
|
-
label:
|
|
7405
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7521
|
+
label: __43("Fixed", "elementor"),
|
|
7522
|
+
renderContent: ({ size }) => /* @__PURE__ */ React96.createElement(PinIcon, { fontSize: size }),
|
|
7406
7523
|
showTooltip: true
|
|
7407
7524
|
},
|
|
7408
7525
|
{
|
|
7409
7526
|
value: "scroll",
|
|
7410
|
-
label:
|
|
7411
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7527
|
+
label: __43("Scroll", "elementor"),
|
|
7528
|
+
renderContent: ({ size }) => /* @__PURE__ */ React96.createElement(PinnedOffIcon, { fontSize: size }),
|
|
7412
7529
|
showTooltip: true
|
|
7413
7530
|
}
|
|
7414
7531
|
];
|
|
7415
7532
|
var BackgroundImageOverlayAttachment = () => {
|
|
7416
|
-
return /* @__PURE__ */
|
|
7533
|
+
return /* @__PURE__ */ React96.createElement(PopoverGridContainer, null, /* @__PURE__ */ React96.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlFormLabel, null, __43("Attachment", "elementor"))), /* @__PURE__ */ React96.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React96.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
7417
7534
|
};
|
|
7418
7535
|
|
|
7419
7536
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
7420
|
-
import * as
|
|
7421
|
-
import { useRef as
|
|
7537
|
+
import * as React97 from "react";
|
|
7538
|
+
import { useRef as useRef20 } from "react";
|
|
7422
7539
|
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
|
|
7423
7540
|
import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
|
|
7424
7541
|
import { LetterXIcon, LetterYIcon } from "@elementor/icons";
|
|
7425
7542
|
import { Grid as Grid15, Select as Select4 } from "@elementor/ui";
|
|
7426
|
-
import { __ as
|
|
7543
|
+
import { __ as __44 } from "@wordpress/i18n";
|
|
7427
7544
|
var backgroundPositionOptions = [
|
|
7428
|
-
{ label:
|
|
7429
|
-
{ label:
|
|
7430
|
-
{ label:
|
|
7431
|
-
{ label:
|
|
7432
|
-
{ label:
|
|
7433
|
-
{ label:
|
|
7434
|
-
{ label:
|
|
7435
|
-
{ label:
|
|
7436
|
-
{ label:
|
|
7437
|
-
{ label:
|
|
7545
|
+
{ label: __44("Center center", "elementor"), value: "center center" },
|
|
7546
|
+
{ label: __44("Center left", "elementor"), value: "center left" },
|
|
7547
|
+
{ label: __44("Center right", "elementor"), value: "center right" },
|
|
7548
|
+
{ label: __44("Top center", "elementor"), value: "top center" },
|
|
7549
|
+
{ label: __44("Top left", "elementor"), value: "top left" },
|
|
7550
|
+
{ label: __44("Top right", "elementor"), value: "top right" },
|
|
7551
|
+
{ label: __44("Bottom center", "elementor"), value: "bottom center" },
|
|
7552
|
+
{ label: __44("Bottom left", "elementor"), value: "bottom left" },
|
|
7553
|
+
{ label: __44("Bottom right", "elementor"), value: "bottom right" },
|
|
7554
|
+
{ label: __44("Custom", "elementor"), value: "custom" }
|
|
7438
7555
|
];
|
|
7439
7556
|
var BackgroundImageOverlayPosition = () => {
|
|
7440
7557
|
const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
|
|
7441
7558
|
const stringPropContext = useBoundProp(stringPropTypeUtil16);
|
|
7442
7559
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
7443
|
-
const rowRef =
|
|
7560
|
+
const rowRef = useRef20(null);
|
|
7444
7561
|
const handlePositionChange = (event) => {
|
|
7445
7562
|
const value = event.target.value || null;
|
|
7446
7563
|
if (value === "custom") {
|
|
@@ -7449,7 +7566,7 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7449
7566
|
stringPropContext.setValue(value);
|
|
7450
7567
|
}
|
|
7451
7568
|
};
|
|
7452
|
-
return /* @__PURE__ */
|
|
7569
|
+
return /* @__PURE__ */ React97.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(PopoverGridContainer, null, /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlFormLabel, null, __44("Position", "elementor"))), /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React97.createElement(ControlActions, null, /* @__PURE__ */ React97.createElement(
|
|
7453
7570
|
Select4,
|
|
7454
7571
|
{
|
|
7455
7572
|
fullWidth: true,
|
|
@@ -7458,18 +7575,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7458
7575
|
disabled: stringPropContext.disabled,
|
|
7459
7576
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
7460
7577
|
},
|
|
7461
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
7462
|
-
))))), isCustom ? /* @__PURE__ */
|
|
7578
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React97.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
|
|
7579
|
+
))))), isCustom ? /* @__PURE__ */ React97.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React97.createElement(
|
|
7463
7580
|
SizeControl,
|
|
7464
7581
|
{
|
|
7465
|
-
startIcon: /* @__PURE__ */
|
|
7582
|
+
startIcon: /* @__PURE__ */ React97.createElement(LetterXIcon, { fontSize: "tiny" }),
|
|
7466
7583
|
anchorRef: rowRef,
|
|
7467
7584
|
min: -Number.MAX_SAFE_INTEGER
|
|
7468
7585
|
}
|
|
7469
|
-
))), /* @__PURE__ */
|
|
7586
|
+
))), /* @__PURE__ */ React97.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React97.createElement(
|
|
7470
7587
|
SizeControl,
|
|
7471
7588
|
{
|
|
7472
|
-
startIcon: /* @__PURE__ */
|
|
7589
|
+
startIcon: /* @__PURE__ */ React97.createElement(LetterYIcon, { fontSize: "tiny" }),
|
|
7473
7590
|
anchorRef: rowRef,
|
|
7474
7591
|
min: -Number.MAX_SAFE_INTEGER
|
|
7475
7592
|
}
|
|
@@ -7477,43 +7594,43 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7477
7594
|
};
|
|
7478
7595
|
|
|
7479
7596
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
7480
|
-
import * as
|
|
7597
|
+
import * as React98 from "react";
|
|
7481
7598
|
import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
|
|
7482
7599
|
import { Grid as Grid16 } from "@elementor/ui";
|
|
7483
|
-
import { __ as
|
|
7600
|
+
import { __ as __45 } from "@wordpress/i18n";
|
|
7484
7601
|
var repeatControlOptions = [
|
|
7485
7602
|
{
|
|
7486
7603
|
value: "repeat",
|
|
7487
|
-
label:
|
|
7488
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7604
|
+
label: __45("Repeat", "elementor"),
|
|
7605
|
+
renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(GridDotsIcon, { fontSize: size }),
|
|
7489
7606
|
showTooltip: true
|
|
7490
7607
|
},
|
|
7491
7608
|
{
|
|
7492
7609
|
value: "repeat-x",
|
|
7493
|
-
label:
|
|
7494
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7610
|
+
label: __45("Repeat-x", "elementor"),
|
|
7611
|
+
renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(DotsHorizontalIcon, { fontSize: size }),
|
|
7495
7612
|
showTooltip: true
|
|
7496
7613
|
},
|
|
7497
7614
|
{
|
|
7498
7615
|
value: "repeat-y",
|
|
7499
|
-
label:
|
|
7500
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7616
|
+
label: __45("Repeat-y", "elementor"),
|
|
7617
|
+
renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(DotsVerticalIcon, { fontSize: size }),
|
|
7501
7618
|
showTooltip: true
|
|
7502
7619
|
},
|
|
7503
7620
|
{
|
|
7504
7621
|
value: "no-repeat",
|
|
7505
|
-
label:
|
|
7506
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7622
|
+
label: __45("No-repeat", "elementor"),
|
|
7623
|
+
renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(XIcon3, { fontSize: size }),
|
|
7507
7624
|
showTooltip: true
|
|
7508
7625
|
}
|
|
7509
7626
|
];
|
|
7510
7627
|
var BackgroundImageOverlayRepeat = () => {
|
|
7511
|
-
return /* @__PURE__ */
|
|
7628
|
+
return /* @__PURE__ */ React98.createElement(PopoverGridContainer, null, /* @__PURE__ */ React98.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(ControlFormLabel, null, __45("Repeat", "elementor"))), /* @__PURE__ */ React98.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React98.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
7512
7629
|
};
|
|
7513
7630
|
|
|
7514
7631
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
7515
|
-
import * as
|
|
7516
|
-
import { useRef as
|
|
7632
|
+
import * as React99 from "react";
|
|
7633
|
+
import { useRef as useRef21 } from "react";
|
|
7517
7634
|
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
|
|
7518
7635
|
import {
|
|
7519
7636
|
ArrowBarBothIcon,
|
|
@@ -7524,30 +7641,30 @@ import {
|
|
|
7524
7641
|
PencilIcon
|
|
7525
7642
|
} from "@elementor/icons";
|
|
7526
7643
|
import { Grid as Grid17 } from "@elementor/ui";
|
|
7527
|
-
import { __ as
|
|
7644
|
+
import { __ as __46 } from "@wordpress/i18n";
|
|
7528
7645
|
var sizeControlOptions = [
|
|
7529
7646
|
{
|
|
7530
7647
|
value: "auto",
|
|
7531
|
-
label:
|
|
7532
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7648
|
+
label: __46("Auto", "elementor"),
|
|
7649
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(LetterAIcon, { fontSize: size }),
|
|
7533
7650
|
showTooltip: true
|
|
7534
7651
|
},
|
|
7535
7652
|
{
|
|
7536
7653
|
value: "cover",
|
|
7537
|
-
label:
|
|
7538
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7654
|
+
label: __46("Cover", "elementor"),
|
|
7655
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(ArrowsMaximizeIcon, { fontSize: size }),
|
|
7539
7656
|
showTooltip: true
|
|
7540
7657
|
},
|
|
7541
7658
|
{
|
|
7542
7659
|
value: "contain",
|
|
7543
|
-
label:
|
|
7544
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7660
|
+
label: __46("Contain", "elementor"),
|
|
7661
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(ArrowBarBothIcon, { fontSize: size }),
|
|
7545
7662
|
showTooltip: true
|
|
7546
7663
|
},
|
|
7547
7664
|
{
|
|
7548
7665
|
value: "custom",
|
|
7549
|
-
label:
|
|
7550
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7666
|
+
label: __46("Custom", "elementor"),
|
|
7667
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(PencilIcon, { fontSize: size }),
|
|
7551
7668
|
showTooltip: true
|
|
7552
7669
|
}
|
|
7553
7670
|
];
|
|
@@ -7555,7 +7672,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7555
7672
|
const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
|
|
7556
7673
|
const stringPropContext = useBoundProp(stringPropTypeUtil17);
|
|
7557
7674
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
7558
|
-
const rowRef =
|
|
7675
|
+
const rowRef = useRef21(null);
|
|
7559
7676
|
const handleSizeChange = (size) => {
|
|
7560
7677
|
if (size === "custom") {
|
|
7561
7678
|
backgroundImageScaleContext.setValue({ width: null, height: null });
|
|
@@ -7563,7 +7680,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7563
7680
|
stringPropContext.setValue(size);
|
|
7564
7681
|
}
|
|
7565
7682
|
};
|
|
7566
|
-
return /* @__PURE__ */
|
|
7683
|
+
return /* @__PURE__ */ React99.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(PopoverGridContainer, null, /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, __46("Size", "elementor"))), /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React99.createElement(
|
|
7567
7684
|
ControlToggleButtonGroup,
|
|
7568
7685
|
{
|
|
7569
7686
|
exclusive: true,
|
|
@@ -7572,17 +7689,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7572
7689
|
disabled: stringPropContext.disabled,
|
|
7573
7690
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
7574
7691
|
}
|
|
7575
|
-
)))), isCustom ? /* @__PURE__ */
|
|
7692
|
+
)))), isCustom ? /* @__PURE__ */ React99.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React99.createElement(PopoverGridContainer, null, /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React99.createElement(
|
|
7576
7693
|
SizeControl,
|
|
7577
7694
|
{
|
|
7578
|
-
startIcon: /* @__PURE__ */
|
|
7695
|
+
startIcon: /* @__PURE__ */ React99.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
|
|
7579
7696
|
extendedOptions: ["auto"],
|
|
7580
7697
|
anchorRef: rowRef
|
|
7581
7698
|
}
|
|
7582
|
-
))), /* @__PURE__ */
|
|
7699
|
+
))), /* @__PURE__ */ React99.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React99.createElement(
|
|
7583
7700
|
SizeControl,
|
|
7584
7701
|
{
|
|
7585
|
-
startIcon: /* @__PURE__ */
|
|
7702
|
+
startIcon: /* @__PURE__ */ React99.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
|
|
7586
7703
|
extendedOptions: ["auto"],
|
|
7587
7704
|
anchorRef: rowRef
|
|
7588
7705
|
}
|
|
@@ -7590,7 +7707,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7590
7707
|
};
|
|
7591
7708
|
|
|
7592
7709
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
7593
|
-
import { useRef as
|
|
7710
|
+
import { useRef as useRef22 } from "react";
|
|
7594
7711
|
import {
|
|
7595
7712
|
backgroundColorOverlayPropTypeUtil,
|
|
7596
7713
|
backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
|
|
@@ -7615,7 +7732,7 @@ var useBackgroundTabsHistory = ({
|
|
|
7615
7732
|
return "image";
|
|
7616
7733
|
};
|
|
7617
7734
|
const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
|
|
7618
|
-
const valuesHistory =
|
|
7735
|
+
const valuesHistory = useRef22({
|
|
7619
7736
|
image: initialBackgroundImageOverlay,
|
|
7620
7737
|
color: initialBackgroundColorOverlay2,
|
|
7621
7738
|
gradient: initialBackgroundGradientOverlay2
|
|
@@ -7683,29 +7800,29 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
7683
7800
|
}
|
|
7684
7801
|
});
|
|
7685
7802
|
var backgroundResolutionOptions = [
|
|
7686
|
-
{ label:
|
|
7687
|
-
{ label:
|
|
7688
|
-
{ label:
|
|
7689
|
-
{ label:
|
|
7803
|
+
{ label: __47("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
7804
|
+
{ label: __47("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
7805
|
+
{ label: __47("Large 1024 x 1024", "elementor"), value: "large" },
|
|
7806
|
+
{ label: __47("Full", "elementor"), value: "full" }
|
|
7690
7807
|
];
|
|
7691
7808
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
7692
7809
|
const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
|
|
7693
|
-
return /* @__PURE__ */
|
|
7810
|
+
return /* @__PURE__ */ React100.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React100.createElement(
|
|
7694
7811
|
ControlRepeater,
|
|
7695
7812
|
{
|
|
7696
7813
|
initial: getInitialBackgroundOverlay(),
|
|
7697
7814
|
propTypeUtil: backgroundOverlayPropTypeUtil
|
|
7698
7815
|
},
|
|
7699
|
-
/* @__PURE__ */
|
|
7700
|
-
/* @__PURE__ */
|
|
7816
|
+
/* @__PURE__ */ React100.createElement(RepeaterHeader, { label: __47("Overlay", "elementor") }, /* @__PURE__ */ React100.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
7817
|
+
/* @__PURE__ */ React100.createElement(ItemsContainer, null, /* @__PURE__ */ React100.createElement(
|
|
7701
7818
|
Item,
|
|
7702
7819
|
{
|
|
7703
7820
|
Icon: ItemIcon2,
|
|
7704
7821
|
Label: ItemLabel3,
|
|
7705
|
-
actions: /* @__PURE__ */
|
|
7822
|
+
actions: /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(DuplicateItemAction, null), /* @__PURE__ */ React100.createElement(DisableItemAction, null), /* @__PURE__ */ React100.createElement(RemoveItemAction, null))
|
|
7706
7823
|
}
|
|
7707
7824
|
)),
|
|
7708
|
-
/* @__PURE__ */
|
|
7825
|
+
/* @__PURE__ */ React100.createElement(EditItemPopover, null, /* @__PURE__ */ React100.createElement(ItemContent2, null))
|
|
7709
7826
|
));
|
|
7710
7827
|
});
|
|
7711
7828
|
var ItemContent2 = () => {
|
|
@@ -7715,27 +7832,27 @@ var ItemContent2 = () => {
|
|
|
7715
7832
|
gradient: initialBackgroundGradientOverlay.value
|
|
7716
7833
|
});
|
|
7717
7834
|
const { rowRef } = useRepeaterContext();
|
|
7718
|
-
return /* @__PURE__ */
|
|
7835
|
+
return /* @__PURE__ */ React100.createElement(Box25, { sx: { width: "100%" } }, /* @__PURE__ */ React100.createElement(Box25, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React100.createElement(
|
|
7719
7836
|
Tabs,
|
|
7720
7837
|
{
|
|
7721
7838
|
size: "small",
|
|
7722
7839
|
variant: "fullWidth",
|
|
7723
7840
|
...getTabsProps(),
|
|
7724
|
-
"aria-label":
|
|
7841
|
+
"aria-label": __47("Background Overlay", "elementor")
|
|
7725
7842
|
},
|
|
7726
|
-
/* @__PURE__ */
|
|
7727
|
-
/* @__PURE__ */
|
|
7728
|
-
/* @__PURE__ */
|
|
7729
|
-
)), /* @__PURE__ */
|
|
7843
|
+
/* @__PURE__ */ React100.createElement(Tab, { label: __47("Image", "elementor"), ...getTabProps("image") }),
|
|
7844
|
+
/* @__PURE__ */ React100.createElement(Tab, { label: __47("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
7845
|
+
/* @__PURE__ */ React100.createElement(Tab, { label: __47("Color", "elementor"), ...getTabProps("color") })
|
|
7846
|
+
)), /* @__PURE__ */ React100.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React100.createElement(PopoverContent, null, /* @__PURE__ */ React100.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React100.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React100.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React100.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React100.createElement(PopoverContent, null, /* @__PURE__ */ React100.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
7730
7847
|
};
|
|
7731
7848
|
var ItemIcon2 = ({ value }) => {
|
|
7732
7849
|
switch (value.$$type) {
|
|
7733
7850
|
case "background-image-overlay":
|
|
7734
|
-
return /* @__PURE__ */
|
|
7851
|
+
return /* @__PURE__ */ React100.createElement(ItemIconImage, { value });
|
|
7735
7852
|
case "background-color-overlay":
|
|
7736
|
-
return /* @__PURE__ */
|
|
7853
|
+
return /* @__PURE__ */ React100.createElement(ItemIconColor, { value });
|
|
7737
7854
|
case "background-gradient-overlay":
|
|
7738
|
-
return /* @__PURE__ */
|
|
7855
|
+
return /* @__PURE__ */ React100.createElement(ItemIconGradient, { value });
|
|
7739
7856
|
default:
|
|
7740
7857
|
return null;
|
|
7741
7858
|
}
|
|
@@ -7748,11 +7865,11 @@ var extractColorFrom = (prop) => {
|
|
|
7748
7865
|
};
|
|
7749
7866
|
var ItemIconColor = ({ value: prop }) => {
|
|
7750
7867
|
const color = extractColorFrom(prop);
|
|
7751
|
-
return /* @__PURE__ */
|
|
7868
|
+
return /* @__PURE__ */ React100.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
7752
7869
|
};
|
|
7753
7870
|
var ItemIconImage = ({ value }) => {
|
|
7754
7871
|
const { imageUrl } = useImage(value);
|
|
7755
|
-
return /* @__PURE__ */
|
|
7872
|
+
return /* @__PURE__ */ React100.createElement(
|
|
7756
7873
|
CardMedia4,
|
|
7757
7874
|
{
|
|
7758
7875
|
image: imageUrl,
|
|
@@ -7767,41 +7884,41 @@ var ItemIconImage = ({ value }) => {
|
|
|
7767
7884
|
};
|
|
7768
7885
|
var ItemIconGradient = ({ value }) => {
|
|
7769
7886
|
const gradient = getGradientValue(value);
|
|
7770
|
-
return /* @__PURE__ */
|
|
7887
|
+
return /* @__PURE__ */ React100.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
7771
7888
|
};
|
|
7772
7889
|
var ItemLabel3 = ({ value }) => {
|
|
7773
7890
|
switch (value.$$type) {
|
|
7774
7891
|
case "background-image-overlay":
|
|
7775
|
-
return /* @__PURE__ */
|
|
7892
|
+
return /* @__PURE__ */ React100.createElement(ItemLabelImage, { value });
|
|
7776
7893
|
case "background-color-overlay":
|
|
7777
|
-
return /* @__PURE__ */
|
|
7894
|
+
return /* @__PURE__ */ React100.createElement(ItemLabelColor, { value });
|
|
7778
7895
|
case "background-gradient-overlay":
|
|
7779
|
-
return /* @__PURE__ */
|
|
7896
|
+
return /* @__PURE__ */ React100.createElement(ItemLabelGradient, { value });
|
|
7780
7897
|
default:
|
|
7781
7898
|
return null;
|
|
7782
7899
|
}
|
|
7783
7900
|
};
|
|
7784
7901
|
var ItemLabelColor = ({ value: prop }) => {
|
|
7785
7902
|
const color = extractColorFrom(prop);
|
|
7786
|
-
return /* @__PURE__ */
|
|
7903
|
+
return /* @__PURE__ */ React100.createElement("span", null, color);
|
|
7787
7904
|
};
|
|
7788
7905
|
var ItemLabelImage = ({ value }) => {
|
|
7789
7906
|
const { imageTitle } = useImage(value);
|
|
7790
|
-
return /* @__PURE__ */
|
|
7907
|
+
return /* @__PURE__ */ React100.createElement("span", null, imageTitle);
|
|
7791
7908
|
};
|
|
7792
7909
|
var ItemLabelGradient = ({ value }) => {
|
|
7793
7910
|
if (value.value.type.value === "linear") {
|
|
7794
|
-
return /* @__PURE__ */
|
|
7911
|
+
return /* @__PURE__ */ React100.createElement("span", null, __47("Linear Gradient", "elementor"));
|
|
7795
7912
|
}
|
|
7796
|
-
return /* @__PURE__ */
|
|
7913
|
+
return /* @__PURE__ */ React100.createElement("span", null, __47("Radial Gradient", "elementor"));
|
|
7797
7914
|
};
|
|
7798
7915
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
7799
7916
|
const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
|
|
7800
|
-
return /* @__PURE__ */
|
|
7917
|
+
return /* @__PURE__ */ React100.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React100.createElement(ColorControl, { anchorEl })));
|
|
7801
7918
|
};
|
|
7802
7919
|
var ImageOverlayContent = () => {
|
|
7803
7920
|
const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
|
|
7804
|
-
return /* @__PURE__ */
|
|
7921
|
+
return /* @__PURE__ */ React100.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React100.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React100.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React100.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React100.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React100.createElement(BackgroundImageOverlayAttachment, null)));
|
|
7805
7922
|
};
|
|
7806
7923
|
var StyledUnstableColorIndicator3 = styled13(UnstableColorIndicator3)(({ theme }) => ({
|
|
7807
7924
|
height: "1rem",
|
|
@@ -7842,29 +7959,29 @@ var getGradientValue = (value) => {
|
|
|
7842
7959
|
|
|
7843
7960
|
// src/controls/background-control/background-control.tsx
|
|
7844
7961
|
var clipOptions = [
|
|
7845
|
-
{ label:
|
|
7846
|
-
{ label:
|
|
7847
|
-
{ label:
|
|
7848
|
-
{ label:
|
|
7962
|
+
{ label: __48("Full element", "elementor"), value: "border-box" },
|
|
7963
|
+
{ label: __48("Padding edges", "elementor"), value: "padding-box" },
|
|
7964
|
+
{ label: __48("Content edges", "elementor"), value: "content-box" },
|
|
7965
|
+
{ label: __48("Text", "elementor"), value: "text" }
|
|
7849
7966
|
];
|
|
7850
|
-
var colorLabel =
|
|
7851
|
-
var clipLabel =
|
|
7967
|
+
var colorLabel = __48("Color", "elementor");
|
|
7968
|
+
var clipLabel = __48("Clipping", "elementor");
|
|
7852
7969
|
var BackgroundControl = createControl(() => {
|
|
7853
7970
|
const propContext = useBoundProp(backgroundPropTypeUtil);
|
|
7854
|
-
return /* @__PURE__ */
|
|
7971
|
+
return /* @__PURE__ */ React101.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React101.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React101.createElement(BackgroundColorField, null), /* @__PURE__ */ React101.createElement(BackgroundClipField, null));
|
|
7855
7972
|
});
|
|
7856
7973
|
var BackgroundColorField = () => {
|
|
7857
|
-
return /* @__PURE__ */
|
|
7974
|
+
return /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React101.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React101.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React101.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ColorControl, null))));
|
|
7858
7975
|
};
|
|
7859
7976
|
var BackgroundClipField = () => {
|
|
7860
|
-
return /* @__PURE__ */
|
|
7977
|
+
return /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React101.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React101.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React101.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(SelectControl, { options: clipOptions }))));
|
|
7861
7978
|
};
|
|
7862
7979
|
|
|
7863
7980
|
// src/controls/repeatable-control.tsx
|
|
7864
|
-
import * as
|
|
7981
|
+
import * as React102 from "react";
|
|
7865
7982
|
import { useMemo as useMemo13 } from "react";
|
|
7866
7983
|
import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
|
|
7867
|
-
import { Box as
|
|
7984
|
+
import { Box as Box26 } from "@elementor/ui";
|
|
7868
7985
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
7869
7986
|
var RepeatableControl = createControl(
|
|
7870
7987
|
({
|
|
@@ -7897,14 +8014,14 @@ var RepeatableControl = createControl(
|
|
|
7897
8014
|
);
|
|
7898
8015
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
|
|
7899
8016
|
const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
|
|
7900
|
-
return /* @__PURE__ */
|
|
8017
|
+
return /* @__PURE__ */ React102.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React102.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React102.createElement(
|
|
7901
8018
|
ControlRepeater,
|
|
7902
8019
|
{
|
|
7903
8020
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
7904
8021
|
propTypeUtil: childArrayPropTypeUtil2,
|
|
7905
8022
|
isItemDisabled: isItemDisabled2
|
|
7906
8023
|
},
|
|
7907
|
-
/* @__PURE__ */
|
|
8024
|
+
/* @__PURE__ */ React102.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React102.createElement(
|
|
7908
8025
|
TooltipAddItemAction,
|
|
7909
8026
|
{
|
|
7910
8027
|
...addItemTooltipProps,
|
|
@@ -7912,22 +8029,22 @@ var RepeatableControl = createControl(
|
|
|
7912
8029
|
ariaLabel: repeaterLabel
|
|
7913
8030
|
}
|
|
7914
8031
|
)),
|
|
7915
|
-
/* @__PURE__ */
|
|
8032
|
+
/* @__PURE__ */ React102.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React102.createElement(
|
|
7916
8033
|
Item,
|
|
7917
8034
|
{
|
|
7918
8035
|
Icon: ItemIcon3,
|
|
7919
8036
|
Label: ItemLabel4,
|
|
7920
|
-
actions: /* @__PURE__ */
|
|
8037
|
+
actions: /* @__PURE__ */ React102.createElement(React102.Fragment, null, showDuplicate && /* @__PURE__ */ React102.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React102.createElement(DisableItemAction, null), /* @__PURE__ */ React102.createElement(RemoveItemAction, null))
|
|
7921
8038
|
}
|
|
7922
8039
|
)),
|
|
7923
|
-
/* @__PURE__ */
|
|
8040
|
+
/* @__PURE__ */ React102.createElement(EditItemPopover, null, /* @__PURE__ */ React102.createElement(Content2, null))
|
|
7924
8041
|
)));
|
|
7925
8042
|
}
|
|
7926
8043
|
);
|
|
7927
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
8044
|
+
var ItemIcon3 = () => /* @__PURE__ */ React102.createElement(React102.Fragment, null);
|
|
7928
8045
|
var Content2 = () => {
|
|
7929
8046
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
7930
|
-
return /* @__PURE__ */
|
|
8047
|
+
return /* @__PURE__ */ React102.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React102.createElement(PopoverGridContainer, null, /* @__PURE__ */ React102.createElement(ChildControl, { ...props })));
|
|
7931
8048
|
};
|
|
7932
8049
|
var interpolate = (template, data) => {
|
|
7933
8050
|
if (!data) {
|
|
@@ -8010,7 +8127,7 @@ var ItemLabel4 = ({ value }) => {
|
|
|
8010
8127
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
8011
8128
|
const isReadOnly = !!childProps?.readOnly;
|
|
8012
8129
|
const color = getTextColor(isReadOnly, showPlaceholder);
|
|
8013
|
-
return /* @__PURE__ */
|
|
8130
|
+
return /* @__PURE__ */ React102.createElement(Box26, { component: "span", color }, label);
|
|
8014
8131
|
};
|
|
8015
8132
|
var getAllProperties = (pattern) => {
|
|
8016
8133
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -8018,15 +8135,15 @@ var getAllProperties = (pattern) => {
|
|
|
8018
8135
|
};
|
|
8019
8136
|
|
|
8020
8137
|
// src/controls/key-value-control.tsx
|
|
8021
|
-
import * as
|
|
8022
|
-
import { useMemo as useMemo14, useState as
|
|
8138
|
+
import * as React103 from "react";
|
|
8139
|
+
import { useMemo as useMemo14, useState as useState24 } from "react";
|
|
8023
8140
|
import {
|
|
8024
8141
|
isTransformable,
|
|
8025
8142
|
keyValuePropTypeUtil,
|
|
8026
8143
|
stringPropTypeUtil as stringPropTypeUtil18
|
|
8027
8144
|
} from "@elementor/editor-props";
|
|
8028
8145
|
import { FormHelperText, FormLabel as FormLabel3, Grid as Grid19 } from "@elementor/ui";
|
|
8029
|
-
import { __ as
|
|
8146
|
+
import { __ as __49 } from "@wordpress/i18n";
|
|
8030
8147
|
|
|
8031
8148
|
// src/utils/escape-html-attr.ts
|
|
8032
8149
|
var escapeHtmlAttr = (value) => {
|
|
@@ -8050,14 +8167,14 @@ var getInitialFieldValue = (fieldValue) => {
|
|
|
8050
8167
|
};
|
|
8051
8168
|
var KeyValueControl = createControl((props = {}) => {
|
|
8052
8169
|
const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
|
|
8053
|
-
const [keyError, setKeyError] =
|
|
8054
|
-
const [valueError, setValueError] =
|
|
8055
|
-
const [sessionState, setSessionState] =
|
|
8170
|
+
const [keyError, setKeyError] = useState24("");
|
|
8171
|
+
const [valueError, setValueError] = useState24("");
|
|
8172
|
+
const [sessionState, setSessionState] = useState24({
|
|
8056
8173
|
key: getInitialFieldValue(value?.key),
|
|
8057
8174
|
value: getInitialFieldValue(value?.value)
|
|
8058
8175
|
});
|
|
8059
|
-
const keyLabel = props.keyName ||
|
|
8060
|
-
const valueLabel = props.valueName ||
|
|
8176
|
+
const keyLabel = props.keyName || __49("Key", "elementor");
|
|
8177
|
+
const valueLabel = props.valueName || __49("Value", "elementor");
|
|
8061
8178
|
const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
|
|
8062
8179
|
keyHelper: void 0,
|
|
8063
8180
|
valueHelper: void 0
|
|
@@ -8066,7 +8183,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8066
8183
|
() => [
|
|
8067
8184
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
8068
8185
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
8069
|
-
props.validationErrorMessage ||
|
|
8186
|
+
props.validationErrorMessage || __49("Invalid Format", "elementor")
|
|
8070
8187
|
],
|
|
8071
8188
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
8072
8189
|
);
|
|
@@ -8115,14 +8232,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8115
8232
|
});
|
|
8116
8233
|
}
|
|
8117
8234
|
};
|
|
8118
|
-
return /* @__PURE__ */
|
|
8235
|
+
return /* @__PURE__ */ React103.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React103.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React103.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React103.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React103.createElement(
|
|
8119
8236
|
TextControl,
|
|
8120
8237
|
{
|
|
8121
8238
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
8122
8239
|
error: !!keyError,
|
|
8123
8240
|
helperText: keyHelper
|
|
8124
8241
|
}
|
|
8125
|
-
)), !!keyError && /* @__PURE__ */
|
|
8242
|
+
)), !!keyError && /* @__PURE__ */ React103.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React103.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React103.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React103.createElement(
|
|
8126
8243
|
TextControl,
|
|
8127
8244
|
{
|
|
8128
8245
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -8130,27 +8247,27 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8130
8247
|
inputDisabled: !!keyError,
|
|
8131
8248
|
helperText: valueHelper
|
|
8132
8249
|
}
|
|
8133
|
-
)), !!valueError && /* @__PURE__ */
|
|
8250
|
+
)), !!valueError && /* @__PURE__ */ React103.createElement(FormHelperText, { error: true }, valueError))));
|
|
8134
8251
|
});
|
|
8135
8252
|
|
|
8136
8253
|
// src/controls/position-control.tsx
|
|
8137
|
-
import * as
|
|
8254
|
+
import * as React104 from "react";
|
|
8138
8255
|
import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil19 } from "@elementor/editor-props";
|
|
8139
8256
|
import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
|
|
8140
8257
|
import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
|
|
8141
8258
|
import { Grid as Grid20, Select as Select5 } from "@elementor/ui";
|
|
8142
|
-
import { __ as
|
|
8259
|
+
import { __ as __50 } from "@wordpress/i18n";
|
|
8143
8260
|
var positionOptions = [
|
|
8144
|
-
{ label:
|
|
8145
|
-
{ label:
|
|
8146
|
-
{ label:
|
|
8147
|
-
{ label:
|
|
8148
|
-
{ label:
|
|
8149
|
-
{ label:
|
|
8150
|
-
{ label:
|
|
8151
|
-
{ label:
|
|
8152
|
-
{ label:
|
|
8153
|
-
{ label:
|
|
8261
|
+
{ label: __50("Center center", "elementor"), value: "center center" },
|
|
8262
|
+
{ label: __50("Center left", "elementor"), value: "center left" },
|
|
8263
|
+
{ label: __50("Center right", "elementor"), value: "center right" },
|
|
8264
|
+
{ label: __50("Top center", "elementor"), value: "top center" },
|
|
8265
|
+
{ label: __50("Top left", "elementor"), value: "top left" },
|
|
8266
|
+
{ label: __50("Top right", "elementor"), value: "top right" },
|
|
8267
|
+
{ label: __50("Bottom center", "elementor"), value: "bottom center" },
|
|
8268
|
+
{ label: __50("Bottom left", "elementor"), value: "bottom left" },
|
|
8269
|
+
{ label: __50("Bottom right", "elementor"), value: "bottom right" },
|
|
8270
|
+
{ label: __50("Custom", "elementor"), value: "custom" }
|
|
8154
8271
|
];
|
|
8155
8272
|
var PositionControl = () => {
|
|
8156
8273
|
const positionContext = useBoundProp(positionPropTypeUtil);
|
|
@@ -8165,7 +8282,7 @@ var PositionControl = () => {
|
|
|
8165
8282
|
stringPropContext.setValue(value);
|
|
8166
8283
|
}
|
|
8167
8284
|
};
|
|
8168
|
-
return /* @__PURE__ */
|
|
8285
|
+
return /* @__PURE__ */ React104.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React104.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(ControlFormLabel, null, __50("Object position", "elementor"))), /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React104.createElement(
|
|
8169
8286
|
Select5,
|
|
8170
8287
|
{
|
|
8171
8288
|
size: "tiny",
|
|
@@ -8176,29 +8293,29 @@ var PositionControl = () => {
|
|
|
8176
8293
|
renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
|
|
8177
8294
|
fullWidth: true
|
|
8178
8295
|
},
|
|
8179
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
8180
|
-
)))), isCustom && /* @__PURE__ */
|
|
8296
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React104.createElement(MenuListItem7, { key: value, value: value ?? "" }, label))
|
|
8297
|
+
)))), isCustom && /* @__PURE__ */ React104.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React104.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React104.createElement(
|
|
8181
8298
|
SizeControl,
|
|
8182
8299
|
{
|
|
8183
|
-
startIcon: /* @__PURE__ */
|
|
8300
|
+
startIcon: /* @__PURE__ */ React104.createElement(LetterXIcon2, { fontSize: "tiny" }),
|
|
8184
8301
|
min: -Number.MAX_SAFE_INTEGER
|
|
8185
8302
|
}
|
|
8186
|
-
))), /* @__PURE__ */
|
|
8303
|
+
))), /* @__PURE__ */ React104.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React104.createElement(
|
|
8187
8304
|
SizeControl,
|
|
8188
8305
|
{
|
|
8189
|
-
startIcon: /* @__PURE__ */
|
|
8306
|
+
startIcon: /* @__PURE__ */ React104.createElement(LetterYIcon2, { fontSize: "tiny" }),
|
|
8190
8307
|
min: -Number.MAX_SAFE_INTEGER
|
|
8191
8308
|
}
|
|
8192
8309
|
)))))));
|
|
8193
8310
|
};
|
|
8194
8311
|
|
|
8195
8312
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
8196
|
-
import * as
|
|
8197
|
-
import { useRef as
|
|
8313
|
+
import * as React117 from "react";
|
|
8314
|
+
import { useRef as useRef30 } from "react";
|
|
8198
8315
|
import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
|
|
8199
8316
|
import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
|
|
8200
|
-
import { bindTrigger as bindTrigger5, Box as
|
|
8201
|
-
import { __ as
|
|
8317
|
+
import { bindTrigger as bindTrigger5, Box as Box30, IconButton as IconButton10, Tooltip as Tooltip12, Typography as Typography12, usePopupState as usePopupState10 } from "@elementor/ui";
|
|
8318
|
+
import { __ as __60 } from "@wordpress/i18n";
|
|
8202
8319
|
|
|
8203
8320
|
// src/controls/transform-control/initial-values.ts
|
|
8204
8321
|
import {
|
|
@@ -8252,24 +8369,24 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
|
|
|
8252
8369
|
});
|
|
8253
8370
|
|
|
8254
8371
|
// src/controls/transform-control/transform-content.tsx
|
|
8255
|
-
import * as
|
|
8256
|
-
import { Box as
|
|
8257
|
-
import { __ as
|
|
8372
|
+
import * as React111 from "react";
|
|
8373
|
+
import { Box as Box27, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
|
|
8374
|
+
import { __ as __55 } from "@wordpress/i18n";
|
|
8258
8375
|
|
|
8259
8376
|
// src/controls/transform-control/functions/move.tsx
|
|
8260
|
-
import * as
|
|
8261
|
-
import { useRef as
|
|
8377
|
+
import * as React106 from "react";
|
|
8378
|
+
import { useRef as useRef23 } from "react";
|
|
8262
8379
|
import { moveTransformPropTypeUtil } from "@elementor/editor-props";
|
|
8263
8380
|
import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
|
|
8264
8381
|
import { Grid as Grid22 } from "@elementor/ui";
|
|
8265
|
-
import { __ as
|
|
8382
|
+
import { __ as __51 } from "@wordpress/i18n";
|
|
8266
8383
|
|
|
8267
8384
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
8268
|
-
import * as
|
|
8385
|
+
import * as React105 from "react";
|
|
8269
8386
|
import { Grid as Grid21 } from "@elementor/ui";
|
|
8270
8387
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
8271
8388
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
8272
|
-
return /* @__PURE__ */
|
|
8389
|
+
return /* @__PURE__ */ React105.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React105.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React105.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React105.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React105.createElement(
|
|
8273
8390
|
SizeControl,
|
|
8274
8391
|
{
|
|
8275
8392
|
anchorRef,
|
|
@@ -8285,28 +8402,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
|
|
|
8285
8402
|
// src/controls/transform-control/functions/move.tsx
|
|
8286
8403
|
var moveAxisControls = [
|
|
8287
8404
|
{
|
|
8288
|
-
label:
|
|
8405
|
+
label: __51("Move X", "elementor"),
|
|
8289
8406
|
bind: "x",
|
|
8290
|
-
startIcon: /* @__PURE__ */
|
|
8407
|
+
startIcon: /* @__PURE__ */ React106.createElement(ArrowRightIcon, { fontSize: "tiny" }),
|
|
8291
8408
|
units: ["px", "%", "em", "rem", "vw"]
|
|
8292
8409
|
},
|
|
8293
8410
|
{
|
|
8294
|
-
label:
|
|
8411
|
+
label: __51("Move Y", "elementor"),
|
|
8295
8412
|
bind: "y",
|
|
8296
|
-
startIcon: /* @__PURE__ */
|
|
8413
|
+
startIcon: /* @__PURE__ */ React106.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
8297
8414
|
units: ["px", "%", "em", "rem", "vh"]
|
|
8298
8415
|
},
|
|
8299
8416
|
{
|
|
8300
|
-
label:
|
|
8417
|
+
label: __51("Move Z", "elementor"),
|
|
8301
8418
|
bind: "z",
|
|
8302
|
-
startIcon: /* @__PURE__ */
|
|
8419
|
+
startIcon: /* @__PURE__ */ React106.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
8303
8420
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
8304
8421
|
}
|
|
8305
8422
|
];
|
|
8306
8423
|
var Move = () => {
|
|
8307
8424
|
const context = useBoundProp(moveTransformPropTypeUtil);
|
|
8308
|
-
const rowRefs = [
|
|
8309
|
-
return /* @__PURE__ */
|
|
8425
|
+
const rowRefs = [useRef23(null), useRef23(null), useRef23(null)];
|
|
8426
|
+
return /* @__PURE__ */ React106.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React106.createElement(PropProvider, { ...context }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React106.createElement(
|
|
8310
8427
|
AxisRow,
|
|
8311
8428
|
{
|
|
8312
8429
|
key: control.bind,
|
|
@@ -8319,34 +8436,34 @@ var Move = () => {
|
|
|
8319
8436
|
};
|
|
8320
8437
|
|
|
8321
8438
|
// src/controls/transform-control/functions/rotate.tsx
|
|
8322
|
-
import * as
|
|
8323
|
-
import { useRef as
|
|
8439
|
+
import * as React107 from "react";
|
|
8440
|
+
import { useRef as useRef24 } from "react";
|
|
8324
8441
|
import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
8325
8442
|
import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
|
|
8326
8443
|
import { Grid as Grid23 } from "@elementor/ui";
|
|
8327
|
-
import { __ as
|
|
8444
|
+
import { __ as __52 } from "@wordpress/i18n";
|
|
8328
8445
|
var rotateAxisControls = [
|
|
8329
8446
|
{
|
|
8330
|
-
label:
|
|
8447
|
+
label: __52("Rotate X", "elementor"),
|
|
8331
8448
|
bind: "x",
|
|
8332
|
-
startIcon: /* @__PURE__ */
|
|
8449
|
+
startIcon: /* @__PURE__ */ React107.createElement(Arrow360Icon, { fontSize: "tiny" })
|
|
8333
8450
|
},
|
|
8334
8451
|
{
|
|
8335
|
-
label:
|
|
8452
|
+
label: __52("Rotate Y", "elementor"),
|
|
8336
8453
|
bind: "y",
|
|
8337
|
-
startIcon: /* @__PURE__ */
|
|
8454
|
+
startIcon: /* @__PURE__ */ React107.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
8338
8455
|
},
|
|
8339
8456
|
{
|
|
8340
|
-
label:
|
|
8457
|
+
label: __52("Rotate Z", "elementor"),
|
|
8341
8458
|
bind: "z",
|
|
8342
|
-
startIcon: /* @__PURE__ */
|
|
8459
|
+
startIcon: /* @__PURE__ */ React107.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
|
|
8343
8460
|
}
|
|
8344
8461
|
];
|
|
8345
8462
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
8346
8463
|
var Rotate = () => {
|
|
8347
8464
|
const context = useBoundProp(rotateTransformPropTypeUtil2);
|
|
8348
|
-
const rowRefs = [
|
|
8349
|
-
return /* @__PURE__ */
|
|
8465
|
+
const rowRefs = [useRef24(null), useRef24(null), useRef24(null)];
|
|
8466
|
+
return /* @__PURE__ */ React107.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React107.createElement(PropProvider, { ...context }, /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React107.createElement(
|
|
8350
8467
|
AxisRow,
|
|
8351
8468
|
{
|
|
8352
8469
|
key: control.bind,
|
|
@@ -8358,68 +8475,68 @@ var Rotate = () => {
|
|
|
8358
8475
|
};
|
|
8359
8476
|
|
|
8360
8477
|
// src/controls/transform-control/functions/scale.tsx
|
|
8361
|
-
import * as
|
|
8362
|
-
import { useRef as
|
|
8478
|
+
import * as React109 from "react";
|
|
8479
|
+
import { useRef as useRef25 } from "react";
|
|
8363
8480
|
import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
8364
8481
|
import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
|
|
8365
8482
|
import { Grid as Grid25 } from "@elementor/ui";
|
|
8366
|
-
import { __ as
|
|
8483
|
+
import { __ as __53 } from "@wordpress/i18n";
|
|
8367
8484
|
|
|
8368
8485
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
8369
|
-
import * as
|
|
8486
|
+
import * as React108 from "react";
|
|
8370
8487
|
import { Grid as Grid24 } from "@elementor/ui";
|
|
8371
8488
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
8372
|
-
return /* @__PURE__ */
|
|
8489
|
+
return /* @__PURE__ */ React108.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React108.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React108.createElement(ControlLabel, null, label)), /* @__PURE__ */ React108.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React108.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
8373
8490
|
};
|
|
8374
8491
|
|
|
8375
8492
|
// src/controls/transform-control/functions/scale.tsx
|
|
8376
8493
|
var scaleAxisControls = [
|
|
8377
8494
|
{
|
|
8378
|
-
label:
|
|
8495
|
+
label: __53("Scale X", "elementor"),
|
|
8379
8496
|
bind: "x",
|
|
8380
|
-
startIcon: /* @__PURE__ */
|
|
8497
|
+
startIcon: /* @__PURE__ */ React109.createElement(ArrowRightIcon2, { fontSize: "tiny" })
|
|
8381
8498
|
},
|
|
8382
8499
|
{
|
|
8383
|
-
label:
|
|
8500
|
+
label: __53("Scale Y", "elementor"),
|
|
8384
8501
|
bind: "y",
|
|
8385
|
-
startIcon: /* @__PURE__ */
|
|
8502
|
+
startIcon: /* @__PURE__ */ React109.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
|
|
8386
8503
|
},
|
|
8387
8504
|
{
|
|
8388
|
-
label:
|
|
8505
|
+
label: __53("Scale Z", "elementor"),
|
|
8389
8506
|
bind: "z",
|
|
8390
|
-
startIcon: /* @__PURE__ */
|
|
8507
|
+
startIcon: /* @__PURE__ */ React109.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
|
|
8391
8508
|
}
|
|
8392
8509
|
];
|
|
8393
8510
|
var Scale = () => {
|
|
8394
8511
|
const context = useBoundProp(scaleTransformPropTypeUtil2);
|
|
8395
|
-
const rowRefs = [
|
|
8396
|
-
return /* @__PURE__ */
|
|
8512
|
+
const rowRefs = [useRef25(null), useRef25(null), useRef25(null)];
|
|
8513
|
+
return /* @__PURE__ */ React109.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React109.createElement(PropProvider, { ...context }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React109.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
|
|
8397
8514
|
};
|
|
8398
8515
|
|
|
8399
8516
|
// src/controls/transform-control/functions/skew.tsx
|
|
8400
|
-
import * as
|
|
8401
|
-
import { useRef as
|
|
8517
|
+
import * as React110 from "react";
|
|
8518
|
+
import { useRef as useRef26 } from "react";
|
|
8402
8519
|
import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
|
|
8403
8520
|
import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
|
|
8404
8521
|
import { Grid as Grid26 } from "@elementor/ui";
|
|
8405
|
-
import { __ as
|
|
8522
|
+
import { __ as __54 } from "@wordpress/i18n";
|
|
8406
8523
|
var skewAxisControls = [
|
|
8407
8524
|
{
|
|
8408
|
-
label:
|
|
8525
|
+
label: __54("Skew X", "elementor"),
|
|
8409
8526
|
bind: "x",
|
|
8410
|
-
startIcon: /* @__PURE__ */
|
|
8527
|
+
startIcon: /* @__PURE__ */ React110.createElement(ArrowRightIcon3, { fontSize: "tiny" })
|
|
8411
8528
|
},
|
|
8412
8529
|
{
|
|
8413
|
-
label:
|
|
8530
|
+
label: __54("Skew Y", "elementor"),
|
|
8414
8531
|
bind: "y",
|
|
8415
|
-
startIcon: /* @__PURE__ */
|
|
8532
|
+
startIcon: /* @__PURE__ */ React110.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
8416
8533
|
}
|
|
8417
8534
|
];
|
|
8418
8535
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
8419
8536
|
var Skew = () => {
|
|
8420
8537
|
const context = useBoundProp(skewTransformPropTypeUtil2);
|
|
8421
|
-
const rowRefs = [
|
|
8422
|
-
return /* @__PURE__ */
|
|
8538
|
+
const rowRefs = [useRef26(null), useRef26(null), useRef26(null)];
|
|
8539
|
+
return /* @__PURE__ */ React110.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React110.createElement(
|
|
8423
8540
|
AxisRow,
|
|
8424
8541
|
{
|
|
8425
8542
|
key: control.bind,
|
|
@@ -8431,7 +8548,7 @@ var Skew = () => {
|
|
|
8431
8548
|
};
|
|
8432
8549
|
|
|
8433
8550
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
8434
|
-
import { useRef as
|
|
8551
|
+
import { useRef as useRef27 } from "react";
|
|
8435
8552
|
import {
|
|
8436
8553
|
moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
|
|
8437
8554
|
rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
|
|
@@ -8463,7 +8580,7 @@ var useTransformTabsHistory = ({
|
|
|
8463
8580
|
}
|
|
8464
8581
|
};
|
|
8465
8582
|
const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
|
|
8466
|
-
const valuesHistory =
|
|
8583
|
+
const valuesHistory = useRef27({
|
|
8467
8584
|
move: initialMove,
|
|
8468
8585
|
scale: initialScale,
|
|
8469
8586
|
rotate: initialRotate,
|
|
@@ -8524,7 +8641,7 @@ var TransformContent = () => {
|
|
|
8524
8641
|
rotate: initialRotateValue.value,
|
|
8525
8642
|
skew: initialSkewValue.value
|
|
8526
8643
|
});
|
|
8527
|
-
return /* @__PURE__ */
|
|
8644
|
+
return /* @__PURE__ */ React111.createElement(PopoverContent, null, /* @__PURE__ */ React111.createElement(Box27, { sx: { width: "100%" } }, /* @__PURE__ */ React111.createElement(Box27, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React111.createElement(
|
|
8528
8645
|
Tabs2,
|
|
8529
8646
|
{
|
|
8530
8647
|
size: "small",
|
|
@@ -8535,37 +8652,37 @@ var TransformContent = () => {
|
|
|
8535
8652
|
}
|
|
8536
8653
|
},
|
|
8537
8654
|
...getTabsProps(),
|
|
8538
|
-
"aria-label":
|
|
8655
|
+
"aria-label": __55("Transform", "elementor")
|
|
8539
8656
|
},
|
|
8540
|
-
/* @__PURE__ */
|
|
8541
|
-
/* @__PURE__ */
|
|
8542
|
-
/* @__PURE__ */
|
|
8543
|
-
/* @__PURE__ */
|
|
8544
|
-
)), /* @__PURE__ */
|
|
8657
|
+
/* @__PURE__ */ React111.createElement(Tab2, { label: __55("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
8658
|
+
/* @__PURE__ */ React111.createElement(Tab2, { label: __55("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
8659
|
+
/* @__PURE__ */ React111.createElement(Tab2, { label: __55("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
8660
|
+
/* @__PURE__ */ React111.createElement(Tab2, { label: __55("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
8661
|
+
)), /* @__PURE__ */ React111.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React111.createElement(Move, null)), /* @__PURE__ */ React111.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React111.createElement(Scale, null)), /* @__PURE__ */ React111.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React111.createElement(Rotate, null)), /* @__PURE__ */ React111.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React111.createElement(Skew, null))));
|
|
8545
8662
|
};
|
|
8546
8663
|
|
|
8547
8664
|
// src/controls/transform-control/transform-icon.tsx
|
|
8548
|
-
import * as
|
|
8665
|
+
import * as React112 from "react";
|
|
8549
8666
|
import { ArrowAutofitHeightIcon, ArrowsMaximizeIcon as ArrowsMaximizeIcon2, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
|
|
8550
8667
|
var TransformIcon = ({ value }) => {
|
|
8551
8668
|
switch (value.$$type) {
|
|
8552
8669
|
case TransformFunctionKeys.move:
|
|
8553
|
-
return /* @__PURE__ */
|
|
8670
|
+
return /* @__PURE__ */ React112.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
|
|
8554
8671
|
case TransformFunctionKeys.scale:
|
|
8555
|
-
return /* @__PURE__ */
|
|
8672
|
+
return /* @__PURE__ */ React112.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
|
|
8556
8673
|
case TransformFunctionKeys.rotate:
|
|
8557
|
-
return /* @__PURE__ */
|
|
8674
|
+
return /* @__PURE__ */ React112.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
|
|
8558
8675
|
case TransformFunctionKeys.skew:
|
|
8559
|
-
return /* @__PURE__ */
|
|
8676
|
+
return /* @__PURE__ */ React112.createElement(SkewXIcon, { fontSize: "tiny" });
|
|
8560
8677
|
default:
|
|
8561
8678
|
return null;
|
|
8562
8679
|
}
|
|
8563
8680
|
};
|
|
8564
8681
|
|
|
8565
8682
|
// src/controls/transform-control/transform-label.tsx
|
|
8566
|
-
import * as
|
|
8567
|
-
import { Box as
|
|
8568
|
-
import { __ as
|
|
8683
|
+
import * as React113 from "react";
|
|
8684
|
+
import { Box as Box28 } from "@elementor/ui";
|
|
8685
|
+
import { __ as __56 } from "@wordpress/i18n";
|
|
8569
8686
|
var orderedAxis = ["x", "y", "z"];
|
|
8570
8687
|
var formatLabel = (value, functionType) => {
|
|
8571
8688
|
return orderedAxis.map((axisKey) => {
|
|
@@ -8583,98 +8700,98 @@ var TransformLabel = (props) => {
|
|
|
8583
8700
|
const { $$type, value } = props.value;
|
|
8584
8701
|
switch ($$type) {
|
|
8585
8702
|
case TransformFunctionKeys.move:
|
|
8586
|
-
return /* @__PURE__ */
|
|
8703
|
+
return /* @__PURE__ */ React113.createElement(Label2, { label: __56("Move", "elementor"), value: formatLabel(value, "move") });
|
|
8587
8704
|
case TransformFunctionKeys.scale:
|
|
8588
|
-
return /* @__PURE__ */
|
|
8705
|
+
return /* @__PURE__ */ React113.createElement(Label2, { label: __56("Scale", "elementor"), value: formatLabel(value, "scale") });
|
|
8589
8706
|
case TransformFunctionKeys.rotate:
|
|
8590
|
-
return /* @__PURE__ */
|
|
8707
|
+
return /* @__PURE__ */ React113.createElement(Label2, { label: __56("Rotate", "elementor"), value: formatLabel(value, "rotate") });
|
|
8591
8708
|
case TransformFunctionKeys.skew:
|
|
8592
|
-
return /* @__PURE__ */
|
|
8709
|
+
return /* @__PURE__ */ React113.createElement(Label2, { label: __56("Skew", "elementor"), value: formatLabel(value, "skew") });
|
|
8593
8710
|
default:
|
|
8594
8711
|
return "";
|
|
8595
8712
|
}
|
|
8596
8713
|
};
|
|
8597
8714
|
var Label2 = ({ label, value }) => {
|
|
8598
|
-
return /* @__PURE__ */
|
|
8715
|
+
return /* @__PURE__ */ React113.createElement(Box28, { component: "span" }, label, ": ", value);
|
|
8599
8716
|
};
|
|
8600
8717
|
|
|
8601
8718
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
8602
|
-
import * as
|
|
8719
|
+
import * as React116 from "react";
|
|
8603
8720
|
import { PopoverHeader as PopoverHeader5 } from "@elementor/editor-ui";
|
|
8604
8721
|
import { AdjustmentsIcon } from "@elementor/icons";
|
|
8605
|
-
import { bindPopover as bindPopover6, Box as
|
|
8606
|
-
import { __ as
|
|
8722
|
+
import { bindPopover as bindPopover6, Box as Box29, Divider as Divider6, Popover as Popover7 } from "@elementor/ui";
|
|
8723
|
+
import { __ as __59 } from "@wordpress/i18n";
|
|
8607
8724
|
|
|
8608
8725
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
8609
|
-
import * as
|
|
8610
|
-
import { useRef as
|
|
8726
|
+
import * as React114 from "react";
|
|
8727
|
+
import { useRef as useRef28 } from "react";
|
|
8611
8728
|
import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
|
|
8612
8729
|
import { Grid as Grid27, Stack as Stack19 } from "@elementor/ui";
|
|
8613
|
-
import { __ as
|
|
8730
|
+
import { __ as __57 } from "@wordpress/i18n";
|
|
8614
8731
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
8615
8732
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
8616
|
-
label:
|
|
8733
|
+
label: __57("Perspective", "elementor"),
|
|
8617
8734
|
bind: "perspective",
|
|
8618
8735
|
units: ["px", "em", "rem", "vw", "vh"]
|
|
8619
8736
|
};
|
|
8620
8737
|
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
8621
8738
|
{
|
|
8622
|
-
label:
|
|
8739
|
+
label: __57("Origin X", "elementor"),
|
|
8623
8740
|
bind: "x",
|
|
8624
8741
|
units: ORIGIN_UNITS
|
|
8625
8742
|
},
|
|
8626
8743
|
{
|
|
8627
|
-
label:
|
|
8744
|
+
label: __57("Origin Y", "elementor"),
|
|
8628
8745
|
bind: "y",
|
|
8629
8746
|
units: ORIGIN_UNITS
|
|
8630
8747
|
}
|
|
8631
8748
|
];
|
|
8632
8749
|
var ChildrenPerspectiveControl = () => {
|
|
8633
|
-
return /* @__PURE__ */
|
|
8750
|
+
return /* @__PURE__ */ React114.createElement(Stack19, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, __57("Children perspective", "elementor")), /* @__PURE__ */ React114.createElement(PerspectiveControl, null), /* @__PURE__ */ React114.createElement(PerspectiveOriginControl, null));
|
|
8634
8751
|
};
|
|
8635
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
8636
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
8752
|
+
var PerspectiveControl = () => /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React114.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
8753
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React114.createElement(PerspectiveOriginControlProvider, null));
|
|
8637
8754
|
var PerspectiveOriginControlProvider = () => {
|
|
8638
8755
|
const context = useBoundProp(perspectiveOriginPropTypeUtil);
|
|
8639
|
-
return /* @__PURE__ */
|
|
8756
|
+
return /* @__PURE__ */ React114.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React114.createElement(ControlFields, { control }))));
|
|
8640
8757
|
};
|
|
8641
8758
|
var ControlFields = ({ control }) => {
|
|
8642
|
-
const rowRef =
|
|
8643
|
-
return /* @__PURE__ */
|
|
8759
|
+
const rowRef = useRef28(null);
|
|
8760
|
+
return /* @__PURE__ */ React114.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React114.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React114.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
8644
8761
|
};
|
|
8645
8762
|
|
|
8646
8763
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
8647
|
-
import * as
|
|
8648
|
-
import { useRef as
|
|
8764
|
+
import * as React115 from "react";
|
|
8765
|
+
import { useRef as useRef29 } from "react";
|
|
8649
8766
|
import { transformOriginPropTypeUtil } from "@elementor/editor-props";
|
|
8650
8767
|
import { Grid as Grid28, Stack as Stack20 } from "@elementor/ui";
|
|
8651
|
-
import { __ as
|
|
8768
|
+
import { __ as __58 } from "@wordpress/i18n";
|
|
8652
8769
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
8653
8770
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
8654
8771
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
8655
8772
|
{
|
|
8656
|
-
label:
|
|
8773
|
+
label: __58("Origin X", "elementor"),
|
|
8657
8774
|
bind: "x",
|
|
8658
8775
|
units: TRANSFORM_ORIGIN_UNITS
|
|
8659
8776
|
},
|
|
8660
8777
|
{
|
|
8661
|
-
label:
|
|
8778
|
+
label: __58("Origin Y", "elementor"),
|
|
8662
8779
|
bind: "y",
|
|
8663
8780
|
units: TRANSFORM_ORIGIN_UNITS
|
|
8664
8781
|
},
|
|
8665
8782
|
{
|
|
8666
|
-
label:
|
|
8783
|
+
label: __58("Origin Z", "elementor"),
|
|
8667
8784
|
bind: "z",
|
|
8668
8785
|
units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
|
|
8669
8786
|
}
|
|
8670
8787
|
];
|
|
8671
8788
|
var TransformOriginControl = () => {
|
|
8672
|
-
return /* @__PURE__ */
|
|
8789
|
+
return /* @__PURE__ */ React115.createElement(Stack20, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, __58("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React115.createElement(ControlFields2, { control, key: control.bind })));
|
|
8673
8790
|
};
|
|
8674
8791
|
var ControlFields2 = ({ control }) => {
|
|
8675
8792
|
const context = useBoundProp(transformOriginPropTypeUtil);
|
|
8676
|
-
const rowRef =
|
|
8677
|
-
return /* @__PURE__ */
|
|
8793
|
+
const rowRef = useRef29(null);
|
|
8794
|
+
return /* @__PURE__ */ React115.createElement(PropProvider, { ...context }, /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React115.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React115.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React115.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
|
|
8678
8795
|
};
|
|
8679
8796
|
|
|
8680
8797
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
@@ -8688,7 +8805,7 @@ var TransformSettingsControl = ({
|
|
|
8688
8805
|
...popupState,
|
|
8689
8806
|
anchorEl: anchorRef.current ?? void 0
|
|
8690
8807
|
});
|
|
8691
|
-
return /* @__PURE__ */
|
|
8808
|
+
return /* @__PURE__ */ React116.createElement(
|
|
8692
8809
|
Popover7,
|
|
8693
8810
|
{
|
|
8694
8811
|
disablePortal: true,
|
|
@@ -8703,16 +8820,16 @@ var TransformSettingsControl = ({
|
|
|
8703
8820
|
},
|
|
8704
8821
|
...popupProps
|
|
8705
8822
|
},
|
|
8706
|
-
/* @__PURE__ */
|
|
8823
|
+
/* @__PURE__ */ React116.createElement(
|
|
8707
8824
|
PopoverHeader5,
|
|
8708
8825
|
{
|
|
8709
|
-
title:
|
|
8826
|
+
title: __59("Transform settings", "elementor"),
|
|
8710
8827
|
onClose: popupState.close,
|
|
8711
|
-
icon: /* @__PURE__ */
|
|
8828
|
+
icon: /* @__PURE__ */ React116.createElement(AdjustmentsIcon, { fontSize: SIZE10 })
|
|
8712
8829
|
}
|
|
8713
8830
|
),
|
|
8714
|
-
/* @__PURE__ */
|
|
8715
|
-
/* @__PURE__ */
|
|
8831
|
+
/* @__PURE__ */ React116.createElement(Divider6, null),
|
|
8832
|
+
/* @__PURE__ */ React116.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React116.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement(Box29, { sx: { my: 0.5 } }, /* @__PURE__ */ React116.createElement(Divider6, null)), /* @__PURE__ */ React116.createElement(ChildrenPerspectiveControl, null)))
|
|
8716
8833
|
);
|
|
8717
8834
|
};
|
|
8718
8835
|
|
|
@@ -8721,27 +8838,27 @@ var SIZE11 = "tiny";
|
|
|
8721
8838
|
var TransformRepeaterControl = createControl(
|
|
8722
8839
|
({ showChildrenPerspective }) => {
|
|
8723
8840
|
const context = useBoundProp(transformPropTypeUtil);
|
|
8724
|
-
const headerRef =
|
|
8841
|
+
const headerRef = useRef30(null);
|
|
8725
8842
|
const popupState = usePopupState10({ variant: "popover" });
|
|
8726
|
-
return /* @__PURE__ */
|
|
8843
|
+
return /* @__PURE__ */ React117.createElement(PropProvider, { ...context }, /* @__PURE__ */ React117.createElement(
|
|
8727
8844
|
TransformSettingsControl,
|
|
8728
8845
|
{
|
|
8729
8846
|
popupState,
|
|
8730
8847
|
anchorRef: headerRef,
|
|
8731
8848
|
showChildrenPerspective
|
|
8732
8849
|
}
|
|
8733
|
-
), /* @__PURE__ */
|
|
8850
|
+
), /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React117.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
8734
8851
|
}
|
|
8735
8852
|
);
|
|
8736
|
-
var ToolTip = /* @__PURE__ */
|
|
8737
|
-
|
|
8853
|
+
var ToolTip = /* @__PURE__ */ React117.createElement(
|
|
8854
|
+
Box30,
|
|
8738
8855
|
{
|
|
8739
8856
|
component: "span",
|
|
8740
8857
|
"aria-label": void 0,
|
|
8741
8858
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
8742
8859
|
},
|
|
8743
|
-
/* @__PURE__ */
|
|
8744
|
-
/* @__PURE__ */
|
|
8860
|
+
/* @__PURE__ */ React117.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
|
|
8861
|
+
/* @__PURE__ */ React117.createElement(Typography12, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __60("You can use each kind of transform only once per element.", "elementor"))
|
|
8745
8862
|
);
|
|
8746
8863
|
var Repeater2 = ({
|
|
8747
8864
|
headerRef,
|
|
@@ -8755,21 +8872,21 @@ var Repeater2 = ({
|
|
|
8755
8872
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
8756
8873
|
};
|
|
8757
8874
|
const shouldDisableAddItem = !getInitialValue2();
|
|
8758
|
-
return /* @__PURE__ */
|
|
8875
|
+
return /* @__PURE__ */ React117.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React117.createElement(
|
|
8759
8876
|
ControlRepeater,
|
|
8760
8877
|
{
|
|
8761
8878
|
initial: getInitialValue2() ?? initialTransformValue,
|
|
8762
8879
|
propTypeUtil: transformFunctionsPropTypeUtil
|
|
8763
8880
|
},
|
|
8764
|
-
/* @__PURE__ */
|
|
8881
|
+
/* @__PURE__ */ React117.createElement(
|
|
8765
8882
|
RepeaterHeader,
|
|
8766
8883
|
{
|
|
8767
|
-
label:
|
|
8768
|
-
adornment: () => /* @__PURE__ */
|
|
8884
|
+
label: __60("Transform", "elementor"),
|
|
8885
|
+
adornment: () => /* @__PURE__ */ React117.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
8769
8886
|
ref: headerRef
|
|
8770
8887
|
},
|
|
8771
|
-
/* @__PURE__ */
|
|
8772
|
-
/* @__PURE__ */
|
|
8888
|
+
/* @__PURE__ */ React117.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
8889
|
+
/* @__PURE__ */ React117.createElement(
|
|
8773
8890
|
TooltipAddItemAction,
|
|
8774
8891
|
{
|
|
8775
8892
|
disabled: shouldDisableAddItem,
|
|
@@ -8779,15 +8896,15 @@ var Repeater2 = ({
|
|
|
8779
8896
|
}
|
|
8780
8897
|
)
|
|
8781
8898
|
),
|
|
8782
|
-
/* @__PURE__ */
|
|
8899
|
+
/* @__PURE__ */ React117.createElement(ItemsContainer, null, /* @__PURE__ */ React117.createElement(
|
|
8783
8900
|
Item,
|
|
8784
8901
|
{
|
|
8785
8902
|
Icon: TransformIcon,
|
|
8786
8903
|
Label: TransformLabel,
|
|
8787
|
-
actions: /* @__PURE__ */
|
|
8904
|
+
actions: /* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement(DisableItemAction, null), /* @__PURE__ */ React117.createElement(RemoveItemAction, null))
|
|
8788
8905
|
}
|
|
8789
8906
|
)),
|
|
8790
|
-
/* @__PURE__ */
|
|
8907
|
+
/* @__PURE__ */ React117.createElement(EditItemPopover, null, /* @__PURE__ */ React117.createElement(TransformContent, null))
|
|
8791
8908
|
));
|
|
8792
8909
|
};
|
|
8793
8910
|
var TransformBasePopoverTrigger = ({
|
|
@@ -8795,31 +8912,31 @@ var TransformBasePopoverTrigger = ({
|
|
|
8795
8912
|
repeaterBindKey
|
|
8796
8913
|
}) => {
|
|
8797
8914
|
const { bind } = useBoundProp();
|
|
8798
|
-
const titleLabel =
|
|
8799
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
8915
|
+
const titleLabel = __60("Transform settings", "elementor");
|
|
8916
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React117.createElement(Tooltip12, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React117.createElement(IconButton10, { size: SIZE11, "aria-label": titleLabel, ...bindTrigger5(popupState) }, /* @__PURE__ */ React117.createElement(AdjustmentsIcon2, { fontSize: SIZE11 })));
|
|
8800
8917
|
};
|
|
8801
8918
|
|
|
8802
8919
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
8803
|
-
import * as
|
|
8804
|
-
import { useEffect as useEffect18, useMemo as useMemo17, useState as
|
|
8920
|
+
import * as React120 from "react";
|
|
8921
|
+
import { useEffect as useEffect18, useMemo as useMemo17, useState as useState25 } from "react";
|
|
8805
8922
|
import {
|
|
8806
8923
|
createArrayPropUtils as createArrayPropUtils3,
|
|
8807
8924
|
selectionSizePropTypeUtil as selectionSizePropTypeUtil2
|
|
8808
8925
|
} from "@elementor/editor-props";
|
|
8809
8926
|
import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
|
|
8810
|
-
import { Alert as Alert3, AlertTitle as AlertTitle4, Box as
|
|
8927
|
+
import { Alert as Alert3, AlertTitle as AlertTitle4, Box as Box32, Typography as Typography13 } from "@elementor/ui";
|
|
8811
8928
|
import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
|
|
8812
|
-
import { __ as
|
|
8929
|
+
import { __ as __63 } from "@wordpress/i18n";
|
|
8813
8930
|
|
|
8814
8931
|
// src/controls/selection-size-control.tsx
|
|
8815
|
-
import * as
|
|
8816
|
-
import { useMemo as useMemo15, useRef as
|
|
8932
|
+
import * as React118 from "react";
|
|
8933
|
+
import { useMemo as useMemo15, useRef as useRef31 } from "react";
|
|
8817
8934
|
import { selectionSizePropTypeUtil } from "@elementor/editor-props";
|
|
8818
8935
|
import { Grid as Grid29 } from "@elementor/ui";
|
|
8819
8936
|
var SelectionSizeControl = createControl(
|
|
8820
8937
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
8821
8938
|
const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
|
|
8822
|
-
const rowRef =
|
|
8939
|
+
const rowRef = useRef31(null);
|
|
8823
8940
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
8824
8941
|
const currentSizeConfig = useMemo15(() => {
|
|
8825
8942
|
switch (value.selection.$$type) {
|
|
@@ -8832,7 +8949,7 @@ var SelectionSizeControl = createControl(
|
|
|
8832
8949
|
}
|
|
8833
8950
|
}, [value, sizeConfigMap]);
|
|
8834
8951
|
const SelectionComponent = selectionConfig.component;
|
|
8835
|
-
return /* @__PURE__ */
|
|
8952
|
+
return /* @__PURE__ */ React118.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React118.createElement(Grid29, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React118.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React118.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React118.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React118.createElement(React118.Fragment, null, /* @__PURE__ */ React118.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React118.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React118.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React118.createElement(
|
|
8836
8953
|
SizeControl,
|
|
8837
8954
|
{
|
|
8838
8955
|
anchorRef: rowRef,
|
|
@@ -8847,12 +8964,12 @@ var SelectionSizeControl = createControl(
|
|
|
8847
8964
|
|
|
8848
8965
|
// src/controls/transition-control/data.ts
|
|
8849
8966
|
import { hasProInstalled, isVersionGreaterOrEqual } from "@elementor/utils";
|
|
8850
|
-
import { __ as
|
|
8967
|
+
import { __ as __61 } from "@wordpress/i18n";
|
|
8851
8968
|
var initialTransitionValue = {
|
|
8852
8969
|
selection: {
|
|
8853
8970
|
$$type: "key-value",
|
|
8854
8971
|
value: {
|
|
8855
|
-
key: { value:
|
|
8972
|
+
key: { value: __61("All properties", "elementor"), $$type: "string" },
|
|
8856
8973
|
value: { value: "all", $$type: "string" }
|
|
8857
8974
|
}
|
|
8858
8975
|
},
|
|
@@ -8876,128 +8993,128 @@ var createTransitionPropertiesList = () => {
|
|
|
8876
8993
|
const isSiteRtl = getIsSiteRtl();
|
|
8877
8994
|
const baseProperties = [
|
|
8878
8995
|
{
|
|
8879
|
-
label:
|
|
8996
|
+
label: __61("Default", "elementor"),
|
|
8880
8997
|
type: "category",
|
|
8881
|
-
properties: [{ label:
|
|
8998
|
+
properties: [{ label: __61("All properties", "elementor"), value: "all" }]
|
|
8882
8999
|
},
|
|
8883
9000
|
{
|
|
8884
|
-
label:
|
|
9001
|
+
label: __61("Margin", "elementor"),
|
|
8885
9002
|
type: "category",
|
|
8886
9003
|
properties: [
|
|
8887
|
-
{ label:
|
|
8888
|
-
{ label:
|
|
9004
|
+
{ label: __61("Margin (all)", "elementor"), value: "margin", isDisabled: true },
|
|
9005
|
+
{ label: __61("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
|
|
8889
9006
|
{
|
|
8890
|
-
label: isSiteRtl ?
|
|
9007
|
+
label: isSiteRtl ? __61("Margin right", "elementor") : __61("Margin left", "elementor"),
|
|
8891
9008
|
value: "margin-inline-start",
|
|
8892
9009
|
isDisabled: true
|
|
8893
9010
|
},
|
|
8894
9011
|
{
|
|
8895
|
-
label: isSiteRtl ?
|
|
9012
|
+
label: isSiteRtl ? __61("Margin left", "elementor") : __61("Margin right", "elementor"),
|
|
8896
9013
|
value: "margin-inline-end",
|
|
8897
9014
|
isDisabled: true
|
|
8898
9015
|
},
|
|
8899
|
-
{ label:
|
|
9016
|
+
{ label: __61("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
|
|
8900
9017
|
]
|
|
8901
9018
|
},
|
|
8902
9019
|
{
|
|
8903
|
-
label:
|
|
9020
|
+
label: __61("Padding", "elementor"),
|
|
8904
9021
|
type: "category",
|
|
8905
9022
|
properties: [
|
|
8906
|
-
{ label:
|
|
8907
|
-
{ label:
|
|
9023
|
+
{ label: __61("Padding (all)", "elementor"), value: "padding", isDisabled: true },
|
|
9024
|
+
{ label: __61("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
|
|
8908
9025
|
{
|
|
8909
|
-
label: isSiteRtl ?
|
|
9026
|
+
label: isSiteRtl ? __61("Padding right", "elementor") : __61("Padding left", "elementor"),
|
|
8910
9027
|
value: "padding-inline-start",
|
|
8911
9028
|
isDisabled: true
|
|
8912
9029
|
},
|
|
8913
9030
|
{
|
|
8914
|
-
label: isSiteRtl ?
|
|
9031
|
+
label: isSiteRtl ? __61("Padding left", "elementor") : __61("Padding right", "elementor"),
|
|
8915
9032
|
value: "padding-inline-end",
|
|
8916
9033
|
isDisabled: true
|
|
8917
9034
|
},
|
|
8918
|
-
{ label:
|
|
9035
|
+
{ label: __61("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
|
|
8919
9036
|
]
|
|
8920
9037
|
},
|
|
8921
9038
|
{
|
|
8922
|
-
label:
|
|
9039
|
+
label: __61("Flex", "elementor"),
|
|
8923
9040
|
type: "category",
|
|
8924
9041
|
properties: [
|
|
8925
|
-
{ label:
|
|
8926
|
-
{ label:
|
|
8927
|
-
{ label:
|
|
8928
|
-
{ label:
|
|
9042
|
+
{ label: __61("Flex (all)", "elementor"), value: "flex", isDisabled: true },
|
|
9043
|
+
{ label: __61("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
|
|
9044
|
+
{ label: __61("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
|
|
9045
|
+
{ label: __61("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
|
|
8929
9046
|
]
|
|
8930
9047
|
},
|
|
8931
9048
|
{
|
|
8932
|
-
label:
|
|
9049
|
+
label: __61("Size", "elementor"),
|
|
8933
9050
|
type: "category",
|
|
8934
9051
|
properties: [
|
|
8935
|
-
{ label:
|
|
8936
|
-
{ label:
|
|
8937
|
-
{ label:
|
|
8938
|
-
{ label:
|
|
8939
|
-
{ label:
|
|
8940
|
-
{ label:
|
|
9052
|
+
{ label: __61("Width", "elementor"), value: "width", isDisabled: true },
|
|
9053
|
+
{ label: __61("Height", "elementor"), value: "height", isDisabled: true },
|
|
9054
|
+
{ label: __61("Max height", "elementor"), value: "max-height", isDisabled: true },
|
|
9055
|
+
{ label: __61("Max width", "elementor"), value: "max-width", isDisabled: true },
|
|
9056
|
+
{ label: __61("Min height", "elementor"), value: "min-height", isDisabled: true },
|
|
9057
|
+
{ label: __61("Min width", "elementor"), value: "min-width", isDisabled: true }
|
|
8941
9058
|
]
|
|
8942
9059
|
},
|
|
8943
9060
|
{
|
|
8944
|
-
label:
|
|
9061
|
+
label: __61("Position", "elementor"),
|
|
8945
9062
|
type: "category",
|
|
8946
9063
|
properties: [
|
|
8947
|
-
{ label:
|
|
9064
|
+
{ label: __61("Top", "elementor"), value: "inset-block-start", isDisabled: true },
|
|
8948
9065
|
{
|
|
8949
|
-
label: isSiteRtl ?
|
|
9066
|
+
label: isSiteRtl ? __61("Right", "elementor") : __61("Left", "elementor"),
|
|
8950
9067
|
value: "inset-inline-start",
|
|
8951
9068
|
isDisabled: true
|
|
8952
9069
|
},
|
|
8953
9070
|
{
|
|
8954
|
-
label: isSiteRtl ?
|
|
9071
|
+
label: isSiteRtl ? __61("Left", "elementor") : __61("Right", "elementor"),
|
|
8955
9072
|
value: "inset-inline-end",
|
|
8956
9073
|
isDisabled: true
|
|
8957
9074
|
},
|
|
8958
|
-
{ label:
|
|
8959
|
-
{ label:
|
|
9075
|
+
{ label: __61("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
|
|
9076
|
+
{ label: __61("Z-index", "elementor"), value: "z-index", isDisabled: true }
|
|
8960
9077
|
]
|
|
8961
9078
|
},
|
|
8962
9079
|
{
|
|
8963
|
-
label:
|
|
9080
|
+
label: __61("Typography", "elementor"),
|
|
8964
9081
|
type: "category",
|
|
8965
9082
|
properties: [
|
|
8966
|
-
{ label:
|
|
8967
|
-
{ label:
|
|
8968
|
-
{ label:
|
|
8969
|
-
{ label:
|
|
8970
|
-
{ label:
|
|
8971
|
-
{ label:
|
|
8972
|
-
{ label:
|
|
9083
|
+
{ label: __61("Font color", "elementor"), value: "color", isDisabled: true },
|
|
9084
|
+
{ label: __61("Font size", "elementor"), value: "font-size", isDisabled: true },
|
|
9085
|
+
{ label: __61("Line height", "elementor"), value: "line-height", isDisabled: true },
|
|
9086
|
+
{ label: __61("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
|
|
9087
|
+
{ label: __61("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
|
|
9088
|
+
{ label: __61("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
|
|
9089
|
+
{ label: __61("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
|
|
8973
9090
|
]
|
|
8974
9091
|
},
|
|
8975
9092
|
{
|
|
8976
|
-
label:
|
|
9093
|
+
label: __61("Background", "elementor"),
|
|
8977
9094
|
type: "category",
|
|
8978
9095
|
properties: [
|
|
8979
|
-
{ label:
|
|
8980
|
-
{ label:
|
|
8981
|
-
{ label:
|
|
9096
|
+
{ label: __61("Background color", "elementor"), value: "background-color", isDisabled: true },
|
|
9097
|
+
{ label: __61("Background position", "elementor"), value: "background-position", isDisabled: true },
|
|
9098
|
+
{ label: __61("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
|
|
8982
9099
|
]
|
|
8983
9100
|
},
|
|
8984
9101
|
{
|
|
8985
|
-
label:
|
|
9102
|
+
label: __61("Border", "elementor"),
|
|
8986
9103
|
type: "category",
|
|
8987
9104
|
properties: [
|
|
8988
|
-
{ label:
|
|
8989
|
-
{ label:
|
|
8990
|
-
{ label:
|
|
8991
|
-
{ label:
|
|
9105
|
+
{ label: __61("Border (all)", "elementor"), value: "border", isDisabled: true },
|
|
9106
|
+
{ label: __61("Border radius", "elementor"), value: "border-radius", isDisabled: true },
|
|
9107
|
+
{ label: __61("Border color", "elementor"), value: "border-color", isDisabled: true },
|
|
9108
|
+
{ label: __61("Border width", "elementor"), value: "border-width", isDisabled: true }
|
|
8992
9109
|
]
|
|
8993
9110
|
},
|
|
8994
9111
|
{
|
|
8995
|
-
label:
|
|
9112
|
+
label: __61("Effects", "elementor"),
|
|
8996
9113
|
type: "category",
|
|
8997
9114
|
properties: [
|
|
8998
|
-
{ label:
|
|
8999
|
-
{ label:
|
|
9000
|
-
{ label:
|
|
9115
|
+
{ label: __61("Opacity", "elementor"), value: "opacity", isDisabled: true },
|
|
9116
|
+
{ label: __61("Transform (all)", "elementor"), value: "transform", isDisabled: true },
|
|
9117
|
+
{ label: __61("Filter (all)", "elementor"), value: "filter", isDisabled: true }
|
|
9001
9118
|
]
|
|
9002
9119
|
}
|
|
9003
9120
|
];
|
|
@@ -9010,7 +9127,7 @@ var transitionsItemsList = transitionProperties.map((category) => ({
|
|
|
9010
9127
|
}));
|
|
9011
9128
|
|
|
9012
9129
|
// src/controls/transition-control/trainsition-events.ts
|
|
9013
|
-
import { getSelectedElements } from "@elementor/editor-elements";
|
|
9130
|
+
import { getSelectedElements as getSelectedElements2 } from "@elementor/editor-elements";
|
|
9014
9131
|
import { trackEvent } from "@elementor/events";
|
|
9015
9132
|
var transitionRepeaterMixpanelEvent = {
|
|
9016
9133
|
eventName: "click_added_transition",
|
|
@@ -9022,7 +9139,7 @@ function subscribeToTransitionEvent() {
|
|
|
9022
9139
|
eventBus.subscribe("transition-item-added", (data) => {
|
|
9023
9140
|
const payload = data;
|
|
9024
9141
|
const value = payload?.itemValue?.selection?.value?.value?.value;
|
|
9025
|
-
const selectedElements =
|
|
9142
|
+
const selectedElements = getSelectedElements2();
|
|
9026
9143
|
const widgetType = selectedElements[0]?.type ?? null;
|
|
9027
9144
|
trackEvent({
|
|
9028
9145
|
transition_type: value ?? "unknown",
|
|
@@ -9033,53 +9150,13 @@ function subscribeToTransitionEvent() {
|
|
|
9033
9150
|
}
|
|
9034
9151
|
|
|
9035
9152
|
// src/controls/transition-control/transition-selector.tsx
|
|
9036
|
-
import * as
|
|
9037
|
-
import { useMemo as useMemo16, useRef as
|
|
9153
|
+
import * as React119 from "react";
|
|
9154
|
+
import { useMemo as useMemo16, useRef as useRef32 } from "react";
|
|
9038
9155
|
import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
|
|
9039
9156
|
import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
|
|
9040
9157
|
import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
|
|
9041
|
-
import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as
|
|
9042
|
-
import { __ as
|
|
9043
|
-
|
|
9044
|
-
// src/utils/tracking.ts
|
|
9045
|
-
import { getSelectedElements as getSelectedElements2 } from "@elementor/editor-elements";
|
|
9046
|
-
import { getMixpanel } from "@elementor/events";
|
|
9047
|
-
var getBaseEventProperties = (data, config) => ({
|
|
9048
|
-
window_name: config?.appTypes?.editor ?? "editor",
|
|
9049
|
-
interaction_type: config?.triggers?.click ?? "Click",
|
|
9050
|
-
target_name: data.target_name,
|
|
9051
|
-
target_location: data.target_location ?? "widget_panel",
|
|
9052
|
-
location_l1: data.location_l1 ?? getSelectedElements2()[0]?.type ?? "",
|
|
9053
|
-
...data.location_l2 && { location_l2: data.location_l2 }
|
|
9054
|
-
});
|
|
9055
|
-
var dispatchPromotionEvent = (data, resolveOptions) => {
|
|
9056
|
-
const { dispatchEvent, config } = getMixpanel();
|
|
9057
|
-
const { eventName, interactionResult, interactionDescription } = resolveOptions(config);
|
|
9058
|
-
if (!eventName) {
|
|
9059
|
-
return;
|
|
9060
|
-
}
|
|
9061
|
-
dispatchEvent?.(eventName, {
|
|
9062
|
-
...getBaseEventProperties(data, config),
|
|
9063
|
-
interaction_result: interactionResult,
|
|
9064
|
-
interaction_description: interactionDescription
|
|
9065
|
-
});
|
|
9066
|
-
};
|
|
9067
|
-
var trackViewPromotion = (data) => {
|
|
9068
|
-
dispatchPromotionEvent(data, (config) => ({
|
|
9069
|
-
eventName: config?.names?.promotions?.viewPromotion,
|
|
9070
|
-
interactionResult: config?.interactionResults?.promotionViewed ?? "promotion_viewed",
|
|
9071
|
-
interactionDescription: "user_viewed_promotion"
|
|
9072
|
-
}));
|
|
9073
|
-
};
|
|
9074
|
-
var trackUpgradePromotionClick = (data) => {
|
|
9075
|
-
dispatchPromotionEvent(data, (config) => ({
|
|
9076
|
-
eventName: config?.names?.promotions?.upgradePromotionClick,
|
|
9077
|
-
interactionResult: config?.interactionResults?.upgradeNow ?? "upgrade_now",
|
|
9078
|
-
interactionDescription: "user_clicked_upgrade_now"
|
|
9079
|
-
}));
|
|
9080
|
-
};
|
|
9081
|
-
|
|
9082
|
-
// src/controls/transition-control/transition-selector.tsx
|
|
9158
|
+
import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box31, Popover as Popover8, UnstableTag as UnstableTag3, usePopupState as usePopupState11 } from "@elementor/ui";
|
|
9159
|
+
import { __ as __62 } from "@wordpress/i18n";
|
|
9083
9160
|
var toTransitionSelectorValue = (label) => {
|
|
9084
9161
|
for (const category of transitionProperties) {
|
|
9085
9162
|
const property = category.properties.find((prop) => prop.label === label);
|
|
@@ -9120,7 +9197,7 @@ var TransitionSelector = ({
|
|
|
9120
9197
|
const {
|
|
9121
9198
|
key: { value: transitionLabel }
|
|
9122
9199
|
} = value;
|
|
9123
|
-
const defaultRef =
|
|
9200
|
+
const defaultRef = useRef32(null);
|
|
9124
9201
|
const popoverState = usePopupState11({ variant: "popover" });
|
|
9125
9202
|
const disabledCategories = useMemo16(() => {
|
|
9126
9203
|
return new Set(
|
|
@@ -9142,7 +9219,7 @@ var TransitionSelector = ({
|
|
|
9142
9219
|
return [
|
|
9143
9220
|
first,
|
|
9144
9221
|
{
|
|
9145
|
-
label:
|
|
9222
|
+
label: __62("Recently Used", "elementor"),
|
|
9146
9223
|
items: recentItems
|
|
9147
9224
|
},
|
|
9148
9225
|
...rest
|
|
@@ -9166,16 +9243,16 @@ var TransitionSelector = ({
|
|
|
9166
9243
|
left: rect.right + 36
|
|
9167
9244
|
};
|
|
9168
9245
|
};
|
|
9169
|
-
return /* @__PURE__ */
|
|
9246
|
+
return /* @__PURE__ */ React119.createElement(Box31, { ref: defaultRef }, /* @__PURE__ */ React119.createElement(ControlActions, null, /* @__PURE__ */ React119.createElement(
|
|
9170
9247
|
UnstableTag3,
|
|
9171
9248
|
{
|
|
9172
9249
|
variant: "outlined",
|
|
9173
9250
|
label: transitionLabel,
|
|
9174
|
-
endIcon: /* @__PURE__ */
|
|
9251
|
+
endIcon: /* @__PURE__ */ React119.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
|
|
9175
9252
|
...bindTrigger6(popoverState),
|
|
9176
9253
|
fullWidth: true
|
|
9177
9254
|
}
|
|
9178
|
-
)), /* @__PURE__ */
|
|
9255
|
+
)), /* @__PURE__ */ React119.createElement(
|
|
9179
9256
|
Popover8,
|
|
9180
9257
|
{
|
|
9181
9258
|
disablePortal: true,
|
|
@@ -9186,7 +9263,7 @@ var TransitionSelector = ({
|
|
|
9186
9263
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
9187
9264
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
9188
9265
|
},
|
|
9189
|
-
/* @__PURE__ */
|
|
9266
|
+
/* @__PURE__ */ React119.createElement(
|
|
9190
9267
|
ItemSelector,
|
|
9191
9268
|
{
|
|
9192
9269
|
itemsList: getItemList(),
|
|
@@ -9194,11 +9271,11 @@ var TransitionSelector = ({
|
|
|
9194
9271
|
onItemChange: handleTransitionPropertyChange,
|
|
9195
9272
|
onClose: popoverState.close,
|
|
9196
9273
|
sectionWidth: 268,
|
|
9197
|
-
title:
|
|
9274
|
+
title: __62("Transition Property", "elementor"),
|
|
9198
9275
|
icon: VariationsIcon,
|
|
9199
9276
|
disabledItems: includeCurrentValueInOptions(value, disabledItems),
|
|
9200
|
-
categoryItemContentTemplate: (item) => /* @__PURE__ */
|
|
9201
|
-
|
|
9277
|
+
categoryItemContentTemplate: (item) => /* @__PURE__ */ React119.createElement(
|
|
9278
|
+
Box31,
|
|
9202
9279
|
{
|
|
9203
9280
|
sx: {
|
|
9204
9281
|
display: "flex",
|
|
@@ -9207,13 +9284,13 @@ var TransitionSelector = ({
|
|
|
9207
9284
|
width: "100%"
|
|
9208
9285
|
}
|
|
9209
9286
|
},
|
|
9210
|
-
/* @__PURE__ */
|
|
9211
|
-
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */
|
|
9287
|
+
/* @__PURE__ */ React119.createElement("span", null, item.value),
|
|
9288
|
+
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React119.createElement(PromotionChip, null)
|
|
9212
9289
|
),
|
|
9213
|
-
footer: showPromotion ? /* @__PURE__ */
|
|
9290
|
+
footer: showPromotion ? /* @__PURE__ */ React119.createElement(
|
|
9214
9291
|
PromotionAlert,
|
|
9215
9292
|
{
|
|
9216
|
-
message:
|
|
9293
|
+
message: __62(
|
|
9217
9294
|
"Upgrade to customize transition properties and control effects.",
|
|
9218
9295
|
"elementor"
|
|
9219
9296
|
),
|
|
@@ -9252,8 +9329,8 @@ var areAllPropertiesUsed = (value = []) => {
|
|
|
9252
9329
|
};
|
|
9253
9330
|
var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
9254
9331
|
return {
|
|
9255
|
-
selectionLabel:
|
|
9256
|
-
sizeLabel:
|
|
9332
|
+
selectionLabel: __63("Type", "elementor"),
|
|
9333
|
+
sizeLabel: __63("Duration", "elementor"),
|
|
9257
9334
|
selectionConfig: {
|
|
9258
9335
|
component: TransitionSelector,
|
|
9259
9336
|
props: {
|
|
@@ -9329,7 +9406,7 @@ var getInitialValue = (values = []) => {
|
|
|
9329
9406
|
}
|
|
9330
9407
|
return initialTransitionValue;
|
|
9331
9408
|
};
|
|
9332
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
9409
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React120.createElement(
|
|
9333
9410
|
Alert3,
|
|
9334
9411
|
{
|
|
9335
9412
|
sx: {
|
|
@@ -9337,10 +9414,10 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React119.createElement(
|
|
|
9337
9414
|
gap: 0.5
|
|
9338
9415
|
},
|
|
9339
9416
|
color: "secondary",
|
|
9340
|
-
icon: /* @__PURE__ */
|
|
9417
|
+
icon: /* @__PURE__ */ React120.createElement(InfoCircleFilledIcon3, null)
|
|
9341
9418
|
},
|
|
9342
|
-
/* @__PURE__ */
|
|
9343
|
-
/* @__PURE__ */
|
|
9419
|
+
/* @__PURE__ */ React120.createElement(AlertTitle4, null, __63("Transitions", "elementor")),
|
|
9420
|
+
/* @__PURE__ */ React120.createElement(Box32, { component: "span" }, /* @__PURE__ */ React120.createElement(Typography13, { variant: "body2" }, __63("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
9344
9421
|
);
|
|
9345
9422
|
var TransitionRepeaterControl = createControl(
|
|
9346
9423
|
({
|
|
@@ -9348,7 +9425,7 @@ var TransitionRepeaterControl = createControl(
|
|
|
9348
9425
|
currentStyleState
|
|
9349
9426
|
}) => {
|
|
9350
9427
|
const currentStyleIsNormal = currentStyleState === null;
|
|
9351
|
-
const [recentlyUsedList, setRecentlyUsedList] =
|
|
9428
|
+
const [recentlyUsedList, setRecentlyUsedList] = useState25([]);
|
|
9352
9429
|
const proInstalled = hasProInstalled2();
|
|
9353
9430
|
const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
9354
9431
|
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo17(
|
|
@@ -9383,13 +9460,13 @@ var TransitionRepeaterControl = createControl(
|
|
|
9383
9460
|
}, [recentlyUsedListGetter]);
|
|
9384
9461
|
const allPropertiesUsed = useMemo17(() => areAllPropertiesUsed(value), [value]);
|
|
9385
9462
|
const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
|
|
9386
|
-
return /* @__PURE__ */
|
|
9463
|
+
return /* @__PURE__ */ React120.createElement(
|
|
9387
9464
|
RepeatableControl,
|
|
9388
9465
|
{
|
|
9389
|
-
label:
|
|
9390
|
-
repeaterLabel:
|
|
9466
|
+
label: __63("Transitions", "elementor"),
|
|
9467
|
+
repeaterLabel: __63("Transitions", "elementor"),
|
|
9391
9468
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
9392
|
-
placeholder:
|
|
9469
|
+
placeholder: __63("Empty Transition", "elementor"),
|
|
9393
9470
|
showDuplicate: false,
|
|
9394
9471
|
showToggle: true,
|
|
9395
9472
|
initialValues: getInitialValue(value),
|
|
@@ -9410,11 +9487,11 @@ var TransitionRepeaterControl = createControl(
|
|
|
9410
9487
|
);
|
|
9411
9488
|
|
|
9412
9489
|
// src/controls/date-time-control.tsx
|
|
9413
|
-
import * as
|
|
9490
|
+
import * as React121 from "react";
|
|
9414
9491
|
import * as dayjs from "dayjs";
|
|
9415
9492
|
import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
|
|
9416
9493
|
import { DateTimePropTypeUtil } from "@elementor/editor-props";
|
|
9417
|
-
import { Box as
|
|
9494
|
+
import { Box as Box33, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
|
|
9418
9495
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
9419
9496
|
var TIME_FORMAT = "HH:mm";
|
|
9420
9497
|
var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
@@ -9458,7 +9535,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9458
9535
|
const base = dayjs.default();
|
|
9459
9536
|
return base.hour(h).minute(m).second(0).millisecond(0);
|
|
9460
9537
|
};
|
|
9461
|
-
return /* @__PURE__ */
|
|
9538
|
+
return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(ControlActions, null, /* @__PURE__ */ React121.createElement(LocalizationProvider, null, /* @__PURE__ */ React121.createElement(Box33, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React121.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React121.createElement(
|
|
9462
9539
|
DatePicker,
|
|
9463
9540
|
{
|
|
9464
9541
|
value: parseDateValue(stringPropTypeUtil20.extract(value?.date)),
|
|
@@ -9470,7 +9547,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9470
9547
|
openPickerIcon: { fontSize: "tiny" }
|
|
9471
9548
|
}
|
|
9472
9549
|
}
|
|
9473
|
-
)), /* @__PURE__ */
|
|
9550
|
+
)), /* @__PURE__ */ React121.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React121.createElement(
|
|
9474
9551
|
TimePicker,
|
|
9475
9552
|
{
|
|
9476
9553
|
value: parseTimeValue(stringPropTypeUtil20.extract(value?.time)),
|
|
@@ -9486,13 +9563,13 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9486
9563
|
});
|
|
9487
9564
|
|
|
9488
9565
|
// src/controls/date-range-control.tsx
|
|
9489
|
-
import * as
|
|
9566
|
+
import * as React123 from "react";
|
|
9490
9567
|
import { dateRangePropTypeUtil, dateStringPropTypeUtil as dateStringPropTypeUtil2 } from "@elementor/editor-props";
|
|
9491
9568
|
import { FormHelperText as FormHelperText2, Grid as Grid30, Stack as Stack21 } from "@elementor/ui";
|
|
9492
|
-
import { __ as
|
|
9569
|
+
import { __ as __64 } from "@wordpress/i18n";
|
|
9493
9570
|
|
|
9494
9571
|
// src/controls/date-string-control.tsx
|
|
9495
|
-
import * as
|
|
9572
|
+
import * as React122 from "react";
|
|
9496
9573
|
import { dateStringPropTypeUtil } from "@elementor/editor-props";
|
|
9497
9574
|
import { DatePicker as DatePicker2, LocalizationProvider as LocalizationProvider2 } from "@elementor/ui";
|
|
9498
9575
|
|
|
@@ -9551,7 +9628,7 @@ var DateStringControl = createControl(
|
|
|
9551
9628
|
}
|
|
9552
9629
|
setValue(newValue.format(format));
|
|
9553
9630
|
};
|
|
9554
|
-
return /* @__PURE__ */
|
|
9631
|
+
return /* @__PURE__ */ React122.createElement(LocalizationProvider2, null, /* @__PURE__ */ React122.createElement(ControlActions, null, /* @__PURE__ */ React122.createElement(
|
|
9555
9632
|
DatePicker2,
|
|
9556
9633
|
{
|
|
9557
9634
|
value: parseDateString(value ?? ""),
|
|
@@ -9565,8 +9642,8 @@ var DateStringControl = createControl(
|
|
|
9565
9642
|
|
|
9566
9643
|
// src/controls/date-range-control.tsx
|
|
9567
9644
|
var RANGE_LABELS = {
|
|
9568
|
-
min:
|
|
9569
|
-
max:
|
|
9645
|
+
min: __64("Min date", "elementor"),
|
|
9646
|
+
max: __64("Max date", "elementor")
|
|
9570
9647
|
};
|
|
9571
9648
|
var isMaxBeforeMin = (minIso, maxIso) => {
|
|
9572
9649
|
if (!minIso || !maxIso) {
|
|
@@ -9574,38 +9651,38 @@ var isMaxBeforeMin = (minIso, maxIso) => {
|
|
|
9574
9651
|
}
|
|
9575
9652
|
return maxIso < minIso;
|
|
9576
9653
|
};
|
|
9577
|
-
var RANGE_ERROR_MESSAGE =
|
|
9654
|
+
var RANGE_ERROR_MESSAGE = __64("Max date must be on or after Min date", "elementor");
|
|
9578
9655
|
var DateRangeControl = createControl(() => {
|
|
9579
9656
|
const { value, setValue, ...propContext } = useBoundProp(dateRangePropTypeUtil);
|
|
9580
9657
|
const minString = dateStringPropTypeUtil2.extract(value?.min);
|
|
9581
9658
|
const maxString = dateStringPropTypeUtil2.extract(value?.max);
|
|
9582
9659
|
const hasInvalidRange = isMaxBeforeMin(minString, maxString);
|
|
9583
|
-
return /* @__PURE__ */
|
|
9660
|
+
return /* @__PURE__ */ React123.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React123.createElement(Stack21, { gap: 0.75 }, /* @__PURE__ */ React123.createElement(Stack21, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React123.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React123.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React123.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(
|
|
9584
9661
|
BoundDateStringControl,
|
|
9585
9662
|
{
|
|
9586
9663
|
bind: "min",
|
|
9587
9664
|
ariaLabel: RANGE_LABELS.min,
|
|
9588
9665
|
error: hasInvalidRange
|
|
9589
9666
|
}
|
|
9590
|
-
))), /* @__PURE__ */
|
|
9667
|
+
))), /* @__PURE__ */ React123.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React123.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React123.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(
|
|
9591
9668
|
BoundDateStringControl,
|
|
9592
9669
|
{
|
|
9593
9670
|
bind: "max",
|
|
9594
9671
|
ariaLabel: RANGE_LABELS.max,
|
|
9595
9672
|
error: hasInvalidRange
|
|
9596
9673
|
}
|
|
9597
|
-
)))), hasInvalidRange && /* @__PURE__ */
|
|
9674
|
+
)))), hasInvalidRange && /* @__PURE__ */ React123.createElement(FormHelperText2, { error: true }, RANGE_ERROR_MESSAGE)));
|
|
9598
9675
|
});
|
|
9599
9676
|
var BoundDateStringControl = ({
|
|
9600
9677
|
bind,
|
|
9601
9678
|
ariaLabel,
|
|
9602
9679
|
error
|
|
9603
9680
|
}) => {
|
|
9604
|
-
return /* @__PURE__ */
|
|
9681
|
+
return /* @__PURE__ */ React123.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React123.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
|
|
9605
9682
|
};
|
|
9606
9683
|
|
|
9607
9684
|
// src/controls/time-string-control.tsx
|
|
9608
|
-
import * as
|
|
9685
|
+
import * as React124 from "react";
|
|
9609
9686
|
import { timeStringPropTypeUtil } from "@elementor/editor-props";
|
|
9610
9687
|
import { LocalizationProvider as LocalizationProvider3, TimePicker as TimePicker2 } from "@elementor/ui";
|
|
9611
9688
|
var TimeStringControl = createControl(
|
|
@@ -9633,7 +9710,7 @@ var TimeStringControl = createControl(
|
|
|
9633
9710
|
}
|
|
9634
9711
|
setValue(newValue.format(format));
|
|
9635
9712
|
};
|
|
9636
|
-
return /* @__PURE__ */
|
|
9713
|
+
return /* @__PURE__ */ React124.createElement(LocalizationProvider3, null, /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(
|
|
9637
9714
|
TimePicker2,
|
|
9638
9715
|
{
|
|
9639
9716
|
value: parseTimeString(value ?? ""),
|
|
@@ -9646,32 +9723,32 @@ var TimeStringControl = createControl(
|
|
|
9646
9723
|
);
|
|
9647
9724
|
|
|
9648
9725
|
// src/controls/time-range-control.tsx
|
|
9649
|
-
import * as
|
|
9726
|
+
import * as React125 from "react";
|
|
9650
9727
|
import { timeRangePropTypeUtil } from "@elementor/editor-props";
|
|
9651
9728
|
import { Grid as Grid31, Stack as Stack22 } from "@elementor/ui";
|
|
9652
|
-
import { __ as
|
|
9729
|
+
import { __ as __65 } from "@wordpress/i18n";
|
|
9653
9730
|
var RANGE_LABELS2 = {
|
|
9654
|
-
min:
|
|
9655
|
-
max:
|
|
9731
|
+
min: __65("Start time", "elementor"),
|
|
9732
|
+
max: __65("End time", "elementor")
|
|
9656
9733
|
};
|
|
9657
9734
|
var TimeRangeControl = createControl(() => {
|
|
9658
9735
|
const { value, setValue, ...propContext } = useBoundProp(timeRangePropTypeUtil);
|
|
9659
|
-
return /* @__PURE__ */
|
|
9736
|
+
return /* @__PURE__ */ React125.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React125.createElement(Stack22, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React125.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React125.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React125.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React125.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React125.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React125.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
|
|
9660
9737
|
});
|
|
9661
9738
|
var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
9662
|
-
return /* @__PURE__ */
|
|
9739
|
+
return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React125.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
|
|
9663
9740
|
};
|
|
9664
9741
|
|
|
9665
9742
|
// src/controls/inline-editing-control.tsx
|
|
9666
|
-
import * as
|
|
9667
|
-
import { useCallback as useCallback4, useState as
|
|
9743
|
+
import * as React129 from "react";
|
|
9744
|
+
import { useCallback as useCallback4, useState as useState27 } from "react";
|
|
9668
9745
|
import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
|
|
9669
|
-
import { Box as
|
|
9746
|
+
import { Box as Box36, Stack as Stack24 } from "@elementor/ui";
|
|
9670
9747
|
|
|
9671
9748
|
// src/components/inline-editor.tsx
|
|
9672
|
-
import * as
|
|
9673
|
-
import { useEffect as useEffect19, useRef as
|
|
9674
|
-
import { Box as
|
|
9749
|
+
import * as React126 from "react";
|
|
9750
|
+
import { useEffect as useEffect19, useRef as useRef33 } from "react";
|
|
9751
|
+
import { Box as Box34 } from "@elementor/ui";
|
|
9675
9752
|
import Bold from "@tiptap/extension-bold";
|
|
9676
9753
|
import Document from "@tiptap/extension-document";
|
|
9677
9754
|
import HardBreak from "@tiptap/extension-hard-break";
|
|
@@ -9716,7 +9793,7 @@ function extractInlineHtmlContent(propValue) {
|
|
|
9716
9793
|
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
9717
9794
|
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
9718
9795
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
9719
|
-
var InlineEditor =
|
|
9796
|
+
var InlineEditor = React126.forwardRef((props, ref) => {
|
|
9720
9797
|
const {
|
|
9721
9798
|
value,
|
|
9722
9799
|
setValue,
|
|
@@ -9733,8 +9810,8 @@ var InlineEditor = React125.forwardRef((props, ref) => {
|
|
|
9733
9810
|
onSelectionEnd,
|
|
9734
9811
|
mountElement = null
|
|
9735
9812
|
} = props;
|
|
9736
|
-
const containerRef =
|
|
9737
|
-
const onBlurRef =
|
|
9813
|
+
const containerRef = useRef33(null);
|
|
9814
|
+
const onBlurRef = useRef33(onBlur);
|
|
9738
9815
|
onBlurRef.current = onBlur;
|
|
9739
9816
|
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
9740
9817
|
const onUpdate = ({ editor: updatedEditor }) => {
|
|
@@ -9829,10 +9906,10 @@ var InlineEditor = React125.forwardRef((props, ref) => {
|
|
|
9829
9906
|
if (mountElement) {
|
|
9830
9907
|
return null;
|
|
9831
9908
|
}
|
|
9832
|
-
return /* @__PURE__ */
|
|
9909
|
+
return /* @__PURE__ */ React126.createElement(Box34, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React126.createElement(EditorContent, { ref, editor }));
|
|
9833
9910
|
});
|
|
9834
9911
|
var useOnUpdate = (callback, dependencies) => {
|
|
9835
|
-
const hasMounted =
|
|
9912
|
+
const hasMounted = useRef33(false);
|
|
9836
9913
|
useEffect19(() => {
|
|
9837
9914
|
if (hasMounted.current) {
|
|
9838
9915
|
callback();
|
|
@@ -9843,8 +9920,8 @@ var useOnUpdate = (callback, dependencies) => {
|
|
|
9843
9920
|
};
|
|
9844
9921
|
|
|
9845
9922
|
// src/components/inline-editor-toolbar.tsx
|
|
9846
|
-
import * as
|
|
9847
|
-
import { useEffect as useEffect21, useMemo as useMemo18, useRef as
|
|
9923
|
+
import * as React128 from "react";
|
|
9924
|
+
import { useEffect as useEffect21, useMemo as useMemo18, useRef as useRef35, useState as useState26 } from "react";
|
|
9848
9925
|
import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
|
|
9849
9926
|
import {
|
|
9850
9927
|
BoldIcon,
|
|
@@ -9857,23 +9934,23 @@ import {
|
|
|
9857
9934
|
UnderlineIcon
|
|
9858
9935
|
} from "@elementor/icons";
|
|
9859
9936
|
import {
|
|
9860
|
-
Box as
|
|
9861
|
-
IconButton as
|
|
9937
|
+
Box as Box35,
|
|
9938
|
+
IconButton as IconButton11,
|
|
9862
9939
|
ToggleButton as ToggleButton4,
|
|
9863
9940
|
ToggleButtonGroup as ToggleButtonGroup2,
|
|
9864
9941
|
toggleButtonGroupClasses,
|
|
9865
|
-
Tooltip as
|
|
9942
|
+
Tooltip as Tooltip14,
|
|
9866
9943
|
usePopupState as usePopupState12
|
|
9867
9944
|
} from "@elementor/ui";
|
|
9868
9945
|
import { useEditorState } from "@tiptap/react";
|
|
9869
|
-
import { __ as
|
|
9946
|
+
import { __ as __67 } from "@wordpress/i18n";
|
|
9870
9947
|
|
|
9871
9948
|
// src/components/url-popover.tsx
|
|
9872
|
-
import * as
|
|
9873
|
-
import { useEffect as useEffect20, useRef as
|
|
9949
|
+
import * as React127 from "react";
|
|
9950
|
+
import { useEffect as useEffect20, useRef as useRef34 } from "react";
|
|
9874
9951
|
import { ExternalLinkIcon } from "@elementor/icons";
|
|
9875
|
-
import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack23, TextField as TextField11, ToggleButton as ToggleButton3, Tooltip as
|
|
9876
|
-
import { __ as
|
|
9952
|
+
import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack23, TextField as TextField11, ToggleButton as ToggleButton3, Tooltip as Tooltip13 } from "@elementor/ui";
|
|
9953
|
+
import { __ as __66 } from "@wordpress/i18n";
|
|
9877
9954
|
var UrlPopover = ({
|
|
9878
9955
|
popupState,
|
|
9879
9956
|
restoreValue,
|
|
@@ -9883,7 +9960,7 @@ var UrlPopover = ({
|
|
|
9883
9960
|
openInNewTab,
|
|
9884
9961
|
onToggleNewTab
|
|
9885
9962
|
}) => {
|
|
9886
|
-
const inputRef =
|
|
9963
|
+
const inputRef = useRef34(null);
|
|
9887
9964
|
useEffect20(() => {
|
|
9888
9965
|
if (popupState.isOpen) {
|
|
9889
9966
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
@@ -9893,7 +9970,7 @@ var UrlPopover = ({
|
|
|
9893
9970
|
restoreValue();
|
|
9894
9971
|
popupState.close();
|
|
9895
9972
|
};
|
|
9896
|
-
return /* @__PURE__ */
|
|
9973
|
+
return /* @__PURE__ */ React127.createElement(
|
|
9897
9974
|
Popover9,
|
|
9898
9975
|
{
|
|
9899
9976
|
slotProps: {
|
|
@@ -9904,30 +9981,30 @@ var UrlPopover = ({
|
|
|
9904
9981
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
9905
9982
|
onClose: handleClose
|
|
9906
9983
|
},
|
|
9907
|
-
/* @__PURE__ */
|
|
9984
|
+
/* @__PURE__ */ React127.createElement(Stack23, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React127.createElement(
|
|
9908
9985
|
TextField11,
|
|
9909
9986
|
{
|
|
9910
9987
|
value,
|
|
9911
9988
|
onChange,
|
|
9912
9989
|
size: "tiny",
|
|
9913
9990
|
fullWidth: true,
|
|
9914
|
-
placeholder:
|
|
9991
|
+
placeholder: __66("Type a URL", "elementor"),
|
|
9915
9992
|
inputProps: { ref: inputRef },
|
|
9916
9993
|
color: "secondary",
|
|
9917
9994
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
9918
9995
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
9919
9996
|
}
|
|
9920
|
-
), /* @__PURE__ */
|
|
9997
|
+
), /* @__PURE__ */ React127.createElement(Tooltip13, { title: __66("Open in a new tab", "elementor") }, /* @__PURE__ */ React127.createElement(
|
|
9921
9998
|
ToggleButton3,
|
|
9922
9999
|
{
|
|
9923
10000
|
size: "tiny",
|
|
9924
10001
|
value: "newTab",
|
|
9925
10002
|
selected: openInNewTab,
|
|
9926
10003
|
onClick: onToggleNewTab,
|
|
9927
|
-
"aria-label":
|
|
10004
|
+
"aria-label": __66("Open in a new tab", "elementor"),
|
|
9928
10005
|
sx: { borderRadius: "8px" }
|
|
9929
10006
|
},
|
|
9930
|
-
/* @__PURE__ */
|
|
10007
|
+
/* @__PURE__ */ React127.createElement(ExternalLinkIcon, { fontSize: "tiny" })
|
|
9931
10008
|
)))
|
|
9932
10009
|
);
|
|
9933
10010
|
};
|
|
@@ -9939,9 +10016,9 @@ var InlineEditorToolbar = ({
|
|
|
9939
10016
|
sx = {},
|
|
9940
10017
|
inControlPanel = false
|
|
9941
10018
|
}) => {
|
|
9942
|
-
const [urlValue, setUrlValue] =
|
|
9943
|
-
const [openInNewTab, setOpenInNewTab] =
|
|
9944
|
-
const toolbarRef =
|
|
10019
|
+
const [urlValue, setUrlValue] = useState26("");
|
|
10020
|
+
const [openInNewTab, setOpenInNewTab] = useState26(false);
|
|
10021
|
+
const toolbarRef = useRef35(null);
|
|
9945
10022
|
const linkPopupState = usePopupState12({ variant: "popover" });
|
|
9946
10023
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
9947
10024
|
const editorState = useEditorState({
|
|
@@ -9990,8 +10067,8 @@ var InlineEditorToolbar = ({
|
|
|
9990
10067
|
editor?.commands?.focus();
|
|
9991
10068
|
}
|
|
9992
10069
|
}, [editor, inControlPanel]);
|
|
9993
|
-
return /* @__PURE__ */
|
|
9994
|
-
|
|
10070
|
+
return /* @__PURE__ */ React128.createElement(
|
|
10071
|
+
Box35,
|
|
9995
10072
|
{
|
|
9996
10073
|
ref: toolbarRef,
|
|
9997
10074
|
sx: {
|
|
@@ -10024,8 +10101,8 @@ var InlineEditorToolbar = ({
|
|
|
10024
10101
|
}
|
|
10025
10102
|
}
|
|
10026
10103
|
},
|
|
10027
|
-
/* @__PURE__ */
|
|
10028
|
-
/* @__PURE__ */
|
|
10104
|
+
/* @__PURE__ */ React128.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React128.createElement(IconButton11, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
10105
|
+
/* @__PURE__ */ React128.createElement(
|
|
10029
10106
|
ToggleButtonGroup2,
|
|
10030
10107
|
{
|
|
10031
10108
|
value: editorState,
|
|
@@ -10055,7 +10132,7 @@ var InlineEditorToolbar = ({
|
|
|
10055
10132
|
}
|
|
10056
10133
|
}
|
|
10057
10134
|
},
|
|
10058
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
10135
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React128.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React128.createElement(
|
|
10059
10136
|
ToggleButton4,
|
|
10060
10137
|
{
|
|
10061
10138
|
value: button.action,
|
|
@@ -10073,7 +10150,7 @@ var InlineEditorToolbar = ({
|
|
|
10073
10150
|
button.icon
|
|
10074
10151
|
)))
|
|
10075
10152
|
),
|
|
10076
|
-
/* @__PURE__ */
|
|
10153
|
+
/* @__PURE__ */ React128.createElement(
|
|
10077
10154
|
UrlPopover,
|
|
10078
10155
|
{
|
|
10079
10156
|
popupState: linkPopupState,
|
|
@@ -10096,64 +10173,64 @@ var checkIfElementIsClickable = (elementId) => {
|
|
|
10096
10173
|
};
|
|
10097
10174
|
var toolbarButtons = {
|
|
10098
10175
|
clear: {
|
|
10099
|
-
label:
|
|
10100
|
-
icon: /* @__PURE__ */
|
|
10176
|
+
label: __67("Clear", "elementor"),
|
|
10177
|
+
icon: /* @__PURE__ */ React128.createElement(MinusIcon2, { fontSize: "tiny" }),
|
|
10101
10178
|
action: "clear",
|
|
10102
10179
|
method: (editor) => {
|
|
10103
10180
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
10104
10181
|
}
|
|
10105
10182
|
},
|
|
10106
10183
|
bold: {
|
|
10107
|
-
label:
|
|
10108
|
-
icon: /* @__PURE__ */
|
|
10184
|
+
label: __67("Bold", "elementor"),
|
|
10185
|
+
icon: /* @__PURE__ */ React128.createElement(BoldIcon, { fontSize: "tiny" }),
|
|
10109
10186
|
action: "bold",
|
|
10110
10187
|
method: (editor) => {
|
|
10111
10188
|
editor.chain().focus().toggleBold().run();
|
|
10112
10189
|
}
|
|
10113
10190
|
},
|
|
10114
10191
|
italic: {
|
|
10115
|
-
label:
|
|
10116
|
-
icon: /* @__PURE__ */
|
|
10192
|
+
label: __67("Italic", "elementor"),
|
|
10193
|
+
icon: /* @__PURE__ */ React128.createElement(ItalicIcon, { fontSize: "tiny" }),
|
|
10117
10194
|
action: "italic",
|
|
10118
10195
|
method: (editor) => {
|
|
10119
10196
|
editor.chain().focus().toggleItalic().run();
|
|
10120
10197
|
}
|
|
10121
10198
|
},
|
|
10122
10199
|
underline: {
|
|
10123
|
-
label:
|
|
10124
|
-
icon: /* @__PURE__ */
|
|
10200
|
+
label: __67("Underline", "elementor"),
|
|
10201
|
+
icon: /* @__PURE__ */ React128.createElement(UnderlineIcon, { fontSize: "tiny" }),
|
|
10125
10202
|
action: "underline",
|
|
10126
10203
|
method: (editor) => {
|
|
10127
10204
|
editor.chain().focus().toggleUnderline().run();
|
|
10128
10205
|
}
|
|
10129
10206
|
},
|
|
10130
10207
|
strike: {
|
|
10131
|
-
label:
|
|
10132
|
-
icon: /* @__PURE__ */
|
|
10208
|
+
label: __67("Strikethrough", "elementor"),
|
|
10209
|
+
icon: /* @__PURE__ */ React128.createElement(StrikethroughIcon, { fontSize: "tiny" }),
|
|
10133
10210
|
action: "strike",
|
|
10134
10211
|
method: (editor) => {
|
|
10135
10212
|
editor.chain().focus().toggleStrike().run();
|
|
10136
10213
|
}
|
|
10137
10214
|
},
|
|
10138
10215
|
superscript: {
|
|
10139
|
-
label:
|
|
10140
|
-
icon: /* @__PURE__ */
|
|
10216
|
+
label: __67("Superscript", "elementor"),
|
|
10217
|
+
icon: /* @__PURE__ */ React128.createElement(SuperscriptIcon, { fontSize: "tiny" }),
|
|
10141
10218
|
action: "superscript",
|
|
10142
10219
|
method: (editor) => {
|
|
10143
10220
|
editor.chain().focus().toggleSuperscript().run();
|
|
10144
10221
|
}
|
|
10145
10222
|
},
|
|
10146
10223
|
subscript: {
|
|
10147
|
-
label:
|
|
10148
|
-
icon: /* @__PURE__ */
|
|
10224
|
+
label: __67("Subscript", "elementor"),
|
|
10225
|
+
icon: /* @__PURE__ */ React128.createElement(SubscriptIcon, { fontSize: "tiny" }),
|
|
10149
10226
|
action: "subscript",
|
|
10150
10227
|
method: (editor) => {
|
|
10151
10228
|
editor.chain().focus().toggleSubscript().run();
|
|
10152
10229
|
}
|
|
10153
10230
|
},
|
|
10154
10231
|
link: {
|
|
10155
|
-
label:
|
|
10156
|
-
icon: /* @__PURE__ */
|
|
10232
|
+
label: __67("Link", "elementor"),
|
|
10233
|
+
icon: /* @__PURE__ */ React128.createElement(LinkIcon3, { fontSize: "tiny" }),
|
|
10157
10234
|
action: "link",
|
|
10158
10235
|
method: null
|
|
10159
10236
|
}
|
|
@@ -10167,7 +10244,7 @@ var InlineEditingControl = createControl(
|
|
|
10167
10244
|
const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
|
|
10168
10245
|
const { value: rawValue } = usePropKeyContext();
|
|
10169
10246
|
const content = value ?? extractInlineHtmlContent(rawValue);
|
|
10170
|
-
const [editor, setEditor] =
|
|
10247
|
+
const [editor, setEditor] = useState27(null);
|
|
10171
10248
|
const handleChange = useCallback4(
|
|
10172
10249
|
(newValue) => {
|
|
10173
10250
|
const html = newValue ?? "";
|
|
@@ -10175,7 +10252,7 @@ var InlineEditingControl = createControl(
|
|
|
10175
10252
|
},
|
|
10176
10253
|
[setValue]
|
|
10177
10254
|
);
|
|
10178
|
-
const editorField = /* @__PURE__ */
|
|
10255
|
+
const editorField = /* @__PURE__ */ React129.createElement(ControlActions, null, /* @__PURE__ */ React129.createElement(Box36, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React129.createElement(
|
|
10179
10256
|
InlineEditorToolbar,
|
|
10180
10257
|
{
|
|
10181
10258
|
editor,
|
|
@@ -10188,8 +10265,8 @@ var InlineEditingControl = createControl(
|
|
|
10188
10265
|
}),
|
|
10189
10266
|
inControlPanel: true
|
|
10190
10267
|
}
|
|
10191
|
-
), /* @__PURE__ */
|
|
10192
|
-
|
|
10268
|
+
), /* @__PURE__ */ React129.createElement(
|
|
10269
|
+
Box36,
|
|
10193
10270
|
{
|
|
10194
10271
|
sx: (theme) => ({
|
|
10195
10272
|
p: 0.8,
|
|
@@ -10233,7 +10310,7 @@ var InlineEditingControl = createControl(
|
|
|
10233
10310
|
...attributes,
|
|
10234
10311
|
...props
|
|
10235
10312
|
},
|
|
10236
|
-
/* @__PURE__ */
|
|
10313
|
+
/* @__PURE__ */ React129.createElement(
|
|
10237
10314
|
InlineEditor,
|
|
10238
10315
|
{
|
|
10239
10316
|
value: content,
|
|
@@ -10250,22 +10327,22 @@ var InlineEditingControl = createControl(
|
|
|
10250
10327
|
if (!promotion) {
|
|
10251
10328
|
return editorField;
|
|
10252
10329
|
}
|
|
10253
|
-
return /* @__PURE__ */
|
|
10330
|
+
return /* @__PURE__ */ React129.createElement(Stack24, { gap: 1 }, /* @__PURE__ */ React129.createElement(Stack24, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React129.createElement(ControlLabel, null, label), /* @__PURE__ */ React129.createElement(ImageOptimizeTrigger, { promotion })), editorField);
|
|
10254
10331
|
}
|
|
10255
10332
|
);
|
|
10256
10333
|
|
|
10257
10334
|
// src/controls/email-form-action-control/index.tsx
|
|
10258
|
-
import * as
|
|
10335
|
+
import * as React133 from "react";
|
|
10259
10336
|
import { emailsPropTypeUtil } from "@elementor/editor-props";
|
|
10260
10337
|
import { CollapsibleContent } from "@elementor/editor-ui";
|
|
10261
|
-
import { Box as
|
|
10262
|
-
import { __ as
|
|
10338
|
+
import { Box as Box37, Divider as Divider7, Stack as Stack26 } from "@elementor/ui";
|
|
10339
|
+
import { __ as __69 } from "@wordpress/i18n";
|
|
10263
10340
|
|
|
10264
10341
|
// src/controls/email-form-action-control/fields.tsx
|
|
10265
|
-
import * as
|
|
10342
|
+
import * as React132 from "react";
|
|
10266
10343
|
import { InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
|
|
10267
10344
|
import { Grid as Grid34, Stack as Stack25 } from "@elementor/ui";
|
|
10268
|
-
import { __ as
|
|
10345
|
+
import { __ as __68 } from "@wordpress/i18n";
|
|
10269
10346
|
|
|
10270
10347
|
// src/hooks/use-form-field-suggestions.ts
|
|
10271
10348
|
import { getContainer as getContainer3, getSelectedElements as getSelectedElements3, getWidgetsCache } from "@elementor/editor-elements";
|
|
@@ -10354,8 +10431,8 @@ function useFormFieldSuggestions(options) {
|
|
|
10354
10431
|
}
|
|
10355
10432
|
|
|
10356
10433
|
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
10357
|
-
import * as
|
|
10358
|
-
import { useMemo as useMemo19, useState as
|
|
10434
|
+
import * as React130 from "react";
|
|
10435
|
+
import { useMemo as useMemo19, useState as useState28 } from "react";
|
|
10359
10436
|
import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
|
|
10360
10437
|
import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField12 } from "@elementor/ui";
|
|
10361
10438
|
|
|
@@ -10393,7 +10470,7 @@ function resolveMention(raw, suggestions) {
|
|
|
10393
10470
|
}
|
|
10394
10471
|
var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
10395
10472
|
const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
|
|
10396
|
-
const [inputValue, setInputValue] =
|
|
10473
|
+
const [inputValue, setInputValue] = useState28("");
|
|
10397
10474
|
const items2 = value || [];
|
|
10398
10475
|
const selectedValues = items2.map((item) => stringPropTypeUtil23.extract(item)).filter((val) => val !== null);
|
|
10399
10476
|
const suggestionOptions = useMemo19(
|
|
@@ -10431,7 +10508,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10431
10508
|
tryAddChip(inputValue);
|
|
10432
10509
|
}
|
|
10433
10510
|
};
|
|
10434
|
-
return /* @__PURE__ */
|
|
10511
|
+
return /* @__PURE__ */ React130.createElement(ControlActions, null, /* @__PURE__ */ React130.createElement(
|
|
10435
10512
|
Autocomplete4,
|
|
10436
10513
|
{
|
|
10437
10514
|
fullWidth: true,
|
|
@@ -10456,17 +10533,17 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10456
10533
|
onBlur: handleBlur,
|
|
10457
10534
|
getOptionLabel: (option) => option,
|
|
10458
10535
|
isOptionEqualToValue: (option, val) => option === val,
|
|
10459
|
-
renderInput: (params) => /* @__PURE__ */
|
|
10460
|
-
renderTags: (tagValues, getTagProps) => /* @__PURE__ */
|
|
10536
|
+
renderInput: (params) => /* @__PURE__ */ React130.createElement(TextField12, { ...params, placeholder, onKeyDown: handleKeyDown }),
|
|
10537
|
+
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React130.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
|
|
10461
10538
|
}
|
|
10462
10539
|
));
|
|
10463
10540
|
});
|
|
10464
|
-
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */
|
|
10541
|
+
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React130.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React130.createElement(Grid32, { item: true }, /* @__PURE__ */ React130.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React130.createElement(Grid32, { item: true }, /* @__PURE__ */ React130.createElement(EmailChipsControl, { placeholder, suggestions })));
|
|
10465
10542
|
|
|
10466
10543
|
// src/controls/email-form-action-control/email-field.tsx
|
|
10467
|
-
import * as
|
|
10544
|
+
import * as React131 from "react";
|
|
10468
10545
|
import { Grid as Grid33 } from "@elementor/ui";
|
|
10469
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
10546
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React131.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React131.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React131.createElement(Grid33, { item: true }, /* @__PURE__ */ React131.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React131.createElement(Grid33, { item: true }, /* @__PURE__ */ React131.createElement(TextControl, { placeholder }))));
|
|
10470
10547
|
|
|
10471
10548
|
// src/controls/email-form-action-control/fields.tsx
|
|
10472
10549
|
var FieldValueMentionField = ({
|
|
@@ -10475,88 +10552,88 @@ var FieldValueMentionField = ({
|
|
|
10475
10552
|
placeholder
|
|
10476
10553
|
}) => {
|
|
10477
10554
|
const suggestions = useFormFieldSuggestions();
|
|
10478
|
-
return /* @__PURE__ */
|
|
10555
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React132.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(MentionTextAreaControl, { suggestions, rows: 1, placeholder }))));
|
|
10479
10556
|
};
|
|
10480
10557
|
var SendToField = ({ placeholder }) => {
|
|
10481
10558
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10482
|
-
return /* @__PURE__ */
|
|
10559
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React132.createElement(Stack25, { gap: 0.5 }, /* @__PURE__ */ React132.createElement(
|
|
10483
10560
|
EmailChipsField,
|
|
10484
10561
|
{
|
|
10485
|
-
fieldLabel:
|
|
10562
|
+
fieldLabel: __68("Send to", "elementor"),
|
|
10486
10563
|
placeholder,
|
|
10487
10564
|
suggestions
|
|
10488
10565
|
}
|
|
10489
|
-
), shouldShowMentionsInfo() && /* @__PURE__ */
|
|
10566
|
+
), shouldShowMentionsInfo() && /* @__PURE__ */ React132.createElement(InfoAlert2, null, __68("Type @ or an email field name to insert its submitted value.", "elementor"))));
|
|
10490
10567
|
};
|
|
10491
|
-
var SubjectField = () => /* @__PURE__ */
|
|
10568
|
+
var SubjectField = () => /* @__PURE__ */ React132.createElement(
|
|
10492
10569
|
FieldValueMentionField,
|
|
10493
10570
|
{
|
|
10494
10571
|
bind: "subject",
|
|
10495
|
-
label:
|
|
10496
|
-
placeholder:
|
|
10572
|
+
label: __68("Email subject", "elementor"),
|
|
10573
|
+
placeholder: __68("New form submission", "elementor")
|
|
10497
10574
|
}
|
|
10498
10575
|
);
|
|
10499
10576
|
var MessageField = () => {
|
|
10500
10577
|
const suggestions = useFormFieldSuggestions();
|
|
10501
|
-
return /* @__PURE__ */
|
|
10578
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React132.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, __68("Message", "elementor"))), /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __68(
|
|
10502
10579
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
10503
10580
|
"elementor"
|
|
10504
|
-
) :
|
|
10581
|
+
) : __68("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
10505
10582
|
};
|
|
10506
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
10583
|
+
var FromEmailField = () => /* @__PURE__ */ React132.createElement(
|
|
10507
10584
|
EmailField,
|
|
10508
10585
|
{
|
|
10509
10586
|
bind: "from",
|
|
10510
|
-
label:
|
|
10511
|
-
placeholder:
|
|
10587
|
+
label: __68("From email", "elementor"),
|
|
10588
|
+
placeholder: __68("What email should appear as the sender?", "elementor")
|
|
10512
10589
|
}
|
|
10513
10590
|
);
|
|
10514
|
-
var FromNameField = () => /* @__PURE__ */
|
|
10591
|
+
var FromNameField = () => /* @__PURE__ */ React132.createElement(
|
|
10515
10592
|
FieldValueMentionField,
|
|
10516
10593
|
{
|
|
10517
10594
|
bind: "from-name",
|
|
10518
|
-
label:
|
|
10519
|
-
placeholder:
|
|
10595
|
+
label: __68("From name", "elementor"),
|
|
10596
|
+
placeholder: __68("What name should appear as the sender?", "elementor")
|
|
10520
10597
|
}
|
|
10521
10598
|
);
|
|
10522
10599
|
var ReplyToField = () => {
|
|
10523
10600
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10524
|
-
return /* @__PURE__ */
|
|
10601
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React132.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, __68("Reply-to", "elementor"))), /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(
|
|
10525
10602
|
MentionTextAreaControl,
|
|
10526
10603
|
{
|
|
10527
10604
|
suggestions: emailSuggestions,
|
|
10528
10605
|
rows: 1,
|
|
10529
10606
|
triggerPosition: "start",
|
|
10530
|
-
placeholder:
|
|
10607
|
+
placeholder: __68("You can type @ to insert an email field", "elementor")
|
|
10531
10608
|
}
|
|
10532
10609
|
))));
|
|
10533
10610
|
};
|
|
10534
10611
|
var CcField = () => {
|
|
10535
10612
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10536
|
-
return /* @__PURE__ */
|
|
10613
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React132.createElement(EmailChipsField, { fieldLabel: __68("Cc", "elementor"), suggestions }));
|
|
10537
10614
|
};
|
|
10538
10615
|
var BccField = () => {
|
|
10539
10616
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10540
|
-
return /* @__PURE__ */
|
|
10617
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React132.createElement(EmailChipsField, { fieldLabel: __68("Bcc", "elementor"), suggestions }));
|
|
10541
10618
|
};
|
|
10542
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
10619
|
+
var MetaDataField = () => /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React132.createElement(Stack25, { gap: 0.5 }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, __68("Metadata", "elementor")), /* @__PURE__ */ React132.createElement(
|
|
10543
10620
|
ChipsControl,
|
|
10544
10621
|
{
|
|
10545
10622
|
options: [
|
|
10546
|
-
{ label:
|
|
10547
|
-
{ label:
|
|
10548
|
-
{ label:
|
|
10549
|
-
{ label:
|
|
10550
|
-
{ label:
|
|
10623
|
+
{ label: __68("Date", "elementor"), value: "date" },
|
|
10624
|
+
{ label: __68("Time", "elementor"), value: "time" },
|
|
10625
|
+
{ label: __68("Page URL", "elementor"), value: "page-url" },
|
|
10626
|
+
{ label: __68("User agent", "elementor"), value: "user-agent" },
|
|
10627
|
+
{ label: __68("Credit", "elementor"), value: "credit" }
|
|
10551
10628
|
]
|
|
10552
10629
|
}
|
|
10553
10630
|
)));
|
|
10554
|
-
var SendAsField = () => /* @__PURE__ */
|
|
10631
|
+
var SendAsField = () => /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React132.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, __68("Send as", "elementor"))), /* @__PURE__ */ React132.createElement(Grid34, { item: true }, /* @__PURE__ */ React132.createElement(
|
|
10555
10632
|
SelectControl,
|
|
10556
10633
|
{
|
|
10557
10634
|
options: [
|
|
10558
|
-
{ label:
|
|
10559
|
-
{ label:
|
|
10635
|
+
{ label: __68("HTML", "elementor"), value: "html" },
|
|
10636
|
+
{ label: __68("Plain Text", "elementor"), value: "plain" }
|
|
10560
10637
|
]
|
|
10561
10638
|
}
|
|
10562
10639
|
))));
|
|
@@ -10565,25 +10642,25 @@ var SendAsField = () => /* @__PURE__ */ React131.createElement(PropKeyProvider,
|
|
|
10565
10642
|
var EmailFormActionControl = createControl(
|
|
10566
10643
|
({ toPlaceholder, label }) => {
|
|
10567
10644
|
const { value, setValue, ...propContext } = useBoundProp(emailsPropTypeUtil);
|
|
10568
|
-
return /* @__PURE__ */
|
|
10645
|
+
return /* @__PURE__ */ React133.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React133.createElement(Stack26, { gap: 2 }, /* @__PURE__ */ React133.createElement(ControlLabel, null, label ? label + " " + __69("settings", "elementor") : __69("Email settings", "elementor")), /* @__PURE__ */ React133.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React133.createElement(SubjectField, null), /* @__PURE__ */ React133.createElement(MessageField, null), /* @__PURE__ */ React133.createElement(FromEmailField, null), /* @__PURE__ */ React133.createElement(AdvancedSettings, null)));
|
|
10569
10646
|
}
|
|
10570
10647
|
);
|
|
10571
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
10648
|
+
var AdvancedSettings = () => /* @__PURE__ */ React133.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React133.createElement(Box37, { sx: { pt: 2 } }, /* @__PURE__ */ React133.createElement(Stack26, { gap: 2 }, /* @__PURE__ */ React133.createElement(FromNameField, null), /* @__PURE__ */ React133.createElement(ReplyToField, null), /* @__PURE__ */ React133.createElement(CcField, null), /* @__PURE__ */ React133.createElement(BccField, null), /* @__PURE__ */ React133.createElement(Divider7, null), /* @__PURE__ */ React133.createElement(MetaDataField, null), /* @__PURE__ */ React133.createElement(SendAsField, null))));
|
|
10572
10649
|
|
|
10573
10650
|
// src/controls/attachment-type-control.tsx
|
|
10574
|
-
import * as
|
|
10651
|
+
import * as React134 from "react";
|
|
10575
10652
|
import { InfoAlert as InfoAlert3 } from "@elementor/editor-ui";
|
|
10576
10653
|
import { Grid as Grid35 } from "@elementor/ui";
|
|
10577
|
-
import { __ as
|
|
10654
|
+
import { __ as __70 } from "@wordpress/i18n";
|
|
10578
10655
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
10579
|
-
return /* @__PURE__ */
|
|
10656
|
+
return /* @__PURE__ */ React134.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React134.createElement(Grid35, { item: true }, /* @__PURE__ */ React134.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React134.createElement(Grid35, { item: true }, /* @__PURE__ */ React134.createElement(SelectControl, { options })), /* @__PURE__ */ React134.createElement(Grid35, { item: true }, /* @__PURE__ */ React134.createElement(InfoAlert3, null, __70(
|
|
10580
10657
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
10581
10658
|
"elementor"
|
|
10582
10659
|
))));
|
|
10583
10660
|
});
|
|
10584
10661
|
|
|
10585
10662
|
// src/controls/grid-span-control.tsx
|
|
10586
|
-
import * as
|
|
10663
|
+
import * as React135 from "react";
|
|
10587
10664
|
import { spanPropTypeUtil } from "@elementor/editor-props";
|
|
10588
10665
|
import { TextField as TextField13 } from "@elementor/ui";
|
|
10589
10666
|
var GridSpanControl = createControl(
|
|
@@ -10602,7 +10679,7 @@ var GridSpanControl = createControl(
|
|
|
10602
10679
|
setValue(next === "" ? null : next);
|
|
10603
10680
|
};
|
|
10604
10681
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
|
|
10605
|
-
return /* @__PURE__ */
|
|
10682
|
+
return /* @__PURE__ */ React135.createElement(ControlActions, null, /* @__PURE__ */ React135.createElement(
|
|
10606
10683
|
TextField13,
|
|
10607
10684
|
{
|
|
10608
10685
|
size: "tiny",
|
|
@@ -10623,23 +10700,23 @@ var GridSpanControl = createControl(
|
|
|
10623
10700
|
);
|
|
10624
10701
|
|
|
10625
10702
|
// src/components/promotions/display-conditions-control.tsx
|
|
10626
|
-
import * as
|
|
10627
|
-
import { useRef as
|
|
10703
|
+
import * as React137 from "react";
|
|
10704
|
+
import { useRef as useRef36 } from "react";
|
|
10628
10705
|
import { SitemapIcon } from "@elementor/icons";
|
|
10629
|
-
import { IconButton as
|
|
10630
|
-
import { __ as
|
|
10706
|
+
import { IconButton as IconButton12, Stack as Stack27, Tooltip as Tooltip15 } from "@elementor/ui";
|
|
10707
|
+
import { __ as __71 } from "@wordpress/i18n";
|
|
10631
10708
|
|
|
10632
10709
|
// src/components/promotions/promotion-trigger.tsx
|
|
10633
|
-
import * as
|
|
10634
|
-
import { forwardRef as
|
|
10710
|
+
import * as React136 from "react";
|
|
10711
|
+
import { forwardRef as forwardRef14, useCallback as useCallback5, useImperativeHandle, useState as useState29 } from "react";
|
|
10635
10712
|
import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
|
|
10636
|
-
import { Box as
|
|
10713
|
+
import { Box as Box38 } from "@elementor/ui";
|
|
10637
10714
|
function getV4Promotion(key) {
|
|
10638
10715
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
10639
10716
|
}
|
|
10640
|
-
var PromotionTrigger =
|
|
10717
|
+
var PromotionTrigger = forwardRef14(
|
|
10641
10718
|
({ promotionKey, children, trackingData }, ref) => {
|
|
10642
|
-
const [isOpen, setIsOpen] =
|
|
10719
|
+
const [isOpen, setIsOpen] = useState29(false);
|
|
10643
10720
|
const promotion = getV4Promotion(promotionKey);
|
|
10644
10721
|
const toggle = useCallback5(() => {
|
|
10645
10722
|
setIsOpen((prev) => {
|
|
@@ -10650,7 +10727,7 @@ var PromotionTrigger = forwardRef13(
|
|
|
10650
10727
|
});
|
|
10651
10728
|
}, [trackingData]);
|
|
10652
10729
|
useImperativeHandle(ref, () => ({ toggle }), [toggle]);
|
|
10653
|
-
return /* @__PURE__ */
|
|
10730
|
+
return /* @__PURE__ */ React136.createElement(React136.Fragment, null, promotion && /* @__PURE__ */ React136.createElement(
|
|
10654
10731
|
PromotionInfotip,
|
|
10655
10732
|
{
|
|
10656
10733
|
title: promotion.title,
|
|
@@ -10664,8 +10741,8 @@ var PromotionTrigger = forwardRef13(
|
|
|
10664
10741
|
},
|
|
10665
10742
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
10666
10743
|
},
|
|
10667
|
-
/* @__PURE__ */
|
|
10668
|
-
|
|
10744
|
+
/* @__PURE__ */ React136.createElement(
|
|
10745
|
+
Box38,
|
|
10669
10746
|
{
|
|
10670
10747
|
onClick: (e) => {
|
|
10671
10748
|
e.stopPropagation();
|
|
@@ -10673,18 +10750,18 @@ var PromotionTrigger = forwardRef13(
|
|
|
10673
10750
|
},
|
|
10674
10751
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
10675
10752
|
},
|
|
10676
|
-
children ?? /* @__PURE__ */
|
|
10753
|
+
children ?? /* @__PURE__ */ React136.createElement(PromotionChip2, null)
|
|
10677
10754
|
)
|
|
10678
10755
|
));
|
|
10679
10756
|
}
|
|
10680
10757
|
);
|
|
10681
10758
|
|
|
10682
10759
|
// src/components/promotions/display-conditions-control.tsx
|
|
10683
|
-
var ARIA_LABEL =
|
|
10684
|
-
var
|
|
10760
|
+
var ARIA_LABEL = __71("Display Conditions", "elementor");
|
|
10761
|
+
var TRACKING_DATA2 = { target_name: "display_conditions", location_l2: "general" };
|
|
10685
10762
|
var DisplayConditionsControl = createControl(() => {
|
|
10686
|
-
const triggerRef =
|
|
10687
|
-
return /* @__PURE__ */
|
|
10763
|
+
const triggerRef = useRef36(null);
|
|
10764
|
+
return /* @__PURE__ */ React137.createElement(
|
|
10688
10765
|
Stack27,
|
|
10689
10766
|
{
|
|
10690
10767
|
direction: "row",
|
|
@@ -10694,9 +10771,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
10694
10771
|
alignItems: "center"
|
|
10695
10772
|
}
|
|
10696
10773
|
},
|
|
10697
|
-
/* @__PURE__ */
|
|
10698
|
-
/* @__PURE__ */
|
|
10699
|
-
|
|
10774
|
+
/* @__PURE__ */ React137.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA2 }),
|
|
10775
|
+
/* @__PURE__ */ React137.createElement(Tooltip15, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React137.createElement(
|
|
10776
|
+
IconButton12,
|
|
10700
10777
|
{
|
|
10701
10778
|
size: "tiny",
|
|
10702
10779
|
"aria-label": ARIA_LABEL,
|
|
@@ -10708,22 +10785,22 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
10708
10785
|
borderRadius: 1
|
|
10709
10786
|
}
|
|
10710
10787
|
},
|
|
10711
|
-
/* @__PURE__ */
|
|
10788
|
+
/* @__PURE__ */ React137.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
10712
10789
|
))
|
|
10713
10790
|
);
|
|
10714
10791
|
});
|
|
10715
10792
|
|
|
10716
10793
|
// src/components/promotions/attributes-control.tsx
|
|
10717
|
-
import * as
|
|
10718
|
-
import { useRef as
|
|
10794
|
+
import * as React138 from "react";
|
|
10795
|
+
import { useRef as useRef37 } from "react";
|
|
10719
10796
|
import { PlusIcon as PlusIcon4 } from "@elementor/icons";
|
|
10720
|
-
import { Stack as Stack28, Tooltip as
|
|
10721
|
-
import { __ as
|
|
10722
|
-
var ARIA_LABEL2 =
|
|
10723
|
-
var
|
|
10797
|
+
import { Stack as Stack28, Tooltip as Tooltip16 } from "@elementor/ui";
|
|
10798
|
+
import { __ as __72 } from "@wordpress/i18n";
|
|
10799
|
+
var ARIA_LABEL2 = __72("Attributes", "elementor");
|
|
10800
|
+
var TRACKING_DATA3 = { target_name: "attributes", location_l2: "general" };
|
|
10724
10801
|
var AttributesControl = createControl(() => {
|
|
10725
|
-
const triggerRef =
|
|
10726
|
-
return /* @__PURE__ */
|
|
10802
|
+
const triggerRef = useRef37(null);
|
|
10803
|
+
return /* @__PURE__ */ React138.createElement(
|
|
10727
10804
|
Stack28,
|
|
10728
10805
|
{
|
|
10729
10806
|
direction: "row",
|
|
@@ -10733,8 +10810,8 @@ var AttributesControl = createControl(() => {
|
|
|
10733
10810
|
alignItems: "center"
|
|
10734
10811
|
}
|
|
10735
10812
|
},
|
|
10736
|
-
/* @__PURE__ */
|
|
10737
|
-
/* @__PURE__ */
|
|
10813
|
+
/* @__PURE__ */ React138.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA3 }),
|
|
10814
|
+
/* @__PURE__ */ React138.createElement(Tooltip16, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React138.createElement(
|
|
10738
10815
|
PlusIcon4,
|
|
10739
10816
|
{
|
|
10740
10817
|
"aria-label": ARIA_LABEL2,
|
|
@@ -10748,29 +10825,29 @@ var AttributesControl = createControl(() => {
|
|
|
10748
10825
|
});
|
|
10749
10826
|
|
|
10750
10827
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
10751
|
-
import * as
|
|
10828
|
+
import * as React139 from "react";
|
|
10752
10829
|
import { BrushBigIcon } from "@elementor/icons";
|
|
10753
|
-
import { IconButton as
|
|
10754
|
-
var CustomIconButton = styled14(
|
|
10830
|
+
import { IconButton as IconButton13, styled as styled14, Tooltip as Tooltip17 } from "@elementor/ui";
|
|
10831
|
+
var CustomIconButton = styled14(IconButton13)(({ theme }) => ({
|
|
10755
10832
|
width: theme.spacing(2.5),
|
|
10756
10833
|
height: theme.spacing(2.5)
|
|
10757
10834
|
}));
|
|
10758
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
10835
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React139.createElement(Tooltip17, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React139.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React139.createElement(BrushBigIcon, { fontSize: size })));
|
|
10759
10836
|
|
|
10760
10837
|
// src/components/repeater/repeater.tsx
|
|
10761
|
-
import * as
|
|
10762
|
-
import { useEffect as useEffect22, useState as
|
|
10838
|
+
import * as React140 from "react";
|
|
10839
|
+
import { useEffect as useEffect22, useState as useState30 } from "react";
|
|
10763
10840
|
import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
|
|
10764
10841
|
import {
|
|
10765
10842
|
bindPopover as bindPopover9,
|
|
10766
10843
|
bindTrigger as bindTrigger7,
|
|
10767
|
-
Box as
|
|
10768
|
-
IconButton as
|
|
10844
|
+
Box as Box39,
|
|
10845
|
+
IconButton as IconButton14,
|
|
10769
10846
|
Infotip as Infotip5,
|
|
10770
|
-
Tooltip as
|
|
10847
|
+
Tooltip as Tooltip18,
|
|
10771
10848
|
usePopupState as usePopupState13
|
|
10772
10849
|
} from "@elementor/ui";
|
|
10773
|
-
import { __ as
|
|
10850
|
+
import { __ as __73 } from "@wordpress/i18n";
|
|
10774
10851
|
var SIZE12 = "tiny";
|
|
10775
10852
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
10776
10853
|
var Repeater3 = ({
|
|
@@ -10789,7 +10866,7 @@ var Repeater3 = ({
|
|
|
10789
10866
|
isSortable = true,
|
|
10790
10867
|
adornment = ControlAdornments
|
|
10791
10868
|
}) => {
|
|
10792
|
-
const [openItem, setOpenItem] =
|
|
10869
|
+
const [openItem, setOpenItem] = useState30(initialOpenItem);
|
|
10793
10870
|
const uniqueKeys = items2.map(
|
|
10794
10871
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
10795
10872
|
);
|
|
@@ -10852,8 +10929,8 @@ var Repeater3 = ({
|
|
|
10852
10929
|
};
|
|
10853
10930
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
10854
10931
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
10855
|
-
const addButton = /* @__PURE__ */
|
|
10856
|
-
|
|
10932
|
+
const addButton = /* @__PURE__ */ React140.createElement(
|
|
10933
|
+
IconButton14,
|
|
10857
10934
|
{
|
|
10858
10935
|
size: SIZE12,
|
|
10859
10936
|
sx: {
|
|
@@ -10861,11 +10938,11 @@ var Repeater3 = ({
|
|
|
10861
10938
|
},
|
|
10862
10939
|
disabled: isButtonDisabled,
|
|
10863
10940
|
onClick: addRepeaterItem,
|
|
10864
|
-
"aria-label":
|
|
10941
|
+
"aria-label": __73("Add item", "elementor")
|
|
10865
10942
|
},
|
|
10866
|
-
/* @__PURE__ */
|
|
10943
|
+
/* @__PURE__ */ React140.createElement(PlusIcon5, { fontSize: SIZE12 })
|
|
10867
10944
|
);
|
|
10868
|
-
return /* @__PURE__ */
|
|
10945
|
+
return /* @__PURE__ */ React140.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React140.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React140.createElement(
|
|
10869
10946
|
Infotip5,
|
|
10870
10947
|
{
|
|
10871
10948
|
placement: "right",
|
|
@@ -10873,20 +10950,20 @@ var Repeater3 = ({
|
|
|
10873
10950
|
color: "secondary",
|
|
10874
10951
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
10875
10952
|
},
|
|
10876
|
-
/* @__PURE__ */
|
|
10877
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
10953
|
+
/* @__PURE__ */ React140.createElement(Box39, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
10954
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React140.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
10878
10955
|
const index = uniqueKeys.indexOf(key);
|
|
10879
10956
|
const value = items2[index];
|
|
10880
10957
|
if (!value) {
|
|
10881
10958
|
return null;
|
|
10882
10959
|
}
|
|
10883
|
-
return /* @__PURE__ */
|
|
10960
|
+
return /* @__PURE__ */ React140.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React140.createElement(
|
|
10884
10961
|
RepeaterItem,
|
|
10885
10962
|
{
|
|
10886
10963
|
disabled,
|
|
10887
10964
|
propDisabled: value?.disabled,
|
|
10888
|
-
label: /* @__PURE__ */
|
|
10889
|
-
startIcon: /* @__PURE__ */
|
|
10965
|
+
label: /* @__PURE__ */ React140.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React140.createElement(itemSettings.Label, { value, index })),
|
|
10966
|
+
startIcon: /* @__PURE__ */ React140.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React140.createElement(itemSettings.Icon, { value })),
|
|
10890
10967
|
removeItem: () => removeRepeaterItem(index),
|
|
10891
10968
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
10892
10969
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -10900,7 +10977,7 @@ var Repeater3 = ({
|
|
|
10900
10977
|
actions: itemSettings.actions,
|
|
10901
10978
|
value
|
|
10902
10979
|
},
|
|
10903
|
-
(props) => /* @__PURE__ */
|
|
10980
|
+
(props) => /* @__PURE__ */ React140.createElement(
|
|
10904
10981
|
itemSettings.Content,
|
|
10905
10982
|
{
|
|
10906
10983
|
...props,
|
|
@@ -10942,16 +11019,16 @@ var RepeaterItem = ({
|
|
|
10942
11019
|
);
|
|
10943
11020
|
const triggerProps = bindTrigger7(popoverState);
|
|
10944
11021
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
10945
|
-
const duplicateLabel =
|
|
10946
|
-
const toggleLabel = propDisabled ?
|
|
10947
|
-
const removeLabel =
|
|
10948
|
-
return /* @__PURE__ */
|
|
11022
|
+
const duplicateLabel = __73("Duplicate", "elementor");
|
|
11023
|
+
const toggleLabel = propDisabled ? __73("Show", "elementor") : __73("Hide", "elementor");
|
|
11024
|
+
const removeLabel = __73("Remove", "elementor");
|
|
11025
|
+
return /* @__PURE__ */ React140.createElement(Box39, { sx: { display: "contents" } }, /* @__PURE__ */ React140.createElement(
|
|
10949
11026
|
RepeaterTag,
|
|
10950
11027
|
{
|
|
10951
11028
|
disabled,
|
|
10952
11029
|
label,
|
|
10953
11030
|
ref: setRef,
|
|
10954
|
-
"aria-label":
|
|
11031
|
+
"aria-label": __73("Open item", "elementor"),
|
|
10955
11032
|
...triggerProps,
|
|
10956
11033
|
onClick: (e) => {
|
|
10957
11034
|
triggerProps.onClick(e);
|
|
@@ -10960,12 +11037,12 @@ var RepeaterItem = ({
|
|
|
10960
11037
|
}
|
|
10961
11038
|
},
|
|
10962
11039
|
startIcon,
|
|
10963
|
-
actions: /* @__PURE__ */
|
|
11040
|
+
actions: /* @__PURE__ */ React140.createElement(React140.Fragment, null, showDuplicate && /* @__PURE__ */ React140.createElement(Tooltip18, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React140.createElement(IconButton14, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React140.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React140.createElement(Tooltip18, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React140.createElement(IconButton14, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React140.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React140.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React140.createElement(Tooltip18, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React140.createElement(IconButton14, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React140.createElement(XIcon4, { fontSize: SIZE12 }))))
|
|
10964
11041
|
}
|
|
10965
|
-
), /* @__PURE__ */
|
|
11042
|
+
), /* @__PURE__ */ React140.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React140.createElement(Box39, null, children({ anchorEl: ref }))));
|
|
10966
11043
|
};
|
|
10967
11044
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
10968
|
-
const [ref, setRef] =
|
|
11045
|
+
const [ref, setRef] = useState30(null);
|
|
10969
11046
|
const popoverState = usePopupState13({ variant: "popover" });
|
|
10970
11047
|
const popoverProps = bindPopover9(popoverState);
|
|
10971
11048
|
useEffect22(() => {
|
|
@@ -10987,7 +11064,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
10987
11064
|
};
|
|
10988
11065
|
|
|
10989
11066
|
// src/components/size/unstable-size-field.tsx
|
|
10990
|
-
import * as
|
|
11067
|
+
import * as React143 from "react";
|
|
10991
11068
|
import { InputAdornment as InputAdornment6 } from "@elementor/ui";
|
|
10992
11069
|
|
|
10993
11070
|
// src/hooks/use-size-value.ts
|
|
@@ -11030,7 +11107,7 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
11030
11107
|
};
|
|
11031
11108
|
|
|
11032
11109
|
// src/components/size/unit-select.tsx
|
|
11033
|
-
import * as
|
|
11110
|
+
import * as React141 from "react";
|
|
11034
11111
|
import { useId as useId5 } from "react";
|
|
11035
11112
|
import { MenuListItem as MenuListItem8 } from "@elementor/editor-ui";
|
|
11036
11113
|
import { bindMenu as bindMenu4, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu5, styled as styled15, usePopupState as usePopupState14 } from "@elementor/ui";
|
|
@@ -11048,7 +11125,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
11048
11125
|
onClick(options[index]);
|
|
11049
11126
|
popupState.close();
|
|
11050
11127
|
};
|
|
11051
|
-
return /* @__PURE__ */
|
|
11128
|
+
return /* @__PURE__ */ React141.createElement(React141.Fragment, null, /* @__PURE__ */ React141.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React141.createElement(Menu5, { MenuListProps: { dense: true }, ...bindMenu4(popupState) }, options.map((option, index) => /* @__PURE__ */ React141.createElement(
|
|
11052
11129
|
MenuListItem8,
|
|
11053
11130
|
{
|
|
11054
11131
|
key: option,
|
|
@@ -11077,11 +11154,11 @@ var StyledButton3 = styled15(Button7, {
|
|
|
11077
11154
|
}));
|
|
11078
11155
|
|
|
11079
11156
|
// src/components/size/unstable-size-input.tsx
|
|
11080
|
-
import * as
|
|
11081
|
-
import { forwardRef as
|
|
11082
|
-
var UnstableSizeInput =
|
|
11157
|
+
import * as React142 from "react";
|
|
11158
|
+
import { forwardRef as forwardRef15 } from "react";
|
|
11159
|
+
var UnstableSizeInput = forwardRef15(
|
|
11083
11160
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
11084
|
-
return /* @__PURE__ */
|
|
11161
|
+
return /* @__PURE__ */ React142.createElement(
|
|
11085
11162
|
NumberInput,
|
|
11086
11163
|
{
|
|
11087
11164
|
ref,
|
|
@@ -11119,7 +11196,7 @@ var UnstableSizeField = ({
|
|
|
11119
11196
|
const shouldHighlightUnit2 = () => {
|
|
11120
11197
|
return hasValue(size);
|
|
11121
11198
|
};
|
|
11122
|
-
return /* @__PURE__ */
|
|
11199
|
+
return /* @__PURE__ */ React143.createElement(
|
|
11123
11200
|
UnstableSizeInput,
|
|
11124
11201
|
{
|
|
11125
11202
|
type: "number",
|
|
@@ -11128,8 +11205,8 @@ var UnstableSizeField = ({
|
|
|
11128
11205
|
onChange: (event) => setSize(event.target.value),
|
|
11129
11206
|
InputProps: {
|
|
11130
11207
|
...InputProps,
|
|
11131
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
11132
|
-
endAdornment: /* @__PURE__ */
|
|
11208
|
+
startAdornment: startIcon && /* @__PURE__ */ React143.createElement(InputAdornment6, { position: "start" }, startIcon),
|
|
11209
|
+
endAdornment: /* @__PURE__ */ React143.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React143.createElement(
|
|
11133
11210
|
UnitSelect,
|
|
11134
11211
|
{
|
|
11135
11212
|
options: units2,
|
|
@@ -11203,6 +11280,8 @@ export {
|
|
|
11203
11280
|
GapControl,
|
|
11204
11281
|
GridSpanControl,
|
|
11205
11282
|
HtmlTagControl,
|
|
11283
|
+
IconLibraryUploadButton,
|
|
11284
|
+
IconLibraryUploadPromotion,
|
|
11206
11285
|
ImageControl,
|
|
11207
11286
|
InlineEditingControl,
|
|
11208
11287
|
InlineEditor,
|
|
@@ -11254,6 +11333,7 @@ export {
|
|
|
11254
11333
|
enqueueIconFonts,
|
|
11255
11334
|
getControlReplacements,
|
|
11256
11335
|
getFontAwesome7IconName,
|
|
11336
|
+
injectIntoIconLibraryUploadAction,
|
|
11257
11337
|
injectIntoRepeaterItemActions,
|
|
11258
11338
|
injectIntoRepeaterItemIcon,
|
|
11259
11339
|
injectIntoRepeaterItemLabel,
|