@elementor/editor-editing-panel 1.32.0 → 1.33.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 +15 -0
- package/dist/index.js +163 -165
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +20 -22
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -6
- package/src/components/settings-tab.tsx +7 -3
- 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/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
|
|
@@ -2708,14 +2706,14 @@ var usePersistDimensions = () => {
|
|
|
2708
2706
|
// src/components/style-sections/size-section/size-section.tsx
|
|
2709
2707
|
var React51 = __toESM(require("react"));
|
|
2710
2708
|
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
2711
|
-
var
|
|
2709
|
+
var import_ui42 = require("@elementor/ui");
|
|
2712
2710
|
var import_i18n27 = require("@wordpress/i18n");
|
|
2713
2711
|
|
|
2714
2712
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
2715
2713
|
var React50 = __toESM(require("react"));
|
|
2716
2714
|
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
2717
2715
|
var import_icons17 = require("@elementor/icons");
|
|
2718
|
-
var
|
|
2716
|
+
var import_ui41 = require("@elementor/ui");
|
|
2719
2717
|
var import_i18n26 = require("@wordpress/i18n");
|
|
2720
2718
|
var options6 = [
|
|
2721
2719
|
{
|
|
@@ -2738,29 +2736,29 @@ var options6 = [
|
|
|
2738
2736
|
}
|
|
2739
2737
|
];
|
|
2740
2738
|
var OverflowField = () => {
|
|
2741
|
-
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React50.createElement(
|
|
2739
|
+
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
2740
|
};
|
|
2743
2741
|
|
|
2744
2742
|
// src/components/style-sections/size-section/size-section.tsx
|
|
2745
2743
|
var SizeSection = () => {
|
|
2746
|
-
return /* @__PURE__ */ React51.createElement(SectionContent, null, /* @__PURE__ */ React51.createElement(
|
|
2744
|
+
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
2745
|
SizeField,
|
|
2748
2746
|
{
|
|
2749
2747
|
bind: "min-width",
|
|
2750
2748
|
label: (0, import_i18n27.__)("Min width", "elementor"),
|
|
2751
2749
|
extendedValues: ["auto"]
|
|
2752
2750
|
}
|
|
2753
|
-
)), /* @__PURE__ */ React51.createElement(
|
|
2751
|
+
)), /* @__PURE__ */ React51.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(
|
|
2754
2752
|
SizeField,
|
|
2755
2753
|
{
|
|
2756
2754
|
bind: "min-height",
|
|
2757
2755
|
label: (0, import_i18n27.__)("Min height", "elementor"),
|
|
2758
2756
|
extendedValues: ["auto"]
|
|
2759
2757
|
}
|
|
2760
|
-
))), /* @__PURE__ */ React51.createElement(
|
|
2758
|
+
))), /* @__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
2759
|
};
|
|
2762
2760
|
var SizeField = ({ label, bind, extendedValues }) => {
|
|
2763
|
-
return /* @__PURE__ */ React51.createElement(StylesField, { bind }, /* @__PURE__ */ React51.createElement(
|
|
2761
|
+
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
2762
|
};
|
|
2765
2763
|
|
|
2766
2764
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
@@ -2785,15 +2783,15 @@ var React67 = __toESM(require("react"));
|
|
|
2785
2783
|
// src/components/collapsible-content.tsx
|
|
2786
2784
|
var React53 = __toESM(require("react"));
|
|
2787
2785
|
var import_react21 = require("react");
|
|
2788
|
-
var
|
|
2786
|
+
var import_ui43 = require("@elementor/ui");
|
|
2789
2787
|
var import_i18n29 = require("@wordpress/i18n");
|
|
2790
2788
|
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
2791
2789
|
const [open, setOpen] = (0, import_react21.useState)(defaultOpen);
|
|
2792
2790
|
const handleToggle = () => {
|
|
2793
2791
|
setOpen((prevOpen) => !prevOpen);
|
|
2794
2792
|
};
|
|
2795
|
-
return /* @__PURE__ */ React53.createElement(
|
|
2796
|
-
|
|
2793
|
+
return /* @__PURE__ */ React53.createElement(import_ui43.Stack, null, /* @__PURE__ */ React53.createElement(
|
|
2794
|
+
import_ui43.Button,
|
|
2797
2795
|
{
|
|
2798
2796
|
fullWidth: true,
|
|
2799
2797
|
size: "small",
|
|
@@ -2804,13 +2802,13 @@ var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
|
2804
2802
|
sx: { my: 0.5 }
|
|
2805
2803
|
},
|
|
2806
2804
|
open ? (0, import_i18n29.__)("Show less", "elementor") : (0, import_i18n29.__)("Show more", "elementor")
|
|
2807
|
-
), /* @__PURE__ */ React53.createElement(
|
|
2805
|
+
), /* @__PURE__ */ React53.createElement(import_ui43.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
2808
2806
|
};
|
|
2809
2807
|
|
|
2810
2808
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
2811
2809
|
var React54 = __toESM(require("react"));
|
|
2812
2810
|
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
2813
|
-
var
|
|
2811
|
+
var import_ui44 = require("@elementor/ui");
|
|
2814
2812
|
var import_i18n31 = require("@wordpress/i18n");
|
|
2815
2813
|
|
|
2816
2814
|
// src/components/style-sections/typography-section/hooks/use-font-families.ts
|
|
@@ -2864,23 +2862,23 @@ var FontFamilyField = () => {
|
|
|
2864
2862
|
if (fontFamilies.length === 0) {
|
|
2865
2863
|
return null;
|
|
2866
2864
|
}
|
|
2867
|
-
return /* @__PURE__ */ React54.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React54.createElement(
|
|
2865
|
+
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
2866
|
};
|
|
2869
2867
|
|
|
2870
2868
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
2871
2869
|
var React55 = __toESM(require("react"));
|
|
2872
2870
|
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
2873
|
-
var
|
|
2871
|
+
var import_ui45 = require("@elementor/ui");
|
|
2874
2872
|
var import_i18n32 = require("@wordpress/i18n");
|
|
2875
2873
|
var FontSizeField = () => {
|
|
2876
|
-
return /* @__PURE__ */ React55.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React55.createElement(
|
|
2874
|
+
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
2875
|
};
|
|
2878
2876
|
|
|
2879
2877
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
2880
2878
|
var React56 = __toESM(require("react"));
|
|
2881
2879
|
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
2882
2880
|
var import_icons18 = require("@elementor/icons");
|
|
2883
|
-
var
|
|
2881
|
+
var import_ui46 = require("@elementor/ui");
|
|
2884
2882
|
var import_i18n33 = require("@wordpress/i18n");
|
|
2885
2883
|
var options7 = [
|
|
2886
2884
|
{
|
|
@@ -2896,12 +2894,12 @@ var options7 = [
|
|
|
2896
2894
|
showTooltip: true
|
|
2897
2895
|
}
|
|
2898
2896
|
];
|
|
2899
|
-
var FontStyleField = () => /* @__PURE__ */ React56.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React56.createElement(
|
|
2897
|
+
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
2898
|
|
|
2901
2899
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
2902
2900
|
var React57 = __toESM(require("react"));
|
|
2903
2901
|
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
2904
|
-
var
|
|
2902
|
+
var import_ui47 = require("@elementor/ui");
|
|
2905
2903
|
var import_i18n34 = require("@wordpress/i18n");
|
|
2906
2904
|
var fontWeightOptions = [
|
|
2907
2905
|
{ value: "100", label: (0, import_i18n34.__)("100 - Thin", "elementor") },
|
|
@@ -2915,35 +2913,35 @@ var fontWeightOptions = [
|
|
|
2915
2913
|
{ value: "900", label: (0, import_i18n34.__)("900 - Black", "elementor") }
|
|
2916
2914
|
];
|
|
2917
2915
|
var FontWeightField = () => {
|
|
2918
|
-
return /* @__PURE__ */ React57.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React57.createElement(
|
|
2916
|
+
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
2917
|
};
|
|
2920
2918
|
|
|
2921
2919
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
2922
2920
|
var React58 = __toESM(require("react"));
|
|
2923
2921
|
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
2924
|
-
var
|
|
2922
|
+
var import_ui48 = require("@elementor/ui");
|
|
2925
2923
|
var import_i18n35 = require("@wordpress/i18n");
|
|
2926
2924
|
var LetterSpacingField = () => {
|
|
2927
|
-
return /* @__PURE__ */ React58.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React58.createElement(
|
|
2925
|
+
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
2926
|
};
|
|
2929
2927
|
|
|
2930
2928
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
2931
2929
|
var React59 = __toESM(require("react"));
|
|
2932
2930
|
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
2933
|
-
var
|
|
2931
|
+
var import_ui49 = require("@elementor/ui");
|
|
2934
2932
|
var import_i18n36 = require("@wordpress/i18n");
|
|
2935
2933
|
var LineHeightField = () => {
|
|
2936
|
-
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React59.createElement(
|
|
2934
|
+
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
2935
|
};
|
|
2938
2936
|
|
|
2939
2937
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
2940
2938
|
var React60 = __toESM(require("react"));
|
|
2941
2939
|
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
2942
2940
|
var import_icons19 = require("@elementor/icons");
|
|
2943
|
-
var
|
|
2941
|
+
var import_ui50 = require("@elementor/ui");
|
|
2944
2942
|
var import_i18n37 = require("@wordpress/i18n");
|
|
2945
|
-
var AlignStartIcon = (0,
|
|
2946
|
-
var AlignEndIcon = (0,
|
|
2943
|
+
var AlignStartIcon = (0, import_ui50.withDirection)(import_icons19.AlignLeftIcon);
|
|
2944
|
+
var AlignEndIcon = (0, import_ui50.withDirection)(import_icons19.AlignRightIcon);
|
|
2947
2945
|
var options8 = [
|
|
2948
2946
|
{
|
|
2949
2947
|
value: "start",
|
|
@@ -2971,23 +2969,23 @@ var options8 = [
|
|
|
2971
2969
|
}
|
|
2972
2970
|
];
|
|
2973
2971
|
var TextAlignmentField = () => {
|
|
2974
|
-
return /* @__PURE__ */ React60.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React60.createElement(
|
|
2972
|
+
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
2973
|
};
|
|
2976
2974
|
|
|
2977
2975
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
2978
2976
|
var React61 = __toESM(require("react"));
|
|
2979
2977
|
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
2980
|
-
var
|
|
2978
|
+
var import_ui51 = require("@elementor/ui");
|
|
2981
2979
|
var import_i18n38 = require("@wordpress/i18n");
|
|
2982
2980
|
var TextColorField = () => {
|
|
2983
|
-
return /* @__PURE__ */ React61.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React61.createElement(
|
|
2981
|
+
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
2982
|
};
|
|
2985
2983
|
|
|
2986
2984
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
2987
2985
|
var React62 = __toESM(require("react"));
|
|
2988
2986
|
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
2989
2987
|
var import_icons20 = require("@elementor/icons");
|
|
2990
|
-
var
|
|
2988
|
+
var import_ui52 = require("@elementor/ui");
|
|
2991
2989
|
var import_i18n39 = require("@wordpress/i18n");
|
|
2992
2990
|
var options9 = [
|
|
2993
2991
|
{
|
|
@@ -3016,13 +3014,13 @@ var options9 = [
|
|
|
3016
3014
|
showTooltip: true
|
|
3017
3015
|
}
|
|
3018
3016
|
];
|
|
3019
|
-
var TextDecorationField = () => /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-decoration" }, /* @__PURE__ */ React62.createElement(
|
|
3017
|
+
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
3018
|
|
|
3021
3019
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
3022
3020
|
var React63 = __toESM(require("react"));
|
|
3023
3021
|
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
3024
3022
|
var import_icons21 = require("@elementor/icons");
|
|
3025
|
-
var
|
|
3023
|
+
var import_ui53 = require("@elementor/ui");
|
|
3026
3024
|
var import_i18n40 = require("@wordpress/i18n");
|
|
3027
3025
|
var options10 = [
|
|
3028
3026
|
{
|
|
@@ -3039,7 +3037,7 @@ var options10 = [
|
|
|
3039
3037
|
}
|
|
3040
3038
|
];
|
|
3041
3039
|
var TextDirectionField = () => {
|
|
3042
|
-
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React63.createElement(
|
|
3040
|
+
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
3041
|
};
|
|
3044
3042
|
|
|
3045
3043
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -3087,7 +3085,7 @@ var TextStrokeField = () => {
|
|
|
3087
3085
|
var React65 = __toESM(require("react"));
|
|
3088
3086
|
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
3089
3087
|
var import_icons22 = require("@elementor/icons");
|
|
3090
|
-
var
|
|
3088
|
+
var import_ui54 = require("@elementor/ui");
|
|
3091
3089
|
var import_i18n42 = require("@wordpress/i18n");
|
|
3092
3090
|
var options11 = [
|
|
3093
3091
|
{
|
|
@@ -3115,15 +3113,15 @@ var options11 = [
|
|
|
3115
3113
|
showTooltip: true
|
|
3116
3114
|
}
|
|
3117
3115
|
];
|
|
3118
|
-
var TransformField = () => /* @__PURE__ */ React65.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React65.createElement(
|
|
3116
|
+
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
3117
|
|
|
3120
3118
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
3121
3119
|
var React66 = __toESM(require("react"));
|
|
3122
3120
|
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
3123
|
-
var
|
|
3121
|
+
var import_ui55 = require("@elementor/ui");
|
|
3124
3122
|
var import_i18n43 = require("@wordpress/i18n");
|
|
3125
3123
|
var WordSpacingField = () => {
|
|
3126
|
-
return /* @__PURE__ */ React66.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React66.createElement(
|
|
3124
|
+
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
3125
|
};
|
|
3128
3126
|
|
|
3129
3127
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -3156,12 +3154,12 @@ var StyleTab = () => {
|
|
|
3156
3154
|
},
|
|
3157
3155
|
setMetaState: setActiveStyleState
|
|
3158
3156
|
},
|
|
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(
|
|
3157
|
+
/* @__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
3158
|
));
|
|
3161
3159
|
};
|
|
3162
3160
|
function ClassesHeader({ children }) {
|
|
3163
3161
|
const scrollDirection = useScrollDirection();
|
|
3164
|
-
return /* @__PURE__ */ React68.createElement(
|
|
3162
|
+
return /* @__PURE__ */ React68.createElement(import_ui56.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
3165
3163
|
}
|
|
3166
3164
|
function useCurrentClassesProp() {
|
|
3167
3165
|
const { elementType } = useElement();
|
|
@@ -3177,11 +3175,11 @@ function useCurrentClassesProp() {
|
|
|
3177
3175
|
// src/components/editing-panel-tabs.tsx
|
|
3178
3176
|
var EditingPanelTabs = () => {
|
|
3179
3177
|
const { element } = useElement();
|
|
3180
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
3178
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui57.useTabs)("settings");
|
|
3181
3179
|
return (
|
|
3182
3180
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
3183
3181
|
// 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(
|
|
3182
|
+
/* @__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
3183
|
);
|
|
3186
3184
|
};
|
|
3187
3185
|
|
|
@@ -3195,7 +3193,7 @@ var EditingPanel = () => {
|
|
|
3195
3193
|
return null;
|
|
3196
3194
|
}
|
|
3197
3195
|
const panelTitle = (0, import_i18n46.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
3198
|
-
return /* @__PURE__ */ React70.createElement(
|
|
3196
|
+
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
3197
|
};
|
|
3200
3198
|
|
|
3201
3199
|
// src/panel.ts
|
|
@@ -3250,13 +3248,13 @@ var import_editor_canvas3 = require("@elementor/editor-canvas");
|
|
|
3250
3248
|
var React74 = __toESM(require("react"));
|
|
3251
3249
|
var import_editor_controls49 = require("@elementor/editor-controls");
|
|
3252
3250
|
var import_icons25 = require("@elementor/icons");
|
|
3253
|
-
var
|
|
3251
|
+
var import_ui61 = require("@elementor/ui");
|
|
3254
3252
|
var import_i18n48 = require("@wordpress/i18n");
|
|
3255
3253
|
|
|
3256
3254
|
// src/components/popover-content.tsx
|
|
3257
3255
|
var React71 = __toESM(require("react"));
|
|
3258
|
-
var
|
|
3259
|
-
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React71.createElement(
|
|
3256
|
+
var import_ui59 = require("@elementor/ui");
|
|
3257
|
+
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React71.createElement(import_ui59.Stack, { alignItems, gap, p }, children);
|
|
3260
3258
|
|
|
3261
3259
|
// src/hooks/use-persist-dynamic-value.ts
|
|
3262
3260
|
var import_session5 = require("@elementor/session");
|
|
@@ -3374,7 +3372,7 @@ var React73 = __toESM(require("react"));
|
|
|
3374
3372
|
var import_react28 = require("react");
|
|
3375
3373
|
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
3376
3374
|
var import_icons24 = require("@elementor/icons");
|
|
3377
|
-
var
|
|
3375
|
+
var import_ui60 = require("@elementor/ui");
|
|
3378
3376
|
var import_i18n47 = require("@wordpress/i18n");
|
|
3379
3377
|
var SIZE3 = "tiny";
|
|
3380
3378
|
var DynamicSelection = ({ onSelect }) => {
|
|
@@ -3396,8 +3394,8 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3396
3394
|
setValue({ name: value, settings: { label } });
|
|
3397
3395
|
onSelect?.();
|
|
3398
3396
|
};
|
|
3399
|
-
return /* @__PURE__ */ React73.createElement(
|
|
3400
|
-
|
|
3397
|
+
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(
|
|
3398
|
+
import_ui60.TextField,
|
|
3401
3399
|
{
|
|
3402
3400
|
fullWidth: true,
|
|
3403
3401
|
size: SIZE3,
|
|
@@ -3405,11 +3403,11 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3405
3403
|
onChange: handleSearch,
|
|
3406
3404
|
placeholder: (0, import_i18n47.__)("Search dynamic tags\u2026", "elementor"),
|
|
3407
3405
|
InputProps: {
|
|
3408
|
-
startAdornment: /* @__PURE__ */ React73.createElement(
|
|
3406
|
+
startAdornment: /* @__PURE__ */ React73.createElement(import_ui60.InputAdornment, { position: "start" }, /* @__PURE__ */ React73.createElement(import_icons24.SearchIcon, { fontSize: SIZE3 }))
|
|
3409
3407
|
}
|
|
3410
3408
|
}
|
|
3411
|
-
)), /* @__PURE__ */ React73.createElement(
|
|
3412
|
-
|
|
3409
|
+
)), /* @__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(
|
|
3410
|
+
import_ui60.MenuSubheader,
|
|
3413
3411
|
{
|
|
3414
3412
|
sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
|
|
3415
3413
|
},
|
|
@@ -3417,7 +3415,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3417
3415
|
), items3.map(({ value, label: tagLabel }) => {
|
|
3418
3416
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
3419
3417
|
return /* @__PURE__ */ React73.createElement(
|
|
3420
|
-
|
|
3418
|
+
import_ui60.MenuItem,
|
|
3421
3419
|
{
|
|
3422
3420
|
key: value,
|
|
3423
3421
|
selected: isSelected,
|
|
@@ -3430,7 +3428,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3430
3428
|
})))) : /* @__PURE__ */ React73.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") }))));
|
|
3431
3429
|
};
|
|
3432
3430
|
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React73.createElement(
|
|
3433
|
-
|
|
3431
|
+
import_ui60.Stack,
|
|
3434
3432
|
{
|
|
3435
3433
|
gap: 1,
|
|
3436
3434
|
alignItems: "center",
|
|
@@ -3441,11 +3439,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React73.createElem
|
|
|
3441
3439
|
sx: { pb: 3.5 }
|
|
3442
3440
|
},
|
|
3443
3441
|
/* @__PURE__ */ React73.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
|
|
3444
|
-
/* @__PURE__ */ React73.createElement(
|
|
3445
|
-
/* @__PURE__ */ React73.createElement(
|
|
3442
|
+
/* @__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."),
|
|
3443
|
+
/* @__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
3444
|
);
|
|
3447
|
-
var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(
|
|
3448
|
-
|
|
3445
|
+
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(
|
|
3446
|
+
import_ui60.Stack,
|
|
3449
3447
|
{
|
|
3450
3448
|
gap: 1,
|
|
3451
3449
|
alignItems: "center",
|
|
@@ -3456,8 +3454,8 @@ var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(import_ui59.Box,
|
|
|
3456
3454
|
sx: { pb: 3.5 }
|
|
3457
3455
|
},
|
|
3458
3456
|
/* @__PURE__ */ React73.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
|
|
3459
|
-
/* @__PURE__ */ React73.createElement(
|
|
3460
|
-
/* @__PURE__ */ React73.createElement(
|
|
3457
|
+
/* @__PURE__ */ React73.createElement(import_ui60.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n47.__)("Streamline your workflow with dynamic tags", "elementor")),
|
|
3458
|
+
/* @__PURE__ */ React73.createElement(import_ui60.Typography, { align: "center", variant: "caption" }, (0, import_i18n47.__)("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
|
|
3461
3459
|
));
|
|
3462
3460
|
var useFilteredOptions = (searchValue) => {
|
|
3463
3461
|
const dynamicTags = usePropDynamicTags();
|
|
@@ -3481,7 +3479,7 @@ var DynamicSelectionControl = () => {
|
|
|
3481
3479
|
const { setValue: setAnyValue } = (0, import_editor_controls49.useBoundProp)();
|
|
3482
3480
|
const { bind, value } = (0, import_editor_controls49.useBoundProp)(dynamicPropTypeUtil);
|
|
3483
3481
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
3484
|
-
const selectionPopoverState = (0,
|
|
3482
|
+
const selectionPopoverState = (0, import_ui61.usePopupState)({ variant: "popover" });
|
|
3485
3483
|
const { name: tagName = "" } = value;
|
|
3486
3484
|
const dynamicTag = useDynamicTag(tagName);
|
|
3487
3485
|
const removeDynamicTag = () => {
|
|
@@ -3490,16 +3488,16 @@ var DynamicSelectionControl = () => {
|
|
|
3490
3488
|
if (!dynamicTag) {
|
|
3491
3489
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
3492
3490
|
}
|
|
3493
|
-
return /* @__PURE__ */ React74.createElement(
|
|
3494
|
-
|
|
3491
|
+
return /* @__PURE__ */ React74.createElement(import_ui61.Box, null, /* @__PURE__ */ React74.createElement(
|
|
3492
|
+
import_ui61.UnstableTag,
|
|
3495
3493
|
{
|
|
3496
3494
|
fullWidth: true,
|
|
3497
3495
|
showActionsOnHover: true,
|
|
3498
3496
|
label: dynamicTag.label,
|
|
3499
3497
|
startIcon: /* @__PURE__ */ React74.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4 }),
|
|
3500
|
-
...(0,
|
|
3498
|
+
...(0, import_ui61.bindTrigger)(selectionPopoverState),
|
|
3501
3499
|
actions: /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React74.createElement(
|
|
3502
|
-
|
|
3500
|
+
import_ui61.IconButton,
|
|
3503
3501
|
{
|
|
3504
3502
|
size: SIZE4,
|
|
3505
3503
|
onClick: removeDynamicTag,
|
|
@@ -3509,41 +3507,41 @@ var DynamicSelectionControl = () => {
|
|
|
3509
3507
|
))
|
|
3510
3508
|
}
|
|
3511
3509
|
), /* @__PURE__ */ React74.createElement(
|
|
3512
|
-
|
|
3510
|
+
import_ui61.Popover,
|
|
3513
3511
|
{
|
|
3514
3512
|
disablePortal: true,
|
|
3515
3513
|
disableScrollLock: true,
|
|
3516
3514
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
3517
|
-
...(0,
|
|
3515
|
+
...(0, import_ui61.bindPopover)(selectionPopoverState)
|
|
3518
3516
|
},
|
|
3519
|
-
/* @__PURE__ */ React74.createElement(
|
|
3517
|
+
/* @__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
3518
|
));
|
|
3521
3519
|
};
|
|
3522
3520
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
3523
|
-
const popupState = (0,
|
|
3521
|
+
const popupState = (0, import_ui61.usePopupState)({ variant: "popover" });
|
|
3524
3522
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
3525
3523
|
if (!hasDynamicSettings) {
|
|
3526
3524
|
return null;
|
|
3527
3525
|
}
|
|
3528
|
-
return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(
|
|
3529
|
-
|
|
3526
|
+
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(
|
|
3527
|
+
import_ui61.Popover,
|
|
3530
3528
|
{
|
|
3531
3529
|
disablePortal: true,
|
|
3532
3530
|
disableScrollLock: true,
|
|
3533
3531
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
3534
|
-
...(0,
|
|
3532
|
+
...(0, import_ui61.bindPopover)(popupState)
|
|
3535
3533
|
},
|
|
3536
|
-
/* @__PURE__ */ React74.createElement(
|
|
3534
|
+
/* @__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
3535
|
));
|
|
3538
3536
|
};
|
|
3539
3537
|
var DynamicSettings = ({ controls }) => {
|
|
3540
3538
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
3541
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
3539
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui61.useTabs)(0);
|
|
3542
3540
|
if (!tabs.length) {
|
|
3543
3541
|
return null;
|
|
3544
3542
|
}
|
|
3545
|
-
return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(
|
|
3546
|
-
return /* @__PURE__ */ React74.createElement(
|
|
3543
|
+
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) => {
|
|
3544
|
+
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
3545
|
if (item.type === "control") {
|
|
3548
3546
|
return /* @__PURE__ */ React74.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
3549
3547
|
}
|
|
@@ -3552,10 +3550,10 @@ var DynamicSettings = ({ controls }) => {
|
|
|
3552
3550
|
}));
|
|
3553
3551
|
};
|
|
3554
3552
|
var Control3 = ({ control }) => {
|
|
3555
|
-
if (!
|
|
3553
|
+
if (!getControl(control.type)) {
|
|
3556
3554
|
return null;
|
|
3557
3555
|
}
|
|
3558
|
-
return /* @__PURE__ */ React74.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React74.createElement(
|
|
3556
|
+
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
3557
|
};
|
|
3560
3558
|
|
|
3561
3559
|
// src/dynamics/dynamic-transformer.ts
|