@elementor/editor-editing-panel 4.2.0-beta1 → 4.2.0-beta2
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 +291 -264
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +83 -56
- 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/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
|
|
|
@@ -4845,7 +4872,7 @@ var extractDimensions = (values) => {
|
|
|
4845
4872
|
};
|
|
4846
4873
|
}, {});
|
|
4847
4874
|
};
|
|
4848
|
-
var StyledSectionContent = (0,
|
|
4875
|
+
var StyledSectionContent = (0, import_ui39.styled)(SectionContent, {
|
|
4849
4876
|
shouldForwardProp: (prop) => prop !== "gap"
|
|
4850
4877
|
})(({ gap = 2, theme }) => ({
|
|
4851
4878
|
gap: 0,
|
|
@@ -4869,13 +4896,13 @@ var StyledSectionContent = (0, import_ui38.styled)(SectionContent, {
|
|
|
4869
4896
|
// src/components/style-sections/size-section/size-section.tsx
|
|
4870
4897
|
var React69 = __toESM(require("react"));
|
|
4871
4898
|
var import_react30 = require("react");
|
|
4872
|
-
var
|
|
4873
|
-
var
|
|
4899
|
+
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
4900
|
+
var import_ui40 = require("@elementor/ui");
|
|
4874
4901
|
var import_i18n45 = require("@wordpress/i18n");
|
|
4875
4902
|
|
|
4876
4903
|
// src/components/style-sections/size-section/object-fit-field.tsx
|
|
4877
4904
|
var React67 = __toESM(require("react"));
|
|
4878
|
-
var
|
|
4905
|
+
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
4879
4906
|
var import_i18n43 = require("@wordpress/i18n");
|
|
4880
4907
|
var OBJECT_FIT_LABEL = (0, import_i18n43.__)("Object fit", "elementor");
|
|
4881
4908
|
var positionOptions2 = [
|
|
@@ -4886,12 +4913,12 @@ var positionOptions2 = [
|
|
|
4886
4913
|
{ label: (0, import_i18n43.__)("Scale down", "elementor"), value: "scale-down" }
|
|
4887
4914
|
];
|
|
4888
4915
|
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(
|
|
4916
|
+
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
4917
|
};
|
|
4891
4918
|
|
|
4892
4919
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
4893
4920
|
var React68 = __toESM(require("react"));
|
|
4894
|
-
var
|
|
4921
|
+
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
4895
4922
|
var import_icons20 = require("@elementor/icons");
|
|
4896
4923
|
var import_i18n44 = require("@wordpress/i18n");
|
|
4897
4924
|
var OVERFLOW_LABEL = (0, import_i18n44.__)("Overflow", "elementor");
|
|
@@ -4916,7 +4943,7 @@ var options7 = [
|
|
|
4916
4943
|
}
|
|
4917
4944
|
];
|
|
4918
4945
|
var OverflowField = () => {
|
|
4919
|
-
return /* @__PURE__ */ React68.createElement(StylesField, { bind: "overflow", propDisplayName: OVERFLOW_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ React68.createElement(
|
|
4946
|
+
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
4947
|
};
|
|
4921
4948
|
|
|
4922
4949
|
// src/components/style-sections/size-section/size-section.tsx
|
|
@@ -4955,28 +4982,28 @@ var CssSizeProps = [
|
|
|
4955
4982
|
var ASPECT_RATIO_LABEL = (0, import_i18n45.__)("Aspect Ratio", "elementor");
|
|
4956
4983
|
var SizeSection = () => {
|
|
4957
4984
|
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(
|
|
4985
|
+
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
4986
|
};
|
|
4960
4987
|
var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
|
|
4961
|
-
return /* @__PURE__ */ React69.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React69.createElement(
|
|
4988
|
+
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
4989
|
};
|
|
4963
4990
|
|
|
4964
4991
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
4965
4992
|
var React70 = __toESM(require("react"));
|
|
4966
|
-
var
|
|
4993
|
+
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
4967
4994
|
var import_i18n46 = require("@wordpress/i18n");
|
|
4968
4995
|
var MARGIN_LABEL = (0, import_i18n46.__)("Margin", "elementor");
|
|
4969
4996
|
var PADDING_LABEL = (0, import_i18n46.__)("Padding", "elementor");
|
|
4970
4997
|
var SpacingSection = () => {
|
|
4971
4998
|
const { isSiteRtl } = useDirection();
|
|
4972
4999
|
return /* @__PURE__ */ React70.createElement(SectionContent, null, /* @__PURE__ */ React70.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React70.createElement(
|
|
4973
|
-
|
|
5000
|
+
import_editor_controls39.LinkedDimensionsControl,
|
|
4974
5001
|
{
|
|
4975
5002
|
label: MARGIN_LABEL,
|
|
4976
5003
|
isSiteRtl,
|
|
4977
5004
|
min: -Number.MAX_SAFE_INTEGER
|
|
4978
5005
|
}
|
|
4979
|
-
)), /* @__PURE__ */ React70.createElement(PanelDivider, null), /* @__PURE__ */ React70.createElement(StylesField, { bind: "padding", propDisplayName: PADDING_LABEL }, /* @__PURE__ */ React70.createElement(
|
|
5006
|
+
)), /* @__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
5007
|
};
|
|
4981
5008
|
|
|
4982
5009
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -4984,38 +5011,38 @@ var React87 = __toESM(require("react"));
|
|
|
4984
5011
|
|
|
4985
5012
|
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
4986
5013
|
var React71 = __toESM(require("react"));
|
|
4987
|
-
var
|
|
5014
|
+
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
4988
5015
|
var import_i18n47 = require("@wordpress/i18n");
|
|
4989
5016
|
var COLUMN_COUNT_LABEL = (0, import_i18n47.__)("Columns", "elementor");
|
|
4990
5017
|
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(
|
|
5018
|
+
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
5019
|
};
|
|
4993
5020
|
|
|
4994
5021
|
// src/components/style-sections/typography-section/column-gap-field.tsx
|
|
4995
5022
|
var React72 = __toESM(require("react"));
|
|
4996
5023
|
var import_react31 = require("react");
|
|
4997
|
-
var
|
|
5024
|
+
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
4998
5025
|
var import_i18n48 = require("@wordpress/i18n");
|
|
4999
5026
|
var COLUMN_GAP_LABEL = (0, import_i18n48.__)("Column gap", "elementor");
|
|
5000
5027
|
var ColumnGapField = () => {
|
|
5001
5028
|
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(
|
|
5029
|
+
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
5030
|
};
|
|
5004
5031
|
|
|
5005
5032
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
5006
5033
|
var React73 = __toESM(require("react"));
|
|
5007
|
-
var
|
|
5034
|
+
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
5008
5035
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
5009
5036
|
var import_i18n49 = require("@wordpress/i18n");
|
|
5010
5037
|
var FONT_FAMILY_LABEL = (0, import_i18n49.__)("Font family", "elementor");
|
|
5011
5038
|
var FontFamilyField = () => {
|
|
5012
|
-
const fontFamilies = (0,
|
|
5039
|
+
const fontFamilies = (0, import_editor_controls42.useFontFamilies)();
|
|
5013
5040
|
const sectionWidth = (0, import_editor_ui7.useSectionWidth)();
|
|
5014
5041
|
if (fontFamilies.length === 0) {
|
|
5015
5042
|
return null;
|
|
5016
5043
|
}
|
|
5017
5044
|
return /* @__PURE__ */ React73.createElement(StylesField, { bind: "font-family", propDisplayName: FONT_FAMILY_LABEL }, /* @__PURE__ */ React73.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ React73.createElement(
|
|
5018
|
-
|
|
5045
|
+
import_editor_controls42.FontFamilyControl,
|
|
5019
5046
|
{
|
|
5020
5047
|
fontFamilies,
|
|
5021
5048
|
sectionWidth,
|
|
@@ -5027,17 +5054,17 @@ var FontFamilyField = () => {
|
|
|
5027
5054
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
5028
5055
|
var React74 = __toESM(require("react"));
|
|
5029
5056
|
var import_react32 = require("react");
|
|
5030
|
-
var
|
|
5057
|
+
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
5031
5058
|
var import_i18n50 = require("@wordpress/i18n");
|
|
5032
5059
|
var FONT_SIZE_LABEL = (0, import_i18n50.__)("Font size", "elementor");
|
|
5033
5060
|
var FontSizeField = () => {
|
|
5034
5061
|
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(
|
|
5062
|
+
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
5063
|
};
|
|
5037
5064
|
|
|
5038
5065
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
5039
5066
|
var React75 = __toESM(require("react"));
|
|
5040
|
-
var
|
|
5067
|
+
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
5041
5068
|
var import_icons21 = require("@elementor/icons");
|
|
5042
5069
|
var import_i18n51 = require("@wordpress/i18n");
|
|
5043
5070
|
var FONT_STYLE_LABEL = (0, import_i18n51.__)("Font style", "elementor");
|
|
@@ -5056,12 +5083,12 @@ var options8 = [
|
|
|
5056
5083
|
}
|
|
5057
5084
|
];
|
|
5058
5085
|
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(
|
|
5086
|
+
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
5087
|
};
|
|
5061
5088
|
|
|
5062
5089
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
5063
5090
|
var React76 = __toESM(require("react"));
|
|
5064
|
-
var
|
|
5091
|
+
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
5065
5092
|
var import_i18n52 = require("@wordpress/i18n");
|
|
5066
5093
|
var FONT_WEIGHT_LABEL = (0, import_i18n52.__)("Font weight", "elementor");
|
|
5067
5094
|
var fontWeightOptions = [
|
|
@@ -5076,40 +5103,40 @@ var fontWeightOptions = [
|
|
|
5076
5103
|
{ value: "900", label: (0, import_i18n52.__)("900 - Black", "elementor") }
|
|
5077
5104
|
];
|
|
5078
5105
|
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(
|
|
5106
|
+
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
5107
|
};
|
|
5081
5108
|
|
|
5082
5109
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
5083
5110
|
var React77 = __toESM(require("react"));
|
|
5084
5111
|
var import_react33 = require("react");
|
|
5085
|
-
var
|
|
5112
|
+
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
5086
5113
|
var import_i18n53 = require("@wordpress/i18n");
|
|
5087
5114
|
var LETTER_SPACING_LABEL = (0, import_i18n53.__)("Letter spacing", "elementor");
|
|
5088
5115
|
var LetterSpacingField = () => {
|
|
5089
5116
|
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(
|
|
5117
|
+
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
5118
|
};
|
|
5092
5119
|
|
|
5093
5120
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
5094
5121
|
var React78 = __toESM(require("react"));
|
|
5095
5122
|
var import_react34 = require("react");
|
|
5096
|
-
var
|
|
5123
|
+
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
5097
5124
|
var import_i18n54 = require("@wordpress/i18n");
|
|
5098
5125
|
var LINE_HEIGHT_LABEL = (0, import_i18n54.__)("Line height", "elementor");
|
|
5099
5126
|
var LineHeightField = () => {
|
|
5100
5127
|
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(
|
|
5128
|
+
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
5129
|
};
|
|
5103
5130
|
|
|
5104
5131
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
5105
5132
|
var React79 = __toESM(require("react"));
|
|
5106
|
-
var
|
|
5133
|
+
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
5107
5134
|
var import_icons22 = require("@elementor/icons");
|
|
5108
|
-
var
|
|
5135
|
+
var import_ui41 = require("@elementor/ui");
|
|
5109
5136
|
var import_i18n55 = require("@wordpress/i18n");
|
|
5110
5137
|
var TEXT_ALIGNMENT_LABEL = (0, import_i18n55.__)("Text align", "elementor");
|
|
5111
|
-
var AlignStartIcon = (0,
|
|
5112
|
-
var AlignEndIcon = (0,
|
|
5138
|
+
var AlignStartIcon = (0, import_ui41.withDirection)(import_icons22.AlignLeftIcon);
|
|
5139
|
+
var AlignEndIcon = (0, import_ui41.withDirection)(import_icons22.AlignRightIcon);
|
|
5113
5140
|
var options9 = [
|
|
5114
5141
|
{
|
|
5115
5142
|
value: "start",
|
|
@@ -5137,21 +5164,21 @@ var options9 = [
|
|
|
5137
5164
|
}
|
|
5138
5165
|
];
|
|
5139
5166
|
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(
|
|
5167
|
+
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
5168
|
};
|
|
5142
5169
|
|
|
5143
5170
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
5144
5171
|
var React80 = __toESM(require("react"));
|
|
5145
|
-
var
|
|
5172
|
+
var import_editor_controls49 = require("@elementor/editor-controls");
|
|
5146
5173
|
var import_i18n56 = require("@wordpress/i18n");
|
|
5147
5174
|
var TEXT_COLOR_LABEL = (0, import_i18n56.__)("Text color", "elementor");
|
|
5148
5175
|
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(
|
|
5176
|
+
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
5177
|
};
|
|
5151
5178
|
|
|
5152
5179
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
5153
5180
|
var React81 = __toESM(require("react"));
|
|
5154
|
-
var
|
|
5181
|
+
var import_editor_controls50 = require("@elementor/editor-controls");
|
|
5155
5182
|
var import_icons23 = require("@elementor/icons");
|
|
5156
5183
|
var import_i18n57 = require("@wordpress/i18n");
|
|
5157
5184
|
var TEXT_DECORATION_LABEL = (0, import_i18n57.__)("Line decoration", "elementor");
|
|
@@ -5182,11 +5209,11 @@ var options10 = [
|
|
|
5182
5209
|
showTooltip: true
|
|
5183
5210
|
}
|
|
5184
5211
|
];
|
|
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(
|
|
5212
|
+
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
5213
|
|
|
5187
5214
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
5188
5215
|
var React82 = __toESM(require("react"));
|
|
5189
|
-
var
|
|
5216
|
+
var import_editor_controls51 = require("@elementor/editor-controls");
|
|
5190
5217
|
var import_icons24 = require("@elementor/icons");
|
|
5191
5218
|
var import_i18n58 = require("@wordpress/i18n");
|
|
5192
5219
|
var TEXT_DIRECTION_LABEL = (0, import_i18n58.__)("Direction", "elementor");
|
|
@@ -5205,18 +5232,18 @@ var options11 = [
|
|
|
5205
5232
|
}
|
|
5206
5233
|
];
|
|
5207
5234
|
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(
|
|
5235
|
+
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
5236
|
};
|
|
5210
5237
|
|
|
5211
5238
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
5212
5239
|
var React84 = __toESM(require("react"));
|
|
5213
|
-
var
|
|
5240
|
+
var import_editor_controls52 = require("@elementor/editor-controls");
|
|
5214
5241
|
var import_i18n59 = require("@wordpress/i18n");
|
|
5215
5242
|
|
|
5216
5243
|
// src/components/add-or-remove-content.tsx
|
|
5217
5244
|
var React83 = __toESM(require("react"));
|
|
5218
5245
|
var import_icons25 = require("@elementor/icons");
|
|
5219
|
-
var
|
|
5246
|
+
var import_ui42 = require("@elementor/ui");
|
|
5220
5247
|
var SIZE = "tiny";
|
|
5221
5248
|
var AddOrRemoveContent = ({
|
|
5222
5249
|
isAdded,
|
|
@@ -5227,7 +5254,7 @@ var AddOrRemoveContent = ({
|
|
|
5227
5254
|
renderLabel
|
|
5228
5255
|
}) => {
|
|
5229
5256
|
return /* @__PURE__ */ React83.createElement(SectionContent, null, /* @__PURE__ */ React83.createElement(
|
|
5230
|
-
|
|
5257
|
+
import_ui42.Stack,
|
|
5231
5258
|
{
|
|
5232
5259
|
direction: "row",
|
|
5233
5260
|
sx: {
|
|
@@ -5237,8 +5264,8 @@ var AddOrRemoveContent = ({
|
|
|
5237
5264
|
}
|
|
5238
5265
|
},
|
|
5239
5266
|
renderLabel(),
|
|
5240
|
-
isAdded ? /* @__PURE__ */ React83.createElement(
|
|
5241
|
-
), /* @__PURE__ */ React83.createElement(
|
|
5267
|
+
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 }))
|
|
5268
|
+
), /* @__PURE__ */ React83.createElement(import_ui42.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React83.createElement(SectionContent, null, children)));
|
|
5242
5269
|
};
|
|
5243
5270
|
|
|
5244
5271
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -5279,13 +5306,13 @@ var TextStrokeField = () => {
|
|
|
5279
5306
|
disabled: !canEdit,
|
|
5280
5307
|
renderLabel: () => /* @__PURE__ */ React84.createElement(ControlLabel, null, TEXT_STROKE_LABEL)
|
|
5281
5308
|
},
|
|
5282
|
-
/* @__PURE__ */ React84.createElement(
|
|
5309
|
+
/* @__PURE__ */ React84.createElement(import_editor_controls52.StrokeControl, null)
|
|
5283
5310
|
));
|
|
5284
5311
|
};
|
|
5285
5312
|
|
|
5286
5313
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
5287
5314
|
var React85 = __toESM(require("react"));
|
|
5288
|
-
var
|
|
5315
|
+
var import_editor_controls53 = require("@elementor/editor-controls");
|
|
5289
5316
|
var import_icons26 = require("@elementor/icons");
|
|
5290
5317
|
var import_i18n60 = require("@wordpress/i18n");
|
|
5291
5318
|
var TEXT_TRANSFORM_LABEL = (0, import_i18n60.__)("Text transform", "elementor");
|
|
@@ -5315,17 +5342,17 @@ var options12 = [
|
|
|
5315
5342
|
showTooltip: true
|
|
5316
5343
|
}
|
|
5317
5344
|
];
|
|
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(
|
|
5345
|
+
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
5346
|
|
|
5320
5347
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
5321
5348
|
var React86 = __toESM(require("react"));
|
|
5322
5349
|
var import_react35 = require("react");
|
|
5323
|
-
var
|
|
5350
|
+
var import_editor_controls54 = require("@elementor/editor-controls");
|
|
5324
5351
|
var import_i18n61 = require("@wordpress/i18n");
|
|
5325
5352
|
var WORD_SPACING_LABEL = (0, import_i18n61.__)("Word spacing", "elementor");
|
|
5326
5353
|
var WordSpacingField = () => {
|
|
5327
5354
|
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(
|
|
5355
|
+
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
5356
|
};
|
|
5330
5357
|
|
|
5331
5358
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
@@ -5398,7 +5425,7 @@ var StyleTab = () => {
|
|
|
5398
5425
|
},
|
|
5399
5426
|
setMetaState: setActiveStyleState
|
|
5400
5427
|
},
|
|
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(
|
|
5428
|
+
/* @__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
5429
|
StyleTabSection,
|
|
5403
5430
|
{
|
|
5404
5431
|
section: {
|
|
@@ -5526,12 +5553,12 @@ var StyleTab = () => {
|
|
|
5526
5553
|
"transition"
|
|
5527
5554
|
]
|
|
5528
5555
|
}
|
|
5529
|
-
), /* @__PURE__ */ React89.createElement(StyleTabSlot, null)), /* @__PURE__ */ React89.createElement(
|
|
5556
|
+
), /* @__PURE__ */ React89.createElement(StyleTabSlot, null)), /* @__PURE__ */ React89.createElement(import_ui43.Box, { sx: { height: "150px" } })))
|
|
5530
5557
|
));
|
|
5531
5558
|
};
|
|
5532
5559
|
function ClassesHeader({ children }) {
|
|
5533
5560
|
const scrollDirection = useScrollDirection();
|
|
5534
|
-
return /* @__PURE__ */ React89.createElement(
|
|
5561
|
+
return /* @__PURE__ */ React89.createElement(import_ui43.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
5535
5562
|
}
|
|
5536
5563
|
function useCurrentClassesProp() {
|
|
5537
5564
|
const { elementType } = useElement();
|
|
@@ -5558,12 +5585,12 @@ var PanelTabContent = () => {
|
|
|
5558
5585
|
const editorDefaults = useDefaultPanelSettings();
|
|
5559
5586
|
const defaultComponentTab = editorDefaults.defaultTab;
|
|
5560
5587
|
const isInteractionsActive = (0, import_editor_v1_adapters7.isExperimentActive)("e_interactions");
|
|
5561
|
-
const isPromotedElement = !!(0,
|
|
5588
|
+
const isPromotedElement = !!(0, import_editor_elements13.getWidgetsCache)()?.[element.type]?.meta?.is_pro_promotion;
|
|
5562
5589
|
const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
5563
5590
|
const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;
|
|
5564
|
-
const { getTabProps, getTabPanelProps, getTabsProps } = (0,
|
|
5565
|
-
return /* @__PURE__ */ React90.createElement(ScrollProvider, null, /* @__PURE__ */ React90.createElement(
|
|
5566
|
-
|
|
5591
|
+
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui44.useTabs)(currentTab);
|
|
5592
|
+
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(
|
|
5593
|
+
import_ui44.Tabs,
|
|
5567
5594
|
{
|
|
5568
5595
|
variant: "fullWidth",
|
|
5569
5596
|
size: "small",
|
|
@@ -5574,18 +5601,18 @@ var PanelTabContent = () => {
|
|
|
5574
5601
|
setCurrentTab(newValue);
|
|
5575
5602
|
}
|
|
5576
5603
|
},
|
|
5577
|
-
!isPromotedElement && /* @__PURE__ */ React90.createElement(
|
|
5578
|
-
/* @__PURE__ */ React90.createElement(
|
|
5579
|
-
isInteractionsActive && /* @__PURE__ */ React90.createElement(
|
|
5580
|
-
), /* @__PURE__ */ React90.createElement(
|
|
5604
|
+
!isPromotedElement && /* @__PURE__ */ React90.createElement(import_ui44.Tab, { label: (0, import_i18n63.__)("General", "elementor"), ...getTabProps("settings") }),
|
|
5605
|
+
/* @__PURE__ */ React90.createElement(import_ui44.Tab, { label: (0, import_i18n63.__)("Style", "elementor"), ...getTabProps("style") }),
|
|
5606
|
+
isInteractionsActive && /* @__PURE__ */ React90.createElement(import_ui44.Tab, { label: (0, import_i18n63.__)("Interactions", "elementor"), ...getTabProps("interactions") })
|
|
5607
|
+
), /* @__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
5608
|
};
|
|
5582
5609
|
|
|
5583
5610
|
// src/components/editing-panel.tsx
|
|
5584
5611
|
var { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = (0, import_locations5.createLocation)();
|
|
5585
5612
|
var { useMenuItems } = import_menus.controlActionsMenu;
|
|
5586
5613
|
var EditingPanel = () => {
|
|
5587
|
-
const { element, elementType, settings } = (0,
|
|
5588
|
-
const controlReplacements = (0,
|
|
5614
|
+
const { element, elementType, settings } = (0, import_editor_elements14.useSelectedElementSettings)();
|
|
5615
|
+
const controlReplacements = (0, import_editor_controls55.getControlReplacements)();
|
|
5589
5616
|
const menuItems = useMenuItems().default;
|
|
5590
5617
|
if (!element || !elementType) {
|
|
5591
5618
|
return null;
|
|
@@ -5596,7 +5623,7 @@ var EditingPanel = () => {
|
|
|
5596
5623
|
if (ReplacementComponent) {
|
|
5597
5624
|
panelContent = /* @__PURE__ */ React91.createElement(ReplacementComponent, null);
|
|
5598
5625
|
}
|
|
5599
|
-
return /* @__PURE__ */ React91.createElement(
|
|
5626
|
+
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
5627
|
};
|
|
5601
5628
|
|
|
5602
5629
|
// src/init.ts
|
|
@@ -5616,10 +5643,10 @@ var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__cre
|
|
|
5616
5643
|
});
|
|
5617
5644
|
|
|
5618
5645
|
// src/sync/is-atomic-widget-selected.ts
|
|
5619
|
-
var
|
|
5646
|
+
var import_editor_elements15 = require("@elementor/editor-elements");
|
|
5620
5647
|
var isAtomicWidgetSelected = () => {
|
|
5621
|
-
const selectedElements = (0,
|
|
5622
|
-
const widgetCache = (0,
|
|
5648
|
+
const selectedElements = (0, import_editor_elements15.getSelectedElements)();
|
|
5649
|
+
const widgetCache = (0, import_editor_elements15.getWidgetsCache)();
|
|
5623
5650
|
if (selectedElements.length !== 1) {
|
|
5624
5651
|
return false;
|
|
5625
5652
|
}
|
|
@@ -5645,12 +5672,12 @@ var EditingPanelHooks = () => {
|
|
|
5645
5672
|
};
|
|
5646
5673
|
|
|
5647
5674
|
// src/components/promotions/init.tsx
|
|
5648
|
-
var
|
|
5675
|
+
var import_editor_controls57 = require("@elementor/editor-controls");
|
|
5649
5676
|
|
|
5650
5677
|
// src/components/promotions/custom-css.tsx
|
|
5651
5678
|
var React92 = __toESM(require("react"));
|
|
5652
5679
|
var import_react39 = require("react");
|
|
5653
|
-
var
|
|
5680
|
+
var import_editor_controls56 = require("@elementor/editor-controls");
|
|
5654
5681
|
var import_i18n65 = require("@wordpress/i18n");
|
|
5655
5682
|
var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
|
|
5656
5683
|
var CustomCssSection = () => {
|
|
@@ -5662,7 +5689,7 @@ var CustomCssSection = () => {
|
|
|
5662
5689
|
name: "Custom CSS",
|
|
5663
5690
|
title: (0, import_i18n65.__)("Custom CSS", "elementor"),
|
|
5664
5691
|
action: {
|
|
5665
|
-
component: /* @__PURE__ */ React92.createElement(
|
|
5692
|
+
component: /* @__PURE__ */ React92.createElement(import_editor_controls56.PromotionTrigger, { ref: triggerRef, promotionKey: "customCss", trackingData: TRACKING_DATA }),
|
|
5666
5693
|
onClick: () => triggerRef.current?.toggle()
|
|
5667
5694
|
}
|
|
5668
5695
|
}
|
|
@@ -5678,24 +5705,24 @@ var init = () => {
|
|
|
5678
5705
|
options: { overwrite: true }
|
|
5679
5706
|
});
|
|
5680
5707
|
if (!window.elementorPro) {
|
|
5681
|
-
controlsRegistry.register("attributes",
|
|
5682
|
-
controlsRegistry.register("display-conditions",
|
|
5708
|
+
controlsRegistry.register("attributes", import_editor_controls57.AttributesControl, "two-columns");
|
|
5709
|
+
controlsRegistry.register("display-conditions", import_editor_controls57.DisplayConditionsControl, "two-columns");
|
|
5683
5710
|
}
|
|
5684
5711
|
};
|
|
5685
5712
|
|
|
5686
5713
|
// src/controls-registry/element-controls/tabs-control/tabs-control.tsx
|
|
5687
5714
|
var React93 = __toESM(require("react"));
|
|
5688
|
-
var
|
|
5689
|
-
var
|
|
5715
|
+
var import_editor_controls59 = require("@elementor/editor-controls");
|
|
5716
|
+
var import_editor_elements18 = require("@elementor/editor-elements");
|
|
5690
5717
|
var import_editor_props18 = require("@elementor/editor-props");
|
|
5691
5718
|
var import_icons28 = require("@elementor/icons");
|
|
5692
|
-
var
|
|
5719
|
+
var import_ui46 = require("@elementor/ui");
|
|
5693
5720
|
var import_i18n67 = require("@wordpress/i18n");
|
|
5694
5721
|
|
|
5695
5722
|
// src/controls-registry/element-controls/get-element-by-type.ts
|
|
5696
|
-
var
|
|
5723
|
+
var import_editor_elements16 = require("@elementor/editor-elements");
|
|
5697
5724
|
var getElementByType = (elementId, type) => {
|
|
5698
|
-
const currentElement = (0,
|
|
5725
|
+
const currentElement = (0, import_editor_elements16.getContainer)(elementId);
|
|
5699
5726
|
if (!currentElement) {
|
|
5700
5727
|
return null;
|
|
5701
5728
|
}
|
|
@@ -5706,14 +5733,14 @@ var getElementByType = (elementId, type) => {
|
|
|
5706
5733
|
};
|
|
5707
5734
|
|
|
5708
5735
|
// src/controls-registry/element-controls/tabs-control/use-actions.ts
|
|
5709
|
-
var
|
|
5710
|
-
var
|
|
5736
|
+
var import_editor_controls58 = require("@elementor/editor-controls");
|
|
5737
|
+
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
5711
5738
|
var import_editor_props17 = require("@elementor/editor-props");
|
|
5712
5739
|
var import_i18n66 = require("@wordpress/i18n");
|
|
5713
5740
|
var TAB_ELEMENT_TYPE = "e-tab";
|
|
5714
5741
|
var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
|
|
5715
5742
|
var useActions = () => {
|
|
5716
|
-
const { value, setValue: setDefaultActiveTab } = (0,
|
|
5743
|
+
const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls58.useBoundProp)(import_editor_props17.numberPropTypeUtil);
|
|
5717
5744
|
const defaultActiveTab = value ?? 0;
|
|
5718
5745
|
const duplicateItem = ({
|
|
5719
5746
|
items: items3,
|
|
@@ -5725,12 +5752,12 @@ var useActions = () => {
|
|
|
5725
5752
|
});
|
|
5726
5753
|
items3.forEach(({ item, index }) => {
|
|
5727
5754
|
const tabId = item.id;
|
|
5728
|
-
const tabContentAreaContainer = (0,
|
|
5755
|
+
const tabContentAreaContainer = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5729
5756
|
const tabContentId = tabContentAreaContainer?.children?.[index]?.id;
|
|
5730
5757
|
if (!tabContentId) {
|
|
5731
5758
|
throw new Error("Original content ID is required for duplication");
|
|
5732
5759
|
}
|
|
5733
|
-
(0,
|
|
5760
|
+
(0, import_editor_elements17.duplicateElements)({
|
|
5734
5761
|
elementIds: [tabId, tabContentId],
|
|
5735
5762
|
title: (0, import_i18n66.__)("Duplicate Tab", "elementor"),
|
|
5736
5763
|
onDuplicateElements: () => {
|
|
@@ -5753,10 +5780,10 @@ var useActions = () => {
|
|
|
5753
5780
|
movedElementId,
|
|
5754
5781
|
movedElementIndex
|
|
5755
5782
|
}) => {
|
|
5756
|
-
const tabContentContainer = (0,
|
|
5783
|
+
const tabContentContainer = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5757
5784
|
const tabContent = tabContentContainer?.children?.[movedElementIndex];
|
|
5758
|
-
const movedElement = (0,
|
|
5759
|
-
const tabsMenu = (0,
|
|
5785
|
+
const movedElement = (0, import_editor_elements17.getContainer)(movedElementId);
|
|
5786
|
+
const tabsMenu = (0, import_editor_elements17.getContainer)(tabsMenuId);
|
|
5760
5787
|
if (!tabContent) {
|
|
5761
5788
|
throw new Error("Content element is required");
|
|
5762
5789
|
}
|
|
@@ -5768,7 +5795,7 @@ var useActions = () => {
|
|
|
5768
5795
|
to: toIndex,
|
|
5769
5796
|
defaultActiveTab
|
|
5770
5797
|
});
|
|
5771
|
-
(0,
|
|
5798
|
+
(0, import_editor_elements17.moveElements)({
|
|
5772
5799
|
title: (0, import_i18n66.__)("Reorder Tabs", "elementor"),
|
|
5773
5800
|
moves: [
|
|
5774
5801
|
{
|
|
@@ -5802,11 +5829,11 @@ var useActions = () => {
|
|
|
5802
5829
|
items: items3,
|
|
5803
5830
|
defaultActiveTab
|
|
5804
5831
|
});
|
|
5805
|
-
(0,
|
|
5832
|
+
(0, import_editor_elements17.removeElements)({
|
|
5806
5833
|
title: (0, import_i18n66.__)("Tabs", "elementor"),
|
|
5807
5834
|
elementIds: items3.flatMap(({ item, index }) => {
|
|
5808
5835
|
const tabId = item.id;
|
|
5809
|
-
const tabContentContainer = (0,
|
|
5836
|
+
const tabContentContainer = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5810
5837
|
const tabContentId = tabContentContainer?.children?.[index]?.id;
|
|
5811
5838
|
if (!tabContentId) {
|
|
5812
5839
|
throw new Error("Content ID is required");
|
|
@@ -5830,14 +5857,14 @@ var useActions = () => {
|
|
|
5830
5857
|
tabsMenuId,
|
|
5831
5858
|
items: items3
|
|
5832
5859
|
}) => {
|
|
5833
|
-
const tabContentArea = (0,
|
|
5834
|
-
const tabsMenu = (0,
|
|
5860
|
+
const tabContentArea = (0, import_editor_elements17.getContainer)(tabContentAreaId);
|
|
5861
|
+
const tabsMenu = (0, import_editor_elements17.getContainer)(tabsMenuId);
|
|
5835
5862
|
if (!tabContentArea || !tabsMenu) {
|
|
5836
5863
|
throw new Error("Tab containers not found");
|
|
5837
5864
|
}
|
|
5838
5865
|
items3.forEach(({ index }) => {
|
|
5839
5866
|
const position = index + 1;
|
|
5840
|
-
(0,
|
|
5867
|
+
(0, import_editor_elements17.createElements)({
|
|
5841
5868
|
title: (0, import_i18n66.__)("Tabs", "elementor"),
|
|
5842
5869
|
elements: [
|
|
5843
5870
|
{
|
|
@@ -5912,7 +5939,7 @@ var TabsControl = ({ label }) => {
|
|
|
5912
5939
|
var TabsControlContent = ({ label }) => {
|
|
5913
5940
|
const { element } = useElement();
|
|
5914
5941
|
const { addItem, duplicateItem, moveItem, removeItem } = useActions();
|
|
5915
|
-
const { [TAB_ELEMENT_TYPE]: tabLinks } = (0,
|
|
5942
|
+
const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, import_editor_elements18.useElementChildren)(element.id, {
|
|
5916
5943
|
[TAB_MENU_ELEMENT_TYPE]: TAB_ELEMENT_TYPE
|
|
5917
5944
|
});
|
|
5918
5945
|
const tabList = getElementByType(element.id, TAB_MENU_ELEMENT_TYPE);
|
|
@@ -5952,7 +5979,7 @@ var TabsControlContent = ({ label }) => {
|
|
|
5952
5979
|
}
|
|
5953
5980
|
};
|
|
5954
5981
|
return /* @__PURE__ */ React93.createElement(
|
|
5955
|
-
|
|
5982
|
+
import_editor_controls59.Repeater,
|
|
5956
5983
|
{
|
|
5957
5984
|
showToggle: false,
|
|
5958
5985
|
values: repeaterValues,
|
|
@@ -5971,27 +5998,27 @@ var TabsControlContent = ({ label }) => {
|
|
|
5971
5998
|
};
|
|
5972
5999
|
var ItemLabel = ({ value, index }) => {
|
|
5973
6000
|
const elementTitle = value?.title;
|
|
5974
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6001
|
+
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
6002
|
};
|
|
5976
6003
|
var ItemDefaultTab = ({ index }) => {
|
|
5977
|
-
const { value: defaultItem } = (0,
|
|
6004
|
+
const { value: defaultItem } = (0, import_editor_controls59.useBoundProp)(import_editor_props18.numberPropTypeUtil);
|
|
5978
6005
|
const isDefault = defaultItem === index;
|
|
5979
6006
|
if (!isDefault) {
|
|
5980
6007
|
return null;
|
|
5981
6008
|
}
|
|
5982
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6009
|
+
return /* @__PURE__ */ React93.createElement(import_ui46.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n67.__)("Default", "elementor") });
|
|
5983
6010
|
};
|
|
5984
6011
|
var ItemContent = ({ value, index }) => {
|
|
5985
6012
|
if (!value.id) {
|
|
5986
6013
|
return null;
|
|
5987
6014
|
}
|
|
5988
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6015
|
+
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
6016
|
};
|
|
5990
6017
|
var DefaultTabControl = ({ tabIndex }) => {
|
|
5991
|
-
const { value, setValue } = (0,
|
|
6018
|
+
const { value, setValue } = (0, import_editor_controls59.useBoundProp)(import_editor_props18.numberPropTypeUtil);
|
|
5992
6019
|
const isDefault = value === tabIndex;
|
|
5993
|
-
return /* @__PURE__ */ React93.createElement(
|
|
5994
|
-
|
|
6020
|
+
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(
|
|
6021
|
+
import_ui46.Switch,
|
|
5995
6022
|
{
|
|
5996
6023
|
size: "small",
|
|
5997
6024
|
checked: isDefault,
|
|
@@ -6006,15 +6033,15 @@ var DefaultTabControl = ({ tabIndex }) => {
|
|
|
6006
6033
|
)));
|
|
6007
6034
|
};
|
|
6008
6035
|
var TabLabelControl = ({ elementId }) => {
|
|
6009
|
-
const editorSettings = (0,
|
|
6036
|
+
const editorSettings = (0, import_editor_elements18.useElementEditorSettings)(elementId);
|
|
6010
6037
|
const label = editorSettings?.title ?? "";
|
|
6011
|
-
return /* @__PURE__ */ React93.createElement(
|
|
6012
|
-
|
|
6038
|
+
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(
|
|
6039
|
+
import_ui46.TextField,
|
|
6013
6040
|
{
|
|
6014
6041
|
size: "tiny",
|
|
6015
6042
|
value: label,
|
|
6016
6043
|
onChange: ({ target }) => {
|
|
6017
|
-
(0,
|
|
6044
|
+
(0, import_editor_elements18.updateElementEditorSettings)({
|
|
6018
6045
|
elementId,
|
|
6019
6046
|
settings: { title: target.value }
|
|
6020
6047
|
});
|
|
@@ -6030,18 +6057,18 @@ var ConditionalTooltip = ({
|
|
|
6030
6057
|
return children;
|
|
6031
6058
|
}
|
|
6032
6059
|
return /* @__PURE__ */ React93.createElement(
|
|
6033
|
-
|
|
6060
|
+
import_ui46.Infotip,
|
|
6034
6061
|
{
|
|
6035
6062
|
arrow: false,
|
|
6036
6063
|
content: /* @__PURE__ */ React93.createElement(
|
|
6037
|
-
|
|
6064
|
+
import_ui46.Alert,
|
|
6038
6065
|
{
|
|
6039
6066
|
color: "secondary",
|
|
6040
6067
|
icon: /* @__PURE__ */ React93.createElement(import_icons28.InfoCircleFilledIcon, { fontSize: "tiny" }),
|
|
6041
6068
|
size: "small",
|
|
6042
6069
|
sx: { width: 288 }
|
|
6043
6070
|
},
|
|
6044
|
-
/* @__PURE__ */ React93.createElement(
|
|
6071
|
+
/* @__PURE__ */ React93.createElement(import_ui46.Typography, { variant: "body2" }, (0, import_i18n67.__)("To change the default tab, simply set another tab as default.", "elementor"))
|
|
6045
6072
|
)
|
|
6046
6073
|
},
|
|
6047
6074
|
/* @__PURE__ */ React93.createElement("span", null, children)
|
|
@@ -6062,12 +6089,12 @@ var registerElementControls = () => {
|
|
|
6062
6089
|
|
|
6063
6090
|
// src/dynamics/init.ts
|
|
6064
6091
|
var import_editor_canvas3 = require("@elementor/editor-canvas");
|
|
6065
|
-
var
|
|
6092
|
+
var import_editor_controls66 = require("@elementor/editor-controls");
|
|
6066
6093
|
var import_menus2 = require("@elementor/menus");
|
|
6067
6094
|
|
|
6068
6095
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6069
6096
|
var React94 = __toESM(require("react"));
|
|
6070
|
-
var
|
|
6097
|
+
var import_editor_controls61 = require("@elementor/editor-controls");
|
|
6071
6098
|
var import_editor_props20 = require("@elementor/editor-props");
|
|
6072
6099
|
var import_icons29 = require("@elementor/icons");
|
|
6073
6100
|
|
|
@@ -6076,7 +6103,7 @@ var import_react42 = require("react");
|
|
|
6076
6103
|
|
|
6077
6104
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
6078
6105
|
var import_react41 = require("react");
|
|
6079
|
-
var
|
|
6106
|
+
var import_editor_controls60 = require("@elementor/editor-controls");
|
|
6080
6107
|
|
|
6081
6108
|
// src/dynamics/sync/get-atomic-dynamic-tags.ts
|
|
6082
6109
|
var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
|
|
@@ -6160,7 +6187,7 @@ var useAllPropDynamicTags = () => {
|
|
|
6160
6187
|
};
|
|
6161
6188
|
var usePropDynamicTagsInternal = (filterByLicense2) => {
|
|
6162
6189
|
let categories = [];
|
|
6163
|
-
const { propType } = (0,
|
|
6190
|
+
const { propType } = (0, import_editor_controls60.useBoundProp)();
|
|
6164
6191
|
if (propType) {
|
|
6165
6192
|
const propDynamicType = getDynamicPropType(propType);
|
|
6166
6193
|
categories = propDynamicType?.settings.categories || [];
|
|
@@ -6206,13 +6233,13 @@ var useDynamicTag = (tagName) => {
|
|
|
6206
6233
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6207
6234
|
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React94.createElement(import_icons29.DatabaseIcon, { fontSize: "tiny" });
|
|
6208
6235
|
var BackgroundControlDynamicTagLabel = ({ value }) => {
|
|
6209
|
-
const context = (0,
|
|
6210
|
-
return /* @__PURE__ */ React94.createElement(
|
|
6236
|
+
const context = (0, import_editor_controls61.useBoundProp)(import_editor_props20.backgroundImageOverlayPropTypeUtil);
|
|
6237
|
+
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
6238
|
};
|
|
6212
6239
|
var Wrapper2 = ({ rawValue }) => {
|
|
6213
|
-
const { propType } = (0,
|
|
6240
|
+
const { propType } = (0, import_editor_controls61.useBoundProp)();
|
|
6214
6241
|
const imageOverlayPropType = propType.prop_types["background-image-overlay"];
|
|
6215
|
-
return /* @__PURE__ */ React94.createElement(
|
|
6242
|
+
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
6243
|
};
|
|
6217
6244
|
var Content = ({ rawValue }) => {
|
|
6218
6245
|
const src = rawValue.value.src;
|
|
@@ -6222,10 +6249,10 @@ var Content = ({ rawValue }) => {
|
|
|
6222
6249
|
|
|
6223
6250
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
6224
6251
|
var React98 = __toESM(require("react"));
|
|
6225
|
-
var
|
|
6252
|
+
var import_editor_controls64 = require("@elementor/editor-controls");
|
|
6226
6253
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
6227
6254
|
var import_icons31 = require("@elementor/icons");
|
|
6228
|
-
var
|
|
6255
|
+
var import_ui48 = require("@elementor/ui");
|
|
6229
6256
|
var import_i18n69 = require("@wordpress/i18n");
|
|
6230
6257
|
|
|
6231
6258
|
// src/hooks/use-persist-dynamic-value.ts
|
|
@@ -6238,7 +6265,7 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
6238
6265
|
|
|
6239
6266
|
// src/dynamics/dynamic-control.tsx
|
|
6240
6267
|
var React96 = __toESM(require("react"));
|
|
6241
|
-
var
|
|
6268
|
+
var import_editor_controls62 = require("@elementor/editor-controls");
|
|
6242
6269
|
|
|
6243
6270
|
// src/dynamics/components/dynamic-conditional-control.tsx
|
|
6244
6271
|
var React95 = __toESM(require("react"));
|
|
@@ -6291,7 +6318,7 @@ var DynamicConditionalControl = ({
|
|
|
6291
6318
|
|
|
6292
6319
|
// src/dynamics/dynamic-control.tsx
|
|
6293
6320
|
var DynamicControl = ({ bind, children }) => {
|
|
6294
|
-
const { value, setValue } = (0,
|
|
6321
|
+
const { value, setValue } = (0, import_editor_controls62.useBoundProp)(dynamicPropTypeUtil);
|
|
6295
6322
|
const { name = "", group = "", settings } = value ?? {};
|
|
6296
6323
|
const dynamicTag = useDynamicTag(name);
|
|
6297
6324
|
if (!dynamicTag) {
|
|
@@ -6311,7 +6338,7 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
6311
6338
|
});
|
|
6312
6339
|
};
|
|
6313
6340
|
const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
|
|
6314
|
-
return /* @__PURE__ */ React96.createElement(
|
|
6341
|
+
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
6342
|
DynamicConditionalControl,
|
|
6316
6343
|
{
|
|
6317
6344
|
propType: dynamicPropType,
|
|
@@ -6325,10 +6352,10 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
6325
6352
|
// src/dynamics/components/dynamic-selection.tsx
|
|
6326
6353
|
var React97 = __toESM(require("react"));
|
|
6327
6354
|
var import_react44 = require("react");
|
|
6328
|
-
var
|
|
6355
|
+
var import_editor_controls63 = require("@elementor/editor-controls");
|
|
6329
6356
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
6330
6357
|
var import_icons30 = require("@elementor/icons");
|
|
6331
|
-
var
|
|
6358
|
+
var import_ui47 = require("@elementor/ui");
|
|
6332
6359
|
var import_i18n68 = require("@wordpress/i18n");
|
|
6333
6360
|
var SIZE2 = "tiny";
|
|
6334
6361
|
var PROMO_TEXT_WIDTH = 170;
|
|
@@ -6337,18 +6364,18 @@ var RENEW_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-renew
|
|
|
6337
6364
|
var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
6338
6365
|
const [searchValue, setSearchValue] = (0, import_react44.useState)("");
|
|
6339
6366
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
6340
|
-
const theme = (0,
|
|
6341
|
-
const { value: anyValue } = (0,
|
|
6342
|
-
const { bind, value: dynamicValue, setValue } = (0,
|
|
6367
|
+
const theme = (0, import_ui47.useTheme)();
|
|
6368
|
+
const { value: anyValue } = (0, import_editor_controls63.useBoundProp)();
|
|
6369
|
+
const { bind, value: dynamicValue, setValue } = (0, import_editor_controls63.useBoundProp)(dynamicPropTypeUtil);
|
|
6343
6370
|
const [, updatePropValueHistory] = usePersistDynamicValue(bind);
|
|
6344
6371
|
const isCurrentValueDynamic = !!dynamicValue;
|
|
6345
6372
|
const options13 = useFilteredOptions(searchValue);
|
|
6346
6373
|
const hasNoDynamicTags = !options13.length && !searchValue.trim();
|
|
6347
6374
|
(0, import_react44.useEffect)(() => {
|
|
6348
6375
|
if (hasNoDynamicTags) {
|
|
6349
|
-
(0,
|
|
6376
|
+
(0, import_editor_controls63.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
6350
6377
|
} else if (expired) {
|
|
6351
|
-
(0,
|
|
6378
|
+
(0, import_editor_controls63.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
6352
6379
|
}
|
|
6353
6380
|
}, [hasNoDynamicTags, expired]);
|
|
6354
6381
|
const handleSearch = (value) => {
|
|
@@ -6388,7 +6415,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6388
6415
|
onSearch: handleSearch,
|
|
6389
6416
|
placeholder: (0, import_i18n68.__)("Search dynamic tags\u2026", "elementor")
|
|
6390
6417
|
}
|
|
6391
|
-
), /* @__PURE__ */ React97.createElement(
|
|
6418
|
+
), /* @__PURE__ */ React97.createElement(import_ui47.Divider, null), /* @__PURE__ */ React97.createElement(
|
|
6392
6419
|
import_editor_ui9.PopoverMenuList,
|
|
6393
6420
|
{
|
|
6394
6421
|
items: virtualizedItems,
|
|
@@ -6410,7 +6437,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6410
6437
|
), getPopOverContent());
|
|
6411
6438
|
};
|
|
6412
6439
|
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React97.createElement(
|
|
6413
|
-
|
|
6440
|
+
import_ui47.Stack,
|
|
6414
6441
|
{
|
|
6415
6442
|
gap: 1,
|
|
6416
6443
|
alignItems: "center",
|
|
@@ -6421,11 +6448,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React97.createElem
|
|
|
6421
6448
|
sx: { pb: 3.5 }
|
|
6422
6449
|
},
|
|
6423
6450
|
/* @__PURE__ */ React97.createElement(import_icons30.DatabaseIcon, { fontSize: "large" }),
|
|
6424
|
-
/* @__PURE__ */ React97.createElement(
|
|
6425
|
-
/* @__PURE__ */ React97.createElement(
|
|
6451
|
+
/* @__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."),
|
|
6452
|
+
/* @__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
6453
|
);
|
|
6427
|
-
var NoDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
|
|
6428
|
-
|
|
6454
|
+
var NoDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(import_ui47.Divider, null), /* @__PURE__ */ React97.createElement(
|
|
6455
|
+
import_ui47.Stack,
|
|
6429
6456
|
{
|
|
6430
6457
|
gap: 1,
|
|
6431
6458
|
alignItems: "center",
|
|
@@ -6436,19 +6463,19 @@ var NoDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment
|
|
|
6436
6463
|
sx: { pb: 3.5 }
|
|
6437
6464
|
},
|
|
6438
6465
|
/* @__PURE__ */ React97.createElement(import_icons30.DatabaseIcon, { fontSize: "large" }),
|
|
6439
|
-
/* @__PURE__ */ React97.createElement(
|
|
6440
|
-
/* @__PURE__ */ React97.createElement(
|
|
6466
|
+
/* @__PURE__ */ React97.createElement(import_ui47.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n68.__)("Streamline your workflow with dynamic tags", "elementor")),
|
|
6467
|
+
/* @__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
6468
|
/* @__PURE__ */ React97.createElement(
|
|
6442
6469
|
import_editor_ui9.CtaButton,
|
|
6443
6470
|
{
|
|
6444
6471
|
size: "small",
|
|
6445
6472
|
href: PRO_DYNAMIC_TAGS_URL,
|
|
6446
|
-
onClick: () => (0,
|
|
6473
|
+
onClick: () => (0, import_editor_controls63.trackUpgradePromotionClick)({ target_name: "dynamic_tags" })
|
|
6447
6474
|
}
|
|
6448
6475
|
)
|
|
6449
6476
|
));
|
|
6450
|
-
var ExpiredDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
|
|
6451
|
-
|
|
6477
|
+
var ExpiredDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(import_ui47.Divider, null), /* @__PURE__ */ React97.createElement(
|
|
6478
|
+
import_ui47.Stack,
|
|
6452
6479
|
{
|
|
6453
6480
|
gap: 1,
|
|
6454
6481
|
alignItems: "center",
|
|
@@ -6459,14 +6486,14 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React97.createElement(React97.Fra
|
|
|
6459
6486
|
sx: { pb: 3.5 }
|
|
6460
6487
|
},
|
|
6461
6488
|
/* @__PURE__ */ React97.createElement(import_icons30.DatabaseIcon, { fontSize: "large" }),
|
|
6462
|
-
/* @__PURE__ */ React97.createElement(
|
|
6463
|
-
/* @__PURE__ */ React97.createElement(
|
|
6489
|
+
/* @__PURE__ */ React97.createElement(import_ui47.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n68.__)("Unlock your Dynamic tags again", "elementor")),
|
|
6490
|
+
/* @__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
6491
|
/* @__PURE__ */ React97.createElement(
|
|
6465
6492
|
import_editor_ui9.CtaButton,
|
|
6466
6493
|
{
|
|
6467
6494
|
size: "small",
|
|
6468
6495
|
href: RENEW_DYNAMIC_TAGS_URL,
|
|
6469
|
-
onClick: () => (0,
|
|
6496
|
+
onClick: () => (0, import_editor_controls63.trackUpgradePromotionClick)({ target_name: "dynamic_tags" }),
|
|
6470
6497
|
children: (0, import_i18n68.__)("Renew Now", "elementor")
|
|
6471
6498
|
}
|
|
6472
6499
|
)
|
|
@@ -6491,8 +6518,8 @@ var useFilteredOptions = (searchValue) => {
|
|
|
6491
6518
|
var SIZE3 = "tiny";
|
|
6492
6519
|
var tagsWithoutTabs = ["popup"];
|
|
6493
6520
|
var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
6494
|
-
const { setValue: setAnyValue, propType } = (0,
|
|
6495
|
-
const { bind, value } = (0,
|
|
6521
|
+
const { setValue: setAnyValue, propType } = (0, import_editor_controls64.useBoundProp)();
|
|
6522
|
+
const { bind, value } = (0, import_editor_controls64.useBoundProp)(dynamicPropTypeUtil);
|
|
6496
6523
|
const { expired: readonly } = useLicenseConfig();
|
|
6497
6524
|
const originalPropType = createTopLevelObjectType({
|
|
6498
6525
|
schema: {
|
|
@@ -6500,11 +6527,11 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6500
6527
|
}
|
|
6501
6528
|
});
|
|
6502
6529
|
const [propValueFromHistory] = usePersistDynamicValue(bind);
|
|
6503
|
-
const selectionPopoverState = (0,
|
|
6530
|
+
const selectionPopoverState = (0, import_ui48.usePopupState)({ variant: "popover" });
|
|
6504
6531
|
const { name: tagName = "" } = value;
|
|
6505
6532
|
const dynamicTag = useDynamicTag(tagName);
|
|
6506
6533
|
if (!isDynamicTagSupported(tagName) && OriginalControl) {
|
|
6507
|
-
return /* @__PURE__ */ React98.createElement(
|
|
6534
|
+
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
6535
|
}
|
|
6509
6536
|
const removeDynamicTag = () => {
|
|
6510
6537
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -6512,16 +6539,16 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6512
6539
|
if (!dynamicTag) {
|
|
6513
6540
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
6514
6541
|
}
|
|
6515
|
-
return /* @__PURE__ */ React98.createElement(
|
|
6516
|
-
|
|
6542
|
+
return /* @__PURE__ */ React98.createElement(import_ui48.Box, null, /* @__PURE__ */ React98.createElement(
|
|
6543
|
+
import_ui48.UnstableTag,
|
|
6517
6544
|
{
|
|
6518
6545
|
fullWidth: true,
|
|
6519
6546
|
showActionsOnHover: true,
|
|
6520
6547
|
label: dynamicTag.label,
|
|
6521
6548
|
startIcon: /* @__PURE__ */ React98.createElement(import_icons31.DatabaseIcon, { fontSize: SIZE3 }),
|
|
6522
|
-
...(0,
|
|
6549
|
+
...(0, import_ui48.bindTrigger)(selectionPopoverState),
|
|
6523
6550
|
actions: /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(DynamicSettingsPopover, { dynamicTag, disabled: readonly }), /* @__PURE__ */ React98.createElement(
|
|
6524
|
-
|
|
6551
|
+
import_ui48.IconButton,
|
|
6525
6552
|
{
|
|
6526
6553
|
size: SIZE3,
|
|
6527
6554
|
onClick: removeDynamicTag,
|
|
@@ -6531,7 +6558,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6531
6558
|
))
|
|
6532
6559
|
}
|
|
6533
6560
|
), /* @__PURE__ */ React98.createElement(
|
|
6534
|
-
|
|
6561
|
+
import_ui48.Popover,
|
|
6535
6562
|
{
|
|
6536
6563
|
disablePortal: true,
|
|
6537
6564
|
disableScrollLock: true,
|
|
@@ -6540,7 +6567,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6540
6567
|
PaperProps: {
|
|
6541
6568
|
sx: { my: 1 }
|
|
6542
6569
|
},
|
|
6543
|
-
...(0,
|
|
6570
|
+
...(0, import_ui48.bindPopover)(selectionPopoverState)
|
|
6544
6571
|
},
|
|
6545
6572
|
/* @__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
6573
|
));
|
|
@@ -6549,22 +6576,22 @@ var DynamicSettingsPopover = ({
|
|
|
6549
6576
|
dynamicTag,
|
|
6550
6577
|
disabled = false
|
|
6551
6578
|
}) => {
|
|
6552
|
-
const popupState = (0,
|
|
6579
|
+
const popupState = (0, import_ui48.usePopupState)({ variant: "popover" });
|
|
6553
6580
|
const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
|
|
6554
6581
|
if (!hasDynamicSettings) {
|
|
6555
6582
|
return null;
|
|
6556
6583
|
}
|
|
6557
6584
|
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(
|
|
6558
|
-
|
|
6585
|
+
import_ui48.IconButton,
|
|
6559
6586
|
{
|
|
6560
6587
|
size: SIZE3,
|
|
6561
6588
|
disabled,
|
|
6562
|
-
...!disabled && (0,
|
|
6589
|
+
...!disabled && (0, import_ui48.bindTrigger)(popupState),
|
|
6563
6590
|
"aria-label": (0, import_i18n69.__)("Dynamic settings", "elementor")
|
|
6564
6591
|
},
|
|
6565
6592
|
/* @__PURE__ */ React98.createElement(import_icons31.SettingsIcon, { fontSize: SIZE3 })
|
|
6566
6593
|
), /* @__PURE__ */ React98.createElement(
|
|
6567
|
-
|
|
6594
|
+
import_ui48.Popover,
|
|
6568
6595
|
{
|
|
6569
6596
|
disablePortal: true,
|
|
6570
6597
|
disableScrollLock: true,
|
|
@@ -6573,7 +6600,7 @@ var DynamicSettingsPopover = ({
|
|
|
6573
6600
|
PaperProps: {
|
|
6574
6601
|
sx: { my: 1 }
|
|
6575
6602
|
},
|
|
6576
|
-
...(0,
|
|
6603
|
+
...(0, import_ui48.bindPopover)(popupState)
|
|
6577
6604
|
},
|
|
6578
6605
|
/* @__PURE__ */ React98.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n69.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React98.createElement(
|
|
6579
6606
|
import_editor_ui10.PopoverHeader,
|
|
@@ -6587,25 +6614,25 @@ var DynamicSettingsPopover = ({
|
|
|
6587
6614
|
};
|
|
6588
6615
|
var DynamicSettings = ({ controls, tagName }) => {
|
|
6589
6616
|
const tabs = controls.filter(({ type }) => type === "section");
|
|
6590
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
6617
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui48.useTabs)(0);
|
|
6591
6618
|
if (!tabs.length) {
|
|
6592
6619
|
return null;
|
|
6593
6620
|
}
|
|
6594
6621
|
if (tagsWithoutTabs.includes(tagName)) {
|
|
6595
6622
|
const singleTab = tabs[0];
|
|
6596
|
-
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(
|
|
6623
|
+
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(import_ui48.Divider, null), /* @__PURE__ */ React98.createElement(ControlsItemsStack, { items: singleTab.value.items }));
|
|
6597
6624
|
}
|
|
6598
|
-
return /* @__PURE__ */ React98.createElement(React98.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React98.createElement(
|
|
6599
|
-
|
|
6625
|
+
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(
|
|
6626
|
+
import_ui48.Tab,
|
|
6600
6627
|
{
|
|
6601
6628
|
key: index,
|
|
6602
6629
|
label: value.label,
|
|
6603
6630
|
sx: { px: 1, py: 0.5 },
|
|
6604
6631
|
...getTabProps(index)
|
|
6605
6632
|
}
|
|
6606
|
-
))), /* @__PURE__ */ React98.createElement(
|
|
6633
|
+
))), /* @__PURE__ */ React98.createElement(import_ui48.Divider, null), tabs.map(({ value }, index) => {
|
|
6607
6634
|
return /* @__PURE__ */ React98.createElement(
|
|
6608
|
-
|
|
6635
|
+
import_ui48.TabPanel,
|
|
6609
6636
|
{
|
|
6610
6637
|
key: index,
|
|
6611
6638
|
sx: { flexGrow: 1, py: 0, overflowY: "auto" },
|
|
@@ -6653,10 +6680,10 @@ var Control2 = ({ control }) => {
|
|
|
6653
6680
|
display: "grid",
|
|
6654
6681
|
gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
|
|
6655
6682
|
} : {};
|
|
6656
|
-
return /* @__PURE__ */ React98.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React98.createElement(
|
|
6683
|
+
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
6684
|
};
|
|
6658
6685
|
function ControlsItemsStack({ items: items3 }) {
|
|
6659
|
-
return /* @__PURE__ */ React98.createElement(
|
|
6686
|
+
return /* @__PURE__ */ React98.createElement(import_ui48.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
|
|
6660
6687
|
(item) => item.type === "control" ? /* @__PURE__ */ React98.createElement(Control2, { key: item.value.bind, control: item.value }) : null
|
|
6661
6688
|
));
|
|
6662
6689
|
}
|
|
@@ -6715,11 +6742,11 @@ function getDynamicValue(name, settings, renderPostId) {
|
|
|
6715
6742
|
|
|
6716
6743
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
6717
6744
|
var React99 = __toESM(require("react"));
|
|
6718
|
-
var
|
|
6745
|
+
var import_editor_controls65 = require("@elementor/editor-controls");
|
|
6719
6746
|
var import_icons32 = require("@elementor/icons");
|
|
6720
6747
|
var import_i18n70 = require("@wordpress/i18n");
|
|
6721
6748
|
var usePropDynamicAction = () => {
|
|
6722
|
-
const { propType } = (0,
|
|
6749
|
+
const { propType } = (0, import_editor_controls65.useBoundProp)();
|
|
6723
6750
|
const visible = !!propType && supportsDynamic(propType);
|
|
6724
6751
|
return {
|
|
6725
6752
|
visible,
|
|
@@ -6732,16 +6759,16 @@ var usePropDynamicAction = () => {
|
|
|
6732
6759
|
// src/dynamics/init.ts
|
|
6733
6760
|
var { registerPopoverAction } = import_menus2.controlActionsMenu;
|
|
6734
6761
|
var init2 = () => {
|
|
6735
|
-
(0,
|
|
6762
|
+
(0, import_editor_controls66.registerControlReplacement)({
|
|
6736
6763
|
component: DynamicSelectionControl,
|
|
6737
6764
|
condition: ({ value }) => isDynamicPropValue(value)
|
|
6738
6765
|
});
|
|
6739
|
-
(0,
|
|
6766
|
+
(0, import_editor_controls66.injectIntoRepeaterItemLabel)({
|
|
6740
6767
|
id: "dynamic-background-image",
|
|
6741
6768
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6742
6769
|
component: BackgroundControlDynamicTagLabel
|
|
6743
6770
|
});
|
|
6744
|
-
(0,
|
|
6771
|
+
(0, import_editor_controls66.injectIntoRepeaterItemIcon)({
|
|
6745
6772
|
id: "dynamic-background-image",
|
|
6746
6773
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6747
6774
|
component: BackgroundControlDynamicTagIcon
|
|
@@ -6756,7 +6783,7 @@ var init2 = () => {
|
|
|
6756
6783
|
};
|
|
6757
6784
|
|
|
6758
6785
|
// src/reset-style-props.tsx
|
|
6759
|
-
var
|
|
6786
|
+
var import_editor_controls67 = require("@elementor/editor-controls");
|
|
6760
6787
|
var import_editor_variables2 = require("@elementor/editor-variables");
|
|
6761
6788
|
var import_icons33 = require("@elementor/icons");
|
|
6762
6789
|
var import_menus3 = require("@elementor/menus");
|
|
@@ -6816,7 +6843,7 @@ function initResetStyleProps() {
|
|
|
6816
6843
|
}
|
|
6817
6844
|
function useResetStyleValueProps() {
|
|
6818
6845
|
const isStyle = useIsStyle();
|
|
6819
|
-
const { value, resetValue, propType } = (0,
|
|
6846
|
+
const { value, resetValue, propType } = (0, import_editor_controls67.useBoundProp)();
|
|
6820
6847
|
const hasValue = value !== null && value !== void 0;
|
|
6821
6848
|
const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
|
|
6822
6849
|
const isRequired = !!propType.settings?.required;
|
|
@@ -6844,7 +6871,7 @@ function useResetStyleValueProps() {
|
|
|
6844
6871
|
|
|
6845
6872
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
6846
6873
|
var React105 = __toESM(require("react"));
|
|
6847
|
-
var
|
|
6874
|
+
var import_editor_controls68 = require("@elementor/editor-controls");
|
|
6848
6875
|
var import_editor_props23 = require("@elementor/editor-props");
|
|
6849
6876
|
var import_editor_styles_repository20 = require("@elementor/editor-styles-repository");
|
|
6850
6877
|
var import_i18n75 = require("@wordpress/i18n");
|
|
@@ -6854,7 +6881,7 @@ var React104 = __toESM(require("react"));
|
|
|
6854
6881
|
var import_react46 = require("react");
|
|
6855
6882
|
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
6856
6883
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
6857
|
-
var
|
|
6884
|
+
var import_ui53 = require("@elementor/ui");
|
|
6858
6885
|
var import_i18n74 = require("@wordpress/i18n");
|
|
6859
6886
|
|
|
6860
6887
|
// src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
|
|
@@ -6933,7 +6960,7 @@ var getTransformedValue = async (item, bind, resolve) => {
|
|
|
6933
6960
|
var React100 = __toESM(require("react"));
|
|
6934
6961
|
var import_editor_responsive4 = require("@elementor/editor-responsive");
|
|
6935
6962
|
var import_icons34 = require("@elementor/icons");
|
|
6936
|
-
var
|
|
6963
|
+
var import_ui49 = require("@elementor/ui");
|
|
6937
6964
|
var SIZE4 = "tiny";
|
|
6938
6965
|
var DEFAULT_BREAKPOINT3 = "desktop";
|
|
6939
6966
|
var breakpointIconMap = {
|
|
@@ -6953,21 +6980,21 @@ var BreakpointIcon = ({ breakpoint }) => {
|
|
|
6953
6980
|
return null;
|
|
6954
6981
|
}
|
|
6955
6982
|
const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
|
|
6956
|
-
return /* @__PURE__ */ React100.createElement(
|
|
6983
|
+
return /* @__PURE__ */ React100.createElement(import_ui49.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React100.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
|
|
6957
6984
|
};
|
|
6958
6985
|
|
|
6959
6986
|
// src/styles-inheritance/components/infotip/label-chip.tsx
|
|
6960
6987
|
var React101 = __toESM(require("react"));
|
|
6961
6988
|
var import_editor_styles_repository19 = require("@elementor/editor-styles-repository");
|
|
6962
6989
|
var import_icons35 = require("@elementor/icons");
|
|
6963
|
-
var
|
|
6990
|
+
var import_ui50 = require("@elementor/ui");
|
|
6964
6991
|
var import_i18n73 = require("@wordpress/i18n");
|
|
6965
6992
|
var SIZE5 = "tiny";
|
|
6966
6993
|
var LabelChip = ({ displayLabel, provider }) => {
|
|
6967
6994
|
const isBaseStyle = provider === import_editor_styles_repository19.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
|
|
6968
|
-
const chipIcon = isBaseStyle ? /* @__PURE__ */ React101.createElement(
|
|
6995
|
+
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
6996
|
return /* @__PURE__ */ React101.createElement(
|
|
6970
|
-
|
|
6997
|
+
import_ui50.Chip,
|
|
6971
6998
|
{
|
|
6972
6999
|
label: displayLabel,
|
|
6973
7000
|
size: SIZE5,
|
|
@@ -6993,10 +7020,10 @@ var LabelChip = ({ displayLabel, provider }) => {
|
|
|
6993
7020
|
|
|
6994
7021
|
// src/styles-inheritance/components/infotip/value-component.tsx
|
|
6995
7022
|
var React102 = __toESM(require("react"));
|
|
6996
|
-
var
|
|
7023
|
+
var import_ui51 = require("@elementor/ui");
|
|
6997
7024
|
var ValueComponent = ({ index, value }) => {
|
|
6998
|
-
return /* @__PURE__ */ React102.createElement(
|
|
6999
|
-
|
|
7025
|
+
return /* @__PURE__ */ React102.createElement(import_ui51.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React102.createElement(
|
|
7026
|
+
import_ui51.Typography,
|
|
7000
7027
|
{
|
|
7001
7028
|
variant: "caption",
|
|
7002
7029
|
color: "text.tertiary",
|
|
@@ -7018,8 +7045,8 @@ var ValueComponent = ({ index, value }) => {
|
|
|
7018
7045
|
|
|
7019
7046
|
// src/styles-inheritance/components/infotip/action-icons.tsx
|
|
7020
7047
|
var React103 = __toESM(require("react"));
|
|
7021
|
-
var
|
|
7022
|
-
var ActionIcons = () => /* @__PURE__ */ React103.createElement(
|
|
7048
|
+
var import_ui52 = require("@elementor/ui");
|
|
7049
|
+
var ActionIcons = () => /* @__PURE__ */ React103.createElement(import_ui52.Box, { display: "flex", gap: 0.5, alignItems: "center" });
|
|
7023
7050
|
|
|
7024
7051
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
7025
7052
|
var SECTION_PADDING_INLINE = 32;
|
|
@@ -7055,8 +7082,8 @@ var StylesInheritanceInfotip = ({
|
|
|
7055
7082
|
});
|
|
7056
7083
|
}, [key, propType]);
|
|
7057
7084
|
const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
|
|
7058
|
-
const infotipContent = /* @__PURE__ */ React104.createElement(
|
|
7059
|
-
|
|
7085
|
+
const infotipContent = /* @__PURE__ */ React104.createElement(import_ui53.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React104.createElement(
|
|
7086
|
+
import_ui53.Card,
|
|
7060
7087
|
{
|
|
7061
7088
|
elevation: 0,
|
|
7062
7089
|
sx: {
|
|
@@ -7069,7 +7096,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7069
7096
|
}
|
|
7070
7097
|
},
|
|
7071
7098
|
/* @__PURE__ */ React104.createElement(
|
|
7072
|
-
|
|
7099
|
+
import_ui53.Box,
|
|
7073
7100
|
{
|
|
7074
7101
|
sx: {
|
|
7075
7102
|
position: "sticky",
|
|
@@ -7081,7 +7108,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7081
7108
|
/* @__PURE__ */ React104.createElement(import_editor_ui11.PopoverHeader, { title: (0, import_i18n74.__)("Style origin", "elementor"), onClose: closeInfotip })
|
|
7082
7109
|
),
|
|
7083
7110
|
/* @__PURE__ */ React104.createElement(
|
|
7084
|
-
|
|
7111
|
+
import_ui53.CardContent,
|
|
7085
7112
|
{
|
|
7086
7113
|
sx: {
|
|
7087
7114
|
display: "flex",
|
|
@@ -7094,9 +7121,9 @@ var StylesInheritanceInfotip = ({
|
|
|
7094
7121
|
}
|
|
7095
7122
|
}
|
|
7096
7123
|
},
|
|
7097
|
-
/* @__PURE__ */ React104.createElement(
|
|
7124
|
+
/* @__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
7125
|
return /* @__PURE__ */ React104.createElement(
|
|
7099
|
-
|
|
7126
|
+
import_ui53.Box,
|
|
7100
7127
|
{
|
|
7101
7128
|
key: item.id,
|
|
7102
7129
|
display: "flex",
|
|
@@ -7108,7 +7135,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7108
7135
|
)
|
|
7109
7136
|
},
|
|
7110
7137
|
/* @__PURE__ */ React104.createElement(
|
|
7111
|
-
|
|
7138
|
+
import_ui53.Box,
|
|
7112
7139
|
{
|
|
7113
7140
|
display: "flex",
|
|
7114
7141
|
gap: 0.5,
|
|
@@ -7124,9 +7151,9 @@ var StylesInheritanceInfotip = ({
|
|
|
7124
7151
|
)
|
|
7125
7152
|
));
|
|
7126
7153
|
if (isDisabled) {
|
|
7127
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7154
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Box, { sx: { display: "inline-flex" } }, children);
|
|
7128
7155
|
}
|
|
7129
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7156
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React104.createElement(
|
|
7130
7157
|
TooltipOrInfotip,
|
|
7131
7158
|
{
|
|
7132
7159
|
showInfotip,
|
|
@@ -7135,7 +7162,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7135
7162
|
isDisabled
|
|
7136
7163
|
},
|
|
7137
7164
|
/* @__PURE__ */ React104.createElement(
|
|
7138
|
-
|
|
7165
|
+
import_ui53.IconButton,
|
|
7139
7166
|
{
|
|
7140
7167
|
onClick: toggleInfotip,
|
|
7141
7168
|
"aria-label": label,
|
|
@@ -7154,11 +7181,11 @@ function TooltipOrInfotip({
|
|
|
7154
7181
|
isDisabled
|
|
7155
7182
|
}) {
|
|
7156
7183
|
if (isDisabled) {
|
|
7157
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7184
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Box, { sx: { display: "inline-flex" } }, children);
|
|
7158
7185
|
}
|
|
7159
7186
|
if (showInfotip) {
|
|
7160
7187
|
return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
|
|
7161
|
-
|
|
7188
|
+
import_ui53.Backdrop,
|
|
7162
7189
|
{
|
|
7163
7190
|
open: showInfotip,
|
|
7164
7191
|
onClick: onClose,
|
|
@@ -7168,7 +7195,7 @@ function TooltipOrInfotip({
|
|
|
7168
7195
|
}
|
|
7169
7196
|
}
|
|
7170
7197
|
), /* @__PURE__ */ React104.createElement(
|
|
7171
|
-
|
|
7198
|
+
import_ui53.Infotip,
|
|
7172
7199
|
{
|
|
7173
7200
|
placement: "top-end",
|
|
7174
7201
|
content: infotipContent,
|
|
@@ -7179,14 +7206,14 @@ function TooltipOrInfotip({
|
|
|
7179
7206
|
children
|
|
7180
7207
|
));
|
|
7181
7208
|
}
|
|
7182
|
-
return /* @__PURE__ */ React104.createElement(
|
|
7209
|
+
return /* @__PURE__ */ React104.createElement(import_ui53.Tooltip, { title: (0, import_i18n74.__)("Style origin", "elementor"), placement: "top" }, children);
|
|
7183
7210
|
}
|
|
7184
7211
|
|
|
7185
7212
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
7186
7213
|
var StylesInheritanceIndicator = ({
|
|
7187
7214
|
customContext
|
|
7188
7215
|
}) => {
|
|
7189
|
-
const context = (0,
|
|
7216
|
+
const context = (0, import_editor_controls68.useBoundProp)();
|
|
7190
7217
|
const { path, propType } = customContext || context;
|
|
7191
7218
|
const inheritanceChain = useStylesInheritanceChain(path);
|
|
7192
7219
|
if (!path || !inheritanceChain.length) {
|
|
@@ -7264,12 +7291,12 @@ var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) =>
|
|
|
7264
7291
|
// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
|
|
7265
7292
|
var React107 = __toESM(require("react"));
|
|
7266
7293
|
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
7267
|
-
var
|
|
7268
|
-
var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React107.createElement(
|
|
7294
|
+
var import_ui54 = require("@elementor/ui");
|
|
7295
|
+
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
7296
|
var ItemLabelColor = ({ value: { color } }) => {
|
|
7270
7297
|
return /* @__PURE__ */ React107.createElement("span", null, color);
|
|
7271
7298
|
};
|
|
7272
|
-
var StyledUnstableColorIndicator = (0,
|
|
7299
|
+
var StyledUnstableColorIndicator = (0, import_ui54.styled)(import_ui54.UnstableColorIndicator)(({ theme }) => ({
|
|
7273
7300
|
width: "1em",
|
|
7274
7301
|
height: "1em",
|
|
7275
7302
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -7280,9 +7307,9 @@ var StyledUnstableColorIndicator = (0, import_ui53.styled)(import_ui53.UnstableC
|
|
|
7280
7307
|
// src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
|
|
7281
7308
|
var React108 = __toESM(require("react"));
|
|
7282
7309
|
var import_editor_canvas8 = require("@elementor/editor-canvas");
|
|
7283
|
-
var
|
|
7310
|
+
var import_ui55 = require("@elementor/ui");
|
|
7284
7311
|
var import_i18n76 = require("@wordpress/i18n");
|
|
7285
|
-
var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React108.createElement(
|
|
7312
|
+
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
7313
|
var ItemIconGradient = ({ value }) => {
|
|
7287
7314
|
const gradient = getGradientValue(value);
|
|
7288
7315
|
return /* @__PURE__ */ React108.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
@@ -7305,13 +7332,13 @@ var getGradientValue = (gradient) => {
|
|
|
7305
7332
|
var React109 = __toESM(require("react"));
|
|
7306
7333
|
var import_editor_canvas9 = require("@elementor/editor-canvas");
|
|
7307
7334
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
7308
|
-
var
|
|
7335
|
+
var import_ui56 = require("@elementor/ui");
|
|
7309
7336
|
var import_wp_media = require("@elementor/wp-media");
|
|
7310
|
-
var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React109.createElement(
|
|
7337
|
+
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
7338
|
var ItemIconImage = ({ value }) => {
|
|
7312
7339
|
const { imageUrl } = useImage(value);
|
|
7313
7340
|
return /* @__PURE__ */ React109.createElement(
|
|
7314
|
-
|
|
7341
|
+
import_ui56.CardMedia,
|
|
7315
7342
|
{
|
|
7316
7343
|
image: imageUrl,
|
|
7317
7344
|
sx: (theme) => ({
|
|
@@ -7367,14 +7394,14 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
|
|
|
7367
7394
|
// src/styles-inheritance/transformers/color-transformer.tsx
|
|
7368
7395
|
var React111 = __toESM(require("react"));
|
|
7369
7396
|
var import_editor_canvas11 = require("@elementor/editor-canvas");
|
|
7370
|
-
var
|
|
7397
|
+
var import_ui57 = require("@elementor/ui");
|
|
7371
7398
|
function isValidCSSColor(value) {
|
|
7372
7399
|
if (!value.trim()) {
|
|
7373
7400
|
return false;
|
|
7374
7401
|
}
|
|
7375
7402
|
return CSS.supports("color", value.trim());
|
|
7376
7403
|
}
|
|
7377
|
-
var StyledColorIndicator = (0,
|
|
7404
|
+
var StyledColorIndicator = (0, import_ui57.styled)(import_ui57.UnstableColorIndicator)(({ theme }) => ({
|
|
7378
7405
|
width: "1em",
|
|
7379
7406
|
height: "1em",
|
|
7380
7407
|
borderRadius: `${theme.shape.borderRadius / 2}px`,
|
|
@@ -7385,7 +7412,7 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
|
|
|
7385
7412
|
if (!isValidCSSColor(value)) {
|
|
7386
7413
|
return value;
|
|
7387
7414
|
}
|
|
7388
|
-
return /* @__PURE__ */ React111.createElement(
|
|
7415
|
+
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
7416
|
});
|
|
7390
7417
|
|
|
7391
7418
|
// src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
|