@elementor/editor-editing-panel 1.32.0 → 1.33.1
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 +23 -0
- package/dist/index.js +165 -166
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +22 -23
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -6
- package/src/components/settings-tab.tsx +7 -3
- package/src/components/style-sections/position-section/position-section.tsx +9 -2
- package/src/controls-registry/control-type-container.tsx +2 -8
- package/src/controls-registry/control.tsx +2 -2
- package/src/controls-registry/controls-registry.tsx +3 -4
- package/src/dynamics/components/dynamic-selection-control.tsx +2 -2
- package/src/sync/types.ts +1 -0
package/dist/index.js
CHANGED
|
@@ -923,7 +923,7 @@ var import_editor_panels = require("@elementor/editor-panels");
|
|
|
923
923
|
var import_editor_ui3 = require("@elementor/editor-ui");
|
|
924
924
|
var import_icons23 = require("@elementor/icons");
|
|
925
925
|
var import_session4 = require("@elementor/session");
|
|
926
|
-
var
|
|
926
|
+
var import_ui58 = require("@elementor/ui");
|
|
927
927
|
var import_i18n46 = require("@wordpress/i18n");
|
|
928
928
|
|
|
929
929
|
// src/controls-actions.ts
|
|
@@ -982,7 +982,7 @@ function EditorPanelErrorFallback() {
|
|
|
982
982
|
// src/components/editing-panel-tabs.tsx
|
|
983
983
|
var React69 = __toESM(require("react"));
|
|
984
984
|
var import_react24 = require("react");
|
|
985
|
-
var
|
|
985
|
+
var import_ui57 = require("@elementor/ui");
|
|
986
986
|
var import_i18n45 = require("@wordpress/i18n");
|
|
987
987
|
|
|
988
988
|
// src/contexts/scroll-context.tsx
|
|
@@ -1028,6 +1028,7 @@ function useScrollDirection() {
|
|
|
1028
1028
|
var React16 = __toESM(require("react"));
|
|
1029
1029
|
var import_editor_controls4 = require("@elementor/editor-controls");
|
|
1030
1030
|
var import_session = require("@elementor/session");
|
|
1031
|
+
var import_ui14 = require("@elementor/ui");
|
|
1031
1032
|
|
|
1032
1033
|
// src/controls-registry/control.tsx
|
|
1033
1034
|
var React11 = __toESM(require("react"));
|
|
@@ -1044,12 +1045,12 @@ var controlTypes = {
|
|
|
1044
1045
|
link: { component: import_editor_controls2.LinkControl, layout: "full" },
|
|
1045
1046
|
url: { component: import_editor_controls2.UrlControl, layout: "full" }
|
|
1046
1047
|
};
|
|
1047
|
-
var
|
|
1048
|
-
var
|
|
1048
|
+
var getControl = (type) => controlTypes[type]?.component;
|
|
1049
|
+
var getDefaultLayout = (type) => controlTypes[type].layout;
|
|
1049
1050
|
|
|
1050
1051
|
// src/controls-registry/control.tsx
|
|
1051
1052
|
var Control = ({ props, type }) => {
|
|
1052
|
-
const ControlByType =
|
|
1053
|
+
const ControlByType = getControl(type);
|
|
1053
1054
|
const { element } = useElement();
|
|
1054
1055
|
if (!ControlByType) {
|
|
1055
1056
|
throw new ControlTypeNotFoundError({
|
|
@@ -1062,11 +1063,7 @@ var Control = ({ props, type }) => {
|
|
|
1062
1063
|
// src/controls-registry/control-type-container.tsx
|
|
1063
1064
|
var React12 = __toESM(require("react"));
|
|
1064
1065
|
var import_ui10 = require("@elementor/ui");
|
|
1065
|
-
var ControlTypeContainer = ({
|
|
1066
|
-
controlType,
|
|
1067
|
-
children
|
|
1068
|
-
}) => {
|
|
1069
|
-
const layout = getLayoutByType(controlType);
|
|
1066
|
+
var ControlTypeContainer = ({ children, layout }) => {
|
|
1070
1067
|
return /* @__PURE__ */ React12.createElement(StyledContainer, { layout }, children);
|
|
1071
1068
|
};
|
|
1072
1069
|
var StyledContainer = (0, import_ui10.styled)(import_ui10.Box, {
|
|
@@ -1185,10 +1182,11 @@ var SettingsTab = () => {
|
|
|
1185
1182
|
})));
|
|
1186
1183
|
};
|
|
1187
1184
|
var Control2 = ({ control }) => {
|
|
1188
|
-
if (!
|
|
1185
|
+
if (!getControl(control.type)) {
|
|
1189
1186
|
return null;
|
|
1190
1187
|
}
|
|
1191
|
-
|
|
1188
|
+
const layout = control.meta?.layout || getDefaultLayout(control.type);
|
|
1189
|
+
return /* @__PURE__ */ React16.createElement(SettingsField, { bind: control.bind }, control.meta?.topDivider && /* @__PURE__ */ React16.createElement(import_ui14.Divider, null), /* @__PURE__ */ React16.createElement(ControlTypeContainer, { layout }, control.label ? /* @__PURE__ */ React16.createElement(import_editor_controls4.ControlFormLabel, null, control.label) : null, /* @__PURE__ */ React16.createElement(Control, { type: control.type, props: control.props })));
|
|
1192
1190
|
};
|
|
1193
1191
|
|
|
1194
1192
|
// src/components/style-tab.tsx
|
|
@@ -1197,7 +1195,7 @@ var import_react23 = require("react");
|
|
|
1197
1195
|
var import_editor_props7 = require("@elementor/editor-props");
|
|
1198
1196
|
var import_editor_responsive2 = require("@elementor/editor-responsive");
|
|
1199
1197
|
var import_session3 = require("@elementor/session");
|
|
1200
|
-
var
|
|
1198
|
+
var import_ui56 = require("@elementor/ui");
|
|
1201
1199
|
var import_i18n44 = require("@wordpress/i18n");
|
|
1202
1200
|
|
|
1203
1201
|
// src/contexts/styles-inheritance-context.tsx
|
|
@@ -1589,7 +1587,7 @@ var React19 = __toESM(require("react"));
|
|
|
1589
1587
|
var import_react17 = require("react");
|
|
1590
1588
|
var import_editor_controls5 = require("@elementor/editor-controls");
|
|
1591
1589
|
var import_editor_styles_repository7 = require("@elementor/editor-styles-repository");
|
|
1592
|
-
var
|
|
1590
|
+
var import_ui16 = require("@elementor/ui");
|
|
1593
1591
|
var import_i18n5 = require("@wordpress/i18n");
|
|
1594
1592
|
|
|
1595
1593
|
// src/sync/get-experiments-config.ts
|
|
@@ -1603,7 +1601,7 @@ var React18 = __toESM(require("react"));
|
|
|
1603
1601
|
var import_react16 = require("react");
|
|
1604
1602
|
var import_editor_canvas = require("@elementor/editor-canvas");
|
|
1605
1603
|
var import_editor_styles2 = require("@elementor/editor-styles");
|
|
1606
|
-
var
|
|
1604
|
+
var import_ui15 = require("@elementor/ui");
|
|
1607
1605
|
|
|
1608
1606
|
// src/hooks/use-normalized-inheritance-chain-items.tsx
|
|
1609
1607
|
var import_react15 = require("react");
|
|
@@ -1655,8 +1653,8 @@ var StyleIndicatorInfotip = ({ inheritanceChain, bind }) => {
|
|
|
1655
1653
|
});
|
|
1656
1654
|
}, [bind]);
|
|
1657
1655
|
const items3 = useNormalizedInheritanceChainItems(inheritanceChain, bind, resolve);
|
|
1658
|
-
return /* @__PURE__ */ React18.createElement(
|
|
1659
|
-
|
|
1656
|
+
return /* @__PURE__ */ React18.createElement(import_ui15.Card, { elevation: 0, sx: { maxWidth: 320 } }, /* @__PURE__ */ React18.createElement(import_ui15.CardContent, { sx: { p: 1.5, pb: 2.5 } }, /* @__PURE__ */ React18.createElement(import_ui15.List, null, items3.map((item) => /* @__PURE__ */ React18.createElement(import_ui15.ListItem, { key: item.id }, /* @__PURE__ */ React18.createElement(
|
|
1657
|
+
import_ui15.ListItemText,
|
|
1660
1658
|
{
|
|
1661
1659
|
primary: `${item.breakpoint} | ${item.displayLabel}. ${item.value}`
|
|
1662
1660
|
}
|
|
@@ -1688,7 +1686,7 @@ var StylesInheritanceIndicator = () => {
|
|
|
1688
1686
|
}
|
|
1689
1687
|
const toggleOpen = () => setOpen((prev) => !prev);
|
|
1690
1688
|
return /* @__PURE__ */ React19.createElement(
|
|
1691
|
-
|
|
1689
|
+
import_ui16.Infotip,
|
|
1692
1690
|
{
|
|
1693
1691
|
placement: "top",
|
|
1694
1692
|
content: /* @__PURE__ */ React19.createElement(StyleIndicatorInfotip, { inheritanceChain, bind }),
|
|
@@ -1696,7 +1694,7 @@ var StylesInheritanceIndicator = () => {
|
|
|
1696
1694
|
onClose: () => setOpen(false),
|
|
1697
1695
|
trigger: "manual"
|
|
1698
1696
|
},
|
|
1699
|
-
/* @__PURE__ */ React19.createElement(
|
|
1697
|
+
/* @__PURE__ */ React19.createElement(import_ui16.IconButton, { onClick: toggleOpen, "aria-label": label }, /* @__PURE__ */ React19.createElement(StyleIndicator, { variant: variantType }))
|
|
1700
1698
|
);
|
|
1701
1699
|
};
|
|
1702
1700
|
var getLabel = ({ isFinalValue, hasValue }) => {
|
|
@@ -1765,13 +1763,13 @@ var React31 = __toESM(require("react"));
|
|
|
1765
1763
|
|
|
1766
1764
|
// src/components/panel-divider.tsx
|
|
1767
1765
|
var React22 = __toESM(require("react"));
|
|
1768
|
-
var
|
|
1769
|
-
var PanelDivider = () => /* @__PURE__ */ React22.createElement(
|
|
1766
|
+
var import_ui17 = require("@elementor/ui");
|
|
1767
|
+
var PanelDivider = () => /* @__PURE__ */ React22.createElement(import_ui17.Divider, { sx: { my: 0.5 } });
|
|
1770
1768
|
|
|
1771
1769
|
// src/components/section-content.tsx
|
|
1772
1770
|
var React23 = __toESM(require("react"));
|
|
1773
|
-
var
|
|
1774
|
-
var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React23.createElement(
|
|
1771
|
+
var import_ui18 = require("@elementor/ui");
|
|
1772
|
+
var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React23.createElement(import_ui18.Stack, { gap, sx: { ...sx } }, children);
|
|
1775
1773
|
|
|
1776
1774
|
// src/components/style-sections/border-section/border-field.tsx
|
|
1777
1775
|
var React29 = __toESM(require("react"));
|
|
@@ -1780,21 +1778,21 @@ var import_i18n9 = require("@wordpress/i18n");
|
|
|
1780
1778
|
// src/components/add-or-remove-content.tsx
|
|
1781
1779
|
var React25 = __toESM(require("react"));
|
|
1782
1780
|
var import_icons5 = require("@elementor/icons");
|
|
1783
|
-
var
|
|
1781
|
+
var import_ui20 = require("@elementor/ui");
|
|
1784
1782
|
|
|
1785
1783
|
// src/components/control-label.tsx
|
|
1786
1784
|
var React24 = __toESM(require("react"));
|
|
1787
1785
|
var import_editor_controls8 = require("@elementor/editor-controls");
|
|
1788
|
-
var
|
|
1786
|
+
var import_ui19 = require("@elementor/ui");
|
|
1789
1787
|
var ControlLabel = ({ children }) => {
|
|
1790
|
-
return /* @__PURE__ */ React24.createElement(
|
|
1788
|
+
return /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 1 }, /* @__PURE__ */ React24.createElement(import_editor_controls8.ControlFormLabel, null, children), /* @__PURE__ */ React24.createElement(import_editor_controls8.ControlAdornments, null));
|
|
1791
1789
|
};
|
|
1792
1790
|
|
|
1793
1791
|
// src/components/add-or-remove-content.tsx
|
|
1794
1792
|
var SIZE2 = "tiny";
|
|
1795
1793
|
var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
1796
1794
|
return /* @__PURE__ */ React25.createElement(SectionContent, null, /* @__PURE__ */ React25.createElement(
|
|
1797
|
-
|
|
1795
|
+
import_ui20.Stack,
|
|
1798
1796
|
{
|
|
1799
1797
|
direction: "row",
|
|
1800
1798
|
sx: {
|
|
@@ -1804,23 +1802,23 @@ var AddOrRemoveContent = ({ isAdded, label, onAdd, onRemove, children }) => {
|
|
|
1804
1802
|
}
|
|
1805
1803
|
},
|
|
1806
1804
|
/* @__PURE__ */ React25.createElement(ControlLabel, null, label),
|
|
1807
|
-
isAdded ? /* @__PURE__ */ React25.createElement(
|
|
1808
|
-
), /* @__PURE__ */ React25.createElement(
|
|
1805
|
+
isAdded ? /* @__PURE__ */ React25.createElement(import_ui20.IconButton, { size: SIZE2, onClick: onRemove, "aria-label": "Remove" }, /* @__PURE__ */ React25.createElement(import_icons5.MinusIcon, { fontSize: SIZE2 })) : /* @__PURE__ */ React25.createElement(import_ui20.IconButton, { size: SIZE2, onClick: onAdd, "aria-label": "Add" }, /* @__PURE__ */ React25.createElement(import_icons5.PlusIcon, { fontSize: SIZE2 }))
|
|
1806
|
+
), /* @__PURE__ */ React25.createElement(import_ui20.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React25.createElement(SectionContent, null, children)));
|
|
1809
1807
|
};
|
|
1810
1808
|
|
|
1811
1809
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
1812
1810
|
var React26 = __toESM(require("react"));
|
|
1813
1811
|
var import_editor_controls9 = require("@elementor/editor-controls");
|
|
1814
|
-
var
|
|
1812
|
+
var import_ui21 = require("@elementor/ui");
|
|
1815
1813
|
var import_i18n6 = require("@wordpress/i18n");
|
|
1816
1814
|
var BorderColorField = () => {
|
|
1817
|
-
return /* @__PURE__ */ React26.createElement(StylesField, { bind: "border-color" }, /* @__PURE__ */ React26.createElement(
|
|
1815
|
+
return /* @__PURE__ */ React26.createElement(StylesField, { bind: "border-color" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, (0, import_i18n6.__)("Border color", "elementor"))), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(import_editor_controls9.ColorControl, null))));
|
|
1818
1816
|
};
|
|
1819
1817
|
|
|
1820
1818
|
// src/components/style-sections/border-section/border-style-field.tsx
|
|
1821
1819
|
var React27 = __toESM(require("react"));
|
|
1822
1820
|
var import_editor_controls10 = require("@elementor/editor-controls");
|
|
1823
|
-
var
|
|
1821
|
+
var import_ui22 = require("@elementor/ui");
|
|
1824
1822
|
var import_i18n7 = require("@wordpress/i18n");
|
|
1825
1823
|
var borderStyles = [
|
|
1826
1824
|
{ value: "none", label: (0, import_i18n7.__)("None", "elementor") },
|
|
@@ -1834,7 +1832,7 @@ var borderStyles = [
|
|
|
1834
1832
|
{ value: "outset", label: (0, import_i18n7.__)("Outset", "elementor") }
|
|
1835
1833
|
];
|
|
1836
1834
|
var BorderStyleField = () => {
|
|
1837
|
-
return /* @__PURE__ */ React27.createElement(StylesField, { bind: "border-style" }, /* @__PURE__ */ React27.createElement(
|
|
1835
|
+
return /* @__PURE__ */ React27.createElement(StylesField, { bind: "border-style" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Border type", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React27.createElement(import_editor_controls10.SelectControl, { options: borderStyles }))));
|
|
1838
1836
|
};
|
|
1839
1837
|
|
|
1840
1838
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
@@ -1842,20 +1840,20 @@ var React28 = __toESM(require("react"));
|
|
|
1842
1840
|
var import_editor_controls11 = require("@elementor/editor-controls");
|
|
1843
1841
|
var import_editor_props4 = require("@elementor/editor-props");
|
|
1844
1842
|
var import_icons6 = require("@elementor/icons");
|
|
1845
|
-
var
|
|
1843
|
+
var import_ui24 = require("@elementor/ui");
|
|
1846
1844
|
var import_i18n8 = require("@wordpress/i18n");
|
|
1847
1845
|
|
|
1848
1846
|
// src/hooks/use-direction.ts
|
|
1849
|
-
var
|
|
1847
|
+
var import_ui23 = require("@elementor/ui");
|
|
1850
1848
|
function useDirection() {
|
|
1851
|
-
const theme = (0,
|
|
1849
|
+
const theme = (0, import_ui23.useTheme)(), extendedWindow = window;
|
|
1852
1850
|
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!extendedWindow.elementorFrontend?.config?.is_rtl;
|
|
1853
1851
|
return { isSiteRtl, isUiRtl };
|
|
1854
1852
|
}
|
|
1855
1853
|
|
|
1856
1854
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
1857
|
-
var InlineStartIcon = (0,
|
|
1858
|
-
var InlineEndIcon = (0,
|
|
1855
|
+
var InlineStartIcon = (0, import_ui24.withDirection)(import_icons6.SideRightIcon);
|
|
1856
|
+
var InlineEndIcon = (0, import_ui24.withDirection)(import_icons6.SideLeftIcon);
|
|
1859
1857
|
var getEdges = (isSiteRtl) => [
|
|
1860
1858
|
{
|
|
1861
1859
|
label: (0, import_i18n8.__)("Top", "elementor"),
|
|
@@ -1930,12 +1928,12 @@ var React30 = __toESM(require("react"));
|
|
|
1930
1928
|
var import_editor_controls12 = require("@elementor/editor-controls");
|
|
1931
1929
|
var import_editor_props5 = require("@elementor/editor-props");
|
|
1932
1930
|
var import_icons7 = require("@elementor/icons");
|
|
1933
|
-
var
|
|
1931
|
+
var import_ui25 = require("@elementor/ui");
|
|
1934
1932
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1935
|
-
var StartStartIcon = (0,
|
|
1936
|
-
var StartEndIcon = (0,
|
|
1937
|
-
var EndStartIcon = (0,
|
|
1938
|
-
var EndEndIcon = (0,
|
|
1933
|
+
var StartStartIcon = (0, import_ui25.withDirection)(import_icons7.RadiusTopLeftIcon);
|
|
1934
|
+
var StartEndIcon = (0, import_ui25.withDirection)(import_icons7.RadiusTopRightIcon);
|
|
1935
|
+
var EndStartIcon = (0, import_ui25.withDirection)(import_icons7.RadiusBottomLeftIcon);
|
|
1936
|
+
var EndEndIcon = (0, import_ui25.withDirection)(import_icons7.RadiusBottomRightIcon);
|
|
1939
1937
|
var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n10.__)("Top right", "elementor") : (0, import_i18n10.__)("Top left", "elementor");
|
|
1940
1938
|
var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n10.__)("Top left", "elementor") : (0, import_i18n10.__)("Top right", "elementor");
|
|
1941
1939
|
var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n10.__)("Bottom right", "elementor") : (0, import_i18n10.__)("Bottom left", "elementor");
|
|
@@ -2021,13 +2019,13 @@ function useComputedStyle(elementId) {
|
|
|
2021
2019
|
var React34 = __toESM(require("react"));
|
|
2022
2020
|
var import_editor_controls14 = require("@elementor/editor-controls");
|
|
2023
2021
|
var import_icons8 = require("@elementor/icons");
|
|
2024
|
-
var
|
|
2022
|
+
var import_ui27 = require("@elementor/ui");
|
|
2025
2023
|
var import_i18n11 = require("@wordpress/i18n");
|
|
2026
2024
|
|
|
2027
2025
|
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
2028
2026
|
var React33 = __toESM(require("react"));
|
|
2029
2027
|
var import_react18 = require("react");
|
|
2030
|
-
var
|
|
2028
|
+
var import_ui26 = require("@elementor/ui");
|
|
2031
2029
|
var CLOCKWISE_ANGLES = {
|
|
2032
2030
|
row: 0,
|
|
2033
2031
|
column: 90,
|
|
@@ -2053,7 +2051,7 @@ var RotatedIcon = ({
|
|
|
2053
2051
|
};
|
|
2054
2052
|
var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existingRef) => {
|
|
2055
2053
|
const [direction] = useStylesField("flex-direction");
|
|
2056
|
-
const isRtl = "rtl" === (0,
|
|
2054
|
+
const isRtl = "rtl" === (0, import_ui26.useTheme)().direction;
|
|
2057
2055
|
const rotationMultiplier = isRtl ? -1 : 1;
|
|
2058
2056
|
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
2059
2057
|
const currentDirection = direction?.value || "row";
|
|
@@ -2068,8 +2066,8 @@ var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existi
|
|
|
2068
2066
|
};
|
|
2069
2067
|
|
|
2070
2068
|
// src/components/style-sections/layout-section/align-content-field.tsx
|
|
2071
|
-
var StartIcon = (0,
|
|
2072
|
-
var EndIcon = (0,
|
|
2069
|
+
var StartIcon = (0, import_ui27.withDirection)(import_icons8.JustifyTopIcon);
|
|
2070
|
+
var EndIcon = (0, import_ui27.withDirection)(import_icons8.JustifyBottomIcon);
|
|
2073
2071
|
var iconProps = {
|
|
2074
2072
|
isClockwise: false,
|
|
2075
2073
|
offset: 0,
|
|
@@ -2115,17 +2113,17 @@ var options = [
|
|
|
2115
2113
|
];
|
|
2116
2114
|
var AlignContentField = () => {
|
|
2117
2115
|
const { isSiteRtl } = useDirection();
|
|
2118
|
-
return /* @__PURE__ */ React34.createElement(
|
|
2116
|
+
return /* @__PURE__ */ React34.createElement(import_ui27.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React34.createElement(import_ui27.ThemeProvider, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "align-content" }, /* @__PURE__ */ React34.createElement(import_ui27.Stack, { gap: 1 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, (0, import_i18n11.__)("Align content", "elementor")), /* @__PURE__ */ React34.createElement(import_editor_controls14.ToggleControl, { options, fullWidth: true })))));
|
|
2119
2117
|
};
|
|
2120
2118
|
|
|
2121
2119
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
2122
2120
|
var React35 = __toESM(require("react"));
|
|
2123
2121
|
var import_editor_controls15 = require("@elementor/editor-controls");
|
|
2124
2122
|
var import_icons9 = require("@elementor/icons");
|
|
2125
|
-
var
|
|
2123
|
+
var import_ui28 = require("@elementor/ui");
|
|
2126
2124
|
var import_i18n12 = require("@wordpress/i18n");
|
|
2127
|
-
var StartIcon2 = (0,
|
|
2128
|
-
var EndIcon2 = (0,
|
|
2125
|
+
var StartIcon2 = (0, import_ui28.withDirection)(import_icons9.LayoutAlignLeftIcon);
|
|
2126
|
+
var EndIcon2 = (0, import_ui28.withDirection)(import_icons9.LayoutAlignRightIcon);
|
|
2129
2127
|
var iconProps2 = {
|
|
2130
2128
|
isClockwise: false,
|
|
2131
2129
|
offset: 90
|
|
@@ -2158,14 +2156,14 @@ var options2 = [
|
|
|
2158
2156
|
];
|
|
2159
2157
|
var AlignItemsField = () => {
|
|
2160
2158
|
const { isSiteRtl } = useDirection();
|
|
2161
|
-
return /* @__PURE__ */ React35.createElement(
|
|
2159
|
+
return /* @__PURE__ */ React35.createElement(import_ui28.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React35.createElement(import_ui28.ThemeProvider, null, /* @__PURE__ */ React35.createElement(StylesField, { bind: "align-items" }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React35.createElement(ControlLabel, null, (0, import_i18n12.__)("Align items", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React35.createElement(import_editor_controls15.ToggleControl, { options: options2 }))))));
|
|
2162
2160
|
};
|
|
2163
2161
|
|
|
2164
2162
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
2165
2163
|
var React36 = __toESM(require("react"));
|
|
2166
2164
|
var import_editor_controls16 = require("@elementor/editor-controls");
|
|
2167
2165
|
var import_icons10 = require("@elementor/icons");
|
|
2168
|
-
var
|
|
2166
|
+
var import_ui29 = require("@elementor/ui");
|
|
2169
2167
|
var import_i18n13 = require("@wordpress/i18n");
|
|
2170
2168
|
var ALIGN_SELF_CHILD_OFFSET_MAP = {
|
|
2171
2169
|
row: 90,
|
|
@@ -2173,8 +2171,8 @@ var ALIGN_SELF_CHILD_OFFSET_MAP = {
|
|
|
2173
2171
|
column: 0,
|
|
2174
2172
|
"column-reverse": 0
|
|
2175
2173
|
};
|
|
2176
|
-
var StartIcon3 = (0,
|
|
2177
|
-
var EndIcon3 = (0,
|
|
2174
|
+
var StartIcon3 = (0, import_ui29.withDirection)(import_icons10.LayoutAlignLeftIcon);
|
|
2175
|
+
var EndIcon3 = (0, import_ui29.withDirection)(import_icons10.LayoutAlignRightIcon);
|
|
2178
2176
|
var iconProps3 = {
|
|
2179
2177
|
isClockwise: false
|
|
2180
2178
|
};
|
|
@@ -2238,13 +2236,13 @@ var getOptions = (parentStyleDirection) => [
|
|
|
2238
2236
|
];
|
|
2239
2237
|
var AlignSelfChild = ({ parentStyleDirection }) => {
|
|
2240
2238
|
const { isSiteRtl } = useDirection();
|
|
2241
|
-
return /* @__PURE__ */ React36.createElement(
|
|
2239
|
+
return /* @__PURE__ */ React36.createElement(import_ui29.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(import_ui29.ThemeProvider, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React36.createElement(import_ui29.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, (0, import_i18n13.__)("Align self", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui29.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React36.createElement(import_editor_controls16.ToggleControl, { options: getOptions(parentStyleDirection) }))))));
|
|
2242
2240
|
};
|
|
2243
2241
|
|
|
2244
2242
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
2245
2243
|
var React37 = __toESM(require("react"));
|
|
2246
2244
|
var import_editor_controls17 = require("@elementor/editor-controls");
|
|
2247
|
-
var
|
|
2245
|
+
var import_ui30 = require("@elementor/ui");
|
|
2248
2246
|
var import_i18n14 = require("@wordpress/i18n");
|
|
2249
2247
|
var displayFieldOptions = [
|
|
2250
2248
|
{
|
|
@@ -2274,7 +2272,7 @@ var displayFieldOptions = [
|
|
|
2274
2272
|
];
|
|
2275
2273
|
var DisplayField = () => {
|
|
2276
2274
|
const placeholder = useDisplayPlaceholderValue();
|
|
2277
|
-
return /* @__PURE__ */ React37.createElement(StylesField, { bind: "display", placeholder }, /* @__PURE__ */ React37.createElement(
|
|
2275
|
+
return /* @__PURE__ */ React37.createElement(StylesField, { bind: "display", placeholder }, /* @__PURE__ */ React37.createElement(import_ui30.Stack, { gap: 0.75 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, (0, import_i18n14.__)("Display", "elementor")), /* @__PURE__ */ React37.createElement(import_editor_controls17.ToggleControl, { options: displayFieldOptions, fullWidth: true })));
|
|
2278
2276
|
};
|
|
2279
2277
|
var useDisplayPlaceholderValue = () => useStylesInheritanceField("display")[0]?.value ?? void 0;
|
|
2280
2278
|
|
|
@@ -2282,14 +2280,14 @@ var useDisplayPlaceholderValue = () => useStylesInheritanceField("display")[0]?.
|
|
|
2282
2280
|
var React38 = __toESM(require("react"));
|
|
2283
2281
|
var import_editor_controls18 = require("@elementor/editor-controls");
|
|
2284
2282
|
var import_icons11 = require("@elementor/icons");
|
|
2285
|
-
var
|
|
2283
|
+
var import_ui31 = require("@elementor/ui");
|
|
2286
2284
|
var import_i18n15 = require("@wordpress/i18n");
|
|
2287
2285
|
var options3 = [
|
|
2288
2286
|
{
|
|
2289
2287
|
value: "row",
|
|
2290
2288
|
label: (0, import_i18n15.__)("Row", "elementor"),
|
|
2291
2289
|
renderContent: ({ size }) => {
|
|
2292
|
-
const StartIcon5 = (0,
|
|
2290
|
+
const StartIcon5 = (0, import_ui31.withDirection)(import_icons11.ArrowRightIcon);
|
|
2293
2291
|
return /* @__PURE__ */ React38.createElement(StartIcon5, { fontSize: size });
|
|
2294
2292
|
},
|
|
2295
2293
|
showTooltip: true
|
|
@@ -2304,7 +2302,7 @@ var options3 = [
|
|
|
2304
2302
|
value: "row-reverse",
|
|
2305
2303
|
label: (0, import_i18n15.__)("Reversed row", "elementor"),
|
|
2306
2304
|
renderContent: ({ size }) => {
|
|
2307
|
-
const EndIcon5 = (0,
|
|
2305
|
+
const EndIcon5 = (0, import_ui31.withDirection)(import_icons11.ArrowLeftIcon);
|
|
2308
2306
|
return /* @__PURE__ */ React38.createElement(EndIcon5, { fontSize: size });
|
|
2309
2307
|
},
|
|
2310
2308
|
showTooltip: true
|
|
@@ -2318,7 +2316,7 @@ var options3 = [
|
|
|
2318
2316
|
];
|
|
2319
2317
|
var FlexDirectionField = () => {
|
|
2320
2318
|
const { isSiteRtl } = useDirection();
|
|
2321
|
-
return /* @__PURE__ */ React38.createElement(
|
|
2319
|
+
return /* @__PURE__ */ React38.createElement(import_ui31.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React38.createElement(import_ui31.ThemeProvider, null, /* @__PURE__ */ React38.createElement(StylesField, { bind: "flex-direction" }, /* @__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, (0, import_i18n15.__)("Direction", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React38.createElement(import_editor_controls18.ToggleControl, { options: options3 }))))));
|
|
2322
2320
|
};
|
|
2323
2321
|
|
|
2324
2322
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
@@ -2326,7 +2324,7 @@ var React39 = __toESM(require("react"));
|
|
|
2326
2324
|
var import_react19 = require("react");
|
|
2327
2325
|
var import_editor_controls19 = require("@elementor/editor-controls");
|
|
2328
2326
|
var import_icons12 = require("@elementor/icons");
|
|
2329
|
-
var
|
|
2327
|
+
var import_ui32 = require("@elementor/ui");
|
|
2330
2328
|
var import_i18n16 = require("@wordpress/i18n");
|
|
2331
2329
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
2332
2330
|
var LAST_DEFAULT_VALUE = 99999;
|
|
@@ -2368,7 +2366,7 @@ var FlexOrderField = () => {
|
|
|
2368
2366
|
}
|
|
2369
2367
|
setOrder({ $$type: "number", value: orderValueMap[group] });
|
|
2370
2368
|
};
|
|
2371
|
-
return /* @__PURE__ */ React39.createElement(
|
|
2369
|
+
return /* @__PURE__ */ React39.createElement(import_ui32.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React39.createElement(import_ui32.ThemeProvider, null, /* @__PURE__ */ React39.createElement(StylesField, { bind: "order" }, /* @__PURE__ */ React39.createElement(SectionContent, null, /* @__PURE__ */ React39.createElement(import_ui32.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, (0, import_i18n16.__)("Order", "elementor"))), /* @__PURE__ */ React39.createElement(import_ui32.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React39.createElement(
|
|
2372
2370
|
import_editor_controls19.ControlToggleButtonGroup,
|
|
2373
2371
|
{
|
|
2374
2372
|
items,
|
|
@@ -2376,7 +2374,7 @@ var FlexOrderField = () => {
|
|
|
2376
2374
|
onChange: handleToggleButtonChange,
|
|
2377
2375
|
exclusive: true
|
|
2378
2376
|
}
|
|
2379
|
-
))), CUSTOM === groupControlValue && /* @__PURE__ */ React39.createElement(
|
|
2377
|
+
))), CUSTOM === groupControlValue && /* @__PURE__ */ React39.createElement(import_ui32.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, (0, import_i18n16.__)("Custom order", "elementor"))), /* @__PURE__ */ React39.createElement(import_ui32.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React39.createElement(
|
|
2380
2378
|
import_editor_controls19.NumberControl,
|
|
2381
2379
|
{
|
|
2382
2380
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -2401,7 +2399,7 @@ var import_react20 = require("react");
|
|
|
2401
2399
|
var import_editor_controls20 = require("@elementor/editor-controls");
|
|
2402
2400
|
var import_editor_props6 = require("@elementor/editor-props");
|
|
2403
2401
|
var import_icons13 = require("@elementor/icons");
|
|
2404
|
-
var
|
|
2402
|
+
var import_ui33 = require("@elementor/ui");
|
|
2405
2403
|
var import_i18n17 = require("@wordpress/i18n");
|
|
2406
2404
|
var DEFAULT = 1;
|
|
2407
2405
|
var items2 = [
|
|
@@ -2455,7 +2453,7 @@ var FlexSizeField = () => {
|
|
|
2455
2453
|
"flex-shrink": import_editor_props6.numberPropTypeUtil.create(DEFAULT)
|
|
2456
2454
|
});
|
|
2457
2455
|
};
|
|
2458
|
-
return /* @__PURE__ */ React40.createElement(
|
|
2456
|
+
return /* @__PURE__ */ React40.createElement(import_ui33.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React40.createElement(import_ui33.ThemeProvider, null, /* @__PURE__ */ React40.createElement(SectionContent, null, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(StylesField, { bind: activeGroup ?? "" }, /* @__PURE__ */ React40.createElement(ControlLabel, null, (0, import_i18n17.__)("Size", "elementor")))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React40.createElement(
|
|
2459
2457
|
import_editor_controls20.ControlToggleButtonGroup,
|
|
2460
2458
|
{
|
|
2461
2459
|
value: activeGroup,
|
|
@@ -2465,7 +2463,7 @@ var FlexSizeField = () => {
|
|
|
2465
2463
|
}
|
|
2466
2464
|
))), "custom" === activeGroup && /* @__PURE__ */ React40.createElement(FlexCustomField, null))));
|
|
2467
2465
|
};
|
|
2468
|
-
var FlexCustomField = () => /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React40.createElement(
|
|
2466
|
+
var FlexCustomField = () => /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(StylesField, { bind: "flex-grow" }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, (0, import_i18n17.__)("Grow", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React40.createElement(import_editor_controls20.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React40.createElement(StylesField, { bind: "flex-shrink" }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, (0, import_i18n17.__)("Shrink", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React40.createElement(import_editor_controls20.NumberControl, { min: 0, shouldForceInt: true })))), /* @__PURE__ */ React40.createElement(StylesField, { bind: "flex-basis" }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, (0, import_i18n17.__)("Basis", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React40.createElement(import_editor_controls20.SizeControl, { extendedValues: ["auto"] })))));
|
|
2469
2467
|
var getActiveGroup = ({
|
|
2470
2468
|
grow,
|
|
2471
2469
|
shrink,
|
|
@@ -2489,20 +2487,20 @@ var getActiveGroup = ({
|
|
|
2489
2487
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
2490
2488
|
var React41 = __toESM(require("react"));
|
|
2491
2489
|
var import_editor_controls21 = require("@elementor/editor-controls");
|
|
2492
|
-
var
|
|
2490
|
+
var import_ui34 = require("@elementor/ui");
|
|
2493
2491
|
var import_i18n18 = require("@wordpress/i18n");
|
|
2494
2492
|
var GapControlField = () => {
|
|
2495
|
-
return /* @__PURE__ */ React41.createElement(
|
|
2493
|
+
return /* @__PURE__ */ React41.createElement(import_ui34.Stack, { gap: 1 }, /* @__PURE__ */ React41.createElement(StylesField, { bind: "gap" }, /* @__PURE__ */ React41.createElement(import_editor_controls21.GapControl, { label: (0, import_i18n18.__)("Gaps", "elementor") })));
|
|
2496
2494
|
};
|
|
2497
2495
|
|
|
2498
2496
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
2499
2497
|
var React42 = __toESM(require("react"));
|
|
2500
2498
|
var import_editor_controls22 = require("@elementor/editor-controls");
|
|
2501
2499
|
var import_icons14 = require("@elementor/icons");
|
|
2502
|
-
var
|
|
2500
|
+
var import_ui35 = require("@elementor/ui");
|
|
2503
2501
|
var import_i18n19 = require("@wordpress/i18n");
|
|
2504
|
-
var StartIcon4 = (0,
|
|
2505
|
-
var EndIcon4 = (0,
|
|
2502
|
+
var StartIcon4 = (0, import_ui35.withDirection)(import_icons14.JustifyTopIcon);
|
|
2503
|
+
var EndIcon4 = (0, import_ui35.withDirection)(import_icons14.JustifyBottomIcon);
|
|
2506
2504
|
var iconProps4 = {
|
|
2507
2505
|
isClockwise: true,
|
|
2508
2506
|
offset: -90
|
|
@@ -2547,14 +2545,14 @@ var options4 = [
|
|
|
2547
2545
|
];
|
|
2548
2546
|
var JustifyContentField = () => {
|
|
2549
2547
|
const { isSiteRtl } = useDirection();
|
|
2550
|
-
return /* @__PURE__ */ React42.createElement(
|
|
2548
|
+
return /* @__PURE__ */ React42.createElement(import_ui35.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React42.createElement(import_ui35.ThemeProvider, null, /* @__PURE__ */ React42.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React42.createElement(import_ui35.Stack, { gap: 0.75 }, /* @__PURE__ */ React42.createElement(ControlLabel, null, (0, import_i18n19.__)("Justify content", "elementor")), /* @__PURE__ */ React42.createElement(import_editor_controls22.ToggleControl, { options: options4, fullWidth: true })))));
|
|
2551
2549
|
};
|
|
2552
2550
|
|
|
2553
2551
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
2554
2552
|
var React43 = __toESM(require("react"));
|
|
2555
2553
|
var import_editor_controls23 = require("@elementor/editor-controls");
|
|
2556
2554
|
var import_icons15 = require("@elementor/icons");
|
|
2557
|
-
var
|
|
2555
|
+
var import_ui36 = require("@elementor/ui");
|
|
2558
2556
|
var import_i18n20 = require("@wordpress/i18n");
|
|
2559
2557
|
var options5 = [
|
|
2560
2558
|
{
|
|
@@ -2578,7 +2576,7 @@ var options5 = [
|
|
|
2578
2576
|
];
|
|
2579
2577
|
var WrapField = () => {
|
|
2580
2578
|
const { isSiteRtl } = useDirection();
|
|
2581
|
-
return /* @__PURE__ */ React43.createElement(
|
|
2579
|
+
return /* @__PURE__ */ React43.createElement(import_ui36.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React43.createElement(import_ui36.ThemeProvider, null, /* @__PURE__ */ React43.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlLabel, null, (0, import_i18n20.__)("Wrap", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React43.createElement(import_editor_controls23.ToggleControl, { options: options5 }))))));
|
|
2582
2580
|
};
|
|
2583
2581
|
|
|
2584
2582
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -2613,10 +2611,10 @@ var import_session2 = require("@elementor/session");
|
|
|
2613
2611
|
var React45 = __toESM(require("react"));
|
|
2614
2612
|
var import_editor_controls25 = require("@elementor/editor-controls");
|
|
2615
2613
|
var import_icons16 = require("@elementor/icons");
|
|
2616
|
-
var
|
|
2614
|
+
var import_ui37 = require("@elementor/ui");
|
|
2617
2615
|
var import_i18n22 = require("@wordpress/i18n");
|
|
2618
|
-
var InlineStartIcon2 = (0,
|
|
2619
|
-
var InlineEndIcon2 = (0,
|
|
2616
|
+
var InlineStartIcon2 = (0, import_ui37.withDirection)(import_icons16.SideLeftIcon);
|
|
2617
|
+
var InlineEndIcon2 = (0, import_ui37.withDirection)(import_icons16.SideRightIcon);
|
|
2620
2618
|
var sideIcons = {
|
|
2621
2619
|
"inset-block-start": /* @__PURE__ */ React45.createElement(import_icons16.SideTopIcon, { fontSize: "tiny" }),
|
|
2622
2620
|
"inset-block-end": /* @__PURE__ */ React45.createElement(import_icons16.SideBottomIcon, { fontSize: "tiny" }),
|
|
@@ -2627,25 +2625,25 @@ var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n22.__)("Righ
|
|
|
2627
2625
|
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n22.__)("Left", "elementor") : (0, import_i18n22.__)("Right", "elementor");
|
|
2628
2626
|
var DimensionsField = () => {
|
|
2629
2627
|
const { isSiteRtl } = useDirection();
|
|
2630
|
-
return /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(
|
|
2628
|
+
return /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(import_ui37.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n22.__)("Top", "elementor") }), /* @__PURE__ */ React45.createElement(DimensionField, { side: "inset-inline-end", label: getInlineEndLabel(isSiteRtl) })), /* @__PURE__ */ React45.createElement(import_ui37.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n22.__)("Bottom", "elementor") }), /* @__PURE__ */ React45.createElement(DimensionField, { side: "inset-inline-start", label: getInlineStartLabel(isSiteRtl) })));
|
|
2631
2629
|
};
|
|
2632
2630
|
var DimensionField = ({ side, label }) => {
|
|
2633
|
-
return /* @__PURE__ */ React45.createElement(
|
|
2631
|
+
return /* @__PURE__ */ React45.createElement(import_ui37.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React45.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(ControlLabel, null, label)), /* @__PURE__ */ React45.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(StylesField, { bind: side }, /* @__PURE__ */ React45.createElement(import_editor_controls25.SizeControl, { startIcon: sideIcons[side], extendedValues: ["auto"] }))));
|
|
2634
2632
|
};
|
|
2635
2633
|
|
|
2636
2634
|
// src/components/style-sections/position-section/offset-field.tsx
|
|
2637
2635
|
var React46 = __toESM(require("react"));
|
|
2638
2636
|
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
2639
|
-
var
|
|
2637
|
+
var import_ui38 = require("@elementor/ui");
|
|
2640
2638
|
var import_i18n23 = require("@wordpress/i18n");
|
|
2641
2639
|
var OffsetField = () => {
|
|
2642
|
-
return /* @__PURE__ */ React46.createElement(StylesField, { bind: "scroll-margin-top" }, /* @__PURE__ */ React46.createElement(
|
|
2640
|
+
return /* @__PURE__ */ React46.createElement(StylesField, { bind: "scroll-margin-top" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ControlLabel, null, (0, import_i18n23.__)("Anchor offset", "elementor"))), /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(import_editor_controls26.SizeControl, { units: ["px", "em", "rem", "vw", "vh"] }))));
|
|
2643
2641
|
};
|
|
2644
2642
|
|
|
2645
2643
|
// src/components/style-sections/position-section/position-field.tsx
|
|
2646
2644
|
var React47 = __toESM(require("react"));
|
|
2647
2645
|
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
2648
|
-
var
|
|
2646
|
+
var import_ui39 = require("@elementor/ui");
|
|
2649
2647
|
var import_i18n24 = require("@wordpress/i18n");
|
|
2650
2648
|
var positionOptions = [
|
|
2651
2649
|
{ label: (0, import_i18n24.__)("Static", "elementor"), value: "static" },
|
|
@@ -2655,16 +2653,16 @@ var positionOptions = [
|
|
|
2655
2653
|
{ label: (0, import_i18n24.__)("Sticky", "elementor"), value: "sticky" }
|
|
2656
2654
|
];
|
|
2657
2655
|
var PositionField = ({ onChange }) => {
|
|
2658
|
-
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React47.createElement(
|
|
2656
|
+
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React47.createElement(import_ui39.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui39.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel, null, (0, import_i18n24.__)("Position", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui39.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React47.createElement(import_editor_controls27.SelectControl, { options: positionOptions, onChange }))));
|
|
2659
2657
|
};
|
|
2660
2658
|
|
|
2661
2659
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
2662
2660
|
var React48 = __toESM(require("react"));
|
|
2663
2661
|
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
2664
|
-
var
|
|
2662
|
+
var import_ui40 = require("@elementor/ui");
|
|
2665
2663
|
var import_i18n25 = require("@wordpress/i18n");
|
|
2666
2664
|
var ZIndexField = () => {
|
|
2667
|
-
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React48.createElement(
|
|
2665
|
+
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "z-index" }, /* @__PURE__ */ React48.createElement(import_ui40.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React48.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(ControlLabel, null, (0, import_i18n25.__)("Z-index", "elementor"))), /* @__PURE__ */ React48.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React48.createElement(import_editor_controls28.NumberControl, null))));
|
|
2668
2666
|
};
|
|
2669
2667
|
|
|
2670
2668
|
// src/components/style-sections/position-section/position-section.tsx
|
|
@@ -2677,6 +2675,7 @@ var PositionSection = () => {
|
|
|
2677
2675
|
"inset-inline-end"
|
|
2678
2676
|
]);
|
|
2679
2677
|
const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
|
|
2678
|
+
const { e_css_id: eCssId } = getExperimentsConfig();
|
|
2680
2679
|
const onPositionChange = (newPosition, previousPosition) => {
|
|
2681
2680
|
if (newPosition === "static") {
|
|
2682
2681
|
if (dimensionsValues) {
|
|
@@ -2696,7 +2695,7 @@ var PositionSection = () => {
|
|
|
2696
2695
|
}
|
|
2697
2696
|
};
|
|
2698
2697
|
const isNotStatic = positionValue && positionValue?.value !== "static";
|
|
2699
|
-
return /* @__PURE__ */ React49.createElement(SectionContent, null, /* @__PURE__ */ React49.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(DimensionsField, null), /* @__PURE__ */ React49.createElement(ZIndexField, null)) : null, /* @__PURE__ */ React49.createElement(PanelDivider, null), /* @__PURE__ */ React49.createElement(OffsetField, null));
|
|
2698
|
+
return /* @__PURE__ */ React49.createElement(SectionContent, null, /* @__PURE__ */ React49.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(DimensionsField, null), /* @__PURE__ */ React49.createElement(ZIndexField, null)) : null, eCssId && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(PanelDivider, null), /* @__PURE__ */ React49.createElement(OffsetField, null)));
|
|
2700
2699
|
};
|
|
2701
2700
|
var usePersistDimensions = () => {
|
|
2702
2701
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -2708,14 +2707,14 @@ var usePersistDimensions = () => {
|
|
|
2708
2707
|
// src/components/style-sections/size-section/size-section.tsx
|
|
2709
2708
|
var React51 = __toESM(require("react"));
|
|
2710
2709
|
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
2711
|
-
var
|
|
2710
|
+
var import_ui42 = require("@elementor/ui");
|
|
2712
2711
|
var import_i18n27 = require("@wordpress/i18n");
|
|
2713
2712
|
|
|
2714
2713
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
2715
2714
|
var React50 = __toESM(require("react"));
|
|
2716
2715
|
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
2717
2716
|
var import_icons17 = require("@elementor/icons");
|
|
2718
|
-
var
|
|
2717
|
+
var import_ui41 = require("@elementor/ui");
|
|
2719
2718
|
var import_i18n26 = require("@wordpress/i18n");
|
|
2720
2719
|
var options6 = [
|
|
2721
2720
|
{
|
|
@@ -2738,29 +2737,29 @@ var options6 = [
|
|
|
2738
2737
|
}
|
|
2739
2738
|
];
|
|
2740
2739
|
var OverflowField = () => {
|
|
2741
|
-
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React50.createElement(
|
|
2740
|
+
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React50.createElement(import_ui41.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React50.createElement(import_ui41.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React50.createElement(ControlLabel, null, (0, import_i18n26.__)("Overflow", "elementor"))), /* @__PURE__ */ React50.createElement(import_ui41.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React50.createElement(import_editor_controls29.ToggleControl, { options: options6 }))));
|
|
2742
2741
|
};
|
|
2743
2742
|
|
|
2744
2743
|
// src/components/style-sections/size-section/size-section.tsx
|
|
2745
2744
|
var SizeSection = () => {
|
|
2746
|
-
return /* @__PURE__ */ React51.createElement(SectionContent, null, /* @__PURE__ */ React51.createElement(
|
|
2745
|
+
return /* @__PURE__ */ React51.createElement(SectionContent, null, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(SizeField, { bind: "width", label: (0, import_i18n27.__)("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(SizeField, { bind: "height", label: (0, import_i18n27.__)("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(
|
|
2747
2746
|
SizeField,
|
|
2748
2747
|
{
|
|
2749
2748
|
bind: "min-width",
|
|
2750
2749
|
label: (0, import_i18n27.__)("Min width", "elementor"),
|
|
2751
2750
|
extendedValues: ["auto"]
|
|
2752
2751
|
}
|
|
2753
|
-
)), /* @__PURE__ */ React51.createElement(
|
|
2752
|
+
)), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(
|
|
2754
2753
|
SizeField,
|
|
2755
2754
|
{
|
|
2756
2755
|
bind: "min-height",
|
|
2757
2756
|
label: (0, import_i18n27.__)("Min height", "elementor"),
|
|
2758
2757
|
extendedValues: ["auto"]
|
|
2759
2758
|
}
|
|
2760
|
-
))), /* @__PURE__ */ React51.createElement(
|
|
2759
|
+
))), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(SizeField, { bind: "max-width", label: (0, import_i18n27.__)("Max width", "elementor") })), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(SizeField, { bind: "max-height", label: (0, import_i18n27.__)("Max height", "elementor") }))), /* @__PURE__ */ React51.createElement(PanelDivider, null), /* @__PURE__ */ React51.createElement(import_ui42.Stack, null, /* @__PURE__ */ React51.createElement(OverflowField, null)));
|
|
2761
2760
|
};
|
|
2762
2761
|
var SizeField = ({ label, bind, extendedValues }) => {
|
|
2763
|
-
return /* @__PURE__ */ React51.createElement(StylesField, { bind }, /* @__PURE__ */ React51.createElement(
|
|
2762
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React51.createElement(ControlLabel, null, label)), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React51.createElement(import_editor_controls30.SizeControl, { extendedValues }))));
|
|
2764
2763
|
};
|
|
2765
2764
|
|
|
2766
2765
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
@@ -2785,15 +2784,15 @@ var React67 = __toESM(require("react"));
|
|
|
2785
2784
|
// src/components/collapsible-content.tsx
|
|
2786
2785
|
var React53 = __toESM(require("react"));
|
|
2787
2786
|
var import_react21 = require("react");
|
|
2788
|
-
var
|
|
2787
|
+
var import_ui43 = require("@elementor/ui");
|
|
2789
2788
|
var import_i18n29 = require("@wordpress/i18n");
|
|
2790
2789
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
2791
2790
|
const [open, setOpen] = (0, import_react21.useState)(defaultOpen);
|
|
2792
2791
|
const handleToggle = () => {
|
|
2793
2792
|
setOpen((prevOpen) => !prevOpen);
|
|
2794
2793
|
};
|
|
2795
|
-
return /* @__PURE__ */ React53.createElement(
|
|
2796
|
-
|
|
2794
|
+
return /* @__PURE__ */ React53.createElement(import_ui43.Stack, null, /* @__PURE__ */ React53.createElement(
|
|
2795
|
+
import_ui43.Button,
|
|
2797
2796
|
{
|
|
2798
2797
|
fullWidth: true,
|
|
2799
2798
|
size: "small",
|
|
@@ -2804,13 +2803,13 @@ var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
|
2804
2803
|
sx: { my: 0.5 }
|
|
2805
2804
|
},
|
|
2806
2805
|
open ? (0, import_i18n29.__)("Show less", "elementor") : (0, import_i18n29.__)("Show more", "elementor")
|
|
2807
|
-
), /* @__PURE__ */ React53.createElement(
|
|
2806
|
+
), /* @__PURE__ */ React53.createElement(import_ui43.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
2808
2807
|
};
|
|
2809
2808
|
|
|
2810
2809
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
2811
2810
|
var React54 = __toESM(require("react"));
|
|
2812
2811
|
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
2813
|
-
var
|
|
2812
|
+
var import_ui44 = require("@elementor/ui");
|
|
2814
2813
|
var import_i18n31 = require("@wordpress/i18n");
|
|
2815
2814
|
|
|
2816
2815
|
// src/components/style-sections/typography-section/hooks/use-font-families.ts
|
|
@@ -2864,23 +2863,23 @@ var FontFamilyField = () => {
|
|
|
2864
2863
|
if (fontFamilies.length === 0) {
|
|
2865
2864
|
return null;
|
|
2866
2865
|
}
|
|
2867
|
-
return /* @__PURE__ */ React54.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React54.createElement(
|
|
2866
|
+
return /* @__PURE__ */ React54.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React54.createElement(import_ui44.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui44.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(ControlLabel, null, (0, import_i18n31.__)("Font family", "elementor"))), /* @__PURE__ */ React54.createElement(import_ui44.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React54.createElement(import_editor_controls32.FontFamilyControl, { fontFamilies }))));
|
|
2868
2867
|
};
|
|
2869
2868
|
|
|
2870
2869
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
2871
2870
|
var React55 = __toESM(require("react"));
|
|
2872
2871
|
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
2873
|
-
var
|
|
2872
|
+
var import_ui45 = require("@elementor/ui");
|
|
2874
2873
|
var import_i18n32 = require("@wordpress/i18n");
|
|
2875
2874
|
var FontSizeField = () => {
|
|
2876
|
-
return /* @__PURE__ */ React55.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React55.createElement(
|
|
2875
|
+
return /* @__PURE__ */ React55.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React55.createElement(import_ui45.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(ControlLabel, null, (0, import_i18n32.__)("Font size", "elementor"))), /* @__PURE__ */ React55.createElement(import_ui45.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(import_editor_controls33.SizeControl, null))));
|
|
2877
2876
|
};
|
|
2878
2877
|
|
|
2879
2878
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
2880
2879
|
var React56 = __toESM(require("react"));
|
|
2881
2880
|
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
2882
2881
|
var import_icons18 = require("@elementor/icons");
|
|
2883
|
-
var
|
|
2882
|
+
var import_ui46 = require("@elementor/ui");
|
|
2884
2883
|
var import_i18n33 = require("@wordpress/i18n");
|
|
2885
2884
|
var options7 = [
|
|
2886
2885
|
{
|
|
@@ -2896,12 +2895,12 @@ var options7 = [
|
|
|
2896
2895
|
showTooltip: true
|
|
2897
2896
|
}
|
|
2898
2897
|
];
|
|
2899
|
-
var FontStyleField = () => /* @__PURE__ */ React56.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React56.createElement(
|
|
2898
|
+
var FontStyleField = () => /* @__PURE__ */ React56.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React56.createElement(import_ui46.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(import_ui46.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(import_editor_controls34.ControlFormLabel, null, (0, import_i18n33.__)("Font style", "elementor"))), /* @__PURE__ */ React56.createElement(import_ui46.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React56.createElement(import_editor_controls34.ToggleControl, { options: options7 }))));
|
|
2900
2899
|
|
|
2901
2900
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
2902
2901
|
var React57 = __toESM(require("react"));
|
|
2903
2902
|
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
2904
|
-
var
|
|
2903
|
+
var import_ui47 = require("@elementor/ui");
|
|
2905
2904
|
var import_i18n34 = require("@wordpress/i18n");
|
|
2906
2905
|
var fontWeightOptions = [
|
|
2907
2906
|
{ value: "100", label: (0, import_i18n34.__)("100 - Thin", "elementor") },
|
|
@@ -2915,35 +2914,35 @@ var fontWeightOptions = [
|
|
|
2915
2914
|
{ value: "900", label: (0, import_i18n34.__)("900 - Black", "elementor") }
|
|
2916
2915
|
];
|
|
2917
2916
|
var FontWeightField = () => {
|
|
2918
|
-
return /* @__PURE__ */ React57.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React57.createElement(
|
|
2917
|
+
return /* @__PURE__ */ React57.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, (0, import_i18n34.__)("Font weight", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React57.createElement(import_editor_controls35.SelectControl, { options: fontWeightOptions }))));
|
|
2919
2918
|
};
|
|
2920
2919
|
|
|
2921
2920
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
2922
2921
|
var React58 = __toESM(require("react"));
|
|
2923
2922
|
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
2924
|
-
var
|
|
2923
|
+
var import_ui48 = require("@elementor/ui");
|
|
2925
2924
|
var import_i18n35 = require("@wordpress/i18n");
|
|
2926
2925
|
var LetterSpacingField = () => {
|
|
2927
|
-
return /* @__PURE__ */ React58.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React58.createElement(
|
|
2926
|
+
return /* @__PURE__ */ React58.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, (0, import_i18n35.__)("Letter spacing", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(import_editor_controls36.SizeControl, null))));
|
|
2928
2927
|
};
|
|
2929
2928
|
|
|
2930
2929
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
2931
2930
|
var React59 = __toESM(require("react"));
|
|
2932
2931
|
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
2933
|
-
var
|
|
2932
|
+
var import_ui49 = require("@elementor/ui");
|
|
2934
2933
|
var import_i18n36 = require("@wordpress/i18n");
|
|
2935
2934
|
var LineHeightField = () => {
|
|
2936
|
-
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React59.createElement(
|
|
2935
|
+
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React59.createElement(import_ui49.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(ControlLabel, null, (0, import_i18n36.__)("Line height", "elementor"))), /* @__PURE__ */ React59.createElement(import_ui49.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(import_editor_controls37.SizeControl, null))));
|
|
2937
2936
|
};
|
|
2938
2937
|
|
|
2939
2938
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
2940
2939
|
var React60 = __toESM(require("react"));
|
|
2941
2940
|
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
2942
2941
|
var import_icons19 = require("@elementor/icons");
|
|
2943
|
-
var
|
|
2942
|
+
var import_ui50 = require("@elementor/ui");
|
|
2944
2943
|
var import_i18n37 = require("@wordpress/i18n");
|
|
2945
|
-
var AlignStartIcon = (0,
|
|
2946
|
-
var AlignEndIcon = (0,
|
|
2944
|
+
var AlignStartIcon = (0, import_ui50.withDirection)(import_icons19.AlignLeftIcon);
|
|
2945
|
+
var AlignEndIcon = (0, import_ui50.withDirection)(import_icons19.AlignRightIcon);
|
|
2947
2946
|
var options8 = [
|
|
2948
2947
|
{
|
|
2949
2948
|
value: "start",
|
|
@@ -2971,23 +2970,23 @@ var options8 = [
|
|
|
2971
2970
|
}
|
|
2972
2971
|
];
|
|
2973
2972
|
var TextAlignmentField = () => {
|
|
2974
|
-
return /* @__PURE__ */ React60.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React60.createElement(
|
|
2973
|
+
return /* @__PURE__ */ React60.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, (0, import_i18n37.__)("Text align", "elementor"))), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React60.createElement(import_editor_controls38.ToggleControl, { options: options8 }))));
|
|
2975
2974
|
};
|
|
2976
2975
|
|
|
2977
2976
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
2978
2977
|
var React61 = __toESM(require("react"));
|
|
2979
2978
|
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
2980
|
-
var
|
|
2979
|
+
var import_ui51 = require("@elementor/ui");
|
|
2981
2980
|
var import_i18n38 = require("@wordpress/i18n");
|
|
2982
2981
|
var TextColorField = () => {
|
|
2983
|
-
return /* @__PURE__ */ React61.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React61.createElement(
|
|
2982
|
+
return /* @__PURE__ */ React61.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React61.createElement(import_ui51.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React61.createElement(import_ui51.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(ControlLabel, null, (0, import_i18n38.__)("Text color", "elementor"))), /* @__PURE__ */ React61.createElement(import_ui51.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(import_editor_controls39.ColorControl, null))));
|
|
2984
2983
|
};
|
|
2985
2984
|
|
|
2986
2985
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
2987
2986
|
var React62 = __toESM(require("react"));
|
|
2988
2987
|
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
2989
2988
|
var import_icons20 = require("@elementor/icons");
|
|
2990
|
-
var
|
|
2989
|
+
var import_ui52 = require("@elementor/ui");
|
|
2991
2990
|
var import_i18n39 = require("@wordpress/i18n");
|
|
2992
2991
|
var options9 = [
|
|
2993
2992
|
{
|
|
@@ -3016,13 +3015,13 @@ var options9 = [
|
|
|
3016
3015
|
showTooltip: true
|
|
3017
3016
|
}
|
|
3018
3017
|
];
|
|
3019
|
-
var TextDecorationField = () => /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-decoration" }, /* @__PURE__ */ React62.createElement(
|
|
3018
|
+
var TextDecorationField = () => /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-decoration" }, /* @__PURE__ */ React62.createElement(import_ui52.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(import_ui52.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, (0, import_i18n39.__)("Line decoration", "elementor"))), /* @__PURE__ */ React62.createElement(import_ui52.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React62.createElement(import_editor_controls40.ToggleControl, { options: options9, exclusive: false }))));
|
|
3020
3019
|
|
|
3021
3020
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
3022
3021
|
var React63 = __toESM(require("react"));
|
|
3023
3022
|
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
3024
3023
|
var import_icons21 = require("@elementor/icons");
|
|
3025
|
-
var
|
|
3024
|
+
var import_ui53 = require("@elementor/ui");
|
|
3026
3025
|
var import_i18n40 = require("@wordpress/i18n");
|
|
3027
3026
|
var options10 = [
|
|
3028
3027
|
{
|
|
@@ -3039,7 +3038,7 @@ var options10 = [
|
|
|
3039
3038
|
}
|
|
3040
3039
|
];
|
|
3041
3040
|
var TextDirectionField = () => {
|
|
3042
|
-
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React63.createElement(
|
|
3041
|
+
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React63.createElement(import_ui53.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React63.createElement(import_ui53.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlLabel, null, (0, import_i18n40.__)("Direction", "elementor"))), /* @__PURE__ */ React63.createElement(import_ui53.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React63.createElement(import_editor_controls41.ToggleControl, { options: options10 }))));
|
|
3043
3042
|
};
|
|
3044
3043
|
|
|
3045
3044
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -3087,7 +3086,7 @@ var TextStrokeField = () => {
|
|
|
3087
3086
|
var React65 = __toESM(require("react"));
|
|
3088
3087
|
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
3089
3088
|
var import_icons22 = require("@elementor/icons");
|
|
3090
|
-
var
|
|
3089
|
+
var import_ui54 = require("@elementor/ui");
|
|
3091
3090
|
var import_i18n42 = require("@wordpress/i18n");
|
|
3092
3091
|
var options11 = [
|
|
3093
3092
|
{
|
|
@@ -3115,15 +3114,15 @@ var options11 = [
|
|
|
3115
3114
|
showTooltip: true
|
|
3116
3115
|
}
|
|
3117
3116
|
];
|
|
3118
|
-
var TransformField = () => /* @__PURE__ */ React65.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React65.createElement(
|
|
3117
|
+
var TransformField = () => /* @__PURE__ */ React65.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React65.createElement(import_ui54.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React65.createElement(import_ui54.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ControlLabel, null, (0, import_i18n42.__)("Text transform", "elementor"))), /* @__PURE__ */ React65.createElement(import_ui54.Grid, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React65.createElement(import_editor_controls43.ToggleControl, { options: options11 }))));
|
|
3119
3118
|
|
|
3120
3119
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
3121
3120
|
var React66 = __toESM(require("react"));
|
|
3122
3121
|
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
3123
|
-
var
|
|
3122
|
+
var import_ui55 = require("@elementor/ui");
|
|
3124
3123
|
var import_i18n43 = require("@wordpress/i18n");
|
|
3125
3124
|
var WordSpacingField = () => {
|
|
3126
|
-
return /* @__PURE__ */ React66.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React66.createElement(
|
|
3125
|
+
return /* @__PURE__ */ React66.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React66.createElement(import_ui55.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React66.createElement(import_ui55.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlLabel, null, (0, import_i18n43.__)("Word spacing", "elementor"))), /* @__PURE__ */ React66.createElement(import_ui55.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(import_editor_controls44.SizeControl, null))));
|
|
3127
3126
|
};
|
|
3128
3127
|
|
|
3129
3128
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -3156,12 +3155,12 @@ var StyleTab = () => {
|
|
|
3156
3155
|
},
|
|
3157
3156
|
setMetaState: setActiveStyleState
|
|
3158
3157
|
},
|
|
3159
|
-
/* @__PURE__ */ React68.createElement(import_session3.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React68.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React68.createElement(ClassesHeader, null, /* @__PURE__ */ React68.createElement(CssClassSelector, null), /* @__PURE__ */ React68.createElement(
|
|
3158
|
+
/* @__PURE__ */ React68.createElement(import_session3.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React68.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React68.createElement(ClassesHeader, null, /* @__PURE__ */ React68.createElement(CssClassSelector, null), /* @__PURE__ */ React68.createElement(import_ui56.Divider, null)), /* @__PURE__ */ React68.createElement(SectionsList, null, /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Layout", "elementor") }, /* @__PURE__ */ React68.createElement(LayoutSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Spacing", "elementor") }, /* @__PURE__ */ React68.createElement(SpacingSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Size", "elementor") }, /* @__PURE__ */ React68.createElement(SizeSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Position", "elementor") }, /* @__PURE__ */ React68.createElement(PositionSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Typography", "elementor") }, /* @__PURE__ */ React68.createElement(TypographySection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Background", "elementor") }, /* @__PURE__ */ React68.createElement(BackgroundSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Border", "elementor") }, /* @__PURE__ */ React68.createElement(BorderSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: (0, import_i18n44.__)("Effects", "elementor") }, /* @__PURE__ */ React68.createElement(EffectsSection, null)))))
|
|
3160
3159
|
));
|
|
3161
3160
|
};
|
|
3162
3161
|
function ClassesHeader({ children }) {
|
|
3163
3162
|
const scrollDirection = useScrollDirection();
|
|
3164
|
-
return /* @__PURE__ */ React68.createElement(
|
|
3163
|
+
return /* @__PURE__ */ React68.createElement(import_ui56.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
3165
3164
|
}
|
|
3166
3165
|
function useCurrentClassesProp() {
|
|
3167
3166
|
const { elementType } = useElement();
|
|
@@ -3177,11 +3176,11 @@ function useCurrentClassesProp() {
|
|
|
3177
3176
|
// src/components/editing-panel-tabs.tsx
|
|
3178
3177
|
var EditingPanelTabs = () => {
|
|
3179
3178
|
const { element } = useElement();
|
|
3180
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
3179
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui57.useTabs)("settings");
|
|
3181
3180
|
return (
|
|
3182
3181
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
3183
3182
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
3184
|
-
/* @__PURE__ */ React69.createElement(import_react24.Fragment, { key: element.id }, /* @__PURE__ */ React69.createElement(ScrollProvider, null, /* @__PURE__ */ React69.createElement(
|
|
3183
|
+
/* @__PURE__ */ React69.createElement(import_react24.Fragment, { key: element.id }, /* @__PURE__ */ React69.createElement(ScrollProvider, null, /* @__PURE__ */ React69.createElement(import_ui57.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React69.createElement(import_ui57.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React69.createElement(import_ui57.Tabs, { variant: "fullWidth", size: "small", sx: { mt: 0.5 }, ...getTabsProps() }, /* @__PURE__ */ React69.createElement(import_ui57.Tab, { label: (0, import_i18n45.__)("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React69.createElement(import_ui57.Tab, { label: (0, import_i18n45.__)("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React69.createElement(import_ui57.Divider, null)), /* @__PURE__ */ React69.createElement(import_ui57.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React69.createElement(SettingsTab, null)), /* @__PURE__ */ React69.createElement(import_ui57.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React69.createElement(StyleTab, null)))))
|
|
3185
3184
|
);
|
|
3186
3185
|
};
|
|
3187
3186
|
|
|
@@ -3195,7 +3194,7 @@ var EditingPanel = () => {
|
|
|
3195
3194
|
return null;
|
|
3196
3195
|
}
|
|
3197
3196
|
const panelTitle = (0, import_i18n46.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
3198
|
-
return /* @__PURE__ */ React70.createElement(
|
|
3197
|
+
return /* @__PURE__ */ React70.createElement(import_ui58.ErrorBoundary, { fallback: /* @__PURE__ */ React70.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React70.createElement(import_session4.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React70.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React70.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React70.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React70.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React70.createElement(import_icons23.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React70.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React70.createElement(import_editor_controls45.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React70.createElement(import_editor_controls45.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React70.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React70.createElement(EditingPanelTabs, null)))))))));
|
|
3199
3198
|
};
|
|
3200
3199
|
|
|
3201
3200
|
// src/panel.ts
|
|
@@ -3250,13 +3249,13 @@ var import_editor_canvas3 = require("@elementor/editor-canvas");
|
|
|
3250
3249
|
var React74 = __toESM(require("react"));
|
|
3251
3250
|
var import_editor_controls49 = require("@elementor/editor-controls");
|
|
3252
3251
|
var import_icons25 = require("@elementor/icons");
|
|
3253
|
-
var
|
|
3252
|
+
var import_ui61 = require("@elementor/ui");
|
|
3254
3253
|
var import_i18n48 = require("@wordpress/i18n");
|
|
3255
3254
|
|
|
3256
3255
|
// src/components/popover-content.tsx
|
|
3257
3256
|
var React71 = __toESM(require("react"));
|
|
3258
|
-
var
|
|
3259
|
-
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React71.createElement(
|
|
3257
|
+
var import_ui59 = require("@elementor/ui");
|
|
3258
|
+
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React71.createElement(import_ui59.Stack, { alignItems, gap, p }, children);
|
|
3260
3259
|
|
|
3261
3260
|
// src/hooks/use-persist-dynamic-value.ts
|
|
3262
3261
|
var import_session5 = require("@elementor/session");
|
|
@@ -3374,7 +3373,7 @@ var React73 = __toESM(require("react"));
|
|
|
3374
3373
|
var import_react28 = require("react");
|
|
3375
3374
|
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
3376
3375
|
var import_icons24 = require("@elementor/icons");
|
|
3377
|
-
var
|
|
3376
|
+
var import_ui60 = require("@elementor/ui");
|
|
3378
3377
|
var import_i18n47 = require("@wordpress/i18n");
|
|
3379
3378
|
var SIZE3 = "tiny";
|
|
3380
3379
|
var DynamicSelection = ({ onSelect }) => {
|
|
@@ -3396,8 +3395,8 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3396
3395
|
setValue({ name: value, settings: { label } });
|
|
3397
3396
|
onSelect?.();
|
|
3398
3397
|
};
|
|
3399
|
-
return /* @__PURE__ */ React73.createElement(
|
|
3400
|
-
|
|
3398
|
+
return /* @__PURE__ */ React73.createElement(import_ui60.Stack, null, hasNoDynamicTags ? /* @__PURE__ */ React73.createElement(NoDynamicTags, null) : /* @__PURE__ */ React73.createElement(import_react28.Fragment, null, /* @__PURE__ */ React73.createElement(import_ui60.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React73.createElement(
|
|
3399
|
+
import_ui60.TextField,
|
|
3401
3400
|
{
|
|
3402
3401
|
fullWidth: true,
|
|
3403
3402
|
size: SIZE3,
|
|
@@ -3405,11 +3404,11 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3405
3404
|
onChange: handleSearch,
|
|
3406
3405
|
placeholder: (0, import_i18n47.__)("Search dynamic tags\u2026", "elementor"),
|
|
3407
3406
|
InputProps: {
|
|
3408
|
-
startAdornment: /* @__PURE__ */ React73.createElement(
|
|
3407
|
+
startAdornment: /* @__PURE__ */ React73.createElement(import_ui60.InputAdornment, { position: "start" }, /* @__PURE__ */ React73.createElement(import_icons24.SearchIcon, { fontSize: SIZE3 }))
|
|
3409
3408
|
}
|
|
3410
3409
|
}
|
|
3411
|
-
)), /* @__PURE__ */ React73.createElement(
|
|
3412
|
-
|
|
3410
|
+
)), /* @__PURE__ */ React73.createElement(import_ui60.Divider, null), /* @__PURE__ */ React73.createElement(import_ui60.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React73.createElement(import_ui60.MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React73.createElement(import_react28.Fragment, { key: index }, /* @__PURE__ */ React73.createElement(
|
|
3411
|
+
import_ui60.MenuSubheader,
|
|
3413
3412
|
{
|
|
3414
3413
|
sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
|
|
3415
3414
|
},
|
|
@@ -3417,7 +3416,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3417
3416
|
), items3.map(({ value, label: tagLabel }) => {
|
|
3418
3417
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
3419
3418
|
return /* @__PURE__ */ React73.createElement(
|
|
3420
|
-
|
|
3419
|
+
import_ui60.MenuItem,
|
|
3421
3420
|
{
|
|
3422
3421
|
key: value,
|
|
3423
3422
|
selected: isSelected,
|
|
@@ -3430,7 +3429,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3430
3429
|
})))) : /* @__PURE__ */ React73.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") }))));
|
|
3431
3430
|
};
|
|
3432
3431
|
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React73.createElement(
|
|
3433
|
-
|
|
3432
|
+
import_ui60.Stack,
|
|
3434
3433
|
{
|
|
3435
3434
|
gap: 1,
|
|
3436
3435
|
alignItems: "center",
|
|
@@ -3441,11 +3440,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React73.createElem
|
|
|
3441
3440
|
sx: { pb: 3.5 }
|
|
3442
3441
|
},
|
|
3443
3442
|
/* @__PURE__ */ React73.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
|
|
3444
|
-
/* @__PURE__ */ React73.createElement(
|
|
3445
|
-
/* @__PURE__ */ React73.createElement(
|
|
3443
|
+
/* @__PURE__ */ React73.createElement(import_ui60.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n47.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React73.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
3444
|
+
/* @__PURE__ */ React73.createElement(import_ui60.Typography, { align: "center", variant: "caption" }, (0, import_i18n47.__)("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React73.createElement(import_ui60.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n47.__)("Clear & try again", "elementor")))
|
|
3446
3445
|
);
|
|
3447
|
-
var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(
|
|
3448
|
-
|
|
3446
|
+
var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(import_ui60.Box, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React73.createElement(import_ui60.Divider, null), /* @__PURE__ */ React73.createElement(
|
|
3447
|
+
import_ui60.Stack,
|
|
3449
3448
|
{
|
|
3450
3449
|
gap: 1,
|
|
3451
3450
|
alignItems: "center",
|
|
@@ -3456,8 +3455,8 @@ var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(import_ui59.Box,
|
|
|
3456
3455
|
sx: { pb: 3.5 }
|
|
3457
3456
|
},
|
|
3458
3457
|
/* @__PURE__ */ React73.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
|
|
3459
|
-
/* @__PURE__ */ React73.createElement(
|
|
3460
|
-
/* @__PURE__ */ React73.createElement(
|
|
3458
|
+
/* @__PURE__ */ React73.createElement(import_ui60.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n47.__)("Streamline your workflow with dynamic tags", "elementor")),
|
|
3459
|
+
/* @__PURE__ */ React73.createElement(import_ui60.Typography, { align: "center", variant: "caption" }, (0, import_i18n47.__)("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
|
|
3461
3460
|
));
|
|
3462
3461
|
var useFilteredOptions = (searchValue) => {
|
|
3463
3462
|
const dynamicTags = usePropDynamicTags();
|
|
@@ -3481,7 +3480,7 @@ var DynamicSelectionControl = () => {
|
|
|
3481
3480
|
const { setValue: setAnyValue } = (0, import_editor_controls49.useBoundProp)();
|
|
3482
3481
|
const { bind, value } = (0, import_editor_controls49.useBoundProp)(dynamicPropTypeUtil);
|
|
3483
3482
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
3484
|
-
const selectionPopoverState = (0,
|
|
3483
|
+
const selectionPopoverState = (0, import_ui61.usePopupState)({ variant: "popover" });
|
|
3485
3484
|
const { name: tagName = "" } = value;
|
|
3486
3485
|
const dynamicTag = useDynamicTag(tagName);
|
|
3487
3486
|
const removeDynamicTag = () => {
|
|
@@ -3490,16 +3489,16 @@ var DynamicSelectionControl = () => {
|
|
|
3490
3489
|
if (!dynamicTag) {
|
|
3491
3490
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
3492
3491
|
}
|
|
3493
|
-
return /* @__PURE__ */ React74.createElement(
|
|
3494
|
-
|
|
3492
|
+
return /* @__PURE__ */ React74.createElement(import_ui61.Box, null, /* @__PURE__ */ React74.createElement(
|
|
3493
|
+
import_ui61.UnstableTag,
|
|
3495
3494
|
{
|
|
3496
3495
|
fullWidth: true,
|
|
3497
3496
|
showActionsOnHover: true,
|
|
3498
3497
|
label: dynamicTag.label,
|
|
3499
3498
|
startIcon: /* @__PURE__ */ React74.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4 }),
|
|
3500
|
-
...(0,
|
|
3499
|
+
...(0, import_ui61.bindTrigger)(selectionPopoverState),
|
|
3501
3500
|
actions: /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React74.createElement(
|
|
3502
|
-
|
|
3501
|
+
import_ui61.IconButton,
|
|
3503
3502
|
{
|
|
3504
3503
|
size: SIZE4,
|
|
3505
3504
|
onClick: removeDynamicTag,
|
|
@@ -3509,41 +3508,41 @@ var DynamicSelectionControl = () => {
|
|
|
3509
3508
|
))
|
|
3510
3509
|
}
|
|
3511
3510
|
), /* @__PURE__ */ React74.createElement(
|
|
3512
|
-
|
|
3511
|
+
import_ui61.Popover,
|
|
3513
3512
|
{
|
|
3514
3513
|
disablePortal: true,
|
|
3515
3514
|
disableScrollLock: true,
|
|
3516
3515
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
3517
|
-
...(0,
|
|
3516
|
+
...(0, import_ui61.bindPopover)(selectionPopoverState)
|
|
3518
3517
|
},
|
|
3519
|
-
/* @__PURE__ */ React74.createElement(
|
|
3518
|
+
/* @__PURE__ */ React74.createElement(import_ui61.Stack, null, /* @__PURE__ */ React74.createElement(import_ui61.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React74.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React74.createElement(import_ui61.Typography, { variant: "subtitle2" }, (0, import_i18n48.__)("Dynamic tags", "elementor")), /* @__PURE__ */ React74.createElement(import_ui61.IconButton, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React74.createElement(import_icons25.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React74.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
3520
3519
|
));
|
|
3521
3520
|
};
|
|
3522
3521
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
3523
|
-
const popupState = (0,
|
|
3522
|
+
const popupState = (0, import_ui61.usePopupState)({ variant: "popover" });
|
|
3524
3523
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
3525
3524
|
if (!hasDynamicSettings) {
|
|
3526
3525
|
return null;
|
|
3527
3526
|
}
|
|
3528
|
-
return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(
|
|
3529
|
-
|
|
3527
|
+
return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(import_ui61.IconButton, { size: SIZE4, ...(0, import_ui61.bindTrigger)(popupState), "aria-label": (0, import_i18n48.__)("Settings", "elementor") }, /* @__PURE__ */ React74.createElement(import_icons25.SettingsIcon, { fontSize: SIZE4 })), /* @__PURE__ */ React74.createElement(
|
|
3528
|
+
import_ui61.Popover,
|
|
3530
3529
|
{
|
|
3531
3530
|
disablePortal: true,
|
|
3532
3531
|
disableScrollLock: true,
|
|
3533
3532
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
3534
|
-
...(0,
|
|
3533
|
+
...(0, import_ui61.bindPopover)(popupState)
|
|
3535
3534
|
},
|
|
3536
|
-
/* @__PURE__ */ React74.createElement(
|
|
3535
|
+
/* @__PURE__ */ React74.createElement(import_ui61.Paper, { component: import_ui61.Stack, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React74.createElement(import_ui61.Stack, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React74.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React74.createElement(import_ui61.Typography, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React74.createElement(import_ui61.IconButton, { sx: { ml: "auto" }, size: SIZE4, onClick: popupState.close }, /* @__PURE__ */ React74.createElement(import_icons25.XIcon, { fontSize: SIZE4 }))), /* @__PURE__ */ React74.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
3537
3536
|
));
|
|
3538
3537
|
};
|
|
3539
3538
|
var DynamicSettings = ({ controls }) => {
|
|
3540
3539
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
3541
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
3540
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui61.useTabs)(0);
|
|
3542
3541
|
if (!tabs.length) {
|
|
3543
3542
|
return null;
|
|
3544
3543
|
}
|
|
3545
|
-
return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(
|
|
3546
|
-
return /* @__PURE__ */ React74.createElement(
|
|
3544
|
+
return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(import_ui61.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React74.createElement(import_ui61.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React74.createElement(import_ui61.Divider, null), tabs.map(({ value }, index) => {
|
|
3545
|
+
return /* @__PURE__ */ React74.createElement(import_ui61.TabPanel, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React74.createElement(PopoverContent, { p: 2, gap: 2 }, value.items.map((item) => {
|
|
3547
3546
|
if (item.type === "control") {
|
|
3548
3547
|
return /* @__PURE__ */ React74.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
3549
3548
|
}
|
|
@@ -3552,10 +3551,10 @@ var DynamicSettings = ({ controls }) => {
|
|
|
3552
3551
|
}));
|
|
3553
3552
|
};
|
|
3554
3553
|
var Control3 = ({ control }) => {
|
|
3555
|
-
if (!
|
|
3554
|
+
if (!getControl(control.type)) {
|
|
3556
3555
|
return null;
|
|
3557
3556
|
}
|
|
3558
|
-
return /* @__PURE__ */ React74.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React74.createElement(
|
|
3557
|
+
return /* @__PURE__ */ React74.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React74.createElement(import_ui61.Grid, { container: true, gap: 0.75 }, control.label ? /* @__PURE__ */ React74.createElement(import_ui61.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React74.createElement(import_editor_controls49.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React74.createElement(import_ui61.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React74.createElement(Control, { type: control.type, props: control.props }))));
|
|
3559
3558
|
};
|
|
3560
3559
|
|
|
3561
3560
|
// src/dynamics/dynamic-transformer.ts
|