@useinsider/guido 2.0.0-beta.143201d → 2.0.0-beta.1c331b8

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

@@ -0,0 +1,48 @@
+import { createPaddingsControl as n, createTextBackgroundColorControl as e, createTextFontFamilyControl as C, createTextStyleControl as O, createTextSizeControl as S, createTextColorControl as I, createTextAlignControl as N } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as r } from "../../constants/selectors.js";
+import { OmnibusDiscountTextAfterControl as l } from "./textAfter.js";
+import { OmnibusDiscountTextBeforeControl as U } from "./textBefore.js";
+const i = N(
+  t.OMNIBUS_DISCOUNT_ALIGN,
+  o.OMNIBUS_DISCOUNT,
+  r
+), T = I(
+  t.OMNIBUS_DISCOUNT_COLOR,
+  o.OMNIBUS_DISCOUNT,
+  r
+), c = S(
+  t.OMNIBUS_DISCOUNT_SIZE,
+  o.OMNIBUS_DISCOUNT,
+  r
+), _ = O(
+  t.OMNIBUS_DISCOUNT_STYLE,
+  o.OMNIBUS_DISCOUNT,
+  r
+), m = C(
+  t.OMNIBUS_DISCOUNT_FONT_FAMILY,
+  o.OMNIBUS_DISCOUNT,
+  r
+), s = e(
+  t.OMNIBUS_DISCOUNT_BACKGROUND,
+  o.OMNIBUS_DISCOUNT,
+  r
+), B = n(
+  t.OMNIBUS_DISCOUNT_PADDINGS,
+  o.OMNIBUS_DISCOUNT,
+  r
+), g = {
+  align: i,
+  color: T,
+  size: c,
+  style: _,
+  fontFamily: m,
+  background: s,
+  paddings: B,
+  textBefore: U,
+  textAfter: l
+};
+export {
+  g as OmnibusDiscountControls
+};

package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textAfter.js

@@ -0,0 +1,73 @@
+import { ModificationDescription as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as a } from "../../../common-control.js";
+import { RecommendationBlockId as l } from "../../constants/blockIds.js";
+import { RecommendationControlId as d } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as T } from "../../constants/selectors.js";
+import { preserveTextStyles as f } from "../../utils/preserveTextStyles.js";
+const i = "data-text-after", u = "", p = ".omnibus-text-after";
+class b extends a {
+  getId() {
+    return d.OMNIBUS_DISCOUNT_TEXT_AFTER;
+  }
+  getTemplate() {
+    return `
+            <div class="omnibus-discount-text-after-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Text After" }),
+      this._GuTextInput({
+        name: "omnibusDiscountTextAfter",
+        placeholder: "e.g., off!",
+        className: "es-180w"
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
+  _setFormValues() {
+    const t = this._getCurrentText();
+    this.api.updateValues({
+      omnibusDiscountTextAfter: t
+    });
+  }
+  _getCurrentText() {
+    if (!this.currentNode || !("getAttribute" in this.currentNode))
+      return u;
+    const t = this.currentNode.getAttribute(i);
+    return t === null ? u : t;
+  }
+  _onTextChange(t) {
+    if (!this.currentNode || !("closest" in this.currentNode))
+      return;
+    const e = this.currentNode.closest(T);
+    if (!e || !("querySelectorAll" in e))
+      return;
+    const n = Array.from(
+      e.querySelectorAll(`[esd-extension-block-id="${l.OMNIBUS_DISCOUNT}"]`)
+    );
+    if (!n.length)
+      return;
+    const o = this.api.getDocumentModifier();
+    n.forEach((s) => {
+      o.modifyHtml(s).setAttribute(i, t);
+      const r = s.querySelector(p);
+      if (r) {
+        const m = f(r, t);
+        o.modifyHtml(r).setInnerHtml(m);
+      }
+    }), o.apply(new c("Update omnibus discount text after"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged("omnibusDiscountTextAfter", (t) => {
+      this._onTextChange(t);
+    });
+  }
+}
+export {
+  b as OmnibusDiscountTextAfterControl
+};

package/dist/extensions/Blocks/Recommendation/controls/omnibusDiscount/textBefore.js

@@ -0,0 +1,73 @@
+import { ModificationDescription as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationBlockId as a } from "../../constants/blockIds.js";
+import { RecommendationControlId as d } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as T } from "../../constants/selectors.js";
+import { preserveTextStyles as f } from "../../utils/preserveTextStyles.js";
+const i = "data-text-before", u = "", p = ".omnibus-text-before";
+class B extends l {
+  getId() {
+    return d.OMNIBUS_DISCOUNT_TEXT_BEFORE;
+  }
+  getTemplate() {
+    return `
+            <div class="omnibus-discount-text-before-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Text Before" }),
+      this._GuTextInput({
+        name: "omnibusDiscountTextBefore",
+        placeholder: "e.g., Save ",
+        className: "es-180w"
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(e) {
+    super.onTemplateNodeUpdated(e), this._setFormValues();
+  }
+  _setFormValues() {
+    const e = this._getCurrentText();
+    this.api.updateValues({
+      omnibusDiscountTextBefore: e
+    });
+  }
+  _getCurrentText() {
+    if (!this.currentNode || !("getAttribute" in this.currentNode))
+      return u;
+    const e = this.currentNode.getAttribute(i);
+    return e === null ? u : e;
+  }
+  _onTextChange(e) {
+    if (!this.currentNode || !("closest" in this.currentNode))
+      return;
+    const t = this.currentNode.closest(T);
+    if (!t || !("querySelectorAll" in t))
+      return;
+    const n = Array.from(
+      t.querySelectorAll(`[esd-extension-block-id="${a.OMNIBUS_DISCOUNT}"]`)
+    );
+    if (!n.length)
+      return;
+    const o = this.api.getDocumentModifier();
+    n.forEach((s) => {
+      o.modifyHtml(s).setAttribute(i, e);
+      const r = s.querySelector(p);
+      if (r) {
+        const m = f(r, e);
+        o.modifyHtml(r).setInnerHtml(m);
+      }
+    }), o.apply(new c("Update omnibus discount text before"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged("omnibusDiscountTextBefore", (e) => {
+      this._onTextChange(e);
+    });
+  }
+}
+export {
+  B as OmnibusDiscountTextBeforeControl
+};

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

@@ -0,0 +1,48 @@
+import { createPaddingsControl as n, createTextBackgroundColorControl as e, createTextFontFamilyControl as C, createTextStyleControl as I, createTextSizeControl as l, createTextColorControl as i, createTextAlignControl as c } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as r } from "../../constants/selectors.js";
+import { OmnibusPriceTextAfterControl as O } from "./textAfter.js";
+import { OmnibusPriceTextBeforeControl as _ } from "./textBefore.js";
+const m = c(
+  t.OMNIBUS_PRICE_ALIGN,
+  o.OMNIBUS_PRICE,
+  r
+), S = i(
+  t.OMNIBUS_PRICE_COLOR,
+  o.OMNIBUS_PRICE,
+  r
+), B = l(
+  t.OMNIBUS_PRICE_SIZE,
+  o.OMNIBUS_PRICE,
+  r
+), N = I(
+  t.OMNIBUS_PRICE_STYLE,
+  o.OMNIBUS_PRICE,
+  r
+), P = C(
+  t.OMNIBUS_PRICE_FONT_FAMILY,
+  o.OMNIBUS_PRICE,
+  r
+), R = e(
+  t.OMNIBUS_PRICE_BACKGROUND,
+  o.OMNIBUS_PRICE,
+  r
+), a = n(
+  t.OMNIBUS_PRICE_PADDINGS,
+  o.OMNIBUS_PRICE,
+  r
+), f = {
+  align: m,
+  color: S,
+  size: B,
+  style: N,
+  fontFamily: P,
+  background: R,
+  paddings: a,
+  textBefore: _,
+  textAfter: O
+};
+export {
+  f as OmnibusPriceControls
+};

package/dist/extensions/Blocks/Recommendation/controls/omnibusPrice/textAfter.js

@@ -0,0 +1,73 @@
+import { ModificationDescription as c } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as a } from "../../../common-control.js";
+import { RecommendationBlockId as l } from "../../constants/blockIds.js";
+import { RecommendationControlId as d } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as T } from "../../constants/selectors.js";
+import { preserveTextStyles as f } from "../../utils/preserveTextStyles.js";
+const s = "data-text-after", m = "", p = ".omnibus-text-after";
+class N extends a {
+  getId() {
+    return d.OMNIBUS_PRICE_TEXT_AFTER;
+  }
+  getTemplate() {
+    return `
+            <div class="omnibus-price-text-after-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Text After" }),
+      this._GuTextInput({
+        name: "omnibusPriceTextAfter",
+        placeholder: "e.g., (incl. VAT)",
+        className: "es-180w"
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues();
+  }
+  _setFormValues() {
+    const t = this._getCurrentText();
+    this.api.updateValues({
+      omnibusPriceTextAfter: t
+    });
+  }
+  _getCurrentText() {
+    if (!this.currentNode || !("getAttribute" in this.currentNode))
+      return m;
+    const t = this.currentNode.getAttribute(s);
+    return t === null ? m : t;
+  }
+  _onTextChange(t) {
+    if (!this.currentNode || !("closest" in this.currentNode))
+      return;
+    const e = this.currentNode.closest(T);
+    if (!e || !("querySelectorAll" in e))
+      return;
+    const n = Array.from(
+      e.querySelectorAll(`[esd-extension-block-id="${l.OMNIBUS_PRICE}"]`)
+    );
+    if (!n.length)
+      return;
+    const r = this.api.getDocumentModifier();
+    n.forEach((i) => {
+      r.modifyHtml(i).setAttribute(s, t);
+      const o = i.querySelector(p);
+      if (o) {
+        const u = f(o, t);
+        r.modifyHtml(o).setInnerHtml(u);
+      }
+    }), r.apply(new c("Update omnibus price text after"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged("omnibusPriceTextAfter", (t) => {
+      this._onTextChange(t);
+    });
+  }
+}
+export {
+  N as OmnibusPriceTextAfterControl
+};

package/dist/extensions/Blocks/Recommendation/controls/omnibusPrice/textBefore.js

@@ -0,0 +1,73 @@
+import { ModificationDescription as u } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as l } from "../../../common-control.js";
+import { RecommendationBlockId as a } from "../../constants/blockIds.js";
+import { RecommendationControlId as d } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as p } from "../../constants/selectors.js";
+import { preserveTextStyles as T } from "../../utils/preserveTextStyles.js";
+const s = "data-text-before", c = "Lowest 30-day price: ", f = ".omnibus-text-before";
+class N extends l {
+  getId() {
+    return d.OMNIBUS_PRICE_TEXT_BEFORE;
+  }
+  getTemplate() {
+    return `
+            <div class="omnibus-price-text-before-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Text Before" }),
+      this._GuTextInput({
+        name: "omnibusPriceTextBefore",
+        placeholder: "e.g., Lowest 30-day price: ",
+        className: "es-180w"
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(e) {
+    super.onTemplateNodeUpdated(e), this._setFormValues();
+  }
+  _setFormValues() {
+    const e = this._getCurrentText();
+    this.api.updateValues({
+      omnibusPriceTextBefore: e
+    });
+  }
+  _getCurrentText() {
+    if (!this.currentNode || !("getAttribute" in this.currentNode))
+      return c;
+    const e = this.currentNode.getAttribute(s);
+    return e === null ? c : e;
+  }
+  _onTextChange(e) {
+    if (!this.currentNode || !("closest" in this.currentNode))
+      return;
+    const t = this.currentNode.closest(p);
+    if (!t || !("querySelectorAll" in t))
+      return;
+    const n = Array.from(
+      t.querySelectorAll(`[esd-extension-block-id="${a.OMNIBUS_PRICE}"]`)
+    );
+    if (!n.length)
+      return;
+    const o = this.api.getDocumentModifier();
+    n.forEach((i) => {
+      o.modifyHtml(i).setAttribute(s, e);
+      const r = i.querySelector(f);
+      if (r) {
+        const m = T(r, e);
+        o.modifyHtml(r).setInnerHtml(m);
+      }
+    }), o.apply(new u("Update omnibus price text before"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged("omnibusPriceTextBefore", (e) => {
+      this._onTextChange(e);
+    });
+  }
+}
+export {
+  N as OmnibusPriceTextBeforeControl
+};

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

@@ -0,0 +1,44 @@
+import { createPaddingsControl as r, createTextBackgroundColorControl as C, createTextFontFamilyControl as e, createTextStyleControl as l, createTextSizeControl as c, createTextColorControl as I, createTextAlignControl as R } from "../../../controlFactories.js";
+import { RecommendationBlockId as o } from "../../constants/blockIds.js";
+import { RecommendationControlId as t } from "../../constants/controlIds.js";
+import { CONTAINER_SELECTOR as n } from "../../constants/selectors.js";
+const a = R(
+  t.PRICE_ALIGN,
+  o.PRICE,
+  n
+), i = I(
+  t.PRICE_COLOR,
+  o.PRICE,
+  n
+), E = c(
+  t.PRICE_SIZE,
+  o.PRICE,
+  n
+), P = l(
+  t.PRICE_STYLE,
+  o.PRICE,
+  n
+), m = e(
+  t.PRICE_FONT_FAMILY,
+  o.PRICE,
+  n
+), s = C(
+  t.PRICE_BACKGROUND,
+  o.PRICE,
+  n
+), d = r(
+  t.PRICE_PADDINGS,
+  o.PRICE,
+  n
+), x = {
+  align: a,
+  color: i,
+  size: E,
+  style: P,
+  fontFamily: m,
+  background: s,
+  paddings: d
+};
+export {
+  x as PriceControls
+};

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

@@ -0,0 +1,216 @@
+var P = Object.defineProperty;
+var O = (n, i, t) => i in n ? P(n, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[i] = t;
+var p = (n, i, t) => O(n, typeof i != "symbol" ? i + "" : i, t);
+import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as b } from "../../../common-control.js";
+import { useRecommendationExtensionStore as I } from "../../store/recommendation.js";
+import { getCurrentLayout as S } from "../main/utils.js";
+import { useDebounceFn as _ } from "../../../../../node_modules/@vueuse/shared/index.js";
+const y = "recommendation-spacing-control", a = {
+  COLUMN_SPACING: "columnSpacing",
+  COLUMN_SPACING_LABEL: "columnSpacingLabel",
+  ROW_SPACING: "rowSpacing"
+}, f = {
+  COLUMN_SPACING: "data-column-spacing",
+  ROW_SPACING: "data-row-spacing"
+}, s = {
+  COLUMN_SPACING: 10,
+  // 5px on each side = 10px total
+  ROW_SPACING: 20
+}, u = {
+  MIN_SPACING: 0,
+  MAX_SPACING: 50,
+  STEP: 5
+};
+function C(n, i) {
+  return !n || !("getStyle" in n) ? null : n.getStyle(i);
+}
+function G(n) {
+  return !n || !("parent" in n) || typeof n.parent != "function" ? null : n.parent();
+}
+function m(n, i) {
+  if (!n)
+    return i;
+  const t = parseFloat(n);
+  return Number.isNaN(t) ? i : t;
+}
+class E extends b {
+  constructor() {
+    super(...arguments);
+    p(this, "store", I());
+    p(this, "unsubscribeOrientation", null);
+    /**
+     * Debounced version of _onColumnSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    p(this, "_debouncedOnColumnSpacingChange", _((t) => {
+      this._onColumnSpacingChange(t);
+    }, 300));
+    /**
+     * Debounced version of _onRowSpacingChange
+     * Prevents excessive DOM updates when user rapidly adjusts the counter
+     */
+    p(this, "_debouncedOnRowSpacingChange", _((t) => {
+      this._onRowSpacingChange(t);
+    }, 300));
+  }
+  getId() {
+    return y;
+  }
+  getTemplate() {
+    return `
+            <div class="spacing-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Column Spacing (px)", name: a.COLUMN_SPACING_LABEL }),
+      this._GuCounter({
+        name: a.COLUMN_SPACING,
+        minValue: u.MIN_SPACING,
+        maxValue: u.MAX_SPACING,
+        step: u.STEP
+      }),
+      this._GuLabel({ text: "Row Spacing (px)" }),
+      this._GuCounter({
+        name: a.ROW_SPACING,
+        minValue: u.MIN_SPACING,
+        maxValue: u.MAX_SPACING,
+        step: u.STEP
+      })
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._updateColumnSpacingVisibility(), this._listenToFormUpdates(), this._subscribeToOrientationChanges();
+  }
+  onTemplateNodeUpdated(t) {
+    super.onTemplateNodeUpdated(t), this._setFormValues(), this._updateColumnSpacingVisibility();
+  }
+  /**
+   * Updates column spacing visibility based on layout orientation
+   * Column spacing is hidden for horizontal layout (products are stacked vertically)
+   * Reads from store first for reliability, falls back to DOM
+   */
+  _updateColumnSpacingVisibility() {
+    const r = (this.store.recommendationConfigs.orientation || S(this.currentNode)) === "vertical";
+    this.api.setVisibility(a.COLUMN_SPACING, r), this.api.setVisibility(a.COLUMN_SPACING_LABEL, r);
+  }
+  /**
+   * Reads spacing values from data attributes or returns defaults
+   */
+  _setFormValues() {
+    const t = this._getStoredColumnSpacing(), e = this._getStoredRowSpacing();
+    this.api.updateValues({
+      [a.COLUMN_SPACING]: t,
+      [a.ROW_SPACING]: e
+    });
+  }
+  /**
+   * Gets stored column spacing from the first attribute row cell's padding.
+   * For vertical layout: cells inside .recommendation-attribute-row have padding applied.
+   * For horizontal layout: the parent of .product-card-wrapper has the padding.
+   * The padding is applied as "0 {halfSpacing}px", so we extract and multiply by 2.
+   */
+  _getStoredColumnSpacing() {
+    if (!this.currentNode)
+      return s.COLUMN_SPACING;
+    if (S(this.currentNode) === "vertical") {
+      const o = this.currentNode.querySelector(".recommendation-attribute-row"), A = o == null ? void 0 : o.querySelector("td"), h = C(A, "padding");
+      if (!h)
+        return s.COLUMN_SPACING;
+      const g = h.trim().split(/\s+/);
+      return g.length < 2 ? s.COLUMN_SPACING : m(g[1], s.COLUMN_SPACING / 2) * 2;
+    }
+    const e = this.currentNode.querySelector(".product-card-wrapper"), r = G(e), l = C(r, "padding");
+    if (!l)
+      return s.COLUMN_SPACING;
+    const c = l.trim().split(/\s+/);
+    return c.length < 2 ? s.COLUMN_SPACING : m(c[1], s.COLUMN_SPACING / 2) * 2;
+  }
+  /**
+   * Gets stored row spacing from the first spacer element's height style
+   */
+  _getStoredRowSpacing() {
+    if (!this.currentNode)
+      return s.ROW_SPACING;
+    const t = this.currentNode.querySelector(".spacer"), e = C(t, "height");
+    return m(e, s.ROW_SPACING);
+  }
+  /**
+   * Handles column spacing changes.
+   * For vertical layout: applies horizontal padding to all cells inside attribute rows.
+   * For horizontal layout: applies padding to parent of product card wrappers.
+   */
+  _onColumnSpacingChange(t) {
+    if (!this.currentNode)
+      return;
+    this._storeColumnSpacing(t);
+    const e = S(this.currentNode), r = this.api.getDocumentModifier(), c = `0 ${t / 2}px`;
+    e === "vertical" ? Array.from(
+      this.currentNode.querySelectorAll(".attribute-cell")
+    ).forEach((o) => {
+      r.modifyHtml(o).setStyle("padding", c);
+    }) : Array.from(
+      this.currentNode.querySelectorAll(".product-card-wrapper")
+    ).forEach((o) => {
+      "parent" in o && o.parent() && r.modifyHtml(o.parent()).setStyle("padding", c);
+    }), r.apply(new d(`Update column spacing to ${t}px`));
+  }
+  /**
+   * Handles row spacing changes
+   * Applies height to all spacer elements between product rows
+   */
+  _onRowSpacingChange(t) {
+    if (!this.currentNode)
+      return;
+    this._storeRowSpacing(t);
+    const e = Array.from(
+      this.currentNode.querySelectorAll(".spacer")
+    );
+    if (!e.length)
+      return;
+    const r = this.api.getDocumentModifier(), l = `${t}px`;
+    e.forEach((c) => {
+      r.modifyHtml(c).setStyle("height", l);
+    }), r.apply(new d(`Update row spacing to ${t}px`));
+  }
+  /**
+   * Stores column spacing value in block data attribute
+   */
+  _storeColumnSpacing(t) {
+    if (!this.currentNode)
+      return;
+    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(f.COLUMN_SPACING, t.toString()).apply(new d("Store column spacing"));
+  }
+  /**
+   * Stores row spacing value in block data attribute
+   */
+  _storeRowSpacing(t) {
+    if (!this.currentNode)
+      return;
+    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
+    e && this.api.getDocumentModifier().modifyHtml(e).setAttribute(f.ROW_SPACING, t.toString()).apply(new d("Store row spacing"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(a.COLUMN_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnColumnSpacingChange(e);
+    }), this.api.onValueChanged(a.ROW_SPACING, (t) => {
+      const e = parseInt(t);
+      Number.isNaN(e) || this._debouncedOnRowSpacingChange(e);
+    });
+  }
+  /**
+   * Subscribe to store orientation changes
+   * Updates column spacing visibility when layout changes via the layout control
+   */
+  _subscribeToOrientationChanges() {
+    this.unsubscribeOrientation && this.unsubscribeOrientation(), this.unsubscribeOrientation = this.store.$subscribe((t) => {
+      t.type === "patch object" && this._updateColumnSpacingVisibility();
+    });
+  }
+}
+export {
+  y as SPACING_CONTROL_ID,
+  E as SpacingControl
+};