@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.js
CHANGED
|
@@ -55,6 +55,8 @@ __export(index_exports, {
|
|
|
55
55
|
GapControl: () => GapControl,
|
|
56
56
|
GridSpanControl: () => GridSpanControl,
|
|
57
57
|
HtmlTagControl: () => HtmlTagControl,
|
|
58
|
+
IconLibraryUploadButton: () => IconLibraryUploadButton,
|
|
59
|
+
IconLibraryUploadPromotion: () => IconLibraryUploadPromotion,
|
|
58
60
|
ImageControl: () => ImageControl,
|
|
59
61
|
InlineEditingControl: () => InlineEditingControl,
|
|
60
62
|
InlineEditor: () => InlineEditor,
|
|
@@ -106,6 +108,7 @@ __export(index_exports, {
|
|
|
106
108
|
enqueueIconFonts: () => enqueueIconFonts,
|
|
107
109
|
getControlReplacements: () => getControlReplacements,
|
|
108
110
|
getFontAwesome7IconName: () => getFontAwesome7IconName,
|
|
111
|
+
injectIntoIconLibraryUploadAction: () => injectIntoIconLibraryUploadAction,
|
|
109
112
|
injectIntoRepeaterItemActions: () => injectIntoRepeaterItemActions,
|
|
110
113
|
injectIntoRepeaterItemIcon: () => injectIntoRepeaterItemIcon,
|
|
111
114
|
injectIntoRepeaterItemLabel: () => injectIntoRepeaterItemLabel,
|
|
@@ -5733,13 +5736,13 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5733
5736
|
});
|
|
5734
5737
|
|
|
5735
5738
|
// src/controls/svg-media-control.tsx
|
|
5736
|
-
var
|
|
5737
|
-
var
|
|
5739
|
+
var React93 = __toESM(require("react"));
|
|
5740
|
+
var import_react57 = require("react");
|
|
5738
5741
|
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
5739
5742
|
var import_editor_props35 = require("@elementor/editor-props");
|
|
5740
|
-
var
|
|
5743
|
+
var import_ui76 = require("@elementor/ui");
|
|
5741
5744
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
5742
|
-
var
|
|
5745
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
5743
5746
|
|
|
5744
5747
|
// src/components/enable-unfiltered-modal.tsx
|
|
5745
5748
|
var React83 = __toESM(require("react"));
|
|
@@ -5807,14 +5810,14 @@ function measureIconLibraryAnchor(container, buttonGroup) {
|
|
|
5807
5810
|
}
|
|
5808
5811
|
|
|
5809
5812
|
// src/controls/icon-library/icon-library-popover.tsx
|
|
5810
|
-
var
|
|
5811
|
-
var
|
|
5812
|
-
var
|
|
5813
|
-
var
|
|
5813
|
+
var React90 = __toESM(require("react"));
|
|
5814
|
+
var import_react56 = require("react");
|
|
5815
|
+
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
5816
|
+
var import_icons26 = require("@elementor/icons");
|
|
5814
5817
|
var import_session2 = require("@elementor/session");
|
|
5815
|
-
var
|
|
5818
|
+
var import_ui73 = require("@elementor/ui");
|
|
5816
5819
|
var import_utils6 = require("@elementor/utils");
|
|
5817
|
-
var
|
|
5820
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
5818
5821
|
|
|
5819
5822
|
// src/controls/icon-library/font-awesome-7-data.ts
|
|
5820
5823
|
var FONT_AWESOME_7_LIBRARIES = [
|
|
@@ -6675,20 +6678,134 @@ async function resolveProviderIconSvg(library, iconValue, signal) {
|
|
|
6675
6678
|
return null;
|
|
6676
6679
|
}
|
|
6677
6680
|
|
|
6678
|
-
// src/controls/icon-library/icon-library-
|
|
6681
|
+
// src/controls/icon-library/icon-library-upload-action.tsx
|
|
6679
6682
|
var React87 = __toESM(require("react"));
|
|
6683
|
+
var import_react55 = require("react");
|
|
6684
|
+
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
6680
6685
|
var import_icons24 = require("@elementor/icons");
|
|
6686
|
+
var import_locations3 = require("@elementor/locations");
|
|
6681
6687
|
var import_ui70 = require("@elementor/ui");
|
|
6682
6688
|
var import_i18n36 = require("@wordpress/i18n");
|
|
6689
|
+
|
|
6690
|
+
// src/utils/tracking.ts
|
|
6691
|
+
var import_editor_elements5 = require("@elementor/editor-elements");
|
|
6692
|
+
var import_events = require("@elementor/events");
|
|
6693
|
+
var getBaseEventProperties = (data, config) => ({
|
|
6694
|
+
window_name: config?.appTypes?.editor ?? "editor",
|
|
6695
|
+
interaction_type: config?.triggers?.click ?? "Click",
|
|
6696
|
+
target_name: data.target_name,
|
|
6697
|
+
target_location: data.target_location ?? "widget_panel",
|
|
6698
|
+
location_l1: data.location_l1 ?? (0, import_editor_elements5.getSelectedElements)()[0]?.type ?? "",
|
|
6699
|
+
...data.location_l2 && { location_l2: data.location_l2 }
|
|
6700
|
+
});
|
|
6701
|
+
var dispatchPromotionEvent = (data, resolveOptions) => {
|
|
6702
|
+
const { dispatchEvent, config } = (0, import_events.getMixpanel)();
|
|
6703
|
+
const { eventName, interactionResult, interactionDescription } = resolveOptions(config);
|
|
6704
|
+
if (!eventName) {
|
|
6705
|
+
return;
|
|
6706
|
+
}
|
|
6707
|
+
dispatchEvent?.(eventName, {
|
|
6708
|
+
...getBaseEventProperties(data, config),
|
|
6709
|
+
interaction_result: interactionResult,
|
|
6710
|
+
interaction_description: interactionDescription
|
|
6711
|
+
});
|
|
6712
|
+
};
|
|
6713
|
+
var trackViewPromotion = (data) => {
|
|
6714
|
+
dispatchPromotionEvent(data, (config) => ({
|
|
6715
|
+
eventName: config?.names?.promotions?.viewPromotion,
|
|
6716
|
+
interactionResult: config?.interactionResults?.promotionViewed ?? "promotion_viewed",
|
|
6717
|
+
interactionDescription: "user_viewed_promotion"
|
|
6718
|
+
}));
|
|
6719
|
+
};
|
|
6720
|
+
var trackUpgradePromotionClick = (data) => {
|
|
6721
|
+
dispatchPromotionEvent(data, (config) => ({
|
|
6722
|
+
eventName: config?.names?.promotions?.upgradePromotionClick,
|
|
6723
|
+
interactionResult: config?.interactionResults?.upgradeNow ?? "upgrade_now",
|
|
6724
|
+
interactionDescription: "user_clicked_upgrade_now"
|
|
6725
|
+
}));
|
|
6726
|
+
};
|
|
6727
|
+
|
|
6728
|
+
// src/controls/icon-library/icon-library-upload-action.tsx
|
|
6729
|
+
var ICON_LIBRARY_UPLOAD_UPGRADE_URL = "https://go.elementor.com/go-pro-svg-library-upload-upgrade/";
|
|
6730
|
+
var TRACKING_DATA = { target_name: "icon_library_upload", location_l2: "general" };
|
|
6731
|
+
var { Slot: IconLibraryUploadActionSlot, inject: injectIntoIconLibraryUploadAction } = (0, import_locations3.createReplaceableLocation)();
|
|
6732
|
+
var IconLibraryUploadButton = (0, import_react55.forwardRef)(
|
|
6733
|
+
(props, ref) => {
|
|
6734
|
+
const label = (0, import_i18n36.__)("Upload library", "elementor");
|
|
6735
|
+
return /* @__PURE__ */ React87.createElement(import_ui70.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React87.createElement(import_ui70.IconButton, { ref, size: "tiny", "aria-label": label, ...props }, /* @__PURE__ */ React87.createElement(import_icons24.UploadIcon, { fontSize: "tiny" })));
|
|
6736
|
+
}
|
|
6737
|
+
);
|
|
6738
|
+
var IconLibraryUploadPromotion = ({
|
|
6739
|
+
ctaUrl = ICON_LIBRARY_UPLOAD_UPGRADE_URL,
|
|
6740
|
+
ctaText = (0, import_i18n36.__)("Upgrade now", "elementor"),
|
|
6741
|
+
title = (0, import_i18n36.__)("Upload custom icons", "elementor"),
|
|
6742
|
+
content = (0, import_i18n36.__)("Add your own icon font library to use across your site.", "elementor")
|
|
6743
|
+
}) => {
|
|
6744
|
+
const [isOpen, setIsOpen] = (0, import_react55.useState)(false);
|
|
6745
|
+
const triggerRef = (0, import_react55.useRef)(null);
|
|
6746
|
+
const canSeePromotions = !!window.elementor?.config?.v4Promotions;
|
|
6747
|
+
const close = () => {
|
|
6748
|
+
setIsOpen(false);
|
|
6749
|
+
triggerRef.current?.focus();
|
|
6750
|
+
};
|
|
6751
|
+
(0, import_editor_ui11.useCanvasClickHandler)(isOpen, close);
|
|
6752
|
+
const toggle = () => {
|
|
6753
|
+
if (!isOpen) {
|
|
6754
|
+
trackViewPromotion(TRACKING_DATA);
|
|
6755
|
+
}
|
|
6756
|
+
setIsOpen(!isOpen);
|
|
6757
|
+
};
|
|
6758
|
+
if (!canSeePromotions) {
|
|
6759
|
+
return null;
|
|
6760
|
+
}
|
|
6761
|
+
return /* @__PURE__ */ React87.createElement(
|
|
6762
|
+
import_editor_ui11.PromotionPopover,
|
|
6763
|
+
{
|
|
6764
|
+
open: isOpen,
|
|
6765
|
+
placement: "top",
|
|
6766
|
+
arrow: true,
|
|
6767
|
+
title,
|
|
6768
|
+
content,
|
|
6769
|
+
ctaText,
|
|
6770
|
+
ctaUrl,
|
|
6771
|
+
onClose: (event) => {
|
|
6772
|
+
event.stopPropagation();
|
|
6773
|
+
close();
|
|
6774
|
+
},
|
|
6775
|
+
onCtaClick: () => trackUpgradePromotionClick(TRACKING_DATA)
|
|
6776
|
+
},
|
|
6777
|
+
/* @__PURE__ */ React87.createElement(import_ui70.Box, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React87.createElement(
|
|
6778
|
+
IconLibraryUploadButton,
|
|
6779
|
+
{
|
|
6780
|
+
ref: triggerRef,
|
|
6781
|
+
"aria-haspopup": "dialog",
|
|
6782
|
+
"aria-expanded": isOpen,
|
|
6783
|
+
onClick: toggle
|
|
6784
|
+
}
|
|
6785
|
+
))
|
|
6786
|
+
);
|
|
6787
|
+
};
|
|
6788
|
+
var IconLibraryUploadAction = () => {
|
|
6789
|
+
if (window.elementorPro) {
|
|
6790
|
+
return null;
|
|
6791
|
+
}
|
|
6792
|
+
return /* @__PURE__ */ React87.createElement(IconLibraryUploadPromotion, null);
|
|
6793
|
+
};
|
|
6794
|
+
|
|
6795
|
+
// src/controls/icon-library/icon-library-view-toggle.tsx
|
|
6796
|
+
var React88 = __toESM(require("react"));
|
|
6797
|
+
var import_icons25 = require("@elementor/icons");
|
|
6798
|
+
var import_ui71 = require("@elementor/ui");
|
|
6799
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
6683
6800
|
var HEADER_ACTION_GAP = 0.5;
|
|
6684
6801
|
var IconLibraryViewToggle = ({ value, onChange }) => {
|
|
6685
6802
|
const isGrid = value === "grid";
|
|
6686
6803
|
const nextView = isGrid ? "list" : "grid";
|
|
6687
|
-
const ViewIcon = isGrid ?
|
|
6688
|
-
const viewButtonLabel = isGrid ? (0,
|
|
6689
|
-
const viewButtonAction = isGrid ? (0,
|
|
6690
|
-
return /* @__PURE__ */
|
|
6691
|
-
|
|
6804
|
+
const ViewIcon = isGrid ? import_icons25.WidgetsIcon : import_icons25.ListIcon;
|
|
6805
|
+
const viewButtonLabel = isGrid ? (0, import_i18n37.__)("Grid view", "elementor") : (0, import_i18n37.__)("List view", "elementor");
|
|
6806
|
+
const viewButtonAction = isGrid ? (0, import_i18n37.__)("Switch to list view", "elementor") : (0, import_i18n37.__)("Switch to grid view", "elementor");
|
|
6807
|
+
return /* @__PURE__ */ React88.createElement(
|
|
6808
|
+
import_ui71.Tooltip,
|
|
6692
6809
|
{
|
|
6693
6810
|
title: viewButtonLabel,
|
|
6694
6811
|
placement: "top",
|
|
@@ -6696,25 +6813,25 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
|
|
|
6696
6813
|
enterNextDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
|
|
6697
6814
|
disableInteractive: true
|
|
6698
6815
|
},
|
|
6699
|
-
/* @__PURE__ */
|
|
6700
|
-
|
|
6816
|
+
/* @__PURE__ */ React88.createElement(
|
|
6817
|
+
import_ui71.IconButton,
|
|
6701
6818
|
{
|
|
6702
6819
|
"aria-label": viewButtonAction,
|
|
6703
6820
|
size: "tiny",
|
|
6704
6821
|
onClick: () => onChange(nextView),
|
|
6705
6822
|
sx: { flexShrink: 0, mr: HEADER_ACTION_GAP }
|
|
6706
6823
|
},
|
|
6707
|
-
/* @__PURE__ */
|
|
6824
|
+
/* @__PURE__ */ React88.createElement(ViewIcon, { fontSize: "tiny" })
|
|
6708
6825
|
)
|
|
6709
6826
|
);
|
|
6710
6827
|
};
|
|
6711
6828
|
|
|
6712
6829
|
// src/controls/icon-library/svg-element-icon.tsx
|
|
6713
|
-
var
|
|
6714
|
-
var
|
|
6830
|
+
var React89 = __toESM(require("react"));
|
|
6831
|
+
var import_ui72 = require("@elementor/ui");
|
|
6715
6832
|
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";
|
|
6716
|
-
var SvgElementIcon =
|
|
6717
|
-
(props, ref) => /* @__PURE__ */
|
|
6833
|
+
var SvgElementIcon = React89.forwardRef(
|
|
6834
|
+
(props, ref) => /* @__PURE__ */ React89.createElement(import_ui72.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 })))
|
|
6718
6835
|
);
|
|
6719
6836
|
|
|
6720
6837
|
// src/controls/icon-library/use-font-awesome-7-catalog.ts
|
|
@@ -6746,7 +6863,7 @@ var ICON_GLYPH_SIZE2 = 20;
|
|
|
6746
6863
|
var ICON_LIBRARY_INLINE_SPACING = 2;
|
|
6747
6864
|
var ICON_LIBRARY_SEARCH_PADDING_BOTTOM = 2;
|
|
6748
6865
|
var ICON_LIBRARY_TITLE_SIZE = "14px";
|
|
6749
|
-
var CompactIconLibraryMenuList = (0,
|
|
6866
|
+
var CompactIconLibraryMenuList = (0, import_ui73.styled)(import_editor_ui12.StyledMenuList)(({ theme }) => ({
|
|
6750
6867
|
'& > [role="option"]': {
|
|
6751
6868
|
padding: theme.spacing(ICON_LIBRARY_ROW_VERTICAL_PADDING, ICON_LIBRARY_INLINE_SPACING)
|
|
6752
6869
|
}
|
|
@@ -6765,7 +6882,7 @@ var IconLibraryPopover = ({
|
|
|
6765
6882
|
handleChange: handleSearchChange,
|
|
6766
6883
|
setImmediateValue: setSearchValue
|
|
6767
6884
|
} = (0, import_utils6.useDebounceState)({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
|
|
6768
|
-
const [activeLibraries, setActiveLibraries] = (0,
|
|
6885
|
+
const [activeLibraries, setActiveLibraries] = (0, import_react56.useState)([]);
|
|
6769
6886
|
const [storedView, setStoredView] = (0, import_session2.useSessionStorage)(
|
|
6770
6887
|
ICON_LIBRARY_VIEW_STORAGE_KEY,
|
|
6771
6888
|
ICON_LIBRARY_VIEW_STORAGE_PREFIX
|
|
@@ -6774,12 +6891,12 @@ var IconLibraryPopover = ({
|
|
|
6774
6891
|
const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog(open);
|
|
6775
6892
|
const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(open);
|
|
6776
6893
|
const isLoading = isFontAwesomeLoading || isProviderLoading;
|
|
6777
|
-
const icons = (0,
|
|
6778
|
-
const items2 = (0,
|
|
6894
|
+
const icons = (0, import_react56.useMemo)(() => [...fontAwesomeIcons, ...providerIcons], [providerIcons, fontAwesomeIcons]);
|
|
6895
|
+
const items2 = (0, import_react56.useMemo)(
|
|
6779
6896
|
() => createIconLibraryItems(icons, searchValue, activeLibraries),
|
|
6780
6897
|
[activeLibraries, icons, searchValue]
|
|
6781
6898
|
);
|
|
6782
|
-
const selectedValue = (0,
|
|
6899
|
+
const selectedValue = (0, import_react56.useMemo)(
|
|
6783
6900
|
() => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
|
|
6784
6901
|
[icons, selectedIconClass, selectedIconLibrary]
|
|
6785
6902
|
);
|
|
@@ -6801,39 +6918,42 @@ var IconLibraryPopover = ({
|
|
|
6801
6918
|
const handleClearSearch = () => {
|
|
6802
6919
|
setSearchValue("");
|
|
6803
6920
|
};
|
|
6804
|
-
return /* @__PURE__ */
|
|
6805
|
-
|
|
6921
|
+
return /* @__PURE__ */ React90.createElement(import_editor_ui12.PopoverBody, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React90.createElement(
|
|
6922
|
+
import_editor_ui12.PopoverHeader,
|
|
6806
6923
|
{
|
|
6807
|
-
title: (0,
|
|
6924
|
+
title: (0, import_i18n38.__)("Icon library", "elementor"),
|
|
6808
6925
|
onClose: handleClose,
|
|
6809
|
-
icon: /* @__PURE__ */
|
|
6810
|
-
actions: [
|
|
6926
|
+
icon: /* @__PURE__ */ React90.createElement(import_icons26.LibraryIcon, { fontSize: "tiny" }),
|
|
6927
|
+
actions: [
|
|
6928
|
+
/* @__PURE__ */ React90.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView }),
|
|
6929
|
+
/* @__PURE__ */ React90.createElement(IconLibraryUploadActionSlot, { key: "upload" }, /* @__PURE__ */ React90.createElement(IconLibraryUploadAction, null))
|
|
6930
|
+
],
|
|
6811
6931
|
sx: {
|
|
6812
6932
|
pl: ICON_LIBRARY_INLINE_SPACING,
|
|
6813
6933
|
pr: 1,
|
|
6814
6934
|
"& .MuiTypography-subtitle2": { fontSize: ICON_LIBRARY_TITLE_SIZE }
|
|
6815
6935
|
}
|
|
6816
6936
|
}
|
|
6817
|
-
), /* @__PURE__ */
|
|
6818
|
-
|
|
6937
|
+
), /* @__PURE__ */ React90.createElement(
|
|
6938
|
+
import_ui73.Stack,
|
|
6819
6939
|
{
|
|
6820
6940
|
direction: "row",
|
|
6821
6941
|
alignItems: "center",
|
|
6822
6942
|
gap: 1,
|
|
6823
6943
|
sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM }
|
|
6824
6944
|
},
|
|
6825
|
-
/* @__PURE__ */
|
|
6826
|
-
|
|
6945
|
+
/* @__PURE__ */ React90.createElement(
|
|
6946
|
+
import_editor_ui12.SearchField,
|
|
6827
6947
|
{
|
|
6828
6948
|
value: searchInputValue,
|
|
6829
6949
|
onSearch: handleSearchChange,
|
|
6830
|
-
placeholder: (0,
|
|
6950
|
+
placeholder: (0, import_i18n38.__)("Search", "elementor"),
|
|
6831
6951
|
id: "icon-library-search",
|
|
6832
6952
|
sx: { flex: 1, px: 0, pb: 0 }
|
|
6833
6953
|
}
|
|
6834
6954
|
),
|
|
6835
|
-
/* @__PURE__ */
|
|
6836
|
-
), /* @__PURE__ */
|
|
6955
|
+
/* @__PURE__ */ React90.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })
|
|
6956
|
+
), /* @__PURE__ */ React90.createElement(import_ui73.Divider, null), /* @__PURE__ */ React90.createElement(import_ui73.Box, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React90.createElement(
|
|
6837
6957
|
IconLibraryContent,
|
|
6838
6958
|
{
|
|
6839
6959
|
isLoading,
|
|
@@ -6860,9 +6980,9 @@ var IconLibraryContent = ({
|
|
|
6860
6980
|
onClearSearch
|
|
6861
6981
|
}) => {
|
|
6862
6982
|
if (isLoading) {
|
|
6863
|
-
return /* @__PURE__ */
|
|
6983
|
+
return /* @__PURE__ */ React90.createElement(IconLibraryLoadingState, null);
|
|
6864
6984
|
}
|
|
6865
|
-
const emptyState = /* @__PURE__ */
|
|
6985
|
+
const emptyState = /* @__PURE__ */ React90.createElement(
|
|
6866
6986
|
IconLibraryEmptyState,
|
|
6867
6987
|
{
|
|
6868
6988
|
searchValue,
|
|
@@ -6871,7 +6991,7 @@ var IconLibraryContent = ({
|
|
|
6871
6991
|
}
|
|
6872
6992
|
);
|
|
6873
6993
|
if (view === "grid") {
|
|
6874
|
-
return /* @__PURE__ */
|
|
6994
|
+
return /* @__PURE__ */ React90.createElement(import_ui73.Box, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React90.createElement(
|
|
6875
6995
|
IconLibraryGrid,
|
|
6876
6996
|
{
|
|
6877
6997
|
items: items2,
|
|
@@ -6882,8 +7002,8 @@ var IconLibraryContent = ({
|
|
|
6882
7002
|
}
|
|
6883
7003
|
));
|
|
6884
7004
|
}
|
|
6885
|
-
return /* @__PURE__ */
|
|
6886
|
-
|
|
7005
|
+
return /* @__PURE__ */ React90.createElement(
|
|
7006
|
+
import_editor_ui12.PopoverMenuList,
|
|
6887
7007
|
{
|
|
6888
7008
|
items: items2,
|
|
6889
7009
|
selectedValue,
|
|
@@ -6897,21 +7017,21 @@ var IconLibraryContent = ({
|
|
|
6897
7017
|
}
|
|
6898
7018
|
);
|
|
6899
7019
|
};
|
|
6900
|
-
var IconLibraryLoadingState = () => /* @__PURE__ */
|
|
7020
|
+
var IconLibraryLoadingState = () => /* @__PURE__ */ React90.createElement(import_ui73.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React90.createElement(import_ui73.CircularProgress, { role: "progressbar", size: 24 }));
|
|
6901
7021
|
var IconLibraryEmptyState = ({
|
|
6902
7022
|
searchValue,
|
|
6903
7023
|
isCatalogAvailable,
|
|
6904
7024
|
onClear
|
|
6905
7025
|
}) => {
|
|
6906
7026
|
if (!isCatalogAvailable) {
|
|
6907
|
-
return /* @__PURE__ */
|
|
7027
|
+
return /* @__PURE__ */ React90.createElement(CatalogUnavailable, null);
|
|
6908
7028
|
}
|
|
6909
|
-
return /* @__PURE__ */
|
|
7029
|
+
return /* @__PURE__ */ React90.createElement(NoResults, { searchValue, onClear });
|
|
6910
7030
|
};
|
|
6911
7031
|
var IconLibraryRow = (item) => {
|
|
6912
7032
|
const icon = item;
|
|
6913
|
-
return /* @__PURE__ */
|
|
6914
|
-
|
|
7033
|
+
return /* @__PURE__ */ React90.createElement(import_ui73.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React90.createElement(
|
|
7034
|
+
import_ui73.Box,
|
|
6915
7035
|
{
|
|
6916
7036
|
sx: {
|
|
6917
7037
|
width: ICON_TILE_SIZE,
|
|
@@ -6926,11 +7046,11 @@ var IconLibraryRow = (item) => {
|
|
|
6926
7046
|
flexShrink: 0
|
|
6927
7047
|
}
|
|
6928
7048
|
},
|
|
6929
|
-
/* @__PURE__ */
|
|
6930
|
-
), /* @__PURE__ */
|
|
7049
|
+
/* @__PURE__ */ React90.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" })
|
|
7050
|
+
), /* @__PURE__ */ React90.createElement(import_ui73.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
|
|
6931
7051
|
};
|
|
6932
|
-
var CatalogUnavailable = () => /* @__PURE__ */
|
|
6933
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
7052
|
+
var CatalogUnavailable = () => /* @__PURE__ */ React90.createElement(import_ui73.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React90.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React90.createElement(import_ui73.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n38.__)("Icons couldn't be loaded.", "elementor")));
|
|
7053
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElement(import_ui73.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React90.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React90.createElement(import_ui73.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n38.__)("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(import_ui73.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React90.createElement(import_ui73.Link, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, (0, import_i18n38.__)("Clear & try again", "elementor"))) : null);
|
|
6934
7054
|
var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
|
|
6935
7055
|
...icon,
|
|
6936
7056
|
type: "item",
|
|
@@ -6950,10 +7070,10 @@ function createIconPropValue(icon, library) {
|
|
|
6950
7070
|
}
|
|
6951
7071
|
|
|
6952
7072
|
// src/controls/svg-media-overlay.tsx
|
|
6953
|
-
var
|
|
6954
|
-
var
|
|
6955
|
-
var
|
|
6956
|
-
var
|
|
7073
|
+
var React91 = __toESM(require("react"));
|
|
7074
|
+
var import_icons27 = require("@elementor/icons");
|
|
7075
|
+
var import_ui74 = require("@elementor/ui");
|
|
7076
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
6957
7077
|
var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
|
|
6958
7078
|
var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
|
|
6959
7079
|
var ICON_LIBRARY_PADDING = 0.625;
|
|
@@ -6967,31 +7087,31 @@ var SvgMediaOverlay = ({
|
|
|
6967
7087
|
onOpenIconLibrary,
|
|
6968
7088
|
infotipTitle,
|
|
6969
7089
|
infotipDescription
|
|
6970
|
-
}) => /* @__PURE__ */
|
|
7090
|
+
}) => /* @__PURE__ */ React91.createElement(import_ui74.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React91.createElement(
|
|
6971
7091
|
MediaActionGroup,
|
|
6972
7092
|
{
|
|
6973
7093
|
label,
|
|
6974
7094
|
onSelect: onSelectSvg,
|
|
6975
7095
|
groupRef: buttonGroupRef,
|
|
6976
7096
|
testId: SVG_MEDIA_ACTION_GROUP_TEST_ID,
|
|
6977
|
-
uploadSlot: /* @__PURE__ */
|
|
7097
|
+
uploadSlot: /* @__PURE__ */ React91.createElement(
|
|
6978
7098
|
ConditionalControlInfotip,
|
|
6979
7099
|
{
|
|
6980
7100
|
title: infotipTitle,
|
|
6981
7101
|
description: infotipDescription,
|
|
6982
7102
|
isEnabled: !isAdmin
|
|
6983
7103
|
},
|
|
6984
|
-
/* @__PURE__ */
|
|
7104
|
+
/* @__PURE__ */ React91.createElement(import_ui74.Box, { component: "span", sx: { display: "flex", width: "100%" } }, /* @__PURE__ */ React91.createElement(UploadControl, { isAdmin, onUpload }))
|
|
6985
7105
|
)
|
|
6986
7106
|
}
|
|
6987
|
-
), showIconLibrary ? /* @__PURE__ */
|
|
6988
|
-
|
|
7107
|
+
), showIconLibrary ? /* @__PURE__ */ React91.createElement(
|
|
7108
|
+
import_ui74.Button,
|
|
6989
7109
|
{
|
|
6990
7110
|
size: "tiny",
|
|
6991
7111
|
color: "inherit",
|
|
6992
7112
|
variant: "text",
|
|
6993
|
-
startIcon: /* @__PURE__ */
|
|
6994
|
-
"aria-label": (0,
|
|
7113
|
+
startIcon: /* @__PURE__ */ React91.createElement(import_icons27.LibraryIcon, { sx: { height: "18px", width: "16px" } }),
|
|
7114
|
+
"aria-label": (0, import_i18n39.__)("Icon library", "elementor"),
|
|
6995
7115
|
onClick: onOpenIconLibrary,
|
|
6996
7116
|
sx: {
|
|
6997
7117
|
height: "28px",
|
|
@@ -6999,19 +7119,19 @@ var SvgMediaOverlay = ({
|
|
|
6999
7119
|
".MuiButton-icon": { ml: 0 }
|
|
7000
7120
|
}
|
|
7001
7121
|
},
|
|
7002
|
-
/* @__PURE__ */
|
|
7122
|
+
/* @__PURE__ */ React91.createElement(import_ui74.Typography, null, (0, import_i18n39.__)("Icon library", "elementor"))
|
|
7003
7123
|
) : null);
|
|
7004
7124
|
var UploadControl = ({ isAdmin, onUpload }) => {
|
|
7005
7125
|
if (isAdmin) {
|
|
7006
|
-
return /* @__PURE__ */
|
|
7126
|
+
return /* @__PURE__ */ React91.createElement(MediaUploadButton, { onClick: onUpload });
|
|
7007
7127
|
}
|
|
7008
|
-
return /* @__PURE__ */
|
|
7128
|
+
return /* @__PURE__ */ React91.createElement(import_ui74.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React91.createElement(MediaUploadButton, { disabled: true }));
|
|
7009
7129
|
};
|
|
7010
7130
|
|
|
7011
7131
|
// src/controls/svg-media-preview.tsx
|
|
7012
|
-
var
|
|
7013
|
-
var
|
|
7014
|
-
var
|
|
7132
|
+
var React92 = __toESM(require("react"));
|
|
7133
|
+
var import_ui75 = require("@elementor/ui");
|
|
7134
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
7015
7135
|
var ICON_PREVIEW_SIZE = 50;
|
|
7016
7136
|
var ICON_PREVIEW_COLOR = "#000000";
|
|
7017
7137
|
var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
@@ -7022,27 +7142,27 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
|
7022
7142
|
const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
|
|
7023
7143
|
const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isProviderLoading);
|
|
7024
7144
|
if (isFetching || isLoadingCatalog) {
|
|
7025
|
-
return /* @__PURE__ */
|
|
7145
|
+
return /* @__PURE__ */ React92.createElement(import_ui75.CircularProgress, { role: "progressbar" });
|
|
7026
7146
|
}
|
|
7027
7147
|
if (selectedIcon) {
|
|
7028
|
-
return /* @__PURE__ */
|
|
7148
|
+
return /* @__PURE__ */ React92.createElement(IconPreview, { icon: selectedIcon });
|
|
7029
7149
|
}
|
|
7030
7150
|
if (shouldLoadIconCatalog) {
|
|
7031
|
-
return /* @__PURE__ */
|
|
7151
|
+
return /* @__PURE__ */ React92.createElement(IconPreviewPlaceholder, null);
|
|
7032
7152
|
}
|
|
7033
|
-
return /* @__PURE__ */
|
|
7153
|
+
return /* @__PURE__ */ React92.createElement(SvgPreview, { src });
|
|
7034
7154
|
};
|
|
7035
|
-
var IconPreview = ({ icon }) => /* @__PURE__ */
|
|
7155
|
+
var IconPreview = ({ icon }) => /* @__PURE__ */ React92.createElement(import_ui75.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React92.createElement(
|
|
7036
7156
|
FontAwesomeGlyph,
|
|
7037
7157
|
{
|
|
7038
7158
|
icon,
|
|
7039
7159
|
size: ICON_PREVIEW_SIZE,
|
|
7040
7160
|
color: ICON_PREVIEW_COLOR,
|
|
7041
|
-
label: (0,
|
|
7161
|
+
label: (0, import_i18n40.__)("Preview icon", "elementor")
|
|
7042
7162
|
}
|
|
7043
7163
|
));
|
|
7044
|
-
var IconPreviewPlaceholder = () => /* @__PURE__ */
|
|
7045
|
-
|
|
7164
|
+
var IconPreviewPlaceholder = () => /* @__PURE__ */ React92.createElement(
|
|
7165
|
+
import_ui75.Box,
|
|
7046
7166
|
{
|
|
7047
7167
|
"aria-hidden": true,
|
|
7048
7168
|
sx: {
|
|
@@ -7052,12 +7172,12 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React91.createElement(
|
|
|
7052
7172
|
}
|
|
7053
7173
|
}
|
|
7054
7174
|
);
|
|
7055
|
-
var SvgPreview = ({ src }) => /* @__PURE__ */
|
|
7056
|
-
|
|
7175
|
+
var SvgPreview = ({ src }) => /* @__PURE__ */ React92.createElement(
|
|
7176
|
+
import_ui75.CardMedia,
|
|
7057
7177
|
{
|
|
7058
7178
|
component: "img",
|
|
7059
7179
|
image: src,
|
|
7060
|
-
alt: (0,
|
|
7180
|
+
alt: (0, import_i18n40.__)("Preview SVG", "elementor"),
|
|
7061
7181
|
sx: { maxHeight: "140px", width: `${ICON_PREVIEW_SIZE}px`, color: ICON_PREVIEW_COLOR }
|
|
7062
7182
|
}
|
|
7063
7183
|
);
|
|
@@ -7067,7 +7187,7 @@ var TILE_SIZE = 8;
|
|
|
7067
7187
|
var TILE_WHITE = "transparent";
|
|
7068
7188
|
var TILE_BLACK = "#c1c1c1";
|
|
7069
7189
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
7070
|
-
var StyledCard = (0,
|
|
7190
|
+
var StyledCard = (0, import_ui76.styled)(import_ui76.Card)`
|
|
7071
7191
|
position: relative;
|
|
7072
7192
|
background-color: white;
|
|
7073
7193
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
@@ -7078,7 +7198,7 @@ var StyledCard = (0, import_ui75.styled)(import_ui75.Card)`
|
|
|
7078
7198
|
border: none;
|
|
7079
7199
|
`;
|
|
7080
7200
|
var PREVIEW_ICON_COLOR = "#000000";
|
|
7081
|
-
var StyledCardMediaContainer = (0,
|
|
7201
|
+
var StyledCardMediaContainer = (0, import_ui76.styled)(import_ui76.Stack)`
|
|
7082
7202
|
position: relative;
|
|
7083
7203
|
height: 140px;
|
|
7084
7204
|
object-fit: contain;
|
|
@@ -7091,7 +7211,7 @@ var StyledCardMediaContainer = (0, import_ui75.styled)(import_ui75.Stack)`
|
|
|
7091
7211
|
var MODE_BROWSE = { mode: "browse" };
|
|
7092
7212
|
var MODE_UPLOAD = { mode: "upload" };
|
|
7093
7213
|
var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
7094
|
-
const groupLabel = label ?? (0,
|
|
7214
|
+
const groupLabel = label ?? (0, import_i18n41.__)("SVG", "elementor");
|
|
7095
7215
|
const { value: svgValue, setValue: setSvgValue, placeholder: svgPlaceholder } = useBoundProp(import_editor_props35.svgSrcPropTypeUtil);
|
|
7096
7216
|
const { value: iconValue, setValue: setIconValue, placeholder: iconPlaceholder } = useBoundProp(import_editor_props35.iconPropTypeUtil);
|
|
7097
7217
|
const id = svgValue?.id;
|
|
@@ -7101,11 +7221,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7101
7221
|
const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(previewSvgValue?.id?.value || null);
|
|
7102
7222
|
const src = attachment?.url ?? previewSvgValue?.url?.value ?? null;
|
|
7103
7223
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
7104
|
-
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0,
|
|
7105
|
-
const iconLibraryPopoverState = (0,
|
|
7106
|
-
const controlContainerRef = (0,
|
|
7107
|
-
const buttonGroupRef = (0,
|
|
7108
|
-
const [iconLibraryAnchor, setIconLibraryAnchor] = (0,
|
|
7224
|
+
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react57.useState)(false);
|
|
7225
|
+
const iconLibraryPopoverState = (0, import_ui76.usePopupState)({ variant: "popover" });
|
|
7226
|
+
const controlContainerRef = (0, import_react57.useRef)(null);
|
|
7227
|
+
const buttonGroupRef = (0, import_react57.useRef)(null);
|
|
7228
|
+
const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react57.useState)(null);
|
|
7109
7229
|
const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
|
|
7110
7230
|
const selectedIconClass = showIconLibrary && typeof previewIconValue?.value?.value === "string" ? previewIconValue.value.value : null;
|
|
7111
7231
|
const selectedIconLibrary = showIconLibrary && typeof previewIconValue?.library?.value === "string" ? previewIconValue.library.value : null;
|
|
@@ -7157,7 +7277,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7157
7277
|
setIconLibraryAnchor(anchor);
|
|
7158
7278
|
iconLibraryPopoverState.open(event);
|
|
7159
7279
|
};
|
|
7160
|
-
(0,
|
|
7280
|
+
(0, import_react57.useEffect)(() => {
|
|
7161
7281
|
if (!iconLibraryPopoverState.isOpen) {
|
|
7162
7282
|
return;
|
|
7163
7283
|
}
|
|
@@ -7173,8 +7293,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7173
7293
|
};
|
|
7174
7294
|
}, [iconLibraryPopoverState.isOpen]);
|
|
7175
7295
|
const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
|
|
7176
|
-
return /* @__PURE__ */
|
|
7177
|
-
|
|
7296
|
+
return /* @__PURE__ */ React93.createElement(import_ui76.Stack, { gap: 1, "aria-label": (0, import_i18n41.__)("SVG control", "elementor") }, /* @__PURE__ */ React93.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React93.createElement(
|
|
7297
|
+
import_ui76.Popover,
|
|
7178
7298
|
{
|
|
7179
7299
|
disableScrollLock: true,
|
|
7180
7300
|
open: iconLibraryPopoverState.isOpen,
|
|
@@ -7193,7 +7313,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7193
7313
|
}
|
|
7194
7314
|
}
|
|
7195
7315
|
},
|
|
7196
|
-
/* @__PURE__ */
|
|
7316
|
+
/* @__PURE__ */ React93.createElement(
|
|
7197
7317
|
IconLibraryPopover,
|
|
7198
7318
|
{
|
|
7199
7319
|
open: iconLibraryPopoverState.isOpen,
|
|
@@ -7204,14 +7324,14 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7204
7324
|
width: iconLibraryWidth
|
|
7205
7325
|
}
|
|
7206
7326
|
)
|
|
7207
|
-
) : null, /* @__PURE__ */
|
|
7208
|
-
|
|
7327
|
+
) : null, /* @__PURE__ */ React93.createElement(
|
|
7328
|
+
import_ui76.Box,
|
|
7209
7329
|
{
|
|
7210
7330
|
ref: controlContainerRef,
|
|
7211
7331
|
"data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
|
|
7212
7332
|
sx: { width: "100%" }
|
|
7213
7333
|
},
|
|
7214
|
-
/* @__PURE__ */
|
|
7334
|
+
/* @__PURE__ */ React93.createElement(ControlActions, null, /* @__PURE__ */ React93.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React93.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React93.createElement(
|
|
7215
7335
|
SvgMediaPreview,
|
|
7216
7336
|
{
|
|
7217
7337
|
isFetching,
|
|
@@ -7219,8 +7339,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7219
7339
|
iconClassName: selectedIconClass,
|
|
7220
7340
|
iconLibrary: selectedIconLibrary
|
|
7221
7341
|
}
|
|
7222
|
-
)), /* @__PURE__ */
|
|
7223
|
-
|
|
7342
|
+
)), /* @__PURE__ */ React93.createElement(
|
|
7343
|
+
import_ui76.CardOverlay,
|
|
7224
7344
|
{
|
|
7225
7345
|
sx: {
|
|
7226
7346
|
"&:hover": {
|
|
@@ -7228,7 +7348,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7228
7348
|
}
|
|
7229
7349
|
}
|
|
7230
7350
|
},
|
|
7231
|
-
/* @__PURE__ */
|
|
7351
|
+
/* @__PURE__ */ React93.createElement(
|
|
7232
7352
|
SvgMediaOverlay,
|
|
7233
7353
|
{
|
|
7234
7354
|
label: groupLabel,
|
|
@@ -7238,23 +7358,23 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
|
|
|
7238
7358
|
onSelectSvg: handleSelectSvg,
|
|
7239
7359
|
onUpload: handleUpload,
|
|
7240
7360
|
onOpenIconLibrary: handleOpenIconLibrary,
|
|
7241
|
-
infotipTitle: (0,
|
|
7242
|
-
infotipDescription: /* @__PURE__ */
|
|
7361
|
+
infotipTitle: (0, import_i18n41.__)("Sorry, you can't upload that file yet.", "elementor"),
|
|
7362
|
+
infotipDescription: /* @__PURE__ */ React93.createElement(UnfilteredUploadInfotipDescription, null)
|
|
7243
7363
|
}
|
|
7244
7364
|
)
|
|
7245
7365
|
)))
|
|
7246
7366
|
));
|
|
7247
7367
|
});
|
|
7248
|
-
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */
|
|
7368
|
+
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, (0, import_i18n41.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React93.createElement("br", null), (0, import_i18n41.__)("file uploads.", "elementor"));
|
|
7249
7369
|
|
|
7250
7370
|
// src/controls/video-media-control.tsx
|
|
7251
|
-
var
|
|
7371
|
+
var React94 = __toESM(require("react"));
|
|
7252
7372
|
var import_editor_props36 = require("@elementor/editor-props");
|
|
7253
|
-
var
|
|
7373
|
+
var import_ui77 = require("@elementor/ui");
|
|
7254
7374
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
7255
|
-
var
|
|
7375
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
7256
7376
|
var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
|
|
7257
|
-
var VideoMediaControl = createControl(({ label = (0,
|
|
7377
|
+
var VideoMediaControl = createControl(({ label = (0, import_i18n42.__)("Video", "elementor") }) => {
|
|
7258
7378
|
const { value, setValue, propType } = useBoundProp(import_editor_props36.videoSrcPropTypeUtil);
|
|
7259
7379
|
const { id, url } = value ?? {};
|
|
7260
7380
|
const { data: attachment, isFetching } = (0, import_wp_media3.useWpMediaAttachment)(id?.value || null);
|
|
@@ -7282,8 +7402,8 @@ var VideoMediaControl = createControl(({ label = (0, import_i18n41.__)("Video",
|
|
|
7282
7402
|
});
|
|
7283
7403
|
}
|
|
7284
7404
|
});
|
|
7285
|
-
return /* @__PURE__ */
|
|
7286
|
-
|
|
7405
|
+
return /* @__PURE__ */ React94.createElement(ControlActions, null, /* @__PURE__ */ React94.createElement(import_ui77.Card, { variant: "outlined" }, /* @__PURE__ */ React94.createElement(
|
|
7406
|
+
import_ui77.CardMedia,
|
|
7287
7407
|
{
|
|
7288
7408
|
sx: {
|
|
7289
7409
|
height: 140,
|
|
@@ -7297,8 +7417,8 @@ var VideoMediaControl = createControl(({ label = (0, import_i18n41.__)("Video",
|
|
|
7297
7417
|
alignItems: "center"
|
|
7298
7418
|
}
|
|
7299
7419
|
},
|
|
7300
|
-
/* @__PURE__ */
|
|
7301
|
-
), /* @__PURE__ */
|
|
7420
|
+
/* @__PURE__ */ React94.createElement(VideoPreview, { isFetching, videoUrl })
|
|
7421
|
+
), /* @__PURE__ */ React94.createElement(import_ui77.CardOverlay, null, /* @__PURE__ */ React94.createElement(
|
|
7302
7422
|
MediaSelectActions,
|
|
7303
7423
|
{
|
|
7304
7424
|
label,
|
|
@@ -7310,13 +7430,13 @@ var VideoMediaControl = createControl(({ label = (0, import_i18n41.__)("Video",
|
|
|
7310
7430
|
});
|
|
7311
7431
|
var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
7312
7432
|
if (isFetching) {
|
|
7313
|
-
return /* @__PURE__ */
|
|
7433
|
+
return /* @__PURE__ */ React94.createElement(import_ui77.CircularProgress, null);
|
|
7314
7434
|
}
|
|
7315
7435
|
if (videoUrl) {
|
|
7316
|
-
return /* @__PURE__ */
|
|
7436
|
+
return /* @__PURE__ */ React94.createElement(
|
|
7317
7437
|
"video",
|
|
7318
7438
|
{
|
|
7319
|
-
"aria-label": (0,
|
|
7439
|
+
"aria-label": (0, import_i18n42.__)("Video preview", "elementor"),
|
|
7320
7440
|
src: videoUrl,
|
|
7321
7441
|
muted: true,
|
|
7322
7442
|
preload: "metadata",
|
|
@@ -7329,30 +7449,30 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
|
7329
7449
|
}
|
|
7330
7450
|
);
|
|
7331
7451
|
}
|
|
7332
|
-
return /* @__PURE__ */
|
|
7452
|
+
return /* @__PURE__ */ React94.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
|
|
7333
7453
|
};
|
|
7334
7454
|
|
|
7335
7455
|
// src/controls/background-control/background-control.tsx
|
|
7336
|
-
var
|
|
7456
|
+
var React101 = __toESM(require("react"));
|
|
7337
7457
|
var import_editor_props42 = require("@elementor/editor-props");
|
|
7338
|
-
var
|
|
7339
|
-
var
|
|
7458
|
+
var import_ui85 = require("@elementor/ui");
|
|
7459
|
+
var import_i18n48 = require("@wordpress/i18n");
|
|
7340
7460
|
|
|
7341
7461
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
7342
|
-
var
|
|
7462
|
+
var React100 = __toESM(require("react"));
|
|
7343
7463
|
var import_editor_props41 = require("@elementor/editor-props");
|
|
7344
|
-
var
|
|
7464
|
+
var import_ui84 = require("@elementor/ui");
|
|
7345
7465
|
var import_wp_media4 = require("@elementor/wp-media");
|
|
7346
|
-
var
|
|
7466
|
+
var import_i18n47 = require("@wordpress/i18n");
|
|
7347
7467
|
|
|
7348
7468
|
// src/env.ts
|
|
7349
7469
|
var import_env = require("@elementor/env");
|
|
7350
7470
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
7351
7471
|
|
|
7352
7472
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
7353
|
-
var
|
|
7473
|
+
var React95 = __toESM(require("react"));
|
|
7354
7474
|
var import_editor_props37 = require("@elementor/editor-props");
|
|
7355
|
-
var
|
|
7475
|
+
var import_ui78 = require("@elementor/ui");
|
|
7356
7476
|
var BackgroundGradientColorControl = createControl(() => {
|
|
7357
7477
|
const { value, setValue } = useBoundProp(import_editor_props37.backgroundGradientOverlayPropTypeUtil);
|
|
7358
7478
|
const handleChange = (newValue) => {
|
|
@@ -7390,8 +7510,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
7390
7510
|
positions: positions?.value.split(" ")
|
|
7391
7511
|
};
|
|
7392
7512
|
};
|
|
7393
|
-
return /* @__PURE__ */
|
|
7394
|
-
|
|
7513
|
+
return /* @__PURE__ */ React95.createElement(
|
|
7514
|
+
import_ui78.UnstableGradientBox,
|
|
7395
7515
|
{
|
|
7396
7516
|
sx: { width: "auto", padding: 1.5 },
|
|
7397
7517
|
value: normalizeValue(),
|
|
@@ -7415,53 +7535,53 @@ var initialBackgroundGradientOverlay = import_editor_props37.backgroundGradientO
|
|
|
7415
7535
|
});
|
|
7416
7536
|
|
|
7417
7537
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
7418
|
-
var
|
|
7419
|
-
var
|
|
7420
|
-
var
|
|
7421
|
-
var
|
|
7538
|
+
var React96 = __toESM(require("react"));
|
|
7539
|
+
var import_icons28 = require("@elementor/icons");
|
|
7540
|
+
var import_ui79 = require("@elementor/ui");
|
|
7541
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
7422
7542
|
var attachmentControlOptions = [
|
|
7423
7543
|
{
|
|
7424
7544
|
value: "fixed",
|
|
7425
|
-
label: (0,
|
|
7426
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7545
|
+
label: (0, import_i18n43.__)("Fixed", "elementor"),
|
|
7546
|
+
renderContent: ({ size }) => /* @__PURE__ */ React96.createElement(import_icons28.PinIcon, { fontSize: size }),
|
|
7427
7547
|
showTooltip: true
|
|
7428
7548
|
},
|
|
7429
7549
|
{
|
|
7430
7550
|
value: "scroll",
|
|
7431
|
-
label: (0,
|
|
7432
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7551
|
+
label: (0, import_i18n43.__)("Scroll", "elementor"),
|
|
7552
|
+
renderContent: ({ size }) => /* @__PURE__ */ React96.createElement(import_icons28.PinnedOffIcon, { fontSize: size }),
|
|
7433
7553
|
showTooltip: true
|
|
7434
7554
|
}
|
|
7435
7555
|
];
|
|
7436
7556
|
var BackgroundImageOverlayAttachment = () => {
|
|
7437
|
-
return /* @__PURE__ */
|
|
7557
|
+
return /* @__PURE__ */ React96.createElement(PopoverGridContainer, null, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlFormLabel, null, (0, import_i18n43.__)("Attachment", "elementor"))), /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React96.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
7438
7558
|
};
|
|
7439
7559
|
|
|
7440
7560
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
7441
|
-
var
|
|
7442
|
-
var
|
|
7561
|
+
var React97 = __toESM(require("react"));
|
|
7562
|
+
var import_react58 = require("react");
|
|
7443
7563
|
var import_editor_props38 = require("@elementor/editor-props");
|
|
7444
|
-
var
|
|
7445
|
-
var
|
|
7446
|
-
var
|
|
7447
|
-
var
|
|
7564
|
+
var import_editor_ui13 = require("@elementor/editor-ui");
|
|
7565
|
+
var import_icons29 = require("@elementor/icons");
|
|
7566
|
+
var import_ui80 = require("@elementor/ui");
|
|
7567
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
7448
7568
|
var backgroundPositionOptions = [
|
|
7449
|
-
{ label: (0,
|
|
7450
|
-
{ label: (0,
|
|
7451
|
-
{ label: (0,
|
|
7452
|
-
{ label: (0,
|
|
7453
|
-
{ label: (0,
|
|
7454
|
-
{ label: (0,
|
|
7455
|
-
{ label: (0,
|
|
7456
|
-
{ label: (0,
|
|
7457
|
-
{ label: (0,
|
|
7458
|
-
{ label: (0,
|
|
7569
|
+
{ label: (0, import_i18n44.__)("Center center", "elementor"), value: "center center" },
|
|
7570
|
+
{ label: (0, import_i18n44.__)("Center left", "elementor"), value: "center left" },
|
|
7571
|
+
{ label: (0, import_i18n44.__)("Center right", "elementor"), value: "center right" },
|
|
7572
|
+
{ label: (0, import_i18n44.__)("Top center", "elementor"), value: "top center" },
|
|
7573
|
+
{ label: (0, import_i18n44.__)("Top left", "elementor"), value: "top left" },
|
|
7574
|
+
{ label: (0, import_i18n44.__)("Top right", "elementor"), value: "top right" },
|
|
7575
|
+
{ label: (0, import_i18n44.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
7576
|
+
{ label: (0, import_i18n44.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
7577
|
+
{ label: (0, import_i18n44.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
7578
|
+
{ label: (0, import_i18n44.__)("Custom", "elementor"), value: "custom" }
|
|
7459
7579
|
];
|
|
7460
7580
|
var BackgroundImageOverlayPosition = () => {
|
|
7461
7581
|
const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
|
|
7462
7582
|
const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
|
|
7463
7583
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
7464
|
-
const rowRef = (0,
|
|
7584
|
+
const rowRef = (0, import_react58.useRef)(null);
|
|
7465
7585
|
const handlePositionChange = (event) => {
|
|
7466
7586
|
const value = event.target.value || null;
|
|
7467
7587
|
if (value === "custom") {
|
|
@@ -7470,8 +7590,8 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7470
7590
|
stringPropContext.setValue(value);
|
|
7471
7591
|
}
|
|
7472
7592
|
};
|
|
7473
|
-
return /* @__PURE__ */
|
|
7474
|
-
|
|
7593
|
+
return /* @__PURE__ */ React97.createElement(import_ui80.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(PopoverGridContainer, null, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlFormLabel, null, (0, import_i18n44.__)("Position", "elementor"))), /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React97.createElement(ControlActions, null, /* @__PURE__ */ React97.createElement(
|
|
7594
|
+
import_ui80.Select,
|
|
7475
7595
|
{
|
|
7476
7596
|
fullWidth: true,
|
|
7477
7597
|
size: "tiny",
|
|
@@ -7479,18 +7599,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7479
7599
|
disabled: stringPropContext.disabled,
|
|
7480
7600
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
7481
7601
|
},
|
|
7482
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
7483
|
-
))))), isCustom ? /* @__PURE__ */
|
|
7602
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React97.createElement(import_editor_ui13.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
7603
|
+
))))), isCustom ? /* @__PURE__ */ React97.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React97.createElement(
|
|
7484
7604
|
SizeControl,
|
|
7485
7605
|
{
|
|
7486
|
-
startIcon: /* @__PURE__ */
|
|
7606
|
+
startIcon: /* @__PURE__ */ React97.createElement(import_icons29.LetterXIcon, { fontSize: "tiny" }),
|
|
7487
7607
|
anchorRef: rowRef,
|
|
7488
7608
|
min: -Number.MAX_SAFE_INTEGER
|
|
7489
7609
|
}
|
|
7490
|
-
))), /* @__PURE__ */
|
|
7610
|
+
))), /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React97.createElement(
|
|
7491
7611
|
SizeControl,
|
|
7492
7612
|
{
|
|
7493
|
-
startIcon: /* @__PURE__ */
|
|
7613
|
+
startIcon: /* @__PURE__ */ React97.createElement(import_icons29.LetterYIcon, { fontSize: "tiny" }),
|
|
7494
7614
|
anchorRef: rowRef,
|
|
7495
7615
|
min: -Number.MAX_SAFE_INTEGER
|
|
7496
7616
|
}
|
|
@@ -7498,70 +7618,70 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7498
7618
|
};
|
|
7499
7619
|
|
|
7500
7620
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
7501
|
-
var
|
|
7502
|
-
var
|
|
7503
|
-
var
|
|
7504
|
-
var
|
|
7621
|
+
var React98 = __toESM(require("react"));
|
|
7622
|
+
var import_icons30 = require("@elementor/icons");
|
|
7623
|
+
var import_ui81 = require("@elementor/ui");
|
|
7624
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
7505
7625
|
var repeatControlOptions = [
|
|
7506
7626
|
{
|
|
7507
7627
|
value: "repeat",
|
|
7508
|
-
label: (0,
|
|
7509
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7628
|
+
label: (0, import_i18n45.__)("Repeat", "elementor"),
|
|
7629
|
+
renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(import_icons30.GridDotsIcon, { fontSize: size }),
|
|
7510
7630
|
showTooltip: true
|
|
7511
7631
|
},
|
|
7512
7632
|
{
|
|
7513
7633
|
value: "repeat-x",
|
|
7514
|
-
label: (0,
|
|
7515
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7634
|
+
label: (0, import_i18n45.__)("Repeat-x", "elementor"),
|
|
7635
|
+
renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(import_icons30.DotsHorizontalIcon, { fontSize: size }),
|
|
7516
7636
|
showTooltip: true
|
|
7517
7637
|
},
|
|
7518
7638
|
{
|
|
7519
7639
|
value: "repeat-y",
|
|
7520
|
-
label: (0,
|
|
7521
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7640
|
+
label: (0, import_i18n45.__)("Repeat-y", "elementor"),
|
|
7641
|
+
renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(import_icons30.DotsVerticalIcon, { fontSize: size }),
|
|
7522
7642
|
showTooltip: true
|
|
7523
7643
|
},
|
|
7524
7644
|
{
|
|
7525
7645
|
value: "no-repeat",
|
|
7526
|
-
label: (0,
|
|
7527
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7646
|
+
label: (0, import_i18n45.__)("No-repeat", "elementor"),
|
|
7647
|
+
renderContent: ({ size }) => /* @__PURE__ */ React98.createElement(import_icons30.XIcon, { fontSize: size }),
|
|
7528
7648
|
showTooltip: true
|
|
7529
7649
|
}
|
|
7530
7650
|
];
|
|
7531
7651
|
var BackgroundImageOverlayRepeat = () => {
|
|
7532
|
-
return /* @__PURE__ */
|
|
7652
|
+
return /* @__PURE__ */ React98.createElement(PopoverGridContainer, null, /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(ControlFormLabel, null, (0, import_i18n45.__)("Repeat", "elementor"))), /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React98.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
7533
7653
|
};
|
|
7534
7654
|
|
|
7535
7655
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
7536
|
-
var
|
|
7537
|
-
var
|
|
7656
|
+
var React99 = __toESM(require("react"));
|
|
7657
|
+
var import_react59 = require("react");
|
|
7538
7658
|
var import_editor_props39 = require("@elementor/editor-props");
|
|
7539
|
-
var
|
|
7540
|
-
var
|
|
7541
|
-
var
|
|
7659
|
+
var import_icons31 = require("@elementor/icons");
|
|
7660
|
+
var import_ui82 = require("@elementor/ui");
|
|
7661
|
+
var import_i18n46 = require("@wordpress/i18n");
|
|
7542
7662
|
var sizeControlOptions = [
|
|
7543
7663
|
{
|
|
7544
7664
|
value: "auto",
|
|
7545
|
-
label: (0,
|
|
7546
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7665
|
+
label: (0, import_i18n46.__)("Auto", "elementor"),
|
|
7666
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(import_icons31.LetterAIcon, { fontSize: size }),
|
|
7547
7667
|
showTooltip: true
|
|
7548
7668
|
},
|
|
7549
7669
|
{
|
|
7550
7670
|
value: "cover",
|
|
7551
|
-
label: (0,
|
|
7552
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7671
|
+
label: (0, import_i18n46.__)("Cover", "elementor"),
|
|
7672
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(import_icons31.ArrowsMaximizeIcon, { fontSize: size }),
|
|
7553
7673
|
showTooltip: true
|
|
7554
7674
|
},
|
|
7555
7675
|
{
|
|
7556
7676
|
value: "contain",
|
|
7557
|
-
label: (0,
|
|
7558
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7677
|
+
label: (0, import_i18n46.__)("Contain", "elementor"),
|
|
7678
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(import_icons31.ArrowBarBothIcon, { fontSize: size }),
|
|
7559
7679
|
showTooltip: true
|
|
7560
7680
|
},
|
|
7561
7681
|
{
|
|
7562
7682
|
value: "custom",
|
|
7563
|
-
label: (0,
|
|
7564
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7683
|
+
label: (0, import_i18n46.__)("Custom", "elementor"),
|
|
7684
|
+
renderContent: ({ size }) => /* @__PURE__ */ React99.createElement(import_icons31.PencilIcon, { fontSize: size }),
|
|
7565
7685
|
showTooltip: true
|
|
7566
7686
|
}
|
|
7567
7687
|
];
|
|
@@ -7569,7 +7689,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7569
7689
|
const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
|
|
7570
7690
|
const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
|
|
7571
7691
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
7572
|
-
const rowRef = (0,
|
|
7692
|
+
const rowRef = (0, import_react59.useRef)(null);
|
|
7573
7693
|
const handleSizeChange = (size) => {
|
|
7574
7694
|
if (size === "custom") {
|
|
7575
7695
|
backgroundImageScaleContext.setValue({ width: null, height: null });
|
|
@@ -7577,7 +7697,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7577
7697
|
stringPropContext.setValue(size);
|
|
7578
7698
|
}
|
|
7579
7699
|
};
|
|
7580
|
-
return /* @__PURE__ */
|
|
7700
|
+
return /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(PopoverGridContainer, null, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, (0, import_i18n46.__)("Size", "elementor"))), /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React99.createElement(
|
|
7581
7701
|
ControlToggleButtonGroup,
|
|
7582
7702
|
{
|
|
7583
7703
|
exclusive: true,
|
|
@@ -7586,17 +7706,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7586
7706
|
disabled: stringPropContext.disabled,
|
|
7587
7707
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
7588
7708
|
}
|
|
7589
|
-
)))), isCustom ? /* @__PURE__ */
|
|
7709
|
+
)))), isCustom ? /* @__PURE__ */ React99.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React99.createElement(PopoverGridContainer, null, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React99.createElement(
|
|
7590
7710
|
SizeControl,
|
|
7591
7711
|
{
|
|
7592
|
-
startIcon: /* @__PURE__ */
|
|
7712
|
+
startIcon: /* @__PURE__ */ React99.createElement(import_icons31.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
7593
7713
|
extendedOptions: ["auto"],
|
|
7594
7714
|
anchorRef: rowRef
|
|
7595
7715
|
}
|
|
7596
|
-
))), /* @__PURE__ */
|
|
7716
|
+
))), /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React99.createElement(
|
|
7597
7717
|
SizeControl,
|
|
7598
7718
|
{
|
|
7599
|
-
startIcon: /* @__PURE__ */
|
|
7719
|
+
startIcon: /* @__PURE__ */ React99.createElement(import_icons31.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
7600
7720
|
extendedOptions: ["auto"],
|
|
7601
7721
|
anchorRef: rowRef
|
|
7602
7722
|
}
|
|
@@ -7604,9 +7724,9 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7604
7724
|
};
|
|
7605
7725
|
|
|
7606
7726
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
7607
|
-
var
|
|
7727
|
+
var import_react60 = require("react");
|
|
7608
7728
|
var import_editor_props40 = require("@elementor/editor-props");
|
|
7609
|
-
var
|
|
7729
|
+
var import_ui83 = require("@elementor/ui");
|
|
7610
7730
|
var useBackgroundTabsHistory = ({
|
|
7611
7731
|
color: initialBackgroundColorOverlay2,
|
|
7612
7732
|
image: initialBackgroundImageOverlay,
|
|
@@ -7624,8 +7744,8 @@ var useBackgroundTabsHistory = ({
|
|
|
7624
7744
|
}
|
|
7625
7745
|
return "image";
|
|
7626
7746
|
};
|
|
7627
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
7628
|
-
const valuesHistory = (0,
|
|
7747
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui83.useTabs)(getCurrentOverlayType());
|
|
7748
|
+
const valuesHistory = (0, import_react60.useRef)({
|
|
7629
7749
|
image: initialBackgroundImageOverlay,
|
|
7630
7750
|
color: initialBackgroundColorOverlay2,
|
|
7631
7751
|
gradient: initialBackgroundGradientOverlay2
|
|
@@ -7693,29 +7813,29 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
7693
7813
|
}
|
|
7694
7814
|
});
|
|
7695
7815
|
var backgroundResolutionOptions = [
|
|
7696
|
-
{ label: (0,
|
|
7697
|
-
{ label: (0,
|
|
7698
|
-
{ label: (0,
|
|
7699
|
-
{ label: (0,
|
|
7816
|
+
{ label: (0, import_i18n47.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
7817
|
+
{ label: (0, import_i18n47.__)("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
7818
|
+
{ label: (0, import_i18n47.__)("Large 1024 x 1024", "elementor"), value: "large" },
|
|
7819
|
+
{ label: (0, import_i18n47.__)("Full", "elementor"), value: "full" }
|
|
7700
7820
|
];
|
|
7701
7821
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
7702
7822
|
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props41.backgroundOverlayPropTypeUtil);
|
|
7703
|
-
return /* @__PURE__ */
|
|
7823
|
+
return /* @__PURE__ */ React100.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React100.createElement(
|
|
7704
7824
|
ControlRepeater,
|
|
7705
7825
|
{
|
|
7706
7826
|
initial: getInitialBackgroundOverlay(),
|
|
7707
7827
|
propTypeUtil: import_editor_props41.backgroundOverlayPropTypeUtil
|
|
7708
7828
|
},
|
|
7709
|
-
/* @__PURE__ */
|
|
7710
|
-
/* @__PURE__ */
|
|
7829
|
+
/* @__PURE__ */ React100.createElement(RepeaterHeader, { label: (0, import_i18n47.__)("Overlay", "elementor") }, /* @__PURE__ */ React100.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
7830
|
+
/* @__PURE__ */ React100.createElement(ItemsContainer, null, /* @__PURE__ */ React100.createElement(
|
|
7711
7831
|
Item,
|
|
7712
7832
|
{
|
|
7713
7833
|
Icon: ItemIcon2,
|
|
7714
7834
|
Label: ItemLabel3,
|
|
7715
|
-
actions: /* @__PURE__ */
|
|
7835
|
+
actions: /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(DuplicateItemAction, null), /* @__PURE__ */ React100.createElement(DisableItemAction, null), /* @__PURE__ */ React100.createElement(RemoveItemAction, null))
|
|
7716
7836
|
}
|
|
7717
7837
|
)),
|
|
7718
|
-
/* @__PURE__ */
|
|
7838
|
+
/* @__PURE__ */ React100.createElement(EditItemPopover, null, /* @__PURE__ */ React100.createElement(ItemContent2, null))
|
|
7719
7839
|
));
|
|
7720
7840
|
});
|
|
7721
7841
|
var ItemContent2 = () => {
|
|
@@ -7725,27 +7845,27 @@ var ItemContent2 = () => {
|
|
|
7725
7845
|
gradient: initialBackgroundGradientOverlay.value
|
|
7726
7846
|
});
|
|
7727
7847
|
const { rowRef } = useRepeaterContext();
|
|
7728
|
-
return /* @__PURE__ */
|
|
7729
|
-
|
|
7848
|
+
return /* @__PURE__ */ React100.createElement(import_ui84.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React100.createElement(import_ui84.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React100.createElement(
|
|
7849
|
+
import_ui84.Tabs,
|
|
7730
7850
|
{
|
|
7731
7851
|
size: "small",
|
|
7732
7852
|
variant: "fullWidth",
|
|
7733
7853
|
...getTabsProps(),
|
|
7734
|
-
"aria-label": (0,
|
|
7854
|
+
"aria-label": (0, import_i18n47.__)("Background Overlay", "elementor")
|
|
7735
7855
|
},
|
|
7736
|
-
/* @__PURE__ */
|
|
7737
|
-
/* @__PURE__ */
|
|
7738
|
-
/* @__PURE__ */
|
|
7739
|
-
)), /* @__PURE__ */
|
|
7856
|
+
/* @__PURE__ */ React100.createElement(import_ui84.Tab, { label: (0, import_i18n47.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
7857
|
+
/* @__PURE__ */ React100.createElement(import_ui84.Tab, { label: (0, import_i18n47.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
7858
|
+
/* @__PURE__ */ React100.createElement(import_ui84.Tab, { label: (0, import_i18n47.__)("Color", "elementor"), ...getTabProps("color") })
|
|
7859
|
+
)), /* @__PURE__ */ React100.createElement(import_ui84.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React100.createElement(PopoverContent, null, /* @__PURE__ */ React100.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React100.createElement(import_ui84.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React100.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React100.createElement(import_ui84.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React100.createElement(PopoverContent, null, /* @__PURE__ */ React100.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
7740
7860
|
};
|
|
7741
7861
|
var ItemIcon2 = ({ value }) => {
|
|
7742
7862
|
switch (value.$$type) {
|
|
7743
7863
|
case "background-image-overlay":
|
|
7744
|
-
return /* @__PURE__ */
|
|
7864
|
+
return /* @__PURE__ */ React100.createElement(ItemIconImage, { value });
|
|
7745
7865
|
case "background-color-overlay":
|
|
7746
|
-
return /* @__PURE__ */
|
|
7866
|
+
return /* @__PURE__ */ React100.createElement(ItemIconColor, { value });
|
|
7747
7867
|
case "background-gradient-overlay":
|
|
7748
|
-
return /* @__PURE__ */
|
|
7868
|
+
return /* @__PURE__ */ React100.createElement(ItemIconGradient, { value });
|
|
7749
7869
|
default:
|
|
7750
7870
|
return null;
|
|
7751
7871
|
}
|
|
@@ -7758,12 +7878,12 @@ var extractColorFrom = (prop) => {
|
|
|
7758
7878
|
};
|
|
7759
7879
|
var ItemIconColor = ({ value: prop }) => {
|
|
7760
7880
|
const color = extractColorFrom(prop);
|
|
7761
|
-
return /* @__PURE__ */
|
|
7881
|
+
return /* @__PURE__ */ React100.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
7762
7882
|
};
|
|
7763
7883
|
var ItemIconImage = ({ value }) => {
|
|
7764
7884
|
const { imageUrl } = useImage(value);
|
|
7765
|
-
return /* @__PURE__ */
|
|
7766
|
-
|
|
7885
|
+
return /* @__PURE__ */ React100.createElement(
|
|
7886
|
+
import_ui84.CardMedia,
|
|
7767
7887
|
{
|
|
7768
7888
|
image: imageUrl,
|
|
7769
7889
|
sx: (theme) => ({
|
|
@@ -7777,43 +7897,43 @@ var ItemIconImage = ({ value }) => {
|
|
|
7777
7897
|
};
|
|
7778
7898
|
var ItemIconGradient = ({ value }) => {
|
|
7779
7899
|
const gradient = getGradientValue(value);
|
|
7780
|
-
return /* @__PURE__ */
|
|
7900
|
+
return /* @__PURE__ */ React100.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
7781
7901
|
};
|
|
7782
7902
|
var ItemLabel3 = ({ value }) => {
|
|
7783
7903
|
switch (value.$$type) {
|
|
7784
7904
|
case "background-image-overlay":
|
|
7785
|
-
return /* @__PURE__ */
|
|
7905
|
+
return /* @__PURE__ */ React100.createElement(ItemLabelImage, { value });
|
|
7786
7906
|
case "background-color-overlay":
|
|
7787
|
-
return /* @__PURE__ */
|
|
7907
|
+
return /* @__PURE__ */ React100.createElement(ItemLabelColor, { value });
|
|
7788
7908
|
case "background-gradient-overlay":
|
|
7789
|
-
return /* @__PURE__ */
|
|
7909
|
+
return /* @__PURE__ */ React100.createElement(ItemLabelGradient, { value });
|
|
7790
7910
|
default:
|
|
7791
7911
|
return null;
|
|
7792
7912
|
}
|
|
7793
7913
|
};
|
|
7794
7914
|
var ItemLabelColor = ({ value: prop }) => {
|
|
7795
7915
|
const color = extractColorFrom(prop);
|
|
7796
|
-
return /* @__PURE__ */
|
|
7916
|
+
return /* @__PURE__ */ React100.createElement("span", null, color);
|
|
7797
7917
|
};
|
|
7798
7918
|
var ItemLabelImage = ({ value }) => {
|
|
7799
7919
|
const { imageTitle } = useImage(value);
|
|
7800
|
-
return /* @__PURE__ */
|
|
7920
|
+
return /* @__PURE__ */ React100.createElement("span", null, imageTitle);
|
|
7801
7921
|
};
|
|
7802
7922
|
var ItemLabelGradient = ({ value }) => {
|
|
7803
7923
|
if (value.value.type.value === "linear") {
|
|
7804
|
-
return /* @__PURE__ */
|
|
7924
|
+
return /* @__PURE__ */ React100.createElement("span", null, (0, import_i18n47.__)("Linear Gradient", "elementor"));
|
|
7805
7925
|
}
|
|
7806
|
-
return /* @__PURE__ */
|
|
7926
|
+
return /* @__PURE__ */ React100.createElement("span", null, (0, import_i18n47.__)("Radial Gradient", "elementor"));
|
|
7807
7927
|
};
|
|
7808
7928
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
7809
7929
|
const propContext = useBoundProp(import_editor_props41.backgroundColorOverlayPropTypeUtil);
|
|
7810
|
-
return /* @__PURE__ */
|
|
7930
|
+
return /* @__PURE__ */ React100.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React100.createElement(ColorControl, { anchorEl })));
|
|
7811
7931
|
};
|
|
7812
7932
|
var ImageOverlayContent = () => {
|
|
7813
7933
|
const propContext = useBoundProp(import_editor_props41.backgroundImageOverlayPropTypeUtil);
|
|
7814
|
-
return /* @__PURE__ */
|
|
7934
|
+
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)));
|
|
7815
7935
|
};
|
|
7816
|
-
var StyledUnstableColorIndicator3 = (0,
|
|
7936
|
+
var StyledUnstableColorIndicator3 = (0, import_ui84.styled)(import_ui84.UnstableColorIndicator)(({ theme }) => ({
|
|
7817
7937
|
height: "1rem",
|
|
7818
7938
|
width: "1rem",
|
|
7819
7939
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
@@ -7852,29 +7972,29 @@ var getGradientValue = (value) => {
|
|
|
7852
7972
|
|
|
7853
7973
|
// src/controls/background-control/background-control.tsx
|
|
7854
7974
|
var clipOptions = [
|
|
7855
|
-
{ label: (0,
|
|
7856
|
-
{ label: (0,
|
|
7857
|
-
{ label: (0,
|
|
7858
|
-
{ label: (0,
|
|
7975
|
+
{ label: (0, import_i18n48.__)("Full element", "elementor"), value: "border-box" },
|
|
7976
|
+
{ label: (0, import_i18n48.__)("Padding edges", "elementor"), value: "padding-box" },
|
|
7977
|
+
{ label: (0, import_i18n48.__)("Content edges", "elementor"), value: "content-box" },
|
|
7978
|
+
{ label: (0, import_i18n48.__)("Text", "elementor"), value: "text" }
|
|
7859
7979
|
];
|
|
7860
|
-
var colorLabel = (0,
|
|
7861
|
-
var clipLabel = (0,
|
|
7980
|
+
var colorLabel = (0, import_i18n48.__)("Color", "elementor");
|
|
7981
|
+
var clipLabel = (0, import_i18n48.__)("Clipping", "elementor");
|
|
7862
7982
|
var BackgroundControl = createControl(() => {
|
|
7863
7983
|
const propContext = useBoundProp(import_editor_props42.backgroundPropTypeUtil);
|
|
7864
|
-
return /* @__PURE__ */
|
|
7984
|
+
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));
|
|
7865
7985
|
});
|
|
7866
7986
|
var BackgroundColorField = () => {
|
|
7867
|
-
return /* @__PURE__ */
|
|
7987
|
+
return /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React101.createElement(import_ui85.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React101.createElement(import_ui85.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React101.createElement(import_ui85.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ColorControl, null))));
|
|
7868
7988
|
};
|
|
7869
7989
|
var BackgroundClipField = () => {
|
|
7870
|
-
return /* @__PURE__ */
|
|
7990
|
+
return /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React101.createElement(import_ui85.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React101.createElement(import_ui85.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React101.createElement(import_ui85.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(SelectControl, { options: clipOptions }))));
|
|
7871
7991
|
};
|
|
7872
7992
|
|
|
7873
7993
|
// src/controls/repeatable-control.tsx
|
|
7874
|
-
var
|
|
7875
|
-
var
|
|
7994
|
+
var React102 = __toESM(require("react"));
|
|
7995
|
+
var import_react61 = require("react");
|
|
7876
7996
|
var import_editor_props43 = require("@elementor/editor-props");
|
|
7877
|
-
var
|
|
7997
|
+
var import_ui86 = require("@elementor/ui");
|
|
7878
7998
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
7879
7999
|
var RepeatableControl = createControl(
|
|
7880
8000
|
({
|
|
@@ -7893,11 +8013,11 @@ var RepeatableControl = createControl(
|
|
|
7893
8013
|
if (!childPropTypeUtil) {
|
|
7894
8014
|
return null;
|
|
7895
8015
|
}
|
|
7896
|
-
const childArrayPropTypeUtil2 = (0,
|
|
8016
|
+
const childArrayPropTypeUtil2 = (0, import_react61.useMemo)(
|
|
7897
8017
|
() => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
7898
8018
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
7899
8019
|
);
|
|
7900
|
-
const contextValue = (0,
|
|
8020
|
+
const contextValue = (0, import_react61.useMemo)(
|
|
7901
8021
|
() => ({
|
|
7902
8022
|
...childControlConfig,
|
|
7903
8023
|
placeholder: placeholder || "",
|
|
@@ -7907,14 +8027,14 @@ var RepeatableControl = createControl(
|
|
|
7907
8027
|
);
|
|
7908
8028
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
|
|
7909
8029
|
const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
|
|
7910
|
-
return /* @__PURE__ */
|
|
8030
|
+
return /* @__PURE__ */ React102.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React102.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React102.createElement(
|
|
7911
8031
|
ControlRepeater,
|
|
7912
8032
|
{
|
|
7913
8033
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
7914
8034
|
propTypeUtil: childArrayPropTypeUtil2,
|
|
7915
8035
|
isItemDisabled: isItemDisabled2
|
|
7916
8036
|
},
|
|
7917
|
-
/* @__PURE__ */
|
|
8037
|
+
/* @__PURE__ */ React102.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React102.createElement(
|
|
7918
8038
|
TooltipAddItemAction,
|
|
7919
8039
|
{
|
|
7920
8040
|
...addItemTooltipProps,
|
|
@@ -7922,22 +8042,22 @@ var RepeatableControl = createControl(
|
|
|
7922
8042
|
ariaLabel: repeaterLabel
|
|
7923
8043
|
}
|
|
7924
8044
|
)),
|
|
7925
|
-
/* @__PURE__ */
|
|
8045
|
+
/* @__PURE__ */ React102.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React102.createElement(
|
|
7926
8046
|
Item,
|
|
7927
8047
|
{
|
|
7928
8048
|
Icon: ItemIcon3,
|
|
7929
8049
|
Label: ItemLabel4,
|
|
7930
|
-
actions: /* @__PURE__ */
|
|
8050
|
+
actions: /* @__PURE__ */ React102.createElement(React102.Fragment, null, showDuplicate && /* @__PURE__ */ React102.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React102.createElement(DisableItemAction, null), /* @__PURE__ */ React102.createElement(RemoveItemAction, null))
|
|
7931
8051
|
}
|
|
7932
8052
|
)),
|
|
7933
|
-
/* @__PURE__ */
|
|
8053
|
+
/* @__PURE__ */ React102.createElement(EditItemPopover, null, /* @__PURE__ */ React102.createElement(Content2, null))
|
|
7934
8054
|
)));
|
|
7935
8055
|
}
|
|
7936
8056
|
);
|
|
7937
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
8057
|
+
var ItemIcon3 = () => /* @__PURE__ */ React102.createElement(React102.Fragment, null);
|
|
7938
8058
|
var Content2 = () => {
|
|
7939
8059
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
7940
|
-
return /* @__PURE__ */
|
|
8060
|
+
return /* @__PURE__ */ React102.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React102.createElement(PopoverGridContainer, null, /* @__PURE__ */ React102.createElement(ChildControl, { ...props })));
|
|
7941
8061
|
};
|
|
7942
8062
|
var interpolate = (template, data) => {
|
|
7943
8063
|
if (!data) {
|
|
@@ -8020,7 +8140,7 @@ var ItemLabel4 = ({ value }) => {
|
|
|
8020
8140
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
8021
8141
|
const isReadOnly = !!childProps?.readOnly;
|
|
8022
8142
|
const color = getTextColor(isReadOnly, showPlaceholder);
|
|
8023
|
-
return /* @__PURE__ */
|
|
8143
|
+
return /* @__PURE__ */ React102.createElement(import_ui86.Box, { component: "span", color }, label);
|
|
8024
8144
|
};
|
|
8025
8145
|
var getAllProperties = (pattern) => {
|
|
8026
8146
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -8028,11 +8148,11 @@ var getAllProperties = (pattern) => {
|
|
|
8028
8148
|
};
|
|
8029
8149
|
|
|
8030
8150
|
// src/controls/key-value-control.tsx
|
|
8031
|
-
var
|
|
8032
|
-
var
|
|
8151
|
+
var React103 = __toESM(require("react"));
|
|
8152
|
+
var import_react62 = require("react");
|
|
8033
8153
|
var import_editor_props44 = require("@elementor/editor-props");
|
|
8034
|
-
var
|
|
8035
|
-
var
|
|
8154
|
+
var import_ui87 = require("@elementor/ui");
|
|
8155
|
+
var import_i18n49 = require("@wordpress/i18n");
|
|
8036
8156
|
|
|
8037
8157
|
// src/utils/escape-html-attr.ts
|
|
8038
8158
|
var escapeHtmlAttr = (value) => {
|
|
@@ -8056,23 +8176,23 @@ var getInitialFieldValue = (fieldValue) => {
|
|
|
8056
8176
|
};
|
|
8057
8177
|
var KeyValueControl = createControl((props = {}) => {
|
|
8058
8178
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
|
|
8059
|
-
const [keyError, setKeyError] = (0,
|
|
8060
|
-
const [valueError, setValueError] = (0,
|
|
8061
|
-
const [sessionState, setSessionState] = (0,
|
|
8179
|
+
const [keyError, setKeyError] = (0, import_react62.useState)("");
|
|
8180
|
+
const [valueError, setValueError] = (0, import_react62.useState)("");
|
|
8181
|
+
const [sessionState, setSessionState] = (0, import_react62.useState)({
|
|
8062
8182
|
key: getInitialFieldValue(value?.key),
|
|
8063
8183
|
value: getInitialFieldValue(value?.value)
|
|
8064
8184
|
});
|
|
8065
|
-
const keyLabel = props.keyName || (0,
|
|
8066
|
-
const valueLabel = props.valueName || (0,
|
|
8185
|
+
const keyLabel = props.keyName || (0, import_i18n49.__)("Key", "elementor");
|
|
8186
|
+
const valueLabel = props.valueName || (0, import_i18n49.__)("Value", "elementor");
|
|
8067
8187
|
const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
|
|
8068
8188
|
keyHelper: void 0,
|
|
8069
8189
|
valueHelper: void 0
|
|
8070
8190
|
};
|
|
8071
|
-
const [keyRegex, valueRegex, errMsg] = (0,
|
|
8191
|
+
const [keyRegex, valueRegex, errMsg] = (0, import_react62.useMemo)(
|
|
8072
8192
|
() => [
|
|
8073
8193
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
8074
8194
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
8075
|
-
props.validationErrorMessage || (0,
|
|
8195
|
+
props.validationErrorMessage || (0, import_i18n49.__)("Invalid Format", "elementor")
|
|
8076
8196
|
],
|
|
8077
8197
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
8078
8198
|
);
|
|
@@ -8121,14 +8241,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8121
8241
|
});
|
|
8122
8242
|
}
|
|
8123
8243
|
};
|
|
8124
|
-
return /* @__PURE__ */
|
|
8244
|
+
return /* @__PURE__ */ React103.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React103.createElement(import_ui87.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React103.createElement(import_ui87.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React103.createElement(
|
|
8125
8245
|
TextControl,
|
|
8126
8246
|
{
|
|
8127
8247
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
8128
8248
|
error: !!keyError,
|
|
8129
8249
|
helperText: keyHelper
|
|
8130
8250
|
}
|
|
8131
|
-
)), !!keyError && /* @__PURE__ */
|
|
8251
|
+
)), !!keyError && /* @__PURE__ */ React103.createElement(import_ui87.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React103.createElement(import_ui87.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React103.createElement(
|
|
8132
8252
|
TextControl,
|
|
8133
8253
|
{
|
|
8134
8254
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -8136,27 +8256,27 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8136
8256
|
inputDisabled: !!keyError,
|
|
8137
8257
|
helperText: valueHelper
|
|
8138
8258
|
}
|
|
8139
|
-
)), !!valueError && /* @__PURE__ */
|
|
8259
|
+
)), !!valueError && /* @__PURE__ */ React103.createElement(import_ui87.FormHelperText, { error: true }, valueError))));
|
|
8140
8260
|
});
|
|
8141
8261
|
|
|
8142
8262
|
// src/controls/position-control.tsx
|
|
8143
|
-
var
|
|
8263
|
+
var React104 = __toESM(require("react"));
|
|
8144
8264
|
var import_editor_props45 = require("@elementor/editor-props");
|
|
8145
|
-
var
|
|
8146
|
-
var
|
|
8147
|
-
var
|
|
8148
|
-
var
|
|
8265
|
+
var import_editor_ui14 = require("@elementor/editor-ui");
|
|
8266
|
+
var import_icons32 = require("@elementor/icons");
|
|
8267
|
+
var import_ui88 = require("@elementor/ui");
|
|
8268
|
+
var import_i18n50 = require("@wordpress/i18n");
|
|
8149
8269
|
var positionOptions = [
|
|
8150
|
-
{ label: (0,
|
|
8151
|
-
{ label: (0,
|
|
8152
|
-
{ label: (0,
|
|
8153
|
-
{ label: (0,
|
|
8154
|
-
{ label: (0,
|
|
8155
|
-
{ label: (0,
|
|
8156
|
-
{ label: (0,
|
|
8157
|
-
{ label: (0,
|
|
8158
|
-
{ label: (0,
|
|
8159
|
-
{ label: (0,
|
|
8270
|
+
{ label: (0, import_i18n50.__)("Center center", "elementor"), value: "center center" },
|
|
8271
|
+
{ label: (0, import_i18n50.__)("Center left", "elementor"), value: "center left" },
|
|
8272
|
+
{ label: (0, import_i18n50.__)("Center right", "elementor"), value: "center right" },
|
|
8273
|
+
{ label: (0, import_i18n50.__)("Top center", "elementor"), value: "top center" },
|
|
8274
|
+
{ label: (0, import_i18n50.__)("Top left", "elementor"), value: "top left" },
|
|
8275
|
+
{ label: (0, import_i18n50.__)("Top right", "elementor"), value: "top right" },
|
|
8276
|
+
{ label: (0, import_i18n50.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
8277
|
+
{ label: (0, import_i18n50.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
8278
|
+
{ label: (0, import_i18n50.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
8279
|
+
{ label: (0, import_i18n50.__)("Custom", "elementor"), value: "custom" }
|
|
8160
8280
|
];
|
|
8161
8281
|
var PositionControl = () => {
|
|
8162
8282
|
const positionContext = useBoundProp(import_editor_props45.positionPropTypeUtil);
|
|
@@ -8171,8 +8291,8 @@ var PositionControl = () => {
|
|
|
8171
8291
|
stringPropContext.setValue(value);
|
|
8172
8292
|
}
|
|
8173
8293
|
};
|
|
8174
|
-
return /* @__PURE__ */
|
|
8175
|
-
|
|
8294
|
+
return /* @__PURE__ */ React104.createElement(import_ui88.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(ControlFormLabel, null, (0, import_i18n50.__)("Object position", "elementor"))), /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React104.createElement(
|
|
8295
|
+
import_ui88.Select,
|
|
8176
8296
|
{
|
|
8177
8297
|
size: "tiny",
|
|
8178
8298
|
displayEmpty: true,
|
|
@@ -8182,29 +8302,29 @@ var PositionControl = () => {
|
|
|
8182
8302
|
renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
|
|
8183
8303
|
fullWidth: true
|
|
8184
8304
|
},
|
|
8185
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
8186
|
-
)))), isCustom && /* @__PURE__ */
|
|
8305
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React104.createElement(import_editor_ui14.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
8306
|
+
)))), isCustom && /* @__PURE__ */ React104.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React104.createElement(
|
|
8187
8307
|
SizeControl,
|
|
8188
8308
|
{
|
|
8189
|
-
startIcon: /* @__PURE__ */
|
|
8309
|
+
startIcon: /* @__PURE__ */ React104.createElement(import_icons32.LetterXIcon, { fontSize: "tiny" }),
|
|
8190
8310
|
min: -Number.MAX_SAFE_INTEGER
|
|
8191
8311
|
}
|
|
8192
|
-
))), /* @__PURE__ */
|
|
8312
|
+
))), /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React104.createElement(
|
|
8193
8313
|
SizeControl,
|
|
8194
8314
|
{
|
|
8195
|
-
startIcon: /* @__PURE__ */
|
|
8315
|
+
startIcon: /* @__PURE__ */ React104.createElement(import_icons32.LetterYIcon, { fontSize: "tiny" }),
|
|
8196
8316
|
min: -Number.MAX_SAFE_INTEGER
|
|
8197
8317
|
}
|
|
8198
8318
|
)))))));
|
|
8199
8319
|
};
|
|
8200
8320
|
|
|
8201
8321
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
8202
|
-
var
|
|
8203
|
-
var
|
|
8322
|
+
var React117 = __toESM(require("react"));
|
|
8323
|
+
var import_react70 = require("react");
|
|
8204
8324
|
var import_editor_props54 = require("@elementor/editor-props");
|
|
8205
|
-
var
|
|
8206
|
-
var
|
|
8207
|
-
var
|
|
8325
|
+
var import_icons39 = require("@elementor/icons");
|
|
8326
|
+
var import_ui101 = require("@elementor/ui");
|
|
8327
|
+
var import_i18n60 = require("@wordpress/i18n");
|
|
8208
8328
|
|
|
8209
8329
|
// src/controls/transform-control/initial-values.ts
|
|
8210
8330
|
var import_editor_props46 = require("@elementor/editor-props");
|
|
@@ -8253,24 +8373,24 @@ var initialSkewValue = import_editor_props46.skewTransformPropTypeUtil.create({
|
|
|
8253
8373
|
});
|
|
8254
8374
|
|
|
8255
8375
|
// src/controls/transform-control/transform-content.tsx
|
|
8256
|
-
var
|
|
8257
|
-
var
|
|
8258
|
-
var
|
|
8376
|
+
var React111 = __toESM(require("react"));
|
|
8377
|
+
var import_ui96 = require("@elementor/ui");
|
|
8378
|
+
var import_i18n55 = require("@wordpress/i18n");
|
|
8259
8379
|
|
|
8260
8380
|
// src/controls/transform-control/functions/move.tsx
|
|
8261
|
-
var
|
|
8262
|
-
var
|
|
8381
|
+
var React106 = __toESM(require("react"));
|
|
8382
|
+
var import_react63 = require("react");
|
|
8263
8383
|
var import_editor_props47 = require("@elementor/editor-props");
|
|
8264
|
-
var
|
|
8265
|
-
var
|
|
8266
|
-
var
|
|
8384
|
+
var import_icons33 = require("@elementor/icons");
|
|
8385
|
+
var import_ui90 = require("@elementor/ui");
|
|
8386
|
+
var import_i18n51 = require("@wordpress/i18n");
|
|
8267
8387
|
|
|
8268
8388
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
8269
|
-
var
|
|
8270
|
-
var
|
|
8389
|
+
var React105 = __toESM(require("react"));
|
|
8390
|
+
var import_ui89 = require("@elementor/ui");
|
|
8271
8391
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
8272
8392
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
8273
|
-
return /* @__PURE__ */
|
|
8393
|
+
return /* @__PURE__ */ React105.createElement(import_ui89.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React105.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React105.createElement(import_ui89.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React105.createElement(import_ui89.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React105.createElement(
|
|
8274
8394
|
SizeControl,
|
|
8275
8395
|
{
|
|
8276
8396
|
anchorRef,
|
|
@@ -8286,28 +8406,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
|
|
|
8286
8406
|
// src/controls/transform-control/functions/move.tsx
|
|
8287
8407
|
var moveAxisControls = [
|
|
8288
8408
|
{
|
|
8289
|
-
label: (0,
|
|
8409
|
+
label: (0, import_i18n51.__)("Move X", "elementor"),
|
|
8290
8410
|
bind: "x",
|
|
8291
|
-
startIcon: /* @__PURE__ */
|
|
8411
|
+
startIcon: /* @__PURE__ */ React106.createElement(import_icons33.ArrowRightIcon, { fontSize: "tiny" }),
|
|
8292
8412
|
units: ["px", "%", "em", "rem", "vw"]
|
|
8293
8413
|
},
|
|
8294
8414
|
{
|
|
8295
|
-
label: (0,
|
|
8415
|
+
label: (0, import_i18n51.__)("Move Y", "elementor"),
|
|
8296
8416
|
bind: "y",
|
|
8297
|
-
startIcon: /* @__PURE__ */
|
|
8417
|
+
startIcon: /* @__PURE__ */ React106.createElement(import_icons33.ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
8298
8418
|
units: ["px", "%", "em", "rem", "vh"]
|
|
8299
8419
|
},
|
|
8300
8420
|
{
|
|
8301
|
-
label: (0,
|
|
8421
|
+
label: (0, import_i18n51.__)("Move Z", "elementor"),
|
|
8302
8422
|
bind: "z",
|
|
8303
|
-
startIcon: /* @__PURE__ */
|
|
8423
|
+
startIcon: /* @__PURE__ */ React106.createElement(import_icons33.ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
8304
8424
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
8305
8425
|
}
|
|
8306
8426
|
];
|
|
8307
8427
|
var Move = () => {
|
|
8308
8428
|
const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
|
|
8309
|
-
const rowRefs = [(0,
|
|
8310
|
-
return /* @__PURE__ */
|
|
8429
|
+
const rowRefs = [(0, import_react63.useRef)(null), (0, import_react63.useRef)(null), (0, import_react63.useRef)(null)];
|
|
8430
|
+
return /* @__PURE__ */ React106.createElement(import_ui90.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React106.createElement(PropProvider, { ...context }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React106.createElement(
|
|
8311
8431
|
AxisRow,
|
|
8312
8432
|
{
|
|
8313
8433
|
key: control.bind,
|
|
@@ -8320,34 +8440,34 @@ var Move = () => {
|
|
|
8320
8440
|
};
|
|
8321
8441
|
|
|
8322
8442
|
// src/controls/transform-control/functions/rotate.tsx
|
|
8323
|
-
var
|
|
8324
|
-
var
|
|
8443
|
+
var React107 = __toESM(require("react"));
|
|
8444
|
+
var import_react64 = require("react");
|
|
8325
8445
|
var import_editor_props48 = require("@elementor/editor-props");
|
|
8326
|
-
var
|
|
8327
|
-
var
|
|
8328
|
-
var
|
|
8446
|
+
var import_icons34 = require("@elementor/icons");
|
|
8447
|
+
var import_ui91 = require("@elementor/ui");
|
|
8448
|
+
var import_i18n52 = require("@wordpress/i18n");
|
|
8329
8449
|
var rotateAxisControls = [
|
|
8330
8450
|
{
|
|
8331
|
-
label: (0,
|
|
8451
|
+
label: (0, import_i18n52.__)("Rotate X", "elementor"),
|
|
8332
8452
|
bind: "x",
|
|
8333
|
-
startIcon: /* @__PURE__ */
|
|
8453
|
+
startIcon: /* @__PURE__ */ React107.createElement(import_icons34.Arrow360Icon, { fontSize: "tiny" })
|
|
8334
8454
|
},
|
|
8335
8455
|
{
|
|
8336
|
-
label: (0,
|
|
8456
|
+
label: (0, import_i18n52.__)("Rotate Y", "elementor"),
|
|
8337
8457
|
bind: "y",
|
|
8338
|
-
startIcon: /* @__PURE__ */
|
|
8458
|
+
startIcon: /* @__PURE__ */ React107.createElement(import_icons34.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
8339
8459
|
},
|
|
8340
8460
|
{
|
|
8341
|
-
label: (0,
|
|
8461
|
+
label: (0, import_i18n52.__)("Rotate Z", "elementor"),
|
|
8342
8462
|
bind: "z",
|
|
8343
|
-
startIcon: /* @__PURE__ */
|
|
8463
|
+
startIcon: /* @__PURE__ */ React107.createElement(import_icons34.RotateClockwiseIcon, { fontSize: "tiny" })
|
|
8344
8464
|
}
|
|
8345
8465
|
];
|
|
8346
8466
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
8347
8467
|
var Rotate = () => {
|
|
8348
8468
|
const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
|
|
8349
|
-
const rowRefs = [(0,
|
|
8350
|
-
return /* @__PURE__ */
|
|
8469
|
+
const rowRefs = [(0, import_react64.useRef)(null), (0, import_react64.useRef)(null), (0, import_react64.useRef)(null)];
|
|
8470
|
+
return /* @__PURE__ */ React107.createElement(import_ui91.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React107.createElement(PropProvider, { ...context }, /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React107.createElement(
|
|
8351
8471
|
AxisRow,
|
|
8352
8472
|
{
|
|
8353
8473
|
key: control.bind,
|
|
@@ -8359,68 +8479,68 @@ var Rotate = () => {
|
|
|
8359
8479
|
};
|
|
8360
8480
|
|
|
8361
8481
|
// src/controls/transform-control/functions/scale.tsx
|
|
8362
|
-
var
|
|
8363
|
-
var
|
|
8482
|
+
var React109 = __toESM(require("react"));
|
|
8483
|
+
var import_react65 = require("react");
|
|
8364
8484
|
var import_editor_props49 = require("@elementor/editor-props");
|
|
8365
|
-
var
|
|
8366
|
-
var
|
|
8367
|
-
var
|
|
8485
|
+
var import_icons35 = require("@elementor/icons");
|
|
8486
|
+
var import_ui93 = require("@elementor/ui");
|
|
8487
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
8368
8488
|
|
|
8369
8489
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
8370
|
-
var
|
|
8371
|
-
var
|
|
8490
|
+
var React108 = __toESM(require("react"));
|
|
8491
|
+
var import_ui92 = require("@elementor/ui");
|
|
8372
8492
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
8373
|
-
return /* @__PURE__ */
|
|
8493
|
+
return /* @__PURE__ */ React108.createElement(import_ui92.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React108.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React108.createElement(ControlLabel, null, label)), /* @__PURE__ */ React108.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React108.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
8374
8494
|
};
|
|
8375
8495
|
|
|
8376
8496
|
// src/controls/transform-control/functions/scale.tsx
|
|
8377
8497
|
var scaleAxisControls = [
|
|
8378
8498
|
{
|
|
8379
|
-
label: (0,
|
|
8499
|
+
label: (0, import_i18n53.__)("Scale X", "elementor"),
|
|
8380
8500
|
bind: "x",
|
|
8381
|
-
startIcon: /* @__PURE__ */
|
|
8501
|
+
startIcon: /* @__PURE__ */ React109.createElement(import_icons35.ArrowRightIcon, { fontSize: "tiny" })
|
|
8382
8502
|
},
|
|
8383
8503
|
{
|
|
8384
|
-
label: (0,
|
|
8504
|
+
label: (0, import_i18n53.__)("Scale Y", "elementor"),
|
|
8385
8505
|
bind: "y",
|
|
8386
|
-
startIcon: /* @__PURE__ */
|
|
8506
|
+
startIcon: /* @__PURE__ */ React109.createElement(import_icons35.ArrowDownSmallIcon, { fontSize: "tiny" })
|
|
8387
8507
|
},
|
|
8388
8508
|
{
|
|
8389
|
-
label: (0,
|
|
8509
|
+
label: (0, import_i18n53.__)("Scale Z", "elementor"),
|
|
8390
8510
|
bind: "z",
|
|
8391
|
-
startIcon: /* @__PURE__ */
|
|
8511
|
+
startIcon: /* @__PURE__ */ React109.createElement(import_icons35.ArrowDownLeftIcon, { fontSize: "tiny" })
|
|
8392
8512
|
}
|
|
8393
8513
|
];
|
|
8394
8514
|
var Scale = () => {
|
|
8395
8515
|
const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
|
|
8396
|
-
const rowRefs = [(0,
|
|
8397
|
-
return /* @__PURE__ */
|
|
8516
|
+
const rowRefs = [(0, import_react65.useRef)(null), (0, import_react65.useRef)(null), (0, import_react65.useRef)(null)];
|
|
8517
|
+
return /* @__PURE__ */ React109.createElement(import_ui93.Grid, { 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] })))));
|
|
8398
8518
|
};
|
|
8399
8519
|
|
|
8400
8520
|
// src/controls/transform-control/functions/skew.tsx
|
|
8401
|
-
var
|
|
8402
|
-
var
|
|
8521
|
+
var React110 = __toESM(require("react"));
|
|
8522
|
+
var import_react66 = require("react");
|
|
8403
8523
|
var import_editor_props50 = require("@elementor/editor-props");
|
|
8404
|
-
var
|
|
8405
|
-
var
|
|
8406
|
-
var
|
|
8524
|
+
var import_icons36 = require("@elementor/icons");
|
|
8525
|
+
var import_ui94 = require("@elementor/ui");
|
|
8526
|
+
var import_i18n54 = require("@wordpress/i18n");
|
|
8407
8527
|
var skewAxisControls = [
|
|
8408
8528
|
{
|
|
8409
|
-
label: (0,
|
|
8529
|
+
label: (0, import_i18n54.__)("Skew X", "elementor"),
|
|
8410
8530
|
bind: "x",
|
|
8411
|
-
startIcon: /* @__PURE__ */
|
|
8531
|
+
startIcon: /* @__PURE__ */ React110.createElement(import_icons36.ArrowRightIcon, { fontSize: "tiny" })
|
|
8412
8532
|
},
|
|
8413
8533
|
{
|
|
8414
|
-
label: (0,
|
|
8534
|
+
label: (0, import_i18n54.__)("Skew Y", "elementor"),
|
|
8415
8535
|
bind: "y",
|
|
8416
|
-
startIcon: /* @__PURE__ */
|
|
8536
|
+
startIcon: /* @__PURE__ */ React110.createElement(import_icons36.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
8417
8537
|
}
|
|
8418
8538
|
];
|
|
8419
8539
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
8420
8540
|
var Skew = () => {
|
|
8421
8541
|
const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
|
|
8422
|
-
const rowRefs = [(0,
|
|
8423
|
-
return /* @__PURE__ */
|
|
8542
|
+
const rowRefs = [(0, import_react66.useRef)(null), (0, import_react66.useRef)(null), (0, import_react66.useRef)(null)];
|
|
8543
|
+
return /* @__PURE__ */ React110.createElement(import_ui94.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React110.createElement(
|
|
8424
8544
|
AxisRow,
|
|
8425
8545
|
{
|
|
8426
8546
|
key: control.bind,
|
|
@@ -8432,9 +8552,9 @@ var Skew = () => {
|
|
|
8432
8552
|
};
|
|
8433
8553
|
|
|
8434
8554
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
8435
|
-
var
|
|
8555
|
+
var import_react67 = require("react");
|
|
8436
8556
|
var import_editor_props51 = require("@elementor/editor-props");
|
|
8437
|
-
var
|
|
8557
|
+
var import_ui95 = require("@elementor/ui");
|
|
8438
8558
|
var useTransformTabsHistory = ({
|
|
8439
8559
|
move: initialMove,
|
|
8440
8560
|
scale: initialScale,
|
|
@@ -8458,8 +8578,8 @@ var useTransformTabsHistory = ({
|
|
|
8458
8578
|
return TransformFunctionKeys.move;
|
|
8459
8579
|
}
|
|
8460
8580
|
};
|
|
8461
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
8462
|
-
const valuesHistory = (0,
|
|
8581
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui95.useTabs)(getCurrentTransformType());
|
|
8582
|
+
const valuesHistory = (0, import_react67.useRef)({
|
|
8463
8583
|
move: initialMove,
|
|
8464
8584
|
scale: initialScale,
|
|
8465
8585
|
rotate: initialRotate,
|
|
@@ -8520,8 +8640,8 @@ var TransformContent = () => {
|
|
|
8520
8640
|
rotate: initialRotateValue.value,
|
|
8521
8641
|
skew: initialSkewValue.value
|
|
8522
8642
|
});
|
|
8523
|
-
return /* @__PURE__ */
|
|
8524
|
-
|
|
8643
|
+
return /* @__PURE__ */ React111.createElement(PopoverContent, null, /* @__PURE__ */ React111.createElement(import_ui96.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React111.createElement(import_ui96.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React111.createElement(
|
|
8644
|
+
import_ui96.Tabs,
|
|
8525
8645
|
{
|
|
8526
8646
|
size: "small",
|
|
8527
8647
|
variant: "fullWidth",
|
|
@@ -8531,37 +8651,37 @@ var TransformContent = () => {
|
|
|
8531
8651
|
}
|
|
8532
8652
|
},
|
|
8533
8653
|
...getTabsProps(),
|
|
8534
|
-
"aria-label": (0,
|
|
8654
|
+
"aria-label": (0, import_i18n55.__)("Transform", "elementor")
|
|
8535
8655
|
},
|
|
8536
|
-
/* @__PURE__ */
|
|
8537
|
-
/* @__PURE__ */
|
|
8538
|
-
/* @__PURE__ */
|
|
8539
|
-
/* @__PURE__ */
|
|
8540
|
-
)), /* @__PURE__ */
|
|
8656
|
+
/* @__PURE__ */ React111.createElement(import_ui96.Tab, { label: (0, import_i18n55.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
8657
|
+
/* @__PURE__ */ React111.createElement(import_ui96.Tab, { label: (0, import_i18n55.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
8658
|
+
/* @__PURE__ */ React111.createElement(import_ui96.Tab, { label: (0, import_i18n55.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
8659
|
+
/* @__PURE__ */ React111.createElement(import_ui96.Tab, { label: (0, import_i18n55.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
8660
|
+
)), /* @__PURE__ */ React111.createElement(import_ui96.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React111.createElement(Move, null)), /* @__PURE__ */ React111.createElement(import_ui96.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React111.createElement(Scale, null)), /* @__PURE__ */ React111.createElement(import_ui96.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React111.createElement(Rotate, null)), /* @__PURE__ */ React111.createElement(import_ui96.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React111.createElement(Skew, null))));
|
|
8541
8661
|
};
|
|
8542
8662
|
|
|
8543
8663
|
// src/controls/transform-control/transform-icon.tsx
|
|
8544
|
-
var
|
|
8545
|
-
var
|
|
8664
|
+
var React112 = __toESM(require("react"));
|
|
8665
|
+
var import_icons37 = require("@elementor/icons");
|
|
8546
8666
|
var TransformIcon = ({ value }) => {
|
|
8547
8667
|
switch (value.$$type) {
|
|
8548
8668
|
case TransformFunctionKeys.move:
|
|
8549
|
-
return /* @__PURE__ */
|
|
8669
|
+
return /* @__PURE__ */ React112.createElement(import_icons37.ArrowsMaximizeIcon, { fontSize: "tiny" });
|
|
8550
8670
|
case TransformFunctionKeys.scale:
|
|
8551
|
-
return /* @__PURE__ */
|
|
8671
|
+
return /* @__PURE__ */ React112.createElement(import_icons37.ArrowAutofitHeightIcon, { fontSize: "tiny" });
|
|
8552
8672
|
case TransformFunctionKeys.rotate:
|
|
8553
|
-
return /* @__PURE__ */
|
|
8673
|
+
return /* @__PURE__ */ React112.createElement(import_icons37.RotateClockwise2Icon, { fontSize: "tiny" });
|
|
8554
8674
|
case TransformFunctionKeys.skew:
|
|
8555
|
-
return /* @__PURE__ */
|
|
8675
|
+
return /* @__PURE__ */ React112.createElement(import_icons37.SkewXIcon, { fontSize: "tiny" });
|
|
8556
8676
|
default:
|
|
8557
8677
|
return null;
|
|
8558
8678
|
}
|
|
8559
8679
|
};
|
|
8560
8680
|
|
|
8561
8681
|
// src/controls/transform-control/transform-label.tsx
|
|
8562
|
-
var
|
|
8563
|
-
var
|
|
8564
|
-
var
|
|
8682
|
+
var React113 = __toESM(require("react"));
|
|
8683
|
+
var import_ui97 = require("@elementor/ui");
|
|
8684
|
+
var import_i18n56 = require("@wordpress/i18n");
|
|
8565
8685
|
var orderedAxis = ["x", "y", "z"];
|
|
8566
8686
|
var formatLabel = (value, functionType) => {
|
|
8567
8687
|
return orderedAxis.map((axisKey) => {
|
|
@@ -8579,98 +8699,98 @@ var TransformLabel = (props) => {
|
|
|
8579
8699
|
const { $$type, value } = props.value;
|
|
8580
8700
|
switch ($$type) {
|
|
8581
8701
|
case TransformFunctionKeys.move:
|
|
8582
|
-
return /* @__PURE__ */
|
|
8702
|
+
return /* @__PURE__ */ React113.createElement(Label2, { label: (0, import_i18n56.__)("Move", "elementor"), value: formatLabel(value, "move") });
|
|
8583
8703
|
case TransformFunctionKeys.scale:
|
|
8584
|
-
return /* @__PURE__ */
|
|
8704
|
+
return /* @__PURE__ */ React113.createElement(Label2, { label: (0, import_i18n56.__)("Scale", "elementor"), value: formatLabel(value, "scale") });
|
|
8585
8705
|
case TransformFunctionKeys.rotate:
|
|
8586
|
-
return /* @__PURE__ */
|
|
8706
|
+
return /* @__PURE__ */ React113.createElement(Label2, { label: (0, import_i18n56.__)("Rotate", "elementor"), value: formatLabel(value, "rotate") });
|
|
8587
8707
|
case TransformFunctionKeys.skew:
|
|
8588
|
-
return /* @__PURE__ */
|
|
8708
|
+
return /* @__PURE__ */ React113.createElement(Label2, { label: (0, import_i18n56.__)("Skew", "elementor"), value: formatLabel(value, "skew") });
|
|
8589
8709
|
default:
|
|
8590
8710
|
return "";
|
|
8591
8711
|
}
|
|
8592
8712
|
};
|
|
8593
8713
|
var Label2 = ({ label, value }) => {
|
|
8594
|
-
return /* @__PURE__ */
|
|
8714
|
+
return /* @__PURE__ */ React113.createElement(import_ui97.Box, { component: "span" }, label, ": ", value);
|
|
8595
8715
|
};
|
|
8596
8716
|
|
|
8597
8717
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
8598
|
-
var
|
|
8599
|
-
var
|
|
8600
|
-
var
|
|
8601
|
-
var
|
|
8602
|
-
var
|
|
8718
|
+
var React116 = __toESM(require("react"));
|
|
8719
|
+
var import_editor_ui15 = require("@elementor/editor-ui");
|
|
8720
|
+
var import_icons38 = require("@elementor/icons");
|
|
8721
|
+
var import_ui100 = require("@elementor/ui");
|
|
8722
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
8603
8723
|
|
|
8604
8724
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
8605
|
-
var
|
|
8606
|
-
var
|
|
8725
|
+
var React114 = __toESM(require("react"));
|
|
8726
|
+
var import_react68 = require("react");
|
|
8607
8727
|
var import_editor_props52 = require("@elementor/editor-props");
|
|
8608
|
-
var
|
|
8609
|
-
var
|
|
8728
|
+
var import_ui98 = require("@elementor/ui");
|
|
8729
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
8610
8730
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
8611
8731
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
8612
|
-
label: (0,
|
|
8732
|
+
label: (0, import_i18n57.__)("Perspective", "elementor"),
|
|
8613
8733
|
bind: "perspective",
|
|
8614
8734
|
units: ["px", "em", "rem", "vw", "vh"]
|
|
8615
8735
|
};
|
|
8616
8736
|
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
8617
8737
|
{
|
|
8618
|
-
label: (0,
|
|
8738
|
+
label: (0, import_i18n57.__)("Origin X", "elementor"),
|
|
8619
8739
|
bind: "x",
|
|
8620
8740
|
units: ORIGIN_UNITS
|
|
8621
8741
|
},
|
|
8622
8742
|
{
|
|
8623
|
-
label: (0,
|
|
8743
|
+
label: (0, import_i18n57.__)("Origin Y", "elementor"),
|
|
8624
8744
|
bind: "y",
|
|
8625
8745
|
units: ORIGIN_UNITS
|
|
8626
8746
|
}
|
|
8627
8747
|
];
|
|
8628
8748
|
var ChildrenPerspectiveControl = () => {
|
|
8629
|
-
return /* @__PURE__ */
|
|
8749
|
+
return /* @__PURE__ */ React114.createElement(import_ui98.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Children perspective", "elementor")), /* @__PURE__ */ React114.createElement(PerspectiveControl, null), /* @__PURE__ */ React114.createElement(PerspectiveOriginControl, null));
|
|
8630
8750
|
};
|
|
8631
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
8632
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
8751
|
+
var PerspectiveControl = () => /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React114.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
8752
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React114.createElement(PerspectiveOriginControlProvider, null));
|
|
8633
8753
|
var PerspectiveOriginControlProvider = () => {
|
|
8634
8754
|
const context = useBoundProp(import_editor_props52.perspectiveOriginPropTypeUtil);
|
|
8635
|
-
return /* @__PURE__ */
|
|
8755
|
+
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 }))));
|
|
8636
8756
|
};
|
|
8637
8757
|
var ControlFields = ({ control }) => {
|
|
8638
|
-
const rowRef = (0,
|
|
8639
|
-
return /* @__PURE__ */
|
|
8758
|
+
const rowRef = (0, import_react68.useRef)(null);
|
|
8759
|
+
return /* @__PURE__ */ React114.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
8640
8760
|
};
|
|
8641
8761
|
|
|
8642
8762
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
8643
|
-
var
|
|
8644
|
-
var
|
|
8763
|
+
var React115 = __toESM(require("react"));
|
|
8764
|
+
var import_react69 = require("react");
|
|
8645
8765
|
var import_editor_props53 = require("@elementor/editor-props");
|
|
8646
|
-
var
|
|
8647
|
-
var
|
|
8766
|
+
var import_ui99 = require("@elementor/ui");
|
|
8767
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
8648
8768
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
8649
8769
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
8650
8770
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
8651
8771
|
{
|
|
8652
|
-
label: (0,
|
|
8772
|
+
label: (0, import_i18n58.__)("Origin X", "elementor"),
|
|
8653
8773
|
bind: "x",
|
|
8654
8774
|
units: TRANSFORM_ORIGIN_UNITS
|
|
8655
8775
|
},
|
|
8656
8776
|
{
|
|
8657
|
-
label: (0,
|
|
8777
|
+
label: (0, import_i18n58.__)("Origin Y", "elementor"),
|
|
8658
8778
|
bind: "y",
|
|
8659
8779
|
units: TRANSFORM_ORIGIN_UNITS
|
|
8660
8780
|
},
|
|
8661
8781
|
{
|
|
8662
|
-
label: (0,
|
|
8782
|
+
label: (0, import_i18n58.__)("Origin Z", "elementor"),
|
|
8663
8783
|
bind: "z",
|
|
8664
8784
|
units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
|
|
8665
8785
|
}
|
|
8666
8786
|
];
|
|
8667
8787
|
var TransformOriginControl = () => {
|
|
8668
|
-
return /* @__PURE__ */
|
|
8788
|
+
return /* @__PURE__ */ React115.createElement(import_ui99.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, (0, import_i18n58.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React115.createElement(ControlFields2, { control, key: control.bind })));
|
|
8669
8789
|
};
|
|
8670
8790
|
var ControlFields2 = ({ control }) => {
|
|
8671
8791
|
const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
|
|
8672
|
-
const rowRef = (0,
|
|
8673
|
-
return /* @__PURE__ */
|
|
8792
|
+
const rowRef = (0, import_react69.useRef)(null);
|
|
8793
|
+
return /* @__PURE__ */ React115.createElement(PropProvider, { ...context }, /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React115.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React115.createElement(import_ui99.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React115.createElement(import_ui99.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
|
|
8674
8794
|
};
|
|
8675
8795
|
|
|
8676
8796
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
@@ -8680,12 +8800,12 @@ var TransformSettingsControl = ({
|
|
|
8680
8800
|
anchorRef,
|
|
8681
8801
|
showChildrenPerspective
|
|
8682
8802
|
}) => {
|
|
8683
|
-
const popupProps = (0,
|
|
8803
|
+
const popupProps = (0, import_ui100.bindPopover)({
|
|
8684
8804
|
...popupState,
|
|
8685
8805
|
anchorEl: anchorRef.current ?? void 0
|
|
8686
8806
|
});
|
|
8687
|
-
return /* @__PURE__ */
|
|
8688
|
-
|
|
8807
|
+
return /* @__PURE__ */ React116.createElement(
|
|
8808
|
+
import_ui100.Popover,
|
|
8689
8809
|
{
|
|
8690
8810
|
disablePortal: true,
|
|
8691
8811
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
@@ -8699,16 +8819,16 @@ var TransformSettingsControl = ({
|
|
|
8699
8819
|
},
|
|
8700
8820
|
...popupProps
|
|
8701
8821
|
},
|
|
8702
|
-
/* @__PURE__ */
|
|
8703
|
-
|
|
8822
|
+
/* @__PURE__ */ React116.createElement(
|
|
8823
|
+
import_editor_ui15.PopoverHeader,
|
|
8704
8824
|
{
|
|
8705
|
-
title: (0,
|
|
8825
|
+
title: (0, import_i18n59.__)("Transform settings", "elementor"),
|
|
8706
8826
|
onClose: popupState.close,
|
|
8707
|
-
icon: /* @__PURE__ */
|
|
8827
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.AdjustmentsIcon, { fontSize: SIZE10 })
|
|
8708
8828
|
}
|
|
8709
8829
|
),
|
|
8710
|
-
/* @__PURE__ */
|
|
8711
|
-
/* @__PURE__ */
|
|
8830
|
+
/* @__PURE__ */ React116.createElement(import_ui100.Divider, null),
|
|
8831
|
+
/* @__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(import_ui100.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React116.createElement(import_ui100.Divider, null)), /* @__PURE__ */ React116.createElement(ChildrenPerspectiveControl, null)))
|
|
8712
8832
|
);
|
|
8713
8833
|
};
|
|
8714
8834
|
|
|
@@ -8717,27 +8837,27 @@ var SIZE11 = "tiny";
|
|
|
8717
8837
|
var TransformRepeaterControl = createControl(
|
|
8718
8838
|
({ showChildrenPerspective }) => {
|
|
8719
8839
|
const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
|
|
8720
|
-
const headerRef = (0,
|
|
8721
|
-
const popupState = (0,
|
|
8722
|
-
return /* @__PURE__ */
|
|
8840
|
+
const headerRef = (0, import_react70.useRef)(null);
|
|
8841
|
+
const popupState = (0, import_ui101.usePopupState)({ variant: "popover" });
|
|
8842
|
+
return /* @__PURE__ */ React117.createElement(PropProvider, { ...context }, /* @__PURE__ */ React117.createElement(
|
|
8723
8843
|
TransformSettingsControl,
|
|
8724
8844
|
{
|
|
8725
8845
|
popupState,
|
|
8726
8846
|
anchorRef: headerRef,
|
|
8727
8847
|
showChildrenPerspective
|
|
8728
8848
|
}
|
|
8729
|
-
), /* @__PURE__ */
|
|
8849
|
+
), /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React117.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
8730
8850
|
}
|
|
8731
8851
|
);
|
|
8732
|
-
var ToolTip = /* @__PURE__ */
|
|
8733
|
-
|
|
8852
|
+
var ToolTip = /* @__PURE__ */ React117.createElement(
|
|
8853
|
+
import_ui101.Box,
|
|
8734
8854
|
{
|
|
8735
8855
|
component: "span",
|
|
8736
8856
|
"aria-label": void 0,
|
|
8737
8857
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
8738
8858
|
},
|
|
8739
|
-
/* @__PURE__ */
|
|
8740
|
-
/* @__PURE__ */
|
|
8859
|
+
/* @__PURE__ */ React117.createElement(import_icons39.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
|
|
8860
|
+
/* @__PURE__ */ React117.createElement(import_ui101.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n60.__)("You can use each kind of transform only once per element.", "elementor"))
|
|
8741
8861
|
);
|
|
8742
8862
|
var Repeater2 = ({
|
|
8743
8863
|
headerRef,
|
|
@@ -8751,21 +8871,21 @@ var Repeater2 = ({
|
|
|
8751
8871
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
8752
8872
|
};
|
|
8753
8873
|
const shouldDisableAddItem = !getInitialValue2();
|
|
8754
|
-
return /* @__PURE__ */
|
|
8874
|
+
return /* @__PURE__ */ React117.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React117.createElement(
|
|
8755
8875
|
ControlRepeater,
|
|
8756
8876
|
{
|
|
8757
8877
|
initial: getInitialValue2() ?? initialTransformValue,
|
|
8758
8878
|
propTypeUtil: import_editor_props54.transformFunctionsPropTypeUtil
|
|
8759
8879
|
},
|
|
8760
|
-
/* @__PURE__ */
|
|
8880
|
+
/* @__PURE__ */ React117.createElement(
|
|
8761
8881
|
RepeaterHeader,
|
|
8762
8882
|
{
|
|
8763
|
-
label: (0,
|
|
8764
|
-
adornment: () => /* @__PURE__ */
|
|
8883
|
+
label: (0, import_i18n60.__)("Transform", "elementor"),
|
|
8884
|
+
adornment: () => /* @__PURE__ */ React117.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
8765
8885
|
ref: headerRef
|
|
8766
8886
|
},
|
|
8767
|
-
/* @__PURE__ */
|
|
8768
|
-
/* @__PURE__ */
|
|
8887
|
+
/* @__PURE__ */ React117.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
8888
|
+
/* @__PURE__ */ React117.createElement(
|
|
8769
8889
|
TooltipAddItemAction,
|
|
8770
8890
|
{
|
|
8771
8891
|
disabled: shouldDisableAddItem,
|
|
@@ -8775,15 +8895,15 @@ var Repeater2 = ({
|
|
|
8775
8895
|
}
|
|
8776
8896
|
)
|
|
8777
8897
|
),
|
|
8778
|
-
/* @__PURE__ */
|
|
8898
|
+
/* @__PURE__ */ React117.createElement(ItemsContainer, null, /* @__PURE__ */ React117.createElement(
|
|
8779
8899
|
Item,
|
|
8780
8900
|
{
|
|
8781
8901
|
Icon: TransformIcon,
|
|
8782
8902
|
Label: TransformLabel,
|
|
8783
|
-
actions: /* @__PURE__ */
|
|
8903
|
+
actions: /* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement(DisableItemAction, null), /* @__PURE__ */ React117.createElement(RemoveItemAction, null))
|
|
8784
8904
|
}
|
|
8785
8905
|
)),
|
|
8786
|
-
/* @__PURE__ */
|
|
8906
|
+
/* @__PURE__ */ React117.createElement(EditItemPopover, null, /* @__PURE__ */ React117.createElement(TransformContent, null))
|
|
8787
8907
|
));
|
|
8788
8908
|
};
|
|
8789
8909
|
var TransformBasePopoverTrigger = ({
|
|
@@ -8791,30 +8911,30 @@ var TransformBasePopoverTrigger = ({
|
|
|
8791
8911
|
repeaterBindKey
|
|
8792
8912
|
}) => {
|
|
8793
8913
|
const { bind } = useBoundProp();
|
|
8794
|
-
const titleLabel = (0,
|
|
8795
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
8914
|
+
const titleLabel = (0, import_i18n60.__)("Transform settings", "elementor");
|
|
8915
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React117.createElement(import_ui101.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React117.createElement(import_ui101.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui101.bindTrigger)(popupState) }, /* @__PURE__ */ React117.createElement(import_icons39.AdjustmentsIcon, { fontSize: SIZE11 })));
|
|
8796
8916
|
};
|
|
8797
8917
|
|
|
8798
8918
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
8799
|
-
var
|
|
8800
|
-
var
|
|
8919
|
+
var React120 = __toESM(require("react"));
|
|
8920
|
+
var import_react73 = require("react");
|
|
8801
8921
|
var import_editor_props57 = require("@elementor/editor-props");
|
|
8802
|
-
var
|
|
8803
|
-
var
|
|
8922
|
+
var import_icons41 = require("@elementor/icons");
|
|
8923
|
+
var import_ui104 = require("@elementor/ui");
|
|
8804
8924
|
var import_utils8 = require("@elementor/utils");
|
|
8805
|
-
var
|
|
8925
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
8806
8926
|
|
|
8807
8927
|
// src/controls/selection-size-control.tsx
|
|
8808
|
-
var
|
|
8809
|
-
var
|
|
8928
|
+
var React118 = __toESM(require("react"));
|
|
8929
|
+
var import_react71 = require("react");
|
|
8810
8930
|
var import_editor_props55 = require("@elementor/editor-props");
|
|
8811
|
-
var
|
|
8931
|
+
var import_ui102 = require("@elementor/ui");
|
|
8812
8932
|
var SelectionSizeControl = createControl(
|
|
8813
8933
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
8814
8934
|
const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
|
|
8815
|
-
const rowRef = (0,
|
|
8935
|
+
const rowRef = (0, import_react71.useRef)(null);
|
|
8816
8936
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
8817
|
-
const currentSizeConfig = (0,
|
|
8937
|
+
const currentSizeConfig = (0, import_react71.useMemo)(() => {
|
|
8818
8938
|
switch (value.selection.$$type) {
|
|
8819
8939
|
case "key-value":
|
|
8820
8940
|
return sizeConfigMap[value?.selection?.value.value.value || ""];
|
|
@@ -8825,7 +8945,7 @@ var SelectionSizeControl = createControl(
|
|
|
8825
8945
|
}
|
|
8826
8946
|
}, [value, sizeConfigMap]);
|
|
8827
8947
|
const SelectionComponent = selectionConfig.component;
|
|
8828
|
-
return /* @__PURE__ */
|
|
8948
|
+
return /* @__PURE__ */ React118.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { 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(import_ui102.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React118.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React118.createElement(
|
|
8829
8949
|
SizeControl,
|
|
8830
8950
|
{
|
|
8831
8951
|
anchorRef: rowRef,
|
|
@@ -8840,12 +8960,12 @@ var SelectionSizeControl = createControl(
|
|
|
8840
8960
|
|
|
8841
8961
|
// src/controls/transition-control/data.ts
|
|
8842
8962
|
var import_utils7 = require("@elementor/utils");
|
|
8843
|
-
var
|
|
8963
|
+
var import_i18n61 = require("@wordpress/i18n");
|
|
8844
8964
|
var initialTransitionValue = {
|
|
8845
8965
|
selection: {
|
|
8846
8966
|
$$type: "key-value",
|
|
8847
8967
|
value: {
|
|
8848
|
-
key: { value: (0,
|
|
8968
|
+
key: { value: (0, import_i18n61.__)("All properties", "elementor"), $$type: "string" },
|
|
8849
8969
|
value: { value: "all", $$type: "string" }
|
|
8850
8970
|
}
|
|
8851
8971
|
},
|
|
@@ -8869,128 +8989,128 @@ var createTransitionPropertiesList = () => {
|
|
|
8869
8989
|
const isSiteRtl = getIsSiteRtl();
|
|
8870
8990
|
const baseProperties = [
|
|
8871
8991
|
{
|
|
8872
|
-
label: (0,
|
|
8992
|
+
label: (0, import_i18n61.__)("Default", "elementor"),
|
|
8873
8993
|
type: "category",
|
|
8874
|
-
properties: [{ label: (0,
|
|
8994
|
+
properties: [{ label: (0, import_i18n61.__)("All properties", "elementor"), value: "all" }]
|
|
8875
8995
|
},
|
|
8876
8996
|
{
|
|
8877
|
-
label: (0,
|
|
8997
|
+
label: (0, import_i18n61.__)("Margin", "elementor"),
|
|
8878
8998
|
type: "category",
|
|
8879
8999
|
properties: [
|
|
8880
|
-
{ label: (0,
|
|
8881
|
-
{ label: (0,
|
|
9000
|
+
{ label: (0, import_i18n61.__)("Margin (all)", "elementor"), value: "margin", isDisabled: true },
|
|
9001
|
+
{ label: (0, import_i18n61.__)("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
|
|
8882
9002
|
{
|
|
8883
|
-
label: isSiteRtl ? (0,
|
|
9003
|
+
label: isSiteRtl ? (0, import_i18n61.__)("Margin right", "elementor") : (0, import_i18n61.__)("Margin left", "elementor"),
|
|
8884
9004
|
value: "margin-inline-start",
|
|
8885
9005
|
isDisabled: true
|
|
8886
9006
|
},
|
|
8887
9007
|
{
|
|
8888
|
-
label: isSiteRtl ? (0,
|
|
9008
|
+
label: isSiteRtl ? (0, import_i18n61.__)("Margin left", "elementor") : (0, import_i18n61.__)("Margin right", "elementor"),
|
|
8889
9009
|
value: "margin-inline-end",
|
|
8890
9010
|
isDisabled: true
|
|
8891
9011
|
},
|
|
8892
|
-
{ label: (0,
|
|
9012
|
+
{ label: (0, import_i18n61.__)("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
|
|
8893
9013
|
]
|
|
8894
9014
|
},
|
|
8895
9015
|
{
|
|
8896
|
-
label: (0,
|
|
9016
|
+
label: (0, import_i18n61.__)("Padding", "elementor"),
|
|
8897
9017
|
type: "category",
|
|
8898
9018
|
properties: [
|
|
8899
|
-
{ label: (0,
|
|
8900
|
-
{ label: (0,
|
|
9019
|
+
{ label: (0, import_i18n61.__)("Padding (all)", "elementor"), value: "padding", isDisabled: true },
|
|
9020
|
+
{ label: (0, import_i18n61.__)("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
|
|
8901
9021
|
{
|
|
8902
|
-
label: isSiteRtl ? (0,
|
|
9022
|
+
label: isSiteRtl ? (0, import_i18n61.__)("Padding right", "elementor") : (0, import_i18n61.__)("Padding left", "elementor"),
|
|
8903
9023
|
value: "padding-inline-start",
|
|
8904
9024
|
isDisabled: true
|
|
8905
9025
|
},
|
|
8906
9026
|
{
|
|
8907
|
-
label: isSiteRtl ? (0,
|
|
9027
|
+
label: isSiteRtl ? (0, import_i18n61.__)("Padding left", "elementor") : (0, import_i18n61.__)("Padding right", "elementor"),
|
|
8908
9028
|
value: "padding-inline-end",
|
|
8909
9029
|
isDisabled: true
|
|
8910
9030
|
},
|
|
8911
|
-
{ label: (0,
|
|
9031
|
+
{ label: (0, import_i18n61.__)("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
|
|
8912
9032
|
]
|
|
8913
9033
|
},
|
|
8914
9034
|
{
|
|
8915
|
-
label: (0,
|
|
9035
|
+
label: (0, import_i18n61.__)("Flex", "elementor"),
|
|
8916
9036
|
type: "category",
|
|
8917
9037
|
properties: [
|
|
8918
|
-
{ label: (0,
|
|
8919
|
-
{ label: (0,
|
|
8920
|
-
{ label: (0,
|
|
8921
|
-
{ label: (0,
|
|
9038
|
+
{ label: (0, import_i18n61.__)("Flex (all)", "elementor"), value: "flex", isDisabled: true },
|
|
9039
|
+
{ label: (0, import_i18n61.__)("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
|
|
9040
|
+
{ label: (0, import_i18n61.__)("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
|
|
9041
|
+
{ label: (0, import_i18n61.__)("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
|
|
8922
9042
|
]
|
|
8923
9043
|
},
|
|
8924
9044
|
{
|
|
8925
|
-
label: (0,
|
|
9045
|
+
label: (0, import_i18n61.__)("Size", "elementor"),
|
|
8926
9046
|
type: "category",
|
|
8927
9047
|
properties: [
|
|
8928
|
-
{ label: (0,
|
|
8929
|
-
{ label: (0,
|
|
8930
|
-
{ label: (0,
|
|
8931
|
-
{ label: (0,
|
|
8932
|
-
{ label: (0,
|
|
8933
|
-
{ label: (0,
|
|
9048
|
+
{ label: (0, import_i18n61.__)("Width", "elementor"), value: "width", isDisabled: true },
|
|
9049
|
+
{ label: (0, import_i18n61.__)("Height", "elementor"), value: "height", isDisabled: true },
|
|
9050
|
+
{ label: (0, import_i18n61.__)("Max height", "elementor"), value: "max-height", isDisabled: true },
|
|
9051
|
+
{ label: (0, import_i18n61.__)("Max width", "elementor"), value: "max-width", isDisabled: true },
|
|
9052
|
+
{ label: (0, import_i18n61.__)("Min height", "elementor"), value: "min-height", isDisabled: true },
|
|
9053
|
+
{ label: (0, import_i18n61.__)("Min width", "elementor"), value: "min-width", isDisabled: true }
|
|
8934
9054
|
]
|
|
8935
9055
|
},
|
|
8936
9056
|
{
|
|
8937
|
-
label: (0,
|
|
9057
|
+
label: (0, import_i18n61.__)("Position", "elementor"),
|
|
8938
9058
|
type: "category",
|
|
8939
9059
|
properties: [
|
|
8940
|
-
{ label: (0,
|
|
9060
|
+
{ label: (0, import_i18n61.__)("Top", "elementor"), value: "inset-block-start", isDisabled: true },
|
|
8941
9061
|
{
|
|
8942
|
-
label: isSiteRtl ? (0,
|
|
9062
|
+
label: isSiteRtl ? (0, import_i18n61.__)("Right", "elementor") : (0, import_i18n61.__)("Left", "elementor"),
|
|
8943
9063
|
value: "inset-inline-start",
|
|
8944
9064
|
isDisabled: true
|
|
8945
9065
|
},
|
|
8946
9066
|
{
|
|
8947
|
-
label: isSiteRtl ? (0,
|
|
9067
|
+
label: isSiteRtl ? (0, import_i18n61.__)("Left", "elementor") : (0, import_i18n61.__)("Right", "elementor"),
|
|
8948
9068
|
value: "inset-inline-end",
|
|
8949
9069
|
isDisabled: true
|
|
8950
9070
|
},
|
|
8951
|
-
{ label: (0,
|
|
8952
|
-
{ label: (0,
|
|
9071
|
+
{ label: (0, import_i18n61.__)("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
|
|
9072
|
+
{ label: (0, import_i18n61.__)("Z-index", "elementor"), value: "z-index", isDisabled: true }
|
|
8953
9073
|
]
|
|
8954
9074
|
},
|
|
8955
9075
|
{
|
|
8956
|
-
label: (0,
|
|
9076
|
+
label: (0, import_i18n61.__)("Typography", "elementor"),
|
|
8957
9077
|
type: "category",
|
|
8958
9078
|
properties: [
|
|
8959
|
-
{ label: (0,
|
|
8960
|
-
{ label: (0,
|
|
8961
|
-
{ label: (0,
|
|
8962
|
-
{ label: (0,
|
|
8963
|
-
{ label: (0,
|
|
8964
|
-
{ label: (0,
|
|
8965
|
-
{ label: (0,
|
|
9079
|
+
{ label: (0, import_i18n61.__)("Font color", "elementor"), value: "color", isDisabled: true },
|
|
9080
|
+
{ label: (0, import_i18n61.__)("Font size", "elementor"), value: "font-size", isDisabled: true },
|
|
9081
|
+
{ label: (0, import_i18n61.__)("Line height", "elementor"), value: "line-height", isDisabled: true },
|
|
9082
|
+
{ label: (0, import_i18n61.__)("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
|
|
9083
|
+
{ label: (0, import_i18n61.__)("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
|
|
9084
|
+
{ label: (0, import_i18n61.__)("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
|
|
9085
|
+
{ label: (0, import_i18n61.__)("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
|
|
8966
9086
|
]
|
|
8967
9087
|
},
|
|
8968
9088
|
{
|
|
8969
|
-
label: (0,
|
|
9089
|
+
label: (0, import_i18n61.__)("Background", "elementor"),
|
|
8970
9090
|
type: "category",
|
|
8971
9091
|
properties: [
|
|
8972
|
-
{ label: (0,
|
|
8973
|
-
{ label: (0,
|
|
8974
|
-
{ label: (0,
|
|
9092
|
+
{ label: (0, import_i18n61.__)("Background color", "elementor"), value: "background-color", isDisabled: true },
|
|
9093
|
+
{ label: (0, import_i18n61.__)("Background position", "elementor"), value: "background-position", isDisabled: true },
|
|
9094
|
+
{ label: (0, import_i18n61.__)("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
|
|
8975
9095
|
]
|
|
8976
9096
|
},
|
|
8977
9097
|
{
|
|
8978
|
-
label: (0,
|
|
9098
|
+
label: (0, import_i18n61.__)("Border", "elementor"),
|
|
8979
9099
|
type: "category",
|
|
8980
9100
|
properties: [
|
|
8981
|
-
{ label: (0,
|
|
8982
|
-
{ label: (0,
|
|
8983
|
-
{ label: (0,
|
|
8984
|
-
{ label: (0,
|
|
9101
|
+
{ label: (0, import_i18n61.__)("Border (all)", "elementor"), value: "border", isDisabled: true },
|
|
9102
|
+
{ label: (0, import_i18n61.__)("Border radius", "elementor"), value: "border-radius", isDisabled: true },
|
|
9103
|
+
{ label: (0, import_i18n61.__)("Border color", "elementor"), value: "border-color", isDisabled: true },
|
|
9104
|
+
{ label: (0, import_i18n61.__)("Border width", "elementor"), value: "border-width", isDisabled: true }
|
|
8985
9105
|
]
|
|
8986
9106
|
},
|
|
8987
9107
|
{
|
|
8988
|
-
label: (0,
|
|
9108
|
+
label: (0, import_i18n61.__)("Effects", "elementor"),
|
|
8989
9109
|
type: "category",
|
|
8990
9110
|
properties: [
|
|
8991
|
-
{ label: (0,
|
|
8992
|
-
{ label: (0,
|
|
8993
|
-
{ label: (0,
|
|
9111
|
+
{ label: (0, import_i18n61.__)("Opacity", "elementor"), value: "opacity", isDisabled: true },
|
|
9112
|
+
{ label: (0, import_i18n61.__)("Transform (all)", "elementor"), value: "transform", isDisabled: true },
|
|
9113
|
+
{ label: (0, import_i18n61.__)("Filter (all)", "elementor"), value: "filter", isDisabled: true }
|
|
8994
9114
|
]
|
|
8995
9115
|
}
|
|
8996
9116
|
];
|
|
@@ -9003,8 +9123,8 @@ var transitionsItemsList = transitionProperties.map((category) => ({
|
|
|
9003
9123
|
}));
|
|
9004
9124
|
|
|
9005
9125
|
// src/controls/transition-control/trainsition-events.ts
|
|
9006
|
-
var
|
|
9007
|
-
var
|
|
9126
|
+
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
9127
|
+
var import_events2 = require("@elementor/events");
|
|
9008
9128
|
var transitionRepeaterMixpanelEvent = {
|
|
9009
9129
|
eventName: "click_added_transition",
|
|
9010
9130
|
location: "V4 Style Tab",
|
|
@@ -9015,9 +9135,9 @@ function subscribeToTransitionEvent() {
|
|
|
9015
9135
|
eventBus.subscribe("transition-item-added", (data) => {
|
|
9016
9136
|
const payload = data;
|
|
9017
9137
|
const value = payload?.itemValue?.selection?.value?.value?.value;
|
|
9018
|
-
const selectedElements = (0,
|
|
9138
|
+
const selectedElements = (0, import_editor_elements6.getSelectedElements)();
|
|
9019
9139
|
const widgetType = selectedElements[0]?.type ?? null;
|
|
9020
|
-
(0,
|
|
9140
|
+
(0, import_events2.trackEvent)({
|
|
9021
9141
|
transition_type: value ?? "unknown",
|
|
9022
9142
|
...transitionRepeaterMixpanelEvent,
|
|
9023
9143
|
widget_type: widgetType
|
|
@@ -9026,53 +9146,13 @@ function subscribeToTransitionEvent() {
|
|
|
9026
9146
|
}
|
|
9027
9147
|
|
|
9028
9148
|
// src/controls/transition-control/transition-selector.tsx
|
|
9029
|
-
var
|
|
9030
|
-
var
|
|
9149
|
+
var React119 = __toESM(require("react"));
|
|
9150
|
+
var import_react72 = require("react");
|
|
9031
9151
|
var import_editor_props56 = require("@elementor/editor-props");
|
|
9032
|
-
var
|
|
9033
|
-
var
|
|
9034
|
-
var
|
|
9035
|
-
var
|
|
9036
|
-
|
|
9037
|
-
// src/utils/tracking.ts
|
|
9038
|
-
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
9039
|
-
var import_events2 = require("@elementor/events");
|
|
9040
|
-
var getBaseEventProperties = (data, config) => ({
|
|
9041
|
-
window_name: config?.appTypes?.editor ?? "editor",
|
|
9042
|
-
interaction_type: config?.triggers?.click ?? "Click",
|
|
9043
|
-
target_name: data.target_name,
|
|
9044
|
-
target_location: data.target_location ?? "widget_panel",
|
|
9045
|
-
location_l1: data.location_l1 ?? (0, import_editor_elements6.getSelectedElements)()[0]?.type ?? "",
|
|
9046
|
-
...data.location_l2 && { location_l2: data.location_l2 }
|
|
9047
|
-
});
|
|
9048
|
-
var dispatchPromotionEvent = (data, resolveOptions) => {
|
|
9049
|
-
const { dispatchEvent, config } = (0, import_events2.getMixpanel)();
|
|
9050
|
-
const { eventName, interactionResult, interactionDescription } = resolveOptions(config);
|
|
9051
|
-
if (!eventName) {
|
|
9052
|
-
return;
|
|
9053
|
-
}
|
|
9054
|
-
dispatchEvent?.(eventName, {
|
|
9055
|
-
...getBaseEventProperties(data, config),
|
|
9056
|
-
interaction_result: interactionResult,
|
|
9057
|
-
interaction_description: interactionDescription
|
|
9058
|
-
});
|
|
9059
|
-
};
|
|
9060
|
-
var trackViewPromotion = (data) => {
|
|
9061
|
-
dispatchPromotionEvent(data, (config) => ({
|
|
9062
|
-
eventName: config?.names?.promotions?.viewPromotion,
|
|
9063
|
-
interactionResult: config?.interactionResults?.promotionViewed ?? "promotion_viewed",
|
|
9064
|
-
interactionDescription: "user_viewed_promotion"
|
|
9065
|
-
}));
|
|
9066
|
-
};
|
|
9067
|
-
var trackUpgradePromotionClick = (data) => {
|
|
9068
|
-
dispatchPromotionEvent(data, (config) => ({
|
|
9069
|
-
eventName: config?.names?.promotions?.upgradePromotionClick,
|
|
9070
|
-
interactionResult: config?.interactionResults?.upgradeNow ?? "upgrade_now",
|
|
9071
|
-
interactionDescription: "user_clicked_upgrade_now"
|
|
9072
|
-
}));
|
|
9073
|
-
};
|
|
9074
|
-
|
|
9075
|
-
// src/controls/transition-control/transition-selector.tsx
|
|
9152
|
+
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
9153
|
+
var import_icons40 = require("@elementor/icons");
|
|
9154
|
+
var import_ui103 = require("@elementor/ui");
|
|
9155
|
+
var import_i18n62 = require("@wordpress/i18n");
|
|
9076
9156
|
var toTransitionSelectorValue = (label) => {
|
|
9077
9157
|
for (const category of transitionProperties) {
|
|
9078
9158
|
const property = category.properties.find((prop) => prop.label === label);
|
|
@@ -9113,9 +9193,9 @@ var TransitionSelector = ({
|
|
|
9113
9193
|
const {
|
|
9114
9194
|
key: { value: transitionLabel }
|
|
9115
9195
|
} = value;
|
|
9116
|
-
const defaultRef = (0,
|
|
9117
|
-
const popoverState = (0,
|
|
9118
|
-
const disabledCategories = (0,
|
|
9196
|
+
const defaultRef = (0, import_react72.useRef)(null);
|
|
9197
|
+
const popoverState = (0, import_ui103.usePopupState)({ variant: "popover" });
|
|
9198
|
+
const disabledCategories = (0, import_react72.useMemo)(() => {
|
|
9119
9199
|
return new Set(
|
|
9120
9200
|
transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
|
|
9121
9201
|
);
|
|
@@ -9135,7 +9215,7 @@ var TransitionSelector = ({
|
|
|
9135
9215
|
return [
|
|
9136
9216
|
first,
|
|
9137
9217
|
{
|
|
9138
|
-
label: (0,
|
|
9218
|
+
label: (0, import_i18n62.__)("Recently Used", "elementor"),
|
|
9139
9219
|
items: recentItems
|
|
9140
9220
|
},
|
|
9141
9221
|
...rest
|
|
@@ -9159,27 +9239,27 @@ var TransitionSelector = ({
|
|
|
9159
9239
|
left: rect.right + 36
|
|
9160
9240
|
};
|
|
9161
9241
|
};
|
|
9162
|
-
return /* @__PURE__ */
|
|
9163
|
-
|
|
9242
|
+
return /* @__PURE__ */ React119.createElement(import_ui103.Box, { ref: defaultRef }, /* @__PURE__ */ React119.createElement(ControlActions, null, /* @__PURE__ */ React119.createElement(
|
|
9243
|
+
import_ui103.UnstableTag,
|
|
9164
9244
|
{
|
|
9165
9245
|
variant: "outlined",
|
|
9166
9246
|
label: transitionLabel,
|
|
9167
|
-
endIcon: /* @__PURE__ */
|
|
9168
|
-
...(0,
|
|
9247
|
+
endIcon: /* @__PURE__ */ React119.createElement(import_icons40.ChevronDownIcon, { fontSize: "tiny" }),
|
|
9248
|
+
...(0, import_ui103.bindTrigger)(popoverState),
|
|
9169
9249
|
fullWidth: true
|
|
9170
9250
|
}
|
|
9171
|
-
)), /* @__PURE__ */
|
|
9172
|
-
|
|
9251
|
+
)), /* @__PURE__ */ React119.createElement(
|
|
9252
|
+
import_ui103.Popover,
|
|
9173
9253
|
{
|
|
9174
9254
|
disablePortal: true,
|
|
9175
9255
|
disableScrollLock: true,
|
|
9176
|
-
...(0,
|
|
9256
|
+
...(0, import_ui103.bindPopover)(popoverState),
|
|
9177
9257
|
anchorReference: "anchorPosition",
|
|
9178
9258
|
anchorPosition: getAnchorPosition(),
|
|
9179
9259
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
9180
9260
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
9181
9261
|
},
|
|
9182
|
-
/* @__PURE__ */
|
|
9262
|
+
/* @__PURE__ */ React119.createElement(
|
|
9183
9263
|
ItemSelector,
|
|
9184
9264
|
{
|
|
9185
9265
|
itemsList: getItemList(),
|
|
@@ -9187,11 +9267,11 @@ var TransitionSelector = ({
|
|
|
9187
9267
|
onItemChange: handleTransitionPropertyChange,
|
|
9188
9268
|
onClose: popoverState.close,
|
|
9189
9269
|
sectionWidth: 268,
|
|
9190
|
-
title: (0,
|
|
9191
|
-
icon:
|
|
9270
|
+
title: (0, import_i18n62.__)("Transition Property", "elementor"),
|
|
9271
|
+
icon: import_icons40.VariationsIcon,
|
|
9192
9272
|
disabledItems: includeCurrentValueInOptions(value, disabledItems),
|
|
9193
|
-
categoryItemContentTemplate: (item) => /* @__PURE__ */
|
|
9194
|
-
|
|
9273
|
+
categoryItemContentTemplate: (item) => /* @__PURE__ */ React119.createElement(
|
|
9274
|
+
import_ui103.Box,
|
|
9195
9275
|
{
|
|
9196
9276
|
sx: {
|
|
9197
9277
|
display: "flex",
|
|
@@ -9200,13 +9280,13 @@ var TransitionSelector = ({
|
|
|
9200
9280
|
width: "100%"
|
|
9201
9281
|
}
|
|
9202
9282
|
},
|
|
9203
|
-
/* @__PURE__ */
|
|
9204
|
-
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */
|
|
9283
|
+
/* @__PURE__ */ React119.createElement("span", null, item.value),
|
|
9284
|
+
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React119.createElement(import_editor_ui16.PromotionChip, null)
|
|
9205
9285
|
),
|
|
9206
|
-
footer: showPromotion ? /* @__PURE__ */
|
|
9207
|
-
|
|
9286
|
+
footer: showPromotion ? /* @__PURE__ */ React119.createElement(
|
|
9287
|
+
import_editor_ui16.PromotionAlert,
|
|
9208
9288
|
{
|
|
9209
|
-
message: (0,
|
|
9289
|
+
message: (0, import_i18n62.__)(
|
|
9210
9290
|
"Upgrade to customize transition properties and control effects.",
|
|
9211
9291
|
"elementor"
|
|
9212
9292
|
),
|
|
@@ -9245,8 +9325,8 @@ var areAllPropertiesUsed = (value = []) => {
|
|
|
9245
9325
|
};
|
|
9246
9326
|
var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
9247
9327
|
return {
|
|
9248
|
-
selectionLabel: (0,
|
|
9249
|
-
sizeLabel: (0,
|
|
9328
|
+
selectionLabel: (0, import_i18n63.__)("Type", "elementor"),
|
|
9329
|
+
sizeLabel: (0, import_i18n63.__)("Duration", "elementor"),
|
|
9250
9330
|
selectionConfig: {
|
|
9251
9331
|
component: TransitionSelector,
|
|
9252
9332
|
props: {
|
|
@@ -9322,18 +9402,18 @@ var getInitialValue = (values = []) => {
|
|
|
9322
9402
|
}
|
|
9323
9403
|
return initialTransitionValue;
|
|
9324
9404
|
};
|
|
9325
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
9326
|
-
|
|
9405
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React120.createElement(
|
|
9406
|
+
import_ui104.Alert,
|
|
9327
9407
|
{
|
|
9328
9408
|
sx: {
|
|
9329
9409
|
width: 280,
|
|
9330
9410
|
gap: 0.5
|
|
9331
9411
|
},
|
|
9332
9412
|
color: "secondary",
|
|
9333
|
-
icon: /* @__PURE__ */
|
|
9413
|
+
icon: /* @__PURE__ */ React120.createElement(import_icons41.InfoCircleFilledIcon, null)
|
|
9334
9414
|
},
|
|
9335
|
-
/* @__PURE__ */
|
|
9336
|
-
/* @__PURE__ */
|
|
9415
|
+
/* @__PURE__ */ React120.createElement(import_ui104.AlertTitle, null, (0, import_i18n63.__)("Transitions", "elementor")),
|
|
9416
|
+
/* @__PURE__ */ React120.createElement(import_ui104.Box, { component: "span" }, /* @__PURE__ */ React120.createElement(import_ui104.Typography, { variant: "body2" }, (0, import_i18n63.__)("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
9337
9417
|
);
|
|
9338
9418
|
var TransitionRepeaterControl = createControl(
|
|
9339
9419
|
({
|
|
@@ -9341,14 +9421,14 @@ var TransitionRepeaterControl = createControl(
|
|
|
9341
9421
|
currentStyleState
|
|
9342
9422
|
}) => {
|
|
9343
9423
|
const currentStyleIsNormal = currentStyleState === null;
|
|
9344
|
-
const [recentlyUsedList, setRecentlyUsedList] = (0,
|
|
9424
|
+
const [recentlyUsedList, setRecentlyUsedList] = (0, import_react73.useState)([]);
|
|
9345
9425
|
const proInstalled = (0, import_utils8.hasProInstalled)();
|
|
9346
9426
|
const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
9347
|
-
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0,
|
|
9427
|
+
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react73.useMemo)(
|
|
9348
9428
|
() => getDisabledItemLabels(value),
|
|
9349
9429
|
[value]
|
|
9350
9430
|
);
|
|
9351
|
-
const allowedTransitionSet = (0,
|
|
9431
|
+
const allowedTransitionSet = (0, import_react73.useMemo)(() => {
|
|
9352
9432
|
const set = /* @__PURE__ */ new Set();
|
|
9353
9433
|
transitionProperties.forEach((category) => {
|
|
9354
9434
|
category.properties.forEach((prop) => {
|
|
@@ -9359,7 +9439,7 @@ var TransitionRepeaterControl = createControl(
|
|
|
9359
9439
|
});
|
|
9360
9440
|
return set;
|
|
9361
9441
|
}, [proInstalled]);
|
|
9362
|
-
(0,
|
|
9442
|
+
(0, import_react73.useEffect)(() => {
|
|
9363
9443
|
if (!value || value.length === 0) {
|
|
9364
9444
|
return;
|
|
9365
9445
|
}
|
|
@@ -9371,18 +9451,18 @@ var TransitionRepeaterControl = createControl(
|
|
|
9371
9451
|
setValue(sanitized);
|
|
9372
9452
|
}
|
|
9373
9453
|
}, [allowedTransitionSet]);
|
|
9374
|
-
(0,
|
|
9454
|
+
(0, import_react73.useEffect)(() => {
|
|
9375
9455
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
9376
9456
|
}, [recentlyUsedListGetter]);
|
|
9377
|
-
const allPropertiesUsed = (0,
|
|
9457
|
+
const allPropertiesUsed = (0, import_react73.useMemo)(() => areAllPropertiesUsed(value), [value]);
|
|
9378
9458
|
const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
|
|
9379
|
-
return /* @__PURE__ */
|
|
9459
|
+
return /* @__PURE__ */ React120.createElement(
|
|
9380
9460
|
RepeatableControl,
|
|
9381
9461
|
{
|
|
9382
|
-
label: (0,
|
|
9383
|
-
repeaterLabel: (0,
|
|
9462
|
+
label: (0, import_i18n63.__)("Transitions", "elementor"),
|
|
9463
|
+
repeaterLabel: (0, import_i18n63.__)("Transitions", "elementor"),
|
|
9384
9464
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
9385
|
-
placeholder: (0,
|
|
9465
|
+
placeholder: (0, import_i18n63.__)("Empty Transition", "elementor"),
|
|
9386
9466
|
showDuplicate: false,
|
|
9387
9467
|
showToggle: true,
|
|
9388
9468
|
initialValues: getInitialValue(value),
|
|
@@ -9403,11 +9483,11 @@ var TransitionRepeaterControl = createControl(
|
|
|
9403
9483
|
);
|
|
9404
9484
|
|
|
9405
9485
|
// src/controls/date-time-control.tsx
|
|
9406
|
-
var
|
|
9486
|
+
var React121 = __toESM(require("react"));
|
|
9407
9487
|
var dayjs = __toESM(require("dayjs"));
|
|
9408
9488
|
var import_editor_props58 = require("@elementor/editor-props");
|
|
9409
9489
|
var import_editor_props59 = require("@elementor/editor-props");
|
|
9410
|
-
var
|
|
9490
|
+
var import_ui105 = require("@elementor/ui");
|
|
9411
9491
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
9412
9492
|
var TIME_FORMAT = "HH:mm";
|
|
9413
9493
|
var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
@@ -9451,8 +9531,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9451
9531
|
const base = dayjs.default();
|
|
9452
9532
|
return base.hour(h).minute(m).second(0).millisecond(0);
|
|
9453
9533
|
};
|
|
9454
|
-
return /* @__PURE__ */
|
|
9455
|
-
|
|
9534
|
+
return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(ControlActions, null, /* @__PURE__ */ React121.createElement(import_ui105.LocalizationProvider, null, /* @__PURE__ */ React121.createElement(import_ui105.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React121.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React121.createElement(
|
|
9535
|
+
import_ui105.DatePicker,
|
|
9456
9536
|
{
|
|
9457
9537
|
value: parseDateValue(import_editor_props58.stringPropTypeUtil.extract(value?.date)),
|
|
9458
9538
|
onChange: (v) => handleChange({ date: v }, { bind: "date" }),
|
|
@@ -9463,8 +9543,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9463
9543
|
openPickerIcon: { fontSize: "tiny" }
|
|
9464
9544
|
}
|
|
9465
9545
|
}
|
|
9466
|
-
)), /* @__PURE__ */
|
|
9467
|
-
|
|
9546
|
+
)), /* @__PURE__ */ React121.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React121.createElement(
|
|
9547
|
+
import_ui105.TimePicker,
|
|
9468
9548
|
{
|
|
9469
9549
|
value: parseTimeValue(import_editor_props58.stringPropTypeUtil.extract(value?.time)),
|
|
9470
9550
|
onChange: (v) => handleChange({ time: v }, { bind: "time" }),
|
|
@@ -9479,15 +9559,15 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9479
9559
|
});
|
|
9480
9560
|
|
|
9481
9561
|
// src/controls/date-range-control.tsx
|
|
9482
|
-
var
|
|
9562
|
+
var React123 = __toESM(require("react"));
|
|
9483
9563
|
var import_editor_props61 = require("@elementor/editor-props");
|
|
9484
|
-
var
|
|
9485
|
-
var
|
|
9564
|
+
var import_ui107 = require("@elementor/ui");
|
|
9565
|
+
var import_i18n64 = require("@wordpress/i18n");
|
|
9486
9566
|
|
|
9487
9567
|
// src/controls/date-string-control.tsx
|
|
9488
|
-
var
|
|
9568
|
+
var React122 = __toESM(require("react"));
|
|
9489
9569
|
var import_editor_props60 = require("@elementor/editor-props");
|
|
9490
|
-
var
|
|
9570
|
+
var import_ui106 = require("@elementor/ui");
|
|
9491
9571
|
|
|
9492
9572
|
// src/utils/date-time.ts
|
|
9493
9573
|
var dayjs2 = __toESM(require("dayjs"));
|
|
@@ -9544,8 +9624,8 @@ var DateStringControl = createControl(
|
|
|
9544
9624
|
}
|
|
9545
9625
|
setValue(newValue.format(format));
|
|
9546
9626
|
};
|
|
9547
|
-
return /* @__PURE__ */
|
|
9548
|
-
|
|
9627
|
+
return /* @__PURE__ */ React122.createElement(import_ui106.LocalizationProvider, null, /* @__PURE__ */ React122.createElement(ControlActions, null, /* @__PURE__ */ React122.createElement(
|
|
9628
|
+
import_ui106.DatePicker,
|
|
9549
9629
|
{
|
|
9550
9630
|
value: parseDateString(value ?? ""),
|
|
9551
9631
|
onChange: (newValue) => handleChange(newValue, DATE_FORMAT2),
|
|
@@ -9558,8 +9638,8 @@ var DateStringControl = createControl(
|
|
|
9558
9638
|
|
|
9559
9639
|
// src/controls/date-range-control.tsx
|
|
9560
9640
|
var RANGE_LABELS = {
|
|
9561
|
-
min: (0,
|
|
9562
|
-
max: (0,
|
|
9641
|
+
min: (0, import_i18n64.__)("Min date", "elementor"),
|
|
9642
|
+
max: (0, import_i18n64.__)("Max date", "elementor")
|
|
9563
9643
|
};
|
|
9564
9644
|
var isMaxBeforeMin = (minIso, maxIso) => {
|
|
9565
9645
|
if (!minIso || !maxIso) {
|
|
@@ -9567,40 +9647,40 @@ var isMaxBeforeMin = (minIso, maxIso) => {
|
|
|
9567
9647
|
}
|
|
9568
9648
|
return maxIso < minIso;
|
|
9569
9649
|
};
|
|
9570
|
-
var RANGE_ERROR_MESSAGE = (0,
|
|
9650
|
+
var RANGE_ERROR_MESSAGE = (0, import_i18n64.__)("Max date must be on or after Min date", "elementor");
|
|
9571
9651
|
var DateRangeControl = createControl(() => {
|
|
9572
9652
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props61.dateRangePropTypeUtil);
|
|
9573
9653
|
const minString = import_editor_props61.dateStringPropTypeUtil.extract(value?.min);
|
|
9574
9654
|
const maxString = import_editor_props61.dateStringPropTypeUtil.extract(value?.max);
|
|
9575
9655
|
const hasInvalidRange = isMaxBeforeMin(minString, maxString);
|
|
9576
|
-
return /* @__PURE__ */
|
|
9656
|
+
return /* @__PURE__ */ React123.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React123.createElement(import_ui107.Stack, { gap: 0.75 }, /* @__PURE__ */ React123.createElement(import_ui107.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React123.createElement(import_ui107.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React123.createElement(import_ui107.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React123.createElement(import_ui107.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(
|
|
9577
9657
|
BoundDateStringControl,
|
|
9578
9658
|
{
|
|
9579
9659
|
bind: "min",
|
|
9580
9660
|
ariaLabel: RANGE_LABELS.min,
|
|
9581
9661
|
error: hasInvalidRange
|
|
9582
9662
|
}
|
|
9583
|
-
))), /* @__PURE__ */
|
|
9663
|
+
))), /* @__PURE__ */ React123.createElement(import_ui107.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React123.createElement(import_ui107.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React123.createElement(import_ui107.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React123.createElement(
|
|
9584
9664
|
BoundDateStringControl,
|
|
9585
9665
|
{
|
|
9586
9666
|
bind: "max",
|
|
9587
9667
|
ariaLabel: RANGE_LABELS.max,
|
|
9588
9668
|
error: hasInvalidRange
|
|
9589
9669
|
}
|
|
9590
|
-
)))), hasInvalidRange && /* @__PURE__ */
|
|
9670
|
+
)))), hasInvalidRange && /* @__PURE__ */ React123.createElement(import_ui107.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
|
|
9591
9671
|
});
|
|
9592
9672
|
var BoundDateStringControl = ({
|
|
9593
9673
|
bind,
|
|
9594
9674
|
ariaLabel,
|
|
9595
9675
|
error
|
|
9596
9676
|
}) => {
|
|
9597
|
-
return /* @__PURE__ */
|
|
9677
|
+
return /* @__PURE__ */ React123.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React123.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
|
|
9598
9678
|
};
|
|
9599
9679
|
|
|
9600
9680
|
// src/controls/time-string-control.tsx
|
|
9601
|
-
var
|
|
9681
|
+
var React124 = __toESM(require("react"));
|
|
9602
9682
|
var import_editor_props62 = require("@elementor/editor-props");
|
|
9603
|
-
var
|
|
9683
|
+
var import_ui108 = require("@elementor/ui");
|
|
9604
9684
|
var TimeStringControl = createControl(
|
|
9605
9685
|
({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
|
|
9606
9686
|
const { value, setValue, disabled } = useBoundProp(import_editor_props62.timeStringPropTypeUtil);
|
|
@@ -9626,8 +9706,8 @@ var TimeStringControl = createControl(
|
|
|
9626
9706
|
}
|
|
9627
9707
|
setValue(newValue.format(format));
|
|
9628
9708
|
};
|
|
9629
|
-
return /* @__PURE__ */
|
|
9630
|
-
|
|
9709
|
+
return /* @__PURE__ */ React124.createElement(import_ui108.LocalizationProvider, null, /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(
|
|
9710
|
+
import_ui108.TimePicker,
|
|
9631
9711
|
{
|
|
9632
9712
|
value: parseTimeString(value ?? ""),
|
|
9633
9713
|
onChange: (newValue) => handleChange(newValue, TIME_FORMAT2),
|
|
@@ -9639,32 +9719,32 @@ var TimeStringControl = createControl(
|
|
|
9639
9719
|
);
|
|
9640
9720
|
|
|
9641
9721
|
// src/controls/time-range-control.tsx
|
|
9642
|
-
var
|
|
9722
|
+
var React125 = __toESM(require("react"));
|
|
9643
9723
|
var import_editor_props63 = require("@elementor/editor-props");
|
|
9644
|
-
var
|
|
9645
|
-
var
|
|
9724
|
+
var import_ui109 = require("@elementor/ui");
|
|
9725
|
+
var import_i18n65 = require("@wordpress/i18n");
|
|
9646
9726
|
var RANGE_LABELS2 = {
|
|
9647
|
-
min: (0,
|
|
9648
|
-
max: (0,
|
|
9727
|
+
min: (0, import_i18n65.__)("Start time", "elementor"),
|
|
9728
|
+
max: (0, import_i18n65.__)("End time", "elementor")
|
|
9649
9729
|
};
|
|
9650
9730
|
var TimeRangeControl = createControl(() => {
|
|
9651
9731
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props63.timeRangePropTypeUtil);
|
|
9652
|
-
return /* @__PURE__ */
|
|
9732
|
+
return /* @__PURE__ */ React125.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React125.createElement(import_ui109.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React125.createElement(import_ui109.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React125.createElement(import_ui109.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React125.createElement(import_ui109.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React125.createElement(import_ui109.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React125.createElement(import_ui109.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React125.createElement(import_ui109.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React125.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
|
|
9653
9733
|
});
|
|
9654
9734
|
var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
9655
|
-
return /* @__PURE__ */
|
|
9735
|
+
return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React125.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
|
|
9656
9736
|
};
|
|
9657
9737
|
|
|
9658
9738
|
// src/controls/inline-editing-control.tsx
|
|
9659
|
-
var
|
|
9660
|
-
var
|
|
9739
|
+
var React129 = __toESM(require("react"));
|
|
9740
|
+
var import_react79 = require("react");
|
|
9661
9741
|
var import_editor_props65 = require("@elementor/editor-props");
|
|
9662
|
-
var
|
|
9742
|
+
var import_ui113 = require("@elementor/ui");
|
|
9663
9743
|
|
|
9664
9744
|
// src/components/inline-editor.tsx
|
|
9665
|
-
var
|
|
9666
|
-
var
|
|
9667
|
-
var
|
|
9745
|
+
var React126 = __toESM(require("react"));
|
|
9746
|
+
var import_react74 = require("react");
|
|
9747
|
+
var import_ui110 = require("@elementor/ui");
|
|
9668
9748
|
var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
|
|
9669
9749
|
var import_extension_document = __toESM(require("@tiptap/extension-document"));
|
|
9670
9750
|
var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
|
|
@@ -9677,7 +9757,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
|
|
|
9677
9757
|
var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
|
|
9678
9758
|
var import_extension_text = __toESM(require("@tiptap/extension-text"));
|
|
9679
9759
|
var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
|
|
9680
|
-
var
|
|
9760
|
+
var import_react75 = require("@tiptap/react");
|
|
9681
9761
|
|
|
9682
9762
|
// src/utils/inline-editing.ts
|
|
9683
9763
|
var import_editor_props64 = require("@elementor/editor-props");
|
|
@@ -9709,7 +9789,7 @@ function extractInlineHtmlContent(propValue) {
|
|
|
9709
9789
|
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
9710
9790
|
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
9711
9791
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
9712
|
-
var InlineEditor =
|
|
9792
|
+
var InlineEditor = React126.forwardRef((props, ref) => {
|
|
9713
9793
|
const {
|
|
9714
9794
|
value,
|
|
9715
9795
|
setValue,
|
|
@@ -9726,8 +9806,8 @@ var InlineEditor = React125.forwardRef((props, ref) => {
|
|
|
9726
9806
|
onSelectionEnd,
|
|
9727
9807
|
mountElement = null
|
|
9728
9808
|
} = props;
|
|
9729
|
-
const containerRef = (0,
|
|
9730
|
-
const onBlurRef = (0,
|
|
9809
|
+
const containerRef = (0, import_react74.useRef)(null);
|
|
9810
|
+
const onBlurRef = (0, import_react74.useRef)(onBlur);
|
|
9731
9811
|
onBlurRef.current = onBlur;
|
|
9732
9812
|
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
9733
9813
|
const onUpdate = ({ editor: updatedEditor }) => {
|
|
@@ -9749,7 +9829,7 @@ var InlineEditor = React125.forwardRef((props, ref) => {
|
|
|
9749
9829
|
...HTMLAttributes,
|
|
9750
9830
|
class: elementClasses
|
|
9751
9831
|
});
|
|
9752
|
-
const editor = (0,
|
|
9832
|
+
const editor = (0, import_react75.useEditor)({
|
|
9753
9833
|
...mountElement ? { element: mountElement } : {},
|
|
9754
9834
|
extensions: [
|
|
9755
9835
|
import_extension_document.default.extend({
|
|
@@ -9822,11 +9902,11 @@ var InlineEditor = React125.forwardRef((props, ref) => {
|
|
|
9822
9902
|
if (mountElement) {
|
|
9823
9903
|
return null;
|
|
9824
9904
|
}
|
|
9825
|
-
return /* @__PURE__ */
|
|
9905
|
+
return /* @__PURE__ */ React126.createElement(import_ui110.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React126.createElement(import_react75.EditorContent, { ref, editor }));
|
|
9826
9906
|
});
|
|
9827
9907
|
var useOnUpdate = (callback, dependencies) => {
|
|
9828
|
-
const hasMounted = (0,
|
|
9829
|
-
(0,
|
|
9908
|
+
const hasMounted = (0, import_react74.useRef)(false);
|
|
9909
|
+
(0, import_react74.useEffect)(() => {
|
|
9830
9910
|
if (hasMounted.current) {
|
|
9831
9911
|
callback();
|
|
9832
9912
|
} else {
|
|
@@ -9836,20 +9916,20 @@ var useOnUpdate = (callback, dependencies) => {
|
|
|
9836
9916
|
};
|
|
9837
9917
|
|
|
9838
9918
|
// src/components/inline-editor-toolbar.tsx
|
|
9919
|
+
var React128 = __toESM(require("react"));
|
|
9920
|
+
var import_react77 = require("react");
|
|
9921
|
+
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
9922
|
+
var import_icons43 = require("@elementor/icons");
|
|
9923
|
+
var import_ui112 = require("@elementor/ui");
|
|
9924
|
+
var import_react78 = require("@tiptap/react");
|
|
9925
|
+
var import_i18n67 = require("@wordpress/i18n");
|
|
9926
|
+
|
|
9927
|
+
// src/components/url-popover.tsx
|
|
9839
9928
|
var React127 = __toESM(require("react"));
|
|
9840
9929
|
var import_react76 = require("react");
|
|
9841
|
-
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
9842
9930
|
var import_icons42 = require("@elementor/icons");
|
|
9843
9931
|
var import_ui111 = require("@elementor/ui");
|
|
9844
|
-
var import_react77 = require("@tiptap/react");
|
|
9845
9932
|
var import_i18n66 = require("@wordpress/i18n");
|
|
9846
|
-
|
|
9847
|
-
// src/components/url-popover.tsx
|
|
9848
|
-
var React126 = __toESM(require("react"));
|
|
9849
|
-
var import_react75 = require("react");
|
|
9850
|
-
var import_icons41 = require("@elementor/icons");
|
|
9851
|
-
var import_ui110 = require("@elementor/ui");
|
|
9852
|
-
var import_i18n65 = require("@wordpress/i18n");
|
|
9853
9933
|
var UrlPopover = ({
|
|
9854
9934
|
popupState,
|
|
9855
9935
|
restoreValue,
|
|
@@ -9859,8 +9939,8 @@ var UrlPopover = ({
|
|
|
9859
9939
|
openInNewTab,
|
|
9860
9940
|
onToggleNewTab
|
|
9861
9941
|
}) => {
|
|
9862
|
-
const inputRef = (0,
|
|
9863
|
-
(0,
|
|
9942
|
+
const inputRef = (0, import_react76.useRef)(null);
|
|
9943
|
+
(0, import_react76.useEffect)(() => {
|
|
9864
9944
|
if (popupState.isOpen) {
|
|
9865
9945
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
9866
9946
|
}
|
|
@@ -9869,41 +9949,41 @@ var UrlPopover = ({
|
|
|
9869
9949
|
restoreValue();
|
|
9870
9950
|
popupState.close();
|
|
9871
9951
|
};
|
|
9872
|
-
return /* @__PURE__ */
|
|
9873
|
-
|
|
9952
|
+
return /* @__PURE__ */ React127.createElement(
|
|
9953
|
+
import_ui111.Popover,
|
|
9874
9954
|
{
|
|
9875
9955
|
slotProps: {
|
|
9876
9956
|
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
9877
9957
|
},
|
|
9878
|
-
...(0,
|
|
9958
|
+
...(0, import_ui111.bindPopover)(popupState),
|
|
9879
9959
|
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
9880
9960
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
9881
9961
|
onClose: handleClose
|
|
9882
9962
|
},
|
|
9883
|
-
/* @__PURE__ */
|
|
9884
|
-
|
|
9963
|
+
/* @__PURE__ */ React127.createElement(import_ui111.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React127.createElement(
|
|
9964
|
+
import_ui111.TextField,
|
|
9885
9965
|
{
|
|
9886
9966
|
value,
|
|
9887
9967
|
onChange,
|
|
9888
9968
|
size: "tiny",
|
|
9889
9969
|
fullWidth: true,
|
|
9890
|
-
placeholder: (0,
|
|
9970
|
+
placeholder: (0, import_i18n66.__)("Type a URL", "elementor"),
|
|
9891
9971
|
inputProps: { ref: inputRef },
|
|
9892
9972
|
color: "secondary",
|
|
9893
9973
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
9894
9974
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
9895
9975
|
}
|
|
9896
|
-
), /* @__PURE__ */
|
|
9897
|
-
|
|
9976
|
+
), /* @__PURE__ */ React127.createElement(import_ui111.Tooltip, { title: (0, import_i18n66.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React127.createElement(
|
|
9977
|
+
import_ui111.ToggleButton,
|
|
9898
9978
|
{
|
|
9899
9979
|
size: "tiny",
|
|
9900
9980
|
value: "newTab",
|
|
9901
9981
|
selected: openInNewTab,
|
|
9902
9982
|
onClick: onToggleNewTab,
|
|
9903
|
-
"aria-label": (0,
|
|
9983
|
+
"aria-label": (0, import_i18n66.__)("Open in a new tab", "elementor"),
|
|
9904
9984
|
sx: { borderRadius: "8px" }
|
|
9905
9985
|
},
|
|
9906
|
-
/* @__PURE__ */
|
|
9986
|
+
/* @__PURE__ */ React127.createElement(import_icons42.ExternalLinkIcon, { fontSize: "tiny" })
|
|
9907
9987
|
)))
|
|
9908
9988
|
);
|
|
9909
9989
|
};
|
|
@@ -9915,16 +9995,16 @@ var InlineEditorToolbar = ({
|
|
|
9915
9995
|
sx = {},
|
|
9916
9996
|
inControlPanel = false
|
|
9917
9997
|
}) => {
|
|
9918
|
-
const [urlValue, setUrlValue] = (0,
|
|
9919
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
9920
|
-
const toolbarRef = (0,
|
|
9921
|
-
const linkPopupState = (0,
|
|
9998
|
+
const [urlValue, setUrlValue] = (0, import_react77.useState)("");
|
|
9999
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react77.useState)(false);
|
|
10000
|
+
const toolbarRef = (0, import_react77.useRef)(null);
|
|
10001
|
+
const linkPopupState = (0, import_ui112.usePopupState)({ variant: "popover" });
|
|
9922
10002
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
9923
|
-
const editorState = (0,
|
|
10003
|
+
const editorState = (0, import_react78.useEditorState)({
|
|
9924
10004
|
editor,
|
|
9925
10005
|
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
9926
10006
|
});
|
|
9927
|
-
const formatButtonsList = (0,
|
|
10007
|
+
const formatButtonsList = (0, import_react77.useMemo)(() => {
|
|
9928
10008
|
const buttons = Object.values(formatButtons);
|
|
9929
10009
|
if (isElementClickable) {
|
|
9930
10010
|
return buttons.filter((button) => button.action !== "link");
|
|
@@ -9961,13 +10041,13 @@ var InlineEditorToolbar = ({
|
|
|
9961
10041
|
}
|
|
9962
10042
|
linkPopupState.close();
|
|
9963
10043
|
};
|
|
9964
|
-
(0,
|
|
10044
|
+
(0, import_react77.useEffect)(() => {
|
|
9965
10045
|
if (!inControlPanel) {
|
|
9966
10046
|
editor?.commands?.focus();
|
|
9967
10047
|
}
|
|
9968
10048
|
}, [editor, inControlPanel]);
|
|
9969
|
-
return /* @__PURE__ */
|
|
9970
|
-
|
|
10049
|
+
return /* @__PURE__ */ React128.createElement(
|
|
10050
|
+
import_ui112.Box,
|
|
9971
10051
|
{
|
|
9972
10052
|
ref: toolbarRef,
|
|
9973
10053
|
sx: {
|
|
@@ -10000,9 +10080,9 @@ var InlineEditorToolbar = ({
|
|
|
10000
10080
|
}
|
|
10001
10081
|
}
|
|
10002
10082
|
},
|
|
10003
|
-
/* @__PURE__ */
|
|
10004
|
-
/* @__PURE__ */
|
|
10005
|
-
|
|
10083
|
+
/* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
10084
|
+
/* @__PURE__ */ React128.createElement(
|
|
10085
|
+
import_ui112.ToggleButtonGroup,
|
|
10006
10086
|
{
|
|
10007
10087
|
value: editorState,
|
|
10008
10088
|
size: "tiny",
|
|
@@ -10010,7 +10090,7 @@ var InlineEditorToolbar = ({
|
|
|
10010
10090
|
display: "flex",
|
|
10011
10091
|
gap: 0.5,
|
|
10012
10092
|
border: "none",
|
|
10013
|
-
[`& .${
|
|
10093
|
+
[`& .${import_ui112.toggleButtonGroupClasses.firstButton}, & .${import_ui112.toggleButtonGroupClasses.middleButton}, & .${import_ui112.toggleButtonGroupClasses.lastButton}`]: {
|
|
10014
10094
|
borderRadius: "8px",
|
|
10015
10095
|
border: "none",
|
|
10016
10096
|
marginLeft: 0,
|
|
@@ -10031,8 +10111,8 @@ var InlineEditorToolbar = ({
|
|
|
10031
10111
|
}
|
|
10032
10112
|
}
|
|
10033
10113
|
},
|
|
10034
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
10035
|
-
|
|
10114
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React128.createElement(
|
|
10115
|
+
import_ui112.ToggleButton,
|
|
10036
10116
|
{
|
|
10037
10117
|
value: button.action,
|
|
10038
10118
|
"aria-label": button.label,
|
|
@@ -10049,7 +10129,7 @@ var InlineEditorToolbar = ({
|
|
|
10049
10129
|
button.icon
|
|
10050
10130
|
)))
|
|
10051
10131
|
),
|
|
10052
|
-
/* @__PURE__ */
|
|
10132
|
+
/* @__PURE__ */ React128.createElement(
|
|
10053
10133
|
UrlPopover,
|
|
10054
10134
|
{
|
|
10055
10135
|
popupState: linkPopupState,
|
|
@@ -10072,64 +10152,64 @@ var checkIfElementIsClickable = (elementId) => {
|
|
|
10072
10152
|
};
|
|
10073
10153
|
var toolbarButtons = {
|
|
10074
10154
|
clear: {
|
|
10075
|
-
label: (0,
|
|
10076
|
-
icon: /* @__PURE__ */
|
|
10155
|
+
label: (0, import_i18n67.__)("Clear", "elementor"),
|
|
10156
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons43.MinusIcon, { fontSize: "tiny" }),
|
|
10077
10157
|
action: "clear",
|
|
10078
10158
|
method: (editor) => {
|
|
10079
10159
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
10080
10160
|
}
|
|
10081
10161
|
},
|
|
10082
10162
|
bold: {
|
|
10083
|
-
label: (0,
|
|
10084
|
-
icon: /* @__PURE__ */
|
|
10163
|
+
label: (0, import_i18n67.__)("Bold", "elementor"),
|
|
10164
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons43.BoldIcon, { fontSize: "tiny" }),
|
|
10085
10165
|
action: "bold",
|
|
10086
10166
|
method: (editor) => {
|
|
10087
10167
|
editor.chain().focus().toggleBold().run();
|
|
10088
10168
|
}
|
|
10089
10169
|
},
|
|
10090
10170
|
italic: {
|
|
10091
|
-
label: (0,
|
|
10092
|
-
icon: /* @__PURE__ */
|
|
10171
|
+
label: (0, import_i18n67.__)("Italic", "elementor"),
|
|
10172
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons43.ItalicIcon, { fontSize: "tiny" }),
|
|
10093
10173
|
action: "italic",
|
|
10094
10174
|
method: (editor) => {
|
|
10095
10175
|
editor.chain().focus().toggleItalic().run();
|
|
10096
10176
|
}
|
|
10097
10177
|
},
|
|
10098
10178
|
underline: {
|
|
10099
|
-
label: (0,
|
|
10100
|
-
icon: /* @__PURE__ */
|
|
10179
|
+
label: (0, import_i18n67.__)("Underline", "elementor"),
|
|
10180
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons43.UnderlineIcon, { fontSize: "tiny" }),
|
|
10101
10181
|
action: "underline",
|
|
10102
10182
|
method: (editor) => {
|
|
10103
10183
|
editor.chain().focus().toggleUnderline().run();
|
|
10104
10184
|
}
|
|
10105
10185
|
},
|
|
10106
10186
|
strike: {
|
|
10107
|
-
label: (0,
|
|
10108
|
-
icon: /* @__PURE__ */
|
|
10187
|
+
label: (0, import_i18n67.__)("Strikethrough", "elementor"),
|
|
10188
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons43.StrikethroughIcon, { fontSize: "tiny" }),
|
|
10109
10189
|
action: "strike",
|
|
10110
10190
|
method: (editor) => {
|
|
10111
10191
|
editor.chain().focus().toggleStrike().run();
|
|
10112
10192
|
}
|
|
10113
10193
|
},
|
|
10114
10194
|
superscript: {
|
|
10115
|
-
label: (0,
|
|
10116
|
-
icon: /* @__PURE__ */
|
|
10195
|
+
label: (0, import_i18n67.__)("Superscript", "elementor"),
|
|
10196
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons43.SuperscriptIcon, { fontSize: "tiny" }),
|
|
10117
10197
|
action: "superscript",
|
|
10118
10198
|
method: (editor) => {
|
|
10119
10199
|
editor.chain().focus().toggleSuperscript().run();
|
|
10120
10200
|
}
|
|
10121
10201
|
},
|
|
10122
10202
|
subscript: {
|
|
10123
|
-
label: (0,
|
|
10124
|
-
icon: /* @__PURE__ */
|
|
10203
|
+
label: (0, import_i18n67.__)("Subscript", "elementor"),
|
|
10204
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons43.SubscriptIcon, { fontSize: "tiny" }),
|
|
10125
10205
|
action: "subscript",
|
|
10126
10206
|
method: (editor) => {
|
|
10127
10207
|
editor.chain().focus().toggleSubscript().run();
|
|
10128
10208
|
}
|
|
10129
10209
|
},
|
|
10130
10210
|
link: {
|
|
10131
|
-
label: (0,
|
|
10132
|
-
icon: /* @__PURE__ */
|
|
10211
|
+
label: (0, import_i18n67.__)("Link", "elementor"),
|
|
10212
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons43.LinkIcon, { fontSize: "tiny" }),
|
|
10133
10213
|
action: "link",
|
|
10134
10214
|
method: null
|
|
10135
10215
|
}
|
|
@@ -10143,15 +10223,15 @@ var InlineEditingControl = createControl(
|
|
|
10143
10223
|
const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
|
|
10144
10224
|
const { value: rawValue } = usePropKeyContext();
|
|
10145
10225
|
const content = value ?? extractInlineHtmlContent(rawValue);
|
|
10146
|
-
const [editor, setEditor] = (0,
|
|
10147
|
-
const handleChange = (0,
|
|
10226
|
+
const [editor, setEditor] = (0, import_react79.useState)(null);
|
|
10227
|
+
const handleChange = (0, import_react79.useCallback)(
|
|
10148
10228
|
(newValue) => {
|
|
10149
10229
|
const html = newValue ?? "";
|
|
10150
10230
|
setValue(html);
|
|
10151
10231
|
},
|
|
10152
10232
|
[setValue]
|
|
10153
10233
|
);
|
|
10154
|
-
const editorField = /* @__PURE__ */
|
|
10234
|
+
const editorField = /* @__PURE__ */ React129.createElement(ControlActions, null, /* @__PURE__ */ React129.createElement(import_ui113.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React129.createElement(
|
|
10155
10235
|
InlineEditorToolbar,
|
|
10156
10236
|
{
|
|
10157
10237
|
editor,
|
|
@@ -10164,8 +10244,8 @@ var InlineEditingControl = createControl(
|
|
|
10164
10244
|
}),
|
|
10165
10245
|
inControlPanel: true
|
|
10166
10246
|
}
|
|
10167
|
-
), /* @__PURE__ */
|
|
10168
|
-
|
|
10247
|
+
), /* @__PURE__ */ React129.createElement(
|
|
10248
|
+
import_ui113.Box,
|
|
10169
10249
|
{
|
|
10170
10250
|
sx: (theme) => ({
|
|
10171
10251
|
p: 0.8,
|
|
@@ -10209,7 +10289,7 @@ var InlineEditingControl = createControl(
|
|
|
10209
10289
|
...attributes,
|
|
10210
10290
|
...props
|
|
10211
10291
|
},
|
|
10212
|
-
/* @__PURE__ */
|
|
10292
|
+
/* @__PURE__ */ React129.createElement(
|
|
10213
10293
|
InlineEditor,
|
|
10214
10294
|
{
|
|
10215
10295
|
value: content,
|
|
@@ -10226,23 +10306,23 @@ var InlineEditingControl = createControl(
|
|
|
10226
10306
|
if (!promotion) {
|
|
10227
10307
|
return editorField;
|
|
10228
10308
|
}
|
|
10229
|
-
return /* @__PURE__ */
|
|
10309
|
+
return /* @__PURE__ */ React129.createElement(import_ui113.Stack, { gap: 1 }, /* @__PURE__ */ React129.createElement(import_ui113.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React129.createElement(ControlLabel, null, label), /* @__PURE__ */ React129.createElement(ImageOptimizeTrigger, { promotion })), editorField);
|
|
10230
10310
|
}
|
|
10231
10311
|
);
|
|
10232
10312
|
|
|
10233
10313
|
// src/controls/email-form-action-control/index.tsx
|
|
10234
|
-
var
|
|
10314
|
+
var React133 = __toESM(require("react"));
|
|
10235
10315
|
var import_editor_props68 = require("@elementor/editor-props");
|
|
10316
|
+
var import_editor_ui18 = require("@elementor/editor-ui");
|
|
10317
|
+
var import_ui117 = require("@elementor/ui");
|
|
10318
|
+
var import_i18n69 = require("@wordpress/i18n");
|
|
10319
|
+
|
|
10320
|
+
// src/controls/email-form-action-control/fields.tsx
|
|
10321
|
+
var React132 = __toESM(require("react"));
|
|
10236
10322
|
var import_editor_ui17 = require("@elementor/editor-ui");
|
|
10237
10323
|
var import_ui116 = require("@elementor/ui");
|
|
10238
10324
|
var import_i18n68 = require("@wordpress/i18n");
|
|
10239
10325
|
|
|
10240
|
-
// src/controls/email-form-action-control/fields.tsx
|
|
10241
|
-
var React131 = __toESM(require("react"));
|
|
10242
|
-
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
10243
|
-
var import_ui115 = require("@elementor/ui");
|
|
10244
|
-
var import_i18n67 = require("@wordpress/i18n");
|
|
10245
|
-
|
|
10246
10326
|
// src/hooks/use-form-field-suggestions.ts
|
|
10247
10327
|
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
10248
10328
|
var import_editor_props66 = require("@elementor/editor-props");
|
|
@@ -10330,10 +10410,10 @@ function useFormFieldSuggestions(options) {
|
|
|
10330
10410
|
}
|
|
10331
10411
|
|
|
10332
10412
|
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
10333
|
-
var
|
|
10334
|
-
var
|
|
10413
|
+
var React130 = __toESM(require("react"));
|
|
10414
|
+
var import_react80 = require("react");
|
|
10335
10415
|
var import_editor_props67 = require("@elementor/editor-props");
|
|
10336
|
-
var
|
|
10416
|
+
var import_ui114 = require("@elementor/ui");
|
|
10337
10417
|
|
|
10338
10418
|
// src/controls/email-form-action-control/utils.ts
|
|
10339
10419
|
var import_schema = require("@elementor/schema");
|
|
@@ -10369,10 +10449,10 @@ function resolveMention(raw, suggestions) {
|
|
|
10369
10449
|
}
|
|
10370
10450
|
var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
10371
10451
|
const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
|
|
10372
|
-
const [inputValue, setInputValue] = (0,
|
|
10452
|
+
const [inputValue, setInputValue] = (0, import_react80.useState)("");
|
|
10373
10453
|
const items2 = value || [];
|
|
10374
10454
|
const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
|
|
10375
|
-
const suggestionOptions = (0,
|
|
10455
|
+
const suggestionOptions = (0, import_react80.useMemo)(
|
|
10376
10456
|
() => suggestions.map((suggestion) => `[${suggestion.value}]`),
|
|
10377
10457
|
[suggestions]
|
|
10378
10458
|
);
|
|
@@ -10407,8 +10487,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10407
10487
|
tryAddChip(inputValue);
|
|
10408
10488
|
}
|
|
10409
10489
|
};
|
|
10410
|
-
return /* @__PURE__ */
|
|
10411
|
-
|
|
10490
|
+
return /* @__PURE__ */ React130.createElement(ControlActions, null, /* @__PURE__ */ React130.createElement(
|
|
10491
|
+
import_ui114.Autocomplete,
|
|
10412
10492
|
{
|
|
10413
10493
|
fullWidth: true,
|
|
10414
10494
|
multiple: true,
|
|
@@ -10432,17 +10512,17 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10432
10512
|
onBlur: handleBlur,
|
|
10433
10513
|
getOptionLabel: (option) => option,
|
|
10434
10514
|
isOptionEqualToValue: (option, val) => option === val,
|
|
10435
|
-
renderInput: (params) => /* @__PURE__ */
|
|
10436
|
-
renderTags: (tagValues, getTagProps) => /* @__PURE__ */
|
|
10515
|
+
renderInput: (params) => /* @__PURE__ */ React130.createElement(import_ui114.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
|
|
10516
|
+
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React130.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
|
|
10437
10517
|
}
|
|
10438
10518
|
));
|
|
10439
10519
|
});
|
|
10440
|
-
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */
|
|
10520
|
+
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React130.createElement(import_ui114.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React130.createElement(import_ui114.Grid, { item: true }, /* @__PURE__ */ React130.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React130.createElement(import_ui114.Grid, { item: true }, /* @__PURE__ */ React130.createElement(EmailChipsControl, { placeholder, suggestions })));
|
|
10441
10521
|
|
|
10442
10522
|
// src/controls/email-form-action-control/email-field.tsx
|
|
10443
|
-
var
|
|
10444
|
-
var
|
|
10445
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
10523
|
+
var React131 = __toESM(require("react"));
|
|
10524
|
+
var import_ui115 = require("@elementor/ui");
|
|
10525
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React131.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React131.createElement(import_ui115.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React131.createElement(import_ui115.Grid, { item: true }, /* @__PURE__ */ React131.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React131.createElement(import_ui115.Grid, { item: true }, /* @__PURE__ */ React131.createElement(TextControl, { placeholder }))));
|
|
10446
10526
|
|
|
10447
10527
|
// src/controls/email-form-action-control/fields.tsx
|
|
10448
10528
|
var FieldValueMentionField = ({
|
|
@@ -10451,88 +10531,88 @@ var FieldValueMentionField = ({
|
|
|
10451
10531
|
placeholder
|
|
10452
10532
|
}) => {
|
|
10453
10533
|
const suggestions = useFormFieldSuggestions();
|
|
10454
|
-
return /* @__PURE__ */
|
|
10534
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(MentionTextAreaControl, { suggestions, rows: 1, placeholder }))));
|
|
10455
10535
|
};
|
|
10456
10536
|
var SendToField = ({ placeholder }) => {
|
|
10457
10537
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10458
|
-
return /* @__PURE__ */
|
|
10538
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React132.createElement(import_ui116.Stack, { gap: 0.5 }, /* @__PURE__ */ React132.createElement(
|
|
10459
10539
|
EmailChipsField,
|
|
10460
10540
|
{
|
|
10461
|
-
fieldLabel: (0,
|
|
10541
|
+
fieldLabel: (0, import_i18n68.__)("Send to", "elementor"),
|
|
10462
10542
|
placeholder,
|
|
10463
10543
|
suggestions
|
|
10464
10544
|
}
|
|
10465
|
-
), shouldShowMentionsInfo() && /* @__PURE__ */
|
|
10545
|
+
), shouldShowMentionsInfo() && /* @__PURE__ */ React132.createElement(import_editor_ui17.InfoAlert, null, (0, import_i18n68.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
|
|
10466
10546
|
};
|
|
10467
|
-
var SubjectField = () => /* @__PURE__ */
|
|
10547
|
+
var SubjectField = () => /* @__PURE__ */ React132.createElement(
|
|
10468
10548
|
FieldValueMentionField,
|
|
10469
10549
|
{
|
|
10470
10550
|
bind: "subject",
|
|
10471
|
-
label: (0,
|
|
10472
|
-
placeholder: (0,
|
|
10551
|
+
label: (0, import_i18n68.__)("Email subject", "elementor"),
|
|
10552
|
+
placeholder: (0, import_i18n68.__)("New form submission", "elementor")
|
|
10473
10553
|
}
|
|
10474
10554
|
);
|
|
10475
10555
|
var MessageField = () => {
|
|
10476
10556
|
const suggestions = useFormFieldSuggestions();
|
|
10477
|
-
return /* @__PURE__ */
|
|
10557
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, (0, import_i18n68.__)("Message", "elementor"))), /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(import_editor_ui17.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n68.__)(
|
|
10478
10558
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
10479
10559
|
"elementor"
|
|
10480
|
-
) : (0,
|
|
10560
|
+
) : (0, import_i18n68.__)("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
10481
10561
|
};
|
|
10482
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
10562
|
+
var FromEmailField = () => /* @__PURE__ */ React132.createElement(
|
|
10483
10563
|
EmailField,
|
|
10484
10564
|
{
|
|
10485
10565
|
bind: "from",
|
|
10486
|
-
label: (0,
|
|
10487
|
-
placeholder: (0,
|
|
10566
|
+
label: (0, import_i18n68.__)("From email", "elementor"),
|
|
10567
|
+
placeholder: (0, import_i18n68.__)("What email should appear as the sender?", "elementor")
|
|
10488
10568
|
}
|
|
10489
10569
|
);
|
|
10490
|
-
var FromNameField = () => /* @__PURE__ */
|
|
10570
|
+
var FromNameField = () => /* @__PURE__ */ React132.createElement(
|
|
10491
10571
|
FieldValueMentionField,
|
|
10492
10572
|
{
|
|
10493
10573
|
bind: "from-name",
|
|
10494
|
-
label: (0,
|
|
10495
|
-
placeholder: (0,
|
|
10574
|
+
label: (0, import_i18n68.__)("From name", "elementor"),
|
|
10575
|
+
placeholder: (0, import_i18n68.__)("What name should appear as the sender?", "elementor")
|
|
10496
10576
|
}
|
|
10497
10577
|
);
|
|
10498
10578
|
var ReplyToField = () => {
|
|
10499
10579
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10500
|
-
return /* @__PURE__ */
|
|
10580
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, (0, import_i18n68.__)("Reply-to", "elementor"))), /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(
|
|
10501
10581
|
MentionTextAreaControl,
|
|
10502
10582
|
{
|
|
10503
10583
|
suggestions: emailSuggestions,
|
|
10504
10584
|
rows: 1,
|
|
10505
10585
|
triggerPosition: "start",
|
|
10506
|
-
placeholder: (0,
|
|
10586
|
+
placeholder: (0, import_i18n68.__)("You can type @ to insert an email field", "elementor")
|
|
10507
10587
|
}
|
|
10508
10588
|
))));
|
|
10509
10589
|
};
|
|
10510
10590
|
var CcField = () => {
|
|
10511
10591
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10512
|
-
return /* @__PURE__ */
|
|
10592
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React132.createElement(EmailChipsField, { fieldLabel: (0, import_i18n68.__)("Cc", "elementor"), suggestions }));
|
|
10513
10593
|
};
|
|
10514
10594
|
var BccField = () => {
|
|
10515
10595
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10516
|
-
return /* @__PURE__ */
|
|
10596
|
+
return /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React132.createElement(EmailChipsField, { fieldLabel: (0, import_i18n68.__)("Bcc", "elementor"), suggestions }));
|
|
10517
10597
|
};
|
|
10518
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
10598
|
+
var MetaDataField = () => /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React132.createElement(import_ui116.Stack, { gap: 0.5 }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, (0, import_i18n68.__)("Metadata", "elementor")), /* @__PURE__ */ React132.createElement(
|
|
10519
10599
|
ChipsControl,
|
|
10520
10600
|
{
|
|
10521
10601
|
options: [
|
|
10522
|
-
{ label: (0,
|
|
10523
|
-
{ label: (0,
|
|
10524
|
-
{ label: (0,
|
|
10525
|
-
{ label: (0,
|
|
10526
|
-
{ label: (0,
|
|
10602
|
+
{ label: (0, import_i18n68.__)("Date", "elementor"), value: "date" },
|
|
10603
|
+
{ label: (0, import_i18n68.__)("Time", "elementor"), value: "time" },
|
|
10604
|
+
{ label: (0, import_i18n68.__)("Page URL", "elementor"), value: "page-url" },
|
|
10605
|
+
{ label: (0, import_i18n68.__)("User agent", "elementor"), value: "user-agent" },
|
|
10606
|
+
{ label: (0, import_i18n68.__)("Credit", "elementor"), value: "credit" }
|
|
10527
10607
|
]
|
|
10528
10608
|
}
|
|
10529
10609
|
)));
|
|
10530
|
-
var SendAsField = () => /* @__PURE__ */
|
|
10610
|
+
var SendAsField = () => /* @__PURE__ */ React132.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(ControlFormLabel, null, (0, import_i18n68.__)("Send as", "elementor"))), /* @__PURE__ */ React132.createElement(import_ui116.Grid, { item: true }, /* @__PURE__ */ React132.createElement(
|
|
10531
10611
|
SelectControl,
|
|
10532
10612
|
{
|
|
10533
10613
|
options: [
|
|
10534
|
-
{ label: (0,
|
|
10535
|
-
{ label: (0,
|
|
10614
|
+
{ label: (0, import_i18n68.__)("HTML", "elementor"), value: "html" },
|
|
10615
|
+
{ label: (0, import_i18n68.__)("Plain Text", "elementor"), value: "plain" }
|
|
10536
10616
|
]
|
|
10537
10617
|
}
|
|
10538
10618
|
))));
|
|
@@ -10541,27 +10621,27 @@ var SendAsField = () => /* @__PURE__ */ React131.createElement(PropKeyProvider,
|
|
|
10541
10621
|
var EmailFormActionControl = createControl(
|
|
10542
10622
|
({ toPlaceholder, label }) => {
|
|
10543
10623
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props68.emailsPropTypeUtil);
|
|
10544
|
-
return /* @__PURE__ */
|
|
10624
|
+
return /* @__PURE__ */ React133.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React133.createElement(import_ui117.Stack, { gap: 2 }, /* @__PURE__ */ React133.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n69.__)("settings", "elementor") : (0, import_i18n69.__)("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)));
|
|
10545
10625
|
}
|
|
10546
10626
|
);
|
|
10547
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
10627
|
+
var AdvancedSettings = () => /* @__PURE__ */ React133.createElement(import_editor_ui18.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React133.createElement(import_ui117.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React133.createElement(import_ui117.Stack, { 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(import_ui117.Divider, null), /* @__PURE__ */ React133.createElement(MetaDataField, null), /* @__PURE__ */ React133.createElement(SendAsField, null))));
|
|
10548
10628
|
|
|
10549
10629
|
// src/controls/attachment-type-control.tsx
|
|
10550
|
-
var
|
|
10551
|
-
var
|
|
10552
|
-
var
|
|
10553
|
-
var
|
|
10630
|
+
var React134 = __toESM(require("react"));
|
|
10631
|
+
var import_editor_ui19 = require("@elementor/editor-ui");
|
|
10632
|
+
var import_ui118 = require("@elementor/ui");
|
|
10633
|
+
var import_i18n70 = require("@wordpress/i18n");
|
|
10554
10634
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
10555
|
-
return /* @__PURE__ */
|
|
10635
|
+
return /* @__PURE__ */ React134.createElement(import_ui118.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React134.createElement(import_ui118.Grid, { item: true }, /* @__PURE__ */ React134.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React134.createElement(import_ui118.Grid, { item: true }, /* @__PURE__ */ React134.createElement(SelectControl, { options })), /* @__PURE__ */ React134.createElement(import_ui118.Grid, { item: true }, /* @__PURE__ */ React134.createElement(import_editor_ui19.InfoAlert, null, (0, import_i18n70.__)(
|
|
10556
10636
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
10557
10637
|
"elementor"
|
|
10558
10638
|
))));
|
|
10559
10639
|
});
|
|
10560
10640
|
|
|
10561
10641
|
// src/controls/grid-span-control.tsx
|
|
10562
|
-
var
|
|
10642
|
+
var React135 = __toESM(require("react"));
|
|
10563
10643
|
var import_editor_props69 = require("@elementor/editor-props");
|
|
10564
|
-
var
|
|
10644
|
+
var import_ui119 = require("@elementor/ui");
|
|
10565
10645
|
var GridSpanControl = createControl(
|
|
10566
10646
|
({
|
|
10567
10647
|
placeholder: propPlaceholder,
|
|
@@ -10578,8 +10658,8 @@ var GridSpanControl = createControl(
|
|
|
10578
10658
|
setValue(next === "" ? null : next);
|
|
10579
10659
|
};
|
|
10580
10660
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
|
|
10581
|
-
return /* @__PURE__ */
|
|
10582
|
-
|
|
10661
|
+
return /* @__PURE__ */ React135.createElement(ControlActions, null, /* @__PURE__ */ React135.createElement(
|
|
10662
|
+
import_ui119.TextField,
|
|
10583
10663
|
{
|
|
10584
10664
|
size: "tiny",
|
|
10585
10665
|
fullWidth: true,
|
|
@@ -10599,25 +10679,25 @@ var GridSpanControl = createControl(
|
|
|
10599
10679
|
);
|
|
10600
10680
|
|
|
10601
10681
|
// src/components/promotions/display-conditions-control.tsx
|
|
10682
|
+
var React137 = __toESM(require("react"));
|
|
10683
|
+
var import_react82 = require("react");
|
|
10684
|
+
var import_icons44 = require("@elementor/icons");
|
|
10685
|
+
var import_ui121 = require("@elementor/ui");
|
|
10686
|
+
var import_i18n71 = require("@wordpress/i18n");
|
|
10687
|
+
|
|
10688
|
+
// src/components/promotions/promotion-trigger.tsx
|
|
10602
10689
|
var React136 = __toESM(require("react"));
|
|
10603
10690
|
var import_react81 = require("react");
|
|
10604
|
-
var
|
|
10691
|
+
var import_editor_ui20 = require("@elementor/editor-ui");
|
|
10605
10692
|
var import_ui120 = require("@elementor/ui");
|
|
10606
|
-
var import_i18n70 = require("@wordpress/i18n");
|
|
10607
|
-
|
|
10608
|
-
// src/components/promotions/promotion-trigger.tsx
|
|
10609
|
-
var React135 = __toESM(require("react"));
|
|
10610
|
-
var import_react80 = require("react");
|
|
10611
|
-
var import_editor_ui19 = require("@elementor/editor-ui");
|
|
10612
|
-
var import_ui119 = require("@elementor/ui");
|
|
10613
10693
|
function getV4Promotion(key) {
|
|
10614
10694
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
10615
10695
|
}
|
|
10616
|
-
var PromotionTrigger = (0,
|
|
10696
|
+
var PromotionTrigger = (0, import_react81.forwardRef)(
|
|
10617
10697
|
({ promotionKey, children, trackingData }, ref) => {
|
|
10618
|
-
const [isOpen, setIsOpen] = (0,
|
|
10698
|
+
const [isOpen, setIsOpen] = (0, import_react81.useState)(false);
|
|
10619
10699
|
const promotion = getV4Promotion(promotionKey);
|
|
10620
|
-
const toggle = (0,
|
|
10700
|
+
const toggle = (0, import_react81.useCallback)(() => {
|
|
10621
10701
|
setIsOpen((prev) => {
|
|
10622
10702
|
if (!prev) {
|
|
10623
10703
|
trackViewPromotion(trackingData);
|
|
@@ -10625,9 +10705,9 @@ var PromotionTrigger = (0, import_react80.forwardRef)(
|
|
|
10625
10705
|
return !prev;
|
|
10626
10706
|
});
|
|
10627
10707
|
}, [trackingData]);
|
|
10628
|
-
(0,
|
|
10629
|
-
return /* @__PURE__ */
|
|
10630
|
-
|
|
10708
|
+
(0, import_react81.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
|
|
10709
|
+
return /* @__PURE__ */ React136.createElement(React136.Fragment, null, promotion && /* @__PURE__ */ React136.createElement(
|
|
10710
|
+
import_editor_ui20.PromotionInfotip,
|
|
10631
10711
|
{
|
|
10632
10712
|
title: promotion.title,
|
|
10633
10713
|
content: promotion.content,
|
|
@@ -10640,8 +10720,8 @@ var PromotionTrigger = (0, import_react80.forwardRef)(
|
|
|
10640
10720
|
},
|
|
10641
10721
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
10642
10722
|
},
|
|
10643
|
-
/* @__PURE__ */
|
|
10644
|
-
|
|
10723
|
+
/* @__PURE__ */ React136.createElement(
|
|
10724
|
+
import_ui120.Box,
|
|
10645
10725
|
{
|
|
10646
10726
|
onClick: (e) => {
|
|
10647
10727
|
e.stopPropagation();
|
|
@@ -10649,19 +10729,19 @@ var PromotionTrigger = (0, import_react80.forwardRef)(
|
|
|
10649
10729
|
},
|
|
10650
10730
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
10651
10731
|
},
|
|
10652
|
-
children ?? /* @__PURE__ */
|
|
10732
|
+
children ?? /* @__PURE__ */ React136.createElement(import_editor_ui20.PromotionChip, null)
|
|
10653
10733
|
)
|
|
10654
10734
|
));
|
|
10655
10735
|
}
|
|
10656
10736
|
);
|
|
10657
10737
|
|
|
10658
10738
|
// src/components/promotions/display-conditions-control.tsx
|
|
10659
|
-
var ARIA_LABEL = (0,
|
|
10660
|
-
var
|
|
10739
|
+
var ARIA_LABEL = (0, import_i18n71.__)("Display Conditions", "elementor");
|
|
10740
|
+
var TRACKING_DATA2 = { target_name: "display_conditions", location_l2: "general" };
|
|
10661
10741
|
var DisplayConditionsControl = createControl(() => {
|
|
10662
|
-
const triggerRef = (0,
|
|
10663
|
-
return /* @__PURE__ */
|
|
10664
|
-
|
|
10742
|
+
const triggerRef = (0, import_react82.useRef)(null);
|
|
10743
|
+
return /* @__PURE__ */ React137.createElement(
|
|
10744
|
+
import_ui121.Stack,
|
|
10665
10745
|
{
|
|
10666
10746
|
direction: "row",
|
|
10667
10747
|
spacing: 2,
|
|
@@ -10670,9 +10750,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
10670
10750
|
alignItems: "center"
|
|
10671
10751
|
}
|
|
10672
10752
|
},
|
|
10673
|
-
/* @__PURE__ */
|
|
10674
|
-
/* @__PURE__ */
|
|
10675
|
-
|
|
10753
|
+
/* @__PURE__ */ React137.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA2 }),
|
|
10754
|
+
/* @__PURE__ */ React137.createElement(import_ui121.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React137.createElement(
|
|
10755
|
+
import_ui121.IconButton,
|
|
10676
10756
|
{
|
|
10677
10757
|
size: "tiny",
|
|
10678
10758
|
"aria-label": ARIA_LABEL,
|
|
@@ -10684,23 +10764,23 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
10684
10764
|
borderRadius: 1
|
|
10685
10765
|
}
|
|
10686
10766
|
},
|
|
10687
|
-
/* @__PURE__ */
|
|
10767
|
+
/* @__PURE__ */ React137.createElement(import_icons44.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
10688
10768
|
))
|
|
10689
10769
|
);
|
|
10690
10770
|
});
|
|
10691
10771
|
|
|
10692
10772
|
// src/components/promotions/attributes-control.tsx
|
|
10693
|
-
var
|
|
10694
|
-
var
|
|
10695
|
-
var
|
|
10696
|
-
var
|
|
10697
|
-
var
|
|
10698
|
-
var ARIA_LABEL2 = (0,
|
|
10699
|
-
var
|
|
10773
|
+
var React138 = __toESM(require("react"));
|
|
10774
|
+
var import_react83 = require("react");
|
|
10775
|
+
var import_icons45 = require("@elementor/icons");
|
|
10776
|
+
var import_ui122 = require("@elementor/ui");
|
|
10777
|
+
var import_i18n72 = require("@wordpress/i18n");
|
|
10778
|
+
var ARIA_LABEL2 = (0, import_i18n72.__)("Attributes", "elementor");
|
|
10779
|
+
var TRACKING_DATA3 = { target_name: "attributes", location_l2: "general" };
|
|
10700
10780
|
var AttributesControl = createControl(() => {
|
|
10701
|
-
const triggerRef = (0,
|
|
10702
|
-
return /* @__PURE__ */
|
|
10703
|
-
|
|
10781
|
+
const triggerRef = (0, import_react83.useRef)(null);
|
|
10782
|
+
return /* @__PURE__ */ React138.createElement(
|
|
10783
|
+
import_ui122.Stack,
|
|
10704
10784
|
{
|
|
10705
10785
|
direction: "row",
|
|
10706
10786
|
spacing: 2,
|
|
@@ -10709,9 +10789,9 @@ var AttributesControl = createControl(() => {
|
|
|
10709
10789
|
alignItems: "center"
|
|
10710
10790
|
}
|
|
10711
10791
|
},
|
|
10712
|
-
/* @__PURE__ */
|
|
10713
|
-
/* @__PURE__ */
|
|
10714
|
-
|
|
10792
|
+
/* @__PURE__ */ React138.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA3 }),
|
|
10793
|
+
/* @__PURE__ */ React138.createElement(import_ui122.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React138.createElement(
|
|
10794
|
+
import_icons45.PlusIcon,
|
|
10715
10795
|
{
|
|
10716
10796
|
"aria-label": ARIA_LABEL2,
|
|
10717
10797
|
fontSize: "tiny",
|
|
@@ -10724,21 +10804,21 @@ var AttributesControl = createControl(() => {
|
|
|
10724
10804
|
});
|
|
10725
10805
|
|
|
10726
10806
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
10727
|
-
var
|
|
10728
|
-
var
|
|
10729
|
-
var
|
|
10730
|
-
var CustomIconButton = (0,
|
|
10807
|
+
var React139 = __toESM(require("react"));
|
|
10808
|
+
var import_icons46 = require("@elementor/icons");
|
|
10809
|
+
var import_ui123 = require("@elementor/ui");
|
|
10810
|
+
var CustomIconButton = (0, import_ui123.styled)(import_ui123.IconButton)(({ theme }) => ({
|
|
10731
10811
|
width: theme.spacing(2.5),
|
|
10732
10812
|
height: theme.spacing(2.5)
|
|
10733
10813
|
}));
|
|
10734
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
10814
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React139.createElement(import_ui123.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React139.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React139.createElement(import_icons46.BrushBigIcon, { fontSize: size })));
|
|
10735
10815
|
|
|
10736
10816
|
// src/components/repeater/repeater.tsx
|
|
10737
|
-
var
|
|
10738
|
-
var
|
|
10739
|
-
var
|
|
10740
|
-
var
|
|
10741
|
-
var
|
|
10817
|
+
var React140 = __toESM(require("react"));
|
|
10818
|
+
var import_react84 = require("react");
|
|
10819
|
+
var import_icons47 = require("@elementor/icons");
|
|
10820
|
+
var import_ui124 = require("@elementor/ui");
|
|
10821
|
+
var import_i18n73 = require("@wordpress/i18n");
|
|
10742
10822
|
var SIZE12 = "tiny";
|
|
10743
10823
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
10744
10824
|
var Repeater3 = ({
|
|
@@ -10757,7 +10837,7 @@ var Repeater3 = ({
|
|
|
10757
10837
|
isSortable = true,
|
|
10758
10838
|
adornment = ControlAdornments
|
|
10759
10839
|
}) => {
|
|
10760
|
-
const [openItem, setOpenItem] = (0,
|
|
10840
|
+
const [openItem, setOpenItem] = (0, import_react84.useState)(initialOpenItem);
|
|
10761
10841
|
const uniqueKeys = items2.map(
|
|
10762
10842
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
10763
10843
|
);
|
|
@@ -10820,8 +10900,8 @@ var Repeater3 = ({
|
|
|
10820
10900
|
};
|
|
10821
10901
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
10822
10902
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
10823
|
-
const addButton = /* @__PURE__ */
|
|
10824
|
-
|
|
10903
|
+
const addButton = /* @__PURE__ */ React140.createElement(
|
|
10904
|
+
import_ui124.IconButton,
|
|
10825
10905
|
{
|
|
10826
10906
|
size: SIZE12,
|
|
10827
10907
|
sx: {
|
|
@@ -10829,32 +10909,32 @@ var Repeater3 = ({
|
|
|
10829
10909
|
},
|
|
10830
10910
|
disabled: isButtonDisabled,
|
|
10831
10911
|
onClick: addRepeaterItem,
|
|
10832
|
-
"aria-label": (0,
|
|
10912
|
+
"aria-label": (0, import_i18n73.__)("Add item", "elementor")
|
|
10833
10913
|
},
|
|
10834
|
-
/* @__PURE__ */
|
|
10914
|
+
/* @__PURE__ */ React140.createElement(import_icons47.PlusIcon, { fontSize: SIZE12 })
|
|
10835
10915
|
);
|
|
10836
|
-
return /* @__PURE__ */
|
|
10837
|
-
|
|
10916
|
+
return /* @__PURE__ */ React140.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React140.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React140.createElement(
|
|
10917
|
+
import_ui124.Infotip,
|
|
10838
10918
|
{
|
|
10839
10919
|
placement: "right",
|
|
10840
10920
|
content: addButtonInfotipContent,
|
|
10841
10921
|
color: "secondary",
|
|
10842
10922
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
10843
10923
|
},
|
|
10844
|
-
/* @__PURE__ */
|
|
10845
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
10924
|
+
/* @__PURE__ */ React140.createElement(import_ui124.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
10925
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React140.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
10846
10926
|
const index = uniqueKeys.indexOf(key);
|
|
10847
10927
|
const value = items2[index];
|
|
10848
10928
|
if (!value) {
|
|
10849
10929
|
return null;
|
|
10850
10930
|
}
|
|
10851
|
-
return /* @__PURE__ */
|
|
10931
|
+
return /* @__PURE__ */ React140.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React140.createElement(
|
|
10852
10932
|
RepeaterItem,
|
|
10853
10933
|
{
|
|
10854
10934
|
disabled,
|
|
10855
10935
|
propDisabled: value?.disabled,
|
|
10856
|
-
label: /* @__PURE__ */
|
|
10857
|
-
startIcon: /* @__PURE__ */
|
|
10936
|
+
label: /* @__PURE__ */ React140.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React140.createElement(itemSettings.Label, { value, index })),
|
|
10937
|
+
startIcon: /* @__PURE__ */ React140.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React140.createElement(itemSettings.Icon, { value })),
|
|
10858
10938
|
removeItem: () => removeRepeaterItem(index),
|
|
10859
10939
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
10860
10940
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -10868,7 +10948,7 @@ var Repeater3 = ({
|
|
|
10868
10948
|
actions: itemSettings.actions,
|
|
10869
10949
|
value
|
|
10870
10950
|
},
|
|
10871
|
-
(props) => /* @__PURE__ */
|
|
10951
|
+
(props) => /* @__PURE__ */ React140.createElement(
|
|
10872
10952
|
itemSettings.Content,
|
|
10873
10953
|
{
|
|
10874
10954
|
...props,
|
|
@@ -10908,18 +10988,18 @@ var RepeaterItem = ({
|
|
|
10908
10988
|
},
|
|
10909
10989
|
wrappedOnPopoverClose
|
|
10910
10990
|
);
|
|
10911
|
-
const triggerProps = (0,
|
|
10991
|
+
const triggerProps = (0, import_ui124.bindTrigger)(popoverState);
|
|
10912
10992
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
10913
|
-
const duplicateLabel = (0,
|
|
10914
|
-
const toggleLabel = propDisabled ? (0,
|
|
10915
|
-
const removeLabel = (0,
|
|
10916
|
-
return /* @__PURE__ */
|
|
10993
|
+
const duplicateLabel = (0, import_i18n73.__)("Duplicate", "elementor");
|
|
10994
|
+
const toggleLabel = propDisabled ? (0, import_i18n73.__)("Show", "elementor") : (0, import_i18n73.__)("Hide", "elementor");
|
|
10995
|
+
const removeLabel = (0, import_i18n73.__)("Remove", "elementor");
|
|
10996
|
+
return /* @__PURE__ */ React140.createElement(import_ui124.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React140.createElement(
|
|
10917
10997
|
RepeaterTag,
|
|
10918
10998
|
{
|
|
10919
10999
|
disabled,
|
|
10920
11000
|
label,
|
|
10921
11001
|
ref: setRef,
|
|
10922
|
-
"aria-label": (0,
|
|
11002
|
+
"aria-label": (0, import_i18n73.__)("Open item", "elementor"),
|
|
10923
11003
|
...triggerProps,
|
|
10924
11004
|
onClick: (e) => {
|
|
10925
11005
|
triggerProps.onClick(e);
|
|
@@ -10928,15 +11008,15 @@ var RepeaterItem = ({
|
|
|
10928
11008
|
}
|
|
10929
11009
|
},
|
|
10930
11010
|
startIcon,
|
|
10931
|
-
actions: /* @__PURE__ */
|
|
11011
|
+
actions: /* @__PURE__ */ React140.createElement(React140.Fragment, null, showDuplicate && /* @__PURE__ */ React140.createElement(import_ui124.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React140.createElement(import_ui124.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React140.createElement(import_icons47.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React140.createElement(import_ui124.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React140.createElement(import_ui124.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React140.createElement(import_icons47.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React140.createElement(import_icons47.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React140.createElement(import_ui124.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React140.createElement(import_ui124.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React140.createElement(import_icons47.XIcon, { fontSize: SIZE12 }))))
|
|
10932
11012
|
}
|
|
10933
|
-
), /* @__PURE__ */
|
|
11013
|
+
), /* @__PURE__ */ React140.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React140.createElement(import_ui124.Box, null, children({ anchorEl: ref }))));
|
|
10934
11014
|
};
|
|
10935
11015
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
10936
|
-
const [ref, setRef] = (0,
|
|
10937
|
-
const popoverState = (0,
|
|
10938
|
-
const popoverProps = (0,
|
|
10939
|
-
(0,
|
|
11016
|
+
const [ref, setRef] = (0, import_react84.useState)(null);
|
|
11017
|
+
const popoverState = (0, import_ui124.usePopupState)({ variant: "popover" });
|
|
11018
|
+
const popoverProps = (0, import_ui124.bindPopover)(popoverState);
|
|
11019
|
+
(0, import_react84.useEffect)(() => {
|
|
10940
11020
|
if (openOnMount && ref) {
|
|
10941
11021
|
popoverState.open(ref);
|
|
10942
11022
|
onOpen?.();
|
|
@@ -10955,8 +11035,8 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
10955
11035
|
};
|
|
10956
11036
|
|
|
10957
11037
|
// src/components/size/unstable-size-field.tsx
|
|
10958
|
-
var
|
|
10959
|
-
var
|
|
11038
|
+
var React143 = __toESM(require("react"));
|
|
11039
|
+
var import_ui126 = require("@elementor/ui");
|
|
10960
11040
|
|
|
10961
11041
|
// src/hooks/use-size-value.ts
|
|
10962
11042
|
var DEFAULT_UNIT2 = "px";
|
|
@@ -10998,26 +11078,26 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
10998
11078
|
};
|
|
10999
11079
|
|
|
11000
11080
|
// src/components/size/unit-select.tsx
|
|
11001
|
-
var
|
|
11002
|
-
var
|
|
11003
|
-
var
|
|
11004
|
-
var
|
|
11081
|
+
var React141 = __toESM(require("react"));
|
|
11082
|
+
var import_react85 = require("react");
|
|
11083
|
+
var import_editor_ui21 = require("@elementor/editor-ui");
|
|
11084
|
+
var import_ui125 = require("@elementor/ui");
|
|
11005
11085
|
var menuItemContentStyles2 = {
|
|
11006
11086
|
display: "flex",
|
|
11007
11087
|
flexDirection: "column",
|
|
11008
11088
|
justifyContent: "center"
|
|
11009
11089
|
};
|
|
11010
11090
|
var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
11011
|
-
const popupState = (0,
|
|
11091
|
+
const popupState = (0, import_ui125.usePopupState)({
|
|
11012
11092
|
variant: "popover",
|
|
11013
|
-
popupId: (0,
|
|
11093
|
+
popupId: (0, import_react85.useId)()
|
|
11014
11094
|
});
|
|
11015
11095
|
const handleMenuItemClick = (index) => {
|
|
11016
11096
|
onClick(options[index]);
|
|
11017
11097
|
popupState.close();
|
|
11018
11098
|
};
|
|
11019
|
-
return /* @__PURE__ */
|
|
11020
|
-
|
|
11099
|
+
return /* @__PURE__ */ React141.createElement(React141.Fragment, null, /* @__PURE__ */ React141.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui125.bindTrigger)(popupState) }, value), /* @__PURE__ */ React141.createElement(import_ui125.Menu, { MenuListProps: { dense: true }, ...(0, import_ui125.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React141.createElement(
|
|
11100
|
+
import_editor_ui21.MenuListItem,
|
|
11021
11101
|
{
|
|
11022
11102
|
key: option,
|
|
11023
11103
|
onClick: () => handleMenuItemClick(index),
|
|
@@ -11035,7 +11115,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
11035
11115
|
option.toUpperCase()
|
|
11036
11116
|
))));
|
|
11037
11117
|
};
|
|
11038
|
-
var StyledButton3 = (0,
|
|
11118
|
+
var StyledButton3 = (0, import_ui125.styled)(import_ui125.Button, {
|
|
11039
11119
|
shouldForwardProp: (prop) => prop !== "isPrimaryColor"
|
|
11040
11120
|
})(({ isPrimaryColor, theme }) => ({
|
|
11041
11121
|
color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
|
|
@@ -11045,11 +11125,11 @@ var StyledButton3 = (0, import_ui124.styled)(import_ui124.Button, {
|
|
|
11045
11125
|
}));
|
|
11046
11126
|
|
|
11047
11127
|
// src/components/size/unstable-size-input.tsx
|
|
11048
|
-
var
|
|
11049
|
-
var
|
|
11050
|
-
var UnstableSizeInput = (0,
|
|
11128
|
+
var React142 = __toESM(require("react"));
|
|
11129
|
+
var import_react86 = require("react");
|
|
11130
|
+
var UnstableSizeInput = (0, import_react86.forwardRef)(
|
|
11051
11131
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
11052
|
-
return /* @__PURE__ */
|
|
11132
|
+
return /* @__PURE__ */ React142.createElement(
|
|
11053
11133
|
NumberInput,
|
|
11054
11134
|
{
|
|
11055
11135
|
ref,
|
|
@@ -11087,7 +11167,7 @@ var UnstableSizeField = ({
|
|
|
11087
11167
|
const shouldHighlightUnit2 = () => {
|
|
11088
11168
|
return hasValue(size);
|
|
11089
11169
|
};
|
|
11090
|
-
return /* @__PURE__ */
|
|
11170
|
+
return /* @__PURE__ */ React143.createElement(
|
|
11091
11171
|
UnstableSizeInput,
|
|
11092
11172
|
{
|
|
11093
11173
|
type: "number",
|
|
@@ -11096,8 +11176,8 @@ var UnstableSizeField = ({
|
|
|
11096
11176
|
onChange: (event) => setSize(event.target.value),
|
|
11097
11177
|
InputProps: {
|
|
11098
11178
|
...InputProps,
|
|
11099
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
11100
|
-
endAdornment: /* @__PURE__ */
|
|
11179
|
+
startAdornment: startIcon && /* @__PURE__ */ React143.createElement(import_ui126.InputAdornment, { position: "start" }, startIcon),
|
|
11180
|
+
endAdornment: /* @__PURE__ */ React143.createElement(import_ui126.InputAdornment, { position: "end" }, /* @__PURE__ */ React143.createElement(
|
|
11101
11181
|
UnitSelect,
|
|
11102
11182
|
{
|
|
11103
11183
|
options: units2,
|
|
@@ -11115,7 +11195,7 @@ var hasValue = (value) => {
|
|
|
11115
11195
|
};
|
|
11116
11196
|
|
|
11117
11197
|
// src/hooks/use-font-families.ts
|
|
11118
|
-
var
|
|
11198
|
+
var import_react87 = require("react");
|
|
11119
11199
|
var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
|
|
11120
11200
|
var getFontControlConfig = () => {
|
|
11121
11201
|
const { controls } = (0, import_editor_v1_adapters5.getElementorConfig)();
|
|
@@ -11123,7 +11203,7 @@ var getFontControlConfig = () => {
|
|
|
11123
11203
|
};
|
|
11124
11204
|
var useFontFamilies = () => {
|
|
11125
11205
|
const { groups, options } = getFontControlConfig();
|
|
11126
|
-
return (0,
|
|
11206
|
+
return (0, import_react87.useMemo)(() => {
|
|
11127
11207
|
if (!groups || !options) {
|
|
11128
11208
|
return [];
|
|
11129
11209
|
}
|
|
@@ -11172,6 +11252,8 @@ var useFontFamilies = () => {
|
|
|
11172
11252
|
GapControl,
|
|
11173
11253
|
GridSpanControl,
|
|
11174
11254
|
HtmlTagControl,
|
|
11255
|
+
IconLibraryUploadButton,
|
|
11256
|
+
IconLibraryUploadPromotion,
|
|
11175
11257
|
ImageControl,
|
|
11176
11258
|
InlineEditingControl,
|
|
11177
11259
|
InlineEditor,
|
|
@@ -11223,6 +11305,7 @@ var useFontFamilies = () => {
|
|
|
11223
11305
|
enqueueIconFonts,
|
|
11224
11306
|
getControlReplacements,
|
|
11225
11307
|
getFontAwesome7IconName,
|
|
11308
|
+
injectIntoIconLibraryUploadAction,
|
|
11226
11309
|
injectIntoRepeaterItemActions,
|
|
11227
11310
|
injectIntoRepeaterItemIcon,
|
|
11228
11311
|
injectIntoRepeaterItemLabel,
|