@useinsider/guido 2.2.0-beta.5e11d20 → 2.2.0-beta.8abc7b6

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

@@ -0,0 +1,35 @@
+/**
+ * CSS selectors and data attributes used across the Recommendation extension
+ */
+/**
+ * Container selector for the product container element
+ * Used across controls to target elements within the recommendation block
+ */
+export declare const CONTAINER_SELECTOR = ".ins-recommendation-product-container";
+/** Desktop product container selector */
+export declare const DESKTOP_CONTAINER_SELECTOR = ".ins-recommendation-desktop-container";
+/** Mobile product container selector */
+export declare const MOBILE_CONTAINER_SELECTOR = ".ins-recommendation-mobile-container";
+/**
+ * Currency HTML attributes set on the block element
+ * These are read by the HTML compiler at runtime to format prices
+ */
+export declare const CURRENCY_ATTR: {
+    readonly CURRENCY: "currency";
+    readonly SYMBOL: "currency-symbol";
+    readonly ALIGNMENT: "currency-alignment";
+    readonly THOUSAND_SEPARATOR: "currency-thousand-separator";
+    readonly DECIMAL_SEPARATOR: "currency-decimal-separator";
+    readonly DECIMAL_COUNT: "currency-decimal-count";
+};
+/**
+ * Attribute type constants used in templates
+ * These are used as keys in ElementRenderer and composition arrays
+ */
+export declare const ATTR_PRODUCT_IMAGE = "productImage";
+export declare const ATTR_PRODUCT_NAME = "productName";
+export declare const ATTR_PRODUCT_PRICE = "productPrice";
+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";

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

@@ -0,0 +1,143 @@
+/**
+ * Button Element Controls
+ *
+ * Controls for styling the CTA button element in recommendation cards.
+ */
+/**
+ * Grouped Button Controls
+ * Use this object for cleaner imports in extension.ts
+ */
+export declare const ButtonControls: {
+    readonly align: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly border: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ButtonBorderControlLabels | undefined;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly borderRadius: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ButtonBorderRadiusControlLabels | undefined;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly color: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly fontFamily: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly margins: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly paddings: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly text: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly textSize: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly textStyleAndFontColor: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getParentControlId(): string;
+            getLabels(): import("@stripoinc/ui-editor-extensions").ButtonTextStyleAndFontColorControlLabels | undefined;
+            api: import("@stripoinc/ui-editor-extensions").ControlApi;
+            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly fitToContent: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+};

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

@@ -0,0 +1,31 @@
+import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '../../../common-control';
+export declare const CARD_BACKGROUND_COLOR_CONTROL_ID = "recommendation-card-background-color-control";
+/**
+ * Control for managing recommendation card background color
+ * This control is displayed in the Styles tab
+ */
+export declare class CardBackgroundColorControl extends CommonControl {
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    _setFormValues(): void;
+    /**
+     * Gets the appropriate selector based on layout
+     * Grid: .product-card-segment (inner table per product cell)
+     * List: .product-card-wrapper (table per product row)
+     */
+    _getCardSelector(): string;
+    /**
+     * Reads the current background color from the first product card element
+     * @returns The background color value or 'transparent' if not found
+     */
+    _getCurrentCardBackgroundColor(): string;
+    /**
+     * Handles card background color changes
+     * Applies the color to all product card elements based on layout
+     */
+    _onCardBackgroundColorChange(color: string): void;
+    _listenToFormUpdates(): void;
+}

package/dist/src/extensions/Blocks/Recommendation/{cardCompositionControl.d.ts → controls/cardComposition/index.d.ts}

@@ -1,5 +1,5 @@
 import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
-import { CommonControl } from '../common-control';
+import { CommonControl } from '../../../common-control';
 export declare const COMPOSITION_CONTROL_BLOCK_ID = "ui-elements-recommendation-card-composition";
 export interface CardCompositionItem {
     key: string;
@@ -7,6 +7,8 @@ export interface CardCompositionItem {
     visible: boolean;
 }
 export declare class RecommendationCardCompositionControl extends CommonControl {
+    private store;
+    private unsubscribeOrientation;
     getId(): string;
     getTemplate(): string;
     onRender(): void;
@@ -57,10 +59,12 @@ export declare class RecommendationCardCompositionControl extends CommonControl
     /**
      * 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
      */
     private _applyCompositionToBlock;
     /**
-     * Reorders attribute rows within each product row based on composition order
+     * Reorders attribute rows within each product card based on composition order
+     * Targets the tbody inside each product-attribute-cell to preserve card structure
      */
     private _reorderProductAttributes;
     /**
@@ -69,7 +73,23 @@ export declare class RecommendationCardCompositionControl extends CommonControl
     private _buildCompositionHtml;
     /**
      * Apply visibility changes to the block's HTML structure
-     * Updates display style and data-visibility attribute for all matching rows
+     * 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
      */
     private _applyVisibilityToBlock;
+    /**
+     * Gets the current layout orientation from store or DOM
+     */
+    private _getCurrentLayout;
+    /**
+     * Updates orderable state based on layout orientation
+     * Adds/removes disabled class to hide drag icons for list layout
+     */
+    private _updateOrderableState;
+    /**
+     * Subscribe to store orientation changes
+     * Updates orderable state when layout changes via the layout control
+     */
+    private _subscribeToOrientationChanges;
 }

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

@@ -0,0 +1,35 @@
+/**
+ * Image Element Controls
+ *
+ * Controls for styling the product image element in recommendation cards.
+ */
+/**
+ * Grouped Image Controls
+ * Use this object for cleaner imports in extension.ts
+ */
+export declare const ImageControls: {
+    readonly size: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+    readonly margins: {
+        new (): {
+            getId(): string;
+            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").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: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+        };
+    };
+};