@elementor/editor-editing-panel 4.0.0-607 → 4.0.0-619

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -96,8 +96,8 @@ function useClassesProp() {
96
96
  var React2 = __toESM(require("react"));
97
97
  var import_react2 = require("react");
98
98
  var Context2 = (0, import_react2.createContext)(null);
99
- function ElementProvider({ children, element, elementType }) {
100
- return /* @__PURE__ */ React2.createElement(Context2.Provider, { value: { element, elementType } }, children);
99
+ function ElementProvider({ children, element, elementType, settings }) {
100
+ return /* @__PURE__ */ React2.createElement(Context2.Provider, { value: { element, elementType, settings } }, children);
101
101
  }
102
102
  function useElement() {
103
103
  const context = (0, import_react2.useContext)(Context2);
@@ -106,6 +106,13 @@ function useElement() {
106
106
  }
107
107
  return context;
108
108
  }
109
+ function usePanelElementSetting(propKey) {
110
+ const context = (0, import_react2.useContext)(Context2);
111
+ if (!context) {
112
+ throw new Error("usePanelElementSetting must be used within a ElementProvider");
113
+ }
114
+ return context.settings[propKey] ?? null;
115
+ }
109
116
 
110
117
  // src/contexts/style-context.tsx
111
118
  var React3 = __toESM(require("react"));
@@ -212,7 +219,6 @@ var onConvert = (opts) => {
212
219
  // src/components/css-classes/css-class-selector.tsx
213
220
  var React10 = __toESM(require("react"));
214
221
  var import_react10 = require("react");
215
- var import_editor_elements4 = require("@elementor/editor-elements");
216
222
  var import_editor_styles_repository8 = require("@elementor/editor-styles-repository");
217
223
  var import_editor_ui3 = require("@elementor/editor-ui");
218
224
  var import_icons2 = require("@elementor/icons");
@@ -1360,9 +1366,8 @@ function hasReachedLimit(provider) {
1360
1366
  return provider.actions.all().length >= provider.limit;
1361
1367
  }
1362
1368
  function useAppliedOptions(options12) {
1363
- const { element } = useElement();
1364
1369
  const currentClassesProp = useClassesProp();
1365
- const appliedIds = (0, import_editor_elements4.useElementSetting)(element.id, currentClassesProp)?.value || [];
1370
+ const appliedIds = usePanelElementSetting(currentClassesProp)?.value ?? [];
1366
1371
  const appliedOptions = options12.filter((option) => option.value && appliedIds.includes(option.value));
1367
1372
  const hasElementsProviderStyleApplied = appliedOptions.some(
1368
1373
  (option) => option.provider && (0, import_editor_styles_repository8.isElementsStylesProvider)(option.provider)
@@ -1405,7 +1410,7 @@ var import_editor_styles4 = require("@elementor/editor-styles");
1405
1410
 
1406
1411
  // src/hooks/use-custom-css.ts
1407
1412
  var import_react13 = require("react");
1408
- var import_editor_elements6 = require("@elementor/editor-elements");
1413
+ var import_editor_elements5 = require("@elementor/editor-elements");
1409
1414
  var import_editor_props3 = require("@elementor/editor-props");
1410
1415
  var import_editor_styles3 = require("@elementor/editor-styles");
1411
1416
  var import_editor_styles_repository11 = require("@elementor/editor-styles-repository");
@@ -1414,7 +1419,7 @@ var import_utils2 = require("@elementor/utils");
1414
1419
 
1415
1420
  // src/hooks/use-styles-fields.ts
1416
1421
  var import_react12 = require("react");
1417
- var import_editor_elements5 = require("@elementor/editor-elements");
1422
+ var import_editor_elements4 = require("@elementor/editor-elements");
1418
1423
  var import_editor_styles2 = require("@elementor/editor-styles");
1419
1424
  var import_editor_styles_repository9 = require("@elementor/editor-styles-repository");
1420
1425
  var import_editor_styles_repository10 = require("@elementor/editor-styles-repository");
@@ -1472,20 +1477,20 @@ function useUndoableActions({
1472
1477
  return (0, import_editor_v1_adapters2.undoable)(
1473
1478
  {
1474
1479
  do: (payload) => {
1475
- if ((0, import_editor_elements5.shouldCreateNewLocalStyle)(payload)) {
1480
+ if ((0, import_editor_elements4.shouldCreateNewLocalStyle)(payload)) {
1476
1481
  return create(payload);
1477
1482
  }
1478
1483
  return update(payload);
1479
1484
  },
1480
1485
  undo: (payload, doReturn) => {
1481
- const wasLocalStyleCreated = (0, import_editor_elements5.shouldCreateNewLocalStyle)(payload);
1486
+ const wasLocalStyleCreated = (0, import_editor_elements4.shouldCreateNewLocalStyle)(payload);
1482
1487
  if (wasLocalStyleCreated) {
1483
1488
  return undoCreate(payload, doReturn);
1484
1489
  }
1485
1490
  return undo(payload, doReturn);
1486
1491
  },
1487
1492
  redo: (payload, doReturn) => {
1488
- const wasLocalStyleCreated = (0, import_editor_elements5.shouldCreateNewLocalStyle)(payload);
1493
+ const wasLocalStyleCreated = (0, import_editor_elements4.shouldCreateNewLocalStyle)(payload);
1489
1494
  if (wasLocalStyleCreated) {
1490
1495
  return create(payload, doReturn);
1491
1496
  }
@@ -1499,11 +1504,11 @@ function useUndoableActions({
1499
1504
  }
1500
1505
  );
1501
1506
  function create({ props }, redoArgs) {
1502
- const createdStyle = (0, import_editor_elements5.createElementStyle)({ ...createStyleArgs, props, styleId: redoArgs?.createdStyleId });
1507
+ const createdStyle = (0, import_editor_elements4.createElementStyle)({ ...createStyleArgs, props, styleId: redoArgs?.createdStyleId });
1503
1508
  return { createdStyleId: createdStyle };
1504
1509
  }
1505
1510
  function undoCreate(_, { createdStyleId }) {
1506
- (0, import_editor_elements5.deleteElementStyle)(elementId, createdStyleId);
1511
+ (0, import_editor_elements4.deleteElementStyle)(elementId, createdStyleId);
1507
1512
  }
1508
1513
  function update({ provider, styleId, props }) {
1509
1514
  if (!provider.actions.updateProps) {
@@ -1543,7 +1548,7 @@ var defaultHistoryTitles = {
1543
1548
  }
1544
1549
  };
1545
1550
  var localStyleHistoryTitles = {
1546
- title: ({ elementId }) => (0, import_editor_elements5.getElementLabel)(elementId),
1551
+ title: ({ elementId }) => (0, import_editor_elements4.getElementLabel)(elementId),
1547
1552
  subtitle: ({ propDisplayName }) => (
1548
1553
  // translators: %s is the name of the style property being edited
1549
1554
  (0, import_i18n6.__)(`%s edited`, "elementor").replace("%s", propDisplayName)
@@ -1611,19 +1616,19 @@ function useUndoableActions2({
1611
1616
  return (0, import_editor_v1_adapters3.undoable)(
1612
1617
  {
1613
1618
  do: (payload) => {
1614
- if ((0, import_editor_elements6.shouldCreateNewLocalStyle)(payload)) {
1619
+ if ((0, import_editor_elements5.shouldCreateNewLocalStyle)(payload)) {
1615
1620
  return create(payload);
1616
1621
  }
1617
1622
  return update(payload);
1618
1623
  },
1619
1624
  undo: (payload, doReturn) => {
1620
- if ((0, import_editor_elements6.shouldCreateNewLocalStyle)(payload)) {
1625
+ if ((0, import_editor_elements5.shouldCreateNewLocalStyle)(payload)) {
1621
1626
  return undoCreate(payload, doReturn);
1622
1627
  }
1623
1628
  return undoUpdate(payload, doReturn);
1624
1629
  },
1625
1630
  redo: (payload, doReturn) => {
1626
- if ((0, import_editor_elements6.shouldCreateNewLocalStyle)(payload)) {
1631
+ if ((0, import_editor_elements5.shouldCreateNewLocalStyle)(payload)) {
1627
1632
  return create(payload, doReturn);
1628
1633
  }
1629
1634
  return update(payload);
@@ -1636,7 +1641,7 @@ function useUndoableActions2({
1636
1641
  }
1637
1642
  );
1638
1643
  function create({ customCss }, redoArgs) {
1639
- const createdStyle = (0, import_editor_elements6.createElementStyle)({
1644
+ const createdStyle = (0, import_editor_elements5.createElementStyle)({
1640
1645
  ...createStyleArgs,
1641
1646
  props: {},
1642
1647
  custom_css: customCss ?? null,
@@ -1645,7 +1650,7 @@ function useUndoableActions2({
1645
1650
  return { createdStyleId: createdStyle };
1646
1651
  }
1647
1652
  function undoCreate(_, { createdStyleId }) {
1648
- (0, import_editor_elements6.deleteElementStyle)(elementId, createdStyleId);
1653
+ (0, import_editor_elements5.deleteElementStyle)(elementId, createdStyleId);
1649
1654
  }
1650
1655
  function update({ provider, styleId, customCss }) {
1651
1656
  if (!provider.actions.updateCustomCss) {
@@ -1737,7 +1742,7 @@ var hasInheritedCustomCss = (style, meta) => {
1737
1742
  // src/components/editing-panel.tsx
1738
1743
  var React81 = __toESM(require("react"));
1739
1744
  var import_editor_controls49 = require("@elementor/editor-controls");
1740
- var import_editor_elements13 = require("@elementor/editor-elements");
1745
+ var import_editor_elements12 = require("@elementor/editor-elements");
1741
1746
  var import_editor_panels = require("@elementor/editor-panels");
1742
1747
  var import_editor_ui7 = require("@elementor/editor-ui");
1743
1748
  var import_icons21 = require("@elementor/icons");
@@ -1966,6 +1971,7 @@ var controlTypes = {
1966
1971
  "html-tag": { component: import_editor_controls.HtmlTagControl, layout: "two-columns", propTypeUtil: import_editor_props4.stringPropTypeUtil },
1967
1972
  toggle: { component: import_editor_controls.ToggleControl, layout: "full", propTypeUtil: import_editor_props4.stringPropTypeUtil },
1968
1973
  "date-time": { component: import_editor_controls.DateTimeControl, layout: "full", propTypeUtil: import_editor_props4.DateTimePropTypeUtil },
1974
+ video: { component: import_editor_controls.VideoMediaControl, layout: "full", propTypeUtil: import_editor_props4.videoSrcPropTypeUtil },
1969
1975
  "inline-editing": { component: import_editor_controls.InlineEditingControl, layout: "full", propTypeUtil: import_editor_props4.htmlV3PropTypeUtil },
1970
1976
  email: { component: import_editor_controls.EmailFormActionControl, layout: "custom", propTypeUtil: import_editor_props4.emailPropTypeUtil }
1971
1977
  };
@@ -2052,7 +2058,7 @@ var React19 = __toESM(require("react"));
2052
2058
  var import_react18 = require("react");
2053
2059
  var import_editor_controls2 = require("@elementor/editor-controls");
2054
2060
  var import_editor_documents2 = require("@elementor/editor-documents");
2055
- var import_editor_elements7 = require("@elementor/editor-elements");
2061
+ var import_editor_elements6 = require("@elementor/editor-elements");
2056
2062
  var import_editor_props6 = require("@elementor/editor-props");
2057
2063
  var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
2058
2064
  var import_i18n7 = require("@wordpress/i18n");
@@ -2205,35 +2211,61 @@ var createTopLevelObjectType = ({ schema }) => {
2205
2211
 
2206
2212
  // src/controls-registry/settings-field.tsx
2207
2213
  var HISTORY_DEBOUNCE_WAIT2 = 800;
2214
+ var getElementSettigsWithDefaults = (propsSchema, elementSettings) => {
2215
+ const elementSettingsWithDefaults = { ...elementSettings };
2216
+ Object.keys(propsSchema).forEach((key) => {
2217
+ if (!(key in elementSettingsWithDefaults)) {
2218
+ if (propsSchema[key].default !== null) {
2219
+ elementSettingsWithDefaults[key] = propsSchema[key].default;
2220
+ }
2221
+ }
2222
+ });
2223
+ return elementSettingsWithDefaults;
2224
+ };
2225
+ var extractDependencyEffect = (bind, propsSchema, currentElementSettings) => {
2226
+ const elementSettingsForDepCheck = getElementSettigsWithDefaults(propsSchema, currentElementSettings);
2227
+ const propType = propsSchema[bind];
2228
+ const depCheck = (0, import_editor_props6.isDependencyMet)(propType?.dependencies, elementSettingsForDepCheck);
2229
+ const isHidden = !depCheck.isMet && !(0, import_editor_props6.isDependency)(depCheck.failingDependencies[0]) && depCheck.failingDependencies[0]?.effect === "hide";
2230
+ return {
2231
+ isDisabled: (prop) => {
2232
+ const result = !(0, import_editor_props6.isDependencyMet)(prop?.dependencies, elementSettingsForDepCheck).isMet;
2233
+ return result;
2234
+ },
2235
+ isHidden,
2236
+ settingsWithDefaults: elementSettingsForDepCheck
2237
+ };
2238
+ };
2208
2239
  var SettingsField = ({ bind, children, propDisplayName }) => {
2209
2240
  const {
2210
2241
  element: { id: elementId },
2211
- elementType: { propsSchema, dependenciesPerTargetMapping = {} }
2242
+ elementType: { propsSchema, dependenciesPerTargetMapping = {} },
2243
+ settings: currentElementSettings
2212
2244
  } = useElement();
2213
- const elementSettingValues = (0, import_editor_elements7.useElementSettings)(elementId, Object.keys(propsSchema));
2214
- const value = { [bind]: elementSettingValues?.[bind] ?? null };
2245
+ const value = { [bind]: currentElementSettings?.[bind] ?? null };
2215
2246
  const propType = createTopLevelObjectType({ schema: propsSchema });
2216
2247
  const undoableUpdateElementProp = useUndoableUpdateElementProp({
2217
2248
  elementId,
2218
2249
  propDisplayName
2219
2250
  });
2251
+ const { isDisabled, isHidden, settingsWithDefaults } = extractDependencyEffect(
2252
+ bind,
2253
+ propsSchema,
2254
+ currentElementSettings
2255
+ );
2256
+ if (isHidden) {
2257
+ return null;
2258
+ }
2220
2259
  const setValue = (newValue, _ = {}, meta) => {
2221
2260
  const { withHistory = true } = meta ?? {};
2222
2261
  const dependents = extractOrderedDependencies(dependenciesPerTargetMapping);
2223
- const settings = getUpdatedValues(newValue, dependents, propsSchema, elementSettingValues, elementId);
2262
+ const settings = getUpdatedValues(newValue, dependents, propsSchema, settingsWithDefaults, elementId);
2224
2263
  if (withHistory) {
2225
2264
  undoableUpdateElementProp(settings);
2226
2265
  } else {
2227
- (0, import_editor_elements7.updateElementSettings)({ id: elementId, props: settings, withHistory: false });
2266
+ (0, import_editor_elements6.updateElementSettings)({ id: elementId, props: settings, withHistory: false });
2228
2267
  }
2229
2268
  };
2230
- const isDisabled = (prop) => !(0, import_editor_props6.isDependencyMet)(prop?.dependencies, elementSettingValues).isMet;
2231
- const propTypeToBind = propsSchema[bind];
2232
- const dependenciesResult = (0, import_editor_props6.isDependencyMet)(propTypeToBind?.dependencies, elementSettingValues);
2233
- const shouldHide = !dependenciesResult.isMet && !(0, import_editor_props6.isDependency)(dependenciesResult.failingDependencies[0]) && dependenciesResult.failingDependencies[0]?.effect === "hide";
2234
- if (shouldHide) {
2235
- return null;
2236
- }
2237
2269
  return /* @__PURE__ */ React19.createElement(import_editor_controls2.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React19.createElement(import_editor_controls2.PropKeyProvider, { bind }, children));
2238
2270
  };
2239
2271
  function useUndoableUpdateElementProp({
@@ -2244,17 +2276,17 @@ function useUndoableUpdateElementProp({
2244
2276
  return (0, import_editor_v1_adapters4.undoable)(
2245
2277
  {
2246
2278
  do: (newSettings) => {
2247
- const prevPropValue = (0, import_editor_elements7.getElementSettings)(elementId, Object.keys(newSettings));
2248
- (0, import_editor_elements7.updateElementSettings)({ id: elementId, props: newSettings, withHistory: false });
2279
+ const prevPropValue = (0, import_editor_elements6.getElementSettings)(elementId, Object.keys(newSettings));
2280
+ (0, import_editor_elements6.updateElementSettings)({ id: elementId, props: newSettings, withHistory: false });
2249
2281
  (0, import_editor_documents2.setDocumentModifiedStatus)(true);
2250
2282
  return prevPropValue;
2251
2283
  },
2252
2284
  undo: ({}, prevProps) => {
2253
- (0, import_editor_elements7.updateElementSettings)({ id: elementId, props: prevProps, withHistory: false });
2285
+ (0, import_editor_elements6.updateElementSettings)({ id: elementId, props: prevProps, withHistory: false });
2254
2286
  }
2255
2287
  },
2256
2288
  {
2257
- title: (0, import_editor_elements7.getElementLabel)(elementId),
2289
+ title: (0, import_editor_elements6.getElementLabel)(elementId),
2258
2290
  // translators: %s is the name of the property that was edited.
2259
2291
  subtitle: (0, import_i18n7.__)("%s edited", "elementor").replace("%s", propDisplayName),
2260
2292
  debounce: { wait: HISTORY_DEBOUNCE_WAIT2 }
@@ -2385,7 +2417,7 @@ var import_i18n53 = require("@wordpress/i18n");
2385
2417
  // src/contexts/styles-inheritance-context.tsx
2386
2418
  var React23 = __toESM(require("react"));
2387
2419
  var import_react19 = require("react");
2388
- var import_editor_elements8 = require("@elementor/editor-elements");
2420
+ var import_editor_elements7 = require("@elementor/editor-elements");
2389
2421
  var import_editor_props9 = require("@elementor/editor-props");
2390
2422
  var import_editor_responsive2 = require("@elementor/editor-responsive");
2391
2423
  var import_editor_styles5 = require("@elementor/editor-styles");
@@ -2648,42 +2680,37 @@ function useStylesInheritanceChain(path) {
2648
2680
  return context.getInheritanceChain(snapshot, path, topLevelPropType);
2649
2681
  }
2650
2682
  var useAppliedStyles = () => {
2651
- const { element } = useElement();
2652
2683
  const currentClassesProp = useClassesProp();
2653
2684
  const baseStyles = useBaseStyles();
2654
2685
  useStylesRerender();
2655
- const classesProp = (0, import_editor_elements8.useElementSetting)(element.id, currentClassesProp);
2686
+ const classesProp = usePanelElementSetting(currentClassesProp);
2656
2687
  const appliedStyles = import_editor_props9.classesPropTypeUtil.extract(classesProp) ?? [];
2657
2688
  return import_editor_styles_repository12.stylesRepository.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
2658
2689
  };
2659
2690
  var useBaseStyles = () => {
2660
2691
  const { elementType } = useElement();
2661
- const widgetsCache = (0, import_editor_elements8.getWidgetsCache)();
2692
+ const widgetsCache = (0, import_editor_elements7.getWidgetsCache)();
2662
2693
  const widgetCache = widgetsCache?.[elementType.key];
2663
2694
  return Object.keys(widgetCache?.base_styles ?? {});
2664
2695
  };
2665
2696
 
2666
2697
  // src/hooks/use-active-style-def-id.ts
2667
- var import_editor_elements9 = require("@elementor/editor-elements");
2698
+ var import_editor_elements8 = require("@elementor/editor-elements");
2668
2699
  function useActiveStyleDefId(classProp) {
2669
2700
  const [activeStyledDefId, setActiveStyledDefId] = useStateByElement(
2670
2701
  "active-style-id",
2671
2702
  null
2672
2703
  );
2673
- const appliedClassesIds = useAppliedClassesIds(classProp)?.value || [];
2704
+ const appliedClassesIds = usePanelElementSetting(classProp)?.value || [];
2674
2705
  const fallback = useFirstAppliedClass(appliedClassesIds);
2675
2706
  const activeAndAppliedClassId = useActiveAndAppliedClassId(activeStyledDefId, appliedClassesIds);
2676
2707
  return [activeAndAppliedClassId || fallback?.id || null, setActiveStyledDefId];
2677
2708
  }
2678
2709
  function useFirstAppliedClass(appliedClassesIds) {
2679
2710
  const { element } = useElement();
2680
- const stylesDefs = (0, import_editor_elements9.getElementStyles)(element.id) ?? {};
2711
+ const stylesDefs = (0, import_editor_elements8.getElementStyles)(element.id) ?? {};
2681
2712
  return Object.values(stylesDefs).find((styleDef) => appliedClassesIds.includes(styleDef.id));
2682
2713
  }
2683
- function useAppliedClassesIds(classProp) {
2684
- const { element } = useElement();
2685
- return (0, import_editor_elements9.useElementSetting)(element.id, classProp);
2686
- }
2687
2714
  function useActiveAndAppliedClassId(id, appliedClassesIds) {
2688
2715
  const isClassApplied = !!id && appliedClassesIds.includes(id);
2689
2716
  return isClassApplied ? id : null;
@@ -2969,9 +2996,18 @@ var BorderSection = () => /* @__PURE__ */ React33.createElement(SectionContent,
2969
2996
  // src/components/style-sections/effects-section/effects-section.tsx
2970
2997
  var React37 = __toESM(require("react"));
2971
2998
  var import_editor_controls14 = require("@elementor/editor-controls");
2972
- var import_editor_elements11 = require("@elementor/editor-elements");
2973
2999
  var import_i18n15 = require("@wordpress/i18n");
2974
3000
 
3001
+ // src/utils/can-element-have-children.ts
3002
+ var import_editor_elements9 = require("@elementor/editor-elements");
3003
+ var canElementHaveChildren = (elementId) => {
3004
+ const container = (0, import_editor_elements9.getContainer)(elementId);
3005
+ if (!container) {
3006
+ return false;
3007
+ }
3008
+ return container.model.get("elType") !== "widget";
3009
+ };
3010
+
2975
3011
  // src/utils/get-recently-used-styles.ts
2976
3012
  var import_editor_canvas = require("@elementor/editor-canvas");
2977
3013
  var import_editor_elements10 = require("@elementor/editor-elements");
@@ -3050,9 +3086,10 @@ var TRANSFORM_LABEL = (0, import_i18n15.__)("Transform", "elementor");
3050
3086
  var BACKDROP_FILTER_LABEL = (0, import_i18n15.__)("Backdrop filters", "elementor");
3051
3087
  var TRANSITIONS_LABEL = (0, import_i18n15.__)("Transitions", "elementor");
3052
3088
  var EffectsSection = () => {
3053
- const { element } = (0, import_editor_elements11.useSelectedElement)();
3089
+ const { element } = useElement();
3054
3090
  const { meta } = useStyle();
3055
- return /* @__PURE__ */ React37.createElement(SectionContent, { gap: 1 }, /* @__PURE__ */ React37.createElement(BlendModeField, null), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(OpacityControlField, null), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React37.createElement(import_editor_controls14.BoxShadowRepeaterControl, null)), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "transform", propDisplayName: TRANSFORM_LABEL }, /* @__PURE__ */ React37.createElement(import_editor_controls14.TransformRepeaterControl, null)), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "transition", propDisplayName: TRANSITIONS_LABEL }, /* @__PURE__ */ React37.createElement(
3091
+ const canHaveChildren = canElementHaveChildren(element?.id ?? "");
3092
+ return /* @__PURE__ */ React37.createElement(SectionContent, { gap: 1 }, /* @__PURE__ */ React37.createElement(BlendModeField, null), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(OpacityControlField, null), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React37.createElement(import_editor_controls14.BoxShadowRepeaterControl, null)), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "transform", propDisplayName: TRANSFORM_LABEL }, /* @__PURE__ */ React37.createElement(import_editor_controls14.TransformRepeaterControl, { showChildrenPerspective: canHaveChildren })), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "transition", propDisplayName: TRANSITIONS_LABEL }, /* @__PURE__ */ React37.createElement(
3056
3093
  import_editor_controls14.TransitionRepeaterControl,
3057
3094
  {
3058
3095
  currentStyleState: meta.state,
@@ -3064,7 +3101,7 @@ var EffectsSection = () => {
3064
3101
  // src/components/style-sections/layout-section/layout-section.tsx
3065
3102
  var React49 = __toESM(require("react"));
3066
3103
  var import_editor_controls25 = require("@elementor/editor-controls");
3067
- var import_editor_elements12 = require("@elementor/editor-elements");
3104
+ var import_editor_elements11 = require("@elementor/editor-elements");
3068
3105
  var import_i18n27 = require("@wordpress/i18n");
3069
3106
 
3070
3107
  // src/hooks/use-computed-style.ts
@@ -3753,7 +3790,7 @@ var LayoutSection = () => {
3753
3790
  const displayPlaceholder = useDisplayPlaceholderValue();
3754
3791
  const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
3755
3792
  const { element } = useElement();
3756
- const parent = (0, import_editor_elements12.useParentElement)(element.id);
3793
+ const parent = (0, import_editor_elements11.useParentElement)(element.id);
3757
3794
  const parentStyle = useComputedStyle(parent?.id || null);
3758
3795
  const parentStyleDirection = parentStyle?.flexDirection ?? "row";
3759
3796
  return /* @__PURE__ */ React49.createElement(SectionContent, null, /* @__PURE__ */ React49.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React49.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React49.createElement(FlexChildFields, { parentStyleDirection }));
@@ -4703,7 +4740,7 @@ var PanelTabContent = () => {
4703
4740
  var { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = (0, import_locations4.createLocation)();
4704
4741
  var { useMenuItems } = import_menus.controlActionsMenu;
4705
4742
  var EditingPanel = () => {
4706
- const { element, elementType } = (0, import_editor_elements13.useSelectedElement)();
4743
+ const { element, elementType, settings } = (0, import_editor_elements12.useSelectedElementSettings)();
4707
4744
  const controlReplacements = (0, import_editor_controls49.getControlReplacements)();
4708
4745
  const menuItems = useMenuItems().default;
4709
4746
  if (!element || !elementType) {
@@ -4715,7 +4752,7 @@ var EditingPanel = () => {
4715
4752
  if (ReplacementComponent) {
4716
4753
  panelContent = /* @__PURE__ */ React81.createElement(ReplacementComponent, null);
4717
4754
  }
4718
- return /* @__PURE__ */ React81.createElement(import_ui36.ErrorBoundary, { fallback: /* @__PURE__ */ React81.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React81.createElement(import_session8.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React81.createElement(import_editor_ui7.ThemeProvider, null, /* @__PURE__ */ React81.createElement(import_editor_controls49.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React81.createElement(import_editor_controls49.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React81.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React81.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React81.createElement(PanelHeaderTopSlot, null), panelContent)))))));
4755
+ return /* @__PURE__ */ React81.createElement(import_ui36.ErrorBoundary, { fallback: /* @__PURE__ */ React81.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React81.createElement(import_session8.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React81.createElement(import_editor_ui7.ThemeProvider, null, /* @__PURE__ */ React81.createElement(import_editor_controls49.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React81.createElement(import_editor_controls49.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React81.createElement(ElementProvider, { element, elementType, settings }, /* @__PURE__ */ React81.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React81.createElement(PanelHeaderTopSlot, null), panelContent)))))));
4719
4756
  };
4720
4757
 
4721
4758
  // src/init.ts
@@ -4735,10 +4772,10 @@ var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__cre
4735
4772
  });
4736
4773
 
4737
4774
  // src/sync/is-atomic-widget-selected.ts
4738
- var import_editor_elements14 = require("@elementor/editor-elements");
4775
+ var import_editor_elements13 = require("@elementor/editor-elements");
4739
4776
  var isAtomicWidgetSelected = () => {
4740
- const selectedElements = (0, import_editor_elements14.getSelectedElements)();
4741
- const widgetCache = (0, import_editor_elements14.getWidgetsCache)();
4777
+ const selectedElements = (0, import_editor_elements13.getSelectedElements)();
4778
+ const widgetCache = (0, import_editor_elements13.getWidgetsCache)();
4742
4779
  if (selectedElements.length !== 1) {
4743
4780
  return false;
4744
4781
  }
@@ -4804,16 +4841,16 @@ var init = () => {
4804
4841
  // src/controls-registry/element-controls/tabs-control/tabs-control.tsx
4805
4842
  var React83 = __toESM(require("react"));
4806
4843
  var import_editor_controls53 = require("@elementor/editor-controls");
4807
- var import_editor_elements17 = require("@elementor/editor-elements");
4844
+ var import_editor_elements16 = require("@elementor/editor-elements");
4808
4845
  var import_editor_props16 = require("@elementor/editor-props");
4809
4846
  var import_icons22 = require("@elementor/icons");
4810
4847
  var import_ui37 = require("@elementor/ui");
4811
4848
  var import_i18n58 = require("@wordpress/i18n");
4812
4849
 
4813
4850
  // src/controls-registry/element-controls/get-element-by-type.ts
4814
- var import_editor_elements15 = require("@elementor/editor-elements");
4851
+ var import_editor_elements14 = require("@elementor/editor-elements");
4815
4852
  var getElementByType = (elementId, type) => {
4816
- const currentElement = (0, import_editor_elements15.getContainer)(elementId);
4853
+ const currentElement = (0, import_editor_elements14.getContainer)(elementId);
4817
4854
  if (!currentElement) {
4818
4855
  return null;
4819
4856
  }
@@ -4825,7 +4862,7 @@ var getElementByType = (elementId, type) => {
4825
4862
 
4826
4863
  // src/controls-registry/element-controls/tabs-control/use-actions.ts
4827
4864
  var import_editor_controls52 = require("@elementor/editor-controls");
4828
- var import_editor_elements16 = require("@elementor/editor-elements");
4865
+ var import_editor_elements15 = require("@elementor/editor-elements");
4829
4866
  var import_editor_props15 = require("@elementor/editor-props");
4830
4867
  var import_i18n57 = require("@wordpress/i18n");
4831
4868
  var TAB_ELEMENT_TYPE = "e-tab";
@@ -4843,12 +4880,12 @@ var useActions = () => {
4843
4880
  });
4844
4881
  items3.forEach(({ item, index }) => {
4845
4882
  const tabId = item.id;
4846
- const tabContentAreaContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
4883
+ const tabContentAreaContainer = (0, import_editor_elements15.getContainer)(tabContentAreaId);
4847
4884
  const tabContentId = tabContentAreaContainer?.children?.[index]?.id;
4848
4885
  if (!tabContentId) {
4849
4886
  throw new Error("Original content ID is required for duplication");
4850
4887
  }
4851
- (0, import_editor_elements16.duplicateElements)({
4888
+ (0, import_editor_elements15.duplicateElements)({
4852
4889
  elementIds: [tabId, tabContentId],
4853
4890
  title: (0, import_i18n57.__)("Duplicate Tab", "elementor"),
4854
4891
  onDuplicateElements: () => {
@@ -4871,10 +4908,10 @@ var useActions = () => {
4871
4908
  movedElementId,
4872
4909
  movedElementIndex
4873
4910
  }) => {
4874
- const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
4911
+ const tabContentContainer = (0, import_editor_elements15.getContainer)(tabContentAreaId);
4875
4912
  const tabContent = tabContentContainer?.children?.[movedElementIndex];
4876
- const movedElement = (0, import_editor_elements16.getContainer)(movedElementId);
4877
- const tabsMenu = (0, import_editor_elements16.getContainer)(tabsMenuId);
4913
+ const movedElement = (0, import_editor_elements15.getContainer)(movedElementId);
4914
+ const tabsMenu = (0, import_editor_elements15.getContainer)(tabsMenuId);
4878
4915
  if (!tabContent) {
4879
4916
  throw new Error("Content element is required");
4880
4917
  }
@@ -4886,7 +4923,7 @@ var useActions = () => {
4886
4923
  to: toIndex,
4887
4924
  defaultActiveTab
4888
4925
  });
4889
- (0, import_editor_elements16.moveElements)({
4926
+ (0, import_editor_elements15.moveElements)({
4890
4927
  title: (0, import_i18n57.__)("Reorder Tabs", "elementor"),
4891
4928
  moves: [
4892
4929
  {
@@ -4920,11 +4957,11 @@ var useActions = () => {
4920
4957
  items: items3,
4921
4958
  defaultActiveTab
4922
4959
  });
4923
- (0, import_editor_elements16.removeElements)({
4960
+ (0, import_editor_elements15.removeElements)({
4924
4961
  title: (0, import_i18n57.__)("Tabs", "elementor"),
4925
4962
  elementIds: items3.flatMap(({ item, index }) => {
4926
4963
  const tabId = item.id;
4927
- const tabContentContainer = (0, import_editor_elements16.getContainer)(tabContentAreaId);
4964
+ const tabContentContainer = (0, import_editor_elements15.getContainer)(tabContentAreaId);
4928
4965
  const tabContentId = tabContentContainer?.children?.[index]?.id;
4929
4966
  if (!tabContentId) {
4930
4967
  throw new Error("Content ID is required");
@@ -4948,14 +4985,14 @@ var useActions = () => {
4948
4985
  tabsMenuId,
4949
4986
  items: items3
4950
4987
  }) => {
4951
- const tabContentArea = (0, import_editor_elements16.getContainer)(tabContentAreaId);
4952
- const tabsMenu = (0, import_editor_elements16.getContainer)(tabsMenuId);
4988
+ const tabContentArea = (0, import_editor_elements15.getContainer)(tabContentAreaId);
4989
+ const tabsMenu = (0, import_editor_elements15.getContainer)(tabsMenuId);
4953
4990
  if (!tabContentArea || !tabsMenu) {
4954
4991
  throw new Error("Tab containers not found");
4955
4992
  }
4956
4993
  items3.forEach(({ index }) => {
4957
4994
  const position = index + 1;
4958
- (0, import_editor_elements16.createElements)({
4995
+ (0, import_editor_elements15.createElements)({
4959
4996
  title: (0, import_i18n57.__)("Tabs", "elementor"),
4960
4997
  elements: [
4961
4998
  {
@@ -5030,7 +5067,7 @@ var TabsControl = ({ label }) => {
5030
5067
  var TabsControlContent = ({ label }) => {
5031
5068
  const { element } = useElement();
5032
5069
  const { addItem, duplicateItem, moveItem, removeItem } = useActions();
5033
- const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, import_editor_elements17.useElementChildren)(element.id, {
5070
+ const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, import_editor_elements16.useElementChildren)(element.id, {
5034
5071
  [TAB_MENU_ELEMENT_TYPE]: TAB_ELEMENT_TYPE
5035
5072
  });
5036
5073
  const tabList = getElementByType(element.id, TAB_MENU_ELEMENT_TYPE);
@@ -5124,7 +5161,7 @@ var DefaultTabControl = ({ tabIndex }) => {
5124
5161
  )));
5125
5162
  };
5126
5163
  var TabLabelControl = ({ elementId }) => {
5127
- const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
5164
+ const editorSettings = (0, import_editor_elements16.useElementEditorSettings)(elementId);
5128
5165
  const label = editorSettings?.title ?? "";
5129
5166
  return /* @__PURE__ */ React83.createElement(import_ui37.Stack, { gap: 1 }, /* @__PURE__ */ React83.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n58.__)("Tab name", "elementor")), /* @__PURE__ */ React83.createElement(
5130
5167
  import_ui37.TextField,
@@ -5132,7 +5169,7 @@ var TabLabelControl = ({ elementId }) => {
5132
5169
  size: "tiny",
5133
5170
  value: label,
5134
5171
  onChange: ({ target }) => {
5135
- (0, import_editor_elements17.updateElementEditorSettings)({
5172
+ (0, import_editor_elements16.updateElementEditorSettings)({
5136
5173
  elementId,
5137
5174
  settings: { title: target.value }
5138
5175
  });