@elementor/editor-editing-panel 1.37.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 +6 -0
- package/dist/index.js +231 -209
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +183 -161
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- 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/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";
|
|
@@ -1229,13 +1229,13 @@ var Control2 = ({ control }) => {
|
|
|
1229
1229
|
};
|
|
1230
1230
|
|
|
1231
1231
|
// src/components/style-tab.tsx
|
|
1232
|
-
import * as
|
|
1232
|
+
import * as React72 from "react";
|
|
1233
1233
|
import { useState as useState13 } from "react";
|
|
1234
1234
|
import { CLASSES_PROP_KEY } from "@elementor/editor-props";
|
|
1235
1235
|
import { useActiveBreakpoint } from "@elementor/editor-responsive";
|
|
1236
1236
|
import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
|
|
1237
1237
|
import { Divider as Divider5, Stack as Stack16 } from "@elementor/ui";
|
|
1238
|
-
import { __ as
|
|
1238
|
+
import { __ as __48 } from "@wordpress/i18n";
|
|
1239
1239
|
|
|
1240
1240
|
// src/contexts/styles-inheritance-context.tsx
|
|
1241
1241
|
import * as React17 from "react";
|
|
@@ -2948,21 +2948,40 @@ var SpacingSection = () => {
|
|
|
2948
2948
|
};
|
|
2949
2949
|
|
|
2950
2950
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
2951
|
-
import * as
|
|
2951
|
+
import * as React71 from "react";
|
|
2952
|
+
import { isExperimentActive as isExperimentActive6 } from "@elementor/editor-v1-adapters";
|
|
2952
2953
|
|
|
2953
|
-
// src/components/style-sections/typography-section/
|
|
2954
|
+
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
2954
2955
|
import * as React56 from "react";
|
|
2955
|
-
import {
|
|
2956
|
+
import { NumberControl as NumberControl4 } from "@elementor/editor-controls";
|
|
2956
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";
|
|
2957
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))));
|
|
2970
|
+
};
|
|
2971
|
+
|
|
2972
|
+
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
2973
|
+
import * as React58 from "react";
|
|
2974
|
+
import { FontFamilyControl } from "@elementor/editor-controls";
|
|
2975
|
+
import { Grid as Grid19 } from "@elementor/ui";
|
|
2976
|
+
import { __ as __35 } from "@wordpress/i18n";
|
|
2958
2977
|
|
|
2959
2978
|
// src/components/style-sections/typography-section/hooks/use-font-families.ts
|
|
2960
2979
|
import { useMemo as useMemo5 } from "react";
|
|
2961
|
-
import { __ as
|
|
2980
|
+
import { __ as __34 } from "@wordpress/i18n";
|
|
2962
2981
|
var supportedCategories = {
|
|
2963
|
-
system:
|
|
2964
|
-
custom:
|
|
2965
|
-
googlefonts:
|
|
2982
|
+
system: __34("System", "elementor"),
|
|
2983
|
+
custom: __34("Custom Fonts", "elementor"),
|
|
2984
|
+
googlefonts: __34("Google Fonts", "elementor")
|
|
2966
2985
|
};
|
|
2967
2986
|
var getFontFamilies = () => {
|
|
2968
2987
|
const { controls } = getElementorConfig();
|
|
@@ -2999,188 +3018,188 @@ var FontFamilyField = () => {
|
|
|
2999
3018
|
if (fontFamilies.length === 0) {
|
|
3000
3019
|
return null;
|
|
3001
3020
|
}
|
|
3002
|
-
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 }))));
|
|
3003
3022
|
};
|
|
3004
3023
|
|
|
3005
3024
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
3006
|
-
import * as
|
|
3007
|
-
import { SizeControl as
|
|
3008
|
-
import { Grid as
|
|
3009
|
-
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";
|
|
3010
3029
|
var FontSizeField = () => {
|
|
3011
|
-
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))));
|
|
3012
3031
|
};
|
|
3013
3032
|
|
|
3014
3033
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
3015
|
-
import * as
|
|
3034
|
+
import * as React60 from "react";
|
|
3016
3035
|
import { ControlFormLabel as ControlFormLabel4, ToggleControl as ToggleControl9 } from "@elementor/editor-controls";
|
|
3017
3036
|
import { ItalicIcon, MinusIcon as MinusIcon2 } from "@elementor/icons";
|
|
3018
|
-
import { Grid as
|
|
3019
|
-
import { __ as
|
|
3037
|
+
import { Grid as Grid21 } from "@elementor/ui";
|
|
3038
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
3020
3039
|
var options7 = [
|
|
3021
3040
|
{
|
|
3022
3041
|
value: "normal",
|
|
3023
|
-
label:
|
|
3024
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3042
|
+
label: __37("Normal", "elementor"),
|
|
3043
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(MinusIcon2, { fontSize: size }),
|
|
3025
3044
|
showTooltip: true
|
|
3026
3045
|
},
|
|
3027
3046
|
{
|
|
3028
3047
|
value: "italic",
|
|
3029
|
-
label:
|
|
3030
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3048
|
+
label: __37("Italic", "elementor"),
|
|
3049
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(ItalicIcon, { fontSize: size }),
|
|
3031
3050
|
showTooltip: true
|
|
3032
3051
|
}
|
|
3033
3052
|
];
|
|
3034
|
-
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 }))));
|
|
3035
3054
|
|
|
3036
3055
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
3037
|
-
import * as
|
|
3056
|
+
import * as React61 from "react";
|
|
3038
3057
|
import { SelectControl as SelectControl6 } from "@elementor/editor-controls";
|
|
3039
|
-
import { Grid as
|
|
3040
|
-
import { __ as
|
|
3058
|
+
import { Grid as Grid22 } from "@elementor/ui";
|
|
3059
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
3041
3060
|
var fontWeightOptions = [
|
|
3042
|
-
{ value: "100", label:
|
|
3043
|
-
{ value: "200", label:
|
|
3044
|
-
{ value: "300", label:
|
|
3045
|
-
{ value: "400", label:
|
|
3046
|
-
{ value: "500", label:
|
|
3047
|
-
{ value: "600", label:
|
|
3048
|
-
{ value: "700", label:
|
|
3049
|
-
{ value: "800", label:
|
|
3050
|
-
{ 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") }
|
|
3051
3070
|
];
|
|
3052
3071
|
var FontWeightField = () => {
|
|
3053
|
-
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 }))));
|
|
3054
3073
|
};
|
|
3055
3074
|
|
|
3056
3075
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
3057
|
-
import * as
|
|
3058
|
-
import { SizeControl as
|
|
3059
|
-
import { Grid as
|
|
3060
|
-
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";
|
|
3061
3080
|
var LetterSpacingField = () => {
|
|
3062
|
-
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))));
|
|
3063
3082
|
};
|
|
3064
3083
|
|
|
3065
3084
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
3066
|
-
import * as
|
|
3067
|
-
import { SizeControl as
|
|
3068
|
-
import { Grid as
|
|
3069
|
-
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";
|
|
3070
3089
|
var LineHeightField = () => {
|
|
3071
|
-
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))));
|
|
3072
3091
|
};
|
|
3073
3092
|
|
|
3074
3093
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
3075
|
-
import * as
|
|
3094
|
+
import * as React64 from "react";
|
|
3076
3095
|
import { ToggleControl as ToggleControl10 } from "@elementor/editor-controls";
|
|
3077
3096
|
import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from "@elementor/icons";
|
|
3078
|
-
import { Grid as
|
|
3079
|
-
import { __ as
|
|
3097
|
+
import { Grid as Grid25, withDirection as withDirection9 } from "@elementor/ui";
|
|
3098
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
3080
3099
|
var AlignStartIcon = withDirection9(AlignLeftIcon);
|
|
3081
3100
|
var AlignEndIcon = withDirection9(AlignRightIcon);
|
|
3082
3101
|
var options8 = [
|
|
3083
3102
|
{
|
|
3084
3103
|
value: "start",
|
|
3085
|
-
label:
|
|
3086
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3104
|
+
label: __41("Start", "elementor"),
|
|
3105
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(AlignStartIcon, { fontSize: size }),
|
|
3087
3106
|
showTooltip: true
|
|
3088
3107
|
},
|
|
3089
3108
|
{
|
|
3090
3109
|
value: "center",
|
|
3091
|
-
label:
|
|
3092
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3110
|
+
label: __41("Center", "elementor"),
|
|
3111
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(AlignCenterIcon, { fontSize: size }),
|
|
3093
3112
|
showTooltip: true
|
|
3094
3113
|
},
|
|
3095
3114
|
{
|
|
3096
3115
|
value: "end",
|
|
3097
|
-
label:
|
|
3098
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3116
|
+
label: __41("End", "elementor"),
|
|
3117
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(AlignEndIcon, { fontSize: size }),
|
|
3099
3118
|
showTooltip: true
|
|
3100
3119
|
},
|
|
3101
3120
|
{
|
|
3102
3121
|
value: "justify",
|
|
3103
|
-
label:
|
|
3104
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3122
|
+
label: __41("Justify", "elementor"),
|
|
3123
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(AlignJustifiedIcon, { fontSize: size }),
|
|
3105
3124
|
showTooltip: true
|
|
3106
3125
|
}
|
|
3107
3126
|
];
|
|
3108
3127
|
var TextAlignmentField = () => {
|
|
3109
|
-
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 }))));
|
|
3110
3129
|
};
|
|
3111
3130
|
|
|
3112
3131
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
3113
|
-
import * as
|
|
3132
|
+
import * as React65 from "react";
|
|
3114
3133
|
import { ColorControl as ColorControl2 } from "@elementor/editor-controls";
|
|
3115
|
-
import { Grid as
|
|
3116
|
-
import { __ as
|
|
3134
|
+
import { Grid as Grid26 } from "@elementor/ui";
|
|
3135
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
3117
3136
|
var TextColorField = () => {
|
|
3118
|
-
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))));
|
|
3119
3138
|
};
|
|
3120
3139
|
|
|
3121
3140
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
3122
|
-
import * as
|
|
3141
|
+
import * as React66 from "react";
|
|
3123
3142
|
import { ToggleControl as ToggleControl11 } from "@elementor/editor-controls";
|
|
3124
3143
|
import { MinusIcon as MinusIcon3, OverlineIcon, StrikethroughIcon, UnderlineIcon } from "@elementor/icons";
|
|
3125
|
-
import { Grid as
|
|
3126
|
-
import { __ as
|
|
3144
|
+
import { Grid as Grid27 } from "@elementor/ui";
|
|
3145
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
3127
3146
|
var options9 = [
|
|
3128
3147
|
{
|
|
3129
3148
|
value: "none",
|
|
3130
|
-
label:
|
|
3131
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3149
|
+
label: __43("None", "elementor"),
|
|
3150
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(MinusIcon3, { fontSize: size }),
|
|
3132
3151
|
showTooltip: true,
|
|
3133
3152
|
exclusive: true
|
|
3134
3153
|
},
|
|
3135
3154
|
{
|
|
3136
3155
|
value: "underline",
|
|
3137
|
-
label:
|
|
3138
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3156
|
+
label: __43("Underline", "elementor"),
|
|
3157
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(UnderlineIcon, { fontSize: size }),
|
|
3139
3158
|
showTooltip: true
|
|
3140
3159
|
},
|
|
3141
3160
|
{
|
|
3142
3161
|
value: "line-through",
|
|
3143
|
-
label:
|
|
3144
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3162
|
+
label: __43("Line-through", "elementor"),
|
|
3163
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(StrikethroughIcon, { fontSize: size }),
|
|
3145
3164
|
showTooltip: true
|
|
3146
3165
|
},
|
|
3147
3166
|
{
|
|
3148
3167
|
value: "overline",
|
|
3149
|
-
label:
|
|
3150
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3168
|
+
label: __43("Overline", "elementor"),
|
|
3169
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(OverlineIcon, { fontSize: size }),
|
|
3151
3170
|
showTooltip: true
|
|
3152
3171
|
}
|
|
3153
3172
|
];
|
|
3154
|
-
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 }))));
|
|
3155
3174
|
|
|
3156
3175
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
3157
|
-
import * as
|
|
3176
|
+
import * as React67 from "react";
|
|
3158
3177
|
import { ToggleControl as ToggleControl12 } from "@elementor/editor-controls";
|
|
3159
3178
|
import { TextDirectionLtrIcon, TextDirectionRtlIcon } from "@elementor/icons";
|
|
3160
|
-
import { Grid as
|
|
3161
|
-
import { __ as
|
|
3179
|
+
import { Grid as Grid28 } from "@elementor/ui";
|
|
3180
|
+
import { __ as __44 } from "@wordpress/i18n";
|
|
3162
3181
|
var options10 = [
|
|
3163
3182
|
{
|
|
3164
3183
|
value: "ltr",
|
|
3165
|
-
label:
|
|
3166
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3184
|
+
label: __44("Left to right", "elementor"),
|
|
3185
|
+
renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(TextDirectionLtrIcon, { fontSize: size }),
|
|
3167
3186
|
showTooltip: true
|
|
3168
3187
|
},
|
|
3169
3188
|
{
|
|
3170
3189
|
value: "rtl",
|
|
3171
|
-
label:
|
|
3172
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3190
|
+
label: __44("Right to left", "elementor"),
|
|
3191
|
+
renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(TextDirectionRtlIcon, { fontSize: size }),
|
|
3173
3192
|
showTooltip: true
|
|
3174
3193
|
}
|
|
3175
3194
|
];
|
|
3176
3195
|
var TextDirectionField = () => {
|
|
3177
|
-
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 }))));
|
|
3178
3197
|
};
|
|
3179
3198
|
|
|
3180
3199
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
3181
|
-
import * as
|
|
3200
|
+
import * as React68 from "react";
|
|
3182
3201
|
import { StrokeControl } from "@elementor/editor-controls";
|
|
3183
|
-
import { __ as
|
|
3202
|
+
import { __ as __45 } from "@wordpress/i18n";
|
|
3184
3203
|
var initTextStroke = {
|
|
3185
3204
|
$$type: "stroke",
|
|
3186
3205
|
value: {
|
|
@@ -3206,64 +3225,67 @@ var TextStrokeField = () => {
|
|
|
3206
3225
|
setTextStroke(null);
|
|
3207
3226
|
};
|
|
3208
3227
|
const hasTextStroke = Boolean(textStroke);
|
|
3209
|
-
return /* @__PURE__ */
|
|
3228
|
+
return /* @__PURE__ */ React68.createElement(StylesField, { bind: "stroke" }, /* @__PURE__ */ React68.createElement(
|
|
3210
3229
|
AddOrRemoveContent,
|
|
3211
3230
|
{
|
|
3212
|
-
label:
|
|
3231
|
+
label: __45("Text stroke", "elementor"),
|
|
3213
3232
|
isAdded: hasTextStroke,
|
|
3214
3233
|
onAdd: addTextStroke,
|
|
3215
3234
|
onRemove: removeTextStroke
|
|
3216
3235
|
},
|
|
3217
|
-
/* @__PURE__ */
|
|
3236
|
+
/* @__PURE__ */ React68.createElement(StrokeControl, null)
|
|
3218
3237
|
));
|
|
3219
3238
|
};
|
|
3220
3239
|
|
|
3221
3240
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
3222
|
-
import * as
|
|
3241
|
+
import * as React69 from "react";
|
|
3223
3242
|
import { ToggleControl as ToggleControl13 } from "@elementor/editor-controls";
|
|
3224
3243
|
import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon as MinusIcon4 } from "@elementor/icons";
|
|
3225
|
-
import { Grid as
|
|
3226
|
-
import { __ as
|
|
3244
|
+
import { Grid as Grid29 } from "@elementor/ui";
|
|
3245
|
+
import { __ as __46 } from "@wordpress/i18n";
|
|
3227
3246
|
var options11 = [
|
|
3228
3247
|
{
|
|
3229
3248
|
value: "none",
|
|
3230
|
-
label:
|
|
3231
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3249
|
+
label: __46("None", "elementor"),
|
|
3250
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(MinusIcon4, { fontSize: size }),
|
|
3232
3251
|
showTooltip: true
|
|
3233
3252
|
},
|
|
3234
3253
|
{
|
|
3235
3254
|
value: "capitalize",
|
|
3236
|
-
label:
|
|
3237
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3255
|
+
label: __46("Capitalize", "elementor"),
|
|
3256
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(LetterCaseIcon, { fontSize: size }),
|
|
3238
3257
|
showTooltip: true
|
|
3239
3258
|
},
|
|
3240
3259
|
{
|
|
3241
3260
|
value: "uppercase",
|
|
3242
|
-
label:
|
|
3243
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3261
|
+
label: __46("Uppercase", "elementor"),
|
|
3262
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(LetterCaseUpperIcon, { fontSize: size }),
|
|
3244
3263
|
showTooltip: true
|
|
3245
3264
|
},
|
|
3246
3265
|
{
|
|
3247
3266
|
value: "lowercase",
|
|
3248
|
-
label:
|
|
3249
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3267
|
+
label: __46("Lowercase", "elementor"),
|
|
3268
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(LetterCaseLowerIcon, { fontSize: size }),
|
|
3250
3269
|
showTooltip: true
|
|
3251
3270
|
}
|
|
3252
3271
|
];
|
|
3253
|
-
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 }))));
|
|
3254
3273
|
|
|
3255
3274
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
3256
|
-
import * as
|
|
3257
|
-
import { SizeControl as
|
|
3258
|
-
import { Grid as
|
|
3259
|
-
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";
|
|
3260
3279
|
var WordSpacingField = () => {
|
|
3261
|
-
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))));
|
|
3262
3281
|
};
|
|
3263
3282
|
|
|
3264
3283
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
3265
3284
|
var TypographySection = () => {
|
|
3266
|
-
|
|
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))));
|
|
3267
3289
|
};
|
|
3268
3290
|
|
|
3269
3291
|
// src/components/style-tab.tsx
|
|
@@ -3280,7 +3302,7 @@ var StyleTab = () => {
|
|
|
3280
3302
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
|
|
3281
3303
|
const [activeStyleState, setActiveStyleState] = useState13(null);
|
|
3282
3304
|
const breakpoint = useActiveBreakpoint();
|
|
3283
|
-
return /* @__PURE__ */
|
|
3305
|
+
return /* @__PURE__ */ React72.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React72.createElement(
|
|
3284
3306
|
StyleProvider,
|
|
3285
3307
|
{
|
|
3286
3308
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -3291,12 +3313,12 @@ var StyleTab = () => {
|
|
|
3291
3313
|
},
|
|
3292
3314
|
setMetaState: setActiveStyleState
|
|
3293
3315
|
},
|
|
3294
|
-
/* @__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)))))
|
|
3295
3317
|
));
|
|
3296
3318
|
};
|
|
3297
3319
|
function ClassesHeader({ children }) {
|
|
3298
3320
|
const scrollDirection = useScrollDirection();
|
|
3299
|
-
return /* @__PURE__ */
|
|
3321
|
+
return /* @__PURE__ */ React72.createElement(Stack16, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
3300
3322
|
}
|
|
3301
3323
|
function useCurrentClassesProp() {
|
|
3302
3324
|
const { elementType } = useElement();
|
|
@@ -3315,14 +3337,14 @@ var EditingPanelTabs = () => {
|
|
|
3315
3337
|
return (
|
|
3316
3338
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
3317
3339
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
3318
|
-
/* @__PURE__ */
|
|
3340
|
+
/* @__PURE__ */ React73.createElement(Fragment9, { key: element.id }, /* @__PURE__ */ React73.createElement(PanelTabContent, null))
|
|
3319
3341
|
);
|
|
3320
3342
|
};
|
|
3321
3343
|
var PanelTabContent = () => {
|
|
3322
3344
|
const defaultComponentTab = "settings";
|
|
3323
3345
|
const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
3324
3346
|
const { getTabProps, getTabPanelProps, getTabsProps } = useTabs(currentTab);
|
|
3325
|
-
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(
|
|
3326
3348
|
Tabs,
|
|
3327
3349
|
{
|
|
3328
3350
|
variant: "fullWidth",
|
|
@@ -3334,9 +3356,9 @@ var PanelTabContent = () => {
|
|
|
3334
3356
|
setCurrentTab(newValue);
|
|
3335
3357
|
}
|
|
3336
3358
|
},
|
|
3337
|
-
/* @__PURE__ */
|
|
3338
|
-
/* @__PURE__ */
|
|
3339
|
-
), /* @__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))));
|
|
3340
3362
|
};
|
|
3341
3363
|
|
|
3342
3364
|
// src/components/editing-panel.tsx
|
|
@@ -3348,8 +3370,8 @@ var EditingPanel = () => {
|
|
|
3348
3370
|
if (!element || !elementType) {
|
|
3349
3371
|
return null;
|
|
3350
3372
|
}
|
|
3351
|
-
const panelTitle =
|
|
3352
|
-
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)))))))));
|
|
3353
3375
|
};
|
|
3354
3376
|
|
|
3355
3377
|
// src/panel.ts
|
|
@@ -3401,7 +3423,7 @@ var EditingPanelHooks = () => {
|
|
|
3401
3423
|
import { settingsTransformersRegistry, styleTransformersRegistry as styleTransformersRegistry2 } from "@elementor/editor-canvas";
|
|
3402
3424
|
|
|
3403
3425
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
3404
|
-
import * as
|
|
3426
|
+
import * as React78 from "react";
|
|
3405
3427
|
import { ControlFormLabel as ControlFormLabel5, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
|
|
3406
3428
|
import { DatabaseIcon as DatabaseIcon2, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
|
|
3407
3429
|
import {
|
|
@@ -3409,7 +3431,7 @@ import {
|
|
|
3409
3431
|
bindTrigger as bindTrigger2,
|
|
3410
3432
|
Box as Box5,
|
|
3411
3433
|
Divider as Divider8,
|
|
3412
|
-
Grid as
|
|
3434
|
+
Grid as Grid31,
|
|
3413
3435
|
IconButton as IconButton4,
|
|
3414
3436
|
Paper,
|
|
3415
3437
|
Popover as Popover2,
|
|
@@ -3422,12 +3444,12 @@ import {
|
|
|
3422
3444
|
usePopupState as usePopupState3,
|
|
3423
3445
|
useTabs as useTabs2
|
|
3424
3446
|
} from "@elementor/ui";
|
|
3425
|
-
import { __ as
|
|
3447
|
+
import { __ as __52 } from "@wordpress/i18n";
|
|
3426
3448
|
|
|
3427
3449
|
// src/components/popover-content.tsx
|
|
3428
|
-
import * as
|
|
3450
|
+
import * as React75 from "react";
|
|
3429
3451
|
import { Stack as Stack18 } from "@elementor/ui";
|
|
3430
|
-
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);
|
|
3431
3453
|
|
|
3432
3454
|
// src/hooks/use-persist-dynamic-value.ts
|
|
3433
3455
|
import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
|
|
@@ -3438,7 +3460,7 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
3438
3460
|
};
|
|
3439
3461
|
|
|
3440
3462
|
// src/dynamics/dynamic-control.tsx
|
|
3441
|
-
import * as
|
|
3463
|
+
import * as React76 from "react";
|
|
3442
3464
|
import { PropKeyProvider as PropKeyProvider3, PropProvider as PropProvider3, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
|
|
3443
3465
|
|
|
3444
3466
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
@@ -3540,12 +3562,12 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
3540
3562
|
});
|
|
3541
3563
|
};
|
|
3542
3564
|
const propType = createTopLevelOjectType({ schema: dynamicTag.props_schema });
|
|
3543
|
-
return /* @__PURE__ */
|
|
3565
|
+
return /* @__PURE__ */ React76.createElement(PropProvider3, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React76.createElement(PropKeyProvider3, { bind }, children));
|
|
3544
3566
|
};
|
|
3545
3567
|
|
|
3546
3568
|
// src/dynamics/components/dynamic-selection.tsx
|
|
3547
|
-
import * as
|
|
3548
|
-
import { Fragment as
|
|
3569
|
+
import * as React77 from "react";
|
|
3570
|
+
import { Fragment as Fragment10, useState as useState14 } from "react";
|
|
3549
3571
|
import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
|
|
3550
3572
|
import { DatabaseIcon, SearchIcon } from "@elementor/icons";
|
|
3551
3573
|
import {
|
|
@@ -3560,7 +3582,7 @@ import {
|
|
|
3560
3582
|
TextField as TextField2,
|
|
3561
3583
|
Typography as Typography4
|
|
3562
3584
|
} from "@elementor/ui";
|
|
3563
|
-
import { __ as
|
|
3585
|
+
import { __ as __51 } from "@wordpress/i18n";
|
|
3564
3586
|
var SIZE3 = "tiny";
|
|
3565
3587
|
var DynamicSelection = ({ onSelect }) => {
|
|
3566
3588
|
const [searchValue, setSearchValue] = useState14("");
|
|
@@ -3581,19 +3603,19 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3581
3603
|
setValue({ name: value, settings: { label } });
|
|
3582
3604
|
onSelect?.();
|
|
3583
3605
|
};
|
|
3584
|
-
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(
|
|
3585
3607
|
TextField2,
|
|
3586
3608
|
{
|
|
3587
3609
|
fullWidth: true,
|
|
3588
3610
|
size: SIZE3,
|
|
3589
3611
|
value: searchValue,
|
|
3590
3612
|
onChange: handleSearch,
|
|
3591
|
-
placeholder:
|
|
3613
|
+
placeholder: __51("Search dynamic tags\u2026", "elementor"),
|
|
3592
3614
|
InputProps: {
|
|
3593
|
-
startAdornment: /* @__PURE__ */
|
|
3615
|
+
startAdornment: /* @__PURE__ */ React77.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React77.createElement(SearchIcon, { fontSize: SIZE3 }))
|
|
3594
3616
|
}
|
|
3595
3617
|
}
|
|
3596
|
-
)), /* @__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(
|
|
3597
3619
|
MenuSubheader2,
|
|
3598
3620
|
{
|
|
3599
3621
|
sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
|
|
@@ -3601,7 +3623,7 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3601
3623
|
dynamicGroups?.[category]?.title || category
|
|
3602
3624
|
), items3.map(({ value, label: tagLabel }) => {
|
|
3603
3625
|
const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
|
|
3604
|
-
return /* @__PURE__ */
|
|
3626
|
+
return /* @__PURE__ */ React77.createElement(
|
|
3605
3627
|
MenuItem,
|
|
3606
3628
|
{
|
|
3607
3629
|
key: value,
|
|
@@ -3612,9 +3634,9 @@ var DynamicSelection = ({ onSelect }) => {
|
|
|
3612
3634
|
},
|
|
3613
3635
|
tagLabel
|
|
3614
3636
|
);
|
|
3615
|
-
})))) : /* @__PURE__ */
|
|
3637
|
+
})))) : /* @__PURE__ */ React77.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") }))));
|
|
3616
3638
|
};
|
|
3617
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
3639
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React77.createElement(
|
|
3618
3640
|
Stack19,
|
|
3619
3641
|
{
|
|
3620
3642
|
gap: 1,
|
|
@@ -3625,11 +3647,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React75.createElem
|
|
|
3625
3647
|
color: "text.secondary",
|
|
3626
3648
|
sx: { pb: 3.5 }
|
|
3627
3649
|
},
|
|
3628
|
-
/* @__PURE__ */
|
|
3629
|
-
/* @__PURE__ */
|
|
3630
|
-
/* @__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")))
|
|
3631
3653
|
);
|
|
3632
|
-
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(
|
|
3633
3655
|
Stack19,
|
|
3634
3656
|
{
|
|
3635
3657
|
gap: 1,
|
|
@@ -3640,9 +3662,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React75.createElement(Box4, { sx: { ov
|
|
|
3640
3662
|
color: "text.secondary",
|
|
3641
3663
|
sx: { pb: 3.5 }
|
|
3642
3664
|
},
|
|
3643
|
-
/* @__PURE__ */
|
|
3644
|
-
/* @__PURE__ */
|
|
3645
|
-
/* @__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"))
|
|
3646
3668
|
));
|
|
3647
3669
|
var useFilteredOptions = (searchValue) => {
|
|
3648
3670
|
const dynamicTags = usePropDynamicTags();
|
|
@@ -3675,25 +3697,25 @@ var DynamicSelectionControl = () => {
|
|
|
3675
3697
|
if (!dynamicTag) {
|
|
3676
3698
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
3677
3699
|
}
|
|
3678
|
-
return /* @__PURE__ */
|
|
3700
|
+
return /* @__PURE__ */ React78.createElement(Box5, null, /* @__PURE__ */ React78.createElement(
|
|
3679
3701
|
Tag,
|
|
3680
3702
|
{
|
|
3681
3703
|
fullWidth: true,
|
|
3682
3704
|
showActionsOnHover: true,
|
|
3683
3705
|
label: dynamicTag.label,
|
|
3684
|
-
startIcon: /* @__PURE__ */
|
|
3706
|
+
startIcon: /* @__PURE__ */ React78.createElement(DatabaseIcon2, { fontSize: SIZE4 }),
|
|
3685
3707
|
...bindTrigger2(selectionPopoverState),
|
|
3686
|
-
actions: /* @__PURE__ */
|
|
3708
|
+
actions: /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React78.createElement(
|
|
3687
3709
|
IconButton4,
|
|
3688
3710
|
{
|
|
3689
3711
|
size: SIZE4,
|
|
3690
3712
|
onClick: removeDynamicTag,
|
|
3691
|
-
"aria-label":
|
|
3713
|
+
"aria-label": __52("Remove dynamic value", "elementor")
|
|
3692
3714
|
},
|
|
3693
|
-
/* @__PURE__ */
|
|
3715
|
+
/* @__PURE__ */ React78.createElement(XIcon2, { fontSize: SIZE4 })
|
|
3694
3716
|
))
|
|
3695
3717
|
}
|
|
3696
|
-
), /* @__PURE__ */
|
|
3718
|
+
), /* @__PURE__ */ React78.createElement(
|
|
3697
3719
|
Popover2,
|
|
3698
3720
|
{
|
|
3699
3721
|
disablePortal: true,
|
|
@@ -3701,7 +3723,7 @@ var DynamicSelectionControl = () => {
|
|
|
3701
3723
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
3702
3724
|
...bindPopover2(selectionPopoverState)
|
|
3703
3725
|
},
|
|
3704
|
-
/* @__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 }))
|
|
3705
3727
|
));
|
|
3706
3728
|
};
|
|
3707
3729
|
var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
@@ -3710,7 +3732,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
|
3710
3732
|
if (!hasDynamicSettings) {
|
|
3711
3733
|
return null;
|
|
3712
3734
|
}
|
|
3713
|
-
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(
|
|
3714
3736
|
Popover2,
|
|
3715
3737
|
{
|
|
3716
3738
|
disablePortal: true,
|
|
@@ -3718,7 +3740,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
|
|
|
3718
3740
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
3719
3741
|
...bindPopover2(popupState)
|
|
3720
3742
|
},
|
|
3721
|
-
/* @__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 }))
|
|
3722
3744
|
));
|
|
3723
3745
|
};
|
|
3724
3746
|
var DynamicSettings = ({ controls }) => {
|
|
@@ -3727,10 +3749,10 @@ var DynamicSettings = ({ controls }) => {
|
|
|
3727
3749
|
if (!tabs.length) {
|
|
3728
3750
|
return null;
|
|
3729
3751
|
}
|
|
3730
|
-
return /* @__PURE__ */
|
|
3731
|
-
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) => {
|
|
3732
3754
|
if (item.type === "control") {
|
|
3733
|
-
return /* @__PURE__ */
|
|
3755
|
+
return /* @__PURE__ */ React78.createElement(Control3, { key: item.value.bind, control: item.value });
|
|
3734
3756
|
}
|
|
3735
3757
|
return null;
|
|
3736
3758
|
})));
|
|
@@ -3740,7 +3762,7 @@ var Control3 = ({ control }) => {
|
|
|
3740
3762
|
if (!getControl(control.type)) {
|
|
3741
3763
|
return null;
|
|
3742
3764
|
}
|
|
3743
|
-
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 }))));
|
|
3744
3766
|
};
|
|
3745
3767
|
|
|
3746
3768
|
// src/dynamics/dynamic-transformer.ts
|
|
@@ -3793,18 +3815,18 @@ function getDynamicValue(name, settings) {
|
|
|
3793
3815
|
}
|
|
3794
3816
|
|
|
3795
3817
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
3796
|
-
import * as
|
|
3818
|
+
import * as React79 from "react";
|
|
3797
3819
|
import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
|
|
3798
3820
|
import { DatabaseIcon as DatabaseIcon3 } from "@elementor/icons";
|
|
3799
|
-
import { __ as
|
|
3821
|
+
import { __ as __53 } from "@wordpress/i18n";
|
|
3800
3822
|
var usePropDynamicAction = () => {
|
|
3801
3823
|
const { propType } = useBoundProp6();
|
|
3802
3824
|
const visible = !!propType && supportsDynamic(propType);
|
|
3803
3825
|
return {
|
|
3804
3826
|
visible,
|
|
3805
3827
|
icon: DatabaseIcon3,
|
|
3806
|
-
title:
|
|
3807
|
-
popoverContent: ({ closePopover }) => /* @__PURE__ */
|
|
3828
|
+
title: __53("Dynamic tags", "elementor"),
|
|
3829
|
+
popoverContent: ({ closePopover }) => /* @__PURE__ */ React79.createElement(DynamicSelection, { onSelect: closePopover })
|
|
3808
3830
|
};
|
|
3809
3831
|
};
|
|
3810
3832
|
|