@useinsider/guido 3.2.0-beta.e01b42a → 3.2.0-beta.e0e56ef

package/dist/extensions/Blocks/Recommendation/controls/name/textTrim.js

@@ -1,14 +1,15 @@
-import { ModificationDescription as a } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as d } from "../../../common-control.js";
-import { RecommendationBlockId as l } from "../../constants/blockIds.js";
-import { RecommendationControlId as m } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as u } from "../../constants/selectors.js";
-const i = {
+import { ModificationDescription as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as u } from "../../../common-control.js";
+import { RecommendationBlockId as a } from "../../constants/blockIds.js";
+import { RecommendationControlId as d } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as m } from "../../constants/selectors.js";
+import { CSS_CLASS_TEXT_TRIM as r, ensureTextTrimCssRulesExist as T } from "../shared/textTrimCssRules.js";
+const s = {
   TEXT_TRIM_ENABLED: "textTrimEnabled"
-}, o = "text-trim-enabled", c = `.${o}`, T = `.${o} p`, p = `.${o} { max-width: 0; }`, _ = `.${o} p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; display: block; }`;
-class N extends d {
+};
+class N extends u {
   getId() {
-    return m.NAME_TEXT_TRIM;
+    return d.NAME_TEXT_TRIM;
   }
   getTemplate() {
     return `
@@ -16,7 +17,7 @@ class N extends d {
             <div class="name-text-trim-control-container">
                 ${this._GuTwoColumns([
       this._GuLabel({ text: this.api.translate("Trim Long Text") }),
-      this._GuToggle(i.TEXT_TRIM_ENABLED)
+      this._GuToggle(s.TEXT_TRIM_ENABLED)
     ])}
             </div>
         `;
@@ -30,76 +31,45 @@ class N extends d {
   _setFormValues() {
     const e = this._getCurrentTrimState();
     this.api.updateValues({
-      [i.TEXT_TRIM_ENABLED]: e
+      [s.TEXT_TRIM_ENABLED]: e
     });
   }
   _getCurrentTrimState() {
     if (!this.currentNode || !("hasClass" in this.currentNode))
       return !1;
-    if (this.currentNode.hasClass(o))
+    if (this.currentNode.hasClass(r))
       return !0;
-    const e = this.currentNode.closest(u);
+    const e = this.currentNode.closest(m);
     if (!e)
       return !1;
     const t = e.querySelector(
-      `[esd-extension-block-id="${l.NAME}"]`
+      `[esd-extension-block-id="${a.NAME}"]`
     );
-    return t && "hasClass" in t ? t.hasClass(o) : !1;
-  }
-  /**
-   * Finds an existing CSS rule in the document stylesheet by exact query
-   * @param query - The CSS query to search for (uses Stripo's CSS query syntax)
-   * @returns The CSS rule node if found, undefined otherwise
-   */
-  _findCssRule(e) {
-    const t = this.api.getDocumentRootCssNode();
-    if (t)
-      return t.querySelector(e);
-  }
-  /**
-   * Finds the .text-trim-enabled p rule by searching all text-trim rules and comparing selectors
-   * This is needed because Stripo's CSS query syntax interprets spaces as path separators
-   * @returns true if the rule exists
-   */
-  _hasParagraphRule() {
-    const e = this.api.getDocumentRootCssNode();
-    return e ? e.querySelectorAll(`*${o}`).some((s) => "getSelector" in s && typeof s.getSelector == "function" ? s.getSelector() === T : !1) : !1;
-  }
-  /**
-   * Ensures the text-trim CSS rules exist in the document stylesheet
-   * Only adds rules if they don't already exist (prevents duplicates across multiple blocks)
-   */
-  _ensureCssRulesExist() {
-    const e = this.api.getDocumentRootCssNode();
-    if (!e)
-      return;
-    const t = this.api.getDocumentModifier();
-    let s = !1;
-    this._findCssRule(c) || (t.modifyCss(e).appendRule(p), s = !0), this._hasParagraphRule() || (t.modifyCss(e).appendRule(_), s = !0), s && t.apply(new a("Add text trim CSS rules"));
+    return t && "hasClass" in t ? t.hasClass(r) : !1;
   }
   _onTextTrimChange(e) {
     if (!this.currentNode || !("closest" in this.currentNode))
       return;
-    const t = this.currentNode.closest(u);
+    const t = this.currentNode.closest(m);
     if (!t || !("querySelectorAll" in t))
       return;
-    const s = Array.from(
-      t.querySelectorAll(`[esd-extension-block-id="${l.NAME}"]`)
+    const i = Array.from(
+      t.querySelectorAll(`[esd-extension-block-id="${a.NAME}"]`)
     );
-    if (!s.length)
+    if (!i.length)
       return;
-    e && this._ensureCssRulesExist();
-    const r = this.api.getDocumentModifier();
-    s.forEach((n) => {
-      e ? r.modifyHtml(n).setClass(o) : r.modifyHtml(n).removeClass(o);
-    }), r.apply(
-      new a(
+    e && T(this.api);
+    const o = this.api.getDocumentModifier();
+    i.forEach((n) => {
+      e ? o.modifyHtml(n).setClass(r) : o.modifyHtml(n).removeClass(r);
+    }), o.apply(
+      new l(
         e ? "Enable product name text trimming" : "Disable product name text trimming"
       )
     );
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(i.TEXT_TRIM_ENABLED, (e) => {
+    this.api.onValueChanged(s.TEXT_TRIM_ENABLED, (e) => {
       this._onTextTrimChange(e);
     });
   }

package/dist/extensions/Blocks/Recommendation/controls/shared/textTrimCssRules.js

@@ -0,0 +1,14 @@
+import { ModificationDescription as r } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const t = "text-trim-enabled", l = `.${t}`, c = `.${t} p`, S = `.${t} { max-width: 0; }`, T = `.${t} p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; display: block; }`;
+function f(n) {
+  const e = n.getDocumentRootCssNode();
+  if (!e)
+    return;
+  const o = n.getDocumentModifier();
+  let i = !1;
+  e.querySelector(l) || (o.modifyCss(e).appendRule(S), i = !0), e.querySelectorAll(`*${t}`).some((s) => "getSelector" in s && typeof s.getSelector == "function" && s.getSelector() === c) || (o.modifyCss(e).appendRule(T), i = !0), i && o.apply(new r("Add text trim CSS rules"));
+}
+export {
+  t as CSS_CLASS_TEXT_TRIM,
+  f as ensureTextTrimCssRulesExist
+};

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

@@ -1,13 +1,13 @@
-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);
+var G = Object.defineProperty;
+var P = (u, s, t) => s in u ? G(u, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[s] = t;
+var C = (u, s, t) => P(u, 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 { CommonControl as R } from "../../../common-control.js";
+import { DESKTOP_CONTAINER_SELECTOR as S, MOBILE_CONTAINER_SELECTOR as M } 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 E } from "../../constants/layout.js";
 import { RecommendationConfigService as p } from "../../services/configService.js";
-import { useRecommendationExtensionStore as V } from "../../store/recommendation.js";
-import { safeGetStyle as L, safeGetParent as I } from "../../utils/tagName.js";
+import { useRecommendationExtensionStore as w } from "../../store/recommendation.js";
+import { safeGetStyle as L, safeGetParent as V } 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 = {
@@ -25,16 +25,16 @@ const U = "recommendation-spacing-control", n = {
   MOBILE_COLUMN_SPACING: "data-mobile-column-spacing",
   MOBILE_ROW_SPACING: "data-mobile-row-spacing"
 };
-function y(l, s) {
-  if (!l)
+function I(u, s) {
+  if (!u)
     return s;
-  const t = parseFloat(l);
+  const t = parseFloat(u);
   return Number.isNaN(t) ? s : t;
 }
-class j extends w {
+class j extends R {
   constructor() {
     super(...arguments);
-    C(this, "store", V());
+    C(this, "store", w());
     C(this, "unsubscribeOrientation", null);
     /**
      * Debounced version of _onColumnSpacingChange
@@ -168,17 +168,17 @@ class j extends w {
       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");
+      const h = t.querySelector(".recommendation-attribute-row"), l = (h == null ? void 0 : h.querySelector("td")) ?? null, d = L(l, "padding");
       if (!d)
         return g;
-      const M = d.trim().split(/\s+/);
-      return M.length < 2 ? g : y(M[1], g / 2) * 2;
+      const y = d.trim().split(/\s+/);
+      return y.length < 2 ? g : I(y[1], g / 2) * 2;
     }
-    const o = t.querySelector(".product-card-wrapper"), i = I(o), a = L(i, "padding");
+    const o = t.querySelector(".product-card-wrapper") ?? null, i = V(o), a = L(i, "padding");
     if (!a)
       return g;
     const r = a.trim().split(/\s+/);
-    return r.length < 2 ? g : y(r[1], g / 2) * 2;
+    return r.length < 2 ? g : I(r[1], g / 2) * 2;
   }
   /**
    * Gets stored row spacing from the first spacer element's height style
@@ -186,9 +186,9 @@ class j extends w {
    */
   _getStoredRowSpacing() {
     if (!this.currentNode)
-      return G;
-    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer"), o = L(e, "height");
-    return y(o, G);
+      return E;
+    const e = (this.currentNode.querySelector(S) ?? this.currentNode).querySelector(".spacer") ?? null, o = L(e, "height");
+    return I(o, E);
   }
   // ========================================================================
   // Desktop Spacing Handlers
@@ -209,12 +209,12 @@ class j extends w {
     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);
+    ).forEach((l) => {
+      i.modifyHtml(l).setStyle("padding", r);
     }) : Array.from(
       c.querySelectorAll(".product-card-wrapper")
-    ).forEach((u) => {
-      const d = I(u);
+    ).forEach((l) => {
+      const d = "parent" in l ? l.parent() : void 0;
       d && i.modifyHtml(d).setStyle("padding", r);
     }), i.apply(new m(`Update column spacing to ${t}px`)));
   }
@@ -260,15 +260,15 @@ class j extends w {
       { mobileColumnSpacing: t },
       `Changed mobile column spacing to ${t}px`
     ), 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);
+    const o = p.getConfig(this.currentNode).layout || f(this.currentNode), i = this.api.getDocumentModifier(), r = `0 ${t / 2}px`, c = this.currentNode.querySelector(M);
     c && (o === "grid" ? Array.from(
       c.querySelectorAll(".attribute-cell")
-    ).forEach((u) => {
-      i.modifyHtml(u).setStyle("padding", r);
+    ).forEach((l) => {
+      i.modifyHtml(l).setStyle("padding", r);
     }) : Array.from(
       c.querySelectorAll(".product-card-wrapper")
-    ).forEach((u) => {
-      const d = I(u);
+    ).forEach((l) => {
+      const d = "parent" in l ? l.parent() : void 0;
       d && i.modifyHtml(d).setStyle("padding", r);
     }), i.apply(new m(`Update mobile column spacing to ${t}px`)));
   }
@@ -285,7 +285,7 @@ class j extends w {
       { mobileRowSpacing: t },
       `Changed mobile row spacing to ${t}px`
     ), this._storeDataAttribute(A.MOBILE_ROW_SPACING, t);
-    const e = this.currentNode.querySelector(E);
+    const e = this.currentNode.querySelector(M);
     if (!e)
       return;
     const o = Array.from(

package/dist/extensions/Blocks/Recommendation/services/configService.js

@@ -1,8 +1,14 @@
-import { ModificationDescription as f } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CURRENT_CONFIG_VERSION as u, DEFAULT_NODE_CONFIG as e } from "../constants/defaultConfig.js";
-import { setCurrencyAttributes as g } from "../controls/main/utils.js";
-import { hasMinimalConfig as a } from "../types/nodeConfig.js";
-class C {
+import { ModificationDescription as h } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CURRENT_CONFIG_VERSION as l, DEFAULT_NODE_CONFIG as r } from "../constants/defaultConfig.js";
+import { setCurrencyAttributes as D } from "../controls/main/utils.js";
+import { hasMinimalConfig as A } from "../types/nodeConfig.js";
+function S(e) {
+  return e === "." || e === "," || e === " ";
+}
+function N(e) {
+  return e === "." || e === "," || e === " " || e === "";
+}
+class V {
   // ========================================================================
   // Read Operations
   // ========================================================================
@@ -42,7 +48,7 @@ class C {
       return !1;
     try {
       const t = i.getNodeConfig();
-      return a(t);
+      return A(t);
     } catch {
       return !1;
     }
@@ -77,8 +83,8 @@ class C {
    * @returns The new complete configuration
    */
   static updateConfig(i, t, o, n) {
-    const s = this.getConfig(t), r = this.deepMerge(s, o);
-    return this.saveConfig(i, t, r, n), r;
+    const c = this.getConfig(t), u = this.deepMerge(c, o);
+    return this.saveConfig(i, t, u, n), u;
   }
   /**
    * Initialize configuration for a new block
@@ -95,7 +101,7 @@ class C {
    */
   static initializeConfig(i, t, o) {
     const n = o ? this.mergeWithDefaults(o) : this.cloneDefaults();
-    return this.saveConfig(i, t, n, "Initialize recommendation block"), g({
+    return this.saveConfig(i, t, n, "Initialize recommendation block"), D({
       currentNode: t,
       documentModifier: i.getDocumentModifier(),
       currency: n.currency
@@ -112,9 +118,9 @@ class C {
    */
   static saveConfig(i, t, o, n) {
     try {
-      i.getDocumentModifier().modifyHtml(t).setNodeConfig(o).apply(new f(n));
-    } catch (s) {
-      console.warn("[RecommendationConfigService] Failed to save config:", s);
+      i.getDocumentModifier().modifyHtml(t).setNodeConfig(o).apply(new h(n));
+    } catch (c) {
+      console.warn("[RecommendationConfigService] Failed to save config:", c);
     }
   }
   // ========================================================================
@@ -125,23 +131,53 @@ class C {
    *
    * Reads existing data-attributes and creates a proper node config.
    * Used when loading templates created before node config was implemented.
+   *
+   * Sources, in priority order (later overrides earlier):
+   * 1. `esd-ext-config` JSON blob — emitted by the recommendation migrator and
+   *    by hand-authored new templates. Carries the full RecommendationNodeConfig
+   *    (strategy, language, currency, filters, productIds, etc.) which the
+   *    discrete data-* attrs below cannot capture.
+   * 2. Discrete `data-*` attributes — runtime source of truth for
+   *    layout/composition/spacing; controls keep these in sync as the user
+   *    edits, so we let them override the JSON blob if they disagree.
+   * 3. `currency-*` attributes — durable currency source on the block element.
    * @param api - Stripo extension API with document modifier
    * @param node - The block node to migrate
    * @returns The migrated configuration
    */
   static migrateFromDataAttributes(i, t) {
     const o = {
-      configVersion: u
+      configVersion: l
     };
     if ("getAttribute" in t && typeof t.getAttribute == "function") {
-      const n = t.getAttribute("data-layout");
-      n === "list" || n === "horizontal" ? o.layout = "list" : (n === "grid" || n === "vertical") && (o.layout = "grid");
-      const s = t.getAttribute("data-card-composition");
-      s && (o.composition = s.split(",").filter(Boolean));
-      const r = t.getAttribute("data-column-spacing");
-      r && (o.columnSpacing = parseInt(r) || e.columnSpacing);
-      const c = t.getAttribute("data-row-spacing");
-      c && (o.rowSpacing = parseInt(c) || e.rowSpacing);
+      const n = t.getAttribute("esd-ext-config");
+      if (n)
+        try {
+          const s = JSON.parse(n);
+          s && typeof s == "object" && (Object.assign(o, s), o.configVersion = l);
+        } catch {
+        }
+      const c = t.getAttribute("data-layout");
+      c === "list" || c === "horizontal" ? o.layout = "list" : (c === "grid" || c === "vertical") && (o.layout = "grid");
+      const u = t.getAttribute("data-card-composition");
+      u && (o.composition = u.split(",").filter(Boolean));
+      const p = t.getAttribute("data-column-spacing");
+      p && (o.columnSpacing = parseInt(p) || r.columnSpacing);
+      const b = t.getAttribute("data-row-spacing");
+      if (b && (o.rowSpacing = parseInt(b) || r.rowSpacing), !o.currency) {
+        const s = t.getAttribute("currency"), y = t.getAttribute("currency-symbol"), d = t.getAttribute("currency-alignment"), f = t.getAttribute("currency-thousand-separator"), g = t.getAttribute("currency-decimal-separator"), m = t.getAttribute("currency-decimal-count");
+        if (s || y || d || f || g || m) {
+          const a = r.currency, C = m ? parseInt(m) : NaN;
+          o.currency = {
+            code: s ?? a.code,
+            symbol: y ?? a.symbol,
+            alignment: d === "0" ? "before" : "after",
+            decimalCount: Number.isFinite(C) ? C : a.decimalCount,
+            decimalSeparator: S(g) ? g : a.decimalSeparator,
+            thousandSeparator: N(f) ? f : a.thousandSeparator
+          };
+        }
+      }
     }
     return this.initializeConfig(i, t, o);
   }
@@ -151,7 +187,7 @@ class C {
    * @returns True if migration is needed
    */
   static needsMigration(i) {
-    return i ? this.hasConfig(i) ? this.getConfigVersion(i) < u : !0 : !1;
+    return i ? this.hasConfig(i) ? this.getConfigVersion(i) < l : !0 : !1;
   }
   // ========================================================================
   // Internal Helpers
@@ -161,12 +197,12 @@ class C {
    */
   static cloneDefaults() {
     return {
-      ...e,
-      currency: { ...e.currency },
-      omnibusPrice: { ...e.omnibusPrice },
-      omnibusDiscount: { ...e.omnibusDiscount },
-      composition: [...e.composition],
-      visibility: { ...e.visibility },
+      ...r,
+      currency: { ...r.currency },
+      omnibusPrice: { ...r.omnibusPrice },
+      omnibusDiscount: { ...r.omnibusDiscount },
+      composition: [...r.composition],
+      visibility: { ...r.visibility },
       filters: [],
       productIds: [],
       recommendationId: 0
@@ -236,5 +272,5 @@ class C {
   }
 }
 export {
-  C as RecommendationConfigService
+  V as RecommendationConfigService
 };

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

@@ -1,6 +1,6 @@
 import { SettingsPanelRegistry as E, SettingsPanelTab as _, SettingsTab as O, ContainerControls as C, TextControls as R } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { BLOCK_ID as U } from "./block.js";
-import { RecommendationBlockId as N } from "./constants/blockIds.js";
+import { RecommendationBlockId as S } from "./constants/blockIds.js";
 import { RecommendationControlId as T } from "./constants/controlIds.js";
 import { CONTROL_BLOCK_ID as A } from "./controls/main/index.js";
 import "./store/recommendation.js";
@@ -14,7 +14,7 @@ import "./controls/image/index.js";
 import { SPACING_CONTROL_ID as L } from "./controls/spacing/index.js";
 import { CARD_BACKGROUND_COLOR_CONTROL_ID as D } from "./controls/cardBackground/index.js";
 import { COMPOSITION_CONTROL_BLOCK_ID as B } from "./controls/cardComposition/index.js";
-import { SYNC_INFO_MESSAGE_CONTROL_ID as S } from "./controls/syncInfoMessage.js";
+import { SYNC_INFO_MESSAGE_CONTROL_ID as N } from "./controls/syncInfoMessage.js";
 class Z extends E {
   registerBlockControls(I) {
     I[U] = [
@@ -39,11 +39,11 @@ class Z extends E {
           B
         ]
       ).withLabel(this.api.translate("Card Composition"))
-    ], I[N.NAME] = [
+    ], I[S.NAME] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.NAME_STYLE,
           T.NAME_ALIGN,
           T.NAME_TEXT_TRIM,
@@ -59,11 +59,11 @@ class Z extends E {
           T.NAME_COLOR
         ]
       )
-    ], I[N.PRICE] = [
+    ], I[S.PRICE] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.PRICE_STYLE,
           T.PRICE_ALIGN,
           T.PRICE_PADDINGS
@@ -78,11 +78,11 @@ class Z extends E {
           T.PRICE_COLOR
         ]
       )
-    ], I[N.OLD_PRICE] = [
+    ], I[S.OLD_PRICE] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.OLD_PRICE_STYLE,
           T.OLD_PRICE_ALIGN,
           T.OLD_PRICE_PADDINGS
@@ -97,11 +97,11 @@ class Z extends E {
           T.OLD_PRICE_COLOR
         ]
       )
-    ], I[N.OMNIBUS_PRICE] = [
+    ], I[S.OMNIBUS_PRICE] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.OMNIBUS_PRICE_TEXT_BEFORE,
           T.OMNIBUS_PRICE_TEXT_AFTER,
           T.OMNIBUS_PRICE_STYLE,
@@ -118,11 +118,11 @@ class Z extends E {
           T.OMNIBUS_PRICE_COLOR
         ]
       )
-    ], I[N.OMNIBUS_DISCOUNT] = [
+    ], I[S.OMNIBUS_DISCOUNT] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.OMNIBUS_DISCOUNT_TEXT_BEFORE,
           T.OMNIBUS_DISCOUNT_TEXT_AFTER,
           T.OMNIBUS_DISCOUNT_STYLE,
@@ -139,11 +139,11 @@ class Z extends E {
           T.OMNIBUS_DISCOUNT_COLOR
         ]
       )
-    ], I[N.BUTTON] = [
+    ], I[S.BUTTON] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.BUTTON_TEXT,
           T.BUTTON_ALIGN,
           T.BUTTON_PADDINGS,
@@ -162,12 +162,13 @@ class Z extends E {
           T.BUTTON_BORDER
         ]
       )
-    ], I[N.CUSTOM_ATTRIBUTE] = [
+    ], I[S.CUSTOM_ATTRIBUTE] = [
       new _(
         O.SETTINGS,
         [
           T.CUSTOM_ATTR_STYLE,
           T.CUSTOM_ATTR_ALIGN,
+          T.CUSTOM_ATTR_TEXT_TRIM,
           T.CUSTOM_ATTR_PADDINGS
         ]
       ),
@@ -180,11 +181,11 @@ class Z extends E {
           T.CUSTOM_ATTR_COLOR
         ]
       )
-    ], I[N.IMAGE] = [
+    ], I[S.IMAGE] = [
       new _(
         O.SETTINGS,
         [
-          S,
+          N,
           T.IMAGE_SIZE,
           T.IMAGE_MARGINS
         ]