@elementor/editor-editing-panel 4.3.0-960 → 4.3.0-962
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 +276 -259
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +41 -24
- package/dist/index.mjs.map +1 -1
- package/package.json +24 -24
- package/src/components/style-sections/layout-section/grid-outline-field.tsx +22 -7
package/dist/index.js
CHANGED
|
@@ -1935,15 +1935,15 @@ var hasInheritedCustomCss = (style, meta) => {
|
|
|
1935
1935
|
|
|
1936
1936
|
// src/components/editing-panel.tsx
|
|
1937
1937
|
var React91 = __toESM(require("react"));
|
|
1938
|
-
var
|
|
1939
|
-
var
|
|
1938
|
+
var import_editor_controls55 = require("@elementor/editor-controls");
|
|
1939
|
+
var import_editor_elements14 = require("@elementor/editor-elements");
|
|
1940
1940
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
1941
1941
|
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
1942
1942
|
var import_icons27 = require("@elementor/icons");
|
|
1943
1943
|
var import_locations5 = require("@elementor/locations");
|
|
1944
1944
|
var import_menus = require("@elementor/menus");
|
|
1945
1945
|
var import_session9 = require("@elementor/session");
|
|
1946
|
-
var
|
|
1946
|
+
var import_ui45 = require("@elementor/ui");
|
|
1947
1947
|
var import_i18n64 = require("@wordpress/i18n");
|
|
1948
1948
|
|
|
1949
1949
|
// src/editing-panel-replacement-registry.tsx
|
|
@@ -1981,9 +1981,9 @@ var EditingPanelStickyPromotion = () => {
|
|
|
1981
1981
|
// src/components/editing-panel-tabs.tsx
|
|
1982
1982
|
var import_react37 = require("react");
|
|
1983
1983
|
var React90 = __toESM(require("react"));
|
|
1984
|
-
var
|
|
1984
|
+
var import_editor_elements13 = require("@elementor/editor-elements");
|
|
1985
1985
|
var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
|
|
1986
|
-
var
|
|
1986
|
+
var import_ui44 = require("@elementor/ui");
|
|
1987
1987
|
var import_i18n63 = require("@wordpress/i18n");
|
|
1988
1988
|
|
|
1989
1989
|
// src/contexts/scroll-context.tsx
|
|
@@ -2703,7 +2703,7 @@ var import_editor_props16 = require("@elementor/editor-props");
|
|
|
2703
2703
|
var import_editor_responsive3 = require("@elementor/editor-responsive");
|
|
2704
2704
|
var import_locations4 = require("@elementor/locations");
|
|
2705
2705
|
var import_session8 = require("@elementor/session");
|
|
2706
|
-
var
|
|
2706
|
+
var import_ui43 = require("@elementor/ui");
|
|
2707
2707
|
var import_i18n62 = require("@wordpress/i18n");
|
|
2708
2708
|
|
|
2709
2709
|
// src/contexts/styles-inheritance-context.tsx
|
|
@@ -3502,8 +3502,8 @@ var EffectsSection = () => {
|
|
|
3502
3502
|
|
|
3503
3503
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
3504
3504
|
var React61 = __toESM(require("react"));
|
|
3505
|
-
var
|
|
3506
|
-
var
|
|
3505
|
+
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
3506
|
+
var import_editor_elements12 = require("@elementor/editor-elements");
|
|
3507
3507
|
var import_locations3 = require("@elementor/locations");
|
|
3508
3508
|
var import_i18n37 = require("@wordpress/i18n");
|
|
3509
3509
|
|
|
@@ -4396,18 +4396,35 @@ var GridJustifyItemsField = () => /* @__PURE__ */ React55.createElement(StylesFi
|
|
|
4396
4396
|
|
|
4397
4397
|
// src/components/style-sections/layout-section/grid-outline-field.tsx
|
|
4398
4398
|
var React56 = __toESM(require("react"));
|
|
4399
|
-
var
|
|
4399
|
+
var import_editor_elements11 = require("@elementor/editor-elements");
|
|
4400
|
+
var import_ui33 = require("@elementor/ui");
|
|
4400
4401
|
var import_i18n32 = require("@wordpress/i18n");
|
|
4401
4402
|
var GRID_OUTLINE_LABEL = (0, import_i18n32.__)("Show Grid Outline", "elementor");
|
|
4402
4403
|
var GridOutlineField = () => {
|
|
4403
|
-
|
|
4404
|
+
const { element } = useElement();
|
|
4405
|
+
const settings = (0, import_editor_elements11.useElementEditorSettings)(element.id);
|
|
4406
|
+
const value = settings?.grid_outline ?? true;
|
|
4407
|
+
return /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React56.createElement(import_ui33.Box, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React56.createElement(
|
|
4408
|
+
import_ui33.Switch,
|
|
4409
|
+
{
|
|
4410
|
+
"aria-label": GRID_OUTLINE_LABEL,
|
|
4411
|
+
checked: value,
|
|
4412
|
+
onChange: (event) => {
|
|
4413
|
+
(0, import_editor_elements11.updateElementEditorSettings)({
|
|
4414
|
+
elementId: element.id,
|
|
4415
|
+
settings: { grid_outline: event.target.checked }
|
|
4416
|
+
});
|
|
4417
|
+
},
|
|
4418
|
+
size: "small"
|
|
4419
|
+
}
|
|
4420
|
+
)));
|
|
4404
4421
|
};
|
|
4405
4422
|
|
|
4406
4423
|
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4407
4424
|
var React57 = __toESM(require("react"));
|
|
4408
4425
|
var import_react26 = require("react");
|
|
4409
|
-
var
|
|
4410
|
-
var
|
|
4426
|
+
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
4427
|
+
var import_ui34 = require("@elementor/ui");
|
|
4411
4428
|
var import_i18n33 = require("@wordpress/i18n");
|
|
4412
4429
|
|
|
4413
4430
|
// src/components/style-sections/layout-section/utils/grid-track-value.ts
|
|
@@ -4502,9 +4519,9 @@ var unitOf = (v, fallback = FR) => {
|
|
|
4502
4519
|
};
|
|
4503
4520
|
|
|
4504
4521
|
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4505
|
-
var SizeFieldWrapper = ({ children }) => /* @__PURE__ */ React57.createElement(
|
|
4506
|
-
var GridTrackSizeInput = (0,
|
|
4507
|
-
|
|
4522
|
+
var SizeFieldWrapper = ({ children }) => /* @__PURE__ */ React57.createElement(import_editor_controls27.ControlActions, null, children);
|
|
4523
|
+
var GridTrackSizeInput = (0, import_editor_controls27.createControl)((props) => /* @__PURE__ */ React57.createElement(
|
|
4524
|
+
import_editor_controls27.SizeComponent,
|
|
4508
4525
|
{
|
|
4509
4526
|
units: UNITS,
|
|
4510
4527
|
value: props.value,
|
|
@@ -4522,7 +4539,7 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4522
4539
|
const { value, setValue } = useStylesField(cssProp, {
|
|
4523
4540
|
history: { propDisplayName: label }
|
|
4524
4541
|
});
|
|
4525
|
-
const { placeholder: inheritedPlaceholder } = (0,
|
|
4542
|
+
const { placeholder: inheritedPlaceholder } = (0, import_editor_controls27.useBoundProp)();
|
|
4526
4543
|
const anchorRef = (0, import_react26.useRef)(null);
|
|
4527
4544
|
const local = parseValue(value);
|
|
4528
4545
|
const inherited = parseValue(inheritedPlaceholder);
|
|
@@ -4546,28 +4563,28 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4546
4563
|
)));
|
|
4547
4564
|
};
|
|
4548
4565
|
var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React57.createElement(UiProviders, null, /* @__PURE__ */ React57.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React57.createElement(GridTrackFieldContent, { cssProp, label })));
|
|
4549
|
-
var GridSizeFields = () => /* @__PURE__ */ React57.createElement(
|
|
4566
|
+
var GridSizeFields = () => /* @__PURE__ */ React57.createElement(import_ui34.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(GridTrackField, { cssProp: "grid-template-columns", label: (0, import_i18n33.__)("Columns", "elementor") })), /* @__PURE__ */ React57.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(GridTrackField, { cssProp: "grid-template-rows", label: (0, import_i18n33.__)("Rows", "elementor") })));
|
|
4550
4567
|
|
|
4551
4568
|
// src/components/style-sections/layout-section/grid-span-field.tsx
|
|
4552
4569
|
var React58 = __toESM(require("react"));
|
|
4553
|
-
var
|
|
4554
|
-
var
|
|
4570
|
+
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
4571
|
+
var import_ui35 = require("@elementor/ui");
|
|
4555
4572
|
var import_i18n34 = require("@wordpress/i18n");
|
|
4556
4573
|
var GridSpanFieldContent = ({ label }) => {
|
|
4557
|
-
return /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React58.createElement(
|
|
4574
|
+
return /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React58.createElement(import_editor_controls28.GridSpanControl, null));
|
|
4558
4575
|
};
|
|
4559
4576
|
var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */ React58.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React58.createElement(UiProviders, null, /* @__PURE__ */ React58.createElement(GridSpanFieldContent, { cssProp, label })));
|
|
4560
|
-
var GridSpanFields = () => /* @__PURE__ */ React58.createElement(
|
|
4577
|
+
var GridSpanFields = () => /* @__PURE__ */ React58.createElement(import_ui35.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(GridSpanField, { cssProp: "grid-column", label: (0, import_i18n34.__)("Grid column", "elementor") })), /* @__PURE__ */ React58.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(GridSpanField, { cssProp: "grid-row", label: (0, import_i18n34.__)("Grid row", "elementor") })));
|
|
4561
4578
|
|
|
4562
4579
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
4563
4580
|
var React59 = __toESM(require("react"));
|
|
4564
|
-
var
|
|
4581
|
+
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
4565
4582
|
var import_icons16 = require("@elementor/icons");
|
|
4566
|
-
var
|
|
4583
|
+
var import_ui36 = require("@elementor/ui");
|
|
4567
4584
|
var import_i18n35 = require("@wordpress/i18n");
|
|
4568
4585
|
var JUSTIFY_CONTENT_LABEL = (0, import_i18n35.__)("Justify content", "elementor");
|
|
4569
|
-
var StartIcon6 = (0,
|
|
4570
|
-
var EndIcon5 = (0,
|
|
4586
|
+
var StartIcon6 = (0, import_ui36.withDirection)(import_icons16.JustifyTopIcon);
|
|
4587
|
+
var EndIcon5 = (0, import_ui36.withDirection)(import_icons16.JustifyBottomIcon);
|
|
4571
4588
|
var iconProps4 = {
|
|
4572
4589
|
isClockwise: true,
|
|
4573
4590
|
offset: -90
|
|
@@ -4610,11 +4627,11 @@ var options5 = [
|
|
|
4610
4627
|
showTooltip: true
|
|
4611
4628
|
}
|
|
4612
4629
|
];
|
|
4613
|
-
var JustifyContentField = () => /* @__PURE__ */ React59.createElement(StylesField, { bind: "justify-content", propDisplayName: JUSTIFY_CONTENT_LABEL }, /* @__PURE__ */ React59.createElement(UiProviders, null, /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label: JUSTIFY_CONTENT_LABEL, direction: "column" }, /* @__PURE__ */ React59.createElement(
|
|
4630
|
+
var JustifyContentField = () => /* @__PURE__ */ React59.createElement(StylesField, { bind: "justify-content", propDisplayName: JUSTIFY_CONTENT_LABEL }, /* @__PURE__ */ React59.createElement(UiProviders, null, /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label: JUSTIFY_CONTENT_LABEL, direction: "column" }, /* @__PURE__ */ React59.createElement(import_editor_controls29.ToggleControl, { options: options5, fullWidth: true }))));
|
|
4614
4631
|
|
|
4615
4632
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
4616
4633
|
var React60 = __toESM(require("react"));
|
|
4617
|
-
var
|
|
4634
|
+
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
4618
4635
|
var import_icons17 = require("@elementor/icons");
|
|
4619
4636
|
var import_i18n36 = require("@wordpress/i18n");
|
|
4620
4637
|
var FLEX_WRAP_LABEL = (0, import_i18n36.__)("Wrap", "elementor");
|
|
@@ -4639,7 +4656,7 @@ var options6 = [
|
|
|
4639
4656
|
}
|
|
4640
4657
|
];
|
|
4641
4658
|
var WrapField = () => {
|
|
4642
|
-
return /* @__PURE__ */ React60.createElement(StylesField, { bind: "flex-wrap", propDisplayName: FLEX_WRAP_LABEL }, /* @__PURE__ */ React60.createElement(UiProviders, null, /* @__PURE__ */ React60.createElement(StylesFieldLayout, { label: FLEX_WRAP_LABEL }, /* @__PURE__ */ React60.createElement(
|
|
4659
|
+
return /* @__PURE__ */ React60.createElement(StylesField, { bind: "flex-wrap", propDisplayName: FLEX_WRAP_LABEL }, /* @__PURE__ */ React60.createElement(UiProviders, null, /* @__PURE__ */ React60.createElement(StylesFieldLayout, { label: FLEX_WRAP_LABEL }, /* @__PURE__ */ React60.createElement(import_editor_controls30.ToggleControl, { options: options6 }))));
|
|
4643
4660
|
};
|
|
4644
4661
|
|
|
4645
4662
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -4655,7 +4672,7 @@ var LayoutSection = () => {
|
|
|
4655
4672
|
const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
|
|
4656
4673
|
const isDisplayGrid = "grid" === (display?.value ?? displayPlaceholder?.value);
|
|
4657
4674
|
const { element } = useElement();
|
|
4658
|
-
const parent = (0,
|
|
4675
|
+
const parent = (0, import_editor_elements12.useParentElement)(element.id);
|
|
4659
4676
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
4660
4677
|
const getParentStyleDirection = () => {
|
|
4661
4678
|
if ("flex" === parentStyle?.display) {
|
|
@@ -4675,8 +4692,8 @@ var FlexFields = () => {
|
|
|
4675
4692
|
return /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(FlexDirectionField, null), /* @__PURE__ */ React61.createElement(JustifyContentField, null), /* @__PURE__ */ React61.createElement(AlignItemsField, null), /* @__PURE__ */ React61.createElement(PanelDivider, null), /* @__PURE__ */ React61.createElement(GapControlField, null), /* @__PURE__ */ React61.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React61.createElement(AlignContentField, null));
|
|
4676
4693
|
};
|
|
4677
4694
|
var GridFields = () => /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(GridOutlineField, null), /* @__PURE__ */ React61.createElement(GridSizeFields, null), /* @__PURE__ */ React61.createElement(GridAutoFlowField, null), /* @__PURE__ */ React61.createElement(GridFieldsSlot, null), /* @__PURE__ */ React61.createElement(StyleTabCollapsibleContent, { fields: ["grid-auto-rows", "grid-auto-columns"] }, /* @__PURE__ */ React61.createElement(GridAutoTrackFields, null)), /* @__PURE__ */ React61.createElement(PanelDivider, null), /* @__PURE__ */ React61.createElement(GapControlField, null), /* @__PURE__ */ React61.createElement(PanelDivider, null), /* @__PURE__ */ React61.createElement(GridJustifyItemsField, null), /* @__PURE__ */ React61.createElement(AlignItemsField, null));
|
|
4678
|
-
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(PanelDivider, null), /* @__PURE__ */ React61.createElement(
|
|
4679
|
-
var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(PanelDivider, null), /* @__PURE__ */ React61.createElement(
|
|
4695
|
+
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(PanelDivider, null), /* @__PURE__ */ React61.createElement(import_editor_controls31.ControlFormLabel, null, (0, import_i18n37.__)("Flex child", "elementor")), /* @__PURE__ */ React61.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React61.createElement(FlexOrderField, null), /* @__PURE__ */ React61.createElement(FlexSizeField, null));
|
|
4696
|
+
var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(PanelDivider, null), /* @__PURE__ */ React61.createElement(import_editor_controls31.ControlFormLabel, null, (0, import_i18n37.__)("Grid child", "elementor")), /* @__PURE__ */ React61.createElement(GridSpanFields, null), /* @__PURE__ */ React61.createElement(AlignSelfGridChild, { parentStyleDirection }), /* @__PURE__ */ React61.createElement(FlexOrderField, null));
|
|
4680
4697
|
var shouldDisplayFlexFields = (display, local) => {
|
|
4681
4698
|
const value = display?.value ?? local?.value;
|
|
4682
4699
|
if (!value) {
|
|
@@ -4689,18 +4706,18 @@ var shouldDisplayFlexFields = (display, local) => {
|
|
|
4689
4706
|
var React66 = __toESM(require("react"));
|
|
4690
4707
|
var import_react29 = require("react");
|
|
4691
4708
|
var import_session7 = require("@elementor/session");
|
|
4692
|
-
var
|
|
4709
|
+
var import_ui39 = require("@elementor/ui");
|
|
4693
4710
|
var import_i18n42 = require("@wordpress/i18n");
|
|
4694
4711
|
|
|
4695
4712
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
4696
4713
|
var React62 = __toESM(require("react"));
|
|
4697
4714
|
var import_react27 = require("react");
|
|
4698
|
-
var
|
|
4715
|
+
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
4699
4716
|
var import_icons18 = require("@elementor/icons");
|
|
4700
|
-
var
|
|
4717
|
+
var import_ui37 = require("@elementor/ui");
|
|
4701
4718
|
var import_i18n38 = require("@wordpress/i18n");
|
|
4702
|
-
var InlineStartIcon2 = (0,
|
|
4703
|
-
var InlineEndIcon2 = (0,
|
|
4719
|
+
var InlineStartIcon2 = (0, import_ui37.withDirection)(import_icons18.SideLeftIcon);
|
|
4720
|
+
var InlineEndIcon2 = (0, import_ui37.withDirection)(import_icons18.SideRightIcon);
|
|
4704
4721
|
var sideIcons = {
|
|
4705
4722
|
"inset-block-start": /* @__PURE__ */ React62.createElement(import_icons18.SideTopIcon, { fontSize: "tiny" }),
|
|
4706
4723
|
"inset-block-end": /* @__PURE__ */ React62.createElement(import_icons18.SideBottomIcon, { fontSize: "tiny" }),
|
|
@@ -4712,14 +4729,14 @@ var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n38.__)("Left",
|
|
|
4712
4729
|
var DimensionsField = () => {
|
|
4713
4730
|
const { isSiteRtl } = useDirection();
|
|
4714
4731
|
const rowRefs = [(0, import_react27.useRef)(null), (0, import_react27.useRef)(null)];
|
|
4715
|
-
return /* @__PURE__ */ React62.createElement(UiProviders, null, /* @__PURE__ */ React62.createElement(
|
|
4732
|
+
return /* @__PURE__ */ React62.createElement(UiProviders, null, /* @__PURE__ */ React62.createElement(import_ui37.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React62.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n38.__)("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React62.createElement(
|
|
4716
4733
|
DimensionField,
|
|
4717
4734
|
{
|
|
4718
4735
|
side: "inset-inline-end",
|
|
4719
4736
|
label: getInlineEndLabel(isSiteRtl),
|
|
4720
4737
|
rowRef: rowRefs[0]
|
|
4721
4738
|
}
|
|
4722
|
-
)), /* @__PURE__ */ React62.createElement(
|
|
4739
|
+
)), /* @__PURE__ */ React62.createElement(import_ui37.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React62.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n38.__)("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React62.createElement(
|
|
4723
4740
|
DimensionField,
|
|
4724
4741
|
{
|
|
4725
4742
|
side: "inset-inline-start",
|
|
@@ -4732,8 +4749,8 @@ var DimensionField = ({
|
|
|
4732
4749
|
side,
|
|
4733
4750
|
label,
|
|
4734
4751
|
rowRef
|
|
4735
|
-
}) => /* @__PURE__ */ React62.createElement(StylesField, { bind: side, propDisplayName: label }, /* @__PURE__ */ React62.createElement(
|
|
4736
|
-
|
|
4752
|
+
}) => /* @__PURE__ */ React62.createElement(StylesField, { bind: side, propDisplayName: label }, /* @__PURE__ */ React62.createElement(import_ui37.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React62.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, label)), /* @__PURE__ */ React62.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React62.createElement(
|
|
4753
|
+
import_editor_controls32.SizeControl,
|
|
4737
4754
|
{
|
|
4738
4755
|
startIcon: sideIcons[side],
|
|
4739
4756
|
extendedOptions: ["auto"],
|
|
@@ -4745,18 +4762,18 @@ var DimensionField = ({
|
|
|
4745
4762
|
// src/components/style-sections/position-section/offset-field.tsx
|
|
4746
4763
|
var React63 = __toESM(require("react"));
|
|
4747
4764
|
var import_react28 = require("react");
|
|
4748
|
-
var
|
|
4765
|
+
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
4749
4766
|
var import_i18n39 = require("@wordpress/i18n");
|
|
4750
4767
|
var OFFSET_LABEL = (0, import_i18n39.__)("Anchor offset", "elementor");
|
|
4751
4768
|
var UNITS2 = ["px", "em", "rem", "vw", "vh"];
|
|
4752
4769
|
var OffsetField = () => {
|
|
4753
4770
|
const rowRef = (0, import_react28.useRef)(null);
|
|
4754
|
-
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "scroll-margin-top", propDisplayName: OFFSET_LABEL }, /* @__PURE__ */ React63.createElement(StylesFieldLayout, { label: OFFSET_LABEL, ref: rowRef }, /* @__PURE__ */ React63.createElement(
|
|
4771
|
+
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "scroll-margin-top", propDisplayName: OFFSET_LABEL }, /* @__PURE__ */ React63.createElement(StylesFieldLayout, { label: OFFSET_LABEL, ref: rowRef }, /* @__PURE__ */ React63.createElement(import_editor_controls33.SizeControl, { units: UNITS2, anchorRef: rowRef })));
|
|
4755
4772
|
};
|
|
4756
4773
|
|
|
4757
4774
|
// src/components/style-sections/position-section/position-field.tsx
|
|
4758
4775
|
var React64 = __toESM(require("react"));
|
|
4759
|
-
var
|
|
4776
|
+
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
4760
4777
|
var import_i18n40 = require("@wordpress/i18n");
|
|
4761
4778
|
var POSITION_LABEL = (0, import_i18n40.__)("Position", "elementor");
|
|
4762
4779
|
var positionOptions = [
|
|
@@ -4767,31 +4784,31 @@ var positionOptions = [
|
|
|
4767
4784
|
{ label: (0, import_i18n40.__)("Sticky", "elementor"), value: "sticky" }
|
|
4768
4785
|
];
|
|
4769
4786
|
var PositionField = () => {
|
|
4770
|
-
return /* @__PURE__ */ React64.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React64.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React64.createElement(
|
|
4787
|
+
return /* @__PURE__ */ React64.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React64.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React64.createElement(import_editor_controls34.SelectControl, { options: positionOptions })));
|
|
4771
4788
|
};
|
|
4772
4789
|
|
|
4773
4790
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
4774
4791
|
var React65 = __toESM(require("react"));
|
|
4775
|
-
var
|
|
4792
|
+
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
4776
4793
|
var import_icons19 = require("@elementor/icons");
|
|
4777
|
-
var
|
|
4794
|
+
var import_ui38 = require("@elementor/ui");
|
|
4778
4795
|
var import_i18n41 = require("@wordpress/i18n");
|
|
4779
4796
|
var Z_INDEX_LABEL = (0, import_i18n41.__)("Z-index", "elementor");
|
|
4780
4797
|
var ZIndexField = ({ disabled }) => {
|
|
4781
|
-
const StyleField = /* @__PURE__ */ React65.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React65.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React65.createElement(
|
|
4782
|
-
const content = /* @__PURE__ */ React65.createElement(
|
|
4798
|
+
const StyleField = /* @__PURE__ */ React65.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React65.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React65.createElement(import_editor_controls35.NumberControl, { disabled })));
|
|
4799
|
+
const content = /* @__PURE__ */ React65.createElement(import_ui38.Alert, { color: "secondary", icon: /* @__PURE__ */ React65.createElement(import_icons19.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React65.createElement(import_ui38.AlertTitle, null, (0, import_i18n41.__)("Z-index", "elementor")), /* @__PURE__ */ React65.createElement(import_ui38.Box, { component: "span" }, (0, import_i18n41.__)(
|
|
4783
4800
|
"z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.",
|
|
4784
4801
|
"elementor"
|
|
4785
4802
|
)));
|
|
4786
4803
|
return disabled ? /* @__PURE__ */ React65.createElement(
|
|
4787
|
-
|
|
4804
|
+
import_ui38.Infotip,
|
|
4788
4805
|
{
|
|
4789
4806
|
placement: "right",
|
|
4790
4807
|
content,
|
|
4791
4808
|
color: "secondary",
|
|
4792
4809
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
4793
4810
|
},
|
|
4794
|
-
/* @__PURE__ */ React65.createElement(
|
|
4811
|
+
/* @__PURE__ */ React65.createElement(import_ui38.Box, null, StyleField)
|
|
4795
4812
|
) : /* @__PURE__ */ React65.createElement(React65.Fragment, null, StyleField);
|
|
4796
4813
|
};
|
|
4797
4814
|
|
|
@@ -4852,7 +4869,7 @@ var extractDimensions = (values) => {
|
|
|
4852
4869
|
};
|
|
4853
4870
|
}, {});
|
|
4854
4871
|
};
|
|
4855
|
-
var StyledSectionContent = (0,
|
|
4872
|
+
var StyledSectionContent = (0, import_ui39.styled)(SectionContent, {
|
|
4856
4873
|
shouldForwardProp: (prop) => prop !== "gap"
|
|
4857
4874
|
})(({ gap = 2, theme }) => ({
|
|
4858
4875
|
gap: 0,
|
|
@@ -4876,13 +4893,13 @@ var StyledSectionContent = (0, import_ui38.styled)(SectionContent, {
|
|
|
4876
4893
|
// src/components/style-sections/size-section/size-section.tsx
|
|
4877
4894
|
var React69 = __toESM(require("react"));
|
|
4878
4895
|
var import_react30 = require("react");
|
|
4879
|
-
var
|
|
4880
|
-
var
|
|
4896
|
+
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
4897
|
+
var import_ui40 = require("@elementor/ui");
|
|
4881
4898
|
var import_i18n45 = require("@wordpress/i18n");
|
|
4882
4899
|
|
|
4883
4900
|
// src/components/style-sections/size-section/object-fit-field.tsx
|
|
4884
4901
|
var React67 = __toESM(require("react"));
|
|
4885
|
-
var
|
|
4902
|
+
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
4886
4903
|
var import_i18n43 = require("@wordpress/i18n");
|
|
4887
4904
|
var OBJECT_FIT_LABEL = (0, import_i18n43.__)("Object fit", "elementor");
|
|
4888
4905
|
var positionOptions2 = [
|
|
@@ -4893,12 +4910,12 @@ var positionOptions2 = [
|
|
|
4893
4910
|
{ label: (0, import_i18n43.__)("Scale down", "elementor"), value: "scale-down" }
|
|
4894
4911
|
];
|
|
4895
4912
|
var ObjectFitField = () => {
|
|
4896
|
-
return /* @__PURE__ */ React67.createElement(StylesField, { bind: "object-fit", propDisplayName: OBJECT_FIT_LABEL }, /* @__PURE__ */ React67.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ React67.createElement(
|
|
4913
|
+
return /* @__PURE__ */ React67.createElement(StylesField, { bind: "object-fit", propDisplayName: OBJECT_FIT_LABEL }, /* @__PURE__ */ React67.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ React67.createElement(import_editor_controls36.SelectControl, { options: positionOptions2 })));
|
|
4897
4914
|
};
|
|
4898
4915
|
|
|
4899
4916
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
4900
4917
|
var React68 = __toESM(require("react"));
|
|
4901
|
-
var
|
|
4918
|
+
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
4902
4919
|
var import_icons20 = require("@elementor/icons");
|
|
4903
4920
|
var import_i18n44 = require("@wordpress/i18n");
|
|
4904
4921
|
var OVERFLOW_LABEL = (0, import_i18n44.__)("Overflow", "elementor");
|
|
@@ -4923,7 +4940,7 @@ var options7 = [
|
|
|
4923
4940
|
}
|
|
4924
4941
|
];
|
|
4925
4942
|
var OverflowField = () => {
|
|
4926
|
-
return /* @__PURE__ */ React68.createElement(StylesField, { bind: "overflow", propDisplayName: OVERFLOW_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ React68.createElement(
|
|
4943
|
+
return /* @__PURE__ */ React68.createElement(StylesField, { bind: "overflow", propDisplayName: OVERFLOW_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ React68.createElement(import_editor_controls37.ToggleControl, { options: options7 })));
|
|
4927
4944
|
};
|
|
4928
4945
|
|
|
4929
4946
|
// src/components/style-sections/size-section/size-section.tsx
|
|
@@ -4962,28 +4979,28 @@ var CssSizeProps = [
|
|
|
4962
4979
|
var ASPECT_RATIO_LABEL = (0, import_i18n45.__)("Aspect Ratio", "elementor");
|
|
4963
4980
|
var SizeSection = () => {
|
|
4964
4981
|
const gridRowRefs = [(0, import_react30.useRef)(null), (0, import_react30.useRef)(null), (0, import_react30.useRef)(null)];
|
|
4965
|
-
return /* @__PURE__ */ React69.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React69.createElement(
|
|
4982
|
+
return /* @__PURE__ */ React69.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React69.createElement(import_ui40.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React69.createElement(import_ui40.Grid, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React69.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React69.createElement(PanelDivider, null), /* @__PURE__ */ React69.createElement(import_ui40.Stack, null, /* @__PURE__ */ React69.createElement(OverflowField, null)), /* @__PURE__ */ React69.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React69.createElement(import_ui40.Stack, { gap: 2, pt: 2 }, /* @__PURE__ */ React69.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React69.createElement(import_editor_controls38.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React69.createElement(PanelDivider, null), /* @__PURE__ */ React69.createElement(ObjectFitField, null), /* @__PURE__ */ React69.createElement(StylesField, { bind: "object-position", propDisplayName: (0, import_i18n45.__)("Object position", "elementor") }, /* @__PURE__ */ React69.createElement(import_ui40.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(import_editor_controls38.PositionControl, null))))));
|
|
4966
4983
|
};
|
|
4967
4984
|
var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
|
|
4968
|
-
return /* @__PURE__ */ React69.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React69.createElement(
|
|
4985
|
+
return /* @__PURE__ */ React69.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React69.createElement(import_ui40.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React69.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(ControlLabel, null, label)), /* @__PURE__ */ React69.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(import_editor_controls38.SizeControl, { extendedOptions, anchorRef: rowRef }))));
|
|
4969
4986
|
};
|
|
4970
4987
|
|
|
4971
4988
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
4972
4989
|
var React70 = __toESM(require("react"));
|
|
4973
|
-
var
|
|
4990
|
+
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
4974
4991
|
var import_i18n46 = require("@wordpress/i18n");
|
|
4975
4992
|
var MARGIN_LABEL = (0, import_i18n46.__)("Margin", "elementor");
|
|
4976
4993
|
var PADDING_LABEL = (0, import_i18n46.__)("Padding", "elementor");
|
|
4977
4994
|
var SpacingSection = () => {
|
|
4978
4995
|
const { isSiteRtl } = useDirection();
|
|
4979
4996
|
return /* @__PURE__ */ React70.createElement(SectionContent, null, /* @__PURE__ */ React70.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React70.createElement(
|
|
4980
|
-
|
|
4997
|
+
import_editor_controls39.LinkedDimensionsControl,
|
|
4981
4998
|
{
|
|
4982
4999
|
label: MARGIN_LABEL,
|
|
4983
5000
|
isSiteRtl,
|
|
4984
5001
|
min: -Number.MAX_SAFE_INTEGER
|
|
4985
5002
|
}
|
|
4986
|
-
)), /* @__PURE__ */ React70.createElement(PanelDivider, null), /* @__PURE__ */ React70.createElement(StylesField, { bind: "padding", propDisplayName: PADDING_LABEL }, /* @__PURE__ */ React70.createElement(
|
|
5003
|
+
)), /* @__PURE__ */ React70.createElement(PanelDivider, null), /* @__PURE__ */ React70.createElement(StylesField, { bind: "padding", propDisplayName: PADDING_LABEL }, /* @__PURE__ */ React70.createElement(import_editor_controls39.LinkedDimensionsControl, { label: PADDING_LABEL, isSiteRtl })));
|
|
4987
5004
|
};
|
|
4988
5005
|
|
|
4989
5006
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -4991,38 +5008,38 @@ var React87 = __toESM(require("react"));
|
|
|
4991
5008
|
|
|
4992
5009
|
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
4993
5010
|
var React71 = __toESM(require("react"));
|
|
4994
|
-
var
|
|
5011
|
+
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
4995
5012
|
var import_i18n47 = require("@wordpress/i18n");
|
|
4996
5013
|
var COLUMN_COUNT_LABEL = (0, import_i18n47.__)("Columns", "elementor");
|
|
4997
5014
|
var ColumnCountField = () => {
|
|
4998
|
-
return /* @__PURE__ */ React71.createElement(StylesField, { bind: "column-count", propDisplayName: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React71.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React71.createElement(
|
|
5015
|
+
return /* @__PURE__ */ React71.createElement(StylesField, { bind: "column-count", propDisplayName: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React71.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React71.createElement(import_editor_controls40.NumberControl, { shouldForceInt: true, min: 0, step: 1 })));
|
|
4999
5016
|
};
|
|
5000
5017
|
|
|
5001
5018
|
// src/components/style-sections/typography-section/column-gap-field.tsx
|
|
5002
5019
|
var React72 = __toESM(require("react"));
|
|
5003
5020
|
var import_react31 = require("react");
|
|
5004
|
-
var
|
|
5021
|
+
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
5005
5022
|
var import_i18n48 = require("@wordpress/i18n");
|
|
5006
5023
|
var COLUMN_GAP_LABEL = (0, import_i18n48.__)("Column gap", "elementor");
|
|
5007
5024
|
var ColumnGapField = () => {
|
|
5008
5025
|
const rowRef = (0, import_react31.useRef)(null);
|
|
5009
|
-
return /* @__PURE__ */ React72.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React72.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React72.createElement(
|
|
5026
|
+
return /* @__PURE__ */ React72.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React72.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React72.createElement(import_editor_controls41.SizeControl, { anchorRef: rowRef })));
|
|
5010
5027
|
};
|
|
5011
5028
|
|
|
5012
5029
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
5013
5030
|
var React73 = __toESM(require("react"));
|
|
5014
|
-
var
|
|
5031
|
+
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
5015
5032
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
5016
5033
|
var import_i18n49 = require("@wordpress/i18n");
|
|
5017
5034
|
var FONT_FAMILY_LABEL = (0, import_i18n49.__)("Font family", "elementor");
|
|
5018
5035
|
var FontFamilyField = () => {
|
|
5019
|
-
const fontFamilies = (0,
|
|
5036
|
+
const fontFamilies = (0, import_editor_controls42.useFontFamilies)();
|
|
5020
5037
|
const sectionWidth = (0, import_editor_ui7.useSectionWidth)();
|
|
5021
5038
|
if (fontFamilies.length === 0) {
|
|
5022
5039
|
return null;
|
|
5023
5040
|
}
|
|
5024
5041
|
return /* @__PURE__ */ React73.createElement(StylesField, { bind: "font-family", propDisplayName: FONT_FAMILY_LABEL }, /* @__PURE__ */ React73.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ React73.createElement(
|
|
5025
|
-
|
|
5042
|
+
import_editor_controls42.FontFamilyControl,
|
|
5026
5043
|
{
|
|
5027
5044
|
fontFamilies,
|
|
5028
5045
|
sectionWidth,
|
|
@@ -5034,17 +5051,17 @@ var FontFamilyField = () => {
|
|
|
5034
5051
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
5035
5052
|
var React74 = __toESM(require("react"));
|
|
5036
5053
|
var import_react32 = require("react");
|
|
5037
|
-
var
|
|
5054
|
+
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
5038
5055
|
var import_i18n50 = require("@wordpress/i18n");
|
|
5039
5056
|
var FONT_SIZE_LABEL = (0, import_i18n50.__)("Font size", "elementor");
|
|
5040
5057
|
var FontSizeField = () => {
|
|
5041
5058
|
const rowRef = (0, import_react32.useRef)(null);
|
|
5042
|
-
return /* @__PURE__ */ React74.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React74.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React74.createElement(
|
|
5059
|
+
return /* @__PURE__ */ React74.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React74.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React74.createElement(import_editor_controls43.SizeControl, { anchorRef: rowRef, ariaLabel: FONT_SIZE_LABEL })));
|
|
5043
5060
|
};
|
|
5044
5061
|
|
|
5045
5062
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
5046
5063
|
var React75 = __toESM(require("react"));
|
|
5047
|
-
var
|
|
5064
|
+
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
5048
5065
|
var import_icons21 = require("@elementor/icons");
|
|
5049
5066
|
var import_i18n51 = require("@wordpress/i18n");
|
|
5050
5067
|
var FONT_STYLE_LABEL = (0, import_i18n51.__)("Font style", "elementor");
|
|
@@ -5063,12 +5080,12 @@ var options8 = [
|
|
|
5063
5080
|
}
|
|
5064
5081
|
];
|
|
5065
5082
|
var FontStyleField = () => {
|
|
5066
|
-
return /* @__PURE__ */ React75.createElement(StylesField, { bind: "font-style", propDisplayName: FONT_STYLE_LABEL }, /* @__PURE__ */ React75.createElement(StylesFieldLayout, { label: FONT_STYLE_LABEL }, /* @__PURE__ */ React75.createElement(
|
|
5083
|
+
return /* @__PURE__ */ React75.createElement(StylesField, { bind: "font-style", propDisplayName: FONT_STYLE_LABEL }, /* @__PURE__ */ React75.createElement(StylesFieldLayout, { label: FONT_STYLE_LABEL }, /* @__PURE__ */ React75.createElement(import_editor_controls44.ToggleControl, { options: options8 })));
|
|
5067
5084
|
};
|
|
5068
5085
|
|
|
5069
5086
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
5070
5087
|
var React76 = __toESM(require("react"));
|
|
5071
|
-
var
|
|
5088
|
+
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
5072
5089
|
var import_i18n52 = require("@wordpress/i18n");
|
|
5073
5090
|
var FONT_WEIGHT_LABEL = (0, import_i18n52.__)("Font weight", "elementor");
|
|
5074
5091
|
var fontWeightOptions = [
|
|
@@ -5083,40 +5100,40 @@ var fontWeightOptions = [
|
|
|
5083
5100
|
{ value: "900", label: (0, import_i18n52.__)("900 - Black", "elementor") }
|
|
5084
5101
|
];
|
|
5085
5102
|
var FontWeightField = () => {
|
|
5086
|
-
return /* @__PURE__ */ React76.createElement(StylesField, { bind: "font-weight", propDisplayName: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React76.createElement(
|
|
5103
|
+
return /* @__PURE__ */ React76.createElement(StylesField, { bind: "font-weight", propDisplayName: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React76.createElement(import_editor_controls45.SelectControl, { options: fontWeightOptions })));
|
|
5087
5104
|
};
|
|
5088
5105
|
|
|
5089
5106
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
5090
5107
|
var React77 = __toESM(require("react"));
|
|
5091
5108
|
var import_react33 = require("react");
|
|
5092
|
-
var
|
|
5109
|
+
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
5093
5110
|
var import_i18n53 = require("@wordpress/i18n");
|
|
5094
5111
|
var LETTER_SPACING_LABEL = (0, import_i18n53.__)("Letter spacing", "elementor");
|
|
5095
5112
|
var LetterSpacingField = () => {
|
|
5096
5113
|
const rowRef = (0, import_react33.useRef)(null);
|
|
5097
|
-
return /* @__PURE__ */ React77.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React77.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React77.createElement(
|
|
5114
|
+
return /* @__PURE__ */ React77.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React77.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React77.createElement(import_editor_controls46.SizeControl, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
|
|
5098
5115
|
};
|
|
5099
5116
|
|
|
5100
5117
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
5101
5118
|
var React78 = __toESM(require("react"));
|
|
5102
5119
|
var import_react34 = require("react");
|
|
5103
|
-
var
|
|
5120
|
+
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
5104
5121
|
var import_i18n54 = require("@wordpress/i18n");
|
|
5105
5122
|
var LINE_HEIGHT_LABEL = (0, import_i18n54.__)("Line height", "elementor");
|
|
5106
5123
|
var LineHeightField = () => {
|
|
5107
5124
|
const rowRef = (0, import_react34.useRef)(null);
|
|
5108
|
-
return /* @__PURE__ */ React78.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React78.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React78.createElement(
|
|
5125
|
+
return /* @__PURE__ */ React78.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React78.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React78.createElement(import_editor_controls47.SizeControl, { anchorRef: rowRef })));
|
|
5109
5126
|
};
|
|
5110
5127
|
|
|
5111
5128
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
5112
5129
|
var React79 = __toESM(require("react"));
|
|
5113
|
-
var
|
|
5130
|
+
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
5114
5131
|
var import_icons22 = require("@elementor/icons");
|
|
5115
|
-
var
|
|
5132
|
+
var import_ui41 = require("@elementor/ui");
|
|
5116
5133
|
var import_i18n55 = require("@wordpress/i18n");
|
|
5117
5134
|
var TEXT_ALIGNMENT_LABEL = (0, import_i18n55.__)("Text align", "elementor");
|
|
5118
|
-
var AlignStartIcon = (0,
|
|
5119
|
-
var AlignEndIcon = (0,
|
|
5135
|
+
var AlignStartIcon = (0, import_ui41.withDirection)(import_icons22.AlignLeftIcon);
|
|
5136
|
+
var AlignEndIcon = (0, import_ui41.withDirection)(import_icons22.AlignRightIcon);
|
|
5120
5137
|
var options9 = [
|
|
5121
5138
|
{
|
|
5122
5139
|
value: "start",
|
|
@@ -5144,21 +5161,21 @@ var options9 = [
|
|
|
5144
5161
|
}
|
|
5145
5162
|
];
|
|
5146
5163
|
var TextAlignmentField = () => {
|
|
5147
|
-
return /* @__PURE__ */ React79.createElement(StylesField, { bind: "text-align", propDisplayName: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React79.createElement(UiProviders, null, /* @__PURE__ */ React79.createElement(StylesFieldLayout, { label: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React79.createElement(
|
|
5164
|
+
return /* @__PURE__ */ React79.createElement(StylesField, { bind: "text-align", propDisplayName: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React79.createElement(UiProviders, null, /* @__PURE__ */ React79.createElement(StylesFieldLayout, { label: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React79.createElement(import_editor_controls48.ToggleControl, { options: options9 }))));
|
|
5148
5165
|
};
|
|
5149
5166
|
|
|
5150
5167
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
5151
5168
|
var React80 = __toESM(require("react"));
|
|
5152
|
-
var
|
|
5169
|
+
var import_editor_controls49 = require("@elementor/editor-controls");
|
|
5153
5170
|
var import_i18n56 = require("@wordpress/i18n");
|
|
5154
5171
|
var TEXT_COLOR_LABEL = (0, import_i18n56.__)("Text color", "elementor");
|
|
5155
5172
|
var TextColorField = () => {
|
|
5156
|
-
return /* @__PURE__ */ React80.createElement(StylesField, { bind: "color", propDisplayName: TEXT_COLOR_LABEL }, /* @__PURE__ */ React80.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ React80.createElement(
|
|
5173
|
+
return /* @__PURE__ */ React80.createElement(StylesField, { bind: "color", propDisplayName: TEXT_COLOR_LABEL }, /* @__PURE__ */ React80.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ React80.createElement(import_editor_controls49.ColorControl, { id: "text-color-control" })));
|
|
5157
5174
|
};
|
|
5158
5175
|
|
|
5159
5176
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
5160
5177
|
var React81 = __toESM(require("react"));
|
|
5161
|
-
var
|
|
5178
|
+
var import_editor_controls50 = require("@elementor/editor-controls");
|
|
5162
5179
|
var import_icons23 = require("@elementor/icons");
|
|
5163
5180
|
var import_i18n57 = require("@wordpress/i18n");
|
|
5164
5181
|
var TEXT_DECORATION_LABEL = (0, import_i18n57.__)("Line decoration", "elementor");
|
|
@@ -5189,11 +5206,11 @@ var options10 = [
|
|
|
5189
5206
|
showTooltip: true
|
|
5190
5207
|
}
|
|
5191
5208
|
];
|
|
5192
|
-
var TextDecorationField = () => /* @__PURE__ */ React81.createElement(StylesField, { bind: "text-decoration", propDisplayName: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React81.createElement(StylesFieldLayout, { label: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React81.createElement(
|
|
5209
|
+
var TextDecorationField = () => /* @__PURE__ */ React81.createElement(StylesField, { bind: "text-decoration", propDisplayName: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React81.createElement(StylesFieldLayout, { label: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React81.createElement(import_editor_controls50.ToggleControl, { options: options10, exclusive: false })));
|
|
5193
5210
|
|
|
5194
5211
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
5195
5212
|
var React82 = __toESM(require("react"));
|
|
5196
|
-
var
|
|
5213
|
+
var import_editor_controls51 = require("@elementor/editor-controls");
|
|
5197
5214
|
var import_icons24 = require("@elementor/icons");
|
|
5198
5215
|
var import_i18n58 = require("@wordpress/i18n");
|
|
5199
5216
|
var TEXT_DIRECTION_LABEL = (0, import_i18n58.__)("Direction", "elementor");
|
|
@@ -5212,18 +5229,18 @@ var options11 = [
|
|
|
5212
5229
|
}
|
|
5213
5230
|
];
|
|
5214
5231
|
var TextDirectionField = () => {
|
|
5215
|
-
return /* @__PURE__ */ React82.createElement(StylesField, { bind: "direction", propDisplayName: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React82.createElement(StylesFieldLayout, { label: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React82.createElement(
|
|
5232
|
+
return /* @__PURE__ */ React82.createElement(StylesField, { bind: "direction", propDisplayName: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React82.createElement(StylesFieldLayout, { label: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React82.createElement(import_editor_controls51.ToggleControl, { options: options11 })));
|
|
5216
5233
|
};
|
|
5217
5234
|
|
|
5218
5235
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
5219
5236
|
var React84 = __toESM(require("react"));
|
|
5220
|
-
var
|
|
5237
|
+
var import_editor_controls52 = require("@elementor/editor-controls");
|
|
5221
5238
|
var import_i18n59 = require("@wordpress/i18n");
|
|
5222
5239
|
|
|
5223
5240
|
// src/components/add-or-remove-content.tsx
|
|
5224
5241
|
var React83 = __toESM(require("react"));
|
|
5225
5242
|
var import_icons25 = require("@elementor/icons");
|
|
5226
|
-
var
|
|
5243
|
+
var import_ui42 = require("@elementor/ui");
|
|
5227
5244
|
var SIZE = "tiny";
|
|
5228
5245
|
var AddOrRemoveContent = ({
|
|
5229
5246
|
isAdded,
|
|
@@ -5234,7 +5251,7 @@ var AddOrRemoveContent = ({
|
|
|
5234
5251
|
renderLabel
|
|
5235
5252
|
}) => {
|
|
5236
5253
|
return /* @__PURE__ */ React83.createElement(SectionContent, null, /* @__PURE__ */ React83.createElement(
|
|
5237
|
-
|
|
5254
|
+
import_ui42.Stack,
|
|
5238
5255
|
{
|
|
5239
5256
|
direction: "row",
|
|
5240
5257
|
sx: {
|
|
@@ -5244,8 +5261,8 @@ var AddOrRemoveContent = ({
|
|
|
5244
5261
|
}
|
|
5245
5262
|
},
|
|
5246
5263
|
renderLabel(),
|
|
5247
|
-
isAdded ? /* @__PURE__ */ React83.createElement(
|
|
5248
|
-
), /* @__PURE__ */ React83.createElement(
|
|
5264
|
+
isAdded ? /* @__PURE__ */ React83.createElement(import_ui42.IconButton, { size: SIZE, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React83.createElement(import_icons25.MinusIcon, { fontSize: SIZE })) : /* @__PURE__ */ React83.createElement(import_ui42.IconButton, { size: SIZE, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React83.createElement(import_icons25.PlusIcon, { fontSize: SIZE }))
|
|
5265
|
+
), /* @__PURE__ */ React83.createElement(import_ui42.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React83.createElement(SectionContent, null, children)));
|
|
5249
5266
|
};
|
|
5250
5267
|
|
|
5251
5268
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -5286,13 +5303,13 @@ var TextStrokeField = () => {
|
|
|
5286
5303
|
disabled: !canEdit,
|
|
5287
5304
|
renderLabel: () => /* @__PURE__ */ React84.createElement(ControlLabel, null, TEXT_STROKE_LABEL)
|
|
5288
5305
|
},
|
|
5289
|
-
/* @__PURE__ */ React84.createElement(
|
|
5306
|
+
/* @__PURE__ */ React84.createElement(import_editor_controls52.StrokeControl, null)
|
|
5290
5307
|
));
|
|
5291
5308
|
};
|
|
5292
5309
|
|
|
5293
5310
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
5294
5311
|
var React85 = __toESM(require("react"));
|
|
5295
|
-
var
|
|
5312
|
+
var import_editor_controls53 = require("@elementor/editor-controls");
|
|
5296
5313
|
var import_icons26 = require("@elementor/icons");
|
|
5297
5314
|
var import_i18n60 = require("@wordpress/i18n");
|
|
5298
5315
|
var TEXT_TRANSFORM_LABEL = (0, import_i18n60.__)("Text transform", "elementor");
|
|
@@ -5322,17 +5339,17 @@ var options12 = [
|
|
|
5322
5339
|
showTooltip: true
|
|
5323
5340
|
}
|
|
5324
5341
|
];
|
|
5325
|
-
var TransformField = () => /* @__PURE__ */ React85.createElement(StylesField, { bind: "text-transform", propDisplayName: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React85.createElement(StylesFieldLayout, { label: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React85.createElement(
|
|
5342
|
+
var TransformField = () => /* @__PURE__ */ React85.createElement(StylesField, { bind: "text-transform", propDisplayName: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React85.createElement(StylesFieldLayout, { label: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React85.createElement(import_editor_controls53.ToggleControl, { options: options12 })));
|
|
5326
5343
|
|
|
5327
5344
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
5328
5345
|
var React86 = __toESM(require("react"));
|
|
5329
5346
|
var import_react35 = require("react");
|
|
5330
|
-
var
|
|
5347
|
+
var import_editor_controls54 = require("@elementor/editor-controls");
|
|
5331
5348
|
var import_i18n61 = require("@wordpress/i18n");
|
|
5332
5349
|
var WORD_SPACING_LABEL = (0, import_i18n61.__)("Word spacing", "elementor");
|
|
5333
5350
|
var WordSpacingField = () => {
|
|
5334
5351
|
const rowRef = (0, import_react35.useRef)(null);
|
|
5335
|
-
return /* @__PURE__ */ React86.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React86.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React86.createElement(
|
|
5352
|
+
return /* @__PURE__ */ React86.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React86.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React86.createElement(import_editor_controls54.SizeControl, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
|
|
5336
5353
|
};
|
|
5337
5354
|
|
|
5338
5355
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -5405,7 +5422,7 @@ var StyleTab = () => {
|
|
|
5405
5422
|
},
|
|
5406
5423
|
setMetaState: setActiveStyleState
|
|
5407
5424
|
},
|
|
5408
|
-
/* @__PURE__ */ React89.createElement(import_session8.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React89.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React89.createElement(ClassesHeader, null, /* @__PURE__ */ React89.createElement(CssClassSelector, null), /* @__PURE__ */ React89.createElement(
|
|
5425
|
+
/* @__PURE__ */ React89.createElement(import_session8.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React89.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React89.createElement(ClassesHeader, null, /* @__PURE__ */ React89.createElement(CssClassSelector, null), /* @__PURE__ */ React89.createElement(import_ui43.Divider, null)), /* @__PURE__ */ React89.createElement(SectionsList, null, /* @__PURE__ */ React89.createElement(
|
|
5409
5426
|
StyleTabSection,
|
|
5410
5427
|
{
|
|
5411
5428
|
section: {
|
|
@@ -5533,12 +5550,12 @@ var StyleTab = () => {
|
|
|
5533
5550
|
"transition"
|
|
5534
5551
|
]
|
|
5535
5552
|
}
|
|
5536
|
-
), /* @__PURE__ */ React89.createElement(StyleTabSlot, null)), /* @__PURE__ */ React89.createElement(
|
|
5553
|
+
), /* @__PURE__ */ React89.createElement(StyleTabSlot, null)), /* @__PURE__ */ React89.createElement(import_ui43.Box, { sx: { height: "150px" } })))
|
|
5537
5554
|
));
|
|
5538
5555
|
};
|
|
5539
5556
|
function ClassesHeader({ children }) {
|
|
5540
5557
|
const scrollDirection = useScrollDirection();
|
|
5541
|
-
return /* @__PURE__ */ React89.createElement(
|
|
5558
|
+
return /* @__PURE__ */ React89.createElement(import_ui43.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
5542
5559
|
}
|
|
5543
5560
|
function useCurrentClassesProp() {
|
|
5544
5561
|
const { elementType } = useElement();
|
|
@@ -5565,12 +5582,12 @@ var PanelTabContent = () => {
|
|
|
5565
5582
|
const editorDefaults = useDefaultPanelSettings();
|
|
5566
5583
|
const defaultComponentTab = editorDefaults.defaultTab;
|
|
5567
5584
|
const isInteractionsActive = (0, import_editor_v1_adapters7.isExperimentActive)("e_interactions");
|
|
5568
|
-
const isPromotedElement = !!(0,
|
|
5585
|
+
const isPromotedElement = !!(0, import_editor_elements13.getWidgetsCache)()?.[element.type]?.meta?.is_pro_promotion;
|
|
5569
5586
|
const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
5570
5587
|
const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;
|
|
5571
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
5572
|
-
return /* @__PURE__ */ React90.createElement(ScrollProvider, null, /* @__PURE__ */ React90.createElement(
|
|
5573
|
-
|
|
5588
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui44.useTabs)(currentTab);
|
|
5589
|
+
return /* @__PURE__ */ React90.createElement(ScrollProvider, null, /* @__PURE__ */ React90.createElement(import_ui44.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React90.createElement(import_ui44.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React90.createElement(
|
|
5590
|
+
import_ui44.Tabs,
|
|
5574
5591
|
{
|
|
5575
5592
|
variant: "fullWidth",
|
|
5576
5593
|
size: "small",
|
|
@@ -5581,18 +5598,18 @@ var PanelTabContent = () => {
|
|
|
5581
5598
|
setCurrentTab(newValue);
|
|
5582
5599
|
}
|
|
5583
5600
|
},
|
|
5584
|
-
!isPromotedElement && /* @__PURE__ */ React90.createElement(
|
|
5585
|
-
/* @__PURE__ */ React90.createElement(
|
|
5586
|
-
isInteractionsActive && /* @__PURE__ */ React90.createElement(
|
|
5587
|
-
), /* @__PURE__ */ React90.createElement(
|
|
5601
|
+
!isPromotedElement && /* @__PURE__ */ React90.createElement(import_ui44.Tab, { label: (0, import_i18n63.__)("General", "elementor"), ...getTabProps("settings") }),
|
|
5602
|
+
/* @__PURE__ */ React90.createElement(import_ui44.Tab, { label: (0, import_i18n63.__)("Style", "elementor"), ...getTabProps("style") }),
|
|
5603
|
+
isInteractionsActive && /* @__PURE__ */ React90.createElement(import_ui44.Tab, { label: (0, import_i18n63.__)("Interactions", "elementor"), ...getTabProps("interactions") })
|
|
5604
|
+
), /* @__PURE__ */ React90.createElement(import_ui44.Divider, null)), !isPromotedElement && /* @__PURE__ */ React90.createElement(import_ui44.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React90.createElement(SettingsTab, null)), /* @__PURE__ */ React90.createElement(import_ui44.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React90.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React90.createElement(import_ui44.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React90.createElement(InteractionsTab, null))));
|
|
5588
5605
|
};
|
|
5589
5606
|
|
|
5590
5607
|
// src/components/editing-panel.tsx
|
|
5591
5608
|
var { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = (0, import_locations5.createLocation)();
|
|
5592
5609
|
var { useMenuItems } = import_menus.controlActionsMenu;
|
|
5593
5610
|
var EditingPanel = () => {
|
|
5594
|
-
const { element, elementType, settings } = (0,
|
|
5595
|
-
const controlReplacements = (0,
|
|
5611
|
+
const { element, elementType, settings } = (0, import_editor_elements14.useSelectedElementSettings)();
|
|
5612
|
+
const controlReplacements = (0, import_editor_controls55.getControlReplacements)();
|
|
5596
5613
|
const menuItems = useMenuItems().default;
|
|
5597
5614
|
if (!element || !elementType) {
|
|
5598
5615
|
return null;
|
|
@@ -5603,7 +5620,7 @@ var EditingPanel = () => {
|
|
|
5603
5620
|
if (ReplacementComponent) {
|
|
5604
5621
|
panelContent = /* @__PURE__ */ React91.createElement(ReplacementComponent, null);
|
|
5605
5622
|
}
|
|
5606
|
-
return /* @__PURE__ */ React91.createElement(
|
|
5623
|
+
return /* @__PURE__ */ React91.createElement(import_ui45.ErrorBoundary, { fallback: /* @__PURE__ */ React91.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React91.createElement(import_session9.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React91.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React91.createElement(import_editor_controls55.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React91.createElement(import_editor_controls55.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React91.createElement(ElementProvider, { element, elementType, settings }, /* @__PURE__ */ React91.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React91.createElement(PanelHeaderTopSlot, null), panelContent)))))));
|
|
5607
5624
|
};
|
|
5608
5625
|
|
|
5609
5626
|
// src/init.ts
|
|
@@ -5623,10 +5640,10 @@ var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__cre
|
|
|
5623
5640
|
});
|
|
5624
5641
|
|
|
5625
5642
|
// src/sync/is-atomic-widget-selected.ts
|
|
5626
|
-
var
|
|
5643
|
+
var import_editor_elements15 = require("@elementor/editor-elements");
|
|
5627
5644
|
var isAtomicWidgetSelected = () => {
|
|
5628
|
-
const selectedElements = (0,
|
|
5629
|
-
const widgetCache = (0,
|
|
5645
|
+
const selectedElements = (0, import_editor_elements15.getSelectedElements)();
|
|
5646
|
+
const widgetCache = (0, import_editor_elements15.getWidgetsCache)();
|
|
5630
5647
|
if (selectedElements.length !== 1) {
|
|
5631
5648
|
return false;
|
|
5632
5649
|
}
|
|
@@ -5652,12 +5669,12 @@ var EditingPanelHooks = () => {
|
|
|
5652
5669
|
};
|
|
5653
5670
|
|
|
5654
5671
|
// src/components/promotions/init.tsx
|
|
5655
|
-
var
|
|
5672
|
+
var import_editor_controls57 = require("@elementor/editor-controls");
|
|
5656
5673
|
|
|
5657
5674
|
// src/components/promotions/custom-css.tsx
|
|
5658
5675
|
var React92 = __toESM(require("react"));
|
|
5659
5676
|
var import_react39 = require("react");
|
|
5660
|
-
var
|
|
5677
|
+
var import_editor_controls56 = require("@elementor/editor-controls");
|
|
5661
5678
|
var import_i18n65 = require("@wordpress/i18n");
|
|
5662
5679
|
var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
|
|
5663
5680
|
var CustomCssSection = () => {
|
|
@@ -5669,7 +5686,7 @@ var CustomCssSection = () => {
|
|
|
5669
5686
|
name: "Custom CSS",
|
|
5670
5687
|
title: (0, import_i18n65.__)("Custom CSS", "elementor"),
|
|
5671
5688
|
action: {
|
|
5672
|
-
component: /* @__PURE__ */ React92.createElement(
|
|
5689
|
+
component: /* @__PURE__ */ React92.createElement(import_editor_controls56.PromotionTrigger, { ref: triggerRef, promotionKey: "customCss", trackingData: TRACKING_DATA }),
|
|
5673
5690
|
onClick: () => triggerRef.current?.toggle()
|
|
5674
5691
|
}
|
|
5675
5692
|
}
|
|
@@ -5685,24 +5702,24 @@ var init = () => {
|
|
|
5685
5702
|
options: { overwrite: true }
|
|
5686
5703
|
});
|
|
5687
5704
|
if (!window.elementorPro) {
|
|
5688
|
-
controlsRegistry.register("attributes",
|
|
5689
|
-
controlsRegistry.register("display-conditions",
|
|
5705
|
+
controlsRegistry.register("attributes", import_editor_controls57.AttributesControl, "two-columns");
|
|
5706
|
+
controlsRegistry.register("display-conditions", import_editor_controls57.DisplayConditionsControl, "two-columns");
|
|
5690
5707
|
}
|
|
5691
5708
|
};
|
|
5692
5709
|
|
|
5693
5710
|
// src/controls-registry/element-controls/tabs-control/tabs-control.tsx
|
|
5694
5711
|
var React93 = __toESM(require("react"));
|
|
5695
|
-
var
|
|
5696
|
-
var
|
|
5712
|
+
var import_editor_controls59 = require("@elementor/editor-controls");
|
|
5713
|
+
var import_editor_elements18 = require("@elementor/editor-elements");
|
|
5697
5714
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
5698
5715
|
var import_icons28 = require("@elementor/icons");
|
|
5699
|
-
var
|
|
5716
|
+
var import_ui46 = require("@elementor/ui");
|
|
5700
5717
|
var import_i18n67 = require("@wordpress/i18n");
|
|
5701
5718
|
|
|
5702
5719
|
// src/controls-registry/element-controls/get-element-by-type.ts
|
|
5703
|
-
var
|
|
5720
|
+
var import_editor_elements16 = require("@elementor/editor-elements");
|
|
5704
5721
|
var getElementByType = (elementId, type) => {
|
|
5705
|
-
const currentElement = (0,
|
|
5722
|
+
const currentElement = (0, import_editor_elements16.getContainer)(elementId);
|
|
5706
5723
|
if (!currentElement) {
|
|
5707
5724
|
return null;
|
|
5708
5725
|
}
|
|
@@ -5713,14 +5730,14 @@ var getElementByType = (elementId, type) => {
|
|
|
5713
5730
|
};
|
|
5714
5731
|
|
|
5715
5732
|
// src/controls-registry/element-controls/tabs-control/use-actions.ts
|
|
5716
|
-
var
|
|
5717
|
-
var
|
|
5733
|
+
var import_editor_controls58 = require("@elementor/editor-controls");
|
|
5734
|
+
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
5718
5735
|
var import_editor_props17 = require("@elementor/editor-props");
|
|
5719
5736
|
var import_i18n66 = require("@wordpress/i18n");
|
|
5720
5737
|
var TAB_ELEMENT_TYPE = "e-tab";
|
|
5721
5738
|
var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
|
|
5722
5739
|
var useActions = () => {
|
|
5723
|
-
const { value, setValue: setDefaultActiveTab } = (0,
|
|
5740
|
+
const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls58.useBoundProp)(import_editor_props17.numberPropTypeUtil);
|
|
5724
5741
|
const defaultActiveTab = value ?? 0;
|
|
5725
5742
|
const duplicateItem = ({
|
|
5726
5743
|
items: items3,
|
|
@@ -5732,12 +5749,12 @@ var useActions = () => {
|
|
|
5732
5749
|
});
|
|
5733
5750
|
items3.forEach(({ item, index }) => {
|
|
5734
5751
|
const tabId = item.id;
|
|
5735
|
-
const tabContentAreaContainer = (0,
|
|
5752
|
+
const tabContentAreaContainer = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5736
5753
|
const tabContentId = tabContentAreaContainer?.children?.[index]?.id;
|
|
5737
5754
|
if (!tabContentId) {
|
|
5738
5755
|
throw new Error("Original content ID is required for duplication");
|
|
5739
5756
|
}
|
|
5740
|
-
(0,
|
|
5757
|
+
(0, import_editor_elements17.duplicateElements)({
|
|
5741
5758
|
elementIds: [tabId, tabContentId],
|
|
5742
5759
|
title: (0, import_i18n66.__)("Duplicate Tab", "elementor"),
|
|
5743
5760
|
onDuplicateElements: () => {
|
|
@@ -5760,10 +5777,10 @@ var useActions = () => {
|
|
|
5760
5777
|
movedElementId,
|
|
5761
5778
|
movedElementIndex
|
|
5762
5779
|
}) => {
|
|
5763
|
-
const tabContentContainer = (0,
|
|
5780
|
+
const tabContentContainer = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5764
5781
|
const tabContent = tabContentContainer?.children?.[movedElementIndex];
|
|
5765
|
-
const movedElement = (0,
|
|
5766
|
-
const tabsMenu = (0,
|
|
5782
|
+
const movedElement = (0, import_editor_elements17.getContainer)(movedElementId);
|
|
5783
|
+
const tabsMenu = (0, import_editor_elements17.getContainer)(tabsMenuId);
|
|
5767
5784
|
if (!tabContent) {
|
|
5768
5785
|
throw new Error("Content element is required");
|
|
5769
5786
|
}
|
|
@@ -5775,7 +5792,7 @@ var useActions = () => {
|
|
|
5775
5792
|
to: toIndex,
|
|
5776
5793
|
defaultActiveTab
|
|
5777
5794
|
});
|
|
5778
|
-
(0,
|
|
5795
|
+
(0, import_editor_elements17.moveElements)({
|
|
5779
5796
|
title: (0, import_i18n66.__)("Reorder Tabs", "elementor"),
|
|
5780
5797
|
moves: [
|
|
5781
5798
|
{
|
|
@@ -5809,11 +5826,11 @@ var useActions = () => {
|
|
|
5809
5826
|
items: items3,
|
|
5810
5827
|
defaultActiveTab
|
|
5811
5828
|
});
|
|
5812
|
-
(0,
|
|
5829
|
+
(0, import_editor_elements17.removeElements)({
|
|
5813
5830
|
title: (0, import_i18n66.__)("Tabs", "elementor"),
|
|
5814
5831
|
elementIds: items3.flatMap(({ item, index }) => {
|
|
5815
5832
|
const tabId = item.id;
|
|
5816
|
-
const tabContentContainer = (0,
|
|
5833
|
+
const tabContentContainer = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5817
5834
|
const tabContentId = tabContentContainer?.children?.[index]?.id;
|
|
5818
5835
|
if (!tabContentId) {
|
|
5819
5836
|
throw new Error("Content ID is required");
|
|
@@ -5837,14 +5854,14 @@ var useActions = () => {
|
|
|
5837
5854
|
tabsMenuId,
|
|
5838
5855
|
items: items3
|
|
5839
5856
|
}) => {
|
|
5840
|
-
const tabContentArea = (0,
|
|
5841
|
-
const tabsMenu = (0,
|
|
5857
|
+
const tabContentArea = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5858
|
+
const tabsMenu = (0, import_editor_elements17.getContainer)(tabsMenuId);
|
|
5842
5859
|
if (!tabContentArea || !tabsMenu) {
|
|
5843
5860
|
throw new Error("Tab containers not found");
|
|
5844
5861
|
}
|
|
5845
5862
|
items3.forEach(({ index }) => {
|
|
5846
5863
|
const position = index + 1;
|
|
5847
|
-
(0,
|
|
5864
|
+
(0, import_editor_elements17.createElements)({
|
|
5848
5865
|
title: (0, import_i18n66.__)("Tabs", "elementor"),
|
|
5849
5866
|
elements: [
|
|
5850
5867
|
{
|
|
@@ -5919,7 +5936,7 @@ var TabsControl = ({ label }) => {
|
|
|
5919
5936
|
var TabsControlContent = ({ label }) => {
|
|
5920
5937
|
const { element } = useElement();
|
|
5921
5938
|
const { addItem, duplicateItem, moveItem, removeItem } = useActions();
|
|
5922
|
-
const { [TAB_ELEMENT_TYPE]: tabLinks } = (0,
|
|
5939
|
+
const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, import_editor_elements18.useElementChildren)(element.id, {
|
|
5923
5940
|
[TAB_MENU_ELEMENT_TYPE]: TAB_ELEMENT_TYPE
|
|
5924
5941
|
});
|
|
5925
5942
|
const tabList = getElementByType(element.id, TAB_MENU_ELEMENT_TYPE);
|
|
@@ -5959,7 +5976,7 @@ var TabsControlContent = ({ label }) => {
|
|
|
5959
5976
|
}
|
|
5960
5977
|
};
|
|
5961
5978
|
return /* @__PURE__ */ React93.createElement(
|
|
5962
|
-
|
|
5979
|
+
import_editor_controls59.Repeater,
|
|
5963
5980
|
{
|
|
5964
5981
|
showToggle: false,
|
|
5965
5982
|
values: repeaterValues,
|
|
@@ -5978,27 +5995,27 @@ var TabsControlContent = ({ label }) => {
|
|
|
5978
5995
|
};
|
|
5979
5996
|
var ItemLabel = ({ value, index }) => {
|
|
5980
5997
|
const elementTitle = value?.title;
|
|
5981
|
-
return /* @__PURE__ */ React93.createElement(
|
|
5998
|
+
return /* @__PURE__ */ React93.createElement(import_ui46.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React93.createElement("span", null, elementTitle), /* @__PURE__ */ React93.createElement(ItemDefaultTab, { index }));
|
|
5982
5999
|
};
|
|
5983
6000
|
var ItemDefaultTab = ({ index }) => {
|
|
5984
|
-
const { value: defaultItem } = (0,
|
|
6001
|
+
const { value: defaultItem } = (0, import_editor_controls59.useBoundProp)(import_editor_props18.numberPropTypeUtil);
|
|
5985
6002
|
const isDefault = defaultItem === index;
|
|
5986
6003
|
if (!isDefault) {
|
|
5987
6004
|
return null;
|
|
5988
6005
|
}
|
|
5989
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6006
|
+
return /* @__PURE__ */ React93.createElement(import_ui46.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n67.__)("Default", "elementor") });
|
|
5990
6007
|
};
|
|
5991
6008
|
var ItemContent = ({ value, index }) => {
|
|
5992
6009
|
if (!value.id) {
|
|
5993
6010
|
return null;
|
|
5994
6011
|
}
|
|
5995
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6012
|
+
return /* @__PURE__ */ React93.createElement(import_ui46.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React93.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React93.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n67.__)("Tabs", "elementor") }, /* @__PURE__ */ React93.createElement(DefaultTabControl, { tabIndex: index })));
|
|
5996
6013
|
};
|
|
5997
6014
|
var DefaultTabControl = ({ tabIndex }) => {
|
|
5998
|
-
const { value, setValue } = (0,
|
|
6015
|
+
const { value, setValue } = (0, import_editor_controls59.useBoundProp)(import_editor_props18.numberPropTypeUtil);
|
|
5999
6016
|
const isDefault = value === tabIndex;
|
|
6000
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6001
|
-
|
|
6017
|
+
return /* @__PURE__ */ React93.createElement(import_ui46.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React93.createElement(import_editor_controls59.ControlFormLabel, null, (0, import_i18n67.__)("Set as default tab", "elementor")), /* @__PURE__ */ React93.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React93.createElement(
|
|
6018
|
+
import_ui46.Switch,
|
|
6002
6019
|
{
|
|
6003
6020
|
size: "small",
|
|
6004
6021
|
checked: isDefault,
|
|
@@ -6013,15 +6030,15 @@ var DefaultTabControl = ({ tabIndex }) => {
|
|
|
6013
6030
|
)));
|
|
6014
6031
|
};
|
|
6015
6032
|
var TabLabelControl = ({ elementId }) => {
|
|
6016
|
-
const editorSettings = (0,
|
|
6033
|
+
const editorSettings = (0, import_editor_elements18.useElementEditorSettings)(elementId);
|
|
6017
6034
|
const label = editorSettings?.title ?? "";
|
|
6018
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6019
|
-
|
|
6035
|
+
return /* @__PURE__ */ React93.createElement(import_ui46.Stack, { gap: 1 }, /* @__PURE__ */ React93.createElement(import_editor_controls59.ControlFormLabel, null, (0, import_i18n67.__)("Tab name", "elementor")), /* @__PURE__ */ React93.createElement(
|
|
6036
|
+
import_ui46.TextField,
|
|
6020
6037
|
{
|
|
6021
6038
|
size: "tiny",
|
|
6022
6039
|
value: label,
|
|
6023
6040
|
onChange: ({ target }) => {
|
|
6024
|
-
(0,
|
|
6041
|
+
(0, import_editor_elements18.updateElementEditorSettings)({
|
|
6025
6042
|
elementId,
|
|
6026
6043
|
settings: { title: target.value }
|
|
6027
6044
|
});
|
|
@@ -6037,18 +6054,18 @@ var ConditionalTooltip = ({
|
|
|
6037
6054
|
return children;
|
|
6038
6055
|
}
|
|
6039
6056
|
return /* @__PURE__ */ React93.createElement(
|
|
6040
|
-
|
|
6057
|
+
import_ui46.Infotip,
|
|
6041
6058
|
{
|
|
6042
6059
|
arrow: false,
|
|
6043
6060
|
content: /* @__PURE__ */ React93.createElement(
|
|
6044
|
-
|
|
6061
|
+
import_ui46.Alert,
|
|
6045
6062
|
{
|
|
6046
6063
|
color: "secondary",
|
|
6047
6064
|
icon: /* @__PURE__ */ React93.createElement(import_icons28.InfoCircleFilledIcon, { fontSize: "tiny" }),
|
|
6048
6065
|
size: "small",
|
|
6049
6066
|
sx: { width: 288 }
|
|
6050
6067
|
},
|
|
6051
|
-
/* @__PURE__ */ React93.createElement(
|
|
6068
|
+
/* @__PURE__ */ React93.createElement(import_ui46.Typography, { variant: "body2" }, (0, import_i18n67.__)("To change the default tab, simply set another tab as default.", "elementor"))
|
|
6052
6069
|
)
|
|
6053
6070
|
},
|
|
6054
6071
|
/* @__PURE__ */ React93.createElement("span", null, children)
|
|
@@ -6069,12 +6086,12 @@ var registerElementControls = () => {
|
|
|
6069
6086
|
|
|
6070
6087
|
// src/dynamics/init.ts
|
|
6071
6088
|
var import_editor_canvas3 = require("@elementor/editor-canvas");
|
|
6072
|
-
var
|
|
6089
|
+
var import_editor_controls66 = require("@elementor/editor-controls");
|
|
6073
6090
|
var import_menus2 = require("@elementor/menus");
|
|
6074
6091
|
|
|
6075
6092
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6076
6093
|
var React94 = __toESM(require("react"));
|
|
6077
|
-
var
|
|
6094
|
+
var import_editor_controls61 = require("@elementor/editor-controls");
|
|
6078
6095
|
var import_editor_props20 = require("@elementor/editor-props");
|
|
6079
6096
|
var import_icons29 = require("@elementor/icons");
|
|
6080
6097
|
|
|
@@ -6083,7 +6100,7 @@ var import_react42 = require("react");
|
|
|
6083
6100
|
|
|
6084
6101
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
6085
6102
|
var import_react41 = require("react");
|
|
6086
|
-
var
|
|
6103
|
+
var import_editor_controls60 = require("@elementor/editor-controls");
|
|
6087
6104
|
|
|
6088
6105
|
// src/dynamics/sync/get-atomic-dynamic-tags.ts
|
|
6089
6106
|
var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
|
|
@@ -6167,7 +6184,7 @@ var useAllPropDynamicTags = () => {
|
|
|
6167
6184
|
};
|
|
6168
6185
|
var usePropDynamicTagsInternal = (filterByLicense2) => {
|
|
6169
6186
|
let categories = [];
|
|
6170
|
-
const { propType } = (0,
|
|
6187
|
+
const { propType } = (0, import_editor_controls60.useBoundProp)();
|
|
6171
6188
|
if (propType) {
|
|
6172
6189
|
const propDynamicType = getDynamicPropType(propType);
|
|
6173
6190
|
categories = propDynamicType?.settings.categories || [];
|
|
@@ -6213,13 +6230,13 @@ var useDynamicTag = (tagName) => {
|
|
|
6213
6230
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6214
6231
|
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React94.createElement(import_icons29.DatabaseIcon, { fontSize: "tiny" });
|
|
6215
6232
|
var BackgroundControlDynamicTagLabel = ({ value }) => {
|
|
6216
|
-
const context = (0,
|
|
6217
|
-
return /* @__PURE__ */ React94.createElement(
|
|
6233
|
+
const context = (0, import_editor_controls61.useBoundProp)(import_editor_props20.backgroundImageOverlayPropTypeUtil);
|
|
6234
|
+
return /* @__PURE__ */ React94.createElement(import_editor_controls61.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React94.createElement(import_editor_controls61.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React94.createElement(Wrapper2, { rawValue: value.value })));
|
|
6218
6235
|
};
|
|
6219
6236
|
var Wrapper2 = ({ rawValue }) => {
|
|
6220
|
-
const { propType } = (0,
|
|
6237
|
+
const { propType } = (0, import_editor_controls61.useBoundProp)();
|
|
6221
6238
|
const imageOverlayPropType = propType.prop_types["background-image-overlay"];
|
|
6222
|
-
return /* @__PURE__ */ React94.createElement(
|
|
6239
|
+
return /* @__PURE__ */ React94.createElement(import_editor_controls61.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React94.createElement(import_editor_controls61.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React94.createElement(Content, { rawValue: rawValue.image })));
|
|
6223
6240
|
};
|
|
6224
6241
|
var Content = ({ rawValue }) => {
|
|
6225
6242
|
const src = rawValue.value.src;
|
|
@@ -6229,10 +6246,10 @@ var Content = ({ rawValue }) => {
|
|
|
6229
6246
|
|
|
6230
6247
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
6231
6248
|
var React98 = __toESM(require("react"));
|
|
6232
|
-
var
|
|
6249
|
+
var import_editor_controls64 = require("@elementor/editor-controls");
|
|
6233
6250
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
6234
6251
|
var import_icons31 = require("@elementor/icons");
|
|
6235
|
-
var
|
|
6252
|
+
var import_ui48 = require("@elementor/ui");
|
|
6236
6253
|
var import_i18n69 = require("@wordpress/i18n");
|
|
6237
6254
|
|
|
6238
6255
|
// src/hooks/use-persist-dynamic-value.ts
|
|
@@ -6245,7 +6262,7 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
6245
6262
|
|
|
6246
6263
|
// src/dynamics/dynamic-control.tsx
|
|
6247
6264
|
var React96 = __toESM(require("react"));
|
|
6248
|
-
var
|
|
6265
|
+
var import_editor_controls62 = require("@elementor/editor-controls");
|
|
6249
6266
|
|
|
6250
6267
|
// src/dynamics/components/dynamic-conditional-control.tsx
|
|
6251
6268
|
var React95 = __toESM(require("react"));
|
|
@@ -6298,7 +6315,7 @@ var DynamicConditionalControl = ({
|
|
|
6298
6315
|
|
|
6299
6316
|
// src/dynamics/dynamic-control.tsx
|
|
6300
6317
|
var DynamicControl = ({ bind, children }) => {
|
|
6301
|
-
const { value, setValue } = (0,
|
|
6318
|
+
const { value, setValue } = (0, import_editor_controls62.useBoundProp)(dynamicPropTypeUtil);
|
|
6302
6319
|
const { name = "", group = "", settings } = value ?? {};
|
|
6303
6320
|
const dynamicTag = useDynamicTag(name);
|
|
6304
6321
|
if (!dynamicTag) {
|
|
@@ -6318,7 +6335,7 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
6318
6335
|
});
|
|
6319
6336
|
};
|
|
6320
6337
|
const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
|
|
6321
|
-
return /* @__PURE__ */ React96.createElement(
|
|
6338
|
+
return /* @__PURE__ */ React96.createElement(import_editor_controls62.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React96.createElement(import_editor_controls62.PropKeyProvider, { bind }, /* @__PURE__ */ React96.createElement(
|
|
6322
6339
|
DynamicConditionalControl,
|
|
6323
6340
|
{
|
|
6324
6341
|
propType: dynamicPropType,
|
|
@@ -6332,10 +6349,10 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
6332
6349
|
// src/dynamics/components/dynamic-selection.tsx
|
|
6333
6350
|
var React97 = __toESM(require("react"));
|
|
6334
6351
|
var import_react44 = require("react");
|
|
6335
|
-
var
|
|
6352
|
+
var import_editor_controls63 = require("@elementor/editor-controls");
|
|
6336
6353
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
6337
6354
|
var import_icons30 = require("@elementor/icons");
|
|
6338
|
-
var
|
|
6355
|
+
var import_ui47 = require("@elementor/ui");
|
|
6339
6356
|
var import_i18n68 = require("@wordpress/i18n");
|
|
6340
6357
|
var SIZE2 = "tiny";
|
|
6341
6358
|
var PROMO_TEXT_WIDTH = 170;
|
|
@@ -6344,18 +6361,18 @@ var RENEW_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-renew
|
|
|
6344
6361
|
var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
6345
6362
|
const [searchValue, setSearchValue] = (0, import_react44.useState)("");
|
|
6346
6363
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
6347
|
-
const theme = (0,
|
|
6348
|
-
const { value: anyValue } = (0,
|
|
6349
|
-
const { bind, value: dynamicValue, setValue } = (0,
|
|
6364
|
+
const theme = (0, import_ui47.useTheme)();
|
|
6365
|
+
const { value: anyValue } = (0, import_editor_controls63.useBoundProp)();
|
|
6366
|
+
const { bind, value: dynamicValue, setValue } = (0, import_editor_controls63.useBoundProp)(dynamicPropTypeUtil);
|
|
6350
6367
|
const [, updatePropValueHistory] = usePersistDynamicValue(bind);
|
|
6351
6368
|
const isCurrentValueDynamic = !!dynamicValue;
|
|
6352
6369
|
const options13 = useFilteredOptions(searchValue);
|
|
6353
6370
|
const hasNoDynamicTags = !options13.length && !searchValue.trim();
|
|
6354
6371
|
(0, import_react44.useEffect)(() => {
|
|
6355
6372
|
if (hasNoDynamicTags) {
|
|
6356
|
-
(0,
|
|
6373
|
+
(0, import_editor_controls63.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
6357
6374
|
} else if (expired) {
|
|
6358
|
-
(0,
|
|
6375
|
+
(0, import_editor_controls63.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
6359
6376
|
}
|
|
6360
6377
|
}, [hasNoDynamicTags, expired]);
|
|
6361
6378
|
const handleSearch = (value) => {
|
|
@@ -6395,7 +6412,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6395
6412
|
onSearch: handleSearch,
|
|
6396
6413
|
placeholder: (0, import_i18n68.__)("Search dynamic tags\u2026", "elementor")
|
|
6397
6414
|
}
|
|
6398
|
-
), /* @__PURE__ */ React97.createElement(
|
|
6415
|
+
), /* @__PURE__ */ React97.createElement(import_ui47.Divider, null), /* @__PURE__ */ React97.createElement(
|
|
6399
6416
|
import_editor_ui9.PopoverMenuList,
|
|
6400
6417
|
{
|
|
6401
6418
|
items: virtualizedItems,
|
|
@@ -6417,7 +6434,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6417
6434
|
), getPopOverContent());
|
|
6418
6435
|
};
|
|
6419
6436
|
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React97.createElement(
|
|
6420
|
-
|
|
6437
|
+
import_ui47.Stack,
|
|
6421
6438
|
{
|
|
6422
6439
|
gap: 1,
|
|
6423
6440
|
alignItems: "center",
|
|
@@ -6428,11 +6445,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React97.createElem
|
|
|
6428
6445
|
sx: { pb: 3.5 }
|
|
6429
6446
|
},
|
|
6430
6447
|
/* @__PURE__ */ React97.createElement(import_icons30.DatabaseIcon, { fontSize: "large" }),
|
|
6431
|
-
/* @__PURE__ */ React97.createElement(
|
|
6432
|
-
/* @__PURE__ */ React97.createElement(
|
|
6448
|
+
/* @__PURE__ */ React97.createElement(import_ui47.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n68.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React97.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
6449
|
+
/* @__PURE__ */ React97.createElement(import_ui47.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n68.__)("Try something else.", "elementor"), /* @__PURE__ */ React97.createElement(import_ui47.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n68.__)("Clear & try again", "elementor")))
|
|
6433
6450
|
);
|
|
6434
|
-
var NoDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
|
|
6435
|
-
|
|
6451
|
+
var NoDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(import_ui47.Divider, null), /* @__PURE__ */ React97.createElement(
|
|
6452
|
+
import_ui47.Stack,
|
|
6436
6453
|
{
|
|
6437
6454
|
gap: 1,
|
|
6438
6455
|
alignItems: "center",
|
|
@@ -6443,19 +6460,19 @@ var NoDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment
|
|
|
6443
6460
|
sx: { pb: 3.5 }
|
|
6444
6461
|
},
|
|
6445
6462
|
/* @__PURE__ */ React97.createElement(import_icons30.DatabaseIcon, { fontSize: "large" }),
|
|
6446
|
-
/* @__PURE__ */ React97.createElement(
|
|
6447
|
-
/* @__PURE__ */ React97.createElement(
|
|
6463
|
+
/* @__PURE__ */ React97.createElement(import_ui47.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n68.__)("Streamline your workflow with dynamic tags", "elementor")),
|
|
6464
|
+
/* @__PURE__ */ React97.createElement(import_ui47.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n68.__)("Upgrade now to display your content dynamically.", "elementor")),
|
|
6448
6465
|
/* @__PURE__ */ React97.createElement(
|
|
6449
6466
|
import_editor_ui9.CtaButton,
|
|
6450
6467
|
{
|
|
6451
6468
|
size: "small",
|
|
6452
6469
|
href: PRO_DYNAMIC_TAGS_URL,
|
|
6453
|
-
onClick: () => (0,
|
|
6470
|
+
onClick: () => (0, import_editor_controls63.trackUpgradePromotionClick)({ target_name: "dynamic_tags" })
|
|
6454
6471
|
}
|
|
6455
6472
|
)
|
|
6456
6473
|
));
|
|
6457
|
-
var ExpiredDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
|
|
6458
|
-
|
|
6474
|
+
var ExpiredDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(import_ui47.Divider, null), /* @__PURE__ */ React97.createElement(
|
|
6475
|
+
import_ui47.Stack,
|
|
6459
6476
|
{
|
|
6460
6477
|
gap: 1,
|
|
6461
6478
|
alignItems: "center",
|
|
@@ -6466,14 +6483,14 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fra
|
|
|
6466
6483
|
sx: { pb: 3.5 }
|
|
6467
6484
|
},
|
|
6468
6485
|
/* @__PURE__ */ React97.createElement(import_icons30.DatabaseIcon, { fontSize: "large" }),
|
|
6469
|
-
/* @__PURE__ */ React97.createElement(
|
|
6470
|
-
/* @__PURE__ */ React97.createElement(
|
|
6486
|
+
/* @__PURE__ */ React97.createElement(import_ui47.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n68.__)("Unlock your Dynamic tags again", "elementor")),
|
|
6487
|
+
/* @__PURE__ */ React97.createElement(import_ui47.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n68.__)("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")),
|
|
6471
6488
|
/* @__PURE__ */ React97.createElement(
|
|
6472
6489
|
import_editor_ui9.CtaButton,
|
|
6473
6490
|
{
|
|
6474
6491
|
size: "small",
|
|
6475
6492
|
href: RENEW_DYNAMIC_TAGS_URL,
|
|
6476
|
-
onClick: () => (0,
|
|
6493
|
+
onClick: () => (0, import_editor_controls63.trackUpgradePromotionClick)({ target_name: "dynamic_tags" }),
|
|
6477
6494
|
children: (0, import_i18n68.__)("Renew Now", "elementor")
|
|
6478
6495
|
}
|
|
6479
6496
|
)
|
|
@@ -6498,8 +6515,8 @@ var useFilteredOptions = (searchValue) => {
|
|
|
6498
6515
|
var SIZE3 = "tiny";
|
|
6499
6516
|
var tagsWithoutTabs = ["popup"];
|
|
6500
6517
|
var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
6501
|
-
const { setValue: setAnyValue, propType } = (0,
|
|
6502
|
-
const { bind, value } = (0,
|
|
6518
|
+
const { setValue: setAnyValue, propType } = (0, import_editor_controls64.useBoundProp)();
|
|
6519
|
+
const { bind, value } = (0, import_editor_controls64.useBoundProp)(dynamicPropTypeUtil);
|
|
6503
6520
|
const { expired: readonly } = useLicenseConfig();
|
|
6504
6521
|
const originalPropType = createTopLevelObjectType({
|
|
6505
6522
|
schema: {
|
|
@@ -6507,11 +6524,11 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6507
6524
|
}
|
|
6508
6525
|
});
|
|
6509
6526
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
6510
|
-
const selectionPopoverState = (0,
|
|
6527
|
+
const selectionPopoverState = (0, import_ui48.usePopupState)({ variant: "popover" });
|
|
6511
6528
|
const { name: tagName = "" } = value;
|
|
6512
6529
|
const dynamicTag = useDynamicTag(tagName);
|
|
6513
6530
|
if (!isDynamicTagSupported(tagName) && OriginalControl) {
|
|
6514
|
-
return /* @__PURE__ */ React98.createElement(
|
|
6531
|
+
return /* @__PURE__ */ React98.createElement(import_editor_controls64.PropProvider, { propType: originalPropType, value: { [bind]: null }, setValue: setAnyValue }, /* @__PURE__ */ React98.createElement(import_editor_controls64.PropKeyProvider, { bind }, /* @__PURE__ */ React98.createElement(OriginalControl, { ...props })));
|
|
6515
6532
|
}
|
|
6516
6533
|
const removeDynamicTag = () => {
|
|
6517
6534
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -6519,16 +6536,16 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6519
6536
|
if (!dynamicTag) {
|
|
6520
6537
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
6521
6538
|
}
|
|
6522
|
-
return /* @__PURE__ */ React98.createElement(
|
|
6523
|
-
|
|
6539
|
+
return /* @__PURE__ */ React98.createElement(import_ui48.Box, null, /* @__PURE__ */ React98.createElement(
|
|
6540
|
+
import_ui48.UnstableTag,
|
|
6524
6541
|
{
|
|
6525
6542
|
fullWidth: true,
|
|
6526
6543
|
showActionsOnHover: true,
|
|
6527
6544
|
label: dynamicTag.label,
|
|
6528
6545
|
startIcon: /* @__PURE__ */ React98.createElement(import_icons31.DatabaseIcon, { fontSize: SIZE3 }),
|
|
6529
|
-
...(0,
|
|
6546
|
+
...(0, import_ui48.bindTrigger)(selectionPopoverState),
|
|
6530
6547
|
actions: /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(DynamicSettingsPopover, { dynamicTag, disabled: readonly }), /* @__PURE__ */ React98.createElement(
|
|
6531
|
-
|
|
6548
|
+
import_ui48.IconButton,
|
|
6532
6549
|
{
|
|
6533
6550
|
size: SIZE3,
|
|
6534
6551
|
onClick: removeDynamicTag,
|
|
@@ -6538,7 +6555,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6538
6555
|
))
|
|
6539
6556
|
}
|
|
6540
6557
|
), /* @__PURE__ */ React98.createElement(
|
|
6541
|
-
|
|
6558
|
+
import_ui48.Popover,
|
|
6542
6559
|
{
|
|
6543
6560
|
disablePortal: true,
|
|
6544
6561
|
disableScrollLock: true,
|
|
@@ -6547,7 +6564,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6547
6564
|
PaperProps: {
|
|
6548
6565
|
sx: { my: 1 }
|
|
6549
6566
|
},
|
|
6550
|
-
...(0,
|
|
6567
|
+
...(0, import_ui48.bindPopover)(selectionPopoverState)
|
|
6551
6568
|
},
|
|
6552
6569
|
/* @__PURE__ */ React98.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n69.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React98.createElement(DynamicSelection, { close: selectionPopoverState.close, expired: readonly }))
|
|
6553
6570
|
));
|
|
@@ -6556,22 +6573,22 @@ var DynamicSettingsPopover = ({
|
|
|
6556
6573
|
dynamicTag,
|
|
6557
6574
|
disabled = false
|
|
6558
6575
|
}) => {
|
|
6559
|
-
const popupState = (0,
|
|
6576
|
+
const popupState = (0, import_ui48.usePopupState)({ variant: "popover" });
|
|
6560
6577
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
6561
6578
|
if (!hasDynamicSettings) {
|
|
6562
6579
|
return null;
|
|
6563
6580
|
}
|
|
6564
6581
|
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(
|
|
6565
|
-
|
|
6582
|
+
import_ui48.IconButton,
|
|
6566
6583
|
{
|
|
6567
6584
|
size: SIZE3,
|
|
6568
6585
|
disabled,
|
|
6569
|
-
...!disabled && (0,
|
|
6586
|
+
...!disabled && (0, import_ui48.bindTrigger)(popupState),
|
|
6570
6587
|
"aria-label": (0, import_i18n69.__)("Dynamic settings", "elementor")
|
|
6571
6588
|
},
|
|
6572
6589
|
/* @__PURE__ */ React98.createElement(import_icons31.SettingsIcon, { fontSize: SIZE3 })
|
|
6573
6590
|
), /* @__PURE__ */ React98.createElement(
|
|
6574
|
-
|
|
6591
|
+
import_ui48.Popover,
|
|
6575
6592
|
{
|
|
6576
6593
|
disablePortal: true,
|
|
6577
6594
|
disableScrollLock: true,
|
|
@@ -6580,7 +6597,7 @@ var DynamicSettingsPopover = ({
|
|
|
6580
6597
|
PaperProps: {
|
|
6581
6598
|
sx: { my: 1 }
|
|
6582
6599
|
},
|
|
6583
|
-
...(0,
|
|
6600
|
+
...(0, import_ui48.bindPopover)(popupState)
|
|
6584
6601
|
},
|
|
6585
6602
|
/* @__PURE__ */ React98.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n69.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React98.createElement(
|
|
6586
6603
|
import_editor_ui10.PopoverHeader,
|
|
@@ -6594,25 +6611,25 @@ var DynamicSettingsPopover = ({
|
|
|
6594
6611
|
};
|
|
6595
6612
|
var DynamicSettings = ({ controls, tagName }) => {
|
|
6596
6613
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
6597
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
6614
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui48.useTabs)(0);
|
|
6598
6615
|
if (!tabs.length) {
|
|
6599
6616
|
return null;
|
|
6600
6617
|
}
|
|
6601
6618
|
if (tagsWithoutTabs.includes(tagName)) {
|
|
6602
6619
|
const singleTab = tabs[0];
|
|
6603
|
-
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(
|
|
6620
|
+
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(import_ui48.Divider, null), /* @__PURE__ */ React98.createElement(ControlsItemsStack, { items: singleTab.value.items }));
|
|
6604
6621
|
}
|
|
6605
|
-
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React98.createElement(
|
|
6606
|
-
|
|
6622
|
+
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React98.createElement(import_ui48.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React98.createElement(
|
|
6623
|
+
import_ui48.Tab,
|
|
6607
6624
|
{
|
|
6608
6625
|
key: index,
|
|
6609
6626
|
label: value.label,
|
|
6610
6627
|
sx: { px: 1, py: 0.5 },
|
|
6611
6628
|
...getTabProps(index)
|
|
6612
6629
|
}
|
|
6613
|
-
))), /* @__PURE__ */ React98.createElement(
|
|
6630
|
+
))), /* @__PURE__ */ React98.createElement(import_ui48.Divider, null), tabs.map(({ value }, index) => {
|
|
6614
6631
|
return /* @__PURE__ */ React98.createElement(
|
|
6615
|
-
|
|
6632
|
+
import_ui48.TabPanel,
|
|
6616
6633
|
{
|
|
6617
6634
|
key: index,
|
|
6618
6635
|
sx: { flexGrow: 1, py: 0, overflowY: "auto" },
|
|
@@ -6660,10 +6677,10 @@ var Control2 = ({ control }) => {
|
|
|
6660
6677
|
display: "grid",
|
|
6661
6678
|
gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
|
|
6662
6679
|
} : {};
|
|
6663
|
-
return /* @__PURE__ */ React98.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React98.createElement(
|
|
6680
|
+
return /* @__PURE__ */ React98.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React98.createElement(import_ui48.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React98.createElement(import_ui48.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React98.createElement(import_editor_controls64.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React98.createElement(import_ui48.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React98.createElement(Control, { type: control.type, props: controlProps }))));
|
|
6664
6681
|
};
|
|
6665
6682
|
function ControlsItemsStack({ items: items3 }) {
|
|
6666
|
-
return /* @__PURE__ */ React98.createElement(
|
|
6683
|
+
return /* @__PURE__ */ React98.createElement(import_ui48.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
|
|
6667
6684
|
(item) => item.type === "control" ? /* @__PURE__ */ React98.createElement(Control2, { key: item.value.bind, control: item.value }) : null
|
|
6668
6685
|
));
|
|
6669
6686
|
}
|
|
@@ -6722,11 +6739,11 @@ function getDynamicValue(name, settings, renderPostId) {
|
|
|
6722
6739
|
|
|
6723
6740
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
6724
6741
|
var React99 = __toESM(require("react"));
|
|
6725
|
-
var
|
|
6742
|
+
var import_editor_controls65 = require("@elementor/editor-controls");
|
|
6726
6743
|
var import_icons32 = require("@elementor/icons");
|
|
6727
6744
|
var import_i18n70 = require("@wordpress/i18n");
|
|
6728
6745
|
var usePropDynamicAction = () => {
|
|
6729
|
-
const { propType } = (0,
|
|
6746
|
+
const { propType } = (0, import_editor_controls65.useBoundProp)();
|
|
6730
6747
|
const visible = !!propType && supportsDynamic(propType);
|
|
6731
6748
|
return {
|
|
6732
6749
|
visible,
|
|
@@ -6739,16 +6756,16 @@ var usePropDynamicAction = () => {
|
|
|
6739
6756
|
// src/dynamics/init.ts
|
|
6740
6757
|
var { registerPopoverAction } = import_menus2.controlActionsMenu;
|
|
6741
6758
|
var init2 = () => {
|
|
6742
|
-
(0,
|
|
6759
|
+
(0, import_editor_controls66.registerControlReplacement)({
|
|
6743
6760
|
component: DynamicSelectionControl,
|
|
6744
6761
|
condition: ({ value }) => isDynamicPropValue(value)
|
|
6745
6762
|
});
|
|
6746
|
-
(0,
|
|
6763
|
+
(0, import_editor_controls66.injectIntoRepeaterItemLabel)({
|
|
6747
6764
|
id: "dynamic-background-image",
|
|
6748
6765
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6749
6766
|
component: BackgroundControlDynamicTagLabel
|
|
6750
6767
|
});
|
|
6751
|
-
(0,
|
|
6768
|
+
(0, import_editor_controls66.injectIntoRepeaterItemIcon)({
|
|
6752
6769
|
id: "dynamic-background-image",
|
|
6753
6770
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6754
6771
|
component: BackgroundControlDynamicTagIcon
|
|
@@ -6763,7 +6780,7 @@ var init2 = () => {
|
|
|
6763
6780
|
};
|
|
6764
6781
|
|
|
6765
6782
|
// src/reset-style-props.tsx
|
|
6766
|
-
var
|
|
6783
|
+
var import_editor_controls67 = require("@elementor/editor-controls");
|
|
6767
6784
|
var import_editor_variables2 = require("@elementor/editor-variables");
|
|
6768
6785
|
var import_icons33 = require("@elementor/icons");
|
|
6769
6786
|
var import_menus3 = require("@elementor/menus");
|
|
@@ -6823,7 +6840,7 @@ function initResetStyleProps() {
|
|
|
6823
6840
|
}
|
|
6824
6841
|
function useResetStyleValueProps() {
|
|
6825
6842
|
const isStyle = useIsStyle();
|
|
6826
|
-
const { value, resetValue, propType } = (0,
|
|
6843
|
+
const { value, resetValue, propType } = (0, import_editor_controls67.useBoundProp)();
|
|
6827
6844
|
const hasValue = value !== null && value !== void 0;
|
|
6828
6845
|
const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
|
|
6829
6846
|
const isRequired = !!propType.settings?.required;
|
|
@@ -6851,7 +6868,7 @@ function useResetStyleValueProps() {
|
|
|
6851
6868
|
|
|
6852
6869
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
6853
6870
|
var React105 = __toESM(require("react"));
|
|
6854
|
-
var
|
|
6871
|
+
var import_editor_controls68 = require("@elementor/editor-controls");
|
|
6855
6872
|
var import_editor_props23 = require("@elementor/editor-props");
|
|
6856
6873
|
var import_editor_styles_repository20 = require("@elementor/editor-styles-repository");
|
|
6857
6874
|
var import_i18n75 = require("@wordpress/i18n");
|
|
@@ -6861,7 +6878,7 @@ var React104 = __toESM(require("react"));
|
|
|
6861
6878
|
var import_react46 = require("react");
|
|
6862
6879
|
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
6863
6880
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
6864
|
-
var
|
|
6881
|
+
var import_ui53 = require("@elementor/ui");
|
|
6865
6882
|
var import_i18n74 = require("@wordpress/i18n");
|
|
6866
6883
|
|
|
6867
6884
|
// src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
|
|
@@ -6940,7 +6957,7 @@ var getTransformedValue = async (item, bind, resolve) => {
|
|
|
6940
6957
|
var React100 = __toESM(require("react"));
|
|
6941
6958
|
var import_editor_responsive4 = require("@elementor/editor-responsive");
|
|
6942
6959
|
var import_icons34 = require("@elementor/icons");
|
|
6943
|
-
var
|
|
6960
|
+
var import_ui49 = require("@elementor/ui");
|
|
6944
6961
|
var SIZE4 = "tiny";
|
|
6945
6962
|
var DEFAULT_BREAKPOINT3 = "desktop";
|
|
6946
6963
|
var breakpointIconMap = {
|
|
@@ -6960,21 +6977,21 @@ var BreakpointIcon = ({ breakpoint }) => {
|
|
|
6960
6977
|
return null;
|
|
6961
6978
|
}
|
|
6962
6979
|
const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
|
|
6963
|
-
return /* @__PURE__ */ React100.createElement(
|
|
6980
|
+
return /* @__PURE__ */ React100.createElement(import_ui49.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React100.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
|
|
6964
6981
|
};
|
|
6965
6982
|
|
|
6966
6983
|
// src/styles-inheritance/components/infotip/label-chip.tsx
|
|
6967
6984
|
var React101 = __toESM(require("react"));
|
|
6968
6985
|
var import_editor_styles_repository19 = require("@elementor/editor-styles-repository");
|
|
6969
6986
|
var import_icons35 = require("@elementor/icons");
|
|
6970
|
-
var
|
|
6987
|
+
var import_ui50 = require("@elementor/ui");
|
|
6971
6988
|
var import_i18n73 = require("@wordpress/i18n");
|
|
6972
6989
|
var SIZE5 = "tiny";
|
|
6973
6990
|
var LabelChip = ({ displayLabel, provider }) => {
|
|
6974
6991
|
const isBaseStyle = provider === import_editor_styles_repository19.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
|
|
6975
|
-
const chipIcon = isBaseStyle ? /* @__PURE__ */ React101.createElement(
|
|
6992
|
+
const chipIcon = isBaseStyle ? /* @__PURE__ */ React101.createElement(import_ui50.Tooltip, { title: (0, import_i18n73.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React101.createElement(import_icons35.InfoCircleIcon, { fontSize: SIZE5 })) : void 0;
|
|
6976
6993
|
return /* @__PURE__ */ React101.createElement(
|
|
6977
|
-
|
|
6994
|
+
import_ui50.Chip,
|
|
6978
6995
|
{
|
|
6979
6996
|
label: displayLabel,
|
|
6980
6997
|
size: SIZE5,
|
|
@@ -7000,10 +7017,10 @@ var LabelChip = ({ displayLabel, provider }) => {
|
|
|
7000
7017
|
|
|
7001
7018
|
// src/styles-inheritance/components/infotip/value-component.tsx
|
|
7002
7019
|
var React102 = __toESM(require("react"));
|
|
7003
|
-
var
|
|
7020
|
+
var import_ui51 = require("@elementor/ui");
|
|
7004
7021
|
var ValueComponent = ({ index, value }) => {
|
|
7005
|
-
return /* @__PURE__ */ React102.createElement(
|
|
7006
|
-
|
|
7022
|
+
return /* @__PURE__ */ React102.createElement(import_ui51.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React102.createElement(
|
|
7023
|
+
import_ui51.Typography,
|
|
7007
7024
|
{
|
|
7008
7025
|
variant: "caption",
|
|
7009
7026
|
color: "text.tertiary",
|
|
@@ -7025,8 +7042,8 @@ var ValueComponent = ({ index, value }) => {
|
|
|
7025
7042
|
|
|
7026
7043
|
// src/styles-inheritance/components/infotip/action-icons.tsx
|
|
7027
7044
|
var React103 = __toESM(require("react"));
|
|
7028
|
-
var
|
|
7029
|
-
var ActionIcons = () => /* @__PURE__ */ React103.createElement(
|
|
7045
|
+
var import_ui52 = require("@elementor/ui");
|
|
7046
|
+
var ActionIcons = () => /* @__PURE__ */ React103.createElement(import_ui52.Box, { display: "flex", gap: 0.5, alignItems: "center" });
|
|
7030
7047
|
|
|
7031
7048
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
7032
7049
|
var SECTION_PADDING_INLINE = 32;
|
|
@@ -7062,8 +7079,8 @@ var StylesInheritanceInfotip = ({
|
|
|
7062
7079
|
});
|
|
7063
7080
|
}, [key, propType]);
|
|
7064
7081
|
const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
|
|
7065
|
-
const infotipContent = /* @__PURE__ */ React104.createElement(
|
|
7066
|
-
|
|
7082
|
+
const infotipContent = /* @__PURE__ */ React104.createElement(import_ui53.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React104.createElement(
|
|
7083
|
+
import_ui53.Card,
|
|
7067
7084
|
{
|
|
7068
7085
|
elevation: 0,
|
|
7069
7086
|
sx: {
|
|
@@ -7076,7 +7093,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7076
7093
|
}
|
|
7077
7094
|
},
|
|
7078
7095
|
/* @__PURE__ */ React104.createElement(
|
|
7079
|
-
|
|
7096
|
+
import_ui53.Box,
|
|
7080
7097
|
{
|
|
7081
7098
|
sx: {
|
|
7082
7099
|
position: "sticky",
|
|
@@ -7088,7 +7105,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7088
7105
|
/* @__PURE__ */ React104.createElement(import_editor_ui11.PopoverHeader, { title: (0, import_i18n74.__)("Style origin", "elementor"), onClose: closeInfotip })
|
|
7089
7106
|
),
|
|
7090
7107
|
/* @__PURE__ */ React104.createElement(
|
|
7091
|
-
|
|
7108
|
+
import_ui53.CardContent,
|
|
7092
7109
|
{
|
|
7093
7110
|
sx: {
|
|
7094
7111
|
display: "flex",
|
|
@@ -7101,9 +7118,9 @@ var StylesInheritanceInfotip = ({
|
|
|
7101
7118
|
}
|
|
7102
7119
|
}
|
|
7103
7120
|
},
|
|
7104
|
-
/* @__PURE__ */ React104.createElement(
|
|
7121
|
+
/* @__PURE__ */ React104.createElement(import_ui53.Stack, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
|
|
7105
7122
|
return /* @__PURE__ */ React104.createElement(
|
|
7106
|
-
|
|
7123
|
+
import_ui53.Box,
|
|
7107
7124
|
{
|
|
7108
7125
|
key: item.id,
|
|
7109
7126
|
display: "flex",
|
|
@@ -7115,7 +7132,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7115
7132
|
)
|
|
7116
7133
|
},
|
|
7117
7134
|
/* @__PURE__ */ React104.createElement(
|
|
7118
|
-
|
|
7135
|
+
import_ui53.Box,
|
|
7119
7136
|
{
|
|
7120
7137
|
display: "flex",
|
|
7121
7138
|
gap: 0.5,
|
|
@@ -7131,9 +7148,9 @@ var StylesInheritanceInfotip = ({
|
|
|
7131
7148
|
)
|
|
7132
7149
|
));
|
|
7133
7150
|
if (isDisabled) {
|
|
7134
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7151
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Box, { sx: { display: "inline-flex" } }, children);
|
|
7135
7152
|
}
|
|
7136
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7153
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React104.createElement(
|
|
7137
7154
|
TooltipOrInfotip,
|
|
7138
7155
|
{
|
|
7139
7156
|
showInfotip,
|
|
@@ -7142,7 +7159,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7142
7159
|
isDisabled
|
|
7143
7160
|
},
|
|
7144
7161
|
/* @__PURE__ */ React104.createElement(
|
|
7145
|
-
|
|
7162
|
+
import_ui53.IconButton,
|
|
7146
7163
|
{
|
|
7147
7164
|
onClick: toggleInfotip,
|
|
7148
7165
|
"aria-label": label,
|
|
@@ -7161,11 +7178,11 @@ function TooltipOrInfotip({
|
|
|
7161
7178
|
isDisabled
|
|
7162
7179
|
}) {
|
|
7163
7180
|
if (isDisabled) {
|
|
7164
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7181
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Box, { sx: { display: "inline-flex" } }, children);
|
|
7165
7182
|
}
|
|
7166
7183
|
if (showInfotip) {
|
|
7167
7184
|
return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
|
|
7168
|
-
|
|
7185
|
+
import_ui53.Backdrop,
|
|
7169
7186
|
{
|
|
7170
7187
|
open: showInfotip,
|
|
7171
7188
|
onClick: onClose,
|
|
@@ -7175,7 +7192,7 @@ function TooltipOrInfotip({
|
|
|
7175
7192
|
}
|
|
7176
7193
|
}
|
|
7177
7194
|
), /* @__PURE__ */ React104.createElement(
|
|
7178
|
-
|
|
7195
|
+
import_ui53.Infotip,
|
|
7179
7196
|
{
|
|
7180
7197
|
placement: "top-end",
|
|
7181
7198
|
content: infotipContent,
|
|
@@ -7186,14 +7203,14 @@ function TooltipOrInfotip({
|
|
|
7186
7203
|
children
|
|
7187
7204
|
));
|
|
7188
7205
|
}
|
|
7189
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7206
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Tooltip, { title: (0, import_i18n74.__)("Style origin", "elementor"), placement: "top" }, children);
|
|
7190
7207
|
}
|
|
7191
7208
|
|
|
7192
7209
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
7193
7210
|
var StylesInheritanceIndicator = ({
|
|
7194
7211
|
customContext
|
|
7195
7212
|
}) => {
|
|
7196
|
-
const context = (0,
|
|
7213
|
+
const context = (0, import_editor_controls68.useBoundProp)();
|
|
7197
7214
|
const { path, propType } = customContext || context;
|
|
7198
7215
|
const inheritanceChain = useStylesInheritanceChain(path);
|
|
7199
7216
|
if (!path || !inheritanceChain.length) {
|
|
@@ -7271,12 +7288,12 @@ var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) =>
|
|
|
7271
7288
|
// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
|
|
7272
7289
|
var React107 = __toESM(require("react"));
|
|
7273
7290
|
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
7274
|
-
var
|
|
7275
|
-
var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React107.createElement(
|
|
7291
|
+
var import_ui54 = require("@elementor/ui");
|
|
7292
|
+
var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React107.createElement(import_ui54.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React107.createElement(ItemLabelColor, { value })));
|
|
7276
7293
|
var ItemLabelColor = ({ value: { color } }) => {
|
|
7277
7294
|
return /* @__PURE__ */ React107.createElement("span", null, color);
|
|
7278
7295
|
};
|
|
7279
|
-
var StyledUnstableColorIndicator = (0,
|
|
7296
|
+
var StyledUnstableColorIndicator = (0, import_ui54.styled)(import_ui54.UnstableColorIndicator)(({ theme }) => ({
|
|
7280
7297
|
width: "1em",
|
|
7281
7298
|
height: "1em",
|
|
7282
7299
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -7287,9 +7304,9 @@ var StyledUnstableColorIndicator = (0, import_ui53.styled)(import_ui53.UnstableC
|
|
|
7287
7304
|
// src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
|
|
7288
7305
|
var React108 = __toESM(require("react"));
|
|
7289
7306
|
var import_editor_canvas8 = require("@elementor/editor-canvas");
|
|
7290
|
-
var
|
|
7307
|
+
var import_ui55 = require("@elementor/ui");
|
|
7291
7308
|
var import_i18n76 = require("@wordpress/i18n");
|
|
7292
|
-
var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React108.createElement(
|
|
7309
|
+
var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React108.createElement(import_ui55.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React108.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React108.createElement(ItemLabelGradient, { value })));
|
|
7293
7310
|
var ItemIconGradient = ({ value }) => {
|
|
7294
7311
|
const gradient = getGradientValue(value);
|
|
7295
7312
|
return /* @__PURE__ */ React108.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
@@ -7312,13 +7329,13 @@ var getGradientValue = (gradient) => {
|
|
|
7312
7329
|
var React109 = __toESM(require("react"));
|
|
7313
7330
|
var import_editor_canvas9 = require("@elementor/editor-canvas");
|
|
7314
7331
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
7315
|
-
var
|
|
7332
|
+
var import_ui56 = require("@elementor/ui");
|
|
7316
7333
|
var import_wp_media = require("@elementor/wp-media");
|
|
7317
|
-
var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React109.createElement(
|
|
7334
|
+
var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React109.createElement(import_ui56.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(ItemIconImage, { value }), /* @__PURE__ */ React109.createElement(ItemLabelImage, { value })));
|
|
7318
7335
|
var ItemIconImage = ({ value }) => {
|
|
7319
7336
|
const { imageUrl } = useImage(value);
|
|
7320
7337
|
return /* @__PURE__ */ React109.createElement(
|
|
7321
|
-
|
|
7338
|
+
import_ui56.CardMedia,
|
|
7322
7339
|
{
|
|
7323
7340
|
image: imageUrl,
|
|
7324
7341
|
sx: (theme) => ({
|
|
@@ -7374,14 +7391,14 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
|
|
|
7374
7391
|
// src/styles-inheritance/transformers/color-transformer.tsx
|
|
7375
7392
|
var React111 = __toESM(require("react"));
|
|
7376
7393
|
var import_editor_canvas11 = require("@elementor/editor-canvas");
|
|
7377
|
-
var
|
|
7394
|
+
var import_ui57 = require("@elementor/ui");
|
|
7378
7395
|
function isValidCSSColor(value) {
|
|
7379
7396
|
if (!value.trim()) {
|
|
7380
7397
|
return false;
|
|
7381
7398
|
}
|
|
7382
7399
|
return CSS.supports("color", value.trim());
|
|
7383
7400
|
}
|
|
7384
|
-
var StyledColorIndicator = (0,
|
|
7401
|
+
var StyledColorIndicator = (0, import_ui57.styled)(import_ui57.UnstableColorIndicator)(({ theme }) => ({
|
|
7385
7402
|
width: "1em",
|
|
7386
7403
|
height: "1em",
|
|
7387
7404
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -7392,7 +7409,7 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
|
|
|
7392
7409
|
if (!isValidCSSColor(value)) {
|
|
7393
7410
|
return value;
|
|
7394
7411
|
}
|
|
7395
|
-
return /* @__PURE__ */ React111.createElement(
|
|
7412
|
+
return /* @__PURE__ */ React111.createElement(import_ui57.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React111.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React111.createElement("span", null, value));
|
|
7396
7413
|
});
|
|
7397
7414
|
|
|
7398
7415
|
// src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
|