@elementor/editor-controls 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/index.js +197 -70
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +188 -53
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/controls/background-control/background-gradient-color-control.tsx +101 -0
- package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +43 -5
- package/src/controls/background-control/background-overlay/use-background-tabs-history.ts +29 -2
- package/src/controls/font-family-control/font-family-control.tsx +28 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @elementor/editor-controls
|
|
2
2
|
|
|
3
|
+
## 0.16.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 7d37fc1: Add background gradient overlay control
|
|
8
|
+
- 788208d: Change font control not found modal content
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies [7d37fc1]
|
|
13
|
+
- @elementor/editor-props@0.10.0
|
|
14
|
+
|
|
3
15
|
## 0.15.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/dist/index.js
CHANGED
|
@@ -1378,7 +1378,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1378
1378
|
...(0, import_ui23.bindPopover)(popoverState),
|
|
1379
1379
|
onClose: handleClose
|
|
1380
1380
|
},
|
|
1381
|
-
/* @__PURE__ */ React28.createElement(import_ui23.Stack, null, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(import_icons5.
|
|
1381
|
+
/* @__PURE__ */ React28.createElement(import_ui23.Stack, null, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(import_icons5.TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { variant: "subtitle2" }, (0, import_i18n8.__)("Font Family", "elementor")), /* @__PURE__ */ React28.createElement(import_ui23.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React28.createElement(import_icons5.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React28.createElement(import_ui23.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React28.createElement(
|
|
1382
1382
|
import_ui23.TextField,
|
|
1383
1383
|
{
|
|
1384
1384
|
fullWidth: true,
|
|
@@ -1398,7 +1398,27 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1398
1398
|
handleClose,
|
|
1399
1399
|
fontFamily
|
|
1400
1400
|
}
|
|
1401
|
-
) : /* @__PURE__ */ React28.createElement(import_ui23.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React28.createElement(import_icons5.
|
|
1401
|
+
) : /* @__PURE__ */ React28.createElement(import_ui23.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React28.createElement(import_icons5.TextIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(import_ui23.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React28.createElement(import_ui23.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React28.createElement(
|
|
1402
|
+
import_ui23.Typography,
|
|
1403
|
+
{
|
|
1404
|
+
variant: "subtitle2",
|
|
1405
|
+
color: "text.secondary",
|
|
1406
|
+
sx: {
|
|
1407
|
+
display: "flex",
|
|
1408
|
+
width: "100%",
|
|
1409
|
+
justifyContent: "center"
|
|
1410
|
+
}
|
|
1411
|
+
},
|
|
1412
|
+
/* @__PURE__ */ React28.createElement("span", null, "\u201C"),
|
|
1413
|
+
/* @__PURE__ */ React28.createElement(
|
|
1414
|
+
"span",
|
|
1415
|
+
{
|
|
1416
|
+
style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
|
|
1417
|
+
},
|
|
1418
|
+
searchValue
|
|
1419
|
+
),
|
|
1420
|
+
/* @__PURE__ */ React28.createElement("span", null, "\u201D.")
|
|
1421
|
+
)), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React28.createElement(
|
|
1402
1422
|
import_ui23.Link,
|
|
1403
1423
|
{
|
|
1404
1424
|
color: "secondary",
|
|
@@ -1406,8 +1426,8 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1406
1426
|
component: "button",
|
|
1407
1427
|
onClick: () => setSearchValue("")
|
|
1408
1428
|
},
|
|
1409
|
-
(0, import_i18n8.__)("Clear
|
|
1410
|
-
)
|
|
1429
|
+
(0, import_i18n8.__)("Clear & try again", "elementor")
|
|
1430
|
+
)))))
|
|
1411
1431
|
));
|
|
1412
1432
|
});
|
|
1413
1433
|
var LIST_ITEM_HEIGHT = 36;
|
|
@@ -1949,15 +1969,15 @@ var SvgMediaControl = createControl(() => {
|
|
|
1949
1969
|
});
|
|
1950
1970
|
|
|
1951
1971
|
// src/controls/background-control/background-control.tsx
|
|
1952
|
-
var
|
|
1953
|
-
var
|
|
1954
|
-
var
|
|
1972
|
+
var React40 = __toESM(require("react"));
|
|
1973
|
+
var import_editor_props24 = require("@elementor/editor-props");
|
|
1974
|
+
var import_ui36 = require("@elementor/ui");
|
|
1955
1975
|
var import_i18n17 = require("@wordpress/i18n");
|
|
1956
1976
|
|
|
1957
1977
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
1958
|
-
var
|
|
1959
|
-
var
|
|
1960
|
-
var
|
|
1978
|
+
var React39 = __toESM(require("react"));
|
|
1979
|
+
var import_editor_props23 = require("@elementor/editor-props");
|
|
1980
|
+
var import_ui35 = require("@elementor/ui");
|
|
1961
1981
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
1962
1982
|
var import_i18n16 = require("@wordpress/i18n");
|
|
1963
1983
|
|
|
@@ -1965,34 +1985,99 @@ var import_i18n16 = require("@wordpress/i18n");
|
|
|
1965
1985
|
var import_env = require("@elementor/env");
|
|
1966
1986
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
1967
1987
|
|
|
1968
|
-
// src/controls/background-control/background-
|
|
1988
|
+
// src/controls/background-control/background-gradient-color-control.tsx
|
|
1969
1989
|
var React34 = __toESM(require("react"));
|
|
1970
|
-
var
|
|
1990
|
+
var import_editor_props19 = require("@elementor/editor-props");
|
|
1971
1991
|
var import_ui29 = require("@elementor/ui");
|
|
1992
|
+
var BackgroundGradientColorControl = createControl(() => {
|
|
1993
|
+
const { value, setValue } = useBoundProp(import_editor_props19.backgroundGradientOverlayPropTypeUtil);
|
|
1994
|
+
const handleChange = (newValue) => {
|
|
1995
|
+
const transformedValue = createTransformableValue(newValue);
|
|
1996
|
+
if (transformedValue.positions) {
|
|
1997
|
+
transformedValue.positions = import_editor_props19.stringPropTypeUtil.create(newValue.positions.join(" "));
|
|
1998
|
+
}
|
|
1999
|
+
setValue(transformedValue);
|
|
2000
|
+
};
|
|
2001
|
+
const createTransformableValue = (newValue) => ({
|
|
2002
|
+
...newValue,
|
|
2003
|
+
type: import_editor_props19.stringPropTypeUtil.create(newValue.type),
|
|
2004
|
+
angle: import_editor_props19.numberPropTypeUtil.create(newValue.angle),
|
|
2005
|
+
stops: import_editor_props19.gradientColorStopPropTypeUtil.create(
|
|
2006
|
+
newValue.stops.map(
|
|
2007
|
+
({ color, offset }) => import_editor_props19.colorStopPropTypeUtil.create({
|
|
2008
|
+
color: import_editor_props19.colorPropTypeUtil.create(color),
|
|
2009
|
+
offset: import_editor_props19.numberPropTypeUtil.create(offset)
|
|
2010
|
+
})
|
|
2011
|
+
)
|
|
2012
|
+
)
|
|
2013
|
+
});
|
|
2014
|
+
const normalizeValue = () => {
|
|
2015
|
+
if (!value) {
|
|
2016
|
+
return;
|
|
2017
|
+
}
|
|
2018
|
+
const { type, angle, stops, positions } = value;
|
|
2019
|
+
return {
|
|
2020
|
+
type: type.value,
|
|
2021
|
+
angle: angle.value,
|
|
2022
|
+
stops: stops.value.map(({ value: { color, offset } }) => ({
|
|
2023
|
+
color: color.value,
|
|
2024
|
+
offset: offset.value
|
|
2025
|
+
})),
|
|
2026
|
+
positions: positions?.value.split(" ")
|
|
2027
|
+
};
|
|
2028
|
+
};
|
|
2029
|
+
return /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
|
|
2030
|
+
import_ui29.UnstableGradientBox,
|
|
2031
|
+
{
|
|
2032
|
+
sx: { width: "auto", padding: 1.5 },
|
|
2033
|
+
value: normalizeValue(),
|
|
2034
|
+
onChange: handleChange
|
|
2035
|
+
}
|
|
2036
|
+
));
|
|
2037
|
+
});
|
|
2038
|
+
var initialBackgroundGradientOverlay = import_editor_props19.backgroundGradientOverlayPropTypeUtil.create({
|
|
2039
|
+
type: import_editor_props19.stringPropTypeUtil.create("linear"),
|
|
2040
|
+
angle: import_editor_props19.numberPropTypeUtil.create(180),
|
|
2041
|
+
stops: import_editor_props19.gradientColorStopPropTypeUtil.create([
|
|
2042
|
+
import_editor_props19.colorStopPropTypeUtil.create({
|
|
2043
|
+
color: import_editor_props19.stringPropTypeUtil.create("var(--primary-color)"),
|
|
2044
|
+
offset: import_editor_props19.numberPropTypeUtil.create(0)
|
|
2045
|
+
}),
|
|
2046
|
+
import_editor_props19.colorStopPropTypeUtil.create({
|
|
2047
|
+
color: import_editor_props19.colorPropTypeUtil.create("rgb(255,255,255)"),
|
|
2048
|
+
offset: import_editor_props19.numberPropTypeUtil.create(100)
|
|
2049
|
+
})
|
|
2050
|
+
])
|
|
2051
|
+
});
|
|
2052
|
+
|
|
2053
|
+
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
2054
|
+
var React35 = __toESM(require("react"));
|
|
2055
|
+
var import_icons10 = require("@elementor/icons");
|
|
2056
|
+
var import_ui30 = require("@elementor/ui");
|
|
1972
2057
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1973
2058
|
var attachmentControlOptions = [
|
|
1974
2059
|
{
|
|
1975
2060
|
value: "fixed",
|
|
1976
2061
|
label: (0, import_i18n12.__)("Fixed", "elementor"),
|
|
1977
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2062
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(import_icons10.PinIcon, { fontSize: size }),
|
|
1978
2063
|
showTooltip: true
|
|
1979
2064
|
},
|
|
1980
2065
|
{
|
|
1981
2066
|
value: "scroll",
|
|
1982
2067
|
label: (0, import_i18n12.__)("Scroll", "elementor"),
|
|
1983
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2068
|
+
renderContent: ({ size }) => /* @__PURE__ */ React35.createElement(import_icons10.PinnedOffIcon, { fontSize: size }),
|
|
1984
2069
|
showTooltip: true
|
|
1985
2070
|
}
|
|
1986
2071
|
];
|
|
1987
2072
|
var BackgroundImageOverlayAttachment = () => {
|
|
1988
|
-
return /* @__PURE__ */
|
|
2073
|
+
return /* @__PURE__ */ React35.createElement(PopoverGridContainer, null, /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, (0, import_i18n12.__)("Attachment", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui30.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React35.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
1989
2074
|
};
|
|
1990
2075
|
|
|
1991
2076
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
1992
|
-
var
|
|
1993
|
-
var
|
|
2077
|
+
var React36 = __toESM(require("react"));
|
|
2078
|
+
var import_editor_props20 = require("@elementor/editor-props");
|
|
1994
2079
|
var import_icons11 = require("@elementor/icons");
|
|
1995
|
-
var
|
|
2080
|
+
var import_ui31 = require("@elementor/ui");
|
|
1996
2081
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1997
2082
|
var backgroundPositionOptions = [
|
|
1998
2083
|
{ label: (0, import_i18n13.__)("Center center", "elementor"), value: "center center" },
|
|
@@ -2007,8 +2092,8 @@ var backgroundPositionOptions = [
|
|
|
2007
2092
|
{ label: (0, import_i18n13.__)("Custom", "elementor"), value: "custom" }
|
|
2008
2093
|
];
|
|
2009
2094
|
var BackgroundImageOverlayPosition = () => {
|
|
2010
|
-
const backgroundImageOffsetContext = useBoundProp(
|
|
2011
|
-
const stringPropContext = useBoundProp(
|
|
2095
|
+
const backgroundImageOffsetContext = useBoundProp(import_editor_props20.backgroundImagePositionOffsetPropTypeUtil);
|
|
2096
|
+
const stringPropContext = useBoundProp(import_editor_props20.stringPropTypeUtil);
|
|
2012
2097
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
2013
2098
|
const handlePositionChange = (event) => {
|
|
2014
2099
|
const value = event.target.value || null;
|
|
@@ -2018,88 +2103,88 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
2018
2103
|
stringPropContext.setValue(value);
|
|
2019
2104
|
}
|
|
2020
2105
|
};
|
|
2021
|
-
return /* @__PURE__ */
|
|
2022
|
-
|
|
2106
|
+
return /* @__PURE__ */ React36.createElement(import_ui31.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, (0, import_i18n13.__)("Position", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React36.createElement(
|
|
2107
|
+
import_ui31.Select,
|
|
2023
2108
|
{
|
|
2024
2109
|
size: "tiny",
|
|
2025
2110
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? "",
|
|
2026
2111
|
onChange: handlePositionChange,
|
|
2027
2112
|
fullWidth: true
|
|
2028
2113
|
},
|
|
2029
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
2030
|
-
)))), isCustom ? /* @__PURE__ */
|
|
2114
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React36.createElement(import_ui31.MenuItem, { key: value, value: value ?? "" }, label))
|
|
2115
|
+
)))), isCustom ? /* @__PURE__ */ React36.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: /* @__PURE__ */ React36.createElement(import_icons11.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: /* @__PURE__ */ React36.createElement(import_icons11.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
|
|
2031
2116
|
};
|
|
2032
2117
|
|
|
2033
2118
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
2034
|
-
var
|
|
2119
|
+
var React37 = __toESM(require("react"));
|
|
2035
2120
|
var import_icons12 = require("@elementor/icons");
|
|
2036
|
-
var
|
|
2121
|
+
var import_ui32 = require("@elementor/ui");
|
|
2037
2122
|
var import_i18n14 = require("@wordpress/i18n");
|
|
2038
2123
|
var repeatControlOptions = [
|
|
2039
2124
|
{
|
|
2040
2125
|
value: "repeat",
|
|
2041
2126
|
label: (0, import_i18n14.__)("Repeat", "elementor"),
|
|
2042
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2127
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons12.GridDotsIcon, { fontSize: size }),
|
|
2043
2128
|
showTooltip: true
|
|
2044
2129
|
},
|
|
2045
2130
|
{
|
|
2046
2131
|
value: "repeat-x",
|
|
2047
2132
|
label: (0, import_i18n14.__)("Repeat-x", "elementor"),
|
|
2048
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2133
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons12.DotsHorizontalIcon, { fontSize: size }),
|
|
2049
2134
|
showTooltip: true
|
|
2050
2135
|
},
|
|
2051
2136
|
{
|
|
2052
2137
|
value: "repeat-y",
|
|
2053
2138
|
label: (0, import_i18n14.__)("Repeat-y", "elementor"),
|
|
2054
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2139
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons12.DotsVerticalIcon, { fontSize: size }),
|
|
2055
2140
|
showTooltip: true
|
|
2056
2141
|
},
|
|
2057
2142
|
{
|
|
2058
2143
|
value: "no-repeat",
|
|
2059
2144
|
label: (0, import_i18n14.__)("No-repeat", "elementor"),
|
|
2060
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2145
|
+
renderContent: ({ size }) => /* @__PURE__ */ React37.createElement(import_icons12.XIcon, { fontSize: size }),
|
|
2061
2146
|
showTooltip: true
|
|
2062
2147
|
}
|
|
2063
2148
|
];
|
|
2064
2149
|
var BackgroundImageOverlayRepeat = () => {
|
|
2065
|
-
return /* @__PURE__ */
|
|
2150
|
+
return /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, (0, import_i18n14.__)("Repeat", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React37.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
2066
2151
|
};
|
|
2067
2152
|
|
|
2068
2153
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
2069
|
-
var
|
|
2070
|
-
var
|
|
2154
|
+
var React38 = __toESM(require("react"));
|
|
2155
|
+
var import_editor_props21 = require("@elementor/editor-props");
|
|
2071
2156
|
var import_icons13 = require("@elementor/icons");
|
|
2072
|
-
var
|
|
2157
|
+
var import_ui33 = require("@elementor/ui");
|
|
2073
2158
|
var import_i18n15 = require("@wordpress/i18n");
|
|
2074
2159
|
var sizeControlOptions = [
|
|
2075
2160
|
{
|
|
2076
2161
|
value: "auto",
|
|
2077
2162
|
label: (0, import_i18n15.__)("Auto", "elementor"),
|
|
2078
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2163
|
+
renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.LetterAIcon, { fontSize: size }),
|
|
2079
2164
|
showTooltip: true
|
|
2080
2165
|
},
|
|
2081
2166
|
{
|
|
2082
2167
|
value: "cover",
|
|
2083
2168
|
label: (0, import_i18n15.__)("Cover", "elementor"),
|
|
2084
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2169
|
+
renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.ArrowsMaximizeIcon, { fontSize: size }),
|
|
2085
2170
|
showTooltip: true
|
|
2086
2171
|
},
|
|
2087
2172
|
{
|
|
2088
2173
|
value: "contain",
|
|
2089
2174
|
label: (0, import_i18n15.__)("Contain", "elementor"),
|
|
2090
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2175
|
+
renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.ArrowBarBothIcon, { fontSize: size }),
|
|
2091
2176
|
showTooltip: true
|
|
2092
2177
|
},
|
|
2093
2178
|
{
|
|
2094
2179
|
value: "custom",
|
|
2095
2180
|
label: (0, import_i18n15.__)("Custom", "elementor"),
|
|
2096
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2181
|
+
renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons13.PencilIcon, { fontSize: size }),
|
|
2097
2182
|
showTooltip: true
|
|
2098
2183
|
}
|
|
2099
2184
|
];
|
|
2100
2185
|
var BackgroundImageOverlaySize = () => {
|
|
2101
|
-
const backgroundImageScaleContext = useBoundProp(
|
|
2102
|
-
const stringPropContext = useBoundProp(
|
|
2186
|
+
const backgroundImageScaleContext = useBoundProp(import_editor_props21.backgroundImageSizeScalePropTypeUtil);
|
|
2187
|
+
const stringPropContext = useBoundProp(import_editor_props21.stringPropTypeUtil);
|
|
2103
2188
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
2104
2189
|
const handleSizeChange = (size) => {
|
|
2105
2190
|
if (size === "custom") {
|
|
@@ -2108,7 +2193,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2108
2193
|
stringPropContext.setValue(size);
|
|
2109
2194
|
}
|
|
2110
2195
|
};
|
|
2111
|
-
return /* @__PURE__ */
|
|
2196
|
+
return /* @__PURE__ */ React38.createElement(import_ui33.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(PopoverGridContainer, null, /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, (0, import_i18n15.__)("Size", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React38.createElement(
|
|
2112
2197
|
ControlToggleButtonGroup,
|
|
2113
2198
|
{
|
|
2114
2199
|
exclusive: true,
|
|
@@ -2116,16 +2201,16 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2116
2201
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
|
|
2117
2202
|
onChange: handleSizeChange
|
|
2118
2203
|
}
|
|
2119
|
-
)))), isCustom ? /* @__PURE__ */
|
|
2204
|
+
)))), isCustom ? /* @__PURE__ */ React38.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(PopoverGridContainer, null, /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React38.createElement(
|
|
2120
2205
|
SizeControl,
|
|
2121
2206
|
{
|
|
2122
|
-
startIcon: /* @__PURE__ */
|
|
2207
|
+
startIcon: /* @__PURE__ */ React38.createElement(import_icons13.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
2123
2208
|
extendedValues: ["auto"]
|
|
2124
2209
|
}
|
|
2125
|
-
))), /* @__PURE__ */
|
|
2210
|
+
))), /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React38.createElement(
|
|
2126
2211
|
SizeControl,
|
|
2127
2212
|
{
|
|
2128
|
-
startIcon: /* @__PURE__ */
|
|
2213
|
+
startIcon: /* @__PURE__ */ React38.createElement(import_icons13.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
2129
2214
|
extendedValues: ["auto"]
|
|
2130
2215
|
}
|
|
2131
2216
|
)))))) : null);
|
|
@@ -2133,18 +2218,30 @@ var BackgroundImageOverlaySize = () => {
|
|
|
2133
2218
|
|
|
2134
2219
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
2135
2220
|
var import_react12 = require("react");
|
|
2136
|
-
var
|
|
2137
|
-
var
|
|
2221
|
+
var import_editor_props22 = require("@elementor/editor-props");
|
|
2222
|
+
var import_ui34 = require("@elementor/ui");
|
|
2138
2223
|
var useBackgroundTabsHistory = ({
|
|
2139
2224
|
color: initialBackgroundColorOverlay2,
|
|
2140
|
-
image: initialBackgroundImageOverlay
|
|
2225
|
+
image: initialBackgroundImageOverlay,
|
|
2226
|
+
gradient: initialBackgroundGradientOverlay2
|
|
2141
2227
|
}) => {
|
|
2142
|
-
const { value: imageValue, setValue: setImageValue } = useBoundProp(
|
|
2143
|
-
const { value: colorValue, setValue: setColorValue } = useBoundProp(
|
|
2144
|
-
const {
|
|
2228
|
+
const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props22.backgroundImageOverlayPropTypeUtil);
|
|
2229
|
+
const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props22.backgroundColorOverlayPropTypeUtil);
|
|
2230
|
+
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props22.backgroundGradientOverlayPropTypeUtil);
|
|
2231
|
+
const getCurrentOverlayType = () => {
|
|
2232
|
+
if (colorValue) {
|
|
2233
|
+
return "color";
|
|
2234
|
+
}
|
|
2235
|
+
if (gradientValue) {
|
|
2236
|
+
return "gradient";
|
|
2237
|
+
}
|
|
2238
|
+
return "image";
|
|
2239
|
+
};
|
|
2240
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui34.useTabs)(getCurrentOverlayType());
|
|
2145
2241
|
const valuesHistory = (0, import_react12.useRef)({
|
|
2146
2242
|
image: initialBackgroundImageOverlay,
|
|
2147
|
-
color: initialBackgroundColorOverlay2
|
|
2243
|
+
color: initialBackgroundColorOverlay2,
|
|
2244
|
+
gradient: initialBackgroundGradientOverlay2
|
|
2148
2245
|
});
|
|
2149
2246
|
const saveToHistory = (key, value) => {
|
|
2150
2247
|
if (value) {
|
|
@@ -2156,10 +2253,17 @@ var useBackgroundTabsHistory = ({
|
|
|
2156
2253
|
case "image":
|
|
2157
2254
|
setImageValue(valuesHistory.current.image);
|
|
2158
2255
|
saveToHistory("color", colorValue);
|
|
2256
|
+
saveToHistory("gradient", gradientValue);
|
|
2257
|
+
break;
|
|
2258
|
+
case "gradient":
|
|
2259
|
+
setGradientValue(valuesHistory.current.gradient);
|
|
2260
|
+
saveToHistory("color", colorValue);
|
|
2261
|
+
saveToHistory("image", imageValue);
|
|
2159
2262
|
break;
|
|
2160
2263
|
case "color":
|
|
2161
2264
|
setColorValue(valuesHistory.current.color);
|
|
2162
2265
|
saveToHistory("image", imageValue);
|
|
2266
|
+
saveToHistory("gradient", gradientValue);
|
|
2163
2267
|
}
|
|
2164
2268
|
return getTabsProps().onChange(e, tabName);
|
|
2165
2269
|
};
|
|
@@ -2206,8 +2310,8 @@ var backgroundResolutionOptions = [
|
|
|
2206
2310
|
{ label: (0, import_i18n16.__)("Full", "elementor"), value: "full" }
|
|
2207
2311
|
];
|
|
2208
2312
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
2209
|
-
const { propType, value: overlayValues, setValue } = useBoundProp(
|
|
2210
|
-
return /* @__PURE__ */
|
|
2313
|
+
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props23.backgroundOverlayPropTypeUtil);
|
|
2314
|
+
return /* @__PURE__ */ React39.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React39.createElement(
|
|
2211
2315
|
Repeater,
|
|
2212
2316
|
{
|
|
2213
2317
|
values: overlayValues ?? [],
|
|
@@ -2223,58 +2327,73 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
2223
2327
|
));
|
|
2224
2328
|
});
|
|
2225
2329
|
var ItemContent2 = ({ bind }) => {
|
|
2226
|
-
return /* @__PURE__ */
|
|
2330
|
+
return /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React39.createElement(Content2, null));
|
|
2227
2331
|
};
|
|
2228
2332
|
var Content2 = () => {
|
|
2229
2333
|
const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
|
|
2230
2334
|
image: getInitialBackgroundOverlay().value,
|
|
2231
|
-
color: initialBackgroundColorOverlay.value
|
|
2335
|
+
color: initialBackgroundColorOverlay.value,
|
|
2336
|
+
gradient: initialBackgroundGradientOverlay.value
|
|
2232
2337
|
});
|
|
2233
|
-
return /* @__PURE__ */
|
|
2338
|
+
return /* @__PURE__ */ React39.createElement(import_ui35.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React39.createElement(import_ui35.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React39.createElement(import_ui35.Tabs, { ...getTabsProps(), "aria-label": (0, import_i18n16.__)("Background Overlay", "elementor") }, /* @__PURE__ */ React39.createElement(import_ui35.Tab, { label: (0, import_i18n16.__)("Image", "elementor"), ...getTabProps("image") }), /* @__PURE__ */ React39.createElement(import_ui35.Tab, { label: (0, import_i18n16.__)("Gradient", "elementor"), ...getTabProps("gradient") }), /* @__PURE__ */ React39.createElement(import_ui35.Tab, { label: (0, import_i18n16.__)("Color", "elementor"), ...getTabProps("color") }))), /* @__PURE__ */ React39.createElement(import_ui35.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React39.createElement(PopoverContent, null, /* @__PURE__ */ React39.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React39.createElement(import_ui35.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React39.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React39.createElement(import_ui35.TabPanel, { ...getTabPanelProps("color"), sx: { p: 1.5 } }, /* @__PURE__ */ React39.createElement(ColorControl, { propTypeUtil: import_editor_props23.backgroundColorOverlayPropTypeUtil })));
|
|
2234
2339
|
};
|
|
2235
2340
|
var ItemIcon2 = ({ value }) => {
|
|
2236
2341
|
switch (value.$$type) {
|
|
2237
2342
|
case "background-image-overlay":
|
|
2238
|
-
return /* @__PURE__ */
|
|
2343
|
+
return /* @__PURE__ */ React39.createElement(ItemIconImage, { value });
|
|
2239
2344
|
case "background-color-overlay":
|
|
2240
|
-
return /* @__PURE__ */
|
|
2345
|
+
return /* @__PURE__ */ React39.createElement(ItemIconColor, { value });
|
|
2346
|
+
case "background-gradient-overlay":
|
|
2347
|
+
return /* @__PURE__ */ React39.createElement(ItemIconGradient, { value });
|
|
2241
2348
|
default:
|
|
2242
2349
|
return null;
|
|
2243
2350
|
}
|
|
2244
2351
|
};
|
|
2245
2352
|
var ItemIconColor = ({ value }) => {
|
|
2246
|
-
return /* @__PURE__ */
|
|
2353
|
+
return /* @__PURE__ */ React39.createElement(import_ui35.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
|
|
2247
2354
|
};
|
|
2248
2355
|
var ItemIconImage = ({ value }) => {
|
|
2249
2356
|
const { imageUrl } = useImage(value);
|
|
2250
|
-
return /* @__PURE__ */
|
|
2357
|
+
return /* @__PURE__ */ React39.createElement(import_ui35.CardMedia, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
|
|
2358
|
+
};
|
|
2359
|
+
var ItemIconGradient = ({ value }) => {
|
|
2360
|
+
const gradient = getGradientValue(value);
|
|
2361
|
+
return /* @__PURE__ */ React39.createElement(import_ui35.UnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
2251
2362
|
};
|
|
2252
2363
|
var ItemLabel2 = ({ value }) => {
|
|
2253
2364
|
switch (value.$$type) {
|
|
2254
2365
|
case "background-image-overlay":
|
|
2255
|
-
return /* @__PURE__ */
|
|
2366
|
+
return /* @__PURE__ */ React39.createElement(ItemLabelImage, { value });
|
|
2256
2367
|
case "background-color-overlay":
|
|
2257
|
-
return /* @__PURE__ */
|
|
2368
|
+
return /* @__PURE__ */ React39.createElement(ItemLabelColor, { value });
|
|
2369
|
+
case "background-gradient-overlay":
|
|
2370
|
+
return /* @__PURE__ */ React39.createElement(ItemLabelGradient, { value });
|
|
2258
2371
|
default:
|
|
2259
2372
|
return null;
|
|
2260
2373
|
}
|
|
2261
2374
|
};
|
|
2262
2375
|
var ItemLabelColor = ({ value }) => {
|
|
2263
|
-
return /* @__PURE__ */
|
|
2376
|
+
return /* @__PURE__ */ React39.createElement("span", null, value.value);
|
|
2264
2377
|
};
|
|
2265
2378
|
var ItemLabelImage = ({ value }) => {
|
|
2266
2379
|
const { imageTitle } = useImage(value);
|
|
2267
|
-
return /* @__PURE__ */
|
|
2380
|
+
return /* @__PURE__ */ React39.createElement("span", null, imageTitle);
|
|
2381
|
+
};
|
|
2382
|
+
var ItemLabelGradient = ({ value }) => {
|
|
2383
|
+
if (value.value.type.value === "linear") {
|
|
2384
|
+
return /* @__PURE__ */ React39.createElement("span", null, (0, import_i18n16.__)("Linear Gradient", "elementor"));
|
|
2385
|
+
}
|
|
2386
|
+
return /* @__PURE__ */ React39.createElement("span", null, (0, import_i18n16.__)("Radial Gradient", "elementor"));
|
|
2268
2387
|
};
|
|
2269
2388
|
var ImageOverlayContent = () => {
|
|
2270
|
-
const propContext = useBoundProp(
|
|
2271
|
-
return /* @__PURE__ */
|
|
2389
|
+
const propContext = useBoundProp(import_editor_props23.backgroundImageOverlayPropTypeUtil);
|
|
2390
|
+
return /* @__PURE__ */ React39.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React39.createElement(import_ui35.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React39.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(
|
|
2272
2391
|
ImageControl,
|
|
2273
2392
|
{
|
|
2274
2393
|
resolutionLabel: (0, import_i18n16.__)("Resolution", "elementor"),
|
|
2275
2394
|
sizes: backgroundResolutionOptions
|
|
2276
2395
|
}
|
|
2277
|
-
)))), /* @__PURE__ */
|
|
2396
|
+
)))), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React39.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React39.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React39.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React39.createElement(BackgroundImageOverlayAttachment, null)));
|
|
2278
2397
|
};
|
|
2279
2398
|
var useImage = (image) => {
|
|
2280
2399
|
let imageTitle, imageUrl = null;
|
|
@@ -2290,11 +2409,19 @@ var useImage = (image) => {
|
|
|
2290
2409
|
}
|
|
2291
2410
|
return { imageTitle, imageUrl };
|
|
2292
2411
|
};
|
|
2412
|
+
var getGradientValue = (value) => {
|
|
2413
|
+
const gradient = value.value;
|
|
2414
|
+
const stops = gradient.stops.value?.map(({ value: { color, offset } }) => `${color.value} ${offset.value ?? 0}%`)?.join(",");
|
|
2415
|
+
if (gradient.type.value === "linear") {
|
|
2416
|
+
return `linear-gradient(${gradient.angle.value}deg, ${stops})`;
|
|
2417
|
+
}
|
|
2418
|
+
return `radial-gradient(circle at ${gradient.positions.value}, ${stops})`;
|
|
2419
|
+
};
|
|
2293
2420
|
|
|
2294
2421
|
// src/controls/background-control/background-control.tsx
|
|
2295
2422
|
var BackgroundControl = createControl(() => {
|
|
2296
|
-
const propContext = useBoundProp(
|
|
2297
|
-
return /* @__PURE__ */
|
|
2423
|
+
const propContext = useBoundProp(import_editor_props24.backgroundPropTypeUtil);
|
|
2424
|
+
return /* @__PURE__ */ React40.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React40.createElement(SectionContent, null, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React40.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React40.createElement(import_ui36.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, (0, import_i18n17.__)("Color", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ColorControl, null))))));
|
|
2298
2425
|
});
|
|
2299
2426
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2300
2427
|
0 && (module.exports = {
|