@elementor/editor-editing-panel 4.2.0-898 → 4.2.0-899
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +512 -503
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +439 -430
- package/dist/index.mjs.map +1 -1
- package/package.json +24 -24
- package/src/components/style-sections/layout-section/grid-outline-field.tsx +18 -0
- package/src/components/style-sections/layout-section/layout-section.tsx +2 -0
package/dist/index.js
CHANGED
|
@@ -1919,8 +1919,8 @@ var hasInheritedCustomCss = (style, meta) => {
|
|
|
1919
1919
|
};
|
|
1920
1920
|
|
|
1921
1921
|
// src/components/editing-panel.tsx
|
|
1922
|
-
var
|
|
1923
|
-
var
|
|
1922
|
+
var React89 = __toESM(require("react"));
|
|
1923
|
+
var import_editor_controls55 = require("@elementor/editor-controls");
|
|
1924
1924
|
var import_editor_elements13 = require("@elementor/editor-elements");
|
|
1925
1925
|
var import_editor_panels = require("@elementor/editor-panels");
|
|
1926
1926
|
var import_editor_ui8 = require("@elementor/editor-ui");
|
|
@@ -1929,7 +1929,7 @@ var import_locations4 = require("@elementor/locations");
|
|
|
1929
1929
|
var import_menus = require("@elementor/menus");
|
|
1930
1930
|
var import_session9 = require("@elementor/session");
|
|
1931
1931
|
var import_ui43 = require("@elementor/ui");
|
|
1932
|
-
var
|
|
1932
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
1933
1933
|
|
|
1934
1934
|
// src/editing-panel-replacement-registry.tsx
|
|
1935
1935
|
var registry = /* @__PURE__ */ new Map();
|
|
@@ -1952,11 +1952,11 @@ function EditorPanelErrorFallback() {
|
|
|
1952
1952
|
|
|
1953
1953
|
// src/components/editing-panel-tabs.tsx
|
|
1954
1954
|
var import_react38 = require("react");
|
|
1955
|
-
var
|
|
1955
|
+
var React88 = __toESM(require("react"));
|
|
1956
1956
|
var import_editor_elements12 = require("@elementor/editor-elements");
|
|
1957
1957
|
var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
|
|
1958
1958
|
var import_ui42 = require("@elementor/ui");
|
|
1959
|
-
var
|
|
1959
|
+
var import_i18n62 = require("@wordpress/i18n");
|
|
1960
1960
|
|
|
1961
1961
|
// src/contexts/scroll-context.tsx
|
|
1962
1962
|
var React15 = __toESM(require("react"));
|
|
@@ -2676,14 +2676,14 @@ function isControlHiddenByDependencies(control, propsSchema, settings) {
|
|
|
2676
2676
|
}
|
|
2677
2677
|
|
|
2678
2678
|
// src/components/style-tab.tsx
|
|
2679
|
-
var
|
|
2679
|
+
var React87 = __toESM(require("react"));
|
|
2680
2680
|
var import_react37 = require("react");
|
|
2681
2681
|
var import_editor_props15 = require("@elementor/editor-props");
|
|
2682
2682
|
var import_editor_responsive3 = require("@elementor/editor-responsive");
|
|
2683
2683
|
var import_locations3 = require("@elementor/locations");
|
|
2684
2684
|
var import_session8 = require("@elementor/session");
|
|
2685
2685
|
var import_ui41 = require("@elementor/ui");
|
|
2686
|
-
var
|
|
2686
|
+
var import_i18n61 = require("@wordpress/i18n");
|
|
2687
2687
|
|
|
2688
2688
|
// src/contexts/styles-inheritance-context.tsx
|
|
2689
2689
|
var React25 = __toESM(require("react"));
|
|
@@ -3496,11 +3496,11 @@ var EffectsSection = () => {
|
|
|
3496
3496
|
};
|
|
3497
3497
|
|
|
3498
3498
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
3499
|
-
var
|
|
3500
|
-
var
|
|
3499
|
+
var React57 = __toESM(require("react"));
|
|
3500
|
+
var import_editor_controls31 = require("@elementor/editor-controls");
|
|
3501
3501
|
var import_editor_elements11 = require("@elementor/editor-elements");
|
|
3502
3502
|
var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
|
|
3503
|
-
var
|
|
3503
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
3504
3504
|
|
|
3505
3505
|
// src/hooks/use-computed-style.ts
|
|
3506
3506
|
var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
|
|
@@ -4262,12 +4262,21 @@ var options4 = [
|
|
|
4262
4262
|
];
|
|
4263
4263
|
var GridJustifyItemsField = () => /* @__PURE__ */ React51.createElement(StylesField, { bind: "justify-items", propDisplayName: JUSTIFY_ITEMS_LABEL }, /* @__PURE__ */ React51.createElement(UiProviders, null, /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label: JUSTIFY_ITEMS_LABEL }, /* @__PURE__ */ React51.createElement(import_editor_controls25.ToggleControl, { options: options4 }))));
|
|
4264
4264
|
|
|
4265
|
-
// src/components/style-sections/layout-section/grid-
|
|
4265
|
+
// src/components/style-sections/layout-section/grid-outline-field.tsx
|
|
4266
4266
|
var React52 = __toESM(require("react"));
|
|
4267
|
-
var import_react27 = require("react");
|
|
4268
4267
|
var import_editor_controls26 = require("@elementor/editor-controls");
|
|
4269
|
-
var import_ui31 = require("@elementor/ui");
|
|
4270
4268
|
var import_i18n30 = require("@wordpress/i18n");
|
|
4269
|
+
var GRID_OUTLINE_LABEL = (0, import_i18n30.__)("Show Grid Outline", "elementor");
|
|
4270
|
+
var GridOutlineField = () => {
|
|
4271
|
+
return /* @__PURE__ */ React52.createElement(SettingsField, { bind: "grid_outline", propDisplayName: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React52.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React52.createElement(import_editor_controls26.SwitchControl, null)));
|
|
4272
|
+
};
|
|
4273
|
+
|
|
4274
|
+
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4275
|
+
var React53 = __toESM(require("react"));
|
|
4276
|
+
var import_react27 = require("react");
|
|
4277
|
+
var import_editor_controls27 = require("@elementor/editor-controls");
|
|
4278
|
+
var import_ui31 = require("@elementor/ui");
|
|
4279
|
+
var import_i18n31 = require("@wordpress/i18n");
|
|
4271
4280
|
|
|
4272
4281
|
// src/components/style-sections/layout-section/utils/grid-track-value.ts
|
|
4273
4282
|
var import_editor_props14 = require("@elementor/editor-props");
|
|
@@ -4361,9 +4370,9 @@ var unitOf = (v, fallback = FR) => {
|
|
|
4361
4370
|
};
|
|
4362
4371
|
|
|
4363
4372
|
// src/components/style-sections/layout-section/grid-size-field.tsx
|
|
4364
|
-
var SizeFieldWrapper = ({ children }) => /* @__PURE__ */
|
|
4365
|
-
var GridTrackSizeInput = (0,
|
|
4366
|
-
|
|
4373
|
+
var SizeFieldWrapper = ({ children }) => /* @__PURE__ */ React53.createElement(import_editor_controls27.ControlActions, null, children);
|
|
4374
|
+
var GridTrackSizeInput = (0, import_editor_controls27.createControl)((props) => /* @__PURE__ */ React53.createElement(
|
|
4375
|
+
import_editor_controls27.SizeComponent,
|
|
4367
4376
|
{
|
|
4368
4377
|
units: UNITS,
|
|
4369
4378
|
value: props.value,
|
|
@@ -4381,7 +4390,7 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4381
4390
|
const { value, setValue } = useStylesField(cssProp, {
|
|
4382
4391
|
history: { propDisplayName: label }
|
|
4383
4392
|
});
|
|
4384
|
-
const { placeholder: inheritedPlaceholder } = (0,
|
|
4393
|
+
const { placeholder: inheritedPlaceholder } = (0, import_editor_controls27.useBoundProp)();
|
|
4385
4394
|
const anchorRef = (0, import_react27.useRef)(null);
|
|
4386
4395
|
const local = parseValue(value);
|
|
4387
4396
|
const inherited = parseValue(inheritedPlaceholder);
|
|
@@ -4394,7 +4403,7 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4394
4403
|
}
|
|
4395
4404
|
setValue(toPropValue(next));
|
|
4396
4405
|
};
|
|
4397
|
-
return /* @__PURE__ */
|
|
4406
|
+
return /* @__PURE__ */ React53.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React53.createElement("div", { ref: anchorRef }, /* @__PURE__ */ React53.createElement(
|
|
4398
4407
|
GridTrackSizeInput,
|
|
4399
4408
|
{
|
|
4400
4409
|
value: displayValue,
|
|
@@ -4404,27 +4413,27 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
|
|
|
4404
4413
|
}
|
|
4405
4414
|
)));
|
|
4406
4415
|
};
|
|
4407
|
-
var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */
|
|
4408
|
-
var GridSizeFields = () => /* @__PURE__ */
|
|
4416
|
+
var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ React53.createElement(UiProviders, null, /* @__PURE__ */ React53.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React53.createElement(GridTrackFieldContent, { cssProp, label })));
|
|
4417
|
+
var GridSizeFields = () => /* @__PURE__ */ React53.createElement(import_ui31.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(GridTrackField, { cssProp: "grid-template-columns", label: (0, import_i18n31.__)("Columns", "elementor") })), /* @__PURE__ */ React53.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(GridTrackField, { cssProp: "grid-template-rows", label: (0, import_i18n31.__)("Rows", "elementor") })));
|
|
4409
4418
|
|
|
4410
4419
|
// src/components/style-sections/layout-section/grid-span-field.tsx
|
|
4411
|
-
var
|
|
4412
|
-
var
|
|
4420
|
+
var React54 = __toESM(require("react"));
|
|
4421
|
+
var import_editor_controls28 = require("@elementor/editor-controls");
|
|
4413
4422
|
var import_ui32 = require("@elementor/ui");
|
|
4414
|
-
var
|
|
4423
|
+
var import_i18n32 = require("@wordpress/i18n");
|
|
4415
4424
|
var GridSpanFieldContent = ({ label }) => {
|
|
4416
|
-
return /* @__PURE__ */
|
|
4425
|
+
return /* @__PURE__ */ React54.createElement(StylesFieldLayout, { label, direction: "column" }, /* @__PURE__ */ React54.createElement(import_editor_controls28.GridSpanControl, null));
|
|
4417
4426
|
};
|
|
4418
|
-
var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */
|
|
4419
|
-
var GridSpanFields = () => /* @__PURE__ */
|
|
4427
|
+
var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */ React54.createElement(StylesField, { bind: cssProp, propDisplayName: label }, /* @__PURE__ */ React54.createElement(UiProviders, null, /* @__PURE__ */ React54.createElement(GridSpanFieldContent, { cssProp, label })));
|
|
4428
|
+
var GridSpanFields = () => /* @__PURE__ */ React54.createElement(import_ui32.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React54.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(GridSpanField, { cssProp: "grid-column", label: (0, import_i18n32.__)("Grid column", "elementor") })), /* @__PURE__ */ React54.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React54.createElement(GridSpanField, { cssProp: "grid-row", label: (0, import_i18n32.__)("Grid row", "elementor") })));
|
|
4420
4429
|
|
|
4421
4430
|
// src/components/style-sections/layout-section/justify-content-field.tsx
|
|
4422
|
-
var
|
|
4423
|
-
var
|
|
4431
|
+
var React55 = __toESM(require("react"));
|
|
4432
|
+
var import_editor_controls29 = require("@elementor/editor-controls");
|
|
4424
4433
|
var import_icons15 = require("@elementor/icons");
|
|
4425
4434
|
var import_ui33 = require("@elementor/ui");
|
|
4426
|
-
var
|
|
4427
|
-
var JUSTIFY_CONTENT_LABEL = (0,
|
|
4435
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
4436
|
+
var JUSTIFY_CONTENT_LABEL = (0, import_i18n33.__)("Justify content", "elementor");
|
|
4428
4437
|
var StartIcon6 = (0, import_ui33.withDirection)(import_icons15.JustifyTopIcon);
|
|
4429
4438
|
var EndIcon5 = (0, import_ui33.withDirection)(import_icons15.JustifyBottomIcon);
|
|
4430
4439
|
var iconProps4 = {
|
|
@@ -4434,76 +4443,76 @@ var iconProps4 = {
|
|
|
4434
4443
|
var options5 = [
|
|
4435
4444
|
{
|
|
4436
4445
|
value: "flex-start",
|
|
4437
|
-
label: (0,
|
|
4438
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4446
|
+
label: (0, import_i18n33.__)("Start", "elementor"),
|
|
4447
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: StartIcon6, size, ...iconProps4 }),
|
|
4439
4448
|
showTooltip: true
|
|
4440
4449
|
},
|
|
4441
4450
|
{
|
|
4442
4451
|
value: "center",
|
|
4443
|
-
label: (0,
|
|
4444
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4452
|
+
label: (0, import_i18n33.__)("Center", "elementor"),
|
|
4453
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: import_icons15.JustifyCenterIcon, size, ...iconProps4 }),
|
|
4445
4454
|
showTooltip: true
|
|
4446
4455
|
},
|
|
4447
4456
|
{
|
|
4448
4457
|
value: "flex-end",
|
|
4449
|
-
label: (0,
|
|
4450
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4458
|
+
label: (0, import_i18n33.__)("End", "elementor"),
|
|
4459
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: EndIcon5, size, ...iconProps4 }),
|
|
4451
4460
|
showTooltip: true
|
|
4452
4461
|
},
|
|
4453
4462
|
{
|
|
4454
4463
|
value: "space-between",
|
|
4455
|
-
label: (0,
|
|
4456
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4464
|
+
label: (0, import_i18n33.__)("Space between", "elementor"),
|
|
4465
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: import_icons15.JustifySpaceBetweenVerticalIcon, size, ...iconProps4 }),
|
|
4457
4466
|
showTooltip: true
|
|
4458
4467
|
},
|
|
4459
4468
|
{
|
|
4460
4469
|
value: "space-around",
|
|
4461
|
-
label: (0,
|
|
4462
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4470
|
+
label: (0, import_i18n33.__)("Space around", "elementor"),
|
|
4471
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: import_icons15.JustifySpaceAroundVerticalIcon, size, ...iconProps4 }),
|
|
4463
4472
|
showTooltip: true
|
|
4464
4473
|
},
|
|
4465
4474
|
{
|
|
4466
4475
|
value: "space-evenly",
|
|
4467
|
-
label: (0,
|
|
4468
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4476
|
+
label: (0, import_i18n33.__)("Space evenly", "elementor"),
|
|
4477
|
+
renderContent: ({ size }) => /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: import_icons15.JustifyDistributeVerticalIcon, size, ...iconProps4 }),
|
|
4469
4478
|
showTooltip: true
|
|
4470
4479
|
}
|
|
4471
4480
|
];
|
|
4472
|
-
var JustifyContentField = () => /* @__PURE__ */
|
|
4481
|
+
var JustifyContentField = () => /* @__PURE__ */ React55.createElement(StylesField, { bind: "justify-content", propDisplayName: JUSTIFY_CONTENT_LABEL }, /* @__PURE__ */ React55.createElement(UiProviders, null, /* @__PURE__ */ React55.createElement(StylesFieldLayout, { label: JUSTIFY_CONTENT_LABEL, direction: "column" }, /* @__PURE__ */ React55.createElement(import_editor_controls29.ToggleControl, { options: options5, fullWidth: true }))));
|
|
4473
4482
|
|
|
4474
4483
|
// src/components/style-sections/layout-section/wrap-field.tsx
|
|
4475
|
-
var
|
|
4476
|
-
var
|
|
4484
|
+
var React56 = __toESM(require("react"));
|
|
4485
|
+
var import_editor_controls30 = require("@elementor/editor-controls");
|
|
4477
4486
|
var import_icons16 = require("@elementor/icons");
|
|
4478
|
-
var
|
|
4479
|
-
var FLEX_WRAP_LABEL = (0,
|
|
4487
|
+
var import_i18n34 = require("@wordpress/i18n");
|
|
4488
|
+
var FLEX_WRAP_LABEL = (0, import_i18n34.__)("Wrap", "elementor");
|
|
4480
4489
|
var options6 = [
|
|
4481
4490
|
{
|
|
4482
4491
|
value: "nowrap",
|
|
4483
|
-
label: (0,
|
|
4484
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4492
|
+
label: (0, import_i18n34.__)("No wrap", "elementor"),
|
|
4493
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons16.ArrowRightIcon, { fontSize: size }),
|
|
4485
4494
|
showTooltip: true
|
|
4486
4495
|
},
|
|
4487
4496
|
{
|
|
4488
4497
|
value: "wrap",
|
|
4489
|
-
label: (0,
|
|
4490
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4498
|
+
label: (0, import_i18n34.__)("Wrap", "elementor"),
|
|
4499
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons16.ArrowBackIcon, { fontSize: size }),
|
|
4491
4500
|
showTooltip: true
|
|
4492
4501
|
},
|
|
4493
4502
|
{
|
|
4494
4503
|
value: "wrap-reverse",
|
|
4495
|
-
label: (0,
|
|
4496
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4504
|
+
label: (0, import_i18n34.__)("Reversed wrap", "elementor"),
|
|
4505
|
+
renderContent: ({ size }) => /* @__PURE__ */ React56.createElement(import_icons16.ArrowForwardIcon, { fontSize: size }),
|
|
4497
4506
|
showTooltip: true
|
|
4498
4507
|
}
|
|
4499
4508
|
];
|
|
4500
4509
|
var WrapField = () => {
|
|
4501
|
-
return /* @__PURE__ */
|
|
4510
|
+
return /* @__PURE__ */ React56.createElement(StylesField, { bind: "flex-wrap", propDisplayName: FLEX_WRAP_LABEL }, /* @__PURE__ */ React56.createElement(UiProviders, null, /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: FLEX_WRAP_LABEL }, /* @__PURE__ */ React56.createElement(import_editor_controls30.ToggleControl, { options: options6 }))));
|
|
4502
4511
|
};
|
|
4503
4512
|
|
|
4504
4513
|
// src/components/style-sections/layout-section/layout-section.tsx
|
|
4505
|
-
var DISPLAY_LABEL2 = (0,
|
|
4506
|
-
var FLEX_WRAP_LABEL2 = (0,
|
|
4514
|
+
var DISPLAY_LABEL2 = (0, import_i18n35.__)("Display", "elementor");
|
|
4515
|
+
var FLEX_WRAP_LABEL2 = (0, import_i18n35.__)("Flex wrap", "elementor");
|
|
4507
4516
|
var DEFAULT_PARENT_FLOW_DIRECTION = "row";
|
|
4508
4517
|
var LayoutSection = () => {
|
|
4509
4518
|
const { value: display } = useStylesField("display", {
|
|
@@ -4525,17 +4534,17 @@ var LayoutSection = () => {
|
|
|
4525
4534
|
}
|
|
4526
4535
|
return DEFAULT_PARENT_FLOW_DIRECTION;
|
|
4527
4536
|
};
|
|
4528
|
-
return /* @__PURE__ */
|
|
4537
|
+
return /* @__PURE__ */ React57.createElement(SectionContent, null, /* @__PURE__ */ React57.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React57.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React57.createElement(FlexChildFields, { parentStyleDirection: getParentStyleDirection() }), isGridExperimentActive && isDisplayGrid && /* @__PURE__ */ React57.createElement(GridFields, null), isGridExperimentActive && "grid" === parentStyle?.display && /* @__PURE__ */ React57.createElement(GridChildFields, { parentStyleDirection: getParentStyleDirection() }));
|
|
4529
4538
|
};
|
|
4530
4539
|
var FlexFields = () => {
|
|
4531
4540
|
const { value: flexWrap } = useStylesField("flex-wrap", {
|
|
4532
4541
|
history: { propDisplayName: FLEX_WRAP_LABEL2 }
|
|
4533
4542
|
});
|
|
4534
|
-
return /* @__PURE__ */
|
|
4543
|
+
return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(FlexDirectionField, null), /* @__PURE__ */ React57.createElement(JustifyContentField, null), /* @__PURE__ */ React57.createElement(AlignItemsField, null), /* @__PURE__ */ React57.createElement(PanelDivider, null), /* @__PURE__ */ React57.createElement(GapControlField, null), /* @__PURE__ */ React57.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React57.createElement(AlignContentField, null));
|
|
4535
4544
|
};
|
|
4536
|
-
var GridFields = () => /* @__PURE__ */
|
|
4537
|
-
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
4538
|
-
var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */
|
|
4545
|
+
var GridFields = () => /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(GridOutlineField, null), /* @__PURE__ */ React57.createElement(GridSizeFields, null), /* @__PURE__ */ React57.createElement(GridAutoFlowField, null), /* @__PURE__ */ React57.createElement(PanelDivider, null), /* @__PURE__ */ React57.createElement(GapControlField, null), /* @__PURE__ */ React57.createElement(PanelDivider, null), /* @__PURE__ */ React57.createElement(GridJustifyItemsField, null), /* @__PURE__ */ React57.createElement(AlignItemsField, null));
|
|
4546
|
+
var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(PanelDivider, null), /* @__PURE__ */ React57.createElement(import_editor_controls31.ControlFormLabel, null, (0, import_i18n35.__)("Flex child", "elementor")), /* @__PURE__ */ React57.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React57.createElement(FlexOrderField, null), /* @__PURE__ */ React57.createElement(FlexSizeField, null));
|
|
4547
|
+
var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(PanelDivider, null), /* @__PURE__ */ React57.createElement(import_editor_controls31.ControlFormLabel, null, (0, import_i18n35.__)("Grid child", "elementor")), /* @__PURE__ */ React57.createElement(GridSpanFields, null), /* @__PURE__ */ React57.createElement(AlignSelfGridChild, { parentStyleDirection }), /* @__PURE__ */ React57.createElement(FlexOrderField, null));
|
|
4539
4548
|
var shouldDisplayFlexFields = (display, local) => {
|
|
4540
4549
|
const value = display?.value ?? local?.value;
|
|
4541
4550
|
if (!value) {
|
|
@@ -4545,40 +4554,40 @@ var shouldDisplayFlexFields = (display, local) => {
|
|
|
4545
4554
|
};
|
|
4546
4555
|
|
|
4547
4556
|
// src/components/style-sections/position-section/position-section.tsx
|
|
4548
|
-
var
|
|
4557
|
+
var React62 = __toESM(require("react"));
|
|
4549
4558
|
var import_react30 = require("react");
|
|
4550
4559
|
var import_session7 = require("@elementor/session");
|
|
4551
4560
|
var import_ui36 = require("@elementor/ui");
|
|
4552
|
-
var
|
|
4561
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
4553
4562
|
|
|
4554
4563
|
// src/components/style-sections/position-section/dimensions-field.tsx
|
|
4555
|
-
var
|
|
4564
|
+
var React58 = __toESM(require("react"));
|
|
4556
4565
|
var import_react28 = require("react");
|
|
4557
|
-
var
|
|
4566
|
+
var import_editor_controls32 = require("@elementor/editor-controls");
|
|
4558
4567
|
var import_icons17 = require("@elementor/icons");
|
|
4559
4568
|
var import_ui34 = require("@elementor/ui");
|
|
4560
|
-
var
|
|
4569
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
4561
4570
|
var InlineStartIcon2 = (0, import_ui34.withDirection)(import_icons17.SideLeftIcon);
|
|
4562
4571
|
var InlineEndIcon2 = (0, import_ui34.withDirection)(import_icons17.SideRightIcon);
|
|
4563
4572
|
var sideIcons = {
|
|
4564
|
-
"inset-block-start": /* @__PURE__ */
|
|
4565
|
-
"inset-block-end": /* @__PURE__ */
|
|
4566
|
-
"inset-inline-start": /* @__PURE__ */
|
|
4567
|
-
"inset-inline-end": /* @__PURE__ */
|
|
4573
|
+
"inset-block-start": /* @__PURE__ */ React58.createElement(import_icons17.SideTopIcon, { fontSize: "tiny" }),
|
|
4574
|
+
"inset-block-end": /* @__PURE__ */ React58.createElement(import_icons17.SideBottomIcon, { fontSize: "tiny" }),
|
|
4575
|
+
"inset-inline-start": /* @__PURE__ */ React58.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
|
|
4576
|
+
"inset-inline-end": /* @__PURE__ */ React58.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
|
|
4568
4577
|
};
|
|
4569
|
-
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0,
|
|
4570
|
-
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0,
|
|
4578
|
+
var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n36.__)("Right", "elementor") : (0, import_i18n36.__)("Left", "elementor");
|
|
4579
|
+
var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n36.__)("Left", "elementor") : (0, import_i18n36.__)("Right", "elementor");
|
|
4571
4580
|
var DimensionsField = () => {
|
|
4572
4581
|
const { isSiteRtl } = useDirection();
|
|
4573
4582
|
const rowRefs = [(0, import_react28.useRef)(null), (0, import_react28.useRef)(null)];
|
|
4574
|
-
return /* @__PURE__ */
|
|
4583
|
+
return /* @__PURE__ */ React58.createElement(UiProviders, null, /* @__PURE__ */ React58.createElement(import_ui34.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React58.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n36.__)("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React58.createElement(
|
|
4575
4584
|
DimensionField,
|
|
4576
4585
|
{
|
|
4577
4586
|
side: "inset-inline-end",
|
|
4578
4587
|
label: getInlineEndLabel(isSiteRtl),
|
|
4579
4588
|
rowRef: rowRefs[0]
|
|
4580
4589
|
}
|
|
4581
|
-
)), /* @__PURE__ */
|
|
4590
|
+
)), /* @__PURE__ */ React58.createElement(import_ui34.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React58.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n36.__)("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React58.createElement(
|
|
4582
4591
|
DimensionField,
|
|
4583
4592
|
{
|
|
4584
4593
|
side: "inset-inline-start",
|
|
@@ -4591,8 +4600,8 @@ var DimensionField = ({
|
|
|
4591
4600
|
side,
|
|
4592
4601
|
label,
|
|
4593
4602
|
rowRef
|
|
4594
|
-
}) => /* @__PURE__ */
|
|
4595
|
-
|
|
4603
|
+
}) => /* @__PURE__ */ React58.createElement(StylesField, { bind: side, propDisplayName: label }, /* @__PURE__ */ React58.createElement(import_ui34.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React58.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, label)), /* @__PURE__ */ React58.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React58.createElement(
|
|
4604
|
+
import_editor_controls32.SizeControl,
|
|
4596
4605
|
{
|
|
4597
4606
|
startIcon: sideIcons[side],
|
|
4598
4607
|
extendedOptions: ["auto"],
|
|
@@ -4602,47 +4611,47 @@ var DimensionField = ({
|
|
|
4602
4611
|
))));
|
|
4603
4612
|
|
|
4604
4613
|
// src/components/style-sections/position-section/offset-field.tsx
|
|
4605
|
-
var
|
|
4614
|
+
var React59 = __toESM(require("react"));
|
|
4606
4615
|
var import_react29 = require("react");
|
|
4607
|
-
var
|
|
4608
|
-
var
|
|
4609
|
-
var OFFSET_LABEL = (0,
|
|
4616
|
+
var import_editor_controls33 = require("@elementor/editor-controls");
|
|
4617
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
4618
|
+
var OFFSET_LABEL = (0, import_i18n37.__)("Anchor offset", "elementor");
|
|
4610
4619
|
var UNITS2 = ["px", "em", "rem", "vw", "vh"];
|
|
4611
4620
|
var OffsetField = () => {
|
|
4612
4621
|
const rowRef = (0, import_react29.useRef)(null);
|
|
4613
|
-
return /* @__PURE__ */
|
|
4622
|
+
return /* @__PURE__ */ React59.createElement(StylesField, { bind: "scroll-margin-top", propDisplayName: OFFSET_LABEL }, /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label: OFFSET_LABEL, ref: rowRef }, /* @__PURE__ */ React59.createElement(import_editor_controls33.SizeControl, { units: UNITS2, anchorRef: rowRef })));
|
|
4614
4623
|
};
|
|
4615
4624
|
|
|
4616
4625
|
// src/components/style-sections/position-section/position-field.tsx
|
|
4617
|
-
var
|
|
4618
|
-
var
|
|
4619
|
-
var
|
|
4620
|
-
var POSITION_LABEL = (0,
|
|
4626
|
+
var React60 = __toESM(require("react"));
|
|
4627
|
+
var import_editor_controls34 = require("@elementor/editor-controls");
|
|
4628
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
4629
|
+
var POSITION_LABEL = (0, import_i18n38.__)("Position", "elementor");
|
|
4621
4630
|
var positionOptions = [
|
|
4622
|
-
{ label: (0,
|
|
4623
|
-
{ label: (0,
|
|
4624
|
-
{ label: (0,
|
|
4625
|
-
{ label: (0,
|
|
4626
|
-
{ label: (0,
|
|
4631
|
+
{ label: (0, import_i18n38.__)("Static", "elementor"), value: "static" },
|
|
4632
|
+
{ label: (0, import_i18n38.__)("Relative", "elementor"), value: "relative" },
|
|
4633
|
+
{ label: (0, import_i18n38.__)("Absolute", "elementor"), value: "absolute" },
|
|
4634
|
+
{ label: (0, import_i18n38.__)("Fixed", "elementor"), value: "fixed" },
|
|
4635
|
+
{ label: (0, import_i18n38.__)("Sticky", "elementor"), value: "sticky" }
|
|
4627
4636
|
];
|
|
4628
4637
|
var PositionField = () => {
|
|
4629
|
-
return /* @__PURE__ */
|
|
4638
|
+
return /* @__PURE__ */ React60.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React60.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React60.createElement(import_editor_controls34.SelectControl, { options: positionOptions })));
|
|
4630
4639
|
};
|
|
4631
4640
|
|
|
4632
4641
|
// src/components/style-sections/position-section/z-index-field.tsx
|
|
4633
|
-
var
|
|
4634
|
-
var
|
|
4642
|
+
var React61 = __toESM(require("react"));
|
|
4643
|
+
var import_editor_controls35 = require("@elementor/editor-controls");
|
|
4635
4644
|
var import_icons18 = require("@elementor/icons");
|
|
4636
4645
|
var import_ui35 = require("@elementor/ui");
|
|
4637
|
-
var
|
|
4638
|
-
var Z_INDEX_LABEL = (0,
|
|
4646
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
4647
|
+
var Z_INDEX_LABEL = (0, import_i18n39.__)("Z-index", "elementor");
|
|
4639
4648
|
var ZIndexField = ({ disabled }) => {
|
|
4640
|
-
const StyleField = /* @__PURE__ */
|
|
4641
|
-
const content = /* @__PURE__ */
|
|
4649
|
+
const StyleField = /* @__PURE__ */ React61.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React61.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React61.createElement(import_editor_controls35.NumberControl, { disabled })));
|
|
4650
|
+
const content = /* @__PURE__ */ React61.createElement(import_ui35.Alert, { color: "secondary", icon: /* @__PURE__ */ React61.createElement(import_icons18.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React61.createElement(import_ui35.AlertTitle, null, (0, import_i18n39.__)("Z-index", "elementor")), /* @__PURE__ */ React61.createElement(import_ui35.Box, { component: "span" }, (0, import_i18n39.__)(
|
|
4642
4651
|
"z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.",
|
|
4643
4652
|
"elementor"
|
|
4644
4653
|
)));
|
|
4645
|
-
return disabled ? /* @__PURE__ */
|
|
4654
|
+
return disabled ? /* @__PURE__ */ React61.createElement(
|
|
4646
4655
|
import_ui35.Infotip,
|
|
4647
4656
|
{
|
|
4648
4657
|
placement: "right",
|
|
@@ -4650,14 +4659,14 @@ var ZIndexField = ({ disabled }) => {
|
|
|
4650
4659
|
color: "secondary",
|
|
4651
4660
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
4652
4661
|
},
|
|
4653
|
-
/* @__PURE__ */
|
|
4654
|
-
) : /* @__PURE__ */
|
|
4662
|
+
/* @__PURE__ */ React61.createElement(import_ui35.Box, null, StyleField)
|
|
4663
|
+
) : /* @__PURE__ */ React61.createElement(React61.Fragment, null, StyleField);
|
|
4655
4664
|
};
|
|
4656
4665
|
|
|
4657
4666
|
// src/components/style-sections/position-section/position-section.tsx
|
|
4658
4667
|
var POSITION_STATIC = "static";
|
|
4659
|
-
var POSITION_LABEL2 = (0,
|
|
4660
|
-
var DIMENSIONS_LABEL = (0,
|
|
4668
|
+
var POSITION_LABEL2 = (0, import_i18n40.__)("Position", "elementor");
|
|
4669
|
+
var DIMENSIONS_LABEL = (0, import_i18n40.__)("Dimensions", "elementor");
|
|
4661
4670
|
var DEPENDENT_PROP_NAMES = [
|
|
4662
4671
|
"inset-block-start",
|
|
4663
4672
|
"inset-block-end",
|
|
@@ -4683,7 +4692,7 @@ var PositionSection = () => {
|
|
|
4683
4692
|
}
|
|
4684
4693
|
positionPrevRef.current = position;
|
|
4685
4694
|
}, [position?.value]);
|
|
4686
|
-
return /* @__PURE__ */
|
|
4695
|
+
return /* @__PURE__ */ React62.createElement(StyledSectionContent, null, /* @__PURE__ */ React62.createElement(PositionField, null), /* @__PURE__ */ React62.createElement(DimensionsField, null), /* @__PURE__ */ React62.createElement(ZIndexField, { disabled: !position || position?.value === POSITION_STATIC }), /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(OffsetField, null));
|
|
4687
4696
|
};
|
|
4688
4697
|
var usePersistDimensions = () => {
|
|
4689
4698
|
const { id: styleDefID, meta } = useStyle();
|
|
@@ -4733,26 +4742,26 @@ var StyledSectionContent = (0, import_ui36.styled)(SectionContent, {
|
|
|
4733
4742
|
}));
|
|
4734
4743
|
|
|
4735
4744
|
// src/components/style-sections/size-section/size-section.tsx
|
|
4736
|
-
var
|
|
4745
|
+
var React67 = __toESM(require("react"));
|
|
4737
4746
|
var import_react31 = require("react");
|
|
4738
|
-
var
|
|
4747
|
+
var import_editor_controls38 = require("@elementor/editor-controls");
|
|
4739
4748
|
var import_ui38 = require("@elementor/ui");
|
|
4740
|
-
var
|
|
4749
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
4741
4750
|
|
|
4742
4751
|
// src/components/style-tab-collapsible-content.tsx
|
|
4743
|
-
var
|
|
4752
|
+
var React64 = __toESM(require("react"));
|
|
4744
4753
|
var import_editor_ui6 = require("@elementor/editor-ui");
|
|
4745
4754
|
|
|
4746
4755
|
// src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
|
|
4747
|
-
var
|
|
4756
|
+
var React63 = __toESM(require("react"));
|
|
4748
4757
|
var import_editor_styles_repository17 = require("@elementor/editor-styles-repository");
|
|
4749
4758
|
var import_ui37 = require("@elementor/ui");
|
|
4750
|
-
var
|
|
4759
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
4751
4760
|
var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
4752
4761
|
const { id, meta, provider } = useStyle();
|
|
4753
4762
|
const snapshot = useStylesInheritanceSnapshot();
|
|
4754
4763
|
if (fields.includes("custom_css")) {
|
|
4755
|
-
return /* @__PURE__ */
|
|
4764
|
+
return /* @__PURE__ */ React63.createElement(CustomCssIndicator, null);
|
|
4756
4765
|
}
|
|
4757
4766
|
const snapshotFields = Object.fromEntries(
|
|
4758
4767
|
Object.entries(snapshot ?? {}).filter(([key]) => fields.includes(key))
|
|
@@ -4761,9 +4770,9 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
4761
4770
|
if (!hasValues && !hasOverrides) {
|
|
4762
4771
|
return null;
|
|
4763
4772
|
}
|
|
4764
|
-
const hasValueLabel = (0,
|
|
4765
|
-
const hasOverridesLabel = (0,
|
|
4766
|
-
return /* @__PURE__ */
|
|
4773
|
+
const hasValueLabel = (0, import_i18n41.__)("Has effective styles", "elementor");
|
|
4774
|
+
const hasOverridesLabel = (0, import_i18n41.__)("Has overridden styles", "elementor");
|
|
4775
|
+
return /* @__PURE__ */ React63.createElement(import_ui37.Tooltip, { title: (0, import_i18n41.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React63.createElement(import_ui37.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React63.createElement(
|
|
4767
4776
|
StyleIndicator,
|
|
4768
4777
|
{
|
|
4769
4778
|
getColor: getStylesProviderThemeColor(provider.getKey()),
|
|
@@ -4771,7 +4780,7 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
|
|
|
4771
4780
|
role: "listitem",
|
|
4772
4781
|
"aria-label": hasValueLabel
|
|
4773
4782
|
}
|
|
4774
|
-
), hasOverrides && /* @__PURE__ */
|
|
4783
|
+
), hasOverrides && /* @__PURE__ */ React63.createElement(
|
|
4775
4784
|
StyleIndicator,
|
|
4776
4785
|
{
|
|
4777
4786
|
isOverridden: true,
|
|
@@ -4811,59 +4820,59 @@ function getCurrentStyleFromChain(chain, styleId, meta) {
|
|
|
4811
4820
|
|
|
4812
4821
|
// src/components/style-tab-collapsible-content.tsx
|
|
4813
4822
|
var StyleTabCollapsibleContent = ({ fields = [], children }) => {
|
|
4814
|
-
return /* @__PURE__ */
|
|
4823
|
+
return /* @__PURE__ */ React64.createElement(import_editor_ui6.CollapsibleContent, { titleEnd: getStylesInheritanceIndicators(fields) }, children);
|
|
4815
4824
|
};
|
|
4816
4825
|
function getStylesInheritanceIndicators(fields) {
|
|
4817
4826
|
if (fields.length === 0) {
|
|
4818
4827
|
return null;
|
|
4819
4828
|
}
|
|
4820
|
-
return (isOpen) => !isOpen ? /* @__PURE__ */
|
|
4829
|
+
return (isOpen) => !isOpen ? /* @__PURE__ */ React64.createElement(StylesInheritanceSectionIndicators, { fields }) : null;
|
|
4821
4830
|
}
|
|
4822
4831
|
|
|
4823
4832
|
// src/components/style-sections/size-section/object-fit-field.tsx
|
|
4824
|
-
var
|
|
4825
|
-
var
|
|
4826
|
-
var
|
|
4827
|
-
var OBJECT_FIT_LABEL = (0,
|
|
4833
|
+
var React65 = __toESM(require("react"));
|
|
4834
|
+
var import_editor_controls36 = require("@elementor/editor-controls");
|
|
4835
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
4836
|
+
var OBJECT_FIT_LABEL = (0, import_i18n42.__)("Object fit", "elementor");
|
|
4828
4837
|
var positionOptions2 = [
|
|
4829
|
-
{ label: (0,
|
|
4830
|
-
{ label: (0,
|
|
4831
|
-
{ label: (0,
|
|
4832
|
-
{ label: (0,
|
|
4833
|
-
{ label: (0,
|
|
4838
|
+
{ label: (0, import_i18n42.__)("Fill", "elementor"), value: "fill" },
|
|
4839
|
+
{ label: (0, import_i18n42.__)("Cover", "elementor"), value: "cover" },
|
|
4840
|
+
{ label: (0, import_i18n42.__)("Contain", "elementor"), value: "contain" },
|
|
4841
|
+
{ label: (0, import_i18n42.__)("None", "elementor"), value: "none" },
|
|
4842
|
+
{ label: (0, import_i18n42.__)("Scale down", "elementor"), value: "scale-down" }
|
|
4834
4843
|
];
|
|
4835
4844
|
var ObjectFitField = () => {
|
|
4836
|
-
return /* @__PURE__ */
|
|
4845
|
+
return /* @__PURE__ */ React65.createElement(StylesField, { bind: "object-fit", propDisplayName: OBJECT_FIT_LABEL }, /* @__PURE__ */ React65.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ React65.createElement(import_editor_controls36.SelectControl, { options: positionOptions2 })));
|
|
4837
4846
|
};
|
|
4838
4847
|
|
|
4839
4848
|
// src/components/style-sections/size-section/overflow-field.tsx
|
|
4840
|
-
var
|
|
4841
|
-
var
|
|
4849
|
+
var React66 = __toESM(require("react"));
|
|
4850
|
+
var import_editor_controls37 = require("@elementor/editor-controls");
|
|
4842
4851
|
var import_icons19 = require("@elementor/icons");
|
|
4843
|
-
var
|
|
4844
|
-
var OVERFLOW_LABEL = (0,
|
|
4852
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
4853
|
+
var OVERFLOW_LABEL = (0, import_i18n43.__)("Overflow", "elementor");
|
|
4845
4854
|
var options7 = [
|
|
4846
4855
|
{
|
|
4847
4856
|
value: "visible",
|
|
4848
|
-
label: (0,
|
|
4849
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4857
|
+
label: (0, import_i18n43.__)("Visible", "elementor"),
|
|
4858
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons19.EyeIcon, { fontSize: size }),
|
|
4850
4859
|
showTooltip: true
|
|
4851
4860
|
},
|
|
4852
4861
|
{
|
|
4853
4862
|
value: "hidden",
|
|
4854
|
-
label: (0,
|
|
4855
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4863
|
+
label: (0, import_i18n43.__)("Hidden", "elementor"),
|
|
4864
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons19.EyeOffIcon, { fontSize: size }),
|
|
4856
4865
|
showTooltip: true
|
|
4857
4866
|
},
|
|
4858
4867
|
{
|
|
4859
4868
|
value: "auto",
|
|
4860
|
-
label: (0,
|
|
4861
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
4869
|
+
label: (0, import_i18n43.__)("Auto", "elementor"),
|
|
4870
|
+
renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(import_icons19.LetterAIcon, { fontSize: size }),
|
|
4862
4871
|
showTooltip: true
|
|
4863
4872
|
}
|
|
4864
4873
|
];
|
|
4865
4874
|
var OverflowField = () => {
|
|
4866
|
-
return /* @__PURE__ */
|
|
4875
|
+
return /* @__PURE__ */ React66.createElement(StylesField, { bind: "overflow", propDisplayName: OVERFLOW_LABEL }, /* @__PURE__ */ React66.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ React66.createElement(import_editor_controls37.ToggleControl, { options: options7 })));
|
|
4867
4876
|
};
|
|
4868
4877
|
|
|
4869
4878
|
// src/components/style-sections/size-section/size-section.tsx
|
|
@@ -4871,98 +4880,98 @@ var CssSizeProps = [
|
|
|
4871
4880
|
[
|
|
4872
4881
|
{
|
|
4873
4882
|
bind: "width",
|
|
4874
|
-
label: (0,
|
|
4883
|
+
label: (0, import_i18n44.__)("Width", "elementor")
|
|
4875
4884
|
},
|
|
4876
4885
|
{
|
|
4877
4886
|
bind: "height",
|
|
4878
|
-
label: (0,
|
|
4887
|
+
label: (0, import_i18n44.__)("Height", "elementor")
|
|
4879
4888
|
}
|
|
4880
4889
|
],
|
|
4881
4890
|
[
|
|
4882
4891
|
{
|
|
4883
4892
|
bind: "min-width",
|
|
4884
|
-
label: (0,
|
|
4893
|
+
label: (0, import_i18n44.__)("Min width", "elementor")
|
|
4885
4894
|
},
|
|
4886
4895
|
{
|
|
4887
4896
|
bind: "min-height",
|
|
4888
|
-
label: (0,
|
|
4897
|
+
label: (0, import_i18n44.__)("Min height", "elementor")
|
|
4889
4898
|
}
|
|
4890
4899
|
],
|
|
4891
4900
|
[
|
|
4892
4901
|
{
|
|
4893
4902
|
bind: "max-width",
|
|
4894
|
-
label: (0,
|
|
4903
|
+
label: (0, import_i18n44.__)("Max width", "elementor")
|
|
4895
4904
|
},
|
|
4896
4905
|
{
|
|
4897
4906
|
bind: "max-height",
|
|
4898
|
-
label: (0,
|
|
4907
|
+
label: (0, import_i18n44.__)("Max height", "elementor")
|
|
4899
4908
|
}
|
|
4900
4909
|
]
|
|
4901
4910
|
];
|
|
4902
|
-
var ASPECT_RATIO_LABEL = (0,
|
|
4911
|
+
var ASPECT_RATIO_LABEL = (0, import_i18n44.__)("Aspect Ratio", "elementor");
|
|
4903
4912
|
var SizeSection = () => {
|
|
4904
4913
|
const gridRowRefs = [(0, import_react31.useRef)(null), (0, import_react31.useRef)(null), (0, import_react31.useRef)(null)];
|
|
4905
|
-
return /* @__PURE__ */
|
|
4914
|
+
return /* @__PURE__ */ React67.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React67.createElement(import_ui38.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React67.createElement(import_ui38.Grid, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React67.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React67.createElement(PanelDivider, null), /* @__PURE__ */ React67.createElement(import_ui38.Stack, null, /* @__PURE__ */ React67.createElement(OverflowField, null)), /* @__PURE__ */ React67.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React67.createElement(import_ui38.Stack, { gap: 2, pt: 2 }, /* @__PURE__ */ React67.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React67.createElement(import_editor_controls38.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React67.createElement(PanelDivider, null), /* @__PURE__ */ React67.createElement(ObjectFitField, null), /* @__PURE__ */ React67.createElement(StylesField, { bind: "object-position", propDisplayName: (0, import_i18n44.__)("Object position", "elementor") }, /* @__PURE__ */ React67.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(import_editor_controls38.PositionControl, null))))));
|
|
4906
4915
|
};
|
|
4907
4916
|
var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
|
|
4908
|
-
return /* @__PURE__ */
|
|
4917
|
+
return /* @__PURE__ */ React67.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React67.createElement(import_ui38.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React67.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(ControlLabel, null, label)), /* @__PURE__ */ React67.createElement(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(import_editor_controls38.SizeControl, { extendedOptions, anchorRef: rowRef }))));
|
|
4909
4918
|
};
|
|
4910
4919
|
|
|
4911
4920
|
// src/components/style-sections/spacing-section/spacing-section.tsx
|
|
4912
|
-
var
|
|
4913
|
-
var
|
|
4914
|
-
var
|
|
4915
|
-
var MARGIN_LABEL = (0,
|
|
4916
|
-
var PADDING_LABEL = (0,
|
|
4921
|
+
var React68 = __toESM(require("react"));
|
|
4922
|
+
var import_editor_controls39 = require("@elementor/editor-controls");
|
|
4923
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
4924
|
+
var MARGIN_LABEL = (0, import_i18n45.__)("Margin", "elementor");
|
|
4925
|
+
var PADDING_LABEL = (0, import_i18n45.__)("Padding", "elementor");
|
|
4917
4926
|
var SpacingSection = () => {
|
|
4918
4927
|
const { isSiteRtl } = useDirection();
|
|
4919
|
-
return /* @__PURE__ */
|
|
4920
|
-
|
|
4928
|
+
return /* @__PURE__ */ React68.createElement(SectionContent, null, /* @__PURE__ */ React68.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React68.createElement(
|
|
4929
|
+
import_editor_controls39.LinkedDimensionsControl,
|
|
4921
4930
|
{
|
|
4922
4931
|
label: MARGIN_LABEL,
|
|
4923
4932
|
isSiteRtl,
|
|
4924
4933
|
min: -Number.MAX_SAFE_INTEGER
|
|
4925
4934
|
}
|
|
4926
|
-
)), /* @__PURE__ */
|
|
4935
|
+
)), /* @__PURE__ */ React68.createElement(PanelDivider, null), /* @__PURE__ */ React68.createElement(StylesField, { bind: "padding", propDisplayName: PADDING_LABEL }, /* @__PURE__ */ React68.createElement(import_editor_controls39.LinkedDimensionsControl, { label: PADDING_LABEL, isSiteRtl })));
|
|
4927
4936
|
};
|
|
4928
4937
|
|
|
4929
4938
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
4930
|
-
var
|
|
4939
|
+
var React85 = __toESM(require("react"));
|
|
4931
4940
|
|
|
4932
4941
|
// src/components/style-sections/typography-section/column-count-field.tsx
|
|
4933
|
-
var
|
|
4934
|
-
var
|
|
4935
|
-
var
|
|
4936
|
-
var COLUMN_COUNT_LABEL = (0,
|
|
4942
|
+
var React69 = __toESM(require("react"));
|
|
4943
|
+
var import_editor_controls40 = require("@elementor/editor-controls");
|
|
4944
|
+
var import_i18n46 = require("@wordpress/i18n");
|
|
4945
|
+
var COLUMN_COUNT_LABEL = (0, import_i18n46.__)("Columns", "elementor");
|
|
4937
4946
|
var ColumnCountField = () => {
|
|
4938
|
-
return /* @__PURE__ */
|
|
4947
|
+
return /* @__PURE__ */ React69.createElement(StylesField, { bind: "column-count", propDisplayName: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React69.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React69.createElement(import_editor_controls40.NumberControl, { shouldForceInt: true, min: 0, step: 1 })));
|
|
4939
4948
|
};
|
|
4940
4949
|
|
|
4941
4950
|
// src/components/style-sections/typography-section/column-gap-field.tsx
|
|
4942
|
-
var
|
|
4951
|
+
var React70 = __toESM(require("react"));
|
|
4943
4952
|
var import_react32 = require("react");
|
|
4944
|
-
var
|
|
4945
|
-
var
|
|
4946
|
-
var COLUMN_GAP_LABEL = (0,
|
|
4953
|
+
var import_editor_controls41 = require("@elementor/editor-controls");
|
|
4954
|
+
var import_i18n47 = require("@wordpress/i18n");
|
|
4955
|
+
var COLUMN_GAP_LABEL = (0, import_i18n47.__)("Column gap", "elementor");
|
|
4947
4956
|
var ColumnGapField = () => {
|
|
4948
4957
|
const rowRef = (0, import_react32.useRef)(null);
|
|
4949
|
-
return /* @__PURE__ */
|
|
4958
|
+
return /* @__PURE__ */ React70.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React70.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React70.createElement(import_editor_controls41.SizeControl, { anchorRef: rowRef })));
|
|
4950
4959
|
};
|
|
4951
4960
|
|
|
4952
4961
|
// src/components/style-sections/typography-section/font-family-field.tsx
|
|
4953
|
-
var
|
|
4954
|
-
var
|
|
4962
|
+
var React71 = __toESM(require("react"));
|
|
4963
|
+
var import_editor_controls42 = require("@elementor/editor-controls");
|
|
4955
4964
|
var import_editor_ui7 = require("@elementor/editor-ui");
|
|
4956
|
-
var
|
|
4957
|
-
var FONT_FAMILY_LABEL = (0,
|
|
4965
|
+
var import_i18n48 = require("@wordpress/i18n");
|
|
4966
|
+
var FONT_FAMILY_LABEL = (0, import_i18n48.__)("Font family", "elementor");
|
|
4958
4967
|
var FontFamilyField = () => {
|
|
4959
|
-
const fontFamilies = (0,
|
|
4968
|
+
const fontFamilies = (0, import_editor_controls42.useFontFamilies)();
|
|
4960
4969
|
const sectionWidth = (0, import_editor_ui7.useSectionWidth)();
|
|
4961
4970
|
if (fontFamilies.length === 0) {
|
|
4962
4971
|
return null;
|
|
4963
4972
|
}
|
|
4964
|
-
return /* @__PURE__ */
|
|
4965
|
-
|
|
4973
|
+
return /* @__PURE__ */ React71.createElement(StylesField, { bind: "font-family", propDisplayName: FONT_FAMILY_LABEL }, /* @__PURE__ */ React71.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ React71.createElement(
|
|
4974
|
+
import_editor_controls42.FontFamilyControl,
|
|
4966
4975
|
{
|
|
4967
4976
|
fontFamilies,
|
|
4968
4977
|
sectionWidth,
|
|
@@ -4972,196 +4981,196 @@ var FontFamilyField = () => {
|
|
|
4972
4981
|
};
|
|
4973
4982
|
|
|
4974
4983
|
// src/components/style-sections/typography-section/font-size-field.tsx
|
|
4975
|
-
var
|
|
4984
|
+
var React72 = __toESM(require("react"));
|
|
4976
4985
|
var import_react33 = require("react");
|
|
4977
|
-
var
|
|
4978
|
-
var
|
|
4979
|
-
var FONT_SIZE_LABEL = (0,
|
|
4986
|
+
var import_editor_controls43 = require("@elementor/editor-controls");
|
|
4987
|
+
var import_i18n49 = require("@wordpress/i18n");
|
|
4988
|
+
var FONT_SIZE_LABEL = (0, import_i18n49.__)("Font size", "elementor");
|
|
4980
4989
|
var FontSizeField = () => {
|
|
4981
4990
|
const rowRef = (0, import_react33.useRef)(null);
|
|
4982
|
-
return /* @__PURE__ */
|
|
4991
|
+
return /* @__PURE__ */ React72.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React72.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React72.createElement(import_editor_controls43.SizeControl, { anchorRef: rowRef, ariaLabel: FONT_SIZE_LABEL })));
|
|
4983
4992
|
};
|
|
4984
4993
|
|
|
4985
4994
|
// src/components/style-sections/typography-section/font-style-field.tsx
|
|
4986
|
-
var
|
|
4987
|
-
var
|
|
4995
|
+
var React73 = __toESM(require("react"));
|
|
4996
|
+
var import_editor_controls44 = require("@elementor/editor-controls");
|
|
4988
4997
|
var import_icons20 = require("@elementor/icons");
|
|
4989
|
-
var
|
|
4990
|
-
var FONT_STYLE_LABEL = (0,
|
|
4998
|
+
var import_i18n50 = require("@wordpress/i18n");
|
|
4999
|
+
var FONT_STYLE_LABEL = (0, import_i18n50.__)("Font style", "elementor");
|
|
4991
5000
|
var options8 = [
|
|
4992
5001
|
{
|
|
4993
5002
|
value: "normal",
|
|
4994
|
-
label: (0,
|
|
4995
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5003
|
+
label: (0, import_i18n50.__)("Normal", "elementor"),
|
|
5004
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(import_icons20.MinusIcon, { fontSize: size }),
|
|
4996
5005
|
showTooltip: true
|
|
4997
5006
|
},
|
|
4998
5007
|
{
|
|
4999
5008
|
value: "italic",
|
|
5000
|
-
label: (0,
|
|
5001
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5009
|
+
label: (0, import_i18n50.__)("Italic", "elementor"),
|
|
5010
|
+
renderContent: ({ size }) => /* @__PURE__ */ React73.createElement(import_icons20.ItalicIcon, { fontSize: size }),
|
|
5002
5011
|
showTooltip: true
|
|
5003
5012
|
}
|
|
5004
5013
|
];
|
|
5005
5014
|
var FontStyleField = () => {
|
|
5006
|
-
return /* @__PURE__ */
|
|
5015
|
+
return /* @__PURE__ */ React73.createElement(StylesField, { bind: "font-style", propDisplayName: FONT_STYLE_LABEL }, /* @__PURE__ */ React73.createElement(StylesFieldLayout, { label: FONT_STYLE_LABEL }, /* @__PURE__ */ React73.createElement(import_editor_controls44.ToggleControl, { options: options8 })));
|
|
5007
5016
|
};
|
|
5008
5017
|
|
|
5009
5018
|
// src/components/style-sections/typography-section/font-weight-field.tsx
|
|
5010
|
-
var
|
|
5011
|
-
var
|
|
5012
|
-
var
|
|
5013
|
-
var FONT_WEIGHT_LABEL = (0,
|
|
5019
|
+
var React74 = __toESM(require("react"));
|
|
5020
|
+
var import_editor_controls45 = require("@elementor/editor-controls");
|
|
5021
|
+
var import_i18n51 = require("@wordpress/i18n");
|
|
5022
|
+
var FONT_WEIGHT_LABEL = (0, import_i18n51.__)("Font weight", "elementor");
|
|
5014
5023
|
var fontWeightOptions = [
|
|
5015
|
-
{ value: "100", label: (0,
|
|
5016
|
-
{ value: "200", label: (0,
|
|
5017
|
-
{ value: "300", label: (0,
|
|
5018
|
-
{ value: "400", label: (0,
|
|
5019
|
-
{ value: "500", label: (0,
|
|
5020
|
-
{ value: "600", label: (0,
|
|
5021
|
-
{ value: "700", label: (0,
|
|
5022
|
-
{ value: "800", label: (0,
|
|
5023
|
-
{ value: "900", label: (0,
|
|
5024
|
+
{ value: "100", label: (0, import_i18n51.__)("100 - Thin", "elementor") },
|
|
5025
|
+
{ value: "200", label: (0, import_i18n51.__)("200 - Extra light", "elementor") },
|
|
5026
|
+
{ value: "300", label: (0, import_i18n51.__)("300 - Light", "elementor") },
|
|
5027
|
+
{ value: "400", label: (0, import_i18n51.__)("400 - Normal", "elementor") },
|
|
5028
|
+
{ value: "500", label: (0, import_i18n51.__)("500 - Medium", "elementor") },
|
|
5029
|
+
{ value: "600", label: (0, import_i18n51.__)("600 - Semi bold", "elementor") },
|
|
5030
|
+
{ value: "700", label: (0, import_i18n51.__)("700 - Bold", "elementor") },
|
|
5031
|
+
{ value: "800", label: (0, import_i18n51.__)("800 - Extra bold", "elementor") },
|
|
5032
|
+
{ value: "900", label: (0, import_i18n51.__)("900 - Black", "elementor") }
|
|
5024
5033
|
];
|
|
5025
5034
|
var FontWeightField = () => {
|
|
5026
|
-
return /* @__PURE__ */
|
|
5035
|
+
return /* @__PURE__ */ React74.createElement(StylesField, { bind: "font-weight", propDisplayName: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React74.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React74.createElement(import_editor_controls45.SelectControl, { options: fontWeightOptions })));
|
|
5027
5036
|
};
|
|
5028
5037
|
|
|
5029
5038
|
// src/components/style-sections/typography-section/letter-spacing-field.tsx
|
|
5030
|
-
var
|
|
5039
|
+
var React75 = __toESM(require("react"));
|
|
5031
5040
|
var import_react34 = require("react");
|
|
5032
|
-
var
|
|
5033
|
-
var
|
|
5034
|
-
var LETTER_SPACING_LABEL = (0,
|
|
5041
|
+
var import_editor_controls46 = require("@elementor/editor-controls");
|
|
5042
|
+
var import_i18n52 = require("@wordpress/i18n");
|
|
5043
|
+
var LETTER_SPACING_LABEL = (0, import_i18n52.__)("Letter spacing", "elementor");
|
|
5035
5044
|
var LetterSpacingField = () => {
|
|
5036
5045
|
const rowRef = (0, import_react34.useRef)(null);
|
|
5037
|
-
return /* @__PURE__ */
|
|
5046
|
+
return /* @__PURE__ */ React75.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React75.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React75.createElement(import_editor_controls46.SizeControl, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
|
|
5038
5047
|
};
|
|
5039
5048
|
|
|
5040
5049
|
// src/components/style-sections/typography-section/line-height-field.tsx
|
|
5041
|
-
var
|
|
5050
|
+
var React76 = __toESM(require("react"));
|
|
5042
5051
|
var import_react35 = require("react");
|
|
5043
|
-
var
|
|
5044
|
-
var
|
|
5045
|
-
var LINE_HEIGHT_LABEL = (0,
|
|
5052
|
+
var import_editor_controls47 = require("@elementor/editor-controls");
|
|
5053
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
5054
|
+
var LINE_HEIGHT_LABEL = (0, import_i18n53.__)("Line height", "elementor");
|
|
5046
5055
|
var LineHeightField = () => {
|
|
5047
5056
|
const rowRef = (0, import_react35.useRef)(null);
|
|
5048
|
-
return /* @__PURE__ */
|
|
5057
|
+
return /* @__PURE__ */ React76.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React76.createElement(import_editor_controls47.SizeControl, { anchorRef: rowRef })));
|
|
5049
5058
|
};
|
|
5050
5059
|
|
|
5051
5060
|
// src/components/style-sections/typography-section/text-alignment-field.tsx
|
|
5052
|
-
var
|
|
5053
|
-
var
|
|
5061
|
+
var React77 = __toESM(require("react"));
|
|
5062
|
+
var import_editor_controls48 = require("@elementor/editor-controls");
|
|
5054
5063
|
var import_icons21 = require("@elementor/icons");
|
|
5055
5064
|
var import_ui39 = require("@elementor/ui");
|
|
5056
|
-
var
|
|
5057
|
-
var TEXT_ALIGNMENT_LABEL = (0,
|
|
5065
|
+
var import_i18n54 = require("@wordpress/i18n");
|
|
5066
|
+
var TEXT_ALIGNMENT_LABEL = (0, import_i18n54.__)("Text align", "elementor");
|
|
5058
5067
|
var AlignStartIcon = (0, import_ui39.withDirection)(import_icons21.AlignLeftIcon);
|
|
5059
5068
|
var AlignEndIcon = (0, import_ui39.withDirection)(import_icons21.AlignRightIcon);
|
|
5060
5069
|
var options9 = [
|
|
5061
5070
|
{
|
|
5062
5071
|
value: "start",
|
|
5063
|
-
label: (0,
|
|
5064
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5072
|
+
label: (0, import_i18n54.__)("Start", "elementor"),
|
|
5073
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(AlignStartIcon, { fontSize: size }),
|
|
5065
5074
|
showTooltip: true
|
|
5066
5075
|
},
|
|
5067
5076
|
{
|
|
5068
5077
|
value: "center",
|
|
5069
|
-
label: (0,
|
|
5070
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5078
|
+
label: (0, import_i18n54.__)("Center", "elementor"),
|
|
5079
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.AlignCenterIcon, { fontSize: size }),
|
|
5071
5080
|
showTooltip: true
|
|
5072
5081
|
},
|
|
5073
5082
|
{
|
|
5074
5083
|
value: "end",
|
|
5075
|
-
label: (0,
|
|
5076
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5084
|
+
label: (0, import_i18n54.__)("End", "elementor"),
|
|
5085
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(AlignEndIcon, { fontSize: size }),
|
|
5077
5086
|
showTooltip: true
|
|
5078
5087
|
},
|
|
5079
5088
|
{
|
|
5080
5089
|
value: "justify",
|
|
5081
|
-
label: (0,
|
|
5082
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5090
|
+
label: (0, import_i18n54.__)("Justify", "elementor"),
|
|
5091
|
+
renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.AlignJustifiedIcon, { fontSize: size }),
|
|
5083
5092
|
showTooltip: true
|
|
5084
5093
|
}
|
|
5085
5094
|
];
|
|
5086
5095
|
var TextAlignmentField = () => {
|
|
5087
|
-
return /* @__PURE__ */
|
|
5096
|
+
return /* @__PURE__ */ React77.createElement(StylesField, { bind: "text-align", propDisplayName: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React77.createElement(UiProviders, null, /* @__PURE__ */ React77.createElement(StylesFieldLayout, { label: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ React77.createElement(import_editor_controls48.ToggleControl, { options: options9 }))));
|
|
5088
5097
|
};
|
|
5089
5098
|
|
|
5090
5099
|
// src/components/style-sections/typography-section/text-color-field.tsx
|
|
5091
|
-
var
|
|
5092
|
-
var
|
|
5093
|
-
var
|
|
5094
|
-
var TEXT_COLOR_LABEL = (0,
|
|
5100
|
+
var React78 = __toESM(require("react"));
|
|
5101
|
+
var import_editor_controls49 = require("@elementor/editor-controls");
|
|
5102
|
+
var import_i18n55 = require("@wordpress/i18n");
|
|
5103
|
+
var TEXT_COLOR_LABEL = (0, import_i18n55.__)("Text color", "elementor");
|
|
5095
5104
|
var TextColorField = () => {
|
|
5096
|
-
return /* @__PURE__ */
|
|
5105
|
+
return /* @__PURE__ */ React78.createElement(StylesField, { bind: "color", propDisplayName: TEXT_COLOR_LABEL }, /* @__PURE__ */ React78.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ React78.createElement(import_editor_controls49.ColorControl, { id: "text-color-control" })));
|
|
5097
5106
|
};
|
|
5098
5107
|
|
|
5099
5108
|
// src/components/style-sections/typography-section/text-decoration-field.tsx
|
|
5100
|
-
var
|
|
5101
|
-
var
|
|
5109
|
+
var React79 = __toESM(require("react"));
|
|
5110
|
+
var import_editor_controls50 = require("@elementor/editor-controls");
|
|
5102
5111
|
var import_icons22 = require("@elementor/icons");
|
|
5103
|
-
var
|
|
5104
|
-
var TEXT_DECORATION_LABEL = (0,
|
|
5112
|
+
var import_i18n56 = require("@wordpress/i18n");
|
|
5113
|
+
var TEXT_DECORATION_LABEL = (0, import_i18n56.__)("Line decoration", "elementor");
|
|
5105
5114
|
var options10 = [
|
|
5106
5115
|
{
|
|
5107
5116
|
value: "none",
|
|
5108
|
-
label: (0,
|
|
5109
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5117
|
+
label: (0, import_i18n56.__)("None", "elementor"),
|
|
5118
|
+
renderContent: ({ size }) => /* @__PURE__ */ React79.createElement(import_icons22.MinusIcon, { fontSize: size }),
|
|
5110
5119
|
showTooltip: true,
|
|
5111
5120
|
exclusive: true
|
|
5112
5121
|
},
|
|
5113
5122
|
{
|
|
5114
5123
|
value: "underline",
|
|
5115
|
-
label: (0,
|
|
5116
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5124
|
+
label: (0, import_i18n56.__)("Underline", "elementor"),
|
|
5125
|
+
renderContent: ({ size }) => /* @__PURE__ */ React79.createElement(import_icons22.UnderlineIcon, { fontSize: size }),
|
|
5117
5126
|
showTooltip: true
|
|
5118
5127
|
},
|
|
5119
5128
|
{
|
|
5120
5129
|
value: "line-through",
|
|
5121
|
-
label: (0,
|
|
5122
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5130
|
+
label: (0, import_i18n56.__)("Line-through", "elementor"),
|
|
5131
|
+
renderContent: ({ size }) => /* @__PURE__ */ React79.createElement(import_icons22.StrikethroughIcon, { fontSize: size }),
|
|
5123
5132
|
showTooltip: true
|
|
5124
5133
|
},
|
|
5125
5134
|
{
|
|
5126
5135
|
value: "overline",
|
|
5127
|
-
label: (0,
|
|
5128
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5136
|
+
label: (0, import_i18n56.__)("Overline", "elementor"),
|
|
5137
|
+
renderContent: ({ size }) => /* @__PURE__ */ React79.createElement(import_icons22.OverlineIcon, { fontSize: size }),
|
|
5129
5138
|
showTooltip: true
|
|
5130
5139
|
}
|
|
5131
5140
|
];
|
|
5132
|
-
var TextDecorationField = () => /* @__PURE__ */
|
|
5141
|
+
var TextDecorationField = () => /* @__PURE__ */ React79.createElement(StylesField, { bind: "text-decoration", propDisplayName: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React79.createElement(StylesFieldLayout, { label: TEXT_DECORATION_LABEL }, /* @__PURE__ */ React79.createElement(import_editor_controls50.ToggleControl, { options: options10, exclusive: false })));
|
|
5133
5142
|
|
|
5134
5143
|
// src/components/style-sections/typography-section/text-direction-field.tsx
|
|
5135
|
-
var
|
|
5136
|
-
var
|
|
5144
|
+
var React80 = __toESM(require("react"));
|
|
5145
|
+
var import_editor_controls51 = require("@elementor/editor-controls");
|
|
5137
5146
|
var import_icons23 = require("@elementor/icons");
|
|
5138
|
-
var
|
|
5139
|
-
var TEXT_DIRECTION_LABEL = (0,
|
|
5147
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
5148
|
+
var TEXT_DIRECTION_LABEL = (0, import_i18n57.__)("Direction", "elementor");
|
|
5140
5149
|
var options11 = [
|
|
5141
5150
|
{
|
|
5142
5151
|
value: "ltr",
|
|
5143
|
-
label: (0,
|
|
5144
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5152
|
+
label: (0, import_i18n57.__)("Left to right", "elementor"),
|
|
5153
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(import_icons23.TextDirectionLtrIcon, { fontSize: size }),
|
|
5145
5154
|
showTooltip: true
|
|
5146
5155
|
},
|
|
5147
5156
|
{
|
|
5148
5157
|
value: "rtl",
|
|
5149
|
-
label: (0,
|
|
5150
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5158
|
+
label: (0, import_i18n57.__)("Right to left", "elementor"),
|
|
5159
|
+
renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(import_icons23.TextDirectionRtlIcon, { fontSize: size }),
|
|
5151
5160
|
showTooltip: true
|
|
5152
5161
|
}
|
|
5153
5162
|
];
|
|
5154
5163
|
var TextDirectionField = () => {
|
|
5155
|
-
return /* @__PURE__ */
|
|
5164
|
+
return /* @__PURE__ */ React80.createElement(StylesField, { bind: "direction", propDisplayName: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React80.createElement(StylesFieldLayout, { label: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ React80.createElement(import_editor_controls51.ToggleControl, { options: options11 })));
|
|
5156
5165
|
};
|
|
5157
5166
|
|
|
5158
5167
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
5159
|
-
var
|
|
5160
|
-
var
|
|
5161
|
-
var
|
|
5168
|
+
var React82 = __toESM(require("react"));
|
|
5169
|
+
var import_editor_controls52 = require("@elementor/editor-controls");
|
|
5170
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
5162
5171
|
|
|
5163
5172
|
// src/components/add-or-remove-content.tsx
|
|
5164
|
-
var
|
|
5173
|
+
var React81 = __toESM(require("react"));
|
|
5165
5174
|
var import_icons24 = require("@elementor/icons");
|
|
5166
5175
|
var import_ui40 = require("@elementor/ui");
|
|
5167
5176
|
var SIZE = "tiny";
|
|
@@ -5173,7 +5182,7 @@ var AddOrRemoveContent = ({
|
|
|
5173
5182
|
disabled,
|
|
5174
5183
|
renderLabel
|
|
5175
5184
|
}) => {
|
|
5176
|
-
return /* @__PURE__ */
|
|
5185
|
+
return /* @__PURE__ */ React81.createElement(SectionContent, null, /* @__PURE__ */ React81.createElement(
|
|
5177
5186
|
import_ui40.Stack,
|
|
5178
5187
|
{
|
|
5179
5188
|
direction: "row",
|
|
@@ -5184,8 +5193,8 @@ var AddOrRemoveContent = ({
|
|
|
5184
5193
|
}
|
|
5185
5194
|
},
|
|
5186
5195
|
renderLabel(),
|
|
5187
|
-
isAdded ? /* @__PURE__ */
|
|
5188
|
-
), /* @__PURE__ */
|
|
5196
|
+
isAdded ? /* @__PURE__ */ React81.createElement(import_ui40.IconButton, { size: SIZE, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React81.createElement(import_icons24.MinusIcon, { fontSize: SIZE })) : /* @__PURE__ */ React81.createElement(import_ui40.IconButton, { size: SIZE, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React81.createElement(import_icons24.PlusIcon, { fontSize: SIZE }))
|
|
5197
|
+
), /* @__PURE__ */ React81.createElement(import_ui40.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React81.createElement(SectionContent, null, children)));
|
|
5189
5198
|
};
|
|
5190
5199
|
|
|
5191
5200
|
// src/components/style-sections/typography-section/text-stroke-field.tsx
|
|
@@ -5205,7 +5214,7 @@ var initTextStroke = {
|
|
|
5205
5214
|
}
|
|
5206
5215
|
}
|
|
5207
5216
|
};
|
|
5208
|
-
var TEXT_STROKE_LABEL = (0,
|
|
5217
|
+
var TEXT_STROKE_LABEL = (0, import_i18n58.__)("Text stroke", "elementor");
|
|
5209
5218
|
var TextStrokeField = () => {
|
|
5210
5219
|
const { value, setValue, canEdit } = useStylesField("stroke", {
|
|
5211
5220
|
history: { propDisplayName: TEXT_STROKE_LABEL }
|
|
@@ -5217,67 +5226,67 @@ var TextStrokeField = () => {
|
|
|
5217
5226
|
setValue(null);
|
|
5218
5227
|
};
|
|
5219
5228
|
const hasTextStroke = Boolean(value);
|
|
5220
|
-
return /* @__PURE__ */
|
|
5229
|
+
return /* @__PURE__ */ React82.createElement(StylesField, { bind: "stroke", propDisplayName: TEXT_STROKE_LABEL }, /* @__PURE__ */ React82.createElement(
|
|
5221
5230
|
AddOrRemoveContent,
|
|
5222
5231
|
{
|
|
5223
5232
|
isAdded: hasTextStroke,
|
|
5224
5233
|
onAdd: addTextStroke,
|
|
5225
5234
|
onRemove: removeTextStroke,
|
|
5226
5235
|
disabled: !canEdit,
|
|
5227
|
-
renderLabel: () => /* @__PURE__ */
|
|
5236
|
+
renderLabel: () => /* @__PURE__ */ React82.createElement(ControlLabel, null, TEXT_STROKE_LABEL)
|
|
5228
5237
|
},
|
|
5229
|
-
/* @__PURE__ */
|
|
5238
|
+
/* @__PURE__ */ React82.createElement(import_editor_controls52.StrokeControl, null)
|
|
5230
5239
|
));
|
|
5231
5240
|
};
|
|
5232
5241
|
|
|
5233
5242
|
// src/components/style-sections/typography-section/transform-field.tsx
|
|
5234
|
-
var
|
|
5235
|
-
var
|
|
5243
|
+
var React83 = __toESM(require("react"));
|
|
5244
|
+
var import_editor_controls53 = require("@elementor/editor-controls");
|
|
5236
5245
|
var import_icons25 = require("@elementor/icons");
|
|
5237
|
-
var
|
|
5238
|
-
var TEXT_TRANSFORM_LABEL = (0,
|
|
5246
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
5247
|
+
var TEXT_TRANSFORM_LABEL = (0, import_i18n59.__)("Text transform", "elementor");
|
|
5239
5248
|
var options12 = [
|
|
5240
5249
|
{
|
|
5241
5250
|
value: "none",
|
|
5242
|
-
label: (0,
|
|
5243
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5251
|
+
label: (0, import_i18n59.__)("None", "elementor"),
|
|
5252
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(import_icons25.MinusIcon, { fontSize: size }),
|
|
5244
5253
|
showTooltip: true
|
|
5245
5254
|
},
|
|
5246
5255
|
{
|
|
5247
5256
|
value: "capitalize",
|
|
5248
|
-
label: (0,
|
|
5249
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5257
|
+
label: (0, import_i18n59.__)("Capitalize", "elementor"),
|
|
5258
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(import_icons25.LetterCaseIcon, { fontSize: size }),
|
|
5250
5259
|
showTooltip: true
|
|
5251
5260
|
},
|
|
5252
5261
|
{
|
|
5253
5262
|
value: "uppercase",
|
|
5254
|
-
label: (0,
|
|
5255
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5263
|
+
label: (0, import_i18n59.__)("Uppercase", "elementor"),
|
|
5264
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(import_icons25.LetterCaseUpperIcon, { fontSize: size }),
|
|
5256
5265
|
showTooltip: true
|
|
5257
5266
|
},
|
|
5258
5267
|
{
|
|
5259
5268
|
value: "lowercase",
|
|
5260
|
-
label: (0,
|
|
5261
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
5269
|
+
label: (0, import_i18n59.__)("Lowercase", "elementor"),
|
|
5270
|
+
renderContent: ({ size }) => /* @__PURE__ */ React83.createElement(import_icons25.LetterCaseLowerIcon, { fontSize: size }),
|
|
5262
5271
|
showTooltip: true
|
|
5263
5272
|
}
|
|
5264
5273
|
];
|
|
5265
|
-
var TransformField = () => /* @__PURE__ */
|
|
5274
|
+
var TransformField = () => /* @__PURE__ */ React83.createElement(StylesField, { bind: "text-transform", propDisplayName: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React83.createElement(StylesFieldLayout, { label: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ React83.createElement(import_editor_controls53.ToggleControl, { options: options12 })));
|
|
5266
5275
|
|
|
5267
5276
|
// src/components/style-sections/typography-section/word-spacing-field.tsx
|
|
5268
|
-
var
|
|
5277
|
+
var React84 = __toESM(require("react"));
|
|
5269
5278
|
var import_react36 = require("react");
|
|
5270
|
-
var
|
|
5271
|
-
var
|
|
5272
|
-
var WORD_SPACING_LABEL = (0,
|
|
5279
|
+
var import_editor_controls54 = require("@elementor/editor-controls");
|
|
5280
|
+
var import_i18n60 = require("@wordpress/i18n");
|
|
5281
|
+
var WORD_SPACING_LABEL = (0, import_i18n60.__)("Word spacing", "elementor");
|
|
5273
5282
|
var WordSpacingField = () => {
|
|
5274
5283
|
const rowRef = (0, import_react36.useRef)(null);
|
|
5275
|
-
return /* @__PURE__ */
|
|
5284
|
+
return /* @__PURE__ */ React84.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React84.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React84.createElement(import_editor_controls54.SizeControl, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
|
|
5276
5285
|
};
|
|
5277
5286
|
|
|
5278
5287
|
// src/components/style-sections/typography-section/typography-section.tsx
|
|
5279
5288
|
var TypographySection = () => {
|
|
5280
|
-
return /* @__PURE__ */
|
|
5289
|
+
return /* @__PURE__ */ React85.createElement(SectionContent, null, /* @__PURE__ */ React85.createElement(FontFamilyField, null), /* @__PURE__ */ React85.createElement(FontWeightField, null), /* @__PURE__ */ React85.createElement(FontSizeField, null), /* @__PURE__ */ React85.createElement(PanelDivider, null), /* @__PURE__ */ React85.createElement(TextAlignmentField, null), /* @__PURE__ */ React85.createElement(TextColorField, null), /* @__PURE__ */ React85.createElement(
|
|
5281
5290
|
StyleTabCollapsibleContent,
|
|
5282
5291
|
{
|
|
5283
5292
|
fields: [
|
|
@@ -5292,18 +5301,18 @@ var TypographySection = () => {
|
|
|
5292
5301
|
"stroke"
|
|
5293
5302
|
]
|
|
5294
5303
|
},
|
|
5295
|
-
/* @__PURE__ */
|
|
5304
|
+
/* @__PURE__ */ React85.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ React85.createElement(LineHeightField, null), /* @__PURE__ */ React85.createElement(LetterSpacingField, null), /* @__PURE__ */ React85.createElement(WordSpacingField, null), /* @__PURE__ */ React85.createElement(ColumnCountField, null), /* @__PURE__ */ React85.createElement(ColumnGapField, null), /* @__PURE__ */ React85.createElement(PanelDivider, null), /* @__PURE__ */ React85.createElement(TextDecorationField, null), /* @__PURE__ */ React85.createElement(TransformField, null), /* @__PURE__ */ React85.createElement(TextDirectionField, null), /* @__PURE__ */ React85.createElement(FontStyleField, null), /* @__PURE__ */ React85.createElement(TextStrokeField, null))
|
|
5296
5305
|
));
|
|
5297
5306
|
};
|
|
5298
5307
|
|
|
5299
5308
|
// src/components/style-tab-section.tsx
|
|
5300
|
-
var
|
|
5309
|
+
var React86 = __toESM(require("react"));
|
|
5301
5310
|
var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
5302
5311
|
const { component, name, title, action } = section;
|
|
5303
5312
|
const tabDefaults = useDefaultPanelSettings();
|
|
5304
|
-
const SectionComponent = component || (() => /* @__PURE__ */
|
|
5313
|
+
const SectionComponent = component || (() => /* @__PURE__ */ React86.createElement(React86.Fragment, null));
|
|
5305
5314
|
const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes(name);
|
|
5306
|
-
return /* @__PURE__ */
|
|
5315
|
+
return /* @__PURE__ */ React86.createElement(
|
|
5307
5316
|
Section,
|
|
5308
5317
|
{
|
|
5309
5318
|
title,
|
|
@@ -5312,7 +5321,7 @@ var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => {
|
|
|
5312
5321
|
unmountOnExit,
|
|
5313
5322
|
action
|
|
5314
5323
|
},
|
|
5315
|
-
/* @__PURE__ */
|
|
5324
|
+
/* @__PURE__ */ React86.createElement(SectionComponent, null)
|
|
5316
5325
|
);
|
|
5317
5326
|
};
|
|
5318
5327
|
|
|
@@ -5334,7 +5343,7 @@ var StyleTab = () => {
|
|
|
5334
5343
|
if (!currentClassesProp) {
|
|
5335
5344
|
return null;
|
|
5336
5345
|
}
|
|
5337
|
-
return /* @__PURE__ */
|
|
5346
|
+
return /* @__PURE__ */ React87.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React87.createElement(
|
|
5338
5347
|
StyleProvider,
|
|
5339
5348
|
{
|
|
5340
5349
|
meta: { breakpoint, state: activeStyleState },
|
|
@@ -5345,13 +5354,13 @@ var StyleTab = () => {
|
|
|
5345
5354
|
},
|
|
5346
5355
|
setMetaState: setActiveStyleState
|
|
5347
5356
|
},
|
|
5348
|
-
/* @__PURE__ */
|
|
5357
|
+
/* @__PURE__ */ React87.createElement(import_session8.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React87.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React87.createElement(ClassesHeader, null, /* @__PURE__ */ React87.createElement(CssClassSelector, null), /* @__PURE__ */ React87.createElement(import_ui41.Divider, null)), /* @__PURE__ */ React87.createElement(SectionsList, null, /* @__PURE__ */ React87.createElement(
|
|
5349
5358
|
StyleTabSection,
|
|
5350
5359
|
{
|
|
5351
5360
|
section: {
|
|
5352
5361
|
component: LayoutSection,
|
|
5353
5362
|
name: "Layout",
|
|
5354
|
-
title: (0,
|
|
5363
|
+
title: (0, import_i18n61.__)("Layout", "elementor")
|
|
5355
5364
|
},
|
|
5356
5365
|
fields: [
|
|
5357
5366
|
"display",
|
|
@@ -5367,23 +5376,23 @@ var StyleTab = () => {
|
|
|
5367
5376
|
"grid-row"
|
|
5368
5377
|
]
|
|
5369
5378
|
}
|
|
5370
|
-
), /* @__PURE__ */
|
|
5379
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5371
5380
|
StyleTabSection,
|
|
5372
5381
|
{
|
|
5373
5382
|
section: {
|
|
5374
5383
|
component: SpacingSection,
|
|
5375
5384
|
name: "Spacing",
|
|
5376
|
-
title: (0,
|
|
5385
|
+
title: (0, import_i18n61.__)("Spacing", "elementor")
|
|
5377
5386
|
},
|
|
5378
5387
|
fields: ["margin", "padding"]
|
|
5379
5388
|
}
|
|
5380
|
-
), /* @__PURE__ */
|
|
5389
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5381
5390
|
StyleTabSection,
|
|
5382
5391
|
{
|
|
5383
5392
|
section: {
|
|
5384
5393
|
component: SizeSection,
|
|
5385
5394
|
name: "Size",
|
|
5386
|
-
title: (0,
|
|
5395
|
+
title: (0, import_i18n61.__)("Size", "elementor")
|
|
5387
5396
|
},
|
|
5388
5397
|
fields: [
|
|
5389
5398
|
"width",
|
|
@@ -5397,23 +5406,23 @@ var StyleTab = () => {
|
|
|
5397
5406
|
"object-fit"
|
|
5398
5407
|
]
|
|
5399
5408
|
}
|
|
5400
|
-
), /* @__PURE__ */
|
|
5409
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5401
5410
|
StyleTabSection,
|
|
5402
5411
|
{
|
|
5403
5412
|
section: {
|
|
5404
5413
|
component: PositionSection,
|
|
5405
5414
|
name: "Position",
|
|
5406
|
-
title: (0,
|
|
5415
|
+
title: (0, import_i18n61.__)("Position", "elementor")
|
|
5407
5416
|
},
|
|
5408
5417
|
fields: ["position", "z-index", "scroll-margin-top"]
|
|
5409
5418
|
}
|
|
5410
|
-
), /* @__PURE__ */
|
|
5419
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5411
5420
|
StyleTabSection,
|
|
5412
5421
|
{
|
|
5413
5422
|
section: {
|
|
5414
5423
|
component: TypographySection,
|
|
5415
5424
|
name: "Typography",
|
|
5416
|
-
title: (0,
|
|
5425
|
+
title: (0, import_i18n61.__)("Typography", "elementor")
|
|
5417
5426
|
},
|
|
5418
5427
|
fields: [
|
|
5419
5428
|
"font-family",
|
|
@@ -5432,33 +5441,33 @@ var StyleTab = () => {
|
|
|
5432
5441
|
"stroke"
|
|
5433
5442
|
]
|
|
5434
5443
|
}
|
|
5435
|
-
), /* @__PURE__ */
|
|
5444
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5436
5445
|
StyleTabSection,
|
|
5437
5446
|
{
|
|
5438
5447
|
section: {
|
|
5439
5448
|
component: BackgroundSection,
|
|
5440
5449
|
name: "Background",
|
|
5441
|
-
title: (0,
|
|
5450
|
+
title: (0, import_i18n61.__)("Background", "elementor")
|
|
5442
5451
|
},
|
|
5443
5452
|
fields: ["background"]
|
|
5444
5453
|
}
|
|
5445
|
-
), /* @__PURE__ */
|
|
5454
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5446
5455
|
StyleTabSection,
|
|
5447
5456
|
{
|
|
5448
5457
|
section: {
|
|
5449
5458
|
component: BorderSection,
|
|
5450
5459
|
name: "Border",
|
|
5451
|
-
title: (0,
|
|
5460
|
+
title: (0, import_i18n61.__)("Border", "elementor")
|
|
5452
5461
|
},
|
|
5453
5462
|
fields: ["border-radius", "border-width", "border-color", "border-style"]
|
|
5454
5463
|
}
|
|
5455
|
-
), /* @__PURE__ */
|
|
5464
|
+
), /* @__PURE__ */ React87.createElement(
|
|
5456
5465
|
StyleTabSection,
|
|
5457
5466
|
{
|
|
5458
5467
|
section: {
|
|
5459
5468
|
component: EffectsSection,
|
|
5460
5469
|
name: "Effects",
|
|
5461
|
-
title: (0,
|
|
5470
|
+
title: (0, import_i18n61.__)("Effects", "elementor")
|
|
5462
5471
|
},
|
|
5463
5472
|
fields: [
|
|
5464
5473
|
"mix-blend-mode",
|
|
@@ -5471,12 +5480,12 @@ var StyleTab = () => {
|
|
|
5471
5480
|
"transition"
|
|
5472
5481
|
]
|
|
5473
5482
|
}
|
|
5474
|
-
), /* @__PURE__ */
|
|
5483
|
+
), /* @__PURE__ */ React87.createElement(StyleTabSlot, null)), /* @__PURE__ */ React87.createElement(import_ui41.Box, { sx: { height: "150px" } })))
|
|
5475
5484
|
));
|
|
5476
5485
|
};
|
|
5477
5486
|
function ClassesHeader({ children }) {
|
|
5478
5487
|
const scrollDirection = useScrollDirection();
|
|
5479
|
-
return /* @__PURE__ */
|
|
5488
|
+
return /* @__PURE__ */ React87.createElement(import_ui41.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
|
|
5480
5489
|
}
|
|
5481
5490
|
function useCurrentClassesProp() {
|
|
5482
5491
|
const { elementType } = useElement();
|
|
@@ -5495,7 +5504,7 @@ var EditingPanelTabs = () => {
|
|
|
5495
5504
|
return (
|
|
5496
5505
|
// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
|
|
5497
5506
|
// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
|
|
5498
|
-
/* @__PURE__ */
|
|
5507
|
+
/* @__PURE__ */ React88.createElement(import_react38.Fragment, { key: element.id }, /* @__PURE__ */ React88.createElement(PanelTabContent, null))
|
|
5499
5508
|
);
|
|
5500
5509
|
};
|
|
5501
5510
|
var PanelTabContent = () => {
|
|
@@ -5507,7 +5516,7 @@ var PanelTabContent = () => {
|
|
|
5507
5516
|
const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
|
|
5508
5517
|
const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;
|
|
5509
5518
|
const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui42.useTabs)(currentTab);
|
|
5510
|
-
return /* @__PURE__ */
|
|
5519
|
+
return /* @__PURE__ */ React88.createElement(ScrollProvider, null, /* @__PURE__ */ React88.createElement(import_ui42.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(import_ui42.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React88.createElement(
|
|
5511
5520
|
import_ui42.Tabs,
|
|
5512
5521
|
{
|
|
5513
5522
|
variant: "fullWidth",
|
|
@@ -5519,10 +5528,10 @@ var PanelTabContent = () => {
|
|
|
5519
5528
|
setCurrentTab(newValue);
|
|
5520
5529
|
}
|
|
5521
5530
|
},
|
|
5522
|
-
!isPromotedElement && /* @__PURE__ */
|
|
5523
|
-
/* @__PURE__ */
|
|
5524
|
-
isInteractionsActive && /* @__PURE__ */
|
|
5525
|
-
), /* @__PURE__ */
|
|
5531
|
+
!isPromotedElement && /* @__PURE__ */ React88.createElement(import_ui42.Tab, { label: (0, import_i18n62.__)("General", "elementor"), ...getTabProps("settings") }),
|
|
5532
|
+
/* @__PURE__ */ React88.createElement(import_ui42.Tab, { label: (0, import_i18n62.__)("Style", "elementor"), ...getTabProps("style") }),
|
|
5533
|
+
isInteractionsActive && /* @__PURE__ */ React88.createElement(import_ui42.Tab, { label: (0, import_i18n62.__)("Interactions", "elementor"), ...getTabProps("interactions") })
|
|
5534
|
+
), /* @__PURE__ */ React88.createElement(import_ui42.Divider, null)), !isPromotedElement && /* @__PURE__ */ React88.createElement(import_ui42.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React88.createElement(SettingsTab, null)), /* @__PURE__ */ React88.createElement(import_ui42.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React88.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React88.createElement(import_ui42.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React88.createElement(InteractionsTab, null))));
|
|
5526
5535
|
};
|
|
5527
5536
|
|
|
5528
5537
|
// src/components/editing-panel.tsx
|
|
@@ -5530,18 +5539,18 @@ var { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = (0, import_
|
|
|
5530
5539
|
var { useMenuItems } = import_menus.controlActionsMenu;
|
|
5531
5540
|
var EditingPanel = () => {
|
|
5532
5541
|
const { element, elementType, settings } = (0, import_editor_elements13.useSelectedElementSettings)();
|
|
5533
|
-
const controlReplacements = (0,
|
|
5542
|
+
const controlReplacements = (0, import_editor_controls55.getControlReplacements)();
|
|
5534
5543
|
const menuItems = useMenuItems().default;
|
|
5535
5544
|
if (!element || !elementType) {
|
|
5536
5545
|
return null;
|
|
5537
5546
|
}
|
|
5538
|
-
const panelTitle = (0,
|
|
5547
|
+
const panelTitle = (0, import_i18n63.__)("Edit %s", "elementor").replace("%s", elementType.title);
|
|
5539
5548
|
const { component: ReplacementComponent } = getEditingPanelReplacement(element, elementType) ?? {};
|
|
5540
|
-
let panelContent = /* @__PURE__ */
|
|
5549
|
+
let panelContent = /* @__PURE__ */ React89.createElement(React89.Fragment, null, /* @__PURE__ */ React89.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React89.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React89.createElement(import_icons26.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React89.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React89.createElement(EditingPanelTabs, null)));
|
|
5541
5550
|
if (ReplacementComponent) {
|
|
5542
|
-
panelContent = /* @__PURE__ */
|
|
5551
|
+
panelContent = /* @__PURE__ */ React89.createElement(ReplacementComponent, null);
|
|
5543
5552
|
}
|
|
5544
|
-
return /* @__PURE__ */
|
|
5553
|
+
return /* @__PURE__ */ React89.createElement(import_ui43.ErrorBoundary, { fallback: /* @__PURE__ */ React89.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React89.createElement(import_session9.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React89.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React89.createElement(import_editor_controls55.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React89.createElement(import_editor_controls55.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React89.createElement(ElementProvider, { element, elementType, settings }, /* @__PURE__ */ React89.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React89.createElement(PanelHeaderTopSlot, null), panelContent)))))));
|
|
5545
5554
|
};
|
|
5546
5555
|
|
|
5547
5556
|
// src/init.ts
|
|
@@ -5590,24 +5599,24 @@ var EditingPanelHooks = () => {
|
|
|
5590
5599
|
};
|
|
5591
5600
|
|
|
5592
5601
|
// src/components/promotions/init.tsx
|
|
5593
|
-
var
|
|
5602
|
+
var import_editor_controls57 = require("@elementor/editor-controls");
|
|
5594
5603
|
|
|
5595
5604
|
// src/components/promotions/custom-css.tsx
|
|
5596
|
-
var
|
|
5605
|
+
var React90 = __toESM(require("react"));
|
|
5597
5606
|
var import_react40 = require("react");
|
|
5598
|
-
var
|
|
5599
|
-
var
|
|
5607
|
+
var import_editor_controls56 = require("@elementor/editor-controls");
|
|
5608
|
+
var import_i18n64 = require("@wordpress/i18n");
|
|
5600
5609
|
var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
|
|
5601
5610
|
var CustomCssSection = () => {
|
|
5602
5611
|
const triggerRef = (0, import_react40.useRef)(null);
|
|
5603
|
-
return /* @__PURE__ */
|
|
5612
|
+
return /* @__PURE__ */ React90.createElement(
|
|
5604
5613
|
StyleTabSection,
|
|
5605
5614
|
{
|
|
5606
5615
|
section: {
|
|
5607
5616
|
name: "Custom CSS",
|
|
5608
|
-
title: (0,
|
|
5617
|
+
title: (0, import_i18n64.__)("Custom CSS", "elementor"),
|
|
5609
5618
|
action: {
|
|
5610
|
-
component: /* @__PURE__ */
|
|
5619
|
+
component: /* @__PURE__ */ React90.createElement(import_editor_controls56.PromotionTrigger, { ref: triggerRef, promotionKey: "customCss", trackingData: TRACKING_DATA }),
|
|
5611
5620
|
onClick: () => triggerRef.current?.toggle()
|
|
5612
5621
|
}
|
|
5613
5622
|
}
|
|
@@ -5623,19 +5632,19 @@ var init = () => {
|
|
|
5623
5632
|
options: { overwrite: true }
|
|
5624
5633
|
});
|
|
5625
5634
|
if (!window.elementorPro) {
|
|
5626
|
-
controlsRegistry.register("attributes",
|
|
5627
|
-
controlsRegistry.register("display-conditions",
|
|
5635
|
+
controlsRegistry.register("attributes", import_editor_controls57.AttributesControl, "two-columns");
|
|
5636
|
+
controlsRegistry.register("display-conditions", import_editor_controls57.DisplayConditionsControl, "two-columns");
|
|
5628
5637
|
}
|
|
5629
5638
|
};
|
|
5630
5639
|
|
|
5631
5640
|
// src/controls-registry/element-controls/tabs-control/tabs-control.tsx
|
|
5632
|
-
var
|
|
5633
|
-
var
|
|
5641
|
+
var React91 = __toESM(require("react"));
|
|
5642
|
+
var import_editor_controls59 = require("@elementor/editor-controls");
|
|
5634
5643
|
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
5635
5644
|
var import_editor_props17 = require("@elementor/editor-props");
|
|
5636
5645
|
var import_icons27 = require("@elementor/icons");
|
|
5637
5646
|
var import_ui44 = require("@elementor/ui");
|
|
5638
|
-
var
|
|
5647
|
+
var import_i18n66 = require("@wordpress/i18n");
|
|
5639
5648
|
|
|
5640
5649
|
// src/controls-registry/element-controls/get-element-by-type.ts
|
|
5641
5650
|
var import_editor_elements15 = require("@elementor/editor-elements");
|
|
@@ -5651,14 +5660,14 @@ var getElementByType = (elementId, type) => {
|
|
|
5651
5660
|
};
|
|
5652
5661
|
|
|
5653
5662
|
// src/controls-registry/element-controls/tabs-control/use-actions.ts
|
|
5654
|
-
var
|
|
5663
|
+
var import_editor_controls58 = require("@elementor/editor-controls");
|
|
5655
5664
|
var import_editor_elements16 = require("@elementor/editor-elements");
|
|
5656
5665
|
var import_editor_props16 = require("@elementor/editor-props");
|
|
5657
|
-
var
|
|
5666
|
+
var import_i18n65 = require("@wordpress/i18n");
|
|
5658
5667
|
var TAB_ELEMENT_TYPE = "e-tab";
|
|
5659
5668
|
var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
|
|
5660
5669
|
var useActions = () => {
|
|
5661
|
-
const { value, setValue: setDefaultActiveTab } = (0,
|
|
5670
|
+
const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls58.useBoundProp)(import_editor_props16.numberPropTypeUtil);
|
|
5662
5671
|
const defaultActiveTab = value ?? 0;
|
|
5663
5672
|
const duplicateItem = ({
|
|
5664
5673
|
items: items3,
|
|
@@ -5677,7 +5686,7 @@ var useActions = () => {
|
|
|
5677
5686
|
}
|
|
5678
5687
|
(0, import_editor_elements16.duplicateElements)({
|
|
5679
5688
|
elementIds: [tabId, tabContentId],
|
|
5680
|
-
title: (0,
|
|
5689
|
+
title: (0, import_i18n65.__)("Duplicate Tab", "elementor"),
|
|
5681
5690
|
onDuplicateElements: () => {
|
|
5682
5691
|
if (newDefault !== defaultActiveTab) {
|
|
5683
5692
|
setDefaultActiveTab(newDefault, {}, { withHistory: false });
|
|
@@ -5714,7 +5723,7 @@ var useActions = () => {
|
|
|
5714
5723
|
defaultActiveTab
|
|
5715
5724
|
});
|
|
5716
5725
|
(0, import_editor_elements16.moveElements)({
|
|
5717
|
-
title: (0,
|
|
5726
|
+
title: (0, import_i18n65.__)("Reorder Tabs", "elementor"),
|
|
5718
5727
|
moves: [
|
|
5719
5728
|
{
|
|
5720
5729
|
element: movedElement,
|
|
@@ -5748,7 +5757,7 @@ var useActions = () => {
|
|
|
5748
5757
|
defaultActiveTab
|
|
5749
5758
|
});
|
|
5750
5759
|
(0, import_editor_elements16.removeElements)({
|
|
5751
|
-
title: (0,
|
|
5760
|
+
title: (0, import_i18n65.__)("Tabs", "elementor"),
|
|
5752
5761
|
elementIds: items3.flatMap(({ item, index }) => {
|
|
5753
5762
|
const tabId = item.id;
|
|
5754
5763
|
const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
|
|
@@ -5783,7 +5792,7 @@ var useActions = () => {
|
|
|
5783
5792
|
items3.forEach(({ index }) => {
|
|
5784
5793
|
const position = index + 1;
|
|
5785
5794
|
(0, import_editor_elements16.createElements)({
|
|
5786
|
-
title: (0,
|
|
5795
|
+
title: (0, import_i18n65.__)("Tabs", "elementor"),
|
|
5787
5796
|
elements: [
|
|
5788
5797
|
{
|
|
5789
5798
|
container: tabContentArea,
|
|
@@ -5852,7 +5861,7 @@ var calculateDefaultOnDuplicate = ({
|
|
|
5852
5861
|
var TAB_MENU_ELEMENT_TYPE = "e-tabs-menu";
|
|
5853
5862
|
var TAB_CONTENT_AREA_ELEMENT_TYPE = "e-tabs-content-area";
|
|
5854
5863
|
var TabsControl = ({ label }) => {
|
|
5855
|
-
return /* @__PURE__ */
|
|
5864
|
+
return /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n66.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(TabsControlContent, { label }));
|
|
5856
5865
|
};
|
|
5857
5866
|
var TabsControlContent = ({ label }) => {
|
|
5858
5867
|
const { element } = useElement();
|
|
@@ -5896,8 +5905,8 @@ var TabsControlContent = ({ label }) => {
|
|
|
5896
5905
|
});
|
|
5897
5906
|
}
|
|
5898
5907
|
};
|
|
5899
|
-
return /* @__PURE__ */
|
|
5900
|
-
|
|
5908
|
+
return /* @__PURE__ */ React91.createElement(
|
|
5909
|
+
import_editor_controls59.Repeater,
|
|
5901
5910
|
{
|
|
5902
5911
|
showToggle: false,
|
|
5903
5912
|
values: repeaterValues,
|
|
@@ -5916,26 +5925,26 @@ var TabsControlContent = ({ label }) => {
|
|
|
5916
5925
|
};
|
|
5917
5926
|
var ItemLabel = ({ value, index }) => {
|
|
5918
5927
|
const elementTitle = value?.title;
|
|
5919
|
-
return /* @__PURE__ */
|
|
5928
|
+
return /* @__PURE__ */ React91.createElement(import_ui44.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React91.createElement("span", null, elementTitle), /* @__PURE__ */ React91.createElement(ItemDefaultTab, { index }));
|
|
5920
5929
|
};
|
|
5921
5930
|
var ItemDefaultTab = ({ index }) => {
|
|
5922
|
-
const { value: defaultItem } = (0,
|
|
5931
|
+
const { value: defaultItem } = (0, import_editor_controls59.useBoundProp)(import_editor_props17.numberPropTypeUtil);
|
|
5923
5932
|
const isDefault = defaultItem === index;
|
|
5924
5933
|
if (!isDefault) {
|
|
5925
5934
|
return null;
|
|
5926
5935
|
}
|
|
5927
|
-
return /* @__PURE__ */
|
|
5936
|
+
return /* @__PURE__ */ React91.createElement(import_ui44.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n66.__)("Default", "elementor") });
|
|
5928
5937
|
};
|
|
5929
5938
|
var ItemContent = ({ value, index }) => {
|
|
5930
5939
|
if (!value.id) {
|
|
5931
5940
|
return null;
|
|
5932
5941
|
}
|
|
5933
|
-
return /* @__PURE__ */
|
|
5942
|
+
return /* @__PURE__ */ React91.createElement(import_ui44.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React91.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n66.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(DefaultTabControl, { tabIndex: index })));
|
|
5934
5943
|
};
|
|
5935
5944
|
var DefaultTabControl = ({ tabIndex }) => {
|
|
5936
|
-
const { value, setValue } = (0,
|
|
5945
|
+
const { value, setValue } = (0, import_editor_controls59.useBoundProp)(import_editor_props17.numberPropTypeUtil);
|
|
5937
5946
|
const isDefault = value === tabIndex;
|
|
5938
|
-
return /* @__PURE__ */
|
|
5947
|
+
return /* @__PURE__ */ React91.createElement(import_ui44.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React91.createElement(import_editor_controls59.ControlFormLabel, null, (0, import_i18n66.__)("Set as default tab", "elementor")), /* @__PURE__ */ React91.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React91.createElement(
|
|
5939
5948
|
import_ui44.Switch,
|
|
5940
5949
|
{
|
|
5941
5950
|
size: "small",
|
|
@@ -5953,7 +5962,7 @@ var DefaultTabControl = ({ tabIndex }) => {
|
|
|
5953
5962
|
var TabLabelControl = ({ elementId }) => {
|
|
5954
5963
|
const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
|
|
5955
5964
|
const label = editorSettings?.title ?? "";
|
|
5956
|
-
return /* @__PURE__ */
|
|
5965
|
+
return /* @__PURE__ */ React91.createElement(import_ui44.Stack, { gap: 1 }, /* @__PURE__ */ React91.createElement(import_editor_controls59.ControlFormLabel, null, (0, import_i18n66.__)("Tab name", "elementor")), /* @__PURE__ */ React91.createElement(
|
|
5957
5966
|
import_ui44.TextField,
|
|
5958
5967
|
{
|
|
5959
5968
|
size: "tiny",
|
|
@@ -5974,22 +5983,22 @@ var ConditionalTooltip = ({
|
|
|
5974
5983
|
if (!showTooltip) {
|
|
5975
5984
|
return children;
|
|
5976
5985
|
}
|
|
5977
|
-
return /* @__PURE__ */
|
|
5986
|
+
return /* @__PURE__ */ React91.createElement(
|
|
5978
5987
|
import_ui44.Infotip,
|
|
5979
5988
|
{
|
|
5980
5989
|
arrow: false,
|
|
5981
|
-
content: /* @__PURE__ */
|
|
5990
|
+
content: /* @__PURE__ */ React91.createElement(
|
|
5982
5991
|
import_ui44.Alert,
|
|
5983
5992
|
{
|
|
5984
5993
|
color: "secondary",
|
|
5985
|
-
icon: /* @__PURE__ */
|
|
5994
|
+
icon: /* @__PURE__ */ React91.createElement(import_icons27.InfoCircleFilledIcon, { fontSize: "tiny" }),
|
|
5986
5995
|
size: "small",
|
|
5987
5996
|
sx: { width: 288 }
|
|
5988
5997
|
},
|
|
5989
|
-
/* @__PURE__ */
|
|
5998
|
+
/* @__PURE__ */ React91.createElement(import_ui44.Typography, { variant: "body2" }, (0, import_i18n66.__)("To change the default tab, simply set another tab as default.", "elementor"))
|
|
5990
5999
|
)
|
|
5991
6000
|
},
|
|
5992
|
-
/* @__PURE__ */
|
|
6001
|
+
/* @__PURE__ */ React91.createElement("span", null, children)
|
|
5993
6002
|
);
|
|
5994
6003
|
};
|
|
5995
6004
|
|
|
@@ -6007,12 +6016,12 @@ var registerElementControls = () => {
|
|
|
6007
6016
|
|
|
6008
6017
|
// src/dynamics/init.ts
|
|
6009
6018
|
var import_editor_canvas3 = require("@elementor/editor-canvas");
|
|
6010
|
-
var
|
|
6019
|
+
var import_editor_controls66 = require("@elementor/editor-controls");
|
|
6011
6020
|
var import_menus2 = require("@elementor/menus");
|
|
6012
6021
|
|
|
6013
6022
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6014
|
-
var
|
|
6015
|
-
var
|
|
6023
|
+
var React92 = __toESM(require("react"));
|
|
6024
|
+
var import_editor_controls61 = require("@elementor/editor-controls");
|
|
6016
6025
|
var import_editor_props19 = require("@elementor/editor-props");
|
|
6017
6026
|
var import_icons28 = require("@elementor/icons");
|
|
6018
6027
|
|
|
@@ -6021,7 +6030,7 @@ var import_react43 = require("react");
|
|
|
6021
6030
|
|
|
6022
6031
|
// src/dynamics/hooks/use-prop-dynamic-tags.ts
|
|
6023
6032
|
var import_react42 = require("react");
|
|
6024
|
-
var
|
|
6033
|
+
var import_editor_controls60 = require("@elementor/editor-controls");
|
|
6025
6034
|
|
|
6026
6035
|
// src/dynamics/sync/get-atomic-dynamic-tags.ts
|
|
6027
6036
|
var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
|
|
@@ -6105,7 +6114,7 @@ var useAllPropDynamicTags = () => {
|
|
|
6105
6114
|
};
|
|
6106
6115
|
var usePropDynamicTagsInternal = (filterByLicense2) => {
|
|
6107
6116
|
let categories = [];
|
|
6108
|
-
const { propType } = (0,
|
|
6117
|
+
const { propType } = (0, import_editor_controls60.useBoundProp)();
|
|
6109
6118
|
if (propType) {
|
|
6110
6119
|
const propDynamicType = getDynamicPropType(propType);
|
|
6111
6120
|
categories = propDynamicType?.settings.categories || [];
|
|
@@ -6149,29 +6158,29 @@ var useDynamicTag = (tagName) => {
|
|
|
6149
6158
|
};
|
|
6150
6159
|
|
|
6151
6160
|
// src/dynamics/components/background-control-dynamic-tag.tsx
|
|
6152
|
-
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */
|
|
6161
|
+
var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React92.createElement(import_icons28.DatabaseIcon, { fontSize: "tiny" });
|
|
6153
6162
|
var BackgroundControlDynamicTagLabel = ({ value }) => {
|
|
6154
|
-
const context = (0,
|
|
6155
|
-
return /* @__PURE__ */
|
|
6163
|
+
const context = (0, import_editor_controls61.useBoundProp)(import_editor_props19.backgroundImageOverlayPropTypeUtil);
|
|
6164
|
+
return /* @__PURE__ */ React92.createElement(import_editor_controls61.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React92.createElement(import_editor_controls61.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React92.createElement(Wrapper2, { rawValue: value.value })));
|
|
6156
6165
|
};
|
|
6157
6166
|
var Wrapper2 = ({ rawValue }) => {
|
|
6158
|
-
const { propType } = (0,
|
|
6167
|
+
const { propType } = (0, import_editor_controls61.useBoundProp)();
|
|
6159
6168
|
const imageOverlayPropType = propType.prop_types["background-image-overlay"];
|
|
6160
|
-
return /* @__PURE__ */
|
|
6169
|
+
return /* @__PURE__ */ React92.createElement(import_editor_controls61.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React92.createElement(import_editor_controls61.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React92.createElement(Content, { rawValue: rawValue.image })));
|
|
6161
6170
|
};
|
|
6162
6171
|
var Content = ({ rawValue }) => {
|
|
6163
6172
|
const src = rawValue.value.src;
|
|
6164
6173
|
const dynamicTag = useDynamicTag(src.value.name || "");
|
|
6165
|
-
return /* @__PURE__ */
|
|
6174
|
+
return /* @__PURE__ */ React92.createElement(React92.Fragment, null, dynamicTag?.label);
|
|
6166
6175
|
};
|
|
6167
6176
|
|
|
6168
6177
|
// src/dynamics/components/dynamic-selection-control.tsx
|
|
6169
|
-
var
|
|
6170
|
-
var
|
|
6178
|
+
var React96 = __toESM(require("react"));
|
|
6179
|
+
var import_editor_controls64 = require("@elementor/editor-controls");
|
|
6171
6180
|
var import_editor_ui10 = require("@elementor/editor-ui");
|
|
6172
6181
|
var import_icons30 = require("@elementor/icons");
|
|
6173
6182
|
var import_ui46 = require("@elementor/ui");
|
|
6174
|
-
var
|
|
6183
|
+
var import_i18n68 = require("@wordpress/i18n");
|
|
6175
6184
|
|
|
6176
6185
|
// src/hooks/use-persist-dynamic-value.ts
|
|
6177
6186
|
var import_session10 = require("@elementor/session");
|
|
@@ -6182,11 +6191,11 @@ var usePersistDynamicValue = (propKey) => {
|
|
|
6182
6191
|
};
|
|
6183
6192
|
|
|
6184
6193
|
// src/dynamics/dynamic-control.tsx
|
|
6185
|
-
var
|
|
6186
|
-
var
|
|
6194
|
+
var React94 = __toESM(require("react"));
|
|
6195
|
+
var import_editor_controls62 = require("@elementor/editor-controls");
|
|
6187
6196
|
|
|
6188
6197
|
// src/dynamics/components/dynamic-conditional-control.tsx
|
|
6189
|
-
var
|
|
6198
|
+
var React93 = __toESM(require("react"));
|
|
6190
6199
|
var import_react44 = require("react");
|
|
6191
6200
|
var import_editor_props20 = require("@elementor/editor-props");
|
|
6192
6201
|
var DynamicConditionalControl = ({
|
|
@@ -6228,15 +6237,15 @@ var DynamicConditionalControl = ({
|
|
|
6228
6237
|
return { ...defaults, ...convertedSettings };
|
|
6229
6238
|
}, [defaults, convertedSettings]);
|
|
6230
6239
|
if (!propType?.dependencies?.terms.length) {
|
|
6231
|
-
return /* @__PURE__ */
|
|
6240
|
+
return /* @__PURE__ */ React93.createElement(React93.Fragment, null, children);
|
|
6232
6241
|
}
|
|
6233
6242
|
const isHidden = !(0, import_editor_props20.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet;
|
|
6234
|
-
return isHidden ? null : /* @__PURE__ */
|
|
6243
|
+
return isHidden ? null : /* @__PURE__ */ React93.createElement(React93.Fragment, null, children);
|
|
6235
6244
|
};
|
|
6236
6245
|
|
|
6237
6246
|
// src/dynamics/dynamic-control.tsx
|
|
6238
6247
|
var DynamicControl = ({ bind, children }) => {
|
|
6239
|
-
const { value, setValue } = (0,
|
|
6248
|
+
const { value, setValue } = (0, import_editor_controls62.useBoundProp)(dynamicPropTypeUtil);
|
|
6240
6249
|
const { name = "", group = "", settings } = value ?? {};
|
|
6241
6250
|
const dynamicTag = useDynamicTag(name);
|
|
6242
6251
|
if (!dynamicTag) {
|
|
@@ -6256,7 +6265,7 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
6256
6265
|
});
|
|
6257
6266
|
};
|
|
6258
6267
|
const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
|
|
6259
|
-
return /* @__PURE__ */
|
|
6268
|
+
return /* @__PURE__ */ React94.createElement(import_editor_controls62.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React94.createElement(import_editor_controls62.PropKeyProvider, { bind }, /* @__PURE__ */ React94.createElement(
|
|
6260
6269
|
DynamicConditionalControl,
|
|
6261
6270
|
{
|
|
6262
6271
|
propType: dynamicPropType,
|
|
@@ -6268,13 +6277,13 @@ var DynamicControl = ({ bind, children }) => {
|
|
|
6268
6277
|
};
|
|
6269
6278
|
|
|
6270
6279
|
// src/dynamics/components/dynamic-selection.tsx
|
|
6271
|
-
var
|
|
6280
|
+
var React95 = __toESM(require("react"));
|
|
6272
6281
|
var import_react45 = require("react");
|
|
6273
|
-
var
|
|
6282
|
+
var import_editor_controls63 = require("@elementor/editor-controls");
|
|
6274
6283
|
var import_editor_ui9 = require("@elementor/editor-ui");
|
|
6275
6284
|
var import_icons29 = require("@elementor/icons");
|
|
6276
6285
|
var import_ui45 = require("@elementor/ui");
|
|
6277
|
-
var
|
|
6286
|
+
var import_i18n67 = require("@wordpress/i18n");
|
|
6278
6287
|
var SIZE2 = "tiny";
|
|
6279
6288
|
var PROMO_TEXT_WIDTH = 170;
|
|
6280
6289
|
var PRO_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-modal/";
|
|
@@ -6283,17 +6292,17 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6283
6292
|
const [searchValue, setSearchValue] = (0, import_react45.useState)("");
|
|
6284
6293
|
const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
|
|
6285
6294
|
const theme = (0, import_ui45.useTheme)();
|
|
6286
|
-
const { value: anyValue } = (0,
|
|
6287
|
-
const { bind, value: dynamicValue, setValue } = (0,
|
|
6295
|
+
const { value: anyValue } = (0, import_editor_controls63.useBoundProp)();
|
|
6296
|
+
const { bind, value: dynamicValue, setValue } = (0, import_editor_controls63.useBoundProp)(dynamicPropTypeUtil);
|
|
6288
6297
|
const [, updatePropValueHistory] = usePersistDynamicValue(bind);
|
|
6289
6298
|
const isCurrentValueDynamic = !!dynamicValue;
|
|
6290
6299
|
const options13 = useFilteredOptions(searchValue);
|
|
6291
6300
|
const hasNoDynamicTags = !options13.length && !searchValue.trim();
|
|
6292
6301
|
(0, import_react45.useEffect)(() => {
|
|
6293
6302
|
if (hasNoDynamicTags) {
|
|
6294
|
-
(0,
|
|
6303
|
+
(0, import_editor_controls63.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
6295
6304
|
} else if (expired) {
|
|
6296
|
-
(0,
|
|
6305
|
+
(0, import_editor_controls63.trackViewPromotion)({ target_name: "dynamic_tags" });
|
|
6297
6306
|
}
|
|
6298
6307
|
}, [hasNoDynamicTags, expired]);
|
|
6299
6308
|
const handleSearch = (value) => {
|
|
@@ -6321,19 +6330,19 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6321
6330
|
]);
|
|
6322
6331
|
const getPopOverContent = () => {
|
|
6323
6332
|
if (hasNoDynamicTags) {
|
|
6324
|
-
return /* @__PURE__ */
|
|
6333
|
+
return /* @__PURE__ */ React95.createElement(NoDynamicTags, null);
|
|
6325
6334
|
}
|
|
6326
6335
|
if (expired) {
|
|
6327
|
-
return /* @__PURE__ */
|
|
6336
|
+
return /* @__PURE__ */ React95.createElement(ExpiredDynamicTags, null);
|
|
6328
6337
|
}
|
|
6329
|
-
return /* @__PURE__ */
|
|
6338
|
+
return /* @__PURE__ */ React95.createElement(import_react45.Fragment, null, /* @__PURE__ */ React95.createElement(
|
|
6330
6339
|
import_editor_ui9.SearchField,
|
|
6331
6340
|
{
|
|
6332
6341
|
value: searchValue,
|
|
6333
6342
|
onSearch: handleSearch,
|
|
6334
|
-
placeholder: (0,
|
|
6343
|
+
placeholder: (0, import_i18n67.__)("Search dynamic tags\u2026", "elementor")
|
|
6335
6344
|
}
|
|
6336
|
-
), /* @__PURE__ */
|
|
6345
|
+
), /* @__PURE__ */ React95.createElement(import_ui45.Divider, null), /* @__PURE__ */ React95.createElement(
|
|
6337
6346
|
import_editor_ui9.PopoverMenuList,
|
|
6338
6347
|
{
|
|
6339
6348
|
items: virtualizedItems,
|
|
@@ -6341,20 +6350,20 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
|
|
|
6341
6350
|
onClose: closePopover,
|
|
6342
6351
|
selectedValue: dynamicValue?.name,
|
|
6343
6352
|
itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
|
|
6344
|
-
noResultsComponent: /* @__PURE__ */
|
|
6353
|
+
noResultsComponent: /* @__PURE__ */ React95.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
|
|
6345
6354
|
}
|
|
6346
6355
|
));
|
|
6347
6356
|
};
|
|
6348
|
-
return /* @__PURE__ */
|
|
6357
|
+
return /* @__PURE__ */ React95.createElement(import_editor_ui9.SectionPopoverBody, { "aria-label": (0, import_i18n67.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React95.createElement(
|
|
6349
6358
|
import_editor_ui9.PopoverHeader,
|
|
6350
6359
|
{
|
|
6351
|
-
title: (0,
|
|
6360
|
+
title: (0, import_i18n67.__)("Dynamic tags", "elementor"),
|
|
6352
6361
|
onClose: closePopover,
|
|
6353
|
-
icon: /* @__PURE__ */
|
|
6362
|
+
icon: /* @__PURE__ */ React95.createElement(import_icons29.DatabaseIcon, { fontSize: SIZE2 })
|
|
6354
6363
|
}
|
|
6355
6364
|
), getPopOverContent());
|
|
6356
6365
|
};
|
|
6357
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
6366
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React95.createElement(
|
|
6358
6367
|
import_ui45.Stack,
|
|
6359
6368
|
{
|
|
6360
6369
|
gap: 1,
|
|
@@ -6365,11 +6374,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React94.createElem
|
|
|
6365
6374
|
color: "text.secondary",
|
|
6366
6375
|
sx: { pb: 3.5 }
|
|
6367
6376
|
},
|
|
6368
|
-
/* @__PURE__ */
|
|
6369
|
-
/* @__PURE__ */
|
|
6370
|
-
/* @__PURE__ */
|
|
6377
|
+
/* @__PURE__ */ React95.createElement(import_icons29.DatabaseIcon, { fontSize: "large" }),
|
|
6378
|
+
/* @__PURE__ */ React95.createElement(import_ui45.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n67.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React95.createElement("br", null), "\u201C", searchValue, "\u201D."),
|
|
6379
|
+
/* @__PURE__ */ React95.createElement(import_ui45.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n67.__)("Try something else.", "elementor"), /* @__PURE__ */ React95.createElement(import_ui45.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n67.__)("Clear & try again", "elementor")))
|
|
6371
6380
|
);
|
|
6372
|
-
var NoDynamicTags = () => /* @__PURE__ */
|
|
6381
|
+
var NoDynamicTags = () => /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(import_ui45.Divider, null), /* @__PURE__ */ React95.createElement(
|
|
6373
6382
|
import_ui45.Stack,
|
|
6374
6383
|
{
|
|
6375
6384
|
gap: 1,
|
|
@@ -6380,19 +6389,19 @@ var NoDynamicTags = () => /* @__PURE__ */ React94.createElement(React94.Fragment
|
|
|
6380
6389
|
color: "text.secondary",
|
|
6381
6390
|
sx: { pb: 3.5 }
|
|
6382
6391
|
},
|
|
6383
|
-
/* @__PURE__ */
|
|
6384
|
-
/* @__PURE__ */
|
|
6385
|
-
/* @__PURE__ */
|
|
6386
|
-
/* @__PURE__ */
|
|
6392
|
+
/* @__PURE__ */ React95.createElement(import_icons29.DatabaseIcon, { fontSize: "large" }),
|
|
6393
|
+
/* @__PURE__ */ React95.createElement(import_ui45.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n67.__)("Streamline your workflow with dynamic tags", "elementor")),
|
|
6394
|
+
/* @__PURE__ */ React95.createElement(import_ui45.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n67.__)("Upgrade now to display your content dynamically.", "elementor")),
|
|
6395
|
+
/* @__PURE__ */ React95.createElement(
|
|
6387
6396
|
import_editor_ui9.CtaButton,
|
|
6388
6397
|
{
|
|
6389
6398
|
size: "small",
|
|
6390
6399
|
href: PRO_DYNAMIC_TAGS_URL,
|
|
6391
|
-
onClick: () => (0,
|
|
6400
|
+
onClick: () => (0, import_editor_controls63.trackUpgradePromotionClick)({ target_name: "dynamic_tags" })
|
|
6392
6401
|
}
|
|
6393
6402
|
)
|
|
6394
6403
|
));
|
|
6395
|
-
var ExpiredDynamicTags = () => /* @__PURE__ */
|
|
6404
|
+
var ExpiredDynamicTags = () => /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(import_ui45.Divider, null), /* @__PURE__ */ React95.createElement(
|
|
6396
6405
|
import_ui45.Stack,
|
|
6397
6406
|
{
|
|
6398
6407
|
gap: 1,
|
|
@@ -6403,16 +6412,16 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React94.createElement(React94.Fra
|
|
|
6403
6412
|
color: "text.secondary",
|
|
6404
6413
|
sx: { pb: 3.5 }
|
|
6405
6414
|
},
|
|
6406
|
-
/* @__PURE__ */
|
|
6407
|
-
/* @__PURE__ */
|
|
6408
|
-
/* @__PURE__ */
|
|
6409
|
-
/* @__PURE__ */
|
|
6415
|
+
/* @__PURE__ */ React95.createElement(import_icons29.DatabaseIcon, { fontSize: "large" }),
|
|
6416
|
+
/* @__PURE__ */ React95.createElement(import_ui45.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n67.__)("Unlock your Dynamic tags again", "elementor")),
|
|
6417
|
+
/* @__PURE__ */ React95.createElement(import_ui45.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n67.__)("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")),
|
|
6418
|
+
/* @__PURE__ */ React95.createElement(
|
|
6410
6419
|
import_editor_ui9.CtaButton,
|
|
6411
6420
|
{
|
|
6412
6421
|
size: "small",
|
|
6413
6422
|
href: RENEW_DYNAMIC_TAGS_URL,
|
|
6414
|
-
onClick: () => (0,
|
|
6415
|
-
children: (0,
|
|
6423
|
+
onClick: () => (0, import_editor_controls63.trackUpgradePromotionClick)({ target_name: "dynamic_tags" }),
|
|
6424
|
+
children: (0, import_i18n67.__)("Renew Now", "elementor")
|
|
6416
6425
|
}
|
|
6417
6426
|
)
|
|
6418
6427
|
));
|
|
@@ -6436,8 +6445,8 @@ var useFilteredOptions = (searchValue) => {
|
|
|
6436
6445
|
var SIZE3 = "tiny";
|
|
6437
6446
|
var tagsWithoutTabs = ["popup"];
|
|
6438
6447
|
var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
6439
|
-
const { setValue: setAnyValue, propType } = (0,
|
|
6440
|
-
const { bind, value } = (0,
|
|
6448
|
+
const { setValue: setAnyValue, propType } = (0, import_editor_controls64.useBoundProp)();
|
|
6449
|
+
const { bind, value } = (0, import_editor_controls64.useBoundProp)(dynamicPropTypeUtil);
|
|
6441
6450
|
const { expired: readonly } = useLicenseConfig();
|
|
6442
6451
|
const originalPropType = createTopLevelObjectType({
|
|
6443
6452
|
schema: {
|
|
@@ -6449,7 +6458,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6449
6458
|
const { name: tagName = "" } = value;
|
|
6450
6459
|
const dynamicTag = useDynamicTag(tagName);
|
|
6451
6460
|
if (!isDynamicTagSupported(tagName) && OriginalControl) {
|
|
6452
|
-
return /* @__PURE__ */
|
|
6461
|
+
return /* @__PURE__ */ React96.createElement(import_editor_controls64.PropProvider, { propType: originalPropType, value: { [bind]: null }, setValue: setAnyValue }, /* @__PURE__ */ React96.createElement(import_editor_controls64.PropKeyProvider, { bind }, /* @__PURE__ */ React96.createElement(OriginalControl, { ...props })));
|
|
6453
6462
|
}
|
|
6454
6463
|
const removeDynamicTag = () => {
|
|
6455
6464
|
setAnyValue(propValueFromHistory ?? null);
|
|
@@ -6457,25 +6466,25 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6457
6466
|
if (!dynamicTag) {
|
|
6458
6467
|
throw new Error(`Dynamic tag ${tagName} not found`);
|
|
6459
6468
|
}
|
|
6460
|
-
return /* @__PURE__ */
|
|
6469
|
+
return /* @__PURE__ */ React96.createElement(import_ui46.Box, null, /* @__PURE__ */ React96.createElement(
|
|
6461
6470
|
import_ui46.UnstableTag,
|
|
6462
6471
|
{
|
|
6463
6472
|
fullWidth: true,
|
|
6464
6473
|
showActionsOnHover: true,
|
|
6465
6474
|
label: dynamicTag.label,
|
|
6466
|
-
startIcon: /* @__PURE__ */
|
|
6475
|
+
startIcon: /* @__PURE__ */ React96.createElement(import_icons30.DatabaseIcon, { fontSize: SIZE3 }),
|
|
6467
6476
|
...(0, import_ui46.bindTrigger)(selectionPopoverState),
|
|
6468
|
-
actions: /* @__PURE__ */
|
|
6477
|
+
actions: /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(DynamicSettingsPopover, { dynamicTag, disabled: readonly }), /* @__PURE__ */ React96.createElement(
|
|
6469
6478
|
import_ui46.IconButton,
|
|
6470
6479
|
{
|
|
6471
6480
|
size: SIZE3,
|
|
6472
6481
|
onClick: removeDynamicTag,
|
|
6473
|
-
"aria-label": (0,
|
|
6482
|
+
"aria-label": (0, import_i18n68.__)("Remove dynamic value", "elementor")
|
|
6474
6483
|
},
|
|
6475
|
-
/* @__PURE__ */
|
|
6484
|
+
/* @__PURE__ */ React96.createElement(import_icons30.XIcon, { fontSize: SIZE3 })
|
|
6476
6485
|
))
|
|
6477
6486
|
}
|
|
6478
|
-
), /* @__PURE__ */
|
|
6487
|
+
), /* @__PURE__ */ React96.createElement(
|
|
6479
6488
|
import_ui46.Popover,
|
|
6480
6489
|
{
|
|
6481
6490
|
disablePortal: true,
|
|
@@ -6487,7 +6496,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
|
|
|
6487
6496
|
},
|
|
6488
6497
|
...(0, import_ui46.bindPopover)(selectionPopoverState)
|
|
6489
6498
|
},
|
|
6490
|
-
/* @__PURE__ */
|
|
6499
|
+
/* @__PURE__ */ React96.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n68.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React96.createElement(DynamicSelection, { close: selectionPopoverState.close, expired: readonly }))
|
|
6491
6500
|
));
|
|
6492
6501
|
};
|
|
6493
6502
|
var DynamicSettingsPopover = ({
|
|
@@ -6499,16 +6508,16 @@ var DynamicSettingsPopover = ({
|
|
|
6499
6508
|
if (!hasDynamicSettings) {
|
|
6500
6509
|
return null;
|
|
6501
6510
|
}
|
|
6502
|
-
return /* @__PURE__ */
|
|
6511
|
+
return /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(
|
|
6503
6512
|
import_ui46.IconButton,
|
|
6504
6513
|
{
|
|
6505
6514
|
size: SIZE3,
|
|
6506
6515
|
disabled,
|
|
6507
6516
|
...!disabled && (0, import_ui46.bindTrigger)(popupState),
|
|
6508
|
-
"aria-label": (0,
|
|
6517
|
+
"aria-label": (0, import_i18n68.__)("Dynamic settings", "elementor")
|
|
6509
6518
|
},
|
|
6510
|
-
/* @__PURE__ */
|
|
6511
|
-
), /* @__PURE__ */
|
|
6519
|
+
/* @__PURE__ */ React96.createElement(import_icons30.SettingsIcon, { fontSize: SIZE3 })
|
|
6520
|
+
), /* @__PURE__ */ React96.createElement(
|
|
6512
6521
|
import_ui46.Popover,
|
|
6513
6522
|
{
|
|
6514
6523
|
disablePortal: true,
|
|
@@ -6520,14 +6529,14 @@ var DynamicSettingsPopover = ({
|
|
|
6520
6529
|
},
|
|
6521
6530
|
...(0, import_ui46.bindPopover)(popupState)
|
|
6522
6531
|
},
|
|
6523
|
-
/* @__PURE__ */
|
|
6532
|
+
/* @__PURE__ */ React96.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n68.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React96.createElement(
|
|
6524
6533
|
import_editor_ui10.PopoverHeader,
|
|
6525
6534
|
{
|
|
6526
6535
|
title: dynamicTag.label,
|
|
6527
6536
|
onClose: popupState.close,
|
|
6528
|
-
icon: /* @__PURE__ */
|
|
6537
|
+
icon: /* @__PURE__ */ React96.createElement(import_icons30.DatabaseIcon, { fontSize: SIZE3 })
|
|
6529
6538
|
}
|
|
6530
|
-
), /* @__PURE__ */
|
|
6539
|
+
), /* @__PURE__ */ React96.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
|
|
6531
6540
|
));
|
|
6532
6541
|
};
|
|
6533
6542
|
var DynamicSettings = ({ controls, tagName }) => {
|
|
@@ -6538,9 +6547,9 @@ var DynamicSettings = ({ controls, tagName }) => {
|
|
|
6538
6547
|
}
|
|
6539
6548
|
if (tagsWithoutTabs.includes(tagName)) {
|
|
6540
6549
|
const singleTab = tabs[0];
|
|
6541
|
-
return /* @__PURE__ */
|
|
6550
|
+
return /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(import_ui46.Divider, null), /* @__PURE__ */ React96.createElement(ControlsItemsStack, { items: singleTab.value.items }));
|
|
6542
6551
|
}
|
|
6543
|
-
return /* @__PURE__ */
|
|
6552
|
+
return /* @__PURE__ */ React96.createElement(React96.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React96.createElement(import_ui46.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React96.createElement(
|
|
6544
6553
|
import_ui46.Tab,
|
|
6545
6554
|
{
|
|
6546
6555
|
key: index,
|
|
@@ -6548,15 +6557,15 @@ var DynamicSettings = ({ controls, tagName }) => {
|
|
|
6548
6557
|
sx: { px: 1, py: 0.5 },
|
|
6549
6558
|
...getTabProps(index)
|
|
6550
6559
|
}
|
|
6551
|
-
))), /* @__PURE__ */
|
|
6552
|
-
return /* @__PURE__ */
|
|
6560
|
+
))), /* @__PURE__ */ React96.createElement(import_ui46.Divider, null), tabs.map(({ value }, index) => {
|
|
6561
|
+
return /* @__PURE__ */ React96.createElement(
|
|
6553
6562
|
import_ui46.TabPanel,
|
|
6554
6563
|
{
|
|
6555
6564
|
key: index,
|
|
6556
6565
|
sx: { flexGrow: 1, py: 0, overflowY: "auto" },
|
|
6557
6566
|
...getTabPanelProps(index)
|
|
6558
6567
|
},
|
|
6559
|
-
/* @__PURE__ */
|
|
6568
|
+
/* @__PURE__ */ React96.createElement(ControlsItemsStack, { items: value.items })
|
|
6560
6569
|
);
|
|
6561
6570
|
}));
|
|
6562
6571
|
};
|
|
@@ -6598,11 +6607,11 @@ var Control2 = ({ control }) => {
|
|
|
6598
6607
|
display: "grid",
|
|
6599
6608
|
gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
|
|
6600
6609
|
} : {};
|
|
6601
|
-
return /* @__PURE__ */
|
|
6610
|
+
return /* @__PURE__ */ React96.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React96.createElement(import_ui46.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React96.createElement(import_ui46.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(import_editor_controls64.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React96.createElement(import_ui46.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(Control, { type: control.type, props: controlProps }))));
|
|
6602
6611
|
};
|
|
6603
6612
|
function ControlsItemsStack({ items: items3 }) {
|
|
6604
|
-
return /* @__PURE__ */
|
|
6605
|
-
(item) => item.type === "control" ? /* @__PURE__ */
|
|
6613
|
+
return /* @__PURE__ */ React96.createElement(import_ui46.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
|
|
6614
|
+
(item) => item.type === "control" ? /* @__PURE__ */ React96.createElement(Control2, { key: item.value.bind, control: item.value }) : null
|
|
6606
6615
|
));
|
|
6607
6616
|
}
|
|
6608
6617
|
|
|
@@ -6658,34 +6667,34 @@ function getDynamicValue(name, settings) {
|
|
|
6658
6667
|
}
|
|
6659
6668
|
|
|
6660
6669
|
// src/dynamics/hooks/use-prop-dynamic-action.tsx
|
|
6661
|
-
var
|
|
6662
|
-
var
|
|
6670
|
+
var React97 = __toESM(require("react"));
|
|
6671
|
+
var import_editor_controls65 = require("@elementor/editor-controls");
|
|
6663
6672
|
var import_icons31 = require("@elementor/icons");
|
|
6664
|
-
var
|
|
6673
|
+
var import_i18n69 = require("@wordpress/i18n");
|
|
6665
6674
|
var usePropDynamicAction = () => {
|
|
6666
|
-
const { propType } = (0,
|
|
6675
|
+
const { propType } = (0, import_editor_controls65.useBoundProp)();
|
|
6667
6676
|
const visible = !!propType && supportsDynamic(propType);
|
|
6668
6677
|
return {
|
|
6669
6678
|
visible,
|
|
6670
6679
|
icon: import_icons31.DatabaseIcon,
|
|
6671
|
-
title: (0,
|
|
6672
|
-
content: ({ close }) => /* @__PURE__ */
|
|
6680
|
+
title: (0, import_i18n69.__)("Dynamic tags", "elementor"),
|
|
6681
|
+
content: ({ close }) => /* @__PURE__ */ React97.createElement(DynamicSelection, { close })
|
|
6673
6682
|
};
|
|
6674
6683
|
};
|
|
6675
6684
|
|
|
6676
6685
|
// src/dynamics/init.ts
|
|
6677
6686
|
var { registerPopoverAction } = import_menus2.controlActionsMenu;
|
|
6678
6687
|
var init2 = () => {
|
|
6679
|
-
(0,
|
|
6688
|
+
(0, import_editor_controls66.registerControlReplacement)({
|
|
6680
6689
|
component: DynamicSelectionControl,
|
|
6681
6690
|
condition: ({ value }) => isDynamicPropValue(value)
|
|
6682
6691
|
});
|
|
6683
|
-
(0,
|
|
6692
|
+
(0, import_editor_controls66.injectIntoRepeaterItemLabel)({
|
|
6684
6693
|
id: "dynamic-background-image",
|
|
6685
6694
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6686
6695
|
component: BackgroundControlDynamicTagLabel
|
|
6687
6696
|
});
|
|
6688
|
-
(0,
|
|
6697
|
+
(0, import_editor_controls66.injectIntoRepeaterItemIcon)({
|
|
6689
6698
|
id: "dynamic-background-image",
|
|
6690
6699
|
condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
|
|
6691
6700
|
component: BackgroundControlDynamicTagIcon
|
|
@@ -6700,11 +6709,11 @@ var init2 = () => {
|
|
|
6700
6709
|
};
|
|
6701
6710
|
|
|
6702
6711
|
// src/reset-style-props.tsx
|
|
6703
|
-
var
|
|
6712
|
+
var import_editor_controls67 = require("@elementor/editor-controls");
|
|
6704
6713
|
var import_editor_variables2 = require("@elementor/editor-variables");
|
|
6705
6714
|
var import_icons32 = require("@elementor/icons");
|
|
6706
6715
|
var import_menus3 = require("@elementor/menus");
|
|
6707
|
-
var
|
|
6716
|
+
var import_i18n70 = require("@wordpress/i18n");
|
|
6708
6717
|
|
|
6709
6718
|
// src/utils/is-equal.ts
|
|
6710
6719
|
function isEqual(a, b) {
|
|
@@ -6760,7 +6769,7 @@ function initResetStyleProps() {
|
|
|
6760
6769
|
}
|
|
6761
6770
|
function useResetStyleValueProps() {
|
|
6762
6771
|
const isStyle = useIsStyle();
|
|
6763
|
-
const { value, resetValue, propType } = (0,
|
|
6772
|
+
const { value, resetValue, propType } = (0, import_editor_controls67.useBoundProp)();
|
|
6764
6773
|
const hasValue = value !== null && value !== void 0;
|
|
6765
6774
|
const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
|
|
6766
6775
|
const isRequired = !!propType.settings?.required;
|
|
@@ -6780,33 +6789,33 @@ function useResetStyleValueProps() {
|
|
|
6780
6789
|
const visible = calculateVisibility();
|
|
6781
6790
|
return {
|
|
6782
6791
|
visible,
|
|
6783
|
-
title: (0,
|
|
6792
|
+
title: (0, import_i18n70.__)("Clear", "elementor"),
|
|
6784
6793
|
icon: import_icons32.BrushBigIcon,
|
|
6785
6794
|
onClick: () => resetValue()
|
|
6786
6795
|
};
|
|
6787
6796
|
}
|
|
6788
6797
|
|
|
6789
6798
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
6790
|
-
var
|
|
6791
|
-
var
|
|
6799
|
+
var React103 = __toESM(require("react"));
|
|
6800
|
+
var import_editor_controls68 = require("@elementor/editor-controls");
|
|
6792
6801
|
var import_editor_props22 = require("@elementor/editor-props");
|
|
6793
6802
|
var import_editor_styles_repository20 = require("@elementor/editor-styles-repository");
|
|
6794
|
-
var
|
|
6803
|
+
var import_i18n74 = require("@wordpress/i18n");
|
|
6795
6804
|
|
|
6796
6805
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
6797
|
-
var
|
|
6806
|
+
var React102 = __toESM(require("react"));
|
|
6798
6807
|
var import_react47 = require("react");
|
|
6799
6808
|
var import_editor_canvas5 = require("@elementor/editor-canvas");
|
|
6800
6809
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
6801
6810
|
var import_ui51 = require("@elementor/ui");
|
|
6802
|
-
var
|
|
6811
|
+
var import_i18n73 = require("@wordpress/i18n");
|
|
6803
6812
|
|
|
6804
6813
|
// src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
|
|
6805
6814
|
var import_react46 = require("react");
|
|
6806
6815
|
var import_editor_canvas4 = require("@elementor/editor-canvas");
|
|
6807
6816
|
var import_editor_styles8 = require("@elementor/editor-styles");
|
|
6808
6817
|
var import_editor_styles_repository18 = require("@elementor/editor-styles-repository");
|
|
6809
|
-
var
|
|
6818
|
+
var import_i18n71 = require("@wordpress/i18n");
|
|
6810
6819
|
var MAXIMUM_ITEMS = 2;
|
|
6811
6820
|
var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
6812
6821
|
const [items3, setItems] = (0, import_react46.useState)([]);
|
|
@@ -6817,7 +6826,7 @@ var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
|
|
|
6817
6826
|
);
|
|
6818
6827
|
const validItems = normalizedItems.map((item) => ({
|
|
6819
6828
|
...item,
|
|
6820
|
-
displayLabel: import_editor_styles_repository18.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0,
|
|
6829
|
+
displayLabel: import_editor_styles_repository18.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n71.__)("Base", "elementor")
|
|
6821
6830
|
})).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
|
|
6822
6831
|
setItems(validItems);
|
|
6823
6832
|
})();
|
|
@@ -6874,7 +6883,7 @@ var getTransformedValue = async (item, bind, resolve) => {
|
|
|
6874
6883
|
};
|
|
6875
6884
|
|
|
6876
6885
|
// src/styles-inheritance/components/infotip/breakpoint-icon.tsx
|
|
6877
|
-
var
|
|
6886
|
+
var React98 = __toESM(require("react"));
|
|
6878
6887
|
var import_editor_responsive4 = require("@elementor/editor-responsive");
|
|
6879
6888
|
var import_icons33 = require("@elementor/icons");
|
|
6880
6889
|
var import_ui47 = require("@elementor/ui");
|
|
@@ -6897,20 +6906,20 @@ var BreakpointIcon = ({ breakpoint }) => {
|
|
|
6897
6906
|
return null;
|
|
6898
6907
|
}
|
|
6899
6908
|
const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
|
|
6900
|
-
return /* @__PURE__ */
|
|
6909
|
+
return /* @__PURE__ */ React98.createElement(import_ui47.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React98.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
|
|
6901
6910
|
};
|
|
6902
6911
|
|
|
6903
6912
|
// src/styles-inheritance/components/infotip/label-chip.tsx
|
|
6904
|
-
var
|
|
6913
|
+
var React99 = __toESM(require("react"));
|
|
6905
6914
|
var import_editor_styles_repository19 = require("@elementor/editor-styles-repository");
|
|
6906
6915
|
var import_icons34 = require("@elementor/icons");
|
|
6907
6916
|
var import_ui48 = require("@elementor/ui");
|
|
6908
|
-
var
|
|
6917
|
+
var import_i18n72 = require("@wordpress/i18n");
|
|
6909
6918
|
var SIZE5 = "tiny";
|
|
6910
6919
|
var LabelChip = ({ displayLabel, provider }) => {
|
|
6911
6920
|
const isBaseStyle = provider === import_editor_styles_repository19.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
|
|
6912
|
-
const chipIcon = isBaseStyle ? /* @__PURE__ */
|
|
6913
|
-
return /* @__PURE__ */
|
|
6921
|
+
const chipIcon = isBaseStyle ? /* @__PURE__ */ React99.createElement(import_ui48.Tooltip, { title: (0, import_i18n72.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React99.createElement(import_icons34.InfoCircleIcon, { fontSize: SIZE5 })) : void 0;
|
|
6922
|
+
return /* @__PURE__ */ React99.createElement(
|
|
6914
6923
|
import_ui48.Chip,
|
|
6915
6924
|
{
|
|
6916
6925
|
label: displayLabel,
|
|
@@ -6936,10 +6945,10 @@ var LabelChip = ({ displayLabel, provider }) => {
|
|
|
6936
6945
|
};
|
|
6937
6946
|
|
|
6938
6947
|
// src/styles-inheritance/components/infotip/value-component.tsx
|
|
6939
|
-
var
|
|
6948
|
+
var React100 = __toESM(require("react"));
|
|
6940
6949
|
var import_ui49 = require("@elementor/ui");
|
|
6941
6950
|
var ValueComponent = ({ index, value }) => {
|
|
6942
|
-
return /* @__PURE__ */
|
|
6951
|
+
return /* @__PURE__ */ React100.createElement(import_ui49.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React100.createElement(
|
|
6943
6952
|
import_ui49.Typography,
|
|
6944
6953
|
{
|
|
6945
6954
|
variant: "caption",
|
|
@@ -6961,9 +6970,9 @@ var ValueComponent = ({ index, value }) => {
|
|
|
6961
6970
|
};
|
|
6962
6971
|
|
|
6963
6972
|
// src/styles-inheritance/components/infotip/action-icons.tsx
|
|
6964
|
-
var
|
|
6973
|
+
var React101 = __toESM(require("react"));
|
|
6965
6974
|
var import_ui50 = require("@elementor/ui");
|
|
6966
|
-
var ActionIcons = () => /* @__PURE__ */
|
|
6975
|
+
var ActionIcons = () => /* @__PURE__ */ React101.createElement(import_ui50.Box, { display: "flex", gap: 0.5, alignItems: "center" });
|
|
6967
6976
|
|
|
6968
6977
|
// src/styles-inheritance/components/styles-inheritance-infotip.tsx
|
|
6969
6978
|
var SECTION_PADDING_INLINE = 32;
|
|
@@ -6999,7 +7008,7 @@ var StylesInheritanceInfotip = ({
|
|
|
6999
7008
|
});
|
|
7000
7009
|
}, [key, propType]);
|
|
7001
7010
|
const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
|
|
7002
|
-
const infotipContent = /* @__PURE__ */
|
|
7011
|
+
const infotipContent = /* @__PURE__ */ React102.createElement(import_ui51.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React102.createElement(
|
|
7003
7012
|
import_ui51.Card,
|
|
7004
7013
|
{
|
|
7005
7014
|
elevation: 0,
|
|
@@ -7012,7 +7021,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7012
7021
|
flexDirection: "column"
|
|
7013
7022
|
}
|
|
7014
7023
|
},
|
|
7015
|
-
/* @__PURE__ */
|
|
7024
|
+
/* @__PURE__ */ React102.createElement(
|
|
7016
7025
|
import_ui51.Box,
|
|
7017
7026
|
{
|
|
7018
7027
|
sx: {
|
|
@@ -7022,9 +7031,9 @@ var StylesInheritanceInfotip = ({
|
|
|
7022
7031
|
backgroundColor: "background.paper"
|
|
7023
7032
|
}
|
|
7024
7033
|
},
|
|
7025
|
-
/* @__PURE__ */
|
|
7034
|
+
/* @__PURE__ */ React102.createElement(import_editor_ui11.PopoverHeader, { title: (0, import_i18n73.__)("Style origin", "elementor"), onClose: closeInfotip })
|
|
7026
7035
|
),
|
|
7027
|
-
/* @__PURE__ */
|
|
7036
|
+
/* @__PURE__ */ React102.createElement(
|
|
7028
7037
|
import_ui51.CardContent,
|
|
7029
7038
|
{
|
|
7030
7039
|
sx: {
|
|
@@ -7038,39 +7047,39 @@ var StylesInheritanceInfotip = ({
|
|
|
7038
7047
|
}
|
|
7039
7048
|
}
|
|
7040
7049
|
},
|
|
7041
|
-
/* @__PURE__ */
|
|
7042
|
-
return /* @__PURE__ */
|
|
7050
|
+
/* @__PURE__ */ React102.createElement(import_ui51.Stack, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
|
|
7051
|
+
return /* @__PURE__ */ React102.createElement(
|
|
7043
7052
|
import_ui51.Box,
|
|
7044
7053
|
{
|
|
7045
7054
|
key: item.id,
|
|
7046
7055
|
display: "flex",
|
|
7047
7056
|
gap: 0.5,
|
|
7048
7057
|
role: "listitem",
|
|
7049
|
-
"aria-label": (0,
|
|
7058
|
+
"aria-label": (0, import_i18n73.__)("Inheritance item: %s", "elementor").replace(
|
|
7050
7059
|
"%s",
|
|
7051
7060
|
item.displayLabel
|
|
7052
7061
|
)
|
|
7053
7062
|
},
|
|
7054
|
-
/* @__PURE__ */
|
|
7063
|
+
/* @__PURE__ */ React102.createElement(
|
|
7055
7064
|
import_ui51.Box,
|
|
7056
7065
|
{
|
|
7057
7066
|
display: "flex",
|
|
7058
7067
|
gap: 0.5,
|
|
7059
7068
|
sx: { flexWrap: "wrap", width: "100%", alignItems: "flex-start" }
|
|
7060
7069
|
},
|
|
7061
|
-
/* @__PURE__ */
|
|
7062
|
-
/* @__PURE__ */
|
|
7063
|
-
/* @__PURE__ */
|
|
7070
|
+
/* @__PURE__ */ React102.createElement(BreakpointIcon, { breakpoint: item.breakpoint }),
|
|
7071
|
+
/* @__PURE__ */ React102.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }),
|
|
7072
|
+
/* @__PURE__ */ React102.createElement(ValueComponent, { index, value: item.value })
|
|
7064
7073
|
),
|
|
7065
|
-
/* @__PURE__ */
|
|
7074
|
+
/* @__PURE__ */ React102.createElement(ActionIcons, null)
|
|
7066
7075
|
);
|
|
7067
7076
|
}))
|
|
7068
7077
|
)
|
|
7069
7078
|
));
|
|
7070
7079
|
if (isDisabled) {
|
|
7071
|
-
return /* @__PURE__ */
|
|
7080
|
+
return /* @__PURE__ */ React102.createElement(import_ui51.Box, { sx: { display: "inline-flex" } }, children);
|
|
7072
7081
|
}
|
|
7073
|
-
return /* @__PURE__ */
|
|
7082
|
+
return /* @__PURE__ */ React102.createElement(import_ui51.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React102.createElement(
|
|
7074
7083
|
TooltipOrInfotip,
|
|
7075
7084
|
{
|
|
7076
7085
|
showInfotip,
|
|
@@ -7078,7 +7087,7 @@ var StylesInheritanceInfotip = ({
|
|
|
7078
7087
|
infotipContent,
|
|
7079
7088
|
isDisabled
|
|
7080
7089
|
},
|
|
7081
|
-
/* @__PURE__ */
|
|
7090
|
+
/* @__PURE__ */ React102.createElement(
|
|
7082
7091
|
import_ui51.IconButton,
|
|
7083
7092
|
{
|
|
7084
7093
|
onClick: toggleInfotip,
|
|
@@ -7098,10 +7107,10 @@ function TooltipOrInfotip({
|
|
|
7098
7107
|
isDisabled
|
|
7099
7108
|
}) {
|
|
7100
7109
|
if (isDisabled) {
|
|
7101
|
-
return /* @__PURE__ */
|
|
7110
|
+
return /* @__PURE__ */ React102.createElement(import_ui51.Box, { sx: { display: "inline-flex" } }, children);
|
|
7102
7111
|
}
|
|
7103
7112
|
if (showInfotip) {
|
|
7104
|
-
return /* @__PURE__ */
|
|
7113
|
+
return /* @__PURE__ */ React102.createElement(React102.Fragment, null, /* @__PURE__ */ React102.createElement(
|
|
7105
7114
|
import_ui51.Backdrop,
|
|
7106
7115
|
{
|
|
7107
7116
|
open: showInfotip,
|
|
@@ -7111,7 +7120,7 @@ function TooltipOrInfotip({
|
|
|
7111
7120
|
zIndex: (theme) => theme.zIndex.modal - 1
|
|
7112
7121
|
}
|
|
7113
7122
|
}
|
|
7114
|
-
), /* @__PURE__ */
|
|
7123
|
+
), /* @__PURE__ */ React102.createElement(
|
|
7115
7124
|
import_ui51.Infotip,
|
|
7116
7125
|
{
|
|
7117
7126
|
placement: "top-end",
|
|
@@ -7123,20 +7132,20 @@ function TooltipOrInfotip({
|
|
|
7123
7132
|
children
|
|
7124
7133
|
));
|
|
7125
7134
|
}
|
|
7126
|
-
return /* @__PURE__ */
|
|
7135
|
+
return /* @__PURE__ */ React102.createElement(import_ui51.Tooltip, { title: (0, import_i18n73.__)("Style origin", "elementor"), placement: "top" }, children);
|
|
7127
7136
|
}
|
|
7128
7137
|
|
|
7129
7138
|
// src/styles-inheritance/components/styles-inheritance-indicator.tsx
|
|
7130
7139
|
var StylesInheritanceIndicator = ({
|
|
7131
7140
|
customContext
|
|
7132
7141
|
}) => {
|
|
7133
|
-
const context = (0,
|
|
7142
|
+
const context = (0, import_editor_controls68.useBoundProp)();
|
|
7134
7143
|
const { path, propType } = customContext || context;
|
|
7135
7144
|
const inheritanceChain = useStylesInheritanceChain(path);
|
|
7136
7145
|
if (!path || !inheritanceChain.length) {
|
|
7137
7146
|
return null;
|
|
7138
7147
|
}
|
|
7139
|
-
return /* @__PURE__ */
|
|
7148
|
+
return /* @__PURE__ */ React103.createElement(Indicator, { inheritanceChain, path, propType });
|
|
7140
7149
|
};
|
|
7141
7150
|
var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
7142
7151
|
const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
|
|
@@ -7152,7 +7161,7 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
7152
7161
|
getColor: isFinalValue && currentStyleProvider ? getStylesProviderThemeColor(currentStyleProvider.getKey()) : void 0,
|
|
7153
7162
|
isOverridden: hasValue && !isFinalValue ? true : void 0
|
|
7154
7163
|
};
|
|
7155
|
-
return /* @__PURE__ */
|
|
7164
|
+
return /* @__PURE__ */ React103.createElement(
|
|
7156
7165
|
StylesInheritanceInfotip,
|
|
7157
7166
|
{
|
|
7158
7167
|
inheritanceChain,
|
|
@@ -7161,17 +7170,17 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
|
|
|
7161
7170
|
label,
|
|
7162
7171
|
isDisabled
|
|
7163
7172
|
},
|
|
7164
|
-
/* @__PURE__ */
|
|
7173
|
+
/* @__PURE__ */ React103.createElement(StyleIndicator, { ...styleIndicatorProps })
|
|
7165
7174
|
);
|
|
7166
7175
|
};
|
|
7167
7176
|
var getLabel = ({ isFinalValue, hasValue }) => {
|
|
7168
7177
|
if (isFinalValue) {
|
|
7169
|
-
return (0,
|
|
7178
|
+
return (0, import_i18n74.__)("This is the final value", "elementor");
|
|
7170
7179
|
}
|
|
7171
7180
|
if (hasValue) {
|
|
7172
|
-
return (0,
|
|
7181
|
+
return (0, import_i18n74.__)("This value is overridden by another style", "elementor");
|
|
7173
7182
|
}
|
|
7174
|
-
return (0,
|
|
7183
|
+
return (0, import_i18n74.__)("This has value from another style", "elementor");
|
|
7175
7184
|
};
|
|
7176
7185
|
|
|
7177
7186
|
// src/styles-inheritance/init-styles-inheritance-transformers.ts
|
|
@@ -7192,7 +7201,7 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
|
|
|
7192
7201
|
]);
|
|
7193
7202
|
|
|
7194
7203
|
// src/styles-inheritance/transformers/array-transformer.tsx
|
|
7195
|
-
var
|
|
7204
|
+
var React104 = __toESM(require("react"));
|
|
7196
7205
|
var import_editor_canvas6 = require("@elementor/editor-canvas");
|
|
7197
7206
|
var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) => {
|
|
7198
7207
|
if (!values || values.length === 0) {
|
|
@@ -7202,16 +7211,16 @@ var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) =>
|
|
|
7202
7211
|
if (allStrings) {
|
|
7203
7212
|
return values.join(" ");
|
|
7204
7213
|
}
|
|
7205
|
-
return /* @__PURE__ */
|
|
7214
|
+
return /* @__PURE__ */ React104.createElement(React104.Fragment, null, values.map((item, index) => /* @__PURE__ */ React104.createElement(React104.Fragment, { key: index }, index > 0 && " ", item)));
|
|
7206
7215
|
});
|
|
7207
7216
|
|
|
7208
7217
|
// src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
|
|
7209
|
-
var
|
|
7218
|
+
var React105 = __toESM(require("react"));
|
|
7210
7219
|
var import_editor_canvas7 = require("@elementor/editor-canvas");
|
|
7211
7220
|
var import_ui52 = require("@elementor/ui");
|
|
7212
|
-
var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */
|
|
7221
|
+
var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React105.createElement(import_ui52.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React105.createElement(ItemLabelColor, { value })));
|
|
7213
7222
|
var ItemLabelColor = ({ value: { color } }) => {
|
|
7214
|
-
return /* @__PURE__ */
|
|
7223
|
+
return /* @__PURE__ */ React105.createElement("span", null, color);
|
|
7215
7224
|
};
|
|
7216
7225
|
var StyledUnstableColorIndicator = (0, import_ui52.styled)(import_ui52.UnstableColorIndicator)(({ theme }) => ({
|
|
7217
7226
|
width: "1em",
|
|
@@ -7222,20 +7231,20 @@ var StyledUnstableColorIndicator = (0, import_ui52.styled)(import_ui52.UnstableC
|
|
|
7222
7231
|
}));
|
|
7223
7232
|
|
|
7224
7233
|
// src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
|
|
7225
|
-
var
|
|
7234
|
+
var React106 = __toESM(require("react"));
|
|
7226
7235
|
var import_editor_canvas8 = require("@elementor/editor-canvas");
|
|
7227
7236
|
var import_ui53 = require("@elementor/ui");
|
|
7228
|
-
var
|
|
7229
|
-
var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */
|
|
7237
|
+
var import_i18n75 = require("@wordpress/i18n");
|
|
7238
|
+
var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React106.createElement(import_ui53.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React106.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React106.createElement(ItemLabelGradient, { value })));
|
|
7230
7239
|
var ItemIconGradient = ({ value }) => {
|
|
7231
7240
|
const gradient = getGradientValue(value);
|
|
7232
|
-
return /* @__PURE__ */
|
|
7241
|
+
return /* @__PURE__ */ React106.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
|
|
7233
7242
|
};
|
|
7234
7243
|
var ItemLabelGradient = ({ value }) => {
|
|
7235
7244
|
if (value.type === "linear") {
|
|
7236
|
-
return /* @__PURE__ */
|
|
7245
|
+
return /* @__PURE__ */ React106.createElement("span", null, (0, import_i18n75.__)("Linear gradient", "elementor"));
|
|
7237
7246
|
}
|
|
7238
|
-
return /* @__PURE__ */
|
|
7247
|
+
return /* @__PURE__ */ React106.createElement("span", null, (0, import_i18n75.__)("Radial gradient", "elementor"));
|
|
7239
7248
|
};
|
|
7240
7249
|
var getGradientValue = (gradient) => {
|
|
7241
7250
|
const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
|
|
@@ -7246,15 +7255,15 @@ var getGradientValue = (gradient) => {
|
|
|
7246
7255
|
};
|
|
7247
7256
|
|
|
7248
7257
|
// src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
|
|
7249
|
-
var
|
|
7258
|
+
var React107 = __toESM(require("react"));
|
|
7250
7259
|
var import_editor_canvas9 = require("@elementor/editor-canvas");
|
|
7251
7260
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
7252
7261
|
var import_ui54 = require("@elementor/ui");
|
|
7253
7262
|
var import_wp_media = require("@elementor/wp-media");
|
|
7254
|
-
var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */
|
|
7263
|
+
var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React107.createElement(import_ui54.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React107.createElement(ItemIconImage, { value }), /* @__PURE__ */ React107.createElement(ItemLabelImage, { value })));
|
|
7255
7264
|
var ItemIconImage = ({ value }) => {
|
|
7256
7265
|
const { imageUrl } = useImage(value);
|
|
7257
|
-
return /* @__PURE__ */
|
|
7266
|
+
return /* @__PURE__ */ React107.createElement(
|
|
7258
7267
|
import_ui54.CardMedia,
|
|
7259
7268
|
{
|
|
7260
7269
|
image: imageUrl,
|
|
@@ -7270,7 +7279,7 @@ var ItemIconImage = ({ value }) => {
|
|
|
7270
7279
|
};
|
|
7271
7280
|
var ItemLabelImage = ({ value }) => {
|
|
7272
7281
|
const { imageTitle } = useImage(value);
|
|
7273
|
-
return /* @__PURE__ */
|
|
7282
|
+
return /* @__PURE__ */ React107.createElement(import_editor_ui12.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React107.createElement("span", null, imageTitle));
|
|
7274
7283
|
};
|
|
7275
7284
|
var useImage = (image) => {
|
|
7276
7285
|
let imageTitle, imageUrl = null;
|
|
@@ -7295,7 +7304,7 @@ var getFileExtensionFromFilename = (filename) => {
|
|
|
7295
7304
|
};
|
|
7296
7305
|
|
|
7297
7306
|
// src/styles-inheritance/transformers/box-shadow-transformer.tsx
|
|
7298
|
-
var
|
|
7307
|
+
var React108 = __toESM(require("react"));
|
|
7299
7308
|
var import_editor_canvas10 = require("@elementor/editor-canvas");
|
|
7300
7309
|
var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
|
|
7301
7310
|
if (!value) {
|
|
@@ -7305,11 +7314,11 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
|
|
|
7305
7314
|
const colorValue = color || "#000000";
|
|
7306
7315
|
const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
|
|
7307
7316
|
const positionValue = position || "outset";
|
|
7308
|
-
return /* @__PURE__ */
|
|
7317
|
+
return /* @__PURE__ */ React108.createElement(React108.Fragment, null, colorValue, " ", positionValue, ", ", sizes);
|
|
7309
7318
|
});
|
|
7310
7319
|
|
|
7311
7320
|
// src/styles-inheritance/transformers/color-transformer.tsx
|
|
7312
|
-
var
|
|
7321
|
+
var React109 = __toESM(require("react"));
|
|
7313
7322
|
var import_editor_canvas11 = require("@elementor/editor-canvas");
|
|
7314
7323
|
var import_ui55 = require("@elementor/ui");
|
|
7315
7324
|
function isValidCSSColor(value) {
|
|
@@ -7329,7 +7338,7 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
|
|
|
7329
7338
|
if (!isValidCSSColor(value)) {
|
|
7330
7339
|
return value;
|
|
7331
7340
|
}
|
|
7332
|
-
return /* @__PURE__ */
|
|
7341
|
+
return /* @__PURE__ */ React109.createElement(import_ui55.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React109.createElement("span", null, value));
|
|
7333
7342
|
});
|
|
7334
7343
|
|
|
7335
7344
|
// src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
|