@useinsider/guido 3.0.0-beta.5c24c6a → 3.0.0-beta.6536dae

package/dist/components/Guido.vue.js

@@ -3,7 +3,7 @@ import i from "./Guido.vue2.js";
 import a from "../_virtual/_plugin-vue2_normalizer.js";
 var t = function() {
   var o = this, r = o._self._c, e = o._self._setupProxy;
-  return r("div", { ref: "wrapperRef", staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(p) {
+  return r("div", { staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(_) {
     return e.emit("onboarding:finished");
   } } }), r(e.UnsubscribeWrapper), r(e.LoadingWrapper)], 1);
 }, n = [], s = /* @__PURE__ */ a(
@@ -12,9 +12,9 @@ var t = function() {
   n,
   !1,
   null,
-  "25780af6"
+  "a26d7792"
 );
-const u = s.exports;
+const v = s.exports;
 export {
-  u as default
+  v as default
 };

package/dist/components/Guido.vue2.js

@@ -1,131 +1,121 @@
-import { defineComponent as j, defineAsyncComponent as R, ref as A, computed as I, watch as J, onMounted as Q, onUnmounted as X } from "vue";
-import { provideGuidoActions as Y } from "../composables/useGuidoActions.js";
-import { usePartner as Z } from "../composables/usePartner.js";
-import { useStripo as ee } from "../composables/useStripo.js";
-import { useTimerClone as te } from "../composables/useTimerClone.js";
-import { migrate as W } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as B } from "../enums/defaults.js";
-import { RIBBON_SELECTOR as oe } from "../enums/onboarding.js";
-import ne from "./organisms/base/Toaster.vue.js";
-import se from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import re from "./organisms/header/HeaderWrapper.vue.js";
-import ce from "./organisms/LoadingWrapper.vue.js";
-import ae from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import ie from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as me } from "../services/stripoApi.js";
-import { useConfigStore as de } from "../stores/config.js";
-import { useDynamicContentStore as le } from "../stores/dynamic-content.js";
-import { useEditorStore as ue } from "../stores/editor.js";
-import { usePreviewStore as pe } from "../stores/preview.js";
-import { useUnsubscribeStore as fe } from "../stores/unsubscribe.js";
-const Re = /* @__PURE__ */ j({
+import { defineComponent as K, defineAsyncComponent as _, ref as V, computed as P, watch as j, onMounted as q, onUnmounted as J } from "vue";
+import { provideGuidoActions as Q } from "../composables/useGuidoActions.js";
+import { usePartner as X } from "../composables/usePartner.js";
+import { useStripo as Y } from "../composables/useStripo.js";
+import { useTimerClone as Z } from "../composables/useTimerClone.js";
+import { migrate as A } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as N } from "../enums/defaults.js";
+import $ from "./organisms/base/Toaster.vue.js";
+import ee from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import oe from "./organisms/header/HeaderWrapper.vue.js";
+import te from "./organisms/LoadingWrapper.vue.js";
+import ne from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import se from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as re } from "../services/stripoApi.js";
+import { useConfigStore as ce } from "../stores/config.js";
+import { useDynamicContentStore as ae } from "../stores/dynamic-content.js";
+import { useEditorStore as ie } from "../stores/editor.js";
+import { usePreviewStore as me } from "../stores/preview.js";
+import { useUnsubscribeStore as de } from "../stores/unsubscribe.js";
+const Me = /* @__PURE__ */ K({
   __name: "Guido",
   props: {
     config: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
-  setup(H, { expose: x, emit: s }) {
-    const b = H, G = R(
+  setup(W, { expose: I, emit: t }) {
+    const v = W, O = _(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), z = R(
+    ), G = _(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), S = A(), d = A(), l = le(), g = fe(), a = de();
-    a.init(b.config);
-    const u = ue(), q = pe(), i = I(() => u.hasChanges), { isTestPartner: K } = Z(), w = () => {
+    ), h = V(), i = ae(), y = de(), s = ce();
+    s.init(v.config);
+    const m = ie(), H = me(), c = P(() => m.hasChanges), { isTestPartner: x } = X(), f = () => {
       var e;
-      return (e = S.value) == null ? void 0 : e.handleSave(!0);
+      return (e = h.value) == null ? void 0 : e.handleSave(!0);
     }, {
-      templateId: p,
-      userId: E,
-      partnerName: D,
-      username: C,
-      template: t,
-      editor: r
-    } = a, m = (t == null ? void 0 : t.html) || "", T = (t == null ? void 0 : t.css) || "", f = (t == null ? void 0 : t.preselectedDynamicContent) || [], k = (r == null ? void 0 : r.savedModulesFolderName) || B.SAVED_MODULES, F = (r == null ? void 0 : r.defaultModulesFolderName) || B.DEFAULT_MODULES;
-    u.templateId = p;
-    const v = {
-      emailId: p,
-      userId: E,
-      username: C,
-      partnerName: D,
-      savedModulesFolderName: k,
-      defaultModulesFolderName: F
-    }, L = {
-      preselectedDynamicContentList: f,
+      templateId: d,
+      userId: b,
+      partnerName: S,
+      username: g,
+      template: o,
+      editor: n
+    } = s, a = (o == null ? void 0 : o.html) || "", D = (o == null ? void 0 : o.css) || "", l = (o == null ? void 0 : o.preselectedDynamicContent) || [], w = (n == null ? void 0 : n.savedModulesFolderName) || N.SAVED_MODULES, E = (n == null ? void 0 : n.defaultModulesFolderName) || N.DEFAULT_MODULES;
+    m.templateId = d;
+    const u = {
+      emailId: d,
+      userId: b,
+      username: g,
+      partnerName: S,
+      savedModulesFolderName: w,
+      defaultModulesFolderName: E
+    }, C = {
+      preselectedDynamicContentList: l,
       onReady: () => {
-        console.debug("guido:ready"), s("ready");
+        console.debug("guido:ready"), t("ready");
       }
-    }, { initPlugin: U } = ee(v, L), { getDefaultTemplate: _ } = me(), { cloneTimersOnSave: M, hasTimerBlocks: O } = te(), V = I(() => {
+    }, { initPlugin: T } = Y(u, C), { getDefaultTemplate: k } = re(), { cloneTimersOnSave: F, hasTimerBlocks: U } = Z(), B = P(() => {
       var e;
-      return !((e = a.ui) != null && e.showHeader);
+      return !((e = s.ui) != null && e.showHeader);
     });
-    Y({
+    Q({
       onBack: () => {
-        console.debug("guido:back"), s("back");
+        console.debug("guido:back"), t("back");
       },
       onSaveStart: () => {
-        console.debug("guido:save:start"), s("save:start");
+        console.debug("guido:save:start"), t("save:start");
       },
       onSaveComplete: (e) => {
-        const n = { ...e, metadata: v };
-        console.debug("guido:save:complete", n), s("save:complete", n);
+        const r = { ...e, metadata: u };
+        console.debug("guido:save:complete", r), t("save:complete", r);
       },
       onTestEmailClick: () => {
-        console.debug("guido:test-email:click"), s("test-email:click");
+        console.debug("guido:test-email:click"), t("test-email:click");
       }
     });
-    const P = (e) => {
-      console.debug("dynamic-content:close", e), l.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, N = () => {
+    const L = (e) => {
+      console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    }, M = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    J(() => i.value, () => {
-      s("on-change", i.value);
+    j(() => c.value, () => {
+      t("on-change", c.value);
     });
-    const y = (e) => {
-      const n = e, { attribute: o, position: $ } = n.detail;
-      console.debug("dynamic-content:open", n.detail), s("dynamic-content:open", o, $);
+    const p = (e) => {
+      const r = e, { attribute: R, position: z } = r.detail;
+      console.debug("dynamic-content:open", r.detail), t("dynamic-content:open", R, z);
     };
-    let c = null;
-    const h = () => {
-      var n;
-      const e = document.querySelector(oe);
-      (n = d.value) == null || n.style.setProperty("--ribbon-offset", `${(e == null ? void 0 : e.offsetHeight) ?? 0}px`);
-    };
-    return Q(async () => {
-      var n;
-      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), h();
-      const e = (n = d.value) == null ? void 0 : n.parentElement;
-      e && (c = new ResizeObserver(h), c.observe(e));
+    return q(async () => {
+      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
-        g.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
-        let o = {
-          html: m && await W(m),
-          css: T
+        y.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
+        let e = {
+          html: a && await A(a),
+          css: D
         };
-        o.html || (o = await _(), o.html = await W(o.html)), O(o.html) && (o.html = await M(o.html)), await U(o), l.selectedDynamicContentList = f;
-      } catch (o) {
-        console.error("Failed to initialize Stripo editor:", o);
+        e.html || (e = await k(), e.html = await A(e.html)), U(e.html) && (e.html = await F(e.html)), await T(e), i.selectedDynamicContentList = l;
+      } catch (e) {
+        console.error("Failed to initialize Stripo editor:", e);
       }
-      document.addEventListener("dynamic-content:open", y);
-    }), X(() => {
-      c == null || c.disconnect(), document.removeEventListener("dynamic-content:open", y);
+      document.addEventListener("dynamic-content:open", p);
+    }), J(() => {
+      document.removeEventListener("dynamic-content:open", p);
       try {
         window.UIEditor.removeEditor();
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
-      a.reset();
-    }), x({
+      s.reset();
+    }), I({
       dynamicContent: {
-        insert: P,
-        close: N
+        insert: L,
+        close: M
       },
-      hasChanges: i,
-      saveSilent: w
-    }), { __sfc: !0, PreviewContainer: G, OnboardingWrapper: z, headerWrapperRef: S, wrapperRef: d, dynamicContentStore: l, unsubscribeStore: g, props: b, configStore: a, editorStore: u, previewStore: q, hasChanges: i, isTestPartner: K, saveSilent: w, templateId: p, userId: E, partnerName: D, username: C, templateConfig: t, editorConfig: r, html: m, css: T, preselectedDynamicContentList: f, savedModulesFolderName: k, defaultModulesFolderName: F, emit: s, metadata: v, options: L, initPlugin: U, getDefaultTemplate: _, cloneTimersOnSave: M, hasTimerBlocks: O, noHeader: V, insertDynamicContent: P, closeDynamicContent: N, handleDynamicContentOpen: y, ribbonObserver: c, updateRibbonOffset: h, Toaster: ne, FilterSelectionDrawer: se, HeaderWrapper: re, LoadingWrapper: ce, SaveAsTemplateDrawer: ae, UnsubscribeWrapper: ie };
+      hasChanges: c,
+      saveSilent: f
+    }), { __sfc: !0, PreviewContainer: O, OnboardingWrapper: G, headerWrapperRef: h, dynamicContentStore: i, unsubscribeStore: y, props: v, configStore: s, editorStore: m, previewStore: H, hasChanges: c, isTestPartner: x, saveSilent: f, templateId: d, userId: b, partnerName: S, username: g, templateConfig: o, editorConfig: n, html: a, css: D, preselectedDynamicContentList: l, savedModulesFolderName: w, defaultModulesFolderName: E, emit: t, metadata: u, options: C, initPlugin: T, getDefaultTemplate: k, cloneTimersOnSave: F, hasTimerBlocks: U, noHeader: B, insertDynamicContent: L, closeDynamicContent: M, handleDynamicContentOpen: p, Toaster: $, FilterSelectionDrawer: ee, HeaderWrapper: oe, LoadingWrapper: te, SaveAsTemplateDrawer: ne, UnsubscribeWrapper: se };
   }
 });
 export {
-  Re as default
+  Me as default
 };

package/dist/config/i18n/en/tooltips.json.js

@@ -75,7 +75,8 @@ const e = {
   "The image with the invalid link cannot be saved to the image gallery": "Enter a valid image link to continue.",
   "The data source link is unavailable. Please, make sure there is an access to the data source.": "Enter an accessible Data Source Link to contiue.",
   "The file should not exceed the maximum resolution of {maxImageResolution}px.": "Upload files up to 1024x512 pixels to continue.",
-  "The option is disabled because was overridden in the Code editor": "The option is disabled because it was overridden in the Code Editor."
+  "The option is disabled because was overridden in the Code editor": "The option is disabled because it was overridden in the Code Editor.",
+  "Dropdown with a list of available data services, preliminarily created in the Data section → Services tab of the Account.": "Service for Data Collection lets you enter a form submission URL for the recipients to submit."
 };
 export {
   e as default

package/dist/extensions/Blocks/Recommendation/block.js

@@ -40,6 +40,9 @@ class T extends B {
       this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.")
     );
   }
+  allowInnerBlocksDND() {
+    return !1;
+  }
   /**
    * Returns the template HTML for a new recommendation block.
    * Generates a unique recommendation ID and embeds the instance class
@@ -148,7 +151,7 @@ class T extends B {
       if (e && e.includes(c))
         return t;
     }
-    return "querySelector" in t ? t.querySelector(`.${c}`) : null;
+    return "querySelector" in t ? t.querySelector(`.${c}`) ?? null : null;
   }
   /**
    * Migrate configuration from legacy format

package/dist/extensions/Blocks/Recommendation/controls/main/utils.js

@@ -16,7 +16,7 @@ function A(t) {
     if (e && e.includes(M))
       return t;
   }
-  return "querySelector" in t ? t.querySelector(`.${M}`) : null;
+  return "querySelector" in t ? t.querySelector(`.${M}`) ?? null : null;
 }
 function b(t) {
   const e = A(t);

package/dist/extensions/Blocks/Recommendation/controls/spacing/index.js

@@ -1,15 +1,15 @@
-var G = Object.defineProperty;
-var R = (p, c, t) => c in p ? G(p, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[c] = t;
-var h = (p, c, t) => R(p, typeof c != "symbol" ? c + "" : c, t);
-import { EditorStatePropertyType as y, PreviewDeviceMode as w, ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as V } from "../../../common-control.js";
-import { DESKTOP_CONTAINER_SELECTOR as m, MOBILE_CONTAINER_SELECTOR as E } from "../../constants/selectors.js";
-import { SPACING_STEP as S, MAX_SPACING as _, MIN_SPACING as N, DEFAULT_COLUMN_SPACING as C, DEFAULT_ROW_SPACING as P } from "../../constants/layout.js";
+var R = Object.defineProperty;
+var w = (u, s, t) => s in u ? R(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
+var C = (u, s, t) => w(u, typeof s != "symbol" ? s + "" : s, t);
+import { EditorStatePropertyType as E, PreviewDeviceMode as V, ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as B } from "../../../common-control.js";
+import { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as P } from "../../constants/selectors.js";
+import { SPACING_STEP as _, MAX_SPACING as N, MIN_SPACING as b, DEFAULT_COLUMN_SPACING as g, DEFAULT_ROW_SPACING as G } from "../../constants/layout.js";
 import { RecommendationConfigService as d } from "../../services/configService.js";
-import { useRecommendationExtensionStore as B } from "../../store/recommendation.js";
-import { safeGetStyle as A, safeGetParent as U } from "../../utils/tagName.js";
-import { getCurrentLayout as b, getBlockElement as x } from "../main/utils.js";
-import { useDebounceFn as f } from "../../../../../node_modules/@vueuse/shared/index.js";
+import { useRecommendationExtensionStore as U } from "../../store/recommendation.js";
+import { safeGetStyle as L, safeGetParent as I } from "../../utils/tagName.js";
+import { getCurrentLayout as f, getBlockElement as x } from "../main/utils.js";
+import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
 const W = "recommendation-spacing-control", i = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
@@ -19,46 +19,46 @@ const W = "recommendation-spacing-control", i = {
   MOBILE_COLUMN_SPACING_LABEL: "mobileColumnSpacingLabel",
   MOBILE_ROW_SPACING: "mobileRowSpacing",
   MOBILE_ROW_SPACING_LABEL: "mobileRowSpacingLabel"
-}, O = {
+}, A = {
   COLUMN_SPACING: "data-column-spacing",
   ROW_SPACING: "data-row-spacing",
   MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
   MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-function L(p, c) {
-  if (!p)
-    return c;
-  const t = parseFloat(p);
-  return Number.isNaN(t) ? c : t;
+function M(u, s) {
+  if (!u)
+    return s;
+  const t = parseFloat(u);
+  return Number.isNaN(t) ? s : t;
 }
-class X extends V {
+class X extends B {
   constructor() {
     super(...arguments);
-    h(this, "store", B());
-    h(this, "unsubscribeOrientation", null);
+    C(this, "store", U());
+    C(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
      * Prevents excessive DOM updates when user rapidly adjusts the counter
      */
-    h(this, "_debouncedOnColumnSpacingChange", f((t) => {
+    C(this, "_debouncedOnColumnSpacingChange", O((t) => {
       this._onColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onRowSpacingChange
      */
-    h(this, "_debouncedOnRowSpacingChange", f((t) => {
+    C(this, "_debouncedOnRowSpacingChange", O((t) => {
       this._onRowSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileColumnSpacingChange
      */
-    h(this, "_debouncedOnMobileColumnSpacingChange", f((t) => {
+    C(this, "_debouncedOnMobileColumnSpacingChange", O((t) => {
       this._onMobileColumnSpacingChange(t);
     }, 300));
     /**
      * Debounced version of _onMobileRowSpacingChange
      */
-    h(this, "_debouncedOnMobileRowSpacingChange", f((t) => {
+    C(this, "_debouncedOnMobileRowSpacingChange", O((t) => {
       this._onMobileRowSpacingChange(t);
     }, 300));
   }
@@ -72,16 +72,16 @@ class X extends V {
       this._GuLabel({ text: "Column Spacing on Desktop (px)", name: i.COLUMN_SPACING_LABEL }),
       this._GuCounter({
         name: i.COLUMN_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({ text: "Row Spacing on Desktop (px)", name: i.ROW_SPACING_LABEL }),
       this._GuCounter({
         name: i.ROW_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({
         text: "Column Spacing on Mobile (px)",
@@ -89,16 +89,16 @@ class X extends V {
       }),
       this._GuCounter({
         name: i.MOBILE_COLUMN_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({ text: "Row Spacing on Mobile (px)", name: i.MOBILE_ROW_SPACING_LABEL }),
       this._GuCounter({
         name: i.MOBILE_ROW_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       })
     ])}
             </div>
@@ -118,7 +118,7 @@ class X extends V {
    * using Stripo's EditorStatePropertyType API.
    */
   _isMobileMode() {
-    return this.api.getEditorState()[y.previewDeviceMode] === w.MOBILE;
+    return this.api.getEditorState()[E.previewDeviceMode] === V.MOBILE;
   }
   /**
    * Updates spacing control visibility based on layout orientation, editor mode,
@@ -132,8 +132,8 @@ class X extends V {
   _updateSpacingVisibility() {
     if (!this.api)
       return;
-    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, n = t.layout || e || b(this.currentNode), o = n === "grid", a = n === "list", r = this._isMobileMode(), l = t.cardsInRow > 1, u = t.mobileCardsInRow > 1;
-    this.api.setVisibility(i.COLUMN_SPACING, o && !r && l), this.api.setVisibility(i.COLUMN_SPACING_LABEL, o && !r && l), this.api.setVisibility(i.ROW_SPACING, a || !r), this.api.setVisibility(i.ROW_SPACING_LABEL, a || !r), this.api.setVisibility(i.MOBILE_COLUMN_SPACING, o && r && u), this.api.setVisibility(i.MOBILE_COLUMN_SPACING_LABEL, o && r && u), this.api.setVisibility(i.MOBILE_ROW_SPACING, !a && r), this.api.setVisibility(i.MOBILE_ROW_SPACING_LABEL, !a && r);
+    const t = d.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, n = t.layout || e || f(this.currentNode), o = n === "grid", a = n === "list", r = this._isMobileMode(), c = t.cardsInRow > 1, l = t.mobileCardsInRow > 1;
+    this.api.setVisibility(i.COLUMN_SPACING, o && !r && c), this.api.setVisibility(i.COLUMN_SPACING_LABEL, o && !r && c), this.api.setVisibility(i.ROW_SPACING, a || !r), this.api.setVisibility(i.ROW_SPACING_LABEL, a || !r), this.api.setVisibility(i.MOBILE_COLUMN_SPACING, o && r && l), this.api.setVisibility(i.MOBILE_COLUMN_SPACING_LABEL, o && r && l), this.api.setVisibility(i.MOBILE_ROW_SPACING, !a && r), this.api.setVisibility(i.MOBILE_ROW_SPACING_LABEL, !a && r);
   }
   /**
    * Reads spacing values from node config first, falls back to DOM styles.
@@ -159,20 +159,20 @@ class X extends V {
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      return C;
-    const t = this.currentNode.querySelector(m) ?? this.currentNode;
-    if (b(this.currentNode) === "grid") {
-      const u = t.querySelector(".recommendation-attribute-row"), s = u == null ? void 0 : u.querySelector("td"), I = A(s, "padding");
-      if (!I)
-        return C;
-      const M = I.trim().split(/\s+/);
-      return M.length < 2 ? C : L(M[1], C / 2) * 2;
+      return g;
+    const t = this.currentNode.querySelector(S) ?? this.currentNode;
+    if (f(this.currentNode) === "grid") {
+      const l = t.querySelector(".recommendation-attribute-row"), p = l == null ? void 0 : l.querySelector("td"), h = L(p, "padding");
+      if (!h)
+        return g;
+      const y = h.trim().split(/\s+/);
+      return y.length < 2 ? g : M(y[1], g / 2) * 2;
     }
-    const n = t.querySelector(".product-card-wrapper"), o = U(n), a = A(o, "padding");
+    const n = t.querySelector(".product-card-wrapper"), o = I(n), a = L(o, "padding");
     if (!a)
-      return C;
+      return g;
     const r = a.trim().split(/\s+/);
-    return r.length < 2 ? C : L(r[1], C / 2) * 2;
+    return r.length < 2 ? g : M(r[1], g / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
@@ -180,9 +180,9 @@ class X extends V {
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return P;
-    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer"), n = A(e, "height");
-    return L(n, P);
+      return G;
+    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer"), n = L(e, "height");
+    return M(n, G);
   }
   // ========================================================================
   // Desktop Spacing Handlers
@@ -199,17 +199,18 @@ class X extends V {
       this.currentNode,
       { columnSpacing: t },
       `Changed column spacing to ${t}px`
-    ), this._storeDataAttribute(O.COLUMN_SPACING, t);
-    const n = d.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, l = this.currentNode.querySelector(m);
-    l && (n === "grid" ? Array.from(
-      l.querySelectorAll(".attribute-cell")
-    ).forEach((s) => {
-      o.modifyHtml(s).setStyle("padding", r);
+    ), this._storeDataAttribute(A.COLUMN_SPACING, t);
+    const n = d.getConfig(this.currentNode).layout || f(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(S);
+    c && (n === "grid" ? Array.from(
+      c.querySelectorAll(".attribute-cell")
+    ).forEach((p) => {
+      o.modifyHtml(p).setStyle("padding", r);
     }) : Array.from(
-      l.querySelectorAll(".product-card-wrapper")
-    ).forEach((s) => {
-      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", r);
-    }), o.apply(new g(`Update column spacing to ${t}px`)));
+      c.querySelectorAll(".product-card-wrapper")
+    ).forEach((p) => {
+      const h = I(p);
+      h && o.modifyHtml(h).setStyle("padding", r);
+    }), o.apply(new m(`Update column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for desktop.
@@ -223,8 +224,8 @@ class X extends V {
       this.currentNode,
       { rowSpacing: t },
       `Changed row spacing to ${t}px`
-    ), this._storeDataAttribute(O.ROW_SPACING, t);
-    const e = this.currentNode.querySelector(m);
+    ), this._storeDataAttribute(A.ROW_SPACING, t);
+    const e = this.currentNode.querySelector(S);
     if (!e)
       return;
     const n = Array.from(
@@ -235,7 +236,7 @@ class X extends V {
     const o = this.api.getDocumentModifier(), a = `${t}px`;
     n.forEach((r) => {
       o.modifyHtml(r).setStyle("height", a);
-    }), o.apply(new g(`Update row spacing to ${t}px`));
+    }), o.apply(new m(`Update row spacing to ${t}px`));
   }
   // ========================================================================
   // Mobile Spacing Handlers
@@ -252,17 +253,18 @@ class X extends V {
       this.currentNode,
       { mobileColumnSpacing: t },
       `Changed mobile column spacing to ${t}px`
-    ), this._storeDataAttribute(O.MOBILE_COLUMN_SPACING, t);
-    const n = d.getConfig(this.currentNode).layout || b(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, l = this.currentNode.querySelector(E);
-    l && (n === "grid" ? Array.from(
-      l.querySelectorAll(".attribute-cell")
-    ).forEach((s) => {
-      o.modifyHtml(s).setStyle("padding", r);
+    ), this._storeDataAttribute(A.MOBILE_COLUMN_SPACING, t);
+    const n = d.getConfig(this.currentNode).layout || f(this.currentNode), o = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(P);
+    c && (n === "grid" ? Array.from(
+      c.querySelectorAll(".attribute-cell")
+    ).forEach((p) => {
+      o.modifyHtml(p).setStyle("padding", r);
     }) : Array.from(
-      l.querySelectorAll(".product-card-wrapper")
-    ).forEach((s) => {
-      "parent" in s && s.parent() && o.modifyHtml(s.parent()).setStyle("padding", r);
-    }), o.apply(new g(`Update mobile column spacing to ${t}px`)));
+      c.querySelectorAll(".product-card-wrapper")
+    ).forEach((p) => {
+      const h = I(p);
+      h && o.modifyHtml(h).setStyle("padding", r);
+    }), o.apply(new m(`Update mobile column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for mobile.
@@ -276,8 +278,8 @@ class X extends V {
       this.currentNode,
       { mobileRowSpacing: t },
       `Changed mobile row spacing to ${t}px`
-    ), this._storeDataAttribute(O.MOBILE_ROW_SPACING, t);
-    const e = this.currentNode.querySelector(E);
+    ), this._storeDataAttribute(A.MOBILE_ROW_SPACING, t);
+    const e = this.currentNode.querySelector(P);
     if (!e)
       return;
     const n = Array.from(
@@ -288,7 +290,7 @@ class X extends V {
     const o = this.api.getDocumentModifier(), a = `${t}px`;
     n.forEach((r) => {
       o.modifyHtml(r).setStyle("height", a);
-    }), o.apply(new g(`Update mobile row spacing to ${t}px`));
+    }), o.apply(new m(`Update mobile row spacing to ${t}px`));
   }
   // ========================================================================
   // Data Attribute Storage
@@ -298,7 +300,7 @@ class X extends V {
    */
   _storeDataAttribute(t, e) {
     const n = x(this.currentNode);
-    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new g(`Store ${t}`));
+    n && this.api.getDocumentModifier().modifyHtml(n).setAttribute(t, e.toString()).apply(new m(`Store ${t}`));
   }
   // ========================================================================
   // Event Listeners
@@ -333,7 +335,7 @@ class X extends V {
    */
   _subscribeToEditorModeChanges() {
     this.api.onEditorStatePropUpdated(
-      y.previewDeviceMode,
+      E.previewDeviceMode,
       () => {
         this._updateSpacingVisibility();
       }

package/dist/extensions/Blocks/Recommendation/utils/tagName.js

@@ -1,10 +1,10 @@
 function a(t) {
   return typeof t == "object" && t !== null && "tagName" in t && typeof t.tagName == "string";
 }
-function r(t) {
+function n(t) {
   return typeof t == "object" && t !== null && "getTagName" in t && typeof t.getTagName == "function";
 }
-function n(t) {
+function r(t) {
   return typeof t == "object" && t !== null && "getStyle" in t && typeof t.getStyle == "function";
 }
 function u(t) {
@@ -14,13 +14,13 @@ function g(t) {
   return typeof t == "object" && t !== null && "tagName" in t && t.tagName === "TD";
 }
 function p(t, e) {
-  return !t || !n(t) ? null : t.getStyle(e);
+  return !t || !r(t) ? null : t.getStyle(e);
 }
 function N(t) {
-  return !t || !u(t) ? null : t.parent();
+  return !t || !u(t) ? null : t.parent() ?? null;
 }
 function l(t, e = "UNKNOWN") {
-  return t ? a(t) ? t.tagName.toUpperCase() : r(t) ? t.getTagName().toUpperCase() : e : e;
+  return t ? a(t) ? t.tagName.toUpperCase() : n(t) ? t.getTagName().toUpperCase() : e : e;
 }
 const f = /* @__PURE__ */ new Set(["TD", "BLOCK_IMAGE", "BLOCK_BUTTON"]);
 function i(t) {
@@ -36,7 +36,7 @@ function s(t) {
 export {
   s as getTableDisplayValue,
   l as getTagName,
-  n as hasGetStyle,
+  r as hasGetStyle,
   u as hasParent,
   c as isTableCellNode,
   i as isTableCellTag,