@useinsider/guido 3.0.0-beta.7a5aecd → 3.0.0-beta.7d3a300

package/dist/package.json.js

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

package/dist/src/extensions/Blocks/Recommendation/block.d.ts

@@ -22,6 +22,7 @@ export declare class RecommendationBlock extends Block {
     getName(): string;
     getDescription(): string;
     getSettingsPanelTitleHtml(): string;
+    allowInnerBlocksDND(): boolean;
     /**
      * Returns the template HTML for a new recommendation block.
      * Generates a unique recommendation ID and embeds the instance class

package/dist/src/extensions/Blocks/Recommendation/constants/blockIds.d.ts

@@ -9,5 +9,6 @@ export declare enum RecommendationBlockId {
     OLD_PRICE = "recommendation-block-old-price",
     OMNIBUS_PRICE = "recommendation-block-omnibus-price",
     OMNIBUS_DISCOUNT = "recommendation-block-omnibus-discount",
-    IMAGE = "recommendation-block-image"
+    IMAGE = "recommendation-block-image",
+    CUSTOM_ATTRIBUTE = "recommendation-block-custom-attribute"
 }

package/dist/src/extensions/Blocks/Recommendation/constants/controlIds.d.ts

@@ -55,5 +55,12 @@ export declare enum RecommendationControlId {
     OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control",
     OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control",
     IMAGE_SIZE = "recommendation-block-image-size-control",
-    IMAGE_MARGINS = "recommendation-block-image-margins-control"
+    IMAGE_MARGINS = "recommendation-block-image-margins-control",
+    CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control",
+    CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control",
+    CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control",
+    CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control",
+    CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control",
+    CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control",
+    CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control"
 }

package/dist/src/extensions/Blocks/Recommendation/constants/index.d.ts

@@ -8,6 +8,6 @@
  */
 export { RecommendationBlockId } from './blockIds';
 export { RecommendationControlId } from './controlIds';
-export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, MOBILE_ROW_SELECTOR, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, } from './selectors';
+export { BLOCK_ROOT_SELECTOR, CONTAINER_SELECTOR, DESKTOP_CONTAINER_SELECTOR, MOBILE_CONTAINER_SELECTOR, MOBILE_ROW_SELECTOR, CURRENCY_ATTR, ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON, ATTR_CUSTOM_PREFIX, ATTR_DATA_CUSTOM_ATTRIBUTES, ATTR_PRODUCT_ATTR, } from './selectors';
 export { LAYOUT_VALUES, LAYOUT_OPTIONS, DEFAULT_PRODUCTS_PER_ROW, DEFAULT_CARDS_IN_ROW, DEFAULT_MOBILE_CARDS_IN_ROW, MAX_PRODUCT_COUNT, MIN_PRODUCT_COUNT, MAX_PRODUCTS_PER_ROW, MIN_PRODUCTS_PER_ROW, MAX_MOBILE_PRODUCTS_PER_ROW, MIN_MOBILE_PRODUCTS_PER_ROW, DEFAULT_COLUMN_SPACING, DEFAULT_ROW_SPACING, DEFAULT_MOBILE_COLUMN_SPACING, DEFAULT_MOBILE_ROW_SPACING, MIN_SPACING, MAX_SPACING, SPACING_STEP, } from './layout';
 export { DEFAULT_NODE_CONFIG, DEFAULT_CURRENCY, DEFAULT_COMPOSITION, DEFAULT_VISIBILITY, CURRENT_CONFIG_VERSION, EXCLUDED_ALGORITHM_IDS, } from './defaultConfig';

package/dist/src/extensions/Blocks/Recommendation/constants/selectors.d.ts

@@ -40,3 +40,13 @@ export declare const ATTR_PRODUCT_OLD_PRICE = "productOldPrice";
 export declare const ATTR_PRODUCT_OMNIBUS_PRICE = "productOmnibusPrice";
 export declare const ATTR_PRODUCT_OMNIBUS_DISCOUNT = "productOmnibusDiscount";
 export declare const ATTR_PRODUCT_BUTTON = "productButton";
+/**
+ * Custom attribute constants
+ * Used for dynamically added product attributes in Card Composition
+ */
+/** Prefix for custom attribute keys in composition arrays (e.g., "customAttr:rating_star") */
+export declare const ATTR_CUSTOM_PREFIX = "customAttr:";
+/** HTML data attribute storing JSON array of added custom attribute names */
+export declare const ATTR_DATA_CUSTOM_ATTRIBUTES = "data-custom-attributes";
+/** HTML attribute on <td> elements identifying the product attribute for compiler template variable generation */
+export declare const ATTR_PRODUCT_ATTR = "product-attr";

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

@@ -4,92 +4,182 @@ export declare const COMPOSITION_CONTROL_BLOCK_ID = "ui-elements-recommendation-
 export interface CardCompositionItem {
     key: string;
     label: string;
-    visible: boolean;
 }
 export declare class RecommendationCardCompositionControl extends CommonControl {
     private store;
-    private unsubscribeOrientation;
+    private unsubscribeStore;
+    private eventController;
+    /**
+     * Guard flag: when true, onTemplateNodeUpdated skips _initializeComposition.
+     * Used during _onReorder to prevent multiple intermediate rebuilds.
+     */
+    private reorderInProgress;
     getId(): string;
     getTemplate(): string;
     onRender(): void;
     onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    onDestroy(): void;
+    private _initializeComposition;
+    private _registerValueChangeListeners;
+    private _readCompositionFromNode;
+    private _readCustomAttributesFromNode;
+    private _readVisibilityFromRows;
+    private _getDefaultVisibilities;
+    private _extractVisibilityFromRows;
+    private _parseVisibilityValue;
+    private _mergeWithDefaults;
+    private _buildVisibilityValues;
     /**
-     * Creates the HTML content for an orderable item with label and toggle
+     * Renders orderable items into the composition list.
+     * Returns `true` if a full DOM rebuild occurred, `false` if existing
+     * elements were reordered in-place (preserving UE-SELECT state).
      */
-    private _createItemContent;
+    private _renderOrderableItems;
     /**
-     * Registers event listeners for composition and visibility changes
+     * Attempts to reorder existing orderable-item elements to match the composition order.
+     * If the list already contains the same set of items (possibly in a different order),
+     * performs a lightweight DOM reorder instead of a full innerHTML rebuild.
+     * Returns true if reorder was performed, false if a full rebuild is needed.
      */
-    private _registerValueChangeListeners;
+    private _tryReorderInPlace;
+    private _createBuiltInItemHtml;
+    private _createCustomItemHtml;
     /**
-     * Initializes composition order and visibility state from the current node
+     * Builds select options from the store's filterList.
+     * Falls back to a single option for the currently selected attribute.
      */
-    private _initializeComposition;
+    private _getSelectOptions;
     /**
-     * Reads composition order from node's data-card-composition attribute
-     * Falls back to default order if attribute is not present
+     * Initializes custom attribute selects: sets their options and current value.
+     * Selects are pre-allocated in getTemplate() and moved into items by
+     * _moveSelectsIntoItems — this method only updates their data.
      */
-    private _readCompositionFromNode;
+    private _initializeCustomSelects;
     /**
-     * Builds visibility values object from the visibility map
+     * Moves UE-SWITCHER elements from the hidden toggle store into orderable items.
+     * Stripo initializes toggles at template parse time; moving the DOM node preserves bindings.
      */
-    private _buildVisibilityValues;
+    private _moveTogglesIntoItems;
     /**
-     * Read visibility state from individual row elements' data-visibility attributes
-     * This ensures toggles reflect the actual DOM state
+     * Moves pre-allocated UE-SELECT elements from the hidden custom-select-store
+     * into orderable item slots. Same pattern as _moveTogglesIntoItems.
      */
-    private _readVisibilityFromRows;
+    private _moveSelectsIntoItems;
     /**
-     * Returns default visibility values for all items
+     * Rescues UE-SWITCHER elements from orderable items back to the hidden toggle store.
+     * Must be called before re-rendering the list with innerHTML to prevent toggle destruction.
+     * Without this, onTemplateNodeUpdated → _renderOrderableItems → innerHTML would destroy
+     * previously-moved toggles, making them permanently lost.
      */
-    private _getDefaultVisibilities;
+    private _rescueTogglesToStore;
     /**
-     * Extracts visibility values from DOM nodes
+     * Rescues UE-SELECT elements from orderable items back to the hidden custom-select-store.
+     * Same rescue pattern as _rescueTogglesToStore — prevents innerHTML from destroying them.
      */
-    private _extractVisibilityFromRows;
+    private _rescueSelectsToStore;
     /**
-     * Parses visibility value from string to boolean
-     * Accepts "1", "true" as true, everything else as false
+     * Moves pre-allocated UE-BUTTON delete elements from the hidden custom-delete-store
+     * into orderable item slots. Same pattern as _moveSelectsIntoItems.
      */
-    private _parseVisibilityValue;
+    private _moveDeleteButtonsIntoItems;
     /**
-     * Merges extracted visibilities with default values for missing keys
+     * Rescues UE-BUTTON delete elements from orderable items back to the hidden custom-delete-store.
+     * Same rescue pattern as _rescueSelectsToStore — prevents innerHTML from destroying them.
      */
-    private _mergeWithDefaults;
+    private _rescueDeleteButtonsToStore;
     /**
-     * Apply the reordered composition to the block's HTML structure
-     * Updates the data-card-composition attribute and reorders product attributes
-     * Note: Reordering is only applied for grid layout
+     * Moves pre-allocated reorder icon UE-BUTTON elements from the hidden reorder-icon-store
+     * into orderable item drag-handle slots. Same pattern as _moveDeleteButtonsIntoItems.
      */
-    private _applyCompositionToBlock;
+    private _moveReorderIconsIntoItems;
     /**
-     * Reorders attribute rows within each product card based on composition order
-     * Targets the tbody inside each product-attribute-cell to preserve card structure
+     * Rescues reorder icon UE-BUTTON elements from orderable items back to the hidden reorder-icon-store.
+     * Same rescue pattern as _rescueDeleteButtonsToStore — prevents innerHTML from destroying them.
      */
-    private _reorderProductAttributes;
+    private _rescueReorderIconsToStore;
+    private _setupEventListeners;
+    private _setupDragAndDrop;
+    private _setupDeleteHandler;
+    private _onAddAttribute;
     /**
-     * Builds HTML string with attributes ordered according to composition
+     * Removes a single custom attribute by its index in the customAttrs array.
+     * Index-based to correctly handle duplicate attributes.
      */
-    private _buildCompositionHtml;
+    private _onDeleteCustomAttribute;
+    /**
+     * Handles changing a custom attribute's selection via its inline _GuSelect.
+     * Uses the customIndex to target only the specific instance, supporting duplicates.
+     */
+    private _onCustomAttributeChanged;
+    private _onReorder;
+    private _injectCustomAttributeHtml;
+    private _injectGridAttributeRow;
+    private _injectListAttributeRow;
+    /**
+     * Removes a custom attribute by rebuilding product card content without it.
+     * The composition parameter should already have the deleted key removed.
+     */
+    private _removeCustomAttributeHtml;
+    /**
+     * Atomically updates both composition and custom-attributes in a single apply()
+     * so that onTemplateNodeUpdated fires only once with fully consistent state.
+     * Two separate apply() calls would cause an intermediate onTemplateNodeUpdated
+     * where composition is updated but customAttributes still has the old order,
+     * producing a flicker on the custom attribute dropdowns.
+     */
+    private _updateBothAttributes;
+    /**
+     * Reorders attribute rows within each product card based on composition order.
+     * Only used for grid layout (list layout has fixed 3-column structure).
+     */
+    private _reorderProductAttributes;
     /**
-     * Apply visibility changes to the block's HTML structure
-     * Updates display style and data-visibility attribute for all matching elements
-     * - <tr> elements: use display: none / table-row
-     * - <td> elements: use display: none / table-cell
+     * Builds HTML string with attributes ordered according to composition.
+     * Queries existing rows from the container by data-attribute-type.
      */
+    private _buildCompositionHtml;
     private _applyVisibilityToBlock;
     /**
-     * Gets the current layout orientation from store or DOM
+     * Finds the composition array index for the Nth custom attribute (0-based).
+     * Scans left-to-right, counting only entries with the custom prefix.
+     * The customIndex maps 1:1 with the customAttrs array order.
      */
+    private _findNthCustomKeyIndex;
     private _getCurrentLayout;
     /**
-     * Updates orderable state based on layout orientation
-     * Adds/removes disabled class to hide drag icons for list layout
+     * Extracts background color properties from existing card elements.
+     * Checks both `.product-card-segment` (where applyCardBackgroundColor sets bg for grid)
+     * and `.product-card-wrapper` (where CardBackgroundColorControl sets bg).
+     * Used when injecting new attribute cells to match the card's current background.
+     */
+    private _extractSegmentBgFromCard;
+    private _getControlContainer;
+    /**
+     * Adds/removes orderable-disabled class based on layout orientation.
+     * List layout hides drag handles via CSS and disables draggable attribute
+     * to prevent native browser drag-and-drop from working without the handle.
      */
     private _updateOrderableState;
     /**
-     * Subscribe to store orientation changes
-     * Updates orderable state when layout changes via the layout control
+     * Disables the "Add Attribute" button when the custom attribute limit is reached
+     * or when all available filters have already been added (no unused attributes left).
+     */
+    private _updateAddButtonState;
+    /**
+     * Subscribes to store changes for orientation and filterList updates.
+     * When filterList changes (e.g. after async fetch), re-renders dropdowns with new options.
+     */
+    private _subscribeToStoreChanges;
+    /**
+     * Looks up the display name for an attribute from the store's filterList.
+     * Falls back to Title Case conversion of the snake_case attribute name.
+     */
+    private _getDisplayNameForAttribute;
+    /**
+     * Resolves the display content for a custom attribute cell.
+     * Uses the real product value from the store when available, falls back to displayName.
      */
-    private _subscribeToOrientationChanges;
+    private _resolveAttributeContent;
+    private _getGridCellHtml;
+    private _getListRowHtml;
 }

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

@@ -0,0 +1,105 @@
+/**
+ * Custom Attribute Element Controls
+ *
+ * Controls for styling custom product attribute elements in recommendation cards.
+ *
+ * Unlike built-in elements (Name, Price, etc.) where all instances share a single
+ * block ID and should be styled uniformly, custom attributes are conceptually
+ * different elements (e.g., "brand" vs "rating_star") that need independent styling.
+ *
+ * Each custom attribute element carries a unique `product-attr` HTML attribute
+ * (e.g., `product-attr="product_attribute.brand"`). The controls below use this
+ * attribute to scope style changes to only the same attribute type across all
+ * product cards — changing "brand" color won't affect "rating_star" color.
+ */
+import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+/**
+ * Grouped Custom Attribute Controls
+ * Use this object for cleaner imports in extension.ts
+ */
+export declare const CustomAttributeControls: {
+    readonly align: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly color: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly size: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly style: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly fontFamily: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly background: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly paddings: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+            getParentControlId(): string;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: ImmutableHtmlNode): boolean;
+        };
+    };
+};

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

@@ -18,6 +18,7 @@ export { OmnibusPriceControls } from './omnibusPrice';
 export { OmnibusDiscountControls } from './omnibusDiscount';
 export { ButtonControls } from './button';
 export { ImageControls } from './image';
+export { CustomAttributeControls } from './customAttribute';
 export { SpacingControl, SPACING_CONTROL_ID } from './spacing';
 export { CardBackgroundColorControl, CARD_BACKGROUND_COLOR_CONTROL_ID } from './cardBackground';
 export { LayoutControl, LAYOUT_CONTROL_ID } from './layout';

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

@@ -56,6 +56,8 @@ export interface RegenerateProductRowsOptions {
     products?: RecommendationProduct[];
     /** Optional: pass layout directly to avoid stale DOM reads after setAttribute */
     layout?: Orientation;
+    /** Optional: pass composition directly to avoid stale DOM reads after setAttribute */
+    composition?: string[];
 }
 /**
  * Regenerates only the mobile product container rows.

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

@@ -22,6 +22,7 @@ interface PerBlockConfigs {
     textTrimming: boolean;
     unresponsive: boolean;
     size: string;
+    customAttributes: string[];
 }
 interface PerBlockState {
     recommendationConfigs: PerBlockConfigs;

package/dist/src/extensions/Blocks/Recommendation/templates/grid/elementRenderer.d.ts

@@ -1,4 +1,4 @@
-import type { ElementRenderer } from '../utils';
+import { type ElementRenderer } from '../utils';
 /**
  * Grid element renderer
  * Each element returns a `<td>` containing a nested table structure:

package/dist/src/extensions/Blocks/Recommendation/templates/list/elementRenderer.d.ts

@@ -1,4 +1,4 @@
-import type { ElementRenderer } from '../utils';
+import { type ElementRenderer } from '../utils';
 /**
  * List element renderer
  * - Image and Button return `<td>` cells for the 3-column layout

package/dist/src/extensions/Blocks/Recommendation/templates/list/template.d.ts

@@ -1,18 +1,24 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
 /**
  * Generates a list product card with 3-column layout
- * Uses listElementRenderer to render Image, Info content, and Button
+ * Uses buildElementRenderer to render Image, Info content, and Button
  * Layout: [Image (120px)] [Info table (flexible)] [Button (100px)]
+ *
+ * The info cell rows are built dynamically from the composition array,
+ * supporting both built-in attributes and custom product attributes.
+ * Image and Button are always separate columns (not in the info cell).
  * @param product - The product data
+ * @param composition - Array defining order of card elements
  * @returns HTML string for a single product card row
  */
-export declare function getListProductCard(product: RecommendationProduct): string;
+export declare function getListProductCard(product: RecommendationProduct, composition?: string[]): string;
 /**
  * Prepares list product rows
  * Each product is a full-width row with 3-column layout
  * @param products - Array of products to display
+ * @param composition - Array defining order of card elements
  * @returns HTML string for product rows
  */
-export declare function prepareProductRows(products: RecommendationProduct[]): string;
+export declare function prepareProductRows(products: RecommendationProduct[], composition?: string[]): string;
 export declare function getDefaultTemplate(): string;
-export declare function generateBlockTemplate(products: RecommendationProduct[], title?: string): string;
+export declare function generateBlockTemplate(products: RecommendationProduct[], title?: string, composition?: string[]): string;

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

@@ -1,5 +1,35 @@
 import type { RecommendationProduct } from '@@/Types/recommendation';
 import { ATTR_PRODUCT_IMAGE, ATTR_PRODUCT_NAME, ATTR_PRODUCT_PRICE, ATTR_PRODUCT_OLD_PRICE, ATTR_PRODUCT_OMNIBUS_PRICE, ATTR_PRODUCT_OMNIBUS_DISCOUNT, ATTR_PRODUCT_BUTTON } from '../constants';
+/**
+ * Converts a snake_case attribute name to Title Case display name.
+ * e.g., "rating_star" → "Rating Star"
+ */
+export declare function toDisplayName(attrName: string): string;
+/**
+ * Callback that generates the cell HTML for a custom product attribute.
+ * Layout-specific: grid returns `<td>…`, list returns `<tr><td>…</td></tr>`.
+ */
+export type CustomCellHtmlGetter = (attrName: string, content: string) => string;
+/**
+ * Symbol key for embedding custom attribute HTML in an ElementRenderer.
+ * Grid and list renderers store their custom-attribute cell template under this key
+ * so that `buildElementRenderer` can read it without a separate callback parameter.
+ *
+ * Using a Symbol avoids conflicts with the string index signature — call sites that
+ * access `renderer[stringKey]` always get `(product) => string` without type narrowing.
+ */
+export declare const CUSTOM_CELL_HTML: unique symbol;
+/**
+ * Extends a base element renderer with custom attribute entries from the composition.
+ * Each `customAttr:<name>` key in the composition gets a renderer closure that calls
+ * the layout-specific custom cell HTML getter stored in `baseRenderer[CUSTOM_CELL_HTML]`.
+ *
+ * This ensures that custom attribute renderers live inside the ElementRenderer object
+ * alongside built-in ones, so template code can use a uniform lookup for all attributes.
+ * @param baseRenderer - The built-in element renderer (grid or list), must include a [CUSTOM_CELL_HTML] entry
+ * @param composition - Array of attribute keys including `customAttr:*` entries
+ */
+export declare function buildElementRenderer(baseRenderer: ElementRenderer, composition: string[]): ElementRenderer;
 export type Orientation = 'list' | 'grid';
 /**
  * Options for prepareProductRows unified function
@@ -13,8 +43,11 @@ export interface PrepareProductRowsOptions {
     composition?: string[];
 }
 /**
- * Element renderer interface for product card elements
- * Keys are ATTR_PRODUCT_* constants for consistent naming
+ * Element renderer interface for product card elements.
+ * Keys are ATTR_PRODUCT_* constants for built-in elements.
+ * The index signature allows dynamic custom attribute keys (e.g., "customAttr:rating_star").
+ * The Symbol-keyed [CUSTOM_CELL_HTML] entry stores the layout-specific HTML template
+ * for custom attributes — used by `buildElementRenderer` to create custom entries.
  */
 export interface ElementRenderer {
     [ATTR_PRODUCT_IMAGE]: (product: RecommendationProduct) => string;
@@ -24,6 +57,8 @@ export interface ElementRenderer {
     [ATTR_PRODUCT_OMNIBUS_PRICE]: (product: RecommendationProduct) => string;
     [ATTR_PRODUCT_OMNIBUS_DISCOUNT]: (product: RecommendationProduct) => string;
     [ATTR_PRODUCT_BUTTON]: (product: RecommendationProduct) => string;
+    [CUSTOM_CELL_HTML]?: CustomCellHtmlGetter;
+    [key: string]: (product: RecommendationProduct) => string;
 }
 /**
  * Product card getter function type

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

@@ -15,7 +15,7 @@ export interface NodeWithGetStyle {
 }
 /** Interface for nodes with parent method */
 export interface NodeWithParent {
-    parent: () => ImmutableHtmlNode | null;
+    parent: () => ImmutableHtmlNode | undefined;
 }
 /**
  * Type guard to check if a node has getStyle method
@@ -38,13 +38,13 @@ export declare function isTdNode(node: unknown): node is ImmutableHtmlNode & Nod
  * @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;
+export declare function safeGetStyle(node: ImmutableHtmlNode | null | undefined, 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;
+export declare function safeGetParent(node: ImmutableHtmlNode | null | undefined): ImmutableHtmlNode | null;
 /**
  * Safely retrieves the tag name from a node.
  * Handles both standard DOM tagName property and Stripo's getTagName() method.

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

@@ -99,18 +99,12 @@ ue-check-button.checked:not(.flat-white) input:checked + label .icon-button {
     color: var(--guido-color-primary-500);
 }
 
-ue-select.full-width .button {
-    border: none !important;
-    background-color: var(--guido-color-neutral-200) !important;
-    color: var(--guido-color-neutral-800) !important;
-}
-
 ue-select.full-width .button .icon-button {
     color: var(--guido-color-gray-600) !important;
 }
 
 ue-select.full-width .button:hover:not(:disabled,.disabled) {
-    background-color: var(--guido-color-neutral-100) !important;
+    background-color: var(--guido-color-gray-0) !important;
 }
 
 ue-color {
@@ -130,6 +124,18 @@ ue-select-text-input .select-text-input-toggle .button {
     justify-content: center;
     background-color: transparent !important;
 }
+
+.control-shadow-wrapper,
+ue-button:not(.no-shadow,.flat-white),
+ue-toggle:not(.no-shadow,.flat-white),
+:is(ue-popover-toggler,ue-toggle-icon-picker,ue-emoji-toggle),
+.button-group,
+ue-counter:not(.no-shadow),
+:is(ue-select,ue-mergetags,ue-font-family-select):not(.no-shadow),
+ue-check-button:not(.no-shadow,.flat-white) {
+    background: none;
+    padding: 0;
+}
 `;
 export {
   o as default