@useinsider/guido 3.1.0 → 3.1.1-beta.0b09ab4

package/dist/@types/config/schemas.js

@@ -61,7 +61,7 @@ const m = {
       value: t()
     })
   )
-}), R = o({
+}), A = o({
   /** Initial HTML content */
   html: e(t(), ""),
   /** Initial CSS content */
@@ -71,11 +71,13 @@ const m = {
     c(f),
     []
   ),
+  /** Valid custom field attribute names from the partner's categorized fields */
+  customFieldAttributes: e(c(t()), []),
   /** Selected unsubscribe page IDs */
   selectedUnsubscribePages: e(c(p()), []),
   /** Force recreate template in Stripo storage (use true when updating externally modified templates) */
   forceRecreate: e(a(), !1)
-}), A = o({
+}), R = o({
   /** Sender display name */
   senderName: e(t(), ""),
   /** Email subject line */
@@ -88,7 +90,7 @@ const m = {
   /** Migration date for template compatibility */
   migrationDate: e(p(), 1759696858),
   /** Email header settings */
-  emailHeader: e(A, { senderName: "", subject: "" }),
+  emailHeader: e(R, { senderName: "", subject: "" }),
   /** Folder name for user-saved modules (used by Stripo plugin panel for path construction) */
   savedModulesFolderName: e(t(), b.SAVED_MODULES),
   /** Folder name for default/prebuilt modules (used by Stripo plugin panel for path construction) */
@@ -205,7 +207,7 @@ const m = {
       "externalValidation must be a function"
     )
   )
-}), H = o({
+}), F = o({
   // Required sections
   /** Identity configuration (required) */
   identity: h,
@@ -213,7 +215,7 @@ const m = {
   partner: y,
   // Optional sections (with defaults)
   /** Template content and presets */
-  template: e(R, {}),
+  template: e(A, {}),
   /** Editor settings */
   editor: e(C, {}),
   /** UI configuration */
@@ -237,9 +239,9 @@ export {
   E as DefaultBlockTypeSchema,
   f as DynamicContentSchema,
   C as EditorSchema,
-  A as EmailHeaderSchema,
+  R as EmailHeaderSchema,
   I as FeaturesSchema,
-  H as GuidoConfigSchema,
+  F as GuidoConfigSchema,
   h as IdentitySchema,
   m as MessageType,
   y as PartnerSchema,
@@ -247,6 +249,6 @@ export {
   M as RegexRuleSchema,
   N as RemoveRuleSchema,
   L as ReplaceRuleSchema,
-  R as TemplateSchema,
+  A as TemplateSchema,
   T as UISchema
 };

package/dist/composables/useHtmlValidator.js

@@ -9,76 +9,76 @@ import { useHttp as j } from "./useHttp.js";
 import { useToaster as q } from "./useToaster.js";
 import { useTranslations as z } from "./useTranslations.js";
 const K = /recommendation-id="(\d+)"/g;
-function U(i) {
-  return [...i.matchAll(K)].map((u) => u[1]);
+function U(a) {
+  return [...a.matchAll(K)].map((u) => u[1]);
 }
-function Y(i, u) {
-  return u.some((d) => i.startsWith(`${d}_`));
+function Y(a, u) {
+  return u.some((d) => a.startsWith(`${d}_`));
 }
 const ce = () => {
   var y, h;
-  const { showToaster: i } = q(), { post: u } = j(), { config: d } = L(), r = z(), g = $(), p = ((h = (y = d.value) == null ? void 0 : y.partner) == null ? void 0 : h.messageType) === V.transactional, w = async (e) => {
+  const { showToaster: a } = q(), { post: u } = j(), { config: d } = L(), r = z(), g = $(), p = ((h = (y = d.value) == null ? void 0 : y.partner) == null ? void 0 : h.messageType) === V.transactional, b = async (e) => {
     const t = await u(
       "/newsletter/template-library/check-template-html-body",
       { html: X(e) }
     ), { status: n, message: l } = t.data;
-    return n || i({
+    return n || a({
       type: c.Alert,
       message: n === void 0 ? l : r("newsletter.invalid-url-link-for-toaster")
-    }), r(P), l === r(G) && i({
+    }), r(P), l === r(G) && a({
       type: c.Alert,
       message: r("newsletter.already-in-progress")
     }), n;
-  }, b = (e) => !["if", "endif", "else", "elif", "now"].includes(e.toLowerCase()), S = (e) => ["if", "endif"].includes(e.toLowerCase()), E = (e, s) => {
+  }, w = (e) => !["if", "endif", "else", "elif", "now"].includes(e.toLowerCase()), S = (e) => ["if", "endif"].includes(e.toLowerCase()), E = (e, s) => {
     const t = e.match(/({%(.*?)%})/g);
     let n = !0;
     return t !== null && !p && t.forEach((l) => {
       const o = l.slice(2, -2).trim().match(/(".*?"|[^"\s]+)(?=\s*|\s*$)/g);
       if (o && o.length > 0) {
-        const [a] = o;
-        b(a) && !s.includes(a) && (i({
+        const [i] = o;
+        w(i) && !s.includes(i) && (a({
           type: c.Warning,
           message: r("custom-fields.invalid-custom-fields")
         }), n = !1);
       }
     }), n;
   }, A = async (e, s, t) => {
-    const n = t ? await w(e) : !0;
+    const n = t ? await b(e) : !0;
     return E(e, s) && n;
-  }, I = (e) => e.length > 0 ? !0 : (i({
+  }, I = (e) => e.length > 0 ? !0 : (a({
     type: c.Warning,
     message: r("newsletter.html-content-is-empty")
   }), !1), k = (e) => {
     const s = (e.match(/{/gm) || []).length, t = (e.match(/}/gm) || []).length;
-    return s > t && i({
+    return s > t && a({
       type: c.Warning,
       message: r("custom-fields.missing-closing-braces")
-    }), s < t && i({
+    }), s < t && a({
       type: c.Warning,
       message: r("custom-fields.missing-opening-braces")
     }), s === t;
   }, x = (e) => {
     const s = e.match(/{{\s*(\w+\s+((\w+\|\w+)|(\w+)))\s*}}/gm) === null;
-    return s || i({
+    return s || a({
       type: c.Warning,
       message: r("custom-fields.invalid-custom-fields")
     }), s;
   }, T = (e, s) => {
     const t = e.match(/{{([a-zA-Z0-9_\s]*)}}/gm);
     if (t && !p) {
-      const n = new Set(s.map((a) => a.toLowerCase())), l = U(e), o = [];
-      if (t.forEach((a) => {
-        const m = a.slice(2, -2).trim().toLowerCase();
+      const n = new Set(s.map((i) => i.toLowerCase())), l = U(e), o = [];
+      if (t.forEach((i) => {
+        const m = i.slice(2, -2).trim().toLowerCase();
         (!n.has(m) || m === "") && !Y(m, l) && o.push(m);
       }), o.length > 0) {
-        const a = `
+        const i = `
                     <ul>
                         ${o.map((m) => `<li>${m}</li>`).join("")}
                     </ul>
                 `;
-        return i({
+        return a({
           type: c.Alert,
-          message: r("custom-fields.invalid-custom-fields") + a
+          message: r("custom-fields.invalid-custom-fields") + i
         }), !1;
       }
     }
@@ -87,12 +87,12 @@ const ce = () => {
     const s = e.match(/{%(.*?)%}/g), t = [];
     let n = !0;
     if (s && s.forEach((l) => {
-      const o = l.match(_), a = l.match(H), m = (o == null ? void 0 : o.join("")) || "";
-      (!o || l !== m) && !a && (i({
+      const o = l.match(_), i = l.match(H), m = (o == null ? void 0 : o.join("")) || "";
+      (!o || l !== m) && !i && (a({
         type: c.Alert,
         message: r("newsletter.display-conditions-invalid-syntax")
       }), n = !1), o && o.forEach((f) => {
-        f.trim() === "=" && (i({
+        f.trim() === "=" && (a({
           type: c.Alert,
           message: r("custom-conditions.wrong-equality-operators")
         }), n = !1);
@@ -102,8 +102,8 @@ const ce = () => {
         });
       });
     }), t.length) {
-      const l = t.filter((a) => a === "if"), o = t.filter((a) => a === "endif");
-      l.length !== o.length && (i({
+      const l = t.filter((i) => i === "if"), o = t.filter((i) => i === "endif");
+      l.length !== o.length && (a({
         type: c.Alert,
         message: r("custom-conditions.missing-if-endif-tag")
       }), n = !1);
@@ -111,45 +111,47 @@ const ce = () => {
     return n;
   }, W = (e) => {
     const s = (e.match(/{% /gm) || []).length, t = (e.match(/ %}/gm) || []).length, n = s === t;
-    return n || i({
+    return n || a({
       type: c.Warning,
       message: r("custom-conditions.no-space-after-braces")
     }), n;
-  }, N = (e) => (e.match(/({%(.*?)%})/g) || []).filter((t) => t.includes("if")).map((t) => (t.match(/{{.*}}/gm) || []).length).reduce((t, n) => t + n, 0) > 0 ? (i({
+  }, N = (e) => (e.match(/({%(.*?)%})/g) || []).filter((t) => t.includes("if")).map((t) => (t.match(/{{.*}}/gm) || []).length).reduce((t, n) => t + n, 0) > 0 ? (a({
     type: c.Warning,
     message: r("custom-conditions.no-braces-inside-if-tag")
-  }), !1) : !0, O = () => g.recommendationConfigs && Object.values(g.recommendationConfigs).find((s) => s.filters.find((t) => t.value === "")) !== void 0 ? (i({
+  }), !1) : !0, O = () => g.recommendationConfigs && Object.values(g.recommendationConfigs).find((s) => s.filters.find((t) => t.value === "")) !== void 0 ? (a({
     type: c.Alert,
     message: r("newsletter.fill-all-necessary-fields")
   }), !1) : !0, B = (e) => {
     const s = /src="[^"]*\.(svg|pst)"/gm;
-    return e.match(s) === null ? !0 : (i({
+    return e.match(s) === null ? !0 : (a({
       type: c.Alert,
       message: r("newsletter.invalid-image-type")
     }), !1);
   }, R = (e) => {
     const n = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".checkbox-block-v2");
     return Array.from(n).find((o) => {
-      var a;
-      return !((a = o.id) != null && a.trim());
-    }) ? (i({
+      var i;
+      return !((i = o.id) != null && i.trim());
+    }) ? (a({
       type: c.Alert,
       message: r("unsubscribe-templates.select-checkbox-groups")
     }), !1) : !0;
   }, D = (e) => {
     const n = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".radio-button-v2");
     return Array.from(n).find((o) => {
-      var a;
-      return !((a = o.id) != null && a.trim());
-    }) ? (i({
+      var i;
+      return !((i = o.id) != null && i.trim());
+    }) ? (a({
       type: c.Alert,
       message: r("unsubscribe-templates.select-radio-button-groups")
     }), !1) : !0;
   };
   return { validateHtml: async (e, s, t = !1) => {
+    var o, i;
     const n = [
-      ...s.map((o) => o.value),
-      ...M
+      ...s.map((m) => m.value),
+      ...M,
+      ...((i = (o = d.value) == null ? void 0 : o.template) == null ? void 0 : i.customFieldAttributes) ?? []
     ];
     return await A(e, n, t) && I(e) && k(e) && x(e) && T(e, n) && F(e) && W(e) && N(e) && O() && B(e) && R(e) && D(e);
   } };

package/dist/composables/useToaster.js

@@ -1,31 +1,33 @@
 import { ToasterTypeOptions as T } from "../enums/toaster.js";
-import { useToasterStore as u } from "../stores/toaster.js";
-import { watch as c } from "vue";
-const d = () => {
-  const t = u();
+import { useToasterStore as c } from "../stores/toaster.js";
+import { watch as u, nextTick as l } from "vue";
+const p = () => {
+  const t = c();
   let o = null;
   const s = () => {
     o && (clearTimeout(o), o = null);
   };
   function r(e = { message: "" }) {
-    s(), t.hideToaster(), t.showToaster(e);
+    s(), t.hideToaster(), l(() => {
+      t.showToaster(e);
+    });
   }
   function i() {
     s(), t.hideToaster();
   }
-  function a(e, n) {
+  function n(e, a) {
     const m = e instanceof Error ? e.message : String(e);
-    r({ type: T.Alert, message: `${n}: ${m}` });
+    r({ type: T.Alert, message: `${a}: ${m}` });
   }
-  return c(
+  return u(
     () => t.shouldAutoHide,
     (e) => {
       s(), e && (o = setTimeout(() => {
         t.hideToaster(), s();
       }, 6e3));
     }
-  ), { showToaster: r, hideToaster: i, handleError: a };
+  ), { showToaster: r, hideToaster: i, handleError: n };
 };
 export {
-  d as useToaster
+  p as useToaster
 };

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

@@ -169,7 +169,7 @@ class q extends b {
       if (e && e.includes(a))
         return t;
     }
-    return "querySelector" in t ? t.querySelector(`.${a}`) : null;
+    return "querySelector" in t ? t.querySelector(`.${a}`) ?? null : null;
   }
   /**
    * Migrate configuration from legacy format

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

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

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

@@ -1,15 +1,15 @@
-var G = Object.defineProperty;
-var P = (u, c, t) => c in u ? G(u, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[c] = t;
-var h = (u, c, t) => P(u, typeof c != "symbol" ? c + "" : c, t);
-import { ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as R } from "../../../common-control.js";
-import { DESKTOP_CONTAINER_SELECTOR as m, MOBILE_CONTAINER_SELECTOR as M } 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 E } from "../../constants/layout.js";
+var P = Object.defineProperty;
+var R = (l, s, t) => s in l ? P(l, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[s] = t;
+var C = (l, s, t) => R(l, typeof s != "symbol" ? s + "" : s, t);
+import { ModificationDescription as m } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as w } from "../../../common-control.js";
+import { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as E } 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 p } from "../../services/configService.js";
 import { useRecommendationExtensionStore as V } from "../../store/recommendation.js";
-import { safeGetStyle as A, safeGetParent as w } from "../../utils/tagName.js";
-import { getCurrentLayout as b, getBlockElement as B } from "../main/utils.js";
-import { useDebounceFn as f } from "../../../../../node_modules/@vueuse/shared/index.js";
+import { safeGetStyle as L, safeGetParent as I } from "../../utils/tagName.js";
+import { getCurrentLayout as f, getBlockElement as B } from "../main/utils.js";
+import { useDebounceFn as O } from "../../../../../node_modules/@vueuse/shared/index.js";
 const U = "recommendation-spacing-control", n = {
   COLUMN_SPACING: "columnSpacing",
   COLUMN_SPACING_LABEL: "columnSpacingLabel",
@@ -19,46 +19,46 @@ const U = "recommendation-spacing-control", n = {
   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(u, c) {
-  if (!u)
-    return c;
-  const t = parseFloat(u);
-  return Number.isNaN(t) ? c : t;
+function y(l, s) {
+  if (!l)
+    return s;
+  const t = parseFloat(l);
+  return Number.isNaN(t) ? s : t;
 }
-class j extends R {
+class j extends w {
   constructor() {
     super(...arguments);
-    h(this, "store", V());
-    h(this, "unsubscribeOrientation", null);
+    C(this, "store", V());
+    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));
   }
@@ -75,9 +75,9 @@ class j extends R {
       }),
       this._GuCounter({
         name: n.COLUMN_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({
         text: this.api.translate("Row Spacing (px)"),
@@ -85,9 +85,9 @@ class j extends R {
       }),
       this._GuCounter({
         name: n.ROW_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({
         text: this.api.translate("Column Spacing on Mobile (px)"),
@@ -95,9 +95,9 @@ class j extends R {
       }),
       this._GuCounter({
         name: n.MOBILE_COLUMN_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       }),
       this._GuLabel({
         text: this.api.translate("Row Spacing on Mobile (px)"),
@@ -105,9 +105,9 @@ class j extends R {
       }),
       this._GuCounter({
         name: n.MOBILE_ROW_SPACING,
-        minValue: N,
-        maxValue: _,
-        step: S
+        minValue: b,
+        maxValue: N,
+        step: _
       })
     ])}
             </div>
@@ -132,13 +132,13 @@ class j extends R {
   _updateSpacingVisibility() {
     if (!this.api)
       return;
-    const t = p.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || b(this.currentNode)) === "grid", { mobileLayoutEnabled: a } = t, r = t.cardsInRow > 1, l = t.mobileCardsInRow > 1;
+    const t = p.getConfig(this.currentNode), e = this.store.recommendationConfigs.orientation, i = (t.layout || e || f(this.currentNode)) === "grid", { mobileLayoutEnabled: a } = t, r = t.cardsInRow > 1, c = t.mobileCardsInRow > 1;
     this.api.setVisibility(n.COLUMN_SPACING, i && r), this.api.setVisibility(n.COLUMN_SPACING_LABEL, i && r), this.api.setVisibility(n.ROW_SPACING, !0), this.api.setVisibility(n.ROW_SPACING_LABEL, !0), this.api.setVisibility(
       n.MOBILE_COLUMN_SPACING,
-      i && a && l
+      i && a && c
     ), this.api.setVisibility(
       n.MOBILE_COLUMN_SPACING_LABEL,
-      i && a && l
+      i && a && c
     ), this.api.setVisibility(n.MOBILE_ROW_SPACING, i && a), this.api.setVisibility(n.MOBILE_ROW_SPACING_LABEL, i && a);
   }
   /**
@@ -165,20 +165,20 @@ class j extends R {
    */
   _getStoredColumnSpacing() {
     if (!this.currentNode)
-      return C;
-    const t = this.currentNode.querySelector(m) ?? this.currentNode;
-    if (b(this.currentNode) === "grid") {
-      const d = t.querySelector(".recommendation-attribute-row"), s = d == null ? void 0 : d.querySelector("td"), I = A(s, "padding");
-      if (!I)
-        return C;
-      const y = I.trim().split(/\s+/);
-      return y.length < 2 ? C : L(y[1], C / 2) * 2;
+      return g;
+    const t = this.currentNode.querySelector(S) ?? this.currentNode;
+    if (f(this.currentNode) === "grid") {
+      const h = t.querySelector(".recommendation-attribute-row"), u = h == null ? void 0 : h.querySelector("td"), d = L(u, "padding");
+      if (!d)
+        return g;
+      const M = d.trim().split(/\s+/);
+      return M.length < 2 ? g : y(M[1], g / 2) * 2;
     }
-    const o = t.querySelector(".product-card-wrapper"), i = w(o), a = A(i, "padding");
+    const o = t.querySelector(".product-card-wrapper"), i = I(o), a = L(i, "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 : y(r[1], g / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
@@ -186,9 +186,9 @@ class j extends R {
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return E;
-    const e = (this.currentNode.querySelector(m) ?? this.currentNode).querySelector(".spacer"), o = A(e, "height");
-    return L(o, E);
+      return G;
+    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer"), o = L(e, "height");
+    return y(o, G);
   }
   // ========================================================================
   // Desktop Spacing Handlers
@@ -205,17 +205,18 @@ class j extends R {
       this.currentNode,
       { columnSpacing: t },
       `Changed column spacing to ${t}px`
-    ), this._storeDataAttribute(O.COLUMN_SPACING, t);
-    const o = p.getConfig(this.currentNode).layout || b(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, l = this.currentNode.querySelector(m);
-    l && (o === "grid" ? Array.from(
-      l.querySelectorAll(".attribute-cell")
-    ).forEach((s) => {
-      i.modifyHtml(s).setStyle("padding", r);
+    ), this._storeDataAttribute(A.COLUMN_SPACING, t);
+    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(S);
+    c && (o === "grid" ? Array.from(
+      c.querySelectorAll(".attribute-cell")
+    ).forEach((u) => {
+      i.modifyHtml(u).setStyle("padding", r);
     }) : Array.from(
-      l.querySelectorAll(".product-card-wrapper")
-    ).forEach((s) => {
-      "parent" in s && s.parent() && i.modifyHtml(s.parent()).setStyle("padding", r);
-    }), i.apply(new g(`Update column spacing to ${t}px`)));
+      c.querySelectorAll(".product-card-wrapper")
+    ).forEach((u) => {
+      const d = I(u);
+      d && i.modifyHtml(d).setStyle("padding", r);
+    }), i.apply(new m(`Update column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for desktop.
@@ -229,8 +230,8 @@ class j extends R {
       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 o = Array.from(
@@ -241,7 +242,7 @@ class j extends R {
     const i = this.api.getDocumentModifier(), a = `${t}px`;
     o.forEach((r) => {
       i.modifyHtml(r).setStyle("height", a);
-    }), i.apply(new g(`Update row spacing to ${t}px`));
+    }), i.apply(new m(`Update row spacing to ${t}px`));
   }
   // ========================================================================
   // Mobile Spacing Handlers
@@ -258,17 +259,18 @@ class j extends R {
       this.currentNode,
       { mobileColumnSpacing: t },
       `Changed mobile column spacing to ${t}px`
-    ), this._storeDataAttribute(O.MOBILE_COLUMN_SPACING, t);
-    const o = p.getConfig(this.currentNode).layout || b(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, l = this.currentNode.querySelector(M);
-    l && (o === "grid" ? Array.from(
-      l.querySelectorAll(".attribute-cell")
-    ).forEach((s) => {
-      i.modifyHtml(s).setStyle("padding", r);
+    ), this._storeDataAttribute(A.MOBILE_COLUMN_SPACING, t);
+    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(E);
+    c && (o === "grid" ? Array.from(
+      c.querySelectorAll(".attribute-cell")
+    ).forEach((u) => {
+      i.modifyHtml(u).setStyle("padding", r);
     }) : Array.from(
-      l.querySelectorAll(".product-card-wrapper")
-    ).forEach((s) => {
-      "parent" in s && s.parent() && i.modifyHtml(s.parent()).setStyle("padding", r);
-    }), i.apply(new g(`Update mobile column spacing to ${t}px`)));
+      c.querySelectorAll(".product-card-wrapper")
+    ).forEach((u) => {
+      const d = I(u);
+      d && i.modifyHtml(d).setStyle("padding", r);
+    }), i.apply(new m(`Update mobile column spacing to ${t}px`)));
   }
   /**
    * Handles row spacing changes for mobile.
@@ -282,8 +284,8 @@ class j extends R {
       this.currentNode,
       { mobileRowSpacing: t },
       `Changed mobile row spacing to ${t}px`
-    ), this._storeDataAttribute(O.MOBILE_ROW_SPACING, t);
-    const e = this.currentNode.querySelector(M);
+    ), this._storeDataAttribute(A.MOBILE_ROW_SPACING, t);
+    const e = this.currentNode.querySelector(E);
     if (!e)
       return;
     const o = Array.from(
@@ -294,7 +296,7 @@ class j extends R {
     const i = this.api.getDocumentModifier(), a = `${t}px`;
     o.forEach((r) => {
       i.modifyHtml(r).setStyle("height", a);
-    }), i.apply(new g(`Update mobile row spacing to ${t}px`));
+    }), i.apply(new m(`Update mobile row spacing to ${t}px`));
   }
   // ========================================================================
   // Data Attribute Storage
@@ -304,7 +306,7 @@ class j extends R {
    */
   _storeDataAttribute(t, e) {
     const o = B(this.currentNode);
-    o && this.api.getDocumentModifier().modifyHtml(o).setAttribute(t, e.toString()).apply(new g(`Store ${t}`));
+    o && this.api.getDocumentModifier().modifyHtml(o).setAttribute(t, e.toString()).apply(new m(`Store ${t}`));
   }
   // ========================================================================
   // Event Listeners