@elementor/editor-controls 4.4.0-1084 → 4.4.0-1086
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.js +921 -786
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +775 -629
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -16
- package/src/controls/icon-library/font-awesome-7-catalog.ts +14 -5
- package/src/controls/icon-library/icon-library-filter.tsx +159 -0
- package/src/controls/icon-library/icon-library-popover.tsx +55 -20
package/dist/index.js
CHANGED
|
@@ -507,7 +507,7 @@ function ControlActions({ children }) {
|
|
|
507
507
|
if (items2.length === 0 || disabled) {
|
|
508
508
|
return children;
|
|
509
509
|
}
|
|
510
|
-
const menuItems = items2.map(({ MenuItem:
|
|
510
|
+
const menuItems = items2.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React10.createElement(MenuItem3, { key: id }));
|
|
511
511
|
return /* @__PURE__ */ React10.createElement(import_editor_ui.FloatingActionsBar, { actions: menuItems }, children);
|
|
512
512
|
}
|
|
513
513
|
|
|
@@ -5387,13 +5387,13 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5387
5387
|
});
|
|
5388
5388
|
|
|
5389
5389
|
// src/controls/svg-media-control.tsx
|
|
5390
|
-
var
|
|
5391
|
-
var
|
|
5390
|
+
var React86 = __toESM(require("react"));
|
|
5391
|
+
var import_react51 = require("react");
|
|
5392
5392
|
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
5393
5393
|
var import_editor_props35 = require("@elementor/editor-props");
|
|
5394
|
-
var
|
|
5394
|
+
var import_ui68 = require("@elementor/ui");
|
|
5395
5395
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
5396
|
-
var
|
|
5396
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
5397
5397
|
|
|
5398
5398
|
// src/components/enable-unfiltered-modal.tsx
|
|
5399
5399
|
var React80 = __toESM(require("react"));
|
|
@@ -5461,13 +5461,13 @@ function measureIconLibraryAnchor(container, buttonGroup) {
|
|
|
5461
5461
|
}
|
|
5462
5462
|
|
|
5463
5463
|
// src/controls/icon-library/icon-library-popover.tsx
|
|
5464
|
-
var
|
|
5465
|
-
var
|
|
5464
|
+
var React83 = __toESM(require("react"));
|
|
5465
|
+
var import_react50 = require("react");
|
|
5466
5466
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
5467
|
-
var
|
|
5468
|
-
var
|
|
5467
|
+
var import_icons22 = require("@elementor/icons");
|
|
5468
|
+
var import_ui65 = require("@elementor/ui");
|
|
5469
5469
|
var import_utils6 = require("@elementor/utils");
|
|
5470
|
-
var
|
|
5470
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
5471
5471
|
|
|
5472
5472
|
// src/controls/icon-library/font-awesome-7-data.ts
|
|
5473
5473
|
var FONT_AWESOME_7_LIBRARIES = [
|
|
@@ -5658,12 +5658,13 @@ async function loadFontAwesome7Catalog(signal) {
|
|
|
5658
5658
|
);
|
|
5659
5659
|
return catalogs.flat();
|
|
5660
5660
|
}
|
|
5661
|
-
function filterFontAwesome7Icons(icons, searchValue) {
|
|
5661
|
+
function filterFontAwesome7Icons(icons, searchValue, libraries = []) {
|
|
5662
5662
|
const query = searchValue?.trim().toLowerCase() ?? "";
|
|
5663
|
+
const libraryIcons = libraries.length === 0 ? icons : icons.filter((icon) => libraries.includes(icon.library));
|
|
5663
5664
|
if (query === "") {
|
|
5664
|
-
return
|
|
5665
|
+
return libraryIcons;
|
|
5665
5666
|
}
|
|
5666
|
-
return
|
|
5667
|
+
return libraryIcons.filter((icon) => {
|
|
5667
5668
|
if (icon.name.includes(query) || icon.label.toLowerCase().includes(query)) {
|
|
5668
5669
|
return true;
|
|
5669
5670
|
}
|
|
@@ -5726,6 +5727,122 @@ var FontAwesomeGlyph = ({ icon, size, color, label }) => {
|
|
|
5726
5727
|
);
|
|
5727
5728
|
};
|
|
5728
5729
|
|
|
5730
|
+
// src/controls/icon-library/icon-library-filter.tsx
|
|
5731
|
+
var React82 = __toESM(require("react"));
|
|
5732
|
+
var import_react49 = require("react");
|
|
5733
|
+
var import_icons21 = require("@elementor/icons");
|
|
5734
|
+
var import_ui64 = require("@elementor/ui");
|
|
5735
|
+
var import_i18n32 = require("@wordpress/i18n");
|
|
5736
|
+
var FILTER_MENU_WIDTH = 280;
|
|
5737
|
+
var FILTER_INDICATOR_SIZE = 6;
|
|
5738
|
+
var FILTER_INDICATOR_OFFSET = 4;
|
|
5739
|
+
var LIBRARY_FILTER_ORDER = {
|
|
5740
|
+
regular: 0,
|
|
5741
|
+
solid: 1,
|
|
5742
|
+
brands: 2
|
|
5743
|
+
};
|
|
5744
|
+
var LIBRARY_FILTER_CONFIG = {
|
|
5745
|
+
"fa-regular": {
|
|
5746
|
+
getLabel: () => (0, import_i18n32.__)("Font Awesome - Regular", "elementor"),
|
|
5747
|
+
Icon: import_icons21.StarIcon,
|
|
5748
|
+
order: LIBRARY_FILTER_ORDER.regular
|
|
5749
|
+
},
|
|
5750
|
+
"fa-solid": {
|
|
5751
|
+
getLabel: () => (0, import_i18n32.__)("Font Awesome - Solid", "elementor"),
|
|
5752
|
+
Icon: import_icons21.StarFilledIcon,
|
|
5753
|
+
order: LIBRARY_FILTER_ORDER.solid
|
|
5754
|
+
},
|
|
5755
|
+
"fa-brands": {
|
|
5756
|
+
getLabel: () => (0, import_i18n32.__)("Font Awesome - Brands", "elementor"),
|
|
5757
|
+
Icon: import_icons21.LibraryIcon,
|
|
5758
|
+
order: LIBRARY_FILTER_ORDER.brands
|
|
5759
|
+
}
|
|
5760
|
+
};
|
|
5761
|
+
var IconLibraryFilter = ({ value, onChange }) => {
|
|
5762
|
+
const popupId = (0, import_react49.useId)();
|
|
5763
|
+
const popupState = (0, import_ui64.usePopupState)({
|
|
5764
|
+
variant: "popover",
|
|
5765
|
+
popupId
|
|
5766
|
+
});
|
|
5767
|
+
const options = FONT_AWESOME_7_LIBRARIES.map(({ library }) => ({
|
|
5768
|
+
value: library,
|
|
5769
|
+
label: LIBRARY_FILTER_CONFIG[library].getLabel(),
|
|
5770
|
+
Icon: LIBRARY_FILTER_CONFIG[library].Icon,
|
|
5771
|
+
order: LIBRARY_FILTER_CONFIG[library].order
|
|
5772
|
+
})).sort((firstOption, secondOption) => firstOption.order - secondOption.order);
|
|
5773
|
+
const isFiltered = value.length > 0;
|
|
5774
|
+
const filterButtonLabel = isFiltered ? (0, import_i18n32.__)("Filter by library, active", "elementor") : (0, import_i18n32.__)("Filter by library", "elementor");
|
|
5775
|
+
const handleAllIconsClick = () => {
|
|
5776
|
+
onChange([]);
|
|
5777
|
+
};
|
|
5778
|
+
const handleLibraryClick = (library) => {
|
|
5779
|
+
const nextValue = value.includes(library) ? value.filter((selectedLibrary) => selectedLibrary !== library) : [...value, library];
|
|
5780
|
+
onChange(nextValue.length === FONT_AWESOME_7_LIBRARIES.length ? [] : nextValue);
|
|
5781
|
+
};
|
|
5782
|
+
return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(import_ui64.Tooltip, { title: (0, import_i18n32.__)("Filter by library", "elementor"), placement: "top" }, /* @__PURE__ */ React82.createElement(
|
|
5783
|
+
import_ui64.ToggleButton,
|
|
5784
|
+
{
|
|
5785
|
+
"aria-label": filterButtonLabel,
|
|
5786
|
+
value: "filter",
|
|
5787
|
+
size: "tiny",
|
|
5788
|
+
selected: popupState.isOpen,
|
|
5789
|
+
sx: { position: "relative", flexShrink: 0 },
|
|
5790
|
+
...(0, import_ui64.bindToggle)(popupState),
|
|
5791
|
+
"aria-expanded": popupState.isOpen
|
|
5792
|
+
},
|
|
5793
|
+
/* @__PURE__ */ React82.createElement(import_icons21.FilterIcon, { fontSize: "tiny" }),
|
|
5794
|
+
isFiltered ? /* @__PURE__ */ React82.createElement(
|
|
5795
|
+
import_ui64.Box,
|
|
5796
|
+
{
|
|
5797
|
+
component: "span",
|
|
5798
|
+
"aria-hidden": "true",
|
|
5799
|
+
sx: {
|
|
5800
|
+
position: "absolute",
|
|
5801
|
+
insetBlockStart: FILTER_INDICATOR_OFFSET,
|
|
5802
|
+
insetInlineEnd: FILTER_INDICATOR_OFFSET,
|
|
5803
|
+
width: FILTER_INDICATOR_SIZE,
|
|
5804
|
+
height: FILTER_INDICATOR_SIZE,
|
|
5805
|
+
borderRadius: "50%",
|
|
5806
|
+
bgcolor: "secondary.main"
|
|
5807
|
+
}
|
|
5808
|
+
}
|
|
5809
|
+
) : null
|
|
5810
|
+
)), /* @__PURE__ */ React82.createElement(
|
|
5811
|
+
import_ui64.Menu,
|
|
5812
|
+
{
|
|
5813
|
+
...(0, import_ui64.bindMenu)(popupState),
|
|
5814
|
+
MenuListProps: {
|
|
5815
|
+
dense: true,
|
|
5816
|
+
autoFocusItem: true,
|
|
5817
|
+
"aria-label": (0, import_i18n32.__)("Filter by library", "elementor")
|
|
5818
|
+
},
|
|
5819
|
+
sx: { "& .MuiPaper-root": { minWidth: FILTER_MENU_WIDTH } }
|
|
5820
|
+
},
|
|
5821
|
+
/* @__PURE__ */ React82.createElement(
|
|
5822
|
+
import_ui64.MenuItem,
|
|
5823
|
+
{
|
|
5824
|
+
role: "menuitemcheckbox",
|
|
5825
|
+
"aria-checked": !isFiltered,
|
|
5826
|
+
selected: !isFiltered,
|
|
5827
|
+
onClick: handleAllIconsClick
|
|
5828
|
+
},
|
|
5829
|
+
renderFilterMenuItemContent((0, import_i18n32.__)("All icons", "elementor"), import_icons21.ListIcon, !isFiltered)
|
|
5830
|
+
),
|
|
5831
|
+
options.map(({ value: library, label, Icon }) => /* @__PURE__ */ React82.createElement(
|
|
5832
|
+
import_ui64.MenuItem,
|
|
5833
|
+
{
|
|
5834
|
+
key: library,
|
|
5835
|
+
role: "menuitemcheckbox",
|
|
5836
|
+
"aria-checked": value.includes(library),
|
|
5837
|
+
selected: value.includes(library),
|
|
5838
|
+
onClick: () => handleLibraryClick(library)
|
|
5839
|
+
},
|
|
5840
|
+
renderFilterMenuItemContent(label, Icon, value.includes(library))
|
|
5841
|
+
))
|
|
5842
|
+
));
|
|
5843
|
+
};
|
|
5844
|
+
var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React82.createElement(import_ui64.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React82.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React82.createElement(import_ui64.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React82.createElement(import_icons21.CheckIcon, { fontSize: "tiny" }) : null);
|
|
5845
|
+
|
|
5729
5846
|
// src/controls/icon-library/use-font-awesome-7-catalog.ts
|
|
5730
5847
|
var import_query2 = require("@elementor/query");
|
|
5731
5848
|
var FONT_AWESOME_7_CATALOG_QUERY_KEY = ["font-awesome-7-catalog"];
|
|
@@ -5745,7 +5862,7 @@ var ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
|
|
|
5745
5862
|
var ICON_TILE_SIZE = 40;
|
|
5746
5863
|
var ICON_GLYPH_SIZE = 20;
|
|
5747
5864
|
var ICON_LIBRARY_INLINE_SPACING = 1;
|
|
5748
|
-
var CompactIconLibraryMenuList = (0,
|
|
5865
|
+
var CompactIconLibraryMenuList = (0, import_ui65.styled)(import_editor_ui11.StyledMenuList)(({ theme }) => ({
|
|
5749
5866
|
'& > [role="option"]': {
|
|
5750
5867
|
padding: theme.spacing(0.75, ICON_LIBRARY_INLINE_SPACING)
|
|
5751
5868
|
}
|
|
@@ -5764,14 +5881,19 @@ var IconLibraryPopover = ({
|
|
|
5764
5881
|
handleChange: handleSearchChange,
|
|
5765
5882
|
setImmediateValue: setSearchValue
|
|
5766
5883
|
} = (0, import_utils6.useDebounceState)({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
|
|
5884
|
+
const [activeLibraries, setActiveLibraries] = (0, import_react50.useState)([]);
|
|
5767
5885
|
const { data: icons = [], isLoading } = useFontAwesome7Catalog(open);
|
|
5768
|
-
const items2 = (0,
|
|
5769
|
-
|
|
5886
|
+
const items2 = (0, import_react50.useMemo)(
|
|
5887
|
+
() => createIconLibraryItems(icons, searchValue, activeLibraries),
|
|
5888
|
+
[activeLibraries, icons, searchValue]
|
|
5889
|
+
);
|
|
5890
|
+
const selectedValue = (0, import_react50.useMemo)(
|
|
5770
5891
|
() => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
|
|
5771
5892
|
[icons, selectedIconClass, selectedIconLibrary]
|
|
5772
5893
|
);
|
|
5773
5894
|
const handleClose = () => {
|
|
5774
5895
|
setSearchValue("");
|
|
5896
|
+
setActiveLibraries([]);
|
|
5775
5897
|
onClose();
|
|
5776
5898
|
};
|
|
5777
5899
|
const handleSelect = (id) => {
|
|
@@ -5787,30 +5909,31 @@ var IconLibraryPopover = ({
|
|
|
5787
5909
|
const handleClearSearch = () => {
|
|
5788
5910
|
setSearchValue("");
|
|
5789
5911
|
};
|
|
5790
|
-
return /* @__PURE__ */
|
|
5912
|
+
return /* @__PURE__ */ React83.createElement(import_editor_ui11.PopoverBody, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React83.createElement(
|
|
5791
5913
|
import_editor_ui11.PopoverHeader,
|
|
5792
5914
|
{
|
|
5793
|
-
title: (0,
|
|
5915
|
+
title: (0, import_i18n33.__)("Icon library", "elementor"),
|
|
5794
5916
|
onClose: handleClose,
|
|
5795
|
-
icon: /* @__PURE__ */
|
|
5917
|
+
icon: /* @__PURE__ */ React83.createElement(import_icons22.ComponentsIcon, { fontSize: "tiny" }),
|
|
5796
5918
|
sx: { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 }
|
|
5797
5919
|
}
|
|
5798
|
-
), /* @__PURE__ */
|
|
5920
|
+
), /* @__PURE__ */ React83.createElement(import_ui65.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }, /* @__PURE__ */ React83.createElement(
|
|
5799
5921
|
import_editor_ui11.SearchField,
|
|
5800
5922
|
{
|
|
5801
5923
|
value: searchInputValue,
|
|
5802
5924
|
onSearch: handleSearchChange,
|
|
5803
|
-
placeholder: (0,
|
|
5925
|
+
placeholder: (0, import_i18n33.__)("Search", "elementor"),
|
|
5804
5926
|
id: "icon-library-search",
|
|
5805
|
-
sx: { px:
|
|
5927
|
+
sx: { flex: 1, px: 0, pb: 0 }
|
|
5806
5928
|
}
|
|
5807
|
-
), /* @__PURE__ */
|
|
5929
|
+
), /* @__PURE__ */ React83.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })), /* @__PURE__ */ React83.createElement(import_ui65.Divider, null), /* @__PURE__ */ React83.createElement(import_ui65.Box, { sx: { flex: 1, overflow: "auto", minHeight: 0 } }, /* @__PURE__ */ React83.createElement(
|
|
5808
5930
|
IconLibraryContent,
|
|
5809
5931
|
{
|
|
5810
5932
|
isLoading,
|
|
5811
5933
|
items: items2,
|
|
5812
5934
|
selectedValue,
|
|
5813
5935
|
searchValue,
|
|
5936
|
+
isCatalogAvailable: icons.length > 0,
|
|
5814
5937
|
onSelect: handleSelect,
|
|
5815
5938
|
onClose: handleClose,
|
|
5816
5939
|
onClearSearch: handleClearSearch
|
|
@@ -5822,14 +5945,15 @@ var IconLibraryContent = ({
|
|
|
5822
5945
|
items: items2,
|
|
5823
5946
|
selectedValue,
|
|
5824
5947
|
searchValue,
|
|
5948
|
+
isCatalogAvailable,
|
|
5825
5949
|
onSelect,
|
|
5826
5950
|
onClose,
|
|
5827
5951
|
onClearSearch
|
|
5828
5952
|
}) => {
|
|
5829
5953
|
if (isLoading) {
|
|
5830
|
-
return /* @__PURE__ */
|
|
5954
|
+
return /* @__PURE__ */ React83.createElement(IconLibraryLoadingState, null);
|
|
5831
5955
|
}
|
|
5832
|
-
return /* @__PURE__ */
|
|
5956
|
+
return /* @__PURE__ */ React83.createElement(
|
|
5833
5957
|
import_editor_ui11.PopoverMenuList,
|
|
5834
5958
|
{
|
|
5835
5959
|
items: items2,
|
|
@@ -5839,22 +5963,33 @@ var IconLibraryContent = ({
|
|
|
5839
5963
|
onClose,
|
|
5840
5964
|
itemHeight: ICON_LIBRARY_ROW_HEIGHT,
|
|
5841
5965
|
menuItemContentTemplate: IconLibraryRow,
|
|
5842
|
-
noResultsComponent: /* @__PURE__ */
|
|
5966
|
+
noResultsComponent: /* @__PURE__ */ React83.createElement(
|
|
5967
|
+
IconLibraryEmptyState,
|
|
5968
|
+
{
|
|
5969
|
+
searchValue,
|
|
5970
|
+
isCatalogAvailable,
|
|
5971
|
+
onClear: onClearSearch
|
|
5972
|
+
}
|
|
5973
|
+
),
|
|
5843
5974
|
"data-testid": "icon-library-list"
|
|
5844
5975
|
}
|
|
5845
5976
|
);
|
|
5846
5977
|
};
|
|
5847
|
-
var IconLibraryLoadingState = () => /* @__PURE__ */
|
|
5848
|
-
var IconLibraryEmptyState = ({
|
|
5849
|
-
|
|
5850
|
-
|
|
5978
|
+
var IconLibraryLoadingState = () => /* @__PURE__ */ React83.createElement(import_ui65.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React83.createElement(import_ui65.CircularProgress, { role: "progressbar", size: 24 }));
|
|
5979
|
+
var IconLibraryEmptyState = ({
|
|
5980
|
+
searchValue,
|
|
5981
|
+
isCatalogAvailable,
|
|
5982
|
+
onClear
|
|
5983
|
+
}) => {
|
|
5984
|
+
if (!isCatalogAvailable) {
|
|
5985
|
+
return /* @__PURE__ */ React83.createElement(CatalogUnavailable, null);
|
|
5851
5986
|
}
|
|
5852
|
-
return /* @__PURE__ */
|
|
5987
|
+
return /* @__PURE__ */ React83.createElement(NoResults, { searchValue, onClear });
|
|
5853
5988
|
};
|
|
5854
5989
|
var IconLibraryRow = (item) => {
|
|
5855
5990
|
const icon = item;
|
|
5856
|
-
return /* @__PURE__ */
|
|
5857
|
-
|
|
5991
|
+
return /* @__PURE__ */ React83.createElement(import_ui65.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React83.createElement(
|
|
5992
|
+
import_ui65.Box,
|
|
5858
5993
|
{
|
|
5859
5994
|
sx: {
|
|
5860
5995
|
width: ICON_TILE_SIZE,
|
|
@@ -5869,12 +6004,12 @@ var IconLibraryRow = (item) => {
|
|
|
5869
6004
|
flexShrink: 0
|
|
5870
6005
|
}
|
|
5871
6006
|
},
|
|
5872
|
-
icon.paths.length > 0 ? /* @__PURE__ */
|
|
5873
|
-
), /* @__PURE__ */
|
|
6007
|
+
icon.paths.length > 0 ? /* @__PURE__ */ React83.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE, color: "currentColor" }) : null
|
|
6008
|
+
), /* @__PURE__ */ React83.createElement(import_ui65.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
|
|
5874
6009
|
};
|
|
5875
|
-
var CatalogUnavailable = () => /* @__PURE__ */
|
|
5876
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
5877
|
-
var createIconLibraryItems = (icons, searchValue) => filterFontAwesome7Icons(icons, searchValue).map((icon) => ({
|
|
6010
|
+
var CatalogUnavailable = () => /* @__PURE__ */ React83.createElement(import_ui65.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React83.createElement(import_icons22.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React83.createElement(import_ui65.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n33.__)("Icons couldn't be loaded.", "elementor")));
|
|
6011
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React83.createElement(import_ui65.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React83.createElement(import_icons22.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React83.createElement(import_ui65.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n33.__)("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React83.createElement(React83.Fragment, null, /* @__PURE__ */ React83.createElement(import_ui65.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React83.createElement(import_ui65.Link, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, (0, import_i18n33.__)("Clear & try again", "elementor"))) : null);
|
|
6012
|
+
var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
|
|
5878
6013
|
...icon,
|
|
5879
6014
|
type: "item",
|
|
5880
6015
|
value: icon.id
|
|
@@ -5890,10 +6025,10 @@ function createIconPropValue(icon, library) {
|
|
|
5890
6025
|
}
|
|
5891
6026
|
|
|
5892
6027
|
// src/controls/svg-media-overlay.tsx
|
|
5893
|
-
var
|
|
5894
|
-
var
|
|
5895
|
-
var
|
|
5896
|
-
var
|
|
6028
|
+
var React84 = __toESM(require("react"));
|
|
6029
|
+
var import_icons23 = require("@elementor/icons");
|
|
6030
|
+
var import_ui66 = require("@elementor/ui");
|
|
6031
|
+
var import_i18n34 = require("@wordpress/i18n");
|
|
5897
6032
|
var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
|
|
5898
6033
|
var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
|
|
5899
6034
|
var MEDIA_ACTION_PADDING_Y = 0.75;
|
|
@@ -5903,7 +6038,7 @@ var svgButtonSx = {
|
|
|
5903
6038
|
px: MEDIA_ACTION_PADDING_X,
|
|
5904
6039
|
py: MEDIA_ACTION_PADDING_Y
|
|
5905
6040
|
};
|
|
5906
|
-
var MediaActionGroup = (0,
|
|
6041
|
+
var MediaActionGroup = (0, import_ui66.styled)(import_ui66.Stack)(({ theme }) => ({
|
|
5907
6042
|
display: "inline-flex",
|
|
5908
6043
|
flexDirection: "row",
|
|
5909
6044
|
alignItems: "stretch",
|
|
@@ -5925,19 +6060,19 @@ var SvgMediaOverlay = ({
|
|
|
5925
6060
|
onOpenIconLibrary,
|
|
5926
6061
|
infotipTitle,
|
|
5927
6062
|
infotipDescription
|
|
5928
|
-
}) => /* @__PURE__ */
|
|
5929
|
-
|
|
6063
|
+
}) => /* @__PURE__ */ React84.createElement(import_ui66.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React84.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React84.createElement(
|
|
6064
|
+
import_ui66.Button,
|
|
5930
6065
|
{
|
|
5931
6066
|
size: "tiny",
|
|
5932
6067
|
color: "inherit",
|
|
5933
6068
|
variant: "text",
|
|
5934
6069
|
onClick: onSelectSvg,
|
|
5935
|
-
"aria-label": (0,
|
|
6070
|
+
"aria-label": (0, import_i18n34.__)("Select", "elementor"),
|
|
5936
6071
|
sx: svgButtonSx
|
|
5937
6072
|
},
|
|
5938
|
-
(0,
|
|
5939
|
-
), /* @__PURE__ */
|
|
5940
|
-
|
|
6073
|
+
(0, import_i18n34.__)("Select", "elementor")
|
|
6074
|
+
), /* @__PURE__ */ React84.createElement(
|
|
6075
|
+
import_ui66.Box,
|
|
5941
6076
|
{
|
|
5942
6077
|
sx: {
|
|
5943
6078
|
width: "1px",
|
|
@@ -5946,22 +6081,22 @@ var SvgMediaOverlay = ({
|
|
|
5946
6081
|
flexShrink: 0
|
|
5947
6082
|
}
|
|
5948
6083
|
}
|
|
5949
|
-
), /* @__PURE__ */
|
|
6084
|
+
), /* @__PURE__ */ React84.createElement(
|
|
5950
6085
|
ConditionalControlInfotip,
|
|
5951
6086
|
{
|
|
5952
6087
|
title: infotipTitle,
|
|
5953
6088
|
description: infotipDescription,
|
|
5954
6089
|
isEnabled: !isAdmin
|
|
5955
6090
|
},
|
|
5956
|
-
/* @__PURE__ */
|
|
5957
|
-
)), showIconLibrary ? /* @__PURE__ */
|
|
5958
|
-
|
|
6091
|
+
/* @__PURE__ */ React84.createElement(import_ui66.Box, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React84.createElement(UploadControl, { isAdmin, onUpload }))
|
|
6092
|
+
)), showIconLibrary ? /* @__PURE__ */ React84.createElement(
|
|
6093
|
+
import_ui66.Button,
|
|
5959
6094
|
{
|
|
5960
6095
|
size: "tiny",
|
|
5961
6096
|
color: "inherit",
|
|
5962
6097
|
variant: "text",
|
|
5963
|
-
startIcon: /* @__PURE__ */
|
|
5964
|
-
"aria-label": (0,
|
|
6098
|
+
startIcon: /* @__PURE__ */ React84.createElement(import_icons23.LibraryIcon, { sx: { height: "18px", width: "16px" } }),
|
|
6099
|
+
"aria-label": (0, import_i18n34.__)("Icon library", "elementor"),
|
|
5965
6100
|
onClick: onOpenIconLibrary,
|
|
5966
6101
|
sx: {
|
|
5967
6102
|
height: "28px",
|
|
@@ -5969,20 +6104,20 @@ var SvgMediaOverlay = ({
|
|
|
5969
6104
|
".MuiButton-icon": { ml: 0 }
|
|
5970
6105
|
}
|
|
5971
6106
|
},
|
|
5972
|
-
/* @__PURE__ */
|
|
6107
|
+
/* @__PURE__ */ React84.createElement(import_ui66.Typography, null, (0, import_i18n34.__)("Icon library", "elementor"))
|
|
5973
6108
|
) : null);
|
|
5974
6109
|
var UploadControl = ({ isAdmin, onUpload }) => {
|
|
5975
6110
|
if (isAdmin) {
|
|
5976
|
-
return /* @__PURE__ */
|
|
6111
|
+
return /* @__PURE__ */ React84.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
|
|
5977
6112
|
}
|
|
5978
|
-
return /* @__PURE__ */
|
|
6113
|
+
return /* @__PURE__ */ React84.createElement(import_ui66.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React84.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
|
|
5979
6114
|
};
|
|
5980
6115
|
var UploadButton = ({
|
|
5981
6116
|
disabled = false,
|
|
5982
6117
|
sx,
|
|
5983
6118
|
onClick
|
|
5984
|
-
}) => /* @__PURE__ */
|
|
5985
|
-
|
|
6119
|
+
}) => /* @__PURE__ */ React84.createElement(
|
|
6120
|
+
import_ui66.Button,
|
|
5986
6121
|
{
|
|
5987
6122
|
sx,
|
|
5988
6123
|
size: "tiny",
|
|
@@ -5990,15 +6125,15 @@ var UploadButton = ({
|
|
|
5990
6125
|
variant: "text",
|
|
5991
6126
|
disabled,
|
|
5992
6127
|
onClick,
|
|
5993
|
-
"aria-label": (0,
|
|
6128
|
+
"aria-label": (0, import_i18n34.__)("Upload", "elementor")
|
|
5994
6129
|
},
|
|
5995
|
-
/* @__PURE__ */
|
|
6130
|
+
/* @__PURE__ */ React84.createElement(import_icons23.UploadIcon, null)
|
|
5996
6131
|
);
|
|
5997
6132
|
|
|
5998
6133
|
// src/controls/svg-media-preview.tsx
|
|
5999
|
-
var
|
|
6000
|
-
var
|
|
6001
|
-
var
|
|
6134
|
+
var React85 = __toESM(require("react"));
|
|
6135
|
+
var import_ui67 = require("@elementor/ui");
|
|
6136
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
6002
6137
|
var ICON_PREVIEW_SIZE = 50;
|
|
6003
6138
|
var ICON_PREVIEW_COLOR = "#000000";
|
|
6004
6139
|
var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
@@ -6006,27 +6141,27 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
|
6006
6141
|
const { data: icons = [], isLoading } = useFontAwesome7Catalog(shouldLoadIconCatalog);
|
|
6007
6142
|
const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
|
|
6008
6143
|
if (isFetching || shouldLoadIconCatalog && isLoading) {
|
|
6009
|
-
return /* @__PURE__ */
|
|
6144
|
+
return /* @__PURE__ */ React85.createElement(import_ui67.CircularProgress, { role: "progressbar" });
|
|
6010
6145
|
}
|
|
6011
6146
|
if (selectedIcon) {
|
|
6012
|
-
return /* @__PURE__ */
|
|
6147
|
+
return /* @__PURE__ */ React85.createElement(IconPreview, { icon: selectedIcon });
|
|
6013
6148
|
}
|
|
6014
6149
|
if (shouldLoadIconCatalog) {
|
|
6015
|
-
return /* @__PURE__ */
|
|
6150
|
+
return /* @__PURE__ */ React85.createElement(IconPreviewPlaceholder, null);
|
|
6016
6151
|
}
|
|
6017
|
-
return /* @__PURE__ */
|
|
6152
|
+
return /* @__PURE__ */ React85.createElement(SvgPreview, { src });
|
|
6018
6153
|
};
|
|
6019
|
-
var IconPreview = ({ icon }) => /* @__PURE__ */
|
|
6154
|
+
var IconPreview = ({ icon }) => /* @__PURE__ */ React85.createElement(import_ui67.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React85.createElement(
|
|
6020
6155
|
FontAwesomeGlyph,
|
|
6021
6156
|
{
|
|
6022
6157
|
icon,
|
|
6023
6158
|
size: ICON_PREVIEW_SIZE,
|
|
6024
6159
|
color: ICON_PREVIEW_COLOR,
|
|
6025
|
-
label: (0,
|
|
6160
|
+
label: (0, import_i18n35.__)("Preview icon", "elementor")
|
|
6026
6161
|
}
|
|
6027
6162
|
));
|
|
6028
|
-
var IconPreviewPlaceholder = () => /* @__PURE__ */
|
|
6029
|
-
|
|
6163
|
+
var IconPreviewPlaceholder = () => /* @__PURE__ */ React85.createElement(
|
|
6164
|
+
import_ui67.Box,
|
|
6030
6165
|
{
|
|
6031
6166
|
"aria-hidden": true,
|
|
6032
6167
|
sx: {
|
|
@@ -6036,12 +6171,12 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React84.createElement(
|
|
|
6036
6171
|
}
|
|
6037
6172
|
}
|
|
6038
6173
|
);
|
|
6039
|
-
var SvgPreview = ({ src }) => /* @__PURE__ */
|
|
6040
|
-
|
|
6174
|
+
var SvgPreview = ({ src }) => /* @__PURE__ */ React85.createElement(
|
|
6175
|
+
import_ui67.CardMedia,
|
|
6041
6176
|
{
|
|
6042
6177
|
component: "img",
|
|
6043
6178
|
image: src,
|
|
6044
|
-
alt: (0,
|
|
6179
|
+
alt: (0, import_i18n35.__)("Preview SVG", "elementor"),
|
|
6045
6180
|
sx: { maxHeight: "140px", width: `${ICON_PREVIEW_SIZE}px`, color: ICON_PREVIEW_COLOR }
|
|
6046
6181
|
}
|
|
6047
6182
|
);
|
|
@@ -6051,7 +6186,7 @@ var TILE_SIZE = 8;
|
|
|
6051
6186
|
var TILE_WHITE = "transparent";
|
|
6052
6187
|
var TILE_BLACK = "#c1c1c1";
|
|
6053
6188
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
6054
|
-
var StyledCard = (0,
|
|
6189
|
+
var StyledCard = (0, import_ui68.styled)(import_ui68.Card)`
|
|
6055
6190
|
position: relative;
|
|
6056
6191
|
background-color: white;
|
|
6057
6192
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
@@ -6062,7 +6197,7 @@ var StyledCard = (0, import_ui67.styled)(import_ui67.Card)`
|
|
|
6062
6197
|
border: none;
|
|
6063
6198
|
`;
|
|
6064
6199
|
var PREVIEW_ICON_COLOR = "#000000";
|
|
6065
|
-
var StyledCardMediaContainer = (0,
|
|
6200
|
+
var StyledCardMediaContainer = (0, import_ui68.styled)(import_ui68.Stack)`
|
|
6066
6201
|
position: relative;
|
|
6067
6202
|
height: 140px;
|
|
6068
6203
|
object-fit: contain;
|
|
@@ -6082,11 +6217,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6082
6217
|
const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
|
|
6083
6218
|
const src = attachment?.url ?? url?.value ?? null;
|
|
6084
6219
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
6085
|
-
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0,
|
|
6086
|
-
const iconLibraryPopoverState = (0,
|
|
6087
|
-
const controlContainerRef = (0,
|
|
6088
|
-
const buttonGroupRef = (0,
|
|
6089
|
-
const [iconLibraryAnchor, setIconLibraryAnchor] = (0,
|
|
6220
|
+
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react51.useState)(false);
|
|
6221
|
+
const iconLibraryPopoverState = (0, import_ui68.usePopupState)({ variant: "popover" });
|
|
6222
|
+
const controlContainerRef = (0, import_react51.useRef)(null);
|
|
6223
|
+
const buttonGroupRef = (0, import_react51.useRef)(null);
|
|
6224
|
+
const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react51.useState)(null);
|
|
6090
6225
|
const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
|
|
6091
6226
|
const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
|
|
6092
6227
|
const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
|
|
@@ -6138,7 +6273,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6138
6273
|
setIconLibraryAnchor(anchor);
|
|
6139
6274
|
iconLibraryPopoverState.open(event);
|
|
6140
6275
|
};
|
|
6141
|
-
(0,
|
|
6276
|
+
(0, import_react51.useEffect)(() => {
|
|
6142
6277
|
if (!iconLibraryPopoverState.isOpen) {
|
|
6143
6278
|
return;
|
|
6144
6279
|
}
|
|
@@ -6154,8 +6289,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6154
6289
|
};
|
|
6155
6290
|
}, [iconLibraryPopoverState.isOpen]);
|
|
6156
6291
|
const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
|
|
6157
|
-
return /* @__PURE__ */
|
|
6158
|
-
|
|
6292
|
+
return /* @__PURE__ */ React86.createElement(import_ui68.Stack, { gap: 1, "aria-label": (0, import_i18n36.__)("SVG control", "elementor") }, /* @__PURE__ */ React86.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React86.createElement(
|
|
6293
|
+
import_ui68.Popover,
|
|
6159
6294
|
{
|
|
6160
6295
|
disableScrollLock: true,
|
|
6161
6296
|
open: iconLibraryPopoverState.isOpen,
|
|
@@ -6174,7 +6309,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6174
6309
|
}
|
|
6175
6310
|
}
|
|
6176
6311
|
},
|
|
6177
|
-
/* @__PURE__ */
|
|
6312
|
+
/* @__PURE__ */ React86.createElement(
|
|
6178
6313
|
IconLibraryPopover,
|
|
6179
6314
|
{
|
|
6180
6315
|
open: iconLibraryPopoverState.isOpen,
|
|
@@ -6185,14 +6320,14 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6185
6320
|
width: iconLibraryWidth
|
|
6186
6321
|
}
|
|
6187
6322
|
)
|
|
6188
|
-
) : null, /* @__PURE__ */
|
|
6189
|
-
|
|
6323
|
+
) : null, /* @__PURE__ */ React86.createElement(
|
|
6324
|
+
import_ui68.Box,
|
|
6190
6325
|
{
|
|
6191
6326
|
ref: controlContainerRef,
|
|
6192
6327
|
"data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
|
|
6193
6328
|
sx: { width: "100%" }
|
|
6194
6329
|
},
|
|
6195
|
-
/* @__PURE__ */
|
|
6330
|
+
/* @__PURE__ */ React86.createElement(ControlActions, null, /* @__PURE__ */ React86.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React86.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React86.createElement(
|
|
6196
6331
|
SvgMediaPreview,
|
|
6197
6332
|
{
|
|
6198
6333
|
isFetching,
|
|
@@ -6200,8 +6335,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6200
6335
|
iconClassName: selectedIconClass,
|
|
6201
6336
|
iconLibrary: selectedIconLibrary
|
|
6202
6337
|
}
|
|
6203
|
-
)), /* @__PURE__ */
|
|
6204
|
-
|
|
6338
|
+
)), /* @__PURE__ */ React86.createElement(
|
|
6339
|
+
import_ui68.CardOverlay,
|
|
6205
6340
|
{
|
|
6206
6341
|
sx: {
|
|
6207
6342
|
"&:hover": {
|
|
@@ -6209,7 +6344,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6209
6344
|
}
|
|
6210
6345
|
}
|
|
6211
6346
|
},
|
|
6212
|
-
/* @__PURE__ */
|
|
6347
|
+
/* @__PURE__ */ React86.createElement(
|
|
6213
6348
|
SvgMediaOverlay,
|
|
6214
6349
|
{
|
|
6215
6350
|
isAdmin,
|
|
@@ -6218,22 +6353,22 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6218
6353
|
onSelectSvg: handleSelectSvg,
|
|
6219
6354
|
onUpload: handleUpload,
|
|
6220
6355
|
onOpenIconLibrary: handleOpenIconLibrary,
|
|
6221
|
-
infotipTitle: (0,
|
|
6222
|
-
infotipDescription: /* @__PURE__ */
|
|
6356
|
+
infotipTitle: (0, import_i18n36.__)("Sorry, you can't upload that file yet.", "elementor"),
|
|
6357
|
+
infotipDescription: /* @__PURE__ */ React86.createElement(UnfilteredUploadInfotipDescription, null)
|
|
6223
6358
|
}
|
|
6224
6359
|
)
|
|
6225
6360
|
)))
|
|
6226
6361
|
));
|
|
6227
6362
|
});
|
|
6228
|
-
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */
|
|
6363
|
+
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React86.createElement(React86.Fragment, null, (0, import_i18n36.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React86.createElement("br", null), (0, import_i18n36.__)("file uploads.", "elementor"));
|
|
6229
6364
|
|
|
6230
6365
|
// src/controls/video-media-control.tsx
|
|
6231
|
-
var
|
|
6366
|
+
var React87 = __toESM(require("react"));
|
|
6232
6367
|
var import_editor_props36 = require("@elementor/editor-props");
|
|
6233
|
-
var
|
|
6234
|
-
var
|
|
6368
|
+
var import_icons24 = require("@elementor/icons");
|
|
6369
|
+
var import_ui69 = require("@elementor/ui");
|
|
6235
6370
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
6236
|
-
var
|
|
6371
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
6237
6372
|
var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
|
|
6238
6373
|
var VideoMediaControl = createControl(() => {
|
|
6239
6374
|
const { value, setValue, propType } = useBoundProp(import_editor_props36.videoSrcPropTypeUtil);
|
|
@@ -6263,8 +6398,8 @@ var VideoMediaControl = createControl(() => {
|
|
|
6263
6398
|
});
|
|
6264
6399
|
}
|
|
6265
6400
|
});
|
|
6266
|
-
return /* @__PURE__ */
|
|
6267
|
-
|
|
6401
|
+
return /* @__PURE__ */ React87.createElement(ControlActions, null, /* @__PURE__ */ React87.createElement(import_ui69.Card, { variant: "outlined" }, /* @__PURE__ */ React87.createElement(
|
|
6402
|
+
import_ui69.CardMedia,
|
|
6268
6403
|
{
|
|
6269
6404
|
sx: {
|
|
6270
6405
|
height: 140,
|
|
@@ -6278,46 +6413,46 @@ var VideoMediaControl = createControl(() => {
|
|
|
6278
6413
|
alignItems: "center"
|
|
6279
6414
|
}
|
|
6280
6415
|
},
|
|
6281
|
-
/* @__PURE__ */
|
|
6282
|
-
), /* @__PURE__ */
|
|
6283
|
-
|
|
6416
|
+
/* @__PURE__ */ React87.createElement(VideoPreview, { isFetching, videoUrl })
|
|
6417
|
+
), /* @__PURE__ */ React87.createElement(import_ui69.CardOverlay, null, /* @__PURE__ */ React87.createElement(import_ui69.Stack, { gap: 1 }, /* @__PURE__ */ React87.createElement(
|
|
6418
|
+
import_ui69.Button,
|
|
6284
6419
|
{
|
|
6285
6420
|
size: "tiny",
|
|
6286
6421
|
color: "inherit",
|
|
6287
6422
|
variant: "outlined",
|
|
6288
6423
|
onClick: () => open({ mode: "browse" })
|
|
6289
6424
|
},
|
|
6290
|
-
(0,
|
|
6291
|
-
), /* @__PURE__ */
|
|
6292
|
-
|
|
6425
|
+
(0, import_i18n37.__)("Select video", "elementor")
|
|
6426
|
+
), /* @__PURE__ */ React87.createElement(
|
|
6427
|
+
import_ui69.Button,
|
|
6293
6428
|
{
|
|
6294
6429
|
size: "tiny",
|
|
6295
6430
|
variant: "text",
|
|
6296
6431
|
color: "inherit",
|
|
6297
|
-
startIcon: /* @__PURE__ */
|
|
6432
|
+
startIcon: /* @__PURE__ */ React87.createElement(import_icons24.UploadIcon, null),
|
|
6298
6433
|
onClick: () => open({ mode: "upload" })
|
|
6299
6434
|
},
|
|
6300
|
-
(0,
|
|
6301
|
-
), /* @__PURE__ */
|
|
6302
|
-
|
|
6435
|
+
(0, import_i18n37.__)("Upload", "elementor")
|
|
6436
|
+
), /* @__PURE__ */ React87.createElement(
|
|
6437
|
+
import_ui69.Button,
|
|
6303
6438
|
{
|
|
6304
6439
|
size: "tiny",
|
|
6305
6440
|
variant: "text",
|
|
6306
6441
|
color: "inherit",
|
|
6307
6442
|
onClick: () => open({ mode: "url", currentUrl: currentUrlForModal })
|
|
6308
6443
|
},
|
|
6309
|
-
(0,
|
|
6444
|
+
(0, import_i18n37.__)("Insert from URL", "elementor")
|
|
6310
6445
|
)))));
|
|
6311
6446
|
});
|
|
6312
6447
|
var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
6313
6448
|
if (isFetching) {
|
|
6314
|
-
return /* @__PURE__ */
|
|
6449
|
+
return /* @__PURE__ */ React87.createElement(import_ui69.CircularProgress, null);
|
|
6315
6450
|
}
|
|
6316
6451
|
if (videoUrl) {
|
|
6317
|
-
return /* @__PURE__ */
|
|
6452
|
+
return /* @__PURE__ */ React87.createElement(
|
|
6318
6453
|
"video",
|
|
6319
6454
|
{
|
|
6320
|
-
"aria-label": (0,
|
|
6455
|
+
"aria-label": (0, import_i18n37.__)("Video preview", "elementor"),
|
|
6321
6456
|
src: videoUrl,
|
|
6322
6457
|
muted: true,
|
|
6323
6458
|
preload: "metadata",
|
|
@@ -6330,30 +6465,30 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
|
6330
6465
|
}
|
|
6331
6466
|
);
|
|
6332
6467
|
}
|
|
6333
|
-
return /* @__PURE__ */
|
|
6468
|
+
return /* @__PURE__ */ React87.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
|
|
6334
6469
|
};
|
|
6335
6470
|
|
|
6336
6471
|
// src/controls/background-control/background-control.tsx
|
|
6337
|
-
var
|
|
6472
|
+
var React94 = __toESM(require("react"));
|
|
6338
6473
|
var import_editor_props42 = require("@elementor/editor-props");
|
|
6339
|
-
var
|
|
6340
|
-
var
|
|
6474
|
+
var import_ui77 = require("@elementor/ui");
|
|
6475
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
6341
6476
|
|
|
6342
6477
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
6343
|
-
var
|
|
6478
|
+
var React93 = __toESM(require("react"));
|
|
6344
6479
|
var import_editor_props41 = require("@elementor/editor-props");
|
|
6345
|
-
var
|
|
6480
|
+
var import_ui76 = require("@elementor/ui");
|
|
6346
6481
|
var import_wp_media4 = require("@elementor/wp-media");
|
|
6347
|
-
var
|
|
6482
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
6348
6483
|
|
|
6349
6484
|
// src/env.ts
|
|
6350
6485
|
var import_env = require("@elementor/env");
|
|
6351
6486
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
6352
6487
|
|
|
6353
6488
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
6354
|
-
var
|
|
6489
|
+
var React88 = __toESM(require("react"));
|
|
6355
6490
|
var import_editor_props37 = require("@elementor/editor-props");
|
|
6356
|
-
var
|
|
6491
|
+
var import_ui70 = require("@elementor/ui");
|
|
6357
6492
|
var BackgroundGradientColorControl = createControl(() => {
|
|
6358
6493
|
const { value, setValue } = useBoundProp(import_editor_props37.backgroundGradientOverlayPropTypeUtil);
|
|
6359
6494
|
const handleChange = (newValue) => {
|
|
@@ -6391,8 +6526,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
6391
6526
|
positions: positions?.value.split(" ")
|
|
6392
6527
|
};
|
|
6393
6528
|
};
|
|
6394
|
-
return /* @__PURE__ */
|
|
6395
|
-
|
|
6529
|
+
return /* @__PURE__ */ React88.createElement(
|
|
6530
|
+
import_ui70.UnstableGradientBox,
|
|
6396
6531
|
{
|
|
6397
6532
|
sx: { width: "auto", padding: 1.5 },
|
|
6398
6533
|
value: normalizeValue(),
|
|
@@ -6416,53 +6551,53 @@ var initialBackgroundGradientOverlay = import_editor_props37.backgroundGradientO
|
|
|
6416
6551
|
});
|
|
6417
6552
|
|
|
6418
6553
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
6419
|
-
var
|
|
6420
|
-
var
|
|
6421
|
-
var
|
|
6422
|
-
var
|
|
6554
|
+
var React89 = __toESM(require("react"));
|
|
6555
|
+
var import_icons25 = require("@elementor/icons");
|
|
6556
|
+
var import_ui71 = require("@elementor/ui");
|
|
6557
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
6423
6558
|
var attachmentControlOptions = [
|
|
6424
6559
|
{
|
|
6425
6560
|
value: "fixed",
|
|
6426
|
-
label: (0,
|
|
6427
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6561
|
+
label: (0, import_i18n38.__)("Fixed", "elementor"),
|
|
6562
|
+
renderContent: ({ size }) => /* @__PURE__ */ React89.createElement(import_icons25.PinIcon, { fontSize: size }),
|
|
6428
6563
|
showTooltip: true
|
|
6429
6564
|
},
|
|
6430
6565
|
{
|
|
6431
6566
|
value: "scroll",
|
|
6432
|
-
label: (0,
|
|
6433
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6567
|
+
label: (0, import_i18n38.__)("Scroll", "elementor"),
|
|
6568
|
+
renderContent: ({ size }) => /* @__PURE__ */ React89.createElement(import_icons25.PinnedOffIcon, { fontSize: size }),
|
|
6434
6569
|
showTooltip: true
|
|
6435
6570
|
}
|
|
6436
6571
|
];
|
|
6437
6572
|
var BackgroundImageOverlayAttachment = () => {
|
|
6438
|
-
return /* @__PURE__ */
|
|
6573
|
+
return /* @__PURE__ */ React89.createElement(PopoverGridContainer, null, /* @__PURE__ */ React89.createElement(import_ui71.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ControlFormLabel, null, (0, import_i18n38.__)("Attachment", "elementor"))), /* @__PURE__ */ React89.createElement(import_ui71.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React89.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
6439
6574
|
};
|
|
6440
6575
|
|
|
6441
6576
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
6442
|
-
var
|
|
6443
|
-
var
|
|
6577
|
+
var React90 = __toESM(require("react"));
|
|
6578
|
+
var import_react52 = require("react");
|
|
6444
6579
|
var import_editor_props38 = require("@elementor/editor-props");
|
|
6445
6580
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
6446
|
-
var
|
|
6447
|
-
var
|
|
6448
|
-
var
|
|
6581
|
+
var import_icons26 = require("@elementor/icons");
|
|
6582
|
+
var import_ui72 = require("@elementor/ui");
|
|
6583
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
6449
6584
|
var backgroundPositionOptions = [
|
|
6450
|
-
{ label: (0,
|
|
6451
|
-
{ label: (0,
|
|
6452
|
-
{ label: (0,
|
|
6453
|
-
{ label: (0,
|
|
6454
|
-
{ label: (0,
|
|
6455
|
-
{ label: (0,
|
|
6456
|
-
{ label: (0,
|
|
6457
|
-
{ label: (0,
|
|
6458
|
-
{ label: (0,
|
|
6459
|
-
{ label: (0,
|
|
6585
|
+
{ label: (0, import_i18n39.__)("Center center", "elementor"), value: "center center" },
|
|
6586
|
+
{ label: (0, import_i18n39.__)("Center left", "elementor"), value: "center left" },
|
|
6587
|
+
{ label: (0, import_i18n39.__)("Center right", "elementor"), value: "center right" },
|
|
6588
|
+
{ label: (0, import_i18n39.__)("Top center", "elementor"), value: "top center" },
|
|
6589
|
+
{ label: (0, import_i18n39.__)("Top left", "elementor"), value: "top left" },
|
|
6590
|
+
{ label: (0, import_i18n39.__)("Top right", "elementor"), value: "top right" },
|
|
6591
|
+
{ label: (0, import_i18n39.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
6592
|
+
{ label: (0, import_i18n39.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
6593
|
+
{ label: (0, import_i18n39.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
6594
|
+
{ label: (0, import_i18n39.__)("Custom", "elementor"), value: "custom" }
|
|
6460
6595
|
];
|
|
6461
6596
|
var BackgroundImageOverlayPosition = () => {
|
|
6462
6597
|
const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
|
|
6463
6598
|
const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
|
|
6464
6599
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
6465
|
-
const rowRef = (0,
|
|
6600
|
+
const rowRef = (0, import_react52.useRef)(null);
|
|
6466
6601
|
const handlePositionChange = (event) => {
|
|
6467
6602
|
const value = event.target.value || null;
|
|
6468
6603
|
if (value === "custom") {
|
|
@@ -6471,8 +6606,8 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
6471
6606
|
stringPropContext.setValue(value);
|
|
6472
6607
|
}
|
|
6473
6608
|
};
|
|
6474
|
-
return /* @__PURE__ */
|
|
6475
|
-
|
|
6609
|
+
return /* @__PURE__ */ React90.createElement(import_ui72.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React90.createElement(PopoverGridContainer, null, /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React90.createElement(ControlFormLabel, null, (0, import_i18n39.__)("Position", "elementor"))), /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React90.createElement(ControlActions, null, /* @__PURE__ */ React90.createElement(
|
|
6610
|
+
import_ui72.Select,
|
|
6476
6611
|
{
|
|
6477
6612
|
fullWidth: true,
|
|
6478
6613
|
size: "tiny",
|
|
@@ -6480,18 +6615,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
6480
6615
|
disabled: stringPropContext.disabled,
|
|
6481
6616
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
6482
6617
|
},
|
|
6483
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
6484
|
-
))))), isCustom ? /* @__PURE__ */
|
|
6618
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React90.createElement(import_editor_ui12.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
6619
|
+
))))), isCustom ? /* @__PURE__ */ React90.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React90.createElement(import_ui72.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React90.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React90.createElement(
|
|
6485
6620
|
SizeControl,
|
|
6486
6621
|
{
|
|
6487
|
-
startIcon: /* @__PURE__ */
|
|
6622
|
+
startIcon: /* @__PURE__ */ React90.createElement(import_icons26.LetterXIcon, { fontSize: "tiny" }),
|
|
6488
6623
|
anchorRef: rowRef,
|
|
6489
6624
|
min: -Number.MAX_SAFE_INTEGER
|
|
6490
6625
|
}
|
|
6491
|
-
))), /* @__PURE__ */
|
|
6626
|
+
))), /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React90.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React90.createElement(
|
|
6492
6627
|
SizeControl,
|
|
6493
6628
|
{
|
|
6494
|
-
startIcon: /* @__PURE__ */
|
|
6629
|
+
startIcon: /* @__PURE__ */ React90.createElement(import_icons26.LetterYIcon, { fontSize: "tiny" }),
|
|
6495
6630
|
anchorRef: rowRef,
|
|
6496
6631
|
min: -Number.MAX_SAFE_INTEGER
|
|
6497
6632
|
}
|
|
@@ -6499,70 +6634,70 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
6499
6634
|
};
|
|
6500
6635
|
|
|
6501
6636
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
6502
|
-
var
|
|
6503
|
-
var
|
|
6504
|
-
var
|
|
6505
|
-
var
|
|
6637
|
+
var React91 = __toESM(require("react"));
|
|
6638
|
+
var import_icons27 = require("@elementor/icons");
|
|
6639
|
+
var import_ui73 = require("@elementor/ui");
|
|
6640
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
6506
6641
|
var repeatControlOptions = [
|
|
6507
6642
|
{
|
|
6508
6643
|
value: "repeat",
|
|
6509
|
-
label: (0,
|
|
6510
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6644
|
+
label: (0, import_i18n40.__)("Repeat", "elementor"),
|
|
6645
|
+
renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons27.GridDotsIcon, { fontSize: size }),
|
|
6511
6646
|
showTooltip: true
|
|
6512
6647
|
},
|
|
6513
6648
|
{
|
|
6514
6649
|
value: "repeat-x",
|
|
6515
|
-
label: (0,
|
|
6516
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6650
|
+
label: (0, import_i18n40.__)("Repeat-x", "elementor"),
|
|
6651
|
+
renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons27.DotsHorizontalIcon, { fontSize: size }),
|
|
6517
6652
|
showTooltip: true
|
|
6518
6653
|
},
|
|
6519
6654
|
{
|
|
6520
6655
|
value: "repeat-y",
|
|
6521
|
-
label: (0,
|
|
6522
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6656
|
+
label: (0, import_i18n40.__)("Repeat-y", "elementor"),
|
|
6657
|
+
renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons27.DotsVerticalIcon, { fontSize: size }),
|
|
6523
6658
|
showTooltip: true
|
|
6524
6659
|
},
|
|
6525
6660
|
{
|
|
6526
6661
|
value: "no-repeat",
|
|
6527
|
-
label: (0,
|
|
6528
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6662
|
+
label: (0, import_i18n40.__)("No-repeat", "elementor"),
|
|
6663
|
+
renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons27.XIcon, { fontSize: size }),
|
|
6529
6664
|
showTooltip: true
|
|
6530
6665
|
}
|
|
6531
6666
|
];
|
|
6532
6667
|
var BackgroundImageOverlayRepeat = () => {
|
|
6533
|
-
return /* @__PURE__ */
|
|
6668
|
+
return /* @__PURE__ */ React91.createElement(PopoverGridContainer, null, /* @__PURE__ */ React91.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, (0, import_i18n40.__)("Repeat", "elementor"))), /* @__PURE__ */ React91.createElement(import_ui73.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React91.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
6534
6669
|
};
|
|
6535
6670
|
|
|
6536
6671
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
6537
|
-
var
|
|
6538
|
-
var
|
|
6672
|
+
var React92 = __toESM(require("react"));
|
|
6673
|
+
var import_react53 = require("react");
|
|
6539
6674
|
var import_editor_props39 = require("@elementor/editor-props");
|
|
6540
|
-
var
|
|
6541
|
-
var
|
|
6542
|
-
var
|
|
6675
|
+
var import_icons28 = require("@elementor/icons");
|
|
6676
|
+
var import_ui74 = require("@elementor/ui");
|
|
6677
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
6543
6678
|
var sizeControlOptions = [
|
|
6544
6679
|
{
|
|
6545
6680
|
value: "auto",
|
|
6546
|
-
label: (0,
|
|
6547
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6681
|
+
label: (0, import_i18n41.__)("Auto", "elementor"),
|
|
6682
|
+
renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons28.LetterAIcon, { fontSize: size }),
|
|
6548
6683
|
showTooltip: true
|
|
6549
6684
|
},
|
|
6550
6685
|
{
|
|
6551
6686
|
value: "cover",
|
|
6552
|
-
label: (0,
|
|
6553
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6687
|
+
label: (0, import_i18n41.__)("Cover", "elementor"),
|
|
6688
|
+
renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons28.ArrowsMaximizeIcon, { fontSize: size }),
|
|
6554
6689
|
showTooltip: true
|
|
6555
6690
|
},
|
|
6556
6691
|
{
|
|
6557
6692
|
value: "contain",
|
|
6558
|
-
label: (0,
|
|
6559
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6693
|
+
label: (0, import_i18n41.__)("Contain", "elementor"),
|
|
6694
|
+
renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons28.ArrowBarBothIcon, { fontSize: size }),
|
|
6560
6695
|
showTooltip: true
|
|
6561
6696
|
},
|
|
6562
6697
|
{
|
|
6563
6698
|
value: "custom",
|
|
6564
|
-
label: (0,
|
|
6565
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6699
|
+
label: (0, import_i18n41.__)("Custom", "elementor"),
|
|
6700
|
+
renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons28.PencilIcon, { fontSize: size }),
|
|
6566
6701
|
showTooltip: true
|
|
6567
6702
|
}
|
|
6568
6703
|
];
|
|
@@ -6570,7 +6705,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
6570
6705
|
const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
|
|
6571
6706
|
const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
|
|
6572
6707
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
6573
|
-
const rowRef = (0,
|
|
6708
|
+
const rowRef = (0, import_react53.useRef)(null);
|
|
6574
6709
|
const handleSizeChange = (size) => {
|
|
6575
6710
|
if (size === "custom") {
|
|
6576
6711
|
backgroundImageScaleContext.setValue({ width: null, height: null });
|
|
@@ -6578,7 +6713,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
6578
6713
|
stringPropContext.setValue(size);
|
|
6579
6714
|
}
|
|
6580
6715
|
};
|
|
6581
|
-
return /* @__PURE__ */
|
|
6716
|
+
return /* @__PURE__ */ React92.createElement(import_ui74.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n41.__)("Size", "elementor"))), /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React92.createElement(
|
|
6582
6717
|
ControlToggleButtonGroup,
|
|
6583
6718
|
{
|
|
6584
6719
|
exclusive: true,
|
|
@@ -6587,17 +6722,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
6587
6722
|
disabled: stringPropContext.disabled,
|
|
6588
6723
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
6589
6724
|
}
|
|
6590
|
-
)))), isCustom ? /* @__PURE__ */
|
|
6725
|
+
)))), isCustom ? /* @__PURE__ */ React92.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React92.createElement(
|
|
6591
6726
|
SizeControl,
|
|
6592
6727
|
{
|
|
6593
|
-
startIcon: /* @__PURE__ */
|
|
6728
|
+
startIcon: /* @__PURE__ */ React92.createElement(import_icons28.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
6594
6729
|
extendedOptions: ["auto"],
|
|
6595
6730
|
anchorRef: rowRef
|
|
6596
6731
|
}
|
|
6597
|
-
))), /* @__PURE__ */
|
|
6732
|
+
))), /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React92.createElement(
|
|
6598
6733
|
SizeControl,
|
|
6599
6734
|
{
|
|
6600
|
-
startIcon: /* @__PURE__ */
|
|
6735
|
+
startIcon: /* @__PURE__ */ React92.createElement(import_icons28.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
6601
6736
|
extendedOptions: ["auto"],
|
|
6602
6737
|
anchorRef: rowRef
|
|
6603
6738
|
}
|
|
@@ -6605,9 +6740,9 @@ var BackgroundImageOverlaySize = () => {
|
|
|
6605
6740
|
};
|
|
6606
6741
|
|
|
6607
6742
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
6608
|
-
var
|
|
6743
|
+
var import_react54 = require("react");
|
|
6609
6744
|
var import_editor_props40 = require("@elementor/editor-props");
|
|
6610
|
-
var
|
|
6745
|
+
var import_ui75 = require("@elementor/ui");
|
|
6611
6746
|
var useBackgroundTabsHistory = ({
|
|
6612
6747
|
color: initialBackgroundColorOverlay2,
|
|
6613
6748
|
image: initialBackgroundImageOverlay,
|
|
@@ -6625,8 +6760,8 @@ var useBackgroundTabsHistory = ({
|
|
|
6625
6760
|
}
|
|
6626
6761
|
return "image";
|
|
6627
6762
|
};
|
|
6628
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
6629
|
-
const valuesHistory = (0,
|
|
6763
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui75.useTabs)(getCurrentOverlayType());
|
|
6764
|
+
const valuesHistory = (0, import_react54.useRef)({
|
|
6630
6765
|
image: initialBackgroundImageOverlay,
|
|
6631
6766
|
color: initialBackgroundColorOverlay2,
|
|
6632
6767
|
gradient: initialBackgroundGradientOverlay2
|
|
@@ -6694,29 +6829,29 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
6694
6829
|
}
|
|
6695
6830
|
});
|
|
6696
6831
|
var backgroundResolutionOptions = [
|
|
6697
|
-
{ label: (0,
|
|
6698
|
-
{ label: (0,
|
|
6699
|
-
{ label: (0,
|
|
6700
|
-
{ label: (0,
|
|
6832
|
+
{ label: (0, import_i18n42.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
6833
|
+
{ label: (0, import_i18n42.__)("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
6834
|
+
{ label: (0, import_i18n42.__)("Large 1024 x 1024", "elementor"), value: "large" },
|
|
6835
|
+
{ label: (0, import_i18n42.__)("Full", "elementor"), value: "full" }
|
|
6701
6836
|
];
|
|
6702
6837
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
6703
6838
|
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props41.backgroundOverlayPropTypeUtil);
|
|
6704
|
-
return /* @__PURE__ */
|
|
6839
|
+
return /* @__PURE__ */ React93.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React93.createElement(
|
|
6705
6840
|
ControlRepeater,
|
|
6706
6841
|
{
|
|
6707
6842
|
initial: getInitialBackgroundOverlay(),
|
|
6708
6843
|
propTypeUtil: import_editor_props41.backgroundOverlayPropTypeUtil
|
|
6709
6844
|
},
|
|
6710
|
-
/* @__PURE__ */
|
|
6711
|
-
/* @__PURE__ */
|
|
6845
|
+
/* @__PURE__ */ React93.createElement(RepeaterHeader, { label: (0, import_i18n42.__)("Overlay", "elementor") }, /* @__PURE__ */ React93.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
6846
|
+
/* @__PURE__ */ React93.createElement(ItemsContainer, null, /* @__PURE__ */ React93.createElement(
|
|
6712
6847
|
Item,
|
|
6713
6848
|
{
|
|
6714
6849
|
Icon: ItemIcon2,
|
|
6715
6850
|
Label: ItemLabel3,
|
|
6716
|
-
actions: /* @__PURE__ */
|
|
6851
|
+
actions: /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(DuplicateItemAction, null), /* @__PURE__ */ React93.createElement(DisableItemAction, null), /* @__PURE__ */ React93.createElement(RemoveItemAction, null))
|
|
6717
6852
|
}
|
|
6718
6853
|
)),
|
|
6719
|
-
/* @__PURE__ */
|
|
6854
|
+
/* @__PURE__ */ React93.createElement(EditItemPopover, null, /* @__PURE__ */ React93.createElement(ItemContent2, null))
|
|
6720
6855
|
));
|
|
6721
6856
|
});
|
|
6722
6857
|
var ItemContent2 = () => {
|
|
@@ -6726,27 +6861,27 @@ var ItemContent2 = () => {
|
|
|
6726
6861
|
gradient: initialBackgroundGradientOverlay.value
|
|
6727
6862
|
});
|
|
6728
6863
|
const { rowRef } = useRepeaterContext();
|
|
6729
|
-
return /* @__PURE__ */
|
|
6730
|
-
|
|
6864
|
+
return /* @__PURE__ */ React93.createElement(import_ui76.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React93.createElement(import_ui76.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React93.createElement(
|
|
6865
|
+
import_ui76.Tabs,
|
|
6731
6866
|
{
|
|
6732
6867
|
size: "small",
|
|
6733
6868
|
variant: "fullWidth",
|
|
6734
6869
|
...getTabsProps(),
|
|
6735
|
-
"aria-label": (0,
|
|
6870
|
+
"aria-label": (0, import_i18n42.__)("Background Overlay", "elementor")
|
|
6736
6871
|
},
|
|
6737
|
-
/* @__PURE__ */
|
|
6738
|
-
/* @__PURE__ */
|
|
6739
|
-
/* @__PURE__ */
|
|
6740
|
-
)), /* @__PURE__ */
|
|
6872
|
+
/* @__PURE__ */ React93.createElement(import_ui76.Tab, { label: (0, import_i18n42.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
6873
|
+
/* @__PURE__ */ React93.createElement(import_ui76.Tab, { label: (0, import_i18n42.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
6874
|
+
/* @__PURE__ */ React93.createElement(import_ui76.Tab, { label: (0, import_i18n42.__)("Color", "elementor"), ...getTabProps("color") })
|
|
6875
|
+
)), /* @__PURE__ */ React93.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React93.createElement(PopoverContent, null, /* @__PURE__ */ React93.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React93.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React93.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React93.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React93.createElement(PopoverContent, null, /* @__PURE__ */ React93.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
6741
6876
|
};
|
|
6742
6877
|
var ItemIcon2 = ({ value }) => {
|
|
6743
6878
|
switch (value.$$type) {
|
|
6744
6879
|
case "background-image-overlay":
|
|
6745
|
-
return /* @__PURE__ */
|
|
6880
|
+
return /* @__PURE__ */ React93.createElement(ItemIconImage, { value });
|
|
6746
6881
|
case "background-color-overlay":
|
|
6747
|
-
return /* @__PURE__ */
|
|
6882
|
+
return /* @__PURE__ */ React93.createElement(ItemIconColor, { value });
|
|
6748
6883
|
case "background-gradient-overlay":
|
|
6749
|
-
return /* @__PURE__ */
|
|
6884
|
+
return /* @__PURE__ */ React93.createElement(ItemIconGradient, { value });
|
|
6750
6885
|
default:
|
|
6751
6886
|
return null;
|
|
6752
6887
|
}
|
|
@@ -6759,12 +6894,12 @@ var extractColorFrom = (prop) => {
|
|
|
6759
6894
|
};
|
|
6760
6895
|
var ItemIconColor = ({ value: prop }) => {
|
|
6761
6896
|
const color = extractColorFrom(prop);
|
|
6762
|
-
return /* @__PURE__ */
|
|
6897
|
+
return /* @__PURE__ */ React93.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
6763
6898
|
};
|
|
6764
6899
|
var ItemIconImage = ({ value }) => {
|
|
6765
6900
|
const { imageUrl } = useImage(value);
|
|
6766
|
-
return /* @__PURE__ */
|
|
6767
|
-
|
|
6901
|
+
return /* @__PURE__ */ React93.createElement(
|
|
6902
|
+
import_ui76.CardMedia,
|
|
6768
6903
|
{
|
|
6769
6904
|
image: imageUrl,
|
|
6770
6905
|
sx: (theme) => ({
|
|
@@ -6778,43 +6913,43 @@ var ItemIconImage = ({ value }) => {
|
|
|
6778
6913
|
};
|
|
6779
6914
|
var ItemIconGradient = ({ value }) => {
|
|
6780
6915
|
const gradient = getGradientValue(value);
|
|
6781
|
-
return /* @__PURE__ */
|
|
6916
|
+
return /* @__PURE__ */ React93.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
6782
6917
|
};
|
|
6783
6918
|
var ItemLabel3 = ({ value }) => {
|
|
6784
6919
|
switch (value.$$type) {
|
|
6785
6920
|
case "background-image-overlay":
|
|
6786
|
-
return /* @__PURE__ */
|
|
6921
|
+
return /* @__PURE__ */ React93.createElement(ItemLabelImage, { value });
|
|
6787
6922
|
case "background-color-overlay":
|
|
6788
|
-
return /* @__PURE__ */
|
|
6923
|
+
return /* @__PURE__ */ React93.createElement(ItemLabelColor, { value });
|
|
6789
6924
|
case "background-gradient-overlay":
|
|
6790
|
-
return /* @__PURE__ */
|
|
6925
|
+
return /* @__PURE__ */ React93.createElement(ItemLabelGradient, { value });
|
|
6791
6926
|
default:
|
|
6792
6927
|
return null;
|
|
6793
6928
|
}
|
|
6794
6929
|
};
|
|
6795
6930
|
var ItemLabelColor = ({ value: prop }) => {
|
|
6796
6931
|
const color = extractColorFrom(prop);
|
|
6797
|
-
return /* @__PURE__ */
|
|
6932
|
+
return /* @__PURE__ */ React93.createElement("span", null, color);
|
|
6798
6933
|
};
|
|
6799
6934
|
var ItemLabelImage = ({ value }) => {
|
|
6800
6935
|
const { imageTitle } = useImage(value);
|
|
6801
|
-
return /* @__PURE__ */
|
|
6936
|
+
return /* @__PURE__ */ React93.createElement("span", null, imageTitle);
|
|
6802
6937
|
};
|
|
6803
6938
|
var ItemLabelGradient = ({ value }) => {
|
|
6804
6939
|
if (value.value.type.value === "linear") {
|
|
6805
|
-
return /* @__PURE__ */
|
|
6940
|
+
return /* @__PURE__ */ React93.createElement("span", null, (0, import_i18n42.__)("Linear Gradient", "elementor"));
|
|
6806
6941
|
}
|
|
6807
|
-
return /* @__PURE__ */
|
|
6942
|
+
return /* @__PURE__ */ React93.createElement("span", null, (0, import_i18n42.__)("Radial Gradient", "elementor"));
|
|
6808
6943
|
};
|
|
6809
6944
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
6810
6945
|
const propContext = useBoundProp(import_editor_props41.backgroundColorOverlayPropTypeUtil);
|
|
6811
|
-
return /* @__PURE__ */
|
|
6946
|
+
return /* @__PURE__ */ React93.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React93.createElement(ColorControl, { anchorEl })));
|
|
6812
6947
|
};
|
|
6813
6948
|
var ImageOverlayContent = () => {
|
|
6814
6949
|
const propContext = useBoundProp(import_editor_props41.backgroundImageOverlayPropTypeUtil);
|
|
6815
|
-
return /* @__PURE__ */
|
|
6950
|
+
return /* @__PURE__ */ React93.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React93.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React93.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React93.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React93.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React93.createElement(BackgroundImageOverlayAttachment, null)));
|
|
6816
6951
|
};
|
|
6817
|
-
var StyledUnstableColorIndicator3 = (0,
|
|
6952
|
+
var StyledUnstableColorIndicator3 = (0, import_ui76.styled)(import_ui76.UnstableColorIndicator)(({ theme }) => ({
|
|
6818
6953
|
height: "1rem",
|
|
6819
6954
|
width: "1rem",
|
|
6820
6955
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
@@ -6853,29 +6988,29 @@ var getGradientValue = (value) => {
|
|
|
6853
6988
|
|
|
6854
6989
|
// src/controls/background-control/background-control.tsx
|
|
6855
6990
|
var clipOptions = [
|
|
6856
|
-
{ label: (0,
|
|
6857
|
-
{ label: (0,
|
|
6858
|
-
{ label: (0,
|
|
6859
|
-
{ label: (0,
|
|
6991
|
+
{ label: (0, import_i18n43.__)("Full element", "elementor"), value: "border-box" },
|
|
6992
|
+
{ label: (0, import_i18n43.__)("Padding edges", "elementor"), value: "padding-box" },
|
|
6993
|
+
{ label: (0, import_i18n43.__)("Content edges", "elementor"), value: "content-box" },
|
|
6994
|
+
{ label: (0, import_i18n43.__)("Text", "elementor"), value: "text" }
|
|
6860
6995
|
];
|
|
6861
|
-
var colorLabel = (0,
|
|
6862
|
-
var clipLabel = (0,
|
|
6996
|
+
var colorLabel = (0, import_i18n43.__)("Color", "elementor");
|
|
6997
|
+
var clipLabel = (0, import_i18n43.__)("Clipping", "elementor");
|
|
6863
6998
|
var BackgroundControl = createControl(() => {
|
|
6864
6999
|
const propContext = useBoundProp(import_editor_props42.backgroundPropTypeUtil);
|
|
6865
|
-
return /* @__PURE__ */
|
|
7000
|
+
return /* @__PURE__ */ React94.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React94.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React94.createElement(BackgroundColorField, null), /* @__PURE__ */ React94.createElement(BackgroundClipField, null));
|
|
6866
7001
|
});
|
|
6867
7002
|
var BackgroundColorField = () => {
|
|
6868
|
-
return /* @__PURE__ */
|
|
7003
|
+
return /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ColorControl, null))));
|
|
6869
7004
|
};
|
|
6870
7005
|
var BackgroundClipField = () => {
|
|
6871
|
-
return /* @__PURE__ */
|
|
7006
|
+
return /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(SelectControl, { options: clipOptions }))));
|
|
6872
7007
|
};
|
|
6873
7008
|
|
|
6874
7009
|
// src/controls/repeatable-control.tsx
|
|
6875
|
-
var
|
|
6876
|
-
var
|
|
7010
|
+
var React95 = __toESM(require("react"));
|
|
7011
|
+
var import_react55 = require("react");
|
|
6877
7012
|
var import_editor_props43 = require("@elementor/editor-props");
|
|
6878
|
-
var
|
|
7013
|
+
var import_ui78 = require("@elementor/ui");
|
|
6879
7014
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
6880
7015
|
var RepeatableControl = createControl(
|
|
6881
7016
|
({
|
|
@@ -6894,11 +7029,11 @@ var RepeatableControl = createControl(
|
|
|
6894
7029
|
if (!childPropTypeUtil) {
|
|
6895
7030
|
return null;
|
|
6896
7031
|
}
|
|
6897
|
-
const childArrayPropTypeUtil2 = (0,
|
|
7032
|
+
const childArrayPropTypeUtil2 = (0, import_react55.useMemo)(
|
|
6898
7033
|
() => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
6899
7034
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
6900
7035
|
);
|
|
6901
|
-
const contextValue = (0,
|
|
7036
|
+
const contextValue = (0, import_react55.useMemo)(
|
|
6902
7037
|
() => ({
|
|
6903
7038
|
...childControlConfig,
|
|
6904
7039
|
placeholder: placeholder || "",
|
|
@@ -6908,14 +7043,14 @@ var RepeatableControl = createControl(
|
|
|
6908
7043
|
);
|
|
6909
7044
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
|
|
6910
7045
|
const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
|
|
6911
|
-
return /* @__PURE__ */
|
|
7046
|
+
return /* @__PURE__ */ React95.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React95.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React95.createElement(
|
|
6912
7047
|
ControlRepeater,
|
|
6913
7048
|
{
|
|
6914
7049
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
6915
7050
|
propTypeUtil: childArrayPropTypeUtil2,
|
|
6916
7051
|
isItemDisabled: isItemDisabled2
|
|
6917
7052
|
},
|
|
6918
|
-
/* @__PURE__ */
|
|
7053
|
+
/* @__PURE__ */ React95.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React95.createElement(
|
|
6919
7054
|
TooltipAddItemAction,
|
|
6920
7055
|
{
|
|
6921
7056
|
...addItemTooltipProps,
|
|
@@ -6923,22 +7058,22 @@ var RepeatableControl = createControl(
|
|
|
6923
7058
|
ariaLabel: repeaterLabel
|
|
6924
7059
|
}
|
|
6925
7060
|
)),
|
|
6926
|
-
/* @__PURE__ */
|
|
7061
|
+
/* @__PURE__ */ React95.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React95.createElement(
|
|
6927
7062
|
Item,
|
|
6928
7063
|
{
|
|
6929
7064
|
Icon: ItemIcon3,
|
|
6930
7065
|
Label: ItemLabel4,
|
|
6931
|
-
actions: /* @__PURE__ */
|
|
7066
|
+
actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, showDuplicate && /* @__PURE__ */ React95.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React95.createElement(DisableItemAction, null), /* @__PURE__ */ React95.createElement(RemoveItemAction, null))
|
|
6932
7067
|
}
|
|
6933
7068
|
)),
|
|
6934
|
-
/* @__PURE__ */
|
|
7069
|
+
/* @__PURE__ */ React95.createElement(EditItemPopover, null, /* @__PURE__ */ React95.createElement(Content2, null))
|
|
6935
7070
|
)));
|
|
6936
7071
|
}
|
|
6937
7072
|
);
|
|
6938
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
7073
|
+
var ItemIcon3 = () => /* @__PURE__ */ React95.createElement(React95.Fragment, null);
|
|
6939
7074
|
var Content2 = () => {
|
|
6940
7075
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
6941
|
-
return /* @__PURE__ */
|
|
7076
|
+
return /* @__PURE__ */ React95.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React95.createElement(PopoverGridContainer, null, /* @__PURE__ */ React95.createElement(ChildControl, { ...props })));
|
|
6942
7077
|
};
|
|
6943
7078
|
var interpolate = (template, data) => {
|
|
6944
7079
|
if (!data) {
|
|
@@ -7021,7 +7156,7 @@ var ItemLabel4 = ({ value }) => {
|
|
|
7021
7156
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
7022
7157
|
const isReadOnly = !!childProps?.readOnly;
|
|
7023
7158
|
const color = getTextColor(isReadOnly, showPlaceholder);
|
|
7024
|
-
return /* @__PURE__ */
|
|
7159
|
+
return /* @__PURE__ */ React95.createElement(import_ui78.Box, { component: "span", color }, label);
|
|
7025
7160
|
};
|
|
7026
7161
|
var getAllProperties = (pattern) => {
|
|
7027
7162
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -7029,11 +7164,11 @@ var getAllProperties = (pattern) => {
|
|
|
7029
7164
|
};
|
|
7030
7165
|
|
|
7031
7166
|
// src/controls/key-value-control.tsx
|
|
7032
|
-
var
|
|
7033
|
-
var
|
|
7167
|
+
var React96 = __toESM(require("react"));
|
|
7168
|
+
var import_react56 = require("react");
|
|
7034
7169
|
var import_editor_props44 = require("@elementor/editor-props");
|
|
7035
|
-
var
|
|
7036
|
-
var
|
|
7170
|
+
var import_ui79 = require("@elementor/ui");
|
|
7171
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
7037
7172
|
|
|
7038
7173
|
// src/utils/escape-html-attr.ts
|
|
7039
7174
|
var escapeHtmlAttr = (value) => {
|
|
@@ -7057,23 +7192,23 @@ var getInitialFieldValue = (fieldValue) => {
|
|
|
7057
7192
|
};
|
|
7058
7193
|
var KeyValueControl = createControl((props = {}) => {
|
|
7059
7194
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
|
|
7060
|
-
const [keyError, setKeyError] = (0,
|
|
7061
|
-
const [valueError, setValueError] = (0,
|
|
7062
|
-
const [sessionState, setSessionState] = (0,
|
|
7195
|
+
const [keyError, setKeyError] = (0, import_react56.useState)("");
|
|
7196
|
+
const [valueError, setValueError] = (0, import_react56.useState)("");
|
|
7197
|
+
const [sessionState, setSessionState] = (0, import_react56.useState)({
|
|
7063
7198
|
key: getInitialFieldValue(value?.key),
|
|
7064
7199
|
value: getInitialFieldValue(value?.value)
|
|
7065
7200
|
});
|
|
7066
|
-
const keyLabel = props.keyName || (0,
|
|
7067
|
-
const valueLabel = props.valueName || (0,
|
|
7201
|
+
const keyLabel = props.keyName || (0, import_i18n44.__)("Key", "elementor");
|
|
7202
|
+
const valueLabel = props.valueName || (0, import_i18n44.__)("Value", "elementor");
|
|
7068
7203
|
const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
|
|
7069
7204
|
keyHelper: void 0,
|
|
7070
7205
|
valueHelper: void 0
|
|
7071
7206
|
};
|
|
7072
|
-
const [keyRegex, valueRegex, errMsg] = (0,
|
|
7207
|
+
const [keyRegex, valueRegex, errMsg] = (0, import_react56.useMemo)(
|
|
7073
7208
|
() => [
|
|
7074
7209
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
7075
7210
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
7076
|
-
props.validationErrorMessage || (0,
|
|
7211
|
+
props.validationErrorMessage || (0, import_i18n44.__)("Invalid Format", "elementor")
|
|
7077
7212
|
],
|
|
7078
7213
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
7079
7214
|
);
|
|
@@ -7122,14 +7257,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
7122
7257
|
});
|
|
7123
7258
|
}
|
|
7124
7259
|
};
|
|
7125
|
-
return /* @__PURE__ */
|
|
7260
|
+
return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React96.createElement(import_ui79.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React96.createElement(
|
|
7126
7261
|
TextControl,
|
|
7127
7262
|
{
|
|
7128
7263
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
7129
7264
|
error: !!keyError,
|
|
7130
7265
|
helperText: keyHelper
|
|
7131
7266
|
}
|
|
7132
|
-
)), !!keyError && /* @__PURE__ */
|
|
7267
|
+
)), !!keyError && /* @__PURE__ */ React96.createElement(import_ui79.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React96.createElement(import_ui79.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React96.createElement(
|
|
7133
7268
|
TextControl,
|
|
7134
7269
|
{
|
|
7135
7270
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -7137,27 +7272,27 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
7137
7272
|
inputDisabled: !!keyError,
|
|
7138
7273
|
helperText: valueHelper
|
|
7139
7274
|
}
|
|
7140
|
-
)), !!valueError && /* @__PURE__ */
|
|
7275
|
+
)), !!valueError && /* @__PURE__ */ React96.createElement(import_ui79.FormHelperText, { error: true }, valueError))));
|
|
7141
7276
|
});
|
|
7142
7277
|
|
|
7143
7278
|
// src/controls/position-control.tsx
|
|
7144
|
-
var
|
|
7279
|
+
var React97 = __toESM(require("react"));
|
|
7145
7280
|
var import_editor_props45 = require("@elementor/editor-props");
|
|
7146
7281
|
var import_editor_ui13 = require("@elementor/editor-ui");
|
|
7147
|
-
var
|
|
7148
|
-
var
|
|
7149
|
-
var
|
|
7282
|
+
var import_icons29 = require("@elementor/icons");
|
|
7283
|
+
var import_ui80 = require("@elementor/ui");
|
|
7284
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
7150
7285
|
var positionOptions = [
|
|
7151
|
-
{ label: (0,
|
|
7152
|
-
{ label: (0,
|
|
7153
|
-
{ label: (0,
|
|
7154
|
-
{ label: (0,
|
|
7155
|
-
{ label: (0,
|
|
7156
|
-
{ label: (0,
|
|
7157
|
-
{ label: (0,
|
|
7158
|
-
{ label: (0,
|
|
7159
|
-
{ label: (0,
|
|
7160
|
-
{ label: (0,
|
|
7286
|
+
{ label: (0, import_i18n45.__)("Center center", "elementor"), value: "center center" },
|
|
7287
|
+
{ label: (0, import_i18n45.__)("Center left", "elementor"), value: "center left" },
|
|
7288
|
+
{ label: (0, import_i18n45.__)("Center right", "elementor"), value: "center right" },
|
|
7289
|
+
{ label: (0, import_i18n45.__)("Top center", "elementor"), value: "top center" },
|
|
7290
|
+
{ label: (0, import_i18n45.__)("Top left", "elementor"), value: "top left" },
|
|
7291
|
+
{ label: (0, import_i18n45.__)("Top right", "elementor"), value: "top right" },
|
|
7292
|
+
{ label: (0, import_i18n45.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
7293
|
+
{ label: (0, import_i18n45.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
7294
|
+
{ label: (0, import_i18n45.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
7295
|
+
{ label: (0, import_i18n45.__)("Custom", "elementor"), value: "custom" }
|
|
7161
7296
|
];
|
|
7162
7297
|
var PositionControl = () => {
|
|
7163
7298
|
const positionContext = useBoundProp(import_editor_props45.positionPropTypeUtil);
|
|
@@ -7172,8 +7307,8 @@ var PositionControl = () => {
|
|
|
7172
7307
|
stringPropContext.setValue(value);
|
|
7173
7308
|
}
|
|
7174
7309
|
};
|
|
7175
|
-
return /* @__PURE__ */
|
|
7176
|
-
|
|
7310
|
+
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(import_ui80.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlFormLabel, null, (0, import_i18n45.__)("Object position", "elementor"))), /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React97.createElement(
|
|
7311
|
+
import_ui80.Select,
|
|
7177
7312
|
{
|
|
7178
7313
|
size: "tiny",
|
|
7179
7314
|
displayEmpty: true,
|
|
@@ -7183,29 +7318,29 @@ var PositionControl = () => {
|
|
|
7183
7318
|
renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
|
|
7184
7319
|
fullWidth: true
|
|
7185
7320
|
},
|
|
7186
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
7187
|
-
)))), isCustom && /* @__PURE__ */
|
|
7321
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React97.createElement(import_editor_ui13.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
7322
|
+
)))), isCustom && /* @__PURE__ */ React97.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React97.createElement(
|
|
7188
7323
|
SizeControl,
|
|
7189
7324
|
{
|
|
7190
|
-
startIcon: /* @__PURE__ */
|
|
7325
|
+
startIcon: /* @__PURE__ */ React97.createElement(import_icons29.LetterXIcon, { fontSize: "tiny" }),
|
|
7191
7326
|
min: -Number.MAX_SAFE_INTEGER
|
|
7192
7327
|
}
|
|
7193
|
-
))), /* @__PURE__ */
|
|
7328
|
+
))), /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React97.createElement(
|
|
7194
7329
|
SizeControl,
|
|
7195
7330
|
{
|
|
7196
|
-
startIcon: /* @__PURE__ */
|
|
7331
|
+
startIcon: /* @__PURE__ */ React97.createElement(import_icons29.LetterYIcon, { fontSize: "tiny" }),
|
|
7197
7332
|
min: -Number.MAX_SAFE_INTEGER
|
|
7198
7333
|
}
|
|
7199
7334
|
)))))));
|
|
7200
7335
|
};
|
|
7201
7336
|
|
|
7202
7337
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
7203
|
-
var
|
|
7204
|
-
var
|
|
7338
|
+
var React110 = __toESM(require("react"));
|
|
7339
|
+
var import_react64 = require("react");
|
|
7205
7340
|
var import_editor_props54 = require("@elementor/editor-props");
|
|
7206
|
-
var
|
|
7207
|
-
var
|
|
7208
|
-
var
|
|
7341
|
+
var import_icons36 = require("@elementor/icons");
|
|
7342
|
+
var import_ui93 = require("@elementor/ui");
|
|
7343
|
+
var import_i18n55 = require("@wordpress/i18n");
|
|
7209
7344
|
|
|
7210
7345
|
// src/controls/transform-control/initial-values.ts
|
|
7211
7346
|
var import_editor_props46 = require("@elementor/editor-props");
|
|
@@ -7254,24 +7389,24 @@ var initialSkewValue = import_editor_props46.skewTransformPropTypeUtil.create({
|
|
|
7254
7389
|
});
|
|
7255
7390
|
|
|
7256
7391
|
// src/controls/transform-control/transform-content.tsx
|
|
7257
|
-
var
|
|
7258
|
-
var
|
|
7259
|
-
var
|
|
7392
|
+
var React104 = __toESM(require("react"));
|
|
7393
|
+
var import_ui88 = require("@elementor/ui");
|
|
7394
|
+
var import_i18n50 = require("@wordpress/i18n");
|
|
7260
7395
|
|
|
7261
7396
|
// src/controls/transform-control/functions/move.tsx
|
|
7262
|
-
var
|
|
7263
|
-
var
|
|
7397
|
+
var React99 = __toESM(require("react"));
|
|
7398
|
+
var import_react57 = require("react");
|
|
7264
7399
|
var import_editor_props47 = require("@elementor/editor-props");
|
|
7265
|
-
var
|
|
7266
|
-
var
|
|
7267
|
-
var
|
|
7400
|
+
var import_icons30 = require("@elementor/icons");
|
|
7401
|
+
var import_ui82 = require("@elementor/ui");
|
|
7402
|
+
var import_i18n46 = require("@wordpress/i18n");
|
|
7268
7403
|
|
|
7269
7404
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
7270
|
-
var
|
|
7271
|
-
var
|
|
7405
|
+
var React98 = __toESM(require("react"));
|
|
7406
|
+
var import_ui81 = require("@elementor/ui");
|
|
7272
7407
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
7273
7408
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
7274
|
-
return /* @__PURE__ */
|
|
7409
|
+
return /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React98.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React98.createElement(
|
|
7275
7410
|
SizeControl,
|
|
7276
7411
|
{
|
|
7277
7412
|
anchorRef,
|
|
@@ -7287,28 +7422,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
|
|
|
7287
7422
|
// src/controls/transform-control/functions/move.tsx
|
|
7288
7423
|
var moveAxisControls = [
|
|
7289
7424
|
{
|
|
7290
|
-
label: (0,
|
|
7425
|
+
label: (0, import_i18n46.__)("Move X", "elementor"),
|
|
7291
7426
|
bind: "x",
|
|
7292
|
-
startIcon: /* @__PURE__ */
|
|
7427
|
+
startIcon: /* @__PURE__ */ React99.createElement(import_icons30.ArrowRightIcon, { fontSize: "tiny" }),
|
|
7293
7428
|
units: ["px", "%", "em", "rem", "vw"]
|
|
7294
7429
|
},
|
|
7295
7430
|
{
|
|
7296
|
-
label: (0,
|
|
7431
|
+
label: (0, import_i18n46.__)("Move Y", "elementor"),
|
|
7297
7432
|
bind: "y",
|
|
7298
|
-
startIcon: /* @__PURE__ */
|
|
7433
|
+
startIcon: /* @__PURE__ */ React99.createElement(import_icons30.ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
7299
7434
|
units: ["px", "%", "em", "rem", "vh"]
|
|
7300
7435
|
},
|
|
7301
7436
|
{
|
|
7302
|
-
label: (0,
|
|
7437
|
+
label: (0, import_i18n46.__)("Move Z", "elementor"),
|
|
7303
7438
|
bind: "z",
|
|
7304
|
-
startIcon: /* @__PURE__ */
|
|
7439
|
+
startIcon: /* @__PURE__ */ React99.createElement(import_icons30.ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
7305
7440
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
7306
7441
|
}
|
|
7307
7442
|
];
|
|
7308
7443
|
var Move = () => {
|
|
7309
7444
|
const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
|
|
7310
|
-
const rowRefs = [(0,
|
|
7311
|
-
return /* @__PURE__ */
|
|
7445
|
+
const rowRefs = [(0, import_react57.useRef)(null), (0, import_react57.useRef)(null), (0, import_react57.useRef)(null)];
|
|
7446
|
+
return /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(PropProvider, { ...context }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React99.createElement(
|
|
7312
7447
|
AxisRow,
|
|
7313
7448
|
{
|
|
7314
7449
|
key: control.bind,
|
|
@@ -7321,34 +7456,34 @@ var Move = () => {
|
|
|
7321
7456
|
};
|
|
7322
7457
|
|
|
7323
7458
|
// src/controls/transform-control/functions/rotate.tsx
|
|
7324
|
-
var
|
|
7325
|
-
var
|
|
7459
|
+
var React100 = __toESM(require("react"));
|
|
7460
|
+
var import_react58 = require("react");
|
|
7326
7461
|
var import_editor_props48 = require("@elementor/editor-props");
|
|
7327
|
-
var
|
|
7328
|
-
var
|
|
7329
|
-
var
|
|
7462
|
+
var import_icons31 = require("@elementor/icons");
|
|
7463
|
+
var import_ui83 = require("@elementor/ui");
|
|
7464
|
+
var import_i18n47 = require("@wordpress/i18n");
|
|
7330
7465
|
var rotateAxisControls = [
|
|
7331
7466
|
{
|
|
7332
|
-
label: (0,
|
|
7467
|
+
label: (0, import_i18n47.__)("Rotate X", "elementor"),
|
|
7333
7468
|
bind: "x",
|
|
7334
|
-
startIcon: /* @__PURE__ */
|
|
7469
|
+
startIcon: /* @__PURE__ */ React100.createElement(import_icons31.Arrow360Icon, { fontSize: "tiny" })
|
|
7335
7470
|
},
|
|
7336
7471
|
{
|
|
7337
|
-
label: (0,
|
|
7472
|
+
label: (0, import_i18n47.__)("Rotate Y", "elementor"),
|
|
7338
7473
|
bind: "y",
|
|
7339
|
-
startIcon: /* @__PURE__ */
|
|
7474
|
+
startIcon: /* @__PURE__ */ React100.createElement(import_icons31.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
7340
7475
|
},
|
|
7341
7476
|
{
|
|
7342
|
-
label: (0,
|
|
7477
|
+
label: (0, import_i18n47.__)("Rotate Z", "elementor"),
|
|
7343
7478
|
bind: "z",
|
|
7344
|
-
startIcon: /* @__PURE__ */
|
|
7479
|
+
startIcon: /* @__PURE__ */ React100.createElement(import_icons31.RotateClockwiseIcon, { fontSize: "tiny" })
|
|
7345
7480
|
}
|
|
7346
7481
|
];
|
|
7347
7482
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
7348
7483
|
var Rotate = () => {
|
|
7349
7484
|
const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
|
|
7350
|
-
const rowRefs = [(0,
|
|
7351
|
-
return /* @__PURE__ */
|
|
7485
|
+
const rowRefs = [(0, import_react58.useRef)(null), (0, import_react58.useRef)(null), (0, import_react58.useRef)(null)];
|
|
7486
|
+
return /* @__PURE__ */ React100.createElement(import_ui83.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React100.createElement(PropProvider, { ...context }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React100.createElement(
|
|
7352
7487
|
AxisRow,
|
|
7353
7488
|
{
|
|
7354
7489
|
key: control.bind,
|
|
@@ -7360,68 +7495,68 @@ var Rotate = () => {
|
|
|
7360
7495
|
};
|
|
7361
7496
|
|
|
7362
7497
|
// src/controls/transform-control/functions/scale.tsx
|
|
7363
|
-
var
|
|
7364
|
-
var
|
|
7498
|
+
var React102 = __toESM(require("react"));
|
|
7499
|
+
var import_react59 = require("react");
|
|
7365
7500
|
var import_editor_props49 = require("@elementor/editor-props");
|
|
7366
|
-
var
|
|
7367
|
-
var
|
|
7368
|
-
var
|
|
7501
|
+
var import_icons32 = require("@elementor/icons");
|
|
7502
|
+
var import_ui85 = require("@elementor/ui");
|
|
7503
|
+
var import_i18n48 = require("@wordpress/i18n");
|
|
7369
7504
|
|
|
7370
7505
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
7371
|
-
var
|
|
7372
|
-
var
|
|
7506
|
+
var React101 = __toESM(require("react"));
|
|
7507
|
+
var import_ui84 = require("@elementor/ui");
|
|
7373
7508
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
7374
|
-
return /* @__PURE__ */
|
|
7509
|
+
return /* @__PURE__ */ React101.createElement(import_ui84.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React101.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React101.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, null, label)), /* @__PURE__ */ React101.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React101.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
7375
7510
|
};
|
|
7376
7511
|
|
|
7377
7512
|
// src/controls/transform-control/functions/scale.tsx
|
|
7378
7513
|
var scaleAxisControls = [
|
|
7379
7514
|
{
|
|
7380
|
-
label: (0,
|
|
7515
|
+
label: (0, import_i18n48.__)("Scale X", "elementor"),
|
|
7381
7516
|
bind: "x",
|
|
7382
|
-
startIcon: /* @__PURE__ */
|
|
7517
|
+
startIcon: /* @__PURE__ */ React102.createElement(import_icons32.ArrowRightIcon, { fontSize: "tiny" })
|
|
7383
7518
|
},
|
|
7384
7519
|
{
|
|
7385
|
-
label: (0,
|
|
7520
|
+
label: (0, import_i18n48.__)("Scale Y", "elementor"),
|
|
7386
7521
|
bind: "y",
|
|
7387
|
-
startIcon: /* @__PURE__ */
|
|
7522
|
+
startIcon: /* @__PURE__ */ React102.createElement(import_icons32.ArrowDownSmallIcon, { fontSize: "tiny" })
|
|
7388
7523
|
},
|
|
7389
7524
|
{
|
|
7390
|
-
label: (0,
|
|
7525
|
+
label: (0, import_i18n48.__)("Scale Z", "elementor"),
|
|
7391
7526
|
bind: "z",
|
|
7392
|
-
startIcon: /* @__PURE__ */
|
|
7527
|
+
startIcon: /* @__PURE__ */ React102.createElement(import_icons32.ArrowDownLeftIcon, { fontSize: "tiny" })
|
|
7393
7528
|
}
|
|
7394
7529
|
];
|
|
7395
7530
|
var Scale = () => {
|
|
7396
7531
|
const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
|
|
7397
|
-
const rowRefs = [(0,
|
|
7398
|
-
return /* @__PURE__ */
|
|
7532
|
+
const rowRefs = [(0, import_react59.useRef)(null), (0, import_react59.useRef)(null), (0, import_react59.useRef)(null)];
|
|
7533
|
+
return /* @__PURE__ */ React102.createElement(import_ui85.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
|
|
7399
7534
|
};
|
|
7400
7535
|
|
|
7401
7536
|
// src/controls/transform-control/functions/skew.tsx
|
|
7402
|
-
var
|
|
7403
|
-
var
|
|
7537
|
+
var React103 = __toESM(require("react"));
|
|
7538
|
+
var import_react60 = require("react");
|
|
7404
7539
|
var import_editor_props50 = require("@elementor/editor-props");
|
|
7405
|
-
var
|
|
7406
|
-
var
|
|
7407
|
-
var
|
|
7540
|
+
var import_icons33 = require("@elementor/icons");
|
|
7541
|
+
var import_ui86 = require("@elementor/ui");
|
|
7542
|
+
var import_i18n49 = require("@wordpress/i18n");
|
|
7408
7543
|
var skewAxisControls = [
|
|
7409
7544
|
{
|
|
7410
|
-
label: (0,
|
|
7545
|
+
label: (0, import_i18n49.__)("Skew X", "elementor"),
|
|
7411
7546
|
bind: "x",
|
|
7412
|
-
startIcon: /* @__PURE__ */
|
|
7547
|
+
startIcon: /* @__PURE__ */ React103.createElement(import_icons33.ArrowRightIcon, { fontSize: "tiny" })
|
|
7413
7548
|
},
|
|
7414
7549
|
{
|
|
7415
|
-
label: (0,
|
|
7550
|
+
label: (0, import_i18n49.__)("Skew Y", "elementor"),
|
|
7416
7551
|
bind: "y",
|
|
7417
|
-
startIcon: /* @__PURE__ */
|
|
7552
|
+
startIcon: /* @__PURE__ */ React103.createElement(import_icons33.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
7418
7553
|
}
|
|
7419
7554
|
];
|
|
7420
7555
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
7421
7556
|
var Skew = () => {
|
|
7422
7557
|
const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
|
|
7423
|
-
const rowRefs = [(0,
|
|
7424
|
-
return /* @__PURE__ */
|
|
7558
|
+
const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
|
|
7559
|
+
return /* @__PURE__ */ React103.createElement(import_ui86.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React103.createElement(PropProvider, { ...context }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React103.createElement(
|
|
7425
7560
|
AxisRow,
|
|
7426
7561
|
{
|
|
7427
7562
|
key: control.bind,
|
|
@@ -7433,9 +7568,9 @@ var Skew = () => {
|
|
|
7433
7568
|
};
|
|
7434
7569
|
|
|
7435
7570
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
7436
|
-
var
|
|
7571
|
+
var import_react61 = require("react");
|
|
7437
7572
|
var import_editor_props51 = require("@elementor/editor-props");
|
|
7438
|
-
var
|
|
7573
|
+
var import_ui87 = require("@elementor/ui");
|
|
7439
7574
|
var useTransformTabsHistory = ({
|
|
7440
7575
|
move: initialMove,
|
|
7441
7576
|
scale: initialScale,
|
|
@@ -7459,8 +7594,8 @@ var useTransformTabsHistory = ({
|
|
|
7459
7594
|
return TransformFunctionKeys.move;
|
|
7460
7595
|
}
|
|
7461
7596
|
};
|
|
7462
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
7463
|
-
const valuesHistory = (0,
|
|
7597
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui87.useTabs)(getCurrentTransformType());
|
|
7598
|
+
const valuesHistory = (0, import_react61.useRef)({
|
|
7464
7599
|
move: initialMove,
|
|
7465
7600
|
scale: initialScale,
|
|
7466
7601
|
rotate: initialRotate,
|
|
@@ -7521,8 +7656,8 @@ var TransformContent = () => {
|
|
|
7521
7656
|
rotate: initialRotateValue.value,
|
|
7522
7657
|
skew: initialSkewValue.value
|
|
7523
7658
|
});
|
|
7524
|
-
return /* @__PURE__ */
|
|
7525
|
-
|
|
7659
|
+
return /* @__PURE__ */ React104.createElement(PopoverContent, null, /* @__PURE__ */ React104.createElement(import_ui88.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React104.createElement(import_ui88.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React104.createElement(
|
|
7660
|
+
import_ui88.Tabs,
|
|
7526
7661
|
{
|
|
7527
7662
|
size: "small",
|
|
7528
7663
|
variant: "fullWidth",
|
|
@@ -7532,37 +7667,37 @@ var TransformContent = () => {
|
|
|
7532
7667
|
}
|
|
7533
7668
|
},
|
|
7534
7669
|
...getTabsProps(),
|
|
7535
|
-
"aria-label": (0,
|
|
7670
|
+
"aria-label": (0, import_i18n50.__)("Transform", "elementor")
|
|
7536
7671
|
},
|
|
7537
|
-
/* @__PURE__ */
|
|
7538
|
-
/* @__PURE__ */
|
|
7539
|
-
/* @__PURE__ */
|
|
7540
|
-
/* @__PURE__ */
|
|
7541
|
-
)), /* @__PURE__ */
|
|
7672
|
+
/* @__PURE__ */ React104.createElement(import_ui88.Tab, { label: (0, import_i18n50.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
7673
|
+
/* @__PURE__ */ React104.createElement(import_ui88.Tab, { label: (0, import_i18n50.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
7674
|
+
/* @__PURE__ */ React104.createElement(import_ui88.Tab, { label: (0, import_i18n50.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
7675
|
+
/* @__PURE__ */ React104.createElement(import_ui88.Tab, { label: (0, import_i18n50.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
7676
|
+
)), /* @__PURE__ */ React104.createElement(import_ui88.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React104.createElement(Move, null)), /* @__PURE__ */ React104.createElement(import_ui88.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React104.createElement(Scale, null)), /* @__PURE__ */ React104.createElement(import_ui88.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React104.createElement(Rotate, null)), /* @__PURE__ */ React104.createElement(import_ui88.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React104.createElement(Skew, null))));
|
|
7542
7677
|
};
|
|
7543
7678
|
|
|
7544
7679
|
// src/controls/transform-control/transform-icon.tsx
|
|
7545
|
-
var
|
|
7546
|
-
var
|
|
7680
|
+
var React105 = __toESM(require("react"));
|
|
7681
|
+
var import_icons34 = require("@elementor/icons");
|
|
7547
7682
|
var TransformIcon = ({ value }) => {
|
|
7548
7683
|
switch (value.$$type) {
|
|
7549
7684
|
case TransformFunctionKeys.move:
|
|
7550
|
-
return /* @__PURE__ */
|
|
7685
|
+
return /* @__PURE__ */ React105.createElement(import_icons34.ArrowsMaximizeIcon, { fontSize: "tiny" });
|
|
7551
7686
|
case TransformFunctionKeys.scale:
|
|
7552
|
-
return /* @__PURE__ */
|
|
7687
|
+
return /* @__PURE__ */ React105.createElement(import_icons34.ArrowAutofitHeightIcon, { fontSize: "tiny" });
|
|
7553
7688
|
case TransformFunctionKeys.rotate:
|
|
7554
|
-
return /* @__PURE__ */
|
|
7689
|
+
return /* @__PURE__ */ React105.createElement(import_icons34.RotateClockwise2Icon, { fontSize: "tiny" });
|
|
7555
7690
|
case TransformFunctionKeys.skew:
|
|
7556
|
-
return /* @__PURE__ */
|
|
7691
|
+
return /* @__PURE__ */ React105.createElement(import_icons34.SkewXIcon, { fontSize: "tiny" });
|
|
7557
7692
|
default:
|
|
7558
7693
|
return null;
|
|
7559
7694
|
}
|
|
7560
7695
|
};
|
|
7561
7696
|
|
|
7562
7697
|
// src/controls/transform-control/transform-label.tsx
|
|
7563
|
-
var
|
|
7564
|
-
var
|
|
7565
|
-
var
|
|
7698
|
+
var React106 = __toESM(require("react"));
|
|
7699
|
+
var import_ui89 = require("@elementor/ui");
|
|
7700
|
+
var import_i18n51 = require("@wordpress/i18n");
|
|
7566
7701
|
var orderedAxis = ["x", "y", "z"];
|
|
7567
7702
|
var formatLabel = (value, functionType) => {
|
|
7568
7703
|
return orderedAxis.map((axisKey) => {
|
|
@@ -7580,98 +7715,98 @@ var TransformLabel = (props) => {
|
|
|
7580
7715
|
const { $$type, value } = props.value;
|
|
7581
7716
|
switch ($$type) {
|
|
7582
7717
|
case TransformFunctionKeys.move:
|
|
7583
|
-
return /* @__PURE__ */
|
|
7718
|
+
return /* @__PURE__ */ React106.createElement(Label2, { label: (0, import_i18n51.__)("Move", "elementor"), value: formatLabel(value, "move") });
|
|
7584
7719
|
case TransformFunctionKeys.scale:
|
|
7585
|
-
return /* @__PURE__ */
|
|
7720
|
+
return /* @__PURE__ */ React106.createElement(Label2, { label: (0, import_i18n51.__)("Scale", "elementor"), value: formatLabel(value, "scale") });
|
|
7586
7721
|
case TransformFunctionKeys.rotate:
|
|
7587
|
-
return /* @__PURE__ */
|
|
7722
|
+
return /* @__PURE__ */ React106.createElement(Label2, { label: (0, import_i18n51.__)("Rotate", "elementor"), value: formatLabel(value, "rotate") });
|
|
7588
7723
|
case TransformFunctionKeys.skew:
|
|
7589
|
-
return /* @__PURE__ */
|
|
7724
|
+
return /* @__PURE__ */ React106.createElement(Label2, { label: (0, import_i18n51.__)("Skew", "elementor"), value: formatLabel(value, "skew") });
|
|
7590
7725
|
default:
|
|
7591
7726
|
return "";
|
|
7592
7727
|
}
|
|
7593
7728
|
};
|
|
7594
7729
|
var Label2 = ({ label, value }) => {
|
|
7595
|
-
return /* @__PURE__ */
|
|
7730
|
+
return /* @__PURE__ */ React106.createElement(import_ui89.Box, { component: "span" }, label, ": ", value);
|
|
7596
7731
|
};
|
|
7597
7732
|
|
|
7598
7733
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
7599
|
-
var
|
|
7734
|
+
var React109 = __toESM(require("react"));
|
|
7600
7735
|
var import_editor_ui14 = require("@elementor/editor-ui");
|
|
7601
|
-
var
|
|
7602
|
-
var
|
|
7603
|
-
var
|
|
7736
|
+
var import_icons35 = require("@elementor/icons");
|
|
7737
|
+
var import_ui92 = require("@elementor/ui");
|
|
7738
|
+
var import_i18n54 = require("@wordpress/i18n");
|
|
7604
7739
|
|
|
7605
7740
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
7606
|
-
var
|
|
7607
|
-
var
|
|
7741
|
+
var React107 = __toESM(require("react"));
|
|
7742
|
+
var import_react62 = require("react");
|
|
7608
7743
|
var import_editor_props52 = require("@elementor/editor-props");
|
|
7609
|
-
var
|
|
7610
|
-
var
|
|
7744
|
+
var import_ui90 = require("@elementor/ui");
|
|
7745
|
+
var import_i18n52 = require("@wordpress/i18n");
|
|
7611
7746
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
7612
7747
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
7613
|
-
label: (0,
|
|
7748
|
+
label: (0, import_i18n52.__)("Perspective", "elementor"),
|
|
7614
7749
|
bind: "perspective",
|
|
7615
7750
|
units: ["px", "em", "rem", "vw", "vh"]
|
|
7616
7751
|
};
|
|
7617
7752
|
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
7618
7753
|
{
|
|
7619
|
-
label: (0,
|
|
7754
|
+
label: (0, import_i18n52.__)("Origin X", "elementor"),
|
|
7620
7755
|
bind: "x",
|
|
7621
7756
|
units: ORIGIN_UNITS
|
|
7622
7757
|
},
|
|
7623
7758
|
{
|
|
7624
|
-
label: (0,
|
|
7759
|
+
label: (0, import_i18n52.__)("Origin Y", "elementor"),
|
|
7625
7760
|
bind: "y",
|
|
7626
7761
|
units: ORIGIN_UNITS
|
|
7627
7762
|
}
|
|
7628
7763
|
];
|
|
7629
7764
|
var ChildrenPerspectiveControl = () => {
|
|
7630
|
-
return /* @__PURE__ */
|
|
7765
|
+
return /* @__PURE__ */ React107.createElement(import_ui90.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React107.createElement(ControlFormLabel, null, (0, import_i18n52.__)("Children perspective", "elementor")), /* @__PURE__ */ React107.createElement(PerspectiveControl, null), /* @__PURE__ */ React107.createElement(PerspectiveOriginControl, null));
|
|
7631
7766
|
};
|
|
7632
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
7633
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
7767
|
+
var PerspectiveControl = () => /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React107.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
7768
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React107.createElement(PerspectiveOriginControlProvider, null));
|
|
7634
7769
|
var PerspectiveOriginControlProvider = () => {
|
|
7635
7770
|
const context = useBoundProp(import_editor_props52.perspectiveOriginPropTypeUtil);
|
|
7636
|
-
return /* @__PURE__ */
|
|
7771
|
+
return /* @__PURE__ */ React107.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React107.createElement(ControlFields, { control }))));
|
|
7637
7772
|
};
|
|
7638
7773
|
var ControlFields = ({ control }) => {
|
|
7639
|
-
const rowRef = (0,
|
|
7640
|
-
return /* @__PURE__ */
|
|
7774
|
+
const rowRef = (0, import_react62.useRef)(null);
|
|
7775
|
+
return /* @__PURE__ */ React107.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React107.createElement(import_ui90.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React107.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React107.createElement(import_ui90.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React107.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
7641
7776
|
};
|
|
7642
7777
|
|
|
7643
7778
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
7644
|
-
var
|
|
7645
|
-
var
|
|
7779
|
+
var React108 = __toESM(require("react"));
|
|
7780
|
+
var import_react63 = require("react");
|
|
7646
7781
|
var import_editor_props53 = require("@elementor/editor-props");
|
|
7647
|
-
var
|
|
7648
|
-
var
|
|
7782
|
+
var import_ui91 = require("@elementor/ui");
|
|
7783
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
7649
7784
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
7650
7785
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
7651
7786
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
7652
7787
|
{
|
|
7653
|
-
label: (0,
|
|
7788
|
+
label: (0, import_i18n53.__)("Origin X", "elementor"),
|
|
7654
7789
|
bind: "x",
|
|
7655
7790
|
units: TRANSFORM_ORIGIN_UNITS
|
|
7656
7791
|
},
|
|
7657
7792
|
{
|
|
7658
|
-
label: (0,
|
|
7793
|
+
label: (0, import_i18n53.__)("Origin Y", "elementor"),
|
|
7659
7794
|
bind: "y",
|
|
7660
7795
|
units: TRANSFORM_ORIGIN_UNITS
|
|
7661
7796
|
},
|
|
7662
7797
|
{
|
|
7663
|
-
label: (0,
|
|
7798
|
+
label: (0, import_i18n53.__)("Origin Z", "elementor"),
|
|
7664
7799
|
bind: "z",
|
|
7665
7800
|
units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
|
|
7666
7801
|
}
|
|
7667
7802
|
];
|
|
7668
7803
|
var TransformOriginControl = () => {
|
|
7669
|
-
return /* @__PURE__ */
|
|
7804
|
+
return /* @__PURE__ */ React108.createElement(import_ui91.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React108.createElement(ControlFormLabel, null, (0, import_i18n53.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React108.createElement(ControlFields2, { control, key: control.bind })));
|
|
7670
7805
|
};
|
|
7671
7806
|
var ControlFields2 = ({ control }) => {
|
|
7672
7807
|
const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
|
|
7673
|
-
const rowRef = (0,
|
|
7674
|
-
return /* @__PURE__ */
|
|
7808
|
+
const rowRef = (0, import_react63.useRef)(null);
|
|
7809
|
+
return /* @__PURE__ */ React108.createElement(PropProvider, { ...context }, /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React108.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React108.createElement(import_ui91.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React108.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React108.createElement(import_ui91.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React108.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
|
|
7675
7810
|
};
|
|
7676
7811
|
|
|
7677
7812
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
@@ -7681,12 +7816,12 @@ var TransformSettingsControl = ({
|
|
|
7681
7816
|
anchorRef,
|
|
7682
7817
|
showChildrenPerspective
|
|
7683
7818
|
}) => {
|
|
7684
|
-
const popupProps = (0,
|
|
7819
|
+
const popupProps = (0, import_ui92.bindPopover)({
|
|
7685
7820
|
...popupState,
|
|
7686
7821
|
anchorEl: anchorRef.current ?? void 0
|
|
7687
7822
|
});
|
|
7688
|
-
return /* @__PURE__ */
|
|
7689
|
-
|
|
7823
|
+
return /* @__PURE__ */ React109.createElement(
|
|
7824
|
+
import_ui92.Popover,
|
|
7690
7825
|
{
|
|
7691
7826
|
disablePortal: true,
|
|
7692
7827
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
@@ -7700,16 +7835,16 @@ var TransformSettingsControl = ({
|
|
|
7700
7835
|
},
|
|
7701
7836
|
...popupProps
|
|
7702
7837
|
},
|
|
7703
|
-
/* @__PURE__ */
|
|
7838
|
+
/* @__PURE__ */ React109.createElement(
|
|
7704
7839
|
import_editor_ui14.PopoverHeader,
|
|
7705
7840
|
{
|
|
7706
|
-
title: (0,
|
|
7841
|
+
title: (0, import_i18n54.__)("Transform settings", "elementor"),
|
|
7707
7842
|
onClose: popupState.close,
|
|
7708
|
-
icon: /* @__PURE__ */
|
|
7843
|
+
icon: /* @__PURE__ */ React109.createElement(import_icons35.AdjustmentsIcon, { fontSize: SIZE10 })
|
|
7709
7844
|
}
|
|
7710
7845
|
),
|
|
7711
|
-
/* @__PURE__ */
|
|
7712
|
-
/* @__PURE__ */
|
|
7846
|
+
/* @__PURE__ */ React109.createElement(import_ui92.Divider, null),
|
|
7847
|
+
/* @__PURE__ */ React109.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React109.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement(import_ui92.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React109.createElement(import_ui92.Divider, null)), /* @__PURE__ */ React109.createElement(ChildrenPerspectiveControl, null)))
|
|
7713
7848
|
);
|
|
7714
7849
|
};
|
|
7715
7850
|
|
|
@@ -7718,27 +7853,27 @@ var SIZE11 = "tiny";
|
|
|
7718
7853
|
var TransformRepeaterControl = createControl(
|
|
7719
7854
|
({ showChildrenPerspective }) => {
|
|
7720
7855
|
const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
|
|
7721
|
-
const headerRef = (0,
|
|
7722
|
-
const popupState = (0,
|
|
7723
|
-
return /* @__PURE__ */
|
|
7856
|
+
const headerRef = (0, import_react64.useRef)(null);
|
|
7857
|
+
const popupState = (0, import_ui93.usePopupState)({ variant: "popover" });
|
|
7858
|
+
return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(
|
|
7724
7859
|
TransformSettingsControl,
|
|
7725
7860
|
{
|
|
7726
7861
|
popupState,
|
|
7727
7862
|
anchorRef: headerRef,
|
|
7728
7863
|
showChildrenPerspective
|
|
7729
7864
|
}
|
|
7730
|
-
), /* @__PURE__ */
|
|
7865
|
+
), /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React110.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
7731
7866
|
}
|
|
7732
7867
|
);
|
|
7733
|
-
var ToolTip = /* @__PURE__ */
|
|
7734
|
-
|
|
7868
|
+
var ToolTip = /* @__PURE__ */ React110.createElement(
|
|
7869
|
+
import_ui93.Box,
|
|
7735
7870
|
{
|
|
7736
7871
|
component: "span",
|
|
7737
7872
|
"aria-label": void 0,
|
|
7738
7873
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
7739
7874
|
},
|
|
7740
|
-
/* @__PURE__ */
|
|
7741
|
-
/* @__PURE__ */
|
|
7875
|
+
/* @__PURE__ */ React110.createElement(import_icons36.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
|
|
7876
|
+
/* @__PURE__ */ React110.createElement(import_ui93.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n55.__)("You can use each kind of transform only once per element.", "elementor"))
|
|
7742
7877
|
);
|
|
7743
7878
|
var Repeater2 = ({
|
|
7744
7879
|
headerRef,
|
|
@@ -7752,21 +7887,21 @@ var Repeater2 = ({
|
|
|
7752
7887
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
7753
7888
|
};
|
|
7754
7889
|
const shouldDisableAddItem = !getInitialValue2();
|
|
7755
|
-
return /* @__PURE__ */
|
|
7890
|
+
return /* @__PURE__ */ React110.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React110.createElement(
|
|
7756
7891
|
ControlRepeater,
|
|
7757
7892
|
{
|
|
7758
7893
|
initial: getInitialValue2() ?? initialTransformValue,
|
|
7759
7894
|
propTypeUtil: import_editor_props54.transformFunctionsPropTypeUtil
|
|
7760
7895
|
},
|
|
7761
|
-
/* @__PURE__ */
|
|
7896
|
+
/* @__PURE__ */ React110.createElement(
|
|
7762
7897
|
RepeaterHeader,
|
|
7763
7898
|
{
|
|
7764
|
-
label: (0,
|
|
7765
|
-
adornment: () => /* @__PURE__ */
|
|
7899
|
+
label: (0, import_i18n55.__)("Transform", "elementor"),
|
|
7900
|
+
adornment: () => /* @__PURE__ */ React110.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
7766
7901
|
ref: headerRef
|
|
7767
7902
|
},
|
|
7768
|
-
/* @__PURE__ */
|
|
7769
|
-
/* @__PURE__ */
|
|
7903
|
+
/* @__PURE__ */ React110.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
7904
|
+
/* @__PURE__ */ React110.createElement(
|
|
7770
7905
|
TooltipAddItemAction,
|
|
7771
7906
|
{
|
|
7772
7907
|
disabled: shouldDisableAddItem,
|
|
@@ -7776,15 +7911,15 @@ var Repeater2 = ({
|
|
|
7776
7911
|
}
|
|
7777
7912
|
)
|
|
7778
7913
|
),
|
|
7779
|
-
/* @__PURE__ */
|
|
7914
|
+
/* @__PURE__ */ React110.createElement(ItemsContainer, null, /* @__PURE__ */ React110.createElement(
|
|
7780
7915
|
Item,
|
|
7781
7916
|
{
|
|
7782
7917
|
Icon: TransformIcon,
|
|
7783
7918
|
Label: TransformLabel,
|
|
7784
|
-
actions: /* @__PURE__ */
|
|
7919
|
+
actions: /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement(DisableItemAction, null), /* @__PURE__ */ React110.createElement(RemoveItemAction, null))
|
|
7785
7920
|
}
|
|
7786
7921
|
)),
|
|
7787
|
-
/* @__PURE__ */
|
|
7922
|
+
/* @__PURE__ */ React110.createElement(EditItemPopover, null, /* @__PURE__ */ React110.createElement(TransformContent, null))
|
|
7788
7923
|
));
|
|
7789
7924
|
};
|
|
7790
7925
|
var TransformBasePopoverTrigger = ({
|
|
@@ -7792,30 +7927,30 @@ var TransformBasePopoverTrigger = ({
|
|
|
7792
7927
|
repeaterBindKey
|
|
7793
7928
|
}) => {
|
|
7794
7929
|
const { bind } = useBoundProp();
|
|
7795
|
-
const titleLabel = (0,
|
|
7796
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
7930
|
+
const titleLabel = (0, import_i18n55.__)("Transform settings", "elementor");
|
|
7931
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React110.createElement(import_ui93.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React110.createElement(import_ui93.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui93.bindTrigger)(popupState) }, /* @__PURE__ */ React110.createElement(import_icons36.AdjustmentsIcon, { fontSize: SIZE11 })));
|
|
7797
7932
|
};
|
|
7798
7933
|
|
|
7799
7934
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
7800
|
-
var
|
|
7801
|
-
var
|
|
7935
|
+
var React113 = __toESM(require("react"));
|
|
7936
|
+
var import_react67 = require("react");
|
|
7802
7937
|
var import_editor_props57 = require("@elementor/editor-props");
|
|
7803
|
-
var
|
|
7804
|
-
var
|
|
7938
|
+
var import_icons38 = require("@elementor/icons");
|
|
7939
|
+
var import_ui96 = require("@elementor/ui");
|
|
7805
7940
|
var import_utils8 = require("@elementor/utils");
|
|
7806
|
-
var
|
|
7941
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
7807
7942
|
|
|
7808
7943
|
// src/controls/selection-size-control.tsx
|
|
7809
|
-
var
|
|
7810
|
-
var
|
|
7944
|
+
var React111 = __toESM(require("react"));
|
|
7945
|
+
var import_react65 = require("react");
|
|
7811
7946
|
var import_editor_props55 = require("@elementor/editor-props");
|
|
7812
|
-
var
|
|
7947
|
+
var import_ui94 = require("@elementor/ui");
|
|
7813
7948
|
var SelectionSizeControl = createControl(
|
|
7814
7949
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
7815
7950
|
const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
|
|
7816
|
-
const rowRef = (0,
|
|
7951
|
+
const rowRef = (0, import_react65.useRef)(null);
|
|
7817
7952
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
7818
|
-
const currentSizeConfig = (0,
|
|
7953
|
+
const currentSizeConfig = (0, import_react65.useMemo)(() => {
|
|
7819
7954
|
switch (value.selection.$$type) {
|
|
7820
7955
|
case "key-value":
|
|
7821
7956
|
return sizeConfigMap[value?.selection?.value.value.value || ""];
|
|
@@ -7826,7 +7961,7 @@ var SelectionSizeControl = createControl(
|
|
|
7826
7961
|
}
|
|
7827
7962
|
}, [value, sizeConfigMap]);
|
|
7828
7963
|
const SelectionComponent = selectionConfig.component;
|
|
7829
|
-
return /* @__PURE__ */
|
|
7964
|
+
return /* @__PURE__ */ React111.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React111.createElement(import_ui94.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React111.createElement(import_ui94.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React111.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React111.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React111.createElement(React111.Fragment, null, /* @__PURE__ */ React111.createElement(import_ui94.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React111.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React111.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React111.createElement(
|
|
7830
7965
|
SizeControl,
|
|
7831
7966
|
{
|
|
7832
7967
|
anchorRef: rowRef,
|
|
@@ -7841,12 +7976,12 @@ var SelectionSizeControl = createControl(
|
|
|
7841
7976
|
|
|
7842
7977
|
// src/controls/transition-control/data.ts
|
|
7843
7978
|
var import_utils7 = require("@elementor/utils");
|
|
7844
|
-
var
|
|
7979
|
+
var import_i18n56 = require("@wordpress/i18n");
|
|
7845
7980
|
var initialTransitionValue = {
|
|
7846
7981
|
selection: {
|
|
7847
7982
|
$$type: "key-value",
|
|
7848
7983
|
value: {
|
|
7849
|
-
key: { value: (0,
|
|
7984
|
+
key: { value: (0, import_i18n56.__)("All properties", "elementor"), $$type: "string" },
|
|
7850
7985
|
value: { value: "all", $$type: "string" }
|
|
7851
7986
|
}
|
|
7852
7987
|
},
|
|
@@ -7870,128 +8005,128 @@ var createTransitionPropertiesList = () => {
|
|
|
7870
8005
|
const isSiteRtl = getIsSiteRtl();
|
|
7871
8006
|
const baseProperties = [
|
|
7872
8007
|
{
|
|
7873
|
-
label: (0,
|
|
8008
|
+
label: (0, import_i18n56.__)("Default", "elementor"),
|
|
7874
8009
|
type: "category",
|
|
7875
|
-
properties: [{ label: (0,
|
|
8010
|
+
properties: [{ label: (0, import_i18n56.__)("All properties", "elementor"), value: "all" }]
|
|
7876
8011
|
},
|
|
7877
8012
|
{
|
|
7878
|
-
label: (0,
|
|
8013
|
+
label: (0, import_i18n56.__)("Margin", "elementor"),
|
|
7879
8014
|
type: "category",
|
|
7880
8015
|
properties: [
|
|
7881
|
-
{ label: (0,
|
|
7882
|
-
{ label: (0,
|
|
8016
|
+
{ label: (0, import_i18n56.__)("Margin (all)", "elementor"), value: "margin", isDisabled: true },
|
|
8017
|
+
{ label: (0, import_i18n56.__)("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
|
|
7883
8018
|
{
|
|
7884
|
-
label: isSiteRtl ? (0,
|
|
8019
|
+
label: isSiteRtl ? (0, import_i18n56.__)("Margin right", "elementor") : (0, import_i18n56.__)("Margin left", "elementor"),
|
|
7885
8020
|
value: "margin-inline-start",
|
|
7886
8021
|
isDisabled: true
|
|
7887
8022
|
},
|
|
7888
8023
|
{
|
|
7889
|
-
label: isSiteRtl ? (0,
|
|
8024
|
+
label: isSiteRtl ? (0, import_i18n56.__)("Margin left", "elementor") : (0, import_i18n56.__)("Margin right", "elementor"),
|
|
7890
8025
|
value: "margin-inline-end",
|
|
7891
8026
|
isDisabled: true
|
|
7892
8027
|
},
|
|
7893
|
-
{ label: (0,
|
|
8028
|
+
{ label: (0, import_i18n56.__)("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
|
|
7894
8029
|
]
|
|
7895
8030
|
},
|
|
7896
8031
|
{
|
|
7897
|
-
label: (0,
|
|
8032
|
+
label: (0, import_i18n56.__)("Padding", "elementor"),
|
|
7898
8033
|
type: "category",
|
|
7899
8034
|
properties: [
|
|
7900
|
-
{ label: (0,
|
|
7901
|
-
{ label: (0,
|
|
8035
|
+
{ label: (0, import_i18n56.__)("Padding (all)", "elementor"), value: "padding", isDisabled: true },
|
|
8036
|
+
{ label: (0, import_i18n56.__)("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
|
|
7902
8037
|
{
|
|
7903
|
-
label: isSiteRtl ? (0,
|
|
8038
|
+
label: isSiteRtl ? (0, import_i18n56.__)("Padding right", "elementor") : (0, import_i18n56.__)("Padding left", "elementor"),
|
|
7904
8039
|
value: "padding-inline-start",
|
|
7905
8040
|
isDisabled: true
|
|
7906
8041
|
},
|
|
7907
8042
|
{
|
|
7908
|
-
label: isSiteRtl ? (0,
|
|
8043
|
+
label: isSiteRtl ? (0, import_i18n56.__)("Padding left", "elementor") : (0, import_i18n56.__)("Padding right", "elementor"),
|
|
7909
8044
|
value: "padding-inline-end",
|
|
7910
8045
|
isDisabled: true
|
|
7911
8046
|
},
|
|
7912
|
-
{ label: (0,
|
|
8047
|
+
{ label: (0, import_i18n56.__)("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
|
|
7913
8048
|
]
|
|
7914
8049
|
},
|
|
7915
8050
|
{
|
|
7916
|
-
label: (0,
|
|
8051
|
+
label: (0, import_i18n56.__)("Flex", "elementor"),
|
|
7917
8052
|
type: "category",
|
|
7918
8053
|
properties: [
|
|
7919
|
-
{ label: (0,
|
|
7920
|
-
{ label: (0,
|
|
7921
|
-
{ label: (0,
|
|
7922
|
-
{ label: (0,
|
|
8054
|
+
{ label: (0, import_i18n56.__)("Flex (all)", "elementor"), value: "flex", isDisabled: true },
|
|
8055
|
+
{ label: (0, import_i18n56.__)("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
|
|
8056
|
+
{ label: (0, import_i18n56.__)("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
|
|
8057
|
+
{ label: (0, import_i18n56.__)("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
|
|
7923
8058
|
]
|
|
7924
8059
|
},
|
|
7925
8060
|
{
|
|
7926
|
-
label: (0,
|
|
8061
|
+
label: (0, import_i18n56.__)("Size", "elementor"),
|
|
7927
8062
|
type: "category",
|
|
7928
8063
|
properties: [
|
|
7929
|
-
{ label: (0,
|
|
7930
|
-
{ label: (0,
|
|
7931
|
-
{ label: (0,
|
|
7932
|
-
{ label: (0,
|
|
7933
|
-
{ label: (0,
|
|
7934
|
-
{ label: (0,
|
|
8064
|
+
{ label: (0, import_i18n56.__)("Width", "elementor"), value: "width", isDisabled: true },
|
|
8065
|
+
{ label: (0, import_i18n56.__)("Height", "elementor"), value: "height", isDisabled: true },
|
|
8066
|
+
{ label: (0, import_i18n56.__)("Max height", "elementor"), value: "max-height", isDisabled: true },
|
|
8067
|
+
{ label: (0, import_i18n56.__)("Max width", "elementor"), value: "max-width", isDisabled: true },
|
|
8068
|
+
{ label: (0, import_i18n56.__)("Min height", "elementor"), value: "min-height", isDisabled: true },
|
|
8069
|
+
{ label: (0, import_i18n56.__)("Min width", "elementor"), value: "min-width", isDisabled: true }
|
|
7935
8070
|
]
|
|
7936
8071
|
},
|
|
7937
8072
|
{
|
|
7938
|
-
label: (0,
|
|
8073
|
+
label: (0, import_i18n56.__)("Position", "elementor"),
|
|
7939
8074
|
type: "category",
|
|
7940
8075
|
properties: [
|
|
7941
|
-
{ label: (0,
|
|
8076
|
+
{ label: (0, import_i18n56.__)("Top", "elementor"), value: "inset-block-start", isDisabled: true },
|
|
7942
8077
|
{
|
|
7943
|
-
label: isSiteRtl ? (0,
|
|
8078
|
+
label: isSiteRtl ? (0, import_i18n56.__)("Right", "elementor") : (0, import_i18n56.__)("Left", "elementor"),
|
|
7944
8079
|
value: "inset-inline-start",
|
|
7945
8080
|
isDisabled: true
|
|
7946
8081
|
},
|
|
7947
8082
|
{
|
|
7948
|
-
label: isSiteRtl ? (0,
|
|
8083
|
+
label: isSiteRtl ? (0, import_i18n56.__)("Left", "elementor") : (0, import_i18n56.__)("Right", "elementor"),
|
|
7949
8084
|
value: "inset-inline-end",
|
|
7950
8085
|
isDisabled: true
|
|
7951
8086
|
},
|
|
7952
|
-
{ label: (0,
|
|
7953
|
-
{ label: (0,
|
|
8087
|
+
{ label: (0, import_i18n56.__)("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
|
|
8088
|
+
{ label: (0, import_i18n56.__)("Z-index", "elementor"), value: "z-index", isDisabled: true }
|
|
7954
8089
|
]
|
|
7955
8090
|
},
|
|
7956
8091
|
{
|
|
7957
|
-
label: (0,
|
|
8092
|
+
label: (0, import_i18n56.__)("Typography", "elementor"),
|
|
7958
8093
|
type: "category",
|
|
7959
8094
|
properties: [
|
|
7960
|
-
{ label: (0,
|
|
7961
|
-
{ label: (0,
|
|
7962
|
-
{ label: (0,
|
|
7963
|
-
{ label: (0,
|
|
7964
|
-
{ label: (0,
|
|
7965
|
-
{ label: (0,
|
|
7966
|
-
{ label: (0,
|
|
8095
|
+
{ label: (0, import_i18n56.__)("Font color", "elementor"), value: "color", isDisabled: true },
|
|
8096
|
+
{ label: (0, import_i18n56.__)("Font size", "elementor"), value: "font-size", isDisabled: true },
|
|
8097
|
+
{ label: (0, import_i18n56.__)("Line height", "elementor"), value: "line-height", isDisabled: true },
|
|
8098
|
+
{ label: (0, import_i18n56.__)("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
|
|
8099
|
+
{ label: (0, import_i18n56.__)("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
|
|
8100
|
+
{ label: (0, import_i18n56.__)("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
|
|
8101
|
+
{ label: (0, import_i18n56.__)("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
|
|
7967
8102
|
]
|
|
7968
8103
|
},
|
|
7969
8104
|
{
|
|
7970
|
-
label: (0,
|
|
8105
|
+
label: (0, import_i18n56.__)("Background", "elementor"),
|
|
7971
8106
|
type: "category",
|
|
7972
8107
|
properties: [
|
|
7973
|
-
{ label: (0,
|
|
7974
|
-
{ label: (0,
|
|
7975
|
-
{ label: (0,
|
|
8108
|
+
{ label: (0, import_i18n56.__)("Background color", "elementor"), value: "background-color", isDisabled: true },
|
|
8109
|
+
{ label: (0, import_i18n56.__)("Background position", "elementor"), value: "background-position", isDisabled: true },
|
|
8110
|
+
{ label: (0, import_i18n56.__)("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
|
|
7976
8111
|
]
|
|
7977
8112
|
},
|
|
7978
8113
|
{
|
|
7979
|
-
label: (0,
|
|
8114
|
+
label: (0, import_i18n56.__)("Border", "elementor"),
|
|
7980
8115
|
type: "category",
|
|
7981
8116
|
properties: [
|
|
7982
|
-
{ label: (0,
|
|
7983
|
-
{ label: (0,
|
|
7984
|
-
{ label: (0,
|
|
7985
|
-
{ label: (0,
|
|
8117
|
+
{ label: (0, import_i18n56.__)("Border (all)", "elementor"), value: "border", isDisabled: true },
|
|
8118
|
+
{ label: (0, import_i18n56.__)("Border radius", "elementor"), value: "border-radius", isDisabled: true },
|
|
8119
|
+
{ label: (0, import_i18n56.__)("Border color", "elementor"), value: "border-color", isDisabled: true },
|
|
8120
|
+
{ label: (0, import_i18n56.__)("Border width", "elementor"), value: "border-width", isDisabled: true }
|
|
7986
8121
|
]
|
|
7987
8122
|
},
|
|
7988
8123
|
{
|
|
7989
|
-
label: (0,
|
|
8124
|
+
label: (0, import_i18n56.__)("Effects", "elementor"),
|
|
7990
8125
|
type: "category",
|
|
7991
8126
|
properties: [
|
|
7992
|
-
{ label: (0,
|
|
7993
|
-
{ label: (0,
|
|
7994
|
-
{ label: (0,
|
|
8127
|
+
{ label: (0, import_i18n56.__)("Opacity", "elementor"), value: "opacity", isDisabled: true },
|
|
8128
|
+
{ label: (0, import_i18n56.__)("Transform (all)", "elementor"), value: "transform", isDisabled: true },
|
|
8129
|
+
{ label: (0, import_i18n56.__)("Filter (all)", "elementor"), value: "filter", isDisabled: true }
|
|
7995
8130
|
]
|
|
7996
8131
|
}
|
|
7997
8132
|
];
|
|
@@ -8027,13 +8162,13 @@ function subscribeToTransitionEvent() {
|
|
|
8027
8162
|
}
|
|
8028
8163
|
|
|
8029
8164
|
// src/controls/transition-control/transition-selector.tsx
|
|
8030
|
-
var
|
|
8031
|
-
var
|
|
8165
|
+
var React112 = __toESM(require("react"));
|
|
8166
|
+
var import_react66 = require("react");
|
|
8032
8167
|
var import_editor_props56 = require("@elementor/editor-props");
|
|
8033
8168
|
var import_editor_ui15 = require("@elementor/editor-ui");
|
|
8034
|
-
var
|
|
8035
|
-
var
|
|
8036
|
-
var
|
|
8169
|
+
var import_icons37 = require("@elementor/icons");
|
|
8170
|
+
var import_ui95 = require("@elementor/ui");
|
|
8171
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
8037
8172
|
|
|
8038
8173
|
// src/utils/tracking.ts
|
|
8039
8174
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
@@ -8114,9 +8249,9 @@ var TransitionSelector = ({
|
|
|
8114
8249
|
const {
|
|
8115
8250
|
key: { value: transitionLabel }
|
|
8116
8251
|
} = value;
|
|
8117
|
-
const defaultRef = (0,
|
|
8118
|
-
const popoverState = (0,
|
|
8119
|
-
const disabledCategories = (0,
|
|
8252
|
+
const defaultRef = (0, import_react66.useRef)(null);
|
|
8253
|
+
const popoverState = (0, import_ui95.usePopupState)({ variant: "popover" });
|
|
8254
|
+
const disabledCategories = (0, import_react66.useMemo)(() => {
|
|
8120
8255
|
return new Set(
|
|
8121
8256
|
transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
|
|
8122
8257
|
);
|
|
@@ -8136,7 +8271,7 @@ var TransitionSelector = ({
|
|
|
8136
8271
|
return [
|
|
8137
8272
|
first,
|
|
8138
8273
|
{
|
|
8139
|
-
label: (0,
|
|
8274
|
+
label: (0, import_i18n57.__)("Recently Used", "elementor"),
|
|
8140
8275
|
items: recentItems
|
|
8141
8276
|
},
|
|
8142
8277
|
...rest
|
|
@@ -8160,27 +8295,27 @@ var TransitionSelector = ({
|
|
|
8160
8295
|
left: rect.right + 36
|
|
8161
8296
|
};
|
|
8162
8297
|
};
|
|
8163
|
-
return /* @__PURE__ */
|
|
8164
|
-
|
|
8298
|
+
return /* @__PURE__ */ React112.createElement(import_ui95.Box, { ref: defaultRef }, /* @__PURE__ */ React112.createElement(ControlActions, null, /* @__PURE__ */ React112.createElement(
|
|
8299
|
+
import_ui95.UnstableTag,
|
|
8165
8300
|
{
|
|
8166
8301
|
variant: "outlined",
|
|
8167
8302
|
label: transitionLabel,
|
|
8168
|
-
endIcon: /* @__PURE__ */
|
|
8169
|
-
...(0,
|
|
8303
|
+
endIcon: /* @__PURE__ */ React112.createElement(import_icons37.ChevronDownIcon, { fontSize: "tiny" }),
|
|
8304
|
+
...(0, import_ui95.bindTrigger)(popoverState),
|
|
8170
8305
|
fullWidth: true
|
|
8171
8306
|
}
|
|
8172
|
-
)), /* @__PURE__ */
|
|
8173
|
-
|
|
8307
|
+
)), /* @__PURE__ */ React112.createElement(
|
|
8308
|
+
import_ui95.Popover,
|
|
8174
8309
|
{
|
|
8175
8310
|
disablePortal: true,
|
|
8176
8311
|
disableScrollLock: true,
|
|
8177
|
-
...(0,
|
|
8312
|
+
...(0, import_ui95.bindPopover)(popoverState),
|
|
8178
8313
|
anchorReference: "anchorPosition",
|
|
8179
8314
|
anchorPosition: getAnchorPosition(),
|
|
8180
8315
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
8181
8316
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
8182
8317
|
},
|
|
8183
|
-
/* @__PURE__ */
|
|
8318
|
+
/* @__PURE__ */ React112.createElement(
|
|
8184
8319
|
ItemSelector,
|
|
8185
8320
|
{
|
|
8186
8321
|
itemsList: getItemList(),
|
|
@@ -8188,11 +8323,11 @@ var TransitionSelector = ({
|
|
|
8188
8323
|
onItemChange: handleTransitionPropertyChange,
|
|
8189
8324
|
onClose: popoverState.close,
|
|
8190
8325
|
sectionWidth: 268,
|
|
8191
|
-
title: (0,
|
|
8192
|
-
icon:
|
|
8326
|
+
title: (0, import_i18n57.__)("Transition Property", "elementor"),
|
|
8327
|
+
icon: import_icons37.VariationsIcon,
|
|
8193
8328
|
disabledItems: includeCurrentValueInOptions(value, disabledItems),
|
|
8194
|
-
categoryItemContentTemplate: (item) => /* @__PURE__ */
|
|
8195
|
-
|
|
8329
|
+
categoryItemContentTemplate: (item) => /* @__PURE__ */ React112.createElement(
|
|
8330
|
+
import_ui95.Box,
|
|
8196
8331
|
{
|
|
8197
8332
|
sx: {
|
|
8198
8333
|
display: "flex",
|
|
@@ -8201,13 +8336,13 @@ var TransitionSelector = ({
|
|
|
8201
8336
|
width: "100%"
|
|
8202
8337
|
}
|
|
8203
8338
|
},
|
|
8204
|
-
/* @__PURE__ */
|
|
8205
|
-
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */
|
|
8339
|
+
/* @__PURE__ */ React112.createElement("span", null, item.value),
|
|
8340
|
+
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React112.createElement(import_editor_ui15.PromotionChip, null)
|
|
8206
8341
|
),
|
|
8207
|
-
footer: showPromotion ? /* @__PURE__ */
|
|
8342
|
+
footer: showPromotion ? /* @__PURE__ */ React112.createElement(
|
|
8208
8343
|
import_editor_ui15.PromotionAlert,
|
|
8209
8344
|
{
|
|
8210
|
-
message: (0,
|
|
8345
|
+
message: (0, import_i18n57.__)(
|
|
8211
8346
|
"Upgrade to customize transition properties and control effects.",
|
|
8212
8347
|
"elementor"
|
|
8213
8348
|
),
|
|
@@ -8246,8 +8381,8 @@ var areAllPropertiesUsed = (value = []) => {
|
|
|
8246
8381
|
};
|
|
8247
8382
|
var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
8248
8383
|
return {
|
|
8249
|
-
selectionLabel: (0,
|
|
8250
|
-
sizeLabel: (0,
|
|
8384
|
+
selectionLabel: (0, import_i18n58.__)("Type", "elementor"),
|
|
8385
|
+
sizeLabel: (0, import_i18n58.__)("Duration", "elementor"),
|
|
8251
8386
|
selectionConfig: {
|
|
8252
8387
|
component: TransitionSelector,
|
|
8253
8388
|
props: {
|
|
@@ -8323,18 +8458,18 @@ var getInitialValue = (values = []) => {
|
|
|
8323
8458
|
}
|
|
8324
8459
|
return initialTransitionValue;
|
|
8325
8460
|
};
|
|
8326
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
8327
|
-
|
|
8461
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React113.createElement(
|
|
8462
|
+
import_ui96.Alert,
|
|
8328
8463
|
{
|
|
8329
8464
|
sx: {
|
|
8330
8465
|
width: 280,
|
|
8331
8466
|
gap: 0.5
|
|
8332
8467
|
},
|
|
8333
8468
|
color: "secondary",
|
|
8334
|
-
icon: /* @__PURE__ */
|
|
8469
|
+
icon: /* @__PURE__ */ React113.createElement(import_icons38.InfoCircleFilledIcon, null)
|
|
8335
8470
|
},
|
|
8336
|
-
/* @__PURE__ */
|
|
8337
|
-
/* @__PURE__ */
|
|
8471
|
+
/* @__PURE__ */ React113.createElement(import_ui96.AlertTitle, null, (0, import_i18n58.__)("Transitions", "elementor")),
|
|
8472
|
+
/* @__PURE__ */ React113.createElement(import_ui96.Box, { component: "span" }, /* @__PURE__ */ React113.createElement(import_ui96.Typography, { variant: "body2" }, (0, import_i18n58.__)("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
8338
8473
|
);
|
|
8339
8474
|
var TransitionRepeaterControl = createControl(
|
|
8340
8475
|
({
|
|
@@ -8342,14 +8477,14 @@ var TransitionRepeaterControl = createControl(
|
|
|
8342
8477
|
currentStyleState
|
|
8343
8478
|
}) => {
|
|
8344
8479
|
const currentStyleIsNormal = currentStyleState === null;
|
|
8345
|
-
const [recentlyUsedList, setRecentlyUsedList] = (0,
|
|
8480
|
+
const [recentlyUsedList, setRecentlyUsedList] = (0, import_react67.useState)([]);
|
|
8346
8481
|
const proInstalled = (0, import_utils8.hasProInstalled)();
|
|
8347
8482
|
const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
8348
|
-
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0,
|
|
8483
|
+
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react67.useMemo)(
|
|
8349
8484
|
() => getDisabledItemLabels(value),
|
|
8350
8485
|
[value]
|
|
8351
8486
|
);
|
|
8352
|
-
const allowedTransitionSet = (0,
|
|
8487
|
+
const allowedTransitionSet = (0, import_react67.useMemo)(() => {
|
|
8353
8488
|
const set = /* @__PURE__ */ new Set();
|
|
8354
8489
|
transitionProperties.forEach((category) => {
|
|
8355
8490
|
category.properties.forEach((prop) => {
|
|
@@ -8360,7 +8495,7 @@ var TransitionRepeaterControl = createControl(
|
|
|
8360
8495
|
});
|
|
8361
8496
|
return set;
|
|
8362
8497
|
}, [proInstalled]);
|
|
8363
|
-
(0,
|
|
8498
|
+
(0, import_react67.useEffect)(() => {
|
|
8364
8499
|
if (!value || value.length === 0) {
|
|
8365
8500
|
return;
|
|
8366
8501
|
}
|
|
@@ -8372,18 +8507,18 @@ var TransitionRepeaterControl = createControl(
|
|
|
8372
8507
|
setValue(sanitized);
|
|
8373
8508
|
}
|
|
8374
8509
|
}, [allowedTransitionSet]);
|
|
8375
|
-
(0,
|
|
8510
|
+
(0, import_react67.useEffect)(() => {
|
|
8376
8511
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
8377
8512
|
}, [recentlyUsedListGetter]);
|
|
8378
|
-
const allPropertiesUsed = (0,
|
|
8513
|
+
const allPropertiesUsed = (0, import_react67.useMemo)(() => areAllPropertiesUsed(value), [value]);
|
|
8379
8514
|
const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
|
|
8380
|
-
return /* @__PURE__ */
|
|
8515
|
+
return /* @__PURE__ */ React113.createElement(
|
|
8381
8516
|
RepeatableControl,
|
|
8382
8517
|
{
|
|
8383
|
-
label: (0,
|
|
8384
|
-
repeaterLabel: (0,
|
|
8518
|
+
label: (0, import_i18n58.__)("Transitions", "elementor"),
|
|
8519
|
+
repeaterLabel: (0, import_i18n58.__)("Transitions", "elementor"),
|
|
8385
8520
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
8386
|
-
placeholder: (0,
|
|
8521
|
+
placeholder: (0, import_i18n58.__)("Empty Transition", "elementor"),
|
|
8387
8522
|
showDuplicate: false,
|
|
8388
8523
|
showToggle: true,
|
|
8389
8524
|
initialValues: getInitialValue(value),
|
|
@@ -8404,11 +8539,11 @@ var TransitionRepeaterControl = createControl(
|
|
|
8404
8539
|
);
|
|
8405
8540
|
|
|
8406
8541
|
// src/controls/date-time-control.tsx
|
|
8407
|
-
var
|
|
8542
|
+
var React114 = __toESM(require("react"));
|
|
8408
8543
|
var dayjs = __toESM(require("dayjs"));
|
|
8409
8544
|
var import_editor_props58 = require("@elementor/editor-props");
|
|
8410
8545
|
var import_editor_props59 = require("@elementor/editor-props");
|
|
8411
|
-
var
|
|
8546
|
+
var import_ui97 = require("@elementor/ui");
|
|
8412
8547
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
8413
8548
|
var TIME_FORMAT = "HH:mm";
|
|
8414
8549
|
var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
@@ -8452,8 +8587,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
8452
8587
|
const base = dayjs.default();
|
|
8453
8588
|
return base.hour(h).minute(m).second(0).millisecond(0);
|
|
8454
8589
|
};
|
|
8455
|
-
return /* @__PURE__ */
|
|
8456
|
-
|
|
8590
|
+
return /* @__PURE__ */ React114.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(import_ui97.LocalizationProvider, null, /* @__PURE__ */ React114.createElement(import_ui97.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React114.createElement(
|
|
8591
|
+
import_ui97.DatePicker,
|
|
8457
8592
|
{
|
|
8458
8593
|
value: parseDateValue(import_editor_props58.stringPropTypeUtil.extract(value?.date)),
|
|
8459
8594
|
onChange: (v) => handleChange({ date: v }, { bind: "date" }),
|
|
@@ -8464,8 +8599,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
8464
8599
|
openPickerIcon: { fontSize: "tiny" }
|
|
8465
8600
|
}
|
|
8466
8601
|
}
|
|
8467
|
-
)), /* @__PURE__ */
|
|
8468
|
-
|
|
8602
|
+
)), /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React114.createElement(
|
|
8603
|
+
import_ui97.TimePicker,
|
|
8469
8604
|
{
|
|
8470
8605
|
value: parseTimeValue(import_editor_props58.stringPropTypeUtil.extract(value?.time)),
|
|
8471
8606
|
onChange: (v) => handleChange({ time: v }, { bind: "time" }),
|
|
@@ -8480,15 +8615,15 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
8480
8615
|
});
|
|
8481
8616
|
|
|
8482
8617
|
// src/controls/date-range-control.tsx
|
|
8483
|
-
var
|
|
8618
|
+
var React116 = __toESM(require("react"));
|
|
8484
8619
|
var import_editor_props61 = require("@elementor/editor-props");
|
|
8485
|
-
var
|
|
8486
|
-
var
|
|
8620
|
+
var import_ui99 = require("@elementor/ui");
|
|
8621
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
8487
8622
|
|
|
8488
8623
|
// src/controls/date-string-control.tsx
|
|
8489
|
-
var
|
|
8624
|
+
var React115 = __toESM(require("react"));
|
|
8490
8625
|
var import_editor_props60 = require("@elementor/editor-props");
|
|
8491
|
-
var
|
|
8626
|
+
var import_ui98 = require("@elementor/ui");
|
|
8492
8627
|
|
|
8493
8628
|
// src/utils/date-time.ts
|
|
8494
8629
|
var dayjs2 = __toESM(require("dayjs"));
|
|
@@ -8545,8 +8680,8 @@ var DateStringControl = createControl(
|
|
|
8545
8680
|
}
|
|
8546
8681
|
setValue(newValue.format(format));
|
|
8547
8682
|
};
|
|
8548
|
-
return /* @__PURE__ */
|
|
8549
|
-
|
|
8683
|
+
return /* @__PURE__ */ React115.createElement(import_ui98.LocalizationProvider, null, /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
|
|
8684
|
+
import_ui98.DatePicker,
|
|
8550
8685
|
{
|
|
8551
8686
|
value: parseDateString(value ?? ""),
|
|
8552
8687
|
onChange: (newValue) => handleChange(newValue, DATE_FORMAT2),
|
|
@@ -8559,8 +8694,8 @@ var DateStringControl = createControl(
|
|
|
8559
8694
|
|
|
8560
8695
|
// src/controls/date-range-control.tsx
|
|
8561
8696
|
var RANGE_LABELS = {
|
|
8562
|
-
min: (0,
|
|
8563
|
-
max: (0,
|
|
8697
|
+
min: (0, import_i18n59.__)("Min date", "elementor"),
|
|
8698
|
+
max: (0, import_i18n59.__)("Max date", "elementor")
|
|
8564
8699
|
};
|
|
8565
8700
|
var isMaxBeforeMin = (minIso, maxIso) => {
|
|
8566
8701
|
if (!minIso || !maxIso) {
|
|
@@ -8568,40 +8703,40 @@ var isMaxBeforeMin = (minIso, maxIso) => {
|
|
|
8568
8703
|
}
|
|
8569
8704
|
return maxIso < minIso;
|
|
8570
8705
|
};
|
|
8571
|
-
var RANGE_ERROR_MESSAGE = (0,
|
|
8706
|
+
var RANGE_ERROR_MESSAGE = (0, import_i18n59.__)("Max date must be on or after Min date", "elementor");
|
|
8572
8707
|
var DateRangeControl = createControl(() => {
|
|
8573
8708
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props61.dateRangePropTypeUtil);
|
|
8574
8709
|
const minString = import_editor_props61.dateStringPropTypeUtil.extract(value?.min);
|
|
8575
8710
|
const maxString = import_editor_props61.dateStringPropTypeUtil.extract(value?.max);
|
|
8576
8711
|
const hasInvalidRange = isMaxBeforeMin(minString, maxString);
|
|
8577
|
-
return /* @__PURE__ */
|
|
8712
|
+
return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(import_ui99.Stack, { gap: 0.75 }, /* @__PURE__ */ React116.createElement(import_ui99.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React116.createElement(import_ui99.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React116.createElement(import_ui99.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React116.createElement(import_ui99.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React116.createElement(
|
|
8578
8713
|
BoundDateStringControl,
|
|
8579
8714
|
{
|
|
8580
8715
|
bind: "min",
|
|
8581
8716
|
ariaLabel: RANGE_LABELS.min,
|
|
8582
8717
|
error: hasInvalidRange
|
|
8583
8718
|
}
|
|
8584
|
-
))), /* @__PURE__ */
|
|
8719
|
+
))), /* @__PURE__ */ React116.createElement(import_ui99.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React116.createElement(import_ui99.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React116.createElement(import_ui99.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React116.createElement(
|
|
8585
8720
|
BoundDateStringControl,
|
|
8586
8721
|
{
|
|
8587
8722
|
bind: "max",
|
|
8588
8723
|
ariaLabel: RANGE_LABELS.max,
|
|
8589
8724
|
error: hasInvalidRange
|
|
8590
8725
|
}
|
|
8591
|
-
)))), hasInvalidRange && /* @__PURE__ */
|
|
8726
|
+
)))), hasInvalidRange && /* @__PURE__ */ React116.createElement(import_ui99.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
|
|
8592
8727
|
});
|
|
8593
8728
|
var BoundDateStringControl = ({
|
|
8594
8729
|
bind,
|
|
8595
8730
|
ariaLabel,
|
|
8596
8731
|
error
|
|
8597
8732
|
}) => {
|
|
8598
|
-
return /* @__PURE__ */
|
|
8733
|
+
return /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React116.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
|
|
8599
8734
|
};
|
|
8600
8735
|
|
|
8601
8736
|
// src/controls/time-string-control.tsx
|
|
8602
|
-
var
|
|
8737
|
+
var React117 = __toESM(require("react"));
|
|
8603
8738
|
var import_editor_props62 = require("@elementor/editor-props");
|
|
8604
|
-
var
|
|
8739
|
+
var import_ui100 = require("@elementor/ui");
|
|
8605
8740
|
var TimeStringControl = createControl(
|
|
8606
8741
|
({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
|
|
8607
8742
|
const { value, setValue, disabled } = useBoundProp(import_editor_props62.timeStringPropTypeUtil);
|
|
@@ -8627,8 +8762,8 @@ var TimeStringControl = createControl(
|
|
|
8627
8762
|
}
|
|
8628
8763
|
setValue(newValue.format(format));
|
|
8629
8764
|
};
|
|
8630
|
-
return /* @__PURE__ */
|
|
8631
|
-
|
|
8765
|
+
return /* @__PURE__ */ React117.createElement(import_ui100.LocalizationProvider, null, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(
|
|
8766
|
+
import_ui100.TimePicker,
|
|
8632
8767
|
{
|
|
8633
8768
|
value: parseTimeString(value ?? ""),
|
|
8634
8769
|
onChange: (newValue) => handleChange(newValue, TIME_FORMAT2),
|
|
@@ -8640,32 +8775,32 @@ var TimeStringControl = createControl(
|
|
|
8640
8775
|
);
|
|
8641
8776
|
|
|
8642
8777
|
// src/controls/time-range-control.tsx
|
|
8643
|
-
var
|
|
8778
|
+
var React118 = __toESM(require("react"));
|
|
8644
8779
|
var import_editor_props63 = require("@elementor/editor-props");
|
|
8645
|
-
var
|
|
8646
|
-
var
|
|
8780
|
+
var import_ui101 = require("@elementor/ui");
|
|
8781
|
+
var import_i18n60 = require("@wordpress/i18n");
|
|
8647
8782
|
var RANGE_LABELS2 = {
|
|
8648
|
-
min: (0,
|
|
8649
|
-
max: (0,
|
|
8783
|
+
min: (0, import_i18n60.__)("Start time", "elementor"),
|
|
8784
|
+
max: (0, import_i18n60.__)("End time", "elementor")
|
|
8650
8785
|
};
|
|
8651
8786
|
var TimeRangeControl = createControl(() => {
|
|
8652
8787
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props63.timeRangePropTypeUtil);
|
|
8653
|
-
return /* @__PURE__ */
|
|
8788
|
+
return /* @__PURE__ */ React118.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React118.createElement(import_ui101.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
|
|
8654
8789
|
});
|
|
8655
8790
|
var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
8656
|
-
return /* @__PURE__ */
|
|
8791
|
+
return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React118.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
|
|
8657
8792
|
};
|
|
8658
8793
|
|
|
8659
8794
|
// src/controls/inline-editing-control.tsx
|
|
8660
|
-
var
|
|
8661
|
-
var
|
|
8795
|
+
var React122 = __toESM(require("react"));
|
|
8796
|
+
var import_react73 = require("react");
|
|
8662
8797
|
var import_editor_props65 = require("@elementor/editor-props");
|
|
8663
|
-
var
|
|
8798
|
+
var import_ui105 = require("@elementor/ui");
|
|
8664
8799
|
|
|
8665
8800
|
// src/components/inline-editor.tsx
|
|
8666
|
-
var
|
|
8667
|
-
var
|
|
8668
|
-
var
|
|
8801
|
+
var React119 = __toESM(require("react"));
|
|
8802
|
+
var import_react68 = require("react");
|
|
8803
|
+
var import_ui102 = require("@elementor/ui");
|
|
8669
8804
|
var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
|
|
8670
8805
|
var import_extension_document = __toESM(require("@tiptap/extension-document"));
|
|
8671
8806
|
var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
|
|
@@ -8678,7 +8813,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
|
|
|
8678
8813
|
var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
|
|
8679
8814
|
var import_extension_text = __toESM(require("@tiptap/extension-text"));
|
|
8680
8815
|
var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
|
|
8681
|
-
var
|
|
8816
|
+
var import_react69 = require("@tiptap/react");
|
|
8682
8817
|
|
|
8683
8818
|
// src/utils/inline-editing.ts
|
|
8684
8819
|
var import_editor_props64 = require("@elementor/editor-props");
|
|
@@ -8710,7 +8845,7 @@ function extractInlineHtmlContent(propValue) {
|
|
|
8710
8845
|
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
8711
8846
|
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
8712
8847
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
8713
|
-
var InlineEditor =
|
|
8848
|
+
var InlineEditor = React119.forwardRef((props, ref) => {
|
|
8714
8849
|
const {
|
|
8715
8850
|
value,
|
|
8716
8851
|
setValue,
|
|
@@ -8727,8 +8862,8 @@ var InlineEditor = React118.forwardRef((props, ref) => {
|
|
|
8727
8862
|
onSelectionEnd,
|
|
8728
8863
|
mountElement = null
|
|
8729
8864
|
} = props;
|
|
8730
|
-
const containerRef = (0,
|
|
8731
|
-
const onBlurRef = (0,
|
|
8865
|
+
const containerRef = (0, import_react68.useRef)(null);
|
|
8866
|
+
const onBlurRef = (0, import_react68.useRef)(onBlur);
|
|
8732
8867
|
onBlurRef.current = onBlur;
|
|
8733
8868
|
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
8734
8869
|
const onUpdate = ({ editor: updatedEditor }) => {
|
|
@@ -8750,7 +8885,7 @@ var InlineEditor = React118.forwardRef((props, ref) => {
|
|
|
8750
8885
|
...HTMLAttributes,
|
|
8751
8886
|
class: elementClasses
|
|
8752
8887
|
});
|
|
8753
|
-
const editor = (0,
|
|
8888
|
+
const editor = (0, import_react69.useEditor)({
|
|
8754
8889
|
...mountElement ? { element: mountElement } : {},
|
|
8755
8890
|
extensions: [
|
|
8756
8891
|
import_extension_document.default.extend({
|
|
@@ -8823,11 +8958,11 @@ var InlineEditor = React118.forwardRef((props, ref) => {
|
|
|
8823
8958
|
if (mountElement) {
|
|
8824
8959
|
return null;
|
|
8825
8960
|
}
|
|
8826
|
-
return /* @__PURE__ */
|
|
8961
|
+
return /* @__PURE__ */ React119.createElement(import_ui102.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React119.createElement(import_react69.EditorContent, { ref, editor }));
|
|
8827
8962
|
});
|
|
8828
8963
|
var useOnUpdate = (callback, dependencies) => {
|
|
8829
|
-
const hasMounted = (0,
|
|
8830
|
-
(0,
|
|
8964
|
+
const hasMounted = (0, import_react68.useRef)(false);
|
|
8965
|
+
(0, import_react68.useEffect)(() => {
|
|
8831
8966
|
if (hasMounted.current) {
|
|
8832
8967
|
callback();
|
|
8833
8968
|
} else {
|
|
@@ -8837,20 +8972,20 @@ var useOnUpdate = (callback, dependencies) => {
|
|
|
8837
8972
|
};
|
|
8838
8973
|
|
|
8839
8974
|
// src/components/inline-editor-toolbar.tsx
|
|
8975
|
+
var React121 = __toESM(require("react"));
|
|
8976
|
+
var import_react71 = require("react");
|
|
8977
|
+
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
8978
|
+
var import_icons40 = require("@elementor/icons");
|
|
8979
|
+
var import_ui104 = require("@elementor/ui");
|
|
8980
|
+
var import_react72 = require("@tiptap/react");
|
|
8981
|
+
var import_i18n62 = require("@wordpress/i18n");
|
|
8982
|
+
|
|
8983
|
+
// src/components/url-popover.tsx
|
|
8840
8984
|
var React120 = __toESM(require("react"));
|
|
8841
8985
|
var import_react70 = require("react");
|
|
8842
|
-
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
8843
8986
|
var import_icons39 = require("@elementor/icons");
|
|
8844
8987
|
var import_ui103 = require("@elementor/ui");
|
|
8845
|
-
var import_react71 = require("@tiptap/react");
|
|
8846
8988
|
var import_i18n61 = require("@wordpress/i18n");
|
|
8847
|
-
|
|
8848
|
-
// src/components/url-popover.tsx
|
|
8849
|
-
var React119 = __toESM(require("react"));
|
|
8850
|
-
var import_react69 = require("react");
|
|
8851
|
-
var import_icons38 = require("@elementor/icons");
|
|
8852
|
-
var import_ui102 = require("@elementor/ui");
|
|
8853
|
-
var import_i18n60 = require("@wordpress/i18n");
|
|
8854
8989
|
var UrlPopover = ({
|
|
8855
8990
|
popupState,
|
|
8856
8991
|
restoreValue,
|
|
@@ -8860,8 +8995,8 @@ var UrlPopover = ({
|
|
|
8860
8995
|
openInNewTab,
|
|
8861
8996
|
onToggleNewTab
|
|
8862
8997
|
}) => {
|
|
8863
|
-
const inputRef = (0,
|
|
8864
|
-
(0,
|
|
8998
|
+
const inputRef = (0, import_react70.useRef)(null);
|
|
8999
|
+
(0, import_react70.useEffect)(() => {
|
|
8865
9000
|
if (popupState.isOpen) {
|
|
8866
9001
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
8867
9002
|
}
|
|
@@ -8870,41 +9005,41 @@ var UrlPopover = ({
|
|
|
8870
9005
|
restoreValue();
|
|
8871
9006
|
popupState.close();
|
|
8872
9007
|
};
|
|
8873
|
-
return /* @__PURE__ */
|
|
8874
|
-
|
|
9008
|
+
return /* @__PURE__ */ React120.createElement(
|
|
9009
|
+
import_ui103.Popover,
|
|
8875
9010
|
{
|
|
8876
9011
|
slotProps: {
|
|
8877
9012
|
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
8878
9013
|
},
|
|
8879
|
-
...(0,
|
|
9014
|
+
...(0, import_ui103.bindPopover)(popupState),
|
|
8880
9015
|
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
8881
9016
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8882
9017
|
onClose: handleClose
|
|
8883
9018
|
},
|
|
8884
|
-
/* @__PURE__ */
|
|
8885
|
-
|
|
9019
|
+
/* @__PURE__ */ React120.createElement(import_ui103.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React120.createElement(
|
|
9020
|
+
import_ui103.TextField,
|
|
8886
9021
|
{
|
|
8887
9022
|
value,
|
|
8888
9023
|
onChange,
|
|
8889
9024
|
size: "tiny",
|
|
8890
9025
|
fullWidth: true,
|
|
8891
|
-
placeholder: (0,
|
|
9026
|
+
placeholder: (0, import_i18n61.__)("Type a URL", "elementor"),
|
|
8892
9027
|
inputProps: { ref: inputRef },
|
|
8893
9028
|
color: "secondary",
|
|
8894
9029
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
8895
9030
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
8896
9031
|
}
|
|
8897
|
-
), /* @__PURE__ */
|
|
8898
|
-
|
|
9032
|
+
), /* @__PURE__ */ React120.createElement(import_ui103.Tooltip, { title: (0, import_i18n61.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React120.createElement(
|
|
9033
|
+
import_ui103.ToggleButton,
|
|
8899
9034
|
{
|
|
8900
9035
|
size: "tiny",
|
|
8901
9036
|
value: "newTab",
|
|
8902
9037
|
selected: openInNewTab,
|
|
8903
9038
|
onClick: onToggleNewTab,
|
|
8904
|
-
"aria-label": (0,
|
|
9039
|
+
"aria-label": (0, import_i18n61.__)("Open in a new tab", "elementor"),
|
|
8905
9040
|
sx: { borderRadius: "8px" }
|
|
8906
9041
|
},
|
|
8907
|
-
/* @__PURE__ */
|
|
9042
|
+
/* @__PURE__ */ React120.createElement(import_icons39.ExternalLinkIcon, { fontSize: "tiny" })
|
|
8908
9043
|
)))
|
|
8909
9044
|
);
|
|
8910
9045
|
};
|
|
@@ -8916,16 +9051,16 @@ var InlineEditorToolbar = ({
|
|
|
8916
9051
|
sx = {},
|
|
8917
9052
|
inControlPanel = false
|
|
8918
9053
|
}) => {
|
|
8919
|
-
const [urlValue, setUrlValue] = (0,
|
|
8920
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
8921
|
-
const toolbarRef = (0,
|
|
8922
|
-
const linkPopupState = (0,
|
|
9054
|
+
const [urlValue, setUrlValue] = (0, import_react71.useState)("");
|
|
9055
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react71.useState)(false);
|
|
9056
|
+
const toolbarRef = (0, import_react71.useRef)(null);
|
|
9057
|
+
const linkPopupState = (0, import_ui104.usePopupState)({ variant: "popover" });
|
|
8923
9058
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
8924
|
-
const editorState = (0,
|
|
9059
|
+
const editorState = (0, import_react72.useEditorState)({
|
|
8925
9060
|
editor,
|
|
8926
9061
|
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
8927
9062
|
});
|
|
8928
|
-
const formatButtonsList = (0,
|
|
9063
|
+
const formatButtonsList = (0, import_react71.useMemo)(() => {
|
|
8929
9064
|
const buttons = Object.values(formatButtons);
|
|
8930
9065
|
if (isElementClickable) {
|
|
8931
9066
|
return buttons.filter((button) => button.action !== "link");
|
|
@@ -8962,13 +9097,13 @@ var InlineEditorToolbar = ({
|
|
|
8962
9097
|
}
|
|
8963
9098
|
linkPopupState.close();
|
|
8964
9099
|
};
|
|
8965
|
-
(0,
|
|
9100
|
+
(0, import_react71.useEffect)(() => {
|
|
8966
9101
|
if (!inControlPanel) {
|
|
8967
9102
|
editor?.commands?.focus();
|
|
8968
9103
|
}
|
|
8969
9104
|
}, [editor, inControlPanel]);
|
|
8970
|
-
return /* @__PURE__ */
|
|
8971
|
-
|
|
9105
|
+
return /* @__PURE__ */ React121.createElement(
|
|
9106
|
+
import_ui104.Box,
|
|
8972
9107
|
{
|
|
8973
9108
|
ref: toolbarRef,
|
|
8974
9109
|
sx: {
|
|
@@ -9001,9 +9136,9 @@ var InlineEditorToolbar = ({
|
|
|
9001
9136
|
}
|
|
9002
9137
|
}
|
|
9003
9138
|
},
|
|
9004
|
-
/* @__PURE__ */
|
|
9005
|
-
/* @__PURE__ */
|
|
9006
|
-
|
|
9139
|
+
/* @__PURE__ */ React121.createElement(import_ui104.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React121.createElement(import_ui104.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
9140
|
+
/* @__PURE__ */ React121.createElement(
|
|
9141
|
+
import_ui104.ToggleButtonGroup,
|
|
9007
9142
|
{
|
|
9008
9143
|
value: editorState,
|
|
9009
9144
|
size: "tiny",
|
|
@@ -9011,7 +9146,7 @@ var InlineEditorToolbar = ({
|
|
|
9011
9146
|
display: "flex",
|
|
9012
9147
|
gap: 0.5,
|
|
9013
9148
|
border: "none",
|
|
9014
|
-
[`& .${
|
|
9149
|
+
[`& .${import_ui104.toggleButtonGroupClasses.firstButton}, & .${import_ui104.toggleButtonGroupClasses.middleButton}, & .${import_ui104.toggleButtonGroupClasses.lastButton}`]: {
|
|
9015
9150
|
borderRadius: "8px",
|
|
9016
9151
|
border: "none",
|
|
9017
9152
|
marginLeft: 0,
|
|
@@ -9032,8 +9167,8 @@ var InlineEditorToolbar = ({
|
|
|
9032
9167
|
}
|
|
9033
9168
|
}
|
|
9034
9169
|
},
|
|
9035
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
9036
|
-
|
|
9170
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React121.createElement(import_ui104.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React121.createElement(
|
|
9171
|
+
import_ui104.ToggleButton,
|
|
9037
9172
|
{
|
|
9038
9173
|
value: button.action,
|
|
9039
9174
|
"aria-label": button.label,
|
|
@@ -9050,7 +9185,7 @@ var InlineEditorToolbar = ({
|
|
|
9050
9185
|
button.icon
|
|
9051
9186
|
)))
|
|
9052
9187
|
),
|
|
9053
|
-
/* @__PURE__ */
|
|
9188
|
+
/* @__PURE__ */ React121.createElement(
|
|
9054
9189
|
UrlPopover,
|
|
9055
9190
|
{
|
|
9056
9191
|
popupState: linkPopupState,
|
|
@@ -9073,64 +9208,64 @@ var checkIfElementIsClickable = (elementId) => {
|
|
|
9073
9208
|
};
|
|
9074
9209
|
var toolbarButtons = {
|
|
9075
9210
|
clear: {
|
|
9076
|
-
label: (0,
|
|
9077
|
-
icon: /* @__PURE__ */
|
|
9211
|
+
label: (0, import_i18n62.__)("Clear", "elementor"),
|
|
9212
|
+
icon: /* @__PURE__ */ React121.createElement(import_icons40.MinusIcon, { fontSize: "tiny" }),
|
|
9078
9213
|
action: "clear",
|
|
9079
9214
|
method: (editor) => {
|
|
9080
9215
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
9081
9216
|
}
|
|
9082
9217
|
},
|
|
9083
9218
|
bold: {
|
|
9084
|
-
label: (0,
|
|
9085
|
-
icon: /* @__PURE__ */
|
|
9219
|
+
label: (0, import_i18n62.__)("Bold", "elementor"),
|
|
9220
|
+
icon: /* @__PURE__ */ React121.createElement(import_icons40.BoldIcon, { fontSize: "tiny" }),
|
|
9086
9221
|
action: "bold",
|
|
9087
9222
|
method: (editor) => {
|
|
9088
9223
|
editor.chain().focus().toggleBold().run();
|
|
9089
9224
|
}
|
|
9090
9225
|
},
|
|
9091
9226
|
italic: {
|
|
9092
|
-
label: (0,
|
|
9093
|
-
icon: /* @__PURE__ */
|
|
9227
|
+
label: (0, import_i18n62.__)("Italic", "elementor"),
|
|
9228
|
+
icon: /* @__PURE__ */ React121.createElement(import_icons40.ItalicIcon, { fontSize: "tiny" }),
|
|
9094
9229
|
action: "italic",
|
|
9095
9230
|
method: (editor) => {
|
|
9096
9231
|
editor.chain().focus().toggleItalic().run();
|
|
9097
9232
|
}
|
|
9098
9233
|
},
|
|
9099
9234
|
underline: {
|
|
9100
|
-
label: (0,
|
|
9101
|
-
icon: /* @__PURE__ */
|
|
9235
|
+
label: (0, import_i18n62.__)("Underline", "elementor"),
|
|
9236
|
+
icon: /* @__PURE__ */ React121.createElement(import_icons40.UnderlineIcon, { fontSize: "tiny" }),
|
|
9102
9237
|
action: "underline",
|
|
9103
9238
|
method: (editor) => {
|
|
9104
9239
|
editor.chain().focus().toggleUnderline().run();
|
|
9105
9240
|
}
|
|
9106
9241
|
},
|
|
9107
9242
|
strike: {
|
|
9108
|
-
label: (0,
|
|
9109
|
-
icon: /* @__PURE__ */
|
|
9243
|
+
label: (0, import_i18n62.__)("Strikethrough", "elementor"),
|
|
9244
|
+
icon: /* @__PURE__ */ React121.createElement(import_icons40.StrikethroughIcon, { fontSize: "tiny" }),
|
|
9110
9245
|
action: "strike",
|
|
9111
9246
|
method: (editor) => {
|
|
9112
9247
|
editor.chain().focus().toggleStrike().run();
|
|
9113
9248
|
}
|
|
9114
9249
|
},
|
|
9115
9250
|
superscript: {
|
|
9116
|
-
label: (0,
|
|
9117
|
-
icon: /* @__PURE__ */
|
|
9251
|
+
label: (0, import_i18n62.__)("Superscript", "elementor"),
|
|
9252
|
+
icon: /* @__PURE__ */ React121.createElement(import_icons40.SuperscriptIcon, { fontSize: "tiny" }),
|
|
9118
9253
|
action: "superscript",
|
|
9119
9254
|
method: (editor) => {
|
|
9120
9255
|
editor.chain().focus().toggleSuperscript().run();
|
|
9121
9256
|
}
|
|
9122
9257
|
},
|
|
9123
9258
|
subscript: {
|
|
9124
|
-
label: (0,
|
|
9125
|
-
icon: /* @__PURE__ */
|
|
9259
|
+
label: (0, import_i18n62.__)("Subscript", "elementor"),
|
|
9260
|
+
icon: /* @__PURE__ */ React121.createElement(import_icons40.SubscriptIcon, { fontSize: "tiny" }),
|
|
9126
9261
|
action: "subscript",
|
|
9127
9262
|
method: (editor) => {
|
|
9128
9263
|
editor.chain().focus().toggleSubscript().run();
|
|
9129
9264
|
}
|
|
9130
9265
|
},
|
|
9131
9266
|
link: {
|
|
9132
|
-
label: (0,
|
|
9133
|
-
icon: /* @__PURE__ */
|
|
9267
|
+
label: (0, import_i18n62.__)("Link", "elementor"),
|
|
9268
|
+
icon: /* @__PURE__ */ React121.createElement(import_icons40.LinkIcon, { fontSize: "tiny" }),
|
|
9134
9269
|
action: "link",
|
|
9135
9270
|
method: null
|
|
9136
9271
|
}
|
|
@@ -9143,15 +9278,15 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
9143
9278
|
const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
|
|
9144
9279
|
const { value: rawValue } = usePropKeyContext();
|
|
9145
9280
|
const content = value ?? extractInlineHtmlContent(rawValue);
|
|
9146
|
-
const [editor, setEditor] = (0,
|
|
9147
|
-
const handleChange = (0,
|
|
9281
|
+
const [editor, setEditor] = (0, import_react73.useState)(null);
|
|
9282
|
+
const handleChange = (0, import_react73.useCallback)(
|
|
9148
9283
|
(newValue) => {
|
|
9149
9284
|
const html = newValue ?? "";
|
|
9150
9285
|
setValue(html);
|
|
9151
9286
|
},
|
|
9152
9287
|
[setValue]
|
|
9153
9288
|
);
|
|
9154
|
-
return /* @__PURE__ */
|
|
9289
|
+
return /* @__PURE__ */ React122.createElement(ControlActions, null, /* @__PURE__ */ React122.createElement(import_ui105.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React122.createElement(
|
|
9155
9290
|
InlineEditorToolbar,
|
|
9156
9291
|
{
|
|
9157
9292
|
editor,
|
|
@@ -9164,8 +9299,8 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
9164
9299
|
}),
|
|
9165
9300
|
inControlPanel: true
|
|
9166
9301
|
}
|
|
9167
|
-
), /* @__PURE__ */
|
|
9168
|
-
|
|
9302
|
+
), /* @__PURE__ */ React122.createElement(
|
|
9303
|
+
import_ui105.Box,
|
|
9169
9304
|
{
|
|
9170
9305
|
sx: (theme) => ({
|
|
9171
9306
|
p: 0.8,
|
|
@@ -9209,7 +9344,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
9209
9344
|
...attributes,
|
|
9210
9345
|
...props
|
|
9211
9346
|
},
|
|
9212
|
-
/* @__PURE__ */
|
|
9347
|
+
/* @__PURE__ */ React122.createElement(
|
|
9213
9348
|
InlineEditor,
|
|
9214
9349
|
{
|
|
9215
9350
|
value: content,
|
|
@@ -9226,17 +9361,17 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
9226
9361
|
});
|
|
9227
9362
|
|
|
9228
9363
|
// src/controls/email-form-action-control/index.tsx
|
|
9229
|
-
var
|
|
9364
|
+
var React126 = __toESM(require("react"));
|
|
9230
9365
|
var import_editor_props68 = require("@elementor/editor-props");
|
|
9231
9366
|
var import_editor_ui17 = require("@elementor/editor-ui");
|
|
9232
|
-
var
|
|
9233
|
-
var
|
|
9367
|
+
var import_ui109 = require("@elementor/ui");
|
|
9368
|
+
var import_i18n64 = require("@wordpress/i18n");
|
|
9234
9369
|
|
|
9235
9370
|
// src/controls/email-form-action-control/fields.tsx
|
|
9236
|
-
var
|
|
9371
|
+
var React125 = __toESM(require("react"));
|
|
9237
9372
|
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
9238
|
-
var
|
|
9239
|
-
var
|
|
9373
|
+
var import_ui108 = require("@elementor/ui");
|
|
9374
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
9240
9375
|
|
|
9241
9376
|
// src/hooks/use-form-field-suggestions.ts
|
|
9242
9377
|
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
@@ -9325,10 +9460,10 @@ function useFormFieldSuggestions(options) {
|
|
|
9325
9460
|
}
|
|
9326
9461
|
|
|
9327
9462
|
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
9328
|
-
var
|
|
9329
|
-
var
|
|
9463
|
+
var React123 = __toESM(require("react"));
|
|
9464
|
+
var import_react74 = require("react");
|
|
9330
9465
|
var import_editor_props67 = require("@elementor/editor-props");
|
|
9331
|
-
var
|
|
9466
|
+
var import_ui106 = require("@elementor/ui");
|
|
9332
9467
|
|
|
9333
9468
|
// src/controls/email-form-action-control/utils.ts
|
|
9334
9469
|
var import_schema = require("@elementor/schema");
|
|
@@ -9364,10 +9499,10 @@ function resolveMention(raw, suggestions) {
|
|
|
9364
9499
|
}
|
|
9365
9500
|
var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
9366
9501
|
const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
|
|
9367
|
-
const [inputValue, setInputValue] = (0,
|
|
9502
|
+
const [inputValue, setInputValue] = (0, import_react74.useState)("");
|
|
9368
9503
|
const items2 = value || [];
|
|
9369
9504
|
const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
|
|
9370
|
-
const suggestionOptions = (0,
|
|
9505
|
+
const suggestionOptions = (0, import_react74.useMemo)(
|
|
9371
9506
|
() => suggestions.map((suggestion) => `[${suggestion.value}]`),
|
|
9372
9507
|
[suggestions]
|
|
9373
9508
|
);
|
|
@@ -9402,8 +9537,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
9402
9537
|
tryAddChip(inputValue);
|
|
9403
9538
|
}
|
|
9404
9539
|
};
|
|
9405
|
-
return /* @__PURE__ */
|
|
9406
|
-
|
|
9540
|
+
return /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
|
|
9541
|
+
import_ui106.Autocomplete,
|
|
9407
9542
|
{
|
|
9408
9543
|
fullWidth: true,
|
|
9409
9544
|
multiple: true,
|
|
@@ -9427,99 +9562,99 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
9427
9562
|
onBlur: handleBlur,
|
|
9428
9563
|
getOptionLabel: (option) => option,
|
|
9429
9564
|
isOptionEqualToValue: (option, val) => option === val,
|
|
9430
|
-
renderInput: (params) => /* @__PURE__ */
|
|
9431
|
-
renderTags: (tagValues, getTagProps) => /* @__PURE__ */
|
|
9565
|
+
renderInput: (params) => /* @__PURE__ */ React123.createElement(import_ui106.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
|
|
9566
|
+
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React123.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
|
|
9432
9567
|
}
|
|
9433
9568
|
));
|
|
9434
9569
|
});
|
|
9435
|
-
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */
|
|
9570
|
+
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React123.createElement(import_ui106.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React123.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React123.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React123.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React123.createElement(EmailChipsControl, { placeholder, suggestions })));
|
|
9436
9571
|
|
|
9437
9572
|
// src/controls/email-form-action-control/email-field.tsx
|
|
9438
|
-
var
|
|
9439
|
-
var
|
|
9440
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
9573
|
+
var React124 = __toESM(require("react"));
|
|
9574
|
+
var import_ui107 = require("@elementor/ui");
|
|
9575
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React124.createElement(import_ui107.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React124.createElement(import_ui107.Grid, { item: true }, /* @__PURE__ */ React124.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React124.createElement(import_ui107.Grid, { item: true }, /* @__PURE__ */ React124.createElement(TextControl, { placeholder }))));
|
|
9441
9576
|
|
|
9442
9577
|
// src/controls/email-form-action-control/fields.tsx
|
|
9443
9578
|
var SendToField = ({ placeholder }) => {
|
|
9444
9579
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
9445
|
-
return /* @__PURE__ */
|
|
9580
|
+
return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React125.createElement(import_ui108.Stack, { gap: 0.5 }, /* @__PURE__ */ React125.createElement(
|
|
9446
9581
|
EmailChipsField,
|
|
9447
9582
|
{
|
|
9448
|
-
fieldLabel: (0,
|
|
9583
|
+
fieldLabel: (0, import_i18n63.__)("Send to", "elementor"),
|
|
9449
9584
|
placeholder,
|
|
9450
9585
|
suggestions
|
|
9451
9586
|
}
|
|
9452
|
-
), shouldShowMentionsInfo() && /* @__PURE__ */
|
|
9587
|
+
), shouldShowMentionsInfo() && /* @__PURE__ */ React125.createElement(import_editor_ui16.InfoAlert, null, (0, import_i18n63.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
|
|
9453
9588
|
};
|
|
9454
|
-
var SubjectField = () => /* @__PURE__ */
|
|
9589
|
+
var SubjectField = () => /* @__PURE__ */ React125.createElement(
|
|
9455
9590
|
EmailField,
|
|
9456
9591
|
{
|
|
9457
9592
|
bind: "subject",
|
|
9458
|
-
label: (0,
|
|
9459
|
-
placeholder: (0,
|
|
9593
|
+
label: (0, import_i18n63.__)("Email subject", "elementor"),
|
|
9594
|
+
placeholder: (0, import_i18n63.__)("New form submission", "elementor")
|
|
9460
9595
|
}
|
|
9461
9596
|
);
|
|
9462
9597
|
var MessageField = () => {
|
|
9463
9598
|
const suggestions = useFormFieldSuggestions();
|
|
9464
|
-
return /* @__PURE__ */
|
|
9599
|
+
return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, (0, import_i18n63.__)("Message", "elementor"))), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(import_editor_ui16.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n63.__)(
|
|
9465
9600
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
9466
9601
|
"elementor"
|
|
9467
|
-
) : (0,
|
|
9602
|
+
) : (0, import_i18n63.__)("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
9468
9603
|
};
|
|
9469
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
9604
|
+
var FromEmailField = () => /* @__PURE__ */ React125.createElement(
|
|
9470
9605
|
EmailField,
|
|
9471
9606
|
{
|
|
9472
9607
|
bind: "from",
|
|
9473
|
-
label: (0,
|
|
9474
|
-
placeholder: (0,
|
|
9608
|
+
label: (0, import_i18n63.__)("From email", "elementor"),
|
|
9609
|
+
placeholder: (0, import_i18n63.__)("What email should appear as the sender?", "elementor")
|
|
9475
9610
|
}
|
|
9476
9611
|
);
|
|
9477
|
-
var FromNameField = () => /* @__PURE__ */
|
|
9612
|
+
var FromNameField = () => /* @__PURE__ */ React125.createElement(
|
|
9478
9613
|
EmailField,
|
|
9479
9614
|
{
|
|
9480
9615
|
bind: "from-name",
|
|
9481
|
-
label: (0,
|
|
9482
|
-
placeholder: (0,
|
|
9616
|
+
label: (0, import_i18n63.__)("From name", "elementor"),
|
|
9617
|
+
placeholder: (0, import_i18n63.__)("What name should appear as the sender?", "elementor")
|
|
9483
9618
|
}
|
|
9484
9619
|
);
|
|
9485
9620
|
var ReplyToField = () => {
|
|
9486
9621
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
9487
|
-
return /* @__PURE__ */
|
|
9622
|
+
return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, (0, import_i18n63.__)("Reply-to", "elementor"))), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(
|
|
9488
9623
|
MentionTextAreaControl,
|
|
9489
9624
|
{
|
|
9490
9625
|
suggestions: emailSuggestions,
|
|
9491
9626
|
rows: 1,
|
|
9492
9627
|
triggerPosition: "start",
|
|
9493
|
-
placeholder: (0,
|
|
9628
|
+
placeholder: (0, import_i18n63.__)("You can type @ to insert an email field", "elementor")
|
|
9494
9629
|
}
|
|
9495
9630
|
))));
|
|
9496
9631
|
};
|
|
9497
9632
|
var CcField = () => {
|
|
9498
9633
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
9499
|
-
return /* @__PURE__ */
|
|
9634
|
+
return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React125.createElement(EmailChipsField, { fieldLabel: (0, import_i18n63.__)("Cc", "elementor"), suggestions }));
|
|
9500
9635
|
};
|
|
9501
9636
|
var BccField = () => {
|
|
9502
9637
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
9503
|
-
return /* @__PURE__ */
|
|
9638
|
+
return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React125.createElement(EmailChipsField, { fieldLabel: (0, import_i18n63.__)("Bcc", "elementor"), suggestions }));
|
|
9504
9639
|
};
|
|
9505
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
9640
|
+
var MetaDataField = () => /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React125.createElement(import_ui108.Stack, { gap: 0.5 }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, (0, import_i18n63.__)("Metadata", "elementor")), /* @__PURE__ */ React125.createElement(
|
|
9506
9641
|
ChipsControl,
|
|
9507
9642
|
{
|
|
9508
9643
|
options: [
|
|
9509
|
-
{ label: (0,
|
|
9510
|
-
{ label: (0,
|
|
9511
|
-
{ label: (0,
|
|
9512
|
-
{ label: (0,
|
|
9513
|
-
{ label: (0,
|
|
9644
|
+
{ label: (0, import_i18n63.__)("Date", "elementor"), value: "date" },
|
|
9645
|
+
{ label: (0, import_i18n63.__)("Time", "elementor"), value: "time" },
|
|
9646
|
+
{ label: (0, import_i18n63.__)("Page URL", "elementor"), value: "page-url" },
|
|
9647
|
+
{ label: (0, import_i18n63.__)("User agent", "elementor"), value: "user-agent" },
|
|
9648
|
+
{ label: (0, import_i18n63.__)("Credit", "elementor"), value: "credit" }
|
|
9514
9649
|
]
|
|
9515
9650
|
}
|
|
9516
9651
|
)));
|
|
9517
|
-
var SendAsField = () => /* @__PURE__ */
|
|
9652
|
+
var SendAsField = () => /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, (0, import_i18n63.__)("Send as", "elementor"))), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(
|
|
9518
9653
|
SelectControl,
|
|
9519
9654
|
{
|
|
9520
9655
|
options: [
|
|
9521
|
-
{ label: (0,
|
|
9522
|
-
{ label: (0,
|
|
9656
|
+
{ label: (0, import_i18n63.__)("HTML", "elementor"), value: "html" },
|
|
9657
|
+
{ label: (0, import_i18n63.__)("Plain Text", "elementor"), value: "plain" }
|
|
9523
9658
|
]
|
|
9524
9659
|
}
|
|
9525
9660
|
))));
|
|
@@ -9528,27 +9663,27 @@ var SendAsField = () => /* @__PURE__ */ React124.createElement(PropKeyProvider,
|
|
|
9528
9663
|
var EmailFormActionControl = createControl(
|
|
9529
9664
|
({ toPlaceholder, label }) => {
|
|
9530
9665
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props68.emailsPropTypeUtil);
|
|
9531
|
-
return /* @__PURE__ */
|
|
9666
|
+
return /* @__PURE__ */ React126.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React126.createElement(import_ui109.Stack, { gap: 2 }, /* @__PURE__ */ React126.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n64.__)("settings", "elementor") : (0, import_i18n64.__)("Email settings", "elementor")), /* @__PURE__ */ React126.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React126.createElement(SubjectField, null), /* @__PURE__ */ React126.createElement(MessageField, null), /* @__PURE__ */ React126.createElement(FromEmailField, null), /* @__PURE__ */ React126.createElement(AdvancedSettings, null)));
|
|
9532
9667
|
}
|
|
9533
9668
|
);
|
|
9534
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
9669
|
+
var AdvancedSettings = () => /* @__PURE__ */ React126.createElement(import_editor_ui17.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React126.createElement(import_ui109.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React126.createElement(import_ui109.Stack, { gap: 2 }, /* @__PURE__ */ React126.createElement(FromNameField, null), /* @__PURE__ */ React126.createElement(ReplyToField, null), /* @__PURE__ */ React126.createElement(CcField, null), /* @__PURE__ */ React126.createElement(BccField, null), /* @__PURE__ */ React126.createElement(import_ui109.Divider, null), /* @__PURE__ */ React126.createElement(MetaDataField, null), /* @__PURE__ */ React126.createElement(SendAsField, null))));
|
|
9535
9670
|
|
|
9536
9671
|
// src/controls/attachment-type-control.tsx
|
|
9537
|
-
var
|
|
9672
|
+
var React127 = __toESM(require("react"));
|
|
9538
9673
|
var import_editor_ui18 = require("@elementor/editor-ui");
|
|
9539
|
-
var
|
|
9540
|
-
var
|
|
9674
|
+
var import_ui110 = require("@elementor/ui");
|
|
9675
|
+
var import_i18n65 = require("@wordpress/i18n");
|
|
9541
9676
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
9542
|
-
return /* @__PURE__ */
|
|
9677
|
+
return /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(SelectControl, { options })), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(import_editor_ui18.InfoAlert, null, (0, import_i18n65.__)(
|
|
9543
9678
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
9544
9679
|
"elementor"
|
|
9545
9680
|
))));
|
|
9546
9681
|
});
|
|
9547
9682
|
|
|
9548
9683
|
// src/controls/grid-span-control.tsx
|
|
9549
|
-
var
|
|
9684
|
+
var React128 = __toESM(require("react"));
|
|
9550
9685
|
var import_editor_props69 = require("@elementor/editor-props");
|
|
9551
|
-
var
|
|
9686
|
+
var import_ui111 = require("@elementor/ui");
|
|
9552
9687
|
var GridSpanControl = createControl(
|
|
9553
9688
|
({
|
|
9554
9689
|
placeholder: propPlaceholder,
|
|
@@ -9565,8 +9700,8 @@ var GridSpanControl = createControl(
|
|
|
9565
9700
|
setValue(next === "" ? null : next);
|
|
9566
9701
|
};
|
|
9567
9702
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
|
|
9568
|
-
return /* @__PURE__ */
|
|
9569
|
-
|
|
9703
|
+
return /* @__PURE__ */ React128.createElement(ControlActions, null, /* @__PURE__ */ React128.createElement(
|
|
9704
|
+
import_ui111.TextField,
|
|
9570
9705
|
{
|
|
9571
9706
|
size: "tiny",
|
|
9572
9707
|
fullWidth: true,
|
|
@@ -9586,25 +9721,25 @@ var GridSpanControl = createControl(
|
|
|
9586
9721
|
);
|
|
9587
9722
|
|
|
9588
9723
|
// src/components/promotions/display-conditions-control.tsx
|
|
9589
|
-
var
|
|
9590
|
-
var
|
|
9591
|
-
var
|
|
9592
|
-
var
|
|
9593
|
-
var
|
|
9724
|
+
var React130 = __toESM(require("react"));
|
|
9725
|
+
var import_react76 = require("react");
|
|
9726
|
+
var import_icons41 = require("@elementor/icons");
|
|
9727
|
+
var import_ui113 = require("@elementor/ui");
|
|
9728
|
+
var import_i18n66 = require("@wordpress/i18n");
|
|
9594
9729
|
|
|
9595
9730
|
// src/components/promotions/promotion-trigger.tsx
|
|
9596
|
-
var
|
|
9597
|
-
var
|
|
9731
|
+
var React129 = __toESM(require("react"));
|
|
9732
|
+
var import_react75 = require("react");
|
|
9598
9733
|
var import_editor_ui19 = require("@elementor/editor-ui");
|
|
9599
|
-
var
|
|
9734
|
+
var import_ui112 = require("@elementor/ui");
|
|
9600
9735
|
function getV4Promotion(key) {
|
|
9601
9736
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
9602
9737
|
}
|
|
9603
|
-
var PromotionTrigger = (0,
|
|
9738
|
+
var PromotionTrigger = (0, import_react75.forwardRef)(
|
|
9604
9739
|
({ promotionKey, children, trackingData }, ref) => {
|
|
9605
|
-
const [isOpen, setIsOpen] = (0,
|
|
9740
|
+
const [isOpen, setIsOpen] = (0, import_react75.useState)(false);
|
|
9606
9741
|
const promotion = getV4Promotion(promotionKey);
|
|
9607
|
-
const toggle = (0,
|
|
9742
|
+
const toggle = (0, import_react75.useCallback)(() => {
|
|
9608
9743
|
setIsOpen((prev) => {
|
|
9609
9744
|
if (!prev) {
|
|
9610
9745
|
trackViewPromotion(trackingData);
|
|
@@ -9612,8 +9747,8 @@ var PromotionTrigger = (0, import_react74.forwardRef)(
|
|
|
9612
9747
|
return !prev;
|
|
9613
9748
|
});
|
|
9614
9749
|
}, [trackingData]);
|
|
9615
|
-
(0,
|
|
9616
|
-
return /* @__PURE__ */
|
|
9750
|
+
(0, import_react75.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
|
|
9751
|
+
return /* @__PURE__ */ React129.createElement(React129.Fragment, null, promotion && /* @__PURE__ */ React129.createElement(
|
|
9617
9752
|
import_editor_ui19.PromotionInfotip,
|
|
9618
9753
|
{
|
|
9619
9754
|
title: promotion.title,
|
|
@@ -9627,8 +9762,8 @@ var PromotionTrigger = (0, import_react74.forwardRef)(
|
|
|
9627
9762
|
},
|
|
9628
9763
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
9629
9764
|
},
|
|
9630
|
-
/* @__PURE__ */
|
|
9631
|
-
|
|
9765
|
+
/* @__PURE__ */ React129.createElement(
|
|
9766
|
+
import_ui112.Box,
|
|
9632
9767
|
{
|
|
9633
9768
|
onClick: (e) => {
|
|
9634
9769
|
e.stopPropagation();
|
|
@@ -9636,19 +9771,19 @@ var PromotionTrigger = (0, import_react74.forwardRef)(
|
|
|
9636
9771
|
},
|
|
9637
9772
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
9638
9773
|
},
|
|
9639
|
-
children ?? /* @__PURE__ */
|
|
9774
|
+
children ?? /* @__PURE__ */ React129.createElement(import_editor_ui19.PromotionChip, null)
|
|
9640
9775
|
)
|
|
9641
9776
|
));
|
|
9642
9777
|
}
|
|
9643
9778
|
);
|
|
9644
9779
|
|
|
9645
9780
|
// src/components/promotions/display-conditions-control.tsx
|
|
9646
|
-
var ARIA_LABEL = (0,
|
|
9781
|
+
var ARIA_LABEL = (0, import_i18n66.__)("Display Conditions", "elementor");
|
|
9647
9782
|
var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
|
|
9648
9783
|
var DisplayConditionsControl = createControl(() => {
|
|
9649
|
-
const triggerRef = (0,
|
|
9650
|
-
return /* @__PURE__ */
|
|
9651
|
-
|
|
9784
|
+
const triggerRef = (0, import_react76.useRef)(null);
|
|
9785
|
+
return /* @__PURE__ */ React130.createElement(
|
|
9786
|
+
import_ui113.Stack,
|
|
9652
9787
|
{
|
|
9653
9788
|
direction: "row",
|
|
9654
9789
|
spacing: 2,
|
|
@@ -9657,9 +9792,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
9657
9792
|
alignItems: "center"
|
|
9658
9793
|
}
|
|
9659
9794
|
},
|
|
9660
|
-
/* @__PURE__ */
|
|
9661
|
-
/* @__PURE__ */
|
|
9662
|
-
|
|
9795
|
+
/* @__PURE__ */ React130.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
|
|
9796
|
+
/* @__PURE__ */ React130.createElement(import_ui113.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React130.createElement(
|
|
9797
|
+
import_ui113.IconButton,
|
|
9663
9798
|
{
|
|
9664
9799
|
size: "tiny",
|
|
9665
9800
|
"aria-label": ARIA_LABEL,
|
|
@@ -9671,23 +9806,23 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
9671
9806
|
borderRadius: 1
|
|
9672
9807
|
}
|
|
9673
9808
|
},
|
|
9674
|
-
/* @__PURE__ */
|
|
9809
|
+
/* @__PURE__ */ React130.createElement(import_icons41.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
9675
9810
|
))
|
|
9676
9811
|
);
|
|
9677
9812
|
});
|
|
9678
9813
|
|
|
9679
9814
|
// src/components/promotions/attributes-control.tsx
|
|
9680
|
-
var
|
|
9681
|
-
var
|
|
9682
|
-
var
|
|
9683
|
-
var
|
|
9684
|
-
var
|
|
9685
|
-
var ARIA_LABEL2 = (0,
|
|
9815
|
+
var React131 = __toESM(require("react"));
|
|
9816
|
+
var import_react77 = require("react");
|
|
9817
|
+
var import_icons42 = require("@elementor/icons");
|
|
9818
|
+
var import_ui114 = require("@elementor/ui");
|
|
9819
|
+
var import_i18n67 = require("@wordpress/i18n");
|
|
9820
|
+
var ARIA_LABEL2 = (0, import_i18n67.__)("Attributes", "elementor");
|
|
9686
9821
|
var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
|
|
9687
9822
|
var AttributesControl = createControl(() => {
|
|
9688
|
-
const triggerRef = (0,
|
|
9689
|
-
return /* @__PURE__ */
|
|
9690
|
-
|
|
9823
|
+
const triggerRef = (0, import_react77.useRef)(null);
|
|
9824
|
+
return /* @__PURE__ */ React131.createElement(
|
|
9825
|
+
import_ui114.Stack,
|
|
9691
9826
|
{
|
|
9692
9827
|
direction: "row",
|
|
9693
9828
|
spacing: 2,
|
|
@@ -9696,9 +9831,9 @@ var AttributesControl = createControl(() => {
|
|
|
9696
9831
|
alignItems: "center"
|
|
9697
9832
|
}
|
|
9698
9833
|
},
|
|
9699
|
-
/* @__PURE__ */
|
|
9700
|
-
/* @__PURE__ */
|
|
9701
|
-
|
|
9834
|
+
/* @__PURE__ */ React131.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
|
|
9835
|
+
/* @__PURE__ */ React131.createElement(import_ui114.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React131.createElement(
|
|
9836
|
+
import_icons42.PlusIcon,
|
|
9702
9837
|
{
|
|
9703
9838
|
"aria-label": ARIA_LABEL2,
|
|
9704
9839
|
fontSize: "tiny",
|
|
@@ -9711,21 +9846,21 @@ var AttributesControl = createControl(() => {
|
|
|
9711
9846
|
});
|
|
9712
9847
|
|
|
9713
9848
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
9714
|
-
var
|
|
9715
|
-
var
|
|
9716
|
-
var
|
|
9717
|
-
var CustomIconButton = (0,
|
|
9849
|
+
var React132 = __toESM(require("react"));
|
|
9850
|
+
var import_icons43 = require("@elementor/icons");
|
|
9851
|
+
var import_ui115 = require("@elementor/ui");
|
|
9852
|
+
var CustomIconButton = (0, import_ui115.styled)(import_ui115.IconButton)(({ theme }) => ({
|
|
9718
9853
|
width: theme.spacing(2.5),
|
|
9719
9854
|
height: theme.spacing(2.5)
|
|
9720
9855
|
}));
|
|
9721
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
9856
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React132.createElement(import_ui115.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React132.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React132.createElement(import_icons43.BrushBigIcon, { fontSize: size })));
|
|
9722
9857
|
|
|
9723
9858
|
// src/components/repeater/repeater.tsx
|
|
9724
|
-
var
|
|
9725
|
-
var
|
|
9726
|
-
var
|
|
9727
|
-
var
|
|
9728
|
-
var
|
|
9859
|
+
var React133 = __toESM(require("react"));
|
|
9860
|
+
var import_react78 = require("react");
|
|
9861
|
+
var import_icons44 = require("@elementor/icons");
|
|
9862
|
+
var import_ui116 = require("@elementor/ui");
|
|
9863
|
+
var import_i18n68 = require("@wordpress/i18n");
|
|
9729
9864
|
var SIZE12 = "tiny";
|
|
9730
9865
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
9731
9866
|
var Repeater3 = ({
|
|
@@ -9744,7 +9879,7 @@ var Repeater3 = ({
|
|
|
9744
9879
|
isSortable = true,
|
|
9745
9880
|
adornment = ControlAdornments
|
|
9746
9881
|
}) => {
|
|
9747
|
-
const [openItem, setOpenItem] = (0,
|
|
9882
|
+
const [openItem, setOpenItem] = (0, import_react78.useState)(initialOpenItem);
|
|
9748
9883
|
const uniqueKeys = items2.map(
|
|
9749
9884
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
9750
9885
|
);
|
|
@@ -9807,8 +9942,8 @@ var Repeater3 = ({
|
|
|
9807
9942
|
};
|
|
9808
9943
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
9809
9944
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
9810
|
-
const addButton = /* @__PURE__ */
|
|
9811
|
-
|
|
9945
|
+
const addButton = /* @__PURE__ */ React133.createElement(
|
|
9946
|
+
import_ui116.IconButton,
|
|
9812
9947
|
{
|
|
9813
9948
|
size: SIZE12,
|
|
9814
9949
|
sx: {
|
|
@@ -9816,32 +9951,32 @@ var Repeater3 = ({
|
|
|
9816
9951
|
},
|
|
9817
9952
|
disabled: isButtonDisabled,
|
|
9818
9953
|
onClick: addRepeaterItem,
|
|
9819
|
-
"aria-label": (0,
|
|
9954
|
+
"aria-label": (0, import_i18n68.__)("Add item", "elementor")
|
|
9820
9955
|
},
|
|
9821
|
-
/* @__PURE__ */
|
|
9956
|
+
/* @__PURE__ */ React133.createElement(import_icons44.PlusIcon, { fontSize: SIZE12 })
|
|
9822
9957
|
);
|
|
9823
|
-
return /* @__PURE__ */
|
|
9824
|
-
|
|
9958
|
+
return /* @__PURE__ */ React133.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React133.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React133.createElement(
|
|
9959
|
+
import_ui116.Infotip,
|
|
9825
9960
|
{
|
|
9826
9961
|
placement: "right",
|
|
9827
9962
|
content: addButtonInfotipContent,
|
|
9828
9963
|
color: "secondary",
|
|
9829
9964
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
9830
9965
|
},
|
|
9831
|
-
/* @__PURE__ */
|
|
9832
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
9966
|
+
/* @__PURE__ */ React133.createElement(import_ui116.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
9967
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React133.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
9833
9968
|
const index = uniqueKeys.indexOf(key);
|
|
9834
9969
|
const value = items2[index];
|
|
9835
9970
|
if (!value) {
|
|
9836
9971
|
return null;
|
|
9837
9972
|
}
|
|
9838
|
-
return /* @__PURE__ */
|
|
9973
|
+
return /* @__PURE__ */ React133.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React133.createElement(
|
|
9839
9974
|
RepeaterItem,
|
|
9840
9975
|
{
|
|
9841
9976
|
disabled,
|
|
9842
9977
|
propDisabled: value?.disabled,
|
|
9843
|
-
label: /* @__PURE__ */
|
|
9844
|
-
startIcon: /* @__PURE__ */
|
|
9978
|
+
label: /* @__PURE__ */ React133.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React133.createElement(itemSettings.Label, { value, index })),
|
|
9979
|
+
startIcon: /* @__PURE__ */ React133.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React133.createElement(itemSettings.Icon, { value })),
|
|
9845
9980
|
removeItem: () => removeRepeaterItem(index),
|
|
9846
9981
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
9847
9982
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -9855,7 +9990,7 @@ var Repeater3 = ({
|
|
|
9855
9990
|
actions: itemSettings.actions,
|
|
9856
9991
|
value
|
|
9857
9992
|
},
|
|
9858
|
-
(props) => /* @__PURE__ */
|
|
9993
|
+
(props) => /* @__PURE__ */ React133.createElement(
|
|
9859
9994
|
itemSettings.Content,
|
|
9860
9995
|
{
|
|
9861
9996
|
...props,
|
|
@@ -9895,18 +10030,18 @@ var RepeaterItem = ({
|
|
|
9895
10030
|
},
|
|
9896
10031
|
wrappedOnPopoverClose
|
|
9897
10032
|
);
|
|
9898
|
-
const triggerProps = (0,
|
|
10033
|
+
const triggerProps = (0, import_ui116.bindTrigger)(popoverState);
|
|
9899
10034
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
9900
|
-
const duplicateLabel = (0,
|
|
9901
|
-
const toggleLabel = propDisabled ? (0,
|
|
9902
|
-
const removeLabel = (0,
|
|
9903
|
-
return /* @__PURE__ */
|
|
10035
|
+
const duplicateLabel = (0, import_i18n68.__)("Duplicate", "elementor");
|
|
10036
|
+
const toggleLabel = propDisabled ? (0, import_i18n68.__)("Show", "elementor") : (0, import_i18n68.__)("Hide", "elementor");
|
|
10037
|
+
const removeLabel = (0, import_i18n68.__)("Remove", "elementor");
|
|
10038
|
+
return /* @__PURE__ */ React133.createElement(import_ui116.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React133.createElement(
|
|
9904
10039
|
RepeaterTag,
|
|
9905
10040
|
{
|
|
9906
10041
|
disabled,
|
|
9907
10042
|
label,
|
|
9908
10043
|
ref: setRef,
|
|
9909
|
-
"aria-label": (0,
|
|
10044
|
+
"aria-label": (0, import_i18n68.__)("Open item", "elementor"),
|
|
9910
10045
|
...triggerProps,
|
|
9911
10046
|
onClick: (e) => {
|
|
9912
10047
|
triggerProps.onClick(e);
|
|
@@ -9915,15 +10050,15 @@ var RepeaterItem = ({
|
|
|
9915
10050
|
}
|
|
9916
10051
|
},
|
|
9917
10052
|
startIcon,
|
|
9918
|
-
actions: /* @__PURE__ */
|
|
10053
|
+
actions: /* @__PURE__ */ React133.createElement(React133.Fragment, null, showDuplicate && /* @__PURE__ */ React133.createElement(import_ui116.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React133.createElement(import_ui116.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React133.createElement(import_icons44.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React133.createElement(import_ui116.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React133.createElement(import_ui116.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React133.createElement(import_icons44.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React133.createElement(import_icons44.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React133.createElement(import_ui116.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React133.createElement(import_ui116.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React133.createElement(import_icons44.XIcon, { fontSize: SIZE12 }))))
|
|
9919
10054
|
}
|
|
9920
|
-
), /* @__PURE__ */
|
|
10055
|
+
), /* @__PURE__ */ React133.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React133.createElement(import_ui116.Box, null, children({ anchorEl: ref }))));
|
|
9921
10056
|
};
|
|
9922
10057
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
9923
|
-
const [ref, setRef] = (0,
|
|
9924
|
-
const popoverState = (0,
|
|
9925
|
-
const popoverProps = (0,
|
|
9926
|
-
(0,
|
|
10058
|
+
const [ref, setRef] = (0, import_react78.useState)(null);
|
|
10059
|
+
const popoverState = (0, import_ui116.usePopupState)({ variant: "popover" });
|
|
10060
|
+
const popoverProps = (0, import_ui116.bindPopover)(popoverState);
|
|
10061
|
+
(0, import_react78.useEffect)(() => {
|
|
9927
10062
|
if (openOnMount && ref) {
|
|
9928
10063
|
popoverState.open(ref);
|
|
9929
10064
|
onOpen?.();
|
|
@@ -9942,8 +10077,8 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
9942
10077
|
};
|
|
9943
10078
|
|
|
9944
10079
|
// src/components/size/unstable-size-field.tsx
|
|
9945
|
-
var
|
|
9946
|
-
var
|
|
10080
|
+
var React136 = __toESM(require("react"));
|
|
10081
|
+
var import_ui118 = require("@elementor/ui");
|
|
9947
10082
|
|
|
9948
10083
|
// src/hooks/use-size-value.ts
|
|
9949
10084
|
var DEFAULT_UNIT2 = "px";
|
|
@@ -9985,25 +10120,25 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
9985
10120
|
};
|
|
9986
10121
|
|
|
9987
10122
|
// src/components/size/unit-select.tsx
|
|
9988
|
-
var
|
|
9989
|
-
var
|
|
10123
|
+
var React134 = __toESM(require("react"));
|
|
10124
|
+
var import_react79 = require("react");
|
|
9990
10125
|
var import_editor_ui20 = require("@elementor/editor-ui");
|
|
9991
|
-
var
|
|
10126
|
+
var import_ui117 = require("@elementor/ui");
|
|
9992
10127
|
var menuItemContentStyles2 = {
|
|
9993
10128
|
display: "flex",
|
|
9994
10129
|
flexDirection: "column",
|
|
9995
10130
|
justifyContent: "center"
|
|
9996
10131
|
};
|
|
9997
10132
|
var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
9998
|
-
const popupState = (0,
|
|
10133
|
+
const popupState = (0, import_ui117.usePopupState)({
|
|
9999
10134
|
variant: "popover",
|
|
10000
|
-
popupId: (0,
|
|
10135
|
+
popupId: (0, import_react79.useId)()
|
|
10001
10136
|
});
|
|
10002
10137
|
const handleMenuItemClick = (index) => {
|
|
10003
10138
|
onClick(options[index]);
|
|
10004
10139
|
popupState.close();
|
|
10005
10140
|
};
|
|
10006
|
-
return /* @__PURE__ */
|
|
10141
|
+
return /* @__PURE__ */ React134.createElement(React134.Fragment, null, /* @__PURE__ */ React134.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui117.bindTrigger)(popupState) }, value), /* @__PURE__ */ React134.createElement(import_ui117.Menu, { MenuListProps: { dense: true }, ...(0, import_ui117.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React134.createElement(
|
|
10007
10142
|
import_editor_ui20.MenuListItem,
|
|
10008
10143
|
{
|
|
10009
10144
|
key: option,
|
|
@@ -10022,7 +10157,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
10022
10157
|
option.toUpperCase()
|
|
10023
10158
|
))));
|
|
10024
10159
|
};
|
|
10025
|
-
var StyledButton3 = (0,
|
|
10160
|
+
var StyledButton3 = (0, import_ui117.styled)(import_ui117.Button, {
|
|
10026
10161
|
shouldForwardProp: (prop) => prop !== "isPrimaryColor"
|
|
10027
10162
|
})(({ isPrimaryColor, theme }) => ({
|
|
10028
10163
|
color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
|
|
@@ -10032,11 +10167,11 @@ var StyledButton3 = (0, import_ui116.styled)(import_ui116.Button, {
|
|
|
10032
10167
|
}));
|
|
10033
10168
|
|
|
10034
10169
|
// src/components/size/unstable-size-input.tsx
|
|
10035
|
-
var
|
|
10036
|
-
var
|
|
10037
|
-
var UnstableSizeInput = (0,
|
|
10170
|
+
var React135 = __toESM(require("react"));
|
|
10171
|
+
var import_react80 = require("react");
|
|
10172
|
+
var UnstableSizeInput = (0, import_react80.forwardRef)(
|
|
10038
10173
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
10039
|
-
return /* @__PURE__ */
|
|
10174
|
+
return /* @__PURE__ */ React135.createElement(
|
|
10040
10175
|
NumberInput,
|
|
10041
10176
|
{
|
|
10042
10177
|
ref,
|
|
@@ -10074,7 +10209,7 @@ var UnstableSizeField = ({
|
|
|
10074
10209
|
const shouldHighlightUnit2 = () => {
|
|
10075
10210
|
return hasValue(size);
|
|
10076
10211
|
};
|
|
10077
|
-
return /* @__PURE__ */
|
|
10212
|
+
return /* @__PURE__ */ React136.createElement(
|
|
10078
10213
|
UnstableSizeInput,
|
|
10079
10214
|
{
|
|
10080
10215
|
type: "number",
|
|
@@ -10083,8 +10218,8 @@ var UnstableSizeField = ({
|
|
|
10083
10218
|
onChange: (event) => setSize(event.target.value),
|
|
10084
10219
|
InputProps: {
|
|
10085
10220
|
...InputProps,
|
|
10086
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
10087
|
-
endAdornment: /* @__PURE__ */
|
|
10221
|
+
startAdornment: startIcon && /* @__PURE__ */ React136.createElement(import_ui118.InputAdornment, { position: "start" }, startIcon),
|
|
10222
|
+
endAdornment: /* @__PURE__ */ React136.createElement(import_ui118.InputAdornment, { position: "end" }, /* @__PURE__ */ React136.createElement(
|
|
10088
10223
|
UnitSelect,
|
|
10089
10224
|
{
|
|
10090
10225
|
options: units2,
|
|
@@ -10102,7 +10237,7 @@ var hasValue = (value) => {
|
|
|
10102
10237
|
};
|
|
10103
10238
|
|
|
10104
10239
|
// src/hooks/use-font-families.ts
|
|
10105
|
-
var
|
|
10240
|
+
var import_react81 = require("react");
|
|
10106
10241
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
10107
10242
|
var getFontControlConfig = () => {
|
|
10108
10243
|
const { controls } = (0, import_editor_v1_adapters3.getElementorConfig)();
|
|
@@ -10110,7 +10245,7 @@ var getFontControlConfig = () => {
|
|
|
10110
10245
|
};
|
|
10111
10246
|
var useFontFamilies = () => {
|
|
10112
10247
|
const { groups, options } = getFontControlConfig();
|
|
10113
|
-
return (0,
|
|
10248
|
+
return (0, import_react81.useMemo)(() => {
|
|
10114
10249
|
if (!groups || !options) {
|
|
10115
10250
|
return [];
|
|
10116
10251
|
}
|