@useinsider/guido 3.18.1 → 3.18.2-beta.345283a

package/dist/components/organisms/save-as-template/SaveAsTemplateDrawer.vue2.js

@@ -1,64 +1,64 @@
-import { defineComponent as A, ref as c, computed as b, toRef as h, nextTick as C } from "vue";
-import N from "../../wrappers/WpDrawer.vue.js";
-import { useTranslations as O } from "../../../composables/useTranslations.js";
+import { defineComponent as _, ref as c, computed as h, watch as C, toRef as N, nextTick as O } from "vue";
+import b from "../../wrappers/WpDrawer.vue.js";
+import { useTranslations as D } from "../../../composables/useTranslations.js";
 import { useTemplateNameValidator as x } from "../../../composables/validators/saveAsTemplate.js";
 import { useTemplateLibraryApi as B } from "../../../services/templateLibraryApi.js";
-import { useEditorStore as D } from "../../../stores/editor.js";
-import { useSaveAsTemplateStore as k } from "../../../stores/save-as-template.js";
-import { InMultiSelect as I, InBasicTextInput as M } from "@useinsider/design-system-vue";
-import { useDebounceFn as V } from "../../../node_modules/@vueuse/shared/index.js";
-const H = /* @__PURE__ */ A({
+import { useEditorStore as k } from "../../../stores/editor.js";
+import { useSaveAsTemplateStore as I } from "../../../stores/save-as-template.js";
+import { InMultiSelect as M, InBasicTextInput as V } from "@useinsider/design-system-vue";
+import { useDebounceFn as E } from "../../../node_modules/@vueuse/shared/index.js";
+const J = /* @__PURE__ */ _({
   __name: "SaveAsTemplateDrawer",
-  setup(E) {
-    const o = O(), n = D(), t = k(), { createTemplate: m } = B(), a = c(!1), r = c(!1), l = c(""), f = b(() => ({
+  setup(R) {
+    const s = D(), o = k(), t = I(), { createTemplate: m } = B(), a = c(!1), n = c(!1), r = c(""), f = h(() => ({
       primaryButton: {
         styling: "solid",
         type: "primary",
-        labelText: o(a.value ? "newsletter.saving" : "products.save"),
+        labelText: s(a.value ? "newsletter.saving" : "products.save"),
         loadingStatus: a.value,
         disabledStatus: t.skeletonStatus
       },
       cancelOrBackButton: {
         styling: "ghost",
         type: "secondary",
-        labelText: o("products.cancel"),
+        labelText: s("products.cancel"),
         disabledStatus: a.value
       }
-    })), u = () => {
-      l.value = "", n.isSaveAsTemplateDrawerOpen = !1;
-    }, i = async () => {
-      const e = h(t, "templateName"), { success: s, errorMessage: _ } = await x(e).validate();
-      return l.value = _, s;
-    }, v = V(async (e) => {
-      t.templateName = e, await i();
-    }, 500), g = async (e) => {
-      r.value = !0, await t.addCategory(e), r.value = !1;
-    }, y = (e) => {
+    })), p = () => {
+      r.value = "", o.isSaveAsTemplateDrawerOpen = !1;
+    }, l = async () => {
+      const e = N(t, "templateName"), { success: i, errorMessage: A } = await x(e).validate();
+      return r.value = A, i;
+    }, v = E(async (e) => {
+      t.templateName = e, await l();
+    }, 500), S = async (e) => {
+      n.value = !0, await t.addCategory(e), n.value = !1;
+    }, T = (e) => {
       t.selectedCategories = e;
-    }, S = (e) => {
+    }, g = (e) => {
       e && (t.selectedCategories = e);
-    }, T = () => {
+    }, y = () => {
       t.selectedCategories = [];
     }, w = async () => {
-      if (a.value = !0, !await i()) {
+      if (a.value = !0, !await l()) {
         a.value = !1;
         return;
       }
-      const s = await m();
-      a.value = !1, s && u();
-    }, p = () => {
-      C(() => {
+      const i = await m();
+      a.value = !1, i && p();
+    }, u = () => {
+      O(() => {
         const e = document.querySelector("input#guido__template-name-input");
         e == null || e.focus();
       });
     }, d = async () => {
-      t.$reset(), await t.fetchCategories(), t.skeletonStatus = !1, p();
+      t.$reset(), await t.fetchCategories(), t.skeletonStatus = !1, u();
     };
-    return n.$subscribe((e, { isSaveAsTemplateDrawerOpen: s }) => {
-      s && d();
-    }), { __sfc: !0, trans: o, editorStore: n, saveAsTemplateStore: t, createTemplate: m, isSaving: a, isAddingOption: r, templateNameError: l, footerButtonGroupOptions: f, closeModal: u, validateTemplateName: i, handleTemplateName: v, handleAddOption: g, handleCategoryChange: y, handleSelectAllOptions: S, handleResetAllOptions: T, saveTemplate: w, focusToInput: p, initializeDrawer: d, WpDrawer: N, InBasicTextInput: M, InMultiSelect: I };
+    return C(() => o.isSaveAsTemplateDrawerOpen, (e) => {
+      e && d();
+    }), { __sfc: !0, trans: s, editorStore: o, saveAsTemplateStore: t, createTemplate: m, isSaving: a, isAddingOption: n, templateNameError: r, footerButtonGroupOptions: f, closeModal: p, validateTemplateName: l, handleTemplateName: v, handleAddOption: S, handleCategoryChange: T, handleSelectAllOptions: g, handleResetAllOptions: y, saveTemplate: w, focusToInput: u, initializeDrawer: d, WpDrawer: b, InBasicTextInput: V, InMultiSelect: M };
   }
 });
 export {
-  H as default
+  J as default
 };

package/dist/composables/useHttp.js

@@ -1,14 +1,16 @@
-import { getCsrfToken as H } from "../utils/genericUtil.js";
-import { ref as p, computed as T } from "vue";
-const k = (b = {}) => {
-  const h = p(!1), a = p(null), u = p(null), g = T(() => h.value), y = T(() => a.value !== null), v = {
+import { getCsrfToken as O } from "../utils/genericUtil.js";
+import { ref as m, computed as T } from "vue";
+const X = (b = {}) => {
+  const p = m(!1), a = m(null), u = m(null), g = T(() => p.value), y = T(() => a.value !== null), v = {
     baseURL: "",
     timeout: 1e4,
     retry: 0,
     retryDelay: 1e3,
     headers: {
       "Content-Type": "application/json",
-      "X-CSRF-TOKEN": H()
+      "X-CSRF-TOKEN": O(),
+      Accept: "application/json",
+      "X-Requested-With": "XMLHttpRequest"
     },
     ...b
   }, w = (e, s) => {
@@ -22,22 +24,22 @@ const k = (b = {}) => {
     }, e);
   }), x = (e) => new Promise((s) => {
     setTimeout(s, e);
-  }), i = async (e, s, t, D = {}) => {
-    a.value = null, h.value = !0, u.value = new AbortController();
-    const n = { ...v, ...D }, L = w(s, n.baseURL), c = {
+  }), i = async (e, s, t, L = {}) => {
+    a.value = null, p.value = !0, u.value = new AbortController();
+    const n = { ...v, ...L }, D = w(s, n.baseURL), c = {
       method: e,
       headers: { ...n.headers },
       signal: u.value.signal,
       ...n
     };
     t && ["POST", "PUT", "PATCH"].includes(e) && (t instanceof FormData ? (delete c.headers["Content-Type"], c.body = t) : c.body = JSON.stringify(t));
-    const E = async (m = 0) => {
+    const E = async (h = 0) => {
       try {
-        const o = [fetch(L, c)];
+        const o = [fetch(D, c)];
         n.timeout && o.push(P(n.timeout));
         const r = await Promise.race(o);
         if (!r.ok) {
-          const O = `HTTP Error: ${r.status} ${r.statusText}`, d = new Error(O);
+          const H = `HTTP Error: ${r.status} ${r.statusText}`, d = new Error(H);
           throw d.status = r.status, d.statusText = r.statusText, d.response = r, d;
         }
         let f;
@@ -50,19 +52,19 @@ const k = (b = {}) => {
         };
       } catch (o) {
         const r = o instanceof Error && o.name === "AbortError";
-        if (m < (n.retry || 0) && !r)
-          return await x(n.retryDelay || 1e3), E(m + 1);
+        if (h < (n.retry || 0) && !r)
+          return await x(n.retryDelay || 1e3), E(h + 1);
         throw o instanceof Error ? o.name === "AbortError" ? a.value = { message: "Request was cancelled" } : a.value = { message: o.message } : a.value = o, o;
       }
     };
     try {
       return await E();
     } finally {
-      h.value = !1, u.value = null;
+      p.value = !1, u.value = null;
     }
-  }, C = (e, s) => i("GET", e, void 0, s), $ = (e, s, t) => i("POST", e, s, t), R = (e, s, t) => i("PUT", e, s, t), U = (e, s, t) => i("PATCH", e, s, t), A = (e, s) => i("DELETE", e, void 0, s), W = (e) => {
+  }, C = (e, s) => i("GET", e, void 0, s), R = (e, s, t) => i("POST", e, s, t), $ = (e, s, t) => i("PUT", e, s, t), q = (e, s, t) => i("PATCH", e, s, t), A = (e, s) => i("DELETE", e, void 0, s), U = (e) => {
     u.value && u.value.abort(e);
-  }, q = () => {
+  }, W = () => {
     a.value = null;
   };
   return {
@@ -73,14 +75,14 @@ const k = (b = {}) => {
     // Methods
     request: i,
     get: C,
-    post: $,
-    put: R,
-    patch: U,
+    post: R,
+    put: $,
+    patch: q,
     delete: A,
-    cancel: W,
-    clearError: q
+    cancel: U,
+    clearError: W
   };
 };
 export {
-  k as useHttp
+  X as useHttp
 };

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

@@ -23,14 +23,14 @@ import { PricePlacementControl as E } from "./pricePlacement.js";
 import { PRICE_PLACEMENT_CONTROL_ID as _t } from "./pricePlacement.js";
 import { ProductCountControl as k } from "./productCount.js";
 import { PRODUCT_COUNT_CONTROL_ID as Rt } from "./productCount.js";
-import { ProductLayoutControl as D } from "./productLayout.js";
+import { ProductLayoutControl as F } from "./productLayout.js";
 import { PRODUCT_LAYOUT_CONTROL_ID as Tt } from "./productLayout.js";
-import { ShuffleControl as F } from "./shuffle.js";
+import { ShuffleControl as D } from "./shuffle.js";
 import { SHUFFLE_CONTROL_ID as St } from "./shuffle.js";
 import { StrategyControl as w } from "./strategy.js";
 import { STRATEGY_CONTROL_ID as Lt } from "./strategy.js";
 import { setCurrencyAttributes as A, getBlockElement as v, isPartnerManagedBlock as x, updateProductContentInPlace as B, regenerateProductRowsWithStyles as U } from "./utils.js";
-import { adjustProductsToSize as kt, formatProductPrice as Dt, getCardComposition as Ft, getCurrentLayout as wt, getMainContainerTbody as At, regenerateMobileProductRows as vt, updatePricesInPlace as xt, updateSingleProductContent as Bt } from "./utils.js";
+import { adjustProductsToSize as kt, formatProductPrice as Ft, getCardComposition as Dt, getCurrentLayout as wt, getMainContainerTbody as At, regenerateMobileProductRows as vt, updatePricesInPlace as xt, updateSingleProductContent as Bt } from "./utils.js";
 import { useDebounceFn as f } from "../../../../../node_modules/@vueuse/shared/index.js";
 const $ = "ui-elements-recommendation-block";
 class at extends N {
@@ -39,8 +39,6 @@ class at extends N {
     n(this, "store", R());
     n(this, "storeUnsubscription", () => {
     });
-    // blockId -> fingerprint of the node config as it looked at the last sync.
-    n(this, "syncedConfigs", /* @__PURE__ */ new Map());
     // A config change waiting to reach the node config. Deferred so it can ride the
     // re-render's single apply() — one user action must cost one undo press.
     n(this, "pendingNodeConfigWrite", null);
@@ -120,7 +118,7 @@ class at extends N {
     return this.rrsEnabled = p().isFeatureEnabled("reusableRecommendationStrategy"), this._subControls.forEach((e) => {
       var o;
       return (o = e == null ? void 0 : e.onDestroy) == null ? void 0 : o.call(e);
-    }), this.algorithmControl = new T(), this.localeControl = new L(), this.currencyControl = new P(), this.productCountControl = new k(), this.productLayoutControl = new D(), this.filtersControl = new S(), this.shuffleControl = new F(), this.pricePlacementControl = new E(), this.layoutOrientationControl = new O(), this.strategyControl = this.rrsEnabled ? new w() : null, this._subControls.forEach((e) => {
+    }), this.algorithmControl = new T(), this.localeControl = new L(), this.currencyControl = new P(), this.productCountControl = new k(), this.productLayoutControl = new F(), this.filtersControl = new S(), this.shuffleControl = new D(), this.pricePlacementControl = new E(), this.layoutOrientationControl = new O(), this.strategyControl = this.rrsEnabled ? new w() : null, this._subControls.forEach((e) => {
       e && (e.api = this.api);
     }), `
             <div class="recommendation-controls-container">
@@ -200,11 +198,19 @@ class at extends N {
    * fingerprint diff on this hook is the only way to notice (SD-149105).
    * An unchanged fingerprint means the move came from us, so runtime store
    * edits are never clobbered (SD-141049).
+   *
+   * The fingerprint is kept on the block's own store state so deleting the
+   * block drops it with the state it describes. A control-owned memo outlived
+   * that state and made a re-dropped saved module keep the defaults its wiped
+   * state was rebuilt with (SD-150347).
    */
   _syncNodeConfigIfChanged(t) {
     this.pendingNodeConfigWrite && this.pendingNodeConfigWrite.blockId !== t && this._flushPendingNodeConfig();
-    const e = JSON.stringify(c.getConfig(this.currentNode)), o = this.syncedConfigs.get(t);
-    this.syncedConfigs.set(t, e), o !== e && (this.pendingNodeConfigWrite || this._syncNodeConfigToStore());
+    const e = this.store.blockStates[t];
+    if (!e)
+      return;
+    const o = JSON.stringify(c.getConfig(this.currentNode)), r = e.syncedConfigFingerprint;
+    e.syncedConfigFingerprint = o, r !== o && (this.pendingNodeConfigWrite || this._syncNodeConfigToStore());
   }
   _capturePendingNodeConfigWrite() {
     const t = this.store.currentRecommendationId;
@@ -430,16 +436,16 @@ export {
   Tt as PRODUCT_LAYOUT_CONTROL_ID,
   E as PricePlacementControl,
   k as ProductCountControl,
-  D as ProductLayoutControl,
+  F as ProductLayoutControl,
   at as RecommendationBlockControl,
   St as SHUFFLE_CONTROL_ID,
   Lt as STRATEGY_CONTROL_ID,
-  F as ShuffleControl,
+  D as ShuffleControl,
   w as StrategyControl,
   kt as adjustProductsToSize,
-  Dt as formatProductPrice,
+  Ft as formatProductPrice,
   v as getBlockElement,
-  Ft as getCardComposition,
+  Dt as getCardComposition,
   wt as getCurrentLayout,
   At as getMainContainerTbody,
   x as isPartnerManagedBlock,

package/dist/extensions/Blocks/Recommendation/store/recommendation.js

@@ -1,7 +1,7 @@
 import { getRecommendationFeedSourceMaps as b, getOperatorOptions as G, PriceAttributes as v } from "../../../../enums/extensions/recommendationBlock.js";
 import { useRecommendationApi as D } from "../../../../services/recommendationApi.js";
-import { useConfigStore as P } from "../../../../stores/config.js";
-import { defineStore as F } from "pinia";
+import { useConfigStore as F } from "../../../../stores/config.js";
+import { defineStore as P } from "pinia";
 import "../constants/selectors.js";
 import { DEFAULT_MOBILE_CARDS_IN_ROW as _, DEFAULT_CARDS_IN_ROW as U } from "../constants/layout.js";
 import { DEFAULT_NODE_CONFIG as N, EXCLUDED_ALGORITHM_IDS as L } from "../constants/defaultConfig.js";
@@ -12,7 +12,7 @@ import { sanitizeProductIds as A } from "../utils/productIds.js";
 import { isFilterValid as B } from "../validation/filterSchema.js";
 import { isConfigValid as M } from "../validation/requiredFields.js";
 const u = D();
-let f = null, h = null, g = null, S = null;
+let f = null, g = null, h = null, S = null;
 const p = /* @__PURE__ */ new Map();
 function w() {
   return {
@@ -56,7 +56,8 @@ function C() {
     removeStrategyModalStatus: !1,
     filterGroup: 1,
     isInitialized: !1,
-    filterSnapshot: null
+    filterSnapshot: null,
+    syncedConfigFingerprint: null
   };
 }
 const z = () => ({
@@ -71,7 +72,7 @@ const z = () => ({
   blockStates: {},
   currentRecommendationId: null,
   configVersion: 0
-}), Y = F("guidoRecommendationExtension", {
+}), Y = P("guidoRecommendationExtension", {
   state: () => z(),
   getters: {
     // ====================================================================
@@ -241,7 +242,7 @@ const z = () => ({
       const r = (o, c) => o === "." || o === "," || o === " " ? o : c, n = {
         name: e.currencyCode,
         value: e.currencyCode,
-        symbol: e.currencyCode,
+        symbol: e.currencySymbol,
         alignment: e.currencyAlignment === "before" ? "0" : "1",
         decimalCount: String(e.currencyDecimalCount),
         decimalSeparator: r(e.currencyDecimalSeparator, ","),
@@ -412,18 +413,18 @@ const z = () => ({
     },
     async fetchRecommendationFilters() {
       if (!Object.keys(this.filterList).length) {
-        if (h) {
-          await h;
+        if (g) {
+          await g;
           return;
         }
-        h = (async () => {
+        g = (async () => {
           const t = await u.fetchRecommendationFilters();
           this.filterList = t;
         })();
         try {
-          await h;
+          await g;
         } finally {
-          h = null;
+          g = null;
         }
       }
     },
@@ -505,21 +506,21 @@ const z = () => ({
     // ====================================================================
     async fetchRecommendationProducts() {
       if (!(this.currentRecommendationId === null || !this.blockStates[this.currentRecommendationId])) {
-        if (g) {
-          await g;
+        if (h) {
+          await h;
           return;
         }
-        g = this._doFetchProducts();
+        h = this._doFetchProducts();
         try {
-          await g;
+          await h;
         } finally {
-          g = null;
+          h = null;
         }
       }
     },
     async _doFetchProducts() {
       var d;
-      const t = this.currentRecommendationId, e = this.blockStates[t], { recommendationConfigs: r } = e, n = P();
+      const t = this.currentRecommendationId, e = this.blockStates[t], { recommendationConfigs: r } = e, n = F();
       if (r.strategyId && n.isFeatureEnabled("reusableRecommendationStrategy")) {
         await this._doFetchStrategyProducts(t);
         return;

package/dist/node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js

@@ -21,7 +21,7 @@ ${s.map((o) => `  - ${o}`).join(`
    * This validation runs only once per class type and results are cached.
    */
   validateImplementation(t, r) {
-    var y;
+    var P;
     const s = [], o = r.name, W = Object.getPrototypeOf(this);
     t.forEach((u) => {
       if (typeof this[u] != "function") {
@@ -29,7 +29,7 @@ ${s.map((o) => `  - ${o}`).join(`
         return;
       }
       W[u] === r.prototype[u] && s.push(`Method ${u}() must be implemented (currently using base class error-throwing implementation)`);
-    }), d.validatedClasses.add(r), s.length > 0 ? (d.validationErrors.set(r, s), console.error(`[${o} Validation] ${o} validation failed:`, s)) : typeof process < "u" && ((y = process.env) == null ? void 0 : y.NODE_ENV) === "development" && console.log(`[${o} Validation] ✅ ${o} validated successfully`);
+    }), d.validatedClasses.add(r), s.length > 0 ? (d.validationErrors.set(r, s), console.error(`[${o} Validation] ${o} validation failed:`, s)) : typeof process < "u" && ((P = process.env) == null ? void 0 : P.NODE_ENV) === "development" && console.log(`[${o} Validation] ✅ ${o} validated successfully`);
   }
   /**
    * Lifecycle method for cleaning up resources (e.g., removing DOM artifacts from document.body).
@@ -41,9 +41,9 @@ ${s.map((o) => `  - ${o}`).join(`
 };
 v.validatedClasses = /* @__PURE__ */ new Set();
 v.validationErrors = /* @__PURE__ */ new Map();
-var i = v, z = /* @__PURE__ */ ((e) => (e.BLOCK = "BLOCK", e.CONTAINER = "CONTAINER", e.STRUCTURE = "STRUCTURE", e.STRIPE = "STRIPE", e))(z || {}), P = class T extends i {
+var i = v, z = /* @__PURE__ */ ((e) => (e.BLOCK = "BLOCK", e.CONTAINER = "CONTAINER", e.STRUCTURE = "STRUCTURE", e.STRIPE = "STRIPE", e))(z || {}), y = class c extends i {
   constructor() {
-    super(T.REQUIRED_METHODS, T);
+    super(c.REQUIRED_METHODS, c);
   }
   /**
    * Determines if the block should be available for use in the editor.
@@ -221,10 +221,10 @@ var i = v, z = /* @__PURE__ */ ((e) => (e.BLOCK = "BLOCK", e.CONTAINER = "CONTAI
     throw new Error("Method getDescription() must be implemented by the subclass");
   }
 };
-P.REQUIRED_METHODS = ["getId", "getTemplate", "getIcon", "getName", "getDescription"];
-var qe = P, Z = class c extends i {
+y.REQUIRED_METHODS = ["getId", "getTemplate", "getIcon", "getName", "getDescription"];
+var qe = y, Z = class T extends i {
   constructor() {
-    super(c.REQUIRED_METHODS, c);
+    super(T.REQUIRED_METHODS, T);
   }
   /**
    * @deprecated - use {@link getPreviewInnerHtml} instead
@@ -339,12 +339,12 @@ var j = {
   height: "height"
 }, Je = {
   BLOCK_IMAGE: j
-}, U = "esd-block-button", w = "esd-block-text", K = "esd-block-image", J = "esd-structure", ee = "esd-block-video", te = "esd-block-social", re = "esd-block-banner", ae = "esd-block-timer", ne = "esd-block-menu", se = "esd-block-html", ie = "esd-block-spacer", le = "esd-container-frame", Ee = "esd-stripe", oe = "esd-amp-form", I = ((e) => (e.BUTTON = `.${U}`, e.TEXT = `.${w}`, e.IMAGE = `.${K}`, e.STRUCTURE = `.${J}`, e.VIDEO = `.${ee}`, e.SOCIAL = `.${te}`, e.BANNER = `.${re}`, e.TIMER = `.${ae}`, e.MENU = `.${ne}`, e.HTML = `.${se}`, e.SPACER = `.${ie}`, e.CONTAINER = `.${le}`, e.STRIPE = `.${Ee}`, e.FORM = `.${oe}`, e))(I || {}), de = /* @__PURE__ */ ((e) => (e.BLOCK_IMAGE = "BLOCK_IMAGE", e.BLOCK_TEXT = "BLOCK_TEXT", e.BLOCK_BUTTON = "BLOCK_BUTTON", e.BLOCK_SPACER = "BLOCK_SPACER", e.BLOCK_VIDEO = "BLOCK_VIDEO", e.BLOCK_SOCIAL = "BLOCK_SOCIAL", e.BLOCK_BANNER = "BLOCK_BANNER", e.BLOCK_TIMER = "BLOCK_TIMER", e.BLOCK_MENU = "BLOCK_MENU", e.BLOCK_MENU_ITEM = "BLOCK_MENU_ITEM", e.BLOCK_HTML = "BLOCK_HTML", e.BLOCK_AMP_CAROUSEL = "BLOCK_AMP_CAROUSEL", e.BLOCK_AMP_ACCORDION = "BLOCK_AMP_ACCORDION", e.BLOCK_AMP_FORM = "BLOCK_AMP_FORM", e.CONTAINER = "CONTAINER", e.FORM_CONTAINER = "FORM_CONTAINER", e.STRUCTURE = "STRUCTURE", e.STRIPE = "STRIPE", e.EMPTY_CONTAINER = "EMPTY_CONTAINER", e.CUSTOM_BLOCK_LINK = "CUSTOM_BLOCK_LINK", e.CUSTOM_BLOCK_IMAGE = "CUSTOM_BLOCK_IMAGE", e.CUSTOM_BLOCK_TEXT = "CUSTOM_BLOCK_TEXT", e))(de || {}), F = /* @__PURE__ */ ((e) => (e.ANCHOR_LINK_CONTAINER = "anchorLinkFormContainer", e.APPLY_CONDITION = "applyCondition", e.APPLY_CONDITION_SWITCHER = "applyConditionSwitcher", e.BACKGROUND_COLOR = "backgroundColor", e.BACKGROUND_IMAGE = "generalImageContainer", e.TEXT_COLOR = "textColor", e.TEXT_STYLE = "textStyle", e.TEXT_SIZE = "textSize", e.TEXT_LINE_SPACING = "textLineSpacing", e.TEXT_ALIGN = "textAlign", e.FIXED_HEIGHT_SWITCHER = "fixedHeightSwitcherForm", e.HIDDEN_NODE = "hiddenNode", e.SMART_BLOCK = "smartBlock", e.SYNCHRONIZED_MODULE = "synchronizedModuleForm", e.FONT_FAMILY = "generalFontFamilyForm", e.BLOCK_INTERNAL_INDENTS = "generalBlockInternalIndents", e.STRUCTURE_INTERNAL_INDENTS = "generalStructureInternalIndents", e))(F || {}), H = /* @__PURE__ */ ((e) => (e.ADJUST_TO_WIDTH = "adjustToWidth", e.ALIGNMENT = "buttonAlignment", e.BORDER = "buttonBorder", e.BORDER_RADIUS = "buttonBorderRadius", e.COLOR = "buttonColor", e.BUTTON_BLOCK_BACKGROUND_COLOR = "buttonBlockBackgroundColor", e.EXTERNAL_INDENTS = "buttonExternalIndents", e.FIXED_HEIGHT = "buttonFixedHeightForm", e.FONT_COLOR = "buttonFontColor", e.FONT_FAMILY = "buttonFontFamily", e.FONT_SIZE = "buttonFontSize", e.FONT_WEIGHT = "buttonFontWeight", e.ICON = "buttonIconContainer", e.ICON_ALIGN = "buttonIconAlign", e.ICON_INDENT = "buttonIconIndent", e.ICON_WIDTH = "buttonIconWidth", e.IMAGE = "buttonImageForm", e.INTERNAL_INDENTS = "buttonInternalIndents", e.LINK = "buttonLink", e.MIME_TYPE = "buttonMimeTypeForm", e.SWITCHER_HOVERED_STYLES = "buttonSwitcherHoveredStylesForm", e.TEXT = "buttonText", e.TEXT_STYLE_AND_COLOR = "buttonTextStyleAndColorForm", e.HOVERED_BORDER_COLOR = "hoveredStyleBorderButtonForm", e.HOVERED_COLOR = "hoveredButtonColorForm", e.HOVERED_TEXT_COLOR = "hoveredButtonTextColorForm", e))(H || {}), k = /* @__PURE__ */ ((e) => (e.HIDDEN_NODE = "hiddenNodeText", e.PARAGRAPH_STYLE = "paragraphStyleForm", e.ALIGN = "textAlignmentForm", e.ANCHOR_CONTAINER = "textAnchorForm", e.FONT_BACKGROUND_COLOR = "textBlockFontBackgroundColor", e.TEXT_BLOCK_BACKGROUND_COLOR = "textBlockBackgroundColor", e.FONT_COLOR = "textBlockFontColor", e.TEXT_BLOCK_FONT_FAMILY = "textBlockFontFamily", e.FONT_FAMILY = "textFontFamily", e.FONT_SIZE = "textBlockFontSize", e.FONT_WEIGHT = "textBlockFontWeight", e.DIRECTION = "textBlockDirectionForm", e.INSERT_FORM = "textBlockInsertForm", e.LINK_DATA = "textBlockLinkDataForm", e.FORMAT = "textBlockTextFormatForm", e.FIXED_HEIGHT = "textFixedHeightForm", e.INTERNAL_INDENTS = "textInternalIndents", e.LINE_HEIGHT = "textLineHeightForm", e.MIME_TYPE = "textMimeTypeForm", e.NO_LINE_WRAPS = "textNoLineWrapsForm", e))(k || {}), p = /* @__PURE__ */ ((e) => (e.ALT_TEXT = "altText", e.LINK = "blockLink", e.ALIGNMENT = "imageAlignment", e.ANCHOR_LINK_CONTAINER = "imageAnchorLinkContainerForm", e.BORDER_RADIUS = "imageBorderRadiusForm", e.IMAGE = "imageImageForm", e.EXTERNAL_INDENTS = "imageExternalIndents", e.MIME_TYPE = "imageMimeTypeForm", e.RESPONSIVE = "imageResponsive", e.ROLLOVER_IMAGE = "imageRolloverImageForm", e.ROLLOVER_SWITCHER = "imageRolloverSwitcherForm", e.SIZE = "imageSizeContainer", e))(p || {}), ue = /* @__PURE__ */ ((e) => (e.BACKGROUND_COLOR = "containerBackgroundColorForm", e.BORDER_FORM = "containerBorderForm", e.BORDER_RADIUS = "containerBorderRadiusForm", e.EXTERNAL_INDENTS = "containerExternalIndentsForm", e.IMAGE_CONTAINER = "containerImageContainerForm", e.MIME_TYPE = "containerMimeTypeForm", e.DISPLAY_CONDITIONS = "displayConditions", e.HIDDEN_NODE = "containerHiddenNodeForm", e))(ue || {}), n = {
+}, U = "esd-block-button", w = "esd-block-text", K = "esd-block-image", J = "esd-structure", ee = "esd-block-video", te = "esd-block-social", re = "esd-block-banner", ae = "esd-block-timer", ne = "esd-block-menu", se = "esd-block-html", ie = "esd-block-spacer", le = "esd-container-frame", Ee = "esd-stripe", oe = "esd-amp-form", I = ((e) => (e.BUTTON = `.${U}`, e.TEXT = `.${w}`, e.IMAGE = `.${K}`, e.STRUCTURE = `.${J}`, e.VIDEO = `.${ee}`, e.SOCIAL = `.${te}`, e.BANNER = `.${re}`, e.TIMER = `.${ae}`, e.MENU = `.${ne}`, e.HTML = `.${se}`, e.SPACER = `.${ie}`, e.CONTAINER = `.${le}`, e.STRIPE = `.${Ee}`, e.FORM = `.${oe}`, e))(I || {}), de = /* @__PURE__ */ ((e) => (e.BLOCK_IMAGE = "BLOCK_IMAGE", e.BLOCK_TEXT = "BLOCK_TEXT", e.BLOCK_BUTTON = "BLOCK_BUTTON", e.BLOCK_SPACER = "BLOCK_SPACER", e.BLOCK_VIDEO = "BLOCK_VIDEO", e.BLOCK_SOCIAL = "BLOCK_SOCIAL", e.BLOCK_BANNER = "BLOCK_BANNER", e.BLOCK_TIMER = "BLOCK_TIMER", e.BLOCK_MENU = "BLOCK_MENU", e.BLOCK_MENU_ITEM = "BLOCK_MENU_ITEM", e.BLOCK_HTML = "BLOCK_HTML", e.BLOCK_AMP_CAROUSEL = "BLOCK_AMP_CAROUSEL", e.BLOCK_AMP_ACCORDION = "BLOCK_AMP_ACCORDION", e.BLOCK_AMP_FORM = "BLOCK_AMP_FORM", e.CONTAINER = "CONTAINER", e.FORM_CONTAINER = "FORM_CONTAINER", e.STRUCTURE = "STRUCTURE", e.STRIPE = "STRIPE", e.EMPTY_CONTAINER = "EMPTY_CONTAINER", e.CUSTOM_BLOCK_LINK = "CUSTOM_BLOCK_LINK", e.CUSTOM_BLOCK_IMAGE = "CUSTOM_BLOCK_IMAGE", e.CUSTOM_BLOCK_TEXT = "CUSTOM_BLOCK_TEXT", e))(de || {}), F = /* @__PURE__ */ ((e) => (e.ANCHOR_LINK_CONTAINER = "anchorLinkFormContainer", e.APPLY_CONDITION = "applyCondition", e.APPLY_CONDITION_SWITCHER = "applyConditionSwitcher", e.BACKGROUND_COLOR = "backgroundColor", e.BACKGROUND_IMAGE = "generalImageContainer", e.TEXT_COLOR = "textColor", e.TEXT_STYLE = "textStyle", e.TEXT_SIZE = "textSize", e.TEXT_LINE_SPACING = "textLineSpacing", e.TEXT_ALIGN = "textAlign", e.FIXED_HEIGHT_SWITCHER = "fixedHeightSwitcherForm", e.HIDDEN_NODE = "hiddenNode", e.SMART_BLOCK = "smartBlock", e.SYNCHRONIZED_MODULE = "synchronizedModuleForm", e.FONT_FAMILY = "generalFontFamilyForm", e.BLOCK_INTERNAL_INDENTS = "generalBlockInternalIndents", e.STRUCTURE_INTERNAL_INDENTS = "generalStructureInternalIndents", e))(F || {}), H = /* @__PURE__ */ ((e) => (e.ADJUST_TO_WIDTH = "adjustToWidth", e.ALIGNMENT = "buttonAlignment", e.BORDER = "buttonBorder", e.BORDER_RADIUS = "buttonBorderRadius", e.COLOR = "buttonColor", e.BUTTON_BLOCK_BACKGROUND_COLOR = "buttonBlockBackgroundColor", e.EXTERNAL_INDENTS = "buttonExternalIndents", e.FIXED_HEIGHT = "buttonFixedHeightForm", e.FONT_COLOR = "buttonFontColor", e.FONT_FAMILY = "buttonFontFamily", e.FONT_SIZE = "buttonFontSize", e.FONT_WEIGHT = "buttonFontWeight", e.ICON = "buttonIconContainer", e.ICON_ALIGN = "buttonIconAlign", e.ICON_INDENT = "buttonIconIndent", e.ICON_WIDTH = "buttonIconWidth", e.IMAGE = "buttonImageForm", e.INTERNAL_INDENTS = "buttonInternalIndents", e.LINK = "buttonLink", e.MIME_TYPE = "buttonMimeTypeForm", e.SWITCHER_HOVERED_STYLES = "buttonSwitcherHoveredStylesForm", e.TEXT = "buttonText", e.TEXT_STYLE_AND_COLOR = "buttonTextStyleAndColorForm", e.HOVERED_BORDER_COLOR = "hoveredStyleBorderButtonForm", e.HOVERED_COLOR = "hoveredButtonColorForm", e.HOVERED_TEXT_COLOR = "hoveredButtonTextColorForm", e))(H || {}), k = /* @__PURE__ */ ((e) => (e.HIDDEN_NODE = "hiddenNodeText", e.PARAGRAPH_STYLE = "paragraphStyleForm", e.ALIGN = "textAlignmentForm", e.ANCHOR_CONTAINER = "textAnchorForm", e.FONT_BACKGROUND_COLOR = "textBlockFontBackgroundColor", e.TEXT_BLOCK_BACKGROUND_COLOR = "textBlockBackgroundColor", e.FONT_COLOR = "textBlockFontColor", e.TEXT_BLOCK_FONT_FAMILY = "textBlockFontFamily", e.FONT_FAMILY = "textFontFamily", e.FONT_SIZE = "textBlockFontSize", e.FONT_WEIGHT = "textBlockFontWeight", e.DIRECTION = "textBlockDirectionForm", e.INSERT_FORM = "textBlockInsertForm", e.LETTER_SPACING = "textBlockLetterSpacing", e.LINK_DATA = "textBlockLinkDataForm", e.FORMAT = "textBlockTextFormatForm", e.FIXED_HEIGHT = "textFixedHeightForm", e.INTERNAL_INDENTS = "textInternalIndents", e.LINE_HEIGHT = "textLineHeightForm", e.MIME_TYPE = "textMimeTypeForm", e.NO_LINE_WRAPS = "textNoLineWrapsForm", e))(k || {}), X = /* @__PURE__ */ ((e) => (e.ALT_TEXT = "altText", e.LINK = "blockLink", e.ALIGNMENT = "imageAlignment", e.ANCHOR_LINK_CONTAINER = "imageAnchorLinkContainerForm", e.BORDER_RADIUS = "imageBorderRadiusForm", e.IMAGE = "imageImageForm", e.EXTERNAL_INDENTS = "imageExternalIndents", e.MIME_TYPE = "imageMimeTypeForm", e.RESPONSIVE = "imageResponsive", e.ROLLOVER_IMAGE = "imageRolloverImageForm", e.ROLLOVER_SWITCHER = "imageRolloverSwitcherForm", e.SIZE = "imageSizeContainer", e))(X || {}), ue = /* @__PURE__ */ ((e) => (e.BACKGROUND_COLOR = "containerBackgroundColorForm", e.BORDER_FORM = "containerBorderForm", e.BORDER_RADIUS = "containerBorderRadiusForm", e.EXTERNAL_INDENTS = "containerExternalIndentsForm", e.IMAGE_CONTAINER = "containerImageContainerForm", e.MIME_TYPE = "containerMimeTypeForm", e.DISPLAY_CONDITIONS = "displayConditions", e.HIDDEN_NODE = "containerHiddenNodeForm", e))(ue || {}), n = {
   BLOCK_BUTTON: H,
   BLOCK_TEXT: k,
-  BLOCK_IMAGE: p,
+  BLOCK_IMAGE: X,
   GENERAL: F
-}, Ie = /* @__PURE__ */ ((e) => (e.SAVE_AS_MODULE = "saveAsModule", e.IMPROVE_WITH_AI = "improveWithAI", e.MOVE = "move", e.COPY = "copy", e.REMOVE = "remove", e.CLEAR_CONTAINER = "clearContainer", e.EXTERNAL_DISPLAY_CONDITION = "externalDisplayCondition", e))(Ie || {}), Te = /* @__PURE__ */ ((e) => (e.previewDeviceMode = "previewDeviceMode", e.panelPosition = "panelPosition", e.themeMode = "themeMode", e))(Te || {}), ce = /* @__PURE__ */ ((e) => (e.DESKTOP = "DESKTOP", e.MOBILE = "MOBILE", e))(ce || {}), be = /* @__PURE__ */ ((e) => (e.SETTINGS = "settings", e.STYLES = "styles", e.DATA = "data", e))(be || {}), a = {
+}, Ie = /* @__PURE__ */ ((e) => (e.SAVE_AS_MODULE = "saveAsModule", e.IMPROVE_WITH_AI = "improveWithAI", e.MOVE = "move", e.COPY = "copy", e.REMOVE = "remove", e.CLEAR_CONTAINER = "clearContainer", e.EXTERNAL_DISPLAY_CONDITION = "externalDisplayCondition", e))(Ie || {}), ce = /* @__PURE__ */ ((e) => (e.previewDeviceMode = "previewDeviceMode", e.panelPosition = "panelPosition", e.themeMode = "themeMode", e))(ce || {}), Te = /* @__PURE__ */ ((e) => (e.DESKTOP = "DESKTOP", e.MOBILE = "MOBILE", e))(Te || {}), be = /* @__PURE__ */ ((e) => (e.SETTINGS = "settings", e.STYLES = "styles", e.DATA = "data", e))(be || {}), a = {
   name: "name",
   disabled: "disabled"
 }, he = {
@@ -369,18 +369,19 @@ var j = {
   hint: "hint"
 }, Le = {
   ...a,
-  type: "type"
+  type: "type",
+  icon: "icon"
 }, _e = {
   ...a,
   buttons: "buttons"
-}, X = {
+}, p = {
   ...a,
   searchable: "searchable",
   multiSelect: "multi-select",
   placeholder: "placeholder",
   items: "items"
 }, Ce = {
-  ...X,
+  ...p,
   addCustomFontOption: "add-custom-font-option"
 }, Ae = {
   ...a,
@@ -422,10 +423,10 @@ var j = {
 }, xe = {
   ...a,
   controlId: "control-id"
-}, ye = {
+}, Pe = {
   ...a,
   expanded: "expanded"
-}, Pe = {
+}, ye = {
   ...a,
   icon: "icon",
   position: "position"
@@ -455,7 +456,7 @@ var j = {
   LABEL: Re,
   MESSAGE: Le,
   RADIO_BUTTONS: _e,
-  SELECTPICKER: X,
+  SELECTPICKER: p,
   FONT_FAMILY_SELECT: Ce,
   SWITCHER: a,
   TEXT: Me,
@@ -465,15 +466,15 @@ var j = {
   SELECT_ITEM: Ae,
   RADIO_ITEM: Se,
   NESTED_CONTROL: xe,
-  EXPANDABLE: ye,
-  ORDERABLE: Pe,
+  EXPANDABLE: Pe,
+  ORDERABLE: ye,
   ORDERABLE_ITEM: Ue,
   ORDERABLE_ICON: we,
   REPEATABLE: Ke,
   DRAGGABLE_BLOCK: Fe,
   AMP_FORM_SERVICE_PICKER: He,
   MULTIPLE_SELECT: ke
-}, pe = /* @__PURE__ */ ((e) => (e.BUTTON = "UE-BUTTON", e.CHECKBOX = "UE-CHECKBOX", e.CHECK_BUTTONS = "UE-CHECK-BUTTONS", e.COLOR = "UE-COLOR", e.COUNTER = "UE-COUNTER", e.DATEPICKER = "UE-DATEPICKER", e.LABEL = "UE-LABEL", e.MESSAGE = "UE-MESSAGE", e.RADIO_BUTTONS = "UE-RADIO-BUTTONS", e.SELECTPICKER = "UE-SELECT", e.SWITCHER = "UE-SWITCHER", e.TEXT = "UE-TEXT", e.TEXTAREA = "UE-TEXTAREA", e.CHECK_ITEM = "UE-CHECK-ITEM", e.RADIO_ITEM = "UE-RADIO-ITEM", e.SELECT_ITEM = "UE-SELECT-ITEM", e.ICON = "UE-ICON", e.MERGETAGS = "UE-MERGETAGS", e.FONT_FAMILY_SELECT = "UE-FONT-FAMILY-SELECT", e.NESTED_CONTROL = "UE-NESTED-CONTROL", e.EXPANDABLE = "UE-EXPANDABLE", e.EXPANDABLE_HEADER = "UE-EXPANDABLE_HEADER", e.EXPANDABLE_CONTENT = "UE-EXPANDABLE_CONTENT", e.ORDERABLE = "UE-ORDERABLE", e.ORDERABLE_ITEM = "UE-ORDERABLE-ITEM", e.ORDERABLE_ICON = "UE-ORDERABLE-ICON", e.REPEATABLE = "UE-REPEATABLE", e.DRAGGABLE_BLOCK = "UE-DRAGGABLE-BLOCK", e.AMP_FORM_SERVICE_PICKER = "UE-AMP-FORM-SERVICE-PICKER", e.MULTIPLE_SELECT = "UE-MULTIPLE_SELECT", e.SCROLLABLE = "UE-SCROLLABLE-CONTAINER", e))(pe || {}), x = class {
+}, Xe = /* @__PURE__ */ ((e) => (e.BUTTON = "UE-BUTTON", e.CHECKBOX = "UE-CHECKBOX", e.CHECK_BUTTONS = "UE-CHECK-BUTTONS", e.COLOR = "UE-COLOR", e.COUNTER = "UE-COUNTER", e.DATEPICKER = "UE-DATEPICKER", e.LABEL = "UE-LABEL", e.MESSAGE = "UE-MESSAGE", e.RADIO_BUTTONS = "UE-RADIO-BUTTONS", e.SELECTPICKER = "UE-SELECT", e.SWITCHER = "UE-SWITCHER", e.TEXT = "UE-TEXT", e.RICH_TEXT = "UE-RICH-TEXT", e.TEXTAREA = "UE-TEXTAREA", e.CHECK_ITEM = "UE-CHECK-ITEM", e.RADIO_ITEM = "UE-RADIO-ITEM", e.SELECT_ITEM = "UE-SELECT-ITEM", e.ICON = "UE-ICON", e.MERGETAGS = "UE-MERGETAGS", e.FONT_FAMILY_SELECT = "UE-FONT-FAMILY-SELECT", e.NESTED_CONTROL = "UE-NESTED-CONTROL", e.EXPANDABLE = "UE-EXPANDABLE", e.EXPANDABLE_HEADER = "UE-EXPANDABLE_HEADER", e.EXPANDABLE_CONTENT = "UE-EXPANDABLE_CONTENT", e.ORDERABLE = "UE-ORDERABLE", e.ORDERABLE_ITEM = "UE-ORDERABLE-ITEM", e.ORDERABLE_ICON = "UE-ORDERABLE-ICON", e.REPEATABLE = "UE-REPEATABLE", e.DRAGGABLE_BLOCK = "UE-DRAGGABLE-BLOCK", e.AMP_FORM_SERVICE_PICKER = "UE-AMP-FORM-SERVICE-PICKER", e.MULTIPLE_SELECT = "UE-MULTIPLE_SELECT", e.SCROLLABLE = "UE-SCROLLABLE-CONTAINER", e.POPUP_PANEL = "UE-POPUP-PANEL", e))(Xe || {}), x = class {
   /**
    * @description returns map of nodes parent control operates on
    */
@@ -619,7 +620,7 @@ var j = {
   }
 };
 G.REQUIRED_METHODS = ["getId", "getTemplate"];
-var Tt = G, Xe = class m extends i {
+var ct = G, pe = class m extends i {
   constructor() {
     super(m.REQUIRED_METHODS, m);
   }
@@ -688,13 +689,13 @@ var Tt = G, Xe = class m extends i {
   onDestroy() {
   }
 };
-Xe.REQUIRED_METHODS = ["getId", "getIcon", "getName", "getTemplate", "getTabIndex"];
+pe.REQUIRED_METHODS = ["getId", "getIcon", "getName", "getTemplate", "getTabIndex"];
 var V = class extends x {
   getTargetNodes(e) {
     const t = e.querySelectorAll(I.IMAGE), r = e.asElement().hasClass(K) ? [e] : [];
     return t.length ? t : r;
   }
-}, ct = class extends V {
+}, Tt = class extends V {
   getParentControlId() {
     return n.BLOCK_IMAGE.EXTERNAL_INDENTS;
   }
@@ -1215,17 +1216,17 @@ export {
   It as ButtonTextStyleAndFontColorBuiltInControl,
   ue as ContainerControls,
   Ie as ContextActionType,
-  Tt as Control,
-  Te as EditorStatePropertyType,
+  ct as Control,
+  ce as EditorStatePropertyType,
   Ve as Extension,
   Nt as ExtensionBuilder,
   F as GeneralControls,
   Dt as IconsRegistry,
-  p as ImageControls,
-  ct as ImageMarginsBuiltInControl,
+  X as ImageControls,
+  Tt as ImageMarginsBuiltInControl,
   bt as ImageSizeBuiltInControl,
   St as ModificationDescription,
-  ce as PreviewDeviceMode,
+  Te as PreviewDeviceMode,
   ht as SettingsPanelRegistry,
   mt as SettingsPanelTab,
   be as SettingsTab,
@@ -1240,5 +1241,5 @@ export {
   et as UEAttr,
   Mt as UIElement,
   Bt as UIElementTagRegistry,
-  pe as UIElementType
+  Xe as UIElementType
 };

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const o = { stripo: { version: "2.73.0" } }, s = {
+const o = { stripo: { version: "2.76.0" } }, s = {
   guido: o
 };
 export {

package/dist/services/templateLibraryApi.js

@@ -4,13 +4,14 @@ import { useToaster as C } from "../composables/useToaster.js";
 import { useTranslations as h } from "../composables/useTranslations.js";
 import { useLiquidValidator as S } from "../composables/validators/useLiquidValidator.js";
 import { EditorType as v } from "../enums/defaults.js";
-import { ToasterTypeOptions as N } from "../enums/toaster.js";
-import { useRecommendationExtensionStore as x } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { useSaveAsTemplateStore as E } from "../stores/save-as-template.js";
+import { ToasterTypeOptions as x } from "../enums/toaster.js";
+import { useRecommendationExtensionStore as E } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { useSaveAsTemplateStore as N } from "../stores/save-as-template.js";
 import { base64EncodeWithSpecialChars as r } from "../utils/base64.js";
+import { isPlainObject as P } from "../utils/genericUtil.js";
 import { useTemplatePreparation as A } from "../utils/templatePreparation.js";
-const j = () => {
-  const { get: n, post: m } = b(), { handleError: o, showToaster: l } = C(), { config: c, isFeatureEnabled: p } = w(), { validateLiquidSyntax: g } = S(), u = h();
+const B = () => {
+  const { get: n, post: m } = b(), { handleError: o, showToaster: l } = C(), { config: c, isFeatureEnabled: p } = w(), { validateLiquidSyntax: f } = S(), u = h();
   return {
     getCategories: async () => {
       try {
@@ -40,10 +41,10 @@ const j = () => {
     createTemplate: async () => {
       var e, t, d, y;
       try {
-        const { prepareTemplateDetails: i } = A(), s = E(), a = await i();
-        if (p("liquidSyntax") && !await g(a.compiledHtml))
+        const { prepareTemplateDetails: i } = A(), s = N(), a = await i();
+        if (p("liquidSyntax") && !await f(a.compiledHtml))
           return !1;
-        const f = {
+        const T = {
           name: s.getTemplateName,
           categories: s.getSelectedCategoryIds,
           productId: ((t = (e = c.value) == null ? void 0 : e.partner) == null ? void 0 : t.productType) || 0,
@@ -54,7 +55,7 @@ const j = () => {
           unsubscriptionPreferencePageStatus: !1,
           unsubscriptionPreferencePages: [],
           recommendationCampaignUrls: r(
-            x().recommendationCampaignUrls
+            E().recommendationCampaignUrls
           ),
           recommendationConfigs: r({}),
           isGuido: !0,
@@ -66,16 +67,18 @@ const j = () => {
             css: a.css,
             dynamicContentList: a.dynamicContentList
           })
-        }, { data: { type: T } } = await m(
+        }, { data: g } = await m(
           "/newsletter/template-library/create-template",
-          f
+          T
         );
-        return T === "alert" ? (l({
+        if (!P(g))
+          throw new Error("Unexpected create-template response");
+        return g.type === "alert" ? (l({
           message: u(
             "newsletter.template-library-save-alert",
             { templateName: s.getTemplateName }
           ),
-          type: N.Error
+          type: x.Error
         }), !1) : (l({
           message: u(
             "newsletter.template-library-save-success",
@@ -90,5 +93,5 @@ const j = () => {
   };
 };
 export {
-  j as useTemplateLibraryApi
+  B as useTemplateLibraryApi
 };

package/dist/src/extensions/Blocks/Recommendation/controls/main/index.d.ts

@@ -20,7 +20,6 @@ export * from './utils';
 export declare class RecommendationBlockControl extends CommonControl {
     private store;
     private storeUnsubscription;
-    private syncedConfigs;
     private pendingNodeConfigWrite;
     private pendingConfigFlushTimer;
     private algorithmControl;
@@ -64,6 +63,11 @@ export declare class RecommendationBlockControl extends CommonControl {
      * fingerprint diff on this hook is the only way to notice (SD-149105).
      * An unchanged fingerprint means the move came from us, so runtime store
      * edits are never clobbered (SD-141049).
+     *
+     * The fingerprint is kept on the block's own store state so deleting the
+     * block drops it with the state it describes. A control-owned memo outlived
+     * that state and made a re-dropped saved module keep the defaults its wiped
+     * state was rebuilt with (SD-150347).
      */
     private _syncNodeConfigIfChanged;
     private _capturePendingNodeConfigWrite;

package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts

@@ -41,6 +41,16 @@ interface PerBlockState {
     isInitialized: boolean;
     /** Snapshot of filters taken when the drawer opens, used to revert on cancel */
     filterSnapshot: Filter[] | null;
+    /**
+     * Fingerprint of the node config as this block's state last adopted it.
+     *
+     * Lives here, not on the control, because it is a claim ABOUT this state —
+     * "the store already holds that node config". Held on the control it
+     * outlived the state it described: `removeBlockState` tore the state down
+     * while the fingerprint survived, so re-dropping a saved module under the
+     * same id skipped the re-sync and kept the defaults (SD-150347).
+     */
+    syncedConfigFingerprint: string | null;
 }
 /**
  * Persisted-config subset used by `seedBlockUrlConfig` to reconstruct
@@ -57,6 +67,8 @@ export interface PerBlockUrlConfig {
     filters: Filter[];
     shuffleProducts: boolean;
     currencyCode: string;
+    /** The displayed symbol, which is not the code — a TRY block shows `₺`. */
+    currencySymbol: string;
     currencyAlignment: 'before' | 'after';
     currencyDecimalCount: number;
     currencyDecimalSeparator: string;

package/dist/src/utils/genericUtil.d.ts

@@ -30,3 +30,9 @@ export declare const replaceString: (string?: string, values?: Record<string, st
  * a string nor a number becomes ''.
  */
 export declare const asText: (value: unknown) => string;
+/**
+ * Narrows an unknown API value to a plain JSON object. Arrays and exotic
+ * objects (Blob, Date, FormData) are rejected, so a response body that useHttp
+ * parsed as text or blob can never be read as a JSON payload.
+ */
+export declare const isPlainObject: <T>(value: T) => value is T & Record<string, unknown>;

package/dist/src/utils/liquidDynamicContent.d.ts

@@ -0,0 +1,20 @@
+import type { BaseDynamicContent } from '@@/Types/generic';
+export type DynamicContentFormat = NonNullable<BaseDynamicContent['format']>;
+/** Format key the dynamic-content picker sends for a custom date/time format. */
+export declare const TIME_FORMAT_KEY = "time-format";
+/** Wraps a Liquid filter argument in whichever quote style the value itself does not use. */
+export declare const quoteArgument: (value: string) => string | null;
+/**
+ * `{ key: 'time-format', value: '%Y-%m-%d' }` -> `date: "%Y-%m-%d"`.
+ *
+ * Only a custom date/time strftime pattern has a Liquid equivalent. Anything else returns null so
+ * the caller emits a plain tag rather than one that silently lost — or literally printed — its
+ * format.
+ * @example formatToLiquidFilter({ key: 'time-format', value: '%b %-d, %Y' }) -> date: "%b %-d, %Y"
+ */
+export declare const formatToLiquidFilter: (format: DynamicContentFormat) => string | null;
+/**
+ * Inverse of `formatToLiquidFilter` — reads the picker format back out of one filter segment, so a
+ * reopened tag restores its selection in the host's format dropdown.
+ */
+export declare const liquidFilterToFormat: (segment: string) => DynamicContentFormat | null;

package/dist/utils/genericUtil.js

@@ -1,69 +1,78 @@
-const o = (t) => {
-  const a = t.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((l) => l.trim()), [s] = a, r = {
+import { formatToLiquidFilter as b, quoteArgument as y, liquidFilterToFormat as h } from "./liquidDynamicContent.js";
+const g = (t) => {
+  if (!t.includes("="))
+    return null;
+  const [r, e] = t.split("=");
+  return { key: r.trim(), value: e.trim() };
+}, c = "default:", f = (t) => {
+  if (!t.startsWith(c))
+    return t;
+  const r = t.slice(c.length).trim(), e = (l) => r.length >= 2 && r.startsWith(l) && r.endsWith(l);
+  return e('"') || e("'") ? r.slice(1, -1) : r;
+}, k = (t) => {
+  const e = t.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((a) => a.trim()), [l] = e, s = {
     text: t.label,
-    value: s || ""
+    value: l || ""
   };
-  if (a.length >= 2) {
-    const [, l, e] = a;
-    if (l.startsWith("default:")) {
-      let n = l.slice(8).trim();
-      n.startsWith('"') && n.endsWith('"') && (n = n.slice(1, -1)), r.fallback = n;
-    } else {
-      const n = l.includes("=") ? { key: l.split("=")[0].trim(), value: l.split("=")[1].trim() } : null;
-      n ? r.format = n : e || (r.fallback = l), e && (r.fallback = e);
+  if (e.length >= 2) {
+    const [, a, n] = e;
+    if (a.startsWith(c))
+      s.fallback = f(a);
+    else {
+      const o = h(a) ?? g(a);
+      o ? s.format = o : n || (s.fallback = a), n && (s.fallback = f(n));
     }
   }
-  return r;
-}, f = (t, c = !1) => t.map((a) => {
-  if (a.format)
-    return {
-      label: `${a.text} | ${a.format.key}=${a.format.value}`,
-      value: `{{${a.value}|${a.format.key}=${a.format.value}}}`
-    };
-  if (c) {
-    if (!a.fallback)
-      return {
-        label: a.text,
-        value: `{{ ${a.value} }}`
-      };
-    const r = !Number.isNaN(Number(a.fallback)) && a.fallback.trim() !== "" ? a.fallback : `"${a.fallback}"`;
-    return {
-      label: `${a.text} | ${a.fallback}`,
-      value: `{{ ${a.value} | default: ${r} }}`
-    };
-  }
+  return s;
+}, p = (t) => {
+  const e = !Number.isNaN(Number(t)) && t.trim() !== "" ? t : y(t);
+  return e === null ? null : `${c} ${e}`;
+}, v = (t) => {
+  const r = t.format ? b(t.format) : null, e = t.fallback ? p(t.fallback) : null, l = [t.value, r, e].filter(Boolean);
   return {
-    label: a.fallback ? `${a.text} | ${a.fallback}` : a.text,
-    value: a.fallback ? `{{${a.value}|${a.fallback}}}` : `{{${a.value}}}`
+    label: [t.text, r, e && t.fallback].filter(Boolean).join(" | "),
+    value: `{{ ${l.join(" | ")} }}`
   };
-}), b = (t) => {
-  const c = [], a = /* @__PURE__ */ new Set(), s = (l) => {
-    Array.isArray(l) && l.forEach((e) => {
-      const n = [...e.children ?? [], ...e.select_items ?? []];
-      if (n.length > 0) {
-        s(n);
+}, i = (t, r = !1) => t.map((e) => r ? v(e) : e.format ? {
+  label: `${e.text} | ${e.format.key}=${e.format.value}`,
+  value: `{{${e.value}|${e.format.key}=${e.format.value}}}`
+} : {
+  label: e.fallback ? `${e.text} | ${e.fallback}` : e.text,
+  value: e.fallback ? `{{${e.value}|${e.fallback}}}` : `{{${e.value}}}`
+}), $ = (t) => {
+  const r = [], e = /* @__PURE__ */ new Set(), l = (a) => {
+    Array.isArray(a) && a.forEach((n) => {
+      const o = [...n.children ?? [], ...n.select_items ?? []];
+      if (o.length > 0) {
+        l(o);
         return;
       }
-      const u = e.text || e.tag_text;
-      u && e.value && !a.has(e.value) && (a.add(e.value), c.push({ text: u, value: e.value }));
+      const u = n.text || n.tag_text;
+      u && n.value && !e.has(n.value) && (e.add(n.value), r.push({ text: u, value: n.value }));
     });
-  }, [r] = Object.values(t ?? {});
-  return s(r), c;
-}, i = (t, c, a = !1) => {
-  const s = new Set(t.map((l) => l.value)), r = c.filter((l) => s.has(l.value) ? !1 : (s.add(l.value), !0));
+  }, [s] = Object.values(t ?? {});
+  return l(s), r;
+}, d = (t, r, e = !1) => {
+  const l = new Set(t.map((a) => a.value)), s = r.filter((a) => l.has(a.value) ? !1 : (l.add(a.value), !0));
   return [
-    ...f(t, a),
-    ...f(r, a)
+    ...i(t, e),
+    ...i(s, e)
   ];
-}, v = () => {
+}, F = () => {
   var t;
   return ((t = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : t.getAttribute("content")) ?? "";
-}, k = (t) => typeof t == "string" ? t : typeof t == "number" ? String(t) : "";
+}, T = (t) => typeof t == "string" ? t : typeof t == "number" ? String(t) : "", x = (t) => {
+  if (t === null || typeof t != "object" || Array.isArray(t))
+    return !1;
+  const r = Object.getPrototypeOf(t);
+  return r === Object.prototype || r === null;
+};
 export {
-  k as asText,
-  i as buildMergeTagEntries,
-  f as dynamicContentToMergeTags,
-  b as flattenDynamicContentList,
-  v as getCsrfToken,
-  o as mergeTagToDynamicContent
+  T as asText,
+  d as buildMergeTagEntries,
+  i as dynamicContentToMergeTags,
+  $ as flattenDynamicContentList,
+  F as getCsrfToken,
+  x as isPlainObject,
+  k as mergeTagToDynamicContent
 };

package/dist/utils/liquidDynamicContent.js

@@ -0,0 +1,15 @@
+const E = "time-format", r = "date", u = new RegExp(`^${r}\\s*:\\s*(?:"([^"]*)"|'([^']*)')$`), s = /%[-_0^#]?\d*[a-zA-Z%]/, c = new RegExp(s, "g"), l = /\b(?:Y{2,4}|M{2,4}|D{1,4}|d{3,4}|H{2}|h{2}|m{2}|s{2}|S{1,3}|A|a)\b/, T = (t) => t.includes('"') ? t.includes("'") ? null : `'${t}'` : `"${t}"`, i = (t) => s.test(t) && !l.test(t.replace(c, "")), R = (t) => {
+  if (t.key !== E || !i(t.value ?? ""))
+    return null;
+  const n = T(t.value);
+  return n === null ? null : `${r}: ${n}`;
+}, _ = (t) => {
+  const [, n, o] = t.match(u) ?? [], e = n ?? o;
+  return e ? { key: E, value: e } : null;
+};
+export {
+  E as TIME_FORMAT_KEY,
+  R as formatToLiquidFilter,
+  _ as liquidFilterToFormat,
+  T as quoteArgument
+};

package/dist/utils/templatePreparation.js

@@ -1,30 +1,31 @@
 import { useActionsApi as k } from "../composables/useActionsApi.js";
 import { useConfig as U } from "../composables/useConfig.js";
 import { useHtmlCompiler as x } from "../composables/useHtmlCompiler.js";
-import { DEFAULT_CURRENCY as d, DEFAULT_NODE_CONFIG as a } from "../extensions/Blocks/Recommendation/constants/defaultConfig.js";
-import { useRecommendationExtensionStore as C } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { DEFAULT_CURRENCY as m, DEFAULT_NODE_CONFIG as n } from "../extensions/Blocks/Recommendation/constants/defaultConfig.js";
+import { useRecommendationExtensionStore as A } from "../extensions/Blocks/Recommendation/store/recommendation.js";
 import { mapLegacyStrategy as L } from "../extensions/Blocks/Recommendation/utils/legacyStrategyMap.js";
-import { DATA_ATTRIBUTES as A } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { DATA_ATTRIBUTES as T } from "../extensions/Blocks/Unsubscribe/utils/constants.js";
 import { parsePageList as R } from "../extensions/Blocks/Unsubscribe/utils/utils.js";
 import { useDynamicContentStore as N } from "../stores/dynamic-content.js";
 import { useEditorStore as z } from "../stores/editor.js";
-import { useUnsubscribeStore as _ } from "../stores/unsubscribe.js";
+import { useUnsubscribeStore as O } from "../stores/unsubscribe.js";
+import { isPlainObject as _ } from "./genericUtil.js";
 import { assignTrackingIds as v } from "./linkTrackingIds.js";
-function O(m) {
-  const i = new DOMParser().parseFromString(m, "text/html").querySelectorAll(`[${A.PAGE_LIST}]`), t = [];
-  return i.forEach((s) => {
-    const o = s.getAttribute(A.PAGE_LIST);
+function M(l) {
+  const i = new DOMParser().parseFromString(l, "text/html").querySelectorAll(`[${T.PAGE_LIST}]`), t = [];
+  return i.forEach((c) => {
+    const o = c.getAttribute(T.PAGE_LIST);
     o && t.push(...R(o));
   }), [...new Set(t)];
 }
-async function M(m) {
-  const n = new DOMParser().parseFromString(m, "text/html").querySelectorAll(".recommendation-block-v2");
-  if (n.length === 0)
+async function q(l) {
+  const a = new DOMParser().parseFromString(l, "text/html").querySelectorAll(".recommendation-block-v2");
+  if (a.length === 0)
     return;
-  const i = C();
-  n.forEach((t) => {
-    var r, l, g, f, c;
-    const s = t.getAttribute("recommendation-id"), o = s ? Number(s) : NaN;
+  const i = A();
+  a.forEach((t) => {
+    var r, d, g, f, s, y;
+    const c = t.getAttribute("recommendation-id"), o = c ? Number(c) : NaN;
     if (!Number.isFinite(o))
       return;
     const p = t.getAttribute("esd-ext-config");
@@ -36,28 +37,29 @@ async function M(m) {
     } catch {
       return;
     }
-    if (!e || typeof e != "object" || Array.isArray(e))
+    if (!_(e))
       return;
-    const h = {
+    const b = {
       // Normalize legacy strategy keys (e.g. `mostViewed` → `mostPopular`) so
       // already-saved blocks that never re-run the migrator don't emit a
       // strategy-less campaign URL. `||` also catches '' / undefined (SD-144882).
-      strategy: L(e.strategy) || a.strategy,
-      strategyId: e.strategyId ?? a.strategyId,
-      language: e.language ?? a.language,
-      size: e.size ?? a.size,
+      strategy: L(e.strategy) || n.strategy,
+      strategyId: e.strategyId ?? n.strategyId,
+      language: e.language ?? n.language,
+      size: e.size ?? n.size,
       // Spread the default arrays so each block gets a fresh reference
       // instead of sharing the singleton in DEFAULT_NODE_CONFIG.
-      productIds: e.productIds ?? [...a.productIds],
-      filters: e.filters ?? [...a.filters],
-      shuffleProducts: e.shuffleProducts ?? a.shuffleProducts,
-      currencyCode: ((r = e.currency) == null ? void 0 : r.code) ?? d.code,
-      currencyAlignment: ((l = e.currency) == null ? void 0 : l.alignment) ?? d.alignment,
-      currencyDecimalCount: ((g = e.currency) == null ? void 0 : g.decimalCount) ?? d.decimalCount,
-      currencyDecimalSeparator: ((f = e.currency) == null ? void 0 : f.decimalSeparator) ?? d.decimalSeparator,
-      currencyThousandSeparator: ((c = e.currency) == null ? void 0 : c.thousandSeparator) ?? d.thousandSeparator
+      productIds: e.productIds ?? [...n.productIds],
+      filters: e.filters ?? [...n.filters],
+      shuffleProducts: e.shuffleProducts ?? n.shuffleProducts,
+      currencyCode: ((r = e.currency) == null ? void 0 : r.code) ?? m.code,
+      currencySymbol: ((d = e.currency) == null ? void 0 : d.symbol) ?? m.symbol,
+      currencyAlignment: ((g = e.currency) == null ? void 0 : g.alignment) ?? m.alignment,
+      currencyDecimalCount: ((f = e.currency) == null ? void 0 : f.decimalCount) ?? m.decimalCount,
+      currencyDecimalSeparator: ((s = e.currency) == null ? void 0 : s.decimalSeparator) ?? m.decimalSeparator,
+      currencyThousandSeparator: ((y = e.currency) == null ? void 0 : y.thousandSeparator) ?? m.thousandSeparator
     };
-    i.seedBlockUrlConfig(o, h);
+    i.seedBlockUrlConfig(o, b);
   });
   try {
     await i.fetchRecommendationCreateData();
@@ -68,51 +70,51 @@ async function M(m) {
     );
   }
 }
-const Z = () => {
-  const m = N(), u = z(), n = _(), { getCompiledEmail: i, getTemplateData: t, updateHtmlAndCss: s } = k(), { compileHtml: o, compileAmpHtml: p } = x(), { isFeatureEnabled: e } = U();
+const te = () => {
+  const l = N(), u = z(), a = O(), { getCompiledEmail: i, getTemplateData: t, updateHtmlAndCss: c } = k(), { compileHtml: o, compileAmpHtml: p } = x(), { isFeatureEnabled: e } = U();
   return {
     prepareTemplateDetails: async () => {
-      let { html: r, css: l, syncModulesIds: g = [] } = await t();
+      let { html: r, css: d, syncModulesIds: g = [] } = await t();
       if (e("linkTrackingIds"))
         try {
-          const { html: S, changed: F, nextSeq: H } = v(r, u.trackIdSessionFloor);
-          u.trackIdSessionFloor = H, F && (r = S, await s(S, l));
-        } catch (S) {
-          console.error("Tracking-id step failed, saving anyway:", S);
+          const { html: h, changed: F, nextSeq: H } = v(r, u.trackIdSessionFloor);
+          u.trackIdSessionFloor = H, F && (r = h, await c(h, d));
+        } catch (h) {
+          console.error("Tracking-id step failed, saving anyway:", h);
         }
-      const { html: f, ampHtml: c = "", ampErrors: T = [] } = await i({
+      const { html: f, ampHtml: s = "", ampErrors: y = [] } = await i({
         minimize: !0,
         resetDataSavedFlag: !1
       });
-      n.selectedUnsubscribePages.length && await n.fetchTemplates(), await M(r);
-      const { compiledHtml: I, stats: y, appliedRules: w } = o(f), D = c && p(c).compiledHtml, E = m.getSelectedDynamicContentList, P = C(), b = O(r);
+      a.selectedUnsubscribePages.length && await a.fetchTemplates(), await q(r);
+      const { compiledHtml: I, stats: S, appliedRules: w } = o(f), D = s && p(s).compiledHtml, P = l.getSelectedDynamicContentList, E = A(), C = M(r);
       return console.debug("HTML Compilation Stats:", {
-        originalSize: y.originalSize,
-        compiledSize: y.compiledSize,
-        reduction: `${y.reductionPercentage.toFixed(2)}%`,
+        originalSize: S.originalSize,
+        compiledSize: S.compiledSize,
+        reduction: `${S.reductionPercentage.toFixed(2)}%`,
         appliedRules: w,
-        executionTime: `${y.executionTime.toFixed(2)}ms`
+        executionTime: `${S.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: E,
+        dynamicContentList: P,
         compiledHtml: I,
         rawHtml: r,
-        css: l,
+        css: d,
         ampHtml: D,
-        ampErrors: T,
+        ampErrors: y,
         modules: g.map(Number),
         recommendation: {
-          campaignUrls: P.recommendationCampaignUrls,
+          campaignUrls: E.recommendationCampaignUrls,
           configs: {}
         },
         unsubscribe: {
-          status: b.length > 0,
-          config: b
+          status: C.length > 0,
+          config: C
         }
       };
     }
   };
 };
 export {
-  O as getHtmlReferencedUnsubscribePages,
-  Z as useTemplatePreparation
+  M as getHtmlReferencedUnsubscribePages,
+  te as useTemplatePreparation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.18.1",
+  "version": "3.18.2-beta.345283a",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",
@@ -47,9 +47,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@stripoinc/ui-editor-extensions": "3.9.0",
+    "@stripoinc/ui-editor-extensions": "3.10.0",
     "@useinsider/design-system-organisms": "0.0.3-beta.d816f06",
-    "@useinsider/design-system-vue": "1.5.0",
+    "@useinsider/design-system-vue": "2.3.1",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
     "pinia": "2.3.1",
@@ -118,7 +118,7 @@
   },
   "guido": {
     "stripo": {
-      "version": "2.73.0"
+      "version": "2.76.0"
     }
   }
 }