@elementor/editor-controls 0.34.2 → 0.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/index.js +247 -231
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +201 -190
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/font-family-selector.tsx +284 -0
- package/src/controls/aspect-ratio-control.tsx +51 -48
- package/src/controls/font-family-control/font-family-control.tsx +9 -272
package/dist/index.js
CHANGED
|
@@ -1695,15 +1695,26 @@ var Label = ({ label, bind }) => {
|
|
|
1695
1695
|
};
|
|
1696
1696
|
|
|
1697
1697
|
// src/controls/font-family-control/font-family-control.tsx
|
|
1698
|
-
var
|
|
1699
|
-
var import_react13 = require("react");
|
|
1698
|
+
var React33 = __toESM(require("react"));
|
|
1700
1699
|
var import_editor_props14 = require("@elementor/editor-props");
|
|
1700
|
+
var import_icons7 = require("@elementor/icons");
|
|
1701
|
+
var import_ui26 = require("@elementor/ui");
|
|
1702
|
+
|
|
1703
|
+
// src/components/font-family-selector.tsx
|
|
1704
|
+
var import_react13 = require("react");
|
|
1705
|
+
var React32 = __toESM(require("react"));
|
|
1701
1706
|
var import_icons6 = require("@elementor/icons");
|
|
1702
1707
|
var import_ui25 = require("@elementor/ui");
|
|
1703
1708
|
var import_utils2 = require("@elementor/utils");
|
|
1704
1709
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
1705
1710
|
var import_i18n8 = require("@wordpress/i18n");
|
|
1706
1711
|
|
|
1712
|
+
// src/controls/font-family-control/enqueue-font.tsx
|
|
1713
|
+
var enqueueFont = (fontFamily, context = "editor") => {
|
|
1714
|
+
const extendedWindow = window;
|
|
1715
|
+
return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
|
|
1716
|
+
};
|
|
1717
|
+
|
|
1707
1718
|
// src/hooks/use-filtered-font-families.ts
|
|
1708
1719
|
var useFilteredFontFamilies = (fontFamilies, searchValue) => {
|
|
1709
1720
|
return fontFamilies.reduce((acc, category) => {
|
|
@@ -1720,98 +1731,69 @@ var useFilteredFontFamilies = (fontFamilies, searchValue) => {
|
|
|
1720
1731
|
}, []);
|
|
1721
1732
|
};
|
|
1722
1733
|
|
|
1723
|
-
// src/
|
|
1724
|
-
var enqueueFont = (fontFamily, context = "editor") => {
|
|
1725
|
-
const extendedWindow = window;
|
|
1726
|
-
return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
|
|
1727
|
-
};
|
|
1728
|
-
|
|
1729
|
-
// src/controls/font-family-control/font-family-control.tsx
|
|
1734
|
+
// src/components/font-family-selector.tsx
|
|
1730
1735
|
var SIZE2 = "tiny";
|
|
1731
|
-
var
|
|
1736
|
+
var FontFamilySelector = ({
|
|
1737
|
+
fontFamilies,
|
|
1738
|
+
fontFamily,
|
|
1739
|
+
onFontFamilyChange,
|
|
1740
|
+
onClose
|
|
1741
|
+
}) => {
|
|
1732
1742
|
const [searchValue, setSearchValue] = (0, import_react13.useState)("");
|
|
1733
|
-
const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(import_editor_props14.stringPropTypeUtil);
|
|
1734
|
-
const popoverState = (0, import_ui25.usePopupState)({ variant: "popover" });
|
|
1735
1743
|
const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
|
|
1736
1744
|
const handleSearch = (event) => {
|
|
1737
1745
|
setSearchValue(event.target.value);
|
|
1738
1746
|
};
|
|
1739
1747
|
const handleClose = () => {
|
|
1740
1748
|
setSearchValue("");
|
|
1741
|
-
|
|
1749
|
+
onClose();
|
|
1742
1750
|
};
|
|
1743
|
-
return /* @__PURE__ */ React32.createElement(
|
|
1744
|
-
import_ui25.
|
|
1751
|
+
return /* @__PURE__ */ React32.createElement(import_ui25.Stack, null, /* @__PURE__ */ React32.createElement(import_ui25.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React32.createElement(import_icons6.TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React32.createElement(import_ui25.Typography, { variant: "subtitle2" }, (0, import_i18n8.__)("Font Family", "elementor")), /* @__PURE__ */ React32.createElement(import_ui25.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React32.createElement(import_icons6.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React32.createElement(import_ui25.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React32.createElement(
|
|
1752
|
+
import_ui25.TextField,
|
|
1745
1753
|
{
|
|
1746
|
-
|
|
1747
|
-
label: fontFamily,
|
|
1748
|
-
endIcon: /* @__PURE__ */ React32.createElement(import_icons6.ChevronDownIcon, { fontSize: "tiny" }),
|
|
1749
|
-
...(0, import_ui25.bindTrigger)(popoverState),
|
|
1754
|
+
autoFocus: true,
|
|
1750
1755
|
fullWidth: true,
|
|
1751
|
-
|
|
1756
|
+
size: SIZE2,
|
|
1757
|
+
value: searchValue,
|
|
1758
|
+
placeholder: (0, import_i18n8.__)("Search", "elementor"),
|
|
1759
|
+
onChange: handleSearch,
|
|
1760
|
+
InputProps: {
|
|
1761
|
+
startAdornment: /* @__PURE__ */ React32.createElement(import_ui25.InputAdornment, { position: "start" }, /* @__PURE__ */ React32.createElement(import_icons6.SearchIcon, { fontSize: SIZE2 }))
|
|
1762
|
+
}
|
|
1752
1763
|
}
|
|
1753
|
-
)), /* @__PURE__ */ React32.createElement(
|
|
1754
|
-
|
|
1764
|
+
)), /* @__PURE__ */ React32.createElement(import_ui25.Divider, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React32.createElement(
|
|
1765
|
+
FontList,
|
|
1755
1766
|
{
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
onChange: handleSearch,
|
|
1771
|
-
InputProps: {
|
|
1772
|
-
startAdornment: /* @__PURE__ */ React32.createElement(import_ui25.InputAdornment, { position: "start" }, /* @__PURE__ */ React32.createElement(import_icons6.SearchIcon, { fontSize: SIZE2 }))
|
|
1773
|
-
}
|
|
1774
|
-
}
|
|
1775
|
-
)), /* @__PURE__ */ React32.createElement(import_ui25.Divider, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React32.createElement(
|
|
1776
|
-
FontList,
|
|
1777
|
-
{
|
|
1778
|
-
fontListItems: filteredFontFamilies,
|
|
1779
|
-
setFontFamily,
|
|
1780
|
-
handleClose,
|
|
1781
|
-
fontFamily
|
|
1767
|
+
fontListItems: filteredFontFamilies,
|
|
1768
|
+
setFontFamily: onFontFamilyChange,
|
|
1769
|
+
handleClose,
|
|
1770
|
+
fontFamily
|
|
1771
|
+
}
|
|
1772
|
+
) : /* @__PURE__ */ React32.createElement(import_ui25.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React32.createElement(import_ui25.Stack, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React32.createElement(import_icons6.TextIcon, { fontSize: "large" }), /* @__PURE__ */ React32.createElement(import_ui25.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React32.createElement(import_ui25.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React32.createElement(
|
|
1773
|
+
import_ui25.Typography,
|
|
1774
|
+
{
|
|
1775
|
+
variant: "subtitle2",
|
|
1776
|
+
color: "text.secondary",
|
|
1777
|
+
sx: {
|
|
1778
|
+
display: "flex",
|
|
1779
|
+
width: "100%",
|
|
1780
|
+
justifyContent: "center"
|
|
1782
1781
|
}
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
|
|
1799
|
-
},
|
|
1800
|
-
searchValue
|
|
1801
|
-
),
|
|
1802
|
-
/* @__PURE__ */ React32.createElement("span", null, "\u201D.")
|
|
1803
|
-
)), /* @__PURE__ */ React32.createElement(import_ui25.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React32.createElement(
|
|
1804
|
-
import_ui25.Link,
|
|
1805
|
-
{
|
|
1806
|
-
color: "secondary",
|
|
1807
|
-
variant: "caption",
|
|
1808
|
-
component: "button",
|
|
1809
|
-
onClick: () => setSearchValue("")
|
|
1810
|
-
},
|
|
1811
|
-
(0, import_i18n8.__)("Clear & try again", "elementor")
|
|
1812
|
-
)))))
|
|
1813
|
-
));
|
|
1814
|
-
});
|
|
1782
|
+
},
|
|
1783
|
+
/* @__PURE__ */ React32.createElement("span", null, "\u201C"),
|
|
1784
|
+
/* @__PURE__ */ React32.createElement("span", { style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" } }, searchValue),
|
|
1785
|
+
/* @__PURE__ */ React32.createElement("span", null, "\u201D.")
|
|
1786
|
+
)), /* @__PURE__ */ React32.createElement(import_ui25.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React32.createElement(
|
|
1787
|
+
import_ui25.Link,
|
|
1788
|
+
{
|
|
1789
|
+
color: "secondary",
|
|
1790
|
+
variant: "caption",
|
|
1791
|
+
component: "button",
|
|
1792
|
+
onClick: () => setSearchValue("")
|
|
1793
|
+
},
|
|
1794
|
+
(0, import_i18n8.__)("Clear & try again", "elementor")
|
|
1795
|
+
)))));
|
|
1796
|
+
};
|
|
1815
1797
|
var LIST_ITEM_HEIGHT = 36;
|
|
1816
1798
|
var LIST_ITEMS_BUFFER = 6;
|
|
1817
1799
|
var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
|
|
@@ -1945,15 +1927,49 @@ var useDebounce = (fn, delay) => {
|
|
|
1945
1927
|
return debouncedFn;
|
|
1946
1928
|
};
|
|
1947
1929
|
|
|
1930
|
+
// src/controls/font-family-control/font-family-control.tsx
|
|
1931
|
+
var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
1932
|
+
const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(import_editor_props14.stringPropTypeUtil);
|
|
1933
|
+
const popoverState = (0, import_ui26.usePopupState)({ variant: "popover" });
|
|
1934
|
+
return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(
|
|
1935
|
+
import_ui26.UnstableTag,
|
|
1936
|
+
{
|
|
1937
|
+
variant: "outlined",
|
|
1938
|
+
label: fontFamily,
|
|
1939
|
+
endIcon: /* @__PURE__ */ React33.createElement(import_icons7.ChevronDownIcon, { fontSize: "tiny" }),
|
|
1940
|
+
...(0, import_ui26.bindTrigger)(popoverState),
|
|
1941
|
+
fullWidth: true,
|
|
1942
|
+
disabled
|
|
1943
|
+
}
|
|
1944
|
+
)), /* @__PURE__ */ React33.createElement(
|
|
1945
|
+
import_ui26.Popover,
|
|
1946
|
+
{
|
|
1947
|
+
disablePortal: true,
|
|
1948
|
+
disableScrollLock: true,
|
|
1949
|
+
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
1950
|
+
...(0, import_ui26.bindPopover)(popoverState)
|
|
1951
|
+
},
|
|
1952
|
+
/* @__PURE__ */ React33.createElement(
|
|
1953
|
+
FontFamilySelector,
|
|
1954
|
+
{
|
|
1955
|
+
fontFamilies,
|
|
1956
|
+
fontFamily,
|
|
1957
|
+
onFontFamilyChange: setFontFamily,
|
|
1958
|
+
onClose: popoverState.close
|
|
1959
|
+
}
|
|
1960
|
+
)
|
|
1961
|
+
));
|
|
1962
|
+
});
|
|
1963
|
+
|
|
1948
1964
|
// src/controls/url-control.tsx
|
|
1949
|
-
var
|
|
1965
|
+
var React34 = __toESM(require("react"));
|
|
1950
1966
|
var import_editor_props15 = require("@elementor/editor-props");
|
|
1951
|
-
var
|
|
1967
|
+
var import_ui27 = require("@elementor/ui");
|
|
1952
1968
|
var UrlControl = createControl(({ placeholder }) => {
|
|
1953
1969
|
const { value, setValue, disabled } = useBoundProp(import_editor_props15.urlPropTypeUtil);
|
|
1954
1970
|
const handleChange = (event) => setValue(event.target.value);
|
|
1955
|
-
return /* @__PURE__ */
|
|
1956
|
-
|
|
1971
|
+
return /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
|
|
1972
|
+
import_ui27.TextField,
|
|
1957
1973
|
{
|
|
1958
1974
|
size: "tiny",
|
|
1959
1975
|
fullWidth: true,
|
|
@@ -1966,23 +1982,23 @@ var UrlControl = createControl(({ placeholder }) => {
|
|
|
1966
1982
|
});
|
|
1967
1983
|
|
|
1968
1984
|
// src/controls/link-control.tsx
|
|
1969
|
-
var
|
|
1985
|
+
var React36 = __toESM(require("react"));
|
|
1970
1986
|
var import_react15 = require("react");
|
|
1971
1987
|
var import_editor_elements = require("@elementor/editor-elements");
|
|
1972
1988
|
var import_editor_props16 = require("@elementor/editor-props");
|
|
1973
1989
|
var import_editor_ui3 = require("@elementor/editor-ui");
|
|
1974
1990
|
var import_http_client2 = require("@elementor/http-client");
|
|
1975
|
-
var
|
|
1991
|
+
var import_icons9 = require("@elementor/icons");
|
|
1976
1992
|
var import_session = require("@elementor/session");
|
|
1977
|
-
var
|
|
1993
|
+
var import_ui29 = require("@elementor/ui");
|
|
1978
1994
|
var import_utils3 = require("@elementor/utils");
|
|
1979
1995
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1980
1996
|
|
|
1981
1997
|
// src/components/autocomplete.tsx
|
|
1982
|
-
var
|
|
1998
|
+
var React35 = __toESM(require("react"));
|
|
1983
1999
|
var import_react14 = require("react");
|
|
1984
|
-
var
|
|
1985
|
-
var
|
|
2000
|
+
var import_icons8 = require("@elementor/icons");
|
|
2001
|
+
var import_ui28 = require("@elementor/ui");
|
|
1986
2002
|
var Autocomplete = (0, import_react14.forwardRef)((props, ref) => {
|
|
1987
2003
|
const {
|
|
1988
2004
|
options,
|
|
@@ -1999,8 +2015,8 @@ var Autocomplete = (0, import_react14.forwardRef)((props, ref) => {
|
|
|
1999
2015
|
const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
|
|
2000
2016
|
const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
|
|
2001
2017
|
const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
|
|
2002
|
-
return /* @__PURE__ */
|
|
2003
|
-
|
|
2018
|
+
return /* @__PURE__ */ React35.createElement(
|
|
2019
|
+
import_ui28.Autocomplete,
|
|
2004
2020
|
{
|
|
2005
2021
|
...restProps,
|
|
2006
2022
|
ref,
|
|
@@ -2017,8 +2033,8 @@ var Autocomplete = (0, import_react14.forwardRef)((props, ref) => {
|
|
|
2017
2033
|
groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
|
|
2018
2034
|
isOptionEqualToValue,
|
|
2019
2035
|
filterOptions: () => optionKeys,
|
|
2020
|
-
renderOption: (optionProps, optionId) => /* @__PURE__ */
|
|
2021
|
-
renderInput: (params) => /* @__PURE__ */
|
|
2036
|
+
renderOption: (optionProps, optionId) => /* @__PURE__ */ React35.createElement(import_ui28.Box, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
|
|
2037
|
+
renderInput: (params) => /* @__PURE__ */ React35.createElement(
|
|
2022
2038
|
TextInput,
|
|
2023
2039
|
{
|
|
2024
2040
|
params,
|
|
@@ -2041,8 +2057,8 @@ var TextInput = ({
|
|
|
2041
2057
|
const onChange = (event) => {
|
|
2042
2058
|
handleChange(event.target.value);
|
|
2043
2059
|
};
|
|
2044
|
-
return /* @__PURE__ */
|
|
2045
|
-
|
|
2060
|
+
return /* @__PURE__ */ React35.createElement(
|
|
2061
|
+
import_ui28.TextField,
|
|
2046
2062
|
{
|
|
2047
2063
|
...params,
|
|
2048
2064
|
placeholder,
|
|
@@ -2054,7 +2070,7 @@ var TextInput = ({
|
|
|
2054
2070
|
},
|
|
2055
2071
|
InputProps: {
|
|
2056
2072
|
...params.InputProps,
|
|
2057
|
-
endAdornment: /* @__PURE__ */
|
|
2073
|
+
endAdornment: /* @__PURE__ */ React35.createElement(ClearButton, { params, allowClear, handleChange })
|
|
2058
2074
|
}
|
|
2059
2075
|
}
|
|
2060
2076
|
);
|
|
@@ -2063,7 +2079,7 @@ var ClearButton = ({
|
|
|
2063
2079
|
allowClear,
|
|
2064
2080
|
handleChange,
|
|
2065
2081
|
params
|
|
2066
|
-
}) => /* @__PURE__ */
|
|
2082
|
+
}) => /* @__PURE__ */ React35.createElement(import_ui28.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React35.createElement(import_ui28.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React35.createElement(import_icons8.XIcon, { fontSize: params.size })));
|
|
2067
2083
|
function findMatchingOption(options, optionId = null) {
|
|
2068
2084
|
const formattedOption = (optionId || "").toString();
|
|
2069
2085
|
return options.find(({ id }) => formattedOption === id.toString());
|
|
@@ -2162,8 +2178,8 @@ var LinkControl = createControl((props) => {
|
|
|
2162
2178
|
),
|
|
2163
2179
|
[endpoint]
|
|
2164
2180
|
);
|
|
2165
|
-
return /* @__PURE__ */
|
|
2166
|
-
|
|
2181
|
+
return /* @__PURE__ */ React36.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React36.createElement(import_ui29.Stack, { gap: 1.5 }, /* @__PURE__ */ React36.createElement(
|
|
2182
|
+
import_ui29.Stack,
|
|
2167
2183
|
{
|
|
2168
2184
|
direction: "row",
|
|
2169
2185
|
sx: {
|
|
@@ -2172,8 +2188,8 @@ var LinkControl = createControl((props) => {
|
|
|
2172
2188
|
marginInlineEnd: -0.75
|
|
2173
2189
|
}
|
|
2174
2190
|
},
|
|
2175
|
-
/* @__PURE__ */
|
|
2176
|
-
/* @__PURE__ */
|
|
2191
|
+
/* @__PURE__ */ React36.createElement(ControlFormLabel, null, (0, import_i18n9.__)("Link", "elementor")),
|
|
2192
|
+
/* @__PURE__ */ React36.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React36.createElement(
|
|
2177
2193
|
ToggleIconControl,
|
|
2178
2194
|
{
|
|
2179
2195
|
disabled: shouldDisableAddingLink,
|
|
@@ -2182,7 +2198,7 @@ var LinkControl = createControl((props) => {
|
|
|
2182
2198
|
label: (0, import_i18n9.__)("Toggle link", "elementor")
|
|
2183
2199
|
}
|
|
2184
2200
|
))
|
|
2185
|
-
), /* @__PURE__ */
|
|
2201
|
+
), /* @__PURE__ */ React36.createElement(import_ui29.Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React36.createElement(import_ui29.Stack, { gap: 1.5 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React36.createElement(ControlActions, null, /* @__PURE__ */ React36.createElement(
|
|
2186
2202
|
Autocomplete,
|
|
2187
2203
|
{
|
|
2188
2204
|
options,
|
|
@@ -2193,10 +2209,10 @@ var LinkControl = createControl((props) => {
|
|
|
2193
2209
|
onTextChange,
|
|
2194
2210
|
minInputLength
|
|
2195
2211
|
}
|
|
2196
|
-
))), /* @__PURE__ */
|
|
2212
|
+
))), /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React36.createElement(SwitchControl, { disabled: !value }))))));
|
|
2197
2213
|
});
|
|
2198
2214
|
var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
|
|
2199
|
-
return /* @__PURE__ */
|
|
2215
|
+
return /* @__PURE__ */ React36.createElement(import_ui29.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React36.createElement(import_icons9.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React36.createElement(import_icons9.PlusIcon, { fontSize: SIZE3 }));
|
|
2200
2216
|
};
|
|
2201
2217
|
var SwitchControl = ({ disabled }) => {
|
|
2202
2218
|
const { value = false, setValue } = useBoundProp(import_editor_props16.booleanPropTypeUtil);
|
|
@@ -2208,7 +2224,7 @@ var SwitchControl = ({ disabled }) => {
|
|
|
2208
2224
|
opacity: 0
|
|
2209
2225
|
}
|
|
2210
2226
|
} : {};
|
|
2211
|
-
return /* @__PURE__ */
|
|
2227
|
+
return /* @__PURE__ */ React36.createElement(import_ui29.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, (0, import_i18n9.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React36.createElement(import_ui29.Switch, { checked: value, onClick, disabled, inputProps })));
|
|
2212
2228
|
};
|
|
2213
2229
|
async function fetchOptions(ajaxUrl, params) {
|
|
2214
2230
|
if (!params || !ajaxUrl) {
|
|
@@ -2245,15 +2261,15 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
|
|
|
2245
2261
|
(0, import_editor_elements.selectElement)(elementId);
|
|
2246
2262
|
}
|
|
2247
2263
|
};
|
|
2248
|
-
return shouldRestrict && isVisible ? /* @__PURE__ */
|
|
2249
|
-
|
|
2264
|
+
return shouldRestrict && isVisible ? /* @__PURE__ */ React36.createElement(
|
|
2265
|
+
import_ui29.Infotip,
|
|
2250
2266
|
{
|
|
2251
2267
|
placement: "right",
|
|
2252
|
-
content: /* @__PURE__ */
|
|
2268
|
+
content: /* @__PURE__ */ React36.createElement(
|
|
2253
2269
|
import_editor_ui3.InfoTipCard,
|
|
2254
2270
|
{
|
|
2255
2271
|
content: INFOTIP_CONTENT[reason],
|
|
2256
|
-
svgIcon: /* @__PURE__ */
|
|
2272
|
+
svgIcon: /* @__PURE__ */ React36.createElement(import_icons9.AlertTriangleIcon, null),
|
|
2257
2273
|
learnMoreButton,
|
|
2258
2274
|
ctaButton: {
|
|
2259
2275
|
label: (0, import_i18n9.__)("Take me there", "elementor"),
|
|
@@ -2262,19 +2278,19 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
|
|
|
2262
2278
|
}
|
|
2263
2279
|
)
|
|
2264
2280
|
},
|
|
2265
|
-
/* @__PURE__ */
|
|
2266
|
-
) : /* @__PURE__ */
|
|
2281
|
+
/* @__PURE__ */ React36.createElement(import_ui29.Box, null, children)
|
|
2282
|
+
) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, children);
|
|
2267
2283
|
};
|
|
2268
2284
|
var INFOTIP_CONTENT = {
|
|
2269
|
-
descendant: /* @__PURE__ */
|
|
2270
|
-
ancestor: /* @__PURE__ */
|
|
2285
|
+
descendant: /* @__PURE__ */ React36.createElement(React36.Fragment, null, (0, import_i18n9.__)("To add a link to this container,", "elementor"), /* @__PURE__ */ React36.createElement("br", null), (0, import_i18n9.__)("first remove the link from the elements inside of it.", "elementor")),
|
|
2286
|
+
ancestor: /* @__PURE__ */ React36.createElement(React36.Fragment, null, (0, import_i18n9.__)("To add a link to this element,", "elementor"), /* @__PURE__ */ React36.createElement("br", null), (0, import_i18n9.__)("first remove the link from its parent container.", "elementor"))
|
|
2271
2287
|
};
|
|
2272
2288
|
|
|
2273
2289
|
// src/controls/gap-control.tsx
|
|
2274
|
-
var
|
|
2290
|
+
var React37 = __toESM(require("react"));
|
|
2275
2291
|
var import_editor_props17 = require("@elementor/editor-props");
|
|
2276
|
-
var
|
|
2277
|
-
var
|
|
2292
|
+
var import_icons10 = require("@elementor/icons");
|
|
2293
|
+
var import_ui30 = require("@elementor/ui");
|
|
2278
2294
|
var import_i18n10 = require("@wordpress/i18n");
|
|
2279
2295
|
var GapControl = createControl(({ label }) => {
|
|
2280
2296
|
const {
|
|
@@ -2297,11 +2313,11 @@ var GapControl = createControl(({ label }) => {
|
|
|
2297
2313
|
});
|
|
2298
2314
|
};
|
|
2299
2315
|
const tooltipLabel = label.toLowerCase();
|
|
2300
|
-
const LinkedIcon = isLinked ?
|
|
2316
|
+
const LinkedIcon = isLinked ? import_icons10.LinkIcon : import_icons10.DetachIcon;
|
|
2301
2317
|
const linkedLabel = (0, import_i18n10.__)("Link %s", "elementor").replace("%s", tooltipLabel);
|
|
2302
2318
|
const unlinkedLabel = (0, import_i18n10.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
|
|
2303
|
-
return /* @__PURE__ */
|
|
2304
|
-
|
|
2319
|
+
return /* @__PURE__ */ React37.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React37.createElement(import_ui30.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label), /* @__PURE__ */ React37.createElement(import_ui30.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
|
|
2320
|
+
import_ui30.ToggleButton,
|
|
2305
2321
|
{
|
|
2306
2322
|
"aria-label": isLinked ? unlinkedLabel : linkedLabel,
|
|
2307
2323
|
size: "tiny",
|
|
@@ -2311,23 +2327,23 @@ var GapControl = createControl(({ label }) => {
|
|
|
2311
2327
|
onChange: onLinkToggle,
|
|
2312
2328
|
disabled: sizeDisabled || directionDisabled
|
|
2313
2329
|
},
|
|
2314
|
-
/* @__PURE__ */
|
|
2315
|
-
))), /* @__PURE__ */
|
|
2330
|
+
/* @__PURE__ */ React37.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
2331
|
+
))), /* @__PURE__ */ React37.createElement(import_ui30.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Column", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Row", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Control4, { bind: "row", isLinked })))));
|
|
2316
2332
|
});
|
|
2317
2333
|
var Control4 = ({ bind, isLinked }) => {
|
|
2318
2334
|
if (isLinked) {
|
|
2319
|
-
return /* @__PURE__ */
|
|
2335
|
+
return /* @__PURE__ */ React37.createElement(SizeControl, null);
|
|
2320
2336
|
}
|
|
2321
|
-
return /* @__PURE__ */
|
|
2337
|
+
return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(SizeControl, null));
|
|
2322
2338
|
};
|
|
2323
2339
|
|
|
2324
2340
|
// src/controls/aspect-ratio-control.tsx
|
|
2325
|
-
var
|
|
2341
|
+
var React38 = __toESM(require("react"));
|
|
2326
2342
|
var import_react16 = require("react");
|
|
2327
2343
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
2328
2344
|
var import_editor_ui4 = require("@elementor/editor-ui");
|
|
2329
|
-
var
|
|
2330
|
-
var
|
|
2345
|
+
var import_icons11 = require("@elementor/icons");
|
|
2346
|
+
var import_ui31 = require("@elementor/ui");
|
|
2331
2347
|
var import_i18n11 = require("@wordpress/i18n");
|
|
2332
2348
|
var RATIO_OPTIONS = [
|
|
2333
2349
|
{ label: (0, import_i18n11.__)("Auto", "elementor"), value: "auto" },
|
|
@@ -2374,8 +2390,8 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
2374
2390
|
setAspectRatioValue(`${customWidth}/${newHeight}`);
|
|
2375
2391
|
}
|
|
2376
2392
|
};
|
|
2377
|
-
return /* @__PURE__ */
|
|
2378
|
-
|
|
2393
|
+
return /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(import_ui31.Stack, { direction: "column", pt: 2, gap: 2 }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, label)), /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
|
|
2394
|
+
import_ui31.Select,
|
|
2379
2395
|
{
|
|
2380
2396
|
size: "tiny",
|
|
2381
2397
|
displayEmpty: true,
|
|
@@ -2386,10 +2402,10 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
2386
2402
|
fullWidth: true
|
|
2387
2403
|
},
|
|
2388
2404
|
[...RATIO_OPTIONS, { label: (0, import_i18n11.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
|
|
2389
|
-
({ label: optionLabel, ...props }) => /* @__PURE__ */
|
|
2405
|
+
({ label: optionLabel, ...props }) => /* @__PURE__ */ React38.createElement(import_editor_ui4.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
|
|
2390
2406
|
)
|
|
2391
|
-
))), isCustom && /* @__PURE__ */
|
|
2392
|
-
|
|
2407
|
+
))), isCustom && /* @__PURE__ */ React38.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
|
|
2408
|
+
import_ui31.TextField,
|
|
2393
2409
|
{
|
|
2394
2410
|
size: "tiny",
|
|
2395
2411
|
type: "number",
|
|
@@ -2398,11 +2414,11 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
2398
2414
|
value: customWidth,
|
|
2399
2415
|
onChange: handleCustomWidthChange,
|
|
2400
2416
|
InputProps: {
|
|
2401
|
-
startAdornment: /* @__PURE__ */
|
|
2417
|
+
startAdornment: /* @__PURE__ */ React38.createElement(import_icons11.ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
|
|
2402
2418
|
}
|
|
2403
2419
|
}
|
|
2404
|
-
)), /* @__PURE__ */
|
|
2405
|
-
|
|
2420
|
+
)), /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
|
|
2421
|
+
import_ui31.TextField,
|
|
2406
2422
|
{
|
|
2407
2423
|
size: "tiny",
|
|
2408
2424
|
type: "number",
|
|
@@ -2411,26 +2427,26 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
2411
2427
|
value: customHeight,
|
|
2412
2428
|
onChange: handleCustomHeightChange,
|
|
2413
2429
|
InputProps: {
|
|
2414
|
-
startAdornment: /* @__PURE__ */
|
|
2430
|
+
startAdornment: /* @__PURE__ */ React38.createElement(import_icons11.ArrowsMoveVerticalIcon, { fontSize: "tiny" })
|
|
2415
2431
|
}
|
|
2416
2432
|
}
|
|
2417
|
-
))));
|
|
2433
|
+
)))));
|
|
2418
2434
|
});
|
|
2419
2435
|
|
|
2420
2436
|
// src/controls/svg-media-control.tsx
|
|
2421
|
-
var
|
|
2437
|
+
var React40 = __toESM(require("react"));
|
|
2422
2438
|
var import_react18 = require("react");
|
|
2423
2439
|
var import_editor_props19 = require("@elementor/editor-props");
|
|
2424
|
-
var
|
|
2425
|
-
var
|
|
2440
|
+
var import_icons12 = require("@elementor/icons");
|
|
2441
|
+
var import_ui33 = require("@elementor/ui");
|
|
2426
2442
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
2427
2443
|
var import_i18n13 = require("@wordpress/i18n");
|
|
2428
2444
|
|
|
2429
2445
|
// src/components/enable-unfiltered-modal.tsx
|
|
2430
|
-
var
|
|
2446
|
+
var React39 = __toESM(require("react"));
|
|
2431
2447
|
var import_react17 = require("react");
|
|
2432
2448
|
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
2433
|
-
var
|
|
2449
|
+
var import_ui32 = require("@elementor/ui");
|
|
2434
2450
|
var import_i18n12 = require("@wordpress/i18n");
|
|
2435
2451
|
var ADMIN_TITLE_TEXT = (0, import_i18n12.__)("Enable Unfiltered Uploads", "elementor");
|
|
2436
2452
|
var ADMIN_CONTENT_TEXT = (0, import_i18n12.__)(
|
|
@@ -2470,10 +2486,10 @@ var EnableUnfilteredModal = (props) => {
|
|
|
2470
2486
|
}
|
|
2471
2487
|
};
|
|
2472
2488
|
const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
|
|
2473
|
-
return canManageOptions ? /* @__PURE__ */
|
|
2489
|
+
return canManageOptions ? /* @__PURE__ */ React39.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React39.createElement(NonAdminDialog, { ...dialogProps });
|
|
2474
2490
|
};
|
|
2475
|
-
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */
|
|
2476
|
-
|
|
2491
|
+
var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React39.createElement(import_ui32.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React39.createElement(import_ui32.DialogHeader, { logo: false }, /* @__PURE__ */ React39.createElement(import_ui32.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React39.createElement(import_ui32.Divider, null), /* @__PURE__ */ React39.createElement(import_ui32.DialogContent, null, /* @__PURE__ */ React39.createElement(import_ui32.DialogContentText, null, isError ? /* @__PURE__ */ React39.createElement(React39.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React39.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React39.createElement(import_ui32.DialogActions, null, /* @__PURE__ */ React39.createElement(import_ui32.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n12.__)("Cancel", "elementor")), /* @__PURE__ */ React39.createElement(
|
|
2492
|
+
import_ui32.Button,
|
|
2477
2493
|
{
|
|
2478
2494
|
size: "medium",
|
|
2479
2495
|
onClick: () => handleEnable(),
|
|
@@ -2481,16 +2497,16 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
2481
2497
|
color: "primary",
|
|
2482
2498
|
disabled: isPending
|
|
2483
2499
|
},
|
|
2484
|
-
isPending ? /* @__PURE__ */
|
|
2500
|
+
isPending ? /* @__PURE__ */ React39.createElement(import_ui32.CircularProgress, { size: 24 }) : (0, import_i18n12.__)("Enable", "elementor")
|
|
2485
2501
|
)));
|
|
2486
|
-
var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */
|
|
2502
|
+
var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React39.createElement(import_ui32.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React39.createElement(import_ui32.DialogHeader, { logo: false }, /* @__PURE__ */ React39.createElement(import_ui32.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React39.createElement(import_ui32.Divider, null), /* @__PURE__ */ React39.createElement(import_ui32.DialogContent, null, /* @__PURE__ */ React39.createElement(import_ui32.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React39.createElement(import_ui32.DialogActions, null, /* @__PURE__ */ React39.createElement(import_ui32.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n12.__)("Got it", "elementor"))));
|
|
2487
2503
|
|
|
2488
2504
|
// src/controls/svg-media-control.tsx
|
|
2489
2505
|
var TILE_SIZE = 8;
|
|
2490
2506
|
var TILE_WHITE = "transparent";
|
|
2491
2507
|
var TILE_BLACK = "#c1c1c1";
|
|
2492
2508
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
2493
|
-
var StyledCard = (0,
|
|
2509
|
+
var StyledCard = (0, import_ui33.styled)(import_ui33.Card)`
|
|
2494
2510
|
background-color: white;
|
|
2495
2511
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
2496
2512
|
background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
|
|
@@ -2499,7 +2515,7 @@ var StyledCard = (0, import_ui32.styled)(import_ui32.Card)`
|
|
|
2499
2515
|
${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
|
|
2500
2516
|
border: none;
|
|
2501
2517
|
`;
|
|
2502
|
-
var StyledCardMediaContainer = (0,
|
|
2518
|
+
var StyledCardMediaContainer = (0, import_ui33.styled)(import_ui33.Stack)`
|
|
2503
2519
|
position: relative;
|
|
2504
2520
|
height: 140px;
|
|
2505
2521
|
object-fit: contain;
|
|
@@ -2544,16 +2560,16 @@ var SvgMediaControl = createControl(() => {
|
|
|
2544
2560
|
open(openOptions);
|
|
2545
2561
|
}
|
|
2546
2562
|
};
|
|
2547
|
-
return /* @__PURE__ */
|
|
2548
|
-
|
|
2563
|
+
return /* @__PURE__ */ React40.createElement(import_ui33.Stack, { gap: 1 }, /* @__PURE__ */ React40.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React40.createElement(ControlFormLabel, null, " ", (0, import_i18n13.__)("SVG", "elementor"), " "), /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React40.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React40.createElement(import_ui33.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React40.createElement(
|
|
2564
|
+
import_ui33.CardMedia,
|
|
2549
2565
|
{
|
|
2550
2566
|
component: "img",
|
|
2551
2567
|
image: src,
|
|
2552
2568
|
alt: (0, import_i18n13.__)("Preview SVG", "elementor"),
|
|
2553
2569
|
sx: { maxHeight: "140px", width: "50px" }
|
|
2554
2570
|
}
|
|
2555
|
-
)), /* @__PURE__ */
|
|
2556
|
-
|
|
2571
|
+
)), /* @__PURE__ */ React40.createElement(
|
|
2572
|
+
import_ui33.CardOverlay,
|
|
2557
2573
|
{
|
|
2558
2574
|
sx: {
|
|
2559
2575
|
"&:hover": {
|
|
@@ -2561,8 +2577,8 @@ var SvgMediaControl = createControl(() => {
|
|
|
2561
2577
|
}
|
|
2562
2578
|
}
|
|
2563
2579
|
},
|
|
2564
|
-
/* @__PURE__ */
|
|
2565
|
-
|
|
2580
|
+
/* @__PURE__ */ React40.createElement(import_ui33.Stack, { gap: 1 }, /* @__PURE__ */ React40.createElement(
|
|
2581
|
+
import_ui33.Button,
|
|
2566
2582
|
{
|
|
2567
2583
|
size: "tiny",
|
|
2568
2584
|
color: "inherit",
|
|
@@ -2570,13 +2586,13 @@ var SvgMediaControl = createControl(() => {
|
|
|
2570
2586
|
onClick: () => handleClick(MODE_BROWSE)
|
|
2571
2587
|
},
|
|
2572
2588
|
(0, import_i18n13.__)("Select SVG", "elementor")
|
|
2573
|
-
), /* @__PURE__ */
|
|
2574
|
-
|
|
2589
|
+
), /* @__PURE__ */ React40.createElement(
|
|
2590
|
+
import_ui33.Button,
|
|
2575
2591
|
{
|
|
2576
2592
|
size: "tiny",
|
|
2577
2593
|
variant: "text",
|
|
2578
2594
|
color: "inherit",
|
|
2579
|
-
startIcon: /* @__PURE__ */
|
|
2595
|
+
startIcon: /* @__PURE__ */ React40.createElement(import_icons12.UploadIcon, null),
|
|
2580
2596
|
onClick: () => handleClick(MODE_UPLOAD)
|
|
2581
2597
|
},
|
|
2582
2598
|
(0, import_i18n13.__)("Upload", "elementor")
|
|
@@ -2585,16 +2601,16 @@ var SvgMediaControl = createControl(() => {
|
|
|
2585
2601
|
});
|
|
2586
2602
|
|
|
2587
2603
|
// src/controls/background-control/background-control.tsx
|
|
2588
|
-
var
|
|
2604
|
+
var React47 = __toESM(require("react"));
|
|
2589
2605
|
var import_editor_props25 = require("@elementor/editor-props");
|
|
2590
2606
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
2591
|
-
var
|
|
2607
|
+
var import_ui41 = require("@elementor/ui");
|
|
2592
2608
|
var import_i18n19 = require("@wordpress/i18n");
|
|
2593
2609
|
|
|
2594
2610
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
2595
|
-
var
|
|
2611
|
+
var React46 = __toESM(require("react"));
|
|
2596
2612
|
var import_editor_props24 = require("@elementor/editor-props");
|
|
2597
|
-
var
|
|
2613
|
+
var import_ui40 = require("@elementor/ui");
|
|
2598
2614
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
2599
2615
|
var import_i18n18 = require("@wordpress/i18n");
|
|
2600
2616
|
|
|
@@ -2603,9 +2619,9 @@ var import_env = require("@elementor/env");
|
|
|
2603
2619
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
2604
2620
|
|
|
2605
2621
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
2606
|
-
var
|
|
2622
|
+
var React41 = __toESM(require("react"));
|
|
2607
2623
|
var import_editor_props20 = require("@elementor/editor-props");
|
|
2608
|
-
var
|
|
2624
|
+
var import_ui34 = require("@elementor/ui");
|
|
2609
2625
|
var BackgroundGradientColorControl = createControl(() => {
|
|
2610
2626
|
const { value, setValue } = useBoundProp(import_editor_props20.backgroundGradientOverlayPropTypeUtil);
|
|
2611
2627
|
const handleChange = (newValue) => {
|
|
@@ -2643,8 +2659,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
2643
2659
|
positions: positions?.value.split(" ")
|
|
2644
2660
|
};
|
|
2645
2661
|
};
|
|
2646
|
-
return /* @__PURE__ */
|
|
2647
|
-
|
|
2662
|
+
return /* @__PURE__ */ React41.createElement(ControlActions, null, /* @__PURE__ */ React41.createElement(
|
|
2663
|
+
import_ui34.UnstableGradientBox,
|
|
2648
2664
|
{
|
|
2649
2665
|
sx: { width: "auto", padding: 1.5 },
|
|
2650
2666
|
value: normalizeValue(),
|
|
@@ -2668,34 +2684,34 @@ var initialBackgroundGradientOverlay = import_editor_props20.backgroundGradientO
|
|
|
2668
2684
|
});
|
|
2669
2685
|
|
|
2670
2686
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
2671
|
-
var
|
|
2672
|
-
var
|
|
2673
|
-
var
|
|
2687
|
+
var React42 = __toESM(require("react"));
|
|
2688
|
+
var import_icons13 = require("@elementor/icons");
|
|
2689
|
+
var import_ui35 = require("@elementor/ui");
|
|
2674
2690
|
var import_i18n14 = require("@wordpress/i18n");
|
|
2675
2691
|
var attachmentControlOptions = [
|
|
2676
2692
|
{
|
|
2677
2693
|
value: "fixed",
|
|
2678
2694
|
label: (0, import_i18n14.__)("Fixed", "elementor"),
|
|
2679
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2695
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.PinIcon, { fontSize: size }),
|
|
2680
2696
|
showTooltip: true
|
|
2681
2697
|
},
|
|
2682
2698
|
{
|
|
2683
2699
|
value: "scroll",
|
|
2684
2700
|
label: (0, import_i18n14.__)("Scroll", "elementor"),
|
|
2685
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2701
|
+
renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.PinnedOffIcon, { fontSize: size }),
|
|
2686
2702
|
showTooltip: true
|
|
2687
2703
|
}
|
|
2688
2704
|
];
|
|
2689
2705
|
var BackgroundImageOverlayAttachment = () => {
|
|
2690
|
-
return /* @__PURE__ */
|
|
2706
|
+
return /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, (0, import_i18n14.__)("Attachment", "elementor"))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React42.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
2691
2707
|
};
|
|
2692
2708
|
|
|
2693
2709
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
2694
|
-
var
|
|
2710
|
+
var React43 = __toESM(require("react"));
|
|
2695
2711
|
var import_editor_props21 = require("@elementor/editor-props");
|
|
2696
2712
|
var import_editor_ui5 = require("@elementor/editor-ui");
|
|
2697
|
-
var
|
|
2698
|
-
var
|
|
2713
|
+
var import_icons14 = require("@elementor/icons");
|
|
2714
|
+
var import_ui36 = require("@elementor/ui");
|
|
2699
2715
|
var import_i18n15 = require("@wordpress/i18n");
|
|
2700
2716
|
var backgroundPositionOptions = [
|
|
2701
2717
|
{ label: (0, import_i18n15.__)("Center center", "elementor"), value: "center center" },
|
|
@@ -2721,82 +2737,82 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
2721
2737
|
stringPropContext.setValue(value);
|
|
2722
2738
|
}
|
|
2723
2739
|
};
|
|
2724
|
-
return /* @__PURE__ */
|
|
2725
|
-
|
|
2740
|
+
return /* @__PURE__ */ React43.createElement(import_ui36.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Position", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React43.createElement(
|
|
2741
|
+
import_ui36.Select,
|
|
2726
2742
|
{
|
|
2727
2743
|
size: "tiny",
|
|
2728
2744
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? "",
|
|
2729
2745
|
onChange: handlePositionChange,
|
|
2730
2746
|
fullWidth: true
|
|
2731
2747
|
},
|
|
2732
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
2733
|
-
)))), isCustom ? /* @__PURE__ */
|
|
2748
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React43.createElement(import_editor_ui5.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
2749
|
+
)))), isCustom ? /* @__PURE__ */ React43.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React43.createElement(SizeControl, { startIcon: /* @__PURE__ */ React43.createElement(import_icons14.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React43.createElement(SizeControl, { startIcon: /* @__PURE__ */ React43.createElement(import_icons14.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
|
|
2734
2750
|
};
|
|
2735
2751
|
|
|
2736
2752
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
2737
|
-
var
|
|
2738
|
-
var
|
|
2739
|
-
var
|
|
2753
|
+
var React44 = __toESM(require("react"));
|
|
2754
|
+
var import_icons15 = require("@elementor/icons");
|
|
2755
|
+
var import_ui37 = require("@elementor/ui");
|
|
2740
2756
|
var import_i18n16 = require("@wordpress/i18n");
|
|
2741
2757
|
var repeatControlOptions = [
|
|
2742
2758
|
{
|
|
2743
2759
|
value: "repeat",
|
|
2744
2760
|
label: (0, import_i18n16.__)("Repeat", "elementor"),
|
|
2745
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2761
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.GridDotsIcon, { fontSize: size }),
|
|
2746
2762
|
showTooltip: true
|
|
2747
2763
|
},
|
|
2748
2764
|
{
|
|
2749
2765
|
value: "repeat-x",
|
|
2750
2766
|
label: (0, import_i18n16.__)("Repeat-x", "elementor"),
|
|
2751
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2767
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.DotsHorizontalIcon, { fontSize: size }),
|
|
2752
2768
|
showTooltip: true
|
|
2753
2769
|
},
|
|
2754
2770
|
{
|
|
2755
2771
|
value: "repeat-y",
|
|
2756
2772
|
label: (0, import_i18n16.__)("Repeat-y", "elementor"),
|
|
2757
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2773
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.DotsVerticalIcon, { fontSize: size }),
|
|
2758
2774
|
showTooltip: true
|
|
2759
2775
|
},
|
|
2760
2776
|
{
|
|
2761
2777
|
value: "no-repeat",
|
|
2762
2778
|
label: (0, import_i18n16.__)("No-repeat", "elementor"),
|
|
2763
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2779
|
+
renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(import_icons15.XIcon, { fontSize: size }),
|
|
2764
2780
|
showTooltip: true
|
|
2765
2781
|
}
|
|
2766
2782
|
];
|
|
2767
2783
|
var BackgroundImageOverlayRepeat = () => {
|
|
2768
|
-
return /* @__PURE__ */
|
|
2784
|
+
return /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, (0, import_i18n16.__)("Repeat", "elementor"))), /* @__PURE__ */ React44.createElement(import_ui37.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React44.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
2769
2785
|
};
|
|
2770
2786
|
|
|
2771
2787
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
2772
|
-
var
|
|
2788
|
+
var React45 = __toESM(require("react"));
|
|
2773
2789
|
var import_editor_props22 = require("@elementor/editor-props");
|
|
2774
|
-
var
|
|
2775
|
-
var
|
|
2790
|
+
var import_icons16 = require("@elementor/icons");
|
|
2791
|
+
var import_ui38 = require("@elementor/ui");
|
|
2776
2792
|
var import_i18n17 = require("@wordpress/i18n");
|
|
2777
2793
|
var sizeControlOptions = [
|
|
2778
2794
|
{
|
|
2779
2795
|
value: "auto",
|
|
2780
2796
|
label: (0, import_i18n17.__)("Auto", "elementor"),
|
|
2781
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2797
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(import_icons16.LetterAIcon, { fontSize: size }),
|
|
2782
2798
|
showTooltip: true
|
|
2783
2799
|
},
|
|
2784
2800
|
{
|
|
2785
2801
|
value: "cover",
|
|
2786
2802
|
label: (0, import_i18n17.__)("Cover", "elementor"),
|
|
2787
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2803
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(import_icons16.ArrowsMaximizeIcon, { fontSize: size }),
|
|
2788
2804
|
showTooltip: true
|
|
2789
2805
|
},
|
|
2790
2806
|
{
|
|
2791
2807
|
value: "contain",
|
|
2792
2808
|
label: (0, import_i18n17.__)("Contain", "elementor"),
|
|
2793
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2809
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(import_icons16.ArrowBarBothIcon, { fontSize: size }),
|
|
2794
2810
|
showTooltip: true
|
|
2795
2811
|
},
|
|
2796
2812
|
{
|
|
2797
2813
|
value: "custom",
|
|
2798
2814
|
label: (0, import_i18n17.__)("Custom", "elementor"),
|
|
2799
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2815
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(import_icons16.PencilIcon, { fontSize: size }),
|
|
2800
2816
|
showTooltip: true
|
|
2801
2817
|
}
|
|
2802
2818
|
];
|
|
@@ -2811,7 +2827,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2811
2827
|
stringPropContext.setValue(size);
|
|
2812
2828
|
}
|
|
2813
2829
|
};
|
|
2814
|
-
return /* @__PURE__ */
|
|
2830
|
+
return /* @__PURE__ */ React45.createElement(import_ui38.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, (0, import_i18n17.__)("Size", "elementor"))), /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React45.createElement(
|
|
2815
2831
|
ControlToggleButtonGroup,
|
|
2816
2832
|
{
|
|
2817
2833
|
exclusive: true,
|
|
@@ -2819,16 +2835,16 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2819
2835
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
|
|
2820
2836
|
onChange: handleSizeChange
|
|
2821
2837
|
}
|
|
2822
|
-
)))), isCustom ? /* @__PURE__ */
|
|
2838
|
+
)))), isCustom ? /* @__PURE__ */ React45.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React45.createElement(
|
|
2823
2839
|
SizeControl,
|
|
2824
2840
|
{
|
|
2825
|
-
startIcon: /* @__PURE__ */
|
|
2841
|
+
startIcon: /* @__PURE__ */ React45.createElement(import_icons16.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
2826
2842
|
extendedValues: ["auto"]
|
|
2827
2843
|
}
|
|
2828
|
-
))), /* @__PURE__ */
|
|
2844
|
+
))), /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React45.createElement(
|
|
2829
2845
|
SizeControl,
|
|
2830
2846
|
{
|
|
2831
|
-
startIcon: /* @__PURE__ */
|
|
2847
|
+
startIcon: /* @__PURE__ */ React45.createElement(import_icons16.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
2832
2848
|
extendedValues: ["auto"]
|
|
2833
2849
|
}
|
|
2834
2850
|
)))))) : null);
|
|
@@ -2837,7 +2853,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2837
2853
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
2838
2854
|
var import_react19 = require("react");
|
|
2839
2855
|
var import_editor_props23 = require("@elementor/editor-props");
|
|
2840
|
-
var
|
|
2856
|
+
var import_ui39 = require("@elementor/ui");
|
|
2841
2857
|
var useBackgroundTabsHistory = ({
|
|
2842
2858
|
color: initialBackgroundColorOverlay2,
|
|
2843
2859
|
image: initialBackgroundImageOverlay,
|
|
@@ -2855,7 +2871,7 @@ var useBackgroundTabsHistory = ({
|
|
|
2855
2871
|
}
|
|
2856
2872
|
return "image";
|
|
2857
2873
|
};
|
|
2858
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
2874
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui39.useTabs)(getCurrentOverlayType());
|
|
2859
2875
|
const valuesHistory = (0, import_react19.useRef)({
|
|
2860
2876
|
image: initialBackgroundImageOverlay,
|
|
2861
2877
|
color: initialBackgroundColorOverlay2,
|
|
@@ -2931,7 +2947,7 @@ var backgroundResolutionOptions = [
|
|
|
2931
2947
|
];
|
|
2932
2948
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
2933
2949
|
const { propType, value: overlayValues, setValue, disabled } = useBoundProp(import_editor_props24.backgroundOverlayPropTypeUtil);
|
|
2934
|
-
return /* @__PURE__ */
|
|
2950
|
+
return /* @__PURE__ */ React46.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React46.createElement(
|
|
2935
2951
|
Repeater,
|
|
2936
2952
|
{
|
|
2937
2953
|
openOnAdd: true,
|
|
@@ -2949,7 +2965,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
2949
2965
|
));
|
|
2950
2966
|
});
|
|
2951
2967
|
var ItemContent2 = ({ anchorEl = null, bind }) => {
|
|
2952
|
-
return /* @__PURE__ */
|
|
2968
|
+
return /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React46.createElement(Content2, { anchorEl }));
|
|
2953
2969
|
};
|
|
2954
2970
|
var Content2 = ({ anchorEl }) => {
|
|
2955
2971
|
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
@@ -2957,27 +2973,27 @@ var Content2 = ({ anchorEl }) => {
|
|
|
2957
2973
|
color: initialBackgroundColorOverlay.value,
|
|
2958
2974
|
gradient: initialBackgroundGradientOverlay.value
|
|
2959
2975
|
});
|
|
2960
|
-
return /* @__PURE__ */
|
|
2961
|
-
|
|
2976
|
+
return /* @__PURE__ */ React46.createElement(import_ui40.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React46.createElement(import_ui40.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React46.createElement(
|
|
2977
|
+
import_ui40.Tabs,
|
|
2962
2978
|
{
|
|
2963
2979
|
size: "small",
|
|
2964
2980
|
variant: "fullWidth",
|
|
2965
2981
|
...getTabsProps(),
|
|
2966
2982
|
"aria-label": (0, import_i18n18.__)("Background Overlay", "elementor")
|
|
2967
2983
|
},
|
|
2968
|
-
/* @__PURE__ */
|
|
2969
|
-
/* @__PURE__ */
|
|
2970
|
-
/* @__PURE__ */
|
|
2971
|
-
)), /* @__PURE__ */
|
|
2984
|
+
/* @__PURE__ */ React46.createElement(import_ui40.Tab, { label: (0, import_i18n18.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
2985
|
+
/* @__PURE__ */ React46.createElement(import_ui40.Tab, { label: (0, import_i18n18.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
2986
|
+
/* @__PURE__ */ React46.createElement(import_ui40.Tab, { label: (0, import_i18n18.__)("Color", "elementor"), ...getTabProps("color") })
|
|
2987
|
+
)), /* @__PURE__ */ React46.createElement(import_ui40.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React46.createElement(PopoverContent, null, /* @__PURE__ */ React46.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React46.createElement(import_ui40.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React46.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React46.createElement(import_ui40.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React46.createElement(PopoverContent, null, /* @__PURE__ */ React46.createElement(ColorOverlayContent, { anchorEl }))));
|
|
2972
2988
|
};
|
|
2973
2989
|
var ItemIcon2 = ({ value }) => {
|
|
2974
2990
|
switch (value.$$type) {
|
|
2975
2991
|
case "background-image-overlay":
|
|
2976
|
-
return /* @__PURE__ */
|
|
2992
|
+
return /* @__PURE__ */ React46.createElement(ItemIconImage, { value });
|
|
2977
2993
|
case "background-color-overlay":
|
|
2978
|
-
return /* @__PURE__ */
|
|
2994
|
+
return /* @__PURE__ */ React46.createElement(ItemIconColor, { value });
|
|
2979
2995
|
case "background-gradient-overlay":
|
|
2980
|
-
return /* @__PURE__ */
|
|
2996
|
+
return /* @__PURE__ */ React46.createElement(ItemIconGradient, { value });
|
|
2981
2997
|
default:
|
|
2982
2998
|
return null;
|
|
2983
2999
|
}
|
|
@@ -2990,12 +3006,12 @@ var extractColorFrom = (prop) => {
|
|
|
2990
3006
|
};
|
|
2991
3007
|
var ItemIconColor = ({ value: prop }) => {
|
|
2992
3008
|
const color = extractColorFrom(prop);
|
|
2993
|
-
return /* @__PURE__ */
|
|
3009
|
+
return /* @__PURE__ */ React46.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
|
|
2994
3010
|
};
|
|
2995
3011
|
var ItemIconImage = ({ value }) => {
|
|
2996
3012
|
const { imageUrl } = useImage(value);
|
|
2997
|
-
return /* @__PURE__ */
|
|
2998
|
-
|
|
3013
|
+
return /* @__PURE__ */ React46.createElement(
|
|
3014
|
+
import_ui40.CardMedia,
|
|
2999
3015
|
{
|
|
3000
3016
|
image: imageUrl,
|
|
3001
3017
|
sx: (theme) => ({
|
|
@@ -3009,49 +3025,49 @@ var ItemIconImage = ({ value }) => {
|
|
|
3009
3025
|
};
|
|
3010
3026
|
var ItemIconGradient = ({ value }) => {
|
|
3011
3027
|
const gradient = getGradientValue(value);
|
|
3012
|
-
return /* @__PURE__ */
|
|
3028
|
+
return /* @__PURE__ */ React46.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
3013
3029
|
};
|
|
3014
3030
|
var ItemLabel2 = ({ value }) => {
|
|
3015
3031
|
switch (value.$$type) {
|
|
3016
3032
|
case "background-image-overlay":
|
|
3017
|
-
return /* @__PURE__ */
|
|
3033
|
+
return /* @__PURE__ */ React46.createElement(ItemLabelImage, { value });
|
|
3018
3034
|
case "background-color-overlay":
|
|
3019
|
-
return /* @__PURE__ */
|
|
3035
|
+
return /* @__PURE__ */ React46.createElement(ItemLabelColor, { value });
|
|
3020
3036
|
case "background-gradient-overlay":
|
|
3021
|
-
return /* @__PURE__ */
|
|
3037
|
+
return /* @__PURE__ */ React46.createElement(ItemLabelGradient, { value });
|
|
3022
3038
|
default:
|
|
3023
3039
|
return null;
|
|
3024
3040
|
}
|
|
3025
3041
|
};
|
|
3026
3042
|
var ItemLabelColor = ({ value: prop }) => {
|
|
3027
3043
|
const color = extractColorFrom(prop);
|
|
3028
|
-
return /* @__PURE__ */
|
|
3044
|
+
return /* @__PURE__ */ React46.createElement("span", null, color);
|
|
3029
3045
|
};
|
|
3030
3046
|
var ItemLabelImage = ({ value }) => {
|
|
3031
3047
|
const { imageTitle } = useImage(value);
|
|
3032
|
-
return /* @__PURE__ */
|
|
3048
|
+
return /* @__PURE__ */ React46.createElement("span", null, imageTitle);
|
|
3033
3049
|
};
|
|
3034
3050
|
var ItemLabelGradient = ({ value }) => {
|
|
3035
3051
|
if (value.value.type.value === "linear") {
|
|
3036
|
-
return /* @__PURE__ */
|
|
3052
|
+
return /* @__PURE__ */ React46.createElement("span", null, (0, import_i18n18.__)("Linear Gradient", "elementor"));
|
|
3037
3053
|
}
|
|
3038
|
-
return /* @__PURE__ */
|
|
3054
|
+
return /* @__PURE__ */ React46.createElement("span", null, (0, import_i18n18.__)("Radial Gradient", "elementor"));
|
|
3039
3055
|
};
|
|
3040
3056
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
3041
3057
|
const propContext = useBoundProp(import_editor_props24.backgroundColorOverlayPropTypeUtil);
|
|
3042
|
-
return /* @__PURE__ */
|
|
3058
|
+
return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React46.createElement(ColorControl, { anchorEl })));
|
|
3043
3059
|
};
|
|
3044
3060
|
var ImageOverlayContent = () => {
|
|
3045
3061
|
const propContext = useBoundProp(import_editor_props24.backgroundImageOverlayPropTypeUtil);
|
|
3046
|
-
return /* @__PURE__ */
|
|
3062
|
+
return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React46.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(
|
|
3047
3063
|
ImageControl,
|
|
3048
3064
|
{
|
|
3049
3065
|
resolutionLabel: (0, import_i18n18.__)("Resolution", "elementor"),
|
|
3050
3066
|
sizes: backgroundResolutionOptions
|
|
3051
3067
|
}
|
|
3052
|
-
)))), /* @__PURE__ */
|
|
3068
|
+
)))), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayAttachment, null)));
|
|
3053
3069
|
};
|
|
3054
|
-
var StyledUnstableColorIndicator = (0,
|
|
3070
|
+
var StyledUnstableColorIndicator = (0, import_ui40.styled)(import_ui40.UnstableColorIndicator)(({ theme }) => ({
|
|
3055
3071
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
3056
3072
|
}));
|
|
3057
3073
|
var useImage = (image) => {
|
|
@@ -3089,19 +3105,19 @@ var BackgroundControl = createControl(() => {
|
|
|
3089
3105
|
const propContext = useBoundProp(import_editor_props25.backgroundPropTypeUtil);
|
|
3090
3106
|
const isUsingNestedProps = (0, import_editor_v1_adapters3.isExperimentActive)("e_v_3_30");
|
|
3091
3107
|
const colorLabel = (0, import_i18n19.__)("Color", "elementor");
|
|
3092
|
-
return /* @__PURE__ */
|
|
3108
|
+
return /* @__PURE__ */ React47.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React47.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React47.createElement(import_ui41.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui41.Grid, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React47.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React47.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React47.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ColorControl, null)))));
|
|
3093
3109
|
});
|
|
3094
3110
|
|
|
3095
3111
|
// src/controls/switch-control.tsx
|
|
3096
|
-
var
|
|
3112
|
+
var React48 = __toESM(require("react"));
|
|
3097
3113
|
var import_editor_props26 = require("@elementor/editor-props");
|
|
3098
|
-
var
|
|
3114
|
+
var import_ui42 = require("@elementor/ui");
|
|
3099
3115
|
var SwitchControl2 = createControl(() => {
|
|
3100
3116
|
const { value, setValue, disabled } = useBoundProp(import_editor_props26.booleanPropTypeUtil);
|
|
3101
3117
|
const handleChange = (event) => {
|
|
3102
3118
|
setValue(event.target.checked);
|
|
3103
3119
|
};
|
|
3104
|
-
return /* @__PURE__ */
|
|
3120
|
+
return /* @__PURE__ */ React48.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React48.createElement(import_ui42.Switch, { checked: !!value, onChange: handleChange, size: "small", disabled }));
|
|
3105
3121
|
});
|
|
3106
3122
|
// Annotate the CommonJS export names for ESM import in node:
|
|
3107
3123
|
0 && (module.exports = {
|