@elementor/editor-editing-panel 1.36.0 → 1.38.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/index.js +348 -276
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +288 -216
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/style-sections/size-section/object-fit-field.tsx +34 -0
- package/src/components/style-sections/size-section/object-position-field.tsx +38 -0
- package/src/components/style-sections/size-section/size-section.tsx +26 -0
- package/src/components/style-sections/typography-section/column-count-field.tsx +22 -0
- package/src/components/style-sections/typography-section/column-gap-field.tsx +22 -0
- package/src/components/style-sections/typography-section/typography-section.tsx +14 -0
- package/src/hooks/use-state-by-element.ts +3 -1
package/dist/index.mjs
CHANGED
|
@@ -929,7 +929,7 @@ function useHandleApply(appliedIds, setAppliedIds) {
|
|
|
929
929
|
import { __createPanel as createPanel } from "@elementor/editor-panels";
|
|
930
930
|
|
|
931
931
|
// src/components/editing-panel.tsx
|
|
932
|
-
import * as
|
|
932
|
+
import * as React74 from "react";
|
|
933
933
|
import { ControlActionsProvider, ControlReplacementsProvider } from "@elementor/editor-controls";
|
|
934
934
|
import { useSelectedElement } from "@elementor/editor-elements";
|
|
935
935
|
import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
|
|
@@ -937,7 +937,7 @@ import { ThemeProvider as ThemeProvider9 } from "@elementor/editor-ui";
|
|
|
937
937
|
import { AtomIcon } from "@elementor/icons";
|
|
938
938
|
import { SessionStorageProvider as SessionStorageProvider3 } from "@elementor/session";
|
|
939
939
|
import { ErrorBoundary } from "@elementor/ui";
|
|
940
|
-
import { __ as
|
|
940
|
+
import { __ as __50 } from "@wordpress/i18n";
|
|
941
941
|
|
|
942
942
|
// src/controls-actions.ts
|
|
943
943
|
import { createMenu } from "@elementor/menus";
|
|
@@ -993,10 +993,10 @@ function EditorPanelErrorFallback() {
|
|
|
993
993
|
}
|
|
994
994
|
|
|
995
995
|
// src/components/editing-panel-tabs.tsx
|
|
996
|
-
import * as
|
|
997
|
-
import { Fragment as
|
|
996
|
+
import * as React73 from "react";
|
|
997
|
+
import { Fragment as Fragment9 } from "react";
|
|
998
998
|
import { Divider as Divider6, Stack as Stack17, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
|
|
999
|
-
import { __ as
|
|
999
|
+
import { __ as __49 } from "@wordpress/i18n";
|
|
1000
1000
|
|
|
1001
1001
|
// src/contexts/scroll-context.tsx
|
|
1002
1002
|
import * as React10 from "react";
|
|
@@ -1039,11 +1039,13 @@ function useScrollDirection() {
|
|
|
1039
1039
|
|
|
1040
1040
|
// src/hooks/use-state-by-element.ts
|
|
1041
1041
|
import { useState as useState6 } from "react";
|
|
1042
|
+
import { isExperimentActive } from "@elementor/editor-v1-adapters";
|
|
1042
1043
|
import { getSessionStorageItem, setSessionStorageItem } from "@elementor/session";
|
|
1043
1044
|
var useStateByElement = (key, initialValue) => {
|
|
1044
1045
|
const { element } = useElement();
|
|
1046
|
+
const isFeatureActive = isExperimentActive("e_v_3_30");
|
|
1045
1047
|
const lookup = `elementor/editor-state/${element.id}/${key}`;
|
|
1046
|
-
const storedValue = getSessionStorageItem(lookup);
|
|
1048
|
+
const storedValue = isFeatureActive ? getSessionStorageItem(lookup) : initialValue;
|
|
1047
1049
|
const [value, setValue] = useState6(storedValue ?? initialValue);
|
|
1048
1050
|
const doUpdate = (newValue) => {
|
|
1049
1051
|
setSessionStorageItem(lookup, newValue);
|
|
@@ -1227,13 +1229,13 @@ var Control2 = ({ control }) => {
|
|
|
1227
1229
|
};
|
|
1228
1230
|
|
|
1229
1231
|
// src/components/style-tab.tsx
|
|
1230
|
-
import * as
|
|
1232
|
+
import * as React72 from "react";
|
|
1231
1233
|
import { useState as useState13 } from "react";
|
|
1232
1234
|
import { CLASSES_PROP_KEY } from "@elementor/editor-props";
|
|
1233
1235
|
import { useActiveBreakpoint } from "@elementor/editor-responsive";
|
|
1234
1236
|
import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
|
|
1235
1237
|
import { Divider as Divider5, Stack as Stack16 } from "@elementor/ui";
|
|
1236
|
-
import { __ as
|
|
1238
|
+
import { __ as __48 } from "@wordpress/i18n";
|
|
1237
1239
|
|
|
1238
1240
|
// src/contexts/styles-inheritance-context.tsx
|
|
1239
1241
|
import * as React17 from "react";
|
|
@@ -1628,7 +1630,7 @@ import * as React19 from "react";
|
|
|
1628
1630
|
import { useState as useState9 } from "react";
|
|
1629
1631
|
import { useBoundProp } from "@elementor/editor-controls";
|
|
1630
1632
|
import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider as isElementsStylesProvider3 } from "@elementor/editor-styles-repository";
|
|
1631
|
-
import { isExperimentActive } from "@elementor/editor-v1-adapters";
|
|
1633
|
+
import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
|
|
1632
1634
|
import { IconButton as IconButton2, Infotip } from "@elementor/ui";
|
|
1633
1635
|
import { __ as __5 } from "@wordpress/i18n";
|
|
1634
1636
|
|
|
@@ -1716,7 +1718,7 @@ var StylesInheritanceIndicator = () => {
|
|
|
1716
1718
|
const hasValue = value !== null && value !== void 0;
|
|
1717
1719
|
const label = getLabel({ isFinalValue, hasValue });
|
|
1718
1720
|
const variantType = getVariant({ isFinalValue, hasValue, currentStyleProvider });
|
|
1719
|
-
const eIndicationsPopover =
|
|
1721
|
+
const eIndicationsPopover = isExperimentActive2("e_indications_popover");
|
|
1720
1722
|
if (!eIndicationsPopover) {
|
|
1721
1723
|
return /* @__PURE__ */ React19.createElement(StyleIndicator, { variant: variantType, "aria-label": label });
|
|
1722
1724
|
}
|
|
@@ -2313,7 +2315,7 @@ var AlignSelfChild = ({ parentStyleDirection }) => {
|
|
|
2313
2315
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
2314
2316
|
import * as React37 from "react";
|
|
2315
2317
|
import { ToggleControl as ToggleControl4 } from "@elementor/editor-controls";
|
|
2316
|
-
import { isExperimentActive as
|
|
2318
|
+
import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
|
|
2317
2319
|
import { Stack as Stack10 } from "@elementor/ui";
|
|
2318
2320
|
import { __ as __14 } from "@wordpress/i18n";
|
|
2319
2321
|
var displayFieldItems = [
|
|
@@ -2337,7 +2339,7 @@ var displayFieldItems = [
|
|
|
2337
2339
|
}
|
|
2338
2340
|
];
|
|
2339
2341
|
var DisplayField = () => {
|
|
2340
|
-
const isDisplayNoneFeatureActive =
|
|
2342
|
+
const isDisplayNoneFeatureActive = isExperimentActive3("e_v_3_30");
|
|
2341
2343
|
const items3 = [...displayFieldItems];
|
|
2342
2344
|
if (isDisplayNoneFeatureActive) {
|
|
2343
2345
|
items3.push({
|
|
@@ -2698,7 +2700,7 @@ var shouldDisplayFlexFields = (display, local) => {
|
|
|
2698
2700
|
|
|
2699
2701
|
// src/components/style-sections/position-section/position-section.tsx
|
|
2700
2702
|
import * as React49 from "react";
|
|
2701
|
-
import { isExperimentActive as
|
|
2703
|
+
import { isExperimentActive as isExperimentActive4 } from "@elementor/editor-v1-adapters";
|
|
2702
2704
|
import { useSessionStorage } from "@elementor/session";
|
|
2703
2705
|
|
|
2704
2706
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
@@ -2769,7 +2771,7 @@ var PositionSection = () => {
|
|
|
2769
2771
|
"inset-inline-end"
|
|
2770
2772
|
]);
|
|
2771
2773
|
const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
|
|
2772
|
-
const isCssIdFeatureActive =
|
|
2774
|
+
const isCssIdFeatureActive = isExperimentActive4("e_v_3_30");
|
|
2773
2775
|
const onPositionChange = (newPosition, previousPosition) => {
|
|
2774
2776
|
if (newPosition === "static") {
|
|
2775
2777
|
if (dimensionsValues) {
|
|
@@ -2799,120 +2801,187 @@ var usePersistDimensions = () => {
|
|
|
2799
2801
|
};
|
|
2800
2802
|
|
|
2801
2803
|
// src/components/style-sections/size-section/size-section.tsx
|
|
2802
|
-
import * as
|
|
2804
|
+
import * as React54 from "react";
|
|
2803
2805
|
import { SizeControl as SizeControl5 } from "@elementor/editor-controls";
|
|
2804
|
-
import {
|
|
2806
|
+
import { isExperimentActive as isExperimentActive5 } from "@elementor/editor-v1-adapters";
|
|
2807
|
+
import { Grid as Grid16, Stack as Stack15 } from "@elementor/ui";
|
|
2808
|
+
import { __ as __30 } from "@wordpress/i18n";
|
|
2809
|
+
|
|
2810
|
+
// src/components/collapsible-content.tsx
|
|
2811
|
+
import * as React50 from "react";
|
|
2812
|
+
import { useState as useState12 } from "react";
|
|
2813
|
+
import { Button, Collapse as Collapse3, Stack as Stack14 } from "@elementor/ui";
|
|
2814
|
+
import { __ as __26 } from "@wordpress/i18n";
|
|
2815
|
+
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
2816
|
+
const [open, setOpen] = useState12(defaultOpen);
|
|
2817
|
+
const handleToggle = () => {
|
|
2818
|
+
setOpen((prevOpen) => !prevOpen);
|
|
2819
|
+
};
|
|
2820
|
+
return /* @__PURE__ */ React50.createElement(Stack14, null, /* @__PURE__ */ React50.createElement(
|
|
2821
|
+
Button,
|
|
2822
|
+
{
|
|
2823
|
+
fullWidth: true,
|
|
2824
|
+
size: "small",
|
|
2825
|
+
color: "secondary",
|
|
2826
|
+
variant: "outlined",
|
|
2827
|
+
onClick: handleToggle,
|
|
2828
|
+
endIcon: /* @__PURE__ */ React50.createElement(CollapseIcon, { open }),
|
|
2829
|
+
sx: { my: 0.5 }
|
|
2830
|
+
},
|
|
2831
|
+
open ? __26("Show less", "elementor") : __26("Show more", "elementor")
|
|
2832
|
+
), /* @__PURE__ */ React50.createElement(Collapse3, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
2833
|
+
};
|
|
2834
|
+
|
|
2835
|
+
// src/components/style-sections/size-section/object-fit-field.tsx
|
|
2836
|
+
import * as React51 from "react";
|
|
2837
|
+
import { SelectControl as SelectControl4 } from "@elementor/editor-controls";
|
|
2838
|
+
import { Grid as Grid13 } from "@elementor/ui";
|
|
2805
2839
|
import { __ as __27 } from "@wordpress/i18n";
|
|
2840
|
+
var positionOptions2 = [
|
|
2841
|
+
{ label: __27("Fill", "elementor"), value: "fill" },
|
|
2842
|
+
{ label: __27("Cover", "elementor"), value: "cover" },
|
|
2843
|
+
{ label: __27("Contain", "elementor"), value: "contain" },
|
|
2844
|
+
{ label: __27("None", "elementor"), value: "none" },
|
|
2845
|
+
{ label: __27("Scale down", "elementor"), value: "scale-down" }
|
|
2846
|
+
];
|
|
2847
|
+
var ObjectFitField = ({ onChange }) => {
|
|
2848
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "object-fit" }, /* @__PURE__ */ React51.createElement(Grid13, { container: true, pt: 2, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlLabel, null, __27("Object fit", "elementor"))), /* @__PURE__ */ React51.createElement(Grid13, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React51.createElement(SelectControl4, { options: positionOptions2, onChange }))));
|
|
2849
|
+
};
|
|
2850
|
+
|
|
2851
|
+
// src/components/style-sections/size-section/object-position-field.tsx
|
|
2852
|
+
import * as React52 from "react";
|
|
2853
|
+
import { SelectControl as SelectControl5 } from "@elementor/editor-controls";
|
|
2854
|
+
import { Grid as Grid14 } from "@elementor/ui";
|
|
2855
|
+
import { __ as __28 } from "@wordpress/i18n";
|
|
2856
|
+
var positionOptions3 = [
|
|
2857
|
+
{ label: __28("Center center", "elementor"), value: "center center" },
|
|
2858
|
+
{ label: __28("Center left", "elementor"), value: "center left" },
|
|
2859
|
+
{ label: __28("Center right", "elementor"), value: "center right" },
|
|
2860
|
+
{ label: __28("Top center", "elementor"), value: "top center" },
|
|
2861
|
+
{ label: __28("Top left", "elementor"), value: "top left" },
|
|
2862
|
+
{ label: __28("Top right", "elementor"), value: "top right" },
|
|
2863
|
+
{ label: __28("Bottom center", "elementor"), value: "bottom center" },
|
|
2864
|
+
{ label: __28("Bottom left", "elementor"), value: "bottom left" },
|
|
2865
|
+
{ label: __28("Bottom right", "elementor"), value: "bottom right" }
|
|
2866
|
+
];
|
|
2867
|
+
var ObjectPositionField = ({ onChange }) => {
|
|
2868
|
+
return /* @__PURE__ */ React52.createElement(StylesField, { bind: "object-position" }, /* @__PURE__ */ React52.createElement(Grid14, { container: true, pt: 2, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ControlLabel, null, __28("Object position", "elementor"))), /* @__PURE__ */ React52.createElement(Grid14, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React52.createElement(SelectControl5, { options: positionOptions3, onChange }))));
|
|
2869
|
+
};
|
|
2806
2870
|
|
|
2807
2871
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
2808
|
-
import * as
|
|
2872
|
+
import * as React53 from "react";
|
|
2809
2873
|
import { ToggleControl as ToggleControl8 } from "@elementor/editor-controls";
|
|
2810
2874
|
import { EyeIcon, EyeOffIcon, LetterAIcon } from "@elementor/icons";
|
|
2811
|
-
import { Grid as
|
|
2812
|
-
import { __ as
|
|
2875
|
+
import { Grid as Grid15 } from "@elementor/ui";
|
|
2876
|
+
import { __ as __29 } from "@wordpress/i18n";
|
|
2813
2877
|
var options6 = [
|
|
2814
2878
|
{
|
|
2815
2879
|
value: "visible",
|
|
2816
|
-
label:
|
|
2817
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2880
|
+
label: __29("Visible", "elementor"),
|
|
2881
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(EyeIcon, { fontSize: size }),
|
|
2818
2882
|
showTooltip: true
|
|
2819
2883
|
},
|
|
2820
2884
|
{
|
|
2821
2885
|
value: "hidden",
|
|
2822
|
-
label:
|
|
2823
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2886
|
+
label: __29("Hidden", "elementor"),
|
|
2887
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(EyeOffIcon, { fontSize: size }),
|
|
2824
2888
|
showTooltip: true
|
|
2825
2889
|
},
|
|
2826
2890
|
{
|
|
2827
2891
|
value: "auto",
|
|
2828
|
-
label:
|
|
2829
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
2892
|
+
label: __29("Auto", "elementor"),
|
|
2893
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(LetterAIcon, { fontSize: size }),
|
|
2830
2894
|
showTooltip: true
|
|
2831
2895
|
}
|
|
2832
2896
|
];
|
|
2833
2897
|
var OverflowField = () => {
|
|
2834
|
-
return /* @__PURE__ */
|
|
2898
|
+
return /* @__PURE__ */ React53.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React53.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlLabel, null, __29("Overflow", "elementor"))), /* @__PURE__ */ React53.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React53.createElement(ToggleControl8, { options: options6 }))));
|
|
2835
2899
|
};
|
|
2836
2900
|
|
|
2837
2901
|
// src/components/style-sections/size-section/size-section.tsx
|
|
2838
2902
|
var SizeSection = () => {
|
|
2839
|
-
|
|
2903
|
+
const [fitValue, setFitValue] = useStylesField("object-fit");
|
|
2904
|
+
const isNotFill = fitValue && fitValue?.value !== "fill";
|
|
2905
|
+
const onFitChange = (newFit, previousValue) => {
|
|
2906
|
+
if (newFit && newFit !== previousValue) {
|
|
2907
|
+
setFitValue({
|
|
2908
|
+
value: newFit,
|
|
2909
|
+
$$type: "string"
|
|
2910
|
+
});
|
|
2911
|
+
}
|
|
2912
|
+
};
|
|
2913
|
+
const isVersion330Active = isExperimentActive5("e_v_3_30");
|
|
2914
|
+
return /* @__PURE__ */ React54.createElement(SectionContent, null, /* @__PURE__ */ React54.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(SizeField, { bind: "width", label: __30("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React54.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(SizeField, { bind: "height", label: __30("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React54.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(
|
|
2840
2915
|
SizeField,
|
|
2841
2916
|
{
|
|
2842
2917
|
bind: "min-width",
|
|
2843
|
-
label:
|
|
2918
|
+
label: __30("Min width", "elementor"),
|
|
2844
2919
|
extendedValues: ["auto"]
|
|
2845
2920
|
}
|
|
2846
|
-
)), /* @__PURE__ */
|
|
2921
|
+
)), /* @__PURE__ */ React54.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(
|
|
2847
2922
|
SizeField,
|
|
2848
2923
|
{
|
|
2849
2924
|
bind: "min-height",
|
|
2850
|
-
label:
|
|
2925
|
+
label: __30("Min height", "elementor"),
|
|
2851
2926
|
extendedValues: ["auto"]
|
|
2852
2927
|
}
|
|
2853
|
-
))), /* @__PURE__ */
|
|
2928
|
+
))), /* @__PURE__ */ React54.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(SizeField, { bind: "max-width", label: __30("Max width", "elementor") })), /* @__PURE__ */ React54.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(SizeField, { bind: "max-height", label: __30("Max height", "elementor") }))), /* @__PURE__ */ React54.createElement(PanelDivider, null), /* @__PURE__ */ React54.createElement(Stack15, null, /* @__PURE__ */ React54.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React54.createElement(CollapsibleContent, null, /* @__PURE__ */ React54.createElement(ObjectFitField, { onChange: onFitChange }), /* @__PURE__ */ React54.createElement(Grid16, { item: true, xs: 6 }, isNotFill && /* @__PURE__ */ React54.createElement(ObjectPositionField, null))));
|
|
2854
2929
|
};
|
|
2855
2930
|
var SizeField = ({ label, bind, extendedValues }) => {
|
|
2856
|
-
return /* @__PURE__ */
|
|
2931
|
+
return /* @__PURE__ */ React54.createElement(StylesField, { bind }, /* @__PURE__ */ React54.createElement(Grid16, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React54.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React54.createElement(ControlLabel, null, label)), /* @__PURE__ */ React54.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React54.createElement(SizeControl5, { extendedValues }))));
|
|
2857
2932
|
};
|
|
2858
2933
|
|
|
2859
2934
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
2860
|
-
import * as
|
|
2935
|
+
import * as React55 from "react";
|
|
2861
2936
|
import { LinkedDimensionsControl } from "@elementor/editor-controls";
|
|
2862
|
-
import { __ as
|
|
2937
|
+
import { __ as __31 } from "@wordpress/i18n";
|
|
2863
2938
|
var SpacingSection = () => {
|
|
2864
2939
|
const { isSiteRtl } = useDirection();
|
|
2865
|
-
return /* @__PURE__ */
|
|
2940
|
+
return /* @__PURE__ */ React55.createElement(SectionContent, null, /* @__PURE__ */ React55.createElement(StylesField, { bind: "margin" }, /* @__PURE__ */ React55.createElement(
|
|
2866
2941
|
LinkedDimensionsControl,
|
|
2867
2942
|
{
|
|
2868
|
-
label:
|
|
2943
|
+
label: __31("Margin", "elementor"),
|
|
2869
2944
|
isSiteRtl,
|
|
2870
2945
|
extendedValues: ["auto"]
|
|
2871
2946
|
}
|
|
2872
|
-
)), /* @__PURE__ */
|
|
2947
|
+
)), /* @__PURE__ */ React55.createElement(PanelDivider, null), /* @__PURE__ */ React55.createElement(StylesField, { bind: "padding" }, /* @__PURE__ */ React55.createElement(LinkedDimensionsControl, { label: __31("Padding", "elementor"), isSiteRtl })));
|
|
2873
2948
|
};
|
|
2874
2949
|
|
|
2875
2950
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
2876
|
-
import * as
|
|
2951
|
+
import * as React71 from "react";
|
|
2952
|
+
import { isExperimentActive as isExperimentActive6 } from "@elementor/editor-v1-adapters";
|
|
2877
2953
|
|
|
2878
|
-
// src/components/
|
|
2879
|
-
import * as
|
|
2880
|
-
import {
|
|
2881
|
-
import {
|
|
2882
|
-
import { __ as
|
|
2883
|
-
var
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
variant: "outlined",
|
|
2895
|
-
onClick: handleToggle,
|
|
2896
|
-
endIcon: /* @__PURE__ */ React53.createElement(CollapseIcon, { open }),
|
|
2897
|
-
sx: { my: 0.5 }
|
|
2898
|
-
},
|
|
2899
|
-
open ? __29("Show less", "elementor") : __29("Show more", "elementor")
|
|
2900
|
-
), /* @__PURE__ */ React53.createElement(Collapse3, { in: open, timeout: "auto", unmountOnExit: true }, children));
|
|
2954
|
+
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
2955
|
+
import * as React56 from "react";
|
|
2956
|
+
import { NumberControl as NumberControl4 } from "@elementor/editor-controls";
|
|
2957
|
+
import { Grid as Grid17 } from "@elementor/ui";
|
|
2958
|
+
import { __ as __32 } from "@wordpress/i18n";
|
|
2959
|
+
var ColumnCountField = () => {
|
|
2960
|
+
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "column-count" }, /* @__PURE__ */ React56.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React56.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(ControlLabel, null, __32("Columns", "elementor"))), /* @__PURE__ */ React56.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React56.createElement(NumberControl4, { shouldForceInt: true, min: 0, step: 1 }))));
|
|
2961
|
+
};
|
|
2962
|
+
|
|
2963
|
+
// src/components/style-sections/typography-section/column-gap-field.tsx
|
|
2964
|
+
import * as React57 from "react";
|
|
2965
|
+
import { SizeControl as SizeControl6 } from "@elementor/editor-controls";
|
|
2966
|
+
import { Grid as Grid18 } from "@elementor/ui";
|
|
2967
|
+
import { __ as __33 } from "@wordpress/i18n";
|
|
2968
|
+
var ColumnGapField = () => {
|
|
2969
|
+
return /* @__PURE__ */ React57.createElement(StylesField, { bind: "column-gap" }, /* @__PURE__ */ React57.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, __33("Column gap", "elementor"))), /* @__PURE__ */ React57.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(SizeControl6, null))));
|
|
2901
2970
|
};
|
|
2902
2971
|
|
|
2903
2972
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
2904
|
-
import * as
|
|
2973
|
+
import * as React58 from "react";
|
|
2905
2974
|
import { FontFamilyControl } from "@elementor/editor-controls";
|
|
2906
|
-
import { Grid as
|
|
2907
|
-
import { __ as
|
|
2975
|
+
import { Grid as Grid19 } from "@elementor/ui";
|
|
2976
|
+
import { __ as __35 } from "@wordpress/i18n";
|
|
2908
2977
|
|
|
2909
2978
|
// src/components/style-sections/typography-section/hooks/use-font-families.ts
|
|
2910
2979
|
import { useMemo as useMemo5 } from "react";
|
|
2911
|
-
import { __ as
|
|
2980
|
+
import { __ as __34 } from "@wordpress/i18n";
|
|
2912
2981
|
var supportedCategories = {
|
|
2913
|
-
system:
|
|
2914
|
-
custom:
|
|
2915
|
-
googlefonts:
|
|
2982
|
+
system: __34("System", "elementor"),
|
|
2983
|
+
custom: __34("Custom Fonts", "elementor"),
|
|
2984
|
+
googlefonts: __34("Google Fonts", "elementor")
|
|
2916
2985
|
};
|
|
2917
2986
|
var getFontFamilies = () => {
|
|
2918
2987
|
const { controls } = getElementorConfig();
|
|
@@ -2949,188 +3018,188 @@ var FontFamilyField = () => {
|
|
|
2949
3018
|
if (fontFamilies.length === 0) {
|
|
2950
3019
|
return null;
|
|
2951
3020
|
}
|
|
2952
|
-
return /* @__PURE__ */
|
|
3021
|
+
return /* @__PURE__ */ React58.createElement(StylesField, { bind: "font-family" }, /* @__PURE__ */ React58.createElement(Grid19, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, __35("Font family", "elementor"))), /* @__PURE__ */ React58.createElement(Grid19, { item: true, xs: 6, sx: { minWidth: 0 } }, /* @__PURE__ */ React58.createElement(FontFamilyControl, { fontFamilies }))));
|
|
2953
3022
|
};
|
|
2954
3023
|
|
|
2955
3024
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
2956
|
-
import * as
|
|
2957
|
-
import { SizeControl as
|
|
2958
|
-
import { Grid as
|
|
2959
|
-
import { __ as
|
|
3025
|
+
import * as React59 from "react";
|
|
3026
|
+
import { SizeControl as SizeControl7 } from "@elementor/editor-controls";
|
|
3027
|
+
import { Grid as Grid20 } from "@elementor/ui";
|
|
3028
|
+
import { __ as __36 } from "@wordpress/i18n";
|
|
2960
3029
|
var FontSizeField = () => {
|
|
2961
|
-
return /* @__PURE__ */
|
|
3030
|
+
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "font-size" }, /* @__PURE__ */ React59.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(ControlLabel, null, __36("Font size", "elementor"))), /* @__PURE__ */ React59.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(SizeControl7, null))));
|
|
2962
3031
|
};
|
|
2963
3032
|
|
|
2964
3033
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
2965
|
-
import * as
|
|
3034
|
+
import * as React60 from "react";
|
|
2966
3035
|
import { ControlFormLabel as ControlFormLabel4, ToggleControl as ToggleControl9 } from "@elementor/editor-controls";
|
|
2967
3036
|
import { ItalicIcon, MinusIcon as MinusIcon2 } from "@elementor/icons";
|
|
2968
|
-
import { Grid as
|
|
2969
|
-
import { __ as
|
|
3037
|
+
import { Grid as Grid21 } from "@elementor/ui";
|
|
3038
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
2970
3039
|
var options7 = [
|
|
2971
3040
|
{
|
|
2972
3041
|
value: "normal",
|
|
2973
|
-
label:
|
|
2974
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3042
|
+
label: __37("Normal", "elementor"),
|
|
3043
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(MinusIcon2, { fontSize: size }),
|
|
2975
3044
|
showTooltip: true
|
|
2976
3045
|
},
|
|
2977
3046
|
{
|
|
2978
3047
|
value: "italic",
|
|
2979
|
-
label:
|
|
2980
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3048
|
+
label: __37("Italic", "elementor"),
|
|
3049
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(ItalicIcon, { fontSize: size }),
|
|
2981
3050
|
showTooltip: true
|
|
2982
3051
|
}
|
|
2983
3052
|
];
|
|
2984
|
-
var FontStyleField = () => /* @__PURE__ */
|
|
3053
|
+
var FontStyleField = () => /* @__PURE__ */ React60.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React60.createElement(Grid21, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlFormLabel4, null, __37("Font style", "elementor"))), /* @__PURE__ */ React60.createElement(Grid21, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React60.createElement(ToggleControl9, { options: options7 }))));
|
|
2985
3054
|
|
|
2986
3055
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
2987
|
-
import * as
|
|
2988
|
-
import { SelectControl as
|
|
2989
|
-
import { Grid as
|
|
2990
|
-
import { __ as
|
|
3056
|
+
import * as React61 from "react";
|
|
3057
|
+
import { SelectControl as SelectControl6 } from "@elementor/editor-controls";
|
|
3058
|
+
import { Grid as Grid22 } from "@elementor/ui";
|
|
3059
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
2991
3060
|
var fontWeightOptions = [
|
|
2992
|
-
{ value: "100", label:
|
|
2993
|
-
{ value: "200", label:
|
|
2994
|
-
{ value: "300", label:
|
|
2995
|
-
{ value: "400", label:
|
|
2996
|
-
{ value: "500", label:
|
|
2997
|
-
{ value: "600", label:
|
|
2998
|
-
{ value: "700", label:
|
|
2999
|
-
{ value: "800", label:
|
|
3000
|
-
{ value: "900", label:
|
|
3061
|
+
{ value: "100", label: __38("100 - Thin", "elementor") },
|
|
3062
|
+
{ value: "200", label: __38("200 - Extra light", "elementor") },
|
|
3063
|
+
{ value: "300", label: __38("300 - Light", "elementor") },
|
|
3064
|
+
{ value: "400", label: __38("400 - Normal", "elementor") },
|
|
3065
|
+
{ value: "500", label: __38("500 - Medium", "elementor") },
|
|
3066
|
+
{ value: "600", label: __38("600 - Semi bold", "elementor") },
|
|
3067
|
+
{ value: "700", label: __38("700 - Bold", "elementor") },
|
|
3068
|
+
{ value: "800", label: __38("800 - Extra bold", "elementor") },
|
|
3069
|
+
{ value: "900", label: __38("900 - Black", "elementor") }
|
|
3001
3070
|
];
|
|
3002
3071
|
var FontWeightField = () => {
|
|
3003
|
-
return /* @__PURE__ */
|
|
3072
|
+
return /* @__PURE__ */ React61.createElement(StylesField, { bind: "font-weight" }, /* @__PURE__ */ React61.createElement(Grid22, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React61.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(ControlLabel, null, __38("Font weight", "elementor"))), /* @__PURE__ */ React61.createElement(Grid22, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React61.createElement(SelectControl6, { options: fontWeightOptions }))));
|
|
3004
3073
|
};
|
|
3005
3074
|
|
|
3006
3075
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
3007
|
-
import * as
|
|
3008
|
-
import { SizeControl as
|
|
3009
|
-
import { Grid as
|
|
3010
|
-
import { __ as
|
|
3076
|
+
import * as React62 from "react";
|
|
3077
|
+
import { SizeControl as SizeControl8 } from "@elementor/editor-controls";
|
|
3078
|
+
import { Grid as Grid23 } from "@elementor/ui";
|
|
3079
|
+
import { __ as __39 } from "@wordpress/i18n";
|
|
3011
3080
|
var LetterSpacingField = () => {
|
|
3012
|
-
return /* @__PURE__ */
|
|
3081
|
+
return /* @__PURE__ */ React62.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React62.createElement(Grid23, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, __39("Letter spacing", "elementor"))), /* @__PURE__ */ React62.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(SizeControl8, null))));
|
|
3013
3082
|
};
|
|
3014
3083
|
|
|
3015
3084
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
3016
|
-
import * as
|
|
3017
|
-
import { SizeControl as
|
|
3018
|
-
import { Grid as
|
|
3019
|
-
import { __ as
|
|
3085
|
+
import * as React63 from "react";
|
|
3086
|
+
import { SizeControl as SizeControl9 } from "@elementor/editor-controls";
|
|
3087
|
+
import { Grid as Grid24 } from "@elementor/ui";
|
|
3088
|
+
import { __ as __40 } from "@wordpress/i18n";
|
|
3020
3089
|
var LineHeightField = () => {
|
|
3021
|
-
return /* @__PURE__ */
|
|
3090
|
+
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "line-height" }, /* @__PURE__ */ React63.createElement(Grid24, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React63.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlLabel, null, __40("Line height", "elementor"))), /* @__PURE__ */ React63.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(SizeControl9, null))));
|
|
3022
3091
|
};
|
|
3023
3092
|
|
|
3024
3093
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
3025
|
-
import * as
|
|
3094
|
+
import * as React64 from "react";
|
|
3026
3095
|
import { ToggleControl as ToggleControl10 } from "@elementor/editor-controls";
|
|
3027
3096
|
import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from "@elementor/icons";
|
|
3028
|
-
import { Grid as
|
|
3029
|
-
import { __ as
|
|
3097
|
+
import { Grid as Grid25, withDirection as withDirection9 } from "@elementor/ui";
|
|
3098
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
3030
3099
|
var AlignStartIcon = withDirection9(AlignLeftIcon);
|
|
3031
3100
|
var AlignEndIcon = withDirection9(AlignRightIcon);
|
|
3032
3101
|
var options8 = [
|
|
3033
3102
|
{
|
|
3034
3103
|
value: "start",
|
|
3035
|
-
label:
|
|
3036
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3104
|
+
label: __41("Start", "elementor"),
|
|
3105
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(AlignStartIcon, { fontSize: size }),
|
|
3037
3106
|
showTooltip: true
|
|
3038
3107
|
},
|
|
3039
3108
|
{
|
|
3040
3109
|
value: "center",
|
|
3041
|
-
label:
|
|
3042
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3110
|
+
label: __41("Center", "elementor"),
|
|
3111
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(AlignCenterIcon, { fontSize: size }),
|
|
3043
3112
|
showTooltip: true
|
|
3044
3113
|
},
|
|
3045
3114
|
{
|
|
3046
3115
|
value: "end",
|
|
3047
|
-
label:
|
|
3048
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3116
|
+
label: __41("End", "elementor"),
|
|
3117
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(AlignEndIcon, { fontSize: size }),
|
|
3049
3118
|
showTooltip: true
|
|
3050
3119
|
},
|
|
3051
3120
|
{
|
|
3052
3121
|
value: "justify",
|
|
3053
|
-
label:
|
|
3054
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3122
|
+
label: __41("Justify", "elementor"),
|
|
3123
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(AlignJustifiedIcon, { fontSize: size }),
|
|
3055
3124
|
showTooltip: true
|
|
3056
3125
|
}
|
|
3057
3126
|
];
|
|
3058
3127
|
var TextAlignmentField = () => {
|
|
3059
|
-
return /* @__PURE__ */
|
|
3128
|
+
return /* @__PURE__ */ React64.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React64.createElement(Grid25, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React64.createElement(Grid25, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(ControlLabel, null, __41("Text align", "elementor"))), /* @__PURE__ */ React64.createElement(Grid25, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React64.createElement(ToggleControl10, { options: options8 }))));
|
|
3060
3129
|
};
|
|
3061
3130
|
|
|
3062
3131
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
3063
|
-
import * as
|
|
3132
|
+
import * as React65 from "react";
|
|
3064
3133
|
import { ColorControl as ColorControl2 } from "@elementor/editor-controls";
|
|
3065
|
-
import { Grid as
|
|
3066
|
-
import { __ as
|
|
3134
|
+
import { Grid as Grid26 } from "@elementor/ui";
|
|
3135
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
3067
3136
|
var TextColorField = () => {
|
|
3068
|
-
return /* @__PURE__ */
|
|
3137
|
+
return /* @__PURE__ */ React65.createElement(StylesField, { bind: "color" }, /* @__PURE__ */ React65.createElement(Grid26, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React65.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ControlLabel, null, __42("Text color", "elementor"))), /* @__PURE__ */ React65.createElement(Grid26, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ColorControl2, null))));
|
|
3069
3138
|
};
|
|
3070
3139
|
|
|
3071
3140
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
3072
|
-
import * as
|
|
3141
|
+
import * as React66 from "react";
|
|
3073
3142
|
import { ToggleControl as ToggleControl11 } from "@elementor/editor-controls";
|
|
3074
3143
|
import { MinusIcon as MinusIcon3, OverlineIcon, StrikethroughIcon, UnderlineIcon } from "@elementor/icons";
|
|
3075
|
-
import { Grid as
|
|
3076
|
-
import { __ as
|
|
3144
|
+
import { Grid as Grid27 } from "@elementor/ui";
|
|
3145
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
3077
3146
|
var options9 = [
|
|
3078
3147
|
{
|
|
3079
3148
|
value: "none",
|
|
3080
|
-
label:
|
|
3081
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3149
|
+
label: __43("None", "elementor"),
|
|
3150
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(MinusIcon3, { fontSize: size }),
|
|
3082
3151
|
showTooltip: true,
|
|
3083
3152
|
exclusive: true
|
|
3084
3153
|
},
|
|
3085
3154
|
{
|
|
3086
3155
|
value: "underline",
|
|
3087
|
-
label:
|
|
3088
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3156
|
+
label: __43("Underline", "elementor"),
|
|
3157
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(UnderlineIcon, { fontSize: size }),
|
|
3089
3158
|
showTooltip: true
|
|
3090
3159
|
},
|
|
3091
3160
|
{
|
|
3092
3161
|
value: "line-through",
|
|
3093
|
-
label:
|
|
3094
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3162
|
+
label: __43("Line-through", "elementor"),
|
|
3163
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(StrikethroughIcon, { fontSize: size }),
|
|
3095
3164
|
showTooltip: true
|
|
3096
3165
|
},
|
|
3097
3166
|
{
|
|
3098
3167
|
value: "overline",
|
|
3099
|
-
label:
|
|
3100
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3168
|
+
label: __43("Overline", "elementor"),
|
|
3169
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(OverlineIcon, { fontSize: size }),
|
|
3101
3170
|
showTooltip: true
|
|
3102
3171
|
}
|
|
3103
3172
|
];
|
|
3104
|
-
var TextDecorationField = () => /* @__PURE__ */
|
|
3173
|
+
var TextDecorationField = () => /* @__PURE__ */ React66.createElement(StylesField, { bind: "text-decoration" }, /* @__PURE__ */ React66.createElement(Grid27, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React66.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlLabel, null, __43("Line decoration", "elementor"))), /* @__PURE__ */ React66.createElement(Grid27, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React66.createElement(ToggleControl11, { options: options9, exclusive: false }))));
|
|
3105
3174
|
|
|
3106
3175
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
3107
|
-
import * as
|
|
3176
|
+
import * as React67 from "react";
|
|
3108
3177
|
import { ToggleControl as ToggleControl12 } from "@elementor/editor-controls";
|
|
3109
3178
|
import { TextDirectionLtrIcon, TextDirectionRtlIcon } from "@elementor/icons";
|
|
3110
|
-
import { Grid as
|
|
3111
|
-
import { __ as
|
|
3179
|
+
import { Grid as Grid28 } from "@elementor/ui";
|
|
3180
|
+
import { __ as __44 } from "@wordpress/i18n";
|
|
3112
3181
|
var options10 = [
|
|
3113
3182
|
{
|
|
3114
3183
|
value: "ltr",
|
|
3115
|
-
label:
|
|
3116
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3184
|
+
label: __44("Left to right", "elementor"),
|
|
3185
|
+
renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(TextDirectionLtrIcon, { fontSize: size }),
|
|
3117
3186
|
showTooltip: true
|
|
3118
3187
|
},
|
|
3119
3188
|
{
|
|
3120
3189
|
value: "rtl",
|
|
3121
|
-
label:
|
|
3122
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3190
|
+
label: __44("Right to left", "elementor"),
|
|
3191
|
+
renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(TextDirectionRtlIcon, { fontSize: size }),
|
|
3123
3192
|
showTooltip: true
|
|
3124
3193
|
}
|
|
3125
3194
|
];
|
|
3126
3195
|
var TextDirectionField = () => {
|
|
3127
|
-
return /* @__PURE__ */
|
|
3196
|
+
return /* @__PURE__ */ React67.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React67.createElement(Grid28, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React67.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(ControlLabel, null, __44("Direction", "elementor"))), /* @__PURE__ */ React67.createElement(Grid28, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React67.createElement(ToggleControl12, { options: options10 }))));
|
|
3128
3197
|
};
|
|
3129
3198
|
|
|
3130
3199
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
3131
|
-
import * as
|
|
3200
|
+
import * as React68 from "react";
|
|
3132
3201
|
import { StrokeControl } from "@elementor/editor-controls";
|
|
3133
|
-
import { __ as
|
|
3202
|
+
import { __ as __45 } from "@wordpress/i18n";
|
|
3134
3203
|
var initTextStroke = {
|
|
3135
3204
|
$$type: "stroke",
|
|
3136
3205
|
value: {
|
|
@@ -3156,64 +3225,67 @@ var TextStrokeField = () => {
|
|
|
3156
3225
|
setTextStroke(null);
|
|
3157
3226
|
};
|
|
3158
3227
|
const hasTextStroke = Boolean(textStroke);
|
|
3159
|
-
return /* @__PURE__ */
|
|
3228
|
+
return /* @__PURE__ */ React68.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React68.createElement(
|
|
3160
3229
|
AddOrRemoveContent,
|
|
3161
3230
|
{
|
|
3162
|
-
label:
|
|
3231
|
+
label: __45("Text stroke", "elementor"),
|
|
3163
3232
|
isAdded: hasTextStroke,
|
|
3164
3233
|
onAdd: addTextStroke,
|
|
3165
3234
|
onRemove: removeTextStroke
|
|
3166
3235
|
},
|
|
3167
|
-
/* @__PURE__ */
|
|
3236
|
+
/* @__PURE__ */ React68.createElement(StrokeControl, null)
|
|
3168
3237
|
));
|
|
3169
3238
|
};
|
|
3170
3239
|
|
|
3171
3240
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
3172
|
-
import * as
|
|
3241
|
+
import * as React69 from "react";
|
|
3173
3242
|
import { ToggleControl as ToggleControl13 } from "@elementor/editor-controls";
|
|
3174
3243
|
import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon as MinusIcon4 } from "@elementor/icons";
|
|
3175
|
-
import { Grid as
|
|
3176
|
-
import { __ as
|
|
3244
|
+
import { Grid as Grid29 } from "@elementor/ui";
|
|
3245
|
+
import { __ as __46 } from "@wordpress/i18n";
|
|
3177
3246
|
var options11 = [
|
|
3178
3247
|
{
|
|
3179
3248
|
value: "none",
|
|
3180
|
-
label:
|
|
3181
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3249
|
+
label: __46("None", "elementor"),
|
|
3250
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(MinusIcon4, { fontSize: size }),
|
|
3182
3251
|
showTooltip: true
|
|
3183
3252
|
},
|
|
3184
3253
|
{
|
|
3185
3254
|
value: "capitalize",
|
|
3186
|
-
label:
|
|
3187
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3255
|
+
label: __46("Capitalize", "elementor"),
|
|
3256
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(LetterCaseIcon, { fontSize: size }),
|
|
3188
3257
|
showTooltip: true
|
|
3189
3258
|
},
|
|
3190
3259
|
{
|
|
3191
3260
|
value: "uppercase",
|
|
3192
|
-
label:
|
|
3193
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3261
|
+
label: __46("Uppercase", "elementor"),
|
|
3262
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(LetterCaseUpperIcon, { fontSize: size }),
|
|
3194
3263
|
showTooltip: true
|
|
3195
3264
|
},
|
|
3196
3265
|
{
|
|
3197
3266
|
value: "lowercase",
|
|
3198
|
-
label:
|
|
3199
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3267
|
+
label: __46("Lowercase", "elementor"),
|
|
3268
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(LetterCaseLowerIcon, { fontSize: size }),
|
|
3200
3269
|
showTooltip: true
|
|
3201
3270
|
}
|
|
3202
3271
|
];
|
|
3203
|
-
var TransformField = () => /* @__PURE__ */
|
|
3272
|
+
var TransformField = () => /* @__PURE__ */ React69.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React69.createElement(Grid29, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React69.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ControlLabel, null, __46("Text transform", "elementor"))), /* @__PURE__ */ React69.createElement(Grid29, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React69.createElement(ToggleControl13, { options: options11 }))));
|
|
3204
3273
|
|
|
3205
3274
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
3206
|
-
import * as
|
|
3207
|
-
import { SizeControl as
|
|
3208
|
-
import { Grid as
|
|
3209
|
-
import { __ as
|
|
3275
|
+
import * as React70 from "react";
|
|
3276
|
+
import { SizeControl as SizeControl10 } from "@elementor/editor-controls";
|
|
3277
|
+
import { Grid as Grid30 } from "@elementor/ui";
|
|
3278
|
+
import { __ as __47 } from "@wordpress/i18n";
|
|
3210
3279
|
var WordSpacingField = () => {
|
|
3211
|
-
return /* @__PURE__ */
|
|
3280
|
+
return /* @__PURE__ */ React70.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React70.createElement(Grid30, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React70.createElement(Grid30, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(ControlLabel, null, __47("Word spacing", "elementor"))), /* @__PURE__ */ React70.createElement(Grid30, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(SizeControl10, null))));
|
|
3212
3281
|
};
|
|
3213
3282
|
|
|
3214
3283
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
3215
3284
|
var TypographySection = () => {
|
|
3216
|
-
|
|
3285
|
+
const [columnCount] = useStylesField("column-count");
|
|
3286
|
+
const isVersion330Active = isExperimentActive6("e_v_3_30");
|
|
3287
|
+
const hasMultiColumns = columnCount?.value && columnCount?.value > 1;
|
|
3288
|
+
return /* @__PURE__ */ React71.createElement(SectionContent, null, /* @__PURE__ */ React71.createElement(FontFamilyField, null), /* @__PURE__ */ React71.createElement(FontWeightField, null), /* @__PURE__ */ React71.createElement(FontSizeField, null), /* @__PURE__ */ React71.createElement(PanelDivider, null), /* @__PURE__ */ React71.createElement(TextAlignmentField, null), /* @__PURE__ */ React71.createElement(TextColorField, null), /* @__PURE__ */ React71.createElement(CollapsibleContent, null, /* @__PURE__ */ React71.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React71.createElement(LineHeightField, null), /* @__PURE__ */ React71.createElement(LetterSpacingField, null), /* @__PURE__ */ React71.createElement(WordSpacingField, null), isVersion330Active && /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(ColumnCountField, null), hasMultiColumns && /* @__PURE__ */ React71.createElement(ColumnGapField, null)), /* @__PURE__ */ React71.createElement(PanelDivider, null), /* @__PURE__ */ React71.createElement(TextDecorationField, null), /* @__PURE__ */ React71.createElement(TransformField, null), /* @__PURE__ */ React71.createElement(TextDirectionField, null), /* @__PURE__ */ React71.createElement(FontStyleField, null), /* @__PURE__ */ React71.createElement(TextStrokeField, null))));
|
|
3217
3289
|
};
|
|
3218
3290
|
|
|
3219
3291
|
// src/components/style-tab.tsx
|
|
@@ -3230,7 +3302,7 @@ var StyleTab = () => {
|
|
|
3230
3302
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
3231
3303
|
const [activeStyleState, setActiveStyleState] = useState13(null);
|
|
3232
3304
|
const breakpoint = useActiveBreakpoint();
|
|
3233
|
-
return /* @__PURE__ */
|
|
3305
|
+
return /* @__PURE__ */ React72.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React72.createElement(
|
|
3234
3306
|
StyleProvider,
|
|
3235
3307
|
{
|
|
3236
3308
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -3241,12 +3313,12 @@ var StyleTab = () => {
|
|
|
3241
3313
|
},
|
|
3242
3314
|
setMetaState: setActiveStyleState
|
|
3243
3315
|
},
|
|
3244
|
-
/* @__PURE__ */
|
|
3316
|
+
/* @__PURE__ */ React72.createElement(SessionStorageProvider2, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React72.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React72.createElement(ClassesHeader, null, /* @__PURE__ */ React72.createElement(CssClassSelector, null), /* @__PURE__ */ React72.createElement(Divider5, null)), /* @__PURE__ */ React72.createElement(SectionsList, null, /* @__PURE__ */ React72.createElement(Section, { title: __48("Layout", "elementor") }, /* @__PURE__ */ React72.createElement(LayoutSection, null)), /* @__PURE__ */ React72.createElement(Section, { title: __48("Spacing", "elementor") }, /* @__PURE__ */ React72.createElement(SpacingSection, null)), /* @__PURE__ */ React72.createElement(Section, { title: __48("Size", "elementor") }, /* @__PURE__ */ React72.createElement(SizeSection, null)), /* @__PURE__ */ React72.createElement(Section, { title: __48("Position", "elementor") }, /* @__PURE__ */ React72.createElement(PositionSection, null)), /* @__PURE__ */ React72.createElement(Section, { title: __48("Typography", "elementor") }, /* @__PURE__ */ React72.createElement(TypographySection, null)), /* @__PURE__ */ React72.createElement(Section, { title: __48("Background", "elementor") }, /* @__PURE__ */ React72.createElement(BackgroundSection, null)), /* @__PURE__ */ React72.createElement(Section, { title: __48("Border", "elementor") }, /* @__PURE__ */ React72.createElement(BorderSection, null)), /* @__PURE__ */ React72.createElement(Section, { title: __48("Effects", "elementor") }, /* @__PURE__ */ React72.createElement(EffectsSection, null)))))
|
|
3245
3317
|
));
|
|
3246
3318
|
};
|
|
3247
3319
|
function ClassesHeader({ children }) {
|
|
3248
3320
|
const scrollDirection = useScrollDirection();
|
|
3249
|
-
return /* @__PURE__ */
|
|
3321
|
+
return /* @__PURE__ */ React72.createElement(Stack16, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
3250
3322
|
}
|
|
3251
3323
|
function useCurrentClassesProp() {
|
|
3252
3324
|
const { elementType } = useElement();
|
|
@@ -3265,14 +3337,14 @@ var EditingPanelTabs = () => {
|
|
|
3265
3337
|
return (
|
|
3266
3338
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
3267
3339
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
3268
|
-
/* @__PURE__ */
|
|
3340
|
+
/* @__PURE__ */ React73.createElement(Fragment9, { key: element.id }, /* @__PURE__ */ React73.createElement(PanelTabContent, null))
|
|
3269
3341
|
);
|
|
3270
3342
|
};
|
|
3271
3343
|
var PanelTabContent = () => {
|
|
3272
3344
|
const defaultComponentTab = "settings";
|
|
3273
3345
|
const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
3274
3346
|
const { getTabProps, getTabPanelProps, getTabsProps } = useTabs(currentTab);
|
|
3275
|
-
return /* @__PURE__ */
|
|
3347
|
+
return /* @__PURE__ */ React73.createElement(ScrollProvider, null, /* @__PURE__ */ React73.createElement(Stack17, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React73.createElement(Stack17, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React73.createElement(
|
|
3276
3348
|
Tabs,
|
|
3277
3349
|
{
|
|
3278
3350
|
variant: "fullWidth",
|
|
@@ -3284,9 +3356,9 @@ var PanelTabContent = () => {
|
|
|
3284
3356
|
setCurrentTab(newValue);
|
|
3285
3357
|
}
|
|
3286
3358
|
},
|
|
3287
|
-
/* @__PURE__ */
|
|
3288
|
-
/* @__PURE__ */
|
|
3289
|
-
), /* @__PURE__ */
|
|
3359
|
+
/* @__PURE__ */ React73.createElement(Tab, { label: __49("General", "elementor"), ...getTabProps("settings") }),
|
|
3360
|
+
/* @__PURE__ */ React73.createElement(Tab, { label: __49("Style", "elementor"), ...getTabProps("style") })
|
|
3361
|
+
), /* @__PURE__ */ React73.createElement(Divider6, null)), /* @__PURE__ */ React73.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React73.createElement(SettingsTab, null)), /* @__PURE__ */ React73.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React73.createElement(StyleTab, null))));
|
|
3290
3362
|
};
|
|
3291
3363
|
|
|
3292
3364
|
// src/components/editing-panel.tsx
|
|
@@ -3298,8 +3370,8 @@ var EditingPanel = () => {
|
|
|
3298
3370
|
if (!element || !elementType) {
|
|
3299
3371
|
return null;
|
|
3300
3372
|
}
|
|
3301
|
-
const panelTitle =
|
|
3302
|
-
return /* @__PURE__ */
|
|
3373
|
+
const panelTitle = __50("Edit %s", "elementor").replace("%s", elementType.title);
|
|
3374
|
+
return /* @__PURE__ */ React74.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React74.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React74.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React74.createElement(ThemeProvider9, null, /* @__PURE__ */ React74.createElement(Panel, null, /* @__PURE__ */ React74.createElement(PanelHeader, null, /* @__PURE__ */ React74.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React74.createElement(AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React74.createElement(PanelBody, null, /* @__PURE__ */ React74.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React74.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React74.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React74.createElement(EditingPanelTabs, null)))))))));
|
|
3303
3375
|
};
|
|
3304
3376
|
|
|
3305
3377
|
// src/panel.ts
|
|
@@ -3351,7 +3423,7 @@ var EditingPanelHooks = () => {
|
|
|
3351
3423
|
import { settingsTransformersRegistry, styleTransformersRegistry as styleTransformersRegistry2 } from "@elementor/editor-canvas";
|
|
3352
3424
|
|
|
3353
3425
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
3354
|
-
import * as
|
|
3426
|
+
import * as React78 from "react";
|
|
3355
3427
|
import { ControlFormLabel as ControlFormLabel5, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
|
|
3356
3428
|
import { DatabaseIcon as DatabaseIcon2, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
|
|
3357
3429
|
import {
|
|
@@ -3359,7 +3431,7 @@ import {
|
|
|
3359
3431
|
bindTrigger as bindTrigger2,
|
|
3360
3432
|
Box as Box5,
|
|
3361
3433
|
Divider as Divider8,
|
|
3362
|
-
Grid as
|
|
3434
|
+
Grid as Grid31,
|
|
3363
3435
|
IconButton as IconButton4,
|
|
3364
3436
|
Paper,
|
|
3365
3437
|
Popover as Popover2,
|
|
@@ -3372,12 +3444,12 @@ import {
|
|
|
3372
3444
|
usePopupState as usePopupState3,
|
|
3373
3445
|
useTabs as useTabs2
|
|
3374
3446
|
} from "@elementor/ui";
|
|
3375
|
-
import { __ as
|
|
3447
|
+
import { __ as __52 } from "@wordpress/i18n";
|
|
3376
3448
|
|
|
3377
3449
|
// src/components/popover-content.tsx
|
|
3378
|
-
import * as
|
|
3450
|
+
import * as React75 from "react";
|
|
3379
3451
|
import { Stack as Stack18 } from "@elementor/ui";
|
|
3380
|
-
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */
|
|
3452
|
+
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React75.createElement(Stack18, { alignItems, gap, p }, children);
|
|
3381
3453
|
|
|
3382
3454
|
// src/hooks/use-persist-dynamic-value.ts
|
|
3383
3455
|
import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
|
|
@@ -3388,7 +3460,7 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
3388
3460
|
};
|
|
3389
3461
|
|
|
3390
3462
|
// src/dynamics/dynamic-control.tsx
|
|
3391
|
-
import * as
|
|
3463
|
+
import * as React76 from "react";
|
|
3392
3464
|
import { PropKeyProvider as PropKeyProvider3, PropProvider as PropProvider3, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
|
|
3393
3465
|
|
|
3394
3466
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
@@ -3490,12 +3562,12 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
3490
3562
|
});
|
|
3491
3563
|
};
|
|
3492
3564
|
const propType = createTopLevelOjectType({ schema: dynamicTag.props_schema });
|
|
3493
|
-
return /* @__PURE__ */
|
|
3565
|
+
return /* @__PURE__ */ React76.createElement(PropProvider3, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React76.createElement(PropKeyProvider3, { bind }, children));
|
|
3494
3566
|
};
|
|
3495
3567
|
|
|
3496
3568
|
// src/dynamics/components/dynamic-selection.tsx
|
|
3497
|
-
import * as
|
|
3498
|
-
import { Fragment as
|
|
3569
|
+
import * as React77 from "react";
|
|
3570
|
+
import { Fragment as Fragment10, useState as useState14 } from "react";
|
|
3499
3571
|
import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
|
|
3500
3572
|
import { DatabaseIcon, SearchIcon } from "@elementor/icons";
|
|
3501
3573
|
import {
|
|
@@ -3510,7 +3582,7 @@ import {
|
|
|
3510
3582
|
TextField as TextField2,
|
|
3511
3583
|
Typography as Typography4
|
|
3512
3584
|
} from "@elementor/ui";
|
|
3513
|
-
import { __ as
|
|
3585
|
+
import { __ as __51 } from "@wordpress/i18n";
|
|
3514
3586
|
var SIZE3 = "tiny";
|
|
3515
3587
|
var DynamicSelection = ({ onSelect }) => {
|
|
3516
3588
|
const [searchValue, setSearchValue] = useState14("");
|
|
@@ -3531,19 +3603,19 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3531
3603
|
setValue({ name: value, settings: { label } });
|
|
3532
3604
|
onSelect?.();
|
|
3533
3605
|
};
|
|
3534
|
-
return /* @__PURE__ */
|
|
3606
|
+
return /* @__PURE__ */ React77.createElement(Stack19, null, hasNoDynamicTags ? /* @__PURE__ */ React77.createElement(NoDynamicTags, null) : /* @__PURE__ */ React77.createElement(Fragment10, null, /* @__PURE__ */ React77.createElement(Box4, { px: 1.5, pb: 1 }, /* @__PURE__ */ React77.createElement(
|
|
3535
3607
|
TextField2,
|
|
3536
3608
|
{
|
|
3537
3609
|
fullWidth: true,
|
|
3538
3610
|
size: SIZE3,
|
|
3539
3611
|
value: searchValue,
|
|
3540
3612
|
onChange: handleSearch,
|
|
3541
|
-
placeholder:
|
|
3613
|
+
placeholder: __51("Search dynamic tags\u2026", "elementor"),
|
|
3542
3614
|
InputProps: {
|
|
3543
|
-
startAdornment: /* @__PURE__ */
|
|
3615
|
+
startAdornment: /* @__PURE__ */ React77.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React77.createElement(SearchIcon, { fontSize: SIZE3 }))
|
|
3544
3616
|
}
|
|
3545
3617
|
}
|
|
3546
|
-
)), /* @__PURE__ */
|
|
3618
|
+
)), /* @__PURE__ */ React77.createElement(Divider7, null), /* @__PURE__ */ React77.createElement(Box4, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React77.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React77.createElement(Fragment10, { key: index }, /* @__PURE__ */ React77.createElement(
|
|
3547
3619
|
MenuSubheader2,
|
|
3548
3620
|
{
|
|
3549
3621
|
sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
|
|
@@ -3551,7 +3623,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3551
3623
|
dynamicGroups?.[category]?.title || category
|
|
3552
3624
|
), items3.map(({ value, label: tagLabel }) => {
|
|
3553
3625
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
3554
|
-
return /* @__PURE__ */
|
|
3626
|
+
return /* @__PURE__ */ React77.createElement(
|
|
3555
3627
|
MenuItem,
|
|
3556
3628
|
{
|
|
3557
3629
|
key: value,
|
|
@@ -3562,9 +3634,9 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3562
3634
|
},
|
|
3563
3635
|
tagLabel
|
|
3564
3636
|
);
|
|
3565
|
-
})))) : /* @__PURE__ */
|
|
3637
|
+
})))) : /* @__PURE__ */ React77.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") }))));
|
|
3566
3638
|
};
|
|
3567
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
3639
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React77.createElement(
|
|
3568
3640
|
Stack19,
|
|
3569
3641
|
{
|
|
3570
3642
|
gap: 1,
|
|
@@ -3575,11 +3647,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React73.createElem
|
|
|
3575
3647
|
color: "text.secondary",
|
|
3576
3648
|
sx: { pb: 3.5 }
|
|
3577
3649
|
},
|
|
3578
|
-
/* @__PURE__ */
|
|
3579
|
-
/* @__PURE__ */
|
|
3580
|
-
/* @__PURE__ */
|
|
3650
|
+
/* @__PURE__ */ React77.createElement(DatabaseIcon, { fontSize: "large" }),
|
|
3651
|
+
/* @__PURE__ */ React77.createElement(Typography4, { align: "center", variant: "subtitle2" }, __51("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React77.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
3652
|
+
/* @__PURE__ */ React77.createElement(Typography4, { align: "center", variant: "caption" }, __51("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React77.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __51("Clear & try again", "elementor")))
|
|
3581
3653
|
);
|
|
3582
|
-
var NoDynamicTags = () => /* @__PURE__ */
|
|
3654
|
+
var NoDynamicTags = () => /* @__PURE__ */ React77.createElement(Box4, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React77.createElement(Divider7, null), /* @__PURE__ */ React77.createElement(
|
|
3583
3655
|
Stack19,
|
|
3584
3656
|
{
|
|
3585
3657
|
gap: 1,
|
|
@@ -3590,9 +3662,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(Box4, { sx: { ov
|
|
|
3590
3662
|
color: "text.secondary",
|
|
3591
3663
|
sx: { pb: 3.5 }
|
|
3592
3664
|
},
|
|
3593
|
-
/* @__PURE__ */
|
|
3594
|
-
/* @__PURE__ */
|
|
3595
|
-
/* @__PURE__ */
|
|
3665
|
+
/* @__PURE__ */ React77.createElement(DatabaseIcon, { fontSize: "large" }),
|
|
3666
|
+
/* @__PURE__ */ React77.createElement(Typography4, { align: "center", variant: "subtitle2" }, __51("Streamline your workflow with dynamic tags", "elementor")),
|
|
3667
|
+
/* @__PURE__ */ React77.createElement(Typography4, { align: "center", variant: "caption" }, __51("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
|
|
3596
3668
|
));
|
|
3597
3669
|
var useFilteredOptions = (searchValue) => {
|
|
3598
3670
|
const dynamicTags = usePropDynamicTags();
|
|
@@ -3625,25 +3697,25 @@ var DynamicSelectionControl = () => {
|
|
|
3625
3697
|
if (!dynamicTag) {
|
|
3626
3698
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
3627
3699
|
}
|
|
3628
|
-
return /* @__PURE__ */
|
|
3700
|
+
return /* @__PURE__ */ React78.createElement(Box5, null, /* @__PURE__ */ React78.createElement(
|
|
3629
3701
|
Tag,
|
|
3630
3702
|
{
|
|
3631
3703
|
fullWidth: true,
|
|
3632
3704
|
showActionsOnHover: true,
|
|
3633
3705
|
label: dynamicTag.label,
|
|
3634
|
-
startIcon: /* @__PURE__ */
|
|
3706
|
+
startIcon: /* @__PURE__ */ React78.createElement(DatabaseIcon2, { fontSize: SIZE4 }),
|
|
3635
3707
|
...bindTrigger2(selectionPopoverState),
|
|
3636
|
-
actions: /* @__PURE__ */
|
|
3708
|
+
actions: /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React78.createElement(
|
|
3637
3709
|
IconButton4,
|
|
3638
3710
|
{
|
|
3639
3711
|
size: SIZE4,
|
|
3640
3712
|
onClick: removeDynamicTag,
|
|
3641
|
-
"aria-label":
|
|
3713
|
+
"aria-label": __52("Remove dynamic value", "elementor")
|
|
3642
3714
|
},
|
|
3643
|
-
/* @__PURE__ */
|
|
3715
|
+
/* @__PURE__ */ React78.createElement(XIcon2, { fontSize: SIZE4 })
|
|
3644
3716
|
))
|
|
3645
3717
|
}
|
|
3646
|
-
), /* @__PURE__ */
|
|
3718
|
+
), /* @__PURE__ */ React78.createElement(
|
|
3647
3719
|
Popover2,
|
|
3648
3720
|
{
|
|
3649
3721
|
disablePortal: true,
|
|
@@ -3651,7 +3723,7 @@ var DynamicSelectionControl = () => {
|
|
|
3651
3723
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
3652
3724
|
...bindPopover2(selectionPopoverState)
|
|
3653
3725
|
},
|
|
3654
|
-
/* @__PURE__ */
|
|
3726
|
+
/* @__PURE__ */ React78.createElement(Stack20, null, /* @__PURE__ */ React78.createElement(Stack20, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React78.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React78.createElement(Typography5, { variant: "subtitle2" }, __52("Dynamic tags", "elementor")), /* @__PURE__ */ React78.createElement(IconButton4, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React78.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React78.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
3655
3727
|
));
|
|
3656
3728
|
};
|
|
3657
3729
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
@@ -3660,7 +3732,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
|
3660
3732
|
if (!hasDynamicSettings) {
|
|
3661
3733
|
return null;
|
|
3662
3734
|
}
|
|
3663
|
-
return /* @__PURE__ */
|
|
3735
|
+
return /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement(IconButton4, { size: SIZE4, ...bindTrigger2(popupState), "aria-label": __52("Settings", "elementor") }, /* @__PURE__ */ React78.createElement(SettingsIcon, { fontSize: SIZE4 })), /* @__PURE__ */ React78.createElement(
|
|
3664
3736
|
Popover2,
|
|
3665
3737
|
{
|
|
3666
3738
|
disablePortal: true,
|
|
@@ -3668,7 +3740,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
|
3668
3740
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
3669
3741
|
...bindPopover2(popupState)
|
|
3670
3742
|
},
|
|
3671
|
-
/* @__PURE__ */
|
|
3743
|
+
/* @__PURE__ */ React78.createElement(Paper, { component: Stack20, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React78.createElement(Stack20, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React78.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React78.createElement(Typography5, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React78.createElement(IconButton4, { sx: { ml: "auto" }, size: SIZE4, onClick: popupState.close }, /* @__PURE__ */ React78.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React78.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
3672
3744
|
));
|
|
3673
3745
|
};
|
|
3674
3746
|
var DynamicSettings = ({ controls }) => {
|
|
@@ -3677,10 +3749,10 @@ var DynamicSettings = ({ controls }) => {
|
|
|
3677
3749
|
if (!tabs.length) {
|
|
3678
3750
|
return null;
|
|
3679
3751
|
}
|
|
3680
|
-
return /* @__PURE__ */
|
|
3681
|
-
return /* @__PURE__ */
|
|
3752
|
+
return /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement(Tabs2, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React78.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React78.createElement(Divider8, null), tabs.map(({ value }, index) => {
|
|
3753
|
+
return /* @__PURE__ */ React78.createElement(TabPanel2, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React78.createElement(PopoverContent, { p: 2, gap: 2 }, value.items.map((item) => {
|
|
3682
3754
|
if (item.type === "control") {
|
|
3683
|
-
return /* @__PURE__ */
|
|
3755
|
+
return /* @__PURE__ */ React78.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
3684
3756
|
}
|
|
3685
3757
|
return null;
|
|
3686
3758
|
})));
|
|
@@ -3690,7 +3762,7 @@ var Control3 = ({ control }) => {
|
|
|
3690
3762
|
if (!getControl(control.type)) {
|
|
3691
3763
|
return null;
|
|
3692
3764
|
}
|
|
3693
|
-
return /* @__PURE__ */
|
|
3765
|
+
return /* @__PURE__ */ React78.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React78.createElement(Grid31, { container: true, gap: 0.75 }, control.label ? /* @__PURE__ */ React78.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(ControlFormLabel5, null, control.label)) : null, /* @__PURE__ */ React78.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(Control, { type: control.type, props: control.props }))));
|
|
3694
3766
|
};
|
|
3695
3767
|
|
|
3696
3768
|
// src/dynamics/dynamic-transformer.ts
|
|
@@ -3743,18 +3815,18 @@ function getDynamicValue(name, settings) {
|
|
|
3743
3815
|
}
|
|
3744
3816
|
|
|
3745
3817
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
3746
|
-
import * as
|
|
3818
|
+
import * as React79 from "react";
|
|
3747
3819
|
import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
|
|
3748
3820
|
import { DatabaseIcon as DatabaseIcon3 } from "@elementor/icons";
|
|
3749
|
-
import { __ as
|
|
3821
|
+
import { __ as __53 } from "@wordpress/i18n";
|
|
3750
3822
|
var usePropDynamicAction = () => {
|
|
3751
3823
|
const { propType } = useBoundProp6();
|
|
3752
3824
|
const visible = !!propType && supportsDynamic(propType);
|
|
3753
3825
|
return {
|
|
3754
3826
|
visible,
|
|
3755
3827
|
icon: DatabaseIcon3,
|
|
3756
|
-
title:
|
|
3757
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
3828
|
+
title: __53("Dynamic tags", "elementor"),
|
|
3829
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React79.createElement(DynamicSelection, { onSelect: closePopover })
|
|
3758
3830
|
};
|
|
3759
3831
|
};
|
|
3760
3832
|
|