@useinsider/guido 3.21.0-beta.c433290 → 3.21.0-beta.db22471

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

@@ -1,34 +1,38 @@
-var B = Object.defineProperty;
-var b = (a, l, t) => l in a ? B(a, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[l] = t;
-var d = (a, l, t) => b(a, typeof l != "symbol" ? l + "" : l, t);
+var b = Object.defineProperty;
+var A = (m, c, e) => c in m ? b(m, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : m[c] = e;
+var u = (m, c, e) => A(m, typeof c != "symbol" ? c + "" : c, e);
 import { useConfig as g } from "../../../composables/useConfig.js";
-import { BlockId as C } from "../../../enums/block.js";
-import { getMigrationBannerHtml as A } from "../../../utils/migrationBannerHtml.js";
-import { Block as E, BlockCompositionType as S, ModificationDescription as p } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CURRENT_CONFIG_VERSION as N, PRE_RRS_CONFIG_VERSION as w } from "./constants/defaultConfig.js";
-import { RECOMMENDATION_ID_ATTR as m } from "./constants/selectors.js";
-import { regenerateMobileProductRows as M } from "./controls/main/utils.js";
-import { ensureMobileCssRulesExist as I, setMobileLayoutOptOut as R, hasMobileLayoutOptOut as O } from "./controls/mobileLayout/cssRules.js";
-import { RecommendationConfigService as s } from "./services/configService.js";
-import { useRecommendationExtensionStore as h } from "./store/recommendation.js";
+import { BlockId as D } from "../../../enums/block.js";
+import { getMigrationBannerHtml as E } from "../../../utils/migrationBannerHtml.js";
+import { Block as S, BlockCompositionType as v, ModificationDescription as _ } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CURRENT_CONFIG_VERSION as N, PRE_RRS_CONFIG_VERSION as M } from "./constants/defaultConfig.js";
+import { RECOMMENDATION_ID_ATTR as f } from "./constants/selectors.js";
+import { ensureMobileFitRule as w, syncHeightBound as O } from "./controls/image/index.js";
+import { regenerateMobileProductRows as H } from "./controls/main/utils.js";
+import { ensureMobileCssRulesExist as I, setMobileLayoutOptOut as R, hasMobileLayoutOptOut as T } from "./controls/mobileLayout/cssRules.js";
+import { RecommendationConfigService as a } from "./services/configService.js";
+import { useRecommendationExtensionStore as p } from "./store/recommendation.js";
 import { getDefaultTemplate as x } from "./templates/grid/template.js";
-import { useRecommendationBlockWarning as T } from "./useRecommendationBlockWarning.js";
-import { registerNodeConfigWriter as H } from "./utils/nodeConfigWriter.js";
-import { refreshDuplicatedStrategyBlocks as $ } from "./utils/strategyCommit.js";
-const k = C.Recommendation, u = "recommendation-block-v2", D = "hide-price";
-let y = !1;
-class Y extends E {
+import { useRecommendationBlockWarning as F } from "./useRecommendationBlockWarning.js";
+import { registerNodeConfigWriter as y, readBlockNodeConfigs as $ } from "./utils/nodeConfigWriter.js";
+import { refreshArrivedStrategyBlocks as q, resolveSourceConfig as L, refreshDuplicatedStrategyBlocks as P } from "./utils/strategyCommit.js";
+const k = D.Recommendation, h = "recommendation-block-v2", C = "hide-price";
+let B = !1;
+class se extends S {
   constructor() {
     super();
     /**
      * Stores the ID generated in getTemplate() so onCreated() can reuse it.
      * This avoids generating a new (different) ID in onCreated().
      */
-    d(this, "_pendingBlockId", null);
+    u(this, "_pendingBlockId", null);
     /** Ids already reset under their new name, so the deferred pass skips their stale snapshot. */
-    d(this, "_resetSourceIds", /* @__PURE__ */ new Set());
+    u(this, "_resetSourceIds", /* @__PURE__ */ new Set());
     /** Ids handed to duplicates the document root does not show yet: a copied module renames all its blocks at once. */
-    d(this, "_unsettledDuplicateIds", /* @__PURE__ */ new Set());
+    u(this, "_unsettledDuplicateIds", /* @__PURE__ */ new Set());
+    u(this, "_arrivedBlocks", []);
+    /** Strategy each in-flight arrival or duplicate refresh is fetching, by block id, so a second one does not race it. */
+    u(this, "_refreshClaims", /* @__PURE__ */ new Map());
   }
   getId() {
     return k;
@@ -37,7 +41,7 @@ class Y extends E {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return S.CONTAINER;
+    return v.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -48,7 +52,7 @@ class Y extends E {
     );
   }
   getSettingsPanelTitleHtml() {
-    return A(
+    return E(
       k,
       this.api.translate("Recommendation Block"),
       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.")
@@ -71,8 +75,8 @@ class Y extends E {
    * attribute and overwrites dynamically added classes via setAttribute.
    */
   getTemplate() {
-    const t = this._generateNextId();
-    return this._pendingBlockId = t, x(t);
+    const e = this._generateNextId();
+    return this._pendingBlockId = e, x(e);
   }
   /**
    * Called when a new block is dropped into the template
@@ -81,42 +85,57 @@ class Y extends E {
    * and assigns the recommendation-id attribute + initializes configuration.
    * @param node - The newly created block node
    */
-  onCreated(t) {
-    const e = this._getRecommendationId(t);
-    if (e !== null && e > 0) {
-      if (this._detectDuplicate(e)) {
-        this._handleDuplicate(t, e), this._scheduleArrivalReset(t);
+  onCreated(e) {
+    const t = this._getRecommendationId(e);
+    if (t !== null && t > 0) {
+      if (this._pendingBlockId = null, this._ensureMobileFitRule(e), this._detectDuplicate(t)) {
+        this._handleDuplicate(e, t), this._scheduleArrivalReset(e);
         return;
       }
-      this._pendingBlockId === null && setTimeout(() => {
-        this._getBlockElement(t) && this._detectDuplicate(e) && this._handleDuplicate(t, e);
-      }, 0), this._scheduleArrivalReset(t);
+      setTimeout(() => {
+        if (this._getBlockElement(e)) {
+          if (this._detectDuplicate(t)) {
+            this._handleDuplicate(e, t);
+            return;
+          }
+          this._queueArrivalRefresh(e);
+        }
+      }, 0), this._scheduleArrivalReset(e);
       return;
     }
     const i = this._pendingBlockId ?? this._generateNextId();
-    this._pendingBlockId = null, this._assignRecommendationId(t, i);
-    const n = g().isFeatureEnabled("reusableRecommendationStrategy"), o = n && !s.hasConfig(t), { config: r, wasFreshDrop: c } = s.initializeConfig(
+    this._pendingBlockId = null, this._assignRecommendationId(e, i);
+    const r = g().isFeatureEnabled("reusableRecommendationStrategy"), s = r && !a.hasConfig(e), { config: n, wasFreshDrop: o } = a.initializeConfig(
       this.api,
-      t,
+      e,
       {
         recommendationId: i,
-        configVersion: n ? N : w,
-        ...o ? { partnerName: g().partnerName.value } : {},
+        configVersion: r ? N : M,
+        ...s ? { partnerName: g().partnerName.value } : {},
         // An RRS block picks a strategy, not an algorithm, and its algorithm control is
         // hidden. Keeping the `mostPopular` default would bake a most-popular feed URL
         // at save for a block the user never configured.
-        ...o ? { strategy: "" } : {}
+        ...s ? { strategy: "" } : {}
       }
-    ), f = h();
-    if (f.setCurrentBlock(i), this._stampHidePrice(t, r.priceHideIfSameAsDiscounted), c) {
+    ), l = p();
+    if (l.setCurrentBlock(i), this._stampHidePrice(e, n.priceHideIfSameAsDiscounted), o) {
       I(this.api);
-      const _ = this._getBlockElement(t);
-      _ && (R(this.api, _, !0), M({
-        currentNode: t,
+      const d = this._getBlockElement(e);
+      d && (R(this.api, d, !0), H({
+        currentNode: e,
         documentModifier: this.api.getDocumentModifier()
       }));
     }
-    f.patchCurrentBlockConfig({ language: r.language }, { triggerRefetch: !1 }), this._warnIfMultipleBlocks();
+    l.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 }), this._warnIfMultipleBlocks();
+  }
+  /** Refreshes every block of an opened template: Stripo restores a stored document without `onCreated`. */
+  onDocumentInit() {
+    try {
+      const e = this.api.getDocumentRoot();
+      e && "querySelectorAll" in e && e.querySelectorAll(`.${h}`).forEach((t) => this._queueArrivalRefresh(t));
+    } catch (e) {
+      console.error("[recommendation] refreshing an opened strategy failed", e);
+    }
   }
   /**
    * Called when the document changes or template is loaded
@@ -125,24 +144,24 @@ class Y extends E {
    * and assigns recommendation-id to legacy blocks that lack one.
    * @param node - The block node that may need migration
    */
-  onDocumentChanged(t) {
-    if (!(!t || !("getNodeConfig" in t))) {
-      if (!this._getRecommendationId(t)) {
-        const e = this._generateNextId();
-        this._assignRecommendationId(t, e), s.hasConfig(t) && s.updateConfig(
+  onDocumentChanged(e) {
+    if (!(!e || !("getNodeConfig" in e))) {
+      if (!this._getRecommendationId(e)) {
+        const t = this._generateNextId();
+        this._assignRecommendationId(e, t), a.hasConfig(e) && a.updateConfig(
           this.api,
-          t,
-          { recommendationId: e },
+          e,
+          { recommendationId: t },
           "Assign recommendation ID to legacy block"
         );
       }
-      this._healLingeringDuplicate(t), s.needsMigration(t) && this._migrateFromLegacy(t), this._healHidePriceAttr(t);
+      this._healLingeringDuplicate(e), a.needsMigration(e) && this._migrateFromLegacy(e), this._healHidePriceAttr(e), this._ensureMobileFitRule(e), this._syncHeightBound(e);
       try {
-        y || (I(this.api), y = !0);
-        const e = s.getConfig(t), i = this._getBlockElement(t);
+        B || (I(this.api), B = !0);
+        const t = a.getConfig(e), i = this._getBlockElement(e);
         if (i) {
-          const n = !e.mobileLayoutEnabled;
-          O(i) !== n && R(this.api, i, n);
+          const r = !t.mobileLayoutEnabled;
+          T(i) !== r && R(this.api, i, r);
         }
       } catch {
       }
@@ -154,9 +173,23 @@ class Y extends E {
    * Cleans up the per-block state from the Pinia store.
    * @param node - The block node being deleted
    */
-  onDelete(t) {
-    const e = this._getRecommendationId(t);
-    e && h().removeBlockState(e);
+  onDelete(e) {
+    const t = this._getRecommendationId(e);
+    t && p().removeBlockState(t);
+  }
+  _ensureMobileFitRule(e) {
+    try {
+      w(this.api, e);
+    } catch {
+    }
+  }
+  _syncHeightBound(e) {
+    const t = this._getBlockElement(e);
+    if (t)
+      try {
+        O(this.api, t);
+      } catch {
+      }
   }
   /**
    * Warns (dark advisory toaster) when the design holds more than one live
@@ -172,7 +205,7 @@ class Y extends E {
    */
   _warnIfMultipleBlocks() {
     try {
-      T().warnIfMultipleBlocks(this.api.getDocumentRootHtmlNode());
+      F().warnIfMultipleBlocks(this.api.getDocumentRootHtmlNode());
     } catch {
     }
   }
@@ -181,21 +214,21 @@ class Y extends E {
    * in the document and finding the maximum existing ID + 1.
    */
   _generateNextId() {
-    let t = 0;
-    const e = /* @__PURE__ */ new Set();
+    let e = 0;
+    const t = /* @__PURE__ */ new Set();
     try {
       const i = this.api.getDocumentRoot();
-      i && "querySelectorAll" in i && i.querySelectorAll(`.${u}`).forEach((o) => {
-        if ("getAttribute" in o) {
-          const r = o.getAttribute(m), c = r ? parseInt(r) : 0;
-          e.add(c), c > t && (t = c);
+      i && "querySelectorAll" in i && i.querySelectorAll(`.${h}`).forEach((s) => {
+        if ("getAttribute" in s) {
+          const n = s.getAttribute(f), o = n ? parseInt(n) : 0;
+          t.add(o), o > e && (e = o);
         }
       });
     } catch {
     }
     return this._unsettledDuplicateIds.forEach((i) => {
-      e.has(i) && this._unsettledDuplicateIds.delete(i);
-    }), Math.max(t, ...this._unsettledDuplicateIds) + 1;
+      t.has(i) && this._unsettledDuplicateIds.delete(i);
+    }), Math.max(e, ...this._unsettledDuplicateIds) + 1;
   }
   /**
    * Drops the "already fetched" claims of a block that arrived holding a baked id
@@ -204,67 +237,119 @@ class Y extends E {
    * Deferred a tick: the collision handlers rename a sibling first, and either sibling can be
    * the renamed one depending on where the module was dropped (SD-149916).
    */
-  _scheduleArrivalReset(t) {
+  _scheduleArrivalReset(e) {
     g().isFeatureEnabled("reusableRecommendationStrategy") && setTimeout(() => {
-      const e = this._getRecommendationId(t);
-      e !== null && e > 0 && !this._resetSourceIds.delete(e) && h().resetArrivedBlock(e);
+      const t = this._getRecommendationId(e);
+      t !== null && t > 0 && !this._resetSourceIds.delete(t) && p().resetArrivedBlock(t);
     }, 0);
   }
+  /**
+   * Re-reads the strategy of a block that arrived with saved cards, without waiting for a click.
+   * Blocks of one opened template or dropped module arrive in one tick and refresh together.
+   */
+  _queueArrivalRefresh(e, t) {
+    g().isFeatureEnabled("reusableRecommendationStrategy") && (this._arrivedBlocks.push({ node: e, id: t }) > 1 || setTimeout(() => {
+      const i = this._arrivedBlocks;
+      this._arrivedBlocks = [];
+      try {
+        this._refreshArrivedBlocks(i);
+      } catch (r) {
+        console.error("[recommendation] refreshing an arrived strategy failed", r);
+      }
+    }, 0));
+  }
+  _refreshArrivedBlocks(e) {
+    y(this.api);
+    const t = /* @__PURE__ */ new Set(), i = e.flatMap(({ node: r, id: s }) => {
+      const n = s ?? this._getRecommendationId(r), o = this._getBlockElement(r);
+      if (!n || !o || t.has(n))
+        return [];
+      const l = a.getConfig(o);
+      if (!this._canClaimRefresh(n, l.strategyId))
+        return [];
+      const d = { strategyId: l.strategyId };
+      return t.add(n), this._refreshClaims.set(n, d), [{ id: n, config: l, claim: d }];
+    });
+    i.length && q(i.map(({ id: r, config: s }) => ({ id: r, config: s }))).catch((r) => console.error("[recommendation] refreshing an arrived strategy failed", r)).finally(() => i.forEach(({ id: r, claim: s }) => this._releaseRefreshClaim(r, s)));
+  }
+  /**
+   * A new document reports each block to onCreated and onDocumentInit, not always in one batch, so a
+   * claimed block refreshes again only once the document shows it under another strategy (a restored version).
+   */
+  _canClaimRefresh(e, t) {
+    const i = this._refreshClaims.get(e);
+    if (!i)
+      return !0;
+    if (i.strategyId === t)
+      return !1;
+    const r = $(e);
+    return r.length > 0 && r.every((s) => s.strategyId === t);
+  }
+  _releaseRefreshClaim(e, t) {
+    this._refreshClaims.get(e) === t && this._refreshClaims.delete(e);
+  }
   /**
    * Heals a duplicate that slipped past the create-time `_detectDuplicate`
    * scan (or that was persisted by an older template before SD-142352).
    * When two blocks share a `recommendation-id`, the first occurrence in DOM
    * order is treated as the source and any later sibling is reassigned a
-   * fresh id. The store entry and active-block focus are intentionally not
-   * touched here: each block's persisted `esd-ext-config` carries its own
-   * truth and the regular save-time hydration (`hydrateRecommendationStore`)
-   * will seed the new id from that. Skipping `setCurrentBlock` avoids
+   * fresh id and queued for the arrival refresh, which seeds the new id's
+   * store entry from its persisted `esd-ext-config`. The source's store
+   * entry is not cloned and focus is not moved. Skipping `setCurrentBlock` avoids
    * yanking the user's current selection mid-edit when the heal fires from
    * `onDocumentChanged`.
    */
-  _healLingeringDuplicate(t) {
-    const e = this._getRecommendationId(t);
-    if (!(e === null || e <= 0))
+  _healLingeringDuplicate(e) {
+    const t = this._getRecommendationId(e);
+    if (!(t === null || t <= 0))
       try {
         const i = this.api.getDocumentRoot();
         if (!i || !("querySelectorAll" in i))
           return;
-        const n = i.querySelectorAll(
-          `.${u}[${m}="${e}"]`
+        const r = i.querySelectorAll(
+          `.${h}[${f}="${t}"]`
         );
-        if (n.length <= 1)
+        if (r.length <= 1)
           return;
-        const o = this._getBlockElement(t);
-        if (!o)
+        const s = this._getBlockElement(e);
+        if (!s)
           return;
-        let r = -1;
-        for (let c = 0; c < n.length; c++)
-          if (n[c] === o) {
-            r = c;
+        let n = -1;
+        for (let o = 0; o < r.length; o++)
+          if (r[o] === s) {
+            n = o;
             break;
           }
-        if (r <= 0)
+        if (n <= 0)
           return;
-        this._reassignDuplicateId(t, e);
+        this._queueArrivalRefresh(e, this._reassignDuplicateId(e, t));
       } catch {
       }
   }
   /** True when another block already holds the same id — Stripo's duplication signal. */
-  _detectDuplicate(t) {
+  _detectDuplicate(e) {
     try {
-      const e = this.api.getDocumentRoot();
-      if (e && "querySelectorAll" in e)
-        return e.querySelectorAll(
-          `.${u}[${m}="${t}"]`
+      const t = this.api.getDocumentRoot();
+      if (t && "querySelectorAll" in t)
+        return t.querySelectorAll(
+          `.${h}[${f}="${e}"]`
         ).length > 1;
     } catch {
     }
     return !1;
   }
   /** Assigns a fresh id to a duplicated block and syncs DOM, node config and store. */
-  _handleDuplicate(t, e) {
-    const i = this._reassignDuplicateId(t, e), n = h();
-    n.cloneBlockState(e, i), n.setCurrentBlock(i), g().isFeatureEnabled("reusableRecommendationStrategy") && (this._resetSourceIds.add(e), H(this.api), $(e, i, s.getConfig(t)).catch((o) => console.error("[recommendation] refreshing a duplicated strategy failed", o))), this._warnIfMultipleBlocks();
+  _handleDuplicate(e, t) {
+    const i = this._reassignDuplicateId(e, t), r = p();
+    if (r.cloneBlockState(t, i), r.setCurrentBlock(i), g().isFeatureEnabled("reusableRecommendationStrategy")) {
+      this._resetSourceIds.add(t), y(this.api);
+      const s = a.getConfig(e), n = [
+        { id: t, claim: { strategyId: L(t, s).strategyId } },
+        { id: i, claim: { strategyId: s.strategyId } }
+      ].filter(({ id: o }) => !this._refreshClaims.has(o));
+      n.forEach(({ id: o, claim: l }) => this._refreshClaims.set(o, l)), P(t, i, s).catch((o) => console.error("[recommendation] refreshing a duplicated strategy failed", o)).finally(() => n.forEach(({ id: o, claim: l }) => this._releaseRefreshClaim(o, l)));
+    }
+    this._warnIfMultipleBlocks();
   }
   /**
    * Core id-reassignment for a duplicated block: rewrites the DOM
@@ -273,17 +358,17 @@ class Y extends E {
    *
    * Used by `_handleDuplicate` at create-time (which additionally clones the
    * store entry and focuses the new block) and by `_healLingeringDuplicate`
-   * at document-change time (which intentionally skips store/focus side
-   * effects so older bug-affected templates can self-repair without
-   * disturbing the user's current selection).
+   * at document-change time (which skips the clone and focus change so older
+   * bug-affected templates can self-repair without disturbing the user's
+   * current selection, and queues the arrival refresh for the new id).
    */
-  _reassignDuplicateId(t, e) {
-    const i = this._generateNextId(), n = this._getBlockElement(t);
-    return this._unsettledDuplicateIds.add(i), this._assignRecommendationId(t, i), n && this._reassignInstanceClass(n, e, i), s.hasConfig(t) && s.updateConfig(
+  _reassignDuplicateId(e, t) {
+    const i = this._generateNextId(), r = this._getBlockElement(e);
+    return this._unsettledDuplicateIds.add(i), this._assignRecommendationId(e, i), r && this._reassignInstanceClass(r, t, i), a.hasConfig(e) && a.updateConfig(
       this.api,
-      t,
+      e,
       { recommendationId: i },
-      `Reassign recommendation ID on duplicate (was ${e})`
+      `Reassign recommendation ID on duplicate (was ${t})`
     ), i;
   }
   /**
@@ -293,12 +378,12 @@ class Y extends E {
    * the source's class would both leak stylistic edits across blocks and
    * cause the mail render to apply the source block's config to the clone.
    */
-  _reassignInstanceClass(t, e, i) {
-    if (!("getAttribute" in t))
+  _reassignInstanceClass(e, t, i) {
+    if (!("getAttribute" in e))
       return;
-    const n = `ins-recommendation-v3-block-${e}`, o = `ins-recommendation-v3-block-${i}`, r = this.api.getDocumentModifier();
-    r.modifyHtml(t).removeClass(n).setClass(o), r.apply(new p(
-      `Reassign recommendation instance class ${n} -> ${o}`
+    const r = `ins-recommendation-v3-block-${t}`, s = `ins-recommendation-v3-block-${i}`, n = this.api.getDocumentModifier();
+    n.modifyHtml(e).removeClass(r).setClass(s), n.apply(new _(
+      `Reassign recommendation instance class ${r} -> ${s}`
     ));
   }
   /**
@@ -307,64 +392,64 @@ class Y extends E {
    * HTML by getTemplate(), since Stripo's Angular rendering overwrites dynamically
    * added classes via setAttribute.
    */
-  _assignRecommendationId(t, e) {
-    const i = this._getBlockElement(t);
+  _assignRecommendationId(e, t) {
+    const i = this._getBlockElement(e);
     if (!i)
       return;
-    const n = this.api.getDocumentModifier();
-    n.modifyHtml(i).setAttribute(m, e.toString()), n.apply(new p(`Assign recommendation ID ${e}`));
+    const r = this.api.getDocumentModifier();
+    r.modifyHtml(i).setAttribute(f, t.toString()), r.apply(new _(`Assign recommendation ID ${t}`));
   }
   /**
    * Stamps the `hide-price` attribute (read by email-service at send time) on
    * the block element from the config flag.
    */
-  _stampHidePrice(t, e) {
-    const i = this._getBlockElement(t);
-    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute(D, String(e)).apply(new p("Stamp hide-price"));
+  _stampHidePrice(e, t) {
+    const i = this._getBlockElement(e);
+    i && this.api.getDocumentModifier().modifyHtml(i).setAttribute(C, String(t)).apply(new _("Stamp hide-price"));
   }
   /**
    * Stamps `hide-price` from config only when the block lacks the attribute —
    * heals templates saved before this feature without dirtying current ones.
    */
-  _healHidePriceAttr(t) {
-    const e = this._getBlockElement(t);
-    if (!e || !("getAttribute" in e) || e.getAttribute(D) !== null)
+  _healHidePriceAttr(e) {
+    const t = this._getBlockElement(e);
+    if (!t || !("getAttribute" in t) || t.getAttribute(C) !== null)
       return;
-    const { priceHideIfSameAsDiscounted: i } = s.getConfig(t);
-    this._stampHidePrice(t, i);
+    const { priceHideIfSameAsDiscounted: i } = a.getConfig(e);
+    this._stampHidePrice(e, i);
   }
   /**
    * Gets the recommendation-id from a block node
    */
-  _getRecommendationId(t) {
-    const e = this._getBlockElement(t);
-    if (!e || !("getAttribute" in e))
+  _getRecommendationId(e) {
+    const t = this._getBlockElement(e);
+    if (!t || !("getAttribute" in t))
       return null;
-    const i = e.getAttribute(m);
+    const i = t.getAttribute(f);
     if (!i)
       return null;
-    const n = parseInt(i);
-    return Number.isNaN(n) ? null : n;
+    const r = parseInt(i);
+    return Number.isNaN(r) ? null : r;
   }
   /**
    * Gets the block element (the element with BLOCK_CLASS)
    */
-  _getBlockElement(t) {
-    if ("getAttribute" in t) {
-      const e = t.getAttribute("class");
-      if (e && e.includes(u))
-        return t;
+  _getBlockElement(e) {
+    if ("getAttribute" in e) {
+      const t = e.getAttribute("class");
+      if (t && t.includes(h))
+        return e;
     }
-    return "querySelector" in t ? t.querySelector(`.${u}`) ?? null : null;
+    return "querySelector" in e ? e.querySelector(`.${h}`) ?? null : null;
   }
   /**
    * Migrate configuration from legacy format
    */
-  _migrateFromLegacy(t) {
-    s.migrateFromDataAttributes(this.api, t);
+  _migrateFromLegacy(e) {
+    a.migrateFromDataAttributes(this.api, e);
   }
 }
 export {
   k as BLOCK_ID,
-  Y as RecommendationBlock
+  se as RecommendationBlock
 };

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

@@ -1,19 +1,79 @@
-import { createImageMarginsControl as m, createImageSizeControl as n } from "../../../controlFactories.js";
-import { RecommendationBlockId as o } from "../../constants/blockIds.js";
-import { RecommendationControlId as r } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as t } from "../../constants/selectors.js";
-const e = n(
-  r.IMAGE_SIZE,
-  o.IMAGE,
-  t
-), i = m(
-  r.IMAGE_MARGINS,
-  o.IMAGE,
-  t
-), C = {
-  size: e,
-  margins: i
+import { EditorStatePropertyType as E, PreviewDeviceMode as I, ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { createImageMarginsControl as M, createImageSizeControl as C } from "../../../controlFactories.js";
+import { RecommendationBlockId as c } from "../../constants/blockIds.js";
+import { RecommendationControlId as g } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as l } from "../../constants/selectors.js";
+import { hasGetStyle as a, hasGetAttribute as O } from "../../utils/tagName.js";
+const R = { width: "", height: "auto", "max-height": "" }, f = `${l} img.adapt-img`, x = `*${l.slice(1)}`, p = `@media only screen and (max-width: 600px) { ${f} { max-height: none !important; } }`;
+function _(t) {
+  return { width: "auto", height: "auto", "max-height": `${t}px` };
+}
+function A(t) {
+  return t.querySelectorAll(x).some((e) => "getSelector" in e && e.getSelector() === f);
+}
+function T(t, e) {
+  return a(t) && Object.entries(e).some(([o, n]) => (t.getStyle(o) ?? "") !== n);
+}
+function S(t) {
+  const e = t.getDocumentRootCssNode();
+  return e && !A(e) ? e : null;
+}
+function H(t, e) {
+  const n = e.querySelectorAll("img").some((r) => a(r) && !!r.getStyle("max-height")) ? S(t) : null;
+  if (!n)
+    return;
+  const i = t.getDocumentModifier();
+  i.modifyCss(n).appendRule(p), i.apply(new h("Add the reco image mobile fit rule"));
+}
+const B = `[esd-extension-block-id="${c.IMAGE}"]`, L = /^\d+px$/;
+function y(t) {
+  return O(t) && Number(t.getAttribute("height")) || 0;
+}
+function b(t) {
+  const e = y(t), o = a(t) ? t.getStyle("max-height") ?? "" : "";
+  return L.test(o) && e > 0 && o !== `${e}px`;
+}
+function U(t, e) {
+  const o = e.querySelectorAll(B).map((i) => i.querySelector("img")).filter(b);
+  if (!o.length)
+    return;
+  const n = t.getDocumentModifier();
+  o.forEach((i) => n.modifyHtml(i).setStyle("max-height", `${y(i)}px`)), n.apply(new h("Sync the reco image height bound").asHidden());
+}
+class D extends C(
+  g.IMAGE_SIZE,
+  c.IMAGE,
+  l
+) {
+  getAdditionalModifications(e) {
+    if (this.api.getEditorState()[E.previewDeviceMode] === I.MOBILE)
+      return;
+    const o = this.getFitStyles(), n = this.getTargetNodes(e).map((s) => s.querySelector("img")).filter((s) => T(s, o)), i = o["max-height"] ? S(this.api) : null;
+    if (!n.length && !i)
+      return;
+    const r = this.api.getDocumentModifier();
+    return i && r.modifyCss(i).appendRule(p), n.forEach((s) => {
+      const m = r.modifyHtml(s);
+      Object.entries(o).forEach(([u, d]) => {
+        d ? m.setStyle(u, d) : m.removeStyle(u);
+      });
+    }), r;
+  }
+  getFitStyles() {
+    const { size: e } = this.api.getValues();
+    return (e == null ? void 0 : e.type) === "height" && e.value ? _(e.value) : R;
+  }
+}
+const F = M(
+  g.IMAGE_MARGINS,
+  c.IMAGE,
+  l
+), P = {
+  size: D,
+  margins: F
 };
 export {
-  C as ImageControls
+  P as ImageControls,
+  H as ensureMobileFitRule,
+  U as syncHeightBound
 };