@useinsider/guido 2.0.0-beta.061e9c9 → 2.0.0-beta.0941bcd

package/dist/static/styles/components/button.css.js

@@ -48,7 +48,7 @@ const o = `.control-shadow-wrapper:has(.button) {
 }
 
 .e2e-text-insert-controls .control-shadow-wrapper:not(:last-of-type) {
-    margin-right: 16px;
+    margin-right: 6px;
 }
 
 .flat-white > .button {

package/dist/static/styles/components/wide-panel.css.js

@@ -60,7 +60,7 @@ ue-control-panel,
 
 .control-panel-header {
     grid-template-columns: repeat(12, 1fr);
-    padding: 0;
+    padding: 16px 0px 16px 16px;
 }
 
 .control-panel-header > * {

package/dist/static/styles/customEditorStyle.css.js

@@ -19,8 +19,31 @@ const n = `.esd-x,
     box-shadow: none;
 }
 .ins-product-cart ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-attribute-cell ue-node-actions,
-.ins-recommendation-v3-block-v2 .product-attribute-cell ue-node-panel {
+/* Horizontal layout - hide for info, image, and button cells */
+.ins-recommendation-v3-block-v2 .product-info-cell ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-info-cell ue-node-panel,
+.ins-recommendation-v3-block-v2 .product-image-cell ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-image-cell ue-node-panel,
+.ins-recommendation-v3-block-v2 .button-cell ue-node-actions,
+.ins-recommendation-v3-block-v2 .button-cell ue-node-panel,
+/* Vertical layout - hide for product-card-segment inner cells */
+.ins-recommendation-v3-block-v2 .product-card-segment ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-card-segment ue-node-panel,
+/* Hide for specific product attribute cells in both layouts */
+.ins-recommendation-v3-block-v2 .product-image ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-image ue-node-panel,
+.ins-recommendation-v3-block-v2 .product-name ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-name ue-node-panel,
+.ins-recommendation-v3-block-v2 .product-price ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-price ue-node-panel,
+.ins-recommendation-v3-block-v2 .product-old-price ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-old-price ue-node-panel,
+.ins-recommendation-v3-block-v2 .product-omnibus-price ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-omnibus-price ue-node-panel,
+.ins-recommendation-v3-block-v2 .product-omnibus-discount ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-omnibus-discount ue-node-panel,
+.ins-recommendation-v3-block-v2 .product-button ue-node-actions,
+.ins-recommendation-v3-block-v2 .product-button ue-node-panel {
     display: none !important;
 }
 

package/dist/stores/config.js

@@ -64,6 +64,13 @@ const s = o("guido-config", {
       var e;
       return ((e = i.config) == null ? void 0 : e.compiler) ?? null;
     },
+    /**
+     * Get the callbacks configuration
+     */
+    callbacks: (i) => {
+      var e;
+      return ((e = i.config) == null ? void 0 : e.callbacks) ?? null;
+    },
     /**
      * Get the template ID
      */

package/dist/stores/editor.js

@@ -13,6 +13,7 @@ const o = e("guidoEditor", {
   }),
   getters: {
     // Middle Slot
+    isEditorToolbarVisible: (i) => !i.isVersionHistoryOpen && !i.isPreviewModeOpen,
     isUndoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isRedoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isCodeEditorButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,

package/dist/utils/templatePreparation.js

@@ -1,29 +1,29 @@
-import { useActionsApi as S } from "../composables/useActionsApi.js";
-import { useHtmlCompiler as b } from "../composables/useHtmlCompiler.js";
-import { useDynamicContentStore as f } from "../stores/dynamic-content.js";
-import { useUnsubscribeStore as C } from "../stores/unsubscribe.js";
-const z = () => {
-  const i = f(), t = C(), { getCompiledEmail: o, getTemplateData: s } = S(), { compileHtml: n } = b();
+import { useActionsApi as b } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as f } from "../composables/useHtmlCompiler.js";
+import { useDynamicContentStore as C } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as T } from "../stores/unsubscribe.js";
+const P = () => {
+  const i = C(), t = T(), { getCompiledEmail: o, getTemplateData: s, editorSave: n } = b(), { compileHtml: a } = f();
   return {
     prepareTemplateDetails: async () => {
-      const { html: a, ampHtml: m = "", ampErrors: r = [] } = await o({
+      const { html: r, ampHtml: m = "", ampErrors: c = [] } = await o({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: c, css: l, syncModulesIds: p = [] } = await s(), { compiledHtml: u, stats: e, appliedRules: d } = n(a), g = i.getSelectedDynamicContentList;
-      return console.debug("HTML Compilation Stats:", {
+      }), { html: l, css: p, syncModulesIds: u = [] } = await s(), { compiledHtml: d, stats: e, appliedRules: g } = a(r), S = i.getSelectedDynamicContentList;
+      return n(), console.debug("HTML Compilation Stats:", {
         originalSize: e.originalSize,
         compiledSize: e.compiledSize,
         reduction: `${e.reductionPercentage.toFixed(2)}%`,
-        appliedRules: d,
+        appliedRules: g,
         executionTime: `${e.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: g,
-        compiledHtml: u,
-        rawHtml: c,
-        css: l,
+        dynamicContentList: S,
+        compiledHtml: d,
+        rawHtml: l,
+        css: p,
         ampHtml: m,
-        ampErrors: r,
-        modules: p,
+        ampErrors: c,
+        modules: u,
         recommendation: {
           campaignUrls: {},
           configs: {}
@@ -37,5 +37,5 @@ const z = () => {
   };
 };
 export {
-  z as useTemplatePreparation
+  P as useTemplatePreparation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "2.0.0-beta.061e9c9",
+  "version": "2.0.0-beta.0941bcd",
   "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",
@@ -31,7 +31,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@stripoinc/ui-editor-extensions": "3.3.0",
+    "@stripoinc/ui-editor-extensions": "3.5.0",
     "@useinsider/design-system-vue": "0.14.20",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
@@ -85,7 +85,7 @@
   },
   "guido": {
     "stripo": {
-      "version": "2.47.0"
+      "version": "2.52.0"
     }
   }
 }

package/dist/components/organisms/email-preview/desktop-preview/EmailHeaderInfo.vue.js

@@ -1,17 +0,0 @@
-import e from "./EmailHeaderInfo.vue2.js";
-import c from "../../../../_virtual/_plugin-vue2_normalizer.js";
-var r = function() {
-  var t = this, s = t._self._c, a = t._self._setupProxy;
-  return s("div", { staticClass: "d-f a-i-c j-c-s-b w-1" }, [s("div", { staticClass: "d-f a-i-c" }, [s("div", { staticClass: "b-c-49 bor-r-100 w-5-s h-5-s d-f a-i-c j-c-c" }, [s(a.InIcons, { attrs: { name: "line-menu-profile" } })], 1), s("div", { staticClass: "d-f f-d-c ml-2" }, [s("p", { staticClass: "t-c-53 f-w-600 f-s-1 l-h-1" }, [t._v(" " + t._s(a.senderName) + " ")]), s("p", { staticClass: "t-c-55 f-w-400 f-s-12 l-h-1" }, [t._v(" " + t._s(a.subject) + " ")])])])]);
-}, i = [], n = /* @__PURE__ */ c(
-  e,
-  r,
-  i,
-  !1,
-  null,
-  null
-);
-const o = n.exports;
-export {
-  o as default
-};

package/dist/components/organisms/email-preview/desktop-preview/EmailHeaderInfo.vue2.js

@@ -1,20 +0,0 @@
-import { defineComponent as i, computed as s } from "vue";
-import { useConfig as c } from "../../../../composables/useConfig.js";
-import { useTranslations as d } from "../../../../composables/useTranslations.js";
-import { InIcons as u } from "@useinsider/design-system-vue";
-const g = /* @__PURE__ */ i({
-  __name: "EmailHeaderInfo",
-  setup(f) {
-    const { config: n } = c(), r = d(), a = s(() => {
-      var e, t, o;
-      return ((o = (t = (e = n.value) == null ? void 0 : e.editor) == null ? void 0 : t.emailHeader) == null ? void 0 : o.senderName) || r("settings.sender-name");
-    }), m = s(() => {
-      var e, t, o;
-      return ((o = (t = (e = n.value) == null ? void 0 : e.editor) == null ? void 0 : t.emailHeader) == null ? void 0 : o.subject) || r("email-editor.default-subject");
-    });
-    return { __sfc: !0, config: n, trans: r, senderName: a, subject: m, InIcons: u };
-  }
-});
-export {
-  g as default
-};

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

@@ -1,193 +0,0 @@
-import { ModificationDescription as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as b } from "../common-control.js";
-import { ATTR_PRODUCT_IMAGE as m, ATTR_PRODUCT_NAME as y, ATTR_PRODUCT_PRICE as T, ATTR_PRODUCT_OLD_PRICE as h, ATTR_PRODUCT_OMNIBUS_PRICE as C, ATTR_PRODUCT_OMNIBUS_DISCOUNT as f, ATTR_PRODUCT_BUTTON as g } from "./constants.js";
-const R = "ui-elements-recommendation-card-composition", l = ".recommendation-attribute-row", A = "tr.recommendation-product-row", c = "data-card-composition", a = "data-attribute-type", d = "data-visibility", s = [
-  { key: m, label: "Product Image", visible: !0 },
-  { key: y, label: "Product Name", visible: !0 },
-  { key: T, label: "Product Price", visible: !0 },
-  { key: h, label: "Product Original Price", visible: !0 },
-  { key: C, label: "Omnibus Price", visible: !1 },
-  { key: f, label: "Omnibus Discount", visible: !1 },
-  { key: g, label: "Product Button", visible: !0 }
-];
-class N extends b {
-  getId() {
-    return R;
-  }
-  getTemplate() {
-    const t = s.map((i) => ({
-      key: i.key,
-      label: i.label,
-      content: this._createItemContent(i.label, i.key)
-    }));
-    return `
-            <div class="container">
-                ${this._GuLabel({ text: "Card Element Order & Visibility" })}
-                ${this._GuOrderable("cardComposition", t)}
-            </div>
-        `;
-  }
-  onRender() {
-    this._initializeComposition(), this._registerValueChangeListeners();
-  }
-  onTemplateNodeUpdated(t) {
-    super.onTemplateNodeUpdated(t), this._initializeComposition();
-  }
-  /**
-   * Creates the HTML content for an orderable item with label and toggle
-   */
-  _createItemContent(t, i) {
-    return `
-            <div style="display: flex; align-items: center; justify-content: space-between;
-                padding: 8px; gap: 8px;">
-                <span style="flex: 1;">${t}</span>
-                ${this._GuToggle(`visibility_${i}`)}
-            </div>
-        `;
-  }
-  /**
-   * Registers event listeners for composition and visibility changes
-   */
-  _registerValueChangeListeners() {
-    this.api.onValueChanged("cardComposition", (t) => {
-      this._applyCompositionToBlock(t);
-    }), s.forEach((t) => {
-      this.api.onValueChanged(`visibility_${t.key}`, (i) => {
-        this._applyVisibilityToBlock(t.key, i);
-      });
-    });
-  }
-  /**
-   * Initializes composition order and visibility state from the current node
-   */
-  _initializeComposition() {
-    const t = this._readCompositionFromNode(), i = this._readVisibilityFromRows(), e = {
-      cardComposition: t,
-      ...this._buildVisibilityValues(i)
-    };
-    this.api.updateValues(e);
-  }
-  /**
-   * Reads composition order from node's data-card-composition attribute
-   * Falls back to default order if attribute is not present
-   */
-  _readCompositionFromNode() {
-    if (!this.currentNode || !("getAttribute" in this.currentNode))
-      return this._getDefaultComposition();
-    const t = this.currentNode.getAttribute(c);
-    return t ? t.split(",").filter(Boolean) : this._getDefaultComposition();
-  }
-  /**
-   * Gets default composition order
-   */
-  _getDefaultComposition() {
-    return s.map((t) => t.key);
-  }
-  /**
-   * Builds visibility values object from the visibility map
-   */
-  _buildVisibilityValues(t) {
-    return s.reduce((i, e) => (i[`visibility_${e.key}`] = t[e.key] ?? !0, i), {});
-  }
-  /**
-   * Read visibility state from individual row elements' data-visibility attributes
-   * This ensures toggles reflect the actual DOM state
-   */
-  _readVisibilityFromRows() {
-    if (!this.currentNode)
-      return this._getDefaultVisibilities();
-    const t = Array.from(this.currentNode.querySelectorAll(l));
-    console.debug("_readVisibilityFromRows - found attribute rows:", t.length);
-    const i = this._extractVisibilityFromRows(t);
-    return this._mergeWithDefaults(i);
-  }
-  /**
-   * Returns default visibility values for all items
-   */
-  _getDefaultVisibilities() {
-    return s.reduce((t, i) => (t[i.key] = i.visible, t), {});
-  }
-  /**
-   * Extracts visibility values from DOM nodes
-   */
-  _extractVisibilityFromRows(t) {
-    const i = {};
-    return t.forEach((e) => {
-      if (!("getAttribute" in e))
-        return;
-      const o = e.getAttribute(a), r = e.getAttribute(d);
-      o && r !== null && (i[o] = this._parseVisibilityValue(r), console.debug(
-        `_readVisibilityFromRows - ${o}: ${i[o]} (raw: ${r})`
-      ));
-    }), i;
-  }
-  /**
-   * Parses visibility value from string to boolean
-   * Accepts "1", "true" as true, everything else as false
-   */
-  _parseVisibilityValue(t) {
-    return t === "1" || t === "true";
-  }
-  /**
-   * Merges extracted visibilities with default values for missing keys
-   */
-  _mergeWithDefaults(t) {
-    return s.forEach((i) => {
-      i.key in t || (t[i.key] = i.visible, console.debug(`_readVisibilityFromRows - ${i.key}: using default ${i.visible}`));
-    }), t;
-  }
-  /**
-   * Apply the reordered composition to the block's HTML structure
-   * Updates the data-card-composition attribute and reorders product attributes
-   */
-  _applyCompositionToBlock(t) {
-    if (console.debug("_applyCompositionToBlock - composition:", t), !this.currentNode) {
-      console.debug("_applyCompositionToBlock - no current node");
-      return;
-    }
-    this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(c, t.join(",")).apply(new n("Update card composition")), this._reorderProductAttributes(t);
-  }
-  /**
-   * Reorders attribute rows within each product row based on composition order
-   */
-  _reorderProductAttributes(t) {
-    if (!this.currentNode)
-      return;
-    const i = this.currentNode.querySelectorAll(A);
-    if (!(i != null && i.length))
-      return;
-    const e = this.api.getDocumentModifier();
-    i.forEach((o) => {
-      const r = this._buildCompositionHtml(o, t);
-      e.modifyHtml(o).setInnerHtml(r);
-    }), e.apply(new n("Reorder product attributes"));
-  }
-  /**
-   * Builds HTML string with attributes ordered according to composition
-   */
-  _buildCompositionHtml(t, i) {
-    return i.reduce((e, o) => {
-      const r = t.querySelector(`${l}[${a}="${o}"]`);
-      return r && "getOuterHTML" in r ? e + r.getOuterHTML() : e;
-    }, "");
-  }
-  /**
-   * Apply visibility changes to the block's HTML structure
-   * Updates display style and data-visibility attribute for all matching rows
-   */
-  _applyVisibilityToBlock(t, i) {
-    if (console.debug("_applyVisibilityToBlock", t, i), !this.currentNode)
-      return;
-    const e = this.currentNode.querySelectorAll(`${l}[${a}="${t}"]`);
-    if (!(e != null && e.length))
-      return;
-    const o = i ? "table-row" : "none", r = i ? "1" : "0", p = `Set ${t} visibility to ${i ? "visible" : "hidden"}`, u = this.api.getDocumentModifier();
-    e.forEach((_) => {
-      u.modifyHtml(_).setStyle("display", o).setAttribute(d, r);
-    }), u.apply(new n(p));
-  }
-}
-export {
-  R as COMPOSITION_CONTROL_BLOCK_ID,
-  N as RecommendationCardCompositionControl
-};

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

@@ -1,14 +0,0 @@
-const _ = "productImage", i = "productName", n = "productPrice", b = "productOldPrice", l = "productOmnibusPrice", N = "productOmnibusDiscount", O = "productButton", T = "data-price-inline";
-var o = /* @__PURE__ */ ((c) => (c.BUTTON = "recommendation-block-button", c.NAME = "recommendation-block-name", c.PRICE = "recommendation-block-price", c.OLD_PRICE = "recommendation-block-old-price", c.OMNIBUS_PRICE = "recommendation-block-omnibus-price", c.OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount", c.IMAGE = "recommendation-block-image", c))(o || {}), r = /* @__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_LINE_SPACING = "recommendation-block-name-line-spacing-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_HIDE_IF_SAME = "recommendation-block-price-hide-if-same-control", c.PRICE_LINE_SPACING = "recommendation-block-price-line-spacing-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_LINE_SPACING = "recommendation-block-old-price-line-spacing-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_LINE_SPACING = "recommendation-block-omnibus-price-line-spacing-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_LINE_SPACING = "recommendation-block-omnibus-discount-line-spacing-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.PRICE_INLINE_LAYOUT = "recommendation-block-price-inline-layout-control", c))(r || {});
-export {
-  T as ATTR_DATA_PRICE_INLINE,
-  O as ATTR_PRODUCT_BUTTON,
-  _ as ATTR_PRODUCT_IMAGE,
-  i as ATTR_PRODUCT_NAME,
-  b as ATTR_PRODUCT_OLD_PRICE,
-  N as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
-  l as ATTR_PRODUCT_OMNIBUS_PRICE,
-  n as ATTR_PRODUCT_PRICE,
-  o as RecommendationBlockId,
-  r as RecommendationControlId
-};