@elementor/editor-editing-panel 3.32.0-94 → 3.33.0-100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +871 -807
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +710 -646
- package/dist/index.mjs.map +1 -1
- package/package.json +19 -19
- package/src/components/custom-css-field.tsx +20 -0
- package/src/components/custom-css-indicator.tsx +16 -0
- package/src/components/custom-css.tsx +21 -4
- package/src/components/section.tsx +9 -2
- package/src/components/style-tab-section.tsx +8 -3
- package/src/components/style-tab.tsx +2 -0
- package/src/styles-inheritance/components/styles-inheritance-section-indicators.tsx +5 -0
package/dist/index.js
CHANGED
|
@@ -41,7 +41,7 @@ __export(index_exports, {
|
|
|
41
41
|
registerControlReplacement: () => registerControlReplacement,
|
|
42
42
|
registerStyleProviderToColors: () => registerStyleProviderToColors,
|
|
43
43
|
stylesInheritanceTransformersRegistry: () => stylesInheritanceTransformersRegistry,
|
|
44
|
-
useBoundProp: () =>
|
|
44
|
+
useBoundProp: () => import_editor_controls63.useBoundProp,
|
|
45
45
|
useCustomCss: () => useCustomCss,
|
|
46
46
|
useFontFamilies: () => useFontFamilies,
|
|
47
47
|
usePanelActions: () => usePanelActions,
|
|
@@ -49,7 +49,7 @@ __export(index_exports, {
|
|
|
49
49
|
useSectionWidth: () => useSectionWidth
|
|
50
50
|
});
|
|
51
51
|
module.exports = __toCommonJS(index_exports);
|
|
52
|
-
var
|
|
52
|
+
var import_editor_controls63 = require("@elementor/editor-controls");
|
|
53
53
|
|
|
54
54
|
// src/components/css-classes/css-class-convert-local.tsx
|
|
55
55
|
var React4 = __toESM(require("react"));
|
|
@@ -1284,8 +1284,10 @@ var import_ui8 = require("@elementor/ui");
|
|
|
1284
1284
|
var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React12.createElement(import_ui8.Stack, { gap, sx: { ...sx } }, children);
|
|
1285
1285
|
|
|
1286
1286
|
// src/components/custom-css.tsx
|
|
1287
|
-
var
|
|
1288
|
-
var
|
|
1287
|
+
var React15 = __toESM(require("react"));
|
|
1288
|
+
var import_editor_controls2 = require("@elementor/editor-controls");
|
|
1289
|
+
var import_ui9 = require("@elementor/ui");
|
|
1290
|
+
var import_i18n7 = require("@wordpress/i18n");
|
|
1289
1291
|
|
|
1290
1292
|
// src/hooks/use-custom-css.ts
|
|
1291
1293
|
var import_react14 = require("react");
|
|
@@ -1561,18 +1563,56 @@ function sanitize(raw) {
|
|
|
1561
1563
|
return import_editor_props3.stringPropTypeUtil.schema.safeParse(import_editor_props3.stringPropTypeUtil.create(raw)).data?.value?.trim() ?? "";
|
|
1562
1564
|
}
|
|
1563
1565
|
|
|
1566
|
+
// src/components/custom-css-field.tsx
|
|
1567
|
+
var React14 = __toESM(require("react"));
|
|
1568
|
+
var import_editor_controls = require("@elementor/editor-controls");
|
|
1569
|
+
|
|
1570
|
+
// src/components/custom-css-indicator.tsx
|
|
1571
|
+
var React13 = __toESM(require("react"));
|
|
1572
|
+
var CustomCssIndicator = () => {
|
|
1573
|
+
const { customCss } = useCustomCss();
|
|
1574
|
+
const hasContent = Boolean(customCss?.raw?.trim());
|
|
1575
|
+
if (!hasContent) {
|
|
1576
|
+
return null;
|
|
1577
|
+
}
|
|
1578
|
+
return /* @__PURE__ */ React13.createElement(StyleIndicator, { getColor: (theme) => theme.palette.accent.main });
|
|
1579
|
+
};
|
|
1580
|
+
|
|
1581
|
+
// src/components/custom-css-field.tsx
|
|
1582
|
+
var CustomCssField = ({ children }) => {
|
|
1583
|
+
return /* @__PURE__ */ React14.createElement(
|
|
1584
|
+
import_editor_controls.ControlAdornmentsProvider,
|
|
1585
|
+
{
|
|
1586
|
+
items: [
|
|
1587
|
+
{
|
|
1588
|
+
id: "custom-css-indicator",
|
|
1589
|
+
Adornment: CustomCssIndicator
|
|
1590
|
+
}
|
|
1591
|
+
]
|
|
1592
|
+
},
|
|
1593
|
+
children
|
|
1594
|
+
);
|
|
1595
|
+
};
|
|
1596
|
+
|
|
1564
1597
|
// src/components/custom-css.tsx
|
|
1565
1598
|
var CustomCss = () => {
|
|
1566
1599
|
const { customCss, setCustomCss } = useCustomCss();
|
|
1567
|
-
const
|
|
1568
|
-
|
|
1600
|
+
const [localState, setLocalState] = React15.useState({
|
|
1601
|
+
value: customCss?.raw || "",
|
|
1602
|
+
isValid: true
|
|
1603
|
+
});
|
|
1604
|
+
const handleChange = (value, isValid) => {
|
|
1605
|
+
setLocalState({ value, isValid });
|
|
1606
|
+
if (isValid) {
|
|
1607
|
+
setCustomCss(value, { history: { propDisplayName: "Custom CSS" } });
|
|
1608
|
+
}
|
|
1569
1609
|
};
|
|
1570
|
-
return /* @__PURE__ */
|
|
1610
|
+
return /* @__PURE__ */ React15.createElement(SectionContent, null, /* @__PURE__ */ React15.createElement(CustomCssField, null, /* @__PURE__ */ React15.createElement(import_ui9.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React15.createElement(import_editor_controls2.ControlFormLabel, null, (0, import_i18n7.__)("CSS code", "elementor")), /* @__PURE__ */ React15.createElement(import_editor_controls2.ControlAdornments, null))), /* @__PURE__ */ React15.createElement(import_editor_controls2.CssEditor, { value: localState.value, onChange: handleChange }));
|
|
1571
1611
|
};
|
|
1572
1612
|
|
|
1573
1613
|
// src/components/style-sections/typography-section/hooks/use-font-families.ts
|
|
1574
1614
|
var import_react15 = require("react");
|
|
1575
|
-
var
|
|
1615
|
+
var import_i18n8 = require("@wordpress/i18n");
|
|
1576
1616
|
|
|
1577
1617
|
// src/sync/get-elementor-globals.ts
|
|
1578
1618
|
var getElementorConfig = () => {
|
|
@@ -1586,9 +1626,9 @@ var getElementorFrontendConfig = () => {
|
|
|
1586
1626
|
|
|
1587
1627
|
// src/components/style-sections/typography-section/hooks/use-font-families.ts
|
|
1588
1628
|
var supportedCategories = {
|
|
1589
|
-
system: (0,
|
|
1590
|
-
custom: (0,
|
|
1591
|
-
googlefonts: (0,
|
|
1629
|
+
system: (0, import_i18n8.__)("System", "elementor"),
|
|
1630
|
+
custom: (0, import_i18n8.__)("Custom Fonts", "elementor"),
|
|
1631
|
+
googlefonts: (0, import_i18n8.__)("Google Fonts", "elementor")
|
|
1592
1632
|
};
|
|
1593
1633
|
var getFontFamilies = () => {
|
|
1594
1634
|
const { controls } = getElementorConfig();
|
|
@@ -1620,35 +1660,35 @@ var useFontFamilies = () => {
|
|
|
1620
1660
|
};
|
|
1621
1661
|
|
|
1622
1662
|
// src/control-replacement.tsx
|
|
1623
|
-
var
|
|
1624
|
-
var { registerControlReplacement, getControlReplacements } = (0,
|
|
1663
|
+
var import_editor_controls3 = require("@elementor/editor-controls");
|
|
1664
|
+
var { registerControlReplacement, getControlReplacements } = (0, import_editor_controls3.createControlReplacementsRegistry)();
|
|
1625
1665
|
|
|
1626
1666
|
// src/controls-actions.ts
|
|
1627
1667
|
var import_menus = require("@elementor/menus");
|
|
1628
1668
|
|
|
1629
1669
|
// src/action.tsx
|
|
1630
|
-
var
|
|
1631
|
-
var
|
|
1670
|
+
var React16 = __toESM(require("react"));
|
|
1671
|
+
var import_ui10 = require("@elementor/ui");
|
|
1632
1672
|
var SIZE = "tiny";
|
|
1633
1673
|
function Action({ title, visible = true, icon: Icon, onClick }) {
|
|
1634
1674
|
if (!visible) {
|
|
1635
1675
|
return null;
|
|
1636
1676
|
}
|
|
1637
|
-
return /* @__PURE__ */
|
|
1677
|
+
return /* @__PURE__ */ React16.createElement(import_ui10.Tooltip, { placement: "top", title, arrow: true }, /* @__PURE__ */ React16.createElement(import_ui10.IconButton, { "aria-label": title, size: SIZE, onClick }, /* @__PURE__ */ React16.createElement(Icon, { fontSize: SIZE })));
|
|
1638
1678
|
}
|
|
1639
1679
|
|
|
1640
1680
|
// src/popover-action.tsx
|
|
1641
|
-
var
|
|
1642
|
-
var
|
|
1643
|
-
var
|
|
1681
|
+
var React17 = __toESM(require("react"));
|
|
1682
|
+
var import_editor_controls4 = require("@elementor/editor-controls");
|
|
1683
|
+
var import_ui11 = require("@elementor/ui");
|
|
1644
1684
|
var SIZE2 = "tiny";
|
|
1645
1685
|
function PopoverAction({ title, visible = true, icon: Icon, content: PopoverContent }) {
|
|
1646
1686
|
const { popupState, triggerProps, popoverProps } = useFloatingActionsPopover();
|
|
1647
1687
|
if (!visible) {
|
|
1648
1688
|
return null;
|
|
1649
1689
|
}
|
|
1650
|
-
return /* @__PURE__ */
|
|
1651
|
-
|
|
1690
|
+
return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui11.Tooltip, { placement: "top", title }, /* @__PURE__ */ React17.createElement(import_ui11.IconButton, { "aria-label": title, size: SIZE2, ...triggerProps }, /* @__PURE__ */ React17.createElement(Icon, { fontSize: SIZE2 }))), /* @__PURE__ */ React17.createElement(
|
|
1691
|
+
import_ui11.Popover,
|
|
1652
1692
|
{
|
|
1653
1693
|
disableScrollLock: true,
|
|
1654
1694
|
anchorOrigin: {
|
|
@@ -1664,14 +1704,14 @@ function PopoverAction({ title, visible = true, icon: Icon, content: PopoverCont
|
|
|
1664
1704
|
},
|
|
1665
1705
|
...popoverProps
|
|
1666
1706
|
},
|
|
1667
|
-
/* @__PURE__ */
|
|
1707
|
+
/* @__PURE__ */ React17.createElement(PopoverContent, { close: popupState.close })
|
|
1668
1708
|
));
|
|
1669
1709
|
}
|
|
1670
1710
|
function useFloatingActionsPopover() {
|
|
1671
|
-
const { setOpen } = (0,
|
|
1672
|
-
const popupState = (0,
|
|
1673
|
-
const triggerProps = (0,
|
|
1674
|
-
const popoverProps = (0,
|
|
1711
|
+
const { setOpen } = (0, import_editor_controls4.useFloatingActionsBar)();
|
|
1712
|
+
const popupState = (0, import_ui11.usePopupState)({ variant: "popover" });
|
|
1713
|
+
const triggerProps = (0, import_ui11.bindTrigger)(popupState);
|
|
1714
|
+
const popoverProps = (0, import_ui11.bindPopover)(popupState);
|
|
1675
1715
|
const onClick = (e) => {
|
|
1676
1716
|
triggerProps.onClick(e);
|
|
1677
1717
|
setOpen(true);
|
|
@@ -1712,35 +1752,35 @@ var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
|
|
|
1712
1752
|
var import_editor_panels2 = require("@elementor/editor-panels");
|
|
1713
1753
|
|
|
1714
1754
|
// src/components/editing-panel.tsx
|
|
1715
|
-
var
|
|
1716
|
-
var
|
|
1755
|
+
var React91 = __toESM(require("react"));
|
|
1756
|
+
var import_editor_controls54 = require("@elementor/editor-controls");
|
|
1717
1757
|
var import_editor_elements12 = require("@elementor/editor-elements");
|
|
1718
1758
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
1719
1759
|
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
1720
1760
|
var import_icons24 = require("@elementor/icons");
|
|
1721
1761
|
var import_session7 = require("@elementor/session");
|
|
1722
|
-
var
|
|
1723
|
-
var
|
|
1762
|
+
var import_ui46 = require("@elementor/ui");
|
|
1763
|
+
var import_i18n62 = require("@wordpress/i18n");
|
|
1724
1764
|
|
|
1725
1765
|
// src/components/editing-panel-error-fallback.tsx
|
|
1726
|
-
var
|
|
1727
|
-
var
|
|
1766
|
+
var React18 = __toESM(require("react"));
|
|
1767
|
+
var import_ui12 = require("@elementor/ui");
|
|
1728
1768
|
function EditorPanelErrorFallback() {
|
|
1729
|
-
return /* @__PURE__ */
|
|
1769
|
+
return /* @__PURE__ */ React18.createElement(import_ui12.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React18.createElement(import_ui12.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React18.createElement("strong", null, "Something went wrong")));
|
|
1730
1770
|
}
|
|
1731
1771
|
|
|
1732
1772
|
// src/components/editing-panel-tabs.tsx
|
|
1733
|
-
var
|
|
1773
|
+
var React90 = __toESM(require("react"));
|
|
1734
1774
|
var import_react38 = require("react");
|
|
1735
|
-
var
|
|
1736
|
-
var
|
|
1775
|
+
var import_ui45 = require("@elementor/ui");
|
|
1776
|
+
var import_i18n61 = require("@wordpress/i18n");
|
|
1737
1777
|
|
|
1738
1778
|
// src/contexts/scroll-context.tsx
|
|
1739
|
-
var
|
|
1779
|
+
var React19 = __toESM(require("react"));
|
|
1740
1780
|
var import_react16 = require("react");
|
|
1741
|
-
var
|
|
1781
|
+
var import_ui13 = require("@elementor/ui");
|
|
1742
1782
|
var ScrollContext = (0, import_react16.createContext)(void 0);
|
|
1743
|
-
var ScrollPanel = (0,
|
|
1783
|
+
var ScrollPanel = (0, import_ui13.styled)("div")`
|
|
1744
1784
|
height: 100%;
|
|
1745
1785
|
overflow-y: auto;
|
|
1746
1786
|
`;
|
|
@@ -1768,7 +1808,7 @@ function ScrollProvider({ children }) {
|
|
|
1768
1808
|
scrollElement.removeEventListener("scroll", handleScroll);
|
|
1769
1809
|
};
|
|
1770
1810
|
});
|
|
1771
|
-
return /* @__PURE__ */
|
|
1811
|
+
return /* @__PURE__ */ React19.createElement(ScrollContext.Provider, { value: { direction } }, /* @__PURE__ */ React19.createElement(ScrollPanel, { ref }, children));
|
|
1772
1812
|
}
|
|
1773
1813
|
function useScrollDirection() {
|
|
1774
1814
|
return (0, import_react16.useContext)(ScrollContext)?.direction ?? DEFAULT_SCROLL_DIRECTION;
|
|
@@ -1819,30 +1859,30 @@ var useStateByElement = (key, initialValue) => {
|
|
|
1819
1859
|
};
|
|
1820
1860
|
|
|
1821
1861
|
// src/components/settings-tab.tsx
|
|
1822
|
-
var
|
|
1823
|
-
var
|
|
1862
|
+
var React26 = __toESM(require("react"));
|
|
1863
|
+
var import_editor_controls7 = require("@elementor/editor-controls");
|
|
1824
1864
|
var import_session4 = require("@elementor/session");
|
|
1825
|
-
var
|
|
1865
|
+
var import_ui19 = require("@elementor/ui");
|
|
1826
1866
|
|
|
1827
1867
|
// src/controls-registry/control.tsx
|
|
1828
|
-
var
|
|
1868
|
+
var React20 = __toESM(require("react"));
|
|
1829
1869
|
|
|
1830
1870
|
// src/controls-registry/controls-registry.tsx
|
|
1831
|
-
var
|
|
1871
|
+
var import_editor_controls5 = require("@elementor/editor-controls");
|
|
1832
1872
|
var import_editor_props4 = require("@elementor/editor-props");
|
|
1833
1873
|
var controlTypes = {
|
|
1834
|
-
image: { component:
|
|
1835
|
-
"svg-media": { component:
|
|
1836
|
-
text: { component:
|
|
1837
|
-
textarea: { component:
|
|
1838
|
-
size: { component:
|
|
1839
|
-
select: { component:
|
|
1840
|
-
link: { component:
|
|
1841
|
-
url: { component:
|
|
1842
|
-
switch: { component:
|
|
1843
|
-
number: { component:
|
|
1844
|
-
repeatable: { component:
|
|
1845
|
-
"key-value": { component:
|
|
1874
|
+
image: { component: import_editor_controls5.ImageControl, layout: "full", propTypeUtil: import_editor_props4.imagePropTypeUtil },
|
|
1875
|
+
"svg-media": { component: import_editor_controls5.SvgMediaControl, layout: "full", propTypeUtil: import_editor_props4.imageSrcPropTypeUtil },
|
|
1876
|
+
text: { component: import_editor_controls5.TextControl, layout: "full", propTypeUtil: import_editor_props4.stringPropTypeUtil },
|
|
1877
|
+
textarea: { component: import_editor_controls5.TextAreaControl, layout: "full", propTypeUtil: import_editor_props4.stringPropTypeUtil },
|
|
1878
|
+
size: { component: import_editor_controls5.SizeControl, layout: "two-columns", propTypeUtil: import_editor_props4.sizePropTypeUtil },
|
|
1879
|
+
select: { component: import_editor_controls5.SelectControl, layout: "two-columns", propTypeUtil: import_editor_props4.stringPropTypeUtil },
|
|
1880
|
+
link: { component: import_editor_controls5.LinkControl, layout: "custom", propTypeUtil: import_editor_props4.linkPropTypeUtil },
|
|
1881
|
+
url: { component: import_editor_controls5.UrlControl, layout: "full", propTypeUtil: import_editor_props4.stringPropTypeUtil },
|
|
1882
|
+
switch: { component: import_editor_controls5.SwitchControl, layout: "two-columns", propTypeUtil: import_editor_props4.booleanPropTypeUtil },
|
|
1883
|
+
number: { component: import_editor_controls5.NumberControl, layout: "two-columns", propTypeUtil: import_editor_props4.numberPropTypeUtil },
|
|
1884
|
+
repeatable: { component: import_editor_controls5.RepeatableControl, layout: "full", propTypeUtil: void 0 },
|
|
1885
|
+
"key-value": { component: import_editor_controls5.KeyValueControl, layout: "full", propTypeUtil: import_editor_props4.keyValuePropTypeUtil }
|
|
1846
1886
|
};
|
|
1847
1887
|
var ControlsRegistry = class {
|
|
1848
1888
|
constructor(controlsRegistry2 = controlTypes) {
|
|
@@ -1885,19 +1925,19 @@ var Control = ({ props, type }) => {
|
|
|
1885
1925
|
context: { controlType: type }
|
|
1886
1926
|
});
|
|
1887
1927
|
}
|
|
1888
|
-
return /* @__PURE__ */
|
|
1928
|
+
return /* @__PURE__ */ React20.createElement(ControlByType, { ...props, context: { elementId: element.id } });
|
|
1889
1929
|
};
|
|
1890
1930
|
|
|
1891
1931
|
// src/controls-registry/control-type-container.tsx
|
|
1892
|
-
var
|
|
1893
|
-
var
|
|
1932
|
+
var React21 = __toESM(require("react"));
|
|
1933
|
+
var import_ui14 = require("@elementor/ui");
|
|
1894
1934
|
var ControlTypeContainer = ({ children, layout }) => {
|
|
1895
1935
|
if (layout === "custom") {
|
|
1896
1936
|
return children;
|
|
1897
1937
|
}
|
|
1898
|
-
return /* @__PURE__ */
|
|
1938
|
+
return /* @__PURE__ */ React21.createElement(StyledContainer, { layout }, children);
|
|
1899
1939
|
};
|
|
1900
|
-
var StyledContainer = (0,
|
|
1940
|
+
var StyledContainer = (0, import_ui14.styled)(import_ui14.Box, {
|
|
1901
1941
|
shouldForwardProp: (prop) => !["layout"].includes(prop)
|
|
1902
1942
|
})(({ layout, theme }) => ({
|
|
1903
1943
|
display: "grid",
|
|
@@ -1913,14 +1953,14 @@ var getGridLayout = (layout) => ({
|
|
|
1913
1953
|
});
|
|
1914
1954
|
|
|
1915
1955
|
// src/controls-registry/settings-field.tsx
|
|
1916
|
-
var
|
|
1956
|
+
var React22 = __toESM(require("react"));
|
|
1917
1957
|
var import_react19 = require("react");
|
|
1918
|
-
var
|
|
1958
|
+
var import_editor_controls6 = require("@elementor/editor-controls");
|
|
1919
1959
|
var import_editor_documents2 = require("@elementor/editor-documents");
|
|
1920
1960
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
1921
1961
|
var import_editor_props6 = require("@elementor/editor-props");
|
|
1922
1962
|
var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
|
|
1923
|
-
var
|
|
1963
|
+
var import_i18n9 = require("@wordpress/i18n");
|
|
1924
1964
|
|
|
1925
1965
|
// src/utils/prop-dependency-utils.ts
|
|
1926
1966
|
var import_editor_props5 = require("@elementor/editor-props");
|
|
@@ -2066,7 +2106,7 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
|
|
|
2066
2106
|
undoableUpdateElementProp(settings);
|
|
2067
2107
|
};
|
|
2068
2108
|
const isDisabled = (prop) => !(0, import_editor_props6.isDependencyMet)(prop?.dependencies, elementSettingValues);
|
|
2069
|
-
return /* @__PURE__ */
|
|
2109
|
+
return /* @__PURE__ */ React22.createElement(import_editor_controls6.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React22.createElement(import_editor_controls6.PropKeyProvider, { bind }, children));
|
|
2070
2110
|
};
|
|
2071
2111
|
function useUndoableUpdateElementProp({
|
|
2072
2112
|
elementId,
|
|
@@ -2088,7 +2128,7 @@ function useUndoableUpdateElementProp({
|
|
|
2088
2128
|
{
|
|
2089
2129
|
title: (0, import_editor_elements6.getElementLabel)(elementId),
|
|
2090
2130
|
// translators: %s is the name of the property that was edited.
|
|
2091
|
-
subtitle: (0,
|
|
2131
|
+
subtitle: (0, import_i18n9.__)("%s edited", "elementor").replace("%s", propDisplayName),
|
|
2092
2132
|
debounce: { wait: HISTORY_DEBOUNCE_WAIT2 }
|
|
2093
2133
|
}
|
|
2094
2134
|
);
|
|
@@ -2096,14 +2136,14 @@ function useUndoableUpdateElementProp({
|
|
|
2096
2136
|
}
|
|
2097
2137
|
|
|
2098
2138
|
// src/components/section.tsx
|
|
2099
|
-
var
|
|
2139
|
+
var React24 = __toESM(require("react"));
|
|
2100
2140
|
var import_react21 = require("react");
|
|
2101
|
-
var
|
|
2141
|
+
var import_ui17 = require("@elementor/ui");
|
|
2102
2142
|
|
|
2103
2143
|
// src/components/collapse-icon.tsx
|
|
2104
2144
|
var import_icons3 = require("@elementor/icons");
|
|
2105
|
-
var
|
|
2106
|
-
var CollapseIcon = (0,
|
|
2145
|
+
var import_ui15 = require("@elementor/ui");
|
|
2146
|
+
var CollapseIcon = (0, import_ui15.styled)(import_icons3.ChevronDownIcon, {
|
|
2107
2147
|
shouldForwardProp: (prop) => prop !== "open"
|
|
2108
2148
|
})(({ theme, open }) => ({
|
|
2109
2149
|
transform: open ? "rotate(180deg)" : "rotate(0deg)",
|
|
@@ -2113,11 +2153,11 @@ var CollapseIcon = (0, import_ui14.styled)(import_icons3.ChevronDownIcon, {
|
|
|
2113
2153
|
}));
|
|
2114
2154
|
|
|
2115
2155
|
// src/components/collapsible-content.tsx
|
|
2116
|
-
var
|
|
2156
|
+
var React23 = __toESM(require("react"));
|
|
2117
2157
|
var import_react20 = require("react");
|
|
2118
|
-
var
|
|
2119
|
-
var
|
|
2120
|
-
var IndicatorsWrapper = (0,
|
|
2158
|
+
var import_ui16 = require("@elementor/ui");
|
|
2159
|
+
var import_i18n10 = require("@wordpress/i18n");
|
|
2160
|
+
var IndicatorsWrapper = (0, import_ui16.styled)("div")`
|
|
2121
2161
|
position: absolute;
|
|
2122
2162
|
top: 0;
|
|
2123
2163
|
right: ${({ theme }) => theme.spacing(3)};
|
|
@@ -2132,19 +2172,19 @@ var CollapsibleContent = ({ children, defaultOpen = false, titleEnd = null }) =>
|
|
|
2132
2172
|
const handleToggle = () => {
|
|
2133
2173
|
setOpen((prevOpen) => !prevOpen);
|
|
2134
2174
|
};
|
|
2135
|
-
return /* @__PURE__ */
|
|
2136
|
-
|
|
2175
|
+
return /* @__PURE__ */ React23.createElement(import_ui16.Stack, null, /* @__PURE__ */ React23.createElement(import_ui16.Stack, { sx: { position: "relative" } }, /* @__PURE__ */ React23.createElement(
|
|
2176
|
+
import_ui16.Button,
|
|
2137
2177
|
{
|
|
2138
2178
|
fullWidth: true,
|
|
2139
2179
|
size: "small",
|
|
2140
2180
|
color: "secondary",
|
|
2141
2181
|
variant: "outlined",
|
|
2142
2182
|
onClick: handleToggle,
|
|
2143
|
-
endIcon: /* @__PURE__ */
|
|
2183
|
+
endIcon: /* @__PURE__ */ React23.createElement(CollapseIcon, { open }),
|
|
2144
2184
|
sx: { my: 0.5 }
|
|
2145
2185
|
},
|
|
2146
|
-
open ? (0,
|
|
2147
|
-
), titleEnd && /* @__PURE__ */
|
|
2186
|
+
open ? (0, import_i18n10.__)("Show less", "elementor") : (0, import_i18n10.__)("Show more", "elementor")
|
|
2187
|
+
), titleEnd && /* @__PURE__ */ React23.createElement(IndicatorsWrapper, null, getCollapsibleValue(titleEnd, open))), /* @__PURE__ */ React23.createElement(import_ui16.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
2148
2188
|
};
|
|
2149
2189
|
function getCollapsibleValue(value, isOpen) {
|
|
2150
2190
|
if (typeof value === "function") {
|
|
@@ -2154,7 +2194,7 @@ function getCollapsibleValue(value, isOpen) {
|
|
|
2154
2194
|
}
|
|
2155
2195
|
|
|
2156
2196
|
// src/components/section.tsx
|
|
2157
|
-
function Section({ title, children, defaultExpanded = false, titleEnd }) {
|
|
2197
|
+
function Section({ title, children, defaultExpanded = false, titleEnd, unmountOnExit = true }) {
|
|
2158
2198
|
const [isOpen, setIsOpen] = useStateByElement(title, !!defaultExpanded);
|
|
2159
2199
|
const ref = (0, import_react21.useRef)(null);
|
|
2160
2200
|
const handleClick = () => {
|
|
@@ -2163,31 +2203,41 @@ function Section({ title, children, defaultExpanded = false, titleEnd }) {
|
|
|
2163
2203
|
const id = (0, import_react21.useId)();
|
|
2164
2204
|
const labelId = `label-${id}`;
|
|
2165
2205
|
const contentId = `content-${id}`;
|
|
2166
|
-
return /* @__PURE__ */
|
|
2167
|
-
|
|
2206
|
+
return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
|
|
2207
|
+
import_ui17.ListItemButton,
|
|
2168
2208
|
{
|
|
2169
2209
|
id: labelId,
|
|
2170
2210
|
"aria-controls": contentId,
|
|
2171
2211
|
onClick: handleClick,
|
|
2172
2212
|
sx: { "&:hover": { backgroundColor: "transparent" } }
|
|
2173
2213
|
},
|
|
2174
|
-
/* @__PURE__ */
|
|
2175
|
-
|
|
2214
|
+
/* @__PURE__ */ React24.createElement(import_ui17.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React24.createElement(
|
|
2215
|
+
import_ui17.ListItemText,
|
|
2176
2216
|
{
|
|
2177
2217
|
secondary: title,
|
|
2178
2218
|
secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
|
|
2179
2219
|
sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
|
|
2180
2220
|
}
|
|
2181
2221
|
), getCollapsibleValue(titleEnd, isOpen)),
|
|
2182
|
-
/* @__PURE__ */
|
|
2183
|
-
), /* @__PURE__ */
|
|
2222
|
+
/* @__PURE__ */ React24.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
|
|
2223
|
+
), /* @__PURE__ */ React24.createElement(
|
|
2224
|
+
import_ui17.Collapse,
|
|
2225
|
+
{
|
|
2226
|
+
id: contentId,
|
|
2227
|
+
"aria-labelledby": labelId,
|
|
2228
|
+
in: isOpen,
|
|
2229
|
+
timeout: "auto",
|
|
2230
|
+
unmountOnExit
|
|
2231
|
+
},
|
|
2232
|
+
/* @__PURE__ */ React24.createElement(SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ React24.createElement(import_ui17.Stack, { ref, gap: 2.5, p: 2 }, children))
|
|
2233
|
+
), /* @__PURE__ */ React24.createElement(import_ui17.Divider, null));
|
|
2184
2234
|
}
|
|
2185
2235
|
|
|
2186
2236
|
// src/components/sections-list.tsx
|
|
2187
|
-
var
|
|
2188
|
-
var
|
|
2237
|
+
var React25 = __toESM(require("react"));
|
|
2238
|
+
var import_ui18 = require("@elementor/ui");
|
|
2189
2239
|
function SectionsList(props) {
|
|
2190
|
-
return /* @__PURE__ */
|
|
2240
|
+
return /* @__PURE__ */ React25.createElement(import_ui18.List, { disablePadding: true, component: "div", ...props });
|
|
2191
2241
|
}
|
|
2192
2242
|
|
|
2193
2243
|
// src/components/settings-tab.tsx
|
|
@@ -2195,12 +2245,12 @@ var SettingsTab = () => {
|
|
|
2195
2245
|
const { elementType, element } = useElement();
|
|
2196
2246
|
const settingsDefault = useDefaultPanelSettings();
|
|
2197
2247
|
const isDefaultExpanded = (sectionId) => settingsDefault.defaultSectionsExpanded.settings?.includes(sectionId);
|
|
2198
|
-
return /* @__PURE__ */
|
|
2248
|
+
return /* @__PURE__ */ React26.createElement(import_session4.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React26.createElement(SectionsList, null, elementType.controls.map(({ type, value }, index) => {
|
|
2199
2249
|
if (type === "control") {
|
|
2200
|
-
return /* @__PURE__ */
|
|
2250
|
+
return /* @__PURE__ */ React26.createElement(Control2, { key: value.bind, control: value });
|
|
2201
2251
|
}
|
|
2202
2252
|
if (type === "section") {
|
|
2203
|
-
return /* @__PURE__ */
|
|
2253
|
+
return /* @__PURE__ */ React26.createElement(
|
|
2204
2254
|
Section,
|
|
2205
2255
|
{
|
|
2206
2256
|
title: value.label,
|
|
@@ -2209,7 +2259,7 @@ var SettingsTab = () => {
|
|
|
2209
2259
|
},
|
|
2210
2260
|
value.items?.map((item) => {
|
|
2211
2261
|
if (item.type === "control") {
|
|
2212
|
-
return /* @__PURE__ */
|
|
2262
|
+
return /* @__PURE__ */ React26.createElement(Control2, { key: item.value.bind, control: item.value });
|
|
2213
2263
|
}
|
|
2214
2264
|
return null;
|
|
2215
2265
|
})
|
|
@@ -2227,7 +2277,7 @@ var Control2 = ({ control }) => {
|
|
|
2227
2277
|
if (layout === "custom") {
|
|
2228
2278
|
controlProps.label = control.label;
|
|
2229
2279
|
}
|
|
2230
|
-
return /* @__PURE__ */
|
|
2280
|
+
return /* @__PURE__ */ React26.createElement(SettingsField, { bind: control.bind, propDisplayName: control.label || control.bind }, control.meta?.topDivider && /* @__PURE__ */ React26.createElement(import_ui19.Divider, null), /* @__PURE__ */ React26.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ React26.createElement(import_editor_controls7.ControlFormLabel, null, control.label) : null, /* @__PURE__ */ React26.createElement(Control, { type: control.type, props: controlProps })));
|
|
2231
2281
|
};
|
|
2232
2282
|
function populateChildControlProps(props) {
|
|
2233
2283
|
if (props.childControlType) {
|
|
@@ -2246,17 +2296,17 @@ function populateChildControlProps(props) {
|
|
|
2246
2296
|
}
|
|
2247
2297
|
|
|
2248
2298
|
// src/components/style-tab.tsx
|
|
2249
|
-
var
|
|
2299
|
+
var React89 = __toESM(require("react"));
|
|
2250
2300
|
var import_react37 = require("react");
|
|
2251
2301
|
var import_editor_props15 = require("@elementor/editor-props");
|
|
2252
2302
|
var import_editor_responsive3 = require("@elementor/editor-responsive");
|
|
2253
2303
|
var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
|
|
2254
2304
|
var import_session6 = require("@elementor/session");
|
|
2255
|
-
var
|
|
2256
|
-
var
|
|
2305
|
+
var import_ui44 = require("@elementor/ui");
|
|
2306
|
+
var import_i18n60 = require("@wordpress/i18n");
|
|
2257
2307
|
|
|
2258
2308
|
// src/contexts/styles-inheritance-context.tsx
|
|
2259
|
-
var
|
|
2309
|
+
var React27 = __toESM(require("react"));
|
|
2260
2310
|
var import_react22 = require("react");
|
|
2261
2311
|
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
2262
2312
|
var import_editor_props9 = require("@elementor/editor-props");
|
|
@@ -2492,7 +2542,7 @@ function StyleInheritanceProvider({ children }) {
|
|
|
2492
2542
|
const styleDefs = useAppliedStyles();
|
|
2493
2543
|
const breakpointsTree = (0, import_editor_responsive.getBreakpointsTree)();
|
|
2494
2544
|
const { getSnapshot, getInheritanceChain } = createStylesInheritance(styleDefs, breakpointsTree);
|
|
2495
|
-
return /* @__PURE__ */
|
|
2545
|
+
return /* @__PURE__ */ React27.createElement(Context4.Provider, { value: { getSnapshot, getInheritanceChain } }, children);
|
|
2496
2546
|
}
|
|
2497
2547
|
function useStylesInheritanceSnapshot() {
|
|
2498
2548
|
const context = (0, import_react22.useContext)(Context4);
|
|
@@ -2561,13 +2611,13 @@ function useActiveAndAppliedClassId(id, appliedClassesIds) {
|
|
|
2561
2611
|
}
|
|
2562
2612
|
|
|
2563
2613
|
// src/components/style-sections/background-section/background-section.tsx
|
|
2564
|
-
var
|
|
2565
|
-
var
|
|
2566
|
-
var
|
|
2614
|
+
var React35 = __toESM(require("react"));
|
|
2615
|
+
var import_editor_controls11 = require("@elementor/editor-controls");
|
|
2616
|
+
var import_i18n15 = require("@wordpress/i18n");
|
|
2567
2617
|
|
|
2568
2618
|
// src/controls-registry/styles-field.tsx
|
|
2569
|
-
var
|
|
2570
|
-
var
|
|
2619
|
+
var React34 = __toESM(require("react"));
|
|
2620
|
+
var import_editor_controls10 = require("@elementor/editor-controls");
|
|
2571
2621
|
var import_editor_styles4 = require("@elementor/editor-styles");
|
|
2572
2622
|
|
|
2573
2623
|
// src/hooks/use-styles-field.ts
|
|
@@ -2581,24 +2631,24 @@ function useStylesField(propName, meta) {
|
|
|
2581
2631
|
}
|
|
2582
2632
|
|
|
2583
2633
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
2584
|
-
var
|
|
2585
|
-
var
|
|
2634
|
+
var React33 = __toESM(require("react"));
|
|
2635
|
+
var import_editor_controls8 = require("@elementor/editor-controls");
|
|
2586
2636
|
var import_editor_props10 = require("@elementor/editor-props");
|
|
2587
2637
|
var import_editor_styles_repository14 = require("@elementor/editor-styles-repository");
|
|
2588
|
-
var
|
|
2638
|
+
var import_i18n14 = require("@wordpress/i18n");
|
|
2589
2639
|
|
|
2590
2640
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
2591
|
-
var
|
|
2641
|
+
var React32 = __toESM(require("react"));
|
|
2592
2642
|
var import_react24 = require("react");
|
|
2593
2643
|
var import_editor_canvas2 = require("@elementor/editor-canvas");
|
|
2594
2644
|
var import_editor_ui5 = require("@elementor/editor-ui");
|
|
2595
|
-
var
|
|
2596
|
-
var
|
|
2645
|
+
var import_ui25 = require("@elementor/ui");
|
|
2646
|
+
var import_i18n13 = require("@wordpress/i18n");
|
|
2597
2647
|
|
|
2598
2648
|
// src/hooks/use-direction.ts
|
|
2599
|
-
var
|
|
2649
|
+
var import_ui20 = require("@elementor/ui");
|
|
2600
2650
|
function useDirection() {
|
|
2601
|
-
const theme = (0,
|
|
2651
|
+
const theme = (0, import_ui20.useTheme)();
|
|
2602
2652
|
const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!getElementorFrontendConfig()?.is_rtl;
|
|
2603
2653
|
return { isSiteRtl, isUiRtl };
|
|
2604
2654
|
}
|
|
@@ -2606,7 +2656,7 @@ function useDirection() {
|
|
|
2606
2656
|
// src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
|
|
2607
2657
|
var import_react23 = require("react");
|
|
2608
2658
|
var import_editor_styles_repository12 = require("@elementor/editor-styles-repository");
|
|
2609
|
-
var
|
|
2659
|
+
var import_i18n11 = require("@wordpress/i18n");
|
|
2610
2660
|
var MAXIMUM_ITEMS = 2;
|
|
2611
2661
|
var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
2612
2662
|
const [items3, setItems] = (0, import_react23.useState)([]);
|
|
@@ -2617,7 +2667,7 @@ var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
|
2617
2667
|
);
|
|
2618
2668
|
const validItems = normalizedItems.map((item) => ({
|
|
2619
2669
|
...item,
|
|
2620
|
-
displayLabel: import_editor_styles_repository12.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0,
|
|
2670
|
+
displayLabel: import_editor_styles_repository12.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n11.__)("Base", "elementor")
|
|
2621
2671
|
})).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
|
|
2622
2672
|
setItems(validItems);
|
|
2623
2673
|
})();
|
|
@@ -2666,10 +2716,10 @@ var import_editor_canvas = require("@elementor/editor-canvas");
|
|
|
2666
2716
|
var stylesInheritanceTransformersRegistry = (0, import_editor_canvas.createTransformersRegistry)();
|
|
2667
2717
|
|
|
2668
2718
|
// src/styles-inheritance/components/infotip/breakpoint-icon.tsx
|
|
2669
|
-
var
|
|
2719
|
+
var React28 = __toESM(require("react"));
|
|
2670
2720
|
var import_editor_responsive2 = require("@elementor/editor-responsive");
|
|
2671
2721
|
var import_icons4 = require("@elementor/icons");
|
|
2672
|
-
var
|
|
2722
|
+
var import_ui21 = require("@elementor/ui");
|
|
2673
2723
|
var SIZE3 = "tiny";
|
|
2674
2724
|
var DEFAULT_BREAKPOINT3 = "desktop";
|
|
2675
2725
|
var breakpointIconMap = {
|
|
@@ -2689,21 +2739,21 @@ var BreakpointIcon = ({ breakpoint }) => {
|
|
|
2689
2739
|
return null;
|
|
2690
2740
|
}
|
|
2691
2741
|
const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
|
|
2692
|
-
return /* @__PURE__ */
|
|
2742
|
+
return /* @__PURE__ */ React28.createElement(import_ui21.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React28.createElement(IconComponent, { fontSize: SIZE3, sx: { mt: "2px" } }));
|
|
2693
2743
|
};
|
|
2694
2744
|
|
|
2695
2745
|
// src/styles-inheritance/components/infotip/label-chip.tsx
|
|
2696
|
-
var
|
|
2746
|
+
var React29 = __toESM(require("react"));
|
|
2697
2747
|
var import_editor_styles_repository13 = require("@elementor/editor-styles-repository");
|
|
2698
2748
|
var import_icons5 = require("@elementor/icons");
|
|
2699
|
-
var
|
|
2700
|
-
var
|
|
2749
|
+
var import_ui22 = require("@elementor/ui");
|
|
2750
|
+
var import_i18n12 = require("@wordpress/i18n");
|
|
2701
2751
|
var SIZE4 = "tiny";
|
|
2702
2752
|
var LabelChip = ({ displayLabel, provider }) => {
|
|
2703
2753
|
const isBaseStyle = provider === import_editor_styles_repository13.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
|
|
2704
|
-
const chipIcon = isBaseStyle ? /* @__PURE__ */
|
|
2705
|
-
return /* @__PURE__ */
|
|
2706
|
-
|
|
2754
|
+
const chipIcon = isBaseStyle ? /* @__PURE__ */ React29.createElement(import_ui22.Tooltip, { title: (0, import_i18n12.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React29.createElement(import_icons5.InfoCircleIcon, { fontSize: SIZE4 })) : void 0;
|
|
2755
|
+
return /* @__PURE__ */ React29.createElement(
|
|
2756
|
+
import_ui22.Chip,
|
|
2707
2757
|
{
|
|
2708
2758
|
label: displayLabel,
|
|
2709
2759
|
size: SIZE4,
|
|
@@ -2728,11 +2778,11 @@ var LabelChip = ({ displayLabel, provider }) => {
|
|
|
2728
2778
|
};
|
|
2729
2779
|
|
|
2730
2780
|
// src/styles-inheritance/components/infotip/value-component.tsx
|
|
2731
|
-
var
|
|
2732
|
-
var
|
|
2781
|
+
var React30 = __toESM(require("react"));
|
|
2782
|
+
var import_ui23 = require("@elementor/ui");
|
|
2733
2783
|
var ValueComponent = ({ index, value }) => {
|
|
2734
|
-
return /* @__PURE__ */
|
|
2735
|
-
|
|
2784
|
+
return /* @__PURE__ */ React30.createElement(
|
|
2785
|
+
import_ui23.Typography,
|
|
2736
2786
|
{
|
|
2737
2787
|
variant: "caption",
|
|
2738
2788
|
color: "text.tertiary",
|
|
@@ -2750,9 +2800,9 @@ var ValueComponent = ({ index, value }) => {
|
|
|
2750
2800
|
};
|
|
2751
2801
|
|
|
2752
2802
|
// src/styles-inheritance/components/infotip/action-icons.tsx
|
|
2753
|
-
var
|
|
2754
|
-
var
|
|
2755
|
-
var ActionIcons = () => /* @__PURE__ */
|
|
2803
|
+
var React31 = __toESM(require("react"));
|
|
2804
|
+
var import_ui24 = require("@elementor/ui");
|
|
2805
|
+
var ActionIcons = () => /* @__PURE__ */ React31.createElement(import_ui24.Box, { display: "flex", gap: 0.5, alignItems: "center" });
|
|
2756
2806
|
|
|
2757
2807
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
2758
2808
|
var SECTION_PADDING_INLINE = 32;
|
|
@@ -2786,8 +2836,8 @@ var StylesInheritanceInfotip = ({
|
|
|
2786
2836
|
});
|
|
2787
2837
|
}, [key, propType]);
|
|
2788
2838
|
const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
|
|
2789
|
-
const infotipContent = /* @__PURE__ */
|
|
2790
|
-
|
|
2839
|
+
const infotipContent = /* @__PURE__ */ React32.createElement(import_ui25.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React32.createElement(
|
|
2840
|
+
import_ui25.Card,
|
|
2791
2841
|
{
|
|
2792
2842
|
elevation: 0,
|
|
2793
2843
|
sx: {
|
|
@@ -2799,8 +2849,8 @@ var StylesInheritanceInfotip = ({
|
|
|
2799
2849
|
flexDirection: "column"
|
|
2800
2850
|
}
|
|
2801
2851
|
},
|
|
2802
|
-
/* @__PURE__ */
|
|
2803
|
-
|
|
2852
|
+
/* @__PURE__ */ React32.createElement(
|
|
2853
|
+
import_ui25.Box,
|
|
2804
2854
|
{
|
|
2805
2855
|
sx: {
|
|
2806
2856
|
position: "sticky",
|
|
@@ -2809,10 +2859,10 @@ var StylesInheritanceInfotip = ({
|
|
|
2809
2859
|
backgroundColor: "background.paper"
|
|
2810
2860
|
}
|
|
2811
2861
|
},
|
|
2812
|
-
/* @__PURE__ */
|
|
2862
|
+
/* @__PURE__ */ React32.createElement(import_editor_ui5.PopoverHeader, { title: (0, import_i18n13.__)("Style origin", "elementor"), onClose: closeInfotip })
|
|
2813
2863
|
),
|
|
2814
|
-
/* @__PURE__ */
|
|
2815
|
-
|
|
2864
|
+
/* @__PURE__ */ React32.createElement(
|
|
2865
|
+
import_ui25.CardContent,
|
|
2816
2866
|
{
|
|
2817
2867
|
sx: {
|
|
2818
2868
|
display: "flex",
|
|
@@ -2825,29 +2875,29 @@ var StylesInheritanceInfotip = ({
|
|
|
2825
2875
|
}
|
|
2826
2876
|
}
|
|
2827
2877
|
},
|
|
2828
|
-
/* @__PURE__ */
|
|
2829
|
-
return /* @__PURE__ */
|
|
2830
|
-
|
|
2878
|
+
/* @__PURE__ */ React32.createElement(import_ui25.Stack, { gap: 1.5, sx: { pl: 3, pr: 1, pb: 2 }, role: "list" }, items3.map((item, index) => {
|
|
2879
|
+
return /* @__PURE__ */ React32.createElement(
|
|
2880
|
+
import_ui25.Box,
|
|
2831
2881
|
{
|
|
2832
2882
|
key: item.id,
|
|
2833
2883
|
display: "flex",
|
|
2834
2884
|
gap: 0.5,
|
|
2835
2885
|
role: "listitem",
|
|
2836
|
-
"aria-label": (0,
|
|
2886
|
+
"aria-label": (0, import_i18n13.__)("Inheritance item: %s", "elementor").replace(
|
|
2837
2887
|
"%s",
|
|
2838
2888
|
item.displayLabel
|
|
2839
2889
|
)
|
|
2840
2890
|
},
|
|
2841
|
-
/* @__PURE__ */
|
|
2842
|
-
/* @__PURE__ */
|
|
2891
|
+
/* @__PURE__ */ React32.createElement(import_ui25.Box, { display: "flex", gap: 0.5, sx: { flexWrap: "wrap", width: "100%" } }, /* @__PURE__ */ React32.createElement(BreakpointIcon, { breakpoint: item.breakpoint }), /* @__PURE__ */ React32.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }), /* @__PURE__ */ React32.createElement(ValueComponent, { index, value: item.value })),
|
|
2892
|
+
/* @__PURE__ */ React32.createElement(ActionIcons, null)
|
|
2843
2893
|
);
|
|
2844
2894
|
}))
|
|
2845
2895
|
)
|
|
2846
2896
|
));
|
|
2847
2897
|
if (isDisabled) {
|
|
2848
|
-
return /* @__PURE__ */
|
|
2898
|
+
return /* @__PURE__ */ React32.createElement(import_ui25.Box, { sx: { display: "inline-flex" } }, children);
|
|
2849
2899
|
}
|
|
2850
|
-
return /* @__PURE__ */
|
|
2900
|
+
return /* @__PURE__ */ React32.createElement(
|
|
2851
2901
|
TooltipOrInfotip,
|
|
2852
2902
|
{
|
|
2853
2903
|
showInfotip,
|
|
@@ -2855,7 +2905,7 @@ var StylesInheritanceInfotip = ({
|
|
|
2855
2905
|
infotipContent,
|
|
2856
2906
|
isDisabled
|
|
2857
2907
|
},
|
|
2858
|
-
/* @__PURE__ */
|
|
2908
|
+
/* @__PURE__ */ React32.createElement(import_ui25.IconButton, { onClick: toggleInfotip, "aria-label": label, sx: { my: "-1px" }, disabled: isDisabled }, children)
|
|
2859
2909
|
);
|
|
2860
2910
|
};
|
|
2861
2911
|
function TooltipOrInfotip({
|
|
@@ -2869,11 +2919,11 @@ function TooltipOrInfotip({
|
|
|
2869
2919
|
const isSiteRtl = direction.isSiteRtl;
|
|
2870
2920
|
const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
|
|
2871
2921
|
if (isDisabled) {
|
|
2872
|
-
return /* @__PURE__ */
|
|
2922
|
+
return /* @__PURE__ */ React32.createElement(import_ui25.Box, { sx: { display: "inline-flex" } }, children);
|
|
2873
2923
|
}
|
|
2874
2924
|
if (showInfotip) {
|
|
2875
|
-
return /* @__PURE__ */
|
|
2876
|
-
|
|
2925
|
+
return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(
|
|
2926
|
+
import_ui25.Backdrop,
|
|
2877
2927
|
{
|
|
2878
2928
|
open: showInfotip,
|
|
2879
2929
|
onClick: onClose,
|
|
@@ -2882,8 +2932,8 @@ function TooltipOrInfotip({
|
|
|
2882
2932
|
zIndex: (theme) => theme.zIndex.modal - 1
|
|
2883
2933
|
}
|
|
2884
2934
|
}
|
|
2885
|
-
), /* @__PURE__ */
|
|
2886
|
-
|
|
2935
|
+
), /* @__PURE__ */ React32.createElement(
|
|
2936
|
+
import_ui25.Infotip,
|
|
2887
2937
|
{
|
|
2888
2938
|
placement: "top",
|
|
2889
2939
|
content: infotipContent,
|
|
@@ -2909,7 +2959,7 @@ function TooltipOrInfotip({
|
|
|
2909
2959
|
children
|
|
2910
2960
|
));
|
|
2911
2961
|
}
|
|
2912
|
-
return /* @__PURE__ */
|
|
2962
|
+
return /* @__PURE__ */ React32.createElement(import_ui25.Tooltip, { title: (0, import_i18n13.__)("Style origin", "elementor"), placement: "top" }, children);
|
|
2913
2963
|
}
|
|
2914
2964
|
|
|
2915
2965
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
@@ -2917,14 +2967,14 @@ var disabledControls = ["box-shadow", "background-overlay", "filter", "backdrop-
|
|
|
2917
2967
|
var StylesInheritanceIndicator = ({
|
|
2918
2968
|
customContext
|
|
2919
2969
|
}) => {
|
|
2920
|
-
const context = (0,
|
|
2970
|
+
const context = (0, import_editor_controls8.useBoundProp)();
|
|
2921
2971
|
const { path, propType } = customContext || context;
|
|
2922
2972
|
const inheritanceChain = useStylesInheritanceChain(path);
|
|
2923
2973
|
if (!path || !inheritanceChain.length) {
|
|
2924
2974
|
return null;
|
|
2925
2975
|
}
|
|
2926
2976
|
const isDisabled = path.some((pathItem) => disabledControls.includes(pathItem));
|
|
2927
|
-
return /* @__PURE__ */
|
|
2977
|
+
return /* @__PURE__ */ React33.createElement(
|
|
2928
2978
|
Indicator,
|
|
2929
2979
|
{
|
|
2930
2980
|
inheritanceChain,
|
|
@@ -2948,7 +2998,7 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
2948
2998
|
getColor: isFinalValue && currentStyleProvider ? getStylesProviderThemeColor(currentStyleProvider.getKey()) : void 0,
|
|
2949
2999
|
isOverridden: hasValue && !isFinalValue ? true : void 0
|
|
2950
3000
|
};
|
|
2951
|
-
return /* @__PURE__ */
|
|
3001
|
+
return /* @__PURE__ */ React33.createElement(
|
|
2952
3002
|
StylesInheritanceInfotip,
|
|
2953
3003
|
{
|
|
2954
3004
|
inheritanceChain,
|
|
@@ -2957,24 +3007,24 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
2957
3007
|
label,
|
|
2958
3008
|
isDisabled
|
|
2959
3009
|
},
|
|
2960
|
-
/* @__PURE__ */
|
|
3010
|
+
/* @__PURE__ */ React33.createElement(StyleIndicator, { ...styleIndicatorProps })
|
|
2961
3011
|
);
|
|
2962
3012
|
};
|
|
2963
3013
|
var getLabel = ({ isFinalValue, hasValue }) => {
|
|
2964
3014
|
if (isFinalValue) {
|
|
2965
|
-
return (0,
|
|
3015
|
+
return (0, import_i18n14.__)("This is the final value", "elementor");
|
|
2966
3016
|
}
|
|
2967
3017
|
if (hasValue) {
|
|
2968
|
-
return (0,
|
|
3018
|
+
return (0, import_i18n14.__)("This value is overridden by another style", "elementor");
|
|
2969
3019
|
}
|
|
2970
|
-
return (0,
|
|
3020
|
+
return (0, import_i18n14.__)("This has value from another style", "elementor");
|
|
2971
3021
|
};
|
|
2972
3022
|
|
|
2973
3023
|
// src/controls-registry/conditional-field.tsx
|
|
2974
|
-
var
|
|
3024
|
+
var import_editor_controls9 = require("@elementor/editor-controls");
|
|
2975
3025
|
var import_editor_props11 = require("@elementor/editor-props");
|
|
2976
3026
|
var ConditionalField = ({ children }) => {
|
|
2977
|
-
const { propType } = (0,
|
|
3027
|
+
const { propType } = (0, import_editor_controls9.useBoundProp)();
|
|
2978
3028
|
const depList = getDependencies(propType);
|
|
2979
3029
|
const { values: depValues } = useStylesFields(depList);
|
|
2980
3030
|
const isHidden = !(0, import_editor_props11.isDependencyMet)(propType?.dependencies, depValues);
|
|
@@ -3000,8 +3050,8 @@ var StylesField = ({ bind, propDisplayName, children }) => {
|
|
|
3000
3050
|
const setValue = (newValue) => {
|
|
3001
3051
|
fields.setValue(newValue[bind]);
|
|
3002
3052
|
};
|
|
3003
|
-
return /* @__PURE__ */
|
|
3004
|
-
|
|
3053
|
+
return /* @__PURE__ */ React34.createElement(
|
|
3054
|
+
import_editor_controls10.ControlAdornmentsProvider,
|
|
3005
3055
|
{
|
|
3006
3056
|
items: [
|
|
3007
3057
|
{
|
|
@@ -3010,8 +3060,8 @@ var StylesField = ({ bind, propDisplayName, children }) => {
|
|
|
3010
3060
|
}
|
|
3011
3061
|
]
|
|
3012
3062
|
},
|
|
3013
|
-
/* @__PURE__ */
|
|
3014
|
-
|
|
3063
|
+
/* @__PURE__ */ React34.createElement(
|
|
3064
|
+
import_editor_controls10.PropProvider,
|
|
3015
3065
|
{
|
|
3016
3066
|
propType,
|
|
3017
3067
|
value: { [bind]: value },
|
|
@@ -3019,34 +3069,34 @@ var StylesField = ({ bind, propDisplayName, children }) => {
|
|
|
3019
3069
|
placeholder: placeholderValues,
|
|
3020
3070
|
isDisabled: () => !canEdit
|
|
3021
3071
|
},
|
|
3022
|
-
/* @__PURE__ */
|
|
3072
|
+
/* @__PURE__ */ React34.createElement(import_editor_controls10.PropKeyProvider, { bind }, /* @__PURE__ */ React34.createElement(ConditionalField, null, children))
|
|
3023
3073
|
)
|
|
3024
3074
|
);
|
|
3025
3075
|
};
|
|
3026
3076
|
|
|
3027
3077
|
// src/components/style-sections/background-section/background-section.tsx
|
|
3028
|
-
var BACKGROUND_LABEL = (0,
|
|
3078
|
+
var BACKGROUND_LABEL = (0, import_i18n15.__)("Background", "elementor");
|
|
3029
3079
|
var BackgroundSection = () => {
|
|
3030
|
-
return /* @__PURE__ */
|
|
3080
|
+
return /* @__PURE__ */ React35.createElement(SectionContent, null, /* @__PURE__ */ React35.createElement(StylesField, { bind: "background", propDisplayName: BACKGROUND_LABEL }, /* @__PURE__ */ React35.createElement(import_editor_controls11.BackgroundControl, null)));
|
|
3031
3081
|
};
|
|
3032
3082
|
|
|
3033
3083
|
// src/components/style-sections/border-section/border-section.tsx
|
|
3034
|
-
var
|
|
3084
|
+
var React46 = __toESM(require("react"));
|
|
3035
3085
|
|
|
3036
3086
|
// src/components/panel-divider.tsx
|
|
3037
|
-
var
|
|
3038
|
-
var
|
|
3039
|
-
var PanelDivider = () => /* @__PURE__ */
|
|
3087
|
+
var React36 = __toESM(require("react"));
|
|
3088
|
+
var import_ui26 = require("@elementor/ui");
|
|
3089
|
+
var PanelDivider = () => /* @__PURE__ */ React36.createElement(import_ui26.Divider, { sx: { my: 0.5 } });
|
|
3040
3090
|
|
|
3041
3091
|
// src/components/style-sections/border-section/border-field.tsx
|
|
3042
|
-
var
|
|
3043
|
-
var
|
|
3044
|
-
var
|
|
3092
|
+
var React43 = __toESM(require("react"));
|
|
3093
|
+
var import_editor_controls16 = require("@elementor/editor-controls");
|
|
3094
|
+
var import_i18n19 = require("@wordpress/i18n");
|
|
3045
3095
|
|
|
3046
3096
|
// src/components/add-or-remove-content.tsx
|
|
3047
|
-
var
|
|
3097
|
+
var React37 = __toESM(require("react"));
|
|
3048
3098
|
var import_icons6 = require("@elementor/icons");
|
|
3049
|
-
var
|
|
3099
|
+
var import_ui27 = require("@elementor/ui");
|
|
3050
3100
|
var SIZE5 = "tiny";
|
|
3051
3101
|
var AddOrRemoveContent = ({
|
|
3052
3102
|
isAdded,
|
|
@@ -3056,8 +3106,8 @@ var AddOrRemoveContent = ({
|
|
|
3056
3106
|
disabled,
|
|
3057
3107
|
renderLabel
|
|
3058
3108
|
}) => {
|
|
3059
|
-
return /* @__PURE__ */
|
|
3060
|
-
|
|
3109
|
+
return /* @__PURE__ */ React37.createElement(SectionContent, null, /* @__PURE__ */ React37.createElement(
|
|
3110
|
+
import_ui27.Stack,
|
|
3061
3111
|
{
|
|
3062
3112
|
direction: "row",
|
|
3063
3113
|
sx: {
|
|
@@ -3067,37 +3117,37 @@ var AddOrRemoveContent = ({
|
|
|
3067
3117
|
}
|
|
3068
3118
|
},
|
|
3069
3119
|
renderLabel(),
|
|
3070
|
-
isAdded ? /* @__PURE__ */
|
|
3071
|
-
), /* @__PURE__ */
|
|
3120
|
+
isAdded ? /* @__PURE__ */ React37.createElement(import_ui27.IconButton, { size: SIZE5, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React37.createElement(import_icons6.MinusIcon, { fontSize: SIZE5 })) : /* @__PURE__ */ React37.createElement(import_ui27.IconButton, { size: SIZE5, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React37.createElement(import_icons6.PlusIcon, { fontSize: SIZE5 }))
|
|
3121
|
+
), /* @__PURE__ */ React37.createElement(import_ui27.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React37.createElement(SectionContent, null, children)));
|
|
3072
3122
|
};
|
|
3073
3123
|
|
|
3074
3124
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
3075
|
-
var
|
|
3076
|
-
var
|
|
3077
|
-
var
|
|
3125
|
+
var React40 = __toESM(require("react"));
|
|
3126
|
+
var import_editor_controls13 = require("@elementor/editor-controls");
|
|
3127
|
+
var import_i18n16 = require("@wordpress/i18n");
|
|
3078
3128
|
|
|
3079
3129
|
// src/components/styles-field-layout.tsx
|
|
3080
|
-
var
|
|
3081
|
-
var
|
|
3130
|
+
var React39 = __toESM(require("react"));
|
|
3131
|
+
var import_ui29 = require("@elementor/ui");
|
|
3082
3132
|
|
|
3083
3133
|
// src/components/control-label.tsx
|
|
3084
|
-
var
|
|
3085
|
-
var
|
|
3086
|
-
var
|
|
3134
|
+
var React38 = __toESM(require("react"));
|
|
3135
|
+
var import_editor_controls12 = require("@elementor/editor-controls");
|
|
3136
|
+
var import_ui28 = require("@elementor/ui");
|
|
3087
3137
|
var ControlLabel = ({ children }) => {
|
|
3088
|
-
return /* @__PURE__ */
|
|
3138
|
+
return /* @__PURE__ */ React38.createElement(import_ui28.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React38.createElement(import_editor_controls12.ControlFormLabel, null, children), /* @__PURE__ */ React38.createElement(import_editor_controls12.ControlAdornments, null));
|
|
3089
3139
|
};
|
|
3090
3140
|
|
|
3091
3141
|
// src/components/styles-field-layout.tsx
|
|
3092
|
-
var StylesFieldLayout =
|
|
3142
|
+
var StylesFieldLayout = React39.forwardRef((props, ref) => {
|
|
3093
3143
|
const { direction = "row", children, label } = props;
|
|
3094
3144
|
const LayoutComponent = direction === "row" ? Row : Column;
|
|
3095
|
-
return /* @__PURE__ */
|
|
3145
|
+
return /* @__PURE__ */ React39.createElement(LayoutComponent, { label, ref, children });
|
|
3096
3146
|
});
|
|
3097
|
-
var Row =
|
|
3147
|
+
var Row = React39.forwardRef(
|
|
3098
3148
|
({ label, children }, ref) => {
|
|
3099
|
-
return /* @__PURE__ */
|
|
3100
|
-
|
|
3149
|
+
return /* @__PURE__ */ React39.createElement(import_ui29.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React39.createElement(import_ui29.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, label)), /* @__PURE__ */ React39.createElement(
|
|
3150
|
+
import_ui29.Grid,
|
|
3101
3151
|
{
|
|
3102
3152
|
item: true,
|
|
3103
3153
|
xs: 6,
|
|
@@ -3109,82 +3159,82 @@ var Row = React37.forwardRef(
|
|
|
3109
3159
|
));
|
|
3110
3160
|
}
|
|
3111
3161
|
);
|
|
3112
|
-
var Column =
|
|
3162
|
+
var Column = React39.forwardRef(
|
|
3113
3163
|
({ label, children }, ref) => {
|
|
3114
|
-
return /* @__PURE__ */
|
|
3164
|
+
return /* @__PURE__ */ React39.createElement(import_ui29.Stack, { gap: 0.75, ref }, /* @__PURE__ */ React39.createElement(ControlLabel, null, label), children);
|
|
3115
3165
|
}
|
|
3116
3166
|
);
|
|
3117
3167
|
|
|
3118
3168
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
3119
|
-
var BORDER_COLOR_LABEL = (0,
|
|
3120
|
-
var BorderColorField = () => /* @__PURE__ */
|
|
3169
|
+
var BORDER_COLOR_LABEL = (0, import_i18n16.__)("Border color", "elementor");
|
|
3170
|
+
var BorderColorField = () => /* @__PURE__ */ React40.createElement(StylesField, { bind: "border-color", propDisplayName: BORDER_COLOR_LABEL }, /* @__PURE__ */ React40.createElement(StylesFieldLayout, { label: BORDER_COLOR_LABEL }, /* @__PURE__ */ React40.createElement(import_editor_controls13.ColorControl, null)));
|
|
3121
3171
|
|
|
3122
3172
|
// src/components/style-sections/border-section/border-style-field.tsx
|
|
3123
|
-
var
|
|
3124
|
-
var
|
|
3125
|
-
var
|
|
3126
|
-
var BORDER_TYPE_LABEL = (0,
|
|
3173
|
+
var React41 = __toESM(require("react"));
|
|
3174
|
+
var import_editor_controls14 = require("@elementor/editor-controls");
|
|
3175
|
+
var import_i18n17 = require("@wordpress/i18n");
|
|
3176
|
+
var BORDER_TYPE_LABEL = (0, import_i18n17.__)("Border type", "elementor");
|
|
3127
3177
|
var borderStyles = [
|
|
3128
|
-
{ value: "none", label: (0,
|
|
3129
|
-
{ value: "solid", label: (0,
|
|
3130
|
-
{ value: "dashed", label: (0,
|
|
3131
|
-
{ value: "dotted", label: (0,
|
|
3132
|
-
{ value: "double", label: (0,
|
|
3133
|
-
{ value: "groove", label: (0,
|
|
3134
|
-
{ value: "ridge", label: (0,
|
|
3135
|
-
{ value: "inset", label: (0,
|
|
3136
|
-
{ value: "outset", label: (0,
|
|
3178
|
+
{ value: "none", label: (0, import_i18n17.__)("None", "elementor") },
|
|
3179
|
+
{ value: "solid", label: (0, import_i18n17.__)("Solid", "elementor") },
|
|
3180
|
+
{ value: "dashed", label: (0, import_i18n17.__)("Dashed", "elementor") },
|
|
3181
|
+
{ value: "dotted", label: (0, import_i18n17.__)("Dotted", "elementor") },
|
|
3182
|
+
{ value: "double", label: (0, import_i18n17.__)("Double", "elementor") },
|
|
3183
|
+
{ value: "groove", label: (0, import_i18n17.__)("Groove", "elementor") },
|
|
3184
|
+
{ value: "ridge", label: (0, import_i18n17.__)("Ridge", "elementor") },
|
|
3185
|
+
{ value: "inset", label: (0, import_i18n17.__)("Inset", "elementor") },
|
|
3186
|
+
{ value: "outset", label: (0, import_i18n17.__)("Outset", "elementor") }
|
|
3137
3187
|
];
|
|
3138
|
-
var BorderStyleField = () => /* @__PURE__ */
|
|
3188
|
+
var BorderStyleField = () => /* @__PURE__ */ React41.createElement(StylesField, { bind: "border-style", propDisplayName: BORDER_TYPE_LABEL }, /* @__PURE__ */ React41.createElement(StylesFieldLayout, { label: BORDER_TYPE_LABEL }, /* @__PURE__ */ React41.createElement(import_editor_controls14.SelectControl, { options: borderStyles })));
|
|
3139
3189
|
|
|
3140
3190
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
3141
|
-
var
|
|
3142
|
-
var
|
|
3191
|
+
var React42 = __toESM(require("react"));
|
|
3192
|
+
var import_editor_controls15 = require("@elementor/editor-controls");
|
|
3143
3193
|
var import_editor_props12 = require("@elementor/editor-props");
|
|
3144
3194
|
var import_icons7 = require("@elementor/icons");
|
|
3145
|
-
var
|
|
3146
|
-
var
|
|
3147
|
-
var BORDER_WIDTH_LABEL = (0,
|
|
3148
|
-
var InlineStartIcon = (0,
|
|
3149
|
-
var InlineEndIcon = (0,
|
|
3195
|
+
var import_ui30 = require("@elementor/ui");
|
|
3196
|
+
var import_i18n18 = require("@wordpress/i18n");
|
|
3197
|
+
var BORDER_WIDTH_LABEL = (0, import_i18n18.__)("Border width", "elementor");
|
|
3198
|
+
var InlineStartIcon = (0, import_ui30.withDirection)(import_icons7.SideRightIcon);
|
|
3199
|
+
var InlineEndIcon = (0, import_ui30.withDirection)(import_icons7.SideLeftIcon);
|
|
3150
3200
|
var getEdges = (isSiteRtl) => [
|
|
3151
3201
|
{
|
|
3152
|
-
label: (0,
|
|
3153
|
-
icon: /* @__PURE__ */
|
|
3202
|
+
label: (0, import_i18n18.__)("Top", "elementor"),
|
|
3203
|
+
icon: /* @__PURE__ */ React42.createElement(import_icons7.SideTopIcon, { fontSize: "tiny" }),
|
|
3154
3204
|
bind: "block-start"
|
|
3155
3205
|
},
|
|
3156
3206
|
{
|
|
3157
|
-
label: isSiteRtl ? (0,
|
|
3158
|
-
icon: /* @__PURE__ */
|
|
3207
|
+
label: isSiteRtl ? (0, import_i18n18.__)("Left", "elementor") : (0, import_i18n18.__)("Right", "elementor"),
|
|
3208
|
+
icon: /* @__PURE__ */ React42.createElement(InlineStartIcon, { fontSize: "tiny" }),
|
|
3159
3209
|
bind: "inline-end"
|
|
3160
3210
|
},
|
|
3161
3211
|
{
|
|
3162
|
-
label: (0,
|
|
3163
|
-
icon: /* @__PURE__ */
|
|
3212
|
+
label: (0, import_i18n18.__)("Bottom", "elementor"),
|
|
3213
|
+
icon: /* @__PURE__ */ React42.createElement(import_icons7.SideBottomIcon, { fontSize: "tiny" }),
|
|
3164
3214
|
bind: "block-end"
|
|
3165
3215
|
},
|
|
3166
3216
|
{
|
|
3167
|
-
label: isSiteRtl ? (0,
|
|
3168
|
-
icon: /* @__PURE__ */
|
|
3217
|
+
label: isSiteRtl ? (0, import_i18n18.__)("Right", "elementor") : (0, import_i18n18.__)("Left", "elementor"),
|
|
3218
|
+
icon: /* @__PURE__ */ React42.createElement(InlineEndIcon, { fontSize: "tiny" }),
|
|
3169
3219
|
bind: "inline-start"
|
|
3170
3220
|
}
|
|
3171
3221
|
];
|
|
3172
3222
|
var BorderWidthField = () => {
|
|
3173
3223
|
const { isSiteRtl } = useDirection();
|
|
3174
|
-
return /* @__PURE__ */
|
|
3175
|
-
|
|
3224
|
+
return /* @__PURE__ */ React42.createElement(StylesField, { bind: "border-width", propDisplayName: BORDER_WIDTH_LABEL }, /* @__PURE__ */ React42.createElement(
|
|
3225
|
+
import_editor_controls15.EqualUnequalSizesControl,
|
|
3176
3226
|
{
|
|
3177
3227
|
items: getEdges(isSiteRtl),
|
|
3178
3228
|
label: BORDER_WIDTH_LABEL,
|
|
3179
|
-
icon: /* @__PURE__ */
|
|
3180
|
-
tooltipLabel: (0,
|
|
3229
|
+
icon: /* @__PURE__ */ React42.createElement(import_icons7.SideAllIcon, { fontSize: "tiny" }),
|
|
3230
|
+
tooltipLabel: (0, import_i18n18.__)("Adjust borders", "elementor"),
|
|
3181
3231
|
multiSizePropTypeUtil: import_editor_props12.borderWidthPropTypeUtil
|
|
3182
3232
|
}
|
|
3183
3233
|
));
|
|
3184
3234
|
};
|
|
3185
3235
|
|
|
3186
3236
|
// src/components/style-sections/border-section/border-field.tsx
|
|
3187
|
-
var BORDER_LABEL = (0,
|
|
3237
|
+
var BORDER_LABEL = (0, import_i18n19.__)("Border", "elementor");
|
|
3188
3238
|
var initialBorder = {
|
|
3189
3239
|
"border-width": { $$type: "size", value: { size: 1, unit: "px" } },
|
|
3190
3240
|
"border-color": { $$type: "color", value: "#000000" },
|
|
@@ -3207,91 +3257,91 @@ var BorderField = () => {
|
|
|
3207
3257
|
);
|
|
3208
3258
|
};
|
|
3209
3259
|
const hasBorder = Object.values(values ?? {}).some(Boolean);
|
|
3210
|
-
return /* @__PURE__ */
|
|
3260
|
+
return /* @__PURE__ */ React43.createElement(
|
|
3211
3261
|
AddOrRemoveContent,
|
|
3212
3262
|
{
|
|
3213
3263
|
isAdded: hasBorder,
|
|
3214
3264
|
onAdd: addBorder,
|
|
3215
3265
|
onRemove: removeBorder,
|
|
3216
3266
|
disabled: !canEdit,
|
|
3217
|
-
renderLabel: () => /* @__PURE__ */
|
|
3267
|
+
renderLabel: () => /* @__PURE__ */ React43.createElement(import_editor_controls16.ControlFormLabel, null, BORDER_LABEL)
|
|
3218
3268
|
},
|
|
3219
|
-
/* @__PURE__ */
|
|
3220
|
-
/* @__PURE__ */
|
|
3221
|
-
/* @__PURE__ */
|
|
3269
|
+
/* @__PURE__ */ React43.createElement(BorderWidthField, null),
|
|
3270
|
+
/* @__PURE__ */ React43.createElement(BorderColorField, null),
|
|
3271
|
+
/* @__PURE__ */ React43.createElement(BorderStyleField, null)
|
|
3222
3272
|
);
|
|
3223
3273
|
};
|
|
3224
3274
|
|
|
3225
3275
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
3226
|
-
var
|
|
3227
|
-
var
|
|
3276
|
+
var React45 = __toESM(require("react"));
|
|
3277
|
+
var import_editor_controls17 = require("@elementor/editor-controls");
|
|
3228
3278
|
var import_editor_props13 = require("@elementor/editor-props");
|
|
3229
3279
|
var import_icons8 = require("@elementor/icons");
|
|
3230
|
-
var
|
|
3231
|
-
var
|
|
3280
|
+
var import_ui32 = require("@elementor/ui");
|
|
3281
|
+
var import_i18n20 = require("@wordpress/i18n");
|
|
3232
3282
|
|
|
3233
3283
|
// src/styles-inheritance/components/ui-providers.tsx
|
|
3234
|
-
var
|
|
3235
|
-
var
|
|
3284
|
+
var React44 = __toESM(require("react"));
|
|
3285
|
+
var import_ui31 = require("@elementor/ui");
|
|
3236
3286
|
var UiProviders = ({ children }) => {
|
|
3237
3287
|
const { isSiteRtl } = useDirection();
|
|
3238
|
-
return /* @__PURE__ */
|
|
3288
|
+
return /* @__PURE__ */ React44.createElement(import_ui31.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React44.createElement(import_ui31.ThemeProvider, null, children));
|
|
3239
3289
|
};
|
|
3240
3290
|
|
|
3241
3291
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
3242
|
-
var BORDER_RADIUS_LABEL = (0,
|
|
3243
|
-
var StartStartIcon = (0,
|
|
3244
|
-
var StartEndIcon = (0,
|
|
3245
|
-
var EndStartIcon = (0,
|
|
3246
|
-
var EndEndIcon = (0,
|
|
3247
|
-
var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0,
|
|
3248
|
-
var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0,
|
|
3249
|
-
var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0,
|
|
3250
|
-
var getEndEndLabel = (isSiteRtl) => isSiteRtl ? (0,
|
|
3292
|
+
var BORDER_RADIUS_LABEL = (0, import_i18n20.__)("Border radius", "elementor");
|
|
3293
|
+
var StartStartIcon = (0, import_ui32.withDirection)(import_icons8.RadiusTopLeftIcon);
|
|
3294
|
+
var StartEndIcon = (0, import_ui32.withDirection)(import_icons8.RadiusTopRightIcon);
|
|
3295
|
+
var EndStartIcon = (0, import_ui32.withDirection)(import_icons8.RadiusBottomLeftIcon);
|
|
3296
|
+
var EndEndIcon = (0, import_ui32.withDirection)(import_icons8.RadiusBottomRightIcon);
|
|
3297
|
+
var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n20.__)("Top right", "elementor") : (0, import_i18n20.__)("Top left", "elementor");
|
|
3298
|
+
var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n20.__)("Top left", "elementor") : (0, import_i18n20.__)("Top right", "elementor");
|
|
3299
|
+
var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n20.__)("Bottom right", "elementor") : (0, import_i18n20.__)("Bottom left", "elementor");
|
|
3300
|
+
var getEndEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n20.__)("Bottom left", "elementor") : (0, import_i18n20.__)("Bottom right", "elementor");
|
|
3251
3301
|
var getCorners = (isSiteRtl) => [
|
|
3252
3302
|
{
|
|
3253
3303
|
label: getStartStartLabel(isSiteRtl),
|
|
3254
|
-
icon: /* @__PURE__ */
|
|
3304
|
+
icon: /* @__PURE__ */ React45.createElement(StartStartIcon, { fontSize: "tiny" }),
|
|
3255
3305
|
bind: "start-start"
|
|
3256
3306
|
},
|
|
3257
3307
|
{
|
|
3258
3308
|
label: getStartEndLabel(isSiteRtl),
|
|
3259
|
-
icon: /* @__PURE__ */
|
|
3309
|
+
icon: /* @__PURE__ */ React45.createElement(StartEndIcon, { fontSize: "tiny" }),
|
|
3260
3310
|
bind: "start-end"
|
|
3261
3311
|
},
|
|
3262
3312
|
{
|
|
3263
3313
|
label: getEndStartLabel(isSiteRtl),
|
|
3264
|
-
icon: /* @__PURE__ */
|
|
3314
|
+
icon: /* @__PURE__ */ React45.createElement(EndStartIcon, { fontSize: "tiny" }),
|
|
3265
3315
|
bind: "end-start"
|
|
3266
3316
|
},
|
|
3267
3317
|
{
|
|
3268
3318
|
label: getEndEndLabel(isSiteRtl),
|
|
3269
|
-
icon: /* @__PURE__ */
|
|
3319
|
+
icon: /* @__PURE__ */ React45.createElement(EndEndIcon, { fontSize: "tiny" }),
|
|
3270
3320
|
bind: "end-end"
|
|
3271
3321
|
}
|
|
3272
3322
|
];
|
|
3273
3323
|
var BorderRadiusField = () => {
|
|
3274
3324
|
const { isSiteRtl } = useDirection();
|
|
3275
|
-
return /* @__PURE__ */
|
|
3276
|
-
|
|
3325
|
+
return /* @__PURE__ */ React45.createElement(UiProviders, null, /* @__PURE__ */ React45.createElement(StylesField, { bind: "border-radius", propDisplayName: BORDER_RADIUS_LABEL }, /* @__PURE__ */ React45.createElement(
|
|
3326
|
+
import_editor_controls17.EqualUnequalSizesControl,
|
|
3277
3327
|
{
|
|
3278
3328
|
items: getCorners(isSiteRtl),
|
|
3279
3329
|
label: BORDER_RADIUS_LABEL,
|
|
3280
|
-
icon: /* @__PURE__ */
|
|
3281
|
-
tooltipLabel: (0,
|
|
3330
|
+
icon: /* @__PURE__ */ React45.createElement(import_icons8.BorderCornersIcon, { fontSize: "tiny" }),
|
|
3331
|
+
tooltipLabel: (0, import_i18n20.__)("Adjust corners", "elementor"),
|
|
3282
3332
|
multiSizePropTypeUtil: import_editor_props13.borderRadiusPropTypeUtil
|
|
3283
3333
|
}
|
|
3284
3334
|
)));
|
|
3285
3335
|
};
|
|
3286
3336
|
|
|
3287
3337
|
// src/components/style-sections/border-section/border-section.tsx
|
|
3288
|
-
var BorderSection = () => /* @__PURE__ */
|
|
3338
|
+
var BorderSection = () => /* @__PURE__ */ React46.createElement(SectionContent, null, /* @__PURE__ */ React46.createElement(BorderRadiusField, null), /* @__PURE__ */ React46.createElement(PanelDivider, null), /* @__PURE__ */ React46.createElement(BorderField, null));
|
|
3289
3339
|
|
|
3290
3340
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
3291
|
-
var
|
|
3292
|
-
var
|
|
3341
|
+
var React48 = __toESM(require("react"));
|
|
3342
|
+
var import_editor_controls19 = require("@elementor/editor-controls");
|
|
3293
3343
|
var import_editor_elements10 = require("@elementor/editor-elements");
|
|
3294
|
-
var
|
|
3344
|
+
var import_i18n22 = require("@wordpress/i18n");
|
|
3295
3345
|
|
|
3296
3346
|
// src/utils/get-recently-used-styles.ts
|
|
3297
3347
|
var import_editor_canvas3 = require("@elementor/editor-canvas");
|
|
@@ -3322,39 +3372,39 @@ var getRecentlyUsedList = async (elementId) => {
|
|
|
3322
3372
|
};
|
|
3323
3373
|
|
|
3324
3374
|
// src/components/style-sections/effects-section/opacity-control-field.tsx
|
|
3325
|
-
var
|
|
3375
|
+
var React47 = __toESM(require("react"));
|
|
3326
3376
|
var import_react25 = require("react");
|
|
3327
|
-
var
|
|
3328
|
-
var
|
|
3329
|
-
var OPACITY_LABEL = (0,
|
|
3377
|
+
var import_editor_controls18 = require("@elementor/editor-controls");
|
|
3378
|
+
var import_i18n21 = require("@wordpress/i18n");
|
|
3379
|
+
var OPACITY_LABEL = (0, import_i18n21.__)("Opacity", "elementor");
|
|
3330
3380
|
var OpacityControlField = () => {
|
|
3331
3381
|
const rowRef = (0, import_react25.useRef)(null);
|
|
3332
|
-
return /* @__PURE__ */
|
|
3382
|
+
return /* @__PURE__ */ React47.createElement(StylesField, { bind: "opacity", propDisplayName: OPACITY_LABEL }, /* @__PURE__ */ React47.createElement(StylesFieldLayout, { ref: rowRef, label: OPACITY_LABEL }, /* @__PURE__ */ React47.createElement(import_editor_controls18.SizeControl, { units: ["%"], anchorRef: rowRef, defaultUnit: "%" })));
|
|
3333
3383
|
};
|
|
3334
3384
|
|
|
3335
3385
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
3336
|
-
var BOX_SHADOW_LABEL = (0,
|
|
3337
|
-
var FILTER_LABEL = (0,
|
|
3338
|
-
var TRANSFORM_LABEL = (0,
|
|
3339
|
-
var BACKDROP_FILTER_LABEL = (0,
|
|
3340
|
-
var TRANSITIONS_LABEL = (0,
|
|
3386
|
+
var BOX_SHADOW_LABEL = (0, import_i18n22.__)("Box shadow", "elementor");
|
|
3387
|
+
var FILTER_LABEL = (0, import_i18n22.__)("Filters", "elementor");
|
|
3388
|
+
var TRANSFORM_LABEL = (0, import_i18n22.__)("Transform", "elementor");
|
|
3389
|
+
var BACKDROP_FILTER_LABEL = (0, import_i18n22.__)("Backdrop filters", "elementor");
|
|
3390
|
+
var TRANSITIONS_LABEL = (0, import_i18n22.__)("Transitions", "elementor");
|
|
3341
3391
|
var EffectsSection = () => {
|
|
3342
3392
|
const { element } = (0, import_editor_elements10.useSelectedElement)();
|
|
3343
3393
|
const { meta } = useStyle();
|
|
3344
|
-
return /* @__PURE__ */
|
|
3345
|
-
|
|
3394
|
+
return /* @__PURE__ */ React48.createElement(SectionContent, null, /* @__PURE__ */ React48.createElement(OpacityControlField, null), /* @__PURE__ */ React48.createElement(PanelDivider, null), /* @__PURE__ */ React48.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React48.createElement(import_editor_controls19.BoxShadowRepeaterControl, null)), /* @__PURE__ */ React48.createElement(PanelDivider, null), /* @__PURE__ */ React48.createElement(StylesField, { bind: "transform", propDisplayName: TRANSFORM_LABEL }, /* @__PURE__ */ React48.createElement(import_editor_controls19.TransformRepeaterControl, null)), /* @__PURE__ */ React48.createElement(PanelDivider, null), /* @__PURE__ */ React48.createElement(StylesField, { bind: "transition", propDisplayName: TRANSITIONS_LABEL }, /* @__PURE__ */ React48.createElement(
|
|
3395
|
+
import_editor_controls19.TransitionRepeaterControl,
|
|
3346
3396
|
{
|
|
3347
3397
|
currentStyleState: meta.state,
|
|
3348
3398
|
recentlyUsedListGetter: () => getRecentlyUsedList(element?.id ?? "")
|
|
3349
3399
|
}
|
|
3350
|
-
)), /* @__PURE__ */
|
|
3400
|
+
)), /* @__PURE__ */ React48.createElement(PanelDivider, null), /* @__PURE__ */ React48.createElement(StylesField, { bind: "filter", propDisplayName: FILTER_LABEL }, /* @__PURE__ */ React48.createElement(import_editor_controls19.FilterRepeaterControl, null)), /* @__PURE__ */ React48.createElement(PanelDivider, null), /* @__PURE__ */ React48.createElement(StylesField, { bind: "backdrop-filter", propDisplayName: BACKDROP_FILTER_LABEL }, /* @__PURE__ */ React48.createElement(import_editor_controls19.FilterRepeaterControl, { filterPropName: "backdrop-filter" })));
|
|
3351
3401
|
};
|
|
3352
3402
|
|
|
3353
3403
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
3354
|
-
var
|
|
3355
|
-
var
|
|
3404
|
+
var React60 = __toESM(require("react"));
|
|
3405
|
+
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
3356
3406
|
var import_editor_elements11 = require("@elementor/editor-elements");
|
|
3357
|
-
var
|
|
3407
|
+
var import_i18n34 = require("@wordpress/i18n");
|
|
3358
3408
|
|
|
3359
3409
|
// src/hooks/use-computed-style.ts
|
|
3360
3410
|
var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
|
|
@@ -3382,18 +3432,18 @@ function useComputedStyle(elementId) {
|
|
|
3382
3432
|
}
|
|
3383
3433
|
|
|
3384
3434
|
// src/components/style-sections/layout-section/align-content-field.tsx
|
|
3385
|
-
var
|
|
3386
|
-
var
|
|
3435
|
+
var React50 = __toESM(require("react"));
|
|
3436
|
+
var import_editor_controls20 = require("@elementor/editor-controls");
|
|
3387
3437
|
var import_icons9 = require("@elementor/icons");
|
|
3388
|
-
var
|
|
3389
|
-
var
|
|
3438
|
+
var import_ui34 = require("@elementor/ui");
|
|
3439
|
+
var import_i18n24 = require("@wordpress/i18n");
|
|
3390
3440
|
|
|
3391
3441
|
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
3392
|
-
var
|
|
3442
|
+
var React49 = __toESM(require("react"));
|
|
3393
3443
|
var import_react26 = require("react");
|
|
3394
|
-
var
|
|
3395
|
-
var
|
|
3396
|
-
var FLEX_DIRECTION_LABEL = (0,
|
|
3444
|
+
var import_ui33 = require("@elementor/ui");
|
|
3445
|
+
var import_i18n23 = require("@wordpress/i18n");
|
|
3446
|
+
var FLEX_DIRECTION_LABEL = (0, import_i18n23.__)("Flex direction", "elementor");
|
|
3397
3447
|
var CLOCKWISE_ANGLES = {
|
|
3398
3448
|
row: 0,
|
|
3399
3449
|
column: 90,
|
|
@@ -3415,13 +3465,13 @@ var RotatedIcon = ({
|
|
|
3415
3465
|
}) => {
|
|
3416
3466
|
const rotate = (0, import_react26.useRef)(useGetTargetAngle(isClockwise, offset, disableRotationForReversed));
|
|
3417
3467
|
rotate.current = useGetTargetAngle(isClockwise, offset, disableRotationForReversed, rotate);
|
|
3418
|
-
return /* @__PURE__ */
|
|
3468
|
+
return /* @__PURE__ */ React49.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
3419
3469
|
};
|
|
3420
3470
|
var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existingRef) => {
|
|
3421
3471
|
const { value: direction } = useStylesField("flex-direction", {
|
|
3422
3472
|
history: { propDisplayName: FLEX_DIRECTION_LABEL }
|
|
3423
3473
|
});
|
|
3424
|
-
const isRtl = "rtl" === (0,
|
|
3474
|
+
const isRtl = "rtl" === (0, import_ui33.useTheme)().direction;
|
|
3425
3475
|
const rotationMultiplier = isRtl ? -1 : 1;
|
|
3426
3476
|
const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
|
|
3427
3477
|
const currentDirection = direction?.value || "row";
|
|
@@ -3436,9 +3486,9 @@ var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existi
|
|
|
3436
3486
|
};
|
|
3437
3487
|
|
|
3438
3488
|
// src/components/style-sections/layout-section/align-content-field.tsx
|
|
3439
|
-
var ALIGN_CONTENT_LABEL = (0,
|
|
3440
|
-
var StartIcon = (0,
|
|
3441
|
-
var EndIcon = (0,
|
|
3489
|
+
var ALIGN_CONTENT_LABEL = (0, import_i18n24.__)("Align content", "elementor");
|
|
3490
|
+
var StartIcon = (0, import_ui34.withDirection)(import_icons9.JustifyTopIcon);
|
|
3491
|
+
var EndIcon = (0, import_ui34.withDirection)(import_icons9.JustifyBottomIcon);
|
|
3442
3492
|
var iconProps = {
|
|
3443
3493
|
isClockwise: false,
|
|
3444
3494
|
offset: 0,
|
|
@@ -3447,52 +3497,52 @@ var iconProps = {
|
|
|
3447
3497
|
var options = [
|
|
3448
3498
|
{
|
|
3449
3499
|
value: "start",
|
|
3450
|
-
label: (0,
|
|
3451
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3500
|
+
label: (0, import_i18n24.__)("Start", "elementor"),
|
|
3501
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
|
|
3452
3502
|
showTooltip: true
|
|
3453
3503
|
},
|
|
3454
3504
|
{
|
|
3455
3505
|
value: "center",
|
|
3456
|
-
label: (0,
|
|
3457
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3506
|
+
label: (0, import_i18n24.__)("Center", "elementor"),
|
|
3507
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons9.JustifyCenterIcon, size, ...iconProps }),
|
|
3458
3508
|
showTooltip: true
|
|
3459
3509
|
},
|
|
3460
3510
|
{
|
|
3461
3511
|
value: "end",
|
|
3462
|
-
label: (0,
|
|
3463
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3512
|
+
label: (0, import_i18n24.__)("End", "elementor"),
|
|
3513
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
|
|
3464
3514
|
showTooltip: true
|
|
3465
3515
|
},
|
|
3466
3516
|
{
|
|
3467
3517
|
value: "space-between",
|
|
3468
|
-
label: (0,
|
|
3469
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3518
|
+
label: (0, import_i18n24.__)("Space between", "elementor"),
|
|
3519
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons9.JustifySpaceBetweenVerticalIcon, size, ...iconProps }),
|
|
3470
3520
|
showTooltip: true
|
|
3471
3521
|
},
|
|
3472
3522
|
{
|
|
3473
3523
|
value: "space-around",
|
|
3474
|
-
label: (0,
|
|
3475
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3524
|
+
label: (0, import_i18n24.__)("Space around", "elementor"),
|
|
3525
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons9.JustifySpaceAroundVerticalIcon, size, ...iconProps }),
|
|
3476
3526
|
showTooltip: true
|
|
3477
3527
|
},
|
|
3478
3528
|
{
|
|
3479
3529
|
value: "space-evenly",
|
|
3480
|
-
label: (0,
|
|
3481
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3530
|
+
label: (0, import_i18n24.__)("Space evenly", "elementor"),
|
|
3531
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons9.JustifyDistributeVerticalIcon, size, ...iconProps }),
|
|
3482
3532
|
showTooltip: true
|
|
3483
3533
|
}
|
|
3484
3534
|
];
|
|
3485
|
-
var AlignContentField = () => /* @__PURE__ */
|
|
3535
|
+
var AlignContentField = () => /* @__PURE__ */ React50.createElement(StylesField, { bind: "align-content", propDisplayName: ALIGN_CONTENT_LABEL }, /* @__PURE__ */ React50.createElement(UiProviders, null, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: ALIGN_CONTENT_LABEL, direction: "column" }, /* @__PURE__ */ React50.createElement(import_editor_controls20.ToggleControl, { options, fullWidth: true }))));
|
|
3486
3536
|
|
|
3487
3537
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
3488
|
-
var
|
|
3489
|
-
var
|
|
3538
|
+
var React51 = __toESM(require("react"));
|
|
3539
|
+
var import_editor_controls21 = require("@elementor/editor-controls");
|
|
3490
3540
|
var import_icons10 = require("@elementor/icons");
|
|
3491
|
-
var
|
|
3492
|
-
var
|
|
3493
|
-
var ALIGN_ITEMS_LABEL = (0,
|
|
3494
|
-
var StartIcon2 = (0,
|
|
3495
|
-
var EndIcon2 = (0,
|
|
3541
|
+
var import_ui35 = require("@elementor/ui");
|
|
3542
|
+
var import_i18n25 = require("@wordpress/i18n");
|
|
3543
|
+
var ALIGN_ITEMS_LABEL = (0, import_i18n25.__)("Align items", "elementor");
|
|
3544
|
+
var StartIcon2 = (0, import_ui35.withDirection)(import_icons10.LayoutAlignLeftIcon);
|
|
3545
|
+
var EndIcon2 = (0, import_ui35.withDirection)(import_icons10.LayoutAlignRightIcon);
|
|
3496
3546
|
var iconProps2 = {
|
|
3497
3547
|
isClockwise: false,
|
|
3498
3548
|
offset: 90
|
|
@@ -3500,56 +3550,56 @@ var iconProps2 = {
|
|
|
3500
3550
|
var options2 = [
|
|
3501
3551
|
{
|
|
3502
3552
|
value: "start",
|
|
3503
|
-
label: (0,
|
|
3504
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3553
|
+
label: (0, import_i18n25.__)("Start", "elementor"),
|
|
3554
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
|
|
3505
3555
|
showTooltip: true
|
|
3506
3556
|
},
|
|
3507
3557
|
{
|
|
3508
3558
|
value: "center",
|
|
3509
|
-
label: (0,
|
|
3510
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3559
|
+
label: (0, import_i18n25.__)("Center", "elementor"),
|
|
3560
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(RotatedIcon, { icon: import_icons10.LayoutAlignCenterIcon, size, ...iconProps2 }),
|
|
3511
3561
|
showTooltip: true
|
|
3512
3562
|
},
|
|
3513
3563
|
{
|
|
3514
3564
|
value: "end",
|
|
3515
|
-
label: (0,
|
|
3516
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3565
|
+
label: (0, import_i18n25.__)("End", "elementor"),
|
|
3566
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
|
|
3517
3567
|
showTooltip: true
|
|
3518
3568
|
},
|
|
3519
3569
|
{
|
|
3520
3570
|
value: "stretch",
|
|
3521
|
-
label: (0,
|
|
3522
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3571
|
+
label: (0, import_i18n25.__)("Stretch", "elementor"),
|
|
3572
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(RotatedIcon, { icon: import_icons10.LayoutDistributeVerticalIcon, size, ...iconProps2 }),
|
|
3523
3573
|
showTooltip: true
|
|
3524
3574
|
}
|
|
3525
3575
|
];
|
|
3526
3576
|
var AlignItemsField = () => {
|
|
3527
|
-
return /* @__PURE__ */
|
|
3577
|
+
return /* @__PURE__ */ React51.createElement(UiProviders, null, /* @__PURE__ */ React51.createElement(StylesField, { bind: "align-items", propDisplayName: ALIGN_ITEMS_LABEL }, /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label: ALIGN_ITEMS_LABEL }, /* @__PURE__ */ React51.createElement(import_editor_controls21.ToggleControl, { options: options2 }))));
|
|
3528
3578
|
};
|
|
3529
3579
|
|
|
3530
3580
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
3531
|
-
var
|
|
3532
|
-
var
|
|
3581
|
+
var React52 = __toESM(require("react"));
|
|
3582
|
+
var import_editor_controls22 = require("@elementor/editor-controls");
|
|
3533
3583
|
var import_icons11 = require("@elementor/icons");
|
|
3534
|
-
var
|
|
3535
|
-
var
|
|
3536
|
-
var ALIGN_SELF_LABEL = (0,
|
|
3584
|
+
var import_ui36 = require("@elementor/ui");
|
|
3585
|
+
var import_i18n26 = require("@wordpress/i18n");
|
|
3586
|
+
var ALIGN_SELF_LABEL = (0, import_i18n26.__)("Align self", "elementor");
|
|
3537
3587
|
var ALIGN_SELF_CHILD_OFFSET_MAP = {
|
|
3538
3588
|
row: 90,
|
|
3539
3589
|
"row-reverse": 90,
|
|
3540
3590
|
column: 0,
|
|
3541
3591
|
"column-reverse": 0
|
|
3542
3592
|
};
|
|
3543
|
-
var StartIcon3 = (0,
|
|
3544
|
-
var EndIcon3 = (0,
|
|
3593
|
+
var StartIcon3 = (0, import_ui36.withDirection)(import_icons11.LayoutAlignLeftIcon);
|
|
3594
|
+
var EndIcon3 = (0, import_ui36.withDirection)(import_icons11.LayoutAlignRightIcon);
|
|
3545
3595
|
var iconProps3 = {
|
|
3546
3596
|
isClockwise: false
|
|
3547
3597
|
};
|
|
3548
3598
|
var getOptions = (parentStyleDirection) => [
|
|
3549
3599
|
{
|
|
3550
3600
|
value: "start",
|
|
3551
|
-
label: (0,
|
|
3552
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3601
|
+
label: (0, import_i18n26.__)("Start", "elementor"),
|
|
3602
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(
|
|
3553
3603
|
RotatedIcon,
|
|
3554
3604
|
{
|
|
3555
3605
|
icon: StartIcon3,
|
|
@@ -3562,8 +3612,8 @@ var getOptions = (parentStyleDirection) => [
|
|
|
3562
3612
|
},
|
|
3563
3613
|
{
|
|
3564
3614
|
value: "center",
|
|
3565
|
-
label: (0,
|
|
3566
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3615
|
+
label: (0, import_i18n26.__)("Center", "elementor"),
|
|
3616
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(
|
|
3567
3617
|
RotatedIcon,
|
|
3568
3618
|
{
|
|
3569
3619
|
icon: import_icons11.LayoutAlignCenterIcon,
|
|
@@ -3576,8 +3626,8 @@ var getOptions = (parentStyleDirection) => [
|
|
|
3576
3626
|
},
|
|
3577
3627
|
{
|
|
3578
3628
|
value: "end",
|
|
3579
|
-
label: (0,
|
|
3580
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3629
|
+
label: (0, import_i18n26.__)("End", "elementor"),
|
|
3630
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(
|
|
3581
3631
|
RotatedIcon,
|
|
3582
3632
|
{
|
|
3583
3633
|
icon: EndIcon3,
|
|
@@ -3590,8 +3640,8 @@ var getOptions = (parentStyleDirection) => [
|
|
|
3590
3640
|
},
|
|
3591
3641
|
{
|
|
3592
3642
|
value: "stretch",
|
|
3593
|
-
label: (0,
|
|
3594
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3643
|
+
label: (0, import_i18n26.__)("Stretch", "elementor"),
|
|
3644
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(
|
|
3595
3645
|
RotatedIcon,
|
|
3596
3646
|
{
|
|
3597
3647
|
icon: import_icons11.LayoutDistributeVerticalIcon,
|
|
@@ -3603,102 +3653,102 @@ var getOptions = (parentStyleDirection) => [
|
|
|
3603
3653
|
showTooltip: true
|
|
3604
3654
|
}
|
|
3605
3655
|
];
|
|
3606
|
-
var AlignSelfChild = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
3656
|
+
var AlignSelfChild = ({ parentStyleDirection }) => /* @__PURE__ */ React52.createElement(StylesField, { bind: "align-self", propDisplayName: ALIGN_SELF_LABEL }, /* @__PURE__ */ React52.createElement(UiProviders, null, /* @__PURE__ */ React52.createElement(StylesFieldLayout, { label: ALIGN_SELF_LABEL }, /* @__PURE__ */ React52.createElement(import_editor_controls22.ToggleControl, { options: getOptions(parentStyleDirection) }))));
|
|
3607
3657
|
|
|
3608
3658
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
3609
|
-
var
|
|
3610
|
-
var
|
|
3611
|
-
var
|
|
3612
|
-
var DISPLAY_LABEL = (0,
|
|
3659
|
+
var React53 = __toESM(require("react"));
|
|
3660
|
+
var import_editor_controls23 = require("@elementor/editor-controls");
|
|
3661
|
+
var import_i18n27 = require("@wordpress/i18n");
|
|
3662
|
+
var DISPLAY_LABEL = (0, import_i18n27.__)("Display", "elementor");
|
|
3613
3663
|
var displayFieldItems = [
|
|
3614
3664
|
{
|
|
3615
3665
|
value: "block",
|
|
3616
|
-
renderContent: () => (0,
|
|
3617
|
-
label: (0,
|
|
3666
|
+
renderContent: () => (0, import_i18n27.__)("Block", "elementor"),
|
|
3667
|
+
label: (0, import_i18n27.__)("Block", "elementor"),
|
|
3618
3668
|
showTooltip: true
|
|
3619
3669
|
},
|
|
3620
3670
|
{
|
|
3621
3671
|
value: "flex",
|
|
3622
|
-
renderContent: () => (0,
|
|
3623
|
-
label: (0,
|
|
3672
|
+
renderContent: () => (0, import_i18n27.__)("Flex", "elementor"),
|
|
3673
|
+
label: (0, import_i18n27.__)("Flex", "elementor"),
|
|
3624
3674
|
showTooltip: true
|
|
3625
3675
|
},
|
|
3626
3676
|
{
|
|
3627
3677
|
value: "inline-block",
|
|
3628
|
-
renderContent: () => (0,
|
|
3629
|
-
label: (0,
|
|
3678
|
+
renderContent: () => (0, import_i18n27.__)("In-blk", "elementor"),
|
|
3679
|
+
label: (0, import_i18n27.__)("Inline-block", "elementor"),
|
|
3630
3680
|
showTooltip: true
|
|
3631
3681
|
},
|
|
3632
3682
|
{
|
|
3633
3683
|
value: "none",
|
|
3634
|
-
renderContent: () => (0,
|
|
3635
|
-
label: (0,
|
|
3684
|
+
renderContent: () => (0, import_i18n27.__)("None", "elementor"),
|
|
3685
|
+
label: (0, import_i18n27.__)("None", "elementor"),
|
|
3636
3686
|
showTooltip: true
|
|
3637
3687
|
},
|
|
3638
3688
|
{
|
|
3639
3689
|
value: "inline-flex",
|
|
3640
|
-
renderContent: () => (0,
|
|
3641
|
-
label: (0,
|
|
3690
|
+
renderContent: () => (0, import_i18n27.__)("In-flx", "elementor"),
|
|
3691
|
+
label: (0, import_i18n27.__)("Inline-flex", "elementor"),
|
|
3642
3692
|
showTooltip: true
|
|
3643
3693
|
}
|
|
3644
3694
|
];
|
|
3645
3695
|
var DisplayField = () => {
|
|
3646
3696
|
const placeholder = useDisplayPlaceholderValue();
|
|
3647
|
-
return /* @__PURE__ */
|
|
3697
|
+
return /* @__PURE__ */ React53.createElement(StylesField, { bind: "display", propDisplayName: DISPLAY_LABEL, placeholder }, /* @__PURE__ */ React53.createElement(StylesFieldLayout, { label: DISPLAY_LABEL, direction: "column" }, /* @__PURE__ */ React53.createElement(import_editor_controls23.ToggleControl, { options: displayFieldItems, maxItems: 4, fullWidth: true })));
|
|
3648
3698
|
};
|
|
3649
3699
|
var useDisplayPlaceholderValue = () => useStylesInheritanceChain(["display"])[0]?.value ?? void 0;
|
|
3650
3700
|
|
|
3651
3701
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
3652
|
-
var
|
|
3653
|
-
var
|
|
3702
|
+
var React54 = __toESM(require("react"));
|
|
3703
|
+
var import_editor_controls24 = require("@elementor/editor-controls");
|
|
3654
3704
|
var import_icons12 = require("@elementor/icons");
|
|
3655
|
-
var
|
|
3656
|
-
var
|
|
3657
|
-
var FLEX_DIRECTION_LABEL2 = (0,
|
|
3705
|
+
var import_ui37 = require("@elementor/ui");
|
|
3706
|
+
var import_i18n28 = require("@wordpress/i18n");
|
|
3707
|
+
var FLEX_DIRECTION_LABEL2 = (0, import_i18n28.__)("Direction", "elementor");
|
|
3658
3708
|
var options3 = [
|
|
3659
3709
|
{
|
|
3660
3710
|
value: "row",
|
|
3661
|
-
label: (0,
|
|
3711
|
+
label: (0, import_i18n28.__)("Row", "elementor"),
|
|
3662
3712
|
renderContent: ({ size }) => {
|
|
3663
|
-
const StartIcon5 = (0,
|
|
3664
|
-
return /* @__PURE__ */
|
|
3713
|
+
const StartIcon5 = (0, import_ui37.withDirection)(import_icons12.ArrowRightIcon);
|
|
3714
|
+
return /* @__PURE__ */ React54.createElement(StartIcon5, { fontSize: size });
|
|
3665
3715
|
},
|
|
3666
3716
|
showTooltip: true
|
|
3667
3717
|
},
|
|
3668
3718
|
{
|
|
3669
3719
|
value: "column",
|
|
3670
|
-
label: (0,
|
|
3671
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3720
|
+
label: (0, import_i18n28.__)("Column", "elementor"),
|
|
3721
|
+
renderContent: ({ size }) => /* @__PURE__ */ React54.createElement(import_icons12.ArrowDownSmallIcon, { fontSize: size }),
|
|
3672
3722
|
showTooltip: true
|
|
3673
3723
|
},
|
|
3674
3724
|
{
|
|
3675
3725
|
value: "row-reverse",
|
|
3676
|
-
label: (0,
|
|
3726
|
+
label: (0, import_i18n28.__)("Reversed row", "elementor"),
|
|
3677
3727
|
renderContent: ({ size }) => {
|
|
3678
|
-
const EndIcon5 = (0,
|
|
3679
|
-
return /* @__PURE__ */
|
|
3728
|
+
const EndIcon5 = (0, import_ui37.withDirection)(import_icons12.ArrowLeftIcon);
|
|
3729
|
+
return /* @__PURE__ */ React54.createElement(EndIcon5, { fontSize: size });
|
|
3680
3730
|
},
|
|
3681
3731
|
showTooltip: true
|
|
3682
3732
|
},
|
|
3683
3733
|
{
|
|
3684
3734
|
value: "column-reverse",
|
|
3685
|
-
label: (0,
|
|
3686
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3735
|
+
label: (0, import_i18n28.__)("Reversed column", "elementor"),
|
|
3736
|
+
renderContent: ({ size }) => /* @__PURE__ */ React54.createElement(import_icons12.ArrowUpSmallIcon, { fontSize: size }),
|
|
3687
3737
|
showTooltip: true
|
|
3688
3738
|
}
|
|
3689
3739
|
];
|
|
3690
3740
|
var FlexDirectionField = () => {
|
|
3691
|
-
return /* @__PURE__ */
|
|
3741
|
+
return /* @__PURE__ */ React54.createElement(StylesField, { bind: "flex-direction", propDisplayName: FLEX_DIRECTION_LABEL2 }, /* @__PURE__ */ React54.createElement(UiProviders, null, /* @__PURE__ */ React54.createElement(StylesFieldLayout, { label: FLEX_DIRECTION_LABEL2 }, /* @__PURE__ */ React54.createElement(import_editor_controls24.ToggleControl, { options: options3 }))));
|
|
3692
3742
|
};
|
|
3693
3743
|
|
|
3694
3744
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
3695
|
-
var
|
|
3745
|
+
var React55 = __toESM(require("react"));
|
|
3696
3746
|
var import_react27 = require("react");
|
|
3697
|
-
var
|
|
3747
|
+
var import_editor_controls25 = require("@elementor/editor-controls");
|
|
3698
3748
|
var import_icons13 = require("@elementor/icons");
|
|
3699
|
-
var
|
|
3700
|
-
var
|
|
3701
|
-
var ORDER_LABEL = (0,
|
|
3749
|
+
var import_ui38 = require("@elementor/ui");
|
|
3750
|
+
var import_i18n29 = require("@wordpress/i18n");
|
|
3751
|
+
var ORDER_LABEL = (0, import_i18n29.__)("Order", "elementor");
|
|
3702
3752
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
3703
3753
|
var LAST_DEFAULT_VALUE = 99999;
|
|
3704
3754
|
var FIRST = "first";
|
|
@@ -3711,25 +3761,25 @@ var orderValueMap = {
|
|
|
3711
3761
|
var items = [
|
|
3712
3762
|
{
|
|
3713
3763
|
value: FIRST,
|
|
3714
|
-
label: (0,
|
|
3715
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3764
|
+
label: (0, import_i18n29.__)("First", "elementor"),
|
|
3765
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(import_icons13.ArrowUpSmallIcon, { fontSize: size }),
|
|
3716
3766
|
showTooltip: true
|
|
3717
3767
|
},
|
|
3718
3768
|
{
|
|
3719
3769
|
value: LAST,
|
|
3720
|
-
label: (0,
|
|
3721
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3770
|
+
label: (0, import_i18n29.__)("Last", "elementor"),
|
|
3771
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(import_icons13.ArrowDownSmallIcon, { fontSize: size }),
|
|
3722
3772
|
showTooltip: true
|
|
3723
3773
|
},
|
|
3724
3774
|
{
|
|
3725
3775
|
value: CUSTOM,
|
|
3726
|
-
label: (0,
|
|
3727
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3776
|
+
label: (0, import_i18n29.__)("Custom", "elementor"),
|
|
3777
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(import_icons13.PencilIcon, { fontSize: size }),
|
|
3728
3778
|
showTooltip: true
|
|
3729
3779
|
}
|
|
3730
3780
|
];
|
|
3731
3781
|
var FlexOrderField = () => {
|
|
3732
|
-
return /* @__PURE__ */
|
|
3782
|
+
return /* @__PURE__ */ React55.createElement(StylesField, { bind: "order", propDisplayName: ORDER_LABEL }, /* @__PURE__ */ React55.createElement(UiProviders, null, /* @__PURE__ */ React55.createElement(SectionContent, null, /* @__PURE__ */ React55.createElement(FlexOrderFieldContent, null))));
|
|
3733
3783
|
};
|
|
3734
3784
|
function FlexOrderFieldContent() {
|
|
3735
3785
|
const {
|
|
@@ -3739,7 +3789,7 @@ function FlexOrderFieldContent() {
|
|
|
3739
3789
|
} = useStylesField("order", {
|
|
3740
3790
|
history: { propDisplayName: ORDER_LABEL }
|
|
3741
3791
|
});
|
|
3742
|
-
const { placeholder } = (0,
|
|
3792
|
+
const { placeholder } = (0, import_editor_controls25.useBoundProp)();
|
|
3743
3793
|
const placeholderValue = placeholder;
|
|
3744
3794
|
const currentGroup = (0, import_react27.useMemo)(() => getGroupControlValue(order?.value ?? null), [order]);
|
|
3745
3795
|
const [activeGroup, setActiveGroup] = (0, import_react27.useState)(currentGroup);
|
|
@@ -3774,8 +3824,8 @@ function FlexOrderFieldContent() {
|
|
|
3774
3824
|
};
|
|
3775
3825
|
const isCustomVisible = CUSTOM === activeGroup || CUSTOM === groupPlaceholder;
|
|
3776
3826
|
const orderPlaceholder = CUSTOM === groupPlaceholder ? String(placeholderValue?.value ?? null) : "";
|
|
3777
|
-
return /* @__PURE__ */
|
|
3778
|
-
|
|
3827
|
+
return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ React55.createElement(
|
|
3828
|
+
import_editor_controls25.ControlToggleButtonGroup,
|
|
3779
3829
|
{
|
|
3780
3830
|
items,
|
|
3781
3831
|
value: activeGroup,
|
|
@@ -3784,8 +3834,8 @@ function FlexOrderFieldContent() {
|
|
|
3784
3834
|
placeholder: groupPlaceholder,
|
|
3785
3835
|
disabled: !canEdit
|
|
3786
3836
|
}
|
|
3787
|
-
)), isCustomVisible && /* @__PURE__ */
|
|
3788
|
-
|
|
3837
|
+
)), isCustomVisible && /* @__PURE__ */ React55.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React55.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React55.createElement(ControlLabel, null, (0, import_i18n29.__)("Custom order", "elementor"))), /* @__PURE__ */ React55.createElement(import_ui38.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React55.createElement(
|
|
3838
|
+
import_editor_controls25.NumberControl,
|
|
3789
3839
|
{
|
|
3790
3840
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
3791
3841
|
max: LAST_DEFAULT_VALUE - 1,
|
|
@@ -3808,42 +3858,42 @@ var getGroupControlValue = (order) => {
|
|
|
3808
3858
|
};
|
|
3809
3859
|
|
|
3810
3860
|
// src/components/style-sections/layout-section/flex-size-field.tsx
|
|
3811
|
-
var
|
|
3861
|
+
var React56 = __toESM(require("react"));
|
|
3812
3862
|
var import_react28 = require("react");
|
|
3813
|
-
var
|
|
3863
|
+
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
3814
3864
|
var import_editor_props14 = require("@elementor/editor-props");
|
|
3815
3865
|
var import_icons14 = require("@elementor/icons");
|
|
3816
|
-
var
|
|
3817
|
-
var FLEX_SIZE_LABEL = (0,
|
|
3866
|
+
var import_i18n30 = require("@wordpress/i18n");
|
|
3867
|
+
var FLEX_SIZE_LABEL = (0, import_i18n30.__)("Flex Size", "elementor");
|
|
3818
3868
|
var DEFAULT = 1;
|
|
3819
3869
|
var items2 = [
|
|
3820
3870
|
{
|
|
3821
3871
|
value: "flex-grow",
|
|
3822
|
-
label: (0,
|
|
3823
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3872
|
+
label: (0, import_i18n30.__)("Grow", "elementor"),
|
|
3873
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons14.ExpandIcon, { fontSize: size }),
|
|
3824
3874
|
showTooltip: true
|
|
3825
3875
|
},
|
|
3826
3876
|
{
|
|
3827
3877
|
value: "flex-shrink",
|
|
3828
|
-
label: (0,
|
|
3829
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3878
|
+
label: (0, import_i18n30.__)("Shrink", "elementor"),
|
|
3879
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons14.ShrinkIcon, { fontSize: size }),
|
|
3830
3880
|
showTooltip: true
|
|
3831
3881
|
},
|
|
3832
3882
|
{
|
|
3833
3883
|
value: "custom",
|
|
3834
|
-
label: (0,
|
|
3835
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3884
|
+
label: (0, import_i18n30.__)("Custom", "elementor"),
|
|
3885
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons14.PencilIcon, { fontSize: size }),
|
|
3836
3886
|
showTooltip: true
|
|
3837
3887
|
}
|
|
3838
3888
|
];
|
|
3839
3889
|
var FlexSizeField = () => {
|
|
3840
|
-
return /* @__PURE__ */
|
|
3890
|
+
return /* @__PURE__ */ React56.createElement(UiProviders, null, /* @__PURE__ */ React56.createElement(SectionContent, null, /* @__PURE__ */ React56.createElement(StylesField, { bind: "flex", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React56.createElement(FlexSizeFieldContent, null))));
|
|
3841
3891
|
};
|
|
3842
3892
|
var FlexSizeFieldContent = () => {
|
|
3843
3893
|
const { value, setValue, canEdit } = useStylesField("flex", {
|
|
3844
3894
|
history: { propDisplayName: FLEX_SIZE_LABEL }
|
|
3845
3895
|
});
|
|
3846
|
-
const { placeholder } = (0,
|
|
3896
|
+
const { placeholder } = (0, import_editor_controls26.useBoundProp)();
|
|
3847
3897
|
const flexValues = extractFlexValues(value);
|
|
3848
3898
|
const currentGroup = (0, import_react28.useMemo)(() => getActiveGroup(flexValues), [flexValues]);
|
|
3849
3899
|
const [activeGroup, setActiveGroup] = (0, import_react28.useState)(currentGroup);
|
|
@@ -3866,8 +3916,8 @@ var FlexSizeFieldContent = () => {
|
|
|
3866
3916
|
};
|
|
3867
3917
|
const groupPlaceholder = getActiveGroup(extractFlexValues(placeholder));
|
|
3868
3918
|
const isCustomVisible = "custom" === activeGroup || "custom" === groupPlaceholder;
|
|
3869
|
-
return /* @__PURE__ */
|
|
3870
|
-
|
|
3919
|
+
return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: FLEX_SIZE_LABEL }, /* @__PURE__ */ React56.createElement(
|
|
3920
|
+
import_editor_controls26.ControlToggleButtonGroup,
|
|
3871
3921
|
{
|
|
3872
3922
|
value: activeGroup ?? null,
|
|
3873
3923
|
placeholder: groupPlaceholder ?? null,
|
|
@@ -3876,7 +3926,7 @@ var FlexSizeFieldContent = () => {
|
|
|
3876
3926
|
items: items2,
|
|
3877
3927
|
exclusive: true
|
|
3878
3928
|
}
|
|
3879
|
-
)), isCustomVisible && /* @__PURE__ */
|
|
3929
|
+
)), isCustomVisible && /* @__PURE__ */ React56.createElement(FlexCustomField, null));
|
|
3880
3930
|
};
|
|
3881
3931
|
function extractFlexValues(source) {
|
|
3882
3932
|
return {
|
|
@@ -3917,8 +3967,8 @@ var createFlexValueForGroup = (group, flexValue) => {
|
|
|
3917
3967
|
};
|
|
3918
3968
|
var FlexCustomField = () => {
|
|
3919
3969
|
const flexBasisRowRef = (0, import_react28.useRef)(null);
|
|
3920
|
-
const context = (0,
|
|
3921
|
-
return /* @__PURE__ */
|
|
3970
|
+
const context = (0, import_editor_controls26.useBoundProp)(import_editor_props14.flexPropTypeUtil);
|
|
3971
|
+
return /* @__PURE__ */ React56.createElement(import_editor_controls26.PropProvider, { ...context }, /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: (0, import_i18n30.__)("Grow", "elementor") }, /* @__PURE__ */ React56.createElement(import_editor_controls26.PropKeyProvider, { bind: "flexGrow" }, /* @__PURE__ */ React56.createElement(import_editor_controls26.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: (0, import_i18n30.__)("Shrink", "elementor") }, /* @__PURE__ */ React56.createElement(import_editor_controls26.PropKeyProvider, { bind: "flexShrink" }, /* @__PURE__ */ React56.createElement(import_editor_controls26.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: (0, import_i18n30.__)("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React56.createElement(import_editor_controls26.PropKeyProvider, { bind: "flexBasis" }, /* @__PURE__ */ React56.createElement(import_editor_controls26.SizeControl, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef })))));
|
|
3922
3972
|
};
|
|
3923
3973
|
var getActiveGroup = ({
|
|
3924
3974
|
grow,
|
|
@@ -3941,23 +3991,23 @@ var getActiveGroup = ({
|
|
|
3941
3991
|
};
|
|
3942
3992
|
|
|
3943
3993
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
3944
|
-
var
|
|
3945
|
-
var
|
|
3946
|
-
var
|
|
3947
|
-
var GAPS_LABEL = (0,
|
|
3994
|
+
var React57 = __toESM(require("react"));
|
|
3995
|
+
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
3996
|
+
var import_i18n31 = require("@wordpress/i18n");
|
|
3997
|
+
var GAPS_LABEL = (0, import_i18n31.__)("Gaps", "elementor");
|
|
3948
3998
|
var GapControlField = () => {
|
|
3949
|
-
return /* @__PURE__ */
|
|
3999
|
+
return /* @__PURE__ */ React57.createElement(StylesField, { bind: "gap", propDisplayName: GAPS_LABEL }, /* @__PURE__ */ React57.createElement(import_editor_controls27.GapControl, { label: GAPS_LABEL }));
|
|
3950
4000
|
};
|
|
3951
4001
|
|
|
3952
4002
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
3953
|
-
var
|
|
3954
|
-
var
|
|
4003
|
+
var React58 = __toESM(require("react"));
|
|
4004
|
+
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
3955
4005
|
var import_icons15 = require("@elementor/icons");
|
|
3956
|
-
var
|
|
3957
|
-
var
|
|
3958
|
-
var JUSTIFY_CONTENT_LABEL = (0,
|
|
3959
|
-
var StartIcon4 = (0,
|
|
3960
|
-
var EndIcon4 = (0,
|
|
4006
|
+
var import_ui39 = require("@elementor/ui");
|
|
4007
|
+
var import_i18n32 = require("@wordpress/i18n");
|
|
4008
|
+
var JUSTIFY_CONTENT_LABEL = (0, import_i18n32.__)("Justify content", "elementor");
|
|
4009
|
+
var StartIcon4 = (0, import_ui39.withDirection)(import_icons15.JustifyTopIcon);
|
|
4010
|
+
var EndIcon4 = (0, import_ui39.withDirection)(import_icons15.JustifyBottomIcon);
|
|
3961
4011
|
var iconProps4 = {
|
|
3962
4012
|
isClockwise: true,
|
|
3963
4013
|
offset: -90
|
|
@@ -3965,76 +4015,76 @@ var iconProps4 = {
|
|
|
3965
4015
|
var options4 = [
|
|
3966
4016
|
{
|
|
3967
4017
|
value: "flex-start",
|
|
3968
|
-
label: (0,
|
|
3969
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4018
|
+
label: (0, import_i18n32.__)("Start", "elementor"),
|
|
4019
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(RotatedIcon, { icon: StartIcon4, size, ...iconProps4 }),
|
|
3970
4020
|
showTooltip: true
|
|
3971
4021
|
},
|
|
3972
4022
|
{
|
|
3973
4023
|
value: "center",
|
|
3974
|
-
label: (0,
|
|
3975
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4024
|
+
label: (0, import_i18n32.__)("Center", "elementor"),
|
|
4025
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(RotatedIcon, { icon: import_icons15.JustifyCenterIcon, size, ...iconProps4 }),
|
|
3976
4026
|
showTooltip: true
|
|
3977
4027
|
},
|
|
3978
4028
|
{
|
|
3979
4029
|
value: "flex-end",
|
|
3980
|
-
label: (0,
|
|
3981
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4030
|
+
label: (0, import_i18n32.__)("End", "elementor"),
|
|
4031
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(RotatedIcon, { icon: EndIcon4, size, ...iconProps4 }),
|
|
3982
4032
|
showTooltip: true
|
|
3983
4033
|
},
|
|
3984
4034
|
{
|
|
3985
4035
|
value: "space-between",
|
|
3986
|
-
label: (0,
|
|
3987
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4036
|
+
label: (0, import_i18n32.__)("Space between", "elementor"),
|
|
4037
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(RotatedIcon, { icon: import_icons15.JustifySpaceBetweenVerticalIcon, size, ...iconProps4 }),
|
|
3988
4038
|
showTooltip: true
|
|
3989
4039
|
},
|
|
3990
4040
|
{
|
|
3991
4041
|
value: "space-around",
|
|
3992
|
-
label: (0,
|
|
3993
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4042
|
+
label: (0, import_i18n32.__)("Space around", "elementor"),
|
|
4043
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(RotatedIcon, { icon: import_icons15.JustifySpaceAroundVerticalIcon, size, ...iconProps4 }),
|
|
3994
4044
|
showTooltip: true
|
|
3995
4045
|
},
|
|
3996
4046
|
{
|
|
3997
4047
|
value: "space-evenly",
|
|
3998
|
-
label: (0,
|
|
3999
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4048
|
+
label: (0, import_i18n32.__)("Space evenly", "elementor"),
|
|
4049
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(RotatedIcon, { icon: import_icons15.JustifyDistributeVerticalIcon, size, ...iconProps4 }),
|
|
4000
4050
|
showTooltip: true
|
|
4001
4051
|
}
|
|
4002
4052
|
];
|
|
4003
|
-
var JustifyContentField = () => /* @__PURE__ */
|
|
4053
|
+
var JustifyContentField = () => /* @__PURE__ */ React58.createElement(StylesField, { bind: "justify-content", propDisplayName: JUSTIFY_CONTENT_LABEL }, /* @__PURE__ */ React58.createElement(UiProviders, null, /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label: JUSTIFY_CONTENT_LABEL, direction: "column" }, /* @__PURE__ */ React58.createElement(import_editor_controls28.ToggleControl, { options: options4, fullWidth: true }))));
|
|
4004
4054
|
|
|
4005
4055
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
4006
|
-
var
|
|
4007
|
-
var
|
|
4056
|
+
var React59 = __toESM(require("react"));
|
|
4057
|
+
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
4008
4058
|
var import_icons16 = require("@elementor/icons");
|
|
4009
|
-
var
|
|
4010
|
-
var FLEX_WRAP_LABEL = (0,
|
|
4059
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
4060
|
+
var FLEX_WRAP_LABEL = (0, import_i18n33.__)("Wrap", "elementor");
|
|
4011
4061
|
var options5 = [
|
|
4012
4062
|
{
|
|
4013
4063
|
value: "nowrap",
|
|
4014
|
-
label: (0,
|
|
4015
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4064
|
+
label: (0, import_i18n33.__)("No wrap", "elementor"),
|
|
4065
|
+
renderContent: ({ size }) => /* @__PURE__ */ React59.createElement(import_icons16.ArrowRightIcon, { fontSize: size }),
|
|
4016
4066
|
showTooltip: true
|
|
4017
4067
|
},
|
|
4018
4068
|
{
|
|
4019
4069
|
value: "wrap",
|
|
4020
|
-
label: (0,
|
|
4021
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4070
|
+
label: (0, import_i18n33.__)("Wrap", "elementor"),
|
|
4071
|
+
renderContent: ({ size }) => /* @__PURE__ */ React59.createElement(import_icons16.ArrowBackIcon, { fontSize: size }),
|
|
4022
4072
|
showTooltip: true
|
|
4023
4073
|
},
|
|
4024
4074
|
{
|
|
4025
4075
|
value: "wrap-reverse",
|
|
4026
|
-
label: (0,
|
|
4027
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4076
|
+
label: (0, import_i18n33.__)("Reversed wrap", "elementor"),
|
|
4077
|
+
renderContent: ({ size }) => /* @__PURE__ */ React59.createElement(import_icons16.ArrowForwardIcon, { fontSize: size }),
|
|
4028
4078
|
showTooltip: true
|
|
4029
4079
|
}
|
|
4030
4080
|
];
|
|
4031
4081
|
var WrapField = () => {
|
|
4032
|
-
return /* @__PURE__ */
|
|
4082
|
+
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "flex-wrap", propDisplayName: FLEX_WRAP_LABEL }, /* @__PURE__ */ React59.createElement(UiProviders, null, /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label: FLEX_WRAP_LABEL }, /* @__PURE__ */ React59.createElement(import_editor_controls29.ToggleControl, { options: options5 }))));
|
|
4033
4083
|
};
|
|
4034
4084
|
|
|
4035
4085
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
4036
|
-
var DISPLAY_LABEL2 = (0,
|
|
4037
|
-
var FLEX_WRAP_LABEL2 = (0,
|
|
4086
|
+
var DISPLAY_LABEL2 = (0, import_i18n34.__)("Display", "elementor");
|
|
4087
|
+
var FLEX_WRAP_LABEL2 = (0, import_i18n34.__)("Flex wrap", "elementor");
|
|
4038
4088
|
var LayoutSection = () => {
|
|
4039
4089
|
const { value: display } = useStylesField("display", {
|
|
4040
4090
|
history: { propDisplayName: DISPLAY_LABEL2 }
|
|
@@ -4045,15 +4095,15 @@ var LayoutSection = () => {
|
|
|
4045
4095
|
const parent = (0, import_editor_elements11.useParentElement)(element.id);
|
|
4046
4096
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
4047
4097
|
const parentStyleDirection = parentStyle?.flexDirection ?? "row";
|
|
4048
|
-
return /* @__PURE__ */
|
|
4098
|
+
return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React60.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React60.createElement(FlexChildFields, { parentStyleDirection }));
|
|
4049
4099
|
};
|
|
4050
4100
|
var FlexFields = () => {
|
|
4051
4101
|
const { value: flexWrap } = useStylesField("flex-wrap", {
|
|
4052
4102
|
history: { propDisplayName: FLEX_WRAP_LABEL2 }
|
|
4053
4103
|
});
|
|
4054
|
-
return /* @__PURE__ */
|
|
4104
|
+
return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(FlexDirectionField, null), /* @__PURE__ */ React60.createElement(JustifyContentField, null), /* @__PURE__ */ React60.createElement(AlignItemsField, null), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(GapControlField, null), /* @__PURE__ */ React60.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React60.createElement(AlignContentField, null));
|
|
4055
4105
|
};
|
|
4056
|
-
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
4106
|
+
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(import_editor_controls30.ControlFormLabel, null, (0, import_i18n34.__)("Flex child", "elementor")), /* @__PURE__ */ React60.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React60.createElement(FlexOrderField, null), /* @__PURE__ */ React60.createElement(FlexSizeField, null));
|
|
4057
4107
|
var shouldDisplayFlexFields = (display, local) => {
|
|
4058
4108
|
const value = display?.value ?? local?.value;
|
|
4059
4109
|
if (!value) {
|
|
@@ -4063,38 +4113,38 @@ var shouldDisplayFlexFields = (display, local) => {
|
|
|
4063
4113
|
};
|
|
4064
4114
|
|
|
4065
4115
|
// src/components/style-sections/position-section/position-section.tsx
|
|
4066
|
-
var
|
|
4116
|
+
var React65 = __toESM(require("react"));
|
|
4067
4117
|
var import_session5 = require("@elementor/session");
|
|
4068
|
-
var
|
|
4118
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
4069
4119
|
|
|
4070
4120
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
4071
|
-
var
|
|
4121
|
+
var React61 = __toESM(require("react"));
|
|
4072
4122
|
var import_react29 = require("react");
|
|
4073
|
-
var
|
|
4123
|
+
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
4074
4124
|
var import_icons17 = require("@elementor/icons");
|
|
4075
|
-
var
|
|
4076
|
-
var
|
|
4077
|
-
var InlineStartIcon2 = (0,
|
|
4078
|
-
var InlineEndIcon2 = (0,
|
|
4125
|
+
var import_ui40 = require("@elementor/ui");
|
|
4126
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
4127
|
+
var InlineStartIcon2 = (0, import_ui40.withDirection)(import_icons17.SideLeftIcon);
|
|
4128
|
+
var InlineEndIcon2 = (0, import_ui40.withDirection)(import_icons17.SideRightIcon);
|
|
4079
4129
|
var sideIcons = {
|
|
4080
|
-
"inset-block-start": /* @__PURE__ */
|
|
4081
|
-
"inset-block-end": /* @__PURE__ */
|
|
4082
|
-
"inset-inline-start": /* @__PURE__ */
|
|
4083
|
-
"inset-inline-end": /* @__PURE__ */
|
|
4130
|
+
"inset-block-start": /* @__PURE__ */ React61.createElement(import_icons17.SideTopIcon, { fontSize: "tiny" }),
|
|
4131
|
+
"inset-block-end": /* @__PURE__ */ React61.createElement(import_icons17.SideBottomIcon, { fontSize: "tiny" }),
|
|
4132
|
+
"inset-inline-start": /* @__PURE__ */ React61.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
|
|
4133
|
+
"inset-inline-end": /* @__PURE__ */ React61.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
|
|
4084
4134
|
};
|
|
4085
|
-
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0,
|
|
4086
|
-
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0,
|
|
4135
|
+
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n35.__)("Right", "elementor") : (0, import_i18n35.__)("Left", "elementor");
|
|
4136
|
+
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n35.__)("Left", "elementor") : (0, import_i18n35.__)("Right", "elementor");
|
|
4087
4137
|
var DimensionsField = () => {
|
|
4088
4138
|
const { isSiteRtl } = useDirection();
|
|
4089
4139
|
const rowRefs = [(0, import_react29.useRef)(null), (0, import_react29.useRef)(null)];
|
|
4090
|
-
return /* @__PURE__ */
|
|
4140
|
+
return /* @__PURE__ */ React61.createElement(UiProviders, null, /* @__PURE__ */ React61.createElement(import_ui40.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React61.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n35.__)("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React61.createElement(
|
|
4091
4141
|
DimensionField,
|
|
4092
4142
|
{
|
|
4093
4143
|
side: "inset-inline-end",
|
|
4094
4144
|
label: getInlineEndLabel(isSiteRtl),
|
|
4095
4145
|
rowRef: rowRefs[0]
|
|
4096
4146
|
}
|
|
4097
|
-
)), /* @__PURE__ */
|
|
4147
|
+
)), /* @__PURE__ */ React61.createElement(import_ui40.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React61.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n35.__)("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React61.createElement(
|
|
4098
4148
|
DimensionField,
|
|
4099
4149
|
{
|
|
4100
4150
|
side: "inset-inline-start",
|
|
@@ -4107,8 +4157,8 @@ var DimensionField = ({
|
|
|
4107
4157
|
side,
|
|
4108
4158
|
label,
|
|
4109
4159
|
rowRef
|
|
4110
|
-
}) => /* @__PURE__ */
|
|
4111
|
-
|
|
4160
|
+
}) => /* @__PURE__ */ React61.createElement(StylesField, { bind: side, propDisplayName: label }, /* @__PURE__ */ React61.createElement(import_ui40.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React61.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React61.createElement(ControlLabel, null, label)), /* @__PURE__ */ React61.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React61.createElement(
|
|
4161
|
+
import_editor_controls31.SizeControl,
|
|
4112
4162
|
{
|
|
4113
4163
|
startIcon: sideIcons[side],
|
|
4114
4164
|
extendedOptions: ["auto"],
|
|
@@ -4118,45 +4168,45 @@ var DimensionField = ({
|
|
|
4118
4168
|
))));
|
|
4119
4169
|
|
|
4120
4170
|
// src/components/style-sections/position-section/offset-field.tsx
|
|
4121
|
-
var
|
|
4171
|
+
var React62 = __toESM(require("react"));
|
|
4122
4172
|
var import_react30 = require("react");
|
|
4123
|
-
var
|
|
4124
|
-
var
|
|
4125
|
-
var OFFSET_LABEL = (0,
|
|
4173
|
+
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
4174
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
4175
|
+
var OFFSET_LABEL = (0, import_i18n36.__)("Anchor offset", "elementor");
|
|
4126
4176
|
var UNITS = ["px", "em", "rem", "vw", "vh"];
|
|
4127
4177
|
var OffsetField = () => {
|
|
4128
4178
|
const rowRef = (0, import_react30.useRef)(null);
|
|
4129
|
-
return /* @__PURE__ */
|
|
4179
|
+
return /* @__PURE__ */ React62.createElement(StylesField, { bind: "scroll-margin-top", propDisplayName: OFFSET_LABEL }, /* @__PURE__ */ React62.createElement(StylesFieldLayout, { label: OFFSET_LABEL, ref: rowRef }, /* @__PURE__ */ React62.createElement(import_editor_controls32.SizeControl, { units: UNITS, anchorRef: rowRef })));
|
|
4130
4180
|
};
|
|
4131
4181
|
|
|
4132
4182
|
// src/components/style-sections/position-section/position-field.tsx
|
|
4133
|
-
var
|
|
4134
|
-
var
|
|
4135
|
-
var
|
|
4136
|
-
var POSITION_LABEL = (0,
|
|
4183
|
+
var React63 = __toESM(require("react"));
|
|
4184
|
+
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
4185
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
4186
|
+
var POSITION_LABEL = (0, import_i18n37.__)("Position", "elementor");
|
|
4137
4187
|
var positionOptions = [
|
|
4138
|
-
{ label: (0,
|
|
4139
|
-
{ label: (0,
|
|
4140
|
-
{ label: (0,
|
|
4141
|
-
{ label: (0,
|
|
4142
|
-
{ label: (0,
|
|
4188
|
+
{ label: (0, import_i18n37.__)("Static", "elementor"), value: "static" },
|
|
4189
|
+
{ label: (0, import_i18n37.__)("Relative", "elementor"), value: "relative" },
|
|
4190
|
+
{ label: (0, import_i18n37.__)("Absolute", "elementor"), value: "absolute" },
|
|
4191
|
+
{ label: (0, import_i18n37.__)("Fixed", "elementor"), value: "fixed" },
|
|
4192
|
+
{ label: (0, import_i18n37.__)("Sticky", "elementor"), value: "sticky" }
|
|
4143
4193
|
];
|
|
4144
4194
|
var PositionField = ({ onChange }) => {
|
|
4145
|
-
return /* @__PURE__ */
|
|
4195
|
+
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React63.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React63.createElement(import_editor_controls33.SelectControl, { options: positionOptions, onChange })));
|
|
4146
4196
|
};
|
|
4147
4197
|
|
|
4148
4198
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
4149
|
-
var
|
|
4150
|
-
var
|
|
4151
|
-
var
|
|
4152
|
-
var Z_INDEX_LABEL = (0,
|
|
4199
|
+
var React64 = __toESM(require("react"));
|
|
4200
|
+
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
4201
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
4202
|
+
var Z_INDEX_LABEL = (0, import_i18n38.__)("Z-index", "elementor");
|
|
4153
4203
|
var ZIndexField = () => {
|
|
4154
|
-
return /* @__PURE__ */
|
|
4204
|
+
return /* @__PURE__ */ React64.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React64.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React64.createElement(import_editor_controls34.NumberControl, null)));
|
|
4155
4205
|
};
|
|
4156
4206
|
|
|
4157
4207
|
// src/components/style-sections/position-section/position-section.tsx
|
|
4158
|
-
var POSITION_LABEL2 = (0,
|
|
4159
|
-
var DIMENSIONS_LABEL = (0,
|
|
4208
|
+
var POSITION_LABEL2 = (0, import_i18n39.__)("Position", "elementor");
|
|
4209
|
+
var DIMENSIONS_LABEL = (0, import_i18n39.__)("Dimensions", "elementor");
|
|
4160
4210
|
var PositionSection = () => {
|
|
4161
4211
|
const { value: positionValue } = useStylesField("position", {
|
|
4162
4212
|
history: { propDisplayName: POSITION_LABEL2 }
|
|
@@ -4191,7 +4241,7 @@ var PositionSection = () => {
|
|
|
4191
4241
|
}
|
|
4192
4242
|
};
|
|
4193
4243
|
const isNotStatic = positionValue && positionValue?.value !== "static";
|
|
4194
|
-
return /* @__PURE__ */
|
|
4244
|
+
return /* @__PURE__ */ React65.createElement(SectionContent, null, /* @__PURE__ */ React65.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement(DimensionsField, null), /* @__PURE__ */ React65.createElement(ZIndexField, null)) : null, /* @__PURE__ */ React65.createElement(PanelDivider, null), /* @__PURE__ */ React65.createElement(OffsetField, null));
|
|
4195
4245
|
};
|
|
4196
4246
|
var usePersistDimensions = () => {
|
|
4197
4247
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -4201,23 +4251,26 @@ var usePersistDimensions = () => {
|
|
|
4201
4251
|
};
|
|
4202
4252
|
|
|
4203
4253
|
// src/components/style-sections/size-section/size-section.tsx
|
|
4204
|
-
var
|
|
4254
|
+
var React70 = __toESM(require("react"));
|
|
4205
4255
|
var import_react31 = require("react");
|
|
4206
|
-
var
|
|
4207
|
-
var
|
|
4208
|
-
var
|
|
4256
|
+
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
4257
|
+
var import_ui42 = require("@elementor/ui");
|
|
4258
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
4209
4259
|
|
|
4210
4260
|
// src/components/style-tab-collapsible-content.tsx
|
|
4211
|
-
var
|
|
4261
|
+
var React67 = __toESM(require("react"));
|
|
4212
4262
|
|
|
4213
4263
|
// src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
|
|
4214
|
-
var
|
|
4264
|
+
var React66 = __toESM(require("react"));
|
|
4215
4265
|
var import_editor_styles_repository15 = require("@elementor/editor-styles-repository");
|
|
4216
|
-
var
|
|
4217
|
-
var
|
|
4266
|
+
var import_ui41 = require("@elementor/ui");
|
|
4267
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
4218
4268
|
var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
4219
4269
|
const { id, meta, provider } = useStyle();
|
|
4220
4270
|
const snapshot = useStylesInheritanceSnapshot();
|
|
4271
|
+
if (fields.includes("custom_css")) {
|
|
4272
|
+
return /* @__PURE__ */ React66.createElement(CustomCssIndicator, null);
|
|
4273
|
+
}
|
|
4221
4274
|
const snapshotFields = Object.fromEntries(
|
|
4222
4275
|
Object.entries(snapshot ?? {}).filter(([key]) => fields.includes(key))
|
|
4223
4276
|
);
|
|
@@ -4225,9 +4278,9 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
4225
4278
|
if (!hasValues && !hasOverrides) {
|
|
4226
4279
|
return null;
|
|
4227
4280
|
}
|
|
4228
|
-
const hasValueLabel = (0,
|
|
4229
|
-
const hasOverridesLabel = (0,
|
|
4230
|
-
return /* @__PURE__ */
|
|
4281
|
+
const hasValueLabel = (0, import_i18n40.__)("Has effective styles", "elementor");
|
|
4282
|
+
const hasOverridesLabel = (0, import_i18n40.__)("Has overridden styles", "elementor");
|
|
4283
|
+
return /* @__PURE__ */ React66.createElement(import_ui41.Tooltip, { title: (0, import_i18n40.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React66.createElement(import_ui41.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React66.createElement(
|
|
4231
4284
|
StyleIndicator,
|
|
4232
4285
|
{
|
|
4233
4286
|
getColor: getStylesProviderThemeColor(provider.getKey()),
|
|
@@ -4235,7 +4288,7 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
4235
4288
|
role: "listitem",
|
|
4236
4289
|
"aria-label": hasValueLabel
|
|
4237
4290
|
}
|
|
4238
|
-
), hasOverrides && /* @__PURE__ */
|
|
4291
|
+
), hasOverrides && /* @__PURE__ */ React66.createElement(
|
|
4239
4292
|
StyleIndicator,
|
|
4240
4293
|
{
|
|
4241
4294
|
isOverridden: true,
|
|
@@ -4275,59 +4328,59 @@ function getCurrentStyleFromChain(chain, styleId, meta) {
|
|
|
4275
4328
|
|
|
4276
4329
|
// src/components/style-tab-collapsible-content.tsx
|
|
4277
4330
|
var StyleTabCollapsibleContent = ({ fields = [], children }) => {
|
|
4278
|
-
return /* @__PURE__ */
|
|
4331
|
+
return /* @__PURE__ */ React67.createElement(CollapsibleContent, { titleEnd: getStylesInheritanceIndicators(fields) }, children);
|
|
4279
4332
|
};
|
|
4280
4333
|
function getStylesInheritanceIndicators(fields) {
|
|
4281
4334
|
if (fields.length === 0) {
|
|
4282
4335
|
return null;
|
|
4283
4336
|
}
|
|
4284
|
-
return (isOpen) => !isOpen ? /* @__PURE__ */
|
|
4337
|
+
return (isOpen) => !isOpen ? /* @__PURE__ */ React67.createElement(StylesInheritanceSectionIndicators, { fields }) : null;
|
|
4285
4338
|
}
|
|
4286
4339
|
|
|
4287
4340
|
// src/components/style-sections/size-section/object-fit-field.tsx
|
|
4288
|
-
var
|
|
4289
|
-
var
|
|
4290
|
-
var
|
|
4291
|
-
var OBJECT_FIT_LABEL = (0,
|
|
4341
|
+
var React68 = __toESM(require("react"));
|
|
4342
|
+
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
4343
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
4344
|
+
var OBJECT_FIT_LABEL = (0, import_i18n41.__)("Object fit", "elementor");
|
|
4292
4345
|
var positionOptions2 = [
|
|
4293
|
-
{ label: (0,
|
|
4294
|
-
{ label: (0,
|
|
4295
|
-
{ label: (0,
|
|
4296
|
-
{ label: (0,
|
|
4297
|
-
{ label: (0,
|
|
4346
|
+
{ label: (0, import_i18n41.__)("Fill", "elementor"), value: "fill" },
|
|
4347
|
+
{ label: (0, import_i18n41.__)("Cover", "elementor"), value: "cover" },
|
|
4348
|
+
{ label: (0, import_i18n41.__)("Contain", "elementor"), value: "contain" },
|
|
4349
|
+
{ label: (0, import_i18n41.__)("None", "elementor"), value: "none" },
|
|
4350
|
+
{ label: (0, import_i18n41.__)("Scale down", "elementor"), value: "scale-down" }
|
|
4298
4351
|
];
|
|
4299
4352
|
var ObjectFitField = () => {
|
|
4300
|
-
return /* @__PURE__ */
|
|
4353
|
+
return /* @__PURE__ */ React68.createElement(StylesField, { bind: "object-fit", propDisplayName: OBJECT_FIT_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ React68.createElement(import_editor_controls35.SelectControl, { options: positionOptions2 })));
|
|
4301
4354
|
};
|
|
4302
4355
|
|
|
4303
4356
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
4304
|
-
var
|
|
4305
|
-
var
|
|
4357
|
+
var React69 = __toESM(require("react"));
|
|
4358
|
+
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
4306
4359
|
var import_icons18 = require("@elementor/icons");
|
|
4307
|
-
var
|
|
4308
|
-
var OVERFLOW_LABEL = (0,
|
|
4360
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
4361
|
+
var OVERFLOW_LABEL = (0, import_i18n42.__)("Overflow", "elementor");
|
|
4309
4362
|
var options6 = [
|
|
4310
4363
|
{
|
|
4311
4364
|
value: "visible",
|
|
4312
|
-
label: (0,
|
|
4313
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4365
|
+
label: (0, import_i18n42.__)("Visible", "elementor"),
|
|
4366
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(import_icons18.EyeIcon, { fontSize: size }),
|
|
4314
4367
|
showTooltip: true
|
|
4315
4368
|
},
|
|
4316
4369
|
{
|
|
4317
4370
|
value: "hidden",
|
|
4318
|
-
label: (0,
|
|
4319
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4371
|
+
label: (0, import_i18n42.__)("Hidden", "elementor"),
|
|
4372
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(import_icons18.EyeOffIcon, { fontSize: size }),
|
|
4320
4373
|
showTooltip: true
|
|
4321
4374
|
},
|
|
4322
4375
|
{
|
|
4323
4376
|
value: "auto",
|
|
4324
|
-
label: (0,
|
|
4325
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4377
|
+
label: (0, import_i18n42.__)("Auto", "elementor"),
|
|
4378
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(import_icons18.LetterAIcon, { fontSize: size }),
|
|
4326
4379
|
showTooltip: true
|
|
4327
4380
|
}
|
|
4328
4381
|
];
|
|
4329
4382
|
var OverflowField = () => {
|
|
4330
|
-
return /* @__PURE__ */
|
|
4383
|
+
return /* @__PURE__ */ React69.createElement(StylesField, { bind: "overflow", propDisplayName: OVERFLOW_LABEL }, /* @__PURE__ */ React69.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ React69.createElement(import_editor_controls36.ToggleControl, { options: options6 })));
|
|
4331
4384
|
};
|
|
4332
4385
|
|
|
4333
4386
|
// src/components/style-sections/size-section/size-section.tsx
|
|
@@ -4335,287 +4388,287 @@ var CssSizeProps = [
|
|
|
4335
4388
|
[
|
|
4336
4389
|
{
|
|
4337
4390
|
bind: "width",
|
|
4338
|
-
label: (0,
|
|
4391
|
+
label: (0, import_i18n43.__)("Width", "elementor")
|
|
4339
4392
|
},
|
|
4340
4393
|
{
|
|
4341
4394
|
bind: "height",
|
|
4342
|
-
label: (0,
|
|
4395
|
+
label: (0, import_i18n43.__)("Height", "elementor")
|
|
4343
4396
|
}
|
|
4344
4397
|
],
|
|
4345
4398
|
[
|
|
4346
4399
|
{
|
|
4347
4400
|
bind: "min-width",
|
|
4348
|
-
label: (0,
|
|
4401
|
+
label: (0, import_i18n43.__)("Min width", "elementor")
|
|
4349
4402
|
},
|
|
4350
4403
|
{
|
|
4351
4404
|
bind: "min-height",
|
|
4352
|
-
label: (0,
|
|
4405
|
+
label: (0, import_i18n43.__)("Min height", "elementor")
|
|
4353
4406
|
}
|
|
4354
4407
|
],
|
|
4355
4408
|
[
|
|
4356
4409
|
{
|
|
4357
4410
|
bind: "max-width",
|
|
4358
|
-
label: (0,
|
|
4411
|
+
label: (0, import_i18n43.__)("Max width", "elementor")
|
|
4359
4412
|
},
|
|
4360
4413
|
{
|
|
4361
4414
|
bind: "max-height",
|
|
4362
|
-
label: (0,
|
|
4415
|
+
label: (0, import_i18n43.__)("Max height", "elementor")
|
|
4363
4416
|
}
|
|
4364
4417
|
]
|
|
4365
4418
|
];
|
|
4366
|
-
var ASPECT_RATIO_LABEL = (0,
|
|
4419
|
+
var ASPECT_RATIO_LABEL = (0, import_i18n43.__)("Aspect Ratio", "elementor");
|
|
4367
4420
|
var SizeSection = () => {
|
|
4368
4421
|
const gridRowRefs = [(0, import_react31.useRef)(null), (0, import_react31.useRef)(null), (0, import_react31.useRef)(null)];
|
|
4369
|
-
return /* @__PURE__ */
|
|
4422
|
+
return /* @__PURE__ */ React70.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React70.createElement(import_ui42.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React70.createElement(import_ui42.Grid, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React70.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React70.createElement(PanelDivider, null), /* @__PURE__ */ React70.createElement(import_ui42.Stack, null, /* @__PURE__ */ React70.createElement(OverflowField, null)), /* @__PURE__ */ React70.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React70.createElement(import_ui42.Stack, { gap: 2, pt: 2 }, /* @__PURE__ */ React70.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React70.createElement(import_editor_controls37.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React70.createElement(PanelDivider, null), /* @__PURE__ */ React70.createElement(ObjectFitField, null), /* @__PURE__ */ React70.createElement(StylesField, { bind: "object-position", propDisplayName: (0, import_i18n43.__)("Object position", "elementor") }, /* @__PURE__ */ React70.createElement(import_ui42.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(import_editor_controls37.PositionControl, null))))));
|
|
4370
4423
|
};
|
|
4371
4424
|
var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
|
|
4372
|
-
return /* @__PURE__ */
|
|
4425
|
+
return /* @__PURE__ */ React70.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React70.createElement(import_ui42.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React70.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React70.createElement(ControlLabel, null, label)), /* @__PURE__ */ React70.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React70.createElement(import_editor_controls37.SizeControl, { extendedOptions, anchorRef: rowRef }))));
|
|
4373
4426
|
};
|
|
4374
4427
|
|
|
4375
4428
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
4376
|
-
var
|
|
4377
|
-
var
|
|
4378
|
-
var
|
|
4379
|
-
var MARGIN_LABEL = (0,
|
|
4380
|
-
var PADDING_LABEL = (0,
|
|
4429
|
+
var React71 = __toESM(require("react"));
|
|
4430
|
+
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
4431
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
4432
|
+
var MARGIN_LABEL = (0, import_i18n44.__)("Margin", "elementor");
|
|
4433
|
+
var PADDING_LABEL = (0, import_i18n44.__)("Padding", "elementor");
|
|
4381
4434
|
var SpacingSection = () => {
|
|
4382
4435
|
const { isSiteRtl } = useDirection();
|
|
4383
|
-
return /* @__PURE__ */
|
|
4384
|
-
|
|
4436
|
+
return /* @__PURE__ */ React71.createElement(SectionContent, null, /* @__PURE__ */ React71.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React71.createElement(
|
|
4437
|
+
import_editor_controls38.LinkedDimensionsControl,
|
|
4385
4438
|
{
|
|
4386
4439
|
label: MARGIN_LABEL,
|
|
4387
4440
|
isSiteRtl,
|
|
4388
4441
|
extendedOptions: ["auto"],
|
|
4389
4442
|
min: -Number.MAX_SAFE_INTEGER
|
|
4390
4443
|
}
|
|
4391
|
-
)), /* @__PURE__ */
|
|
4444
|
+
)), /* @__PURE__ */ React71.createElement(PanelDivider, null), /* @__PURE__ */ React71.createElement(StylesField, { bind: "padding", propDisplayName: PADDING_LABEL }, /* @__PURE__ */ React71.createElement(import_editor_controls38.LinkedDimensionsControl, { label: PADDING_LABEL, isSiteRtl })));
|
|
4392
4445
|
};
|
|
4393
4446
|
|
|
4394
4447
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
4395
|
-
var
|
|
4448
|
+
var React87 = __toESM(require("react"));
|
|
4396
4449
|
|
|
4397
4450
|
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
4398
|
-
var
|
|
4399
|
-
var
|
|
4400
|
-
var
|
|
4401
|
-
var COLUMN_COUNT_LABEL = (0,
|
|
4451
|
+
var React72 = __toESM(require("react"));
|
|
4452
|
+
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
4453
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
4454
|
+
var COLUMN_COUNT_LABEL = (0, import_i18n45.__)("Columns", "elementor");
|
|
4402
4455
|
var ColumnCountField = () => {
|
|
4403
|
-
return /* @__PURE__ */
|
|
4456
|
+
return /* @__PURE__ */ React72.createElement(StylesField, { bind: "column-count", propDisplayName: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React72.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React72.createElement(import_editor_controls39.NumberControl, { shouldForceInt: true, min: 0, step: 1 })));
|
|
4404
4457
|
};
|
|
4405
4458
|
|
|
4406
4459
|
// src/components/style-sections/typography-section/column-gap-field.tsx
|
|
4407
|
-
var
|
|
4460
|
+
var React73 = __toESM(require("react"));
|
|
4408
4461
|
var import_react32 = require("react");
|
|
4409
|
-
var
|
|
4410
|
-
var
|
|
4411
|
-
var COLUMN_GAP_LABEL = (0,
|
|
4462
|
+
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
4463
|
+
var import_i18n46 = require("@wordpress/i18n");
|
|
4464
|
+
var COLUMN_GAP_LABEL = (0, import_i18n46.__)("Column gap", "elementor");
|
|
4412
4465
|
var ColumnGapField = () => {
|
|
4413
4466
|
const rowRef = (0, import_react32.useRef)(null);
|
|
4414
|
-
return /* @__PURE__ */
|
|
4467
|
+
return /* @__PURE__ */ React73.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React73.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React73.createElement(import_editor_controls40.SizeControl, { anchorRef: rowRef })));
|
|
4415
4468
|
};
|
|
4416
4469
|
|
|
4417
4470
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
4418
|
-
var
|
|
4419
|
-
var
|
|
4420
|
-
var
|
|
4421
|
-
var FONT_FAMILY_LABEL = (0,
|
|
4471
|
+
var React74 = __toESM(require("react"));
|
|
4472
|
+
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
4473
|
+
var import_i18n47 = require("@wordpress/i18n");
|
|
4474
|
+
var FONT_FAMILY_LABEL = (0, import_i18n47.__)("Font family", "elementor");
|
|
4422
4475
|
var FontFamilyField = () => {
|
|
4423
4476
|
const fontFamilies = useFontFamilies();
|
|
4424
4477
|
const sectionWidth = useSectionWidth();
|
|
4425
4478
|
if (fontFamilies.length === 0) {
|
|
4426
4479
|
return null;
|
|
4427
4480
|
}
|
|
4428
|
-
return /* @__PURE__ */
|
|
4481
|
+
return /* @__PURE__ */ React74.createElement(StylesField, { bind: "font-family", propDisplayName: FONT_FAMILY_LABEL }, /* @__PURE__ */ React74.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ React74.createElement(import_editor_controls41.FontFamilyControl, { fontFamilies, sectionWidth })));
|
|
4429
4482
|
};
|
|
4430
4483
|
|
|
4431
4484
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
4432
|
-
var
|
|
4485
|
+
var React75 = __toESM(require("react"));
|
|
4433
4486
|
var import_react33 = require("react");
|
|
4434
|
-
var
|
|
4435
|
-
var
|
|
4436
|
-
var FONT_SIZE_LABEL = (0,
|
|
4487
|
+
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
4488
|
+
var import_i18n48 = require("@wordpress/i18n");
|
|
4489
|
+
var FONT_SIZE_LABEL = (0, import_i18n48.__)("Font size", "elementor");
|
|
4437
4490
|
var FontSizeField = () => {
|
|
4438
4491
|
const rowRef = (0, import_react33.useRef)(null);
|
|
4439
|
-
return /* @__PURE__ */
|
|
4492
|
+
return /* @__PURE__ */ React75.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React75.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React75.createElement(import_editor_controls42.SizeControl, { anchorRef: rowRef })));
|
|
4440
4493
|
};
|
|
4441
4494
|
|
|
4442
4495
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
4443
|
-
var
|
|
4444
|
-
var
|
|
4496
|
+
var React76 = __toESM(require("react"));
|
|
4497
|
+
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
4445
4498
|
var import_icons19 = require("@elementor/icons");
|
|
4446
|
-
var
|
|
4447
|
-
var FONT_STYLE_LABEL = (0,
|
|
4499
|
+
var import_i18n49 = require("@wordpress/i18n");
|
|
4500
|
+
var FONT_STYLE_LABEL = (0, import_i18n49.__)("Font style", "elementor");
|
|
4448
4501
|
var options7 = [
|
|
4449
4502
|
{
|
|
4450
4503
|
value: "normal",
|
|
4451
|
-
label: (0,
|
|
4452
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4504
|
+
label: (0, import_i18n49.__)("Normal", "elementor"),
|
|
4505
|
+
renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(import_icons19.MinusIcon, { fontSize: size }),
|
|
4453
4506
|
showTooltip: true
|
|
4454
4507
|
},
|
|
4455
4508
|
{
|
|
4456
4509
|
value: "italic",
|
|
4457
|
-
label: (0,
|
|
4458
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4510
|
+
label: (0, import_i18n49.__)("Italic", "elementor"),
|
|
4511
|
+
renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(import_icons19.ItalicIcon, { fontSize: size }),
|
|
4459
4512
|
showTooltip: true
|
|
4460
4513
|
}
|
|
4461
4514
|
];
|
|
4462
4515
|
var FontStyleField = () => {
|
|
4463
|
-
return /* @__PURE__ */
|
|
4516
|
+
return /* @__PURE__ */ React76.createElement(StylesField, { bind: "font-style", propDisplayName: FONT_STYLE_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: FONT_STYLE_LABEL }, /* @__PURE__ */ React76.createElement(import_editor_controls43.ToggleControl, { options: options7 })));
|
|
4464
4517
|
};
|
|
4465
4518
|
|
|
4466
4519
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
4467
|
-
var
|
|
4468
|
-
var
|
|
4469
|
-
var
|
|
4470
|
-
var FONT_WEIGHT_LABEL = (0,
|
|
4520
|
+
var React77 = __toESM(require("react"));
|
|
4521
|
+
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
4522
|
+
var import_i18n50 = require("@wordpress/i18n");
|
|
4523
|
+
var FONT_WEIGHT_LABEL = (0, import_i18n50.__)("Font weight", "elementor");
|
|
4471
4524
|
var fontWeightOptions = [
|
|
4472
|
-
{ value: "100", label: (0,
|
|
4473
|
-
{ value: "200", label: (0,
|
|
4474
|
-
{ value: "300", label: (0,
|
|
4475
|
-
{ value: "400", label: (0,
|
|
4476
|
-
{ value: "500", label: (0,
|
|
4477
|
-
{ value: "600", label: (0,
|
|
4478
|
-
{ value: "700", label: (0,
|
|
4479
|
-
{ value: "800", label: (0,
|
|
4480
|
-
{ value: "900", label: (0,
|
|
4525
|
+
{ value: "100", label: (0, import_i18n50.__)("100 - Thin", "elementor") },
|
|
4526
|
+
{ value: "200", label: (0, import_i18n50.__)("200 - Extra light", "elementor") },
|
|
4527
|
+
{ value: "300", label: (0, import_i18n50.__)("300 - Light", "elementor") },
|
|
4528
|
+
{ value: "400", label: (0, import_i18n50.__)("400 - Normal", "elementor") },
|
|
4529
|
+
{ value: "500", label: (0, import_i18n50.__)("500 - Medium", "elementor") },
|
|
4530
|
+
{ value: "600", label: (0, import_i18n50.__)("600 - Semi bold", "elementor") },
|
|
4531
|
+
{ value: "700", label: (0, import_i18n50.__)("700 - Bold", "elementor") },
|
|
4532
|
+
{ value: "800", label: (0, import_i18n50.__)("800 - Extra bold", "elementor") },
|
|
4533
|
+
{ value: "900", label: (0, import_i18n50.__)("900 - Black", "elementor") }
|
|
4481
4534
|
];
|
|
4482
4535
|
var FontWeightField = () => {
|
|
4483
|
-
return /* @__PURE__ */
|
|
4536
|
+
return /* @__PURE__ */ React77.createElement(StylesField, { bind: "font-weight", propDisplayName: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React77.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React77.createElement(import_editor_controls44.SelectControl, { options: fontWeightOptions })));
|
|
4484
4537
|
};
|
|
4485
4538
|
|
|
4486
4539
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
4487
|
-
var
|
|
4540
|
+
var React78 = __toESM(require("react"));
|
|
4488
4541
|
var import_react34 = require("react");
|
|
4489
|
-
var
|
|
4490
|
-
var
|
|
4491
|
-
var LETTER_SPACING_LABEL = (0,
|
|
4542
|
+
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
4543
|
+
var import_i18n51 = require("@wordpress/i18n");
|
|
4544
|
+
var LETTER_SPACING_LABEL = (0, import_i18n51.__)("Letter spacing", "elementor");
|
|
4492
4545
|
var LetterSpacingField = () => {
|
|
4493
4546
|
const rowRef = (0, import_react34.useRef)(null);
|
|
4494
|
-
return /* @__PURE__ */
|
|
4547
|
+
return /* @__PURE__ */ React78.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React78.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React78.createElement(import_editor_controls45.SizeControl, { anchorRef: rowRef })));
|
|
4495
4548
|
};
|
|
4496
4549
|
|
|
4497
4550
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
4498
|
-
var
|
|
4551
|
+
var React79 = __toESM(require("react"));
|
|
4499
4552
|
var import_react35 = require("react");
|
|
4500
|
-
var
|
|
4501
|
-
var
|
|
4502
|
-
var LINE_HEIGHT_LABEL = (0,
|
|
4553
|
+
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
4554
|
+
var import_i18n52 = require("@wordpress/i18n");
|
|
4555
|
+
var LINE_HEIGHT_LABEL = (0, import_i18n52.__)("Line height", "elementor");
|
|
4503
4556
|
var LineHeightField = () => {
|
|
4504
4557
|
const rowRef = (0, import_react35.useRef)(null);
|
|
4505
|
-
return /* @__PURE__ */
|
|
4558
|
+
return /* @__PURE__ */ React79.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React79.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React79.createElement(import_editor_controls46.SizeControl, { anchorRef: rowRef })));
|
|
4506
4559
|
};
|
|
4507
4560
|
|
|
4508
4561
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
4509
|
-
var
|
|
4510
|
-
var
|
|
4562
|
+
var React80 = __toESM(require("react"));
|
|
4563
|
+
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
4511
4564
|
var import_icons20 = require("@elementor/icons");
|
|
4512
|
-
var
|
|
4513
|
-
var
|
|
4514
|
-
var TEXT_ALIGNMENT_LABEL = (0,
|
|
4515
|
-
var AlignStartIcon = (0,
|
|
4516
|
-
var AlignEndIcon = (0,
|
|
4565
|
+
var import_ui43 = require("@elementor/ui");
|
|
4566
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
4567
|
+
var TEXT_ALIGNMENT_LABEL = (0, import_i18n53.__)("Text align", "elementor");
|
|
4568
|
+
var AlignStartIcon = (0, import_ui43.withDirection)(import_icons20.AlignLeftIcon);
|
|
4569
|
+
var AlignEndIcon = (0, import_ui43.withDirection)(import_icons20.AlignRightIcon);
|
|
4517
4570
|
var options8 = [
|
|
4518
4571
|
{
|
|
4519
4572
|
value: "start",
|
|
4520
|
-
label: (0,
|
|
4521
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4573
|
+
label: (0, import_i18n53.__)("Start", "elementor"),
|
|
4574
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(AlignStartIcon, { fontSize: size }),
|
|
4522
4575
|
showTooltip: true
|
|
4523
4576
|
},
|
|
4524
4577
|
{
|
|
4525
4578
|
value: "center",
|
|
4526
|
-
label: (0,
|
|
4527
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4579
|
+
label: (0, import_i18n53.__)("Center", "elementor"),
|
|
4580
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(import_icons20.AlignCenterIcon, { fontSize: size }),
|
|
4528
4581
|
showTooltip: true
|
|
4529
4582
|
},
|
|
4530
4583
|
{
|
|
4531
4584
|
value: "end",
|
|
4532
|
-
label: (0,
|
|
4533
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4585
|
+
label: (0, import_i18n53.__)("End", "elementor"),
|
|
4586
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(AlignEndIcon, { fontSize: size }),
|
|
4534
4587
|
showTooltip: true
|
|
4535
4588
|
},
|
|
4536
4589
|
{
|
|
4537
4590
|
value: "justify",
|
|
4538
|
-
label: (0,
|
|
4539
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4591
|
+
label: (0, import_i18n53.__)("Justify", "elementor"),
|
|
4592
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(import_icons20.AlignJustifiedIcon, { fontSize: size }),
|
|
4540
4593
|
showTooltip: true
|
|
4541
4594
|
}
|
|
4542
4595
|
];
|
|
4543
4596
|
var TextAlignmentField = () => {
|
|
4544
|
-
return /* @__PURE__ */
|
|
4597
|
+
return /* @__PURE__ */ React80.createElement(StylesField, { bind: "text-align", propDisplayName: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React80.createElement(UiProviders, null, /* @__PURE__ */ React80.createElement(StylesFieldLayout, { label: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React80.createElement(import_editor_controls47.ToggleControl, { options: options8 }))));
|
|
4545
4598
|
};
|
|
4546
4599
|
|
|
4547
4600
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
4548
|
-
var
|
|
4549
|
-
var
|
|
4550
|
-
var
|
|
4551
|
-
var TEXT_COLOR_LABEL = (0,
|
|
4601
|
+
var React81 = __toESM(require("react"));
|
|
4602
|
+
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
4603
|
+
var import_i18n54 = require("@wordpress/i18n");
|
|
4604
|
+
var TEXT_COLOR_LABEL = (0, import_i18n54.__)("Text color", "elementor");
|
|
4552
4605
|
var TextColorField = () => {
|
|
4553
|
-
return /* @__PURE__ */
|
|
4606
|
+
return /* @__PURE__ */ React81.createElement(StylesField, { bind: "color", propDisplayName: TEXT_COLOR_LABEL }, /* @__PURE__ */ React81.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ React81.createElement(import_editor_controls48.ColorControl, null)));
|
|
4554
4607
|
};
|
|
4555
4608
|
|
|
4556
4609
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
4557
|
-
var
|
|
4558
|
-
var
|
|
4610
|
+
var React82 = __toESM(require("react"));
|
|
4611
|
+
var import_editor_controls49 = require("@elementor/editor-controls");
|
|
4559
4612
|
var import_icons21 = require("@elementor/icons");
|
|
4560
|
-
var
|
|
4561
|
-
var TEXT_DECORATION_LABEL = (0,
|
|
4613
|
+
var import_i18n55 = require("@wordpress/i18n");
|
|
4614
|
+
var TEXT_DECORATION_LABEL = (0, import_i18n55.__)("Line decoration", "elementor");
|
|
4562
4615
|
var options9 = [
|
|
4563
4616
|
{
|
|
4564
4617
|
value: "none",
|
|
4565
|
-
label: (0,
|
|
4566
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4618
|
+
label: (0, import_i18n55.__)("None", "elementor"),
|
|
4619
|
+
renderContent: ({ size }) => /* @__PURE__ */ React82.createElement(import_icons21.MinusIcon, { fontSize: size }),
|
|
4567
4620
|
showTooltip: true,
|
|
4568
4621
|
exclusive: true
|
|
4569
4622
|
},
|
|
4570
4623
|
{
|
|
4571
4624
|
value: "underline",
|
|
4572
|
-
label: (0,
|
|
4573
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4625
|
+
label: (0, import_i18n55.__)("Underline", "elementor"),
|
|
4626
|
+
renderContent: ({ size }) => /* @__PURE__ */ React82.createElement(import_icons21.UnderlineIcon, { fontSize: size }),
|
|
4574
4627
|
showTooltip: true
|
|
4575
4628
|
},
|
|
4576
4629
|
{
|
|
4577
4630
|
value: "line-through",
|
|
4578
|
-
label: (0,
|
|
4579
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4631
|
+
label: (0, import_i18n55.__)("Line-through", "elementor"),
|
|
4632
|
+
renderContent: ({ size }) => /* @__PURE__ */ React82.createElement(import_icons21.StrikethroughIcon, { fontSize: size }),
|
|
4580
4633
|
showTooltip: true
|
|
4581
4634
|
},
|
|
4582
4635
|
{
|
|
4583
4636
|
value: "overline",
|
|
4584
|
-
label: (0,
|
|
4585
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4637
|
+
label: (0, import_i18n55.__)("Overline", "elementor"),
|
|
4638
|
+
renderContent: ({ size }) => /* @__PURE__ */ React82.createElement(import_icons21.OverlineIcon, { fontSize: size }),
|
|
4586
4639
|
showTooltip: true
|
|
4587
4640
|
}
|
|
4588
4641
|
];
|
|
4589
|
-
var TextDecorationField = () => /* @__PURE__ */
|
|
4642
|
+
var TextDecorationField = () => /* @__PURE__ */ React82.createElement(StylesField, { bind: "text-decoration", propDisplayName: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React82.createElement(StylesFieldLayout, { label: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React82.createElement(import_editor_controls49.ToggleControl, { options: options9, exclusive: false })));
|
|
4590
4643
|
|
|
4591
4644
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
4592
|
-
var
|
|
4593
|
-
var
|
|
4645
|
+
var React83 = __toESM(require("react"));
|
|
4646
|
+
var import_editor_controls50 = require("@elementor/editor-controls");
|
|
4594
4647
|
var import_icons22 = require("@elementor/icons");
|
|
4595
|
-
var
|
|
4596
|
-
var TEXT_DIRECTION_LABEL = (0,
|
|
4648
|
+
var import_i18n56 = require("@wordpress/i18n");
|
|
4649
|
+
var TEXT_DIRECTION_LABEL = (0, import_i18n56.__)("Direction", "elementor");
|
|
4597
4650
|
var options10 = [
|
|
4598
4651
|
{
|
|
4599
4652
|
value: "ltr",
|
|
4600
|
-
label: (0,
|
|
4601
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4653
|
+
label: (0, import_i18n56.__)("Left to right", "elementor"),
|
|
4654
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(import_icons22.TextDirectionLtrIcon, { fontSize: size }),
|
|
4602
4655
|
showTooltip: true
|
|
4603
4656
|
},
|
|
4604
4657
|
{
|
|
4605
4658
|
value: "rtl",
|
|
4606
|
-
label: (0,
|
|
4607
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4659
|
+
label: (0, import_i18n56.__)("Right to left", "elementor"),
|
|
4660
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(import_icons22.TextDirectionRtlIcon, { fontSize: size }),
|
|
4608
4661
|
showTooltip: true
|
|
4609
4662
|
}
|
|
4610
4663
|
];
|
|
4611
4664
|
var TextDirectionField = () => {
|
|
4612
|
-
return /* @__PURE__ */
|
|
4665
|
+
return /* @__PURE__ */ React83.createElement(StylesField, { bind: "direction", propDisplayName: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React83.createElement(StylesFieldLayout, { label: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React83.createElement(import_editor_controls50.ToggleControl, { options: options10 })));
|
|
4613
4666
|
};
|
|
4614
4667
|
|
|
4615
4668
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
4616
|
-
var
|
|
4617
|
-
var
|
|
4618
|
-
var
|
|
4669
|
+
var React84 = __toESM(require("react"));
|
|
4670
|
+
var import_editor_controls51 = require("@elementor/editor-controls");
|
|
4671
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
4619
4672
|
var initTextStroke = {
|
|
4620
4673
|
$$type: "stroke",
|
|
4621
4674
|
value: {
|
|
@@ -4632,7 +4685,7 @@ var initTextStroke = {
|
|
|
4632
4685
|
}
|
|
4633
4686
|
}
|
|
4634
4687
|
};
|
|
4635
|
-
var TEXT_STROKE_LABEL = (0,
|
|
4688
|
+
var TEXT_STROKE_LABEL = (0, import_i18n57.__)("Text stroke", "elementor");
|
|
4636
4689
|
var TextStrokeField = () => {
|
|
4637
4690
|
const { value, setValue, canEdit } = useStylesField("stroke", {
|
|
4638
4691
|
history: { propDisplayName: TEXT_STROKE_LABEL }
|
|
@@ -4644,67 +4697,67 @@ var TextStrokeField = () => {
|
|
|
4644
4697
|
setValue(null);
|
|
4645
4698
|
};
|
|
4646
4699
|
const hasTextStroke = Boolean(value);
|
|
4647
|
-
return /* @__PURE__ */
|
|
4700
|
+
return /* @__PURE__ */ React84.createElement(StylesField, { bind: "stroke", propDisplayName: TEXT_STROKE_LABEL }, /* @__PURE__ */ React84.createElement(
|
|
4648
4701
|
AddOrRemoveContent,
|
|
4649
4702
|
{
|
|
4650
4703
|
isAdded: hasTextStroke,
|
|
4651
4704
|
onAdd: addTextStroke,
|
|
4652
4705
|
onRemove: removeTextStroke,
|
|
4653
4706
|
disabled: !canEdit,
|
|
4654
|
-
renderLabel: () => /* @__PURE__ */
|
|
4707
|
+
renderLabel: () => /* @__PURE__ */ React84.createElement(ControlLabel, null, TEXT_STROKE_LABEL)
|
|
4655
4708
|
},
|
|
4656
|
-
/* @__PURE__ */
|
|
4709
|
+
/* @__PURE__ */ React84.createElement(import_editor_controls51.StrokeControl, null)
|
|
4657
4710
|
));
|
|
4658
4711
|
};
|
|
4659
4712
|
|
|
4660
4713
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
4661
|
-
var
|
|
4662
|
-
var
|
|
4714
|
+
var React85 = __toESM(require("react"));
|
|
4715
|
+
var import_editor_controls52 = require("@elementor/editor-controls");
|
|
4663
4716
|
var import_icons23 = require("@elementor/icons");
|
|
4664
|
-
var
|
|
4665
|
-
var TEXT_TRANSFORM_LABEL = (0,
|
|
4717
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
4718
|
+
var TEXT_TRANSFORM_LABEL = (0, import_i18n58.__)("Text transform", "elementor");
|
|
4666
4719
|
var options11 = [
|
|
4667
4720
|
{
|
|
4668
4721
|
value: "none",
|
|
4669
|
-
label: (0,
|
|
4670
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4722
|
+
label: (0, import_i18n58.__)("None", "elementor"),
|
|
4723
|
+
renderContent: ({ size }) => /* @__PURE__ */ React85.createElement(import_icons23.MinusIcon, { fontSize: size }),
|
|
4671
4724
|
showTooltip: true
|
|
4672
4725
|
},
|
|
4673
4726
|
{
|
|
4674
4727
|
value: "capitalize",
|
|
4675
|
-
label: (0,
|
|
4676
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4728
|
+
label: (0, import_i18n58.__)("Capitalize", "elementor"),
|
|
4729
|
+
renderContent: ({ size }) => /* @__PURE__ */ React85.createElement(import_icons23.LetterCaseIcon, { fontSize: size }),
|
|
4677
4730
|
showTooltip: true
|
|
4678
4731
|
},
|
|
4679
4732
|
{
|
|
4680
4733
|
value: "uppercase",
|
|
4681
|
-
label: (0,
|
|
4682
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4734
|
+
label: (0, import_i18n58.__)("Uppercase", "elementor"),
|
|
4735
|
+
renderContent: ({ size }) => /* @__PURE__ */ React85.createElement(import_icons23.LetterCaseUpperIcon, { fontSize: size }),
|
|
4683
4736
|
showTooltip: true
|
|
4684
4737
|
},
|
|
4685
4738
|
{
|
|
4686
4739
|
value: "lowercase",
|
|
4687
|
-
label: (0,
|
|
4688
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4740
|
+
label: (0, import_i18n58.__)("Lowercase", "elementor"),
|
|
4741
|
+
renderContent: ({ size }) => /* @__PURE__ */ React85.createElement(import_icons23.LetterCaseLowerIcon, { fontSize: size }),
|
|
4689
4742
|
showTooltip: true
|
|
4690
4743
|
}
|
|
4691
4744
|
];
|
|
4692
|
-
var TransformField = () => /* @__PURE__ */
|
|
4745
|
+
var TransformField = () => /* @__PURE__ */ React85.createElement(StylesField, { bind: "text-transform", propDisplayName: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React85.createElement(StylesFieldLayout, { label: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React85.createElement(import_editor_controls52.ToggleControl, { options: options11 })));
|
|
4693
4746
|
|
|
4694
4747
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
4695
|
-
var
|
|
4748
|
+
var React86 = __toESM(require("react"));
|
|
4696
4749
|
var import_react36 = require("react");
|
|
4697
|
-
var
|
|
4698
|
-
var
|
|
4699
|
-
var WORD_SPACING_LABEL = (0,
|
|
4750
|
+
var import_editor_controls53 = require("@elementor/editor-controls");
|
|
4751
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
4752
|
+
var WORD_SPACING_LABEL = (0, import_i18n59.__)("Word spacing", "elementor");
|
|
4700
4753
|
var WordSpacingField = () => {
|
|
4701
4754
|
const rowRef = (0, import_react36.useRef)(null);
|
|
4702
|
-
return /* @__PURE__ */
|
|
4755
|
+
return /* @__PURE__ */ React86.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React86.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React86.createElement(import_editor_controls53.SizeControl, { anchorRef: rowRef })));
|
|
4703
4756
|
};
|
|
4704
4757
|
|
|
4705
4758
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
4706
4759
|
var TypographySection = () => {
|
|
4707
|
-
return /* @__PURE__ */
|
|
4760
|
+
return /* @__PURE__ */ React87.createElement(SectionContent, null, /* @__PURE__ */ React87.createElement(FontFamilyField, null), /* @__PURE__ */ React87.createElement(FontWeightField, null), /* @__PURE__ */ React87.createElement(FontSizeField, null), /* @__PURE__ */ React87.createElement(PanelDivider, null), /* @__PURE__ */ React87.createElement(TextAlignmentField, null), /* @__PURE__ */ React87.createElement(TextColorField, null), /* @__PURE__ */ React87.createElement(
|
|
4708
4761
|
StyleTabCollapsibleContent,
|
|
4709
4762
|
{
|
|
4710
4763
|
fields: [
|
|
@@ -4719,18 +4772,27 @@ var TypographySection = () => {
|
|
|
4719
4772
|
"stroke"
|
|
4720
4773
|
]
|
|
4721
4774
|
},
|
|
4722
|
-
/* @__PURE__ */
|
|
4775
|
+
/* @__PURE__ */ React87.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React87.createElement(LineHeightField, null), /* @__PURE__ */ React87.createElement(LetterSpacingField, null), /* @__PURE__ */ React87.createElement(WordSpacingField, null), /* @__PURE__ */ React87.createElement(ColumnCountField, null), /* @__PURE__ */ React87.createElement(ColumnGapField, null), /* @__PURE__ */ React87.createElement(PanelDivider, null), /* @__PURE__ */ React87.createElement(TextDecorationField, null), /* @__PURE__ */ React87.createElement(TransformField, null), /* @__PURE__ */ React87.createElement(TextDirectionField, null), /* @__PURE__ */ React87.createElement(FontStyleField, null), /* @__PURE__ */ React87.createElement(TextStrokeField, null))
|
|
4723
4776
|
));
|
|
4724
4777
|
};
|
|
4725
4778
|
|
|
4726
4779
|
// src/components/style-tab-section.tsx
|
|
4727
|
-
var
|
|
4728
|
-
var StyleTabSection = ({ section, fields = [] }) => {
|
|
4780
|
+
var React88 = __toESM(require("react"));
|
|
4781
|
+
var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
4729
4782
|
const { component, name, title } = section;
|
|
4730
4783
|
const tabDefaults = useDefaultPanelSettings();
|
|
4731
4784
|
const SectionComponent = component;
|
|
4732
4785
|
const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes(name);
|
|
4733
|
-
return /* @__PURE__ */
|
|
4786
|
+
return /* @__PURE__ */ React88.createElement(
|
|
4787
|
+
Section,
|
|
4788
|
+
{
|
|
4789
|
+
title,
|
|
4790
|
+
defaultExpanded: isExpanded,
|
|
4791
|
+
titleEnd: getStylesInheritanceIndicators(fields),
|
|
4792
|
+
unmountOnExit
|
|
4793
|
+
},
|
|
4794
|
+
/* @__PURE__ */ React88.createElement(SectionComponent, null)
|
|
4795
|
+
);
|
|
4734
4796
|
};
|
|
4735
4797
|
|
|
4736
4798
|
// src/components/style-tab.tsx
|
|
@@ -4748,7 +4810,7 @@ var StyleTab = () => {
|
|
|
4748
4810
|
const [activeStyleState, setActiveStyleState] = (0, import_react37.useState)(null);
|
|
4749
4811
|
const breakpoint = (0, import_editor_responsive3.useActiveBreakpoint)();
|
|
4750
4812
|
const shouldRenderCustomCss = (0, import_editor_v1_adapters6.isExperimentActive)(import_editor_v1_adapters6.EXPERIMENTAL_FEATURES.CUSTOM_CSS);
|
|
4751
|
-
return /* @__PURE__ */
|
|
4813
|
+
return /* @__PURE__ */ React89.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React89.createElement(
|
|
4752
4814
|
StyleProvider,
|
|
4753
4815
|
{
|
|
4754
4816
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -4759,13 +4821,13 @@ var StyleTab = () => {
|
|
|
4759
4821
|
},
|
|
4760
4822
|
setMetaState: setActiveStyleState
|
|
4761
4823
|
},
|
|
4762
|
-
/* @__PURE__ */
|
|
4824
|
+
/* @__PURE__ */ React89.createElement(import_session6.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React89.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React89.createElement(ClassesHeader, null, /* @__PURE__ */ React89.createElement(CssClassSelector, null), /* @__PURE__ */ React89.createElement(import_ui44.Divider, null)), /* @__PURE__ */ React89.createElement(SectionsList, null, /* @__PURE__ */ React89.createElement(
|
|
4763
4825
|
StyleTabSection,
|
|
4764
4826
|
{
|
|
4765
4827
|
section: {
|
|
4766
4828
|
component: LayoutSection,
|
|
4767
4829
|
name: "Layout",
|
|
4768
|
-
title: (0,
|
|
4830
|
+
title: (0, import_i18n60.__)("Layout", "elementor")
|
|
4769
4831
|
},
|
|
4770
4832
|
fields: [
|
|
4771
4833
|
"display",
|
|
@@ -4778,23 +4840,23 @@ var StyleTab = () => {
|
|
|
4778
4840
|
"gap"
|
|
4779
4841
|
]
|
|
4780
4842
|
}
|
|
4781
|
-
), /* @__PURE__ */
|
|
4843
|
+
), /* @__PURE__ */ React89.createElement(
|
|
4782
4844
|
StyleTabSection,
|
|
4783
4845
|
{
|
|
4784
4846
|
section: {
|
|
4785
4847
|
component: SpacingSection,
|
|
4786
4848
|
name: "Spacing",
|
|
4787
|
-
title: (0,
|
|
4849
|
+
title: (0, import_i18n60.__)("Spacing", "elementor")
|
|
4788
4850
|
},
|
|
4789
4851
|
fields: ["margin", "padding"]
|
|
4790
4852
|
}
|
|
4791
|
-
), /* @__PURE__ */
|
|
4853
|
+
), /* @__PURE__ */ React89.createElement(
|
|
4792
4854
|
StyleTabSection,
|
|
4793
4855
|
{
|
|
4794
4856
|
section: {
|
|
4795
4857
|
component: SizeSection,
|
|
4796
4858
|
name: "Size",
|
|
4797
|
-
title: (0,
|
|
4859
|
+
title: (0, import_i18n60.__)("Size", "elementor")
|
|
4798
4860
|
},
|
|
4799
4861
|
fields: [
|
|
4800
4862
|
"width",
|
|
@@ -4808,23 +4870,23 @@ var StyleTab = () => {
|
|
|
4808
4870
|
"object-fit"
|
|
4809
4871
|
]
|
|
4810
4872
|
}
|
|
4811
|
-
), /* @__PURE__ */
|
|
4873
|
+
), /* @__PURE__ */ React89.createElement(
|
|
4812
4874
|
StyleTabSection,
|
|
4813
4875
|
{
|
|
4814
4876
|
section: {
|
|
4815
4877
|
component: PositionSection,
|
|
4816
4878
|
name: "Position",
|
|
4817
|
-
title: (0,
|
|
4879
|
+
title: (0, import_i18n60.__)("Position", "elementor")
|
|
4818
4880
|
},
|
|
4819
4881
|
fields: ["position", "z-index", "scroll-margin-top"]
|
|
4820
4882
|
}
|
|
4821
|
-
), /* @__PURE__ */
|
|
4883
|
+
), /* @__PURE__ */ React89.createElement(
|
|
4822
4884
|
StyleTabSection,
|
|
4823
4885
|
{
|
|
4824
4886
|
section: {
|
|
4825
4887
|
component: TypographySection,
|
|
4826
4888
|
name: "Typography",
|
|
4827
|
-
title: (0,
|
|
4889
|
+
title: (0, import_i18n60.__)("Typography", "elementor")
|
|
4828
4890
|
},
|
|
4829
4891
|
fields: [
|
|
4830
4892
|
"font-family",
|
|
@@ -4843,33 +4905,33 @@ var StyleTab = () => {
|
|
|
4843
4905
|
"stroke"
|
|
4844
4906
|
]
|
|
4845
4907
|
}
|
|
4846
|
-
), /* @__PURE__ */
|
|
4908
|
+
), /* @__PURE__ */ React89.createElement(
|
|
4847
4909
|
StyleTabSection,
|
|
4848
4910
|
{
|
|
4849
4911
|
section: {
|
|
4850
4912
|
component: BackgroundSection,
|
|
4851
4913
|
name: "Background",
|
|
4852
|
-
title: (0,
|
|
4914
|
+
title: (0, import_i18n60.__)("Background", "elementor")
|
|
4853
4915
|
},
|
|
4854
4916
|
fields: ["background"]
|
|
4855
4917
|
}
|
|
4856
|
-
), /* @__PURE__ */
|
|
4918
|
+
), /* @__PURE__ */ React89.createElement(
|
|
4857
4919
|
StyleTabSection,
|
|
4858
4920
|
{
|
|
4859
4921
|
section: {
|
|
4860
4922
|
component: BorderSection,
|
|
4861
4923
|
name: "Border",
|
|
4862
|
-
title: (0,
|
|
4924
|
+
title: (0, import_i18n60.__)("Border", "elementor")
|
|
4863
4925
|
},
|
|
4864
4926
|
fields: ["border-radius", "border-width", "border-color", "border-style"]
|
|
4865
4927
|
}
|
|
4866
|
-
), /* @__PURE__ */
|
|
4928
|
+
), /* @__PURE__ */ React89.createElement(
|
|
4867
4929
|
StyleTabSection,
|
|
4868
4930
|
{
|
|
4869
4931
|
section: {
|
|
4870
4932
|
component: EffectsSection,
|
|
4871
4933
|
name: "Effects",
|
|
4872
|
-
title: (0,
|
|
4934
|
+
title: (0, import_i18n60.__)("Effects", "elementor")
|
|
4873
4935
|
},
|
|
4874
4936
|
fields: [
|
|
4875
4937
|
"box-shadow",
|
|
@@ -4881,21 +4943,23 @@ var StyleTab = () => {
|
|
|
4881
4943
|
"transition"
|
|
4882
4944
|
]
|
|
4883
4945
|
}
|
|
4884
|
-
), shouldRenderCustomCss && /* @__PURE__ */
|
|
4946
|
+
), shouldRenderCustomCss && /* @__PURE__ */ React89.createElement(
|
|
4885
4947
|
StyleTabSection,
|
|
4886
4948
|
{
|
|
4887
4949
|
section: {
|
|
4888
4950
|
component: CustomCss,
|
|
4889
4951
|
name: "Custom CSS",
|
|
4890
|
-
title: (0,
|
|
4891
|
-
}
|
|
4952
|
+
title: (0, import_i18n60.__)("Custom CSS", "elementor")
|
|
4953
|
+
},
|
|
4954
|
+
fields: ["custom_css"],
|
|
4955
|
+
unmountOnExit: false
|
|
4892
4956
|
}
|
|
4893
|
-
)), /* @__PURE__ */
|
|
4957
|
+
)), /* @__PURE__ */ React89.createElement(import_ui44.Box, { sx: { height: "150px" } })))
|
|
4894
4958
|
));
|
|
4895
4959
|
};
|
|
4896
4960
|
function ClassesHeader({ children }) {
|
|
4897
4961
|
const scrollDirection = useScrollDirection();
|
|
4898
|
-
return /* @__PURE__ */
|
|
4962
|
+
return /* @__PURE__ */ React89.createElement(import_ui44.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
4899
4963
|
}
|
|
4900
4964
|
function useCurrentClassesProp() {
|
|
4901
4965
|
const { elementType } = useElement();
|
|
@@ -4914,16 +4978,16 @@ var EditingPanelTabs = () => {
|
|
|
4914
4978
|
return (
|
|
4915
4979
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
4916
4980
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
4917
|
-
/* @__PURE__ */
|
|
4981
|
+
/* @__PURE__ */ React90.createElement(import_react38.Fragment, { key: element.id }, /* @__PURE__ */ React90.createElement(PanelTabContent, null))
|
|
4918
4982
|
);
|
|
4919
4983
|
};
|
|
4920
4984
|
var PanelTabContent = () => {
|
|
4921
4985
|
const editorDefaults = useDefaultPanelSettings();
|
|
4922
4986
|
const defaultComponentTab = editorDefaults.defaultTab;
|
|
4923
4987
|
const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
4924
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
4925
|
-
return /* @__PURE__ */
|
|
4926
|
-
|
|
4988
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui45.useTabs)(currentTab);
|
|
4989
|
+
return /* @__PURE__ */ React90.createElement(ScrollProvider, null, /* @__PURE__ */ React90.createElement(import_ui45.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React90.createElement(import_ui45.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React90.createElement(
|
|
4990
|
+
import_ui45.Tabs,
|
|
4927
4991
|
{
|
|
4928
4992
|
variant: "fullWidth",
|
|
4929
4993
|
size: "small",
|
|
@@ -4934,9 +4998,9 @@ var PanelTabContent = () => {
|
|
|
4934
4998
|
setCurrentTab(newValue);
|
|
4935
4999
|
}
|
|
4936
5000
|
},
|
|
4937
|
-
/* @__PURE__ */
|
|
4938
|
-
/* @__PURE__ */
|
|
4939
|
-
), /* @__PURE__ */
|
|
5001
|
+
/* @__PURE__ */ React90.createElement(import_ui45.Tab, { label: (0, import_i18n61.__)("General", "elementor"), ...getTabProps("settings") }),
|
|
5002
|
+
/* @__PURE__ */ React90.createElement(import_ui45.Tab, { label: (0, import_i18n61.__)("Style", "elementor"), ...getTabProps("style") })
|
|
5003
|
+
), /* @__PURE__ */ React90.createElement(import_ui45.Divider, null)), /* @__PURE__ */ React90.createElement(import_ui45.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React90.createElement(SettingsTab, null)), /* @__PURE__ */ React90.createElement(import_ui45.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React90.createElement(StyleTab, null))));
|
|
4940
5004
|
};
|
|
4941
5005
|
|
|
4942
5006
|
// src/components/editing-panel.tsx
|
|
@@ -4948,8 +5012,8 @@ var EditingPanel = () => {
|
|
|
4948
5012
|
if (!element || !elementType) {
|
|
4949
5013
|
return null;
|
|
4950
5014
|
}
|
|
4951
|
-
const panelTitle = (0,
|
|
4952
|
-
return /* @__PURE__ */
|
|
5015
|
+
const panelTitle = (0, import_i18n62.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
5016
|
+
return /* @__PURE__ */ React91.createElement(import_ui46.ErrorBoundary, { fallback: /* @__PURE__ */ React91.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React91.createElement(import_session7.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React91.createElement(import_editor_ui6.ThemeProvider, null, /* @__PURE__ */ React91.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React91.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React91.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React91.createElement(import_icons24.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React91.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React91.createElement(import_editor_controls54.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React91.createElement(import_editor_controls54.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React91.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React91.createElement(EditingPanelTabs, null)))))))));
|
|
4953
5017
|
};
|
|
4954
5018
|
|
|
4955
5019
|
// src/panel.ts
|
|
@@ -4989,11 +5053,11 @@ var EditingPanelHooks = () => {
|
|
|
4989
5053
|
|
|
4990
5054
|
// src/dynamics/init.ts
|
|
4991
5055
|
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
4992
|
-
var
|
|
5056
|
+
var import_editor_controls61 = require("@elementor/editor-controls");
|
|
4993
5057
|
|
|
4994
5058
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
4995
|
-
var
|
|
4996
|
-
var
|
|
5059
|
+
var React92 = __toESM(require("react"));
|
|
5060
|
+
var import_editor_controls56 = require("@elementor/editor-controls");
|
|
4997
5061
|
var import_editor_props17 = require("@elementor/editor-props");
|
|
4998
5062
|
var import_icons25 = require("@elementor/icons");
|
|
4999
5063
|
|
|
@@ -5002,7 +5066,7 @@ var import_react41 = require("react");
|
|
|
5002
5066
|
|
|
5003
5067
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
5004
5068
|
var import_react40 = require("react");
|
|
5005
|
-
var
|
|
5069
|
+
var import_editor_controls55 = require("@elementor/editor-controls");
|
|
5006
5070
|
|
|
5007
5071
|
// src/dynamics/sync/get-elementor-config.ts
|
|
5008
5072
|
var getElementorConfig2 = () => {
|
|
@@ -5048,7 +5112,7 @@ var dynamicPropTypeUtil = (0, import_editor_props16.createPropUtils)(
|
|
|
5048
5112
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
5049
5113
|
var usePropDynamicTags = () => {
|
|
5050
5114
|
let categories = [];
|
|
5051
|
-
const { propType } = (0,
|
|
5115
|
+
const { propType } = (0, import_editor_controls55.useBoundProp)();
|
|
5052
5116
|
if (propType) {
|
|
5053
5117
|
const propDynamicType = getDynamicPropType(propType);
|
|
5054
5118
|
categories = propDynamicType?.settings.categories || [];
|
|
@@ -5073,29 +5137,29 @@ var useDynamicTag = (tagName) => {
|
|
|
5073
5137
|
};
|
|
5074
5138
|
|
|
5075
5139
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
5076
|
-
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */
|
|
5140
|
+
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React92.createElement(import_icons25.DatabaseIcon, { fontSize: "tiny" });
|
|
5077
5141
|
var BackgroundControlDynamicTagLabel = ({ value }) => {
|
|
5078
|
-
const context = (0,
|
|
5079
|
-
return /* @__PURE__ */
|
|
5142
|
+
const context = (0, import_editor_controls56.useBoundProp)(import_editor_props17.backgroundImageOverlayPropTypeUtil);
|
|
5143
|
+
return /* @__PURE__ */ React92.createElement(import_editor_controls56.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React92.createElement(import_editor_controls56.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React92.createElement(Wrapper, { rawValue: value.value })));
|
|
5080
5144
|
};
|
|
5081
5145
|
var Wrapper = ({ rawValue }) => {
|
|
5082
|
-
const { propType } = (0,
|
|
5146
|
+
const { propType } = (0, import_editor_controls56.useBoundProp)();
|
|
5083
5147
|
const imageOverlayPropType = propType.prop_types["background-image-overlay"];
|
|
5084
|
-
return /* @__PURE__ */
|
|
5148
|
+
return /* @__PURE__ */ React92.createElement(import_editor_controls56.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React92.createElement(import_editor_controls56.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React92.createElement(Content, { rawValue: rawValue.image })));
|
|
5085
5149
|
};
|
|
5086
5150
|
var Content = ({ rawValue }) => {
|
|
5087
5151
|
const src = rawValue.value.src;
|
|
5088
5152
|
const dynamicTag = useDynamicTag(src.value.name || "");
|
|
5089
|
-
return /* @__PURE__ */
|
|
5153
|
+
return /* @__PURE__ */ React92.createElement(React92.Fragment, null, dynamicTag?.label);
|
|
5090
5154
|
};
|
|
5091
5155
|
|
|
5092
5156
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
5093
|
-
var
|
|
5094
|
-
var
|
|
5157
|
+
var React95 = __toESM(require("react"));
|
|
5158
|
+
var import_editor_controls59 = require("@elementor/editor-controls");
|
|
5095
5159
|
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
5096
5160
|
var import_icons27 = require("@elementor/icons");
|
|
5097
|
-
var
|
|
5098
|
-
var
|
|
5161
|
+
var import_ui48 = require("@elementor/ui");
|
|
5162
|
+
var import_i18n64 = require("@wordpress/i18n");
|
|
5099
5163
|
|
|
5100
5164
|
// src/hooks/use-persist-dynamic-value.ts
|
|
5101
5165
|
var import_session8 = require("@elementor/session");
|
|
@@ -5106,10 +5170,10 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
5106
5170
|
};
|
|
5107
5171
|
|
|
5108
5172
|
// src/dynamics/dynamic-control.tsx
|
|
5109
|
-
var
|
|
5110
|
-
var
|
|
5173
|
+
var React93 = __toESM(require("react"));
|
|
5174
|
+
var import_editor_controls57 = require("@elementor/editor-controls");
|
|
5111
5175
|
var DynamicControl = ({ bind, children }) => {
|
|
5112
|
-
const { value, setValue } = (0,
|
|
5176
|
+
const { value, setValue } = (0, import_editor_controls57.useBoundProp)(dynamicPropTypeUtil);
|
|
5113
5177
|
const { name = "", settings } = value ?? {};
|
|
5114
5178
|
const dynamicTag = useDynamicTag(name);
|
|
5115
5179
|
if (!dynamicTag) {
|
|
@@ -5128,24 +5192,24 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
5128
5192
|
});
|
|
5129
5193
|
};
|
|
5130
5194
|
const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
|
|
5131
|
-
return /* @__PURE__ */
|
|
5195
|
+
return /* @__PURE__ */ React93.createElement(import_editor_controls57.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React93.createElement(import_editor_controls57.PropKeyProvider, { bind }, children));
|
|
5132
5196
|
};
|
|
5133
5197
|
|
|
5134
5198
|
// src/dynamics/components/dynamic-selection.tsx
|
|
5135
5199
|
var import_react42 = require("react");
|
|
5136
|
-
var
|
|
5137
|
-
var
|
|
5200
|
+
var React94 = __toESM(require("react"));
|
|
5201
|
+
var import_editor_controls58 = require("@elementor/editor-controls");
|
|
5138
5202
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
5139
5203
|
var import_icons26 = require("@elementor/icons");
|
|
5140
|
-
var
|
|
5141
|
-
var
|
|
5204
|
+
var import_ui47 = require("@elementor/ui");
|
|
5205
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
5142
5206
|
var SIZE6 = "tiny";
|
|
5143
5207
|
var DynamicSelection = ({ close: closePopover }) => {
|
|
5144
5208
|
const [searchValue, setSearchValue] = (0, import_react42.useState)("");
|
|
5145
5209
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
5146
|
-
const theme = (0,
|
|
5147
|
-
const { value: anyValue } = (0,
|
|
5148
|
-
const { bind, value: dynamicValue, setValue } = (0,
|
|
5210
|
+
const theme = (0, import_ui47.useTheme)();
|
|
5211
|
+
const { value: anyValue } = (0, import_editor_controls58.useBoundProp)();
|
|
5212
|
+
const { bind, value: dynamicValue, setValue } = (0, import_editor_controls58.useBoundProp)(dynamicPropTypeUtil);
|
|
5149
5213
|
const [, updatePropValueHistory] = usePersistDynamicValue(bind);
|
|
5150
5214
|
const isCurrentValueDynamic = !!dynamicValue;
|
|
5151
5215
|
const options12 = useFilteredOptions(searchValue);
|
|
@@ -5173,21 +5237,21 @@ var DynamicSelection = ({ close: closePopover }) => {
|
|
|
5173
5237
|
label: item.label
|
|
5174
5238
|
}))
|
|
5175
5239
|
]);
|
|
5176
|
-
return /* @__PURE__ */
|
|
5240
|
+
return /* @__PURE__ */ React94.createElement(PopoverBody, null, /* @__PURE__ */ React94.createElement(
|
|
5177
5241
|
import_editor_ui7.PopoverHeader,
|
|
5178
5242
|
{
|
|
5179
|
-
title: (0,
|
|
5243
|
+
title: (0, import_i18n63.__)("Dynamic tags", "elementor"),
|
|
5180
5244
|
onClose: closePopover,
|
|
5181
|
-
icon: /* @__PURE__ */
|
|
5245
|
+
icon: /* @__PURE__ */ React94.createElement(import_icons26.DatabaseIcon, { fontSize: SIZE6 })
|
|
5182
5246
|
}
|
|
5183
|
-
), hasNoDynamicTags ? /* @__PURE__ */
|
|
5247
|
+
), hasNoDynamicTags ? /* @__PURE__ */ React94.createElement(NoDynamicTags, null) : /* @__PURE__ */ React94.createElement(import_react42.Fragment, null, /* @__PURE__ */ React94.createElement(
|
|
5184
5248
|
import_editor_ui7.PopoverSearch,
|
|
5185
5249
|
{
|
|
5186
5250
|
value: searchValue,
|
|
5187
5251
|
onSearch: handleSearch,
|
|
5188
|
-
placeholder: (0,
|
|
5252
|
+
placeholder: (0, import_i18n63.__)("Search dynamic tags\u2026", "elementor")
|
|
5189
5253
|
}
|
|
5190
|
-
), /* @__PURE__ */
|
|
5254
|
+
), /* @__PURE__ */ React94.createElement(import_ui47.Divider, null), /* @__PURE__ */ React94.createElement(
|
|
5191
5255
|
import_editor_ui7.PopoverMenuList,
|
|
5192
5256
|
{
|
|
5193
5257
|
items: virtualizedItems,
|
|
@@ -5195,12 +5259,12 @@ var DynamicSelection = ({ close: closePopover }) => {
|
|
|
5195
5259
|
onClose: closePopover,
|
|
5196
5260
|
selectedValue: dynamicValue?.name,
|
|
5197
5261
|
itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
|
|
5198
|
-
noResultsComponent: /* @__PURE__ */
|
|
5262
|
+
noResultsComponent: /* @__PURE__ */ React94.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
|
|
5199
5263
|
}
|
|
5200
5264
|
)));
|
|
5201
5265
|
};
|
|
5202
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
5203
|
-
|
|
5266
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React94.createElement(
|
|
5267
|
+
import_ui47.Stack,
|
|
5204
5268
|
{
|
|
5205
5269
|
gap: 1,
|
|
5206
5270
|
alignItems: "center",
|
|
@@ -5210,12 +5274,12 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React92.createElem
|
|
|
5210
5274
|
color: "text.secondary",
|
|
5211
5275
|
sx: { pb: 3.5 }
|
|
5212
5276
|
},
|
|
5213
|
-
/* @__PURE__ */
|
|
5214
|
-
/* @__PURE__ */
|
|
5215
|
-
/* @__PURE__ */
|
|
5277
|
+
/* @__PURE__ */ React94.createElement(import_icons26.DatabaseIcon, { fontSize: "large" }),
|
|
5278
|
+
/* @__PURE__ */ React94.createElement(import_ui47.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n63.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React94.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
5279
|
+
/* @__PURE__ */ React94.createElement(import_ui47.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n63.__)("Try something else.", "elementor"), /* @__PURE__ */ React94.createElement(import_ui47.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n63.__)("Clear & try again", "elementor")))
|
|
5216
5280
|
);
|
|
5217
|
-
var NoDynamicTags = () => /* @__PURE__ */
|
|
5218
|
-
|
|
5281
|
+
var NoDynamicTags = () => /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(import_ui47.Divider, null), /* @__PURE__ */ React94.createElement(
|
|
5282
|
+
import_ui47.Stack,
|
|
5219
5283
|
{
|
|
5220
5284
|
gap: 1,
|
|
5221
5285
|
alignItems: "center",
|
|
@@ -5225,9 +5289,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React92.createElement(React92.Fragment
|
|
|
5225
5289
|
color: "text.secondary",
|
|
5226
5290
|
sx: { pb: 3.5 }
|
|
5227
5291
|
},
|
|
5228
|
-
/* @__PURE__ */
|
|
5229
|
-
/* @__PURE__ */
|
|
5230
|
-
/* @__PURE__ */
|
|
5292
|
+
/* @__PURE__ */ React94.createElement(import_icons26.DatabaseIcon, { fontSize: "large" }),
|
|
5293
|
+
/* @__PURE__ */ React94.createElement(import_ui47.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n63.__)("Streamline your workflow with dynamic tags", "elementor")),
|
|
5294
|
+
/* @__PURE__ */ React94.createElement(import_ui47.Typography, { align: "center", variant: "caption" }, (0, import_i18n63.__)("You'll need Elementor Pro to use this feature.", "elementor"))
|
|
5231
5295
|
));
|
|
5232
5296
|
var useFilteredOptions = (searchValue) => {
|
|
5233
5297
|
const dynamicTags = usePropDynamicTags();
|
|
@@ -5248,10 +5312,10 @@ var useFilteredOptions = (searchValue) => {
|
|
|
5248
5312
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
5249
5313
|
var SIZE7 = "tiny";
|
|
5250
5314
|
var DynamicSelectionControl = () => {
|
|
5251
|
-
const { setValue: setAnyValue } = (0,
|
|
5252
|
-
const { bind, value } = (0,
|
|
5315
|
+
const { setValue: setAnyValue } = (0, import_editor_controls59.useBoundProp)();
|
|
5316
|
+
const { bind, value } = (0, import_editor_controls59.useBoundProp)(dynamicPropTypeUtil);
|
|
5253
5317
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
5254
|
-
const selectionPopoverState = (0,
|
|
5318
|
+
const selectionPopoverState = (0, import_ui48.usePopupState)({ variant: "popover" });
|
|
5255
5319
|
const { name: tagName = "" } = value;
|
|
5256
5320
|
const dynamicTag = useDynamicTag(tagName);
|
|
5257
5321
|
const removeDynamicTag = () => {
|
|
@@ -5260,26 +5324,26 @@ var DynamicSelectionControl = () => {
|
|
|
5260
5324
|
if (!dynamicTag) {
|
|
5261
5325
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
5262
5326
|
}
|
|
5263
|
-
return /* @__PURE__ */
|
|
5264
|
-
|
|
5327
|
+
return /* @__PURE__ */ React95.createElement(import_ui48.Box, null, /* @__PURE__ */ React95.createElement(
|
|
5328
|
+
import_ui48.UnstableTag,
|
|
5265
5329
|
{
|
|
5266
5330
|
fullWidth: true,
|
|
5267
5331
|
showActionsOnHover: true,
|
|
5268
5332
|
label: dynamicTag.label,
|
|
5269
|
-
startIcon: /* @__PURE__ */
|
|
5270
|
-
...(0,
|
|
5271
|
-
actions: /* @__PURE__ */
|
|
5272
|
-
|
|
5333
|
+
startIcon: /* @__PURE__ */ React95.createElement(import_icons27.DatabaseIcon, { fontSize: SIZE7 }),
|
|
5334
|
+
...(0, import_ui48.bindTrigger)(selectionPopoverState),
|
|
5335
|
+
actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React95.createElement(
|
|
5336
|
+
import_ui48.IconButton,
|
|
5273
5337
|
{
|
|
5274
5338
|
size: SIZE7,
|
|
5275
5339
|
onClick: removeDynamicTag,
|
|
5276
|
-
"aria-label": (0,
|
|
5340
|
+
"aria-label": (0, import_i18n64.__)("Remove dynamic value", "elementor")
|
|
5277
5341
|
},
|
|
5278
|
-
/* @__PURE__ */
|
|
5342
|
+
/* @__PURE__ */ React95.createElement(import_icons27.XIcon, { fontSize: SIZE7 })
|
|
5279
5343
|
))
|
|
5280
5344
|
}
|
|
5281
|
-
), /* @__PURE__ */
|
|
5282
|
-
|
|
5345
|
+
), /* @__PURE__ */ React95.createElement(
|
|
5346
|
+
import_ui48.Popover,
|
|
5283
5347
|
{
|
|
5284
5348
|
disablePortal: true,
|
|
5285
5349
|
disableScrollLock: true,
|
|
@@ -5288,19 +5352,19 @@ var DynamicSelectionControl = () => {
|
|
|
5288
5352
|
PaperProps: {
|
|
5289
5353
|
sx: { my: 1 }
|
|
5290
5354
|
},
|
|
5291
|
-
...(0,
|
|
5355
|
+
...(0, import_ui48.bindPopover)(selectionPopoverState)
|
|
5292
5356
|
},
|
|
5293
|
-
/* @__PURE__ */
|
|
5357
|
+
/* @__PURE__ */ React95.createElement(PopoverBody, null, /* @__PURE__ */ React95.createElement(DynamicSelection, { close: selectionPopoverState.close }))
|
|
5294
5358
|
));
|
|
5295
5359
|
};
|
|
5296
5360
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
5297
|
-
const popupState = (0,
|
|
5361
|
+
const popupState = (0, import_ui48.usePopupState)({ variant: "popover" });
|
|
5298
5362
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
5299
5363
|
if (!hasDynamicSettings) {
|
|
5300
5364
|
return null;
|
|
5301
5365
|
}
|
|
5302
|
-
return /* @__PURE__ */
|
|
5303
|
-
|
|
5366
|
+
return /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(import_ui48.IconButton, { size: SIZE7, ...(0, import_ui48.bindTrigger)(popupState), "aria-label": (0, import_i18n64.__)("Settings", "elementor") }, /* @__PURE__ */ React95.createElement(import_icons27.SettingsIcon, { fontSize: SIZE7 })), /* @__PURE__ */ React95.createElement(
|
|
5367
|
+
import_ui48.Popover,
|
|
5304
5368
|
{
|
|
5305
5369
|
disablePortal: true,
|
|
5306
5370
|
disableScrollLock: true,
|
|
@@ -5309,35 +5373,35 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
|
5309
5373
|
PaperProps: {
|
|
5310
5374
|
sx: { my: 1 }
|
|
5311
5375
|
},
|
|
5312
|
-
...(0,
|
|
5376
|
+
...(0, import_ui48.bindPopover)(popupState)
|
|
5313
5377
|
},
|
|
5314
|
-
/* @__PURE__ */
|
|
5378
|
+
/* @__PURE__ */ React95.createElement(PopoverBody, null, /* @__PURE__ */ React95.createElement(
|
|
5315
5379
|
import_editor_ui8.PopoverHeader,
|
|
5316
5380
|
{
|
|
5317
5381
|
title: dynamicTag.label,
|
|
5318
5382
|
onClose: popupState.close,
|
|
5319
|
-
icon: /* @__PURE__ */
|
|
5383
|
+
icon: /* @__PURE__ */ React95.createElement(import_icons27.DatabaseIcon, { fontSize: SIZE7 })
|
|
5320
5384
|
}
|
|
5321
|
-
), /* @__PURE__ */
|
|
5385
|
+
), /* @__PURE__ */ React95.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
5322
5386
|
));
|
|
5323
5387
|
};
|
|
5324
5388
|
var DynamicSettings = ({ controls }) => {
|
|
5325
5389
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
5326
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
5390
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui48.useTabs)(0);
|
|
5327
5391
|
if (!tabs.length) {
|
|
5328
5392
|
return null;
|
|
5329
5393
|
}
|
|
5330
|
-
return /* @__PURE__ */
|
|
5331
|
-
return /* @__PURE__ */
|
|
5332
|
-
|
|
5394
|
+
return /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(import_ui48.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React95.createElement(import_ui48.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React95.createElement(import_ui48.Divider, null), tabs.map(({ value }, index) => {
|
|
5395
|
+
return /* @__PURE__ */ React95.createElement(
|
|
5396
|
+
import_ui48.TabPanel,
|
|
5333
5397
|
{
|
|
5334
5398
|
key: index,
|
|
5335
5399
|
sx: { flexGrow: 1, py: 0, overflowY: "auto" },
|
|
5336
5400
|
...getTabPanelProps(index)
|
|
5337
5401
|
},
|
|
5338
|
-
/* @__PURE__ */
|
|
5402
|
+
/* @__PURE__ */ React95.createElement(import_ui48.Stack, { p: 2, gap: 2 }, value.items.map((item) => {
|
|
5339
5403
|
if (item.type === "control") {
|
|
5340
|
-
return /* @__PURE__ */
|
|
5404
|
+
return /* @__PURE__ */ React95.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
5341
5405
|
}
|
|
5342
5406
|
return null;
|
|
5343
5407
|
}))
|
|
@@ -5355,15 +5419,15 @@ var Control3 = ({ control }) => {
|
|
|
5355
5419
|
return null;
|
|
5356
5420
|
}
|
|
5357
5421
|
const layout = getLayout(control);
|
|
5358
|
-
return /* @__PURE__ */
|
|
5359
|
-
|
|
5422
|
+
return /* @__PURE__ */ React95.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React95.createElement(
|
|
5423
|
+
import_ui48.Grid,
|
|
5360
5424
|
{
|
|
5361
5425
|
container: true,
|
|
5362
5426
|
gap: 0.75,
|
|
5363
5427
|
sx: layout === "two-columns" ? { display: "grid", gridTemplateColumns: "1fr 1fr" } : {}
|
|
5364
5428
|
},
|
|
5365
|
-
control.label ? /* @__PURE__ */
|
|
5366
|
-
/* @__PURE__ */
|
|
5429
|
+
control.label ? /* @__PURE__ */ React95.createElement(import_ui48.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React95.createElement(import_editor_controls59.ControlFormLabel, null, control.label)) : null,
|
|
5430
|
+
/* @__PURE__ */ React95.createElement(import_ui48.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React95.createElement(Control, { type: control.type, props: control.props }))
|
|
5367
5431
|
));
|
|
5368
5432
|
};
|
|
5369
5433
|
|
|
@@ -5417,18 +5481,18 @@ function getDynamicValue(name, settings) {
|
|
|
5417
5481
|
}
|
|
5418
5482
|
|
|
5419
5483
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
5420
|
-
var
|
|
5421
|
-
var
|
|
5484
|
+
var React96 = __toESM(require("react"));
|
|
5485
|
+
var import_editor_controls60 = require("@elementor/editor-controls");
|
|
5422
5486
|
var import_icons28 = require("@elementor/icons");
|
|
5423
|
-
var
|
|
5487
|
+
var import_i18n65 = require("@wordpress/i18n");
|
|
5424
5488
|
var usePropDynamicAction = () => {
|
|
5425
|
-
const { propType } = (0,
|
|
5489
|
+
const { propType } = (0, import_editor_controls60.useBoundProp)();
|
|
5426
5490
|
const visible = !!propType && supportsDynamic(propType);
|
|
5427
5491
|
return {
|
|
5428
5492
|
visible,
|
|
5429
5493
|
icon: import_icons28.DatabaseIcon,
|
|
5430
|
-
title: (0,
|
|
5431
|
-
content: ({ close }) => /* @__PURE__ */
|
|
5494
|
+
title: (0, import_i18n65.__)("Dynamic tags", "elementor"),
|
|
5495
|
+
content: ({ close }) => /* @__PURE__ */ React96.createElement(DynamicSelection, { close })
|
|
5432
5496
|
};
|
|
5433
5497
|
};
|
|
5434
5498
|
|
|
@@ -5439,12 +5503,12 @@ var init = () => {
|
|
|
5439
5503
|
component: DynamicSelectionControl,
|
|
5440
5504
|
condition: ({ value }) => isDynamicPropValue(value)
|
|
5441
5505
|
});
|
|
5442
|
-
(0,
|
|
5506
|
+
(0, import_editor_controls61.injectIntoRepeaterItemLabel)({
|
|
5443
5507
|
id: "dynamic-background-image",
|
|
5444
5508
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
5445
5509
|
component: BackgroundControlDynamicTagLabel
|
|
5446
5510
|
});
|
|
5447
|
-
(0,
|
|
5511
|
+
(0, import_editor_controls61.injectIntoRepeaterItemIcon)({
|
|
5448
5512
|
id: "dynamic-background-image",
|
|
5449
5513
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
5450
5514
|
component: BackgroundControlDynamicTagIcon
|
|
@@ -5458,9 +5522,9 @@ var init = () => {
|
|
|
5458
5522
|
};
|
|
5459
5523
|
|
|
5460
5524
|
// src/reset-style-props.tsx
|
|
5461
|
-
var
|
|
5525
|
+
var import_editor_controls62 = require("@elementor/editor-controls");
|
|
5462
5526
|
var import_icons29 = require("@elementor/icons");
|
|
5463
|
-
var
|
|
5527
|
+
var import_i18n66 = require("@wordpress/i18n");
|
|
5464
5528
|
var { registerAction } = controlActionsMenu;
|
|
5465
5529
|
function initResetStyleProps() {
|
|
5466
5530
|
registerAction({
|
|
@@ -5470,11 +5534,11 @@ function initResetStyleProps() {
|
|
|
5470
5534
|
}
|
|
5471
5535
|
function useResetStyleValueProps() {
|
|
5472
5536
|
const isStyle = useIsStyle();
|
|
5473
|
-
const { value, setValue, path } = (0,
|
|
5537
|
+
const { value, setValue, path } = (0, import_editor_controls62.useBoundProp)();
|
|
5474
5538
|
const isInRepeater = path?.some((key) => !isNaN(Number(key)));
|
|
5475
5539
|
return {
|
|
5476
5540
|
visible: isStyle && value !== null && value !== void 0 && !isInRepeater,
|
|
5477
|
-
title: (0,
|
|
5541
|
+
title: (0, import_i18n66.__)("Clear", "elementor"),
|
|
5478
5542
|
icon: import_icons29.BrushBigIcon,
|
|
5479
5543
|
onClick: () => setValue(null)
|
|
5480
5544
|
};
|
|
@@ -5498,18 +5562,18 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
|
|
|
5498
5562
|
]);
|
|
5499
5563
|
|
|
5500
5564
|
// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
|
|
5501
|
-
var
|
|
5565
|
+
var React97 = __toESM(require("react"));
|
|
5502
5566
|
var import_editor_canvas6 = require("@elementor/editor-canvas");
|
|
5503
|
-
var
|
|
5504
|
-
var backgroundColorOverlayTransformer = (0, import_editor_canvas6.createTransformer)((value) => /* @__PURE__ */
|
|
5567
|
+
var import_ui49 = require("@elementor/ui");
|
|
5568
|
+
var backgroundColorOverlayTransformer = (0, import_editor_canvas6.createTransformer)((value) => /* @__PURE__ */ React97.createElement(import_ui49.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React97.createElement(ItemIconColor, { value }), /* @__PURE__ */ React97.createElement(ItemLabelColor, { value })));
|
|
5505
5569
|
var ItemIconColor = ({ value }) => {
|
|
5506
5570
|
const { color } = value;
|
|
5507
|
-
return /* @__PURE__ */
|
|
5571
|
+
return /* @__PURE__ */ React97.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
|
|
5508
5572
|
};
|
|
5509
5573
|
var ItemLabelColor = ({ value: { color } }) => {
|
|
5510
|
-
return /* @__PURE__ */
|
|
5574
|
+
return /* @__PURE__ */ React97.createElement("span", null, color);
|
|
5511
5575
|
};
|
|
5512
|
-
var StyledUnstableColorIndicator = (0,
|
|
5576
|
+
var StyledUnstableColorIndicator = (0, import_ui49.styled)(import_ui49.UnstableColorIndicator)(({ theme }) => ({
|
|
5513
5577
|
width: "1em",
|
|
5514
5578
|
height: "1em",
|
|
5515
5579
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -5518,20 +5582,20 @@ var StyledUnstableColorIndicator = (0, import_ui48.styled)(import_ui48.UnstableC
|
|
|
5518
5582
|
}));
|
|
5519
5583
|
|
|
5520
5584
|
// src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
|
|
5521
|
-
var
|
|
5585
|
+
var React98 = __toESM(require("react"));
|
|
5522
5586
|
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
5523
|
-
var
|
|
5524
|
-
var
|
|
5525
|
-
var backgroundGradientOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */
|
|
5587
|
+
var import_ui50 = require("@elementor/ui");
|
|
5588
|
+
var import_i18n67 = require("@wordpress/i18n");
|
|
5589
|
+
var backgroundGradientOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React98.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React98.createElement(ItemLabelGradient, { value })));
|
|
5526
5590
|
var ItemIconGradient = ({ value }) => {
|
|
5527
5591
|
const gradient = getGradientValue(value);
|
|
5528
|
-
return /* @__PURE__ */
|
|
5592
|
+
return /* @__PURE__ */ React98.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
5529
5593
|
};
|
|
5530
5594
|
var ItemLabelGradient = ({ value }) => {
|
|
5531
5595
|
if (value.type === "linear") {
|
|
5532
|
-
return /* @__PURE__ */
|
|
5596
|
+
return /* @__PURE__ */ React98.createElement("span", null, (0, import_i18n67.__)("Linear gradient", "elementor"));
|
|
5533
5597
|
}
|
|
5534
|
-
return /* @__PURE__ */
|
|
5598
|
+
return /* @__PURE__ */ React98.createElement("span", null, (0, import_i18n67.__)("Radial gradient", "elementor"));
|
|
5535
5599
|
};
|
|
5536
5600
|
var getGradientValue = (gradient) => {
|
|
5537
5601
|
const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
|
|
@@ -5542,16 +5606,16 @@ var getGradientValue = (gradient) => {
|
|
|
5542
5606
|
};
|
|
5543
5607
|
|
|
5544
5608
|
// src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
|
|
5545
|
-
var
|
|
5609
|
+
var React99 = __toESM(require("react"));
|
|
5546
5610
|
var import_editor_canvas8 = require("@elementor/editor-canvas");
|
|
5547
5611
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
5548
|
-
var
|
|
5612
|
+
var import_ui51 = require("@elementor/ui");
|
|
5549
5613
|
var import_wp_media = require("@elementor/wp-media");
|
|
5550
|
-
var backgroundImageOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */
|
|
5614
|
+
var backgroundImageOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React99.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(ItemIconImage, { value }), /* @__PURE__ */ React99.createElement(ItemLabelImage, { value })));
|
|
5551
5615
|
var ItemIconImage = ({ value }) => {
|
|
5552
5616
|
const { imageUrl } = useImage(value);
|
|
5553
|
-
return /* @__PURE__ */
|
|
5554
|
-
|
|
5617
|
+
return /* @__PURE__ */ React99.createElement(
|
|
5618
|
+
import_ui51.CardMedia,
|
|
5555
5619
|
{
|
|
5556
5620
|
image: imageUrl,
|
|
5557
5621
|
sx: (theme) => ({
|
|
@@ -5566,7 +5630,7 @@ var ItemIconImage = ({ value }) => {
|
|
|
5566
5630
|
};
|
|
5567
5631
|
var ItemLabelImage = ({ value }) => {
|
|
5568
5632
|
const { imageTitle } = useImage(value);
|
|
5569
|
-
return /* @__PURE__ */
|
|
5633
|
+
return /* @__PURE__ */ React99.createElement(import_editor_ui9.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React99.createElement("span", null, imageTitle));
|
|
5570
5634
|
};
|
|
5571
5635
|
var useImage = (image) => {
|
|
5572
5636
|
let imageTitle, imageUrl = null;
|
|
@@ -5591,14 +5655,14 @@ var getFileExtensionFromFilename = (filename) => {
|
|
|
5591
5655
|
};
|
|
5592
5656
|
|
|
5593
5657
|
// src/styles-inheritance/transformers/background-overlay-transformer.tsx
|
|
5594
|
-
var
|
|
5658
|
+
var React100 = __toESM(require("react"));
|
|
5595
5659
|
var import_editor_canvas9 = require("@elementor/editor-canvas");
|
|
5596
|
-
var
|
|
5660
|
+
var import_ui52 = require("@elementor/ui");
|
|
5597
5661
|
var backgroundOverlayTransformer = (0, import_editor_canvas9.createTransformer)((values) => {
|
|
5598
5662
|
if (!values || values.length === 0) {
|
|
5599
5663
|
return null;
|
|
5600
5664
|
}
|
|
5601
|
-
return /* @__PURE__ */
|
|
5665
|
+
return /* @__PURE__ */ React100.createElement(import_ui52.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React100.createElement(import_ui52.Stack, { key: index }, item)));
|
|
5602
5666
|
});
|
|
5603
5667
|
|
|
5604
5668
|
// src/styles-inheritance/init-styles-inheritance-transformers.ts
|