@elementor/editor-editing-panel 4.2.0-beta1 → 4.3.0-1000
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +15 -15
- package/dist/index.d.ts +15 -15
- package/dist/index.js +297 -267
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +89 -59
- package/dist/index.mjs.map +1 -1
- package/package.json +24 -24
- package/src/components/css-classes/css-class-menu.tsx +3 -0
- package/src/components/style-sections/layout-section/grid-auto-flow-field.tsx +12 -5
- package/src/components/style-sections/layout-section/grid-outline-field.tsx +22 -7
- package/src/components/style-sections/position-section/position-section.tsx +8 -3
package/dist/index.js
CHANGED
|
@@ -1040,6 +1040,9 @@ function ClassStatesMenu({ closeMenu }) {
|
|
|
1040
1040
|
var CLASS_STATES_MAP = {
|
|
1041
1041
|
selected: {
|
|
1042
1042
|
label: (0, import_i18n4.__)("selected", "elementor")
|
|
1043
|
+
},
|
|
1044
|
+
disabled: {
|
|
1045
|
+
label: (0, import_i18n4.__)("disabled", "elementor")
|
|
1043
1046
|
}
|
|
1044
1047
|
};
|
|
1045
1048
|
function useElementStates() {
|
|
@@ -1935,15 +1938,15 @@ var hasInheritedCustomCss = (style, meta) => {
|
|
|
1935
1938
|
|
|
1936
1939
|
// src/components/editing-panel.tsx
|
|
1937
1940
|
var React91 = __toESM(require("react"));
|
|
1938
|
-
var
|
|
1939
|
-
var
|
|
1941
|
+
var import_editor_controls55 = require("@elementor/editor-controls");
|
|
1942
|
+
var import_editor_elements14 = require("@elementor/editor-elements");
|
|
1940
1943
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
1941
1944
|
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
1942
1945
|
var import_icons27 = require("@elementor/icons");
|
|
1943
1946
|
var import_locations5 = require("@elementor/locations");
|
|
1944
1947
|
var import_menus = require("@elementor/menus");
|
|
1945
1948
|
var import_session9 = require("@elementor/session");
|
|
1946
|
-
var
|
|
1949
|
+
var import_ui45 = require("@elementor/ui");
|
|
1947
1950
|
var import_i18n64 = require("@wordpress/i18n");
|
|
1948
1951
|
|
|
1949
1952
|
// src/editing-panel-replacement-registry.tsx
|
|
@@ -1981,9 +1984,9 @@ var EditingPanelStickyPromotion = () => {
|
|
|
1981
1984
|
// src/components/editing-panel-tabs.tsx
|
|
1982
1985
|
var import_react37 = require("react");
|
|
1983
1986
|
var React90 = __toESM(require("react"));
|
|
1984
|
-
var
|
|
1987
|
+
var import_editor_elements13 = require("@elementor/editor-elements");
|
|
1985
1988
|
var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
|
|
1986
|
-
var
|
|
1989
|
+
var import_ui44 = require("@elementor/ui");
|
|
1987
1990
|
var import_i18n63 = require("@wordpress/i18n");
|
|
1988
1991
|
|
|
1989
1992
|
// src/contexts/scroll-context.tsx
|
|
@@ -2703,7 +2706,7 @@ var import_editor_props16 = require("@elementor/editor-props");
|
|
|
2703
2706
|
var import_editor_responsive3 = require("@elementor/editor-responsive");
|
|
2704
2707
|
var import_locations4 = require("@elementor/locations");
|
|
2705
2708
|
var import_session8 = require("@elementor/session");
|
|
2706
|
-
var
|
|
2709
|
+
var import_ui43 = require("@elementor/ui");
|
|
2707
2710
|
var import_i18n62 = require("@wordpress/i18n");
|
|
2708
2711
|
|
|
2709
2712
|
// src/contexts/styles-inheritance-context.tsx
|
|
@@ -3502,8 +3505,8 @@ var EffectsSection = () => {
|
|
|
3502
3505
|
|
|
3503
3506
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
3504
3507
|
var React61 = __toESM(require("react"));
|
|
3505
|
-
var
|
|
3506
|
-
var
|
|
3508
|
+
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
3509
|
+
var import_editor_elements12 = require("@elementor/editor-elements");
|
|
3507
3510
|
var import_locations3 = require("@elementor/locations");
|
|
3508
3511
|
var import_i18n37 = require("@wordpress/i18n");
|
|
3509
3512
|
|
|
@@ -4258,7 +4261,7 @@ var directionOptions = [
|
|
|
4258
4261
|
];
|
|
4259
4262
|
var parseAutoFlow = (value) => {
|
|
4260
4263
|
if (!value) {
|
|
4261
|
-
return { direction:
|
|
4264
|
+
return { direction: null, dense: false };
|
|
4262
4265
|
}
|
|
4263
4266
|
const dense = value.includes("dense");
|
|
4264
4267
|
const direction = value.replace(/\s*dense\s*/, "").trim();
|
|
@@ -4268,27 +4271,33 @@ var composeAutoFlow = (direction, dense) => {
|
|
|
4268
4271
|
return dense ? `${direction} dense` : direction;
|
|
4269
4272
|
};
|
|
4270
4273
|
var GridAutoFlowFieldContent = () => {
|
|
4271
|
-
const { value, setValue } = useStylesField("grid-auto-flow", {
|
|
4274
|
+
const { value, setValue, canEdit } = useStylesField("grid-auto-flow", {
|
|
4272
4275
|
history: { propDisplayName: AUTO_FLOW_LABEL }
|
|
4273
4276
|
});
|
|
4277
|
+
const { placeholder } = (0, import_editor_controls24.useBoundProp)();
|
|
4274
4278
|
const { direction, dense } = parseAutoFlow(value?.value ?? null);
|
|
4279
|
+
const directionPlaceholder = parseAutoFlow(placeholder?.value ?? null).direction;
|
|
4275
4280
|
const handleDirectionChange = (newDirection) => {
|
|
4276
4281
|
if (!newDirection) {
|
|
4282
|
+
setValue(null);
|
|
4277
4283
|
return;
|
|
4278
4284
|
}
|
|
4279
4285
|
setValue({ $$type: "string", value: composeAutoFlow(newDirection, dense) });
|
|
4280
4286
|
};
|
|
4281
4287
|
const handleDenseToggle = () => {
|
|
4282
|
-
|
|
4288
|
+
const nextDirection = direction ?? "row";
|
|
4289
|
+
setValue({ $$type: "string", value: composeAutoFlow(nextDirection, !dense) });
|
|
4283
4290
|
};
|
|
4284
4291
|
return /* @__PURE__ */ React53.createElement(StylesFieldLayout, { label: AUTO_FLOW_LABEL }, /* @__PURE__ */ React53.createElement(import_ui30.Grid, { container: true, gap: 1, flexWrap: "nowrap", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React53.createElement(import_ui30.Grid, { item: true, sx: { width: 64, maxWidth: "100%" } }, /* @__PURE__ */ React53.createElement(
|
|
4285
4292
|
import_editor_controls24.ControlToggleButtonGroup,
|
|
4286
4293
|
{
|
|
4287
4294
|
items: directionOptions,
|
|
4288
4295
|
value: direction,
|
|
4296
|
+
placeholder: directionPlaceholder,
|
|
4289
4297
|
onChange: handleDirectionChange,
|
|
4290
4298
|
exclusive: true,
|
|
4291
|
-
fullWidth: true
|
|
4299
|
+
fullWidth: true,
|
|
4300
|
+
disabled: !canEdit
|
|
4292
4301
|
}
|
|
4293
4302
|
)), /* @__PURE__ */ React53.createElement(import_ui30.Grid, { item: true }, /* @__PURE__ */ React53.createElement(import_ui30.Tooltip, { title: DENSE_LABEL, placement: "top" }, /* @__PURE__ */ React53.createElement(
|
|
4294
4303
|
import_ui30.ToggleButton,
|
|
@@ -4297,7 +4306,8 @@ var GridAutoFlowFieldContent = () => {
|
|
|
4297
4306
|
selected: dense,
|
|
4298
4307
|
onChange: handleDenseToggle,
|
|
4299
4308
|
size: "tiny",
|
|
4300
|
-
"aria-label": DENSE_LABEL
|
|
4309
|
+
"aria-label": DENSE_LABEL,
|
|
4310
|
+
disabled: !canEdit
|
|
4301
4311
|
},
|
|
4302
4312
|
/* @__PURE__ */ React53.createElement(import_icons14.LayoutDashboardIcon, { fontSize: "tiny" })
|
|
4303
4313
|
)))));
|
|
@@ -4389,18 +4399,35 @@ var GridJustifyItemsField = () => /* @__PURE__ */ React55.createElement(StylesFi
|
|
|
4389
4399
|
|
|
4390
4400
|
// src/components/style-sections/layout-section/grid-outline-field.tsx
|
|
4391
4401
|
var React56 = __toESM(require("react"));
|
|
4392
|
-
var
|
|
4402
|
+
var import_editor_elements11 = require("@elementor/editor-elements");
|
|
4403
|
+
var import_ui33 = require("@elementor/ui");
|
|
4393
4404
|
var import_i18n32 = require("@wordpress/i18n");
|
|
4394
4405
|
var GRID_OUTLINE_LABEL = (0, import_i18n32.__)("Show Grid Outline", "elementor");
|
|
4395
4406
|
var GridOutlineField = () => {
|
|
4396
|
-
|
|
4407
|
+
const { element } = useElement();
|
|
4408
|
+
const settings = (0, import_editor_elements11.useElementEditorSettings)(element.id);
|
|
4409
|
+
const value = settings?.grid_outline ?? true;
|
|
4410
|
+
return /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React56.createElement(import_ui33.Box, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React56.createElement(
|
|
4411
|
+
import_ui33.Switch,
|
|
4412
|
+
{
|
|
4413
|
+
"aria-label": GRID_OUTLINE_LABEL,
|
|
4414
|
+
checked: value,
|
|
4415
|
+
onChange: (event) => {
|
|
4416
|
+
(0, import_editor_elements11.updateElementEditorSettings)({
|
|
4417
|
+
elementId: element.id,
|
|
4418
|
+
settings: { grid_outline: event.target.checked }
|
|
4419
|
+
});
|
|
4420
|
+
},
|
|
4421
|
+
size: "small"
|
|
4422
|
+
}
|
|
4423
|
+
)));
|
|
4397
4424
|
};
|
|
4398
4425
|
|
|
4399
4426
|
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4400
4427
|
var React57 = __toESM(require("react"));
|
|
4401
4428
|
var import_react26 = require("react");
|
|
4402
|
-
var
|
|
4403
|
-
var
|
|
4429
|
+
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
4430
|
+
var import_ui34 = require("@elementor/ui");
|
|
4404
4431
|
var import_i18n33 = require("@wordpress/i18n");
|
|
4405
4432
|
|
|
4406
4433
|
// src/components/style-sections/layout-section/utils/grid-track-value.ts
|
|
@@ -4495,9 +4522,9 @@ var unitOf = (v, fallback = FR) => {
|
|
|
4495
4522
|
};
|
|
4496
4523
|
|
|
4497
4524
|
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4498
|
-
var SizeFieldWrapper = ({ children }) => /* @__PURE__ */ React57.createElement(
|
|
4499
|
-
var GridTrackSizeInput = (0,
|
|
4500
|
-
|
|
4525
|
+
var SizeFieldWrapper = ({ children }) => /* @__PURE__ */ React57.createElement(import_editor_controls27.ControlActions, null, children);
|
|
4526
|
+
var GridTrackSizeInput = (0, import_editor_controls27.createControl)((props) => /* @__PURE__ */ React57.createElement(
|
|
4527
|
+
import_editor_controls27.SizeComponent,
|
|
4501
4528
|
{
|
|
4502
4529
|
units: UNITS,
|
|
4503
4530
|
value: props.value,
|
|
@@ -4515,7 +4542,7 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4515
4542
|
const { value, setValue } = useStylesField(cssProp, {
|
|
4516
4543
|
history: { propDisplayName: label }
|
|
4517
4544
|
});
|
|
4518
|
-
const { placeholder: inheritedPlaceholder } = (0,
|
|
4545
|
+
const { placeholder: inheritedPlaceholder } = (0, import_editor_controls27.useBoundProp)();
|
|
4519
4546
|
const anchorRef = (0, import_react26.useRef)(null);
|
|
4520
4547
|
const local = parseValue(value);
|
|
4521
4548
|
const inherited = parseValue(inheritedPlaceholder);
|
|
@@ -4539,28 +4566,28 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4539
4566
|
)));
|
|
4540
4567
|
};
|
|
4541
4568
|
var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React57.createElement(UiProviders, null, /* @__PURE__ */ React57.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React57.createElement(GridTrackFieldContent, { cssProp, label })));
|
|
4542
|
-
var GridSizeFields = () => /* @__PURE__ */ React57.createElement(
|
|
4569
|
+
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") })));
|
|
4543
4570
|
|
|
4544
4571
|
// src/components/style-sections/layout-section/grid-span-field.tsx
|
|
4545
4572
|
var React58 = __toESM(require("react"));
|
|
4546
|
-
var
|
|
4547
|
-
var
|
|
4573
|
+
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
4574
|
+
var import_ui35 = require("@elementor/ui");
|
|
4548
4575
|
var import_i18n34 = require("@wordpress/i18n");
|
|
4549
4576
|
var GridSpanFieldContent = ({ label }) => {
|
|
4550
|
-
return /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React58.createElement(
|
|
4577
|
+
return /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React58.createElement(import_editor_controls28.GridSpanControl, null));
|
|
4551
4578
|
};
|
|
4552
4579
|
var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */ React58.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React58.createElement(UiProviders, null, /* @__PURE__ */ React58.createElement(GridSpanFieldContent, { cssProp, label })));
|
|
4553
|
-
var GridSpanFields = () => /* @__PURE__ */ React58.createElement(
|
|
4580
|
+
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") })));
|
|
4554
4581
|
|
|
4555
4582
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
4556
4583
|
var React59 = __toESM(require("react"));
|
|
4557
|
-
var
|
|
4584
|
+
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
4558
4585
|
var import_icons16 = require("@elementor/icons");
|
|
4559
|
-
var
|
|
4586
|
+
var import_ui36 = require("@elementor/ui");
|
|
4560
4587
|
var import_i18n35 = require("@wordpress/i18n");
|
|
4561
4588
|
var JUSTIFY_CONTENT_LABEL = (0, import_i18n35.__)("Justify content", "elementor");
|
|
4562
|
-
var StartIcon6 = (0,
|
|
4563
|
-
var EndIcon5 = (0,
|
|
4589
|
+
var StartIcon6 = (0, import_ui36.withDirection)(import_icons16.JustifyTopIcon);
|
|
4590
|
+
var EndIcon5 = (0, import_ui36.withDirection)(import_icons16.JustifyBottomIcon);
|
|
4564
4591
|
var iconProps4 = {
|
|
4565
4592
|
isClockwise: true,
|
|
4566
4593
|
offset: -90
|
|
@@ -4603,11 +4630,11 @@ var options5 = [
|
|
|
4603
4630
|
showTooltip: true
|
|
4604
4631
|
}
|
|
4605
4632
|
];
|
|
4606
|
-
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(
|
|
4633
|
+
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 }))));
|
|
4607
4634
|
|
|
4608
4635
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
4609
4636
|
var React60 = __toESM(require("react"));
|
|
4610
|
-
var
|
|
4637
|
+
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
4611
4638
|
var import_icons17 = require("@elementor/icons");
|
|
4612
4639
|
var import_i18n36 = require("@wordpress/i18n");
|
|
4613
4640
|
var FLEX_WRAP_LABEL = (0, import_i18n36.__)("Wrap", "elementor");
|
|
@@ -4632,7 +4659,7 @@ var options6 = [
|
|
|
4632
4659
|
}
|
|
4633
4660
|
];
|
|
4634
4661
|
var WrapField = () => {
|
|
4635
|
-
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(
|
|
4662
|
+
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 }))));
|
|
4636
4663
|
};
|
|
4637
4664
|
|
|
4638
4665
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
@@ -4648,7 +4675,7 @@ var LayoutSection = () => {
|
|
|
4648
4675
|
const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
|
|
4649
4676
|
const isDisplayGrid = "grid" === (display?.value ?? displayPlaceholder?.value);
|
|
4650
4677
|
const { element } = useElement();
|
|
4651
|
-
const parent = (0,
|
|
4678
|
+
const parent = (0, import_editor_elements12.useParentElement)(element.id);
|
|
4652
4679
|
const parentStyle = useComputedStyle(parent?.id || null);
|
|
4653
4680
|
const getParentStyleDirection = () => {
|
|
4654
4681
|
if ("flex" === parentStyle?.display) {
|
|
@@ -4668,8 +4695,8 @@ var FlexFields = () => {
|
|
|
4668
4695
|
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));
|
|
4669
4696
|
};
|
|
4670
4697
|
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));
|
|
4671
|
-
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(PanelDivider, null), /* @__PURE__ */ React61.createElement(
|
|
4672
|
-
var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React61.createElement(React61.Fragment, null, /* @__PURE__ */ React61.createElement(PanelDivider, null), /* @__PURE__ */ React61.createElement(
|
|
4698
|
+
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));
|
|
4699
|
+
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));
|
|
4673
4700
|
var shouldDisplayFlexFields = (display, local) => {
|
|
4674
4701
|
const value = display?.value ?? local?.value;
|
|
4675
4702
|
if (!value) {
|
|
@@ -4682,18 +4709,18 @@ var shouldDisplayFlexFields = (display, local) => {
|
|
|
4682
4709
|
var React66 = __toESM(require("react"));
|
|
4683
4710
|
var import_react29 = require("react");
|
|
4684
4711
|
var import_session7 = require("@elementor/session");
|
|
4685
|
-
var
|
|
4712
|
+
var import_ui39 = require("@elementor/ui");
|
|
4686
4713
|
var import_i18n42 = require("@wordpress/i18n");
|
|
4687
4714
|
|
|
4688
4715
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
4689
4716
|
var React62 = __toESM(require("react"));
|
|
4690
4717
|
var import_react27 = require("react");
|
|
4691
|
-
var
|
|
4718
|
+
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
4692
4719
|
var import_icons18 = require("@elementor/icons");
|
|
4693
|
-
var
|
|
4720
|
+
var import_ui37 = require("@elementor/ui");
|
|
4694
4721
|
var import_i18n38 = require("@wordpress/i18n");
|
|
4695
|
-
var InlineStartIcon2 = (0,
|
|
4696
|
-
var InlineEndIcon2 = (0,
|
|
4722
|
+
var InlineStartIcon2 = (0, import_ui37.withDirection)(import_icons18.SideLeftIcon);
|
|
4723
|
+
var InlineEndIcon2 = (0, import_ui37.withDirection)(import_icons18.SideRightIcon);
|
|
4697
4724
|
var sideIcons = {
|
|
4698
4725
|
"inset-block-start": /* @__PURE__ */ React62.createElement(import_icons18.SideTopIcon, { fontSize: "tiny" }),
|
|
4699
4726
|
"inset-block-end": /* @__PURE__ */ React62.createElement(import_icons18.SideBottomIcon, { fontSize: "tiny" }),
|
|
@@ -4705,14 +4732,14 @@ var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n38.__)("Left",
|
|
|
4705
4732
|
var DimensionsField = () => {
|
|
4706
4733
|
const { isSiteRtl } = useDirection();
|
|
4707
4734
|
const rowRefs = [(0, import_react27.useRef)(null), (0, import_react27.useRef)(null)];
|
|
4708
|
-
return /* @__PURE__ */ React62.createElement(UiProviders, null, /* @__PURE__ */ React62.createElement(
|
|
4735
|
+
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(
|
|
4709
4736
|
DimensionField,
|
|
4710
4737
|
{
|
|
4711
4738
|
side: "inset-inline-end",
|
|
4712
4739
|
label: getInlineEndLabel(isSiteRtl),
|
|
4713
4740
|
rowRef: rowRefs[0]
|
|
4714
4741
|
}
|
|
4715
|
-
)), /* @__PURE__ */ React62.createElement(
|
|
4742
|
+
)), /* @__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(
|
|
4716
4743
|
DimensionField,
|
|
4717
4744
|
{
|
|
4718
4745
|
side: "inset-inline-start",
|
|
@@ -4725,8 +4752,8 @@ var DimensionField = ({
|
|
|
4725
4752
|
side,
|
|
4726
4753
|
label,
|
|
4727
4754
|
rowRef
|
|
4728
|
-
}) => /* @__PURE__ */ React62.createElement(StylesField, { bind: side, propDisplayName: label }, /* @__PURE__ */ React62.createElement(
|
|
4729
|
-
|
|
4755
|
+
}) => /* @__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(
|
|
4756
|
+
import_editor_controls32.SizeControl,
|
|
4730
4757
|
{
|
|
4731
4758
|
startIcon: sideIcons[side],
|
|
4732
4759
|
extendedOptions: ["auto"],
|
|
@@ -4738,18 +4765,18 @@ var DimensionField = ({
|
|
|
4738
4765
|
// src/components/style-sections/position-section/offset-field.tsx
|
|
4739
4766
|
var React63 = __toESM(require("react"));
|
|
4740
4767
|
var import_react28 = require("react");
|
|
4741
|
-
var
|
|
4768
|
+
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
4742
4769
|
var import_i18n39 = require("@wordpress/i18n");
|
|
4743
4770
|
var OFFSET_LABEL = (0, import_i18n39.__)("Anchor offset", "elementor");
|
|
4744
4771
|
var UNITS2 = ["px", "em", "rem", "vw", "vh"];
|
|
4745
4772
|
var OffsetField = () => {
|
|
4746
4773
|
const rowRef = (0, import_react28.useRef)(null);
|
|
4747
|
-
return /* @__PURE__ */ React63.createElement(StylesField, { bind: "scroll-margin-top", propDisplayName: OFFSET_LABEL }, /* @__PURE__ */ React63.createElement(StylesFieldLayout, { label: OFFSET_LABEL, ref: rowRef }, /* @__PURE__ */ React63.createElement(
|
|
4774
|
+
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 })));
|
|
4748
4775
|
};
|
|
4749
4776
|
|
|
4750
4777
|
// src/components/style-sections/position-section/position-field.tsx
|
|
4751
4778
|
var React64 = __toESM(require("react"));
|
|
4752
|
-
var
|
|
4779
|
+
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
4753
4780
|
var import_i18n40 = require("@wordpress/i18n");
|
|
4754
4781
|
var POSITION_LABEL = (0, import_i18n40.__)("Position", "elementor");
|
|
4755
4782
|
var positionOptions = [
|
|
@@ -4760,31 +4787,31 @@ var positionOptions = [
|
|
|
4760
4787
|
{ label: (0, import_i18n40.__)("Sticky", "elementor"), value: "sticky" }
|
|
4761
4788
|
];
|
|
4762
4789
|
var PositionField = () => {
|
|
4763
|
-
return /* @__PURE__ */ React64.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React64.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React64.createElement(
|
|
4790
|
+
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 })));
|
|
4764
4791
|
};
|
|
4765
4792
|
|
|
4766
4793
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
4767
4794
|
var React65 = __toESM(require("react"));
|
|
4768
|
-
var
|
|
4795
|
+
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
4769
4796
|
var import_icons19 = require("@elementor/icons");
|
|
4770
|
-
var
|
|
4797
|
+
var import_ui38 = require("@elementor/ui");
|
|
4771
4798
|
var import_i18n41 = require("@wordpress/i18n");
|
|
4772
4799
|
var Z_INDEX_LABEL = (0, import_i18n41.__)("Z-index", "elementor");
|
|
4773
4800
|
var ZIndexField = ({ disabled }) => {
|
|
4774
|
-
const StyleField = /* @__PURE__ */ React65.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React65.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React65.createElement(
|
|
4775
|
-
const content = /* @__PURE__ */ React65.createElement(
|
|
4801
|
+
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 })));
|
|
4802
|
+
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.__)(
|
|
4776
4803
|
"z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.",
|
|
4777
4804
|
"elementor"
|
|
4778
4805
|
)));
|
|
4779
4806
|
return disabled ? /* @__PURE__ */ React65.createElement(
|
|
4780
|
-
|
|
4807
|
+
import_ui38.Infotip,
|
|
4781
4808
|
{
|
|
4782
4809
|
placement: "right",
|
|
4783
4810
|
content,
|
|
4784
4811
|
color: "secondary",
|
|
4785
4812
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
4786
4813
|
},
|
|
4787
|
-
/* @__PURE__ */ React65.createElement(
|
|
4814
|
+
/* @__PURE__ */ React65.createElement(import_ui38.Box, null, StyleField)
|
|
4788
4815
|
) : /* @__PURE__ */ React65.createElement(React65.Fragment, null, StyleField);
|
|
4789
4816
|
};
|
|
4790
4817
|
|
|
@@ -4801,6 +4828,9 @@ var DEPENDENT_PROP_NAMES = [
|
|
|
4801
4828
|
];
|
|
4802
4829
|
var PositionSection = () => {
|
|
4803
4830
|
const { value: position } = useStylesField("position", withHistoryLabel(POSITION_LABEL2));
|
|
4831
|
+
const inheritedPosition = useInheritedValues(["position"]).position;
|
|
4832
|
+
const resolvedPosition = position ?? inheritedPosition ?? null;
|
|
4833
|
+
const isPositionUnsetOrStatic = !resolvedPosition || resolvedPosition.value === POSITION_STATIC;
|
|
4804
4834
|
const positionPrevRef = (0, import_react29.useRef)(position);
|
|
4805
4835
|
const { values: dependentValues, setValues: setDependentValues } = useStylesFields(DEPENDENT_PROP_NAMES);
|
|
4806
4836
|
const [savedDependentValues, saveToHistory, clearHistory] = usePersistDimensions();
|
|
@@ -4812,12 +4842,12 @@ var PositionSection = () => {
|
|
|
4812
4842
|
setDependentValues({ ...savedDependentValues }, withHistoryLabel(DIMENSIONS_LABEL));
|
|
4813
4843
|
clearHistory();
|
|
4814
4844
|
}
|
|
4815
|
-
if (
|
|
4845
|
+
if (isPositionUnsetOrStatic && dependentValues?.["z-index"]) {
|
|
4816
4846
|
setDependentValues({ "z-index": null }, withHistoryLabel(DIMENSIONS_LABEL));
|
|
4817
4847
|
}
|
|
4818
4848
|
positionPrevRef.current = position;
|
|
4819
|
-
}, [position?.value]);
|
|
4820
|
-
return /* @__PURE__ */ React66.createElement(StyledSectionContent, null, /* @__PURE__ */ React66.createElement(PositionField, null), /* @__PURE__ */ React66.createElement(DimensionsField, null), /* @__PURE__ */ React66.createElement(ZIndexField, { disabled:
|
|
4849
|
+
}, [position?.value, isPositionUnsetOrStatic]);
|
|
4850
|
+
return /* @__PURE__ */ React66.createElement(StyledSectionContent, null, /* @__PURE__ */ React66.createElement(PositionField, null), /* @__PURE__ */ React66.createElement(DimensionsField, null), /* @__PURE__ */ React66.createElement(ZIndexField, { disabled: isPositionUnsetOrStatic }), /* @__PURE__ */ React66.createElement(PanelDivider, null), /* @__PURE__ */ React66.createElement(OffsetField, null));
|
|
4821
4851
|
};
|
|
4822
4852
|
var usePersistDimensions = () => {
|
|
4823
4853
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -4845,7 +4875,7 @@ var extractDimensions = (values) => {
|
|
|
4845
4875
|
};
|
|
4846
4876
|
}, {});
|
|
4847
4877
|
};
|
|
4848
|
-
var StyledSectionContent = (0,
|
|
4878
|
+
var StyledSectionContent = (0, import_ui39.styled)(SectionContent, {
|
|
4849
4879
|
shouldForwardProp: (prop) => prop !== "gap"
|
|
4850
4880
|
})(({ gap = 2, theme }) => ({
|
|
4851
4881
|
gap: 0,
|
|
@@ -4869,13 +4899,13 @@ var StyledSectionContent = (0, import_ui38.styled)(SectionContent, {
|
|
|
4869
4899
|
// src/components/style-sections/size-section/size-section.tsx
|
|
4870
4900
|
var React69 = __toESM(require("react"));
|
|
4871
4901
|
var import_react30 = require("react");
|
|
4872
|
-
var
|
|
4873
|
-
var
|
|
4902
|
+
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
4903
|
+
var import_ui40 = require("@elementor/ui");
|
|
4874
4904
|
var import_i18n45 = require("@wordpress/i18n");
|
|
4875
4905
|
|
|
4876
4906
|
// src/components/style-sections/size-section/object-fit-field.tsx
|
|
4877
4907
|
var React67 = __toESM(require("react"));
|
|
4878
|
-
var
|
|
4908
|
+
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
4879
4909
|
var import_i18n43 = require("@wordpress/i18n");
|
|
4880
4910
|
var OBJECT_FIT_LABEL = (0, import_i18n43.__)("Object fit", "elementor");
|
|
4881
4911
|
var positionOptions2 = [
|
|
@@ -4886,12 +4916,12 @@ var positionOptions2 = [
|
|
|
4886
4916
|
{ label: (0, import_i18n43.__)("Scale down", "elementor"), value: "scale-down" }
|
|
4887
4917
|
];
|
|
4888
4918
|
var ObjectFitField = () => {
|
|
4889
|
-
return /* @__PURE__ */ React67.createElement(StylesField, { bind: "object-fit", propDisplayName: OBJECT_FIT_LABEL }, /* @__PURE__ */ React67.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ React67.createElement(
|
|
4919
|
+
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 })));
|
|
4890
4920
|
};
|
|
4891
4921
|
|
|
4892
4922
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
4893
4923
|
var React68 = __toESM(require("react"));
|
|
4894
|
-
var
|
|
4924
|
+
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
4895
4925
|
var import_icons20 = require("@elementor/icons");
|
|
4896
4926
|
var import_i18n44 = require("@wordpress/i18n");
|
|
4897
4927
|
var OVERFLOW_LABEL = (0, import_i18n44.__)("Overflow", "elementor");
|
|
@@ -4916,7 +4946,7 @@ var options7 = [
|
|
|
4916
4946
|
}
|
|
4917
4947
|
];
|
|
4918
4948
|
var OverflowField = () => {
|
|
4919
|
-
return /* @__PURE__ */ React68.createElement(StylesField, { bind: "overflow", propDisplayName: OVERFLOW_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ React68.createElement(
|
|
4949
|
+
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 })));
|
|
4920
4950
|
};
|
|
4921
4951
|
|
|
4922
4952
|
// src/components/style-sections/size-section/size-section.tsx
|
|
@@ -4955,28 +4985,28 @@ var CssSizeProps = [
|
|
|
4955
4985
|
var ASPECT_RATIO_LABEL = (0, import_i18n45.__)("Aspect Ratio", "elementor");
|
|
4956
4986
|
var SizeSection = () => {
|
|
4957
4987
|
const gridRowRefs = [(0, import_react30.useRef)(null), (0, import_react30.useRef)(null), (0, import_react30.useRef)(null)];
|
|
4958
|
-
return /* @__PURE__ */ React69.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React69.createElement(
|
|
4988
|
+
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))))));
|
|
4959
4989
|
};
|
|
4960
4990
|
var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
|
|
4961
|
-
return /* @__PURE__ */ React69.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React69.createElement(
|
|
4991
|
+
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 }))));
|
|
4962
4992
|
};
|
|
4963
4993
|
|
|
4964
4994
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
4965
4995
|
var React70 = __toESM(require("react"));
|
|
4966
|
-
var
|
|
4996
|
+
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
4967
4997
|
var import_i18n46 = require("@wordpress/i18n");
|
|
4968
4998
|
var MARGIN_LABEL = (0, import_i18n46.__)("Margin", "elementor");
|
|
4969
4999
|
var PADDING_LABEL = (0, import_i18n46.__)("Padding", "elementor");
|
|
4970
5000
|
var SpacingSection = () => {
|
|
4971
5001
|
const { isSiteRtl } = useDirection();
|
|
4972
5002
|
return /* @__PURE__ */ React70.createElement(SectionContent, null, /* @__PURE__ */ React70.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React70.createElement(
|
|
4973
|
-
|
|
5003
|
+
import_editor_controls39.LinkedDimensionsControl,
|
|
4974
5004
|
{
|
|
4975
5005
|
label: MARGIN_LABEL,
|
|
4976
5006
|
isSiteRtl,
|
|
4977
5007
|
min: -Number.MAX_SAFE_INTEGER
|
|
4978
5008
|
}
|
|
4979
|
-
)), /* @__PURE__ */ React70.createElement(PanelDivider, null), /* @__PURE__ */ React70.createElement(StylesField, { bind: "padding", propDisplayName: PADDING_LABEL }, /* @__PURE__ */ React70.createElement(
|
|
5009
|
+
)), /* @__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 })));
|
|
4980
5010
|
};
|
|
4981
5011
|
|
|
4982
5012
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -4984,38 +5014,38 @@ var React87 = __toESM(require("react"));
|
|
|
4984
5014
|
|
|
4985
5015
|
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
4986
5016
|
var React71 = __toESM(require("react"));
|
|
4987
|
-
var
|
|
5017
|
+
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
4988
5018
|
var import_i18n47 = require("@wordpress/i18n");
|
|
4989
5019
|
var COLUMN_COUNT_LABEL = (0, import_i18n47.__)("Columns", "elementor");
|
|
4990
5020
|
var ColumnCountField = () => {
|
|
4991
|
-
return /* @__PURE__ */ React71.createElement(StylesField, { bind: "column-count", propDisplayName: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React71.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React71.createElement(
|
|
5021
|
+
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 })));
|
|
4992
5022
|
};
|
|
4993
5023
|
|
|
4994
5024
|
// src/components/style-sections/typography-section/column-gap-field.tsx
|
|
4995
5025
|
var React72 = __toESM(require("react"));
|
|
4996
5026
|
var import_react31 = require("react");
|
|
4997
|
-
var
|
|
5027
|
+
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
4998
5028
|
var import_i18n48 = require("@wordpress/i18n");
|
|
4999
5029
|
var COLUMN_GAP_LABEL = (0, import_i18n48.__)("Column gap", "elementor");
|
|
5000
5030
|
var ColumnGapField = () => {
|
|
5001
5031
|
const rowRef = (0, import_react31.useRef)(null);
|
|
5002
|
-
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(
|
|
5032
|
+
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 })));
|
|
5003
5033
|
};
|
|
5004
5034
|
|
|
5005
5035
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
5006
5036
|
var React73 = __toESM(require("react"));
|
|
5007
|
-
var
|
|
5037
|
+
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
5008
5038
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
5009
5039
|
var import_i18n49 = require("@wordpress/i18n");
|
|
5010
5040
|
var FONT_FAMILY_LABEL = (0, import_i18n49.__)("Font family", "elementor");
|
|
5011
5041
|
var FontFamilyField = () => {
|
|
5012
|
-
const fontFamilies = (0,
|
|
5042
|
+
const fontFamilies = (0, import_editor_controls42.useFontFamilies)();
|
|
5013
5043
|
const sectionWidth = (0, import_editor_ui7.useSectionWidth)();
|
|
5014
5044
|
if (fontFamilies.length === 0) {
|
|
5015
5045
|
return null;
|
|
5016
5046
|
}
|
|
5017
5047
|
return /* @__PURE__ */ React73.createElement(StylesField, { bind: "font-family", propDisplayName: FONT_FAMILY_LABEL }, /* @__PURE__ */ React73.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ React73.createElement(
|
|
5018
|
-
|
|
5048
|
+
import_editor_controls42.FontFamilyControl,
|
|
5019
5049
|
{
|
|
5020
5050
|
fontFamilies,
|
|
5021
5051
|
sectionWidth,
|
|
@@ -5027,17 +5057,17 @@ var FontFamilyField = () => {
|
|
|
5027
5057
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
5028
5058
|
var React74 = __toESM(require("react"));
|
|
5029
5059
|
var import_react32 = require("react");
|
|
5030
|
-
var
|
|
5060
|
+
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
5031
5061
|
var import_i18n50 = require("@wordpress/i18n");
|
|
5032
5062
|
var FONT_SIZE_LABEL = (0, import_i18n50.__)("Font size", "elementor");
|
|
5033
5063
|
var FontSizeField = () => {
|
|
5034
5064
|
const rowRef = (0, import_react32.useRef)(null);
|
|
5035
|
-
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(
|
|
5065
|
+
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 })));
|
|
5036
5066
|
};
|
|
5037
5067
|
|
|
5038
5068
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
5039
5069
|
var React75 = __toESM(require("react"));
|
|
5040
|
-
var
|
|
5070
|
+
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
5041
5071
|
var import_icons21 = require("@elementor/icons");
|
|
5042
5072
|
var import_i18n51 = require("@wordpress/i18n");
|
|
5043
5073
|
var FONT_STYLE_LABEL = (0, import_i18n51.__)("Font style", "elementor");
|
|
@@ -5056,12 +5086,12 @@ var options8 = [
|
|
|
5056
5086
|
}
|
|
5057
5087
|
];
|
|
5058
5088
|
var FontStyleField = () => {
|
|
5059
|
-
return /* @__PURE__ */ React75.createElement(StylesField, { bind: "font-style", propDisplayName: FONT_STYLE_LABEL }, /* @__PURE__ */ React75.createElement(StylesFieldLayout, { label: FONT_STYLE_LABEL }, /* @__PURE__ */ React75.createElement(
|
|
5089
|
+
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 })));
|
|
5060
5090
|
};
|
|
5061
5091
|
|
|
5062
5092
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
5063
5093
|
var React76 = __toESM(require("react"));
|
|
5064
|
-
var
|
|
5094
|
+
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
5065
5095
|
var import_i18n52 = require("@wordpress/i18n");
|
|
5066
5096
|
var FONT_WEIGHT_LABEL = (0, import_i18n52.__)("Font weight", "elementor");
|
|
5067
5097
|
var fontWeightOptions = [
|
|
@@ -5076,40 +5106,40 @@ var fontWeightOptions = [
|
|
|
5076
5106
|
{ value: "900", label: (0, import_i18n52.__)("900 - Black", "elementor") }
|
|
5077
5107
|
];
|
|
5078
5108
|
var FontWeightField = () => {
|
|
5079
|
-
return /* @__PURE__ */ React76.createElement(StylesField, { bind: "font-weight", propDisplayName: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React76.createElement(
|
|
5109
|
+
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 })));
|
|
5080
5110
|
};
|
|
5081
5111
|
|
|
5082
5112
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
5083
5113
|
var React77 = __toESM(require("react"));
|
|
5084
5114
|
var import_react33 = require("react");
|
|
5085
|
-
var
|
|
5115
|
+
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
5086
5116
|
var import_i18n53 = require("@wordpress/i18n");
|
|
5087
5117
|
var LETTER_SPACING_LABEL = (0, import_i18n53.__)("Letter spacing", "elementor");
|
|
5088
5118
|
var LetterSpacingField = () => {
|
|
5089
5119
|
const rowRef = (0, import_react33.useRef)(null);
|
|
5090
|
-
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(
|
|
5120
|
+
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 })));
|
|
5091
5121
|
};
|
|
5092
5122
|
|
|
5093
5123
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
5094
5124
|
var React78 = __toESM(require("react"));
|
|
5095
5125
|
var import_react34 = require("react");
|
|
5096
|
-
var
|
|
5126
|
+
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
5097
5127
|
var import_i18n54 = require("@wordpress/i18n");
|
|
5098
5128
|
var LINE_HEIGHT_LABEL = (0, import_i18n54.__)("Line height", "elementor");
|
|
5099
5129
|
var LineHeightField = () => {
|
|
5100
5130
|
const rowRef = (0, import_react34.useRef)(null);
|
|
5101
|
-
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(
|
|
5131
|
+
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 })));
|
|
5102
5132
|
};
|
|
5103
5133
|
|
|
5104
5134
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
5105
5135
|
var React79 = __toESM(require("react"));
|
|
5106
|
-
var
|
|
5136
|
+
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
5107
5137
|
var import_icons22 = require("@elementor/icons");
|
|
5108
|
-
var
|
|
5138
|
+
var import_ui41 = require("@elementor/ui");
|
|
5109
5139
|
var import_i18n55 = require("@wordpress/i18n");
|
|
5110
5140
|
var TEXT_ALIGNMENT_LABEL = (0, import_i18n55.__)("Text align", "elementor");
|
|
5111
|
-
var AlignStartIcon = (0,
|
|
5112
|
-
var AlignEndIcon = (0,
|
|
5141
|
+
var AlignStartIcon = (0, import_ui41.withDirection)(import_icons22.AlignLeftIcon);
|
|
5142
|
+
var AlignEndIcon = (0, import_ui41.withDirection)(import_icons22.AlignRightIcon);
|
|
5113
5143
|
var options9 = [
|
|
5114
5144
|
{
|
|
5115
5145
|
value: "start",
|
|
@@ -5137,21 +5167,21 @@ var options9 = [
|
|
|
5137
5167
|
}
|
|
5138
5168
|
];
|
|
5139
5169
|
var TextAlignmentField = () => {
|
|
5140
|
-
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(
|
|
5170
|
+
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 }))));
|
|
5141
5171
|
};
|
|
5142
5172
|
|
|
5143
5173
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
5144
5174
|
var React80 = __toESM(require("react"));
|
|
5145
|
-
var
|
|
5175
|
+
var import_editor_controls49 = require("@elementor/editor-controls");
|
|
5146
5176
|
var import_i18n56 = require("@wordpress/i18n");
|
|
5147
5177
|
var TEXT_COLOR_LABEL = (0, import_i18n56.__)("Text color", "elementor");
|
|
5148
5178
|
var TextColorField = () => {
|
|
5149
|
-
return /* @__PURE__ */ React80.createElement(StylesField, { bind: "color", propDisplayName: TEXT_COLOR_LABEL }, /* @__PURE__ */ React80.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ React80.createElement(
|
|
5179
|
+
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" })));
|
|
5150
5180
|
};
|
|
5151
5181
|
|
|
5152
5182
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
5153
5183
|
var React81 = __toESM(require("react"));
|
|
5154
|
-
var
|
|
5184
|
+
var import_editor_controls50 = require("@elementor/editor-controls");
|
|
5155
5185
|
var import_icons23 = require("@elementor/icons");
|
|
5156
5186
|
var import_i18n57 = require("@wordpress/i18n");
|
|
5157
5187
|
var TEXT_DECORATION_LABEL = (0, import_i18n57.__)("Line decoration", "elementor");
|
|
@@ -5182,11 +5212,11 @@ var options10 = [
|
|
|
5182
5212
|
showTooltip: true
|
|
5183
5213
|
}
|
|
5184
5214
|
];
|
|
5185
|
-
var TextDecorationField = () => /* @__PURE__ */ React81.createElement(StylesField, { bind: "text-decoration", propDisplayName: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React81.createElement(StylesFieldLayout, { label: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React81.createElement(
|
|
5215
|
+
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 })));
|
|
5186
5216
|
|
|
5187
5217
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
5188
5218
|
var React82 = __toESM(require("react"));
|
|
5189
|
-
var
|
|
5219
|
+
var import_editor_controls51 = require("@elementor/editor-controls");
|
|
5190
5220
|
var import_icons24 = require("@elementor/icons");
|
|
5191
5221
|
var import_i18n58 = require("@wordpress/i18n");
|
|
5192
5222
|
var TEXT_DIRECTION_LABEL = (0, import_i18n58.__)("Direction", "elementor");
|
|
@@ -5205,18 +5235,18 @@ var options11 = [
|
|
|
5205
5235
|
}
|
|
5206
5236
|
];
|
|
5207
5237
|
var TextDirectionField = () => {
|
|
5208
|
-
return /* @__PURE__ */ React82.createElement(StylesField, { bind: "direction", propDisplayName: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React82.createElement(StylesFieldLayout, { label: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React82.createElement(
|
|
5238
|
+
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 })));
|
|
5209
5239
|
};
|
|
5210
5240
|
|
|
5211
5241
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
5212
5242
|
var React84 = __toESM(require("react"));
|
|
5213
|
-
var
|
|
5243
|
+
var import_editor_controls52 = require("@elementor/editor-controls");
|
|
5214
5244
|
var import_i18n59 = require("@wordpress/i18n");
|
|
5215
5245
|
|
|
5216
5246
|
// src/components/add-or-remove-content.tsx
|
|
5217
5247
|
var React83 = __toESM(require("react"));
|
|
5218
5248
|
var import_icons25 = require("@elementor/icons");
|
|
5219
|
-
var
|
|
5249
|
+
var import_ui42 = require("@elementor/ui");
|
|
5220
5250
|
var SIZE = "tiny";
|
|
5221
5251
|
var AddOrRemoveContent = ({
|
|
5222
5252
|
isAdded,
|
|
@@ -5227,7 +5257,7 @@ var AddOrRemoveContent = ({
|
|
|
5227
5257
|
renderLabel
|
|
5228
5258
|
}) => {
|
|
5229
5259
|
return /* @__PURE__ */ React83.createElement(SectionContent, null, /* @__PURE__ */ React83.createElement(
|
|
5230
|
-
|
|
5260
|
+
import_ui42.Stack,
|
|
5231
5261
|
{
|
|
5232
5262
|
direction: "row",
|
|
5233
5263
|
sx: {
|
|
@@ -5237,8 +5267,8 @@ var AddOrRemoveContent = ({
|
|
|
5237
5267
|
}
|
|
5238
5268
|
},
|
|
5239
5269
|
renderLabel(),
|
|
5240
|
-
isAdded ? /* @__PURE__ */ React83.createElement(
|
|
5241
|
-
), /* @__PURE__ */ React83.createElement(
|
|
5270
|
+
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 }))
|
|
5271
|
+
), /* @__PURE__ */ React83.createElement(import_ui42.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React83.createElement(SectionContent, null, children)));
|
|
5242
5272
|
};
|
|
5243
5273
|
|
|
5244
5274
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -5279,13 +5309,13 @@ var TextStrokeField = () => {
|
|
|
5279
5309
|
disabled: !canEdit,
|
|
5280
5310
|
renderLabel: () => /* @__PURE__ */ React84.createElement(ControlLabel, null, TEXT_STROKE_LABEL)
|
|
5281
5311
|
},
|
|
5282
|
-
/* @__PURE__ */ React84.createElement(
|
|
5312
|
+
/* @__PURE__ */ React84.createElement(import_editor_controls52.StrokeControl, null)
|
|
5283
5313
|
));
|
|
5284
5314
|
};
|
|
5285
5315
|
|
|
5286
5316
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
5287
5317
|
var React85 = __toESM(require("react"));
|
|
5288
|
-
var
|
|
5318
|
+
var import_editor_controls53 = require("@elementor/editor-controls");
|
|
5289
5319
|
var import_icons26 = require("@elementor/icons");
|
|
5290
5320
|
var import_i18n60 = require("@wordpress/i18n");
|
|
5291
5321
|
var TEXT_TRANSFORM_LABEL = (0, import_i18n60.__)("Text transform", "elementor");
|
|
@@ -5315,17 +5345,17 @@ var options12 = [
|
|
|
5315
5345
|
showTooltip: true
|
|
5316
5346
|
}
|
|
5317
5347
|
];
|
|
5318
|
-
var TransformField = () => /* @__PURE__ */ React85.createElement(StylesField, { bind: "text-transform", propDisplayName: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React85.createElement(StylesFieldLayout, { label: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React85.createElement(
|
|
5348
|
+
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 })));
|
|
5319
5349
|
|
|
5320
5350
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
5321
5351
|
var React86 = __toESM(require("react"));
|
|
5322
5352
|
var import_react35 = require("react");
|
|
5323
|
-
var
|
|
5353
|
+
var import_editor_controls54 = require("@elementor/editor-controls");
|
|
5324
5354
|
var import_i18n61 = require("@wordpress/i18n");
|
|
5325
5355
|
var WORD_SPACING_LABEL = (0, import_i18n61.__)("Word spacing", "elementor");
|
|
5326
5356
|
var WordSpacingField = () => {
|
|
5327
5357
|
const rowRef = (0, import_react35.useRef)(null);
|
|
5328
|
-
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(
|
|
5358
|
+
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 })));
|
|
5329
5359
|
};
|
|
5330
5360
|
|
|
5331
5361
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -5398,7 +5428,7 @@ var StyleTab = () => {
|
|
|
5398
5428
|
},
|
|
5399
5429
|
setMetaState: setActiveStyleState
|
|
5400
5430
|
},
|
|
5401
|
-
/* @__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(
|
|
5431
|
+
/* @__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(
|
|
5402
5432
|
StyleTabSection,
|
|
5403
5433
|
{
|
|
5404
5434
|
section: {
|
|
@@ -5526,12 +5556,12 @@ var StyleTab = () => {
|
|
|
5526
5556
|
"transition"
|
|
5527
5557
|
]
|
|
5528
5558
|
}
|
|
5529
|
-
), /* @__PURE__ */ React89.createElement(StyleTabSlot, null)), /* @__PURE__ */ React89.createElement(
|
|
5559
|
+
), /* @__PURE__ */ React89.createElement(StyleTabSlot, null)), /* @__PURE__ */ React89.createElement(import_ui43.Box, { sx: { height: "150px" } })))
|
|
5530
5560
|
));
|
|
5531
5561
|
};
|
|
5532
5562
|
function ClassesHeader({ children }) {
|
|
5533
5563
|
const scrollDirection = useScrollDirection();
|
|
5534
|
-
return /* @__PURE__ */ React89.createElement(
|
|
5564
|
+
return /* @__PURE__ */ React89.createElement(import_ui43.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
5535
5565
|
}
|
|
5536
5566
|
function useCurrentClassesProp() {
|
|
5537
5567
|
const { elementType } = useElement();
|
|
@@ -5558,12 +5588,12 @@ var PanelTabContent = () => {
|
|
|
5558
5588
|
const editorDefaults = useDefaultPanelSettings();
|
|
5559
5589
|
const defaultComponentTab = editorDefaults.defaultTab;
|
|
5560
5590
|
const isInteractionsActive = (0, import_editor_v1_adapters7.isExperimentActive)("e_interactions");
|
|
5561
|
-
const isPromotedElement = !!(0,
|
|
5591
|
+
const isPromotedElement = !!(0, import_editor_elements13.getWidgetsCache)()?.[element.type]?.meta?.is_pro_promotion;
|
|
5562
5592
|
const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
5563
5593
|
const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;
|
|
5564
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
5565
|
-
return /* @__PURE__ */ React90.createElement(ScrollProvider, null, /* @__PURE__ */ React90.createElement(
|
|
5566
|
-
|
|
5594
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui44.useTabs)(currentTab);
|
|
5595
|
+
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(
|
|
5596
|
+
import_ui44.Tabs,
|
|
5567
5597
|
{
|
|
5568
5598
|
variant: "fullWidth",
|
|
5569
5599
|
size: "small",
|
|
@@ -5574,18 +5604,18 @@ var PanelTabContent = () => {
|
|
|
5574
5604
|
setCurrentTab(newValue);
|
|
5575
5605
|
}
|
|
5576
5606
|
},
|
|
5577
|
-
!isPromotedElement && /* @__PURE__ */ React90.createElement(
|
|
5578
|
-
/* @__PURE__ */ React90.createElement(
|
|
5579
|
-
isInteractionsActive && /* @__PURE__ */ React90.createElement(
|
|
5580
|
-
), /* @__PURE__ */ React90.createElement(
|
|
5607
|
+
!isPromotedElement && /* @__PURE__ */ React90.createElement(import_ui44.Tab, { label: (0, import_i18n63.__)("General", "elementor"), ...getTabProps("settings") }),
|
|
5608
|
+
/* @__PURE__ */ React90.createElement(import_ui44.Tab, { label: (0, import_i18n63.__)("Style", "elementor"), ...getTabProps("style") }),
|
|
5609
|
+
isInteractionsActive && /* @__PURE__ */ React90.createElement(import_ui44.Tab, { label: (0, import_i18n63.__)("Interactions", "elementor"), ...getTabProps("interactions") })
|
|
5610
|
+
), /* @__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))));
|
|
5581
5611
|
};
|
|
5582
5612
|
|
|
5583
5613
|
// src/components/editing-panel.tsx
|
|
5584
5614
|
var { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = (0, import_locations5.createLocation)();
|
|
5585
5615
|
var { useMenuItems } = import_menus.controlActionsMenu;
|
|
5586
5616
|
var EditingPanel = () => {
|
|
5587
|
-
const { element, elementType, settings } = (0,
|
|
5588
|
-
const controlReplacements = (0,
|
|
5617
|
+
const { element, elementType, settings } = (0, import_editor_elements14.useSelectedElementSettings)();
|
|
5618
|
+
const controlReplacements = (0, import_editor_controls55.getControlReplacements)();
|
|
5589
5619
|
const menuItems = useMenuItems().default;
|
|
5590
5620
|
if (!element || !elementType) {
|
|
5591
5621
|
return null;
|
|
@@ -5596,7 +5626,7 @@ var EditingPanel = () => {
|
|
|
5596
5626
|
if (ReplacementComponent) {
|
|
5597
5627
|
panelContent = /* @__PURE__ */ React91.createElement(ReplacementComponent, null);
|
|
5598
5628
|
}
|
|
5599
|
-
return /* @__PURE__ */ React91.createElement(
|
|
5629
|
+
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)))))));
|
|
5600
5630
|
};
|
|
5601
5631
|
|
|
5602
5632
|
// src/init.ts
|
|
@@ -5616,10 +5646,10 @@ var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__cre
|
|
|
5616
5646
|
});
|
|
5617
5647
|
|
|
5618
5648
|
// src/sync/is-atomic-widget-selected.ts
|
|
5619
|
-
var
|
|
5649
|
+
var import_editor_elements15 = require("@elementor/editor-elements");
|
|
5620
5650
|
var isAtomicWidgetSelected = () => {
|
|
5621
|
-
const selectedElements = (0,
|
|
5622
|
-
const widgetCache = (0,
|
|
5651
|
+
const selectedElements = (0, import_editor_elements15.getSelectedElements)();
|
|
5652
|
+
const widgetCache = (0, import_editor_elements15.getWidgetsCache)();
|
|
5623
5653
|
if (selectedElements.length !== 1) {
|
|
5624
5654
|
return false;
|
|
5625
5655
|
}
|
|
@@ -5645,12 +5675,12 @@ var EditingPanelHooks = () => {
|
|
|
5645
5675
|
};
|
|
5646
5676
|
|
|
5647
5677
|
// src/components/promotions/init.tsx
|
|
5648
|
-
var
|
|
5678
|
+
var import_editor_controls57 = require("@elementor/editor-controls");
|
|
5649
5679
|
|
|
5650
5680
|
// src/components/promotions/custom-css.tsx
|
|
5651
5681
|
var React92 = __toESM(require("react"));
|
|
5652
5682
|
var import_react39 = require("react");
|
|
5653
|
-
var
|
|
5683
|
+
var import_editor_controls56 = require("@elementor/editor-controls");
|
|
5654
5684
|
var import_i18n65 = require("@wordpress/i18n");
|
|
5655
5685
|
var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
|
|
5656
5686
|
var CustomCssSection = () => {
|
|
@@ -5662,7 +5692,7 @@ var CustomCssSection = () => {
|
|
|
5662
5692
|
name: "Custom CSS",
|
|
5663
5693
|
title: (0, import_i18n65.__)("Custom CSS", "elementor"),
|
|
5664
5694
|
action: {
|
|
5665
|
-
component: /* @__PURE__ */ React92.createElement(
|
|
5695
|
+
component: /* @__PURE__ */ React92.createElement(import_editor_controls56.PromotionTrigger, { ref: triggerRef, promotionKey: "customCss", trackingData: TRACKING_DATA }),
|
|
5666
5696
|
onClick: () => triggerRef.current?.toggle()
|
|
5667
5697
|
}
|
|
5668
5698
|
}
|
|
@@ -5678,24 +5708,24 @@ var init = () => {
|
|
|
5678
5708
|
options: { overwrite: true }
|
|
5679
5709
|
});
|
|
5680
5710
|
if (!window.elementorPro) {
|
|
5681
|
-
controlsRegistry.register("attributes",
|
|
5682
|
-
controlsRegistry.register("display-conditions",
|
|
5711
|
+
controlsRegistry.register("attributes", import_editor_controls57.AttributesControl, "two-columns");
|
|
5712
|
+
controlsRegistry.register("display-conditions", import_editor_controls57.DisplayConditionsControl, "two-columns");
|
|
5683
5713
|
}
|
|
5684
5714
|
};
|
|
5685
5715
|
|
|
5686
5716
|
// src/controls-registry/element-controls/tabs-control/tabs-control.tsx
|
|
5687
5717
|
var React93 = __toESM(require("react"));
|
|
5688
|
-
var
|
|
5689
|
-
var
|
|
5718
|
+
var import_editor_controls59 = require("@elementor/editor-controls");
|
|
5719
|
+
var import_editor_elements18 = require("@elementor/editor-elements");
|
|
5690
5720
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
5691
5721
|
var import_icons28 = require("@elementor/icons");
|
|
5692
|
-
var
|
|
5722
|
+
var import_ui46 = require("@elementor/ui");
|
|
5693
5723
|
var import_i18n67 = require("@wordpress/i18n");
|
|
5694
5724
|
|
|
5695
5725
|
// src/controls-registry/element-controls/get-element-by-type.ts
|
|
5696
|
-
var
|
|
5726
|
+
var import_editor_elements16 = require("@elementor/editor-elements");
|
|
5697
5727
|
var getElementByType = (elementId, type) => {
|
|
5698
|
-
const currentElement = (0,
|
|
5728
|
+
const currentElement = (0, import_editor_elements16.getContainer)(elementId);
|
|
5699
5729
|
if (!currentElement) {
|
|
5700
5730
|
return null;
|
|
5701
5731
|
}
|
|
@@ -5706,14 +5736,14 @@ var getElementByType = (elementId, type) => {
|
|
|
5706
5736
|
};
|
|
5707
5737
|
|
|
5708
5738
|
// src/controls-registry/element-controls/tabs-control/use-actions.ts
|
|
5709
|
-
var
|
|
5710
|
-
var
|
|
5739
|
+
var import_editor_controls58 = require("@elementor/editor-controls");
|
|
5740
|
+
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
5711
5741
|
var import_editor_props17 = require("@elementor/editor-props");
|
|
5712
5742
|
var import_i18n66 = require("@wordpress/i18n");
|
|
5713
5743
|
var TAB_ELEMENT_TYPE = "e-tab";
|
|
5714
5744
|
var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
|
|
5715
5745
|
var useActions = () => {
|
|
5716
|
-
const { value, setValue: setDefaultActiveTab } = (0,
|
|
5746
|
+
const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls58.useBoundProp)(import_editor_props17.numberPropTypeUtil);
|
|
5717
5747
|
const defaultActiveTab = value ?? 0;
|
|
5718
5748
|
const duplicateItem = ({
|
|
5719
5749
|
items: items3,
|
|
@@ -5725,12 +5755,12 @@ var useActions = () => {
|
|
|
5725
5755
|
});
|
|
5726
5756
|
items3.forEach(({ item, index }) => {
|
|
5727
5757
|
const tabId = item.id;
|
|
5728
|
-
const tabContentAreaContainer = (0,
|
|
5758
|
+
const tabContentAreaContainer = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5729
5759
|
const tabContentId = tabContentAreaContainer?.children?.[index]?.id;
|
|
5730
5760
|
if (!tabContentId) {
|
|
5731
5761
|
throw new Error("Original content ID is required for duplication");
|
|
5732
5762
|
}
|
|
5733
|
-
(0,
|
|
5763
|
+
(0, import_editor_elements17.duplicateElements)({
|
|
5734
5764
|
elementIds: [tabId, tabContentId],
|
|
5735
5765
|
title: (0, import_i18n66.__)("Duplicate Tab", "elementor"),
|
|
5736
5766
|
onDuplicateElements: () => {
|
|
@@ -5753,10 +5783,10 @@ var useActions = () => {
|
|
|
5753
5783
|
movedElementId,
|
|
5754
5784
|
movedElementIndex
|
|
5755
5785
|
}) => {
|
|
5756
|
-
const tabContentContainer = (0,
|
|
5786
|
+
const tabContentContainer = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5757
5787
|
const tabContent = tabContentContainer?.children?.[movedElementIndex];
|
|
5758
|
-
const movedElement = (0,
|
|
5759
|
-
const tabsMenu = (0,
|
|
5788
|
+
const movedElement = (0, import_editor_elements17.getContainer)(movedElementId);
|
|
5789
|
+
const tabsMenu = (0, import_editor_elements17.getContainer)(tabsMenuId);
|
|
5760
5790
|
if (!tabContent) {
|
|
5761
5791
|
throw new Error("Content element is required");
|
|
5762
5792
|
}
|
|
@@ -5768,7 +5798,7 @@ var useActions = () => {
|
|
|
5768
5798
|
to: toIndex,
|
|
5769
5799
|
defaultActiveTab
|
|
5770
5800
|
});
|
|
5771
|
-
(0,
|
|
5801
|
+
(0, import_editor_elements17.moveElements)({
|
|
5772
5802
|
title: (0, import_i18n66.__)("Reorder Tabs", "elementor"),
|
|
5773
5803
|
moves: [
|
|
5774
5804
|
{
|
|
@@ -5802,11 +5832,11 @@ var useActions = () => {
|
|
|
5802
5832
|
items: items3,
|
|
5803
5833
|
defaultActiveTab
|
|
5804
5834
|
});
|
|
5805
|
-
(0,
|
|
5835
|
+
(0, import_editor_elements17.removeElements)({
|
|
5806
5836
|
title: (0, import_i18n66.__)("Tabs", "elementor"),
|
|
5807
5837
|
elementIds: items3.flatMap(({ item, index }) => {
|
|
5808
5838
|
const tabId = item.id;
|
|
5809
|
-
const tabContentContainer = (0,
|
|
5839
|
+
const tabContentContainer = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5810
5840
|
const tabContentId = tabContentContainer?.children?.[index]?.id;
|
|
5811
5841
|
if (!tabContentId) {
|
|
5812
5842
|
throw new Error("Content ID is required");
|
|
@@ -5830,14 +5860,14 @@ var useActions = () => {
|
|
|
5830
5860
|
tabsMenuId,
|
|
5831
5861
|
items: items3
|
|
5832
5862
|
}) => {
|
|
5833
|
-
const tabContentArea = (0,
|
|
5834
|
-
const tabsMenu = (0,
|
|
5863
|
+
const tabContentArea = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5864
|
+
const tabsMenu = (0, import_editor_elements17.getContainer)(tabsMenuId);
|
|
5835
5865
|
if (!tabContentArea || !tabsMenu) {
|
|
5836
5866
|
throw new Error("Tab containers not found");
|
|
5837
5867
|
}
|
|
5838
5868
|
items3.forEach(({ index }) => {
|
|
5839
5869
|
const position = index + 1;
|
|
5840
|
-
(0,
|
|
5870
|
+
(0, import_editor_elements17.createElements)({
|
|
5841
5871
|
title: (0, import_i18n66.__)("Tabs", "elementor"),
|
|
5842
5872
|
elements: [
|
|
5843
5873
|
{
|
|
@@ -5912,7 +5942,7 @@ var TabsControl = ({ label }) => {
|
|
|
5912
5942
|
var TabsControlContent = ({ label }) => {
|
|
5913
5943
|
const { element } = useElement();
|
|
5914
5944
|
const { addItem, duplicateItem, moveItem, removeItem } = useActions();
|
|
5915
|
-
const { [TAB_ELEMENT_TYPE]: tabLinks } = (0,
|
|
5945
|
+
const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, import_editor_elements18.useElementChildren)(element.id, {
|
|
5916
5946
|
[TAB_MENU_ELEMENT_TYPE]: TAB_ELEMENT_TYPE
|
|
5917
5947
|
});
|
|
5918
5948
|
const tabList = getElementByType(element.id, TAB_MENU_ELEMENT_TYPE);
|
|
@@ -5952,7 +5982,7 @@ var TabsControlContent = ({ label }) => {
|
|
|
5952
5982
|
}
|
|
5953
5983
|
};
|
|
5954
5984
|
return /* @__PURE__ */ React93.createElement(
|
|
5955
|
-
|
|
5985
|
+
import_editor_controls59.Repeater,
|
|
5956
5986
|
{
|
|
5957
5987
|
showToggle: false,
|
|
5958
5988
|
values: repeaterValues,
|
|
@@ -5971,27 +6001,27 @@ var TabsControlContent = ({ label }) => {
|
|
|
5971
6001
|
};
|
|
5972
6002
|
var ItemLabel = ({ value, index }) => {
|
|
5973
6003
|
const elementTitle = value?.title;
|
|
5974
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6004
|
+
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 }));
|
|
5975
6005
|
};
|
|
5976
6006
|
var ItemDefaultTab = ({ index }) => {
|
|
5977
|
-
const { value: defaultItem } = (0,
|
|
6007
|
+
const { value: defaultItem } = (0, import_editor_controls59.useBoundProp)(import_editor_props18.numberPropTypeUtil);
|
|
5978
6008
|
const isDefault = defaultItem === index;
|
|
5979
6009
|
if (!isDefault) {
|
|
5980
6010
|
return null;
|
|
5981
6011
|
}
|
|
5982
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6012
|
+
return /* @__PURE__ */ React93.createElement(import_ui46.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n67.__)("Default", "elementor") });
|
|
5983
6013
|
};
|
|
5984
6014
|
var ItemContent = ({ value, index }) => {
|
|
5985
6015
|
if (!value.id) {
|
|
5986
6016
|
return null;
|
|
5987
6017
|
}
|
|
5988
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6018
|
+
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 })));
|
|
5989
6019
|
};
|
|
5990
6020
|
var DefaultTabControl = ({ tabIndex }) => {
|
|
5991
|
-
const { value, setValue } = (0,
|
|
6021
|
+
const { value, setValue } = (0, import_editor_controls59.useBoundProp)(import_editor_props18.numberPropTypeUtil);
|
|
5992
6022
|
const isDefault = value === tabIndex;
|
|
5993
|
-
return /* @__PURE__ */ React93.createElement(
|
|
5994
|
-
|
|
6023
|
+
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(
|
|
6024
|
+
import_ui46.Switch,
|
|
5995
6025
|
{
|
|
5996
6026
|
size: "small",
|
|
5997
6027
|
checked: isDefault,
|
|
@@ -6006,15 +6036,15 @@ var DefaultTabControl = ({ tabIndex }) => {
|
|
|
6006
6036
|
)));
|
|
6007
6037
|
};
|
|
6008
6038
|
var TabLabelControl = ({ elementId }) => {
|
|
6009
|
-
const editorSettings = (0,
|
|
6039
|
+
const editorSettings = (0, import_editor_elements18.useElementEditorSettings)(elementId);
|
|
6010
6040
|
const label = editorSettings?.title ?? "";
|
|
6011
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6012
|
-
|
|
6041
|
+
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(
|
|
6042
|
+
import_ui46.TextField,
|
|
6013
6043
|
{
|
|
6014
6044
|
size: "tiny",
|
|
6015
6045
|
value: label,
|
|
6016
6046
|
onChange: ({ target }) => {
|
|
6017
|
-
(0,
|
|
6047
|
+
(0, import_editor_elements18.updateElementEditorSettings)({
|
|
6018
6048
|
elementId,
|
|
6019
6049
|
settings: { title: target.value }
|
|
6020
6050
|
});
|
|
@@ -6030,18 +6060,18 @@ var ConditionalTooltip = ({
|
|
|
6030
6060
|
return children;
|
|
6031
6061
|
}
|
|
6032
6062
|
return /* @__PURE__ */ React93.createElement(
|
|
6033
|
-
|
|
6063
|
+
import_ui46.Infotip,
|
|
6034
6064
|
{
|
|
6035
6065
|
arrow: false,
|
|
6036
6066
|
content: /* @__PURE__ */ React93.createElement(
|
|
6037
|
-
|
|
6067
|
+
import_ui46.Alert,
|
|
6038
6068
|
{
|
|
6039
6069
|
color: "secondary",
|
|
6040
6070
|
icon: /* @__PURE__ */ React93.createElement(import_icons28.InfoCircleFilledIcon, { fontSize: "tiny" }),
|
|
6041
6071
|
size: "small",
|
|
6042
6072
|
sx: { width: 288 }
|
|
6043
6073
|
},
|
|
6044
|
-
/* @__PURE__ */ React93.createElement(
|
|
6074
|
+
/* @__PURE__ */ React93.createElement(import_ui46.Typography, { variant: "body2" }, (0, import_i18n67.__)("To change the default tab, simply set another tab as default.", "elementor"))
|
|
6045
6075
|
)
|
|
6046
6076
|
},
|
|
6047
6077
|
/* @__PURE__ */ React93.createElement("span", null, children)
|
|
@@ -6062,12 +6092,12 @@ var registerElementControls = () => {
|
|
|
6062
6092
|
|
|
6063
6093
|
// src/dynamics/init.ts
|
|
6064
6094
|
var import_editor_canvas3 = require("@elementor/editor-canvas");
|
|
6065
|
-
var
|
|
6095
|
+
var import_editor_controls66 = require("@elementor/editor-controls");
|
|
6066
6096
|
var import_menus2 = require("@elementor/menus");
|
|
6067
6097
|
|
|
6068
6098
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6069
6099
|
var React94 = __toESM(require("react"));
|
|
6070
|
-
var
|
|
6100
|
+
var import_editor_controls61 = require("@elementor/editor-controls");
|
|
6071
6101
|
var import_editor_props20 = require("@elementor/editor-props");
|
|
6072
6102
|
var import_icons29 = require("@elementor/icons");
|
|
6073
6103
|
|
|
@@ -6076,7 +6106,7 @@ var import_react42 = require("react");
|
|
|
6076
6106
|
|
|
6077
6107
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
6078
6108
|
var import_react41 = require("react");
|
|
6079
|
-
var
|
|
6109
|
+
var import_editor_controls60 = require("@elementor/editor-controls");
|
|
6080
6110
|
|
|
6081
6111
|
// src/dynamics/sync/get-atomic-dynamic-tags.ts
|
|
6082
6112
|
var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
|
|
@@ -6160,7 +6190,7 @@ var useAllPropDynamicTags = () => {
|
|
|
6160
6190
|
};
|
|
6161
6191
|
var usePropDynamicTagsInternal = (filterByLicense2) => {
|
|
6162
6192
|
let categories = [];
|
|
6163
|
-
const { propType } = (0,
|
|
6193
|
+
const { propType } = (0, import_editor_controls60.useBoundProp)();
|
|
6164
6194
|
if (propType) {
|
|
6165
6195
|
const propDynamicType = getDynamicPropType(propType);
|
|
6166
6196
|
categories = propDynamicType?.settings.categories || [];
|
|
@@ -6206,13 +6236,13 @@ var useDynamicTag = (tagName) => {
|
|
|
6206
6236
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6207
6237
|
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React94.createElement(import_icons29.DatabaseIcon, { fontSize: "tiny" });
|
|
6208
6238
|
var BackgroundControlDynamicTagLabel = ({ value }) => {
|
|
6209
|
-
const context = (0,
|
|
6210
|
-
return /* @__PURE__ */ React94.createElement(
|
|
6239
|
+
const context = (0, import_editor_controls61.useBoundProp)(import_editor_props20.backgroundImageOverlayPropTypeUtil);
|
|
6240
|
+
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 })));
|
|
6211
6241
|
};
|
|
6212
6242
|
var Wrapper2 = ({ rawValue }) => {
|
|
6213
|
-
const { propType } = (0,
|
|
6243
|
+
const { propType } = (0, import_editor_controls61.useBoundProp)();
|
|
6214
6244
|
const imageOverlayPropType = propType.prop_types["background-image-overlay"];
|
|
6215
|
-
return /* @__PURE__ */ React94.createElement(
|
|
6245
|
+
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 })));
|
|
6216
6246
|
};
|
|
6217
6247
|
var Content = ({ rawValue }) => {
|
|
6218
6248
|
const src = rawValue.value.src;
|
|
@@ -6222,10 +6252,10 @@ var Content = ({ rawValue }) => {
|
|
|
6222
6252
|
|
|
6223
6253
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
6224
6254
|
var React98 = __toESM(require("react"));
|
|
6225
|
-
var
|
|
6255
|
+
var import_editor_controls64 = require("@elementor/editor-controls");
|
|
6226
6256
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
6227
6257
|
var import_icons31 = require("@elementor/icons");
|
|
6228
|
-
var
|
|
6258
|
+
var import_ui48 = require("@elementor/ui");
|
|
6229
6259
|
var import_i18n69 = require("@wordpress/i18n");
|
|
6230
6260
|
|
|
6231
6261
|
// src/hooks/use-persist-dynamic-value.ts
|
|
@@ -6238,7 +6268,7 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
6238
6268
|
|
|
6239
6269
|
// src/dynamics/dynamic-control.tsx
|
|
6240
6270
|
var React96 = __toESM(require("react"));
|
|
6241
|
-
var
|
|
6271
|
+
var import_editor_controls62 = require("@elementor/editor-controls");
|
|
6242
6272
|
|
|
6243
6273
|
// src/dynamics/components/dynamic-conditional-control.tsx
|
|
6244
6274
|
var React95 = __toESM(require("react"));
|
|
@@ -6291,7 +6321,7 @@ var DynamicConditionalControl = ({
|
|
|
6291
6321
|
|
|
6292
6322
|
// src/dynamics/dynamic-control.tsx
|
|
6293
6323
|
var DynamicControl = ({ bind, children }) => {
|
|
6294
|
-
const { value, setValue } = (0,
|
|
6324
|
+
const { value, setValue } = (0, import_editor_controls62.useBoundProp)(dynamicPropTypeUtil);
|
|
6295
6325
|
const { name = "", group = "", settings } = value ?? {};
|
|
6296
6326
|
const dynamicTag = useDynamicTag(name);
|
|
6297
6327
|
if (!dynamicTag) {
|
|
@@ -6311,7 +6341,7 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
6311
6341
|
});
|
|
6312
6342
|
};
|
|
6313
6343
|
const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
|
|
6314
|
-
return /* @__PURE__ */ React96.createElement(
|
|
6344
|
+
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(
|
|
6315
6345
|
DynamicConditionalControl,
|
|
6316
6346
|
{
|
|
6317
6347
|
propType: dynamicPropType,
|
|
@@ -6325,10 +6355,10 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
6325
6355
|
// src/dynamics/components/dynamic-selection.tsx
|
|
6326
6356
|
var React97 = __toESM(require("react"));
|
|
6327
6357
|
var import_react44 = require("react");
|
|
6328
|
-
var
|
|
6358
|
+
var import_editor_controls63 = require("@elementor/editor-controls");
|
|
6329
6359
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
6330
6360
|
var import_icons30 = require("@elementor/icons");
|
|
6331
|
-
var
|
|
6361
|
+
var import_ui47 = require("@elementor/ui");
|
|
6332
6362
|
var import_i18n68 = require("@wordpress/i18n");
|
|
6333
6363
|
var SIZE2 = "tiny";
|
|
6334
6364
|
var PROMO_TEXT_WIDTH = 170;
|
|
@@ -6337,18 +6367,18 @@ var RENEW_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-renew
|
|
|
6337
6367
|
var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
6338
6368
|
const [searchValue, setSearchValue] = (0, import_react44.useState)("");
|
|
6339
6369
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
6340
|
-
const theme = (0,
|
|
6341
|
-
const { value: anyValue } = (0,
|
|
6342
|
-
const { bind, value: dynamicValue, setValue } = (0,
|
|
6370
|
+
const theme = (0, import_ui47.useTheme)();
|
|
6371
|
+
const { value: anyValue } = (0, import_editor_controls63.useBoundProp)();
|
|
6372
|
+
const { bind, value: dynamicValue, setValue } = (0, import_editor_controls63.useBoundProp)(dynamicPropTypeUtil);
|
|
6343
6373
|
const [, updatePropValueHistory] = usePersistDynamicValue(bind);
|
|
6344
6374
|
const isCurrentValueDynamic = !!dynamicValue;
|
|
6345
6375
|
const options13 = useFilteredOptions(searchValue);
|
|
6346
6376
|
const hasNoDynamicTags = !options13.length && !searchValue.trim();
|
|
6347
6377
|
(0, import_react44.useEffect)(() => {
|
|
6348
6378
|
if (hasNoDynamicTags) {
|
|
6349
|
-
(0,
|
|
6379
|
+
(0, import_editor_controls63.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
6350
6380
|
} else if (expired) {
|
|
6351
|
-
(0,
|
|
6381
|
+
(0, import_editor_controls63.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
6352
6382
|
}
|
|
6353
6383
|
}, [hasNoDynamicTags, expired]);
|
|
6354
6384
|
const handleSearch = (value) => {
|
|
@@ -6388,7 +6418,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6388
6418
|
onSearch: handleSearch,
|
|
6389
6419
|
placeholder: (0, import_i18n68.__)("Search dynamic tags\u2026", "elementor")
|
|
6390
6420
|
}
|
|
6391
|
-
), /* @__PURE__ */ React97.createElement(
|
|
6421
|
+
), /* @__PURE__ */ React97.createElement(import_ui47.Divider, null), /* @__PURE__ */ React97.createElement(
|
|
6392
6422
|
import_editor_ui9.PopoverMenuList,
|
|
6393
6423
|
{
|
|
6394
6424
|
items: virtualizedItems,
|
|
@@ -6410,7 +6440,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6410
6440
|
), getPopOverContent());
|
|
6411
6441
|
};
|
|
6412
6442
|
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React97.createElement(
|
|
6413
|
-
|
|
6443
|
+
import_ui47.Stack,
|
|
6414
6444
|
{
|
|
6415
6445
|
gap: 1,
|
|
6416
6446
|
alignItems: "center",
|
|
@@ -6421,11 +6451,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React97.createElem
|
|
|
6421
6451
|
sx: { pb: 3.5 }
|
|
6422
6452
|
},
|
|
6423
6453
|
/* @__PURE__ */ React97.createElement(import_icons30.DatabaseIcon, { fontSize: "large" }),
|
|
6424
|
-
/* @__PURE__ */ React97.createElement(
|
|
6425
|
-
/* @__PURE__ */ React97.createElement(
|
|
6454
|
+
/* @__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."),
|
|
6455
|
+
/* @__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")))
|
|
6426
6456
|
);
|
|
6427
|
-
var NoDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
|
|
6428
|
-
|
|
6457
|
+
var NoDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(import_ui47.Divider, null), /* @__PURE__ */ React97.createElement(
|
|
6458
|
+
import_ui47.Stack,
|
|
6429
6459
|
{
|
|
6430
6460
|
gap: 1,
|
|
6431
6461
|
alignItems: "center",
|
|
@@ -6436,19 +6466,19 @@ var NoDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment
|
|
|
6436
6466
|
sx: { pb: 3.5 }
|
|
6437
6467
|
},
|
|
6438
6468
|
/* @__PURE__ */ React97.createElement(import_icons30.DatabaseIcon, { fontSize: "large" }),
|
|
6439
|
-
/* @__PURE__ */ React97.createElement(
|
|
6440
|
-
/* @__PURE__ */ React97.createElement(
|
|
6469
|
+
/* @__PURE__ */ React97.createElement(import_ui47.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n68.__)("Streamline your workflow with dynamic tags", "elementor")),
|
|
6470
|
+
/* @__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")),
|
|
6441
6471
|
/* @__PURE__ */ React97.createElement(
|
|
6442
6472
|
import_editor_ui9.CtaButton,
|
|
6443
6473
|
{
|
|
6444
6474
|
size: "small",
|
|
6445
6475
|
href: PRO_DYNAMIC_TAGS_URL,
|
|
6446
|
-
onClick: () => (0,
|
|
6476
|
+
onClick: () => (0, import_editor_controls63.trackUpgradePromotionClick)({ target_name: "dynamic_tags" })
|
|
6447
6477
|
}
|
|
6448
6478
|
)
|
|
6449
6479
|
));
|
|
6450
|
-
var ExpiredDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
|
|
6451
|
-
|
|
6480
|
+
var ExpiredDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(import_ui47.Divider, null), /* @__PURE__ */ React97.createElement(
|
|
6481
|
+
import_ui47.Stack,
|
|
6452
6482
|
{
|
|
6453
6483
|
gap: 1,
|
|
6454
6484
|
alignItems: "center",
|
|
@@ -6459,14 +6489,14 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fra
|
|
|
6459
6489
|
sx: { pb: 3.5 }
|
|
6460
6490
|
},
|
|
6461
6491
|
/* @__PURE__ */ React97.createElement(import_icons30.DatabaseIcon, { fontSize: "large" }),
|
|
6462
|
-
/* @__PURE__ */ React97.createElement(
|
|
6463
|
-
/* @__PURE__ */ React97.createElement(
|
|
6492
|
+
/* @__PURE__ */ React97.createElement(import_ui47.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n68.__)("Unlock your Dynamic tags again", "elementor")),
|
|
6493
|
+
/* @__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")),
|
|
6464
6494
|
/* @__PURE__ */ React97.createElement(
|
|
6465
6495
|
import_editor_ui9.CtaButton,
|
|
6466
6496
|
{
|
|
6467
6497
|
size: "small",
|
|
6468
6498
|
href: RENEW_DYNAMIC_TAGS_URL,
|
|
6469
|
-
onClick: () => (0,
|
|
6499
|
+
onClick: () => (0, import_editor_controls63.trackUpgradePromotionClick)({ target_name: "dynamic_tags" }),
|
|
6470
6500
|
children: (0, import_i18n68.__)("Renew Now", "elementor")
|
|
6471
6501
|
}
|
|
6472
6502
|
)
|
|
@@ -6491,8 +6521,8 @@ var useFilteredOptions = (searchValue) => {
|
|
|
6491
6521
|
var SIZE3 = "tiny";
|
|
6492
6522
|
var tagsWithoutTabs = ["popup"];
|
|
6493
6523
|
var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
6494
|
-
const { setValue: setAnyValue, propType } = (0,
|
|
6495
|
-
const { bind, value } = (0,
|
|
6524
|
+
const { setValue: setAnyValue, propType } = (0, import_editor_controls64.useBoundProp)();
|
|
6525
|
+
const { bind, value } = (0, import_editor_controls64.useBoundProp)(dynamicPropTypeUtil);
|
|
6496
6526
|
const { expired: readonly } = useLicenseConfig();
|
|
6497
6527
|
const originalPropType = createTopLevelObjectType({
|
|
6498
6528
|
schema: {
|
|
@@ -6500,11 +6530,11 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6500
6530
|
}
|
|
6501
6531
|
});
|
|
6502
6532
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
6503
|
-
const selectionPopoverState = (0,
|
|
6533
|
+
const selectionPopoverState = (0, import_ui48.usePopupState)({ variant: "popover" });
|
|
6504
6534
|
const { name: tagName = "" } = value;
|
|
6505
6535
|
const dynamicTag = useDynamicTag(tagName);
|
|
6506
6536
|
if (!isDynamicTagSupported(tagName) && OriginalControl) {
|
|
6507
|
-
return /* @__PURE__ */ React98.createElement(
|
|
6537
|
+
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 })));
|
|
6508
6538
|
}
|
|
6509
6539
|
const removeDynamicTag = () => {
|
|
6510
6540
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -6512,16 +6542,16 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6512
6542
|
if (!dynamicTag) {
|
|
6513
6543
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
6514
6544
|
}
|
|
6515
|
-
return /* @__PURE__ */ React98.createElement(
|
|
6516
|
-
|
|
6545
|
+
return /* @__PURE__ */ React98.createElement(import_ui48.Box, null, /* @__PURE__ */ React98.createElement(
|
|
6546
|
+
import_ui48.UnstableTag,
|
|
6517
6547
|
{
|
|
6518
6548
|
fullWidth: true,
|
|
6519
6549
|
showActionsOnHover: true,
|
|
6520
6550
|
label: dynamicTag.label,
|
|
6521
6551
|
startIcon: /* @__PURE__ */ React98.createElement(import_icons31.DatabaseIcon, { fontSize: SIZE3 }),
|
|
6522
|
-
...(0,
|
|
6552
|
+
...(0, import_ui48.bindTrigger)(selectionPopoverState),
|
|
6523
6553
|
actions: /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(DynamicSettingsPopover, { dynamicTag, disabled: readonly }), /* @__PURE__ */ React98.createElement(
|
|
6524
|
-
|
|
6554
|
+
import_ui48.IconButton,
|
|
6525
6555
|
{
|
|
6526
6556
|
size: SIZE3,
|
|
6527
6557
|
onClick: removeDynamicTag,
|
|
@@ -6531,7 +6561,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6531
6561
|
))
|
|
6532
6562
|
}
|
|
6533
6563
|
), /* @__PURE__ */ React98.createElement(
|
|
6534
|
-
|
|
6564
|
+
import_ui48.Popover,
|
|
6535
6565
|
{
|
|
6536
6566
|
disablePortal: true,
|
|
6537
6567
|
disableScrollLock: true,
|
|
@@ -6540,7 +6570,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6540
6570
|
PaperProps: {
|
|
6541
6571
|
sx: { my: 1 }
|
|
6542
6572
|
},
|
|
6543
|
-
...(0,
|
|
6573
|
+
...(0, import_ui48.bindPopover)(selectionPopoverState)
|
|
6544
6574
|
},
|
|
6545
6575
|
/* @__PURE__ */ React98.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n69.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React98.createElement(DynamicSelection, { close: selectionPopoverState.close, expired: readonly }))
|
|
6546
6576
|
));
|
|
@@ -6549,22 +6579,22 @@ var DynamicSettingsPopover = ({
|
|
|
6549
6579
|
dynamicTag,
|
|
6550
6580
|
disabled = false
|
|
6551
6581
|
}) => {
|
|
6552
|
-
const popupState = (0,
|
|
6582
|
+
const popupState = (0, import_ui48.usePopupState)({ variant: "popover" });
|
|
6553
6583
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
6554
6584
|
if (!hasDynamicSettings) {
|
|
6555
6585
|
return null;
|
|
6556
6586
|
}
|
|
6557
6587
|
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(
|
|
6558
|
-
|
|
6588
|
+
import_ui48.IconButton,
|
|
6559
6589
|
{
|
|
6560
6590
|
size: SIZE3,
|
|
6561
6591
|
disabled,
|
|
6562
|
-
...!disabled && (0,
|
|
6592
|
+
...!disabled && (0, import_ui48.bindTrigger)(popupState),
|
|
6563
6593
|
"aria-label": (0, import_i18n69.__)("Dynamic settings", "elementor")
|
|
6564
6594
|
},
|
|
6565
6595
|
/* @__PURE__ */ React98.createElement(import_icons31.SettingsIcon, { fontSize: SIZE3 })
|
|
6566
6596
|
), /* @__PURE__ */ React98.createElement(
|
|
6567
|
-
|
|
6597
|
+
import_ui48.Popover,
|
|
6568
6598
|
{
|
|
6569
6599
|
disablePortal: true,
|
|
6570
6600
|
disableScrollLock: true,
|
|
@@ -6573,7 +6603,7 @@ var DynamicSettingsPopover = ({
|
|
|
6573
6603
|
PaperProps: {
|
|
6574
6604
|
sx: { my: 1 }
|
|
6575
6605
|
},
|
|
6576
|
-
...(0,
|
|
6606
|
+
...(0, import_ui48.bindPopover)(popupState)
|
|
6577
6607
|
},
|
|
6578
6608
|
/* @__PURE__ */ React98.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n69.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React98.createElement(
|
|
6579
6609
|
import_editor_ui10.PopoverHeader,
|
|
@@ -6587,25 +6617,25 @@ var DynamicSettingsPopover = ({
|
|
|
6587
6617
|
};
|
|
6588
6618
|
var DynamicSettings = ({ controls, tagName }) => {
|
|
6589
6619
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
6590
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
6620
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui48.useTabs)(0);
|
|
6591
6621
|
if (!tabs.length) {
|
|
6592
6622
|
return null;
|
|
6593
6623
|
}
|
|
6594
6624
|
if (tagsWithoutTabs.includes(tagName)) {
|
|
6595
6625
|
const singleTab = tabs[0];
|
|
6596
|
-
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(
|
|
6626
|
+
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(import_ui48.Divider, null), /* @__PURE__ */ React98.createElement(ControlsItemsStack, { items: singleTab.value.items }));
|
|
6597
6627
|
}
|
|
6598
|
-
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React98.createElement(
|
|
6599
|
-
|
|
6628
|
+
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(
|
|
6629
|
+
import_ui48.Tab,
|
|
6600
6630
|
{
|
|
6601
6631
|
key: index,
|
|
6602
6632
|
label: value.label,
|
|
6603
6633
|
sx: { px: 1, py: 0.5 },
|
|
6604
6634
|
...getTabProps(index)
|
|
6605
6635
|
}
|
|
6606
|
-
))), /* @__PURE__ */ React98.createElement(
|
|
6636
|
+
))), /* @__PURE__ */ React98.createElement(import_ui48.Divider, null), tabs.map(({ value }, index) => {
|
|
6607
6637
|
return /* @__PURE__ */ React98.createElement(
|
|
6608
|
-
|
|
6638
|
+
import_ui48.TabPanel,
|
|
6609
6639
|
{
|
|
6610
6640
|
key: index,
|
|
6611
6641
|
sx: { flexGrow: 1, py: 0, overflowY: "auto" },
|
|
@@ -6653,10 +6683,10 @@ var Control2 = ({ control }) => {
|
|
|
6653
6683
|
display: "grid",
|
|
6654
6684
|
gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
|
|
6655
6685
|
} : {};
|
|
6656
|
-
return /* @__PURE__ */ React98.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React98.createElement(
|
|
6686
|
+
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 }))));
|
|
6657
6687
|
};
|
|
6658
6688
|
function ControlsItemsStack({ items: items3 }) {
|
|
6659
|
-
return /* @__PURE__ */ React98.createElement(
|
|
6689
|
+
return /* @__PURE__ */ React98.createElement(import_ui48.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
|
|
6660
6690
|
(item) => item.type === "control" ? /* @__PURE__ */ React98.createElement(Control2, { key: item.value.bind, control: item.value }) : null
|
|
6661
6691
|
));
|
|
6662
6692
|
}
|
|
@@ -6715,11 +6745,11 @@ function getDynamicValue(name, settings, renderPostId) {
|
|
|
6715
6745
|
|
|
6716
6746
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
6717
6747
|
var React99 = __toESM(require("react"));
|
|
6718
|
-
var
|
|
6748
|
+
var import_editor_controls65 = require("@elementor/editor-controls");
|
|
6719
6749
|
var import_icons32 = require("@elementor/icons");
|
|
6720
6750
|
var import_i18n70 = require("@wordpress/i18n");
|
|
6721
6751
|
var usePropDynamicAction = () => {
|
|
6722
|
-
const { propType } = (0,
|
|
6752
|
+
const { propType } = (0, import_editor_controls65.useBoundProp)();
|
|
6723
6753
|
const visible = !!propType && supportsDynamic(propType);
|
|
6724
6754
|
return {
|
|
6725
6755
|
visible,
|
|
@@ -6732,16 +6762,16 @@ var usePropDynamicAction = () => {
|
|
|
6732
6762
|
// src/dynamics/init.ts
|
|
6733
6763
|
var { registerPopoverAction } = import_menus2.controlActionsMenu;
|
|
6734
6764
|
var init2 = () => {
|
|
6735
|
-
(0,
|
|
6765
|
+
(0, import_editor_controls66.registerControlReplacement)({
|
|
6736
6766
|
component: DynamicSelectionControl,
|
|
6737
6767
|
condition: ({ value }) => isDynamicPropValue(value)
|
|
6738
6768
|
});
|
|
6739
|
-
(0,
|
|
6769
|
+
(0, import_editor_controls66.injectIntoRepeaterItemLabel)({
|
|
6740
6770
|
id: "dynamic-background-image",
|
|
6741
6771
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6742
6772
|
component: BackgroundControlDynamicTagLabel
|
|
6743
6773
|
});
|
|
6744
|
-
(0,
|
|
6774
|
+
(0, import_editor_controls66.injectIntoRepeaterItemIcon)({
|
|
6745
6775
|
id: "dynamic-background-image",
|
|
6746
6776
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6747
6777
|
component: BackgroundControlDynamicTagIcon
|
|
@@ -6756,7 +6786,7 @@ var init2 = () => {
|
|
|
6756
6786
|
};
|
|
6757
6787
|
|
|
6758
6788
|
// src/reset-style-props.tsx
|
|
6759
|
-
var
|
|
6789
|
+
var import_editor_controls67 = require("@elementor/editor-controls");
|
|
6760
6790
|
var import_editor_variables2 = require("@elementor/editor-variables");
|
|
6761
6791
|
var import_icons33 = require("@elementor/icons");
|
|
6762
6792
|
var import_menus3 = require("@elementor/menus");
|
|
@@ -6816,7 +6846,7 @@ function initResetStyleProps() {
|
|
|
6816
6846
|
}
|
|
6817
6847
|
function useResetStyleValueProps() {
|
|
6818
6848
|
const isStyle = useIsStyle();
|
|
6819
|
-
const { value, resetValue, propType } = (0,
|
|
6849
|
+
const { value, resetValue, propType } = (0, import_editor_controls67.useBoundProp)();
|
|
6820
6850
|
const hasValue = value !== null && value !== void 0;
|
|
6821
6851
|
const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
|
|
6822
6852
|
const isRequired = !!propType.settings?.required;
|
|
@@ -6844,7 +6874,7 @@ function useResetStyleValueProps() {
|
|
|
6844
6874
|
|
|
6845
6875
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
6846
6876
|
var React105 = __toESM(require("react"));
|
|
6847
|
-
var
|
|
6877
|
+
var import_editor_controls68 = require("@elementor/editor-controls");
|
|
6848
6878
|
var import_editor_props23 = require("@elementor/editor-props");
|
|
6849
6879
|
var import_editor_styles_repository20 = require("@elementor/editor-styles-repository");
|
|
6850
6880
|
var import_i18n75 = require("@wordpress/i18n");
|
|
@@ -6854,7 +6884,7 @@ var React104 = __toESM(require("react"));
|
|
|
6854
6884
|
var import_react46 = require("react");
|
|
6855
6885
|
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
6856
6886
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
6857
|
-
var
|
|
6887
|
+
var import_ui53 = require("@elementor/ui");
|
|
6858
6888
|
var import_i18n74 = require("@wordpress/i18n");
|
|
6859
6889
|
|
|
6860
6890
|
// src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
|
|
@@ -6933,7 +6963,7 @@ var getTransformedValue = async (item, bind, resolve) => {
|
|
|
6933
6963
|
var React100 = __toESM(require("react"));
|
|
6934
6964
|
var import_editor_responsive4 = require("@elementor/editor-responsive");
|
|
6935
6965
|
var import_icons34 = require("@elementor/icons");
|
|
6936
|
-
var
|
|
6966
|
+
var import_ui49 = require("@elementor/ui");
|
|
6937
6967
|
var SIZE4 = "tiny";
|
|
6938
6968
|
var DEFAULT_BREAKPOINT3 = "desktop";
|
|
6939
6969
|
var breakpointIconMap = {
|
|
@@ -6953,21 +6983,21 @@ var BreakpointIcon = ({ breakpoint }) => {
|
|
|
6953
6983
|
return null;
|
|
6954
6984
|
}
|
|
6955
6985
|
const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
|
|
6956
|
-
return /* @__PURE__ */ React100.createElement(
|
|
6986
|
+
return /* @__PURE__ */ React100.createElement(import_ui49.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React100.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
|
|
6957
6987
|
};
|
|
6958
6988
|
|
|
6959
6989
|
// src/styles-inheritance/components/infotip/label-chip.tsx
|
|
6960
6990
|
var React101 = __toESM(require("react"));
|
|
6961
6991
|
var import_editor_styles_repository19 = require("@elementor/editor-styles-repository");
|
|
6962
6992
|
var import_icons35 = require("@elementor/icons");
|
|
6963
|
-
var
|
|
6993
|
+
var import_ui50 = require("@elementor/ui");
|
|
6964
6994
|
var import_i18n73 = require("@wordpress/i18n");
|
|
6965
6995
|
var SIZE5 = "tiny";
|
|
6966
6996
|
var LabelChip = ({ displayLabel, provider }) => {
|
|
6967
6997
|
const isBaseStyle = provider === import_editor_styles_repository19.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
|
|
6968
|
-
const chipIcon = isBaseStyle ? /* @__PURE__ */ React101.createElement(
|
|
6998
|
+
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;
|
|
6969
6999
|
return /* @__PURE__ */ React101.createElement(
|
|
6970
|
-
|
|
7000
|
+
import_ui50.Chip,
|
|
6971
7001
|
{
|
|
6972
7002
|
label: displayLabel,
|
|
6973
7003
|
size: SIZE5,
|
|
@@ -6993,10 +7023,10 @@ var LabelChip = ({ displayLabel, provider }) => {
|
|
|
6993
7023
|
|
|
6994
7024
|
// src/styles-inheritance/components/infotip/value-component.tsx
|
|
6995
7025
|
var React102 = __toESM(require("react"));
|
|
6996
|
-
var
|
|
7026
|
+
var import_ui51 = require("@elementor/ui");
|
|
6997
7027
|
var ValueComponent = ({ index, value }) => {
|
|
6998
|
-
return /* @__PURE__ */ React102.createElement(
|
|
6999
|
-
|
|
7028
|
+
return /* @__PURE__ */ React102.createElement(import_ui51.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React102.createElement(
|
|
7029
|
+
import_ui51.Typography,
|
|
7000
7030
|
{
|
|
7001
7031
|
variant: "caption",
|
|
7002
7032
|
color: "text.tertiary",
|
|
@@ -7018,8 +7048,8 @@ var ValueComponent = ({ index, value }) => {
|
|
|
7018
7048
|
|
|
7019
7049
|
// src/styles-inheritance/components/infotip/action-icons.tsx
|
|
7020
7050
|
var React103 = __toESM(require("react"));
|
|
7021
|
-
var
|
|
7022
|
-
var ActionIcons = () => /* @__PURE__ */ React103.createElement(
|
|
7051
|
+
var import_ui52 = require("@elementor/ui");
|
|
7052
|
+
var ActionIcons = () => /* @__PURE__ */ React103.createElement(import_ui52.Box, { display: "flex", gap: 0.5, alignItems: "center" });
|
|
7023
7053
|
|
|
7024
7054
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
7025
7055
|
var SECTION_PADDING_INLINE = 32;
|
|
@@ -7055,8 +7085,8 @@ var StylesInheritanceInfotip = ({
|
|
|
7055
7085
|
});
|
|
7056
7086
|
}, [key, propType]);
|
|
7057
7087
|
const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
|
|
7058
|
-
const infotipContent = /* @__PURE__ */ React104.createElement(
|
|
7059
|
-
|
|
7088
|
+
const infotipContent = /* @__PURE__ */ React104.createElement(import_ui53.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React104.createElement(
|
|
7089
|
+
import_ui53.Card,
|
|
7060
7090
|
{
|
|
7061
7091
|
elevation: 0,
|
|
7062
7092
|
sx: {
|
|
@@ -7069,7 +7099,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7069
7099
|
}
|
|
7070
7100
|
},
|
|
7071
7101
|
/* @__PURE__ */ React104.createElement(
|
|
7072
|
-
|
|
7102
|
+
import_ui53.Box,
|
|
7073
7103
|
{
|
|
7074
7104
|
sx: {
|
|
7075
7105
|
position: "sticky",
|
|
@@ -7081,7 +7111,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7081
7111
|
/* @__PURE__ */ React104.createElement(import_editor_ui11.PopoverHeader, { title: (0, import_i18n74.__)("Style origin", "elementor"), onClose: closeInfotip })
|
|
7082
7112
|
),
|
|
7083
7113
|
/* @__PURE__ */ React104.createElement(
|
|
7084
|
-
|
|
7114
|
+
import_ui53.CardContent,
|
|
7085
7115
|
{
|
|
7086
7116
|
sx: {
|
|
7087
7117
|
display: "flex",
|
|
@@ -7094,9 +7124,9 @@ var StylesInheritanceInfotip = ({
|
|
|
7094
7124
|
}
|
|
7095
7125
|
}
|
|
7096
7126
|
},
|
|
7097
|
-
/* @__PURE__ */ React104.createElement(
|
|
7127
|
+
/* @__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) => {
|
|
7098
7128
|
return /* @__PURE__ */ React104.createElement(
|
|
7099
|
-
|
|
7129
|
+
import_ui53.Box,
|
|
7100
7130
|
{
|
|
7101
7131
|
key: item.id,
|
|
7102
7132
|
display: "flex",
|
|
@@ -7108,7 +7138,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7108
7138
|
)
|
|
7109
7139
|
},
|
|
7110
7140
|
/* @__PURE__ */ React104.createElement(
|
|
7111
|
-
|
|
7141
|
+
import_ui53.Box,
|
|
7112
7142
|
{
|
|
7113
7143
|
display: "flex",
|
|
7114
7144
|
gap: 0.5,
|
|
@@ -7124,9 +7154,9 @@ var StylesInheritanceInfotip = ({
|
|
|
7124
7154
|
)
|
|
7125
7155
|
));
|
|
7126
7156
|
if (isDisabled) {
|
|
7127
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7157
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Box, { sx: { display: "inline-flex" } }, children);
|
|
7128
7158
|
}
|
|
7129
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7159
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React104.createElement(
|
|
7130
7160
|
TooltipOrInfotip,
|
|
7131
7161
|
{
|
|
7132
7162
|
showInfotip,
|
|
@@ -7135,7 +7165,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7135
7165
|
isDisabled
|
|
7136
7166
|
},
|
|
7137
7167
|
/* @__PURE__ */ React104.createElement(
|
|
7138
|
-
|
|
7168
|
+
import_ui53.IconButton,
|
|
7139
7169
|
{
|
|
7140
7170
|
onClick: toggleInfotip,
|
|
7141
7171
|
"aria-label": label,
|
|
@@ -7154,11 +7184,11 @@ function TooltipOrInfotip({
|
|
|
7154
7184
|
isDisabled
|
|
7155
7185
|
}) {
|
|
7156
7186
|
if (isDisabled) {
|
|
7157
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7187
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Box, { sx: { display: "inline-flex" } }, children);
|
|
7158
7188
|
}
|
|
7159
7189
|
if (showInfotip) {
|
|
7160
7190
|
return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
|
|
7161
|
-
|
|
7191
|
+
import_ui53.Backdrop,
|
|
7162
7192
|
{
|
|
7163
7193
|
open: showInfotip,
|
|
7164
7194
|
onClick: onClose,
|
|
@@ -7168,7 +7198,7 @@ function TooltipOrInfotip({
|
|
|
7168
7198
|
}
|
|
7169
7199
|
}
|
|
7170
7200
|
), /* @__PURE__ */ React104.createElement(
|
|
7171
|
-
|
|
7201
|
+
import_ui53.Infotip,
|
|
7172
7202
|
{
|
|
7173
7203
|
placement: "top-end",
|
|
7174
7204
|
content: infotipContent,
|
|
@@ -7179,14 +7209,14 @@ function TooltipOrInfotip({
|
|
|
7179
7209
|
children
|
|
7180
7210
|
));
|
|
7181
7211
|
}
|
|
7182
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7212
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Tooltip, { title: (0, import_i18n74.__)("Style origin", "elementor"), placement: "top" }, children);
|
|
7183
7213
|
}
|
|
7184
7214
|
|
|
7185
7215
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
7186
7216
|
var StylesInheritanceIndicator = ({
|
|
7187
7217
|
customContext
|
|
7188
7218
|
}) => {
|
|
7189
|
-
const context = (0,
|
|
7219
|
+
const context = (0, import_editor_controls68.useBoundProp)();
|
|
7190
7220
|
const { path, propType } = customContext || context;
|
|
7191
7221
|
const inheritanceChain = useStylesInheritanceChain(path);
|
|
7192
7222
|
if (!path || !inheritanceChain.length) {
|
|
@@ -7264,12 +7294,12 @@ var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) =>
|
|
|
7264
7294
|
// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
|
|
7265
7295
|
var React107 = __toESM(require("react"));
|
|
7266
7296
|
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
7267
|
-
var
|
|
7268
|
-
var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React107.createElement(
|
|
7297
|
+
var import_ui54 = require("@elementor/ui");
|
|
7298
|
+
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 })));
|
|
7269
7299
|
var ItemLabelColor = ({ value: { color } }) => {
|
|
7270
7300
|
return /* @__PURE__ */ React107.createElement("span", null, color);
|
|
7271
7301
|
};
|
|
7272
|
-
var StyledUnstableColorIndicator = (0,
|
|
7302
|
+
var StyledUnstableColorIndicator = (0, import_ui54.styled)(import_ui54.UnstableColorIndicator)(({ theme }) => ({
|
|
7273
7303
|
width: "1em",
|
|
7274
7304
|
height: "1em",
|
|
7275
7305
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -7280,9 +7310,9 @@ var StyledUnstableColorIndicator = (0, import_ui53.styled)(import_ui53.UnstableC
|
|
|
7280
7310
|
// src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
|
|
7281
7311
|
var React108 = __toESM(require("react"));
|
|
7282
7312
|
var import_editor_canvas8 = require("@elementor/editor-canvas");
|
|
7283
|
-
var
|
|
7313
|
+
var import_ui55 = require("@elementor/ui");
|
|
7284
7314
|
var import_i18n76 = require("@wordpress/i18n");
|
|
7285
|
-
var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React108.createElement(
|
|
7315
|
+
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 })));
|
|
7286
7316
|
var ItemIconGradient = ({ value }) => {
|
|
7287
7317
|
const gradient = getGradientValue(value);
|
|
7288
7318
|
return /* @__PURE__ */ React108.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
@@ -7305,13 +7335,13 @@ var getGradientValue = (gradient) => {
|
|
|
7305
7335
|
var React109 = __toESM(require("react"));
|
|
7306
7336
|
var import_editor_canvas9 = require("@elementor/editor-canvas");
|
|
7307
7337
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
7308
|
-
var
|
|
7338
|
+
var import_ui56 = require("@elementor/ui");
|
|
7309
7339
|
var import_wp_media = require("@elementor/wp-media");
|
|
7310
|
-
var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React109.createElement(
|
|
7340
|
+
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 })));
|
|
7311
7341
|
var ItemIconImage = ({ value }) => {
|
|
7312
7342
|
const { imageUrl } = useImage(value);
|
|
7313
7343
|
return /* @__PURE__ */ React109.createElement(
|
|
7314
|
-
|
|
7344
|
+
import_ui56.CardMedia,
|
|
7315
7345
|
{
|
|
7316
7346
|
image: imageUrl,
|
|
7317
7347
|
sx: (theme) => ({
|
|
@@ -7367,14 +7397,14 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
|
|
|
7367
7397
|
// src/styles-inheritance/transformers/color-transformer.tsx
|
|
7368
7398
|
var React111 = __toESM(require("react"));
|
|
7369
7399
|
var import_editor_canvas11 = require("@elementor/editor-canvas");
|
|
7370
|
-
var
|
|
7400
|
+
var import_ui57 = require("@elementor/ui");
|
|
7371
7401
|
function isValidCSSColor(value) {
|
|
7372
7402
|
if (!value.trim()) {
|
|
7373
7403
|
return false;
|
|
7374
7404
|
}
|
|
7375
7405
|
return CSS.supports("color", value.trim());
|
|
7376
7406
|
}
|
|
7377
|
-
var StyledColorIndicator = (0,
|
|
7407
|
+
var StyledColorIndicator = (0, import_ui57.styled)(import_ui57.UnstableColorIndicator)(({ theme }) => ({
|
|
7378
7408
|
width: "1em",
|
|
7379
7409
|
height: "1em",
|
|
7380
7410
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -7385,7 +7415,7 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
|
|
|
7385
7415
|
if (!isValidCSSColor(value)) {
|
|
7386
7416
|
return value;
|
|
7387
7417
|
}
|
|
7388
|
-
return /* @__PURE__ */ React111.createElement(
|
|
7418
|
+
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));
|
|
7389
7419
|
});
|
|
7390
7420
|
|
|
7391
7421
|
// src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
|