@elementor/editor-editing-panel 4.1.0-817 → 4.1.0-818
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +789 -689
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +624 -519
- 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-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_icons24 = 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_ui40 = 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_ui39 = 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_ui38 = 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,46 @@ 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 Z_INDEX_LABEL = (0,
|
|
4353
|
+
var React59 = __toESM(require("react"));
|
|
4354
|
+
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
4355
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
4356
|
+
var Z_INDEX_LABEL = (0, import_i18n37.__)("Z-index", "elementor");
|
|
4260
4357
|
var ZIndexField = () => {
|
|
4261
|
-
return /* @__PURE__ */
|
|
4358
|
+
return /* @__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, null)));
|
|
4262
4359
|
};
|
|
4263
4360
|
|
|
4264
4361
|
// src/components/style-sections/position-section/position-section.tsx
|
|
4265
4362
|
var POSITION_STATIC = "static";
|
|
4266
|
-
var POSITION_LABEL2 = (0,
|
|
4267
|
-
var DIMENSIONS_LABEL = (0,
|
|
4363
|
+
var POSITION_LABEL2 = (0, import_i18n38.__)("Position", "elementor");
|
|
4364
|
+
var DIMENSIONS_LABEL = (0, import_i18n38.__)("Dimensions", "elementor");
|
|
4268
4365
|
var POSITION_DEPENDENT_PROP_NAMES = [
|
|
4269
4366
|
"inset-block-start",
|
|
4270
4367
|
"inset-block-end",
|
|
@@ -4321,7 +4418,7 @@ var PositionSection = () => {
|
|
|
4321
4418
|
}
|
|
4322
4419
|
};
|
|
4323
4420
|
const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
|
|
4324
|
-
return /* @__PURE__ */
|
|
4421
|
+
return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(DimensionsField, null), /* @__PURE__ */ React60.createElement(ZIndexField, null)) : null, /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(OffsetField, null));
|
|
4325
4422
|
};
|
|
4326
4423
|
var usePersistDimensions = () => {
|
|
4327
4424
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -4331,26 +4428,26 @@ var usePersistDimensions = () => {
|
|
|
4331
4428
|
};
|
|
4332
4429
|
|
|
4333
4430
|
// src/components/style-sections/size-section/size-section.tsx
|
|
4334
|
-
var
|
|
4431
|
+
var React65 = __toESM(require("react"));
|
|
4335
4432
|
var import_react31 = require("react");
|
|
4336
|
-
var
|
|
4337
|
-
var
|
|
4338
|
-
var
|
|
4433
|
+
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
4434
|
+
var import_ui35 = require("@elementor/ui");
|
|
4435
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
4339
4436
|
|
|
4340
4437
|
// src/components/style-tab-collapsible-content.tsx
|
|
4341
|
-
var
|
|
4438
|
+
var React62 = __toESM(require("react"));
|
|
4342
4439
|
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
4343
4440
|
|
|
4344
4441
|
// src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
|
|
4345
|
-
var
|
|
4442
|
+
var React61 = __toESM(require("react"));
|
|
4346
4443
|
var import_editor_styles_repository14 = require("@elementor/editor-styles-repository");
|
|
4347
|
-
var
|
|
4348
|
-
var
|
|
4444
|
+
var import_ui34 = require("@elementor/ui");
|
|
4445
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
4349
4446
|
var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
4350
4447
|
const { id, meta, provider } = useStyle();
|
|
4351
4448
|
const snapshot = useStylesInheritanceSnapshot();
|
|
4352
4449
|
if (fields.includes("custom_css")) {
|
|
4353
|
-
return /* @__PURE__ */
|
|
4450
|
+
return /* @__PURE__ */ React61.createElement(CustomCssIndicator, null);
|
|
4354
4451
|
}
|
|
4355
4452
|
const snapshotFields = Object.fromEntries(
|
|
4356
4453
|
Object.entries(snapshot ?? {}).filter(([key]) => fields.includes(key))
|
|
@@ -4359,9 +4456,9 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
4359
4456
|
if (!hasValues && !hasOverrides) {
|
|
4360
4457
|
return null;
|
|
4361
4458
|
}
|
|
4362
|
-
const hasValueLabel = (0,
|
|
4363
|
-
const hasOverridesLabel = (0,
|
|
4364
|
-
return /* @__PURE__ */
|
|
4459
|
+
const hasValueLabel = (0, import_i18n39.__)("Has effective styles", "elementor");
|
|
4460
|
+
const hasOverridesLabel = (0, import_i18n39.__)("Has overridden styles", "elementor");
|
|
4461
|
+
return /* @__PURE__ */ React61.createElement(import_ui34.Tooltip, { title: (0, import_i18n39.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React61.createElement(import_ui34.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React61.createElement(
|
|
4365
4462
|
StyleIndicator,
|
|
4366
4463
|
{
|
|
4367
4464
|
getColor: getStylesProviderThemeColor(provider.getKey()),
|
|
@@ -4369,7 +4466,7 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
4369
4466
|
role: "listitem",
|
|
4370
4467
|
"aria-label": hasValueLabel
|
|
4371
4468
|
}
|
|
4372
|
-
), hasOverrides && /* @__PURE__ */
|
|
4469
|
+
), hasOverrides && /* @__PURE__ */ React61.createElement(
|
|
4373
4470
|
StyleIndicator,
|
|
4374
4471
|
{
|
|
4375
4472
|
isOverridden: true,
|
|
@@ -4409,59 +4506,59 @@ function getCurrentStyleFromChain(chain, styleId, meta) {
|
|
|
4409
4506
|
|
|
4410
4507
|
// src/components/style-tab-collapsible-content.tsx
|
|
4411
4508
|
var StyleTabCollapsibleContent = ({ fields = [], children }) => {
|
|
4412
|
-
return /* @__PURE__ */
|
|
4509
|
+
return /* @__PURE__ */ React62.createElement(import_editor_ui6.CollapsibleContent, { titleEnd: getStylesInheritanceIndicators(fields) }, children);
|
|
4413
4510
|
};
|
|
4414
4511
|
function getStylesInheritanceIndicators(fields) {
|
|
4415
4512
|
if (fields.length === 0) {
|
|
4416
4513
|
return null;
|
|
4417
4514
|
}
|
|
4418
|
-
return (isOpen) => !isOpen ? /* @__PURE__ */
|
|
4515
|
+
return (isOpen) => !isOpen ? /* @__PURE__ */ React62.createElement(StylesInheritanceSectionIndicators, { fields }) : null;
|
|
4419
4516
|
}
|
|
4420
4517
|
|
|
4421
4518
|
// src/components/style-sections/size-section/object-fit-field.tsx
|
|
4422
|
-
var
|
|
4423
|
-
var
|
|
4424
|
-
var
|
|
4425
|
-
var OBJECT_FIT_LABEL = (0,
|
|
4519
|
+
var React63 = __toESM(require("react"));
|
|
4520
|
+
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
4521
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
4522
|
+
var OBJECT_FIT_LABEL = (0, import_i18n40.__)("Object fit", "elementor");
|
|
4426
4523
|
var positionOptions2 = [
|
|
4427
|
-
{ label: (0,
|
|
4428
|
-
{ label: (0,
|
|
4429
|
-
{ label: (0,
|
|
4430
|
-
{ label: (0,
|
|
4431
|
-
{ label: (0,
|
|
4524
|
+
{ label: (0, import_i18n40.__)("Fill", "elementor"), value: "fill" },
|
|
4525
|
+
{ label: (0, import_i18n40.__)("Cover", "elementor"), value: "cover" },
|
|
4526
|
+
{ label: (0, import_i18n40.__)("Contain", "elementor"), value: "contain" },
|
|
4527
|
+
{ label: (0, import_i18n40.__)("None", "elementor"), value: "none" },
|
|
4528
|
+
{ label: (0, import_i18n40.__)("Scale down", "elementor"), value: "scale-down" }
|
|
4432
4529
|
];
|
|
4433
4530
|
var ObjectFitField = () => {
|
|
4434
|
-
return /* @__PURE__ */
|
|
4531
|
+
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
4532
|
};
|
|
4436
4533
|
|
|
4437
4534
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
4438
|
-
var
|
|
4439
|
-
var
|
|
4440
|
-
var
|
|
4441
|
-
var
|
|
4442
|
-
var OVERFLOW_LABEL = (0,
|
|
4535
|
+
var React64 = __toESM(require("react"));
|
|
4536
|
+
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
4537
|
+
var import_icons17 = require("@elementor/icons");
|
|
4538
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
4539
|
+
var OVERFLOW_LABEL = (0, import_i18n41.__)("Overflow", "elementor");
|
|
4443
4540
|
var options7 = [
|
|
4444
4541
|
{
|
|
4445
4542
|
value: "visible",
|
|
4446
|
-
label: (0,
|
|
4447
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4543
|
+
label: (0, import_i18n41.__)("Visible", "elementor"),
|
|
4544
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons17.EyeIcon, { fontSize: size }),
|
|
4448
4545
|
showTooltip: true
|
|
4449
4546
|
},
|
|
4450
4547
|
{
|
|
4451
4548
|
value: "hidden",
|
|
4452
|
-
label: (0,
|
|
4453
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4549
|
+
label: (0, import_i18n41.__)("Hidden", "elementor"),
|
|
4550
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons17.EyeOffIcon, { fontSize: size }),
|
|
4454
4551
|
showTooltip: true
|
|
4455
4552
|
},
|
|
4456
4553
|
{
|
|
4457
4554
|
value: "auto",
|
|
4458
|
-
label: (0,
|
|
4459
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4555
|
+
label: (0, import_i18n41.__)("Auto", "elementor"),
|
|
4556
|
+
renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons17.LetterAIcon, { fontSize: size }),
|
|
4460
4557
|
showTooltip: true
|
|
4461
4558
|
}
|
|
4462
4559
|
];
|
|
4463
4560
|
var OverflowField = () => {
|
|
4464
|
-
return /* @__PURE__ */
|
|
4561
|
+
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
4562
|
};
|
|
4466
4563
|
|
|
4467
4564
|
// src/components/style-sections/size-section/size-section.tsx
|
|
@@ -4469,98 +4566,98 @@ var CssSizeProps = [
|
|
|
4469
4566
|
[
|
|
4470
4567
|
{
|
|
4471
4568
|
bind: "width",
|
|
4472
|
-
label: (0,
|
|
4569
|
+
label: (0, import_i18n42.__)("Width", "elementor")
|
|
4473
4570
|
},
|
|
4474
4571
|
{
|
|
4475
4572
|
bind: "height",
|
|
4476
|
-
label: (0,
|
|
4573
|
+
label: (0, import_i18n42.__)("Height", "elementor")
|
|
4477
4574
|
}
|
|
4478
4575
|
],
|
|
4479
4576
|
[
|
|
4480
4577
|
{
|
|
4481
4578
|
bind: "min-width",
|
|
4482
|
-
label: (0,
|
|
4579
|
+
label: (0, import_i18n42.__)("Min width", "elementor")
|
|
4483
4580
|
},
|
|
4484
4581
|
{
|
|
4485
4582
|
bind: "min-height",
|
|
4486
|
-
label: (0,
|
|
4583
|
+
label: (0, import_i18n42.__)("Min height", "elementor")
|
|
4487
4584
|
}
|
|
4488
4585
|
],
|
|
4489
4586
|
[
|
|
4490
4587
|
{
|
|
4491
4588
|
bind: "max-width",
|
|
4492
|
-
label: (0,
|
|
4589
|
+
label: (0, import_i18n42.__)("Max width", "elementor")
|
|
4493
4590
|
},
|
|
4494
4591
|
{
|
|
4495
4592
|
bind: "max-height",
|
|
4496
|
-
label: (0,
|
|
4593
|
+
label: (0, import_i18n42.__)("Max height", "elementor")
|
|
4497
4594
|
}
|
|
4498
4595
|
]
|
|
4499
4596
|
];
|
|
4500
|
-
var ASPECT_RATIO_LABEL = (0,
|
|
4597
|
+
var ASPECT_RATIO_LABEL = (0, import_i18n42.__)("Aspect Ratio", "elementor");
|
|
4501
4598
|
var SizeSection = () => {
|
|
4502
4599
|
const gridRowRefs = [(0, import_react31.useRef)(null), (0, import_react31.useRef)(null), (0, import_react31.useRef)(null)];
|
|
4503
|
-
return /* @__PURE__ */
|
|
4600
|
+
return /* @__PURE__ */ React65.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React65.createElement(import_ui35.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React65.createElement(import_ui35.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_ui35.Stack, null, /* @__PURE__ */ React65.createElement(OverflowField, null)), /* @__PURE__ */ React65.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React65.createElement(import_ui35.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_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(import_editor_controls37.PositionControl, null))))));
|
|
4504
4601
|
};
|
|
4505
4602
|
var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
|
|
4506
|
-
return /* @__PURE__ */
|
|
4603
|
+
return /* @__PURE__ */ React65.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React65.createElement(import_ui35.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React65.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(ControlLabel, null, label)), /* @__PURE__ */ React65.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(import_editor_controls37.SizeControl, { extendedOptions, anchorRef: rowRef }))));
|
|
4507
4604
|
};
|
|
4508
4605
|
|
|
4509
4606
|
// 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,
|
|
4607
|
+
var React66 = __toESM(require("react"));
|
|
4608
|
+
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
4609
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
4610
|
+
var MARGIN_LABEL = (0, import_i18n43.__)("Margin", "elementor");
|
|
4611
|
+
var PADDING_LABEL = (0, import_i18n43.__)("Padding", "elementor");
|
|
4515
4612
|
var SpacingSection = () => {
|
|
4516
4613
|
const { isSiteRtl } = useDirection();
|
|
4517
|
-
return /* @__PURE__ */
|
|
4518
|
-
|
|
4614
|
+
return /* @__PURE__ */ React66.createElement(SectionContent, null, /* @__PURE__ */ React66.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React66.createElement(
|
|
4615
|
+
import_editor_controls38.LinkedDimensionsControl,
|
|
4519
4616
|
{
|
|
4520
4617
|
label: MARGIN_LABEL,
|
|
4521
4618
|
isSiteRtl,
|
|
4522
4619
|
min: -Number.MAX_SAFE_INTEGER
|
|
4523
4620
|
}
|
|
4524
|
-
)), /* @__PURE__ */
|
|
4621
|
+
)), /* @__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
4622
|
};
|
|
4526
4623
|
|
|
4527
4624
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
4528
|
-
var
|
|
4625
|
+
var React83 = __toESM(require("react"));
|
|
4529
4626
|
|
|
4530
4627
|
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
4531
|
-
var
|
|
4532
|
-
var
|
|
4533
|
-
var
|
|
4534
|
-
var COLUMN_COUNT_LABEL = (0,
|
|
4628
|
+
var React67 = __toESM(require("react"));
|
|
4629
|
+
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
4630
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
4631
|
+
var COLUMN_COUNT_LABEL = (0, import_i18n44.__)("Columns", "elementor");
|
|
4535
4632
|
var ColumnCountField = () => {
|
|
4536
|
-
return /* @__PURE__ */
|
|
4633
|
+
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
4634
|
};
|
|
4538
4635
|
|
|
4539
4636
|
// src/components/style-sections/typography-section/column-gap-field.tsx
|
|
4540
|
-
var
|
|
4637
|
+
var React68 = __toESM(require("react"));
|
|
4541
4638
|
var import_react32 = require("react");
|
|
4542
|
-
var
|
|
4543
|
-
var
|
|
4544
|
-
var COLUMN_GAP_LABEL = (0,
|
|
4639
|
+
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
4640
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
4641
|
+
var COLUMN_GAP_LABEL = (0, import_i18n45.__)("Column gap", "elementor");
|
|
4545
4642
|
var ColumnGapField = () => {
|
|
4546
4643
|
const rowRef = (0, import_react32.useRef)(null);
|
|
4547
|
-
return /* @__PURE__ */
|
|
4644
|
+
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
4645
|
};
|
|
4549
4646
|
|
|
4550
4647
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
4551
|
-
var
|
|
4552
|
-
var
|
|
4648
|
+
var React69 = __toESM(require("react"));
|
|
4649
|
+
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
4553
4650
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
4554
|
-
var
|
|
4555
|
-
var FONT_FAMILY_LABEL = (0,
|
|
4651
|
+
var import_i18n46 = require("@wordpress/i18n");
|
|
4652
|
+
var FONT_FAMILY_LABEL = (0, import_i18n46.__)("Font family", "elementor");
|
|
4556
4653
|
var FontFamilyField = () => {
|
|
4557
|
-
const fontFamilies = (0,
|
|
4654
|
+
const fontFamilies = (0, import_editor_controls41.useFontFamilies)();
|
|
4558
4655
|
const sectionWidth = (0, import_editor_ui7.useSectionWidth)();
|
|
4559
4656
|
if (fontFamilies.length === 0) {
|
|
4560
4657
|
return null;
|
|
4561
4658
|
}
|
|
4562
|
-
return /* @__PURE__ */
|
|
4563
|
-
|
|
4659
|
+
return /* @__PURE__ */ React69.createElement(StylesField, { bind: "font-family", propDisplayName: FONT_FAMILY_LABEL }, /* @__PURE__ */ React69.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ React69.createElement(
|
|
4660
|
+
import_editor_controls41.FontFamilyControl,
|
|
4564
4661
|
{
|
|
4565
4662
|
fontFamilies,
|
|
4566
4663
|
sectionWidth,
|
|
@@ -4570,198 +4667,198 @@ var FontFamilyField = () => {
|
|
|
4570
4667
|
};
|
|
4571
4668
|
|
|
4572
4669
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
4573
|
-
var
|
|
4670
|
+
var React70 = __toESM(require("react"));
|
|
4574
4671
|
var import_react33 = require("react");
|
|
4575
|
-
var
|
|
4576
|
-
var
|
|
4577
|
-
var FONT_SIZE_LABEL = (0,
|
|
4672
|
+
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
4673
|
+
var import_i18n47 = require("@wordpress/i18n");
|
|
4674
|
+
var FONT_SIZE_LABEL = (0, import_i18n47.__)("Font size", "elementor");
|
|
4578
4675
|
var FontSizeField = () => {
|
|
4579
4676
|
const rowRef = (0, import_react33.useRef)(null);
|
|
4580
|
-
return /* @__PURE__ */
|
|
4677
|
+
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
4678
|
};
|
|
4582
4679
|
|
|
4583
4680
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
4584
|
-
var
|
|
4585
|
-
var
|
|
4586
|
-
var
|
|
4587
|
-
var
|
|
4588
|
-
var FONT_STYLE_LABEL = (0,
|
|
4681
|
+
var React71 = __toESM(require("react"));
|
|
4682
|
+
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
4683
|
+
var import_icons18 = require("@elementor/icons");
|
|
4684
|
+
var import_i18n48 = require("@wordpress/i18n");
|
|
4685
|
+
var FONT_STYLE_LABEL = (0, import_i18n48.__)("Font style", "elementor");
|
|
4589
4686
|
var options8 = [
|
|
4590
4687
|
{
|
|
4591
4688
|
value: "normal",
|
|
4592
|
-
label: (0,
|
|
4593
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4689
|
+
label: (0, import_i18n48.__)("Normal", "elementor"),
|
|
4690
|
+
renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(import_icons18.MinusIcon, { fontSize: size }),
|
|
4594
4691
|
showTooltip: true
|
|
4595
4692
|
},
|
|
4596
4693
|
{
|
|
4597
4694
|
value: "italic",
|
|
4598
|
-
label: (0,
|
|
4599
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4695
|
+
label: (0, import_i18n48.__)("Italic", "elementor"),
|
|
4696
|
+
renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(import_icons18.ItalicIcon, { fontSize: size }),
|
|
4600
4697
|
showTooltip: true
|
|
4601
4698
|
}
|
|
4602
4699
|
];
|
|
4603
4700
|
var FontStyleField = () => {
|
|
4604
|
-
return /* @__PURE__ */
|
|
4701
|
+
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
4702
|
};
|
|
4606
4703
|
|
|
4607
4704
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
4608
|
-
var
|
|
4609
|
-
var
|
|
4610
|
-
var
|
|
4611
|
-
var FONT_WEIGHT_LABEL = (0,
|
|
4705
|
+
var React72 = __toESM(require("react"));
|
|
4706
|
+
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
4707
|
+
var import_i18n49 = require("@wordpress/i18n");
|
|
4708
|
+
var FONT_WEIGHT_LABEL = (0, import_i18n49.__)("Font weight", "elementor");
|
|
4612
4709
|
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,
|
|
4710
|
+
{ value: "100", label: (0, import_i18n49.__)("100 - Thin", "elementor") },
|
|
4711
|
+
{ value: "200", label: (0, import_i18n49.__)("200 - Extra light", "elementor") },
|
|
4712
|
+
{ value: "300", label: (0, import_i18n49.__)("300 - Light", "elementor") },
|
|
4713
|
+
{ value: "400", label: (0, import_i18n49.__)("400 - Normal", "elementor") },
|
|
4714
|
+
{ value: "500", label: (0, import_i18n49.__)("500 - Medium", "elementor") },
|
|
4715
|
+
{ value: "600", label: (0, import_i18n49.__)("600 - Semi bold", "elementor") },
|
|
4716
|
+
{ value: "700", label: (0, import_i18n49.__)("700 - Bold", "elementor") },
|
|
4717
|
+
{ value: "800", label: (0, import_i18n49.__)("800 - Extra bold", "elementor") },
|
|
4718
|
+
{ value: "900", label: (0, import_i18n49.__)("900 - Black", "elementor") }
|
|
4622
4719
|
];
|
|
4623
4720
|
var FontWeightField = () => {
|
|
4624
|
-
return /* @__PURE__ */
|
|
4721
|
+
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
4722
|
};
|
|
4626
4723
|
|
|
4627
4724
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
4628
|
-
var
|
|
4725
|
+
var React73 = __toESM(require("react"));
|
|
4629
4726
|
var import_react34 = require("react");
|
|
4630
|
-
var
|
|
4631
|
-
var
|
|
4632
|
-
var LETTER_SPACING_LABEL = (0,
|
|
4727
|
+
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
4728
|
+
var import_i18n50 = require("@wordpress/i18n");
|
|
4729
|
+
var LETTER_SPACING_LABEL = (0, import_i18n50.__)("Letter spacing", "elementor");
|
|
4633
4730
|
var LetterSpacingField = () => {
|
|
4634
4731
|
const rowRef = (0, import_react34.useRef)(null);
|
|
4635
|
-
return /* @__PURE__ */
|
|
4732
|
+
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
4733
|
};
|
|
4637
4734
|
|
|
4638
4735
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
4639
|
-
var
|
|
4736
|
+
var React74 = __toESM(require("react"));
|
|
4640
4737
|
var import_react35 = require("react");
|
|
4641
|
-
var
|
|
4642
|
-
var
|
|
4643
|
-
var LINE_HEIGHT_LABEL = (0,
|
|
4738
|
+
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
4739
|
+
var import_i18n51 = require("@wordpress/i18n");
|
|
4740
|
+
var LINE_HEIGHT_LABEL = (0, import_i18n51.__)("Line height", "elementor");
|
|
4644
4741
|
var LineHeightField = () => {
|
|
4645
4742
|
const rowRef = (0, import_react35.useRef)(null);
|
|
4646
|
-
return /* @__PURE__ */
|
|
4743
|
+
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
4744
|
};
|
|
4648
4745
|
|
|
4649
4746
|
// 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,
|
|
4747
|
+
var React75 = __toESM(require("react"));
|
|
4748
|
+
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
4749
|
+
var import_icons19 = require("@elementor/icons");
|
|
4750
|
+
var import_ui36 = require("@elementor/ui");
|
|
4751
|
+
var import_i18n52 = require("@wordpress/i18n");
|
|
4752
|
+
var TEXT_ALIGNMENT_LABEL = (0, import_i18n52.__)("Text align", "elementor");
|
|
4753
|
+
var AlignStartIcon = (0, import_ui36.withDirection)(import_icons19.AlignLeftIcon);
|
|
4754
|
+
var AlignEndIcon = (0, import_ui36.withDirection)(import_icons19.AlignRightIcon);
|
|
4658
4755
|
var options9 = [
|
|
4659
4756
|
{
|
|
4660
4757
|
value: "start",
|
|
4661
|
-
label: (0,
|
|
4662
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4758
|
+
label: (0, import_i18n52.__)("Start", "elementor"),
|
|
4759
|
+
renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(AlignStartIcon, { fontSize: size }),
|
|
4663
4760
|
showTooltip: true
|
|
4664
4761
|
},
|
|
4665
4762
|
{
|
|
4666
4763
|
value: "center",
|
|
4667
|
-
label: (0,
|
|
4668
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4764
|
+
label: (0, import_i18n52.__)("Center", "elementor"),
|
|
4765
|
+
renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons19.AlignCenterIcon, { fontSize: size }),
|
|
4669
4766
|
showTooltip: true
|
|
4670
4767
|
},
|
|
4671
4768
|
{
|
|
4672
4769
|
value: "end",
|
|
4673
|
-
label: (0,
|
|
4674
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4770
|
+
label: (0, import_i18n52.__)("End", "elementor"),
|
|
4771
|
+
renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(AlignEndIcon, { fontSize: size }),
|
|
4675
4772
|
showTooltip: true
|
|
4676
4773
|
},
|
|
4677
4774
|
{
|
|
4678
4775
|
value: "justify",
|
|
4679
|
-
label: (0,
|
|
4680
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4776
|
+
label: (0, import_i18n52.__)("Justify", "elementor"),
|
|
4777
|
+
renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons19.AlignJustifiedIcon, { fontSize: size }),
|
|
4681
4778
|
showTooltip: true
|
|
4682
4779
|
}
|
|
4683
4780
|
];
|
|
4684
4781
|
var TextAlignmentField = () => {
|
|
4685
|
-
return /* @__PURE__ */
|
|
4782
|
+
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
4783
|
};
|
|
4687
4784
|
|
|
4688
4785
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
4689
|
-
var
|
|
4690
|
-
var
|
|
4691
|
-
var
|
|
4692
|
-
var TEXT_COLOR_LABEL = (0,
|
|
4786
|
+
var React76 = __toESM(require("react"));
|
|
4787
|
+
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
4788
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
4789
|
+
var TEXT_COLOR_LABEL = (0, import_i18n53.__)("Text color", "elementor");
|
|
4693
4790
|
var TextColorField = () => {
|
|
4694
|
-
return /* @__PURE__ */
|
|
4791
|
+
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
4792
|
};
|
|
4696
4793
|
|
|
4697
4794
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
4698
|
-
var
|
|
4699
|
-
var
|
|
4700
|
-
var
|
|
4701
|
-
var
|
|
4702
|
-
var TEXT_DECORATION_LABEL = (0,
|
|
4795
|
+
var React77 = __toESM(require("react"));
|
|
4796
|
+
var import_editor_controls49 = require("@elementor/editor-controls");
|
|
4797
|
+
var import_icons20 = require("@elementor/icons");
|
|
4798
|
+
var import_i18n54 = require("@wordpress/i18n");
|
|
4799
|
+
var TEXT_DECORATION_LABEL = (0, import_i18n54.__)("Line decoration", "elementor");
|
|
4703
4800
|
var options10 = [
|
|
4704
4801
|
{
|
|
4705
4802
|
value: "none",
|
|
4706
|
-
label: (0,
|
|
4707
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4803
|
+
label: (0, import_i18n54.__)("None", "elementor"),
|
|
4804
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons20.MinusIcon, { fontSize: size }),
|
|
4708
4805
|
showTooltip: true,
|
|
4709
4806
|
exclusive: true
|
|
4710
4807
|
},
|
|
4711
4808
|
{
|
|
4712
4809
|
value: "underline",
|
|
4713
|
-
label: (0,
|
|
4714
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4810
|
+
label: (0, import_i18n54.__)("Underline", "elementor"),
|
|
4811
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons20.UnderlineIcon, { fontSize: size }),
|
|
4715
4812
|
showTooltip: true
|
|
4716
4813
|
},
|
|
4717
4814
|
{
|
|
4718
4815
|
value: "line-through",
|
|
4719
|
-
label: (0,
|
|
4720
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4816
|
+
label: (0, import_i18n54.__)("Line-through", "elementor"),
|
|
4817
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons20.StrikethroughIcon, { fontSize: size }),
|
|
4721
4818
|
showTooltip: true
|
|
4722
4819
|
},
|
|
4723
4820
|
{
|
|
4724
4821
|
value: "overline",
|
|
4725
|
-
label: (0,
|
|
4726
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4822
|
+
label: (0, import_i18n54.__)("Overline", "elementor"),
|
|
4823
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons20.OverlineIcon, { fontSize: size }),
|
|
4727
4824
|
showTooltip: true
|
|
4728
4825
|
}
|
|
4729
4826
|
];
|
|
4730
|
-
var TextDecorationField = () => /* @__PURE__ */
|
|
4827
|
+
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
4828
|
|
|
4732
4829
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
4733
|
-
var
|
|
4734
|
-
var
|
|
4735
|
-
var
|
|
4736
|
-
var
|
|
4737
|
-
var TEXT_DIRECTION_LABEL = (0,
|
|
4830
|
+
var React78 = __toESM(require("react"));
|
|
4831
|
+
var import_editor_controls50 = require("@elementor/editor-controls");
|
|
4832
|
+
var import_icons21 = require("@elementor/icons");
|
|
4833
|
+
var import_i18n55 = require("@wordpress/i18n");
|
|
4834
|
+
var TEXT_DIRECTION_LABEL = (0, import_i18n55.__)("Direction", "elementor");
|
|
4738
4835
|
var options11 = [
|
|
4739
4836
|
{
|
|
4740
4837
|
value: "ltr",
|
|
4741
|
-
label: (0,
|
|
4742
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4838
|
+
label: (0, import_i18n55.__)("Left to right", "elementor"),
|
|
4839
|
+
renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons21.TextDirectionLtrIcon, { fontSize: size }),
|
|
4743
4840
|
showTooltip: true
|
|
4744
4841
|
},
|
|
4745
4842
|
{
|
|
4746
4843
|
value: "rtl",
|
|
4747
|
-
label: (0,
|
|
4748
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4844
|
+
label: (0, import_i18n55.__)("Right to left", "elementor"),
|
|
4845
|
+
renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons21.TextDirectionRtlIcon, { fontSize: size }),
|
|
4749
4846
|
showTooltip: true
|
|
4750
4847
|
}
|
|
4751
4848
|
];
|
|
4752
4849
|
var TextDirectionField = () => {
|
|
4753
|
-
return /* @__PURE__ */
|
|
4850
|
+
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
4851
|
};
|
|
4755
4852
|
|
|
4756
4853
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
4757
|
-
var
|
|
4758
|
-
var
|
|
4759
|
-
var
|
|
4854
|
+
var React80 = __toESM(require("react"));
|
|
4855
|
+
var import_editor_controls51 = require("@elementor/editor-controls");
|
|
4856
|
+
var import_i18n56 = require("@wordpress/i18n");
|
|
4760
4857
|
|
|
4761
4858
|
// src/components/add-or-remove-content.tsx
|
|
4762
|
-
var
|
|
4763
|
-
var
|
|
4764
|
-
var
|
|
4859
|
+
var React79 = __toESM(require("react"));
|
|
4860
|
+
var import_icons22 = require("@elementor/icons");
|
|
4861
|
+
var import_ui37 = require("@elementor/ui");
|
|
4765
4862
|
var SIZE = "tiny";
|
|
4766
4863
|
var AddOrRemoveContent = ({
|
|
4767
4864
|
isAdded,
|
|
@@ -4771,8 +4868,8 @@ var AddOrRemoveContent = ({
|
|
|
4771
4868
|
disabled,
|
|
4772
4869
|
renderLabel
|
|
4773
4870
|
}) => {
|
|
4774
|
-
return /* @__PURE__ */
|
|
4775
|
-
|
|
4871
|
+
return /* @__PURE__ */ React79.createElement(SectionContent, null, /* @__PURE__ */ React79.createElement(
|
|
4872
|
+
import_ui37.Stack,
|
|
4776
4873
|
{
|
|
4777
4874
|
direction: "row",
|
|
4778
4875
|
sx: {
|
|
@@ -4782,8 +4879,8 @@ var AddOrRemoveContent = ({
|
|
|
4782
4879
|
}
|
|
4783
4880
|
},
|
|
4784
4881
|
renderLabel(),
|
|
4785
|
-
isAdded ? /* @__PURE__ */
|
|
4786
|
-
), /* @__PURE__ */
|
|
4882
|
+
isAdded ? /* @__PURE__ */ React79.createElement(import_ui37.IconButton, { size: SIZE, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React79.createElement(import_icons22.MinusIcon, { fontSize: SIZE })) : /* @__PURE__ */ React79.createElement(import_ui37.IconButton, { size: SIZE, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React79.createElement(import_icons22.PlusIcon, { fontSize: SIZE }))
|
|
4883
|
+
), /* @__PURE__ */ React79.createElement(import_ui37.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React79.createElement(SectionContent, null, children)));
|
|
4787
4884
|
};
|
|
4788
4885
|
|
|
4789
4886
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -4803,7 +4900,7 @@ var initTextStroke = {
|
|
|
4803
4900
|
}
|
|
4804
4901
|
}
|
|
4805
4902
|
};
|
|
4806
|
-
var TEXT_STROKE_LABEL = (0,
|
|
4903
|
+
var TEXT_STROKE_LABEL = (0, import_i18n56.__)("Text stroke", "elementor");
|
|
4807
4904
|
var TextStrokeField = () => {
|
|
4808
4905
|
const { value, setValue, canEdit } = useStylesField("stroke", {
|
|
4809
4906
|
history: { propDisplayName: TEXT_STROKE_LABEL }
|
|
@@ -4815,67 +4912,67 @@ var TextStrokeField = () => {
|
|
|
4815
4912
|
setValue(null);
|
|
4816
4913
|
};
|
|
4817
4914
|
const hasTextStroke = Boolean(value);
|
|
4818
|
-
return /* @__PURE__ */
|
|
4915
|
+
return /* @__PURE__ */ React80.createElement(StylesField, { bind: "stroke", propDisplayName: TEXT_STROKE_LABEL }, /* @__PURE__ */ React80.createElement(
|
|
4819
4916
|
AddOrRemoveContent,
|
|
4820
4917
|
{
|
|
4821
4918
|
isAdded: hasTextStroke,
|
|
4822
4919
|
onAdd: addTextStroke,
|
|
4823
4920
|
onRemove: removeTextStroke,
|
|
4824
4921
|
disabled: !canEdit,
|
|
4825
|
-
renderLabel: () => /* @__PURE__ */
|
|
4922
|
+
renderLabel: () => /* @__PURE__ */ React80.createElement(ControlLabel, null, TEXT_STROKE_LABEL)
|
|
4826
4923
|
},
|
|
4827
|
-
/* @__PURE__ */
|
|
4924
|
+
/* @__PURE__ */ React80.createElement(import_editor_controls51.StrokeControl, null)
|
|
4828
4925
|
));
|
|
4829
4926
|
};
|
|
4830
4927
|
|
|
4831
4928
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
4832
|
-
var
|
|
4833
|
-
var
|
|
4834
|
-
var
|
|
4835
|
-
var
|
|
4836
|
-
var TEXT_TRANSFORM_LABEL = (0,
|
|
4929
|
+
var React81 = __toESM(require("react"));
|
|
4930
|
+
var import_editor_controls52 = require("@elementor/editor-controls");
|
|
4931
|
+
var import_icons23 = require("@elementor/icons");
|
|
4932
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
4933
|
+
var TEXT_TRANSFORM_LABEL = (0, import_i18n57.__)("Text transform", "elementor");
|
|
4837
4934
|
var options12 = [
|
|
4838
4935
|
{
|
|
4839
4936
|
value: "none",
|
|
4840
|
-
label: (0,
|
|
4841
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4937
|
+
label: (0, import_i18n57.__)("None", "elementor"),
|
|
4938
|
+
renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons23.MinusIcon, { fontSize: size }),
|
|
4842
4939
|
showTooltip: true
|
|
4843
4940
|
},
|
|
4844
4941
|
{
|
|
4845
4942
|
value: "capitalize",
|
|
4846
|
-
label: (0,
|
|
4847
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4943
|
+
label: (0, import_i18n57.__)("Capitalize", "elementor"),
|
|
4944
|
+
renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons23.LetterCaseIcon, { fontSize: size }),
|
|
4848
4945
|
showTooltip: true
|
|
4849
4946
|
},
|
|
4850
4947
|
{
|
|
4851
4948
|
value: "uppercase",
|
|
4852
|
-
label: (0,
|
|
4853
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4949
|
+
label: (0, import_i18n57.__)("Uppercase", "elementor"),
|
|
4950
|
+
renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons23.LetterCaseUpperIcon, { fontSize: size }),
|
|
4854
4951
|
showTooltip: true
|
|
4855
4952
|
},
|
|
4856
4953
|
{
|
|
4857
4954
|
value: "lowercase",
|
|
4858
|
-
label: (0,
|
|
4859
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4955
|
+
label: (0, import_i18n57.__)("Lowercase", "elementor"),
|
|
4956
|
+
renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons23.LetterCaseLowerIcon, { fontSize: size }),
|
|
4860
4957
|
showTooltip: true
|
|
4861
4958
|
}
|
|
4862
4959
|
];
|
|
4863
|
-
var TransformField = () => /* @__PURE__ */
|
|
4960
|
+
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
4961
|
|
|
4865
4962
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
4866
|
-
var
|
|
4963
|
+
var React82 = __toESM(require("react"));
|
|
4867
4964
|
var import_react36 = require("react");
|
|
4868
|
-
var
|
|
4869
|
-
var
|
|
4870
|
-
var WORD_SPACING_LABEL = (0,
|
|
4965
|
+
var import_editor_controls53 = require("@elementor/editor-controls");
|
|
4966
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
4967
|
+
var WORD_SPACING_LABEL = (0, import_i18n58.__)("Word spacing", "elementor");
|
|
4871
4968
|
var WordSpacingField = () => {
|
|
4872
4969
|
const rowRef = (0, import_react36.useRef)(null);
|
|
4873
|
-
return /* @__PURE__ */
|
|
4970
|
+
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
4971
|
};
|
|
4875
4972
|
|
|
4876
4973
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
4877
4974
|
var TypographySection = () => {
|
|
4878
|
-
return /* @__PURE__ */
|
|
4975
|
+
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
4976
|
StyleTabCollapsibleContent,
|
|
4880
4977
|
{
|
|
4881
4978
|
fields: [
|
|
@@ -4890,18 +4987,18 @@ var TypographySection = () => {
|
|
|
4890
4987
|
"stroke"
|
|
4891
4988
|
]
|
|
4892
4989
|
},
|
|
4893
|
-
/* @__PURE__ */
|
|
4990
|
+
/* @__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
4991
|
));
|
|
4895
4992
|
};
|
|
4896
4993
|
|
|
4897
4994
|
// src/components/style-tab-section.tsx
|
|
4898
|
-
var
|
|
4995
|
+
var React84 = __toESM(require("react"));
|
|
4899
4996
|
var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
4900
4997
|
const { component, name, title, action } = section;
|
|
4901
4998
|
const tabDefaults = useDefaultPanelSettings();
|
|
4902
|
-
const SectionComponent = component || (() => /* @__PURE__ */
|
|
4999
|
+
const SectionComponent = component || (() => /* @__PURE__ */ React84.createElement(React84.Fragment, null));
|
|
4903
5000
|
const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes(name);
|
|
4904
|
-
return /* @__PURE__ */
|
|
5001
|
+
return /* @__PURE__ */ React84.createElement(
|
|
4905
5002
|
Section,
|
|
4906
5003
|
{
|
|
4907
5004
|
title,
|
|
@@ -4910,7 +5007,7 @@ var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
|
4910
5007
|
unmountOnExit,
|
|
4911
5008
|
action
|
|
4912
5009
|
},
|
|
4913
|
-
/* @__PURE__ */
|
|
5010
|
+
/* @__PURE__ */ React84.createElement(SectionComponent, null)
|
|
4914
5011
|
);
|
|
4915
5012
|
};
|
|
4916
5013
|
|
|
@@ -4932,7 +5029,7 @@ var StyleTab = () => {
|
|
|
4932
5029
|
if (!currentClassesProp) {
|
|
4933
5030
|
return null;
|
|
4934
5031
|
}
|
|
4935
|
-
return /* @__PURE__ */
|
|
5032
|
+
return /* @__PURE__ */ React85.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React85.createElement(
|
|
4936
5033
|
StyleProvider,
|
|
4937
5034
|
{
|
|
4938
5035
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -4943,13 +5040,13 @@ var StyleTab = () => {
|
|
|
4943
5040
|
},
|
|
4944
5041
|
setMetaState: setActiveStyleState
|
|
4945
5042
|
},
|
|
4946
|
-
/* @__PURE__ */
|
|
5043
|
+
/* @__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_ui38.Divider, null)), /* @__PURE__ */ React85.createElement(SectionsList, null, /* @__PURE__ */ React85.createElement(
|
|
4947
5044
|
StyleTabSection,
|
|
4948
5045
|
{
|
|
4949
5046
|
section: {
|
|
4950
5047
|
component: LayoutSection,
|
|
4951
5048
|
name: "Layout",
|
|
4952
|
-
title: (0,
|
|
5049
|
+
title: (0, import_i18n59.__)("Layout", "elementor")
|
|
4953
5050
|
},
|
|
4954
5051
|
fields: [
|
|
4955
5052
|
"display",
|
|
@@ -4959,26 +5056,29 @@ var StyleTab = () => {
|
|
|
4959
5056
|
"align-items",
|
|
4960
5057
|
"align-content",
|
|
4961
5058
|
"align-self",
|
|
4962
|
-
"gap"
|
|
5059
|
+
"gap",
|
|
5060
|
+
"order",
|
|
5061
|
+
"grid-column",
|
|
5062
|
+
"grid-row"
|
|
4963
5063
|
]
|
|
4964
5064
|
}
|
|
4965
|
-
), /* @__PURE__ */
|
|
5065
|
+
), /* @__PURE__ */ React85.createElement(
|
|
4966
5066
|
StyleTabSection,
|
|
4967
5067
|
{
|
|
4968
5068
|
section: {
|
|
4969
5069
|
component: SpacingSection,
|
|
4970
5070
|
name: "Spacing",
|
|
4971
|
-
title: (0,
|
|
5071
|
+
title: (0, import_i18n59.__)("Spacing", "elementor")
|
|
4972
5072
|
},
|
|
4973
5073
|
fields: ["margin", "padding"]
|
|
4974
5074
|
}
|
|
4975
|
-
), /* @__PURE__ */
|
|
5075
|
+
), /* @__PURE__ */ React85.createElement(
|
|
4976
5076
|
StyleTabSection,
|
|
4977
5077
|
{
|
|
4978
5078
|
section: {
|
|
4979
5079
|
component: SizeSection,
|
|
4980
5080
|
name: "Size",
|
|
4981
|
-
title: (0,
|
|
5081
|
+
title: (0, import_i18n59.__)("Size", "elementor")
|
|
4982
5082
|
},
|
|
4983
5083
|
fields: [
|
|
4984
5084
|
"width",
|
|
@@ -4992,23 +5092,23 @@ var StyleTab = () => {
|
|
|
4992
5092
|
"object-fit"
|
|
4993
5093
|
]
|
|
4994
5094
|
}
|
|
4995
|
-
), /* @__PURE__ */
|
|
5095
|
+
), /* @__PURE__ */ React85.createElement(
|
|
4996
5096
|
StyleTabSection,
|
|
4997
5097
|
{
|
|
4998
5098
|
section: {
|
|
4999
5099
|
component: PositionSection,
|
|
5000
5100
|
name: "Position",
|
|
5001
|
-
title: (0,
|
|
5101
|
+
title: (0, import_i18n59.__)("Position", "elementor")
|
|
5002
5102
|
},
|
|
5003
5103
|
fields: ["position", "z-index", "scroll-margin-top"]
|
|
5004
5104
|
}
|
|
5005
|
-
), /* @__PURE__ */
|
|
5105
|
+
), /* @__PURE__ */ React85.createElement(
|
|
5006
5106
|
StyleTabSection,
|
|
5007
5107
|
{
|
|
5008
5108
|
section: {
|
|
5009
5109
|
component: TypographySection,
|
|
5010
5110
|
name: "Typography",
|
|
5011
|
-
title: (0,
|
|
5111
|
+
title: (0, import_i18n59.__)("Typography", "elementor")
|
|
5012
5112
|
},
|
|
5013
5113
|
fields: [
|
|
5014
5114
|
"font-family",
|
|
@@ -5027,33 +5127,33 @@ var StyleTab = () => {
|
|
|
5027
5127
|
"stroke"
|
|
5028
5128
|
]
|
|
5029
5129
|
}
|
|
5030
|
-
), /* @__PURE__ */
|
|
5130
|
+
), /* @__PURE__ */ React85.createElement(
|
|
5031
5131
|
StyleTabSection,
|
|
5032
5132
|
{
|
|
5033
5133
|
section: {
|
|
5034
5134
|
component: BackgroundSection,
|
|
5035
5135
|
name: "Background",
|
|
5036
|
-
title: (0,
|
|
5136
|
+
title: (0, import_i18n59.__)("Background", "elementor")
|
|
5037
5137
|
},
|
|
5038
5138
|
fields: ["background"]
|
|
5039
5139
|
}
|
|
5040
|
-
), /* @__PURE__ */
|
|
5140
|
+
), /* @__PURE__ */ React85.createElement(
|
|
5041
5141
|
StyleTabSection,
|
|
5042
5142
|
{
|
|
5043
5143
|
section: {
|
|
5044
5144
|
component: BorderSection,
|
|
5045
5145
|
name: "Border",
|
|
5046
|
-
title: (0,
|
|
5146
|
+
title: (0, import_i18n59.__)("Border", "elementor")
|
|
5047
5147
|
},
|
|
5048
5148
|
fields: ["border-radius", "border-width", "border-color", "border-style"]
|
|
5049
5149
|
}
|
|
5050
|
-
), /* @__PURE__ */
|
|
5150
|
+
), /* @__PURE__ */ React85.createElement(
|
|
5051
5151
|
StyleTabSection,
|
|
5052
5152
|
{
|
|
5053
5153
|
section: {
|
|
5054
5154
|
component: EffectsSection,
|
|
5055
5155
|
name: "Effects",
|
|
5056
|
-
title: (0,
|
|
5156
|
+
title: (0, import_i18n59.__)("Effects", "elementor")
|
|
5057
5157
|
},
|
|
5058
5158
|
fields: [
|
|
5059
5159
|
"mix-blend-mode",
|
|
@@ -5066,12 +5166,12 @@ var StyleTab = () => {
|
|
|
5066
5166
|
"transition"
|
|
5067
5167
|
]
|
|
5068
5168
|
}
|
|
5069
|
-
), /* @__PURE__ */
|
|
5169
|
+
), /* @__PURE__ */ React85.createElement(StyleTabSlot, null)), /* @__PURE__ */ React85.createElement(import_ui38.Box, { sx: { height: "150px" } })))
|
|
5070
5170
|
));
|
|
5071
5171
|
};
|
|
5072
5172
|
function ClassesHeader({ children }) {
|
|
5073
5173
|
const scrollDirection = useScrollDirection();
|
|
5074
|
-
return /* @__PURE__ */
|
|
5174
|
+
return /* @__PURE__ */ React85.createElement(import_ui38.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
5075
5175
|
}
|
|
5076
5176
|
function useCurrentClassesProp() {
|
|
5077
5177
|
const { elementType } = useElement();
|
|
@@ -5090,7 +5190,7 @@ var EditingPanelTabs = () => {
|
|
|
5090
5190
|
return (
|
|
5091
5191
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
5092
5192
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
5093
|
-
/* @__PURE__ */
|
|
5193
|
+
/* @__PURE__ */ React86.createElement(import_react38.Fragment, { key: element.id }, /* @__PURE__ */ React86.createElement(PanelTabContent, null))
|
|
5094
5194
|
);
|
|
5095
5195
|
};
|
|
5096
5196
|
var PanelTabContent = () => {
|
|
@@ -5101,9 +5201,9 @@ var PanelTabContent = () => {
|
|
|
5101
5201
|
const isPromotedElement = !!(0, import_editor_elements12.getWidgetsCache)()?.[element.type]?.meta?.is_pro_promotion;
|
|
5102
5202
|
const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
5103
5203
|
const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;
|
|
5104
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
5105
|
-
return /* @__PURE__ */
|
|
5106
|
-
|
|
5204
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui39.useTabs)(currentTab);
|
|
5205
|
+
return /* @__PURE__ */ React86.createElement(ScrollProvider, null, /* @__PURE__ */ React86.createElement(import_ui39.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React86.createElement(import_ui39.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React86.createElement(
|
|
5206
|
+
import_ui39.Tabs,
|
|
5107
5207
|
{
|
|
5108
5208
|
variant: "fullWidth",
|
|
5109
5209
|
size: "small",
|
|
@@ -5114,10 +5214,10 @@ var PanelTabContent = () => {
|
|
|
5114
5214
|
setCurrentTab(newValue);
|
|
5115
5215
|
}
|
|
5116
5216
|
},
|
|
5117
|
-
!isPromotedElement && /* @__PURE__ */
|
|
5118
|
-
/* @__PURE__ */
|
|
5119
|
-
isInteractionsActive && /* @__PURE__ */
|
|
5120
|
-
), /* @__PURE__ */
|
|
5217
|
+
!isPromotedElement && /* @__PURE__ */ React86.createElement(import_ui39.Tab, { label: (0, import_i18n60.__)("General", "elementor"), ...getTabProps("settings") }),
|
|
5218
|
+
/* @__PURE__ */ React86.createElement(import_ui39.Tab, { label: (0, import_i18n60.__)("Style", "elementor"), ...getTabProps("style") }),
|
|
5219
|
+
isInteractionsActive && /* @__PURE__ */ React86.createElement(import_ui39.Tab, { label: (0, import_i18n60.__)("Interactions", "elementor"), ...getTabProps("interactions") })
|
|
5220
|
+
), /* @__PURE__ */ React86.createElement(import_ui39.Divider, null)), !isPromotedElement && /* @__PURE__ */ React86.createElement(import_ui39.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React86.createElement(SettingsTab, null)), /* @__PURE__ */ React86.createElement(import_ui39.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React86.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React86.createElement(import_ui39.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React86.createElement(InteractionsTab, null))));
|
|
5121
5221
|
};
|
|
5122
5222
|
|
|
5123
5223
|
// src/components/editing-panel.tsx
|
|
@@ -5125,18 +5225,18 @@ var { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = (0, import_
|
|
|
5125
5225
|
var { useMenuItems } = import_menus.controlActionsMenu;
|
|
5126
5226
|
var EditingPanel = () => {
|
|
5127
5227
|
const { element, elementType, settings } = (0, import_editor_elements13.useSelectedElementSettings)();
|
|
5128
|
-
const controlReplacements = (0,
|
|
5228
|
+
const controlReplacements = (0, import_editor_controls54.getControlReplacements)();
|
|
5129
5229
|
const menuItems = useMenuItems().default;
|
|
5130
5230
|
if (!element || !elementType) {
|
|
5131
5231
|
return null;
|
|
5132
5232
|
}
|
|
5133
|
-
const panelTitle = (0,
|
|
5233
|
+
const panelTitle = (0, import_i18n61.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
5134
5234
|
const { component: ReplacementComponent } = getEditingPanelReplacement(element, elementType) ?? {};
|
|
5135
|
-
let panelContent = /* @__PURE__ */
|
|
5235
|
+
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_icons24.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React87.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React87.createElement(EditingPanelTabs, null)));
|
|
5136
5236
|
if (ReplacementComponent) {
|
|
5137
|
-
panelContent = /* @__PURE__ */
|
|
5237
|
+
panelContent = /* @__PURE__ */ React87.createElement(ReplacementComponent, null);
|
|
5138
5238
|
}
|
|
5139
|
-
return /* @__PURE__ */
|
|
5239
|
+
return /* @__PURE__ */ React87.createElement(import_ui40.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
5240
|
};
|
|
5141
5241
|
|
|
5142
5242
|
// src/init.ts
|
|
@@ -5185,24 +5285,24 @@ var EditingPanelHooks = () => {
|
|
|
5185
5285
|
};
|
|
5186
5286
|
|
|
5187
5287
|
// src/components/promotions/init.tsx
|
|
5188
|
-
var
|
|
5288
|
+
var import_editor_controls56 = require("@elementor/editor-controls");
|
|
5189
5289
|
|
|
5190
5290
|
// src/components/promotions/custom-css.tsx
|
|
5191
|
-
var
|
|
5291
|
+
var React88 = __toESM(require("react"));
|
|
5192
5292
|
var import_react40 = require("react");
|
|
5193
|
-
var
|
|
5194
|
-
var
|
|
5293
|
+
var import_editor_controls55 = require("@elementor/editor-controls");
|
|
5294
|
+
var import_i18n62 = require("@wordpress/i18n");
|
|
5195
5295
|
var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
|
|
5196
5296
|
var CustomCssSection = () => {
|
|
5197
5297
|
const triggerRef = (0, import_react40.useRef)(null);
|
|
5198
|
-
return /* @__PURE__ */
|
|
5298
|
+
return /* @__PURE__ */ React88.createElement(
|
|
5199
5299
|
StyleTabSection,
|
|
5200
5300
|
{
|
|
5201
5301
|
section: {
|
|
5202
5302
|
name: "Custom CSS",
|
|
5203
|
-
title: (0,
|
|
5303
|
+
title: (0, import_i18n62.__)("Custom CSS", "elementor"),
|
|
5204
5304
|
action: {
|
|
5205
|
-
component: /* @__PURE__ */
|
|
5305
|
+
component: /* @__PURE__ */ React88.createElement(import_editor_controls55.PromotionTrigger, { ref: triggerRef, promotionKey: "customCss", trackingData: TRACKING_DATA }),
|
|
5206
5306
|
onClick: () => triggerRef.current?.toggle()
|
|
5207
5307
|
}
|
|
5208
5308
|
}
|
|
@@ -5218,19 +5318,19 @@ var init = () => {
|
|
|
5218
5318
|
options: { overwrite: true }
|
|
5219
5319
|
});
|
|
5220
5320
|
if (!window.elementorPro) {
|
|
5221
|
-
controlsRegistry.register("attributes",
|
|
5222
|
-
controlsRegistry.register("display-conditions",
|
|
5321
|
+
controlsRegistry.register("attributes", import_editor_controls56.AttributesControl, "two-columns");
|
|
5322
|
+
controlsRegistry.register("display-conditions", import_editor_controls56.DisplayConditionsControl, "two-columns");
|
|
5223
5323
|
}
|
|
5224
5324
|
};
|
|
5225
5325
|
|
|
5226
5326
|
// src/controls-registry/element-controls/tabs-control/tabs-control.tsx
|
|
5227
|
-
var
|
|
5228
|
-
var
|
|
5327
|
+
var React89 = __toESM(require("react"));
|
|
5328
|
+
var import_editor_controls58 = require("@elementor/editor-controls");
|
|
5229
5329
|
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
5230
5330
|
var import_editor_props16 = require("@elementor/editor-props");
|
|
5231
|
-
var
|
|
5232
|
-
var
|
|
5233
|
-
var
|
|
5331
|
+
var import_icons25 = require("@elementor/icons");
|
|
5332
|
+
var import_ui41 = require("@elementor/ui");
|
|
5333
|
+
var import_i18n64 = require("@wordpress/i18n");
|
|
5234
5334
|
|
|
5235
5335
|
// src/controls-registry/element-controls/get-element-by-type.ts
|
|
5236
5336
|
var import_editor_elements15 = require("@elementor/editor-elements");
|
|
@@ -5246,14 +5346,14 @@ var getElementByType = (elementId, type) => {
|
|
|
5246
5346
|
};
|
|
5247
5347
|
|
|
5248
5348
|
// src/controls-registry/element-controls/tabs-control/use-actions.ts
|
|
5249
|
-
var
|
|
5349
|
+
var import_editor_controls57 = require("@elementor/editor-controls");
|
|
5250
5350
|
var import_editor_elements16 = require("@elementor/editor-elements");
|
|
5251
5351
|
var import_editor_props15 = require("@elementor/editor-props");
|
|
5252
|
-
var
|
|
5352
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
5253
5353
|
var TAB_ELEMENT_TYPE = "e-tab";
|
|
5254
5354
|
var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
|
|
5255
5355
|
var useActions = () => {
|
|
5256
|
-
const { value, setValue: setDefaultActiveTab } = (0,
|
|
5356
|
+
const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls57.useBoundProp)(import_editor_props15.numberPropTypeUtil);
|
|
5257
5357
|
const defaultActiveTab = value ?? 0;
|
|
5258
5358
|
const duplicateItem = ({
|
|
5259
5359
|
items: items3,
|
|
@@ -5272,7 +5372,7 @@ var useActions = () => {
|
|
|
5272
5372
|
}
|
|
5273
5373
|
(0, import_editor_elements16.duplicateElements)({
|
|
5274
5374
|
elementIds: [tabId, tabContentId],
|
|
5275
|
-
title: (0,
|
|
5375
|
+
title: (0, import_i18n63.__)("Duplicate Tab", "elementor"),
|
|
5276
5376
|
onDuplicateElements: () => {
|
|
5277
5377
|
if (newDefault !== defaultActiveTab) {
|
|
5278
5378
|
setDefaultActiveTab(newDefault, {}, { withHistory: false });
|
|
@@ -5309,7 +5409,7 @@ var useActions = () => {
|
|
|
5309
5409
|
defaultActiveTab
|
|
5310
5410
|
});
|
|
5311
5411
|
(0, import_editor_elements16.moveElements)({
|
|
5312
|
-
title: (0,
|
|
5412
|
+
title: (0, import_i18n63.__)("Reorder Tabs", "elementor"),
|
|
5313
5413
|
moves: [
|
|
5314
5414
|
{
|
|
5315
5415
|
element: movedElement,
|
|
@@ -5343,7 +5443,7 @@ var useActions = () => {
|
|
|
5343
5443
|
defaultActiveTab
|
|
5344
5444
|
});
|
|
5345
5445
|
(0, import_editor_elements16.removeElements)({
|
|
5346
|
-
title: (0,
|
|
5446
|
+
title: (0, import_i18n63.__)("Tabs", "elementor"),
|
|
5347
5447
|
elementIds: items3.flatMap(({ item, index }) => {
|
|
5348
5448
|
const tabId = item.id;
|
|
5349
5449
|
const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
|
|
@@ -5378,7 +5478,7 @@ var useActions = () => {
|
|
|
5378
5478
|
items3.forEach(({ index }) => {
|
|
5379
5479
|
const position = index + 1;
|
|
5380
5480
|
(0, import_editor_elements16.createElements)({
|
|
5381
|
-
title: (0,
|
|
5481
|
+
title: (0, import_i18n63.__)("Tabs", "elementor"),
|
|
5382
5482
|
elements: [
|
|
5383
5483
|
{
|
|
5384
5484
|
container: tabContentArea,
|
|
@@ -5447,7 +5547,7 @@ var calculateDefaultOnDuplicate = ({
|
|
|
5447
5547
|
var TAB_MENU_ELEMENT_TYPE = "e-tabs-menu";
|
|
5448
5548
|
var TAB_CONTENT_AREA_ELEMENT_TYPE = "e-tabs-content-area";
|
|
5449
5549
|
var TabsControl = ({ label }) => {
|
|
5450
|
-
return /* @__PURE__ */
|
|
5550
|
+
return /* @__PURE__ */ React89.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n64.__)("Tabs", "elementor") }, /* @__PURE__ */ React89.createElement(TabsControlContent, { label }));
|
|
5451
5551
|
};
|
|
5452
5552
|
var TabsControlContent = ({ label }) => {
|
|
5453
5553
|
const { element } = useElement();
|
|
@@ -5491,8 +5591,8 @@ var TabsControlContent = ({ label }) => {
|
|
|
5491
5591
|
});
|
|
5492
5592
|
}
|
|
5493
5593
|
};
|
|
5494
|
-
return /* @__PURE__ */
|
|
5495
|
-
|
|
5594
|
+
return /* @__PURE__ */ React89.createElement(
|
|
5595
|
+
import_editor_controls58.Repeater,
|
|
5496
5596
|
{
|
|
5497
5597
|
showToggle: false,
|
|
5498
5598
|
values: repeaterValues,
|
|
@@ -5511,27 +5611,27 @@ var TabsControlContent = ({ label }) => {
|
|
|
5511
5611
|
};
|
|
5512
5612
|
var ItemLabel = ({ value, index }) => {
|
|
5513
5613
|
const elementTitle = value?.title;
|
|
5514
|
-
return /* @__PURE__ */
|
|
5614
|
+
return /* @__PURE__ */ React89.createElement(import_ui41.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React89.createElement("span", null, elementTitle), /* @__PURE__ */ React89.createElement(ItemDefaultTab, { index }));
|
|
5515
5615
|
};
|
|
5516
5616
|
var ItemDefaultTab = ({ index }) => {
|
|
5517
|
-
const { value: defaultItem } = (0,
|
|
5617
|
+
const { value: defaultItem } = (0, import_editor_controls58.useBoundProp)(import_editor_props16.numberPropTypeUtil);
|
|
5518
5618
|
const isDefault = defaultItem === index;
|
|
5519
5619
|
if (!isDefault) {
|
|
5520
5620
|
return null;
|
|
5521
5621
|
}
|
|
5522
|
-
return /* @__PURE__ */
|
|
5622
|
+
return /* @__PURE__ */ React89.createElement(import_ui41.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n64.__)("Default", "elementor") });
|
|
5523
5623
|
};
|
|
5524
5624
|
var ItemContent = ({ value, index }) => {
|
|
5525
5625
|
if (!value.id) {
|
|
5526
5626
|
return null;
|
|
5527
5627
|
}
|
|
5528
|
-
return /* @__PURE__ */
|
|
5628
|
+
return /* @__PURE__ */ React89.createElement(import_ui41.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
5629
|
};
|
|
5530
5630
|
var DefaultTabControl = ({ tabIndex }) => {
|
|
5531
|
-
const { value, setValue } = (0,
|
|
5631
|
+
const { value, setValue } = (0, import_editor_controls58.useBoundProp)(import_editor_props16.numberPropTypeUtil);
|
|
5532
5632
|
const isDefault = value === tabIndex;
|
|
5533
|
-
return /* @__PURE__ */
|
|
5534
|
-
|
|
5633
|
+
return /* @__PURE__ */ React89.createElement(import_ui41.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(
|
|
5634
|
+
import_ui41.Switch,
|
|
5535
5635
|
{
|
|
5536
5636
|
size: "small",
|
|
5537
5637
|
checked: isDefault,
|
|
@@ -5548,8 +5648,8 @@ var DefaultTabControl = ({ tabIndex }) => {
|
|
|
5548
5648
|
var TabLabelControl = ({ elementId }) => {
|
|
5549
5649
|
const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
|
|
5550
5650
|
const label = editorSettings?.title ?? "";
|
|
5551
|
-
return /* @__PURE__ */
|
|
5552
|
-
|
|
5651
|
+
return /* @__PURE__ */ React89.createElement(import_ui41.Stack, { gap: 1 }, /* @__PURE__ */ React89.createElement(import_editor_controls58.ControlFormLabel, null, (0, import_i18n64.__)("Tab name", "elementor")), /* @__PURE__ */ React89.createElement(
|
|
5652
|
+
import_ui41.TextField,
|
|
5553
5653
|
{
|
|
5554
5654
|
size: "tiny",
|
|
5555
5655
|
value: label,
|
|
@@ -5569,22 +5669,22 @@ var ConditionalTooltip = ({
|
|
|
5569
5669
|
if (!showTooltip) {
|
|
5570
5670
|
return children;
|
|
5571
5671
|
}
|
|
5572
|
-
return /* @__PURE__ */
|
|
5573
|
-
|
|
5672
|
+
return /* @__PURE__ */ React89.createElement(
|
|
5673
|
+
import_ui41.Infotip,
|
|
5574
5674
|
{
|
|
5575
5675
|
arrow: false,
|
|
5576
|
-
content: /* @__PURE__ */
|
|
5577
|
-
|
|
5676
|
+
content: /* @__PURE__ */ React89.createElement(
|
|
5677
|
+
import_ui41.Alert,
|
|
5578
5678
|
{
|
|
5579
5679
|
color: "secondary",
|
|
5580
|
-
icon: /* @__PURE__ */
|
|
5680
|
+
icon: /* @__PURE__ */ React89.createElement(import_icons25.InfoCircleFilledIcon, { fontSize: "tiny" }),
|
|
5581
5681
|
size: "small",
|
|
5582
5682
|
sx: { width: 288 }
|
|
5583
5683
|
},
|
|
5584
|
-
/* @__PURE__ */
|
|
5684
|
+
/* @__PURE__ */ React89.createElement(import_ui41.Typography, { variant: "body2" }, (0, import_i18n64.__)("To change the default tab, simply set another tab as default.", "elementor"))
|
|
5585
5685
|
)
|
|
5586
5686
|
},
|
|
5587
|
-
/* @__PURE__ */
|
|
5687
|
+
/* @__PURE__ */ React89.createElement("span", null, children)
|
|
5588
5688
|
);
|
|
5589
5689
|
};
|
|
5590
5690
|
|
|
@@ -5602,21 +5702,21 @@ var registerElementControls = () => {
|
|
|
5602
5702
|
|
|
5603
5703
|
// src/dynamics/init.ts
|
|
5604
5704
|
var import_editor_canvas3 = require("@elementor/editor-canvas");
|
|
5605
|
-
var
|
|
5705
|
+
var import_editor_controls65 = require("@elementor/editor-controls");
|
|
5606
5706
|
var import_menus2 = require("@elementor/menus");
|
|
5607
5707
|
|
|
5608
5708
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
5609
|
-
var
|
|
5610
|
-
var
|
|
5709
|
+
var React90 = __toESM(require("react"));
|
|
5710
|
+
var import_editor_controls60 = require("@elementor/editor-controls");
|
|
5611
5711
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
5612
|
-
var
|
|
5712
|
+
var import_icons26 = require("@elementor/icons");
|
|
5613
5713
|
|
|
5614
5714
|
// src/dynamics/hooks/use-dynamic-tag.ts
|
|
5615
5715
|
var import_react43 = require("react");
|
|
5616
5716
|
|
|
5617
5717
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
5618
5718
|
var import_react42 = require("react");
|
|
5619
|
-
var
|
|
5719
|
+
var import_editor_controls59 = require("@elementor/editor-controls");
|
|
5620
5720
|
|
|
5621
5721
|
// src/dynamics/sync/get-atomic-dynamic-tags.ts
|
|
5622
5722
|
var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
|
|
@@ -5700,7 +5800,7 @@ var useAllPropDynamicTags = () => {
|
|
|
5700
5800
|
};
|
|
5701
5801
|
var usePropDynamicTagsInternal = (filterByLicense2) => {
|
|
5702
5802
|
let categories = [];
|
|
5703
|
-
const { propType } = (0,
|
|
5803
|
+
const { propType } = (0, import_editor_controls59.useBoundProp)();
|
|
5704
5804
|
if (propType) {
|
|
5705
5805
|
const propDynamicType = getDynamicPropType(propType);
|
|
5706
5806
|
categories = propDynamicType?.settings.categories || [];
|
|
@@ -5744,29 +5844,29 @@ var useDynamicTag = (tagName) => {
|
|
|
5744
5844
|
};
|
|
5745
5845
|
|
|
5746
5846
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
5747
|
-
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */
|
|
5847
|
+
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React90.createElement(import_icons26.DatabaseIcon, { fontSize: "tiny" });
|
|
5748
5848
|
var BackgroundControlDynamicTagLabel = ({ value }) => {
|
|
5749
|
-
const context = (0,
|
|
5750
|
-
return /* @__PURE__ */
|
|
5849
|
+
const context = (0, import_editor_controls60.useBoundProp)(import_editor_props18.backgroundImageOverlayPropTypeUtil);
|
|
5850
|
+
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
5851
|
};
|
|
5752
5852
|
var Wrapper2 = ({ rawValue }) => {
|
|
5753
|
-
const { propType } = (0,
|
|
5853
|
+
const { propType } = (0, import_editor_controls60.useBoundProp)();
|
|
5754
5854
|
const imageOverlayPropType = propType.prop_types["background-image-overlay"];
|
|
5755
|
-
return /* @__PURE__ */
|
|
5855
|
+
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
5856
|
};
|
|
5757
5857
|
var Content = ({ rawValue }) => {
|
|
5758
5858
|
const src = rawValue.value.src;
|
|
5759
5859
|
const dynamicTag = useDynamicTag(src.value.name || "");
|
|
5760
|
-
return /* @__PURE__ */
|
|
5860
|
+
return /* @__PURE__ */ React90.createElement(React90.Fragment, null, dynamicTag?.label);
|
|
5761
5861
|
};
|
|
5762
5862
|
|
|
5763
5863
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
5764
|
-
var
|
|
5765
|
-
var
|
|
5864
|
+
var React94 = __toESM(require("react"));
|
|
5865
|
+
var import_editor_controls63 = require("@elementor/editor-controls");
|
|
5766
5866
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
5767
|
-
var
|
|
5768
|
-
var
|
|
5769
|
-
var
|
|
5867
|
+
var import_icons28 = require("@elementor/icons");
|
|
5868
|
+
var import_ui43 = require("@elementor/ui");
|
|
5869
|
+
var import_i18n66 = require("@wordpress/i18n");
|
|
5770
5870
|
|
|
5771
5871
|
// src/hooks/use-persist-dynamic-value.ts
|
|
5772
5872
|
var import_session10 = require("@elementor/session");
|
|
@@ -5777,11 +5877,11 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
5777
5877
|
};
|
|
5778
5878
|
|
|
5779
5879
|
// src/dynamics/dynamic-control.tsx
|
|
5780
|
-
var
|
|
5781
|
-
var
|
|
5880
|
+
var React92 = __toESM(require("react"));
|
|
5881
|
+
var import_editor_controls61 = require("@elementor/editor-controls");
|
|
5782
5882
|
|
|
5783
5883
|
// src/dynamics/components/dynamic-conditional-control.tsx
|
|
5784
|
-
var
|
|
5884
|
+
var React91 = __toESM(require("react"));
|
|
5785
5885
|
var import_react44 = require("react");
|
|
5786
5886
|
var import_editor_props19 = require("@elementor/editor-props");
|
|
5787
5887
|
var DynamicConditionalControl = ({
|
|
@@ -5823,15 +5923,15 @@ var DynamicConditionalControl = ({
|
|
|
5823
5923
|
return { ...defaults, ...convertedSettings };
|
|
5824
5924
|
}, [defaults, convertedSettings]);
|
|
5825
5925
|
if (!propType?.dependencies?.terms.length) {
|
|
5826
|
-
return /* @__PURE__ */
|
|
5926
|
+
return /* @__PURE__ */ React91.createElement(React91.Fragment, null, children);
|
|
5827
5927
|
}
|
|
5828
5928
|
const isHidden = !(0, import_editor_props19.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
|
|
5829
|
-
return isHidden ? null : /* @__PURE__ */
|
|
5929
|
+
return isHidden ? null : /* @__PURE__ */ React91.createElement(React91.Fragment, null, children);
|
|
5830
5930
|
};
|
|
5831
5931
|
|
|
5832
5932
|
// src/dynamics/dynamic-control.tsx
|
|
5833
5933
|
var DynamicControl = ({ bind, children }) => {
|
|
5834
|
-
const { value, setValue } = (0,
|
|
5934
|
+
const { value, setValue } = (0, import_editor_controls61.useBoundProp)(dynamicPropTypeUtil);
|
|
5835
5935
|
const { name = "", group = "", settings } = value ?? {};
|
|
5836
5936
|
const dynamicTag = useDynamicTag(name);
|
|
5837
5937
|
if (!dynamicTag) {
|
|
@@ -5851,7 +5951,7 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
5851
5951
|
});
|
|
5852
5952
|
};
|
|
5853
5953
|
const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
|
|
5854
|
-
return /* @__PURE__ */
|
|
5954
|
+
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
5955
|
DynamicConditionalControl,
|
|
5856
5956
|
{
|
|
5857
5957
|
propType: dynamicPropType,
|
|
@@ -5863,13 +5963,13 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
5863
5963
|
};
|
|
5864
5964
|
|
|
5865
5965
|
// src/dynamics/components/dynamic-selection.tsx
|
|
5866
|
-
var
|
|
5966
|
+
var React93 = __toESM(require("react"));
|
|
5867
5967
|
var import_react45 = require("react");
|
|
5868
|
-
var
|
|
5968
|
+
var import_editor_controls62 = require("@elementor/editor-controls");
|
|
5869
5969
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
5870
|
-
var
|
|
5871
|
-
var
|
|
5872
|
-
var
|
|
5970
|
+
var import_icons27 = require("@elementor/icons");
|
|
5971
|
+
var import_ui42 = require("@elementor/ui");
|
|
5972
|
+
var import_i18n65 = require("@wordpress/i18n");
|
|
5873
5973
|
var SIZE2 = "tiny";
|
|
5874
5974
|
var PROMO_TEXT_WIDTH = 170;
|
|
5875
5975
|
var PRO_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-modal/";
|
|
@@ -5877,18 +5977,18 @@ var RENEW_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-renew
|
|
|
5877
5977
|
var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
5878
5978
|
const [searchValue, setSearchValue] = (0, import_react45.useState)("");
|
|
5879
5979
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
5880
|
-
const theme = (0,
|
|
5881
|
-
const { value: anyValue } = (0,
|
|
5882
|
-
const { bind, value: dynamicValue, setValue } = (0,
|
|
5980
|
+
const theme = (0, import_ui42.useTheme)();
|
|
5981
|
+
const { value: anyValue } = (0, import_editor_controls62.useBoundProp)();
|
|
5982
|
+
const { bind, value: dynamicValue, setValue } = (0, import_editor_controls62.useBoundProp)(dynamicPropTypeUtil);
|
|
5883
5983
|
const [, updatePropValueHistory] = usePersistDynamicValue(bind);
|
|
5884
5984
|
const isCurrentValueDynamic = !!dynamicValue;
|
|
5885
5985
|
const options13 = useFilteredOptions(searchValue);
|
|
5886
5986
|
const hasNoDynamicTags = !options13.length && !searchValue.trim();
|
|
5887
5987
|
(0, import_react45.useEffect)(() => {
|
|
5888
5988
|
if (hasNoDynamicTags) {
|
|
5889
|
-
(0,
|
|
5989
|
+
(0, import_editor_controls62.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
5890
5990
|
} else if (expired) {
|
|
5891
|
-
(0,
|
|
5991
|
+
(0, import_editor_controls62.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
5892
5992
|
}
|
|
5893
5993
|
}, [hasNoDynamicTags, expired]);
|
|
5894
5994
|
const handleSearch = (value) => {
|
|
@@ -5916,19 +6016,19 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
5916
6016
|
]);
|
|
5917
6017
|
const getPopOverContent = () => {
|
|
5918
6018
|
if (hasNoDynamicTags) {
|
|
5919
|
-
return /* @__PURE__ */
|
|
6019
|
+
return /* @__PURE__ */ React93.createElement(NoDynamicTags, null);
|
|
5920
6020
|
}
|
|
5921
6021
|
if (expired) {
|
|
5922
|
-
return /* @__PURE__ */
|
|
6022
|
+
return /* @__PURE__ */ React93.createElement(ExpiredDynamicTags, null);
|
|
5923
6023
|
}
|
|
5924
|
-
return /* @__PURE__ */
|
|
6024
|
+
return /* @__PURE__ */ React93.createElement(import_react45.Fragment, null, /* @__PURE__ */ React93.createElement(
|
|
5925
6025
|
import_editor_ui9.SearchField,
|
|
5926
6026
|
{
|
|
5927
6027
|
value: searchValue,
|
|
5928
6028
|
onSearch: handleSearch,
|
|
5929
|
-
placeholder: (0,
|
|
6029
|
+
placeholder: (0, import_i18n65.__)("Search dynamic tags\u2026", "elementor")
|
|
5930
6030
|
}
|
|
5931
|
-
), /* @__PURE__ */
|
|
6031
|
+
), /* @__PURE__ */ React93.createElement(import_ui42.Divider, null), /* @__PURE__ */ React93.createElement(
|
|
5932
6032
|
import_editor_ui9.PopoverMenuList,
|
|
5933
6033
|
{
|
|
5934
6034
|
items: virtualizedItems,
|
|
@@ -5936,21 +6036,21 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
5936
6036
|
onClose: closePopover,
|
|
5937
6037
|
selectedValue: dynamicValue?.name,
|
|
5938
6038
|
itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
|
|
5939
|
-
noResultsComponent: /* @__PURE__ */
|
|
6039
|
+
noResultsComponent: /* @__PURE__ */ React93.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
|
|
5940
6040
|
}
|
|
5941
6041
|
));
|
|
5942
6042
|
};
|
|
5943
|
-
return /* @__PURE__ */
|
|
6043
|
+
return /* @__PURE__ */ React93.createElement(import_editor_ui9.SectionPopoverBody, { "aria-label": (0, import_i18n65.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React93.createElement(
|
|
5944
6044
|
import_editor_ui9.PopoverHeader,
|
|
5945
6045
|
{
|
|
5946
|
-
title: (0,
|
|
6046
|
+
title: (0, import_i18n65.__)("Dynamic tags", "elementor"),
|
|
5947
6047
|
onClose: closePopover,
|
|
5948
|
-
icon: /* @__PURE__ */
|
|
6048
|
+
icon: /* @__PURE__ */ React93.createElement(import_icons27.DatabaseIcon, { fontSize: SIZE2 })
|
|
5949
6049
|
}
|
|
5950
6050
|
), getPopOverContent());
|
|
5951
6051
|
};
|
|
5952
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
5953
|
-
|
|
6052
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React93.createElement(
|
|
6053
|
+
import_ui42.Stack,
|
|
5954
6054
|
{
|
|
5955
6055
|
gap: 1,
|
|
5956
6056
|
alignItems: "center",
|
|
@@ -5960,12 +6060,12 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React91.createElem
|
|
|
5960
6060
|
color: "text.secondary",
|
|
5961
6061
|
sx: { pb: 3.5 }
|
|
5962
6062
|
},
|
|
5963
|
-
/* @__PURE__ */
|
|
5964
|
-
/* @__PURE__ */
|
|
5965
|
-
/* @__PURE__ */
|
|
6063
|
+
/* @__PURE__ */ React93.createElement(import_icons27.DatabaseIcon, { fontSize: "large" }),
|
|
6064
|
+
/* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React93.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
6065
|
+
/* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n65.__)("Try something else.", "elementor"), /* @__PURE__ */ React93.createElement(import_ui42.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n65.__)("Clear & try again", "elementor")))
|
|
5966
6066
|
);
|
|
5967
|
-
var NoDynamicTags = () => /* @__PURE__ */
|
|
5968
|
-
|
|
6067
|
+
var NoDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui42.Divider, null), /* @__PURE__ */ React93.createElement(
|
|
6068
|
+
import_ui42.Stack,
|
|
5969
6069
|
{
|
|
5970
6070
|
gap: 1,
|
|
5971
6071
|
alignItems: "center",
|
|
@@ -5975,20 +6075,20 @@ var NoDynamicTags = () => /* @__PURE__ */ React91.createElement(React91.Fragment
|
|
|
5975
6075
|
color: "text.secondary",
|
|
5976
6076
|
sx: { pb: 3.5 }
|
|
5977
6077
|
},
|
|
5978
|
-
/* @__PURE__ */
|
|
5979
|
-
/* @__PURE__ */
|
|
5980
|
-
/* @__PURE__ */
|
|
5981
|
-
/* @__PURE__ */
|
|
6078
|
+
/* @__PURE__ */ React93.createElement(import_icons27.DatabaseIcon, { fontSize: "large" }),
|
|
6079
|
+
/* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Streamline your workflow with dynamic tags", "elementor")),
|
|
6080
|
+
/* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n65.__)("Upgrade now to display your content dynamically.", "elementor")),
|
|
6081
|
+
/* @__PURE__ */ React93.createElement(
|
|
5982
6082
|
import_editor_ui9.CtaButton,
|
|
5983
6083
|
{
|
|
5984
6084
|
size: "small",
|
|
5985
6085
|
href: PRO_DYNAMIC_TAGS_URL,
|
|
5986
|
-
onClick: () => (0,
|
|
6086
|
+
onClick: () => (0, import_editor_controls62.trackUpgradePromotionClick)({ target_name: "dynamic_tags" })
|
|
5987
6087
|
}
|
|
5988
6088
|
)
|
|
5989
6089
|
));
|
|
5990
|
-
var ExpiredDynamicTags = () => /* @__PURE__ */
|
|
5991
|
-
|
|
6090
|
+
var ExpiredDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui42.Divider, null), /* @__PURE__ */ React93.createElement(
|
|
6091
|
+
import_ui42.Stack,
|
|
5992
6092
|
{
|
|
5993
6093
|
gap: 1,
|
|
5994
6094
|
alignItems: "center",
|
|
@@ -5998,16 +6098,16 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React91.createElement(React91.Fra
|
|
|
5998
6098
|
color: "text.secondary",
|
|
5999
6099
|
sx: { pb: 3.5 }
|
|
6000
6100
|
},
|
|
6001
|
-
/* @__PURE__ */
|
|
6002
|
-
/* @__PURE__ */
|
|
6003
|
-
/* @__PURE__ */
|
|
6004
|
-
/* @__PURE__ */
|
|
6101
|
+
/* @__PURE__ */ React93.createElement(import_icons27.DatabaseIcon, { fontSize: "large" }),
|
|
6102
|
+
/* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Unlock your Dynamic tags again", "elementor")),
|
|
6103
|
+
/* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n65.__)("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")),
|
|
6104
|
+
/* @__PURE__ */ React93.createElement(
|
|
6005
6105
|
import_editor_ui9.CtaButton,
|
|
6006
6106
|
{
|
|
6007
6107
|
size: "small",
|
|
6008
6108
|
href: RENEW_DYNAMIC_TAGS_URL,
|
|
6009
|
-
onClick: () => (0,
|
|
6010
|
-
children: (0,
|
|
6109
|
+
onClick: () => (0, import_editor_controls62.trackUpgradePromotionClick)({ target_name: "dynamic_tags" }),
|
|
6110
|
+
children: (0, import_i18n65.__)("Renew Now", "elementor")
|
|
6011
6111
|
}
|
|
6012
6112
|
)
|
|
6013
6113
|
));
|
|
@@ -6031,8 +6131,8 @@ var useFilteredOptions = (searchValue) => {
|
|
|
6031
6131
|
var SIZE3 = "tiny";
|
|
6032
6132
|
var tagsWithoutTabs = ["popup"];
|
|
6033
6133
|
var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
6034
|
-
const { setValue: setAnyValue, propType } = (0,
|
|
6035
|
-
const { bind, value } = (0,
|
|
6134
|
+
const { setValue: setAnyValue, propType } = (0, import_editor_controls63.useBoundProp)();
|
|
6135
|
+
const { bind, value } = (0, import_editor_controls63.useBoundProp)(dynamicPropTypeUtil);
|
|
6036
6136
|
const { expired: readonly } = useLicenseConfig();
|
|
6037
6137
|
const originalPropType = createTopLevelObjectType({
|
|
6038
6138
|
schema: {
|
|
@@ -6040,11 +6140,11 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6040
6140
|
}
|
|
6041
6141
|
});
|
|
6042
6142
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
6043
|
-
const selectionPopoverState = (0,
|
|
6143
|
+
const selectionPopoverState = (0, import_ui43.usePopupState)({ variant: "popover" });
|
|
6044
6144
|
const { name: tagName = "" } = value;
|
|
6045
6145
|
const dynamicTag = useDynamicTag(tagName);
|
|
6046
6146
|
if (!isDynamicTagSupported(tagName) && OriginalControl) {
|
|
6047
|
-
return /* @__PURE__ */
|
|
6147
|
+
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
6148
|
}
|
|
6049
6149
|
const removeDynamicTag = () => {
|
|
6050
6150
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -6052,26 +6152,26 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6052
6152
|
if (!dynamicTag) {
|
|
6053
6153
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
6054
6154
|
}
|
|
6055
|
-
return /* @__PURE__ */
|
|
6056
|
-
|
|
6155
|
+
return /* @__PURE__ */ React94.createElement(import_ui43.Box, null, /* @__PURE__ */ React94.createElement(
|
|
6156
|
+
import_ui43.UnstableTag,
|
|
6057
6157
|
{
|
|
6058
6158
|
fullWidth: true,
|
|
6059
6159
|
showActionsOnHover: true,
|
|
6060
6160
|
label: dynamicTag.label,
|
|
6061
|
-
startIcon: /* @__PURE__ */
|
|
6062
|
-
...(0,
|
|
6063
|
-
actions: /* @__PURE__ */
|
|
6064
|
-
|
|
6161
|
+
startIcon: /* @__PURE__ */ React94.createElement(import_icons28.DatabaseIcon, { fontSize: SIZE3 }),
|
|
6162
|
+
...(0, import_ui43.bindTrigger)(selectionPopoverState),
|
|
6163
|
+
actions: /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(DynamicSettingsPopover, { dynamicTag, disabled: readonly }), /* @__PURE__ */ React94.createElement(
|
|
6164
|
+
import_ui43.IconButton,
|
|
6065
6165
|
{
|
|
6066
6166
|
size: SIZE3,
|
|
6067
6167
|
onClick: removeDynamicTag,
|
|
6068
|
-
"aria-label": (0,
|
|
6168
|
+
"aria-label": (0, import_i18n66.__)("Remove dynamic value", "elementor")
|
|
6069
6169
|
},
|
|
6070
|
-
/* @__PURE__ */
|
|
6170
|
+
/* @__PURE__ */ React94.createElement(import_icons28.XIcon, { fontSize: SIZE3 })
|
|
6071
6171
|
))
|
|
6072
6172
|
}
|
|
6073
|
-
), /* @__PURE__ */
|
|
6074
|
-
|
|
6173
|
+
), /* @__PURE__ */ React94.createElement(
|
|
6174
|
+
import_ui43.Popover,
|
|
6075
6175
|
{
|
|
6076
6176
|
disablePortal: true,
|
|
6077
6177
|
disableScrollLock: true,
|
|
@@ -6080,31 +6180,31 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6080
6180
|
PaperProps: {
|
|
6081
6181
|
sx: { my: 1 }
|
|
6082
6182
|
},
|
|
6083
|
-
...(0,
|
|
6183
|
+
...(0, import_ui43.bindPopover)(selectionPopoverState)
|
|
6084
6184
|
},
|
|
6085
|
-
/* @__PURE__ */
|
|
6185
|
+
/* @__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
6186
|
));
|
|
6087
6187
|
};
|
|
6088
6188
|
var DynamicSettingsPopover = ({
|
|
6089
6189
|
dynamicTag,
|
|
6090
6190
|
disabled = false
|
|
6091
6191
|
}) => {
|
|
6092
|
-
const popupState = (0,
|
|
6192
|
+
const popupState = (0, import_ui43.usePopupState)({ variant: "popover" });
|
|
6093
6193
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
6094
6194
|
if (!hasDynamicSettings) {
|
|
6095
6195
|
return null;
|
|
6096
6196
|
}
|
|
6097
|
-
return /* @__PURE__ */
|
|
6098
|
-
|
|
6197
|
+
return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(
|
|
6198
|
+
import_ui43.IconButton,
|
|
6099
6199
|
{
|
|
6100
6200
|
size: SIZE3,
|
|
6101
6201
|
disabled,
|
|
6102
|
-
...!disabled && (0,
|
|
6103
|
-
"aria-label": (0,
|
|
6202
|
+
...!disabled && (0, import_ui43.bindTrigger)(popupState),
|
|
6203
|
+
"aria-label": (0, import_i18n66.__)("Dynamic settings", "elementor")
|
|
6104
6204
|
},
|
|
6105
|
-
/* @__PURE__ */
|
|
6106
|
-
), /* @__PURE__ */
|
|
6107
|
-
|
|
6205
|
+
/* @__PURE__ */ React94.createElement(import_icons28.SettingsIcon, { fontSize: SIZE3 })
|
|
6206
|
+
), /* @__PURE__ */ React94.createElement(
|
|
6207
|
+
import_ui43.Popover,
|
|
6108
6208
|
{
|
|
6109
6209
|
disablePortal: true,
|
|
6110
6210
|
disableScrollLock: true,
|
|
@@ -6113,45 +6213,45 @@ var DynamicSettingsPopover = ({
|
|
|
6113
6213
|
PaperProps: {
|
|
6114
6214
|
sx: { my: 1 }
|
|
6115
6215
|
},
|
|
6116
|
-
...(0,
|
|
6216
|
+
...(0, import_ui43.bindPopover)(popupState)
|
|
6117
6217
|
},
|
|
6118
|
-
/* @__PURE__ */
|
|
6218
|
+
/* @__PURE__ */ React94.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n66.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React94.createElement(
|
|
6119
6219
|
import_editor_ui10.PopoverHeader,
|
|
6120
6220
|
{
|
|
6121
6221
|
title: dynamicTag.label,
|
|
6122
6222
|
onClose: popupState.close,
|
|
6123
|
-
icon: /* @__PURE__ */
|
|
6223
|
+
icon: /* @__PURE__ */ React94.createElement(import_icons28.DatabaseIcon, { fontSize: SIZE3 })
|
|
6124
6224
|
}
|
|
6125
|
-
), /* @__PURE__ */
|
|
6225
|
+
), /* @__PURE__ */ React94.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
|
|
6126
6226
|
));
|
|
6127
6227
|
};
|
|
6128
6228
|
var DynamicSettings = ({ controls, tagName }) => {
|
|
6129
6229
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
6130
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
6230
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui43.useTabs)(0);
|
|
6131
6231
|
if (!tabs.length) {
|
|
6132
6232
|
return null;
|
|
6133
6233
|
}
|
|
6134
6234
|
if (tagsWithoutTabs.includes(tagName)) {
|
|
6135
6235
|
const singleTab = tabs[0];
|
|
6136
|
-
return /* @__PURE__ */
|
|
6236
|
+
return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(import_ui43.Divider, null), /* @__PURE__ */ React94.createElement(ControlsItemsStack, { items: singleTab.value.items }));
|
|
6137
6237
|
}
|
|
6138
|
-
return /* @__PURE__ */
|
|
6139
|
-
|
|
6238
|
+
return /* @__PURE__ */ React94.createElement(React94.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React94.createElement(import_ui43.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React94.createElement(
|
|
6239
|
+
import_ui43.Tab,
|
|
6140
6240
|
{
|
|
6141
6241
|
key: index,
|
|
6142
6242
|
label: value.label,
|
|
6143
6243
|
sx: { px: 1, py: 0.5 },
|
|
6144
6244
|
...getTabProps(index)
|
|
6145
6245
|
}
|
|
6146
|
-
))), /* @__PURE__ */
|
|
6147
|
-
return /* @__PURE__ */
|
|
6148
|
-
|
|
6246
|
+
))), /* @__PURE__ */ React94.createElement(import_ui43.Divider, null), tabs.map(({ value }, index) => {
|
|
6247
|
+
return /* @__PURE__ */ React94.createElement(
|
|
6248
|
+
import_ui43.TabPanel,
|
|
6149
6249
|
{
|
|
6150
6250
|
key: index,
|
|
6151
6251
|
sx: { flexGrow: 1, py: 0, overflowY: "auto" },
|
|
6152
6252
|
...getTabPanelProps(index)
|
|
6153
6253
|
},
|
|
6154
|
-
/* @__PURE__ */
|
|
6254
|
+
/* @__PURE__ */ React94.createElement(ControlsItemsStack, { items: value.items })
|
|
6155
6255
|
);
|
|
6156
6256
|
}));
|
|
6157
6257
|
};
|
|
@@ -6193,11 +6293,11 @@ var Control2 = ({ control }) => {
|
|
|
6193
6293
|
display: "grid",
|
|
6194
6294
|
gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
|
|
6195
6295
|
} : {};
|
|
6196
|
-
return /* @__PURE__ */
|
|
6296
|
+
return /* @__PURE__ */ React94.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React94.createElement(import_ui43.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React94.createElement(import_ui43.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(import_editor_controls63.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React94.createElement(import_ui43.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(Control, { type: control.type, props: controlProps }))));
|
|
6197
6297
|
};
|
|
6198
6298
|
function ControlsItemsStack({ items: items3 }) {
|
|
6199
|
-
return /* @__PURE__ */
|
|
6200
|
-
(item) => item.type === "control" ? /* @__PURE__ */
|
|
6299
|
+
return /* @__PURE__ */ React94.createElement(import_ui43.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
|
|
6300
|
+
(item) => item.type === "control" ? /* @__PURE__ */ React94.createElement(Control2, { key: item.value.bind, control: item.value }) : null
|
|
6201
6301
|
));
|
|
6202
6302
|
}
|
|
6203
6303
|
|
|
@@ -6250,34 +6350,34 @@ function getDynamicValue(name, settings) {
|
|
|
6250
6350
|
}
|
|
6251
6351
|
|
|
6252
6352
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
6253
|
-
var
|
|
6254
|
-
var
|
|
6255
|
-
var
|
|
6256
|
-
var
|
|
6353
|
+
var React95 = __toESM(require("react"));
|
|
6354
|
+
var import_editor_controls64 = require("@elementor/editor-controls");
|
|
6355
|
+
var import_icons29 = require("@elementor/icons");
|
|
6356
|
+
var import_i18n67 = require("@wordpress/i18n");
|
|
6257
6357
|
var usePropDynamicAction = () => {
|
|
6258
|
-
const { propType } = (0,
|
|
6358
|
+
const { propType } = (0, import_editor_controls64.useBoundProp)();
|
|
6259
6359
|
const visible = !!propType && supportsDynamic(propType);
|
|
6260
6360
|
return {
|
|
6261
6361
|
visible,
|
|
6262
|
-
icon:
|
|
6263
|
-
title: (0,
|
|
6264
|
-
content: ({ close }) => /* @__PURE__ */
|
|
6362
|
+
icon: import_icons29.DatabaseIcon,
|
|
6363
|
+
title: (0, import_i18n67.__)("Dynamic tags", "elementor"),
|
|
6364
|
+
content: ({ close }) => /* @__PURE__ */ React95.createElement(DynamicSelection, { close })
|
|
6265
6365
|
};
|
|
6266
6366
|
};
|
|
6267
6367
|
|
|
6268
6368
|
// src/dynamics/init.ts
|
|
6269
6369
|
var { registerPopoverAction } = import_menus2.controlActionsMenu;
|
|
6270
6370
|
var init2 = () => {
|
|
6271
|
-
(0,
|
|
6371
|
+
(0, import_editor_controls65.registerControlReplacement)({
|
|
6272
6372
|
component: DynamicSelectionControl,
|
|
6273
6373
|
condition: ({ value }) => isDynamicPropValue(value)
|
|
6274
6374
|
});
|
|
6275
|
-
(0,
|
|
6375
|
+
(0, import_editor_controls65.injectIntoRepeaterItemLabel)({
|
|
6276
6376
|
id: "dynamic-background-image",
|
|
6277
6377
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6278
6378
|
component: BackgroundControlDynamicTagLabel
|
|
6279
6379
|
});
|
|
6280
|
-
(0,
|
|
6380
|
+
(0, import_editor_controls65.injectIntoRepeaterItemIcon)({
|
|
6281
6381
|
id: "dynamic-background-image",
|
|
6282
6382
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6283
6383
|
component: BackgroundControlDynamicTagIcon
|
|
@@ -6292,11 +6392,11 @@ var init2 = () => {
|
|
|
6292
6392
|
};
|
|
6293
6393
|
|
|
6294
6394
|
// src/reset-style-props.tsx
|
|
6295
|
-
var
|
|
6395
|
+
var import_editor_controls66 = require("@elementor/editor-controls");
|
|
6296
6396
|
var import_editor_variables2 = require("@elementor/editor-variables");
|
|
6297
|
-
var
|
|
6397
|
+
var import_icons30 = require("@elementor/icons");
|
|
6298
6398
|
var import_menus3 = require("@elementor/menus");
|
|
6299
|
-
var
|
|
6399
|
+
var import_i18n68 = require("@wordpress/i18n");
|
|
6300
6400
|
|
|
6301
6401
|
// src/utils/is-equal.ts
|
|
6302
6402
|
function isEqual(a, b) {
|
|
@@ -6352,7 +6452,7 @@ function initResetStyleProps() {
|
|
|
6352
6452
|
}
|
|
6353
6453
|
function useResetStyleValueProps() {
|
|
6354
6454
|
const isStyle = useIsStyle();
|
|
6355
|
-
const { value, resetValue, propType } = (0,
|
|
6455
|
+
const { value, resetValue, propType } = (0, import_editor_controls66.useBoundProp)();
|
|
6356
6456
|
const hasValue = value !== null && value !== void 0;
|
|
6357
6457
|
const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
|
|
6358
6458
|
const isRequired = !!propType.settings?.required;
|
|
@@ -6372,33 +6472,33 @@ function useResetStyleValueProps() {
|
|
|
6372
6472
|
const visible = calculateVisibility();
|
|
6373
6473
|
return {
|
|
6374
6474
|
visible,
|
|
6375
|
-
title: (0,
|
|
6376
|
-
icon:
|
|
6475
|
+
title: (0, import_i18n68.__)("Clear", "elementor"),
|
|
6476
|
+
icon: import_icons30.BrushBigIcon,
|
|
6377
6477
|
onClick: () => resetValue()
|
|
6378
6478
|
};
|
|
6379
6479
|
}
|
|
6380
6480
|
|
|
6381
6481
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
6382
|
-
var
|
|
6383
|
-
var
|
|
6482
|
+
var React101 = __toESM(require("react"));
|
|
6483
|
+
var import_editor_controls67 = require("@elementor/editor-controls");
|
|
6384
6484
|
var import_editor_props21 = require("@elementor/editor-props");
|
|
6385
6485
|
var import_editor_styles_repository17 = require("@elementor/editor-styles-repository");
|
|
6386
|
-
var
|
|
6486
|
+
var import_i18n72 = require("@wordpress/i18n");
|
|
6387
6487
|
|
|
6388
6488
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
6389
|
-
var
|
|
6489
|
+
var React100 = __toESM(require("react"));
|
|
6390
6490
|
var import_react47 = require("react");
|
|
6391
6491
|
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
6392
6492
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
6393
|
-
var
|
|
6394
|
-
var
|
|
6493
|
+
var import_ui48 = require("@elementor/ui");
|
|
6494
|
+
var import_i18n71 = require("@wordpress/i18n");
|
|
6395
6495
|
|
|
6396
6496
|
// src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
|
|
6397
6497
|
var import_react46 = require("react");
|
|
6398
6498
|
var import_editor_canvas4 = require("@elementor/editor-canvas");
|
|
6399
6499
|
var import_editor_styles8 = require("@elementor/editor-styles");
|
|
6400
6500
|
var import_editor_styles_repository15 = require("@elementor/editor-styles-repository");
|
|
6401
|
-
var
|
|
6501
|
+
var import_i18n69 = require("@wordpress/i18n");
|
|
6402
6502
|
var MAXIMUM_ITEMS = 2;
|
|
6403
6503
|
var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
6404
6504
|
const [items3, setItems] = (0, import_react46.useState)([]);
|
|
@@ -6409,7 +6509,7 @@ var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
|
6409
6509
|
);
|
|
6410
6510
|
const validItems = normalizedItems.map((item) => ({
|
|
6411
6511
|
...item,
|
|
6412
|
-
displayLabel: import_editor_styles_repository15.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0,
|
|
6512
|
+
displayLabel: import_editor_styles_repository15.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n69.__)("Base", "elementor")
|
|
6413
6513
|
})).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
|
|
6414
6514
|
setItems(validItems);
|
|
6415
6515
|
})();
|
|
@@ -6466,20 +6566,20 @@ var getTransformedValue = async (item, bind, resolve) => {
|
|
|
6466
6566
|
};
|
|
6467
6567
|
|
|
6468
6568
|
// src/styles-inheritance/components/infotip/breakpoint-icon.tsx
|
|
6469
|
-
var
|
|
6569
|
+
var React96 = __toESM(require("react"));
|
|
6470
6570
|
var import_editor_responsive4 = require("@elementor/editor-responsive");
|
|
6471
|
-
var
|
|
6472
|
-
var
|
|
6571
|
+
var import_icons31 = require("@elementor/icons");
|
|
6572
|
+
var import_ui44 = require("@elementor/ui");
|
|
6473
6573
|
var SIZE4 = "tiny";
|
|
6474
6574
|
var DEFAULT_BREAKPOINT3 = "desktop";
|
|
6475
6575
|
var breakpointIconMap = {
|
|
6476
|
-
widescreen:
|
|
6477
|
-
desktop:
|
|
6478
|
-
laptop:
|
|
6479
|
-
tablet_extra:
|
|
6480
|
-
tablet:
|
|
6481
|
-
mobile_extra:
|
|
6482
|
-
mobile:
|
|
6576
|
+
widescreen: import_icons31.WidescreenIcon,
|
|
6577
|
+
desktop: import_icons31.DesktopIcon,
|
|
6578
|
+
laptop: import_icons31.LaptopIcon,
|
|
6579
|
+
tablet_extra: import_icons31.TabletLandscapeIcon,
|
|
6580
|
+
tablet: import_icons31.TabletPortraitIcon,
|
|
6581
|
+
mobile_extra: import_icons31.MobileLandscapeIcon,
|
|
6582
|
+
mobile: import_icons31.MobilePortraitIcon
|
|
6483
6583
|
};
|
|
6484
6584
|
var BreakpointIcon = ({ breakpoint }) => {
|
|
6485
6585
|
const breakpoints = (0, import_editor_responsive4.useBreakpoints)();
|
|
@@ -6489,21 +6589,21 @@ var BreakpointIcon = ({ breakpoint }) => {
|
|
|
6489
6589
|
return null;
|
|
6490
6590
|
}
|
|
6491
6591
|
const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
|
|
6492
|
-
return /* @__PURE__ */
|
|
6592
|
+
return /* @__PURE__ */ React96.createElement(import_ui44.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
|
|
6493
6593
|
};
|
|
6494
6594
|
|
|
6495
6595
|
// src/styles-inheritance/components/infotip/label-chip.tsx
|
|
6496
|
-
var
|
|
6596
|
+
var React97 = __toESM(require("react"));
|
|
6497
6597
|
var import_editor_styles_repository16 = require("@elementor/editor-styles-repository");
|
|
6498
|
-
var
|
|
6499
|
-
var
|
|
6500
|
-
var
|
|
6598
|
+
var import_icons32 = require("@elementor/icons");
|
|
6599
|
+
var import_ui45 = require("@elementor/ui");
|
|
6600
|
+
var import_i18n70 = require("@wordpress/i18n");
|
|
6501
6601
|
var SIZE5 = "tiny";
|
|
6502
6602
|
var LabelChip = ({ displayLabel, provider }) => {
|
|
6503
6603
|
const isBaseStyle = provider === import_editor_styles_repository16.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
|
|
6504
|
-
const chipIcon = isBaseStyle ? /* @__PURE__ */
|
|
6505
|
-
return /* @__PURE__ */
|
|
6506
|
-
|
|
6604
|
+
const chipIcon = isBaseStyle ? /* @__PURE__ */ React97.createElement(import_ui45.Tooltip, { title: (0, import_i18n70.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React97.createElement(import_icons32.InfoCircleIcon, { fontSize: SIZE5 })) : void 0;
|
|
6605
|
+
return /* @__PURE__ */ React97.createElement(
|
|
6606
|
+
import_ui45.Chip,
|
|
6507
6607
|
{
|
|
6508
6608
|
label: displayLabel,
|
|
6509
6609
|
size: SIZE5,
|
|
@@ -6528,11 +6628,11 @@ var LabelChip = ({ displayLabel, provider }) => {
|
|
|
6528
6628
|
};
|
|
6529
6629
|
|
|
6530
6630
|
// src/styles-inheritance/components/infotip/value-component.tsx
|
|
6531
|
-
var
|
|
6532
|
-
var
|
|
6631
|
+
var React98 = __toESM(require("react"));
|
|
6632
|
+
var import_ui46 = require("@elementor/ui");
|
|
6533
6633
|
var ValueComponent = ({ index, value }) => {
|
|
6534
|
-
return /* @__PURE__ */
|
|
6535
|
-
|
|
6634
|
+
return /* @__PURE__ */ React98.createElement(import_ui46.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React98.createElement(
|
|
6635
|
+
import_ui46.Typography,
|
|
6536
6636
|
{
|
|
6537
6637
|
variant: "caption",
|
|
6538
6638
|
color: "text.tertiary",
|
|
@@ -6553,9 +6653,9 @@ var ValueComponent = ({ index, value }) => {
|
|
|
6553
6653
|
};
|
|
6554
6654
|
|
|
6555
6655
|
// src/styles-inheritance/components/infotip/action-icons.tsx
|
|
6556
|
-
var
|
|
6557
|
-
var
|
|
6558
|
-
var ActionIcons = () => /* @__PURE__ */
|
|
6656
|
+
var React99 = __toESM(require("react"));
|
|
6657
|
+
var import_ui47 = require("@elementor/ui");
|
|
6658
|
+
var ActionIcons = () => /* @__PURE__ */ React99.createElement(import_ui47.Box, { display: "flex", gap: 0.5, alignItems: "center" });
|
|
6559
6659
|
|
|
6560
6660
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
6561
6661
|
var SECTION_PADDING_INLINE = 32;
|
|
@@ -6591,8 +6691,8 @@ var StylesInheritanceInfotip = ({
|
|
|
6591
6691
|
});
|
|
6592
6692
|
}, [key, propType]);
|
|
6593
6693
|
const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
|
|
6594
|
-
const infotipContent = /* @__PURE__ */
|
|
6595
|
-
|
|
6694
|
+
const infotipContent = /* @__PURE__ */ React100.createElement(import_ui48.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React100.createElement(
|
|
6695
|
+
import_ui48.Card,
|
|
6596
6696
|
{
|
|
6597
6697
|
elevation: 0,
|
|
6598
6698
|
sx: {
|
|
@@ -6604,8 +6704,8 @@ var StylesInheritanceInfotip = ({
|
|
|
6604
6704
|
flexDirection: "column"
|
|
6605
6705
|
}
|
|
6606
6706
|
},
|
|
6607
|
-
/* @__PURE__ */
|
|
6608
|
-
|
|
6707
|
+
/* @__PURE__ */ React100.createElement(
|
|
6708
|
+
import_ui48.Box,
|
|
6609
6709
|
{
|
|
6610
6710
|
sx: {
|
|
6611
6711
|
position: "sticky",
|
|
@@ -6614,10 +6714,10 @@ var StylesInheritanceInfotip = ({
|
|
|
6614
6714
|
backgroundColor: "background.paper"
|
|
6615
6715
|
}
|
|
6616
6716
|
},
|
|
6617
|
-
/* @__PURE__ */
|
|
6717
|
+
/* @__PURE__ */ React100.createElement(import_editor_ui11.PopoverHeader, { title: (0, import_i18n71.__)("Style origin", "elementor"), onClose: closeInfotip })
|
|
6618
6718
|
),
|
|
6619
|
-
/* @__PURE__ */
|
|
6620
|
-
|
|
6719
|
+
/* @__PURE__ */ React100.createElement(
|
|
6720
|
+
import_ui48.CardContent,
|
|
6621
6721
|
{
|
|
6622
6722
|
sx: {
|
|
6623
6723
|
display: "flex",
|
|
@@ -6630,39 +6730,39 @@ var StylesInheritanceInfotip = ({
|
|
|
6630
6730
|
}
|
|
6631
6731
|
}
|
|
6632
6732
|
},
|
|
6633
|
-
/* @__PURE__ */
|
|
6634
|
-
return /* @__PURE__ */
|
|
6635
|
-
|
|
6733
|
+
/* @__PURE__ */ React100.createElement(import_ui48.Stack, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
|
|
6734
|
+
return /* @__PURE__ */ React100.createElement(
|
|
6735
|
+
import_ui48.Box,
|
|
6636
6736
|
{
|
|
6637
6737
|
key: item.id,
|
|
6638
6738
|
display: "flex",
|
|
6639
6739
|
gap: 0.5,
|
|
6640
6740
|
role: "listitem",
|
|
6641
|
-
"aria-label": (0,
|
|
6741
|
+
"aria-label": (0, import_i18n71.__)("Inheritance item: %s", "elementor").replace(
|
|
6642
6742
|
"%s",
|
|
6643
6743
|
item.displayLabel
|
|
6644
6744
|
)
|
|
6645
6745
|
},
|
|
6646
|
-
/* @__PURE__ */
|
|
6647
|
-
|
|
6746
|
+
/* @__PURE__ */ React100.createElement(
|
|
6747
|
+
import_ui48.Box,
|
|
6648
6748
|
{
|
|
6649
6749
|
display: "flex",
|
|
6650
6750
|
gap: 0.5,
|
|
6651
6751
|
sx: { flexWrap: "wrap", width: "100%", alignItems: "flex-start" }
|
|
6652
6752
|
},
|
|
6653
|
-
/* @__PURE__ */
|
|
6654
|
-
/* @__PURE__ */
|
|
6655
|
-
/* @__PURE__ */
|
|
6753
|
+
/* @__PURE__ */ React100.createElement(BreakpointIcon, { breakpoint: item.breakpoint }),
|
|
6754
|
+
/* @__PURE__ */ React100.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }),
|
|
6755
|
+
/* @__PURE__ */ React100.createElement(ValueComponent, { index, value: item.value })
|
|
6656
6756
|
),
|
|
6657
|
-
/* @__PURE__ */
|
|
6757
|
+
/* @__PURE__ */ React100.createElement(ActionIcons, null)
|
|
6658
6758
|
);
|
|
6659
6759
|
}))
|
|
6660
6760
|
)
|
|
6661
6761
|
));
|
|
6662
6762
|
if (isDisabled) {
|
|
6663
|
-
return /* @__PURE__ */
|
|
6763
|
+
return /* @__PURE__ */ React100.createElement(import_ui48.Box, { sx: { display: "inline-flex" } }, children);
|
|
6664
6764
|
}
|
|
6665
|
-
return /* @__PURE__ */
|
|
6765
|
+
return /* @__PURE__ */ React100.createElement(import_ui48.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React100.createElement(
|
|
6666
6766
|
TooltipOrInfotip,
|
|
6667
6767
|
{
|
|
6668
6768
|
showInfotip,
|
|
@@ -6670,8 +6770,8 @@ var StylesInheritanceInfotip = ({
|
|
|
6670
6770
|
infotipContent,
|
|
6671
6771
|
isDisabled
|
|
6672
6772
|
},
|
|
6673
|
-
/* @__PURE__ */
|
|
6674
|
-
|
|
6773
|
+
/* @__PURE__ */ React100.createElement(
|
|
6774
|
+
import_ui48.IconButton,
|
|
6675
6775
|
{
|
|
6676
6776
|
onClick: toggleInfotip,
|
|
6677
6777
|
"aria-label": label,
|
|
@@ -6690,11 +6790,11 @@ function TooltipOrInfotip({
|
|
|
6690
6790
|
isDisabled
|
|
6691
6791
|
}) {
|
|
6692
6792
|
if (isDisabled) {
|
|
6693
|
-
return /* @__PURE__ */
|
|
6793
|
+
return /* @__PURE__ */ React100.createElement(import_ui48.Box, { sx: { display: "inline-flex" } }, children);
|
|
6694
6794
|
}
|
|
6695
6795
|
if (showInfotip) {
|
|
6696
|
-
return /* @__PURE__ */
|
|
6697
|
-
|
|
6796
|
+
return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
|
|
6797
|
+
import_ui48.Backdrop,
|
|
6698
6798
|
{
|
|
6699
6799
|
open: showInfotip,
|
|
6700
6800
|
onClick: onClose,
|
|
@@ -6703,8 +6803,8 @@ function TooltipOrInfotip({
|
|
|
6703
6803
|
zIndex: (theme) => theme.zIndex.modal - 1
|
|
6704
6804
|
}
|
|
6705
6805
|
}
|
|
6706
|
-
), /* @__PURE__ */
|
|
6707
|
-
|
|
6806
|
+
), /* @__PURE__ */ React100.createElement(
|
|
6807
|
+
import_ui48.Infotip,
|
|
6708
6808
|
{
|
|
6709
6809
|
placement: "top-end",
|
|
6710
6810
|
content: infotipContent,
|
|
@@ -6715,20 +6815,20 @@ function TooltipOrInfotip({
|
|
|
6715
6815
|
children
|
|
6716
6816
|
));
|
|
6717
6817
|
}
|
|
6718
|
-
return /* @__PURE__ */
|
|
6818
|
+
return /* @__PURE__ */ React100.createElement(import_ui48.Tooltip, { title: (0, import_i18n71.__)("Style origin", "elementor"), placement: "top" }, children);
|
|
6719
6819
|
}
|
|
6720
6820
|
|
|
6721
6821
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
6722
6822
|
var StylesInheritanceIndicator = ({
|
|
6723
6823
|
customContext
|
|
6724
6824
|
}) => {
|
|
6725
|
-
const context = (0,
|
|
6825
|
+
const context = (0, import_editor_controls67.useBoundProp)();
|
|
6726
6826
|
const { path, propType } = customContext || context;
|
|
6727
6827
|
const inheritanceChain = useStylesInheritanceChain(path);
|
|
6728
6828
|
if (!path || !inheritanceChain.length) {
|
|
6729
6829
|
return null;
|
|
6730
6830
|
}
|
|
6731
|
-
return /* @__PURE__ */
|
|
6831
|
+
return /* @__PURE__ */ React101.createElement(Indicator, { inheritanceChain, path, propType });
|
|
6732
6832
|
};
|
|
6733
6833
|
var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
6734
6834
|
const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
|
|
@@ -6744,7 +6844,7 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
6744
6844
|
getColor: isFinalValue && currentStyleProvider ? getStylesProviderThemeColor(currentStyleProvider.getKey()) : void 0,
|
|
6745
6845
|
isOverridden: hasValue && !isFinalValue ? true : void 0
|
|
6746
6846
|
};
|
|
6747
|
-
return /* @__PURE__ */
|
|
6847
|
+
return /* @__PURE__ */ React101.createElement(
|
|
6748
6848
|
StylesInheritanceInfotip,
|
|
6749
6849
|
{
|
|
6750
6850
|
inheritanceChain,
|
|
@@ -6753,17 +6853,17 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
6753
6853
|
label,
|
|
6754
6854
|
isDisabled
|
|
6755
6855
|
},
|
|
6756
|
-
/* @__PURE__ */
|
|
6856
|
+
/* @__PURE__ */ React101.createElement(StyleIndicator, { ...styleIndicatorProps })
|
|
6757
6857
|
);
|
|
6758
6858
|
};
|
|
6759
6859
|
var getLabel = ({ isFinalValue, hasValue }) => {
|
|
6760
6860
|
if (isFinalValue) {
|
|
6761
|
-
return (0,
|
|
6861
|
+
return (0, import_i18n72.__)("This is the final value", "elementor");
|
|
6762
6862
|
}
|
|
6763
6863
|
if (hasValue) {
|
|
6764
|
-
return (0,
|
|
6864
|
+
return (0, import_i18n72.__)("This value is overridden by another style", "elementor");
|
|
6765
6865
|
}
|
|
6766
|
-
return (0,
|
|
6866
|
+
return (0, import_i18n72.__)("This has value from another style", "elementor");
|
|
6767
6867
|
};
|
|
6768
6868
|
|
|
6769
6869
|
// src/styles-inheritance/init-styles-inheritance-transformers.ts
|
|
@@ -6784,7 +6884,7 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
|
|
|
6784
6884
|
]);
|
|
6785
6885
|
|
|
6786
6886
|
// src/styles-inheritance/transformers/array-transformer.tsx
|
|
6787
|
-
var
|
|
6887
|
+
var React102 = __toESM(require("react"));
|
|
6788
6888
|
var import_editor_canvas6 = require("@elementor/editor-canvas");
|
|
6789
6889
|
var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) => {
|
|
6790
6890
|
if (!values || values.length === 0) {
|
|
@@ -6794,18 +6894,18 @@ var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) =>
|
|
|
6794
6894
|
if (allStrings) {
|
|
6795
6895
|
return values.join(" ");
|
|
6796
6896
|
}
|
|
6797
|
-
return /* @__PURE__ */
|
|
6897
|
+
return /* @__PURE__ */ React102.createElement(React102.Fragment, null, values.map((item, index) => /* @__PURE__ */ React102.createElement(React102.Fragment, { key: index }, index > 0 && " ", item)));
|
|
6798
6898
|
});
|
|
6799
6899
|
|
|
6800
6900
|
// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
|
|
6801
|
-
var
|
|
6901
|
+
var React103 = __toESM(require("react"));
|
|
6802
6902
|
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
6803
|
-
var
|
|
6804
|
-
var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */
|
|
6903
|
+
var import_ui49 = require("@elementor/ui");
|
|
6904
|
+
var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React103.createElement(import_ui49.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React103.createElement(ItemLabelColor, { value })));
|
|
6805
6905
|
var ItemLabelColor = ({ value: { color } }) => {
|
|
6806
|
-
return /* @__PURE__ */
|
|
6906
|
+
return /* @__PURE__ */ React103.createElement("span", null, color);
|
|
6807
6907
|
};
|
|
6808
|
-
var StyledUnstableColorIndicator = (0,
|
|
6908
|
+
var StyledUnstableColorIndicator = (0, import_ui49.styled)(import_ui49.UnstableColorIndicator)(({ theme }) => ({
|
|
6809
6909
|
width: "1em",
|
|
6810
6910
|
height: "1em",
|
|
6811
6911
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -6814,20 +6914,20 @@ var StyledUnstableColorIndicator = (0, import_ui48.styled)(import_ui48.UnstableC
|
|
|
6814
6914
|
}));
|
|
6815
6915
|
|
|
6816
6916
|
// src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
|
|
6817
|
-
var
|
|
6917
|
+
var React104 = __toESM(require("react"));
|
|
6818
6918
|
var import_editor_canvas8 = require("@elementor/editor-canvas");
|
|
6819
|
-
var
|
|
6820
|
-
var
|
|
6821
|
-
var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */
|
|
6919
|
+
var import_ui50 = require("@elementor/ui");
|
|
6920
|
+
var import_i18n73 = require("@wordpress/i18n");
|
|
6921
|
+
var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React104.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React104.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React104.createElement(ItemLabelGradient, { value })));
|
|
6822
6922
|
var ItemIconGradient = ({ value }) => {
|
|
6823
6923
|
const gradient = getGradientValue(value);
|
|
6824
|
-
return /* @__PURE__ */
|
|
6924
|
+
return /* @__PURE__ */ React104.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
6825
6925
|
};
|
|
6826
6926
|
var ItemLabelGradient = ({ value }) => {
|
|
6827
6927
|
if (value.type === "linear") {
|
|
6828
|
-
return /* @__PURE__ */
|
|
6928
|
+
return /* @__PURE__ */ React104.createElement("span", null, (0, import_i18n73.__)("Linear gradient", "elementor"));
|
|
6829
6929
|
}
|
|
6830
|
-
return /* @__PURE__ */
|
|
6930
|
+
return /* @__PURE__ */ React104.createElement("span", null, (0, import_i18n73.__)("Radial gradient", "elementor"));
|
|
6831
6931
|
};
|
|
6832
6932
|
var getGradientValue = (gradient) => {
|
|
6833
6933
|
const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
|
|
@@ -6838,16 +6938,16 @@ var getGradientValue = (gradient) => {
|
|
|
6838
6938
|
};
|
|
6839
6939
|
|
|
6840
6940
|
// src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
|
|
6841
|
-
var
|
|
6941
|
+
var React105 = __toESM(require("react"));
|
|
6842
6942
|
var import_editor_canvas9 = require("@elementor/editor-canvas");
|
|
6843
6943
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
6844
|
-
var
|
|
6944
|
+
var import_ui51 = require("@elementor/ui");
|
|
6845
6945
|
var import_wp_media = require("@elementor/wp-media");
|
|
6846
|
-
var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */
|
|
6946
|
+
var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React105.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React105.createElement(ItemIconImage, { value }), /* @__PURE__ */ React105.createElement(ItemLabelImage, { value })));
|
|
6847
6947
|
var ItemIconImage = ({ value }) => {
|
|
6848
6948
|
const { imageUrl } = useImage(value);
|
|
6849
|
-
return /* @__PURE__ */
|
|
6850
|
-
|
|
6949
|
+
return /* @__PURE__ */ React105.createElement(
|
|
6950
|
+
import_ui51.CardMedia,
|
|
6851
6951
|
{
|
|
6852
6952
|
image: imageUrl,
|
|
6853
6953
|
sx: (theme) => ({
|
|
@@ -6862,7 +6962,7 @@ var ItemIconImage = ({ value }) => {
|
|
|
6862
6962
|
};
|
|
6863
6963
|
var ItemLabelImage = ({ value }) => {
|
|
6864
6964
|
const { imageTitle } = useImage(value);
|
|
6865
|
-
return /* @__PURE__ */
|
|
6965
|
+
return /* @__PURE__ */ React105.createElement(import_editor_ui12.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React105.createElement("span", null, imageTitle));
|
|
6866
6966
|
};
|
|
6867
6967
|
var useImage = (image) => {
|
|
6868
6968
|
let imageTitle, imageUrl = null;
|
|
@@ -6887,7 +6987,7 @@ var getFileExtensionFromFilename = (filename) => {
|
|
|
6887
6987
|
};
|
|
6888
6988
|
|
|
6889
6989
|
// src/styles-inheritance/transformers/box-shadow-transformer.tsx
|
|
6890
|
-
var
|
|
6990
|
+
var React106 = __toESM(require("react"));
|
|
6891
6991
|
var import_editor_canvas10 = require("@elementor/editor-canvas");
|
|
6892
6992
|
var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
|
|
6893
6993
|
if (!value) {
|
|
@@ -6897,20 +6997,20 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
|
|
|
6897
6997
|
const colorValue = color || "#000000";
|
|
6898
6998
|
const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
|
|
6899
6999
|
const positionValue = position || "outset";
|
|
6900
|
-
return /* @__PURE__ */
|
|
7000
|
+
return /* @__PURE__ */ React106.createElement(React106.Fragment, null, colorValue, " ", positionValue, ", ", sizes);
|
|
6901
7001
|
});
|
|
6902
7002
|
|
|
6903
7003
|
// src/styles-inheritance/transformers/color-transformer.tsx
|
|
6904
|
-
var
|
|
7004
|
+
var React107 = __toESM(require("react"));
|
|
6905
7005
|
var import_editor_canvas11 = require("@elementor/editor-canvas");
|
|
6906
|
-
var
|
|
7006
|
+
var import_ui52 = require("@elementor/ui");
|
|
6907
7007
|
function isValidCSSColor(value) {
|
|
6908
7008
|
if (!value.trim()) {
|
|
6909
7009
|
return false;
|
|
6910
7010
|
}
|
|
6911
7011
|
return CSS.supports("color", value.trim());
|
|
6912
7012
|
}
|
|
6913
|
-
var StyledColorIndicator = (0,
|
|
7013
|
+
var StyledColorIndicator = (0, import_ui52.styled)(import_ui52.UnstableColorIndicator)(({ theme }) => ({
|
|
6914
7014
|
width: "1em",
|
|
6915
7015
|
height: "1em",
|
|
6916
7016
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -6921,7 +7021,7 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
|
|
|
6921
7021
|
if (!isValidCSSColor(value)) {
|
|
6922
7022
|
return value;
|
|
6923
7023
|
}
|
|
6924
|
-
return /* @__PURE__ */
|
|
7024
|
+
return /* @__PURE__ */ React107.createElement(import_ui52.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React107.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React107.createElement("span", null, value));
|
|
6925
7025
|
});
|
|
6926
7026
|
|
|
6927
7027
|
// src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
|