@elementor/editor-editing-panel 4.1.0-817 → 4.1.0-819
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 +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +806 -690
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +656 -535
- package/dist/index.mjs.map +1 -1
- package/package.json +21 -21
- package/src/components/style-sections/layout-section/align-self-grid-child-field.tsx +74 -0
- package/src/components/style-sections/layout-section/grid-span-field.tsx +78 -0
- package/src/components/style-sections/layout-section/layout-section.tsx +33 -3
- package/src/components/style-sections/position-section/position-section.tsx +1 -1
- package/src/components/style-sections/position-section/z-index-field.tsx +29 -3
- package/src/components/style-tab.tsx +3 -0
package/dist/index.js
CHANGED
|
@@ -1815,17 +1815,17 @@ var hasInheritedCustomCss = (style, meta) => {
|
|
|
1815
1815
|
};
|
|
1816
1816
|
|
|
1817
1817
|
// src/components/editing-panel.tsx
|
|
1818
|
-
var
|
|
1819
|
-
var
|
|
1818
|
+
var React87 = __toESM(require("react"));
|
|
1819
|
+
var import_editor_controls54 = require("@elementor/editor-controls");
|
|
1820
1820
|
var import_editor_elements13 = require("@elementor/editor-elements");
|
|
1821
1821
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
1822
1822
|
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
1823
|
-
var
|
|
1823
|
+
var import_icons25 = require("@elementor/icons");
|
|
1824
1824
|
var import_locations4 = require("@elementor/locations");
|
|
1825
1825
|
var import_menus = require("@elementor/menus");
|
|
1826
1826
|
var import_session9 = require("@elementor/session");
|
|
1827
|
-
var
|
|
1828
|
-
var
|
|
1827
|
+
var import_ui41 = require("@elementor/ui");
|
|
1828
|
+
var import_i18n61 = require("@wordpress/i18n");
|
|
1829
1829
|
|
|
1830
1830
|
// src/editing-panel-replacement-registry.tsx
|
|
1831
1831
|
var registry = /* @__PURE__ */ new Map();
|
|
@@ -1848,11 +1848,11 @@ function EditorPanelErrorFallback() {
|
|
|
1848
1848
|
|
|
1849
1849
|
// src/components/editing-panel-tabs.tsx
|
|
1850
1850
|
var import_react38 = require("react");
|
|
1851
|
-
var
|
|
1851
|
+
var React86 = __toESM(require("react"));
|
|
1852
1852
|
var import_editor_elements12 = require("@elementor/editor-elements");
|
|
1853
1853
|
var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
|
|
1854
|
-
var
|
|
1855
|
-
var
|
|
1854
|
+
var import_ui40 = require("@elementor/ui");
|
|
1855
|
+
var import_i18n60 = require("@wordpress/i18n");
|
|
1856
1856
|
|
|
1857
1857
|
// src/contexts/scroll-context.tsx
|
|
1858
1858
|
var React14 = __toESM(require("react"));
|
|
@@ -2472,14 +2472,14 @@ function isControl(control) {
|
|
|
2472
2472
|
}
|
|
2473
2473
|
|
|
2474
2474
|
// src/components/style-tab.tsx
|
|
2475
|
-
var
|
|
2475
|
+
var React85 = __toESM(require("react"));
|
|
2476
2476
|
var import_react37 = require("react");
|
|
2477
2477
|
var import_editor_props14 = require("@elementor/editor-props");
|
|
2478
2478
|
var import_editor_responsive3 = require("@elementor/editor-responsive");
|
|
2479
2479
|
var import_locations3 = require("@elementor/locations");
|
|
2480
2480
|
var import_session8 = require("@elementor/session");
|
|
2481
|
-
var
|
|
2482
|
-
var
|
|
2481
|
+
var import_ui39 = require("@elementor/ui");
|
|
2482
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
2483
2483
|
|
|
2484
2484
|
// src/contexts/styles-inheritance-context.tsx
|
|
2485
2485
|
var React24 = __toESM(require("react"));
|
|
@@ -3277,11 +3277,11 @@ var EffectsSection = () => {
|
|
|
3277
3277
|
};
|
|
3278
3278
|
|
|
3279
3279
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
3280
|
-
var
|
|
3281
|
-
var
|
|
3280
|
+
var React55 = __toESM(require("react"));
|
|
3281
|
+
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
3282
3282
|
var import_editor_elements11 = require("@elementor/editor-elements");
|
|
3283
3283
|
var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
|
|
3284
|
-
var
|
|
3284
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
3285
3285
|
|
|
3286
3286
|
// src/hooks/use-computed-style.ts
|
|
3287
3287
|
var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
|
|
@@ -3531,48 +3531,94 @@ var getOptions = (parentStyleDirection) => [
|
|
|
3531
3531
|
];
|
|
3532
3532
|
var AlignSelfChild = ({ parentStyleDirection }) => /* @__PURE__ */ React42.createElement(StylesField, { bind: "align-self", propDisplayName: ALIGN_SELF_LABEL }, /* @__PURE__ */ React42.createElement(UiProviders, null, /* @__PURE__ */ React42.createElement(StylesFieldLayout, { label: ALIGN_SELF_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls17.ToggleControl, { options: getOptions(parentStyleDirection) }))));
|
|
3533
3533
|
|
|
3534
|
-
// src/components/style-sections/layout-section/
|
|
3534
|
+
// src/components/style-sections/layout-section/align-self-grid-child-field.tsx
|
|
3535
3535
|
var React43 = __toESM(require("react"));
|
|
3536
|
-
var import_react24 = require("react");
|
|
3537
3536
|
var import_editor_controls18 = require("@elementor/editor-controls");
|
|
3538
|
-
var
|
|
3537
|
+
var import_icons8 = require("@elementor/icons");
|
|
3539
3538
|
var import_i18n21 = require("@wordpress/i18n");
|
|
3540
|
-
var
|
|
3539
|
+
var ALIGN_SELF_LABEL2 = (0, import_i18n21.__)("Align self", "elementor");
|
|
3540
|
+
var ALIGN_SELF_CHILD_OFFSET_MAP2 = {
|
|
3541
|
+
row: 0,
|
|
3542
|
+
column: -90
|
|
3543
|
+
};
|
|
3544
|
+
var AlignSelfGridChild = ({ parentStyleDirection }) => /* @__PURE__ */ React43.createElement(StylesField, { bind: "align-self", propDisplayName: ALIGN_SELF_LABEL2 }, /* @__PURE__ */ React43.createElement(UiProviders, null, /* @__PURE__ */ React43.createElement(StylesFieldLayout, { label: ALIGN_SELF_LABEL2 }, /* @__PURE__ */ React43.createElement(import_editor_controls18.ToggleControl, { options: getOptions2(parentStyleDirection ?? "row") }))));
|
|
3545
|
+
var RotatedIcon2 = ({
|
|
3546
|
+
icon: Icon,
|
|
3547
|
+
size,
|
|
3548
|
+
offset
|
|
3549
|
+
}) => /* @__PURE__ */ React43.createElement(Icon, { fontSize: size, sx: { rotate: `${offset}deg` } });
|
|
3550
|
+
var getOptions2 = (parentStyleDirection) => {
|
|
3551
|
+
const offset = ALIGN_SELF_CHILD_OFFSET_MAP2[parentStyleDirection.replace("dense", "").trim()];
|
|
3552
|
+
return [
|
|
3553
|
+
{
|
|
3554
|
+
value: "start",
|
|
3555
|
+
label: (0, import_i18n21.__)("Start", "elementor"),
|
|
3556
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(RotatedIcon2, { icon: import_icons8.JustifyTopIcon, size, offset }),
|
|
3557
|
+
showTooltip: true
|
|
3558
|
+
},
|
|
3559
|
+
{
|
|
3560
|
+
value: "center",
|
|
3561
|
+
label: (0, import_i18n21.__)("Center", "elementor"),
|
|
3562
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(RotatedIcon2, { icon: import_icons8.JustifyCenterIcon, size, offset }),
|
|
3563
|
+
showTooltip: true
|
|
3564
|
+
},
|
|
3565
|
+
{
|
|
3566
|
+
value: "end",
|
|
3567
|
+
label: (0, import_i18n21.__)("End", "elementor"),
|
|
3568
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(RotatedIcon2, { icon: import_icons8.JustifyBottomIcon, size, offset }),
|
|
3569
|
+
showTooltip: true
|
|
3570
|
+
},
|
|
3571
|
+
{
|
|
3572
|
+
value: "stretch",
|
|
3573
|
+
label: (0, import_i18n21.__)("Stretch", "elementor"),
|
|
3574
|
+
renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(RotatedIcon2, { icon: import_icons8.LayoutDistributeVerticalIcon, size, offset }),
|
|
3575
|
+
showTooltip: true
|
|
3576
|
+
}
|
|
3577
|
+
];
|
|
3578
|
+
};
|
|
3579
|
+
|
|
3580
|
+
// src/components/style-sections/layout-section/display-field.tsx
|
|
3581
|
+
var React44 = __toESM(require("react"));
|
|
3582
|
+
var import_react24 = require("react");
|
|
3583
|
+
var import_editor_controls19 = require("@elementor/editor-controls");
|
|
3584
|
+
var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
|
|
3585
|
+
var import_i18n22 = require("@wordpress/i18n");
|
|
3586
|
+
var DISPLAY_LABEL = (0, import_i18n22.__)("Display", "elementor");
|
|
3541
3587
|
var displayFieldItems = [
|
|
3542
3588
|
{
|
|
3543
3589
|
value: "block",
|
|
3544
|
-
renderContent: () => (0,
|
|
3545
|
-
label: (0,
|
|
3590
|
+
renderContent: () => (0, import_i18n22.__)("Block", "elementor"),
|
|
3591
|
+
label: (0, import_i18n22.__)("Block", "elementor"),
|
|
3546
3592
|
showTooltip: true
|
|
3547
3593
|
},
|
|
3548
3594
|
{
|
|
3549
3595
|
value: "flex",
|
|
3550
|
-
renderContent: () => (0,
|
|
3551
|
-
label: (0,
|
|
3596
|
+
renderContent: () => (0, import_i18n22.__)("Flex", "elementor"),
|
|
3597
|
+
label: (0, import_i18n22.__)("Flex", "elementor"),
|
|
3552
3598
|
showTooltip: true
|
|
3553
3599
|
},
|
|
3554
3600
|
{
|
|
3555
3601
|
value: "grid",
|
|
3556
|
-
renderContent: () => (0,
|
|
3557
|
-
label: (0,
|
|
3602
|
+
renderContent: () => (0, import_i18n22.__)("Grid", "elementor"),
|
|
3603
|
+
label: (0, import_i18n22.__)("Grid", "elementor"),
|
|
3558
3604
|
showTooltip: true
|
|
3559
3605
|
},
|
|
3560
3606
|
{
|
|
3561
3607
|
value: "inline-block",
|
|
3562
|
-
renderContent: () => (0,
|
|
3563
|
-
label: (0,
|
|
3608
|
+
renderContent: () => (0, import_i18n22.__)("In-blk", "elementor"),
|
|
3609
|
+
label: (0, import_i18n22.__)("Inline-block", "elementor"),
|
|
3564
3610
|
showTooltip: true
|
|
3565
3611
|
},
|
|
3566
3612
|
{
|
|
3567
3613
|
value: "inline-flex",
|
|
3568
|
-
renderContent: () => (0,
|
|
3569
|
-
label: (0,
|
|
3614
|
+
renderContent: () => (0, import_i18n22.__)("In-flx", "elementor"),
|
|
3615
|
+
label: (0, import_i18n22.__)("Inline-flex", "elementor"),
|
|
3570
3616
|
showTooltip: true
|
|
3571
3617
|
},
|
|
3572
3618
|
{
|
|
3573
3619
|
value: "none",
|
|
3574
|
-
renderContent: () => (0,
|
|
3575
|
-
label: (0,
|
|
3620
|
+
renderContent: () => (0, import_i18n22.__)("None", "elementor"),
|
|
3621
|
+
label: (0, import_i18n22.__)("None", "elementor"),
|
|
3576
3622
|
showTooltip: true
|
|
3577
3623
|
}
|
|
3578
3624
|
];
|
|
@@ -3583,61 +3629,61 @@ var DisplayField = () => {
|
|
|
3583
3629
|
() => isGridActive ? displayFieldItems : displayFieldItems.filter((item) => item.value !== "grid"),
|
|
3584
3630
|
[isGridActive]
|
|
3585
3631
|
);
|
|
3586
|
-
return /* @__PURE__ */
|
|
3632
|
+
return /* @__PURE__ */ React44.createElement(StylesField, { bind: "display", propDisplayName: DISPLAY_LABEL, placeholder }, /* @__PURE__ */ React44.createElement(StylesFieldLayout, { label: DISPLAY_LABEL, direction: "column" }, /* @__PURE__ */ React44.createElement(import_editor_controls19.ToggleControl, { options: items3, maxItems: 4, fullWidth: true })));
|
|
3587
3633
|
};
|
|
3588
3634
|
var useDisplayPlaceholderValue = () => useStylesInheritanceChain(["display"])[0]?.value ?? void 0;
|
|
3589
3635
|
|
|
3590
3636
|
// src/components/style-sections/layout-section/flex-direction-field.tsx
|
|
3591
|
-
var
|
|
3592
|
-
var
|
|
3593
|
-
var
|
|
3637
|
+
var React45 = __toESM(require("react"));
|
|
3638
|
+
var import_editor_controls20 = require("@elementor/editor-controls");
|
|
3639
|
+
var import_icons9 = require("@elementor/icons");
|
|
3594
3640
|
var import_ui26 = require("@elementor/ui");
|
|
3595
|
-
var
|
|
3596
|
-
var FLEX_DIRECTION_LABEL2 = (0,
|
|
3641
|
+
var import_i18n23 = require("@wordpress/i18n");
|
|
3642
|
+
var FLEX_DIRECTION_LABEL2 = (0, import_i18n23.__)("Direction", "elementor");
|
|
3597
3643
|
var options3 = [
|
|
3598
3644
|
{
|
|
3599
3645
|
value: "row",
|
|
3600
|
-
label: (0,
|
|
3646
|
+
label: (0, import_i18n23.__)("Row", "elementor"),
|
|
3601
3647
|
renderContent: ({ size }) => {
|
|
3602
|
-
const StartIcon7 = (0, import_ui26.withDirection)(
|
|
3603
|
-
return /* @__PURE__ */
|
|
3648
|
+
const StartIcon7 = (0, import_ui26.withDirection)(import_icons9.ArrowRightIcon);
|
|
3649
|
+
return /* @__PURE__ */ React45.createElement(StartIcon7, { fontSize: size });
|
|
3604
3650
|
},
|
|
3605
3651
|
showTooltip: true
|
|
3606
3652
|
},
|
|
3607
3653
|
{
|
|
3608
3654
|
value: "column",
|
|
3609
|
-
label: (0,
|
|
3610
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3655
|
+
label: (0, import_i18n23.__)("Column", "elementor"),
|
|
3656
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(import_icons9.ArrowDownSmallIcon, { fontSize: size }),
|
|
3611
3657
|
showTooltip: true
|
|
3612
3658
|
},
|
|
3613
3659
|
{
|
|
3614
3660
|
value: "row-reverse",
|
|
3615
|
-
label: (0,
|
|
3661
|
+
label: (0, import_i18n23.__)("Reversed row", "elementor"),
|
|
3616
3662
|
renderContent: ({ size }) => {
|
|
3617
|
-
const EndIcon6 = (0, import_ui26.withDirection)(
|
|
3618
|
-
return /* @__PURE__ */
|
|
3663
|
+
const EndIcon6 = (0, import_ui26.withDirection)(import_icons9.ArrowLeftIcon);
|
|
3664
|
+
return /* @__PURE__ */ React45.createElement(EndIcon6, { fontSize: size });
|
|
3619
3665
|
},
|
|
3620
3666
|
showTooltip: true
|
|
3621
3667
|
},
|
|
3622
3668
|
{
|
|
3623
3669
|
value: "column-reverse",
|
|
3624
|
-
label: (0,
|
|
3625
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3670
|
+
label: (0, import_i18n23.__)("Reversed column", "elementor"),
|
|
3671
|
+
renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(import_icons9.ArrowUpSmallIcon, { fontSize: size }),
|
|
3626
3672
|
showTooltip: true
|
|
3627
3673
|
}
|
|
3628
3674
|
];
|
|
3629
3675
|
var FlexDirectionField = () => {
|
|
3630
|
-
return /* @__PURE__ */
|
|
3676
|
+
return /* @__PURE__ */ React45.createElement(StylesField, { bind: "flex-direction", propDisplayName: FLEX_DIRECTION_LABEL2 }, /* @__PURE__ */ React45.createElement(UiProviders, null, /* @__PURE__ */ React45.createElement(StylesFieldLayout, { label: FLEX_DIRECTION_LABEL2 }, /* @__PURE__ */ React45.createElement(import_editor_controls20.ToggleControl, { options: options3 }))));
|
|
3631
3677
|
};
|
|
3632
3678
|
|
|
3633
3679
|
// src/components/style-sections/layout-section/flex-order-field.tsx
|
|
3634
|
-
var
|
|
3680
|
+
var React46 = __toESM(require("react"));
|
|
3635
3681
|
var import_react25 = require("react");
|
|
3636
|
-
var
|
|
3637
|
-
var
|
|
3682
|
+
var import_editor_controls21 = require("@elementor/editor-controls");
|
|
3683
|
+
var import_icons10 = require("@elementor/icons");
|
|
3638
3684
|
var import_ui27 = require("@elementor/ui");
|
|
3639
|
-
var
|
|
3640
|
-
var ORDER_LABEL = (0,
|
|
3685
|
+
var import_i18n24 = require("@wordpress/i18n");
|
|
3686
|
+
var ORDER_LABEL = (0, import_i18n24.__)("Order", "elementor");
|
|
3641
3687
|
var FIRST_DEFAULT_VALUE = -99999;
|
|
3642
3688
|
var LAST_DEFAULT_VALUE = 99999;
|
|
3643
3689
|
var FIRST = "first";
|
|
@@ -3650,25 +3696,25 @@ var orderValueMap = {
|
|
|
3650
3696
|
var items = [
|
|
3651
3697
|
{
|
|
3652
3698
|
value: FIRST,
|
|
3653
|
-
label: (0,
|
|
3654
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3699
|
+
label: (0, import_i18n24.__)("First", "elementor"),
|
|
3700
|
+
renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(import_icons10.ArrowUpSmallIcon, { fontSize: size }),
|
|
3655
3701
|
showTooltip: true
|
|
3656
3702
|
},
|
|
3657
3703
|
{
|
|
3658
3704
|
value: LAST,
|
|
3659
|
-
label: (0,
|
|
3660
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3705
|
+
label: (0, import_i18n24.__)("Last", "elementor"),
|
|
3706
|
+
renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(import_icons10.ArrowDownSmallIcon, { fontSize: size }),
|
|
3661
3707
|
showTooltip: true
|
|
3662
3708
|
},
|
|
3663
3709
|
{
|
|
3664
3710
|
value: CUSTOM,
|
|
3665
|
-
label: (0,
|
|
3666
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3711
|
+
label: (0, import_i18n24.__)("Custom", "elementor"),
|
|
3712
|
+
renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(import_icons10.PencilIcon, { fontSize: size }),
|
|
3667
3713
|
showTooltip: true
|
|
3668
3714
|
}
|
|
3669
3715
|
];
|
|
3670
3716
|
var FlexOrderField = () => {
|
|
3671
|
-
return /* @__PURE__ */
|
|
3717
|
+
return /* @__PURE__ */ React46.createElement(StylesField, { bind: "order", propDisplayName: ORDER_LABEL }, /* @__PURE__ */ React46.createElement(UiProviders, null, /* @__PURE__ */ React46.createElement(SectionContent, null, /* @__PURE__ */ React46.createElement(FlexOrderFieldContent, null))));
|
|
3672
3718
|
};
|
|
3673
3719
|
function FlexOrderFieldContent() {
|
|
3674
3720
|
const {
|
|
@@ -3678,7 +3724,7 @@ function FlexOrderFieldContent() {
|
|
|
3678
3724
|
} = useStylesField("order", {
|
|
3679
3725
|
history: { propDisplayName: ORDER_LABEL }
|
|
3680
3726
|
});
|
|
3681
|
-
const { placeholder } = (0,
|
|
3727
|
+
const { placeholder } = (0, import_editor_controls21.useBoundProp)();
|
|
3682
3728
|
const placeholderValue = placeholder;
|
|
3683
3729
|
const currentGroup = (0, import_react25.useMemo)(() => getGroupControlValue(order?.value ?? null), [order]);
|
|
3684
3730
|
const [activeGroup, setActiveGroup] = (0, import_react25.useState)(currentGroup);
|
|
@@ -3713,8 +3759,8 @@ function FlexOrderFieldContent() {
|
|
|
3713
3759
|
};
|
|
3714
3760
|
const isCustomVisible = CUSTOM === activeGroup || CUSTOM === groupPlaceholder;
|
|
3715
3761
|
const orderPlaceholder = CUSTOM === groupPlaceholder ? String(placeholderValue?.value ?? null) : "";
|
|
3716
|
-
return /* @__PURE__ */
|
|
3717
|
-
|
|
3762
|
+
return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ React46.createElement(
|
|
3763
|
+
import_editor_controls21.ControlToggleButtonGroup,
|
|
3718
3764
|
{
|
|
3719
3765
|
items,
|
|
3720
3766
|
value: activeGroup,
|
|
@@ -3723,8 +3769,8 @@ function FlexOrderFieldContent() {
|
|
|
3723
3769
|
placeholder: groupPlaceholder,
|
|
3724
3770
|
disabled: !canEdit
|
|
3725
3771
|
}
|
|
3726
|
-
)), isCustomVisible && /* @__PURE__ */
|
|
3727
|
-
|
|
3772
|
+
)), isCustomVisible && /* @__PURE__ */ React46.createElement(import_ui27.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(import_ui27.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ControlLabel, null, (0, import_i18n24.__)("Custom order", "elementor"))), /* @__PURE__ */ React46.createElement(import_ui27.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React46.createElement(
|
|
3773
|
+
import_editor_controls21.NumberControl,
|
|
3728
3774
|
{
|
|
3729
3775
|
min: FIRST_DEFAULT_VALUE + 1,
|
|
3730
3776
|
max: LAST_DEFAULT_VALUE - 1,
|
|
@@ -3747,42 +3793,42 @@ var getGroupControlValue = (order) => {
|
|
|
3747
3793
|
};
|
|
3748
3794
|
|
|
3749
3795
|
// src/components/style-sections/layout-section/flex-size-field.tsx
|
|
3750
|
-
var
|
|
3796
|
+
var React47 = __toESM(require("react"));
|
|
3751
3797
|
var import_react26 = require("react");
|
|
3752
|
-
var
|
|
3798
|
+
var import_editor_controls22 = require("@elementor/editor-controls");
|
|
3753
3799
|
var import_editor_props13 = require("@elementor/editor-props");
|
|
3754
|
-
var
|
|
3755
|
-
var
|
|
3756
|
-
var FLEX_SIZE_LABEL = (0,
|
|
3800
|
+
var import_icons11 = require("@elementor/icons");
|
|
3801
|
+
var import_i18n25 = require("@wordpress/i18n");
|
|
3802
|
+
var FLEX_SIZE_LABEL = (0, import_i18n25.__)("Flex Size", "elementor");
|
|
3757
3803
|
var DEFAULT = 1;
|
|
3758
3804
|
var items2 = [
|
|
3759
3805
|
{
|
|
3760
3806
|
value: "flex-grow",
|
|
3761
|
-
label: (0,
|
|
3762
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3807
|
+
label: (0, import_i18n25.__)("Grow", "elementor"),
|
|
3808
|
+
renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons11.ExpandIcon, { fontSize: size }),
|
|
3763
3809
|
showTooltip: true
|
|
3764
3810
|
},
|
|
3765
3811
|
{
|
|
3766
3812
|
value: "flex-shrink",
|
|
3767
|
-
label: (0,
|
|
3768
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3813
|
+
label: (0, import_i18n25.__)("Shrink", "elementor"),
|
|
3814
|
+
renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons11.ShrinkIcon, { fontSize: size }),
|
|
3769
3815
|
showTooltip: true
|
|
3770
3816
|
},
|
|
3771
3817
|
{
|
|
3772
3818
|
value: "custom",
|
|
3773
|
-
label: (0,
|
|
3774
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3819
|
+
label: (0, import_i18n25.__)("Custom", "elementor"),
|
|
3820
|
+
renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons11.PencilIcon, { fontSize: size }),
|
|
3775
3821
|
showTooltip: true
|
|
3776
3822
|
}
|
|
3777
3823
|
];
|
|
3778
3824
|
var FlexSizeField = () => {
|
|
3779
|
-
return /* @__PURE__ */
|
|
3825
|
+
return /* @__PURE__ */ React47.createElement(UiProviders, null, /* @__PURE__ */ React47.createElement(SectionContent, null, /* @__PURE__ */ React47.createElement(StylesField, { bind: "flex", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React47.createElement(FlexSizeFieldContent, null))));
|
|
3780
3826
|
};
|
|
3781
3827
|
var FlexSizeFieldContent = () => {
|
|
3782
3828
|
const { value, setValue, canEdit } = useStylesField("flex", {
|
|
3783
3829
|
history: { propDisplayName: FLEX_SIZE_LABEL }
|
|
3784
3830
|
});
|
|
3785
|
-
const { placeholder } = (0,
|
|
3831
|
+
const { placeholder } = (0, import_editor_controls22.useBoundProp)();
|
|
3786
3832
|
const flexValues = extractFlexValues(value);
|
|
3787
3833
|
const currentGroup = (0, import_react26.useMemo)(() => getActiveGroup(flexValues), [flexValues]);
|
|
3788
3834
|
const [activeGroup, setActiveGroup] = (0, import_react26.useState)(currentGroup);
|
|
@@ -3805,8 +3851,8 @@ var FlexSizeFieldContent = () => {
|
|
|
3805
3851
|
};
|
|
3806
3852
|
const groupPlaceholder = getActiveGroup(extractFlexValues(placeholder));
|
|
3807
3853
|
const isCustomVisible = "custom" === activeGroup || "custom" === groupPlaceholder;
|
|
3808
|
-
return /* @__PURE__ */
|
|
3809
|
-
|
|
3854
|
+
return /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(StylesFieldLayout, { label: FLEX_SIZE_LABEL }, /* @__PURE__ */ React47.createElement(
|
|
3855
|
+
import_editor_controls22.ControlToggleButtonGroup,
|
|
3810
3856
|
{
|
|
3811
3857
|
value: activeGroup ?? null,
|
|
3812
3858
|
placeholder: groupPlaceholder ?? null,
|
|
@@ -3815,7 +3861,7 @@ var FlexSizeFieldContent = () => {
|
|
|
3815
3861
|
items: items2,
|
|
3816
3862
|
exclusive: true
|
|
3817
3863
|
}
|
|
3818
|
-
)), isCustomVisible && /* @__PURE__ */
|
|
3864
|
+
)), isCustomVisible && /* @__PURE__ */ React47.createElement(FlexCustomField, null));
|
|
3819
3865
|
};
|
|
3820
3866
|
function extractFlexValues(source) {
|
|
3821
3867
|
return {
|
|
@@ -3856,8 +3902,8 @@ var createFlexValueForGroup = (group, flexValue) => {
|
|
|
3856
3902
|
};
|
|
3857
3903
|
var FlexCustomField = () => {
|
|
3858
3904
|
const flexBasisRowRef = (0, import_react26.useRef)(null);
|
|
3859
|
-
const context = (0,
|
|
3860
|
-
return /* @__PURE__ */
|
|
3905
|
+
const context = (0, import_editor_controls22.useBoundProp)(import_editor_props13.flexPropTypeUtil);
|
|
3906
|
+
return /* @__PURE__ */ React47.createElement(import_editor_controls22.PropProvider, { ...context }, /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(StylesFieldLayout, { label: (0, import_i18n25.__)("Grow", "elementor") }, /* @__PURE__ */ React47.createElement(import_editor_controls22.PropKeyProvider, { bind: "flexGrow" }, /* @__PURE__ */ React47.createElement(import_editor_controls22.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React47.createElement(StylesFieldLayout, { label: (0, import_i18n25.__)("Shrink", "elementor") }, /* @__PURE__ */ React47.createElement(import_editor_controls22.PropKeyProvider, { bind: "flexShrink" }, /* @__PURE__ */ React47.createElement(import_editor_controls22.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React47.createElement(StylesFieldLayout, { label: (0, import_i18n25.__)("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React47.createElement(import_editor_controls22.PropKeyProvider, { bind: "flexBasis" }, /* @__PURE__ */ React47.createElement(import_editor_controls22.SizeControl, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef })))));
|
|
3861
3907
|
};
|
|
3862
3908
|
var getActiveGroup = ({
|
|
3863
3909
|
grow,
|
|
@@ -3881,34 +3927,34 @@ var getActiveGroup = ({
|
|
|
3881
3927
|
};
|
|
3882
3928
|
|
|
3883
3929
|
// src/components/style-sections/layout-section/gap-control-field.tsx
|
|
3884
|
-
var
|
|
3885
|
-
var
|
|
3886
|
-
var
|
|
3887
|
-
var GAPS_LABEL = (0,
|
|
3930
|
+
var React48 = __toESM(require("react"));
|
|
3931
|
+
var import_editor_controls23 = require("@elementor/editor-controls");
|
|
3932
|
+
var import_i18n26 = require("@wordpress/i18n");
|
|
3933
|
+
var GAPS_LABEL = (0, import_i18n26.__)("Gaps", "elementor");
|
|
3888
3934
|
var GapControlField = () => {
|
|
3889
|
-
return /* @__PURE__ */
|
|
3935
|
+
return /* @__PURE__ */ React48.createElement(StylesField, { bind: "gap", propDisplayName: GAPS_LABEL }, /* @__PURE__ */ React48.createElement(import_editor_controls23.GapControl, { label: GAPS_LABEL }));
|
|
3890
3936
|
};
|
|
3891
3937
|
|
|
3892
3938
|
// src/components/style-sections/layout-section/grid-auto-flow-field.tsx
|
|
3893
|
-
var
|
|
3894
|
-
var
|
|
3895
|
-
var
|
|
3939
|
+
var React49 = __toESM(require("react"));
|
|
3940
|
+
var import_editor_controls24 = require("@elementor/editor-controls");
|
|
3941
|
+
var import_icons12 = require("@elementor/icons");
|
|
3896
3942
|
var import_ui28 = require("@elementor/ui");
|
|
3897
|
-
var
|
|
3898
|
-
var AUTO_FLOW_LABEL = (0,
|
|
3899
|
-
var DENSE_LABEL = (0,
|
|
3900
|
-
var StartIcon4 = (0, import_ui28.withDirection)(
|
|
3943
|
+
var import_i18n27 = require("@wordpress/i18n");
|
|
3944
|
+
var AUTO_FLOW_LABEL = (0, import_i18n27.__)("Auto flow", "elementor");
|
|
3945
|
+
var DENSE_LABEL = (0, import_i18n27.__)("Dense", "elementor");
|
|
3946
|
+
var StartIcon4 = (0, import_ui28.withDirection)(import_icons12.ArrowRightIcon);
|
|
3901
3947
|
var directionOptions = [
|
|
3902
3948
|
{
|
|
3903
3949
|
value: "row",
|
|
3904
|
-
label: (0,
|
|
3905
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3950
|
+
label: (0, import_i18n27.__)("Row", "elementor"),
|
|
3951
|
+
renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(StartIcon4, { fontSize: size }),
|
|
3906
3952
|
showTooltip: true
|
|
3907
3953
|
},
|
|
3908
3954
|
{
|
|
3909
3955
|
value: "column",
|
|
3910
|
-
label: (0,
|
|
3911
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
3956
|
+
label: (0, import_i18n27.__)("Column", "elementor"),
|
|
3957
|
+
renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(import_icons12.ArrowDownSmallIcon, { fontSize: size }),
|
|
3912
3958
|
showTooltip: true
|
|
3913
3959
|
}
|
|
3914
3960
|
];
|
|
@@ -3937,8 +3983,8 @@ var GridAutoFlowFieldContent = () => {
|
|
|
3937
3983
|
const handleDenseToggle = () => {
|
|
3938
3984
|
setValue({ $$type: "string", value: composeAutoFlow(direction, !dense) });
|
|
3939
3985
|
};
|
|
3940
|
-
return /* @__PURE__ */
|
|
3941
|
-
|
|
3986
|
+
return /* @__PURE__ */ React49.createElement(StylesFieldLayout, { label: AUTO_FLOW_LABEL }, /* @__PURE__ */ React49.createElement(import_ui28.Grid, { container: true, gap: 1, flexWrap: "nowrap", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React49.createElement(import_ui28.Grid, { item: true, sx: { width: 64, maxWidth: "100%" } }, /* @__PURE__ */ React49.createElement(
|
|
3987
|
+
import_editor_controls24.ControlToggleButtonGroup,
|
|
3942
3988
|
{
|
|
3943
3989
|
items: directionOptions,
|
|
3944
3990
|
value: direction,
|
|
@@ -3946,7 +3992,7 @@ var GridAutoFlowFieldContent = () => {
|
|
|
3946
3992
|
exclusive: true,
|
|
3947
3993
|
fullWidth: true
|
|
3948
3994
|
}
|
|
3949
|
-
)), /* @__PURE__ */
|
|
3995
|
+
)), /* @__PURE__ */ React49.createElement(import_ui28.Grid, { item: true }, /* @__PURE__ */ React49.createElement(import_ui28.Tooltip, { title: DENSE_LABEL }, /* @__PURE__ */ React49.createElement(
|
|
3950
3996
|
import_ui28.ToggleButton,
|
|
3951
3997
|
{
|
|
3952
3998
|
value: "dense",
|
|
@@ -3955,54 +4001,54 @@ var GridAutoFlowFieldContent = () => {
|
|
|
3955
4001
|
size: "tiny",
|
|
3956
4002
|
"aria-label": DENSE_LABEL
|
|
3957
4003
|
},
|
|
3958
|
-
/* @__PURE__ */
|
|
4004
|
+
/* @__PURE__ */ React49.createElement(import_icons12.LayoutDashboardIcon, { fontSize: "tiny" })
|
|
3959
4005
|
)))));
|
|
3960
4006
|
};
|
|
3961
|
-
var GridAutoFlowField = () => /* @__PURE__ */
|
|
4007
|
+
var GridAutoFlowField = () => /* @__PURE__ */ React49.createElement(StylesField, { bind: "grid-auto-flow", propDisplayName: AUTO_FLOW_LABEL }, /* @__PURE__ */ React49.createElement(UiProviders, null, /* @__PURE__ */ React49.createElement(GridAutoFlowFieldContent, null)));
|
|
3962
4008
|
|
|
3963
4009
|
// src/components/style-sections/layout-section/grid-justify-items-field.tsx
|
|
3964
|
-
var
|
|
3965
|
-
var
|
|
3966
|
-
var
|
|
4010
|
+
var React50 = __toESM(require("react"));
|
|
4011
|
+
var import_editor_controls25 = require("@elementor/editor-controls");
|
|
4012
|
+
var import_icons13 = require("@elementor/icons");
|
|
3967
4013
|
var import_ui29 = require("@elementor/ui");
|
|
3968
|
-
var
|
|
3969
|
-
var JUSTIFY_ITEMS_LABEL = (0,
|
|
3970
|
-
var StartIcon5 = (0, import_ui29.withDirection)(
|
|
3971
|
-
var EndIcon4 = (0, import_ui29.withDirection)(
|
|
4014
|
+
var import_i18n28 = require("@wordpress/i18n");
|
|
4015
|
+
var JUSTIFY_ITEMS_LABEL = (0, import_i18n28.__)("Justify items", "elementor");
|
|
4016
|
+
var StartIcon5 = (0, import_ui29.withDirection)(import_icons13.LayoutAlignLeftIcon);
|
|
4017
|
+
var EndIcon4 = (0, import_ui29.withDirection)(import_icons13.LayoutAlignRightIcon);
|
|
3972
4018
|
var options4 = [
|
|
3973
4019
|
{
|
|
3974
4020
|
value: "start",
|
|
3975
|
-
label: (0,
|
|
3976
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4021
|
+
label: (0, import_i18n28.__)("Start", "elementor"),
|
|
4022
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(StartIcon5, { fontSize: size }),
|
|
3977
4023
|
showTooltip: true
|
|
3978
4024
|
},
|
|
3979
4025
|
{
|
|
3980
4026
|
value: "center",
|
|
3981
|
-
label: (0,
|
|
3982
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4027
|
+
label: (0, import_i18n28.__)("Center", "elementor"),
|
|
4028
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons13.LayoutAlignCenterIcon, { fontSize: size }),
|
|
3983
4029
|
showTooltip: true
|
|
3984
4030
|
},
|
|
3985
4031
|
{
|
|
3986
4032
|
value: "end",
|
|
3987
|
-
label: (0,
|
|
3988
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4033
|
+
label: (0, import_i18n28.__)("End", "elementor"),
|
|
4034
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(EndIcon4, { fontSize: size }),
|
|
3989
4035
|
showTooltip: true
|
|
3990
4036
|
},
|
|
3991
4037
|
{
|
|
3992
4038
|
value: "stretch",
|
|
3993
|
-
label: (0,
|
|
3994
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4039
|
+
label: (0, import_i18n28.__)("Stretch", "elementor"),
|
|
4040
|
+
renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(import_icons13.LayoutDistributeVerticalIcon, { fontSize: size }),
|
|
3995
4041
|
showTooltip: true
|
|
3996
4042
|
}
|
|
3997
4043
|
];
|
|
3998
|
-
var GridJustifyItemsField = () => /* @__PURE__ */
|
|
4044
|
+
var GridJustifyItemsField = () => /* @__PURE__ */ React50.createElement(StylesField, { bind: "justify-items", propDisplayName: JUSTIFY_ITEMS_LABEL }, /* @__PURE__ */ React50.createElement(UiProviders, null, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: JUSTIFY_ITEMS_LABEL }, /* @__PURE__ */ React50.createElement(import_editor_controls25.ToggleControl, { options: options4 }))));
|
|
3999
4045
|
|
|
4000
4046
|
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4001
|
-
var
|
|
4047
|
+
var React51 = __toESM(require("react"));
|
|
4002
4048
|
var import_react27 = require("react");
|
|
4003
|
-
var
|
|
4049
|
+
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
4004
4050
|
var import_ui30 = require("@elementor/ui");
|
|
4005
|
-
var
|
|
4051
|
+
var import_i18n29 = require("@wordpress/i18n");
|
|
4006
4052
|
var FR = "fr";
|
|
4007
4053
|
var CUSTOM2 = "custom";
|
|
4008
4054
|
var UNITS = [FR, CUSTOM2];
|
|
@@ -4026,7 +4072,7 @@ var trackValueToCss = (trackValue) => {
|
|
|
4026
4072
|
}
|
|
4027
4073
|
return String(trackValue.size);
|
|
4028
4074
|
};
|
|
4029
|
-
var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */
|
|
4075
|
+
var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React51.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React51.createElement(GridTrackFieldContent, { cssProp, label }));
|
|
4030
4076
|
var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
4031
4077
|
const { value, setValue } = useStylesField(cssProp, {
|
|
4032
4078
|
history: { propDisplayName: label }
|
|
@@ -4037,8 +4083,8 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4037
4083
|
const css = trackValueToCss(newValue);
|
|
4038
4084
|
setValue(css ? { $$type: "string", value: css } : null);
|
|
4039
4085
|
};
|
|
4040
|
-
return /* @__PURE__ */
|
|
4041
|
-
|
|
4086
|
+
return /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React51.createElement("div", { ref: anchorRef }, /* @__PURE__ */ React51.createElement(
|
|
4087
|
+
import_editor_controls26.SizeComponent,
|
|
4042
4088
|
{
|
|
4043
4089
|
units: UNITS,
|
|
4044
4090
|
value: trackValue ?? { size: NaN, unit: FR },
|
|
@@ -4051,17 +4097,57 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4051
4097
|
}
|
|
4052
4098
|
)));
|
|
4053
4099
|
};
|
|
4054
|
-
var GridSizeFields = () => /* @__PURE__ */
|
|
4100
|
+
var GridSizeFields = () => /* @__PURE__ */ React51.createElement(import_ui30.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React51.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(GridTrackField, { cssProp: "grid-template-columns", label: (0, import_i18n29.__)("Columns", "elementor") })), /* @__PURE__ */ React51.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(GridTrackField, { cssProp: "grid-template-rows", label: (0, import_i18n29.__)("Rows", "elementor") })));
|
|
4055
4101
|
|
|
4056
|
-
// src/components/style-sections/layout-section/
|
|
4057
|
-
var
|
|
4058
|
-
var
|
|
4059
|
-
var import_icons13 = require("@elementor/icons");
|
|
4102
|
+
// src/components/style-sections/layout-section/grid-span-field.tsx
|
|
4103
|
+
var React52 = __toESM(require("react"));
|
|
4104
|
+
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
4060
4105
|
var import_ui31 = require("@elementor/ui");
|
|
4061
|
-
var
|
|
4062
|
-
var
|
|
4063
|
-
var
|
|
4064
|
-
|
|
4106
|
+
var import_i18n30 = require("@wordpress/i18n");
|
|
4107
|
+
var MIN_SPAN = 1;
|
|
4108
|
+
var GridSpanFieldContent = ({ cssProp, label }) => {
|
|
4109
|
+
const { value, setValue, canEdit } = useStylesField(cssProp, {
|
|
4110
|
+
history: { propDisplayName: label }
|
|
4111
|
+
});
|
|
4112
|
+
const spanValue = value?.value ?? null;
|
|
4113
|
+
const handleChange = (event) => {
|
|
4114
|
+
const raw = event.target.value;
|
|
4115
|
+
if (raw === "") {
|
|
4116
|
+
setValue(null);
|
|
4117
|
+
return;
|
|
4118
|
+
}
|
|
4119
|
+
const num = parseInt(raw, 10);
|
|
4120
|
+
if (Number.isNaN(num)) {
|
|
4121
|
+
return;
|
|
4122
|
+
}
|
|
4123
|
+
const clamped = Math.max(num, MIN_SPAN);
|
|
4124
|
+
setValue({ $$type: "span", value: clamped });
|
|
4125
|
+
};
|
|
4126
|
+
return /* @__PURE__ */ React52.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React52.createElement(
|
|
4127
|
+
import_editor_controls27.NumberInput,
|
|
4128
|
+
{
|
|
4129
|
+
size: "tiny",
|
|
4130
|
+
type: "number",
|
|
4131
|
+
fullWidth: true,
|
|
4132
|
+
disabled: !canEdit,
|
|
4133
|
+
value: spanValue ?? "",
|
|
4134
|
+
onInput: handleChange,
|
|
4135
|
+
inputProps: { min: MIN_SPAN }
|
|
4136
|
+
}
|
|
4137
|
+
));
|
|
4138
|
+
};
|
|
4139
|
+
var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */ React52.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React52.createElement(UiProviders, null, /* @__PURE__ */ React52.createElement(GridSpanFieldContent, { cssProp, label })));
|
|
4140
|
+
var GridSpanFields = () => /* @__PURE__ */ React52.createElement(import_ui31.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React52.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(GridSpanField, { cssProp: "grid-column", label: (0, import_i18n30.__)("Column Span", "elementor") })), /* @__PURE__ */ React52.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(GridSpanField, { cssProp: "grid-row", label: (0, import_i18n30.__)("Row Span", "elementor") })));
|
|
4141
|
+
|
|
4142
|
+
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
4143
|
+
var React53 = __toESM(require("react"));
|
|
4144
|
+
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
4145
|
+
var import_icons14 = require("@elementor/icons");
|
|
4146
|
+
var import_ui32 = require("@elementor/ui");
|
|
4147
|
+
var import_i18n31 = require("@wordpress/i18n");
|
|
4148
|
+
var JUSTIFY_CONTENT_LABEL = (0, import_i18n31.__)("Justify content", "elementor");
|
|
4149
|
+
var StartIcon6 = (0, import_ui32.withDirection)(import_icons14.JustifyTopIcon);
|
|
4150
|
+
var EndIcon5 = (0, import_ui32.withDirection)(import_icons14.JustifyBottomIcon);
|
|
4065
4151
|
var iconProps4 = {
|
|
4066
4152
|
isClockwise: true,
|
|
4067
4153
|
offset: -90
|
|
@@ -4069,97 +4155,108 @@ var iconProps4 = {
|
|
|
4069
4155
|
var options5 = [
|
|
4070
4156
|
{
|
|
4071
4157
|
value: "flex-start",
|
|
4072
|
-
label: (0,
|
|
4073
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4158
|
+
label: (0, import_i18n31.__)("Start", "elementor"),
|
|
4159
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: StartIcon6, size, ...iconProps4 }),
|
|
4074
4160
|
showTooltip: true
|
|
4075
4161
|
},
|
|
4076
4162
|
{
|
|
4077
4163
|
value: "center",
|
|
4078
|
-
label: (0,
|
|
4079
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4164
|
+
label: (0, import_i18n31.__)("Center", "elementor"),
|
|
4165
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: import_icons14.JustifyCenterIcon, size, ...iconProps4 }),
|
|
4080
4166
|
showTooltip: true
|
|
4081
4167
|
},
|
|
4082
4168
|
{
|
|
4083
4169
|
value: "flex-end",
|
|
4084
|
-
label: (0,
|
|
4085
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4170
|
+
label: (0, import_i18n31.__)("End", "elementor"),
|
|
4171
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: EndIcon5, size, ...iconProps4 }),
|
|
4086
4172
|
showTooltip: true
|
|
4087
4173
|
},
|
|
4088
4174
|
{
|
|
4089
4175
|
value: "space-between",
|
|
4090
|
-
label: (0,
|
|
4091
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4176
|
+
label: (0, import_i18n31.__)("Space between", "elementor"),
|
|
4177
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: import_icons14.JustifySpaceBetweenVerticalIcon, size, ...iconProps4 }),
|
|
4092
4178
|
showTooltip: true
|
|
4093
4179
|
},
|
|
4094
4180
|
{
|
|
4095
4181
|
value: "space-around",
|
|
4096
|
-
label: (0,
|
|
4097
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4182
|
+
label: (0, import_i18n31.__)("Space around", "elementor"),
|
|
4183
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: import_icons14.JustifySpaceAroundVerticalIcon, size, ...iconProps4 }),
|
|
4098
4184
|
showTooltip: true
|
|
4099
4185
|
},
|
|
4100
4186
|
{
|
|
4101
4187
|
value: "space-evenly",
|
|
4102
|
-
label: (0,
|
|
4103
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4188
|
+
label: (0, import_i18n31.__)("Space evenly", "elementor"),
|
|
4189
|
+
renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: import_icons14.JustifyDistributeVerticalIcon, size, ...iconProps4 }),
|
|
4104
4190
|
showTooltip: true
|
|
4105
4191
|
}
|
|
4106
4192
|
];
|
|
4107
|
-
var JustifyContentField = () => /* @__PURE__ */
|
|
4193
|
+
var JustifyContentField = () => /* @__PURE__ */ React53.createElement(StylesField, { bind: "justify-content", propDisplayName: JUSTIFY_CONTENT_LABEL }, /* @__PURE__ */ React53.createElement(UiProviders, null, /* @__PURE__ */ React53.createElement(StylesFieldLayout, { label: JUSTIFY_CONTENT_LABEL, direction: "column" }, /* @__PURE__ */ React53.createElement(import_editor_controls28.ToggleControl, { options: options5, fullWidth: true }))));
|
|
4108
4194
|
|
|
4109
4195
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
4110
|
-
var
|
|
4111
|
-
var
|
|
4112
|
-
var
|
|
4113
|
-
var
|
|
4114
|
-
var FLEX_WRAP_LABEL = (0,
|
|
4196
|
+
var React54 = __toESM(require("react"));
|
|
4197
|
+
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
4198
|
+
var import_icons15 = require("@elementor/icons");
|
|
4199
|
+
var import_i18n32 = require("@wordpress/i18n");
|
|
4200
|
+
var FLEX_WRAP_LABEL = (0, import_i18n32.__)("Wrap", "elementor");
|
|
4115
4201
|
var options6 = [
|
|
4116
4202
|
{
|
|
4117
4203
|
value: "nowrap",
|
|
4118
|
-
label: (0,
|
|
4119
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4204
|
+
label: (0, import_i18n32.__)("No wrap", "elementor"),
|
|
4205
|
+
renderContent: ({ size }) => /* @__PURE__ */ React54.createElement(import_icons15.ArrowRightIcon, { fontSize: size }),
|
|
4120
4206
|
showTooltip: true
|
|
4121
4207
|
},
|
|
4122
4208
|
{
|
|
4123
4209
|
value: "wrap",
|
|
4124
|
-
label: (0,
|
|
4125
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4210
|
+
label: (0, import_i18n32.__)("Wrap", "elementor"),
|
|
4211
|
+
renderContent: ({ size }) => /* @__PURE__ */ React54.createElement(import_icons15.ArrowBackIcon, { fontSize: size }),
|
|
4126
4212
|
showTooltip: true
|
|
4127
4213
|
},
|
|
4128
4214
|
{
|
|
4129
4215
|
value: "wrap-reverse",
|
|
4130
|
-
label: (0,
|
|
4131
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4216
|
+
label: (0, import_i18n32.__)("Reversed wrap", "elementor"),
|
|
4217
|
+
renderContent: ({ size }) => /* @__PURE__ */ React54.createElement(import_icons15.ArrowForwardIcon, { fontSize: size }),
|
|
4132
4218
|
showTooltip: true
|
|
4133
4219
|
}
|
|
4134
4220
|
];
|
|
4135
4221
|
var WrapField = () => {
|
|
4136
|
-
return /* @__PURE__ */
|
|
4222
|
+
return /* @__PURE__ */ React54.createElement(StylesField, { bind: "flex-wrap", propDisplayName: FLEX_WRAP_LABEL }, /* @__PURE__ */ React54.createElement(UiProviders, null, /* @__PURE__ */ React54.createElement(StylesFieldLayout, { label: FLEX_WRAP_LABEL }, /* @__PURE__ */ React54.createElement(import_editor_controls29.ToggleControl, { options: options6 }))));
|
|
4137
4223
|
};
|
|
4138
4224
|
|
|
4139
4225
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
4140
|
-
var DISPLAY_LABEL2 = (0,
|
|
4141
|
-
var FLEX_WRAP_LABEL2 = (0,
|
|
4226
|
+
var DISPLAY_LABEL2 = (0, import_i18n33.__)("Display", "elementor");
|
|
4227
|
+
var FLEX_WRAP_LABEL2 = (0, import_i18n33.__)("Flex wrap", "elementor");
|
|
4228
|
+
var DEFAULT_PARENT_FLOW_DIRECTION = "row";
|
|
4142
4229
|
var LayoutSection = () => {
|
|
4143
4230
|
const { value: display } = useStylesField("display", {
|
|
4144
4231
|
history: { propDisplayName: DISPLAY_LABEL2 }
|
|
4145
4232
|
});
|
|
4146
4233
|
const displayPlaceholder = useDisplayPlaceholderValue();
|
|
4234
|
+
const isGridExperimentActive = (0, import_editor_v1_adapters8.isExperimentActive)("e_css_grid");
|
|
4147
4235
|
const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
|
|
4148
4236
|
const isDisplayGrid = "grid" === (display?.value ?? displayPlaceholder?.value);
|
|
4149
4237
|
const { element } = useElement();
|
|
4150
4238
|
const parent = (0, import_editor_elements11.useParentElement)(element.id);
|
|
4151
4239
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
4152
|
-
const
|
|
4153
|
-
|
|
4240
|
+
const getParentStyleDirection = () => {
|
|
4241
|
+
if ("flex" === parentStyle?.display) {
|
|
4242
|
+
return parentStyle?.flexDirection ?? DEFAULT_PARENT_FLOW_DIRECTION;
|
|
4243
|
+
}
|
|
4244
|
+
if ("grid" === parentStyle?.display) {
|
|
4245
|
+
return parentStyle?.gridAutoFlow ?? DEFAULT_PARENT_FLOW_DIRECTION;
|
|
4246
|
+
}
|
|
4247
|
+
return DEFAULT_PARENT_FLOW_DIRECTION;
|
|
4248
|
+
};
|
|
4249
|
+
return /* @__PURE__ */ React55.createElement(SectionContent, null, /* @__PURE__ */ React55.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React55.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React55.createElement(FlexChildFields, { parentStyleDirection: getParentStyleDirection() }), isGridExperimentActive && isDisplayGrid && /* @__PURE__ */ React55.createElement(GridFields, null), isGridExperimentActive && "grid" === parentStyle?.display && /* @__PURE__ */ React55.createElement(GridChildFields, { parentStyleDirection: getParentStyleDirection() }));
|
|
4154
4250
|
};
|
|
4155
4251
|
var FlexFields = () => {
|
|
4156
4252
|
const { value: flexWrap } = useStylesField("flex-wrap", {
|
|
4157
4253
|
history: { propDisplayName: FLEX_WRAP_LABEL2 }
|
|
4158
4254
|
});
|
|
4159
|
-
return /* @__PURE__ */
|
|
4255
|
+
return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(FlexDirectionField, null), /* @__PURE__ */ React55.createElement(JustifyContentField, null), /* @__PURE__ */ React55.createElement(AlignItemsField, null), /* @__PURE__ */ React55.createElement(PanelDivider, null), /* @__PURE__ */ React55.createElement(GapControlField, null), /* @__PURE__ */ React55.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React55.createElement(AlignContentField, null));
|
|
4160
4256
|
};
|
|
4161
|
-
var GridFields = () => /* @__PURE__ */
|
|
4162
|
-
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
4257
|
+
var GridFields = () => /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(GridSizeFields, null), /* @__PURE__ */ React55.createElement(GridAutoFlowField, null), /* @__PURE__ */ React55.createElement(PanelDivider, null), /* @__PURE__ */ React55.createElement(GapControlField, null), /* @__PURE__ */ React55.createElement(PanelDivider, null), /* @__PURE__ */ React55.createElement(GridJustifyItemsField, null), /* @__PURE__ */ React55.createElement(AlignItemsField, null));
|
|
4258
|
+
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(PanelDivider, null), /* @__PURE__ */ React55.createElement(import_editor_controls30.ControlFormLabel, null, (0, import_i18n33.__)("Flex child", "elementor")), /* @__PURE__ */ React55.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React55.createElement(FlexOrderField, null), /* @__PURE__ */ React55.createElement(FlexSizeField, null));
|
|
4259
|
+
var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(PanelDivider, null), /* @__PURE__ */ React55.createElement(import_editor_controls30.ControlFormLabel, null, (0, import_i18n33.__)("Grid Child", "elementor")), /* @__PURE__ */ React55.createElement(GridSpanFields, null), /* @__PURE__ */ React55.createElement(AlignSelfGridChild, { parentStyleDirection }), /* @__PURE__ */ React55.createElement(FlexOrderField, null));
|
|
4163
4260
|
var shouldDisplayFlexFields = (display, local) => {
|
|
4164
4261
|
const value = display?.value ?? local?.value;
|
|
4165
4262
|
if (!value) {
|
|
@@ -4169,39 +4266,39 @@ var shouldDisplayFlexFields = (display, local) => {
|
|
|
4169
4266
|
};
|
|
4170
4267
|
|
|
4171
4268
|
// src/components/style-sections/position-section/position-section.tsx
|
|
4172
|
-
var
|
|
4269
|
+
var React60 = __toESM(require("react"));
|
|
4173
4270
|
var import_react30 = require("react");
|
|
4174
4271
|
var import_session7 = require("@elementor/session");
|
|
4175
|
-
var
|
|
4272
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
4176
4273
|
|
|
4177
4274
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
4178
|
-
var
|
|
4275
|
+
var React56 = __toESM(require("react"));
|
|
4179
4276
|
var import_react28 = require("react");
|
|
4180
|
-
var
|
|
4181
|
-
var
|
|
4182
|
-
var
|
|
4183
|
-
var
|
|
4184
|
-
var InlineStartIcon2 = (0,
|
|
4185
|
-
var InlineEndIcon2 = (0,
|
|
4277
|
+
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
4278
|
+
var import_icons16 = require("@elementor/icons");
|
|
4279
|
+
var import_ui33 = require("@elementor/ui");
|
|
4280
|
+
var import_i18n34 = require("@wordpress/i18n");
|
|
4281
|
+
var InlineStartIcon2 = (0, import_ui33.withDirection)(import_icons16.SideLeftIcon);
|
|
4282
|
+
var InlineEndIcon2 = (0, import_ui33.withDirection)(import_icons16.SideRightIcon);
|
|
4186
4283
|
var sideIcons = {
|
|
4187
|
-
"inset-block-start": /* @__PURE__ */
|
|
4188
|
-
"inset-block-end": /* @__PURE__ */
|
|
4189
|
-
"inset-inline-start": /* @__PURE__ */
|
|
4190
|
-
"inset-inline-end": /* @__PURE__ */
|
|
4284
|
+
"inset-block-start": /* @__PURE__ */ React56.createElement(import_icons16.SideTopIcon, { fontSize: "tiny" }),
|
|
4285
|
+
"inset-block-end": /* @__PURE__ */ React56.createElement(import_icons16.SideBottomIcon, { fontSize: "tiny" }),
|
|
4286
|
+
"inset-inline-start": /* @__PURE__ */ React56.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
|
|
4287
|
+
"inset-inline-end": /* @__PURE__ */ React56.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
|
|
4191
4288
|
};
|
|
4192
|
-
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0,
|
|
4193
|
-
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0,
|
|
4289
|
+
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n34.__)("Right", "elementor") : (0, import_i18n34.__)("Left", "elementor");
|
|
4290
|
+
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n34.__)("Left", "elementor") : (0, import_i18n34.__)("Right", "elementor");
|
|
4194
4291
|
var DimensionsField = () => {
|
|
4195
4292
|
const { isSiteRtl } = useDirection();
|
|
4196
4293
|
const rowRefs = [(0, import_react28.useRef)(null), (0, import_react28.useRef)(null)];
|
|
4197
|
-
return /* @__PURE__ */
|
|
4294
|
+
return /* @__PURE__ */ React56.createElement(UiProviders, null, /* @__PURE__ */ React56.createElement(import_ui33.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React56.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n34.__)("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React56.createElement(
|
|
4198
4295
|
DimensionField,
|
|
4199
4296
|
{
|
|
4200
4297
|
side: "inset-inline-end",
|
|
4201
4298
|
label: getInlineEndLabel(isSiteRtl),
|
|
4202
4299
|
rowRef: rowRefs[0]
|
|
4203
4300
|
}
|
|
4204
|
-
)), /* @__PURE__ */
|
|
4301
|
+
)), /* @__PURE__ */ React56.createElement(import_ui33.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React56.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n34.__)("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React56.createElement(
|
|
4205
4302
|
DimensionField,
|
|
4206
4303
|
{
|
|
4207
4304
|
side: "inset-inline-start",
|
|
@@ -4214,8 +4311,8 @@ var DimensionField = ({
|
|
|
4214
4311
|
side,
|
|
4215
4312
|
label,
|
|
4216
4313
|
rowRef
|
|
4217
|
-
}) => /* @__PURE__ */
|
|
4218
|
-
|
|
4314
|
+
}) => /* @__PURE__ */ React56.createElement(StylesField, { bind: side, propDisplayName: label }, /* @__PURE__ */ React56.createElement(import_ui33.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React56.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(ControlLabel, null, label)), /* @__PURE__ */ React56.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React56.createElement(
|
|
4315
|
+
import_editor_controls31.SizeControl,
|
|
4219
4316
|
{
|
|
4220
4317
|
startIcon: sideIcons[side],
|
|
4221
4318
|
extendedOptions: ["auto"],
|
|
@@ -4225,46 +4322,62 @@ var DimensionField = ({
|
|
|
4225
4322
|
))));
|
|
4226
4323
|
|
|
4227
4324
|
// src/components/style-sections/position-section/offset-field.tsx
|
|
4228
|
-
var
|
|
4325
|
+
var React57 = __toESM(require("react"));
|
|
4229
4326
|
var import_react29 = require("react");
|
|
4230
|
-
var
|
|
4231
|
-
var
|
|
4232
|
-
var OFFSET_LABEL = (0,
|
|
4327
|
+
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
4328
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
4329
|
+
var OFFSET_LABEL = (0, import_i18n35.__)("Anchor offset", "elementor");
|
|
4233
4330
|
var UNITS2 = ["px", "em", "rem", "vw", "vh"];
|
|
4234
4331
|
var OffsetField = () => {
|
|
4235
4332
|
const rowRef = (0, import_react29.useRef)(null);
|
|
4236
|
-
return /* @__PURE__ */
|
|
4333
|
+
return /* @__PURE__ */ React57.createElement(StylesField, { bind: "scroll-margin-top", propDisplayName: OFFSET_LABEL }, /* @__PURE__ */ React57.createElement(StylesFieldLayout, { label: OFFSET_LABEL, ref: rowRef }, /* @__PURE__ */ React57.createElement(import_editor_controls32.SizeControl, { units: UNITS2, anchorRef: rowRef })));
|
|
4237
4334
|
};
|
|
4238
4335
|
|
|
4239
4336
|
// src/components/style-sections/position-section/position-field.tsx
|
|
4240
|
-
var
|
|
4241
|
-
var
|
|
4242
|
-
var
|
|
4243
|
-
var POSITION_LABEL = (0,
|
|
4337
|
+
var React58 = __toESM(require("react"));
|
|
4338
|
+
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
4339
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
4340
|
+
var POSITION_LABEL = (0, import_i18n36.__)("Position", "elementor");
|
|
4244
4341
|
var positionOptions = [
|
|
4245
|
-
{ label: (0,
|
|
4246
|
-
{ label: (0,
|
|
4247
|
-
{ label: (0,
|
|
4248
|
-
{ label: (0,
|
|
4249
|
-
{ label: (0,
|
|
4342
|
+
{ label: (0, import_i18n36.__)("Static", "elementor"), value: "static" },
|
|
4343
|
+
{ label: (0, import_i18n36.__)("Relative", "elementor"), value: "relative" },
|
|
4344
|
+
{ label: (0, import_i18n36.__)("Absolute", "elementor"), value: "absolute" },
|
|
4345
|
+
{ label: (0, import_i18n36.__)("Fixed", "elementor"), value: "fixed" },
|
|
4346
|
+
{ label: (0, import_i18n36.__)("Sticky", "elementor"), value: "sticky" }
|
|
4250
4347
|
];
|
|
4251
4348
|
var PositionField = ({ onChange }) => {
|
|
4252
|
-
return /* @__PURE__ */
|
|
4349
|
+
return /* @__PURE__ */ React58.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React58.createElement(import_editor_controls33.SelectControl, { options: positionOptions, onChange })));
|
|
4253
4350
|
};
|
|
4254
4351
|
|
|
4255
4352
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
4256
|
-
var
|
|
4257
|
-
var
|
|
4258
|
-
var
|
|
4259
|
-
var
|
|
4260
|
-
var
|
|
4261
|
-
|
|
4353
|
+
var React59 = __toESM(require("react"));
|
|
4354
|
+
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
4355
|
+
var import_icons17 = require("@elementor/icons");
|
|
4356
|
+
var import_ui34 = require("@elementor/ui");
|
|
4357
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
4358
|
+
var Z_INDEX_LABEL = (0, import_i18n37.__)("Z-index", "elementor");
|
|
4359
|
+
var ZIndexField = ({ disabled }) => {
|
|
4360
|
+
const StyleField = /* @__PURE__ */ React59.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React59.createElement(import_editor_controls34.NumberControl, { disabled })));
|
|
4361
|
+
const content = /* @__PURE__ */ React59.createElement(import_ui34.Alert, { color: "secondary", icon: /* @__PURE__ */ React59.createElement(import_icons17.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React59.createElement(import_ui34.AlertTitle, null, (0, import_i18n37.__)("Z-index", "elementor")), /* @__PURE__ */ React59.createElement(import_ui34.Box, { component: "span" }, (0, import_i18n37.__)(
|
|
4362
|
+
"z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.",
|
|
4363
|
+
"elementor"
|
|
4364
|
+
)));
|
|
4365
|
+
return disabled ? /* @__PURE__ */ React59.createElement(
|
|
4366
|
+
import_ui34.Infotip,
|
|
4367
|
+
{
|
|
4368
|
+
placement: "right",
|
|
4369
|
+
content,
|
|
4370
|
+
color: "secondary",
|
|
4371
|
+
slotProps: { popper: { sx: { width: 300 } } }
|
|
4372
|
+
},
|
|
4373
|
+
/* @__PURE__ */ React59.createElement(import_ui34.Box, null, StyleField)
|
|
4374
|
+
) : /* @__PURE__ */ React59.createElement(React59.Fragment, null, StyleField);
|
|
4262
4375
|
};
|
|
4263
4376
|
|
|
4264
4377
|
// src/components/style-sections/position-section/position-section.tsx
|
|
4265
4378
|
var POSITION_STATIC = "static";
|
|
4266
|
-
var POSITION_LABEL2 = (0,
|
|
4267
|
-
var DIMENSIONS_LABEL = (0,
|
|
4379
|
+
var POSITION_LABEL2 = (0, import_i18n38.__)("Position", "elementor");
|
|
4380
|
+
var DIMENSIONS_LABEL = (0, import_i18n38.__)("Dimensions", "elementor");
|
|
4268
4381
|
var POSITION_DEPENDENT_PROP_NAMES = [
|
|
4269
4382
|
"inset-block-start",
|
|
4270
4383
|
"inset-block-end",
|
|
@@ -4321,7 +4434,7 @@ var PositionSection = () => {
|
|
|
4321
4434
|
}
|
|
4322
4435
|
};
|
|
4323
4436
|
const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
|
|
4324
|
-
return /* @__PURE__ */
|
|
4437
|
+
return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(DimensionsField, null)) : null, /* @__PURE__ */ React60.createElement(ZIndexField, { disabled: !isNotStatic }), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(OffsetField, null));
|
|
4325
4438
|
};
|
|
4326
4439
|
var usePersistDimensions = () => {
|
|
4327
4440
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -4331,26 +4444,26 @@ var usePersistDimensions = () => {
|
|
|
4331
4444
|
};
|
|
4332
4445
|
|
|
4333
4446
|
// src/components/style-sections/size-section/size-section.tsx
|
|
4334
|
-
var
|
|
4447
|
+
var React65 = __toESM(require("react"));
|
|
4335
4448
|
var import_react31 = require("react");
|
|
4336
|
-
var
|
|
4337
|
-
var
|
|
4338
|
-
var
|
|
4449
|
+
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
4450
|
+
var import_ui36 = require("@elementor/ui");
|
|
4451
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
4339
4452
|
|
|
4340
4453
|
// src/components/style-tab-collapsible-content.tsx
|
|
4341
|
-
var
|
|
4454
|
+
var React62 = __toESM(require("react"));
|
|
4342
4455
|
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
4343
4456
|
|
|
4344
4457
|
// src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
|
|
4345
|
-
var
|
|
4458
|
+
var React61 = __toESM(require("react"));
|
|
4346
4459
|
var import_editor_styles_repository14 = require("@elementor/editor-styles-repository");
|
|
4347
|
-
var
|
|
4348
|
-
var
|
|
4460
|
+
var import_ui35 = require("@elementor/ui");
|
|
4461
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
4349
4462
|
var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
4350
4463
|
const { id, meta, provider } = useStyle();
|
|
4351
4464
|
const snapshot = useStylesInheritanceSnapshot();
|
|
4352
4465
|
if (fields.includes("custom_css")) {
|
|
4353
|
-
return /* @__PURE__ */
|
|
4466
|
+
return /* @__PURE__ */ React61.createElement(CustomCssIndicator, null);
|
|
4354
4467
|
}
|
|
4355
4468
|
const snapshotFields = Object.fromEntries(
|
|
4356
4469
|
Object.entries(snapshot ?? {}).filter(([key]) => fields.includes(key))
|
|
@@ -4359,9 +4472,9 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
4359
4472
|
if (!hasValues && !hasOverrides) {
|
|
4360
4473
|
return null;
|
|
4361
4474
|
}
|
|
4362
|
-
const hasValueLabel = (0,
|
|
4363
|
-
const hasOverridesLabel = (0,
|
|
4364
|
-
return /* @__PURE__ */
|
|
4475
|
+
const hasValueLabel = (0, import_i18n39.__)("Has effective styles", "elementor");
|
|
4476
|
+
const hasOverridesLabel = (0, import_i18n39.__)("Has overridden styles", "elementor");
|
|
4477
|
+
return /* @__PURE__ */ React61.createElement(import_ui35.Tooltip, { title: (0, import_i18n39.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React61.createElement(import_ui35.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React61.createElement(
|
|
4365
4478
|
StyleIndicator,
|
|
4366
4479
|
{
|
|
4367
4480
|
getColor: getStylesProviderThemeColor(provider.getKey()),
|
|
@@ -4369,7 +4482,7 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
4369
4482
|
role: "listitem",
|
|
4370
4483
|
"aria-label": hasValueLabel
|
|
4371
4484
|
}
|
|
4372
|
-
), hasOverrides && /* @__PURE__ */
|
|
4485
|
+
), hasOverrides && /* @__PURE__ */ React61.createElement(
|
|
4373
4486
|
StyleIndicator,
|
|
4374
4487
|
{
|
|
4375
4488
|
isOverridden: true,
|
|
@@ -4409,59 +4522,59 @@ function getCurrentStyleFromChain(chain, styleId, meta) {
|
|
|
4409
4522
|
|
|
4410
4523
|
// src/components/style-tab-collapsible-content.tsx
|
|
4411
4524
|
var StyleTabCollapsibleContent = ({ fields = [], children }) => {
|
|
4412
|
-
return /* @__PURE__ */
|
|
4525
|
+
return /* @__PURE__ */ React62.createElement(import_editor_ui6.CollapsibleContent, { titleEnd: getStylesInheritanceIndicators(fields) }, children);
|
|
4413
4526
|
};
|
|
4414
4527
|
function getStylesInheritanceIndicators(fields) {
|
|
4415
4528
|
if (fields.length === 0) {
|
|
4416
4529
|
return null;
|
|
4417
4530
|
}
|
|
4418
|
-
return (isOpen) => !isOpen ? /* @__PURE__ */
|
|
4531
|
+
return (isOpen) => !isOpen ? /* @__PURE__ */ React62.createElement(StylesInheritanceSectionIndicators, { fields }) : null;
|
|
4419
4532
|
}
|
|
4420
4533
|
|
|
4421
4534
|
// src/components/style-sections/size-section/object-fit-field.tsx
|
|
4422
|
-
var
|
|
4423
|
-
var
|
|
4424
|
-
var
|
|
4425
|
-
var OBJECT_FIT_LABEL = (0,
|
|
4535
|
+
var React63 = __toESM(require("react"));
|
|
4536
|
+
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
4537
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
4538
|
+
var OBJECT_FIT_LABEL = (0, import_i18n40.__)("Object fit", "elementor");
|
|
4426
4539
|
var positionOptions2 = [
|
|
4427
|
-
{ label: (0,
|
|
4428
|
-
{ label: (0,
|
|
4429
|
-
{ label: (0,
|
|
4430
|
-
{ label: (0,
|
|
4431
|
-
{ label: (0,
|
|
4540
|
+
{ label: (0, import_i18n40.__)("Fill", "elementor"), value: "fill" },
|
|
4541
|
+
{ label: (0, import_i18n40.__)("Cover", "elementor"), value: "cover" },
|
|
4542
|
+
{ label: (0, import_i18n40.__)("Contain", "elementor"), value: "contain" },
|
|
4543
|
+
{ label: (0, import_i18n40.__)("None", "elementor"), value: "none" },
|
|
4544
|
+
{ label: (0, import_i18n40.__)("Scale down", "elementor"), value: "scale-down" }
|
|
4432
4545
|
];
|
|
4433
4546
|
var ObjectFitField = () => {
|
|
4434
|
-
return /* @__PURE__ */
|
|
4547
|
+
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "object-fit", propDisplayName: OBJECT_FIT_LABEL }, /* @__PURE__ */ React63.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ React63.createElement(import_editor_controls35.SelectControl, { options: positionOptions2 })));
|
|
4435
4548
|
};
|
|
4436
4549
|
|
|
4437
4550
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
4438
|
-
var
|
|
4439
|
-
var
|
|
4440
|
-
var
|
|
4441
|
-
var
|
|
4442
|
-
var OVERFLOW_LABEL = (0,
|
|
4551
|
+
var React64 = __toESM(require("react"));
|
|
4552
|
+
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
4553
|
+
var import_icons18 = require("@elementor/icons");
|
|
4554
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
4555
|
+
var OVERFLOW_LABEL = (0, import_i18n41.__)("Overflow", "elementor");
|
|
4443
4556
|
var options7 = [
|
|
4444
4557
|
{
|
|
4445
4558
|
value: "visible",
|
|
4446
|
-
label: (0,
|
|
4447
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4559
|
+
label: (0, import_i18n41.__)("Visible", "elementor"),
|
|
4560
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons18.EyeIcon, { fontSize: size }),
|
|
4448
4561
|
showTooltip: true
|
|
4449
4562
|
},
|
|
4450
4563
|
{
|
|
4451
4564
|
value: "hidden",
|
|
4452
|
-
label: (0,
|
|
4453
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4565
|
+
label: (0, import_i18n41.__)("Hidden", "elementor"),
|
|
4566
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons18.EyeOffIcon, { fontSize: size }),
|
|
4454
4567
|
showTooltip: true
|
|
4455
4568
|
},
|
|
4456
4569
|
{
|
|
4457
4570
|
value: "auto",
|
|
4458
|
-
label: (0,
|
|
4459
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4571
|
+
label: (0, import_i18n41.__)("Auto", "elementor"),
|
|
4572
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons18.LetterAIcon, { fontSize: size }),
|
|
4460
4573
|
showTooltip: true
|
|
4461
4574
|
}
|
|
4462
4575
|
];
|
|
4463
4576
|
var OverflowField = () => {
|
|
4464
|
-
return /* @__PURE__ */
|
|
4577
|
+
return /* @__PURE__ */ React64.createElement(StylesField, { bind: "overflow", propDisplayName: OVERFLOW_LABEL }, /* @__PURE__ */ React64.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ React64.createElement(import_editor_controls36.ToggleControl, { options: options7 })));
|
|
4465
4578
|
};
|
|
4466
4579
|
|
|
4467
4580
|
// src/components/style-sections/size-section/size-section.tsx
|
|
@@ -4469,98 +4582,98 @@ var CssSizeProps = [
|
|
|
4469
4582
|
[
|
|
4470
4583
|
{
|
|
4471
4584
|
bind: "width",
|
|
4472
|
-
label: (0,
|
|
4585
|
+
label: (0, import_i18n42.__)("Width", "elementor")
|
|
4473
4586
|
},
|
|
4474
4587
|
{
|
|
4475
4588
|
bind: "height",
|
|
4476
|
-
label: (0,
|
|
4589
|
+
label: (0, import_i18n42.__)("Height", "elementor")
|
|
4477
4590
|
}
|
|
4478
4591
|
],
|
|
4479
4592
|
[
|
|
4480
4593
|
{
|
|
4481
4594
|
bind: "min-width",
|
|
4482
|
-
label: (0,
|
|
4595
|
+
label: (0, import_i18n42.__)("Min width", "elementor")
|
|
4483
4596
|
},
|
|
4484
4597
|
{
|
|
4485
4598
|
bind: "min-height",
|
|
4486
|
-
label: (0,
|
|
4599
|
+
label: (0, import_i18n42.__)("Min height", "elementor")
|
|
4487
4600
|
}
|
|
4488
4601
|
],
|
|
4489
4602
|
[
|
|
4490
4603
|
{
|
|
4491
4604
|
bind: "max-width",
|
|
4492
|
-
label: (0,
|
|
4605
|
+
label: (0, import_i18n42.__)("Max width", "elementor")
|
|
4493
4606
|
},
|
|
4494
4607
|
{
|
|
4495
4608
|
bind: "max-height",
|
|
4496
|
-
label: (0,
|
|
4609
|
+
label: (0, import_i18n42.__)("Max height", "elementor")
|
|
4497
4610
|
}
|
|
4498
4611
|
]
|
|
4499
4612
|
];
|
|
4500
|
-
var ASPECT_RATIO_LABEL = (0,
|
|
4613
|
+
var ASPECT_RATIO_LABEL = (0, import_i18n42.__)("Aspect Ratio", "elementor");
|
|
4501
4614
|
var SizeSection = () => {
|
|
4502
4615
|
const gridRowRefs = [(0, import_react31.useRef)(null), (0, import_react31.useRef)(null), (0, import_react31.useRef)(null)];
|
|
4503
|
-
return /* @__PURE__ */
|
|
4616
|
+
return /* @__PURE__ */ React65.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React65.createElement(import_ui36.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React65.createElement(import_ui36.Grid, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React65.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React65.createElement(PanelDivider, null), /* @__PURE__ */ React65.createElement(import_ui36.Stack, null, /* @__PURE__ */ React65.createElement(OverflowField, null)), /* @__PURE__ */ React65.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React65.createElement(import_ui36.Stack, { gap: 2, pt: 2 }, /* @__PURE__ */ React65.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React65.createElement(import_editor_controls37.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React65.createElement(PanelDivider, null), /* @__PURE__ */ React65.createElement(ObjectFitField, null), /* @__PURE__ */ React65.createElement(StylesField, { bind: "object-position", propDisplayName: (0, import_i18n42.__)("Object position", "elementor") }, /* @__PURE__ */ React65.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(import_editor_controls37.PositionControl, null))))));
|
|
4504
4617
|
};
|
|
4505
4618
|
var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
|
|
4506
|
-
return /* @__PURE__ */
|
|
4619
|
+
return /* @__PURE__ */ React65.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React65.createElement(import_ui36.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React65.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(ControlLabel, null, label)), /* @__PURE__ */ React65.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(import_editor_controls37.SizeControl, { extendedOptions, anchorRef: rowRef }))));
|
|
4507
4620
|
};
|
|
4508
4621
|
|
|
4509
4622
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
4510
|
-
var
|
|
4511
|
-
var
|
|
4512
|
-
var
|
|
4513
|
-
var MARGIN_LABEL = (0,
|
|
4514
|
-
var PADDING_LABEL = (0,
|
|
4623
|
+
var React66 = __toESM(require("react"));
|
|
4624
|
+
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
4625
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
4626
|
+
var MARGIN_LABEL = (0, import_i18n43.__)("Margin", "elementor");
|
|
4627
|
+
var PADDING_LABEL = (0, import_i18n43.__)("Padding", "elementor");
|
|
4515
4628
|
var SpacingSection = () => {
|
|
4516
4629
|
const { isSiteRtl } = useDirection();
|
|
4517
|
-
return /* @__PURE__ */
|
|
4518
|
-
|
|
4630
|
+
return /* @__PURE__ */ React66.createElement(SectionContent, null, /* @__PURE__ */ React66.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React66.createElement(
|
|
4631
|
+
import_editor_controls38.LinkedDimensionsControl,
|
|
4519
4632
|
{
|
|
4520
4633
|
label: MARGIN_LABEL,
|
|
4521
4634
|
isSiteRtl,
|
|
4522
4635
|
min: -Number.MAX_SAFE_INTEGER
|
|
4523
4636
|
}
|
|
4524
|
-
)), /* @__PURE__ */
|
|
4637
|
+
)), /* @__PURE__ */ React66.createElement(PanelDivider, null), /* @__PURE__ */ React66.createElement(StylesField, { bind: "padding", propDisplayName: PADDING_LABEL }, /* @__PURE__ */ React66.createElement(import_editor_controls38.LinkedDimensionsControl, { label: PADDING_LABEL, isSiteRtl })));
|
|
4525
4638
|
};
|
|
4526
4639
|
|
|
4527
4640
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
4528
|
-
var
|
|
4641
|
+
var React83 = __toESM(require("react"));
|
|
4529
4642
|
|
|
4530
4643
|
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
4531
|
-
var
|
|
4532
|
-
var
|
|
4533
|
-
var
|
|
4534
|
-
var COLUMN_COUNT_LABEL = (0,
|
|
4644
|
+
var React67 = __toESM(require("react"));
|
|
4645
|
+
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
4646
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
4647
|
+
var COLUMN_COUNT_LABEL = (0, import_i18n44.__)("Columns", "elementor");
|
|
4535
4648
|
var ColumnCountField = () => {
|
|
4536
|
-
return /* @__PURE__ */
|
|
4649
|
+
return /* @__PURE__ */ React67.createElement(StylesField, { bind: "column-count", propDisplayName: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React67.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React67.createElement(import_editor_controls39.NumberControl, { shouldForceInt: true, min: 0, step: 1 })));
|
|
4537
4650
|
};
|
|
4538
4651
|
|
|
4539
4652
|
// src/components/style-sections/typography-section/column-gap-field.tsx
|
|
4540
|
-
var
|
|
4653
|
+
var React68 = __toESM(require("react"));
|
|
4541
4654
|
var import_react32 = require("react");
|
|
4542
|
-
var
|
|
4543
|
-
var
|
|
4544
|
-
var COLUMN_GAP_LABEL = (0,
|
|
4655
|
+
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
4656
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
4657
|
+
var COLUMN_GAP_LABEL = (0, import_i18n45.__)("Column gap", "elementor");
|
|
4545
4658
|
var ColumnGapField = () => {
|
|
4546
4659
|
const rowRef = (0, import_react32.useRef)(null);
|
|
4547
|
-
return /* @__PURE__ */
|
|
4660
|
+
return /* @__PURE__ */ React68.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React68.createElement(import_editor_controls40.SizeControl, { anchorRef: rowRef })));
|
|
4548
4661
|
};
|
|
4549
4662
|
|
|
4550
4663
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
4551
|
-
var
|
|
4552
|
-
var
|
|
4664
|
+
var React69 = __toESM(require("react"));
|
|
4665
|
+
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
4553
4666
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
4554
|
-
var
|
|
4555
|
-
var FONT_FAMILY_LABEL = (0,
|
|
4667
|
+
var import_i18n46 = require("@wordpress/i18n");
|
|
4668
|
+
var FONT_FAMILY_LABEL = (0, import_i18n46.__)("Font family", "elementor");
|
|
4556
4669
|
var FontFamilyField = () => {
|
|
4557
|
-
const fontFamilies = (0,
|
|
4670
|
+
const fontFamilies = (0, import_editor_controls41.useFontFamilies)();
|
|
4558
4671
|
const sectionWidth = (0, import_editor_ui7.useSectionWidth)();
|
|
4559
4672
|
if (fontFamilies.length === 0) {
|
|
4560
4673
|
return null;
|
|
4561
4674
|
}
|
|
4562
|
-
return /* @__PURE__ */
|
|
4563
|
-
|
|
4675
|
+
return /* @__PURE__ */ React69.createElement(StylesField, { bind: "font-family", propDisplayName: FONT_FAMILY_LABEL }, /* @__PURE__ */ React69.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ React69.createElement(
|
|
4676
|
+
import_editor_controls41.FontFamilyControl,
|
|
4564
4677
|
{
|
|
4565
4678
|
fontFamilies,
|
|
4566
4679
|
sectionWidth,
|
|
@@ -4570,198 +4683,198 @@ var FontFamilyField = () => {
|
|
|
4570
4683
|
};
|
|
4571
4684
|
|
|
4572
4685
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
4573
|
-
var
|
|
4686
|
+
var React70 = __toESM(require("react"));
|
|
4574
4687
|
var import_react33 = require("react");
|
|
4575
|
-
var
|
|
4576
|
-
var
|
|
4577
|
-
var FONT_SIZE_LABEL = (0,
|
|
4688
|
+
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
4689
|
+
var import_i18n47 = require("@wordpress/i18n");
|
|
4690
|
+
var FONT_SIZE_LABEL = (0, import_i18n47.__)("Font size", "elementor");
|
|
4578
4691
|
var FontSizeField = () => {
|
|
4579
4692
|
const rowRef = (0, import_react33.useRef)(null);
|
|
4580
|
-
return /* @__PURE__ */
|
|
4693
|
+
return /* @__PURE__ */ React70.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React70.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React70.createElement(import_editor_controls42.SizeControl, { anchorRef: rowRef, ariaLabel: FONT_SIZE_LABEL })));
|
|
4581
4694
|
};
|
|
4582
4695
|
|
|
4583
4696
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
4584
|
-
var
|
|
4585
|
-
var
|
|
4586
|
-
var
|
|
4587
|
-
var
|
|
4588
|
-
var FONT_STYLE_LABEL = (0,
|
|
4697
|
+
var React71 = __toESM(require("react"));
|
|
4698
|
+
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
4699
|
+
var import_icons19 = require("@elementor/icons");
|
|
4700
|
+
var import_i18n48 = require("@wordpress/i18n");
|
|
4701
|
+
var FONT_STYLE_LABEL = (0, import_i18n48.__)("Font style", "elementor");
|
|
4589
4702
|
var options8 = [
|
|
4590
4703
|
{
|
|
4591
4704
|
value: "normal",
|
|
4592
|
-
label: (0,
|
|
4593
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4705
|
+
label: (0, import_i18n48.__)("Normal", "elementor"),
|
|
4706
|
+
renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(import_icons19.MinusIcon, { fontSize: size }),
|
|
4594
4707
|
showTooltip: true
|
|
4595
4708
|
},
|
|
4596
4709
|
{
|
|
4597
4710
|
value: "italic",
|
|
4598
|
-
label: (0,
|
|
4599
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4711
|
+
label: (0, import_i18n48.__)("Italic", "elementor"),
|
|
4712
|
+
renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(import_icons19.ItalicIcon, { fontSize: size }),
|
|
4600
4713
|
showTooltip: true
|
|
4601
4714
|
}
|
|
4602
4715
|
];
|
|
4603
4716
|
var FontStyleField = () => {
|
|
4604
|
-
return /* @__PURE__ */
|
|
4717
|
+
return /* @__PURE__ */ React71.createElement(StylesField, { bind: "font-style", propDisplayName: FONT_STYLE_LABEL }, /* @__PURE__ */ React71.createElement(StylesFieldLayout, { label: FONT_STYLE_LABEL }, /* @__PURE__ */ React71.createElement(import_editor_controls43.ToggleControl, { options: options8 })));
|
|
4605
4718
|
};
|
|
4606
4719
|
|
|
4607
4720
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
4608
|
-
var
|
|
4609
|
-
var
|
|
4610
|
-
var
|
|
4611
|
-
var FONT_WEIGHT_LABEL = (0,
|
|
4721
|
+
var React72 = __toESM(require("react"));
|
|
4722
|
+
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
4723
|
+
var import_i18n49 = require("@wordpress/i18n");
|
|
4724
|
+
var FONT_WEIGHT_LABEL = (0, import_i18n49.__)("Font weight", "elementor");
|
|
4612
4725
|
var fontWeightOptions = [
|
|
4613
|
-
{ value: "100", label: (0,
|
|
4614
|
-
{ value: "200", label: (0,
|
|
4615
|
-
{ value: "300", label: (0,
|
|
4616
|
-
{ value: "400", label: (0,
|
|
4617
|
-
{ value: "500", label: (0,
|
|
4618
|
-
{ value: "600", label: (0,
|
|
4619
|
-
{ value: "700", label: (0,
|
|
4620
|
-
{ value: "800", label: (0,
|
|
4621
|
-
{ value: "900", label: (0,
|
|
4726
|
+
{ value: "100", label: (0, import_i18n49.__)("100 - Thin", "elementor") },
|
|
4727
|
+
{ value: "200", label: (0, import_i18n49.__)("200 - Extra light", "elementor") },
|
|
4728
|
+
{ value: "300", label: (0, import_i18n49.__)("300 - Light", "elementor") },
|
|
4729
|
+
{ value: "400", label: (0, import_i18n49.__)("400 - Normal", "elementor") },
|
|
4730
|
+
{ value: "500", label: (0, import_i18n49.__)("500 - Medium", "elementor") },
|
|
4731
|
+
{ value: "600", label: (0, import_i18n49.__)("600 - Semi bold", "elementor") },
|
|
4732
|
+
{ value: "700", label: (0, import_i18n49.__)("700 - Bold", "elementor") },
|
|
4733
|
+
{ value: "800", label: (0, import_i18n49.__)("800 - Extra bold", "elementor") },
|
|
4734
|
+
{ value: "900", label: (0, import_i18n49.__)("900 - Black", "elementor") }
|
|
4622
4735
|
];
|
|
4623
4736
|
var FontWeightField = () => {
|
|
4624
|
-
return /* @__PURE__ */
|
|
4737
|
+
return /* @__PURE__ */ React72.createElement(StylesField, { bind: "font-weight", propDisplayName: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React72.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React72.createElement(import_editor_controls44.SelectControl, { options: fontWeightOptions })));
|
|
4625
4738
|
};
|
|
4626
4739
|
|
|
4627
4740
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
4628
|
-
var
|
|
4741
|
+
var React73 = __toESM(require("react"));
|
|
4629
4742
|
var import_react34 = require("react");
|
|
4630
|
-
var
|
|
4631
|
-
var
|
|
4632
|
-
var LETTER_SPACING_LABEL = (0,
|
|
4743
|
+
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
4744
|
+
var import_i18n50 = require("@wordpress/i18n");
|
|
4745
|
+
var LETTER_SPACING_LABEL = (0, import_i18n50.__)("Letter spacing", "elementor");
|
|
4633
4746
|
var LetterSpacingField = () => {
|
|
4634
4747
|
const rowRef = (0, import_react34.useRef)(null);
|
|
4635
|
-
return /* @__PURE__ */
|
|
4748
|
+
return /* @__PURE__ */ React73.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React73.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React73.createElement(import_editor_controls45.SizeControl, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
|
|
4636
4749
|
};
|
|
4637
4750
|
|
|
4638
4751
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
4639
|
-
var
|
|
4752
|
+
var React74 = __toESM(require("react"));
|
|
4640
4753
|
var import_react35 = require("react");
|
|
4641
|
-
var
|
|
4642
|
-
var
|
|
4643
|
-
var LINE_HEIGHT_LABEL = (0,
|
|
4754
|
+
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
4755
|
+
var import_i18n51 = require("@wordpress/i18n");
|
|
4756
|
+
var LINE_HEIGHT_LABEL = (0, import_i18n51.__)("Line height", "elementor");
|
|
4644
4757
|
var LineHeightField = () => {
|
|
4645
4758
|
const rowRef = (0, import_react35.useRef)(null);
|
|
4646
|
-
return /* @__PURE__ */
|
|
4759
|
+
return /* @__PURE__ */ React74.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React74.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React74.createElement(import_editor_controls46.SizeControl, { anchorRef: rowRef })));
|
|
4647
4760
|
};
|
|
4648
4761
|
|
|
4649
4762
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
4650
|
-
var
|
|
4651
|
-
var
|
|
4652
|
-
var
|
|
4653
|
-
var
|
|
4654
|
-
var
|
|
4655
|
-
var TEXT_ALIGNMENT_LABEL = (0,
|
|
4656
|
-
var AlignStartIcon = (0,
|
|
4657
|
-
var AlignEndIcon = (0,
|
|
4763
|
+
var React75 = __toESM(require("react"));
|
|
4764
|
+
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
4765
|
+
var import_icons20 = require("@elementor/icons");
|
|
4766
|
+
var import_ui37 = require("@elementor/ui");
|
|
4767
|
+
var import_i18n52 = require("@wordpress/i18n");
|
|
4768
|
+
var TEXT_ALIGNMENT_LABEL = (0, import_i18n52.__)("Text align", "elementor");
|
|
4769
|
+
var AlignStartIcon = (0, import_ui37.withDirection)(import_icons20.AlignLeftIcon);
|
|
4770
|
+
var AlignEndIcon = (0, import_ui37.withDirection)(import_icons20.AlignRightIcon);
|
|
4658
4771
|
var options9 = [
|
|
4659
4772
|
{
|
|
4660
4773
|
value: "start",
|
|
4661
|
-
label: (0,
|
|
4662
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4774
|
+
label: (0, import_i18n52.__)("Start", "elementor"),
|
|
4775
|
+
renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(AlignStartIcon, { fontSize: size }),
|
|
4663
4776
|
showTooltip: true
|
|
4664
4777
|
},
|
|
4665
4778
|
{
|
|
4666
4779
|
value: "center",
|
|
4667
|
-
label: (0,
|
|
4668
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4780
|
+
label: (0, import_i18n52.__)("Center", "elementor"),
|
|
4781
|
+
renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons20.AlignCenterIcon, { fontSize: size }),
|
|
4669
4782
|
showTooltip: true
|
|
4670
4783
|
},
|
|
4671
4784
|
{
|
|
4672
4785
|
value: "end",
|
|
4673
|
-
label: (0,
|
|
4674
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4786
|
+
label: (0, import_i18n52.__)("End", "elementor"),
|
|
4787
|
+
renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(AlignEndIcon, { fontSize: size }),
|
|
4675
4788
|
showTooltip: true
|
|
4676
4789
|
},
|
|
4677
4790
|
{
|
|
4678
4791
|
value: "justify",
|
|
4679
|
-
label: (0,
|
|
4680
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4792
|
+
label: (0, import_i18n52.__)("Justify", "elementor"),
|
|
4793
|
+
renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons20.AlignJustifiedIcon, { fontSize: size }),
|
|
4681
4794
|
showTooltip: true
|
|
4682
4795
|
}
|
|
4683
4796
|
];
|
|
4684
4797
|
var TextAlignmentField = () => {
|
|
4685
|
-
return /* @__PURE__ */
|
|
4798
|
+
return /* @__PURE__ */ React75.createElement(StylesField, { bind: "text-align", propDisplayName: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React75.createElement(UiProviders, null, /* @__PURE__ */ React75.createElement(StylesFieldLayout, { label: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React75.createElement(import_editor_controls47.ToggleControl, { options: options9 }))));
|
|
4686
4799
|
};
|
|
4687
4800
|
|
|
4688
4801
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
4689
|
-
var
|
|
4690
|
-
var
|
|
4691
|
-
var
|
|
4692
|
-
var TEXT_COLOR_LABEL = (0,
|
|
4802
|
+
var React76 = __toESM(require("react"));
|
|
4803
|
+
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
4804
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
4805
|
+
var TEXT_COLOR_LABEL = (0, import_i18n53.__)("Text color", "elementor");
|
|
4693
4806
|
var TextColorField = () => {
|
|
4694
|
-
return /* @__PURE__ */
|
|
4807
|
+
return /* @__PURE__ */ React76.createElement(StylesField, { bind: "color", propDisplayName: TEXT_COLOR_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ React76.createElement(import_editor_controls48.ColorControl, { id: "text-color-control" })));
|
|
4695
4808
|
};
|
|
4696
4809
|
|
|
4697
4810
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
4698
|
-
var
|
|
4699
|
-
var
|
|
4700
|
-
var
|
|
4701
|
-
var
|
|
4702
|
-
var TEXT_DECORATION_LABEL = (0,
|
|
4811
|
+
var React77 = __toESM(require("react"));
|
|
4812
|
+
var import_editor_controls49 = require("@elementor/editor-controls");
|
|
4813
|
+
var import_icons21 = require("@elementor/icons");
|
|
4814
|
+
var import_i18n54 = require("@wordpress/i18n");
|
|
4815
|
+
var TEXT_DECORATION_LABEL = (0, import_i18n54.__)("Line decoration", "elementor");
|
|
4703
4816
|
var options10 = [
|
|
4704
4817
|
{
|
|
4705
4818
|
value: "none",
|
|
4706
|
-
label: (0,
|
|
4707
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4819
|
+
label: (0, import_i18n54.__)("None", "elementor"),
|
|
4820
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.MinusIcon, { fontSize: size }),
|
|
4708
4821
|
showTooltip: true,
|
|
4709
4822
|
exclusive: true
|
|
4710
4823
|
},
|
|
4711
4824
|
{
|
|
4712
4825
|
value: "underline",
|
|
4713
|
-
label: (0,
|
|
4714
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4826
|
+
label: (0, import_i18n54.__)("Underline", "elementor"),
|
|
4827
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.UnderlineIcon, { fontSize: size }),
|
|
4715
4828
|
showTooltip: true
|
|
4716
4829
|
},
|
|
4717
4830
|
{
|
|
4718
4831
|
value: "line-through",
|
|
4719
|
-
label: (0,
|
|
4720
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4832
|
+
label: (0, import_i18n54.__)("Line-through", "elementor"),
|
|
4833
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.StrikethroughIcon, { fontSize: size }),
|
|
4721
4834
|
showTooltip: true
|
|
4722
4835
|
},
|
|
4723
4836
|
{
|
|
4724
4837
|
value: "overline",
|
|
4725
|
-
label: (0,
|
|
4726
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4838
|
+
label: (0, import_i18n54.__)("Overline", "elementor"),
|
|
4839
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.OverlineIcon, { fontSize: size }),
|
|
4727
4840
|
showTooltip: true
|
|
4728
4841
|
}
|
|
4729
4842
|
];
|
|
4730
|
-
var TextDecorationField = () => /* @__PURE__ */
|
|
4843
|
+
var TextDecorationField = () => /* @__PURE__ */ React77.createElement(StylesField, { bind: "text-decoration", propDisplayName: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React77.createElement(StylesFieldLayout, { label: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React77.createElement(import_editor_controls49.ToggleControl, { options: options10, exclusive: false })));
|
|
4731
4844
|
|
|
4732
4845
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
4733
|
-
var
|
|
4734
|
-
var
|
|
4735
|
-
var
|
|
4736
|
-
var
|
|
4737
|
-
var TEXT_DIRECTION_LABEL = (0,
|
|
4846
|
+
var React78 = __toESM(require("react"));
|
|
4847
|
+
var import_editor_controls50 = require("@elementor/editor-controls");
|
|
4848
|
+
var import_icons22 = require("@elementor/icons");
|
|
4849
|
+
var import_i18n55 = require("@wordpress/i18n");
|
|
4850
|
+
var TEXT_DIRECTION_LABEL = (0, import_i18n55.__)("Direction", "elementor");
|
|
4738
4851
|
var options11 = [
|
|
4739
4852
|
{
|
|
4740
4853
|
value: "ltr",
|
|
4741
|
-
label: (0,
|
|
4742
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4854
|
+
label: (0, import_i18n55.__)("Left to right", "elementor"),
|
|
4855
|
+
renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons22.TextDirectionLtrIcon, { fontSize: size }),
|
|
4743
4856
|
showTooltip: true
|
|
4744
4857
|
},
|
|
4745
4858
|
{
|
|
4746
4859
|
value: "rtl",
|
|
4747
|
-
label: (0,
|
|
4748
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4860
|
+
label: (0, import_i18n55.__)("Right to left", "elementor"),
|
|
4861
|
+
renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons22.TextDirectionRtlIcon, { fontSize: size }),
|
|
4749
4862
|
showTooltip: true
|
|
4750
4863
|
}
|
|
4751
4864
|
];
|
|
4752
4865
|
var TextDirectionField = () => {
|
|
4753
|
-
return /* @__PURE__ */
|
|
4866
|
+
return /* @__PURE__ */ React78.createElement(StylesField, { bind: "direction", propDisplayName: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React78.createElement(StylesFieldLayout, { label: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React78.createElement(import_editor_controls50.ToggleControl, { options: options11 })));
|
|
4754
4867
|
};
|
|
4755
4868
|
|
|
4756
4869
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
4757
|
-
var
|
|
4758
|
-
var
|
|
4759
|
-
var
|
|
4870
|
+
var React80 = __toESM(require("react"));
|
|
4871
|
+
var import_editor_controls51 = require("@elementor/editor-controls");
|
|
4872
|
+
var import_i18n56 = require("@wordpress/i18n");
|
|
4760
4873
|
|
|
4761
4874
|
// src/components/add-or-remove-content.tsx
|
|
4762
|
-
var
|
|
4763
|
-
var
|
|
4764
|
-
var
|
|
4875
|
+
var React79 = __toESM(require("react"));
|
|
4876
|
+
var import_icons23 = require("@elementor/icons");
|
|
4877
|
+
var import_ui38 = require("@elementor/ui");
|
|
4765
4878
|
var SIZE = "tiny";
|
|
4766
4879
|
var AddOrRemoveContent = ({
|
|
4767
4880
|
isAdded,
|
|
@@ -4771,8 +4884,8 @@ var AddOrRemoveContent = ({
|
|
|
4771
4884
|
disabled,
|
|
4772
4885
|
renderLabel
|
|
4773
4886
|
}) => {
|
|
4774
|
-
return /* @__PURE__ */
|
|
4775
|
-
|
|
4887
|
+
return /* @__PURE__ */ React79.createElement(SectionContent, null, /* @__PURE__ */ React79.createElement(
|
|
4888
|
+
import_ui38.Stack,
|
|
4776
4889
|
{
|
|
4777
4890
|
direction: "row",
|
|
4778
4891
|
sx: {
|
|
@@ -4782,8 +4895,8 @@ var AddOrRemoveContent = ({
|
|
|
4782
4895
|
}
|
|
4783
4896
|
},
|
|
4784
4897
|
renderLabel(),
|
|
4785
|
-
isAdded ? /* @__PURE__ */
|
|
4786
|
-
), /* @__PURE__ */
|
|
4898
|
+
isAdded ? /* @__PURE__ */ React79.createElement(import_ui38.IconButton, { size: SIZE, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React79.createElement(import_icons23.MinusIcon, { fontSize: SIZE })) : /* @__PURE__ */ React79.createElement(import_ui38.IconButton, { size: SIZE, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React79.createElement(import_icons23.PlusIcon, { fontSize: SIZE }))
|
|
4899
|
+
), /* @__PURE__ */ React79.createElement(import_ui38.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React79.createElement(SectionContent, null, children)));
|
|
4787
4900
|
};
|
|
4788
4901
|
|
|
4789
4902
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -4803,7 +4916,7 @@ var initTextStroke = {
|
|
|
4803
4916
|
}
|
|
4804
4917
|
}
|
|
4805
4918
|
};
|
|
4806
|
-
var TEXT_STROKE_LABEL = (0,
|
|
4919
|
+
var TEXT_STROKE_LABEL = (0, import_i18n56.__)("Text stroke", "elementor");
|
|
4807
4920
|
var TextStrokeField = () => {
|
|
4808
4921
|
const { value, setValue, canEdit } = useStylesField("stroke", {
|
|
4809
4922
|
history: { propDisplayName: TEXT_STROKE_LABEL }
|
|
@@ -4815,67 +4928,67 @@ var TextStrokeField = () => {
|
|
|
4815
4928
|
setValue(null);
|
|
4816
4929
|
};
|
|
4817
4930
|
const hasTextStroke = Boolean(value);
|
|
4818
|
-
return /* @__PURE__ */
|
|
4931
|
+
return /* @__PURE__ */ React80.createElement(StylesField, { bind: "stroke", propDisplayName: TEXT_STROKE_LABEL }, /* @__PURE__ */ React80.createElement(
|
|
4819
4932
|
AddOrRemoveContent,
|
|
4820
4933
|
{
|
|
4821
4934
|
isAdded: hasTextStroke,
|
|
4822
4935
|
onAdd: addTextStroke,
|
|
4823
4936
|
onRemove: removeTextStroke,
|
|
4824
4937
|
disabled: !canEdit,
|
|
4825
|
-
renderLabel: () => /* @__PURE__ */
|
|
4938
|
+
renderLabel: () => /* @__PURE__ */ React80.createElement(ControlLabel, null, TEXT_STROKE_LABEL)
|
|
4826
4939
|
},
|
|
4827
|
-
/* @__PURE__ */
|
|
4940
|
+
/* @__PURE__ */ React80.createElement(import_editor_controls51.StrokeControl, null)
|
|
4828
4941
|
));
|
|
4829
4942
|
};
|
|
4830
4943
|
|
|
4831
4944
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
4832
|
-
var
|
|
4833
|
-
var
|
|
4834
|
-
var
|
|
4835
|
-
var
|
|
4836
|
-
var TEXT_TRANSFORM_LABEL = (0,
|
|
4945
|
+
var React81 = __toESM(require("react"));
|
|
4946
|
+
var import_editor_controls52 = require("@elementor/editor-controls");
|
|
4947
|
+
var import_icons24 = require("@elementor/icons");
|
|
4948
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
4949
|
+
var TEXT_TRANSFORM_LABEL = (0, import_i18n57.__)("Text transform", "elementor");
|
|
4837
4950
|
var options12 = [
|
|
4838
4951
|
{
|
|
4839
4952
|
value: "none",
|
|
4840
|
-
label: (0,
|
|
4841
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4953
|
+
label: (0, import_i18n57.__)("None", "elementor"),
|
|
4954
|
+
renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons24.MinusIcon, { fontSize: size }),
|
|
4842
4955
|
showTooltip: true
|
|
4843
4956
|
},
|
|
4844
4957
|
{
|
|
4845
4958
|
value: "capitalize",
|
|
4846
|
-
label: (0,
|
|
4847
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4959
|
+
label: (0, import_i18n57.__)("Capitalize", "elementor"),
|
|
4960
|
+
renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons24.LetterCaseIcon, { fontSize: size }),
|
|
4848
4961
|
showTooltip: true
|
|
4849
4962
|
},
|
|
4850
4963
|
{
|
|
4851
4964
|
value: "uppercase",
|
|
4852
|
-
label: (0,
|
|
4853
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4965
|
+
label: (0, import_i18n57.__)("Uppercase", "elementor"),
|
|
4966
|
+
renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons24.LetterCaseUpperIcon, { fontSize: size }),
|
|
4854
4967
|
showTooltip: true
|
|
4855
4968
|
},
|
|
4856
4969
|
{
|
|
4857
4970
|
value: "lowercase",
|
|
4858
|
-
label: (0,
|
|
4859
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4971
|
+
label: (0, import_i18n57.__)("Lowercase", "elementor"),
|
|
4972
|
+
renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons24.LetterCaseLowerIcon, { fontSize: size }),
|
|
4860
4973
|
showTooltip: true
|
|
4861
4974
|
}
|
|
4862
4975
|
];
|
|
4863
|
-
var TransformField = () => /* @__PURE__ */
|
|
4976
|
+
var TransformField = () => /* @__PURE__ */ React81.createElement(StylesField, { bind: "text-transform", propDisplayName: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React81.createElement(StylesFieldLayout, { label: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React81.createElement(import_editor_controls52.ToggleControl, { options: options12 })));
|
|
4864
4977
|
|
|
4865
4978
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
4866
|
-
var
|
|
4979
|
+
var React82 = __toESM(require("react"));
|
|
4867
4980
|
var import_react36 = require("react");
|
|
4868
|
-
var
|
|
4869
|
-
var
|
|
4870
|
-
var WORD_SPACING_LABEL = (0,
|
|
4981
|
+
var import_editor_controls53 = require("@elementor/editor-controls");
|
|
4982
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
4983
|
+
var WORD_SPACING_LABEL = (0, import_i18n58.__)("Word spacing", "elementor");
|
|
4871
4984
|
var WordSpacingField = () => {
|
|
4872
4985
|
const rowRef = (0, import_react36.useRef)(null);
|
|
4873
|
-
return /* @__PURE__ */
|
|
4986
|
+
return /* @__PURE__ */ React82.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React82.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React82.createElement(import_editor_controls53.SizeControl, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
|
|
4874
4987
|
};
|
|
4875
4988
|
|
|
4876
4989
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
4877
4990
|
var TypographySection = () => {
|
|
4878
|
-
return /* @__PURE__ */
|
|
4991
|
+
return /* @__PURE__ */ React83.createElement(SectionContent, null, /* @__PURE__ */ React83.createElement(FontFamilyField, null), /* @__PURE__ */ React83.createElement(FontWeightField, null), /* @__PURE__ */ React83.createElement(FontSizeField, null), /* @__PURE__ */ React83.createElement(PanelDivider, null), /* @__PURE__ */ React83.createElement(TextAlignmentField, null), /* @__PURE__ */ React83.createElement(TextColorField, null), /* @__PURE__ */ React83.createElement(
|
|
4879
4992
|
StyleTabCollapsibleContent,
|
|
4880
4993
|
{
|
|
4881
4994
|
fields: [
|
|
@@ -4890,18 +5003,18 @@ var TypographySection = () => {
|
|
|
4890
5003
|
"stroke"
|
|
4891
5004
|
]
|
|
4892
5005
|
},
|
|
4893
|
-
/* @__PURE__ */
|
|
5006
|
+
/* @__PURE__ */ React83.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React83.createElement(LineHeightField, null), /* @__PURE__ */ React83.createElement(LetterSpacingField, null), /* @__PURE__ */ React83.createElement(WordSpacingField, null), /* @__PURE__ */ React83.createElement(ColumnCountField, null), /* @__PURE__ */ React83.createElement(ColumnGapField, null), /* @__PURE__ */ React83.createElement(PanelDivider, null), /* @__PURE__ */ React83.createElement(TextDecorationField, null), /* @__PURE__ */ React83.createElement(TransformField, null), /* @__PURE__ */ React83.createElement(TextDirectionField, null), /* @__PURE__ */ React83.createElement(FontStyleField, null), /* @__PURE__ */ React83.createElement(TextStrokeField, null))
|
|
4894
5007
|
));
|
|
4895
5008
|
};
|
|
4896
5009
|
|
|
4897
5010
|
// src/components/style-tab-section.tsx
|
|
4898
|
-
var
|
|
5011
|
+
var React84 = __toESM(require("react"));
|
|
4899
5012
|
var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
4900
5013
|
const { component, name, title, action } = section;
|
|
4901
5014
|
const tabDefaults = useDefaultPanelSettings();
|
|
4902
|
-
const SectionComponent = component || (() => /* @__PURE__ */
|
|
5015
|
+
const SectionComponent = component || (() => /* @__PURE__ */ React84.createElement(React84.Fragment, null));
|
|
4903
5016
|
const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes(name);
|
|
4904
|
-
return /* @__PURE__ */
|
|
5017
|
+
return /* @__PURE__ */ React84.createElement(
|
|
4905
5018
|
Section,
|
|
4906
5019
|
{
|
|
4907
5020
|
title,
|
|
@@ -4910,7 +5023,7 @@ var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
|
4910
5023
|
unmountOnExit,
|
|
4911
5024
|
action
|
|
4912
5025
|
},
|
|
4913
|
-
/* @__PURE__ */
|
|
5026
|
+
/* @__PURE__ */ React84.createElement(SectionComponent, null)
|
|
4914
5027
|
);
|
|
4915
5028
|
};
|
|
4916
5029
|
|
|
@@ -4932,7 +5045,7 @@ var StyleTab = () => {
|
|
|
4932
5045
|
if (!currentClassesProp) {
|
|
4933
5046
|
return null;
|
|
4934
5047
|
}
|
|
4935
|
-
return /* @__PURE__ */
|
|
5048
|
+
return /* @__PURE__ */ React85.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React85.createElement(
|
|
4936
5049
|
StyleProvider,
|
|
4937
5050
|
{
|
|
4938
5051
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -4943,13 +5056,13 @@ var StyleTab = () => {
|
|
|
4943
5056
|
},
|
|
4944
5057
|
setMetaState: setActiveStyleState
|
|
4945
5058
|
},
|
|
4946
|
-
/* @__PURE__ */
|
|
5059
|
+
/* @__PURE__ */ React85.createElement(import_session8.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React85.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React85.createElement(ClassesHeader, null, /* @__PURE__ */ React85.createElement(CssClassSelector, null), /* @__PURE__ */ React85.createElement(import_ui39.Divider, null)), /* @__PURE__ */ React85.createElement(SectionsList, null, /* @__PURE__ */ React85.createElement(
|
|
4947
5060
|
StyleTabSection,
|
|
4948
5061
|
{
|
|
4949
5062
|
section: {
|
|
4950
5063
|
component: LayoutSection,
|
|
4951
5064
|
name: "Layout",
|
|
4952
|
-
title: (0,
|
|
5065
|
+
title: (0, import_i18n59.__)("Layout", "elementor")
|
|
4953
5066
|
},
|
|
4954
5067
|
fields: [
|
|
4955
5068
|
"display",
|
|
@@ -4959,26 +5072,29 @@ var StyleTab = () => {
|
|
|
4959
5072
|
"align-items",
|
|
4960
5073
|
"align-content",
|
|
4961
5074
|
"align-self",
|
|
4962
|
-
"gap"
|
|
5075
|
+
"gap",
|
|
5076
|
+
"order",
|
|
5077
|
+
"grid-column",
|
|
5078
|
+
"grid-row"
|
|
4963
5079
|
]
|
|
4964
5080
|
}
|
|
4965
|
-
), /* @__PURE__ */
|
|
5081
|
+
), /* @__PURE__ */ React85.createElement(
|
|
4966
5082
|
StyleTabSection,
|
|
4967
5083
|
{
|
|
4968
5084
|
section: {
|
|
4969
5085
|
component: SpacingSection,
|
|
4970
5086
|
name: "Spacing",
|
|
4971
|
-
title: (0,
|
|
5087
|
+
title: (0, import_i18n59.__)("Spacing", "elementor")
|
|
4972
5088
|
},
|
|
4973
5089
|
fields: ["margin", "padding"]
|
|
4974
5090
|
}
|
|
4975
|
-
), /* @__PURE__ */
|
|
5091
|
+
), /* @__PURE__ */ React85.createElement(
|
|
4976
5092
|
StyleTabSection,
|
|
4977
5093
|
{
|
|
4978
5094
|
section: {
|
|
4979
5095
|
component: SizeSection,
|
|
4980
5096
|
name: "Size",
|
|
4981
|
-
title: (0,
|
|
5097
|
+
title: (0, import_i18n59.__)("Size", "elementor")
|
|
4982
5098
|
},
|
|
4983
5099
|
fields: [
|
|
4984
5100
|
"width",
|
|
@@ -4992,23 +5108,23 @@ var StyleTab = () => {
|
|
|
4992
5108
|
"object-fit"
|
|
4993
5109
|
]
|
|
4994
5110
|
}
|
|
4995
|
-
), /* @__PURE__ */
|
|
5111
|
+
), /* @__PURE__ */ React85.createElement(
|
|
4996
5112
|
StyleTabSection,
|
|
4997
5113
|
{
|
|
4998
5114
|
section: {
|
|
4999
5115
|
component: PositionSection,
|
|
5000
5116
|
name: "Position",
|
|
5001
|
-
title: (0,
|
|
5117
|
+
title: (0, import_i18n59.__)("Position", "elementor")
|
|
5002
5118
|
},
|
|
5003
5119
|
fields: ["position", "z-index", "scroll-margin-top"]
|
|
5004
5120
|
}
|
|
5005
|
-
), /* @__PURE__ */
|
|
5121
|
+
), /* @__PURE__ */ React85.createElement(
|
|
5006
5122
|
StyleTabSection,
|
|
5007
5123
|
{
|
|
5008
5124
|
section: {
|
|
5009
5125
|
component: TypographySection,
|
|
5010
5126
|
name: "Typography",
|
|
5011
|
-
title: (0,
|
|
5127
|
+
title: (0, import_i18n59.__)("Typography", "elementor")
|
|
5012
5128
|
},
|
|
5013
5129
|
fields: [
|
|
5014
5130
|
"font-family",
|
|
@@ -5027,33 +5143,33 @@ var StyleTab = () => {
|
|
|
5027
5143
|
"stroke"
|
|
5028
5144
|
]
|
|
5029
5145
|
}
|
|
5030
|
-
), /* @__PURE__ */
|
|
5146
|
+
), /* @__PURE__ */ React85.createElement(
|
|
5031
5147
|
StyleTabSection,
|
|
5032
5148
|
{
|
|
5033
5149
|
section: {
|
|
5034
5150
|
component: BackgroundSection,
|
|
5035
5151
|
name: "Background",
|
|
5036
|
-
title: (0,
|
|
5152
|
+
title: (0, import_i18n59.__)("Background", "elementor")
|
|
5037
5153
|
},
|
|
5038
5154
|
fields: ["background"]
|
|
5039
5155
|
}
|
|
5040
|
-
), /* @__PURE__ */
|
|
5156
|
+
), /* @__PURE__ */ React85.createElement(
|
|
5041
5157
|
StyleTabSection,
|
|
5042
5158
|
{
|
|
5043
5159
|
section: {
|
|
5044
5160
|
component: BorderSection,
|
|
5045
5161
|
name: "Border",
|
|
5046
|
-
title: (0,
|
|
5162
|
+
title: (0, import_i18n59.__)("Border", "elementor")
|
|
5047
5163
|
},
|
|
5048
5164
|
fields: ["border-radius", "border-width", "border-color", "border-style"]
|
|
5049
5165
|
}
|
|
5050
|
-
), /* @__PURE__ */
|
|
5166
|
+
), /* @__PURE__ */ React85.createElement(
|
|
5051
5167
|
StyleTabSection,
|
|
5052
5168
|
{
|
|
5053
5169
|
section: {
|
|
5054
5170
|
component: EffectsSection,
|
|
5055
5171
|
name: "Effects",
|
|
5056
|
-
title: (0,
|
|
5172
|
+
title: (0, import_i18n59.__)("Effects", "elementor")
|
|
5057
5173
|
},
|
|
5058
5174
|
fields: [
|
|
5059
5175
|
"mix-blend-mode",
|
|
@@ -5066,12 +5182,12 @@ var StyleTab = () => {
|
|
|
5066
5182
|
"transition"
|
|
5067
5183
|
]
|
|
5068
5184
|
}
|
|
5069
|
-
), /* @__PURE__ */
|
|
5185
|
+
), /* @__PURE__ */ React85.createElement(StyleTabSlot, null)), /* @__PURE__ */ React85.createElement(import_ui39.Box, { sx: { height: "150px" } })))
|
|
5070
5186
|
));
|
|
5071
5187
|
};
|
|
5072
5188
|
function ClassesHeader({ children }) {
|
|
5073
5189
|
const scrollDirection = useScrollDirection();
|
|
5074
|
-
return /* @__PURE__ */
|
|
5190
|
+
return /* @__PURE__ */ React85.createElement(import_ui39.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
5075
5191
|
}
|
|
5076
5192
|
function useCurrentClassesProp() {
|
|
5077
5193
|
const { elementType } = useElement();
|
|
@@ -5090,7 +5206,7 @@ var EditingPanelTabs = () => {
|
|
|
5090
5206
|
return (
|
|
5091
5207
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
5092
5208
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
5093
|
-
/* @__PURE__ */
|
|
5209
|
+
/* @__PURE__ */ React86.createElement(import_react38.Fragment, { key: element.id }, /* @__PURE__ */ React86.createElement(PanelTabContent, null))
|
|
5094
5210
|
);
|
|
5095
5211
|
};
|
|
5096
5212
|
var PanelTabContent = () => {
|
|
@@ -5101,9 +5217,9 @@ var PanelTabContent = () => {
|
|
|
5101
5217
|
const isPromotedElement = !!(0, import_editor_elements12.getWidgetsCache)()?.[element.type]?.meta?.is_pro_promotion;
|
|
5102
5218
|
const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
5103
5219
|
const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;
|
|
5104
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
5105
|
-
return /* @__PURE__ */
|
|
5106
|
-
|
|
5220
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui40.useTabs)(currentTab);
|
|
5221
|
+
return /* @__PURE__ */ React86.createElement(ScrollProvider, null, /* @__PURE__ */ React86.createElement(import_ui40.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React86.createElement(import_ui40.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React86.createElement(
|
|
5222
|
+
import_ui40.Tabs,
|
|
5107
5223
|
{
|
|
5108
5224
|
variant: "fullWidth",
|
|
5109
5225
|
size: "small",
|
|
@@ -5114,10 +5230,10 @@ var PanelTabContent = () => {
|
|
|
5114
5230
|
setCurrentTab(newValue);
|
|
5115
5231
|
}
|
|
5116
5232
|
},
|
|
5117
|
-
!isPromotedElement && /* @__PURE__ */
|
|
5118
|
-
/* @__PURE__ */
|
|
5119
|
-
isInteractionsActive && /* @__PURE__ */
|
|
5120
|
-
), /* @__PURE__ */
|
|
5233
|
+
!isPromotedElement && /* @__PURE__ */ React86.createElement(import_ui40.Tab, { label: (0, import_i18n60.__)("General", "elementor"), ...getTabProps("settings") }),
|
|
5234
|
+
/* @__PURE__ */ React86.createElement(import_ui40.Tab, { label: (0, import_i18n60.__)("Style", "elementor"), ...getTabProps("style") }),
|
|
5235
|
+
isInteractionsActive && /* @__PURE__ */ React86.createElement(import_ui40.Tab, { label: (0, import_i18n60.__)("Interactions", "elementor"), ...getTabProps("interactions") })
|
|
5236
|
+
), /* @__PURE__ */ React86.createElement(import_ui40.Divider, null)), !isPromotedElement && /* @__PURE__ */ React86.createElement(import_ui40.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React86.createElement(SettingsTab, null)), /* @__PURE__ */ React86.createElement(import_ui40.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React86.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React86.createElement(import_ui40.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React86.createElement(InteractionsTab, null))));
|
|
5121
5237
|
};
|
|
5122
5238
|
|
|
5123
5239
|
// src/components/editing-panel.tsx
|
|
@@ -5125,18 +5241,18 @@ var { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = (0, import_
|
|
|
5125
5241
|
var { useMenuItems } = import_menus.controlActionsMenu;
|
|
5126
5242
|
var EditingPanel = () => {
|
|
5127
5243
|
const { element, elementType, settings } = (0, import_editor_elements13.useSelectedElementSettings)();
|
|
5128
|
-
const controlReplacements = (0,
|
|
5244
|
+
const controlReplacements = (0, import_editor_controls54.getControlReplacements)();
|
|
5129
5245
|
const menuItems = useMenuItems().default;
|
|
5130
5246
|
if (!element || !elementType) {
|
|
5131
5247
|
return null;
|
|
5132
5248
|
}
|
|
5133
|
-
const panelTitle = (0,
|
|
5249
|
+
const panelTitle = (0, import_i18n61.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
5134
5250
|
const { component: ReplacementComponent } = getEditingPanelReplacement(element, elementType) ?? {};
|
|
5135
|
-
let panelContent = /* @__PURE__ */
|
|
5251
|
+
let panelContent = /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React87.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React87.createElement(import_icons25.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React87.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React87.createElement(EditingPanelTabs, null)));
|
|
5136
5252
|
if (ReplacementComponent) {
|
|
5137
|
-
panelContent = /* @__PURE__ */
|
|
5253
|
+
panelContent = /* @__PURE__ */ React87.createElement(ReplacementComponent, null);
|
|
5138
5254
|
}
|
|
5139
|
-
return /* @__PURE__ */
|
|
5255
|
+
return /* @__PURE__ */ React87.createElement(import_ui41.ErrorBoundary, { fallback: /* @__PURE__ */ React87.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React87.createElement(import_session9.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React87.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React87.createElement(import_editor_controls54.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React87.createElement(import_editor_controls54.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React87.createElement(ElementProvider, { element, elementType, settings }, /* @__PURE__ */ React87.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React87.createElement(PanelHeaderTopSlot, null), panelContent)))))));
|
|
5140
5256
|
};
|
|
5141
5257
|
|
|
5142
5258
|
// src/init.ts
|
|
@@ -5185,24 +5301,24 @@ var EditingPanelHooks = () => {
|
|
|
5185
5301
|
};
|
|
5186
5302
|
|
|
5187
5303
|
// src/components/promotions/init.tsx
|
|
5188
|
-
var
|
|
5304
|
+
var import_editor_controls56 = require("@elementor/editor-controls");
|
|
5189
5305
|
|
|
5190
5306
|
// src/components/promotions/custom-css.tsx
|
|
5191
|
-
var
|
|
5307
|
+
var React88 = __toESM(require("react"));
|
|
5192
5308
|
var import_react40 = require("react");
|
|
5193
|
-
var
|
|
5194
|
-
var
|
|
5309
|
+
var import_editor_controls55 = require("@elementor/editor-controls");
|
|
5310
|
+
var import_i18n62 = require("@wordpress/i18n");
|
|
5195
5311
|
var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
|
|
5196
5312
|
var CustomCssSection = () => {
|
|
5197
5313
|
const triggerRef = (0, import_react40.useRef)(null);
|
|
5198
|
-
return /* @__PURE__ */
|
|
5314
|
+
return /* @__PURE__ */ React88.createElement(
|
|
5199
5315
|
StyleTabSection,
|
|
5200
5316
|
{
|
|
5201
5317
|
section: {
|
|
5202
5318
|
name: "Custom CSS",
|
|
5203
|
-
title: (0,
|
|
5319
|
+
title: (0, import_i18n62.__)("Custom CSS", "elementor"),
|
|
5204
5320
|
action: {
|
|
5205
|
-
component: /* @__PURE__ */
|
|
5321
|
+
component: /* @__PURE__ */ React88.createElement(import_editor_controls55.PromotionTrigger, { ref: triggerRef, promotionKey: "customCss", trackingData: TRACKING_DATA }),
|
|
5206
5322
|
onClick: () => triggerRef.current?.toggle()
|
|
5207
5323
|
}
|
|
5208
5324
|
}
|
|
@@ -5218,19 +5334,19 @@ var init = () => {
|
|
|
5218
5334
|
options: { overwrite: true }
|
|
5219
5335
|
});
|
|
5220
5336
|
if (!window.elementorPro) {
|
|
5221
|
-
controlsRegistry.register("attributes",
|
|
5222
|
-
controlsRegistry.register("display-conditions",
|
|
5337
|
+
controlsRegistry.register("attributes", import_editor_controls56.AttributesControl, "two-columns");
|
|
5338
|
+
controlsRegistry.register("display-conditions", import_editor_controls56.DisplayConditionsControl, "two-columns");
|
|
5223
5339
|
}
|
|
5224
5340
|
};
|
|
5225
5341
|
|
|
5226
5342
|
// src/controls-registry/element-controls/tabs-control/tabs-control.tsx
|
|
5227
|
-
var
|
|
5228
|
-
var
|
|
5343
|
+
var React89 = __toESM(require("react"));
|
|
5344
|
+
var import_editor_controls58 = require("@elementor/editor-controls");
|
|
5229
5345
|
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
5230
5346
|
var import_editor_props16 = require("@elementor/editor-props");
|
|
5231
|
-
var
|
|
5232
|
-
var
|
|
5233
|
-
var
|
|
5347
|
+
var import_icons26 = require("@elementor/icons");
|
|
5348
|
+
var import_ui42 = require("@elementor/ui");
|
|
5349
|
+
var import_i18n64 = require("@wordpress/i18n");
|
|
5234
5350
|
|
|
5235
5351
|
// src/controls-registry/element-controls/get-element-by-type.ts
|
|
5236
5352
|
var import_editor_elements15 = require("@elementor/editor-elements");
|
|
@@ -5246,14 +5362,14 @@ var getElementByType = (elementId, type) => {
|
|
|
5246
5362
|
};
|
|
5247
5363
|
|
|
5248
5364
|
// src/controls-registry/element-controls/tabs-control/use-actions.ts
|
|
5249
|
-
var
|
|
5365
|
+
var import_editor_controls57 = require("@elementor/editor-controls");
|
|
5250
5366
|
var import_editor_elements16 = require("@elementor/editor-elements");
|
|
5251
5367
|
var import_editor_props15 = require("@elementor/editor-props");
|
|
5252
|
-
var
|
|
5368
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
5253
5369
|
var TAB_ELEMENT_TYPE = "e-tab";
|
|
5254
5370
|
var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
|
|
5255
5371
|
var useActions = () => {
|
|
5256
|
-
const { value, setValue: setDefaultActiveTab } = (0,
|
|
5372
|
+
const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls57.useBoundProp)(import_editor_props15.numberPropTypeUtil);
|
|
5257
5373
|
const defaultActiveTab = value ?? 0;
|
|
5258
5374
|
const duplicateItem = ({
|
|
5259
5375
|
items: items3,
|
|
@@ -5272,7 +5388,7 @@ var useActions = () => {
|
|
|
5272
5388
|
}
|
|
5273
5389
|
(0, import_editor_elements16.duplicateElements)({
|
|
5274
5390
|
elementIds: [tabId, tabContentId],
|
|
5275
|
-
title: (0,
|
|
5391
|
+
title: (0, import_i18n63.__)("Duplicate Tab", "elementor"),
|
|
5276
5392
|
onDuplicateElements: () => {
|
|
5277
5393
|
if (newDefault !== defaultActiveTab) {
|
|
5278
5394
|
setDefaultActiveTab(newDefault, {}, { withHistory: false });
|
|
@@ -5309,7 +5425,7 @@ var useActions = () => {
|
|
|
5309
5425
|
defaultActiveTab
|
|
5310
5426
|
});
|
|
5311
5427
|
(0, import_editor_elements16.moveElements)({
|
|
5312
|
-
title: (0,
|
|
5428
|
+
title: (0, import_i18n63.__)("Reorder Tabs", "elementor"),
|
|
5313
5429
|
moves: [
|
|
5314
5430
|
{
|
|
5315
5431
|
element: movedElement,
|
|
@@ -5343,7 +5459,7 @@ var useActions = () => {
|
|
|
5343
5459
|
defaultActiveTab
|
|
5344
5460
|
});
|
|
5345
5461
|
(0, import_editor_elements16.removeElements)({
|
|
5346
|
-
title: (0,
|
|
5462
|
+
title: (0, import_i18n63.__)("Tabs", "elementor"),
|
|
5347
5463
|
elementIds: items3.flatMap(({ item, index }) => {
|
|
5348
5464
|
const tabId = item.id;
|
|
5349
5465
|
const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
|
|
@@ -5378,7 +5494,7 @@ var useActions = () => {
|
|
|
5378
5494
|
items3.forEach(({ index }) => {
|
|
5379
5495
|
const position = index + 1;
|
|
5380
5496
|
(0, import_editor_elements16.createElements)({
|
|
5381
|
-
title: (0,
|
|
5497
|
+
title: (0, import_i18n63.__)("Tabs", "elementor"),
|
|
5382
5498
|
elements: [
|
|
5383
5499
|
{
|
|
5384
5500
|
container: tabContentArea,
|
|
@@ -5447,7 +5563,7 @@ var calculateDefaultOnDuplicate = ({
|
|
|
5447
5563
|
var TAB_MENU_ELEMENT_TYPE = "e-tabs-menu";
|
|
5448
5564
|
var TAB_CONTENT_AREA_ELEMENT_TYPE = "e-tabs-content-area";
|
|
5449
5565
|
var TabsControl = ({ label }) => {
|
|
5450
|
-
return /* @__PURE__ */
|
|
5566
|
+
return /* @__PURE__ */ React89.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n64.__)("Tabs", "elementor") }, /* @__PURE__ */ React89.createElement(TabsControlContent, { label }));
|
|
5451
5567
|
};
|
|
5452
5568
|
var TabsControlContent = ({ label }) => {
|
|
5453
5569
|
const { element } = useElement();
|
|
@@ -5491,8 +5607,8 @@ var TabsControlContent = ({ label }) => {
|
|
|
5491
5607
|
});
|
|
5492
5608
|
}
|
|
5493
5609
|
};
|
|
5494
|
-
return /* @__PURE__ */
|
|
5495
|
-
|
|
5610
|
+
return /* @__PURE__ */ React89.createElement(
|
|
5611
|
+
import_editor_controls58.Repeater,
|
|
5496
5612
|
{
|
|
5497
5613
|
showToggle: false,
|
|
5498
5614
|
values: repeaterValues,
|
|
@@ -5511,27 +5627,27 @@ var TabsControlContent = ({ label }) => {
|
|
|
5511
5627
|
};
|
|
5512
5628
|
var ItemLabel = ({ value, index }) => {
|
|
5513
5629
|
const elementTitle = value?.title;
|
|
5514
|
-
return /* @__PURE__ */
|
|
5630
|
+
return /* @__PURE__ */ React89.createElement(import_ui42.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React89.createElement("span", null, elementTitle), /* @__PURE__ */ React89.createElement(ItemDefaultTab, { index }));
|
|
5515
5631
|
};
|
|
5516
5632
|
var ItemDefaultTab = ({ index }) => {
|
|
5517
|
-
const { value: defaultItem } = (0,
|
|
5633
|
+
const { value: defaultItem } = (0, import_editor_controls58.useBoundProp)(import_editor_props16.numberPropTypeUtil);
|
|
5518
5634
|
const isDefault = defaultItem === index;
|
|
5519
5635
|
if (!isDefault) {
|
|
5520
5636
|
return null;
|
|
5521
5637
|
}
|
|
5522
|
-
return /* @__PURE__ */
|
|
5638
|
+
return /* @__PURE__ */ React89.createElement(import_ui42.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n64.__)("Default", "elementor") });
|
|
5523
5639
|
};
|
|
5524
5640
|
var ItemContent = ({ value, index }) => {
|
|
5525
5641
|
if (!value.id) {
|
|
5526
5642
|
return null;
|
|
5527
5643
|
}
|
|
5528
|
-
return /* @__PURE__ */
|
|
5644
|
+
return /* @__PURE__ */ React89.createElement(import_ui42.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React89.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React89.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n64.__)("Tabs", "elementor") }, /* @__PURE__ */ React89.createElement(DefaultTabControl, { tabIndex: index })));
|
|
5529
5645
|
};
|
|
5530
5646
|
var DefaultTabControl = ({ tabIndex }) => {
|
|
5531
|
-
const { value, setValue } = (0,
|
|
5647
|
+
const { value, setValue } = (0, import_editor_controls58.useBoundProp)(import_editor_props16.numberPropTypeUtil);
|
|
5532
5648
|
const isDefault = value === tabIndex;
|
|
5533
|
-
return /* @__PURE__ */
|
|
5534
|
-
|
|
5649
|
+
return /* @__PURE__ */ React89.createElement(import_ui42.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React89.createElement(import_editor_controls58.ControlFormLabel, null, (0, import_i18n64.__)("Set as default tab", "elementor")), /* @__PURE__ */ React89.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React89.createElement(
|
|
5650
|
+
import_ui42.Switch,
|
|
5535
5651
|
{
|
|
5536
5652
|
size: "small",
|
|
5537
5653
|
checked: isDefault,
|
|
@@ -5548,8 +5664,8 @@ var DefaultTabControl = ({ tabIndex }) => {
|
|
|
5548
5664
|
var TabLabelControl = ({ elementId }) => {
|
|
5549
5665
|
const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
|
|
5550
5666
|
const label = editorSettings?.title ?? "";
|
|
5551
|
-
return /* @__PURE__ */
|
|
5552
|
-
|
|
5667
|
+
return /* @__PURE__ */ React89.createElement(import_ui42.Stack, { gap: 1 }, /* @__PURE__ */ React89.createElement(import_editor_controls58.ControlFormLabel, null, (0, import_i18n64.__)("Tab name", "elementor")), /* @__PURE__ */ React89.createElement(
|
|
5668
|
+
import_ui42.TextField,
|
|
5553
5669
|
{
|
|
5554
5670
|
size: "tiny",
|
|
5555
5671
|
value: label,
|
|
@@ -5569,22 +5685,22 @@ var ConditionalTooltip = ({
|
|
|
5569
5685
|
if (!showTooltip) {
|
|
5570
5686
|
return children;
|
|
5571
5687
|
}
|
|
5572
|
-
return /* @__PURE__ */
|
|
5573
|
-
|
|
5688
|
+
return /* @__PURE__ */ React89.createElement(
|
|
5689
|
+
import_ui42.Infotip,
|
|
5574
5690
|
{
|
|
5575
5691
|
arrow: false,
|
|
5576
|
-
content: /* @__PURE__ */
|
|
5577
|
-
|
|
5692
|
+
content: /* @__PURE__ */ React89.createElement(
|
|
5693
|
+
import_ui42.Alert,
|
|
5578
5694
|
{
|
|
5579
5695
|
color: "secondary",
|
|
5580
|
-
icon: /* @__PURE__ */
|
|
5696
|
+
icon: /* @__PURE__ */ React89.createElement(import_icons26.InfoCircleFilledIcon, { fontSize: "tiny" }),
|
|
5581
5697
|
size: "small",
|
|
5582
5698
|
sx: { width: 288 }
|
|
5583
5699
|
},
|
|
5584
|
-
/* @__PURE__ */
|
|
5700
|
+
/* @__PURE__ */ React89.createElement(import_ui42.Typography, { variant: "body2" }, (0, import_i18n64.__)("To change the default tab, simply set another tab as default.", "elementor"))
|
|
5585
5701
|
)
|
|
5586
5702
|
},
|
|
5587
|
-
/* @__PURE__ */
|
|
5703
|
+
/* @__PURE__ */ React89.createElement("span", null, children)
|
|
5588
5704
|
);
|
|
5589
5705
|
};
|
|
5590
5706
|
|
|
@@ -5602,21 +5718,21 @@ var registerElementControls = () => {
|
|
|
5602
5718
|
|
|
5603
5719
|
// src/dynamics/init.ts
|
|
5604
5720
|
var import_editor_canvas3 = require("@elementor/editor-canvas");
|
|
5605
|
-
var
|
|
5721
|
+
var import_editor_controls65 = require("@elementor/editor-controls");
|
|
5606
5722
|
var import_menus2 = require("@elementor/menus");
|
|
5607
5723
|
|
|
5608
5724
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
5609
|
-
var
|
|
5610
|
-
var
|
|
5725
|
+
var React90 = __toESM(require("react"));
|
|
5726
|
+
var import_editor_controls60 = require("@elementor/editor-controls");
|
|
5611
5727
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
5612
|
-
var
|
|
5728
|
+
var import_icons27 = require("@elementor/icons");
|
|
5613
5729
|
|
|
5614
5730
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
5615
5731
|
var import_react43 = require("react");
|
|
5616
5732
|
|
|
5617
5733
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
5618
5734
|
var import_react42 = require("react");
|
|
5619
|
-
var
|
|
5735
|
+
var import_editor_controls59 = require("@elementor/editor-controls");
|
|
5620
5736
|
|
|
5621
5737
|
// src/dynamics/sync/get-atomic-dynamic-tags.ts
|
|
5622
5738
|
var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
|
|
@@ -5700,7 +5816,7 @@ var useAllPropDynamicTags = () => {
|
|
|
5700
5816
|
};
|
|
5701
5817
|
var usePropDynamicTagsInternal = (filterByLicense2) => {
|
|
5702
5818
|
let categories = [];
|
|
5703
|
-
const { propType } = (0,
|
|
5819
|
+
const { propType } = (0, import_editor_controls59.useBoundProp)();
|
|
5704
5820
|
if (propType) {
|
|
5705
5821
|
const propDynamicType = getDynamicPropType(propType);
|
|
5706
5822
|
categories = propDynamicType?.settings.categories || [];
|
|
@@ -5744,29 +5860,29 @@ var useDynamicTag = (tagName) => {
|
|
|
5744
5860
|
};
|
|
5745
5861
|
|
|
5746
5862
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
5747
|
-
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */
|
|
5863
|
+
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React90.createElement(import_icons27.DatabaseIcon, { fontSize: "tiny" });
|
|
5748
5864
|
var BackgroundControlDynamicTagLabel = ({ value }) => {
|
|
5749
|
-
const context = (0,
|
|
5750
|
-
return /* @__PURE__ */
|
|
5865
|
+
const context = (0, import_editor_controls60.useBoundProp)(import_editor_props18.backgroundImageOverlayPropTypeUtil);
|
|
5866
|
+
return /* @__PURE__ */ React90.createElement(import_editor_controls60.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React90.createElement(import_editor_controls60.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React90.createElement(Wrapper2, { rawValue: value.value })));
|
|
5751
5867
|
};
|
|
5752
5868
|
var Wrapper2 = ({ rawValue }) => {
|
|
5753
|
-
const { propType } = (0,
|
|
5869
|
+
const { propType } = (0, import_editor_controls60.useBoundProp)();
|
|
5754
5870
|
const imageOverlayPropType = propType.prop_types["background-image-overlay"];
|
|
5755
|
-
return /* @__PURE__ */
|
|
5871
|
+
return /* @__PURE__ */ React90.createElement(import_editor_controls60.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React90.createElement(import_editor_controls60.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React90.createElement(Content, { rawValue: rawValue.image })));
|
|
5756
5872
|
};
|
|
5757
5873
|
var Content = ({ rawValue }) => {
|
|
5758
5874
|
const src = rawValue.value.src;
|
|
5759
5875
|
const dynamicTag = useDynamicTag(src.value.name || "");
|
|
5760
|
-
return /* @__PURE__ */
|
|
5876
|
+
return /* @__PURE__ */ React90.createElement(React90.Fragment, null, dynamicTag?.label);
|
|
5761
5877
|
};
|
|
5762
5878
|
|
|
5763
5879
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
5764
|
-
var
|
|
5765
|
-
var
|
|
5880
|
+
var React94 = __toESM(require("react"));
|
|
5881
|
+
var import_editor_controls63 = require("@elementor/editor-controls");
|
|
5766
5882
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
5767
|
-
var
|
|
5768
|
-
var
|
|
5769
|
-
var
|
|
5883
|
+
var import_icons29 = require("@elementor/icons");
|
|
5884
|
+
var import_ui44 = require("@elementor/ui");
|
|
5885
|
+
var import_i18n66 = require("@wordpress/i18n");
|
|
5770
5886
|
|
|
5771
5887
|
// src/hooks/use-persist-dynamic-value.ts
|
|
5772
5888
|
var import_session10 = require("@elementor/session");
|
|
@@ -5777,11 +5893,11 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
5777
5893
|
};
|
|
5778
5894
|
|
|
5779
5895
|
// src/dynamics/dynamic-control.tsx
|
|
5780
|
-
var
|
|
5781
|
-
var
|
|
5896
|
+
var React92 = __toESM(require("react"));
|
|
5897
|
+
var import_editor_controls61 = require("@elementor/editor-controls");
|
|
5782
5898
|
|
|
5783
5899
|
// src/dynamics/components/dynamic-conditional-control.tsx
|
|
5784
|
-
var
|
|
5900
|
+
var React91 = __toESM(require("react"));
|
|
5785
5901
|
var import_react44 = require("react");
|
|
5786
5902
|
var import_editor_props19 = require("@elementor/editor-props");
|
|
5787
5903
|
var DynamicConditionalControl = ({
|
|
@@ -5823,15 +5939,15 @@ var DynamicConditionalControl = ({
|
|
|
5823
5939
|
return { ...defaults, ...convertedSettings };
|
|
5824
5940
|
}, [defaults, convertedSettings]);
|
|
5825
5941
|
if (!propType?.dependencies?.terms.length) {
|
|
5826
|
-
return /* @__PURE__ */
|
|
5942
|
+
return /* @__PURE__ */ React91.createElement(React91.Fragment, null, children);
|
|
5827
5943
|
}
|
|
5828
5944
|
const isHidden = !(0, import_editor_props19.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
|
|
5829
|
-
return isHidden ? null : /* @__PURE__ */
|
|
5945
|
+
return isHidden ? null : /* @__PURE__ */ React91.createElement(React91.Fragment, null, children);
|
|
5830
5946
|
};
|
|
5831
5947
|
|
|
5832
5948
|
// src/dynamics/dynamic-control.tsx
|
|
5833
5949
|
var DynamicControl = ({ bind, children }) => {
|
|
5834
|
-
const { value, setValue } = (0,
|
|
5950
|
+
const { value, setValue } = (0, import_editor_controls61.useBoundProp)(dynamicPropTypeUtil);
|
|
5835
5951
|
const { name = "", group = "", settings } = value ?? {};
|
|
5836
5952
|
const dynamicTag = useDynamicTag(name);
|
|
5837
5953
|
if (!dynamicTag) {
|
|
@@ -5851,7 +5967,7 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
5851
5967
|
});
|
|
5852
5968
|
};
|
|
5853
5969
|
const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
|
|
5854
|
-
return /* @__PURE__ */
|
|
5970
|
+
return /* @__PURE__ */ React92.createElement(import_editor_controls61.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React92.createElement(import_editor_controls61.PropKeyProvider, { bind }, /* @__PURE__ */ React92.createElement(
|
|
5855
5971
|
DynamicConditionalControl,
|
|
5856
5972
|
{
|
|
5857
5973
|
propType: dynamicPropType,
|
|
@@ -5863,13 +5979,13 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
5863
5979
|
};
|
|
5864
5980
|
|
|
5865
5981
|
// src/dynamics/components/dynamic-selection.tsx
|
|
5866
|
-
var
|
|
5982
|
+
var React93 = __toESM(require("react"));
|
|
5867
5983
|
var import_react45 = require("react");
|
|
5868
|
-
var
|
|
5984
|
+
var import_editor_controls62 = require("@elementor/editor-controls");
|
|
5869
5985
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
5870
|
-
var
|
|
5871
|
-
var
|
|
5872
|
-
var
|
|
5986
|
+
var import_icons28 = require("@elementor/icons");
|
|
5987
|
+
var import_ui43 = require("@elementor/ui");
|
|
5988
|
+
var import_i18n65 = require("@wordpress/i18n");
|
|
5873
5989
|
var SIZE2 = "tiny";
|
|
5874
5990
|
var PROMO_TEXT_WIDTH = 170;
|
|
5875
5991
|
var PRO_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-modal/";
|
|
@@ -5877,18 +5993,18 @@ var RENEW_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-renew
|
|
|
5877
5993
|
var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
5878
5994
|
const [searchValue, setSearchValue] = (0, import_react45.useState)("");
|
|
5879
5995
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
5880
|
-
const theme = (0,
|
|
5881
|
-
const { value: anyValue } = (0,
|
|
5882
|
-
const { bind, value: dynamicValue, setValue } = (0,
|
|
5996
|
+
const theme = (0, import_ui43.useTheme)();
|
|
5997
|
+
const { value: anyValue } = (0, import_editor_controls62.useBoundProp)();
|
|
5998
|
+
const { bind, value: dynamicValue, setValue } = (0, import_editor_controls62.useBoundProp)(dynamicPropTypeUtil);
|
|
5883
5999
|
const [, updatePropValueHistory] = usePersistDynamicValue(bind);
|
|
5884
6000
|
const isCurrentValueDynamic = !!dynamicValue;
|
|
5885
6001
|
const options13 = useFilteredOptions(searchValue);
|
|
5886
6002
|
const hasNoDynamicTags = !options13.length && !searchValue.trim();
|
|
5887
6003
|
(0, import_react45.useEffect)(() => {
|
|
5888
6004
|
if (hasNoDynamicTags) {
|
|
5889
|
-
(0,
|
|
6005
|
+
(0, import_editor_controls62.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
5890
6006
|
} else if (expired) {
|
|
5891
|
-
(0,
|
|
6007
|
+
(0, import_editor_controls62.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
5892
6008
|
}
|
|
5893
6009
|
}, [hasNoDynamicTags, expired]);
|
|
5894
6010
|
const handleSearch = (value) => {
|
|
@@ -5916,19 +6032,19 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
5916
6032
|
]);
|
|
5917
6033
|
const getPopOverContent = () => {
|
|
5918
6034
|
if (hasNoDynamicTags) {
|
|
5919
|
-
return /* @__PURE__ */
|
|
6035
|
+
return /* @__PURE__ */ React93.createElement(NoDynamicTags, null);
|
|
5920
6036
|
}
|
|
5921
6037
|
if (expired) {
|
|
5922
|
-
return /* @__PURE__ */
|
|
6038
|
+
return /* @__PURE__ */ React93.createElement(ExpiredDynamicTags, null);
|
|
5923
6039
|
}
|
|
5924
|
-
return /* @__PURE__ */
|
|
6040
|
+
return /* @__PURE__ */ React93.createElement(import_react45.Fragment, null, /* @__PURE__ */ React93.createElement(
|
|
5925
6041
|
import_editor_ui9.SearchField,
|
|
5926
6042
|
{
|
|
5927
6043
|
value: searchValue,
|
|
5928
6044
|
onSearch: handleSearch,
|
|
5929
|
-
placeholder: (0,
|
|
6045
|
+
placeholder: (0, import_i18n65.__)("Search dynamic tags\u2026", "elementor")
|
|
5930
6046
|
}
|
|
5931
|
-
), /* @__PURE__ */
|
|
6047
|
+
), /* @__PURE__ */ React93.createElement(import_ui43.Divider, null), /* @__PURE__ */ React93.createElement(
|
|
5932
6048
|
import_editor_ui9.PopoverMenuList,
|
|
5933
6049
|
{
|
|
5934
6050
|
items: virtualizedItems,
|
|
@@ -5936,21 +6052,21 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
5936
6052
|
onClose: closePopover,
|
|
5937
6053
|
selectedValue: dynamicValue?.name,
|
|
5938
6054
|
itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
|
|
5939
|
-
noResultsComponent: /* @__PURE__ */
|
|
6055
|
+
noResultsComponent: /* @__PURE__ */ React93.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
|
|
5940
6056
|
}
|
|
5941
6057
|
));
|
|
5942
6058
|
};
|
|
5943
|
-
return /* @__PURE__ */
|
|
6059
|
+
return /* @__PURE__ */ React93.createElement(import_editor_ui9.SectionPopoverBody, { "aria-label": (0, import_i18n65.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React93.createElement(
|
|
5944
6060
|
import_editor_ui9.PopoverHeader,
|
|
5945
6061
|
{
|
|
5946
|
-
title: (0,
|
|
6062
|
+
title: (0, import_i18n65.__)("Dynamic tags", "elementor"),
|
|
5947
6063
|
onClose: closePopover,
|
|
5948
|
-
icon: /* @__PURE__ */
|
|
6064
|
+
icon: /* @__PURE__ */ React93.createElement(import_icons28.DatabaseIcon, { fontSize: SIZE2 })
|
|
5949
6065
|
}
|
|
5950
6066
|
), getPopOverContent());
|
|
5951
6067
|
};
|
|
5952
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
5953
|
-
|
|
6068
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React93.createElement(
|
|
6069
|
+
import_ui43.Stack,
|
|
5954
6070
|
{
|
|
5955
6071
|
gap: 1,
|
|
5956
6072
|
alignItems: "center",
|
|
@@ -5960,12 +6076,12 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React91.createElem
|
|
|
5960
6076
|
color: "text.secondary",
|
|
5961
6077
|
sx: { pb: 3.5 }
|
|
5962
6078
|
},
|
|
5963
|
-
/* @__PURE__ */
|
|
5964
|
-
/* @__PURE__ */
|
|
5965
|
-
/* @__PURE__ */
|
|
6079
|
+
/* @__PURE__ */ React93.createElement(import_icons28.DatabaseIcon, { fontSize: "large" }),
|
|
6080
|
+
/* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React93.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
6081
|
+
/* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n65.__)("Try something else.", "elementor"), /* @__PURE__ */ React93.createElement(import_ui43.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n65.__)("Clear & try again", "elementor")))
|
|
5966
6082
|
);
|
|
5967
|
-
var NoDynamicTags = () => /* @__PURE__ */
|
|
5968
|
-
|
|
6083
|
+
var NoDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui43.Divider, null), /* @__PURE__ */ React93.createElement(
|
|
6084
|
+
import_ui43.Stack,
|
|
5969
6085
|
{
|
|
5970
6086
|
gap: 1,
|
|
5971
6087
|
alignItems: "center",
|
|
@@ -5975,20 +6091,20 @@ var NoDynamicTags = () => /* @__PURE__ */ React91.createElement(React91.Fragment
|
|
|
5975
6091
|
color: "text.secondary",
|
|
5976
6092
|
sx: { pb: 3.5 }
|
|
5977
6093
|
},
|
|
5978
|
-
/* @__PURE__ */
|
|
5979
|
-
/* @__PURE__ */
|
|
5980
|
-
/* @__PURE__ */
|
|
5981
|
-
/* @__PURE__ */
|
|
6094
|
+
/* @__PURE__ */ React93.createElement(import_icons28.DatabaseIcon, { fontSize: "large" }),
|
|
6095
|
+
/* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Streamline your workflow with dynamic tags", "elementor")),
|
|
6096
|
+
/* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n65.__)("Upgrade now to display your content dynamically.", "elementor")),
|
|
6097
|
+
/* @__PURE__ */ React93.createElement(
|
|
5982
6098
|
import_editor_ui9.CtaButton,
|
|
5983
6099
|
{
|
|
5984
6100
|
size: "small",
|
|
5985
6101
|
href: PRO_DYNAMIC_TAGS_URL,
|
|
5986
|
-
onClick: () => (0,
|
|
6102
|
+
onClick: () => (0, import_editor_controls62.trackUpgradePromotionClick)({ target_name: "dynamic_tags" })
|
|
5987
6103
|
}
|
|
5988
6104
|
)
|
|
5989
6105
|
));
|
|
5990
|
-
var ExpiredDynamicTags = () => /* @__PURE__ */
|
|
5991
|
-
|
|
6106
|
+
var ExpiredDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui43.Divider, null), /* @__PURE__ */ React93.createElement(
|
|
6107
|
+
import_ui43.Stack,
|
|
5992
6108
|
{
|
|
5993
6109
|
gap: 1,
|
|
5994
6110
|
alignItems: "center",
|
|
@@ -5998,16 +6114,16 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React91.createElement(React91.Fra
|
|
|
5998
6114
|
color: "text.secondary",
|
|
5999
6115
|
sx: { pb: 3.5 }
|
|
6000
6116
|
},
|
|
6001
|
-
/* @__PURE__ */
|
|
6002
|
-
/* @__PURE__ */
|
|
6003
|
-
/* @__PURE__ */
|
|
6004
|
-
/* @__PURE__ */
|
|
6117
|
+
/* @__PURE__ */ React93.createElement(import_icons28.DatabaseIcon, { fontSize: "large" }),
|
|
6118
|
+
/* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Unlock your Dynamic tags again", "elementor")),
|
|
6119
|
+
/* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n65.__)("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")),
|
|
6120
|
+
/* @__PURE__ */ React93.createElement(
|
|
6005
6121
|
import_editor_ui9.CtaButton,
|
|
6006
6122
|
{
|
|
6007
6123
|
size: "small",
|
|
6008
6124
|
href: RENEW_DYNAMIC_TAGS_URL,
|
|
6009
|
-
onClick: () => (0,
|
|
6010
|
-
children: (0,
|
|
6125
|
+
onClick: () => (0, import_editor_controls62.trackUpgradePromotionClick)({ target_name: "dynamic_tags" }),
|
|
6126
|
+
children: (0, import_i18n65.__)("Renew Now", "elementor")
|
|
6011
6127
|
}
|
|
6012
6128
|
)
|
|
6013
6129
|
));
|
|
@@ -6031,8 +6147,8 @@ var useFilteredOptions = (searchValue) => {
|
|
|
6031
6147
|
var SIZE3 = "tiny";
|
|
6032
6148
|
var tagsWithoutTabs = ["popup"];
|
|
6033
6149
|
var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
6034
|
-
const { setValue: setAnyValue, propType } = (0,
|
|
6035
|
-
const { bind, value } = (0,
|
|
6150
|
+
const { setValue: setAnyValue, propType } = (0, import_editor_controls63.useBoundProp)();
|
|
6151
|
+
const { bind, value } = (0, import_editor_controls63.useBoundProp)(dynamicPropTypeUtil);
|
|
6036
6152
|
const { expired: readonly } = useLicenseConfig();
|
|
6037
6153
|
const originalPropType = createTopLevelObjectType({
|
|
6038
6154
|
schema: {
|
|
@@ -6040,11 +6156,11 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6040
6156
|
}
|
|
6041
6157
|
});
|
|
6042
6158
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
6043
|
-
const selectionPopoverState = (0,
|
|
6159
|
+
const selectionPopoverState = (0, import_ui44.usePopupState)({ variant: "popover" });
|
|
6044
6160
|
const { name: tagName = "" } = value;
|
|
6045
6161
|
const dynamicTag = useDynamicTag(tagName);
|
|
6046
6162
|
if (!isDynamicTagSupported(tagName) && OriginalControl) {
|
|
6047
|
-
return /* @__PURE__ */
|
|
6163
|
+
return /* @__PURE__ */ React94.createElement(import_editor_controls63.PropProvider, { propType: originalPropType, value: { [bind]: null }, setValue: setAnyValue }, /* @__PURE__ */ React94.createElement(import_editor_controls63.PropKeyProvider, { bind }, /* @__PURE__ */ React94.createElement(OriginalControl, { ...props })));
|
|
6048
6164
|
}
|
|
6049
6165
|
const removeDynamicTag = () => {
|
|
6050
6166
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -6052,26 +6168,26 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6052
6168
|
if (!dynamicTag) {
|
|
6053
6169
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
6054
6170
|
}
|
|
6055
|
-
return /* @__PURE__ */
|
|
6056
|
-
|
|
6171
|
+
return /* @__PURE__ */ React94.createElement(import_ui44.Box, null, /* @__PURE__ */ React94.createElement(
|
|
6172
|
+
import_ui44.UnstableTag,
|
|
6057
6173
|
{
|
|
6058
6174
|
fullWidth: true,
|
|
6059
6175
|
showActionsOnHover: true,
|
|
6060
6176
|
label: dynamicTag.label,
|
|
6061
|
-
startIcon: /* @__PURE__ */
|
|
6062
|
-
...(0,
|
|
6063
|
-
actions: /* @__PURE__ */
|
|
6064
|
-
|
|
6177
|
+
startIcon: /* @__PURE__ */ React94.createElement(import_icons29.DatabaseIcon, { fontSize: SIZE3 }),
|
|
6178
|
+
...(0, import_ui44.bindTrigger)(selectionPopoverState),
|
|
6179
|
+
actions: /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(DynamicSettingsPopover, { dynamicTag, disabled: readonly }), /* @__PURE__ */ React94.createElement(
|
|
6180
|
+
import_ui44.IconButton,
|
|
6065
6181
|
{
|
|
6066
6182
|
size: SIZE3,
|
|
6067
6183
|
onClick: removeDynamicTag,
|
|
6068
|
-
"aria-label": (0,
|
|
6184
|
+
"aria-label": (0, import_i18n66.__)("Remove dynamic value", "elementor")
|
|
6069
6185
|
},
|
|
6070
|
-
/* @__PURE__ */
|
|
6186
|
+
/* @__PURE__ */ React94.createElement(import_icons29.XIcon, { fontSize: SIZE3 })
|
|
6071
6187
|
))
|
|
6072
6188
|
}
|
|
6073
|
-
), /* @__PURE__ */
|
|
6074
|
-
|
|
6189
|
+
), /* @__PURE__ */ React94.createElement(
|
|
6190
|
+
import_ui44.Popover,
|
|
6075
6191
|
{
|
|
6076
6192
|
disablePortal: true,
|
|
6077
6193
|
disableScrollLock: true,
|
|
@@ -6080,31 +6196,31 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6080
6196
|
PaperProps: {
|
|
6081
6197
|
sx: { my: 1 }
|
|
6082
6198
|
},
|
|
6083
|
-
...(0,
|
|
6199
|
+
...(0, import_ui44.bindPopover)(selectionPopoverState)
|
|
6084
6200
|
},
|
|
6085
|
-
/* @__PURE__ */
|
|
6201
|
+
/* @__PURE__ */ React94.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n66.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React94.createElement(DynamicSelection, { close: selectionPopoverState.close, expired: readonly }))
|
|
6086
6202
|
));
|
|
6087
6203
|
};
|
|
6088
6204
|
var DynamicSettingsPopover = ({
|
|
6089
6205
|
dynamicTag,
|
|
6090
6206
|
disabled = false
|
|
6091
6207
|
}) => {
|
|
6092
|
-
const popupState = (0,
|
|
6208
|
+
const popupState = (0, import_ui44.usePopupState)({ variant: "popover" });
|
|
6093
6209
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
6094
6210
|
if (!hasDynamicSettings) {
|
|
6095
6211
|
return null;
|
|
6096
6212
|
}
|
|
6097
|
-
return /* @__PURE__ */
|
|
6098
|
-
|
|
6213
|
+
return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(
|
|
6214
|
+
import_ui44.IconButton,
|
|
6099
6215
|
{
|
|
6100
6216
|
size: SIZE3,
|
|
6101
6217
|
disabled,
|
|
6102
|
-
...!disabled && (0,
|
|
6103
|
-
"aria-label": (0,
|
|
6218
|
+
...!disabled && (0, import_ui44.bindTrigger)(popupState),
|
|
6219
|
+
"aria-label": (0, import_i18n66.__)("Dynamic settings", "elementor")
|
|
6104
6220
|
},
|
|
6105
|
-
/* @__PURE__ */
|
|
6106
|
-
), /* @__PURE__ */
|
|
6107
|
-
|
|
6221
|
+
/* @__PURE__ */ React94.createElement(import_icons29.SettingsIcon, { fontSize: SIZE3 })
|
|
6222
|
+
), /* @__PURE__ */ React94.createElement(
|
|
6223
|
+
import_ui44.Popover,
|
|
6108
6224
|
{
|
|
6109
6225
|
disablePortal: true,
|
|
6110
6226
|
disableScrollLock: true,
|
|
@@ -6113,45 +6229,45 @@ var DynamicSettingsPopover = ({
|
|
|
6113
6229
|
PaperProps: {
|
|
6114
6230
|
sx: { my: 1 }
|
|
6115
6231
|
},
|
|
6116
|
-
...(0,
|
|
6232
|
+
...(0, import_ui44.bindPopover)(popupState)
|
|
6117
6233
|
},
|
|
6118
|
-
/* @__PURE__ */
|
|
6234
|
+
/* @__PURE__ */ React94.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n66.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React94.createElement(
|
|
6119
6235
|
import_editor_ui10.PopoverHeader,
|
|
6120
6236
|
{
|
|
6121
6237
|
title: dynamicTag.label,
|
|
6122
6238
|
onClose: popupState.close,
|
|
6123
|
-
icon: /* @__PURE__ */
|
|
6239
|
+
icon: /* @__PURE__ */ React94.createElement(import_icons29.DatabaseIcon, { fontSize: SIZE3 })
|
|
6124
6240
|
}
|
|
6125
|
-
), /* @__PURE__ */
|
|
6241
|
+
), /* @__PURE__ */ React94.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
|
|
6126
6242
|
));
|
|
6127
6243
|
};
|
|
6128
6244
|
var DynamicSettings = ({ controls, tagName }) => {
|
|
6129
6245
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
6130
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
6246
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui44.useTabs)(0);
|
|
6131
6247
|
if (!tabs.length) {
|
|
6132
6248
|
return null;
|
|
6133
6249
|
}
|
|
6134
6250
|
if (tagsWithoutTabs.includes(tagName)) {
|
|
6135
6251
|
const singleTab = tabs[0];
|
|
6136
|
-
return /* @__PURE__ */
|
|
6252
|
+
return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(import_ui44.Divider, null), /* @__PURE__ */ React94.createElement(ControlsItemsStack, { items: singleTab.value.items }));
|
|
6137
6253
|
}
|
|
6138
|
-
return /* @__PURE__ */
|
|
6139
|
-
|
|
6254
|
+
return /* @__PURE__ */ React94.createElement(React94.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React94.createElement(import_ui44.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React94.createElement(
|
|
6255
|
+
import_ui44.Tab,
|
|
6140
6256
|
{
|
|
6141
6257
|
key: index,
|
|
6142
6258
|
label: value.label,
|
|
6143
6259
|
sx: { px: 1, py: 0.5 },
|
|
6144
6260
|
...getTabProps(index)
|
|
6145
6261
|
}
|
|
6146
|
-
))), /* @__PURE__ */
|
|
6147
|
-
return /* @__PURE__ */
|
|
6148
|
-
|
|
6262
|
+
))), /* @__PURE__ */ React94.createElement(import_ui44.Divider, null), tabs.map(({ value }, index) => {
|
|
6263
|
+
return /* @__PURE__ */ React94.createElement(
|
|
6264
|
+
import_ui44.TabPanel,
|
|
6149
6265
|
{
|
|
6150
6266
|
key: index,
|
|
6151
6267
|
sx: { flexGrow: 1, py: 0, overflowY: "auto" },
|
|
6152
6268
|
...getTabPanelProps(index)
|
|
6153
6269
|
},
|
|
6154
|
-
/* @__PURE__ */
|
|
6270
|
+
/* @__PURE__ */ React94.createElement(ControlsItemsStack, { items: value.items })
|
|
6155
6271
|
);
|
|
6156
6272
|
}));
|
|
6157
6273
|
};
|
|
@@ -6193,11 +6309,11 @@ var Control2 = ({ control }) => {
|
|
|
6193
6309
|
display: "grid",
|
|
6194
6310
|
gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
|
|
6195
6311
|
} : {};
|
|
6196
|
-
return /* @__PURE__ */
|
|
6312
|
+
return /* @__PURE__ */ React94.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React94.createElement(import_ui44.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React94.createElement(import_ui44.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(import_editor_controls63.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React94.createElement(import_ui44.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(Control, { type: control.type, props: controlProps }))));
|
|
6197
6313
|
};
|
|
6198
6314
|
function ControlsItemsStack({ items: items3 }) {
|
|
6199
|
-
return /* @__PURE__ */
|
|
6200
|
-
(item) => item.type === "control" ? /* @__PURE__ */
|
|
6315
|
+
return /* @__PURE__ */ React94.createElement(import_ui44.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
|
|
6316
|
+
(item) => item.type === "control" ? /* @__PURE__ */ React94.createElement(Control2, { key: item.value.bind, control: item.value }) : null
|
|
6201
6317
|
));
|
|
6202
6318
|
}
|
|
6203
6319
|
|
|
@@ -6250,34 +6366,34 @@ function getDynamicValue(name, settings) {
|
|
|
6250
6366
|
}
|
|
6251
6367
|
|
|
6252
6368
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
6253
|
-
var
|
|
6254
|
-
var
|
|
6255
|
-
var
|
|
6256
|
-
var
|
|
6369
|
+
var React95 = __toESM(require("react"));
|
|
6370
|
+
var import_editor_controls64 = require("@elementor/editor-controls");
|
|
6371
|
+
var import_icons30 = require("@elementor/icons");
|
|
6372
|
+
var import_i18n67 = require("@wordpress/i18n");
|
|
6257
6373
|
var usePropDynamicAction = () => {
|
|
6258
|
-
const { propType } = (0,
|
|
6374
|
+
const { propType } = (0, import_editor_controls64.useBoundProp)();
|
|
6259
6375
|
const visible = !!propType && supportsDynamic(propType);
|
|
6260
6376
|
return {
|
|
6261
6377
|
visible,
|
|
6262
|
-
icon:
|
|
6263
|
-
title: (0,
|
|
6264
|
-
content: ({ close }) => /* @__PURE__ */
|
|
6378
|
+
icon: import_icons30.DatabaseIcon,
|
|
6379
|
+
title: (0, import_i18n67.__)("Dynamic tags", "elementor"),
|
|
6380
|
+
content: ({ close }) => /* @__PURE__ */ React95.createElement(DynamicSelection, { close })
|
|
6265
6381
|
};
|
|
6266
6382
|
};
|
|
6267
6383
|
|
|
6268
6384
|
// src/dynamics/init.ts
|
|
6269
6385
|
var { registerPopoverAction } = import_menus2.controlActionsMenu;
|
|
6270
6386
|
var init2 = () => {
|
|
6271
|
-
(0,
|
|
6387
|
+
(0, import_editor_controls65.registerControlReplacement)({
|
|
6272
6388
|
component: DynamicSelectionControl,
|
|
6273
6389
|
condition: ({ value }) => isDynamicPropValue(value)
|
|
6274
6390
|
});
|
|
6275
|
-
(0,
|
|
6391
|
+
(0, import_editor_controls65.injectIntoRepeaterItemLabel)({
|
|
6276
6392
|
id: "dynamic-background-image",
|
|
6277
6393
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6278
6394
|
component: BackgroundControlDynamicTagLabel
|
|
6279
6395
|
});
|
|
6280
|
-
(0,
|
|
6396
|
+
(0, import_editor_controls65.injectIntoRepeaterItemIcon)({
|
|
6281
6397
|
id: "dynamic-background-image",
|
|
6282
6398
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6283
6399
|
component: BackgroundControlDynamicTagIcon
|
|
@@ -6292,11 +6408,11 @@ var init2 = () => {
|
|
|
6292
6408
|
};
|
|
6293
6409
|
|
|
6294
6410
|
// src/reset-style-props.tsx
|
|
6295
|
-
var
|
|
6411
|
+
var import_editor_controls66 = require("@elementor/editor-controls");
|
|
6296
6412
|
var import_editor_variables2 = require("@elementor/editor-variables");
|
|
6297
|
-
var
|
|
6413
|
+
var import_icons31 = require("@elementor/icons");
|
|
6298
6414
|
var import_menus3 = require("@elementor/menus");
|
|
6299
|
-
var
|
|
6415
|
+
var import_i18n68 = require("@wordpress/i18n");
|
|
6300
6416
|
|
|
6301
6417
|
// src/utils/is-equal.ts
|
|
6302
6418
|
function isEqual(a, b) {
|
|
@@ -6352,7 +6468,7 @@ function initResetStyleProps() {
|
|
|
6352
6468
|
}
|
|
6353
6469
|
function useResetStyleValueProps() {
|
|
6354
6470
|
const isStyle = useIsStyle();
|
|
6355
|
-
const { value, resetValue, propType } = (0,
|
|
6471
|
+
const { value, resetValue, propType } = (0, import_editor_controls66.useBoundProp)();
|
|
6356
6472
|
const hasValue = value !== null && value !== void 0;
|
|
6357
6473
|
const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
|
|
6358
6474
|
const isRequired = !!propType.settings?.required;
|
|
@@ -6372,33 +6488,33 @@ function useResetStyleValueProps() {
|
|
|
6372
6488
|
const visible = calculateVisibility();
|
|
6373
6489
|
return {
|
|
6374
6490
|
visible,
|
|
6375
|
-
title: (0,
|
|
6376
|
-
icon:
|
|
6491
|
+
title: (0, import_i18n68.__)("Clear", "elementor"),
|
|
6492
|
+
icon: import_icons31.BrushBigIcon,
|
|
6377
6493
|
onClick: () => resetValue()
|
|
6378
6494
|
};
|
|
6379
6495
|
}
|
|
6380
6496
|
|
|
6381
6497
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
6382
|
-
var
|
|
6383
|
-
var
|
|
6498
|
+
var React101 = __toESM(require("react"));
|
|
6499
|
+
var import_editor_controls67 = require("@elementor/editor-controls");
|
|
6384
6500
|
var import_editor_props21 = require("@elementor/editor-props");
|
|
6385
6501
|
var import_editor_styles_repository17 = require("@elementor/editor-styles-repository");
|
|
6386
|
-
var
|
|
6502
|
+
var import_i18n72 = require("@wordpress/i18n");
|
|
6387
6503
|
|
|
6388
6504
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
6389
|
-
var
|
|
6505
|
+
var React100 = __toESM(require("react"));
|
|
6390
6506
|
var import_react47 = require("react");
|
|
6391
6507
|
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
6392
6508
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
6393
|
-
var
|
|
6394
|
-
var
|
|
6509
|
+
var import_ui49 = require("@elementor/ui");
|
|
6510
|
+
var import_i18n71 = require("@wordpress/i18n");
|
|
6395
6511
|
|
|
6396
6512
|
// src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
|
|
6397
6513
|
var import_react46 = require("react");
|
|
6398
6514
|
var import_editor_canvas4 = require("@elementor/editor-canvas");
|
|
6399
6515
|
var import_editor_styles8 = require("@elementor/editor-styles");
|
|
6400
6516
|
var import_editor_styles_repository15 = require("@elementor/editor-styles-repository");
|
|
6401
|
-
var
|
|
6517
|
+
var import_i18n69 = require("@wordpress/i18n");
|
|
6402
6518
|
var MAXIMUM_ITEMS = 2;
|
|
6403
6519
|
var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
6404
6520
|
const [items3, setItems] = (0, import_react46.useState)([]);
|
|
@@ -6409,7 +6525,7 @@ var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
|
6409
6525
|
);
|
|
6410
6526
|
const validItems = normalizedItems.map((item) => ({
|
|
6411
6527
|
...item,
|
|
6412
|
-
displayLabel: import_editor_styles_repository15.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0,
|
|
6528
|
+
displayLabel: import_editor_styles_repository15.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n69.__)("Base", "elementor")
|
|
6413
6529
|
})).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
|
|
6414
6530
|
setItems(validItems);
|
|
6415
6531
|
})();
|
|
@@ -6466,20 +6582,20 @@ var getTransformedValue = async (item, bind, resolve) => {
|
|
|
6466
6582
|
};
|
|
6467
6583
|
|
|
6468
6584
|
// src/styles-inheritance/components/infotip/breakpoint-icon.tsx
|
|
6469
|
-
var
|
|
6585
|
+
var React96 = __toESM(require("react"));
|
|
6470
6586
|
var import_editor_responsive4 = require("@elementor/editor-responsive");
|
|
6471
|
-
var
|
|
6472
|
-
var
|
|
6587
|
+
var import_icons32 = require("@elementor/icons");
|
|
6588
|
+
var import_ui45 = require("@elementor/ui");
|
|
6473
6589
|
var SIZE4 = "tiny";
|
|
6474
6590
|
var DEFAULT_BREAKPOINT3 = "desktop";
|
|
6475
6591
|
var breakpointIconMap = {
|
|
6476
|
-
widescreen:
|
|
6477
|
-
desktop:
|
|
6478
|
-
laptop:
|
|
6479
|
-
tablet_extra:
|
|
6480
|
-
tablet:
|
|
6481
|
-
mobile_extra:
|
|
6482
|
-
mobile:
|
|
6592
|
+
widescreen: import_icons32.WidescreenIcon,
|
|
6593
|
+
desktop: import_icons32.DesktopIcon,
|
|
6594
|
+
laptop: import_icons32.LaptopIcon,
|
|
6595
|
+
tablet_extra: import_icons32.TabletLandscapeIcon,
|
|
6596
|
+
tablet: import_icons32.TabletPortraitIcon,
|
|
6597
|
+
mobile_extra: import_icons32.MobileLandscapeIcon,
|
|
6598
|
+
mobile: import_icons32.MobilePortraitIcon
|
|
6483
6599
|
};
|
|
6484
6600
|
var BreakpointIcon = ({ breakpoint }) => {
|
|
6485
6601
|
const breakpoints = (0, import_editor_responsive4.useBreakpoints)();
|
|
@@ -6489,21 +6605,21 @@ var BreakpointIcon = ({ breakpoint }) => {
|
|
|
6489
6605
|
return null;
|
|
6490
6606
|
}
|
|
6491
6607
|
const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
|
|
6492
|
-
return /* @__PURE__ */
|
|
6608
|
+
return /* @__PURE__ */ React96.createElement(import_ui45.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
|
|
6493
6609
|
};
|
|
6494
6610
|
|
|
6495
6611
|
// src/styles-inheritance/components/infotip/label-chip.tsx
|
|
6496
|
-
var
|
|
6612
|
+
var React97 = __toESM(require("react"));
|
|
6497
6613
|
var import_editor_styles_repository16 = require("@elementor/editor-styles-repository");
|
|
6498
|
-
var
|
|
6499
|
-
var
|
|
6500
|
-
var
|
|
6614
|
+
var import_icons33 = require("@elementor/icons");
|
|
6615
|
+
var import_ui46 = require("@elementor/ui");
|
|
6616
|
+
var import_i18n70 = require("@wordpress/i18n");
|
|
6501
6617
|
var SIZE5 = "tiny";
|
|
6502
6618
|
var LabelChip = ({ displayLabel, provider }) => {
|
|
6503
6619
|
const isBaseStyle = provider === import_editor_styles_repository16.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
|
|
6504
|
-
const chipIcon = isBaseStyle ? /* @__PURE__ */
|
|
6505
|
-
return /* @__PURE__ */
|
|
6506
|
-
|
|
6620
|
+
const chipIcon = isBaseStyle ? /* @__PURE__ */ React97.createElement(import_ui46.Tooltip, { title: (0, import_i18n70.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React97.createElement(import_icons33.InfoCircleIcon, { fontSize: SIZE5 })) : void 0;
|
|
6621
|
+
return /* @__PURE__ */ React97.createElement(
|
|
6622
|
+
import_ui46.Chip,
|
|
6507
6623
|
{
|
|
6508
6624
|
label: displayLabel,
|
|
6509
6625
|
size: SIZE5,
|
|
@@ -6528,11 +6644,11 @@ var LabelChip = ({ displayLabel, provider }) => {
|
|
|
6528
6644
|
};
|
|
6529
6645
|
|
|
6530
6646
|
// src/styles-inheritance/components/infotip/value-component.tsx
|
|
6531
|
-
var
|
|
6532
|
-
var
|
|
6647
|
+
var React98 = __toESM(require("react"));
|
|
6648
|
+
var import_ui47 = require("@elementor/ui");
|
|
6533
6649
|
var ValueComponent = ({ index, value }) => {
|
|
6534
|
-
return /* @__PURE__ */
|
|
6535
|
-
|
|
6650
|
+
return /* @__PURE__ */ React98.createElement(import_ui47.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React98.createElement(
|
|
6651
|
+
import_ui47.Typography,
|
|
6536
6652
|
{
|
|
6537
6653
|
variant: "caption",
|
|
6538
6654
|
color: "text.tertiary",
|
|
@@ -6553,9 +6669,9 @@ var ValueComponent = ({ index, value }) => {
|
|
|
6553
6669
|
};
|
|
6554
6670
|
|
|
6555
6671
|
// src/styles-inheritance/components/infotip/action-icons.tsx
|
|
6556
|
-
var
|
|
6557
|
-
var
|
|
6558
|
-
var ActionIcons = () => /* @__PURE__ */
|
|
6672
|
+
var React99 = __toESM(require("react"));
|
|
6673
|
+
var import_ui48 = require("@elementor/ui");
|
|
6674
|
+
var ActionIcons = () => /* @__PURE__ */ React99.createElement(import_ui48.Box, { display: "flex", gap: 0.5, alignItems: "center" });
|
|
6559
6675
|
|
|
6560
6676
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
6561
6677
|
var SECTION_PADDING_INLINE = 32;
|
|
@@ -6591,8 +6707,8 @@ var StylesInheritanceInfotip = ({
|
|
|
6591
6707
|
});
|
|
6592
6708
|
}, [key, propType]);
|
|
6593
6709
|
const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
|
|
6594
|
-
const infotipContent = /* @__PURE__ */
|
|
6595
|
-
|
|
6710
|
+
const infotipContent = /* @__PURE__ */ React100.createElement(import_ui49.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React100.createElement(
|
|
6711
|
+
import_ui49.Card,
|
|
6596
6712
|
{
|
|
6597
6713
|
elevation: 0,
|
|
6598
6714
|
sx: {
|
|
@@ -6604,8 +6720,8 @@ var StylesInheritanceInfotip = ({
|
|
|
6604
6720
|
flexDirection: "column"
|
|
6605
6721
|
}
|
|
6606
6722
|
},
|
|
6607
|
-
/* @__PURE__ */
|
|
6608
|
-
|
|
6723
|
+
/* @__PURE__ */ React100.createElement(
|
|
6724
|
+
import_ui49.Box,
|
|
6609
6725
|
{
|
|
6610
6726
|
sx: {
|
|
6611
6727
|
position: "sticky",
|
|
@@ -6614,10 +6730,10 @@ var StylesInheritanceInfotip = ({
|
|
|
6614
6730
|
backgroundColor: "background.paper"
|
|
6615
6731
|
}
|
|
6616
6732
|
},
|
|
6617
|
-
/* @__PURE__ */
|
|
6733
|
+
/* @__PURE__ */ React100.createElement(import_editor_ui11.PopoverHeader, { title: (0, import_i18n71.__)("Style origin", "elementor"), onClose: closeInfotip })
|
|
6618
6734
|
),
|
|
6619
|
-
/* @__PURE__ */
|
|
6620
|
-
|
|
6735
|
+
/* @__PURE__ */ React100.createElement(
|
|
6736
|
+
import_ui49.CardContent,
|
|
6621
6737
|
{
|
|
6622
6738
|
sx: {
|
|
6623
6739
|
display: "flex",
|
|
@@ -6630,39 +6746,39 @@ var StylesInheritanceInfotip = ({
|
|
|
6630
6746
|
}
|
|
6631
6747
|
}
|
|
6632
6748
|
},
|
|
6633
|
-
/* @__PURE__ */
|
|
6634
|
-
return /* @__PURE__ */
|
|
6635
|
-
|
|
6749
|
+
/* @__PURE__ */ React100.createElement(import_ui49.Stack, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
|
|
6750
|
+
return /* @__PURE__ */ React100.createElement(
|
|
6751
|
+
import_ui49.Box,
|
|
6636
6752
|
{
|
|
6637
6753
|
key: item.id,
|
|
6638
6754
|
display: "flex",
|
|
6639
6755
|
gap: 0.5,
|
|
6640
6756
|
role: "listitem",
|
|
6641
|
-
"aria-label": (0,
|
|
6757
|
+
"aria-label": (0, import_i18n71.__)("Inheritance item: %s", "elementor").replace(
|
|
6642
6758
|
"%s",
|
|
6643
6759
|
item.displayLabel
|
|
6644
6760
|
)
|
|
6645
6761
|
},
|
|
6646
|
-
/* @__PURE__ */
|
|
6647
|
-
|
|
6762
|
+
/* @__PURE__ */ React100.createElement(
|
|
6763
|
+
import_ui49.Box,
|
|
6648
6764
|
{
|
|
6649
6765
|
display: "flex",
|
|
6650
6766
|
gap: 0.5,
|
|
6651
6767
|
sx: { flexWrap: "wrap", width: "100%", alignItems: "flex-start" }
|
|
6652
6768
|
},
|
|
6653
|
-
/* @__PURE__ */
|
|
6654
|
-
/* @__PURE__ */
|
|
6655
|
-
/* @__PURE__ */
|
|
6769
|
+
/* @__PURE__ */ React100.createElement(BreakpointIcon, { breakpoint: item.breakpoint }),
|
|
6770
|
+
/* @__PURE__ */ React100.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }),
|
|
6771
|
+
/* @__PURE__ */ React100.createElement(ValueComponent, { index, value: item.value })
|
|
6656
6772
|
),
|
|
6657
|
-
/* @__PURE__ */
|
|
6773
|
+
/* @__PURE__ */ React100.createElement(ActionIcons, null)
|
|
6658
6774
|
);
|
|
6659
6775
|
}))
|
|
6660
6776
|
)
|
|
6661
6777
|
));
|
|
6662
6778
|
if (isDisabled) {
|
|
6663
|
-
return /* @__PURE__ */
|
|
6779
|
+
return /* @__PURE__ */ React100.createElement(import_ui49.Box, { sx: { display: "inline-flex" } }, children);
|
|
6664
6780
|
}
|
|
6665
|
-
return /* @__PURE__ */
|
|
6781
|
+
return /* @__PURE__ */ React100.createElement(import_ui49.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React100.createElement(
|
|
6666
6782
|
TooltipOrInfotip,
|
|
6667
6783
|
{
|
|
6668
6784
|
showInfotip,
|
|
@@ -6670,8 +6786,8 @@ var StylesInheritanceInfotip = ({
|
|
|
6670
6786
|
infotipContent,
|
|
6671
6787
|
isDisabled
|
|
6672
6788
|
},
|
|
6673
|
-
/* @__PURE__ */
|
|
6674
|
-
|
|
6789
|
+
/* @__PURE__ */ React100.createElement(
|
|
6790
|
+
import_ui49.IconButton,
|
|
6675
6791
|
{
|
|
6676
6792
|
onClick: toggleInfotip,
|
|
6677
6793
|
"aria-label": label,
|
|
@@ -6690,11 +6806,11 @@ function TooltipOrInfotip({
|
|
|
6690
6806
|
isDisabled
|
|
6691
6807
|
}) {
|
|
6692
6808
|
if (isDisabled) {
|
|
6693
|
-
return /* @__PURE__ */
|
|
6809
|
+
return /* @__PURE__ */ React100.createElement(import_ui49.Box, { sx: { display: "inline-flex" } }, children);
|
|
6694
6810
|
}
|
|
6695
6811
|
if (showInfotip) {
|
|
6696
|
-
return /* @__PURE__ */
|
|
6697
|
-
|
|
6812
|
+
return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
|
|
6813
|
+
import_ui49.Backdrop,
|
|
6698
6814
|
{
|
|
6699
6815
|
open: showInfotip,
|
|
6700
6816
|
onClick: onClose,
|
|
@@ -6703,8 +6819,8 @@ function TooltipOrInfotip({
|
|
|
6703
6819
|
zIndex: (theme) => theme.zIndex.modal - 1
|
|
6704
6820
|
}
|
|
6705
6821
|
}
|
|
6706
|
-
), /* @__PURE__ */
|
|
6707
|
-
|
|
6822
|
+
), /* @__PURE__ */ React100.createElement(
|
|
6823
|
+
import_ui49.Infotip,
|
|
6708
6824
|
{
|
|
6709
6825
|
placement: "top-end",
|
|
6710
6826
|
content: infotipContent,
|
|
@@ -6715,20 +6831,20 @@ function TooltipOrInfotip({
|
|
|
6715
6831
|
children
|
|
6716
6832
|
));
|
|
6717
6833
|
}
|
|
6718
|
-
return /* @__PURE__ */
|
|
6834
|
+
return /* @__PURE__ */ React100.createElement(import_ui49.Tooltip, { title: (0, import_i18n71.__)("Style origin", "elementor"), placement: "top" }, children);
|
|
6719
6835
|
}
|
|
6720
6836
|
|
|
6721
6837
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
6722
6838
|
var StylesInheritanceIndicator = ({
|
|
6723
6839
|
customContext
|
|
6724
6840
|
}) => {
|
|
6725
|
-
const context = (0,
|
|
6841
|
+
const context = (0, import_editor_controls67.useBoundProp)();
|
|
6726
6842
|
const { path, propType } = customContext || context;
|
|
6727
6843
|
const inheritanceChain = useStylesInheritanceChain(path);
|
|
6728
6844
|
if (!path || !inheritanceChain.length) {
|
|
6729
6845
|
return null;
|
|
6730
6846
|
}
|
|
6731
|
-
return /* @__PURE__ */
|
|
6847
|
+
return /* @__PURE__ */ React101.createElement(Indicator, { inheritanceChain, path, propType });
|
|
6732
6848
|
};
|
|
6733
6849
|
var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
6734
6850
|
const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
|
|
@@ -6744,7 +6860,7 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
6744
6860
|
getColor: isFinalValue && currentStyleProvider ? getStylesProviderThemeColor(currentStyleProvider.getKey()) : void 0,
|
|
6745
6861
|
isOverridden: hasValue && !isFinalValue ? true : void 0
|
|
6746
6862
|
};
|
|
6747
|
-
return /* @__PURE__ */
|
|
6863
|
+
return /* @__PURE__ */ React101.createElement(
|
|
6748
6864
|
StylesInheritanceInfotip,
|
|
6749
6865
|
{
|
|
6750
6866
|
inheritanceChain,
|
|
@@ -6753,17 +6869,17 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
6753
6869
|
label,
|
|
6754
6870
|
isDisabled
|
|
6755
6871
|
},
|
|
6756
|
-
/* @__PURE__ */
|
|
6872
|
+
/* @__PURE__ */ React101.createElement(StyleIndicator, { ...styleIndicatorProps })
|
|
6757
6873
|
);
|
|
6758
6874
|
};
|
|
6759
6875
|
var getLabel = ({ isFinalValue, hasValue }) => {
|
|
6760
6876
|
if (isFinalValue) {
|
|
6761
|
-
return (0,
|
|
6877
|
+
return (0, import_i18n72.__)("This is the final value", "elementor");
|
|
6762
6878
|
}
|
|
6763
6879
|
if (hasValue) {
|
|
6764
|
-
return (0,
|
|
6880
|
+
return (0, import_i18n72.__)("This value is overridden by another style", "elementor");
|
|
6765
6881
|
}
|
|
6766
|
-
return (0,
|
|
6882
|
+
return (0, import_i18n72.__)("This has value from another style", "elementor");
|
|
6767
6883
|
};
|
|
6768
6884
|
|
|
6769
6885
|
// src/styles-inheritance/init-styles-inheritance-transformers.ts
|
|
@@ -6784,7 +6900,7 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
|
|
|
6784
6900
|
]);
|
|
6785
6901
|
|
|
6786
6902
|
// src/styles-inheritance/transformers/array-transformer.tsx
|
|
6787
|
-
var
|
|
6903
|
+
var React102 = __toESM(require("react"));
|
|
6788
6904
|
var import_editor_canvas6 = require("@elementor/editor-canvas");
|
|
6789
6905
|
var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) => {
|
|
6790
6906
|
if (!values || values.length === 0) {
|
|
@@ -6794,18 +6910,18 @@ var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) =>
|
|
|
6794
6910
|
if (allStrings) {
|
|
6795
6911
|
return values.join(" ");
|
|
6796
6912
|
}
|
|
6797
|
-
return /* @__PURE__ */
|
|
6913
|
+
return /* @__PURE__ */ React102.createElement(React102.Fragment, null, values.map((item, index) => /* @__PURE__ */ React102.createElement(React102.Fragment, { key: index }, index > 0 && " ", item)));
|
|
6798
6914
|
});
|
|
6799
6915
|
|
|
6800
6916
|
// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
|
|
6801
|
-
var
|
|
6917
|
+
var React103 = __toESM(require("react"));
|
|
6802
6918
|
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
6803
|
-
var
|
|
6804
|
-
var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */
|
|
6919
|
+
var import_ui50 = require("@elementor/ui");
|
|
6920
|
+
var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React103.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React103.createElement(ItemLabelColor, { value })));
|
|
6805
6921
|
var ItemLabelColor = ({ value: { color } }) => {
|
|
6806
|
-
return /* @__PURE__ */
|
|
6922
|
+
return /* @__PURE__ */ React103.createElement("span", null, color);
|
|
6807
6923
|
};
|
|
6808
|
-
var StyledUnstableColorIndicator = (0,
|
|
6924
|
+
var StyledUnstableColorIndicator = (0, import_ui50.styled)(import_ui50.UnstableColorIndicator)(({ theme }) => ({
|
|
6809
6925
|
width: "1em",
|
|
6810
6926
|
height: "1em",
|
|
6811
6927
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -6814,20 +6930,20 @@ var StyledUnstableColorIndicator = (0, import_ui48.styled)(import_ui48.UnstableC
|
|
|
6814
6930
|
}));
|
|
6815
6931
|
|
|
6816
6932
|
// src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
|
|
6817
|
-
var
|
|
6933
|
+
var React104 = __toESM(require("react"));
|
|
6818
6934
|
var import_editor_canvas8 = require("@elementor/editor-canvas");
|
|
6819
|
-
var
|
|
6820
|
-
var
|
|
6821
|
-
var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */
|
|
6935
|
+
var import_ui51 = require("@elementor/ui");
|
|
6936
|
+
var import_i18n73 = require("@wordpress/i18n");
|
|
6937
|
+
var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React104.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React104.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React104.createElement(ItemLabelGradient, { value })));
|
|
6822
6938
|
var ItemIconGradient = ({ value }) => {
|
|
6823
6939
|
const gradient = getGradientValue(value);
|
|
6824
|
-
return /* @__PURE__ */
|
|
6940
|
+
return /* @__PURE__ */ React104.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
6825
6941
|
};
|
|
6826
6942
|
var ItemLabelGradient = ({ value }) => {
|
|
6827
6943
|
if (value.type === "linear") {
|
|
6828
|
-
return /* @__PURE__ */
|
|
6944
|
+
return /* @__PURE__ */ React104.createElement("span", null, (0, import_i18n73.__)("Linear gradient", "elementor"));
|
|
6829
6945
|
}
|
|
6830
|
-
return /* @__PURE__ */
|
|
6946
|
+
return /* @__PURE__ */ React104.createElement("span", null, (0, import_i18n73.__)("Radial gradient", "elementor"));
|
|
6831
6947
|
};
|
|
6832
6948
|
var getGradientValue = (gradient) => {
|
|
6833
6949
|
const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
|
|
@@ -6838,16 +6954,16 @@ var getGradientValue = (gradient) => {
|
|
|
6838
6954
|
};
|
|
6839
6955
|
|
|
6840
6956
|
// src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
|
|
6841
|
-
var
|
|
6957
|
+
var React105 = __toESM(require("react"));
|
|
6842
6958
|
var import_editor_canvas9 = require("@elementor/editor-canvas");
|
|
6843
6959
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
6844
|
-
var
|
|
6960
|
+
var import_ui52 = require("@elementor/ui");
|
|
6845
6961
|
var import_wp_media = require("@elementor/wp-media");
|
|
6846
|
-
var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */
|
|
6962
|
+
var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React105.createElement(import_ui52.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React105.createElement(ItemIconImage, { value }), /* @__PURE__ */ React105.createElement(ItemLabelImage, { value })));
|
|
6847
6963
|
var ItemIconImage = ({ value }) => {
|
|
6848
6964
|
const { imageUrl } = useImage(value);
|
|
6849
|
-
return /* @__PURE__ */
|
|
6850
|
-
|
|
6965
|
+
return /* @__PURE__ */ React105.createElement(
|
|
6966
|
+
import_ui52.CardMedia,
|
|
6851
6967
|
{
|
|
6852
6968
|
image: imageUrl,
|
|
6853
6969
|
sx: (theme) => ({
|
|
@@ -6862,7 +6978,7 @@ var ItemIconImage = ({ value }) => {
|
|
|
6862
6978
|
};
|
|
6863
6979
|
var ItemLabelImage = ({ value }) => {
|
|
6864
6980
|
const { imageTitle } = useImage(value);
|
|
6865
|
-
return /* @__PURE__ */
|
|
6981
|
+
return /* @__PURE__ */ React105.createElement(import_editor_ui12.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React105.createElement("span", null, imageTitle));
|
|
6866
6982
|
};
|
|
6867
6983
|
var useImage = (image) => {
|
|
6868
6984
|
let imageTitle, imageUrl = null;
|
|
@@ -6887,7 +7003,7 @@ var getFileExtensionFromFilename = (filename) => {
|
|
|
6887
7003
|
};
|
|
6888
7004
|
|
|
6889
7005
|
// src/styles-inheritance/transformers/box-shadow-transformer.tsx
|
|
6890
|
-
var
|
|
7006
|
+
var React106 = __toESM(require("react"));
|
|
6891
7007
|
var import_editor_canvas10 = require("@elementor/editor-canvas");
|
|
6892
7008
|
var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
|
|
6893
7009
|
if (!value) {
|
|
@@ -6897,20 +7013,20 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
|
|
|
6897
7013
|
const colorValue = color || "#000000";
|
|
6898
7014
|
const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
|
|
6899
7015
|
const positionValue = position || "outset";
|
|
6900
|
-
return /* @__PURE__ */
|
|
7016
|
+
return /* @__PURE__ */ React106.createElement(React106.Fragment, null, colorValue, " ", positionValue, ", ", sizes);
|
|
6901
7017
|
});
|
|
6902
7018
|
|
|
6903
7019
|
// src/styles-inheritance/transformers/color-transformer.tsx
|
|
6904
|
-
var
|
|
7020
|
+
var React107 = __toESM(require("react"));
|
|
6905
7021
|
var import_editor_canvas11 = require("@elementor/editor-canvas");
|
|
6906
|
-
var
|
|
7022
|
+
var import_ui53 = require("@elementor/ui");
|
|
6907
7023
|
function isValidCSSColor(value) {
|
|
6908
7024
|
if (!value.trim()) {
|
|
6909
7025
|
return false;
|
|
6910
7026
|
}
|
|
6911
7027
|
return CSS.supports("color", value.trim());
|
|
6912
7028
|
}
|
|
6913
|
-
var StyledColorIndicator = (0,
|
|
7029
|
+
var StyledColorIndicator = (0, import_ui53.styled)(import_ui53.UnstableColorIndicator)(({ theme }) => ({
|
|
6914
7030
|
width: "1em",
|
|
6915
7031
|
height: "1em",
|
|
6916
7032
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -6921,7 +7037,7 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
|
|
|
6921
7037
|
if (!isValidCSSColor(value)) {
|
|
6922
7038
|
return value;
|
|
6923
7039
|
}
|
|
6924
|
-
return /* @__PURE__ */
|
|
7040
|
+
return /* @__PURE__ */ React107.createElement(import_ui53.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React107.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React107.createElement("span", null, value));
|
|
6925
7041
|
});
|
|
6926
7042
|
|
|
6927
7043
|
// src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
|