@useinsider/guido 2.1.0-beta.a720424 → 2.1.0-beta.e13d291

package/dist/src/extensions/Blocks/Recommendation/utils/priceFormatter.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Price Formatting Utilities
+ *
+ * Provides functions for formatting prices according to currency settings.
+ * Used to format prices displayed in recommendation product cards.
+ */
+import type { CurrencyConfig } from '../types/nodeConfig';
+/**
+ * Options for formatting a price
+ */
+export interface FormatPriceOptions {
+    /** The numeric price value */
+    price: number;
+    /** Currency configuration */
+    currency: CurrencyConfig;
+}
+/**
+ * Formats a numeric price according to currency settings
+ * @example
+ * // Returns: "$ 1,999.99"
+ * formatPrice({ price: 1999.99, currency: currencyConfig })
+ * @param options - Formatting options
+ * @returns Formatted price string
+ */
+export declare function formatPrice(options: FormatPriceOptions): string;
+/**
+ * Parses a formatted price string back to a number
+ * Useful for extracting numeric values from formatted price displays
+ * @param formattedPrice - The formatted price string
+ * @param currency - Currency configuration for parsing
+ * @returns Parsed numeric value or NaN if parsing fails
+ */
+export declare function parseFormattedPrice(formattedPrice: string, currency: CurrencyConfig): number;

package/dist/src/extensions/Blocks/Recommendation/utils/stylePreserver.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Style Preserver Utility
+ *
+ * Captures and restores element styles during block regeneration.
+ * This ensures user styling is preserved when:
+ * - Layout changes (vertical <-> horizontal)
+ * - Cards per row changes
+ * - Composition order changes
+ *
+ * Works with the node config system to provide complete style persistence.
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
+/**
+ * Style properties that can be captured for text elements
+ */
+export interface TextElementStyles {
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    color?: string;
+    textAlign?: string;
+    lineHeight?: string;
+    textDecoration?: string;
+}
+/**
+ * Style properties for button elements
+ */
+export interface ButtonElementStyles extends TextElementStyles {
+    backgroundColor?: string;
+    borderRadius?: string;
+    border?: string;
+    padding?: string;
+}
+/**
+ * Style properties for image elements
+ */
+export interface ImageElementStyles {
+    width?: string;
+    height?: string;
+    maxWidth?: string;
+}
+/**
+ * Complete captured styles for a recommendation block
+ */
+export interface CapturedStyles {
+    /** Product name text styles */
+    name: TextElementStyles;
+    /** Current price text styles */
+    price: TextElementStyles;
+    /** Original/old price text styles */
+    oldPrice: TextElementStyles;
+    /** Omnibus price text styles */
+    omnibusPrice: TextElementStyles;
+    /** Omnibus discount text styles */
+    omnibusDiscount: TextElementStyles;
+    /** CTA button styles */
+    button: ButtonElementStyles;
+    /** Product image styles */
+    image: ImageElementStyles;
+    /** Card background color */
+    cardBackgroundColor: string | null;
+    /** Column spacing in pixels */
+    columnSpacing: number;
+    /** Row spacing in pixels */
+    rowSpacing: number;
+    /** Element composition order */
+    composition: string[];
+    /** Element visibility flags */
+    visibility: Record<string, boolean>;
+}
+type DocumentModifier = {
+    modifyHtml: (node: ImmutableHtmlNode) => {
+        setStyle: (prop: string, value: string) => DocumentModifier;
+    };
+    apply: (description: ModificationDescription) => void;
+};
+/**
+ * Capture all styles from a recommendation block
+ *
+ * Call this BEFORE any operation that regenerates the block HTML.
+ * The captured styles can then be restored after regeneration.
+ * @example
+ * // Before layout change
+ * const styles = captureStyles(this.currentNode);
+ *
+ * // ... regenerate block HTML ...
+ *
+ * // After regeneration
+ * restoreStyles(this.currentNode, this.api.getDocumentModifier(), styles);
+ * @param node - The block node to capture styles from
+ * @returns Complete captured styles object
+ */
+export declare function captureStyles(node: ImmutableHtmlNode | null | undefined): CapturedStyles;
+/**
+ * Restore captured styles to a regenerated block
+ *
+ * Call this AFTER regenerating block HTML to reapply user styling.
+ * @example
+ * restoreStyles(this.currentNode, this.api.getDocumentModifier(), capturedStyles);
+ * @param node - The block node to restore styles to
+ * @param modifier - Document modifier for applying changes
+ * @param styles - Previously captured styles
+ */
+export declare function restoreStyles(node: ImmutableHtmlNode | null | undefined, modifier: DocumentModifier, styles: CapturedStyles): void;
+/**
+ * Check if styles have meaningful content worth restoring
+ * @param styles - Captured styles to check
+ * @returns True if styles contain restorable content
+ */
+export declare function hasRestorableStyles(styles: CapturedStyles): boolean;
+export {};

package/dist/src/extensions/Blocks/Recommendation/utils/tagName.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Node Type Guards and Tag Name Utilities
+ *
+ * Provides type-safe utilities for working with ImmutableHtmlNode.
+ * Handles both standard DOM properties and Stripo's custom methods.
+ */
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+/** Interface for nodes with standard tagName property */
+interface NodeWithTagName {
+    tagName: string;
+}
+/** Interface for nodes with getStyle method */
+export interface NodeWithGetStyle {
+    getStyle: (property: string) => string | null | undefined;
+}
+/** Interface for nodes with parent method */
+export interface NodeWithParent {
+    parent: () => ImmutableHtmlNode | null;
+}
+/**
+ * Type guard to check if a node has getStyle method
+ * @param node - The node to check
+ */
+export declare function hasGetStyle(node: unknown): node is NodeWithGetStyle;
+/**
+ * Type guard to check if a node has parent method
+ * @param node - The node to check
+ */
+export declare function hasParent(node: unknown): node is NodeWithParent;
+/**
+ * Type guard to check if a node is a TD element
+ * @param node - The node to check
+ */
+export declare function isTdNode(node: unknown): node is ImmutableHtmlNode & NodeWithTagName;
+/**
+ * Safely retrieves a style value from a node
+ * @param node - The node to get the style from
+ * @param property - The CSS property name
+ * @returns The style value or null if not accessible
+ */
+export declare function safeGetStyle(node: ImmutableHtmlNode | null, property: string): string | null | undefined;
+/**
+ * Safely retrieves the parent element of a node
+ * @param node - The node to get the parent from
+ * @returns The parent node or null if not accessible
+ */
+export declare function safeGetParent(node: ImmutableHtmlNode | null): ImmutableHtmlNode | null;
+/**
+ * Safely retrieves the tag name from a node.
+ * Handles both standard DOM tagName property and Stripo's getTagName() method.
+ * @param node - The node to get the tag name from
+ * @param defaultValue - Default value if tag name cannot be determined (default: 'UNKNOWN')
+ * @returns The uppercase tag name
+ */
+export declare function getTagName(node: ImmutableHtmlNode | null | undefined, defaultValue?: string): string;
+/**
+ * Checks if a tag name represents a table cell element.
+ * Includes standard TD and Stripo's custom block types (BLOCK_IMAGE, BLOCK_BUTTON).
+ * @param tagName - The tag name to check (case-insensitive)
+ * @returns True if the tag represents a table cell
+ */
+export declare function isTableCellTag(tagName: string): boolean;
+/**
+ * Checks if a node is a table cell element.
+ * Combines getTagName and isTableCellTag for convenience.
+ * @param node - The node to check
+ * @returns True if the node is a table cell element
+ */
+export declare function isTableCellNode(node: ImmutableHtmlNode | null | undefined): boolean;
+/**
+ * Gets the appropriate CSS display value for showing a table element.
+ * Table cells use 'table-cell', table rows use 'table-row'.
+ * @param node - The table element node
+ * @returns The CSS display value ('table-cell' or 'table-row')
+ */
+export declare function getTableDisplayValue(node: ImmutableHtmlNode | null | undefined): 'table-cell' | 'table-row';
+export {};

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "2.1.0-beta.a720424",
+  "version": "2.1.0-beta.e13d291",
   "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",

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

@@ -1,187 +0,0 @@
-import { ModificationDescription as n } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as _ } 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 _ {
-  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 s.map((i) => i.key);
-    const t = this.currentNode.getAttribute(c);
-    return t ? t.split(",").filter(Boolean) : s.map((i) => i.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((b) => {
-      u.modifyHtml(b).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,13 +0,0 @@
-const _ = "productImage", b = "productName", n = "productPrice", i = "productOldPrice", O = "productOmnibusPrice", T = "productOmnibusDiscount", t = "productButton";
-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_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))(r || {});
-export {
-  t as ATTR_PRODUCT_BUTTON,
-  _ as ATTR_PRODUCT_IMAGE,
-  b as ATTR_PRODUCT_NAME,
-  i as ATTR_PRODUCT_OLD_PRICE,
-  T as ATTR_PRODUCT_OMNIBUS_DISCOUNT,
-  O as ATTR_PRODUCT_OMNIBUS_PRICE,
-  n as ATTR_PRODUCT_PRICE,
-  o as RecommendationBlockId,
-  r as RecommendationControlId
-};