@elementor/editor-editing-panel 1.36.0 → 1.37.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 +7 -0
- package/dist/index.js +328 -278
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +262 -212
- 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/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 React72 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 __48 } 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
|
|
996
|
+
import * as React71 from "react";
|
|
997
997
|
import { Fragment as Fragment8 } from "react";
|
|
998
998
|
import { Divider as Divider6, Stack as Stack17, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
|
|
999
|
-
import { __ as
|
|
999
|
+
import { __ as __47 } 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 React70 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 __46 } 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,168 @@ 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
|
|
2877
|
-
|
|
2878
|
-
// src/components/collapsible-content.tsx
|
|
2879
|
-
import * as React53 from "react";
|
|
2880
|
-
import { useState as useState12 } from "react";
|
|
2881
|
-
import { Button, Collapse as Collapse3, Stack as Stack15 } from "@elementor/ui";
|
|
2882
|
-
import { __ as __29 } from "@wordpress/i18n";
|
|
2883
|
-
var CollapsibleContent = ({ children, defaultOpen = false }) => {
|
|
2884
|
-
const [open, setOpen] = useState12(defaultOpen);
|
|
2885
|
-
const handleToggle = () => {
|
|
2886
|
-
setOpen((prevOpen) => !prevOpen);
|
|
2887
|
-
};
|
|
2888
|
-
return /* @__PURE__ */ React53.createElement(Stack15, null, /* @__PURE__ */ React53.createElement(
|
|
2889
|
-
Button,
|
|
2890
|
-
{
|
|
2891
|
-
fullWidth: true,
|
|
2892
|
-
size: "small",
|
|
2893
|
-
color: "secondary",
|
|
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));
|
|
2901
|
-
};
|
|
2951
|
+
import * as React69 from "react";
|
|
2902
2952
|
|
|
2903
2953
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
2904
|
-
import * as
|
|
2954
|
+
import * as React56 from "react";
|
|
2905
2955
|
import { FontFamilyControl } from "@elementor/editor-controls";
|
|
2906
|
-
import { Grid as
|
|
2907
|
-
import { __ as
|
|
2956
|
+
import { Grid as Grid17 } from "@elementor/ui";
|
|
2957
|
+
import { __ as __33 } from "@wordpress/i18n";
|
|
2908
2958
|
|
|
2909
2959
|
// src/components/style-sections/typography-section/hooks/use-font-families.ts
|
|
2910
2960
|
import { useMemo as useMemo5 } from "react";
|
|
2911
|
-
import { __ as
|
|
2961
|
+
import { __ as __32 } from "@wordpress/i18n";
|
|
2912
2962
|
var supportedCategories = {
|
|
2913
|
-
system:
|
|
2914
|
-
custom:
|
|
2915
|
-
googlefonts:
|
|
2963
|
+
system: __32("System", "elementor"),
|
|
2964
|
+
custom: __32("Custom Fonts", "elementor"),
|
|
2965
|
+
googlefonts: __32("Google Fonts", "elementor")
|
|
2916
2966
|
};
|
|
2917
2967
|
var getFontFamilies = () => {
|
|
2918
2968
|
const { controls } = getElementorConfig();
|
|
@@ -2949,188 +2999,188 @@ var FontFamilyField = () => {
|
|
|
2949
2999
|
if (fontFamilies.length === 0) {
|
|
2950
3000
|
return null;
|
|
2951
3001
|
}
|
|
2952
|
-
return /* @__PURE__ */
|
|
3002
|
+
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "font-family" }, /* @__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, __33("Font family", "elementor"))), /* @__PURE__ */ React56.createElement(Grid17, { item: true, xs: 6, sx: { minWidth: 0 } }, /* @__PURE__ */ React56.createElement(FontFamilyControl, { fontFamilies }))));
|
|
2953
3003
|
};
|
|
2954
3004
|
|
|
2955
3005
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
2956
|
-
import * as
|
|
3006
|
+
import * as React57 from "react";
|
|
2957
3007
|
import { SizeControl as SizeControl6 } from "@elementor/editor-controls";
|
|
2958
|
-
import { Grid as
|
|
2959
|
-
import { __ as
|
|
3008
|
+
import { Grid as Grid18 } from "@elementor/ui";
|
|
3009
|
+
import { __ as __34 } from "@wordpress/i18n";
|
|
2960
3010
|
var FontSizeField = () => {
|
|
2961
|
-
return /* @__PURE__ */
|
|
3011
|
+
return /* @__PURE__ */ React57.createElement(StylesField, { bind: "font-size" }, /* @__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, __34("Font size", "elementor"))), /* @__PURE__ */ React57.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(SizeControl6, null))));
|
|
2962
3012
|
};
|
|
2963
3013
|
|
|
2964
3014
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
2965
|
-
import * as
|
|
3015
|
+
import * as React58 from "react";
|
|
2966
3016
|
import { ControlFormLabel as ControlFormLabel4, ToggleControl as ToggleControl9 } from "@elementor/editor-controls";
|
|
2967
3017
|
import { ItalicIcon, MinusIcon as MinusIcon2 } from "@elementor/icons";
|
|
2968
|
-
import { Grid as
|
|
2969
|
-
import { __ as
|
|
3018
|
+
import { Grid as Grid19 } from "@elementor/ui";
|
|
3019
|
+
import { __ as __35 } from "@wordpress/i18n";
|
|
2970
3020
|
var options7 = [
|
|
2971
3021
|
{
|
|
2972
3022
|
value: "normal",
|
|
2973
|
-
label:
|
|
2974
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3023
|
+
label: __35("Normal", "elementor"),
|
|
3024
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(MinusIcon2, { fontSize: size }),
|
|
2975
3025
|
showTooltip: true
|
|
2976
3026
|
},
|
|
2977
3027
|
{
|
|
2978
3028
|
value: "italic",
|
|
2979
|
-
label:
|
|
2980
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3029
|
+
label: __35("Italic", "elementor"),
|
|
3030
|
+
renderContent: ({ size }) => /* @__PURE__ */ React58.createElement(ItalicIcon, { fontSize: size }),
|
|
2981
3031
|
showTooltip: true
|
|
2982
3032
|
}
|
|
2983
3033
|
];
|
|
2984
|
-
var FontStyleField = () => /* @__PURE__ */
|
|
3034
|
+
var FontStyleField = () => /* @__PURE__ */ React58.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React58.createElement(Grid19, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlFormLabel4, null, __35("Font style", "elementor"))), /* @__PURE__ */ React58.createElement(Grid19, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React58.createElement(ToggleControl9, { options: options7 }))));
|
|
2985
3035
|
|
|
2986
3036
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
2987
|
-
import * as
|
|
2988
|
-
import { SelectControl as
|
|
2989
|
-
import { Grid as
|
|
2990
|
-
import { __ as
|
|
3037
|
+
import * as React59 from "react";
|
|
3038
|
+
import { SelectControl as SelectControl6 } from "@elementor/editor-controls";
|
|
3039
|
+
import { Grid as Grid20 } from "@elementor/ui";
|
|
3040
|
+
import { __ as __36 } from "@wordpress/i18n";
|
|
2991
3041
|
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:
|
|
3042
|
+
{ value: "100", label: __36("100 - Thin", "elementor") },
|
|
3043
|
+
{ value: "200", label: __36("200 - Extra light", "elementor") },
|
|
3044
|
+
{ value: "300", label: __36("300 - Light", "elementor") },
|
|
3045
|
+
{ value: "400", label: __36("400 - Normal", "elementor") },
|
|
3046
|
+
{ value: "500", label: __36("500 - Medium", "elementor") },
|
|
3047
|
+
{ value: "600", label: __36("600 - Semi bold", "elementor") },
|
|
3048
|
+
{ value: "700", label: __36("700 - Bold", "elementor") },
|
|
3049
|
+
{ value: "800", label: __36("800 - Extra bold", "elementor") },
|
|
3050
|
+
{ value: "900", label: __36("900 - Black", "elementor") }
|
|
3001
3051
|
];
|
|
3002
3052
|
var FontWeightField = () => {
|
|
3003
|
-
return /* @__PURE__ */
|
|
3053
|
+
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "font-weight" }, /* @__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 weight", "elementor"))), /* @__PURE__ */ React59.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React59.createElement(SelectControl6, { options: fontWeightOptions }))));
|
|
3004
3054
|
};
|
|
3005
3055
|
|
|
3006
3056
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
3007
|
-
import * as
|
|
3057
|
+
import * as React60 from "react";
|
|
3008
3058
|
import { SizeControl as SizeControl7 } from "@elementor/editor-controls";
|
|
3009
|
-
import { Grid as
|
|
3010
|
-
import { __ as
|
|
3059
|
+
import { Grid as Grid21 } from "@elementor/ui";
|
|
3060
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
3011
3061
|
var LetterSpacingField = () => {
|
|
3012
|
-
return /* @__PURE__ */
|
|
3062
|
+
return /* @__PURE__ */ React60.createElement(StylesField, { bind: "letter-spacing" }, /* @__PURE__ */ React60.createElement(Grid21, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, __37("Letter spacing", "elementor"))), /* @__PURE__ */ React60.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeControl7, null))));
|
|
3013
3063
|
};
|
|
3014
3064
|
|
|
3015
3065
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
3016
|
-
import * as
|
|
3066
|
+
import * as React61 from "react";
|
|
3017
3067
|
import { SizeControl as SizeControl8 } from "@elementor/editor-controls";
|
|
3018
|
-
import { Grid as
|
|
3019
|
-
import { __ as
|
|
3068
|
+
import { Grid as Grid22 } from "@elementor/ui";
|
|
3069
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
3020
3070
|
var LineHeightField = () => {
|
|
3021
|
-
return /* @__PURE__ */
|
|
3071
|
+
return /* @__PURE__ */ React61.createElement(StylesField, { bind: "line-height" }, /* @__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("Line height", "elementor"))), /* @__PURE__ */ React61.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(SizeControl8, null))));
|
|
3022
3072
|
};
|
|
3023
3073
|
|
|
3024
3074
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
3025
|
-
import * as
|
|
3075
|
+
import * as React62 from "react";
|
|
3026
3076
|
import { ToggleControl as ToggleControl10 } from "@elementor/editor-controls";
|
|
3027
3077
|
import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from "@elementor/icons";
|
|
3028
|
-
import { Grid as
|
|
3029
|
-
import { __ as
|
|
3078
|
+
import { Grid as Grid23, withDirection as withDirection9 } from "@elementor/ui";
|
|
3079
|
+
import { __ as __39 } from "@wordpress/i18n";
|
|
3030
3080
|
var AlignStartIcon = withDirection9(AlignLeftIcon);
|
|
3031
3081
|
var AlignEndIcon = withDirection9(AlignRightIcon);
|
|
3032
3082
|
var options8 = [
|
|
3033
3083
|
{
|
|
3034
3084
|
value: "start",
|
|
3035
|
-
label:
|
|
3036
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3085
|
+
label: __39("Start", "elementor"),
|
|
3086
|
+
renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(AlignStartIcon, { fontSize: size }),
|
|
3037
3087
|
showTooltip: true
|
|
3038
3088
|
},
|
|
3039
3089
|
{
|
|
3040
3090
|
value: "center",
|
|
3041
|
-
label:
|
|
3042
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3091
|
+
label: __39("Center", "elementor"),
|
|
3092
|
+
renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(AlignCenterIcon, { fontSize: size }),
|
|
3043
3093
|
showTooltip: true
|
|
3044
3094
|
},
|
|
3045
3095
|
{
|
|
3046
3096
|
value: "end",
|
|
3047
|
-
label:
|
|
3048
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3097
|
+
label: __39("End", "elementor"),
|
|
3098
|
+
renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(AlignEndIcon, { fontSize: size }),
|
|
3049
3099
|
showTooltip: true
|
|
3050
3100
|
},
|
|
3051
3101
|
{
|
|
3052
3102
|
value: "justify",
|
|
3053
|
-
label:
|
|
3054
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3103
|
+
label: __39("Justify", "elementor"),
|
|
3104
|
+
renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(AlignJustifiedIcon, { fontSize: size }),
|
|
3055
3105
|
showTooltip: true
|
|
3056
3106
|
}
|
|
3057
3107
|
];
|
|
3058
3108
|
var TextAlignmentField = () => {
|
|
3059
|
-
return /* @__PURE__ */
|
|
3109
|
+
return /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-align" }, /* @__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("Text align", "elementor"))), /* @__PURE__ */ React62.createElement(Grid23, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React62.createElement(ToggleControl10, { options: options8 }))));
|
|
3060
3110
|
};
|
|
3061
3111
|
|
|
3062
3112
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
3063
|
-
import * as
|
|
3113
|
+
import * as React63 from "react";
|
|
3064
3114
|
import { ColorControl as ColorControl2 } from "@elementor/editor-controls";
|
|
3065
|
-
import { Grid as
|
|
3066
|
-
import { __ as
|
|
3115
|
+
import { Grid as Grid24 } from "@elementor/ui";
|
|
3116
|
+
import { __ as __40 } from "@wordpress/i18n";
|
|
3067
3117
|
var TextColorField = () => {
|
|
3068
|
-
return /* @__PURE__ */
|
|
3118
|
+
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "color" }, /* @__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("Text color", "elementor"))), /* @__PURE__ */ React63.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ColorControl2, null))));
|
|
3069
3119
|
};
|
|
3070
3120
|
|
|
3071
3121
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
3072
|
-
import * as
|
|
3122
|
+
import * as React64 from "react";
|
|
3073
3123
|
import { ToggleControl as ToggleControl11 } from "@elementor/editor-controls";
|
|
3074
3124
|
import { MinusIcon as MinusIcon3, OverlineIcon, StrikethroughIcon, UnderlineIcon } from "@elementor/icons";
|
|
3075
|
-
import { Grid as
|
|
3076
|
-
import { __ as
|
|
3125
|
+
import { Grid as Grid25 } from "@elementor/ui";
|
|
3126
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
3077
3127
|
var options9 = [
|
|
3078
3128
|
{
|
|
3079
3129
|
value: "none",
|
|
3080
|
-
label:
|
|
3081
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3130
|
+
label: __41("None", "elementor"),
|
|
3131
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(MinusIcon3, { fontSize: size }),
|
|
3082
3132
|
showTooltip: true,
|
|
3083
3133
|
exclusive: true
|
|
3084
3134
|
},
|
|
3085
3135
|
{
|
|
3086
3136
|
value: "underline",
|
|
3087
|
-
label:
|
|
3088
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3137
|
+
label: __41("Underline", "elementor"),
|
|
3138
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(UnderlineIcon, { fontSize: size }),
|
|
3089
3139
|
showTooltip: true
|
|
3090
3140
|
},
|
|
3091
3141
|
{
|
|
3092
3142
|
value: "line-through",
|
|
3093
|
-
label:
|
|
3094
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3143
|
+
label: __41("Line-through", "elementor"),
|
|
3144
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(StrikethroughIcon, { fontSize: size }),
|
|
3095
3145
|
showTooltip: true
|
|
3096
3146
|
},
|
|
3097
3147
|
{
|
|
3098
3148
|
value: "overline",
|
|
3099
|
-
label:
|
|
3100
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3149
|
+
label: __41("Overline", "elementor"),
|
|
3150
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(OverlineIcon, { fontSize: size }),
|
|
3101
3151
|
showTooltip: true
|
|
3102
3152
|
}
|
|
3103
3153
|
];
|
|
3104
|
-
var TextDecorationField = () => /* @__PURE__ */
|
|
3154
|
+
var TextDecorationField = () => /* @__PURE__ */ React64.createElement(StylesField, { bind: "text-decoration" }, /* @__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("Line decoration", "elementor"))), /* @__PURE__ */ React64.createElement(Grid25, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React64.createElement(ToggleControl11, { options: options9, exclusive: false }))));
|
|
3105
3155
|
|
|
3106
3156
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
3107
|
-
import * as
|
|
3157
|
+
import * as React65 from "react";
|
|
3108
3158
|
import { ToggleControl as ToggleControl12 } from "@elementor/editor-controls";
|
|
3109
3159
|
import { TextDirectionLtrIcon, TextDirectionRtlIcon } from "@elementor/icons";
|
|
3110
|
-
import { Grid as
|
|
3111
|
-
import { __ as
|
|
3160
|
+
import { Grid as Grid26 } from "@elementor/ui";
|
|
3161
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
3112
3162
|
var options10 = [
|
|
3113
3163
|
{
|
|
3114
3164
|
value: "ltr",
|
|
3115
|
-
label:
|
|
3116
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3165
|
+
label: __42("Left to right", "elementor"),
|
|
3166
|
+
renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(TextDirectionLtrIcon, { fontSize: size }),
|
|
3117
3167
|
showTooltip: true
|
|
3118
3168
|
},
|
|
3119
3169
|
{
|
|
3120
3170
|
value: "rtl",
|
|
3121
|
-
label:
|
|
3122
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3171
|
+
label: __42("Right to left", "elementor"),
|
|
3172
|
+
renderContent: ({ size }) => /* @__PURE__ */ React65.createElement(TextDirectionRtlIcon, { fontSize: size }),
|
|
3123
3173
|
showTooltip: true
|
|
3124
3174
|
}
|
|
3125
3175
|
];
|
|
3126
3176
|
var TextDirectionField = () => {
|
|
3127
|
-
return /* @__PURE__ */
|
|
3177
|
+
return /* @__PURE__ */ React65.createElement(StylesField, { bind: "direction" }, /* @__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("Direction", "elementor"))), /* @__PURE__ */ React65.createElement(Grid26, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React65.createElement(ToggleControl12, { options: options10 }))));
|
|
3128
3178
|
};
|
|
3129
3179
|
|
|
3130
3180
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
3131
|
-
import * as
|
|
3181
|
+
import * as React66 from "react";
|
|
3132
3182
|
import { StrokeControl } from "@elementor/editor-controls";
|
|
3133
|
-
import { __ as
|
|
3183
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
3134
3184
|
var initTextStroke = {
|
|
3135
3185
|
$$type: "stroke",
|
|
3136
3186
|
value: {
|
|
@@ -3156,64 +3206,64 @@ var TextStrokeField = () => {
|
|
|
3156
3206
|
setTextStroke(null);
|
|
3157
3207
|
};
|
|
3158
3208
|
const hasTextStroke = Boolean(textStroke);
|
|
3159
|
-
return /* @__PURE__ */
|
|
3209
|
+
return /* @__PURE__ */ React66.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React66.createElement(
|
|
3160
3210
|
AddOrRemoveContent,
|
|
3161
3211
|
{
|
|
3162
|
-
label:
|
|
3212
|
+
label: __43("Text stroke", "elementor"),
|
|
3163
3213
|
isAdded: hasTextStroke,
|
|
3164
3214
|
onAdd: addTextStroke,
|
|
3165
3215
|
onRemove: removeTextStroke
|
|
3166
3216
|
},
|
|
3167
|
-
/* @__PURE__ */
|
|
3217
|
+
/* @__PURE__ */ React66.createElement(StrokeControl, null)
|
|
3168
3218
|
));
|
|
3169
3219
|
};
|
|
3170
3220
|
|
|
3171
3221
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
3172
|
-
import * as
|
|
3222
|
+
import * as React67 from "react";
|
|
3173
3223
|
import { ToggleControl as ToggleControl13 } from "@elementor/editor-controls";
|
|
3174
3224
|
import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon as MinusIcon4 } from "@elementor/icons";
|
|
3175
|
-
import { Grid as
|
|
3176
|
-
import { __ as
|
|
3225
|
+
import { Grid as Grid27 } from "@elementor/ui";
|
|
3226
|
+
import { __ as __44 } from "@wordpress/i18n";
|
|
3177
3227
|
var options11 = [
|
|
3178
3228
|
{
|
|
3179
3229
|
value: "none",
|
|
3180
|
-
label:
|
|
3181
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3230
|
+
label: __44("None", "elementor"),
|
|
3231
|
+
renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(MinusIcon4, { fontSize: size }),
|
|
3182
3232
|
showTooltip: true
|
|
3183
3233
|
},
|
|
3184
3234
|
{
|
|
3185
3235
|
value: "capitalize",
|
|
3186
|
-
label:
|
|
3187
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3236
|
+
label: __44("Capitalize", "elementor"),
|
|
3237
|
+
renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(LetterCaseIcon, { fontSize: size }),
|
|
3188
3238
|
showTooltip: true
|
|
3189
3239
|
},
|
|
3190
3240
|
{
|
|
3191
3241
|
value: "uppercase",
|
|
3192
|
-
label:
|
|
3193
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3242
|
+
label: __44("Uppercase", "elementor"),
|
|
3243
|
+
renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(LetterCaseUpperIcon, { fontSize: size }),
|
|
3194
3244
|
showTooltip: true
|
|
3195
3245
|
},
|
|
3196
3246
|
{
|
|
3197
3247
|
value: "lowercase",
|
|
3198
|
-
label:
|
|
3199
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3248
|
+
label: __44("Lowercase", "elementor"),
|
|
3249
|
+
renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(LetterCaseLowerIcon, { fontSize: size }),
|
|
3200
3250
|
showTooltip: true
|
|
3201
3251
|
}
|
|
3202
3252
|
];
|
|
3203
|
-
var TransformField = () => /* @__PURE__ */
|
|
3253
|
+
var TransformField = () => /* @__PURE__ */ React67.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React67.createElement(Grid27, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React67.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(ControlLabel, null, __44("Text transform", "elementor"))), /* @__PURE__ */ React67.createElement(Grid27, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React67.createElement(ToggleControl13, { options: options11 }))));
|
|
3204
3254
|
|
|
3205
3255
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
3206
|
-
import * as
|
|
3256
|
+
import * as React68 from "react";
|
|
3207
3257
|
import { SizeControl as SizeControl9 } from "@elementor/editor-controls";
|
|
3208
|
-
import { Grid as
|
|
3209
|
-
import { __ as
|
|
3258
|
+
import { Grid as Grid28 } from "@elementor/ui";
|
|
3259
|
+
import { __ as __45 } from "@wordpress/i18n";
|
|
3210
3260
|
var WordSpacingField = () => {
|
|
3211
|
-
return /* @__PURE__ */
|
|
3261
|
+
return /* @__PURE__ */ React68.createElement(StylesField, { bind: "word-spacing" }, /* @__PURE__ */ React68.createElement(Grid28, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(ControlLabel, null, __45("Word spacing", "elementor"))), /* @__PURE__ */ React68.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(SizeControl9, null))));
|
|
3212
3262
|
};
|
|
3213
3263
|
|
|
3214
3264
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
3215
3265
|
var TypographySection = () => {
|
|
3216
|
-
return /* @__PURE__ */
|
|
3266
|
+
return /* @__PURE__ */ React69.createElement(SectionContent, null, /* @__PURE__ */ React69.createElement(FontFamilyField, null), /* @__PURE__ */ React69.createElement(FontWeightField, null), /* @__PURE__ */ React69.createElement(FontSizeField, null), /* @__PURE__ */ React69.createElement(PanelDivider, null), /* @__PURE__ */ React69.createElement(TextAlignmentField, null), /* @__PURE__ */ React69.createElement(TextColorField, null), /* @__PURE__ */ React69.createElement(CollapsibleContent, null, /* @__PURE__ */ React69.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React69.createElement(LineHeightField, null), /* @__PURE__ */ React69.createElement(LetterSpacingField, null), /* @__PURE__ */ React69.createElement(WordSpacingField, null), /* @__PURE__ */ React69.createElement(PanelDivider, null), /* @__PURE__ */ React69.createElement(TextDecorationField, null), /* @__PURE__ */ React69.createElement(TransformField, null), /* @__PURE__ */ React69.createElement(TextDirectionField, null), /* @__PURE__ */ React69.createElement(FontStyleField, null), /* @__PURE__ */ React69.createElement(TextStrokeField, null))));
|
|
3217
3267
|
};
|
|
3218
3268
|
|
|
3219
3269
|
// src/components/style-tab.tsx
|
|
@@ -3230,7 +3280,7 @@ var StyleTab = () => {
|
|
|
3230
3280
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
3231
3281
|
const [activeStyleState, setActiveStyleState] = useState13(null);
|
|
3232
3282
|
const breakpoint = useActiveBreakpoint();
|
|
3233
|
-
return /* @__PURE__ */
|
|
3283
|
+
return /* @__PURE__ */ React70.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React70.createElement(
|
|
3234
3284
|
StyleProvider,
|
|
3235
3285
|
{
|
|
3236
3286
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -3241,12 +3291,12 @@ var StyleTab = () => {
|
|
|
3241
3291
|
},
|
|
3242
3292
|
setMetaState: setActiveStyleState
|
|
3243
3293
|
},
|
|
3244
|
-
/* @__PURE__ */
|
|
3294
|
+
/* @__PURE__ */ React70.createElement(SessionStorageProvider2, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React70.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React70.createElement(ClassesHeader, null, /* @__PURE__ */ React70.createElement(CssClassSelector, null), /* @__PURE__ */ React70.createElement(Divider5, null)), /* @__PURE__ */ React70.createElement(SectionsList, null, /* @__PURE__ */ React70.createElement(Section, { title: __46("Layout", "elementor") }, /* @__PURE__ */ React70.createElement(LayoutSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: __46("Spacing", "elementor") }, /* @__PURE__ */ React70.createElement(SpacingSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: __46("Size", "elementor") }, /* @__PURE__ */ React70.createElement(SizeSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: __46("Position", "elementor") }, /* @__PURE__ */ React70.createElement(PositionSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: __46("Typography", "elementor") }, /* @__PURE__ */ React70.createElement(TypographySection, null)), /* @__PURE__ */ React70.createElement(Section, { title: __46("Background", "elementor") }, /* @__PURE__ */ React70.createElement(BackgroundSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: __46("Border", "elementor") }, /* @__PURE__ */ React70.createElement(BorderSection, null)), /* @__PURE__ */ React70.createElement(Section, { title: __46("Effects", "elementor") }, /* @__PURE__ */ React70.createElement(EffectsSection, null)))))
|
|
3245
3295
|
));
|
|
3246
3296
|
};
|
|
3247
3297
|
function ClassesHeader({ children }) {
|
|
3248
3298
|
const scrollDirection = useScrollDirection();
|
|
3249
|
-
return /* @__PURE__ */
|
|
3299
|
+
return /* @__PURE__ */ React70.createElement(Stack16, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
3250
3300
|
}
|
|
3251
3301
|
function useCurrentClassesProp() {
|
|
3252
3302
|
const { elementType } = useElement();
|
|
@@ -3265,14 +3315,14 @@ var EditingPanelTabs = () => {
|
|
|
3265
3315
|
return (
|
|
3266
3316
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
3267
3317
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
3268
|
-
/* @__PURE__ */
|
|
3318
|
+
/* @__PURE__ */ React71.createElement(Fragment8, { key: element.id }, /* @__PURE__ */ React71.createElement(PanelTabContent, null))
|
|
3269
3319
|
);
|
|
3270
3320
|
};
|
|
3271
3321
|
var PanelTabContent = () => {
|
|
3272
3322
|
const defaultComponentTab = "settings";
|
|
3273
3323
|
const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
3274
3324
|
const { getTabProps, getTabPanelProps, getTabsProps } = useTabs(currentTab);
|
|
3275
|
-
return /* @__PURE__ */
|
|
3325
|
+
return /* @__PURE__ */ React71.createElement(ScrollProvider, null, /* @__PURE__ */ React71.createElement(Stack17, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React71.createElement(Stack17, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React71.createElement(
|
|
3276
3326
|
Tabs,
|
|
3277
3327
|
{
|
|
3278
3328
|
variant: "fullWidth",
|
|
@@ -3284,9 +3334,9 @@ var PanelTabContent = () => {
|
|
|
3284
3334
|
setCurrentTab(newValue);
|
|
3285
3335
|
}
|
|
3286
3336
|
},
|
|
3287
|
-
/* @__PURE__ */
|
|
3288
|
-
/* @__PURE__ */
|
|
3289
|
-
), /* @__PURE__ */
|
|
3337
|
+
/* @__PURE__ */ React71.createElement(Tab, { label: __47("General", "elementor"), ...getTabProps("settings") }),
|
|
3338
|
+
/* @__PURE__ */ React71.createElement(Tab, { label: __47("Style", "elementor"), ...getTabProps("style") })
|
|
3339
|
+
), /* @__PURE__ */ React71.createElement(Divider6, null)), /* @__PURE__ */ React71.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React71.createElement(SettingsTab, null)), /* @__PURE__ */ React71.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React71.createElement(StyleTab, null))));
|
|
3290
3340
|
};
|
|
3291
3341
|
|
|
3292
3342
|
// src/components/editing-panel.tsx
|
|
@@ -3298,8 +3348,8 @@ var EditingPanel = () => {
|
|
|
3298
3348
|
if (!element || !elementType) {
|
|
3299
3349
|
return null;
|
|
3300
3350
|
}
|
|
3301
|
-
const panelTitle =
|
|
3302
|
-
return /* @__PURE__ */
|
|
3351
|
+
const panelTitle = __48("Edit %s", "elementor").replace("%s", elementType.title);
|
|
3352
|
+
return /* @__PURE__ */ React72.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React72.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React72.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React72.createElement(ThemeProvider9, null, /* @__PURE__ */ React72.createElement(Panel, null, /* @__PURE__ */ React72.createElement(PanelHeader, null, /* @__PURE__ */ React72.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React72.createElement(AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React72.createElement(PanelBody, null, /* @__PURE__ */ React72.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React72.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React72.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React72.createElement(EditingPanelTabs, null)))))))));
|
|
3303
3353
|
};
|
|
3304
3354
|
|
|
3305
3355
|
// src/panel.ts
|
|
@@ -3351,7 +3401,7 @@ var EditingPanelHooks = () => {
|
|
|
3351
3401
|
import { settingsTransformersRegistry, styleTransformersRegistry as styleTransformersRegistry2 } from "@elementor/editor-canvas";
|
|
3352
3402
|
|
|
3353
3403
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
3354
|
-
import * as
|
|
3404
|
+
import * as React76 from "react";
|
|
3355
3405
|
import { ControlFormLabel as ControlFormLabel5, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
|
|
3356
3406
|
import { DatabaseIcon as DatabaseIcon2, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
|
|
3357
3407
|
import {
|
|
@@ -3359,7 +3409,7 @@ import {
|
|
|
3359
3409
|
bindTrigger as bindTrigger2,
|
|
3360
3410
|
Box as Box5,
|
|
3361
3411
|
Divider as Divider8,
|
|
3362
|
-
Grid as
|
|
3412
|
+
Grid as Grid29,
|
|
3363
3413
|
IconButton as IconButton4,
|
|
3364
3414
|
Paper,
|
|
3365
3415
|
Popover as Popover2,
|
|
@@ -3372,12 +3422,12 @@ import {
|
|
|
3372
3422
|
usePopupState as usePopupState3,
|
|
3373
3423
|
useTabs as useTabs2
|
|
3374
3424
|
} from "@elementor/ui";
|
|
3375
|
-
import { __ as
|
|
3425
|
+
import { __ as __50 } from "@wordpress/i18n";
|
|
3376
3426
|
|
|
3377
3427
|
// src/components/popover-content.tsx
|
|
3378
|
-
import * as
|
|
3428
|
+
import * as React73 from "react";
|
|
3379
3429
|
import { Stack as Stack18 } from "@elementor/ui";
|
|
3380
|
-
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */
|
|
3430
|
+
var PopoverContent = ({ alignItems, gap = 1.5, p, children }) => /* @__PURE__ */ React73.createElement(Stack18, { alignItems, gap, p }, children);
|
|
3381
3431
|
|
|
3382
3432
|
// src/hooks/use-persist-dynamic-value.ts
|
|
3383
3433
|
import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
|
|
@@ -3388,7 +3438,7 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
3388
3438
|
};
|
|
3389
3439
|
|
|
3390
3440
|
// src/dynamics/dynamic-control.tsx
|
|
3391
|
-
import * as
|
|
3441
|
+
import * as React74 from "react";
|
|
3392
3442
|
import { PropKeyProvider as PropKeyProvider3, PropProvider as PropProvider3, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
|
|
3393
3443
|
|
|
3394
3444
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
@@ -3490,11 +3540,11 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
3490
3540
|
});
|
|
3491
3541
|
};
|
|
3492
3542
|
const propType = createTopLevelOjectType({ schema: dynamicTag.props_schema });
|
|
3493
|
-
return /* @__PURE__ */
|
|
3543
|
+
return /* @__PURE__ */ React74.createElement(PropProvider3, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React74.createElement(PropKeyProvider3, { bind }, children));
|
|
3494
3544
|
};
|
|
3495
3545
|
|
|
3496
3546
|
// src/dynamics/components/dynamic-selection.tsx
|
|
3497
|
-
import * as
|
|
3547
|
+
import * as React75 from "react";
|
|
3498
3548
|
import { Fragment as Fragment9, useState as useState14 } from "react";
|
|
3499
3549
|
import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
|
|
3500
3550
|
import { DatabaseIcon, SearchIcon } from "@elementor/icons";
|
|
@@ -3510,7 +3560,7 @@ import {
|
|
|
3510
3560
|
TextField as TextField2,
|
|
3511
3561
|
Typography as Typography4
|
|
3512
3562
|
} from "@elementor/ui";
|
|
3513
|
-
import { __ as
|
|
3563
|
+
import { __ as __49 } from "@wordpress/i18n";
|
|
3514
3564
|
var SIZE3 = "tiny";
|
|
3515
3565
|
var DynamicSelection = ({ onSelect }) => {
|
|
3516
3566
|
const [searchValue, setSearchValue] = useState14("");
|
|
@@ -3531,19 +3581,19 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3531
3581
|
setValue({ name: value, settings: { label } });
|
|
3532
3582
|
onSelect?.();
|
|
3533
3583
|
};
|
|
3534
|
-
return /* @__PURE__ */
|
|
3584
|
+
return /* @__PURE__ */ React75.createElement(Stack19, null, hasNoDynamicTags ? /* @__PURE__ */ React75.createElement(NoDynamicTags, null) : /* @__PURE__ */ React75.createElement(Fragment9, null, /* @__PURE__ */ React75.createElement(Box4, { px: 1.5, pb: 1 }, /* @__PURE__ */ React75.createElement(
|
|
3535
3585
|
TextField2,
|
|
3536
3586
|
{
|
|
3537
3587
|
fullWidth: true,
|
|
3538
3588
|
size: SIZE3,
|
|
3539
3589
|
value: searchValue,
|
|
3540
3590
|
onChange: handleSearch,
|
|
3541
|
-
placeholder:
|
|
3591
|
+
placeholder: __49("Search dynamic tags\u2026", "elementor"),
|
|
3542
3592
|
InputProps: {
|
|
3543
|
-
startAdornment: /* @__PURE__ */
|
|
3593
|
+
startAdornment: /* @__PURE__ */ React75.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React75.createElement(SearchIcon, { fontSize: SIZE3 }))
|
|
3544
3594
|
}
|
|
3545
3595
|
}
|
|
3546
|
-
)), /* @__PURE__ */
|
|
3596
|
+
)), /* @__PURE__ */ React75.createElement(Divider7, null), /* @__PURE__ */ React75.createElement(Box4, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React75.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React75.createElement(Fragment9, { key: index }, /* @__PURE__ */ React75.createElement(
|
|
3547
3597
|
MenuSubheader2,
|
|
3548
3598
|
{
|
|
3549
3599
|
sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
|
|
@@ -3551,7 +3601,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3551
3601
|
dynamicGroups?.[category]?.title || category
|
|
3552
3602
|
), items3.map(({ value, label: tagLabel }) => {
|
|
3553
3603
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
3554
|
-
return /* @__PURE__ */
|
|
3604
|
+
return /* @__PURE__ */ React75.createElement(
|
|
3555
3605
|
MenuItem,
|
|
3556
3606
|
{
|
|
3557
3607
|
key: value,
|
|
@@ -3562,9 +3612,9 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3562
3612
|
},
|
|
3563
3613
|
tagLabel
|
|
3564
3614
|
);
|
|
3565
|
-
})))) : /* @__PURE__ */
|
|
3615
|
+
})))) : /* @__PURE__ */ React75.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") }))));
|
|
3566
3616
|
};
|
|
3567
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
3617
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React75.createElement(
|
|
3568
3618
|
Stack19,
|
|
3569
3619
|
{
|
|
3570
3620
|
gap: 1,
|
|
@@ -3575,11 +3625,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React73.createElem
|
|
|
3575
3625
|
color: "text.secondary",
|
|
3576
3626
|
sx: { pb: 3.5 }
|
|
3577
3627
|
},
|
|
3578
|
-
/* @__PURE__ */
|
|
3579
|
-
/* @__PURE__ */
|
|
3580
|
-
/* @__PURE__ */
|
|
3628
|
+
/* @__PURE__ */ React75.createElement(DatabaseIcon, { fontSize: "large" }),
|
|
3629
|
+
/* @__PURE__ */ React75.createElement(Typography4, { align: "center", variant: "subtitle2" }, __49("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React75.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
3630
|
+
/* @__PURE__ */ React75.createElement(Typography4, { align: "center", variant: "caption" }, __49("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React75.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __49("Clear & try again", "elementor")))
|
|
3581
3631
|
);
|
|
3582
|
-
var NoDynamicTags = () => /* @__PURE__ */
|
|
3632
|
+
var NoDynamicTags = () => /* @__PURE__ */ React75.createElement(Box4, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React75.createElement(Divider7, null), /* @__PURE__ */ React75.createElement(
|
|
3583
3633
|
Stack19,
|
|
3584
3634
|
{
|
|
3585
3635
|
gap: 1,
|
|
@@ -3590,9 +3640,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(Box4, { sx: { ov
|
|
|
3590
3640
|
color: "text.secondary",
|
|
3591
3641
|
sx: { pb: 3.5 }
|
|
3592
3642
|
},
|
|
3593
|
-
/* @__PURE__ */
|
|
3594
|
-
/* @__PURE__ */
|
|
3595
|
-
/* @__PURE__ */
|
|
3643
|
+
/* @__PURE__ */ React75.createElement(DatabaseIcon, { fontSize: "large" }),
|
|
3644
|
+
/* @__PURE__ */ React75.createElement(Typography4, { align: "center", variant: "subtitle2" }, __49("Streamline your workflow with dynamic tags", "elementor")),
|
|
3645
|
+
/* @__PURE__ */ React75.createElement(Typography4, { align: "center", variant: "caption" }, __49("You\u2019ll need Elementor Pro to use this feature.", "elementor"))
|
|
3596
3646
|
));
|
|
3597
3647
|
var useFilteredOptions = (searchValue) => {
|
|
3598
3648
|
const dynamicTags = usePropDynamicTags();
|
|
@@ -3625,25 +3675,25 @@ var DynamicSelectionControl = () => {
|
|
|
3625
3675
|
if (!dynamicTag) {
|
|
3626
3676
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
3627
3677
|
}
|
|
3628
|
-
return /* @__PURE__ */
|
|
3678
|
+
return /* @__PURE__ */ React76.createElement(Box5, null, /* @__PURE__ */ React76.createElement(
|
|
3629
3679
|
Tag,
|
|
3630
3680
|
{
|
|
3631
3681
|
fullWidth: true,
|
|
3632
3682
|
showActionsOnHover: true,
|
|
3633
3683
|
label: dynamicTag.label,
|
|
3634
|
-
startIcon: /* @__PURE__ */
|
|
3684
|
+
startIcon: /* @__PURE__ */ React76.createElement(DatabaseIcon2, { fontSize: SIZE4 }),
|
|
3635
3685
|
...bindTrigger2(selectionPopoverState),
|
|
3636
|
-
actions: /* @__PURE__ */
|
|
3686
|
+
actions: /* @__PURE__ */ React76.createElement(React76.Fragment, null, /* @__PURE__ */ React76.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React76.createElement(
|
|
3637
3687
|
IconButton4,
|
|
3638
3688
|
{
|
|
3639
3689
|
size: SIZE4,
|
|
3640
3690
|
onClick: removeDynamicTag,
|
|
3641
|
-
"aria-label":
|
|
3691
|
+
"aria-label": __50("Remove dynamic value", "elementor")
|
|
3642
3692
|
},
|
|
3643
|
-
/* @__PURE__ */
|
|
3693
|
+
/* @__PURE__ */ React76.createElement(XIcon2, { fontSize: SIZE4 })
|
|
3644
3694
|
))
|
|
3645
3695
|
}
|
|
3646
|
-
), /* @__PURE__ */
|
|
3696
|
+
), /* @__PURE__ */ React76.createElement(
|
|
3647
3697
|
Popover2,
|
|
3648
3698
|
{
|
|
3649
3699
|
disablePortal: true,
|
|
@@ -3651,7 +3701,7 @@ var DynamicSelectionControl = () => {
|
|
|
3651
3701
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
3652
3702
|
...bindPopover2(selectionPopoverState)
|
|
3653
3703
|
},
|
|
3654
|
-
/* @__PURE__ */
|
|
3704
|
+
/* @__PURE__ */ React76.createElement(Stack20, null, /* @__PURE__ */ React76.createElement(Stack20, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React76.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React76.createElement(Typography5, { variant: "subtitle2" }, __50("Dynamic tags", "elementor")), /* @__PURE__ */ React76.createElement(IconButton4, { size: SIZE4, sx: { ml: "auto" }, onClick: selectionPopoverState.close }, /* @__PURE__ */ React76.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React76.createElement(DynamicSelection, { onSelect: selectionPopoverState.close }))
|
|
3655
3705
|
));
|
|
3656
3706
|
};
|
|
3657
3707
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
@@ -3660,7 +3710,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
|
3660
3710
|
if (!hasDynamicSettings) {
|
|
3661
3711
|
return null;
|
|
3662
3712
|
}
|
|
3663
|
-
return /* @__PURE__ */
|
|
3713
|
+
return /* @__PURE__ */ React76.createElement(React76.Fragment, null, /* @__PURE__ */ React76.createElement(IconButton4, { size: SIZE4, ...bindTrigger2(popupState), "aria-label": __50("Settings", "elementor") }, /* @__PURE__ */ React76.createElement(SettingsIcon, { fontSize: SIZE4 })), /* @__PURE__ */ React76.createElement(
|
|
3664
3714
|
Popover2,
|
|
3665
3715
|
{
|
|
3666
3716
|
disablePortal: true,
|
|
@@ -3668,7 +3718,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
|
3668
3718
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
3669
3719
|
...bindPopover2(popupState)
|
|
3670
3720
|
},
|
|
3671
|
-
/* @__PURE__ */
|
|
3721
|
+
/* @__PURE__ */ React76.createElement(Paper, { component: Stack20, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React76.createElement(Stack20, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React76.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React76.createElement(Typography5, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React76.createElement(IconButton4, { sx: { ml: "auto" }, size: SIZE4, onClick: popupState.close }, /* @__PURE__ */ React76.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React76.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
|
|
3672
3722
|
));
|
|
3673
3723
|
};
|
|
3674
3724
|
var DynamicSettings = ({ controls }) => {
|
|
@@ -3677,10 +3727,10 @@ var DynamicSettings = ({ controls }) => {
|
|
|
3677
3727
|
if (!tabs.length) {
|
|
3678
3728
|
return null;
|
|
3679
3729
|
}
|
|
3680
|
-
return /* @__PURE__ */
|
|
3681
|
-
return /* @__PURE__ */
|
|
3730
|
+
return /* @__PURE__ */ React76.createElement(React76.Fragment, null, /* @__PURE__ */ React76.createElement(Tabs2, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React76.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React76.createElement(Divider8, null), tabs.map(({ value }, index) => {
|
|
3731
|
+
return /* @__PURE__ */ React76.createElement(TabPanel2, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React76.createElement(PopoverContent, { p: 2, gap: 2 }, value.items.map((item) => {
|
|
3682
3732
|
if (item.type === "control") {
|
|
3683
|
-
return /* @__PURE__ */
|
|
3733
|
+
return /* @__PURE__ */ React76.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
3684
3734
|
}
|
|
3685
3735
|
return null;
|
|
3686
3736
|
})));
|
|
@@ -3690,7 +3740,7 @@ var Control3 = ({ control }) => {
|
|
|
3690
3740
|
if (!getControl(control.type)) {
|
|
3691
3741
|
return null;
|
|
3692
3742
|
}
|
|
3693
|
-
return /* @__PURE__ */
|
|
3743
|
+
return /* @__PURE__ */ React76.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React76.createElement(Grid29, { container: true, gap: 0.75 }, control.label ? /* @__PURE__ */ React76.createElement(Grid29, { item: true, xs: 12 }, /* @__PURE__ */ React76.createElement(ControlFormLabel5, null, control.label)) : null, /* @__PURE__ */ React76.createElement(Grid29, { item: true, xs: 12 }, /* @__PURE__ */ React76.createElement(Control, { type: control.type, props: control.props }))));
|
|
3694
3744
|
};
|
|
3695
3745
|
|
|
3696
3746
|
// src/dynamics/dynamic-transformer.ts
|
|
@@ -3743,18 +3793,18 @@ function getDynamicValue(name, settings) {
|
|
|
3743
3793
|
}
|
|
3744
3794
|
|
|
3745
3795
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
3746
|
-
import * as
|
|
3796
|
+
import * as React77 from "react";
|
|
3747
3797
|
import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
|
|
3748
3798
|
import { DatabaseIcon as DatabaseIcon3 } from "@elementor/icons";
|
|
3749
|
-
import { __ as
|
|
3799
|
+
import { __ as __51 } from "@wordpress/i18n";
|
|
3750
3800
|
var usePropDynamicAction = () => {
|
|
3751
3801
|
const { propType } = useBoundProp6();
|
|
3752
3802
|
const visible = !!propType && supportsDynamic(propType);
|
|
3753
3803
|
return {
|
|
3754
3804
|
visible,
|
|
3755
3805
|
icon: DatabaseIcon3,
|
|
3756
|
-
title:
|
|
3757
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
3806
|
+
title: __51("Dynamic tags", "elementor"),
|
|
3807
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React77.createElement(DynamicSelection, { onSelect: closePopover })
|
|
3758
3808
|
};
|
|
3759
3809
|
};
|
|
3760
3810
|
|