@elementor/editor-editing-panel 4.4.0-1090 → 4.4.0-1092
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1093 -1014
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +872 -793
- package/dist/index.mjs.map +1 -1
- package/package.json +25 -24
- package/src/components/content-only-infotip.tsx +51 -0
- package/src/components/editing-panel-tabs.tsx +63 -9
package/dist/index.mjs
CHANGED
|
@@ -1937,7 +1937,7 @@ var hasInheritedCustomCss = (style, meta) => {
|
|
|
1937
1937
|
};
|
|
1938
1938
|
|
|
1939
1939
|
// src/components/editing-panel.tsx
|
|
1940
|
-
import * as
|
|
1940
|
+
import * as React93 from "react";
|
|
1941
1941
|
import {
|
|
1942
1942
|
ControlActionsProvider,
|
|
1943
1943
|
ControlReplacementsProvider,
|
|
@@ -1951,7 +1951,7 @@ import { createLocation as createLocation5 } from "@elementor/locations";
|
|
|
1951
1951
|
import { controlActionsMenu } from "@elementor/menus";
|
|
1952
1952
|
import { SessionStorageProvider as SessionStorageProvider3 } from "@elementor/session";
|
|
1953
1953
|
import { ErrorBoundary } from "@elementor/ui";
|
|
1954
|
-
import { __ as
|
|
1954
|
+
import { __ as __66 } from "@wordpress/i18n";
|
|
1955
1955
|
|
|
1956
1956
|
// src/editing-panel-replacement-registry.tsx
|
|
1957
1957
|
var registry = /* @__PURE__ */ new Map();
|
|
@@ -1987,10 +1987,11 @@ var EditingPanelStickyPromotion = () => {
|
|
|
1987
1987
|
|
|
1988
1988
|
// src/components/editing-panel-tabs.tsx
|
|
1989
1989
|
import { Fragment as Fragment10 } from "react";
|
|
1990
|
-
import * as
|
|
1990
|
+
import * as React92 from "react";
|
|
1991
|
+
import { useHasContentOnlyAccess } from "@elementor/editor-current-user";
|
|
1991
1992
|
import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
|
|
1992
1993
|
import { Divider as Divider6, Stack as Stack14, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
|
|
1993
|
-
import { __ as
|
|
1994
|
+
import { __ as __65 } from "@wordpress/i18n";
|
|
1994
1995
|
|
|
1995
1996
|
// src/contexts/scroll-context.tsx
|
|
1996
1997
|
import * as React17 from "react";
|
|
@@ -2080,25 +2081,65 @@ var useStateByElement = (key, initialValue) => {
|
|
|
2080
2081
|
return [value, doUpdate];
|
|
2081
2082
|
};
|
|
2082
2083
|
|
|
2084
|
+
// src/components/content-only-infotip.tsx
|
|
2085
|
+
import * as React18 from "react";
|
|
2086
|
+
import { useState as useState7 } from "react";
|
|
2087
|
+
import { InfoCircleFilledIcon } from "@elementor/icons";
|
|
2088
|
+
import { Alert as Alert3, AlertTitle as AlertTitle2, Box as Box4, Infotip, Link as Link2 } from "@elementor/ui";
|
|
2089
|
+
import { __ as __10 } from "@wordpress/i18n";
|
|
2090
|
+
var LEARN_MORE_URL = "https://go.elementor.com/content-only-access-infotip";
|
|
2091
|
+
var INFOTIP_WIDTH = 300;
|
|
2092
|
+
var ContentOnlyInfotip = ({ children }) => {
|
|
2093
|
+
const [isOpen, setIsOpen] = useState7(false);
|
|
2094
|
+
return /* @__PURE__ */ React18.createElement(
|
|
2095
|
+
Infotip,
|
|
2096
|
+
{
|
|
2097
|
+
open: isOpen,
|
|
2098
|
+
placement: "bottom",
|
|
2099
|
+
color: "secondary",
|
|
2100
|
+
content: /* @__PURE__ */ React18.createElement(Alert3, { color: "secondary", icon: /* @__PURE__ */ React18.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React18.createElement(AlertTitle2, null, __10("Content-only access", "elementor")), /* @__PURE__ */ React18.createElement(Box4, { component: "span" }, __10("Your Site Admin has limited this role to content editing.", "elementor"), " ", /* @__PURE__ */ React18.createElement(Link2, { href: LEARN_MORE_URL, target: "_blank", rel: "noreferrer", color: "info.main" }, __10("Learn More", "elementor")))),
|
|
2101
|
+
slotProps: {
|
|
2102
|
+
popper: {
|
|
2103
|
+
sx: { width: INFOTIP_WIDTH },
|
|
2104
|
+
// The popper is portaled, so it needs its own hover handlers to stay open while the pointer
|
|
2105
|
+
// travels from the tab to the "Learn More" link.
|
|
2106
|
+
onMouseEnter: () => setIsOpen(true),
|
|
2107
|
+
onMouseLeave: () => setIsOpen(false)
|
|
2108
|
+
}
|
|
2109
|
+
}
|
|
2110
|
+
},
|
|
2111
|
+
/* @__PURE__ */ React18.createElement(
|
|
2112
|
+
Box4,
|
|
2113
|
+
{
|
|
2114
|
+
component: "span",
|
|
2115
|
+
sx: { pointerEvents: "auto" },
|
|
2116
|
+
onMouseEnter: () => setIsOpen(true),
|
|
2117
|
+
onMouseLeave: () => setIsOpen(false)
|
|
2118
|
+
},
|
|
2119
|
+
children
|
|
2120
|
+
)
|
|
2121
|
+
);
|
|
2122
|
+
};
|
|
2123
|
+
|
|
2083
2124
|
// src/components/interactions-tab.tsx
|
|
2084
|
-
import * as
|
|
2125
|
+
import * as React20 from "react";
|
|
2085
2126
|
import { InteractionsTab as InteractionsTabContent } from "@elementor/editor-interactions";
|
|
2086
2127
|
|
|
2087
2128
|
// src/components/sections-list.tsx
|
|
2088
|
-
import * as
|
|
2129
|
+
import * as React19 from "react";
|
|
2089
2130
|
import { List } from "@elementor/ui";
|
|
2090
2131
|
function SectionsList(props) {
|
|
2091
|
-
return /* @__PURE__ */
|
|
2132
|
+
return /* @__PURE__ */ React19.createElement(List, { disablePadding: true, component: "div", ...props });
|
|
2092
2133
|
}
|
|
2093
2134
|
|
|
2094
2135
|
// src/components/interactions-tab.tsx
|
|
2095
2136
|
var InteractionsTab = () => {
|
|
2096
2137
|
const { element } = useElement();
|
|
2097
|
-
return /* @__PURE__ */
|
|
2138
|
+
return /* @__PURE__ */ React20.createElement(SectionsList, null, /* @__PURE__ */ React20.createElement(InteractionsTabContent, { elementId: element.id }));
|
|
2098
2139
|
};
|
|
2099
2140
|
|
|
2100
2141
|
// src/components/settings-tab.tsx
|
|
2101
|
-
import * as
|
|
2142
|
+
import * as React26 from "react";
|
|
2102
2143
|
import { SessionStorageProvider } from "@elementor/session";
|
|
2103
2144
|
|
|
2104
2145
|
// src/utils/prop-dependency-utils.ts
|
|
@@ -2315,7 +2356,7 @@ function removePreviousValueFromStorage({ path, elementId }) {
|
|
|
2315
2356
|
}
|
|
2316
2357
|
|
|
2317
2358
|
// src/components/section.tsx
|
|
2318
|
-
import * as
|
|
2359
|
+
import * as React21 from "react";
|
|
2319
2360
|
import { useId as useId2, useRef as useRef3 } from "react";
|
|
2320
2361
|
import { CollapseIcon, getCollapsibleValue, SectionRefContext } from "@elementor/editor-ui";
|
|
2321
2362
|
import { Collapse, Divider as Divider2, ListItemButton, ListItemText, Stack as Stack5 } from "@elementor/ui";
|
|
@@ -2333,7 +2374,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
|
|
|
2333
2374
|
const id = useId2();
|
|
2334
2375
|
const labelId = `label-${id}`;
|
|
2335
2376
|
const contentId = `content-${id}`;
|
|
2336
|
-
return /* @__PURE__ */
|
|
2377
|
+
return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
|
|
2337
2378
|
ListItemButton,
|
|
2338
2379
|
{
|
|
2339
2380
|
id: labelId,
|
|
@@ -2342,7 +2383,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
|
|
|
2342
2383
|
onClick: handleClick,
|
|
2343
2384
|
sx: { "&:hover": { backgroundColor: "transparent" } }
|
|
2344
2385
|
},
|
|
2345
|
-
/* @__PURE__ */
|
|
2386
|
+
/* @__PURE__ */ React21.createElement(Stack5, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React21.createElement(
|
|
2346
2387
|
ListItemText,
|
|
2347
2388
|
{
|
|
2348
2389
|
secondary: title,
|
|
@@ -2351,7 +2392,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
|
|
|
2351
2392
|
}
|
|
2352
2393
|
), getCollapsibleValue(titleEnd, isOpen)),
|
|
2353
2394
|
action?.component,
|
|
2354
|
-
/* @__PURE__ */
|
|
2395
|
+
/* @__PURE__ */ React21.createElement(
|
|
2355
2396
|
CollapseIcon,
|
|
2356
2397
|
{
|
|
2357
2398
|
open: isOpen,
|
|
@@ -2361,7 +2402,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
|
|
|
2361
2402
|
sx: { ml: 1 }
|
|
2362
2403
|
}
|
|
2363
2404
|
)
|
|
2364
|
-
), /* @__PURE__ */
|
|
2405
|
+
), /* @__PURE__ */ React21.createElement(
|
|
2365
2406
|
Collapse,
|
|
2366
2407
|
{
|
|
2367
2408
|
id: contentId,
|
|
@@ -2370,17 +2411,17 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
|
|
|
2370
2411
|
timeout: "auto",
|
|
2371
2412
|
unmountOnExit
|
|
2372
2413
|
},
|
|
2373
|
-
/* @__PURE__ */
|
|
2374
|
-
), /* @__PURE__ */
|
|
2414
|
+
/* @__PURE__ */ React21.createElement(SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ React21.createElement(Stack5, { ref, gap: 2.5, p: 2, "aria-label": `${title} section content` }, children))
|
|
2415
|
+
), /* @__PURE__ */ React21.createElement(Divider2, null));
|
|
2375
2416
|
}
|
|
2376
2417
|
|
|
2377
2418
|
// src/components/settings-control.tsx
|
|
2378
|
-
import * as
|
|
2419
|
+
import * as React25 from "react";
|
|
2379
2420
|
import { ControlAdornmentsProvider } from "@elementor/editor-controls";
|
|
2380
2421
|
import { Divider as Divider3, styled as styled5 } from "@elementor/ui";
|
|
2381
2422
|
|
|
2382
2423
|
// src/controls-registry/control.tsx
|
|
2383
|
-
import * as
|
|
2424
|
+
import * as React22 from "react";
|
|
2384
2425
|
|
|
2385
2426
|
// src/controls-registry/controls-registry.tsx
|
|
2386
2427
|
import {
|
|
@@ -2513,19 +2554,19 @@ var Control = ({ props, type }) => {
|
|
|
2513
2554
|
context: { controlType: type }
|
|
2514
2555
|
});
|
|
2515
2556
|
}
|
|
2516
|
-
return /* @__PURE__ */
|
|
2557
|
+
return /* @__PURE__ */ React22.createElement(ControlByType, { ...props, context: { elementId: element.id } });
|
|
2517
2558
|
};
|
|
2518
2559
|
|
|
2519
2560
|
// src/controls-registry/control-type-container.tsx
|
|
2520
|
-
import * as
|
|
2521
|
-
import { Box as
|
|
2561
|
+
import * as React23 from "react";
|
|
2562
|
+
import { Box as Box5, styled as styled4 } from "@elementor/ui";
|
|
2522
2563
|
var ControlTypeContainer = ({ children, layout }) => {
|
|
2523
2564
|
if (layout === "custom") {
|
|
2524
2565
|
return children;
|
|
2525
2566
|
}
|
|
2526
|
-
return /* @__PURE__ */
|
|
2567
|
+
return /* @__PURE__ */ React23.createElement(StyledContainer, { layout }, children);
|
|
2527
2568
|
};
|
|
2528
|
-
var StyledContainer = styled4(
|
|
2569
|
+
var StyledContainer = styled4(Box5, {
|
|
2529
2570
|
shouldForwardProp: (prop) => !["layout"].includes(prop)
|
|
2530
2571
|
})(({ layout, theme }) => ({
|
|
2531
2572
|
display: "grid",
|
|
@@ -2551,7 +2592,7 @@ var getStyleByLayout = (layout) => {
|
|
|
2551
2592
|
};
|
|
2552
2593
|
|
|
2553
2594
|
// src/controls-registry/settings-field.tsx
|
|
2554
|
-
import * as
|
|
2595
|
+
import * as React24 from "react";
|
|
2555
2596
|
import { useMemo as useMemo7 } from "react";
|
|
2556
2597
|
import { PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
|
|
2557
2598
|
import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
|
|
@@ -2562,7 +2603,7 @@ import {
|
|
|
2562
2603
|
} from "@elementor/editor-props";
|
|
2563
2604
|
import { useActiveBreakpoint, useBreakpoints } from "@elementor/editor-responsive";
|
|
2564
2605
|
import { undoable as undoable4 } from "@elementor/editor-v1-adapters";
|
|
2565
|
-
import { __ as
|
|
2606
|
+
import { __ as __11 } from "@wordpress/i18n";
|
|
2566
2607
|
|
|
2567
2608
|
// src/utils/is-responsive-prop-type.ts
|
|
2568
2609
|
function isResponsivePropType(propType) {
|
|
@@ -2623,14 +2664,14 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
|
|
|
2623
2664
|
updateElementSettings3({ id: elementId, props: settings, withHistory: false });
|
|
2624
2665
|
}
|
|
2625
2666
|
};
|
|
2626
|
-
return /* @__PURE__ */
|
|
2667
|
+
return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, isResponsivePropType(propsSchema[bind]) ? /* @__PURE__ */ React24.createElement(ResponsiveBinding, null, children) : children));
|
|
2627
2668
|
};
|
|
2628
2669
|
var ResponsiveBinding = ({ children }) => {
|
|
2629
2670
|
const { value, setValue, propType, disabled } = useBoundProp(responsivePropTypeUtil);
|
|
2630
2671
|
const breakpoint = useActiveBreakpoint() ?? DESKTOP_BREAKPOINT;
|
|
2631
2672
|
const activeBreakpoints = (useBreakpoints() ?? []).map(({ id }) => id);
|
|
2632
2673
|
const inherited = responsiveFallbackChain(breakpoint).filter((key) => key !== breakpoint && activeBreakpoints.includes(key)).map((key) => value?.[key]).find((entry) => entry !== null && entry !== void 0);
|
|
2633
|
-
return /* @__PURE__ */
|
|
2674
|
+
return /* @__PURE__ */ React24.createElement(
|
|
2634
2675
|
PropProvider,
|
|
2635
2676
|
{
|
|
2636
2677
|
propType,
|
|
@@ -2639,7 +2680,7 @@ var ResponsiveBinding = ({ children }) => {
|
|
|
2639
2680
|
placeholder: { [breakpoint]: inherited },
|
|
2640
2681
|
isDisabled: () => disabled
|
|
2641
2682
|
},
|
|
2642
|
-
/* @__PURE__ */
|
|
2683
|
+
/* @__PURE__ */ React24.createElement(PropKeyProvider, { bind: breakpoint }, children)
|
|
2643
2684
|
);
|
|
2644
2685
|
};
|
|
2645
2686
|
function useUndoableUpdateElementProp({
|
|
@@ -2662,7 +2703,7 @@ function useUndoableUpdateElementProp({
|
|
|
2662
2703
|
{
|
|
2663
2704
|
title: getElementLabel3(elementId),
|
|
2664
2705
|
// translators: %s is the name of the property that was edited.
|
|
2665
|
-
subtitle:
|
|
2706
|
+
subtitle: __11("%s edited", "elementor").replace("%s", propDisplayName),
|
|
2666
2707
|
debounce: { wait: HISTORY_DEBOUNCE_WAIT2 }
|
|
2667
2708
|
}
|
|
2668
2709
|
);
|
|
@@ -2703,9 +2744,9 @@ var SettingsControl = ({ control: { value, type } }) => {
|
|
|
2703
2744
|
controlProps.label = value.label;
|
|
2704
2745
|
}
|
|
2705
2746
|
if (type === "element-control") {
|
|
2706
|
-
return /* @__PURE__ */
|
|
2747
|
+
return /* @__PURE__ */ React25.createElement(ControlLayout, { control: value, layout, controlProps });
|
|
2707
2748
|
}
|
|
2708
|
-
return /* @__PURE__ */
|
|
2749
|
+
return /* @__PURE__ */ React25.createElement(SettingsField, { bind: value.bind, propDisplayName: value.label || value.bind }, /* @__PURE__ */ React25.createElement(ControlLayout, { control: value, layout, controlProps }));
|
|
2709
2750
|
};
|
|
2710
2751
|
var ControlLayout = ({
|
|
2711
2752
|
control,
|
|
@@ -2713,7 +2754,7 @@ var ControlLayout = ({
|
|
|
2713
2754
|
controlProps
|
|
2714
2755
|
}) => {
|
|
2715
2756
|
const controlType = control.type;
|
|
2716
|
-
return /* @__PURE__ */
|
|
2757
|
+
return /* @__PURE__ */ React25.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, control.meta?.topDivider && /* @__PURE__ */ React25.createElement(Divider3, null), /* @__PURE__ */ React25.createElement(Wrapper, { "data-type": "settings-field" }, /* @__PURE__ */ React25.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ React25.createElement(ControlLabel, null, control.label) : null, /* @__PURE__ */ React25.createElement(Control, { type: controlType, props: controlProps }))));
|
|
2717
2758
|
};
|
|
2718
2759
|
function populateChildControlProps(props) {
|
|
2719
2760
|
if (props.childControlType) {
|
|
@@ -2737,9 +2778,9 @@ var SettingsTab = () => {
|
|
|
2737
2778
|
const settingsDefault = useDefaultPanelSettings();
|
|
2738
2779
|
const currentSettings = settings;
|
|
2739
2780
|
const isDefaultExpanded = (sectionId) => !!sectionId && settingsDefault.defaultSectionsExpanded.settings?.includes(sectionId);
|
|
2740
|
-
return /* @__PURE__ */
|
|
2781
|
+
return /* @__PURE__ */ React26.createElement(SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React26.createElement(SectionsList, null, elementType.controls.map((control, index) => {
|
|
2741
2782
|
if (isControl(control)) {
|
|
2742
|
-
return /* @__PURE__ */
|
|
2783
|
+
return /* @__PURE__ */ React26.createElement(SettingsControl, { key: getKey(control, element), control });
|
|
2743
2784
|
}
|
|
2744
2785
|
const { type, value } = control;
|
|
2745
2786
|
if (type === "section") {
|
|
@@ -2752,7 +2793,7 @@ var SettingsTab = () => {
|
|
|
2752
2793
|
if (!sectionItems.length) {
|
|
2753
2794
|
return null;
|
|
2754
2795
|
}
|
|
2755
|
-
return /* @__PURE__ */
|
|
2796
|
+
return /* @__PURE__ */ React26.createElement(
|
|
2756
2797
|
Section,
|
|
2757
2798
|
{
|
|
2758
2799
|
title: value.label,
|
|
@@ -2787,7 +2828,7 @@ function renderSectionItems({
|
|
|
2787
2828
|
if (item.type === "control" && isControlHiddenByDependencies(item, propsSchema, settings)) {
|
|
2788
2829
|
return [];
|
|
2789
2830
|
}
|
|
2790
|
-
return [/* @__PURE__ */
|
|
2831
|
+
return [/* @__PURE__ */ React26.createElement(SettingsControl, { key: getKey(item, element), control: item })];
|
|
2791
2832
|
}) ?? [];
|
|
2792
2833
|
}
|
|
2793
2834
|
function isControlHiddenByDependencies(control, propsSchema, settings) {
|
|
@@ -2796,16 +2837,16 @@ function isControlHiddenByDependencies(control, propsSchema, settings) {
|
|
|
2796
2837
|
}
|
|
2797
2838
|
|
|
2798
2839
|
// src/components/style-tab.tsx
|
|
2799
|
-
import * as
|
|
2800
|
-
import { useState as
|
|
2840
|
+
import * as React91 from "react";
|
|
2841
|
+
import { useState as useState10 } from "react";
|
|
2801
2842
|
import { CLASSES_PROP_KEY } from "@elementor/editor-props";
|
|
2802
2843
|
import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
|
|
2803
2844
|
import { createLocation as createLocation4 } from "@elementor/locations";
|
|
2804
2845
|
import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
|
|
2805
|
-
import { Box as
|
|
2846
|
+
import { Box as Box8, Divider as Divider5, Stack as Stack13 } from "@elementor/ui";
|
|
2806
2847
|
|
|
2807
2848
|
// src/contexts/styles-inheritance-context.tsx
|
|
2808
|
-
import * as
|
|
2849
|
+
import * as React27 from "react";
|
|
2809
2850
|
import { createContext as createContext6, useContext as useContext6, useMemo as useMemo8 } from "react";
|
|
2810
2851
|
import { getWidgetsCache } from "@elementor/editor-elements";
|
|
2811
2852
|
import { classesPropTypeUtil as classesPropTypeUtil3 } from "@elementor/editor-props";
|
|
@@ -3061,7 +3102,7 @@ function StyleInheritanceProvider({ children }) {
|
|
|
3061
3102
|
const styleDefs = useAppliedStyles();
|
|
3062
3103
|
const breakpointsTree = getBreakpointsTree2();
|
|
3063
3104
|
const { getSnapshot, getInheritanceChain } = createStylesInheritance(styleDefs, breakpointsTree);
|
|
3064
|
-
return /* @__PURE__ */
|
|
3105
|
+
return /* @__PURE__ */ React27.createElement(Context4.Provider, { value: { getSnapshot, getInheritanceChain } }, children);
|
|
3065
3106
|
}
|
|
3066
3107
|
function useStylesInheritanceSnapshot() {
|
|
3067
3108
|
const context = useContext6(Context4);
|
|
@@ -3156,18 +3197,18 @@ function useActiveAndAppliedClassId(id, appliedClassesIds) {
|
|
|
3156
3197
|
}
|
|
3157
3198
|
|
|
3158
3199
|
// src/components/style-sections.tsx
|
|
3159
|
-
import * as
|
|
3200
|
+
import * as React90 from "react";
|
|
3160
3201
|
|
|
3161
3202
|
// src/components/style-sections-definition.ts
|
|
3162
|
-
import { __ as
|
|
3203
|
+
import { __ as __64 } from "@wordpress/i18n";
|
|
3163
3204
|
|
|
3164
3205
|
// src/components/style-sections/background-section/background-section.tsx
|
|
3165
|
-
import * as
|
|
3206
|
+
import * as React30 from "react";
|
|
3166
3207
|
import { BackgroundControl } from "@elementor/editor-controls";
|
|
3167
|
-
import { __ as
|
|
3208
|
+
import { __ as __12 } from "@wordpress/i18n";
|
|
3168
3209
|
|
|
3169
3210
|
// src/controls-registry/styles-field.tsx
|
|
3170
|
-
import * as
|
|
3211
|
+
import * as React28 from "react";
|
|
3171
3212
|
import { ControlAdornmentsProvider as ControlAdornmentsProvider2, PropKeyProvider as PropKeyProvider2, PropProvider as PropProvider2 } from "@elementor/editor-controls";
|
|
3172
3213
|
import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
|
|
3173
3214
|
import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
|
|
@@ -3312,7 +3353,7 @@ var StylesField = ({ bind, propDisplayName, children }) => {
|
|
|
3312
3353
|
const setValue = (newValue) => {
|
|
3313
3354
|
fields.setValue(newValue[bind]);
|
|
3314
3355
|
};
|
|
3315
|
-
return /* @__PURE__ */
|
|
3356
|
+
return /* @__PURE__ */ React28.createElement(ControlAdornmentsProvider2, { items: getFieldIndicators("styles") }, /* @__PURE__ */ React28.createElement(
|
|
3316
3357
|
PropProvider2,
|
|
3317
3358
|
{
|
|
3318
3359
|
propType,
|
|
@@ -3321,12 +3362,12 @@ var StylesField = ({ bind, propDisplayName, children }) => {
|
|
|
3321
3362
|
placeholder: placeholderValues,
|
|
3322
3363
|
isDisabled: () => !canEdit
|
|
3323
3364
|
},
|
|
3324
|
-
/* @__PURE__ */
|
|
3365
|
+
/* @__PURE__ */ React28.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React28.createElement(ConditionalField, null, children))
|
|
3325
3366
|
));
|
|
3326
3367
|
};
|
|
3327
3368
|
|
|
3328
3369
|
// src/components/section-content.tsx
|
|
3329
|
-
import * as
|
|
3370
|
+
import * as React29 from "react";
|
|
3330
3371
|
import { Stack as Stack6 } from "@elementor/ui";
|
|
3331
3372
|
var SectionContent = ({
|
|
3332
3373
|
gap = 2,
|
|
@@ -3334,32 +3375,32 @@ var SectionContent = ({
|
|
|
3334
3375
|
children,
|
|
3335
3376
|
"aria-label": ariaLabel,
|
|
3336
3377
|
className
|
|
3337
|
-
}) => /* @__PURE__ */
|
|
3378
|
+
}) => /* @__PURE__ */ React29.createElement(Stack6, { gap, sx: { ...sx }, "aria-label": ariaLabel, className }, children);
|
|
3338
3379
|
|
|
3339
3380
|
// src/components/style-sections/background-section/background-section.tsx
|
|
3340
|
-
var BACKGROUND_LABEL =
|
|
3381
|
+
var BACKGROUND_LABEL = __12("Background", "elementor");
|
|
3341
3382
|
var BackgroundSection = () => {
|
|
3342
|
-
return /* @__PURE__ */
|
|
3383
|
+
return /* @__PURE__ */ React30.createElement(SectionContent, null, /* @__PURE__ */ React30.createElement(StylesField, { bind: "background", propDisplayName: BACKGROUND_LABEL }, /* @__PURE__ */ React30.createElement(BackgroundControl, null)));
|
|
3343
3384
|
};
|
|
3344
3385
|
|
|
3345
3386
|
// src/components/style-sections/border-section/border-section.tsx
|
|
3346
|
-
import * as
|
|
3387
|
+
import * as React37 from "react";
|
|
3347
3388
|
|
|
3348
3389
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
3349
|
-
import * as
|
|
3390
|
+
import * as React32 from "react";
|
|
3350
3391
|
import { ColorControl } from "@elementor/editor-controls";
|
|
3351
|
-
import { __ as
|
|
3392
|
+
import { __ as __13 } from "@wordpress/i18n";
|
|
3352
3393
|
|
|
3353
3394
|
// src/components/styles-field-layout.tsx
|
|
3354
|
-
import * as
|
|
3395
|
+
import * as React31 from "react";
|
|
3355
3396
|
import { Grid, Stack as Stack7 } from "@elementor/ui";
|
|
3356
|
-
var StylesFieldLayout =
|
|
3397
|
+
var StylesFieldLayout = React31.forwardRef((props, ref) => {
|
|
3357
3398
|
const { direction = "row", children, label, infoTooltip } = props;
|
|
3358
3399
|
const LayoutComponent = direction === "row" ? Row : Column;
|
|
3359
|
-
return /* @__PURE__ */
|
|
3400
|
+
return /* @__PURE__ */ React31.createElement(LayoutComponent, { label, infoTooltip, ref, children });
|
|
3360
3401
|
});
|
|
3361
|
-
var Row =
|
|
3362
|
-
return /* @__PURE__ */
|
|
3402
|
+
var Row = React31.forwardRef(({ label, children, infoTooltip }, ref) => {
|
|
3403
|
+
return /* @__PURE__ */ React31.createElement(Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref, "aria-label": `${label} control` }, /* @__PURE__ */ React31.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ControlLabel, { infoTooltip }, label)), /* @__PURE__ */ React31.createElement(
|
|
3363
3404
|
Grid,
|
|
3364
3405
|
{
|
|
3365
3406
|
item: true,
|
|
@@ -3371,16 +3412,16 @@ var Row = React30.forwardRef(({ label, children, infoTooltip }, ref) => {
|
|
|
3371
3412
|
children
|
|
3372
3413
|
));
|
|
3373
3414
|
});
|
|
3374
|
-
var Column =
|
|
3375
|
-
return /* @__PURE__ */
|
|
3415
|
+
var Column = React31.forwardRef(({ label, children, infoTooltip }, ref) => {
|
|
3416
|
+
return /* @__PURE__ */ React31.createElement(Stack7, { gap: 0.75, ref }, /* @__PURE__ */ React31.createElement(ControlLabel, { infoTooltip }, label), children);
|
|
3376
3417
|
});
|
|
3377
3418
|
|
|
3378
3419
|
// src/components/style-sections/border-section/border-color-field.tsx
|
|
3379
|
-
var BORDER_COLOR_LABEL =
|
|
3380
|
-
var BorderColorField = () => /* @__PURE__ */
|
|
3420
|
+
var BORDER_COLOR_LABEL = __13("Border color", "elementor");
|
|
3421
|
+
var BorderColorField = () => /* @__PURE__ */ React32.createElement(StylesField, { bind: "border-color", propDisplayName: BORDER_COLOR_LABEL }, /* @__PURE__ */ React32.createElement(StylesFieldLayout, { label: BORDER_COLOR_LABEL }, /* @__PURE__ */ React32.createElement(ColorControl, null)));
|
|
3381
3422
|
|
|
3382
3423
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
3383
|
-
import * as
|
|
3424
|
+
import * as React34 from "react";
|
|
3384
3425
|
import { EqualUnequalSizesControl } from "@elementor/editor-controls";
|
|
3385
3426
|
import { borderRadiusPropTypeUtil } from "@elementor/editor-props";
|
|
3386
3427
|
import {
|
|
@@ -3391,7 +3432,7 @@ import {
|
|
|
3391
3432
|
RadiusTopRightIcon
|
|
3392
3433
|
} from "@elementor/icons";
|
|
3393
3434
|
import { withDirection } from "@elementor/ui";
|
|
3394
|
-
import { __ as
|
|
3435
|
+
import { __ as __14 } from "@wordpress/i18n";
|
|
3395
3436
|
|
|
3396
3437
|
// src/hooks/use-direction.ts
|
|
3397
3438
|
import { getElementorFrontendConfig } from "@elementor/editor-v1-adapters";
|
|
@@ -3403,147 +3444,147 @@ function useDirection() {
|
|
|
3403
3444
|
}
|
|
3404
3445
|
|
|
3405
3446
|
// src/styles-inheritance/components/ui-providers.tsx
|
|
3406
|
-
import * as
|
|
3447
|
+
import * as React33 from "react";
|
|
3407
3448
|
import { DirectionProvider, ThemeProvider as ThemeProvider2 } from "@elementor/ui";
|
|
3408
3449
|
var UiProviders = ({ children }) => {
|
|
3409
3450
|
const { isSiteRtl } = useDirection();
|
|
3410
|
-
return /* @__PURE__ */
|
|
3451
|
+
return /* @__PURE__ */ React33.createElement(DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React33.createElement(ThemeProvider2, null, children));
|
|
3411
3452
|
};
|
|
3412
3453
|
|
|
3413
3454
|
// src/components/style-sections/border-section/border-radius-field.tsx
|
|
3414
|
-
var BORDER_RADIUS_LABEL =
|
|
3455
|
+
var BORDER_RADIUS_LABEL = __14("Border radius", "elementor");
|
|
3415
3456
|
var StartStartIcon = withDirection(RadiusTopLeftIcon);
|
|
3416
3457
|
var StartEndIcon = withDirection(RadiusTopRightIcon);
|
|
3417
3458
|
var EndStartIcon = withDirection(RadiusBottomLeftIcon);
|
|
3418
3459
|
var EndEndIcon = withDirection(RadiusBottomRightIcon);
|
|
3419
|
-
var getStartStartLabel = (isSiteRtl) => isSiteRtl ?
|
|
3420
|
-
var getStartStartAriaLabel = (isSiteRtl) => isSiteRtl ?
|
|
3421
|
-
var getStartEndLabel = (isSiteRtl) => isSiteRtl ?
|
|
3422
|
-
var getStartEndAriaLabel = (isSiteRtl) => isSiteRtl ?
|
|
3423
|
-
var getEndStartLabel = (isSiteRtl) => isSiteRtl ?
|
|
3424
|
-
var getEndStartAriaLabel = (isSiteRtl) => isSiteRtl ?
|
|
3425
|
-
var getEndEndLabel = (isSiteRtl) => isSiteRtl ?
|
|
3426
|
-
var getEndEndAriaLabel = (isSiteRtl) => isSiteRtl ?
|
|
3460
|
+
var getStartStartLabel = (isSiteRtl) => isSiteRtl ? __14("Top right", "elementor") : __14("Top left", "elementor");
|
|
3461
|
+
var getStartStartAriaLabel = (isSiteRtl) => isSiteRtl ? __14("Border top right radius", "elementor") : __14("Border top left radius", "elementor");
|
|
3462
|
+
var getStartEndLabel = (isSiteRtl) => isSiteRtl ? __14("Top left", "elementor") : __14("Top right", "elementor");
|
|
3463
|
+
var getStartEndAriaLabel = (isSiteRtl) => isSiteRtl ? __14("Border top left radius", "elementor") : __14("Border top right radius", "elementor");
|
|
3464
|
+
var getEndStartLabel = (isSiteRtl) => isSiteRtl ? __14("Bottom right", "elementor") : __14("Bottom left", "elementor");
|
|
3465
|
+
var getEndStartAriaLabel = (isSiteRtl) => isSiteRtl ? __14("Border bottom right radius", "elementor") : __14("Border bottom left radius", "elementor");
|
|
3466
|
+
var getEndEndLabel = (isSiteRtl) => isSiteRtl ? __14("Bottom left", "elementor") : __14("Bottom right", "elementor");
|
|
3467
|
+
var getEndEndAriaLabel = (isSiteRtl) => isSiteRtl ? __14("Border bottom left radius", "elementor") : __14("Border bottom right radius", "elementor");
|
|
3427
3468
|
var getCorners = (isSiteRtl) => [
|
|
3428
3469
|
{
|
|
3429
3470
|
label: getStartStartLabel(isSiteRtl),
|
|
3430
3471
|
ariaLabel: getStartStartAriaLabel(isSiteRtl),
|
|
3431
|
-
icon: /* @__PURE__ */
|
|
3472
|
+
icon: /* @__PURE__ */ React34.createElement(StartStartIcon, { fontSize: "tiny" }),
|
|
3432
3473
|
bind: "start-start"
|
|
3433
3474
|
},
|
|
3434
3475
|
{
|
|
3435
3476
|
label: getStartEndLabel(isSiteRtl),
|
|
3436
3477
|
ariaLabel: getStartEndAriaLabel(isSiteRtl),
|
|
3437
|
-
icon: /* @__PURE__ */
|
|
3478
|
+
icon: /* @__PURE__ */ React34.createElement(StartEndIcon, { fontSize: "tiny" }),
|
|
3438
3479
|
bind: "start-end"
|
|
3439
3480
|
},
|
|
3440
3481
|
{
|
|
3441
3482
|
label: getEndStartLabel(isSiteRtl),
|
|
3442
3483
|
ariaLabel: getEndStartAriaLabel(isSiteRtl),
|
|
3443
|
-
icon: /* @__PURE__ */
|
|
3484
|
+
icon: /* @__PURE__ */ React34.createElement(EndStartIcon, { fontSize: "tiny" }),
|
|
3444
3485
|
bind: "end-start"
|
|
3445
3486
|
},
|
|
3446
3487
|
{
|
|
3447
3488
|
label: getEndEndLabel(isSiteRtl),
|
|
3448
3489
|
ariaLabel: getEndEndAriaLabel(isSiteRtl),
|
|
3449
|
-
icon: /* @__PURE__ */
|
|
3490
|
+
icon: /* @__PURE__ */ React34.createElement(EndEndIcon, { fontSize: "tiny" }),
|
|
3450
3491
|
bind: "end-end"
|
|
3451
3492
|
}
|
|
3452
3493
|
];
|
|
3453
3494
|
var BorderRadiusField = () => {
|
|
3454
3495
|
const { isSiteRtl } = useDirection();
|
|
3455
|
-
return /* @__PURE__ */
|
|
3496
|
+
return /* @__PURE__ */ React34.createElement(UiProviders, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "border-radius", propDisplayName: BORDER_RADIUS_LABEL }, /* @__PURE__ */ React34.createElement(
|
|
3456
3497
|
EqualUnequalSizesControl,
|
|
3457
3498
|
{
|
|
3458
3499
|
items: getCorners(isSiteRtl),
|
|
3459
3500
|
label: BORDER_RADIUS_LABEL,
|
|
3460
|
-
icon: /* @__PURE__ */
|
|
3461
|
-
tooltipLabel:
|
|
3501
|
+
icon: /* @__PURE__ */ React34.createElement(BorderCornersIcon, { fontSize: "tiny" }),
|
|
3502
|
+
tooltipLabel: __14("Adjust corners", "elementor"),
|
|
3462
3503
|
multiSizePropTypeUtil: borderRadiusPropTypeUtil
|
|
3463
3504
|
}
|
|
3464
3505
|
)));
|
|
3465
3506
|
};
|
|
3466
3507
|
|
|
3467
3508
|
// src/components/style-sections/border-section/border-style-field.tsx
|
|
3468
|
-
import * as
|
|
3509
|
+
import * as React35 from "react";
|
|
3469
3510
|
import { SelectControl } from "@elementor/editor-controls";
|
|
3470
|
-
import { __ as
|
|
3471
|
-
var BORDER_TYPE_LABEL =
|
|
3511
|
+
import { __ as __15 } from "@wordpress/i18n";
|
|
3512
|
+
var BORDER_TYPE_LABEL = __15("Border type", "elementor");
|
|
3472
3513
|
var borderStyles = [
|
|
3473
|
-
{ value: "none", label:
|
|
3474
|
-
{ value: "solid", label:
|
|
3475
|
-
{ value: "dashed", label:
|
|
3476
|
-
{ value: "dotted", label:
|
|
3477
|
-
{ value: "double", label:
|
|
3478
|
-
{ value: "groove", label:
|
|
3479
|
-
{ value: "ridge", label:
|
|
3480
|
-
{ value: "inset", label:
|
|
3481
|
-
{ value: "outset", label:
|
|
3514
|
+
{ value: "none", label: __15("None", "elementor") },
|
|
3515
|
+
{ value: "solid", label: __15("Solid", "elementor") },
|
|
3516
|
+
{ value: "dashed", label: __15("Dashed", "elementor") },
|
|
3517
|
+
{ value: "dotted", label: __15("Dotted", "elementor") },
|
|
3518
|
+
{ value: "double", label: __15("Double", "elementor") },
|
|
3519
|
+
{ value: "groove", label: __15("Groove", "elementor") },
|
|
3520
|
+
{ value: "ridge", label: __15("Ridge", "elementor") },
|
|
3521
|
+
{ value: "inset", label: __15("Inset", "elementor") },
|
|
3522
|
+
{ value: "outset", label: __15("Outset", "elementor") }
|
|
3482
3523
|
];
|
|
3483
|
-
var BorderStyleField = () => /* @__PURE__ */
|
|
3524
|
+
var BorderStyleField = () => /* @__PURE__ */ React35.createElement(StylesField, { bind: "border-style", propDisplayName: BORDER_TYPE_LABEL }, /* @__PURE__ */ React35.createElement(StylesFieldLayout, { label: BORDER_TYPE_LABEL }, /* @__PURE__ */ React35.createElement(SelectControl, { options: borderStyles })));
|
|
3484
3525
|
|
|
3485
3526
|
// src/components/style-sections/border-section/border-width-field.tsx
|
|
3486
|
-
import * as
|
|
3527
|
+
import * as React36 from "react";
|
|
3487
3528
|
import { EqualUnequalSizesControl as EqualUnequalSizesControl2 } from "@elementor/editor-controls";
|
|
3488
3529
|
import { borderWidthPropTypeUtil } from "@elementor/editor-props";
|
|
3489
3530
|
import { SideAllIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
|
|
3490
3531
|
import { withDirection as withDirection2 } from "@elementor/ui";
|
|
3491
|
-
import { __ as
|
|
3492
|
-
var BORDER_WIDTH_LABEL =
|
|
3532
|
+
import { __ as __16 } from "@wordpress/i18n";
|
|
3533
|
+
var BORDER_WIDTH_LABEL = __16("Border width", "elementor");
|
|
3493
3534
|
var InlineStartIcon = withDirection2(SideRightIcon);
|
|
3494
3535
|
var InlineEndIcon = withDirection2(SideLeftIcon);
|
|
3495
3536
|
var getEdges = (isSiteRtl) => [
|
|
3496
3537
|
{
|
|
3497
|
-
label:
|
|
3498
|
-
ariaLabel:
|
|
3499
|
-
icon: /* @__PURE__ */
|
|
3538
|
+
label: __16("Top", "elementor"),
|
|
3539
|
+
ariaLabel: __16("Border top width", "elementor"),
|
|
3540
|
+
icon: /* @__PURE__ */ React36.createElement(SideTopIcon, { fontSize: "tiny" }),
|
|
3500
3541
|
bind: "block-start"
|
|
3501
3542
|
},
|
|
3502
3543
|
{
|
|
3503
|
-
label: isSiteRtl ?
|
|
3504
|
-
ariaLabel: isSiteRtl ?
|
|
3505
|
-
icon: /* @__PURE__ */
|
|
3544
|
+
label: isSiteRtl ? __16("Left", "elementor") : __16("Right", "elementor"),
|
|
3545
|
+
ariaLabel: isSiteRtl ? __16("Border left width", "elementor") : __16("Border right width", "elementor"),
|
|
3546
|
+
icon: /* @__PURE__ */ React36.createElement(InlineStartIcon, { fontSize: "tiny" }),
|
|
3506
3547
|
bind: "inline-end"
|
|
3507
3548
|
},
|
|
3508
3549
|
{
|
|
3509
|
-
label:
|
|
3510
|
-
ariaLabel:
|
|
3511
|
-
icon: /* @__PURE__ */
|
|
3550
|
+
label: __16("Bottom", "elementor"),
|
|
3551
|
+
ariaLabel: __16("Border bottom width", "elementor"),
|
|
3552
|
+
icon: /* @__PURE__ */ React36.createElement(SideBottomIcon, { fontSize: "tiny" }),
|
|
3512
3553
|
bind: "block-end"
|
|
3513
3554
|
},
|
|
3514
3555
|
{
|
|
3515
|
-
label: isSiteRtl ?
|
|
3516
|
-
ariaLabel: isSiteRtl ?
|
|
3517
|
-
icon: /* @__PURE__ */
|
|
3556
|
+
label: isSiteRtl ? __16("Right", "elementor") : __16("Left", "elementor"),
|
|
3557
|
+
ariaLabel: isSiteRtl ? __16("Border right width", "elementor") : __16("Border left width", "elementor"),
|
|
3558
|
+
icon: /* @__PURE__ */ React36.createElement(InlineEndIcon, { fontSize: "tiny" }),
|
|
3518
3559
|
bind: "inline-start"
|
|
3519
3560
|
}
|
|
3520
3561
|
];
|
|
3521
3562
|
var BorderWidthField = () => {
|
|
3522
3563
|
const { isSiteRtl } = useDirection();
|
|
3523
|
-
return /* @__PURE__ */
|
|
3564
|
+
return /* @__PURE__ */ React36.createElement(StylesField, { bind: "border-width", propDisplayName: BORDER_WIDTH_LABEL }, /* @__PURE__ */ React36.createElement(
|
|
3524
3565
|
EqualUnequalSizesControl2,
|
|
3525
3566
|
{
|
|
3526
3567
|
items: getEdges(isSiteRtl),
|
|
3527
3568
|
label: BORDER_WIDTH_LABEL,
|
|
3528
|
-
icon: /* @__PURE__ */
|
|
3529
|
-
tooltipLabel:
|
|
3569
|
+
icon: /* @__PURE__ */ React36.createElement(SideAllIcon, { fontSize: "tiny" }),
|
|
3570
|
+
tooltipLabel: __16("Adjust borders", "elementor"),
|
|
3530
3571
|
multiSizePropTypeUtil: borderWidthPropTypeUtil
|
|
3531
3572
|
}
|
|
3532
3573
|
));
|
|
3533
3574
|
};
|
|
3534
3575
|
|
|
3535
3576
|
// src/components/style-sections/border-section/border-section.tsx
|
|
3536
|
-
var BorderSection = () => /* @__PURE__ */
|
|
3577
|
+
var BorderSection = () => /* @__PURE__ */ React37.createElement(SectionContent, null, /* @__PURE__ */ React37.createElement(BorderWidthField, null), /* @__PURE__ */ React37.createElement(BorderColorField, null), /* @__PURE__ */ React37.createElement(BorderStyleField, null), /* @__PURE__ */ React37.createElement(BorderRadiusField, null));
|
|
3537
3578
|
|
|
3538
3579
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
3539
|
-
import * as
|
|
3580
|
+
import * as React41 from "react";
|
|
3540
3581
|
import {
|
|
3541
3582
|
BoxShadowRepeaterControl,
|
|
3542
3583
|
FilterRepeaterControl,
|
|
3543
3584
|
TransformRepeaterControl,
|
|
3544
3585
|
TransitionRepeaterControl
|
|
3545
3586
|
} from "@elementor/editor-controls";
|
|
3546
|
-
import { __ as
|
|
3587
|
+
import { __ as __19 } from "@wordpress/i18n";
|
|
3547
3588
|
|
|
3548
3589
|
// src/utils/can-element-have-children.ts
|
|
3549
3590
|
import { getContainer } from "@elementor/editor-elements";
|
|
@@ -3584,73 +3625,73 @@ var getRecentlyUsedList = async (elementId) => {
|
|
|
3584
3625
|
};
|
|
3585
3626
|
|
|
3586
3627
|
// src/components/panel-divider.tsx
|
|
3587
|
-
import * as
|
|
3628
|
+
import * as React38 from "react";
|
|
3588
3629
|
import { Divider as Divider4 } from "@elementor/ui";
|
|
3589
|
-
var PanelDivider = () => /* @__PURE__ */
|
|
3630
|
+
var PanelDivider = () => /* @__PURE__ */ React38.createElement(Divider4, { sx: { my: 0.5 } });
|
|
3590
3631
|
|
|
3591
3632
|
// src/components/style-sections/effects-section/blend-mode-field.tsx
|
|
3592
|
-
import * as
|
|
3633
|
+
import * as React39 from "react";
|
|
3593
3634
|
import { SelectControl as SelectControl2 } from "@elementor/editor-controls";
|
|
3594
|
-
import { __ as
|
|
3595
|
-
var BLEND_MODE_LABEL =
|
|
3635
|
+
import { __ as __17 } from "@wordpress/i18n";
|
|
3636
|
+
var BLEND_MODE_LABEL = __17("Blend mode", "elementor");
|
|
3596
3637
|
var blendModeOptions = [
|
|
3597
|
-
{ label:
|
|
3598
|
-
{ label:
|
|
3599
|
-
{ label:
|
|
3600
|
-
{ label:
|
|
3601
|
-
{ label:
|
|
3602
|
-
{ label:
|
|
3603
|
-
{ label:
|
|
3604
|
-
{ label:
|
|
3605
|
-
{ label:
|
|
3606
|
-
{ label:
|
|
3607
|
-
{ label:
|
|
3608
|
-
{ label:
|
|
3609
|
-
{ label:
|
|
3610
|
-
{ label:
|
|
3611
|
-
{ label:
|
|
3612
|
-
{ label:
|
|
3638
|
+
{ label: __17("Normal", "elementor"), value: "normal" },
|
|
3639
|
+
{ label: __17("Multiply", "elementor"), value: "multiply" },
|
|
3640
|
+
{ label: __17("Screen", "elementor"), value: "screen" },
|
|
3641
|
+
{ label: __17("Overlay", "elementor"), value: "overlay" },
|
|
3642
|
+
{ label: __17("Darken", "elementor"), value: "darken" },
|
|
3643
|
+
{ label: __17("Lighten", "elementor"), value: "lighten" },
|
|
3644
|
+
{ label: __17("Color dodge", "elementor"), value: "color-dodge" },
|
|
3645
|
+
{ label: __17("Color burn", "elementor"), value: "color-burn" },
|
|
3646
|
+
{ label: __17("Saturation", "elementor"), value: "saturation" },
|
|
3647
|
+
{ label: __17("Color", "elementor"), value: "color" },
|
|
3648
|
+
{ label: __17("Difference", "elementor"), value: "difference" },
|
|
3649
|
+
{ label: __17("Exclusion", "elementor"), value: "exclusion" },
|
|
3650
|
+
{ label: __17("Hue", "elementor"), value: "hue" },
|
|
3651
|
+
{ label: __17("Luminosity", "elementor"), value: "luminosity" },
|
|
3652
|
+
{ label: __17("Soft light", "elementor"), value: "soft-light" },
|
|
3653
|
+
{ label: __17("Hard light", "elementor"), value: "hard-light" }
|
|
3613
3654
|
];
|
|
3614
3655
|
var BlendModeField = () => {
|
|
3615
|
-
return /* @__PURE__ */
|
|
3656
|
+
return /* @__PURE__ */ React39.createElement(StylesField, { bind: "mix-blend-mode", propDisplayName: BLEND_MODE_LABEL }, /* @__PURE__ */ React39.createElement(StylesFieldLayout, { label: BLEND_MODE_LABEL }, /* @__PURE__ */ React39.createElement(SelectControl2, { options: blendModeOptions })));
|
|
3616
3657
|
};
|
|
3617
3658
|
|
|
3618
3659
|
// src/components/style-sections/effects-section/opacity-control-field.tsx
|
|
3619
|
-
import * as
|
|
3660
|
+
import * as React40 from "react";
|
|
3620
3661
|
import { useRef as useRef5 } from "react";
|
|
3621
3662
|
import { SizeControl as SizeControl2 } from "@elementor/editor-controls";
|
|
3622
|
-
import { __ as
|
|
3623
|
-
var OPACITY_LABEL =
|
|
3663
|
+
import { __ as __18 } from "@wordpress/i18n";
|
|
3664
|
+
var OPACITY_LABEL = __18("Opacity", "elementor");
|
|
3624
3665
|
var OpacityControlField = () => {
|
|
3625
3666
|
const rowRef = useRef5(null);
|
|
3626
|
-
return /* @__PURE__ */
|
|
3667
|
+
return /* @__PURE__ */ React40.createElement(StylesField, { bind: "opacity", propDisplayName: OPACITY_LABEL }, /* @__PURE__ */ React40.createElement(StylesFieldLayout, { ref: rowRef, label: OPACITY_LABEL }, /* @__PURE__ */ React40.createElement(SizeControl2, { units: ["%"], anchorRef: rowRef, defaultUnit: "%" })));
|
|
3627
3668
|
};
|
|
3628
3669
|
|
|
3629
3670
|
// src/components/style-sections/effects-section/effects-section.tsx
|
|
3630
|
-
var BOX_SHADOW_LABEL =
|
|
3631
|
-
var FILTER_LABEL =
|
|
3632
|
-
var TRANSFORM_LABEL =
|
|
3633
|
-
var BACKDROP_FILTER_LABEL =
|
|
3634
|
-
var TRANSITIONS_LABEL =
|
|
3671
|
+
var BOX_SHADOW_LABEL = __19("Box shadow", "elementor");
|
|
3672
|
+
var FILTER_LABEL = __19("Filters", "elementor");
|
|
3673
|
+
var TRANSFORM_LABEL = __19("Transform", "elementor");
|
|
3674
|
+
var BACKDROP_FILTER_LABEL = __19("Backdrop filters", "elementor");
|
|
3675
|
+
var TRANSITIONS_LABEL = __19("Transitions", "elementor");
|
|
3635
3676
|
var EffectsSection = () => {
|
|
3636
3677
|
const { element } = useElement();
|
|
3637
3678
|
const { meta } = useStyle();
|
|
3638
3679
|
const canHaveChildren = canElementHaveChildren(element?.id ?? "");
|
|
3639
|
-
return /* @__PURE__ */
|
|
3680
|
+
return /* @__PURE__ */ React41.createElement(SectionContent, { gap: 1 }, /* @__PURE__ */ React41.createElement(BlendModeField, null), /* @__PURE__ */ React41.createElement(PanelDivider, null), /* @__PURE__ */ React41.createElement(OpacityControlField, null), /* @__PURE__ */ React41.createElement(PanelDivider, null), /* @__PURE__ */ React41.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React41.createElement(BoxShadowRepeaterControl, null)), /* @__PURE__ */ React41.createElement(PanelDivider, null), /* @__PURE__ */ React41.createElement(StylesField, { bind: "transform", propDisplayName: TRANSFORM_LABEL }, /* @__PURE__ */ React41.createElement(TransformRepeaterControl, { showChildrenPerspective: canHaveChildren })), /* @__PURE__ */ React41.createElement(PanelDivider, null), /* @__PURE__ */ React41.createElement(StylesField, { bind: "transition", propDisplayName: TRANSITIONS_LABEL }, /* @__PURE__ */ React41.createElement(
|
|
3640
3681
|
TransitionRepeaterControl,
|
|
3641
3682
|
{
|
|
3642
3683
|
currentStyleState: meta.state,
|
|
3643
3684
|
recentlyUsedListGetter: () => getRecentlyUsedList(element?.id ?? "")
|
|
3644
3685
|
}
|
|
3645
|
-
)), /* @__PURE__ */
|
|
3686
|
+
)), /* @__PURE__ */ React41.createElement(PanelDivider, null), /* @__PURE__ */ React41.createElement(StylesField, { bind: "filter", propDisplayName: FILTER_LABEL }, /* @__PURE__ */ React41.createElement(FilterRepeaterControl, null)), /* @__PURE__ */ React41.createElement(PanelDivider, null), /* @__PURE__ */ React41.createElement(StylesField, { bind: "backdrop-filter", propDisplayName: BACKDROP_FILTER_LABEL }, /* @__PURE__ */ React41.createElement(FilterRepeaterControl, { filterPropName: "backdrop-filter" })));
|
|
3646
3687
|
};
|
|
3647
3688
|
|
|
3648
3689
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
3649
|
-
import * as
|
|
3690
|
+
import * as React62 from "react";
|
|
3650
3691
|
import { ControlFormLabel as ControlFormLabel2 } from "@elementor/editor-controls";
|
|
3651
3692
|
import { useParentElement } from "@elementor/editor-elements";
|
|
3652
3693
|
import { createLocation as createLocation3 } from "@elementor/locations";
|
|
3653
|
-
import { __ as
|
|
3694
|
+
import { __ as __39 } from "@wordpress/i18n";
|
|
3654
3695
|
|
|
3655
3696
|
// src/hooks/use-computed-style.ts
|
|
3656
3697
|
import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, windowEvent as windowEvent2 } from "@elementor/editor-v1-adapters";
|
|
@@ -3677,19 +3718,19 @@ function useComputedStyle(elementId) {
|
|
|
3677
3718
|
}
|
|
3678
3719
|
|
|
3679
3720
|
// src/components/style-tab-collapsible-content.tsx
|
|
3680
|
-
import * as
|
|
3721
|
+
import * as React43 from "react";
|
|
3681
3722
|
import { CollapsibleContent } from "@elementor/editor-ui";
|
|
3682
3723
|
|
|
3683
3724
|
// src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
|
|
3684
|
-
import * as
|
|
3725
|
+
import * as React42 from "react";
|
|
3685
3726
|
import { isElementsStylesProvider as isElementsStylesProvider6 } from "@elementor/editor-styles-repository";
|
|
3686
3727
|
import { Stack as Stack8, Tooltip as Tooltip2 } from "@elementor/ui";
|
|
3687
|
-
import { __ as
|
|
3728
|
+
import { __ as __20 } from "@wordpress/i18n";
|
|
3688
3729
|
var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
3689
3730
|
const { id, meta, provider } = useStyle();
|
|
3690
3731
|
const snapshot = useStylesInheritanceSnapshot();
|
|
3691
3732
|
if (fields.includes("custom_css")) {
|
|
3692
|
-
return /* @__PURE__ */
|
|
3733
|
+
return /* @__PURE__ */ React42.createElement(CustomCssIndicator, null);
|
|
3693
3734
|
}
|
|
3694
3735
|
const snapshotFields = Object.fromEntries(
|
|
3695
3736
|
Object.entries(snapshot ?? {}).filter(([key]) => fields.includes(key))
|
|
@@ -3698,9 +3739,9 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
3698
3739
|
if (!hasValues && !hasOverrides) {
|
|
3699
3740
|
return null;
|
|
3700
3741
|
}
|
|
3701
|
-
const hasValueLabel =
|
|
3702
|
-
const hasOverridesLabel =
|
|
3703
|
-
return /* @__PURE__ */
|
|
3742
|
+
const hasValueLabel = __20("Has effective styles", "elementor");
|
|
3743
|
+
const hasOverridesLabel = __20("Has overridden styles", "elementor");
|
|
3744
|
+
return /* @__PURE__ */ React42.createElement(Tooltip2, { title: __20("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React42.createElement(Stack8, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React42.createElement(
|
|
3704
3745
|
StyleIndicator,
|
|
3705
3746
|
{
|
|
3706
3747
|
getColor: getStylesProviderThemeColor(provider.getKey()),
|
|
@@ -3708,7 +3749,7 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
3708
3749
|
role: "listitem",
|
|
3709
3750
|
"aria-label": hasValueLabel
|
|
3710
3751
|
}
|
|
3711
|
-
), hasOverrides && /* @__PURE__ */
|
|
3752
|
+
), hasOverrides && /* @__PURE__ */ React42.createElement(
|
|
3712
3753
|
StyleIndicator,
|
|
3713
3754
|
{
|
|
3714
3755
|
isOverridden: true,
|
|
@@ -3748,17 +3789,17 @@ function getCurrentStyleFromChain(chain, styleId, meta) {
|
|
|
3748
3789
|
|
|
3749
3790
|
// src/components/style-tab-collapsible-content.tsx
|
|
3750
3791
|
var StyleTabCollapsibleContent = ({ fields = [], children }) => {
|
|
3751
|
-
return /* @__PURE__ */
|
|
3792
|
+
return /* @__PURE__ */ React43.createElement(CollapsibleContent, { titleEnd: getStylesInheritanceIndicators(fields) }, children);
|
|
3752
3793
|
};
|
|
3753
3794
|
function getStylesInheritanceIndicators(fields) {
|
|
3754
3795
|
if (fields.length === 0) {
|
|
3755
3796
|
return null;
|
|
3756
3797
|
}
|
|
3757
|
-
return (isOpen) => !isOpen ? /* @__PURE__ */
|
|
3798
|
+
return (isOpen) => !isOpen ? /* @__PURE__ */ React43.createElement(StylesInheritanceSectionIndicators, { fields }) : null;
|
|
3758
3799
|
}
|
|
3759
3800
|
|
|
3760
3801
|
// src/components/style-sections/layout-section/align-content-field.tsx
|
|
3761
|
-
import * as
|
|
3802
|
+
import * as React45 from "react";
|
|
3762
3803
|
import { ToggleControl as ToggleControl2 } from "@elementor/editor-controls";
|
|
3763
3804
|
import {
|
|
3764
3805
|
JustifyBottomIcon,
|
|
@@ -3769,14 +3810,14 @@ import {
|
|
|
3769
3810
|
JustifyTopIcon
|
|
3770
3811
|
} from "@elementor/icons";
|
|
3771
3812
|
import { withDirection as withDirection3 } from "@elementor/ui";
|
|
3772
|
-
import { __ as
|
|
3813
|
+
import { __ as __22 } from "@wordpress/i18n";
|
|
3773
3814
|
|
|
3774
3815
|
// src/components/style-sections/layout-section/utils/rotated-icon.tsx
|
|
3775
|
-
import * as
|
|
3816
|
+
import * as React44 from "react";
|
|
3776
3817
|
import { useRef as useRef6 } from "react";
|
|
3777
3818
|
import { useTheme as useTheme2 } from "@elementor/ui";
|
|
3778
|
-
import { __ as
|
|
3779
|
-
var FLEX_DIRECTION_LABEL =
|
|
3819
|
+
import { __ as __21 } from "@wordpress/i18n";
|
|
3820
|
+
var FLEX_DIRECTION_LABEL = __21("Flex direction", "elementor");
|
|
3780
3821
|
var CLOCKWISE_ANGLES = {
|
|
3781
3822
|
row: 0,
|
|
3782
3823
|
column: 90,
|
|
@@ -3798,7 +3839,7 @@ var RotatedIcon = ({
|
|
|
3798
3839
|
}) => {
|
|
3799
3840
|
const rotate = useRef6(useGetTargetAngle(isClockwise, offset, disableRotationForReversed));
|
|
3800
3841
|
rotate.current = useGetTargetAngle(isClockwise, offset, disableRotationForReversed, rotate);
|
|
3801
|
-
return /* @__PURE__ */
|
|
3842
|
+
return /* @__PURE__ */ React44.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
|
|
3802
3843
|
};
|
|
3803
3844
|
var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existingRef) => {
|
|
3804
3845
|
const { value: direction } = useStylesField("flex-direction", {
|
|
@@ -3819,7 +3860,7 @@ var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existi
|
|
|
3819
3860
|
};
|
|
3820
3861
|
|
|
3821
3862
|
// src/components/style-sections/layout-section/align-content-field.tsx
|
|
3822
|
-
var ALIGN_CONTENT_LABEL =
|
|
3863
|
+
var ALIGN_CONTENT_LABEL = __22("Align content", "elementor");
|
|
3823
3864
|
var StartIcon = withDirection3(JustifyTopIcon);
|
|
3824
3865
|
var EndIcon = withDirection3(JustifyBottomIcon);
|
|
3825
3866
|
var iconProps = {
|
|
@@ -3830,45 +3871,45 @@ var iconProps = {
|
|
|
3830
3871
|
var options = [
|
|
3831
3872
|
{
|
|
3832
3873
|
value: "start",
|
|
3833
|
-
label:
|
|
3834
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3874
|
+
label: __22("Start", "elementor"),
|
|
3875
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
|
|
3835
3876
|
showTooltip: true
|
|
3836
3877
|
},
|
|
3837
3878
|
{
|
|
3838
3879
|
value: "center",
|
|
3839
|
-
label:
|
|
3840
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3880
|
+
label: __22("Center", "elementor"),
|
|
3881
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: CenterIcon, size, ...iconProps }),
|
|
3841
3882
|
showTooltip: true
|
|
3842
3883
|
},
|
|
3843
3884
|
{
|
|
3844
3885
|
value: "end",
|
|
3845
|
-
label:
|
|
3846
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3886
|
+
label: __22("End", "elementor"),
|
|
3887
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
|
|
3847
3888
|
showTooltip: true
|
|
3848
3889
|
},
|
|
3849
3890
|
{
|
|
3850
3891
|
value: "space-between",
|
|
3851
|
-
label:
|
|
3852
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3892
|
+
label: __22("Space between", "elementor"),
|
|
3893
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: BetweenIcon, size, ...iconProps }),
|
|
3853
3894
|
showTooltip: true
|
|
3854
3895
|
},
|
|
3855
3896
|
{
|
|
3856
3897
|
value: "space-around",
|
|
3857
|
-
label:
|
|
3858
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3898
|
+
label: __22("Space around", "elementor"),
|
|
3899
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: AroundIcon, size, ...iconProps }),
|
|
3859
3900
|
showTooltip: true
|
|
3860
3901
|
},
|
|
3861
3902
|
{
|
|
3862
3903
|
value: "space-evenly",
|
|
3863
|
-
label:
|
|
3864
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3904
|
+
label: __22("Space evenly", "elementor"),
|
|
3905
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: EvenlyIcon, size, ...iconProps }),
|
|
3865
3906
|
showTooltip: true
|
|
3866
3907
|
}
|
|
3867
3908
|
];
|
|
3868
|
-
var AlignContentField = () => /* @__PURE__ */
|
|
3909
|
+
var AlignContentField = () => /* @__PURE__ */ React45.createElement(StylesField, { bind: "align-content", propDisplayName: ALIGN_CONTENT_LABEL }, /* @__PURE__ */ React45.createElement(UiProviders, null, /* @__PURE__ */ React45.createElement(StylesFieldLayout, { label: ALIGN_CONTENT_LABEL, direction: "column" }, /* @__PURE__ */ React45.createElement(ToggleControl2, { options, fullWidth: true }))));
|
|
3869
3910
|
|
|
3870
3911
|
// src/components/style-sections/layout-section/align-items-field.tsx
|
|
3871
|
-
import * as
|
|
3912
|
+
import * as React46 from "react";
|
|
3872
3913
|
import { ToggleControl as ToggleControl3 } from "@elementor/editor-controls";
|
|
3873
3914
|
import {
|
|
3874
3915
|
LayoutAlignCenterIcon as CenterIcon2,
|
|
@@ -3877,8 +3918,8 @@ import {
|
|
|
3877
3918
|
LayoutDistributeVerticalIcon as JustifyIcon
|
|
3878
3919
|
} from "@elementor/icons";
|
|
3879
3920
|
import { withDirection as withDirection4 } from "@elementor/ui";
|
|
3880
|
-
import { __ as
|
|
3881
|
-
var ALIGN_ITEMS_LABEL =
|
|
3921
|
+
import { __ as __23 } from "@wordpress/i18n";
|
|
3922
|
+
var ALIGN_ITEMS_LABEL = __23("Align items", "elementor");
|
|
3882
3923
|
var StartIcon2 = withDirection4(LayoutAlignLeftIcon);
|
|
3883
3924
|
var EndIcon2 = withDirection4(LayoutAlignRightIcon);
|
|
3884
3925
|
var iconProps2 = {
|
|
@@ -3888,35 +3929,35 @@ var iconProps2 = {
|
|
|
3888
3929
|
var options2 = [
|
|
3889
3930
|
{
|
|
3890
3931
|
value: "start",
|
|
3891
|
-
label:
|
|
3892
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3932
|
+
label: __23("Start", "elementor"),
|
|
3933
|
+
renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
|
|
3893
3934
|
showTooltip: true
|
|
3894
3935
|
},
|
|
3895
3936
|
{
|
|
3896
3937
|
value: "center",
|
|
3897
|
-
label:
|
|
3898
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3938
|
+
label: __23("Center", "elementor"),
|
|
3939
|
+
renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(RotatedIcon, { icon: CenterIcon2, size, ...iconProps2 }),
|
|
3899
3940
|
showTooltip: true
|
|
3900
3941
|
},
|
|
3901
3942
|
{
|
|
3902
3943
|
value: "end",
|
|
3903
|
-
label:
|
|
3904
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3944
|
+
label: __23("End", "elementor"),
|
|
3945
|
+
renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
|
|
3905
3946
|
showTooltip: true
|
|
3906
3947
|
},
|
|
3907
3948
|
{
|
|
3908
3949
|
value: "stretch",
|
|
3909
|
-
label:
|
|
3910
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3950
|
+
label: __23("Stretch", "elementor"),
|
|
3951
|
+
renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(RotatedIcon, { icon: JustifyIcon, size, ...iconProps2 }),
|
|
3911
3952
|
showTooltip: true
|
|
3912
3953
|
}
|
|
3913
3954
|
];
|
|
3914
3955
|
var AlignItemsField = () => {
|
|
3915
|
-
return /* @__PURE__ */
|
|
3956
|
+
return /* @__PURE__ */ React46.createElement(UiProviders, null, /* @__PURE__ */ React46.createElement(StylesField, { bind: "align-items", propDisplayName: ALIGN_ITEMS_LABEL }, /* @__PURE__ */ React46.createElement(StylesFieldLayout, { label: ALIGN_ITEMS_LABEL }, /* @__PURE__ */ React46.createElement(ToggleControl3, { options: options2 }))));
|
|
3916
3957
|
};
|
|
3917
3958
|
|
|
3918
3959
|
// src/components/style-sections/layout-section/align-self-child-field.tsx
|
|
3919
|
-
import * as
|
|
3960
|
+
import * as React47 from "react";
|
|
3920
3961
|
import { ToggleControl as ToggleControl4 } from "@elementor/editor-controls";
|
|
3921
3962
|
import {
|
|
3922
3963
|
LayoutAlignCenterIcon as CenterIcon3,
|
|
@@ -3925,8 +3966,8 @@ import {
|
|
|
3925
3966
|
LayoutDistributeVerticalIcon as JustifyIcon2
|
|
3926
3967
|
} from "@elementor/icons";
|
|
3927
3968
|
import { withDirection as withDirection5 } from "@elementor/ui";
|
|
3928
|
-
import { __ as
|
|
3929
|
-
var ALIGN_SELF_LABEL =
|
|
3969
|
+
import { __ as __24 } from "@wordpress/i18n";
|
|
3970
|
+
var ALIGN_SELF_LABEL = __24("Align self", "elementor");
|
|
3930
3971
|
var ALIGN_SELF_CHILD_OFFSET_MAP = {
|
|
3931
3972
|
row: 90,
|
|
3932
3973
|
"row-reverse": 90,
|
|
@@ -3941,8 +3982,8 @@ var iconProps3 = {
|
|
|
3941
3982
|
var getOptions = (parentStyleDirection) => [
|
|
3942
3983
|
{
|
|
3943
3984
|
value: "start",
|
|
3944
|
-
label:
|
|
3945
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3985
|
+
label: __24("Start", "elementor"),
|
|
3986
|
+
renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(
|
|
3946
3987
|
RotatedIcon,
|
|
3947
3988
|
{
|
|
3948
3989
|
icon: StartIcon3,
|
|
@@ -3955,8 +3996,8 @@ var getOptions = (parentStyleDirection) => [
|
|
|
3955
3996
|
},
|
|
3956
3997
|
{
|
|
3957
3998
|
value: "center",
|
|
3958
|
-
label:
|
|
3959
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3999
|
+
label: __24("Center", "elementor"),
|
|
4000
|
+
renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(
|
|
3960
4001
|
RotatedIcon,
|
|
3961
4002
|
{
|
|
3962
4003
|
icon: CenterIcon3,
|
|
@@ -3969,8 +4010,8 @@ var getOptions = (parentStyleDirection) => [
|
|
|
3969
4010
|
},
|
|
3970
4011
|
{
|
|
3971
4012
|
value: "end",
|
|
3972
|
-
label:
|
|
3973
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4013
|
+
label: __24("End", "elementor"),
|
|
4014
|
+
renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(
|
|
3974
4015
|
RotatedIcon,
|
|
3975
4016
|
{
|
|
3976
4017
|
icon: EndIcon3,
|
|
@@ -3983,8 +4024,8 @@ var getOptions = (parentStyleDirection) => [
|
|
|
3983
4024
|
},
|
|
3984
4025
|
{
|
|
3985
4026
|
value: "stretch",
|
|
3986
|
-
label:
|
|
3987
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4027
|
+
label: __24("Stretch", "elementor"),
|
|
4028
|
+
renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(
|
|
3988
4029
|
RotatedIcon,
|
|
3989
4030
|
{
|
|
3990
4031
|
icon: JustifyIcon2,
|
|
@@ -3996,10 +4037,10 @@ var getOptions = (parentStyleDirection) => [
|
|
|
3996
4037
|
showTooltip: true
|
|
3997
4038
|
}
|
|
3998
4039
|
];
|
|
3999
|
-
var AlignSelfChild = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
4040
|
+
var AlignSelfChild = ({ parentStyleDirection }) => /* @__PURE__ */ React47.createElement(StylesField, { bind: "align-self", propDisplayName: ALIGN_SELF_LABEL }, /* @__PURE__ */ React47.createElement(UiProviders, null, /* @__PURE__ */ React47.createElement(StylesFieldLayout, { label: ALIGN_SELF_LABEL }, /* @__PURE__ */ React47.createElement(ToggleControl4, { options: getOptions(parentStyleDirection) }))));
|
|
4000
4041
|
|
|
4001
4042
|
// src/components/style-sections/layout-section/align-self-grid-child-field.tsx
|
|
4002
|
-
import * as
|
|
4043
|
+
import * as React48 from "react";
|
|
4003
4044
|
import { ToggleControl as ToggleControl5 } from "@elementor/editor-controls";
|
|
4004
4045
|
import {
|
|
4005
4046
|
JustifyBottomIcon as JustifyBottomIcon2,
|
|
@@ -4007,143 +4048,143 @@ import {
|
|
|
4007
4048
|
JustifyTopIcon as JustifyTopIcon2,
|
|
4008
4049
|
LayoutDistributeVerticalIcon as JustifyIcon3
|
|
4009
4050
|
} from "@elementor/icons";
|
|
4010
|
-
import { __ as
|
|
4011
|
-
var ALIGN_SELF_LABEL2 =
|
|
4051
|
+
import { __ as __25 } from "@wordpress/i18n";
|
|
4052
|
+
var ALIGN_SELF_LABEL2 = __25("Align self", "elementor");
|
|
4012
4053
|
var ALIGN_SELF_CHILD_OFFSET_MAP2 = {
|
|
4013
4054
|
row: 0,
|
|
4014
4055
|
column: -90
|
|
4015
4056
|
};
|
|
4016
|
-
var AlignSelfGridChild = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
4057
|
+
var AlignSelfGridChild = ({ parentStyleDirection }) => /* @__PURE__ */ React48.createElement(StylesField, { bind: "align-self", propDisplayName: ALIGN_SELF_LABEL2 }, /* @__PURE__ */ React48.createElement(UiProviders, null, /* @__PURE__ */ React48.createElement(StylesFieldLayout, { label: ALIGN_SELF_LABEL2 }, /* @__PURE__ */ React48.createElement(ToggleControl5, { options: getOptions2(parentStyleDirection ?? "row") }))));
|
|
4017
4058
|
var RotatedIcon2 = ({
|
|
4018
4059
|
icon: Icon,
|
|
4019
4060
|
size,
|
|
4020
4061
|
offset
|
|
4021
|
-
}) => /* @__PURE__ */
|
|
4062
|
+
}) => /* @__PURE__ */ React48.createElement(Icon, { fontSize: size, sx: { rotate: `${offset}deg` } });
|
|
4022
4063
|
var getOptions2 = (parentStyleDirection) => {
|
|
4023
4064
|
const offset = ALIGN_SELF_CHILD_OFFSET_MAP2[parentStyleDirection.replace("dense", "").trim()];
|
|
4024
4065
|
return [
|
|
4025
4066
|
{
|
|
4026
4067
|
value: "start",
|
|
4027
|
-
label:
|
|
4028
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4068
|
+
label: __25("Start", "elementor"),
|
|
4069
|
+
renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(RotatedIcon2, { icon: JustifyTopIcon2, size, offset }),
|
|
4029
4070
|
showTooltip: true
|
|
4030
4071
|
},
|
|
4031
4072
|
{
|
|
4032
4073
|
value: "center",
|
|
4033
|
-
label:
|
|
4034
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4074
|
+
label: __25("Center", "elementor"),
|
|
4075
|
+
renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(RotatedIcon2, { icon: JustifyCenterIcon, size, offset }),
|
|
4035
4076
|
showTooltip: true
|
|
4036
4077
|
},
|
|
4037
4078
|
{
|
|
4038
4079
|
value: "end",
|
|
4039
|
-
label:
|
|
4040
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4080
|
+
label: __25("End", "elementor"),
|
|
4081
|
+
renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(RotatedIcon2, { icon: JustifyBottomIcon2, size, offset }),
|
|
4041
4082
|
showTooltip: true
|
|
4042
4083
|
},
|
|
4043
4084
|
{
|
|
4044
4085
|
value: "stretch",
|
|
4045
|
-
label:
|
|
4046
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4086
|
+
label: __25("Stretch", "elementor"),
|
|
4087
|
+
renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(RotatedIcon2, { icon: JustifyIcon3, size, offset }),
|
|
4047
4088
|
showTooltip: true
|
|
4048
4089
|
}
|
|
4049
4090
|
];
|
|
4050
4091
|
};
|
|
4051
4092
|
|
|
4052
4093
|
// src/components/style-sections/layout-section/display-field.tsx
|
|
4053
|
-
import * as
|
|
4094
|
+
import * as React49 from "react";
|
|
4054
4095
|
import { ToggleControl as ToggleControl6 } from "@elementor/editor-controls";
|
|
4055
|
-
import { __ as
|
|
4056
|
-
var DISPLAY_LABEL =
|
|
4096
|
+
import { __ as __26 } from "@wordpress/i18n";
|
|
4097
|
+
var DISPLAY_LABEL = __26("Display", "elementor");
|
|
4057
4098
|
var displayFieldItems = [
|
|
4058
4099
|
{
|
|
4059
4100
|
value: "block",
|
|
4060
|
-
renderContent: () =>
|
|
4061
|
-
label:
|
|
4101
|
+
renderContent: () => __26("Block", "elementor"),
|
|
4102
|
+
label: __26("Block", "elementor"),
|
|
4062
4103
|
showTooltip: true
|
|
4063
4104
|
},
|
|
4064
4105
|
{
|
|
4065
4106
|
value: "flex",
|
|
4066
|
-
renderContent: () =>
|
|
4067
|
-
label:
|
|
4107
|
+
renderContent: () => __26("Flex", "elementor"),
|
|
4108
|
+
label: __26("Flex", "elementor"),
|
|
4068
4109
|
showTooltip: true
|
|
4069
4110
|
},
|
|
4070
4111
|
{
|
|
4071
4112
|
value: "grid",
|
|
4072
|
-
renderContent: () =>
|
|
4073
|
-
label:
|
|
4113
|
+
renderContent: () => __26("Grid", "elementor"),
|
|
4114
|
+
label: __26("Grid", "elementor"),
|
|
4074
4115
|
showTooltip: true
|
|
4075
4116
|
},
|
|
4076
4117
|
{
|
|
4077
4118
|
value: "none",
|
|
4078
|
-
renderContent: () =>
|
|
4079
|
-
label:
|
|
4119
|
+
renderContent: () => __26("None", "elementor"),
|
|
4120
|
+
label: __26("None", "elementor"),
|
|
4080
4121
|
showTooltip: true
|
|
4081
4122
|
},
|
|
4082
4123
|
{
|
|
4083
4124
|
value: "inline-block",
|
|
4084
|
-
renderContent: () =>
|
|
4085
|
-
label:
|
|
4125
|
+
renderContent: () => __26("In-blk", "elementor"),
|
|
4126
|
+
label: __26("Inline-block", "elementor"),
|
|
4086
4127
|
showTooltip: true
|
|
4087
4128
|
},
|
|
4088
4129
|
{
|
|
4089
4130
|
value: "inline-flex",
|
|
4090
|
-
renderContent: () =>
|
|
4091
|
-
label:
|
|
4131
|
+
renderContent: () => __26("In-flx", "elementor"),
|
|
4132
|
+
label: __26("Inline-flex", "elementor"),
|
|
4092
4133
|
showTooltip: true
|
|
4093
4134
|
}
|
|
4094
4135
|
];
|
|
4095
4136
|
var DisplayField = () => {
|
|
4096
4137
|
const placeholder = useDisplayPlaceholderValue();
|
|
4097
|
-
return /* @__PURE__ */
|
|
4138
|
+
return /* @__PURE__ */ React49.createElement(StylesField, { bind: "display", propDisplayName: DISPLAY_LABEL, placeholder }, /* @__PURE__ */ React49.createElement(StylesFieldLayout, { label: DISPLAY_LABEL, direction: "column" }, /* @__PURE__ */ React49.createElement(ToggleControl6, { options: displayFieldItems, maxItems: 4, fullWidth: true })));
|
|
4098
4139
|
};
|
|
4099
4140
|
var useDisplayPlaceholderValue = () => useStylesInheritanceChain(["display"])[0]?.value ?? void 0;
|
|
4100
4141
|
|
|
4101
4142
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
4102
|
-
import * as
|
|
4143
|
+
import * as React50 from "react";
|
|
4103
4144
|
import { ToggleControl as ToggleControl7 } from "@elementor/editor-controls";
|
|
4104
4145
|
import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
|
|
4105
4146
|
import { withDirection as withDirection6 } from "@elementor/ui";
|
|
4106
|
-
import { __ as
|
|
4107
|
-
var FLEX_DIRECTION_LABEL2 =
|
|
4147
|
+
import { __ as __27 } from "@wordpress/i18n";
|
|
4148
|
+
var FLEX_DIRECTION_LABEL2 = __27("Direction", "elementor");
|
|
4108
4149
|
var options3 = [
|
|
4109
4150
|
{
|
|
4110
4151
|
value: "row",
|
|
4111
|
-
label:
|
|
4152
|
+
label: __27("Row", "elementor"),
|
|
4112
4153
|
renderContent: ({ size }) => {
|
|
4113
4154
|
const StartIcon7 = withDirection6(ArrowRightIcon);
|
|
4114
|
-
return /* @__PURE__ */
|
|
4155
|
+
return /* @__PURE__ */ React50.createElement(StartIcon7, { fontSize: size });
|
|
4115
4156
|
},
|
|
4116
4157
|
showTooltip: true
|
|
4117
4158
|
},
|
|
4118
4159
|
{
|
|
4119
4160
|
value: "column",
|
|
4120
|
-
label:
|
|
4121
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4161
|
+
label: __27("Column", "elementor"),
|
|
4162
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(ArrowDownSmallIcon, { fontSize: size }),
|
|
4122
4163
|
showTooltip: true
|
|
4123
4164
|
},
|
|
4124
4165
|
{
|
|
4125
4166
|
value: "row-reverse",
|
|
4126
|
-
label:
|
|
4167
|
+
label: __27("Reversed row", "elementor"),
|
|
4127
4168
|
renderContent: ({ size }) => {
|
|
4128
4169
|
const EndIcon6 = withDirection6(ArrowLeftIcon);
|
|
4129
|
-
return /* @__PURE__ */
|
|
4170
|
+
return /* @__PURE__ */ React50.createElement(EndIcon6, { fontSize: size });
|
|
4130
4171
|
},
|
|
4131
4172
|
showTooltip: true
|
|
4132
4173
|
},
|
|
4133
4174
|
{
|
|
4134
4175
|
value: "column-reverse",
|
|
4135
|
-
label:
|
|
4136
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4176
|
+
label: __27("Reversed column", "elementor"),
|
|
4177
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(ArrowUpSmallIcon, { fontSize: size }),
|
|
4137
4178
|
showTooltip: true
|
|
4138
4179
|
}
|
|
4139
4180
|
];
|
|
4140
4181
|
var FlexDirectionField = () => {
|
|
4141
|
-
return /* @__PURE__ */
|
|
4182
|
+
return /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-direction", propDisplayName: FLEX_DIRECTION_LABEL2 }, /* @__PURE__ */ React50.createElement(UiProviders, null, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: FLEX_DIRECTION_LABEL2 }, /* @__PURE__ */ React50.createElement(ToggleControl7, { options: options3 }))));
|
|
4142
4183
|
};
|
|
4143
4184
|
|
|
4144
4185
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
4145
|
-
import * as
|
|
4146
|
-
import { useEffect as useEffect5, useMemo as useMemo9, useState as
|
|
4186
|
+
import * as React51 from "react";
|
|
4187
|
+
import { useEffect as useEffect5, useMemo as useMemo9, useState as useState8 } from "react";
|
|
4147
4188
|
import {
|
|
4148
4189
|
ControlToggleButtonGroup,
|
|
4149
4190
|
NumberControl as NumberControl2,
|
|
@@ -4151,8 +4192,8 @@ import {
|
|
|
4151
4192
|
} from "@elementor/editor-controls";
|
|
4152
4193
|
import { ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowUpSmallIcon as ArrowUpSmallIcon2, PencilIcon } from "@elementor/icons";
|
|
4153
4194
|
import { Grid as Grid2 } from "@elementor/ui";
|
|
4154
|
-
import { __ as
|
|
4155
|
-
var ORDER_LABEL =
|
|
4195
|
+
import { __ as __28 } from "@wordpress/i18n";
|
|
4196
|
+
var ORDER_LABEL = __28("Order", "elementor");
|
|
4156
4197
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
4157
4198
|
var LAST_DEFAULT_VALUE = 99999;
|
|
4158
4199
|
var FIRST = "first";
|
|
@@ -4165,25 +4206,25 @@ var orderValueMap = {
|
|
|
4165
4206
|
var items = [
|
|
4166
4207
|
{
|
|
4167
4208
|
value: FIRST,
|
|
4168
|
-
label:
|
|
4169
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4209
|
+
label: __28("First", "elementor"),
|
|
4210
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(ArrowUpSmallIcon2, { fontSize: size }),
|
|
4170
4211
|
showTooltip: true
|
|
4171
4212
|
},
|
|
4172
4213
|
{
|
|
4173
4214
|
value: LAST,
|
|
4174
|
-
label:
|
|
4175
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4215
|
+
label: __28("Last", "elementor"),
|
|
4216
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(ArrowDownSmallIcon2, { fontSize: size }),
|
|
4176
4217
|
showTooltip: true
|
|
4177
4218
|
},
|
|
4178
4219
|
{
|
|
4179
4220
|
value: CUSTOM,
|
|
4180
|
-
label:
|
|
4181
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4221
|
+
label: __28("Custom", "elementor"),
|
|
4222
|
+
renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(PencilIcon, { fontSize: size }),
|
|
4182
4223
|
showTooltip: true
|
|
4183
4224
|
}
|
|
4184
4225
|
];
|
|
4185
4226
|
var FlexOrderField = () => {
|
|
4186
|
-
return /* @__PURE__ */
|
|
4227
|
+
return /* @__PURE__ */ React51.createElement(StylesField, { bind: "order", propDisplayName: ORDER_LABEL }, /* @__PURE__ */ React51.createElement(UiProviders, null, /* @__PURE__ */ React51.createElement(SectionContent, null, /* @__PURE__ */ React51.createElement(FlexOrderFieldContent, null))));
|
|
4187
4228
|
};
|
|
4188
4229
|
function FlexOrderFieldContent() {
|
|
4189
4230
|
const {
|
|
@@ -4196,8 +4237,8 @@ function FlexOrderFieldContent() {
|
|
|
4196
4237
|
const { placeholder } = useBoundProp3();
|
|
4197
4238
|
const placeholderValue = placeholder;
|
|
4198
4239
|
const currentGroup = useMemo9(() => getGroupControlValue(order?.value ?? null), [order]);
|
|
4199
|
-
const [activeGroup, setActiveGroup] =
|
|
4200
|
-
const [customLocked, setCustomLocked] =
|
|
4240
|
+
const [activeGroup, setActiveGroup] = useState8(currentGroup);
|
|
4241
|
+
const [customLocked, setCustomLocked] = useState8(false);
|
|
4201
4242
|
useEffect5(() => {
|
|
4202
4243
|
if (!customLocked) {
|
|
4203
4244
|
setActiveGroup(currentGroup);
|
|
@@ -4228,7 +4269,7 @@ function FlexOrderFieldContent() {
|
|
|
4228
4269
|
};
|
|
4229
4270
|
const isCustomVisible = CUSTOM === activeGroup || CUSTOM === groupPlaceholder;
|
|
4230
4271
|
const orderPlaceholder = CUSTOM === groupPlaceholder ? String(placeholderValue?.value ?? null) : "";
|
|
4231
|
-
return /* @__PURE__ */
|
|
4272
|
+
return /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ React51.createElement(
|
|
4232
4273
|
ControlToggleButtonGroup,
|
|
4233
4274
|
{
|
|
4234
4275
|
items,
|
|
@@ -4238,7 +4279,7 @@ function FlexOrderFieldContent() {
|
|
|
4238
4279
|
placeholder: groupPlaceholder,
|
|
4239
4280
|
disabled: !canEdit
|
|
4240
4281
|
}
|
|
4241
|
-
)), isCustomVisible && /* @__PURE__ */
|
|
4282
|
+
)), isCustomVisible && /* @__PURE__ */ React51.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(ControlLabel, null, __28("Custom order", "elementor"))), /* @__PURE__ */ React51.createElement(Grid2, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React51.createElement(
|
|
4242
4283
|
NumberControl2,
|
|
4243
4284
|
{
|
|
4244
4285
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
@@ -4262,8 +4303,8 @@ var getGroupControlValue = (order) => {
|
|
|
4262
4303
|
};
|
|
4263
4304
|
|
|
4264
4305
|
// src/components/style-sections/layout-section/flex-size-field.tsx
|
|
4265
|
-
import * as
|
|
4266
|
-
import { useEffect as useEffect6, useMemo as useMemo10, useRef as useRef7, useState as
|
|
4306
|
+
import * as React52 from "react";
|
|
4307
|
+
import { useEffect as useEffect6, useMemo as useMemo10, useRef as useRef7, useState as useState9 } from "react";
|
|
4267
4308
|
import {
|
|
4268
4309
|
ControlToggleButtonGroup as ControlToggleButtonGroup2,
|
|
4269
4310
|
NumberControl as NumberControl3,
|
|
@@ -4274,31 +4315,31 @@ import {
|
|
|
4274
4315
|
} from "@elementor/editor-controls";
|
|
4275
4316
|
import { flexPropTypeUtil, numberPropTypeUtil as numberPropTypeUtil2, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
|
|
4276
4317
|
import { ExpandIcon, PencilIcon as PencilIcon2, ShrinkIcon } from "@elementor/icons";
|
|
4277
|
-
import { __ as
|
|
4278
|
-
var FLEX_SIZE_LABEL =
|
|
4318
|
+
import { __ as __29 } from "@wordpress/i18n";
|
|
4319
|
+
var FLEX_SIZE_LABEL = __29("Flex Size", "elementor");
|
|
4279
4320
|
var DEFAULT = 1;
|
|
4280
4321
|
var items2 = [
|
|
4281
4322
|
{
|
|
4282
4323
|
value: "flex-grow",
|
|
4283
|
-
label:
|
|
4284
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4324
|
+
label: __29("Grow", "elementor"),
|
|
4325
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(ExpandIcon, { fontSize: size }),
|
|
4285
4326
|
showTooltip: true
|
|
4286
4327
|
},
|
|
4287
4328
|
{
|
|
4288
4329
|
value: "flex-shrink",
|
|
4289
|
-
label:
|
|
4290
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4330
|
+
label: __29("Shrink", "elementor"),
|
|
4331
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(ShrinkIcon, { fontSize: size }),
|
|
4291
4332
|
showTooltip: true
|
|
4292
4333
|
},
|
|
4293
4334
|
{
|
|
4294
4335
|
value: "custom",
|
|
4295
|
-
label:
|
|
4296
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4336
|
+
label: __29("Custom", "elementor"),
|
|
4337
|
+
renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(PencilIcon2, { fontSize: size }),
|
|
4297
4338
|
showTooltip: true
|
|
4298
4339
|
}
|
|
4299
4340
|
];
|
|
4300
4341
|
var FlexSizeField = () => {
|
|
4301
|
-
return /* @__PURE__ */
|
|
4342
|
+
return /* @__PURE__ */ React52.createElement(UiProviders, null, /* @__PURE__ */ React52.createElement(SectionContent, null, /* @__PURE__ */ React52.createElement(StylesField, { bind: "flex", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React52.createElement(FlexSizeFieldContent, null))));
|
|
4302
4343
|
};
|
|
4303
4344
|
var FlexSizeFieldContent = () => {
|
|
4304
4345
|
const { value, setValue, canEdit } = useStylesField("flex", {
|
|
@@ -4307,8 +4348,8 @@ var FlexSizeFieldContent = () => {
|
|
|
4307
4348
|
const { placeholder } = useBoundProp4();
|
|
4308
4349
|
const flexValues = extractFlexValues(value);
|
|
4309
4350
|
const currentGroup = useMemo10(() => getActiveGroup(flexValues), [flexValues]);
|
|
4310
|
-
const [activeGroup, setActiveGroup] =
|
|
4311
|
-
const [customLocked, setCustomLocked] =
|
|
4351
|
+
const [activeGroup, setActiveGroup] = useState9(currentGroup);
|
|
4352
|
+
const [customLocked, setCustomLocked] = useState9(false);
|
|
4312
4353
|
useEffect6(() => {
|
|
4313
4354
|
if (!customLocked) {
|
|
4314
4355
|
setActiveGroup(currentGroup);
|
|
@@ -4327,7 +4368,7 @@ var FlexSizeFieldContent = () => {
|
|
|
4327
4368
|
};
|
|
4328
4369
|
const groupPlaceholder = getActiveGroup(extractFlexValues(placeholder));
|
|
4329
4370
|
const isCustomVisible = "custom" === activeGroup || "custom" === groupPlaceholder;
|
|
4330
|
-
return /* @__PURE__ */
|
|
4371
|
+
return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(StylesFieldLayout, { label: FLEX_SIZE_LABEL }, /* @__PURE__ */ React52.createElement(
|
|
4331
4372
|
ControlToggleButtonGroup2,
|
|
4332
4373
|
{
|
|
4333
4374
|
value: activeGroup ?? null,
|
|
@@ -4337,7 +4378,7 @@ var FlexSizeFieldContent = () => {
|
|
|
4337
4378
|
items: items2,
|
|
4338
4379
|
exclusive: true
|
|
4339
4380
|
}
|
|
4340
|
-
)), isCustomVisible && /* @__PURE__ */
|
|
4381
|
+
)), isCustomVisible && /* @__PURE__ */ React52.createElement(FlexCustomField, null));
|
|
4341
4382
|
};
|
|
4342
4383
|
function extractFlexValues(source) {
|
|
4343
4384
|
return {
|
|
@@ -4379,7 +4420,7 @@ var createFlexValueForGroup = (group, flexValue) => {
|
|
|
4379
4420
|
var FlexCustomField = () => {
|
|
4380
4421
|
const flexBasisRowRef = useRef7(null);
|
|
4381
4422
|
const context = useBoundProp4(flexPropTypeUtil);
|
|
4382
|
-
return /* @__PURE__ */
|
|
4423
|
+
return /* @__PURE__ */ React52.createElement(PropProvider3, { ...context }, /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(StylesFieldLayout, { label: __29("Grow", "elementor") }, /* @__PURE__ */ React52.createElement(PropKeyProvider3, { bind: "flexGrow" }, /* @__PURE__ */ React52.createElement(NumberControl3, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React52.createElement(StylesFieldLayout, { label: __29("Shrink", "elementor") }, /* @__PURE__ */ React52.createElement(PropKeyProvider3, { bind: "flexShrink" }, /* @__PURE__ */ React52.createElement(NumberControl3, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React52.createElement(StylesFieldLayout, { label: __29("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React52.createElement(PropKeyProvider3, { bind: "flexBasis" }, /* @__PURE__ */ React52.createElement(SizeControl3, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef })))));
|
|
4383
4424
|
};
|
|
4384
4425
|
var getActiveGroup = ({
|
|
4385
4426
|
grow,
|
|
@@ -4403,34 +4444,34 @@ var getActiveGroup = ({
|
|
|
4403
4444
|
};
|
|
4404
4445
|
|
|
4405
4446
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
4406
|
-
import * as
|
|
4447
|
+
import * as React53 from "react";
|
|
4407
4448
|
import { GapControl } from "@elementor/editor-controls";
|
|
4408
|
-
import { __ as
|
|
4409
|
-
var GAPS_LABEL =
|
|
4449
|
+
import { __ as __30 } from "@wordpress/i18n";
|
|
4450
|
+
var GAPS_LABEL = __30("Gaps", "elementor");
|
|
4410
4451
|
var GapControlField = () => {
|
|
4411
|
-
return /* @__PURE__ */
|
|
4452
|
+
return /* @__PURE__ */ React53.createElement(StylesField, { bind: "gap", propDisplayName: GAPS_LABEL }, /* @__PURE__ */ React53.createElement(GapControl, { label: GAPS_LABEL }));
|
|
4412
4453
|
};
|
|
4413
4454
|
|
|
4414
4455
|
// src/components/style-sections/layout-section/grid-auto-flow-field.tsx
|
|
4415
|
-
import * as
|
|
4456
|
+
import * as React54 from "react";
|
|
4416
4457
|
import { ControlToggleButtonGroup as ControlToggleButtonGroup3, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
|
|
4417
4458
|
import { ArrowDownSmallIcon as ArrowDownSmallIcon3, ArrowRightIcon as ArrowRightIcon2, LayoutDashboardIcon } from "@elementor/icons";
|
|
4418
4459
|
import { Grid as Grid3, ToggleButton, Tooltip as Tooltip3, withDirection as withDirection7 } from "@elementor/ui";
|
|
4419
|
-
import { __ as
|
|
4420
|
-
var AUTO_FLOW_LABEL =
|
|
4421
|
-
var DENSE_LABEL =
|
|
4460
|
+
import { __ as __31 } from "@wordpress/i18n";
|
|
4461
|
+
var AUTO_FLOW_LABEL = __31("Auto flow", "elementor");
|
|
4462
|
+
var DENSE_LABEL = __31("Dense", "elementor");
|
|
4422
4463
|
var StartIcon4 = withDirection7(ArrowRightIcon2);
|
|
4423
4464
|
var directionOptions = [
|
|
4424
4465
|
{
|
|
4425
4466
|
value: "row",
|
|
4426
|
-
label:
|
|
4427
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4467
|
+
label: __31("Row", "elementor"),
|
|
4468
|
+
renderContent: ({ size }) => /* @__PURE__ */ React54.createElement(StartIcon4, { fontSize: size }),
|
|
4428
4469
|
showTooltip: true
|
|
4429
4470
|
},
|
|
4430
4471
|
{
|
|
4431
4472
|
value: "column",
|
|
4432
|
-
label:
|
|
4433
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4473
|
+
label: __31("Column", "elementor"),
|
|
4474
|
+
renderContent: ({ size }) => /* @__PURE__ */ React54.createElement(ArrowDownSmallIcon3, { fontSize: size }),
|
|
4434
4475
|
showTooltip: true
|
|
4435
4476
|
}
|
|
4436
4477
|
];
|
|
@@ -4463,7 +4504,7 @@ var GridAutoFlowFieldContent = () => {
|
|
|
4463
4504
|
const nextDirection = direction ?? "row";
|
|
4464
4505
|
setValue({ $$type: "string", value: composeAutoFlow(nextDirection, !dense) });
|
|
4465
4506
|
};
|
|
4466
|
-
return /* @__PURE__ */
|
|
4507
|
+
return /* @__PURE__ */ React54.createElement(StylesFieldLayout, { label: AUTO_FLOW_LABEL }, /* @__PURE__ */ React54.createElement(Grid3, { container: true, gap: 1, flexWrap: "nowrap", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React54.createElement(Grid3, { item: true, sx: { width: 64, maxWidth: "100%" } }, /* @__PURE__ */ React54.createElement(
|
|
4467
4508
|
ControlToggleButtonGroup3,
|
|
4468
4509
|
{
|
|
4469
4510
|
items: directionOptions,
|
|
@@ -4474,7 +4515,7 @@ var GridAutoFlowFieldContent = () => {
|
|
|
4474
4515
|
fullWidth: true,
|
|
4475
4516
|
disabled: !canEdit
|
|
4476
4517
|
}
|
|
4477
|
-
)), /* @__PURE__ */
|
|
4518
|
+
)), /* @__PURE__ */ React54.createElement(Grid3, { item: true }, /* @__PURE__ */ React54.createElement(Tooltip3, { title: DENSE_LABEL, placement: "top" }, /* @__PURE__ */ React54.createElement(
|
|
4478
4519
|
ToggleButton,
|
|
4479
4520
|
{
|
|
4480
4521
|
value: "dense",
|
|
@@ -4484,29 +4525,29 @@ var GridAutoFlowFieldContent = () => {
|
|
|
4484
4525
|
"aria-label": DENSE_LABEL,
|
|
4485
4526
|
disabled: !canEdit
|
|
4486
4527
|
},
|
|
4487
|
-
/* @__PURE__ */
|
|
4528
|
+
/* @__PURE__ */ React54.createElement(LayoutDashboardIcon, { fontSize: "tiny" })
|
|
4488
4529
|
)))));
|
|
4489
4530
|
};
|
|
4490
|
-
var GridAutoFlowField = () => /* @__PURE__ */
|
|
4531
|
+
var GridAutoFlowField = () => /* @__PURE__ */ React54.createElement(StylesField, { bind: "grid-auto-flow", propDisplayName: AUTO_FLOW_LABEL }, /* @__PURE__ */ React54.createElement(UiProviders, null, /* @__PURE__ */ React54.createElement(GridAutoFlowFieldContent, null)));
|
|
4491
4532
|
|
|
4492
4533
|
// src/components/style-sections/layout-section/grid-auto-track-fields.tsx
|
|
4493
|
-
import * as
|
|
4534
|
+
import * as React55 from "react";
|
|
4494
4535
|
import { useRef as useRef8 } from "react";
|
|
4495
4536
|
import { SizeControl as SizeControl4 } from "@elementor/editor-controls";
|
|
4496
4537
|
import { Stack as Stack9 } from "@elementor/ui";
|
|
4497
|
-
import { __ as
|
|
4538
|
+
import { __ as __32 } from "@wordpress/i18n";
|
|
4498
4539
|
var DEFAULT_UNIT = "fr";
|
|
4499
|
-
var AUTO_ROWS_LABEL =
|
|
4500
|
-
var AUTO_COLUMNS_LABEL =
|
|
4501
|
-
var AUTO_ROWS_TOOLTIP =
|
|
4540
|
+
var AUTO_ROWS_LABEL = __32("Auto rows", "elementor");
|
|
4541
|
+
var AUTO_COLUMNS_LABEL = __32("Auto columns", "elementor");
|
|
4542
|
+
var AUTO_ROWS_TOOLTIP = __32(
|
|
4502
4543
|
"Set the size for new rows created automatically when content exceeds the defined grid.",
|
|
4503
4544
|
"elementor"
|
|
4504
4545
|
);
|
|
4505
|
-
var AUTO_COLUMNS_TOOLTIP =
|
|
4546
|
+
var AUTO_COLUMNS_TOOLTIP = __32(
|
|
4506
4547
|
"Set the size for new columns created automatically when content exceeds the defined grid.",
|
|
4507
4548
|
"elementor"
|
|
4508
4549
|
);
|
|
4509
|
-
var GridAutoTrackField = ({ bind, infoTooltip, label, rowRef }) => /* @__PURE__ */
|
|
4550
|
+
var GridAutoTrackField = ({ bind, infoTooltip, label, rowRef }) => /* @__PURE__ */ React55.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React55.createElement(StylesFieldLayout, { infoTooltip, label, ref: rowRef }, /* @__PURE__ */ React55.createElement(
|
|
4510
4551
|
SizeControl4,
|
|
4511
4552
|
{
|
|
4512
4553
|
enablePropTypeUnits: true,
|
|
@@ -4516,7 +4557,7 @@ var GridAutoTrackField = ({ bind, infoTooltip, label, rowRef }) => /* @__PURE__
|
|
|
4516
4557
|
)));
|
|
4517
4558
|
var GridAutoTrackFields = () => {
|
|
4518
4559
|
const rowRef = useRef8(null);
|
|
4519
|
-
return /* @__PURE__ */
|
|
4560
|
+
return /* @__PURE__ */ React55.createElement(Stack9, { gap: 2, pt: 2, ref: rowRef }, /* @__PURE__ */ React55.createElement(
|
|
4520
4561
|
GridAutoTrackField,
|
|
4521
4562
|
{
|
|
4522
4563
|
bind: "grid-auto-rows",
|
|
@@ -4524,7 +4565,7 @@ var GridAutoTrackFields = () => {
|
|
|
4524
4565
|
label: AUTO_ROWS_LABEL,
|
|
4525
4566
|
rowRef
|
|
4526
4567
|
}
|
|
4527
|
-
), /* @__PURE__ */
|
|
4568
|
+
), /* @__PURE__ */ React55.createElement(
|
|
4528
4569
|
GridAutoTrackField,
|
|
4529
4570
|
{
|
|
4530
4571
|
bind: "grid-auto-columns",
|
|
@@ -4536,7 +4577,7 @@ var GridAutoTrackFields = () => {
|
|
|
4536
4577
|
};
|
|
4537
4578
|
|
|
4538
4579
|
// src/components/style-sections/layout-section/grid-justify-items-field.tsx
|
|
4539
|
-
import * as
|
|
4580
|
+
import * as React56 from "react";
|
|
4540
4581
|
import { ToggleControl as ToggleControl8 } from "@elementor/editor-controls";
|
|
4541
4582
|
import {
|
|
4542
4583
|
LayoutAlignCenterIcon as CenterIcon4,
|
|
@@ -4545,49 +4586,49 @@ import {
|
|
|
4545
4586
|
LayoutDistributeVerticalIcon as StretchIcon
|
|
4546
4587
|
} from "@elementor/icons";
|
|
4547
4588
|
import { withDirection as withDirection8 } from "@elementor/ui";
|
|
4548
|
-
import { __ as
|
|
4549
|
-
var JUSTIFY_ITEMS_LABEL =
|
|
4589
|
+
import { __ as __33 } from "@wordpress/i18n";
|
|
4590
|
+
var JUSTIFY_ITEMS_LABEL = __33("Justify items", "elementor");
|
|
4550
4591
|
var StartIcon5 = withDirection8(LayoutAlignLeftIcon3);
|
|
4551
4592
|
var EndIcon4 = withDirection8(LayoutAlignRightIcon3);
|
|
4552
4593
|
var options4 = [
|
|
4553
4594
|
{
|
|
4554
4595
|
value: "start",
|
|
4555
|
-
label:
|
|
4556
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4596
|
+
label: __33("Start", "elementor"),
|
|
4597
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(StartIcon5, { fontSize: size }),
|
|
4557
4598
|
showTooltip: true
|
|
4558
4599
|
},
|
|
4559
4600
|
{
|
|
4560
4601
|
value: "center",
|
|
4561
|
-
label:
|
|
4562
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4602
|
+
label: __33("Center", "elementor"),
|
|
4603
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(CenterIcon4, { fontSize: size }),
|
|
4563
4604
|
showTooltip: true
|
|
4564
4605
|
},
|
|
4565
4606
|
{
|
|
4566
4607
|
value: "end",
|
|
4567
|
-
label:
|
|
4568
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4608
|
+
label: __33("End", "elementor"),
|
|
4609
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(EndIcon4, { fontSize: size }),
|
|
4569
4610
|
showTooltip: true
|
|
4570
4611
|
},
|
|
4571
4612
|
{
|
|
4572
4613
|
value: "stretch",
|
|
4573
|
-
label:
|
|
4574
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4614
|
+
label: __33("Stretch", "elementor"),
|
|
4615
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(StretchIcon, { fontSize: size }),
|
|
4575
4616
|
showTooltip: true
|
|
4576
4617
|
}
|
|
4577
4618
|
];
|
|
4578
|
-
var GridJustifyItemsField = () => /* @__PURE__ */
|
|
4619
|
+
var GridJustifyItemsField = () => /* @__PURE__ */ React56.createElement(StylesField, { bind: "justify-items", propDisplayName: JUSTIFY_ITEMS_LABEL }, /* @__PURE__ */ React56.createElement(UiProviders, null, /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: JUSTIFY_ITEMS_LABEL }, /* @__PURE__ */ React56.createElement(ToggleControl8, { options: options4 }))));
|
|
4579
4620
|
|
|
4580
4621
|
// src/components/style-sections/layout-section/grid-outline-field.tsx
|
|
4581
|
-
import * as
|
|
4622
|
+
import * as React57 from "react";
|
|
4582
4623
|
import { updateElementEditorSettings, useElementEditorSettings } from "@elementor/editor-elements";
|
|
4583
|
-
import { Box as
|
|
4584
|
-
import { __ as
|
|
4585
|
-
var GRID_OUTLINE_LABEL =
|
|
4624
|
+
import { Box as Box6, Switch } from "@elementor/ui";
|
|
4625
|
+
import { __ as __34 } from "@wordpress/i18n";
|
|
4626
|
+
var GRID_OUTLINE_LABEL = __34("Show Grid Outline", "elementor");
|
|
4586
4627
|
var GridOutlineField = () => {
|
|
4587
4628
|
const { element } = useElement();
|
|
4588
4629
|
const settings = useElementEditorSettings(element.id);
|
|
4589
4630
|
const value = settings?.grid_outline ?? true;
|
|
4590
|
-
return /* @__PURE__ */
|
|
4631
|
+
return /* @__PURE__ */ React57.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React57.createElement(Box6, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React57.createElement(
|
|
4591
4632
|
Switch,
|
|
4592
4633
|
{
|
|
4593
4634
|
"aria-label": GRID_OUTLINE_LABEL,
|
|
@@ -4604,11 +4645,11 @@ var GridOutlineField = () => {
|
|
|
4604
4645
|
};
|
|
4605
4646
|
|
|
4606
4647
|
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4607
|
-
import * as
|
|
4648
|
+
import * as React58 from "react";
|
|
4608
4649
|
import { useRef as useRef9 } from "react";
|
|
4609
4650
|
import { ControlActions, createControl, SizeComponent, useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
|
|
4610
4651
|
import { Grid as Grid4 } from "@elementor/ui";
|
|
4611
|
-
import { __ as
|
|
4652
|
+
import { __ as __35 } from "@wordpress/i18n";
|
|
4612
4653
|
|
|
4613
4654
|
// src/components/style-sections/layout-section/utils/grid-track-value.ts
|
|
4614
4655
|
import {
|
|
@@ -4705,8 +4746,8 @@ var unitOf = (v, fallback = FR) => {
|
|
|
4705
4746
|
};
|
|
4706
4747
|
|
|
4707
4748
|
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4708
|
-
var SizeFieldWrapper = ({ children }) => /* @__PURE__ */
|
|
4709
|
-
var GridTrackSizeInput = createControl((props) => /* @__PURE__ */
|
|
4749
|
+
var SizeFieldWrapper = ({ children }) => /* @__PURE__ */ React58.createElement(ControlActions, null, children);
|
|
4750
|
+
var GridTrackSizeInput = createControl((props) => /* @__PURE__ */ React58.createElement(
|
|
4710
4751
|
SizeComponent,
|
|
4711
4752
|
{
|
|
4712
4753
|
units: UNITS,
|
|
@@ -4738,7 +4779,7 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4738
4779
|
}
|
|
4739
4780
|
setValue(toPropValue(next));
|
|
4740
4781
|
};
|
|
4741
|
-
return /* @__PURE__ */
|
|
4782
|
+
return /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React58.createElement("div", { ref: anchorRef }, /* @__PURE__ */ React58.createElement(
|
|
4742
4783
|
GridTrackSizeInput,
|
|
4743
4784
|
{
|
|
4744
4785
|
value: displayValue,
|
|
@@ -4748,22 +4789,22 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4748
4789
|
}
|
|
4749
4790
|
)));
|
|
4750
4791
|
};
|
|
4751
|
-
var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */
|
|
4752
|
-
var GridSizeFields = () => /* @__PURE__ */
|
|
4792
|
+
var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React58.createElement(UiProviders, null, /* @__PURE__ */ React58.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React58.createElement(GridTrackFieldContent, { cssProp, label })));
|
|
4793
|
+
var GridSizeFields = () => /* @__PURE__ */ React58.createElement(Grid4, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(GridTrackField, { cssProp: "grid-template-columns", label: __35("Columns", "elementor") })), /* @__PURE__ */ React58.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(GridTrackField, { cssProp: "grid-template-rows", label: __35("Rows", "elementor") })));
|
|
4753
4794
|
|
|
4754
4795
|
// src/components/style-sections/layout-section/grid-span-field.tsx
|
|
4755
|
-
import * as
|
|
4796
|
+
import * as React59 from "react";
|
|
4756
4797
|
import { GridSpanControl } from "@elementor/editor-controls";
|
|
4757
4798
|
import { Grid as Grid5 } from "@elementor/ui";
|
|
4758
|
-
import { __ as
|
|
4799
|
+
import { __ as __36 } from "@wordpress/i18n";
|
|
4759
4800
|
var GridSpanFieldContent = ({ label }) => {
|
|
4760
|
-
return /* @__PURE__ */
|
|
4801
|
+
return /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React59.createElement(GridSpanControl, null));
|
|
4761
4802
|
};
|
|
4762
|
-
var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */
|
|
4763
|
-
var GridSpanFields = () => /* @__PURE__ */
|
|
4803
|
+
var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */ React59.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React59.createElement(UiProviders, null, /* @__PURE__ */ React59.createElement(GridSpanFieldContent, { cssProp, label })));
|
|
4804
|
+
var GridSpanFields = () => /* @__PURE__ */ React59.createElement(Grid5, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(GridSpanField, { cssProp: "grid-column", label: __36("Grid column", "elementor") })), /* @__PURE__ */ React59.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(GridSpanField, { cssProp: "grid-row", label: __36("Grid row", "elementor") })));
|
|
4764
4805
|
|
|
4765
4806
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
4766
|
-
import * as
|
|
4807
|
+
import * as React60 from "react";
|
|
4767
4808
|
import { ToggleControl as ToggleControl9 } from "@elementor/editor-controls";
|
|
4768
4809
|
import {
|
|
4769
4810
|
JustifyBottomIcon as JustifyBottomIcon3,
|
|
@@ -4774,8 +4815,8 @@ import {
|
|
|
4774
4815
|
JustifyTopIcon as JustifyTopIcon3
|
|
4775
4816
|
} from "@elementor/icons";
|
|
4776
4817
|
import { withDirection as withDirection9 } from "@elementor/ui";
|
|
4777
|
-
import { __ as
|
|
4778
|
-
var JUSTIFY_CONTENT_LABEL =
|
|
4818
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
4819
|
+
var JUSTIFY_CONTENT_LABEL = __37("Justify content", "elementor");
|
|
4779
4820
|
var StartIcon6 = withDirection9(JustifyTopIcon3);
|
|
4780
4821
|
var EndIcon5 = withDirection9(JustifyBottomIcon3);
|
|
4781
4822
|
var iconProps4 = {
|
|
@@ -4785,76 +4826,76 @@ var iconProps4 = {
|
|
|
4785
4826
|
var options5 = [
|
|
4786
4827
|
{
|
|
4787
4828
|
value: "flex-start",
|
|
4788
|
-
label:
|
|
4789
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4829
|
+
label: __37("Start", "elementor"),
|
|
4830
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(RotatedIcon, { icon: StartIcon6, size, ...iconProps4 }),
|
|
4790
4831
|
showTooltip: true
|
|
4791
4832
|
},
|
|
4792
4833
|
{
|
|
4793
4834
|
value: "center",
|
|
4794
|
-
label:
|
|
4795
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4835
|
+
label: __37("Center", "elementor"),
|
|
4836
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(RotatedIcon, { icon: CenterIcon5, size, ...iconProps4 }),
|
|
4796
4837
|
showTooltip: true
|
|
4797
4838
|
},
|
|
4798
4839
|
{
|
|
4799
4840
|
value: "flex-end",
|
|
4800
|
-
label:
|
|
4801
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4841
|
+
label: __37("End", "elementor"),
|
|
4842
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(RotatedIcon, { icon: EndIcon5, size, ...iconProps4 }),
|
|
4802
4843
|
showTooltip: true
|
|
4803
4844
|
},
|
|
4804
4845
|
{
|
|
4805
4846
|
value: "space-between",
|
|
4806
|
-
label:
|
|
4807
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4847
|
+
label: __37("Space between", "elementor"),
|
|
4848
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(RotatedIcon, { icon: BetweenIcon2, size, ...iconProps4 }),
|
|
4808
4849
|
showTooltip: true
|
|
4809
4850
|
},
|
|
4810
4851
|
{
|
|
4811
4852
|
value: "space-around",
|
|
4812
|
-
label:
|
|
4813
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4853
|
+
label: __37("Space around", "elementor"),
|
|
4854
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(RotatedIcon, { icon: AroundIcon2, size, ...iconProps4 }),
|
|
4814
4855
|
showTooltip: true
|
|
4815
4856
|
},
|
|
4816
4857
|
{
|
|
4817
4858
|
value: "space-evenly",
|
|
4818
|
-
label:
|
|
4819
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4859
|
+
label: __37("Space evenly", "elementor"),
|
|
4860
|
+
renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(RotatedIcon, { icon: EvenlyIcon2, size, ...iconProps4 }),
|
|
4820
4861
|
showTooltip: true
|
|
4821
4862
|
}
|
|
4822
4863
|
];
|
|
4823
|
-
var JustifyContentField = () => /* @__PURE__ */
|
|
4864
|
+
var JustifyContentField = () => /* @__PURE__ */ React60.createElement(StylesField, { bind: "justify-content", propDisplayName: JUSTIFY_CONTENT_LABEL }, /* @__PURE__ */ React60.createElement(UiProviders, null, /* @__PURE__ */ React60.createElement(StylesFieldLayout, { label: JUSTIFY_CONTENT_LABEL, direction: "column" }, /* @__PURE__ */ React60.createElement(ToggleControl9, { options: options5, fullWidth: true }))));
|
|
4824
4865
|
|
|
4825
4866
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
4826
|
-
import * as
|
|
4867
|
+
import * as React61 from "react";
|
|
4827
4868
|
import { ToggleControl as ToggleControl10 } from "@elementor/editor-controls";
|
|
4828
4869
|
import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
|
|
4829
|
-
import { __ as
|
|
4830
|
-
var FLEX_WRAP_LABEL =
|
|
4870
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
4871
|
+
var FLEX_WRAP_LABEL = __38("Wrap", "elementor");
|
|
4831
4872
|
var options6 = [
|
|
4832
4873
|
{
|
|
4833
4874
|
value: "nowrap",
|
|
4834
|
-
label:
|
|
4835
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4875
|
+
label: __38("No wrap", "elementor"),
|
|
4876
|
+
renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(ArrowRightIcon3, { fontSize: size }),
|
|
4836
4877
|
showTooltip: true
|
|
4837
4878
|
},
|
|
4838
4879
|
{
|
|
4839
4880
|
value: "wrap",
|
|
4840
|
-
label:
|
|
4841
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4881
|
+
label: __38("Wrap", "elementor"),
|
|
4882
|
+
renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(ArrowBackIcon, { fontSize: size }),
|
|
4842
4883
|
showTooltip: true
|
|
4843
4884
|
},
|
|
4844
4885
|
{
|
|
4845
4886
|
value: "wrap-reverse",
|
|
4846
|
-
label:
|
|
4847
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4887
|
+
label: __38("Reversed wrap", "elementor"),
|
|
4888
|
+
renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(ArrowForwardIcon, { fontSize: size }),
|
|
4848
4889
|
showTooltip: true
|
|
4849
4890
|
}
|
|
4850
4891
|
];
|
|
4851
4892
|
var WrapField = () => {
|
|
4852
|
-
return /* @__PURE__ */
|
|
4893
|
+
return /* @__PURE__ */ React61.createElement(StylesField, { bind: "flex-wrap", propDisplayName: FLEX_WRAP_LABEL }, /* @__PURE__ */ React61.createElement(UiProviders, null, /* @__PURE__ */ React61.createElement(StylesFieldLayout, { label: FLEX_WRAP_LABEL }, /* @__PURE__ */ React61.createElement(ToggleControl10, { options: options6 }))));
|
|
4853
4894
|
};
|
|
4854
4895
|
|
|
4855
4896
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
4856
|
-
var DISPLAY_LABEL2 =
|
|
4857
|
-
var FLEX_WRAP_LABEL2 =
|
|
4897
|
+
var DISPLAY_LABEL2 = __39("Display", "elementor");
|
|
4898
|
+
var FLEX_WRAP_LABEL2 = __39("Flex wrap", "elementor");
|
|
4858
4899
|
var DEFAULT_PARENT_FLOW_DIRECTION = "row";
|
|
4859
4900
|
var { Slot: GridFieldsSlot, inject: injectIntoGridFields } = createLocation3();
|
|
4860
4901
|
var LayoutSection = () => {
|
|
@@ -4876,17 +4917,17 @@ var LayoutSection = () => {
|
|
|
4876
4917
|
}
|
|
4877
4918
|
return DEFAULT_PARENT_FLOW_DIRECTION;
|
|
4878
4919
|
};
|
|
4879
|
-
return /* @__PURE__ */
|
|
4920
|
+
return /* @__PURE__ */ React62.createElement(SectionContent, null, /* @__PURE__ */ React62.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React62.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React62.createElement(FlexChildFields, { parentStyleDirection: getParentStyleDirection() }), isDisplayGrid && /* @__PURE__ */ React62.createElement(GridFields, null), "grid" === parentStyle?.display && /* @__PURE__ */ React62.createElement(GridChildFields, { parentStyleDirection: getParentStyleDirection() }));
|
|
4880
4921
|
};
|
|
4881
4922
|
var FlexFields = () => {
|
|
4882
4923
|
const { value: flexWrap } = useStylesField("flex-wrap", {
|
|
4883
4924
|
history: { propDisplayName: FLEX_WRAP_LABEL2 }
|
|
4884
4925
|
});
|
|
4885
|
-
return /* @__PURE__ */
|
|
4926
|
+
return /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(FlexDirectionField, null), /* @__PURE__ */ React62.createElement(JustifyContentField, null), /* @__PURE__ */ React62.createElement(AlignItemsField, null), /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(GapControlField, null), /* @__PURE__ */ React62.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React62.createElement(AlignContentField, null));
|
|
4886
4927
|
};
|
|
4887
|
-
var GridFields = () => /* @__PURE__ */
|
|
4888
|
-
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
4889
|
-
var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
4928
|
+
var GridFields = () => /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(GridOutlineField, null), /* @__PURE__ */ React62.createElement(GridSizeFields, null), /* @__PURE__ */ React62.createElement(GridAutoFlowField, null), /* @__PURE__ */ React62.createElement(GridFieldsSlot, null), /* @__PURE__ */ React62.createElement(StyleTabCollapsibleContent, { fields: ["grid-auto-rows", "grid-auto-columns"] }, /* @__PURE__ */ React62.createElement(GridAutoTrackFields, null)), /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(GapControlField, null), /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(GridJustifyItemsField, null), /* @__PURE__ */ React62.createElement(AlignItemsField, null));
|
|
4929
|
+
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(ControlFormLabel2, null, __39("Flex child", "elementor")), /* @__PURE__ */ React62.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React62.createElement(FlexOrderField, null), /* @__PURE__ */ React62.createElement(FlexSizeField, null));
|
|
4930
|
+
var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(ControlFormLabel2, null, __39("Grid child", "elementor")), /* @__PURE__ */ React62.createElement(GridSpanFields, null), /* @__PURE__ */ React62.createElement(AlignSelfGridChild, { parentStyleDirection }), /* @__PURE__ */ React62.createElement(FlexOrderField, null));
|
|
4890
4931
|
var shouldDisplayFlexFields = (display, local) => {
|
|
4891
4932
|
const value = display?.value ?? local?.value;
|
|
4892
4933
|
if (!value) {
|
|
@@ -4896,40 +4937,40 @@ var shouldDisplayFlexFields = (display, local) => {
|
|
|
4896
4937
|
};
|
|
4897
4938
|
|
|
4898
4939
|
// src/components/style-sections/position-section/position-section.tsx
|
|
4899
|
-
import * as
|
|
4940
|
+
import * as React67 from "react";
|
|
4900
4941
|
import { useEffect as useEffect7, useRef as useRef12 } from "react";
|
|
4901
4942
|
import { useSessionStorage as useSessionStorage4 } from "@elementor/session";
|
|
4902
4943
|
import { styled as styled6 } from "@elementor/ui";
|
|
4903
|
-
import { __ as
|
|
4944
|
+
import { __ as __44 } from "@wordpress/i18n";
|
|
4904
4945
|
|
|
4905
4946
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
4906
|
-
import * as
|
|
4947
|
+
import * as React63 from "react";
|
|
4907
4948
|
import { useRef as useRef10 } from "react";
|
|
4908
4949
|
import { SizeControl as SizeControl5 } from "@elementor/editor-controls";
|
|
4909
4950
|
import { SideBottomIcon as SideBottomIcon2, SideLeftIcon as SideLeftIcon2, SideRightIcon as SideRightIcon2, SideTopIcon as SideTopIcon2 } from "@elementor/icons";
|
|
4910
4951
|
import { Grid as Grid6, Stack as Stack10, withDirection as withDirection10 } from "@elementor/ui";
|
|
4911
|
-
import { __ as
|
|
4952
|
+
import { __ as __40 } from "@wordpress/i18n";
|
|
4912
4953
|
var InlineStartIcon2 = withDirection10(SideLeftIcon2);
|
|
4913
4954
|
var InlineEndIcon2 = withDirection10(SideRightIcon2);
|
|
4914
4955
|
var sideIcons = {
|
|
4915
|
-
"inset-block-start": /* @__PURE__ */
|
|
4916
|
-
"inset-block-end": /* @__PURE__ */
|
|
4917
|
-
"inset-inline-start": /* @__PURE__ */
|
|
4918
|
-
"inset-inline-end": /* @__PURE__ */
|
|
4956
|
+
"inset-block-start": /* @__PURE__ */ React63.createElement(SideTopIcon2, { fontSize: "tiny" }),
|
|
4957
|
+
"inset-block-end": /* @__PURE__ */ React63.createElement(SideBottomIcon2, { fontSize: "tiny" }),
|
|
4958
|
+
"inset-inline-start": /* @__PURE__ */ React63.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
|
|
4959
|
+
"inset-inline-end": /* @__PURE__ */ React63.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
|
|
4919
4960
|
};
|
|
4920
|
-
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ?
|
|
4921
|
-
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ?
|
|
4961
|
+
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? __40("Right", "elementor") : __40("Left", "elementor");
|
|
4962
|
+
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? __40("Left", "elementor") : __40("Right", "elementor");
|
|
4922
4963
|
var DimensionsField = () => {
|
|
4923
4964
|
const { isSiteRtl } = useDirection();
|
|
4924
4965
|
const rowRefs = [useRef10(null), useRef10(null)];
|
|
4925
|
-
return /* @__PURE__ */
|
|
4966
|
+
return /* @__PURE__ */ React63.createElement(UiProviders, null, /* @__PURE__ */ React63.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React63.createElement(DimensionField, { side: "inset-block-start", label: __40("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React63.createElement(
|
|
4926
4967
|
DimensionField,
|
|
4927
4968
|
{
|
|
4928
4969
|
side: "inset-inline-end",
|
|
4929
4970
|
label: getInlineEndLabel(isSiteRtl),
|
|
4930
4971
|
rowRef: rowRefs[0]
|
|
4931
4972
|
}
|
|
4932
|
-
)), /* @__PURE__ */
|
|
4973
|
+
)), /* @__PURE__ */ React63.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React63.createElement(DimensionField, { side: "inset-block-end", label: __40("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React63.createElement(
|
|
4933
4974
|
DimensionField,
|
|
4934
4975
|
{
|
|
4935
4976
|
side: "inset-inline-start",
|
|
@@ -4942,7 +4983,7 @@ var DimensionField = ({
|
|
|
4942
4983
|
side,
|
|
4943
4984
|
label,
|
|
4944
4985
|
rowRef
|
|
4945
|
-
}) => /* @__PURE__ */
|
|
4986
|
+
}) => /* @__PURE__ */ React63.createElement(StylesField, { bind: side, propDisplayName: label }, /* @__PURE__ */ React63.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React63.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React63.createElement(ControlLabel, null, label)), /* @__PURE__ */ React63.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React63.createElement(
|
|
4946
4987
|
SizeControl5,
|
|
4947
4988
|
{
|
|
4948
4989
|
startIcon: sideIcons[side],
|
|
@@ -4953,62 +4994,62 @@ var DimensionField = ({
|
|
|
4953
4994
|
))));
|
|
4954
4995
|
|
|
4955
4996
|
// src/components/style-sections/position-section/offset-field.tsx
|
|
4956
|
-
import * as
|
|
4997
|
+
import * as React64 from "react";
|
|
4957
4998
|
import { useRef as useRef11 } from "react";
|
|
4958
4999
|
import { SizeControl as SizeControl6 } from "@elementor/editor-controls";
|
|
4959
|
-
import { __ as
|
|
4960
|
-
var OFFSET_LABEL =
|
|
5000
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
5001
|
+
var OFFSET_LABEL = __41("Anchor offset", "elementor");
|
|
4961
5002
|
var UNITS2 = ["px", "em", "rem", "vw", "vh"];
|
|
4962
5003
|
var OffsetField = () => {
|
|
4963
5004
|
const rowRef = useRef11(null);
|
|
4964
|
-
return /* @__PURE__ */
|
|
5005
|
+
return /* @__PURE__ */ React64.createElement(StylesField, { bind: "scroll-margin-top", propDisplayName: OFFSET_LABEL }, /* @__PURE__ */ React64.createElement(StylesFieldLayout, { label: OFFSET_LABEL, ref: rowRef }, /* @__PURE__ */ React64.createElement(SizeControl6, { units: UNITS2, anchorRef: rowRef })));
|
|
4965
5006
|
};
|
|
4966
5007
|
|
|
4967
5008
|
// src/components/style-sections/position-section/position-field.tsx
|
|
4968
|
-
import * as
|
|
5009
|
+
import * as React65 from "react";
|
|
4969
5010
|
import { SelectControl as SelectControl3 } from "@elementor/editor-controls";
|
|
4970
|
-
import { __ as
|
|
4971
|
-
var POSITION_LABEL =
|
|
5011
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
5012
|
+
var POSITION_LABEL = __42("Position", "elementor");
|
|
4972
5013
|
var positionOptions = [
|
|
4973
|
-
{ label:
|
|
4974
|
-
{ label:
|
|
4975
|
-
{ label:
|
|
4976
|
-
{ label:
|
|
4977
|
-
{ label:
|
|
5014
|
+
{ label: __42("Static", "elementor"), value: "static" },
|
|
5015
|
+
{ label: __42("Relative", "elementor"), value: "relative" },
|
|
5016
|
+
{ label: __42("Absolute", "elementor"), value: "absolute" },
|
|
5017
|
+
{ label: __42("Fixed", "elementor"), value: "fixed" },
|
|
5018
|
+
{ label: __42("Sticky", "elementor"), value: "sticky" }
|
|
4978
5019
|
];
|
|
4979
5020
|
var PositionField = () => {
|
|
4980
|
-
return /* @__PURE__ */
|
|
5021
|
+
return /* @__PURE__ */ React65.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React65.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React65.createElement(SelectControl3, { options: positionOptions })));
|
|
4981
5022
|
};
|
|
4982
5023
|
|
|
4983
5024
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
4984
|
-
import * as
|
|
5025
|
+
import * as React66 from "react";
|
|
4985
5026
|
import { NumberControl as NumberControl4 } from "@elementor/editor-controls";
|
|
4986
|
-
import { InfoCircleFilledIcon } from "@elementor/icons";
|
|
4987
|
-
import { Alert as
|
|
4988
|
-
import { __ as
|
|
4989
|
-
var Z_INDEX_LABEL =
|
|
5027
|
+
import { InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
|
|
5028
|
+
import { Alert as Alert4, AlertTitle as AlertTitle3, Box as Box7, Infotip as Infotip2 } from "@elementor/ui";
|
|
5029
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
5030
|
+
var Z_INDEX_LABEL = __43("Z-index", "elementor");
|
|
4990
5031
|
var ZIndexField = ({ disabled }) => {
|
|
4991
|
-
const StyleField = /* @__PURE__ */
|
|
4992
|
-
const content = /* @__PURE__ */
|
|
5032
|
+
const StyleField = /* @__PURE__ */ React66.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React66.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React66.createElement(NumberControl4, { disabled })));
|
|
5033
|
+
const content = /* @__PURE__ */ React66.createElement(Alert4, { color: "secondary", icon: /* @__PURE__ */ React66.createElement(InfoCircleFilledIcon2, null), size: "small" }, /* @__PURE__ */ React66.createElement(AlertTitle3, null, __43("Z-index", "elementor")), /* @__PURE__ */ React66.createElement(Box7, { component: "span" }, __43(
|
|
4993
5034
|
"z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.",
|
|
4994
5035
|
"elementor"
|
|
4995
5036
|
)));
|
|
4996
|
-
return disabled ? /* @__PURE__ */
|
|
4997
|
-
|
|
5037
|
+
return disabled ? /* @__PURE__ */ React66.createElement(
|
|
5038
|
+
Infotip2,
|
|
4998
5039
|
{
|
|
4999
5040
|
placement: "right",
|
|
5000
5041
|
content,
|
|
5001
5042
|
color: "secondary",
|
|
5002
5043
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
5003
5044
|
},
|
|
5004
|
-
/* @__PURE__ */
|
|
5005
|
-
) : /* @__PURE__ */
|
|
5045
|
+
/* @__PURE__ */ React66.createElement(Box7, null, StyleField)
|
|
5046
|
+
) : /* @__PURE__ */ React66.createElement(React66.Fragment, null, StyleField);
|
|
5006
5047
|
};
|
|
5007
5048
|
|
|
5008
5049
|
// src/components/style-sections/position-section/position-section.tsx
|
|
5009
5050
|
var POSITION_STATIC = "static";
|
|
5010
|
-
var POSITION_LABEL2 =
|
|
5011
|
-
var DIMENSIONS_LABEL =
|
|
5051
|
+
var POSITION_LABEL2 = __44("Position", "elementor");
|
|
5052
|
+
var DIMENSIONS_LABEL = __44("Dimensions", "elementor");
|
|
5012
5053
|
var DEPENDENT_PROP_NAMES = [
|
|
5013
5054
|
"inset-block-start",
|
|
5014
5055
|
"inset-block-end",
|
|
@@ -5037,7 +5078,7 @@ var PositionSection = () => {
|
|
|
5037
5078
|
}
|
|
5038
5079
|
positionPrevRef.current = position;
|
|
5039
5080
|
}, [position?.value, isPositionUnsetOrStatic]);
|
|
5040
|
-
return /* @__PURE__ */
|
|
5081
|
+
return /* @__PURE__ */ React67.createElement(StyledSectionContent, null, /* @__PURE__ */ React67.createElement(PositionField, null), /* @__PURE__ */ React67.createElement(DimensionsField, null), /* @__PURE__ */ React67.createElement(ZIndexField, { disabled: isPositionUnsetOrStatic }), /* @__PURE__ */ React67.createElement(PanelDivider, null), /* @__PURE__ */ React67.createElement(OffsetField, null));
|
|
5041
5082
|
};
|
|
5042
5083
|
var usePersistDimensions = () => {
|
|
5043
5084
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -5087,56 +5128,56 @@ var StyledSectionContent = styled6(SectionContent, {
|
|
|
5087
5128
|
}));
|
|
5088
5129
|
|
|
5089
5130
|
// src/components/style-sections/size-section/size-section.tsx
|
|
5090
|
-
import * as
|
|
5131
|
+
import * as React70 from "react";
|
|
5091
5132
|
import { useRef as useRef13 } from "react";
|
|
5092
5133
|
import { AspectRatioControl, PositionControl, SizeControl as SizeControl7 } from "@elementor/editor-controls";
|
|
5093
5134
|
import { Grid as Grid7, Stack as Stack11 } from "@elementor/ui";
|
|
5094
|
-
import { __ as
|
|
5135
|
+
import { __ as __47 } from "@wordpress/i18n";
|
|
5095
5136
|
|
|
5096
5137
|
// src/components/style-sections/size-section/object-fit-field.tsx
|
|
5097
|
-
import * as
|
|
5138
|
+
import * as React68 from "react";
|
|
5098
5139
|
import { SelectControl as SelectControl4 } from "@elementor/editor-controls";
|
|
5099
|
-
import { __ as
|
|
5100
|
-
var OBJECT_FIT_LABEL =
|
|
5140
|
+
import { __ as __45 } from "@wordpress/i18n";
|
|
5141
|
+
var OBJECT_FIT_LABEL = __45("Object fit", "elementor");
|
|
5101
5142
|
var positionOptions2 = [
|
|
5102
|
-
{ label:
|
|
5103
|
-
{ label:
|
|
5104
|
-
{ label:
|
|
5105
|
-
{ label:
|
|
5106
|
-
{ label:
|
|
5143
|
+
{ label: __45("Fill", "elementor"), value: "fill" },
|
|
5144
|
+
{ label: __45("Cover", "elementor"), value: "cover" },
|
|
5145
|
+
{ label: __45("Contain", "elementor"), value: "contain" },
|
|
5146
|
+
{ label: __45("None", "elementor"), value: "none" },
|
|
5147
|
+
{ label: __45("Scale down", "elementor"), value: "scale-down" }
|
|
5107
5148
|
];
|
|
5108
5149
|
var ObjectFitField = () => {
|
|
5109
|
-
return /* @__PURE__ */
|
|
5150
|
+
return /* @__PURE__ */ React68.createElement(StylesField, { bind: "object-fit", propDisplayName: OBJECT_FIT_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ React68.createElement(SelectControl4, { options: positionOptions2 })));
|
|
5110
5151
|
};
|
|
5111
5152
|
|
|
5112
5153
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
5113
|
-
import * as
|
|
5154
|
+
import * as React69 from "react";
|
|
5114
5155
|
import { ToggleControl as ToggleControl11 } from "@elementor/editor-controls";
|
|
5115
5156
|
import { EyeIcon, EyeOffIcon, LetterAIcon } from "@elementor/icons";
|
|
5116
|
-
import { __ as
|
|
5117
|
-
var OVERFLOW_LABEL =
|
|
5157
|
+
import { __ as __46 } from "@wordpress/i18n";
|
|
5158
|
+
var OVERFLOW_LABEL = __46("Overflow", "elementor");
|
|
5118
5159
|
var options7 = [
|
|
5119
5160
|
{
|
|
5120
5161
|
value: "visible",
|
|
5121
|
-
label:
|
|
5122
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5162
|
+
label: __46("Visible", "elementor"),
|
|
5163
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(EyeIcon, { fontSize: size }),
|
|
5123
5164
|
showTooltip: true
|
|
5124
5165
|
},
|
|
5125
5166
|
{
|
|
5126
5167
|
value: "hidden",
|
|
5127
|
-
label:
|
|
5128
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5168
|
+
label: __46("Hidden", "elementor"),
|
|
5169
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(EyeOffIcon, { fontSize: size }),
|
|
5129
5170
|
showTooltip: true
|
|
5130
5171
|
},
|
|
5131
5172
|
{
|
|
5132
5173
|
value: "auto",
|
|
5133
|
-
label:
|
|
5134
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5174
|
+
label: __46("Auto", "elementor"),
|
|
5175
|
+
renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(LetterAIcon, { fontSize: size }),
|
|
5135
5176
|
showTooltip: true
|
|
5136
5177
|
}
|
|
5137
5178
|
];
|
|
5138
5179
|
var OverflowField = () => {
|
|
5139
|
-
return /* @__PURE__ */
|
|
5180
|
+
return /* @__PURE__ */ React69.createElement(StylesField, { bind: "overflow", propDisplayName: OVERFLOW_LABEL }, /* @__PURE__ */ React69.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ React69.createElement(ToggleControl11, { options: options7 })));
|
|
5140
5181
|
};
|
|
5141
5182
|
|
|
5142
5183
|
// src/components/style-sections/size-section/size-section.tsx
|
|
@@ -5144,97 +5185,97 @@ var CssSizeProps = [
|
|
|
5144
5185
|
[
|
|
5145
5186
|
{
|
|
5146
5187
|
bind: "width",
|
|
5147
|
-
label:
|
|
5188
|
+
label: __47("Width", "elementor")
|
|
5148
5189
|
},
|
|
5149
5190
|
{
|
|
5150
5191
|
bind: "height",
|
|
5151
|
-
label:
|
|
5192
|
+
label: __47("Height", "elementor")
|
|
5152
5193
|
}
|
|
5153
5194
|
],
|
|
5154
5195
|
[
|
|
5155
5196
|
{
|
|
5156
5197
|
bind: "min-width",
|
|
5157
|
-
label:
|
|
5198
|
+
label: __47("Min width", "elementor")
|
|
5158
5199
|
},
|
|
5159
5200
|
{
|
|
5160
5201
|
bind: "min-height",
|
|
5161
|
-
label:
|
|
5202
|
+
label: __47("Min height", "elementor")
|
|
5162
5203
|
}
|
|
5163
5204
|
],
|
|
5164
5205
|
[
|
|
5165
5206
|
{
|
|
5166
5207
|
bind: "max-width",
|
|
5167
|
-
label:
|
|
5208
|
+
label: __47("Max width", "elementor")
|
|
5168
5209
|
},
|
|
5169
5210
|
{
|
|
5170
5211
|
bind: "max-height",
|
|
5171
|
-
label:
|
|
5212
|
+
label: __47("Max height", "elementor")
|
|
5172
5213
|
}
|
|
5173
5214
|
]
|
|
5174
5215
|
];
|
|
5175
|
-
var ASPECT_RATIO_LABEL =
|
|
5216
|
+
var ASPECT_RATIO_LABEL = __47("Aspect Ratio", "elementor");
|
|
5176
5217
|
var SizeSection = () => {
|
|
5177
5218
|
const gridRowRefs = [useRef13(null), useRef13(null), useRef13(null)];
|
|
5178
|
-
return /* @__PURE__ */
|
|
5219
|
+
return /* @__PURE__ */ React70.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React70.createElement(Grid7, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React70.createElement(Grid7, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React70.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React70.createElement(PanelDivider, null), /* @__PURE__ */ React70.createElement(Stack11, null, /* @__PURE__ */ React70.createElement(OverflowField, null)), /* @__PURE__ */ React70.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React70.createElement(Stack11, { gap: 2, pt: 2 }, /* @__PURE__ */ React70.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React70.createElement(AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React70.createElement(PanelDivider, null), /* @__PURE__ */ React70.createElement(ObjectFitField, null), /* @__PURE__ */ React70.createElement(StylesField, { bind: "object-position", propDisplayName: __47("Object position", "elementor") }, /* @__PURE__ */ React70.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(PositionControl, null))))));
|
|
5179
5220
|
};
|
|
5180
5221
|
var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
|
|
5181
|
-
return /* @__PURE__ */
|
|
5222
|
+
return /* @__PURE__ */ React70.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React70.createElement(Grid7, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React70.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React70.createElement(ControlLabel, null, label)), /* @__PURE__ */ React70.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React70.createElement(SizeControl7, { extendedOptions, anchorRef: rowRef }))));
|
|
5182
5223
|
};
|
|
5183
5224
|
|
|
5184
5225
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
5185
|
-
import * as
|
|
5226
|
+
import * as React71 from "react";
|
|
5186
5227
|
import { LinkedDimensionsControl } from "@elementor/editor-controls";
|
|
5187
|
-
import { __ as
|
|
5188
|
-
var MARGIN_LABEL =
|
|
5189
|
-
var PADDING_LABEL =
|
|
5228
|
+
import { __ as __48 } from "@wordpress/i18n";
|
|
5229
|
+
var MARGIN_LABEL = __48("Margin", "elementor");
|
|
5230
|
+
var PADDING_LABEL = __48("Padding", "elementor");
|
|
5190
5231
|
var SpacingSection = () => {
|
|
5191
5232
|
const { isSiteRtl } = useDirection();
|
|
5192
|
-
return /* @__PURE__ */
|
|
5233
|
+
return /* @__PURE__ */ React71.createElement(SectionContent, null, /* @__PURE__ */ React71.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React71.createElement(
|
|
5193
5234
|
LinkedDimensionsControl,
|
|
5194
5235
|
{
|
|
5195
5236
|
label: MARGIN_LABEL,
|
|
5196
5237
|
isSiteRtl,
|
|
5197
5238
|
min: -Number.MAX_SAFE_INTEGER
|
|
5198
5239
|
}
|
|
5199
|
-
)), /* @__PURE__ */
|
|
5240
|
+
)), /* @__PURE__ */ React71.createElement(PanelDivider, null), /* @__PURE__ */ React71.createElement(StylesField, { bind: "padding", propDisplayName: PADDING_LABEL }, /* @__PURE__ */ React71.createElement(LinkedDimensionsControl, { label: PADDING_LABEL, isSiteRtl })));
|
|
5200
5241
|
};
|
|
5201
5242
|
|
|
5202
5243
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
5203
|
-
import * as
|
|
5244
|
+
import * as React88 from "react";
|
|
5204
5245
|
|
|
5205
5246
|
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
5206
|
-
import * as
|
|
5247
|
+
import * as React72 from "react";
|
|
5207
5248
|
import { NumberControl as NumberControl5 } from "@elementor/editor-controls";
|
|
5208
|
-
import { __ as
|
|
5209
|
-
var COLUMN_COUNT_LABEL =
|
|
5249
|
+
import { __ as __49 } from "@wordpress/i18n";
|
|
5250
|
+
var COLUMN_COUNT_LABEL = __49("Columns", "elementor");
|
|
5210
5251
|
var ColumnCountField = () => {
|
|
5211
|
-
return /* @__PURE__ */
|
|
5252
|
+
return /* @__PURE__ */ React72.createElement(StylesField, { bind: "column-count", propDisplayName: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React72.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React72.createElement(NumberControl5, { shouldForceInt: true, min: 0, step: 1 })));
|
|
5212
5253
|
};
|
|
5213
5254
|
|
|
5214
5255
|
// src/components/style-sections/typography-section/column-gap-field.tsx
|
|
5215
|
-
import * as
|
|
5256
|
+
import * as React73 from "react";
|
|
5216
5257
|
import { useRef as useRef14 } from "react";
|
|
5217
5258
|
import { SizeControl as SizeControl8 } from "@elementor/editor-controls";
|
|
5218
|
-
import { __ as
|
|
5219
|
-
var COLUMN_GAP_LABEL =
|
|
5259
|
+
import { __ as __50 } from "@wordpress/i18n";
|
|
5260
|
+
var COLUMN_GAP_LABEL = __50("Column gap", "elementor");
|
|
5220
5261
|
var ColumnGapField = () => {
|
|
5221
5262
|
const rowRef = useRef14(null);
|
|
5222
|
-
return /* @__PURE__ */
|
|
5263
|
+
return /* @__PURE__ */ React73.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React73.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React73.createElement(SizeControl8, { anchorRef: rowRef })));
|
|
5223
5264
|
};
|
|
5224
5265
|
|
|
5225
5266
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
5226
|
-
import * as
|
|
5267
|
+
import * as React74 from "react";
|
|
5227
5268
|
import { FontFamilyControl, useFontFamilies } from "@elementor/editor-controls";
|
|
5228
5269
|
import { useSectionWidth } from "@elementor/editor-ui";
|
|
5229
|
-
import { __ as
|
|
5230
|
-
var FONT_FAMILY_LABEL =
|
|
5270
|
+
import { __ as __51 } from "@wordpress/i18n";
|
|
5271
|
+
var FONT_FAMILY_LABEL = __51("Font family", "elementor");
|
|
5231
5272
|
var FontFamilyField = () => {
|
|
5232
5273
|
const fontFamilies = useFontFamilies();
|
|
5233
5274
|
const sectionWidth = useSectionWidth();
|
|
5234
5275
|
if (fontFamilies.length === 0) {
|
|
5235
5276
|
return null;
|
|
5236
5277
|
}
|
|
5237
|
-
return /* @__PURE__ */
|
|
5278
|
+
return /* @__PURE__ */ React74.createElement(StylesField, { bind: "font-family", propDisplayName: FONT_FAMILY_LABEL }, /* @__PURE__ */ React74.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ React74.createElement(
|
|
5238
5279
|
FontFamilyControl,
|
|
5239
5280
|
{
|
|
5240
5281
|
fontFamilies,
|
|
@@ -5245,196 +5286,196 @@ var FontFamilyField = () => {
|
|
|
5245
5286
|
};
|
|
5246
5287
|
|
|
5247
5288
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
5248
|
-
import * as
|
|
5289
|
+
import * as React75 from "react";
|
|
5249
5290
|
import { useRef as useRef15 } from "react";
|
|
5250
5291
|
import { SizeControl as SizeControl9 } from "@elementor/editor-controls";
|
|
5251
|
-
import { __ as
|
|
5252
|
-
var FONT_SIZE_LABEL =
|
|
5292
|
+
import { __ as __52 } from "@wordpress/i18n";
|
|
5293
|
+
var FONT_SIZE_LABEL = __52("Font size", "elementor");
|
|
5253
5294
|
var FontSizeField = () => {
|
|
5254
5295
|
const rowRef = useRef15(null);
|
|
5255
|
-
return /* @__PURE__ */
|
|
5296
|
+
return /* @__PURE__ */ React75.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React75.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React75.createElement(SizeControl9, { anchorRef: rowRef, ariaLabel: FONT_SIZE_LABEL })));
|
|
5256
5297
|
};
|
|
5257
5298
|
|
|
5258
5299
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
5259
|
-
import * as
|
|
5300
|
+
import * as React76 from "react";
|
|
5260
5301
|
import { ToggleControl as ToggleControl12 } from "@elementor/editor-controls";
|
|
5261
5302
|
import { ItalicIcon, MinusIcon } from "@elementor/icons";
|
|
5262
|
-
import { __ as
|
|
5263
|
-
var FONT_STYLE_LABEL =
|
|
5303
|
+
import { __ as __53 } from "@wordpress/i18n";
|
|
5304
|
+
var FONT_STYLE_LABEL = __53("Font style", "elementor");
|
|
5264
5305
|
var options8 = [
|
|
5265
5306
|
{
|
|
5266
5307
|
value: "normal",
|
|
5267
|
-
label:
|
|
5268
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5308
|
+
label: __53("Normal", "elementor"),
|
|
5309
|
+
renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(MinusIcon, { fontSize: size }),
|
|
5269
5310
|
showTooltip: true
|
|
5270
5311
|
},
|
|
5271
5312
|
{
|
|
5272
5313
|
value: "italic",
|
|
5273
|
-
label:
|
|
5274
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5314
|
+
label: __53("Italic", "elementor"),
|
|
5315
|
+
renderContent: ({ size }) => /* @__PURE__ */ React76.createElement(ItalicIcon, { fontSize: size }),
|
|
5275
5316
|
showTooltip: true
|
|
5276
5317
|
}
|
|
5277
5318
|
];
|
|
5278
5319
|
var FontStyleField = () => {
|
|
5279
|
-
return /* @__PURE__ */
|
|
5320
|
+
return /* @__PURE__ */ React76.createElement(StylesField, { bind: "font-style", propDisplayName: FONT_STYLE_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: FONT_STYLE_LABEL }, /* @__PURE__ */ React76.createElement(ToggleControl12, { options: options8 })));
|
|
5280
5321
|
};
|
|
5281
5322
|
|
|
5282
5323
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
5283
|
-
import * as
|
|
5324
|
+
import * as React77 from "react";
|
|
5284
5325
|
import { SelectControl as SelectControl5 } from "@elementor/editor-controls";
|
|
5285
|
-
import { __ as
|
|
5286
|
-
var FONT_WEIGHT_LABEL =
|
|
5326
|
+
import { __ as __54 } from "@wordpress/i18n";
|
|
5327
|
+
var FONT_WEIGHT_LABEL = __54("Font weight", "elementor");
|
|
5287
5328
|
var fontWeightOptions = [
|
|
5288
|
-
{ value: "100", label:
|
|
5289
|
-
{ value: "200", label:
|
|
5290
|
-
{ value: "300", label:
|
|
5291
|
-
{ value: "400", label:
|
|
5292
|
-
{ value: "500", label:
|
|
5293
|
-
{ value: "600", label:
|
|
5294
|
-
{ value: "700", label:
|
|
5295
|
-
{ value: "800", label:
|
|
5296
|
-
{ value: "900", label:
|
|
5329
|
+
{ value: "100", label: __54("100 - Thin", "elementor") },
|
|
5330
|
+
{ value: "200", label: __54("200 - Extra light", "elementor") },
|
|
5331
|
+
{ value: "300", label: __54("300 - Light", "elementor") },
|
|
5332
|
+
{ value: "400", label: __54("400 - Normal", "elementor") },
|
|
5333
|
+
{ value: "500", label: __54("500 - Medium", "elementor") },
|
|
5334
|
+
{ value: "600", label: __54("600 - Semi bold", "elementor") },
|
|
5335
|
+
{ value: "700", label: __54("700 - Bold", "elementor") },
|
|
5336
|
+
{ value: "800", label: __54("800 - Extra bold", "elementor") },
|
|
5337
|
+
{ value: "900", label: __54("900 - Black", "elementor") }
|
|
5297
5338
|
];
|
|
5298
5339
|
var FontWeightField = () => {
|
|
5299
|
-
return /* @__PURE__ */
|
|
5340
|
+
return /* @__PURE__ */ React77.createElement(StylesField, { bind: "font-weight", propDisplayName: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React77.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React77.createElement(SelectControl5, { options: fontWeightOptions })));
|
|
5300
5341
|
};
|
|
5301
5342
|
|
|
5302
5343
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
5303
|
-
import * as
|
|
5344
|
+
import * as React78 from "react";
|
|
5304
5345
|
import { useRef as useRef16 } from "react";
|
|
5305
5346
|
import { SizeControl as SizeControl10 } from "@elementor/editor-controls";
|
|
5306
|
-
import { __ as
|
|
5307
|
-
var LETTER_SPACING_LABEL =
|
|
5347
|
+
import { __ as __55 } from "@wordpress/i18n";
|
|
5348
|
+
var LETTER_SPACING_LABEL = __55("Letter spacing", "elementor");
|
|
5308
5349
|
var LetterSpacingField = () => {
|
|
5309
5350
|
const rowRef = useRef16(null);
|
|
5310
|
-
return /* @__PURE__ */
|
|
5351
|
+
return /* @__PURE__ */ React78.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React78.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React78.createElement(SizeControl10, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
|
|
5311
5352
|
};
|
|
5312
5353
|
|
|
5313
5354
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
5314
|
-
import * as
|
|
5355
|
+
import * as React79 from "react";
|
|
5315
5356
|
import { useRef as useRef17 } from "react";
|
|
5316
5357
|
import { SizeControl as SizeControl11 } from "@elementor/editor-controls";
|
|
5317
|
-
import { __ as
|
|
5318
|
-
var LINE_HEIGHT_LABEL =
|
|
5358
|
+
import { __ as __56 } from "@wordpress/i18n";
|
|
5359
|
+
var LINE_HEIGHT_LABEL = __56("Line height", "elementor");
|
|
5319
5360
|
var LineHeightField = () => {
|
|
5320
5361
|
const rowRef = useRef17(null);
|
|
5321
|
-
return /* @__PURE__ */
|
|
5362
|
+
return /* @__PURE__ */ React79.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React79.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React79.createElement(SizeControl11, { anchorRef: rowRef })));
|
|
5322
5363
|
};
|
|
5323
5364
|
|
|
5324
5365
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
5325
|
-
import * as
|
|
5366
|
+
import * as React80 from "react";
|
|
5326
5367
|
import { ToggleControl as ToggleControl13 } from "@elementor/editor-controls";
|
|
5327
5368
|
import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from "@elementor/icons";
|
|
5328
5369
|
import { withDirection as withDirection11 } from "@elementor/ui";
|
|
5329
|
-
import { __ as
|
|
5330
|
-
var TEXT_ALIGNMENT_LABEL =
|
|
5370
|
+
import { __ as __57 } from "@wordpress/i18n";
|
|
5371
|
+
var TEXT_ALIGNMENT_LABEL = __57("Text align", "elementor");
|
|
5331
5372
|
var AlignStartIcon = withDirection11(AlignLeftIcon);
|
|
5332
5373
|
var AlignEndIcon = withDirection11(AlignRightIcon);
|
|
5333
5374
|
var options9 = [
|
|
5334
5375
|
{
|
|
5335
5376
|
value: "start",
|
|
5336
|
-
label:
|
|
5337
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5377
|
+
label: __57("Start", "elementor"),
|
|
5378
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(AlignStartIcon, { fontSize: size }),
|
|
5338
5379
|
showTooltip: true
|
|
5339
5380
|
},
|
|
5340
5381
|
{
|
|
5341
5382
|
value: "center",
|
|
5342
|
-
label:
|
|
5343
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5383
|
+
label: __57("Center", "elementor"),
|
|
5384
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(AlignCenterIcon, { fontSize: size }),
|
|
5344
5385
|
showTooltip: true
|
|
5345
5386
|
},
|
|
5346
5387
|
{
|
|
5347
5388
|
value: "end",
|
|
5348
|
-
label:
|
|
5349
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5389
|
+
label: __57("End", "elementor"),
|
|
5390
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(AlignEndIcon, { fontSize: size }),
|
|
5350
5391
|
showTooltip: true
|
|
5351
5392
|
},
|
|
5352
5393
|
{
|
|
5353
5394
|
value: "justify",
|
|
5354
|
-
label:
|
|
5355
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5395
|
+
label: __57("Justify", "elementor"),
|
|
5396
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(AlignJustifiedIcon, { fontSize: size }),
|
|
5356
5397
|
showTooltip: true
|
|
5357
5398
|
}
|
|
5358
5399
|
];
|
|
5359
5400
|
var TextAlignmentField = () => {
|
|
5360
|
-
return /* @__PURE__ */
|
|
5401
|
+
return /* @__PURE__ */ React80.createElement(StylesField, { bind: "text-align", propDisplayName: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React80.createElement(UiProviders, null, /* @__PURE__ */ React80.createElement(StylesFieldLayout, { label: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React80.createElement(ToggleControl13, { options: options9 }))));
|
|
5361
5402
|
};
|
|
5362
5403
|
|
|
5363
5404
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
5364
|
-
import * as
|
|
5405
|
+
import * as React81 from "react";
|
|
5365
5406
|
import { ColorControl as ColorControl2 } from "@elementor/editor-controls";
|
|
5366
|
-
import { __ as
|
|
5367
|
-
var TEXT_COLOR_LABEL =
|
|
5407
|
+
import { __ as __58 } from "@wordpress/i18n";
|
|
5408
|
+
var TEXT_COLOR_LABEL = __58("Text color", "elementor");
|
|
5368
5409
|
var TextColorField = () => {
|
|
5369
|
-
return /* @__PURE__ */
|
|
5410
|
+
return /* @__PURE__ */ React81.createElement(StylesField, { bind: "color", propDisplayName: TEXT_COLOR_LABEL }, /* @__PURE__ */ React81.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ React81.createElement(ColorControl2, { id: "text-color-control" })));
|
|
5370
5411
|
};
|
|
5371
5412
|
|
|
5372
5413
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
5373
|
-
import * as
|
|
5414
|
+
import * as React82 from "react";
|
|
5374
5415
|
import { ToggleControl as ToggleControl14 } from "@elementor/editor-controls";
|
|
5375
5416
|
import { MinusIcon as MinusIcon2, OverlineIcon, StrikethroughIcon, UnderlineIcon } from "@elementor/icons";
|
|
5376
|
-
import { __ as
|
|
5377
|
-
var TEXT_DECORATION_LABEL =
|
|
5417
|
+
import { __ as __59 } from "@wordpress/i18n";
|
|
5418
|
+
var TEXT_DECORATION_LABEL = __59("Line decoration", "elementor");
|
|
5378
5419
|
var options10 = [
|
|
5379
5420
|
{
|
|
5380
5421
|
value: "none",
|
|
5381
|
-
label:
|
|
5382
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5422
|
+
label: __59("None", "elementor"),
|
|
5423
|
+
renderContent: ({ size }) => /* @__PURE__ */ React82.createElement(MinusIcon2, { fontSize: size }),
|
|
5383
5424
|
showTooltip: true,
|
|
5384
5425
|
exclusive: true
|
|
5385
5426
|
},
|
|
5386
5427
|
{
|
|
5387
5428
|
value: "underline",
|
|
5388
|
-
label:
|
|
5389
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5429
|
+
label: __59("Underline", "elementor"),
|
|
5430
|
+
renderContent: ({ size }) => /* @__PURE__ */ React82.createElement(UnderlineIcon, { fontSize: size }),
|
|
5390
5431
|
showTooltip: true
|
|
5391
5432
|
},
|
|
5392
5433
|
{
|
|
5393
5434
|
value: "line-through",
|
|
5394
|
-
label:
|
|
5395
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5435
|
+
label: __59("Line-through", "elementor"),
|
|
5436
|
+
renderContent: ({ size }) => /* @__PURE__ */ React82.createElement(StrikethroughIcon, { fontSize: size }),
|
|
5396
5437
|
showTooltip: true
|
|
5397
5438
|
},
|
|
5398
5439
|
{
|
|
5399
5440
|
value: "overline",
|
|
5400
|
-
label:
|
|
5401
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5441
|
+
label: __59("Overline", "elementor"),
|
|
5442
|
+
renderContent: ({ size }) => /* @__PURE__ */ React82.createElement(OverlineIcon, { fontSize: size }),
|
|
5402
5443
|
showTooltip: true
|
|
5403
5444
|
}
|
|
5404
5445
|
];
|
|
5405
|
-
var TextDecorationField = () => /* @__PURE__ */
|
|
5446
|
+
var TextDecorationField = () => /* @__PURE__ */ React82.createElement(StylesField, { bind: "text-decoration", propDisplayName: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React82.createElement(StylesFieldLayout, { label: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React82.createElement(ToggleControl14, { options: options10, exclusive: false })));
|
|
5406
5447
|
|
|
5407
5448
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
5408
|
-
import * as
|
|
5449
|
+
import * as React83 from "react";
|
|
5409
5450
|
import { ToggleControl as ToggleControl15 } from "@elementor/editor-controls";
|
|
5410
5451
|
import { TextDirectionLtrIcon, TextDirectionRtlIcon } from "@elementor/icons";
|
|
5411
|
-
import { __ as
|
|
5412
|
-
var TEXT_DIRECTION_LABEL =
|
|
5452
|
+
import { __ as __60 } from "@wordpress/i18n";
|
|
5453
|
+
var TEXT_DIRECTION_LABEL = __60("Direction", "elementor");
|
|
5413
5454
|
var options11 = [
|
|
5414
5455
|
{
|
|
5415
5456
|
value: "ltr",
|
|
5416
|
-
label:
|
|
5417
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5457
|
+
label: __60("Left to right", "elementor"),
|
|
5458
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(TextDirectionLtrIcon, { fontSize: size }),
|
|
5418
5459
|
showTooltip: true
|
|
5419
5460
|
},
|
|
5420
5461
|
{
|
|
5421
5462
|
value: "rtl",
|
|
5422
|
-
label:
|
|
5423
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5463
|
+
label: __60("Right to left", "elementor"),
|
|
5464
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(TextDirectionRtlIcon, { fontSize: size }),
|
|
5424
5465
|
showTooltip: true
|
|
5425
5466
|
}
|
|
5426
5467
|
];
|
|
5427
5468
|
var TextDirectionField = () => {
|
|
5428
|
-
return /* @__PURE__ */
|
|
5469
|
+
return /* @__PURE__ */ React83.createElement(StylesField, { bind: "direction", propDisplayName: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React83.createElement(StylesFieldLayout, { label: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React83.createElement(ToggleControl15, { options: options11 })));
|
|
5429
5470
|
};
|
|
5430
5471
|
|
|
5431
5472
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
5432
|
-
import * as
|
|
5473
|
+
import * as React85 from "react";
|
|
5433
5474
|
import { StrokeControl } from "@elementor/editor-controls";
|
|
5434
|
-
import { __ as
|
|
5475
|
+
import { __ as __61 } from "@wordpress/i18n";
|
|
5435
5476
|
|
|
5436
5477
|
// src/components/add-or-remove-content.tsx
|
|
5437
|
-
import * as
|
|
5478
|
+
import * as React84 from "react";
|
|
5438
5479
|
import { MinusIcon as MinusIcon3, PlusIcon } from "@elementor/icons";
|
|
5439
5480
|
import { Collapse as Collapse2, IconButton, Stack as Stack12 } from "@elementor/ui";
|
|
5440
5481
|
var SIZE = "tiny";
|
|
@@ -5446,7 +5487,7 @@ var AddOrRemoveContent = ({
|
|
|
5446
5487
|
disabled,
|
|
5447
5488
|
renderLabel
|
|
5448
5489
|
}) => {
|
|
5449
|
-
return /* @__PURE__ */
|
|
5490
|
+
return /* @__PURE__ */ React84.createElement(SectionContent, null, /* @__PURE__ */ React84.createElement(
|
|
5450
5491
|
Stack12,
|
|
5451
5492
|
{
|
|
5452
5493
|
direction: "row",
|
|
@@ -5457,8 +5498,8 @@ var AddOrRemoveContent = ({
|
|
|
5457
5498
|
}
|
|
5458
5499
|
},
|
|
5459
5500
|
renderLabel(),
|
|
5460
|
-
isAdded ? /* @__PURE__ */
|
|
5461
|
-
), /* @__PURE__ */
|
|
5501
|
+
isAdded ? /* @__PURE__ */ React84.createElement(IconButton, { size: SIZE, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React84.createElement(MinusIcon3, { fontSize: SIZE })) : /* @__PURE__ */ React84.createElement(IconButton, { size: SIZE, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React84.createElement(PlusIcon, { fontSize: SIZE }))
|
|
5502
|
+
), /* @__PURE__ */ React84.createElement(Collapse2, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React84.createElement(SectionContent, null, children)));
|
|
5462
5503
|
};
|
|
5463
5504
|
|
|
5464
5505
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -5478,7 +5519,7 @@ var initTextStroke = {
|
|
|
5478
5519
|
}
|
|
5479
5520
|
}
|
|
5480
5521
|
};
|
|
5481
|
-
var TEXT_STROKE_LABEL =
|
|
5522
|
+
var TEXT_STROKE_LABEL = __61("Text stroke", "elementor");
|
|
5482
5523
|
var TextStrokeField = () => {
|
|
5483
5524
|
const { value, setValue, canEdit } = useStylesField("stroke", {
|
|
5484
5525
|
history: { propDisplayName: TEXT_STROKE_LABEL }
|
|
@@ -5490,67 +5531,67 @@ var TextStrokeField = () => {
|
|
|
5490
5531
|
setValue(null);
|
|
5491
5532
|
};
|
|
5492
5533
|
const hasTextStroke = Boolean(value);
|
|
5493
|
-
return /* @__PURE__ */
|
|
5534
|
+
return /* @__PURE__ */ React85.createElement(StylesField, { bind: "stroke", propDisplayName: TEXT_STROKE_LABEL }, /* @__PURE__ */ React85.createElement(
|
|
5494
5535
|
AddOrRemoveContent,
|
|
5495
5536
|
{
|
|
5496
5537
|
isAdded: hasTextStroke,
|
|
5497
5538
|
onAdd: addTextStroke,
|
|
5498
5539
|
onRemove: removeTextStroke,
|
|
5499
5540
|
disabled: !canEdit,
|
|
5500
|
-
renderLabel: () => /* @__PURE__ */
|
|
5541
|
+
renderLabel: () => /* @__PURE__ */ React85.createElement(ControlLabel, null, TEXT_STROKE_LABEL)
|
|
5501
5542
|
},
|
|
5502
|
-
/* @__PURE__ */
|
|
5543
|
+
/* @__PURE__ */ React85.createElement(StrokeControl, null)
|
|
5503
5544
|
));
|
|
5504
5545
|
};
|
|
5505
5546
|
|
|
5506
5547
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
5507
|
-
import * as
|
|
5548
|
+
import * as React86 from "react";
|
|
5508
5549
|
import { ToggleControl as ToggleControl16 } from "@elementor/editor-controls";
|
|
5509
5550
|
import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon as MinusIcon4 } from "@elementor/icons";
|
|
5510
|
-
import { __ as
|
|
5511
|
-
var TEXT_TRANSFORM_LABEL =
|
|
5551
|
+
import { __ as __62 } from "@wordpress/i18n";
|
|
5552
|
+
var TEXT_TRANSFORM_LABEL = __62("Text transform", "elementor");
|
|
5512
5553
|
var options12 = [
|
|
5513
5554
|
{
|
|
5514
5555
|
value: "none",
|
|
5515
|
-
label:
|
|
5516
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5556
|
+
label: __62("None", "elementor"),
|
|
5557
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(MinusIcon4, { fontSize: size }),
|
|
5517
5558
|
showTooltip: true
|
|
5518
5559
|
},
|
|
5519
5560
|
{
|
|
5520
5561
|
value: "capitalize",
|
|
5521
|
-
label:
|
|
5522
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5562
|
+
label: __62("Capitalize", "elementor"),
|
|
5563
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(LetterCaseIcon, { fontSize: size }),
|
|
5523
5564
|
showTooltip: true
|
|
5524
5565
|
},
|
|
5525
5566
|
{
|
|
5526
5567
|
value: "uppercase",
|
|
5527
|
-
label:
|
|
5528
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5568
|
+
label: __62("Uppercase", "elementor"),
|
|
5569
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(LetterCaseUpperIcon, { fontSize: size }),
|
|
5529
5570
|
showTooltip: true
|
|
5530
5571
|
},
|
|
5531
5572
|
{
|
|
5532
5573
|
value: "lowercase",
|
|
5533
|
-
label:
|
|
5534
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5574
|
+
label: __62("Lowercase", "elementor"),
|
|
5575
|
+
renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(LetterCaseLowerIcon, { fontSize: size }),
|
|
5535
5576
|
showTooltip: true
|
|
5536
5577
|
}
|
|
5537
5578
|
];
|
|
5538
|
-
var TransformField = () => /* @__PURE__ */
|
|
5579
|
+
var TransformField = () => /* @__PURE__ */ React86.createElement(StylesField, { bind: "text-transform", propDisplayName: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React86.createElement(StylesFieldLayout, { label: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React86.createElement(ToggleControl16, { options: options12 })));
|
|
5539
5580
|
|
|
5540
5581
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
5541
|
-
import * as
|
|
5582
|
+
import * as React87 from "react";
|
|
5542
5583
|
import { useRef as useRef18 } from "react";
|
|
5543
5584
|
import { SizeControl as SizeControl12 } from "@elementor/editor-controls";
|
|
5544
|
-
import { __ as
|
|
5545
|
-
var WORD_SPACING_LABEL =
|
|
5585
|
+
import { __ as __63 } from "@wordpress/i18n";
|
|
5586
|
+
var WORD_SPACING_LABEL = __63("Word spacing", "elementor");
|
|
5546
5587
|
var WordSpacingField = () => {
|
|
5547
5588
|
const rowRef = useRef18(null);
|
|
5548
|
-
return /* @__PURE__ */
|
|
5589
|
+
return /* @__PURE__ */ React87.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React87.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React87.createElement(SizeControl12, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
|
|
5549
5590
|
};
|
|
5550
5591
|
|
|
5551
5592
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
5552
5593
|
var TypographySection = () => {
|
|
5553
|
-
return /* @__PURE__ */
|
|
5594
|
+
return /* @__PURE__ */ React88.createElement(SectionContent, null, /* @__PURE__ */ React88.createElement(FontFamilyField, null), /* @__PURE__ */ React88.createElement(FontWeightField, null), /* @__PURE__ */ React88.createElement(FontSizeField, null), /* @__PURE__ */ React88.createElement(PanelDivider, null), /* @__PURE__ */ React88.createElement(TextAlignmentField, null), /* @__PURE__ */ React88.createElement(TextColorField, null), /* @__PURE__ */ React88.createElement(
|
|
5554
5595
|
StyleTabCollapsibleContent,
|
|
5555
5596
|
{
|
|
5556
5597
|
fields: [
|
|
@@ -5565,7 +5606,7 @@ var TypographySection = () => {
|
|
|
5565
5606
|
"stroke"
|
|
5566
5607
|
]
|
|
5567
5608
|
},
|
|
5568
|
-
/* @__PURE__ */
|
|
5609
|
+
/* @__PURE__ */ React88.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React88.createElement(LineHeightField, null), /* @__PURE__ */ React88.createElement(LetterSpacingField, null), /* @__PURE__ */ React88.createElement(WordSpacingField, null), /* @__PURE__ */ React88.createElement(ColumnCountField, null), /* @__PURE__ */ React88.createElement(ColumnGapField, null), /* @__PURE__ */ React88.createElement(PanelDivider, null), /* @__PURE__ */ React88.createElement(TextDecorationField, null), /* @__PURE__ */ React88.createElement(TransformField, null), /* @__PURE__ */ React88.createElement(TextDirectionField, null), /* @__PURE__ */ React88.createElement(FontStyleField, null), /* @__PURE__ */ React88.createElement(TextStrokeField, null))
|
|
5569
5610
|
));
|
|
5570
5611
|
};
|
|
5571
5612
|
|
|
@@ -5573,7 +5614,7 @@ var TypographySection = () => {
|
|
|
5573
5614
|
var STYLE_SECTIONS = [
|
|
5574
5615
|
{
|
|
5575
5616
|
name: "Layout",
|
|
5576
|
-
title:
|
|
5617
|
+
title: __64("Layout", "elementor"),
|
|
5577
5618
|
component: LayoutSection,
|
|
5578
5619
|
fields: [
|
|
5579
5620
|
"display",
|
|
@@ -5593,13 +5634,13 @@ var STYLE_SECTIONS = [
|
|
|
5593
5634
|
},
|
|
5594
5635
|
{
|
|
5595
5636
|
name: "Spacing",
|
|
5596
|
-
title:
|
|
5637
|
+
title: __64("Spacing", "elementor"),
|
|
5597
5638
|
component: SpacingSection,
|
|
5598
5639
|
fields: ["margin", "padding"]
|
|
5599
5640
|
},
|
|
5600
5641
|
{
|
|
5601
5642
|
name: "Size",
|
|
5602
|
-
title:
|
|
5643
|
+
title: __64("Size", "elementor"),
|
|
5603
5644
|
component: SizeSection,
|
|
5604
5645
|
fields: [
|
|
5605
5646
|
"width",
|
|
@@ -5615,13 +5656,13 @@ var STYLE_SECTIONS = [
|
|
|
5615
5656
|
},
|
|
5616
5657
|
{
|
|
5617
5658
|
name: "Position",
|
|
5618
|
-
title:
|
|
5659
|
+
title: __64("Position", "elementor"),
|
|
5619
5660
|
component: PositionSection,
|
|
5620
5661
|
fields: ["position", "z-index", "scroll-margin-top"]
|
|
5621
5662
|
},
|
|
5622
5663
|
{
|
|
5623
5664
|
name: "Typography",
|
|
5624
|
-
title:
|
|
5665
|
+
title: __64("Typography", "elementor"),
|
|
5625
5666
|
component: TypographySection,
|
|
5626
5667
|
fields: [
|
|
5627
5668
|
"font-family",
|
|
@@ -5642,19 +5683,19 @@ var STYLE_SECTIONS = [
|
|
|
5642
5683
|
},
|
|
5643
5684
|
{
|
|
5644
5685
|
name: "Background",
|
|
5645
|
-
title:
|
|
5686
|
+
title: __64("Background", "elementor"),
|
|
5646
5687
|
component: BackgroundSection,
|
|
5647
5688
|
fields: ["background"]
|
|
5648
5689
|
},
|
|
5649
5690
|
{
|
|
5650
5691
|
name: "Border",
|
|
5651
|
-
title:
|
|
5692
|
+
title: __64("Border", "elementor"),
|
|
5652
5693
|
component: BorderSection,
|
|
5653
5694
|
fields: ["border-radius", "border-width", "border-color", "border-style"]
|
|
5654
5695
|
},
|
|
5655
5696
|
{
|
|
5656
5697
|
name: "Effects",
|
|
5657
|
-
title:
|
|
5698
|
+
title: __64("Effects", "elementor"),
|
|
5658
5699
|
component: EffectsSection,
|
|
5659
5700
|
fields: [
|
|
5660
5701
|
"mix-blend-mode",
|
|
@@ -5671,13 +5712,13 @@ var STYLE_SECTIONS = [
|
|
|
5671
5712
|
var STYLE_SECTION_NAMES = STYLE_SECTIONS.map((section) => section.name);
|
|
5672
5713
|
|
|
5673
5714
|
// src/components/style-tab-section.tsx
|
|
5674
|
-
import * as
|
|
5715
|
+
import * as React89 from "react";
|
|
5675
5716
|
var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
5676
5717
|
const { component, name, title, action } = section;
|
|
5677
5718
|
const tabDefaults = useDefaultPanelSettings();
|
|
5678
|
-
const SectionComponent = component || (() => /* @__PURE__ */
|
|
5719
|
+
const SectionComponent = component || (() => /* @__PURE__ */ React89.createElement(React89.Fragment, null));
|
|
5679
5720
|
const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes(name);
|
|
5680
|
-
return /* @__PURE__ */
|
|
5721
|
+
return /* @__PURE__ */ React89.createElement(
|
|
5681
5722
|
Section,
|
|
5682
5723
|
{
|
|
5683
5724
|
title,
|
|
@@ -5686,13 +5727,13 @@ var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
|
5686
5727
|
unmountOnExit,
|
|
5687
5728
|
action
|
|
5688
5729
|
},
|
|
5689
|
-
/* @__PURE__ */
|
|
5730
|
+
/* @__PURE__ */ React89.createElement(SectionComponent, null)
|
|
5690
5731
|
);
|
|
5691
5732
|
};
|
|
5692
5733
|
|
|
5693
5734
|
// src/components/style-sections.tsx
|
|
5694
5735
|
var StyleSections = () => {
|
|
5695
|
-
return /* @__PURE__ */
|
|
5736
|
+
return /* @__PURE__ */ React90.createElement(React90.Fragment, null, STYLE_SECTIONS.map((section) => /* @__PURE__ */ React90.createElement(
|
|
5696
5737
|
StyleTabSection,
|
|
5697
5738
|
{
|
|
5698
5739
|
key: section.name,
|
|
@@ -5719,12 +5760,12 @@ var stickyHeaderStyles = {
|
|
|
5719
5760
|
var StyleTab = () => {
|
|
5720
5761
|
const currentClassesProp = useCurrentClassesProp();
|
|
5721
5762
|
const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp ?? "");
|
|
5722
|
-
const [activeStyleState, setActiveStyleState] =
|
|
5763
|
+
const [activeStyleState, setActiveStyleState] = useState10(null);
|
|
5723
5764
|
const breakpoint = useActiveBreakpoint2();
|
|
5724
5765
|
if (!currentClassesProp) {
|
|
5725
5766
|
return null;
|
|
5726
5767
|
}
|
|
5727
|
-
return /* @__PURE__ */
|
|
5768
|
+
return /* @__PURE__ */ React91.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React91.createElement(
|
|
5728
5769
|
StyleProvider,
|
|
5729
5770
|
{
|
|
5730
5771
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -5735,12 +5776,12 @@ var StyleTab = () => {
|
|
|
5735
5776
|
},
|
|
5736
5777
|
setMetaState: setActiveStyleState
|
|
5737
5778
|
},
|
|
5738
|
-
/* @__PURE__ */
|
|
5779
|
+
/* @__PURE__ */ React91.createElement(SessionStorageProvider2, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React91.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React91.createElement(ClassesHeader, null, /* @__PURE__ */ React91.createElement(CssClassSelector, null), /* @__PURE__ */ React91.createElement(Divider5, null)), /* @__PURE__ */ React91.createElement(SectionsList, null, /* @__PURE__ */ React91.createElement(StyleSections, null), /* @__PURE__ */ React91.createElement(StyleTabSlot, null)), /* @__PURE__ */ React91.createElement(Box8, { sx: { height: "150px" } })))
|
|
5739
5780
|
));
|
|
5740
5781
|
};
|
|
5741
5782
|
function ClassesHeader({ children }) {
|
|
5742
5783
|
const scrollDirection = useScrollDirection();
|
|
5743
|
-
return /* @__PURE__ */
|
|
5784
|
+
return /* @__PURE__ */ React91.createElement(
|
|
5744
5785
|
Stack13,
|
|
5745
5786
|
{
|
|
5746
5787
|
sx: {
|
|
@@ -5763,12 +5804,14 @@ function useCurrentClassesProp() {
|
|
|
5763
5804
|
}
|
|
5764
5805
|
|
|
5765
5806
|
// src/components/editing-panel-tabs.tsx
|
|
5807
|
+
var CONTENT_ONLY_TAB = "settings";
|
|
5808
|
+
var DESIGN_TABS = ["style", "interactions"];
|
|
5766
5809
|
var EditingPanelTabs = () => {
|
|
5767
5810
|
const { element } = useElement();
|
|
5768
5811
|
return (
|
|
5769
5812
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
5770
5813
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
5771
|
-
/* @__PURE__ */
|
|
5814
|
+
/* @__PURE__ */ React92.createElement(Fragment10, { key: element.id }, /* @__PURE__ */ React92.createElement(PanelTabContent, null))
|
|
5772
5815
|
);
|
|
5773
5816
|
};
|
|
5774
5817
|
var PanelTabContent = () => {
|
|
@@ -5776,10 +5819,18 @@ var PanelTabContent = () => {
|
|
|
5776
5819
|
const editorDefaults = useDefaultPanelSettings();
|
|
5777
5820
|
const defaultComponentTab = editorDefaults.defaultTab;
|
|
5778
5821
|
const isPromotedElement = !!getWidgetsCache2()?.[element.type]?.meta?.is_pro_promotion;
|
|
5822
|
+
const hasContentOnlyAccess = useHasContentOnlyAccess();
|
|
5823
|
+
const areDesignTabsRestricted = hasContentOnlyAccess && !isPromotedElement;
|
|
5779
5824
|
const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
5780
|
-
const currentTab =
|
|
5825
|
+
const currentTab = resolveCurrentTab({ storedTab, isPromotedElement, areDesignTabsRestricted });
|
|
5781
5826
|
const { getTabProps, getTabPanelProps, getTabsProps } = useTabs(currentTab);
|
|
5782
|
-
|
|
5827
|
+
const getDesignTabProps = (tab) => ({
|
|
5828
|
+
...getTabProps(tab),
|
|
5829
|
+
disabled: areDesignTabsRestricted,
|
|
5830
|
+
sx: areDesignTabsRestricted ? { pointerEvents: "auto" } : void 0
|
|
5831
|
+
});
|
|
5832
|
+
const withRestrictionInfotip = (label) => areDesignTabsRestricted ? /* @__PURE__ */ React92.createElement(ContentOnlyInfotip, null, label) : label;
|
|
5833
|
+
return /* @__PURE__ */ React92.createElement(ScrollProvider, null, /* @__PURE__ */ React92.createElement(Stack14, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React92.createElement(Stack14, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React92.createElement(
|
|
5783
5834
|
Tabs,
|
|
5784
5835
|
{
|
|
5785
5836
|
variant: "fullWidth",
|
|
@@ -5787,14 +5838,42 @@ var PanelTabContent = () => {
|
|
|
5787
5838
|
sx: { mt: 0.5 },
|
|
5788
5839
|
...getTabsProps(),
|
|
5789
5840
|
onChange: (_, newValue) => {
|
|
5841
|
+
if (areDesignTabsRestricted && DESIGN_TABS.includes(newValue)) {
|
|
5842
|
+
return;
|
|
5843
|
+
}
|
|
5790
5844
|
getTabsProps().onChange(_, newValue);
|
|
5791
5845
|
setCurrentTab(newValue);
|
|
5792
5846
|
}
|
|
5793
5847
|
},
|
|
5794
|
-
!isPromotedElement && /* @__PURE__ */
|
|
5795
|
-
/* @__PURE__ */
|
|
5796
|
-
|
|
5797
|
-
|
|
5848
|
+
!isPromotedElement && /* @__PURE__ */ React92.createElement(Tab, { label: __65("General", "elementor"), ...getTabProps("settings") }),
|
|
5849
|
+
/* @__PURE__ */ React92.createElement(
|
|
5850
|
+
Tab,
|
|
5851
|
+
{
|
|
5852
|
+
label: withRestrictionInfotip(__65("Style", "elementor")),
|
|
5853
|
+
...getDesignTabProps("style")
|
|
5854
|
+
}
|
|
5855
|
+
),
|
|
5856
|
+
/* @__PURE__ */ React92.createElement(
|
|
5857
|
+
Tab,
|
|
5858
|
+
{
|
|
5859
|
+
label: withRestrictionInfotip(__65("Interactions", "elementor")),
|
|
5860
|
+
...getDesignTabProps("interactions")
|
|
5861
|
+
}
|
|
5862
|
+
)
|
|
5863
|
+
), /* @__PURE__ */ React92.createElement(Divider6, null)), !isPromotedElement && /* @__PURE__ */ React92.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React92.createElement(SettingsTab, null)), !areDesignTabsRestricted && /* @__PURE__ */ React92.createElement(React92.Fragment, null, /* @__PURE__ */ React92.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React92.createElement(StyleTab, null)), /* @__PURE__ */ React92.createElement(TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React92.createElement(InteractionsTab, null)))));
|
|
5864
|
+
};
|
|
5865
|
+
var resolveCurrentTab = ({
|
|
5866
|
+
storedTab,
|
|
5867
|
+
isPromotedElement,
|
|
5868
|
+
areDesignTabsRestricted
|
|
5869
|
+
}) => {
|
|
5870
|
+
if (areDesignTabsRestricted && DESIGN_TABS.includes(storedTab)) {
|
|
5871
|
+
return CONTENT_ONLY_TAB;
|
|
5872
|
+
}
|
|
5873
|
+
if (isPromotedElement && storedTab === "settings") {
|
|
5874
|
+
return "style";
|
|
5875
|
+
}
|
|
5876
|
+
return storedTab;
|
|
5798
5877
|
};
|
|
5799
5878
|
|
|
5800
5879
|
// src/components/editing-panel.tsx
|
|
@@ -5807,22 +5886,22 @@ var EditingPanel = () => {
|
|
|
5807
5886
|
if (!element || !elementType) {
|
|
5808
5887
|
return null;
|
|
5809
5888
|
}
|
|
5810
|
-
const panelTitle =
|
|
5889
|
+
const panelTitle = __66("Edit %s", "elementor").replace("%s", elementType.title);
|
|
5811
5890
|
const { component: ReplacementComponent } = getEditingPanelReplacement(element, elementType) ?? {};
|
|
5812
|
-
let panelContent = /* @__PURE__ */
|
|
5891
|
+
let panelContent = /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(PanelHeader, null, /* @__PURE__ */ React93.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React93.createElement(AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React93.createElement(PanelBody, { sx: { height: "auto", flex: 1, minHeight: 0 } }, /* @__PURE__ */ React93.createElement(EditingPanelTabs, null)), /* @__PURE__ */ React93.createElement(EditingPanelStickyPromotion, null));
|
|
5813
5892
|
if (ReplacementComponent) {
|
|
5814
|
-
panelContent = /* @__PURE__ */
|
|
5893
|
+
panelContent = /* @__PURE__ */ React93.createElement(ReplacementComponent, null);
|
|
5815
5894
|
}
|
|
5816
|
-
return /* @__PURE__ */
|
|
5895
|
+
return /* @__PURE__ */ React93.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React93.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React93.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React93.createElement(ThemeProvider3, null, /* @__PURE__ */ React93.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React93.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React93.createElement(ElementProvider, { element, elementType, settings }, /* @__PURE__ */ React93.createElement(Panel, null, /* @__PURE__ */ React93.createElement(PanelHeaderTopSlot, null), panelContent)))))));
|
|
5817
5896
|
};
|
|
5818
5897
|
|
|
5819
5898
|
// src/components/style-states/pseudo-state-menu-items.tsx
|
|
5820
|
-
import * as
|
|
5899
|
+
import * as React94 from "react";
|
|
5821
5900
|
import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
|
|
5822
5901
|
import { MenuSubheader as MenuSubheader3 } from "@elementor/ui";
|
|
5823
|
-
import { __ as
|
|
5902
|
+
import { __ as __67 } from "@wordpress/i18n";
|
|
5824
5903
|
function PseudoStateMenuItems({ states, activeState, onSelectState, onClose }) {
|
|
5825
|
-
return /* @__PURE__ */
|
|
5904
|
+
return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(
|
|
5826
5905
|
MenuSubheader3,
|
|
5827
5906
|
{
|
|
5828
5907
|
sx: {
|
|
@@ -5832,8 +5911,8 @@ function PseudoStateMenuItems({ states, activeState, onSelectState, onClose }) {
|
|
|
5832
5911
|
pt: 1
|
|
5833
5912
|
}
|
|
5834
5913
|
},
|
|
5835
|
-
|
|
5836
|
-
), states.map((state) => /* @__PURE__ */
|
|
5914
|
+
__67("States", "elementor")
|
|
5915
|
+
), states.map((state) => /* @__PURE__ */ React94.createElement(
|
|
5837
5916
|
MenuListItem3,
|
|
5838
5917
|
{
|
|
5839
5918
|
key: state.key,
|
|
@@ -5897,21 +5976,21 @@ var EditingPanelHooks = () => {
|
|
|
5897
5976
|
import { AttributesControl, DisplayConditionsControl } from "@elementor/editor-controls";
|
|
5898
5977
|
|
|
5899
5978
|
// src/components/promotions/custom-css.tsx
|
|
5900
|
-
import * as
|
|
5979
|
+
import * as React95 from "react";
|
|
5901
5980
|
import { useRef as useRef19 } from "react";
|
|
5902
5981
|
import { PromotionTrigger } from "@elementor/editor-controls";
|
|
5903
|
-
import { __ as
|
|
5982
|
+
import { __ as __68 } from "@wordpress/i18n";
|
|
5904
5983
|
var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
|
|
5905
5984
|
var CustomCssSection = () => {
|
|
5906
5985
|
const triggerRef = useRef19(null);
|
|
5907
|
-
return /* @__PURE__ */
|
|
5986
|
+
return /* @__PURE__ */ React95.createElement(
|
|
5908
5987
|
StyleTabSection,
|
|
5909
5988
|
{
|
|
5910
5989
|
section: {
|
|
5911
5990
|
name: "Custom CSS",
|
|
5912
|
-
title:
|
|
5991
|
+
title: __68("Custom CSS", "elementor"),
|
|
5913
5992
|
action: {
|
|
5914
|
-
component: /* @__PURE__ */
|
|
5993
|
+
component: /* @__PURE__ */ React95.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "customCss", trackingData: TRACKING_DATA }),
|
|
5915
5994
|
onClick: () => triggerRef.current?.toggle()
|
|
5916
5995
|
}
|
|
5917
5996
|
}
|
|
@@ -5933,12 +6012,12 @@ var init = () => {
|
|
|
5933
6012
|
};
|
|
5934
6013
|
|
|
5935
6014
|
// src/controls-registry/element-controls/accordion-items-control/accordion-items-control.tsx
|
|
5936
|
-
import * as
|
|
6015
|
+
import * as React96 from "react";
|
|
5937
6016
|
import { ControlFormLabel as ControlFormLabel3, Repeater } from "@elementor/editor-controls";
|
|
5938
6017
|
import { updateElementEditorSettings as updateElementEditorSettings2, useElementChildren, useElementEditorSettings as useElementEditorSettings2 } from "@elementor/editor-elements";
|
|
5939
6018
|
import { booleanPropTypeUtil as booleanPropTypeUtil4 } from "@elementor/editor-props";
|
|
5940
6019
|
import { Stack as Stack15, TextField as TextField2 } from "@elementor/ui";
|
|
5941
|
-
import { __ as
|
|
6020
|
+
import { __ as __71 } from "@wordpress/i18n";
|
|
5942
6021
|
|
|
5943
6022
|
// src/controls-registry/element-controls/accordion-items-control/use-actions.ts
|
|
5944
6023
|
import {
|
|
@@ -5950,7 +6029,7 @@ import {
|
|
|
5950
6029
|
removeElements
|
|
5951
6030
|
} from "@elementor/editor-elements";
|
|
5952
6031
|
import { booleanPropTypeUtil as booleanPropTypeUtil2, escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
|
|
5953
|
-
import { __ as
|
|
6032
|
+
import { __ as __69, sprintf } from "@wordpress/i18n";
|
|
5954
6033
|
var ACCORDION_ELEMENT_TYPE = "e-accordion";
|
|
5955
6034
|
var ACCORDION_ITEM_ELEMENT_TYPE = "e-accordion-item";
|
|
5956
6035
|
var ACCORDION_ITEM_HEADER_ELEMENT_TYPE = "e-accordion-item-header";
|
|
@@ -5960,7 +6039,7 @@ var ACCORDION_ITEM_CONTENT_ELEMENT_TYPE = "e-accordion-item-content";
|
|
|
5960
6039
|
var PARAGRAPH_WIDGET_TYPE = "e-paragraph";
|
|
5961
6040
|
var getItemTitle = (position) => (
|
|
5962
6041
|
/* translators: %d: Accordion item position. */
|
|
5963
|
-
sprintf(
|
|
6042
|
+
sprintf(__69("Accordion Item %d", "elementor"), position)
|
|
5964
6043
|
);
|
|
5965
6044
|
var TRAILING_NUMBER = /(\d+)\s*$/;
|
|
5966
6045
|
var getNextItemNumber = (existingTitles) => {
|
|
@@ -5986,7 +6065,7 @@ var buildItemModel = (position, showIcon) => {
|
|
|
5986
6065
|
{
|
|
5987
6066
|
elType: ACCORDION_ITEM_HEADER_ELEMENT_TYPE,
|
|
5988
6067
|
id: generateElementId(),
|
|
5989
|
-
editor_settings: { title:
|
|
6068
|
+
editor_settings: { title: __69("Header", "elementor") },
|
|
5990
6069
|
// Seeded from the root's *current* `show_icon` value, not the schema default: if a user
|
|
5991
6070
|
// has already turned Show Icon off, a newly added item must start with its icon hidden
|
|
5992
6071
|
// too, not re-show one just because the item itself is brand new. See the comment on
|
|
@@ -5996,7 +6075,7 @@ var buildItemModel = (position, showIcon) => {
|
|
|
5996
6075
|
{
|
|
5997
6076
|
elType: ACCORDION_ITEM_TITLE_ELEMENT_TYPE,
|
|
5998
6077
|
id: generateElementId(),
|
|
5999
|
-
editor_settings: { title:
|
|
6078
|
+
editor_settings: { title: __69("Title", "elementor") },
|
|
6000
6079
|
elements: [
|
|
6001
6080
|
{
|
|
6002
6081
|
elType: "widget",
|
|
@@ -6016,7 +6095,7 @@ var buildItemModel = (position, showIcon) => {
|
|
|
6016
6095
|
{
|
|
6017
6096
|
elType: ACCORDION_ITEM_ICON_ELEMENT_TYPE,
|
|
6018
6097
|
id: generateElementId(),
|
|
6019
|
-
editor_settings: { title:
|
|
6098
|
+
editor_settings: { title: __69("Icon", "elementor") },
|
|
6020
6099
|
elements: [],
|
|
6021
6100
|
hydrateDefaultChildren: true
|
|
6022
6101
|
}
|
|
@@ -6025,7 +6104,7 @@ var buildItemModel = (position, showIcon) => {
|
|
|
6025
6104
|
{
|
|
6026
6105
|
elType: ACCORDION_ITEM_CONTENT_ELEMENT_TYPE,
|
|
6027
6106
|
id: generateElementId(),
|
|
6028
|
-
editor_settings: { title:
|
|
6107
|
+
editor_settings: { title: __69("Content", "elementor") },
|
|
6029
6108
|
elements: [],
|
|
6030
6109
|
hydrateDefaultChildren: true
|
|
6031
6110
|
}
|
|
@@ -6047,7 +6126,7 @@ var useActions = () => {
|
|
|
6047
6126
|
items3.forEach(() => {
|
|
6048
6127
|
const position = getNextItemNumber(titles);
|
|
6049
6128
|
createElements({
|
|
6050
|
-
title:
|
|
6129
|
+
title: __69("Accordion", "elementor"),
|
|
6051
6130
|
elements: [
|
|
6052
6131
|
{
|
|
6053
6132
|
container: accordion,
|
|
@@ -6068,13 +6147,13 @@ var useActions = () => {
|
|
|
6068
6147
|
};
|
|
6069
6148
|
const removeItem2 = ({ items: items3 }) => {
|
|
6070
6149
|
removeElements({
|
|
6071
|
-
title:
|
|
6150
|
+
title: __69("Accordion", "elementor"),
|
|
6072
6151
|
elementIds: items3.map(({ item }) => item.id)
|
|
6073
6152
|
});
|
|
6074
6153
|
};
|
|
6075
6154
|
const duplicateItem2 = ({ items: items3 }) => {
|
|
6076
6155
|
duplicateElements({
|
|
6077
|
-
title:
|
|
6156
|
+
title: __69("Duplicate Accordion Item", "elementor"),
|
|
6078
6157
|
elementIds: items3.map(({ item }) => item.id)
|
|
6079
6158
|
});
|
|
6080
6159
|
};
|
|
@@ -6089,7 +6168,7 @@ var useActions = () => {
|
|
|
6089
6168
|
throw new Error("Accordion item or container not found");
|
|
6090
6169
|
}
|
|
6091
6170
|
moveElements({
|
|
6092
|
-
title:
|
|
6171
|
+
title: __69("Reorder Accordion Items", "elementor"),
|
|
6093
6172
|
moves: [
|
|
6094
6173
|
{
|
|
6095
6174
|
element: movedElement,
|
|
@@ -6112,7 +6191,7 @@ import { useEffect as useEffect9, useRef as useRef20 } from "react";
|
|
|
6112
6191
|
import { getContainer as getContainer3, getElementSettings as getElementSettings2, updateElementSettings as updateElementSettings4 } from "@elementor/editor-elements";
|
|
6113
6192
|
import { booleanPropTypeUtil as booleanPropTypeUtil3 } from "@elementor/editor-props";
|
|
6114
6193
|
import { undoable as undoable5 } from "@elementor/editor-v1-adapters";
|
|
6115
|
-
import { __ as
|
|
6194
|
+
import { __ as __70 } from "@wordpress/i18n";
|
|
6116
6195
|
var ACCORDION_ITEM_HEADER_ELEMENT_TYPE2 = "e-accordion-item-header";
|
|
6117
6196
|
var cascadeShowIconToHeaders = undoable5(
|
|
6118
6197
|
{
|
|
@@ -6148,8 +6227,8 @@ var cascadeShowIconToHeaders = undoable5(
|
|
|
6148
6227
|
}
|
|
6149
6228
|
},
|
|
6150
6229
|
{
|
|
6151
|
-
title:
|
|
6152
|
-
subtitle:
|
|
6230
|
+
title: __70("Accordion", "elementor"),
|
|
6231
|
+
subtitle: __70("Show Icon", "elementor"),
|
|
6153
6232
|
// `undoable()`'s debounce only delays when the *history entry* is pushed onto the undo stack -
|
|
6154
6233
|
// the settings write itself (`do()`) still runs synchronously on every call. The root's own
|
|
6155
6234
|
// `show_icon` change goes through `SettingsField` -> `useUndoableUpdateElementProp`
|
|
@@ -6230,7 +6309,7 @@ var AccordionItemsControl = ({ label }) => {
|
|
|
6230
6309
|
});
|
|
6231
6310
|
}
|
|
6232
6311
|
};
|
|
6233
|
-
return /* @__PURE__ */
|
|
6312
|
+
return /* @__PURE__ */ React96.createElement(
|
|
6234
6313
|
Repeater,
|
|
6235
6314
|
{
|
|
6236
6315
|
showToggle: false,
|
|
@@ -6241,7 +6320,7 @@ var AccordionItemsControl = ({ label }) => {
|
|
|
6241
6320
|
adornment: () => null,
|
|
6242
6321
|
itemSettings: {
|
|
6243
6322
|
getId: ({ item }) => item.id,
|
|
6244
|
-
initialValues: { id: "", title:
|
|
6323
|
+
initialValues: { id: "", title: __71("Accordion Item", "elementor") },
|
|
6245
6324
|
Label: ItemLabel,
|
|
6246
6325
|
Content: ItemContent,
|
|
6247
6326
|
Icon: () => null
|
|
@@ -6250,18 +6329,18 @@ var AccordionItemsControl = ({ label }) => {
|
|
|
6250
6329
|
);
|
|
6251
6330
|
};
|
|
6252
6331
|
var ItemLabel = ({ value }) => {
|
|
6253
|
-
return /* @__PURE__ */
|
|
6332
|
+
return /* @__PURE__ */ React96.createElement(Stack15, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React96.createElement("span", null, value?.title));
|
|
6254
6333
|
};
|
|
6255
6334
|
var ItemContent = ({ value }) => {
|
|
6256
6335
|
if (!value.id) {
|
|
6257
6336
|
return null;
|
|
6258
6337
|
}
|
|
6259
|
-
return /* @__PURE__ */
|
|
6338
|
+
return /* @__PURE__ */ React96.createElement(Stack15, { p: 2, gap: 1.5 }, /* @__PURE__ */ React96.createElement(ItemNameControl, { elementId: value.id }));
|
|
6260
6339
|
};
|
|
6261
6340
|
var ItemNameControl = ({ elementId }) => {
|
|
6262
6341
|
const editorSettings = useElementEditorSettings2(elementId);
|
|
6263
6342
|
const label = editorSettings?.title ?? "";
|
|
6264
|
-
return /* @__PURE__ */
|
|
6343
|
+
return /* @__PURE__ */ React96.createElement(Stack15, { gap: 1 }, /* @__PURE__ */ React96.createElement(ControlFormLabel3, null, __71("Name", "elementor")), /* @__PURE__ */ React96.createElement(
|
|
6265
6344
|
TextField2,
|
|
6266
6345
|
{
|
|
6267
6346
|
size: "tiny",
|
|
@@ -6277,12 +6356,12 @@ var ItemNameControl = ({ elementId }) => {
|
|
|
6277
6356
|
};
|
|
6278
6357
|
|
|
6279
6358
|
// src/controls-registry/element-controls/list-items-control/list-items-control.tsx
|
|
6280
|
-
import * as
|
|
6359
|
+
import * as React97 from "react";
|
|
6281
6360
|
import { ControlFormLabel as ControlFormLabel4, Repeater as Repeater2 } from "@elementor/editor-controls";
|
|
6282
6361
|
import { updateElementEditorSettings as updateElementEditorSettings3, useElementChildren as useElementChildren2, useElementEditorSettings as useElementEditorSettings3 } from "@elementor/editor-elements";
|
|
6283
6362
|
import { booleanPropTypeUtil as booleanPropTypeUtil7 } from "@elementor/editor-props";
|
|
6284
6363
|
import { Stack as Stack16, TextField as TextField3 } from "@elementor/ui";
|
|
6285
|
-
import { __ as
|
|
6364
|
+
import { __ as __74 } from "@wordpress/i18n";
|
|
6286
6365
|
|
|
6287
6366
|
// src/controls-registry/element-controls/list-items-control/list-actions.ts
|
|
6288
6367
|
import {
|
|
@@ -6294,7 +6373,7 @@ import {
|
|
|
6294
6373
|
removeElements as removeElements2
|
|
6295
6374
|
} from "@elementor/editor-elements";
|
|
6296
6375
|
import { booleanPropTypeUtil as booleanPropTypeUtil5, escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil3 } from "@elementor/editor-props";
|
|
6297
|
-
import { __ as
|
|
6376
|
+
import { __ as __72 } from "@wordpress/i18n";
|
|
6298
6377
|
var LIST_ITEM_ELEMENT_TYPE = "e-list-item";
|
|
6299
6378
|
var LIST_ITEM_MARKER_ELEMENT_TYPE = "e-list-item-marker";
|
|
6300
6379
|
var LIST_ITEM_CONTENT_ELEMENT_TYPE = "e-list-item-content";
|
|
@@ -6331,7 +6410,7 @@ var buildItemModel2 = (position, showMarkers) => {
|
|
|
6331
6410
|
elType: LIST_ITEM_MARKER_ELEMENT_TYPE,
|
|
6332
6411
|
id: generateElementId2(),
|
|
6333
6412
|
editor_settings: {
|
|
6334
|
-
title:
|
|
6413
|
+
title: __72("Marker", "elementor")
|
|
6335
6414
|
},
|
|
6336
6415
|
elements: [
|
|
6337
6416
|
{
|
|
@@ -6350,7 +6429,7 @@ var buildItemModel2 = (position, showMarkers) => {
|
|
|
6350
6429
|
elType: LIST_ITEM_CONTENT_ELEMENT_TYPE,
|
|
6351
6430
|
id: generateElementId2(),
|
|
6352
6431
|
editor_settings: {
|
|
6353
|
-
title:
|
|
6432
|
+
title: __72("Content", "elementor")
|
|
6354
6433
|
},
|
|
6355
6434
|
elements: [
|
|
6356
6435
|
{
|
|
@@ -6370,7 +6449,7 @@ var buildItemModel2 = (position, showMarkers) => {
|
|
|
6370
6449
|
var duplicateItem = ({ items: items3 }) => {
|
|
6371
6450
|
duplicateElements2({
|
|
6372
6451
|
elementIds: items3.map(({ item }) => item.id),
|
|
6373
|
-
title:
|
|
6452
|
+
title: __72("Duplicate List Item", "elementor")
|
|
6374
6453
|
});
|
|
6375
6454
|
};
|
|
6376
6455
|
var moveItem = ({
|
|
@@ -6384,7 +6463,7 @@ var moveItem = ({
|
|
|
6384
6463
|
throw new Error("List item or list container not found");
|
|
6385
6464
|
}
|
|
6386
6465
|
moveElements2({
|
|
6387
|
-
title:
|
|
6466
|
+
title: __72("Reorder List Items", "elementor"),
|
|
6388
6467
|
moves: [
|
|
6389
6468
|
{
|
|
6390
6469
|
element: movedElement,
|
|
@@ -6396,7 +6475,7 @@ var moveItem = ({
|
|
|
6396
6475
|
};
|
|
6397
6476
|
var removeItem = ({ items: items3 }) => {
|
|
6398
6477
|
removeElements2({
|
|
6399
|
-
title:
|
|
6478
|
+
title: __72("List Items", "elementor"),
|
|
6400
6479
|
elementIds: items3.map(({ item }) => item.id)
|
|
6401
6480
|
});
|
|
6402
6481
|
};
|
|
@@ -6414,7 +6493,7 @@ var addItem = ({
|
|
|
6414
6493
|
items3.forEach(({ index }) => {
|
|
6415
6494
|
const position = getNextItemNumber2(titles);
|
|
6416
6495
|
createElements2({
|
|
6417
|
-
title:
|
|
6496
|
+
title: __72("List Items", "elementor"),
|
|
6418
6497
|
elements: [
|
|
6419
6498
|
{
|
|
6420
6499
|
container: listContainer,
|
|
@@ -6432,7 +6511,7 @@ import { useEffect as useEffect10, useRef as useRef21 } from "react";
|
|
|
6432
6511
|
import { getContainer as getContainer5, getElementSettings as getElementSettings3, updateElementSettings as updateElementSettings5 } from "@elementor/editor-elements";
|
|
6433
6512
|
import { booleanPropTypeUtil as booleanPropTypeUtil6 } from "@elementor/editor-props";
|
|
6434
6513
|
import { undoable as undoable6 } from "@elementor/editor-v1-adapters";
|
|
6435
|
-
import { __ as
|
|
6514
|
+
import { __ as __73 } from "@wordpress/i18n";
|
|
6436
6515
|
var cascadeShowMarkersToItems = undoable6(
|
|
6437
6516
|
{
|
|
6438
6517
|
do: ({ listId, showMarkers }) => {
|
|
@@ -6467,8 +6546,8 @@ var cascadeShowMarkersToItems = undoable6(
|
|
|
6467
6546
|
}
|
|
6468
6547
|
},
|
|
6469
6548
|
{
|
|
6470
|
-
title:
|
|
6471
|
-
subtitle:
|
|
6549
|
+
title: __73("List", "elementor"),
|
|
6550
|
+
subtitle: __73("Show Markers", "elementor"),
|
|
6472
6551
|
debounce: { wait: HISTORY_DEBOUNCE_WAIT }
|
|
6473
6552
|
}
|
|
6474
6553
|
);
|
|
@@ -6500,7 +6579,7 @@ var getDefaultListItemLabel = (index) => {
|
|
|
6500
6579
|
return `List item ${index + 1}`;
|
|
6501
6580
|
};
|
|
6502
6581
|
var ListItemsControl = ({ label }) => {
|
|
6503
|
-
return /* @__PURE__ */
|
|
6582
|
+
return /* @__PURE__ */ React97.createElement(ListItemsControlContent, { label });
|
|
6504
6583
|
};
|
|
6505
6584
|
var ListItemsControlContent = ({ label }) => {
|
|
6506
6585
|
const { element, settings } = useElement();
|
|
@@ -6540,7 +6619,7 @@ var ListItemsControlContent = ({ label }) => {
|
|
|
6540
6619
|
});
|
|
6541
6620
|
}
|
|
6542
6621
|
};
|
|
6543
|
-
return /* @__PURE__ */
|
|
6622
|
+
return /* @__PURE__ */ React97.createElement(
|
|
6544
6623
|
Repeater2,
|
|
6545
6624
|
{
|
|
6546
6625
|
showToggle: false,
|
|
@@ -6561,23 +6640,23 @@ var ListItemsControlContent = ({ label }) => {
|
|
|
6561
6640
|
};
|
|
6562
6641
|
var ItemLabel2 = ({ value, index }) => {
|
|
6563
6642
|
const fallbackLabel = value.title ?? getDefaultListItemLabel(index);
|
|
6564
|
-
return /* @__PURE__ */
|
|
6643
|
+
return /* @__PURE__ */ React97.createElement(Stack16, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, value.id ? /* @__PURE__ */ React97.createElement(ListItemRepeaterLabel, { elementId: value.id, fallbackLabel }) : /* @__PURE__ */ React97.createElement("span", null, fallbackLabel));
|
|
6565
6644
|
};
|
|
6566
6645
|
var ItemContent2 = ({ value }) => {
|
|
6567
6646
|
if (!value.id) {
|
|
6568
6647
|
return null;
|
|
6569
6648
|
}
|
|
6570
|
-
return /* @__PURE__ */
|
|
6649
|
+
return /* @__PURE__ */ React97.createElement(Stack16, { p: 2, gap: 1.5 }, /* @__PURE__ */ React97.createElement(ListItemLabelControl, { elementId: value.id, fallbackLabel: value.title ?? "" }));
|
|
6571
6650
|
};
|
|
6572
6651
|
var ListItemRepeaterLabel = ({ elementId, fallbackLabel }) => {
|
|
6573
6652
|
const editorSettings = useElementEditorSettings3(elementId);
|
|
6574
6653
|
const label = getEffectiveListItemLabel(editorSettings?.title, fallbackLabel);
|
|
6575
|
-
return /* @__PURE__ */
|
|
6654
|
+
return /* @__PURE__ */ React97.createElement("span", null, label);
|
|
6576
6655
|
};
|
|
6577
6656
|
var ListItemLabelControl = ({ elementId, fallbackLabel }) => {
|
|
6578
6657
|
const editorSettings = useElementEditorSettings3(elementId);
|
|
6579
6658
|
const label = getEffectiveListItemLabel(editorSettings?.title, fallbackLabel);
|
|
6580
|
-
return /* @__PURE__ */
|
|
6659
|
+
return /* @__PURE__ */ React97.createElement(Stack16, { gap: 1 }, /* @__PURE__ */ React97.createElement(ControlFormLabel4, null, __74("Item name", "elementor")), /* @__PURE__ */ React97.createElement(
|
|
6581
6660
|
TextField3,
|
|
6582
6661
|
{
|
|
6583
6662
|
size: "tiny",
|
|
@@ -6593,7 +6672,7 @@ var ListItemLabelControl = ({ elementId, fallbackLabel }) => {
|
|
|
6593
6672
|
};
|
|
6594
6673
|
|
|
6595
6674
|
// src/controls-registry/element-controls/tabs-control/tabs-control.tsx
|
|
6596
|
-
import * as
|
|
6675
|
+
import * as React98 from "react";
|
|
6597
6676
|
import {
|
|
6598
6677
|
ControlFormLabel as ControlFormLabel5,
|
|
6599
6678
|
Repeater as Repeater3,
|
|
@@ -6605,9 +6684,9 @@ import {
|
|
|
6605
6684
|
useElementEditorSettings as useElementEditorSettings4
|
|
6606
6685
|
} from "@elementor/editor-elements";
|
|
6607
6686
|
import { numberPropTypeUtil as numberPropTypeUtil4 } from "@elementor/editor-props";
|
|
6608
|
-
import { InfoCircleFilledIcon as
|
|
6609
|
-
import { Alert as
|
|
6610
|
-
import { __ as
|
|
6687
|
+
import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
|
|
6688
|
+
import { Alert as Alert5, Chip as Chip4, Infotip as Infotip3, Stack as Stack17, Switch as Switch2, TextField as TextField4, Typography as Typography5 } from "@elementor/ui";
|
|
6689
|
+
import { __ as __76 } from "@wordpress/i18n";
|
|
6611
6690
|
|
|
6612
6691
|
// src/controls-registry/element-controls/get-element-by-type.ts
|
|
6613
6692
|
import { getContainer as getContainer6 } from "@elementor/editor-elements";
|
|
@@ -6632,7 +6711,7 @@ import {
|
|
|
6632
6711
|
removeElements as removeElements3
|
|
6633
6712
|
} from "@elementor/editor-elements";
|
|
6634
6713
|
import { numberPropTypeUtil as numberPropTypeUtil3 } from "@elementor/editor-props";
|
|
6635
|
-
import { __ as
|
|
6714
|
+
import { __ as __75 } from "@wordpress/i18n";
|
|
6636
6715
|
var TAB_ELEMENT_TYPE = "e-tab";
|
|
6637
6716
|
var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
|
|
6638
6717
|
var useActions2 = () => {
|
|
@@ -6655,7 +6734,7 @@ var useActions2 = () => {
|
|
|
6655
6734
|
}
|
|
6656
6735
|
duplicateElements3({
|
|
6657
6736
|
elementIds: [tabId, tabContentId],
|
|
6658
|
-
title:
|
|
6737
|
+
title: __75("Duplicate Tab", "elementor"),
|
|
6659
6738
|
onDuplicateElements: () => {
|
|
6660
6739
|
if (newDefault !== defaultActiveTab) {
|
|
6661
6740
|
setDefaultActiveTab(newDefault, {}, { withHistory: false });
|
|
@@ -6692,7 +6771,7 @@ var useActions2 = () => {
|
|
|
6692
6771
|
defaultActiveTab
|
|
6693
6772
|
});
|
|
6694
6773
|
moveElements3({
|
|
6695
|
-
title:
|
|
6774
|
+
title: __75("Reorder Tabs", "elementor"),
|
|
6696
6775
|
moves: [
|
|
6697
6776
|
{
|
|
6698
6777
|
element: movedElement,
|
|
@@ -6726,7 +6805,7 @@ var useActions2 = () => {
|
|
|
6726
6805
|
defaultActiveTab
|
|
6727
6806
|
});
|
|
6728
6807
|
removeElements3({
|
|
6729
|
-
title:
|
|
6808
|
+
title: __75("Tabs", "elementor"),
|
|
6730
6809
|
elementIds: items3.flatMap(({ item, index }) => {
|
|
6731
6810
|
const tabId = item.id;
|
|
6732
6811
|
const tabContentContainer = getContainer7(tabContentAreaId);
|
|
@@ -6761,7 +6840,7 @@ var useActions2 = () => {
|
|
|
6761
6840
|
items3.forEach(({ index }) => {
|
|
6762
6841
|
const position = index + 1;
|
|
6763
6842
|
createElements3({
|
|
6764
|
-
title:
|
|
6843
|
+
title: __75("Tabs", "elementor"),
|
|
6765
6844
|
elements: [
|
|
6766
6845
|
{
|
|
6767
6846
|
container: tabContentArea,
|
|
@@ -6830,7 +6909,7 @@ var calculateDefaultOnDuplicate = ({
|
|
|
6830
6909
|
var TAB_MENU_ELEMENT_TYPE = "e-tabs-menu";
|
|
6831
6910
|
var TAB_CONTENT_AREA_ELEMENT_TYPE = "e-tabs-content-area";
|
|
6832
6911
|
var TabsControl = ({ label }) => {
|
|
6833
|
-
return /* @__PURE__ */
|
|
6912
|
+
return /* @__PURE__ */ React98.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: __76("Tabs", "elementor") }, /* @__PURE__ */ React98.createElement(TabsControlContent, { label }));
|
|
6834
6913
|
};
|
|
6835
6914
|
var TabsControlContent = ({ label }) => {
|
|
6836
6915
|
const { element } = useElement();
|
|
@@ -6874,7 +6953,7 @@ var TabsControlContent = ({ label }) => {
|
|
|
6874
6953
|
});
|
|
6875
6954
|
}
|
|
6876
6955
|
};
|
|
6877
|
-
return /* @__PURE__ */
|
|
6956
|
+
return /* @__PURE__ */ React98.createElement(
|
|
6878
6957
|
Repeater3,
|
|
6879
6958
|
{
|
|
6880
6959
|
showToggle: false,
|
|
@@ -6894,7 +6973,7 @@ var TabsControlContent = ({ label }) => {
|
|
|
6894
6973
|
};
|
|
6895
6974
|
var ItemLabel3 = ({ value, index }) => {
|
|
6896
6975
|
const elementTitle = value?.title;
|
|
6897
|
-
return /* @__PURE__ */
|
|
6976
|
+
return /* @__PURE__ */ React98.createElement(Stack17, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React98.createElement("span", null, elementTitle), /* @__PURE__ */ React98.createElement(ItemDefaultTab, { index }));
|
|
6898
6977
|
};
|
|
6899
6978
|
var ItemDefaultTab = ({ index }) => {
|
|
6900
6979
|
const { value: defaultItem } = useBoundProp8(numberPropTypeUtil4);
|
|
@@ -6902,18 +6981,18 @@ var ItemDefaultTab = ({ index }) => {
|
|
|
6902
6981
|
if (!isDefault) {
|
|
6903
6982
|
return null;
|
|
6904
6983
|
}
|
|
6905
|
-
return /* @__PURE__ */
|
|
6984
|
+
return /* @__PURE__ */ React98.createElement(Chip4, { size: "tiny", shape: "rounded", label: __76("Default", "elementor") });
|
|
6906
6985
|
};
|
|
6907
6986
|
var ItemContent3 = ({ value, index }) => {
|
|
6908
6987
|
if (!value.id) {
|
|
6909
6988
|
return null;
|
|
6910
6989
|
}
|
|
6911
|
-
return /* @__PURE__ */
|
|
6990
|
+
return /* @__PURE__ */ React98.createElement(Stack17, { p: 2, gap: 1.5 }, /* @__PURE__ */ React98.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React98.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: __76("Tabs", "elementor") }, /* @__PURE__ */ React98.createElement(DefaultTabControl, { tabIndex: index })));
|
|
6912
6991
|
};
|
|
6913
6992
|
var DefaultTabControl = ({ tabIndex }) => {
|
|
6914
6993
|
const { value, setValue } = useBoundProp8(numberPropTypeUtil4);
|
|
6915
6994
|
const isDefault = value === tabIndex;
|
|
6916
|
-
return /* @__PURE__ */
|
|
6995
|
+
return /* @__PURE__ */ React98.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React98.createElement(ControlFormLabel5, null, __76("Set as default tab", "elementor")), /* @__PURE__ */ React98.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React98.createElement(
|
|
6917
6996
|
Switch2,
|
|
6918
6997
|
{
|
|
6919
6998
|
size: "small",
|
|
@@ -6931,7 +7010,7 @@ var DefaultTabControl = ({ tabIndex }) => {
|
|
|
6931
7010
|
var TabLabelControl = ({ elementId }) => {
|
|
6932
7011
|
const editorSettings = useElementEditorSettings4(elementId);
|
|
6933
7012
|
const label = editorSettings?.title ?? "";
|
|
6934
|
-
return /* @__PURE__ */
|
|
7013
|
+
return /* @__PURE__ */ React98.createElement(Stack17, { gap: 1 }, /* @__PURE__ */ React98.createElement(ControlFormLabel5, null, __76("Tab name", "elementor")), /* @__PURE__ */ React98.createElement(
|
|
6935
7014
|
TextField4,
|
|
6936
7015
|
{
|
|
6937
7016
|
size: "tiny",
|
|
@@ -6952,22 +7031,22 @@ var ConditionalTooltip = ({
|
|
|
6952
7031
|
if (!showTooltip) {
|
|
6953
7032
|
return children;
|
|
6954
7033
|
}
|
|
6955
|
-
return /* @__PURE__ */
|
|
6956
|
-
|
|
7034
|
+
return /* @__PURE__ */ React98.createElement(
|
|
7035
|
+
Infotip3,
|
|
6957
7036
|
{
|
|
6958
7037
|
arrow: false,
|
|
6959
|
-
content: /* @__PURE__ */
|
|
6960
|
-
|
|
7038
|
+
content: /* @__PURE__ */ React98.createElement(
|
|
7039
|
+
Alert5,
|
|
6961
7040
|
{
|
|
6962
7041
|
color: "secondary",
|
|
6963
|
-
icon: /* @__PURE__ */
|
|
7042
|
+
icon: /* @__PURE__ */ React98.createElement(InfoCircleFilledIcon3, { fontSize: "tiny" }),
|
|
6964
7043
|
size: "small",
|
|
6965
7044
|
sx: { width: 288 }
|
|
6966
7045
|
},
|
|
6967
|
-
/* @__PURE__ */
|
|
7046
|
+
/* @__PURE__ */ React98.createElement(Typography5, { variant: "body2" }, __76("To change the default tab, simply set another tab as default.", "elementor"))
|
|
6968
7047
|
)
|
|
6969
7048
|
},
|
|
6970
|
-
/* @__PURE__ */
|
|
7049
|
+
/* @__PURE__ */ React98.createElement("span", null, children)
|
|
6971
7050
|
);
|
|
6972
7051
|
};
|
|
6973
7052
|
|
|
@@ -6995,7 +7074,7 @@ import {
|
|
|
6995
7074
|
import { controlActionsMenu as controlActionsMenu2 } from "@elementor/menus";
|
|
6996
7075
|
|
|
6997
7076
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6998
|
-
import * as
|
|
7077
|
+
import * as React99 from "react";
|
|
6999
7078
|
import { PropKeyProvider as PropKeyProvider4, PropProvider as PropProvider4, useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
|
|
7000
7079
|
import {
|
|
7001
7080
|
backgroundImageOverlayPropTypeUtil
|
|
@@ -7138,24 +7217,24 @@ var useDynamicTag = (tagName) => {
|
|
|
7138
7217
|
};
|
|
7139
7218
|
|
|
7140
7219
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
7141
|
-
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */
|
|
7220
|
+
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React99.createElement(DatabaseIcon, { fontSize: "tiny" });
|
|
7142
7221
|
var BackgroundControlDynamicTagLabel = ({ value }) => {
|
|
7143
7222
|
const context = useBoundProp10(backgroundImageOverlayPropTypeUtil);
|
|
7144
|
-
return /* @__PURE__ */
|
|
7223
|
+
return /* @__PURE__ */ React99.createElement(PropProvider4, { ...context, value: value.value }, /* @__PURE__ */ React99.createElement(PropKeyProvider4, { bind: "image" }, /* @__PURE__ */ React99.createElement(Wrapper2, { rawValue: value.value })));
|
|
7145
7224
|
};
|
|
7146
7225
|
var Wrapper2 = ({ rawValue }) => {
|
|
7147
7226
|
const { propType } = useBoundProp10();
|
|
7148
7227
|
const imageOverlayPropType = propType.prop_types["background-image-overlay"];
|
|
7149
|
-
return /* @__PURE__ */
|
|
7228
|
+
return /* @__PURE__ */ React99.createElement(PropProvider4, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React99.createElement(PropKeyProvider4, { bind: "src" }, /* @__PURE__ */ React99.createElement(Content, { rawValue: rawValue.image })));
|
|
7150
7229
|
};
|
|
7151
7230
|
var Content = ({ rawValue }) => {
|
|
7152
7231
|
const src = rawValue.value.src;
|
|
7153
7232
|
const dynamicTag = useDynamicTag(src.value.name || "");
|
|
7154
|
-
return /* @__PURE__ */
|
|
7233
|
+
return /* @__PURE__ */ React99.createElement(React99.Fragment, null, dynamicTag?.label);
|
|
7155
7234
|
};
|
|
7156
7235
|
|
|
7157
7236
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
7158
|
-
import * as
|
|
7237
|
+
import * as React103 from "react";
|
|
7159
7238
|
import {
|
|
7160
7239
|
ControlFormLabel as ControlFormLabel6,
|
|
7161
7240
|
PropKeyProvider as PropKeyProvider6,
|
|
@@ -7167,7 +7246,7 @@ import { DatabaseIcon as DatabaseIcon3, SettingsIcon, XIcon } from "@elementor/i
|
|
|
7167
7246
|
import {
|
|
7168
7247
|
bindPopover,
|
|
7169
7248
|
bindTrigger as bindTrigger2,
|
|
7170
|
-
Box as
|
|
7249
|
+
Box as Box9,
|
|
7171
7250
|
Divider as Divider8,
|
|
7172
7251
|
Grid as Grid8,
|
|
7173
7252
|
IconButton as IconButton2,
|
|
@@ -7180,7 +7259,7 @@ import {
|
|
|
7180
7259
|
usePopupState as usePopupState2,
|
|
7181
7260
|
useTabs as useTabs2
|
|
7182
7261
|
} from "@elementor/ui";
|
|
7183
|
-
import { __ as
|
|
7262
|
+
import { __ as __78 } from "@wordpress/i18n";
|
|
7184
7263
|
|
|
7185
7264
|
// src/hooks/use-persist-dynamic-value.ts
|
|
7186
7265
|
import { useSessionStorage as useSessionStorage5 } from "@elementor/session";
|
|
@@ -7191,11 +7270,11 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
7191
7270
|
};
|
|
7192
7271
|
|
|
7193
7272
|
// src/dynamics/dynamic-control.tsx
|
|
7194
|
-
import * as
|
|
7273
|
+
import * as React101 from "react";
|
|
7195
7274
|
import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
|
|
7196
7275
|
|
|
7197
7276
|
// src/dynamics/components/dynamic-conditional-control.tsx
|
|
7198
|
-
import * as
|
|
7277
|
+
import * as React100 from "react";
|
|
7199
7278
|
import { useMemo as useMemo13 } from "react";
|
|
7200
7279
|
import { isDependencyMet as isDependencyMet3 } from "@elementor/editor-props";
|
|
7201
7280
|
var DynamicConditionalControl = ({
|
|
@@ -7237,10 +7316,10 @@ var DynamicConditionalControl = ({
|
|
|
7237
7316
|
return { ...defaults, ...convertedSettings };
|
|
7238
7317
|
}, [defaults, convertedSettings]);
|
|
7239
7318
|
if (!propType?.dependencies?.terms.length) {
|
|
7240
|
-
return /* @__PURE__ */
|
|
7319
|
+
return /* @__PURE__ */ React100.createElement(React100.Fragment, null, children);
|
|
7241
7320
|
}
|
|
7242
7321
|
const isHidden = !isDependencyMet3(propType?.dependencies, effectiveSettings).isMet;
|
|
7243
|
-
return isHidden ? null : /* @__PURE__ */
|
|
7322
|
+
return isHidden ? null : /* @__PURE__ */ React100.createElement(React100.Fragment, null, children);
|
|
7244
7323
|
};
|
|
7245
7324
|
|
|
7246
7325
|
// src/dynamics/dynamic-control.tsx
|
|
@@ -7265,7 +7344,7 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
7265
7344
|
});
|
|
7266
7345
|
};
|
|
7267
7346
|
const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
|
|
7268
|
-
return /* @__PURE__ */
|
|
7347
|
+
return /* @__PURE__ */ React101.createElement(PropProvider5, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React101.createElement(PropKeyProvider5, { bind }, /* @__PURE__ */ React101.createElement(
|
|
7269
7348
|
DynamicConditionalControl,
|
|
7270
7349
|
{
|
|
7271
7350
|
propType: dynamicPropType,
|
|
@@ -7277,19 +7356,19 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
7277
7356
|
};
|
|
7278
7357
|
|
|
7279
7358
|
// src/dynamics/components/dynamic-selection.tsx
|
|
7280
|
-
import * as
|
|
7281
|
-
import { Fragment as
|
|
7359
|
+
import * as React102 from "react";
|
|
7360
|
+
import { Fragment as Fragment17, useEffect as useEffect11, useState as useState11 } from "react";
|
|
7282
7361
|
import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp12 } from "@elementor/editor-controls";
|
|
7283
7362
|
import { CtaButton, PopoverHeader, PopoverMenuList, SearchField, SectionPopoverBody } from "@elementor/editor-ui";
|
|
7284
7363
|
import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
|
|
7285
|
-
import { Divider as Divider7, Link as
|
|
7286
|
-
import { __ as
|
|
7364
|
+
import { Divider as Divider7, Link as Link3, Stack as Stack18, Typography as Typography6, useTheme as useTheme3 } from "@elementor/ui";
|
|
7365
|
+
import { __ as __77 } from "@wordpress/i18n";
|
|
7287
7366
|
var SIZE2 = "tiny";
|
|
7288
7367
|
var PROMO_TEXT_WIDTH = 170;
|
|
7289
7368
|
var PRO_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-modal/";
|
|
7290
7369
|
var RENEW_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-renew-modal/";
|
|
7291
7370
|
var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
7292
|
-
const [searchValue, setSearchValue] =
|
|
7371
|
+
const [searchValue, setSearchValue] = useState11("");
|
|
7293
7372
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
7294
7373
|
const theme = useTheme3();
|
|
7295
7374
|
const { value: anyValue } = useBoundProp12();
|
|
@@ -7330,19 +7409,19 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
7330
7409
|
]);
|
|
7331
7410
|
const getPopOverContent = () => {
|
|
7332
7411
|
if (hasNoDynamicTags) {
|
|
7333
|
-
return /* @__PURE__ */
|
|
7412
|
+
return /* @__PURE__ */ React102.createElement(NoDynamicTags, null);
|
|
7334
7413
|
}
|
|
7335
7414
|
if (expired) {
|
|
7336
|
-
return /* @__PURE__ */
|
|
7415
|
+
return /* @__PURE__ */ React102.createElement(ExpiredDynamicTags, null);
|
|
7337
7416
|
}
|
|
7338
|
-
return /* @__PURE__ */
|
|
7417
|
+
return /* @__PURE__ */ React102.createElement(Fragment17, null, /* @__PURE__ */ React102.createElement(
|
|
7339
7418
|
SearchField,
|
|
7340
7419
|
{
|
|
7341
7420
|
value: searchValue,
|
|
7342
7421
|
onSearch: handleSearch,
|
|
7343
|
-
placeholder:
|
|
7422
|
+
placeholder: __77("Search dynamic tags\u2026", "elementor")
|
|
7344
7423
|
}
|
|
7345
|
-
), /* @__PURE__ */
|
|
7424
|
+
), /* @__PURE__ */ React102.createElement(Divider7, null), /* @__PURE__ */ React102.createElement(
|
|
7346
7425
|
PopoverMenuList,
|
|
7347
7426
|
{
|
|
7348
7427
|
items: virtualizedItems,
|
|
@@ -7350,20 +7429,20 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
7350
7429
|
onClose: closePopover,
|
|
7351
7430
|
selectedValue: dynamicValue?.name,
|
|
7352
7431
|
itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
|
|
7353
|
-
noResultsComponent: /* @__PURE__ */
|
|
7432
|
+
noResultsComponent: /* @__PURE__ */ React102.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
|
|
7354
7433
|
}
|
|
7355
7434
|
));
|
|
7356
7435
|
};
|
|
7357
|
-
return /* @__PURE__ */
|
|
7436
|
+
return /* @__PURE__ */ React102.createElement(SectionPopoverBody, { "aria-label": __77("Dynamic tags", "elementor") }, /* @__PURE__ */ React102.createElement(
|
|
7358
7437
|
PopoverHeader,
|
|
7359
7438
|
{
|
|
7360
|
-
title:
|
|
7439
|
+
title: __77("Dynamic tags", "elementor"),
|
|
7361
7440
|
onClose: closePopover,
|
|
7362
|
-
icon: /* @__PURE__ */
|
|
7441
|
+
icon: /* @__PURE__ */ React102.createElement(DatabaseIcon2, { fontSize: SIZE2 })
|
|
7363
7442
|
}
|
|
7364
7443
|
), getPopOverContent());
|
|
7365
7444
|
};
|
|
7366
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
7445
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React102.createElement(
|
|
7367
7446
|
Stack18,
|
|
7368
7447
|
{
|
|
7369
7448
|
gap: 1,
|
|
@@ -7374,11 +7453,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React101.createEle
|
|
|
7374
7453
|
color: "text.secondary",
|
|
7375
7454
|
sx: { pb: 3.5 }
|
|
7376
7455
|
},
|
|
7377
|
-
/* @__PURE__ */
|
|
7378
|
-
/* @__PURE__ */
|
|
7379
|
-
/* @__PURE__ */
|
|
7456
|
+
/* @__PURE__ */ React102.createElement(DatabaseIcon2, { fontSize: "large" }),
|
|
7457
|
+
/* @__PURE__ */ React102.createElement(Typography6, { align: "center", variant: "subtitle2" }, __77("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React102.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
7458
|
+
/* @__PURE__ */ React102.createElement(Typography6, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __77("Try something else.", "elementor"), /* @__PURE__ */ React102.createElement(Link3, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __77("Clear & try again", "elementor")))
|
|
7380
7459
|
);
|
|
7381
|
-
var NoDynamicTags = () => /* @__PURE__ */
|
|
7460
|
+
var NoDynamicTags = () => /* @__PURE__ */ React102.createElement(React102.Fragment, null, /* @__PURE__ */ React102.createElement(Divider7, null), /* @__PURE__ */ React102.createElement(
|
|
7382
7461
|
Stack18,
|
|
7383
7462
|
{
|
|
7384
7463
|
gap: 1,
|
|
@@ -7389,10 +7468,10 @@ var NoDynamicTags = () => /* @__PURE__ */ React101.createElement(React101.Fragme
|
|
|
7389
7468
|
color: "text.secondary",
|
|
7390
7469
|
sx: { pb: 3.5 }
|
|
7391
7470
|
},
|
|
7392
|
-
/* @__PURE__ */
|
|
7393
|
-
/* @__PURE__ */
|
|
7394
|
-
/* @__PURE__ */
|
|
7395
|
-
/* @__PURE__ */
|
|
7471
|
+
/* @__PURE__ */ React102.createElement(DatabaseIcon2, { fontSize: "large" }),
|
|
7472
|
+
/* @__PURE__ */ React102.createElement(Typography6, { align: "center", variant: "subtitle2" }, __77("Streamline your workflow with dynamic tags", "elementor")),
|
|
7473
|
+
/* @__PURE__ */ React102.createElement(Typography6, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, __77("Upgrade now to display your content dynamically.", "elementor")),
|
|
7474
|
+
/* @__PURE__ */ React102.createElement(
|
|
7396
7475
|
CtaButton,
|
|
7397
7476
|
{
|
|
7398
7477
|
size: "small",
|
|
@@ -7401,7 +7480,7 @@ var NoDynamicTags = () => /* @__PURE__ */ React101.createElement(React101.Fragme
|
|
|
7401
7480
|
}
|
|
7402
7481
|
)
|
|
7403
7482
|
));
|
|
7404
|
-
var ExpiredDynamicTags = () => /* @__PURE__ */
|
|
7483
|
+
var ExpiredDynamicTags = () => /* @__PURE__ */ React102.createElement(React102.Fragment, null, /* @__PURE__ */ React102.createElement(Divider7, null), /* @__PURE__ */ React102.createElement(
|
|
7405
7484
|
Stack18,
|
|
7406
7485
|
{
|
|
7407
7486
|
gap: 1,
|
|
@@ -7412,16 +7491,16 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React101.createElement(React101.F
|
|
|
7412
7491
|
color: "text.secondary",
|
|
7413
7492
|
sx: { pb: 3.5 }
|
|
7414
7493
|
},
|
|
7415
|
-
/* @__PURE__ */
|
|
7416
|
-
/* @__PURE__ */
|
|
7417
|
-
/* @__PURE__ */
|
|
7418
|
-
/* @__PURE__ */
|
|
7494
|
+
/* @__PURE__ */ React102.createElement(DatabaseIcon2, { fontSize: "large" }),
|
|
7495
|
+
/* @__PURE__ */ React102.createElement(Typography6, { align: "center", variant: "subtitle2" }, __77("Unlock your Dynamic tags again", "elementor")),
|
|
7496
|
+
/* @__PURE__ */ React102.createElement(Typography6, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, __77("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")),
|
|
7497
|
+
/* @__PURE__ */ React102.createElement(
|
|
7419
7498
|
CtaButton,
|
|
7420
7499
|
{
|
|
7421
7500
|
size: "small",
|
|
7422
7501
|
href: RENEW_DYNAMIC_TAGS_URL,
|
|
7423
7502
|
onClick: () => trackUpgradePromotionClick({ target_name: "dynamic_tags" }),
|
|
7424
|
-
children:
|
|
7503
|
+
children: __77("Renew Now", "elementor")
|
|
7425
7504
|
}
|
|
7426
7505
|
)
|
|
7427
7506
|
));
|
|
@@ -7458,7 +7537,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
7458
7537
|
const { name: tagName = "" } = value;
|
|
7459
7538
|
const dynamicTag = useDynamicTag(tagName);
|
|
7460
7539
|
if (!isDynamicTagSupported(tagName) && OriginalControl) {
|
|
7461
|
-
return /* @__PURE__ */
|
|
7540
|
+
return /* @__PURE__ */ React103.createElement(PropProvider6, { propType: originalPropType, value: { [bind]: null }, setValue: setAnyValue }, /* @__PURE__ */ React103.createElement(PropKeyProvider6, { bind }, /* @__PURE__ */ React103.createElement(OriginalControl, { ...props })));
|
|
7462
7541
|
}
|
|
7463
7542
|
const removeDynamicTag = () => {
|
|
7464
7543
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -7466,25 +7545,25 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
7466
7545
|
if (!dynamicTag) {
|
|
7467
7546
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
7468
7547
|
}
|
|
7469
|
-
return /* @__PURE__ */
|
|
7548
|
+
return /* @__PURE__ */ React103.createElement(Box9, null, /* @__PURE__ */ React103.createElement(
|
|
7470
7549
|
Tag,
|
|
7471
7550
|
{
|
|
7472
7551
|
fullWidth: true,
|
|
7473
7552
|
showActionsOnHover: true,
|
|
7474
7553
|
label: dynamicTag.label,
|
|
7475
|
-
startIcon: /* @__PURE__ */
|
|
7554
|
+
startIcon: /* @__PURE__ */ React103.createElement(DatabaseIcon3, { fontSize: SIZE3 }),
|
|
7476
7555
|
...bindTrigger2(selectionPopoverState),
|
|
7477
|
-
actions: /* @__PURE__ */
|
|
7556
|
+
actions: /* @__PURE__ */ React103.createElement(React103.Fragment, null, /* @__PURE__ */ React103.createElement(DynamicSettingsPopover, { dynamicTag, disabled: readonly }), /* @__PURE__ */ React103.createElement(
|
|
7478
7557
|
IconButton2,
|
|
7479
7558
|
{
|
|
7480
7559
|
size: SIZE3,
|
|
7481
7560
|
onClick: removeDynamicTag,
|
|
7482
|
-
"aria-label":
|
|
7561
|
+
"aria-label": __78("Remove dynamic value", "elementor")
|
|
7483
7562
|
},
|
|
7484
|
-
/* @__PURE__ */
|
|
7563
|
+
/* @__PURE__ */ React103.createElement(XIcon, { fontSize: SIZE3 })
|
|
7485
7564
|
))
|
|
7486
7565
|
}
|
|
7487
|
-
), /* @__PURE__ */
|
|
7566
|
+
), /* @__PURE__ */ React103.createElement(
|
|
7488
7567
|
Popover,
|
|
7489
7568
|
{
|
|
7490
7569
|
disablePortal: true,
|
|
@@ -7496,7 +7575,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
7496
7575
|
},
|
|
7497
7576
|
...bindPopover(selectionPopoverState)
|
|
7498
7577
|
},
|
|
7499
|
-
/* @__PURE__ */
|
|
7578
|
+
/* @__PURE__ */ React103.createElement(SectionPopoverBody2, { "aria-label": __78("Dynamic tags", "elementor") }, /* @__PURE__ */ React103.createElement(DynamicSelection, { close: selectionPopoverState.close, expired: readonly }))
|
|
7500
7579
|
));
|
|
7501
7580
|
};
|
|
7502
7581
|
var DynamicSettingsPopover = ({
|
|
@@ -7508,16 +7587,16 @@ var DynamicSettingsPopover = ({
|
|
|
7508
7587
|
if (!hasDynamicSettings) {
|
|
7509
7588
|
return null;
|
|
7510
7589
|
}
|
|
7511
|
-
return /* @__PURE__ */
|
|
7590
|
+
return /* @__PURE__ */ React103.createElement(React103.Fragment, null, /* @__PURE__ */ React103.createElement(
|
|
7512
7591
|
IconButton2,
|
|
7513
7592
|
{
|
|
7514
7593
|
size: SIZE3,
|
|
7515
7594
|
disabled,
|
|
7516
7595
|
...!disabled && bindTrigger2(popupState),
|
|
7517
|
-
"aria-label":
|
|
7596
|
+
"aria-label": __78("Dynamic settings", "elementor")
|
|
7518
7597
|
},
|
|
7519
|
-
/* @__PURE__ */
|
|
7520
|
-
), /* @__PURE__ */
|
|
7598
|
+
/* @__PURE__ */ React103.createElement(SettingsIcon, { fontSize: SIZE3 })
|
|
7599
|
+
), /* @__PURE__ */ React103.createElement(
|
|
7521
7600
|
Popover,
|
|
7522
7601
|
{
|
|
7523
7602
|
disablePortal: true,
|
|
@@ -7529,14 +7608,14 @@ var DynamicSettingsPopover = ({
|
|
|
7529
7608
|
},
|
|
7530
7609
|
...bindPopover(popupState)
|
|
7531
7610
|
},
|
|
7532
|
-
/* @__PURE__ */
|
|
7611
|
+
/* @__PURE__ */ React103.createElement(SectionPopoverBody2, { "aria-label": __78("Dynamic settings", "elementor") }, /* @__PURE__ */ React103.createElement(
|
|
7533
7612
|
PopoverHeader2,
|
|
7534
7613
|
{
|
|
7535
7614
|
title: dynamicTag.label,
|
|
7536
7615
|
onClose: popupState.close,
|
|
7537
|
-
icon: /* @__PURE__ */
|
|
7616
|
+
icon: /* @__PURE__ */ React103.createElement(DatabaseIcon3, { fontSize: SIZE3 })
|
|
7538
7617
|
}
|
|
7539
|
-
), /* @__PURE__ */
|
|
7618
|
+
), /* @__PURE__ */ React103.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
|
|
7540
7619
|
));
|
|
7541
7620
|
};
|
|
7542
7621
|
var DynamicSettings = ({ controls, tagName }) => {
|
|
@@ -7547,9 +7626,9 @@ var DynamicSettings = ({ controls, tagName }) => {
|
|
|
7547
7626
|
}
|
|
7548
7627
|
if (tagsWithoutTabs.includes(tagName)) {
|
|
7549
7628
|
const singleTab = tabs[0];
|
|
7550
|
-
return /* @__PURE__ */
|
|
7629
|
+
return /* @__PURE__ */ React103.createElement(React103.Fragment, null, /* @__PURE__ */ React103.createElement(Divider8, null), /* @__PURE__ */ React103.createElement(ControlsItemsStack, { items: singleTab.value.items }));
|
|
7551
7630
|
}
|
|
7552
|
-
return /* @__PURE__ */
|
|
7631
|
+
return /* @__PURE__ */ React103.createElement(React103.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React103.createElement(Tabs2, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React103.createElement(
|
|
7553
7632
|
Tab2,
|
|
7554
7633
|
{
|
|
7555
7634
|
key: index,
|
|
@@ -7557,15 +7636,15 @@ var DynamicSettings = ({ controls, tagName }) => {
|
|
|
7557
7636
|
sx: { px: 1, py: 0.5 },
|
|
7558
7637
|
...getTabProps(index)
|
|
7559
7638
|
}
|
|
7560
|
-
))), /* @__PURE__ */
|
|
7561
|
-
return /* @__PURE__ */
|
|
7639
|
+
))), /* @__PURE__ */ React103.createElement(Divider8, null), tabs.map(({ value }, index) => {
|
|
7640
|
+
return /* @__PURE__ */ React103.createElement(
|
|
7562
7641
|
TabPanel2,
|
|
7563
7642
|
{
|
|
7564
7643
|
key: index,
|
|
7565
7644
|
sx: { flexGrow: 1, py: 0, overflowY: "auto" },
|
|
7566
7645
|
...getTabPanelProps(index)
|
|
7567
7646
|
},
|
|
7568
|
-
/* @__PURE__ */
|
|
7647
|
+
/* @__PURE__ */ React103.createElement(ControlsItemsStack, { items: value.items })
|
|
7569
7648
|
);
|
|
7570
7649
|
}));
|
|
7571
7650
|
};
|
|
@@ -7607,11 +7686,11 @@ var Control2 = ({ control }) => {
|
|
|
7607
7686
|
display: "grid",
|
|
7608
7687
|
gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
|
|
7609
7688
|
} : {};
|
|
7610
|
-
return /* @__PURE__ */
|
|
7689
|
+
return /* @__PURE__ */ React103.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React103.createElement(Grid8, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React103.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React103.createElement(ControlFormLabel6, null, control.label)) : null, /* @__PURE__ */ React103.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React103.createElement(Control, { type: control.type, props: controlProps }))));
|
|
7611
7690
|
};
|
|
7612
7691
|
function ControlsItemsStack({ items: items3 }) {
|
|
7613
|
-
return /* @__PURE__ */
|
|
7614
|
-
(item) => item.type === "control" ? /* @__PURE__ */
|
|
7692
|
+
return /* @__PURE__ */ React103.createElement(Stack19, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
|
|
7693
|
+
(item) => item.type === "control" ? /* @__PURE__ */ React103.createElement(Control2, { key: item.value.bind, control: item.value }) : null
|
|
7615
7694
|
));
|
|
7616
7695
|
}
|
|
7617
7696
|
|
|
@@ -7668,18 +7747,18 @@ function getDynamicValue(name, settings, renderPostId) {
|
|
|
7668
7747
|
}
|
|
7669
7748
|
|
|
7670
7749
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
7671
|
-
import * as
|
|
7750
|
+
import * as React104 from "react";
|
|
7672
7751
|
import { useBoundProp as useBoundProp14 } from "@elementor/editor-controls";
|
|
7673
7752
|
import { DatabaseIcon as DatabaseIcon4 } from "@elementor/icons";
|
|
7674
|
-
import { __ as
|
|
7753
|
+
import { __ as __79 } from "@wordpress/i18n";
|
|
7675
7754
|
var usePropDynamicAction = () => {
|
|
7676
7755
|
const { propType } = useBoundProp14();
|
|
7677
7756
|
const visible = !!propType && supportsDynamic(propType);
|
|
7678
7757
|
return {
|
|
7679
7758
|
visible,
|
|
7680
7759
|
icon: DatabaseIcon4,
|
|
7681
|
-
title:
|
|
7682
|
-
content: ({ close }) => /* @__PURE__ */
|
|
7760
|
+
title: __79("Dynamic tags", "elementor"),
|
|
7761
|
+
content: ({ close }) => /* @__PURE__ */ React104.createElement(DynamicSelection, { close })
|
|
7683
7762
|
};
|
|
7684
7763
|
};
|
|
7685
7764
|
|
|
@@ -7714,7 +7793,7 @@ import { useBoundProp as useBoundProp15 } from "@elementor/editor-controls";
|
|
|
7714
7793
|
import { hasVariable as hasVariable2 } from "@elementor/editor-variables";
|
|
7715
7794
|
import { BrushBigIcon } from "@elementor/icons";
|
|
7716
7795
|
import { controlActionsMenu as controlActionsMenu3 } from "@elementor/menus";
|
|
7717
|
-
import { __ as
|
|
7796
|
+
import { __ as __80 } from "@wordpress/i18n";
|
|
7718
7797
|
|
|
7719
7798
|
// src/utils/is-equal.ts
|
|
7720
7799
|
function isEqual(a, b) {
|
|
@@ -7790,22 +7869,22 @@ function useResetStyleValueProps() {
|
|
|
7790
7869
|
const visible = calculateVisibility();
|
|
7791
7870
|
return {
|
|
7792
7871
|
visible,
|
|
7793
|
-
title:
|
|
7872
|
+
title: __80("Clear", "elementor"),
|
|
7794
7873
|
icon: BrushBigIcon,
|
|
7795
7874
|
onClick: () => resetValue()
|
|
7796
7875
|
};
|
|
7797
7876
|
}
|
|
7798
7877
|
|
|
7799
7878
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
7800
|
-
import * as
|
|
7879
|
+
import * as React110 from "react";
|
|
7801
7880
|
import { useBoundProp as useBoundProp16 } from "@elementor/editor-controls";
|
|
7802
7881
|
import { isEmpty as isEmpty3 } from "@elementor/editor-props";
|
|
7803
7882
|
import { ELEMENTS_BASE_STYLES_PROVIDER_KEY as ELEMENTS_BASE_STYLES_PROVIDER_KEY4 } from "@elementor/editor-styles-repository";
|
|
7804
|
-
import { __ as
|
|
7883
|
+
import { __ as __84 } from "@wordpress/i18n";
|
|
7805
7884
|
|
|
7806
7885
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
7807
|
-
import * as
|
|
7808
|
-
import { useMemo as useMemo14, useRef as useRef22, useState as
|
|
7886
|
+
import * as React109 from "react";
|
|
7887
|
+
import { useMemo as useMemo14, useRef as useRef22, useState as useState13 } from "react";
|
|
7809
7888
|
import {
|
|
7810
7889
|
createPropsResolver as createPropsResolver2,
|
|
7811
7890
|
stylesInheritanceTransformersRegistry
|
|
@@ -7813,29 +7892,29 @@ import {
|
|
|
7813
7892
|
import { PopoverHeader as PopoverHeader3, useSectionWidth as useSectionWidth2 } from "@elementor/editor-ui";
|
|
7814
7893
|
import {
|
|
7815
7894
|
Backdrop,
|
|
7816
|
-
Box as
|
|
7895
|
+
Box as Box11,
|
|
7817
7896
|
Card,
|
|
7818
7897
|
CardContent,
|
|
7819
7898
|
ClickAwayListener,
|
|
7820
7899
|
IconButton as IconButton3,
|
|
7821
|
-
Infotip as
|
|
7900
|
+
Infotip as Infotip4,
|
|
7822
7901
|
Stack as Stack20,
|
|
7823
7902
|
Tooltip as Tooltip7
|
|
7824
7903
|
} from "@elementor/ui";
|
|
7825
|
-
import { __ as
|
|
7904
|
+
import { __ as __83 } from "@wordpress/i18n";
|
|
7826
7905
|
|
|
7827
7906
|
// src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
|
|
7828
|
-
import { isValidElement, useEffect as useEffect12, useState as
|
|
7907
|
+
import { isValidElement, useEffect as useEffect12, useState as useState12 } from "react";
|
|
7829
7908
|
import { UnknownStyleStateError } from "@elementor/editor-canvas";
|
|
7830
7909
|
import {
|
|
7831
7910
|
isClassState as isClassState2,
|
|
7832
7911
|
isPseudoState
|
|
7833
7912
|
} from "@elementor/editor-styles";
|
|
7834
7913
|
import { ELEMENTS_BASE_STYLES_PROVIDER_KEY as ELEMENTS_BASE_STYLES_PROVIDER_KEY2 } from "@elementor/editor-styles-repository";
|
|
7835
|
-
import { __ as
|
|
7914
|
+
import { __ as __81 } from "@wordpress/i18n";
|
|
7836
7915
|
var MAXIMUM_ITEMS = 2;
|
|
7837
7916
|
var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
7838
|
-
const [items3, setItems] =
|
|
7917
|
+
const [items3, setItems] = useState12([]);
|
|
7839
7918
|
useEffect12(() => {
|
|
7840
7919
|
(async () => {
|
|
7841
7920
|
const normalizedItems = await Promise.all(
|
|
@@ -7843,7 +7922,7 @@ var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
|
7843
7922
|
);
|
|
7844
7923
|
const validItems = normalizedItems.map((item) => ({
|
|
7845
7924
|
...item,
|
|
7846
|
-
displayLabel: ELEMENTS_BASE_STYLES_PROVIDER_KEY2 !== item.provider ? item.displayLabel :
|
|
7925
|
+
displayLabel: ELEMENTS_BASE_STYLES_PROVIDER_KEY2 !== item.provider ? item.displayLabel : __81("Base", "elementor")
|
|
7847
7926
|
})).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
|
|
7848
7927
|
setItems(validItems);
|
|
7849
7928
|
})();
|
|
@@ -7900,7 +7979,7 @@ var getTransformedValue = async (item, bind, resolve) => {
|
|
|
7900
7979
|
};
|
|
7901
7980
|
|
|
7902
7981
|
// src/styles-inheritance/components/infotip/breakpoint-icon.tsx
|
|
7903
|
-
import * as
|
|
7982
|
+
import * as React105 from "react";
|
|
7904
7983
|
import { useBreakpoints as useBreakpoints2 } from "@elementor/editor-responsive";
|
|
7905
7984
|
import {
|
|
7906
7985
|
DesktopIcon,
|
|
@@ -7931,20 +8010,20 @@ var BreakpointIcon = ({ breakpoint }) => {
|
|
|
7931
8010
|
return null;
|
|
7932
8011
|
}
|
|
7933
8012
|
const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
|
|
7934
|
-
return /* @__PURE__ */
|
|
8013
|
+
return /* @__PURE__ */ React105.createElement(Tooltip4, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React105.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
|
|
7935
8014
|
};
|
|
7936
8015
|
|
|
7937
8016
|
// src/styles-inheritance/components/infotip/label-chip.tsx
|
|
7938
|
-
import * as
|
|
8017
|
+
import * as React106 from "react";
|
|
7939
8018
|
import { ELEMENTS_BASE_STYLES_PROVIDER_KEY as ELEMENTS_BASE_STYLES_PROVIDER_KEY3 } from "@elementor/editor-styles-repository";
|
|
7940
8019
|
import { InfoCircleIcon as InfoCircleIcon2 } from "@elementor/icons";
|
|
7941
8020
|
import { Chip as Chip5, Tooltip as Tooltip5 } from "@elementor/ui";
|
|
7942
|
-
import { __ as
|
|
8021
|
+
import { __ as __82 } from "@wordpress/i18n";
|
|
7943
8022
|
var SIZE5 = "tiny";
|
|
7944
8023
|
var LabelChip = ({ displayLabel, provider }) => {
|
|
7945
8024
|
const isBaseStyle = provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY3;
|
|
7946
|
-
const chipIcon = isBaseStyle ? /* @__PURE__ */
|
|
7947
|
-
return /* @__PURE__ */
|
|
8025
|
+
const chipIcon = isBaseStyle ? /* @__PURE__ */ React106.createElement(Tooltip5, { title: __82("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React106.createElement(InfoCircleIcon2, { fontSize: SIZE5 })) : void 0;
|
|
8026
|
+
return /* @__PURE__ */ React106.createElement(
|
|
7948
8027
|
Chip5,
|
|
7949
8028
|
{
|
|
7950
8029
|
label: displayLabel,
|
|
@@ -7970,10 +8049,10 @@ var LabelChip = ({ displayLabel, provider }) => {
|
|
|
7970
8049
|
};
|
|
7971
8050
|
|
|
7972
8051
|
// src/styles-inheritance/components/infotip/value-component.tsx
|
|
7973
|
-
import * as
|
|
8052
|
+
import * as React107 from "react";
|
|
7974
8053
|
import { Tooltip as Tooltip6, Typography as Typography7 } from "@elementor/ui";
|
|
7975
8054
|
var ValueComponent = ({ index, value }) => {
|
|
7976
|
-
return /* @__PURE__ */
|
|
8055
|
+
return /* @__PURE__ */ React107.createElement(Tooltip6, { title: value, placement: "top" }, /* @__PURE__ */ React107.createElement(
|
|
7977
8056
|
Typography7,
|
|
7978
8057
|
{
|
|
7979
8058
|
variant: "caption",
|
|
@@ -7995,9 +8074,9 @@ var ValueComponent = ({ index, value }) => {
|
|
|
7995
8074
|
};
|
|
7996
8075
|
|
|
7997
8076
|
// src/styles-inheritance/components/infotip/action-icons.tsx
|
|
7998
|
-
import * as
|
|
7999
|
-
import { Box as
|
|
8000
|
-
var ActionIcons = () => /* @__PURE__ */
|
|
8077
|
+
import * as React108 from "react";
|
|
8078
|
+
import { Box as Box10 } from "@elementor/ui";
|
|
8079
|
+
var ActionIcons = () => /* @__PURE__ */ React108.createElement(Box10, { display: "flex", gap: 0.5, alignItems: "center" });
|
|
8001
8080
|
|
|
8002
8081
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
8003
8082
|
var SECTION_PADDING_INLINE = 32;
|
|
@@ -8010,7 +8089,7 @@ var StylesInheritanceInfotip = ({
|
|
|
8010
8089
|
children,
|
|
8011
8090
|
isDisabled
|
|
8012
8091
|
}) => {
|
|
8013
|
-
const [showInfotip, setShowInfotip] =
|
|
8092
|
+
const [showInfotip, setShowInfotip] = useState13(false);
|
|
8014
8093
|
const triggerRef = useRef22(null);
|
|
8015
8094
|
const toggleInfotip = () => {
|
|
8016
8095
|
if (isDisabled) {
|
|
@@ -8033,7 +8112,7 @@ var StylesInheritanceInfotip = ({
|
|
|
8033
8112
|
});
|
|
8034
8113
|
}, [key, propType]);
|
|
8035
8114
|
const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
|
|
8036
|
-
const infotipContent = /* @__PURE__ */
|
|
8115
|
+
const infotipContent = /* @__PURE__ */ React109.createElement(ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React109.createElement(
|
|
8037
8116
|
Card,
|
|
8038
8117
|
{
|
|
8039
8118
|
elevation: 0,
|
|
@@ -8046,8 +8125,8 @@ var StylesInheritanceInfotip = ({
|
|
|
8046
8125
|
flexDirection: "column"
|
|
8047
8126
|
}
|
|
8048
8127
|
},
|
|
8049
|
-
/* @__PURE__ */
|
|
8050
|
-
|
|
8128
|
+
/* @__PURE__ */ React109.createElement(
|
|
8129
|
+
Box11,
|
|
8051
8130
|
{
|
|
8052
8131
|
sx: {
|
|
8053
8132
|
position: "sticky",
|
|
@@ -8056,9 +8135,9 @@ var StylesInheritanceInfotip = ({
|
|
|
8056
8135
|
backgroundColor: "background.paper"
|
|
8057
8136
|
}
|
|
8058
8137
|
},
|
|
8059
|
-
/* @__PURE__ */
|
|
8138
|
+
/* @__PURE__ */ React109.createElement(PopoverHeader3, { title: __83("Style origin", "elementor"), onClose: closeInfotip })
|
|
8060
8139
|
),
|
|
8061
|
-
/* @__PURE__ */
|
|
8140
|
+
/* @__PURE__ */ React109.createElement(
|
|
8062
8141
|
CardContent,
|
|
8063
8142
|
{
|
|
8064
8143
|
sx: {
|
|
@@ -8072,39 +8151,39 @@ var StylesInheritanceInfotip = ({
|
|
|
8072
8151
|
}
|
|
8073
8152
|
}
|
|
8074
8153
|
},
|
|
8075
|
-
/* @__PURE__ */
|
|
8076
|
-
return /* @__PURE__ */
|
|
8077
|
-
|
|
8154
|
+
/* @__PURE__ */ React109.createElement(Stack20, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
|
|
8155
|
+
return /* @__PURE__ */ React109.createElement(
|
|
8156
|
+
Box11,
|
|
8078
8157
|
{
|
|
8079
8158
|
key: item.id,
|
|
8080
8159
|
display: "flex",
|
|
8081
8160
|
gap: 0.5,
|
|
8082
8161
|
role: "listitem",
|
|
8083
|
-
"aria-label":
|
|
8162
|
+
"aria-label": __83("Inheritance item: %s", "elementor").replace(
|
|
8084
8163
|
"%s",
|
|
8085
8164
|
item.displayLabel
|
|
8086
8165
|
)
|
|
8087
8166
|
},
|
|
8088
|
-
/* @__PURE__ */
|
|
8089
|
-
|
|
8167
|
+
/* @__PURE__ */ React109.createElement(
|
|
8168
|
+
Box11,
|
|
8090
8169
|
{
|
|
8091
8170
|
display: "flex",
|
|
8092
8171
|
gap: 0.5,
|
|
8093
8172
|
sx: { flexWrap: "wrap", width: "100%", alignItems: "flex-start" }
|
|
8094
8173
|
},
|
|
8095
|
-
/* @__PURE__ */
|
|
8096
|
-
/* @__PURE__ */
|
|
8097
|
-
/* @__PURE__ */
|
|
8174
|
+
/* @__PURE__ */ React109.createElement(BreakpointIcon, { breakpoint: item.breakpoint }),
|
|
8175
|
+
/* @__PURE__ */ React109.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }),
|
|
8176
|
+
/* @__PURE__ */ React109.createElement(ValueComponent, { index, value: item.value })
|
|
8098
8177
|
),
|
|
8099
|
-
/* @__PURE__ */
|
|
8178
|
+
/* @__PURE__ */ React109.createElement(ActionIcons, null)
|
|
8100
8179
|
);
|
|
8101
8180
|
}))
|
|
8102
8181
|
)
|
|
8103
8182
|
));
|
|
8104
8183
|
if (isDisabled) {
|
|
8105
|
-
return /* @__PURE__ */
|
|
8184
|
+
return /* @__PURE__ */ React109.createElement(Box11, { sx: { display: "inline-flex" } }, children);
|
|
8106
8185
|
}
|
|
8107
|
-
return /* @__PURE__ */
|
|
8186
|
+
return /* @__PURE__ */ React109.createElement(Box11, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React109.createElement(
|
|
8108
8187
|
TooltipOrInfotip,
|
|
8109
8188
|
{
|
|
8110
8189
|
showInfotip,
|
|
@@ -8112,7 +8191,7 @@ var StylesInheritanceInfotip = ({
|
|
|
8112
8191
|
infotipContent,
|
|
8113
8192
|
isDisabled
|
|
8114
8193
|
},
|
|
8115
|
-
/* @__PURE__ */
|
|
8194
|
+
/* @__PURE__ */ React109.createElement(
|
|
8116
8195
|
IconButton3,
|
|
8117
8196
|
{
|
|
8118
8197
|
onClick: toggleInfotip,
|
|
@@ -8132,10 +8211,10 @@ function TooltipOrInfotip({
|
|
|
8132
8211
|
isDisabled
|
|
8133
8212
|
}) {
|
|
8134
8213
|
if (isDisabled) {
|
|
8135
|
-
return /* @__PURE__ */
|
|
8214
|
+
return /* @__PURE__ */ React109.createElement(Box11, { sx: { display: "inline-flex" } }, children);
|
|
8136
8215
|
}
|
|
8137
8216
|
if (showInfotip) {
|
|
8138
|
-
return /* @__PURE__ */
|
|
8217
|
+
return /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement(
|
|
8139
8218
|
Backdrop,
|
|
8140
8219
|
{
|
|
8141
8220
|
open: showInfotip,
|
|
@@ -8145,8 +8224,8 @@ function TooltipOrInfotip({
|
|
|
8145
8224
|
zIndex: (theme) => theme.zIndex.modal - 1
|
|
8146
8225
|
}
|
|
8147
8226
|
}
|
|
8148
|
-
), /* @__PURE__ */
|
|
8149
|
-
|
|
8227
|
+
), /* @__PURE__ */ React109.createElement(
|
|
8228
|
+
Infotip4,
|
|
8150
8229
|
{
|
|
8151
8230
|
placement: "top-end",
|
|
8152
8231
|
content: infotipContent,
|
|
@@ -8157,7 +8236,7 @@ function TooltipOrInfotip({
|
|
|
8157
8236
|
children
|
|
8158
8237
|
));
|
|
8159
8238
|
}
|
|
8160
|
-
return /* @__PURE__ */
|
|
8239
|
+
return /* @__PURE__ */ React109.createElement(Tooltip7, { title: __83("Style origin", "elementor"), placement: "top" }, children);
|
|
8161
8240
|
}
|
|
8162
8241
|
|
|
8163
8242
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
@@ -8170,7 +8249,7 @@ var StylesInheritanceIndicator = ({
|
|
|
8170
8249
|
if (!path || !inheritanceChain.length) {
|
|
8171
8250
|
return null;
|
|
8172
8251
|
}
|
|
8173
|
-
return /* @__PURE__ */
|
|
8252
|
+
return /* @__PURE__ */ React110.createElement(Indicator, { inheritanceChain, path, propType });
|
|
8174
8253
|
};
|
|
8175
8254
|
var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
8176
8255
|
const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
|
|
@@ -8186,7 +8265,7 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
8186
8265
|
getColor: isFinalValue && currentStyleProvider ? getStylesProviderThemeColor(currentStyleProvider.getKey()) : void 0,
|
|
8187
8266
|
isOverridden: hasValue && !isFinalValue ? true : void 0
|
|
8188
8267
|
};
|
|
8189
|
-
return /* @__PURE__ */
|
|
8268
|
+
return /* @__PURE__ */ React110.createElement(
|
|
8190
8269
|
StylesInheritanceInfotip,
|
|
8191
8270
|
{
|
|
8192
8271
|
inheritanceChain,
|
|
@@ -8195,17 +8274,17 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
8195
8274
|
label,
|
|
8196
8275
|
isDisabled
|
|
8197
8276
|
},
|
|
8198
|
-
/* @__PURE__ */
|
|
8277
|
+
/* @__PURE__ */ React110.createElement(StyleIndicator, { ...styleIndicatorProps })
|
|
8199
8278
|
);
|
|
8200
8279
|
};
|
|
8201
8280
|
var getLabel = ({ isFinalValue, hasValue }) => {
|
|
8202
8281
|
if (isFinalValue) {
|
|
8203
|
-
return
|
|
8282
|
+
return __84("This is the final value", "elementor");
|
|
8204
8283
|
}
|
|
8205
8284
|
if (hasValue) {
|
|
8206
|
-
return
|
|
8285
|
+
return __84("This value is overridden by another style", "elementor");
|
|
8207
8286
|
}
|
|
8208
|
-
return
|
|
8287
|
+
return __84("This has value from another style", "elementor");
|
|
8209
8288
|
};
|
|
8210
8289
|
|
|
8211
8290
|
// src/styles-inheritance/init-styles-inheritance-transformers.ts
|
|
@@ -8230,7 +8309,7 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
|
|
|
8230
8309
|
]);
|
|
8231
8310
|
|
|
8232
8311
|
// src/styles-inheritance/transformers/array-transformer.tsx
|
|
8233
|
-
import * as
|
|
8312
|
+
import * as React111 from "react";
|
|
8234
8313
|
import { createTransformer as createTransformer2 } from "@elementor/editor-canvas";
|
|
8235
8314
|
var arrayTransformer = createTransformer2((values) => {
|
|
8236
8315
|
if (!values || values.length === 0) {
|
|
@@ -8240,16 +8319,16 @@ var arrayTransformer = createTransformer2((values) => {
|
|
|
8240
8319
|
if (allStrings) {
|
|
8241
8320
|
return values.join(" ");
|
|
8242
8321
|
}
|
|
8243
|
-
return /* @__PURE__ */
|
|
8322
|
+
return /* @__PURE__ */ React111.createElement(React111.Fragment, null, values.map((item, index) => /* @__PURE__ */ React111.createElement(React111.Fragment, { key: index }, index > 0 && " ", item)));
|
|
8244
8323
|
});
|
|
8245
8324
|
|
|
8246
8325
|
// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
|
|
8247
|
-
import * as
|
|
8326
|
+
import * as React112 from "react";
|
|
8248
8327
|
import { createTransformer as createTransformer3 } from "@elementor/editor-canvas";
|
|
8249
8328
|
import { Stack as Stack21, styled as styled7, UnstableColorIndicator } from "@elementor/ui";
|
|
8250
|
-
var backgroundColorOverlayTransformer = createTransformer3((value) => /* @__PURE__ */
|
|
8329
|
+
var backgroundColorOverlayTransformer = createTransformer3((value) => /* @__PURE__ */ React112.createElement(Stack21, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React112.createElement(ItemLabelColor, { value })));
|
|
8251
8330
|
var ItemLabelColor = ({ value: { color } }) => {
|
|
8252
|
-
return /* @__PURE__ */
|
|
8331
|
+
return /* @__PURE__ */ React112.createElement("span", null, color);
|
|
8253
8332
|
};
|
|
8254
8333
|
var StyledUnstableColorIndicator = styled7(UnstableColorIndicator)(({ theme }) => ({
|
|
8255
8334
|
width: "1em",
|
|
@@ -8260,20 +8339,20 @@ var StyledUnstableColorIndicator = styled7(UnstableColorIndicator)(({ theme }) =
|
|
|
8260
8339
|
}));
|
|
8261
8340
|
|
|
8262
8341
|
// src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
|
|
8263
|
-
import * as
|
|
8342
|
+
import * as React113 from "react";
|
|
8264
8343
|
import { createTransformer as createTransformer4 } from "@elementor/editor-canvas";
|
|
8265
8344
|
import { Stack as Stack22 } from "@elementor/ui";
|
|
8266
|
-
import { __ as
|
|
8267
|
-
var backgroundGradientOverlayTransformer = createTransformer4((value) => /* @__PURE__ */
|
|
8345
|
+
import { __ as __85 } from "@wordpress/i18n";
|
|
8346
|
+
var backgroundGradientOverlayTransformer = createTransformer4((value) => /* @__PURE__ */ React113.createElement(Stack22, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React113.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React113.createElement(ItemLabelGradient, { value })));
|
|
8268
8347
|
var ItemIconGradient = ({ value }) => {
|
|
8269
8348
|
const gradient = getGradientValue(value);
|
|
8270
|
-
return /* @__PURE__ */
|
|
8349
|
+
return /* @__PURE__ */ React113.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
8271
8350
|
};
|
|
8272
8351
|
var ItemLabelGradient = ({ value }) => {
|
|
8273
8352
|
if (value.type === "linear") {
|
|
8274
|
-
return /* @__PURE__ */
|
|
8353
|
+
return /* @__PURE__ */ React113.createElement("span", null, __85("Linear gradient", "elementor"));
|
|
8275
8354
|
}
|
|
8276
|
-
return /* @__PURE__ */
|
|
8355
|
+
return /* @__PURE__ */ React113.createElement("span", null, __85("Radial gradient", "elementor"));
|
|
8277
8356
|
};
|
|
8278
8357
|
var getGradientValue = (gradient) => {
|
|
8279
8358
|
const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
|
|
@@ -8284,15 +8363,15 @@ var getGradientValue = (gradient) => {
|
|
|
8284
8363
|
};
|
|
8285
8364
|
|
|
8286
8365
|
// src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
|
|
8287
|
-
import * as
|
|
8366
|
+
import * as React114 from "react";
|
|
8288
8367
|
import { createTransformer as createTransformer5 } from "@elementor/editor-canvas";
|
|
8289
8368
|
import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
|
|
8290
8369
|
import { CardMedia, Stack as Stack23 } from "@elementor/ui";
|
|
8291
8370
|
import { useWpMediaAttachment } from "@elementor/wp-media";
|
|
8292
|
-
var backgroundImageOverlayTransformer = createTransformer5((value) => /* @__PURE__ */
|
|
8371
|
+
var backgroundImageOverlayTransformer = createTransformer5((value) => /* @__PURE__ */ React114.createElement(Stack23, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React114.createElement(ItemIconImage, { value }), /* @__PURE__ */ React114.createElement(ItemLabelImage, { value })));
|
|
8293
8372
|
var ItemIconImage = ({ value }) => {
|
|
8294
8373
|
const { imageUrl } = useImage(value);
|
|
8295
|
-
return /* @__PURE__ */
|
|
8374
|
+
return /* @__PURE__ */ React114.createElement(
|
|
8296
8375
|
CardMedia,
|
|
8297
8376
|
{
|
|
8298
8377
|
image: imageUrl,
|
|
@@ -8308,7 +8387,7 @@ var ItemIconImage = ({ value }) => {
|
|
|
8308
8387
|
};
|
|
8309
8388
|
var ItemLabelImage = ({ value }) => {
|
|
8310
8389
|
const { imageTitle } = useImage(value);
|
|
8311
|
-
return /* @__PURE__ */
|
|
8390
|
+
return /* @__PURE__ */ React114.createElement(EllipsisWithTooltip2, { title: imageTitle }, /* @__PURE__ */ React114.createElement("span", null, imageTitle));
|
|
8312
8391
|
};
|
|
8313
8392
|
var useImage = (image) => {
|
|
8314
8393
|
let imageTitle, imageUrl = null;
|
|
@@ -8333,7 +8412,7 @@ var getFileExtensionFromFilename = (filename) => {
|
|
|
8333
8412
|
};
|
|
8334
8413
|
|
|
8335
8414
|
// src/styles-inheritance/transformers/box-shadow-transformer.tsx
|
|
8336
|
-
import * as
|
|
8415
|
+
import * as React115 from "react";
|
|
8337
8416
|
import { createTransformer as createTransformer6 } from "@elementor/editor-canvas";
|
|
8338
8417
|
var boxShadowTransformer = createTransformer6((value) => {
|
|
8339
8418
|
if (!value) {
|
|
@@ -8343,11 +8422,11 @@ var boxShadowTransformer = createTransformer6((value) => {
|
|
|
8343
8422
|
const colorValue = color || "#000000";
|
|
8344
8423
|
const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
|
|
8345
8424
|
const positionValue = position || "outset";
|
|
8346
|
-
return /* @__PURE__ */
|
|
8425
|
+
return /* @__PURE__ */ React115.createElement(React115.Fragment, null, colorValue, " ", positionValue, ", ", sizes);
|
|
8347
8426
|
});
|
|
8348
8427
|
|
|
8349
8428
|
// src/styles-inheritance/transformers/color-transformer.tsx
|
|
8350
|
-
import * as
|
|
8429
|
+
import * as React116 from "react";
|
|
8351
8430
|
import { createTransformer as createTransformer7 } from "@elementor/editor-canvas";
|
|
8352
8431
|
import { Stack as Stack24, styled as styled8, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
|
|
8353
8432
|
function isValidCSSColor(value) {
|
|
@@ -8367,7 +8446,7 @@ var colorTransformer = createTransformer7((value) => {
|
|
|
8367
8446
|
if (!isValidCSSColor(value)) {
|
|
8368
8447
|
return value;
|
|
8369
8448
|
}
|
|
8370
|
-
return /* @__PURE__ */
|
|
8449
|
+
return /* @__PURE__ */ React116.createElement(Stack24, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React116.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React116.createElement("span", null, value));
|
|
8371
8450
|
});
|
|
8372
8451
|
|
|
8373
8452
|
// src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
|