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