@elementor/editor-editing-panel 4.2.0-897 → 4.2.0-899
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.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +514 -503
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +440 -430
- package/dist/index.mjs.map +1 -1
- package/package.json +24 -24
- package/src/components/style-sections/layout-section/grid-outline-field.tsx +18 -0
- package/src/components/style-sections/layout-section/layout-section.tsx +2 -0
- package/src/index.ts +1 -0
package/dist/index.mjs
CHANGED
|
@@ -1885,7 +1885,7 @@ var hasInheritedCustomCss = (style, meta) => {
|
|
|
1885
1885
|
};
|
|
1886
1886
|
|
|
1887
1887
|
// src/components/editing-panel.tsx
|
|
1888
|
-
import * as
|
|
1888
|
+
import * as React89 from "react";
|
|
1889
1889
|
import {
|
|
1890
1890
|
ControlActionsProvider,
|
|
1891
1891
|
ControlReplacementsProvider,
|
|
@@ -1899,7 +1899,7 @@ import { createLocation as createLocation4 } from "@elementor/locations";
|
|
|
1899
1899
|
import { controlActionsMenu } from "@elementor/menus";
|
|
1900
1900
|
import { SessionStorageProvider as SessionStorageProvider3 } from "@elementor/session";
|
|
1901
1901
|
import { ErrorBoundary } from "@elementor/ui";
|
|
1902
|
-
import { __ as
|
|
1902
|
+
import { __ as __63 } from "@wordpress/i18n";
|
|
1903
1903
|
|
|
1904
1904
|
// src/editing-panel-replacement-registry.tsx
|
|
1905
1905
|
var registry = /* @__PURE__ */ new Map();
|
|
@@ -1922,11 +1922,11 @@ function EditorPanelErrorFallback() {
|
|
|
1922
1922
|
|
|
1923
1923
|
// src/components/editing-panel-tabs.tsx
|
|
1924
1924
|
import { Fragment as Fragment9 } from "react";
|
|
1925
|
-
import * as
|
|
1925
|
+
import * as React88 from "react";
|
|
1926
1926
|
import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
|
|
1927
1927
|
import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
|
|
1928
1928
|
import { Divider as Divider6, Stack as Stack13, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
|
|
1929
|
-
import { __ as
|
|
1929
|
+
import { __ as __62 } from "@wordpress/i18n";
|
|
1930
1930
|
|
|
1931
1931
|
// src/contexts/scroll-context.tsx
|
|
1932
1932
|
import * as React15 from "react";
|
|
@@ -2698,14 +2698,14 @@ function isControlHiddenByDependencies(control, propsSchema, settings) {
|
|
|
2698
2698
|
}
|
|
2699
2699
|
|
|
2700
2700
|
// src/components/style-tab.tsx
|
|
2701
|
-
import * as
|
|
2701
|
+
import * as React87 from "react";
|
|
2702
2702
|
import { useState as useState9 } from "react";
|
|
2703
2703
|
import { CLASSES_PROP_KEY } from "@elementor/editor-props";
|
|
2704
2704
|
import { useActiveBreakpoint } from "@elementor/editor-responsive";
|
|
2705
2705
|
import { createLocation as createLocation3 } from "@elementor/locations";
|
|
2706
2706
|
import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
|
|
2707
2707
|
import { Box as Box6, Divider as Divider5, Stack as Stack12 } from "@elementor/ui";
|
|
2708
|
-
import { __ as
|
|
2708
|
+
import { __ as __61 } from "@wordpress/i18n";
|
|
2709
2709
|
|
|
2710
2710
|
// src/contexts/styles-inheritance-context.tsx
|
|
2711
2711
|
import * as React25 from "react";
|
|
@@ -3532,11 +3532,11 @@ var EffectsSection = () => {
|
|
|
3532
3532
|
};
|
|
3533
3533
|
|
|
3534
3534
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
3535
|
-
import * as
|
|
3535
|
+
import * as React57 from "react";
|
|
3536
3536
|
import { ControlFormLabel as ControlFormLabel2 } from "@elementor/editor-controls";
|
|
3537
3537
|
import { useParentElement } from "@elementor/editor-elements";
|
|
3538
3538
|
import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
|
|
3539
|
-
import { __ as
|
|
3539
|
+
import { __ as __35 } from "@wordpress/i18n";
|
|
3540
3540
|
|
|
3541
3541
|
// src/hooks/use-computed-style.ts
|
|
3542
3542
|
import { __privateUseListenTo as useListenTo, commandEndEvent, windowEvent } from "@elementor/editor-v1-adapters";
|
|
@@ -4336,12 +4336,21 @@ var options4 = [
|
|
|
4336
4336
|
];
|
|
4337
4337
|
var GridJustifyItemsField = () => /* @__PURE__ */ React51.createElement(StylesField, { bind: "justify-items", propDisplayName: JUSTIFY_ITEMS_LABEL }, /* @__PURE__ */ React51.createElement(UiProviders, null, /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label: JUSTIFY_ITEMS_LABEL }, /* @__PURE__ */ React51.createElement(ToggleControl8, { options: options4 }))));
|
|
4338
4338
|
|
|
4339
|
-
// src/components/style-sections/layout-section/grid-
|
|
4339
|
+
// src/components/style-sections/layout-section/grid-outline-field.tsx
|
|
4340
4340
|
import * as React52 from "react";
|
|
4341
|
+
import { SwitchControl as SwitchControl2 } from "@elementor/editor-controls";
|
|
4342
|
+
import { __ as __30 } from "@wordpress/i18n";
|
|
4343
|
+
var GRID_OUTLINE_LABEL = __30("Show Grid Outline", "elementor");
|
|
4344
|
+
var GridOutlineField = () => {
|
|
4345
|
+
return /* @__PURE__ */ React52.createElement(SettingsField, { bind: "grid_outline", propDisplayName: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React52.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React52.createElement(SwitchControl2, null)));
|
|
4346
|
+
};
|
|
4347
|
+
|
|
4348
|
+
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4349
|
+
import * as React53 from "react";
|
|
4341
4350
|
import { useRef as useRef8 } from "react";
|
|
4342
4351
|
import { ControlActions, createControl, SizeComponent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
|
|
4343
4352
|
import { Grid as Grid4 } from "@elementor/ui";
|
|
4344
|
-
import { __ as
|
|
4353
|
+
import { __ as __31 } from "@wordpress/i18n";
|
|
4345
4354
|
|
|
4346
4355
|
// src/components/style-sections/layout-section/utils/grid-track-value.ts
|
|
4347
4356
|
import {
|
|
@@ -4438,8 +4447,8 @@ var unitOf = (v, fallback = FR) => {
|
|
|
4438
4447
|
};
|
|
4439
4448
|
|
|
4440
4449
|
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4441
|
-
var SizeFieldWrapper = ({ children }) => /* @__PURE__ */
|
|
4442
|
-
var GridTrackSizeInput = createControl((props) => /* @__PURE__ */
|
|
4450
|
+
var SizeFieldWrapper = ({ children }) => /* @__PURE__ */ React53.createElement(ControlActions, null, children);
|
|
4451
|
+
var GridTrackSizeInput = createControl((props) => /* @__PURE__ */ React53.createElement(
|
|
4443
4452
|
SizeComponent,
|
|
4444
4453
|
{
|
|
4445
4454
|
units: UNITS,
|
|
@@ -4471,7 +4480,7 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4471
4480
|
}
|
|
4472
4481
|
setValue(toPropValue(next));
|
|
4473
4482
|
};
|
|
4474
|
-
return /* @__PURE__ */
|
|
4483
|
+
return /* @__PURE__ */ React53.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React53.createElement("div", { ref: anchorRef }, /* @__PURE__ */ React53.createElement(
|
|
4475
4484
|
GridTrackSizeInput,
|
|
4476
4485
|
{
|
|
4477
4486
|
value: displayValue,
|
|
@@ -4481,22 +4490,22 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4481
4490
|
}
|
|
4482
4491
|
)));
|
|
4483
4492
|
};
|
|
4484
|
-
var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */
|
|
4485
|
-
var GridSizeFields = () => /* @__PURE__ */
|
|
4493
|
+
var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React53.createElement(UiProviders, null, /* @__PURE__ */ React53.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React53.createElement(GridTrackFieldContent, { cssProp, label })));
|
|
4494
|
+
var GridSizeFields = () => /* @__PURE__ */ React53.createElement(Grid4, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(GridTrackField, { cssProp: "grid-template-columns", label: __31("Columns", "elementor") })), /* @__PURE__ */ React53.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(GridTrackField, { cssProp: "grid-template-rows", label: __31("Rows", "elementor") })));
|
|
4486
4495
|
|
|
4487
4496
|
// src/components/style-sections/layout-section/grid-span-field.tsx
|
|
4488
|
-
import * as
|
|
4497
|
+
import * as React54 from "react";
|
|
4489
4498
|
import { GridSpanControl } from "@elementor/editor-controls";
|
|
4490
4499
|
import { Grid as Grid5 } from "@elementor/ui";
|
|
4491
|
-
import { __ as
|
|
4500
|
+
import { __ as __32 } from "@wordpress/i18n";
|
|
4492
4501
|
var GridSpanFieldContent = ({ label }) => {
|
|
4493
|
-
return /* @__PURE__ */
|
|
4502
|
+
return /* @__PURE__ */ React54.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React54.createElement(GridSpanControl, null));
|
|
4494
4503
|
};
|
|
4495
|
-
var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */
|
|
4496
|
-
var GridSpanFields = () => /* @__PURE__ */
|
|
4504
|
+
var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */ React54.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React54.createElement(UiProviders, null, /* @__PURE__ */ React54.createElement(GridSpanFieldContent, { cssProp, label })));
|
|
4505
|
+
var GridSpanFields = () => /* @__PURE__ */ React54.createElement(Grid5, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(GridSpanField, { cssProp: "grid-column", label: __32("Grid column", "elementor") })), /* @__PURE__ */ React54.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(GridSpanField, { cssProp: "grid-row", label: __32("Grid row", "elementor") })));
|
|
4497
4506
|
|
|
4498
4507
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
4499
|
-
import * as
|
|
4508
|
+
import * as React55 from "react";
|
|
4500
4509
|
import { ToggleControl as ToggleControl9 } from "@elementor/editor-controls";
|
|
4501
4510
|
import {
|
|
4502
4511
|
JustifyBottomIcon as JustifyBottomIcon3,
|
|
@@ -4507,8 +4516,8 @@ import {
|
|
|
4507
4516
|
JustifyTopIcon as JustifyTopIcon3
|
|
4508
4517
|
} from "@elementor/icons";
|
|
4509
4518
|
import { withDirection as withDirection9 } from "@elementor/ui";
|
|
4510
|
-
import { __ as
|
|
4511
|
-
var JUSTIFY_CONTENT_LABEL =
|
|
4519
|
+
import { __ as __33 } from "@wordpress/i18n";
|
|
4520
|
+
var JUSTIFY_CONTENT_LABEL = __33("Justify content", "elementor");
|
|
4512
4521
|
var StartIcon6 = withDirection9(JustifyTopIcon3);
|
|
4513
4522
|
var EndIcon5 = withDirection9(JustifyBottomIcon3);
|
|
4514
4523
|
var iconProps4 = {
|
|
@@ -4518,76 +4527,76 @@ var iconProps4 = {
|
|
|
4518
4527
|
var options5 = [
|
|
4519
4528
|
{
|
|
4520
4529
|
value: "flex-start",
|
|
4521
|
-
label:
|
|
4522
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4530
|
+
label: __33("Start", "elementor"),
|
|
4531
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: StartIcon6, size, ...iconProps4 }),
|
|
4523
4532
|
showTooltip: true
|
|
4524
4533
|
},
|
|
4525
4534
|
{
|
|
4526
4535
|
value: "center",
|
|
4527
|
-
label:
|
|
4528
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4536
|
+
label: __33("Center", "elementor"),
|
|
4537
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: CenterIcon5, size, ...iconProps4 }),
|
|
4529
4538
|
showTooltip: true
|
|
4530
4539
|
},
|
|
4531
4540
|
{
|
|
4532
4541
|
value: "flex-end",
|
|
4533
|
-
label:
|
|
4534
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4542
|
+
label: __33("End", "elementor"),
|
|
4543
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: EndIcon5, size, ...iconProps4 }),
|
|
4535
4544
|
showTooltip: true
|
|
4536
4545
|
},
|
|
4537
4546
|
{
|
|
4538
4547
|
value: "space-between",
|
|
4539
|
-
label:
|
|
4540
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4548
|
+
label: __33("Space between", "elementor"),
|
|
4549
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: BetweenIcon2, size, ...iconProps4 }),
|
|
4541
4550
|
showTooltip: true
|
|
4542
4551
|
},
|
|
4543
4552
|
{
|
|
4544
4553
|
value: "space-around",
|
|
4545
|
-
label:
|
|
4546
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4554
|
+
label: __33("Space around", "elementor"),
|
|
4555
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: AroundIcon2, size, ...iconProps4 }),
|
|
4547
4556
|
showTooltip: true
|
|
4548
4557
|
},
|
|
4549
4558
|
{
|
|
4550
4559
|
value: "space-evenly",
|
|
4551
|
-
label:
|
|
4552
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4560
|
+
label: __33("Space evenly", "elementor"),
|
|
4561
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: EvenlyIcon2, size, ...iconProps4 }),
|
|
4553
4562
|
showTooltip: true
|
|
4554
4563
|
}
|
|
4555
4564
|
];
|
|
4556
|
-
var JustifyContentField = () => /* @__PURE__ */
|
|
4565
|
+
var JustifyContentField = () => /* @__PURE__ */ React55.createElement(StylesField, { bind: "justify-content", propDisplayName: JUSTIFY_CONTENT_LABEL }, /* @__PURE__ */ React55.createElement(UiProviders, null, /* @__PURE__ */ React55.createElement(StylesFieldLayout, { label: JUSTIFY_CONTENT_LABEL, direction: "column" }, /* @__PURE__ */ React55.createElement(ToggleControl9, { options: options5, fullWidth: true }))));
|
|
4557
4566
|
|
|
4558
4567
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
4559
|
-
import * as
|
|
4568
|
+
import * as React56 from "react";
|
|
4560
4569
|
import { ToggleControl as ToggleControl10 } from "@elementor/editor-controls";
|
|
4561
4570
|
import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
|
|
4562
|
-
import { __ as
|
|
4563
|
-
var FLEX_WRAP_LABEL =
|
|
4571
|
+
import { __ as __34 } from "@wordpress/i18n";
|
|
4572
|
+
var FLEX_WRAP_LABEL = __34("Wrap", "elementor");
|
|
4564
4573
|
var options6 = [
|
|
4565
4574
|
{
|
|
4566
4575
|
value: "nowrap",
|
|
4567
|
-
label:
|
|
4568
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4576
|
+
label: __34("No wrap", "elementor"),
|
|
4577
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(ArrowRightIcon3, { fontSize: size }),
|
|
4569
4578
|
showTooltip: true
|
|
4570
4579
|
},
|
|
4571
4580
|
{
|
|
4572
4581
|
value: "wrap",
|
|
4573
|
-
label:
|
|
4574
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4582
|
+
label: __34("Wrap", "elementor"),
|
|
4583
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(ArrowBackIcon, { fontSize: size }),
|
|
4575
4584
|
showTooltip: true
|
|
4576
4585
|
},
|
|
4577
4586
|
{
|
|
4578
4587
|
value: "wrap-reverse",
|
|
4579
|
-
label:
|
|
4580
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4588
|
+
label: __34("Reversed wrap", "elementor"),
|
|
4589
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(ArrowForwardIcon, { fontSize: size }),
|
|
4581
4590
|
showTooltip: true
|
|
4582
4591
|
}
|
|
4583
4592
|
];
|
|
4584
4593
|
var WrapField = () => {
|
|
4585
|
-
return /* @__PURE__ */
|
|
4594
|
+
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "flex-wrap", propDisplayName: FLEX_WRAP_LABEL }, /* @__PURE__ */ React56.createElement(UiProviders, null, /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: FLEX_WRAP_LABEL }, /* @__PURE__ */ React56.createElement(ToggleControl10, { options: options6 }))));
|
|
4586
4595
|
};
|
|
4587
4596
|
|
|
4588
4597
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
4589
|
-
var DISPLAY_LABEL2 =
|
|
4590
|
-
var FLEX_WRAP_LABEL2 =
|
|
4598
|
+
var DISPLAY_LABEL2 = __35("Display", "elementor");
|
|
4599
|
+
var FLEX_WRAP_LABEL2 = __35("Flex wrap", "elementor");
|
|
4591
4600
|
var DEFAULT_PARENT_FLOW_DIRECTION = "row";
|
|
4592
4601
|
var LayoutSection = () => {
|
|
4593
4602
|
const { value: display } = useStylesField("display", {
|
|
@@ -4609,17 +4618,17 @@ var LayoutSection = () => {
|
|
|
4609
4618
|
}
|
|
4610
4619
|
return DEFAULT_PARENT_FLOW_DIRECTION;
|
|
4611
4620
|
};
|
|
4612
|
-
return /* @__PURE__ */
|
|
4621
|
+
return /* @__PURE__ */ React57.createElement(SectionContent, null, /* @__PURE__ */ React57.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React57.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React57.createElement(FlexChildFields, { parentStyleDirection: getParentStyleDirection() }), isGridExperimentActive && isDisplayGrid && /* @__PURE__ */ React57.createElement(GridFields, null), isGridExperimentActive && "grid" === parentStyle?.display && /* @__PURE__ */ React57.createElement(GridChildFields, { parentStyleDirection: getParentStyleDirection() }));
|
|
4613
4622
|
};
|
|
4614
4623
|
var FlexFields = () => {
|
|
4615
4624
|
const { value: flexWrap } = useStylesField("flex-wrap", {
|
|
4616
4625
|
history: { propDisplayName: FLEX_WRAP_LABEL2 }
|
|
4617
4626
|
});
|
|
4618
|
-
return /* @__PURE__ */
|
|
4627
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(FlexDirectionField, null), /* @__PURE__ */ React57.createElement(JustifyContentField, null), /* @__PURE__ */ React57.createElement(AlignItemsField, null), /* @__PURE__ */ React57.createElement(PanelDivider, null), /* @__PURE__ */ React57.createElement(GapControlField, null), /* @__PURE__ */ React57.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React57.createElement(AlignContentField, null));
|
|
4619
4628
|
};
|
|
4620
|
-
var GridFields = () => /* @__PURE__ */
|
|
4621
|
-
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
4622
|
-
var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
4629
|
+
var GridFields = () => /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(GridOutlineField, null), /* @__PURE__ */ React57.createElement(GridSizeFields, null), /* @__PURE__ */ React57.createElement(GridAutoFlowField, null), /* @__PURE__ */ React57.createElement(PanelDivider, null), /* @__PURE__ */ React57.createElement(GapControlField, null), /* @__PURE__ */ React57.createElement(PanelDivider, null), /* @__PURE__ */ React57.createElement(GridJustifyItemsField, null), /* @__PURE__ */ React57.createElement(AlignItemsField, null));
|
|
4630
|
+
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(PanelDivider, null), /* @__PURE__ */ React57.createElement(ControlFormLabel2, null, __35("Flex child", "elementor")), /* @__PURE__ */ React57.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React57.createElement(FlexOrderField, null), /* @__PURE__ */ React57.createElement(FlexSizeField, null));
|
|
4631
|
+
var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(PanelDivider, null), /* @__PURE__ */ React57.createElement(ControlFormLabel2, null, __35("Grid child", "elementor")), /* @__PURE__ */ React57.createElement(GridSpanFields, null), /* @__PURE__ */ React57.createElement(AlignSelfGridChild, { parentStyleDirection }), /* @__PURE__ */ React57.createElement(FlexOrderField, null));
|
|
4623
4632
|
var shouldDisplayFlexFields = (display, local) => {
|
|
4624
4633
|
const value = display?.value ?? local?.value;
|
|
4625
4634
|
if (!value) {
|
|
@@ -4629,40 +4638,40 @@ var shouldDisplayFlexFields = (display, local) => {
|
|
|
4629
4638
|
};
|
|
4630
4639
|
|
|
4631
4640
|
// src/components/style-sections/position-section/position-section.tsx
|
|
4632
|
-
import * as
|
|
4641
|
+
import * as React62 from "react";
|
|
4633
4642
|
import { useEffect as useEffect7, useRef as useRef11 } from "react";
|
|
4634
4643
|
import { useSessionStorage as useSessionStorage4 } from "@elementor/session";
|
|
4635
4644
|
import { styled as styled6 } from "@elementor/ui";
|
|
4636
|
-
import { __ as
|
|
4645
|
+
import { __ as __40 } from "@wordpress/i18n";
|
|
4637
4646
|
|
|
4638
4647
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
4639
|
-
import * as
|
|
4648
|
+
import * as React58 from "react";
|
|
4640
4649
|
import { useRef as useRef9 } from "react";
|
|
4641
4650
|
import { SizeControl as SizeControl4 } from "@elementor/editor-controls";
|
|
4642
4651
|
import { SideBottomIcon as SideBottomIcon2, SideLeftIcon as SideLeftIcon2, SideRightIcon as SideRightIcon2, SideTopIcon as SideTopIcon2 } from "@elementor/icons";
|
|
4643
4652
|
import { Grid as Grid6, Stack as Stack8, withDirection as withDirection10 } from "@elementor/ui";
|
|
4644
|
-
import { __ as
|
|
4653
|
+
import { __ as __36 } from "@wordpress/i18n";
|
|
4645
4654
|
var InlineStartIcon2 = withDirection10(SideLeftIcon2);
|
|
4646
4655
|
var InlineEndIcon2 = withDirection10(SideRightIcon2);
|
|
4647
4656
|
var sideIcons = {
|
|
4648
|
-
"inset-block-start": /* @__PURE__ */
|
|
4649
|
-
"inset-block-end": /* @__PURE__ */
|
|
4650
|
-
"inset-inline-start": /* @__PURE__ */
|
|
4651
|
-
"inset-inline-end": /* @__PURE__ */
|
|
4657
|
+
"inset-block-start": /* @__PURE__ */ React58.createElement(SideTopIcon2, { fontSize: "tiny" }),
|
|
4658
|
+
"inset-block-end": /* @__PURE__ */ React58.createElement(SideBottomIcon2, { fontSize: "tiny" }),
|
|
4659
|
+
"inset-inline-start": /* @__PURE__ */ React58.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
|
|
4660
|
+
"inset-inline-end": /* @__PURE__ */ React58.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
|
|
4652
4661
|
};
|
|
4653
|
-
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ?
|
|
4654
|
-
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ?
|
|
4662
|
+
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? __36("Right", "elementor") : __36("Left", "elementor");
|
|
4663
|
+
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? __36("Left", "elementor") : __36("Right", "elementor");
|
|
4655
4664
|
var DimensionsField = () => {
|
|
4656
4665
|
const { isSiteRtl } = useDirection();
|
|
4657
4666
|
const rowRefs = [useRef9(null), useRef9(null)];
|
|
4658
|
-
return /* @__PURE__ */
|
|
4667
|
+
return /* @__PURE__ */ React58.createElement(UiProviders, null, /* @__PURE__ */ React58.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React58.createElement(DimensionField, { side: "inset-block-start", label: __36("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React58.createElement(
|
|
4659
4668
|
DimensionField,
|
|
4660
4669
|
{
|
|
4661
4670
|
side: "inset-inline-end",
|
|
4662
4671
|
label: getInlineEndLabel(isSiteRtl),
|
|
4663
4672
|
rowRef: rowRefs[0]
|
|
4664
4673
|
}
|
|
4665
|
-
)), /* @__PURE__ */
|
|
4674
|
+
)), /* @__PURE__ */ React58.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React58.createElement(DimensionField, { side: "inset-block-end", label: __36("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React58.createElement(
|
|
4666
4675
|
DimensionField,
|
|
4667
4676
|
{
|
|
4668
4677
|
side: "inset-inline-start",
|
|
@@ -4675,7 +4684,7 @@ var DimensionField = ({
|
|
|
4675
4684
|
side,
|
|
4676
4685
|
label,
|
|
4677
4686
|
rowRef
|
|
4678
|
-
}) => /* @__PURE__ */
|
|
4687
|
+
}) => /* @__PURE__ */ React58.createElement(StylesField, { bind: side, propDisplayName: label }, /* @__PURE__ */ React58.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React58.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, label)), /* @__PURE__ */ React58.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React58.createElement(
|
|
4679
4688
|
SizeControl4,
|
|
4680
4689
|
{
|
|
4681
4690
|
startIcon: sideIcons[side],
|
|
@@ -4686,47 +4695,47 @@ var DimensionField = ({
|
|
|
4686
4695
|
))));
|
|
4687
4696
|
|
|
4688
4697
|
// src/components/style-sections/position-section/offset-field.tsx
|
|
4689
|
-
import * as
|
|
4698
|
+
import * as React59 from "react";
|
|
4690
4699
|
import { useRef as useRef10 } from "react";
|
|
4691
4700
|
import { SizeControl as SizeControl5 } from "@elementor/editor-controls";
|
|
4692
|
-
import { __ as
|
|
4693
|
-
var OFFSET_LABEL =
|
|
4701
|
+
import { __ as __37 } from "@wordpress/i18n";
|
|
4702
|
+
var OFFSET_LABEL = __37("Anchor offset", "elementor");
|
|
4694
4703
|
var UNITS2 = ["px", "em", "rem", "vw", "vh"];
|
|
4695
4704
|
var OffsetField = () => {
|
|
4696
4705
|
const rowRef = useRef10(null);
|
|
4697
|
-
return /* @__PURE__ */
|
|
4706
|
+
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "scroll-margin-top", propDisplayName: OFFSET_LABEL }, /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label: OFFSET_LABEL, ref: rowRef }, /* @__PURE__ */ React59.createElement(SizeControl5, { units: UNITS2, anchorRef: rowRef })));
|
|
4698
4707
|
};
|
|
4699
4708
|
|
|
4700
4709
|
// src/components/style-sections/position-section/position-field.tsx
|
|
4701
|
-
import * as
|
|
4710
|
+
import * as React60 from "react";
|
|
4702
4711
|
import { SelectControl as SelectControl3 } from "@elementor/editor-controls";
|
|
4703
|
-
import { __ as
|
|
4704
|
-
var POSITION_LABEL =
|
|
4712
|
+
import { __ as __38 } from "@wordpress/i18n";
|
|
4713
|
+
var POSITION_LABEL = __38("Position", "elementor");
|
|
4705
4714
|
var positionOptions = [
|
|
4706
|
-
{ label:
|
|
4707
|
-
{ label:
|
|
4708
|
-
{ label:
|
|
4709
|
-
{ label:
|
|
4710
|
-
{ label:
|
|
4715
|
+
{ label: __38("Static", "elementor"), value: "static" },
|
|
4716
|
+
{ label: __38("Relative", "elementor"), value: "relative" },
|
|
4717
|
+
{ label: __38("Absolute", "elementor"), value: "absolute" },
|
|
4718
|
+
{ label: __38("Fixed", "elementor"), value: "fixed" },
|
|
4719
|
+
{ label: __38("Sticky", "elementor"), value: "sticky" }
|
|
4711
4720
|
];
|
|
4712
4721
|
var PositionField = () => {
|
|
4713
|
-
return /* @__PURE__ */
|
|
4722
|
+
return /* @__PURE__ */ React60.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React60.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React60.createElement(SelectControl3, { options: positionOptions })));
|
|
4714
4723
|
};
|
|
4715
4724
|
|
|
4716
4725
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
4717
|
-
import * as
|
|
4726
|
+
import * as React61 from "react";
|
|
4718
4727
|
import { NumberControl as NumberControl4 } from "@elementor/editor-controls";
|
|
4719
4728
|
import { InfoCircleFilledIcon } from "@elementor/icons";
|
|
4720
4729
|
import { Alert as Alert3, AlertTitle as AlertTitle2, Box as Box5, Infotip } from "@elementor/ui";
|
|
4721
|
-
import { __ as
|
|
4722
|
-
var Z_INDEX_LABEL =
|
|
4730
|
+
import { __ as __39 } from "@wordpress/i18n";
|
|
4731
|
+
var Z_INDEX_LABEL = __39("Z-index", "elementor");
|
|
4723
4732
|
var ZIndexField = ({ disabled }) => {
|
|
4724
|
-
const StyleField = /* @__PURE__ */
|
|
4725
|
-
const content = /* @__PURE__ */
|
|
4733
|
+
const StyleField = /* @__PURE__ */ React61.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React61.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React61.createElement(NumberControl4, { disabled })));
|
|
4734
|
+
const content = /* @__PURE__ */ React61.createElement(Alert3, { color: "secondary", icon: /* @__PURE__ */ React61.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React61.createElement(AlertTitle2, null, __39("Z-index", "elementor")), /* @__PURE__ */ React61.createElement(Box5, { component: "span" }, __39(
|
|
4726
4735
|
"z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.",
|
|
4727
4736
|
"elementor"
|
|
4728
4737
|
)));
|
|
4729
|
-
return disabled ? /* @__PURE__ */
|
|
4738
|
+
return disabled ? /* @__PURE__ */ React61.createElement(
|
|
4730
4739
|
Infotip,
|
|
4731
4740
|
{
|
|
4732
4741
|
placement: "right",
|
|
@@ -4734,14 +4743,14 @@ var ZIndexField = ({ disabled }) => {
|
|
|
4734
4743
|
color: "secondary",
|
|
4735
4744
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
4736
4745
|
},
|
|
4737
|
-
/* @__PURE__ */
|
|
4738
|
-
) : /* @__PURE__ */
|
|
4746
|
+
/* @__PURE__ */ React61.createElement(Box5, null, StyleField)
|
|
4747
|
+
) : /* @__PURE__ */ React61.createElement(React61.Fragment, null, StyleField);
|
|
4739
4748
|
};
|
|
4740
4749
|
|
|
4741
4750
|
// src/components/style-sections/position-section/position-section.tsx
|
|
4742
4751
|
var POSITION_STATIC = "static";
|
|
4743
|
-
var POSITION_LABEL2 =
|
|
4744
|
-
var DIMENSIONS_LABEL =
|
|
4752
|
+
var POSITION_LABEL2 = __40("Position", "elementor");
|
|
4753
|
+
var DIMENSIONS_LABEL = __40("Dimensions", "elementor");
|
|
4745
4754
|
var DEPENDENT_PROP_NAMES = [
|
|
4746
4755
|
"inset-block-start",
|
|
4747
4756
|
"inset-block-end",
|
|
@@ -4767,7 +4776,7 @@ var PositionSection = () => {
|
|
|
4767
4776
|
}
|
|
4768
4777
|
positionPrevRef.current = position;
|
|
4769
4778
|
}, [position?.value]);
|
|
4770
|
-
return /* @__PURE__ */
|
|
4779
|
+
return /* @__PURE__ */ React62.createElement(StyledSectionContent, null, /* @__PURE__ */ React62.createElement(PositionField, null), /* @__PURE__ */ React62.createElement(DimensionsField, null), /* @__PURE__ */ React62.createElement(ZIndexField, { disabled: !position || position?.value === POSITION_STATIC }), /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(OffsetField, null));
|
|
4771
4780
|
};
|
|
4772
4781
|
var usePersistDimensions = () => {
|
|
4773
4782
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -4817,26 +4826,26 @@ var StyledSectionContent = styled6(SectionContent, {
|
|
|
4817
4826
|
}));
|
|
4818
4827
|
|
|
4819
4828
|
// src/components/style-sections/size-section/size-section.tsx
|
|
4820
|
-
import * as
|
|
4829
|
+
import * as React67 from "react";
|
|
4821
4830
|
import { useRef as useRef12 } from "react";
|
|
4822
4831
|
import { AspectRatioControl, PositionControl, SizeControl as SizeControl6 } from "@elementor/editor-controls";
|
|
4823
4832
|
import { Grid as Grid7, Stack as Stack10 } from "@elementor/ui";
|
|
4824
|
-
import { __ as
|
|
4833
|
+
import { __ as __44 } from "@wordpress/i18n";
|
|
4825
4834
|
|
|
4826
4835
|
// src/components/style-tab-collapsible-content.tsx
|
|
4827
|
-
import * as
|
|
4836
|
+
import * as React64 from "react";
|
|
4828
4837
|
import { CollapsibleContent } from "@elementor/editor-ui";
|
|
4829
4838
|
|
|
4830
4839
|
// src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
|
|
4831
|
-
import * as
|
|
4840
|
+
import * as React63 from "react";
|
|
4832
4841
|
import { isElementsStylesProvider as isElementsStylesProvider6 } from "@elementor/editor-styles-repository";
|
|
4833
4842
|
import { Stack as Stack9, Tooltip as Tooltip2 } from "@elementor/ui";
|
|
4834
|
-
import { __ as
|
|
4843
|
+
import { __ as __41 } from "@wordpress/i18n";
|
|
4835
4844
|
var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
4836
4845
|
const { id, meta, provider } = useStyle();
|
|
4837
4846
|
const snapshot = useStylesInheritanceSnapshot();
|
|
4838
4847
|
if (fields.includes("custom_css")) {
|
|
4839
|
-
return /* @__PURE__ */
|
|
4848
|
+
return /* @__PURE__ */ React63.createElement(CustomCssIndicator, null);
|
|
4840
4849
|
}
|
|
4841
4850
|
const snapshotFields = Object.fromEntries(
|
|
4842
4851
|
Object.entries(snapshot ?? {}).filter(([key]) => fields.includes(key))
|
|
@@ -4845,9 +4854,9 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
4845
4854
|
if (!hasValues && !hasOverrides) {
|
|
4846
4855
|
return null;
|
|
4847
4856
|
}
|
|
4848
|
-
const hasValueLabel =
|
|
4849
|
-
const hasOverridesLabel =
|
|
4850
|
-
return /* @__PURE__ */
|
|
4857
|
+
const hasValueLabel = __41("Has effective styles", "elementor");
|
|
4858
|
+
const hasOverridesLabel = __41("Has overridden styles", "elementor");
|
|
4859
|
+
return /* @__PURE__ */ React63.createElement(Tooltip2, { title: __41("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React63.createElement(Stack9, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React63.createElement(
|
|
4851
4860
|
StyleIndicator,
|
|
4852
4861
|
{
|
|
4853
4862
|
getColor: getStylesProviderThemeColor(provider.getKey()),
|
|
@@ -4855,7 +4864,7 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
4855
4864
|
role: "listitem",
|
|
4856
4865
|
"aria-label": hasValueLabel
|
|
4857
4866
|
}
|
|
4858
|
-
), hasOverrides && /* @__PURE__ */
|
|
4867
|
+
), hasOverrides && /* @__PURE__ */ React63.createElement(
|
|
4859
4868
|
StyleIndicator,
|
|
4860
4869
|
{
|
|
4861
4870
|
isOverridden: true,
|
|
@@ -4895,59 +4904,59 @@ function getCurrentStyleFromChain(chain, styleId, meta) {
|
|
|
4895
4904
|
|
|
4896
4905
|
// src/components/style-tab-collapsible-content.tsx
|
|
4897
4906
|
var StyleTabCollapsibleContent = ({ fields = [], children }) => {
|
|
4898
|
-
return /* @__PURE__ */
|
|
4907
|
+
return /* @__PURE__ */ React64.createElement(CollapsibleContent, { titleEnd: getStylesInheritanceIndicators(fields) }, children);
|
|
4899
4908
|
};
|
|
4900
4909
|
function getStylesInheritanceIndicators(fields) {
|
|
4901
4910
|
if (fields.length === 0) {
|
|
4902
4911
|
return null;
|
|
4903
4912
|
}
|
|
4904
|
-
return (isOpen) => !isOpen ? /* @__PURE__ */
|
|
4913
|
+
return (isOpen) => !isOpen ? /* @__PURE__ */ React64.createElement(StylesInheritanceSectionIndicators, { fields }) : null;
|
|
4905
4914
|
}
|
|
4906
4915
|
|
|
4907
4916
|
// src/components/style-sections/size-section/object-fit-field.tsx
|
|
4908
|
-
import * as
|
|
4917
|
+
import * as React65 from "react";
|
|
4909
4918
|
import { SelectControl as SelectControl4 } from "@elementor/editor-controls";
|
|
4910
|
-
import { __ as
|
|
4911
|
-
var OBJECT_FIT_LABEL =
|
|
4919
|
+
import { __ as __42 } from "@wordpress/i18n";
|
|
4920
|
+
var OBJECT_FIT_LABEL = __42("Object fit", "elementor");
|
|
4912
4921
|
var positionOptions2 = [
|
|
4913
|
-
{ label:
|
|
4914
|
-
{ label:
|
|
4915
|
-
{ label:
|
|
4916
|
-
{ label:
|
|
4917
|
-
{ label:
|
|
4922
|
+
{ label: __42("Fill", "elementor"), value: "fill" },
|
|
4923
|
+
{ label: __42("Cover", "elementor"), value: "cover" },
|
|
4924
|
+
{ label: __42("Contain", "elementor"), value: "contain" },
|
|
4925
|
+
{ label: __42("None", "elementor"), value: "none" },
|
|
4926
|
+
{ label: __42("Scale down", "elementor"), value: "scale-down" }
|
|
4918
4927
|
];
|
|
4919
4928
|
var ObjectFitField = () => {
|
|
4920
|
-
return /* @__PURE__ */
|
|
4929
|
+
return /* @__PURE__ */ React65.createElement(StylesField, { bind: "object-fit", propDisplayName: OBJECT_FIT_LABEL }, /* @__PURE__ */ React65.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ React65.createElement(SelectControl4, { options: positionOptions2 })));
|
|
4921
4930
|
};
|
|
4922
4931
|
|
|
4923
4932
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
4924
|
-
import * as
|
|
4933
|
+
import * as React66 from "react";
|
|
4925
4934
|
import { ToggleControl as ToggleControl11 } from "@elementor/editor-controls";
|
|
4926
4935
|
import { EyeIcon, EyeOffIcon, LetterAIcon } from "@elementor/icons";
|
|
4927
|
-
import { __ as
|
|
4928
|
-
var OVERFLOW_LABEL =
|
|
4936
|
+
import { __ as __43 } from "@wordpress/i18n";
|
|
4937
|
+
var OVERFLOW_LABEL = __43("Overflow", "elementor");
|
|
4929
4938
|
var options7 = [
|
|
4930
4939
|
{
|
|
4931
4940
|
value: "visible",
|
|
4932
|
-
label:
|
|
4933
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4941
|
+
label: __43("Visible", "elementor"),
|
|
4942
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(EyeIcon, { fontSize: size }),
|
|
4934
4943
|
showTooltip: true
|
|
4935
4944
|
},
|
|
4936
4945
|
{
|
|
4937
4946
|
value: "hidden",
|
|
4938
|
-
label:
|
|
4939
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4947
|
+
label: __43("Hidden", "elementor"),
|
|
4948
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(EyeOffIcon, { fontSize: size }),
|
|
4940
4949
|
showTooltip: true
|
|
4941
4950
|
},
|
|
4942
4951
|
{
|
|
4943
4952
|
value: "auto",
|
|
4944
|
-
label:
|
|
4945
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4953
|
+
label: __43("Auto", "elementor"),
|
|
4954
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(LetterAIcon, { fontSize: size }),
|
|
4946
4955
|
showTooltip: true
|
|
4947
4956
|
}
|
|
4948
4957
|
];
|
|
4949
4958
|
var OverflowField = () => {
|
|
4950
|
-
return /* @__PURE__ */
|
|
4959
|
+
return /* @__PURE__ */ React66.createElement(StylesField, { bind: "overflow", propDisplayName: OVERFLOW_LABEL }, /* @__PURE__ */ React66.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ React66.createElement(ToggleControl11, { options: options7 })));
|
|
4951
4960
|
};
|
|
4952
4961
|
|
|
4953
4962
|
// src/components/style-sections/size-section/size-section.tsx
|
|
@@ -4955,97 +4964,97 @@ var CssSizeProps = [
|
|
|
4955
4964
|
[
|
|
4956
4965
|
{
|
|
4957
4966
|
bind: "width",
|
|
4958
|
-
label:
|
|
4967
|
+
label: __44("Width", "elementor")
|
|
4959
4968
|
},
|
|
4960
4969
|
{
|
|
4961
4970
|
bind: "height",
|
|
4962
|
-
label:
|
|
4971
|
+
label: __44("Height", "elementor")
|
|
4963
4972
|
}
|
|
4964
4973
|
],
|
|
4965
4974
|
[
|
|
4966
4975
|
{
|
|
4967
4976
|
bind: "min-width",
|
|
4968
|
-
label:
|
|
4977
|
+
label: __44("Min width", "elementor")
|
|
4969
4978
|
},
|
|
4970
4979
|
{
|
|
4971
4980
|
bind: "min-height",
|
|
4972
|
-
label:
|
|
4981
|
+
label: __44("Min height", "elementor")
|
|
4973
4982
|
}
|
|
4974
4983
|
],
|
|
4975
4984
|
[
|
|
4976
4985
|
{
|
|
4977
4986
|
bind: "max-width",
|
|
4978
|
-
label:
|
|
4987
|
+
label: __44("Max width", "elementor")
|
|
4979
4988
|
},
|
|
4980
4989
|
{
|
|
4981
4990
|
bind: "max-height",
|
|
4982
|
-
label:
|
|
4991
|
+
label: __44("Max height", "elementor")
|
|
4983
4992
|
}
|
|
4984
4993
|
]
|
|
4985
4994
|
];
|
|
4986
|
-
var ASPECT_RATIO_LABEL =
|
|
4995
|
+
var ASPECT_RATIO_LABEL = __44("Aspect Ratio", "elementor");
|
|
4987
4996
|
var SizeSection = () => {
|
|
4988
4997
|
const gridRowRefs = [useRef12(null), useRef12(null), useRef12(null)];
|
|
4989
|
-
return /* @__PURE__ */
|
|
4998
|
+
return /* @__PURE__ */ React67.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React67.createElement(Grid7, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React67.createElement(Grid7, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React67.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React67.createElement(PanelDivider, null), /* @__PURE__ */ React67.createElement(Stack10, null, /* @__PURE__ */ React67.createElement(OverflowField, null)), /* @__PURE__ */ React67.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React67.createElement(Stack10, { gap: 2, pt: 2 }, /* @__PURE__ */ React67.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React67.createElement(AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React67.createElement(PanelDivider, null), /* @__PURE__ */ React67.createElement(ObjectFitField, null), /* @__PURE__ */ React67.createElement(StylesField, { bind: "object-position", propDisplayName: __44("Object position", "elementor") }, /* @__PURE__ */ React67.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(PositionControl, null))))));
|
|
4990
4999
|
};
|
|
4991
5000
|
var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
|
|
4992
|
-
return /* @__PURE__ */
|
|
5001
|
+
return /* @__PURE__ */ React67.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React67.createElement(Grid7, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React67.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(ControlLabel, null, label)), /* @__PURE__ */ React67.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(SizeControl6, { extendedOptions, anchorRef: rowRef }))));
|
|
4993
5002
|
};
|
|
4994
5003
|
|
|
4995
5004
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
4996
|
-
import * as
|
|
5005
|
+
import * as React68 from "react";
|
|
4997
5006
|
import { LinkedDimensionsControl } from "@elementor/editor-controls";
|
|
4998
|
-
import { __ as
|
|
4999
|
-
var MARGIN_LABEL =
|
|
5000
|
-
var PADDING_LABEL =
|
|
5007
|
+
import { __ as __45 } from "@wordpress/i18n";
|
|
5008
|
+
var MARGIN_LABEL = __45("Margin", "elementor");
|
|
5009
|
+
var PADDING_LABEL = __45("Padding", "elementor");
|
|
5001
5010
|
var SpacingSection = () => {
|
|
5002
5011
|
const { isSiteRtl } = useDirection();
|
|
5003
|
-
return /* @__PURE__ */
|
|
5012
|
+
return /* @__PURE__ */ React68.createElement(SectionContent, null, /* @__PURE__ */ React68.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React68.createElement(
|
|
5004
5013
|
LinkedDimensionsControl,
|
|
5005
5014
|
{
|
|
5006
5015
|
label: MARGIN_LABEL,
|
|
5007
5016
|
isSiteRtl,
|
|
5008
5017
|
min: -Number.MAX_SAFE_INTEGER
|
|
5009
5018
|
}
|
|
5010
|
-
)), /* @__PURE__ */
|
|
5019
|
+
)), /* @__PURE__ */ React68.createElement(PanelDivider, null), /* @__PURE__ */ React68.createElement(StylesField, { bind: "padding", propDisplayName: PADDING_LABEL }, /* @__PURE__ */ React68.createElement(LinkedDimensionsControl, { label: PADDING_LABEL, isSiteRtl })));
|
|
5011
5020
|
};
|
|
5012
5021
|
|
|
5013
5022
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
5014
|
-
import * as
|
|
5023
|
+
import * as React85 from "react";
|
|
5015
5024
|
|
|
5016
5025
|
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
5017
|
-
import * as
|
|
5026
|
+
import * as React69 from "react";
|
|
5018
5027
|
import { NumberControl as NumberControl5 } from "@elementor/editor-controls";
|
|
5019
|
-
import { __ as
|
|
5020
|
-
var COLUMN_COUNT_LABEL =
|
|
5028
|
+
import { __ as __46 } from "@wordpress/i18n";
|
|
5029
|
+
var COLUMN_COUNT_LABEL = __46("Columns", "elementor");
|
|
5021
5030
|
var ColumnCountField = () => {
|
|
5022
|
-
return /* @__PURE__ */
|
|
5031
|
+
return /* @__PURE__ */ React69.createElement(StylesField, { bind: "column-count", propDisplayName: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React69.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React69.createElement(NumberControl5, { shouldForceInt: true, min: 0, step: 1 })));
|
|
5023
5032
|
};
|
|
5024
5033
|
|
|
5025
5034
|
// src/components/style-sections/typography-section/column-gap-field.tsx
|
|
5026
|
-
import * as
|
|
5035
|
+
import * as React70 from "react";
|
|
5027
5036
|
import { useRef as useRef13 } from "react";
|
|
5028
5037
|
import { SizeControl as SizeControl7 } from "@elementor/editor-controls";
|
|
5029
|
-
import { __ as
|
|
5030
|
-
var COLUMN_GAP_LABEL =
|
|
5038
|
+
import { __ as __47 } from "@wordpress/i18n";
|
|
5039
|
+
var COLUMN_GAP_LABEL = __47("Column gap", "elementor");
|
|
5031
5040
|
var ColumnGapField = () => {
|
|
5032
5041
|
const rowRef = useRef13(null);
|
|
5033
|
-
return /* @__PURE__ */
|
|
5042
|
+
return /* @__PURE__ */ React70.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React70.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React70.createElement(SizeControl7, { anchorRef: rowRef })));
|
|
5034
5043
|
};
|
|
5035
5044
|
|
|
5036
5045
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
5037
|
-
import * as
|
|
5046
|
+
import * as React71 from "react";
|
|
5038
5047
|
import { FontFamilyControl, useFontFamilies } from "@elementor/editor-controls";
|
|
5039
5048
|
import { useSectionWidth } from "@elementor/editor-ui";
|
|
5040
|
-
import { __ as
|
|
5041
|
-
var FONT_FAMILY_LABEL =
|
|
5049
|
+
import { __ as __48 } from "@wordpress/i18n";
|
|
5050
|
+
var FONT_FAMILY_LABEL = __48("Font family", "elementor");
|
|
5042
5051
|
var FontFamilyField = () => {
|
|
5043
5052
|
const fontFamilies = useFontFamilies();
|
|
5044
5053
|
const sectionWidth = useSectionWidth();
|
|
5045
5054
|
if (fontFamilies.length === 0) {
|
|
5046
5055
|
return null;
|
|
5047
5056
|
}
|
|
5048
|
-
return /* @__PURE__ */
|
|
5057
|
+
return /* @__PURE__ */ React71.createElement(StylesField, { bind: "font-family", propDisplayName: FONT_FAMILY_LABEL }, /* @__PURE__ */ React71.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ React71.createElement(
|
|
5049
5058
|
FontFamilyControl,
|
|
5050
5059
|
{
|
|
5051
5060
|
fontFamilies,
|
|
@@ -5056,196 +5065,196 @@ var FontFamilyField = () => {
|
|
|
5056
5065
|
};
|
|
5057
5066
|
|
|
5058
5067
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
5059
|
-
import * as
|
|
5068
|
+
import * as React72 from "react";
|
|
5060
5069
|
import { useRef as useRef14 } from "react";
|
|
5061
5070
|
import { SizeControl as SizeControl8 } from "@elementor/editor-controls";
|
|
5062
|
-
import { __ as
|
|
5063
|
-
var FONT_SIZE_LABEL =
|
|
5071
|
+
import { __ as __49 } from "@wordpress/i18n";
|
|
5072
|
+
var FONT_SIZE_LABEL = __49("Font size", "elementor");
|
|
5064
5073
|
var FontSizeField = () => {
|
|
5065
5074
|
const rowRef = useRef14(null);
|
|
5066
|
-
return /* @__PURE__ */
|
|
5075
|
+
return /* @__PURE__ */ React72.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React72.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React72.createElement(SizeControl8, { anchorRef: rowRef, ariaLabel: FONT_SIZE_LABEL })));
|
|
5067
5076
|
};
|
|
5068
5077
|
|
|
5069
5078
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
5070
|
-
import * as
|
|
5079
|
+
import * as React73 from "react";
|
|
5071
5080
|
import { ToggleControl as ToggleControl12 } from "@elementor/editor-controls";
|
|
5072
5081
|
import { ItalicIcon, MinusIcon } from "@elementor/icons";
|
|
5073
|
-
import { __ as
|
|
5074
|
-
var FONT_STYLE_LABEL =
|
|
5082
|
+
import { __ as __50 } from "@wordpress/i18n";
|
|
5083
|
+
var FONT_STYLE_LABEL = __50("Font style", "elementor");
|
|
5075
5084
|
var options8 = [
|
|
5076
5085
|
{
|
|
5077
5086
|
value: "normal",
|
|
5078
|
-
label:
|
|
5079
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5087
|
+
label: __50("Normal", "elementor"),
|
|
5088
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(MinusIcon, { fontSize: size }),
|
|
5080
5089
|
showTooltip: true
|
|
5081
5090
|
},
|
|
5082
5091
|
{
|
|
5083
5092
|
value: "italic",
|
|
5084
|
-
label:
|
|
5085
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5093
|
+
label: __50("Italic", "elementor"),
|
|
5094
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(ItalicIcon, { fontSize: size }),
|
|
5086
5095
|
showTooltip: true
|
|
5087
5096
|
}
|
|
5088
5097
|
];
|
|
5089
5098
|
var FontStyleField = () => {
|
|
5090
|
-
return /* @__PURE__ */
|
|
5099
|
+
return /* @__PURE__ */ React73.createElement(StylesField, { bind: "font-style", propDisplayName: FONT_STYLE_LABEL }, /* @__PURE__ */ React73.createElement(StylesFieldLayout, { label: FONT_STYLE_LABEL }, /* @__PURE__ */ React73.createElement(ToggleControl12, { options: options8 })));
|
|
5091
5100
|
};
|
|
5092
5101
|
|
|
5093
5102
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
5094
|
-
import * as
|
|
5103
|
+
import * as React74 from "react";
|
|
5095
5104
|
import { SelectControl as SelectControl5 } from "@elementor/editor-controls";
|
|
5096
|
-
import { __ as
|
|
5097
|
-
var FONT_WEIGHT_LABEL =
|
|
5105
|
+
import { __ as __51 } from "@wordpress/i18n";
|
|
5106
|
+
var FONT_WEIGHT_LABEL = __51("Font weight", "elementor");
|
|
5098
5107
|
var fontWeightOptions = [
|
|
5099
|
-
{ value: "100", label:
|
|
5100
|
-
{ value: "200", label:
|
|
5101
|
-
{ value: "300", label:
|
|
5102
|
-
{ value: "400", label:
|
|
5103
|
-
{ value: "500", label:
|
|
5104
|
-
{ value: "600", label:
|
|
5105
|
-
{ value: "700", label:
|
|
5106
|
-
{ value: "800", label:
|
|
5107
|
-
{ value: "900", label:
|
|
5108
|
+
{ value: "100", label: __51("100 - Thin", "elementor") },
|
|
5109
|
+
{ value: "200", label: __51("200 - Extra light", "elementor") },
|
|
5110
|
+
{ value: "300", label: __51("300 - Light", "elementor") },
|
|
5111
|
+
{ value: "400", label: __51("400 - Normal", "elementor") },
|
|
5112
|
+
{ value: "500", label: __51("500 - Medium", "elementor") },
|
|
5113
|
+
{ value: "600", label: __51("600 - Semi bold", "elementor") },
|
|
5114
|
+
{ value: "700", label: __51("700 - Bold", "elementor") },
|
|
5115
|
+
{ value: "800", label: __51("800 - Extra bold", "elementor") },
|
|
5116
|
+
{ value: "900", label: __51("900 - Black", "elementor") }
|
|
5108
5117
|
];
|
|
5109
5118
|
var FontWeightField = () => {
|
|
5110
|
-
return /* @__PURE__ */
|
|
5119
|
+
return /* @__PURE__ */ React74.createElement(StylesField, { bind: "font-weight", propDisplayName: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React74.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React74.createElement(SelectControl5, { options: fontWeightOptions })));
|
|
5111
5120
|
};
|
|
5112
5121
|
|
|
5113
5122
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
5114
|
-
import * as
|
|
5123
|
+
import * as React75 from "react";
|
|
5115
5124
|
import { useRef as useRef15 } from "react";
|
|
5116
5125
|
import { SizeControl as SizeControl9 } from "@elementor/editor-controls";
|
|
5117
|
-
import { __ as
|
|
5118
|
-
var LETTER_SPACING_LABEL =
|
|
5126
|
+
import { __ as __52 } from "@wordpress/i18n";
|
|
5127
|
+
var LETTER_SPACING_LABEL = __52("Letter spacing", "elementor");
|
|
5119
5128
|
var LetterSpacingField = () => {
|
|
5120
5129
|
const rowRef = useRef15(null);
|
|
5121
|
-
return /* @__PURE__ */
|
|
5130
|
+
return /* @__PURE__ */ React75.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React75.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React75.createElement(SizeControl9, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
|
|
5122
5131
|
};
|
|
5123
5132
|
|
|
5124
5133
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
5125
|
-
import * as
|
|
5134
|
+
import * as React76 from "react";
|
|
5126
5135
|
import { useRef as useRef16 } from "react";
|
|
5127
5136
|
import { SizeControl as SizeControl10 } from "@elementor/editor-controls";
|
|
5128
|
-
import { __ as
|
|
5129
|
-
var LINE_HEIGHT_LABEL =
|
|
5137
|
+
import { __ as __53 } from "@wordpress/i18n";
|
|
5138
|
+
var LINE_HEIGHT_LABEL = __53("Line height", "elementor");
|
|
5130
5139
|
var LineHeightField = () => {
|
|
5131
5140
|
const rowRef = useRef16(null);
|
|
5132
|
-
return /* @__PURE__ */
|
|
5141
|
+
return /* @__PURE__ */ React76.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React76.createElement(SizeControl10, { anchorRef: rowRef })));
|
|
5133
5142
|
};
|
|
5134
5143
|
|
|
5135
5144
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
5136
|
-
import * as
|
|
5145
|
+
import * as React77 from "react";
|
|
5137
5146
|
import { ToggleControl as ToggleControl13 } from "@elementor/editor-controls";
|
|
5138
5147
|
import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from "@elementor/icons";
|
|
5139
5148
|
import { withDirection as withDirection11 } from "@elementor/ui";
|
|
5140
|
-
import { __ as
|
|
5141
|
-
var TEXT_ALIGNMENT_LABEL =
|
|
5149
|
+
import { __ as __54 } from "@wordpress/i18n";
|
|
5150
|
+
var TEXT_ALIGNMENT_LABEL = __54("Text align", "elementor");
|
|
5142
5151
|
var AlignStartIcon = withDirection11(AlignLeftIcon);
|
|
5143
5152
|
var AlignEndIcon = withDirection11(AlignRightIcon);
|
|
5144
5153
|
var options9 = [
|
|
5145
5154
|
{
|
|
5146
5155
|
value: "start",
|
|
5147
|
-
label:
|
|
5148
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5156
|
+
label: __54("Start", "elementor"),
|
|
5157
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(AlignStartIcon, { fontSize: size }),
|
|
5149
5158
|
showTooltip: true
|
|
5150
5159
|
},
|
|
5151
5160
|
{
|
|
5152
5161
|
value: "center",
|
|
5153
|
-
label:
|
|
5154
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5162
|
+
label: __54("Center", "elementor"),
|
|
5163
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(AlignCenterIcon, { fontSize: size }),
|
|
5155
5164
|
showTooltip: true
|
|
5156
5165
|
},
|
|
5157
5166
|
{
|
|
5158
5167
|
value: "end",
|
|
5159
|
-
label:
|
|
5160
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5168
|
+
label: __54("End", "elementor"),
|
|
5169
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(AlignEndIcon, { fontSize: size }),
|
|
5161
5170
|
showTooltip: true
|
|
5162
5171
|
},
|
|
5163
5172
|
{
|
|
5164
5173
|
value: "justify",
|
|
5165
|
-
label:
|
|
5166
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5174
|
+
label: __54("Justify", "elementor"),
|
|
5175
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(AlignJustifiedIcon, { fontSize: size }),
|
|
5167
5176
|
showTooltip: true
|
|
5168
5177
|
}
|
|
5169
5178
|
];
|
|
5170
5179
|
var TextAlignmentField = () => {
|
|
5171
|
-
return /* @__PURE__ */
|
|
5180
|
+
return /* @__PURE__ */ React77.createElement(StylesField, { bind: "text-align", propDisplayName: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React77.createElement(UiProviders, null, /* @__PURE__ */ React77.createElement(StylesFieldLayout, { label: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React77.createElement(ToggleControl13, { options: options9 }))));
|
|
5172
5181
|
};
|
|
5173
5182
|
|
|
5174
5183
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
5175
|
-
import * as
|
|
5184
|
+
import * as React78 from "react";
|
|
5176
5185
|
import { ColorControl as ColorControl2 } from "@elementor/editor-controls";
|
|
5177
|
-
import { __ as
|
|
5178
|
-
var TEXT_COLOR_LABEL =
|
|
5186
|
+
import { __ as __55 } from "@wordpress/i18n";
|
|
5187
|
+
var TEXT_COLOR_LABEL = __55("Text color", "elementor");
|
|
5179
5188
|
var TextColorField = () => {
|
|
5180
|
-
return /* @__PURE__ */
|
|
5189
|
+
return /* @__PURE__ */ React78.createElement(StylesField, { bind: "color", propDisplayName: TEXT_COLOR_LABEL }, /* @__PURE__ */ React78.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ React78.createElement(ColorControl2, { id: "text-color-control" })));
|
|
5181
5190
|
};
|
|
5182
5191
|
|
|
5183
5192
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
5184
|
-
import * as
|
|
5193
|
+
import * as React79 from "react";
|
|
5185
5194
|
import { ToggleControl as ToggleControl14 } from "@elementor/editor-controls";
|
|
5186
5195
|
import { MinusIcon as MinusIcon2, OverlineIcon, StrikethroughIcon, UnderlineIcon } from "@elementor/icons";
|
|
5187
|
-
import { __ as
|
|
5188
|
-
var TEXT_DECORATION_LABEL =
|
|
5196
|
+
import { __ as __56 } from "@wordpress/i18n";
|
|
5197
|
+
var TEXT_DECORATION_LABEL = __56("Line decoration", "elementor");
|
|
5189
5198
|
var options10 = [
|
|
5190
5199
|
{
|
|
5191
5200
|
value: "none",
|
|
5192
|
-
label:
|
|
5193
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5201
|
+
label: __56("None", "elementor"),
|
|
5202
|
+
renderContent: ({ size }) => /* @__PURE__ */ React79.createElement(MinusIcon2, { fontSize: size }),
|
|
5194
5203
|
showTooltip: true,
|
|
5195
5204
|
exclusive: true
|
|
5196
5205
|
},
|
|
5197
5206
|
{
|
|
5198
5207
|
value: "underline",
|
|
5199
|
-
label:
|
|
5200
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5208
|
+
label: __56("Underline", "elementor"),
|
|
5209
|
+
renderContent: ({ size }) => /* @__PURE__ */ React79.createElement(UnderlineIcon, { fontSize: size }),
|
|
5201
5210
|
showTooltip: true
|
|
5202
5211
|
},
|
|
5203
5212
|
{
|
|
5204
5213
|
value: "line-through",
|
|
5205
|
-
label:
|
|
5206
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5214
|
+
label: __56("Line-through", "elementor"),
|
|
5215
|
+
renderContent: ({ size }) => /* @__PURE__ */ React79.createElement(StrikethroughIcon, { fontSize: size }),
|
|
5207
5216
|
showTooltip: true
|
|
5208
5217
|
},
|
|
5209
5218
|
{
|
|
5210
5219
|
value: "overline",
|
|
5211
|
-
label:
|
|
5212
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5220
|
+
label: __56("Overline", "elementor"),
|
|
5221
|
+
renderContent: ({ size }) => /* @__PURE__ */ React79.createElement(OverlineIcon, { fontSize: size }),
|
|
5213
5222
|
showTooltip: true
|
|
5214
5223
|
}
|
|
5215
5224
|
];
|
|
5216
|
-
var TextDecorationField = () => /* @__PURE__ */
|
|
5225
|
+
var TextDecorationField = () => /* @__PURE__ */ React79.createElement(StylesField, { bind: "text-decoration", propDisplayName: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React79.createElement(StylesFieldLayout, { label: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React79.createElement(ToggleControl14, { options: options10, exclusive: false })));
|
|
5217
5226
|
|
|
5218
5227
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
5219
|
-
import * as
|
|
5228
|
+
import * as React80 from "react";
|
|
5220
5229
|
import { ToggleControl as ToggleControl15 } from "@elementor/editor-controls";
|
|
5221
5230
|
import { TextDirectionLtrIcon, TextDirectionRtlIcon } from "@elementor/icons";
|
|
5222
|
-
import { __ as
|
|
5223
|
-
var TEXT_DIRECTION_LABEL =
|
|
5231
|
+
import { __ as __57 } from "@wordpress/i18n";
|
|
5232
|
+
var TEXT_DIRECTION_LABEL = __57("Direction", "elementor");
|
|
5224
5233
|
var options11 = [
|
|
5225
5234
|
{
|
|
5226
5235
|
value: "ltr",
|
|
5227
|
-
label:
|
|
5228
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5236
|
+
label: __57("Left to right", "elementor"),
|
|
5237
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(TextDirectionLtrIcon, { fontSize: size }),
|
|
5229
5238
|
showTooltip: true
|
|
5230
5239
|
},
|
|
5231
5240
|
{
|
|
5232
5241
|
value: "rtl",
|
|
5233
|
-
label:
|
|
5234
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5242
|
+
label: __57("Right to left", "elementor"),
|
|
5243
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(TextDirectionRtlIcon, { fontSize: size }),
|
|
5235
5244
|
showTooltip: true
|
|
5236
5245
|
}
|
|
5237
5246
|
];
|
|
5238
5247
|
var TextDirectionField = () => {
|
|
5239
|
-
return /* @__PURE__ */
|
|
5248
|
+
return /* @__PURE__ */ React80.createElement(StylesField, { bind: "direction", propDisplayName: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React80.createElement(StylesFieldLayout, { label: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React80.createElement(ToggleControl15, { options: options11 })));
|
|
5240
5249
|
};
|
|
5241
5250
|
|
|
5242
5251
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
5243
|
-
import * as
|
|
5252
|
+
import * as React82 from "react";
|
|
5244
5253
|
import { StrokeControl } from "@elementor/editor-controls";
|
|
5245
|
-
import { __ as
|
|
5254
|
+
import { __ as __58 } from "@wordpress/i18n";
|
|
5246
5255
|
|
|
5247
5256
|
// src/components/add-or-remove-content.tsx
|
|
5248
|
-
import * as
|
|
5257
|
+
import * as React81 from "react";
|
|
5249
5258
|
import { MinusIcon as MinusIcon3, PlusIcon } from "@elementor/icons";
|
|
5250
5259
|
import { Collapse as Collapse2, IconButton, Stack as Stack11 } from "@elementor/ui";
|
|
5251
5260
|
var SIZE = "tiny";
|
|
@@ -5257,7 +5266,7 @@ var AddOrRemoveContent = ({
|
|
|
5257
5266
|
disabled,
|
|
5258
5267
|
renderLabel
|
|
5259
5268
|
}) => {
|
|
5260
|
-
return /* @__PURE__ */
|
|
5269
|
+
return /* @__PURE__ */ React81.createElement(SectionContent, null, /* @__PURE__ */ React81.createElement(
|
|
5261
5270
|
Stack11,
|
|
5262
5271
|
{
|
|
5263
5272
|
direction: "row",
|
|
@@ -5268,8 +5277,8 @@ var AddOrRemoveContent = ({
|
|
|
5268
5277
|
}
|
|
5269
5278
|
},
|
|
5270
5279
|
renderLabel(),
|
|
5271
|
-
isAdded ? /* @__PURE__ */
|
|
5272
|
-
), /* @__PURE__ */
|
|
5280
|
+
isAdded ? /* @__PURE__ */ React81.createElement(IconButton, { size: SIZE, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React81.createElement(MinusIcon3, { fontSize: SIZE })) : /* @__PURE__ */ React81.createElement(IconButton, { size: SIZE, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React81.createElement(PlusIcon, { fontSize: SIZE }))
|
|
5281
|
+
), /* @__PURE__ */ React81.createElement(Collapse2, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React81.createElement(SectionContent, null, children)));
|
|
5273
5282
|
};
|
|
5274
5283
|
|
|
5275
5284
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -5289,7 +5298,7 @@ var initTextStroke = {
|
|
|
5289
5298
|
}
|
|
5290
5299
|
}
|
|
5291
5300
|
};
|
|
5292
|
-
var TEXT_STROKE_LABEL =
|
|
5301
|
+
var TEXT_STROKE_LABEL = __58("Text stroke", "elementor");
|
|
5293
5302
|
var TextStrokeField = () => {
|
|
5294
5303
|
const { value, setValue, canEdit } = useStylesField("stroke", {
|
|
5295
5304
|
history: { propDisplayName: TEXT_STROKE_LABEL }
|
|
@@ -5301,67 +5310,67 @@ var TextStrokeField = () => {
|
|
|
5301
5310
|
setValue(null);
|
|
5302
5311
|
};
|
|
5303
5312
|
const hasTextStroke = Boolean(value);
|
|
5304
|
-
return /* @__PURE__ */
|
|
5313
|
+
return /* @__PURE__ */ React82.createElement(StylesField, { bind: "stroke", propDisplayName: TEXT_STROKE_LABEL }, /* @__PURE__ */ React82.createElement(
|
|
5305
5314
|
AddOrRemoveContent,
|
|
5306
5315
|
{
|
|
5307
5316
|
isAdded: hasTextStroke,
|
|
5308
5317
|
onAdd: addTextStroke,
|
|
5309
5318
|
onRemove: removeTextStroke,
|
|
5310
5319
|
disabled: !canEdit,
|
|
5311
|
-
renderLabel: () => /* @__PURE__ */
|
|
5320
|
+
renderLabel: () => /* @__PURE__ */ React82.createElement(ControlLabel, null, TEXT_STROKE_LABEL)
|
|
5312
5321
|
},
|
|
5313
|
-
/* @__PURE__ */
|
|
5322
|
+
/* @__PURE__ */ React82.createElement(StrokeControl, null)
|
|
5314
5323
|
));
|
|
5315
5324
|
};
|
|
5316
5325
|
|
|
5317
5326
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
5318
|
-
import * as
|
|
5327
|
+
import * as React83 from "react";
|
|
5319
5328
|
import { ToggleControl as ToggleControl16 } from "@elementor/editor-controls";
|
|
5320
5329
|
import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon as MinusIcon4 } from "@elementor/icons";
|
|
5321
|
-
import { __ as
|
|
5322
|
-
var TEXT_TRANSFORM_LABEL =
|
|
5330
|
+
import { __ as __59 } from "@wordpress/i18n";
|
|
5331
|
+
var TEXT_TRANSFORM_LABEL = __59("Text transform", "elementor");
|
|
5323
5332
|
var options12 = [
|
|
5324
5333
|
{
|
|
5325
5334
|
value: "none",
|
|
5326
|
-
label:
|
|
5327
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5335
|
+
label: __59("None", "elementor"),
|
|
5336
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(MinusIcon4, { fontSize: size }),
|
|
5328
5337
|
showTooltip: true
|
|
5329
5338
|
},
|
|
5330
5339
|
{
|
|
5331
5340
|
value: "capitalize",
|
|
5332
|
-
label:
|
|
5333
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5341
|
+
label: __59("Capitalize", "elementor"),
|
|
5342
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(LetterCaseIcon, { fontSize: size }),
|
|
5334
5343
|
showTooltip: true
|
|
5335
5344
|
},
|
|
5336
5345
|
{
|
|
5337
5346
|
value: "uppercase",
|
|
5338
|
-
label:
|
|
5339
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5347
|
+
label: __59("Uppercase", "elementor"),
|
|
5348
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(LetterCaseUpperIcon, { fontSize: size }),
|
|
5340
5349
|
showTooltip: true
|
|
5341
5350
|
},
|
|
5342
5351
|
{
|
|
5343
5352
|
value: "lowercase",
|
|
5344
|
-
label:
|
|
5345
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5353
|
+
label: __59("Lowercase", "elementor"),
|
|
5354
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(LetterCaseLowerIcon, { fontSize: size }),
|
|
5346
5355
|
showTooltip: true
|
|
5347
5356
|
}
|
|
5348
5357
|
];
|
|
5349
|
-
var TransformField = () => /* @__PURE__ */
|
|
5358
|
+
var TransformField = () => /* @__PURE__ */ React83.createElement(StylesField, { bind: "text-transform", propDisplayName: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React83.createElement(StylesFieldLayout, { label: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React83.createElement(ToggleControl16, { options: options12 })));
|
|
5350
5359
|
|
|
5351
5360
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
5352
|
-
import * as
|
|
5361
|
+
import * as React84 from "react";
|
|
5353
5362
|
import { useRef as useRef17 } from "react";
|
|
5354
5363
|
import { SizeControl as SizeControl11 } from "@elementor/editor-controls";
|
|
5355
|
-
import { __ as
|
|
5356
|
-
var WORD_SPACING_LABEL =
|
|
5364
|
+
import { __ as __60 } from "@wordpress/i18n";
|
|
5365
|
+
var WORD_SPACING_LABEL = __60("Word spacing", "elementor");
|
|
5357
5366
|
var WordSpacingField = () => {
|
|
5358
5367
|
const rowRef = useRef17(null);
|
|
5359
|
-
return /* @__PURE__ */
|
|
5368
|
+
return /* @__PURE__ */ React84.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React84.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React84.createElement(SizeControl11, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
|
|
5360
5369
|
};
|
|
5361
5370
|
|
|
5362
5371
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
5363
5372
|
var TypographySection = () => {
|
|
5364
|
-
return /* @__PURE__ */
|
|
5373
|
+
return /* @__PURE__ */ React85.createElement(SectionContent, null, /* @__PURE__ */ React85.createElement(FontFamilyField, null), /* @__PURE__ */ React85.createElement(FontWeightField, null), /* @__PURE__ */ React85.createElement(FontSizeField, null), /* @__PURE__ */ React85.createElement(PanelDivider, null), /* @__PURE__ */ React85.createElement(TextAlignmentField, null), /* @__PURE__ */ React85.createElement(TextColorField, null), /* @__PURE__ */ React85.createElement(
|
|
5365
5374
|
StyleTabCollapsibleContent,
|
|
5366
5375
|
{
|
|
5367
5376
|
fields: [
|
|
@@ -5376,18 +5385,18 @@ var TypographySection = () => {
|
|
|
5376
5385
|
"stroke"
|
|
5377
5386
|
]
|
|
5378
5387
|
},
|
|
5379
|
-
/* @__PURE__ */
|
|
5388
|
+
/* @__PURE__ */ React85.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React85.createElement(LineHeightField, null), /* @__PURE__ */ React85.createElement(LetterSpacingField, null), /* @__PURE__ */ React85.createElement(WordSpacingField, null), /* @__PURE__ */ React85.createElement(ColumnCountField, null), /* @__PURE__ */ React85.createElement(ColumnGapField, null), /* @__PURE__ */ React85.createElement(PanelDivider, null), /* @__PURE__ */ React85.createElement(TextDecorationField, null), /* @__PURE__ */ React85.createElement(TransformField, null), /* @__PURE__ */ React85.createElement(TextDirectionField, null), /* @__PURE__ */ React85.createElement(FontStyleField, null), /* @__PURE__ */ React85.createElement(TextStrokeField, null))
|
|
5380
5389
|
));
|
|
5381
5390
|
};
|
|
5382
5391
|
|
|
5383
5392
|
// src/components/style-tab-section.tsx
|
|
5384
|
-
import * as
|
|
5393
|
+
import * as React86 from "react";
|
|
5385
5394
|
var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
5386
5395
|
const { component, name, title, action } = section;
|
|
5387
5396
|
const tabDefaults = useDefaultPanelSettings();
|
|
5388
|
-
const SectionComponent = component || (() => /* @__PURE__ */
|
|
5397
|
+
const SectionComponent = component || (() => /* @__PURE__ */ React86.createElement(React86.Fragment, null));
|
|
5389
5398
|
const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes(name);
|
|
5390
|
-
return /* @__PURE__ */
|
|
5399
|
+
return /* @__PURE__ */ React86.createElement(
|
|
5391
5400
|
Section,
|
|
5392
5401
|
{
|
|
5393
5402
|
title,
|
|
@@ -5396,7 +5405,7 @@ var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
|
5396
5405
|
unmountOnExit,
|
|
5397
5406
|
action
|
|
5398
5407
|
},
|
|
5399
|
-
/* @__PURE__ */
|
|
5408
|
+
/* @__PURE__ */ React86.createElement(SectionComponent, null)
|
|
5400
5409
|
);
|
|
5401
5410
|
};
|
|
5402
5411
|
|
|
@@ -5418,7 +5427,7 @@ var StyleTab = () => {
|
|
|
5418
5427
|
if (!currentClassesProp) {
|
|
5419
5428
|
return null;
|
|
5420
5429
|
}
|
|
5421
|
-
return /* @__PURE__ */
|
|
5430
|
+
return /* @__PURE__ */ React87.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React87.createElement(
|
|
5422
5431
|
StyleProvider,
|
|
5423
5432
|
{
|
|
5424
5433
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -5429,13 +5438,13 @@ var StyleTab = () => {
|
|
|
5429
5438
|
},
|
|
5430
5439
|
setMetaState: setActiveStyleState
|
|
5431
5440
|
},
|
|
5432
|
-
/* @__PURE__ */
|
|
5441
|
+
/* @__PURE__ */ React87.createElement(SessionStorageProvider2, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React87.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React87.createElement(ClassesHeader, null, /* @__PURE__ */ React87.createElement(CssClassSelector, null), /* @__PURE__ */ React87.createElement(Divider5, null)), /* @__PURE__ */ React87.createElement(SectionsList, null, /* @__PURE__ */ React87.createElement(
|
|
5433
5442
|
StyleTabSection,
|
|
5434
5443
|
{
|
|
5435
5444
|
section: {
|
|
5436
5445
|
component: LayoutSection,
|
|
5437
5446
|
name: "Layout",
|
|
5438
|
-
title:
|
|
5447
|
+
title: __61("Layout", "elementor")
|
|
5439
5448
|
},
|
|
5440
5449
|
fields: [
|
|
5441
5450
|
"display",
|
|
@@ -5451,23 +5460,23 @@ var StyleTab = () => {
|
|
|
5451
5460
|
"grid-row"
|
|
5452
5461
|
]
|
|
5453
5462
|
}
|
|
5454
|
-
), /* @__PURE__ */
|
|
5463
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5455
5464
|
StyleTabSection,
|
|
5456
5465
|
{
|
|
5457
5466
|
section: {
|
|
5458
5467
|
component: SpacingSection,
|
|
5459
5468
|
name: "Spacing",
|
|
5460
|
-
title:
|
|
5469
|
+
title: __61("Spacing", "elementor")
|
|
5461
5470
|
},
|
|
5462
5471
|
fields: ["margin", "padding"]
|
|
5463
5472
|
}
|
|
5464
|
-
), /* @__PURE__ */
|
|
5473
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5465
5474
|
StyleTabSection,
|
|
5466
5475
|
{
|
|
5467
5476
|
section: {
|
|
5468
5477
|
component: SizeSection,
|
|
5469
5478
|
name: "Size",
|
|
5470
|
-
title:
|
|
5479
|
+
title: __61("Size", "elementor")
|
|
5471
5480
|
},
|
|
5472
5481
|
fields: [
|
|
5473
5482
|
"width",
|
|
@@ -5481,23 +5490,23 @@ var StyleTab = () => {
|
|
|
5481
5490
|
"object-fit"
|
|
5482
5491
|
]
|
|
5483
5492
|
}
|
|
5484
|
-
), /* @__PURE__ */
|
|
5493
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5485
5494
|
StyleTabSection,
|
|
5486
5495
|
{
|
|
5487
5496
|
section: {
|
|
5488
5497
|
component: PositionSection,
|
|
5489
5498
|
name: "Position",
|
|
5490
|
-
title:
|
|
5499
|
+
title: __61("Position", "elementor")
|
|
5491
5500
|
},
|
|
5492
5501
|
fields: ["position", "z-index", "scroll-margin-top"]
|
|
5493
5502
|
}
|
|
5494
|
-
), /* @__PURE__ */
|
|
5503
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5495
5504
|
StyleTabSection,
|
|
5496
5505
|
{
|
|
5497
5506
|
section: {
|
|
5498
5507
|
component: TypographySection,
|
|
5499
5508
|
name: "Typography",
|
|
5500
|
-
title:
|
|
5509
|
+
title: __61("Typography", "elementor")
|
|
5501
5510
|
},
|
|
5502
5511
|
fields: [
|
|
5503
5512
|
"font-family",
|
|
@@ -5516,33 +5525,33 @@ var StyleTab = () => {
|
|
|
5516
5525
|
"stroke"
|
|
5517
5526
|
]
|
|
5518
5527
|
}
|
|
5519
|
-
), /* @__PURE__ */
|
|
5528
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5520
5529
|
StyleTabSection,
|
|
5521
5530
|
{
|
|
5522
5531
|
section: {
|
|
5523
5532
|
component: BackgroundSection,
|
|
5524
5533
|
name: "Background",
|
|
5525
|
-
title:
|
|
5534
|
+
title: __61("Background", "elementor")
|
|
5526
5535
|
},
|
|
5527
5536
|
fields: ["background"]
|
|
5528
5537
|
}
|
|
5529
|
-
), /* @__PURE__ */
|
|
5538
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5530
5539
|
StyleTabSection,
|
|
5531
5540
|
{
|
|
5532
5541
|
section: {
|
|
5533
5542
|
component: BorderSection,
|
|
5534
5543
|
name: "Border",
|
|
5535
|
-
title:
|
|
5544
|
+
title: __61("Border", "elementor")
|
|
5536
5545
|
},
|
|
5537
5546
|
fields: ["border-radius", "border-width", "border-color", "border-style"]
|
|
5538
5547
|
}
|
|
5539
|
-
), /* @__PURE__ */
|
|
5548
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5540
5549
|
StyleTabSection,
|
|
5541
5550
|
{
|
|
5542
5551
|
section: {
|
|
5543
5552
|
component: EffectsSection,
|
|
5544
5553
|
name: "Effects",
|
|
5545
|
-
title:
|
|
5554
|
+
title: __61("Effects", "elementor")
|
|
5546
5555
|
},
|
|
5547
5556
|
fields: [
|
|
5548
5557
|
"mix-blend-mode",
|
|
@@ -5555,12 +5564,12 @@ var StyleTab = () => {
|
|
|
5555
5564
|
"transition"
|
|
5556
5565
|
]
|
|
5557
5566
|
}
|
|
5558
|
-
), /* @__PURE__ */
|
|
5567
|
+
), /* @__PURE__ */ React87.createElement(StyleTabSlot, null)), /* @__PURE__ */ React87.createElement(Box6, { sx: { height: "150px" } })))
|
|
5559
5568
|
));
|
|
5560
5569
|
};
|
|
5561
5570
|
function ClassesHeader({ children }) {
|
|
5562
5571
|
const scrollDirection = useScrollDirection();
|
|
5563
|
-
return /* @__PURE__ */
|
|
5572
|
+
return /* @__PURE__ */ React87.createElement(Stack12, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
5564
5573
|
}
|
|
5565
5574
|
function useCurrentClassesProp() {
|
|
5566
5575
|
const { elementType } = useElement();
|
|
@@ -5579,7 +5588,7 @@ var EditingPanelTabs = () => {
|
|
|
5579
5588
|
return (
|
|
5580
5589
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
5581
5590
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
5582
|
-
/* @__PURE__ */
|
|
5591
|
+
/* @__PURE__ */ React88.createElement(Fragment9, { key: element.id }, /* @__PURE__ */ React88.createElement(PanelTabContent, null))
|
|
5583
5592
|
);
|
|
5584
5593
|
};
|
|
5585
5594
|
var PanelTabContent = () => {
|
|
@@ -5591,7 +5600,7 @@ var PanelTabContent = () => {
|
|
|
5591
5600
|
const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
5592
5601
|
const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;
|
|
5593
5602
|
const { getTabProps, getTabPanelProps, getTabsProps } = useTabs(currentTab);
|
|
5594
|
-
return /* @__PURE__ */
|
|
5603
|
+
return /* @__PURE__ */ React88.createElement(ScrollProvider, null, /* @__PURE__ */ React88.createElement(Stack13, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Stack13, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React88.createElement(
|
|
5595
5604
|
Tabs,
|
|
5596
5605
|
{
|
|
5597
5606
|
variant: "fullWidth",
|
|
@@ -5603,10 +5612,10 @@ var PanelTabContent = () => {
|
|
|
5603
5612
|
setCurrentTab(newValue);
|
|
5604
5613
|
}
|
|
5605
5614
|
},
|
|
5606
|
-
!isPromotedElement && /* @__PURE__ */
|
|
5607
|
-
/* @__PURE__ */
|
|
5608
|
-
isInteractionsActive && /* @__PURE__ */
|
|
5609
|
-
), /* @__PURE__ */
|
|
5615
|
+
!isPromotedElement && /* @__PURE__ */ React88.createElement(Tab, { label: __62("General", "elementor"), ...getTabProps("settings") }),
|
|
5616
|
+
/* @__PURE__ */ React88.createElement(Tab, { label: __62("Style", "elementor"), ...getTabProps("style") }),
|
|
5617
|
+
isInteractionsActive && /* @__PURE__ */ React88.createElement(Tab, { label: __62("Interactions", "elementor"), ...getTabProps("interactions") })
|
|
5618
|
+
), /* @__PURE__ */ React88.createElement(Divider6, null)), !isPromotedElement && /* @__PURE__ */ React88.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React88.createElement(SettingsTab, null)), /* @__PURE__ */ React88.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React88.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React88.createElement(TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React88.createElement(InteractionsTab, null))));
|
|
5610
5619
|
};
|
|
5611
5620
|
|
|
5612
5621
|
// src/components/editing-panel.tsx
|
|
@@ -5619,13 +5628,13 @@ var EditingPanel = () => {
|
|
|
5619
5628
|
if (!element || !elementType) {
|
|
5620
5629
|
return null;
|
|
5621
5630
|
}
|
|
5622
|
-
const panelTitle =
|
|
5631
|
+
const panelTitle = __63("Edit %s", "elementor").replace("%s", elementType.title);
|
|
5623
5632
|
const { component: ReplacementComponent } = getEditingPanelReplacement(element, elementType) ?? {};
|
|
5624
|
-
let panelContent = /* @__PURE__ */
|
|
5633
|
+
let panelContent = /* @__PURE__ */ React89.createElement(React89.Fragment, null, /* @__PURE__ */ React89.createElement(PanelHeader, null, /* @__PURE__ */ React89.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React89.createElement(AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React89.createElement(PanelBody, null, /* @__PURE__ */ React89.createElement(EditingPanelTabs, null)));
|
|
5625
5634
|
if (ReplacementComponent) {
|
|
5626
|
-
panelContent = /* @__PURE__ */
|
|
5635
|
+
panelContent = /* @__PURE__ */ React89.createElement(ReplacementComponent, null);
|
|
5627
5636
|
}
|
|
5628
|
-
return /* @__PURE__ */
|
|
5637
|
+
return /* @__PURE__ */ React89.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React89.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React89.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React89.createElement(ThemeProvider3, null, /* @__PURE__ */ React89.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React89.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React89.createElement(ElementProvider, { element, elementType, settings }, /* @__PURE__ */ React89.createElement(Panel, null, /* @__PURE__ */ React89.createElement(PanelHeaderTopSlot, null), panelContent)))))));
|
|
5629
5638
|
};
|
|
5630
5639
|
|
|
5631
5640
|
// src/init.ts
|
|
@@ -5677,21 +5686,21 @@ var EditingPanelHooks = () => {
|
|
|
5677
5686
|
import { AttributesControl, DisplayConditionsControl } from "@elementor/editor-controls";
|
|
5678
5687
|
|
|
5679
5688
|
// src/components/promotions/custom-css.tsx
|
|
5680
|
-
import * as
|
|
5689
|
+
import * as React90 from "react";
|
|
5681
5690
|
import { useRef as useRef18 } from "react";
|
|
5682
5691
|
import { PromotionTrigger } from "@elementor/editor-controls";
|
|
5683
|
-
import { __ as
|
|
5692
|
+
import { __ as __64 } from "@wordpress/i18n";
|
|
5684
5693
|
var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
|
|
5685
5694
|
var CustomCssSection = () => {
|
|
5686
5695
|
const triggerRef = useRef18(null);
|
|
5687
|
-
return /* @__PURE__ */
|
|
5696
|
+
return /* @__PURE__ */ React90.createElement(
|
|
5688
5697
|
StyleTabSection,
|
|
5689
5698
|
{
|
|
5690
5699
|
section: {
|
|
5691
5700
|
name: "Custom CSS",
|
|
5692
|
-
title:
|
|
5701
|
+
title: __64("Custom CSS", "elementor"),
|
|
5693
5702
|
action: {
|
|
5694
|
-
component: /* @__PURE__ */
|
|
5703
|
+
component: /* @__PURE__ */ React90.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "customCss", trackingData: TRACKING_DATA }),
|
|
5695
5704
|
onClick: () => triggerRef.current?.toggle()
|
|
5696
5705
|
}
|
|
5697
5706
|
}
|
|
@@ -5713,7 +5722,7 @@ var init = () => {
|
|
|
5713
5722
|
};
|
|
5714
5723
|
|
|
5715
5724
|
// src/controls-registry/element-controls/tabs-control/tabs-control.tsx
|
|
5716
|
-
import * as
|
|
5725
|
+
import * as React91 from "react";
|
|
5717
5726
|
import {
|
|
5718
5727
|
ControlFormLabel as ControlFormLabel3,
|
|
5719
5728
|
Repeater,
|
|
@@ -5727,7 +5736,7 @@ import {
|
|
|
5727
5736
|
import { numberPropTypeUtil as numberPropTypeUtil4 } from "@elementor/editor-props";
|
|
5728
5737
|
import { InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
|
|
5729
5738
|
import { Alert as Alert4, Chip as Chip4, Infotip as Infotip2, Stack as Stack14, Switch, TextField as TextField2, Typography as Typography5 } from "@elementor/ui";
|
|
5730
|
-
import { __ as
|
|
5739
|
+
import { __ as __66 } from "@wordpress/i18n";
|
|
5731
5740
|
|
|
5732
5741
|
// src/controls-registry/element-controls/get-element-by-type.ts
|
|
5733
5742
|
import { getContainer as getContainer2 } from "@elementor/editor-elements";
|
|
@@ -5752,7 +5761,7 @@ import {
|
|
|
5752
5761
|
removeElements
|
|
5753
5762
|
} from "@elementor/editor-elements";
|
|
5754
5763
|
import { numberPropTypeUtil as numberPropTypeUtil3 } from "@elementor/editor-props";
|
|
5755
|
-
import { __ as
|
|
5764
|
+
import { __ as __65 } from "@wordpress/i18n";
|
|
5756
5765
|
var TAB_ELEMENT_TYPE = "e-tab";
|
|
5757
5766
|
var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
|
|
5758
5767
|
var useActions = () => {
|
|
@@ -5775,7 +5784,7 @@ var useActions = () => {
|
|
|
5775
5784
|
}
|
|
5776
5785
|
duplicateElements({
|
|
5777
5786
|
elementIds: [tabId, tabContentId],
|
|
5778
|
-
title:
|
|
5787
|
+
title: __65("Duplicate Tab", "elementor"),
|
|
5779
5788
|
onDuplicateElements: () => {
|
|
5780
5789
|
if (newDefault !== defaultActiveTab) {
|
|
5781
5790
|
setDefaultActiveTab(newDefault, {}, { withHistory: false });
|
|
@@ -5812,7 +5821,7 @@ var useActions = () => {
|
|
|
5812
5821
|
defaultActiveTab
|
|
5813
5822
|
});
|
|
5814
5823
|
moveElements({
|
|
5815
|
-
title:
|
|
5824
|
+
title: __65("Reorder Tabs", "elementor"),
|
|
5816
5825
|
moves: [
|
|
5817
5826
|
{
|
|
5818
5827
|
element: movedElement,
|
|
@@ -5846,7 +5855,7 @@ var useActions = () => {
|
|
|
5846
5855
|
defaultActiveTab
|
|
5847
5856
|
});
|
|
5848
5857
|
removeElements({
|
|
5849
|
-
title:
|
|
5858
|
+
title: __65("Tabs", "elementor"),
|
|
5850
5859
|
elementIds: items3.flatMap(({ item, index }) => {
|
|
5851
5860
|
const tabId = item.id;
|
|
5852
5861
|
const tabContentContainer = getContainer3(tabContentAreaId);
|
|
@@ -5881,7 +5890,7 @@ var useActions = () => {
|
|
|
5881
5890
|
items3.forEach(({ index }) => {
|
|
5882
5891
|
const position = index + 1;
|
|
5883
5892
|
createElements({
|
|
5884
|
-
title:
|
|
5893
|
+
title: __65("Tabs", "elementor"),
|
|
5885
5894
|
elements: [
|
|
5886
5895
|
{
|
|
5887
5896
|
container: tabContentArea,
|
|
@@ -5950,7 +5959,7 @@ var calculateDefaultOnDuplicate = ({
|
|
|
5950
5959
|
var TAB_MENU_ELEMENT_TYPE = "e-tabs-menu";
|
|
5951
5960
|
var TAB_CONTENT_AREA_ELEMENT_TYPE = "e-tabs-content-area";
|
|
5952
5961
|
var TabsControl = ({ label }) => {
|
|
5953
|
-
return /* @__PURE__ */
|
|
5962
|
+
return /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: __66("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(TabsControlContent, { label }));
|
|
5954
5963
|
};
|
|
5955
5964
|
var TabsControlContent = ({ label }) => {
|
|
5956
5965
|
const { element } = useElement();
|
|
@@ -5994,7 +6003,7 @@ var TabsControlContent = ({ label }) => {
|
|
|
5994
6003
|
});
|
|
5995
6004
|
}
|
|
5996
6005
|
};
|
|
5997
|
-
return /* @__PURE__ */
|
|
6006
|
+
return /* @__PURE__ */ React91.createElement(
|
|
5998
6007
|
Repeater,
|
|
5999
6008
|
{
|
|
6000
6009
|
showToggle: false,
|
|
@@ -6014,7 +6023,7 @@ var TabsControlContent = ({ label }) => {
|
|
|
6014
6023
|
};
|
|
6015
6024
|
var ItemLabel = ({ value, index }) => {
|
|
6016
6025
|
const elementTitle = value?.title;
|
|
6017
|
-
return /* @__PURE__ */
|
|
6026
|
+
return /* @__PURE__ */ React91.createElement(Stack14, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React91.createElement("span", null, elementTitle), /* @__PURE__ */ React91.createElement(ItemDefaultTab, { index }));
|
|
6018
6027
|
};
|
|
6019
6028
|
var ItemDefaultTab = ({ index }) => {
|
|
6020
6029
|
const { value: defaultItem } = useBoundProp6(numberPropTypeUtil4);
|
|
@@ -6022,18 +6031,18 @@ var ItemDefaultTab = ({ index }) => {
|
|
|
6022
6031
|
if (!isDefault) {
|
|
6023
6032
|
return null;
|
|
6024
6033
|
}
|
|
6025
|
-
return /* @__PURE__ */
|
|
6034
|
+
return /* @__PURE__ */ React91.createElement(Chip4, { size: "tiny", shape: "rounded", label: __66("Default", "elementor") });
|
|
6026
6035
|
};
|
|
6027
6036
|
var ItemContent = ({ value, index }) => {
|
|
6028
6037
|
if (!value.id) {
|
|
6029
6038
|
return null;
|
|
6030
6039
|
}
|
|
6031
|
-
return /* @__PURE__ */
|
|
6040
|
+
return /* @__PURE__ */ React91.createElement(Stack14, { p: 2, gap: 1.5 }, /* @__PURE__ */ React91.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: __66("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(DefaultTabControl, { tabIndex: index })));
|
|
6032
6041
|
};
|
|
6033
6042
|
var DefaultTabControl = ({ tabIndex }) => {
|
|
6034
6043
|
const { value, setValue } = useBoundProp6(numberPropTypeUtil4);
|
|
6035
6044
|
const isDefault = value === tabIndex;
|
|
6036
|
-
return /* @__PURE__ */
|
|
6045
|
+
return /* @__PURE__ */ React91.createElement(Stack14, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React91.createElement(ControlFormLabel3, null, __66("Set as default tab", "elementor")), /* @__PURE__ */ React91.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React91.createElement(
|
|
6037
6046
|
Switch,
|
|
6038
6047
|
{
|
|
6039
6048
|
size: "small",
|
|
@@ -6051,7 +6060,7 @@ var DefaultTabControl = ({ tabIndex }) => {
|
|
|
6051
6060
|
var TabLabelControl = ({ elementId }) => {
|
|
6052
6061
|
const editorSettings = useElementEditorSettings(elementId);
|
|
6053
6062
|
const label = editorSettings?.title ?? "";
|
|
6054
|
-
return /* @__PURE__ */
|
|
6063
|
+
return /* @__PURE__ */ React91.createElement(Stack14, { gap: 1 }, /* @__PURE__ */ React91.createElement(ControlFormLabel3, null, __66("Tab name", "elementor")), /* @__PURE__ */ React91.createElement(
|
|
6055
6064
|
TextField2,
|
|
6056
6065
|
{
|
|
6057
6066
|
size: "tiny",
|
|
@@ -6072,22 +6081,22 @@ var ConditionalTooltip = ({
|
|
|
6072
6081
|
if (!showTooltip) {
|
|
6073
6082
|
return children;
|
|
6074
6083
|
}
|
|
6075
|
-
return /* @__PURE__ */
|
|
6084
|
+
return /* @__PURE__ */ React91.createElement(
|
|
6076
6085
|
Infotip2,
|
|
6077
6086
|
{
|
|
6078
6087
|
arrow: false,
|
|
6079
|
-
content: /* @__PURE__ */
|
|
6088
|
+
content: /* @__PURE__ */ React91.createElement(
|
|
6080
6089
|
Alert4,
|
|
6081
6090
|
{
|
|
6082
6091
|
color: "secondary",
|
|
6083
|
-
icon: /* @__PURE__ */
|
|
6092
|
+
icon: /* @__PURE__ */ React91.createElement(InfoCircleFilledIcon2, { fontSize: "tiny" }),
|
|
6084
6093
|
size: "small",
|
|
6085
6094
|
sx: { width: 288 }
|
|
6086
6095
|
},
|
|
6087
|
-
/* @__PURE__ */
|
|
6096
|
+
/* @__PURE__ */ React91.createElement(Typography5, { variant: "body2" }, __66("To change the default tab, simply set another tab as default.", "elementor"))
|
|
6088
6097
|
)
|
|
6089
6098
|
},
|
|
6090
|
-
/* @__PURE__ */
|
|
6099
|
+
/* @__PURE__ */ React91.createElement("span", null, children)
|
|
6091
6100
|
);
|
|
6092
6101
|
};
|
|
6093
6102
|
|
|
@@ -6113,7 +6122,7 @@ import {
|
|
|
6113
6122
|
import { controlActionsMenu as controlActionsMenu2 } from "@elementor/menus";
|
|
6114
6123
|
|
|
6115
6124
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6116
|
-
import * as
|
|
6125
|
+
import * as React92 from "react";
|
|
6117
6126
|
import { PropKeyProvider as PropKeyProvider4, PropProvider as PropProvider4, useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
|
|
6118
6127
|
import {
|
|
6119
6128
|
backgroundImageOverlayPropTypeUtil
|
|
@@ -6256,24 +6265,24 @@ var useDynamicTag = (tagName) => {
|
|
|
6256
6265
|
};
|
|
6257
6266
|
|
|
6258
6267
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6259
|
-
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */
|
|
6268
|
+
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React92.createElement(DatabaseIcon, { fontSize: "tiny" });
|
|
6260
6269
|
var BackgroundControlDynamicTagLabel = ({ value }) => {
|
|
6261
6270
|
const context = useBoundProp8(backgroundImageOverlayPropTypeUtil);
|
|
6262
|
-
return /* @__PURE__ */
|
|
6271
|
+
return /* @__PURE__ */ React92.createElement(PropProvider4, { ...context, value: value.value }, /* @__PURE__ */ React92.createElement(PropKeyProvider4, { bind: "image" }, /* @__PURE__ */ React92.createElement(Wrapper2, { rawValue: value.value })));
|
|
6263
6272
|
};
|
|
6264
6273
|
var Wrapper2 = ({ rawValue }) => {
|
|
6265
6274
|
const { propType } = useBoundProp8();
|
|
6266
6275
|
const imageOverlayPropType = propType.prop_types["background-image-overlay"];
|
|
6267
|
-
return /* @__PURE__ */
|
|
6276
|
+
return /* @__PURE__ */ React92.createElement(PropProvider4, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React92.createElement(PropKeyProvider4, { bind: "src" }, /* @__PURE__ */ React92.createElement(Content, { rawValue: rawValue.image })));
|
|
6268
6277
|
};
|
|
6269
6278
|
var Content = ({ rawValue }) => {
|
|
6270
6279
|
const src = rawValue.value.src;
|
|
6271
6280
|
const dynamicTag = useDynamicTag(src.value.name || "");
|
|
6272
|
-
return /* @__PURE__ */
|
|
6281
|
+
return /* @__PURE__ */ React92.createElement(React92.Fragment, null, dynamicTag?.label);
|
|
6273
6282
|
};
|
|
6274
6283
|
|
|
6275
6284
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
6276
|
-
import * as
|
|
6285
|
+
import * as React96 from "react";
|
|
6277
6286
|
import {
|
|
6278
6287
|
ControlFormLabel as ControlFormLabel4,
|
|
6279
6288
|
PropKeyProvider as PropKeyProvider6,
|
|
@@ -6298,7 +6307,7 @@ import {
|
|
|
6298
6307
|
usePopupState as usePopupState2,
|
|
6299
6308
|
useTabs as useTabs2
|
|
6300
6309
|
} from "@elementor/ui";
|
|
6301
|
-
import { __ as
|
|
6310
|
+
import { __ as __68 } from "@wordpress/i18n";
|
|
6302
6311
|
|
|
6303
6312
|
// src/hooks/use-persist-dynamic-value.ts
|
|
6304
6313
|
import { useSessionStorage as useSessionStorage5 } from "@elementor/session";
|
|
@@ -6309,11 +6318,11 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
6309
6318
|
};
|
|
6310
6319
|
|
|
6311
6320
|
// src/dynamics/dynamic-control.tsx
|
|
6312
|
-
import * as
|
|
6321
|
+
import * as React94 from "react";
|
|
6313
6322
|
import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
|
|
6314
6323
|
|
|
6315
6324
|
// src/dynamics/components/dynamic-conditional-control.tsx
|
|
6316
|
-
import * as
|
|
6325
|
+
import * as React93 from "react";
|
|
6317
6326
|
import { useMemo as useMemo14 } from "react";
|
|
6318
6327
|
import { isDependencyMet as isDependencyMet3 } from "@elementor/editor-props";
|
|
6319
6328
|
var DynamicConditionalControl = ({
|
|
@@ -6355,10 +6364,10 @@ var DynamicConditionalControl = ({
|
|
|
6355
6364
|
return { ...defaults, ...convertedSettings };
|
|
6356
6365
|
}, [defaults, convertedSettings]);
|
|
6357
6366
|
if (!propType?.dependencies?.terms.length) {
|
|
6358
|
-
return /* @__PURE__ */
|
|
6367
|
+
return /* @__PURE__ */ React93.createElement(React93.Fragment, null, children);
|
|
6359
6368
|
}
|
|
6360
6369
|
const isHidden = !isDependencyMet3(propType?.dependencies, effectiveSettings).isMet;
|
|
6361
|
-
return isHidden ? null : /* @__PURE__ */
|
|
6370
|
+
return isHidden ? null : /* @__PURE__ */ React93.createElement(React93.Fragment, null, children);
|
|
6362
6371
|
};
|
|
6363
6372
|
|
|
6364
6373
|
// src/dynamics/dynamic-control.tsx
|
|
@@ -6383,7 +6392,7 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
6383
6392
|
});
|
|
6384
6393
|
};
|
|
6385
6394
|
const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
|
|
6386
|
-
return /* @__PURE__ */
|
|
6395
|
+
return /* @__PURE__ */ React94.createElement(PropProvider5, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React94.createElement(PropKeyProvider5, { bind }, /* @__PURE__ */ React94.createElement(
|
|
6387
6396
|
DynamicConditionalControl,
|
|
6388
6397
|
{
|
|
6389
6398
|
propType: dynamicPropType,
|
|
@@ -6395,13 +6404,13 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
6395
6404
|
};
|
|
6396
6405
|
|
|
6397
6406
|
// src/dynamics/components/dynamic-selection.tsx
|
|
6398
|
-
import * as
|
|
6407
|
+
import * as React95 from "react";
|
|
6399
6408
|
import { Fragment as Fragment14, useEffect as useEffect9, useState as useState10 } from "react";
|
|
6400
6409
|
import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
|
|
6401
6410
|
import { CtaButton, PopoverHeader, PopoverMenuList, SearchField, SectionPopoverBody } from "@elementor/editor-ui";
|
|
6402
6411
|
import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
|
|
6403
6412
|
import { Divider as Divider7, Link as Link2, Stack as Stack15, Typography as Typography6, useTheme as useTheme3 } from "@elementor/ui";
|
|
6404
|
-
import { __ as
|
|
6413
|
+
import { __ as __67 } from "@wordpress/i18n";
|
|
6405
6414
|
var SIZE2 = "tiny";
|
|
6406
6415
|
var PROMO_TEXT_WIDTH = 170;
|
|
6407
6416
|
var PRO_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-modal/";
|
|
@@ -6448,19 +6457,19 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6448
6457
|
]);
|
|
6449
6458
|
const getPopOverContent = () => {
|
|
6450
6459
|
if (hasNoDynamicTags) {
|
|
6451
|
-
return /* @__PURE__ */
|
|
6460
|
+
return /* @__PURE__ */ React95.createElement(NoDynamicTags, null);
|
|
6452
6461
|
}
|
|
6453
6462
|
if (expired) {
|
|
6454
|
-
return /* @__PURE__ */
|
|
6463
|
+
return /* @__PURE__ */ React95.createElement(ExpiredDynamicTags, null);
|
|
6455
6464
|
}
|
|
6456
|
-
return /* @__PURE__ */
|
|
6465
|
+
return /* @__PURE__ */ React95.createElement(Fragment14, null, /* @__PURE__ */ React95.createElement(
|
|
6457
6466
|
SearchField,
|
|
6458
6467
|
{
|
|
6459
6468
|
value: searchValue,
|
|
6460
6469
|
onSearch: handleSearch,
|
|
6461
|
-
placeholder:
|
|
6470
|
+
placeholder: __67("Search dynamic tags\u2026", "elementor")
|
|
6462
6471
|
}
|
|
6463
|
-
), /* @__PURE__ */
|
|
6472
|
+
), /* @__PURE__ */ React95.createElement(Divider7, null), /* @__PURE__ */ React95.createElement(
|
|
6464
6473
|
PopoverMenuList,
|
|
6465
6474
|
{
|
|
6466
6475
|
items: virtualizedItems,
|
|
@@ -6468,20 +6477,20 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6468
6477
|
onClose: closePopover,
|
|
6469
6478
|
selectedValue: dynamicValue?.name,
|
|
6470
6479
|
itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
|
|
6471
|
-
noResultsComponent: /* @__PURE__ */
|
|
6480
|
+
noResultsComponent: /* @__PURE__ */ React95.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
|
|
6472
6481
|
}
|
|
6473
6482
|
));
|
|
6474
6483
|
};
|
|
6475
|
-
return /* @__PURE__ */
|
|
6484
|
+
return /* @__PURE__ */ React95.createElement(SectionPopoverBody, { "aria-label": __67("Dynamic tags", "elementor") }, /* @__PURE__ */ React95.createElement(
|
|
6476
6485
|
PopoverHeader,
|
|
6477
6486
|
{
|
|
6478
|
-
title:
|
|
6487
|
+
title: __67("Dynamic tags", "elementor"),
|
|
6479
6488
|
onClose: closePopover,
|
|
6480
|
-
icon: /* @__PURE__ */
|
|
6489
|
+
icon: /* @__PURE__ */ React95.createElement(DatabaseIcon2, { fontSize: SIZE2 })
|
|
6481
6490
|
}
|
|
6482
6491
|
), getPopOverContent());
|
|
6483
6492
|
};
|
|
6484
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
6493
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React95.createElement(
|
|
6485
6494
|
Stack15,
|
|
6486
6495
|
{
|
|
6487
6496
|
gap: 1,
|
|
@@ -6492,11 +6501,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React94.createElem
|
|
|
6492
6501
|
color: "text.secondary",
|
|
6493
6502
|
sx: { pb: 3.5 }
|
|
6494
6503
|
},
|
|
6495
|
-
/* @__PURE__ */
|
|
6496
|
-
/* @__PURE__ */
|
|
6497
|
-
/* @__PURE__ */
|
|
6504
|
+
/* @__PURE__ */ React95.createElement(DatabaseIcon2, { fontSize: "large" }),
|
|
6505
|
+
/* @__PURE__ */ React95.createElement(Typography6, { align: "center", variant: "subtitle2" }, __67("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React95.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
6506
|
+
/* @__PURE__ */ React95.createElement(Typography6, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __67("Try something else.", "elementor"), /* @__PURE__ */ React95.createElement(Link2, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __67("Clear & try again", "elementor")))
|
|
6498
6507
|
);
|
|
6499
|
-
var NoDynamicTags = () => /* @__PURE__ */
|
|
6508
|
+
var NoDynamicTags = () => /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(Divider7, null), /* @__PURE__ */ React95.createElement(
|
|
6500
6509
|
Stack15,
|
|
6501
6510
|
{
|
|
6502
6511
|
gap: 1,
|
|
@@ -6507,10 +6516,10 @@ var NoDynamicTags = () => /* @__PURE__ */ React94.createElement(React94.Fragment
|
|
|
6507
6516
|
color: "text.secondary",
|
|
6508
6517
|
sx: { pb: 3.5 }
|
|
6509
6518
|
},
|
|
6510
|
-
/* @__PURE__ */
|
|
6511
|
-
/* @__PURE__ */
|
|
6512
|
-
/* @__PURE__ */
|
|
6513
|
-
/* @__PURE__ */
|
|
6519
|
+
/* @__PURE__ */ React95.createElement(DatabaseIcon2, { fontSize: "large" }),
|
|
6520
|
+
/* @__PURE__ */ React95.createElement(Typography6, { align: "center", variant: "subtitle2" }, __67("Streamline your workflow with dynamic tags", "elementor")),
|
|
6521
|
+
/* @__PURE__ */ React95.createElement(Typography6, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, __67("Upgrade now to display your content dynamically.", "elementor")),
|
|
6522
|
+
/* @__PURE__ */ React95.createElement(
|
|
6514
6523
|
CtaButton,
|
|
6515
6524
|
{
|
|
6516
6525
|
size: "small",
|
|
@@ -6519,7 +6528,7 @@ var NoDynamicTags = () => /* @__PURE__ */ React94.createElement(React94.Fragment
|
|
|
6519
6528
|
}
|
|
6520
6529
|
)
|
|
6521
6530
|
));
|
|
6522
|
-
var ExpiredDynamicTags = () => /* @__PURE__ */
|
|
6531
|
+
var ExpiredDynamicTags = () => /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(Divider7, null), /* @__PURE__ */ React95.createElement(
|
|
6523
6532
|
Stack15,
|
|
6524
6533
|
{
|
|
6525
6534
|
gap: 1,
|
|
@@ -6530,16 +6539,16 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React94.createElement(React94.Fra
|
|
|
6530
6539
|
color: "text.secondary",
|
|
6531
6540
|
sx: { pb: 3.5 }
|
|
6532
6541
|
},
|
|
6533
|
-
/* @__PURE__ */
|
|
6534
|
-
/* @__PURE__ */
|
|
6535
|
-
/* @__PURE__ */
|
|
6536
|
-
/* @__PURE__ */
|
|
6542
|
+
/* @__PURE__ */ React95.createElement(DatabaseIcon2, { fontSize: "large" }),
|
|
6543
|
+
/* @__PURE__ */ React95.createElement(Typography6, { align: "center", variant: "subtitle2" }, __67("Unlock your Dynamic tags again", "elementor")),
|
|
6544
|
+
/* @__PURE__ */ React95.createElement(Typography6, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, __67("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")),
|
|
6545
|
+
/* @__PURE__ */ React95.createElement(
|
|
6537
6546
|
CtaButton,
|
|
6538
6547
|
{
|
|
6539
6548
|
size: "small",
|
|
6540
6549
|
href: RENEW_DYNAMIC_TAGS_URL,
|
|
6541
6550
|
onClick: () => trackUpgradePromotionClick({ target_name: "dynamic_tags" }),
|
|
6542
|
-
children:
|
|
6551
|
+
children: __67("Renew Now", "elementor")
|
|
6543
6552
|
}
|
|
6544
6553
|
)
|
|
6545
6554
|
));
|
|
@@ -6576,7 +6585,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6576
6585
|
const { name: tagName = "" } = value;
|
|
6577
6586
|
const dynamicTag = useDynamicTag(tagName);
|
|
6578
6587
|
if (!isDynamicTagSupported(tagName) && OriginalControl) {
|
|
6579
|
-
return /* @__PURE__ */
|
|
6588
|
+
return /* @__PURE__ */ React96.createElement(PropProvider6, { propType: originalPropType, value: { [bind]: null }, setValue: setAnyValue }, /* @__PURE__ */ React96.createElement(PropKeyProvider6, { bind }, /* @__PURE__ */ React96.createElement(OriginalControl, { ...props })));
|
|
6580
6589
|
}
|
|
6581
6590
|
const removeDynamicTag = () => {
|
|
6582
6591
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -6584,25 +6593,25 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6584
6593
|
if (!dynamicTag) {
|
|
6585
6594
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
6586
6595
|
}
|
|
6587
|
-
return /* @__PURE__ */
|
|
6596
|
+
return /* @__PURE__ */ React96.createElement(Box7, null, /* @__PURE__ */ React96.createElement(
|
|
6588
6597
|
Tag,
|
|
6589
6598
|
{
|
|
6590
6599
|
fullWidth: true,
|
|
6591
6600
|
showActionsOnHover: true,
|
|
6592
6601
|
label: dynamicTag.label,
|
|
6593
|
-
startIcon: /* @__PURE__ */
|
|
6602
|
+
startIcon: /* @__PURE__ */ React96.createElement(DatabaseIcon3, { fontSize: SIZE3 }),
|
|
6594
6603
|
...bindTrigger2(selectionPopoverState),
|
|
6595
|
-
actions: /* @__PURE__ */
|
|
6604
|
+
actions: /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(DynamicSettingsPopover, { dynamicTag, disabled: readonly }), /* @__PURE__ */ React96.createElement(
|
|
6596
6605
|
IconButton2,
|
|
6597
6606
|
{
|
|
6598
6607
|
size: SIZE3,
|
|
6599
6608
|
onClick: removeDynamicTag,
|
|
6600
|
-
"aria-label":
|
|
6609
|
+
"aria-label": __68("Remove dynamic value", "elementor")
|
|
6601
6610
|
},
|
|
6602
|
-
/* @__PURE__ */
|
|
6611
|
+
/* @__PURE__ */ React96.createElement(XIcon, { fontSize: SIZE3 })
|
|
6603
6612
|
))
|
|
6604
6613
|
}
|
|
6605
|
-
), /* @__PURE__ */
|
|
6614
|
+
), /* @__PURE__ */ React96.createElement(
|
|
6606
6615
|
Popover,
|
|
6607
6616
|
{
|
|
6608
6617
|
disablePortal: true,
|
|
@@ -6614,7 +6623,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6614
6623
|
},
|
|
6615
6624
|
...bindPopover(selectionPopoverState)
|
|
6616
6625
|
},
|
|
6617
|
-
/* @__PURE__ */
|
|
6626
|
+
/* @__PURE__ */ React96.createElement(SectionPopoverBody2, { "aria-label": __68("Dynamic tags", "elementor") }, /* @__PURE__ */ React96.createElement(DynamicSelection, { close: selectionPopoverState.close, expired: readonly }))
|
|
6618
6627
|
));
|
|
6619
6628
|
};
|
|
6620
6629
|
var DynamicSettingsPopover = ({
|
|
@@ -6626,16 +6635,16 @@ var DynamicSettingsPopover = ({
|
|
|
6626
6635
|
if (!hasDynamicSettings) {
|
|
6627
6636
|
return null;
|
|
6628
6637
|
}
|
|
6629
|
-
return /* @__PURE__ */
|
|
6638
|
+
return /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(
|
|
6630
6639
|
IconButton2,
|
|
6631
6640
|
{
|
|
6632
6641
|
size: SIZE3,
|
|
6633
6642
|
disabled,
|
|
6634
6643
|
...!disabled && bindTrigger2(popupState),
|
|
6635
|
-
"aria-label":
|
|
6644
|
+
"aria-label": __68("Dynamic settings", "elementor")
|
|
6636
6645
|
},
|
|
6637
|
-
/* @__PURE__ */
|
|
6638
|
-
), /* @__PURE__ */
|
|
6646
|
+
/* @__PURE__ */ React96.createElement(SettingsIcon, { fontSize: SIZE3 })
|
|
6647
|
+
), /* @__PURE__ */ React96.createElement(
|
|
6639
6648
|
Popover,
|
|
6640
6649
|
{
|
|
6641
6650
|
disablePortal: true,
|
|
@@ -6647,14 +6656,14 @@ var DynamicSettingsPopover = ({
|
|
|
6647
6656
|
},
|
|
6648
6657
|
...bindPopover(popupState)
|
|
6649
6658
|
},
|
|
6650
|
-
/* @__PURE__ */
|
|
6659
|
+
/* @__PURE__ */ React96.createElement(SectionPopoverBody2, { "aria-label": __68("Dynamic settings", "elementor") }, /* @__PURE__ */ React96.createElement(
|
|
6651
6660
|
PopoverHeader2,
|
|
6652
6661
|
{
|
|
6653
6662
|
title: dynamicTag.label,
|
|
6654
6663
|
onClose: popupState.close,
|
|
6655
|
-
icon: /* @__PURE__ */
|
|
6664
|
+
icon: /* @__PURE__ */ React96.createElement(DatabaseIcon3, { fontSize: SIZE3 })
|
|
6656
6665
|
}
|
|
6657
|
-
), /* @__PURE__ */
|
|
6666
|
+
), /* @__PURE__ */ React96.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
|
|
6658
6667
|
));
|
|
6659
6668
|
};
|
|
6660
6669
|
var DynamicSettings = ({ controls, tagName }) => {
|
|
@@ -6665,9 +6674,9 @@ var DynamicSettings = ({ controls, tagName }) => {
|
|
|
6665
6674
|
}
|
|
6666
6675
|
if (tagsWithoutTabs.includes(tagName)) {
|
|
6667
6676
|
const singleTab = tabs[0];
|
|
6668
|
-
return /* @__PURE__ */
|
|
6677
|
+
return /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(Divider8, null), /* @__PURE__ */ React96.createElement(ControlsItemsStack, { items: singleTab.value.items }));
|
|
6669
6678
|
}
|
|
6670
|
-
return /* @__PURE__ */
|
|
6679
|
+
return /* @__PURE__ */ React96.createElement(React96.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React96.createElement(Tabs2, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React96.createElement(
|
|
6671
6680
|
Tab2,
|
|
6672
6681
|
{
|
|
6673
6682
|
key: index,
|
|
@@ -6675,15 +6684,15 @@ var DynamicSettings = ({ controls, tagName }) => {
|
|
|
6675
6684
|
sx: { px: 1, py: 0.5 },
|
|
6676
6685
|
...getTabProps(index)
|
|
6677
6686
|
}
|
|
6678
|
-
))), /* @__PURE__ */
|
|
6679
|
-
return /* @__PURE__ */
|
|
6687
|
+
))), /* @__PURE__ */ React96.createElement(Divider8, null), tabs.map(({ value }, index) => {
|
|
6688
|
+
return /* @__PURE__ */ React96.createElement(
|
|
6680
6689
|
TabPanel2,
|
|
6681
6690
|
{
|
|
6682
6691
|
key: index,
|
|
6683
6692
|
sx: { flexGrow: 1, py: 0, overflowY: "auto" },
|
|
6684
6693
|
...getTabPanelProps(index)
|
|
6685
6694
|
},
|
|
6686
|
-
/* @__PURE__ */
|
|
6695
|
+
/* @__PURE__ */ React96.createElement(ControlsItemsStack, { items: value.items })
|
|
6687
6696
|
);
|
|
6688
6697
|
}));
|
|
6689
6698
|
};
|
|
@@ -6725,11 +6734,11 @@ var Control2 = ({ control }) => {
|
|
|
6725
6734
|
display: "grid",
|
|
6726
6735
|
gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
|
|
6727
6736
|
} : {};
|
|
6728
|
-
return /* @__PURE__ */
|
|
6737
|
+
return /* @__PURE__ */ React96.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React96.createElement(Grid8, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React96.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(ControlFormLabel4, null, control.label)) : null, /* @__PURE__ */ React96.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(Control, { type: control.type, props: controlProps }))));
|
|
6729
6738
|
};
|
|
6730
6739
|
function ControlsItemsStack({ items: items3 }) {
|
|
6731
|
-
return /* @__PURE__ */
|
|
6732
|
-
(item) => item.type === "control" ? /* @__PURE__ */
|
|
6740
|
+
return /* @__PURE__ */ React96.createElement(Stack16, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
|
|
6741
|
+
(item) => item.type === "control" ? /* @__PURE__ */ React96.createElement(Control2, { key: item.value.bind, control: item.value }) : null
|
|
6733
6742
|
));
|
|
6734
6743
|
}
|
|
6735
6744
|
|
|
@@ -6785,18 +6794,18 @@ function getDynamicValue(name, settings) {
|
|
|
6785
6794
|
}
|
|
6786
6795
|
|
|
6787
6796
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
6788
|
-
import * as
|
|
6797
|
+
import * as React97 from "react";
|
|
6789
6798
|
import { useBoundProp as useBoundProp12 } from "@elementor/editor-controls";
|
|
6790
6799
|
import { DatabaseIcon as DatabaseIcon4 } from "@elementor/icons";
|
|
6791
|
-
import { __ as
|
|
6800
|
+
import { __ as __69 } from "@wordpress/i18n";
|
|
6792
6801
|
var usePropDynamicAction = () => {
|
|
6793
6802
|
const { propType } = useBoundProp12();
|
|
6794
6803
|
const visible = !!propType && supportsDynamic(propType);
|
|
6795
6804
|
return {
|
|
6796
6805
|
visible,
|
|
6797
6806
|
icon: DatabaseIcon4,
|
|
6798
|
-
title:
|
|
6799
|
-
content: ({ close }) => /* @__PURE__ */
|
|
6807
|
+
title: __69("Dynamic tags", "elementor"),
|
|
6808
|
+
content: ({ close }) => /* @__PURE__ */ React97.createElement(DynamicSelection, { close })
|
|
6800
6809
|
};
|
|
6801
6810
|
};
|
|
6802
6811
|
|
|
@@ -6831,7 +6840,7 @@ import { useBoundProp as useBoundProp13 } from "@elementor/editor-controls";
|
|
|
6831
6840
|
import { hasVariable as hasVariable2 } from "@elementor/editor-variables";
|
|
6832
6841
|
import { BrushBigIcon } from "@elementor/icons";
|
|
6833
6842
|
import { controlActionsMenu as controlActionsMenu3 } from "@elementor/menus";
|
|
6834
|
-
import { __ as
|
|
6843
|
+
import { __ as __70 } from "@wordpress/i18n";
|
|
6835
6844
|
|
|
6836
6845
|
// src/utils/is-equal.ts
|
|
6837
6846
|
function isEqual(a, b) {
|
|
@@ -6907,21 +6916,21 @@ function useResetStyleValueProps() {
|
|
|
6907
6916
|
const visible = calculateVisibility();
|
|
6908
6917
|
return {
|
|
6909
6918
|
visible,
|
|
6910
|
-
title:
|
|
6919
|
+
title: __70("Clear", "elementor"),
|
|
6911
6920
|
icon: BrushBigIcon,
|
|
6912
6921
|
onClick: () => resetValue()
|
|
6913
6922
|
};
|
|
6914
6923
|
}
|
|
6915
6924
|
|
|
6916
6925
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
6917
|
-
import * as
|
|
6926
|
+
import * as React103 from "react";
|
|
6918
6927
|
import { useBoundProp as useBoundProp14 } from "@elementor/editor-controls";
|
|
6919
6928
|
import { isEmpty as isEmpty2 } from "@elementor/editor-props";
|
|
6920
6929
|
import { ELEMENTS_BASE_STYLES_PROVIDER_KEY as ELEMENTS_BASE_STYLES_PROVIDER_KEY4 } from "@elementor/editor-styles-repository";
|
|
6921
|
-
import { __ as
|
|
6930
|
+
import { __ as __74 } from "@wordpress/i18n";
|
|
6922
6931
|
|
|
6923
6932
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
6924
|
-
import * as
|
|
6933
|
+
import * as React102 from "react";
|
|
6925
6934
|
import { useMemo as useMemo15, useRef as useRef19, useState as useState12 } from "react";
|
|
6926
6935
|
import {
|
|
6927
6936
|
createPropsResolver as createPropsResolver2,
|
|
@@ -6939,7 +6948,7 @@ import {
|
|
|
6939
6948
|
Stack as Stack17,
|
|
6940
6949
|
Tooltip as Tooltip6
|
|
6941
6950
|
} from "@elementor/ui";
|
|
6942
|
-
import { __ as
|
|
6951
|
+
import { __ as __73 } from "@wordpress/i18n";
|
|
6943
6952
|
|
|
6944
6953
|
// src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
|
|
6945
6954
|
import { isValidElement, useEffect as useEffect10, useState as useState11 } from "react";
|
|
@@ -6949,7 +6958,7 @@ import {
|
|
|
6949
6958
|
isPseudoState
|
|
6950
6959
|
} from "@elementor/editor-styles";
|
|
6951
6960
|
import { ELEMENTS_BASE_STYLES_PROVIDER_KEY as ELEMENTS_BASE_STYLES_PROVIDER_KEY2 } from "@elementor/editor-styles-repository";
|
|
6952
|
-
import { __ as
|
|
6961
|
+
import { __ as __71 } from "@wordpress/i18n";
|
|
6953
6962
|
var MAXIMUM_ITEMS = 2;
|
|
6954
6963
|
var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
6955
6964
|
const [items3, setItems] = useState11([]);
|
|
@@ -6960,7 +6969,7 @@ var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
|
6960
6969
|
);
|
|
6961
6970
|
const validItems = normalizedItems.map((item) => ({
|
|
6962
6971
|
...item,
|
|
6963
|
-
displayLabel: ELEMENTS_BASE_STYLES_PROVIDER_KEY2 !== item.provider ? item.displayLabel :
|
|
6972
|
+
displayLabel: ELEMENTS_BASE_STYLES_PROVIDER_KEY2 !== item.provider ? item.displayLabel : __71("Base", "elementor")
|
|
6964
6973
|
})).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
|
|
6965
6974
|
setItems(validItems);
|
|
6966
6975
|
})();
|
|
@@ -7017,7 +7026,7 @@ var getTransformedValue = async (item, bind, resolve) => {
|
|
|
7017
7026
|
};
|
|
7018
7027
|
|
|
7019
7028
|
// src/styles-inheritance/components/infotip/breakpoint-icon.tsx
|
|
7020
|
-
import * as
|
|
7029
|
+
import * as React98 from "react";
|
|
7021
7030
|
import { useBreakpoints } from "@elementor/editor-responsive";
|
|
7022
7031
|
import {
|
|
7023
7032
|
DesktopIcon,
|
|
@@ -7048,20 +7057,20 @@ var BreakpointIcon = ({ breakpoint }) => {
|
|
|
7048
7057
|
return null;
|
|
7049
7058
|
}
|
|
7050
7059
|
const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
|
|
7051
|
-
return /* @__PURE__ */
|
|
7060
|
+
return /* @__PURE__ */ React98.createElement(Tooltip3, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React98.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
|
|
7052
7061
|
};
|
|
7053
7062
|
|
|
7054
7063
|
// src/styles-inheritance/components/infotip/label-chip.tsx
|
|
7055
|
-
import * as
|
|
7064
|
+
import * as React99 from "react";
|
|
7056
7065
|
import { ELEMENTS_BASE_STYLES_PROVIDER_KEY as ELEMENTS_BASE_STYLES_PROVIDER_KEY3 } from "@elementor/editor-styles-repository";
|
|
7057
7066
|
import { InfoCircleIcon } from "@elementor/icons";
|
|
7058
7067
|
import { Chip as Chip5, Tooltip as Tooltip4 } from "@elementor/ui";
|
|
7059
|
-
import { __ as
|
|
7068
|
+
import { __ as __72 } from "@wordpress/i18n";
|
|
7060
7069
|
var SIZE5 = "tiny";
|
|
7061
7070
|
var LabelChip = ({ displayLabel, provider }) => {
|
|
7062
7071
|
const isBaseStyle = provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY3;
|
|
7063
|
-
const chipIcon = isBaseStyle ? /* @__PURE__ */
|
|
7064
|
-
return /* @__PURE__ */
|
|
7072
|
+
const chipIcon = isBaseStyle ? /* @__PURE__ */ React99.createElement(Tooltip4, { title: __72("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React99.createElement(InfoCircleIcon, { fontSize: SIZE5 })) : void 0;
|
|
7073
|
+
return /* @__PURE__ */ React99.createElement(
|
|
7065
7074
|
Chip5,
|
|
7066
7075
|
{
|
|
7067
7076
|
label: displayLabel,
|
|
@@ -7087,10 +7096,10 @@ var LabelChip = ({ displayLabel, provider }) => {
|
|
|
7087
7096
|
};
|
|
7088
7097
|
|
|
7089
7098
|
// src/styles-inheritance/components/infotip/value-component.tsx
|
|
7090
|
-
import * as
|
|
7099
|
+
import * as React100 from "react";
|
|
7091
7100
|
import { Tooltip as Tooltip5, Typography as Typography7 } from "@elementor/ui";
|
|
7092
7101
|
var ValueComponent = ({ index, value }) => {
|
|
7093
|
-
return /* @__PURE__ */
|
|
7102
|
+
return /* @__PURE__ */ React100.createElement(Tooltip5, { title: value, placement: "top" }, /* @__PURE__ */ React100.createElement(
|
|
7094
7103
|
Typography7,
|
|
7095
7104
|
{
|
|
7096
7105
|
variant: "caption",
|
|
@@ -7112,9 +7121,9 @@ var ValueComponent = ({ index, value }) => {
|
|
|
7112
7121
|
};
|
|
7113
7122
|
|
|
7114
7123
|
// src/styles-inheritance/components/infotip/action-icons.tsx
|
|
7115
|
-
import * as
|
|
7124
|
+
import * as React101 from "react";
|
|
7116
7125
|
import { Box as Box8 } from "@elementor/ui";
|
|
7117
|
-
var ActionIcons = () => /* @__PURE__ */
|
|
7126
|
+
var ActionIcons = () => /* @__PURE__ */ React101.createElement(Box8, { display: "flex", gap: 0.5, alignItems: "center" });
|
|
7118
7127
|
|
|
7119
7128
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
7120
7129
|
var SECTION_PADDING_INLINE = 32;
|
|
@@ -7150,7 +7159,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7150
7159
|
});
|
|
7151
7160
|
}, [key, propType]);
|
|
7152
7161
|
const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
|
|
7153
|
-
const infotipContent = /* @__PURE__ */
|
|
7162
|
+
const infotipContent = /* @__PURE__ */ React102.createElement(ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React102.createElement(
|
|
7154
7163
|
Card,
|
|
7155
7164
|
{
|
|
7156
7165
|
elevation: 0,
|
|
@@ -7163,7 +7172,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7163
7172
|
flexDirection: "column"
|
|
7164
7173
|
}
|
|
7165
7174
|
},
|
|
7166
|
-
/* @__PURE__ */
|
|
7175
|
+
/* @__PURE__ */ React102.createElement(
|
|
7167
7176
|
Box9,
|
|
7168
7177
|
{
|
|
7169
7178
|
sx: {
|
|
@@ -7173,9 +7182,9 @@ var StylesInheritanceInfotip = ({
|
|
|
7173
7182
|
backgroundColor: "background.paper"
|
|
7174
7183
|
}
|
|
7175
7184
|
},
|
|
7176
|
-
/* @__PURE__ */
|
|
7185
|
+
/* @__PURE__ */ React102.createElement(PopoverHeader3, { title: __73("Style origin", "elementor"), onClose: closeInfotip })
|
|
7177
7186
|
),
|
|
7178
|
-
/* @__PURE__ */
|
|
7187
|
+
/* @__PURE__ */ React102.createElement(
|
|
7179
7188
|
CardContent,
|
|
7180
7189
|
{
|
|
7181
7190
|
sx: {
|
|
@@ -7189,39 +7198,39 @@ var StylesInheritanceInfotip = ({
|
|
|
7189
7198
|
}
|
|
7190
7199
|
}
|
|
7191
7200
|
},
|
|
7192
|
-
/* @__PURE__ */
|
|
7193
|
-
return /* @__PURE__ */
|
|
7201
|
+
/* @__PURE__ */ React102.createElement(Stack17, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
|
|
7202
|
+
return /* @__PURE__ */ React102.createElement(
|
|
7194
7203
|
Box9,
|
|
7195
7204
|
{
|
|
7196
7205
|
key: item.id,
|
|
7197
7206
|
display: "flex",
|
|
7198
7207
|
gap: 0.5,
|
|
7199
7208
|
role: "listitem",
|
|
7200
|
-
"aria-label":
|
|
7209
|
+
"aria-label": __73("Inheritance item: %s", "elementor").replace(
|
|
7201
7210
|
"%s",
|
|
7202
7211
|
item.displayLabel
|
|
7203
7212
|
)
|
|
7204
7213
|
},
|
|
7205
|
-
/* @__PURE__ */
|
|
7214
|
+
/* @__PURE__ */ React102.createElement(
|
|
7206
7215
|
Box9,
|
|
7207
7216
|
{
|
|
7208
7217
|
display: "flex",
|
|
7209
7218
|
gap: 0.5,
|
|
7210
7219
|
sx: { flexWrap: "wrap", width: "100%", alignItems: "flex-start" }
|
|
7211
7220
|
},
|
|
7212
|
-
/* @__PURE__ */
|
|
7213
|
-
/* @__PURE__ */
|
|
7214
|
-
/* @__PURE__ */
|
|
7221
|
+
/* @__PURE__ */ React102.createElement(BreakpointIcon, { breakpoint: item.breakpoint }),
|
|
7222
|
+
/* @__PURE__ */ React102.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }),
|
|
7223
|
+
/* @__PURE__ */ React102.createElement(ValueComponent, { index, value: item.value })
|
|
7215
7224
|
),
|
|
7216
|
-
/* @__PURE__ */
|
|
7225
|
+
/* @__PURE__ */ React102.createElement(ActionIcons, null)
|
|
7217
7226
|
);
|
|
7218
7227
|
}))
|
|
7219
7228
|
)
|
|
7220
7229
|
));
|
|
7221
7230
|
if (isDisabled) {
|
|
7222
|
-
return /* @__PURE__ */
|
|
7231
|
+
return /* @__PURE__ */ React102.createElement(Box9, { sx: { display: "inline-flex" } }, children);
|
|
7223
7232
|
}
|
|
7224
|
-
return /* @__PURE__ */
|
|
7233
|
+
return /* @__PURE__ */ React102.createElement(Box9, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React102.createElement(
|
|
7225
7234
|
TooltipOrInfotip,
|
|
7226
7235
|
{
|
|
7227
7236
|
showInfotip,
|
|
@@ -7229,7 +7238,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7229
7238
|
infotipContent,
|
|
7230
7239
|
isDisabled
|
|
7231
7240
|
},
|
|
7232
|
-
/* @__PURE__ */
|
|
7241
|
+
/* @__PURE__ */ React102.createElement(
|
|
7233
7242
|
IconButton3,
|
|
7234
7243
|
{
|
|
7235
7244
|
onClick: toggleInfotip,
|
|
@@ -7249,10 +7258,10 @@ function TooltipOrInfotip({
|
|
|
7249
7258
|
isDisabled
|
|
7250
7259
|
}) {
|
|
7251
7260
|
if (isDisabled) {
|
|
7252
|
-
return /* @__PURE__ */
|
|
7261
|
+
return /* @__PURE__ */ React102.createElement(Box9, { sx: { display: "inline-flex" } }, children);
|
|
7253
7262
|
}
|
|
7254
7263
|
if (showInfotip) {
|
|
7255
|
-
return /* @__PURE__ */
|
|
7264
|
+
return /* @__PURE__ */ React102.createElement(React102.Fragment, null, /* @__PURE__ */ React102.createElement(
|
|
7256
7265
|
Backdrop,
|
|
7257
7266
|
{
|
|
7258
7267
|
open: showInfotip,
|
|
@@ -7262,7 +7271,7 @@ function TooltipOrInfotip({
|
|
|
7262
7271
|
zIndex: (theme) => theme.zIndex.modal - 1
|
|
7263
7272
|
}
|
|
7264
7273
|
}
|
|
7265
|
-
), /* @__PURE__ */
|
|
7274
|
+
), /* @__PURE__ */ React102.createElement(
|
|
7266
7275
|
Infotip3,
|
|
7267
7276
|
{
|
|
7268
7277
|
placement: "top-end",
|
|
@@ -7274,7 +7283,7 @@ function TooltipOrInfotip({
|
|
|
7274
7283
|
children
|
|
7275
7284
|
));
|
|
7276
7285
|
}
|
|
7277
|
-
return /* @__PURE__ */
|
|
7286
|
+
return /* @__PURE__ */ React102.createElement(Tooltip6, { title: __73("Style origin", "elementor"), placement: "top" }, children);
|
|
7278
7287
|
}
|
|
7279
7288
|
|
|
7280
7289
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
@@ -7287,7 +7296,7 @@ var StylesInheritanceIndicator = ({
|
|
|
7287
7296
|
if (!path || !inheritanceChain.length) {
|
|
7288
7297
|
return null;
|
|
7289
7298
|
}
|
|
7290
|
-
return /* @__PURE__ */
|
|
7299
|
+
return /* @__PURE__ */ React103.createElement(Indicator, { inheritanceChain, path, propType });
|
|
7291
7300
|
};
|
|
7292
7301
|
var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
7293
7302
|
const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
|
|
@@ -7303,7 +7312,7 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
7303
7312
|
getColor: isFinalValue && currentStyleProvider ? getStylesProviderThemeColor(currentStyleProvider.getKey()) : void 0,
|
|
7304
7313
|
isOverridden: hasValue && !isFinalValue ? true : void 0
|
|
7305
7314
|
};
|
|
7306
|
-
return /* @__PURE__ */
|
|
7315
|
+
return /* @__PURE__ */ React103.createElement(
|
|
7307
7316
|
StylesInheritanceInfotip,
|
|
7308
7317
|
{
|
|
7309
7318
|
inheritanceChain,
|
|
@@ -7312,17 +7321,17 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
7312
7321
|
label,
|
|
7313
7322
|
isDisabled
|
|
7314
7323
|
},
|
|
7315
|
-
/* @__PURE__ */
|
|
7324
|
+
/* @__PURE__ */ React103.createElement(StyleIndicator, { ...styleIndicatorProps })
|
|
7316
7325
|
);
|
|
7317
7326
|
};
|
|
7318
7327
|
var getLabel = ({ isFinalValue, hasValue }) => {
|
|
7319
7328
|
if (isFinalValue) {
|
|
7320
|
-
return
|
|
7329
|
+
return __74("This is the final value", "elementor");
|
|
7321
7330
|
}
|
|
7322
7331
|
if (hasValue) {
|
|
7323
|
-
return
|
|
7332
|
+
return __74("This value is overridden by another style", "elementor");
|
|
7324
7333
|
}
|
|
7325
|
-
return
|
|
7334
|
+
return __74("This has value from another style", "elementor");
|
|
7326
7335
|
};
|
|
7327
7336
|
|
|
7328
7337
|
// src/styles-inheritance/init-styles-inheritance-transformers.ts
|
|
@@ -7347,7 +7356,7 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
|
|
|
7347
7356
|
]);
|
|
7348
7357
|
|
|
7349
7358
|
// src/styles-inheritance/transformers/array-transformer.tsx
|
|
7350
|
-
import * as
|
|
7359
|
+
import * as React104 from "react";
|
|
7351
7360
|
import { createTransformer as createTransformer2 } from "@elementor/editor-canvas";
|
|
7352
7361
|
var arrayTransformer = createTransformer2((values) => {
|
|
7353
7362
|
if (!values || values.length === 0) {
|
|
@@ -7357,16 +7366,16 @@ var arrayTransformer = createTransformer2((values) => {
|
|
|
7357
7366
|
if (allStrings) {
|
|
7358
7367
|
return values.join(" ");
|
|
7359
7368
|
}
|
|
7360
|
-
return /* @__PURE__ */
|
|
7369
|
+
return /* @__PURE__ */ React104.createElement(React104.Fragment, null, values.map((item, index) => /* @__PURE__ */ React104.createElement(React104.Fragment, { key: index }, index > 0 && " ", item)));
|
|
7361
7370
|
});
|
|
7362
7371
|
|
|
7363
7372
|
// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
|
|
7364
|
-
import * as
|
|
7373
|
+
import * as React105 from "react";
|
|
7365
7374
|
import { createTransformer as createTransformer3 } from "@elementor/editor-canvas";
|
|
7366
7375
|
import { Stack as Stack18, styled as styled7, UnstableColorIndicator } from "@elementor/ui";
|
|
7367
|
-
var backgroundColorOverlayTransformer = createTransformer3((value) => /* @__PURE__ */
|
|
7376
|
+
var backgroundColorOverlayTransformer = createTransformer3((value) => /* @__PURE__ */ React105.createElement(Stack18, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React105.createElement(ItemLabelColor, { value })));
|
|
7368
7377
|
var ItemLabelColor = ({ value: { color } }) => {
|
|
7369
|
-
return /* @__PURE__ */
|
|
7378
|
+
return /* @__PURE__ */ React105.createElement("span", null, color);
|
|
7370
7379
|
};
|
|
7371
7380
|
var StyledUnstableColorIndicator = styled7(UnstableColorIndicator)(({ theme }) => ({
|
|
7372
7381
|
width: "1em",
|
|
@@ -7377,20 +7386,20 @@ var StyledUnstableColorIndicator = styled7(UnstableColorIndicator)(({ theme }) =
|
|
|
7377
7386
|
}));
|
|
7378
7387
|
|
|
7379
7388
|
// src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
|
|
7380
|
-
import * as
|
|
7389
|
+
import * as React106 from "react";
|
|
7381
7390
|
import { createTransformer as createTransformer4 } from "@elementor/editor-canvas";
|
|
7382
7391
|
import { Stack as Stack19 } from "@elementor/ui";
|
|
7383
|
-
import { __ as
|
|
7384
|
-
var backgroundGradientOverlayTransformer = createTransformer4((value) => /* @__PURE__ */
|
|
7392
|
+
import { __ as __75 } from "@wordpress/i18n";
|
|
7393
|
+
var backgroundGradientOverlayTransformer = createTransformer4((value) => /* @__PURE__ */ React106.createElement(Stack19, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React106.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React106.createElement(ItemLabelGradient, { value })));
|
|
7385
7394
|
var ItemIconGradient = ({ value }) => {
|
|
7386
7395
|
const gradient = getGradientValue(value);
|
|
7387
|
-
return /* @__PURE__ */
|
|
7396
|
+
return /* @__PURE__ */ React106.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
7388
7397
|
};
|
|
7389
7398
|
var ItemLabelGradient = ({ value }) => {
|
|
7390
7399
|
if (value.type === "linear") {
|
|
7391
|
-
return /* @__PURE__ */
|
|
7400
|
+
return /* @__PURE__ */ React106.createElement("span", null, __75("Linear gradient", "elementor"));
|
|
7392
7401
|
}
|
|
7393
|
-
return /* @__PURE__ */
|
|
7402
|
+
return /* @__PURE__ */ React106.createElement("span", null, __75("Radial gradient", "elementor"));
|
|
7394
7403
|
};
|
|
7395
7404
|
var getGradientValue = (gradient) => {
|
|
7396
7405
|
const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
|
|
@@ -7401,15 +7410,15 @@ var getGradientValue = (gradient) => {
|
|
|
7401
7410
|
};
|
|
7402
7411
|
|
|
7403
7412
|
// src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
|
|
7404
|
-
import * as
|
|
7413
|
+
import * as React107 from "react";
|
|
7405
7414
|
import { createTransformer as createTransformer5 } from "@elementor/editor-canvas";
|
|
7406
7415
|
import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
|
|
7407
7416
|
import { CardMedia, Stack as Stack20 } from "@elementor/ui";
|
|
7408
7417
|
import { useWpMediaAttachment } from "@elementor/wp-media";
|
|
7409
|
-
var backgroundImageOverlayTransformer = createTransformer5((value) => /* @__PURE__ */
|
|
7418
|
+
var backgroundImageOverlayTransformer = createTransformer5((value) => /* @__PURE__ */ React107.createElement(Stack20, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React107.createElement(ItemIconImage, { value }), /* @__PURE__ */ React107.createElement(ItemLabelImage, { value })));
|
|
7410
7419
|
var ItemIconImage = ({ value }) => {
|
|
7411
7420
|
const { imageUrl } = useImage(value);
|
|
7412
|
-
return /* @__PURE__ */
|
|
7421
|
+
return /* @__PURE__ */ React107.createElement(
|
|
7413
7422
|
CardMedia,
|
|
7414
7423
|
{
|
|
7415
7424
|
image: imageUrl,
|
|
@@ -7425,7 +7434,7 @@ var ItemIconImage = ({ value }) => {
|
|
|
7425
7434
|
};
|
|
7426
7435
|
var ItemLabelImage = ({ value }) => {
|
|
7427
7436
|
const { imageTitle } = useImage(value);
|
|
7428
|
-
return /* @__PURE__ */
|
|
7437
|
+
return /* @__PURE__ */ React107.createElement(EllipsisWithTooltip2, { title: imageTitle }, /* @__PURE__ */ React107.createElement("span", null, imageTitle));
|
|
7429
7438
|
};
|
|
7430
7439
|
var useImage = (image) => {
|
|
7431
7440
|
let imageTitle, imageUrl = null;
|
|
@@ -7450,7 +7459,7 @@ var getFileExtensionFromFilename = (filename) => {
|
|
|
7450
7459
|
};
|
|
7451
7460
|
|
|
7452
7461
|
// src/styles-inheritance/transformers/box-shadow-transformer.tsx
|
|
7453
|
-
import * as
|
|
7462
|
+
import * as React108 from "react";
|
|
7454
7463
|
import { createTransformer as createTransformer6 } from "@elementor/editor-canvas";
|
|
7455
7464
|
var boxShadowTransformer = createTransformer6((value) => {
|
|
7456
7465
|
if (!value) {
|
|
@@ -7460,11 +7469,11 @@ var boxShadowTransformer = createTransformer6((value) => {
|
|
|
7460
7469
|
const colorValue = color || "#000000";
|
|
7461
7470
|
const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
|
|
7462
7471
|
const positionValue = position || "outset";
|
|
7463
|
-
return /* @__PURE__ */
|
|
7472
|
+
return /* @__PURE__ */ React108.createElement(React108.Fragment, null, colorValue, " ", positionValue, ", ", sizes);
|
|
7464
7473
|
});
|
|
7465
7474
|
|
|
7466
7475
|
// src/styles-inheritance/transformers/color-transformer.tsx
|
|
7467
|
-
import * as
|
|
7476
|
+
import * as React109 from "react";
|
|
7468
7477
|
import { createTransformer as createTransformer7 } from "@elementor/editor-canvas";
|
|
7469
7478
|
import { Stack as Stack21, styled as styled8, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
|
|
7470
7479
|
function isValidCSSColor(value) {
|
|
@@ -7484,7 +7493,7 @@ var colorTransformer = createTransformer7((value) => {
|
|
|
7484
7493
|
if (!isValidCSSColor(value)) {
|
|
7485
7494
|
return value;
|
|
7486
7495
|
}
|
|
7487
|
-
return /* @__PURE__ */
|
|
7496
|
+
return /* @__PURE__ */ React109.createElement(Stack21, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React109.createElement("span", null, value));
|
|
7488
7497
|
});
|
|
7489
7498
|
|
|
7490
7499
|
// src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
|
|
@@ -7576,6 +7585,7 @@ export {
|
|
|
7576
7585
|
Control as BaseControl,
|
|
7577
7586
|
ControlTypeContainer,
|
|
7578
7587
|
CustomCssIndicator,
|
|
7588
|
+
EditingPanelTabs,
|
|
7579
7589
|
ElementProvider,
|
|
7580
7590
|
FIELD_TYPE,
|
|
7581
7591
|
HISTORY_DEBOUNCE_WAIT,
|