@useinsider/guido 3.12.0-beta.435bd0b → 3.12.0-beta.4e0547f

package/dist/components/Guido.vue.js

@@ -12,7 +12,7 @@ var t = function() {
   n,
   !1,
   null,
-  "50dac6de"
+  "daf7d5f8"
 );
 const l = s.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,140 +1,149 @@
-import { defineComponent as X, defineAsyncComponent as I, ref as W, computed as x, watch as Y, onMounted as Z, onUnmounted as ee } from "vue";
-import { useCortexBlueprintBridge as oe } from "../composables/useCortexBlueprintBridge.js";
-import { provideGuidoActions as te } from "../composables/useGuidoActions.js";
-import { useGuidoStateBridge as ne } from "../composables/useGuidoStateBridge.js";
-import { usePartner as re } from "../composables/usePartner.js";
-import { useStripo as se } from "../composables/useStripo.js";
-import { useTimerClone as ae } from "../composables/useTimerClone.js";
-import { migrate as G } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as H } from "../enums/defaults.js";
-import { RIBBON_SELECTOR as ce } from "../enums/onboarding.js";
-import { useRecommendationExtensionStore as ie } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import me from "./organisms/AutoSaveController.vue.js";
-import de from "./organisms/base/Toaster.vue.js";
-import le from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import ue from "./organisms/header/HeaderWrapper.vue.js";
-import pe from "./organisms/LoadingWrapper.vue.js";
-import fe from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import ve from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as Se } from "../services/stripoApi.js";
-import { useConfigStore as ye } from "../stores/config.js";
-import { useDynamicContentStore as he } from "../stores/dynamic-content.js";
-import { useEditorStore as $ } from "../stores/editor.js";
-import { usePreviewStore as ge } from "../stores/preview.js";
-import { useTemplateStore as be } from "../stores/template.js";
-import { useUnsubscribeStore as Ee } from "../stores/unsubscribe.js";
-const Ve = /* @__PURE__ */ X({
+import { defineComponent as q, defineAsyncComponent as M, ref as U, computed as _, watch as B, onMounted as K, onUnmounted as V } from "vue";
+import { useCortexBlueprintBridge as j } from "../composables/useCortexBlueprintBridge.js";
+import { provideGuidoActions as J } from "../composables/useGuidoActions.js";
+import { useGuidoStateBridge as Q } from "../composables/useGuidoStateBridge.js";
+import { usePartner as X } from "../composables/usePartner.js";
+import { useStripo as Y } from "../composables/useStripo.js";
+import { useTimerClone as Z } from "../composables/useTimerClone.js";
+import { migrate as I } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as N } from "../enums/defaults.js";
+import { RIBBON_SELECTOR as ee } from "../enums/onboarding.js";
+import { useRecommendationExtensionStore as te } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import oe from "./organisms/AutoSaveController.vue.js";
+import ne from "./organisms/base/Toaster.vue.js";
+import re from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import se from "./organisms/header/HeaderWrapper.vue.js";
+import ie from "./organisms/LoadingWrapper.vue.js";
+import ae from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import ce from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as de } from "../services/stripoApi.js";
+import { useConfigStore as me } from "../stores/config.js";
+import { useDynamicContentStore as le } from "../stores/dynamic-content.js";
+import { useEditorStore as O } from "../stores/editor.js";
+import { usePreviewStore as ue } from "../stores/preview.js";
+import { useTemplateStore as pe } from "../stores/template.js";
+import { useUnsubscribeStore as fe } from "../stores/unsubscribe.js";
+const xe = /* @__PURE__ */ q({
   __name: "Guido",
   props: {
-    config: null
+    config: null,
+    ready: { type: Boolean, default: !0 }
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
-  setup(z, { expose: q, emit: n }) {
-    const b = z, K = I(
+  setup(P, { expose: A, emit: n }) {
+    const i = P, W = M(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), V = I(
+    ), x = M(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), E = W(), p = W(), f = he(), w = Ee(), i = ye();
-    i.init(b.config);
-    const m = $(), j = ge(), d = x(() => m.hasChanges), { isTestPartner: J } = re(), D = () => {
-      var e;
-      return (e = E.value) == null ? void 0 : e.handleSave(!0);
-    }, C = (e) => {
-      m.loadingStatus = e;
-    }, {
-      templateId: v,
-      userId: T,
-      partnerName: L,
-      username: k,
-      template: o,
-      editor: s
-    } = i, l = (o == null ? void 0 : o.html) || "", F = (o == null ? void 0 : o.css) || "", S = (o == null ? void 0 : o.preselectedDynamicContent) || [], U = (s == null ? void 0 : s.savedModulesFolderName) || H.SAVED_MODULES, _ = (s == null ? void 0 : s.defaultModulesFolderName) || H.DEFAULT_MODULES;
-    oe(), ne();
-    const y = {
-      emailId: v,
-      userId: T,
-      username: k,
-      partnerName: L,
-      savedModulesFolderName: U,
-      defaultModulesFolderName: _
-    }, M = {
-      preselectedDynamicContentList: S,
-      onReady: () => {
-        console.debug("guido:ready"), n("ready");
-      }
-    }, { initPlugin: O } = se(y, M), { getDefaultTemplate: P } = Se(), { cloneTimersOnSave: R, hasTimerBlocks: A } = ae(), Q = x(() => {
-      var e;
-      return !((e = i.ui) != null && e.showHeader);
+    ), g = U(), l = U(), u = le(), S = fe(), o = me();
+    i.ready && o.init(i.config);
+    const d = O(), G = ue(), m = _(() => d.hasChanges), { isTestPartner: H } = X(), h = () => {
+      var t;
+      return (t = g.value) == null ? void 0 : t.handleSave(!0);
+    }, b = (t) => {
+      d.loadingStatus = t;
+    };
+    j(), Q();
+    const p = () => {
+      var t, e;
+      return {
+        emailId: o.templateId,
+        userId: o.userId,
+        username: o.username,
+        partnerName: o.partnerName,
+        savedModulesFolderName: ((t = o.editor) == null ? void 0 : t.savedModulesFolderName) || N.SAVED_MODULES,
+        defaultModulesFolderName: ((e = o.editor) == null ? void 0 : e.defaultModulesFolderName) || N.DEFAULT_MODULES
+      };
+    }, { initPlugin: E, preloadRuntime: w } = Y(), { getDefaultTemplate: C } = de(), { cloneTimersOnSave: D, hasTimerBlocks: T } = Z(), $ = _(() => {
+      var t;
+      return !((t = o.ui) != null && t.showHeader);
     });
-    te({
+    J({
       onBack: () => {
         console.debug("guido:back"), n("back");
       },
       onSaveStart: () => {
         console.debug("guido:save:start"), n("save:start");
       },
-      onSaveComplete: (e) => {
-        const t = { ...e, metadata: y };
-        console.debug("guido:save:complete", t), n("save:complete", t);
+      onSaveComplete: (t) => {
+        const e = { ...t, metadata: p() };
+        console.debug("guido:save:complete", e), n("save:complete", e);
       },
       onTestEmailClick: () => {
         console.debug("guido:test-email:click"), n("test-email:click");
       }
     });
-    const B = (e) => {
-      console.debug("dynamic-content:close", e), f.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, N = () => {
+    const L = (t) => {
+      console.debug("dynamic-content:close", t), u.setSelectedDynamicContent(t), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: t }));
+    }, R = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    Y(() => d.value, () => {
-      n("on-change", d.value);
+    B(() => m.value, () => {
+      n("on-change", m.value);
     });
-    const h = (e) => {
-      const t = e, { attribute: u, position: c } = t.detail;
-      console.debug("dynamic-content:open", t.detail), n("dynamic-content:open", u, c);
+    const f = (t) => {
+      const e = t, { attribute: s, position: c } = e.detail;
+      console.debug("dynamic-content:open", e.detail), n("dynamic-content:open", s, c);
     };
     let a = null;
-    const g = () => {
+    const y = () => {
+      var e;
+      const t = document.querySelector(ee);
+      (e = l.value) == null || e.style.setProperty("--ribbon-offset", `${(t == null ? void 0 : t.offsetHeight) ?? 0}px`);
+    }, v = async () => {
       var t;
-      const e = document.querySelector(ce);
-      (t = p.value) == null || t.style.setProperty("--ribbon-offset", `${(e == null ? void 0 : e.offsetHeight) ?? 0}px`);
-    };
-    return Z(async () => {
-      var t, u;
-      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), ie().$reset(), $().$reset(), m.templateId = v, be().$reset(), g();
-      const e = (t = p.value) == null ? void 0 : t.parentElement;
-      e && (a = new ResizeObserver(g), a.observe(e));
       try {
-        w.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
-        const c = ((u = o == null ? void 0 : o.migration) == null ? void 0 : u.recommendationConfigs) ?? {};
+        o.initialized || o.init(i.config), d.templateId = o.templateId;
+        const e = o.template, s = (e == null ? void 0 : e.html) || "", c = (e == null ? void 0 : e.css) || "", k = (e == null ? void 0 : e.preselectedDynamicContent) || [];
+        S.selectedUnsubscribePages = (e == null ? void 0 : e.selectedUnsubscribePages) || [];
+        const F = ((t = e == null ? void 0 : e.migration) == null ? void 0 : t.recommendationConfigs) ?? {};
         let r = {
-          html: l && await G(l, c),
-          css: F
+          html: s && await I(s, F),
+          css: c
+        };
+        r.html || (r = await C(), r.html = await I(r.html, F)), T(r.html) && (r.html = await D(r.html));
+        const z = {
+          preselectedDynamicContentList: k,
+          onReady: () => {
+            console.debug("guido:ready"), n("ready");
+          }
         };
-        r.html || (r = await P(), r.html = await G(r.html, c)), A(r.html) && (r.html = await R(r.html)), await O(r), f.selectedDynamicContentList = S;
-      } catch (c) {
-        console.error("Failed to initialize Stripo editor:", c);
+        await E(r, p(), z), u.selectedDynamicContentList = k;
+      } catch (e) {
+        console.error("Failed to initialize Stripo editor:", e);
+      }
+    };
+    return K(async () => {
+      var e;
+      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), te().$reset(), O().$reset(), pe().$reset(), y();
+      const t = (e = l.value) == null ? void 0 : e.parentElement;
+      if (t && (a = new ResizeObserver(y), a.observe(t)), w(), i.ready)
+        await v();
+      else {
+        const s = B(() => i.ready, (c) => {
+          c && (s(), v());
+        });
       }
-      document.addEventListener("dynamic-content:open", h);
-    }), ee(() => {
-      a == null || a.disconnect(), document.removeEventListener("dynamic-content:open", h);
+      document.addEventListener("dynamic-content:open", f);
+    }), V(() => {
+      a == null || a.disconnect(), document.removeEventListener("dynamic-content:open", f);
       try {
         window.UIEditor.removeEditor();
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
-      i.reset();
-    }), q({
+      o.reset();
+    }), A({
       dynamicContent: {
-        insert: B,
-        close: N
+        insert: L,
+        close: R
       },
-      hasChanges: d,
-      saveSilent: D,
-      setLoading: C
-    }), { __sfc: !0, PreviewContainer: K, OnboardingWrapper: V, headerWrapperRef: E, wrapperRef: p, dynamicContentStore: f, unsubscribeStore: w, props: b, configStore: i, editorStore: m, previewStore: j, hasChanges: d, isTestPartner: J, saveSilent: D, setLoading: C, templateId: v, userId: T, partnerName: L, username: k, templateConfig: o, editorConfig: s, html: l, css: F, preselectedDynamicContentList: S, savedModulesFolderName: U, defaultModulesFolderName: _, emit: n, metadata: y, options: M, initPlugin: O, getDefaultTemplate: P, cloneTimersOnSave: R, hasTimerBlocks: A, noHeader: Q, insertDynamicContent: B, closeDynamicContent: N, handleDynamicContentOpen: h, ribbonObserver: a, updateRibbonOffset: g, AutoSaveController: me, Toaster: de, FilterSelectionDrawer: le, HeaderWrapper: ue, LoadingWrapper: pe, SaveAsTemplateDrawer: fe, UnsubscribeWrapper: ve };
+      hasChanges: m,
+      saveSilent: h,
+      setLoading: b
+    }), { __sfc: !0, PreviewContainer: W, OnboardingWrapper: x, headerWrapperRef: g, wrapperRef: l, dynamicContentStore: u, unsubscribeStore: S, props: i, configStore: o, editorStore: d, previewStore: G, hasChanges: m, isTestPartner: H, saveSilent: h, setLoading: b, emit: n, buildMetadata: p, initPlugin: E, preloadRuntime: w, getDefaultTemplate: C, cloneTimersOnSave: D, hasTimerBlocks: T, noHeader: $, insertDynamicContent: L, closeDynamicContent: R, handleDynamicContentOpen: f, ribbonObserver: a, updateRibbonOffset: y, startEditor: v, AutoSaveController: oe, Toaster: ne, FilterSelectionDrawer: re, HeaderWrapper: se, LoadingWrapper: ie, SaveAsTemplateDrawer: ae, UnsubscribeWrapper: ce };
   }
 });
 export {
-  Ve as default
+  xe as default
 };

package/dist/composables/useStripo.js

@@ -1,31 +1,44 @@
-import { useActionsApi as x } from "./useActionsApi.js";
+import { useActionsApi as L } from "./useActionsApi.js";
 import { useBlocksConfig as O } from "./useBlocksConfig.js";
 import { useConfig as q } from "./useConfig.js";
 import { useCustomInterfaceAppearance as H } from "./useCustomInterfaceAppearance.js";
-import { useFullStoryBridge as L } from "./useFullStoryBridge.js";
-import { useModuleDynamicContentRepair as N } from "./useModuleDynamicContentRepair.js";
+import { useFullStoryBridge as N } from "./useFullStoryBridge.js";
+import { useModuleDynamicContentRepair as j } from "./useModuleDynamicContentRepair.js";
 import { useStripoEventHandler as z } from "./useStripoEventHandler.js";
 import { useStripoNotifications as $ } from "./useStripoNotifications.js";
 import { useToaster as G } from "./useToaster.js";
 import { localePatch as J } from "../config/i18n/index.js";
-import { en as E } from "../config/i18n/en/index.js";
+import { en as w } from "../config/i18n/en/index.js";
 import { ToasterTypeOptions as X } from "../enums/toaster.js";
-import { useStripoApi as j } from "../services/stripoApi.js";
-import K from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as w } from "../stores/editor.js";
-import { buildMergeTagEntries as Q, flattenDynamicContentList as W } from "../utils/genericUtil.js";
-import Y from "../package.json.js";
-const he = (b, l) => {
-  const { features: c, template: u, isFeatureEnabled: m } = q(), { handleError: p, showToaster: k } = G(), { getToken: T, getCustomFonts: v, getSyncModulesStatus: B } = j(), { handleEvent: F } = z(), { handleModuleAdd: M } = N(), { getStripoBlocksConfig: A } = O(), { getStripoNotifications: V } = $(), _ = async (n, i = [], r = !1) => {
-    var S, y, h, C;
-    const e = w(), { html: f, css: a } = n, { baseBlocks: o, extensions: d } = await A(), g = ((S = c.value) == null ? void 0 : S.displayConditions) ?? !0, P = ((y = c.value) == null ? void 0 : y.modulesDisabled) ?? !1, I = ((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1;
+import { useStripoApi as K } from "../services/stripoApi.js";
+import Q from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as b } from "../stores/editor.js";
+import { buildMergeTagEntries as W, flattenDynamicContentList as Y } from "../utils/genericUtil.js";
+import Z from "../package.json.js";
+let n = null;
+const Ct = () => {
+  const { features: c, template: u, isFeatureEnabled: m } = q(), { handleError: p, showToaster: k } = G(), { getToken: T, getCustomFonts: v, getSyncModulesStatus: B } = K(), { handleEvent: F } = z(), { handleModuleAdd: M } = j(), { getStripoBlocksConfig: A } = O(), { getStripoNotifications: V } = $(), f = () => n || (n = new Promise((i, s) => {
+    var l;
+    if (document.getElementById("UiEditorScript")) {
+      i();
+      return;
+    }
+    const o = Z.guido, r = `https://email-static.useinsider.com/guido/${(l = o == null ? void 0 : o.stripo) == null ? void 0 : l.version}/UIEditor.js`, t = document.createElement("script");
+    t.id = "UiEditorScript", t.type = "module", t.src = r, t.onload = () => i(), t.onerror = () => {
+      t.remove(), s(new Error(`Failed to load Stripo UIEditor script from S3: ${r}`));
+    }, document.body.appendChild(t);
+  }), n.catch(() => {
+    n = null;
+  }), n), _ = async (i, s, o, a = [], r = !1) => {
+    var y, E, h, C;
+    const t = b(), { html: l, css: D } = i, { baseBlocks: g, extensions: R } = await A(), S = ((y = c.value) == null ? void 0 : y.displayConditions) ?? !0, P = ((E = c.value) == null ? void 0 : E.modulesDisabled) ?? !1, U = ((h = u.value) == null ? void 0 : h.forceRecreate) ?? !1;
     await window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: b,
-        html: f,
-        css: a,
-        forceRecreate: I,
+        metadata: s,
+        html: l,
+        css: D,
+        forceRecreate: U,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -35,9 +48,9 @@ const he = (b, l) => {
         customAppearanceMergetags: !m("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: K,
-        conditionsEnabled: g,
-        customConditionsEnabled: g,
+        customViewStyles: Q,
+        conditionsEnabled: S,
+        customConditionsEnabled: S,
         enableXSSSecurity: !0,
         modulesDisabled: P,
         syncModulesEnabled: r,
@@ -49,50 +62,50 @@ const he = (b, l) => {
         selectElementAfterDrop: !0,
         sameFontSizeForOutlook: !0,
         allowedScriptSourceDomains: "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com",
-        ...o ? { baseBlocks: o } : {},
+        ...g ? { baseBlocks: g } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
-          customFonts: i
+          customFonts: a
         },
         mergeTags: [
           {
-            entries: Q(
-              l.preselectedDynamicContentList,
-              W((C = u.value) == null ? void 0 : C.dynamicContentList),
+            entries: W(
+              o.preselectedDynamicContentList,
+              Y((C = u.value) == null ? void 0 : C.dynamicContentList),
               m("liquidSyntax")
             )
           }
         ],
-        async onTokenRefreshRequest(t) {
+        async onTokenRefreshRequest(e) {
           try {
-            const s = await T();
-            t(s);
-          } catch (s) {
-            p(s, "Failed to refresh token");
+            const d = await T();
+            e(d);
+          } catch (d) {
+            p(d, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: t } = H(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: R } = x(), { injectFullStory: U } = L();
-            t(), s(), U(), R(), l.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
-              e.hasChanges = !1;
+            const { importCss: e } = H(), { activateCustomViewStyles: d, updateTimerInClonedTemplate: I } = L(), { injectFullStory: x } = N();
+            e(), d(), x(), I(), o.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
+              t.hasChanges = !1;
             }, 1e3);
-          } catch (t) {
-            p(t, "Failed to load custom interface appearance");
+          } catch (e) {
+            p(e, "Failed to load custom interface appearance");
           }
         },
-        onCodeEditorVisibilityChanged(t) {
-          e.isCodeEditorOpen = t;
+        onCodeEditorVisibilityChanged(e) {
+          t.isCodeEditorOpen = e;
         },
-        onEditorVisualModeChanged(t) {
-          e.editorVisualMode = t.toLowerCase();
+        onEditorVisualModeChanged(e) {
+          t.editorVisualMode = e.toLowerCase();
         },
-        onVersionHistoryVisibilityChanged(t) {
-          e.isVersionHistoryOpen = t;
+        onVersionHistoryVisibilityChanged(e) {
+          t.isVersionHistoryOpen = e;
         },
         onDataChanged() {
-          e.hasChanges = !0;
+          t.hasChanges = !0;
         },
         onEvent: F,
         onModuleAdd: M,
@@ -102,45 +115,35 @@ const he = (b, l) => {
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
-        extensions: d,
+        extensions: R,
         localePatch: J
       }
     );
-  }, D = (n) => new Promise((i, r) => {
-    var d;
-    if (document.getElementById("UiEditorScript")) {
-      Promise.resolve(n()).then(i, r);
-      return;
-    }
-    const e = Y.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
-    o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
-      Promise.resolve(n()).then(i, r);
-    }, o.onerror = () => {
-      r(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
-    }, document.body.appendChild(o);
-  });
-  return { initPlugin: async (n) => {
-    const i = w();
+  };
+  return { initPlugin: async (i, s, o) => {
+    const a = b();
     try {
-      await D(async () => {
-        const [r, e] = await Promise.all([
-          v(),
-          B()
-        ]);
-        i.syncModulesEnabled = e, await _(n, r, e);
-      });
+      await f();
+      const [r, t] = await Promise.all([
+        v(),
+        B()
+      ]);
+      a.syncModulesEnabled = t, await _(i, s, o, r, t);
     } catch {
-      i.loadingStatus = !1, k({
+      a.loadingStatus = !1, k({
         type: X.Error,
-        message: E["An error has occurred. Please report the error code to support."],
+        message: w["An error has occurred. Please report the error code to support."],
         actionButton: {
-          text: E["Reload page"],
+          text: w["Reload page"],
           onClick: () => window.location.reload()
         }
       });
     }
+  }, preloadRuntime: () => {
+    f().catch(() => {
+    });
   } };
 };
 export {
-  he as useStripo
+  Ct as useStripo
 };

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

@@ -1,4 +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.CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control", c.CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control", c.CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control", c.CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control", c.CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control", c.CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control", c.CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control", c.CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
+var o = /* @__PURE__ */ ((c) => (c.BLOCK_BACKGROUND = "recommendation-block-background-color-control", 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.CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control", c.CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control", c.CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control", c.CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control", c.CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control", c.CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control", c.CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control", c.CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
 export {
   o as RecommendationControlId
 };

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

@@ -0,0 +1,10 @@
+import { createBlockBackgroundColorControl as o } from "../../../controlFactories.js";
+import { RecommendationControlId as r } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as t } from "../../constants/selectors.js";
+const c = o(
+  r.BLOCK_BACKGROUND,
+  t
+);
+export {
+  c as BlockBackgroundColorControl
+};

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

@@ -1,4 +1,4 @@
-import { ExtensionBuilder as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExtensionBuilder as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlock as m } from "./block.js";
 import n from "./canvasPreview.css.js";
 import { RecommendationBlockControl as i } from "./controls/main/index.js";
@@ -6,42 +6,44 @@ import "./constants/selectors.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
 import { NameControls as e } from "./controls/name/index.js";
-import { PriceControls as s } from "./controls/price/index.js";
-import { OldPriceControls as l } from "./controls/oldPrice/index.js";
+import { PriceControls as l } from "./controls/price/index.js";
+import { OldPriceControls as s } from "./controls/oldPrice/index.js";
 import { OmnibusPriceControls as p } from "./controls/omnibusPrice/index.js";
 import { OmnibusDiscountControls as a } from "./controls/omnibusDiscount/index.js";
 import { ButtonControls as c } from "./controls/button/index.js";
-import { ImageControls as f } from "./controls/image/index.js";
-import { CustomAttributeControls as C } from "./controls/customAttribute/index.js";
+import { ImageControls as C } from "./controls/image/index.js";
+import { CustomAttributeControls as f } from "./controls/customAttribute/index.js";
 import { SpacingControl as d } from "./controls/spacing/index.js";
-import { CardBackgroundColorControl as u } from "./controls/cardBackground/index.js";
-import { RecommendationCardCompositionControl as g } from "./controls/cardComposition/index.js";
-import { SyncInfoMessageControl as y } from "./controls/syncInfoMessage.js";
+import { BlockBackgroundColorControl as u } from "./controls/blockBackground/index.js";
+import { CardBackgroundColorControl as g } from "./controls/cardBackground/index.js";
+import { RecommendationCardCompositionControl as y } from "./controls/cardComposition/index.js";
+import { SyncInfoMessageControl as B } from "./controls/syncInfoMessage.js";
 import { RecommendationIconsRegistry as P } from "./iconsRegistry.js";
 import R from "./recommendation.css.js";
 import { SettingsPanel as S } from "./settingsPanel.js";
-const w = [
+const k = [
   e,
-  s,
   l,
+  s,
   p,
   a,
   c,
-  f,
-  C
-], B = [
+  C,
+  f
+], w = [
   i,
   u,
-  d,
   g,
-  y
+  d,
+  y,
+  B
 ], b = [
-  ...B,
-  ...w.flatMap((o) => Object.values(o))
-], U = b.reduce(
-  (o, t) => o.addControl(t),
-  new r().addBlock(m).withSettingsPanelRegistry(S)
+  ...w,
+  ...k.flatMap((o) => Object.values(o))
+], W = b.reduce(
+  (o, r) => o.addControl(r),
+  new t().addBlock(m).withSettingsPanelRegistry(S)
 ).addStyles(R).withPreviewStyles(n).withIconsRegistry(P).build();
 export {
-  U as default
+  W as default
 };