@useinsider/guido 2.0.0-beta.59a25d3 → 2.0.0-beta.5c09f2c

package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue.js

@@ -8,15 +8,15 @@ var n = function() {
   }, "primary-action": t.handleFixInCodeEditor } }, [r("div", { staticClass: "d-f f-d-c" }, [r("div", { staticClass: "mb-3" }, [r("div", { staticClass: "l-s-5 f-s-1 f-w-600 t-c-55 t-t-u" }, [e._v(" " + e._s(t.errorCountText) + " ")])]), r("div", { staticClass: "d-f f-d-c g-13 error-list" }, e._l(t.previewStore.ampErrors, function(o, s) {
     return r(t.InOnPageMessage, { key: s, attrs: { icon: "filled-error-box", size: "small", type: "alert", text: o } });
   }), 1)])]);
-}, l = [], c = /* @__PURE__ */ a(
+}, l = [], d = /* @__PURE__ */ a(
   i,
   n,
   l,
   !1,
   null,
-  "a00b5f5f"
+  "c3fd5d4b"
 );
-const _ = c.exports;
+const _ = d.exports;
 export {
   _ as default
 };

package/dist/components/organisms/email-preview/amp/AmpErrorModal.vue2.js

@@ -25,7 +25,7 @@ const O = /* @__PURE__ */ m({
     }, s = o(
       "email-editor.amp-validation-description",
       { academyLink: M.AMP_FOR_EMAILS }
-    ), p = d(() => `${o("products.errors")}(${i.ampErrors.length})`);
+    ), p = d(() => `${o("products.errors")} (${i.ampErrors.length})`);
     return { __sfc: !0, emit: e, trans: o, closePreviewMode: r, openCodeEditor: t, previewStore: i, footerButtonOptions: n, handleFixInCodeEditor: a, ampValidationDescription: s, errorCountText: p, WpModal: l, InOnPageMessage: E };
   }
 });

package/dist/components/organisms/email-preview/amp/AmpToggle.vue.js

@@ -1,19 +1,20 @@
 import o from "./AmpToggle.vue2.js";
+/* empty css               */
 import n from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var a = function() {
+var i = function() {
   var r = this, t = r._self._c, e = r._self._setupProxy;
   return t("div", [t("div", { staticClass: "d-f a-i-c ml-3" }, [t(e.InSegments, { attrs: { id: "guido__amp-toggle", "with-icon": "", "segment-list": e.segmentList, selected: e.previewStore.emailFormat }, on: { click: e.handleFormatChange } }), e.previewStore.showAMPErrorButton ? t(e.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__amp-error-button", "left-icon": "filled-amp", type: "danger", "label-text": e.trans("email-editor.check-amp-errors", { count: e.previewStore.ampErrors.length }) }, on: { click: function(m) {
     return e.previewStore.openErrorModal();
   } } }) : r._e()], 1)]);
-}, i = [], s = /* @__PURE__ */ n(
+}, a = [], s = /* @__PURE__ */ n(
   o,
-  a,
   i,
+  a,
   !1,
   null,
-  null
+  "22226124"
 );
-const p = s.exports;
+const d = s.exports;
 export {
-  p as default
+  d as default
 };

package/dist/components/organisms/header/EditorActions.vue.js

@@ -1,9 +1,10 @@
 import l from "./EditorActions.vue2.js";
+/* empty css                   */
 import r from "../../../_virtual/_plugin-vue2_normalizer.js";
 var d = function() {
   var s, i, n, a;
   var e = this, o = e._self._c, t = e._self._setupProxy;
-  return o("div", { staticClass: "d-f" }, [t.isVersionHistoryButtonVisible ? o(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }) : e._e(), o(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = (s = t.config) == null ? void 0 : s.features) != null && i.saveAsTemplate ? o(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : e._e(), (a = (n = t.config) == null ? void 0 : n.features) != null && a.testMessage ? o(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button", { staticPosition: "bottom right" }), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: t.testEmailClick } }) : e._e(), t.editorStore.isPreviewModeOpen ? e._e() : o(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(_) {
+  return o("div", { staticClass: "d-f editor-actions" }, [t.isVersionHistoryButtonVisible ? o(t.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isVersionHistoryButtonDisabled, "label-text-status": !1, "selected-status": t.editorStore.isVersionHistoryOpen, "tooltip-options": t.getTooltipOptions("guido__history-button"), "tooltip-text": t.versionHistoryTooltipText }, on: { click: t.handleVersionHistory } }) : e._e(), o(t.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isExportButtonDisabled, "label-text-status": !1, "loading-status": t.isExporting, "tooltip-options": t.getTooltipOptions("guido__export-button"), "tooltip-text": t.trans("newsletter.export") }, on: { click: t.handleExport } }), (i = (s = t.config) == null ? void 0 : s.features) != null && i.saveAsTemplate ? o(t.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isSaveAsButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__save-as-button"), "tooltip-text": t.trans("newsletter.save-templates") }, on: { click: t.handleSaveAs } }) : e._e(), (a = (n = t.config) == null ? void 0 : n.features) != null && a.testMessage ? o(t.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "disabled-status": t.editorStore.isTestButtonDisabled, "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__test-button", { staticPosition: "bottom right" }), "tooltip-text": t.trans("newsletter.test-email") }, on: { click: t.testEmailClick } }) : e._e(), t.editorStore.isPreviewModeOpen ? e._e() : o(t.InButtonV2, { staticClass: "ml-3", attrs: { id: "guido__save-button", "label-text": "Save", "disabled-status": !t.isSaving && t.editorStore.isSaveButtonDisabled, "loading-status": t.isSaving }, on: { click: function(_) {
     return t.handleSave(!1);
   } } })], 1);
 }, u = [], p = /* @__PURE__ */ r(
@@ -12,9 +13,9 @@ var d = function() {
   u,
   !1,
   null,
-  null
+  "17dd4d8b"
 );
-const f = p.exports;
+const v = p.exports;
 export {
-  f as default
+  v as default
 };

package/dist/components/organisms/header/MiddleSlot.vue.js

@@ -1,11 +1,11 @@
-import t from "./MiddleSlot.vue2.js";
-import i from "../../../_virtual/_plugin-vue2_normalizer.js";
-var s = function() {
-  var o = this, e = o._self._c, r = o._self._setupProxy;
-  return r.editorStore.isVersionHistoryOpen ? e("div", { staticClass: "d-f" }, [e(r.VersionHistory), e(r.VersionHistoryViewOptions)], 1) : r.editorStore.isPreviewModeOpen ? e("div", { staticClass: "d-f" }, [e(r.EmailSizeIndicator), e(r.AmpToggle)], 1) : e(r.EditorToolbar);
-}, n = [], a = /* @__PURE__ */ i(
+import i from "./MiddleSlot.vue2.js";
+import s from "../../../_virtual/_plugin-vue2_normalizer.js";
+var t = function() {
+  var r = this, e = r._self._c, o = r._self._setupProxy;
+  return e("div", [o.editorStore.isVersionHistoryOpen ? e("div", { staticClass: "d-f" }, [e(o.VersionHistory), e(o.VersionHistoryViewOptions)], 1) : o.editorStore.isPreviewModeOpen ? e("div", { staticClass: "d-f" }, [e(o.EmailSizeIndicator), e(o.AmpToggle)], 1) : r._e(), e(o.EditorToolbar, { directives: [{ name: "show", rawName: "v-show", value: o.editorStore.isEditorToolbarVisible, expression: "editorStore.isEditorToolbarVisible" }] })], 1);
+}, n = [], a = /* @__PURE__ */ s(
+  i,
   t,
-  s,
   n,
   !1,
   null,

package/dist/components/organisms/header/version-history/VersionHistory.vue.js

@@ -1,20 +1,20 @@
-import o from "./VersionHistory.vue2.js";
+import r from "./VersionHistory.vue2.js";
 /* empty css                    */
 import i from "../../../../_virtual/_plugin-vue2_normalizer.js";
 var n = function() {
   var s = this, e = s._self._c, t = s._self._setupProxy;
-  return e("div", { staticClass: "version-history-wrapper d-f a-i-c f-g-1 mx-3" }, [t.itemStatus ? e(t.VersionHistoryItem, { attrs: { "text-align": "right", date: t.versionHistoryStore.previousPatch.date, description: t.versionHistoryStore.previousPatch.description } }) : s._e(), e("div", { staticClass: "d-f" }, [e(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "disabled-status": !t.versionHistoryStore.hasPreviousPatch, "label-text-status": !1 }, on: { click: function(r) {
+  return e("div", { staticClass: "version-history d-f a-i-c f-g-1 mx-3" }, [t.itemStatus ? e(t.VersionHistoryItem, { attrs: { "text-align": "right", date: t.versionHistoryStore.previousPatch.date, description: t.versionHistoryStore.previousPatch.description } }) : s._e(), e("div", { staticClass: "d-f version-history__toolbar" }, [e(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "disabled-status": !t.versionHistoryStore.hasPreviousPatch, "label-text-status": !1 }, on: { click: function(o) {
     return t.previewVersion(t.versionHistoryStore.previousPatch.id);
-  } } }), e(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "disabled-status": !t.versionHistoryStore.hasNextPatch, "label-text-status": !1 }, on: { click: function(r) {
+  } } }), e(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "disabled-status": !t.versionHistoryStore.hasNextPatch, "label-text-status": !1 }, on: { click: function(o) {
     return t.previewVersion(t.versionHistoryStore.nextPatch.id);
   } } })], 1), t.itemStatus ? e(t.VersionHistoryItem, { attrs: { "text-align": "left", date: t.versionHistoryStore.nextPatch.date, description: t.versionHistoryStore.nextPatch.description } }) : s._e()], 1);
 }, a = [], c = /* @__PURE__ */ i(
-  o,
+  r,
   n,
   a,
   !1,
   null,
-  "52a77eec"
+  "64c52560"
 );
 const _ = c.exports;
 export {

package/dist/composables/useActionsApi.js

@@ -1,7 +1,7 @@
 import { useToaster as w } from "./useToaster.js";
-const S = () => {
-  const { handleError: l } = w(), s = (t = {}) => new Promise((e, i) => {
-    const n = { ...{
+const v = () => {
+  const { handleError: l } = w(), r = (t = {}) => new Promise((e, a) => {
+    const o = { ...{
       minimize: !0,
       utmEntity: {
         utmSource: "",
@@ -20,29 +20,29 @@ const S = () => {
       forceAmp: !1,
       resetDataSavedFlag: !1,
       disableLineHeightsReplace: !0
-    }, ...t }, m = {
-      callback: (o, p, d, c, u) => {
-        o ? i(o) : e({
+    }, ...t }, s = {
+      callback: (n, p, d, c, u) => {
+        n ? a(n) : e({
           html: p,
           ampHtml: d,
           ampErrors: c,
           displayConditions: u
         });
       },
-      ...n
+      ...o
     };
-    window.StripoEditorApi.actionsApi.compileEmail(m);
+    window.StripoEditorApi.actionsApi.compileEmail(s);
   });
   return {
-    getCompiledEmail: s,
+    getCompiledEmail: r,
     getTemplateData: () => new Promise((t) => {
-      const e = ({ html: i, css: a, width: n, height: r, utmParams: m, syncModulesIds: o }) => t({
-        html: i,
-        css: a,
-        width: n,
-        height: r,
-        utmParams: m,
-        syncModulesIds: o
+      const e = ({ html: a, css: i, width: o, height: m, utmParams: s, syncModulesIds: n }) => t({
+        html: a,
+        css: i,
+        width: o,
+        height: m,
+        utmParams: s,
+        syncModulesIds: n
       });
       window.StripoEditorApi.actionsApi.getTemplateData(e);
     }),
@@ -53,15 +53,15 @@ const S = () => {
       try {
         const {
           html: e,
-          displayConditions: i,
-          ampHtml: a = "",
-          ampErrors: n = []
-        } = await s({ minimize: !1, resetDataSavedFlag: !1, ...t });
+          displayConditions: a,
+          ampHtml: i = "",
+          ampErrors: o = []
+        } = await r({ minimize: !1, resetDataSavedFlag: !1, ...t });
         return {
           html: e,
-          ampHtml: a,
-          ampErrors: n,
-          displayConditions: i
+          ampHtml: i,
+          ampErrors: o,
+          displayConditions: a
         };
       } catch (e) {
         return l(e, "Error loading preview"), {
@@ -73,24 +73,27 @@ const S = () => {
       }
     },
     updateTimerInClonedTemplate: () => new Promise((t) => {
-      var e, i;
-      if (typeof ((i = (e = window.StripoEditorApi) == null ? void 0 : e.actionsApi) == null ? void 0 : i.updateTimerInClonedTemplate) != "function") {
+      var e, a;
+      if (typeof ((a = (e = window.StripoEditorApi) == null ? void 0 : e.actionsApi) == null ? void 0 : a.updateTimerInClonedTemplate) != "function") {
         t(null);
         return;
       }
       try {
-        window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((a, n) => {
-          a ? (l(a, "Failed to update timer in cloned template"), t(null)) : t(n || null);
+        window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((i, o) => {
+          i ? (l(i, "Failed to update timer in cloned template"), t(null)) : t(o || null);
         });
-      } catch (a) {
-        l(a, "Failed to call updateTimerInClonedTemplate"), t(null);
+      } catch (i) {
+        l(i, "Failed to call updateTimerInClonedTemplate"), t(null);
       }
     }),
     updateHtmlAndCss: (t, e) => {
       window.StripoEditorApi.actionsApi.updateHtmlAndCss(t, e);
+    },
+    editorSave: () => {
+      window.StripoEditorApi.actionsApi.save();
     }
   };
 };
 export {
-  S as useActionsApi
+  v as useActionsApi
 };

package/dist/config/migrator/recommendationMigrator.js

@@ -1,8 +1,8 @@
 var h = Object.defineProperty;
 var T = (A, e, t) => e in A ? h(A, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : A[e] = t;
 var m = (A, e, t) => T(A, typeof e != "symbol" ? e + "" : e, t);
-import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/migrationTemplate.js";
-import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/templateUtils.js";
+import P, { prepareProductRows as S } from "../../extensions/Blocks/Recommendation/templates/grid/migration.js";
+import { getDefaultProducts as q } from "../../extensions/Blocks/Recommendation/templates/utils.js";
 class w {
   constructor() {
     m(this, "parser");

package/dist/extensions/Blocks/Items/controls/cardComposition.js

@@ -145,10 +145,19 @@ class g extends R {
     T && this.api.getDocumentModifier().modifyHtml(o).setAttribute(C[T], e ? "1" : "0").apply(new l(`Updated ${t} visibility attribute`));
   }
   _listenToFormUpdates() {
-    this.api.onValueChanged(i.PRODUCT_IMAGE, (t) => this._onProductImageChange(t)), this.api.onValueChanged(i.PRODUCT_NAME, (t) => this._onProductNameChange(t)), this.api.onValueChanged(i.PRODUCT_QUANTITY, (t) => this._onProductQuantityChange(t)), this.api.onValueChanged(i.PRODUCT_PRICE, (t) => this._onProductPriceChange(t)), this.api.onValueChanged(
-      i.PRODUCT_ORIGINAL_PRICE,
-      (t) => this._onProductOriginalPriceChange(t)
-    ), this.api.onValueChanged(i.PRODUCT_BUTTON, (t) => this._onProductButtonChange(t));
+    this.api.onValueChanged(i.PRODUCT_IMAGE, (t) => {
+      this._onProductImageChange(t);
+    }), this.api.onValueChanged(i.PRODUCT_NAME, (t) => {
+      this._onProductNameChange(t);
+    }), this.api.onValueChanged(i.PRODUCT_QUANTITY, (t) => {
+      this._onProductQuantityChange(t);
+    }), this.api.onValueChanged(i.PRODUCT_PRICE, (t) => {
+      this._onProductPriceChange(t);
+    }), this.api.onValueChanged(i.PRODUCT_ORIGINAL_PRICE, (t) => {
+      this._onProductOriginalPriceChange(t);
+    }), this.api.onValueChanged(i.PRODUCT_BUTTON, (t) => {
+      this._onProductButtonChange(t);
+    });
   }
   _onProductImageChange(t) {
     var o;

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

@@ -1,7 +1,8 @@
-import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as o } from "./templates/blockTemplate.js";
+import { Block as o, BlockCompositionType as i } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationConfigService as t } from "./services/configService.js";
+import { getDefaultTemplate as r } from "./templates/grid/template.js";
 const n = "recommendation-block";
-class m extends e {
+class g extends o {
   constructor() {
     super();
   }
@@ -12,7 +13,7 @@ class m extends e {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return t.CONTAINER;
+    return i.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -21,10 +22,43 @@ class m extends e {
     return this.api.translate("Recommendation Block Title Description");
   }
   getTemplate() {
-    return o();
+    return r();
+  }
+  /**
+   * Called when a new block is dropped into the template
+   *
+   * Initializes the block with default configuration stored via node config.
+   * This ensures the configuration persists with the template.
+   * @param node - The newly created block node
+   */
+  onCreated(e) {
+    t.initializeConfig(this.api, e);
+  }
+  /**
+   * Called when the document changes or template is loaded
+   *
+   * Handles migration from legacy templates that don't have node config.
+   * Also handles config version upgrades for future migrations.
+   * @param node - The block node that may need migration
+   */
+  onDocumentChanged(e) {
+    !e || !("getNodeConfig" in e) || t.needsMigration(e) && this._migrateFromLegacy(e);
+  }
+  /**
+   * Migrate configuration from legacy format
+   *
+   * Legacy templates may store configuration in:
+   * - data-attributes (data-layout, data-card-composition, etc.)
+   * - Pinia store (lost on reload - this is what we're fixing)
+   *
+   * This method reads what we can from the DOM and initializes proper node config.
+   * @param node - The block node to migrate
+   */
+  _migrateFromLegacy(e) {
+    t.migrateFromDataAttributes(this.api, e);
   }
 }
 export {
   n as BLOCK_ID,
-  m as RecommendationBlock
+  g as RecommendationBlock
 };

package/dist/extensions/Blocks/Recommendation/constants/blockIds.js

@@ -0,0 +1,4 @@
+var b = /* @__PURE__ */ ((r) => (r.BUTTON = "recommendation-block-button", r.NAME = "recommendation-block-name", r.PRICE = "recommendation-block-price", r.OLD_PRICE = "recommendation-block-old-price", r.OMNIBUS_PRICE = "recommendation-block-omnibus-price", r.OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount", r.IMAGE = "recommendation-block-image", r))(b || {});
+export {
+  b as RecommendationBlockId
+};

package/dist/extensions/Blocks/Recommendation/constants/controlIds.js

@@ -0,0 +1,4 @@
+var o = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c))(o || {});
+export {
+  o as RecommendationControlId
+};

package/dist/extensions/Blocks/Recommendation/constants/defaultConfig.js

@@ -0,0 +1,64 @@
+import { DEFAULT_ROW_SPACING as s, DEFAULT_COLUMN_SPACING as R, DEFAULT_CARDS_IN_ROW as n } from "./layout.js";
+import { ATTR_PRODUCT_IMAGE as t, ATTR_PRODUCT_NAME as T, ATTR_PRODUCT_OLD_PRICE as e, ATTR_PRODUCT_PRICE as o, ATTR_PRODUCT_OMNIBUS_PRICE as _, ATTR_PRODUCT_OMNIBUS_DISCOUNT as r, ATTR_PRODUCT_BUTTON as U } from "./selectors.js";
+const I = {
+  code: "USD",
+  symbol: "USD",
+  alignment: "after",
+  decimalCount: 2,
+  decimalSeparator: ".",
+  thousandSeparator: ","
+}, O = {
+  textBefore: "",
+  textAfter: ""
+}, i = {
+  textBefore: "",
+  textAfter: ""
+}, C = [
+  t,
+  T,
+  e,
+  o,
+  _,
+  r,
+  U
+], D = {
+  [t]: !0,
+  [T]: !0,
+  [o]: !0,
+  [e]: !0,
+  [_]: !1,
+  [r]: !1,
+  [U]: !0
+}, a = {
+  // Settings
+  strategy: "mostPopular",
+  productIds: [],
+  size: "6",
+  shuffleProducts: !1,
+  language: "en_US",
+  currency: I,
+  filters: [],
+  // Layout
+  layout: "grid",
+  cardsInRow: n,
+  columnSpacing: R,
+  rowSpacing: s,
+  // Composition
+  composition: C,
+  visibility: D,
+  // Element settings
+  omnibusPrice: O,
+  omnibusDiscount: i,
+  textTrimming: !1,
+  // Meta
+  configVersion: 1
+}, E = 1;
+export {
+  E as CURRENT_CONFIG_VERSION,
+  C as DEFAULT_COMPOSITION,
+  I as DEFAULT_CURRENCY,
+  a as DEFAULT_NODE_CONFIG,
+  i as DEFAULT_OMNIBUS_DISCOUNT,
+  O as DEFAULT_OMNIBUS_PRICE,
+  D as DEFAULT_VISIBILITY
+};

package/dist/extensions/Blocks/Recommendation/constants/layout.js

@@ -0,0 +1,20 @@
+const _ = {
+  GRID: "grid",
+  LIST: "list"
+}, o = [
+  { icon: "grid-orientation", value: _.GRID },
+  { icon: "list-orientation", value: _.LIST }
+], t = 3, n = 3, A = 9, T = 4, c = 10, s = 20, O = 0, S = 50, I = 5;
+export {
+  n as DEFAULT_CARDS_IN_ROW,
+  c as DEFAULT_COLUMN_SPACING,
+  t as DEFAULT_PRODUCTS_PER_ROW,
+  s as DEFAULT_ROW_SPACING,
+  o as LAYOUT_OPTIONS,
+  _ as LAYOUT_VALUES,
+  T as MAX_PRODUCTS_PER_ROW,
+  A as MAX_PRODUCT_COUNT,
+  S as MAX_SPACING,
+  O as MIN_SPACING,
+  I as SPACING_STEP
+};

package/dist/extensions/Blocks/Recommendation/constants/selectors.js

@@ -0,0 +1,19 @@
+const c = ".ins-recommendation-product-container", T = {
+  CURRENCY: "currency",
+  SYMBOL: "currency-symbol",
+  ALIGNMENT: "currency-alignment",
+  THOUSAND_SEPARATOR: "currency-thousand-separator",
+  DECIMAL_SEPARATOR: "currency-decimal-separator",
+  DECIMAL_COUNT: "currency-decimal-count"
+}, r = "productImage", n = "productName", o = "productPrice", t = "productOldPrice", R = "productOmnibusPrice", O = "productOmnibusDiscount", _ = "productButton";
+export {
+  _ as ATTR_PRODUCT_BUTTON,
+  r as ATTR_PRODUCT_IMAGE,
+  n as ATTR_PRODUCT_NAME,
+  t as ATTR_PRODUCT_OLD_PRICE,
+  O as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
+  R as ATTR_PRODUCT_OMNIBUS_PRICE,
+  o as ATTR_PRODUCT_PRICE,
+  c as CONTAINER_SELECTOR,
+  T as CURRENCY_ATTR
+};

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

@@ -0,0 +1,64 @@
+import { createButtonFitToContainerControl as T, createButtonTextStyleAndFontColorControl as r, createButtonTextSizeControl as e, createButtonTextControl as B, createButtonPaddingsControl as l, createButtonMarginsControl as C, createButtonFontFamilyControl as O, createButtonColorControl as N, createButtonBorderRadiusControl as i, createButtonBorderControl as a, createButtonAlignControl 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 n } from "../../constants/selectors.js";
+const U = c(
+  t.BUTTON_ALIGN,
+  o.BUTTON,
+  n
+), d = a(
+  t.BUTTON_BORDER,
+  o.BUTTON,
+  n
+), s = i(
+  t.BUTTON_BORDER_RADIUS,
+  o.BUTTON,
+  n
+), _ = N(
+  t.BUTTON_COLOR,
+  o.BUTTON,
+  n
+), m = O(
+  t.BUTTON_FONT_FAMILY,
+  o.BUTTON,
+  n
+), u = C(
+  t.BUTTON_MARGINS,
+  o.BUTTON,
+  n
+), R = l(
+  t.BUTTON_PADDINGS,
+  o.BUTTON,
+  n
+), F = B(
+  t.BUTTON_TEXT,
+  o.BUTTON,
+  n
+), A = e(
+  t.BUTTON_TEXT_SIZE,
+  o.BUTTON,
+  n
+), S = r(
+  t.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
+  o.BUTTON,
+  n
+), E = T(
+  t.BUTTON_FIT_TO_CONTENT,
+  o.BUTTON,
+  n
+), p = {
+  align: U,
+  border: d,
+  borderRadius: s,
+  color: _,
+  fontFamily: m,
+  margins: u,
+  paddings: R,
+  text: F,
+  textSize: A,
+  textStyleAndFontColor: S,
+  fitToContent: E
+};
+export {
+  p as ButtonControls
+};

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

@@ -0,0 +1,80 @@
+import { ModificationDescription as d } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as s } from "../../../common-control.js";
+import { getCurrentLayout as l } from "../main/utils.js";
+const u = "recommendation-card-background-color-control", e = {
+  CARD_BACKGROUND_COLOR: "cardBackgroundColor"
+}, a = {
+  GRID: ".product-card-segment",
+  LIST: ".product-card-wrapper"
+};
+class _ extends s {
+  getId() {
+    return u;
+  }
+  getTemplate() {
+    return `
+            <div class="card-bg-control-container">
+                ${this._GuTwoColumns([
+      this._GuLabel({ text: "Card Background Color" }),
+      this._GuColorPicker(e.CARD_BACKGROUND_COLOR)
+    ])}
+            </div>
+        `;
+  }
+  onRender() {
+    this._setFormValues(), this._listenToFormUpdates();
+  }
+  onTemplateNodeUpdated(r) {
+    super.onTemplateNodeUpdated(r), this._setFormValues();
+  }
+  _setFormValues() {
+    const r = this._getCurrentCardBackgroundColor();
+    this.api.updateValues({
+      [e.CARD_BACKGROUND_COLOR]: r
+    });
+  }
+  /**
+   * Gets the appropriate selector based on layout
+   * Grid: .product-card-segment (inner table per product cell)
+   * List: .product-card-wrapper (table per product row)
+   */
+  _getCardSelector() {
+    return l(this.currentNode) === "grid" ? a.GRID : a.LIST;
+  }
+  /**
+   * Reads the current background color from the first product card element
+   * @returns The background color value or 'transparent' if not found
+   */
+  _getCurrentCardBackgroundColor() {
+    if (!this.currentNode || !("querySelectorAll" in this.currentNode))
+      return "transparent";
+    const r = this._getCardSelector(), t = this.currentNode.querySelector(r);
+    return !t || !("getStyle" in t) ? "transparent" : t.getStyle("background-color") || "transparent";
+  }
+  /**
+   * Handles card background color changes
+   * Applies the color to all product card elements based on layout
+   */
+  _onCardBackgroundColorChange(r) {
+    if (!this.currentNode || !("querySelectorAll" in this.currentNode))
+      return;
+    const t = this._getCardSelector(), o = Array.from(
+      this.currentNode.querySelectorAll(t)
+    );
+    if (o.length === 0)
+      return;
+    const n = this.api.getDocumentModifier();
+    o.forEach((c) => {
+      n.modifyHtml(c).setStyle("background-color", r);
+    }), n.apply(new d("Update card background color"));
+  }
+  _listenToFormUpdates() {
+    this.api.onValueChanged(e.CARD_BACKGROUND_COLOR, (r) => {
+      this._onCardBackgroundColorChange(r);
+    });
+  }
+}
+export {
+  u as CARD_BACKGROUND_COLOR_CONTROL_ID,
+  _ as CardBackgroundColorControl
+};